/* ============================================================
   HIREPAY — Design System
   Framework-free. No Bootstrap, no Tailwind. Static CSS, no build step.

   E-ink greyscale with a rare accent. Light only, by client requirement.
   Colour is rationed to four places — see docs/ui-upgrade/00-OVERVIEW.md §2.6:
     1. chart marks        2. the primary action (.btn-p)
     3. the active-nav rail (2px)   4. status (pill / alert / delta)
   Everything else is greyscale. Never hardcode a colour outside this file —
   see docs/ui-upgrade/04-DESIGN-TOKENS.md.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* ---- accent inputs: the only two numbers a theme changes ---- */
  --ah: 258;
  --ac: 0.19;

  /* ---- accent ramp (derived) ---- */
  --accent:      oklch(0.47  var(--ac)              var(--ah));
  --accent-deep: oklch(0.38  var(--ac)              var(--ah));
  --accent-ink:  oklch(0.40  var(--ac)              var(--ah));
  --accent-line: oklch(0.86  calc(var(--ac) * 0.42) var(--ah));
  --accent-wash: oklch(0.972 calc(var(--ac) * 0.13) var(--ah));

  /* ---- surface ---- */
  --paper:   #FFFFFF;
  --page-bg: #FAF8F8;  /* main content area — midpoint between --paper (cards) and --canvas (sidebar/topbar) */
  --canvas:  #F4F2F0;
  --sunken:  #EDEAE7;

  /* ---- hairline ---- */
  --hair:   #E2DEDA;
  --hair-2: #EFECE9;

  /* ---- ink ---- */
  --ink:   #0C0A08;
  --ink-2: #3B3835;
  --ink-3: #57534F;  /* darkened from #6D6C6B — muted text read as too faint to be legible at a glance */
  --ink-4: #7C7874;  /* darkened from #93908D to match — still clearly the faintest step, just not illegible */

  /* ---- semantic (state only — never decoration) ---- */
  --pos:  #0F7A52;  --pos-bg:  #E8F5EE;
  --wrn:  #9A5B08;  --wrn-bg:  #FBF1E3;
  --neg:  #A81E1E;  --neg-bg:  #FBEBEB;
  --info: #3E6FA8;  --info-bg: #EAF1F9;  /* neutral counts (totals) — not good/bad/urgent, just informational */

  /* ---- elevation: two whisper steps. a shadow never replaces a border. ---- */
  --lift:   0 1px 2px rgba(12,10,8,.04), 0 1px 1px rgba(12,10,8,.03);
  --lift-2: 0 4px 12px rgba(12,10,8,.07), 0 1px 3px rgba(12,10,8,.05);

  /* ---- shape ---- */
  --r: 8px;  --r-lg: 12px;  --r-sm: 5px;  --r-full: 9999px;

  /* ---- type ---- */
  --sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --serif: 'Fraunces','Iowan Old Style','Georgia',serif; /* page/panel headings only — see §7, §0 */
  --t-xs: 10px;    --t-sm: 11.5px;  --t-base: 12.5px;  --t-body: 13px;
  --t-lg: 15px;    --t-xl: 24px;    --t-num: 23px;     --t-lead: 40px;

  /* ---- space: 4px grid ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px;

  /* ---- fixed dimensions ---- */
  --h-control: 32px; --h-row: 38px;  --h-topbar: 52px; --h-nav: 30px;
  --h-pill: 20px;    --h-seg: 21px;
  --w-sidebar: 210px; --w-rail: 356px; --w-dash-rail: 300px; --maxw: 1500px;

  /* ---- motion ---- */
  --fast: 120ms ease;
  --med:  160ms ease;
  --slow: 90s linear; /* .auth-brand ambient field only — see docs 04 §9.1 */
}

/* the six accents — each is exactly two numbers. nothing else changes. */
[data-a="violet"]  { --ah: 258; --ac: 0.19; }   /* default */
[data-a="ink"]     { --ah: 265; --ac: 0.03; }
[data-a="teal"]    { --ah: 196; --ac: 0.13; }
[data-a="forest"]  { --ah: 158; --ac: 0.13; }
[data-a="amber"]   { --ah: 64;  --ac: 0.15; }
[data-a="crimson"] { --ah: 20;  --ac: 0.17; }

/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

/* ============================================================
   3. BASE
   ============================================================ */
body{
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.45;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums; /* every column of digits aligns. correctness, not polish. */
}

/* focus: the one place accent appears on an otherwise greyscale control */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 3px;
}

/* utility: table headers, eyebrows, verdict labels */
.eyebrow{
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* utility: visually hidden but reachable (labels for icon-only controls) */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* utility: horizontal-scroll wrapper for wide tables. the page body never scrolls sideways. */
.tw{ overflow-x: auto; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   4. COMPONENTS
   Order matches docs/ui-upgrade/05-COMPONENTS.md exactly (§1-25).
   ============================================================ */

/* ---------------------------------------------------------
   0 · shell (outer flex frame shared by both portals — fixes a
   pre-existing gap: .side/.top were written to expect a flex
   parent, but .shell itself had no rule, print.css's `.shell{
   display:block!important }` override was the only clue)
--------------------------------------------------------- */
.shell{
  display: flex;
  min-height: 100vh;
}
.shell > main{
  flex: 1;
  min-width: 0;
  background: var(--page-bg); /* between --paper (cards) and --canvas (sidebar/topbar, unchanged) */
}
/* central portal: top-nav stacks above main instead of a side-by-side sidebar */
.shell.shell-stacked{
  flex-direction: column;
}
.shell.shell-stacked > main{
  flex: initial;
}
/* .page — the actual content wrapper inside <main> on every central/tenant screen — had the
   same gap as .shell: no rule at all, so content ran edge-to-edge on desktop with no top
   breathing room. Centered on --maxw with real gutters; scales down on narrow viewports. */
.page{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-8);
}
@media (max-width: 860px){
  .page{ padding: var(--s-4) var(--s-4) var(--s-6); }
}

/* Dashboard flare — a faint zigzag rail bled in from each side, decorative only. Opt-in via
   .dash-flare on <main> (set with @section('main-class', 'dash-flare')) so it stays confined to
   the three dashboards (central, tenant/admin, tenant/employee — the latter two share one view)
   and never reaches dense data screens (tables, forms) where it would be noise. Pure greyscale
   ink at low opacity — this is decoration, not one of the app's four rationed colour uses (docs
   00-OVERVIEW.md §2.6) — so it never competes with the accent. */
.dash-flare{ position: relative; }
.dash-flare::before,
.dash-flare::after{
  content: "";
  position: absolute; top: 0; bottom: 0; width: 46px;
  background-image: repeating-linear-gradient(
    135deg,
    var(--ink-4) 0, var(--ink-4) 1.5px,
    transparent 1.5px, transparent 16px
  );
  opacity: .07;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 220px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 220px), transparent);
  pointer-events: none;
  z-index: 0;
}
.dash-flare::before{ left: 0; }
.dash-flare::after{ right: 0; background-image: repeating-linear-gradient(
    45deg,
    var(--ink-4) 0, var(--ink-4) 1.5px,
    transparent 1.5px, transparent 16px
  ); }
.dash-flare > .page{ position: relative; z-index: 1; }
@media (max-width: 1180px){
  .dash-flare::before, .dash-flare::after{ display: none; } /* rail has no room once .page nears viewport width */
}

/* ---------------------------------------------------------
   1 · sidebar
--------------------------------------------------------- */
.side{
  width: var(--w-sidebar);
  background: var(--canvas);
  border-right: 1px solid var(--hair);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.brand{
  height: var(--h-topbar);
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-4);
  flex-shrink: 0;
}
.mark{
  width: 20px; height: 20px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--canvas);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: -.02em;
}
.bname{ font-weight: 600; font-size: var(--t-lg); letter-spacing: -.01em; }
.bflag{
  margin-left: auto;
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  color: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px;
  padding: 1.5px 4px; letter-spacing: .04em;
}
.nav{ padding: 2px var(--s-2) var(--s-3); overflow-y: auto; flex: 1; }
.nsec{
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 14px var(--s-2) 5px;
}
.nsec:first-child{ padding-top: 4px; }
.ni{
  display: flex; align-items: center; gap: 10px;
  height: var(--h-nav); padding: 0 var(--s-2); border-radius: var(--r-sm);
  color: var(--ink-2); font-size: var(--t-base); font-weight: 450; letter-spacing: -.01em;
  position: relative;
  transition: background var(--fast), color var(--fast);
}
.ni:hover{ background: var(--sunken); color: var(--ink); }
.ni.on{
  background: var(--paper); color: var(--ink); font-weight: 550;
  box-shadow: 0 0 0 1px var(--hair), var(--lift);
}
.ni.on::before{
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 2px;
  background: var(--accent); border-radius: 0 2px 2px 0;
}
.ni .g{ width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-4); }
.ni.on .g{ color: var(--ink-2); }
.nct{ margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-4); }
.nct.hot{
  color: var(--wrn); background: var(--wrn-bg); border-radius: var(--r-full);
  padding: 1px 5px; font-family: var(--sans); font-weight: 600;
}
.sfoot{
  padding: var(--s-2); border-top: 1px solid var(--hair);
  display: flex; align-items: center; gap: var(--s-2);
  flex-shrink: 0;
}
.uav{
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--ink); color: var(--canvas);
  display: grid; place-items: center; font-size: 9.5px; font-weight: 600;
  flex-shrink: 0;
}
.ub{ min-width: 0; flex: 1; }
.un{ font-size: var(--t-sm); font-weight: 550; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur{ font-size: 10px; color: var(--ink-3); }

/* ---------------------------------------------------------
   2 · org-switcher (tenant portal only)
--------------------------------------------------------- */
.org{
  margin: 0 10px 10px; padding: var(--s-2) 10px;
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r);
  display: flex; align-items: center; gap: var(--s-2);
  cursor: pointer; box-shadow: var(--lift);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.org:hover{ border-color: var(--ink-4); box-shadow: var(--lift-2); }
.org-av{
  width: 22px; height: 22px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--canvas);
  display: grid; place-items: center; font-size: 9.5px; font-weight: 600; flex-shrink: 0;
}
.org-b{ min-width: 0; flex: 1; }
.org-n{ font-size: var(--t-base); font-weight: 550; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-m{ font-size: 10px; color: var(--ink-3); letter-spacing: 0; }
.org svg{ flex-shrink: 0; color: var(--ink-4); }

/* ---------------------------------------------------------
   3 · topbar
--------------------------------------------------------- */
.top{
  height: var(--h-topbar);
  background: var(--canvas); border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-5);
  position: sticky; top: 0; z-index: 30;
}
.crumb{ display: flex; align-items: center; gap: 8px; font-size: var(--t-base); color: var(--ink-3); letter-spacing: -.01em; }
.crumb b{ color: var(--ink); font-weight: 550; }
.crumb .sl{ color: var(--ink-4); }
.ico{
  width: var(--h-control); height: var(--h-control);
  border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--paper);
  display: grid; place-items: center; color: var(--ink-3);
  cursor: pointer; position: relative; box-shadow: var(--lift);
  transition: border-color var(--fast), box-shadow var(--fast), color var(--fast);
}
.ico:hover{ border-color: var(--ink-4); color: var(--ink); box-shadow: var(--lift-2); }
.dot{
  position: absolute; top: 6px; right: 6px; width: 5px; height: 5px;
  border-radius: var(--r-full); background: var(--neg);
  box-shadow: 0 0 0 2px var(--paper);
}

/* ---------------------------------------------------------
   4 · accent-switcher
--------------------------------------------------------- */
.sw{
  display: flex; align-items: center; gap: 6px;
  padding-left: var(--s-3); margin-left: 2px; border-left: 1px solid var(--hair);
  height: 24px;
}
.sw button{
  width: 14px; height: 14px; border-radius: var(--r-full); border: 0;
  cursor: pointer; padding: 0; position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  transition: transform var(--fast);
}
.sw button:hover{ transform: scale(1.18); }
.sw button[aria-pressed="true"]::after{
  content: ""; position: absolute; inset: -4px; border-radius: var(--r-full);
  border: 1.5px solid var(--ink);
}

/* ---------------------------------------------------------
   5 · command-palette trigger (overlay itself in .cp block, §5)
--------------------------------------------------------- */
.k{
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  height: var(--h-control); padding: 0 10px; min-width: 240px;
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r);
  color: var(--ink-3); font-size: var(--t-base); cursor: pointer; box-shadow: var(--lift);
  transition: border-color var(--fast), box-shadow var(--fast), color var(--fast);
}
.k:hover{ border-color: var(--ink-4); color: var(--ink-2); box-shadow: var(--lift-2); }
.kb{
  margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--ink-4);
  border: 1px solid var(--hair); border-radius: 3px; padding: 1px 4px; background: var(--canvas);
}

/* command palette overlay */
.cp{
  position: fixed; inset: 0; background: rgba(12,10,8,.32);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12vh; z-index: 100;
}
.cp-b{
  background: var(--paper); width: 560px; max-width: calc(100vw - 32px);
  border-radius: var(--r-lg); box-shadow: var(--lift-2);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.cp-i{
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hair);
  color: var(--ink-3);
}
.cp-i input{
  border: 0; outline: 0; background: transparent; flex: 1;
  font: inherit; font-size: var(--t-lg); color: var(--ink);
}
.cp-l{ max-height: 360px; overflow-y: auto; padding: var(--s-2); }
.cp-s{
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4); padding: var(--s-2) var(--s-2) 4px;
}
.cp-o{
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 var(--s-2); border-radius: var(--r-sm);
  color: var(--ink-2); font-size: var(--t-base);
}
.cp-o.on{ background: var(--sunken); color: var(--ink); }
.cp-o .g{ color: var(--ink-4); flex-shrink: 0; }
.cp-m{ margin-left: auto; font-size: var(--t-sm); color: var(--ink-4); }
.cp-f{
  display: flex; gap: var(--s-4);
  padding: var(--s-2) var(--s-4); border-top: 1px solid var(--hair);
  font-size: var(--t-sm); color: var(--ink-4);
}
.cp-f kbd{
  font-family: var(--mono); font-size: 10px; border: 1px solid var(--hair);
  border-radius: 3px; padding: 1px 4px; background: var(--canvas); color: var(--ink-3);
}

/* ---------------------------------------------------------
   6 · page-header
--------------------------------------------------------- */
.phead{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4);
}
.phead h1{ font-family: var(--serif); font-size: 30px; font-weight: 560; letter-spacing: -.02em; margin: 0 0 2px; line-height: 1.15; }
.psub{ color: var(--ink-3); font-size: var(--t-base); letter-spacing: -.005em; }
.psub b{ color: var(--ink-2); font-weight: 550; }
.acts{ display: flex; gap: var(--s-2); flex-shrink: 0; }

/* ---------------------------------------------------------
   7 · panel
--------------------------------------------------------- */
.panel{
  position: relative;
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg);
  overflow: hidden;
  /* A touch past --lift (too flat now the page bg is lighter --paper) but well short of
     --lift-2 (that's reserved for floating overlays) — a crisp, subtle raise, not a float. */
  box-shadow: 0 2px 5px rgba(12,10,8,.05), 0 1px 2px rgba(12,10,8,.04);
}
/* Panel flare — a faint zigzag rail in the top-right corner of every card/table wrapper,
   echoing the dashboard's edge motif (.dash-flare). Pure --ink-4 at low opacity — decoration
   only, never one of the app's four rationed colour uses (docs 00-OVERVIEW.md §2.6) — sits behind
   real content via z-index and never intercepts clicks. (The earlier corner gradient wash was
   removed — it caused a rendering issue.) */
.panel::after{
  content: "";
  position: absolute; top: 0; right: 0; width: 96px; height: 96px; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    var(--ink-4) 0, var(--ink-4) 1px,
    transparent 1px, transparent 13px
  );
  opacity: .05;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
}
.ph{
  min-height: 44px; display: flex; align-items: center; gap: 10px;
  padding: 0 var(--s-4); border-bottom: 1px solid var(--hair);
}
.pt{ font-family: var(--serif); font-size: 15px; font-weight: 560; letter-spacing: -.01em; }
.pn{ font-size: var(--t-sm); color: var(--ink-3); }
.pa{
  margin-left: auto; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; letter-spacing: -.005em;
  transition: color var(--fast);
}
.pa:hover{ color: var(--ink); }

/* ---------------------------------------------------------
   8 · verdict-row
--------------------------------------------------------- */
.verdict{
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: var(--s-4); box-shadow: var(--lift);
}
.vc{
  padding: var(--s-4) var(--s-4) 15px;
  border-right: 1px solid var(--hair-2);
  display: flex; flex-direction: column; min-width: 0; position: relative;
}
.vc:last-child{ border-right: 0; }
.vl{ font-size: var(--t-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
/* verdict-cell dot — a tiny semantic marker (what kind of number this is), not decoration.
   Extends the existing "status" rationed colour use (docs 00-OVERVIEW.md §2.6) to stat labels. */
.vl-dot{
  width: 7px; height: 7px; border-radius: var(--r-full); flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--dot-bg, transparent);
}
.vl-dot.ok{ background: var(--pos); --dot-bg: var(--pos-bg); }
.vl-dot.wn{ background: var(--wrn); --dot-bg: var(--wrn-bg); }
.vl-dot.ng{ background: var(--neg); --dot-bg: var(--neg-bg); }
.vl-dot.info{ background: var(--info); --dot-bg: var(--info-bg); }
.vv{ font-size: var(--t-num); font-weight: 600; letter-spacing: -.038em; line-height: 1; color: var(--ink); }
.vc.lead::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.vc.lead{ background: linear-gradient(180deg, var(--accent-wash), transparent 70%); }
.vc.lead .vv{ font-size: var(--t-lead); letter-spacing: -.048em; }
.cur{ font-size: 19px; font-weight: 500; color: var(--ink-4); margin-right: 2px; letter-spacing: -.02em; }
.vc.lead .cur{ font-size: 25px; }
.dec{ font-size: 19px; color: var(--ink-4); font-weight: 500; }
.vc.lead .dec{ font-size: 23px; }
.vm{ margin-top: auto; padding-top: 11px; font-size: var(--t-sm); color: var(--ink-3); display: flex; align-items: center; gap: 6px; letter-spacing: -.005em; }
.d{ font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.d.up{ color: var(--pos); }
.d.wn{ color: var(--wrn); }
.d.dn{ color: var(--neg); }

/* ---------------------------------------------------------
   9 · table
--------------------------------------------------------- */
table{ width: 100%; border-collapse: collapse; font-size: var(--t-base); }
th{
  text-align: left; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hair);
  background: var(--paper); white-space: nowrap;
}
td{
  padding: var(--s-3) var(--s-4); min-height: var(--h-row); border-bottom: 1px solid var(--hair-2);
  color: var(--ink-2); white-space: nowrap; vertical-align: middle; letter-spacing: -.008em;
}
tbody tr:last-child td{ border-bottom: 0; }
tbody tr{ transition: background var(--fast); }
tbody tr:hover td{ background: var(--canvas); }
tbody tr.selected td{ background: var(--sunken); }
.num{ text-align: right; }
.st{ color: var(--ink); font-weight: 550; }
.ref{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0; }
.sub2{ font-size: 10.5px; color: var(--ink-4); letter-spacing: 0; }
.who{ display: flex; align-items: center; gap: 9px; }
.ini{
  width: 23px; height: 23px; border-radius: var(--r-sm);
  background: var(--sunken); color: var(--ink-2);
  display: grid; place-items: center; font-size: 9.5px; font-weight: 600;
  flex-shrink: 0; letter-spacing: -.01em;
}

/* row-link: one row in a list of navigable actions (quick actions, etc). Icon, two-line
   text block, trailing chevron or pill. Replaces the old .list-group-item pattern. */
.row-link{
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hair-2);
  color: inherit; text-decoration: none; transition: background var(--fast);
}
.row-link:last-child{ border-bottom: 0; }
.row-link:hover{ background: var(--canvas); }
.row-link > svg{ color: var(--ink-3); flex-shrink: 0; }
.row-link-t{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.row-link-t .st{ font-size: var(--t-sm); }
.row-link > svg:last-child{ margin-left: auto; color: var(--ink-4); }

/* ---------------------------------------------------------
   10 · table-toolbar / filter-bar
--------------------------------------------------------- */
.tbar{
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--canvas); border-bottom: 1px solid var(--hair);
  padding: var(--s-2) var(--s-4);
}
.tbar-n{ margin-left: auto; font-size: var(--t-sm); color: var(--ink-3); }
.fld-search{ min-width: 220px; }
.fld-search svg{ color: var(--ink-4); flex-shrink: 0; }

/* ---------------------------------------------------------
   11 · pill
--------------------------------------------------------- */
.pill{
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--h-pill); padding: 0 8px; border-radius: var(--r-sm);
  font-size: 10.5px; font-weight: 600; letter-spacing: -.002em;
}
.pill::before{ content: ""; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; }
.pill.ok{ background: var(--pos-bg); color: var(--pos); }
.pill.wn{ background: var(--wrn-bg); color: var(--wrn); }
.pill.ng{ background: var(--neg-bg); color: var(--neg); }
.pill.nu{ background: var(--sunken); color: var(--ink-3); }

/* ---------------------------------------------------------
   12 · meter
--------------------------------------------------------- */
.mtr{
  height: 3px; border-radius: var(--r-sm); background: var(--sunken);
  margin-top: 11px; overflow: hidden; display: flex;
}
.mtr i{ display: block; height: 100%; }

/* ---------------------------------------------------------
   13 · chart-frame
--------------------------------------------------------- */
.chart{ padding: var(--s-4) var(--s-4) 6px; }
.lg{ display: flex; gap: var(--s-4); padding: 0 var(--s-4) 14px; font-size: var(--t-sm); color: var(--ink-3); letter-spacing: -.005em; }
.lg i{ display: inline-block; width: 8px; height: 2.5px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* Dashboard two-column layout — was ad hoc inline styles duplicated across central/tenant
   dashboards (one `.cols` grid per row-pair, so a short card left dead space until the next
   row started). Promoted to real classes as ONE persistent two-column layout: each column is
   its own independent flex stack, so cards flow tightly one after another with no cross-row
   gaps regardless of how tall any single card is. `--w-dash-rail` is deliberately its own token,
   not --w-rail (356px, used across ~40 other views) — dashboard cards are simpler/glanceable and
   read better narrower. */
.cols{ display: grid; grid-template-columns: minmax(0, 1fr) var(--w-dash-rail); gap: var(--s-4); align-items: start; }
.stack{ display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
@media (max-width: 960px){
  .cols{ grid-template-columns: 1fr; }
}

/* Dashboard three-column layout (central + tenant): 45/30/25 split. Same independent-stack
   principle as .cols/.stack above, just a third column for secondary/glanceable cards that
   aren't essential on a small screen — .dash-tertiary hides below the same 960px breakpoint
   .cols collapses at, rather than cramming a third column into a phone-width single column. */
.dash-cols{ display: grid; grid-template-columns: 45fr 30fr 25fr; gap: var(--s-4); align-items: start; }
@media (max-width: 1180px){
  .dash-cols{ grid-template-columns: 1fr 1fr; }
  .dash-tertiary{ grid-column: 1 / -1; }
}
@media (max-width: 960px){
  .dash-cols{ grid-template-columns: 1fr; }
  .dash-tertiary{ display: none; }
}

/* ---------------------------------------------------------
   14 · attention-list
--------------------------------------------------------- */
.att{ display: flex; flex-direction: column; }
.ai{
  display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hair-2); align-items: flex-start; cursor: pointer;
}
.ai:last-child{ border-bottom: 0; }
.ai:hover{ background: var(--canvas); }
.stp{ width: 3px; border-radius: var(--r-sm); align-self: stretch; flex-shrink: 0; min-height: 30px; }
.stp.ng{ background: var(--neg); }
.stp.wn{ background: var(--wrn); }
.stp.nu{ background: var(--hair); }
.ab{ flex: 1; min-width: 0; }
.at{ font-size: var(--t-base); color: var(--ink); font-weight: 550; letter-spacing: -.014em; margin-bottom: 2px; }
.as{ font-size: var(--t-sm); color: var(--ink-3); letter-spacing: -.004em; line-height: 1.35; }
.am{ font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); flex-shrink: 0; padding-top: 1px; }

/* ---------------------------------------------------------
   15 · empty-state
--------------------------------------------------------- */
.empty{ padding: var(--s-8) var(--s-4); text-align: center; }
.empty .g{ width: 20px; height: 20px; color: var(--ink-4); margin: 0 auto var(--s-2); }
.et{ font-size: var(--t-base); font-weight: 550; color: var(--ink); margin-bottom: 4px; }
.eb{ font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s-4); }

/* ---------------------------------------------------------
   16 · pagination
--------------------------------------------------------- */
.pg{ display: flex; align-items: center; gap: 4px; padding: var(--s-3) var(--s-4); }
.pg-i{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: var(--t-base);
  transition: background var(--fast);
}
.pg-i:hover{ background: var(--sunken); }
.pg-i.on{ background: var(--paper); box-shadow: 0 0 0 1px var(--hair); color: var(--ink); font-weight: 600; }
.pg-e{ padding: 0 4px; color: var(--ink-4); font-size: var(--t-base); }

/* ---------------------------------------------------------
   17 · btn
--------------------------------------------------------- */
.btn{
  height: var(--h-control); padding: 0 13px; border-radius: var(--r);
  border: 1px solid var(--hair); background: var(--paper);
  color: var(--ink-2); font-size: var(--t-base); font-weight: 500; letter-spacing: -.01em;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  box-shadow: var(--lift);
  transition: border-color var(--fast), background var(--fast), color var(--fast), box-shadow var(--fast);
}
.btn:hover{ border-color: var(--ink-4); color: var(--ink); box-shadow: var(--lift-2); }
.btn svg{ color: var(--ink-4); }
.btn:hover svg{ color: var(--ink); }
.btn:disabled{ opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover{ border-color: var(--hair); color: var(--ink-2); }

.btn-p{ background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-p:hover{ background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-p svg, .btn-p:hover svg{ color: currentColor; }

.btn-d{ color: var(--neg); border-color: var(--neg-bg); background: var(--paper); }
.btn-d:hover{ background: var(--neg); border-color: var(--neg); color: #fff; }
.btn-d svg{ color: currentColor; }

.btn-g{ border-color: transparent; box-shadow: none; background: transparent; }
.btn-g:hover{ background: var(--sunken); border-color: transparent; box-shadow: none; }

.btn-i{ width: var(--h-control); padding: 0; justify-content: center; }

/* ---------------------------------------------------------
   18 · field
--------------------------------------------------------- */
.fg{ display: flex; flex-direction: column; }
.fl{ font-size: var(--t-sm); font-weight: 550; color: var(--ink-2); margin-bottom: var(--s-1); }
.req{ color: var(--neg); }
.fld{
  height: var(--h-control); border-radius: var(--r); border: 1px solid var(--hair);
  background: var(--sunken);
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  transition: background var(--fast), border-color var(--fast);
}
.fld:focus-within{ background: var(--paper); border-color: var(--ink-4); }
.fld.err{ border-color: var(--neg); }
.fld input, .fld textarea{
  border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
  font: inherit; font-size: var(--t-body); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fh{ font-size: var(--t-sm); color: var(--ink-3); line-height: 1.35; margin-top: var(--s-1); }
.fe{ font-size: var(--t-sm); color: var(--neg); line-height: 1.35; margin-top: var(--s-1); }
.pre, .suf{ color: var(--ink-3); user-select: none; flex-shrink: 0; }

/* ---------------------------------------------------------
   19 · select
--------------------------------------------------------- */
.sel{
  height: var(--h-control); border-radius: var(--r); border: 1px solid var(--hair);
  background-color: var(--sunken);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2393908D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
  appearance: none; -webkit-appearance: none;
  padding: 0 30px 0 10px;
  font: inherit; font-size: var(--t-body); color: var(--ink);
  transition: background-color var(--fast), border-color var(--fast);
}
.sel:focus-within, .sel:focus{ background-color: var(--paper); border-color: var(--ink-4); }

/* ---------------------------------------------------------
   20 · checkbox / switch
--------------------------------------------------------- */
.cb{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--t-body); color: var(--ink-2); }
.cb input{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cb-b{
  width: 15px; height: 15px; border-radius: var(--r-sm); border: 1px solid var(--hair);
  background: var(--paper); flex-shrink: 0; position: relative;
  transition: background var(--fast), border-color var(--fast);
}
.cb input:checked + .cb-b{ background: var(--accent); border-color: var(--accent); }
.cb input:checked + .cb-b::after{
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.cb input:focus-visible + .cb-b{ outline: 2px solid var(--accent); outline-offset: 1px; }

.sw-t{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--t-body); color: var(--ink-2); }
.sw-t input{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sw-b{
  width: 28px; height: 16px; border-radius: var(--r-full); background: var(--sunken);
  flex-shrink: 0; position: relative; transition: background var(--fast);
}
.sw-b::after{
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: var(--r-full); background: var(--paper);
  transition: transform var(--fast); box-shadow: var(--lift);
}
.sw-t input:checked + .sw-b{ background: var(--accent); }
.sw-t input:checked + .sw-b::after{ transform: translateX(12px); }
.sw-t input:focus-visible + .sw-b{ outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------
   21 · segmented
--------------------------------------------------------- */
.seg{
  margin-left: auto; display: flex; background: var(--canvas);
  border: 1px solid var(--hair); border-radius: var(--r); padding: 2px;
}
.seg button{
  height: var(--h-seg); padding: 0 9px; border: 0; background: transparent;
  border-radius: 5px; font-size: var(--t-sm); font-weight: 500; color: var(--ink-3);
  cursor: pointer; letter-spacing: -.005em;
}
.seg button.on{ background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--hair), var(--lift); }

/* Section tabs — for primary page-section navigation (settings/general.blade.php,
   pay-components/index.blade.php), distinct from .seg above (a small filter toggle, e.g.
   "All / Pending / Approved"). .seg's 21px pill buttons read as a minor filter widget, not
   "click here for a different section" — this is taller, underline-indicated, and left-aligned
   rather than margin-left:auto, so it reads as page structure rather than an aside control. */
.tabs{
  display: flex; gap: var(--s-5); flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); margin-bottom: var(--s-4);
}
.tabs button{
  height: 38px; padding: 0; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-size: var(--t-body); font-weight: 550; color: var(--ink-3);
  cursor: pointer; letter-spacing: -.008em;
  transition: color var(--fast), border-color var(--fast);
}
.tabs button:hover{ color: var(--ink-2); }
.tabs button.on{ color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------
   22 · alert
--------------------------------------------------------- */
.alert{
  display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r);
  position: relative; padding-left: calc(var(--s-4) + 3px);
}
.alert::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--r) 0 0 var(--r); }
.alert.ok{ border-color: var(--pos-bg); } .alert.ok::before{ background: var(--pos); }
.alert.wn{ border-color: var(--wrn-bg); } .alert.wn::before{ background: var(--wrn); }
.alert.ng{ border-color: var(--neg-bg); } .alert.ng::before{ background: var(--neg); }
.alert.nu{ border-color: var(--hair); }   .alert.nu::before{ background: var(--ink-4); }
.alert-content{ flex: 1; min-width: 0; }
.alert-title{ font-size: var(--t-base); font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.alert-body{ font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45; }

/* ---------------------------------------------------------
   23 · modal
--------------------------------------------------------- */
.mo{
  position: fixed; inset: 0; background: rgba(12,10,8,.32);
  display: grid; place-items: center; z-index: 100; padding: var(--s-4);
}
.mo-b{
  background: var(--paper); border-radius: var(--r-lg); max-width: 480px; width: 100%;
  box-shadow: var(--lift-2);
}
.mo-h{
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hair);
}
.mo-t{ font-size: var(--t-lg); font-weight: 600; letter-spacing: -.015em; }
.mo-c{ padding: var(--s-4); font-size: var(--t-body); color: var(--ink-2); line-height: 1.5; }
.mo-f{
  display: flex; justify-content: flex-end; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--hair);
}

/* ---------------------------------------------------------
   24 · dropdown
--------------------------------------------------------- */
.dd-m{
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r);
  box-shadow: var(--lift-2); min-width: 180px; padding: 4px;
}
.dd-i{
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 8px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: var(--t-base); cursor: pointer;
  transition: background var(--fast);
}
.dd-i:hover{ background: var(--sunken); }
.dd-i.dg{ color: var(--neg); }
.dd-sep{ height: 1px; background: var(--hair-2); margin: 4px; }

/* ---------------------------------------------------------
   25 · toast
--------------------------------------------------------- */
.toast{
  position: fixed; bottom: var(--s-4); right: var(--s-4); z-index: 110;
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r);
  box-shadow: var(--lift-2); padding: var(--s-3) var(--s-4);
  max-width: 360px; position: relative; padding-left: calc(var(--s-4) + 3px);
}
.toast::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--r) 0 0 var(--r); }
.toast.ok::before{ background: var(--pos); }
.toast.wn::before{ background: var(--wrn); }
.toast.ng::before{ background: var(--neg); }

/* ---------------------------------------------------------
   26 · stepper (Phase 4 — payrun wizard, docs U4-05)
--------------------------------------------------------- */
.stp-row{ display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-5) 0; }
.stp-item{ display: flex; flex-direction: column; align-items: center; gap: 7px; }
.stp-c{
  width: 26px; height: 26px; border-radius: var(--r-full); display: grid; place-items: center;
  font-size: 11px; font-weight: 600; border: 1.5px solid var(--hair-2); color: var(--ink-4);
  background: var(--paper);
}
.stp-item.now .stp-c{ background: var(--accent); border-color: var(--accent); color: #fff; }
.stp-item.done .stp-c{ border-color: var(--ink-3); color: var(--ink-3); background: var(--paper); }
.stp-l{ font-size: var(--t-sm); color: var(--ink-4); letter-spacing: -.005em; }
.stp-item.now .stp-l{ color: var(--ink); font-weight: 600; }
.stp-item.done .stp-l{ color: var(--ink-3); }
.stp-conn{ width: 56px; height: 1.5px; background: var(--hair-2); margin-top: -20px; }
.stp-conn.done{ background: var(--ink-3); }

/* choice-card: a selectable card button (payrun wizard period-type / period-option cards).
   Redesigned for a cleaner, more modern read (new-payrun page) — same classes/behaviour, no
   markup contract change: .selected still toggled by the existing JS, .ptb-check/.pob-check
   still just fade in on selection. */
.period-type-btn, .period-option-btn{
  display: flex; align-items: center; gap: var(--s-4); text-align: left;
  padding: var(--s-5); background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-lg); cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
  position: relative; font: inherit; color: inherit;
  box-shadow: 0 1px 2px rgba(12,10,8,.03);
}
.period-option-btn{ flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: var(--s-4) var(--s-4) var(--s-5); }
.period-type-btn:hover, .period-option-btn:hover{ border-color: var(--ink-4); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(12,10,8,.05); }
.period-type-btn.selected, .period-option-btn.selected{
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 10px rgba(12,10,8,.05);
  background: var(--accent-wash);
}
.period-type-btn > svg{ color: var(--ink-3); flex-shrink: 0; }
/* icon badge: lifts the period-type icon off the flat inline-svg look into a contained chip */
.ptb-badge{
  width: 44px; height: 44px; border-radius: var(--r); flex-shrink: 0;
  background: var(--sunken); display: grid; place-items: center; color: var(--ink-3);
  transition: background var(--fast), color var(--fast);
}
.period-type-btn.selected .ptb-badge{ background: var(--accent); color: #fff; }
.ptb-t{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ptb-t .st{ font-size: var(--t-lg); }
.ptb-check, .pob-check{
  position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6);
  transition: opacity var(--fast), transform var(--fast);
}
.period-type-btn.selected .ptb-check, .period-option-btn.selected .pob-check{ opacity: 1; transform: scale(1); }
.pob-dates{ font-size: var(--t-sm); color: var(--ink-2); display: flex; align-items: center; gap: 6px; font-weight: 550; }
.pob-dates svg{ color: var(--ink-4); }

/* "how it works" step cards — replaces the plain 3-column text block with numbered,
   badge-led cards matching the rest of the panel-based system. */
.pw-steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.pw-step{ display: flex; flex-direction: column; gap: var(--s-3); }
.pw-step-badge{
  width: 32px; height: 32px; border-radius: var(--r-full); flex-shrink: 0;
  background: var(--sunken); color: var(--ink-2); border: 1px solid var(--hair);
  display: grid; place-items: center; font-family: var(--serif); font-size: var(--t-lg); font-weight: 600;
}
.pw-step-t{ font-size: var(--t-base); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.pw-step-d{ font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
@media (max-width: 720px){
  .pw-steps{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   34 · wizard shell (payrun wizard redesign — full-bleed within the page area;
   sidebar/topbar are untouched, outside this scope. x-ui.wizard-progress replaces
   x-ui.stepper for these 4 views only; .stepper itself is unused elsewhere and untouched.)
--------------------------------------------------------- */
.wiz-progress{ margin-bottom: var(--s-6); }
.wiz-progress-track{
  height: 4px; border-radius: var(--r-full); background: var(--hair-2); overflow: hidden;
}
.wiz-progress-fill{
  height: 100%; border-radius: var(--r-full); background: var(--accent);
  transition: width 240ms ease;
}
.wiz-progress-meta{
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-2);
}
.wiz-progress-step{ font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.wiz-progress-label{ font-size: var(--t-sm); color: var(--ink-3); }

/* wiz-hero: the big centered choice screen for step 1 (period type) */
.wiz-hero{ max-width: 720px; margin: 0 auto; }
.wiz-hero-head{ text-align: center; margin-bottom: var(--s-7); }
.wiz-hero-head h1{ font-family: var(--serif); font-size: 34px; font-weight: 560; letter-spacing: -.02em; margin: 0 0 var(--s-2); }
.wiz-hero-head p{ color: var(--ink-3); font-size: var(--t-lg); }

/* wiz-tile: the big period-type choice (bigger sibling of .period-type-btn, same selected-state
   contract driven by the same JS — only used on the new step-1 hero screen) */
.wiz-tile{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3);
  padding: var(--s-7) var(--s-5); background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-lg); cursor: pointer; position: relative; font: inherit; color: inherit;
  box-shadow: 0 1px 2px rgba(12,10,8,.03);
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.wiz-tile:hover{ border-color: var(--ink-4); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(12,10,8,.06); }
.wiz-tile.selected{ border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 1px var(--accent), 0 6px 16px rgba(12,10,8,.06); }
.wiz-tile-badge{
  width: 56px; height: 56px; border-radius: var(--r-full); background: var(--sunken); color: var(--ink-3);
  display: grid; place-items: center; transition: background var(--fast), color var(--fast);
}
.wiz-tile.selected .wiz-tile-badge{ background: var(--accent); color: #fff; }
.wiz-tile-t{ font-family: var(--serif); font-size: 20px; font-weight: 560; letter-spacing: -.01em; }
.wiz-tile-d{ font-size: var(--t-base); color: var(--ink-3); }
.wiz-tile-check{
  position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6);
  transition: opacity var(--fast), transform var(--fast);
}
.wiz-tile.selected .wiz-tile-check{ opacity: 1; transform: scale(1); }
@media (max-width: 640px){
  .wiz-hero > div[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
}

/* wiz-section: a full-bleed content block on later steps (period picker, employee table, etc.),
   replacing the smaller stacked-panel look with more generous breathing room. */
.wiz-section{ margin-bottom: var(--s-6); }
.wiz-section-head{ margin-bottom: var(--s-4); }
.wiz-section-head h2{ font-family: var(--serif); font-size: 22px; font-weight: 560; letter-spacing: -.015em; margin: 0 0 2px; }
.wiz-section-head p{ color: var(--ink-3); font-size: var(--t-base); }

/* wiz-bar: sticky bottom action bar used on the employee-select / edit / review steps —
   consistent full-width footer instead of an in-flow panel row. */
.wiz-bar{
  position: sticky; bottom: 0; z-index: 10; margin-top: var(--s-5);
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: 0 -4px 16px rgba(12,10,8,.06), 0 2px 5px rgba(12,10,8,.05);
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4);
}
.wiz-bar-stats{ display: flex; align-items: center; gap: var(--s-6); }
.wiz-bar-stat{ text-align: left; }
.wiz-bar-stat .sub2{ margin-bottom: 2px; }

/* payrun-section: the 3-column hours/allowances/deductions layout inside each employee card
   on the edit-payrun wizard step (docs U4-05). */
.pr-section{ background: var(--canvas); border-radius: var(--r); padding: var(--s-4); }
.pr-title{ display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s-3); }
.pr-title svg{ color: var(--ink-3); }
.pr-row{ display: grid; grid-template-columns: 1fr 90px auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.pr-sticky-footer{ position: sticky; bottom: var(--s-4); box-shadow: var(--lift-2); z-index: 10; }

/* ---------------------------------------------------------
   27 · timeline (Phase 5 — request/ticket history, shared
   between leave requests and support tickets, docs U5-02/U5-04)
--------------------------------------------------------- */
.tl{ display: flex; flex-direction: column; }
.tl-row{ display: flex; gap: var(--s-3); padding-bottom: var(--s-4); position: relative; }
.tl-row:last-child{ padding-bottom: 0; }
.tl-row:not(:last-child)::before{
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--hair-2);
}
.tl-dot{
  width: 26px; height: 26px; border-radius: var(--r-full); flex-shrink: 0;
  display: grid; place-items: center; background: var(--sunken); color: var(--ink-3);
  border: 1.5px solid var(--paper); box-shadow: 0 0 0 1px var(--hair-2); z-index: 1;
}
.tl-dot.ok{ background: var(--pos-bg); color: var(--pos); }
.tl-dot.ng{ background: var(--neg-bg); color: var(--neg); }
.tl-dot.wn{ background: var(--wrn-bg); color: var(--wrn); }
.tl-body{ padding-top: 2px; }

/* ---------------------------------------------------------
   28 · calendar (Phase 5 — monthly attendance calendar, shared
   across employees/attendance/index, my-attendance, overview
   and the _calendar partial, docs U5-03, closes gap U16)
--------------------------------------------------------- */
.cal-nav{ display: flex; align-items: center; gap: var(--s-3); }
.cal-title{ font-size: var(--t-lg); font-weight: 600; color: var(--ink); min-width: 160px; text-align: center; }
.cal-legend{ display: flex; flex-wrap: wrap; gap: var(--s-4); }
.cal-legend-item{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.cal-legend-dot{ width: 12px; height: 12px; border-radius: var(--r-full); border: 1px solid var(--hair-2); }
.cal-legend-dot.present{ background: var(--pos-bg); border-color: var(--pos); }
.cal-legend-dot.leave{ background: var(--wrn-bg); border-color: var(--wrn); }
.cal-legend-dot.unpaid{ background: var(--neg-bg); border-color: var(--neg); }
.cal-legend-dot.weekend{ background: var(--sunken); border-color: var(--hair-2); }

.cal{ width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.cal th{
  background: var(--sunken); color: var(--ink-2); padding: 8px; text-align: center;
  font-weight: 600; font-size: var(--t-sm); border-radius: var(--r-sm);
}
.cal td{ padding: 0; vertical-align: top; }

.cal-cell{
  min-height: 76px; padding: var(--s-2); border-radius: var(--r-sm);
  border: 1px solid var(--hair-2); background: var(--paper); position: relative;
}
.cal-cell.empty{ background: transparent; border-color: transparent; }
.cal-cell.present{ background: var(--pos-bg); border-color: var(--pos); }
.cal-cell.weekend{ background: var(--sunken); border-color: var(--hair-2); }
.cal-cell.leave{ background: var(--wrn-bg); border-color: var(--wrn); }
.cal-cell.leave.unpaid{ background: var(--neg-bg); border-color: var(--neg); }
.cal-cell.leave.partial{ background: linear-gradient(135deg, var(--wrn-bg) 50%, var(--pos-bg) 50%); }
.cal-cell.future{ background: var(--sunken); border-color: var(--hair-2); opacity: .55; }
.cal-cell.before-hire, .cal-cell.after-termination{ background: var(--sunken); border-color: var(--hair-2); opacity: .35; }
.cal-cell.today{ border: 2px solid var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.cal-cell.clickable{ cursor: pointer; }
.cal-cell.clickable:hover{ border-color: var(--accent); box-shadow: var(--lift); }

.cal-day-num{ font-size: var(--t-base); font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.cal-cell.weekend .cal-day-num, .cal-cell.future .cal-day-num{ color: var(--ink-3); }
.cal-day-name{ font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; }
.cal-status{ font-size: var(--t-xs); margin-top: 6px; padding: 2px 6px; border-radius: var(--r-sm); display: inline-block; }
.cal-status.present{ background: var(--pos-bg); color: var(--pos); }
.cal-status.weekend{ background: var(--hair-2); color: var(--ink-2); }
.cal-status.leave{ background: var(--wrn-bg); color: var(--wrn); }
.cal-status.leave.unpaid{ background: var(--neg-bg); color: var(--neg); }
.cal-status.future{ background: var(--hair-2); color: var(--ink-3); }
.cal-badge{ font-size: 10px; padding: 1px 4px; border-radius: 3px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--s-3); }
.cal-stat-box{ background: var(--sunken); padding: var(--s-3); border-radius: var(--r-sm); text-align: center; }
.cal-stat-value{ font-size: var(--t-xl); font-weight: 600; color: var(--ink); }
.cal-stat-label{ font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; }

/* ---------------------------------------------------------
   29 · chat (Phase 5 — AI assistant console, docs U5-07,
   restyled not redesigned: markup/JS logic unchanged, only
   the visual layer moved off Bootstrap-esque hand-rolled CSS)
--------------------------------------------------------- */
.chat-messages{ height: 500px; overflow-y: auto; padding: var(--s-5); background: var(--canvas); }
.message{ display: flex; gap: var(--s-3); margin-bottom: var(--s-4); }
.message-avatar{
  width: 32px; height: 32px; border-radius: var(--r-full); flex-shrink: 0;
  display: grid; place-items: center; background: var(--sunken); color: var(--ink-3);
}
.assistant-message .message-avatar{ background: var(--accent-wash); color: var(--accent); }
.user-message{ flex-direction: row-reverse; }
.user-message .message-avatar{ background: var(--ink); color: var(--paper); }
.message-content{ max-width: 75%; }
.user-message .message-content{ text-align: right; }
.message-bubble{ padding: 10px 14px; border-radius: var(--r-lg); line-height: 1.5; font-size: var(--t-body); }
.assistant-message .message-bubble{ background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px; }
.user-message .message-bubble{ background: var(--ink); color: var(--paper); border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg); text-align: left; }
.message-time{ font-size: 10.5px; color: var(--ink-4); margin-top: 4px; padding: 0 6px; }
.user-message .message-time{ text-align: right; }
.message-bubble p:last-child{ margin-bottom: 0; }
.message-bubble ul, .message-bubble ol{ margin: 0 0 6px; padding-left: 20px; }
.message-bubble li{ margin-bottom: 2px; }
.message-bubble code{ background: var(--sunken); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; font-family: var(--mono); }
.user-message .message-bubble code{ background: rgba(255,255,255,.15); }
.message-bubble pre{ background: var(--ink); color: var(--canvas); padding: var(--s-3); border-radius: var(--r-sm); overflow-x: auto; margin: 6px 0; }
.message-bubble table{ width: 100%; border-collapse: collapse; margin: 6px 0; font-size: var(--t-sm); }
.message-bubble th, .message-bubble td{ border: 1px solid var(--hair-2); padding: 6px; text-align: left; }
.message-bubble th{ background: var(--canvas); font-weight: 600; }
.error-message .message-bubble{ background: var(--neg-bg); border-color: var(--neg-bg); color: var(--neg); }

.typing-indicator{ display: flex; gap: 4px; padding: 4px 0; }
.typing-indicator span{ width: 7px; height: 7px; background: var(--ink-4); border-radius: var(--r-full); animation: typing 1.4s infinite ease-in-out; }
.typing-indicator span:nth-child(2){ animation-delay: .2s; }
.typing-indicator span:nth-child(3){ animation-delay: .4s; }
@keyframes typing{ 0%, 60%, 100%{ transform: translateY(0); opacity: .4; } 30%{ transform: translateY(-5px); opacity: 1; } }

.chat-input-area{ padding: var(--s-4); border-top: 1px solid var(--hair); background: var(--paper); }
.chat-input-area textarea{
  resize: none; border-radius: var(--r-lg); padding: 10px 16px; width: 100%;
  border: 1px solid var(--hair); background: var(--sunken); font: inherit; font-size: var(--t-body); color: var(--ink);
  transition: border-color var(--fast), background var(--fast);
}
.chat-input-area textarea:focus{ outline: 0; border-color: var(--ink-4); background: var(--paper); }
.chat-input-area .btn-p{ border-radius: var(--r-lg); padding: 0 20px; }

.quick-action{ border-radius: var(--r-full); font-size: var(--t-sm); }

/* ============================================================
   30. AUTH SHELL — docs/ui-upgrade/05-COMPONENTS.md §30
   ============================================================ */
.auth-shell{ display: grid; grid-template-columns: 46% 54%; min-height: 100vh; background: var(--paper); }

.auth-brand{
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--accent-wash) 0%, transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--accent-deep) 46%, var(--accent) 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-8);
}
/* §30.1 — the one ambient-motion exception in this system. See docs 04 §9.1. */
.auth-brand::before{
  content: "";
  position: absolute; inset: -10%;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .1;
  animation: auth-field-drift var(--slow) infinite;
  pointer-events: none;
}
.auth-brand::after{
  content: "";
  position: absolute; right: -18%; top: 8%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 70%);
  pointer-events: none;
}
@keyframes auth-field-drift{
  from { background-position: 0 0; }
  to   { background-position: 140px 84px; }
}

.auth-brand-top{
  font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; color: #fff;
  position: relative; z-index: 1; display: flex; align-items: center; gap: 9px;
}
.auth-brand-mark{
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  backdrop-filter: blur(2px);
}

.auth-brand-mid{ position: relative; z-index: 1; }
.auth-brand-eyebrow{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: var(--s-4);
}
.auth-brand-eyebrow::before{ content: ""; width: 5px; height: 5px; border-radius: var(--r-full); background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.auth-brand-mid h2{
  font-family: var(--serif); font-size: 38px; font-weight: 560; letter-spacing: -.02em; line-height: 1.15;
  margin-bottom: var(--s-3); color: #fff;
}
.auth-brand-mid p{ color: rgba(255,255,255,.74); font-size: var(--t-lg); line-height: 1.55; max-width: 400px; }

.auth-feature-list{ margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); max-width: 400px; }
.auth-feature{ display: flex; align-items: flex-start; gap: 11px; font-size: var(--t-base); color: rgba(255,255,255,.88); }
.auth-feature-ico{
  flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--r-full); margin-top: 1px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  display: grid; place-items: center; color: #fff;
}

.auth-proof-card{
  position: relative; z-index: 1; margin-top: var(--s-6);
  background: rgba(12,10,8,.22); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg); padding: var(--s-4); backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: var(--s-4); max-width: 400px;
}
.auth-proof-stat{ display: flex; flex-direction: column; }
.auth-proof-num{ font-size: 20px; font-weight: 650; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.auth-proof-label{ font-size: var(--t-xs); color: rgba(255,255,255,.66); letter-spacing: .01em; }
.auth-proof-sep{ width: 1px; align-self: stretch; background: rgba(255,255,255,.18); }

.auth-brand-foot{ display: flex; gap: var(--s-4); font-size: var(--t-sm); color: rgba(255,255,255,.62); position: relative; z-index: 1; }
.auth-brand-foot a{ color: inherit; }
.auth-brand-foot a:hover{ color: #fff; }

.auth-form-panel{ background: var(--paper); display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.auth-card{ width: 100%; max-width: 400px; }
.auth-card-mobile{
  display: none; align-items: center; gap: 9px; font-size: var(--t-lg); font-weight: 600;
  margin-bottom: var(--s-6); color: var(--ink);
}
.auth-card-mobile-mark{
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.auth-title{ font-family: var(--serif); font-size: 30px; font-weight: 560; letter-spacing: -.02em; margin-bottom: 6px; color: var(--ink); }
.auth-subtitle{ color: var(--ink-3); font-size: var(--t-lg); line-height: 1.5; margin-bottom: var(--s-6); }
.auth-form{ display: flex; flex-direction: column; gap: var(--s-4); }
.auth-form .fg{ margin: 0; } /* .auth-form's own gap replaces .fg's default stacking margin */
/* Auth fields run larger and rounder than the app's dense data-entry defaults — this is the
   one first impression a new user gets before any density trade-off matters. Scoped to
   .auth-form only; .fld elsewhere in the app is untouched. */
.auth-form .fld{
  height: 44px; border-radius: var(--r); padding: 0 13px;
  border-color: var(--hair); background: var(--sunken);
}
.auth-form .fld:focus-within{
  background: var(--paper); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.auth-form .fld.err:focus-within{ box-shadow: 0 0 0 3px var(--neg-bg); }
.auth-form .fl{ font-size: var(--t-base); margin-bottom: 6px; }
.auth-form .auth-submit{ height: 44px; font-size: var(--t-lg); font-weight: 600; border-radius: var(--r); position: relative; }
/* Loading state: guest.blade.php's submit handler adds .loading + disabled on any .submit-btn.
   Spins .btn-text out and a ring in, without changing the button's box (no layout shift). */
.auth-submit.loading{ color: transparent; pointer-events: none; }
.auth-submit.loading .btn-text{ opacity: 0; }
.auth-submit.loading::after{
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border-radius: var(--r-full); border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: auth-spin .6s linear infinite;
}
@keyframes auth-spin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .auth-submit.loading::after{ animation-duration: 1.2s; }
}

.auth-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.auth-row-end{ display: flex; justify-content: flex-end; }
.auth-center{ text-align: center; }
.auth-link{ color: var(--ink-2); font-size: var(--t-sm); }
.auth-link:hover{ color: var(--ink); }
.auth-back-link{
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-3); font-size: var(--t-sm); font-weight: 500;
}
.auth-back-link:hover{ color: var(--ink); }
.auth-field-icon-btn{ height: auto; width: auto; padding: 2px; }
.auth-mb{ margin-bottom: var(--s-4); } /* spacer for elements outside .auth-form's own gap flow */
.auth-helper-text{ font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.auth-helper-text strong{ color: var(--ink-2); }
.auth-meta{ font-size: var(--t-sm); color: var(--ink-3); }
.auth-submit{ width: 100%; justify-content: center; }
.auth-footer-note{ text-align: center; font-size: var(--t-sm); color: var(--ink-3); }
.auth-footer-note a{ color: var(--ink-2); }
.auth-footer-note a:hover{ color: var(--ink); }

.auth-readonly-field{ background: var(--sunken); }
.auth-readonly-field span{ color: var(--ink-2); }

.auth-strength{ margin-top: var(--s-2); }
.auth-strength[hidden]{ display: none; }
.auth-strength-text{ font-size: var(--t-sm); color: var(--ink-3); margin-top: 4px; }

.auth-text-link{ border: 0; background: none; font: inherit; font-size: var(--t-sm); cursor: pointer; text-decoration: underline; padding: 0; }
.auth-text-link-strong{ color: var(--ink-2); }
.auth-text-link-quiet{ color: var(--ink-3); }
.auth-text-link-quiet:hover, .auth-text-link-strong:hover{ color: var(--ink); }

.auth-p{ font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.auth-p strong{ color: var(--ink-2); }

.auth-mono-input{ font-family: var(--mono); }
.auth-mb-top{ margin-top: var(--s-4); }

.auth-option-list{ display: flex; flex-direction: column; gap: var(--s-3); }

.auth-warning-box{
  padding: var(--s-3);
  border: 1px solid var(--neg);
  border-radius: var(--r);
  background: var(--neg-bg);
}
.auth-warning-box[hidden]{ display: none; }
.auth-warning-text{ font-size: var(--t-sm); color: var(--neg); margin-bottom: var(--s-3); }
.auth-warning-actions{ display: flex; gap: var(--s-2); }

.auth-qr-box{
  display: flex; justify-content: center;
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
}

.auth-secret-key-label{ font-size: var(--t-sm); color: var(--ink-3); margin-bottom: 4px; }
.auth-secret-key{
  font-family: var(--mono);
  font-size: 13px;
  padding: var(--s-2) var(--s-3);
  background: var(--sunken);
  border-radius: var(--r);
  word-break: break-all;
  letter-spacing: .05em;
}

.auth-recovery-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--sunken);
  border-radius: var(--r-lg);
  font-family: var(--mono);
  font-size: 13px;
}

.auth-link-btn{ text-decoration: none; }

.settings-panel{ max-width: 520px; }
.settings-panel-body{ padding: var(--s-4); }

/* 2FA settings page — spread-out two-column layout: a status/info side panel plus the
   method-selection panel, replacing the old single 520px-max stacked panel. */
.tfa-layout{ display: grid; grid-template-columns: 320px minmax(0,1fr); gap: var(--s-5); align-items: start; }
.tfa-status-panel{ padding: var(--s-5); }
.tfa-status-icon{
  width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--accent-wash); color: var(--accent-ink);
  display: grid; place-items: center; margin-bottom: var(--s-4);
}
.tfa-status-icon.off{ background: var(--sunken); color: var(--ink-3); }
.tfa-status-title{ font-family: var(--serif); font-size: 19px; font-weight: 560; letter-spacing: -.01em; margin-bottom: 4px; }
.tfa-status-current{ font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s-4); }
.tfa-status-current strong{ color: var(--ink); }
.tfa-facts{ display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--hair-2); }
.tfa-fact{ display: flex; align-items: flex-start; gap: 10px; }
.tfa-fact-ico{ width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--sunken); color: var(--ink-3); flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; }
.tfa-fact-t{ font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
@media (max-width: 860px){
  .tfa-layout{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .auth-shell{ grid-template-columns: 1fr; }
  .auth-brand{ display: none; }
  .auth-card-mobile{ display: flex; }
}

/* ============================================================
   31. CODE INPUT / OPTION SELECT — docs/ui-upgrade/05-COMPONENTS.md §31
   ============================================================ */
.code-input{ font-family: var(--mono); font-size: 20px; letter-spacing: .3em; text-align: center; }

.option-select{
  display: block; width: 100%; text-align: left;
  padding: var(--s-4);
  border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.option-select:hover{ border-color: var(--ink-4); }
.option-select.current,
.option-select[disabled]{ background: var(--sunken); cursor: default; }
.option-select.current:hover,
.option-select[disabled]:hover{ border-color: var(--hair); }
.opt-label{ font-size: var(--t-body); font-weight: 550; color: var(--ink); }
.opt-sub{ font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; }

/* Icon-badge variant — additive, opt-in via .opt-row/.opt-badge markup inside .option-select.
   Used by the redesigned 2FA settings page; plain .option-select usage (two-factor-choice.blade.php)
   is unaffected since it never renders these classes. */
.option-select.opt-lg{ padding: var(--s-5); border-radius: var(--r-lg); }
.option-select.opt-lg:hover:not(.current):not([disabled]){ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(12,10,8,.05); }
.opt-row{ display: flex; align-items: flex-start; gap: var(--s-3); }
.opt-badge{
  width: 38px; height: 38px; border-radius: var(--r); flex-shrink: 0;
  background: var(--sunken); color: var(--ink-3);
  display: grid; place-items: center;
  transition: background var(--fast), color var(--fast);
}
.option-select.current .opt-badge{ background: var(--accent); color: #fff; }
.opt-row .opt-label{ display: flex; align-items: center; gap: 8px; }
.opt-current-badge{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-wash); border-radius: var(--r-full);
  padding: 2px 8px 2px 6px;
}

/* ---------------------------------------------------------
   32 · shell utilities (sidebar user-menu + flash messages, shared
   identically by layouts/central.blade.php and layouts/deployment.blade.php —
   docs U-AUDIT-01, consolidating repeated inline style="" attributes)
--------------------------------------------------------- */
.sfoot-trigger{ all: unset; display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; }
.sfoot-menu{ position: absolute; bottom: 56px; left: 10px; right: 10px; z-index: 20; }

/* ---------------------------------------------------------
   NT3-02 · notification bell — docs/notifications/02-PLAN.md
--------------------------------------------------------- */
.notif-wrap{ position: relative; }
.notif-menu{
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 360px; max-width: calc(100vw - 32px);
  max-height: 420px; overflow-y: auto;
  padding: 0;
}
.notif-menu-h{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--hair-2);
}
.notif-menu-t{ font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.notif-mark-all{
  font-size: var(--t-sm); color: var(--ink-3); background: none; border: 0;
  cursor: pointer; padding: 2px 4px;
}
.notif-mark-all:hover{ color: var(--ink); }
.notif-item{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-bottom: 1px solid var(--hair-2);
  cursor: pointer; transition: background var(--fast);
}
.notif-item:last-child{ border-bottom: 0; }
.notif-item:hover{ background: var(--sunken); }
.notif-item.unread{ background: color-mix(in oklch, var(--accent) 6%, var(--paper)); }
.notif-item-dot{
  flex-shrink: 0; margin-top: 6px; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--accent);
}
.notif-item-dot.read{ background: transparent; }
.notif-item-body{ min-width: 0; flex: 1; }
.notif-item-title{ font-size: var(--t-base); color: var(--ink); font-weight: 500; }
.notif-item-time{ font-size: var(--t-sm); color: var(--ink-4); margin-top: 2px; }
.notif-empty{ padding: 32px 16px; text-align: center; color: var(--ink-4); font-size: var(--t-base); }
.notif-menu-f{
  padding: 8px 12px; text-align: center; border-top: 1px solid var(--hair-2);
}
.notif-menu-f a{ font-size: var(--t-sm); color: var(--accent); }
.dd-i-btn{ width: 100%; border: 0; background: none; font: inherit; text-align: left; }
.flash-mb{ margin-bottom: var(--s-4); }
.flash-error-list{ margin: 4px 0 0; padding-left: 16px; }

/* ---------------------------------------------------------
   33 · central topnav (horizontal navigation replacing the
   sidebar for the central portal only — layouts/central.blade.php.
   Tenant's .side/.nav/.ni sidebar is untouched and unaffected.)
--------------------------------------------------------- */
.cnav{
  background: var(--canvas); border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 30;
}
.cnav-top{
  height: var(--h-topbar);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--hair);
}
.cnav-brand{ display: flex; align-items: center; gap: var(--s-2); }
.cnav-links{
  display: flex; align-items: center; gap: 2px;
  height: 42px; padding: 0 var(--s-5);
  overflow-x: auto;
}
.cnl{
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 var(--s-3); border-radius: var(--r-sm);
  color: var(--ink-3); font-size: var(--t-base); font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap; position: relative;
  transition: background var(--fast), color var(--fast);
}
.cnl:hover{ background: var(--sunken); color: var(--ink); }
.cnl.on{ color: var(--ink); font-weight: 600; }
.cnl.on::after{
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -7px; height: 2px;
  background: var(--accent); border-radius: var(--r-full);
}
.cnl .g{ width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-4); }
.cnl.on .g{ color: var(--accent); }
.cnl-menu{
  position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 20;
  min-width: 180px;
}
.cnav-user{ padding: 0; border: 0; }
.cnav-user-menu{ position: absolute; top: 100%; right: 0; left: auto; bottom: auto; margin-top: 8px; }
.cnav-tax-wrap{ position: relative; }

/* ============================================================
   End of component set. 33 components (§1-33), matching
   docs/ui-upgrade/05-COMPONENTS.md exactly.
   ============================================================ */