/* Skills Matrix UI — First Technology brand palette (blue/slate).

   Colours are taken from firsttech.co.za; the reasoning lives in the vault's branding guide.
   The rest of this sheet is the original teal design with every colour in the green-to-blue-grey
   band rotated into the brand's blue band, lightness and saturation untouched — so the contrast
   relationships and every light/dark pair are exactly the ones that were designed. Reds, ambers
   and purples carry meaning (alerts, expiry, warnings) and were deliberately left alone. */
:root { color-scheme: light dark;
  /* --- First Technology brand, verbatim -------------------------------------------------- */
  --ft-blue:#006eff;        /* primary: the brand's own action colour */
  --ft-blue-d:#0059ce;      /* its darker state, also the brand's */
  --ft-navy:#0a2540;        /* the deep navy behind the site's dark surfaces */
  --ft-cyan:#00c9be;        /* brand accent */
  /* Brand blue as TEXT. #006eff is 4.49:1 on white and 3.2:1 on the dark surfaces — under AA
     either way — so text uses the brand's own darker blue in light mode and a lighter tint of it
     in dark. Fills, borders and focus rings keep the signature #006eff, where nothing sits on
     top of them. */
  --ft-blue-text:light-dark(#0059ce,#5ba4ff);
  /* --- What they mean here --------------------------------------------------------------- */
  --ft-exp:#00c9be;         /* experience (E) levels */
  --ft-cert:#ffa600;        /* certification (C) levels, and expiry warnings */

  /* === Semantic token layer (2026-09-09) ==================================================
     Everything below names a decision instead of repeating a hex pair. Before this block the
     sheet carried 230 inline light-dark() pairs across 104 distinct values, so changing "the
     panel background" meant finding every one of them. The tokens keep the same light-dark()
     mechanism, so dual-theme behaviour is unchanged — only the addressing changes.

     Colour carries meaning here and the meanings do not overlap:
       action  = something happens when you click it        (the brand blue)
       exp     = E1-E4, reviewed hands-on experience         (cyan)
       cert    = C1-C4, a reviewed credential + experience   (amber)
       danger  = destroys something
       ok      = currently valid
     A value is never borrowed across those five. The dashboard chart currently draws E-level
     bars in the action blue, which is the one place this rule is broken today. */

  /* Surfaces, back to front */
  --sm-canvas:light-dark(#eef1f5,#0e141b);   /* the page behind everything */
  --sm-main:light-dark(#f8f9fa,#12181f);     /* the working area beside the sidebar */
  --sm-surface:light-dark(#ffffff,#161d26);  /* panels, cards, table rows */
  --sm-raised:light-dark(#f6f8fa,#1d2530);   /* inputs, hover, table headers */
  --sm-inset:light-dark(#e9edf2,#11161d);    /* wells: a surface pressed INTO a panel */

  /* Lines */
  --sm-line:light-dark(#d8dee6,#2a3441);        /* hairline: separates */
  --sm-line-strong:light-dark(#b8c2ce,#3a4757); /* strong: encloses something interactive */

  /* Text. Three weights of emphasis, no more. */
  --sm-ink:light-dark(#10161d,#e8edf4);
  --sm-ink-2:light-dark(#55606e,#9aa7b8);
  --sm-ink-3:light-dark(#78838f,#6b7889);
  --sm-on-action:#ffffff;

  /* Action */
  --sm-action:var(--ft-blue);
  --sm-action-hover:light-dark(#006eff,#2a84ff);
  --sm-action-pressed:var(--ft-blue-d);
  --sm-action-subtle:light-dark(#e4eefc,#10243d);
  --sm-action-text:var(--ft-blue-text);
  --sm-focus:light-dark(#0059ce,#7fb4ff);

  /* Evidence — the two ladders. Both need a darker value in light mode: #00c9be on white is
     1.9:1 and unreadable as text, which is why these are pairs and --ft-exp/--ft-cert are not. */
  --sm-exp:light-dark(#00847c,#00c9be);
  --sm-exp-dim:light-dark(#ccf0ee,#0b4f4c);
  --sm-cert:light-dark(#b36f00,#ffa600);
  --sm-cert-dim:light-dark(#ffefd1,#4a3413);

  /* Status */
  --sm-ok:light-dark(#1b8f5a,#3dd68c);
  --sm-danger:light-dark(#c62828,#ff5c5c);
  --sm-danger-dim:light-dark(#fbe3e3,#3d1c1c);

  /* Type ramp. The sheet currently uses 18 sizes, 8 of them fractional (8.5/9.5/10.5/11.5/
     12.5px), and overrides the 13px body size DOWNWARD in most components. Seven sizes, and
     11px is the floor — nothing smaller ships. */
  --sm-t-display:28px;   /* one per page at most */
  --sm-t-title:20px;     /* page title */
  --sm-t-section:16px;   /* panel heading */
  --sm-t-subhead:14px;   /* sub-panel heading */
  --sm-t-body:13px;      /* body and table data */
  --sm-t-label:12px;     /* form labels, buttons, secondary text */
  --sm-t-micro:11px;     /* the floor: captions, meta, chips */

  /* Spacing, 4pt. Replaces the current 5/7/9/11/14/22/26px mix. */
  --sm-space-4:4px;  --sm-space-8:8px;   --sm-space-12:12px; --sm-space-16:16px;
  --sm-space-20:20px; --sm-space-24:24px; --sm-space-32:32px; --sm-space-40:40px;
  --sm-space-48:48px;

  /* Radius, four roles instead of eleven values (3/4/5/6/7/8/9/10/11/14/999). */
  --sm-r-control:4px;   /* buttons, inputs, chips */
  --sm-h-compact:24px;  /* D317: every control on a dense row — pill, select, date box, action */
  --sm-h-control:36px;  /* D318: and every control at the standard scale — field, select, button */
  --sm-r-card:8px;      /* panels, cards, tables */
  --sm-r-sheet:12px;    /* modals, popovers, bottom sheets */
  --sm-r-pill:999px;

  /* Layout */
  --sm-content-max:1440px;  /* content stops here; the shell centres beyond it */

  /* Chart colours. Canvas cannot read light-dark(), and Chart.js needs a concrete string, so
     these are plain values swapped by a media query and read with getComputedStyle. Experience
     is CYAN here, not blue: the old #5580b8 collided with the action blue, so the chart said
     "blue = experience" while every button said "blue = click me". */
  --sm-chart-exp:#00847c;
  --sm-chart-cert:#b36f00;
}
@media (prefers-color-scheme: dark){
  :root{ --sm-chart-exp:#00c9be; --sm-chart-cert:#ffa600; }
}
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,system-ui,"Segoe UI",sans-serif; font-size:var(--sm-t-body);
  color:var(--sm-ink); background:var(--sm-canvas); }
a { color:inherit; text-decoration:none; }
.app-window { min-height:100vh; display:grid; grid-template-columns:220px minmax(0,1fr); }
.sidebar { padding:22px 14px; background:var(--ft-navy); color:#eaeef4; display:flex; flex-direction:column; gap:24px; }
.brand { display:flex; gap:11px; align-items:center; padding:0 8px; }
.mark { width:38px;height:38px;border-radius:var(--sm-r-card);background:var(--ft-blue); display:grid;place-items:center;font-weight:850;color:#fff;letter-spacing:-.05em; }
.brand strong { display:block; font-size:var(--sm-t-body); } .brand span { display:block; opacity:.65; font-size:var(--sm-t-micro); margin-top:3px; }
.nav { display:grid; gap:9px; }
.nav a { padding:10px 11px; border-radius:var(--sm-r-card); color:#c8d0dc; display:flex; gap:10px; align-items:center; font-size:var(--sm-t-body); }
.nav a:hover { background:rgba(255,255,255,.07); }
.nav a.active { color:#fff; background:#123a63; }
.nav i { font-style:normal; width:21px; text-align:center; opacity:.9; }
.user { margin-top:auto; padding:12px 9px 0; border-top:1px solid rgba(255,255,255,.11); }
.user strong { font-size:var(--sm-t-label); display:block; } .user span { font-size:var(--sm-t-micro); opacity:.62; }
/* D457 (revised): Edit my profile, the same shape as Sign out. */
.user .user-edit { display:block; width:100%; box-sizing:border-box; cursor:pointer; font:inherit; margin-top:12px; text-align:center; text-decoration:none; color:#fff; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.30); border-radius:var(--sm-r-control); padding:7px 10px; font-size:var(--sm-t-label); font-weight:650; }
.user .user-edit:hover { background:rgba(255,255,255,.16); }
/* D468: Take a tour / Change password — small, but they look like links and underline on hover. */
.user a.user-link { display:inline-block; margin:10px 4px 0 0; white-space:nowrap; color:#a8c4e8; font-size:var(--sm-t-micro); text-decoration:none; }
.user a.user-link:hover { text-decoration:underline; color:#fff; }
.main { min-width:0; display:flex; flex-direction:column; background:var(--sm-main); }
.topbar { min-height:70px; padding:14px 24px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--sm-line); background:var(--sm-surface); }
/* Breadcrumb trail. Sits above the page title, quiet enough not to compete with it: the trail is
   for getting back, the heading is for knowing where you are. */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 4px;
  font-size:var(--sm-t-micro); line-height:1.4; }
.crumbs a { color:var(--ft-blue-text); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs i { font-style:normal; color:var(--sm-ink-3); }
.crumbs [aria-current="page"] { color:var(--sm-ink-2); }
.crumbs a:focus-visible { outline:2px solid var(--ft-blue); outline-offset:2px; border-radius:var(--sm-r-control); }
.topbar h1 { margin:0; font-size:var(--sm-t-title); letter-spacing:-.03em; } .topbar p { margin:4px 0 0; font-size:var(--sm-t-micro); color:var(--sm-ink-2); }
.top-actions { display:flex; gap:8px; align-items:center; }
/* D187: a pill that wraps is not a pill. "logged in" broke across two lines in the audit log's
   Action column, dragging the row to double height. A badge sizes to its text and the column
   sizes to the badge. */
.badge { display:inline-block; padding:5px 9px; border-radius:var(--sm-r-pill);
  font-size:var(--sm-t-micro); background:var(--sm-action-subtle); color:var(--sm-action-text);
  white-space:nowrap; }
/* Content stops at --sm-content-max and centres beyond it. Without this the dashboard stretches
   the full width of a 1920px monitor with nothing anchoring it.
   `.content.wide` opts out: a table with ten columns needs the room more than it needs the
   measure, and squeezing one into 1440px makes its cells wrap instead. Pages set this with
   {% block content_width %} wide{% endblock %}. When a dense table is redesigned to carry fewer
   columns, drop the class rather than keeping both. */
.content { padding:var(--sm-space-24) var(--sm-space-24) var(--sm-space-32); width:100%;
  max-width:var(--sm-content-max); margin-inline:auto; }
.content.wide { max-width:none; }
/* D349: every name stays visible; chips wrap instead of hiding in a disclosure. */
.cert-celebration{display:flex;align-items:center;gap:var(--sm-space-16);padding:var(--sm-space-12);
  margin:0 0 var(--sm-space-24);border:1px solid var(--sm-line-strong);border-radius:var(--sm-r-sheet);
  background:var(--sm-surface);color:var(--sm-ink-1)}
.cert-celebration-heading{display:flex;align-items:center;gap:var(--sm-space-8);flex-shrink:0;align-self:flex-start}
.cert-celebration-art{width:24px;height:36px;flex:0 0 24px}
.cert-celebration-art svg{display:block;width:100%;height:100%}
.cert-balloon-string{fill:none;stroke-width:2;stroke-linecap:round}
.cert-balloon-string-teal{stroke:#5ed6d0}.cert-balloon-string-gold{stroke:#f4c66a}
.cert-balloon-teal{fill:#00a9a5}.cert-balloon-gold{fill:#f4c66a}
.cert-confetti{fill:none;stroke:#eaf7f6;stroke-width:3;stroke-linecap:round}
.cert-confetti-dot{fill:#eaf7f6}.cert-confetti-dot-gold{fill:#f4c66a}
.cert-celebration-title{display:block;font-size:var(--sm-t-body);line-height:1.4}
.cert-celebration-kicker{display:block;margin-top:4px;font-size:var(--sm-t-micro);color:var(--sm-ink-2)}
.cert-celebration-people{display:flex;flex:1;flex-wrap:wrap;gap:var(--sm-space-8);min-width:0}
.cert-celebration-person{display:flex;align-items:stretch;max-width:100%;min-width:0;
  border:1px solid var(--sm-line-strong);border-radius:var(--sm-r-pill);background:var(--sm-raised)}
.cert-celebration-person:hover,.cert-celebration-person:focus-within{background:var(--sm-exp-dim);border-color:var(--sm-exp)}
.cert-celebration-name{min-width:0;padding:var(--sm-space-8) 0 var(--sm-space-8) var(--sm-space-12);
  border:0;border-radius:var(--sm-r-pill);background:transparent;color:inherit;font:inherit;
  font-size:var(--sm-t-label);line-height:1.4;text-align:left;overflow-wrap:anywhere;cursor:pointer}
.cert-celebration-person form{display:flex;margin:0;flex-shrink:0}
.cert-kudos{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex-shrink:0;
  min-width:40px;padding:0 var(--sm-space-8);border:0;border-radius:var(--sm-r-pill);background:transparent;
  color:var(--sm-exp);font:inherit;font-size:var(--sm-t-micro);white-space:nowrap}
button.cert-kudos{cursor:pointer}
button.cert-kudos:hover,.cert-kudos.selected{background:var(--sm-exp-dim)}
.cert-celebration-name:focus-visible,button.cert-kudos:focus-visible{outline:2px solid var(--sm-focus);outline-offset:2px}
.cert-kudos-self{color:var(--sm-ink-2)}
.cert-kudos svg{display:block;width:14px;height:14px;flex:0 0 14px}
.cert-kudos svg path{stroke:currentColor}
.cert-kudos.selected svg path{fill:currentColor}
.cert-celebration-tooltip{position:fixed;z-index:1000;display:grid;gap:var(--sm-space-8);
  width:max-content;max-width:min(320px,calc(100vw - 24px));padding:var(--sm-space-12);
  border:1px solid var(--sm-line-strong);border-radius:var(--sm-r-card);background:var(--sm-raised);
  color:var(--sm-ink-1);font-size:var(--sm-t-label);font-weight:400;overflow-wrap:anywhere;
  box-shadow:0 6px 18px #0003}
.cert-celebration-tooltip[hidden]{display:none}
.cert-celebration-kind{color:var(--sm-exp)}
@media(max-width:700px){.cert-celebration{flex-direction:column;align-items:stretch;gap:var(--sm-space-12)}}
/* D317: `font:inherit` on the FAMILY, measured on a live profile — every <button class="action">
   rendered in Arial while the <a class="action"> beside it, and every input and select, rendered in
   the page's own stack. A <button> does not inherit font-family from its ancestors: that is a
   user-agent default, and D188's floor covered inputs and selects but not this. Two typefaces,
   side by side, on the same control. */
button, input, select, textarea { font-family:inherit; }
/* D318: a button and the box beside it are the same height. They were not: an input or select
   computed to 36px from its padding and line box, a button to 34px from the same padding, because
   the two do not lay text out the same way. Two pixels, on every screen, on every pair. The height
   is now stated rather than inferred, and stated once. */
.action { border:1px solid var(--sm-line-strong); background:var(--sm-raised); color:inherit;
  padding:0 11px; border-radius:var(--sm-r-control); font:inherit; font-size:var(--sm-t-label);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  height:var(--sm-h-control); box-sizing:border-box; text-decoration:none; }
.action.primary { background:var(--ft-blue-d); border-color:var(--ft-blue-d); color:#fff; font-weight:700; }
.action:disabled,.action[aria-disabled="true"]{opacity:.58;cursor:not-allowed;filter:saturate(.65)}
/* D468: every button looks and behaves like one. It had no hover state at all, so nothing told a person a grey box
   was clickable. Pointer, a lighter fill and brighter edge on hover, a press on click, a slight raised edge, room for
   an icon. :where() keeps these weak, so danger/quiet/primary hovers still win. Widths and the D318 heights are unchanged, so nothing moves or wraps. */
.action{gap:6px;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:background .12s,border-color .12s,box-shadow .12s}
.action:hover:where(:not(:disabled):not([aria-disabled="true"])){background:light-dark(#e9eef4,#273140);border-color:light-dark(#8fa3bd,#5c6b80)}
.action.primary:hover:where(:not(:disabled)){background:var(--ft-blue);border-color:var(--ft-blue);color:#fff}
.action:active:where(:not(:disabled)){box-shadow:none;transform:translateY(1px)}
.action.quiet,.action.quiet-danger{box-shadow:none}
.action.danger.solid{background:var(--sm-danger);border-color:var(--sm-danger);color:#fff;font-weight:700}
.action.danger.solid:hover{background:#a93226;color:#fff}
/* === Form controls, everywhere ============================================================
   D188: there was no base style for an input or a select. Controls were styled only inside
   particular containers — `.field select`, `.review-form select` — so any form that did not use
   one of those rendered the operating system's own widget: a grey box with an inset border, no
   radius and half the height of every other control on the page. The committee form is where it
   was reported ("a horrific box that looks nothing like the rest of the site"), and it was
   correct: those controls were never styled at all.

   This is the floor, not a container. Every existing container rule is more specific and still
   wins, so nothing that already looked right changes. Checkboxes, radios and buttons keep their
   own treatment. */
.app-window input[type="text"], .app-window input[type="search"], .app-window input[type="date"],
.app-window input[type="number"], .app-window input[type="email"], .app-window input[type="url"],
.app-window input[type="password"], .app-window input[type="tel"], .app-window input:not([type]),
.app-window select, .app-window textarea {
  width:100%; box-sizing:border-box; border:1px solid var(--sm-line-strong);
  border-radius:var(--sm-r-control); padding:0 9px; height:var(--sm-h-control);
  background:var(--sm-raised); color:inherit; font:inherit; font-size:var(--sm-t-label); }
.app-window textarea { min-height:72px; height:auto; padding:8px 9px; resize:vertical; }
.app-window input:focus-visible, .app-window select:focus-visible,
.app-window textarea:focus-visible { outline:2px solid var(--sm-focus); outline-offset:-1px; }
/* An inline control inside running text should not stretch to the width of its paragraph. */
.app-window input[type="checkbox"], .app-window input[type="radio"] { width:auto; }
/* D317: a file input keeps its own button inside a shadow root, so the floor above never touched
   it and the profile's photo picker rendered the operating system's grey "Choose File" box. */
.app-window input[type="file"] { width:auto; border:0; background:none; padding:0;
  font-size:var(--sm-t-label); color:var(--sm-ink-3); }
.app-window input[type="file"]::file-selector-button {
  font:inherit; font-size:var(--sm-t-label); margin-right:10px; cursor:pointer;
  border:1px solid var(--sm-line-strong); border-radius:var(--sm-r-control);
  background:var(--sm-raised); color:inherit; padding:8px 11px; }
.app-window input[type="file"]::file-selector-button:hover { filter:brightness(1.15); }

.filters { display:grid; grid-template-columns:repeat(4,minmax(110px,1fr)); gap:10px; margin-bottom:16px; align-items:end; }
/* Sentence case at 12px. The previous 9px uppercase with letter-spacing was below the
   readable floor and is the commonest generated-UI tell. */
.field label { display:block; font-size:var(--sm-t-label); color:var(--sm-ink-2); margin-bottom:var(--sm-space-4); font-weight:500; }
.field select { width:100%; border:1px solid var(--sm-line-strong); border-radius:var(--sm-r-control); padding:8px 9px; color:inherit; background:var(--sm-raised); font-size:var(--sm-t-label); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.metric, .panel { border:1px solid var(--sm-line); background:var(--sm-surface); border-radius:var(--sm-r-card); }
.metric { padding:14px; } .metric span { color:var(--sm-ink-3); font-size:var(--sm-t-micro); }
.metric strong { display:block; font-size:var(--sm-t-display); line-height:1; margin:8px 0 6px; letter-spacing:-.04em; }
.metric small { font-size:var(--sm-t-micro); color:var(--ft-blue-text); }
.grid-2 { display:grid; grid-template-columns:1.35fr 1fr; gap:14px; }
.panel { padding:15px; min-width:0; }
.panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.panel h3, .panel h2 { font-size:var(--sm-t-label); margin:0; } .panel-head span { font-size:var(--sm-t-micro); color:var(--sm-ink-3); }
.legend { display:flex; gap:12px; justify-content:flex-end; font-size:var(--sm-t-micro); margin-top:14px; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:4px; }
.alert-list { display:grid; gap:9px; }
.alert-row { padding:10px; border-radius:var(--sm-r-card); background:var(--sm-inset); display:grid; grid-template-columns:8px 1fr auto; gap:9px; align-items:center; }
.alert-row > i { width:7px; height:7px; border-radius:50%; background:var(--ft-cert); }
.alert-row strong { display:block; font-size:var(--sm-t-micro); } .alert-row span { font-size:var(--sm-t-micro); color:var(--sm-ink-3); }
.alert-row time { font-size:var(--sm-t-micro); color:#d48a2c; font-weight:700; }
.empty { padding:20px; text-align:center; color:var(--sm-ink-3); font-size:var(--sm-t-micro); }
.note { margin-top:14px; padding:9px 10px; border-left:3px solid var(--ft-blue); background:var(--sm-action-subtle); color:var(--sm-ink-2); font-size:var(--sm-t-micro); line-height:1.5; }
/* Reusable inline help: an ⓘ that reveals a short explanation on hover / focus / tap. */
.info { position:relative; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid currentColor; font-size:var(--sm-t-micro); font-style:normal; font-weight:700; line-height:1; cursor:help; opacity:.6; vertical-align:middle; margin-left:6px; user-select:none; }
.info:hover, .info:focus { opacity:1; outline:none; }
.info-pop { display:none; position:absolute; z-index:60; top:150%; left:0; width:270px; max-width:78vw; max-height:min(70vh,520px); overflow:auto; overscroll-behavior:contain; padding:11px 12px; border-radius:var(--sm-r-card); cursor:auto; font-weight:400; font-style:normal; text-align:left; font-size:var(--sm-t-micro); line-height:1.5; background:var(--sm-surface); color:var(--sm-ink); border:1px solid var(--sm-line); box-shadow:0 12px 34px rgba(0,0,0,.35); }
.info-pop.right { left:auto; right:0; }
.info:hover .info-pop, .info:focus .info-pop, .info:focus-within .info-pop { display:block; }
.info .info-pop b { font-weight:750; }
/* Hamburger + off-canvas drawer (mobile). Hidden on desktop. */
.nav-toggle{display:none;background:none;border:0;color:inherit;font-size:var(--sm-t-display);line-height:1;cursor:pointer;padding:4px 8px;margin-right:2px;}
.nav-backdrop{display:none;border:0;}
@media (max-width:820px){
  .app-window{grid-template-columns:1fr;}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:1200;transform:translateX(-100%);
    transition:transform .22s ease;overflow-y:auto;gap:18px;}
  body.nav-open .sidebar{transform:none;box-shadow:0 0 42px rgba(0,0,0,.55);}
  .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100;}
  body.nav-open .nav-backdrop{display:block;}
  .nav-toggle{display:inline-flex;align-items:center;}
  .topbar{min-height:56px;padding:10px 14px;gap:8px;flex-wrap:wrap;}
  .topbar h1{font-size:var(--sm-t-section);} .topbar p{display:none;}
  .content{padding:16px 14px 26px;}
  .metrics{grid-template-columns:1fr 1fr!important;}
  .filters{grid-template-columns:1fr 1fr!important;}
  .grid-2{grid-template-columns:1fr!important;}
  /* page action buttons drop to their own full-width row below the title */
  .top-actions{order:3;flex-basis:100%;width:100%;flex-wrap:wrap;justify-content:flex-start;gap:6px;}
  .top-actions:empty{display:none;}
  /* info tooltip becomes a full-width bottom sheet so it never runs off-screen */
  .info-pop{position:fixed;left:12px;right:12px;bottom:14px;top:auto;width:auto;max-width:none;max-height:72vh;z-index:1300;}
  .top-actions .action{padding:7px 10px;font-size:var(--sm-t-micro);}
}
@media (max-width:480px){
  .metrics{grid-template-columns:1fr!important;}
  .filters{grid-template-columns:1fr!important;}
  .topbar h1{font-size:var(--sm-t-section);}
  .metric strong{font-size:var(--sm-t-title);}
}

/* grouped/collapsible sidebar nav */
.nav-group{border:0}
.nav-group>summary{list-style:none;cursor:pointer;padding:10px 11px;border-radius:var(--sm-r-card);color:#c8d0dc;display:flex;align-items:center;gap:10px;font-size:var(--sm-t-body)}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::after{content:"\25B8";margin-left:auto;font-size:var(--sm-t-micro);opacity:.6;transition:transform .15s}
.nav-group[open]>summary::after{transform:rotate(90deg)}
.nav-group>summary:hover{background:rgba(255,255,255,.07)}
.nav-group>summary i{width:21px;text-align:center;opacity:.9;font-style:normal}
.nav-group .nav-children{display:grid;gap:2px;padding:2px 0 4px 12px;margin-top:2px}
.nav-group .nav-children a{font-size:var(--sm-t-label);padding:7px 11px}

/* Filter box injected above a long <select> (see base.html) — the skills catalogue is
   too long to scroll, so you type to narrow it down first. */
/* D186: the filter box and the dropdown it filters are ONE control and now look like it. They
   were two separate boxes with a gap between them, so on the committee form the dropdown read as
   an orphaned, unlabelled "—" sitting under a search field. Joined: square edges where they meet,
   and the pair shares a single outline on focus. */
.sel-combo{display:block}
.sel-search{display:flex;align-items:center;gap:8px;margin-bottom:0}
.sel-combo .sel-search input{border-bottom-left-radius:0;border-bottom-right-radius:0}
.sel-combo > select{display:block;width:100%;margin:0;border-top-left-radius:0;
  border-top-right-radius:0;border-top-color:transparent}
.sel-combo:focus-within > select{border-top-color:var(--sm-line-strong)}
.sel-search input{flex:1;min-width:0;border:1px solid var(--sm-line-strong);border-radius:var(--sm-r-control);
  padding:7px 9px;font:inherit;font-size:var(--sm-t-label);background:var(--sm-raised);color:inherit}
.sel-search input:focus{outline:2px solid var(--sm-focus);outline-offset:-1px}
.sel-search-count{font-size:var(--sm-t-micro);color:var(--sm-ink-2);white-space:nowrap}
.sel-search-count.none{color:#c0562c}

/* A renewal on the dashboard links to the record it is about. */
a.alert-row { text-decoration:none; color:inherit; }
a.alert-row:hover { background:var(--sm-raised); }
a.alert-row:hover strong { text-decoration:underline; }
/* …and the row it lands on is highlighted, so it is obvious which one was meant.
   Pure CSS via :target — no script involved. */
tr:target { scroll-margin-top:90px; }   /* keep the landed-on row clear of the top edge */
tr:target > td { background:var(--sm-cert-dim); }
tr:target > td:first-child { box-shadow:inset 3px 0 0 #d48a2c; }
.alert-row time.late { color:#c0392b; }

/* Dashboard figures drill through to the records behind them. */
a.metric{ display:block; text-decoration:none; color:inherit; transition:border-color .12s, transform .12s; }
a.metric:hover{ border-color:var(--ft-blue); transform:translateY(-1px); }
a.metric:hover strong{ color:var(--ft-blue-text); }
a.metric:focus-visible{ outline:2px solid var(--ft-blue); outline-offset:2px; }
/* Panel heading / footer links through to the full list behind a summary panel. */
.panel-head .panel-more{ font-size:var(--sm-t-micro); color:var(--sm-ink-3); text-decoration:none; white-space:nowrap; }
.panel-head .panel-more:hover{ color:var(--ft-blue-text); }
.panel-foot{ display:block; margin-top:11px; padding-top:10px; border-top:1px solid var(--sm-line);
  font-size:var(--sm-t-micro); font-weight:650; color:var(--ft-blue-text); text-decoration:none; text-align:center; }
.panel-foot:hover{ text-decoration:underline; }

/* Records list: the whole row opens the record it describes. */
.rec-row > td { padding:0; border-top:1px solid var(--sm-line); }
.rec-row > td > a { display:block; padding:9px 11px; color:inherit; text-decoration:none; }
.rec-row > td:first-child > a { font-weight:650; }
.rec-row:hover > td { background:var(--sm-raised); }
.rec-row:hover > td:first-child > a { color:var(--ft-blue-text); text-decoration:underline; }
.rec-row > td > a:focus-visible { outline:2px solid var(--ft-blue); outline-offset:-2px; }

/* Long skill / certification lists: collapsible bands with their own level profile.
   Shared by the profile card and the Person skills screen. */
/* --- Skills panel: built for hundreds of rows, not a handful --- */
.sk-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
#skFind{flex:1;min-width:190px;border:1px solid rgba(128,140,145,.4);border-radius:var(--sm-r-card);padding:8px 11px;
        font:inherit;font-size:var(--sm-t-label);background:var(--sm-raised);color:inherit}
#skFind:focus{outline:2px solid var(--ft-blue);outline-offset:-1px}
.sk-tiers{display:flex;gap:4px;flex-wrap:wrap}
.sk-tier{border:1px solid rgba(128,140,145,.4);background:none;color:inherit;font:inherit;font-size:var(--sm-t-micro);
         padding:6px 10px;border-radius:var(--sm-r-pill);cursor:pointer}
.sk-tier:hover{border-color:var(--ft-blue)}
.sk-tier.on{background:#24467a;border-color:#24467a;color:#fff;font-weight:650}
.sk-count{font-size:var(--sm-t-micro);color:#8a909b;white-space:nowrap}
.sk-openall{display:flex;justify-content:flex-end;margin:-4px 0 7px}
.sk-link{background:none;border:0;padding:2px 0;font:inherit;font-size:var(--sm-t-micro);font-weight:650;
         color:var(--ft-blue-text);cursor:pointer;text-decoration:underline}
.sk-link:hover{color:light-dark(#24467a,#9cc3ff)}

.sk-groups{display:grid;gap:6px}
.sk-g{border:1px solid rgba(128,140,145,.24);border-radius:var(--sm-r-card);overflow:hidden;
      background:var(--sm-surface)}
.sk-g > summary{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;
      padding:10px 13px;cursor:pointer;list-style:none;font-size:var(--sm-t-label)}
.sk-g > summary::-webkit-details-marker{display:none}
.sk-g > summary:hover{background:var(--sm-raised)}
.sk-gname{font-weight:700;display:flex;align-items:center;gap:7px}
.sk-gname::before{content:"\25B8";font-size:var(--sm-t-micro);color:#8a909b;transition:transform .13s}
.sk-g[open] > summary .sk-gname::before{transform:rotate(90deg)}
/* Level profile: how much of this group sits at each level, strongest first. */
.sk-bar{display:flex;width:96px;height:7px;border-radius:var(--sm-r-control);overflow:hidden;
        background:var(--sm-raised);flex:0 0 96px}
.sk-bar i{display:block;height:100%}
.sk-bar i.t4{background:#17396d} .sk-bar i.t3{background:var(--ft-blue)}
.sk-bar i.t2{background:#7c99c4} .sk-bar i.t1{background:#b9c8dd}
.sk-gn{font-size:var(--sm-t-micro);font-weight:700;color:#8a909b;min-width:30px;text-align:right;
       font-variant-numeric:tabular-nums}
/* ASSIST-04: the assistant is thinking. The answer is a round trip of several seconds and the
   page used to show nothing at all while it ran. */
.msg.is-waiting .bubble{display:grid;gap:8px;font-style:normal}
.msg.is-waiting b{font-size:var(--sm-t-label);color:var(--sm-ink)}
.msg.is-waiting small{font-size:var(--sm-t-micro);color:var(--sm-ink-3);line-height:1.5}
.wait-bar{display:block;height:4px;border-radius:2px;background:var(--sm-line);overflow:hidden}
.wait-bar i{display:block;height:4px;width:32%;border-radius:2px;background:var(--ft-blue);
  animation:wait-run 1.5s ease-in-out infinite}
@keyframes wait-run{0%{margin-left:-32%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){ .wait-bar i{animation:none;width:100%;opacity:.5} }
.composer button[disabled]{opacity:.6;cursor:default}
.composer textarea[readonly]{opacity:.75}

/* BID-08: the six stages of a bid, across the top. A stage that cannot start says which one it is
   waiting for, so the sequence is visible rather than explained in prose further down. */
.bid-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 12px}
.bid-step{display:grid;gap:2px;padding:9px 11px;border-radius:var(--sm-r-card);text-decoration:none;
  background:var(--sm-surface);border:1px solid var(--sm-line);color:inherit;align-content:start}
.bid-step:hover{border-color:var(--sm-line-strong)}
.bid-step b{font-size:var(--sm-t-micro);width:20px;height:20px;border-radius:50%;display:grid;
  place-items:center;background:var(--sm-raised);color:var(--sm-ink-3)}
.bid-step span{font-size:var(--sm-t-label);font-weight:650;line-height:1.3}
.bid-step small{font-size:var(--sm-t-micro);color:var(--sm-ink-3);line-height:1.35}
.bid-step.is-done b{background:#00897b;color:#fff}
.bid-step.is-done span{color:var(--sm-ink-2)}
.bid-step.is-current{border-color:var(--ft-blue);background:var(--sm-action-subtle)}
.bid-step.is-current b{background:var(--ft-blue-d);color:#fff}
.bid-step.is-current span{color:var(--sm-action-text)}
.bid-step.is-waiting{opacity:.62}
.bid-next{border:1px solid var(--sm-line-strong);border-left:4px solid var(--ft-blue);
  border-radius:var(--sm-r-card);background:var(--sm-surface);padding:14px 16px;margin:0 0 14px}
.bid-next-head{margin:0;font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--sm-ink-3)}
.bid-next-do{margin:3px 0 0;font-size:var(--sm-t-section);font-weight:700;color:var(--sm-ink)}
.bid-next-why{margin:5px 0 10px;font-size:var(--sm-t-label);color:var(--sm-ink-2);max-width:80ch}
@media(max-width:1100px){.bid-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.bid-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* D152: the approvals hub — who is waiting, not which file. Cards rather than a list, because
   the counts are what a reviewer is choosing between. */
.approval-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.approval-person{display:block;padding:13px 14px;border:1px solid var(--sm-line);
  border-radius:var(--sm-r-card);background:var(--sm-surface);text-decoration:none;color:inherit}
.approval-person:hover{border-color:var(--sm-line-strong);background:var(--sm-raised)}
.approval-person strong{display:block;font-size:var(--sm-t-body)}
.approval-person-meta{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-3);margin-top:2px}
.approval-counts{display:flex;gap:10px;align-items:baseline;margin-top:9px;font-size:var(--sm-t-micro);
  color:var(--sm-ink-3)}
.approval-counts b{font-size:var(--sm-t-section);color:var(--sm-ink);font-variant-numeric:tabular-nums}
.approval-counts .is-ready{font-style:normal;color:var(--sm-action-text);font-weight:700}
tr.is-open{background:var(--sm-action-subtle)}

/* D151: filter, search and person grouping above the review queue. */
.review-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;grid-column:1/-1;margin:0 0 10px}
.review-filters input[type=search]{flex:1 1 260px;min-width:0;border:1px solid var(--sm-line-strong);
  border-radius:var(--sm-r-control);padding:7px 10px;font:inherit;font-size:var(--sm-t-label);
  background:var(--sm-raised);color:inherit}
.review-chips{display:flex;flex-wrap:wrap;gap:6px}
.review-chip{font-size:var(--sm-t-micro);padding:5px 11px;border-radius:var(--sm-r-pill);
  text-decoration:none;background:var(--sm-raised);color:var(--sm-ink-2);border:1px solid var(--sm-line)}
.review-chip b{font-variant-numeric:tabular-nums;margin-left:4px}
.review-chip.on{background:var(--sm-action-subtle);color:var(--sm-action-text);
  border-color:transparent;font-weight:700}
.review-person{margin:0 0 10px;border:1px solid var(--sm-line);border-radius:var(--sm-r-card);
  background:var(--sm-surface);overflow:hidden}
.review-person-head{margin:0;padding:9px 11px;font-size:var(--sm-t-label);font-weight:700;
  background:var(--sm-raised);border-bottom:1px solid var(--sm-line);line-height:1.35}
.review-person-head span{display:block;font-size:var(--sm-t-micro);font-weight:400;color:var(--sm-ink-3)}
.review-bulk{padding:9px 11px;border-bottom:1px solid var(--sm-line)}
.review-bulk .action{width:100%;text-align:center}

/* D150: the document shown beside the decision. Sized so a portrait certificate is readable
   without scrolling the page itself, and it shrinks with the panel rather than forcing a
   horizontal scrollbar on a laptop. */
.review-preview{border:1px solid var(--sm-line);border-radius:var(--sm-r-card);overflow:hidden;
                background:var(--sm-raised);margin-bottom:8px}
.review-preview iframe{display:block;width:100%;height:420px;border:0;background:#fff}
.review-doclinks{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 10px;
                 font-size:var(--sm-t-micro)}
.review-doclinks a{color:var(--ft-blue-text)}
@media(max-width:1100px){.review-preview iframe{height:300px}}

/* ONE ROW PER LINE. This was `repeat(auto-fill,minmax(250px,1fr))`, which made every skill a
   grid cell about 250px wide, and produced two different layouts in the same list: a skill with
   a written note had its paragraph crushed into a 250px column with most of the row left empty,
   while three skills without notes sat side by side and stopped reading as a list at all.
   The multi-column grid had exactly one consumer — the profile's Experience panel — and it was
   the one that was broken. `.edit-list` and `.cert-list` had already each opted out of it for
   the same reason, which is the clue that the default was wrong rather than the exceptions. */
.sk-list{display:grid;grid-template-columns:1fr;gap:0;padding:2px 13px 11px}
.sk-row{display:flex;justify-content:space-between;align-items:baseline;gap:9px;
        padding:5px 0;border-top:1px solid rgba(128,140,145,.16);font-size:var(--sm-t-label)}
/* Author-level flex/grid rules otherwise override the browser's presentational [hidden] rule. */
.sk-row[hidden],.sk-g[hidden]{display:none!important}
[data-profile-item][hidden],[data-profile-section][hidden]{display:none!important}
.sk-n{min-width:0;overflow-wrap:anywhere}
.sk-lv{flex:0 0 auto;display:flex;gap:3px}
.sk-lv b{font-size:var(--sm-t-micro);letter-spacing:.03em;border-radius:var(--sm-r-control);padding:1px 5px;background:#24467a;color:#fff}
.sk-lv b.e{background:#5b6577}
.sk-row.has-note{align-items:flex-start}
/* The note is prose about the skill above it, so it runs the full width of the row rather than
   tracking the name's own width. `max-width` keeps a long paragraph readable on a wide screen —
   unbroken 1400px lines are their own kind of unreadable. */
.sk-note{display:block;font-size:var(--sm-t-micro);line-height:1.55;color:var(--sm-ink-2);
         margin-top:4px;padding-left:8px;border-left:2px solid rgba(36,114,122,.45);
         white-space:pre-wrap;max-width:95ch}
.sk-note i{opacity:.8}

/* Certifications carry a long name plus validity, level and a file link. Three columns of that
   wraps names to four lines and leaves the badges ragged, so they get one row per line with the
   meta aligned in fixed columns down the list. */
.sk-list.cert-list{grid-template-columns:1fr;gap:0}
/* D311: the row is a NAME and a group of controls, not a fixed set of columns.
   It was `grid-template-columns: … auto 30px 42px` with `.sk-lv{display:contents}`, so every child
   of the level span was its own grid item and the count had to match the columns exactly. D307
   added a status badge — a fifth item — and the row came apart for real people: the Download
   button was squeezed into the 42px column and wrapped onto two lines, and the ✕ dropped onto a
   row of its own. A layout that breaks when something is added to it is the wrong layout, so the
   right-hand side is now one flex group that cannot wrap, as the course list already does. */
.cert-list .sk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:12px;padding:7px 0}
.cert-list .sk-row .sk-n{overflow-wrap:normal}
.cert-list .sk-lv{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:8px}
.cert-list .sk-lv>form{display:flex;align-items:center}
.cert-list .sk-lv .action{white-space:nowrap}
/* D296: an open request sits under its row, full width. The class was used by the skills list
   before it had any style, so it rendered as loose inline text inside the grid. */
.sk-pending{grid-column:1/-1;display:block;margin:4px 0 2px;padding:6px 12px;border-radius:var(--sm-r-control);
  font-size:var(--sm-t-micro);line-height:1.45;background:light-dark(#fdf1dd,#3d3320);color:light-dark(#8a5a00,#e8c187)}
/* D297: the way out of the re-file panel when the right catalogue entry does not exist. */
.refile-suggest{margin-top:12px}
.refile-or{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:var(--sm-t-micro);font-weight:600;color:var(--sm-ink-2)}
.refile-or::before{content:"";width:40px;border-top:1px solid var(--sm-line)}
.refile-or::after{content:"";flex:1;border-top:1px solid var(--sm-line)}
.refile-suggest-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.refile-suggest-row input{flex:1 1 260px;min-width:0;box-sizing:border-box;border:1px solid var(--sm-line-strong);
  border-radius:var(--sm-r-control);padding:8px 10px;background:light-dark(#fff,#202630);color:inherit;font:inherit;font-size:var(--sm-t-label)}
.refile-suggest-row .action{white-space:nowrap}
/* D298: staff records a Users & roles search matches that have no account. */
.no-account{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--ft-blue);background:var(--sm-action-subtle);display:grid;gap:8px}
.no-account h3{margin:0;font-size:var(--sm-t-label);font-weight:600;color:var(--sm-ink)}
.no-account-row{display:flex;gap:14px;align-items:center;padding:10px 12px;border:1px solid var(--sm-line);
  border-radius:6px;background:light-dark(#fff,#11161d)}
.no-account-row .who{flex:1;min-width:0;display:grid;gap:3px}
.no-account-row .who-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.no-account-row .who-line a{font-weight:600;font-size:var(--sm-t-label)}
.no-account-row .meta{font-size:var(--sm-t-micro);color:var(--sm-ink-3)}
.no-account-row p{margin:0;font-size:var(--sm-t-micro);line-height:1.45;color:var(--sm-ink-2)}
.no-account-row p.lead{font-weight:600;color:light-dark(#8a5a00,#e8c187)}
.no-account-row .action{white-space:nowrap;flex:0 0 auto}
.no-account .state{font-size:var(--sm-t-micro);padding:2px 8px;border-radius:var(--sm-r-pill);white-space:nowrap}
.no-account .state-ready{background:light-dark(#e3ebf2,#1e2d3a);color:light-dark(#1e476b,#8fb4d4)}
.no-account .state-no_email{background:light-dark(#fdf1dd,#3d3320);color:light-dark(#8a5a00,#e8c187)}
.no-account .state-shared,.no-account .state-in_use,.no-account .state-unknown{background:light-dark(#fbe4e2,#3d2523);color:light-dark(#b3261e,#e8a49c)}
/* D299: why a document is in front of a person, and the course ladder. */
.gate-note{display:grid;gap:3px;margin:0 0 12px;padding:9px 10px;border-left:3px solid var(--ft-blue);
  background:var(--sm-action-subtle);font-size:var(--sm-t-micro);line-height:1.45;color:var(--sm-ink-2)}
.gate-note strong{color:var(--sm-ink);font-weight:600}
.gate-note.gate-course{border-left-color:#1e6b5c;background:light-dark(#e3f3ef,#10261f)}
.gate-note.gate-experience,.gate-note.gate-unsure{border-left-color:var(--sm-cert);background:light-dark(#fdf1dd,#2a2418)}
.gate-note.gate-recheck{border-left-color:#ffa600;background:light-dark(#fdf1dd,#3d3320);color:light-dark(#8a5a00,#e8c187)}
.gate-note.gate-recheck strong{color:light-dark(#6b4500,#e8c187)}
/* `hidden` loses to any author `display` rule (.action is inline-block, .ladder is grid), so
   without this the decision a document may not take was hidden in the DOM and still on screen. */
[data-ladder][hidden]{display:none!important}
.ladder{display:grid;gap:6px}
.ladder-blocked{color:var(--sm-ink-3)}
.sk-lv b.b,.lvl-b{background:#1e6b5c;color:#fff}
.course-list{grid-template-columns:1fr;gap:0}
.course-list .sk-row{grid-template-columns:minmax(0,1fr) auto}
.course-list .sk-lv{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.course-how{font-size:var(--sm-t-micro);color:var(--sm-ink-3);white-space:nowrap}
.sk-bar-course i{background:#1e6b5c}
/* D299: pre-approvals. */
.metric-link{color:inherit;text-decoration:none}
.metric-gate{border-color:#1e6b5c}
.metric-gate small{color:light-dark(#135e58,#4fd1b5)}
.preapprovals-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.preapprovals-lede{flex:1;min-width:220px;font-size:var(--sm-t-micro);color:var(--sm-ink-2)}
.preapprovals-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pa-chip{font-size:var(--sm-t-micro);padding:3px 9px;border-radius:var(--sm-r-pill);border:1px solid var(--sm-line-strong);color:var(--sm-ink-2);text-decoration:none}
.pa-chip.on{border-color:var(--ft-blue);color:var(--sm-ink)}
.pa-chip.pa-b{border-color:#1e6b5c;color:light-dark(#135e58,#4fd1b5)}
.pa-chip.pa-c{border-color:#24467a;color:light-dark(#24467a,#6fa8ff)}
.pa-chip.pa-b.on,.pa-chip.pa-c.on{box-shadow:inset 0 0 0 1px currentColor}
.pa-sub{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-3)}
.pa-why{font-size:var(--sm-t-micro);color:var(--sm-ink-2);max-width:340px}
.pa-acts{white-space:nowrap}
.pa-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.pa-foot small{color:var(--sm-ink-3)}
/* A small status word beside a heading — "optional", "drafted from your words", "already written
   up". It existed only inside .cert-list, so every other page that reached for `class="pill"` got
   an unstyled span. Promoted to a component rather than restyled per page (D199). */
.pill{display:inline-block;font-size:var(--sm-t-micro);font-weight:700;letter-spacing:.02em;
  padding:2px 8px;border-radius:var(--sm-r-pill);white-space:nowrap;
  background:var(--sm-raised);color:var(--sm-ink-3)}
.pill.ok{background:rgba(0,201,190,.14);color:var(--sm-ok)}
.pill.warn{background:rgba(240,180,41,.13);color:#f0b429}
.cert-list .pill{justify-self:end;font-size:var(--sm-t-micro);padding:2px 8px;border-radius:var(--sm-r-pill);white-space:nowrap}
.cert-list .sk-lv b{justify-self:center}
.cert-list .sk-lv .action{justify-self:end;padding:2px 7px;font-size:var(--sm-t-micro)}
/* D317: ONE height for everything on a row. Measured on the live page, a single certification row
   held a 25px date box, a 19px pill, a 23px level select and two 21px buttons — five controls, four
   heights, no shared baseline. The row says the same things; it just lines them up now. */
.cert-list .sk-row .pill,
.cert-list .sk-lv .action,
.cert-list .sk-lv select,
.cert-list .sk-lv input[type=date]{height:var(--sm-h-compact);box-sizing:border-box;
  display:inline-flex;align-items:center;line-height:1}
.cert-list .sk-lv input[type=date]{padding:0 6px}
.cert-list .sk-lv select{padding:0 4px 0 6px}
.cert-list .sk-lv .action{padding:0 8px}
.sk-lv > form{display:inline-flex;align-items:center;margin:0}
.sk-row.edit{align-items:center;gap:14px;flex-wrap:wrap;padding:7px 0}
.sk-row.edit .sk-n{flex:1 1 260px;overflow-wrap:normal;word-break:normal}
.sk-act{flex:0 0 auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sk-act form{display:flex;gap:5px;align-items:center;margin:0}
.sk-sub{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-3);margin-top:2px}
.sk-sub b{background:#fff0dc;color:#97580e;border-radius:var(--sm-r-control);padding:1px 5px;font-size:var(--sm-t-micro)}
.sk-n a{color:inherit;text-decoration:none}
.sk-n a:hover{color:var(--ft-blue-text);text-decoration:underline}
.sk-sub .warn{color:#b07a1a} .sk-sub .bad{color:#c0392b} .sk-sub .ok{color:#144079}
.sk-act .action{padding:4px 9px;font-size:var(--sm-t-micro)}

/* Certifications and experience are managed where they are shown: level, expiry, download and
   remove all sit on the row, and upload sits with the panel it fills. */
.panel-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 11px}
.panel-actions .hint{font-size:var(--sm-t-micro);color:var(--sm-ink-3)}
.inline-exp{display:inline-flex;margin:0}
.inline-exp select,.inline-exp input[type=date]{border:1px solid var(--sm-line-strong);
  border-radius:var(--sm-r-control);padding:3px 5px;font:inherit;font-size:var(--sm-t-micro);
  background:var(--sm-raised);color:inherit}
.cert-list .sk-row{grid-template-columns:minmax(0,1fr) auto 30px 26px 26px}
.sk-lv .action{padding:2px 6px;font-size:var(--sm-t-micro);line-height:1.4}
/* A destructive action, wherever one appears. It existed only inside .sk-lv, so the Remove
   control on Users & roles came out looking exactly like Set password — the same weight for an
   irreversible action as for a recoverable one. Promoted to a component (D199). */
.action.danger{color:#c0392b;border-color:rgba(192,57,43,.4)}
.action.danger:hover{background:rgba(192,57,43,.12);color:#c0392b}
.sk-lv .action.danger{color:#c0392b;border-color:rgba(192,57,43,.4)}
.sk-lv .action.danger:hover{background:rgba(192,57,43,.12)}
.sk-lv .nofile{color:var(--sm-ink-3);text-align:center;font-size:var(--sm-t-micro);white-space:nowrap}
.sk-list:not(.cert-list) .sk-row .sk-lv{display:flex;gap:5px;align-items:center}
/* Levels are edited where they are read: the badge IS the control. */
.inline-exp select.lvl-c,.inline-exp select.lvl-e{font-weight:700;letter-spacing:.03em;
  text-align:center;border-radius:var(--sm-r-control);padding:2px 4px;font-size:var(--sm-t-micro);cursor:pointer}
.inline-exp select.lvl-c{background:#24467a;color:#fff;border-color:#24467a}
.inline-exp select.lvl-e{background:#5b6577;color:#fff;border-color:#5b6577}
.inline-exp select.lvl-c:hover,.inline-exp select.lvl-e:hover{filter:brightness(1.15)}
.cert-list .sk-row{grid-template-columns:minmax(0,1fr) auto auto auto 26px}
.add-skill{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px;
  padding-bottom:12px;border-bottom:1px solid rgba(128,140,145,.22)}
.add-skill > select[name=skill]{flex:1;min-width:200px;border:1px solid var(--sm-line-strong);
  border-radius:var(--sm-r-control);padding:7px 9px;font:inherit;font-size:var(--sm-t-label);background:var(--sm-raised);color:inherit}
.add-skill .sel-search{flex-basis:100%;order:-1;margin-bottom:0}
/* Adding sits behind a disclosure so the panel reads as a list, not a form. */
.add-wrap{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid rgba(128,140,145,.22)}
.add-wrap > summary{cursor:pointer;list-style:none;font-size:var(--sm-t-micro);font-weight:650;color:var(--ft-blue-text);
  padding:3px 0;display:inline-block}
.add-wrap > summary::-webkit-details-marker{display:none}
.add-wrap > summary:hover{text-decoration:underline}
.add-wrap[open] > summary{margin-bottom:9px}
.add-skill{border-bottom:0;padding-bottom:0;margin-bottom:0}
.nav-count{display:inline-block;min-width:16px;padding:1px 5px;border-radius:var(--sm-r-pill);font-size:var(--sm-t-micro);
  font-weight:750;background:#d48a2c;color:#25190a;text-align:center;margin-left:4px}
.sk-row.pending{opacity:.75}
.sk-row.pending .sk-n::after{content:" · awaiting review";font-size:var(--sm-t-micro);color:#b07a1a;font-weight:650}

/* The assistant is a chat: one column of messages, composer beneath, newest at the bottom. */
.chat{display:flex;flex-direction:column;height:calc(100vh - 168px);min-height:420px}
.chat-log{flex:1;overflow-y:auto;padding:12px 2px 14px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;flex-direction:column;max-width:min(80ch,92%)}
.msg.you{align-self:flex-end;align-items:flex-end}
.msg.bot{align-self:flex-start}
.bubble{font-size:var(--sm-t-label);line-height:1.6;border-radius:var(--sm-r-sheet);padding:11px 15px}
.msg.you .bubble{background:var(--ft-blue);color:#fff;border-bottom-right-radius:5px;font-weight:500}
.msg.bot .bubble{background:var(--sm-surface);border:1px solid var(--sm-line);
  border-bottom-left-radius:5px;white-space:pre-wrap}
.bubble.err{border-left:3px solid #d48a2c}

.chat-empty{margin:auto 0;text-align:center;padding:26px 10px;color:var(--sm-ink-2)}
.chat-empty h3{margin:0 0 8px;font-size:var(--sm-t-section);color:inherit}
.chat-empty p{margin:0 auto 18px;max-width:62ch;font-size:var(--sm-t-label);line-height:1.6}
.chat-examples{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ex-chip{font:inherit;font-size:var(--sm-t-micro);cursor:pointer;border-radius:var(--sm-r-pill);padding:6px 13px;
  border:1px solid var(--sm-line-strong);background:var(--sm-raised);color:inherit}
.ex-chip:hover{border-color:var(--ft-blue);color:var(--ft-blue-text)}

.composer{display:flex;gap:8px;align-items:flex-end;padding-top:12px;
  border-top:1px solid var(--sm-line)}
.composer textarea{flex:1;resize:none;font:inherit;font-size:var(--sm-t-label);line-height:1.5;
  border:1px solid var(--sm-line-strong);border-radius:var(--sm-r-card);padding:10px 13px;
  background:var(--sm-raised);color:inherit;max-height:160px}
.composer textarea:focus{outline:2px solid var(--ft-blue);outline-offset:-1px}
.voice-input-button{gap:6px;white-space:nowrap}
.voice-input-button.listening{border-color:var(--ft-blue);background:var(--sm-action-subtle);
  color:var(--sm-action-text)}
.dictation-status{margin:7px 0 0;font-size:var(--sm-t-micro);color:var(--sm-ink-2);text-align:right}
.dictation-status.is-error{color:var(--sm-danger)}
.chat-foot{margin:7px 0 0;font-size:var(--sm-t-micro);color:var(--sm-ink-3);text-align:center}

@media(max-width:560px){
  .composer{align-items:stretch;flex-wrap:wrap}
  .composer textarea{flex-basis:100%;width:100%}
  .composer .action{flex:1}
  .dictation-status{text-align:left}
}

/* The evidence behind an answer: there for trust, folded away so it never dominates. */
.evidence{margin-top:7px;font-size:var(--sm-t-micro)}
.evidence > summary{cursor:pointer;color:var(--sm-ink-2);padding:3px 0}
.evidence > summary:hover{color:var(--ft-blue-text)}
.evidence-note{margin:5px 0 8px;color:var(--sm-ink-2);font-size:var(--sm-t-micro)}
.evidence-scroll{overflow:auto;max-height:320px;border:1px solid var(--sm-line);border-radius:var(--sm-r-card)}
.evidence table{width:100%;border-collapse:collapse;font-size:var(--sm-t-micro)}
.evidence th{text-align:left;padding:7px 9px;background:var(--sm-raised);
  color:var(--sm-ink-2);position:sticky;top:0}
.evidence td{padding:7px 9px;border-top:1px solid var(--sm-raised);vertical-align:top}
/* Rendered answer prose inside a chat bubble. */
.msg.bot .bubble{white-space:normal}
.msg.bot .bubble p{margin:0 0 9px}
.msg.bot .bubble p:last-child{margin-bottom:0}
.msg.bot .bubble ul{margin:0 0 9px;padding-left:19px}
.msg.bot .bubble li{margin:0 0 4px}
.msg.bot .bubble strong{font-weight:700;color:var(--sm-action-text)}
/* Suggested next questions: Tab takes the first, a click takes any of them. */
.suggests{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 10px}
.sug{font:inherit;font-size:var(--sm-t-micro);cursor:pointer;border-radius:var(--sm-r-pill);padding:5px 12px;text-align:left;
  border:1px dashed var(--sm-line-strong);background:none;color:var(--sm-action-text)}
.sug:hover{border-style:solid;border-color:var(--ft-blue);color:var(--ft-blue-text)}
.chat-foot kbd{font:inherit;font-size:var(--sm-t-micro);border:1px solid var(--sm-line-strong);
  border-bottom-width:2px;border-radius:var(--sm-r-control);padding:0 4px;background:var(--sm-raised)}

/* Record-edit form grid — shared by the person edit screen and the RFP bid record (D75). */
.pf-form label{display:block;margin-bottom:12px}
.pf-form .lbl{font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.07em;color:#8a909b;
  font-weight:750;margin-bottom:4px;display:block}
.pf-form input,.pf-form select,.pf-form textarea{width:100%;box-sizing:border-box;
  border:1px solid var(--sm-line-strong);border-radius:var(--sm-r-control);padding:8px;
  background:var(--sm-raised);color:inherit;font:inherit;font-size:var(--sm-t-label)}
.pf-form textarea{resize:vertical}
/* D186: `gap:0 14px` set NO row gap, so with cells of unequal height — a searchable picker is a
   search box AND a select, its neighbour is one select — the rows ran into each other and nothing
   lined up. A row gap plus `align-items:start` makes each field size to its own content and start
   on the same line as the field beside it. */
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.pf-grid > div{min-width:0;display:grid;gap:4px;align-content:start}
.pf-grid label{display:block}
.pf-grid > label.wide{grid-column:1 / -1}
.pf-form .hint{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-3);margin-top:3px}
@media (max-width:760px){ .pf-grid{grid-template-columns:1fr} }
/* The bid record, read-only view (D75). */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px 16px}
.rec-grid > div{min-width:0}
.rec-grid span{display:block;font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.07em;
  color:#8a909b;font-weight:750;margin-bottom:2px}
.rec-grid b{font-size:var(--sm-t-label);font-weight:600;overflow-wrap:anywhere}
.rec-long{margin-top:13px;padding-top:11px;border-top:1px solid rgba(128,140,145,.22)}
.rec-long span{display:block;font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.07em;
  color:#8a909b;font-weight:750;margin-bottom:3px}
.rec-long p{margin:0;font-size:var(--sm-t-label);line-height:1.6;white-space:pre-wrap}
/* The assistant pinned to one bid (D75). */
.focus-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px;
  padding:8px 12px;border-radius:var(--sm-r-card);font-size:var(--sm-t-micro);
  background:var(--sm-raised);border:1px solid var(--sm-line-strong)}
.focus-bar > span{font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.07em;color:#8a909b;font-weight:750}
.focus-bar a{color:inherit;text-decoration:none;flex:1;min-width:0}
.focus-bar a:hover b{text-decoration:underline}
/* Registering an RFP calls the AI and takes tens of seconds — say so, and stop a second submit. */
.rfp-working{display:inline-flex;align-items:center;gap:8px;margin-left:10px;font-size:var(--sm-t-micro);
  color:var(--sm-ink-2)}
.spin{width:12px;height:12px;border-radius:50%;flex:0 0 12px;
  border:2px solid var(--sm-line-strong);border-top-color:var(--ft-blue);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation:none;border-top-color:var(--ft-blue)} }
/* The renewal backlog: stated, not plotted — it is already past, and it dwarfs the timeline. */
.overdue-strip{display:flex;align-items:center;gap:10px;margin:0 0 11px;padding:8px 12px;
  border-radius:var(--sm-r-card);text-decoration:none;color:inherit;
  background:var(--sm-danger-dim);border:1px solid var(--sm-danger-dim)}
.overdue-strip b{font-size:var(--sm-t-title);line-height:1;color:#c0563a;font-variant-numeric:tabular-nums}
.overdue-strip span{font-size:var(--sm-t-micro);line-height:1.4;color:var(--sm-danger)}
.overdue-strip:hover{border-color:#c0563a}

/* Response review (D82). Advisory throughout — the styling should not imply certainty. */
.rev-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.rev-counts > div{border-radius:var(--sm-r-card);padding:9px 11px;background:var(--sm-raised);
  border:1px solid var(--sm-line)}
.rev-counts b{display:block;font-size:var(--sm-t-title);line-height:1;font-variant-numeric:tabular-nums}
.rev-counts span{display:block;font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.06em;
  color:#8a909b;margin-top:4px}
.rev-counts .met b{color:#144079} .rev-counts .part b{color:#b07a1a} .rev-counts .miss b{color:#c0392b}
.rev-h{font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.07em;color:#8a909b;
  margin:16px 0 8px;font-weight:750}

.risk{display:flex;gap:10px;padding:9px 0;border-top:1px solid rgba(128,140,145,.2)}
.risk .sev{flex:0 0 54px;height:fit-content;text-align:center;font-size:var(--sm-t-micro);font-weight:750;
  text-transform:uppercase;letter-spacing:.05em;border-radius:var(--sm-r-control);padding:3px 5px}
.risk.high .sev{background:#fde3e3;color:#c0392b}
.risk.medium .sev{background:#fff0dc;color:#97580e}
.risk.low .sev{background:#eef0f3;color:#666d7a}
.risk b{font-size:var(--sm-t-label)} .risk p{margin:2px 0 0;font-size:var(--sm-t-micro);line-height:1.55;color:var(--sm-ink-2)}

.finding{display:flex;gap:10px;padding:9px 0;border-top:1px solid rgba(128,140,145,.2)}
.finding .verdict{flex:0 0 74px;height:fit-content;text-align:center;font-size:var(--sm-t-micro);font-weight:750;
  border-radius:var(--sm-r-control);padding:3px 5px}
.finding.met .verdict{background:#e5ecf4;color:#144079}
.finding.partial .verdict{background:#fff0dc;color:#97580e}
.finding.missing .verdict{background:#fde3e3;color:#c0392b}
.finding b{font-size:var(--sm-t-label);font-weight:650}
.finding .cmt{margin:2px 0 0;font-size:var(--sm-t-micro);line-height:1.5;color:var(--sm-ink-2)}
.finding .ev{margin:4px 0 0;font-size:var(--sm-t-micro);line-height:1.5;font-style:italic;
  padding-left:9px;border-left:2px solid rgba(36,114,122,.45);color:var(--sm-ink-2)}

/* Response options (D84). A bid submitted as two priced options is two answers to one tender, so
   they sit side by side and are never merged. One unlabelled response uses the same markup with a
   single group, which is why nothing here shows an option name unless there is more than one. */
.opt-compare{width:100%;border-collapse:collapse;margin:11px 0 4px;font-size:var(--sm-t-micro)}
.opt-compare th{text-align:right;font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.06em;
  color:#8a909b;font-weight:750;padding:0 0 5px;border-bottom:1px solid rgba(128,140,145,.25)}
.opt-compare th:first-child{text-align:left}
.opt-compare td{padding:6px 0;border-bottom:1px solid rgba(128,140,145,.15)}
.opt-compare td.n{text-align:right;font-variant-numeric:tabular-nums;width:64px}
.opt-compare td.met{color:#144079} .opt-compare td.part{color:#b07a1a} .opt-compare td.miss{color:#c0392b}
.opt-group + .opt-group{margin-top:14px;padding-top:4px;border-top:1px dashed rgba(128,140,145,.3)}
.opt-doc{display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-top:1px solid var(--sm-line);padding:7px 0;font-size:var(--sm-t-micro);flex-wrap:wrap}
.opt-input{font:inherit;font-size:var(--sm-t-micro);width:120px;padding:3px 6px;border-radius:var(--sm-r-control);
  border:1px solid var(--sm-line-strong);background:var(--sm-surface);color:inherit}
.resp-upload{margin-top:10px;display:grid;gap:7px}
.resp-upload input{font:inherit;font-size:var(--sm-t-micro)}
.resp-upload input[type=text]{padding:5px 8px;border-radius:var(--sm-r-control);
  border:1px solid var(--sm-line-strong);background:var(--sm-surface);color:inherit}

/* Adoption and data completeness (ADOPT-01). Seven facts per person, shown as facts rather than
   rolled into a score — a weighted "completeness" number would invent a judgement about which
   gap matters, and that judgement belongs to the reader. */
.ad-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.ad-stat{display:block;text-decoration:none;color:inherit;border-radius:var(--sm-r-card);padding:11px 12px;
  border:1px solid var(--sm-line);background:var(--sm-raised)}
.ad-stat:hover{border-color:var(--ft-blue)}
.ad-stat span{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-3);line-height:1.35}
.ad-stat strong{display:block;font-size:var(--sm-t-title);line-height:1;margin:7px 0 5px;letter-spacing:-.03em}
.ad-stat small{font-size:var(--sm-t-micro);color:var(--ft-blue-text)}

.ad-table{width:100%;border-collapse:collapse;font-size:var(--sm-t-micro)}
.ad-table th{padding:8px 10px;text-align:right;white-space:nowrap;font-size:var(--sm-t-micro);font-weight:750;
  text-transform:uppercase;letter-spacing:.05em;background:var(--sm-raised);
  color:var(--sm-ink-2)}
.ad-table td{padding:8px 10px;text-align:right;border-top:1px solid var(--sm-raised);
  white-space:nowrap}
.ad-table td small{color:var(--sm-ink-3);font-size:var(--sm-t-micro)}
.ad-table tbody tr:hover{background:var(--sm-raised)}
.ad-people td{white-space:normal}

.ad-badge{display:inline-block;margin:1px 3px 1px 0;padding:2px 6px;border-radius:var(--sm-r-control);font-size:var(--sm-t-micro);
  font-weight:700;background:var(--sm-raised);color:var(--sm-ink-2)}
.ad-badge.bad{background:#fde3e3;color:#c0392b}
.ad-badge.ok{background:#e5ecf4;color:#144079}
/* D478 (Figma 181:636): the People table's gaps — one quiet chip per gap, a count in front. */
.ad-miss{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ad-miss b{font-weight:650;color:var(--sm-ink);white-space:nowrap}
.ad-dot{color:var(--sm-ink-3)}
.ad-chip{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--sm-line-strong);
  background:light-dark(#f2f4f7,#1f252d);color:var(--sm-ink-2);font-size:var(--sm-t-micro);white-space:nowrap;cursor:help}
.ad-complete{color:light-dark(#1d7a3e,#74cc8c);font-weight:650;white-space:nowrap}

/* Company document repository (BID-01). States are computed, never stored — the colour only
   reflects what companydocs.py decided, so the page and the assistant cannot disagree. */
.cd-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.cd-matrix{width:100%;border-collapse:collapse;font-size:var(--sm-t-micro)}
.cd-matrix th{text-align:left;vertical-align:top;padding:9px 12px 9px 0;white-space:nowrap;
  border-top:1px solid var(--sm-raised);font-weight:700}
.cd-matrix th small{display:block;font-weight:400;color:#8a909b;font-size:var(--sm-t-micro);margin-top:2px}
.cd-matrix td{padding:9px 0;border-top:1px solid var(--sm-raised)}
.cd-cell{display:inline-block;margin:2px 5px 2px 0;padding:3px 8px;border-radius:var(--sm-r-control);font-size:var(--sm-t-micro);
  background:var(--sm-raised);color:var(--sm-ink-2)}
.cd-cell b{font-weight:750;margin-left:4px}
.cd-cell.ready{background:#e5ecf4;color:#144079}
.cd-cell.expiring,.cd-cell.awaiting,.cd-cell.expiry_missing{background:#fff0dc;color:#97580e}
.cd-cell.missing,.cd-cell.expired,.cd-cell.rejected{background:#fde3e3;color:#c0392b}

.cd-table{width:100%;border-collapse:collapse;font-size:var(--sm-t-micro)}
.cd-table th{text-align:left;padding:8px 10px;white-space:nowrap;font-size:var(--sm-t-micro);font-weight:750;
  text-transform:uppercase;letter-spacing:.05em;background:var(--sm-raised);
  color:var(--sm-ink-2)}
.cd-table td{padding:8px 10px;border-top:1px solid var(--sm-raised);vertical-align:top}
.cd-table td small{display:block;color:#8a909b;font-size:var(--sm-t-micro);margin-top:2px}
.cd-table tr.cd-old{opacity:.62}
.cd-badge{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:var(--sm-r-control);font-size:var(--sm-t-micro);
  font-weight:750;background:var(--sm-raised);color:var(--sm-ink-2)}
.cd-state{display:inline-block;padding:2px 7px;border-radius:var(--sm-r-control);font-size:var(--sm-t-micro);font-weight:750;
  white-space:nowrap;background:var(--sm-raised);color:var(--sm-ink-2)}
.cd-state.ready{background:#e5ecf4;color:#144079}
.cd-state.expiring,.cd-state.awaiting,.cd-state.expiry_missing{background:#fff0dc;color:#97580e}
.cd-state.expired,.cd-state.rejected,.cd-state.missing{background:#fde3e3;color:#c0392b}
.cd-actions{white-space:nowrap}
.cd-actions form{display:inline}
.cd-edit{display:inline-block;position:relative}
.cd-edit[open] > form{display:grid;gap:6px;position:absolute;z-index:5;right:0;width:260px;
  padding:12px;border-radius:var(--sm-r-card);border:1px solid var(--sm-line);
  background:var(--sm-surface);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.cd-edit label,.cd-upload label{display:block;font-size:var(--sm-t-micro);text-transform:uppercase;
  letter-spacing:.06em;color:var(--sm-ink-3);font-weight:750}
.cd-edit input,.cd-edit textarea,.cd-upload input,.cd-upload select{width:100%;font:inherit;
  font-size:var(--sm-t-label);margin-top:3px;padding:6px 8px;border-radius:var(--sm-r-control);text-transform:none;
  letter-spacing:0;color:inherit;background:var(--sm-raised);
  border:1px solid var(--sm-line-strong)}
.cd-upload{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--sm-line)}

/* Structured tender requirements (BID-02). The review state is the most important thing on the
   row — an extracted requirement is a claim about the tender until a person checks it. */
/* D250: the way forward has five counters, not four — "with nobody answerable" and "with no
   date" are the difference between a plan and a list. auto-fit so a panel with four keeps the
   four-across it has always had. */
.req-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:9px;margin:12px 0}
.req-counts > div{border-radius:var(--sm-r-card);padding:9px 11px;background:var(--sm-raised);
  border:1px solid var(--sm-line)}
.req-counts b{display:block;font-size:var(--sm-t-title);line-height:1;font-variant-numeric:tabular-nums}
.req-counts span{display:block;font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.06em;
  color:#8a909b;margin-top:4px}
.req-list{margin-top:6px}
.req{padding:11px 0;border-top:1px solid var(--sm-raised)}
.req.rejected{opacity:.55}
.req.unreviewed{border-left:3px solid #d48a2c;padding-left:9px}
.req.confirmed,.req.corrected{border-left:3px solid #144079;padding-left:9px}
.req-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.req-n{font-size:var(--sm-t-micro);font-weight:750;color:#8a909b;min-width:18px}
.req-head b{font-size:var(--sm-t-label)}
.req-tags{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.req-tag{padding:1px 6px;border-radius:var(--sm-r-control);font-size:var(--sm-t-micro);font-weight:750;text-transform:uppercase;
  letter-spacing:.04em;background:var(--sm-raised);color:var(--sm-ink-2)}
.req-tag.mandatory{background:#fde3e3;color:#c0392b}
.req-tag.desirable{background:#fff0dc;color:#97580e}
/* RFP detail: the page is ordered as the work is ordered, so the steps need to read as steps. */
/* RESP-01: pick-lists for assigning requirements and contributions to a workstream. */
/* D186: this was a 190px scrolling box holding 32 requirements — a scrollbar inside a page that
   already scrolls, showing six items at a time. It is now a full-width multi-column list that
   grows with its content; the page scrolls, the widget does not. The cap is high enough that a
   normal tender never reaches it and only a pathological one scrolls. */
.ws-picklist{max-height:min(60vh,560px);overflow-y:auto;border:1px solid var(--sm-line);
  border-radius:var(--sm-r-card);padding:10px 12px;margin:5px 0 8px;display:grid;gap:6px 20px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.ws-picklist label{display:flex;gap:7px;align-items:flex-start;font-size:var(--sm-t-label);text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer}
.ws-picklist input{width:auto;margin:2px 0 0}
h2.sec{font-size:var(--sm-t-label);font-weight:750;letter-spacing:.02em;text-transform:uppercase;
  color:var(--sm-ink-2);margin:26px 0 11px;padding-bottom:7px;
  border-bottom:1px solid var(--sm-line);display:flex;align-items:baseline;gap:10px}
h2.sec:first-of-type{margin-top:18px}
h2.sec small{font-size:var(--sm-t-micro);font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--sm-ink-3)}
/* "Do this next" - the open plan actions, surfaced at the top of the page. */
ol.next-list{margin:0;padding-left:20px;display:grid;gap:9px}
ol.next-list li{font-size:var(--sm-t-label);line-height:1.45}
.next-t{display:block;font-weight:600}
.next-m{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-3);margin-top:2px}
/* A 40-row list is unreadable open by default; the count stays visible either way. */
details.long-list>summary{font-size:var(--sm-t-micro);font-weight:650;cursor:pointer;padding:8px 0;
  color:var(--ft-blue-text)}
details.long-list[open]>summary{margin-bottom:6px}
summary.action::-webkit-details-marker{display:none}
summary.action{list-style:none}
summary.sec-more{font-size:var(--sm-t-micro);font-weight:650;cursor:pointer;color:var(--ft-blue-text);padding:6px 0}
.pc-doc{font-size:var(--sm-t-label);margin:4px 0 0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pc-doc a{color:#3c5173;text-decoration:none;font-weight:600}
.pc-doc a:hover{text-decoration:underline}
.pc-doc small{color:#8a909b;font-weight:400}
.linkish{background:none;border:0;padding:0;font-size:var(--sm-t-micro);color:#9b2c22;cursor:pointer;text-decoration:underline}
.req-tag.exclusion{background:#ecebe8;color:#5a5750}
.req-tag.state{background:#e9edf2;color:#3c5173}
.req-tag.warn{background:#fff0dc;color:#97580e}
.req-text{margin:5px 0 0 26px;font-size:var(--sm-t-label);line-height:1.55}
.req-src{margin:5px 0 0 26px;font-size:var(--sm-t-micro);line-height:1.5;font-style:italic;padding-left:9px;
  border-left:2px solid rgba(36,114,122,.4);color:var(--sm-ink-2)}
.req-src small{display:block;font-style:normal;color:#8a909b;margin-top:2px}
.req .hint{margin:4px 0 0 26px}
.req-actions{display:flex;gap:5px;margin:7px 0 0 26px;flex-wrap:wrap;align-items:flex-start}
.req-actions form{display:inline}
.req-edit{position:relative;display:inline-block}
.req-edit[open] > form{display:grid;gap:6px;position:absolute;z-index:6;left:0;width:320px;
  padding:12px;border-radius:var(--sm-r-card);border:1px solid var(--sm-line);
  background:var(--sm-surface);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.req-edit label{display:block;font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--sm-ink-3);font-weight:750}
.req-edit input,.req-edit textarea,.req-edit select{width:100%;font:inherit;font-size:var(--sm-t-label);
  margin-top:3px;padding:6px 8px;border-radius:var(--sm-r-control);text-transform:none;letter-spacing:0;
  color:inherit;background:var(--sm-raised);border:1px solid var(--sm-line-strong)}
.req-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--sm-line)}
/* RESP-03: the response control room. One surface for one option, read in the order the work
   happens — so the journey has to look like a journey, and a drafted section has to look like
   prose somebody will send rather than another row in a table. */
ol.cr-journey{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none}
ol.cr-journey li{display:flex;align-items:center;gap:6px;font-size:var(--sm-t-micro);font-weight:650;
  padding:5px 9px;border-radius:var(--sm-r-pill);background:var(--sm-raised);
  color:var(--sm-ink-3)}
ol.cr-journey li span{display:inline-flex;align-items:center;justify-content:center;width:15px;
  height:15px;border-radius:50%;font-size:var(--sm-t-micro);background:var(--sm-line-strong);
  color:var(--sm-ink-2)}
ol.cr-journey li.done{background:#e9edf2;color:#3c5173}
ol.cr-journey li.done span{background:#3c5173;color:#fff}
ol.cr-journey li.now{background:var(--ft-blue);color:#fff}
ol.cr-journey li.now span{background:rgba(255,255,255,.28);color:#fff}
.cr-section{border-top:1px solid var(--sm-line);padding:12px 0}
.cr-section:first-child{border-top:0}
.cr-section-head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.cr-section-head b{font-size:var(--sm-t-label)}
.cr-req{margin:5px 0 0;color:var(--sm-ink-3);line-height:1.5}
.cr-text{margin:7px 0 0;font-size:var(--sm-t-label);line-height:1.6;white-space:normal}
.cr-src{margin:6px 0 0;padding-left:9px;line-height:1.5;
  border-left:2px solid rgba(36,114,122,.4);color:var(--sm-ink-2)}
.cr-cmp td.cr-diff{background:var(--sm-cert-dim)}
@media (max-width:720px){
  ol.cr-journey li{font-size:var(--sm-t-micro);padding:4px 7px}
  .cr-section-head{gap:5px}
}
/* RESP-03A: an overview first, an administration screen only when asked. The bid page had grown a
   five-button action bar and seven sections of live forms; record administration now sits behind
   one disclosure, and the destructive action is kept apart from it rather than beside Edit. */
details.more-actions{position:relative;display:inline-block}
details.more-actions>summary{list-style:none;cursor:pointer;padding:7px 12px;border-radius:var(--sm-r-card);
  font-size:var(--sm-t-label);font-weight:600;border:1px solid var(--sm-line-strong);
  background:var(--sm-raised);color:inherit}
details.more-actions>summary::-webkit-details-marker{display:none}
details.more-actions>summary:focus-visible{outline:2px solid var(--ft-blue);outline-offset:2px}
details.more-actions[open]>summary{border-color:var(--ft-blue)}
/* D205: FIXED, not absolute. An absolutely-positioned menu is clipped by any scrolling ancestor,
   and every wide table on this site sits in an `overflow:auto` wrapper — so on the users screen
   the menu was sliced off at the table edge and the buttons inside it could not be reached. Fixed
   positioning escapes the wrapper; `positionMoreMenu` in base.html sets top/left on open, because
   fixed coordinates cannot be expressed relative to the button in CSS alone. Without script the
   menu still opens, at the foot of the viewport, which is reachable rather than clipped. */
details.more-actions[open]>.more-menu{display:grid;gap:6px;position:fixed;z-index:60;
  min-width:250px;max-width:min(340px,calc(100vw - 24px));padding:10px;border-radius:var(--sm-r-card);
  border:1px solid var(--sm-line);background:var(--sm-surface);
  box-shadow:0 14px 34px rgba(0,0,0,.3);text-align:left}
.more-menu form{display:block}
.more-menu .action,.more-menu button{width:100%;text-align:left}
.more-menu hr{border:0;border-top:1px solid var(--sm-line);margin:3px 0}
.more-menu .danger{color:#c0392b}

/* D220 — the profile's one door. Full width, directly under the identity band, so the first thing
   after "who is this" is "put something in". Deliberately the only loud control on the page: the
   nine that were competing with it are still there, quietly, for somebody typing rather than
   uploading. */
.pf-door{background:rgba(0,201,190,.09);border:1px solid rgba(0,201,190,.22);
  border-radius:var(--sm-r-card);padding:20px 22px;margin:0 0 14px}
.pf-door-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pf-door-top>div{flex:1;min-width:260px}
.pf-door h2{margin:0 0 5px;font-size:var(--sm-t-title);color:var(--sm-ink-1)}
.pf-door p{margin:0;font-size:var(--sm-t-label);color:var(--sm-ink-2);line-height:1.6;max-width:86ch}
.pf-door-go{font-size:var(--sm-t-body);padding:12px 24px;white-space:nowrap}
.pf-door-outs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.pf-door-outs>div{background:var(--sm-panel);border-radius:var(--sm-r-control);padding:10px 13px;min-width:0}
.pf-door-outs strong{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-1);margin-bottom:2px}
.pf-door-outs span{font-size:var(--sm-t-micro);color:var(--sm-ink-3);overflow-wrap:anywhere}
@media(max-width:900px){.pf-door-outs{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pf-door-outs{grid-template-columns:1fr}}

/* The one sentence that replaced a five-row checklist. It names what is missing AND why it
   matters — "usable on a bid" is the reason to bother; a score is not. */
.pf-next{font-size:var(--sm-t-label);color:var(--sm-ink-2);line-height:1.6;margin:0 0 14px;max-width:96ch}
.pf-next a{color:var(--sm-action-text)}

/* A summary card: what a section amounts to, with one way in to the detail. */
.sum-line{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:var(--sm-t-label);
  line-height:1.6;margin:0}
.sum-line b{font-size:var(--sm-t-body)}
.sum-line .sep{color:var(--sm-ink-3)}
/* The control room's stage panels: the one in hand is open, the rest are one line each. */
.cr-stage-done>summary,.cr-stage-todo>summary{font-size:var(--sm-t-label);font-weight:650;cursor:pointer;
  padding:9px 0;color:var(--sm-ink-2);display:flex;gap:8px;align-items:baseline}
.cr-stage-done>summary::marker,.cr-stage-todo>summary::marker{color:var(--ft-blue-text)}
.cr-stage-done>summary:focus-visible,.cr-stage-todo>summary:focus-visible{outline:2px solid
  var(--ft-blue);outline-offset:2px}
.cr-stage-tag{font-size:var(--sm-t-micro);font-weight:750;text-transform:uppercase;letter-spacing:.04em;
  padding:1px 6px;border-radius:var(--sm-r-control);background:var(--sm-raised);
  color:var(--sm-ink-2)}
.cr-primary{margin:10px 0 0;padding:12px 14px;border-radius:var(--sm-r-card);
  border:1px solid rgba(36,114,122,.35);background:var(--sm-action-subtle)}
.cr-primary b{display:block;font-size:var(--sm-t-body);margin-bottom:3px}
.cr-primary p{margin:0 0 9px;font-size:var(--sm-t-label);line-height:1.55;
  color:var(--sm-ink-2)}
.cr-count{font-size:var(--sm-t-label);line-height:1.7;margin:0}
.cr-sec-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
/* A column that holds only a link needs a heading a screen reader can announce, without putting a
   redundant word on screen for everyone else. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Keyboard focus must be visible on every control, including the ones drawn as links. */
.action:focus-visible,summary:focus-visible,.metric:focus-visible{outline:2px solid var(--ft-blue);
  outline-offset:2px}
/* Emphasis inside a panel, without competing with the page's single primary next action. */
.action.strong{border-color:var(--ft-blue);color:#1c4e8f;font-weight:650}
.action.strong:hover{background:var(--sm-action-subtle)}
.action.danger{color:#c0392b}


/* NAV-01 — local navigation inside a business-area hub. Uses the existing tokens; it is a row of
   quiet links, not a second sidebar. It WRAPS on a narrow screen rather than scrolling sideways,
   so no destination is ever hidden off the edge. */
.hubnav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0 0 10px;
  border-bottom:1px solid var(--sm-raised)}
/* The help bubble is a sibling of the link, so it needs a positioned wrapper of its own. */
.hubnav-item{position:relative;display:inline-flex;min-width:0}
.hubnav a{font-size:var(--sm-t-label);padding:6px 11px;border-radius:var(--sm-r-card);text-decoration:none;
  color:var(--sm-ink-2);background:var(--sm-raised);
  border:1px solid transparent;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px}
/* Same idea as the sidebar's own icons: fixed column, quiet, never replacing the word. */
.hubnav a i{font-style:normal;font-size:var(--sm-t-micro);line-height:1;width:13px;text-align:center;opacity:.72}
.hubnav a:hover{background:var(--sm-raised)}
.hubnav a:hover i{opacity:.95}
.hubnav a.on{background:var(--sm-action-subtle);color:var(--sm-action-text);
  border-color:var(--sm-action-subtle);font-weight:600}
.hubnav a.on i{opacity:1}
.hubnav a .nav-count{margin-left:1px}
.hubnav a:focus-visible{outline:2px solid #467bc2;outline-offset:2px}
/* Shows on hover and on keyboard focus. The link is the only tab stop; the bubble adds none. */
.hubnav-item:hover .info-pop,.hubnav-item:focus-within .info-pop{display:block}

/* ---- Capability cards (UI-02) ------------------------------------------------------------------
   A hub index: every destination the same size, three across, so the eye compares them rather
   than ranking them by how much text each happens to carry. `grid-auto-rows:1fr` is what makes
   the second row match the first — without it only cards sharing a row are equal.

   The category sits at the FOOT of the card, not above its title. Above, it would be an
   all-caps eyebrow over every heading, which is decoration; below a hairline it reads as what
   it is — the classification the old section headings used to carry. `margin-top:auto` pushes
   it down, so the categories line up along one baseline across a row whatever the description
   length. That alignment is what makes the grid look settled. */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:12px}
.cap-card{display:flex;flex-direction:column;gap:6px;padding:14px 15px;min-width:0;
  border:1px solid var(--sm-line);background:var(--sm-surface);
  border-radius:var(--sm-r-card);text-decoration:none;color:inherit}
.cap-head{display:flex;align-items:center;gap:9px;min-width:0}
.cap-head i{font-style:normal;font-size:var(--sm-t-body);line-height:1;width:17px;text-align:center;
  flex:none;opacity:.75;color:var(--ft-blue-text)}
.cap-head strong{font-size:var(--sm-t-label);font-weight:700;overflow-wrap:anywhere}
.cap-why{font-size:var(--sm-t-micro);line-height:1.55;color:var(--sm-ink-2);overflow-wrap:anywhere}
.cap-cat{margin-top:auto;padding-top:9px;font-size:var(--sm-t-micro);
  border-top:1px solid var(--sm-line);color:var(--sm-ink-3)}
.cap-card:hover{border-color:var(--sm-action-subtle);background:var(--sm-action-subtle)}
.cap-card:hover .cap-head i{opacity:1}
.cap-card:hover .cap-head strong{color:var(--sm-action-text)}
.cap-card:focus-visible{outline:2px solid #467bc2;outline-offset:2px}
/* Secondary means quieter, NOT smaller: an exceptional one-off still has to be findable, so it
   keeps the exact dimensions of every other card and gives up only emphasis. */
.cap-card.secondary{background:transparent;border-style:dashed}
.cap-card.secondary .cap-head i{color:var(--sm-ink-3)}
/* Two across once three would be cramped beside the sidebar, one across on a phone. The rows
   stay 1fr at every width by sponsor decision (2026-09-08): a stack of identical cards reads as
   deliberate, and that was preferred to saving a little height on short ones. Note this means the
   single column inherits the tallest card's height throughout. */
@media (max-width:1000px){ .cap-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cap-grid{grid-template-columns:1fr} }

/* Renumbering a company (ORG-01). The internal company code stays compact beside its action. */
.org-code{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.org-code input[name="code"]{width:74px}
.org-flash{grid-column:1/-1;margin:0 0 12px;padding:10px 12px;border-radius:var(--sm-r-card);font-size:var(--sm-t-label);
  line-height:1.5;border:1px solid var(--sm-cert-dim);
  background:var(--sm-cert-dim);color:var(--sm-cert)}

/* ---- Document intake (DOC-INGEST-01) -----------------------------------------------------------
   An inventory screen, not a dashboard: the operator is checking that everything they selected is
   accounted for, so the counts and the manifest table carry the page and nothing else competes. */
.intake-counts{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));margin-bottom:10px}
.intake-reconcile{margin:0 0 16px;font-size:var(--sm-t-micro);line-height:1.6;
  color:var(--sm-ink-2);max-width:78ch}
.intake-done{border-left-color:var(--ft-blue)}
.intake-panel{padding:0}
.intake-panel .panel-head{padding:15px 15px 0}
.intake-filter{display:flex;gap:8px;flex-wrap:wrap;padding:12px 15px}
.intake-filter input[name="q"]{min-width:280px;flex:1}
.intake-scroll{overflow-x:auto}
.intake-table{width:100%;border-collapse:collapse;font-size:var(--sm-t-micro)}
.intake-table th{text-align:left;padding:8px 12px;font-size:var(--sm-t-micro);text-transform:uppercase;
  letter-spacing:.06em;color:var(--sm-ink-3)}
.intake-table td{padding:8px 12px;border-top:1px solid var(--sm-line);
  vertical-align:top}
.intake-table td.num,.intake-table th.num{text-align:right;white-space:nowrap}
.intake-table td.muted{color:var(--sm-ink-3)}
.intake-table td.right{text-align:right}
.intake-table small{color:var(--sm-ink-3);overflow-wrap:anywhere}
.intake-pager{display:flex;gap:8px;align-items:center;padding:12px 15px;font-size:var(--sm-t-micro)}
/* The folder chooser is the primary action on the page; keep it readable rather than wide. */
.intake-start{max-width:980px;margin-bottom:16px}
.intake-start .intake-drop{margin-bottom:12px}
.intake-label{display:block;font-size:var(--sm-t-label);margin-bottom:5px}
.intake-start input[type="file"]{display:block;font:inherit}
.intake-start small{display:block;margin-top:6px;font-size:var(--sm-t-micro);line-height:1.55;
  color:var(--sm-ink-2);max-width:72ch}
.intake-progress{margin-top:16px}
.intake-progress-track{height:10px;border-radius:var(--sm-r-pill);overflow:hidden;
  background:var(--sm-raised)}
.intake-progress-bar{height:100%;width:0;background:var(--ft-blue);transition:width .25s ease}
.intake-progress-msg{font-size:var(--sm-t-label);margin-bottom:6px}
.intake-progress-count{font-size:var(--sm-t-micro);color:var(--sm-ink-3);margin-top:6px}
@media (max-width:640px){
  .intake-counts{grid-template-columns:repeat(2,1fr)}
  .intake-filter input[name="q"]{min-width:0;width:100%}
  .intake-table{font-size:var(--sm-t-micro)}
  .intake-table th,.intake-table td{padding:7px 9px}
}

/* ---- Document intake: reading and filing (DOC-INGEST-02) ---------------------------------------
   The page leads with ONE action for the phase it is in. Everything else is quieter on purpose:
   a row of equal buttons is how somebody files a batch they have not read. */
.intake-next{display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:16px;border-color:var(--sm-action-subtle)}
.intake-next-body{min-width:0;flex:1}
.intake-next h3{margin:0 0 4px;font-size:var(--sm-t-body)}
.intake-next p{margin:0;font-size:var(--sm-t-label);line-height:1.55;color:var(--sm-ink-2);
  max-width:74ch}
.intake-next .action{flex:none}
.intake-next[data-phase="done"]{border-color:var(--ft-blue);
  background:var(--sm-action-subtle)}
.intake-complete h3{font-size:var(--sm-t-section);color:var(--sm-action-text)}
.intake-complete-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.intake-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:8px}
.intake-steps li{position:relative;display:grid;grid-template-columns:28px 1fr;column-gap:8px;
  align-items:center;padding:10px 12px;border:1px solid var(--sm-line);
  border-radius:var(--sm-r-card);background:var(--sm-surface);color:var(--sm-ink-3)}
.intake-steps li>span{grid-row:1/3;display:grid;place-items:center;width:25px;height:25px;
  border-radius:50%;background:var(--sm-raised);font-size:var(--sm-t-micro);font-weight:750}
.intake-steps strong{font-size:var(--sm-t-micro);color:var(--sm-ink-2)}
.intake-steps small{font-size:var(--sm-t-micro)}
.intake-steps li.done>span{background:var(--sm-action-subtle);color:var(--ft-blue-text)}
.intake-steps li.current{border-color:var(--ft-blue);background:var(--sm-action-subtle)}
.intake-steps li.current>span{background:var(--ft-blue);color:#fff}
.intake-analysis{margin:0 0 16px}
.intake-counts small{font-size:var(--sm-t-micro);font-weight:400;color:var(--sm-ink-3)}
.intake-reconcile-panel{margin-bottom:16px}
.intake-outcomes{list-style:none;margin:0 0 12px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px 18px}
.intake-outcomes li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;
  font-size:var(--sm-t-label);border-bottom:1px solid var(--sm-raised)}
.intake-outcomes span{color:var(--sm-ink-2)}
.intake-outcomes strong{font-variant-numeric:tabular-nums}
.intake-check{display:inline-flex;align-items:center;gap:6px;font-size:var(--sm-t-label);white-space:nowrap}
.intake-review-table td.pick,.intake-review-table th.pick{width:34px;text-align:center}
.intake-review-table tr.is-ready td.pick{background:var(--sm-action-subtle)}
.badge.warn{background:var(--sm-cert-dim);color:var(--sm-cert)}
/* The confirmation sticks to the bottom, because the selection is made at the top of a long
   table and walking back up to find the button is how a review gets abandoned. */
.intake-confirm{position:sticky;bottom:0;z-index:20;display:grid;
  grid-template-columns:minmax(300px,1fr) minmax(360px,1.2fr) auto;gap:16px;align-items:center;
  margin-top:14px;padding:12px 15px;
  border:1px solid var(--sm-line);border-radius:var(--sm-r-card);
  background:var(--sm-surface);box-shadow:0 -6px 18px rgba(0,0,0,.18)}
.intake-confirm-body{min-width:0;flex:1}
.intake-confirm-body p{margin:4px 0 0;font-size:var(--sm-t-micro);line-height:1.55;
  color:var(--sm-ink-2);max-width:76ch}
.intake-file-choice{display:flex;gap:12px;align-items:center;justify-content:space-between}
.intake-file-choice .action{flex:none}
.intake-retain-choice{padding-left:16px;border-left:1px solid var(--sm-line-strong)}
.intake-retain-choice>summary{cursor:pointer;font-size:var(--sm-t-micro);font-weight:700;color:var(--ft-blue-text)}
.intake-retain-choice>p{margin:5px 0;font-size:var(--sm-t-micro);
  color:var(--sm-ink-2)}
.intake-selected-total{font-size:var(--sm-t-micro);white-space:nowrap;color:var(--sm-ink-2)}
.intake-confirm-actions{display:flex;gap:8px;flex-wrap:wrap}
.intake-result{margin:12px 0 0;padding:10px 12px;border-radius:var(--sm-r-card);font-size:var(--sm-t-label);
  line-height:1.55;border:1px solid var(--sm-cert-dim);
  background:var(--sm-cert-dim);color:var(--sm-cert)}
@media (max-width:640px){
  .intake-next,.intake-confirm{flex-direction:column;align-items:stretch}
  .intake-next .action,.intake-confirm-actions .action{width:100%;text-align:center}
  .intake-steps{grid-template-columns:1fr 1fr}
  .intake-confirm{display:flex}
  .intake-file-choice{display:grid}
  .intake-file-choice .action{width:100%;text-align:center}
  .intake-retain-choice{padding:12px 0 0;border-left:0;
    border-top:1px solid var(--sm-line-strong)}
  .intake-selected-total{order:-1}
  .intake-outcomes{grid-template-columns:1fr}
  .intake-filter select,.intake-filter .action{width:100%}
}
.vendor-doc-note{margin:0 0 10px;font-size:var(--sm-t-micro);line-height:1.55;
  color:var(--sm-ink-2);max-width:74ch}
.evidence-bar.pending i{background:#d48a2c}
.evidence-bar.context i{background:var(--ft-blue)}
.evidence-count{min-width:48px;white-space:nowrap}
.other-evidence-group>p{margin:0;padding:2px 13px 8px;font-size:var(--sm-t-micro);
  color:var(--sm-ink-3)}
.other-evidence-list{list-style:none;margin:0;padding:2px 13px 11px;display:grid;gap:0}
.other-evidence-item{padding:7px 0;border-top:1px solid rgba(128,140,145,.16)}
.other-evidence-summary{display:flex;align-items:center;justify-content:space-between;gap:12px}
.other-evidence-summary>span:first-child{min-width:0;display:grid;gap:2px;font-size:var(--sm-t-label)}
.other-evidence-title{font-size:var(--sm-t-label);font-weight:400;line-height:normal}
.other-evidence-summary small,.other-evidence-reason{font-size:var(--sm-t-micro);font-weight:400;line-height:normal;color:var(--sm-ink-3)}
.other-evidence-file{color:inherit;text-decoration:none}
.other-evidence-file:hover{text-decoration:underline;color:var(--ft-blue-text)}
.other-evidence-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.other-evidence-actions .action{padding:2px 7px;font-size:var(--sm-t-micro);line-height:1.4}
.other-evidence-actions form{margin:0}
.other-evidence-actions details{position:relative}
.other-evidence-actions details>summary{list-style:none;cursor:pointer;padding:2px 7px;
  border:1px solid var(--sm-line-strong);border-radius:var(--sm-r-control);font-size:var(--sm-t-micro);line-height:1.4}
.other-evidence-actions details>summary::-webkit-details-marker{display:none}
/* D485 (Nischal: "the edit screen is not fully visible and cannot scroll down to complete the process"): a dialog
   centred on the screen over a dimmed page, scrolling inside itself, instead of a pop-over the panel cut off. */
.other-evidence-form{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;
  width:min(720px,92vw);max-height:88vh;overflow:auto;box-sizing:border-box;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:16px 20px;
  border:1px solid var(--sm-line-strong);border-radius:var(--sm-r-card);
  background:var(--sm-surface);box-shadow:0 0 0 100vmax rgba(0,0,0,.55),0 12px 30px rgba(0,0,0,.3)}
.other-evidence-form-head{grid-column:1/-1;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding-bottom:8px;
  border-bottom:1px solid var(--sm-line-strong)}
.other-evidence-form-head strong{font-size:var(--sm-t-body);color:var(--sm-ink)}
.other-evidence-form label{display:grid;gap:4px;font-size:var(--sm-t-micro);color:var(--sm-ink-3)}
.other-evidence-form label.check{display:flex;align-items:center;gap:7px}
.other-evidence-form label.check input{width:auto}
.other-evidence-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end}
.other-evidence-reason{display:block;margin-top:5px}
@media(max-width:640px){
  .other-evidence-summary{align-items:flex-start;flex-direction:column}
  .other-evidence-actions{width:100%}
  .other-evidence-form{inset:12px;transform:none;width:auto;max-height:none;overflow:auto;
    grid-template-columns:1fr}
  .other-evidence-form-actions{grid-column:1}
}
.intake-lede{margin-top:0}

/* Correction controls (DOC-INGEST-02A). A row that needs a decision opens with its choices already
   visible: a queue that shows a problem and hides the fix is a queue nobody finishes. */
.intake-fix-row td{padding-top:0}
.intake-fix summary{cursor:pointer;font-size:var(--sm-t-micro);color:var(--sm-action-text);
  padding:4px 0;list-style:none}
.intake-fix summary::-webkit-details-marker{display:none}
.intake-fix summary::before{content:"\2699  "}
.intake-fix-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;align-items:end;padding:10px 0 4px}
.intake-fix-grid label{display:block;font-size:var(--sm-t-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--sm-ink-3)}
.intake-fix-grid select,.intake-fix-grid input[type="text"]{display:block;width:100%;margin-top:4px;
  font-size:var(--sm-t-label);text-transform:none;letter-spacing:0}
.intake-fix-grid .intake-replace{display:flex;align-items:flex-start;gap:6px;text-transform:none;
  letter-spacing:0;font-size:var(--sm-t-micro)}
.intake-fix-grid .intake-replace small{display:block;color:var(--sm-ink-3);
  font-size:var(--sm-t-micro);margin-top:2px}
.intake-fix-grid [hidden]{display:none!important}
.intake-reason{display:flex;flex-direction:column;gap:4px;font-size:var(--sm-t-micro);text-transform:uppercase;
  letter-spacing:.06em;color:var(--sm-ink-3)}
.intake-reason input{font-size:var(--sm-t-label);text-transform:none;letter-spacing:0;min-width:220px}
@media (max-width:640px){
  .intake-fix-grid{grid-template-columns:1fr}
  .intake-reason input{min-width:0;width:100%}
}
.intake-fix-grid input[type="text"],.intake-fix-grid input[type="date"]{display:block;width:100%;
  margin-top:4px;font-size:var(--sm-t-label);text-transform:none;letter-spacing:0}
.intake-fix-grid small{display:block;margin-top:3px;font-size:var(--sm-t-micro);text-transform:none;
  letter-spacing:0;color:var(--sm-ink-3)}
.intake-reason small{font-size:var(--sm-t-micro);text-transform:none;letter-spacing:0;
  color:var(--sm-ink-3);max-width:34ch}
.intake-reason abbr{text-decoration:none;color:var(--sm-cert)}
.intake-reason input[aria-invalid="true"]{border-color:var(--sm-danger)}

/* Evidence approval dates (DOC-INGEST-02C). Two narrow fields beside each other: approving a
   certification without checking when it lapses is how an expired one comes to count. */
/* D181: Issued sat lower than Expires and was taller, though their labels lined up.
   `.review-form .lbl` makes each label a GRID, and a grid item stretches to its row by default.
   Expires carries an extra line of hint text, so its cell is taller — and Issued stretched to
   match, pushing its input down and pulling it taller. `align-items:start` stops the stretch, so
   both fields size to their own content and sit on the same line.

   The old `.ev-dates` rules below it (display:block, padding, font-size) never applied: this block
   only ever renders inside `.review-form`, whose rules have equal specificity and come later in
   the file, so they won every time. They are removed rather than left to look load-bearing. */
.ev-dates{display:grid;grid-template-columns:1fr 1fr;gap:var(--sm-space-12);align-items:start}
/* D184: caption and its help bubble on one line. `.lbl` is a grid, so without this wrapper the
   bubble becomes its own row and pushes the input down — the misalignment D181 fixed. */
.ev-dates .lbl-cap{display:flex;align-items:center;gap:6px}
.ev-dates small{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-3)}
.ev-dates input[aria-invalid="true"]{border-color:var(--sm-danger)}
@media (max-width:640px){ .ev-dates{grid-template-columns:1fr} }


/* === Catalogue quality (D194) =================================================================
   Designed in Figma before it was built. The page stacked both queues, so the duplicates list sat
   44 rows below the fold and could be missed entirely, and neither queue said what it was or what
   acting on it would do. One queue at a time, chosen from a strip that shows BOTH counts. */
.cq-lede { max-width:900px; font-size:var(--sm-t-label); color:var(--sm-ink-2);
  margin:0 0 16px; line-height:1.55; }
.cq-lede strong { color:var(--sm-ink); }

.cq-tabs { display:flex; align-items:center; gap:26px; margin:0 0 18px;
  border-bottom:1px solid var(--sm-line); }
.cq-tab { display:inline-flex; align-items:center; gap:8px; padding:11px 2px 10px;
  text-decoration:none; font-size:var(--sm-t-label); font-weight:500; color:var(--sm-ink-2);
  border-bottom:2px solid transparent; }
.cq-tab:hover { color:var(--sm-ink); }
.cq-tab.is-here { color:var(--sm-ink); font-weight:650; border-bottom-color:var(--sm-action-text); }
.cq-count { display:inline-block; min-width:18px; text-align:center; padding:2px 7px;
  border-radius:var(--sm-r-pill); background:var(--sm-raised); color:var(--sm-ink-2);
  font-size:var(--sm-t-micro); font-weight:700; }
.cq-tab.is-here .cq-count { background:var(--ft-blue); color:#fff; }
.cq-tabs-note { margin-left:auto; font-size:var(--sm-t-micro); color:var(--sm-ink-3); }

/* The three questions every queue answers before its rows: what it is, why it matters, and what
   acting on it actually changes. The third is the one that was missing everywhere — a person will
   not act on a list when they cannot tell what the button does. */
.cq-explain { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:8px 28px;
  background:var(--sm-raised); border-left:3px solid var(--sm-line);
  border-radius:var(--sm-r-card); padding:16px 18px; margin:0 0 16px; }
.cq-explain b { display:block; font-size:var(--sm-t-micro); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sm-ink-3); margin-bottom:5px; }
.cq-explain p { margin:0; font-size:var(--sm-t-label); color:var(--sm-ink-2); line-height:1.5; }
.cq-explain strong { color:var(--sm-ink); }
@media (max-width:760px){ .cq-tabs { gap:14px; } .cq-tabs-note { display:none; } }


/* Duplicates, one pair at a time (D195). The queue listed 31 pairs with three buttons each, and
   choosing one rendered a preview UNDERNEATH the same 31 rows. One decision, two ways to answer
   it, and the merge runs on the click. */
.dq { max-width:820px; }
.dq-where { font-size:var(--sm-t-micro); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sm-ink-3); margin:0 0 8px; }
.dq-card { background:var(--sm-surface); border:1px solid var(--sm-line);
  border-radius:var(--sm-r-card); padding:20px 22px; }
.dq-why { margin:0 0 16px; font-size:var(--sm-t-label); color:var(--sm-ink-2); line-height:1.5; }
.dq-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dq-choice { display:flex; flex-direction:column; gap:5px; align-items:flex-start;
  background:var(--sm-raised); border:1px solid var(--sm-line);
  border-radius:var(--sm-r-card); padding:15px 16px; }
.dq-choice b { font-size:var(--sm-t-body); font-weight:650; color:var(--sm-ink);
  overflow-wrap:anywhere; }
.dq-choice span { font-size:var(--sm-t-micro); color:var(--sm-ink-3); }
.dq-choice button { margin-top:8px; }
.dq-note { margin:16px 0 0; font-size:var(--sm-t-label); color:var(--sm-ink-2); line-height:1.5;
  border-left:3px solid var(--sm-cert); background:var(--sm-cert-dim);
  border-radius:var(--sm-r-control); padding:11px 14px; }
.dq-note b { color:var(--sm-ink); }
.dq-not { margin-top:16px; }
.dq-not > summary { cursor:pointer; font-size:var(--sm-t-micro); color:var(--sm-ink-3); }
.dq-not > summary:hover { color:var(--sm-ink-2); }
.dq-not form { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; }
.dq-not label { display:block; font-size:var(--sm-t-micro); color:var(--sm-ink-3);
  margin-bottom:4px; }
.dq-not input { min-width:320px; }
@media (max-width:700px){ .dq-choices { grid-template-columns:1fr; } }


/* === Disclosures, everywhere ==================================================================
   D196: 70 <details> across 21 templates, and the marker was handled ad hoc — four components
   hid the native triangle and styled their own, everything else fell back to whatever the browser
   draws. So the same gesture looked different depending on which screen you were on, and on most
   of them it was a small grey arrow that belongs to no part of this design.

   One control: a square +/- that turns to - when open. It is the lowest-specificity rule in the
   file, so the four components that already draw their own marker keep theirs — nothing that
   already looked deliberate changes.

   `list-style:none` removes it in Firefox and Safari; the ::-webkit-details-marker rule removes
   it in Chrome. Both are needed. */
.app-window details > summary { list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px; }
.app-window details > summary::-webkit-details-marker { display: none; }
.app-window details > summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sm-line-strong); border-radius: 3px;
  background: var(--sm-raised); color: var(--sm-ink-2);
  font-size: 12px; font-weight: 700; line-height: 1;
  /* The glyph is nudged because "+" and "-" do not share a vertical centre in most faces. */
  text-indent: 0; padding-bottom: 1px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.app-window details[open] > summary::before { content: "\2212"; }   /* a true minus, not a hyphen */
.app-window details > summary:hover::before {
  background: var(--sm-action-subtle); color: var(--sm-action-text);
  border-color: var(--sm-action-text); }
.app-window details > summary:focus-visible { outline: 2px solid var(--sm-focus);
  outline-offset: 2px; border-radius: var(--sm-r-control); }
/* A summary that is deliberately drawn as something else — a nav group, a button, a card header —
   opts out by hiding the box rather than by fighting it. */
.app-window .nav-group > summary::before,
.app-window details.more-actions > summary::before,
.app-window .add-wrap > summary::before,
.app-window .sk-g > summary::before,
.app-window .rowmenu > summary::before,
.app-window .rowmenu[open] > summary::before { content: none; }   /* D388: the ⋯ is the whole control */


/* === Users & roles (D198) =====================================================================
   The page hand-rolled its table and every cell in it — 599 inline style attributes on the
   rendered page and no table class, which is why it read as a different product. It uses `.dtable`
   now; what remains here is only the two things that page genuinely adds. */

/* A control that submits on change sits inline in a cell, with no Save button beside it. */
.u-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; }
.u-row select { min-width:180px; }

/* D468: Active / self-service are SETTINGS a click changes, so they look like switches. As green pills they read as
   status labels, and clicking "Active" disabled the account without the person meaning to. */
.u-state { font:inherit; font-size:var(--sm-t-micro); font-weight:650; display:inline-flex; align-items:center; gap:7px;
  padding:3px 4px; border:0; background:none; color:var(--sm-ink-3); cursor:pointer; white-space:nowrap; }
.u-track { position:relative; width:30px; height:18px; flex:0 0 auto; border-radius:9px; background:light-dark(#c3cbd6,#4b5768);
  transition:background .15s; }
.u-track::after { content:""; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.3); transition:left .15s; }
.u-state.on { color:var(--sm-ink); }
.u-state.on .u-track { background:#22b585; }
.u-state.u-soft.on .u-track { background:var(--ft-blue); }
.u-state.on .u-track::after { left:15px; }
.u-state:hover:not(:disabled) .u-track { box-shadow:0 0 0 2px light-dark(#8fa3bd,#5c6b80); }
.u-state:disabled { cursor:not-allowed; opacity:.55; }
.u-state:focus-visible { outline:2px solid var(--sm-focus); outline-offset:2px; border-radius:6px; }

.u-reset { display:grid; gap:5px; margin-bottom:10px; }
.u-reset label { font-size:var(--sm-t-micro); color:var(--sm-ink-3); }

/* === Dashboard drill-down (D137) ==========================================================
   Every headline number, bar, month and skill-group row opens its records in one grid at the
   bottom of the dashboard. The grid is deliberately a DIFFERENT plane from the panels above it
   — inset ground, an action-coloured top edge — so it reads as a drawer the page opened rather
   than as another card that was always there. */
.results { border:1px solid var(--sm-line); border-top:2px solid var(--sm-action);
  border-radius:var(--sm-r-card); background:var(--sm-inset); overflow:hidden; margin-top:var(--sm-space-16); }
.results-head { display:flex; gap:var(--sm-space-16); align-items:flex-start;
  padding:var(--sm-space-16) var(--sm-space-20); }
.results-head-main { flex:1; min-width:0; }
.results-head h3 { margin:0; font-size:var(--sm-t-section); }
.results-meaning { margin:var(--sm-space-4) 0 0; font-size:var(--sm-t-label); color:var(--sm-ink-2); }
.results-count { margin:var(--sm-space-8) 0 0; font-size:var(--sm-t-label); color:var(--sm-ink-2); }
.results-count strong { color:var(--sm-ink); }
.results-filters { margin:var(--sm-space-4) 0 0; font-size:var(--sm-t-micro); color:var(--sm-ink-3); }
.results-actions { display:flex; gap:var(--sm-space-8); flex-shrink:0; }
.results-scroll { overflow-x:auto; }
.results-table { width:100%; border-collapse:collapse; font-size:var(--sm-t-body); }
.results-table th { text-align:left; padding:var(--sm-space-8) var(--sm-space-20);
  background:var(--sm-raised); color:var(--sm-ink-2); font-size:var(--sm-t-micro);
  font-weight:500; white-space:nowrap; border-top:1px solid var(--sm-line);
  border-bottom:1px solid var(--sm-line); }
.results-table td { padding:var(--sm-space-12) var(--sm-space-20); background:var(--sm-surface);
  border-bottom:1px solid var(--sm-line); white-space:nowrap; }
.results-table tbody tr { cursor:pointer; }
.results-table tbody tr:hover td { background:var(--sm-raised); }
.results-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sm-space-8);
  padding:var(--sm-space-12) var(--sm-space-20); font-size:var(--sm-t-label); color:var(--sm-ink-2); }
.results-pager { display:flex; gap:var(--sm-space-8); }
.results-empty { padding:var(--sm-space-32) var(--sm-space-20); text-align:center;
  background:var(--sm-surface); }
.results-empty strong { display:block; font-size:var(--sm-t-body); }
.results-empty p { margin:var(--sm-space-8) auto 0; max-width:52ch;
  font-size:var(--sm-t-label); color:var(--sm-ink-2); }

/* Loading and failure. Silence looks identical to "still working", so both say which. */
.results-loading, .results-error { padding:var(--sm-space-32) var(--sm-space-20); text-align:center;
  background:var(--sm-surface); border:1px solid var(--sm-line); border-top:2px solid var(--sm-action);
  border-radius:var(--sm-r-card); margin-top:var(--sm-space-16); font-size:var(--sm-t-label);
  color:var(--sm-ink-2); }
.results-error { border-top-color:var(--sm-danger); }
.results-skeleton { height:11px; border-radius:var(--sm-r-pill); background:var(--sm-raised);
  margin:var(--sm-space-12) auto; max-width:640px; }
.results-skeleton:nth-child(2){opacity:.8} .results-skeleton:nth-child(3){opacity:.6}
.results-skeleton:nth-child(4){opacity:.4}

/* A widget that can be opened. The cursor is not enough on a chart, so the resting state gets a
   quiet outline and the open one keeps the action colour while its records are showing. */
.drill { cursor:pointer; }
.drill:hover { border-color:var(--sm-line-strong); }
.drill:focus-visible { outline:2px solid var(--sm-focus); outline-offset:2px; }
.drill[aria-pressed="true"] { border-color:var(--sm-action); box-shadow:inset 0 0 0 1px var(--sm-action); }
.metric.drill { text-align:left; width:100%; font:inherit; color:inherit; }
.drill-hint { font-size:var(--sm-t-micro); color:var(--sm-ink-3); }
@media (prefers-reduced-motion: no-preference){
  .results { animation:results-in .18s ease-out; }
  @keyframes results-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
}

/* === Data table (Phase 2) =================================================================
   Tables are the densest and most-used thing in this product and had no shared component at
   all: every screen styled its own with inline `style=` attributes, so nothing could be fixed
   in one place. `.dtable` is that place.

   Below 820px each row becomes a card. A ten-column table cannot be read on a phone by
   scrolling sideways — you lose the column you are comparing against — so the header is
   dropped and each cell carries its own label from `data-label`. */
.dtable { width:100%; border-collapse:collapse; font-size:var(--sm-t-body); }
.dtable thead th { text-align:left; padding:var(--sm-space-8) var(--sm-space-12);
  background:var(--sm-raised); color:var(--sm-ink-2); font-size:var(--sm-t-micro);
  font-weight:500; white-space:nowrap; border-bottom:1px solid var(--sm-line); }
.dtable thead th.num, .dtable td.num { text-align:right; font-variant-numeric:tabular-nums; }
.dtable td { padding:var(--sm-space-12); border-top:1px solid var(--sm-line);
  vertical-align:middle; }
.dtable tbody tr:hover td { background:var(--sm-raised); }
.dtable .cell-sub { display:block; font-size:var(--sm-t-micro); color:var(--sm-ink-3); }
.dtable .cell-code { display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--sm-t-micro); color:var(--sm-ink-3); }

/* A sortable heading is a control, so it looks like one and announces its state. The old screen
   explained this in a sentence above the table instead ("click a column heading to sort"). */
.dtable th a { display:inline-flex; gap:var(--sm-space-4); align-items:center; color:inherit; }
.dtable th a:hover { color:var(--sm-ink); text-decoration:underline; }
.dtable th a:focus-visible { outline:2px solid var(--sm-focus); outline-offset:2px; border-radius:2px; }
.dtable th[aria-sort] a { color:var(--sm-ink); font-weight:600; }
.dtable th .sort-arrow { font-size:var(--sm-t-micro); opacity:.55; width:9px; }
.dtable th[aria-sort] .sort-arrow { opacity:1; }

/* Row actions live behind one control. Edit and Remove side by side gave a destructive action
   the same weight as an ordinary one, on every row of a 532-row table. */
.rowmenu { position:relative; display:inline-block; }
.rowmenu > summary { list-style:none; cursor:pointer; padding:var(--sm-space-4) var(--sm-space-8);
  border:1px solid transparent; border-radius:var(--sm-r-control); color:var(--sm-ink-3);
  line-height:1; }
.rowmenu > summary::-webkit-details-marker { display:none; }
.rowmenu > summary:hover { background:var(--sm-raised); border-color:var(--sm-line); color:var(--sm-ink); }
.rowmenu > summary:focus-visible { outline:2px solid var(--sm-focus); outline-offset:1px; }
.rowmenu[open] > summary { background:var(--sm-raised); border-color:var(--sm-line-strong); }
.rowmenu-pop { position:absolute; right:0; top:calc(100% + 4px); z-index:40; min-width:168px;
  display:grid; padding:var(--sm-space-4); border-radius:var(--sm-r-card);
  background:var(--sm-surface); border:1px solid var(--sm-line);
  box-shadow:0 12px 34px rgba(0,0,0,.35); }
.rowmenu-pop a { padding:var(--sm-space-8) var(--sm-space-12); border-radius:var(--sm-r-control);
  font-size:var(--sm-t-label); white-space:nowrap; }
.rowmenu-pop a:hover { background:var(--sm-raised); }
.rowmenu-pop a.danger { color:var(--sm-danger); }
.rowmenu-pop hr { border:0; border-top:1px solid var(--sm-line); margin:var(--sm-space-4) 0; }

.statuspill { display:inline-flex; align-items:center; gap:var(--sm-space-4);
  padding:2px var(--sm-space-8); border-radius:var(--sm-r-pill); background:var(--sm-raised);
  border:1px solid var(--sm-line); font-size:var(--sm-t-micro); color:var(--sm-ink-2);
  white-space:nowrap; }
.statuspill i { width:5px; height:5px; border-radius:50%; background:var(--sm-ink-3); }
.statuspill.is-on i { background:var(--sm-ok); }

.pager { display:flex; align-items:center; justify-content:space-between; gap:var(--sm-space-12);
  flex-wrap:wrap; padding:var(--sm-space-12); border-top:1px solid var(--sm-line);
  font-size:var(--sm-t-label); color:var(--sm-ink-2); }
/* Above a table the divider belongs underneath the pager, not over it — otherwise the rule
   floats away from the panel edge and reads as a stray line. */
.pager.pager-top { border-top:0; border-bottom:1px solid var(--sm-line); }
.pager-links { display:flex; gap:var(--sm-space-8); align-items:center; }
.pager-links .current { padding:var(--sm-space-4) var(--sm-space-8); color:var(--sm-ink); }

@media (max-width:820px){
  .dtable, .dtable tbody, .dtable tr, .dtable td { display:block; width:100%; }
  .dtable thead { display:none; }
  .dtable tr { border:1px solid var(--sm-line); border-radius:var(--sm-r-card);
    background:var(--sm-surface); margin-bottom:var(--sm-space-12); overflow:hidden; }
  .dtable td { display:flex; gap:var(--sm-space-12); align-items:baseline; border-top:0;
    border-bottom:1px solid var(--sm-line); padding:var(--sm-space-8) var(--sm-space-12); }
  .dtable td:last-child { border-bottom:0; }
  .dtable td::before { content:attr(data-label); flex:0 0 38%; color:var(--sm-ink-3);
    font-size:var(--sm-t-micro); }
  .dtable td.cell-primary { display:block; background:var(--sm-raised); }
  .dtable td.cell-primary::before, .dtable td.cell-actions::before { content:none; }
  .dtable td.cell-actions { justify-content:flex-end; }
  .dtable td.num { text-align:left; }
}

/* Text for screen readers only — used where a column has an icon-only control and no visible
   heading, which would otherwise be an unlabelled table column. */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* A destructive action inside a row menu that must stay a POST keeps its form; this makes the
   submit button look like the menu's other items rather than like a button in a table cell. */
.rowmenu-pop .rowmenu-danger { display:block; width:100%; text-align:left; border:0;
  background:none; font:inherit; font-size:var(--sm-t-label); color:var(--sm-danger);
  padding:var(--sm-space-8) var(--sm-space-12); border-radius:var(--sm-r-control); cursor:pointer; }
.rowmenu-pop .rowmenu-danger:hover { background:var(--sm-danger-dim); }

/* === Review: a queue and one decision (Phase 3) ===========================================
   The evidence decision form used to live inside a table cell, repeated per pending document,
   so a reviewer scrolled sideways through a form to approve something. Queue on the left, one
   decision on the right; selection is a link, so the screen works without JavaScript and a
   particular document stays linkable. */
.review { display:grid; grid-template-columns:300px minmax(0,1fr); gap:var(--sm-space-16);
  align-items:start; }
/* D152: on a person's page there is no queue beside the panel — the table above IS the queue — so
   the first track had nothing to hold and the whole decision was squeezed into 300px with the form
   clipped. One column where the panel stands alone. */
.review.is-single { grid-template-columns:minmax(0,1fr); }
.review-queue { display:grid; gap:1px; border:1px solid var(--sm-line);
  border-radius:var(--sm-r-card); overflow:hidden; background:var(--sm-line); }
.review-item { display:grid; gap:2px; padding:var(--sm-space-12); background:var(--sm-surface); }
.review-item:hover { background:var(--sm-raised); }
.review-item.is-selected { background:var(--sm-action-subtle);
  box-shadow:inset 3px 0 0 var(--sm-action); }
.review-item strong { font-size:var(--sm-t-body); }
.review-item span { font-size:var(--sm-t-micro); color:var(--sm-ink-3); }
.review-kind { justify-self:start; margin-top:var(--sm-space-4);
  padding:1px var(--sm-space-8); border-radius:var(--sm-r-control);
  background:var(--sm-cert-dim); color:var(--sm-cert); }
.review-kind.is-blocked { background:var(--sm-raised); color:var(--sm-ink-3); }

.review-panel { border:1px solid var(--sm-line); border-radius:var(--sm-r-card);
  background:var(--sm-surface); overflow:hidden; }
.review-head { padding:var(--sm-space-16) var(--sm-space-20);
  border-bottom:1px solid var(--sm-line); }
.review-head h4 { margin:0; font-size:var(--sm-t-section); }
.review-who { margin:var(--sm-space-4) 0 0; font-size:var(--sm-t-label); color:var(--sm-ink-2); }
.review-body { display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--sm-space-20);
  padding:var(--sm-space-20); align-items:start; }
.review-doc { display:grid; gap:var(--sm-space-12); padding:var(--sm-space-12);
  border-radius:var(--sm-r-card); background:var(--sm-inset); }
.review-nofile { margin:0; font-size:var(--sm-t-label); color:var(--sm-ink-3); }
.review-facts { display:grid; gap:var(--sm-space-8); margin:0; font-size:var(--sm-t-micro); }
.review-facts dt { color:var(--sm-ink-3); }
.review-facts dd { margin:0; color:var(--sm-ink); font-size:var(--sm-t-label); }
/* D225 — the one fact on this panel that should stop a reviewer rather than inform them: the
   document is printed in a different name from the person it is filed against. */
.review-facts dt.review-warn { color:var(--sm-danger); font-weight:700; }
.review-facts dd.review-warn { color:var(--sm-danger); }
.review-blocked { margin:0; padding:var(--sm-space-8); border-radius:var(--sm-r-control);
  background:var(--sm-cert-dim); color:var(--sm-cert); font-size:var(--sm-t-micro); }

.review-form { display:grid; gap:var(--sm-space-12); }
.review-form .lbl { display:grid; gap:var(--sm-space-4); font-size:var(--sm-t-label);
  color:var(--sm-ink-2); }
.review-form input[type=text], .review-form input:not([type]), .review-form input[type=date],
.review-form select, .catalogue-manual-name {
  width:100%; box-sizing:border-box; border:1px solid var(--sm-line-strong);
  border-radius:var(--sm-r-control); padding:0 var(--sm-space-8); height:var(--sm-h-control);
  background:var(--sm-raised); color:inherit; font:inherit;
  /* D318: the ramp's BODY size, deliberately — these hold a credential title somebody reads, not
     a label. The height is shared with every other control so the row still lines up. */
  font-size:var(--sm-t-body); }
.review-form select:focus-visible, .review-form input:focus-visible {
  outline:2px solid var(--sm-focus); outline-offset:1px; }
.review-form > details > summary { cursor:pointer; font-size:var(--sm-t-label);
  color:var(--sm-ink-2); }
.review-form > details[open] { display:grid; gap:var(--sm-space-8); }
.review-note { margin:0; font-size:var(--sm-t-micro); color:var(--sm-ink-3); line-height:1.6; }
.review-actions { display:flex; gap:var(--sm-space-8); flex-wrap:wrap;
  padding-top:var(--sm-space-12); border-top:1px solid var(--sm-line); }
.catalogue-advice-status { display:block; margin-top:var(--sm-space-4);
  font-size:var(--sm-t-micro); color:var(--sm-ink-3); }
.catalogue-manual { margin-top:var(--sm-space-8); }
.catalogue-manual > summary { cursor:pointer; color:var(--sm-action-text);
  font-size:var(--sm-t-label); }
.catalogue-manual-row { display:flex; gap:var(--sm-space-8); align-items:center;
  flex-wrap:wrap; margin-top:var(--sm-space-8); }
.catalogue-manual-row .catalogue-manual-name { flex:1; min-width:210px; }
.action.danger { border-color:var(--sm-danger); color:var(--sm-danger); }
.action.danger:hover { background:var(--sm-danger-dim); }

@media (max-width:900px){
  .review { grid-template-columns:1fr; }
  .review-queue { max-height:240px; overflow:auto; }
  .review-body { grid-template-columns:1fr; }
}

/* === Dropzone (Phase 3) ====================================================================
   The staging control was a bare native file input, which for a 1 600-document collection gave
   no sense of what was about to happen. The whole card is the target: click, keyboard, or drop
   a folder onto it. The dashed edge is the one place in this interface that uses one — it means
   "put something here", and nothing else does. */
.dropzone { position:relative; display:grid; gap:var(--sm-space-4); justify-items:center;
  text-align:center; padding:var(--sm-space-24) var(--sm-space-20);
  border:2px dashed var(--sm-line-strong); border-radius:var(--sm-r-card);
  background:var(--sm-inset); cursor:pointer; }
.dropzone:hover { border-color:var(--sm-action); background:var(--sm-action-subtle); }
.dropzone:focus-visible { outline:2px solid var(--sm-focus); outline-offset:2px; }
.dropzone.is-over { border-color:var(--sm-action); border-style:solid;
  background:var(--sm-action-subtle); }
.dropzone-title { margin:0; font-size:var(--sm-t-section); color:var(--sm-ink); }
.dropzone-sub { margin:0; font-size:var(--sm-t-label); color:var(--sm-ink-2); }
.dropzone-link { color:var(--sm-action-text); text-decoration:underline; }
/* The input stays in the DOM and keeps working; it is simply not the thing you look at. */
.dropzone-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.dropzone-chosen { margin:var(--sm-space-8) 0 0; padding:var(--sm-space-8) var(--sm-space-12);
  border-radius:var(--sm-r-control); background:var(--sm-surface);
  border:1px solid var(--sm-line); font-size:var(--sm-t-label); color:var(--sm-ink); }
.intake-formats { display:block; margin-top:var(--sm-space-8); font-size:var(--sm-t-micro);
  color:var(--sm-ink-3); line-height:1.6; }
/* An absent figure, said in words. A dash next to real zeros reads as a broken number. */
.metric-none { font-size:var(--sm-t-section); color:var(--sm-ink-3); font-weight:600; }
/* Account search and the one-at-a-time staff link (Users & roles). */
.userfind { display:flex; gap:var(--sm-space-8); align-items:center; flex-wrap:wrap;
  margin:0 0 var(--sm-space-12); }
.userfind input { flex:1; min-width:260px; border:1px solid var(--sm-line-strong);
  border-radius:var(--sm-r-control); padding:var(--sm-space-8); background:var(--sm-raised);
  color:inherit; font:inherit; font-size:var(--sm-t-body); }
.userfind-count { font-size:var(--sm-t-label); color:var(--sm-ink-2); }
.linkcell { display:inline-flex; gap:var(--sm-space-8); align-items:center; flex-wrap:wrap;
  font-size:var(--sm-t-label); }
.linkcell small { color:var(--sm-ink-3); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.linkcell em { color:var(--sm-ink-3); font-style:normal; }
.linkform { display:flex; gap:var(--sm-space-8); align-items:center; flex-wrap:wrap; }
.linkform select { border:1px solid var(--sm-line-strong); border-radius:var(--sm-r-control);
  padding:var(--sm-space-8); background:var(--sm-raised); color:inherit; font:inherit;
  font-size:var(--sm-t-body); max-width:320px; }

/* --- Capability overview (D160) ----------------------------------------------------------
   The dashboard leads with a POSITION rather than four volume counts, so a tile carries a
   denominator and a consequence, not just a number. Colours follow the existing language:
   cyan is experience, amber is certification, red is a lapse. Nothing else is coloured. */
.metric .denom{ font-style:normal; font-size:var(--sm-t-section); color:var(--sm-ink-3);
  letter-spacing:0; margin-left:5px; font-weight:400 }
.metric .so{ margin:0 0 6px; font-size:var(--sm-t-micro); line-height:1.45; color:var(--sm-ink-2) }
.metric.danger strong{ color:var(--sm-danger) }

/* The approval backlog is a caveat on the figures, so it sits above them and is coloured as a
   warning rather than as an action panel. */
.trust-strip{ display:flex; gap:16px; align-items:center; justify-content:space-between;
  margin-bottom:14px; padding:13px 16px; border-radius:var(--sm-r-card);
  background:var(--sm-cert-dim); border:1px solid var(--sm-cert) }
.trust-strip h3{ margin:0 0 4px; font-size:var(--sm-t-subhead); color:var(--sm-cert) }
.trust-strip p{ margin:0; font-size:var(--sm-t-label); line-height:1.55; color:var(--sm-ink-2) }
.trust-strip .action{ flex:none }

/* Experience, certification and both, to scale. `both` is a sliver by design — that IS the
   finding, and padding it out to be readable would misstate it. */
.ev-bar{ display:flex; gap:2px; height:44px; margin-bottom:12px }
.ev-seg{ display:flex; align-items:center; padding:0 10px; border-radius:3px; min-width:4px;
  overflow:hidden }
.ev-seg b{ font-size:var(--sm-t-subhead); color:var(--sm-ink); white-space:nowrap }
.ev-seg.exp{ background:var(--sm-exp) } .ev-seg.cert{ background:var(--sm-cert) }
.ev-seg.both{ background:var(--ft-blue) }
.ev-readings{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.ev-readings>div{ padding:11px 12px; border:1px solid var(--sm-line); border-radius:var(--sm-r-card) }
.ev-readings p{ margin:0 0 4px; font-size:var(--sm-t-label); color:var(--sm-ink-2) }
.ev-readings b{ font-size:var(--sm-t-section); color:var(--sm-ink); margin-right:5px }
.ev-readings small{ font-size:var(--sm-t-micro); line-height:1.45; color:var(--sm-ink-3) }

.depth-row{ display:flex; align-items:center; gap:10px; padding:5px 0 }
.depth-name{ flex:0 0 132px; font-size:var(--sm-t-label); color:var(--sm-ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.depth-bars{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px }
.depth-bars .b{ display:block; height:6px; border-radius:3px; min-width:2px }
.depth-bars .b.exp{ background:var(--sm-exp) } .depth-bars .b.cert{ background:var(--sm-cert) }
.depth-pct{ flex:0 0 42px; text-align:right; font-size:var(--sm-t-label); font-weight:600;
  color:var(--sm-ink); font-variant-numeric:tabular-nums }
.depth-pct.low{ color:var(--sm-danger) }

.single-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 11px; margin-bottom:7px; border-radius:var(--sm-r-card); background:var(--sm-inset) }
.single-row b{ display:block; font-size:var(--sm-t-label); font-weight:500; color:var(--sm-ink) }
.single-row small{ display:block; font-size:var(--sm-t-micro); color:var(--sm-ink-3); margin-top:2px }
.single-row .who{ flex:none; font-size:var(--sm-t-micro); color:var(--sm-ink-2); text-align:right }
.single-more{ display:inline-block; margin-top:4px; font-size:var(--sm-t-label);
  color:var(--sm-action-text); text-decoration:none }
.single-more:hover{ text-decoration:underline }

@media (max-width:1100px){
  .ev-readings{ grid-template-columns:1fr }
  .trust-strip{ flex-direction:column; align-items:flex-start }
}

/* --- Ask the assistant, on the landing page (D161) ---------------------------------------
   Offered where a figure has just raised a question, so it sits under the tiles rather than at
   the top or the foot. Tinted with the action colour so it reads as something you DO, not as
   another panel of numbers to read. */
.ask-band{ margin-bottom:14px; padding:16px 18px 17px; border-radius:var(--sm-r-card);
  background:var(--sm-action-subtle); border:1px solid var(--sm-action) }
.ask-head{ display:flex; align-items:center; gap:11px; margin-bottom:13px }
.ask-mark{ flex:none; width:30px; height:30px; border-radius:var(--sm-r-card);
  background:var(--sm-action); color:var(--sm-on-action); display:flex; align-items:center;
  justify-content:center; font-size:var(--sm-t-subhead) }
.ask-title{ flex:1 1 auto; min-width:0 }
.ask-title h3{ margin:0 0 2px; font-size:var(--sm-t-section) }
.ask-title p{ margin:0; font-size:var(--sm-t-label); color:var(--sm-ink-2) }
.ask-open{ flex:none; font-size:var(--sm-t-label); color:var(--sm-action-text);
  text-decoration:none; white-space:nowrap }
.ask-open:hover{ text-decoration:underline }

.ask-composer{ display:flex; gap:8px; align-items:center; padding:7px 7px 7px 13px;
  border-radius:var(--sm-r-card); background:var(--sm-surface); border:1px solid var(--sm-line) }
.ask-composer input{ flex:1 1 auto; min-width:0; border:0; background:none; color:var(--sm-ink);
  font:inherit; font-size:var(--sm-t-body); padding:6px 0 }
.ask-composer input::placeholder{ color:var(--sm-ink-3) }
.ask-composer input:focus{ outline:none }
.ask-composer:focus-within{ border-color:var(--sm-focus); box-shadow:0 0 0 3px var(--sm-action-subtle) }
.ask-composer .action{ flex:none }

.ask-try{ margin:13px 0 8px; font-size:var(--sm-t-micro); color:var(--sm-ink-3) }
.ask-try b{ color:var(--sm-ink-3); letter-spacing:.06em; margin-right:7px }
.ask-examples{ display:flex; flex-wrap:wrap; gap:8px }
.ask-examples form{ display:contents }
/* D285: these became links — they now carry the question to the assistant rather than posting
   from the dashboard. Both selectors are kept so the appearance is unchanged. */
.ask-examples button,.ask-examples a{ font:inherit; font-size:var(--sm-t-label); cursor:pointer;
  text-align:left; text-decoration:none; display:inline-block;
  padding:8px 13px; border-radius:var(--sm-r-pill); background:var(--sm-surface);
  border:1px solid var(--sm-line); color:var(--sm-ink) }
.ask-examples button:hover,.ask-examples a:hover{ border-color:var(--sm-action);
  color:var(--sm-action-text) }
.ask-examples button:focus-visible,.ask-examples a:focus-visible{ outline:2px solid var(--sm-focus);
  outline-offset:2px }
.ask-note{ margin:12px 0 0; font-size:var(--sm-t-micro); line-height:1.5; color:var(--sm-ink-3) }

@media (max-width:760px){
  .ask-head{ flex-wrap:wrap } .ask-open{ order:3; width:100% }
  .ask-examples button,.ask-examples a{ width:100% }
}

/* A started-but-unfinished stage (D162). It must not look finished: the tick used to mean
   "has something in it", which read as done and said the bid was further along than it was.
   Amber is the warning colour the rest of the application already uses. */
.bid-step.is-partial b{ background:var(--sm-cert); color:var(--sm-navy, #0a2540) }
.bid-step.is-partial span{ color:var(--sm-ink-2) }
.bid-step.is-partial small{ color:var(--sm-cert) }

/* --- What is holding a bid up (D163) ------------------------------------------------------
   A route to the work, not a second opinion about it: every row is a figure a stage page also
   shows, and links to the stage that resolves it. */
.blocker{ display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:7px;
  border-radius:var(--sm-r-card); background:var(--sm-inset); text-decoration:none;
  border:1px solid transparent }
.blocker:hover{ border-color:var(--sm-line-strong) }
.blocker b{ flex:0 0 34px; text-align:right; font-size:var(--sm-t-title); line-height:1;
  color:var(--sm-cert); font-variant-numeric:tabular-nums }
.blocker b.severe{ color:var(--sm-danger) }
.blocker span{ flex:1 1 auto; min-width:0; font-size:var(--sm-t-label); color:var(--sm-ink-2);
  line-height:1.45 }
.blocker i{ flex:none; font-style:normal; font-size:var(--sm-t-micro);
  color:var(--sm-action-text); white-space:nowrap }

/* The stage page you are READING, as distinct from the stage the bid is ON (D165). The rail has
   to answer both at once and they are rarely the same. Progress stays the badge colour; presence
   is a left marker and a lifted surface, so neither reading has to fight the other. */
.bid-step.is-here{ background:var(--sm-raised); border-color:var(--sm-line-strong);
  box-shadow:inset 3px 0 0 0 var(--sm-ink-2) }
.bid-step.is-here span{ color:var(--sm-ink) }

/* "none ready" on an approvals card (D166). Muted, not alarming — it is a statement of fact
   about what opening the card will let you do, not a fault. */
.approval-counts .is-none-ready{ font-style:normal; color:var(--sm-ink-3) }

/* --- Adoption: one headline, the gaps, and where the work is (D167) -----------------------
   Seven equal tiles and a 38-row by 8-column table became a headline, a one-line strip for what
   is finished, and the gaps ordered by how many PEOPLE are missing each fact. */
.ad-headline{ margin-bottom:12px; padding:17px 20px 18px }
.ad-headline-row{ display:flex; align-items:center; gap:26px; margin-bottom:13px }
.ad-headline-row>div:first-child{ flex:1 1 auto; min-width:0 }
.ad-big{ margin:0 0 3px; display:flex; align-items:baseline; gap:6px }
.ad-big b{ font-size:38px; line-height:1; letter-spacing:-.03em; color:var(--sm-ink) }
.ad-big i{ font-style:normal; font-size:var(--sm-t-section); color:var(--sm-ink-3) }
.ad-big-note{ margin:0; font-size:var(--sm-t-label); color:var(--sm-ink-2) }
.ad-headline-right{ flex:none; text-align:right }
.ad-headline-right b{ display:block; font-size:var(--sm-t-title); color:var(--sm-cert) }
.ad-headline-right span{ font-size:var(--sm-t-micro); color:var(--sm-ink-2) }

.ad-track{ display:block; height:10px; border-radius:5px; background:var(--sm-inset); overflow:hidden }
.ad-track>i{ display:block; height:100%; border-radius:5px; background:var(--sm-cert); min-width:2px }
.ad-track>i.low{ background:var(--sm-danger) }
.ad-track.sm{ height:6px }

.ad-settled{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-bottom:14px;
  padding:11px 16px; border-radius:var(--sm-r-card); background:var(--sm-inset) }
.ad-settled>b:nth-of-type(2){ color:var(--sm-ok); font-size:var(--sm-t-label) }
.ad-settled span{ font-size:var(--sm-t-micro); color:var(--sm-ink-2) }
.ad-settled span b{ color:var(--sm-ink) }
.ad-settled i{ margin-left:auto; font-style:normal; font-size:var(--sm-t-micro); color:var(--sm-ink-3) }
.ad-tick{ width:20px; height:20px; border-radius:50%; background:var(--sm-ok); color:#fff;
  display:grid; place-items:center; font-size:10px; flex:none }

.ad-gaps-head{ margin-bottom:10px }
.ad-gaps{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px }
.ad-gap{ display:block; padding:14px 15px; border:1px solid var(--sm-line); border-radius:var(--sm-r-card);
  background:var(--sm-surface); text-decoration:none }
.ad-gap:hover{ border-color:var(--sm-line-strong) }
.ad-gap-label{ display:block; font-size:var(--sm-t-micro); color:var(--sm-ink-3); margin-bottom:7px }
.ad-gap strong{ display:flex; align-items:baseline; gap:6px; font-size:30px; line-height:1;
  letter-spacing:-.03em; color:var(--sm-cert); margin-bottom:9px }
.ad-gap strong i{ font-style:normal; font-size:var(--sm-t-label); color:var(--sm-ink-3); font-weight:400 }
.ad-gap.severe strong{ color:var(--sm-danger) }
.ad-gap.severe .ad-track>i{ background:var(--sm-danger) }
.ad-gap small{ display:block; margin:8px 0 4px; font-size:var(--sm-t-micro); color:var(--sm-ink-2) }
.ad-gap em{ font-style:normal; font-size:var(--sm-t-micro); color:var(--sm-action-text) }

.ad-measures{ display:flex; gap:0; border:1px solid var(--sm-line); border-radius:var(--sm-r-card); overflow:hidden }
.ad-measure{ padding:6px 11px; font-size:var(--sm-t-micro); color:var(--sm-ink-2); text-decoration:none }
.ad-measure.on{ background:var(--sm-action); color:var(--sm-on-action); font-weight:600 }
.ad-measure:hover:not(.on){ background:var(--sm-raised) }

.ad-rank{ display:flex; align-items:center; gap:12px; padding:6px 0 }
.ad-rank-name{ flex:0 0 190px; font-size:var(--sm-t-label); color:var(--sm-ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ad-rank-name a{ color:inherit; text-decoration:none } .ad-rank-name a:hover{ color:var(--ft-blue-text) }
.ad-rank-missing{ flex:0 0 34px; text-align:right; font-size:var(--sm-t-section);
  color:var(--sm-cert); font-variant-numeric:tabular-nums }
.ad-rank-missing.severe{ color:var(--sm-danger) }
.ad-rank-word{ flex:none; font-size:var(--sm-t-micro); color:var(--sm-ink-3) }
.ad-rank .ad-track{ flex:1 1 auto; min-width:0; height:8px }
.ad-rank-pct{ flex:0 0 38px; text-align:right; font-size:var(--sm-t-label); color:var(--sm-ink-2);
  font-variant-numeric:tabular-nums }
.ad-rank-of{ flex:0 0 46px; font-size:var(--sm-t-micro); color:var(--sm-ink-3) }
/* D287: the company under a department whose name is shared. Quiet, on its own line, and only
   present where the name alone cannot be read. */
.ad-rank-of-co{ display:block; font-size:var(--sm-t-micro); color:var(--sm-ink-3); line-height:1.3;
  margin-top:1px }
.ad-rank-tail{ display:flex; align-items:center; gap:12px; padding-top:10px; margin-top:6px;
  border-top:1px solid var(--sm-line); font-size:var(--sm-t-micro); color:var(--sm-ink-3) }
.ad-rank-tail a{ margin-left:auto; color:var(--sm-action-text); text-decoration:none }

@media (max-width:1100px){ .ad-gaps{ grid-template-columns:repeat(2,1fr) } }

/* Pager for long record lists (D171/D172). Deliberately plain: it is a way through a list, not
   a feature, and it must not compete with the actions on the rows above it. */
.cat-pager{ display:flex; align-items:center; gap:14px; margin-top:12px; padding-top:11px;
  border-top:1px solid var(--sm-line); font-size:var(--sm-t-micro); color:var(--sm-ink-3) }
.cat-pager a{ color:var(--sm-action-text); text-decoration:none }
.cat-pager a:hover{ text-decoration:underline }
.cat-pager span{ margin-right:auto }

/* --- Approvals: decide, then advance (D173) ----------------------------------------------
   The decision used to sit below the whole queue, so a reviewer working 137 documents chose a
   row at the top, scrolled past every other row, and then had nowhere to go. */
.ap-decision{ margin-bottom:14px; border-color:var(--sm-action) }
.ap-decision-head{ align-items:flex-start; gap:14px }
.ap-position{ margin:0 0 3px; font-size:var(--sm-t-micro); font-weight:700; letter-spacing:.04em;
  color:var(--sm-action-text) }
.ap-nav{ display:flex; gap:8px; align-items:center; flex:none }
.ap-nav .hint{ white-space:nowrap }
.ap-open{ white-space:nowrap }
.ap-open.is-here{ background:var(--sm-action-subtle); border-color:var(--sm-action);
  color:var(--sm-action-text) }

/* --- Bid evidence: how far, and what is stopping it (D174) -------------------------------- */
.ev-progress-label{ margin:0 0 7px; font-size:var(--sm-t-label); color:var(--sm-ink-2) }
.ev-progress-label b{ font-size:var(--sm-t-section); color:var(--sm-ink) }
.ev-progress{ display:block; height:8px; border-radius:4px; background:var(--sm-inset);
  overflow:hidden; margin-bottom:13px }
.ev-progress>i{ display:block; height:100%; border-radius:4px; background:var(--sm-ok); min-width:2px }
/* A mandatory requirement with nothing behind it decides whether the bid is read at all. It
   used to look exactly like every other row. */
.req.blocking{ border-color:var(--sm-danger) }
.req.blocking .req-n{ background:var(--sm-danger-dim); color:var(--sm-danger) }


/* --- D250: a plan is a snapshot, and the record moves underneath it ---------------------------
   Walked a week after it was written, the way forward told somebody to chase three company
   documents that were already on file. The plan is not rewritten — it is a record of what was
   decided — so what is TRUE NOW is put beside it, and the page says how old the plan is.
   Coloured from the tokens, not from hex: --sm-cert is the sheet's "needs attention" and has a
   readable light-mode value, which a hand-picked amber on white does not. */
.plan-stale{background:var(--sm-cert-dim);border:1px solid var(--sm-cert);
  border-radius:var(--sm-r-card);padding:14px 17px;margin:0 0 14px}
.plan-stale .ps-lede{margin:0;font-size:var(--sm-t-label);font-weight:650;color:var(--sm-ink-1);
  line-height:1.5}
.plan-stale .ps-what{margin:7px 0 0;font-size:var(--sm-t-micro);color:var(--sm-ink-2);
  line-height:1.6;max-width:95ch}
.plan-stale form{margin-top:11px}
.req-counts b.ps-warn{color:var(--sm-cert)}

/* What is true NOW about exactly what one step names. Counted from the record, never a model's
   opinion of whether a step is done — so a green line here means the application checked. */
.plan-live{margin:7px 0 0 26px;font-size:var(--sm-t-micro);line-height:1.55;
  background:var(--sm-cert-dim);border:1px solid var(--sm-cert);color:var(--sm-ink-2);
  border-radius:var(--sm-r-control);padding:7px 11px}
.plan-live.ok{background:var(--sm-exp-dim);border-color:var(--sm-exp);color:var(--sm-ink-2)}

/* D251: a button that takes fifteen seconds says so. The spinner is a border, not an image —
   nothing to load, and it degrades to a plain disabled button where animation is turned off. */
.action.is-working{opacity:.75;cursor:progress;position:relative;padding-left:30px}
.action.is-working::before{content:"";position:absolute;left:11px;top:50%;width:12px;height:12px;
  margin-top:-6px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
  animation:sm-spin .8s linear infinite}
@keyframes sm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.action.is-working::before{animation:none;opacity:.5}}
.slow-note{margin:8px 0 0;font-size:var(--sm-t-micro);line-height:1.55;color:var(--sm-ink-2);
  max-width:70ch}

/* D252: one certification picker for the whole stage, not one per requirement.
   Deliberately NOT .req-edit — that is a 320px floating popover for a one-field row control, and
   this holds two pickers, one of them full requirement sentences. Inline and full width, so the
   requirement you are choosing is readable. */
.ev-cert{margin-top:14px;border:1px solid var(--sm-line);border-radius:var(--sm-r-card);
  background:var(--sm-raised)}
.ev-cert > summary{padding:11px 15px;border-radius:var(--sm-r-card);display:inline-block}
.ev-cert[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.ev-cert > form{display:grid;gap:10px;padding:4px 18px 18px;max-width:760px}
.ev-cert label{display:block;font-size:var(--sm-t-micro);text-transform:uppercase;
  letter-spacing:.06em;color:var(--sm-ink-3);font-weight:750}
.ev-cert select{width:100%;font:inherit;font-size:var(--sm-t-label);margin-top:4px;padding:7px 9px;
  border-radius:var(--sm-r-control);text-transform:none;letter-spacing:0;color:inherit;
  background:var(--sm-surface);border:1px solid var(--sm-line-strong)}
.ev-cert .action{justify-self:start}

/* --- D256: one line per piece of evidence, on one left edge -----------------------------------
   The sponsor sent a screenshot of this and asked whether it was a design. It was not. The status
   tag, the kind tag, the text, the rationale and three buttons each began at a different x, over
   three lines, and the kind was printed twice — once as a tag and again as the rationale, because
   for external evidence those are the same sentence. Forty-one requirements of that. */
.ev-row{display:flex;align-items:center;gap:10px;margin:6px 0 0 26px;padding:8px 11px;
  background:var(--sm-raised);border:1px solid var(--sm-line);border-radius:var(--sm-r-control)}
.ev-what{flex:1;min-width:0}
.ev-title{display:block;font-size:var(--sm-t-label);line-height:1.45;color:var(--sm-ink-1)}
.ev-row small{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-3);margin-top:2px;
  line-height:1.45}
.ev-do{display:flex;gap:6px;flex-shrink:0}
.ev-do form{display:inline}
/* Remove is destructive and had the same weight as Confirm. It keeps the red and loses the
   equal footing: the quietest control in the row. */
.action.quiet-danger{color:var(--sm-danger);border-color:transparent;background:transparent}
.action.quiet-danger:hover{border-color:var(--sm-danger);background:var(--sm-danger-dim)}
.action.go{color:var(--sm-exp);border-color:var(--sm-exp)}

/* NOT a marker fix. I read the square "+" beside "Attach evidence" as a broken icon and was
   wrong: it is the house disclosure marker, drawn for every <details> in the application by the
   lowest-specificity rule near the end of this file. Adding a plus to the label would have shown
   two. Left exactly as it was. */

/* --- D257: the "you are here" band, first thing on every bid stage ----------------------------
   Stage 4 was 5 365 pixels with 42 identical buttons; stage 1 was fourteen fields, nine of them a
   dash. Every stage showed STATE and never said WHAT NOW. Three parts and never four: what this
   stage is for, where this bid stands in a sentence, and one thing to do. */
.sg{background:var(--sm-panel);border:1px solid var(--sm-line);border-left-width:3px;
  border-radius:var(--sm-r-card);padding:17px 21px 19px;margin:0 0 16px}
.sg-block{border-left-color:var(--sm-cert)}
.sg-go{border-left-color:var(--sm-exp)}
.sg-plain{border-left-color:var(--sm-line-strong)}
.sg-eyebrow{margin:0;font-size:var(--sm-t-micro);font-weight:750;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sm-ink-3)}
.sg-where{margin-top:13px}
.sg-block .sg-where{color:var(--sm-cert)}
.sg-go .sg-where{color:var(--sm-exp)}
.sg-purpose{margin:5px 0 0;font-size:var(--sm-t-label);line-height:1.62;color:var(--sm-ink-2);
  max-width:96ch}
/* The sentence a person acts on, so it reads at body weight rather than as a caption. */
.sg-standing{margin:5px 0 0;font-size:var(--sm-t-label);line-height:1.62;color:var(--sm-ink-1);
  max-width:96ch}
.sg-do{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:15px 0 0}
.sg-then{font-size:var(--sm-t-micro);color:var(--sm-ink-3)}

/* --- D257: the evidence queue — the seven that matter, one at a time -------------------------- */
.evq{background:var(--sm-panel);border:1px solid var(--sm-exp);border-radius:var(--sm-r-card);
  padding:18px 22px 20px;margin:0 0 16px}
.evq-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.evq-step{font-size:var(--sm-t-micro);font-weight:800;letter-spacing:.06em;color:var(--sm-exp);
  text-transform:uppercase}
.evq-dots{display:inline-flex;gap:5px}
.evq-dots i{width:8px;height:8px;border-radius:50%;background:var(--sm-line-strong)}
.evq-dots i.on{background:var(--sm-exp)}
.evq-note{font-size:var(--sm-t-micro);color:var(--sm-ink-3)}
.evq-eyebrow{margin:0;font-size:var(--sm-t-micro);font-weight:750;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sm-ink-3)}
.evq-ok{color:var(--sm-exp)}
.evq-ask{margin:5px 0 13px;font-size:var(--sm-t-section);line-height:1.5;color:var(--sm-ink-1);
  max-width:92ch}
.evq-why{margin:5px 0 14px;font-size:var(--sm-t-label);line-height:1.6;color:var(--sm-ink-2);
  max-width:92ch}
.evq-suggest{background:var(--sm-exp-dim);border:1px solid var(--sm-exp);
  border-radius:var(--sm-r-card);padding:13px 16px 14px}
.evq-cand{display:flex;align-items:center;gap:14px;margin-top:9px}
.evq-cand > span{flex:1;min-width:0}
.evq-cand b{display:block;font-size:var(--sm-t-label);color:var(--sm-ink-1)}
.evq-cand small{display:block;font-size:var(--sm-t-micro);color:var(--sm-ink-2);line-height:1.5;
  margin-top:2px}
.evq-none{background:var(--sm-raised);border:1px solid var(--sm-line);
  border-radius:var(--sm-r-card);padding:13px 16px 14px}
.evq-none p:last-child{margin:6px 0 0;font-size:var(--sm-t-label);line-height:1.6;
  color:var(--sm-ink-2);max-width:92ch}
.evq-do{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-top:14px}
.action.quiet{border-color:transparent;background:transparent;color:var(--sm-ink-3)}
.action.quiet:hover{border-color:var(--sm-line-strong);color:var(--sm-ink-1)}
.evq-foot{margin:12px 0 0;font-size:var(--sm-t-micro);color:var(--sm-ink-3);line-height:1.55;
  max-width:92ch}

/* --- D263: the one door's second way in — a pasted list, on the same screen ------------------- */
.door-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;
  font-size:var(--sm-t-micro);font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sm-ink-3)}
.door-or::before,.door-or::after{content:"";flex:1;height:1px;background:var(--sm-line)}
.door-eyebrow{margin:0 0 5px;font-size:var(--sm-t-micro);font-weight:750;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sm-ink-3)}
.door-paste p{font-size:var(--sm-t-label);line-height:1.6;color:var(--sm-ink-2);margin:0 0 10px}
.door-paste textarea{width:100%;font:inherit;font-size:var(--sm-t-label);padding:9px 11px;
  border-radius:var(--sm-r-control);background:var(--sm-raised);color:inherit;
  border:1px solid var(--sm-line-strong);resize:vertical}
.door-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:11px}

/* --- D269: the write-up edit form ------------------------------------------------------------
   "This layout is terrible, buttons overlap and there is no way to add an area and the years
   experience is misaligned to the drop down." */
.exp-years{max-width:120px;flex:0 0 auto}
/* Save and Remove are two separate forms — a form cannot nest inside another — so the row is what
   puts them on one line instead of stacking and colliding. */
.exp-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.exp-actions form{display:inline;margin:0}
.exp-actions .hint{margin:0;max-width:60ch}

/* --- D275: tick a requirement as you read it ------------------------------------------------- */
.req-tick{display:inline-flex;align-items:center;margin-right:2px}
.req-tick input{width:17px;height:17px;accent-color:var(--sm-exp);cursor:pointer;margin:0}
.req-check{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--sm-line)}
.req-check .hint{margin:0;max-width:78ch}

/* D276: messages on a bid page. They were raised and never rendered. */
.bid-messages{margin:0 0 14px}
.bid-messages .note{margin:0 0 8px}
.bid-messages .note:last-child{margin-bottom:0}

/* D302: a line manager's team certifications by expiry. Three tiles that are also the tabs, and a
   red status pill beside the existing ok and warn ones. Designed in Figma first. */
.metrics.three{grid-template-columns:repeat(3,1fr)}
.metric.warn strong{color:#f0b429}
a.metric[aria-current="page"]{border-color:var(--ft-blue);box-shadow:inset 0 0 0 1px var(--ft-blue)}
a.metric.danger[aria-current="page"]{border-color:var(--sm-danger);box-shadow:inset 0 0 0 1px var(--sm-danger)}
a.metric.warn[aria-current="page"]{border-color:#f0b429;box-shadow:inset 0 0 0 1px #f0b429}
.pill.danger{background:rgba(255,92,92,.14);color:var(--sm-danger)}
.cd-table td.end{text-align:right;white-space:nowrap}

/* D336: the same five-step profile-completion measure for a manager and an administrator.
   This is a bounded checklist, never an employee score. */
.pc-team{margin-bottom:14px;border-top:3px solid var(--sm-exp)}
.pc-eyebrow{margin:0 0 4px;font-size:var(--sm-t-micro);font-weight:750;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sm-exp)}
.pc-team .panel-head>div,.pc-admin .panel-head>div{min-width:0;max-width:82ch}
.pc-team .panel-head .hint,.pc-admin .panel-head .hint{margin:4px 0 0;line-height:1.5}
.pc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 12px}
.pc-metrics>div{padding:13px 15px;background:var(--sm-raised);border:1px solid var(--sm-line);
  border-radius:var(--sm-r-card)}
.pc-metrics span,.pc-metrics small{display:block;color:var(--sm-ink-3);font-size:var(--sm-t-micro)}
.pc-metrics strong{display:block;margin:5px 0 3px;color:var(--sm-ink);font-size:var(--sm-t-title)}
.pc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pc-steps a{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:10px 12px;
  border:1px solid var(--sm-line);border-radius:var(--sm-r-control);background:var(--sm-inset);
  color:var(--sm-ink-2);text-decoration:none;font-size:var(--sm-t-micro)}
.pc-steps a:hover{border-color:var(--sm-line-strong)}
.pc-steps b{grid-row:1 / span 2;grid-column:2;color:var(--sm-cert);font-size:var(--sm-t-section)}
.pc-steps small{color:var(--sm-ink-3)}
.pc-steps a.done b,.pc-steps a.done small{color:var(--sm-ok)}
.pc-admin{margin-bottom:14px}
.pc-dashboard{border-top:3px solid var(--sm-exp)}
.pc-dashboard .results-scroll{margin-top:2px}
.pc-more{margin:10px 0 0;color:var(--sm-ink-2);font-size:var(--sm-t-micro);text-align:right}
.pc-more a{color:var(--sm-action-text);font-weight:700}
.pc-manager-table td{vertical-align:middle}
.pc-inline-track{display:inline-block;width:82px;height:7px;margin-right:8px;border-radius:4px;
  background:var(--sm-inset);overflow:hidden;vertical-align:middle}
.pc-inline-track i{display:block;height:100%;min-width:2px;border-radius:4px;background:var(--sm-exp)}
.pc-manager-table td b{font-variant-numeric:tabular-nums}
.pc-attention{color:var(--sm-cert)}
@media (max-width:900px){.pc-steps{grid-template-columns:repeat(2,1fr)}
  .pc-metrics{grid-template-columns:1fr}.pc-team .panel-head{align-items:flex-start;flex-direction:column}}

/* D304: a suggestion on the review panel — the gate read the document as this kind. An outline, never a
   default: every option stays available and none is pre-chosen. */
.action.suggest{color:#f0b429;border-color:rgba(240,180,41,.6)}
.action.suggest:hover{background:rgba(240,180,41,.12);color:#f0b429}

/* D365 — approvals: aligned facts, one disclosure, decision controls on demand. */
.approvals-queue{min-width:0;--claim-columns:minmax(140px,1.15fr) minmax(200px,2.2fr) minmax(80px,.42fr) minmax(110px,.7fr) 76px}
.approvals-total{margin:var(--sm-space-16) 0;font-size:var(--sm-t-body)}
.approvals-sections{display:flex;flex-wrap:wrap;gap:var(--sm-space-16);margin-bottom:var(--sm-space-24)}
.approvals-sections a{color:var(--sm-ink);font-size:var(--sm-t-label);text-decoration:none}
.approvals-sections a:hover{text-decoration:underline}
.approvals-queue>.panel{margin-top:var(--sm-space-16);min-width:0;scroll-margin-top:var(--sm-space-16)}
.approvals-claims{padding:0;overflow:hidden}
.approvals-claims>.panel-head{padding:var(--sm-space-16);margin:0}
.claim-columns,.app-window .claim-review>.claim-row{display:grid;grid-template-columns:var(--claim-columns);gap:var(--sm-space-16);padding:var(--sm-space-16);align-items:center}
.claim-columns{background:var(--sm-raised);color:var(--sm-ink-2);font-size:var(--sm-t-micro)}
.app-window .claim-review>.claim-row::before{content:none}
.app-window .claim-review>.claim-row{min-height:80px;font-size:var(--sm-t-label);border-top:1px solid var(--sm-line)}
.claim-row>span{min-width:0;overflow-wrap:anywhere}
.claim-person strong{display:block;font-weight:600}
.claim-person small,.claim-submitted{color:var(--sm-ink-2);font-size:var(--sm-t-micro)}
.claim-person small{display:block;margin-top:var(--sm-space-4)}
.claim-levels{display:flex;flex-wrap:wrap;gap:var(--sm-space-4)}
.claim-open{justify-self:start;background:var(--sm-action-subtle);border-color:transparent;white-space:nowrap}
.claim-review[open]>.claim-row .claim-open{border-color:var(--sm-focus)}
.claim-decision{padding:var(--sm-space-16);background:var(--sm-raised);font-size:var(--sm-t-label);overflow-wrap:anywhere}
.claim-decision h4{margin:0 0 var(--sm-space-16);font-size:var(--sm-t-label)}
.claim-decision p{margin:0 0 var(--sm-space-12)}
.claim-advice,.claim-guidance{color:var(--sm-ink-2)}
.claim-decision blockquote{margin:var(--sm-space-12) 0;padding-left:var(--sm-space-12);border-left:2px solid var(--sm-line-strong)}
.claim-actions,.claim-actions form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sm-space-8)}
.claim-actions form{margin:0}
.approvals-section-hint{margin:0 0 var(--sm-space-8);color:var(--sm-ink-2);font-size:var(--sm-t-label)}
.approvals-help{margin-bottom:var(--sm-space-16);font-size:var(--sm-t-label)}
.approvals-help p{max-width:80ch;color:var(--sm-ink-2);line-height:1.6}
@media(max-width:1100px){
 .claim-columns{display:none}
 .app-window .claim-review>.claim-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--sm-space-12);align-items:start}
 .claim-person{grid-column:1}.claim-open{grid-column:2;grid-row:1}
 .claim-skill{grid-column:1/-1}.claim-levels{grid-column:1;grid-row:3}.claim-submitted{grid-column:1/-1;grid-row:4}
 .claim-levels::before,.claim-submitted::before{content:attr(data-label) ": ";color:var(--sm-ink-2);font-size:var(--sm-t-micro)}
 .approvals-queue .approval-people{grid-template-columns:minmax(0,1fr)}
 .claim-actions .action{white-space:normal}
}

/* D366 — requested changes and uploaded evidence on the same aligned grid as the claims.
   Changes keep the claims' total width and track count, so Person, Asked/Submitted and Action
   share grid lines; evidence uses the claims grid itself with Ready spanning two tracks. */
.approvals-queue{--change-columns:minmax(140px,1.15fr) minmax(160px,1.42fr) minmax(150px,1.2fr) minmax(110px,.7fr) 76px}
.approvals-list{padding:0;overflow:hidden}
.approvals-list>.panel-head{padding:var(--sm-space-16);margin:0}
.approvals-list-hint{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sm-space-8) var(--sm-space-16);margin:0;padding:0 var(--sm-space-16) var(--sm-space-12);color:var(--sm-ink-2);font-size:var(--sm-t-label)}
.approvals-list-hint .approvals-section-hint,.approvals-list-hint .approvals-help{margin:0}
.approvals-list-hint .approvals-help{flex:1 1 320px}
.app-window .change-review>.change-row,.change-columns{grid-template-columns:var(--change-columns)}
.change-record small{display:block;margin-top:var(--sm-space-4);color:var(--sm-ink-2);font-size:var(--sm-t-micro)}
.change-what{font-weight:600}
.change-record,.change-what{line-height:1.4}
.change-review .claim-actions{margin-bottom:var(--sm-space-12)}
.change-what>span{display:block}
.evidence-columns,.app-window .evidence-row{grid-template-columns:var(--claim-columns)}
.evidence-columns .evidence-ready,.evidence-row .evidence-ready{grid-column:span 2}
.app-window .evidence-row{display:grid;gap:var(--sm-space-16);padding:var(--sm-space-16);align-items:center;min-height:80px;border-top:1px solid var(--sm-line);color:var(--sm-ink);font-size:var(--sm-t-label);text-decoration:none}
.app-window .evidence-row:hover{background:var(--sm-raised)}
.app-window .evidence-row:focus-visible{outline:2px solid var(--ft-blue);outline-offset:-2px}
.evidence-row>span{min-width:0;overflow-wrap:anywhere}
.evidence-waiting b,.evidence-ready b{font-weight:600;font-variant-numeric:tabular-nums}
.evidence-waiting small{display:block;margin-top:var(--sm-space-4);color:var(--sm-ink-2);font-size:var(--sm-t-micro)}
.evidence-ready .is-ready{color:var(--sm-action-text)}
.evidence-ready .is-none-ready{color:var(--sm-ink-2);font-size:var(--sm-t-micro)}
/* The units are read aloud on desktop, where the column headings say them, and shown on phones. */
.evidence-unit{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:1100px){
 .app-window .change-review>.change-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--sm-space-12);align-items:start}
 .change-record,.change-what{grid-column:1/-1}
 .app-window .evidence-row{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sm-space-4) var(--sm-space-12);align-items:start;min-height:0}
 .evidence-row .claim-person{grid-column:1/3;grid-row:1}
 .evidence-row .evidence-waiting{grid-column:1;grid-row:2}
 .evidence-row .evidence-ready{grid-column:2;grid-row:2}
 .evidence-row .claim-open{grid-column:3;grid-row:1/3;align-self:center}
 .evidence-unit{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
 .evidence-ready .is-none-ready{font-size:inherit}
 /* The document count sits under the waiting count without widening its column. */
 .evidence-waiting small{width:0;white-space:nowrap}
}

/* D369 — credential decisions on the approvals grid. Reason filters reconcile with the rows below;
   "Why it needs you" spans the Claimed and Submitted tracks, as Ready to decide does for evidence. */
.decision-reasons{display:flex;flex-wrap:wrap;gap:var(--sm-space-8);margin:0 0 var(--sm-space-16)}
.decision-reasons a{display:inline-flex;align-items:baseline;gap:var(--sm-space-8);padding:var(--sm-space-8) var(--sm-space-12);border:1px solid var(--sm-line);border-radius:var(--sm-r-control);color:var(--sm-ink);font-size:var(--sm-t-label);text-decoration:none}
.decision-reasons a:hover{border-color:var(--sm-line-strong)}
.decision-reasons a.is-on{background:var(--sm-action-subtle);border-color:var(--sm-line-strong)}
.decision-search{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sm-space-8);margin:0 0 var(--sm-space-16)}
.decision-search input{flex:0 1 320px;min-width:0}
.app-window .decision-review>.decision-row,.decision-columns{grid-template-columns:var(--claim-columns)}
.decision-columns .decision-why,.decision-row .decision-why{grid-column:span 2}
.decision-row .decision-why{font-weight:600;line-height:1.4}
.decision-note label{display:flex;flex-direction:column;gap:var(--sm-space-4);margin:0 0 var(--sm-space-12);color:var(--sm-ink-2);font-size:var(--sm-t-micro)}
.decision-note input{width:100%}
.decision-review .claim-actions{margin-bottom:var(--sm-space-12)}
@media(max-width:1100px){
 .app-window .decision-review>.decision-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--sm-space-12);align-items:start}
 .decision-row .change-record,.decision-row .decision-why{grid-column:1/-1}
}

/* D386: every dropdown shows a + at its right edge in ink-2, never the browser's arrow (Vaughan,
   2026-10-11: "use the + everywhere"; Figma "02 Components → Input and select"). The + is drawn as
   two gradient bars so it takes the theme colour; it cannot be a ::after, which a <select> does not
   have. Many containers set the `background` shorthand, which would wipe a background-image, so the
   marker's own properties are !important. List boxes (multiple/size) keep no marker. */
.app-window select:not([multiple]):not([size]){
  -webkit-appearance:none !important; appearance:none !important; padding-right:28px !important;
  background-image:linear-gradient(var(--sm-ink-2),var(--sm-ink-2)),linear-gradient(var(--sm-ink-2),var(--sm-ink-2)) !important;
  background-size:10px 1.5px,1.5px 10px !important;
  background-position:right 11px center,right 15.25px center !important;
  background-repeat:no-repeat !important; }
/* Compact rows (D317) carry a smaller +; a level badge's + is its own text colour. */
.app-window .inline-exp select:not([multiple]):not([size]),
.app-window .cert-list .sk-lv select:not([multiple]):not([size]){
  padding-right:18px !important; background-size:8px 1.5px,1.5px 8px !important;
  background-position:right 6px center,right 9.25px center !important; }
.app-window .inline-exp select.lvl-c,.app-window .inline-exp select.lvl-e{
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor) !important; }

/* D388: an open row menu floats over the page. Inside a table's scrolling wrapper an absolutely
   placed menu was clipped, and the table grew its own scrollbar to reach it. base.html places it
   with position:fixed against the ⋯ button; without JavaScript the old placement still applies. */
.rowmenu-pop.is-floating { position:fixed; z-index:200; }

/* D393: a line manager's name in the profile-compliance tables opens that manager's profile. */
a.pc-mgr{color:var(--ft-blue-text);text-decoration:none}
a.pc-mgr:hover,a.pc-mgr:focus-visible{text-decoration:underline}

/* D396: the Certifications widget — fixed columns, status under the name, rarer actions in ⋯. */
.cert-list .cert-head,
.cert-list .sk-row.cert-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 64px 190px 44px;
  column-gap:14px;align-items:center}
.cert-list .cert-head{padding:6px 0;font-size:var(--sm-t-micro);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sm-ink-3);border-bottom:1px solid var(--sm-line)}
.cert-list .cert-head span:last-child{text-align:right}
.cert-row .cr-name{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.cert-row .cr-name a{color:inherit;text-decoration:none;overflow-wrap:anywhere}
.cert-row .cr-name a:hover{color:var(--ft-blue-text);text-decoration:underline}
.cert-row .cr-name .pill{font-size:var(--sm-t-micro);white-space:normal}
.cert-row .cr-exp{font-size:var(--sm-t-label);color:var(--sm-ink-2)}
.cert-row .cr-exp.is-warn{color:#f0b429}
.cert-row .cr-exp.is-bad{color:var(--sm-danger)}
.cert-row .lvl-badge{display:inline-block;padding:2px 8px;border-radius:4px;background:#24467a;color:#fff;
  font-size:var(--sm-t-micro);font-weight:700;letter-spacing:.03em}
.cert-row .cr-file .nofile{font-size:var(--sm-t-micro);color:var(--sm-ink-3)}
.cert-row .cr-more{justify-self:end}
.cert-row .cr-panel,.cert-row .sk-pending{grid-column:1/-1}
.cert-row .cr-panel > summary{display:none}
.cert-row .cr-panel:not([open]){display:none}
.cert-row .cr-panel{margin:8px 0 2px;padding:12px;border:1px solid var(--sm-line);border-radius:var(--sm-r-card);
  background:var(--sm-raised)}
.cert-row .cr-panel-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
.cert-row .cr-panel-row form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cert-row .cr-panel-row .lbl{margin:0}
.cert-row .cr-panel-row select,.cert-row .cr-panel-row input[type=date]{width:auto;min-width:120px}
.rowmenu-pop button{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;
  font-size:var(--sm-t-label);padding:var(--sm-space-8) var(--sm-space-12);border-radius:var(--sm-r-control);cursor:pointer}
.rowmenu-pop button:hover{background:var(--sm-raised)}
.rowmenu-pop button.danger{color:var(--sm-danger)}
.rowmenu-pop form{margin:0}
.rowmenu-pop hr{border:0;border-top:1px solid var(--sm-line);margin:4px 0}
@media (max-width:820px){
  .cert-list .cert-head{display:none}
  .cert-list .sk-row.cert-row{grid-template-columns:minmax(0,1fr) auto auto;row-gap:6px}
  .cert-row .cr-name{grid-column:1/-1}
  .cert-row .cr-exp{grid-column:1}
}

/* D407 — Certified staff by vendor / category / engineer: the home card and the report. Designed in
   Figma first ("D407 — Home: Certified staff by vendor (card)", "D407 — Report: Certified staff").
   One horizontal bar per vendor, in the certification colour the dashboard already uses. */
.cv-switch{ display:inline-flex; border:1px solid var(--sm-line-strong); border-radius:var(--sm-r-control); overflow:hidden; margin-bottom:12px }
.cv-switch a{ padding:7px 14px; font-size:var(--sm-t-label); color:var(--sm-ink-2); text-decoration:none }
.cv-switch a + a{ border-left:1px solid var(--sm-line-strong) }
.cv-switch a.on{ background:var(--sm-action); color:#fff; font-weight:650 }
.cv-switch a:focus-visible{ outline:2px solid var(--sm-focus); outline-offset:-2px }
.cv-head{ display:flex; justify-content:space-between; font-size:var(--sm-t-micro); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--sm-ink-3); padding:0 0 4px }
.cv-row{ display:flex; align-items:center; gap:12px; padding:6px 4px; border-radius:6px; color:inherit; text-decoration:none }
.cv-row:hover, .cv-row.on{ background:var(--sm-raised) }
.cv-row:focus-visible{ outline:2px solid var(--sm-focus); outline-offset:1px }
.cv-name{ flex:0 0 200px; min-width:0; display:flex; flex-direction:column; line-height:1.25 }
.cv-name b{ font-size:var(--sm-t-label); font-weight:650; color:var(--sm-ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cv-name small{ font-size:var(--sm-t-micro); color:var(--sm-ink-3) }
.cv-track{ flex:1 1 auto; min-width:0; height:10px; border-radius:3px; background:var(--sm-raised) }
.cv-row:hover .cv-track, .cv-row.on .cv-track{ background:var(--sm-surface) }
.cv-track i{ display:block; height:100%; min-width:3px; border-radius:3px; background:var(--sm-cert) }
.cv-n{ flex:0 0 44px; text-align:right; font-size:var(--sm-t-label); font-weight:650; font-variant-numeric:tabular-nums }
.cv-more{ margin-top:6px; border-top:1px solid var(--sm-line); padding-top:10px }
.cv-more > summary{ display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-size:var(--sm-t-label); font-weight:650; color:var(--sm-action-text) }
.cv-more > summary::-webkit-details-marker{ display:none }
.cv-more[open] > summary{ margin-bottom:8px }
.cv-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px;
  font-size:var(--sm-t-micro); color:var(--sm-ink-3) }
.cv-foot a{ font-size:var(--sm-t-label); font-weight:650 }
@media (max-width:640px){ .cv-name{ flex-basis:120px } }

/* D409 — a report built in the assistant. Designed in Figma first ("D409 — Assistant: report in the
   chat", card 106:650). A sibling of the bot bubble; the message widens to hold the table. */
.msg.bot.has-report{ max-width:min(860px,100%); width:100% }
.rc{ margin-top:8px; background:var(--sm-surface); border:1px solid var(--sm-line); border-radius:var(--sm-r-card);
  padding:20px 20px 16px; display:flex; flex-direction:column; gap:16px; min-width:0 }
.rc-head{ display:flex; flex-direction:column; gap:6px }
.rc-head h4{ margin:0; font-size:16px; font-weight:600; color:var(--sm-ink) }
.rc-head p{ margin:0; font-size:12px; line-height:1.5; color:var(--sm-ink-2) }
.rc-chips{ display:flex; flex-wrap:wrap; gap:6px }
.rc-meta{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center }
.rc-sum{ font-size:var(--sm-t-body); font-weight:650; color:var(--sm-ink); margin-right:4px; font-variant-numeric:tabular-nums }
.rc-chip{ border-radius:var(--sm-r-pill); padding:3px 10px; background:var(--sm-raised); border:1px solid var(--sm-line);
  font-size:11px; font-weight:500; color:var(--sm-ink-2) }
.rc-chip i{ font-style:normal; font-weight:400; color:var(--sm-ink-3) }
.rc-totals{ display:flex; gap:10px }
.rc-totals > div{ flex:1; min-width:0; background:var(--sm-inset); border:1px solid var(--sm-line); border-radius:8px;
  padding:10px 14px; display:flex; flex-direction:column; gap:2px }
.rc-totals b{ font-size:22px; font-weight:600; color:var(--sm-ink); font-variant-numeric:tabular-nums }
.rc-totals span{ font-size:11px; color:var(--sm-ink-2) }
.rc-chart{ display:flex; flex-direction:column; gap:10px; padding-top:4px }
.rc-chart-head{ display:flex; justify-content:space-between; align-items:baseline }
.rc-chart-head b{ font-size:12px; font-weight:600; color:var(--sm-ink) }
.rc-chart-head span{ font-size:11px; color:var(--sm-ink-3) }
.rc-bar{ display:grid; grid-template-columns:210px 1fr 28px; gap:12px; align-items:center }
.rc-bar > span:first-child{ font-size:12px; font-weight:500; color:var(--sm-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rc-track{ height:10px; border-radius:3px; background:var(--sm-line) }
.rc-track i{ display:block; height:100%; min-width:3px; border-radius:3px; background:var(--sm-cert) }
.rc-bar b{ font-size:12px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums }
.rc-notes{ margin:0; padding-left:18px; font-size:11px; color:var(--sm-ink-2) }
.rc-table{ border:1px solid var(--sm-line); border-radius:8px; overflow-x:auto }
.rc-table .cd-table{ width:100%; margin:0 }
.rc-table .cd-table td{ white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis }
.rc-table .cd-table td:first-child{ font-weight:500 }
.rc-more{ margin:-8px 0 0; font-size:11px; color:var(--sm-ink-3) }
.rc-foot{ border-top:1px solid var(--sm-line); padding-top:14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.rc-trust{ margin-left:auto; font-size:11px; color:var(--sm-ink-3) }
@media (max-width:700px){ .rc{ padding:16px } .rc-totals b{ font-size:18px } .rc-bar{ grid-template-columns:minmax(0,40%) 1fr 28px } }
@media (max-width:560px){ .rc-foot .action{ flex:1; text-align:center } .rc-trust{ margin-left:0; flex-basis:100% } }
.msg.bot.has-report > .bubble{ align-self:flex-start; max-width:min(80ch,100%) }

/* D411 — the assistant redesigned (Figma "D411 — Assistant redesign" 1–4). The conversation and its
   box in the middle; Your reports on the right, behind a button on narrow screens. */
.as-layout{ display:block }
.as-layout.has-rail{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:stretch }
.as-rail-toggle{ display:none }
.as-empty{ margin:auto 0; padding:28px 4px; display:flex; flex-direction:column; align-items:center; gap:18px }
.as-empty > h3{ margin:0; font-size:22px; font-weight:600; color:var(--sm-ink) }
.as-empty > p{ margin:-10px 0 0; font-size:13px; color:var(--sm-ink-2); text-align:center }
.as-starts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; width:100%; max-width:880px }
.as-start{ background:var(--sm-surface); border:1px solid var(--sm-line); border-radius:var(--sm-r-card); padding:16px 16px 10px;
  display:flex; flex-direction:column; gap:8px }
.as-start h4{ margin:0; font-size:14px; font-weight:600; color:var(--sm-ink) }
.as-start p{ margin:0; font-size:12px; line-height:1.5; color:var(--sm-ink-2) }
.as-start ul{ list-style:none; margin:4px 0 0; padding:0 }
.as-start li{ border-top:1px solid var(--sm-line) }
.as-prompt{ all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; gap:8px; padding:8px 0;
  cursor:pointer; font-size:12px; font-weight:500; line-height:1.45; color:var(--sm-action-text) }
.as-prompt span{ color:var(--sm-ink-3) }
.as-prompt:hover{ text-decoration:underline }
.as-prompt:focus-visible{ outline:2px solid var(--sm-focus); outline-offset:2px; border-radius:3px }
.as-prompt.is-inline{ display:inline; width:auto; padding:0 }
.as-admin{ margin:0; font-size:12px; color:var(--sm-ink-3); text-align:center; max-width:880px }
/* Matches while typing: sits directly above the box, inside the chat column. */
.as-live{ margin:0 0 8px; background:var(--sm-surface); border:1px solid var(--sm-line-strong); border-radius:var(--sm-r-card);
  max-height:46vh; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.25) }
.as-live-h{ padding:9px 14px 4px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sm-ink-3) }
.as-live-row{ display:flex; align-items:center; gap:10px; padding:7px 14px; color:inherit; text-decoration:none }
.as-live-row:hover, .as-live-row.on{ background:var(--sm-raised) }
.as-live-av{ flex:0 0 24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700;
  background:var(--sm-action-subtle); color:var(--sm-action-text) }
.as-live-av.is-skills, .as-live-av.is-vendors{ background:var(--sm-cert-dim, var(--sm-raised)); color:var(--sm-cert) }
.as-live-tx{ min-width:0; display:flex; flex-direction:column }
.as-live-tx b{ font-size:13px; font-weight:500; color:var(--sm-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.as-live-tx em{ font-style:normal; font-size:11px; font-weight:600; color:var(--sm-ink) }
.as-live-tx small{ font-size:11px; color:var(--sm-ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.as-live-foot{ padding:8px 14px; font-size:11px; color:var(--sm-ink-3); background:var(--sm-inset); border-top:1px solid var(--sm-line) }
/* Your reports. */
.as-rail{ background:var(--sm-surface); border:1px solid var(--sm-line); border-radius:var(--sm-r-card); padding:18px;
  display:flex; flex-direction:column; gap:10px; overflow-y:auto; max-height:calc(100vh - 168px) }
.as-rail h3{ margin:0; font-size:14px; font-weight:600; color:var(--sm-ink) }
.as-rail-note, .as-rail-empty{ margin:0; font-size:12px; line-height:1.5; color:var(--sm-ink-2) }
.as-reports{ list-style:none; margin:0; padding:0 }
.as-reports li{ display:flex; align-items:center; gap:10px; border-top:1px solid var(--sm-line); padding:8px 0 }
.as-report{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; color:inherit; text-decoration:none }
.as-report b{ font-size:12px; font-weight:500; color:var(--sm-ink) }
.as-report small{ font-size:11px; color:var(--sm-ink-3) }
.as-report:hover b{ color:var(--sm-action-text) }
.as-pdf{ flex:0 0 auto; font-size:11px; font-weight:500; color:var(--sm-ink-2); border:1px solid var(--sm-line); border-radius:4px;
  padding:3px 8px; text-decoration:none }
.as-pdf:hover{ border-color:var(--sm-action-text); color:var(--sm-action-text) }
@media (max-width:1100px){ .as-starts{ grid-template-columns:1fr } .as-start{ padding:12px 14px 6px } }
@media (max-width:900px){
  .as-layout.has-rail{ display:block }
  .as-rail-toggle{ display:inline-flex }
  .as-rail{ display:none }
  .as-rail.is-open{ display:flex; position:fixed; z-index:60; top:76px; left:12px; right:12px; bottom:12px; max-height:none;
    box-shadow:0 12px 40px rgba(0,0,0,.45) }
}
/* D412 — the Cancel button in the dictation countdown (Figma "D412 — Assistant: dictation sends itself"). */
.dictation-cancel{ margin-left:8px; padding:3px 10px; min-height:0; font-size:var(--sm-t-micro) }

/* D414 — the assistant's CX reworked (Figma "D414 — Assistant CX" 1–2). One centred column; an empty screen
   is a large question box with the suggestions as tabs beneath; Your reports is a drawer, closed by default. */
.as-layout, .as-layout.has-rail{ display:block }
.as-layout .chat{ max-width:880px; margin:0 auto }
.as-rail-toggle{ display:inline-flex; align-items:center; gap:8px }
.as-count{ min-width:20px; padding:1px 7px; border-radius:var(--sm-r-pill); background:var(--sm-raised); font-size:11px; font-weight:700; text-align:center }
.chat.is-empty{ justify-content:center; padding-bottom:6vh }
.chat.is-empty .chat-log{ flex:0 0 auto; overflow:visible }
.as-hero{ text-align:center; padding:0 0 18px }
.as-hero h3{ margin:0 0 8px; font-size:30px; font-weight:600; color:var(--sm-ink) }
.as-hero p{ margin:0; font-size:14px; color:var(--sm-ink-2) }
.composer.as-box{ flex-direction:column; align-items:stretch; gap:10px; margin-top:4px; padding:14px 12px 10px 16px;
  background:var(--sm-surface); border:1.5px solid var(--sm-line-strong); border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.28) }
.composer.as-box:focus-within{ border-color:var(--sm-focus) }
.composer.as-box textarea{ border:0; outline:0; background:transparent; padding:2px 2px; min-height:28px; font-size:15px }
.composer.as-box textarea:focus{ outline:0 }
.chat.is-empty .composer.as-box textarea{ min-height:52px }
.as-bar{ display:flex; align-items:center; gap:8px }
.as-hint{ flex:1; min-width:0; font-size:11px; color:var(--sm-ink-3) }
.as-hint kbd{ font:inherit; font-size:10px; border:1px solid var(--sm-line-strong); border-radius:3px; padding:0 4px }
.as-bar .action{ border-radius:var(--sm-r-pill); min-height:34px; padding:6px 14px; flex:0 0 auto }
.chat:not(.is-empty) .composer.as-box{ margin-bottom:10px }
.as-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 10px }
.as-tab{ font:inherit; font-size:12px; font-weight:500; cursor:pointer; padding:6px 13px; border-radius:var(--sm-r-pill);
  border:1px solid var(--sm-line); background:transparent; color:var(--sm-ink-2) }
.as-tab:hover{ border-color:var(--sm-line-strong); color:var(--sm-ink) }
.as-tab.on{ background:var(--sm-action-subtle); border-color:var(--sm-focus); color:var(--sm-action-text); font-weight:600 }
.as-tab:focus-visible{ outline:2px solid var(--sm-focus); outline-offset:2px }
.as-tp{ list-style:none; margin:0; padding:0; background:var(--sm-surface); border:1px solid var(--sm-line); border-radius:12px; overflow:hidden }
.as-tp li + li{ border-top:1px solid var(--sm-line) }
.as-tp .as-prompt{ display:flex; align-items:center; gap:10px; width:100%; padding:12px 18px; font-size:13px; font-weight:400; color:var(--sm-ink) }
.as-tp .as-prompt span, .as-tp .as-prompt i{ color:var(--sm-ink-3); font-style:normal }
.as-tp .as-prompt i{ margin-left:auto }
.as-tp .as-prompt:hover{ background:var(--sm-raised); text-decoration:none }
/* Your reports: a drawer from the right. */
.as-rail, .as-rail.is-open{ position:fixed; z-index:70; top:0; right:0; bottom:0; left:auto; width:min(380px,100vw); max-height:none;
  border-radius:0; border:0; border-left:1px solid var(--sm-line-strong); padding:20px; gap:10px;
  box-shadow:-12px 0 40px rgba(0,0,0,.45); overflow-y:auto; display:flex }
.as-rail[hidden]{ display:none }
.as-rail-head{ display:flex; align-items:center; gap:8px }
.as-rail-head h3{ flex:1; font-size:16px }
.as-rail-close{ border:0; background:none; color:var(--sm-ink-2); font-size:15px; cursor:pointer; padding:4px 6px; border-radius:4px }
.as-rail-close:hover{ background:var(--sm-raised); color:var(--sm-ink) }
.as-rail-search{ font:inherit; font-size:12px; padding:8px 12px; border-radius:8px; border:1px solid var(--sm-line); background:var(--sm-inset); color:inherit }
.as-reports li.as-day{ border-top:0; padding:12px 0 2px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sm-ink-3) }
.as-reports li.as-ri{ border-top:0; padding:2px 0 }
.as-reports li.as-ri .as-report{ padding:8px 10px; border-radius:8px }
.as-reports li.as-ri .as-report:hover{ background:var(--sm-raised) }
@media (max-width:640px){ .as-hero h3{ font-size:24px } .as-hint{ display:none } .as-bar .action{ flex:1; justify-content:center } }
/* D415: a report needs the room — the conversation column widens; text bubbles keep their reading width. */
.as-layout .chat{ max-width:1080px }
.as-layout .chat.is-empty{ max-width:880px }
.msg.bot.has-report{ max-width:100% }

/* D437: Clear chat waits in the question box, hidden, until a conversation exists. */
.as-bar .as-clear[hidden]{display:none}
/* D416 — the report panel docks beside the conversation on wide screens (Figma "D416 — Assistant: docked report
   panel + Main screen"); on narrower ones it slides in from the header's Reports button. */
.as-panel-tabs{ flex:1; display:flex; border:1px solid var(--sm-line-strong); border-radius:8px; overflow:hidden }
.as-ptab{ flex:1; font:inherit; font-size:12px; font-weight:500; padding:8px 6px; border:0; background:transparent; color:var(--sm-ink-2); cursor:pointer }
.as-ptab + .as-ptab{ border-left:1px solid var(--sm-line-strong) }
.as-ptab.on{ background:var(--sm-action-subtle); color:var(--sm-action-text); font-weight:600 }
.as-ptab:focus-visible{ outline:2px solid var(--sm-focus); outline-offset:-2px }
.as-pane{ display:flex; flex-direction:column; gap:8px }
.as-pane[hidden]{ display:none }
.as-pg{ margin:8px 0 0; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sm-ink-3) }
.as-tp-panel{ background:var(--sm-inset) }
.as-tp-panel .as-prompt{ padding:9px 12px; font-size:12px }
@media (min-width:1280px){
  .as-layout.is-chatting{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:24px; align-items:start }
  .as-layout.is-chatting .chat{ width:100%; max-width:1080px }
  .as-layout.is-chatting .as-rail{ position:sticky; top:12px; left:auto; right:auto; bottom:auto; z-index:auto; width:auto;
    height:calc(100vh - 168px); border:1px solid var(--sm-line); border-radius:var(--sm-r-card); box-shadow:none; display:flex }
  .as-layout.is-chatting .as-rail-close{ display:none }
}
@media (max-width:1279px){
  .as-layout.is-chatting .as-rail:not(.is-open){ display:none }
}
/* D418 — no second scrollbar (Vaughan: "I don't want the dual scroll"). The docked panel is only as tall as
   its content: one-line suggestions with the full text on hover, and the 8 most recent reports. */
@media (min-width:1280px){
  .as-layout.is-chatting .as-rail{ height:auto; max-height:none; overflow:visible }
}
.as-tp-panel .as-prompt{ white-space:nowrap }
.as-tp-panel .as-pq{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:left }
.as-tp-panel li + li{ border-top:1px solid var(--sm-line) }
.as-rail-more{ margin:4px 0 0; font-size:11px; color:var(--sm-ink-3) }
.as-reports li.as-ri[hidden], .as-reports li.as-day[hidden]{ display:none }

/* D479: training requests on the profile's Certifications tab. */
.pf-train{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.pf-train-row{display:flex;flex-direction:column;padding:5px 12px;border:1px solid var(--sm-line-strong);border-radius:10px;text-decoration:none;color:var(--sm-ink)}
.pf-train-row b{font-size:var(--sm-t-label)} .pf-train-row span{font-size:var(--sm-t-micro);color:var(--sm-ink-3)}
.pf-train-row:hover{border-color:var(--ft-blue)}

/* D482: a recorded leaving date on the profile. */
.pc-leaving{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0;padding:8px 12px;border:1px solid #d99a33;border-radius:10px}
.pc-leaving b{color:light-dark(#8a5a00,#f6c86a);font-size:var(--sm-t-label);margin-right:4px}
.pc-leaving form{display:inline;margin:0}
.pc-leaving.left{border-color:var(--sm-line-strong)}