/* =============================================================================
   Rep Pipeline — components
   Colour rule for this file: brand hue appears as hairlines, rails, dots,
   meters and washes under 17% alpha. No large filled brand surfaces.
   ========================================================================== */

/* =============================================================================
   1. Shell
   ========================================================================== */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--dur-3) var(--ease);
}
.shell[data-rail="1"] { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }

/* --- Sidebar ------------------------------------------------------------- */
.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  z-index: 60;
}
/* the logo's sweep, reduced to a single vertical hairline down the shell seam */
.sidebar::after {
  content: ""; position: absolute; inset: 0 -1px 0 auto; width: 1px;
  background: linear-gradient(180deg, rgba(47,188,218,.55), rgba(58,107,178,.30) 34%, transparent 72%);
  pointer-events: none;
}

.brand {
  display: flex; align-items: center; gap: var(--s-5);
  height: var(--topbar-h); padding: 0 var(--s-6);
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.brand__mark { width: auto; height: 27px; flex: none; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  font: 600 0.875rem/1.15 var(--font-display); letter-spacing: -0.014em; color: var(--ink);
  white-space: nowrap;
}
.brand__sub {
  font: 500 0.6875rem/1.3 var(--font-sans); letter-spacing: 0.02em; color: var(--ink-faint);
  white-space: nowrap;
}

.nav { flex: 1 1 auto; overflow-y: auto; padding: var(--s-6) var(--s-5) var(--s-4); }
.nav__group + .nav__group { margin-top: var(--s-7); }
.nav__label {
  font: 600 0.6875rem/1.2 var(--font-sans);
  letter-spacing: var(--tr-overline); text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 var(--s-4) var(--s-4);
}
.nav__item {
  position: relative;
  display: flex; align-items: center; gap: var(--s-5);
  height: 36px; padding: 0 var(--s-4);
  border-radius: var(--r-2);
  color: var(--ink-2);
  font: var(--t-body); font-weight: 500; letter-spacing: var(--tr-body);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav__item + .nav__item { margin-top: 1px; }
.nav__item:hover { background: var(--neutral-wash); color: var(--ink); }
.nav__item .i { width: 17px; height: 17px; flex: none; color: var(--ink-faint); transition: color var(--dur-1) var(--ease); }
.nav__item:hover .i { color: var(--ink-2); }

/* Active state: a tinted plate plus a 3px rail cut from the logo gradient. */
.nav__item[aria-current="page"] {
  background: var(--accent-wash);
  color: var(--ink);
  font-weight: 600;
}
.nav__item[aria-current="page"] .i { color: var(--accent); }
.nav__item[aria-current="page"]::before {
  content: ""; position: absolute; left: -5px; top: 8px; bottom: 8px; width: 3px;
  border-radius: var(--r-full);
  background: var(--brand-sweep-v);
}
.nav__item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__item .ext { width: 12px; height: 12px; color: var(--ink-faint); opacity: .7; }

.nav__count {
  flex: none; min-width: 20px; height: 19px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  font: 600 0.6875rem/1 var(--font-sans); letter-spacing: 0;
  background: var(--accent-wash-2); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.nav__count[data-tone="warn"] { background: var(--warn-wash); color: var(--warn); border-color: var(--warn-line); }

/* --- Sidebar footer: the signed-in user --------------------------------- */
.sidebar__foot { flex: none; padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px solid var(--line-soft); }
.usercard {
  display: flex; align-items: center; gap: var(--s-5);
  width: 100%; padding: var(--s-4); border-radius: var(--r-3);
  transition: background var(--dur-1) var(--ease);
  text-align: left;
}
.usercard:hover { background: var(--neutral-wash); }
.avatar {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center;
  font: 600 0.6875rem/1 var(--font-sans); letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(150deg, var(--brand-azure), var(--brand-blue) 62%, var(--brand-jade-deep));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.avatar--sm { width: 24px; height: 24px; font-size: .625rem; }
.userinfo { min-width: 0; flex: 1 1 auto; }
.userinfo b { display: block; font: 600 0.8125rem/1.3 var(--font-sans); letter-spacing: -.006em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userinfo span { display: block; font: var(--t-caption-2); color: var(--ink-faint); text-transform: capitalize; }

/* --- Rail (collapsed) ---------------------------------------------------- */
.shell[data-rail="1"] .brand__text,
.shell[data-rail="1"] .nav__item__label,
.shell[data-rail="1"] .nav__label,
.shell[data-rail="1"] .userinfo,
.shell[data-rail="1"] .nav__item .ext { display: none; }
.shell[data-rail="1"] .brand { justify-content: center; padding: 0; }
.shell[data-rail="1"] .nav__item { justify-content: center; padding: 0; }
.shell[data-rail="1"] .nav__group + .nav__group { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
.shell[data-rail="1"] .nav__item + .nav__item { margin-top: var(--s-2); }
.shell[data-rail="1"] .nav__count {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
  font-size: .5625rem; font-weight: 700; letter-spacing: 0;
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 0 0 2px var(--surface);
}
.shell[data-rail="1"] .nav__count[data-tone="warn"] { background: var(--warn); color: var(--ink-inverse); }
.shell[data-rail="1"] .usercard { justify-content: center; }

/* =============================================================================
   2. Main column + top bar
   ========================================================================== */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: var(--s-5);
  flex-wrap: nowrap;
  padding: 0 var(--s-8);
  background: var(--overlay);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
/* the brand reads as a tint in the glass, not as a rule ruled under it */
.topbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(47,188,218,.055), transparent 72%);
}
.topbar > * { position: relative; }

.crumbs { display: flex; align-items: center; gap: var(--s-3); min-width: 0; overflow: hidden; font: var(--t-callout); }
.crumbs > * { flex: none; }
.crumbs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.crumbs a { color: var(--ink-faint); transition: color var(--dur-1) var(--ease); }
.crumbs a:hover { color: var(--ink-2); }
.crumbs .sep { color: var(--ink-faint); opacity: .5; }
.crumbs b { font-weight: 600; color: var(--ink); letter-spacing: -.006em; }

.iconbtn {
  position: relative;
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-2); color: var(--ink-muted);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.iconbtn:hover { background: var(--neutral-wash); color: var(--ink); }
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn .dot {
  position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--warn); box-shadow: 0 0 0 2px var(--surface);
}

/* Search trigger — the front door to the command palette. */
.searchtrigger {
  display: flex; align-items: center; gap: var(--s-4);
  height: 34px; padding: 0 var(--s-4) 0 var(--s-5);
  min-width: 232px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-faint);
  font: var(--t-callout);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.searchtrigger:hover { border-color: var(--accent-line); background: var(--surface); box-shadow: var(--shadow-1); }
.searchtrigger svg { width: 15px; height: 15px; }
.searchtrigger .grow { text-align: left; }
kbd {
  font: 500 0.6875rem/1 var(--font-sans); letter-spacing: 0;
  padding: 3px 5px; border-radius: var(--r-1);
  background: var(--surface-3); color: var(--ink-faint);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}

.menubtn { display: none; }

/* --- Page body ----------------------------------------------------------- */
.page {
  flex: 1 1 auto;
  width: 100%; max-width: var(--content-max);
  margin: 0 auto; padding: var(--s-9) var(--s-8) var(--s-13);
}
.page__head { margin-bottom: var(--s-8); }
.page__title { font: var(--t-title-1); letter-spacing: var(--tr-title-1); color: var(--ink); }
.page__lede { margin-top: var(--s-4); color: var(--ink-muted); font: var(--t-callout); max-width: 74ch; }
.page__actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

.section { margin-top: var(--s-10); }
.section:first-child { margin-top: 0; }
.section__head { display: flex; align-items: flex-end; gap: var(--s-5); margin-bottom: var(--s-6); flex-wrap: wrap; }
.section__title { font: var(--t-title-3); letter-spacing: var(--tr-title-3); color: var(--ink); }
.section__note { color: var(--ink-faint); font: var(--t-caption); }

/* =============================================================================
   Hue surfaces
   A surface lit by a colour rather than one with a colour drawn on its edge.
   Set --hue and add .hue-wash. The tint is mixed into the surface itself and
   resolves back to it, so there is no overlay, no stacking order to manage and
   no point where the wash stops and leaves an edge. Mixing against --surface
   (not transparent) also caps how strong a vivid hue can get: 9% of Sparta red
   and 9% of brand cyan land at the same lightness.
   ========================================================================== */
.hue-wash { background: linear-gradient(160deg, color-mix(in srgb, var(--hue, var(--accent)) var(--wash), var(--surface)) 0, var(--surface) 58%); }

/* =============================================================================
   3. Surfaces
   ========================================================================== */
.card {
  --hue: var(--brand-cyan);
  position: relative;
  /* Even an untoned panel sits in the brand's light rather than on neutral
     white. --wash-soft is quiet enough to read as temperature, not colour;
     set --hue (or data-tone below) to give a panel its own. */
  background: linear-gradient(160deg, color-mix(in srgb, var(--hue, var(--accent)) var(--wash-soft), var(--surface)) 0, var(--surface) 52%);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-1);
}
.card[data-tone="accent"]   { --hue: var(--accent); }
.card[data-tone="cyan"]     { --hue: var(--brand-cyan); }
.card[data-tone="azure"]    { --hue: var(--brand-azure); }
.card[data-tone="blue"]     { --hue: var(--brand-blue); }
.card[data-tone="jade"]     { --hue: var(--brand-jade-deep); }
.card[data-tone="warn"]     { --hue: var(--warn); }
.card[data-tone="danger"]   { --hue: var(--danger); }
.card[data-tone="positive"] { --hue: var(--positive); }
/* A toned card states something; it gets the full wash, not the whisper. */
.card[data-tone] { background: linear-gradient(160deg, color-mix(in srgb, var(--hue, var(--accent)) var(--wash), var(--surface)) 0, var(--surface) 58%); }
.card--flat { box-shadow: none; }
.card--sunken { background: var(--surface-sunken); box-shadow: none; }
.card--plain { background: var(--surface); }
.card__head {
  display: flex; align-items: flex-start; gap: var(--s-5);
  padding: var(--s-6) var(--s-7);
  border-bottom: 1px solid var(--line-soft);
}
.card__title { font: var(--t-headline); letter-spacing: var(--tr-headline); color: var(--ink); }
.card__sub { margin-top: 3px; color: var(--ink-faint); font: var(--t-caption); }
.card__head > .i { color: var(--ink-faint); margin-top: 2px; }
/* A toned panel's icon reads in that tone, so the wash and the mark agree. */
.card[data-tone] > .card__head > .i { color: color-mix(in srgb, var(--hue) 72%, var(--ink-muted)); }
.card__head--stack .card__title, .card__head--stack .card__sub { display: block; }
.card__body { padding: var(--s-7); }
.card__body--tight { padding: var(--s-5) var(--s-6); }
.card__foot {
  padding: var(--s-5) var(--s-7);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-4) var(--r-4);
  font: var(--t-caption); color: var(--ink-muted);
}

/* A disclosure card: the head doubles as the summary, with its own chevron. */
details > summary.card__head { list-style: none; }
details > summary.card__head::-webkit-details-marker { display: none; }
details > summary.card__head::after {
  content: ""; width: 8px; height: 8px; flex: none; margin-left: var(--s-2);
  border-right: 1.6px solid var(--ink-faint); border-bottom: 1.6px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-2) var(--ease);
}
details[open] > summary.card__head::after { transform: rotate(-135deg) translate(-2px, -2px); }
details > summary.card__head:hover { background: var(--neutral-wash); }
details[open] > summary.card__head { border-bottom-color: var(--line-soft); }

/* A card that carries the brand, lit by the logo's cyan. */
.card--brand { --hue: var(--brand-cyan); background: linear-gradient(160deg, color-mix(in srgb, var(--hue, var(--accent)) var(--wash), var(--surface)) 0, var(--surface) 58%); }

/* =============================================================================
   4. Stat + metric tiles
   ========================================================================== */
.stat {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6) var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
a.stat:hover, button.stat:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.stat__value, .stat__sub { display: block; }
.stat__label { display: flex; align-items: center; gap: var(--s-3); font: var(--t-caption); color: var(--ink-muted); font-weight: 500; }
.stat__label .i { width: 15px; height: 15px; color: var(--ink-faint); }
.stat__value {
  font: 600 1.75rem/1.05 var(--font-display); letter-spacing: -0.022em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__value--sm { font-size: 1.375rem; }
.stat__sub { font: var(--t-caption-2); color: var(--ink-faint); }

/* The stage tiles carry their hue as a wash off the top-left corner plus a dot
   and their own progress fill. There is deliberately no decorative rule: the
   only horizontal line in the tile is the meter, which measures something. */
.stat__dot { width: 7px; height: 7px; border-radius: var(--r-full); flex: none; background: var(--tone, var(--accent)); }
.stat--rail { --hue: var(--tone, var(--accent)); background: linear-gradient(160deg, color-mix(in srgb, var(--hue, var(--accent)) var(--wash), var(--surface)) 0, var(--surface) 58%); }

/* Pinned to the foot of the tile, so the three tiles line up with each other
   however many lines their helper text runs to. */
.stat__meter { display: block; margin-top: auto; padding-top: var(--s-7); }
.stat__meter .meter { background: color-mix(in srgb, var(--tone, var(--accent)) 14%, var(--surface-3)); }
.stat__meter .meter > i {
  min-width: 6px;   /* a 2% share still has to read as a bar, not a dot */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tone, var(--accent)) 58%, transparent), var(--tone, var(--accent)));
}
.stat[data-tone="cyan"]     { --tone: var(--brand-cyan); }
.stat[data-tone="azure"]    { --tone: var(--brand-azure); }
.stat[data-tone="blue"]     { --tone: var(--brand-blue); }
.stat[data-tone="jade"]     { --tone: var(--brand-jade-deep); }
.stat[data-tone="warn"]     { --tone: var(--warn); }
.stat[data-tone="danger"]   { --tone: var(--danger); }

/* compact metric used inside cards */
.metric { display: flex; flex-direction: column; gap: var(--s-2); }
.metric__label { font: var(--t-caption); color: var(--ink-muted); }
.metric__value { font: 600 1.3125rem/1.1 var(--font-display); letter-spacing: -.019em; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric__sub { font: var(--t-caption-2); color: var(--ink-faint); }
.metric-grid { display: grid; gap: var(--s-6) var(--s-7); grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.metric-grid > * { padding-left: var(--s-6); border-left: 1px solid var(--line-soft); }
.metric-grid > *:first-child { padding-left: 0; border-left: 0; }
/* two-up variant, for narrow cards where auto-fit would orphan the last metric */
.metric-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.metric-grid--2 > *:nth-child(odd) { padding-left: 0; border-left: 0; }
.metric-grid--2 > *:nth-child(even) { padding-left: var(--s-6); border-left: 1px solid var(--line-soft); }

/* =============================================================================
   5. Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  height: 34px; padding: 0 var(--s-5);
  border-radius: var(--r-2);
  font: 500 0.8125rem/1 var(--font-sans); letter-spacing: -.004em;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow-1);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.btn:active { transform: scale(.985); box-shadow: none; }
.btn svg { width: 15px; height: 15px; }

.btn--primary {
  background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 600;
  box-shadow: var(--shadow-2);
}
.btn--primary:hover { background: var(--accent-hover); border-color: transparent; color: var(--accent-ink); }

.btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-muted); }
.btn--quiet:hover { background: var(--neutral-wash); color: var(--ink); border-color: transparent; }

.btn--danger { color: var(--danger); border-color: var(--danger-line); background: var(--surface); }
.btn--danger:hover { background: var(--danger-wash); border-color: var(--danger-line); color: var(--danger); }

.btn--sm { height: 28px; padding: 0 var(--s-4); font-size: .75rem; border-radius: var(--r-1); }
.btn--sm svg { width: 13px; height: 13px; }
.btn--lg { height: 40px; padding: 0 var(--s-7); font-size: .875rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btngroup { display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* stepper — the +/- control the app uses for deal + prospect counts */
.stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.stepper button {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--ink-muted); font-size: 1rem; line-height: 1;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.stepper button:hover { background: var(--accent-wash); color: var(--accent); }
.stepper output {
  min-width: 56px; text-align: center; padding: 0 var(--s-4);
  font: 600 0.9375rem/1 var(--font-display); letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  align-self: stretch; display: grid; place-items: center;
}

/* =============================================================================
   6. Chips, pills, badges, status dots
   ========================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 22px; padding: 0 var(--s-4);
  border-radius: var(--r-full);
  font: 500 0.6875rem/1 var(--font-sans); letter-spacing: .002em;
  background: var(--neutral-wash); color: var(--ink-muted);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; opacity: .9; }
.pill--bare::before { display: none; }
.pill[data-tone="accent"]   { background: var(--accent-wash);   color: var(--accent);   border-color: var(--accent-line); }
.pill[data-tone="positive"] { background: var(--positive-wash); color: var(--positive); border-color: var(--positive-line); }
.pill[data-tone="warn"]     { background: var(--warn-wash);     color: var(--warn);     border-color: var(--warn-line); }
.pill[data-tone="danger"]   { background: var(--danger-wash);   color: var(--danger);   border-color: var(--danger-line); }

.chipbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 30px; padding: 0 var(--s-5);
  border-radius: var(--r-2); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-muted);
  font: 500 0.75rem/1 var(--font-sans);
  transition: all var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent); font-weight: 600;
}
.chip__n { font-variant-numeric: tabular-nums; opacity: .72; }

/* =============================================================================
   7. Tabs
   ========================================================================== */
.tabs {
  position: relative;
  display: flex; align-items: center; gap: var(--s-2);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 38px; padding: 0 var(--s-5);
  color: var(--ink-muted);
  font: 500 0.8125rem/1 var(--font-sans); letter-spacing: -.004em;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab__n {
  min-width: 19px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: var(--r-full);
  background: var(--neutral-wash); color: var(--ink-faint);
  font: 600 0.6875rem/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.tab[aria-selected="true"] .tab__n { background: var(--accent-wash-2); color: var(--accent); }
.tab[aria-selected="true"] {
  background: linear-gradient(180deg, transparent, var(--accent-wash));
  border-radius: var(--r-2) var(--r-2) 0 0;
}
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: -1px; height: 2px;
  border-radius: var(--r-full); background: var(--brand-sweep);
}
.tabpanel[hidden] { display: none; }
.tabpanel { padding-top: var(--s-7); }

/* Segmented control — Apple's, for small mutually-exclusive choices */
.segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-3); border-radius: var(--r-2);
  border: 1px solid var(--line-soft);
}
.segmented button {
  height: 26px; padding: 0 var(--s-5); border-radius: 6px;
  font: 500 0.75rem/1 var(--font-sans); color: var(--ink-muted);
  transition: all var(--dur-1) var(--ease);
}
.segmented button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1);
}

/* =============================================================================
   8. Tables
   ========================================================================== */
.tablewrap { overflow-x: auto; overscroll-behavior-x: contain; }
.table { width: 100%; font: var(--t-callout); }
.table thead th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--s-4) var(--s-6);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font: 600 0.6875rem/1.2 var(--font-sans);
  letter-spacing: var(--tr-overline); text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.table thead th.sortable { cursor: pointer; user-select: none; transition: color var(--dur-1) var(--ease); }
.table thead th.sortable:hover { color: var(--ink-2); }
.table thead th .caret { display: inline-block; width: 0; height: 0; margin-left: 5px; opacity: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-bottom: 4px solid currentColor;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.table thead th[aria-sort="ascending"] .caret  { opacity: .85; }
.table thead th[aria-sort="descending"] .caret { opacity: .85; transform: rotate(180deg); }

.table tbody td { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-2); }
.table tbody tr { transition: background var(--dur-1) var(--ease); }
.table tbody tr:hover { background-color: var(--accent-wash); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .cell-strong { color: var(--ink); font-weight: 600; letter-spacing: -.005em; }
.table .cell-num { font-variant-numeric: tabular-nums; text-align: right; }
.table .cell-actions { text-align: right; white-space: nowrap; }
.table--compact tbody td { padding: var(--s-4) var(--s-6); }

/* Row severity reads as light falling across the start of the row, not as a bar
   clipped to its edge. The wash is a background-image, so the hover tint below
   can sit under it as a background-color without either one cancelling out. */
.table tbody tr[data-severity] {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--sev) 13%, transparent) 0,
    color-mix(in srgb, var(--sev) 5%, transparent) 22%,
    transparent 46%);
}
.table tbody tr[data-severity="high"]   { --sev: var(--danger); }
.table tbody tr[data-severity="medium"] { --sev: var(--warn); }
.table tbody tr[data-severity="low"]    { --sev: var(--accent); }
:root[data-theme="dark"] .table tbody tr[data-severity],
:root:not([data-theme="light"]) .table tbody tr[data-severity] {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--sev) 20%, transparent) 0,
    color-mix(in srgb, var(--sev) 8%, transparent) 22%,
    transparent 46%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .table tbody tr[data-severity] {
    background-image: linear-gradient(90deg,
      color-mix(in srgb, var(--sev) 13%, transparent) 0,
      color-mix(in srgb, var(--sev) 5%, transparent) 22%,
      transparent 46%);
  }
}

.rowlink { color: var(--ink); font-weight: 600; letter-spacing: -.005em; transition: color var(--dur-1) var(--ease); }
.rowlink:hover { color: var(--accent); }

.tablefoot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) var(--s-7); border-top: 1px solid var(--line-soft);
  font: var(--t-caption); color: var(--ink-muted); flex-wrap: wrap;
}

/* =============================================================================
   9. Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.field__label { font: 500 0.75rem/1.2 var(--font-sans); color: var(--ink-muted); }
.field__hint { font: var(--t-caption-2); color: var(--ink-faint); }

.input, .select, .textarea {
  width: 100%; height: 34px; padding: 0 var(--s-5);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-2);
  font: var(--t-callout);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.textarea { height: auto; min-height: 84px; padding: var(--s-4) var(--s-5); resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-2);
}
.select {
  appearance: none; padding-right: var(--s-9); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%235B6D7E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-4) center; background-size: 12px;
}
.input--search { padding-left: var(--s-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%235B6D7E' stroke-width='1.5'/%3E%3Cpath d='m10.6 10.6 3 3' stroke='%235B6D7E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left var(--s-5) center; background-size: 15px; }

/* Switch — iOS-style, the one place a saturated fill is allowed, and it is 40px wide */
.switch { display: inline-flex; align-items: center; gap: var(--s-5); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative; width: 42px; height: 25px; flex: none;
  border-radius: var(--r-full); background: var(--surface-3);
  border: 1px solid var(--line);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
  border-radius: var(--r-full); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.24);
  transition: transform var(--dur-2) var(--ease);
}
.switch input:checked + .switch__track {
  background: linear-gradient(135deg, var(--brand-azure), var(--brand-jade-deep));
  border-color: transparent;
}
.switch input:checked + .switch__track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--accent-wash-2); }

.checkbox { width: 16px; height: 16px; flex: none; accent-color: var(--accent); cursor: pointer; }

/* =============================================================================
   10. Meters + micro-charts
   ========================================================================== */
/* block, not inline: a <span> meter collapses to zero height anywhere it is
   not already a flex item */
.meter { display: block; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: var(--r-full); background: var(--brand-sweep-jade); transition: width var(--dur-4) var(--ease-out); }
.meter--thin { height: 4px; }
.meter[data-tone="warn"] > i   { background: linear-gradient(90deg, var(--warn), #D6A34E); }
.meter[data-tone="danger"] > i { background: linear-gradient(90deg, var(--danger), #E0788A); }

/* horizontal distribution bar: the pipeline at a glance, in three logo hues */
.distbar { display: flex; height: 8px; border-radius: var(--r-full); overflow: hidden; background: var(--surface-3); }
.distbar > i { display: block; height: 100%; transition: flex-grow var(--dur-4) var(--ease-out); }
.distlegend { display: flex; gap: var(--s-6); flex-wrap: wrap; font: var(--t-caption); color: var(--ink-muted); }
.distlegend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.distlegend span { display: inline-flex; align-items: center; gap: var(--s-3); }
.distlegend i { width: 7px; height: 7px; border-radius: var(--r-full); flex: none; }

/* sparkline column chart */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.spark > i {
  flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--brand-azure), rgba(58,107,178,.28));
  opacity: .8;
}
.spark > i[data-hi="1"] { background: linear-gradient(180deg, var(--brand-jade), rgba(72,160,125,.3)); opacity: 1; }

/* ring gauge */
.ring { position: relative; width: 52px; height: 52px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.ring .bg { stroke: var(--surface-3); }
.ring .fg { stroke: url(#ringGrad); transition: stroke-dashoffset var(--dur-4) var(--ease-out); }
.ring__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 0.75rem/1 var(--font-display); letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   11. Lists, checklists, timelines
   ========================================================================== */
.list { display: flex; flex-direction: column; }
.list__row {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-7);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-1) var(--ease);
}
.list__row:last-child { border-bottom: 0; }
a.list__row:hover, button.list__row:hover { background: var(--accent-wash); }
.list__main { min-width: 0; flex: 1 1 auto; }
.list__title { font: 500 0.8125rem/1.35 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__meta { font: var(--t-caption-2); color: var(--ink-faint); margin-top: 2px; }

.checklist { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.checkitem {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-2); border: 1px solid var(--line-soft);
  background: var(--surface-2);
  font: var(--t-callout); color: var(--ink-2);
  transition: all var(--dur-1) var(--ease);
}
.checkitem:hover { border-color: var(--line); background: var(--surface); }
.checkitem__box {
  width: 17px; height: 17px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; color: transparent;
  transition: all var(--dur-1) var(--ease);
}
.checkitem[data-done="1"] .checkitem__box {
  background: linear-gradient(135deg, var(--brand-azure), var(--brand-jade-deep));
  border-color: transparent; color: #fff;
}
.checkitem[data-done="1"] { color: var(--ink); }
.checkitem__box svg { width: 11px; height: 11px; }

/* =============================================================================
   12. Empty states + callouts
   ========================================================================== */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  padding: var(--s-11) var(--s-7); text-align: center;
}
.empty__icon {
  width: 40px; height: 40px; border-radius: var(--r-3);
  display: grid; place-items: center; color: var(--ink-faint);
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.empty__icon svg { width: 19px; height: 19px; }
.empty__title { font: var(--t-headline); letter-spacing: var(--tr-headline); color: var(--ink-2); }
.empty__text { font: var(--t-caption); color: var(--ink-faint); max-width: 46ch; }

.callout {
  --hue: var(--accent);
  display: flex; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-3);
  border: 1px solid color-mix(in srgb, var(--hue) 22%, transparent);
  /* Mixed against the surface, so a vivid tone lands at the same lightness as a
     muted one and the panel never becomes a block of colour. */
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--hue) 12%, var(--surface-2)) 0,
    color-mix(in srgb, var(--hue) 4%, var(--surface-2)) 38%,
    var(--surface-2) 78%);
  font: var(--t-caption); color: var(--ink-muted); line-height: 1.5;
}
.callout[data-tone="accent"] { --hue: var(--accent); }
.callout[data-tone="warn"]   { --hue: var(--warn); }
.callout[data-tone="danger"] { --hue: var(--danger); }
/* The tone is already in the surface; a rule down the edge would only re-draw it
   as a line. Kept in the markup so the tone stays addressable, rendered as a
   soft taper that has no hard end. */
.callout__bar {
  width: 2px; flex: none; border-radius: var(--r-full); align-self: stretch;
  background: linear-gradient(180deg,
    transparent, color-mix(in srgb, var(--hue) 42%, transparent) 22%,
    color-mix(in srgb, var(--hue) 42%, transparent) 78%, transparent);
}
.callout strong { color: var(--ink-2); font-weight: 600; }

/* =============================================================================
   13. Command palette
   ========================================================================== */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.scrim[data-open="1"] { opacity: 1; pointer-events: auto; }

.palette {
  position: fixed; z-index: 101; left: 50%; top: 12vh;
  width: min(620px, calc(100vw - 32px));
  transform: translate(-50%, -8px) scale(.985);
  opacity: 0; pointer-events: none;
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.palette[data-open="1"] { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.palette { --hue: var(--brand-cyan);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hue) var(--wash), var(--surface)) 0, var(--surface) 46%); }

.palette__search {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-6) var(--s-7); border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-1) var(--ease);
}
/* the whole search row is the focus surface, so the input skips its own ring */
.palette__search:focus-within { background: var(--surface-2); }
#palette-input:focus-visible { outline: none; }
.palette__search svg { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }
.palette__search input {
  flex: 1 1 auto; min-width: 0; height: 24px;
  font: 400 0.9375rem/1.4 var(--font-sans); letter-spacing: -.008em; color: var(--ink);
}
.palette__search input::placeholder { color: var(--ink-faint); }

.palette__results { max-height: min(52vh, 440px); overflow-y: auto; padding: var(--s-4); }
.palette__group { padding: var(--s-4) var(--s-5) var(--s-3); }
.palette__item {
  display: flex; align-items: center; gap: var(--s-5);
  width: 100%; padding: var(--s-4) var(--s-5);
  border-radius: var(--r-2); color: var(--ink-2);
  font: var(--t-body); text-align: left;
  transition: background var(--dur-1) var(--ease);
}
.palette__item .i { width: 16px; height: 16px; flex: none; color: var(--ink-faint); }
.palette__item[data-active="1"] { background: var(--accent-wash); color: var(--ink); }
.palette__item[data-active="1"] .i { color: var(--accent); }
.palette__item .hint { font: var(--t-caption-2); color: var(--ink-faint); }
.palette__item mark { background: transparent; color: var(--accent); font-weight: 600; }
.palette__foot {
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
  padding: var(--s-4) var(--s-7); border-top: 1px solid var(--line-soft);
  background: var(--surface-2); font: var(--t-caption-2); color: var(--ink-faint);
}
.palette__foot span { display: inline-flex; align-items: center; gap: var(--s-3); }

/* =============================================================================
   14. Popovers, drawer, toasts
   ========================================================================== */
.pop {
  position: absolute; z-index: 70; top: calc(100% + 8px); right: 0;
  min-width: 268px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4);
  box-shadow: var(--shadow-4); overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.pop[data-open="1"] { opacity: 1; transform: none; pointer-events: auto; }
.pop__head { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line-soft); font: var(--t-headline); letter-spacing: var(--tr-headline); }
.pop__item {
  display: flex; align-items: center; gap: var(--s-5); width: 100%;
  padding: var(--s-4) var(--s-6); font: var(--t-callout); color: var(--ink-2); text-align: left;
  transition: background var(--dur-1) var(--ease);
}
.pop__item:hover { background: var(--neutral-wash); color: var(--ink); }
.pop__item svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
.pop__sep { height: 1px; background: var(--line-soft); margin: var(--s-3) 0; }
.haspop { position: relative; }

.toasts { position: fixed; z-index: 120; bottom: var(--s-8); right: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-6); min-width: 248px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-3); font: var(--t-callout); color: var(--ink);
  animation: toast-in var(--dur-3) var(--ease-out) both;
}
.toast i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--positive); flex: none; }
.toast[data-tone="info"] i { background: var(--accent); }
.toast[data-tone="warn"] i { background: var(--warn); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* =============================================================================
   15. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform var(--dur-3) var(--ease);
    box-shadow: var(--shadow-4);
  }
  .shell[data-drawer="1"] .sidebar { transform: none; }
  .menubtn { display: grid; }
  .railbtn { display: none; }
  .topbar { padding: 0 var(--s-6); gap: var(--s-4); }
  .page { padding: var(--s-8) var(--s-6) var(--s-12); }
  .searchtrigger { min-width: 0; }
  .searchtrigger .grow, .searchtrigger kbd { display: none; }
  .searchtrigger { width: 34px; justify-content: center; padding: 0; }
}
@media (max-width: 640px) {
  /* only the page you are on survives in the crumb trail */
  .crumbs > *:not(:last-child) { display: none; }
  .topbar { padding: 0 var(--s-5); gap: var(--s-3); }
  .page { padding: var(--s-7) var(--s-5) var(--s-11); }
  .page__title { font-size: 1.5rem; }
  .card__body { padding: var(--s-6); }
  .toasts { left: var(--s-5); right: var(--s-5); bottom: var(--s-5); }
  .metric-grid > * { padding-left: 0; border-left: 0; }
}


/* --- Feedback widget: the app's own, bottom-right on every page ---------- */
.feedback {
  position: fixed; z-index: 90;
  right: max(var(--s-8), env(safe-area-inset-right, 0px));
  bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 36px; padding: 0 var(--s-6);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  font: 500 0.8125rem/1 var(--font-sans); letter-spacing: -.004em;
  box-shadow: var(--shadow-3);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.feedback:hover { transform: translateY(-1px); box-shadow: var(--shadow-4); border-color: var(--accent-line); color: var(--ink); }
.feedback:active { transform: none; }
.feedback .i { color: var(--accent); }
@media (max-width: 640px) { .feedback span { display: none; } .feedback { width: 40px; height: 40px; padding: 0; justify-content: center; } }
@media print { .feedback { display: none !important; } }

/* the bell carries an unread count rather than a bare dot */
.iconbtn > .nav__count[data-bell] {
  position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; padding: 0 3px;
  font-size: .5625rem; font-weight: 700; letter-spacing: 0;
  background: var(--danger); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 2px var(--overlay);
}

/* =============================================================================
   17. Installed as a home-screen app
   viewport-fit=cover lets the page paint under the notch and the home
   indicator, so the chrome has to inset itself back out of them.
   ========================================================================== */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .topbar {
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .sidebar { padding-top: env(safe-area-inset-top, 0px); }
  .sectionrail { top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); }
  .rep-aside, .settings-nav { top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--s-6)); }
  html { scroll-padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--s-8)); }
  .page {
    padding-left: max(var(--s-8), env(safe-area-inset-left, 0px));
    padding-right: max(var(--s-8), env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--s-13) + env(safe-area-inset-bottom, 0px));
  }
  .toasts {
    bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
    right: max(var(--s-8), env(safe-area-inset-right, 0px));
  }
  /* the browser's own back gesture is gone, so never trap the user in a scroll */
  body { overscroll-behavior-y: none; }
}

@media print {
  .sidebar, .topbar, .toasts, .scrim, .palette { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  body { background: #fff; }
  .card, .stat { box-shadow: none; break-inside: avoid; }
}