/* ==========================================================================
   clova.css — WeRoster / Clova Co  ·  On Call Module Component Library
   ==========================================================================
   Load order:
     1. This file (tokens + reset + components)
     2. Screen-specific overrides (if any)
     3. shell.js  (injects proto-bar, top-nav, bottom-nav)

   All component classes reference CSS variables only — no hardcoded values.
   Exception: SVG data-URI arrows in .select (CSS vars are inert inside url()).
   ========================================================================== */


/* ============================================================
   §1  FONT FACES  (Geist Sans + Geist Mono)
   ============================================================
   Geist web-font files are not bundled with this prototype. The
   --font-sans / --font-mono stacks below fall back to the system
   UI font, which is how the prototype has always rendered. The
   @font-face src previously pointed at ../fonts/*.woff (a sibling
   of site/ that was never shipped); served from /clova-oncall-preferences/
   that produced two console 404s. Removed so the demo loads clean.
   To restore Geist, drop the .woff files in ./fonts/ and re-add the
   @font-face blocks with src: url('./fonts/GeistVF.woff'). */


/* ============================================================
   §2  DESIGN TOKENS  (verbatim from tokens.css)
   ============================================================ */
:root {
  /* --- Brand ------------------------------------------------ */
  --brand-cyan:    #0F91D0;
  --brand-sky:     #5BB7E4;
  --brand-primary: #4090CD;

  /* COM ramp (light) */
  --com-shade-50: #1D415C;
  --com-shade-30: #26567B;
  --com-shade-20: #306C9A;
  --com-shade-10: #3373A4;
  --com-primary:  #4090CD;
  --com-tint-10:  #C4DDF0;
  --com-tint-20:  #E2EEF8;
  --com-tint-30:  #ECF4FA;

  /* COM ramp (dark) */
  --com-dark-primary: #5BB7E4;
  --com-dark-tint-10: #376E89;
  --com-dark-tint-20: #295267;
  --com-dark-tint-30: #204050;

  /* Neutral ramp (light) */
  --n-1000: #000000;
  --n-900:  #0A0A0A;
  --n-800:  #171717;
  --n-750:  #262626;
  --n-700:  #303030;
  --n-600:  #525252;
  --n-500:  #737373;
  --n-400:  #A3A3A3;
  --n-300:  #D4D4D4;
  --n-250:  #E5E5E5;
  --n-200:  #EFEFEF;
  --n-150:  #F5F5F5;
  --n-100:  #FAFAFA;
  --n-50:   #FFFFFF;

  /* Status */
  --danger:          #F7444E;
  --danger-tint-40:  #FFEBEB;
  --warning:         #FFD335;
  --warning-tint-40: #FFF2C8;
  --success:         #27AE60;
  --success-tint:    #E6F6EC;
  --info:            var(--com-primary);
  --info-tint:       var(--com-tint-20);

  /* Semantic (shadcn/ui v4 contract) */
  --radius: 0.625rem; /* 10px */

  --background:          var(--n-50);
  --foreground:          var(--n-800);
  --card:                var(--n-50);
  --card-foreground:     var(--n-800);
  --popover:             var(--n-50);
  --popover-foreground:  var(--n-800);
  --primary:             var(--com-primary);
  --primary-foreground:  #FFFFFF;
  --secondary:           var(--n-100);
  --secondary-foreground:var(--n-800);
  --muted:               var(--n-100);
  --muted-foreground:    var(--n-500);
  --accent:              var(--com-tint-30);
  --accent-foreground:   var(--com-shade-30);
  --destructive:         var(--danger);
  --destructive-foreground: #FFFFFF;
  --border:              var(--n-250);
  --input:               var(--n-250);
  --ring:                var(--com-primary);

  /* Shell nav accent — resolves per subscribed product via [data-product] set by shell.js.
     Default (roster + both) = Clova blue. oncall override below. */
  --shell-accent:            var(--com-primary);
  --shell-accent-tint:       var(--com-tint-20);
  --shell-accent-dark:       var(--com-shade-30);
  --shell-accent-foreground: #FFFFFF;

  /* Focus ring — applied via :focus-visible in §FOCUS section (WCAG 2.4.7) */
  --focus-ring:        2px solid var(--ring);
  --focus-ring-offset: 2px;

  --surface:             var(--n-100);
  --surface-foreground:  var(--n-800);

  /* Sidebar */
  --sidebar:                    var(--n-100);
  --sidebar-foreground:         var(--n-800);
  --sidebar-primary:            var(--com-primary);
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent:             var(--com-tint-30);
  --sidebar-accent-foreground:  var(--com-shade-30);
  --sidebar-border:             var(--n-250);
  --sidebar-ring:               var(--com-primary);

  /* Charts */
  --chart-1: var(--com-primary);
  --chart-2: var(--brand-sky);
  --chart-3: var(--com-shade-20);
  --chart-4: var(--warning);
  --chart-5: var(--success);

  /* Type stack */
  --font-sans:    'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;

  /* Type ramp */
  --fs-display:       36px; --lh-display:       40px; --fw-display:       600; --tr-display:      -0.025em;
  --fs-title-1:       24px; --lh-title-1:       32px; --fw-title-1:       600; --tr-title-1:      -0.02em;
  --fs-title-2:       20px; --lh-title-2:       28px; --fw-title-2:       600; --tr-title-2:      -0.015em;
  --fs-heading:       18px; --lh-heading:       26px; --fw-heading:       600; --tr-heading:      -0.01em;
  --fs-subheading-1:  16px; --lh-subheading-1:  24px; --fw-subheading-1:  500; --tr-subheading-1: -0.005em;
  --fs-subheading-2:  16px; --lh-subheading-2:  24px; --fw-subheading-2:  600; --tr-subheading-2: -0.005em;
  --fs-body-1:        14px; --lh-body-1:        20px; --fw-body-1:        400; --tr-body-1:        0;
  --fs-body-2:        14px; --lh-body-2:        20px; --fw-body-2:        500; --tr-body-2:        0;
  --fs-caption:       12px; --lh-caption:       16px; --fw-caption:       400; --tr-caption:       0;
  --fs-tag:           11px;   /* label / tag text below caption */
  --fs-micro:         10px;   /* dense data: equity pips, calendar headers, cell metadata */

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-18: 72px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Elevation */
  --el-02: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --el-03: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --el-04: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --el-08: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.06);
  --el-12: 0 12px 20px -6px rgba(0,0,0,.10), 0 6px 12px -6px rgba(0,0,0,.06);
  --el-16: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.06);
  --el-24: 0 25px 50px -12px rgba(0,0,0,.18);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:    150ms;
  --dur-default: 200ms;
  --dur-slow:    300ms;
  --dur-sheet:   320ms;

  /* -------------------------------------------------------
     On Call module supplementary tokens
     (extend the palette; not in tokens.css core)
     ------------------------------------------------------- */
  --oc-green:      #1D9E75;   /* active tab, OnCall CTA accent, opt-in */
  --oc-green-tint: #E1F5EE;   /* opt-in badge bg, success row bg */
  --oc-green-dark: #085041;   /* opt-in badge text */
  --oc-amber:      #EF9F27;   /* doctor accent, warning, above-avg */
  --oc-amber-tint: #FAEEDA;   /* warning badge bg */
  --oc-amber-dark: #633806;   /* warning badge text */
  --oc-blue:       var(--com-primary);   /* aliased to brand blue — was #378ADD */
  --oc-blue-tint:  var(--com-tint-20);
  --oc-red:        var(--danger);
  --oc-red-tint:   var(--danger-tint-40);
  --oc-proto-bar:  #1A1A2E;   /* prototype bar background */

  /* -------------------------------------------------------
     Roster module supplementary tokens (shift periods)
     Used by my-roster, home, open-shifts, my-requests.
     ------------------------------------------------------- */
  --rs-shift-am:        #EF9F27;   /* AM shift period (warm/dawn) */
  --rs-shift-am-tint:   #FFF2C8;
  --rs-shift-am-dark:   #92400E;
  --rs-shift-pm:        var(--com-primary);  /* PM shift — brand blue */
  --rs-shift-pm-tint:   var(--com-tint-20);
  --rs-shift-pm-dark:   var(--com-shade-30);
  --rs-shift-night:     #303030;   /* night shift — n-700 */
  --rs-shift-night-tint:#E5E7EB;
  --rs-shift-night-dark:#1F2937;
  --rs-shift-open:      var(--success);      /* unallocated / open shift */
  --rs-shift-open-tint: var(--success-tint);
  --rs-shift-open-dark: #166534;
}

/* Shell accent override — OnCall-only tenants get green; roster + both inherit :root blue. */
[data-product="oncall"] {
  --shell-accent:            var(--oc-green);
  --shell-accent-tint:       var(--oc-green-tint);
  --shell-accent-dark:       var(--oc-green-dark);
}


/* ============================================================
   §3  DARK MODE
   ============================================================ */
.dark, [data-theme='dark'] {
  --background:          var(--n-900);
  --foreground:          #EDEDED;
  --card:                var(--n-800);
  --card-foreground:     #EDEDED;
  --popover:             var(--n-800);
  --popover-foreground:  #EDEDED;
  --primary:             var(--com-dark-primary);
  --primary-foreground:  var(--n-900);
  --secondary:           var(--n-750);
  --secondary-foreground:#EDEDED;
  --muted:               var(--n-750);
  --muted-foreground:    var(--n-400);
  --accent:              var(--com-dark-tint-20);
  --accent-foreground:   var(--com-dark-primary);
  --destructive:         #FF6B73;
  --destructive-foreground: var(--n-900);
  --border:              rgba(255,255,255,0.10);
  --input:               rgba(255,255,255,0.12);
  --ring:                var(--com-dark-primary);
  --surface:             var(--n-800);
  --surface-foreground:  #EDEDED;
  --sidebar:             var(--n-800);
  --sidebar-foreground:  #EDEDED;
  --sidebar-primary:     var(--com-dark-primary);
  --sidebar-accent:      var(--com-dark-tint-20);
  --sidebar-accent-foreground: var(--com-dark-primary);
  --sidebar-border:      rgba(255,255,255,0.10);
}


/* ============================================================
   §4  BASE RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background:              var(--background);
  color:                   var(--foreground);
  font-family:             var(--font-sans);
  font-size:               var(--fs-body-1);
  line-height:             var(--lh-body-1);
  font-weight:             var(--fw-body-1);
  font-feature-settings:   'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing:  antialiased;
  text-rendering:          optimizeLegibility;
}

h1, .t-display   { font: var(--fw-display)      var(--fs-display)/var(--lh-display)           var(--font-sans); letter-spacing: var(--tr-display);      margin: 0; }
h2, .t-title-1   { font: var(--fw-title-1)      var(--fs-title-1)/var(--lh-title-1)           var(--font-sans); letter-spacing: var(--tr-title-1);      margin: 0; }
     .t-title-2  { font: var(--fw-title-2)      var(--fs-title-2)/var(--lh-title-2)           var(--font-sans); letter-spacing: var(--tr-title-2); }
h3, .t-heading   { font: var(--fw-heading)      var(--fs-heading)/var(--lh-heading)           var(--font-sans); letter-spacing: var(--tr-heading);      margin: 0; }
    .t-subheading-1{ font: var(--fw-subheading-1) var(--fs-subheading-1)/var(--lh-subheading-1) var(--font-sans); letter-spacing: var(--tr-subheading-1); }
    .t-subheading-2{ font: var(--fw-subheading-2) var(--fs-subheading-2)/var(--lh-subheading-2) var(--font-sans); letter-spacing: var(--tr-subheading-2); }
p,  .t-body-1    { font: var(--fw-body-1)       var(--fs-body-1)/var(--lh-body-1)             var(--font-sans); margin: 0; }
    .t-body-2    { font: var(--fw-body-2)       var(--fs-body-2)/var(--lh-body-2)             var(--font-sans); }
small, .t-caption{ font: var(--fw-caption)      var(--fs-caption)/var(--lh-caption)           var(--font-sans); color: var(--muted-foreground); }
.t-overline      { font: 500 11px/14px var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.t-mono, code, kbd, samp { font-family: var(--font-mono); font-feature-settings: 'zero','ss01'; }
.t-num           { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

a { color: var(--oc-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

ul, ol { list-style: none; }

img, svg { display: block; }


/* ============================================================
   §5  BUTTONS
   ============================================================ */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-outline {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         0 var(--space-4);
  height:          36px;
  border-radius:   var(--radius-md);
  font-family:     var(--font-sans);
  font-size:       var(--fs-body-2);
  font-weight:     var(--fw-body-2);
  line-height:     1;
  cursor:          pointer;
  white-space:     nowrap;
  user-select:     none;
  text-decoration: none;
  border:          none;
  transition:      background  var(--dur-fast) var(--ease-standard),
                   color       var(--dur-fast) var(--ease-standard),
                   opacity     var(--dur-fast) var(--ease-standard),
                   box-shadow  var(--dur-fast) var(--ease-standard);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-outline:disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

/* Primary — filled brand blue */
.btn-primary {
  background: var(--primary);
  color:      var(--primary-foreground);
}
.btn-primary:hover  { background: color-mix(in oklab, var(--primary) 88%, black); }
.btn-primary:active { background: color-mix(in oklab, var(--primary) 75%, black); }

/* Green CTA variant — use for opt-in / submit actions */
.btn-primary.btn-green {
  background: var(--oc-green);
}
.btn-primary.btn-green:hover  { background: var(--oc-green-dark); }

/* Secondary — outlined */
.btn-secondary {
  background: var(--secondary);
  color:      var(--secondary-foreground);
  border:     1px solid var(--border);
}
.btn-secondary:hover  { background: color-mix(in oklab, var(--secondary) 80%, black); }
.btn-secondary:active { background: color-mix(in oklab, var(--secondary) 65%, black); }

/* Ghost — no fill */
.btn-ghost {
  background: transparent;
  color:      var(--foreground);
}
.btn-ghost:hover  { background: var(--muted); }
.btn-ghost:active { background: var(--secondary); }

/* Outline — border with transparent bg, accent hover */
.btn-outline {
  background: var(--background);
  color:      var(--foreground);
  border:     1px solid var(--input);
}
.btn-outline:hover  { background: color-mix(in oklab, var(--accent) 90%, black); color: var(--accent-foreground); }
.btn-outline:active { background: color-mix(in oklab, var(--accent) 80%, black); }

/* Size modifiers */
.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--fs-caption); border-radius: var(--radius-sm); }
.btn-lg { height: 44px; padding: 0 var(--space-6); font-size: var(--fs-subheading-1); border-radius: var(--radius-lg); }
.btn-full { width: 100%; }


/* ============================================================
   §6  CARD
   ============================================================ */
.card {
  background:    var(--card);
  color:         var(--card-foreground);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--el-02);
  overflow:      hidden;
}

.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
  padding:         var(--space-6);
  border-bottom:   1px solid var(--border);
}

.card-body {
  padding: 0 var(--space-6) var(--space-6);
}

.card-footer {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  padding:     0 var(--space-6) var(--space-6);
}

/* Urgency modifier */
.card.card-urgent {
  border-color: var(--oc-amber);
  background:   color-mix(in oklab, var(--oc-amber-tint) 40%, var(--background));
}

/* Success modifier */
.card.card-success {
  border-color: var(--oc-green);
}


/* ============================================================
   §7  PILL  (status badges)
   ============================================================ */
.pill {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1);
  padding:       2px 10px;
  border-radius: var(--radius-full);
  font-size:     var(--fs-caption);
  font-weight:   600;
  line-height:   var(--lh-caption);
  white-space:   nowrap;
  flex-shrink:   0;
}

.pill-green {
  background: var(--oc-green-tint);
  color:      var(--oc-green-dark);
}

.pill-amber {
  background: var(--oc-amber-tint);
  color:      var(--oc-amber-dark);
}

.pill-red {
  background: var(--danger-tint-40);
  color:      var(--danger);
}

.pill-blue {
  background: var(--com-tint-20);
  color:      var(--com-shade-30);
}

.pill-neutral {
  background: var(--muted);
  color:      var(--muted-foreground);
}

.pill-outline {
  background: transparent;
  color:      var(--foreground);
  border:     1px solid var(--border);
}


/* ============================================================
   §8  METRIC CARD  (stats strip / equity panel)
   ============================================================ */
.metric-card {
  background:     var(--card);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  padding:        var(--space-4);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.metric-label {
  font-size:      var(--fs-caption);
  font-weight:    500;
  color:          var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.metric-value {
  font-size:          var(--fs-display);
  font-weight:        var(--fw-display);
  color:              var(--foreground);
  line-height:        1;
  font-variant-numeric: tabular-nums;
}
/* Equity colouring — below avg = green (good), above avg = amber (bad) */
.metric-value.below { color: var(--oc-green); }
.metric-value.above { color: var(--oc-amber); }

.metric-trend {
  font-size: var(--fs-caption);
  color:     var(--muted-foreground);
}
.metric-trend.below { color: var(--oc-green); }
.metric-trend.above { color: var(--oc-amber); }
.metric-trend.at    { color: var(--muted-foreground); }

/* Compact 3-column strip layout (for profile header) */
.metric-strip {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  border-top:            1px solid var(--border);
}
.metric-strip .metric-cell {
  padding:     var(--space-3) 0;
  text-align:  center;
  border-right:1px solid var(--border);
}
.metric-strip .metric-cell:last-child { border-right: none; }
.metric-strip .metric-value {
  font-size: var(--fs-title-2);
}
.metric-strip .metric-label {
  font-size:  var(--fs-micro);
  margin-top: var(--space-1);
}
.metric-strip .metric-avg {
  font-size: 10px;
  color:     var(--muted-foreground);
  margin-top: 2px;
}


/* ============================================================
   §9  TOP BAR
   ============================================================ */
.top-bar {
  position:       sticky;
  top:            44px; /* below the 44px proto bar injected by shell.js */
  z-index:        100;
  display:        flex;
  align-items:    center;
  height:         52px;
  padding:        0 var(--space-4);
  background:     var(--background);
  border-bottom:  1px solid var(--border);
  gap:            var(--space-3);
  flex-shrink:    0;
}

.top-bar-title {
  flex:          1;
  font-size:     var(--fs-subheading-1);
  font-weight:   var(--fw-subheading-1);
  color:         var(--foreground);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.top-bar-back {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   var(--radius-full);
  color:           var(--oc-blue);
  cursor:          pointer;
  flex-shrink:     0;
  background:      transparent;
  border:          none;
  transition:      background var(--dur-fast) var(--ease-standard);
}
.top-bar-back:hover { background: var(--muted); }

.top-bar-action {
  font-size:  var(--fs-caption);
  color:      var(--muted-foreground);
  cursor:     pointer;
  flex-shrink:0;
  background: none;
  border:     none;
  padding:    var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-standard);
}
.top-bar-action:hover { color: var(--foreground); }


/* ============================================================
   §10  BOTTOM NAV
   ============================================================ */
.bottom-nav {
  position:     fixed;
  bottom:       0;
  left:         0;
  right:        0;
  display:      flex;
  background:   var(--background);
  border-top:   1px solid var(--border);
  padding-top:  var(--space-2);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  z-index:      200;
  box-shadow:   var(--el-08);
}

.bottom-nav-tab {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  padding:        var(--space-1) 0;
  color:          var(--muted-foreground);
  font-size:      10px;
  font-weight:    400;
  cursor:         pointer;
  text-decoration:none;
  user-select:    none;
  border:         none;
  background:     transparent;
  position:       relative;
  transition:     color var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-tab:hover { color: var(--foreground); }

.bottom-nav-tab-active,
.bottom-nav-tab.active {
  color:       var(--shell-accent);
  font-weight: 500;
}

@media (min-width: 768px) {
  .bottom-nav { display: none; }
}

.bottom-nav-badge {
  position:        absolute;
  top:             5px;
  left:            calc(50% + 5px);
  min-width:       15px;
  height:          15px;
  background:      var(--danger);
  color:           #fff;
  border-radius:   8px;
  font-size:       9px;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 3px;
  line-height:     1;
  pointer-events:  none;
  border:          1.5px solid var(--background);
}

.global-nav-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       16px;
  height:          16px;
  background:      var(--danger);
  color:           #fff;
  border-radius:   8px;
  font-size:       9px;
  font-weight:     700;
  padding:         0 4px;
  line-height:     1;
  margin-left:     5px;
  pointer-events:  none;
  vertical-align:  middle;
}


/* ============================================================
   §11  FORM ELEMENTS
   ============================================================ */

/* Shared field base */
.input,
.select,
.textarea {
  width:         100%;
  background:    var(--background);
  color:         var(--foreground);
  border:        1px solid var(--input);
  border-radius: var(--radius-md);
  font-family:   var(--font-sans);
  font-size:     var(--fs-body-1);
  font-weight:   var(--fw-body-1);
  line-height:   var(--lh-body-1);
  outline:       none;
  transition:    border-color var(--dur-fast) var(--ease-standard),
                 box-shadow   var(--dur-fast) var(--ease-standard);
}
.input::placeholder,
.textarea::placeholder { color: var(--muted-foreground); }
.input:focus,
.select:focus,
.textarea:focus,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--ring);
  box-shadow:   0 0 0 2px var(--background), 0 0 0 4px color-mix(in oklab, var(--ring) 35%, transparent);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
  background: var(--muted);
}

/* Single-line fields */
.input,
.select {
  height:  36px;
  padding: 0 var(--space-3);
}

/* Select arrow — SVG data URI, colour matches --n-400 (#A3A3A3) */
.select {
  appearance:         none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position:right var(--space-3) center;
  padding-right:      var(--space-8);
  cursor:             pointer;
}

/* Textarea */
.textarea {
  padding:    var(--space-3);
  min-height: 80px;
  resize:     vertical;
}

/* Form field wrapper + label */
.field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}
.field-label {
  font-size:   var(--fs-body-2);
  font-weight: var(--fw-body-2);
  color:       var(--foreground);
}
.field-hint {
  font-size: var(--fs-caption);
  color:     var(--muted-foreground);
}
.field-error {
  font-size: var(--fs-caption);
  color:     var(--destructive);
}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: var(--destructive);
}

/* Checkbox row */
.checkbox-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  cursor:      pointer;
  user-select: none;
  font-size:   var(--fs-body-1);
  color:       var(--foreground);
}
.checkbox-row input[type="checkbox"] {
  width:        16px;
  height:       16px;
  border:       1.5px solid var(--input);
  border-radius:var(--radius-xs);
  accent-color: var(--primary);
  cursor:       pointer;
  flex-shrink:  0;
}
.checkbox-row input[type="checkbox"]:focus-visible {
  outline:    2px solid var(--ring);
  outline-offset: 2px;
}


/* ============================================================
   §12  AVATAR  (initials)
   ============================================================ */
.avatar {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-full);
  background:      var(--com-tint-20);
  color:           var(--com-shade-30);
  font-family:     var(--font-sans);
  font-weight:     500;
  flex-shrink:     0;
  user-select:     none;
  overflow:        hidden;
  line-height:     1;
}

.avatar-sm {
  width:     24px;
  height:    24px;
  font-size: 10px;
}

.avatar-md {
  width:     36px;
  height:    36px;
  font-size: 13px;
}

.avatar-lg {
  width:     52px;
  height:    52px;
  font-size: 17px;
}

/* Colour tints for variety — apply to .avatar */
.avatar-green  { background: var(--oc-green-tint);  color: var(--oc-green-dark); }
.avatar-amber  { background: var(--oc-amber-tint);  color: var(--oc-amber-dark); }
.avatar-blue   { background: var(--com-tint-20);    color: var(--com-shade-30);  }
.avatar-neutral{ background: var(--muted);          color: var(--muted-foreground); }


/* ============================================================
   §13  TOAST
   ============================================================ */
.toast {
  position:      fixed;
  bottom:        calc(var(--space-18) + var(--space-4));
  left:          50%;
  transform:     translateX(-50%);
  z-index:       9000;
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow:    var(--el-12);
  font-size:     var(--fs-body-1);
  font-weight:   var(--fw-body-2);
  max-width:     360px;
  width:         max-content;
  pointer-events:auto;
  animation:     _toast-in var(--dur-default) var(--ease-enter);
}

@keyframes _toast-in {
  from { transform: translateX(-50%) translateY(10px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

.toast-success {
  background: var(--oc-green);
  color:      var(--primary-foreground);
}

.toast-error {
  background: var(--destructive);
  color:      var(--destructive-foreground);
}

.toast-info {
  background: var(--primary);
  color:      var(--primary-foreground);
}

.toast-neutral {
  background: var(--n-800);
  color:      var(--n-50);
}


/* ============================================================
   §14  EMPTY STATE
   ============================================================ */
.empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        var(--space-10) var(--space-6);
  gap:            var(--space-3);
  color:          var(--muted-foreground);
}

.empty-state-icon {
  width:           48px;
  height:          48px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-xl);
  background:      var(--muted);
  color:           var(--muted-foreground);
  margin-bottom:   var(--space-1);
  flex-shrink:     0;
}

.empty-state-title {
  font-size:   var(--fs-subheading-1);
  font-weight: var(--fw-subheading-1);
  color:       var(--foreground);
  margin-bottom:var(--space-1);
}

.empty-state p {
  font-size:  var(--fs-body-1);
  color:      var(--muted-foreground);
  max-width:  260px;
}


/* ============================================================
   §14b  PAGE HEADER + FILTER BAR  (structural slot components)
   ============================================================ */

/* .page-header marks the semantic "page title area" slot. Bespoke wrapper
   classes (dash-header, hero, req-head …) stay on inner elements for
   screen-specific layout; this class is structural, not visual. */
.page-header {}

.page-header-title {
  font-size:   var(--fs-subheading-2);
  font-weight: var(--fw-subheading-2);
  color:       var(--foreground);
}
.page-header-sub {
  font-size: var(--fs-caption);
  color:     var(--muted-foreground);
}

/* .filter-bar — horizontal scrolling row of pill filters with an optional
   trailing .filter-bar-action. Suppresses scrollbar on all browsers. */
.filter-bar {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  overflow-x:  auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar > .pill,
.filter-bar > button.pill { cursor: pointer; border: none; flex-shrink: 0; }
.filter-bar-action { flex-shrink: 0; margin-left: auto; }


/* ============================================================
   §15  MODAL  (bottom sheet → centred dialog ≥ 768px)
   ============================================================ */
.modal {
  position:        fixed;
  inset:           0;
  z-index:         8000;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  pointer-events:  none;
  opacity:         0;
  transition:      opacity var(--dur-default) var(--ease-standard);
}
.modal.open {
  pointer-events: auto;
  opacity:        1;
}

.modal-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.48);
  cursor:     pointer;
}

.modal-content {
  position:        relative;
  z-index:         1;
  background:      var(--background);
  border-radius:   var(--radius-xl) var(--radius-xl) 0 0;
  width:           100%;
  max-width:       480px;
  max-height:      90dvh;
  overflow-y:      auto;
  box-shadow:      var(--el-24);
  padding:         var(--space-5);
  padding-bottom:  calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  transform:       translateY(100%);
  transition:      transform var(--dur-sheet) var(--ease-enter);
}
.modal.open .modal-content {
  transform: translateY(0);
}

/* Drag handle */
.modal-handle {
  width:         36px;
  height:        4px;
  border-radius: var(--radius-full);
  background:    var(--border);
  margin:        0 auto var(--space-5);
}

/* Modal header */
.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-4);
}
.modal-title {
  font-size:   var(--fs-subheading-2);
  font-weight: var(--fw-subheading-2);
  color:       var(--foreground);
}
.modal-close {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   var(--radius-full);
  color:           var(--muted-foreground);
  cursor:          pointer;
  background:      var(--muted);
  border:          none;
  transition:      background var(--dur-fast) var(--ease-standard);
}
.modal-close:hover { background: var(--border); }

@media (min-width: 768px) {
  .modal {
    align-items: center;
  }
  .modal-content {
    border-radius: var(--radius-xl);
    transform:     scale(0.95);
    transition:    transform var(--dur-default) var(--ease-enter);
  }
  .modal.open .modal-content {
    transform: scale(1);
  }
  .modal-handle { display: none; }
}


/* ============================================================
   §15b  DATA TABLE
   ============================================================ */

/* Structural base — bespoke table classes (tracker-table, eq-table, rpt-table)
   add screen-specific sizing and layout on top. */
.data-table {
  width:           100%;
  border-collapse: collapse;
}
.data-table thead th {
  font-size:     var(--fs-caption);
  font-weight:   500;
  color:         var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding:        var(--space-2) var(--space-4);
  border-bottom:  1px solid var(--border);
  text-align:     left;
  white-space:    nowrap;
}
.data-table tbody td {
  padding:        var(--space-3) var(--space-4);
  border-bottom:  1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr {
  transition: background var(--dur-fast) var(--ease-standard);
}
.data-table tbody tr:hover { background: var(--muted); }

/* .stack-mobile opt-in: collapses to labelled stacked cards below 640px.
   Add data-label="Column name" to each <td> for screen-reader labels. */
@media (max-width: 639px) {
  .data-table.stack-mobile,
  .data-table.stack-mobile thead,
  .data-table.stack-mobile tbody,
  .data-table.stack-mobile th,
  .data-table.stack-mobile td,
  .data-table.stack-mobile tr { display: block; }
  .data-table.stack-mobile thead tr { position: absolute; top: -9999px; left: -9999px; }
  .data-table.stack-mobile tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-1) 0;
  }
  .data-table.stack-mobile tbody tr:last-child { border-bottom: 1px solid var(--border); }
  .data-table.stack-mobile tbody td {
    border-bottom: none;
    padding: var(--space-1) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .data-table.stack-mobile tbody td[data-label]::before {
    content: attr(data-label);
    font-size: var(--fs-caption);
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 80px;
    flex-shrink: 0;
  }
}


/* ============================================================
   §16  SIDE PANEL  (desktop slide-over)
   ============================================================ */
.side-panel {
  position:        fixed;
  top:             0;
  right:           0;
  bottom:          0;
  width:           400px;
  max-width:       90vw;
  background:      var(--background);
  border-left:     1px solid var(--border);
  box-shadow:      var(--el-16);
  z-index:         7000;
  overflow-y:      auto;
  transform:       translateX(100%);
  transition:      transform var(--dur-sheet) var(--ease-enter);
  display:         flex;
  flex-direction:  column;
}

.side-panel-open,
.side-panel.open {
  transform: translateX(0);
}

.side-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-5);
  border-bottom:   1px solid var(--border);
  position:        sticky;
  top:             0;
  background:      var(--background);
  z-index:         1;
  flex-shrink:     0;
}

.side-panel-title {
  font-size:   var(--fs-heading);
  font-weight: var(--fw-heading);
  color:       var(--foreground);
}

.side-panel-body {
  flex:    1;
  padding: var(--space-5);
  overflow-y: auto;
}

/* Overlay backdrop for side panel on mobile */
.side-panel-backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.40);
  z-index:    6999;
  opacity:    0;
  pointer-events: none;
  transition: opacity var(--dur-default) var(--ease-standard);
}
.side-panel.open ~ .side-panel-backdrop,
.side-panel-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}


/* ============================================================
   §17  DIVIDER + SECTION LABEL  (common pattern in lists)
   ============================================================ */
.divider {
  height:     1px;
  background: var(--border);
  margin:     var(--space-4) 0;
}

.section-label {
  font-size:      10px;
  font-weight:    500;
  color:          var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin:         var(--space-4) 0 var(--space-2);
}
.section-label:first-child { margin-top: 0; }


/* ============================================================
   §18  PROGRESS BAR  (cycle submission progress)
   ============================================================ */
.progress {
  height:        4px;
  background:    var(--border);
  border-radius: var(--radius-full);
  overflow:      hidden;
}
.progress-fill {
  height:        100%;
  border-radius: var(--radius-full);
  background:    var(--shell-accent);
  transition:    width var(--dur-slow) var(--ease-standard);
}
.progress-label {
  font-size:   var(--fs-caption);
  color:       var(--muted-foreground);
  margin-top:  var(--space-1);
}


/* ============================================================
   §19  TAB BAR  (in-page tabs, not bottom nav)
   ============================================================ */
.tab-bar {
  display:       flex;
  background:    var(--muted);
  border-radius: var(--radius-md);
  padding:       3px;
  gap:           2px;
  height:        38px;
}
.tab-item {
  flex:            1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0 var(--space-3);
  height:          100%;
  font-family:     var(--font-sans);
  font-size:       var(--fs-body-1);
  font-weight:     500;
  color:           var(--muted-foreground);
  background:      transparent;
  text-align:      center;
  cursor:          pointer;
  border:          none;
  border-radius:   calc(var(--radius-md) - 3px);
  transition:      all var(--dur-fast) var(--ease-standard);
  user-select:     none;
  white-space:     nowrap;
  -webkit-tap-highlight-color: transparent;
}
.tab-item:hover { color: var(--foreground); }
.tab-item.active {
  background: var(--background);
  color:      var(--foreground);
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.06);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ------------------------------------------------------------
   View toggle  (segmented control — e.g. List / Month)
   ------------------------------------------------------------ */
.view-toggle {
  display:        inline-flex;
  gap:            2px;
  padding:        3px;
  background:     var(--muted);
  border-radius:  var(--radius-md);
  height:         38px;
  align-items:    center;
}
.view-toggle-btn {
  padding:        0 var(--space-4);
  height:         100%;
  font-family:    var(--font-sans);
  font-size:      var(--fs-body-1);
  font-weight:    500;
  line-height:    1;
  color:          var(--muted-foreground);
  background:     transparent;
  border:         none;
  border-radius:  calc(var(--radius-md) - 3px);
  cursor:         pointer;
  white-space:    nowrap;
  transition:     all var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.view-toggle-btn:hover { color: var(--foreground); }
.view-toggle-btn.active {
  background: var(--background);
  color:      var(--foreground);
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.06);
}


/* ============================================================
   §20  CALL CARD  (roster item)
   ============================================================ */
.call-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  margin-bottom: var(--space-2);
}
.call-card.opted-in  { border-color: var(--oc-green); }
.call-card.key-date  { border-color: var(--danger); }
.call-card.pending   { border-color: var(--oc-amber); }

.call-card-main {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) var(--space-4);
}

.call-date {
  text-align:  center;
  width:       40px;
  flex-shrink: 0;
}
.call-date-num {
  font-size:   var(--fs-title-2);
  font-weight: var(--fw-title-2);
  color:       var(--foreground);
  line-height: 1;
}
.call-date-month {
  font-size:      9px;
  color:          var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.call-info {
  flex: 1;
  min-width: 0;
}
.call-title {
  font-size:   var(--fs-body-2);
  font-weight: var(--fw-body-2);
  color:       var(--foreground);
  margin-bottom: 2px;
  overflow:    hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.call-sub {
  font-size:  var(--fs-caption);
  color:      var(--muted-foreground);
}
/* Star: preference honoured (History tab) */
.call-star {
  font-size:   14px;
  color:       var(--oc-amber);
  flex-shrink: 0;
}

.call-card-divider { height: 1px; background: var(--border); }

.call-card-actions {
  display: flex;
}
.call-card-action {
  flex:            1;
  padding:         var(--space-3) 0;
  font-size:       var(--fs-caption);
  color:           var(--muted-foreground);
  text-align:      center;
  cursor:          pointer;
  border-right:    1px solid var(--border);
  background:      transparent;
  border-top:      none;
  border-bottom:   none;
  border-left:     none;
  font-family:     var(--font-sans);
  transition:      background var(--dur-fast) var(--ease-standard);
}
.call-card-action:last-child  { border-right: none; }
.call-card-action:hover       { background: var(--muted); }
.call-card-action.primary     { color: var(--oc-blue); font-weight: var(--fw-body-2); }


/* ============================================================
   §21  WINDOW CARD  (preference submission window)
   ============================================================ */
.window-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-4);
  margin-bottom: var(--space-2);
}
.window-card.urgent {
  border-color: var(--oc-amber);
  background:   color-mix(in oklab, var(--oc-amber-tint) 30%, var(--background));
}

.window-card-top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             var(--space-2);
  margin-bottom:   var(--space-2);
}
.window-card-title {
  font-size:   var(--fs-body-2);
  font-weight: var(--fw-body-2);
  color:       var(--foreground);
}
.window-card-sub {
  font-size:     var(--fs-caption);
  color:         var(--muted-foreground);
  margin-bottom: var(--space-3);
}


/* ============================================================
   §22  BREAKPOINT UTILITIES
   ============================================================ */

/* Mobile-only (< 768px) */
@media (max-width: 767px) {
  .hide-mobile    { display: none !important; }
  .mobile-full    { width: 100% !important; }
  .mobile-stack   { flex-direction: column !important; }
}

/* Desktop (≥ 768px) */
@media (min-width: 768px) {
  .hide-desktop           { display: none !important; }
  .md\:flex               { display: flex !important; }
  .md\:grid               { display: grid !important; }
  .md\:grid-cols-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4        { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:gap-6              { gap: var(--space-6); }
  .md\:px-8               { padding-inline: var(--space-8); }
  .md\:max-w-screen-lg    { max-width: 1024px; margin-inline: auto; }
  .md\:max-w-screen-xl    { max-width: 1280px; margin-inline: auto; }
  .md\:rounded-xl         { border-radius: var(--radius-xl); }
}

/* Large desktop (≥ 1280px) */
@media (min-width: 1280px) {
  .lg\:grid-cols-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4        { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:sidebar-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-6);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
  }
}


/* ============================================================
   §23  LAYOUT CONTAINERS
   ============================================================ */

/* Full-page background wrapper */
.page-wrap {
  width: 100%;
  min-height: 100vh;
  background: var(--background);
}

/* Mobile-first staff screens (Doctor role) */
.container-mobile {
  width: 100%;
  padding: 0 var(--space-4);
}
@media (min-width: 768px) {
  .container-mobile {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }
}

/* Desktop-first manager screens */
.container-desktop {
  width: 100%;
  padding: 0 var(--space-4);
}
@media (min-width: 768px) {
  .container-desktop {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }
}
@media (min-width: 1280px) {
  .container-desktop {
    max-width: 1280px;
    padding: 0 var(--space-8);
  }
}

/* Narrow focused screens (onboarding, index) */
.container-narrow {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 768px) {
  .container-narrow {
    padding: 0 var(--space-6);
  }
}


/* ============================================================
   §24  APP SHELL  (fixed-viewport prototype layout)
   ============================================================ */

/*
 * .app-shell — the outermost fixed-viewport flex container used
 * by all prototype screens that render below the proto bar + top nav.
 *
 * Default top offset: 96px (44px proto bar + 52px top nav).
 * Override via --app-shell-top if a screen has no top nav:
 *   style="--app-shell-top: 44px"
 */
:root { --app-shell-top: 96px; }

.app-shell {
  position: fixed;
  top: var(--app-shell-top);
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--background);
  overflow: hidden;
}

/* Scrollable inner content pane — grows to fill remaining shell height */
.app-shell-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Optional pinned footer inside the shell (summary bars, CTAs) */
.app-shell-footer {
  flex-shrink: 0;
  background: var(--background);
  border-top: 1px solid var(--border);
}


/* ============================================================
   §25  GLOBAL NAV
   ============================================================ */

.global-nav {
  position: fixed;
  top: 44px;           /* sits below proto bar */
  left: 0;
  right: 0;
  height: 56px;
  background: var(--background);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-4);
  z-index: 950;
  font-family: var(--font-sans);
}

.global-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  text-decoration: none;
}
.global-nav-brand:hover { text-decoration: none; }
.global-nav-item:hover  { text-decoration: none; }

.global-nav-brand-dot {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--shell-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-foreground);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.global-nav-brand-label {
  font-size: var(--fs-body-2);
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: -0.01em;
}

.global-nav-brand-module {
  font-size: var(--fs-caption);
  color: var(--muted-foreground);
  font-weight: 400;
}

.global-nav-items {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.global-nav-item {
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-2);
  font-weight: 400;
  color: var(--muted-foreground);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  white-space: nowrap;
  position: relative;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  height: 36px;
}

.global-nav-item:hover {
  background: var(--n-150);
  color: var(--foreground);
}

.global-nav-item.active {
  color: var(--shell-accent);
  font-weight: 500;
}

.global-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -10px;   /* flush with .global-nav bottom border */
  left: 0;
  right: 0;
  height: 2px;
  background: var(--shell-accent);
  border-radius: 1px 1px 0 0;
}

.global-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.global-nav-actions:hover {
  background: var(--muted);
  text-decoration: none;
}

.global-nav-user-name {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--foreground);
}

.global-nav-caret {
  color: var(--muted-foreground);
  font-size: 10px;
}

.mobile-menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--foreground);
  flex-shrink: 0;
}

.mobile-menu-toggle:hover { background: var(--n-150); }

/* Mobile nav drawer */
.gnav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.32);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-default) var(--ease-standard);
}

.gnav-drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.gnav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--background);
  z-index: 9995;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--dur-default) var(--ease-standard);
  border-right: 1px solid var(--border);
}

.gnav-drawer.open {
  transform: translateX(0);
}

.gnav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border);
  height: 56px;
  flex-shrink: 0;
}

.gnav-drawer-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-size: 18px;
  line-height: 1;
}

.gnav-drawer-close:hover { background: var(--n-150); }

.gnav-drawer-items {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-3);
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}

.gnav-drawer-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-2);
  font-weight: 400;
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  width: 100%;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.gnav-drawer-item:hover { background: var(--n-150); text-decoration: none; }

.gnav-drawer-item.active {
  background: var(--shell-accent-tint);
  color: var(--shell-accent-dark);
  font-weight: 500;
}

/* Responsive visibility */
@media (max-width: 767px) {
  .global-nav-items { display: none; }
  .mobile-menu-toggle { display: flex; }
}

@media (min-width: 768px) {
  .mobile-menu-toggle { display: none; }
  .gnav-drawer, .gnav-drawer-overlay { display: none !important; }
}

/* ============================================================
   §26  UTILITIES
   ============================================================ */
.separator {
  display:    block;
  height:     1px;
  background: var(--border);
  width:      100%;
  flex-shrink:0;
}



/* ============================================================
   §FOCUS  KEYBOARD FOCUS STYLES  (WCAG 2.4.7)
   All interactive primitives that carry no built-in browser
   outline get a consistent ring via :focus-visible.
   Form fields (.input / .select / .textarea) already show a
   border-color highlight on :focus — left intentionally as-is.
   ============================================================ */

/* In-page tab bar */
.tab-item:focus-visible,

/* Segmented view toggle */
.view-toggle-btn:focus-visible,

/* Bottom nav tabs (clova.css component) */
.bottom-nav-tab:focus-visible,

/* Desktop global nav */
.global-nav-item:focus-visible,
.mobile-menu-toggle:focus-visible,

/* Hamburger drawer nav */
.gnav-drawer-item:focus-visible,

/* Call card inline actions */
.call-card-action:focus-visible {
  outline:        var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}