/* AMDana — design system.
   "Ink on paper, aubergine for intent."

   The canvas is warm paper, not the blue-grey of an office suite; the chrome
   is light so the work is the darkest thing on screen. One accent — a deep,
   low-chroma aubergine — carries every interactive intent (primary action,
   active nav, focus, selection). It is deliberately off the semantic wheel, so
   ok/warn/danger keep green/amber/red entirely to themselves and a status
   chip never has to compete with a button for the same hue.

   Faces: Space Grotesk for display and figures (wordmark, headings, stat
   values), Public Sans for interface text, IBM Plex Mono for keys and raw
   output. Digits are tabular wherever they line up in a column. */

:root {
  /* ── Accent: aubergine ─────────────────────────────────────────────── */
  --a-950: #1D0A18;
  --a-900: #2B1124;
  --a-800: #3A1730;
  --a-700: #4E2142;  /* primary action, active nav text */
  --a-600: #632B54;
  --a-500: #7C3B6A;
  --a-400: #9B5A88;
  --a-300: #C193B2;
  --a-200: #E2C9D9;
  --a-100: #F1E3EC;
  --a-50:  #FAF3F7;

  /* ── Neutrals: warm paper → ink ────────────────────────────────────── */
  --n-0:   #FFFFFF;
  --n-25:  #FCFBF9;
  --n-50:  #F7F5F1;
  --n-100: #F0EDE7;
  --n-200: #E4E0D8;
  --n-300: #D3CEC3;
  --n-400: #A7A094;
  --n-500: #7F796E;
  --n-600: #635E55;
  --n-700: #464239;
  --n-900: #241E23;

  /* ── Semantics: never the accent ───────────────────────────────────── */
  --ok-700:     #1B6B3A;
  --ok-600:     #237A45;
  --ok-200:     #B4DCC2;
  --ok-50:      #E8F4EC;
  --warn-700:   #8A5906;
  --warn-600:   #A66C07;
  --warn-200:   #EBD199;
  --warn-50:    #FBF1DE;
  --danger-700: #A0251F;
  --danger-600: #BC3127;
  --danger-200: #F0BCB5;
  --danger-50:  #FBE9E6;
  --info-700:   #1A5786;
  --info-600:   #20699F;
  --info-200:   #B2D1E5;
  --info-50:    #E8F1F8;

  /* ── Roles ─────────────────────────────────────────────────────────── */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-25);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-900);
  --muted: var(--n-600);
  --danger: var(--danger-600);
  /* Kept as aliases: page markup reaches for these by name for left-rules and
     inline emphasis. They now resolve into the semantic ramp above. */
  --green-700: var(--ok-700);
  --amber-600: var(--warn-700);
  --teal-600: var(--info-700);

  /* ── Shape & depth ─────────────────────────────────────────────────── */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 7px;
  --shadow-xs: 0 1px 2px rgba(36, 30, 35, .05);
  --shadow-sm: 0 1px 2px rgba(36, 30, 35, .05), 0 2px 8px rgba(36, 30, 35, .04);
  --shadow-md: 0 4px 12px rgba(36, 30, 35, .08), 0 1px 3px rgba(36, 30, 35, .06);
  --shadow-lg: 0 24px 60px rgba(29, 10, 24, .18), 0 2px 8px rgba(29, 10, 24, .08);
  --ring: 0 0 0 3px var(--a-100);

  /* ── Type ──────────────────────────────────────────────────────────── */
  --display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12.5px;
  --fs-md:  13.5px;
  --fs-base:14.5px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-2xl: 24px;
  --fs-3xl: 29px;
  --track-eyebrow: .1em;

  /* ── Chrome metrics ────────────────────────────────────────────────── */
  --rail: 230px;
  --topbar-h: 54px;
  --panel-w: 480px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur: .2s;
}

/* ── Reset & base ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font: 400 var(--fs-base)/1.55 var(--body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1;
  overflow-x: clip; /* one page = one vertical scroll; wide tables scroll inside their own container */
}
a { color: var(--a-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
img, svg, video { max-width: 100%; }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

h1 {
  font-family: var(--display); font-size: var(--fs-2xl); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.2; margin: 0 0 4px; color: var(--text);
}
h2 {
  font-family: var(--body); font-size: var(--fs-md); font-weight: 700;
  letter-spacing: .005em; margin: 0 0 12px; color: var(--text);
}
h3 { font-family: var(--body); font-size: var(--fs-sm); font-weight: 700; margin: 0 0 8px; color: var(--n-700); }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 600; }

::selection { background: var(--a-100); color: var(--a-900); }
:focus-visible { outline: 2px solid var(--a-600); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Shell layout ─────────────────────────────────────────────────────── */
/* Grid areas, not source order: the top bar spans both columns, the rail and
   the canvas share the row below it. The sign-in screen spans the whole grid,
   so #app needs no second layout mode. */
#app {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'top top' 'rail main';
  min-height: 100vh; min-height: 100dvh;
}
.login-wrap { grid-area: 1 / 1 / -1 / -1; }

.topbar {
  grid-area: top;
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h); min-height: var(--topbar-h);
  padding: 0 16px 0 18px;
  padding-top: env(safe-area-inset-top);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar .menu { display: none; }

.logo {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-lg);
  letter-spacing: -.025em; color: var(--text); white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo em { font-style: normal; color: var(--a-600); }
.logo small {
  display: block; font-family: var(--body); font-weight: 500; font-size: var(--fs-2xs);
  color: var(--n-500); letter-spacing: var(--track-eyebrow); text-transform: uppercase; margin-top: 2px;
}

/* Tenant slot. Real tenant branding lands here later; for now it names the
   product's scope so the bar is never dressed up with something untrue. */
.tenant {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--n-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tenant::before {
  content: ''; width: 1px; height: 18px; background: var(--border-strong); flex-shrink: 0;
}

/* Global search — deliberately inert until it is real. */
.topsearch { position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.topsearch-i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--n-400); pointer-events: none; line-height: 1;
}
.topsearch input {
  width: 100%; padding: 6px 10px 6px 30px; font-size: var(--fs-sm);
  background: var(--n-50); border: 1px solid var(--border); border-radius: 8px;
  color: var(--n-500); min-height: 34px;
}
.topsearch input:disabled { cursor: not-allowed; opacity: 1; }
.topsearch input::placeholder { color: var(--n-400); }

.whoami { display: flex; align-items: center; gap: 9px; margin-left: auto; min-width: 0; }
.whoami-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.whoami-txt b {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.whoami-txt small {
  font-size: var(--fs-2xs); font-weight: 600; color: var(--n-500);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
}

/* ── Rail ─────────────────────────────────────────────────────────────── */
/* The rail's paper runs the full height of the document while the nav itself
   sticks under the top bar — so a long page never shows the rail running out. */
.sidebar {
  grid-area: rail;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.sidebar nav {
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h)); max-height: calc(100dvh - var(--topbar-h));
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding: 12px 10px 16px;
}
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  font-size: var(--fs-md); font-weight: 500; color: var(--n-700);
  white-space: nowrap; overflow: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar nav a .nicon {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; border-radius: 6px;
  filter: saturate(.62);
}
.sidebar nav a .nlabel { overflow: hidden; text-overflow: ellipsis; }
.sidebar nav a:hover { background: var(--n-100); color: var(--text); text-decoration: none; }
.sidebar nav a.active {
  background: var(--a-50); color: var(--a-700); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--a-600);
}
.sidebar nav a.active .nicon { filter: none; }
.sidebar nav .nav-group {
  margin: 14px 10px 4px; font-size: var(--fs-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--n-400);
}
.sidebar nav .nav-group:first-child { margin-top: 2px; }

/* The handful of destinations that also earn a slot on the mobile tab bar get
   a coloured marker, so the rail has a scannable spine. */
.sidebar nav a.nav-primary { font-weight: 600; color: var(--n-700); }
.sidebar nav a.nav-primary .nicon {
  color: var(--pc, var(--a-600));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, var(--a-600)) 26%, transparent);
  background: color-mix(in srgb, var(--pc, var(--a-600)) 9%, transparent);
  font-size: 12px; filter: none;
}
.sidebar nav a.nav-primary small { display: none; }
.sidebar nav a.nav-primary.active { color: var(--a-700); }
.nav-primary.pc-green { --pc: var(--ok-600); }
.nav-primary.pc-blue  { --pc: var(--info-600); }
.nav-primary.pc-teal  { --pc: var(--a-500); }
.nav-primary.pc-amber { --pc: var(--warn-600); }

.sidebar-foot {
  border-top: 1px solid var(--border); margin-left: 0; flex-shrink: 0;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  display: none; /* the rail's account block is for the mobile drawer */
}
.sidebar-foot .whoami-txt b { max-width: 150px; }

/* ── Canvas ───────────────────────────────────────────────────────────── */
.main {
  grid-area: main; min-width: 0;
  padding: 28px 34px 56px;
  width: 100%; max-width: 1320px;
}
.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-head p { margin: 0; color: var(--muted); font-size: var(--fs-md); max-width: 68ch; }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card > h2 {
  display: flex; align-items: center; gap: 8px;
  margin: -2px 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--n-100);
}
.card > h2:only-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr)); margin-bottom: 16px; }

/* Stat tile: label sits above the figure, and colour only appears when a
   number actually means something. */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px 14px; box-shadow: var(--shadow-xs);
}
.stat .label {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--n-500);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
}
.stat .value {
  font-family: var(--display); font-size: 26px; font-weight: 500; line-height: 1.15;
  margin-top: 5px; color: var(--text); font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.02em;
}
.stat .value.small { font-size: var(--fs-lg); letter-spacing: -.01em; }
.stat.ok     { box-shadow: var(--shadow-xs), inset 3px 0 0 var(--ok-600); }
.stat.warn   { box-shadow: var(--shadow-xs), inset 3px 0 0 var(--warn-600); }
.stat.danger { box-shadow: var(--shadow-xs), inset 3px 0 0 var(--danger-600); }

/* ── Tables ───────────────────────────────────────────────────────────── */
.table-wrap {
  overflow: auto; max-height: min(68vh, 720px);
  border-radius: var(--radius-sm);
  overscroll-behavior-x: contain;
}
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  text-align: left; font-size: var(--fs-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--n-500);
  padding: 9px 10px; white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--border-strong);
}
td {
  padding: 10px; border-bottom: 1px solid var(--n-100); vertical-align: middle;
  background: var(--surface);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--a-50); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--a-50); }

/* Frozen edges: the first and last columns stay put while a wide table is
   scrolled sideways. */
.table-wrap.freeze { }
.freeze th:first-child, .freeze td:first-child {
  position: sticky; left: 0; z-index: 3; background: var(--surface);
  box-shadow: inset -10px 0 8px -10px rgba(36, 30, 35, .22); white-space: nowrap;
}
.freeze th:last-child, .freeze td:last-child {
  position: sticky; right: 0; z-index: 3; background: var(--surface);
  box-shadow: inset 10px 0 8px -10px rgba(36, 30, 35, .22);
}
.freeze thead th:first-child, .freeze thead th:last-child { z-index: 4; }
.freeze tbody tr:hover td:first-child, .freeze tbody tr:hover td:last-child { background: var(--a-50); }
.freeze td[colspan] { position: static; box-shadow: none; }

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px; border: 1px solid transparent;
  font-family: var(--body); font-size: var(--fs-2xs); font-weight: 700; line-height: 1.7;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badge.green  { background: var(--ok-50);     color: var(--ok-700);     border-color: var(--ok-200); }
.badge.blue   { background: var(--info-50);   color: var(--info-700);   border-color: var(--info-200); }
.badge.yellow { background: var(--warn-50);   color: var(--warn-700);   border-color: var(--warn-200); }
.badge.red    { background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-200); }
.badge.gray   { background: var(--n-100);     color: var(--n-600);      border-color: var(--n-200); }

/* ── Status & priority chips ──────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 7px; border-radius: 6px; border: 1px solid transparent;
  font-family: var(--body); font-size: var(--fs-2xs); font-weight: 700; line-height: 1.7;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
/* Statuses */
.chip-todo        { background: var(--n-100);     color: var(--n-700);      border-color: var(--n-200); }
.chip-in_progress { background: var(--info-50);   color: var(--info-700);   border-color: var(--info-200); }
.chip-blocked     { background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-200); }
.chip-review      { background: var(--a-50);      color: var(--a-700);      border-color: var(--a-200); }
.chip-done        { background: var(--ok-50);     color: var(--ok-700);     border-color: var(--ok-200); }
.chip-done::before { border-radius: 1px; transform: rotate(45deg) scale(.85); }
.chip-cancelled   { background: transparent; color: var(--n-500); border-color: var(--n-300); text-decoration: line-through; text-decoration-thickness: 1px; }
.chip-cancelled::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
/* Priorities */
.chip-low     { background: var(--n-50);    color: var(--n-600);      border-color: var(--n-200); }
.chip-low::before     { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.chip-normal  { background: var(--info-50); color: var(--info-700);   border-color: var(--info-200); }
.chip-high    { background: var(--warn-50); color: var(--warn-700);   border-color: var(--warn-200); }
.chip-urgent  { background: var(--danger-600); color: #fff; border-color: var(--danger-700); }
.chip-urgent::before { background: #fff; }

/* ── Avatar ───────────────────────────────────────────────────────────── */
.avatar {
  --h: 300;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--body); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; user-select: none;
  background: hsl(var(--h) 44% 93%);
  color: hsl(var(--h) 52% 27%);
  box-shadow: inset 0 0 0 1px hsl(var(--h) 38% 82%);
}
.avatar.sm { width: 22px; height: 22px; font-size: 9.5px; }
.avatar.lg { width: 36px; height: 36px; font-size: var(--fs-md); }
/* Deterministic hue, 0–359. Written out rather than computed so the mapping
   holds in every engine, not just the ones with typed attr(). */
.avatar[data-hue="0"]{--h:0}.avatar[data-hue="1"]{--h:1}.avatar[data-hue="2"]{--h:2}.avatar[data-hue="3"]{--h:3}.avatar[data-hue="4"]{--h:4}.avatar[data-hue="5"]{--h:5}.avatar[data-hue="6"]{--h:6}.avatar[data-hue="7"]{--h:7}.avatar[data-hue="8"]{--h:8}.avatar[data-hue="9"]{--h:9}
.avatar[data-hue="10"]{--h:10}.avatar[data-hue="11"]{--h:11}.avatar[data-hue="12"]{--h:12}.avatar[data-hue="13"]{--h:13}.avatar[data-hue="14"]{--h:14}.avatar[data-hue="15"]{--h:15}.avatar[data-hue="16"]{--h:16}.avatar[data-hue="17"]{--h:17}.avatar[data-hue="18"]{--h:18}.avatar[data-hue="19"]{--h:19}
.avatar[data-hue="20"]{--h:20}.avatar[data-hue="21"]{--h:21}.avatar[data-hue="22"]{--h:22}.avatar[data-hue="23"]{--h:23}.avatar[data-hue="24"]{--h:24}.avatar[data-hue="25"]{--h:25}.avatar[data-hue="26"]{--h:26}.avatar[data-hue="27"]{--h:27}.avatar[data-hue="28"]{--h:28}.avatar[data-hue="29"]{--h:29}
.avatar[data-hue="30"]{--h:30}.avatar[data-hue="31"]{--h:31}.avatar[data-hue="32"]{--h:32}.avatar[data-hue="33"]{--h:33}.avatar[data-hue="34"]{--h:34}.avatar[data-hue="35"]{--h:35}.avatar[data-hue="36"]{--h:36}.avatar[data-hue="37"]{--h:37}.avatar[data-hue="38"]{--h:38}.avatar[data-hue="39"]{--h:39}
.avatar[data-hue="40"]{--h:40}.avatar[data-hue="41"]{--h:41}.avatar[data-hue="42"]{--h:42}.avatar[data-hue="43"]{--h:43}.avatar[data-hue="44"]{--h:44}.avatar[data-hue="45"]{--h:45}.avatar[data-hue="46"]{--h:46}.avatar[data-hue="47"]{--h:47}.avatar[data-hue="48"]{--h:48}.avatar[data-hue="49"]{--h:49}
.avatar[data-hue="50"]{--h:50}.avatar[data-hue="51"]{--h:51}.avatar[data-hue="52"]{--h:52}.avatar[data-hue="53"]{--h:53}.avatar[data-hue="54"]{--h:54}.avatar[data-hue="55"]{--h:55}.avatar[data-hue="56"]{--h:56}.avatar[data-hue="57"]{--h:57}.avatar[data-hue="58"]{--h:58}.avatar[data-hue="59"]{--h:59}
.avatar[data-hue="60"]{--h:60}.avatar[data-hue="61"]{--h:61}.avatar[data-hue="62"]{--h:62}.avatar[data-hue="63"]{--h:63}.avatar[data-hue="64"]{--h:64}.avatar[data-hue="65"]{--h:65}.avatar[data-hue="66"]{--h:66}.avatar[data-hue="67"]{--h:67}.avatar[data-hue="68"]{--h:68}.avatar[data-hue="69"]{--h:69}
.avatar[data-hue="70"]{--h:70}.avatar[data-hue="71"]{--h:71}.avatar[data-hue="72"]{--h:72}.avatar[data-hue="73"]{--h:73}.avatar[data-hue="74"]{--h:74}.avatar[data-hue="75"]{--h:75}.avatar[data-hue="76"]{--h:76}.avatar[data-hue="77"]{--h:77}.avatar[data-hue="78"]{--h:78}.avatar[data-hue="79"]{--h:79}
.avatar[data-hue="80"]{--h:80}.avatar[data-hue="81"]{--h:81}.avatar[data-hue="82"]{--h:82}.avatar[data-hue="83"]{--h:83}.avatar[data-hue="84"]{--h:84}.avatar[data-hue="85"]{--h:85}.avatar[data-hue="86"]{--h:86}.avatar[data-hue="87"]{--h:87}.avatar[data-hue="88"]{--h:88}.avatar[data-hue="89"]{--h:89}
.avatar[data-hue="90"]{--h:90}.avatar[data-hue="91"]{--h:91}.avatar[data-hue="92"]{--h:92}.avatar[data-hue="93"]{--h:93}.avatar[data-hue="94"]{--h:94}.avatar[data-hue="95"]{--h:95}.avatar[data-hue="96"]{--h:96}.avatar[data-hue="97"]{--h:97}.avatar[data-hue="98"]{--h:98}.avatar[data-hue="99"]{--h:99}
.avatar[data-hue="100"]{--h:100}.avatar[data-hue="101"]{--h:101}.avatar[data-hue="102"]{--h:102}.avatar[data-hue="103"]{--h:103}.avatar[data-hue="104"]{--h:104}.avatar[data-hue="105"]{--h:105}.avatar[data-hue="106"]{--h:106}.avatar[data-hue="107"]{--h:107}.avatar[data-hue="108"]{--h:108}.avatar[data-hue="109"]{--h:109}
.avatar[data-hue="110"]{--h:110}.avatar[data-hue="111"]{--h:111}.avatar[data-hue="112"]{--h:112}.avatar[data-hue="113"]{--h:113}.avatar[data-hue="114"]{--h:114}.avatar[data-hue="115"]{--h:115}.avatar[data-hue="116"]{--h:116}.avatar[data-hue="117"]{--h:117}.avatar[data-hue="118"]{--h:118}.avatar[data-hue="119"]{--h:119}
.avatar[data-hue="120"]{--h:120}.avatar[data-hue="121"]{--h:121}.avatar[data-hue="122"]{--h:122}.avatar[data-hue="123"]{--h:123}.avatar[data-hue="124"]{--h:124}.avatar[data-hue="125"]{--h:125}.avatar[data-hue="126"]{--h:126}.avatar[data-hue="127"]{--h:127}.avatar[data-hue="128"]{--h:128}.avatar[data-hue="129"]{--h:129}
.avatar[data-hue="130"]{--h:130}.avatar[data-hue="131"]{--h:131}.avatar[data-hue="132"]{--h:132}.avatar[data-hue="133"]{--h:133}.avatar[data-hue="134"]{--h:134}.avatar[data-hue="135"]{--h:135}.avatar[data-hue="136"]{--h:136}.avatar[data-hue="137"]{--h:137}.avatar[data-hue="138"]{--h:138}.avatar[data-hue="139"]{--h:139}
.avatar[data-hue="140"]{--h:140}.avatar[data-hue="141"]{--h:141}.avatar[data-hue="142"]{--h:142}.avatar[data-hue="143"]{--h:143}.avatar[data-hue="144"]{--h:144}.avatar[data-hue="145"]{--h:145}.avatar[data-hue="146"]{--h:146}.avatar[data-hue="147"]{--h:147}.avatar[data-hue="148"]{--h:148}.avatar[data-hue="149"]{--h:149}
.avatar[data-hue="150"]{--h:150}.avatar[data-hue="151"]{--h:151}.avatar[data-hue="152"]{--h:152}.avatar[data-hue="153"]{--h:153}.avatar[data-hue="154"]{--h:154}.avatar[data-hue="155"]{--h:155}.avatar[data-hue="156"]{--h:156}.avatar[data-hue="157"]{--h:157}.avatar[data-hue="158"]{--h:158}.avatar[data-hue="159"]{--h:159}
.avatar[data-hue="160"]{--h:160}.avatar[data-hue="161"]{--h:161}.avatar[data-hue="162"]{--h:162}.avatar[data-hue="163"]{--h:163}.avatar[data-hue="164"]{--h:164}.avatar[data-hue="165"]{--h:165}.avatar[data-hue="166"]{--h:166}.avatar[data-hue="167"]{--h:167}.avatar[data-hue="168"]{--h:168}.avatar[data-hue="169"]{--h:169}
.avatar[data-hue="170"]{--h:170}.avatar[data-hue="171"]{--h:171}.avatar[data-hue="172"]{--h:172}.avatar[data-hue="173"]{--h:173}.avatar[data-hue="174"]{--h:174}.avatar[data-hue="175"]{--h:175}.avatar[data-hue="176"]{--h:176}.avatar[data-hue="177"]{--h:177}.avatar[data-hue="178"]{--h:178}.avatar[data-hue="179"]{--h:179}
.avatar[data-hue="180"]{--h:180}.avatar[data-hue="181"]{--h:181}.avatar[data-hue="182"]{--h:182}.avatar[data-hue="183"]{--h:183}.avatar[data-hue="184"]{--h:184}.avatar[data-hue="185"]{--h:185}.avatar[data-hue="186"]{--h:186}.avatar[data-hue="187"]{--h:187}.avatar[data-hue="188"]{--h:188}.avatar[data-hue="189"]{--h:189}
.avatar[data-hue="190"]{--h:190}.avatar[data-hue="191"]{--h:191}.avatar[data-hue="192"]{--h:192}.avatar[data-hue="193"]{--h:193}.avatar[data-hue="194"]{--h:194}.avatar[data-hue="195"]{--h:195}.avatar[data-hue="196"]{--h:196}.avatar[data-hue="197"]{--h:197}.avatar[data-hue="198"]{--h:198}.avatar[data-hue="199"]{--h:199}
.avatar[data-hue="200"]{--h:200}.avatar[data-hue="201"]{--h:201}.avatar[data-hue="202"]{--h:202}.avatar[data-hue="203"]{--h:203}.avatar[data-hue="204"]{--h:204}.avatar[data-hue="205"]{--h:205}.avatar[data-hue="206"]{--h:206}.avatar[data-hue="207"]{--h:207}.avatar[data-hue="208"]{--h:208}.avatar[data-hue="209"]{--h:209}
.avatar[data-hue="210"]{--h:210}.avatar[data-hue="211"]{--h:211}.avatar[data-hue="212"]{--h:212}.avatar[data-hue="213"]{--h:213}.avatar[data-hue="214"]{--h:214}.avatar[data-hue="215"]{--h:215}.avatar[data-hue="216"]{--h:216}.avatar[data-hue="217"]{--h:217}.avatar[data-hue="218"]{--h:218}.avatar[data-hue="219"]{--h:219}
.avatar[data-hue="220"]{--h:220}.avatar[data-hue="221"]{--h:221}.avatar[data-hue="222"]{--h:222}.avatar[data-hue="223"]{--h:223}.avatar[data-hue="224"]{--h:224}.avatar[data-hue="225"]{--h:225}.avatar[data-hue="226"]{--h:226}.avatar[data-hue="227"]{--h:227}.avatar[data-hue="228"]{--h:228}.avatar[data-hue="229"]{--h:229}
.avatar[data-hue="230"]{--h:230}.avatar[data-hue="231"]{--h:231}.avatar[data-hue="232"]{--h:232}.avatar[data-hue="233"]{--h:233}.avatar[data-hue="234"]{--h:234}.avatar[data-hue="235"]{--h:235}.avatar[data-hue="236"]{--h:236}.avatar[data-hue="237"]{--h:237}.avatar[data-hue="238"]{--h:238}.avatar[data-hue="239"]{--h:239}
.avatar[data-hue="240"]{--h:240}.avatar[data-hue="241"]{--h:241}.avatar[data-hue="242"]{--h:242}.avatar[data-hue="243"]{--h:243}.avatar[data-hue="244"]{--h:244}.avatar[data-hue="245"]{--h:245}.avatar[data-hue="246"]{--h:246}.avatar[data-hue="247"]{--h:247}.avatar[data-hue="248"]{--h:248}.avatar[data-hue="249"]{--h:249}
.avatar[data-hue="250"]{--h:250}.avatar[data-hue="251"]{--h:251}.avatar[data-hue="252"]{--h:252}.avatar[data-hue="253"]{--h:253}.avatar[data-hue="254"]{--h:254}.avatar[data-hue="255"]{--h:255}.avatar[data-hue="256"]{--h:256}.avatar[data-hue="257"]{--h:257}.avatar[data-hue="258"]{--h:258}.avatar[data-hue="259"]{--h:259}
.avatar[data-hue="260"]{--h:260}.avatar[data-hue="261"]{--h:261}.avatar[data-hue="262"]{--h:262}.avatar[data-hue="263"]{--h:263}.avatar[data-hue="264"]{--h:264}.avatar[data-hue="265"]{--h:265}.avatar[data-hue="266"]{--h:266}.avatar[data-hue="267"]{--h:267}.avatar[data-hue="268"]{--h:268}.avatar[data-hue="269"]{--h:269}
.avatar[data-hue="270"]{--h:270}.avatar[data-hue="271"]{--h:271}.avatar[data-hue="272"]{--h:272}.avatar[data-hue="273"]{--h:273}.avatar[data-hue="274"]{--h:274}.avatar[data-hue="275"]{--h:275}.avatar[data-hue="276"]{--h:276}.avatar[data-hue="277"]{--h:277}.avatar[data-hue="278"]{--h:278}.avatar[data-hue="279"]{--h:279}
.avatar[data-hue="280"]{--h:280}.avatar[data-hue="281"]{--h:281}.avatar[data-hue="282"]{--h:282}.avatar[data-hue="283"]{--h:283}.avatar[data-hue="284"]{--h:284}.avatar[data-hue="285"]{--h:285}.avatar[data-hue="286"]{--h:286}.avatar[data-hue="287"]{--h:287}.avatar[data-hue="288"]{--h:288}.avatar[data-hue="289"]{--h:289}
.avatar[data-hue="290"]{--h:290}.avatar[data-hue="291"]{--h:291}.avatar[data-hue="292"]{--h:292}.avatar[data-hue="293"]{--h:293}.avatar[data-hue="294"]{--h:294}.avatar[data-hue="295"]{--h:295}.avatar[data-hue="296"]{--h:296}.avatar[data-hue="297"]{--h:297}.avatar[data-hue="298"]{--h:298}.avatar[data-hue="299"]{--h:299}
.avatar[data-hue="300"]{--h:300}.avatar[data-hue="301"]{--h:301}.avatar[data-hue="302"]{--h:302}.avatar[data-hue="303"]{--h:303}.avatar[data-hue="304"]{--h:304}.avatar[data-hue="305"]{--h:305}.avatar[data-hue="306"]{--h:306}.avatar[data-hue="307"]{--h:307}.avatar[data-hue="308"]{--h:308}.avatar[data-hue="309"]{--h:309}
.avatar[data-hue="310"]{--h:310}.avatar[data-hue="311"]{--h:311}.avatar[data-hue="312"]{--h:312}.avatar[data-hue="313"]{--h:313}.avatar[data-hue="314"]{--h:314}.avatar[data-hue="315"]{--h:315}.avatar[data-hue="316"]{--h:316}.avatar[data-hue="317"]{--h:317}.avatar[data-hue="318"]{--h:318}.avatar[data-hue="319"]{--h:319}
.avatar[data-hue="320"]{--h:320}.avatar[data-hue="321"]{--h:321}.avatar[data-hue="322"]{--h:322}.avatar[data-hue="323"]{--h:323}.avatar[data-hue="324"]{--h:324}.avatar[data-hue="325"]{--h:325}.avatar[data-hue="326"]{--h:326}.avatar[data-hue="327"]{--h:327}.avatar[data-hue="328"]{--h:328}.avatar[data-hue="329"]{--h:329}
.avatar[data-hue="330"]{--h:330}.avatar[data-hue="331"]{--h:331}.avatar[data-hue="332"]{--h:332}.avatar[data-hue="333"]{--h:333}.avatar[data-hue="334"]{--h:334}.avatar[data-hue="335"]{--h:335}.avatar[data-hue="336"]{--h:336}.avatar[data-hue="337"]{--h:337}.avatar[data-hue="338"]{--h:338}.avatar[data-hue="339"]{--h:339}
.avatar[data-hue="340"]{--h:340}.avatar[data-hue="341"]{--h:341}.avatar[data-hue="342"]{--h:342}.avatar[data-hue="343"]{--h:343}.avatar[data-hue="344"]{--h:344}.avatar[data-hue="345"]{--h:345}.avatar[data-hue="346"]{--h:346}.avatar[data-hue="347"]{--h:347}.avatar[data-hue="348"]{--h:348}.avatar[data-hue="349"]{--h:349}
.avatar[data-hue="350"]{--h:350}.avatar[data-hue="351"]{--h:351}.avatar[data-hue="352"]{--h:352}.avatar[data-hue="353"]{--h:353}.avatar[data-hue="354"]{--h:354}.avatar[data-hue="355"]{--h:355}.avatar[data-hue="356"]{--h:356}.avatar[data-hue="357"]{--h:357}.avatar[data-hue="358"]{--h:358}.avatar[data-hue="359"]{--h:359}

/* ── Buttons ──────────────────────────────────────────────────────────── */
button, .btn {
  font-family: var(--body); font-size: var(--fs-md); font-weight: 600; letter-spacing: .005em;
  border: 1px solid var(--a-700); border-radius: 8px;
  background: var(--a-700); color: #fff; padding: 7px 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
button:hover, .btn:hover {
  background: var(--a-800); border-color: var(--a-800);
  text-decoration: none; box-shadow: var(--shadow-sm);
}
button:active, .btn:active { background: var(--a-900); box-shadow: none; }
button.secondary, .btn.secondary, a.btn.secondary {
  background: var(--surface); color: var(--n-700); border-color: var(--border-strong);
}
button.secondary:hover, .btn.secondary:hover, a.btn.secondary:hover {
  background: var(--n-50); color: var(--text); border-color: var(--n-400); box-shadow: none;
}
button.danger, .btn.danger {
  background: var(--surface); border-color: var(--danger-200); color: var(--danger-700);
}
button.danger:hover, .btn.danger:hover { background: var(--danger-50); border-color: var(--danger-600); box-shadow: none; }
button.small, .btn.small { padding: 4px 10px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
button:disabled, .btn:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
button:disabled:hover { background: var(--a-700); border-color: var(--a-700); }
button.secondary:disabled:hover { background: var(--surface); border-color: var(--border-strong); }

/* ── Forms ────────────────────────────────────────────────────────────── */
input, select, textarea {
  font: 400 var(--fs-md)/1.5 var(--body);
  padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--text); width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--n-400); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--n-400); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--a-600); box-shadow: var(--ring); background: var(--surface);
}
input:disabled, select:disabled, textarea:disabled { background: var(--n-50); color: var(--n-500); cursor: not-allowed; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--a-600); }
select { appearance: none; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--n-500) 50%), linear-gradient(135deg, var(--n-500) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
textarea { min-height: 76px; resize: vertical; }
label {
  display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--n-600);
  margin-bottom: 5px; letter-spacing: .01em;
}
.field { margin-bottom: 12px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
form.inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
form.inline .field { margin-bottom: 0; flex: 1; min-width: 130px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
legend { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--n-500); padding: 0 4px; }

/* ── Sign-in ──────────────────────────────────────────────────────────── */
.login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh; width: 100%; padding: 20px;
  background:
    radial-gradient(1200px 620px at 88% -14%, var(--a-100), transparent 62%),
    radial-gradient(900px 560px at -8% 108%, var(--n-100), transparent 58%),
    var(--bg);
}
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 38px 38px 34px; width: min(408px, 100%);
  box-shadow: var(--shadow-lg);
}
.login-card h1 { font-size: var(--fs-3xl); letter-spacing: -.03em; }
.login-card h1 em { font-style: normal; color: var(--a-600); }
.login-card .sub {
  color: var(--muted); font-size: var(--fs-sm); margin-bottom: 26px;
  letter-spacing: .01em;
}
.login-card .field label { font-size: var(--fs-sm); color: var(--n-700); }
.login-card input { padding: 9px 12px; font-size: var(--fs-base); }
.login-card button[type=submit], .login-card form > button { margin-top: 4px; min-height: 40px; }
.login-foot {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--n-100);
  font-size: var(--fs-xs); color: var(--n-400); letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}

/* ── Board (kanban) ───────────────────────────────────────────────────── */
.board {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 2px 2px 12px; margin-bottom: 8px;
}
.board-col {
  flex: 0 0 300px; width: 300px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 10px 12px;
  max-height: min(74vh, 780px);
}
.board-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 4px 9px; margin-bottom: 1px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2xs); font-weight: 700; color: var(--n-600);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
}
.board-col-head .count {
  margin-left: auto; font-variant-numeric: tabular-nums;
  background: var(--n-100); color: var(--n-600); border-radius: 20px;
  padding: 1px 7px; font-size: var(--fs-2xs); letter-spacing: .02em;
}
.board-col-body { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 40px; padding: 1px; }
.board-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
  box-shadow: var(--shadow-xs); cursor: grab;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.board-card:hover { border-color: var(--n-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: .55; box-shadow: var(--shadow-md); transform: rotate(1.2deg); }
.board-card .board-card-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; margin-bottom: 7px; }
.board-card .board-card-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums;
}
.board-col.drop-target { border-color: var(--a-300); background: var(--a-50); }

/* ── Right slide-over panel ───────────────────────────────────────────── */
.panel-right {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(var(--panel-w), 100vw);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(101%);
  transition: transform .26s var(--ease), visibility .26s;
  visibility: hidden;
  overflow: hidden;
}
.panel-right.open { transform: translateX(0); visibility: visible; }
.panel-right-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.panel-right-head h2 { margin: 0; font-size: var(--fs-lg); font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
.panel-right-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 18px calc(24px + env(safe-area-inset-bottom));
}
.panel-right-foot {
  border-top: 1px solid var(--border); padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; flex-shrink: 0; background: var(--surface-2);
}
.panel-backdrop {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(29, 10, 24, .28);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.panel-backdrop.open { opacity: 1; visibility: visible; }

/* ── Screening aids ───────────────────────────────────────────────────── */
mark {
  background: var(--a-100); color: var(--a-900); border-radius: 3px;
  padding: 0 3px; box-shadow: inset 0 -1px 0 var(--a-200); font-weight: 500;
}
kbd {
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 500;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 5px; margin-left: 5px; background: var(--surface); color: var(--n-600);
  white-space: nowrap; vertical-align: baseline;
}
pre, code { font-family: var(--mono); font-size: var(--fs-sm); }

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  background: var(--a-950); color: #F6EEF3;
  padding: 11px 16px; border-radius: var(--radius);
  font-size: var(--fs-md); font-weight: 500;
  box-shadow: var(--shadow-lg); max-width: 440px;
  border-left: 3px solid var(--a-400);
}
.toast.error { background: var(--danger-700); color: #fff; border-left-color: var(--danger-200); }

/* ── Utilities ────────────────────────────────────────────────────────── */
.muted { color: var(--muted); font-size: var(--fs-sm); }
.small { font-size: var(--fs-sm); }
.right { text-align: right; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.mt { margin-top: 14px; }
.mb0 { margin-bottom: 0; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.empty {
  text-align: center; color: var(--n-500); padding: 28px 12px; font-size: var(--fs-md);
  border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2);
}
.label {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--n-500);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
}
.clickable { cursor: pointer; }

/* ── Mobile chrome: drawer + bottom tab bar ───────────────────────────── */
.tabbar, .drawer-backdrop { display: none; }

@media (max-width: 880px) {
  #app { display: block; }

  .topbar { padding: 0 12px; gap: 10px; }
  .topbar .menu {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--n-50); border: 1px solid var(--border); color: var(--n-700);
    font-size: 17px; line-height: 1; padding: 0; width: 36px; height: 36px; min-height: 36px;
    border-radius: 9px; flex-shrink: 0;
  }
  .topbar .menu:hover { background: var(--n-100); box-shadow: none; }
  .tenant { display: none; }
  .topsearch { display: none; }
  .topbar .whoami { margin-left: auto; }
  .topbar .whoami-txt, .topbar .whoami button { display: none; }

  /* The rail becomes a slide-in drawer carrying the full nav and the account. */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh;
    width: min(292px, 84vw); z-index: 60;
    border-right: 1px solid var(--border);
    box-shadow: 16px 0 44px rgba(29, 10, 24, .16);
    transform: translateX(-105%);
    transition: transform .24s var(--ease);
  }
  .drawer-open .sidebar { transform: translateX(0); }
  .sidebar nav {
    position: static; flex: 1; min-height: 0; max-height: none;
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  .sidebar-foot { display: flex; align-items: center; gap: 9px; }
  .sidebar-foot button { margin-left: auto; }
  .drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(29, 10, 24, .34);
    opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(36, 30, 35, .07);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; background: none; border: none; color: var(--n-500); cursor: pointer;
    font-family: var(--body); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .01em;
    padding: 5px 2px; border-radius: 9px; min-height: 50px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tabbar .ticon { font-size: 18px; line-height: 1.1; }
  .tabbar a.active { color: var(--a-700); background: var(--a-50); }
  .tabbar a:hover { text-decoration: none; background: var(--n-50); }
  .tabbar button:hover { background: var(--n-50); box-shadow: none; color: var(--n-600); }

  .main { padding: 16px 13px calc(84px + env(safe-area-inset-bottom)); max-width: none; }
  .page-head { margin-bottom: 14px; }
  h1 { font-size: var(--fs-xl); }
  .card { padding: 14px 14px; border-radius: var(--radius); }
  .grid { gap: 11px; }
  .grid.stats { gap: 9px; grid-template-columns: repeat(auto-fit, minmax(min(146px, 100%), 1fr)); }
  .stat .value { font-size: 22px; }
  td, th { padding: 9px 8px; }
  .table-wrap { max-height: none; }

  /* Touch comfort: 16px inputs stop iOS zoom-on-focus. */
  input, select, textarea { font-size: 16px; padding: 9px 12px; }
  button, .btn { min-height: 42px; padding: 9px 15px; }
  button.small, .btn.small { min-height: 34px; padding: 6px 11px; font-size: var(--fs-sm); }

  .toast { left: 12px; right: 12px; max-width: none; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .login-card { padding: 28px 22px 24px; border-radius: 16px; }
  .login-card h1 { font-size: var(--fs-2xl); }
  .panel-right { width: 100vw; }
  .board-col { flex-basis: 82vw; width: 82vw; }
}

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

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .tabbar, .drawer-backdrop, .panel-right, .panel-backdrop,
  .page-head button, .page-head .btn, .no-print { display: none !important; }
  #app { display: block; }
  .main { padding: 0; max-width: none; }
  body { background: #fff; }
  .card, .stat { box-shadow: none; }
  .table-wrap { max-height: none; overflow: visible; }
}