/* ============================================================================
   MAS Core — UI Modernization mock-up stylesheet
   Standalone. Not loaded by the app.
   Palette stops follow production (§9.3): the interactive brand is the service's
   production `--primary` / `--primary-dark` pair. There is no second identity
   accent token — the retired ambulance red (#D52B1E) is gone.
   Dark is the default token set; light is a parallel token set (no overrides).
   ========================================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
::selection { background: var(--brand-soft); }

/* ---------- tokens: dark (default) ---------- */
:root {
  /* interactive brand — unchanged */
  --brand:        #5865F2;
  --brand-strong: #6B76F5;
  --brand-deep:   #4752C4;
  --brand-soft:   rgba(88, 101, 242, .16);
  /* Text ink. The fill stays #5865F2; this lighter stop is what stays readable on the dark cards. */
  --brand-text:   #C5CBFF;
  --accent-2:     #57F287;
  --accent-2-soft: rgba(87, 242, 135, .14);

  /* Identity accent: retired. §9.3 (ratified 2026-09-12) says palette stops come from
     production — its `--primary` / `--primary-dark` pair — and that no light-mode-only colour
     may be promoted into the dark set. The old `--brand-2` / `#D52B1E` ambulance red did both.
     Identity is carried by the brand hue and the logo, so there is no second accent token. */

  /* semantic */
  --ok:   #3BA55D;
  --warn: #F0B232;
  --bad:  #ED4245;
  --info: #9ED4FF;
  --ok-soft:   rgba(59, 165, 93, .15);
  --warn-soft: rgba(240, 178, 50, .15);
  --bad-soft:  rgba(237, 66, 69, .15);
  --info-soft: rgba(74, 158, 218, .15);

  /* surfaces — one ramp shared with FRS. Brand hue stays on --brand. */
  --bg-app:       #1E1F22;
  --bg-surface:   #2B2D31;
  --bg-surface-2: #2B2D31;
  --bg-elevated:  #2B2D31;
  --bg-hover:     #35373C;
  --bg-active:    #3B3D44;
  --bg-glass:     rgba(30, 31, 34, .78);
  --line:         rgba(255, 255, 255, .06);
  --line-strong:  #404249;

  /* text */
  --text:   #F2F3F5;
  --text-2: #B9BBBE;
  --text-3: #94979E;

  /* geometry */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* elevation — shared with FRS */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-2: 0 10px 28px rgba(0, 0, 0, .28);
  --sh-3: 0 18px 48px rgba(0, 0, 0, .42);
  --ring: 0 0 0 3px var(--brand-soft);

  /* motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --d1: 120ms; --d2: 200ms; --d3: 320ms;

  /* chrome */
  --rail-w: 264px;
  --rail-w-collapsed: 76px;
  --topbar-h: 64px;
  --rail-bg: #1E1F22;
  --field-bg: rgba(255,255,255,.04);
}

/* ---------- tokens: light (parallel set) ---------- */
html[data-theme="light"] {
  --brand:        #4752C4;
  --brand-strong: #5865F2;
  --brand-deep:   #3B45A8;
  --brand-soft:   rgba(71, 82, 196, .12);
  --brand-text:   #4752C4;
  --accent-2:     #1F8A44;

  --ok: #1F8A44; --warn: #A9761A; --bad: #C7373A; --info: #2A6EA8;
  --ok-soft: rgba(31,138,68,.12); --warn-soft: rgba(169,118,26,.14);
  --bad-soft: rgba(199,55,58,.12); --info-soft: rgba(42,110,168,.12);

  --bg-app:       #F5F6F8;
  --bg-surface:   #FFFFFF;
  --bg-surface-2: #EEF0F5;
  --bg-elevated:  #FFFFFF;
  --bg-hover:     #E4E7EE;
  --bg-active:    #DCE0E9;
  --bg-glass:     rgba(255,255,255,.82);
  --line:         rgba(16, 18, 22, .09);
  --line-strong:  rgba(16, 18, 22, .17);

  --text:   #14171D;
  --text-2: #4B5563;
  --text-3: #6B7280;

  --sh-1: 0 1px 2px rgba(16,18,22,.08);
  --sh-2: 0 10px 30px rgba(16,18,22,.10);
  --sh-3: 0 28px 80px rgba(16,18,22,.18);

  --rail-bg: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
  --field-bg: rgba(16,18,22,.03);
}

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; transition: grid-template-columns var(--d2) var(--ease); }
.app.rail-collapsed { grid-template-columns: var(--rail-w-collapsed) 1fr; }

/* ---------- rail ---------- */
.rail {
  position: sticky; top: 0; height: 100vh;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 40;
}
.rail-head { height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
/* Brand lockup. Replaces the former 34x34 gradient "MA" tile + .rail-brand text pair, so the rail
   header carries the service's real logo. /logo.png is a wide lockup (680x261), so it is
   height-constrained and free to take its natural width; it is never cropped to a square. 30px
   leaves room inside the 64px rail head and keeps the rail head from reflowing when the image lands. */
.rail-brand { min-width: 0; display: flex; align-items: center; }
.rail-brand-logo { display: block; height: 30px; width: auto; max-width: 100%; object-fit: contain; }
/* The rail lockup is left EXACTLY as authored, in both themes. The light theme must not darken it
   (`filter: brightness(...)`) and must not mount it on a near-black plate: the lockup is not
   white-on-transparent — it carries its own dark ink — so it reads on the near-white light rail
   unaided, and dimming it only makes the mark look washed out. A backing box would also read as a
   dark rectangle in the rail head (it forced the collapsed rail to carry extra padding just to fit
   the plate). */
.rail-collapse { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; color: var(--text-3); display: grid; place-items: center; }
.rail-collapse:hover { background: var(--bg-hover); color: var(--text); }

.rail-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.rail-domains { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-4); }
.rail-domains::after { content: ""; height: 1px; background: var(--line); margin: var(--sp-3) 4px 0; }
.dom {
  display: flex; align-items: center; gap: var(--sp-3); padding: 9px 10px; border-radius: var(--r-md);
  color: var(--text-2); font-weight: 500; position: relative; width: 100%; text-align: left;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
}
.dom:hover { background: var(--bg-hover); color: var(--text); }
.dom.on { background: var(--brand-soft); color: var(--text); }
.dom.on::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand); }
.dom-ico { width: 20px; display: grid; place-items: center; opacity: .95; flex: 0 0 auto; }
.dom-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dom-badge { font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--brand); color: #fff; }
.dom-badge.quiet { background: var(--bg-active); color: var(--text-2); }

.nav-group { margin-bottom: var(--sp-3); }
.nav-group-title { font-size: 10.5px; letter-spacing: .10em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 6px 10px; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-md); color: var(--text-2); font-weight: 500; font-size: 13.5px;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.on { background: var(--bg-active); color: var(--text); font-weight: 600; }
.nav-item .ni-ico { width: 18px; display: grid; place-items: center; color: var(--text-3); flex: 0 0 auto; }
.nav-item.on .ni-ico { color: var(--brand-text); }
.nav-item .ni-pin { margin-left: auto; opacity: 0; color: var(--text-3); }
.nav-item:hover .ni-pin { opacity: 1; }
.nav-item .ni-pin.on { opacity: 1; color: var(--accent-2); }
.nav-count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill); background: var(--brand); color: #fff; }
.nav-count.soon { background: var(--bg-active); color: var(--text-2); }

.rail-foot { border-top: 1px solid var(--line); padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.rail-user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); margin-top: var(--sp-2); }
.rail-user:hover { background: var(--bg-hover); }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%); }
.rail-user .ru-t { min-width: 0; }
.rail-user .ru-t b { display: block; font-size: 13px; }
.rail-user .ru-t small { color: var(--text-3); font-size: 11.5px; }

.app.rail-collapsed .dom-label,
.app.rail-collapsed .dom-badge,
.app.rail-collapsed .nav-group-title,
.app.rail-collapsed .ni-label,
.app.rail-collapsed .ni-pin,
.app.rail-collapsed .nav-count,
.app.rail-collapsed .rail-user .ru-t { display: none; }
/* The brand lockup stays visible when collapsed (it used to be the letter tile that survived, while
   only the text was hidden), but the collapsed rail is 76px wide, so the wide lockup is scaled down
   rather than allowed to collide with the rail edges. */
.app.rail-collapsed .rail-brand-logo { height: 22px; }
/* README §9.5: the collapse control STAYS VISIBLE while collapsed — it is the only way back, so
   `.rail-collapse { display: none }` here was the defect, not the design. At 76px a 57px-wide
   lockup and a 30px button cannot share a row, so the collapsed head stacks them and centres the
   pair; the button also loses `margin-left: auto` so `justify-content: center` actually centres it. */
.app.rail-collapsed .rail-head { flex-direction: column; justify-content: center; gap: 2px; padding: 0; }
.app.rail-collapsed .rail-collapse { margin-left: 0; }
.app.rail-collapsed .dom,
.app.rail-collapsed .nav-item { justify-content: center; padding: 9px 0; }
.app.rail-collapsed .dom.on::before { display: none; }
.app.rail-collapsed .rail-scroll { padding-inline: var(--sp-2); }
.app.rail-collapsed .nav-group { margin-bottom: var(--sp-2); }

/* ---------- main + topbar ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5);
  background: var(--bg-glass); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: 13px; min-width: 0; }
.crumbs b { color: var(--text); font-weight: 600; }
.topbar-spacer { flex: 1 1 auto; }
.searchbtn {
  display: flex; align-items: center; gap: var(--sp-3); height: 38px; padding: 0 12px; min-width: 260px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--field-bg);
  color: var(--text-3); font-size: 13px; transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease);
}
.searchbtn:hover { border-color: var(--brand); color: var(--text-2); }
.kbd { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg-surface-2); color: var(--text-2); }
.searchbtn .kbd { margin-left: auto; }
.iconbtn { width: 38px; height: 38px; border-radius: var(--r-md); position: relative; display: grid; place-items: center; color: var(--text-2); border: 1px solid transparent; }
.iconbtn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--line); }
.iconbtn .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--bg-app); }
.topbar-user { display: flex; align-items: center; gap: var(--sp-3); padding-left: var(--sp-2); border-left: 1px solid var(--line); }

.content { padding: var(--sp-6) var(--sp-5) var(--sp-7); max-width: 1400px; width: 100%; }
.view { display: none; animation: fade var(--d3) var(--ease); }
.view.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head h1 { font-size: 26px; }
.page-head p { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }
.page-head .ph-actions { margin-left: auto; display: flex; gap: var(--sp-2); }

.section-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-3); }
.section-head:first-child { margin-top: 0; }
.section-head h2 { font-size: 15px; letter-spacing: .01em; }
.section-head .sh-sub { color: var(--text-3); font-size: 12.5px; }
.section-head .sh-actions { margin-left: auto; display: flex; gap: var(--sp-2); }

/* ---------- buttons ---------- */
.btn {
  --_bg: var(--bg-elevated); --_fg: var(--text); --_bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 15px; border-radius: var(--r-md);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  font-weight: 600; font-size: 13.5px; white-space: nowrap;
  transition: transform var(--d1) var(--ease), background var(--d1) var(--ease), border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease);
}
.btn:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn.lg { height: 46px; padding: 0 20px; font-size: 14.5px; border-radius: var(--r-lg); }
.btn.primary { --_bg: var(--brand); --_bd: transparent; --_fg: #fff; box-shadow: none; }
.btn.primary:hover { --_bg: var(--brand-strong); }
.btn.ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--text-2); }
.btn.ghost:hover { --_bg: var(--bg-hover); --_fg: var(--text); }
.btn.danger { --_bg: var(--bad-soft); --_bd: rgba(237,66,69,.35); --_fg: #FF8A8C; }
.btn.danger:hover { --_bg: rgba(237,66,69,.24); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- cards ---------- */
.card { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.card.elevated { background: var(--bg-elevated); box-shadow: var(--sh-2); }
.card.accent { border-left: 3px solid var(--brand); }
.card.interactive { transition: transform var(--d2) var(--ease), border-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
.card.interactive:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--sh-2); }
.card-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) 0; }
.card-head h3 { font-size: 14px; }
.card-head .ch-sub { color: var(--text-3); font-size: 12px; }
.card-head .ch-actions { margin-left: auto; display: flex; gap: 6px; }
.card-body { padding: var(--sp-4); }
.card-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- grid ---------- */
.grid { display: grid; gap: var(--sp-4); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.g-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--brand-soft) 0%, transparent 52%),
    linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  box-shadow: var(--sh-2);
  padding: var(--sp-5);
}
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; background-image: var(--hero-motif); background-position: right -40px bottom -30px; background-repeat: no-repeat; background-size: 460px auto; }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: 25px; }
.hero .hero-sub { color: var(--text-2); margin-top: 4px; font-size: 13.5px; }
.hero .hero-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }

:root {
  /* ECG / ambulance cross motif — production primary + its lighter interactive stop */
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='200' viewBox='0 0 460 200' fill='none'%3E%3Cg stroke='%235865F2' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 104 H60 L74 104 L86 68 L100 140 L112 92 L126 104 H190 L204 62 L218 142 L232 88 L246 104 H320 L334 70 L348 138 L362 92 L376 104 H460'/%3E%3C/g%3E%3Cg stroke='%235865F2' stroke-opacity='.16' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 150 H34 V132 H62 V150 H120 V124 H150 V150 H232 V130 H262 V150 H330 V126 H358 V150 H460'/%3E%3Cpath d='M0 56 H28 V44 H56 V56 H140 V40 H172 V56 H250 V46 H280 V56 H360 V42 H392 V56 H460'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="light"] {
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='200' viewBox='0 0 460 200' fill='none'%3E%3Cg stroke='%234752C4' stroke-opacity='.18' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 104 H60 L74 104 L86 68 L100 140 L112 92 L126 104 H190 L204 62 L218 142 L232 88 L246 104 H320 L334 70 L348 138 L362 92 L376 104 H460'/%3E%3C/g%3E%3Cg stroke='%234752C4' stroke-opacity='.13' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 150 H34 V132 H62 V150 H120 V124 H150 V150 H232 V130 H262 V150 H330 V126 H358 V150 H460'/%3E%3Cpath d='M0 56 H28 V44 H56 V56 H140 V40 H172 V56 H250 V46 H280 V56 H360 V42 H392 V56 H460'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- stat tiles ---------- */
.stat { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; transition: border-color var(--d2) var(--ease); }
.stat:hover { border-color: var(--line-strong); }
.stat .st-label { color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.stat .st-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .st-value small { font-size: 14px; color: var(--text-3); font-weight: 600; margin-left: 3px; }
.stat .st-foot { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: 12.5px; }
.stat .st-ico { margin-left: auto; color: var(--brand-text); opacity: .85; }
.trend { font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 3px; }
.trend.up { color: var(--ok); } .trend.down { color: var(--bad); }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 2px; }
.spark i { flex: 1 1 auto; background: var(--bg-active); border-radius: 3px 3px 1px 1px; min-height: 3px; }
.spark i.hot { background: linear-gradient(180deg, var(--brand-strong), var(--brand)); }
.spark i.clin { background: linear-gradient(180deg, var(--accent-2), var(--ok)); }

.bar { height: 7px; border-radius: var(--r-pill); background: var(--bg-active); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--accent-2)); }

/* ---------- action queue ---------- */
.queue { display: flex; flex-direction: column; }
.queue-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); transition: background var(--d1) var(--ease); }
.queue-row:last-child { border-bottom: 0; }
.queue-row:hover { background: var(--bg-hover); }
.queue-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--brand-soft); color: var(--brand-text); }
.queue-ico.ok { background: var(--ok-soft); color: var(--ok); }
.queue-ico.warn { background: var(--warn-soft); color: var(--warn); }
.queue-ico.info { background: var(--info-soft); color: var(--info); }
/* `.queue-ico.brand2` was the retired ambulance-red accent. It has no consumer and no token,
   so §9.3's palette rule leaves it gone rather than repainting it as a second brand hue. */
.queue-t { min-width: 0; flex: 1 1 auto; }
.queue-t b { display: block; font-size: 13.5px; font-weight: 600; }
.queue-t small { color: var(--text-3); font-size: 12.5px; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--bg-active); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.brand { background: var(--brand-soft); color: var(--brand-text); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.clin { background: var(--ok-soft); color: var(--ok); }
.chip.outline { background: transparent; border: 1px solid var(--line-strong); }

/* ---------- tables ---------- */
.table-wrap { overflow: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 11px var(--sp-4); background: var(--bg-surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl tbody td { padding: 11px var(--sp-4); border-bottom: 1px solid var(--line); color: var(--text-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--d1) var(--ease); }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr.me { background: var(--brand-soft); }
.tbl td b, .tbl td strong { color: var(--text); font-weight: 600; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .row-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0; transition: opacity var(--d1) var(--ease); }
.tbl tr:hover .row-actions { opacity: 1; }
.tbl.dense tbody td { padding: 7px var(--sp-4); }

.who { display: flex; align-items: center; gap: 10px; }
.who .avatar { width: 30px; height: 30px; font-size: 11.5px; }
.who .w-t b { display: block; color: var(--text); font-weight: 600; font-size: 13.5px; }
.who .w-t small { color: var(--text-3); font-size: 11.5px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); }
.tab { padding: 10px 14px; color: var(--text-3); font-weight: 600; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--d1) var(--ease), border-color var(--d1) var(--ease); }
.tab:hover { color: var(--text-2); }
.tab.on { color: var(--text); border-bottom-color: var(--brand); }
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--bg-surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.seg button { padding: 6px 12px; border-radius: 9px; color: var(--text-3); font-weight: 600; font-size: 12.5px; }
.seg button.on { background: var(--bg-elevated); color: var(--text); box-shadow: var(--sh-1); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.input, .select, .textarea { width: 100%; background: var(--field-bg); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 10px 12px; color: var(--text); transition: border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease); }
.select option, select option {
  background-color: var(--bg-surface-2);
  color: var(--text);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }

/* Custom Checkbox and Select Styling */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--bg-surface-2);
  margin: 0;
  font: inherit;
  color: var(--brand-text);
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  transform: translateY(-0.075em);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background-color var(--d1) var(--ease), border-color var(--d1) var(--ease);
}
input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--brand);
  background-color: CanvasText;
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked {
  background-color: var(--brand-soft);
  border-color: var(--brand);
}
input[type="checkbox"]:checked::before {
  transform: scale(1);
}
input[type="checkbox"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a929b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px !important;
  cursor: pointer;
}
select::-ms-expand {
  display: none;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.textarea { min-height: 96px; resize: vertical; }
.hint { font-size: 12px; color: var(--text-3); }
.switch { width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--bg-active); position: relative; border: 1px solid var(--line-strong); flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: all var(--d2) var(--ease); }
.switch.on { background: var(--brand); border-color: transparent; }
.switch.on::after { left: 20px; background: #fff; }
.row-between { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; }

/* ---------- modal / drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(6,7,10,.62); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: var(--sp-5); }
.scrim.on { display: flex; animation: fade var(--d2) var(--ease); }
.modal { width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; background: var(--bg-elevated); border: 1px solid var(--line-strong); border-radius: var(--r-xl); box-shadow: var(--sh-3); animation: pop var(--d2) var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 15.5px; }
.modal-head .mh-sub { color: var(--text-3); font-size: 12.5px; }
.modal-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.modal-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); justify-content: flex-end; }
.x { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
.x:hover { background: var(--bg-hover); color: var(--text); }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); z-index: 95; background: var(--bg-surface); border-left: 1px solid var(--line-strong); box-shadow: var(--sh-3); transform: translateX(102%); transition: transform var(--d3) var(--ease); display: flex; flex-direction: column; }
.drawer.on { transform: none; }
.drawer-head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-3); }
.drawer-body { padding: var(--sp-5); overflow: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.drawer-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); }

/* ---------- command palette ---------- */
.palette { position: fixed; inset: 0; z-index: 120; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; background: rgba(6,7,10,.6); backdrop-filter: blur(4px); }
.palette.on { display: flex; animation: fade var(--d2) var(--ease); }
.palette-box { width: min(640px, 92vw); background: var(--bg-elevated); border: 1px solid var(--line-strong); border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden; animation: pop var(--d2) var(--ease); }
.palette-input { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.palette-input input { flex: 1 1 auto; background: none; border: 0; outline: none; font-size: 15px; }
.palette-list { max-height: 52vh; overflow: auto; padding: var(--sp-2); }
.palette-group { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 10px 12px 4px; }
.palette-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-md); color: var(--text-2); }
.palette-item:hover, .palette-item.sel { background: var(--bg-hover); color: var(--text); }
.palette-item .pi-ico { color: var(--text-3); }
.palette-item .pi-tag { margin-left: auto; }

/* ---------- empty / loading / toast ---------- */
.empty { padding: var(--sp-7) var(--sp-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.empty .e-ico { width: 54px; height: 54px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--bg-surface-2); color: var(--text-3); border: 1px solid var(--line); }
.empty h3 { font-size: 15px; }
.empty p { color: var(--text-3); font-size: 13px; max-width: 380px; }

.skel { background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-hover) 37%, var(--bg-surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel.line { height: 12px; } .skel.line.w60 { width: 60%; } .skel.line.w40 { width: 40%; }
.skel.block { height: 72px; }

.toasts { position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 140; display: flex; flex-direction: column; gap: var(--sp-2); }
.toast { display: flex; align-items: center; gap: var(--sp-3); min-width: 280px; padding: var(--sp-3) var(--sp-4); background: var(--bg-elevated); border: 1px solid var(--line-strong); border-left: 3px solid var(--brand); border-radius: var(--r-md); box-shadow: var(--sh-2); animation: toastin var(--d2) var(--ease); }
.toast.ok { border-left-color: var(--ok); }
@keyframes toastin { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------- misc ---------- */
.divider { height: 1px; background: var(--line); margin: var(--sp-4) 0; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.hstack { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.muted { color: var(--text-3); }
.small { font-size: 12.5px; }
.mono { font-variant-numeric: tabular-nums; }
.mobile-only { display: none; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic.lg { width: 22px; height: 22px; }
.ic.xl { width: 26px; height: 26px; }
.plan-note { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--sp-4); color: var(--text-3); font-size: 12.5px; background: var(--field-bg); }
.plan-note b { color: var(--text-2); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-hero, .g-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; left: 0; top: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform var(--d3) var(--ease); box-shadow: var(--sh-3); }
  .app.navopen .rail { transform: none; }
  .app.rail-collapsed { grid-template-columns: 1fr; }
  .mobile-only { display: grid; }
  .content { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .searchbtn { min-width: 0; }
  .searchbtn .sb-label { display: none; }
  .topbar { padding: 0 var(--sp-4); gap: var(--sp-2); }
  .page-head h1 { font-size: 22px; }
  /* Field use is a phone in a glove: the rail's collapse/close control keeps a ≥44px target in the
     sheet, where the rest of the rail is a touch list (§9.5). */
  .rail-collapse { width: 44px; height: 44px; border-radius: var(--r-md); }
}

/* ---------- beta concept badge (this folder is a preview, not the live app) ---------- */
.beta-note {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 200; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--bg-elevated); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.beta-note b { color: var(--brand-text); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.beta-note:hover { border-color: var(--brand); color: var(--text); }
@media (max-width: 860px) {
  .beta-note { left: var(--sp-3); right: auto; bottom: var(--sp-3); transform: none; }
}