/* ============================================================================
   usability.css — AI Compass additive usability layer.

   Loaded LAST in index.html, after the inline <style> block, so it wins on
   equal specificity. NEVER edit the inline <style> block; override from here.
   Same pattern as EUAIAct-Navigator/public/usability.css.

   Sections
     1. Semantic tokens
     2. Accessibility baseline (focus, contrast, motion, touch)
     3. Responsive foundation
     4. Setup wizard components (.ux*)
   ========================================================================== */


/* -- 1. Semantic tokens ---------------------------------------------------
   The existing :root names (--cool, --warm, --org, --plan, --ana, --data)
   are AI Compass DOMAIN colours (module identity) and are left untouched.
   New code uses the semantic names below. Never hardcode a colour. */
:root{
  --ux-primary:#626E8C;
  --ux-accent:#DA6E26;
  --ux-success:#0F6E56;
  --ux-warn:#A85B12;      /* reserved: validation / "needs attention" only */
  --ux-danger:#8E1F1F;    /* reserved: destructive actions only */
  --ux-surface:#ffffff;
  --ux-surface-2:#f5f6f8;
  --ux-surface-3:#eef0f4;
  --ux-text:#1c2024;
  --ux-muted:#5b6470;
  --ux-border:#e3e6ea;
  --ux-border-strong:#cdd2d8;
  --ux-radius:9px;
  --ux-radius-sm:6px;
  /* THE TWO DELIVERY THREADS — v2.12. One definition, six consumers: the fork
     on Home, the band's key, the TERA-LENS lane filter, the Roadmap lane
     rails, the Roadmap cards and the health check's build-vs-ship bar. Before
     2.12 the hexes were written out at each of those sites, so the thread
     vocabulary could (and did) drift when a stage was recoloured.
     Amber = capability, burnt orange = deployment: two tones of stage 4's
     orange, because they are two threads of ONE movement. The -fg variants are
     the darkened text colours — the identity colours are not readable at the
     9.5-11px this UI uses them at. Mirrored in ux.js `LANES`. */
  --lane-cap:#EFA52C;
  --lane-cap-fg:#8A5709;
  --lane-cap-bg:#fdf3e1;
  --lane-dep:#B8480F;
  --lane-dep-fg:#9A3D0C;
  --lane-dep-bg:#f9e5db;
  --ux-shadow:0 1px 4px rgba(98,110,140,.14);
  --ux-shadow-lift:0 5px 18px rgba(98,110,140,.18);
  --ux-tap:44px;          /* minimum tap target */
  --ux-focus:#3E7CB0;
}


/* -- 2. Accessibility baseline ------------------------------------------- */

/* 2a. Contrast. #8b95a1 on #fff measures 3.04:1 and fails WCAG AA for body
   text. #6d757e measures 4.67:1. The token is used for every .muted line in
   the app, so this single override lifts the whole product. */
:root{--color-text-tertiary:#6d757e;}

/* 2b. Focus. The inline stylesheet does `outline:none` on inputs and only
   changes border-colour — invisible to a keyboard user against a 0.5px
   border. Restore a real, visible ring on keyboard focus only. */
textarea:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.chip:focus-visible,
.opt:focus-visible,
.mi:focus-visible{
  outline:2.5px solid var(--ux-focus);
  outline-offset:2px;
  border-radius:var(--ux-radius-sm);
}

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

/* 2d. Touch input. Keyed off the INPUT MODEL, not the viewport — a narrow
   desktop window is not a phone. */
@media (pointer: coarse){
  .btn,.tab,.chip,.opt,.setbtn,.uxstep,.uxdept-hd{
    min-height:var(--ux-tap);
    padding-top:9px;padding-bottom:9px;
  }
  .btnsm{min-height:38px;}
  input[type=text],input[type=date],select,textarea{
    font-size:16px;              /* stops iOS Safari zooming on focus */
    min-height:var(--ux-tap);
  }
  input[type=checkbox]{width:22px;height:22px;}
  /* hover must never be the only affordance on touch */
  .mi:hover,.lv:hover{background:inherit;}
}


/* -- 3. Responsive foundation --------------------------------------------
   The inline stylesheet has a single real breakpoint (760px). Below ~640px
   the tab bar wraps into an unreadable block and every 4-up grid is unusable.
   Breakpoints below are tied to where content actually collapses. */

@media (max-width:900px){
  .wrap{box-shadow:none;}
}

@media (max-width:640px){
  /* Tab bar: scroll horizontally instead of wrapping into six ragged rows. */
  .topbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;}
  .topbar::-webkit-scrollbar{display:none;}
  .mr{grid-template-columns:1fr 1fr;}
  .lv-grid{grid-template-columns:1fr;}
  .pg{padding:12px 11px;}
  .card{padding:12px;}
}

@media (max-width:420px){
  .mr{grid-template-columns:1fr;}
  .brand .sub{display:none;}   /* hide decoration before function */
}


/* -- 4. Setup wizard components ------------------------------------------
   Everything below is scoped under .uxsetup so it cannot leak into any
   other view. Rendered by ux.js -> vSetup(). */

.uxsetup{max-width:860px;}

/* 4a. Header + step rail --------------------------------------------- */
.uxsetup-hd{margin:0 0 14px;}
.uxsetup-hd h2{font-size:18px;font-weight:800;line-height:1.3;color:var(--ux-text);margin:0 0 5px;}
.uxsetup-hd p{font-size:12px;line-height:1.55;color:var(--ux-muted);margin:0;max-width:62ch;}

.uxsteps{display:flex;gap:6px;margin:0 0 16px;padding:0;list-style:none;}
.uxstep{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
  align-items:flex-start;text-align:left;cursor:pointer;
  background:var(--ux-surface);border:1px solid var(--ux-border);
  border-bottom:3px solid var(--ux-border);
  border-radius:var(--ux-radius-sm);padding:9px 11px;font:inherit;
  transition:border-color .15s,background .15s;}
.uxstep:hover{border-color:var(--ux-border-strong);}
.uxstep-n{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-tertiary);}
.uxstep-t{font-size:12px;font-weight:700;color:var(--ux-text);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.uxstep-s{font-size:10px;color:var(--ux-muted);line-height:1.3;}
.uxstep.on{border-bottom-color:var(--ux-accent);background:var(--ux-surface);
  box-shadow:var(--ux-shadow);}
.uxstep.on .uxstep-n{color:var(--ux-accent);}
.uxstep.done .uxstep-n{color:var(--ux-success);}
.uxstep-tick{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;font-size:9px;font-weight:800;
  background:var(--ux-surface-3);color:var(--color-text-tertiary);}
.uxstep.done .uxstep-tick{background:var(--ux-success);color:#fff;}
.uxstep.on .uxstep-tick{background:var(--ux-accent);color:#fff;}

@media (max-width:640px){
  .uxsteps{flex-direction:column;gap:4px;}
  .uxstep{flex-direction:row;align-items:center;gap:9px;
    border-bottom-width:1px;border-left:3px solid var(--ux-border);}
  .uxstep.on{border-left-color:var(--ux-accent);border-bottom-color:var(--ux-border);}
  .uxstep-s{margin-left:auto;white-space:nowrap;}
}

/* 4b. Panels + field grid -------------------------------------------- */
.uxpanel{background:var(--ux-surface);border:1px solid var(--ux-border);
  border-radius:var(--ux-radius);padding:16px 17px;margin-bottom:13px;
  box-shadow:var(--ux-shadow);}
.uxpanel-t{font-size:13px;font-weight:800;color:var(--ux-text);margin:0 0 3px;}
.uxpanel-d{font-size:11px;line-height:1.55;color:var(--ux-muted);margin:0 0 13px;max-width:64ch;}

/* One column on phones, two from 560px, three where the fields are short.
   Driven by content width, not device width. */
.uxgrid{display:grid;gap:11px 12px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.uxgrid .field{margin:0;min-width:0;}
.uxgrid-wide{grid-column:1/-1;}
.uxsetup .field label{font-size:9.5px;color:var(--ux-muted);}
/* the inline sheet only sizes input[type=text]; a date field would sit narrow */
.uxsetup input[type=date]{width:100%;font-family:inherit;font-size:11px;padding:6px 8px;
  border:0.5px solid var(--ux-border-strong);border-radius:var(--ux-radius-sm);background:#fff;}
.uxsetup .field .fhint{display:block;font-size:10px;line-height:1.45;
  color:var(--color-text-tertiary);margin-top:4px;font-weight:400;
  text-transform:none;letter-spacing:0;}

/* 4c. Inline help — collapsed by default, costs no space, never stale. */
.uxhelp{margin:0 0 13px;border:1px solid var(--ux-border);
  border-radius:var(--ux-radius-sm);background:var(--ux-surface-2);}
.uxhelp>summary{cursor:pointer;list-style:none;padding:9px 12px;
  font-size:11.5px;font-weight:700;color:var(--ux-primary);
  display:flex;align-items:center;gap:7px;min-height:36px;}
.uxhelp>summary::-webkit-details-marker{display:none;}
.uxhelp>summary::before{content:'\25B8';font-size:10px;transition:transform .15s;}
.uxhelp[open]>summary::before{transform:rotate(90deg);}
.uxhelp-b{padding:0 12px 11px;font-size:11px;line-height:1.65;color:var(--ux-muted);}
.uxhelp-b ol,.uxhelp-b ul{margin:0;padding-left:18px;}
.uxhelp-b li{margin-bottom:4px;}

/* 4d. Department cards ------------------------------------------------ */
.uxdepts{display:flex;flex-direction:column;gap:9px;}

.uxdept{border:1px solid var(--ux-border);border-radius:var(--ux-radius);
  background:var(--ux-surface);overflow:hidden;
  transition:box-shadow .15s,border-color .15s;}
.uxdept:hover{border-color:var(--ux-border-strong);}
.uxdept.cur{border-color:var(--org);box-shadow:0 0 0 1px var(--org) inset;}

.uxdept-hd{display:flex;align-items:center;gap:9px;width:100%;
  padding:11px 12px;background:none;border:none;font:inherit;text-align:left;
  cursor:pointer;color:var(--ux-text);min-width:0;}
.uxdept-hd:hover{background:var(--ux-surface-2);}
.uxdept-chev{flex:0 0 auto;font-size:10px;color:var(--color-text-tertiary);
  width:12px;transition:transform .15s;}
.uxdept.open .uxdept-chev{transform:rotate(90deg);}
.uxdept-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;}
.uxdept-name{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.uxdept-meta{flex:0 0 auto;display:flex;align-items:center;gap:6px;}

/* Progress pill — replaces the bare "3/8" badge with something readable. */
.uxprog{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;
  font-weight:700;color:var(--ux-muted);white-space:nowrap;}
.uxprog-t{width:44px;height:5px;border-radius:3px;background:var(--ux-surface-3);
  overflow:hidden;}
.uxprog-f{height:100%;background:var(--org);border-radius:3px;transition:width .2s;}
.uxprog.zero .uxprog-f{background:var(--ux-border-strong);}

.uxcur{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;background:#E1F5EE;color:#0F6E56;
  border:0.5px solid #a9ddcc;border-radius:9px;padding:2px 7px;white-space:nowrap;}

.uxdept-body{padding:0 12px 12px;border-top:1px solid var(--ux-border);}
.uxdept-body .uxgrid{margin-top:12px;}
.uxdept-foot{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--ux-border);}
.uxdept-foot .uxspacer{margin-left:auto;}

@media (max-width:520px){
  .uxdept-meta .uxprog-t{display:none;}
  .uxdept-foot .uxspacer{margin-left:0;width:100%;height:0;}
}

/* 4e. Add-department composer ---------------------------------------- */
.uxadd{border:1.5px dashed var(--ux-border-strong);border-radius:var(--ux-radius);
  background:var(--ux-surface-2);padding:13px 13px 14px;margin-top:10px;}
.uxadd.on{border-style:solid;border-color:var(--ux-accent);background:var(--ux-surface);
  box-shadow:var(--ux-shadow-lift);}
.uxadd-t{font-size:11.5px;font-weight:800;color:var(--ux-text);margin:0 0 3px;}
.uxadd-d{font-size:10.5px;line-height:1.5;color:var(--ux-muted);margin:0 0 11px;}
.uxadd-foot{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center;}
.uxadd-err{color:var(--ux-warn);font-size:10.5px;font-weight:700;margin-top:7px;}

.uxpresets{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.uxpreset{font-size:10.5px;padding:5px 11px;border-radius:13px;
  border:1px solid var(--ux-border-strong);background:var(--ux-surface);
  color:var(--ux-muted);cursor:pointer;font-weight:600;font-family:inherit;}
.uxpreset:hover{border-color:var(--ux-accent);color:var(--ux-accent);}

.uxaddbtn{display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:12px;border:1.5px dashed var(--ux-border-strong);
  border-radius:var(--ux-radius);background:var(--ux-surface-2);
  color:var(--ux-primary);font:inherit;font-size:12px;font-weight:700;
  cursor:pointer;margin-top:10px;min-height:var(--ux-tap);}
.uxaddbtn:hover{border-color:var(--ux-accent);color:var(--ux-accent);
  background:var(--ux-surface);}

/* 4f. Empty state ------------------------------------------------------ */
.uxempty{text-align:center;padding:24px 18px;border:1px dashed var(--ux-border);
  border-radius:var(--ux-radius);background:var(--ux-surface-2);}
.uxempty-t{font-size:13px;font-weight:800;color:var(--ux-text);margin:0 0 5px;}
.uxempty-d{font-size:11px;line-height:1.6;color:var(--ux-muted);margin:0 auto;max-width:46ch;}

/* 4g. Wizard footer — Back is always present, Next always says where to. */
.uxnav{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  margin-top:16px;padding-top:13px;border-top:1px solid var(--ux-border);}
.uxnav .uxspacer{margin-left:auto;}
.uxsaved{font-size:10.5px;color:var(--ux-muted);display:inline-flex;
  align-items:center;gap:5px;}
.uxsaved b{color:var(--ux-success);font-weight:700;}
@media (max-width:520px){
  .uxnav{flex-direction:column-reverse;align-items:stretch;}
  .uxnav .btn{width:100%;text-align:center;}
  .uxnav .uxspacer{margin-left:0;}
  .uxsaved{justify-content:center;order:3;}
}

/* 4h. Danger is reserved. */
.uxsetup .btnd{color:var(--ux-danger);border-color:#e8c4c4;background:#fdf3f3;}
.uxsetup .btnd:hover{background:#f9e6e6;border-color:var(--ux-danger);}

/* 4i. Visually-hidden label text (kept in the a11y tree). */
.uxsr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}


/* ============================================================================
   5. Landing page — the journey (v2.06)
   ============================================================================
   The old hero was ~350px of gradient carrying a logo and a product name that
   both already appear in the brand bar 40px above it. What a stranger needs in
   ten seconds is the value proposition, so that is the headline now and the
   ornament is gone. The block is ~130px.

   The five stages replace the seven-card menu. Linear with a stated return
   arc, not a drawn circle — see the note at the top of ux.js §4. */

.uxhero2{padding:22px 24px 20px;margin-bottom:18px;border-radius:var(--ux-radius);
  background:linear-gradient(120deg,#626E8C,#7d6a86 45%,#DA6E26 130%);color:#fff;}
.uxhero2 .uxvp{font-size:19px;font-weight:700;line-height:1.42;letter-spacing:-.005em;
  margin:0;max-width:62ch;}
.uxtrust{display:flex;flex-wrap:wrap;gap:5px 18px;margin-top:13px;
  font-size:11px;font-weight:600;opacity:.93;}
.uxtrust span{white-space:nowrap;}

/* -- the seam ----------------------------------------------------------
   A band spanning the row, dividing the five stages into the two halves the
   engagement actually has: capability (1-3, episodic, consultant-led) and
   delivery (4-5, continuous, owner-led).

   EXACT WIDTHS, NOT 3fr/2fr. The cards are flex:1 1 0; the arrows between
   them are 26px (a 20px svg plus 3px padding either side). So for a card
   width W, the capability half spans 3W + 52 and the delivery half 2W + 26,
   with the seam arrow's 26px between them. Setting grow 3/2 on bases of
   52px/26px with a 26px gap reproduces that to the pixel. Plain 3fr/2fr sits
   about 5px out — small, but a band that does not line up with the thing it
   labels reads as a rendering fault rather than a design. */
/* v2.12 — THE PADDING WAS THE BUG. The sum above is correct and the band still
   sat a few px wide of the cards, most visibly at Direction's right edge
   against stage 3. The <li> itself carried 22px of horizontal padding and 2px
   of side border; under border-box a flex item cannot go below padding+border,
   so the two flex-basis:0 segments each claimed 24px before any grow unit was
   distributed, and the whole band drifted.
   The li is now a bare flex box and .uxjb-in carries the visual treatment, so
   the used base sizes are exactly the 52/0/0 the arithmetic assumes. */
.uxjband{margin:0 0 7px;padding:0;list-style:none;}
.uxjb{display:flex;min-width:0;padding:0;border:0;background:none;}
.uxjb-in{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0;
  padding:6px 11px 7px;border-radius:var(--ux-radius) var(--ux-radius) 0 0;
  border-top:2px solid;border-left:1px solid;border-right:1px solid;
  border-top-color:var(--sc);border-left-color:var(--sb);border-right-color:var(--sb);
  background:var(--sg);}
.uxjb .uxjb-t{font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.3;color:var(--sf);}
.uxjb .uxjb-d{font-size:10px;line-height:1.45;color:var(--ux-muted);}
/* Three segments, three colours — and as of 2.12 each one is the hue its own
   stages now wear, not a colour borrowed from one stage inside the span.
   Direction green, Deliver orange, Steer blue: the band names the movement and
   the cards beneath it repeat that hue in tones. Bases 52 / 0 / 0 with grow
   3 / 1 / 1 — see the arithmetic above. */
.uxjb.b1{grid-column:1 / 6;--sg:#f1f8f5;--sb:#cfe6dc;--sc:#2FAF83;--sf:#12795D;}
.uxjb.b2{grid-column:7;--sg:#fdf5ea;--sb:#f0dcc2;--sc:#DA6E26;--sf:#b0551b;}
.uxjb.b3{grid-column:9;--sg:#f2f6fb;--sb:#d3e0ef;--sc:#3F6CB0;--sf:#35598f;}
/* The Deliver segment names its two threads in their own colours, so the band
   answers "which two?" before the cards below are read. */
.uxjb-k{display:flex;flex-wrap:wrap;align-items:center;gap:2px 9px;margin-top:3px;
  font-size:9px;font-weight:800;letter-spacing:.03em;color:var(--ux-muted);}
.uxjb-k i{display:inline-block;width:7px;height:7px;border-radius:2px;
  margin-right:4px;vertical-align:-1px;}
.uxjb-d1{background:var(--lane-cap);}
.uxjb-d2{background:var(--lane-dep);}

/* -- the row, and the one track definition both it and the band read ----
   v2.12. Everything above about flex arithmetic describes a problem that no
   longer needs solving, and it is kept because it explains what this replaces.

   The flex row was never actually five equal columns. `.uxj` carries 26px of
   padding and 2px of border; with flex-basis:0 under border-box, that 28px is
   the smallest the item can be, so it became each card's base size and the
   four ordinary cards claimed 112px between them before a single grow unit was
   handed out. Four identical cards hid it — they were all wrong by the same
   28px, so they still matched. The fork exposed it: `.uxjfork` is a bare flex
   column with no padding of its own, base 0, and it rendered 28px NARROWER
   than its neighbours, dragging stage 5 and the whole right-hand end of the
   band out of true. The band's own padding bug then added a second, different
   error on top, which is why the two edges were out by different amounts.

   Grid removes the arithmetic instead of correcting it. Nine tracks — five
   card columns of minmax(0,1fr) and four 26px arrow columns — and both the row
   and the band read the SAME declaration. `1fr` is computed by the grid
   algorithm after each item's own padding, so a card, a bare fork column and a
   future sixth stage are all exactly one track wide whatever chrome they
   carry, and the band's segments are named by line number (1/6, 7, 9) rather
   than by a width that has to be derived. minmax(0,1fr) rather than 1fr
   because a plain 1fr track has an auto minimum and will not shrink below its
   content — a long German stage title would push the row wider than its
   container and reintroduce the drift by another route.

   The row's nine children are already in the right order (card, arrow, card,
   arrow, card, arrow, fork, arrow, card), so auto-placement lands them without
   a single explicit grid-column. Nothing about the markup had to change. */
.uxjrow,.uxjband{display:grid;align-items:stretch;
  grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr)
                        26px minmax(0,1fr) 26px minmax(0,1fr);}
.uxjrow{margin:0 0 10px;padding:0;list-style:none;}

/* Bigger, and drawn rather than a text glyph — an arrow character renders at
   a different weight in every font on every platform, which is a poor thing to
   hang the sequence on. */
.uxjarrow{flex:0 0 auto;align-self:center;padding:0 3px;line-height:0;
  color:#a3abb8;}
.uxjarrow svg{width:20px;height:20px;display:block;}

/* The 3-to-4 arrow is the seam. Wide, the band above already says it, so this
   only needs to look like a boundary rather than a step: a dotted rule behind
   the arrow, and the label suppressed. */
.uxjseam{position:relative;color:#7b8798;}
.uxjseam::before{content:'';position:absolute;left:50%;top:-7px;bottom:-2px;
  width:0;border-left:1.5px dotted #b9c2ce;transform:translateX(-.75px);}
.uxjseam svg{position:relative;}
.uxjseam-l{display:none;}

/* The note under the row, explaining why two halves are still one product. */
.uxjseam-n{font-size:10px;line-height:1.55;color:var(--ux-muted);
  text-align:center;margin:-8px 0 14px;padding:0 14px;}

/* --gc / --gbg are set per card from the stage's tab-bar group colour. */
.uxj{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--ux-border);border-top:3px solid var(--gc,var(--ux-primary));
  border-radius:var(--ux-radius);
  background:var(--ux-surface);padding:12px 13px 13px;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
  box-shadow:0 1px 2px rgba(98,110,140,.05);}
.uxj:hover{box-shadow:var(--ux-shadow);}
.uxj:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}

/* Heights are pinned rather than left to the content, so the dashed rule lands
   on the same line across all five. Left to itself it sat at three different
   heights — titles wrap to two lines in some languages and not others, and only
   two stages carry sub-tool chips — which made a deliberate row look accidental. */
/* The number and the diagram share a row: number left, diagram right. The
   diagram shows the SHAPE of what the stage produces, so the row can be
   scanned before it is read. */
.uxj-h{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:9px;}
/* v2.12: position:relative because the completion tick is now a badge pinned
   to the number rather than a replacement for it — the number is the map and
   must never disappear. `overflow:visible` is implicit but the badge overhangs
   the circle deliberately, so no ancestor may clip it (nothing does). */
.uxj-n{position:relative;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex:0 0 auto;
  background:var(--gbg,var(--ux-surface-3));color:var(--gfg,var(--ux-muted));}
.uxj-nv{line-height:1;}
/* The badge. Small enough that the digit still leads at a glance, ringed in
   the card's own surface so it reads as sitting ON the chip rather than
   inside it, and in the shared success green rather than the stage colour —
   "has content" is one fact across all five stages and must not be mistaken
   for a sixth hue in the palette. */
.uxj-tick{position:absolute;right:-5px;bottom:-4px;
  width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:900;line-height:1;
  background:var(--ux-success);color:#fff;
  border:1.5px solid var(--ux-surface);box-sizing:content-box;}
.uxj-art{flex:0 0 auto;line-height:0;color:var(--gc,var(--ux-muted));opacity:.82;}
.uxj-art svg{width:40px;height:28px;display:block;}
.uxj-t{font-size:13px;font-weight:800;color:var(--ux-text);line-height:1.3;
  min-height:2.6em;display:flex;align-items:flex-start;}
.uxj-d{font-size:10.5px;line-height:1.5;color:var(--ux-muted);margin-top:4px;
  min-height:4.5em;}
.uxj-s{font-size:10px;font-weight:700;color:var(--ux-muted);margin-top:9px;
  padding-top:8px;border-top:1px dashed var(--ux-border);line-height:1.4;}
/* Chips and the CTA are pushed to the floor, so a stage without them does not
   float its status line up. */
.uxj-subs,.uxj-c{margin-top:auto;}
.uxj-subs + .uxj-c{margin-top:9px;}

/* Done: quiet, ticked, still reachable. A finished step that greys out
   entirely reads as disabled, and people do go back.
   v2.12 — the chip keeps the STAGE colour when done. It used to flip to a
   green ground, which meant a completed stage 3 or 5 briefly wore stage 2's
   green; harmless while the palette was five unrelated hues, actively
   misleading now that green means the Direction movement. Completion is said
   by the badge and by the status line, both of which are already green, so
   the chip does not need to say it a third time in the wrong vocabulary. */
.uxj.done .uxj-s{color:var(--ux-success);}

/* Current: the one primary action on the page — this is what let the separate
   "Start here" strip be deleted. It is emphasised by WEIGHT, not by a second
   colour: the card already carries its stage colour, and overriding that with
   a global accent would have made stage 4 (orange) indistinguishable from
   "current". */
.uxj.cur{border-color:var(--gc,var(--ux-accent));box-shadow:0 4px 16px rgba(98,110,140,.2);}
.uxj.cur .uxj-n{background:var(--gfg,var(--ux-accent));color:#fff;}
.uxj.cur .uxj-art{opacity:1;}
.uxj-c{margin-top:11px;}
/* The darkened variant, not the identity colour: white on #1D9E75 is about
   3:1 and this is 11.5px text. */
.uxj-cta{display:block;width:100%;text-align:center;font-size:11.5px;font-weight:700;
  padding:9px 10px;cursor:pointer;
  background:var(--gfg,var(--ux-primary));border-color:var(--gfg,var(--ux-primary));color:#fff;}
.uxj.cur:hover .uxj-cta{filter:brightness(1.08);}

.uxj.locked{opacity:.62;filter:grayscale(.4);}
.uxj.locked:hover{opacity:.9;}
.uxj.locked .uxj-s{color:#8A6D3B;}

/* Sub-tools. Only rendered where a stage has more than one destination. */
.uxj-subs{display:flex;flex-wrap:wrap;gap:4px;padding-top:9px;}
.uxj-sub{font-size:9.5px;font-weight:700;padding:4px 9px;border-radius:10px;
  border:1px solid transparent;background:var(--gbg,var(--ux-surface-2));
  color:var(--gfg,var(--ux-muted));cursor:pointer;font-family:inherit;line-height:1.5;}
.uxj-sub:hover{border-color:var(--gc,var(--ux-primary));background:var(--ux-surface);}
.uxj-sub:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}

/* -- the fork ----------------------------------------------------------
   Stage 4 occupies ONE slot in the row and holds two cards. It is a flex
   column of the same width as every other card (flex:1 1 0), so the exact
   band arithmetic above still holds and the 1-2-3-4-5 read is intact — the
   fourth position simply contains 4a and 4b.

   The lanes stretch (flex:1 1 0 inside the column) so the pair always fills
   the height the row settles on, however tall the tallest stage card is. */
.uxjfork{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;}
.uxjfork > .uxjlane{flex:1 1 0;}

/* A lane card keeps stage 4's teal top border — this is one stage, not two —
   and adds a thread colour on its left edge. The number chip and the CTA take
   the thread colour too, which is what makes "capability" and "deployment"
   scannable across the Roadmap and the TERA-LENS filter without a legend. */
.uxjlane{border-left:3px solid var(--lc,var(--gc));padding:10px 12px 11px;}
.uxjlane .uxj-h{margin-bottom:6px;}
/* "4a" is two characters in a 26px circle. */
.uxjlane .uxj-n{font-size:10.5px;letter-spacing:-.02em;
  background:var(--lbg,var(--gbg));color:var(--lfg,var(--gfg));}
.uxjlane .uxj-art{color:var(--lc,var(--gc));}
.uxjlane .uxj-art svg{width:30px;height:21px;}
/* The pinned heights exist so five cards line their dashed rules up. Two
   half-height cards in one slot cannot honour them and must not try. */
.uxjlane .uxj-t{font-size:12px;min-height:0;}
.uxjlane .uxj-d{font-size:10px;min-height:0;margin-top:3px;}
.uxjlane .uxj-s{margin-top:7px;padding-top:6px;}
.uxjlane .uxj-c{margin-top:8px;}
.uxjlane .uxj-cta{font-size:10.5px;padding:7px 9px;
  background:var(--lfg,var(--gfg));border-color:var(--lfg,var(--gfg));}
/* Same reasoning as .uxj.done above: the lane chip stays in its thread colour
   and lets the badge carry completion. */
.uxjlane.done .uxj-s{color:var(--lfg,var(--ux-success));}
.uxjlane.cur{border-color:var(--lc,var(--gc));border-left-color:var(--lc,var(--gc));
  box-shadow:0 4px 16px rgba(98,110,140,.2);}
.uxjlane.cur .uxj-n{background:var(--lfg,var(--gfg));color:#fff;}

/* The invite: the empty thread while the other one runs. An action, but not
   THE action — outline rather than filled, so the journey still has exactly one
   loudest thing to do. The dashed border says "nothing here yet" in the same
   language as the dashed rule above every status line. */
.uxjlane.invite{border-left-color:var(--lc,var(--gc));}
.uxj-cta-q{background:transparent;border:1.5px dashed var(--lc,var(--gc));
  color:var(--lfg,var(--gfg));padding:6px 9px;}
.uxjlane:hover .uxj-cta-q{background:var(--lbg,var(--gbg));border-style:solid;}

/* Stage 4's shared tools sit under the pair, once. */
.uxjfork-f{margin-top:0;padding-top:0;}

/* The build/ship warning on stage 5. Amber, not red: red is reserved for the
   health check's verdicts and for destructive actions (see §3b), and this is a
   pointer to a screen that will say it properly, not the verdict itself. */
.uxjbal-w{display:inline-block;color:#8A6D3B;font-weight:800;}

/* THE TICK LEGEND — v2.12.
   Rendered only when at least one stage is ticked (see journeyHtml), because a
   legend for a mark that is not on screen is pure noise. It carries the badge
   itself rather than describing it, so the eye can match shape to sentence
   without translating, and it sits directly under the row — a legend below the
   loop note would be answering a question three paragraphs after it was
   asked. Quiet by design: this is a footnote, not a warning. */
.uxjleg{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:10px;line-height:1.5;color:var(--ux-muted);
  margin:-2px 0 10px;padding:0 14px;text-align:center;}
.uxjleg-t{flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:900;line-height:1;
  background:var(--ux-success);color:#fff;}

/* The return arc, stated rather than drawn. */
.uxjloop{display:flex;align-items:baseline;justify-content:center;gap:7px;
  font-size:10.5px;line-height:1.5;color:var(--ux-muted);
  margin:0 0 14px;padding:8px 14px 0;text-align:center;}
.uxjloop span{font-size:14px;color:var(--ux-accent);}

/* ============================================================================
   4e. Assess — the orientation panel, and the worklist on Results
   ==========================================================================
   Both wear the Assess stage's green, because both belong to stage 2 and the
   page is already carrying that colour in the tab bar above them. Neither
   introduces a shape the app does not already use: the panel is a `.uxhelp`
   details, the worklist is a `.card`. */

/* -- the orientation panel on Assess ----------------------------------- */
.uxag{border-color:#cfe6dc;background:#f4faf7;margin-bottom:11px;}
.uxag>summary{color:#12795D;}
/* The running score lives in the summary so it is legible while collapsed —
   which, once someone is underway, is how this panel spends its life. */
.uxag-prog{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.03em;
  color:var(--ux-muted);text-transform:uppercase;}
.uxag-b{color:var(--ux-text);}
/* Three columns wide, one column stacked. The steps are a sequence, so they
   are numbered in the text rather than by position — the numbering has to
   survive the stack. */
.uxag-steps{display:grid;gap:9px;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:10px;}
.uxag-s{padding:9px 11px;border-radius:var(--ux-radius-sm);
  background:var(--ux-surface);border:1px solid #dcebe4;}
.uxag-st{font-size:11px;font-weight:800;color:#12795D;margin-bottom:3px;}
.uxag-sd{font-size:10.5px;line-height:1.55;color:var(--ux-muted);}
.uxag-n{font-size:10.5px;line-height:1.6;color:var(--ux-muted);}
.uxag-n + .uxag-n{margin-top:6px;}
/* The "where this goes" line is the one a lost user needs, so it is the one
   that gets a rule beside it rather than another paragraph of grey. */
.uxag-w{padding-left:9px;border-left:2px solid #9ed3bd;}

/* -- the recommendation block on Assess, turned down ------------------- */
/* It was the loudest thing on the page — a warm gradient, an amber dashed
   callout and a filled button — on the screen whose job is to find out where
   you stand. Now that the button has gone to Results, the volume has to
   follow it: the same information, on a calm ground, reading as the reference
   material it always was. Overriding the monolith's `.recbox` / `.smallbox`
   here rather than editing them keeps the Prioritise screen's use of the same
   classes... which is precisely why these are scoped to `.dp`, the Assess
   detail pane. Prioritise IS a decision screen and keeps the loud version. */
.dp .recbox{background:var(--ux-surface-2);border:1px solid var(--ux-border);}
.dp .smallbox{border:1px solid var(--ux-border-strong);border-style:dashed;
  background:var(--ux-surface);}
.dp .qlabel[style*="--warm"]{color:var(--ux-muted)!important;}

/* -- the recommendation's new footer on Assess ------------------------- */
/* Quiet by design: this used to end in the loudest button on the screen, and
   replacing one shout with another would have missed the point. */
.uxarn{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  margin:6px 0 2px;font-size:10px;line-height:1.55;color:var(--ux-muted);}
.uxarn-go{font-family:inherit;font-size:10px;font-weight:700;line-height:1.5;
  padding:3px 9px;border-radius:11px;cursor:pointer;
  border:1px solid #cfe6dc;background:var(--ux-surface);color:#12795D;}
.uxarn-go:hover{border-color:#2FAF83;}
.uxarn-go:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}

/* -- the worklist on Results ------------------------------------------- */
.uxrr-t{color:#12795D;}
.uxrr-d{font-size:10.5px;line-height:1.6;color:var(--ux-muted);margin:-2px 0 10px;}
.uxrr-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.uxrr-i{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
  padding:9px 11px;border-radius:var(--ux-radius-sm);
  background:var(--ux-surface-2);border:1px solid var(--ux-border);
  border-left:3px solid var(--lane-cap);}
/* A capability already at the top is not a gap. It keeps its row so the list
   is the whole picture, but loses the accent that says "act on me". */
.uxrr-i.top{border-left-color:var(--ux-border-strong);opacity:.8;}
.uxrr-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  flex:1 1 260px;min-width:0;}
.uxrr-n{font-size:11.5px;font-weight:700;color:var(--ux-text);}
.uxrr-lv{font-size:9.5px;font-weight:800;letter-spacing:.03em;
  color:var(--lane-cap-fg);white-space:nowrap;}
/* The action wraps to its own full-width line under the title, so a long
   capability name never squeezes the recommendation into a column. */
.uxrr-a{flex:1 1 100%;font-size:10.5px;line-height:1.55;color:var(--ux-muted);}
.uxrr-c{flex:0 0 auto;margin-left:auto;}
.uxrr-go{background:var(--lane-cap-fg);border-color:var(--lane-cap-fg);color:#fff;
  font-weight:700;}
.uxrr-go:hover{filter:brightness(1.08);}
/* "Already running" is a fact, not a disabled button — a greyed-out control
   invites a click that will never work. */
.uxrr-run{display:inline-flex;align-items:center;gap:4px;font-size:10px;
  font-weight:800;color:var(--ux-success);white-space:nowrap;}
.uxrr-sus{font-size:10px;font-weight:700;color:var(--ux-muted);}
.uxrr-e{font-size:10.5px;line-height:1.6;color:var(--ux-muted);}
.uxrr-more,.uxrr-why{margin:9px 0 0;background:transparent;border-color:var(--ux-border);}
.uxrr-more>summary,.uxrr-why>summary{min-height:30px;padding:6px 10px;font-size:10.5px;}
.uxrr-more .uxrr-l{padding:0 10px 10px;}

@media (max-width:900px){
  .uxag-steps{grid-template-columns:minmax(0,1fr);}
  .uxrr-c{margin-left:0;flex:1 1 100%;}
  .uxrr-go{width:100%;}
}

/* ============================================================================
   4g. Workshop — a screen designed to be used in a room, not at a desk
   ==========================================================================
   This is the only view in the product that is read aloud to other people
   while a facilitator drives it. That changes the brief: the question is set
   at 19px rather than 13px because someone is reading it off a shared screen
   from three metres away, the options are large targets because they are
   clicked while talking, and the perspective is withheld until a position is
   taken so the group answers the question rather than the hint.

   It wears the Assess green — it belongs to stage 2 and now leads it. */

.wshead{border-left:3px solid #2FAF83;}
.wshead-t{font-size:15px;font-weight:800;color:var(--ux-text);}
.wshead-d{font-size:11.5px;line-height:1.6;color:var(--ux-muted);margin-top:4px;}
.wshead-p{font-size:10.5px;line-height:1.55;color:var(--ux-muted);margin-top:7px;
  padding-left:9px;border-left:2px solid #9ed3bd;}

/* -- the rail ----------------------------------------------------------- */
.wsbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 14px;padding:9px 12px;}
.wsbar-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;}
.wsrail{display:flex;flex-wrap:wrap;gap:4px;}
/* The rail is navigation, not decoration: in a live session the conversation
   arrives at question 7 by itself and the facilitator has to follow it there
   without paging through six screens. */
.wsdot{width:26px;height:26px;border-radius:50%;flex:0 0 auto;cursor:pointer;
  font:inherit;font-size:11px;font-weight:800;line-height:1;
  border:1px solid var(--ux-border-strong);background:var(--ux-surface);
  color:var(--ux-muted);}
.wsdot:hover{border-color:#2FAF83;}
.wsdot:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
.wsdot.done{background:#E1F5EE;border-color:#9ed3bd;color:#12795D;}
.wsdot.cur{background:#12795D;border-color:#12795D;color:#fff;}
.wsbar-c{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ux-muted);white-space:nowrap;}
.wsview{flex:0 0 auto;}

/* -- a question --------------------------------------------------------- */
.wsq{border-left:3px solid #2FAF83;}
.wsq-h{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;margin-bottom:9px;}
.wsq-n{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ux-muted);}
.wsq-caps{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;}
.wsq-cl{font-size:9.5px;font-weight:700;color:var(--ux-muted);margin-right:2px;}
/* The capability chip is the whole argument of this screen made visible: the
   group can see, while answering, which part of the assessment they are
   briefing themselves for. */
.wscap{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;
  padding:2px 8px 2px 3px;border-radius:10px;background:#e7f5ee;color:#12795D;}
.wscap b{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;background:#12795D;color:#fff;
  font-size:8.5px;font-weight:900;}
.wsq-ok{margin-left:auto;font-size:9.5px;font-weight:800;color:var(--ux-success);
  white-space:nowrap;}
/* Read aloud, from across a room. */
.wsq-t{font-size:19px;font-weight:700;line-height:1.35;color:var(--ux-text);}
.wsq-p{font-size:10.5px;line-height:1.55;color:var(--ux-muted);margin-top:6px;}
.wsq-c .wsq-t{font-size:14px;}

.wsopts{display:grid;gap:7px;margin-top:13px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
/* Large targets: these are clicked while the facilitator is talking. */
/* Large targets: these are clicked while the facilitator is talking. The
   checkbox mark is what says "more than one is allowed" before anyone reads
   the line that says so — a radio-shaped control teaches single choice no
   matter what the caption claims. */
.wsopt{display:flex;align-items:flex-start;gap:10px;
  font:inherit;font-size:12.5px;line-height:1.45;font-weight:600;text-align:left;
  padding:12px 14px;border-radius:var(--ux-radius);cursor:pointer;min-height:52px;
  border:1.5px solid var(--ux-border);background:var(--ux-surface-2);color:var(--ux-text);}
.wsopt:hover{border-color:#2FAF83;background:var(--ux-surface);}
.wsopt:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
.wsopt.on{border-color:#12795D;background:#eef8f4;
  box-shadow:inset 0 0 0 1px #12795D;}
.wsopt-m{flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:4px;
  border:1.5px solid var(--ux-border-strong);background:var(--ux-surface);}
.wsopt.on .wsopt-m{background:#12795D;border-color:#12795D;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain;}
.wsopt-l{min-width:0;}

/* The escape hatch. A menu with no way out teaches the facilitator to round
   what was said to the nearest listed option, which is the opposite of
   recording what the room actually answered. */
.wsaddother{font:inherit;font-size:11.5px;font-weight:700;margin-top:8px;
  padding:9px 14px;border-radius:var(--ux-radius);cursor:pointer;
  border:1.5px dashed var(--ux-border-strong);background:transparent;
  color:var(--ux-muted);}
.wsaddother:hover{border-color:#2FAF83;color:#12795D;}
.wsaddother:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
.wsother{margin-top:8px;}
.wsother-l{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ux-muted);margin-bottom:4px;}
.wsother input{width:100%;}

/* The crafted sentence — the one part of the report the client writes. The
   stem is printed beside the field so the group completes a sentence rather
   than facing an empty box. */
.wsstmt{margin-top:13px;}
.wsstmt-l{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#12795D;margin-bottom:4px;}
.wsstmt-b{border:1.5px solid #cfe6dc;border-radius:var(--ux-radius);
  background:#f4faf7;padding:9px 11px;}
.wsstmt-p{display:block;font-size:13px;font-weight:700;color:#12795D;margin-bottom:4px;}
.wsstmt-b textarea{width:100%;border:0;background:transparent;resize:vertical;
  font:inherit;font-size:13px;line-height:1.5;color:var(--ux-text);padding:0;}
.wsstmt-b textarea:focus{outline:none;}
.wsstmt-b:focus-within{border-color:#2FAF83;box-shadow:0 0 0 2px rgba(47,175,131,.15);}

/* -- the reveal ---------------------------------------------------------
   Deliberately withheld until a position is taken. Shown alongside the
   options it is a hint, and a room answers the hint. */
.wsrev{margin-top:13px;padding-top:12px;border-top:1px dashed var(--ux-border);}
.wsrev-l{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ux-muted);margin-bottom:3px;}
.wsrev-p{font-size:12px;line-height:1.65;color:var(--ux-text);
  padding:10px 12px;border-radius:var(--ux-radius-sm);
  background:#f4faf7;border:1px solid #cfe6dc;}
.wsrev-q{margin-top:9px;font-size:11.5px;line-height:1.6;color:var(--ux-muted);}
.wsrev-q ul{margin:0;padding-left:18px;}
.wsrev-q li{margin-bottom:3px;}

/* -- how the room landed ------------------------------------------------
   Three states, not a percentage. A facilitator mid-sentence can hit one of
   three buttons; nobody counts hands into a number field. */
.wsroom{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;}
.wsroom-l{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ux-muted);}
.wsroom-g{display:inline-flex;flex-wrap:wrap;gap:5px;}
.wsroom-b{font:inherit;font-size:11px;font-weight:700;padding:6px 12px;border-radius:13px;
  cursor:pointer;border:1px solid var(--ux-border-strong);background:var(--ux-surface);
  color:var(--ux-muted);white-space:nowrap;}
.wsroom-b:hover{border-color:var(--ux-primary);color:var(--ux-text);}
.wsroom-b:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
/* Two solid states, two unsolid ones, and a fifth that is a different kind of
   thing — "nobody knew" is not the bad end of a scale, it is an absence of
   fact, and it gets its own hue rather than the worst amber. None of the five
   is a verdict colour: a divided room is often the most valuable hour of the
   day. */
.wsroom-b.r-c.on{background:#E1F5EE;border-color:#12795D;color:#12795D;}
.wsroom-b.r-v.on{background:#EEF8F3;border-color:#2FAF83;color:#12795D;}
.wsroom-b.r-o.on{background:#FDF3E2;border-color:#C8912F;color:#8A5709;}
.wsroom-b.r-d.on{background:#FAEEDA;border-color:#A85B12;color:#A85B12;}
.wsroom-b.r-n.on{background:#EFEAF8;border-color:#5B47A0;color:#5B47A0;}
/* The chosen state explains itself in place, rather than in a tooltip nobody
   hovers during a live session. */
.wsroom-d{flex:1 1 100%;font-size:10px;line-height:1.5;color:var(--ux-muted);}

.wsnote{margin-top:11px;}
.wsnote-l{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ux-muted);margin-bottom:4px;}
.wsclear{font:inherit;font-size:10px;font-weight:700;margin-top:9px;padding:4px 10px;
  border-radius:11px;cursor:pointer;border:1px solid var(--ux-border);
  background:transparent;color:var(--ux-muted);}
.wsclear:hover{border-color:var(--ux-danger);color:var(--ux-danger);}

.wsnav{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;
  margin:0 0 13px;}
.wsnav-b{min-width:132px;}
.wsdone{margin-top:0;}
.wswhy{margin-top:4px;}
/* Which bank is on screen. Quiet — it is for whoever is wondering why the
   questions are not the ones they published, which is a question that should
   take five seconds to answer, not a day. */
.wssrc{margin-top:7px;padding-top:7px;border-top:1px dashed var(--ux-border);
  font-size:10px;line-height:1.55;color:var(--ux-muted);}

/* -- the context panel on Assess ---------------------------------------- */
.wsctx{margin:2px 0 10px;padding:10px 12px;border-radius:var(--ux-radius-sm);
  background:#f4faf7;border:1px solid #cfe6dc;}
.wsctx-h{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#12795D;margin-bottom:6px;}
.wsctx-d{display:block;font-size:10px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ux-muted);margin-top:2px;}
.wsctx-i + .wsctx-i{margin-top:8px;padding-top:8px;border-top:1px dashed #cfe6dc;}
.wsctx-q{font-size:10.5px;line-height:1.5;color:var(--ux-muted);}
.wsctx-a{font-size:11.5px;font-weight:700;line-height:1.5;color:var(--ux-text);margin-top:2px;}
.wsctx-r{margin-left:7px;font-size:9px;font-weight:800;padding:1px 7px;border-radius:9px;
  text-transform:uppercase;letter-spacing:.04em;}
.wsctx-r.r-c{background:#E1F5EE;color:#12795D;}
.wsctx-r.r-s{background:#FAEEDA;color:#A85B12;}
.wsctx-r.r-x{background:#EFEAF8;color:#5B47A0;}
/* The quote is the part a client recognises themselves in — set as speech,
   not as another grey line of metadata. */
.wsctx-n{font-size:11px;line-height:1.6;font-style:italic;color:var(--ux-text);
  margin-top:4px;}
/* The sentence the room wrote, wherever it is shown. */
.wsctx-s{margin-top:5px;padding-left:9px;border-left:2px solid #2FAF83;
  font-size:11.5px;line-height:1.55;font-style:italic;color:var(--ux-text);}
.wsrev-for{display:block;font-size:9.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:#12795D;margin-bottom:3px;}
.wsrev-p + .wsrev-p{margin-top:7px;}

@media (max-width:640px){
  .wsq-t{font-size:16px;}
  .wsopts{grid-template-columns:minmax(0,1fr);}
  .wsnav-b{flex:1 1 auto;min-width:0;}
}

/* ============================================================================
   4f. Compare — small multiples, findings, and a matrix that sorts
   ==========================================================================
   The screen wears Navigate's blue for its own furniture, and the department
   colours only where a department is being identified. Nothing here invents a
   hue: the grey ghost is the one non-department colour on the charts, which is
   exactly why nothing else on this screen is allowed to be grey. */

/* -- findings ---------------------------------------------------------- */
.uxcf-h{color:#35598f;}
.uxcf-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.uxcf-i{padding:9px 12px;border-radius:var(--ux-radius-sm);
  background:var(--ux-surface-2);border:1px solid var(--ux-border);
  border-left:3px solid var(--ux-border-strong);}
/* Three findings, three severities — borrowed from the health check's bands so
   a red rule means the same thing on both screens. */
.uxcf-i.f-low{border-left-color:#8E1F1F;background:#fdf6f6;}
.uxcf-i.f-gap{border-left-color:#A85B12;background:#fdf9f3;}
.uxcf-i.f-hi{border-left-color:var(--ux-success);background:#f4faf7;}
.uxcf-i.f-lo2{border-left-color:#A85B12;background:#fdf9f3;}
.uxcf-t{font-size:11px;font-weight:800;color:var(--ux-text);margin-bottom:2px;}
.uxcf-d{font-size:11px;line-height:1.6;color:var(--ux-muted);}
.uxcf-e{font-size:11px;line-height:1.6;color:var(--ux-muted);}

/* -- the charts card --------------------------------------------------- */
.uxcc-h{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:8px 14px;margin-bottom:10px;}
.uxcc-t{color:#35598f;border:none;margin:0;padding:0;}
.uxcc-d{font-size:10.5px;line-height:1.5;color:var(--ux-muted);margin-top:2px;}
.uxcv{flex:0 0 auto;}
.uxcvn{font-size:10px;line-height:1.55;color:var(--ux-muted);margin-top:9px;
  padding-left:9px;border-left:2px solid var(--ux-border-strong);}

/* Small multiples. auto-fit rather than a fixed count: five departments wrap
   to a second row rather than shrinking to unreadability, and two sit large. */
.uxcgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));}
.uxcg{margin:0;padding:8px 6px 7px;border:1px solid var(--ux-border);
  border-radius:var(--ux-radius-sm);background:var(--ux-surface);min-width:0;}
.uxmr{display:block;width:100%;height:auto;}
.uxmr-w{fill:none;stroke:#e6e9ee;stroke-width:.6;}
/* The organisation mean. Dashed as well as grey, so it survives a greyscale
   print and never reads as a sixth department. */
.uxmr-m{fill:#aab1bb26;stroke:#aab1bb;stroke-width:1.1;stroke-dasharray:2.5 2;}
.uxmr-s{stroke-width:1.7;stroke-linejoin:round;}
.uxmr-k{font-size:5.6px;font-weight:800;fill:#9aa2ad;}
.uxcg-c{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px;padding:0 4px;
  font-size:10.5px;line-height:1.4;}
.uxcg-d{flex:0 0 auto;width:8px;height:8px;border-radius:2px;align-self:center;}
.uxcg-n{font-weight:700;color:var(--ux-text);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.uxcg-v{font-weight:800;color:var(--ux-muted);margin-left:auto;}
/* Partial coverage is stated, never hidden: an average over six capabilities
   is not comparable with one over eight, and this screen puts them in a row. */
.uxcg-p{flex:0 0 auto;font-size:9px;font-weight:800;padding:1px 5px;border-radius:8px;
  background:#FAEEDA;color:#A85B12;cursor:help;}
.uxcov{max-width:560px;margin:0 auto;}

/* The shared axis key — one set of labels for the whole row. */
.uxck{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;margin-top:11px;
  padding-top:9px;border-top:1px dashed var(--ux-border);
  font-size:9.5px;line-height:1.5;color:var(--ux-muted);}
.uxck-h{flex:1 1 100%;font-weight:700;}
.uxck-i{display:inline-flex;align-items:center;gap:4px;}
.uxck-i b{display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  font-size:8.5px;font-weight:900;background:var(--ux-surface-3);color:var(--ux-muted);}
.uxck-m i{display:inline-block;width:13px;height:0;border-top:2px dashed #aab1bb;}

/* The legend doubles as the filter, so it is buttons, not divs — it was
   `div[data-togglearea]` with a ☑ glyph and no keyboard path at all. */
.uxcleg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:11px;}
.uxcleg-h{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ux-muted);margin-right:2px;}
.uxclg{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:10.5px;
  font-weight:700;padding:4px 10px;border-radius:12px;cursor:pointer;
  border:1px solid var(--ux-border);background:var(--ux-surface-2);color:var(--ux-text);}
.uxclg b{color:var(--ux-muted);}
.uxclg:hover{border-color:var(--ux-primary);}
.uxclg:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
.uxclg.off{opacity:.5;}
.uxclg.off .uxcg-d{background:var(--ux-border-strong)!important;}

/* -- the matrix -------------------------------------------------------- */
.uxcm .uxcc-t{margin-bottom:0;}
.uxcm-s{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;}
.uxcm-sl{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ux-muted);}
.uxcm-wrap{overflow-x:auto;}
.uxcm-t2{width:100%;}
.uxcm-t2 th{vertical-align:bottom;}
.uxcm-dn{display:flex;align-items:center;justify-content:center;gap:5px;}
.uxcm-sc{display:block;font-size:8.5px;font-weight:700;color:var(--ux-muted);
  text-transform:none;letter-spacing:0;margin-top:2px;}
.uxcm-sc.part{color:#A85B12;cursor:help;}
.uxcm-c{text-align:left;min-width:150px;}
.uxcm-n,.uxcm-r{text-align:center;}
.uxcm-r{min-width:104px;}
/* The extremes, ringed. Once the table is sorted by spread the top rows are
   the story, and the ring says which two departments are its ends without
   making the reader scan the row twice. */
.badge.ring-hi{box-shadow:0 0 0 1.5px var(--ux-success);}
.badge.ring-lo{box-shadow:0 0 0 1.5px #8E1F1F;}
/* The range bar. It is the row's finding, readable before any number. */
.uxcm-bar{position:relative;display:block;height:5px;border-radius:3px;
  background:var(--ux-surface-3);margin:0 2px 3px;}
/* The bar had to be told apart from its own track: at --ux-border-strong on
   --ux-surface-3 the two greys were within a shade of each other, so every
   range looked full-width and the column said nothing. The fill now carries
   the same muted ink the numbers use. */
.uxcm-bar i{position:absolute;top:0;bottom:0;border-radius:3px;
  background:var(--ux-muted);min-width:3px;}
.uxcm-rv{display:block;font-size:9.5px;font-weight:700;color:var(--ux-muted);
  font-variant-numeric:tabular-nums;}
.uxcm-f td{border-top:2px solid var(--ux-border-strong);}
.uxcm-lg{font-size:9.5px;line-height:1.5;color:var(--ux-muted);margin-top:8px;}

/* `.toggle` is `inline-flex` with no wrap and a pill border that `overflow:
   hidden` clips to. Two English words per button fit anywhere; three German
   ones ("Reihenfolge der Kompetenzen") made the sort control 479px wide and
   pushed the whole page into a horizontal scroll at 390px. Allowed to wrap,
   with the rounding relaxed so a wrapped second row is not clipped into a
   crescent by the pill radius. */
.uxcv{flex-wrap:wrap;border-radius:var(--ux-radius-sm);}
.uxcv button{flex:0 1 auto;min-width:0;}

@media (max-width:640px){
  .uxcgrid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));}
  .uxcm-c{min-width:120px;}
  /* The sort control takes its own line and shares it evenly, rather than
     being squeezed beside a heading it is as wide as. */
  .uxcm-s{flex:1 1 100%;}
  .uxcv{width:100%;}
  .uxcv button{flex:1 1 auto;text-align:center;}
}

/* -- the tab bar, wearing the same five colours ------------------------
   v2.12. buildTopbar() has always set --gc inline from JSTAGES, but the group
   GROUND and the label colour still came from the monolith's own .gp-* rules,
   which hardcode the pre-2.12 palette. So a recolour of the journey left the
   bar behind — the exact drift these two overrides remove. --gbg / --gfg are
   now set inline alongside --gc, and these rules (0,2,0 and 0,3,0, one step
   above the .gp-* originals) hand the bar the stage's own values.

   The number chip is the Home row's lesson, carried into the only navigation
   that stays on screen after Home is left: "3 · Strategy" is a position, where
   "Strategy" alone is only a category. It is aria-hidden — the group label is
   already the accessible name, and a screen reader announcing a bare digit in
   front of it would add nothing but noise. */
.topbar .gp{background:var(--gbg,transparent);}
.topbar .gp .gl{color:var(--gfg,inherit);opacity:1;
  display:inline-flex;align-items:center;gap:4px;}
.topbar .gp .uxgn{display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  font-size:8.5px;font-weight:900;line-height:1;letter-spacing:0;
  /* --gfg, not --gc: this is white type at 8.5px. The identity colours are
     the light end of each family (stage 1's green is #6BBFA2) and white on
     them measures nearer 2:1 than 4.5:1. The darkened variants all clear it. */
  background:var(--gfg,currentColor);color:#fff;}

/* -- the lane filter on TERA-LENS --------------------------------------
   The same two thread colours as the fork on Home, so a user who chose
   "Build capability" there recognises where they landed without reading a
   word. Counts sit on the buttons: a filter that can empty a list has to say
   so before the click, not after.

   Deliberately a button group and not the department <select> beside it. The
   department filter has as many values as the client has departments; this one
   has exactly three, it is the product's central distinction, and burying it
   in a dropdown would make the thesis a setting. */
.uxlanebar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  margin:0 0 12px;padding:9px 12px;border:1px solid var(--ux-border);
  border-radius:var(--ux-radius);background:var(--ux-surface-2);}
.uxlanebar-t{font-size:9.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ux-muted);margin-right:2px;}
.uxlaneb{font-size:11px;font-weight:700;font-family:inherit;line-height:1.5;
  padding:5px 11px;border-radius:13px;cursor:pointer;
  border:1px solid var(--ux-border);background:var(--ux-surface);
  color:var(--ux-muted);display:inline-flex;align-items:center;gap:6px;}
.uxlaneb:hover{border-color:var(--ux-primary);color:var(--ux-text);}
.uxlaneb:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
/* The count is a second piece of information in the same control, so it is
   separated by weight and a ground rather than by another colour. */
.uxlaneb-n{font-size:9.5px;font-weight:800;padding:0 5px;border-radius:8px;
  background:var(--ux-surface-3);color:var(--ux-muted);min-width:16px;text-align:center;}
.uxlaneb.on{color:#fff;}
.uxlaneb.on .uxlaneb-n{background:rgba(255,255,255,.26);color:#fff;}
.uxlaneb.on:not(.l-cap):not(.l-dep){background:#4d566f;border-color:#4d566f;}
.uxlaneb.l-cap{border-left:3px solid var(--lane-cap);}
.uxlaneb.l-cap.on{background:var(--lane-cap-fg);border-color:var(--lane-cap-fg);}
.uxlaneb.l-dep{border-left:3px solid var(--lane-dep);}
.uxlaneb.l-dep.on{background:var(--lane-dep-fg);border-color:var(--lane-dep-fg);}
/* The reassurance, once: this filters a view, it does not fork the record. */
.uxlanebar-h{flex:1 1 220px;min-width:0;font-size:10px;line-height:1.5;
  color:var(--ux-muted);}
@media (max-width:640px){
  .uxlanebar-h{flex-basis:100%;}
}

/* -- v2.11: the two lanes on the Roadmap -------------------------------
   A lane header is a rule plus a name, not a box. The Roadmap's boards are
   already heavy grids; wrapping each in a bordered panel would put three
   nested frames around every card. The 3px left rule carries the thread colour
   and nothing else does. */
.uxrl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
  margin:14px 0 8px;padding:6px 0 6px 11px;border-left:3px solid var(--lc);}
.uxrl-cap{--lc:var(--lane-cap);--lct:var(--lane-cap-fg);}
.uxrl-dep{--lc:var(--lane-dep);--lct:var(--lane-dep-fg);}
/* v2.12 — the HEADING takes --lct, the darkened variant, not --lc. The rail
   beside it keeps --lc. Capability's identity colour is now an amber that
   measures about 2:1 on white; as a 3px rail that is decoration and fine, as
   11.5px type it is unreadable. Every place a thread colour becomes TEXT uses
   the -fg variant — see the note on --lane-* in section 1. */
.uxrl-t{font-size:11.5px;font-weight:800;letter-spacing:.03em;
  color:var(--lct,var(--lc));}
.uxrl-d{flex:1 1 260px;min-width:0;font-size:10px;line-height:1.5;color:var(--ux-muted);}
.uxrl-n{font-size:9.5px;font-weight:800;color:var(--ux-muted);
  background:var(--ux-surface-3);border-radius:9px;padding:2px 8px;white-space:nowrap;}

.uxrboard .bcard{cursor:pointer;}
.uxrcard{border-left:3px solid var(--lane-dep);}
.uxrcard:hover{box-shadow:var(--ux-shadow);}
.uxrcard:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
.uxrcard-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin-top:5px;}
.uxrcard-c{font-size:9.5px;font-weight:700;color:var(--ux-muted);}
/* The flag is the finding. Amber, and only on the card that earns it —
   colouring every deployment by status would turn the lane into a legend. */
.uxrflag{margin-top:5px;font-size:9.5px;font-weight:700;color:var(--ux-muted);}
.uxrflag.warn{color:#8A6D3B;}
.uxrcard.warn{border-left-color:#C8912F;background:#fdf8ee;}

/* Shipped work is history, not schedule: a strip, not a column. */
.uxrshipped{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;
  margin:9px 0 0;padding:8px 11px;border-radius:var(--ux-radius);
  background:var(--ux-surface-2);border:1px solid var(--ux-border);}
.uxrshipped-t{font-size:9.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ux-success);}
.uxrchip{font-size:10px;font-weight:700;font-family:inherit;line-height:1.5;
  padding:3px 9px;border-radius:10px;cursor:pointer;
  border:1px solid var(--ux-border);background:var(--ux-surface);color:var(--ux-muted);}
.uxrchip:hover{border-color:var(--ux-primary);color:var(--ux-text);}
.uxrchip:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
.uxrwhy{margin:10px 0 4px;}

/* -- v2.11: the balance panel in the Strategy stage ---------------------
   Two columns and a footer. The columns are the two threads in the same green
   and orange they wear everywhere else; the footer is the consequence. It is
   the only panel on this screen with a verdict, so it gets a ground and the
   library below it does not. */
.uxbal{margin:0 0 14px;padding:13px 15px 12px;border:1px solid var(--ux-border);
  border-radius:var(--ux-radius);background:var(--ux-surface);
  box-shadow:0 1px 2px rgba(98,110,140,.05);}
.uxbal-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:11px;}
.uxbal-t{font-size:12.5px;font-weight:800;color:var(--ux-text);}
.uxbal-d{font-size:10px;line-height:1.5;color:var(--ux-muted);}
.uxbal-g{display:flex;flex-wrap:wrap;gap:11px;}
.uxbal-c{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;
  padding:10px 12px 11px;border-radius:var(--ux-radius);
  background:var(--ux-surface-2);border:1px solid var(--ux-border);
  border-top:2px solid var(--lc);}
.uxbal-c:first-child{--lc:var(--lane-cap);--lct:var(--lane-cap-fg);}
.uxbal-c:last-child{--lc:var(--lane-dep);--lct:var(--lane-dep-fg);}
.uxbal-ct{font-size:11px;font-weight:800;color:var(--lct,var(--lc));}
.uxbal-cd{font-size:9.5px;line-height:1.5;color:var(--ux-muted);margin:1px 0 8px;}
.uxbal-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.uxbal-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 7px;
  font-size:10.5px;line-height:1.45;}
.uxbal-k{font-weight:800;color:var(--lct,var(--lc));min-width:11px;}
.uxbal-n{font-weight:700;color:var(--ux-text);}
.uxbal-n.wide{flex:1 1 auto;min-width:0;}
.uxbal-lv{font-size:9.5px;font-weight:700;color:var(--ux-muted);}
.uxbal-p{font-size:9px;font-weight:800;padding:1px 6px;border-radius:8px;
  background:#e7f5ee;color:#0f7758;}
.uxbal-more{font-size:9.5px;font-weight:700;color:var(--ux-muted);}
.uxbal-e{font-size:10px;line-height:1.55;color:var(--ux-muted);}
/* Pushed to the floor so the two columns' buttons line up whatever the lists
   above them do. */
.uxbal-go{margin-top:auto;padding-top:9px;align-self:flex-start;
  background:transparent;border:1px solid var(--lc);color:var(--lc);
  padding:5px 11px;margin-top:11px;font-weight:700;}
.uxbal-go:hover{background:var(--lc);color:#fff;}
.uxbal-go.cap{--lc:var(--lane-cap-fg);}
.uxbal-go.dep{--lc:var(--lane-dep-fg);}

.uxbal-f{margin-top:12px;padding-top:11px;border-top:1px dashed var(--ux-border);}
.uxbal-fl{font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ux-muted);margin-bottom:6px;}
.uxbal-bar{display:flex;height:17px;border-radius:9px;overflow:hidden;
  background:var(--ux-surface-3);}
.uxbal-s{display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:800;color:#fff;min-width:22px;}
.uxbal-s.cap{background:var(--lane-cap);}
.uxbal-s.dep{background:var(--lane-dep);}
.uxbal-key{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:5px;
  font-size:9.5px;font-weight:700;color:var(--ux-muted);}
.uxbal-key i{display:inline-block;width:7px;height:7px;border-radius:2px;
  margin-right:5px;vertical-align:-1px;}
.uxbal-key i.cap{background:var(--lane-cap);}
.uxbal-key i.dep{background:var(--lane-dep);}
/* Reuses the health check's verdict colours by name, so a "watch" here and a
   "watch" there mean the same thing. */
.uxbal-v{margin-top:8px;font-size:10.5px;line-height:1.55;font-weight:700;
  padding:7px 10px;border-radius:var(--ux-radius);
  background:var(--ux-surface-2);color:var(--ux-muted);}
.uxbal-v.hx-act{background:#fdeeee;color:#8f2f2f;}
.uxbal-v.hx-watch{background:#fdf8ee;color:#8A6D3B;}
.uxbal-v.hx-good{background:#eef8f3;color:#0f7758;}
.uxbal-why{margin:10px 0 0;}
@media (max-width:640px){
  .uxbal{padding:11px 12px;}
  .uxbal-c{flex-basis:100%;}
}

/* -- the fold ---------------------------------------------------------- */
.uxwhat{margin-bottom:14px;}
.uxwhat-b h4{font-size:11.5px;font-weight:800;color:var(--ux-text);
  margin:12px 0 3px;text-transform:none;letter-spacing:0;}
.uxwhat-b h4:first-child{margin-top:0;}
.uxwhat-b p{margin:0;font-size:11.5px;line-height:1.65;}

/* -- one thin utility row ---------------------------------------------- */
.uxutil{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-top:4px;font-size:10.5px;}
.uxutil .uxu-h{color:var(--ux-muted);line-height:1.5;flex:1 1 200px;min-width:0;}
.uxutil .uxspacer{margin-left:auto;}

/* -- responsive --------------------------------------------------------
   Five across needs about 900px to stay readable. Below that the row turns
   vertical and the arrows turn with it, which keeps the sequence legible
   instead of wrapping into an ambiguous grid. */
@media (max-width:900px){
  /* Stacked, there is no row for the band to span, so it goes — and the seam
     arrow grows a label instead, which keeps the two halves named on a phone
     rather than only on a laptop. */
  .uxjband{display:none;}
  /* Back to a flex column: nine tracks describe a row, and a stacked journey
     has no row. Explicitly re-declared rather than left to grid-auto-flow,
     because a single-column grid would still impose the 26px arrow tracks. */
  .uxjrow{display:flex;flex-direction:column;}
  .uxjarrow{align-self:center;padding:3px 0;transform:rotate(90deg);}
  .uxjseam{display:flex;align-items:center;justify-content:center;gap:9px;
    transform:none;padding:9px 0 10px;align-self:stretch;}
  .uxjseam::before{left:0;right:0;top:50%;bottom:auto;width:auto;
    border-left:0;border-top:1.5px dotted #b9c2ce;transform:none;}
  /* The chip already contains an arrow. A second one beside it read as an
     off-centre stray rather than as part of the divider. */
  .uxjseam svg{display:none;}
  .uxjseam-l{display:inline-block;position:relative;background:var(--ux-surface);
    padding:3px 11px;border:1px solid #d3dae3;border-radius:11px;
    font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#5b6775;
    white-space:nowrap;}
  .uxjseam-n{text-align:left;margin:-4px 0 14px;padding:0;}
  /* Stacked, centred body text reads badly against a left-aligned column. */
  .uxjleg{justify-content:flex-start;text-align:left;margin:2px 0 12px;padding:0;}
  .uxj{flex:0 0 auto;}
  /* Stacked, the fork is already a column, so it needs nothing except to stop
     stretching its lanes to a shared height they no longer share. */
  .uxjfork{flex:0 0 auto;gap:9px;}
  .uxjfork > .uxjlane{flex:0 0 auto;}
  /* Stacked, the cards no longer need to agree on a height — releasing the
     minimums stops every step carrying two lines of empty space. */
  .uxj-t,.uxj-d{min-height:0;}
  .uxj-subs,.uxj-c{margin-top:9px;}
  .uxjarrow svg{width:22px;height:22px;}
}
@media (max-width:640px){
  .uxhero2{padding:18px 16px 16px;}
  .uxhero2 .uxvp{font-size:16px;}
  .uxtrust{gap:4px 14px;font-size:10.5px;}
  .uxjloop{text-align:left;justify-content:flex-start;}
}

/* ============================================================================
   6. Footer
   ============================================================================
   One row. Contact, the © line, the build. Everything else people were told
   belonged in a footer is either a page nobody opened or a duplicate of a
   control that already exists somewhere better. */

.uxfoot{margin-top:26px;padding:13px 0 8px;border-top:1px solid var(--ux-border);
  font-size:10.5px;color:var(--ux-muted);line-height:1.7;overflow-wrap:anywhere;}
.uxfoot .uxfrow{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;}
.uxfoot a,.uxfoot button.uxlink{color:var(--ux-muted);text-decoration:underline;
  background:none;border:none;padding:3px 0;font:inherit;cursor:pointer;}
.uxfoot a:hover,.uxfoot button.uxlink:hover{color:var(--ux-primary);}
.uxfoot .uxfsep{opacity:.45;}
.legal-foot{opacity:.95;}
.uxbuild{font-variant-numeric:tabular-nums;opacity:.75;}


/* ============================================================================
   7. Legal notice (legal.js)
   ============================================================================
   Set for READING. The temptation is to make legal text small and grey; small
   grey text is what people skip, and text that is skipped protects nothing. */

.legalnotice{max-height:64vh;overflow:auto;padding-right:4px;}
.legalnotice h4{margin:16px 0 6px;font-size:12.5px;color:var(--ux-primary);
  border-bottom:1px solid var(--ux-border);padding-bottom:4px;}
.legalnotice h4:first-of-type{margin-top:8px;}
.legal-lead{font-size:12px;line-height:1.6;background:var(--ux-surface-2);
  border-left:3px solid var(--ux-accent);border-radius:0 7px 7px 0;
  padding:10px 12px;margin-bottom:6px;}
.legal-b{font-size:11.5px;line-height:1.65;color:var(--ux-text);}
.legal-b ul{margin:6px 0 6px 18px;}
.legal-b li{margin-bottom:4px;}
.legal-b a{color:var(--ux-primary);}
.legal-ver{margin-top:14px;padding-top:8px;border-top:1px dashed var(--ux-border);
  font-size:10px;color:var(--ux-muted);}


/* ============================================================================
   8. Contact form (contact.js)
   ========================================================================== */

.ctwrap{max-width:560px;}
.ctlead{font-size:12.5px;color:var(--ux-muted);margin:0 0 14px;line-height:1.6;}
.ctlab{display:block;font-size:11px;font-weight:700;color:var(--ux-muted);
  text-transform:uppercase;letter-spacing:.03em;margin:12px 0 4px;}
.ctwrap input[type=text],.ctwrap input[type=email],.ctwrap textarea,.ctsel{
  width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:var(--ux-text);
  background:var(--ux-surface);border:1px solid var(--ux-border-strong);
  border-radius:7px;padding:8px 10px;}
.ctwrap textarea{resize:vertical;min-height:110px;line-height:1.55;}
.ctwrap input:focus,.ctwrap textarea:focus,.ctsel:focus{
  outline:none;border-color:var(--ux-primary);box-shadow:0 0 0 3px rgba(98,110,140,.16);}

/* Off-screen, not display:none — some bots skip hidden fields but almost none
   skip positioned ones. See contact.js. */
.cthp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.ctgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.ctnote{font-size:11px;color:var(--ux-muted);line-height:1.6;margin:12px 0 0;}
.ctmeta{display:inline-block;background:var(--ux-surface-3);border-radius:9px;
  padding:1px 8px;font-size:10px;color:var(--ux-muted);white-space:nowrap;}
.ctstatus{font-size:12px;line-height:1.5;margin-top:10px;}
.ctstatus:empty{display:none;}
.ct-err{color:var(--ux-danger);font-weight:600;}
.ct-busy{color:var(--ux-muted);}
.ctrow{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ctdone{text-align:center;padding:18px 4px;}
.ctdone-i{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;
  background:#E1F5EE;color:var(--ux-success);font-size:22px;font-weight:800;
  display:flex;align-items:center;justify-content:center;}
.ctdone .ctrow{justify-content:center;}

@media (max-width:640px){
  .ctgrid{grid-template-columns:1fr;}
  .ctwrap{max-width:none;}
}


/* ============================================================================
   9. The ⚙ dialog (settings.js)
   ============================================================================
   Data and Settings used to be two tabs. They are now one door, because they
   are things a user opens a handful of times a year and they were sitting in a
   tab bar next to Setup — which is step 1 of every engagement. */

/* In the tab bar, after the language switch. The brand bar was the obvious
   home and the wrong one: its logo is absolutely positioned bottom-right and
   the bar is not tall enough for two things in that corner. */
.stgear{align-self:center;flex:0 0 auto;width:30px;height:30px;margin:0 0 0 7px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ux-surface);border:1px solid var(--ux-border-strong);
  border-radius:8px;color:var(--ux-muted);font-size:15px;line-height:1;
  cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s;}
.stgear:hover{color:var(--ux-primary);border-color:var(--ux-primary);background:var(--ux-surface-2);}
.stgear:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
@media (pointer:coarse){ .stgear{width:var(--ux-tap);height:var(--ux-tap);} }
/* Below 640px the tab bar scrolls horizontally, so a gear appended at the end
   would scroll off with it. Pin it instead, and give the bar room to its left. */
@media (max-width:640px){
  .topbar{position:relative;padding-right:44px;}
  .stgear{position:absolute;right:7px;top:50%;transform:translateY(-50%);margin:0;
    box-shadow:-6px 0 8px -4px rgba(255,255,255,.9);}
}

.stdlg{max-height:70vh;overflow:auto;padding-right:4px;}

.sttop{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--ux-surface-2);border-radius:var(--ux-radius);
  padding:12px 14px;margin-bottom:6px;}
.sttop-l{flex:1 1 220px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.sttop-d{font-size:10.5px;color:var(--ux-muted);line-height:1.5;flex:1 1 160px;min-width:0;}

.stsec{margin:16px 0 6px;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ux-muted);
  border-bottom:1px solid var(--ux-border);padding-bottom:4px;}
.stnote{font-size:10.5px;line-height:1.6;color:var(--ux-muted);margin:0 0 8px;}

.strow{display:flex;align-items:flex-start;gap:11px;padding:10px 0;
  border-bottom:1px solid var(--ux-border);}
.strow:last-of-type{border-bottom:none;}
.strow-i{flex:0 0 22px;font-size:15px;line-height:1.3;text-align:center;opacity:.8;}
.strow-x{flex:1 1 200px;min-width:0;}
.strow-t{font-size:12.5px;font-weight:600;color:var(--ux-text);line-height:1.35;}
.strow-d{font-size:10.5px;color:var(--ux-muted);line-height:1.55;margin-top:2px;}
.strow-c{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding-top:1px;}

/* -- where you start (the landing role) --------------------------------
   Three stacked options rather than a segmented toggle: each needs a line of
   explanation, because "Delivery owner" does not on its own tell you which
   screen you will get. A toggle with three labels and no consequences stated
   would be a guess. */
.strole{display:flex;flex-direction:column;gap:5px;width:230px;max-width:100%;}
.strole-b{display:flex;flex-direction:column;gap:1px;text-align:left;
  padding:7px 11px;border:1px solid var(--ux-border);border-radius:var(--ux-radius);
  background:var(--ux-surface);cursor:pointer;font-family:inherit;width:100%;
  transition:border-color .12s,background .12s;}
.strole-b:hover{border-color:var(--ux-primary);}
.strole-b:focus-visible{outline:2.5px solid var(--ux-focus);outline-offset:2px;}
.strole-t{font-size:11.5px;font-weight:700;color:var(--ux-text);line-height:1.3;}
.strole-d{font-size:10px;line-height:1.45;color:var(--ux-muted);}
.strole-b.on{border-color:var(--ux-primary);background:#f1f6fb;
  box-shadow:0 0 0 1px var(--ux-primary) inset;}
.strole-b.on .strole-t{color:var(--ux-primary);}

@media (max-width:520px){
  .strow{flex-wrap:wrap;}
  .strow-c{width:100%;padding-left:33px;}
  .strow-c .btn,.strow-c select{width:100%;text-align:center;}
  .strow-c .toggle{width:100%;}
  .strole{width:100%;}
}


/* ============================================================================
   10. Plans (settings.js)
   ========================================================================== */

.stpill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;border-radius:10px;padding:3px 10px;white-space:nowrap;}
.stpill.free      {background:var(--ux-surface-3);color:#4c5462;}
.stpill.pro       {background:#E1F5EE;color:#0F6E56;}
.stpill.consult   {background:#EDE7F7;color:#5B3E92;}
.stpill.enterprise{background:#FAEEDA;color:#7f6436;}

.stplans-lead{font-size:12px;line-height:1.6;color:var(--ux-muted);margin:0 0 14px;}
.stplans-n{font-size:10.5px;line-height:1.6;color:var(--ux-muted);margin:14px 0 0;}

.stpg{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.stpc{border:1px solid var(--ux-border);border-radius:var(--ux-radius);
  background:var(--ux-surface);padding:14px 15px;display:flex;flex-direction:column;}
.stpc.on{border-color:var(--ux-accent);box-shadow:0 0 0 1px var(--ux-accent) inset;}
.stpc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}
.stpc-tick{color:var(--ux-accent);font-weight:800;font-size:14px;}
.stpc-p{font-size:17px;font-weight:800;color:var(--ux-text);line-height:1.2;}
.stpc-p span{display:block;font-size:10px;font-weight:500;color:var(--ux-muted);
  margin-top:3px;line-height:1.4;}
.stpc-f{font-size:11px;line-height:1.55;color:var(--ux-muted);margin:9px 0 10px;
  padding-bottom:10px;border-bottom:1px dashed var(--ux-border);}
.stpc-l{margin:0 0 12px;padding-left:16px;flex:1 1 auto;}
.stpc-l li{font-size:11px;line-height:1.55;color:var(--ux-text);margin-bottom:5px;}
.stpc-c{margin-top:auto;}
.stpc-cta{width:100%;text-align:center;}
.stpc-on{font-size:10.5px;font-weight:700;color:var(--ux-accent);text-align:center;padding:6px 0;}
.stpc-n{font-size:10.5px;color:var(--ux-muted);text-align:center;padding:6px 0;line-height:1.4;}

/* Four cards need room. The lightbox is widened only while the plan panel is
   open (settings.js adds .stwide). */
.lb.stwide .lb-card{max-width:1040px;}
/* Between those widths auto-fit lands on 3 columns and orphans the fourth
   card on its own row, which reads as a fault rather than a comparison. */
@media (min-width:700px) and (max-width:1040px){ .stpg{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .stpg{grid-template-columns:1fr;} }


/* ============================================================================
   11. Import preview and reset (settings.js)
   ============================================================================
   Loading a file replaces a consultant's live workspace. It gets a preview,
   not a shrug — you see what is in the file before anything is overwritten. */

.stimp-lead{font-size:12px;line-height:1.6;color:var(--ux-muted);margin:0 0 12px;}
.stimp-box{border:1px solid var(--ux-border);border-radius:var(--ux-radius);
  background:var(--ux-surface-2);padding:4px 13px;}
.stimp-r{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--ux-border);font-size:11.5px;}
.stimp-r:last-child{border-bottom:none;}
.stimp-r span{color:var(--ux-muted);}
.stimp-r b{color:var(--ux-text);font-variant-numeric:tabular-nums;text-align:right;}
.stimp-y{color:var(--ux-success);font-weight:700;}
.stimp-n{color:var(--ux-muted);font-weight:400;font-style:italic;}
.stimp-note{margin-top:12px;}
.stimp-fine{font-size:10.5px;color:var(--ux-muted);line-height:1.55;margin-top:10px;}

.strst input[type=text]{width:100%;box-sizing:border-box;font:inherit;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;padding:9px 11px;
  border:1px solid var(--ux-border-strong);border-radius:7px;}
.strst input[type=text]:focus{outline:none;border-color:var(--ux-danger);
  box-shadow:0 0 0 3px rgba(142,31,31,.14);}
.strst .btnd[disabled]{opacity:.45;cursor:not-allowed;}
.strst .btnd[disabled]:hover{background:#fdf3f3;border-color:#e8c4c4;}


/* ============================================================================
   12. Transformation health check (health.js)
   ============================================================================
   The Dashboard answers "what is the score". This answers "is it moving, and
   what are we quietly not doing" — so it is built out of verdicts, not just
   numbers. Every signal carries a band (good / watch / act) and every panel
   can explain why it matters without leaving the page. */

.hxtiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:10px;}
.hxtile{border:1px solid var(--ux-border);border-left:4px solid var(--hxc,var(--ux-border-strong));
  border-radius:var(--ux-radius);background:var(--ux-surface);padding:12px 13px;
  box-shadow:0 1px 2px rgba(98,110,140,.05);}
.hxtile-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.hxtile-t{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ux-muted);}
/* v2.14: the dial and the reading sit side by side, so the tile is scanned as
   a picture first and read second. */
.hxtile-g{display:flex;align-items:center;gap:11px;margin:6px 0 4px;}
.hxtile-r{min-width:0;}
.hxtile-v{font-size:24px;font-weight:800;color:var(--ux-text);line-height:1.15;}
.hxtile-v span{font-size:14px;font-weight:600;color:var(--ux-muted);}
/* The band word, out of the 9px corner pill it used to live in. Same
   information at 11px in the band colour, directly under the number it
   qualifies — which is where someone looking at the number already is. */
.hxtile-b{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--hxc);margin-top:2px;}
.hxtile-s{font-size:10.5px;line-height:1.45;color:var(--ux-muted);}

/* -- the dial ---------------------------------------------------------
   Zones tinted, needle solid: the arc is a legend of the thresholds and the
   needle is the reading, so position carries the signal and colour only
   reinforces it. Nothing here is colour-alone — the band word sits beside it
   and the svg carries an aria-label. */
.hxdial{flex:0 0 auto;width:78px;height:40px;display:block;overflow:visible;}
.hxd-z{fill:none;stroke-width:9;stroke-linecap:butt;}
.hxd-z.z-act{stroke:#F3D4D4;}
.hxd-z.z-watch{stroke:#F7E3C4;}
.hxd-z.z-good{stroke:#C8E9DC;}
/* The needle takes the tile's band colour, so the one thing that moves is
   also the one thing that is saturated. */
.hxd-n{fill:var(--hxc,var(--ux-muted));}
.hxd-h{fill:var(--hxc,var(--ux-muted));stroke:var(--ux-surface);stroke-width:1.5;}
/* No needle to draw with no data: the tinted arc alone reads as "not scored",
   which is what .hx-na means. */
.hx-na .hxd-n,.hx-na .hxd-h{display:none;}

/* -- the balance tile's two figures ------------------------------------
   LENS spread and the build/ship split, on one line, told apart by the thread
   colours the rest of the product already uses for exactly these two things.
   The separator is a middot rather than a slash: three slashes in "3/4 · 5/2"
   would read as one four-part ratio. */
.hxbal-x{margin:0 5px;color:var(--ux-border-strong)!important;font-size:14px;}
.hxbal-c{color:var(--lane-cap-fg);}
.hxbal-p{color:var(--lane-dep-fg);}
.hxbal-k{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 3px;
  font-weight:700;}
.hxbal-k i{display:inline-block;width:7px;height:7px;border-radius:2px;
  margin:0 3px 0 5px;vertical-align:-1px;}
.hxbal-k i:first-child{margin-left:0;}

/* The bands. Green / amber / red used strictly semantically — this is the one
   screen in the product where red is a legitimate verdict rather than an
   error, so it is the one place the danger colour appears outside a
   destructive action. */
.hx-good{--hxc:#0F6E56;}
.hx-watch{--hxc:#A85B12;}
.hx-act{--hxc:#8E1F1F;}
.hx-na{--hxc:#b0b7c1;}

/* `.hxbadge` — the 9px corner pill — was removed in v2.14 along with its rule.
   It was the only thing carrying the verdict, at the smallest size on the
   tile, and people missed it; the dial plus `.hxtile-b` replaced it. The rule
   is deleted rather than left behind, because dead CSS in an additive layer is
   how the next person concludes the badge is still in play.
*/

.hxrule{font-size:10px;color:var(--ux-muted);line-height:1.5;
  margin:0 0 13px;padding-left:2px;font-style:italic;}

.hxpanel{margin-bottom:13px;}
.hxpanel-d{margin:-4px 0 10px;}

/* "Why this matters" — the expert reasoning, one click away and closed by
   default. Present because a verdict without a reason is an opinion. */
.hxwhy{margin-top:11px;border-top:1px dashed var(--ux-border);padding-top:8px;}
.hxwhy>summary{cursor:pointer;list-style:none;font-size:10px;font-weight:700;
  color:var(--ux-primary);display:flex;align-items:center;gap:5px;min-height:22px;}
.hxwhy>summary::-webkit-details-marker{display:none;}
.hxwhy>summary::before{content:'\25B8';font-size:9px;transition:transform .15s;}
.hxwhy[open]>summary::before{transform:rotate(90deg);}
.hxwhy-b{font-size:10.5px;line-height:1.65;color:var(--ux-muted);padding-top:5px;}

/* -- horizontal bars (funnel, LENS) ------------------------------------- */
.hxbar{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:11px;}
/* LENS names arrive from the API and are long ("Leadership & Strategy"), so
   the label column has to be wide enough to earn its place or the letter is
   all that survives. */
.hxbar-l{flex:0 0 130px;color:var(--ux-muted);font-weight:600;font-size:10.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hxbar-t{flex:1 1 auto;height:9px;border-radius:5px;background:var(--ux-surface-3);overflow:hidden;}
.hxbar-f{display:block;height:100%;border-radius:5px;background:var(--ux-primary);
  transition:width .2s;min-width:2px;}
.hxbar-f.zero{background:transparent;}
.hxbar-f.lensL{background:#3F6CB0;} .hxbar-f.lensE{background:#1D9E75;}
.hxbar-f.lensN{background:#8A6F11;} .hxbar-f.lensS{background:#9A4BB0;}
.hxbar-n{flex:0 0 26px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}

.hxverdict{margin-top:10px;padding:8px 11px;border-radius:var(--ux-radius-sm);
  font-size:11px;line-height:1.5;font-weight:600;
  color:var(--hxc);background:color-mix(in srgb, var(--hxc) 9%, #fff);
  border-left:3px solid var(--hxc);}
.hxverdict.hx-good{background:#f2faf7;}
.hxverdict.hx-watch{background:#fdf7ec;}
.hxverdict.hx-act{background:#fdf3f3;}
.hxverdict.hx-na{background:var(--ux-surface-2);}

.hxok{font-size:11.5px;color:var(--ux-success);font-weight:600;line-height:1.5;
  background:#f2faf7;border-radius:var(--ux-radius-sm);padding:9px 11px;}

/* -- stalled list -------------------------------------------------------- */
.hxlist{display:flex;flex-direction:column;gap:6px;}
.hxrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:1px solid var(--ux-border);border-radius:var(--ux-radius-sm);
  background:var(--ux-surface);padding:9px 11px;cursor:pointer;font:inherit;}
.hxrow:hover{border-color:var(--ux-danger);background:#fdf9f9;}
.hxrow-x{flex:1 1 auto;min-width:0;}
.hxrow-t{display:block;font-size:11.5px;font-weight:600;color:var(--ux-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hxrow-d{display:block;font-size:10px;color:var(--ux-muted);margin-top:1px;}
.hxrow-n{flex:0 0 auto;font-size:10px;color:var(--ux-danger);font-weight:600;white-space:nowrap;}
.hxrow-n b{font-size:13px;font-variant-numeric:tabular-nums;}

/* -- blind spots --------------------------------------------------------- */
.hxchips{display:flex;flex-direction:column;gap:5px;min-width:0;}
/* v2.14, found while testing the dials at 390px: the blind-spots list pushed
   the whole page to a 530px scroll width in German. Three things had to be
   true at once and only two were. `.hxgap-t` already had `min-width:0` and its
   ellipsis, but the <button> around it did not, so the button sized to its
   content; and the panel is a grid item in `.two`, whose default `auto`
   minimum is min-content, so the oversized button grew the track rather than
   being clipped by it. Fixed at both levels — a grid item that must never
   exceed its track needs `min-width:0` regardless of what is inside it. */
.hxpanel{min-width:0;}
.two > *{min-width:0;}
/* Measured-and-low is drawn hot; never-looked-at is drawn cool. Same list,
   two different findings — see blindHtml(). */
.hxgap{display:flex;align-items:center;gap:9px;width:100%;min-width:0;overflow:hidden;
  text-align:left;
  border:1px solid #f0dcdc;border-radius:var(--ux-radius-sm);background:#fdf7f7;
  padding:6px 11px;cursor:pointer;font:inherit;}
.hxgap.soft{border-color:var(--ux-border);background:var(--ux-surface-2);}
.hxgap.soft .hxgap-k{color:var(--ux-muted);border-color:var(--ux-border);}
.hxgap:hover{border-color:var(--ux-danger);background:#fbeded;}
.hxgap-k{flex:0 0 auto;width:20px;height:20px;border-radius:5px;display:flex;
  align-items:center;justify-content:center;font-size:10px;font-weight:800;
  background:#fff;color:var(--ux-danger);border:1px solid #f0dcdc;}
.hxgap-t{flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hxgap-l{flex:0 0 auto;font-size:10px;color:var(--ux-muted);white-space:nowrap;}

/* -- build vs ship ------------------------------------------------------- */
.hxsplit{display:flex;height:26px;border-radius:6px;overflow:hidden;
  background:var(--ux-surface-3);}
.hxsplit-s{display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;color:#fff;min-width:22px;}
/* v2.12 — this bar is the health check's answer to the question the fork on
   Home asks, so it has to speak the fork's vocabulary. It did not: capability
   was green and implementation blue, which now names the Direction and Steer
   movements rather than the two Deliver threads. It is a three-way split
   (capability / both / implementation) where the fork is two-way, so the
   middle band keeps the neutral slate — "both" is genuinely neither thread,
   and inventing a third thread colour for it would be a fourth vocabulary. */
.hxs-a{background:var(--lane-cap);color:#3d2703;}
.hxs-b{background:#626E8C;}
.hxs-c{background:var(--lane-dep);}
.hxkey{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:8px;
  font-size:10px;color:var(--ux-muted);}
.hxkey span{display:inline-flex;align-items:center;gap:5px;}
.hxkey i{width:9px;height:9px;border-radius:2px;display:inline-block;}

/* -- coverage table ------------------------------------------------------ */
.hxtable{width:100%;border-collapse:collapse;font-size:11px;}
.hxtable th{text-align:left;font-size:9px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ux-muted);padding:0 9px 6px 0;
  border-bottom:1px solid var(--ux-border);white-space:nowrap;}
.hxtable td{padding:7px 9px 7px 0;border-bottom:1px solid var(--ux-border);
  font-variant-numeric:tabular-nums;}
.hxtable tr:last-child td{border-bottom:none;}
.hxtable td:first-child{font-variant-numeric:normal;font-weight:600;}
.hxcov-f{font-size:10px;color:var(--hxc);font-weight:600;}

@media (max-width:640px){
  .hxbar-l{flex:0 0 84px;font-size:9.5px;}
  .hxrow-n{font-size:9.5px;}
  .hxtile-v{font-size:21px;}
}