/* PACE · app.css: design system and app shell.
 *
 * Layers, in this order:
 *   0 fonts       self-hosted IBM Plex (no third-party requests)
 *   1 tokens      colour, type, space, radius, control, elevation, motion; light, dark (and print, in layer 7)
 *   2 base        reset, type, links, focus
 *   3 shell       skip link, sidebar and drawer, topbar, cycle switcher, page, page header
 *   4 components  buttons, forms, cards, tiles, tables, pills, zero line, pickers, dialogs, flashes, empty states
 *   5 utilities   small single-purpose classes; 5b responsive rules for layers 3–5
 *   6 pages       one block per page area ("==== page: x ===="); page work goes only in its own block
 *   7 print
 * panel.css (loaded before this file) keeps only the analytics engine: filter bar, charts, explorer.
 *
 * Colour meaning: green (--good) and red (--crit) are reserved for deviation, at/above vs below the expected
 * score. Progress and completion use --l2/--accent, categories (areas) use --a1…--a8, attention uses --warn.
 * Text on a fill uses the matching --on-* token; coloured text on a surface uses the --*-ink token.
 */

/* ==== 0 · fonts ==== */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/plex-sans-var-latin.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: "IBM Plex Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/plex-sans-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-mono-400-latin.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-mono-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/plex-mono-500-latin.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/plex-mono-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/plex-mono-600-latin.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: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/plex-mono-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==== 1 · tokens ==== */
:root {
  /* surfaces and ink: page < surface < surface-3 (popovers, dialogs) */
  --page: #f5f5f2; --surface: #fcfcfb; --surface-2: #efeeea; --surface-3: #ffffff;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #6c6b66;
  --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,.10); --border-strong: #8c8b84;
  --side: #ebeae5; --side-ink: #3d3c39; --side-muted: #64635e;
  /* brand */
  --accent: #1c5cab; --accent-hover: #174d90; --accent-ink: #1c5cab; --accent-wash: rgba(42,120,214,.10); --on-accent: #ffffff;
  /* semantic: fills (--good, --crit, --warn), text on surfaces (--*-ink), text on fills (--on-*) */
  --good: #0a8a0a; --good-ink: #0b7a0b; --on-good: #ffffff;
  --crit: #d03b3b; --crit-ink: #b8302f; --on-crit: #ffffff;
  --warn: #fab219; --warn-ink: #7a5200; --on-warn: #0b0b0b;
  /* categorical (areas): never green or red */
  --a1: #2874d2; --a2: #eb6834; --a3: #1baf7a; --a4: #eda100; --a5: #e87ba4; --a6: #8a5a2b; --a7: #4a3aa7; --a8: #5b6b80;
  --on-a1: #ffffff; --on-a2: #0b0b0b; --on-a3: #0b0b0b; --on-a4: #0b0b0b; --on-a5: #0b0b0b; --on-a6: #ffffff; --on-a7: #ffffff; --on-a8: #ffffff;
  --a7-ink: #4a3aa7;
  /* ordinal, levels and heat (panel) */
  --o1: #86b6ef; --o2: #3987e5; --o3: #1c5cab; --o4: #0d366b;
  --l1: #86b6ef; --l2: #2a78d6; --l3: #104281; --on-l2: #ffffff;
  --h0: #efeeea; --h3: #1c5cab; --hi3: #ffffff;
  --dot-muted: #b4b2a9; --none: #d9d8d2;
  /* type */
  --f-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px;
  --fs-2xl: clamp(24px, 2.4vw, 30px); --fs-kpi: 30px; --fs-display: 44px;
  --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.5; --fw-text: 400;
  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  /* radius: xs cells and badges, sm chips, md controls, lg cards and tables, xl dialogs and hero */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --r: var(--r-md);
  /* control heights */
  --h-sm: 30px; --h-md: 36px; --h-lg: 42px;
  /* elevation */
  --e-1: 0 1px 2px rgba(11,11,11,.05);
  --e-2: 0 1px 2px rgba(11,11,11,.04), 0 6px 16px rgba(11,11,11,.07);
  --e-3: 0 2px 6px rgba(11,11,11,.06), 0 16px 40px rgba(11,11,11,.14);
  --shadow: var(--e-2);
  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 120ms; --t-med: 200ms; --t-slow: 360ms;
  /* layout */
  --topbar-h: 56px; --side-w: 252px; --page-max: 1340px; --gutter: 28px;
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
  --scrim: rgba(11,11,11,.42);
  --topbar-bg: color-mix(in oklab, var(--page) 84%, transparent);
  --i-zero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 6.5v15' stroke='%231c5cab' stroke-width='2' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M11 14h7.5' stroke='%231c5cab' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='19.5' cy='14' r='3' fill='%231c5cab'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --page: #0f0f0e; --surface: #1a1a19; --surface-2: #232322; --surface-3: #2b2b29;
  --ink: #f4f4f1; --ink-2: #c3c2b7; --muted: #9a9890;
  --grid: #2c2c2a; --axis: #3d3d3a; --border: rgba(255,255,255,.09); --border-strong: #6e6d67;
  --side: #141413; --side-ink: #cfcec6; --side-muted: #9a9890;
  --accent: #86b6ef; --accent-hover: #a5c9f3; --accent-ink: #9ec5f4; --accent-wash: rgba(57,135,229,.18); --on-accent: #0b0b0b;
  --good: #3ccf3c; --good-ink: #3ccf3c; --on-good: #0b0b0b;
  --crit: #ff6b6b; --crit-ink: #ff7b7b; --on-crit: #0b0b0b;
  --warn: #fab219; --warn-ink: #fab219; --on-warn: #0b0b0b;
  --a1: #3987e5; --a2: #d95926; --a3: #199e70; --a4: #c98500; --a5: #d55181; --a6: #c38f5c; --a7: #9085e9; --a8: #93a3b8;
  --on-a1: #0b0b0b; --on-a2: #0b0b0b; --on-a3: #0b0b0b; --on-a4: #0b0b0b; --on-a5: #0b0b0b; --on-a6: #0b0b0b; --on-a7: #0b0b0b; --on-a8: #0b0b0b;
  --a7-ink: #a99ff0;
  --o1: #184f95; --o2: #2a78d6; --o3: #6da7ec; --o4: #b7d3f6;
  --l1: #184f95; --l2: #3987e5; --l3: #9ec5f4; --on-l2: #0b0b0b;
  --h0: #262624; --h3: #86b6ef; --hi3: #0b0b0b;
  --dot-muted: #5f5e5a; --none: #3d3d3a;
  --e-1: inset 0 1px 0 rgba(255,255,255,.04);
  --e-2: 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.45);
  --e-3: 0 0 0 1px rgba(255,255,255,.08), 0 20px 48px rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.6);
  --topbar-bg: color-mix(in oklab, var(--page) 80%, transparent);
  --fw-text: 370;
  --i-zero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 6.5v15' stroke='%239ec5f4' stroke-width='2' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M11 14h7.5' stroke='%239ec5f4' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='19.5' cy='14' r='3' fill='%239ec5f4'/%3E%3C/svg%3E");
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --page: #0f0f0e; --surface: #1a1a19; --surface-2: #232322; --surface-3: #2b2b29;
  --ink: #f4f4f1; --ink-2: #c3c2b7; --muted: #9a9890;
  --grid: #2c2c2a; --axis: #3d3d3a; --border: rgba(255,255,255,.09); --border-strong: #6e6d67;
  --side: #141413; --side-ink: #cfcec6; --side-muted: #9a9890;
  --accent: #86b6ef; --accent-hover: #a5c9f3; --accent-ink: #9ec5f4; --accent-wash: rgba(57,135,229,.18); --on-accent: #0b0b0b;
  --good: #3ccf3c; --good-ink: #3ccf3c; --on-good: #0b0b0b;
  --crit: #ff6b6b; --crit-ink: #ff7b7b; --on-crit: #0b0b0b;
  --warn: #fab219; --warn-ink: #fab219; --on-warn: #0b0b0b;
  --a1: #3987e5; --a2: #d95926; --a3: #199e70; --a4: #c98500; --a5: #d55181; --a6: #c38f5c; --a7: #9085e9; --a8: #93a3b8;
  --on-a1: #0b0b0b; --on-a2: #0b0b0b; --on-a3: #0b0b0b; --on-a4: #0b0b0b; --on-a5: #0b0b0b; --on-a6: #0b0b0b; --on-a7: #0b0b0b; --on-a8: #0b0b0b;
  --a7-ink: #a99ff0;
  --o1: #184f95; --o2: #2a78d6; --o3: #6da7ec; --o4: #b7d3f6;
  --l1: #184f95; --l2: #3987e5; --l3: #9ec5f4; --on-l2: #0b0b0b;
  --h0: #262624; --h3: #86b6ef; --hi3: #0b0b0b;
  --dot-muted: #5f5e5a; --none: #3d3d3a;
  --e-1: inset 0 1px 0 rgba(255,255,255,.04);
  --e-2: 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.45);
  --e-3: 0 0 0 1px rgba(255,255,255,.08), 0 20px 48px rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.6);
  --topbar-bg: color-mix(in oklab, var(--page) 80%, transparent);
  --fw-text: 370;
  --i-zero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 6.5v15' stroke='%239ec5f4' stroke-width='2' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M11 14h7.5' stroke='%239ec5f4' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='19.5' cy='14' r='3' fill='%239ec5f4'/%3E%3C/svg%3E");
  color-scheme: dark; }
@media (pointer: coarse) { :root { --h-sm: 36px; } }
@media (max-width: 900px) { :root { --gutter: 16px; --topbar-h: 52px; } }

/* ==== 2 · base ==== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + var(--s-4)); }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); font: var(--fw-text) var(--fs-base)/var(--lh-body) var(--f-sans);
  font-variant-numeric: tabular-nums; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; }
p { margin: 0; text-wrap: pretty; }
b, strong { font-weight: 600; }
small { font-size: var(--fs-xs); }
a { color: var(--accent-ink); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, select, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-tap-highlight-color: transparent; }
svg { flex: none; }
hr { border: 0; border-top: 1px solid var(--grid); margin: var(--s-4) 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: color-mix(in oklab, var(--accent) 24%, transparent); }
::placeholder { color: var(--muted); opacity: 1; }
code, kbd, samp, .mono { font-family: var(--f-mono); }
kbd { font-size: .85em; padding: 1px 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--surface); }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
html:not(.js) .js-only { display: none !important; }

/* ==== 3 · shell ==== */
.skip { position: fixed; left: var(--s-3); top: var(--s-3); z-index: 200; transform: translateY(-160%); padding: 10px 16px; border-radius: var(--r-md);
  background: var(--ink); color: var(--page); font-weight: 500; text-decoration: none; transition: transform var(--t-fast) var(--ease); }
/* the shadow only while shown: parked above the viewport its blur would still smudge the top-left corner */
.skip:focus { transform: none; box-shadow: var(--e-3); }

.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* sidebar */
.side { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4) var(--s-3) var(--s-3); background: var(--side); color: var(--side-ink); border-right: 1px solid var(--border);
  scrollbar-width: thin; scrollbar-color: var(--axis) transparent; }
.side-top { display: flex; align-items: center; gap: var(--s-2); }
.side-x { display: none !important; margin: 0 0 var(--s-3) auto; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px var(--s-2) var(--s-3); color: var(--ink); text-decoration: none; border-radius: var(--r-md); }
.brand svg { flex: none; }
.brand b { display: block; font-size: var(--fs-lg); font-weight: 600; letter-spacing: .04em; line-height: 1.15; }
.brand small { display: block; font-size: var(--fs-2xs); color: var(--side-muted); font-weight: 400; letter-spacing: 0; line-height: 1.25; }
.brand-lockup { flex-direction: column; align-items: flex-start; gap: 8px; }
.pace-logotype, .pace-mark { display: block; flex: none; max-width: 100%; }
.pace-custom-brand { display: inline-flex; align-items: center; gap: 10px; }

.org { position: relative; margin: 0 2px var(--s-2); }
.org > summary, .cyc > summary { list-style: none; }
.org > summary::-webkit-details-marker, .cyc > summary::-webkit-details-marker { display: none; }
.org-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--e-1); color: var(--ink); cursor: pointer; transition: border-color var(--t-fast) var(--ease); }
.org-btn:hover { border-color: color-mix(in oklab, var(--ink) 28%, transparent); }
.org[open] > .org-btn { border-color: var(--accent); box-shadow: var(--ring); }
.org-btn.is-static, .org-btn:disabled { cursor: default; opacity: 1; }
.org-btn.is-static:hover { border-color: var(--border); }
.org-btn .t { min-width: 0; flex: 1; }
.org-btn b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-btn small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.org-btn > svg { width: 16px; height: 16px; color: var(--muted); }
.org-mark { width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; background: var(--ink); color: var(--page);
  font: 600 var(--fs-xs)/1 var(--f-sans); letter-spacing: .02em; }
.org-mark.sm { width: 22px; height: 22px; border-radius: var(--r-sm); font-size: 10px; }

/* menus (company and cycle switchers): <details data-menu> + .menu-pop */
.menu-pop, .org-pop { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; display: grid; gap: 2px; padding: 6px; max-height: min(440px, 70vh); overflow: auto;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-3); animation: pop-in var(--t-med) var(--ease); }
.menu-pop form, .org-pop form { display: grid; gap: 2px; }
.menu-h { padding: 6px 8px 4px; font: 500 var(--fs-2xs)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-i, .org-pop button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: var(--r-md); background: none;
  color: var(--ink); font-size: var(--fs-sm); text-align: left; text-decoration: none; cursor: pointer; }
.menu-i:hover, .org-pop button:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.menu-i:focus-visible, .org-pop button:focus-visible { outline-offset: -2px; background: var(--accent-wash); }
.menu-i[aria-current="true"], .org-pop button[aria-current="true"] { background: var(--accent-wash); }
.menu-i .t { flex: 1; min-width: 0; }
.menu-i .t b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-i .t small { display: block; color: var(--muted); font-size: var(--fs-xs); }
/* on a tinted row --muted drops under 4.5:1 on dark surface-3; the secondary line steps up to --ink-2 */
.menu-i:is(:hover, :focus-visible, [aria-current="true"]) .t small { color: var(--ink-2); }
.menu-i .tick { width: 16px; height: 16px; color: var(--accent-ink); visibility: hidden; }
.menu-i[aria-current="true"] .tick { visibility: visible; }
.menu-sep { height: 1px; margin: 4px 2px; background: var(--grid); }
.menu-link { display: block; padding: 8px; font-size: var(--fs-sm); border-radius: var(--r-md); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* navigation */
.nav { display: grid; gap: var(--s-1); }
.nav-g { display: grid; gap: 1px; }
.nav-h, .nav h4 { margin: 0; padding: var(--s-4) 10px 6px; font: 500 var(--fs-2xs)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--r-md); color: var(--side-ink);
  text-decoration: none; font-size: var(--fs-md); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav a > span:not(.cnt) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a svg { width: 18px; height: 18px; opacity: .72; }
.nav a:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); }
.nav a:focus-visible { outline-offset: -2px; }
.nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--e-1), inset 0 0 0 1px var(--border); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav a[aria-current="page"] svg { opacity: 1; color: var(--accent-ink); }
.cnt { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink-2); font: 500 var(--fs-2xs)/1 var(--f-mono); }
.cnt.attn { background: var(--accent); color: var(--on-accent); }
.cnt.warn { background: color-mix(in oklab, var(--warn) 32%, transparent); color: var(--warn-ink); }

.side-foot { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); display: grid; gap: var(--s-2); }
.me { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.me:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.me > span { min-width: 0; }
.me b { display: block; font-size: var(--fs-sm); font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { display: block; font-size: var(--fs-xs); color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-actions { display: flex; align-items: center; gap: var(--s-2); padding: 0 2px; }
.foot-actions form { display: contents; }
.foot-actions form > button { margin-left: auto; }

/* theme: Automático / Claro / Escuro; the pressed state follows <html data-theme> so it is right before JS runs */
.theme-sw { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--ink) 7%, transparent); }
.theme-sw button { display: grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.theme-sw button svg { width: 16px; height: 16px; }
.theme-sw button:hover { color: var(--ink); }
.theme-sw button:focus-visible { outline-offset: 0; }
html:not([data-theme]) .theme-sw [data-theme-set="auto"], html[data-theme="light"] .theme-sw [data-theme-set="light"], html[data-theme="dark"] .theme-sw [data-theme-set="dark"] {
  background: var(--surface); color: var(--ink); box-shadow: var(--e-1), 0 0 0 1px var(--border); }

/* main column and topbar */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-3); height: var(--topbar-h);
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  background: var(--topbar-bg); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid var(--grid); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar { background: var(--page); } }
.main:has(> .page.wide) > .topbar { padding-inline: var(--gutter); }
.topbar .spacer { flex: 1; }
.burger { display: none !important; }
.crumbs { min-width: 0; font-size: var(--fs-sm); color: var(--muted); }
.crumbs ol { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs li + li::before { content: "/"; content: "/" / ""; color: var(--axis); }
.crumbs a, .crumbs li > span { display: block; max-width: 30ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--muted); text-decoration: none; border-radius: var(--r-xs); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 500; }
.tb-title { display: none; min-width: 0; margin: 0; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* cycle switcher: a pill with the cycle and its status in text */
.cyc { position: relative; min-width: 0; flex: 0 1 auto; }
.cyc-btn { display: inline-flex; align-items: center; gap: 8px; max-width: min(46vw, 440px); height: 34px; padding: 0 10px 0 12px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); background: var(--surface); box-shadow: var(--e-1); color: var(--ink); font-size: var(--fs-sm);
  cursor: pointer; user-select: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.cyc-btn:hover { border-color: color-mix(in oklab, var(--ink) 34%, transparent); }
.cyc[open] > .cyc-btn { border-color: var(--accent); box-shadow: var(--ring); }
.cyc-k { color: var(--muted); font-size: var(--fs-xs); }
.cyc-n { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cyc-btn > svg { width: 14px; height: 14px; color: var(--muted); transition: transform var(--t-fast) var(--ease); }
.cyc[open] > .cyc-btn > svg { transform: rotate(180deg); }
.cyc .menu-pop { left: auto; right: 0; width: max-content; min-width: 300px; max-width: min(440px, calc(100vw - 24px)); }
.cyc .menu-i .st { flex: none; }

/* page */
.page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--s-6) var(--gutter) 64px; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5); align-content: start; }
.page:focus { outline: none; }
.page.wide { max-width: none; }
.page > * { min-width: 0; }

/* page header: phead() */
.phead { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: flex-end; justify-content: space-between; }
.phead > :first-child { min-width: 0; flex: 1 1 380px; }
.phead h1 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.015em; line-height: var(--lh-tight); }
.phead p, .phead .lede { color: var(--ink-2); margin-top: 6px; max-width: 72ch; }
.phead .eyebrow { display: block; margin-bottom: 8px; }
.phead .acts { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.ph-row { display: flex; gap: var(--s-4); align-items: center; min-width: 0; }
.ph-row > div { min-width: 0; }
.ph-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }
.ph-back svg { width: 14px; height: 14px; }
.ph-back:hover { color: var(--ink); }
.eyebrow { font: 500 var(--fs-xs)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ==== 4 · components ==== */

/* buttons: .btn (primary) · .btn-ghost (secondary) · .btn-quiet · .btn-danger; sizes .btn-sm / .btn-lg; .btn-icon for square icon buttons */
.btn, .btn-ghost, .btn-secondary, .btn-quiet, .btn-danger { --bh: var(--h-md); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--bh); padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-md); font: 500 var(--fs-md)/1.2 var(--f-sans); white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none; position: relative;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn svg, .btn-ghost svg, .btn-secondary svg, .btn-quiet svg, .btn-danger svg { width: 16px; height: 16px; }
.btn { background: var(--accent); color: var(--on-accent); box-shadow: var(--e-1); }
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn-ghost, .btn-secondary { background: var(--surface); border-color: color-mix(in oklab, var(--ink) 18%, transparent); color: var(--ink); }
.btn-ghost:hover, .btn-secondary:hover { background: color-mix(in oklab, var(--ink) 4%, var(--surface)); border-color: color-mix(in oklab, var(--ink) 32%, transparent); text-decoration: none; }
.btn-ghost.on, .btn-ghost[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); }
.btn-quiet { background: transparent; color: var(--ink-2); padding-inline: 10px; }
.btn-quiet:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); text-decoration: none; }
.btn-danger { background: transparent; border-color: color-mix(in oklab, var(--crit) 45%, transparent); color: var(--crit-ink); }
.btn-danger:hover { background: color-mix(in oklab, var(--crit) 10%, transparent); text-decoration: none; }
.btn-danger.solid { background: var(--crit); border-color: transparent; color: var(--on-crit); }
.btn-danger.solid:hover { background: color-mix(in oklab, var(--crit) 88%, var(--ink)); }
:is(.btn, .btn-ghost, .btn-secondary, .btn-quiet, .btn-danger):active:not(:disabled) { transform: translateY(1px); }
.btn-sm { --bh: var(--h-sm); padding: 0 10px; gap: 6px; font-size: var(--fs-sm); }
.btn-sm.btn-quiet { padding-inline: 8px; }
.btn-lg { --bh: var(--h-lg); padding: 0 18px; font-size: var(--fs-base); }
.btn-icon { padding: 0 !important; width: var(--bh); }
.btn-block { width: 100%; }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:is(.btn, .btn-ghost, .btn-secondary, .btn-quiet, .btn-danger)[aria-busy="true"] { opacity: 1; cursor: progress; }
:is(.btn, .btn-ghost, .btn-secondary, .btn-quiet, .btn-danger)[aria-busy="true"]:not(.has-label) { color: transparent !important; }
:is(.btn, .btn-ghost, .btn-secondary, .btn-quiet, .btn-danger)[aria-busy="true"]:not(.has-label)::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid var(--spin, var(--ink-2)); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn[aria-busy="true"] { --spin: var(--on-accent); }
.btn-danger.solid[aria-busy="true"] { --spin: var(--on-crit); }
.lnk { background: none; border: 0; padding: 0; color: var(--accent-ink); cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lnk:hover { text-decoration-thickness: 2px; }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; flex: none; }
.spin.sm { width: 12px; height: 12px; border-width: 1.5px; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* forms */
.form { display: grid; gap: var(--s-5); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-4) var(--s-5); }
.fgrid .span2 { grid-column: span 2; }
.fgrid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field > label, .field > .lab { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.field .err, .field-err { font-size: var(--fs-xs); font-weight: 500; color: var(--crit-ink); }
.field:has(.err) :where(input, select, textarea) { border-color: var(--crit); }
.in, :where(.field) :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden]), select, textarea) {
  width: 100%; min-height: var(--h-md); padding: 7px 12px; background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  color: var(--ink); font-size: var(--fs-md); line-height: 1.4; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.in:hover:not(:disabled):not(:focus), :where(.field) :where(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--ink-2); }
.in:focus, :where(.field) :where(input, select, textarea):focus { outline: 2px solid transparent; outline-offset: 0; border-color: var(--accent); box-shadow: var(--ring); }
.in:disabled, :where(.field) :where(input, select, textarea):disabled, .in[readonly], :where(.field) :where(input, textarea)[readonly] {
  background-color: var(--surface-2); border-color: var(--border); color: var(--ink-2); cursor: not-allowed; opacity: 1; }
:where(input, textarea):disabled::placeholder { color: transparent; }
select.in, :where(.field) select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
select[multiple].in, :where(.field) select[multiple] { background-image: none; padding-right: 12px; }
textarea.in, :where(.field) textarea { min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.in-sm, .in.in-sm { min-height: var(--h-sm); padding-block: 4px; font-size: var(--fs-sm); }
select.in-sm { padding-right: 30px; background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; }
input[type=range] { width: 100%; height: 24px; margin: 0; accent-color: var(--accent); cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=file] { max-width: 100%; font-size: var(--fs-sm); color: var(--ink-2); }
input[type=file]::file-selector-button { height: var(--h-md); margin-right: 12px; padding: 0 14px; border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: 500 var(--fs-md) var(--f-sans); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--surface-2); }
.checks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; min-height: var(--h-md); }
.checkrow { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; font-size: var(--fs-md); cursor: pointer; }
.checkrow input { width: 16px; height: 16px; margin: 0; flex: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-actions .note { margin-left: auto; }
.form-actions.end { justify-content: flex-end; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; }
.reveal { position: relative; display: block; }
.reveal input { padding-right: 44px !important; }
.reveal > button { position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 34px; height: 30px; border: 0;
  border-radius: var(--r-sm); background: none; color: var(--ink-2); cursor: pointer; }
.reveal > button:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.reveal > button svg { width: 18px; height: 18px; }

/* search and toolbars */
.tools { display: flex; flex-wrap: wrap; gap: var(--s-2) 10px; align-items: center; }
.tools .grow { flex: 1; }
.tools .in { width: auto; min-width: 150px; max-width: 100%; }
.search { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.search input { padding-left: 36px; min-width: min(260px, 100%); }
.search svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }

/* tags (checkbox chips) */
.tagbox { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); background: var(--surface); font-size: var(--fs-sm); cursor: pointer; user-select: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tag:hover { border-color: color-mix(in oklab, var(--ink) 34%, transparent); }
.tag input { position: absolute; opacity: 0; pointer-events: none; }
.tag:has(input:checked) { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); }
.tag:has(input:checked)::before { content: ""; width: 12px; height: 12px; margin-left: -2px; background: var(--accent-ink); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.tag:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tag:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.tag small { color: var(--muted); }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; user-select: none; }
.switch input { appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: var(--r-pill); background: var(--border-strong); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease); }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform var(--t-med) var(--ease), background-color var(--t-fast); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(14px); background: var(--on-accent); }
.switch input:disabled { opacity: .5; cursor: not-allowed; }
.switch.lg input { width: 40px; height: 24px; }
.switch.lg input::after { width: 20px; height: 20px; }
.switch.lg input:checked::after { transform: translateX(16px); }

/* segmented control: links or buttons with aria-current / aria-pressed; scrolls inside itself */
.seg { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; scrollbar-width: none; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--ink) 6%, transparent); vertical-align: middle; }
.seg::-webkit-scrollbar { display: none; }
.seg > a, .seg > button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.seg > a:hover, .seg > button:hover { color: var(--ink); }
.seg > :focus-visible { outline-offset: -2px; }
.seg > [aria-current="true"], .seg > [aria-current="page"], .seg > [aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--e-1), 0 0 0 1px var(--border); }
.seg small { color: var(--ink-2); font-size: var(--fs-xs); } /* V12: --muted is under AA on the tinted track */

/* sideways scrollers (segmented controls, tabs): an edge fade shows there is more, driven by the scroll position.
   Without scroll-driven animations (Firefox) segmented controls wrap instead and tabs keep plain scrolling. */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes edge-fade { 0% { --fade-l: 0px; --fade-r: 28px; } 6% { --fade-l: 28px; } 94% { --fade-r: 28px; } 100% { --fade-l: 28px; --fade-r: 0px; } }
@supports (animation-timeline: scroll()) {
  .seg, .ltabs, .tabs, .evx-nav {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    animation: edge-fade linear both; animation-timeline: scroll(self inline); }
}
@supports not (animation-timeline: scroll()) { .seg { flex-wrap: wrap; } }

/* link tabs (page sections) */
.ltabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--grid); }
.ltabs::-webkit-scrollbar { display: none; }
.ltabs a { position: relative; flex: none; padding: 10px 12px 12px; font-size: var(--fs-md); color: var(--ink-2); text-decoration: none; white-space: nowrap; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.ltabs a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.ltabs a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 4%, transparent); }
.ltabs a:focus-visible { outline-offset: -2px; }
.ltabs a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.ltabs a[aria-current="page"]::after { background: var(--accent); }
.ltabs a small { color: var(--muted); margin-left: 4px; }

/* cards and sections */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-1); padding: var(--s-5); min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.card h2 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.card .sub { font-size: var(--fs-sm); color: var(--muted); margin: -8px 0 0; }
.card h3.sh { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); margin-bottom: 8px; }
.card.flush { padding: 0; overflow: hidden; }
.card.tint { background: color-mix(in oklab, var(--accent) 5%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 22%, transparent); }
.sec { scroll-margin-top: calc(var(--topbar-h) + 64px); }
.sec-h { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; min-width: 0; }
.sec-h h2 { font-size: var(--fs-lg); }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: var(--s-5); }
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.cardlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); }
.cardlink { color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.cardlink:hover { border-color: color-mix(in oklab, var(--ink) 24%, transparent); box-shadow: var(--e-2); text-decoration: none; }
.note { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.empty { color: var(--muted); font-size: var(--fs-md); margin: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.facts > div { display: grid; gap: 2px; min-width: 0; }
.facts small { font-size: var(--fs-xs); color: var(--muted); }
.facts b { font-size: 18px; font-weight: 600; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: var(--fs-md); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; }
ul.plain { margin: 0; padding-left: 18px; font-size: var(--fs-md); display: grid; gap: 4px; }
ul.avisos { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--ink-2); display: grid; gap: 4px; }
details.how > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-lg); }
details.how[open] > summary { margin-bottom: 10px; }
.secret { display: inline-block; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); font: 600 var(--fs-base) var(--f-mono); user-select: all; }
.big { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.big small { font-size: var(--fs-base); font-weight: 500; color: var(--ink-2); margin-left: 6px; letter-spacing: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-sm); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.dotsw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

/* KPI tiles: values line up across a row (subgrid). --kc columns follow the tile count so rows come out even;
   the count rules sit in :where() (class specificity) so the breakpoints in 5b and print override them by source order. */
.kpis { --kc: 4; display: grid; grid-template-columns: repeat(var(--kc), minmax(0, 1fr)); gap: var(--s-3); }
.kpis:where(:has(> :nth-child(2):last-child)) { --kc: 2; }
.kpis:where(:has(> :nth-child(3):last-child), :has(> :nth-child(6):last-child), :has(> :nth-child(9):last-child)) { --kc: 3; }
.kpis:where(:has(> :nth-child(5):last-child)) { --kc: 5; }
.tile { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; align-content: start; min-width: 0; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-1); color: inherit; }
@supports not (grid-template-rows: subgrid) { .tile { grid-row: auto; grid-template-rows: none; } }
.tile .lab { align-self: start; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a value is never cut: it wraps (at spaces first) when the tile is too narrow; .long is the smaller size for money and other long values */
.tile .val { align-self: end; min-width: 0; font: 600 var(--fs-kpi)/1.05 var(--f-sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.tile .val.long { font-size: 24px; letter-spacing: -.01em; }
.tile .val small { margin-left: 4px; font-size: var(--fs-base); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.tile .foot { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
a.tile { text-decoration: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
a.tile:hover { border-color: color-mix(in oklab, var(--ink) 24%, transparent); box-shadow: var(--e-2); }
.tile.on, .tile[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--e-1); }
.tile.good { box-shadow: inset 3px 0 0 var(--good), var(--e-1); }
.tile.crit { box-shadow: inset 3px 0 0 var(--crit), var(--e-1); }
.tile.warn { box-shadow: inset 3px 0 0 var(--warn), var(--e-1); }
.tile.accent { box-shadow: inset 3px 0 0 var(--accent), var(--e-1); }

/* data tables: .tw wrapper + table.dt; app.js marks .tw[data-fit] (header sticks under the topbar) or .is-scroll (edge fade) */
.tw { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-1); }
.tw.is-scroll:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), rgba(0,0,0,.25)); mask-image: linear-gradient(to right, #000 calc(100% - 36px), rgba(0,0,0,.25)); }
.tw[data-fit] { overflow: visible; }
.tw.tall { max-height: calc(100dvh - var(--topbar-h) - 32px); overflow: auto; }
table.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
table.dt th { position: sticky; top: 0; z-index: 2; height: 40px; padding: 8px 12px; text-align: left; vertical-align: middle; white-space: nowrap;
  font: 500 var(--fs-xs)/1.3 var(--f-sans); letter-spacing: .01em; color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--axis); }
.tw[data-fit] > table.dt th { top: var(--topbar-h); }
.tw > table.dt thead th:first-child { border-top-left-radius: calc(var(--r-lg) - 1px); }
.tw > table.dt thead th:last-child { border-top-right-radius: calc(var(--r-lg) - 1px); }
.tw > table.dt tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--r-lg) - 1px); }
.tw > table.dt tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--r-lg) - 1px); }
table.dt td { padding: 10px 12px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt tbody tr { transition: background-color var(--t-fast) var(--ease); }
table.dt tbody tr:hover td { background: color-mix(in oklab, var(--ink) 3%, var(--surface)); }
table.dt tbody tr.rowlink { cursor: pointer; }
table.dt tbody tr.sel td, table.dt tbody tr[aria-selected="true"] td { background: var(--accent-wash); }
table.dt tbody tr.sel td:first-child, table.dt tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.dt td.num, table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt td.c, table.dt th.c { text-align: center; }
table.dt a.rl { color: var(--ink); text-decoration: none; font-weight: 500; }
table.dt a.rl:hover { color: var(--accent-ink); text-decoration: underline; }
table.dt tr.rowlink:hover a.rl { color: var(--accent-ink); }
table.dt tfoot td { font-weight: 600; border-top: 1px solid var(--axis); border-bottom: 0; }
table.dt .sub { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
table.dt.compact th { height: 34px; padding: 6px 12px; }
table.dt.compact td { padding: 6px 12px; }
.tscroll, .hm-scroll { overflow-x: auto; }
table.plainT { border-collapse: collapse; font-size: var(--fs-sm); width: 100%; }
table.plainT th, table.plainT td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.plainT th { color: var(--ink-2); font-weight: 500; }
.pager { display: flex; gap: var(--s-2); align-items: center; justify-content: flex-end; font-size: var(--fs-sm); color: var(--muted); }

/* people bits: avatar, who, roles */
.av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--ink-2); color: var(--page);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.av.sm { width: 24px; height: 24px; font-size: 10px; }
.av.md { width: 40px; height: 40px; font-size: 14px; }
.av.lg { width: 64px; height: 64px; font-size: 22px; }
.who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.who > span { min-width: 0; }
.who b { font-weight: 500; }
.who .sub { margin-top: -1px; }
.role { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; line-height: 1.5; }
.role.admin { background: color-mix(in oklab, var(--a7) 14%, transparent); color: var(--a7-ink); }
.role.rh { background: color-mix(in oklab, var(--a3) 16%, transparent); color: color-mix(in oklab, var(--a3) 45%, var(--ink)); }
.role.gestor { background: var(--accent-wash); color: var(--accent-ink); }

/* status pills: status_pill(). The glyph changes with the state, so colour is never the only cue. */
.st { --st-c: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--st-c); font-size: var(--fs-xs); font-weight: 500; line-height: 1; white-space: nowrap; justify-self: start; vertical-align: middle; }
.st::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.st.done { --st-c: var(--accent-ink); background: var(--accent-wash); }
.st.done::before { width: 11px; height: 11px; border-radius: 0; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.st.draft { --st-c: var(--warn-ink); background: color-mix(in oklab, var(--warn) 20%, transparent); }
.st.draft::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.st.inc { --st-c: var(--warn-ink); background: color-mix(in oklab, var(--warn) 20%, transparent); }
.st.inc::before { background: conic-gradient(currentColor 0 25%, transparent 0); box-shadow: inset 0 0 0 1.5px currentColor; }
.st.none { --st-c: var(--muted); background: var(--surface-2); }
.st.none::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.st.open { --st-c: var(--accent-ink); background: var(--accent-wash); }
.st.open::before { width: 7px; height: 7px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); margin-inline: 1px; }
.st.closed { --st-c: var(--ink-2); background: var(--surface-2); }
.st.closed::before { border-radius: 2px; width: 8px; height: 8px; }
.st.released { --st-c: var(--a7-ink); background: color-mix(in oklab, var(--a7) 14%, transparent); }
.st.released::before { width: 12px; height: 12px; border-radius: 0; -webkit-mask: var(--i-eye) center / contain no-repeat; mask: var(--i-eye) center / contain no-repeat; }
.st.current { --st-c: var(--accent-ink); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent); }
.st.current::before { display: none; }
.st.sm { height: 20px; padding: 0 8px 0 6px; font-size: var(--fs-2xs); }
.st.plain::before { display: none; }
.badge { display: inline-block; padding: 3px 6px; border-radius: var(--r-xs); font: 600 var(--fs-2xs)/1 var(--f-mono); letter-spacing: .03em; }
.badge.alto { background: color-mix(in oklab, var(--crit) 16%, transparent); color: var(--crit-ink); }
.badge.medio { background: color-mix(in oklab, var(--warn) 22%, transparent); color: var(--warn-ink); }
.badge.ok { background: color-mix(in oklab, var(--good) 12%, transparent); color: var(--good-ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--surface-2); color: var(--ink); font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
button.chip { cursor: pointer; font: inherit; font-size: var(--fs-sm); text-align: left; }
button.chip:hover { border-color: var(--accent); }
.chip.out { background: none; border: 1px dashed var(--axis); color: var(--ink-2); }
.chip.hi { background: var(--accent-wash); border-color: var(--accent); }
.chip b { font-weight: 600; }
.chip small { color: var(--muted); }
.names { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; min-width: 0; }

/* deviation: dev_text() + zl(). Centre = expected; right = above (green), left = below (red). */
.dev { font-weight: 600; white-space: nowrap; }
.dev.up { color: var(--good-ink); }
.dev.down { color: var(--crit-ink); }
.dev.na { color: var(--muted); font-weight: 400; }
.zcell { display: grid; grid-template-columns: minmax(58px, auto) minmax(90px, 1fr); gap: 10px; align-items: center; }
.zcell .dev.na { grid-column: 1 / -1; white-space: normal; font-size: var(--fs-sm); line-height: 1.3; }
.zcell .zl.na { display: none; }
.zl { --zl-h: 8px; position: relative; display: block; height: 18px; min-width: 120px; }
.zl::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; border-radius: 2px; background: var(--grid); }
.zl::after { content: ""; position: absolute; left: calc(50% - 1px); top: 1px; bottom: 1px; width: 2px; border-radius: 1px; background: var(--ink-2); }
.zl i { position: absolute; top: calc(50% - var(--zl-h) / 2); height: var(--zl-h); animation: zl-in var(--t-slow) var(--ease) both; }
.zl i.up { left: 50%; background: var(--good); border-radius: 0 var(--r-xs) var(--r-xs) 0; transform-origin: left center; }
.zl i.down { right: 50%; background: var(--crit); border-radius: var(--r-xs) 0 0 var(--r-xs); transform-origin: right center; }
.zl.clamp i::after { content: ""; position: absolute; top: 50%; translate: 0 -50%; border-block: calc(var(--zl-h) / 2 + 2px) solid transparent; }
.zl.clamp i.up::after { left: calc(100% + 2px); border-left: 6px solid var(--good); }
.zl.clamp i.down::after { right: calc(100% + 2px); border-right: 6px solid var(--crit); }
.zl.na::before { background: repeating-linear-gradient(90deg, var(--axis) 0 4px, transparent 4px 8px); }
@keyframes zl-in { from { transform: scaleX(0); } }

/* progress and coverage */
.progress, .minicov { position: relative; display: block; height: 8px; border-radius: var(--r-pill); background: var(--h0); overflow: hidden; }
.progress > i, .minicov > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--l2); }
.progress.sm, .minicov { height: 6px; }
.minicov { min-width: 60px; }
.progress.lg { height: 12px; }
.progress.stack { display: flex; gap: 2px; }
.progress.stack > i { position: static; flex: var(--n, 1); border-radius: 0; }
.progress.stack > i:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.progress.stack > i:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.progress.stack > i:only-child { border-radius: var(--r-pill); }
.cov, .gb { position: relative; height: 8px; width: 100%; border-radius: var(--r-pill); background: var(--h0); }
.cov { min-width: 80px; }
.cov i, .gb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--l2); }
.cov b, .gb b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.gb.miss { background: color-mix(in oklab, var(--warn) 45%, transparent); }

/* level pickers 0–3 (.lv) and the 1–5 rating rail (.rail) */
.lv { display: inline-flex; max-width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface); vertical-align: middle; }
.lv label { position: relative; cursor: pointer; flex: 1 1 auto; }
.lv input { position: absolute; opacity: 0; pointer-events: none; }
.lv span { display: grid; place-items: center; min-width: 34px; height: 32px; padding: 0 10px; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap;
  border-right: 1px solid var(--border); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lv label:last-of-type span { border-right: 0; }
.lv label:hover span { background: var(--accent-wash); color: var(--ink); }
.lv input:checked + span { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.lv input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -4px; }
.lv input:checked:focus-visible + span { outline-color: var(--on-accent); }
.lv:has(input:disabled) { background: var(--surface-2); border-color: var(--border); }
.lv:has(input:disabled) label { cursor: not-allowed; }
.lv:has(input:disabled) label:hover span { background: none; color: var(--ink-2); }
.lv.wide span { min-width: 92px; }
.lvrow { display: grid; grid-template-columns: minmax(100px, 1fr) auto fit-content(170px); gap: 8px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--grid); }
.lvrow:first-child { border-top: 0; }
.lvrow .nm { font-size: var(--fs-md); min-width: 0; }
.lvrow .self { font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
.lvrow .self b { color: var(--ink-2); font-weight: 500; }
.lvrow .clr { margin: 0; }
.lvcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 32px; }
.lvcols .lvrow { grid-template-columns: minmax(110px, 1fr) auto 52px; }
.lvcols h3 { grid-column: 1 / -1; padding: 14px 0 4px; font: 500 var(--fs-xs)/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rail { position: relative; display: inline-flex; align-items: flex-end; gap: 3px; padding-bottom: 14px; }
.rail label { position: relative; display: grid; place-items: center; cursor: pointer; }
.rail input { position: absolute; opacity: 0; pointer-events: none; }
.rail label span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface);
  font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.rail label.h span { width: 18px; height: 26px; border-radius: var(--r-sm); font-size: 0; background: var(--surface-2); border-color: transparent; }
.rail label:hover span { border-color: var(--ink-2); color: var(--ink); }
.rail label.h:hover span { background: var(--grid); }
.rail input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail label.fill span { background: color-mix(in oklab, var(--l2) 16%, var(--surface)); border-color: transparent; color: var(--ink); }
.rail label.fill.h span { background: color-mix(in oklab, var(--l2) 30%, var(--surface)); }
.rail label input:checked + span { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rail label input:disabled + span { cursor: not-allowed; }
.rail .exp-mark { position: absolute; bottom: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--ink); transform: translateX(-50%); }
.rail .exp-mark::after { content: attr(data-l); position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 0; }
.clr { align-self: center; margin: 0 0 14px 4px; padding: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.clr:hover { color: var(--ink); background: var(--surface-2); }
@media (pointer: coarse) {
  .rail label span { width: 38px; height: 38px; }
  .rail label.h span { width: 24px; height: 32px; }
  .lv span { height: 36px; }
}

/* people picker (app.js turns <select multiple data-picker> into this ARIA combobox) */
.picker { display: grid; gap: var(--s-2); }
.picker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 2px 4px 2px 3px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); }
.pchip > span:not(.av) { min-width: 0; overflow-wrap: anywhere; padding-right: 4px; }
.pchip a { color: inherit; text-decoration: none; }
.pchip a:hover { text-decoration: underline; }
.pchip button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; font-size: 16px; line-height: 1; }
.pchip button:hover { background: color-mix(in oklab, var(--ink) 10%, transparent); color: var(--ink); }
.picker-box { position: relative; max-width: 440px; }
.picker-box .search { display: flex; }
.picker-box .search input { width: 100%; }
.picker-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; margin: 0; padding: 6px; list-style: none; max-height: 300px; overflow: auto;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-3); }
.picker-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-md); font-size: var(--fs-sm); cursor: pointer; }
.picker-opt:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.picker-opt.active { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.picker-opt mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.picker-opt small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.picker-opt:is(:hover, .active) small { color: var(--ink-2); }
.picker-more, .picker-none { padding: 8px; font-size: var(--fs-xs); color: var(--muted); }
.picker-more { margin-top: 4px; border-top: 1px solid var(--grid); }
.picker.is-readonly .picker-chips:empty::after { content: "Ninguém vinculado"; color: var(--muted); font-size: var(--fs-md); }

/* settings-style editable rows (framework, initiatives) */
.rows { display: grid; gap: 8px; }
.rowedit { display: grid; gap: 8px; align-items: center; grid-template-columns: var(--cols); }
.rowedit > * { min-width: 0; }
.rowedit.head { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.rowedit .del { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; cursor: pointer; }
.rowedit:has(.del input:checked) > :not(.del) { opacity: .45; text-decoration: line-through; }

/* flashes: .flash.ok|err|info|warn, first <i> becomes the icon; layout adds a close button */
.flash { --fl: var(--ink-2); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--fl) 24%, transparent); background: color-mix(in oklab, var(--fl) 5%, var(--surface)); box-shadow: var(--e-1); font-size: var(--fs-md); }
.flash > i:first-child { width: 18px; height: 18px; margin-top: 1px; background: var(--fl); -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }
.flash.ok { --fl: var(--accent-ink); }
.flash.ok > i:first-child { -webkit-mask-image: var(--i-ok); mask-image: var(--i-ok); }
.flash.err { --fl: var(--crit-ink); }
.flash.err > i:first-child, .flash.warn > i:first-child { -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
.flash.warn { --fl: var(--warn-ink); background: color-mix(in oklab, var(--warn) 12%, var(--surface)); border-color: color-mix(in oklab, var(--warn) 55%, transparent); }
.flash > div { min-width: 0; }
.flash pre { margin: 6px 0 0; font: var(--fs-sm)/1.5 var(--f-mono); white-space: pre-wrap; }
.flash-x { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px -4px 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); cursor: pointer; }
.flash-x:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); }
.flash-x svg { width: 16px; height: 16px; }
.flash.leaving { animation: fade-out var(--t-med) var(--ease) forwards; }
@keyframes fade-out { to { opacity: 0; transform: translateY(-4px); } }

/* toasts: PACE.toast() */
.toasts { position: fixed; z-index: 90; right: var(--s-4); bottom: var(--s-4); display: grid; gap: var(--s-2); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--surface-3); box-shadow: var(--e-3); animation: toast-in var(--t-med) var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* dialogs: <dialog> (app.js adds the close button); PACE.confirm() builds .dlg-confirm */
dialog { position: fixed; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: var(--s-6); border: 1px solid var(--border);
  border-radius: var(--r-xl); background: var(--surface-3); color: var(--ink); box-shadow: var(--e-3); text-align: left; overscroll-behavior: contain; }
dialog[open] { animation: dlg-in var(--t-med) var(--ease); }
dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fade-in var(--t-med) var(--ease); }
dialog h2 { font-size: var(--fs-xl); line-height: 1.25; margin-bottom: 6px; padding-right: 36px; }
.dlg-x { position: absolute; top: 14px; right: 14px; }
.dlg-confirm { width: min(440px, calc(100vw - 32px)); }
.dlg-confirm form { display: grid; gap: var(--s-4); }
.dlg-confirm .dlg-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink); }
.dlg-confirm .dlg-ic svg { width: 20px; height: 20px; }
.dlg-confirm.danger .dlg-ic { background: color-mix(in oklab, var(--crit) 14%, transparent); color: var(--crit-ink); }
.dlg-confirm h2 { padding-right: 0; margin: 0; }
.dlg-confirm p { color: var(--ink-2); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }

/* empty states: .void (empty_state()) */
.void { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; text-align: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--e-1); }
.void::before { content: ""; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: var(--accent-wash) var(--i-zero) center / 28px no-repeat; }
.void:has(> .void-ic)::before { display: none; }
.void-ic { width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink); }
.void-ic svg { width: 24px; height: 24px; }
.void h3 { font-size: var(--fs-lg); font-weight: 600; }
.void p { color: var(--ink-2); max-width: 52ch; font-size: var(--fs-md); }
.void .form-actions, .void-acts { justify-content: center; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; }
.void > .btn, .void > .btn-ghost { margin-top: 6px; }
.void.compact { padding: 24px 16px; }
.void.compact::before { display: none; }

/* skeletons and busy regions */
.skel { display: block; min-height: 14px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-2) 25%, var(--grid) 37%, var(--surface-2) 63%); background-size: 400% 100%;
  animation: skel 1.4s ease infinite; }
.skel.line { height: 12px; margin: 6px 0; }
.skel.block { height: 120px; }
[aria-busy="true"]:not(.btn, .btn-ghost, .btn-secondary, .btn-quiet, .btn-danger) { cursor: progress; }
@keyframes skel { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* error page */
.errpage { display: grid; justify-items: start; gap: var(--s-3); max-width: 560px; padding: var(--s-10) 0; }
.err-code { position: relative; display: flex; gap: 2px; margin-bottom: var(--s-6); padding-bottom: 14px; font: 600 clamp(64px, 12vw, 104px)/1 var(--f-mono); letter-spacing: -.02em; color: var(--ink); }
.err-code::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--grid) 0 50%, var(--accent) 50% 80%, var(--grid) 80%); }
.err-code::before { content: ""; position: absolute; left: calc(50% - 1px); bottom: -8px; width: 2px; height: 20px; border-radius: 1px; background: var(--ink-2); }
.errpage h1 { font-size: var(--fs-2xl); letter-spacing: -.015em; line-height: var(--lh-tight); }
.errpage .lede { color: var(--ink-2); font-size: var(--fs-base); max-width: 56ch; }
.errpage .form-actions { margin-top: var(--s-2); }
.err-id { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--muted); }
.err-id code { padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink); }
.errpage > .brand { padding: 0; margin-bottom: var(--s-6); }
.errpage.bare { margin: 0 auto; min-height: 100vh; min-height: 100dvh; align-content: center; padding: var(--s-10) var(--s-6); }

/* icon glyphs for masks */
:root {
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm-1 8h2v6H9V9zm1-4.2a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6z'/%3E%3C/svg%3E");
  --i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm4.3 5.6l-5.6 5.7-3-3-1.4 1.4 4.4 4.4 7-7.1-1.4-1.4z'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18zM9 5h2v7H9V5zm1 8.6a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6z'/%3E%3C/svg%3E");
}

/* ==== component: viz ==== */
/* Charts drawn by viz.js from viz($type, $spec) (V0). Classes are .vz-*; colours come from tokens, text wears ink tokens.
   Component variables: --vz-seq (sequential heat end), --vz-dlo/--vz-dhi (diverging fill range, AA with --ink text in both themes),
   nine-box tones per .bN on .vz-nb-cell / .vz-nbb: --nb (cell tint), --nbs (badge fill), --nbo (badge text). */
.vz { --vz-seq: var(--o2); --vz-dlo: 10%; --vz-dhi: 82%; display: block; width: 100%; min-width: 0; container-type: inline-size; font-size: var(--fs-sm); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vz { --vz-seq: var(--o1); --vz-dhi: 50%; } }
:root[data-theme="dark"] .vz { --vz-seq: var(--o1); --vz-dhi: 50%; }
.vz:not([data-vz-ready]) { min-height: var(--vz-min, 120px); }
.vz > script { display: none; }
.vz-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; }
.vz-m { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button.vz-m { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; }
:is(a, button).vz-m { cursor: pointer; }
.vz-m:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 3; }
.vz-note { font-size: var(--fs-xs); color: var(--muted); }
.vz-scroll { overflow-x: auto; max-width: 100%; padding: 3px; margin: -3px; }

/* tooltip (one per page, fixed) */
.vz-tip { position: fixed; z-index: 70; left: 0; top: 0; max-width: min(340px, calc(100vw - 16px)); padding: 8px 10px; pointer-events: none; background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--e-3); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.vz-tip[hidden] { display: none; }
.vz-tv { font-weight: 600; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.vz-tr { color: var(--ink-2); }
.vz-key { display: inline-block; width: 12px; height: 3px; margin: 0 6px 2px 0; border-radius: 2px; vertical-align: middle; }
.vz-th { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--grid); color: var(--muted); font-size: var(--fs-xs); }

/* legend, empty state, data table */
.vz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.vz-lg { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
button.vz-lg { appearance: none; margin: 0 -6px; padding: 2px 6px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; color: inherit; cursor: pointer; }
button.vz-lg:hover { background: var(--surface-2); color: var(--ink); }
button.vz-lg[aria-pressed="false"] { color: var(--muted); }
button.vz-lg[aria-pressed="false"] .vz-sw { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
a.vz-lg { margin: 0 -6px; padding: 2px 6px; border-radius: var(--r-sm); }
a.vz-lg:hover { background: var(--surface-2); color: var(--ink); }
a.vz-lg.on { color: var(--ink); font-weight: 600; }
.vz-sw { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--none)); }
.vz-sw-dot { border-radius: 50%; }
.vz-sw-line { width: 14px; height: 3px; }
.vz-sw-sug { width: 12px; height: 12px; border: 1.5px dashed var(--ink-2); border-radius: 50%; background: none; }
.vz-scale .vz-ramp { width: 96px; height: 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--h0), var(--vz-seq)); }
.vz-scale .vz-ramp.div { background: linear-gradient(90deg, color-mix(in oklab, var(--crit) var(--vz-dhi), var(--surface)), var(--surface) 50%, color-mix(in oklab, var(--good) var(--vz-dhi), var(--surface))); box-shadow: inset 0 0 0 1px var(--grid); }
.vz-scale { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.vz-empty { display: grid; justify-items: center; gap: 6px; padding: 24px 12px; text-align: center; color: var(--muted); }
.vz-empty i { width: 28px; height: 28px; background: var(--i-zero) center / contain no-repeat; }
.vz-empty p { margin: 0; max-width: 46ch; font-size: var(--fs-sm); }
.vz-data > summary { width: fit-content; cursor: pointer; font-size: var(--fs-xs); color: var(--accent-ink); }
.vz-data > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.vz-data .vz-scroll { margin-top: 8px; max-height: 360px; overflow: auto; }
.vz-data table { width: 100%; }

/* bars: stacked horizontal rows */
.vz-rows { --vz-res: 44px; display: grid; grid-template-columns: minmax(56px, max-content) minmax(0, 1fr); gap: 6px 12px; align-items: center; }
.vz-rl { display: grid; justify-self: end; max-width: min(240px, 40cqi); padding: 2px 0; text-align: right; line-height: 1.25; color: var(--ink-2); }
.vz-rl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-rl > small { color: var(--muted); font-size: var(--fs-2xs); }
.vz-rows.wrap .vz-rl > span { white-space: normal; }
a.vz-rl:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.vz-track { display: flex; align-items: center; gap: 8px; min-width: 0; height: 24px; }
.vz-bar { display: flex; flex: none; gap: 2px; width: calc((100% - var(--vz-res)) * var(--w)); min-width: 3px; height: 20px; transform-origin: left center; }
.vz-in .vz-bar, .vz-in .vz-ptrack > *, .vz-in .vz-dtrack i { animation: vz-grow var(--t-slow) var(--ease) both; }
@keyframes vz-grow { from { transform: scaleX(0); } }
.vz-seg { display: block; height: 100%; min-width: 3px; background: var(--c); transition: filter var(--t-fast) var(--ease); }
.vz-seg:last-child { border-radius: 0 var(--r-xs) var(--r-xs) 0; }
:is(a, button).vz-seg:hover, .vz-seg:focus-visible { filter: brightness(1.12) saturate(1.06); }
.vz-seg.on { box-shadow: inset 0 0 0 2px var(--ink); }
.vz-val { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.vz-zero { flex: none; width: 2px; height: 12px; border-radius: 1px; background: var(--axis); }
.vz-rl.on { color: var(--ink); font-weight: 600; }

/* progress and diverging rows: one row = one mark (subgrid keeps the columns aligned) */
.vz-prog, .vz-div { display: grid; grid-template-columns: minmax(64px, max-content) minmax(96px, 1fr) max-content; column-gap: 14px; }
.vz-prow, .vz-drow, .vz-dax { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; margin: 0 -6px; padding: 5px 6px; border-radius: var(--r-sm); }
:is(a, button):is(.vz-prow, .vz-drow):hover, .vz-drow.on, .vz-prow.on { background: var(--surface-2); }
.vz-plab, .vz-dlab { display: grid; min-width: 0; max-width: min(260px, 42cqi); line-height: 1.25; }
.vz-plab > span, .vz-dlab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-plab > small, .vz-dlab > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-2xs); }
:is(a, button):is(.vz-prow, .vz-drow):hover :is(.vz-plab, .vz-dlab) > span, a.vz-plab:hover > span { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.vz-ptrack { position: relative; display: flex; gap: 2px; height: 10px; border-radius: var(--r-pill); background: var(--h0); }
.vz-ptrack > * { display: block; flex: 0 1 auto; height: 100%; background: var(--c); transform-origin: left center; }
.vz-ptrack > :first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.vz-ptrack > :last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.vz-ptrack > :only-child { border-radius: var(--r-pill); }
.vz-pseg { position: relative; }
.vz-pseg::before { content: ""; position: absolute; inset: -7px 0; }
.vz-pseg:hover, .vz-pseg:focus-visible { filter: brightness(1.12); }
.vz-pval { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: var(--fs-xs); text-align: right; }
.vz-dtrack { position: relative; align-self: stretch; min-height: 18px; min-width: 96px; margin-block: -5px;
  background: linear-gradient(var(--grid), var(--grid)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--grid), var(--grid)) 75% 0 / 1px 100% no-repeat; }
.vz-dtrack::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--ink-2); }
.vz-dtrack i { position: absolute; top: calc(50% - 5px); height: 10px; }
.vz-dtrack i.up { background: var(--good); border-radius: 0 var(--r-xs) var(--r-xs) 0; transform-origin: left center; }
.vz-dtrack i.down { background: var(--crit); border-radius: var(--r-xs) 0 0 var(--r-xs); transform-origin: right center; }
.vz-dtrack i.clamp::after { content: ""; position: absolute; top: 50%; translate: 0 -50%; border-block: 7px solid transparent; }
.vz-dtrack i.up.clamp::after { left: calc(100% + 2px); border-left: 6px solid var(--good); }
.vz-dtrack i.down.clamp::after { right: calc(100% + 2px); border-right: 6px solid var(--crit); }
.vz-dtrack.na::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: repeating-linear-gradient(90deg, var(--axis) 0 4px, transparent 4px 8px); }
.vz-prev, .vz-ref { position: absolute; top: calc(50% - 9px); height: 18px; width: 2px; margin-left: -1px; border-radius: 1px; }
.vz-prev { background: var(--ink); opacity: .55; }
.vz-ref { background: var(--accent); }
.vz-dval { min-width: 52px; text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.vz-dval.up { color: var(--good-ink); }
.vz-dval.down { color: var(--crit-ink); }
.vz-dval.na { max-width: 150px; white-space: normal; font-weight: 400; font-size: var(--fs-xs); line-height: 1.25; color: var(--muted); }
.vz-dax { padding-block: 0; }
.vz-dticks { position: relative; height: 16px; }
.vz-dticks span { position: absolute; top: 2px; transform: translateX(-50%); font: 11px/1 var(--f-mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* heatmap and nine-box distribution */
table.vz-hm { border-collapse: separate; border-spacing: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vz-hm th { padding: 2px 6px; font-weight: 400; color: var(--ink-2); }
.vz-hm thead th { vertical-align: bottom; text-align: center; font-size: var(--fs-xs); line-height: 1.2; }
.vz-hm.vert thead th:not(:first-child) > :is(span, a) { display: inline-block; max-height: 150px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-hm th a { color: inherit; text-decoration: none; }
.vz-hm th a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.vz-hm tbody th { position: sticky; left: 0; z-index: 1; max-width: 220px; background: var(--surface); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-hm tbody th small { display: block; color: var(--muted); font-size: 11px; }
.vz-hm td { height: 32px; min-width: 44px; padding: 0; border-radius: var(--r-xs); }
.vz-hm td.tot, .vz-hm th.tot { padding: 0 8px; font-weight: 600; color: var(--ink); text-align: right; }
.vz-hm th.tot small { display: block; font: 400 10.5px var(--f-mono); color: var(--muted); }
.vz-hm tfoot th { text-align: right; }
.vz-c { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 32px; padding: 0 6px; border-radius: var(--r-xs); font-weight: 500; color: var(--ink); }
.vz-c.seq { background: color-mix(in oklab, var(--vz-seq) calc(var(--t) * 100%), var(--h0)); }
.vz-c.pos { background: color-mix(in oklab, var(--good) calc(var(--vz-dlo) + var(--t) * (var(--vz-dhi) - var(--vz-dlo))), var(--surface)); }
.vz-c.neg { background: color-mix(in oklab, var(--crit) calc(var(--vz-dlo) + var(--t) * (var(--vz-dhi) - var(--vz-dlo))), var(--surface)); }
.vz-hm td.zero .vz-c { font-weight: 400; color: var(--muted); }
.vz-hm td.na .vz-c { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--grid) 3px 4.5px); color: var(--muted); }
:is(a, button).vz-c:hover, .vz-c.on { box-shadow: inset 0 0 0 2px var(--ink); }
.vz-hm .vz-c:focus-visible { outline-offset: -2px; }
.vz-dist thead th { padding-inline: 2px; }
.vz-dist thead th .vz-nbb { flex-direction: column; align-items: center; max-width: 68px; white-space: normal; text-align: center; background: none; }
.vz-dist thead th .vz-nbb > span { padding: 3px 0 0; color: var(--ink-2); font-size: 11px; line-height: 1.15; hyphens: auto; overflow-wrap: break-word; }
.vz-dist td { min-width: 40px; }
.vz-dist tbody th { text-align: left; }
.vz-dist td.tot { min-width: 92px; }
.vz-tb { display: block; padding: 4px 2px; border-radius: var(--r-xs); }
.vz-share { display: grid; grid-template-columns: minmax(40px, 1fr) auto; gap: 6px; align-items: center; }
.vz-share i { height: 6px; min-width: 2px; border-radius: var(--r-pill); background: var(--c); }
.vz-share b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* scatter and trend */
.vz-sc, .vz-tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.vz-sc { grid-template-rows: auto var(--h) 22px auto; }
.vz-ylab { grid-row: 1; grid-column: 1 / -1; margin-bottom: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.vz-xlab { grid-row: 4; grid-column: 2; text-align: right; font-size: var(--fs-xs); color: var(--ink-2); }
.vz-yt { grid-row: 2; grid-column: 1; position: relative; min-width: 34px; }
:is(.vz-sc, .vz-tr) > .vz-plot { grid-row: 2; grid-column: 2; }
:is(.vz-sc, .vz-tr) > .vz-xt { grid-row: 3; }
.vz-yt span { position: absolute; right: 0; transform: translateY(-50%); font: 11.5px/1 var(--f-mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vz-xt { position: relative; grid-column: 2; }
.vz-sc .vz-xt span { position: absolute; top: 5px; transform: translateX(-50%); font: 11.5px/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
.vz-plot { position: relative; min-width: 0; border-left: 1px solid var(--axis); border-bottom: 1px solid var(--axis); }
.vz-plot .gx { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
.vz-plot .gy { position: absolute; left: 0; right: 0; height: 1px; background: var(--grid); }
.vz-plot .gx.z, .vz-plot .gy.z { background: var(--axis); }
.vz-plot .gx.z { width: 2px; margin-left: -1px; }
.vz-plot .gy.z { height: 2px; margin-top: -1px; }
.vz-diag, .vz-lines, .vz-nb-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vz-diag line { stroke: var(--ink-2); stroke-width: 1.5; opacity: .5; }
.vz-q { position: absolute; padding: 4px 6px; font-size: 11px; color: var(--muted); pointer-events: none; }
.vz-q.tl { top: 0; left: 0; } .vz-q.tr { top: 0; right: 0; } .vz-q.bl { bottom: 0; left: 0; } .vz-q.br { bottom: 0; right: 0; }
.vz-dot, .vz-pt { position: absolute; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface); transition: box-shadow var(--t-fast) var(--ease); }
.vz-dot { width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); }
.vz-dot::before, .vz-pt::before, .vz-nb-b::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.vz-dot.hollow { background: var(--surface); border: 2px dashed var(--c); }
:is(a, button).vz-pt:hover, .vz-dot.hot, .vz-dot.on, .vz-pt.on { z-index: 2; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.vz-near .vz-dot { pointer-events: none; }
.vz-tr { --pad: 26px; --padx: 30px; grid-template-rows: auto var(--h) auto; }
.vz-tr .vz-plot { border-left: 0; }
.vz-tin { position: absolute; inset: var(--pad) var(--padx); }
.vz-tr .vz-xt { height: 38px; }
.vz-tr .vz-xt .vz-tin { inset: 0 var(--padx); }
.vz-lines polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vz-pt { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.vz-pl { position: absolute; transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 9px)); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; pointer-events: none; }
.vz-pl.dn { transform: translate(calc(-50% + var(--dx, 0px)), 9px); }
.vz-pl[hidden] { display: none; }
.vz-tr .vz-xt span { position: absolute; top: 7px; width: max-content; max-width: var(--mw); transform: translateX(calc(-50% + var(--dx, 0px))); text-align: center; font-size: var(--fs-xs); line-height: 1.25; color: var(--ink-2);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* nine-box: tones run along the diagonal, 1 (critical) through neutral 3/5/7 to 9 (strongest good); number + name always shown.
   Same tints as the panel's Nine Box tab (nbBg in panel.js: 34% / 16% / surface-2). */
:is(.vz-nb-cell, .vz-nbb).b1 { --nb: color-mix(in oklab, var(--crit) 34%, var(--surface)); --nbs: var(--crit); --nbo: var(--on-crit); }
:is(.vz-nb-cell, .vz-nbb):is(.b2, .b4) { --nb: color-mix(in oklab, var(--crit) 16%, var(--surface)); --nbs: color-mix(in oklab, var(--crit) 42%, var(--surface)); --nbo: var(--ink); }
:is(.vz-nb-cell, .vz-nbb):is(.b3, .b5, .b7) { --nb: var(--surface-2); --nbs: var(--none); --nbo: var(--ink); }
:is(.vz-nb-cell, .vz-nbb):is(.b6, .b8) { --nb: color-mix(in oklab, var(--good) 16%, var(--surface)); --nbs: color-mix(in oklab, var(--good) 42%, var(--surface)); --nbo: var(--ink); }
:is(.vz-nb-cell, .vz-nbb).b9 { --nb: color-mix(in oklab, var(--good) 34%, var(--surface)); --nbs: var(--good); --nbo: var(--on-good); }
.vz-nb-grid { position: relative; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(3, minmax(var(--nb-h, 132px), auto)) auto auto; gap: 4px; }
.vz-nb-yt { grid-row: 1; grid-column: 1 / -1; margin-bottom: 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); }
.vz-nb-xt { grid-row: 6; grid-column: 2 / -1; text-align: center; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); }
.vz-nb-ax { font-size: var(--fs-xs); color: var(--ink-2); border-radius: var(--r-xs); }
.vz-nb-ax.y { align-self: center; justify-self: center; padding: 4px 2px; writing-mode: vertical-rl; transform: rotate(180deg); }
.vz-nb-ax.x { display: grid; justify-items: center; padding: 2px 4px; text-align: center; line-height: 1.25; }
.vz-nb-ax.x small { font: 10.5px var(--f-mono); color: var(--muted); }
.vz-nb-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; border-radius: var(--r-md); background: var(--nb); }
.vz-nb-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; margin: -3px; padding: 3px; border-radius: var(--r-sm); }
a.vz-nb-h:hover .vz-nb-name, button.vz-nb-h:hover .vz-nb-name { text-decoration: underline; text-underline-offset: 2px; }
.vz-nb-h.on { box-shadow: inset 0 0 0 2px var(--ink); }
.vz-nb-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--r-xs); background: var(--nbs); color: var(--nbo); font: 600 12px/1 var(--f-mono); }
.vz-nb-name { min-width: 0; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.vz-nb-k { font-size: var(--fs-lg); font-weight: 600; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.vz-nb-k small { display: block; margin-top: 3px; font: 400 11px/1 var(--f-mono); color: var(--ink-2); }
.vz-nb-ps { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; min-width: 0; }
.vz-nb-p { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 24px; padding: 2px 8px 2px 6px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: 12.5px; line-height: 1.2; color: var(--ink); }
.vz-nb-p.sug { border: 1.5px dashed var(--ink-2); background: color-mix(in oklab, var(--surface) 60%, transparent); }
:is(a, button).vz-nb-p:hover { border-color: var(--accent); }
.vz-nb-p.on { box-shadow: 0 0 0 2px var(--ink); }
.vz-nb-pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-nb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.vz-mv { font-weight: 700; }
.vz-mv.up { color: var(--good-ink); } .vz-mv.dn { color: var(--crit-ink); } .vz-mv.eq { color: var(--ink-2); }
.vz-nb-ps.dots { gap: 6px; }
.vz-nb-ps.dots .vz-nb-p { position: relative; width: 18px; height: 18px; min-height: 0; padding: 0; border: 2px solid var(--surface); background: var(--c); }
.vz-nb-ps.dots .vz-nb-p.sug { border: 2px dashed var(--c); background: var(--surface); }
.vz-nb-ps.dots :is(.vz-nb-pn, .vz-nb-dot, .vz-mv) { display: none; }
.vz-nb-more { appearance: none; min-height: 24px; padding: 2px 9px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); font: 600 12px/1.2 var(--f-sans); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.vz-nb-more:hover { color: var(--ink); border-color: var(--accent); }
.vz-nb-tag { display: inline-flex; gap: 6px; align-items: center; align-self: flex-start; font-size: var(--fs-xs); }
.vz-nb-tag .vz-nb-n { min-width: 18px; height: 18px; font-size: 11px; }
.vz-nb-tag .vz-nb-name { font-weight: 500; color: var(--ink-2); }
/* teams mode (D12, V01): taller boxes; the box title is a link whose hit area and focus ring are the whole box */
.vz-nb-grid.teams { --nb-h: 140px; }
.vz-nb-grid.teams .vz-nb-cell { position: relative; }
.vz-nb-grid.teams .vz-nb-tag > * { position: relative; z-index: 1; } /* M8: trails and rings pass under the box titles */
.vz-nb-grid.teams .vz-nb-tag > .vz-nb-name { border-radius: var(--r-xs); background: var(--nb); box-shadow: 0 0 0 2px var(--nb); } /* masks without changing the title's size */
:is(a, button).vz-nb-tag::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
:is(a, button).vz-nb-tag:hover::after { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
:is(a, button).vz-nb-tag:hover .vz-nb-name { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.vz-nb-tag.vz-m:focus-visible { outline: none; z-index: auto; }
.vz-nb-tag:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.vz-nb-tag.on::after { box-shadow: inset 0 0 0 2px var(--ink); }
.vz-nb-layer { position: relative; grid-row: 2 / 5; grid-column: 2 / 5; pointer-events: none; }
.vz-nb-b { position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; background: color-mix(in oklab, var(--c) 86%, transparent);
  box-shadow: 0 0 0 2px var(--surface); pointer-events: auto; }
.vz-nb-b.sug { outline: 1.5px dashed var(--ink-2); outline-offset: 2px; }
.vz-nb-teams small { color: var(--muted); font-variant-numeric: tabular-nums; }
:is(a, button).vz-nb-b:hover, .vz-nb-b.on { z-index: 2; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.vz-nb-bl { position: absolute; top: 50%; left: calc(100% + 6px); padding: 1px 5px; border-radius: var(--r-xs); background: color-mix(in oklab, var(--surface) 82%, transparent);
  transform: translateY(-50%); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--ink); }
.vz-nb-b.lft .vz-nb-bl { left: auto; right: calc(100% + 6px); }
.vz-nb-bl { max-width: 13em; overflow: hidden; text-overflow: ellipsis; }
.vz-nb-bl.fit { right: auto; transform: none; } /* placed by fitTeams() (left/top inline) */
.vz-nb-bl[hidden] { display: none; }
.vz-nb-ghost { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px dashed var(--c, var(--ink-2)); border-radius: 50%; }
.vz-nb-trail line { stroke: var(--c, var(--ink-2)); stroke-width: 2; stroke-linecap: round; opacity: .55; } /* M8: lighter, under the bubbles */
.vz-nb-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vz-nb-lead line { stroke: var(--c, var(--ink-2)); stroke-width: 1.25; opacity: .8; } /* a label placed away from its bubble points back to it */
.vz-nb-hidn { margin: 6px 0 0; }
.vz-nb-hidn[hidden] { display: none; }
.vz-nb-tools { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.vz-nb-outs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vz-nb-out { display: inline-flex; gap: 4px; align-items: center; min-height: 24px; padding: 2px 10px; border: 1px dashed var(--axis); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--ink-2); }
a.vz-nb-out:hover { color: var(--ink); border-color: var(--accent); }
.vz-nb-out b { color: var(--ink); }
.vz-nb-sw { font-size: var(--fs-xs); }
/* nine_box_badge(): number on the box tone + name */
.vz-nbb { display: inline-flex; align-items: stretch; max-width: 100%; overflow: hidden; border-radius: var(--r-xs); background: var(--nb); font-size: var(--fs-xs); line-height: 1.25; white-space: nowrap; vertical-align: middle; }
.vz-nbb > b { display: grid; place-items: center; min-width: 20px; padding: 2px 5px; background: var(--nbs); color: var(--nbo); font: 600 11px/1.25 var(--f-mono); border-radius: var(--r-xs); }
.vz-nbb > span { padding: 2px 6px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.vz-nbb > small { padding: 2px 6px 2px 0; color: var(--ink-2); font-size: 11px; }
.vz-nbb.sug { outline: 1.5px dashed var(--ink-2); outline-offset: -1.5px; }
.vz-nbb.out { background: none; outline: 1px dashed var(--axis); outline-offset: -1px; color: var(--ink-2); }
.vz-nbb.out > span { color: var(--ink-2); }
.vz-nbb .vz-mv { padding: 2px 6px 2px 0; color: var(--ink); } /* V13: on the box tint the glyph's shape carries the direction; ink keeps it AA */

@container (max-width: 520px) {
  .vz-nb-grid { --nb-h: 96px; gap: 3px; }
  .vz-nb-cell { gap: 6px; padding: 6px; }
  .vz-nb-h { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n k" "name name"; gap: 4px 6px; }
  .vz-nb-h > .vz-nb-n { grid-area: n; }
  .vz-nb-h > .vz-nb-name { grid-area: name; font-size: 12px; }
  .vz-nb-tag .vz-nb-name { font-size: 11px; }
  .vz-nb-k { grid-area: k; display: flex; gap: 5px; align-items: baseline; text-align: left; font-size: var(--fs-md); }
  .vz-nb-k small { margin: 0; }
  .vz-nb-ps { gap: 6px; }
  .vz-nb-ps .vz-nb-p { position: relative; width: 18px; height: 18px; min-height: 0; padding: 0; border: 2px solid var(--surface); background: var(--c); }
  .vz-nb-ps .vz-nb-p.sug { border: 2px dashed var(--c); background: var(--surface); }
  .vz-nb-ps :is(.vz-nb-pn, .vz-nb-dot, .vz-mv) { display: none; }
  .vz-nb-bl { max-width: 9.5em; font-size: 11px; }
  .vz-nb-grid.teams { --nb-h: 116px; }
}
@container (max-width: 440px) {
  .vz-rows { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .vz-rl { justify-self: start; max-width: 100%; text-align: left; }
  .vz-track { margin-bottom: 6px; }
  .vz-prog, .vz-div { grid-template-columns: minmax(0, 1fr) max-content; }
  :is(.vz-plab, .vz-dlab) { grid-column: 1 / -1; max-width: 100%; }
  .vz-dtrack { margin-block: 2px 0; }
  .vz-dax > span:first-child, .vz-dax > span:last-child { display: none; }
  .vz-tr { --padx: 22px; }
}
@media (forced-colors: active) {
  .vz-seg, .vz-pseg, .vz-ptrack > i, .vz-c, .vz-dot, .vz-pt, .vz-dtrack i, .vz-nb-cell, .vz-nb-n, .vz-nb-b, .vz-nb-dot, .vz-nbb, .vz-sw, .vz-share i { forced-color-adjust: none; }
}
@media print {
  :root:root:root .vz { --vz-seq: var(--o2); --vz-dhi: 82%; }
  .vz-tip, .vz-data, .vz-nb-sw, button.vz-nb-more { display: none !important; }
  .vz, .vz-nbb { break-inside: avoid; }
  .vz *, .vz-nbb, .vz-nbb * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vz-in .vz-bar, .vz-in .vz-ptrack > *, .vz-in .vz-dtrack i { animation: none; }
  .vz-hm tbody th { position: static; }
}

/* ==== 5 · utilities ==== */
.stack { display: grid; gap: var(--s-2); align-content: start; }
.stack-1 { display: grid; gap: var(--s-1); align-content: start; }
.stack-3 { display: grid; gap: var(--s-3); align-content: start; }
.stack-4 { display: grid; gap: var(--s-4); align-content: start; }
.stack-6 { display: grid; gap: var(--s-6); align-content: start; }
/* V11: .stack is a layout utility; <table class="dt stack"> (phone cards, 5b) stays a real table until ≤ 640px.
   Same specificity as the 5b rule "table.stack, table.stack tbody { display: block }", which comes later and wins on phones. */
table.stack { display: table; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; min-width: 0; }
.between { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between; min-width: 0; }
.self-start { justify-self: start; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.w-auto { width: auto !important; }
.minw-0 { min-width: 0; }
.t-xs { font-size: var(--fs-xs); } .t-sm { font-size: var(--fs-sm); } .t-md { font-size: var(--fs-md); } .t-lg { font-size: var(--fs-lg); } .t-xl { font-size: var(--fs-xl); }
.t-strong { font-weight: 600; } .t-medium { font-weight: 500; }
.t-good { color: var(--good-ink); } .t-crit { color: var(--crit-ink); } .t-warn { color: var(--warn-ink); } .t-accent { color: var(--accent-ink); }
.h-section { font: 600 var(--fs-xl)/1.25 var(--f-sans); letter-spacing: -.01em; }
.truncate { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pre-line { white-space: pre-line; }
.hscroll { overflow-x: auto; }

/* ==== 5b · responsive (shell, components, utilities) ==== */
@media (max-width: 1180px) { .kpis:where(:has(> :nth-child(5):last-child)) { --kc: 3; } }
@media (max-width: 1100px) {
  /* KPI rows: 3, 6 and 9 tiles keep 3 columns; the rest go to 2, and an odd last tile takes the whole row */
  .kpis:where(:not(:has(> :nth-child(3):last-child, > :nth-child(6):last-child, > :nth-child(9):last-child))) { --kc: 2; }
  .kpis:where(:not(:has(> :nth-child(3):last-child, > :nth-child(6):last-child, > :nth-child(9):last-child))) > :nth-child(odd):last-child { grid-column: 1 / -1; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) and (min-width: 721px) {
  /* editable rows: equal fluid columns instead of the fixed minimums in --cols */
  .rowedit { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(300px, 86vw); transform: translateX(-104%); visibility: hidden; box-shadow: var(--e-3);
    transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med); }
  body.nav-open .side { transform: none; visibility: visible; transition: transform var(--t-med) var(--ease), visibility 0s; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: var(--scrim); animation: fade-in var(--t-med) var(--ease); }
  body.nav-open { overflow: hidden; }
  .side-x { display: inline-flex !important; }
  .burger { display: inline-flex !important; margin-left: -8px; }
  .crumbs { display: none; }
  .tb-title { display: block; flex: 1 1 auto; }
  .topbar .spacer { display: none; }
  .topbar { gap: var(--s-2); }
  .cyc-k { display: none; }
  .fgrid .span2 { grid-column: auto; }
  .page { padding-top: var(--s-5); padding-bottom: 48px; }
  /* without JS the menu simply sits above the page */
  html:not(.js) .side { position: static; width: auto; height: auto; transform: none; visibility: visible; box-shadow: none; border-right: 0; border-bottom: 1px solid var(--border); }
  html:not(.js) .burger, html:not(.js) .side-x { display: none !important; }
}
@media (max-width: 760px) {
  .kpis { --kc: 2; }
  .kpis > :nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .rowedit:not(.head) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  .rowedit:not(.head) > :not(input[type=hidden]):not(.del):not(.note) { grid-column: 1 / -1; }
  .rowedit.head { display: none; }
}
@media (max-width: 640px) {
  .phead { align-items: stretch; }
  .phead .acts { width: 100%; }
  .phead .acts > * { flex: 1 1 auto; }
  .tools > :not(.grow):not(.note) { flex: 1 1 calc(50% - 10px); }
  .tools > .search:not(.grow):not(.note) { flex: 1 1 100%; }
  .tools .search input, .tools .in { width: 100%; min-width: 0; }
  .cyc-btn { max-width: 52vw; padding-inline: 10px 8px; }
  .cyc-btn .st { width: 24px; padding: 0; justify-content: center; }
  .cyc-btn .st .stl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lvrow, .lvcols .lvrow { grid-template-columns: minmax(0, 1fr) auto !important; }
  .lvrow:has(.lv.wide) { grid-template-columns: minmax(0, 1fr) !important; }
  .lvrow > :nth-child(3) { grid-column: 1 / -1; }
  .lvrow > span:empty { display: none; }
  .lvrow > span:has(> .lv.wide) { width: 100%; }
  .lv.wide { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); }
  .lv.wide span { min-width: 0; padding: 0 8px; border-right: 0; background: var(--surface); }
  .lv.wide label:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lv.wide input:checked + span { background: var(--accent); }
  .tile { padding: 12px 14px; }
  .tile .val.long { font-size: var(--fs-xl); }
  /* legacy: views that still size a long value inline (style="font-size:24px") get the .long phone size */
  .tile .val[style*="font-size"] { font-size: var(--fs-xl) !important; }
  .sec-h { flex-wrap: wrap; }
  .card { padding: var(--s-4); }
  .card > table:not(.stack) { display: block; max-width: 100%; overflow-x: auto; }
  dialog { padding: var(--s-5); }
  .toasts { left: var(--s-4); right: var(--s-4); width: auto; }
  /* opt-in stacked rows: <table class="dt stack"> + <td data-label="…">; .full spans both columns, .end sits right */
  .tw:has(> table.stack) { overflow: visible; background: none; border: 0; box-shadow: none; -webkit-mask-image: none; mask-image: none; }
  table.stack, table.stack tbody { display: block; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; margin-bottom: 8px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-1); }
  table.stack td { display: block; padding: 0; border: 0 !important; min-width: 0; text-align: left; }
  table.stack td.num { text-align: left; }
  table.stack td:first-child, table.stack td.full { grid-column: 1 / -1; }
  table.stack td.end { grid-column: 2; justify-self: end; text-align: right; }
  table.stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--fs-xs); color: var(--muted); }
  table.stack td:empty { display: none; }
  table.stack tbody tr:hover td { background: none; }
}
@media (max-width: 360px) {
  .kpis { --kc: 1; }
  .kpis > :nth-child(odd):last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .spin, :is(.btn, .btn-ghost, .btn-secondary, .btn-quiet, .btn-danger)[aria-busy="true"]::after { animation: spin 1.6s linear infinite !important; }
}

/* ==== page: home ==== */
/* Landing pages (dashboard, home). The analytics engine's own styles live in panel.css. */
/* P1: Início (home/*), Acompanhamento (progress/*), command palette (home/palette.php + palette.js), nav dot, topbar search. */

/* nav: Início on top; a dot badge ("not done yet") */
.nav-top { margin-bottom: 2px; }
.nav .cnt.is-dot { min-width: 0; width: 8px; height: 8px; padding: 0; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.nav .cnt.is-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 30%, transparent); }

/* topbar search button */
.tb-search { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 34px; min-width: 210px; padding: 0 5px 0 12px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); background: var(--surface); box-shadow: var(--e-1); color: var(--muted); font: inherit; font-size: var(--fs-sm);
  cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tb-search:hover { border-color: color-mix(in oklab, var(--ink) 34%, transparent); color: var(--ink-2); }
.tb-search > svg { width: 16px; height: 16px; }
.tb-search-t { flex: 1; text-align: left; }
.tb-kbd { padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font: 500 var(--fs-2xs)/1 var(--f-mono); white-space: nowrap; }

/* command palette */
dialog.pal { width: min(660px, calc(100vw - 24px)); max-height: min(580px, calc(100dvh - 32px)); margin: min(11vh, 110px) auto auto; padding: 0; overflow: hidden; }
dialog.pal[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.pal-in { display: flex; align-items: center; gap: 12px; padding: 14px 64px 14px 18px; border-bottom: 1px solid var(--grid); }
.pal-in:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.pal-in > svg { width: 20px; height: 20px; color: var(--muted); }
.pal-in input { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; background: none; color: var(--ink); font: var(--fw-text) var(--fs-lg)/1.3 var(--f-sans); outline: none; }
.pal-in input::placeholder { color: var(--muted); }
.pal-esc { top: 14px; right: 14px; width: auto; padding: 0 4px; }
.pal-esc kbd { font: 500 var(--fs-2xs)/1 var(--f-mono); padding: 4px 6px; }
.pal-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; scrollbar-width: thin; }
.pal-list[aria-busy="true"] { opacity: .7; }
.pal-g + .pal-g { margin-top: 2px; }
.pal-gh { position: sticky; top: -6px; z-index: 1; margin: 0; padding: 10px 10px 5px; background: var(--surface-3); font: 500 var(--fs-2xs)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pal-o { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 10px; border-radius: var(--r-md); cursor: pointer; }
.pal-o.on { background: var(--accent-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent); }
.pal-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); }
.pal-ic svg { width: 16px; height: 16px; }
.pal-o .av.sm { width: 30px; height: 30px; font-size: 11px; }
.pal-o.on .pal-ic { background: var(--surface); color: var(--accent-ink); }
.pal-t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.pal-t b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-t small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-o.on .pal-t small { color: var(--ink-2); }
.pal-t mark { padding: 0 1px; border-radius: 2px; background: color-mix(in oklab, var(--warn) 38%, transparent); color: inherit; }
.pal-o > .st { flex: none; }
.pal-acts { display: flex; gap: 4px; flex: none; }
.pal-act { padding: 4px 9px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.2; }
.pal-act:hover { border-color: var(--accent); color: var(--ink); }
.pal-o.on .pal-act.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.pal-go { display: grid; place-items: center; color: var(--muted); opacity: 0; }
.pal-go svg { width: 16px; height: 16px; }
.pal-o.on .pal-go { opacity: 1; color: var(--accent-ink); }
.pal-empty { display: grid; gap: 6px; padding: 32px 16px; text-align: center; color: var(--ink-2); }
.pal-empty small { color: var(--muted); }
.pal-spin { flex: none; }
.pal-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 9px 16px; border-top: 1px solid var(--grid); background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-2); }
.pal-foot span { display: inline-flex; align-items: center; gap: 3px; }
.pal-foot kbd { font: 500 var(--fs-2xs)/1 var(--f-mono); padding: 2px 5px; }

/* banners with an action */
.flash.hm-flash { align-items: center; }

/* cycle band: identity + the pace of the cycle (time gone vs work done) */
.hm-band { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: var(--s-5) var(--s-8); align-items: center; padding: var(--s-5) var(--s-6);
  overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--e-1); }
.hm-band::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.hm-band.is-warn::before { background: var(--warn); }
.hm-cyc { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.hm-cyc-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent-ink); }
.hm-band.is-warn .hm-cyc-ic { background: color-mix(in oklab, var(--warn) 22%, var(--surface)); color: var(--warn-ink); }
.hm-cyc-ic svg { width: 20px; height: 20px; }
.hm-cyc-n { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.hm-cyc-n b { font-weight: 600; }
.hm-cyc-d { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.hm-cyc .note { margin-top: 6px; }
.hm-dl { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; color: var(--ink-2); }
.hm-dl.warn { color: var(--warn-ink); }
.hm-dl svg { width: 15px; height: 15px; }
.hm-pace { position: relative; display: grid; gap: 10px; min-width: 0; }
.hm-pr { display: grid; grid-template-columns: minmax(9em, 12em) minmax(0, 1fr) minmax(5.5em, auto); gap: 14px; align-items: center; margin: -3px -6px; padding: 3px 6px;
  border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
a.hm-pr:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }
a.hm-pr:hover .hm-pl { color: var(--ink); text-decoration: underline; }
.hm-pl { font-size: var(--fs-sm); color: var(--ink-2); }
.hm-pt { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--h0); }
.hm-pt > i { position: absolute; inset: 0 auto 0 0; max-width: 100%; border-radius: inherit; background: var(--l2); animation: hm-grow var(--t-slow) var(--ease) both; transform-origin: left center; }
.hm-pr.is-time .hm-pt > i { background: repeating-linear-gradient(-45deg, var(--ink-2) 0 2px, color-mix(in oklab, var(--ink-2) 55%, transparent) 2px 5px); opacity: .55; }
.hm-pace.has-today .hm-pr:not(.is-time) .hm-pt::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: var(--today); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.hm-pv { font-size: var(--fs-sm); color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-pv b { color: var(--ink); font-weight: 600; }
.hm-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 500; }
.hm-verdict svg { width: 16px; height: 16px; }
.hm-vt { display: inline-flex; align-items: center; gap: 6px; }
.hm-verdict.ok { color: var(--accent-ink); }
.hm-verdict.warn { color: var(--warn-ink); }
.hm-verdict .note { font-weight: 400; }
/* V17: a legend swatch for the "today" line instead of a "·" separator that could start a line */
.hm-todaylg { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.hm-todaylg i { width: 2px; height: 14px; border-radius: 1px; background: var(--ink); }
@keyframes hm-grow { from { transform: scaleX(0); } }

/* layouts */
.hm-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: var(--s-5); align-items: start; }
.hm-mine { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.hm-mine.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.hm-sec { display: grid; gap: var(--s-3); min-width: 0; scroll-margin-top: calc(var(--topbar-h) + 12px); }
#lembretes { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* queue (gestor) */
.hm-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: var(--fs-md); color: var(--ink-2); }
.hm-big b { font: 600 40px/1 var(--f-sans); letter-spacing: -.02em; color: var(--ink); }
.hm-big span { color: var(--muted); }
.hm-stack { display: flex; gap: 3px; height: 14px; min-width: 0; }
.hm-stack.sm { height: 10px; }
.hm-stack.xs { height: 8px; gap: 2px; }
.hm-seg { flex: var(--n, 1) 1 0px; min-width: 6px; border-radius: 3px; background: var(--none); transition: box-shadow var(--t-fast) var(--ease); }
.hm-seg:first-child { border-top-left-radius: var(--r-pill); border-bottom-left-radius: var(--r-pill); }
.hm-seg:last-child { border-top-right-radius: var(--r-pill); border-bottom-right-radius: var(--r-pill); }
.hm-seg.k-done { background: var(--l2); }
.hm-seg.k-draft { background: var(--warn); }
.hm-seg.k-inc { background: var(--l1); }
.hm-seg.k-ok { background: var(--good); }
.hm-seg.k-below { background: var(--crit); }
a.hm-seg:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink); }
a.hm-seg { position: relative; } a.hm-seg::before { content: ""; position: absolute; inset: -7px 0; } /* D16: ≥ 24px tall hit area, as .vz-pseg */
.hm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.hm-legend.sm { gap: 4px 12px; font-size: var(--fs-xs); }
.hm-lg { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
a.hm-lg:hover { color: var(--ink); text-decoration: underline; }
.hm-lg i { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--none); }
.hm-lg b { color: var(--ink); font-weight: 600; }
.hm-lg.k-done i { background: var(--l2); }
.hm-lg.k-draft i { background: var(--warn); }
.hm-lg.k-inc i { background: var(--l1); }
.hm-lg.k-ok i { background: var(--good); }
.hm-lg.k-below i { background: var(--crit); }
.hm-lg.k-exp i { width: 4px; height: 14px; border-radius: 2px; background: var(--ink); }
.hm-lg.k-got i { border-radius: 50%; background: linear-gradient(90deg, var(--good) 50%, var(--crit) 50%); }
.hm-h3 { margin: 4px 0 -4px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.hm-todo { display: grid; margin: 0; padding: 0; list-style: none; }
.hm-todo li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--grid); }
.hm-todo .who .sub { display: block; }
.hm-todo-st { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.hm-done { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-wash); }
.hm-done-ic { display: grid; color: var(--accent-ink); }
.hm-done-ic svg { width: 22px; height: 22px; }

/* own cards */
.hm-selfcard:is(.is-none, .is-draft) { box-shadow: inset 3px 0 0 var(--accent), var(--e-1); }
.hm-selfcard p { margin: 0; }
.hm-lock { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--ink-2); }
.hm-lock svg { width: 18px; height: 18px; margin-top: 2px; color: var(--muted); }
.hm-res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.hm-res-v .dev { font-size: 28px; letter-spacing: -.01em; }
.hm-last { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--grid); }
.hm-last .hm-res-v .dev { font-size: var(--fs-xl); }
.hm-kpis-sm .tile .val { font-size: 24px; }
.hm-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-2); }
.hm-hint svg { width: 16px; height: 16px; margin-top: 2px; color: var(--accent-ink); }

/* nine box: chart + summary */
.hm-nb { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: var(--s-6); align-items: start; }
.hm-nb-main { min-width: 0; }
.hm-nb-side { display: grid; gap: 12px; align-content: start; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.hm-mini9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.hm-mini9 .vz-nb-cell { flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; min-height: 46px; padding: 6px 8px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 6%, transparent); }
.hm-mini9 .vz-nb-cell b { padding: 3px 5px; border-radius: var(--r-xs); background: var(--nbs); color: var(--nbo); font: 600 11px/1 var(--f-mono); }
.hm-mini9 .vz-nb-cell span { font: 600 var(--fs-lg)/1 var(--f-sans); font-variant-numeric: tabular-nums; }
.hm-mini9 .vz-nb-cell.is-zero span { font-weight: 400; color: var(--muted); }
.hm-mini9 a.vz-nb-cell:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.hm-axis { display: flex; justify-content: space-between; margin: -6px 0 0; font-size: var(--fs-2xs); }
.hm-facts { display: grid; margin: 0; }
.hm-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--grid); font-size: var(--fs-sm); }
.hm-facts dt { color: var(--ink-2); }
.hm-facts dt small { color: var(--ink-2); font-size: var(--fs-2xs); }
.hm-facts dd { margin: 0; text-align: right; }
.hm-facts dd a { color: var(--accent-ink); }
.hm-facts b { font-weight: 600; }
.hm-moves { display: flex; gap: 10px; }
.hm-moves > :is(a, span) { display: inline-flex; gap: 2px; }
.hm-moves > span { color: var(--muted); }
.hm-nb-sides { display: grid; min-width: 0; }
/* the expectation rails share one value column, so every rail starts at the same x (ONB-05) */
.hm-rv small { color: var(--muted); font-size: var(--fs-xs); }
/* gestor: "Como ler o Nine Box" */
.hm-how { border-top: 1px solid var(--grid); padding-top: 10px; }
.hm-how > summary { cursor: pointer; width: max-content; max-width: 100%; font-size: var(--fs-sm); font-weight: 500; color: var(--accent-ink); }
.hm-how[open] { display: grid; gap: 10px; }
.hm-how .note { margin: 0; }
.hm-how-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.hm-how-l li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-sm); color: var(--ink-2); }
.hm-how-l .vz-nbb { justify-self: start; }
/* leitura área card: Topo · Base as two links */
.hm-nbtb a { color: var(--ink); }

/* setup checklist */
.hm-setup.is-big { background: color-mix(in oklab, var(--accent) 4%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 24%, transparent); }
.hm-steps-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hm-steps-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-content: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.hm-steps-list li > a { grid-column: 2; justify-self: start; }
.hm-steps-list b, .hm-flow b { display: block; font-weight: 600; }
.hm-steps-list small { display: block; font-size: var(--fs-xs); color: var(--muted); }
/* ONB-02: one checklist (CompanyController::checklist); only the next step is a primary button */
.hm-steps-list li.is-done { background: var(--surface-2); border-color: transparent; }
.hm-steps-list li.is-done b { color: var(--ink-2); font-weight: 500; }
.hm-steps-list li.is-now { border-color: color-mix(in oklab, var(--accent) 45%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); }
.hm-step-a { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-left: -2px; min-width: 0; }
.hm-step-a .btn-quiet { height: auto; min-height: var(--h-sm); white-space: normal; text-align: left; }
.hm-setup.is-big .hm-steps-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }
.hm-step-a form { display: contents; }
.hm-setup .sec-h .note a { color: var(--accent-ink); }
.hm-setup.is-compact .hm-steps-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); gap: 6px; }
.hm-setup.is-compact .hm-steps-list li { align-items: center; padding: 8px 10px; font-size: var(--fs-sm); }
.hm-setup.is-compact .hm-steps-list b { font-weight: 500; line-height: 1.25; }
.hm-setup.is-compact .hm-sn { width: 22px; height: 22px; font-size: 11px; }
.hm-setup-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-wash); }
.hm-setup-next p { display: grid; gap: 1px; margin: 0; min-width: 0; }
.hm-setup-next .note { font: 500 var(--fs-2xs)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.hm-setup-next b { font-weight: 600; }
.hm-setup-next small { font-size: var(--fs-sm); color: var(--ink-2); }
.hm-setup-next .hm-step-a { margin: 0; }
.hm-sn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--axis); font: 600 12px/1 var(--f-mono); }
.hm-sn svg { width: 14px; height: 14px; }
.is-done > .hm-sn { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.is-part > .hm-sn { background: color-mix(in oklab, var(--warn) 18%, var(--surface)); color: var(--warn-ink); box-shadow: inset 0 0 0 2px var(--warn); }
.is-now > .hm-sn { background: var(--surface); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
.is-wait > .hm-sn { background: conic-gradient(var(--accent) 0 50%, var(--surface) 0); color: transparent; box-shadow: inset 0 0 0 2px var(--accent); }

/* areas (leitura) */
.hm-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--s-4); }
.hm-area { gap: 12px; box-shadow: inset 0 3px 0 var(--ac, var(--none)), var(--e-1); }
.hm-area-h { display: flex; align-items: center; gap: 8px; }
.hm-area-h h3 { flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: 600; }
.hm-area-h h3 a { color: var(--ink); text-decoration: none; }
.hm-area-h h3 a:hover { text-decoration: underline; }
.hm-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--ac, var(--none)); }
.hm-area-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--grid); }
.hm-area-f dt { font-size: var(--fs-xs); color: var(--muted); }
.hm-area-f dd { margin: 2px 0 0; font-size: var(--fs-sm); }
.hm-area-f dd a { color: var(--ink); }
.hm-go { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: var(--fs-sm); font-weight: 500; color: var(--accent-ink); text-decoration: none; }
.hm-go svg { width: 14px; height: 14px; }
.hm-go:hover { text-decoration: underline; }
.hm-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font: 500 var(--fs-2xs)/1.2 var(--f-mono); white-space: nowrap; }

/* colaborador: 3 steps, expectations rail */
.hm-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hm-flow li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.hm-flow li.is-now { background: var(--accent-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); }
.hm-flow li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -11px; width: 8px; height: 8px; border-top: 2px solid var(--axis); border-right: 2px solid var(--axis); transform: translateY(-50%) rotate(45deg); }
.hm-flow small { display: block; margin: 2px 0 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.hm-flow .btn, .hm-flow .btn-quiet { margin-left: -2px; }
.hm-rails { display: grid; margin: 0; padding: 0; list-style: none; }
.hm-rails li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(110px, 1fr) 4.6em; gap: 14px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--grid); border-radius: var(--r-xs); }
.hm-rails li:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.hm-rl { font-size: var(--fs-sm); }
.hm-rail { position: relative; height: 22px; margin: 0 7px; }
.hm-rail::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; border-radius: 1px; background: var(--grid); }
.hm-rail i { position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--axis); transform: translate(-50%, -50%); }
.hm-exp { position: absolute; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); }
.hm-rail u { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--surface); transform: translate(-50%, -50%); }
.hm-rail u.up { background: var(--good); }
.hm-rail u.down { background: var(--crit); }
.hm-rv { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.hm-rv b { color: var(--ink); font-weight: 600; }

/* acompanhamento */
.hm-mgr { gap: 0; }
.hm-card-h { display: grid; gap: 14px; padding: var(--s-5) var(--s-5) var(--s-4); }
.hm-mgr > .tw { border: 0; border-top: 1px solid var(--grid); border-radius: 0; box-shadow: none; }
.hm-mgr > .tw > table.dt :is(thead th, tbody tr:last-child td) { border-radius: 0 !important; }
.hm-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hm-sort::after { content: "↕"; opacity: .4; font-size: .9em; }
th[aria-sort="ascending"] .hm-sort::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .hm-sort::after { content: "↓"; opacity: 1; }
.hm-sort:hover { color: var(--ink); }
.hm-num { display: inline-block; min-width: 30px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; text-align: center; text-decoration: none; }
.hm-num:hover { text-decoration: underline; }
.hm-zero { display: inline-block; min-width: 30px; text-align: center; color: var(--muted); }
.hm-mini { display: grid; grid-template-columns: minmax(70px, 1fr) auto; gap: 10px; align-items: center; min-width: 140px; }
.hm-pctv { min-width: 3.4em; font: 500 var(--fs-sm)/1.2 var(--f-mono); color: var(--ink-2); text-align: right; }
a.hm-pctv { color: var(--accent-ink); }
.hm-inc { display: block; margin-top: 2px; font-size: var(--fs-2xs); color: var(--warn-ink); }
a.hm-miss { width: max-content; margin-left: auto; color: var(--warn-ink); text-decoration: underline; text-underline-offset: 2px; }
.hm-acts { white-space: nowrap; text-align: right; }
.hm-acts > * + * { margin-left: 4px; }
.hm-acts .btn-icon { vertical-align: middle; }
/* V05: the follow-up tables fit 1440 without cutting the action column */
.hm-mgr .hm-tbl td:first-child { min-width: 200px; }
.hm-mgr .hm-tbl td:first-child .sub { max-width: 24ch; }
.hm-mgr .hm-mini { min-width: 120px; }
.hm-tbl tr.tot td { background: var(--surface-2); font-weight: 600; }
.hm-tbl .who .sub { display: block; }
.hm-tbl td:first-child { min-width: 220px; }
.hm-tbl td:first-child .who > span { min-width: 0; }
.hm-tbl td:first-child .sub { max-width: 30ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-rem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-4); }
.hm-rem { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.hm-rem p { margin: 0; }
.hm-rem-n { color: var(--ink-2); }
.hm-rem-n b { margin-right: 4px; font: 600 var(--fs-xl)/1 var(--f-sans); color: var(--ink); }
.hm-rem .note svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--accent-ink); }
.hm-tpl summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent-ink); }
.hm-tpl[open] { display: grid; gap: 10px; }
.hm-tpl textarea { font-size: var(--fs-sm); resize: vertical; }

@media (max-width: 1180px) {
  .tb-search { min-width: 0; }
  .tb-kbd { display: none; }
}
@media (max-width: 1100px) {
  .hm-cols, .hm-nb { grid-template-columns: minmax(0, 1fr); }
  .hm-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .tb-search { width: 36px; height: 36px; padding: 0; justify-content: center; border-color: transparent; background: none; box-shadow: none; color: var(--ink-2); }
  .tb-search-t, .tb-kbd { display: none; }
  /* the search button takes 44px of the mobile topbar: the page title yields first, so the cycle pill keeps its width */
  .topbar:has(.tb-search) .tb-title { flex: 1 1 0px; }
}
@media (max-width: 760px) {
  .hm-flow { grid-template-columns: minmax(0, 1fr); }
  .hm-flow li:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
  .hm-band { padding: var(--s-4); }
  .hm-pr { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .hm-pt { grid-column: 1 / -1; order: 3; }
  .hm-todo li { grid-template-columns: minmax(0, 1fr) auto; }
  .hm-todo-st { grid-column: 1 / -1; order: 3; justify-content: flex-start; }
  .hm-rails li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .hm-rail { grid-column: 1 / -1; order: 3; }
  .hm-big b { font-size: 34px; }
  .flash.hm-flash > :last-child { grid-column: 2; justify-self: start; }
  dialog.pal { margin-top: 8px; max-height: calc(100dvh - 16px); }
  .pal-foot { display: none; }
  .pal-o { flex-wrap: wrap; }
  .pal-acts { flex-basis: 100%; padding-left: 42px; }
  .hm-acts { white-space: normal; }
  .hm-tbl td.hm-acts { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .hm-how-l li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hm-todaylg { margin-left: 0; }
}
@media print {
  .tb-search, dialog.pal, .hm-tpl, .hm-acts { display: none !important; }
}

/* ==== page: people ==== */
/* employees list, record (show), form, self-assessment, account */
/* P3 · prefixes: pp- list, fi- record (ficha), pe- form, sv- self-assessment */

/* -- list -- */
.pp-n { color: var(--muted); font-weight: 400; }
.lnk svg, .pp-sum-t svg, .pp-view svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; }
.pp-view svg { margin: 0 2px 0 -2px; }
.pp-sum { display: grid; gap: var(--s-3); }
.pp-sum > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; list-style: none; padding: 2px 0; }
.pp-sum > summary::-webkit-details-marker { display: none; }
.pp-sum > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--ink-2); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease); align-self: center; }
.pp-sum[open] > summary::before { transform: rotate(45deg); }
.pp-sum-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-md); }
.pp-sum-t svg { margin: 0; color: var(--accent-ink); width: 16px; height: 16px; }
.pp-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.pp-charts .card { gap: 12px; }
.pp-res { justify-self: start; }
.pp-res .sw { width: 9px; height: 9px; border-radius: 2px; }
.pp-sw-ok { background: var(--good); } .pp-sw-bad { background: var(--crit); } .pp-sw-none { background: var(--none); box-shadow: inset 0 0 0 1px var(--axis); }
.pp-views { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-views-l { font: 500 var(--fs-xs)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.pp-view { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.pp-view:hover { border-color: color-mix(in oklab, var(--ink) 34%, transparent); color: var(--ink); text-decoration: none; }
.pp-view small { color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-view.dq small { color: var(--warn-ink); font-weight: 600; }
.pp-view[aria-current="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); font-weight: 500; }
.pp-active { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.pp-chip { text-decoration: none; color: var(--ink); }
.pp-chip:hover { text-decoration: none; border-color: var(--accent-ink); }
.pp-chip span { color: var(--ink-2); font-size: 15px; line-height: 1; margin-left: 2px; }
.pp-table .pp-ck { width: 36px; padding-right: 0; }
.pp-table .pp-ck input { width: 16px; height: 16px; margin: 0; vertical-align: middle; cursor: pointer; }
.pp-table th a.pp-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; border-radius: var(--r-xs); }
.pp-table th a.pp-sort:hover { color: var(--ink); }
.pp-table th[aria-sort] a.pp-sort { color: var(--ink); font-weight: 600; }
.pp-si { font-size: 9px; color: var(--muted); }
.pp-table th[aria-sort] .pp-si { color: var(--accent-ink); }
.pp-miss { color: var(--warn-ink); }
.pp-area { display: inline-flex; align-items: baseline; gap: 6px; }
.pp-area .dotsw { flex: none; width: 8px; height: 8px; }
.pp-st { min-width: 130px; }
.pp-st > .st { display: inline-flex; }
.pp-cov { display: grid; gap: 2px; width: 100%; max-width: 140px; margin-top: 4px; }
.pp-cov small { font-size: var(--fs-2xs); color: var(--muted); }
.pp-cov .progress > i { background: var(--warn); }
.pp-prev { display: block; font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
.pp-nbl { display: inline-flex; max-width: 100%; text-decoration: none; border-radius: var(--r-xs); }
.pp-nbl:hover .vz-nbb { box-shadow: 0 0 0 1px var(--ink-2); }
tr.pp-off td { color: var(--ink-2); }
tr.pp-off .av { opacity: .6; }
.pp-none td { padding: 0 !important; }
.pp-none-in { padding: 28px 16px; text-align: center; color: var(--ink-2); }
.pp-bulkbar { position: sticky; bottom: var(--s-4); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline: auto; width: max-content; max-width: 100%;
  padding: 8px 10px 8px 16px; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--border); box-shadow: var(--e-3); animation: toast-in var(--t-med) var(--ease); }
.pp-bulkbar[hidden] { display: none; }
.pp-bulkbar svg { width: 15px; height: 15px; }
.pp-bn { font-size: var(--fs-sm); color: var(--ink-2); margin-right: 6px; }
.pp-bn b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-bulk-res td .secret { padding: 4px 8px; font-size: var(--fs-sm); }
.pp-who .who > span { min-width: 0; }
.pp-who .sub { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* V05: was 230px; the full e-mail is in the title */
.pp-who .sub:has(.pp-em) { display: flex; } /* V05: the e-mail ellipsizes, "· sem login" stays whole */
.pp-who .sub .pp-em { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pp-who .sub .pp-lg { flex: none; white-space: pre; }
.pp-ap .sub { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.pp-sep { margin: 0 6px; color: var(--muted); }
.pp-table th, .pp-table td { padding-inline: 10px; }
.pp-table .zcell { grid-template-columns: 54px minmax(76px, 100px); }
.pp-table .zl { min-width: 0; }
.pp-table .pp-area { white-space: nowrap; }
.pp-table .vz-nbb { max-width: 150px; } /* V05: the name ellipsizes; the title has the whole label */
/* V05: below 1500px the dashed outline alone marks a suggested potential in the list (header and badge titles say so), so the action column fits */
@media (max-width: 1499px) { .pp-table .vz-nbb.sug > small:first-of-type { display: none; } } /* M1: only "sugerido"; a draft's "prévia" stays */
/* V05: laptops (1280–1399) keep the action column in view too: narrower deviation bar, e-mail and nine-box name; área may wrap */
@media (min-width: 641px) and (max-width: 1399px) {
  .pp-table .zcell { grid-template-columns: 54px minmax(48px, 64px); }
  .pp-who .sub { max-width: 150px; }
  .pp-table .vz-nbb { max-width: 118px; }
  .pp-table .pp-area { white-space: normal; }
  .pp-table th, .pp-table td { padding-inline: 8px; }
  .pp-st { min-width: 112px; }
}
.pp-active svg, .fi-col .note svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; }

/* -- record (ficha) -- */
.fi-print-head, .fi-sign { display: none; }
.fi-hero { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--e-1); overflow: hidden; }
.fi-id { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 20px; align-items: start; padding: 22px 24px 18px; }
.fi-id .av.lg { margin-top: 4px; }
.fi-id h1 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; overflow-wrap: anywhere; }
.fi-sub { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-md); overflow-wrap: anywhere; }
.fi-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fi-meta a.chip { color: var(--ink); text-decoration: none; }
.fi-meta a.chip:hover { border-color: var(--accent); }
.fi-meta .chip a { color: inherit; }
.fi-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 460px; }
.fi-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--grid); background: color-mix(in oklab, var(--ink) 1.5%, var(--surface)); }
.fi-stat { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 16px 20px 18px; color: inherit; text-decoration: none; }
.fi-stat + .fi-stat { border-left: 1px solid var(--grid); }
a.fi-stat:hover { background: color-mix(in oklab, var(--accent) 5%, var(--surface)); text-decoration: none; }
.fi-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.fi-stat > small { font: 500 var(--fs-2xs)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fi-big { font: 600 var(--fs-kpi)/1.05 var(--f-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fi-big span { font-size: var(--fs-base); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.fi-big .fi-arrow { font-size: 22px; color: var(--ink-2); margin-right: 4px; }
.fi-big.up { color: var(--good-ink); } .fi-big.down { color: var(--crit-ink); } .fi-big.na { color: var(--muted); }
.fi-st-l { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.35; }
.fi-res .zl { margin-top: 4px; min-width: 0; }
.fi-nbs .vz-nbb { font-size: var(--fs-sm); }
.fi-nbs .vz-nbb > b { min-width: 26px; font-size: var(--fs-sm); }
.fi-nbb { display: flex; min-width: 0; padding: 4px 0 2px; }
/* M7 (QA-8): in a narrow stat (390: two per row) the badge wraps inside its cell instead of running past it:
   the name may take two lines and the "sugerido"/"prévia" tags and the arrow go to the next line */
.fi-nbb .vz-nbb, .fi-nbinfo .vz-nbb { flex-wrap: wrap; white-space: normal; padding-right: 6px; }
.fi-nbb .vz-nbb > span:not(.sr-only), .fi-nbinfo .vz-nbb > span:not(.sr-only) { min-width: 0; padding-right: 0; overflow-wrap: anywhere; }
.fi-nbb .vz-nbb > :is(small, .vz-mv), .fi-nbinfo .vz-nbb > :is(small, .vz-mv) { padding: 2px 0 2px 6px; } /* a wrapped line starts indented */
.fi-strip { position: relative; display: block; height: 18px; margin-top: 6px; }
.fi-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--grid); }
.fi-strip i { position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--dot-muted); opacity: .8; }
.fi-strip i.z { top: 2px; bottom: 2px; width: 1px; height: auto; margin: 0; border-radius: 0; background: var(--ink-2); opacity: 1; }
.fi-strip b { position: absolute; top: calc(50% - 7px); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--ink); }
.fi-strip b.up { background: var(--good); } .fi-strip b.down { background: var(--crit); }
.fi-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--grid); background: color-mix(in oklab, var(--accent) 3%, var(--surface)); }
.fi-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 20px; }
.fi-steps li + li { border-left: 1px solid var(--grid); }
.fi-steps div { display: grid; gap: 2px; justify-items: start; }
.fi-steps b { font-weight: 600; }
.fi-steps span:not(.fi-sn) { font-size: var(--fs-sm); color: var(--ink-2); }
.fi-sn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--ink-2); font: 600 var(--fs-sm) var(--f-mono); }
.fi-sn svg { width: 15px; height: 15px; }
.fi-steps .done .fi-sn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fi-steps .now .fi-sn { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-wash); }
.fi-high { display: grid; gap: 8px; padding: 14px 24px 16px; border-top: 1px solid var(--grid); }
.fi-hl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.fi-hk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.fi-hk svg { width: 14px; height: 14px; color: var(--warn-ink); }
.fi-hl .names { min-height: 0; }
.fi-hl .chip { padding: 2px 9px; font-size: var(--fs-sm); }
.fi-hl.attn ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--ink); display: grid; gap: 2px; }
.fi-hl.attn ul li::marker { color: var(--warn-ink); }
.fi-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.fi-col { display: grid; gap: var(--s-5); min-width: 0; }
.fi-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.fi-facts b { font-variant-numeric: tabular-nums; }
.fi-legend { font-size: var(--fs-xs); gap: 4px 14px; }
.fi-sw-meet { background: var(--good); } .fi-sw-below { background: var(--crit); } .fi-sw-free { background: var(--l2); }
.fi-sw-miss { background: color-mix(in oklab, var(--warn) 55%, var(--surface)); }
.fi-sw-tick { display: inline-block; width: 2px; height: 12px; background: var(--ink); border-radius: 1px; }
.fi-bars { list-style: none; margin: 0 -8px; padding: 0; display: grid; gap: 1px; }
.fi-bar { display: grid; grid-template-columns: minmax(150px, 1.35fr) minmax(0, 1fr) 68px; gap: 12px; align-items: center; min-height: 32px; padding: 3px 8px;
  border-radius: var(--r-sm); color: inherit; text-decoration: none; font-size: var(--fs-sm); }
a.fi-bar:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); text-decoration: none; }
a.fi-bar:hover .fi-bl { color: var(--accent-ink); }
.fi-bl { min-width: 0; line-height: 1.25; }
.fi-bl small { color: var(--muted); font-size: var(--fs-2xs); white-space: nowrap; }
.fi-bt { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--h0); }
.fi-bt i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--l2); }
.fi-bar.meet .fi-bt i { background: var(--good); } .fi-bar.below .fi-bt i { background: var(--crit); }
.fi-bar.miss .fi-bt { background: color-mix(in oklab, var(--warn) 40%, var(--surface)); }
.fi-bt b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--surface); }
.fi-bv { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fi-bv small { font-weight: 400; color: var(--muted); }
.fi-bar.below .fi-bv { color: var(--crit-ink); }
.fi-comment { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); }
.fi-comment b { color: var(--ink); }
.fi-comment p { margin-top: 4px; }
.fi-exp { list-style: none; margin: 0; padding: 0; display: grid; }
.fi-exp li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--grid); }
.fi-exp li:first-child { border-top: 0; }
.fi-exp div { display: grid; gap: 2px; }
.fi-exp b { font-weight: 500; }
.fi-exp small { color: var(--muted); font-size: var(--fs-xs); }
.fi-dots { display: inline-flex; align-items: center; gap: 3px; }
.fi-dots i { width: 12px; height: 12px; border-radius: 3px; background: var(--h0); }
.fi-dots i.on { background: var(--l2); }
.fi-dots i.half { background: linear-gradient(90deg, var(--l2) 50%, var(--h0) 50%); }
.fi-dots small { margin-left: 6px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); min-width: 2ch; }
.fi-hist { box-shadow: none; }
.fi-hist .dev.na { white-space: normal; }
.fi-sk { display: grid; gap: 1px; margin: 0 -8px; }
.fi-skh, .fi-skr { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(170px, 1.4fr) 128px; gap: 12px; align-items: center; padding: 3px 8px; }
.fi-skh { font-size: var(--fs-2xs); color: var(--muted); padding-bottom: 0; }
.fi-sks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.fi-sks span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-sk h3 { padding: 12px 8px 2px; font: 500 var(--fs-2xs)/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fi-skr { min-height: 30px; border-radius: var(--r-sm); color: inherit; text-decoration: none; font-size: var(--fs-sm); }
a.fi-skr:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); text-decoration: none; }
a.fi-skr:hover .fi-skn { color: var(--accent-ink); }
.fi-skn { min-width: 0; overflow-wrap: anywhere; }
.fi-skt { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; height: 20px; }
.fi-skt::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: calc(50% - 1px); height: 2px; background: var(--grid); }
.fi-skt i { position: relative; justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--axis); }
.fi-skt i.f { background: var(--l1); border-color: var(--l1); }
.fi-skt i.ev { width: 14px; height: 14px; background: var(--l2); border-color: var(--l2); }
.fi-skt i.de { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink-2); }
.fi-skv { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-skv svg { width: 13px; height: 13px; color: var(--warn-ink); vertical-align: -2px; }
.fi-skr.gap { background: color-mix(in oklab, var(--warn) 10%, transparent); }
.fi-k { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; }
.fi-k.ev { background: var(--l2); }
.fi-k.de { border: 2px solid var(--ink-2); }
.fi-nb { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 8px; }
.fi-nb-y { grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: var(--fs-2xs); color: var(--muted); letter-spacing: .04em; }
.fi-nb-x { grid-column: 2; text-align: center; font-size: var(--fs-2xs); color: var(--muted); letter-spacing: .04em; }
.fi-nbg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.fi-nbc { --nb: var(--surface-2); position: relative; display: grid; align-content: start; gap: 2px; min-height: 68px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--nb);
  color: var(--ink); text-decoration: none; font-size: var(--fs-xs); line-height: 1.2; transition: box-shadow var(--t-fast) var(--ease); }
.fi-nbc.t0 { --nb: color-mix(in oklab, var(--crit) 34%, var(--surface)); }
.fi-nbc.t1 { --nb: color-mix(in oklab, var(--crit) 16%, var(--surface)); }
.fi-nbc.t3 { --nb: color-mix(in oklab, var(--good) 16%, var(--surface)); }
.fi-nbc.t4 { --nb: color-mix(in oklab, var(--good) 34%, var(--surface)); }
a.fi-nbc:hover { box-shadow: 0 0 0 1.5px var(--ink-2); text-decoration: none; }
.fi-nbc.now { box-shadow: 0 0 0 2px var(--ink); }
.fi-nbc > b { font: 600 var(--fs-sm) var(--f-mono); }
.fi-nbn { color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fi-nbc.now .fi-nbn { color: var(--ink); font-weight: 500; }
.fi-nbm { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.fi-nbm i { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--ink-2);
  font: 600 10px/1 var(--f-mono); font-style: normal; color: var(--ink); }
.fi-nbm i.cur { background: var(--ink); border-color: var(--ink); color: var(--surface); min-width: 26px; height: 22px; }
.fi-nbm i.sug { border-style: dashed; }
.fi-nbm i.cur.sug { background: var(--surface); color: var(--ink); border: 2px dashed var(--ink); }
.fi-nbinfo { display: grid; gap: 6px; }
.fi-nbinfo .vz-nbb { font-size: var(--fs-sm); }
.fi-nba { font-size: var(--fs-sm); }
.fi-traj { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--grid); display: grid; gap: 6px; }
.fi-traj li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.fi-tn { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-2); font: 600 10px var(--f-mono); }
.fi-tn.cur { background: var(--ink); color: var(--surface); border-color: var(--ink); font-size: 8px; }
.fi-peers .seg { justify-self: start; }
.fi-peer { display: grid; gap: 8px; }
.fi-peer[hidden] { display: none; }
.fi-peer .note a { white-space: nowrap; }
.fi-self .kv { font-size: var(--fs-sm); }
.fi-more summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); }
.fi-more p { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.fi-team .lnk svg, .fi-acc .cluster svg { width: 15px; height: 15px; margin: 0 4px 0 0; vertical-align: -3px; }
.fi-pl { list-style: none; margin: 0; padding: 0; display: grid; }
.fi-pl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--grid); font-size: var(--fs-sm); }
.fi-pl li:first-child { border-top: 0; }
.fi-pl li > a:first-child { color: var(--ink); font-weight: 500; text-decoration: none; }
.fi-pl li > a:first-child:hover { color: var(--accent-ink); text-decoration: underline; }
.fi-pl .note { grid-column: 1; font-size: var(--fs-xs); }
.fi-pp { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); color: var(--ink-2); }
.fi-pp:hover { background: var(--surface-2); color: var(--accent-ink); }
.fi-pp svg { width: 16px; height: 16px; }
.fi-proj .names a.chip { color: var(--ink); text-decoration: none; }
.fi-proj .names a.chip:hover { border-color: var(--accent); }
.fi-role { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fi-role select { max-width: 100%; }
.fi-acc .cluster form { display: contents; }
.fi-notes { padding-top: 10px; border-top: 1px solid var(--grid); display: grid; gap: 4px; }
.fi-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.fi-tl li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 0 0 14px; }
.fi-tl li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--grid); }
.fi-tl li:last-child::before { display: none; }
.fi-tli { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.fi-tli svg { width: 16px; height: 16px; }
.fi-tl li.aval .fi-tli { background: var(--accent-wash); color: var(--accent-ink); }
.fi-tl li.login .fi-tli { background: color-mix(in oklab, var(--a7) 14%, transparent); color: var(--a7-ink); }
.fi-tl p { font-size: var(--fs-md); padding-top: 5px; }
.fi-tl small { font-size: var(--fs-xs); color: var(--muted); }
.fi-tlf { color: var(--ink-2); font-size: var(--fs-sm); }

/* -- person form -- */
.pe-req { color: var(--crit-ink); margin-left: 2px; }
.pe-form .field [aria-invalid="true"] { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.pe-form .err a { color: inherit; text-decoration: underline; }
.pe-switches { display: grid; gap: 12px; }
.pe-sw { display: grid; gap: 2px; }
.pe-sw .hint { margin-left: 50px; font-size: var(--fs-xs); color: var(--muted); }
.pe-login { margin-left: 50px; }
.pe-login[hidden] { display: none; }

/* -- self-assessment -- */
.sv-intro { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.sv-intro svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; color: var(--accent-ink); }
.sv-nav { position: sticky; top: var(--topbar-h); z-index: 6; display: grid; gap: 6px; padding: 8px 0; background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--grid); }
.sv-nav ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sv-nav ol::-webkit-scrollbar { display: none; }
.sv-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.sv-nav a:hover { color: var(--ink); border-color: color-mix(in oklab, var(--ink) 30%, transparent); text-decoration: none; }
.sv-nav a b { font: 600 var(--fs-xs) var(--f-mono); color: var(--muted); }
.sv-nav a.part b { color: var(--warn-ink); }
.sv-nav a.done { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.sv-nav a.done b { color: var(--accent-ink); }
.sv-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.sv-bar .progress { height: 4px; }
.sv-sec { scroll-margin-top: calc(var(--topbar-h) + 84px); }
.sv-sec .lvrow { grid-template-columns: minmax(120px, 1fr) auto; }
.sv-sec .lvcols .lvrow { grid-template-columns: minmax(110px, 1fr) auto; }
.sv-sec .field.narrow { max-width: 520px; }
.sv-other { max-width: 320px; margin-top: 6px; }
.sv-tag b { font: 600 var(--fs-sm) var(--f-mono); }
.sv-actions { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0;
  background: var(--topbar-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--grid); }
.sv-actions .note { margin-left: auto; }
.sv-sum dl { font-size: var(--fs-md); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-lvl { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: 1px; }
.sv-lvl i { width: 8px; height: 8px; border-radius: 2px; background: var(--h0); }
.sv-lvl i.on { background: var(--l2); }

@media (max-width: 1180px) {
  .fi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-stat:nth-child(3) { border-left: 0; }
  .fi-stat:nth-child(n+3) { border-top: 1px solid var(--grid); }
}
@media (max-width: 1100px) {
  .pp-charts, .fi-grid { grid-template-columns: minmax(0, 1fr); }
  .fi-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fi-id { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .fi-acts { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .fi-steps { grid-template-columns: minmax(0, 1fr); }
  .fi-steps li + li { border-left: 0; border-top: 1px solid var(--grid); }
  .fi-hl { grid-template-columns: minmax(0, 1fr); }
  .fi-high { padding-inline: 18px; }
}
@media (max-width: 640px) {
  .fi-id h1 { font-size: var(--fs-xl); }
  .fi-id .av.lg { width: 48px; height: 48px; font-size: 17px; }
  .fi-stat { padding: 12px 14px 14px; }
  .fi-big { font-size: 24px; }
  .fi-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-bar { grid-template-columns: minmax(0, 1fr) 58px; gap: 4px 10px; padding-block: 6px; }
  .fi-bl { grid-column: 1; }
  .fi-bv { grid-column: 2; grid-row: 1; }
  .fi-bt { grid-column: 1 / -1; }
  .fi-skh { display: none; }
  .fi-skr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 2px; padding-block: 6px; }
  .fi-skv { grid-column: 2; grid-row: 1; text-align: right; }
  .fi-skt { grid-column: 1 / -1; }
  .fi-nbc { min-height: 58px; padding: 5px 6px; }
  .fi-nbn { font-size: var(--fs-2xs); }
  .pp-table td.pp-ck, .pp-table th.pp-ck { display: none; }
  table.stack.pp-table td.pp-who { grid-column: 1 / -1; }
  table.stack.pp-table tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
  table.stack.pp-table td.pp-ap::before, table.stack.pp-table td.pp-st::before, table.stack.pp-table td[data-label="Nine Box"]::before { display: none; }
  table.stack.pp-table .zcell { grid-template-columns: auto minmax(48px, 1fr); gap: 6px; }
  .fi-hist table.stack tr[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), var(--e-1); }
  .fi-hist table.stack tr[aria-selected="true"] td { background: none; box-shadow: none; }
  .pp-bulkbar { border-radius: var(--r-lg); width: auto; }
  .sv-actions .note { display: none; }
  .sv-actions .btn, .sv-actions .btn-ghost { flex: 1 1 auto; }
  .pe-sw .hint, .pe-login { margin-left: 0; }
}
@media print {
  .fi-print-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #c3c2b7; font-size: 11px; color: #3d3c39; }
  .fi-print-head svg { flex: none; }
  .fi-print-head b { color: #0b0b0b; font-size: 13px; }
  .fi-hero { border-radius: 8px; }
  .fi-id { padding: 12px 14px; }
  .fi-id .av.lg { width: 44px; height: 44px; font-size: 15px; }
  .fi-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fi-stat { padding: 10px 12px; }
  .fi-stat:nth-child(3) { border-left: 1px solid #e1e0d9; }
  .fi-stat:nth-child(n+3) { border-top: 0; }
  .fi-big { font-size: 22px; }
  .fi-high { padding: 8px 14px; }
  /* one A4 page: hero, criteria on the left, nine box and trend on the right, signatures */
  .fi-print-head, .fi-hero, .fi-grid, .fi-sign { zoom: .76; }
  .fi-exp small { display: none; }
  .fi-exp li { padding: 3px 0; }
  .fi-steps li { padding: 8px 12px; }
  .fi-hl.attn ul { gap: 0; }
  .fi-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "crit nb" "crit evo"; gap: 10px; align-items: start; }
  .fi-col { display: contents; }
  .fi-crit, .fi-expect { grid-area: crit; }
  .fi-nbcard { grid-area: nb; }
  .fi-evo { grid-area: evo; }
  .fi-hero { margin-bottom: 4px; }
  .fi-skills, .fi-sys, .fi-peers, .fi-self, .fi-hist, .fi-traj, .fi-legend, .fi-crit > .sub, .fi-nbcard .sec-h a, .fi-steps .lnk, .flash { display: none !important; }
  .fi-hero ~ .card, .fi-grid .card { padding: 10px 12px; gap: 8px; }
  .fi-bar { min-height: 22px; padding: 1px 4px; font-size: 11px; }
  .fi-facts { padding: 6px 8px; }
  .fi-facts b { font-size: 14px; }
  .fi-nbc { min-height: 48px; }
  .fi-sign { display: grid; grid-template-columns: 1.2fr 1.2fr .6fr; gap: 24px; margin-top: 6px; font-size: 11px; color: #3d3c39; break-inside: avoid; }
  .fi-sign span { display: block; height: 24px; border-bottom: 1px solid #0b0b0b; margin-bottom: 4px; }
  .fi-stat, .fi-bt, .fi-bt i, .fi-bt b, .fi-nbc, .fi-nbm i, .fi-strip i, .fi-strip b, .fi-dots i, .fi-skt i, .fi-sn, .fi-facts, .fi-stats { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pp-bulkbar, .pp-sum, .pp-views, .pp-active, .sv-nav, .sv-actions { display: none !important; }
}

/* ==== page: evaluations ==== */
/* P4 · queue (eq-), evaluation form (evx, ev-, crit, live), calibration (cb-). Nine-box tones repeat the viz ramp on .ev-nbc.bN. */

/* -- shared bits -- */
.ev-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--accent-wash);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); color: var(--ink); font-size: var(--fs-sm); }
.ev-callout > svg { flex: none; width: 18px; height: 18px; color: var(--accent-ink); }
.ev-callout > p { flex: 1 1 320px; min-width: 0; }
.ev-callout.warn { background: color-mix(in oklab, var(--warn) 14%, var(--surface)); border-color: color-mix(in oklab, var(--warn) 45%, transparent); }
.ev-callout.warn > svg { color: var(--warn-ink); }
.ev-callout.crit { background: color-mix(in oklab, var(--crit) 10%, var(--surface)); border-color: color-mix(in oklab, var(--crit) 45%, transparent); }
.ev-callout.crit > svg { color: var(--crit-ink); }
.ev-ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--grid); box-shadow: var(--e-1); }
.ev-ctx-i { display: grid; align-content: start; gap: 4px; padding: 10px 14px; background: var(--surface); min-width: 0; }
.ev-ctx-i .lab { font: 500 var(--fs-2xs)/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ev-ctx-i small { font-size: var(--fs-xs); color: var(--ink-2); }
.ev-ctx-i .st { justify-self: start; }
.ev-ctx-v { font-size: var(--fs-lg); font-weight: 600; text-decoration: none; color: var(--ink); justify-self: start; }
a.ev-ctx-v:hover { text-decoration: underline; }
.ev-ctx-i a:has(> .vz-nbb) { justify-self: start; text-decoration: none; }
.ev-ctx-i a:has(> .vz-nbb):hover .vz-nbb { box-shadow: 0 0 0 2px var(--accent); }
.ev-step { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.ev-pos { padding: 0 6px; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-pos b { color: var(--ink); font-weight: 600; }
.ev-cyc { position: relative; }
.ev-cyc > summary { list-style: none; }
.ev-cyc > summary::-webkit-details-marker { display: none; }
.ev-cyc .menu-pop { left: auto; right: 0; width: max-content; min-width: 260px; max-width: min(360px, calc(100vw - 24px)); }

/* -- form layout -- */
.evx { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.ev-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.evx-aside { position: sticky; top: calc(var(--topbar-h) + 16px); display: grid; gap: 14px; }
.evx-nav { position: sticky; top: var(--topbar-h); z-index: 5; padding: 8px 0; background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--grid); }
/* the sticky bar stays opaque; only the inner scroller fades at its edges (the shared fade on .evx-nav would show the form through it) */
.evx-nav { -webkit-mask-image: none; mask-image: none; animation: none; }
.ev-navs { display: flex; flex-wrap: wrap; gap: 4px; }
.evx-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast); }
.evx-nav a:hover { color: var(--ink); border-color: color-mix(in oklab, var(--ink) 30%, transparent); }
.evx-nav a small { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.evx-nav a small:empty { display: none; }
.evx-nav a.ok small { color: var(--accent-ink); font-weight: 600; }
.evx-nav a.ok small::before { content: "✓ "; }
.evx-nav a[aria-current="true"] { background: var(--accent-wash); border-color: color-mix(in oklab, var(--accent) 45%, transparent); color: var(--ink); }
.sec { scroll-margin-top: calc(var(--topbar-h) + 56px); }
.crit { scroll-margin-top: calc(var(--topbar-h) + 64px); }
.ev-mismatch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; padding: 8px 10px; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--warn) 14%, var(--surface)); font-size: var(--fs-xs); color: var(--ink); }
.ev-mismatch > svg { width: 16px; height: 16px; color: var(--warn-ink); flex: none; }
.ev-mismatch p { flex: 1 1 200px; }
.ev-tierw, .ev-lvw { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ev-tierw .lv { flex: 0 1 560px; }
.ev-tierw .lv.wide label { flex: 1 1 0; }
.ev-tierw .lv.wide span { min-width: 0; padding: 0 10px; }
.ev-score { display: flex; align-items: center; gap: 12px; }
.ev-score input[type=number] { width: 84px; flex: none; font-variant-numeric: tabular-nums; }
.ev-score input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.ev-score input[type=range][data-unset] { opacity: .45; filter: grayscale(1); }

/* -- potential -- */
.ev-pot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ev-potc { position: relative; display: grid; cursor: pointer; }
.ev-potc input { position: absolute; opacity: 0; pointer-events: none; }
.ev-potb { position: relative; display: grid; align-content: start; gap: 6px; padding: 12px 14px; min-height: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.ev-potc:hover .ev-potb { border-color: var(--ink-2); }
.ev-potb small { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }
.ev-poth { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ev-poth b { font-size: var(--fs-md); font-weight: 600; }
.ev-lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ev-lvl i { width: 5px; border-radius: 1px; background: var(--grid); }
.ev-lvl i:nth-child(1) { height: 6px; } .ev-lvl i:nth-child(2) { height: 10px; } .ev-lvl i:nth-child(3) { height: 14px; }
.ev-lvl i.on { background: var(--ink-2); }
.ev-potc input:checked + .ev-potb { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.ev-potc input:checked + .ev-potb .ev-lvl i.on { background: var(--accent); }
.ev-potc input:focus-visible + .ev-potb { outline: 2px solid var(--accent); outline-offset: 2px; }
.ev-potc input:disabled + .ev-potb { cursor: not-allowed; background: var(--surface-2); }
.ev-potc.sug .ev-potb { border-style: dashed; border-color: var(--ink-2); }
.ev-sugtag { justify-self: start; padding: 0 7px; border: 1px dashed var(--ink-2); border-radius: var(--r-pill); font: 500 var(--fs-2xs)/18px var(--f-sans); font-style: normal; color: var(--ink-2); }
.ev-potfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ev-sugline { font-size: var(--fs-sm); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ev-sugline b { color: var(--ink); }
.ev-nbline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); }
.ev-nbline:empty { display: none; }

/* -- criteria -- */
.ev-crits { display: grid; }
.ev-crits > .crit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--grid); align-items: center; } /* V02: scoped to the form, so .tile.crit and .ev-callout.crit keep their own layout */
.ev-crits > .crit:first-child { border-top: 0; }
.crit .ct b { font-weight: 600; font-size: var(--fs-md); }
.crit .ct p { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; max-width: 60ch; }
.crit .ct .exp { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.crit .ev-w b { font-weight: 600; color: var(--ink); }
.crit .ev-prev i { font-style: normal; color: var(--ink-2); }
.crit .ev-prev i.up, .crit .ev-prev i.dn { font-weight: 600; color: var(--ink); }
.crit .sug { min-height: 24px; padding: 1px 10px; border: 1px dashed var(--accent); border-radius: var(--r-pill); background: none; color: var(--accent-ink); font-size: var(--fs-xs); cursor: pointer; }
.crit .sug:hover:not(:disabled) { background: var(--accent-wash); }
.crit .sug:disabled { border-style: solid; border-color: var(--border); color: var(--ink-2); cursor: default; }
.ev-sughint { font-size: var(--fs-xs); color: var(--accent-ink); }
.crit.meet .ct b::after, .crit.below .ct b::after, .crit.miss .ct b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; vertical-align: 2px; }
.crit.meet .ct b::after { background: var(--good); }
.crit.below .ct b::after { background: var(--crit); }
.crit.miss .ct b::after { background: none; box-shadow: inset 0 0 0 2px var(--warn); }
.crit.meet .rail label.fill span { background: color-mix(in oklab, var(--good) 16%, var(--surface)); }
.crit.below .rail label.fill span { background: color-mix(in oklab, var(--crit) 14%, var(--surface)); }
.crit.meet .rail label input:checked + span { background: var(--good); color: var(--on-good); }
.crit.below .rail label input:checked + span { background: var(--crit); color: var(--on-crit); }
.crit.nw .ct b, .crit.nw .ct p { color: var(--muted); }
.crit.nw .rail { opacity: .7; }
.crit.flash-row { animation: ev-flash 1.6s var(--ease) 1; }
@keyframes ev-flash { 0%, 40% { background: var(--accent-wash); } 100% { background: transparent; } }
.ev-railw { display: flex; align-items: flex-end; }
.rail label.x span { width: auto; min-width: 44px; padding: 0 8px; font: 600 var(--fs-xs) var(--f-mono); border-style: dashed; }
.rail label.x[hidden] { display: none; }
.clr svg { width: 14px; height: 14px; }

/* -- matrices -- */
.ev-skills { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.lvrow.gap { box-shadow: inset 3px 0 0 var(--warn); padding-left: 8px; }
.ev-gap { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--warn) 22%, var(--surface)); color: var(--ink);
  font: 500 var(--fs-2xs)/16px var(--f-sans); font-style: normal; white-space: nowrap; }
.ev-more { margin-top: 8px; }
.ev-more summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent-ink); }
table.sysm { border-collapse: separate; border-spacing: 0 4px; width: 100%; }
table.sysm th { padding: 0 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); text-align: left; white-space: nowrap; }
table.sysm td { padding: 0 8px; }
table.sysm th.code { white-space: normal; min-width: 120px; }
table.sysm th.code b { display: block; font: 600 var(--fs-sm) var(--f-mono); color: var(--ink); }
table.sysm th.code small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
table.sysm .lv span { min-width: 28px; height: 28px; padding: 0 6px; }
table.sysm tr.gap th.code { box-shadow: inset 3px 0 0 var(--warn); }
.ev-decl { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 500; }

/* -- live summary -- */
.live { display: grid; gap: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-2); }
.ev-live-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; align-items: baseline; }
.live .lab { font-size: var(--fs-xs); color: var(--muted); }
.ev-saved { font-size: var(--fs-2xs); color: var(--ink-2); }
.ev-saved[data-state="saving"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; vertical-align: -1px; }
.ev-saved[data-state="saved"]::before { content: "✓ "; color: var(--accent-ink); }
.ev-saved[data-state="dirty"], .ev-saved[data-state="offline"], .ev-saved[data-state="error"], .ev-saved[data-state="conflict"] { color: var(--warn-ink); }
.live .big { font-size: var(--fs-display); font-variant-numeric: tabular-nums; }
.live .big.up { color: var(--good-ink); }
.live .big.down { color: var(--crit-ink); }
.live .big.na { color: var(--muted); }
.live .stt { font-size: var(--fs-md); font-weight: 500; }
.ev-rows { display: grid; gap: 6px; }
.ev-rows > div { display: flex; justify-content: space-between; font-size: var(--fs-md); }
.ev-rows dt { color: var(--ink-2); }
.ev-rows dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.live .miss { font-size: var(--fs-xs); color: var(--warn-ink); }
.live .acts { display: grid; gap: 8px; }
.live.closed { box-shadow: var(--e-1); }
.ev-keysbtn { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: var(--fs-xs); color: var(--ink-2); text-decoration: none; }
.ev-keysbtn svg { width: 14px; height: 14px; }
.ev-keysbtn:hover { color: var(--ink); text-decoration: underline; }
.ev-nb { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--grid); }
.ev-nbg { display: grid; grid-template-columns: repeat(3, 24px); gap: 3px; }
.ev-nbc { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-xs); background: var(--nb); color: var(--ink-2);
  font: 500 10px/1 var(--f-mono); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.ev-nbc.b1 { --nb: color-mix(in oklab, var(--crit) 34%, var(--surface)); }
.ev-nbc:is(.b2, .b4) { --nb: color-mix(in oklab, var(--crit) 16%, var(--surface)); }
.ev-nbc:is(.b3, .b5, .b7) { --nb: var(--surface-2); }
.ev-nbc:is(.b6, .b8) { --nb: color-mix(in oklab, var(--good) 16%, var(--surface)); }
.ev-nbc.b9 { --nb: color-mix(in oklab, var(--good) 34%, var(--surface)); }
.ev-nbc.cur { color: var(--ink); font-weight: 700; box-shadow: 0 0 0 2px var(--ink); transform: scale(1.12); z-index: 1; }
.ev-nbc.cur.sug { box-shadow: none; outline: 2px dashed var(--ink); outline-offset: 0; }
.ev-nbc.was::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid var(--ink-2); }
.ev-nbt { display: grid; gap: 2px; min-width: 0; }
.ev-nbt b { font-size: var(--fs-md); font-weight: 600; }
.ev-nbt small { font-size: var(--fs-xs); color: var(--ink-2); }
.ev-how summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 500; }
.ev-how[open] { gap: 8px; }
.ev-bar { display: none; }
.ev-dlg { width: min(520px, calc(100vw - 32px)); }
.ev-dlg.wide { width: min(760px, calc(100vw - 32px)); }
.ev-keys { display: grid; gap: 8px; margin: 12px 0; }
.ev-keys > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: var(--fs-sm); }
.ev-keys dt { white-space: nowrap; }
.ev-diff th[scope="row"] { font-weight: 500; white-space: normal; }

@media (max-width: 1100px) {
  .evx { grid-template-columns: minmax(0, 1fr); }
  /* the fixed bar carries the live result and the main actions; the full summary closes the form */
  .evx-aside { position: static; scroll-margin-top: calc(var(--topbar-h) + 12px); }
  .evx-aside .ev-keysbtn { display: none; }
  .ev-bar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: var(--surface-3); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(0, 0, 0, .12); }
  .ev-bar-sum { display: grid; min-width: 0; flex: 1; text-decoration: none; color: var(--ink); line-height: 1.2; }
  .ev-bar-sum b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
  .ev-bar-sum b.up { color: var(--good-ink); } .ev-bar-sum b.down { color: var(--crit-ink); } .ev-bar-sum b.na { font-size: var(--fs-sm); color: var(--ink-2); }
  .ev-bar-sum small { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ev-bar-acts { display: flex; gap: 8px; flex: none; }
  .evx { padding-bottom: 72px; }
}
@media (max-width: 760px) {
  .ev-pot { grid-template-columns: minmax(0, 1fr); }
  .ev-potb { grid-template-columns: minmax(0, 1fr) auto; }
  .ev-potb small { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ev-crits > .crit { grid-template-columns: minmax(0, 1fr); } /* V02 */
  .ev-railw { justify-content: space-between; flex-wrap: wrap; row-gap: 4px; }
  .rail label.x span { min-width: 40px; padding: 0 4px; }
  .ev-navs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ev-navs a { flex: none; }
  @supports (animation-timeline: scroll()) {
    .ev-navs { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
      mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
      animation: edge-fade linear both; animation-timeline: scroll(self inline); }
  }
  .crit .rail { gap: 2px; }
  .crit .rail label.h span { width: 20px; }
  .ev-score input[type=number] { width: 72px; }
  .ev-ctx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-ctx-i:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ev-ctx-i { padding: 8px 10px; }
  .phead .acts:has(.ev-step) { justify-content: flex-start; }
  .ev-keys > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* V10: the systems matrix stacks, one block per system (name on top, its four pickers 2 × 2 with their labels): no sideways scroll */
  .tscroll:has(> table.sysm) { overflow: visible; }
  table.sysm, table.sysm tbody { display: block; width: 100%; }
  table.sysm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.sysm tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--grid); }
  table.sysm tbody tr:first-child { border-top: 0; padding-top: 4px; }
  table.sysm th.code { grid-column: 1 / -1; min-width: 0; padding: 0; }
  table.sysm th.code b, table.sysm th.code small { display: inline; }
  table.sysm th.code small::before { content: " · "; }
  table.sysm th.code .ev-decl { margin-left: 6px; }
  table.sysm td { display: grid; gap: 4px; min-width: 0; padding: 0; }
  table.sysm td::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--ink-2); }
  table.sysm td .lv { display: flex; width: 100%; }
  table.sysm td .lv span { min-width: 0; height: 36px; padding: 0 4px; }
  table.sysm tr.gap { box-shadow: inset 3px 0 0 var(--warn); padding-left: 10px; }
  table.sysm tr.gap th.code { box-shadow: none; }
}
.ev-potnote { padding: 8px 10px; border-left: 3px dashed var(--ink-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-2); }
.ev-potnote b { color: var(--ink); font-weight: 600; }
.ev-potnote a { color: var(--accent-ink); white-space: nowrap; }

/* -- queue -- */
.eq-sum { display: grid; gap: 14px; }
.eq-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.eq-head h2 { font-size: var(--fs-xl); }
.eq-head h2 small { font-size: var(--fs-md); font-weight: 400; color: var(--ink-2); margin-left: 6px; }
.eq-left { font-size: var(--fs-sm); color: var(--ink-2); }
.eq-left a { color: var(--ink); font-weight: 500; }
.eq-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.eq-tools .seg { flex: 1 1 auto; }
.eq-t td .zcell { min-width: 190px; }
.eq-prev { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.eq-prog { display: grid; gap: 4px; min-width: 90px; }
.eq-prog .note { font-size: var(--fs-xs); }
.eq-nb a { text-decoration: none; }
.eq-nb a:hover .vz-nbb { box-shadow: 0 0 0 2px var(--accent); }
.eq-t tr.is-pending td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
:is(.eq-t, table.cb) .zcell a { text-decoration: none; }
:is(.eq-t, table.cb) .zcell a:hover .dev { text-decoration: underline; }
@media (max-width: 640px) {
  .eq-t td .zcell { min-width: 0; }
  .eq-tools .seg { width: 100%; }
  .tools.eq-tools > select.in[name=time] { flex: 1 1 100%; }   /* V17: a team name fits (the shared .tools halves cut it) */
}

/* -- calibration -- */
.cb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cb-head { display: grid; gap: 8px; padding: 16px 18px 12px; }
.card.flush > .cb-wrap { border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: none; }
.cb-tools select { width: auto; min-width: 220px; max-width: 100%; }
.cb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--ink-2); align-items: center; }
.cb-legend i { display: inline-block; width: 14px; height: 14px; margin-right: 5px; border-radius: 3px; vertical-align: -3px; }
.cb-wrap { max-height: min(78vh, 900px); overflow: auto; overscroll-behavior: contain; }
table.cb { border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); min-width: 100%; }
table.cb th, table.cb td { padding: 0; border-bottom: 1px solid var(--grid); background: var(--surface); }
table.cb thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); font-weight: 500; color: var(--ink-2); vertical-align: bottom; }
table.cb .cb-p { position: sticky; left: 0; z-index: 2; min-width: 190px; max-width: 230px; padding: 6px 10px; text-align: left; box-shadow: 1px 0 0 var(--grid); }
table.cb thead .cb-p { z-index: 4; }
table.cb .cb-p a { display: block; color: var(--ink); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.cb .cb-p a:hover { text-decoration: underline; }
table.cb .cb-p small { display: block; font-size: var(--fs-2xs); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-sort { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; min-height: 40px; padding: 6px 6px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.cb-sort:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.cb-sort[aria-sort="ascending"]::after { content: "↑"; } .cb-sort[aria-sort="descending"]::after { content: "↓"; }
th.cb-k .cb-sort { min-height: 128px; padding-bottom: 8px; }
th.cb-k .cb-sort span { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
.cb-c { display: grid; place-items: center; min-width: 40px; height: 36px; padding: 0 4px; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; background: var(--cb, transparent); }
a.cb-c:hover, a.cb-c:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; position: relative; z-index: 1; }
.cb-c.g2 { --cb: color-mix(in oklab, var(--good) 34%, var(--surface)); font-weight: 600; }
.cb-c.g1 { --cb: color-mix(in oklab, var(--good) 14%, var(--surface)); }
.cb-c.r1 { --cb: color-mix(in oklab, var(--crit) 16%, var(--surface)); }
.cb-c.r2 { --cb: color-mix(in oklab, var(--crit) 34%, var(--surface)); font-weight: 600; }
.cb-c.nw { --cb: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--surface) 4px 8px); color: var(--muted); }
.cb-c.na { color: var(--muted); }
.cb-c.far::after { content: ""; position: absolute; }
.cb-c small { font-size: 10px; color: var(--ink-2); margin-left: 1px; }
td.cb-dev, th.cb-dev { min-width: 150px; padding: 4px 10px; border-left: 1px solid var(--grid); }
td.cb-dev .zcell { grid-template-columns: minmax(52px, auto) minmax(60px, 1fr); gap: 6px; }
td.cb-dev .zl { min-width: 60px; }
td.cb-num, th.cb-num { padding: 4px 10px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.cb-nb { padding: 4px 8px; white-space: nowrap; }
td.cb-nb a { text-decoration: none; }
td.cb-fl { padding: 4px 10px; min-width: 160px; white-space: nowrap; }
.cb-flag svg { width: 12px; height: 12px; color: var(--warn-ink); }
.cb-flag { display: inline-flex; align-items: center; gap: 4px; margin: 1px 4px 1px 0; padding: 1px 8px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--warn) 20%, var(--surface));
  color: var(--ink); font-size: var(--fs-2xs); line-height: 18px; white-space: nowrap; cursor: default; }
table.cb tfoot th, table.cb tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2); border-top: 1px solid var(--border); font-weight: 500; }
table.cb tfoot .cb-p { z-index: 4; }
table.cb tbody tr:hover > * { background-color: color-mix(in oklab, var(--accent) 5%, var(--surface)); }
table.cb tbody tr:hover > td > .cb-c:not(.nw) { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--accent) 30%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--accent) 30%, transparent); }
table.cb tr.flagged .cb-p { box-shadow: 1px 0 0 var(--grid), inset 3px 0 0 var(--warn); }
.cb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .cb-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  table.cb .cb-p { min-width: 140px; max-width: 150px; }
  .cb-tools select { min-width: 0; width: 100%; }
  .tools.cb-tools > select.in { flex: 1 1 100%; }   /* V17: the group select takes the whole row (the shared .tools halves cut it) */
}
@media print {
  .ev-bar, .ev-step, .ev-cyc, .ev-keysbtn, .evx-nav, .cb-tools { display: none !important; }
  .cb-wrap { max-height: none; overflow: visible; }
}

/* ==== page: portfolio ==== */
/* projects, initiatives, themas (P5). Prefix po-. Colours: types --a1/--a2/--a4 (as the panel), flow phases on the --o ramp,
   attention --warn; green/red are never used here (they mean deviation). */
.po-views { justify-self: start; }
.po-views svg { width: 15px; height: 15px; }
.po-charts { display: grid; gap: var(--s-4); }
.po-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.po-two > .card, .po-charts > .card { align-content: start; }
.po-charts .sec-h .lnk, .po-charts .sec-h a { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); }
.po-charts .sec-h svg { width: 14px; height: 14px; }

/* list head: toolbar, attention chips, active filters */
.po-listhead { display: grid; gap: 10px; scroll-margin-top: calc(var(--topbar-h) + 12px); }
.po-tools .search { flex: 1 1 260px; }
.po-tools .search .in { width: 100%; }
.po-group { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.po-group .in { min-width: 120px; }
.po-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.po-lab { font: 500 var(--fs-2xs)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.po-mk { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 6px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.po-mk b { min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.po-mk.attn b { background: color-mix(in oklab, var(--warn) 26%, var(--surface)); color: var(--ink); }
.po-mk:hover { border-color: var(--border-strong); color: var(--ink); }
.po-mk[aria-current="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.po-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 30px; font-size: var(--fs-sm); }
.po-count { color: var(--ink-2); margin-right: 4px; }
.po-count b { color: var(--ink); font-weight: 600; }
.po-fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0 6px 0 10px; border-radius: var(--r-pill); background: var(--accent-wash);
  color: var(--ink); text-decoration: none; border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); overflow-wrap: anywhere; }
.po-fchip > span { color: var(--ink-2); }
.po-fchip svg { width: 14px; height: 14px; flex: none; color: var(--ink-2); }
.po-fchip:hover { border-color: var(--accent); }
.po-fchip:hover svg { color: var(--ink); }
.po-key { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
.po-key span { display: inline-flex; align-items: center; gap: 5px; }
.po-limk { display: inline-block; width: 0; height: 12px; border-left: 2px dashed var(--ink-2); }

/* status pill: the glyph is a pie that fills along the flow; paused = pause bars; done = check; never colour alone */
.po-st { --pf-c: var(--accent); --pf-p: 50%; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 7px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink); font-size: var(--fs-xs); font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; }
.po-st > i { flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--pf-c); background: conic-gradient(var(--pf-c) 0 var(--pf-p), transparent 0); }
.po-st.sm { height: 22px; padding: 0 8px 0 6px; font-size: var(--fs-2xs); }
.po-st.ph-todo { --pf-c: var(--ink-2); --pf-p: 0%; }
.po-st.ph-plan { --pf-p: 25%; }
.po-st.ph-build { --pf-p: 50%; }
.po-st.ph-ship { --pf-p: 75%; background: var(--accent-wash); }
.po-st.ph-done { --pf-c: var(--ink-2); color: var(--ink-2); }
.po-st.ph-done > i { border-radius: 0; box-shadow: none; background: var(--pf-c); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.po-st.ph-paused { --pf-c: var(--warn-ink); background: color-mix(in oklab, var(--warn) 20%, var(--surface)); color: var(--ink); }
.po-st.ph-paused > i { width: 9px; height: 10px; border-radius: 1px; box-shadow: none; background: linear-gradient(90deg, var(--pf-c) 0 34%, transparent 34% 66%, var(--pf-c) 66%); }
.po-st.ph-none { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.po-st.ph-none > i { box-shadow: none; background: none; border: 1.5px dashed currentColor; }
.po-late { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 1px 7px 1px 5px; border-radius: var(--r-pill); white-space: nowrap;
  background: color-mix(in oklab, var(--warn) 22%, var(--surface)); color: var(--ink); font-size: var(--fs-2xs); font-weight: 500; line-height: 1.6; }
.po-late svg { width: 12px; height: 12px; color: var(--warn-ink); }
.po-soon { color: var(--ink-2); font-size: var(--fs-2xs); }
.po-ty { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.po-ty .sw { border-radius: 3px; }
.po-re { padding: 0 6px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 400; }
.po-avs { display: inline-flex; vertical-align: middle; }
.po-avs .av { box-shadow: 0 0 0 2px var(--surface); }
.po-avs .av + .av { margin-left: -4px; }
.po-fl { display: inline-block; padding: 0 6px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 500; line-height: 1.6; white-space: nowrap; }
.po-ptable td.full { min-width: 230px; }
.po-ptable td.full .sub { white-space: normal; }
.po-avs .po-more { background: var(--surface-2); color: var(--ink-2); font-size: 9.5px; }
.po-n { margin-left: 6px; color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* list table: sortable headers, group headers, overdue rows (V11: table.stack stays a table above 640px globally, layer 5) */
.po-table td.po-name { min-width: 240px; }
.po-table .po-mcode { display: none; }
.po-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; border-radius: var(--r-xs); }
.po-sort i { font-style: normal; color: var(--muted); opacity: .55; font-size: 11px; }
.po-sort:hover { color: var(--ink); }
.po-sort:hover i, .po-sort.on i { opacity: 1; color: var(--accent-ink); }
.po-sort.on { color: var(--ink); font-weight: 600; }
th.num .po-sort { flex-direction: row-reverse; }
table.dt tr.po-gh td { padding: 14px 12px 8px; background: var(--surface); border-bottom: 1px solid var(--axis); }
table.dt tbody tr.po-gh:hover td { background: var(--surface); }
.po-g:first-of-type tr.po-gh td { padding-top: 10px; }
.po-gh td { font-size: var(--fs-sm); }
.po-gh b { font-size: var(--fs-md); font-weight: 600; }
.po-gs { margin-left: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.po-gl { color: var(--warn-ink); font-weight: 500; }
.po-gt { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px 4px -4px -4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); cursor: pointer; vertical-align: middle; }
.po-gt svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.po-gt[aria-expanded="false"] svg { transform: rotate(-90deg); }
.po-gt:hover { background: var(--surface-2); color: var(--ink); }
.po-gp { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px 0 -4px 6px; border-radius: var(--r-sm); color: var(--muted); vertical-align: middle; }
.po-gp svg { width: 15px; height: 15px; }
.po-gp:hover { color: var(--accent-ink); background: var(--accent-wash); }
table.dt tr.po-is-late td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.tw > table.po-table > tbody.po-g:not(:last-of-type) > tr:last-child > td { border-radius: 0; }
.po-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.po-legend span { display: inline-flex; align-items: center; gap: 6px; }
.po-legend svg { width: 13px; height: 13px; color: var(--warn-ink); }

/* project detail */
.po-lede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.po-lede .po-late { margin: 0; font-size: var(--fs-xs); padding: 2px 9px 2px 7px; }
.po-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--ink-2); font-size: var(--fs-xs); text-decoration: none; }
.po-tag:hover { border-color: var(--accent); color: var(--ink); }
.po-detail { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: var(--s-5); align-items: start; }
.po-main, .po-side { display: grid; gap: var(--s-5); min-width: 0; }
.po-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--grid); border-radius: var(--r-md); }
.po-facts > div { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 12px 14px; }
.po-facts > div + div { border-left: 1px solid var(--grid); }
.po-facts small { font-size: var(--fs-xs); color: var(--muted); }
.po-facts b { font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.po-facts b a { color: inherit; }
.po-facts span { font-size: var(--fs-xs); line-height: 1.35; }
.po-warnt { color: var(--warn-ink); font-weight: 500; }
.po-flowbox .sh { margin-bottom: 10px; }
.po-flow { --dot: 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.po-flow li { position: relative; min-width: 0; }
.po-flow li::before { content: ""; position: absolute; top: calc(var(--dot) / 2 + 3px); left: 0; right: 0; height: 2px; background: var(--grid); }
.po-flow li:first-child::before { left: 50%; }
.po-flow li:last-child::before { right: 50%; }
.po-flow li.past::before, .po-flow li.now::before { background: var(--accent); }
.po-flow li.now::before { right: 50%; }
.po-flow li.now:first-child::before { display: none; }
.po-flow a { position: relative; display: grid; justify-items: center; gap: 6px; padding: 3px 4px 2px; color: var(--muted); text-decoration: none; font-size: var(--fs-2xs); line-height: 1.25; text-align: center; border-radius: var(--r-sm); }
.po-flow a i { width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--axis); }
.po-flow li.past a i { background: var(--accent); box-shadow: none; }
.po-flow li.now a { color: var(--ink); font-weight: 600; }
.po-flow li.now a i { width: calc(var(--dot) + 6px); height: calc(var(--dot) + 6px); margin-top: -3px; margin-bottom: -3px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.po-flow.is-paused li.now a i { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in oklab, var(--warn) 25%, transparent); }
.po-flow a:hover { color: var(--ink); background: var(--surface-2); }
.po-flow a span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* V09: each label stays inside its own column (long words wrap or hyphenate instead of running into the next step) */
.po-flow a { justify-items: stretch; }
.po-flow a i { justify-self: center; }
.po-flow a span { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; -webkit-line-clamp: 3; }
.po-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.po-flag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: var(--fs-xs); color: var(--ink-2); }
.po-flag b { font-weight: 600; color: var(--ink); }
.po-flag.yes { background: var(--accent-wash); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.po-flag.na { border-style: dashed; }
.po-flag.na b { color: var(--muted); font-weight: 400; }
.po-texts { display: grid; gap: 4px; margin: 0; }
.po-texts dt { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; }
.po-texts dt:first-child { margin-top: 0; }
.po-texts dd { margin: 0; max-width: 78ch; }
.po-hist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.po-hist > li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--grid); font-size: var(--fs-sm); }
.po-hist > li:first-child { border-top: 0; padding-top: 0; }
.po-hd { color: var(--muted); font-size: var(--fs-xs); padding-top: 1px; }
.po-hist p { margin: 0; }
.po-ch { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--ink-2); }
.po-ch span { color: var(--muted); }
.po-ch s { color: var(--muted); }
.po-people { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.po-people li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--grid); }
.po-people li:first-child { border-top: 0; padding-top: 2px; }
.po-pw { display: grid; gap: 2px; min-width: 0; }
.po-pn { font-weight: 500; color: var(--ink); text-decoration: none; }
a.po-pn:hover { color: var(--accent-ink); text-decoration: underline; }
.po-pw .sub { font-size: var(--fs-xs); color: var(--muted); }
.po-pm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; font-size: var(--fs-xs); }
.po-more { margin: 0; }
.po-more .lnk, p.po-more a { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); }
p.po-more { display: flex; flex-wrap: wrap; gap: 6px 18px; } /* D13: Thema people card has two links */
.po-more svg { width: 14px; height: 14px; }
.po-thh { display: grid; gap: 2px; margin: 0; }
.po-thh a { color: var(--ink); }
.po-thh .sub { font-size: var(--fs-xs); color: var(--muted); }
.po-cls { font: 600 var(--fs-2xs)/1 var(--f-mono); letter-spacing: .04em; padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); }
.po-pva { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.po-pva b { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.po-bar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--h0); overflow: hidden; }
.po-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.po-bar i.pl { background: var(--axis); }
.po-bar i.ov { background: var(--warn); }
.po-bar i.un { background: var(--ink-2); }
.po-var { margin: 0; font-size: var(--fs-sm); font-weight: 500; }
.po-var.ov { color: var(--warn-ink); }
.po-var.un { color: var(--ink-2); }
.po-sibs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.po-sibs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }

/* project form */
.po-form .card { align-content: start; }
.po-tri { margin: 0; padding: 0; border: 0; min-width: 0; }
.po-tri legend { padding: 0; margin-bottom: 6px; }
.po-tris { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s-4); }
.po-tbd { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-2); }
.po-actions { position: sticky; bottom: 0; z-index: 4; padding: 12px 0; background: linear-gradient(to top, var(--page) 70%, transparent); }
.po-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border-color: color-mix(in oklab, var(--crit) 30%, var(--border)); }
.po-danger h2 { font-size: var(--fs-md); }
.po-danger .sub { margin: 4px 0 0; }

/* "Por pessoa": load bars (one segment per project, coloured by type) with the overload line */
.po-ptable th small { font-weight: 400; color: var(--muted); }
.po-ptable th.po-loadh { white-space: normal; } /* its long hint wraps, so the table fits at 1440 */
.po-ptable td[data-label="Situação"] { white-space: nowrap; }
@media (min-width: 641px) and (max-width: 1360px) {
  .po-linker .po-lk-t { display: none; } /* icon-only Vincular (the summary keeps its aria-label and title) */
  .po-ptable td.po-loadc { min-width: 150px; }
  .po-ptable td.full { min-width: 200px; }
}
.po-loadc { min-width: 200px; width: 26%; } /* the Vincular column must fit at 1440 with the sidebar (was 36%, the table scrolled) */
.po-load { position: relative; display: grid; grid-template-columns: repeat(var(--max), minmax(0, 1fr)); gap: 2px; height: 22px; align-items: stretch; }
.po-load::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-xs); background: repeating-linear-gradient(90deg, var(--h0) 0 calc(100% / var(--max) - 2px), transparent 0 calc(100% / var(--max))); pointer-events: none; }
.po-seg { position: relative; display: block; min-width: 4px; border-radius: 3px; background: var(--c); transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); }
.po-seg:hover, .po-seg:focus-visible { transform: scaleY(1.25); filter: saturate(1.2) brightness(1.05); z-index: 1; }
/* M9 (D16): coarse pointers tap the whole bar (one link to the person's projects); fine pointers keep a link per segment */
.po-loadall { display: none; }
@media (pointer: coarse) { .po-loadall { display: block; position: absolute; inset: -5px 0; z-index: 2; border-radius: var(--r-xs); } }
.po-lim { position: absolute; top: -4px; bottom: -4px; left: calc(100% * var(--lim) / var(--max) - 1px); border-left: 2px dashed var(--ink-2); pointer-events: none; }
.po-cart { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.po-nn { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.po-mo { display: none; }
tr.po-is-over .po-nn { color: var(--warn-ink); }
/* D13: the project count opens the person's projects */
.po-nlink { display: inline-flex; align-items: baseline; gap: 4px; min-width: 32px; justify-content: flex-end; padding: 2px 6px; margin: -2px -6px; border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.po-nlink:hover { background: var(--accent-wash); color: var(--accent-ink); }
.po-nlink:hover .po-nn, .po-nlink:hover .po-mo { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.po-nlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.po-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.po-badge svg { width: 13px; height: 13px; }
.po-badge.over { background: color-mix(in oklab, var(--warn) 24%, var(--surface)); color: var(--ink); }
.po-badge.over svg { color: var(--warn-ink); }
.po-badge.none { border: 1px dashed var(--border-strong); color: var(--ink-2); }
table.dt tr.po-is-over td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.po-acts { white-space: nowrap; text-align: right; }
.po-acts > * { vertical-align: middle; }
.po-linker { position: relative; display: inline-block; }
.po-linker summary { list-style: none; }
.po-linker summary::-webkit-details-marker { display: none; }
.po-linker summary svg { width: 15px; height: 15px; }
.po-pop { left: auto; right: 0; width: min(340px, calc(100vw - 32px)); padding: 12px; text-align: left; white-space: normal; }
.po-pop form { display: grid; gap: 8px; }
.po-pop .lab { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }

/* Themas: demand groups with a diverging variance bar around zero (amber over plan, grey under plan; never green/red) */
.po-cls .sw { margin-right: 5px; vertical-align: -1px; }
.po-ttable td.po-dem { min-width: 260px; }
.po-dem { position: relative; }
.po-dem .po-gt { position: absolute; left: 6px; top: 9px; margin: 0; }
.po-ttable tr.po-tg td.po-dem:has(.po-gt) { padding-left: 38px; }
.po-demw { display: grid; gap: 1px; min-width: 0; }
.po-demw .sub b { font-weight: 600; color: var(--ink-2); }
.po-ttable tr.po-sub td { background: color-mix(in oklab, var(--surface-2) 45%, var(--surface)); font-size: var(--fs-sm); padding-top: 7px; padding-bottom: 7px; }
.po-ttable tr.po-sub td.po-dem { padding-left: 38px; }
.po-ttable tr.po-zero td { color: var(--muted); }
.po-dvh { min-width: 220px; }
.po-dvc { display: grid; grid-template-columns: minmax(110px, 1fr) 76px; align-items: center; gap: 10px; border-radius: var(--r-xs); }
.po-dv { position: relative; height: 12px; border-radius: var(--r-xs); background: var(--h0); }
.po-dvc:focus-visible, .po-seg:focus-visible, .po-flow a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.po-dv::after { content: ""; position: absolute; left: calc(50% - 1px); top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--ink-2); }
.po-dv i { position: absolute; top: 2px; bottom: 2px; }
.po-dv i.ov { left: 50%; background: var(--warn); border-radius: 0 3px 3px 0; }
.po-dv i.un { right: 50%; background: var(--ink-2); border-radius: 3px 0 0 3px; opacity: .75; }
.po-dv i.clamp::before { content: ""; position: absolute; top: 50%; translate: 0 -50%; border-block: 6px solid transparent; }
.po-dv i.ov.clamp::before { left: calc(100% + 1px); border-left: 6px solid var(--warn); }
.po-dv i.un.clamp::before { right: calc(100% + 1px); border-right: 6px solid var(--ink-2); }
.po-dvc.na .po-dv { background: repeating-linear-gradient(135deg, var(--h0) 0 4px, transparent 4px 8px); }
.po-dvt { font-size: var(--fs-sm); font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.po-dvt.ov { color: var(--warn-ink); }
.po-dvt.un, .po-dvt.eq { color: var(--ink-2); }
.po-dvt.muted { font-weight: 400; }
.po-swv { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.po-swv.ov { background: var(--warn); }
.po-swv.un { background: var(--ink-2); opacity: .75; }
a.po-pl { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
a.po-pl:hover { background: var(--accent); color: var(--on-accent); }
.po-ttable tfoot td { background: var(--surface-2); }
.po-ttable tfoot td:first-child { border-bottom-left-radius: calc(var(--r-lg) - 1px); }
.po-ttable tfoot td:last-child { border-bottom-right-radius: calc(var(--r-lg) - 1px); }
.po-facts.po-facts3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.po-facts3 > div:nth-child(3) { border-left: 1px solid var(--grid) !important; border-top: 0 !important; }
.po-gantt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; font-size: var(--fs-sm); }
.po-gtl { color: var(--ink-2); }
.po-gtk { position: relative; height: 14px; border-radius: var(--r-pill); background: var(--h0); }
.po-gtk i { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); }
.po-gtk i.pl { background: var(--axis); }
.po-gtk i.re { background: var(--accent); }
.po-gtk i.re.open { background: linear-gradient(90deg, var(--accent) 70%, color-mix(in oklab, var(--accent) 35%, transparent)); border-radius: var(--r-pill) 2px 2px var(--r-pill); }
.po-today { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dotted var(--ink); }
.po-todayk { display: inline-block; width: 0; height: 12px; border-left: 2px dotted var(--ink); vertical-align: -1px; margin-right: 4px; }
.po-gd { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-plist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.po-plist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--grid); }
.po-plist li:first-child { border-top: 0; padding-top: 2px; }
.po-plw { display: grid; gap: 1px; min-width: 0; }
.po-plw .sub { font-size: var(--fs-xs); color: var(--muted); }
.po-money { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); }
.po-money > span { padding: 0 4px 0 12px; color: var(--muted); font-size: var(--fs-sm); }
.po-money input { border: 0 !important; box-shadow: none !important; background: transparent !important; min-width: 0; flex: 1; }
.po-money:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.field:has(.err) .po-money { border-color: var(--crit); }

/* initiatives */
.po-arealeg { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.po-dash { display: inline-block; width: 18px; height: 10px; border: 1px dashed var(--axis); border-radius: var(--r-pill); }
.po-inis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--s-4); align-items: start; }
.po-ini { gap: 12px; }
.po-inih h2 { font-size: var(--fs-lg); }
.po-inih h2 a { color: var(--ink); text-decoration: none; }
.po-inih h2 a:hover { color: var(--accent-ink); text-decoration: underline; }
.po-inih .note { margin-top: 2px; }
.po-role { display: grid; gap: 6px; }
.po-role .names { display: flex; flex-wrap: wrap; gap: 6px; }
a.po-chip { text-decoration: none; }
a.po-chip:hover { border-color: var(--accent); }
.po-chip small, .po-ini .chip small { color: var(--muted); font-size: var(--fs-2xs); }
.po-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.po-people.po-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: 20px; }
.po-people.po-grid li:nth-child(-n+2) { border-top: 0; }
.po-pnote { font-size: var(--fs-xs); color: var(--ink-2); }
.po-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.po-notes { display: grid; gap: 8px; padding: 10px 14px; border: 1px solid var(--grid); border-radius: var(--r-md); }
.po-notes summary { cursor: pointer; margin: 0; }
.po-notes[open] summary { margin-bottom: 8px; }
.po-notes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px 16px; }
.po-note { display: grid; gap: 4px; }
.po-note label { font-size: var(--fs-sm); color: var(--ink-2); }
.po-note .po-nn { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.po-nr { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 1100px) {
  .po-detail { grid-template-columns: minmax(0, 1fr); }
  .po-roles { grid-template-columns: minmax(0, 1fr); }
  .po-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-facts > div:nth-child(3) { border-left: 0; }
  .po-facts > div:nth-child(n+3) { border-top: 1px solid var(--grid); }
}
@media (max-width: 900px) {
  .po-two { grid-template-columns: minmax(0, 1fr); }
  .po-key { margin-left: 0; }
}
@media (max-width: 640px) {
  .po-group { display: grid; gap: 4px; }
  .po-group > span { font-size: var(--fs-xs); }
  .po-table .po-code { display: none !important; }
  .po-table .po-mcode { display: inline; }
  .po-table td.po-name { min-width: 0; }
  table.stack.po-table tbody tr:not(.po-gh) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  table.stack.po-table td.po-name { flex: 1 1 100%; }
  table.stack.po-table td.po-nil { display: none; }
  table.stack.po-table td.po-nolab::before { display: none; }
  table.stack.po-table td[data-label="Horas"], table.stack.po-table td[data-label="Término"] { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  table.stack.po-table td[data-label="Horas"]::before, table.stack.po-table td[data-label="Término"]::before { margin: 0; }
  table.stack.po-table td[data-label="Término"] br { display: none; }
  table.stack.po-table td[data-label="Área"] { color: var(--ink-2); font-size: var(--fs-sm); }
  table.stack.po-table tr td.po-nil { display: none; }
  table.stack.po-ptable tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  table.stack.po-ptable td.full, table.stack.po-ptable td.po-loadc { flex: 1 1 100%; }
  table.stack.po-ptable td.po-nolab::before { display: none; }
  table.stack.po-ptable tr td.po-nil { display: none; }
  table.stack.po-ptable td[data-label="Horas"] { display: flex; gap: 6px; align-items: baseline; }
  table.stack.po-ptable td[data-label="Horas"]::before { margin: 0; }
  table.stack.po-ptable td.po-acts { margin-left: auto; }
  .po-mo { display: inline; color: var(--ink-2); font-size: var(--fs-sm); }
  table.stack tr.po-gh { display: block; margin: 14px 0 6px; padding: 0 2px; background: none; border: 0; box-shadow: none; }
  table.stack tr.po-gh td { display: block; padding: 0; background: none; border: 0; }
  table.stack tr.po-is-late, table.stack tr.po-is-over { box-shadow: inset 3px 0 0 var(--warn), var(--e-1); }
  table.stack tr.po-is-late td:first-child, table.stack tr.po-is-over td:first-child { box-shadow: none; }
  .po-loadc { width: auto; min-width: 0; grid-column: 1 / -1; }
  .po-acts { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .po-pop { left: auto; right: 0; width: min(340px, calc(100vw - 48px)); } /* V03: Vincular sits at the card's right edge, so the popover opens leftwards, on screen */
  .po-flow { grid-auto-columns: minmax(86px, 1fr); } /* V09: on phones the stepper scrolls instead of squeezing labels */
  .po-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .po-hist > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .po-actions { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .po-ttable td.po-dem { min-width: 0; }
  .po-ttable tr.po-tg td.po-dem:has(.po-gt) { padding-left: 34px; }
  .po-dem .po-gt { left: 0; top: -2px; }
  .po-ttable tr.po-sub td.po-dem { padding-left: 0; }
  table.stack tr.po-sub { margin-left: 16px; background: color-mix(in oklab, var(--surface-2) 45%, var(--surface)); }
  table.stack tr.po-sub[hidden] { display: none; }
  table.stack tr.po-sub td { background: none; }
  .po-ttable td.po-dvcell { grid-column: 1 / -1; }
  table.stack.po-ttable tbody tr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; }
  table.stack.po-ttable tbody tr[hidden] { display: none; }
  table.stack.po-ttable td.po-dem, table.stack.po-ttable td.po-dvcell { flex: 1 1 100%; }
  table.stack.po-ttable td.po-nolab::before { display: none; }
  table.stack.po-ttable tr td.po-nil { display: none; }
  .po-ttable tfoot { display: block; }
  .po-ttable tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); }
  .po-ttable tfoot td { display: block; padding: 0; border: 0; background: none; }
  .po-ttable tfoot td:empty { display: none; }
  .po-ttable tfoot td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
  .po-facts.po-facts3 { grid-template-columns: minmax(0, 1fr); }
  .po-facts3 > div + div { border-left: 0 !important; border-top: 1px solid var(--grid) !important; }
  .po-gantt { grid-template-columns: auto minmax(0, 1fr); }
  .po-gd { grid-column: 2; margin-top: -6px; font-size: var(--fs-xs); }
  .po-plist li { grid-template-columns: minmax(0, 1fr) auto; }
  .po-plist li .po-avs { display: none; }
  .po-people.po-grid li:nth-child(2) { border-top: 1px solid var(--grid); }
}

/* ==== page: settings ==== */
/* framework, cycles, users, import, audit, companies, setup checklist, account, logout (P6). Classes: cfg-* */
.matrix { border-collapse: separate; border-spacing: 2px; font-size: var(--fs-sm); }
.matrix th { padding: 4px 6px; font-weight: 500; color: var(--ink-2); text-align: left; white-space: nowrap; }
.matrix thead th.v { height: 140px; writing-mode: vertical-rl; transform: rotate(180deg); vertical-align: bottom; text-align: left; font-weight: 400; }
.matrix td { padding: 0; }
.matrix td input[data-w] { width: 44px; height: 32px; text-align: center; border: 1px solid transparent; border-radius: var(--r-xs); color: var(--ink);
  background: color-mix(in oklab, var(--h3) calc(var(--v, 0) * 70%), var(--h0)); font: inherit; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.matrix td input[data-w].is-hi { color: var(--hi3); }
.matrix td input[data-w]:hover { border-color: var(--border-strong); }
.matrix td input[data-w]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.matrix td input.is-bad, .matrix [aria-invalid="true"] { outline: 2px solid var(--crit); outline-offset: -2px; }
.matrix td.sum { min-width: 64px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* framework: which cycles an edit reaches */
.cfg-scope { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-scope-i { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 12px 3px 6px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-sm); }
.cfg-scope-i > svg { width: 15px; height: 15px; margin-left: 4px; color: var(--muted); }
.cfg-scope-i small { color: var(--muted); font-size: var(--fs-xs); }
.cfg-scope-i.is-open { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.cfg-tabs a { position: relative; }
.cfg-dot { display: none; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--warn); vertical-align: middle; }
.cfg-tabs a.is-dirty .cfg-dot { display: inline-block; }
.cfg-panel { display: grid; gap: var(--s-4); min-width: 0; }
.cfg-panel[hidden] { display: none; }
.cfg-panel > form { min-width: 0; }

/* editable rows: label above the field on phones, one header row on wider screens */
.cfg-rows { display: grid; gap: 4px; min-width: 0; }
.cfg-row { display: grid; grid-template-columns: var(--cols); gap: 6px 10px; align-items: start; min-width: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-md); }
.cfg-row.head { padding-block: 0 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.cfg-row > * { min-width: 0; }
.cfg-f { display: grid; gap: 4px; min-width: 0; }
.cfg-fl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cfg-wide { grid-column: 1 / -2; }
.cfg-row textarea.cfg-ta, .cfg-nbcell textarea.cfg-ta, .cfg-guide textarea.cfg-ta /* V17 */ { min-height: var(--h-md); resize: vertical; field-sizing: content; line-height: var(--lh-snug); padding-block: 7px; }
.cfg-nbcell textarea.cfg-ta { min-height: 58px; }
.cfg-use { align-self: center; font-size: var(--fs-xs); color: var(--muted); }
p.cfg-use { grid-column: 1 / -2; margin: -2px 0 0; }
.cfg-use a { color: var(--ink-2); }
.cfg-msg { grid-column: 1 / -1; display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--crit-ink); font-size: var(--fs-xs); font-weight: 500; }
.cfg-msg svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.cfg-row.is-new { border-style: dashed; border-color: color-mix(in oklab, var(--accent) 35%, transparent); background: color-mix(in oklab, var(--accent) 5%, var(--surface)); }
.cfg-row.has-err, .cfg-group:has(> .cfg-msg) { border-color: color-mix(in oklab, var(--crit) 40%, transparent); background: color-mix(in oklab, var(--crit) 6%, var(--surface)); }
.cfg-row:has(> .cfg-ra .cfg-del input:checked) { background: color-mix(in oklab, var(--crit) 5%, var(--surface)); }
.cfg-row:has(> .cfg-ra .cfg-del input:checked) > :not(.cfg-ra) { opacity: .5; }
.cfg-row:has(> .cfg-ra .cfg-del input:checked) .in { text-decoration: line-through; }
@keyframes cfg-flash { from { background: var(--accent-wash); } }
.cfg-moved { animation: cfg-flash .7s var(--ease); }
.cfg-ra { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.cfg-ra .btn-icon { color: var(--muted); }
.cfg-ra .btn-icon:hover { color: var(--ink); }
.cfg-del { position: relative; display: inline-flex; cursor: pointer; border-radius: var(--r-md); color: var(--muted); }
.cfg-del input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cfg-del-off, .cfg-del-on { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--h-sm); height: var(--h-sm); padding: 0 6px; border-radius: var(--r-md); }
.cfg-del svg { width: 16px; height: 16px; }
.cfg-del:hover .cfg-del-off { background: color-mix(in oklab, var(--crit) 10%, transparent); color: var(--crit-ink); }
.cfg-del-on { display: none; border: 1px solid color-mix(in oklab, var(--crit) 45%, transparent); font-size: var(--fs-xs); font-weight: 500; color: var(--crit-ink); white-space: nowrap; }
.cfg-del:has(input:checked) .cfg-del-off { display: none; }
.cfg-del:has(input:checked) .cfg-del-on { display: inline-flex; }
.cfg-del:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.cfg-add { justify-self: start; }
.cfg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: var(--s-4); border-top: 1px solid var(--grid); }
.cfg-foot .note { display: inline-flex; flex: 1 1 260px; gap: 6px; align-items: flex-start; margin: 0; }
.cfg-foot .note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.card.cfg-flat { padding-block: var(--s-4); }
.card.cfg-flat .cfg-foot { padding-top: 0; border-top: 0; }
.cfg-unit { position: relative; display: block; min-width: 0; }
.cfg-unit > input { width: 100%; padding-right: 30px; }
.cfg-unit > i { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); font-style: normal; font-size: var(--fs-sm); color: var(--muted); pointer-events: none; }
.cfg-sum { font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-sum.is-warn { color: var(--warn-ink); font-weight: 500; }
.cfg-sw { align-self: center; }

/* perfis: weight matrix */
.cfg-mscroll { position: relative; margin-inline: calc(-1 * var(--s-2)); padding: 0 var(--s-2) var(--s-2); }
.cfg-matrix tbody th { position: sticky; left: 0; z-index: 1; padding: 0 6px 0 0; background: var(--surface); font-weight: 400; }
.cfg-pname .in { width: 170px; }
.cfg-n { width: 48px; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--r-xs); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); text-align: center; }
.cfg-matrix tr.is-new > * { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.cfg-matrix tr:has(.cfg-del input:checked) > :not(:last-child) { opacity: .45; }
.cfg-matrix tr:has(.cfg-del input:checked) .in { text-decoration: line-through; }
.cfg-matrix .cfg-th-sum { white-space: normal; max-width: 72px; line-height: 1.2; }
.cfg-cnt { display: inline-block; min-width: 28px; padding: 2px 6px; border-radius: var(--r-xs); color: var(--accent-ink); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.cfg-cnt:hover { background: var(--accent-wash); }
.cfg-legend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }
.cfg-legend span { margin-right: 4px; }
.cfg-legend i { width: 18px; height: 12px; border-radius: 3px; background: color-mix(in oklab, var(--h3) calc(var(--v) * 70%), var(--h0)); }

/* competências: groups */
.cfg-groups { display: grid; gap: var(--s-3); }
.cfg-group { display: grid; gap: var(--s-2); min-width: 0; margin: 0; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.cfg-group-h { display: flex; align-items: center; gap: 10px; }
.cfg-gname { flex: 1 1 auto; max-width: 420px; }
.cfg-gname .in { font-weight: 600; }
.cfg-group-h .note { white-space: nowrap; }
.cfg-group-h .cfg-ra { margin-left: auto; }

/* parâmetros: scales */
.cfg-scales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-5); }
.cfg-scale, .cfg-list { display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.cfg-scale legend, .cfg-list legend { margin-bottom: 6px; padding: 0; font-size: var(--fs-sm); font-weight: 600; }
.cfg-scale legend small { font-weight: 400; color: var(--muted); }
.cfg-lv { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; }
.cfg-lv b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); font-family: var(--f-mono); font-size: var(--fs-xs); }
.cfg-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); }
.cfg-item { padding: 0; }

/* nine box editor */
.cfg-h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.cfg-h3 small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.cfg-nb-intro h2 { display: inline-flex; align-items: center; gap: 8px; }
.cfg-nb-intro h2 svg { width: 20px; height: 20px; color: var(--accent-ink); }
.cfg-nb-axes > .card { align-content: start; }
.cfg-bandbar { display: flex; gap: 3px; min-height: 60px; }
.cfg-band { flex: 1 1 0; min-width: 72px; display: grid; align-content: center; gap: 1px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); text-decoration: none; transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.cfg-band.b1 { background: color-mix(in oklab, var(--crit) 14%, var(--surface)); }
.cfg-band.b3 { background: color-mix(in oklab, var(--good) 14%, var(--surface)); }
.cfg-band b { font-size: var(--fs-xl); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cfg-band span { font-size: var(--fs-sm); font-weight: 500; }
.cfg-band small { font-size: var(--fs-2xs); color: var(--ink-2); white-space: nowrap; }
.cfg-band:hover, .cfg-band:focus-visible { border-color: var(--border-strong); box-shadow: var(--e-2); }
.cfg-strip { --rows: 3; }
.cfg-strip-plot { position: relative; height: calc(30px + var(--rows) * 12px); margin: 18px 8px 0; border-bottom: 1px solid var(--axis); }
.cfg-zone { position: absolute; top: 0; bottom: 0; }
.cfg-zone.z1 { background: color-mix(in oklab, var(--crit) 8%, transparent); }
.cfg-zone.z3 { background: color-mix(in oklab, var(--good) 8%, transparent); }
.cfg-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--axis); }
.cfg-lim { position: absolute; top: -16px; bottom: 0; border-left: 1.5px dashed var(--accent); }
.cfg-lim b { position: absolute; top: -1px; left: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.cfg-pt { position: absolute; bottom: calc(4px + var(--y, 0) * 12px); z-index: 1; width: 11px; height: 11px; margin-left: -5.5px; border: 1.5px solid var(--surface); border-radius: 50%; transition: transform var(--t-fast) var(--ease); }
.cfg-pt::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.cfg-pt.up { background: var(--good); }
.cfg-pt.dn { background: var(--crit); }
.cfg-pt.pv { background: var(--surface); border: 1.5px dashed var(--ink-2); }
.cfg-pt:hover, .cfg-pt:focus-visible { z-index: 3; transform: scale(1.45); outline: 2px solid var(--accent); outline-offset: 1px; }
.cfg-strip-ax { position: relative; height: 20px; margin: 0 8px; font-size: var(--fs-2xs); color: var(--muted); }
.cfg-strip-ax span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfg-strip-n { margin: 0; }
.cfg-guides { display: grid; gap: 8px; }
.cfg-guide { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.cfg-pot { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; }
.cfg-pot.p3 { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.cfg-pot.p2 { border-color: transparent; background: var(--accent-wash); color: var(--accent-ink); }
.cfg-pot.sug { border-style: dashed; border-color: var(--border-strong); background: var(--surface); color: var(--ink); }
.cfg-pot.none { color: var(--muted); }
.cfg-pot b { font-size: var(--fs-md); }
.cfg-sug { display: grid; gap: var(--s-3); margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--grid); }
.cfg-sug-f input:disabled { opacity: .55; }
.cfg-sp { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-sp-h { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-sugprev .note { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.cfg-sugprev .note svg, .cfg-nbfoot .note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cfg-nbseg { flex: none; }
.cfg-nbwrap { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
.cfg-nby { display: grid; place-items: center; }
.cfg-nby span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.cfg-nby span::after { content: " →"; }
.cfg-nbgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cfg-nbx { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 6px; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.cfg-nbx b { grid-column: 1 / -1; font-weight: 500; }
.cfg-nbcell { --nb: var(--surface-2); --nbs: var(--none); --nbo: var(--ink); display: grid; align-content: start; gap: 6px; min-width: 0; padding: 10px; border: 1px solid color-mix(in oklab, var(--ink) 9%, transparent); border-radius: var(--r-md); background: var(--nb); }
.cfg-nbcell.b1 { --nb: color-mix(in oklab, var(--crit) 34%, var(--surface)); --nbs: var(--crit); --nbo: var(--on-crit); }
.cfg-nbcell:is(.b2, .b4) { --nb: color-mix(in oklab, var(--crit) 16%, var(--surface)); --nbs: color-mix(in oklab, var(--crit) 42%, var(--surface)); }
.cfg-nbcell:is(.b6, .b8) { --nb: color-mix(in oklab, var(--good) 16%, var(--surface)); --nbs: color-mix(in oklab, var(--good) 42%, var(--surface)); }
.cfg-nbcell.b9 { --nb: color-mix(in oklab, var(--good) 34%, var(--surface)); --nbs: var(--good); --nbo: var(--on-good); }
.cfg-nbcell.has-err { outline: 2px solid var(--crit); outline-offset: 1px; }
.cfg-nbcell-h { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.cfg-nbn { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--nbs); color: var(--nbo); font-size: var(--fs-sm); font-weight: 700; }
.cfg-nbaxes { flex: 1; min-width: 0; font-size: var(--fs-2xs); line-height: 1.25; color: var(--ink-2); }
.cfg-nbcount { display: grid; justify-items: end; flex: none; padding: 2px 6px; border-radius: var(--r-sm); color: var(--ink); line-height: 1.1; text-decoration: none; }
.cfg-nbcount b { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.cfg-nbcount small { font-size: var(--fs-2xs); color: var(--ink-2); white-space: nowrap; }
.cfg-nbcount.is-zero b { color: var(--ink-2); font-weight: 400; }
.cfg-nbcount:hover, .cfg-nbcount:focus-visible { background: color-mix(in oklab, var(--surface) 75%, transparent); box-shadow: var(--e-1); }
.cfg-nbcell .in { background: color-mix(in oklab, var(--surface) 88%, transparent); }
.cfg-nbname { font-weight: 600; }
.cfg-nbact { font-size: var(--fs-sm); }
.cfg-nbfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cfg-nbfoot .note { display: flex; gap: 6px; align-items: flex-start; margin: 0; }

/* cycles: lifecycle cards */
.cfg-cycles { display: grid; gap: var(--s-4); }
.cfg-cycle { gap: var(--s-4); }
.cfg-cycle.is-current { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); box-shadow: inset 3px 0 0 var(--accent), var(--e-1); }
.cfg-cy-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.cfg-cy-t { display: grid; gap: 6px; min-width: 0; }
.cfg-cy-t h2 { margin: 0; font-size: var(--fs-xl); }
.cfg-cy-t .note { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cfg-cy-t .note svg { width: 15px; height: 15px; }
.cfg-cy-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cfg-frozen { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 1px 9px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--ink-2); }
.cfg-frozen svg { width: 13px; height: 13px; }
.cfg-cy-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cfg-cy-acts form { display: contents; }
.cfg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.cfg-steps li { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 0 14px 0 0; }
.cfg-steps li:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: 30px; right: 8px; height: 2px; border-radius: 2px; background: var(--grid); z-index: 0; }
.cfg-steps li.is-done:not(:last-child)::after { background: var(--accent); }
.cfg-step-n { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.cfg-step-n svg { width: 16px; height: 16px; }
.cfg-steps .is-done .cfg-step-n { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.cfg-steps .is-now .cfg-step-n { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-wash); }
.cfg-step-t { position: relative; z-index: 1; display: grid; gap: 1px; min-width: 0; margin-left: -10px; padding: 0 10px; background: var(--surface); }
.cfg-step-t b { font-size: var(--fs-md); font-weight: 600; }
.cfg-step-t small { font-size: var(--fs-xs); color: var(--muted); }
.cfg-steps .is-todo .cfg-step-t b { color: var(--ink-2); font-weight: 500; }
.cfg-cy-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-4) var(--s-6); align-items: start; padding-top: var(--s-4); border-top: 1px solid var(--grid); }
.cfg-cy-prog { display: grid; gap: 4px; min-width: 0; }
.cfg-cy-big { display: flex; align-items: baseline; gap: 10px; }
.cfg-cy-big b { font-size: var(--fs-kpi); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cfg-cy-big span { font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-ready { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.cfg-ready li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.cfg-ready li > svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--muted); }
.cfg-ready li.is-warn > svg { color: var(--warn-ink); }
.cfg-ready li.is-ok > svg { color: var(--accent-ink); }
.cfg-ready a { color: var(--accent-ink); white-space: nowrap; }
.cfg-cy-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
dialog .cfg-danger { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--grid); }
dialog .cfg-danger h3 { margin: 0; font-size: var(--fs-md); color: var(--crit-ink); }
@media (max-width: 900px) {
  .cfg-cy-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cfg-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cfg-steps li::after { display: none; }
  .cfg-cy-acts { width: 100%; }
  .cfg-cy-acts .btn, .cfg-cy-acts .btn-ghost { flex: 1 1 auto; justify-content: center; }
}

/* users */
.cfg-roles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cfg-roles a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.cfg-roles a:hover { border-color: var(--border-strong); box-shadow: var(--e-1); }
.cfg-roles a[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cfg-roles b { grid-row: 1 / span 2; font-size: var(--fs-2xl); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cfg-roles .role { justify-self: start; }
.cfg-roles small { font-size: var(--fs-2xs); line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cfg-utools { align-items: center; }
.cfg-utools .search { flex: 1 1 280px; max-width: 420px; }
.cfg-state { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.cfg-state svg { width: 14px; height: 14px; }
.cfg-users { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); overflow: hidden; }
.cfg-user { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(0, 1.5fr) minmax(150px, .7fr) auto; align-items: center; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--grid); }
.cfg-user:first-child { border-top: 0; }
.cfg-user[hidden] { display: none; }
.cfg-user.is-off > :not(.cfg-u-acts) { opacity: .6; }
.cfg-u-who { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cfg-u-id { display: grid; gap: 2px; min-width: 0; }
.cfg-u-id .sub { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.cfg-u-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cfg-flag { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: var(--fs-2xs); color: var(--ink-2); white-space: nowrap; }
.cfg-flag svg { width: 12px; height: 12px; }
.cfg-flag.is-warn { border-color: transparent; background: var(--warn); color: var(--on-warn); font-weight: 500; }
.cfg-flag.is-off { border-style: dashed; }
.cfg-u-form { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(150px, 1.2fr); gap: 6px; align-items: center; padding: 4px; margin: -4px; border-radius: var(--r-md); }
.cfg-u-form.is-changed { background: var(--accent-wash); }
.cfg-u-save { grid-column: 1 / -1; display: flex; gap: 6px; }
.cfg-u-save[hidden] { display: none; }
.cfg-u-meta { display: grid; gap: 3px; font-size: var(--fs-xs); color: var(--ink-2); }
.cfg-u-meta > * { display: inline-flex; align-items: center; gap: 5px; }
.cfg-u-meta svg { width: 13px; height: 13px; color: var(--muted); }
.cfg-u-meta a { color: var(--accent-ink); text-decoration: none; }
.cfg-u-meta a:hover { text-decoration: underline; }
.cfg-u-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.cfg-u-acts form { display: contents; }
.cfg-u-del:hover { color: var(--crit-ink); }
.cfg-roles-pick { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.cfg-roles-pick legend { margin-bottom: 4px; }
.cfg-rp { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.cfg-rp:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.cfg-rp input { margin-top: 3px; accent-color: var(--accent); }
.cfg-rp span { display: grid; gap: 2px; }
.cfg-rp small { font-size: var(--fs-xs); color: var(--ink-2); }
@media (max-width: 1180px) {
  .cfg-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfg-user { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .cfg-u-meta { grid-auto-flow: column; justify-content: start; gap: 12px; }
}
@media (max-width: 640px) {
  .cfg-roles { display: flex; overflow-x: auto; scrollbar-width: none; }
  .cfg-roles a { flex: none; grid-template-columns: auto auto; padding: 8px 10px; }
  .cfg-roles b { grid-row: auto; font-size: var(--fs-lg); }
  .cfg-roles small { display: none; }
  .cfg-user { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .cfg-u-form { grid-template-columns: minmax(0, 1fr); }
  .cfg-u-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .cfg-u-acts { justify-content: flex-start; }
}

/* import: steps, drop zone, analysis */
.cfg-isteps { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-isteps li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); }
.cfg-isteps li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 600; }
.cfg-isteps li > span svg { width: 14px; height: 14px; }
.cfg-isteps .is-done > span { background: var(--accent); color: var(--on-accent); }
.cfg-isteps .is-now { border-color: var(--accent); color: var(--ink); font-weight: 500; }
.cfg-isteps .is-now > span { background: var(--accent-wash); color: var(--accent-ink); }
.cfg-preview { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); box-shadow: inset 3px 0 0 var(--accent), var(--e-2); }
.cfg-preview h2, section.card .sec-h h2 { display: inline-flex; align-items: center; gap: 8px; }
.cfg-preview h2 svg, section.card .sec-h h2 svg { width: 20px; height: 20px; color: var(--accent-ink); }
.cfg-diff { display: grid; gap: 8px; }
.cfg-dd { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.cfg-dd > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: var(--fs-sm); }
.cfg-dd > summary::-webkit-details-marker { display: none; }
.cfg-dd > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.cfg-dd[open] > summary::after { transform: rotate(225deg); }
.cfg-dd > summary svg { width: 16px; height: 16px; color: var(--muted); }
.cfg-dd > summary small { font-size: var(--fs-xs); color: var(--muted); }
.cfg-dd.is-warn > summary svg { color: var(--warn-ink); }
.cfg-dd > :not(summary) { margin: 0 12px 10px; }
.cfg-difflist { display: grid; gap: 3px; max-height: 280px; padding: 0 0 0 18px; overflow: auto; font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-diff > .note, .cfg-commit .note { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.cfg-diff > .note svg, .cfg-commit > .note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cfg-commit { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--grid); }
.cfg-fwopt { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
/* ONB-04: template download and the Recursos columns */
.cfg-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cfg-tpl .note { margin: 0; font-size: var(--fs-xs); }
.cfg-colsl { display: grid; gap: 2px 0; margin: 0 12px 12px; font-size: var(--fs-sm); }
.cfg-colsl dt { margin-top: 8px; font-weight: 600; color: var(--ink); }
.cfg-colsl dt:first-child { margin-top: 0; }
.cfg-colsl dd { margin: 0; color: var(--ink-2); }
.cfg-drop { position: relative; display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 16px 18px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.cfg-drop:hover, .cfg-drop.is-over, .cfg-drop:focus-within { border-color: var(--accent); background: var(--accent-wash); }
.cfg-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cfg-drop-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface); color: var(--accent-ink); box-shadow: var(--e-1); }
.cfg-drop-ic svg { width: 22px; height: 22px; }
.cfg-drop-t { display: grid; gap: 2px; min-width: 0; }
.cfg-drop-t small { font-size: var(--fs-xs); color: var(--muted); }
.cfg-drop-t em { font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); overflow-wrap: anywhere; }
.cfg-drop.has-file { border-style: solid; border-color: var(--accent); }
.cfg-rules { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-rules li { display: flex; gap: 8px; align-items: flex-start; }
.cfg-rules svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--muted); }
[data-cfg-newfields][hidden] { display: none; }
.cfg-exports { display: grid; gap: 6px; }
.cfg-exp { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.cfg-exp:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cfg-exp > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent-ink); }
.cfg-exp span { display: grid; gap: 1px; }
.cfg-exp small { font-size: var(--fs-xs); color: var(--muted); }
.cfg-runs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cfg-runs li { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(200px, 320px); align-items: start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--grid); }
.cfg-runs li:first-child { border-top: 0; }
.cfg-run-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.cfg-run-ic svg { width: 16px; height: 16px; }
.cfg-run-b { display: grid; gap: 2px; min-width: 0; }
.cfg-run-b p { margin: 0; overflow-wrap: anywhere; }
.cfg-run-st { font-size: var(--fs-xs); color: var(--ink-2); }
.cfg-runw { min-width: 160px; }
@media (max-width: 760px) { .cfg-runs li { grid-template-columns: 32px minmax(0, 1fr); } .cfg-run-w { grid-column: 2; } }
.cfg-runw > summary { min-height: 32px; padding: 4px 10px; color: var(--warn-ink); }
.cfg-runw .btn-ghost { margin-bottom: 10px; }

/* audit timeline */
.cfg-afilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; }
.cfg-afilter .search { flex: 1 1 240px; }
.cfg-afilter select.in { width: auto; max-width: 200px; }
.cfg-afilter .cfg-date .in { width: 150px; }
.cfg-af-acts { display: inline-flex; gap: 6px; margin-left: auto; }
.cfg-aover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: var(--s-4); align-items: end; }
.cfg-types { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-end; }
.cfg-types .chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.cfg-types .chip svg { width: 14px; height: 14px; color: var(--muted); }
.cfg-types .chip b { font-variant-numeric: tabular-nums; }
.cfg-act { margin: 0; }
.cfg-act-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 2px; height: 56px; padding-bottom: 2px; border-bottom: 1px solid var(--axis); }
.cfg-act-bars a { position: relative; display: flex; align-items: flex-end; height: 100%; border-radius: 2px; }
.cfg-act-bars a::before { content: ""; position: absolute; inset: 0 -1px; }
.cfg-act-bars i { display: block; width: 100%; height: max(3px, var(--h)); border-radius: 2px 2px 0 0; background: var(--l2); transition: background var(--t-fast) var(--ease); }
.cfg-act-bars a.zero i { height: 2px; background: var(--grid); }
.cfg-act-bars a:hover i, .cfg-act-bars a:focus-visible i, .cfg-act-bars a.on i { background: var(--accent); }
.cfg-act-bars a.zero { pointer-events: none; }
.cfg-act figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: var(--fs-2xs); color: var(--muted); }
.cfg-acount { margin: 0; }
.cfg-timeline { display: grid; gap: var(--s-5); }
.cfg-day { display: grid; gap: var(--s-2); }
.cfg-day-h { position: sticky; top: var(--topbar-h); z-index: 2; margin: 0; padding: 6px 0; background: var(--page); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.cfg-tl { position: relative; display: grid; gap: 0; margin: 0; padding: 4px 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); }
.cfg-ev { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 10px 16px; }
.cfg-ev + .cfg-ev { border-top: 1px solid var(--grid); }
.cfg-ev-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.cfg-ev-ic svg { width: 16px; height: 16px; }
.cfg-ev.e-framework .cfg-ev-ic, .cfg-ev.e-cycle .cfg-ev-ic { background: var(--accent-wash); color: var(--accent-ink); }
.cfg-ev.e-user .cfg-ev-ic, .cfg-ev.e-company .cfg-ev-ic { background: color-mix(in oklab, var(--a3) 18%, var(--surface)); color: var(--ink); }
.cfg-ev-b { display: grid; gap: 3px; min-width: 0; }
.cfg-ev-s { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); }
.cfg-who { margin-right: 4px; font-weight: 600; color: var(--ink); text-decoration: none; }
.cfg-who:hover { text-decoration: underline; }
.cfg-what { color: var(--ink); }
a.cfg-what { color: var(--ink); text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a.cfg-what:hover { color: var(--accent-ink); }
.cfg-ev-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.cfg-ev-m time { font-variant-numeric: tabular-nums; }
.cfg-rep { padding: 0 6px; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.cfg-tag { padding: 0 6px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); text-decoration: none; }
.cfg-tag:hover { background: var(--accent-wash); color: var(--accent-ink); }
.cfg-diffs { display: grid; gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.cfg-diffs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cfg-dk { color: var(--ink-2); }
.cfg-dk:not(:empty)::after { content: ":"; }
.cfg-old { padding: 0 5px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--muted); }
.cfg-new { padding: 0 5px; border-radius: var(--r-xs); background: var(--accent-wash); color: var(--ink); font-weight: 500; }
.cfg-arrow { color: var(--muted); }
.cfg-more > summary { width: fit-content; cursor: pointer; font-size: var(--fs-xs); color: var(--accent-ink); }
.cfg-ev-x { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
@media (max-width: 900px) {
  .cfg-aover { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cfg-afilter select.in, .cfg-afilter .cfg-date, .cfg-afilter .cfg-date .in { width: 100%; max-width: none; flex: 1 1 140px; }
  .cfg-af-acts { margin-left: 0; }
  .cfg-ev { padding: 10px 12px; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); }
  .cfg-ev-ic { width: 28px; height: 28px; }
}

/* setup checklist */
.cfg-setup { gap: var(--s-5); }
.cfg-setup-h { display: flex; align-items: center; gap: var(--s-5); }
.cfg-setup-h > div { display: grid; gap: 8px; justify-items: start; }
.cfg-setup-h h2 { margin: 0; font-size: var(--fs-xl); }
.cfg-setup-h .sub { margin: 0; max-width: 70ch; }
.cfg-ring { flex: none; width: 96px; height: 96px; }
.cfg-ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.cfg-ring-fg { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.cfg-ring-n { fill: var(--ink); font: 600 20px var(--f-sans); }
.cfg-ring-t { fill: var(--muted); font: 400 10px var(--f-sans); }
.cfg-check { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--grid); }
.cfg-check li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--grid); }
.cfg-check li:not(:last-child)::before { content: ""; position: absolute; top: 46px; bottom: -14px; left: 19px; width: 2px; background: var(--grid); z-index: 0; }
.cfg-check li.is-done:not(:last-child)::before { background: var(--accent); }
.cfg-check-n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.cfg-check-n svg { width: 16px; height: 16px; }
.cfg-check .is-done .cfg-check-n { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.cfg-check .is-next .cfg-check-n { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-wash); }
.cfg-check .is-next { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.cfg-check-b { display: grid; gap: 3px; min-width: 0; }
.cfg-check-b b { font-weight: 600; }
.cfg-check .is-done .cfg-check-b b { color: var(--ink-2); }
.cfg-check-b small { font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-check-b .progress { max-width: 320px; margin-top: 4px; }
.cfg-check-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cfg-check-post, .cfg-inline { display: contents; } /* ONB-03 */
.cfg-nosys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: var(--s-3); padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); }
.cfg-nosys p { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 320px; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-nosys p svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--muted); }
.cfg-setup-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-3); }
.cfg-sc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--e-1); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.cfg-sc:hover { border-color: var(--border-strong); box-shadow: var(--e-2); }
.cfg-sc > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cfg-sc small { font-size: var(--fs-xs); color: var(--muted); }
.cfg-sc > svg { width: 16px; height: 16px; color: var(--muted); }
.cfg-sc-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent-ink); }
.cfg-sc-ic svg { width: 19px; height: 19px; }

/* companies */
.cfg-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--s-4); }
.cfg-co { align-content: start; gap: var(--s-4); }
.cfg-co.is-here { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); box-shadow: inset 3px 0 0 var(--accent), var(--e-1); }
.cfg-co.is-off { background: var(--surface-2); }
.cfg-co.is-off :is(.cfg-co-h, .facts, .cfg-co-cyc, .cfg-co-setup) { opacity: .7; }
.cfg-co-h { display: flex; align-items: center; gap: 12px; }
.cfg-co-h h2 { margin: 0; font-size: var(--fs-lg); }
.cfg-co-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.facts.cfg-co-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfg-co-cyc { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-co-cyc svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--muted); }
.cfg-co-setup { display: grid; gap: 6px; }
.cfg-co-sl { font-size: var(--fs-xs); color: var(--ink-2); }
.cfg-co-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--grid); }
.cfg-co-acts form { display: contents; }
.cfg-co-why { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .cfg-setup-h { flex-direction: column; align-items: flex-start; }
  .cfg-check li { grid-template-columns: 32px minmax(0, 1fr); }
  .cfg-check-a { grid-column: 2; justify-content: flex-start; }
  .cfg-check li:not(:last-child)::before { display: none; }
}

/* account */
.cfg-acct { align-items: start; }
.cfg-pw { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-4) 0 0; border: 0; border-top: 1px solid var(--grid); }
.cfg-pw legend { padding: 0; font-weight: 600; }
.cfg-pwrules { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
.cfg-pwrules li { display: flex; align-items: center; gap: 8px; }
.cfg-pwrules svg { width: 16px; height: 16px; flex: none; color: var(--border-strong); }
.cfg-pwrules li.is-ok svg { color: var(--accent-ink); }
.cfg-pwrules li.is-ok { color: var(--ink); }
.cfg-pwrules li:not(.is-ok):not(.is-idle):not(.is-info) svg { color: var(--warn-ink); }
.cfg-pwrules li.is-info svg { color: var(--muted); }
.cfg-pwrules small { color: var(--muted); }
.cfg-pwmeter { height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.cfg-pwmeter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--l2); transition: width var(--t-med) var(--ease); }
.cfg-pwmeter i[data-s="1"] { background: var(--warn); }
.cfg-pwmeter i[data-s="4"] { background: var(--accent); }
.cfg-acos { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cfg-acos li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); }
.cfg-acos li.is-here { background: var(--accent-wash); }
.cfg-acos li > span.minw-0 { display: grid; gap: 2px; flex: 1; }
.cfg-acos .role { justify-self: start; }
.cfg-acos form { margin-left: auto; }
.cfg-acct .note a { display: inline-flex; align-items: center; gap: 6px; }
.cfg-acct .note a svg { width: 15px; height: 15px; }

/* logout (bare layout) */
.cfg-out { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 32px 16px; background: radial-gradient(1200px 500px at 50% -10%, var(--accent-wash), transparent 70%), var(--page); }
.cfg-out-card { display: grid; gap: var(--s-5); width: min(440px, 100%); padding: 32px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--e-3); }
.cfg-out-brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; color: var(--ink); text-decoration: none; }
.cfg-out-brand b { display: block; font-size: var(--fs-lg); letter-spacing: .04em; line-height: 1.15; }
.cfg-out-brand small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.cfg-out-who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.cfg-out-who span { display: grid; gap: 1px; }
.cfg-out-who small { font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.cfg-out h1 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.01em; }
.cfg-out .ink2 { margin: 0; }
.cfg-out-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg-out-acts > * { flex: 1 1 160px; justify-content: center; }
.cfg-out .note { margin: 0; }
@media (max-width: 480px) { .cfg-out-card { padding: 24px 20px; } }

/* SEC-5: confirm a cycle switch that came from a plain link (GET never switches) */
.cfg-cyv { gap: var(--s-5); max-width: 720px; }
.cfg-cyv-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.cfg-cyv-c { display: grid; justify-items: start; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.cfg-cyv-c b { font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.cfg-cyv-c.is-to { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); background: var(--accent-wash); }
.cfg-cyv-l { font-size: var(--fs-xs); color: var(--ink-2); }
.cfg-cyv-arrow { display: grid; place-items: center; color: var(--muted); }
.cfg-cyv-arrow svg { width: 20px; height: 20px; }
.cfg-cyv-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg-cyv-acts form { display: contents; }
@media (max-width: 560px) {
  .cfg-cyv-flow { grid-template-columns: minmax(0, 1fr); }
  .cfg-cyv-arrow { transform: rotate(90deg); justify-self: start; margin-left: 16px; }
  .cfg-cyv-acts > * { flex: 1 1 100%; justify-content: center; }
}

/* removal dialog */
.cfg-dlg { width: min(540px, calc(100vw - 32px)); }
.cfg-dlg-list { display: grid; gap: 6px; max-height: 40vh; margin: 0; padding: 0; overflow: auto; list-style: none; }
.cfg-dlg-list li { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); }
.cfg-dlg-list span { font-size: var(--fs-xs); color: var(--ink-2); }

@media (max-width: 760px) {
  .cfg-nbwrap, .cfg-nbgrid { grid-template-columns: minmax(0, 1fr); }
  .cfg-nby, .cfg-nbx { display: none; }
}
@media (max-width: 720px) {
  .cfg-row:not(.head) { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 12px; border-color: var(--border); background: var(--surface); }
  .cfg-row.is-new { border-style: dashed; }
  .cfg-row.head { display: none; }
  .cfg-fl { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
  .cfg-wide, p.cfg-use { grid-column: auto; }
  .cfg-row > .cfg-ra { order: -1; justify-self: end; margin: -4px -6px -6px 0; }
  .cfg-row.cfg-item { grid-template-columns: minmax(0, 1fr) auto; padding: 0; border: 0; background: none; }
  .cfg-row.cfg-item > .cfg-ra { order: 0; margin: 0; }
  .cfg-group { padding: var(--s-2); }
  .cfg-group-h { flex-wrap: wrap; }
  .cfg-gname { flex-basis: 100%; max-width: none; }
  .cfg-guide { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cfg-guide .cfg-pot { justify-self: start; }
  .cfg-band small { white-space: normal; }
}

/* ==== page: auth ==== */
/* A fixed brand canvas beside a form that follows the app's light/dark preference. */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-story { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 44px clamp(32px, 5.5vw, 88px) 32px; background: #14243d; color: #f7f9fe; }
.auth-logo { display: inline-flex; width: fit-content; color: #f7f9fe; text-decoration: none; border-radius: 3px; }
.auth-logo .pace-logotype > path { fill: #87b1ff; }
.auth-story-content { position: relative; z-index: 1; max-width: 490px; margin: auto 0; padding: 64px 0; }
.auth-eyebrow { display: flex; align-items: center; gap: 10px; color: #b0c5e5; font-size: 10px; font-weight: 500; letter-spacing: .15em; }
.auth-eyebrow > span { width: 18px; height: 2px; background: #87b1ff; flex: none; }
.auth-story h2 { margin-top: 24px; font-size: clamp(36px, 3.65vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; text-wrap: initial; overflow-wrap: normal; }
.auth-story h2 em { color: #93baff; font-style: normal; }
.auth-description { max-width: 37ch; margin-top: 24px; font-size: 15px; line-height: 1.8; color: #b8c6da; }
.auth-benefits { display: grid; gap: 16px; list-style: none; padding: 0; margin: 36px 0 0; }
.auth-benefits li { display: flex; align-items: center; gap: 13px; font-size: 13px; line-height: 1.5; color: #e2e9f4; }
.auth-benefit-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid #ffffff18; border-radius: 8px; background: #ffffff04; color: #93baff; }
.auth-benefit-icon svg { width: 17px; height: 17px; }
.auth-story-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid #ffffff20; color: #a8b9d2; font-size: 11px; letter-spacing: .02em; }
.auth-foot-arrow { display: grid; place-items: center; width: 26px; height: 26px; }
.auth-foot-arrow svg { width: 22px; height: 22px; }
.auth-orbit { position: absolute; z-index: -1; pointer-events: none; width: 540px; height: 540px; right: -320px; bottom: -240px; stroke: #87b1ff1c; }
.auth-orbit-dot { fill: #87b1ff; stroke: none; opacity: .4; }
.auth-panel { display: flex; flex-direction: column; min-width: 0; padding: 32px clamp(28px, 3.6vw, 60px) 26px; background: var(--surface); }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.auth-platform { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .13em; }
.auth-mobile-logo { display: none; color: var(--ink); text-decoration: none; }
.auth-theme { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 10px; flex: none; background: transparent; border: 1px solid var(--border); border-radius: 8px; font-size: 11px; color: var(--ink-2); cursor: pointer; }
.auth-theme:hover { color: var(--ink); background: var(--surface-2); }
.auth-theme svg { width: 15px; height: 15px; }
.auth-form { width: min(388px, 100%); margin: auto; padding: 56px 0; }
.auth-entry-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 27px; border: 1px solid var(--border); border-radius: 12px; color: var(--accent-ink); background: var(--surface-2); }
.auth-entry-icon svg { width: 21px; height: 21px; }
.auth-kicker { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .11em; margin-bottom: 10px; }
.auth-welcome h1 { font-size: clamp(27px, 2.4vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -.045em; }
.auth-welcome > p:last-child { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.auth-form form { display: grid; gap: 22px; margin-top: 32px; }
.auth-form .field { gap: 8px; }
.auth-form .field > label { color: var(--ink); font-size: 13px; }
.auth-form .field input { min-height: 52px; padding: 13px 15px; border-color: color-mix(in oklab, var(--ink) 22%, var(--surface)); border-radius: 9px; background: var(--surface); font-size: 15px; }
.auth-form .field input:focus { border-color: var(--accent); }
.auth-form .field input::placeholder { color: var(--muted); font-size: 14px; }
.auth-form .reveal > button { width: 44px; height: 44px; right: 4px; }
.auth-form .reveal input { padding-right: 52px !important; }
.auth-submit { min-height: 52px; margin-top: 4px; border-radius: 9px; font-size: 14px; font-weight: 500; }
.auth-submit svg { width: 18px; height: 18px; margin-left: 8px; }
.auth-help { margin-top: 20px; font-size: 12px; }
.auth-help summary { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; width: fit-content; max-width: 100%; margin-inline: auto; color: var(--ink-2); list-style: none; cursor: pointer; border-radius: 4px; }
.auth-help summary::-webkit-details-marker { display: none; }
.auth-help summary svg { width: 13px; height: 13px; }
.auth-help summary:hover { color: var(--accent-ink); }
.auth-help[open] summary svg { rotate: 180deg; }
.auth-help > p { margin: 8px 0 20px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; color: var(--ink-2); background: var(--surface-2); line-height: 1.7; }
.auth-access-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 22px; padding-top: 25px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.auth-access-note svg { width: 13px; height: 13px; }
.auth-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; color: var(--muted); font-size: 10px; }
@media (min-width: 901px) and (max-height: 800px) {
  .auth-story-content { padding-block: 38px; }
  .auth-form { padding-block: 30px; }
  .auth-entry-icon { margin-bottom: 20px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .auth-story { padding-inline: 36px; }
  .auth-panel { padding-inline: 32px; }
  .auth-platform { font-size: 8px; letter-spacing: .06em; }
}
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-story { display: none; }
  .auth-panel { min-height: 100vh; min-height: 100dvh; padding: max(22px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .auth-mobile-logo { display: inline-flex; }
  .auth-platform { display: none; }
  .auth-form { padding-block: 48px; }
  .auth-form .field input { font-size: 16px; }
  .auth-welcome h1 { font-size: 32px; }
}
@media (max-width: 380px) {
  .auth-panel { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .auth-mobile-logo .pace-logotype { width: 140px; height: 30px; }
  .auth-theme { gap: 5px; padding-inline: 7px; }
  .auth-welcome h1 { font-size: 29px; }
  .auth-footer { justify-content: center; }
}

/* ==== 7 · print ==== */
@media print {
  /* V15: print the final colours, never a background caught mid-transition (e.g. from a dark session) */
  *, *::before, *::after { transition: none !important; animation: none !important; }
  :root:root:root {
    --page: #ffffff; --surface: #ffffff; --surface-2: #f2f1ed; --surface-3: #ffffff; --ink: #0b0b0b; --ink-2: #3d3c39; --muted: #5c5b56;
    --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,.14); --border-strong: #8c8b84; --side: #ffffff; --side-ink: #0b0b0b; --side-muted: #5c5b56;
    --accent: #1c5cab; --accent-hover: #174d90; --accent-ink: #1c5cab; --accent-wash: rgba(42,120,214,.10); --on-accent: #ffffff;
    --good: #0a8a0a; --good-ink: #0b7a0b; --on-good: #ffffff; --crit: #d03b3b; --crit-ink: #b8302f; --on-crit: #ffffff; --warn: #fab219; --warn-ink: #7a5200; --on-warn: #0b0b0b;
    --a1: #2874d2; --a2: #eb6834; --a3: #1baf7a; --a4: #eda100; --a5: #e87ba4; --a6: #8a5a2b; --a7: #4a3aa7; --a8: #5b6b80;
    --on-a1: #ffffff; --on-a2: #0b0b0b; --on-a3: #0b0b0b; --on-a4: #0b0b0b; --on-a5: #0b0b0b; --on-a6: #ffffff; --on-a7: #ffffff; --on-a8: #ffffff; --a7-ink: #4a3aa7;
    --o1: #86b6ef; --o2: #3987e5; --o3: #1c5cab; --o4: #0d366b; --l1: #86b6ef; --l2: #2a78d6; --l3: #104281; --on-l2: #ffffff;
    --h0: #efeeea; --h3: #1c5cab; --hi3: #ffffff; --dot-muted: #b4b2a9; --none: #d9d8d2;
    --e-1: none; --e-2: none; --e-3: none; --topbar-h: 0px; --fw-text: 400;
    color-scheme: light;
  }
  @page { margin: 14mm; }
  body { background: #fff; font-size: 12.5px; }
  .side, .topbar, .skip, .bar, .tools, .burger, .flash, .toasts, .evx-nav, .evx-aside .acts, .phead .acts, .hero .acts, .dlg-x, .flash-x, #tip,
  .btn, .btn-ghost, .btn-secondary, .btn-quiet, .btn-danger, .no-print, form .form-actions { display: none !important; }
  .shell { display: block; }
  .page { max-width: none; padding: 0; gap: 14px; }
  .tw, .tscroll, .hm-scroll, .hscroll, .seg, .ltabs, .tabs { overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .tw { border: 1px solid #d0cfc8; box-shadow: none; }
  table.dt th { position: static; background: #f2f1ed; }
  .card, .tile, .hero, .live, .void, .find, tr, .crit, .lvrow { break-inside: avoid; }
  h1, h2, h3, .sec-h { break-after: avoid; }
  .card, .tile, .hero, .tw, .live { box-shadow: none !important; }
  .zl i, .zl::before, .zl::after, .sb-seg, .cov i, .cov b, .minicov, .minicov i, .progress, .progress i, .sk .b, .gb, .gb i, .gb b, .av, .org-mark, .sw, .dotsw, .dot, .st, .st::before,
  .badge, .role, .chip, .lvl i, table.hm td, table.gt td, table.pt td.hc, .cm .c, .bars-sm .t, .bars-sm .t i, .lv input:checked + span, .rail span, .big, .dev, .trend, .tile, .matrix input {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .zl i { animation: none; }
  a { color: inherit; text-decoration: none; }
  .evx { grid-template-columns: minmax(0, 1fr) 240px; }
  .kpis { --kc: 4; }
  .kpis:where(:has(> :nth-child(2):last-child)) { --kc: 2; }
  .kpis:where(:has(> :nth-child(3):last-child), :has(> :nth-child(6):last-child), :has(> :nth-child(9):last-child)) { --kc: 3; }
  .kpis:where(:has(> :nth-child(5):last-child)) { --kc: 5; }
  .kpis > :nth-child(odd):last-child { grid-column: auto; }
  .row2, .split { grid-template-columns: minmax(0, 1fr); }
}