/* ============================================================================
   TPS DESIGN SYSTEM — the single source of truth for the booking system's look.
   ----------------------------------------------------------------------------
   Follows "Gilded Restraint" (website/design-philosophy.md) and matches the LIVE
   website's tokens exactly (website/index.html :root), so the booking app and the
   marketing site read as one product:
     - FIVE materials only: espresso, antique gold (champagne highlight), cream,
       ink, white. A sixth colour is a confession of doubt.
     - Space is the medium: generous, deliberate margins.
     - One musical type scale, obeyed everywhere — never arbitrary sizes.
     - Sharp radii (2-3px). Rounded corners read generic, not gilded.
   Every page links this FIRST, then adds only its own page-specific rules.
   ========================================================================== */

:root{
  /* ---- the five materials (identical to the live website) ---- */
  --espresso:#171310;
  --espresso-2:#251e16;      /* raised dark surface (hero gradients) */
  --gold:#a9762e;            /* the one voice of light */
  --gold-l:#cda558;          /* champagne highlight — never gold's rival */
  --gold-hover:#976823;
  --cream:#f5f2ea;           /* warm paper */
  --cream-2:#efeadf;         /* paper, one shade in */
  --white:#ffffff;
  --ink:#241d15;             /* ink that remembers the espresso it came from */
  --ink-soft:#5a4f42;        /* 6.97:1 on cream — safe for real text */
  /* --mute was #b3a790, which measures 2.12:1 on cream: unreadable in sunlight and an AA
     failure wherever it carried real words (table headers, hints, counts, micro-labels).
     Darkened to keep the "quiet" role while passing contrast. Use it for de-emphasis only;
     anything a person must READ should use --ink-soft. */
  --mute:#8a7f6e;

  /* ---- rules & hairlines ---- */
  --line:rgba(36,29,21,.09);          /* ink hairline (table rows, dividers) */
  --line-gold:rgba(169,118,46,.22);   /* gold hairline (card + panel borders) */

  /* ---- status colours (shared by the calendar and the groomer app so a dog's
         state reads identically in both surfaces) ---- */
  --booked:#8a8175; --checkedin:#a9762e; --inprogress:#4d6b74;
  --ready:#5f7d46; --completed:#6d7b52; --noshow:#a0503a;
  --ok:#6d7b52;

  /* ---- type ---- */
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,sans-serif;

  /* ---- MUSICAL TYPE SCALE (~1.25 minor third). Use these, not raw px. ---- */
  --t-micro:10px;   /* engraved-brass micro-labels (uppercase, tracked wide) */
  --t-fine:12px;    /* fine print, chips */
  --t-small:13px;   /* secondary body */
  --t-body:15px;    /* body — comfortable, never below this for reading */
  --t-lead:17px;    /* lead-in / emphasised body */
  --t-h3:21px;
  --t-h2:26px;
  --t-h1:33px;
  --t-display:41px;

  /* ---- SPACING (8px rhythm; halves allowed for dense control rows) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---- form (sharp, gilded) ---- */
  --r-card:3px;     /* cards, panels, sheets */
  --r-control:2px;  /* buttons, inputs, toasts */
  --r-pill:999px;
  --shadow-card:0 1px 3px rgba(23,19,16,.05);
  --shadow-pop:0 24px 60px -20px rgba(23,19,16,.5);

  /* ---- tracking for the uppercase micro-labels ---- */
  --track-label:.09em;
  --track-wordmark:.22em;

  /* ---- ergonomics ---- */
  --tap:44px;       /* minimum touch target (Apple HIG) */
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---- the sandbox ribbon (every page wears it while this is a test build) ---- */
.sandbox{
  background:var(--espresso);color:var(--gold-l);text-align:center;
  font-size:var(--t-fine);padding:var(--s-2) var(--s-3);
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
/* THE NOTCH (31 Jul). Installed as a PWA we declare viewport-fit=cover +
   apple-mobile-web-app-status-bar-style=black-translucent, which means the page draws FULL SCREEN
   underneath the iOS status bar — so the clock and battery landed on top of the wordmark and the
   +NEW button. Every safe-area-inset in this codebase was -bottom; the top was never handled.
   The ribbon is the first element on every page AND it is dark, so growing IT into the inset both
   clears the header and gives the white status-bar text an espresso band to sit on, which is what
   black-translucent is for. `body > .sandbox` (one element + one class) outranks the per-page
   `.sandbox` rules in their inline <style> blocks, so this wins regardless of source order while
   still leaving each page's own left/right/bottom padding alone.
   env() resolves to 0 in a normal browser tab, so this is a no-op everywhere except an installed
   app on a notched phone.
   ⚠️ AT GO-LIVE, when the sandbox ribbon is deleted, this inset MUST move to whatever becomes the
   first element — otherwise the header silently slides back under the clock on every phone. */
body > .sandbox{ padding-top:calc(var(--s-2) + env(safe-area-inset-top)); }

/* ---- wordmark ---- */
.brand{font-family:var(--serif);font-weight:600;color:var(--ink);text-decoration:none}
.brand em{font-style:italic;color:var(--gold)}

/* ---- micro-label: uppercase, tracked wide as an engraved brass plate ---- */
.label,label{
  display:block;font-size:var(--t-micro);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin:0 0 var(--s-1);
}

/* ---- controls ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap);
  background:var(--gold);color:#fff;border:1px solid var(--gold);
  border-radius:var(--r-control);padding:var(--s-3) var(--s-5);
  font-family:var(--sans);font-size:var(--t-fine);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--gold-hover);border-color:var(--gold-hover)}
.btn.ghost{background:var(--white);color:var(--ink-soft);border-color:var(--line-gold)}
.btn.ghost:hover{background:var(--white);border-color:var(--gold);color:var(--gold)}
.btn.block{width:100%}

input,select,textarea{
  font-family:var(--sans);
  font-size:16px;              /* 16px MINIMUM — anything less makes iOS zoom on focus */
  color:var(--ink);background:var(--white);
  border:1px solid var(--line-gold);border-radius:var(--r-control);
  padding:var(--s-3);min-height:var(--tap);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}

/* ---- surfaces ---------------------------------------------------------- */
.panel,.surface{
  background:var(--white);border:1px solid var(--line-gold);
  border-radius:var(--r-card);padding:var(--s-4) var(--s-5);
}

/* ---- toast ---- */
.toast{
  position:fixed;left:50%;bottom:var(--s-5);transform:translateX(-50%) translateY(12px);
  background:var(--espresso);color:var(--cream);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-control);
  font-size:var(--t-small);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:60;
  border:1px solid rgba(205,165,88,.35);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- tactile press feedback (owner, 30 Jul: "clicking onto things doesnt really show a tactic
   feedback") -------------------------------------------------------------------------------------
   Every pressable thing across every screen compresses slightly while your finger is on it — the
   universal "yes, you're pressing this" signal. transform doesn't reflow layout, so it is safe to
   apply this broadly; the reduced-motion block below already zeroes the transition for users who
   opt out. Draggable calendar blocks are excluded: shrinking under a drag reads as losing grip. */
button:not(:disabled):active,
.dpill:active, .agrow:not(.req):active, .qbrow:active, .qbpet:active, .smbtn:active,
a.create:active, .tps-nav a:active, .stchip:active, .slot:active, .svc-card:active,
.reqbtn:active, .bar:active{
  transform:scale(.965);
  transition:transform .06s;
}
/* the press ripple's cousin for plain links in headers/nav */
a:active{opacity:.7}

/* ---- accessibility ------------------------------------------------------ */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---- mobile ergonomics -------------------------------------------------- */
@media (max-width:640px){
  body{font-size:var(--t-body)}
  /* nothing may push the page sideways — a wide child scrolls itself */
  html,body{max-width:100%;overflow-x:hidden}
}