/* Assay workspace — the design layer (5.27).

   WHY THIS IS A SECOND FILE.
   assay.css grew one release at a time: each feature brought its own rules and
   a few corrections to the ones before it, and by 5.26 the same component was
   styled in three or four places. Every individual rule was reasonable; the
   page they added up to had no system left in it — nine sizes of small text,
   three kinds of button, tiles whose action sat underneath them, and labels in
   capitals wherever a label had been needed.

   This file is the system, stated once. It is loaded after assay.css and every
   rule is scoped under `.ui27` (set on <html>), so it wins by one class and
   nothing here has to know how many times a component was restyled before.
   What it settles:

     surfaces   one page tone, white panels, one border, one soft shadow
     corners    6px on controls, 10px on panels and tiles
     type       Spectral for titles and figures, Public Sans for everything a
                person reads, IBM Plex Mono only for ids and code
     labels     sentence case; capitals are not a way of saying "this is a label"
     colour     tone belongs to meaning (severity, grade, state), never to chrome
     the grade  a hallmark — the struck, cut-cornered mark an assay office
                leaves on what it has tested. It is the one ornament.

   The diagrams (flow map cards, architecture boxes) are laid out to measured
   sizes and are deliberately not restyled here. */

html.ui27 {
  --page: #EDF0ED; --surface: #FFFFFF; --sunk: #F6F8F6;
  --border: #DCE2DD; --soft: #E8ECE9; --strong: #BAC5BE;
  /* 5.29: --faint was 4.49:1 on white, a hair under the 4.5 the small text
     set in it needs; #62706A clears it on the page tone as well. */
  --ink: #121B16; --ink2: #2C3932; --muted: #53615A; --faint: #62706A; --ghost: #99A59F; --ink-rgb: 18,27,22;
  --bar: #0E1D16; --bar-2: #0E1D16; --bar-line: #24372D; --on-bar: #F2F6F3; --on-bar-dim: #A3B5AA;
  --splash: #0E1D16; --splash-2: #173026; --splash-3: #132A20;
  --lift: 0 1px 2px rgba(18,27,22,.05);
  --raise: 0 1px 2px rgba(18,27,22,.05), 0 10px 28px -14px rgba(18,27,22,.22);
  --pop: 0 2px 6px rgba(18,27,22,.08), 0 18px 44px -12px rgba(18,27,22,.28);
  --r-s: 6px; --r-m: 10px; --r-l: 14px;
  --focus: 0 0 0 3px rgba(28,122,74,.22);
  --sev-critical: #8E1D17; --sev-high: #C8471B; --sev-medium: #C9901B; --sev-low: #5E8C74; --sev-info: #9AA8A1;
  --red-ink: #9A1F17; --red-soft: #FCEBE8; --red-edge: #F1C8C2;
  --amber-ink: #7A5607; --amber-soft: #FCF2D6; --amber-edge: #EAD7A2;
  --green-ink: #14563A; --green-soft: #E8F4EC; --green-edge: #C3DECE;
  --grey-soft: #EEF1EE; --grey-edge: #D5DCD7;
  --blue-ink: #1D4F91; --blue-soft: #E8F1FB;
}

/* 5.29 · THE SAME SYSTEM ON A DARK PAGE. The base tokens are re-stated in
   assay.css; these are the ones this layer owns. Surfaces step up from the
   page rather than down (a panel is lighter than the ground it sits on, the
   way it is brighter in the light theme), the shadows go black, and the soft
   tints become deep washes with light ink on them. */
@media (prefers-color-scheme: dark) {
  html.ui27:not([data-theme="light"]) {
    --page: #0F1512; --surface: #171E1A; --sunk: #131A16;
    --border: #2A352F; --soft: #232C27; --strong: #44524A;
    --ink: #E8EDEA; --ink2: #CBD4CE; --muted: #A3AFA8; --faint: #8A978F; --ghost: #66736C; --ink-rgb: 232,237,234;
    --bar: #0B140F; --bar-2: #0B140F; --bar-line: #22332A; --on-bar: #F2F6F3; --on-bar-dim: #A3B5AA;
    --splash: #0B140F; --splash-2: #142219; --splash-3: #10201A;
    --lift: 0 1px 2px rgba(0,0,0,.35);
    --raise: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
    --pop: 0 2px 6px rgba(0,0,0,.4), 0 18px 44px -12px rgba(0,0,0,.8);
    --focus: 0 0 0 3px rgba(77,181,126,.3);
    --sev-critical: #C8463F; --sev-high: #E07A3A; --sev-medium: #D9A441; --sev-low: #6FAE8C; --sev-info: #7A8780;
    --red-ink: #F09A91; --red-soft: #31201E; --red-edge: #5C2F2A;
    --amber-ink: #EACB7E; --amber-soft: #2E2614; --amber-edge: #574620;
    --green-ink: #8CD2AA; --green-soft: #16281F; --green-edge: #2B5240;
    --grey-soft: #1F2823; --grey-edge: #343F39;
    --blue-ink: #9DBCE8; --blue-soft: #16202E;
  }
}
html.ui27[data-theme="dark"] {
  --page: #0F1512; --surface: #171E1A; --sunk: #131A16;
  --border: #2A352F; --soft: #232C27; --strong: #44524A;
  --ink: #E8EDEA; --ink2: #CBD4CE; --muted: #A3AFA8; --faint: #8A978F; --ghost: #66736C; --ink-rgb: 232,237,234;
  --bar: #0B140F; --bar-2: #0B140F; --bar-line: #22332A; --on-bar: #F2F6F3; --on-bar-dim: #A3B5AA;
  --splash: #0B140F; --splash-2: #142219; --splash-3: #10201A;
  --lift: 0 1px 2px rgba(0,0,0,.35);
  --raise: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
  --pop: 0 2px 6px rgba(0,0,0,.4), 0 18px 44px -12px rgba(0,0,0,.8);
  --focus: 0 0 0 3px rgba(77,181,126,.3);
  --sev-critical: #C8463F; --sev-high: #E07A3A; --sev-medium: #D9A441; --sev-low: #6FAE8C; --sev-info: #7A8780;
  --red-ink: #F09A91; --red-soft: #31201E; --red-edge: #5C2F2A;
  --amber-ink: #EACB7E; --amber-soft: #2E2614; --amber-edge: #574620;
  --green-ink: #8CD2AA; --green-soft: #16281F; --green-edge: #2B5240;
  --grey-soft: #1F2823; --grey-edge: #343F39;
  --blue-ink: #9DBCE8; --blue-soft: #16202E;
}

.ui27 body { font-size: 14px; line-height: 1.5; font-feature-settings: "ss01" on; text-rendering: optimizeLegibility; }
.ui27 ::selection { background: rgba(28,122,74,.2); }
.ui27 :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.ui27 a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ── the hallmark ─────────────────────────────────────────────────────── */
.ui27 .hallmark, .ui27 .grade-chip b, .ui27 .fp-grade {
  --hm: #5C6B63; --hm-face: #6E7D75; --cut: 5px;
  position: relative; isolation: isolate; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 26px; padding: 0; border: none; border-radius: 0;
  background: var(--hm); color: #fff; /* a hallmark is struck in its own colour in both themes */
  font: 600 14.5px/1 var(--serif); letter-spacing: 0; font-style: normal; text-transform: none;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.ui27 .hallmark::before, .ui27 .grade-chip b::before, .ui27 .fp-grade::before {
  content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--hm-face);
  clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px), 0 calc(var(--cut) - 1px));
}
.ui27 .grade-a.hallmark, .ui27 .grade-a.fp-grade, .ui27 .grade-a > b, .ui27 .ss-band.grade-a { --hm: #0C3E29; --hm-face: #14563A; }
.ui27 .grade-b.hallmark, .ui27 .grade-b.fp-grade, .ui27 .grade-b > b, .ui27 .ss-band.grade-b { --hm: #17613B; --hm-face: #1F7F4E; }
.ui27 .grade-c.hallmark, .ui27 .grade-c.fp-grade, .ui27 .grade-c > b, .ui27 .ss-band.grade-c { --hm: #7B560A; --hm-face: #9B6F0E; }
.ui27 .grade-d.hallmark, .ui27 .grade-d.fp-grade, .ui27 .grade-d > b, .ui27 .ss-band.grade-d { --hm: #8B2D0F; --hm-face: #B64116; }
.ui27 .grade-e.hallmark, .ui27 .grade-e.fp-grade, .ui27 .grade-e > b, .ui27 .ss-band.grade-e { --hm: #5F100C; --hm-face: #8E1D17; }
.ui27 .hallmark.hm-lg, .ui27 .fp-grade { width: 44px; height: 48px; --cut: 9px; font-size: 26px; }
.ui27 .hallmark.hm-lg::before, .ui27 .fp-grade::before { inset: 3px; }
.ui27 .hallmark.hm-xl { width: 68px; height: 74px; --cut: 14px; font-size: 42px; }
.ui27 .hallmark.hm-xl::before { inset: 4px; }

.ui27 .grade-chip { gap: 7px; padding: 0; border: none; border-radius: 0; background: none; color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ui27 button.grade-chip { padding: 4px 9px 4px 4px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); cursor: pointer; }
.ui27 button.grade-chip:hover { border-color: var(--strong); }
.ui27 button.grade-chip.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ui27 .grade-chip b { width: 22px; height: 24px; font-size: 13.5px; }

/* ── controls ─────────────────────────────────────────────────────────── */
.ui27 .btn-ghost, .ui27 .btn-green, .ui27 .btn-danger, .ui27 .btn-dark, .ui27 .btn-amber {
  padding: 7px 13px; border-radius: var(--r-s); font: 600 13px/1.4 var(--sans); letter-spacing: 0;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.ui27 .btn-ghost { border-color: var(--border); background: var(--surface); color: var(--ink2); box-shadow: var(--lift); }
.ui27 .btn-ghost:hover { background: var(--sunk); border-color: var(--strong); color: var(--ink); }
.ui27 .btn-green { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--lift); }
.ui27 .btn-dark { background: var(--ink); border-color: var(--ink); }
.ui27 .btn-sm { padding: 5px 11px !important; font-size: 12.5px !important; }
.ui27 .btn-wide-green, .ui27 .btn-wide-ghost, .ui27 .btn-wide-sso { padding: 11px 14px; border-radius: var(--r-s); font: 600 14px/1.4 var(--sans); text-align: center; }
.ui27 .btn-wide-green { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--lift); }
.ui27 .btn-wide-ghost { color: var(--ink2); font-weight: 500; }
.ui27 .btn-linkish { font: 600 13px/1.5 var(--sans); color: var(--green-deep); text-decoration: underline; text-decoration-color: var(--green-line); text-underline-offset: 3px; }
.ui27 .btn-linkish:hover { text-decoration-color: currentColor; }
.ui27 .btn-link { font-size: 13px; }

.ui27 .field-label { margin-bottom: 6px; font: 600 12.5px/1.4 var(--sans); letter-spacing: 0; color: var(--ink2); }
.ui27 .field { padding: 10px 12px; border-color: var(--strong); border-radius: var(--r-s); font: 400 14px/1.4 var(--sans); }
.ui27 .field:focus { border-color: var(--green); box-shadow: var(--focus); }
.ui27 .field::placeholder { color: var(--ghost); }
.ui27 .select select { padding: 8px 32px 8px 12px; border-color: var(--border); border-radius: var(--r-s); font-size: 13px; box-shadow: var(--lift); }
.ui27 .select select:hover { border-color: var(--strong); }
.ui27 .select select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green); }
.ui27 .select::after { content: ""; right: 13px; width: 6px; height: 6px; margin-top: -2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-50%) rotate(45deg); }
.ui27 .search { width: 260px; padding: 8px 12px; border-radius: var(--r-s); font-size: 13px; }
.ui27 .search:focus { border-color: var(--green); box-shadow: var(--focus); }

/* ── panels, titles, notices ──────────────────────────────────────────── */
.ui27 .panel { border-radius: var(--r-m); padding: 24px 26px; box-shadow: var(--lift); }
.ui27 .main .panel, .ui27 .main .card-panel, .ui27 .main .panel.rhead { border-top: 1px solid var(--border); }
.ui27 .h-serif { font: 500 28px/1.2 var(--serif); letter-spacing: -.012em; }
.ui27 .h-serif-sm { font: 500 23px/1.25 var(--serif); letter-spacing: -.01em; }
.ui27 .lede { font: 400 14px/1.6 var(--sans); color: var(--muted); max-width: 78ch; }
.ui27 .eyebrow { margin-bottom: 8px; gap: 0; font: 600 12.5px/1.4 var(--sans); letter-spacing: 0; color: var(--tone-deep, var(--tone)); }
.ui27 .eyebrow-rule { display: none; }
.ui27 .notice { padding: 13px 16px; border-radius: var(--r-s); font-size: 13.5px; }

/* ── status marks ─────────────────────────────────────────────────────── */
/* The dot is positioned out of the flow so that ::first-letter still finds the
   first letter: a pseudo-element in the line, in front of the text, would be
   "the first thing on the line" and the capital would never be applied. */
.ui27 .badge {
  --bd: var(--grey-soft);
  position: relative; display: inline-block; padding: 2px 10px 2px 20px; border: 1px solid var(--grey-edge); border-radius: 999px;
  background: var(--bd); color: var(--ink2); font: 600 12px/1.6 var(--sans); letter-spacing: 0; text-transform: lowercase;
}
.ui27 .badge::first-letter { text-transform: uppercase; }
.ui27 .badge::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.ui27 .badge-red { --bd: var(--red-soft); border-color: var(--red-edge); color: var(--red-ink); }
.ui27 .badge-amber { --bd: var(--amber-soft); border-color: var(--amber-edge); color: var(--amber-ink); }
.ui27 .badge-green { --bd: var(--green-soft); border-color: var(--green-edge); color: var(--green-ink); }
.ui27 .badge-ink { --bd: var(--ink); border-color: var(--ink); color: var(--on-tone); }
.ui27 .badge-outline { --bd: var(--surface); border-color: var(--border); color: var(--muted); }
.ui27 .chip { padding: 2px 9px; border-radius: 999px; background: var(--surface); border-color: var(--border); font: 500 12px/1.6 var(--sans); color: var(--muted); }

/* ── tiles ────────────────────────────────────────────────────────────── */
.ui27 .stats { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; }
.ui27 .stat { position: relative; padding: 15px 17px 14px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--lift); }
.ui27 .stat-label { margin-bottom: 9px; font: 600 12.5px/1.35 var(--sans); letter-spacing: 0; color: var(--muted); }
.ui27 .stat-value { font: 500 31px/1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.ui27 .stat-sub { margin-top: 8px; font: 400 12.5px/1.45 var(--sans); color: var(--faint); }
/* Tone is the figure's, and a 3px mark at the tile's edge — not a wash across
   the whole box, which made six tiles six competing colours. */
.ui27 .stat-red, .ui27 .stat-amber, .ui27 .stat-green, .ui27 .stat-navy, .ui27 .stat-purple { background: var(--surface); border-color: var(--border); }
.ui27 .stat-red .stat-label, .ui27 .stat-amber .stat-label, .ui27 .stat-green .stat-label, .ui27 .stat-navy .stat-label, .ui27 .stat-purple .stat-label { color: var(--muted); }
.ui27 .stat-red .stat-sub, .ui27 .stat-green .stat-sub { color: var(--faint); }
.ui27 .stat-red .stat-value { color: var(--red); }
.ui27 .stat-amber .stat-value { color: var(--amber-deep); }
.ui27 .stat-green .stat-value { color: var(--green-deep); }
.ui27 .stat-navy .stat-value { color: var(--navy); }
.ui27 .stat-purple .stat-value { color: var(--purple); }
.ui27 .stat-red::before, .ui27 .stat-amber::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: var(--red); }
.ui27 .stat-amber::before { background: var(--amber); }

/* A tile that goes somewhere is one card: the figure, and under a hairline
   the words for where it goes. The whole card is the button. */
.ui27 .stat-link { border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--lift); overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.ui27 .stat-link .stat { border: none; border-radius: 0; background: transparent; box-shadow: none; transform: none !important; transition: none; }
.ui27 .stat-link:hover, .ui27 .stat-link:focus-visible { border-color: var(--strong); box-shadow: var(--raise); }
.ui27 .stat-link:hover .stat, .ui27 .stat-link:focus-visible .stat { border-color: transparent; }
.ui27 .stat-go { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 17px 10px; border-top: 1px solid var(--soft); background: var(--sunk); font: 600 12.5px/1.4 var(--sans); color: var(--muted); }
.ui27 .stat-go::after { content: ""; flex: none; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .12s; }
.ui27 .stat-go.stat-go-down::after { transform: rotate(135deg); margin-top: -3px; }
.ui27 .stat-link:hover .stat-go, .ui27 .stat-link:focus-visible .stat-go { color: var(--green-deep); }
.ui27 .stat-link:hover .stat-go:not(.stat-go-down)::after { transform: translateX(2px) rotate(45deg); }
.ui27 .stat-link.on { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.ui27 .stat-link.on .stat { background: transparent; box-shadow: none; border-color: transparent; }
.ui27 .stat-link.on .stat-go { background: var(--green-soft); color: var(--green-ink); }
.ui27 .stat-link.on .stat-go::after { display: none; }
.ui27 .stats-head { margin-top: 26px; margin-bottom: 10px; }
.ui27 .stats-head .field-label { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.ui27 .click-hint { font-size: 12.5px; color: var(--faint); }
.ui27 .click-hint::before { content: none; }
.ui27 .rhead .stats { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ── top bar ──────────────────────────────────────────────────────────── */
.ui27 .topbar { min-height: 56px; padding: 0 22px; column-gap: 20px; row-gap: 0; background: var(--bar); border-bottom: 1px solid var(--bar-line); }
.ui27 .topbar-left { column-gap: 22px; row-gap: 0; align-self: stretch; }
.ui27 .topbar-right { column-gap: 4px; row-gap: 6px; padding: 9px 0; }
.ui27 .topbar .brand-img { height: 27px; opacity: 1; }
.ui27 .estate-id { padding-left: 18px; }
.ui27 .estate-id b { font: 600 13px/1.3 var(--sans); }
.ui27 .estate-id span { font: 400 12px/1.3 var(--sans); }
/* The three modes are places, not a setting: they read as the bar's own tabs,
   marked by a line under the one you are in, rather than a boxed switch. */
.ui27 .topbar .modetabs { align-self: stretch; gap: 2px; padding: 0; border: none; border-radius: 0; background: none; }
.ui27 .topbar .modetab { position: relative; display: flex; align-items: center; padding: 0 13px; border: none; border-radius: 0; background: none; color: var(--on-bar-dim); min-height: 56px; }
.ui27 .topbar .modetab b { font: 500 14px/1 var(--sans); }
.ui27 .topbar .modetab:hover { color: var(--on-bar); }
.ui27 .topbar .modetab.on { background: none; box-shadow: none; color: var(--on-bar); }
.ui27 .topbar .modetab.on b { font-weight: 600; }
.ui27 .topbar .modetab.on::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--bar-accent); }
.ui27 .bar-btn { padding: 8px 11px; border: 1px solid transparent; border-radius: var(--r-s); background: none; font: 500 13.5px/1.2 var(--sans); color: var(--on-bar-dim); transition: background-color .12s, color .12s; }
.ui27 .bar-btn:hover { background: rgba(255,255,255,.08); color: var(--on-bar); }
.ui27 .bar-btn.on { background: rgba(255,255,255,.12); color: var(--on-bar); }
.ui27 .bar-btn.bar-primary { margin: 0 8px 0 6px; padding: 8px 14px; background: var(--bar-green); border-color: var(--bar-green); color: var(--on-bar); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.ui27 .bar-btn.bar-primary:hover { background: var(--bar-green-hover); border-color: var(--bar-green-hover); }
.ui27 .gsearch { flex: 1 1 240px; max-width: 440px; margin-right: auto; }
.ui27 .gsearch-in { padding: 8px 62px 8px 13px; border-color: var(--bar-line); border-radius: var(--r-s); background: rgba(255,255,255,.06); font-size: 13.5px; }
.ui27 .gsearch-in:hover { background: rgba(255,255,255,.09); }
.ui27 .gsearch-pop { border-radius: var(--r-m); box-shadow: var(--pop); }
.ui27 .role-chip { padding: 5px 11px; border-color: var(--bar-line); background: rgba(255,255,255,.04); font: 500 12.5px/1.3 var(--sans); color: var(--on-bar); }
.ui27 .role-chip.role-owner, .ui27 .role-chip.role-developer { border-color: var(--bar-line); }
.ui27 .topbar .buildsig { margin-left: 4px; padding: 0 4px; border: none; font: 400 12px/1.5 var(--sans); color: var(--on-bar-dim); opacity: .8; }
.ui27 .topbar .btn-link { margin-left: 6px; font: 500 13px/1 var(--sans); }
.ui27 .whoami { padding: 3px 11px 3px 3px; border-color: var(--bar-line); }
.ui27 .whoami-i { width: 24px; height: 24px; font: 600 10.5px/1 var(--sans); }
.ui27 .whoami-n { font-size: 12.5px; }
.ui27 .plan-chip { font-size: 12.5px; }
@media (max-width: 1560px) { .ui27 .estate-id { display: none; } }

/* ── context bar ──────────────────────────────────────────────────────── */
.ui27 .ctxbar { gap: 8px 22px; min-height: 54px; padding: 8px 22px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(18,27,22,.02), 0 6px 16px -14px rgba(18,27,22,.35); }
.ui27 .ctx-grade { gap: 10px; padding: 3px 10px 3px 3px; border-radius: var(--r-s); transition: background-color .12s; }
.ui27 .ctx-grade:hover { background: var(--sunk); }
.ui27 .ctx-score { font: 400 13px/1 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; }
.ui27 .ctx-score b { font: 600 21px/1 var(--serif); color: var(--ink); margin-right: 1px; }
.ui27 .ctx-band { font: 600 13px/1 var(--sans); color: var(--ink2); }
.ui27 .ctx-stat { font: 400 13px/1.3 var(--sans); color: var(--muted); }
.ui27 .ctx-stat b { font: 600 13.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ui27 .ctx-go, .ui27 button.ctx-stat.ctx-go { border-bottom: none; text-decoration: none; border-radius: 4px; padding: 5px 7px; margin: 0 -3px; transition: background-color .12s; }
.ui27 button.ctx-stat.ctx-go { font: 400 13px/1.3 var(--sans); }
.ui27 button.ctx-stat.ctx-go b { font: 600 13.5px/1 var(--sans); }
.ui27 .ctx-go:hover { background: var(--sunk); color: var(--ink); }
.ui27 .ctx-sevs { display: inline-flex; align-items: center; gap: 6px; padding-left: 20px; border-left: 1px solid var(--border); }
.ui27 .ctx-pill { margin: 0; padding: 4px 10px; border: 1px solid var(--grey-edge); border-radius: 999px; background: var(--grey-soft); font-size: 12.5px; color: var(--ink2); }
.ui27 .ctx-pill.sev-critical:not(.zero) { background: var(--red-soft); border-color: var(--red-edge); color: var(--red-ink); }
.ui27 .ctx-pill.sev-high:not(.zero) { background: var(--amber-soft); border-color: var(--amber-edge); color: var(--amber-ink); }
.ui27 .ctx-pill.zero { background: none; color: var(--faint); }
.ui27 .ctx-pill b, .ui27 .ctx-stat .ctx-pill b.t-red, .ui27 .ctx-stat .ctx-pill b.t-amber { color: inherit; }
.ui27 .ctx-pill:hover { border-color: var(--strong); }
.ui27 .ctx-k { font: 500 13px/1 var(--sans); color: var(--faint); }
.ui27 .menu-btn { padding: 8px 13px; font: 600 13px/1.2 var(--sans); }
.ui27 .menu-pop { width: 320px; padding: 6px; border-radius: var(--r-m); box-shadow: var(--pop); }
.ui27 .menu-item { padding: 9px 11px; border-radius: var(--r-s); }
.ui27 .menu-item:hover { background: var(--sunk); }
.ui27 .menu-item b { font-size: 13.5px; }
.ui27 .menu-item span { margin-top: 1px; font-size: 12.5px; }

/* ── the rail ─────────────────────────────────────────────────────────── */
.ui27 .report-body { padding: 22px 22px 0; gap: 22px; }
.ui27 .sidebar { width: 216px; }
.ui27 .side { padding: 8px; border-radius: var(--r-m); box-shadow: var(--lift); }
.ui27 .side-group { padding: 14px 10px 6px; gap: 8px; font: 600 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.ui27 .side-group::before { width: 7px; height: 7px; border-radius: 50%; }
.ui27 .side-group:first-of-type { padding-top: 6px; }
.ui27 .side-item { position: relative; margin: 1px 0; padding: 7px 10px; border-left: none; border-radius: var(--r-s); font: 500 13.5px/1.4 var(--sans); color: var(--ink2); transition: background-color .1s; }
.ui27 .side-item:hover { background: var(--sunk); color: var(--ink); }
.ui27 .side-item.on { background: var(--tone-tint); color: var(--tone-deep, var(--tone)); font-weight: 600; box-shadow: inset 0 0 0 1px var(--tone-line); }
.ui27 .side-item.on::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tone); }
.ui27 .side-item em { padding: 1px 7px; border-radius: 999px; background: var(--grey-soft); font: 600 11.5px/1.5 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.ui27 .side-item.on em { background: var(--surface); color: var(--tone-deep, var(--tone)); }
.ui27 .side-note, .ui27 .side-demo { margin: 10px 2px 2px; padding: 10px 11px; border: none; border-radius: var(--r-s); background: var(--sunk); font: 400 12.5px/1.55 var(--sans); color: var(--muted); }

/* ── section headings ─────────────────────────────────────────────────── */
.ui27 .section-intro { padding: 2px 0 14px; margin-bottom: 18px; }
.ui27 .section-intro h2 { font: 500 26px/1.2 var(--serif); letter-spacing: -.012em; }
.ui27 .section-intro p { font-size: 14px; color: var(--muted); }
.ui27 .helpmark { border-color: var(--border); color: var(--faint); background: var(--surface); }

/* ── Overview: the verdict ────────────────────────────────────────────── */
.ui27 .rhead { padding: 0; overflow: hidden; }
.ui27 .rhead > * { margin-left: 28px; margin-right: 28px; }
.ui27 .rhead > :last-child { margin-bottom: 26px; }
.ui27 .ov-top { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 0; padding: 26px 28px 24px; }
.ui27 .ov-verdict { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 16px; cursor: pointer; padding: 6px 14px 6px 6px; margin: -6px 0 -6px -6px; border-radius: var(--r-m); transition: background-color .12s; }
.ui27 .ov-verdict:hover { background: var(--sunk); }
.ui27 .ov-verdict:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ui27 .ov-verdict-t { display: flex; flex-direction: column; gap: 5px; }
.ui27 .ov-verdict-t b { font: 500 25px/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.ui27 .ov-verdict-t span { font: 400 12.5px/1.3 var(--sans); color: var(--faint); white-space: nowrap; }
.ui27 .ov-title { flex: 1 1 380px; min-width: 0; padding-left: 26px; border-left: 1px solid var(--border); }
.ui27 .ov-title h1 { margin: 0 0 6px; font: 500 28px/1.2 var(--serif); letter-spacing: -.012em; }
.ui27 .ov-title p { margin: 0; max-width: 62ch; font: 400 13.5px/1.6 var(--sans); color: var(--muted); text-wrap: pretty; }
.ui27 .ov-scoped { display: inline-block; margin-right: 8px; padding: 1px 9px; border: 1px solid var(--navy-line); border-radius: 999px; background: var(--navy-tint); font: 600 12px/1.6 var(--sans); color: var(--navy); }

.ui27 .score { flex: none; min-width: 236px; padding: 14px 18px 13px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--sunk); text-align: left; }
.ui27 .score.good, .ui27 .score.poor { background: var(--sunk); border-color: var(--border); }
.ui27 .score-go:hover { border-color: var(--strong); }
.ui27 .score-k { display: flex; align-items: center; justify-content: space-between; font: 600 12.5px/1.3 var(--sans); color: var(--muted); }
.ui27 .score-n, .ui27 .score.good .score-n, .ui27 .score.poor .score-n { margin-top: 4px; font: 500 38px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ui27 .score-n::after { content: " / 100"; font: 400 14px/1 var(--sans); letter-spacing: 0; color: var(--faint); margin-left: 4px; }
.ui27 .score-band { display: none; }
.ui27 .score-sub, .ui27 .score.good .score-sub, .ui27 .score.poor .score-sub { margin-top: 8px; font: 400 12px/1.4 var(--sans); color: var(--faint); }
.ui27 .score-scale { position: relative; display: flex; gap: 2px; margin-top: 12px; }
.ui27 .ss-band { flex: 1 1 0; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 2px; background: var(--soft); font: 600 10.5px/1 var(--sans); font-style: normal; color: var(--faint); }
.ui27 .ss-band:first-child { border-radius: 4px 2px 2px 4px; } .ui27 .ss-band:last-of-type { border-radius: 2px 4px 4px 2px; }
.ui27 .ss-band.on { background: var(--hm-face); color: #fff; }
.ui27 .ss-pin { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 2px var(--sunk); }

/* What was graded. Workflows and blocks are two figures, side by side. */
.ui27 .ov-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--sunk); }
.ui27 .ov-fact { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 9px; row-gap: 2px; padding: 15px 28px 14px; cursor: pointer; border-left: 1px solid var(--border); transition: background-color .12s; }
.ui27 .ov-fact:first-child { border-left: none; }
.ui27 .ov-fact:hover { background: var(--surface); }
.ui27 .ov-fact:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.ui27 .ov-fact b { font: 500 25px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.ui27 .ov-fact-l { font: 600 13.5px/1.3 var(--sans); color: var(--ink2); }
.ui27 .ov-fact-s { grid-column: 1 / -1; font: 400 12.5px/1.4 var(--sans); color: var(--faint); }
.ui27 .ov-fact-blocks b { color: var(--navy); }
.ui27 .ov-fact-blocks .ov-fact-l { color: var(--navy); }

.ui27 .grade-why { margin-top: 20px; margin-bottom: 0; max-width: 100ch; font: 400 13.5px/1.65 var(--sans); color: var(--muted); }
.ui27 .gradekey { border-radius: var(--r-m); overflow: hidden; margin-top: 16px; }
.ui27 .gk-head b { font: 600 14px/1.3 var(--sans); letter-spacing: 0; color: var(--ink); text-transform: lowercase; display: block; }
.ui27 .gk-head b::first-letter { text-transform: uppercase; }
.ui27 .gk-band { text-transform: lowercase; letter-spacing: 0; font-size: 13px; display: inline-block; }
.ui27 .gk-band::first-letter { text-transform: uppercase; }
.ui27 .gk-you { text-transform: lowercase; letter-spacing: 0; font: 600 12px/1.5 var(--sans); padding: 2px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); border: none; }
.ui27 .gk-row .grade-chip { font-weight: 500; }

.ui27 .ov-sev { margin-top: 24px; }
.ui27 .ov-sev-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
.ui27 .ov-sev-head b { font: 600 14px/1.3 var(--sans); color: var(--ink); }
.ui27 .ov-sev-head span { font: 400 13px/1.3 var(--sans); color: var(--faint); }
.ui27 .ov-sev-bar { display: flex; gap: 2px; height: 14px; }
.ui27 .ov-sev-seg { all: unset; box-sizing: border-box; flex: 1 1 0; min-width: 6px; cursor: pointer; background: var(--sev); transition: filter .12s, transform .12s; }
.ui27 .ov-sev-seg:first-child { border-radius: 4px 0 0 4px; } .ui27 .ov-sev-seg:last-child { border-radius: 0 4px 4px 0; } .ui27 .ov-sev-seg:only-child { border-radius: 4px; }
.ui27 .ov-sev-seg:hover { filter: brightness(1.1); transform: scaleY(1.25); }
.ui27 .ov-sev-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ui27 .sev-critical { --sev: var(--sev-critical); } .ui27 .sev-high { --sev: var(--sev-high); } .ui27 .sev-medium { --sev: var(--sev-medium); } .ui27 .sev-low { --sev: var(--sev-low); } .ui27 .sev-info { --sev: var(--sev-info); }
.ui27 .ov-sev-key { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 10px 0 0 -8px; }
.ui27 .ov-sev-k { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: var(--r-s); cursor: pointer; font: 400 13px/1.4 var(--sans); color: var(--muted); transition: background-color .12s; }
.ui27 .ov-sev-k:hover { background: var(--sunk); color: var(--ink); }
.ui27 .ov-sev-k:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.ui27 .ov-sev-k i { width: 10px; height: 10px; border-radius: 3px; background: var(--sev); }
.ui27 .ov-sev-k b { font: 600 13.5px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.ui27 .ov-sev-k.zero { cursor: default; opacity: .55; }
.ui27 .ov-sev-k.zero:hover { background: none; color: var(--muted); }

/* ── tables ───────────────────────────────────────────────────────────── */
.ui27 .tbl-tools { padding-bottom: 14px; border-bottom: none; }
.ui27 .subtabs { gap: 2px; padding: 3px; border-radius: 8px; background: var(--grey-soft); }
.ui27 .subtab { padding: 6px 13px; border: none; border-radius: 6px; background: none; font: 600 13px/1.4 var(--sans); color: var(--muted); transition: background-color .12s, color .12s; }
.ui27 .subtab:hover { color: var(--ink); }
.ui27 .subtab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(18,27,22,.12), 0 0 0 1px rgba(18,27,22,.04); }
.ui27 .subtabs .helpmark { margin: 0 5px 0 6px; }
.ui27 .rows-label { font: 500 12.5px/1.5 var(--sans); letter-spacing: 0; color: var(--faint); text-transform: lowercase; display: inline-block; margin-left: 6px; }
.ui27 .rows-label::first-letter { text-transform: uppercase; }
.ui27 .pagesize { min-width: 34px; padding: 6px 9px; border-radius: var(--r-s); font: 600 12.5px/1.4 var(--sans); font-variant-numeric: tabular-nums; text-align: center; }
.ui27 .pagesize.on { background: var(--ink); border-color: var(--ink); }
.ui27 .tbl-scroll { border-radius: var(--r-m); border-color: var(--border); }
.ui27 .tbl-head { padding: 11px 18px; gap: 16px; background: var(--sunk); border-bottom: 1px solid var(--border); }
.ui27 .th { font: 600 12.5px/1.5 var(--sans); letter-spacing: 0; color: var(--muted); }
.ui27 .th:hover { color: var(--ink); }
.ui27 .th.on { color: var(--ink); }
.ui27 .th span { opacity: .4; font-size: 11px; }
.ui27 .th.on span { opacity: 1; color: var(--green); }
.ui27 .tr { padding: 13px 18px; gap: 16px; align-items: center; border-top: 1px solid var(--soft); background: var(--surface); transition: background-color .08s; }
.ui27 .tr:nth-child(odd) { background: var(--surface); }
.ui27 .tr-openable:hover { background: var(--sunk); }
.ui27 .tr.on { background: var(--tone-tint); }
.ui27 .td-text { font: 400 13.5px/1.5 var(--sans); }
.ui27 .td-mono { font: 500 12px/1.5 var(--mono); color: var(--muted); }
.ui27 .td-num { font: 500 13.5px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.ui27 .tbl-empty { padding: 44px 18px; font-size: 14px; color: var(--muted); }
.ui27 .tbl-foot { margin-top: 14px; }
.ui27 .tbl-foot .count { font: 400 13px/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.ui27 .tbl-foot .count b { margin-right: 10px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ui27 .pager span { font: 500 13px/1.5 var(--sans); letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.ui27 .pager .btn-ghost { text-transform: none; }
.ui27 .tbl-filt { padding: 10px 14px; border-radius: var(--r-s); font-size: 13.5px; }
.ui27 .tbl-filt-k { font: 600 12.5px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.ui27 .tbl-fam { font-size: 13.5px; }
.ui27 .tr-detail { padding: 18px 20px 20px; }
/* One segmented control, everywhere a choice is between two or three ways of
   looking at the same thing: a sunk track with the chosen option lifted out
   of it. Sub-tabs above a table are the same control and look it. */
.ui27 .seg { gap: 2px; padding: 3px; border: none; border-radius: 8px; background: var(--grey-soft); overflow: visible; }
.ui27 .seg button { padding: 6px 13px; border-radius: 6px; background: none; font: 600 13px/1.4 var(--sans); letter-spacing: 0; color: var(--muted); transition: background-color .12s, color .12s; }
.ui27 .seg button:hover:not(:disabled) { color: var(--ink); }
.ui27 .seg button.on, .ui27 .seg-e2e button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(18,27,22,.12), 0 0 0 1px rgba(18,27,22,.04); }
.ui27 .code-foot { margin-top: 14px; font: 400 12.5px/1.6 var(--sans); text-transform: none; color: var(--faint); }
.ui27 .btn-payload { padding: 6px 11px; border-radius: var(--r-s); font: 600 12.5px/1.4 var(--sans); letter-spacing: 0; color: var(--ink2); box-shadow: var(--lift); }
.ui27 .btn-payload:hover { border-color: var(--strong); background: var(--sunk); }

.ui27 .col-legend { padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--sunk); }
.ui27 .col-legend-t { margin-bottom: 8px; font: 600 13.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.ui27 .col-legend-row { grid-template-columns: 190px 1fr; font-size: 13.5px; }
.ui27 .col-legend-k { display: inline-block; font: 600 13px/1.6 var(--sans); letter-spacing: 0; text-transform: lowercase; color: var(--ink2); }
.ui27 .col-legend-k::first-letter { text-transform: uppercase; }

/* ── workspace pages (Team, Lens, Reports, Assist) ─────────────────────── */
.ui27 .page-wrap { max-width: 1120px; padding: 34px 28px 72px; }
.ui27 .page-wrap .panel { margin-bottom: 18px; }
.ui27 .page-wrap .panel h3 { margin: 0 0 14px; font: 600 16px/1.35 var(--sans); letter-spacing: -.005em; text-transform: none; color: var(--ink); }
.ui27 .page-wrap .panel p { font-size: 13.5px; }
.ui27 .lens-keys { border-collapse: separate; border-spacing: 0; width: 100%; }
.ui27 .lens-keys th { padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--sunk); font: 600 12.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); text-align: left; }
.ui27 .lens-keys th:first-child { border-top-left-radius: var(--r-s); } .ui27 .lens-keys th:last-child { border-top-right-radius: var(--r-s); }
.ui27 .lens-keys td { padding: 12px; border-bottom: 1px solid var(--soft); font-size: 13.5px; }
.ui27 .lens-keys tr:last-child td { border-bottom: none; }
.ui27 .rpt-list { border-radius: var(--r-m); box-shadow: var(--lift); overflow: hidden; }
.ui27 .rpt-row { padding: 14px 18px; }
.ui27 .rpt-row:hover { background: var(--sunk); }
.ui27 .rpt-row .grade-chip { min-width: 0; padding: 0; }

/* ── the start screen ─────────────────────────────────────────────────── */
.ui27 .hero { padding: 34px 22px 44px; }
.ui27 .hero-pill:not(.hero-pill-demo) { display: none; }
.ui27 .hero-pill { margin-bottom: 18px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.ui27 .hero h1 { margin-bottom: 18px; font: 500 clamp(32px, 3.3vw, 46px)/1.1 var(--serif); letter-spacing: -.02em; }
.ui27 .hero h1 span { color: inherit; }
.ui27 .hero-lede { font-size: 15px; line-height: 1.65; margin-bottom: 28px; }
.ui27 .feat-grid { gap: 12px; }
.ui27 .feat { position: relative; padding: 16px 18px 17px; border-top: 1px solid var(--border); border-radius: var(--r-m); }
.ui27 .feat-k { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 12.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.ui27 .feat-k::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.ui27 .feat-blue .feat-k::before { background: var(--navy); } .ui27 .feat-amber .feat-k::before { background: var(--amber); } .ui27 .feat-red .feat-k::before { background: var(--red); }
.ui27 .feat-t { font: 600 15.5px/1.35 var(--sans); }
.ui27 .feat-b { font-size: 13.5px; }
.ui27 .upcard { padding: 22px; border-top: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--raise); }
.ui27 .upcard-head { padding: 0 0 16px; }
.ui27 .upcard-head span:first-child { font: 500 21px/1.25 var(--serif); letter-spacing: -.01em; text-transform: lowercase; color: var(--ink); display: inline-block; }
.ui27 .upcard-head span:first-child::first-letter { text-transform: uppercase; }
.ui27 .dropzone-hero, .ui27 .dropzone { border-radius: var(--r-m); border-color: var(--strong); background: var(--sunk); }
.ui27 .dropzone-hero { padding: 36px 26px; }
.ui27 .drop-over, .ui27 .dropzone .over { font: 600 12.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.ui27 .dropzone-hero h2 { font: 500 24px/1.3 var(--serif); }
.ui27 .drop-chip { padding: 3px 10px; font: 500 12px/1.5 var(--sans); letter-spacing: 0; }
.ui27 .hero-foot span { font-size: 12.5px; }

/* ── sign-in ──────────────────────────────────────────────────────────── */
.ui27 .login-wrap { padding: 0; align-items: stretch; background: var(--surface); }
.ui27 .login { max-width: none; min-height: 100vh; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); border: none; border-radius: 0; }
.ui27 .login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 44px clamp(28px, 6vw, 88px) 36px; background: var(--splash); }
/* The hallmark again, struck large into the cover: the one place it is
   decoration, and the reason it reads as the product's mark elsewhere. */
.ui27 .login-brand::before, .ui27 .login-brand::after {
  content: ""; position: absolute; right: -90px; bottom: -110px; width: 420px; height: 460px; pointer-events: none;
  clip-path: polygon(84px 0, calc(100% - 84px) 0, 100% 84px, 100% calc(100% - 84px), calc(100% - 84px) 100%, 84px 100%, 0 calc(100% - 84px), 0 84px);
  background: var(--splash-3);
}
.ui27 .login-brand::after { content: "A"; right: -66px; bottom: -86px; width: 372px; height: 412px; background: var(--splash-2);
  display: flex; align-items: center; justify-content: center; padding: 0 60px 70px 0; box-sizing: border-box;
  font: 500 250px/1 var(--serif); color: rgba(255,255,255,.045);
  clip-path: polygon(74px 0, calc(100% - 74px) 0, 100% 74px, 100% calc(100% - 74px), calc(100% - 74px) 100%, 74px 100%, 0 calc(100% - 74px), 0 74px); }
.ui27 .login-brand > * { position: relative; z-index: 1; }
.ui27 .login-brand .brand-img { height: 40px; }
.ui27 .login-brand h1 { margin: auto 0 18px; padding-top: 48px; max-width: 14ch; font: 500 clamp(34px, 3.6vw, 52px)/1.08 var(--serif); letter-spacing: -.02em; color: var(--on-bar); }
.ui27 .login-brand p { margin: 0 0 30px; max-width: 54ch; font: 400 15px/1.65 var(--sans); color: rgba(255,255,255,.74); }
.ui27 .login-points { gap: 12px; margin-bottom: auto; }
.ui27 .login-points span { align-items: flex-start; gap: 12px; font: 400 14px/1.5 var(--sans); color: rgba(255,255,255,.88); }
.ui27 .login-points .dot { width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--bar-accent); flex: none; }
.ui27 .login-build { margin-top: 44px; padding-top: 0; border-top: none; font: 400 12.5px/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.46); }
.ui27 .login-form { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 480px; margin: 0 auto; padding: 48px 40px; }
.ui27 .login-form .kicker { margin-bottom: 26px; font: 500 30px/1.2 var(--serif); letter-spacing: -.012em; text-transform: none; color: var(--ink); }
.ui27 .login-fields { gap: 18px; }
.ui27 .login-fields .field { padding: 12px 14px; font-size: 15px; }
.ui27 .login-fields .field-static { background: var(--sunk); color: var(--ink2); }
.ui27 .login-fields .btn-wide-green { margin-top: 4px; padding: 13px 14px; font-size: 15px; }
.ui27 .pw-wrap .field { padding-right: 70px; }
.ui27 .pw-eye { right: 8px; padding: 4px 9px; border: none; border-radius: 4px; background: none; font: 600 12.5px/1.5 var(--sans); letter-spacing: 0; text-transform: lowercase; color: var(--muted); }
.ui27 .pw-eye::first-letter { text-transform: uppercase; }
.ui27 .pw-eye:hover { background: var(--grey-soft); color: var(--ink); }
.ui27 .form-error { padding: 11px 13px; border-radius: var(--r-s); font-size: 13.5px; }
.ui27 .recovery { margin-top: 16px; }
.ui27 .btn-link-sm { font: 500 13.5px/1.5 var(--sans); color: var(--green-deep); text-decoration-color: var(--green-line); text-underline-offset: 3px; }
.ui27 .recovery-body { padding: 14px 16px; border-radius: var(--r-s); }
.ui27 .recovery-body p { font-size: 13px; }
.ui27 .login-note { margin-top: 28px; padding: 0 0 0 14px; border: none; border-left: 2px solid var(--border); border-radius: 0; background: none; font: 400 12.5px/1.6 var(--sans); color: var(--faint); }
.ui27 .sso-or { font: 500 12.5px/1.6 var(--sans); letter-spacing: 0; text-transform: lowercase; }
@media (max-width: 860px) {
  .ui27 .login { grid-template-columns: 1fr; min-height: 0; }
  .ui27 .login-brand { padding: 28px 24px 30px; }
  .ui27 .login-brand h1 { margin-top: 28px; padding-top: 0; font-size: 30px; }
  .ui27 .login-brand p { font-size: 14px; margin-bottom: 18px; }
  .ui27 .login-points span { font-size: 13.5px; }
  .ui27 .login-build { margin-top: 22px; }
  .ui27 .login-brand::before, .ui27 .login-brand::after { display: none; }
  .ui27 .login-form { padding: 30px 24px 44px; }
}

/* ── small screens ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ui27 .topbar { padding: 0 14px; }
  .ui27 .topbar .modetab { min-height: 48px; padding: 0 10px; }
  .ui27 .topbar .modetab.on::after { left: 10px; right: 10px; }
  .ui27 .ctxbar { padding: 8px 14px; gap: 8px 14px; }
  .ui27 .ctx-sevs { padding-left: 0; border-left: none; }
  .ui27 .report-body { padding: 14px 14px 0; gap: 14px; flex-direction: column; align-items: stretch; }
  .ui27 .panel { padding: 18px; }
  .ui27 .rhead { padding: 0; }
  .ui27 .rhead > * { margin-left: 18px; margin-right: 18px; }
  .ui27 .ov-top { padding: 20px 18px; gap: 18px; margin: 0; }
  .ui27 .ov-title { padding-left: 0; border-left: none; flex-basis: 100%; }
  .ui27 .score { flex: 1 1 100%; }
  .ui27 .ov-facts { margin: 0; grid-template-columns: 1fr 1fr; }
  .ui27 .ov-fact { padding: 13px 18px; }
  .ui27 .ov-fact:nth-child(odd) { border-left: none; }
  .ui27 .ov-fact:nth-child(n+3) { border-top: 1px solid var(--border); }
  /* The rail becomes one scrolling row of places above the page, rather
     than a 500px list to scroll past before the report starts. */
  .ui27 .sidebar { width: 100%; position: static; }
  .ui27 .side { display: flex; gap: 4px; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .ui27 .side::-webkit-scrollbar { display: none; }
  .ui27 .side-group, .ui27 .side-note { display: none; }
  .ui27 .side-item { width: auto; flex: none; margin: 0; white-space: nowrap; }
  .ui27 .side-item.on::before { display: none; }
  .ui27 .hallmark.hm-xl { width: 54px; height: 58px; --cut: 11px; font-size: 32px; }
  .ui27 .ov-verdict-t b { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui27 .ov-sev-seg, .ui27 .stat-go::after, .ui27 .stat-link { transition: none; }
  .ui27 .ov-sev-seg:hover { transform: none; }
}

/* ── 5.28 Assay Studio ─────────────────────────────────────────────────── */
html.ui27 .forge .fx-req { min-height: 7.5rem; }
html.ui27 .forge .fx-error { margin: 12px 0; padding: 10px 14px; border-left: 4px solid var(--red); background: var(--red-soft); color: var(--red-ink); font-weight: 600; }
html.ui27 .forge .fx-result { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
html.ui27 .forge .fx-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
html.ui27 .forge .fx-head h2 { margin: 0; }
html.ui27 .forge .fx-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
html.ui27 .forge .fx-vlabel { font-size: .85rem; color: var(--muted); }
html.ui27 .forge .fx-counts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
html.ui27 .forge .fx-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: .78rem; font-weight: 600; background: var(--grey-soft); color: var(--ink2); }
html.ui27 .forge .fx-critical { background: var(--red-soft); color: var(--red-ink); } html.ui27 .forge .fx-high { background: var(--amber-soft); color: var(--amber-ink); }
html.ui27 .forge .fx-medium { background: var(--amber-soft); color: var(--amber-ink); } html.ui27 .forge .fx-low { background: var(--blue-soft); color: var(--blue-ink); }
html.ui27 .forge .fx-none { background: var(--green-soft); color: var(--green-ink); }
html.ui27 .forge .fx-flows { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 14px 0; }
html.ui27 .forge .fx-flow { padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; }
html.ui27 .forge .fx-fname { font-weight: 700; }
html.ui27 .forge .fx-list { margin-top: 16px; display: grid; gap: 8px; }
html.ui27 .forge .fx-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; }
html.ui27 .forge .fx-row.on { border-color: var(--green); background: var(--sunk); }
html.ui27 .forge .fx-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
html.ui27 .forge .fx-num { width: 9rem; }
html.ui27 .forge .fx-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
html.ui27 .forge .fx-arrow { font-size: 1.4rem; color: var(--muted); }
html.ui27 .forge .fx-meter { height: 10px; border-radius: 5px; background: var(--grey-soft); overflow: hidden; margin: 8px 0; max-width: 420px; }
html.ui27 .forge .fx-meter-bar { height: 100%; background: var(--green); }
html.ui27 .forge .fx-table { border-collapse: collapse; margin-top: 8px; }
html.ui27 .forge .fx-table th, html.ui27 .forge .fx-table td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--soft); }
html.ui27 .forge .fx-radio { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; max-width: 46rem; }
html.ui27 .forge .fx-import ol { margin: 8px 0 0 1.2rem; }
@media (max-width: 640px) { html.ui27 .forge .fx-head { flex-direction: column; align-items: flex-start; } }
/* 5.28 statuses and errors */
html.ui27 .acc-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
html.ui27 .acc-st { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border: 1px solid var(--border); border-radius: 16px; cursor: pointer; }
html.ui27 .acc-st.on { border-color: var(--green); background: var(--sunk); font-weight: 600; }
html.ui27 .acc-error { margin: 2px 0 6px; color: var(--red-ink); font-weight: 600; }
html.ui27 .acc-reason.acc-bad { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
html.ui27 .fx-disp { font-weight: 600; color: var(--blue-ink); }
html.ui27 .fx-disp.reopened { color: var(--red-ink); }
html.ui27 .fx-forge { border-top: 1px dashed var(--border); padding-top: 8px; }
html.ui27 .forge .fx-wide { display: block; width: 100%; max-width: 52rem; box-sizing: border-box; }
html.ui27 .forge .fx-input { display: block; width: 100%; max-width: 26rem; box-sizing: border-box; }

/* ── 5.29 · the dashboard ("At a glance") ─────────────────────────────── */
/* Six cards in a grid that reflows from three across to one. A card with a
   section behind it is a button: it lifts on hover and takes focus. Nothing
   in a card is a colour of its own — grades are hallmarks, severities are
   badges, and the trend line is drawn in the green the rest of the page uses
   for "good". */
html.ui27 .dash { margin-top: 14px; }
html.ui27 .dash-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
html.ui27 .dash-head h2 { margin: 0; }
html.ui27 .dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { html.ui27 .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { html.ui27 .dash-grid { grid-template-columns: minmax(0, 1fr); } }
html.ui27 .dash-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px 14px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--sunk); box-shadow: none; }
html.ui27 .dash-go { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
html.ui27 .dash-go:hover { border-color: var(--strong); box-shadow: var(--raise); transform: translateY(-1px); background: var(--surface); }
html.ui27 .dash-go:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html.ui27 .dash-go { transition: none; } html.ui27 .dash-go:hover { transform: none; } }
html.ui27 .dash-k { font: 600 12.5px/1.4 var(--sans); color: var(--muted); }
html.ui27 .dash-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font: 400 13px/1.3 var(--sans); color: var(--muted); }
html.ui27 .dash-big b { font: 600 26px/1.1 var(--serif); color: var(--ink); letter-spacing: -.01em; }
html.ui27 .dash-arrow { font-size: 18px; color: var(--muted); padding: 0 2px; }
html.ui27 .dash-note { margin: 0; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
html.ui27 .dash-note.t-good { color: var(--green-ink); }
html.ui27 .dash-note.t-bad { color: var(--red-ink); }
html.ui27 .dash-bar { height: 8px; border-radius: 4px; background: var(--grey-soft); border: 1px solid var(--grey-edge); overflow: hidden; }
html.ui27 .dash-bar i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
html.ui27 .dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
html.ui27 .dash-list li { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 13px/1.4 var(--sans); }
html.ui27 .dash-list li .btn-linkish { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.4 var(--sans); color: var(--ink); }
html.ui27 .dash-list li .btn-linkish:hover { color: var(--green); }
html.ui27 .dash-list li b { flex: none; font: 600 13px/1.4 var(--mono); color: var(--ink2); }
html.ui27 .dash-when { flex: none; font: 400 12px/1.4 var(--sans); color: var(--faint); }
html.ui27 .dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html.ui27 .dash-actions .btn-sm { white-space: normal; text-align: left; }
html.ui27 .spark { display: block; width: 100%; height: 56px; max-width: 320px; }
html.ui27 .spark-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.ui27 .spark-dot { fill: var(--green); stroke: var(--surface); stroke-width: 2; }

/* 5.29 · naming a new Okta org inside the keep panel */
html.ui27 .keep-neworg { margin: 10px 0 12px; padding: 12px 14px; border: 1px dashed var(--green-line); border-radius: var(--r-s); background: var(--green-wash); }
html.ui27 .keep-neworg-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html.ui27 .keep-neworg-row .field { flex: 1 1 220px; width: auto; }
html.ui27 .keep-neworg .form-error { margin-top: 8px; }
html.ui27 .keep-neworg .keep-note { margin: 8px 0 0; }
/* A dialog's heading takes focus when it opens (core.js), so a reader hears
   the question first; the ring that a focused control earns is noise on it. */
html.ui27 .modal h2[tabindex="-1"]:focus-visible { outline: none; }
html.ui27 .fx-accept .btn-linkish { white-space: nowrap; }

/* ── 5.30 · Assay Studio: the design and its price, and rebuild ───────── */
html.ui27 .forge .fx-quote { border-color: var(--green-edge); }
html.ui27 .forge .fx-total { font: 600 28px/1 var(--serif); color: var(--ink); white-space: nowrap; }
html.ui27 .forge .fx-scroll { overflow-x: auto; margin: 12px 0 6px; }
html.ui27 .forge .fx-qtable { width: 100%; min-width: 640px; }
html.ui27 .forge .fx-qtable th { font: 600 12.5px/1.4 var(--sans); color: var(--muted); }
html.ui27 .forge .fx-qtable td { vertical-align: top; }
html.ui27 .forge .fx-qtable td.num, html.ui27 .forge .fx-qtable th:nth-child(3), html.ui27 .forge .fx-qtable th:nth-child(5) { text-align: right; white-space: nowrap; }
html.ui27 .forge .fx-qtable td:nth-child(4) { color: var(--muted); max-width: 36rem; }
html.ui27 .forge .fx-sum { font-weight: 600; color: var(--ink2); }
html.ui27 .fx-pill.fx-wf { background: var(--blue-soft); color: var(--blue-ink); }
html.ui27 .fx-pill.fx-helper { background: var(--grey-soft); color: var(--ink2); border: 1px solid var(--grey-edge); }
html.ui27 .forge .fx-rebuild { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--border); }
html.ui27 .forge .fx-rebuild .keep-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; align-items: start; }
@media (max-width: 760px) { html.ui27 .forge .fx-rebuild .keep-fields { grid-template-columns: minmax(0, 1fr); } }

/* 5.30 · Assay Studio on the landing page */
html.ui27 .hero-build { max-width: 700px; margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--green-edge); border-left: 4px solid var(--green); border-radius: var(--r-s); background: var(--green-soft); }
html.ui27 .hero-build-k { font: 600 12.5px/1.4 var(--sans); color: var(--green-ink); }
html.ui27 .hero-build-t { margin: 4px 0 6px; font: 400 22px/1.25 var(--serif); color: var(--ink); }
html.ui27 .hero-build p { margin: 0 0 12px; font: 400 13.5px/1.55 var(--sans); color: var(--ink2); }
html.ui27 .hero-build-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
html.ui27 .forge .fx-qtable .fx-pill { white-space: nowrap; }
/* Buttons that carry a file name or a flow's name keep it as written:
   "README.md", "Rebuild “Remove User From Group”". The sentence-case rule in
   assay.css lower-cased them. */
html.ui27 .forge .btn-ghost, html.ui27 .fx-pack-panel .btn-ghost, html.ui27 .hero-build .btn-hero-ghost { text-transform: none; }

/* 5.30 · Fix, grouped by kind, with the action always in reach */
html.ui27 .forge .fx-groups { display: grid; gap: 10px; }
html.ui27 .forge .fx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; }
html.ui27 .forge .fx-tools .as-note { margin-right: auto; }
html.ui27 .forge .fx-group { border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); padding: 12px 14px; display: grid; gap: 8px; }
html.ui27 .forge .fx-group.on { border-color: var(--green-edge); }
html.ui27 .forge .fx-ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
html.ui27 .forge .fx-ghead .fx-fname { font-size: 15px; }
html.ui27 .forge .fx-gparam { gap: 10px; padding: 8px 10px; border-radius: var(--r-s); background: var(--sunk); }
html.ui27 .forge .fx-gparam .field-label { margin: 0; }
html.ui27 .forge .fx-grows { display: grid; gap: 6px; padding-left: 26px; }
html.ui27 .forge .fx-row.fx-target { outline: 2px solid var(--green); outline-offset: 2px; }
html.ui27 .forge .fx-bar { position: sticky; bottom: 0; z-index: 5; margin: 6px -8px 0; padding: 12px 14px; border: 1px solid var(--strong); border-radius: var(--r-s); background: var(--surface); box-shadow: var(--pop); display: grid; gap: 8px; }
html.ui27 .forge .fx-bar-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
html.ui27 .forge .fx-bar .fx-error-here { margin: 0; }
html.ui27 .forge .fx-error-here { margin: 6px 0; }
html.ui27 .forge .fx-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 10px 12px; border-radius: var(--r-s); background: var(--green-soft); }
html.ui27 .forge .fx-next .as-note { margin-right: auto; color: var(--green-ink); }
@media (max-width: 640px) { html.ui27 .forge .fx-grows { padding-left: 0; } html.ui27 .forge .fx-bar-main .btn-green { width: 100%; } }
html.ui27 .forge .fx-group.fx-group-bad { border-color: var(--red-edge); box-shadow: 0 0 0 1px var(--red-edge) inset; }
html.ui27 .forge .fx-row.fx-row-bad { border-color: var(--red-edge); background: var(--red-soft); }
html.ui27 .forge .fx-gparam .fx-num, html.ui27 .forge .fx-row .fx-num { flex: none; width: 9rem; display: inline-block; }
html.ui27 .forge .fx-sub { margin-left: 14px; }
/* 5.30 · the price breakup under the fix bar */
html.ui27 .forge .fx-breakup summary { cursor: pointer; font-weight: 600; color: var(--green-ink); }
html.ui27 .forge .fx-breakup[open] { max-height: 46vh; overflow: auto; }
html.ui27 .forge .fx-btable { width: 100%; max-width: 640px; margin: 6px 0; }
html.ui27 .forge .fx-btable td.num { text-align: right; white-space: nowrap; font-weight: 600; }
html.ui27 .forge .fx-btable tr.fx-bsep td { border-top: 1px solid var(--strong); }
html.ui27 .forge .fx-btable tr.fx-btotal td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--ink); }

/* ── 5.31 · the shell: left navigation beside every page ─────────────── */
/* 5.32: the old page kept 56px under everything; with the side navigation
   that strip showed below the navigation's column once the page scrolled */
html.ui27 #app:has(.shell) { padding-bottom: 0; }
html.ui27 .shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; min-height: calc(100vh - var(--topbar-h, 52px)); }
html.ui27 .shell.nav-small { grid-template-columns: 64px minmax(0, 1fr); }
html.ui27 .shell-main { min-width: 0; }
html.ui27 .appnav { position: sticky; top: var(--topbar-h, 52px); align-self: start; display: flex; flex-direction: column; gap: 8px;
  height: calc(100vh - var(--topbar-h, 52px)); box-sizing: border-box; padding: 14px 10px 12px; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--border); }
html.ui27 .appnav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html.ui27 .appnav-btn { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--r-s);
  background: none; color: var(--ink2); font: 500 14px/1.2 var(--sans); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; }
html.ui27 .appnav-btn:hover { background: var(--sunk); color: var(--ink); }
html.ui27 .appnav-item.on > .appnav-btn { background: var(--green-soft); color: var(--green-ink); font-weight: 650; }
html.ui27 .nav-i { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.ui27 .appnav-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui27 .appnav-count { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--amber-soft); color: var(--amber-ink); font: 700 11.5px/1.5 var(--sans); text-align: center; }
html.ui27 .appnav-sub { list-style: none; margin: 2px 0 6px 31px; padding: 0 0 0 10px; border-left: 1px solid var(--border); display: grid; gap: 1px; }
html.ui27 .appnav-subbtn { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--r-s); background: none; color: var(--muted);
  font: 500 13px/1.3 var(--sans); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; }
html.ui27 .appnav-subbtn:hover { color: var(--ink); background: var(--sunk); }
html.ui27 .appnav-subbtn.on { color: var(--ink); font-weight: 650; }
html.ui27 .appnav-ctx { margin: 2px 0 6px 41px; color: var(--faint); font: 500 12px/1.35 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui27 .appnav-toggle { margin-top: auto; align-self: flex-start; display: inline-flex; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); color: var(--muted); cursor: pointer; }
html.ui27 .appnav-toggle:hover { color: var(--ink); border-color: var(--strong); }
html.ui27 .appnav.small .appnav-t, html.ui27 .appnav.small .appnav-count { display: none; }
html.ui27 .appnav.small .appnav-btn { justify-content: center; padding: 8px 0; }
html.ui27 .appnav.small .appnav-toggle { align-self: center; }
@media (max-width: 900px) {
  html.ui27 .shell, html.ui27 .shell.nav-small { display: block; }
  html.ui27 .appnav, html.ui27 .appnav.small { position: static; height: auto; flex-direction: row; padding: 6px 10px; overflow-x: auto; scrollbar-width: none;
    border-right: 0; border-bottom: 1px solid var(--border); }
  html.ui27 .appnav::-webkit-scrollbar { display: none; }
  html.ui27 .appnav-list { display: flex; gap: 4px; }
  html.ui27 .appnav-btn, html.ui27 .appnav.small .appnav-btn { width: auto; min-height: 38px; padding: 6px 11px; white-space: nowrap; justify-content: flex-start; }
  html.ui27 .appnav.small .appnav-t { display: inline; }
  html.ui27 .appnav-sub, html.ui27 .appnav-ctx, html.ui27 .appnav-toggle { display: none; }
}

/* ── 5.31 · Home: start from the task ─────────────────────────────────── */
html.ui27 .home { padding-top: 34px; padding-bottom: 48px; }
html.ui27 .home-head { margin-bottom: 22px; }
html.ui27 .home-hello { margin: 0 0 4px; color: var(--muted); font: 500 14px/1.4 var(--sans); }
html.ui27 .home-head h1 { margin: 0; font-size: 34px; line-height: 1.15; }
html.ui27 .home-continue { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 20px; background: var(--surface); color: var(--ink2); font: 500 13.5px/1.3 var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer; }
html.ui27 .home-continue:hover { border-color: var(--strong); box-shadow: var(--lift); }
html.ui27 .tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
html.ui27 .task { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 196px; padding: 18px 18px 16px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--lift); color: var(--ink);
  text-transform: none; letter-spacing: 0; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
html.ui27 .task:hover { border-color: var(--strong); box-shadow: var(--raise); transform: translateY(-2px); }
html.ui27 .task-i { display: inline-flex; padding: 9px; border-radius: var(--r-s); background: var(--grey-soft); color: var(--ink2); }
html.ui27 .task-green .task-i { background: var(--green-soft); color: var(--green-ink); }
html.ui27 .task-blue .task-i { background: var(--blue-soft); color: var(--blue-ink); }
html.ui27 .task-amber .task-i { background: var(--amber-soft); color: var(--amber-ink); }
html.ui27 .task-svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.ui27 .task-t { font: 650 17px/1.25 var(--sans); }
html.ui27 .task-b { color: var(--muted); font: 400 13.5px/1.5 var(--sans); }
html.ui27 .task-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink); font: 600 13.5px/1.2 var(--sans); }
html.ui27 .task-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.ui27 .home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; align-items: start; }
html.ui27 .home-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); }
html.ui27 .home-card h2 { margin: 0 0 10px; font: 650 15px/1.3 var(--sans); }
html.ui27 .home-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html.ui27 .recent { list-style: none; margin: 0; padding: 0; }
html.ui27 .recent li + li { border-top: 1px solid var(--soft); }
html.ui27 .recent-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 92px; align-items: center; gap: 10px; width: 100%; padding: 10px 4px;
  border: 0; background: none; color: var(--ink); text-align: left; font: 500 13.5px/1.35 var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer; }
html.ui27 .recent-row:hover { background: var(--sunk); }
html.ui27 .recent-k { justify-self: start; padding: 2px 8px; border-radius: 10px; background: var(--grey-soft); color: var(--ink2); font: 600 11.5px/1.5 var(--sans); }
html.ui27 .recent-built { background: var(--green-soft); color: var(--green-ink); }
html.ui27 .recent-fixed, html.ui27 .recent-rebuilt { background: var(--amber-soft); color: var(--amber-ink); }
html.ui27 .recent-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui27 .recent-d { color: var(--faint); font-size: 12.5px; text-align: right; }
html.ui27 .month-big { font: 650 28px/1.1 var(--sans); color: var(--ink); }
html.ui27 .month-big span { font: 500 13.5px/1.3 var(--sans); color: var(--muted); }
html.ui27 .home-card .fx-meter { height: 8px; border-radius: 4px; background: var(--grey-soft); overflow: hidden; margin: 10px 0; }
html.ui27 .home-card .fx-meter-bar { height: 100%; background: var(--green); }
html.ui27 .month-ops { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 4px; }
html.ui27 .month-ops li { display: flex; justify-content: space-between; gap: 8px; color: var(--ink2); font-size: 13px; }
@media (max-width: 760px) {
  html.ui27 .home { padding-top: 20px; }
  html.ui27 .home-head h1 { font-size: 26px; }
  html.ui27 .home-grid { grid-template-columns: 1fr; }
  html.ui27 .task { min-height: 0; }
  html.ui27 .recent-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  html.ui27 .recent-d { display: none; }
}

/* ── 5.31 · Studio tabs as a segmented control ────────────────────────── */
html.ui27 .forge .as-tabs, html.ui27 .assist-page .as-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--sunk); width: fit-content; max-width: 100%; }
html.ui27 .forge .as-tab, html.ui27 .assist-page .as-tab { border: 0; border-radius: var(--r-s); padding: 8px 14px; background: none; color: var(--muted); font: 600 13.5px/1.2 var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer; }
html.ui27 .forge .as-tab:hover, html.ui27 .assist-page .as-tab:hover { color: var(--ink); }
html.ui27 .forge .as-tab.on, html.ui27 .assist-page .as-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--lift); }

/* ── 5.31 · Logic Review ─────────────────────────────────────────────── */
html.ui27 .forge .lr-cx { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; font: 650 12.5px/1.4 var(--sans); background: var(--green-soft); color: var(--green-ink); }
html.ui27 .forge .lr-cx-medium { background: var(--amber-soft); color: var(--amber-ink); }
html.ui27 .forge .lr-cx-high { background: var(--red-soft); color: var(--red-ink); }
html.ui27 .forge .lr-scope { display: grid; gap: 4px; margin: 10px 0; }
html.ui27 .forge .lr-scope li { color: var(--ink2); }
html.ui27 .forge .lr-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
html.ui27 .forge .lr-count { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: var(--r-s); border: 1px solid var(--border); background: var(--surface); font: 600 13px/1.2 var(--sans); }
html.ui27 .forge .lr-count b { font: 700 20px/1 var(--sans); }
html.ui27 .forge .lr-req { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px 4px; border-top: 1px solid var(--soft); }
html.ui27 .forge .lr-st { justify-self: start; padding: 2px 9px; border-radius: 10px; font: 650 12px/1.5 var(--sans); }
html.ui27 .forge .lr-covered { background: var(--green-soft); color: var(--green-ink); }
html.ui27 .forge .lr-partial { background: var(--amber-soft); color: var(--amber-ink); }
html.ui27 .forge .lr-missing { background: var(--red-soft); color: var(--red-ink); }
html.ui27 .forge .lr-need { font-weight: 600; color: var(--ink); }
html.ui27 .forge .lr-gap { margin-top: 4px; color: var(--ink2); }
html.ui27 .forge .lr-ev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
html.ui27 .forge .lr-card { padding: 2px 8px; border-radius: var(--r-s); background: var(--sunk); border: 1px solid var(--soft); color: var(--muted); font: 500 12px/1.5 var(--sans); }
html.ui27 .forge .lr-actions { display: grid; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-s); background: var(--sunk); }
html.ui27 .forge .lr-split { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 8px 0; }
html.ui27 .forge .lr-split > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); }
@media (max-width: 640px) { html.ui27 .forge .lr-req { grid-template-columns: 1fr; gap: 6px; } }
html.ui27 .login-demo { width: 100%; margin: 6px 0 14px; }
/* a product name keeps its capitals in an eyebrow ("Assay Studio") */
html.ui27 .forge .eyebrow-t, html.ui27 .assist-page .eyebrow-t { text-transform: none; }
html.ui27 .forge .lr-req > .lr-st { align-self: start; }
html.ui27 .forge #fx-amt { flex: none; width: 8rem; display: inline-block; }
/* A report has its own section rail: below 1366px the navigation folds to its icons beside it */
@media (min-width: 901px) and (max-width: 1366px) {
  html.ui27 .shell.on-report { grid-template-columns: 64px minmax(0, 1fr); }
  html.ui27 .shell.on-report .appnav-t, html.ui27 .shell.on-report .appnav-count, html.ui27 .shell.on-report .appnav-sub,
  html.ui27 .shell.on-report .appnav-ctx, html.ui27 .shell.on-report .appnav-toggle { display: none; }
  html.ui27 .shell.on-report .appnav-btn { justify-content: center; padding: 8px 0; }
}

/* ── 5.32 · stat tiles carry their meaning in colour ───────────────────── */
html.ui27 .stat.stat-red { background: var(--red-soft); border-color: var(--red-edge); }
html.ui27 .stat.stat-red .stat-label, html.ui27 .stat.stat-red .stat-value { color: var(--red-ink); }
html.ui27 .stat.stat-amber { background: var(--amber-soft); border-color: var(--amber-edge); }
html.ui27 .stat.stat-amber .stat-label, html.ui27 .stat.stat-amber .stat-value { color: var(--amber-ink); }
html.ui27 .stat.stat-green { background: var(--green-soft); border-color: var(--green-edge); }
html.ui27 .stat.stat-green .stat-label, html.ui27 .stat.stat-green .stat-value { color: var(--green-ink); }
html.ui27 .stat.stat-blue { background: var(--blue-soft); border-color: var(--border); }
html.ui27 .stat.stat-blue .stat-label, html.ui27 .stat.stat-blue .stat-value { color: var(--blue-ink); }
html.ui27 .stat.stat-navy { background: var(--navy-tint); border-color: var(--navy-line); }
html.ui27 .stat.stat-navy .stat-label, html.ui27 .stat.stat-navy .stat-value { color: var(--navy); }
html.ui27 .stat.stat-plain { background: var(--sunk); }
html.ui27 .stat.stat-red .stat-sub, html.ui27 .stat.stat-amber .stat-sub, html.ui27 .stat.stat-green .stat-sub,
html.ui27 .stat.stat-blue .stat-sub, html.ui27 .stat.stat-navy .stat-sub { color: var(--ink2); }
html.ui27 .stat.stat-red::before, html.ui27 .stat.stat-amber::before { display: none; }
/* the whole clickable tile, footer included, sits on the tint */
html.ui27 .stat-link:has(.stat-red) { background: var(--red-soft); border-color: var(--red-edge); }
html.ui27 .stat-link:has(.stat-amber) { background: var(--amber-soft); border-color: var(--amber-edge); }
html.ui27 .stat-link:has(.stat-green) { background: var(--green-soft); border-color: var(--green-edge); }
html.ui27 .stat-link:has(.stat-blue) { background: var(--blue-soft); }
html.ui27 .stat-link:has(.stat-navy) { background: var(--navy-tint); border-color: var(--navy-line); }
html.ui27 .stat-link:has(.stat-plain) { background: var(--sunk); }

/* ── 5.32 · the profile menu ───────────────────────────────────────────── */
html.ui27 .profile { position: relative; }
html.ui27 .profile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--bar-line); border-radius: 22px;
  background: transparent; color: var(--on-bar); font: 600 13.5px/1 var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer; }
html.ui27 .profile-btn:hover, html.ui27 .profile-btn.on { background: var(--bar-line); }
html.ui27 .profile-av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--green); color: var(--surface); font: 700 12px/1 var(--sans); letter-spacing: .02em; }
html.ui27 .profile-av.lg { width: 42px; height: 42px; font-size: 15px; flex: none; }
html.ui27 .profile-caret { font-size: 10px; color: var(--on-bar-dim); }
html.ui27 .profile-scrim { position: fixed; inset: 0; z-index: 60; border: 0; background: transparent; cursor: default; }
html.ui27 .profile-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 61; width: 320px; max-width: calc(100vw - 24px);
  display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); color: var(--ink); box-shadow: var(--pop); }
html.ui27 .profile-head { display: flex; gap: 12px; align-items: center; }
html.ui27 .profile-name { font: 650 15px/1.3 var(--sans); }
html.ui27 .profile-mail { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
html.ui27 .profile-row { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid var(--soft); }
html.ui27 .profile-role { justify-self: start; padding: 2px 9px; border-radius: 10px; background: var(--green-soft); color: var(--green-ink); font: 650 12px/1.5 var(--sans); }
html.ui27 .profile-role.role-developer { background: var(--blue-soft); color: var(--blue-ink); }
html.ui27 .profile-role.role-viewer, html.ui27 .profile-role.role-demo { background: var(--grey-soft); color: var(--ink2); }
html.ui27 .profile-role.role-assessor { background: var(--amber-soft); color: var(--amber-ink); }
html.ui27 .profile-sub { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
html.ui27 .profile-ws > span:first-child { font-weight: 600; }
html.ui27 .profile-sec { padding-top: 10px; border-top: 1px solid var(--soft); }
html.ui27 .profile-sec summary { cursor: pointer; font: 600 13.5px/1.4 var(--sans); }
html.ui27 .profile-k { margin-bottom: 6px; font: 600 13px/1.3 var(--sans); }
html.ui27 .profile-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--sunk); }
html.ui27 .profile-seg button { border: 0; border-radius: 4px; padding: 5px 11px; background: none; color: var(--muted); font: 600 12.5px/1.2 var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer; }
html.ui27 .profile-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--lift); }
html.ui27 .profile-form { display: flex; gap: 8px; margin-top: 8px; }
html.ui27 .profile-form.col { flex-direction: column; align-items: stretch; }
html.ui27 .profile-form .field { min-width: 0; flex: 1 1 auto; }
html.ui27 .profile-msg { font-size: 13px; color: var(--green-ink); }
html.ui27 .profile-msg.bad { color: var(--red-ink); }
html.ui27 .profile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--soft); }
@media (max-width: 760px) {
  html.ui27 .profile-pop { position: fixed; left: 12px; right: 12px; top: 56px; width: auto; }
  html.ui27 .profile-n, html.ui27 .profile-caret { display: none; }
  html.ui27 .profile-btn { padding: 3px; border-color: transparent; }
}

/* ── 5.32 · before and after ──────────────────────────────────────────── */
html.ui27 .forge .ba-result { display: grid; gap: 18px; padding: 22px 24px; }
html.ui27 .forge .ba-hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
html.ui27 .forge .ba-hero h2 { margin: 2px 0 4px; font-size: 24px; }
html.ui27 .forge .ba-sum { margin: 0; color: var(--muted); font-size: 14px; }
html.ui27 .forge .ba-dl { white-space: normal; text-align: left; max-width: 100%; }
html.ui27 .forge .ba { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
html.ui27 .forge .ba-grades { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 18px; border-radius: var(--r-m); background: var(--sunk); border: 1px solid var(--soft); }
html.ui27 .forge .ba-side { display: grid; gap: 10px; justify-items: center; text-align: center; }
html.ui27 .forge .ba-k { font: 600 12.5px/1.2 var(--sans); color: var(--muted); }
html.ui27 .forge .ba-side.after .ba-k { color: var(--green-ink); }
html.ui27 .forge .ba-grade { display: flex; align-items: center; gap: 12px; }
html.ui27 .forge .ba-score { font: 700 26px/1 var(--sans); color: var(--ink); text-align: left; }
html.ui27 .forge .ba-score small { font: 500 13px/1 var(--sans); color: var(--muted); }
html.ui27 .forge .ba-total { margin-top: 4px; color: var(--muted); font-size: 12.5px; text-align: left; }
html.ui27 .forge .ba-mid { display: grid; justify-items: center; gap: 6px; }
html.ui27 .forge .ba-arrow { font-size: 26px; color: var(--muted); }
html.ui27 .forge .ba-delta { padding: 2px 9px; border-radius: 10px; background: var(--grey-soft); color: var(--ink2); font: 700 12.5px/1.5 var(--sans); white-space: nowrap; }
html.ui27 .forge .ba-delta.up { background: var(--green-soft); color: var(--green-ink); }
html.ui27 .forge .ba-delta.down { background: var(--red-soft); color: var(--red-ink); }
html.ui27 .forge .ba-sev { width: 100%; border-collapse: collapse; border: 1px solid var(--soft); border-radius: var(--r-m); overflow: hidden; background: var(--surface); }
html.ui27 .forge .ba-sev th, html.ui27 .forge .ba-sev td { padding: 9px 12px; border-bottom: 1px solid var(--soft); text-align: right; font-variant-numeric: tabular-nums; }
html.ui27 .forge .ba-sev thead th { background: var(--sunk); color: var(--muted); font: 600 12.5px/1.3 var(--sans); }
html.ui27 .forge .ba-sev th:first-child { text-align: left; }
html.ui27 .forge .ba-sev tr:last-child td, html.ui27 .forge .ba-sev tr:last-child th { border-bottom: 0; }
html.ui27 .forge .ba-chg { font-weight: 700; color: var(--muted); }
html.ui27 .forge .ba-chg.good { color: var(--green-ink); }
html.ui27 .forge .ba-chg.bad { color: var(--red-ink); }
html.ui27 .forge .ba-flows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
html.ui27 .forge .ba-flow { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); }
html.ui27 .forge .ba-fname { margin-bottom: 8px; font: 650 14px/1.35 var(--sans); color: var(--ink); }
html.ui27 .forge .ba-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html.ui27 .forge .ba-chip { padding: 3px 9px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink); font: 600 12px/1.4 var(--sans); }
html.ui27 .forge .ba-find { border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); }
html.ui27 .forge .ba-find-good { border-color: var(--green-edge); }
html.ui27 .forge .ba-find-warn { border-color: var(--amber-edge); }
html.ui27 .forge .ba-find summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; cursor: pointer; }
html.ui27 .forge .ba-find-good summary { background: var(--green-soft); }
html.ui27 .forge .ba-find-warn summary { background: var(--amber-soft); }
html.ui27 .forge .ba-find-t { font: 650 14px/1.3 var(--sans); }
html.ui27 .forge .ba-find-sev { display: inline-flex; flex-wrap: wrap; gap: 6px; }
html.ui27 .forge .ba-find-list { display: grid; padding: 6px 14px 12px; }
html.ui27 .forge .ba-find-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--soft); font-size: 13.5px; }
html.ui27 .forge .ba-find-row:last-child { border-bottom: 0; }
html.ui27 .forge .ba-find-row .fx-pill { justify-self: start; text-transform: capitalize; }
html.ui27 .forge .ba-find-where { color: var(--muted); font-size: 12.5px; text-align: right; }
@media (max-width: 860px) {
  html.ui27 .forge .ba { grid-template-columns: 1fr; }
  html.ui27 .forge .ba-find-row { grid-template-columns: 72px minmax(0, 1fr); }
  html.ui27 .forge .ba-find-where { grid-column: 2; text-align: left; }
}

/* ── 5.32 · Pay as you go: choose the one workflow to assess ───────────── */
html.ui27 .pick-one { display: grid; gap: 14px; }
html.ui27 .pick-list { display: grid; gap: 6px; max-height: 360px; overflow: auto; padding: 2px; }
html.ui27 .pick-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); cursor: pointer; }
html.ui27 .pick-row.on { border-color: var(--green-edge); background: var(--green-soft); }
html.ui27 .pick-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui27 .pick-sub { color: var(--muted); font-size: 12.5px; }
/* 5.32: the button sits in the row with its neighbours; the note takes the
   next line of that row, so "Change the request" stays beside the button */
html.ui27 .forge .fx-short { display: contents; }
html.ui27 .forge .fx-short > .as-note { flex-basis: 100%; order: 99; margin: 0; }
html.ui27 .panel > .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ── 5.32.1 · ASSAY STUDIO, USING THE SCREEN ────────────────────────────────
   The page was one 1120px column on a wide screen: the form sat on the left
   and the right half and the margins were empty. Now: wider, a status strip
   beside the title, the working form beside a side panel (the price on your
   plan, what makes a good request, what you did last), and the usage page's
   history as a proper ledger. */
html.ui27 .page-wrap.fx-wide-page { max-width: 1560px; padding: 26px 32px 64px; }
html.ui27 .forge .fx-pagehead, html.ui27 .assist-page .fx-pagehead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 18px; }
html.ui27 .forge .fx-pagehead .lede, html.ui27 .assist-page .fx-pagehead .lede { max-width: 78ch; margin-bottom: 0; }
html.ui27 .forge .fx-strip, html.ui27 .assist-page .fx-strip { display: grid; grid-template-columns: auto auto; column-gap: 18px; row-gap: 2px; align-items: center; min-width: 290px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--lift); }
html.ui27 .forge .fx-strip-k, html.ui27 .assist-page .fx-strip-k { grid-column: 1; font: 600 11.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
html.ui27 .forge .fx-strip-v, html.ui27 .assist-page .fx-strip-v { grid-column: 1; font: 600 26px/1.15 var(--serif, var(--sans)); color: var(--ink); }
html.ui27 .forge .fx-strip-v small, html.ui27 .assist-page .fx-strip-v small { font: 400 13px/1 var(--sans); color: var(--muted); }
html.ui27 .forge .fx-strip-s, html.ui27 .assist-page .fx-strip-s { grid-column: 1; font-size: 12.5px; color: var(--muted); }
html.ui27 .forge .fx-strip-bar, html.ui27 .assist-page .fx-strip-bar { grid-column: 1; height: 5px; border-radius: 999px; background: var(--soft); overflow: hidden; margin: 4px 0 2px; }
html.ui27 .forge .fx-strip-bar span, html.ui27 .assist-page .fx-strip-bar span { display: block; height: 100%; background: var(--green-ink); border-radius: inherit; }
html.ui27 .forge .fx-strip-actions, html.ui27 .assist-page .fx-strip-actions { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

html.ui27 .forge .fx-layout, html.ui27 .assist-page .fx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; margin-top: 14px; }
html.ui27 .forge .fx-main > .as-panel, html.ui27 .assist-page .fx-main > .as-panel { margin-top: 0; }
html.ui27 .forge .fx-aside, html.ui27 .assist-page .fx-aside { position: sticky; top: calc(var(--topbar-h, 56px) + 14px); display: grid; gap: 14px; max-height: calc(100vh - var(--topbar-h, 56px) - 28px); overflow: auto; }
html.ui27 .forge .fx-card, html.ui27 .assist-page .fx-card { border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); padding: 18px 20px; box-shadow: var(--lift); }
html.ui27 .forge .fx-card h3, html.ui27 .assist-page .fx-card h3 { margin: 0 0 10px; font: 600 14px/1.3 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
html.ui27 .forge .fx-side, html.ui27 .assist-page .fx-side { padding: 15px 16px; }
html.ui27 .forge .fx-side-head, html.ui27 .assist-page .fx-side-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
html.ui27 .forge .fx-prices, html.ui27 .assist-page .fx-prices { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; margin: 0 0 8px; font-size: 13.5px; }
html.ui27 .forge .fx-prices dt, html.ui27 .assist-page .fx-prices dt { color: var(--ink2); }
html.ui27 .forge .fx-prices dd, html.ui27 .assist-page .fx-prices dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
html.ui27 .forge .fx-ticks, html.ui27 .assist-page .fx-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
html.ui27 .forge .fx-ticks li, html.ui27 .assist-page .fx-ticks li { position: relative; padding-left: 18px; }
html.ui27 .forge .fx-ticks li::before, html.ui27 .assist-page .fx-ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 4px; border-left: 2px solid var(--green-ink); border-bottom: 2px solid var(--green-ink); transform: rotate(-45deg); }
html.ui27 .forge .fx-recent, html.ui27 .assist-page .fx-recent { margin: 0; padding: 0; list-style: none; display: grid; }
html.ui27 .forge .fx-recent li, html.ui27 .assist-page .fx-recent li { padding: 9px 0; border-top: 1px solid var(--soft); }
html.ui27 .forge .fx-recent li:first-child, html.ui27 .assist-page .fx-recent li:first-child { border-top: 0; padding-top: 2px; }
html.ui27 .forge .fx-recent-t, html.ui27 .assist-page .fx-recent-t { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
html.ui27 .forge .fx-recent-t span, html.ui27 .assist-page .fx-recent-t span { font-variant-numeric: tabular-nums; color: var(--ink2); }
html.ui27 .forge .fx-recent-n, html.ui27 .assist-page .fx-recent-n { font-size: 12.5px; color: var(--ink2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html.ui27 .forge .fx-recent-w, html.ui27 .assist-page .fx-recent-w { font-size: 12px; color: var(--faint); margin-top: 2px; }

html.ui27 .forge .fx-card-head, html.ui27 .assist-page .fx-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
html.ui27 .forge .fx-card-head h2, html.ui27 .assist-page .fx-card-head h2 { margin: 0; font-size: 19px; }
html.ui27 .forge .fx-free, html.ui27 .assist-page .fx-free { font-size: 12.5px; font-weight: 600; color: var(--green-ink); background: var(--green-soft); border: 1px solid var(--green-edge); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
html.ui27 .forge .fx-compose .fx-req, html.ui27 .assist-page .fx-compose .fx-req { min-height: 9.5rem; font-size: 15px; line-height: 1.5; }
html.ui27 .forge .fx-examples, html.ui27 .assist-page .fx-examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; }
html.ui27 .forge .fx-ex-k, html.ui27 .assist-page .fx-ex-k { font-size: 12.5px; color: var(--faint); margin-right: 4px; }
html.ui27 .forge .fx-chip, html.ui27 .assist-page .fx-chip { border: 1px solid var(--border); background: var(--sunk); color: var(--ink2); border-radius: 999px; padding: 5px 12px; font: 500 12.5px/1.2 var(--sans); cursor: pointer; }
html.ui27 .forge .fx-chip:hover, html.ui27 .assist-page .fx-chip:hover { border-color: var(--strong); color: var(--ink); background: var(--surface); }
html.ui27 .forge .fx-compose-foot, html.ui27 .assist-page .fx-compose-foot { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--soft); }
html.ui27 .forge .fx-folder, html.ui27 .assist-page .fx-folder { flex: 1 1 260px; max-width: 420px; }
html.ui27 .forge .fx-folder .field, html.ui27 .assist-page .fx-folder .field { width: 100%; }
html.ui27 .forge .fx-opt, html.ui27 .assist-page .fx-opt { font-weight: 400; color: var(--faint); }
html.ui27 .forge .fx-go, html.ui27 .assist-page .fx-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
html.ui27 .forge .fx-model, html.ui27 .assist-page .fx-model { margin: 10px 0 0; }

/* usage: credit and referral side by side; the history as a ledger */
html.ui27 .forge .fx-usage-top, html.ui27 .assist-page .fx-usage-top { display: grid; gap: 18px; margin-bottom: 8px; }
html.ui27 .forge .fx-usage-top.two, html.ui27 .assist-page .fx-usage-top.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html.ui27 .forge .fx-usage-top > .fx-result, html.ui27 .assist-page .fx-usage-top > .fx-result { margin-top: 0; }
html.ui27 .forge .fx-refer h2, html.ui27 .assist-page .fx-refer h2 { font-size: 20px; }
html.ui27 .forge .fx-refer-stats, html.ui27 .assist-page .fx-refer-stats { display: flex; gap: 22px; }
html.ui27 .forge .fx-refer-stats div, html.ui27 .assist-page .fx-refer-stats div { display: grid; text-align: right; }
html.ui27 .forge .fx-refer-stats b, html.ui27 .assist-page .fx-refer-stats b { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
html.ui27 .forge .fx-refer-stats span, html.ui27 .assist-page .fx-refer-stats span { font-size: 12px; color: var(--faint); }
html.ui27 .forge .fx-refer-link, html.ui27 .assist-page .fx-refer-link { flex: 1 1 320px; font-family: var(--mono, monospace); font-size: 13px; }
html.ui27 .forge .fx-hist, html.ui27 .assist-page .fx-hist { margin-top: 26px; }
html.ui27 .forge .fx-hist-head, html.ui27 .assist-page .fx-hist-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
html.ui27 .forge .fx-hist-head h2, html.ui27 .assist-page .fx-hist-head h2 { margin: 0; }
html.ui27 .forge .fx-hist-head .as-row, html.ui27 .assist-page .fx-hist-head .as-row { margin-top: 0; }
html.ui27 .forge .fx-table-wrap, html.ui27 .assist-page .fx-table-wrap { overflow-x: auto; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); }
html.ui27 .forge .fx-hist-table, html.ui27 .assist-page .fx-hist-table { width: 100%; margin: 0; font-size: 13.5px; }
html.ui27 .forge .fx-hist-table th, html.ui27 .assist-page .fx-hist-table th { background: var(--sunk); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
html.ui27 .forge .fx-hist-table td, html.ui27 .assist-page .fx-hist-table td { vertical-align: top; padding: 9px 12px; }
html.ui27 .forge .fx-hist-table tr:last-child td, html.ui27 .assist-page .fx-hist-table tr:last-child td { border-bottom: 0; }
html.ui27 .forge .fx-hist-table .num, html.ui27 .assist-page .fx-hist-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui27 .forge .fx-hist-when, html.ui27 .assist-page .fx-hist-when { white-space: nowrap; color: var(--ink2); }
html.ui27 .forge .fx-hist-for, html.ui27 .assist-page .fx-hist-for { color: var(--ink2); min-width: 260px; }
html.ui27 .forge .fx-hist-credit td, html.ui27 .assist-page .fx-hist-credit td { background: var(--green-soft); }
html.ui27 .forge .fx-hist-fail td, html.ui27 .assist-page .fx-hist-fail td { color: var(--muted); }
html.ui27 .forge .fx-plus, html.ui27 .assist-page .fx-plus { color: var(--green-ink); font-weight: 600; }
html.ui27 .forge .fx-minus, html.ui27 .assist-page .fx-minus { color: var(--ink); font-weight: 600; }
html.ui27 .forge .fx-muted, html.ui27 .assist-page .fx-muted { color: var(--faint); }

@media (max-width: 1180px) {
  html.ui27 .forge .fx-layout, html.ui27 .assist-page .fx-layout { grid-template-columns: minmax(0, 1fr); }
  html.ui27 .forge .fx-aside, html.ui27 .assist-page .fx-aside { position: static; max-height: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  html.ui27 .forge .fx-usage-top.two, html.ui27 .assist-page .fx-usage-top.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  html.ui27 .page-wrap.fx-wide-page { padding: 18px 14px 48px; }
  html.ui27 .forge .fx-pagehead, html.ui27 .assist-page .fx-pagehead { grid-template-columns: minmax(0, 1fr); }
  html.ui27 .forge .fx-strip, html.ui27 .assist-page .fx-strip { min-width: 0; }
  html.ui27 .forge .fx-go, html.ui27 .assist-page .fx-go { margin-left: 0; }
}
html.ui27 .forge .fx-pagehead, html.ui27 .assist-page .fx-pagehead { grid-template-columns: minmax(0, 1fr) 340px; }
html.ui27 .forge .fx-strip, html.ui27 .assist-page .fx-strip { min-width: 0; }
html.ui27 .forge .fx-compose .as-intro, html.ui27 .assist-page .fx-compose .as-intro { margin-top: 0; }
html.ui27 .forge .fx-main .fx-compose + *, html.ui27 .assist-page .fx-main .fx-compose + * { margin-top: 18px; }
html.ui27 .forge .fx-steps, html.ui27 .assist-page .fx-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html.ui27 .forge .fx-steps li, html.ui27 .assist-page .fx-steps li { display: grid; gap: 4px; align-content: start; padding: 14px 14px 16px; border: 1px dashed var(--strong); border-radius: var(--r-m); font-size: 13px; line-height: 1.45; color: var(--muted); }
html.ui27 .forge .fx-steps b, html.ui27 .assist-page .fx-steps b { color: var(--ink); font-size: 14px; }
html.ui27 .forge .fx-step-n, html.ui27 .assist-page .fx-step-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--sans); color: var(--green-ink); background: var(--green-soft); border: 1px solid var(--green-edge); margin-bottom: 4px; }
html.ui27 .forge .as-panel > .fx-table { width: 100%; }
html.ui27 .forge .as-panel > .fx-meter { max-width: none; }
@media (max-width: 1180px) { html.ui27 .forge .fx-steps, html.ui27 .assist-page .fx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { html.ui27 .forge .fx-pagehead, html.ui27 .assist-page .fx-pagehead { grid-template-columns: minmax(0, 1fr); } html.ui27 .forge .fx-steps, html.ui27 .assist-page .fx-steps { grid-template-columns: minmax(0, 1fr); } }
html.ui27 .forge .fx-compose .fx-req, html.ui27 .assist-page .fx-compose .fx-req, html.ui27 .forge .fx-compose textarea.fx-wide, html.ui27 .assist-page .fx-compose textarea.fx-wide { width: 100%; max-width: none; box-sizing: border-box; }
/* The result sits in the main column beside the side panel: below ~980px of
   that column the grades and the severity table stack instead of squeezing. */
html.ui27 .forge .fx-main, html.ui27 .assist-page .fx-main { container-type: inline-size; min-width: 0; }
@container (max-width: 980px) {
  html.ui27 .forge .ba { grid-template-columns: minmax(0, 1fr); }
  html.ui27 .forge .ba-grade { flex-wrap: nowrap; }
}
html.ui27 .forge .ba-score { white-space: nowrap; }

/* ── 5.32.1 · live chat with Assay (chatui.js) ─────────────────────────── */
.ui27 .chat-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.ui27 .chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-ink); box-shadow: 0 0 0 2px var(--green-soft); }
html.ui27[data-chat-unread] .chat-dot { background: var(--red-ink); box-shadow: 0 0 0 2px var(--red-soft); }
.ui27 .lc-panel { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 90px));
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-l); box-shadow: var(--pop); overflow: hidden; }
.ui27 .lc-panel[hidden] { display: none; }
.ui27 .lc-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; background: var(--bar); color: var(--on-bar); }
.ui27 .lc-ht { display: grid; gap: 3px; }
.ui27 .lc-ht b { font: 600 15px/1.3 var(--sans); }
.ui27 .lc-ht span { font-size: 12.5px; line-height: 1.4; opacity: .8; }
.ui27 .lc-x { border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ui27 .lc-list { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; background: var(--sunk); }
.ui27 .lc-hello { display: grid; gap: 4px; padding: 12px; border: 1px dashed var(--strong); border-radius: var(--r-m); font-size: 13px; color: var(--muted); }
.ui27 .lc-hello b { color: var(--ink); }
.ui27 .lc-msg { display: grid; gap: 3px; max-width: 82%; }
.ui27 .lc-msg.out { align-self: flex-end; text-align: right; }
.ui27 .lc-msg.in { align-self: flex-start; }
.ui27 .lc-bubble { padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; text-align: left; }
.ui27 .lc-msg.out .lc-bubble { background: var(--green-soft); border: 1px solid var(--green-edge); border-bottom-right-radius: 4px; color: var(--ink); }
.ui27 .lc-msg.in .lc-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--ink); }
.ui27 .lc-meta { font-size: 11.5px; color: var(--faint); }
.ui27 .lc-start { display: grid; gap: 6px; padding: 10px 14px 0; }
.ui27 .lc-start[hidden], .ui27 .lc-err[hidden], .ui27 .lc-new[hidden] { display: none; }
.ui27 .lc-err { margin: 8px 14px 0; font-size: 12.5px; color: var(--red-ink); }
.ui27 .lc-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px 14px; border-top: 1px solid var(--soft); }
.ui27 .lc-in { resize: none; min-height: 44px; max-height: 120px; }
.ui27 .lc-new { justify-self: start; margin: 0 14px 10px; font-size: 12.5px; }
.ui27 .lc-sub::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--on-bar-dim); vertical-align: 1px; }
.ui27 .lc-sub.on::before { background: var(--green); }
/* 5.32.2 · Assist on the Studio layout */
html.ui27 .assist-page .fx-main > div > .panel:first-child { margin-top: 0; }
html.ui27 .assist-page .as-two-ways dt { color: var(--ink2); }
html.ui27 .assist-page .as-two-ways dt .as-note { font-weight: 400; margin-top: 2px; }
html.ui27 .assist-page .as-two-ways .btn-green { margin-top: 6px; width: 100%; }
html.ui27 .assist-page .as-handoff { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin: 16px 0;
  padding: 14px 18px; border: 1px solid var(--green-edge); border-radius: var(--r-m); background: var(--green-soft); color: var(--ink2); font-size: 14px; }
html.ui27 .assist-page .as-handoff b { color: var(--ink); }
html.ui27 .assist-page .as-ta { width: 100%; box-sizing: border-box; min-height: 8rem; }

/* 5.36 · Studio not connected yet: said, not hidden */
html.ui27 .forge .fx-strip.fx-strip-off, html.ui27 .assist-page .fx-strip.fx-strip-off { max-width: 420px; border-color: var(--amber-edge); background: var(--amber-soft); }
html.ui27 .forge .fx-strip-off .fx-strip-v, html.ui27 .assist-page .fx-strip-off .fx-strip-v { font-size: 20px; color: var(--amber-ink); }
html.ui27 .forge .fx-strip-off .fx-strip-s, html.ui27 .assist-page .fx-strip-off .fx-strip-s { line-height: 1.45; }

/* 5.36: prepaid credit on Home and in the profile menu */
html.ui27 .month-credit { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--sunk); }
html.ui27 .month-credit > span { color: var(--muted); font-size: 13.5px; }
html.ui27 .month-credit > strong { font: 650 18px/1.1 var(--sans); color: var(--ink); margin-right: auto; }
html.ui27 .profile-credit { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html.ui27 .profile-credit strong { color: var(--ink); }

/* 5.36: selecting fix-plan rows, and acting on all of them at once */
html.ui27 .th-pick, html.ui27 .td-pick { display: flex; align-items: center; justify-content: center; cursor: default; }
html.ui27 .th-pick input, html.ui27 .td-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); cursor: pointer; }
html.ui27 .tbl-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 10px; padding: 10px 14px;
  border: 1px solid var(--green); border-radius: var(--r-m); background: var(--green-soft); position: sticky; top: 8px; z-index: 3; }
html.ui27 .tbl-bulk-sum { font: 500 13.5px/1.45 var(--sans); color: var(--ink2); }
html.ui27 .tbl-bulk-sum strong { color: var(--green-ink); }
html.ui27 .tbl-bulk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.ui27 .tbl-bulk-note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
html.ui27 .forge .fx-from-plan { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--green); border-radius: var(--r-m); background: var(--green-soft); font-size: 14px; line-height: 1.5; color: var(--ink2); }
html.ui27 .forge .fx-from-plan strong { color: var(--green-ink); }
html.ui27 .acc-flow code { font-size: 12px; color: var(--muted); }

/* 5.36: Assist's tabs inside Assay Studio, and Studio's settings as steps */
html.ui27 .as-tabs { flex-wrap: wrap; }
html.ui27 .as-tab .as-tab-free { margin-left: 6px; padding: 0 6px; border-radius: 999px; font: 600 10.5px/16px var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--green-ink); background: var(--green-soft); vertical-align: 1px; }
html.ui27 .fx-settings .fx-step-h { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; }
html.ui27 .fx-settings .fx-step-n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  font: 650 13px/1 var(--sans); color: var(--ink2); background: var(--sunk); border: 1px solid var(--border); }
html.ui27 .fx-settings .fx-step-n.done { color: var(--surface); background: var(--green); border-color: var(--green); }
html.ui27 .fx-model-steps { margin: 10px 0 14px; padding-left: 20px; color: var(--ink2); line-height: 1.55; }
html.ui27 .fx-model-steps li { margin: 3px 0; }
html.ui27 .fx-model .field-label { text-transform: none; }
html.ui27 .fx-model .field-label::first-letter { text-transform: none; }