/* INTAI Governed AI Portal — design system v2.0
   Brand: Plus Jakarta Sans, INTAI blue #074eb9 on white; navy application chrome.
   Compact professional density via a real type scale. Hard-square corners (--radius: 0).
   Mobile-first: sidebar becomes a drawer, columns stack, tables become cards. */
/* Plus Jakarta Sans (SIL OFL 1.1, fonts/OFL.txt) — self-hosted: no Google Fonts call, so no third-party request
   leaks adviser IPs and the CSP stays 'self'-only. Variable weight 200–800. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  --radius: 10px; --radius-sm: 6px;   /* mockup v2.0: soft corners */
  --brand: #0a5bff; --brand-dark: #0646c8; --brand-soft: #e9f0ff;
  --navy: #0b1b3a; --navy-2: #13264e; --navy-text: #c7d0e3;
  --ink: #1b1f2e; --ink-2: #4b5163; --ink-3: #636a7e; --ink-4: #6e7488;  /* drop 13: darkened to meet WCAG AA 4.5:1 on white and every tinted card */
  --line: #e3e6ee; --line-2: #cfd4e0;
  --canvas: #f5f6fa; --white: #fff; --panel: #fafbfd;
  --ok: #166b40; --ok-bg: #e6f4ec; --warn: #8a5200; --warn-bg: #fff4e0; --bad: #b3261e; --bad-bg: #fbe9e7;
  --neutral: #4b5163; --neutral-bg: #eef0f4; --pending: #074eb9; --pending-bg: #e8effb;
  /* restrained workflow pastels */
  --t-blue: #e9f0ff; --t-green: #e6f7ee; --t-violet: #efeafc; --t-amber: #fff4e0; --t-red: #fdeaea; --t-teal: #e3f5f4; --t-pink: #fbe9f3;
  --c-blue: #0a5bff; --c-green: #17a35c; --c-violet: #6d3fd8; --c-amber: #e08a00; --c-red: #e0352b; --c-red-strong: #c62828; /* 0.3.0-rc2 (A11Y): white text on --c-red-strong = 5.6:1 (on --c-red only 4.45:1) */ --c-teal: #0f9b8e; --c-pink: #d6338a;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* intai.co.uk: one family, bold tight headings */
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* type scale (compact) */
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15.5px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 28px;
  --sidebar-w: 236px; --topbar-h: 52px;
  --shadow: 0 1px 2px rgba(11,27,58,.04);
  --shadow-2: 0 8px 24px rgba(11,27,58,.10);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: 1.6; color: var(--ink-2); background: var(--canvas); }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; margin: 0 0 .5rem; line-height: 1.25; letter-spacing: -.2px; }
h1 { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -.6px; color: var(--navy); line-height: 1.2; }
h1 .accent { color: var(--brand); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }
p { margin: 0 0 .75rem; }
a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-dark); }
strong { color: var(--ink); font-weight: 600; }
code, pre { font-family: var(--mono); font-size: .9em; }
pre { background: var(--panel); border: 1px solid var(--line); padding: 10px 12px; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-word; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
ul, ol { margin: 0 0 .75rem; padding-left: 18px; }
.hidden { display: none !important; }
.ic { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
/* one line weight everywhere: the 1.5px stroke stays 1.5px whether the icon renders at 11px or 22px */
.ic *, .sidebar .pillars svg * { vector-effect: non-scaling-stroke; }
.btn .ic { width: 12px; height: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- application shell ---------- */
.app { min-height: 100vh; display: flex; }
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--white); color: var(--ink-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 40; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 14px 18px; height: var(--topbar-h); border-bottom: 1px solid var(--line); }
.sidebar .brand img { height: 24px; width: auto; display: block; }
.sidebar .brand .product { display: none; }
.sidebar .brand .close { margin-left: auto; display: none; }
.snav { padding: 12px 10px; flex: 1 1 auto; overflow-y: auto; }
.snav .group { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-4); font-weight: 700; padding: 12px 10px 4px; }
.snav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 1px 0; color: var(--ink-2); font-size: var(--fs-base); font-weight: 500; border-radius: var(--radius-sm); }
.snav a:hover { background: var(--panel); color: var(--ink); }
.snav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.snav a .ic { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }
.snav a .count { margin-left: auto; background: var(--c-red-strong); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
.sidebar .pillars { margin: 10px 14px 14px; display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.sidebar .pillars svg { width: 30px; height: 34px; flex: 0 0 30px; }
.sidebar .pillars div { font-size: 10px; letter-spacing: 1.2px; font-weight: 700; color: var(--navy); line-height: 1.45; }
.sidebar .user { display: none; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: var(--white); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 30; }
.topbar .search { flex: 0 1 380px; position: relative; }
.topbar .search input { height: 34px; padding: 6px 10px 6px 32px; font-size: var(--fs-sm); background: var(--panel); border-color: var(--line); border-radius: var(--radius-sm); box-shadow: none; }
.topbar .search svg { position: absolute; left: 10px; top: 10px; width: 14px; height: 14px; color: var(--ink-4); }
/* 0.5.6.9 Search INTAI: one dropdown everywhere; groups of links; keyboard first */
.isr { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; }
.isr-group { padding: 6px 8px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.isr a.isr-item { display: block; padding: 7px 10px; border-radius: 7px; color: inherit; text-decoration: none; }
.isr a.isr-item b { display: block; font-weight: 600; font-size: var(--fs-sm); }
.isr a.isr-item small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px; }
.isr a.isr-item:hover, .isr a.isr-item.active { background: var(--brand-soft); color: var(--brand); }
.isr .isr-empty, .isr .isr-note { padding: 10px; color: var(--ink-3); font-size: var(--fs-sm); }
.isr .isr-filter { border-top: 1px solid var(--line); margin-top: 4px; }
.topbar .bell { position: relative; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); background: #fff; }
.topbar .bell .dot { position: absolute; top: -6px; right: -6px; background: var(--c-red-strong); color: #fff; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 10px; min-width: 16px; text-align: center; line-height: 16px; }
.topbar .me { position: relative; }
.topbar .me summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 4px; border-radius: var(--radius-sm); }
.topbar .me summary::-webkit-details-marker { display: none; }
.topbar .me .av { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.topbar .me .nm { line-height: 1.2; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; white-space: nowrap; } .topbar .me .nm small { display: block; font-weight: 400; color: var(--ink-3); }
.topbar .me .menu-box { position: absolute; right: 0; top: 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); min-width: 200px; padding: 6px; z-index: 50; }
.topbar .me .menu-box a, .topbar .me .menu-box button { display: block; width: 100%; text-align: left; padding: 8px 10px; font: inherit; font-size: var(--fs-sm); color: var(--ink); background: none; border: 0; cursor: pointer; border-radius: 4px; }
.topbar .me .menu-box a:hover, .topbar .me .menu-box button:hover { background: var(--panel); }
.topbar .menu { display: none; background: none; border: 1px solid var(--line-2); width: 34px; height: 34px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.topbar .crumb { font-size: var(--fs-sm); color: var(--ink-3); display: flex; gap: 8px; align-items: center; min-width: 0; flex: 1 1 auto; }
.topbar .crumb b { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .right { margin-left: auto; flex: 0 0 auto; display: flex; gap: 14px; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); }
.topbar .firm { display: inline-flex; cursor: default; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--ink); background: #fff; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.topbar .firm svg { width: 14px; height: 14px; color: var(--ink-3); }
.topbar .env { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--warn); border: 1px solid var(--warn); padding: 2px 6px; border-radius: 4px; }
.content { padding: 24px; flex: 1 1 auto; width: 100%; max-width: 1440px; }
.content.narrow { max-width: 860px; }
.foot { padding: 14px 24px; font-size: var(--fs-xs); color: var(--ink-4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--white); }
.backdrop { display: none; position: fixed; inset: 0; background: rgba(11,27,58,.45); z-index: 35; }

@media (max-width: 960px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-2); width: 280px; flex-basis: 280px; }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .backdrop { display: block; }
  .sidebar .brand .close { display: inline-flex; }
  .topbar .menu { display: inline-flex; }
  .topbar { padding: 0 16px; }
  .topbar .firm, .topbar .search, .topbar .me .nm { display: none; }
  .mobile-only { display: block; }
  .stepper { gap: 4px; } .stepper .s { min-width: 0; flex: 1 1 0; } .stepper .s small { display: none; }
  .wf { padding: 14px; } .wf .meta { display: none; }
  .topbar .crumb span { display: none; }
  .content { padding: 16px; }
  .foot { padding: 12px 16px; }
}

/* ---------- page head ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { margin: 0; color: var(--ink-3); max-width: 640px; line-height: 1.65; }
.page-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.page-head .stepper { flex: 0 0 auto; }
.page-head .actions { margin: 0; }
.eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; color: var(--brand); display: block; margin-bottom: 4px; }
.eyebrow.muted { color: var(--ink-3); }

/* ---------- layout helpers ---------- */
.row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.col { flex: 1 1 0; min-width: 0; }
.col-3 { flex: 0 0 calc(25% - 15px); } .col-4 { flex: 0 0 calc(33.333% - 13.4px); } .col-6 { flex: 0 0 calc(50% - 10px); } .col-8 { flex: 0 0 calc(66.666% - 6.7px); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 960px) { .col-3, .col-4, .col-6, .col-8 { flex: 0 0 100%; } .grid-2, .grid-3, .split { grid-template-columns: 1fr; } }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.text-small { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .text-dark { color: var(--ink); } .text-muted { color: var(--ink-3); }
.text-right { text-align: right; } .text-center { text-align: center; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.mobile-only { display: none; }
@media (max-width: 960px) { .mobile-only { display: block; } .desk-only { display: none; } }   /* after the base rule, or the base rule wins */

/* ---------- buttons ---------- */
.btn { border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--font); font-weight: 600; font-size: 11.5px; letter-spacing: .1px; padding: 0 13px; height: 34px; border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer; line-height: 1.2; transition: .15s; white-space: nowrap; }
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { background: var(--panel); border-color: var(--ink-3); color: var(--ink); }
.btn-ok { background: var(--ok); border-color: var(--ok); } .btn-ok:hover { background: #135f38; border-color: #135f38; }
.btn-bad { background: var(--bad); border-color: var(--bad); } .btn-bad:hover { background: #8f1d16; border-color: #8f1d16; }
.btn-warn { background: var(--warn); border-color: var(--warn); } .btn-warn:hover { background: #8a5200; border-color: #8a5200; }
.btn-sm { padding: 0 10px; height: 30px; font-size: 10.5px; }
.btn-lg { padding: 0 18px; height: 40px; font-size: 12.5px; }
.btn-link { background: none; border: 0; color: var(--brand); padding: 0; height: auto; font: inherit; cursor: pointer; display: inline; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- cards ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.card.compact { padding: 14px 16px; }
.card > .eyebrow:first-child { margin-bottom: 8px; }
.card h2, .card h3 { margin-top: 0; }
.card.link { display: flex; flex-direction: column; color: inherit; transition: .15s; min-height: 132px; }
.card.link:hover { border-color: var(--brand); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.card.link .foot-line { margin-top: auto; padding-top: 10px; font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-head h3, .card-head h2 { margin: 0; }

/* workflow tiles (mockup: pastel tile, icon, eyebrow "GROUP · WF-xx", chevron) */
/* 0.4.1 launcher spacing: wider gaps, 300px tiles (4 per row on a wide desktop so titles stay on one line), more air above and below the grid. */
.launcher-intro { max-width: 60ch; }
.launcher-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 36px; }
.launcher-cards { margin-top: 36px; }
@media (max-width: 960px) { .launcher-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; } .launcher-cards { margin-top: 24px; } }   /* tablet: 2–3 per row */
@media (max-width: 720px) { .launcher-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; } }   /* phone: one per row; 16px gutters come from .content */
.wf { display: grid !important; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; min-height: 0 !important; padding: 18px 20px; border-radius: var(--radius); }
.wf .wf-ico { width: 40px; height: 40px; border-radius: 9px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wf .wf-ico svg { width: 20px; height: 20px; }
.wf .wf-group { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--ink-3); display: block; margin-bottom: 3px; }
.wf h3 { font-size: var(--fs-base); margin: 0; color: var(--navy); line-height: 1.3; }
.wf p { font-size: var(--fs-xs); color: var(--ink-3); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf .meta { grid-column: 2; font-size: 10px; color: var(--ink-4); }
.wf.t-blue { background: var(--t-blue); border-color: transparent; } .wf.t-blue .wf-ico { color: var(--c-blue); }
.wf.t-green { background: var(--t-green); border-color: transparent; } .wf.t-green .wf-ico { color: var(--c-green); }
.wf.t-violet { background: var(--t-violet); border-color: transparent; } .wf.t-violet .wf-ico { color: var(--c-violet); }
.wf.t-amber { background: var(--t-amber); border-color: transparent; } .wf.t-amber .wf-ico { color: var(--c-amber); }
.wf.t-red { background: var(--t-red); border-color: transparent; } .wf.t-red .wf-ico { color: var(--c-red); }
.wf.t-teal { background: var(--t-teal); border-color: transparent; } .wf.t-teal .wf-ico { color: var(--c-teal); }
.wf.t-pink { background: var(--t-pink); border-color: transparent; } .wf.t-pink .wf-ico { color: var(--c-pink); }
.wf.link:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
/* ASK → DO → CHECK stepper */
.stepper { display: flex; align-items: flex-start; gap: 8px; }
.stepper .s { display: flex; flex-direction: column; align-items: center; min-width: 76px; text-align: center; }
.stepper .s .n { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.stepper .s.off .n { background: var(--line-2); color: var(--ink-2); }
.stepper .s b { font-size: 10.5px; letter-spacing: 1.2px; margin-top: 5px; color: var(--navy); }
.stepper .s small { font-size: 10px; color: var(--ink-3); }
.stepper .arr { color: var(--ink-4); margin-top: 4px; }

/* stats */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); padding: 14px 16px; border-radius: var(--radius); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; }
.stat .ico { grid-row: 1 / span 3; width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.stat .ico svg { width: 18px; height: 18px; }
.stat.t-blue { background: var(--t-blue); border-color: transparent; } .stat.t-green { background: var(--t-green); border-color: transparent; } .stat.t-amber { background: var(--t-amber); border-color: transparent; } .stat.t-violet { background: var(--t-violet); border-color: transparent; } .stat.t-red { background: var(--t-red); border-color: transparent; } .stat.t-teal { background: var(--t-teal); border-color: transparent; }
.stat.t-blue .ico { background: #fff; color: var(--c-blue); } .stat.t-green .ico { background: #fff; color: var(--c-green); } .stat.t-amber .ico { background: #fff; color: var(--c-amber); } .stat.t-violet .ico { background: #fff; color: var(--c-violet); } .stat.t-red .ico { background: #fff; color: var(--c-red); } .stat.t-teal .ico { background: #fff; color: var(--c-teal); }
.stat .delta { font-size: var(--fs-xs); font-weight: 600; } .stat .delta.up { color: #137a45; } .stat .delta.down { color: var(--c-red); }
.stat .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; color: var(--ink-3); }
.stat .value { font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.1; margin: 2px 0; letter-spacing: -.6px; }
.stat .sub { font-size: var(--fs-xs); color: var(--ink-3); }
.stat.tone-ok .value { color: var(--ok); } .stat.tone-bad .value { color: var(--bad); } .stat.tone-warn .value { color: var(--warn); }
.stat.tone-brand .value { color: var(--brand); }
.est { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--ink-3); border: 1px solid var(--line); padding: 1px 5px; margin-left: 6px; vertical-align: middle; }

/* bars, donut, legend */
.bar { display: grid; grid-template-columns: minmax(90px, 1fr) 3fr auto; gap: 12px; align-items: center; font-size: var(--fs-sm); padding: 7px 0; border-bottom: 1px solid var(--line); }
.bar:last-child { border-bottom: 0; }
.bar .track { height: 8px; background: var(--neutral-bg); position: relative; overflow: hidden; }
.bar .fill { height: 100%; background: var(--brand); }
.bar .n { color: var(--ink); font-weight: 600; min-width: 44px; text-align: right; }
.viz { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.donut { width: 132px; height: 132px; flex: 0 0 132px; }
.donut .hole { font-weight: 700; font-size: 26px; fill: var(--ink); letter-spacing: -1px; }
.donut .hole-sub { font-size: 9px; fill: var(--ink-3); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.legend { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); min-width: 180px; }
.legend li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--ink); }
.legend .sw { width: 10px; height: 10px; flex: 0 0 10px; }
.legend .v { margin-left: auto; font-weight: 600; padding-left: 12px; }

/* tags */
.tag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .9px; font-weight: 700; padding: 3px 8px; white-space: nowrap; line-height: 1.3; border-radius: 4px; }
.tag-ok { color: var(--ok); background: var(--ok-bg); } .tag-bad { color: var(--bad); background: var(--bad-bg); } .tag-warn { color: var(--warn); background: var(--warn-bg); }
.tag-pending { color: var(--pending); background: var(--pending-bg); } .tag-neutral { color: var(--neutral); background: var(--neutral-bg); }
.tag-low { color: var(--neutral); background: var(--neutral-bg); } .tag-medium { color: var(--warn); background: var(--warn-bg); } .tag-high, .tag-critical { color: var(--bad); background: var(--bad-bg); }
.tag-lg { font-size: var(--fs-xs); padding: 6px 12px; }

/* tables → cards on mobile */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; background: var(--white); }
td { padding: 9px 10px; background: var(--white); border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
tr:hover td { background: var(--panel); }
.table-wrap { overflow-x: auto; }
table.kv { table-layout: fixed; } table.kv td:first-child { color: var(--ink-3); width: 38%; padding-left: 0; } table.kv td { padding: 6px 10px 6px 0; word-break: break-word; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  table.responsive thead, table.responsive tr.head { display: none; }
  table.responsive tr { display: block; border: 1px solid var(--line); margin-bottom: 10px; background: var(--white); }
  table.responsive td { display: block; border: 0; padding: 6px 12px; }
  table.responsive td[data-l]::before { content: attr(data-l); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3); font-weight: 700; }
  table.responsive td.text-right { text-align: left; }
  table.responsive tr td:first-child { padding-top: 12px; } table.responsive tr td:last-child { padding-bottom: 12px; }
}

/* forms */
label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 7px; line-height: 1.4; }
label .help { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 4px; line-height: 1.55; }
/* form controls — one crisp box everywhere (Crafto-style): 38px tall, hairline, 6px corners, custom chevron on selects */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input[type=tel], input[type=url], select, textarea {
  border-radius: var(--radius-sm); width: 100%; font: inherit; font-size: var(--fs-base); line-height: 20px; height: 38px; padding: 8px 12px;
  border: 1px solid var(--line-2); background: var(--white); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; box-shadow: 0 1px 1px rgba(11,27,58,.03); transition: border-color .12s, box-shadow .12s; }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:hover, select:hover, textarea:hover { border-color: #b9c0cf; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input:disabled, select:disabled { background: var(--panel); color: var(--ink-3); }
select { padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%234b5163' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; }
select[multiple] { height: auto; background-image: none; }
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type=file] { font-size: var(--fs-sm); height: auto; padding: 0; border: 0; box-shadow: none; }
input[type=file]::file-selector-button { font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); margin-right: 10px; cursor: pointer; }
/* checkboxes + radios: drawn, not native (Crafto sweep, drop 12) */
input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 5px; background: #fff center / 12px 12px no-repeat; cursor: pointer; transition: background-color .12s, border-color .12s, box-shadow .12s; box-shadow: 0 1px 1px rgba(11,27,58,.03); }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: #b9c0cf; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input[type=checkbox]:checked { background-color: var(--brand); border-color: var(--brand); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5l3 3 6-7'/></svg>"); }
input[type=radio]:checked { border-color: var(--brand); background-image: radial-gradient(circle, var(--brand) 0 4px, transparent 4.5px); background-size: 100% 100%; }
input[type=checkbox]:disabled, input[type=radio]:disabled { background-color: var(--panel); border-color: var(--line); cursor: not-allowed; }
input[type=checkbox]:checked:disabled { background-color: #9db8f5; border-color: #9db8f5; }
/* number + date: no native spinners; a drawn calendar icon */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; width: 14px; height: 14px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234b5163' stroke-width='1.5' stroke-linecap='round'><rect x='2' y='3' width='12' height='11' rx='2'/><path d='M2 7h12M5.5 1.5v3M10.5 1.5v3'/></svg>") center / contain no-repeat; }
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* every disclosure: one drawn chevron, never the browser triangle */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details:not(.pop):not(.me):not(.acc) > summary { display: flex; align-items: center; gap: 6px; }
details:not(.pop):not(.me):not(.acc) > summary::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border: solid var(--ink-3); border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); transition: transform .15s; margin: 0 3px 0 1px; }
details:not(.pop):not(.me):not(.acc)[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
/* thin scrollbars inside our own boxes */
.pop-list, .cselect-list, pre { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pop-list::-webkit-scrollbar, .cselect-list::-webkit-scrollbar, pre::-webkit-scrollbar { width: 8px; height: 8px; }
.pop-list::-webkit-scrollbar-thumb, .cselect-list::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid #fff; }
textarea { min-height: 120px; height: auto; resize: vertical; line-height: 1.5; }
.field { margin-bottom: 16px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink); font-weight: 400; }
.check input { margin-top: 1px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form input, .inline-form select { width: auto; height: 34px; padding: 6px 10px; font-size: var(--fs-sm); } .inline-form select { padding-right: 32px; }

/* callouts */
.callout { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 12px 14px; margin-bottom: 16px; color: var(--ink); font-size: var(--fs-sm); }
.callout.bad { border-color: #f3c9c6; background: var(--bad-bg); } .callout.ok { border-color: #c7e9d6; background: var(--ok-bg); } .callout.warn { border-color: #f3dfb3; background: var(--warn-bg); }

/* numbered steps (workflow input) */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step .num { counter-increment: step; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); border: 1px solid #cfe0ff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.step .num::before { content: counter(step); }
.step .field { margin-bottom: 0; }

/* governance panel */
.gov { display: grid; gap: 0; }
.gov .g { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.6; }
.gov .g:last-child { border-bottom: 0; }
.gov .g { grid-template-columns: 30px 1fr; }
.gov .k { font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; color: var(--brand); padding-top: 2px; }
.gov .gi { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; } .gov .gi svg { width: 14px; height: 14px; }
.gov .gt { font-weight: 600; color: var(--navy); display: block; font-size: var(--fs-base); margin-bottom: 2px; }
.gov .v { color: var(--ink); }
details.acc { border: 1px solid var(--line); background: var(--white); margin-bottom: 10px; border-radius: var(--radius); overflow: hidden; }
details.acc summary { padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--ink); font-size: var(--fs-sm); list-style: none; display: flex; justify-content: space-between; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: '+'; color: var(--ink-3); } details.acc[open] summary::after { content: '–'; }
details.acc .body { padding: 0 14px 12px; }
details summary { cursor: pointer; }

/* human check: request | draft | governance */
.check-grid { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 2fr) minmax(220px, .9fr); gap: 16px; align-items: start; }
@media (max-width: 1200px) { .check-grid { grid-template-columns: minmax(0, 2fr) minmax(220px, .9fr); } .check-grid .req { grid-column: 1 / -1; } }
@media (max-width: 960px) { .check-grid { grid-template-columns: 1fr; } }
.check-page .draft { border-color: var(--line); }
.out h4 { text-transform: uppercase; letter-spacing: 1px; font-size: 10.5px; color: var(--ink-3); margin: 14px 0 4px; }
.out h4:first-child { margin-top: 0; }
.out p, .out li { color: var(--ink); } .out ul { margin: 0; }
.out .kv { border: 1px solid var(--line); padding: 8px 10px; margin-bottom: 6px; }
/* 0.5.5.17: limited Markdown in AI text (bold, italic, lists, paragraphs) and INTAI's inference-wording marks */
.out .out-lead { font-weight: 600; }
.out p { margin: 0 0 8px; } .out p:last-child { margin-bottom: 0; }
.out ol { margin: 0; padding-left: 22px; } .out li > ul, .out li > ol { margin-top: 4px; }
.out mark.ungrounded { background: #fff3cd; color: inherit; border-bottom: 2px solid #b7791f; padding: 0 2px; }
.out mark.ungrounded-end::after { content: " \26A0  " attr(title); font-size: 11.5px; font-style: italic; font-weight: 600; color: #7a4a00; }
.decision-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 960px) {
  /* The decision bar is pinned to the bottom of the phone screen for the whole review, not just once the decision card scrolls into view. */
  .decision-sticky { position: fixed; left: 0; right: 0; bottom: 0; background: var(--white); border-top: 1px solid var(--line-2); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); margin: 0; box-shadow: 0 -6px 16px rgba(11,27,58,.10); z-index: 25; }
  body.has-decision-bar .content { padding-bottom: 112px; }
  body.modal-open .decision-sticky { visibility: hidden; }
  .decision-bar { gap: 8px; } .decision-bar .btn { flex: 1 1 calc(50% - 4px); padding: 11px 8px; font-size: 12px; }
  .check-page .draft .out { font-size: var(--fs-base); }
  details.acc summary { padding: 12px 14px; min-height: 44px; }
  .modal { align-items: flex-end; padding: 0; } .modal .box { max-width: none; border-radius: 14px 14px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .stepper .s b { font-size: 9.5px; }
}
.dwell { font-size: var(--fs-xs); color: var(--ink-3); }
.dwell.rapid { color: var(--warn); font-weight: 600; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(11,27,58,.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal.open { display: flex; }
.modal .box { background: #fff; width: 100%; max-width: 480px; padding: 24px; border-radius: var(--radius); box-shadow: 0 24px 64px rgba(11,27,58,.22); }
.modal .box.bad h3 { color: var(--c-red); } .modal .box.warn h3 { color: var(--c-amber); }

kbd { font: 600 11px var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: var(--panel); color: var(--ink); }
/* trace / evidence */
.trace { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); }
.trace li { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.trace .stage { font-weight: 700; color: var(--brand); letter-spacing: 1px; font-size: 10px; }
.trace .ev { color: var(--ink); font-weight: 600; } .trace .detail { color: var(--ink-3); font-weight: 400; }

/* onboarding journey */
.journey { display: flex; gap: 4px; flex-wrap: wrap; }
.journey span { font-size: var(--fs-xs); font-weight: 600; padding: 5px 10px 5px 9px; border-radius: 999px; background: var(--neutral-bg); color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.journey span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.journey span.done { color: var(--ok); background: var(--ok-bg); }
.journey span.done::before { background: var(--c-green); }

/* heat cells */
.heat { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; }
.heat.ok { background: var(--ok); } .heat.bad { background: var(--bad); } .heat.na { background: var(--ink-4); }

/* dev box */
.devbox { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; font-size: var(--fs-xs); color: var(--ink-2); border-radius: var(--radius-sm); }
.devbox code { color: var(--ink); }

/* ---------- sign-in (mockup: landscape backdrop, left messaging, right card) ---------- */
.auth { min-height: 100vh; position: relative; background: #fff; }
.auth-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 480px); gap: 0; max-width: 1360px; margin: 0 auto; padding: 40px 72px 48px; min-height: 100vh; align-items: stretch; }
.auth-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.auth-top .wordmark { display: flex; flex-direction: column; gap: 4px; }
.auth-top .wordmark img { height: 34px; width: auto; }
.auth-top .wordmark span { font-size: 10px; letter-spacing: 3px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; padding-left: 2px; }
.auth-top .trust { display: flex; gap: 0; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); }
.auth-top .trust span { padding: 0 14px; border-left: 1px solid var(--line-2); display: inline-flex; align-items: center; gap: 6px; } .auth-top .trust span:first-child { border-left: 0; }
.auth-top .trust .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 2px #fff; }
.auth-side { display: flex; flex-direction: column; justify-content: center; padding: 20px 72px 40px 0; border-right: 1px solid var(--line); }
.auth-side .eyebrow { color: var(--brand); font-size: 11px; letter-spacing: 1.6px; }
.auth-side h1 { font-size: 44px; line-height: 1.08; margin: 8px 0 18px; letter-spacing: -1.4px; font-weight: 700; }
.auth-side p { max-width: 500px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.auth-side .loop-line { display: flex; gap: 16px; align-items: center; margin-top: 14px; font-size: 11.5px; letter-spacing: 2px; font-weight: 700; color: var(--brand); }
.auth-side .loop-line span.arr { color: var(--ink-4); font-weight: 400; letter-spacing: 0; }
.auth-side .pillars { display: flex; gap: 14px; margin-top: 56px; flex-wrap: nowrap; }
.auth-side .pillar { text-align: center; width: 100px; flex: 0 0 auto; }
.auth-side .pillar .pi { width: 44px; height: 44px; border-radius: 10px; margin: 0 auto 8px; display: inline-flex; align-items: center; justify-content: center; }
.auth-side .pillar .pi svg { width: 20px; height: 20px; }
.auth-side .pillar b { display: block; font-size: 10px; letter-spacing: 1.6px; color: var(--navy); }
.auth-side .pillar small { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.auth-form { background: #fff; border: 0; padding: 20px 0 26px 72px; display: flex; flex-direction: column; justify-content: center; align-self: center; width: 100%; }
.auth-form h2 { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.6px; margin-bottom: 4px; color: var(--navy); }
.auth-form .lead { color: var(--ink-3); margin-bottom: 24px; font-size: var(--fs-sm); }
.auth-form label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-2); }
.auth-form .in { position: relative; } .auth-form .in svg { position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; }
.auth-form .in input { height: 42px; padding: 10px 12px 10px 38px; font-size: 13.5px; }
.auth-form .btn-lg { width: 100%; padding: 11px; font-size: 13px; border-radius: 8px; margin-top: 4px; }
.auth-form .or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 11px; letter-spacing: 1px; margin: 22px 0 16px; } .auth-form .or::before, .auth-form .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.auth-form .devbox { border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.auth-form .devbox summary { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); } .auth-form .devbox summary small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-sm); }
.auth-form .legal { text-align: center; font-size: var(--fs-xs); color: var(--ink-4); margin-top: 22px; }
@media (max-width: 1000px) { .auth-wrap { grid-template-columns: 1fr; padding: 24px 20px 32px; gap: 20px; } .auth-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 0 28px; } .auth-form { padding: 8px 0 20px; } .auth-side h1 { font-size: 32px; letter-spacing: -1px; } .auth-side .pillars { display: none; } .auth-form { padding: 28px 22px 20px; } .auth-top .trust { display: none; } }

/* list rows (pending approvals, recent activity, advisers) */
.list { display: flex; flex-direction: column; }
.list .li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); color: inherit; }
.list .li:last-child { border-bottom: 0; }
.list .li:hover b { color: var(--brand); }
.li-ico { width: 30px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.li-ico svg { width: 15px; height: 15px; }
.li-ico.t-red { background: var(--t-red); color: var(--c-red); } .li-ico.t-green { background: var(--t-green); color: var(--c-green); } .li-ico.t-blue { background: var(--t-blue); color: var(--c-blue); } .li-ico.t-violet { background: var(--t-violet); color: var(--c-violet); } .li-ico.t-amber { background: var(--t-amber); color: var(--c-amber); }
.li-body { min-width: 0; } .li-body b { display: block; color: var(--ink); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .li-body small { color: var(--ink-3); font-size: var(--fs-xs); }
.list .chev { color: var(--ink-4); }
.card-head h3 { font-size: var(--fs-base); }
.av-sm { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--c-blue); margin-right: 8px; vertical-align: middle; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 8px 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--brand); border-bottom-color: var(--brand); background: var(--brand-soft); border-radius: 6px 6px 0 0; }

/* firm context bar (drill-down: network → firm → adviser) */
.firmbar { margin: -24px -24px 20px; padding: 10px 24px 0; background: var(--white); border-bottom: 1px solid var(--line); }
.firmbar-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); }
.firmbar-top .up { color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; } .firmbar-top .up .ic { transform: rotate(180deg); }
.firmbar-top .sep { color: var(--ink-4); }
.firmbar-top .name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); font-size: var(--fs-md); }
.firmbar-top .switch { display: inline-flex; align-items: center; gap: 6px; } .firmbar-top .switch select { width: auto; min-width: 220px; height: 34px; padding: 5px 32px 5px 10px; font-weight: 600; color: var(--navy); }
.firmbar-tabs { display: flex; gap: 2px; overflow-x: auto; margin-top: 6px; }
.firmbar-tabs a { padding: 8px 12px; font-size: var(--fs-sm); color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.firmbar-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
@media (max-width: 960px) { .firmbar { margin: -16px -16px 16px; padding: 8px 16px 0; } }

/* ---------- top-bar popovers: firm switcher + notifications drawer (drop 11) ---------- */
.topbar .pop { position: relative; }
.topbar .pop > summary { list-style: none; cursor: pointer; }
.topbar .pop > summary::-webkit-details-marker { display: none; }
.topbar .firmpick > summary.firm { cursor: pointer; transition: border-color .15s, background .15s; }
.topbar .firmpick > summary.firm span { overflow: hidden; text-overflow: ellipsis; }
.topbar .firmpick > summary.firm svg:last-child { width: 12px; height: 12px; transform: rotate(90deg); transition: transform .15s; }
.topbar .firmpick[open] > summary.firm svg:last-child { transform: rotate(-90deg); }
.topbar .firmpick > summary.firm:hover, .topbar .pop[open] > summary { border-color: var(--line-2); background: var(--panel); }
.topbar .inbox > summary.bell { transition: border-color .15s, background .15s; }
.pop-box { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(11,27,58,.12), 0 2px 6px rgba(11,27,58,.05); z-index: 60; overflow: hidden; animation: pop-in .14s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pop-head { padding: 12px 14px 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pop-head small { font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); }
.pop-list { max-height: min(60vh, 420px); overflow-y: auto; padding: 4px; }
.pop-box > a, .pop-list a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; }
.pop-box > a:not(.pop-foot) { margin: 4px 4px 0; }
.pop-box > a:hover, .pop-list a:hover { background: var(--panel); color: var(--ink); }
.pop-box a .ic, .pop-box a > svg { width: 14px; height: 14px; color: var(--ink-3); }
.pop-list .fav { width: 26px; height: 26px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; }
.pop-foot { display: block !important; text-align: center; padding: 10px !important; border-top: 1px solid var(--line); border-radius: 0 !important; color: var(--brand) !important; font-weight: 600 !important; font-size: var(--fs-sm); }
.pop-list a.note { align-items: flex-start; }
.note .pip { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 8px; background: var(--ink-4); }
.note .pip-bad { background: var(--c-red); } .note .pip-warn { background: var(--c-amber); } .note .pip-pending { background: var(--brand); } .note .pip-ok { background: var(--c-green); }
.note .nt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.note .nt b { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note .nt small { color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 26px 22px 22px; color: var(--ink-3); font-size: var(--fs-sm); }
.pop-empty svg { width: 22px; height: 22px; color: var(--c-green); margin-bottom: 4px; }
.pop-empty b { color: var(--ink); }
@media (max-width: 760px) {
  .topbar .pop { position: static; }
  .pop-box { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 6px); width: auto; }
}
@media (max-width: 960px) { .topbar .firmpick > summary.firm { display: inline-flex; padding: 6px 8px; } .topbar .firmpick > summary.firm span, .topbar .firmpick > summary.firm svg:last-child { display: none; } }
/* card headers: title shrinks, action link never wraps under it */
.card-head > :first-child { min-width: 0; }
.card-head > a, .card-head > .btn, .card-head > .actions { white-space: nowrap; flex: 0 0 auto; }
.card-head h3 .est, .card-head h2 .est { margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
/* segmented tabs with counts (Action Centre) */
.seg-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.seg-tabs a.active { background: none; font-weight: 600; }
.tcount { font-size: 10px; font-weight: 700; min-width: 18px; padding: 1px 6px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); text-align: center; }
.tcount.bad { background: var(--t-red); color: var(--c-red); }
/* empty states: calm, centred, one line and (optionally) one action */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 34px 16px 30px; color: var(--ink-3); font-size: var(--fs-sm); }
.empty b { color: var(--ink); font-weight: 600; max-width: 420px; }
.empty-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--t-green); color: var(--c-green); display: inline-flex; align-items: center; justify-content: center; }
.empty-ico svg { width: 18px; height: 18px; }
.ac-list .li { padding: 11px 4px; border-radius: var(--radius-sm); }
.ac-list .li:hover { background: var(--panel); }
/* network overview: four summary cards in one row on wide screens */
.grid-4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1280px) { .grid-4up { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-4up { grid-template-columns: 1fr; } }
/* wide data tables: one line per cell, scroll sideways inside the card rather than squashing names */
@media (min-width: 721px) { .nowrap-table th, .nowrap-table td { white-space: nowrap; } }
.firm-cell a { display: block; } .firm-cell .text-xs { display: block; margin-top: 1px; }
/* keyboard hints */
kbd { display: inline-block; font: 600 10px/1 var(--font); padding: 3px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--ink-3); vertical-align: 1px; margin-left: 4px; }
.btn kbd { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: inherit; }
.btn-outline kbd, .btn-link kbd { background: #fff; border-color: var(--line-2); color: var(--ink-3); }
@media (max-width: 960px) { kbd, .kbd-hint { display: none !important; } }
.btn-bad-text { color: var(--bad) !important; }
.btn-bad-text:hover { background: var(--bad-bg) !important; border-color: var(--bad) !important; }
/* keyboard focus: always visible, never the browser default */
[data-keyitem]:focus-visible, .li:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; background: var(--brand-soft); }
.queue-pos { margin-right: 6px; letter-spacing: .4px; }
/* busy + validation */
.spin { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-busy { opacity: .85; cursor: progress; }
.invalid, [aria-invalid="true"] { border-color: var(--bad) !important; box-shadow: 0 0 0 3px var(--bad-bg) !important; }
.field-error { color: var(--bad); font-size: var(--fs-xs); margin-top: 4px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .spin, .pop-box { animation: none !important; } }
/* ---------- "INTAI is thinking" (drop 12) ---------- */
.think-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
@media (max-width: 960px) { .think-grid { grid-template-columns: 1fr; } .skeleton-card { display: none; } }
.think-head { display: flex; gap: 12px; align-items: flex-start; }
.think-head h3 { margin: 0 0 2px; }
.think-time { margin-left: auto; font: 600 13px/1 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 4px; }
.pulse { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 rgba(10,91,255,.45); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(10,91,255,.45); } 70% { box-shadow: 0 0 0 10px rgba(10,91,255,0); } 100% { box-shadow: 0 0 0 0 rgba(10,91,255,0); } }
.think-card.slow .pulse { background: var(--c-amber); animation-name: pulse-amber; }
@keyframes pulse-amber { 0% { box-shadow: 0 0 0 0 rgba(224,138,0,.45); } 70% { box-shadow: 0 0 0 10px rgba(224,138,0,0); } 100% { box-shadow: 0 0 0 0 rgba(224,138,0,0); } }
.think-card.failed .pulse { background: var(--c-red); animation: none; }
.think-bar { height: 3px; background: var(--line); border-radius: 3px; margin: 14px 0 6px; overflow: hidden; }
.think-bar span { display: block; height: 100%; width: 8%; background: var(--brand); border-radius: 3px; transition: width .6s ease; }
.think-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.think-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; color: var(--ink-4); }
.think-steps li b { display: block; font-weight: 600; font-size: var(--fs-sm); color: inherit; }
.think-steps li small { display: block; font-size: var(--fs-xs); color: var(--ink-4); }
.think-steps .dot { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; position: relative; }
.think-steps li.done { color: var(--ink-2); } .think-steps li.done b { color: var(--ink); }
.think-steps li.done .dot { border-color: var(--c-green); background: var(--c-green); }
.think-steps li.done .dot::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.think-steps li.now { color: var(--ink); } .think-steps li.now b { color: var(--brand); }
.think-steps li.now .dot { border-color: var(--brand); border-right-color: transparent; animation: spin .9s linear infinite; }
.skeleton-card .sk { background: linear-gradient(90deg, var(--line) 25%, #f0f2f7 37%, var(--line) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
.sk-title { height: 18px; width: 55%; margin: 8px 0 14px; }
.sk-line { height: 10px; margin: 8px 0; width: 100%; } .sk-line.short { width: 72%; } .sk-line.shorter { width: 48%; }
.sk-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 12px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .pulse, .think-steps li.now .dot, .skeleton-card .sk { animation: none !important; } }
/* ---------- stop card: every halted run explains itself calmly (drop 12) ---------- */
.stop-card { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow); }
.stop-card h3 { margin: 1px 0 4px; font-size: var(--fs-lg); }
.stop-card p { color: var(--ink-2); }
.stop-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.stop-ico svg { width: 17px; height: 17px; }
.stop-bad .stop-ico { background: var(--t-red); color: var(--c-red); }
.stop-warn .stop-ico { background: var(--t-amber); color: var(--c-amber); }
.stop-neutral .stop-ico { background: var(--t-violet); color: var(--c-violet); }
.stop-body { min-width: 0; flex: 1; }
.stop-facts { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.stop-facts li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.stop-facts svg { width: 14px; height: 14px; color: var(--c-green); }
@media (max-width: 720px) { .stop-card { flex-direction: column; gap: 10px; padding: 16px; } .stop-facts { flex-direction: column; } }
.stepper .s.stop .n { background: var(--c-red-strong); } .stepper .s.stop b { color: var(--c-red); }
/* governance record labels: never split a word mid-way ("Classificatio n") */
table.kv td:first-child { word-break: normal; overflow-wrap: normal; hyphens: auto; width: 42%; }
/* ---------- charts: one system for columns + donuts, including zero data (drop 12) ---------- */
.cols { width: 100%; }
.cols-plot { position: relative; height: 128px; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; align-items: end; border-bottom: 1px solid var(--line); padding-top: 18px; }
.cols .col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cols .bar-v { display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; transition: height .4s ease; }
.cols .cap { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cols-axis { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; margin-top: 6px; }
.cols-axis span { text-align: center; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cols-empty-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cols-empty-msg span { background: #fff; border: 1px dashed var(--line-2); border-radius: 999px; padding: 6px 12px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.cols-empty .cols-plot { background-image: repeating-linear-gradient(0deg, transparent 0 31px, var(--line) 31px 32px); background-position: 0 -1px; opacity: .9; }
.viz-empty .hole { fill: var(--ink-4); }
.legend li.zero { color: var(--ink-3); } .legend li.zero .sw { opacity: .35; } .legend li.zero .v { color: var(--ink-3); }
.viz-note { font-size: var(--fs-xs); color: var(--ink-3); margin: 8px 0 0; max-width: 260px; }
.legend-wrap { min-width: 0; flex: 1 1 160px; }
.legend-wrap .legend { min-width: 0; width: 100%; }
.legend .sw { border-radius: 2px; }
/* report screens: long list left, the two small charts stacked right — no dead space under short cards */
.split-report { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 960px) { .split-report { grid-template-columns: 1fr; } }
.split-report .bar { grid-template-columns: minmax(150px, 1.4fr) 2fr 28px; }
.bar .track, .bar .fill { border-radius: 4px; }
.bar .n { text-align: right; font-variant-numeric: tabular-nums; }
/* data tables: numbers right-aligned in tabular figures, rows vertically centred, quiet empty rows */
table.data th.num, table.data td.num, table td.num, table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.responsive td, table.data td { vertical-align: middle; }
td.td-empty { color: var(--ink-3); text-align: center; padding: 22px 8px !important; font-size: var(--fs-sm); }
.wf-cell strong { display: block; color: var(--ink); font-weight: 600; }
.wf-meta { display: block; font-size: 10.5px; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; font-weight: 600; margin-top: 1px; }
.bar.mini { padding: 0; border: 0; grid-template-columns: minmax(70px, 110px) 26px; gap: 8px; }
table.data th { white-space: nowrap; }
table.data td, table.data th { padding-top: 10px; padding-bottom: 10px; }
.nowrap { white-space: nowrap; }

/* ---------- custom select (pointer devices): the closed box AND the open list are ours (drop 12) ---------- */
.cselect { position: relative; width: 100%; }
.cselect-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); }
.cselect-btn { width: 100%; height: 38px; display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: var(--fs-base); color: var(--ink); background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%234b5163' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6l5 5 5-5'/></svg>") no-repeat right 12px center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 36px 8px 12px; cursor: pointer; box-shadow: 0 1px 1px rgba(11,27,58,.03); transition: border-color .12s, box-shadow .12s; }
.cselect-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-btn.placeholder span { color: var(--ink-4); }
.cselect-btn:hover { border-color: #b9c0cf; }
.cselect-btn:focus-visible, .cselect.open .cselect-btn { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cselect-btn:disabled { background-color: var(--panel); color: var(--ink-3); cursor: not-allowed; }
.cselect-btn[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.cselect-list { position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 6px); min-width: 200px; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(11,27,58,.12), 0 2px 6px rgba(11,27,58,.05); animation: pop-in .12s ease-out; }
.cselect-list.up { top: auto; bottom: calc(100% + 6px); }
.cselect-list:focus { outline: none; }
.cselect-list li { padding: 8px 10px 8px 30px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink); cursor: pointer; position: relative; line-height: 1.35; }
.cselect-list li.active { background: var(--panel); }
.cselect-list li[aria-selected="true"] { font-weight: 600; color: var(--brand); }
.cselect-list li[aria-selected="true"]::before { content: ''; position: absolute; left: 11px; top: 50%; width: 5px; height: 9px; margin-top: -6px; border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cselect-list li[aria-disabled="true"] { color: var(--ink-4); cursor: not-allowed; }
.cselect-list li.grp { padding: 8px 10px 4px; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4); font-weight: 700; cursor: default; }
.firmbar .switch .cselect { width: auto; min-width: 240px; }
.firmbar .switch .cselect-btn { height: 32px; font-weight: 600; }
.cselect.inline { display: inline-block; width: auto; flex: 0 0 auto; vertical-align: middle; }
.cselect.inline .cselect-btn { width: auto; min-width: 100%; }
.kbd-group { padding-top: 12px !important; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--ink-4) !important; }
/* working-context switcher (one sign-in, explicit role context) */
.topbar .ctxpick > summary.ctx { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 10px; background: var(--brand-soft); color: var(--brand); font-size: var(--fs-sm); white-space: nowrap; }
.topbar .ctxpick > summary.ctx .ctx-k { color: var(--ink-3); font-weight: 500; }
.topbar .ctxpick > summary.ctx b { font-weight: 700; }
.topbar .ctxpick > summary.ctx svg { width: 11px; height: 11px; transform: rotate(90deg); }
.ctx-opt { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--ink); }
.ctx-opt:hover, .ctx-opt:focus-visible { background: var(--panel); outline: none; }
.ctx-opt span { flex: 1; display: flex; flex-direction: column; }
.ctx-opt b { font-size: var(--fs-sm); font-weight: 600; } .ctx-opt small { font-size: var(--fs-xs); color: var(--ink-3); }
.ctx-opt.on b { color: var(--brand); } .ctx-opt svg { width: 16px; height: 16px; color: var(--brand); }
@media (max-width: 960px) { .topbar .ctxpick > summary.ctx .ctx-k { display: none; } }
/* ---------- people administration (drop 13) ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.filterbar .fb-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.filterbar .fb-search svg { position: absolute; left: 11px; top: 12px; width: 14px; height: 14px; color: var(--ink-4); }
.filterbar .fb-search input { padding-left: 32px; }
.filterbar select, .filterbar .cselect { width: auto; min-width: 160px; flex: 0 0 auto; }
.sub-h { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-3); font-weight: 700; }
.cell-sub { display: block; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 400; }
.person { display: flex; align-items: center; gap: 10px; color: inherit; }
.person strong { color: var(--ink); }
.av-sm { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.av-lg { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
tr[data-href] { cursor: pointer; } tr[data-href]:hover td { background: var(--panel); }
.person-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 12px; }
.person-head h1 { margin: 0; } .person-head p { color: var(--ink-3); }
.person-tags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs { font-size: var(--fs-sm); color: var(--ink-3); display: flex; gap: 6px; } .crumbs a { color: var(--ink-3); } .crumbs a:hover { color: var(--brand); }
.action-rows { display: flex; flex-direction: column; }
.action-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.action-row:last-child { border-bottom: 0; }
.action-row > div { flex: 1; } .action-row b { display: block; color: var(--ink); font-size: var(--fs-sm); } .action-row small { color: var(--ink-3); font-size: var(--fs-xs); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 12px 8px; font-size: var(--fs-sm); color: var(--ink); }
.timeline li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #fff; }
.timeline small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 12px; align-items: end; }
.grid-form .form-actions { display: flex; align-items: flex-end; }
.inline-form { display: flex; gap: 8px; align-items: center; } .inline-form select, .inline-form .cselect { max-width: 240px; }
.copyline { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .copyline code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 12px; }
.stat.link { color: inherit; transition: box-shadow .15s, transform .15s; } .stat.link:hover { box-shadow: var(--shadow-2); }
/* pager */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px 0; font-size: var(--fs-sm); color: var(--ink-3); flex-wrap: wrap; }
.pager-links { display: inline-flex; gap: 4px; align-items: center; }
.pager-links a, .pager-links span { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.pager-links a:hover { border-color: var(--line-2); color: var(--brand); }
.pager-links .cur { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager-links .off { color: var(--ink-4); background: var(--panel); } .pager-links .gap { border: 0; background: none; min-width: 16px; padding: 0; }
.btn-bad { background: var(--bad); border-color: var(--bad); color: #fff; }
/* onboarding progress dots (Organisations). Named .stepdots — the run form's numbered .steps must never inherit these. */
.stepdots { display: inline-flex; gap: 3px; vertical-align: middle; }
.stepdots .st { width: 10px; height: 10px; border-radius: 3px; background: var(--line); }
.stepdots .st.done { background: var(--c-green); }
.stat.link.on { box-shadow: 0 0 0 2px var(--brand) inset; }

.modal textarea { min-height: 72px; }
@media (max-width: 1500px) { .topbar .ctxpick > summary.ctx .ctx-k { display: none; } }

/* drop 13 — dense management tables: one consistent row rhythm for long lists */
table.dense th, table.dense td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
table.dense th { font-size: 11.5px; letter-spacing: .02em; }
table.dense .tag { font-size: 11px; }
th.sortable a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
th.sortable a[aria-sort]::after, th.sortable a.on::after { content: '↓'; font-size: 10px; color: var(--brand); }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.check-inline input { width: 16px; height: 16px; margin: 0; }
/* long custom selects: filter box sits on the list's edge */
.cselect-filter { position: absolute; z-index: 71; left: 0; right: 0; top: calc(100% + 6px); min-width: 200px; height: 38px; padding: 0 12px; border: 1px solid var(--brand); border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 3px rgba(10,91,255,.12); font: inherit; font-size: var(--fs-sm); }
.cselect-filter.up { top: auto; bottom: calc(100% + 6px); }
.cselect.has-filter .cselect-list { top: calc(100% + 50px); }
.cselect.has-filter .cselect-list.up { top: auto; bottom: calc(100% + 50px); }
.cselect-list li.none { padding: 10px 12px; color: var(--ink-3); font-size: var(--fs-sm); }
/* adviser: previous / next through your own drafts */
.draftnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 14px; background: var(--surface-2, #f6f8fc); border: 1px solid var(--line); border-radius: var(--radius); }
.draftnav-links { display: inline-flex; gap: 8px; }
.draftnav [aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* stat cards without an icon stack label over value (no empty icon column) */
.stat:not(:has(> .ico)) { grid-template-columns: 1fr; }
/* coloured avatars keep white initials (the soft avatar is only for uncoloured ones) */
.av-sm[style*="background"] { color: #fff; }
/* filter rows: the search box never swallows the whole row */
.filterbar > input[type=search] { flex: 1 1 240px; max-width: 360px; width: auto; }
table.dense td:first-child { min-width: 170px; }

/* drop 14 — bulk invite, teams, training */
.wizard { display: flex; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; flex-wrap: wrap; }
.wizard li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-3); padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.wizard li span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--bg, #f5f6fa); color: var(--ink-3); }
.wizard li.on { color: var(--ink); border-color: var(--brand); } .wizard li.on span { background: var(--brand); color: #fff; }
.wizard li.done span { background: var(--ok-bg); color: var(--ok); }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.label-row > label { margin: 0; }
.label-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.file-btn { cursor: pointer; position: relative; }
.file-btn:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; }
.field .hint { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; }
tr.row-bad td { background: #fff8f7; }
.bulk-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sub-h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sub-h-row .inline-form { margin: 0; gap: 6px; align-items: center; }
.team-list, .training-list { display: flex; flex-direction: column; }
.team-row, .training-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.team-row:first-child, .training-row:first-child { border-top: 0; }
.tm-main, .tr-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-main small, .tr-main small { color: var(--ink-3); font-size: var(--fs-xs); }
.tm-more > summary { list-style: none; } .tm-more > summary::-webkit-details-marker { display: none; }
.tm-more[open] { flex-basis: 100%; }
.tr-actions { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tr-actions form { margin: 0; }
.tr-actions .inline-form { gap: 6px; }
.tr-actions input[type=date] { width: auto; height: 32px; padding: 4px 8px; font-size: var(--fs-sm); }
.readiness { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.readiness li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.readiness li:first-child { border-top: 0; }
.readiness .dot { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg, #f5f6fa); color: var(--ink-3); font-size: 11px; font-weight: 700; }
.readiness li.done .dot { background: var(--ok-bg); color: var(--ok); }
.readiness li.done .dot svg { width: 13px; height: 13px; }
.readiness .rl { flex: 1; min-width: 0; } .readiness .rl small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.readiness li.done .rl b { font-weight: 500; color: var(--ink-2); }
.people-mini { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); color: var(--ink-3); } .people-mini b { color: var(--ink); }
/* grid columns never grow past the viewport because of one wide child (tables scroll inside .table-wrap instead) */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .stack > * { min-width: 0; }
.tr-main > .tag { align-self: flex-start; }
.team-row .tm-more .inline-form { flex-wrap: wrap; }
.team-row .tm-more input { flex: 1 1 160px; min-width: 0; width: auto; }
@media (max-width: 720px) {
  .tr-actions .inline-form { flex: 1 1 100%; }
  .tr-actions .inline-form input[type=date] { flex: 1 1 auto; }
  .bulk-actions > form, .bulk-actions > form .btn { width: 100%; }
  .wizard li { flex: 1 1 0; justify-content: center; padding-right: 8px; font-size: 12px; }
  .sub-h-row .inline-form { flex-wrap: wrap; }
  .label-row { align-items: flex-start; }
}
.check-block { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.check-block input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 16px; }
.check-block small { display: block; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }
.submit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
textarea.mono[wrap=off] { white-space: pre; overflow-x: auto; }
@media (max-width: 720px) {
  /* people lists as compact cards: who, then state chips — details live on the person's page */
  table.compact-cards tr { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 12px; }
  table.compact-cards td { padding: 0 !important; }
  table.compact-cards td[data-l]::before { display: none; }
  table.compact-cards td:first-child { flex: 1 1 100%; }
  table.compact-cards td.text-small { flex: 1 1 100%; color: var(--ink-3); font-size: var(--fs-xs); }
  table.compact-cards td.m-hide { display: none; }
  table.compact-cards td.text-right { flex: 1 1 100%; }
  .filterbar { display: grid; grid-template-columns: 1fr 1fr; }
  .filterbar .fb-search, .filterbar > input[type=search] { grid-column: 1 / -1; max-width: none; }
  .filterbar select, .filterbar .cselect { min-width: 0; width: 100%; }
  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .stats .stat { padding: 12px; gap: 2px 10px; }
  .stats .stat .sub { display: none; }
  .stats .stat .value { font-size: 20px; }
  .stats .stat .ico { width: 30px; height: 30px; }
  .filterbar > button { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  /* short values in mobile cards sit on one line with their label (label left, value right) instead of two stacked lines */
  table.responsive:not(.compact-cards) td.num[data-l], table.responsive:not(.compact-cards) td.kvm[data-l] { display: flex; justify-content: flex-end; align-items: center; gap: 4px; flex-wrap: wrap; text-align: right; padding-top: 4px; padding-bottom: 4px; }
  table.responsive:not(.compact-cards) td.num[data-l]::before, table.responsive:not(.compact-cards) td.kvm[data-l]::before { display: inline; flex: 0 0 auto; text-align: left; margin-right: auto; padding-right: 12px; }
  .team-row .tm-main { flex: 1 1 0; }
}
/* links inside running text are underlined, not colour-only (WCAG 1.4.1) */
p.text-xs a:not(.btn):not(.tag), p.text-muted a:not(.btn):not(.tag), .hint a, .callout a:not(.btn), [data-onboarding-checklist] a, [data-role-switch] .btn-link { text-decoration: underline; text-underline-offset: 2px; }
/* firm search pickers (large networks) */
.pop-search { position: relative; padding: 6px 8px 4px; }
.pop-search svg { position: absolute; left: 18px; top: 16px; width: 13px; height: 13px; color: var(--ink-4); }
.pop-search input { height: 34px; padding-left: 30px; font-size: var(--fs-sm); }
.firmfield, .switch-search { position: relative; display: inline-block; min-width: 240px; }
.firmfield input[type=search], .switch-search input { width: 100%; }
.switch-search input { height: 32px; font-size: var(--fs-sm); }
.fs-results { position: absolute; z-index: 75; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; }
.fs-results[hidden] { display: none; }
.fs-results a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
.fs-results a:hover, .fs-results a:focus { background: var(--panel); outline: none; }
.fs-results a small { color: var(--ink-3); margin-left: 4px; }
.fs-results .fav { width: 24px; height: 24px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; }
.fs-none { padding: 10px; color: var(--ink-3); font-size: var(--fs-sm); }
@media (max-width: 720px) { .firmfield, .switch-search { min-width: 0; width: 100%; } }
/* team / branch chips on firm screens */
.teamchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 14px; }
.teamchips .tc-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.teamchips .tc-label svg { width: 13px; height: 13px; }
.teamchips .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; }
.teamchips .chip:hover { border-color: var(--brand); color: var(--brand); }
.teamchips .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.teamchips .chip .n { font-size: 11px; color: var(--ink-3); } .teamchips .chip.on .n { color: rgba(255,255,255,.8); }
.teamnote { margin-top: -6px; }
@media (max-width: 720px) { .teamchips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .teamchips .chip { flex: 0 0 auto; } }


/* ---------- workflow input screen (ASK) — the approved layout: one column of numbered steps, generous spacing ---------- */
.run-crumbs { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 10px; }
.run-crumbs a { color: var(--brand); } .run-crumbs span[aria-current] { color: var(--ink-2); }
.run-head h1 { font-size: 34px; letter-spacing: -.9px; margin-bottom: 10px; }
.run-head p { font-size: var(--fs-md); }
.run-split { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 24px; }
.run-card { padding: 28px 30px 30px; }
.run-steps { list-style: none; margin: 0; padding: 0; counter-reset: rstep; }
.rstep { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 0 0 28px; }
.rstep:last-child { padding-bottom: 0; }
.rnum { counter-increment: rstep; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); border: 1px solid #cfe0ff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: -3px; }
.rnum::before { content: counter(rstep); }
.rbody { min-width: 0; }
.rtitle { display: block; font-size: 17px; font-weight: 600; color: var(--navy); margin: 0 0 4px; line-height: 1.35; }
.rtitle .opt { font-weight: 400; color: var(--ink-3); font-size: var(--fs-base); }
.rhelp { margin: 0 0 14px; color: var(--ink-3); font-size: var(--fs-base); line-height: 1.6; }
.rnote { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin: 8px 0 10px; line-height: 1.55; }
textarea.rtext { min-height: 176px; padding: 14px 16px; line-height: 1.65; font-size: var(--fs-base); }
.with-ico { position: relative; }
.with-ico > svg { position: absolute; left: 13px; top: 12px; width: 15px; height: 15px; color: var(--ink-3); z-index: 2; pointer-events: none; }
.with-ico > input, .with-ico > select, .with-ico .cselect-btn { padding-left: 38px; }
.with-ico .cselect { width: 100%; }
.run-dev { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: center; background: #fffaf0; border: 1px solid #f3e2bd; border-radius: var(--radius); padding: 14px 16px; margin: 0 0 20px; font-size: var(--fs-sm); }
.run-dev label { margin: 0 0 2px; font-size: var(--fs-sm); }
.run-dev .rnote { margin: 0; }
.run-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.run-actions .btn-lg { min-width: 132px; justify-content: center; }
.gov-card { background: var(--t-blue); padding: 20px 22px; }
.gov-card > summary { list-style: none; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--brand); cursor: default; }
.gov-card > summary::-webkit-details-marker { display: none; }
.gov-card > summary::before { display: none !important; }
.gov-card > summary strong { color: var(--navy); font-size: var(--fs-md); }
.gov-card > summary svg { width: 17px; height: 17px; }
.usage-card { padding: 18px 22px; }
.usage-head { display: flex; align-items: center; gap: 8px; color: var(--brand); margin-bottom: 8px; } .usage-head strong { color: var(--navy); font-size: var(--fs-md); } .usage-head svg { width: 17px; height: 17px; }
.usage { list-style: none; margin: 0; padding: 0; font-size: var(--fs-base); }
.usage li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; line-height: 1.5; }
.usage li svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.usage li.ok svg { color: var(--c-green); } .usage li.no svg { color: var(--c-red); }
@media (max-width: 960px) { .run-split { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .run-head h1 { font-size: 27px; }
  .run-card { padding: 20px 16px 22px; }
  .rstep { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding-bottom: 24px; }
  .rnum { width: 28px; height: 28px; font-size: 12.5px; }
  .rtitle { font-size: 16px; }
  .run-dev { grid-template-columns: 1fr; gap: 10px; }
  .run-actions { flex-direction: column; } .run-actions .btn-lg { width: 100%; }
  .gov-card > summary { cursor: pointer; margin: 0; justify-content: flex-start; }
  .gov-card > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border: solid var(--ink-3); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .15s; }
  .gov-card[open] > summary::after { transform: rotate(-135deg); }
  .gov-card[open] > summary { margin-bottom: 6px; }
}
/* ASK · DO · CHECK stepper — the approved size (larger, clearer) */
.stepper { gap: 12px; }
.stepper .s { min-width: 88px; }
.stepper .s .n { width: 30px; height: 30px; font-size: 13px; }
.stepper .s b { font-size: 11.5px; margin-top: 7px; }
.stepper .s small { font-size: 11px; margin-top: 1px; }
.stepper .arr { margin-top: 6px; }
.run-actions .btn-lg { height: 46px; font-size: var(--fs-md); padding: 0 22px; }
/* MFA test mode (local only) — impossible to miss */
.testmode-strip { display: flex; align-items: center; gap: 8px; padding: 7px 24px; background: #fff4e0; border-bottom: 1px solid #f3dcae; color: #6b4200; font-size: var(--fs-sm); }
.testmode-strip svg { width: 14px; height: 14px; flex: 0 0 14px; }
.callout.testmode { margin-bottom: 16px; font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- account set-up (invitation → password → authenticator): the sign-in shell, one clear column of steps ---------- */
.auth.setup .auth-side h1 { font-size: 40px; }
.setup-out { margin: 0; }
.setup-progress { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 460px; }
.setup-progress li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; color: var(--ink-3); }
.setup-progress .dot { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--ink-3); }
.setup-progress .dot svg { width: 14px; height: 14px; }
.setup-progress li.on .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.setup-progress li.done .dot { background: var(--ok-bg); border-color: #c7e9d6; color: var(--ok); }
.setup-progress b { display: block; color: var(--navy); font-weight: 600; font-size: var(--fs-base); line-height: 1.4; }
.setup-progress small { display: block; font-size: var(--fs-sm); line-height: 1.5; margin-top: 2px; }
.setup-progress li:not(.on):not(.done) b { color: var(--ink-3); }
.auth-form .field-hint { display: block; margin-top: 7px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.mfa-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 22px; }
.mfa-steps > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
.mfa-steps .n { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); border: 1px solid #cfe0ff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; }
.mfa-steps b { display: block; color: var(--navy); font-size: 15px; font-weight: 600; line-height: 1.4; }
.mfa-steps small { display: block; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.55; margin-top: 3px; }
.qr-box { margin: 14px 0 10px; width: 196px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.qr-box svg { display: block; width: 100%; height: auto; }
.mfa-key { margin-top: 6px; }
.mfa-key > summary { font-size: var(--fs-sm); color: var(--brand); cursor: pointer; }
.mfa-key .key-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.mfa-key code { font-size: 14px; letter-spacing: 1.5px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; color: var(--ink); word-break: break-all; }
.mfa-form { margin-top: 12px; display: grid; gap: 12px; }
.auth-form .code-input { height: 52px; font-size: 24px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; padding: 8px 12px; }
.auth-form .code-input::placeholder { letter-spacing: 6px; color: var(--ink-4); }
.auth-form .btn-lg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; font-size: 14px; }
@media (max-width: 1000px) { .auth.setup .auth-side h1 { font-size: 30px; } .setup-progress { margin-top: 18px; } .auth.setup .auth-side { padding-bottom: 20px; } }
@media (max-width: 720px) {
  .auth.setup .auth-side p, .auth.setup .setup-progress { display: none; }
  .auth.setup .auth-side { padding-bottom: 6px; border-bottom: 0; }
  .auth.setup .auth-side h1 { font-size: 24px; margin-bottom: 0; }
  .auth.setup .auth-form { padding-left: 0; padding-right: 0; }
}
.prof-settings { margin-top: 6px; } .prof-settings > summary { font-size: var(--fs-sm); color: var(--brand); cursor: pointer; }
.prof-settings .grid-form { min-width: 280px; }

/* drop 17 — network branches roll-up */
.split-report.split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 960px) { .split-report.split-even { grid-template-columns: 1fr; } }
.mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mini-stats > div { background: var(--surface-2, #f6f8fb); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-stats .k { font-size: 12px; color: var(--ink-3); }
.mini-stats b { font-size: 20px; line-height: 1.2; color: var(--ink); }
.mini-stats small { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
@media (max-width: 700px) { .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* drop 17 — responsive tables never exceed the card width on a phone; long ids wrap; settings stack */
@media (max-width: 720px) {
  table.responsive, table.responsive tbody { display: block; width: 100%; }
  table.responsive td { overflow-wrap: anywhere; min-width: 0; }
  table.responsive td .inline-form { flex-wrap: wrap; }
  table.responsive td .inline-form input[type=text] { width: 100% !important; flex: 1 1 140px; }
  .prof-settings .grid-form { min-width: 0; grid-template-columns: 1fr; }
}
@media (max-width: 720px) { table.dense td:first-child { min-width: 120px; } }

/* 0.4.0 billing strip (reuses the test-mode strip) */
.billing-strip a { color: inherit; font-weight: 700; text-decoration: underline; }
.billing-strip.billing-trial { background: var(--t-blue); color: var(--c-blue); }
.billing-strip.billing-pending_onboarding { background: var(--t-violet); color: var(--c-violet); }
.billing-strip.billing-past_due, .billing-strip.billing-trial_expired { background: var(--t-amber); color: var(--c-amber); }
.billing-strip.billing-suspended_billing, .billing-strip.billing-cancelled { background: var(--t-red); color: var(--c-red); }
.auth-form label.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; font-weight: 500; }
.auth-form label.check input { margin-top: 4px; }
.auth-form .legal a { text-decoration: underline; }

/* 0.5.0 — contract acceptance boxes sit inside the checkout .inline-form (whose text-input height must not apply to them) */
[data-contract-accept] input[type=checkbox] { width: 18px; height: 18px; padding: 0; margin-top: 2px; }
[data-contract-accept] .check { align-items: flex-start; }

/* ======================================================================================================================
   0.5.1 — ONE APPLICATION-WIDE LAYOUT SYSTEM (Jamie, 29 Sept: "fix the system, then let the pages inherit it").
   Measured baseline (verification/layout-audit.mts): 68 of 105 block gaps were already 24 px, which is kept as the section
   gap. What changes is that every page now gets it from here instead of page-specific margins (Billing had none: F79).
   The values keep today's density; nothing is re-coloured or re-styled.
   ====================================================================================================================== */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --page-pad: var(--space-6);        /* content column side/top padding (desktop) */
  --section-gap: var(--space-6);     /* between top-level blocks of a page */
  --grid-gap: var(--space-3);        /* between cards in a grid row (12px — as the Workflows and Adviser detail reference screens) */
  --card-pad-y: 18px; --card-pad-x: var(--space-5);
  --row-pad-y: 14px;                 /* list / checklist rows */
  --control-gap: var(--space-2);     /* icon ↔ control, control ↔ control */
  --nav-row-h: 36px; --nav-row-gap: 2px; --nav-icon: 16px; --nav-icon-gap: 12px; --nav-pad-x: 10px;
}
/* Page stack: every top-level block of a page is separated by exactly one section gap (margins of the blocks themselves no
   longer add to it). Elements that belong to the block below them (a label, tabs, team chips, breadcrumbs, the journey bar)
   stay attached with their own, smaller distance. */
.content { display: flex; flex-direction: column; gap: var(--section-gap); padding: var(--page-pad); }
.content > * { margin-top: 0; margin-bottom: 0; min-width: 0; max-width: 100%; }
.content > .sub-h { margin-bottom: calc(var(--space-2) - var(--section-gap)); }
.content > .tabs { margin-bottom: calc(var(--space-3) - var(--section-gap)); }
.content > .teamchips { margin-top: calc(-1 * var(--space-1)); margin-bottom: calc(var(--space-3) - var(--section-gap)); }
.content > .crumbs, .content > nav.crumbs { margin-bottom: calc(var(--space-2) - var(--section-gap)); }
.content > .wizard, .content > .journey { margin-bottom: calc(var(--space-4) - var(--section-gap)); }
.content > .page-head { margin-bottom: 0; }
@media (max-width: 960px) { .content { --page-pad: var(--space-4); --section-gap: var(--space-5); } }
.grid, .grid-2, .grid-3, .stats { gap: var(--grid-gap); }
.card { padding: var(--card-pad-y) var(--card-pad-x); }
/* A lone card on a page can hold a readable form without being capped: fields keep a comfortable measure. */
.form-measure { max-width: 640px; }

/* Header aligned to the page grid: the topbar's left edge matches the page content (24 px), the sidebar's content matches
   the navigation icons (20 px from the edge). */
@media (min-width: 961px) { .topbar { padding: 0 var(--page-pad); } }
.sidebar .brand { padding-left: calc(var(--nav-pad-x) + 10px); padding-right: calc(var(--nav-pad-x) + 10px); }

/* Navigation: exact, integer geometry — one row height, one icon box, one icon-to-label gap, one gap between rows. */
.snav { display: flex; flex-direction: column; gap: var(--nav-row-gap); padding: var(--space-3) var(--nav-pad-x); }
.snav a { height: var(--nav-row-h); margin: 0; padding: 0 var(--nav-pad-x); gap: var(--nav-icon-gap); line-height: 1; }
.snav a .ic { width: var(--nav-icon); height: var(--nav-icon); flex: 0 0 var(--nav-icon); }
.snav .group { padding: var(--space-4) var(--nav-pad-x) var(--space-1); }
.snav .group:first-child { padding-top: var(--space-1); }
.snav a.active { box-shadow: inset 0 0 0 1px rgba(10, 91, 255, .10); }

/* Journey bar (sign-up → start using INTAI): a progress indicator, not buttons — standard corners, no pill, no hover. */
.journey { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.journey li { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px 6px 8px; font-size: var(--fs-sm); color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); cursor: default; }
.journey li .n { width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--neutral-bg); color: var(--ink-3); }
.journey li.done .n { background: var(--ok-bg); color: var(--ok); }
.journey li.on { color: var(--ink); border-color: var(--brand); font-weight: 600; }
.journey li.on .n { background: var(--brand); color: #fff; }
.auth-form .journey { margin-bottom: var(--space-4); }

/* Field with a leading icon, inside the app (the sign-in pages have their own version). */
.field-icon { display: flex; align-items: center; gap: var(--control-gap); }
.field-icon > svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ink-4); }
.field-icon > input { width: 120px; }

/* Checklist (Set up INTAI): fixed columns so every status, title, badge and action shares one alignment line. */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px 180px; align-items: center; column-gap: var(--space-4); padding: var(--row-pad-y) 0; border-bottom: 1px solid var(--line); min-height: 64px; }
.checklist > li:last-child { border-bottom: 0; }
.checklist .st { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.checklist .st.done { background: var(--t-green); color: var(--c-green); }
.checklist .st.todo { background: var(--t-blue); color: var(--c-blue); }
.checklist .st.opt { background: var(--neutral-bg); color: var(--ink-3); }
.checklist .tt { min-width: 0; }
.checklist .tt strong { display: block; color: var(--ink); font-size: var(--fs-md); }
.checklist .tt .d { display: block; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; max-width: 760px; }
.checklist .tt .d a { text-decoration: underline; }
.checklist .bd { justify-self: start; }
.checklist .ac { justify-self: end; display: flex; justify-content: flex-end; }
.checklist .ac .btn, .checklist .ac form { margin: 0; }
.checklist .ac .done-note { font-size: var(--fs-sm); color: var(--ink-3); }
@media (max-width: 960px) { .checklist > li { grid-template-columns: 28px minmax(0, 1fr); row-gap: var(--space-2); } .checklist .bd, .checklist .ac { grid-column: 2; justify-self: start; } }

/* Price summary (Billing): money in one right-aligned column of a compact block; the annual total is the emphasised last line. */
.price-summary { width: 100%; max-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-summary td { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base); color: var(--ink-2); }
.price-summary td:last-child { text-align: right; color: var(--ink); white-space: nowrap; }
.price-summary tr.total td { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 12px; font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.price-summary tr.total td:first-child { font-size: var(--fs-base); }

/* Form stack: a form's parts in one column with the section rhythm; the primary action sits at the start under them. */
.form-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.form-stack > * { margin: 0; }
.form-stack > .full { align-self: stretch; }
.form-stack .actions-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Sign-in side panel: the five pillars align to the text edge above them (F73). Shorter sign-in pages (set-up, check your inbox,
   authenticator) sit at a fixed distance under the logo instead of floating to the middle of a tall screen (F74). */
.auth-side .pillars { gap: var(--space-4); }
.auth-side .pillar { text-align: left; width: 104px; }
.auth-side .pillar .pi { margin: 0 0 8px; }
.auth.setup .auth-side, .auth.setup .auth-form, .auth.compact .auth-side, .auth.compact .auth-form { justify-content: flex-start; align-self: start; padding-top: 72px; }
/* 0.5.1: Reports — the grid under the (deliberately asymmetric) split repeats its column edge, so both rows share one alignment line */
.split-report:not(.split-even) + .grid-2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 960px) { .split-report:not(.split-even) + .grid-2 { grid-template-columns: 1fr; } }
.split-report { gap: var(--grid-gap); }
/* 0.5.1: screen-reader-only labels inside a scrolling table are clipped by that table, not by the page (tablet overflow on People / Onboarding) */
.table-wrap { position: relative; }
/* 0.5.1: tablet — long stat values (e.g. "Subscription active · setting up") stay to two lines */
@media (min-width: 641px) and (max-width: 1100px) { .stats .stat .value { font-size: 20px; letter-spacing: -.3px; } }

/* ============================================================================================================================
   0.5.1.1 — ONE GEOMETRY (Jamie, 30 Sept): the content fills the space beside the sidebar with EQUAL gutters left and right
   (no left-pinned max-width leaving dead space on the right), and ONE gap is used everywhere — page gutter, space between
   stacked sections, space between cards in a row, between stat tiles and between workflow tiles — so the grid is square.
   Long text keeps its own readable measure (.page-head p, .checklist .d, .form-measure), so full width never means long lines.
   ============================================================================================================================ */
:root { --gap: 20px; --page-pad: var(--gap); --section-gap: var(--gap); --grid-gap: var(--gap); }
.content { max-width: none; }
.grid, .grid-2, .grid-3, .grid-4, .stats, .stack, .split-report, .launcher-grid, .launcher-cards { gap: var(--gap) !important; }
.grid-2, .grid-3 { align-items: stretch; }                       /* cards side by side share one height */
.grid-2 > .card, .grid-3 > .card, .launcher-cards > .card { height: 100%; }
.grid-2 > details.card { height: auto; align-self: start; }      /* an expandable panel never stretches its neighbour */
.wf-locked { cursor: default; opacity: .72; box-shadow: none; }
.wf-locked:hover { transform: none; box-shadow: none; }
@media (max-width: 960px) { :root { --gap: 16px; } }
/* 0.5.1.1: ASK → DO → CHECK in a page header sits centred against the intro (not pinned to the bottom with empty space above),
   three equal columns so the arrows are evenly spaced; below 1100px it takes the full row under the intro, steps sharing the width. */
.page-head .stepper { align-self: center; gap: var(--space-2); }
.page-head .stepper .s { width: 136px; min-width: 0; flex: 0 0 136px; }
.page-head .stepper .s small { line-height: 1.35; margin-top: 2px; }
.page-head .stepper .arr { margin-top: 7px; flex: 0 0 auto; }
@media (max-width: 1100px) {
  .page-head .stepper { flex: 1 1 100%; justify-content: space-between; }
  .page-head .stepper .s { flex: 1 1 0; width: auto; }
}
/* 0.5.1.1: workflow tiles — 4 across on desktop, 2 on tablet, 1 on phone; the engine label never pushes past the tile */
@media (min-width: 721px) and (max-width: 1100px) { .launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wf > div { min-width: 0; }
.wf .engine-tag { display: inline-block; max-width: 100%; white-space: normal; line-height: 1.35; }
/* 0.5.1.1: Training and Settings pinned to the bottom of the sidebar (as in the Anthropic console): daily work first, occasional below */
.sidebar .snav:not(.snav-foot) { flex: 1 1 auto; }
.sidebar .snav-foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding-top: var(--space-3); padding-bottom: var(--space-4); overflow: visible; }
/* 0.5.1.1: equal heights only where every item in the row is a single card; a row that pairs a card with a STACK of cards keeps
   natural heights (otherwise the lone card becomes a tall empty box) */
.grid-2:has(> .stack), .grid-3:has(> .stack), .grid-2:has(> details) { align-items: start; }
.grid-2:has(> .stack) > .card, .grid-3:has(> .stack) > .card { height: auto; }
/* 0.5.1.1: narrow (form) pages keep their readable 860px measure but sit centred, with equal space either side */
.content.narrow, .content > .content.narrow { margin-left: auto; margin-right: auto; width: 100%; }

/* ---------- 0.5.1.5: review queue, discarded response, drill context ---------- */
.firmbar-ctx { color: var(--ink-3); font-size: var(--fs-xs, 12px); } .firmbar-ctx b { color: var(--navy); font-weight: 600; }
.rq-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; }
.rq-resolve > summary { list-style: none; display: inline-flex; cursor: pointer; } .rq-resolve > summary::-webkit-details-marker { display: none; }
.rq-resolve[open] { min-width: min(340px, 100%); }
.rq-resolve textarea { width: 100%; }
details.discarded { border-style: dashed; background: var(--bg-2, #f6f7f9); }
details.discarded > summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.out-discarded { opacity: .7; text-decoration: none; filter: grayscale(1); border-left: 3px solid var(--line); padding-left: 12px; }
@media (max-width: 720px) { .rq-resolve[open] { min-width: 0; } #exceptions td.text-right { text-align: left; } }
/* 0.5.1.5 a11y (axe, browser gate): stronger text where it was marginal */
.cols-empty-msg span { color: var(--ink-2); }
.stepper .s.stop b { color: var(--c-red-strong); }
p[data-evidence-not-queue] a { text-decoration: underline; }
.decl-why { display: block; margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--line-2); background: var(--bg-2, #f6f7f9); border-radius: 6px; }
.decl-why ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- 0.5.2 connection card ---------- */
.conn-now { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.conn-connect { border-top: 1px solid var(--line); padding-top: 14px; }
.conn-opt { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: var(--white); }
.conn-opt > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.conn-opt[open] > summary { margin-bottom: 4px; }
/* 0.5.2 (found by the connector browser gate): a person with two working contexts (e.g. firm administrator + compliance officer)
   pushed the top bar 15px past a 390px phone. The context name truncates and the gaps tighten on small phones. */
@media (max-width: 520px) {
  .topbar .right { gap: 8px; min-width: 0; flex-shrink: 1; }
  .topbar .ctxpick { min-width: 0; }
  .topbar .ctxpick > summary.ctx { max-width: 38vw; padding: 5px 8px; }
  .topbar .ctxpick > summary.ctx b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
/* 0.5.3 sign-in: "Forgotten your password?" sits on the password label's line */
.auth-form .label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.auth-form .label-row a { font-weight: 500; }

/* 0.5.3.1: connected-system search picker (client, case) and in-page tab targets */
.refpick-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); max-height: 260px; overflow-y: auto; }
.refpick-list li { padding: 8px 10px; border-radius: 6px; font-size: var(--fs-sm); cursor: pointer; }
.refpick-list li[role=option]:hover, .refpick-list li.active { background: var(--brand-soft); color: var(--brand); }
.refpick-list li.refpick-empty { color: var(--ink-3); cursor: default; }
.tab-target { outline: 2px solid var(--brand); outline-offset: 2px; transition: outline-color .3s; }
[id] { scroll-margin-top: 84px; }
/* 0.5.4: the INTAI-admin top bar (extra firm picker) was 12px too wide at phone width */
@media (max-width: 480px) { .topbar { gap: 8px; padding: 0 12px; } .topbar .right { gap: 8px; } .topbar .crumb { overflow: hidden; } .topbar .me summary > svg { display: none; } }

/* 0.5.5 reports: the flagship PDF first, then the report library */
.report-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #16233f; color: #fff; border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; }
.report-hero .eyebrow { color: #b9c4dc; }
.report-hero h2 { color: #fff; margin: 2px 0 6px; font-size: 19px; }
.report-hero p { color: #dfe5f2; margin: 0 0 6px; max-width: 760px; }
.report-hero p.text-xs { color: #b9c4dc; margin-bottom: 0; }
.report-hero-text { flex: 1 1 420px; min-width: 0; }
.report-hero .btn { background: #fff; color: #16233f; border-color: #fff; flex: 0 0 auto; }
.report-hero .btn:hover { background: #e8f0fe; border-color: #e8f0fe; color: #16233f; }
.report-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.report-lib-item { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.report-lib-item h3 { margin: 0; font-size: 13px; }
.report-lib-item p { margin: 0; flex: 1 1 auto; }
.report-lib-item .btn { align-self: flex-start; }
@media (max-width: 520px) { .report-hero { padding: 16px; } .report-hero .btn { width: 100%; } }

/* 0.5.5.11 (R-086): the destination of an in-page jump is unmistakable for a moment */
@keyframes jump-highlight { 0% { box-shadow: 0 0 0 3px rgba(10,91,255,.55); background-color: rgba(10,91,255,.06); } 100% { box-shadow: 0 0 0 3px rgba(10,91,255,0); background-color: transparent; } }
.jump-highlight { animation: jump-highlight 2.4s ease-out 1; outline: 2px solid var(--c-blue, #0a5bff); outline-offset: 2px; }
#add-firm:focus { outline: none; }
#add-firm { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { .jump-highlight { animation: none; } }
/* 0.5.5.11 (R-087): the next onboarding step reads as an action */
a.next-step-link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* 0.5.5.11 (R-087): Open and People are both buttons and both always visible — they stack rather than being cut off */
.orgs-table td.org-actions { text-align: right; white-space: normal; }
.orgs-table td.org-actions .btn { margin: 2px 0 2px 4px; }
/* 0.5.5.12: provider lifecycle — approved for synthetic data only */
.tag-info { color: var(--c-blue, #0a5bff); background: rgba(10,91,255,.10); }

/* 0.5.5.17 (Defect B — phone layout, Director's screenshots at ~390px)
   1. The business name was hidden below 960px (.topbar .firm). On a phone it now has its own single line under the top bar.
   2. The billing strip is one text block + one action; on a phone the lead is line 1, the rest line 2 and the action a
      full-width 44px button — never three ragged columns.
   3. Account menu rows are 44px tap targets and the menu cannot leave the viewport. */
.firm-row { display: none; }
.billing-strip .bs-text { min-width: 0; }
.billing-strip .bs-act { white-space: nowrap; }
.switch-offer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 24px; background: var(--brand-soft); border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--fs-sm); }
.switch-offer p { margin: 0; flex: 1 1 260px; min-width: 0; }
.switch-offer form { margin: 0; }
@media (max-width: 600px) {
  .firm-row { display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: var(--white); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; min-width: 0; }
  .firm-row svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--ink-3); }
  .firm-row span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .billing-strip { flex-wrap: wrap; align-items: flex-start; padding: 10px 16px; row-gap: 8px; }
  .billing-strip > svg { margin-top: 3px; }
  .billing-strip .bs-text { flex: 1 1 0; }
  .billing-strip .bs-text strong { display: block; }
  .billing-strip .bs-text strong + .bs-sep, .billing-strip .bs-sep-act { display: none; }
  .billing-strip .bs-text strong + .bs-sep + .bs-sub { display: inline-block; }
  .billing-strip .bs-text strong + .bs-sep + .bs-sub::first-letter { text-transform: uppercase; }
  .billing-strip .bs-act { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid currentColor; border-radius: var(--radius-sm); text-decoration: none; background: rgba(255,255,255,.55); }
  .switch-offer { padding: 12px 16px; }
  .switch-offer form, .switch-offer .btn { width: 100%; }
  .switch-offer .btn { height: auto; min-height: 44px; font-size: var(--fs-sm); white-space: normal; }
  .topbar .me .menu-box { max-width: calc(100vw - 24px); }
  .topbar .me .menu-box a, .topbar .me .menu-box button { min-height: 44px; display: flex; align-items: center; }
  .topbar .crumb { min-width: 56px; }
  .topbar .right > * { flex: 0 0 auto; }
  .topbar .right > .ctxpick { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .topbar .ctxpick > summary.ctx { max-width: 100%; }
}

/* 0.5.5.21: Markdown pipe tables in AI drafts (presentation only) */
.md-table-wrap { overflow-x: auto; margin: 8px 0 12px; }
table.md-table { border-collapse: collapse; width: 100%; font-size: 13px; }
table.md-table th, table.md-table td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
table.md-table thead th { background: var(--bg-2, #f4f6fa); font-weight: 600; }
table.md-table tbody tr:nth-child(even) td { background: rgba(127,127,127,0.04); }

/* 0.5.6.0: the one client box — a found record and an entered name look deliberately different */
.clientbox-state[hidden] { display: none; }
.clientbox-state { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--fs-sm); }
.cstate { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.cstate.record { background: var(--brand-soft); color: var(--brand); border-color: transparent; font-weight: 600; }
.cstate.entered { background: var(--surface, #fff); color: var(--ink-2, #444); }
.cstate svg { width: 14px; height: 14px; }
.clientbox-confirm { margin-top: 10px; }
.refpick-list .pick-hint { color: var(--ink-3); font-size: var(--fs-xs); margin-left: 6px; }
.refpick-list .pick-sys { float: right; color: var(--ink-3); font-size: var(--fs-xs); }
.refpick-list li.refpick-enter { border-top: 1px solid var(--line); margin-top: 4px; color: var(--ink-2, #444); }
.refpick-list li.refpick-enter:hover, .refpick-list li.refpick-enter.active { background: var(--brand-soft); color: var(--brand); }
.cstate-block { display: block; margin: 4px 0 6px; border-radius: 8px; white-space: normal; font-size: var(--fs-xs); }

/* 0.5.6.5 — Review queue bulk resolution */
.rq-bulk{margin:8px 0 10px}
.rq-bulk-bar{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.rq-bulk-all{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.rq-bulk-act{margin-top:8px;display:grid;gap:6px;max-width:640px;padding:10px 12px;border:1px solid var(--c-border, #e3e6ea);border-radius:8px;background:var(--c-surface-2, #fafbfc)}
.rq-pick{width:34px;text-align:center}
.rq-bulk-act[hidden]{display:none}   /* 0.5.6.16: display:grid above overrode the hidden attribute — the note box showed with nothing selected */
/* 0.5.6.16: evidence filter — one baseline: .field's bottom margin (declared after .mb-0) pushed the button below the inputs */
[data-evidence-filter] .field{margin-bottom:0}
[data-evidence-filter] .btn-sm{height:34px}
[data-evidence-filter] .cselect-btn{height:34px;font-size:var(--fs-sm)}
/* 0.5.6.19 CHG-098: Real client data summary for firms */
[data-rd-summary]{display:grid;gap:10px;margin:10px 0}
[data-rd-summary] .rd-block{border-left:3px solid var(--line,#e3e8ef);padding:2px 0 2px 10px}
[data-rd-summary] ul{margin:4px 0 0;padding-left:18px}
.rd-details>summary{cursor:pointer;color:var(--muted)}