/* ============================================================================
   noted. DESIGN SYSTEM
   public/noted-system.css

   The ONE source of truth for the entire product UI. Every page imports this
   file (<link rel="stylesheet" href="/noted-system.css">). Change a token or a
   component here and every page updates.

   Naming: all shared classes are prefixed `ns-` so they never collide with a
   page's local styles. Tokens are plain CSS custom properties on :root.

   Sections:  TOKENS · TYPOGRAPHY · COMPONENTS · HEADER
   ============================================================================ */

/* ============================================================================
   CANONICAL UI SPEC — extracted from the approved reference (the "New Reservation"
   modal, index.html `.sm-*` shell). Every admin surface (hub + 7 modals, uploader,
   wine list, floor plan) consumes THIS. Values are exact, not aspirational.

   FONTS (only these three families, all already loaded on every page):
     display  = --font-display   "aesthet-nova", Georgia, serif   (headings/titles)
     body     = --font-primary   "Hanken Grotesk", sans-serif      (body + data + buttons)
     eyebrow  = --font-secondary "Newsreader", Georgia, serif      (labels/subtitles/captions)

   HEADER SCALE (one family/weight system, display font, negative tracking):
     page/hero title  .ns-display        aesthet-nova 800  clamp(33px,8.2vw,45px)  -.02em
     card/page title  .ns-title          aesthet-nova 700  24px                    -.015em
     section title    .ns-section-title  aesthet-nova 700  20px   Title Case       -.015em
     modal title      .sm-title          aesthet-nova 700  22px                    -.01em

   SUBTITLE / EYEBROW (one recipe):
     Newsreader 400, spaced, color var(--soft). Modal subtitle .sm-step-ind: 10px /
     .22em / lowercase. Value eyebrow .ns-eyebrow: 11.5px / .18em / UPPERCASE.

   FIELD (one recipe — native <select> stays native, box may normalize):
     bg #fff · border 1px solid var(--line) · radius 10px · inset 0 1px 2px rgba(29,30,27,.04)
     single-line height 44px · focus border-color rgba(29,30,27,.28)

   PRIMARY BUTTON (.ns-btn-primary / .sm-btn — max ONE ink primary per view):
     height 44 · ink fill var(--ink) · text var(--paper) · radius var(--r-sm) 12px
     Hanken 700 · 14px · text-transform none · no border/shadow

   SECONDARY BUTTON (canonical = floor .pbtn, outlined-bold):
     height 44 · bg var(--card) · border 1px solid var(--line) · radius 10px
     Hanken 700 · 11.5px · .02em · color var(--ink) · padding 0 16px

   SURFACE / OVERLAY:
     panel  bg var(--card) · border none · radius 16px · shadow 0 20px 60px rgba(29,30,27,.22)
     overlay dim rgba(29,30,27,.34) + backdrop blur 1.5px
     card   .ns-card radius var(--r) 18px · shadow var(--sh)

   SPACING RHYTHM (modal): header padding 20px 24px + 1px var(--line) divider ·
     body inset 24px 24px 32px · section gap ~24px.

   COLOR: neutrals only — no gold. Map legacy gold → text var(--soft)/var(--ink),
     borders var(--line), tints var(--well). Status semaphore (floor plan) is
     intentionally semantic and out of this neutral chrome.
   ============================================================================ */

/* No Google Fonts import (qa-cross, 2026-10-11): the Desk is the only page that loads this file, and its staff
   stylesheet sets every family to Open Sauce (noted-team-polish.css), so Hanken Grotesk and Newsreader were never
   drawn. The import was a render-blocking stylesheet from another origin before the first paint. */

/* item 6 — disable double-tap-to-zoom everywhere (keeps pinch-zoom + scrolling). Imported by every page.
   Element/class rules with their own touch-action (drag = none, swipe = pan-y) override this default. */
*{touch-action:manipulation;}

/* ============================== TOKENS ==================================== */
:root{
  /* color */
  --paper:#fbfcfa;        /* page ground */
  --card:#ffffff;         /* raised surface */
  --ink:#1d1e1b;          /* primary text / solid fills */
  --soft:#6e716c;         /* secondary text */
  --faint:#a4a7a1;        /* tertiary text / hairline labels */
  --well:#eff1ee;         /* recessed ground (pill wells, icon chips) */
  --well2:#e7eae6;        /* raised-within-well (selected pill) */
  --press:#e9ece8;        /* touch press feedback */
  --line:#eaece8;         /* hairlines + 1px borders */

  /* elevation (exact hub values) */
  --sh:0 1px 1px rgba(29,30,27,.04),0 8px 24px rgba(29,30,27,.06);
  --sh-up:0 2px 3px rgba(29,30,27,.05),0 18px 44px rgba(29,30,27,.10);
  --sh-in:inset 0 1px 2px rgba(29,30,27,.04);   /* inputs set into the surface */

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);

  /* radius */
  --r:18px;        /* cards / tiles / lists */
  --r-sm:12px;     /* pills / inputs / buttons */

  /* type families */
  --font-primary:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-secondary:"Newsreader",Georgia,serif;
  /* display — Aesthet Nova via Adobe Fonts (Typekit kit pxo4ipi); served as a webfont so it loads on
     ALL devices incl. iOS. Adobe family name is lowercase-hyphenated. Georgia,serif is the swap fallback. */
  --font-display:"aesthet-nova",Georgia,serif;
}

/* ============================ TYPOGRAPHY ================================== */
/* Base text rhythm — opt a page body in with class="ns-body" or use the vars. */
.ns-body{font-family:var(--font-primary);font-weight:400;font-size:14.5px;line-height:1.45;color:var(--ink);}

/* display — the hub greeting (Aesthet Nova) */
.ns-display{font-family:var(--font-display);font-weight:800;font-size:clamp(33px,8.2vw,45px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);}

/* title — large card / modal heading (Aesthet Nova) */
.ns-title{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.015em;line-height:1.15;color:var(--ink);}

/* section — section header (Aesthet Nova, Title Case) */
.ns-section-title{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.015em;line-height:1.2;color:var(--ink);text-transform:none;}

/* eyebrow — Newsreader spaced caps (the small label above a value) */
.ns-eyebrow{font-family:var(--font-secondary);font-weight:400;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);}

/* label — quiet inline/field label */
.ns-label{font-family:var(--font-secondary);font-weight:400;font-size:12.5px;letter-spacing:.02em;color:var(--soft);}

/* micro — tiny tracked caps (chips / status) */
.ns-micro{font-family:var(--font-secondary);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}

/* ============================ COMPONENTS ================================= */

/* --- card: white raised surface with press feedback --- */
.ns-card{background:var(--card);border:none;border-radius:var(--r);box-shadow:var(--sh);padding:16px;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);}
.ns-card:active{transform:scale(.97);background:var(--press);}
@media (hover:hover){ .ns-card:hover{background:var(--well);} }

/* --- tile: card sized for a grid (icon + name) --- */
.ns-tile{background:var(--card);border:none;border-radius:20px;padding:18px;min-height:120px;cursor:pointer;
  color:var(--ink);text-decoration:none;text-align:left;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--sh);transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);}
/* touch: visible press; cursor: lift on hover */
.ns-tile:active{transform:scale(.97);background:var(--press);}
@media (hover:hover){ .ns-tile:hover{transform:translateY(-2px);box-shadow:var(--sh-up);background:var(--well);} }
.ns-tile .ns-tile-ico{width:34px;height:34px;border-radius:12px;background:var(--well);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.ns-tile .ns-tile-ico svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.7;fill:none;}
.ns-tile .ns-tile-name{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.2;margin-top:14px;}

/* --- buttons --- */
.ns-btn-primary{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-weight:700;font-size:14px;
  background:var(--ink);color:var(--paper);border:none;border-radius:var(--r-sm);padding:14px 22px;cursor:pointer;
  transition:transform .2s var(--ease),opacity .2s var(--ease);}
.ns-btn-primary:active{transform:scale(.97);opacity:.92;}
.ns-btn-primary:disabled{opacity:.45;cursor:default;transform:none;}

.ns-btn-ghost{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-weight:700;font-size:14px;
  background:transparent;color:var(--ink);border:none;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-sm);padding:14px 22px;cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease);}
.ns-btn-ghost:active{transform:scale(.97);background:var(--press);}

/* --- pills: a recessed well holding segmented options --- */
.ns-pill-well{display:flex;gap:4px;background:var(--well);border-radius:var(--r-sm);padding:4px;}
.ns-pill{flex:1;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:10px;
  font-family:var(--font-primary);font-weight:600;font-size:13px;color:var(--soft);padding:10px 14px;cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);}
.ns-pill:active{transform:scale(.97);}
.ns-pill.on{background:var(--well2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(29,30,27,.12);}

/* --- input: set into the surface with an inset shadow --- */
.ns-input{width:100%;box-sizing:border-box;font-family:var(--font-primary);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-in);padding:12px 14px;
  transition:border-color .2s var(--ease);}
.ns-input::placeholder{color:var(--faint);}
.ns-input:focus{outline:none;border-color:rgba(29,30,27,.28);}

/* --- list: inset grouped list (rows with hairline separators) --- */
.ns-list{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;}
.ns-list:empty{display:none;}
.ns-list-row{display:flex;align-items:center;gap:14px;width:100%;background:transparent;border:none;color:var(--ink);
  text-align:left;font:inherit;padding:15px 18px;cursor:pointer;position:relative;transition:background .2s ease;}
.ns-list-row:active{background:var(--well);}
.ns-list-row + .ns-list-row::before{content:'';position:absolute;top:0;left:64px;right:0;height:1px;background:var(--line);}

/* --- avatar: circular initials --- */
.ns-avatar{width:36px;height:36px;border-radius:50%;background:var(--well);flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-primary);font-weight:700;font-size:13.5px;color:var(--ink);}
.ns-avatar.live{background:var(--well2);box-shadow:inset 0 0 0 1.5px var(--ink);}

/* ============================== HEADER =================================== */
/* Standard admin header: client wordmark only, modest (DOF-header size), left-aligned.
   No noted. wordmark, no stacked treatment. Optional back link sits above it. */
.ns-header{display:block;padding:34px 40px 0;}
.ns-header .ns-back{display:inline-block;font-family:var(--font-primary);font-size:11px;letter-spacing:.22em;
  text-transform:lowercase;color:var(--soft);text-decoration:none;margin-bottom:22px;transition:color .2s var(--ease);}
.ns-header .ns-back:hover{color:var(--ink);}
.ns-wordmark{height:16px;width:auto;max-width:60vw;display:block;filter:brightness(0);opacity:.9;}

/* reduced motion: kill transitions/transforms */
@media (prefers-reduced-motion:reduce){
  .ns-card,.ns-tile,.ns-btn-primary,.ns-btn-ghost,.ns-pill,.ns-list-row{transition:none!important;}
  .ns-card:active,.ns-tile:active,.ns-btn-primary:active,.ns-btn-ghost:active,.ns-pill:active{transform:none!important;}
}