/* ReqHub — one stylesheet, no framework.
 *
 * Palette, type and components follow SkillHub, so that moving between the
 * company's platforms does not feel like changing tool: same tokens, same
 * top bar, same buttons, fields, cards and badges, same sign-in page. The
 * text alone has moved on (2026-10-29): inks tinted with the brand blue, the
 * titles in deep blue and the running text at 450; SkillHub may follow.
 * Order: tokens, base, chrome, layout, components, pages.
 *
 * Colours come only from the tokens below. The light palette is the default,
 * always; the dark one replaces the tokens on screen when the person chooses
 * it (<html data-theme="dark">) or chooses "system" and the system is dark.
 * Print always uses the light one. */

[hidden] { display: none !important; }

/* ── typefaces ─────────────────────────────────────────────────────────────
 * SkillHub's (abHR §5.91), served from here (static/fonts; where they come
 * from, and their licences, in fonts/README.txt): the CSP allows fonts from
 * 'self' only, and a font asked of a third party would send out the address
 * of whoever opens the page. Variable: the 550, 620 and 650 weights written
 * in this sheet show as such, where the system font rounded them. `swap`:
 * the system font until the file arrives, never a blank page. The latin-ext
 * files are fetched only for a name that needs them. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-italic.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── tokens (SkillHub's palette) ─────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* slate greys, from the hue of the brand blue (SkillHub §5.91): the warm
     greys of before looked dirty next to the blue. The three inks of the
     text are the brand blue darkened (OKLCH hue 258, a little chroma each):
     a near-black slate read as grey, and the second and third were too
     close to tell apart (1.4:1 between them). The titles go one step
     further, in a deep blue. Every ink keeps 4.5:1 on the background or more */
  --bg: #f5f7fa;
  --surface: #ffffff;
  --ink: #112646;               /* 14.1:1 on the background */
  --ink-2: #384e6e;             /* 7.9:1 */
  --ink-3: #576a86;             /* 5.1:1 on the background: the floor for small text */
  --ink-title: #08336c;         /* the pages', the cards' and the dialogs' titles, the bold words: 11.5:1 */
  --grid: #e2e8f0;
  --baseline: #cbd5e1;
  --paper: #fff;                /* raised: the top bar, fields, menus, secondary buttons */
  --border: rgba(var(--shade), 0.10);
  --accent: #2a78d6;
  --accent-strong: #1c5cab;     /* the accent as text: links, keys, the active tab */
  --accent-soft: #e5eefb;
  --accent-fill: var(--accent); /* a primary button */
  --accent-hover: #1c5cab;
  --accent-line: rgba(42, 120, 214, 0.25);
  --on-accent: #fff;            /* text on the accent and on the solid states */
  /* categorical series, for charts and states that need a colour each */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  /* sequential blue ramp, ordinal levels 1..5 */
  --lv1: #86b6ef; --lv2: #5598e7; --lv3: #2a78d6; --lv4: #1c5cab; --lv5: #104281;
  /* states: emerald for what is done, amber for what to look at (SkillHub
     §5.91). They are the numbers' colours too: green what holds, red what
     is missing, amber what to look at */
  --ok-bg: #e3f5ec; --ok-tx: #047857;
  --warn-bg: #fdf3d9; --warn-tx: #a3530b;
  --bad-bg: #fdeaea; --bad-tx: #b32424;
  /* the states as fills, under white text: toasts, outcome buttons, bars */
  --ok-solid: #047857; --bad-solid: #b32424; --neutral-solid: #475569;
  --toast-bg: #0f172a;
  --shade: 15, 23, 42;          /* shadows and veils: rgba(var(--shade), alpha) */
  --veil: rgba(15, 23, 42, 0.06);
  /* F10: a row, an item or an icon button under the pointer; the tooltips */
  --hover: #eef2f7;
  --tip-bg: #1e293b; --tip-ink: #f1f5f9;
  /* the band with the title of a box inside a card (a requirement's sections) */
  --box-head: #f1f5f9;
  /* the parts of a bar (features/charts.js): the states as marks. The dark
     theme has steps of its own: validated as a set against each surface */
  --bar-ok: #047857; --bar-info: #2a78d6; --bar-warn: #eda100; --bar-bad: #b32424;
  /* F20: the risk values of the TARA, 0 to 5, a background and its text each.
     0 is the neutral grey and 1 the state ok; 2 to 5 keep the risk's own
     ramp, as it was validated */
  --risk0-bg: #f1f5f9; --risk0-tx: #475569; --risk1-bg: #e3f5ec; --risk1-tx: #047857;
  --risk2-bg: #eef6d8; --risk2-tx: #4b6b00; --risk3-bg: #fdf3d9; --risk3-tx: #8a5a00;
  --risk4-bg: #fde4d4; --risk4-tx: #a3410c; --risk5-bg: #fdeaea; --risk5-tx: #b32424;
  /* three voices, as in SkillHub: the text in Plus Jakarta Sans; Outfit for
     the titles of the pages, the brand and the numbers that answer a page
     (the dashboard's); the monospace for keys, codes and paths */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-title: "Outfit", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
}

/* The dark palette (F9): the same tokens, other values. Written twice, for the
 * person who chose "dark" and for "system" on a dark system: CSS has no way
 * to share a block between a selector and a media query, and a test checks
 * that the two copies say the same (tests/test_frontend_static.py). Text on
 * its background stays at 4.5:1 or more: the numbers are in docs/piano.md, F9. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #12161c; --surface: #191e25; --paper: #1e242c;
    --ink: #e6edf8; --ink-2: #becce0; --ink-3: #98a9c3; --ink-title: #c5ddff;
    --grid: #2c333e; --baseline: #465163; --border: rgba(255, 255, 255, 0.10);
    --accent: #2a78d6; --accent-strong: #8fbdf4; --accent-soft: #1d3049;
    --accent-fill: #236bc4; --accent-hover: #1c5cab; --accent-line: rgba(143, 189, 244, 0.35);
    --ok-bg: #0f3328; --ok-tx: #6ee7b7;
    --warn-bg: #3a2d0f; --warn-tx: #f2c464;
    --bad-bg: #3e1a1a; --bad-tx: #ff9d97;
    --ok-solid: #047857; --bad-solid: #b32424; --neutral-solid: #475569;
    --toast-bg: #273040;
    --shade: 0, 0, 0;
    --veil: rgba(255, 255, 255, 0.08);
    --hover: rgba(255, 255, 255, 0.06);
    --tip-bg: #374151; --tip-ink: #f1f5f9;
    --box-head: #232a33;
    --bar-ok: #10b981; --bar-info: #3987e5; --bar-warn: #c98500; --bar-bad: #d03b3b;
    --risk0-bg: #232a33; --risk0-tx: #c0c9d5; --risk1-bg: #0f3328; --risk1-tx: #6ee7b7;
    --risk2-bg: #283214; --risk2-tx: #c5dc7e; --risk3-bg: #3a2d0f; --risk3-tx: #f2c464;
    --risk4-bg: #3f2414; --risk4-tx: #ffb07a; --risk5-bg: #3e1a1a; --risk5-tx: #ff9d97;
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #12161c; --surface: #191e25; --paper: #1e242c;
    --ink: #e6edf8; --ink-2: #becce0; --ink-3: #98a9c3; --ink-title: #c5ddff;
    --grid: #2c333e; --baseline: #465163; --border: rgba(255, 255, 255, 0.10);
    --accent: #2a78d6; --accent-strong: #8fbdf4; --accent-soft: #1d3049;
    --accent-fill: #236bc4; --accent-hover: #1c5cab; --accent-line: rgba(143, 189, 244, 0.35);
    --ok-bg: #0f3328; --ok-tx: #6ee7b7;
    --warn-bg: #3a2d0f; --warn-tx: #f2c464;
    --bad-bg: #3e1a1a; --bad-tx: #ff9d97;
    --ok-solid: #047857; --bad-solid: #b32424; --neutral-solid: #475569;
    --toast-bg: #273040;
    --shade: 0, 0, 0;
    --veil: rgba(255, 255, 255, 0.08);
    --hover: rgba(255, 255, 255, 0.06);
    --tip-bg: #374151; --tip-ink: #f1f5f9;
    --box-head: #232a33;
    --bar-ok: #10b981; --bar-info: #3987e5; --bar-warn: #c98500; --bar-bad: #d03b3b;
    --risk0-bg: #232a33; --risk0-tx: #c0c9d5; --risk1-bg: #0f3328; --risk1-tx: #6ee7b7;
    --risk2-bg: #283214; --risk2-tx: #c5dc7e; --risk3-bg: #3a2d0f; --risk3-tx: #f2c464;
    --risk4-bg: #3f2414; --risk4-tx: #ffb07a; --risk5-bg: #3e1a1a; --risk5-tx: #ff9d97;
  }
}

/* ── base ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* the running text at 450, not 400: Plus Jakarta Sans at 400 comes out thin
   on Windows, and the text looked washed out. 450 is this sheet's "regular":
   a rule that wants the plain weight inside a heavier label writes 450 */
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: 15px; font-weight: 450; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* the controls do not inherit the family by themselves: without this a
   button or a select with no rule of its own stays in the browser's font
   (and at the browser's 400) */
button, input, select, textarea, optgroup { font-family: inherit; font-weight: 450; }
/* what the browser draws by itself (the selection, the caret, a link's
   underline) in the platform's colours */
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
input, textarea { caret-color: var(--accent); }
a { color: var(--accent-strong); text-decoration: none; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
/* the title of a page in Outfit, a little larger than the 24px of before:
   at the same size Outfit is smaller and narrower than Plus Jakarta Sans */
h1 { font-family: var(--font-title); font-size: 27px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
  margin: 0 0 4px; text-wrap: balance; color: var(--ink-title); }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; text-wrap: balance; color: var(--ink-title); }
h3 { font-size: 14px; font-weight: 650; margin: 0 0 8px; color: var(--ink-2); }
p { margin: 0 0 8px; }
/* the bold words in the titles' deep blue, where the text around them is the
   page's ink; on a coloured ground (states, notices, buttons, toasts, tips,
   links) they keep the colour around them. :where, so that the exception
   weighs as little as the rule, and a component's own `.x b` still wins */
b, strong { color: var(--ink-title); }
:where(a, .btn, .badge, .chip, .case-chip, .banner, .toast, .tip, .conflict, .diff-before, .diff-after,
  .ai-attention, .link.suspect, .dataset-states, table.matrix td.hit, [class*="risk-"]) :is(b, strong) { color: inherit; }
/* the numbers of a numbered list (the steps of a dialog) in the accent */
ol > li::marker { color: var(--accent-strong); font-weight: 650; }
code, .mono { font-family: var(--mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.noscript { padding: 40px; text-align: center; }

/* while something loads: grey blocks shaped like what is coming (core/ui.js) */
.skeleton { padding: 6px 0 14px; }
.skeleton-blocks { display: grid; gap: 12px; }
.skeleton-cards .skeleton-blocks { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.sk {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--grid) 25%, var(--bg) 50%, var(--grid) 75%);
  background-size: 300% 100%; animation: sk-shine 1.5s ease-in-out infinite;
}
.sk-title { height: 20px; width: 38%; margin-bottom: 4px; }
.sk-w90 { width: 90%; } .sk-w85 { width: 85%; } .sk-w75 { width: 75%; } .sk-w60 { width: 60%; }
.sk-card { height: 124px; border-radius: 12px; }
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* a button at work (core/ui.js, busy): it keeps its look, with a spinner */
.is-busy { cursor: progress; }
.is-busy::before {
  content: ""; display: inline-block; width: 12px; height: 12px; flex: none;
  margin-right: 6px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* the platform's mark (templates/_macros.html) */
.logo-mark { flex: none; display: block; }
.logo-mark .bg { fill: var(--accent); }
.logo-mark .line { fill: var(--on-accent); opacity: .55; }
.logo-mark .line.strong { opacity: .85; }
.logo-mark .check {
  fill: none; stroke: var(--on-accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--paper); border-bottom: 1px solid var(--grid);
  position: sticky; top: 0; z-index: 50;
}
/* the bar and the page are as wide as the screen, up to a big one: the tree,
   the card and the tables use the room (the same width as .container). The
   margins at the sides grow with the screen: wide on a big one, narrow on a
   laptop, where the tree and the card need the room */
:root { --gutter: clamp(28px, calc(12vw - 64px), 164px); }
.topbar-inner {
  max-width: 1880px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 22px; height: 56px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-title); font-size: 19px; font-weight: 650; color: var(--ink); letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; }
.brand small { font-family: var(--font); font-weight: 500; color: var(--ink-3); font-size: 12px; margin-left: -1px;
  letter-spacing: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 820px) { .topbar-inner { gap: 12px; padding: 0 12px; } }

/* ── F20: the side menu ────────────────────────────────────────────────────
   The application as abHR: the menu on the left, a card the height of the
   window with the brand, the person's places, then the project on show with
   its sections by subject in groups that open; folded to its icons on a
   laptop (templates/_sidebar.html, features/sidebar.js); under 900px a panel
   that slides in from the bar's button. The bar above keeps "Vai a", the
   guide, the language and the person's menu. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300; padding: 8px 14px; border-radius: 8px;
  background: var(--accent-fill); color: var(--on-accent); font-weight: 600;
}
.skip-link:focus { top: 12px; text-decoration: none; }
.with-sidebar {
  display: flex; align-items: flex-start; min-height: 100vh;
  /* the page beside the menu: narrower margins, the room goes to the tree and the tables */
  --gutter: clamp(18px, calc(4vw - 18px), 56px);
}
.shell { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.shell > .container { flex: 1; width: 100%; padding-top: 12px; }
.with-sidebar .topbar {
  background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.with-sidebar .topbar-inner { max-width: 1880px; gap: 12px; }
.topbar-spacer { flex: 1; }
.menu-button, .sidebar-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; border: none; background: none;
  color: var(--ink-3); cursor: pointer;
}
.menu-button:hover, .sidebar-toggle:hover { background: var(--hover); color: var(--ink); }
.menu-button, .topbar-brand { display: none; }

.sidebar {
  --sidebar-wide: var(--sidebar-w, 264px); --sidebar-narrow: 68px;
  position: sticky; top: 8px; flex: none; z-index: 70;
  width: var(--sidebar-wide); height: calc(100vh - 16px); margin: 8px 0 8px 8px;
  background: var(--paper); border: 1px solid var(--grid); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(var(--shade), 0.05);
  display: flex; flex-direction: column; overflow: hidden; transition: width .18s ease;
}
/* the edge the person drags to widen or narrow the menu (features/sidebar.js) */
.sidebar-grip {
  position: absolute; top: 0; bottom: 0; right: 0; width: 8px; cursor: col-resize; z-index: 2;
  touch-action: none; background: transparent; border: none; padding: 0;
}
.sidebar-grip::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: transparent; transition: background-color .12s ease;
}
.sidebar-grip:hover::after, .sidebar-grip:focus-visible::after, html.sidebar-resizing .sidebar-grip::after { background: var(--accent-fill); }
html.sidebar-resizing, html.sidebar-resizing * { cursor: col-resize !important; user-select: none; }
html.sidebar-resizing .sidebar { transition: none; }
html.sidebar-collapsed .sidebar-grip { display: none; }
.sidebar-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 10px 10px 14px; min-height: 60px;
  border-bottom: 1px solid var(--grid);
}
.sidebar-head .brand { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; font-size: 18px; }
.side-nav {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; padding: 8px; scrollbar-width: thin;
}
.side-item, .side-group > summary {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; min-height: 40px;
  border-radius: 9px; color: var(--ink-2); font-weight: 550; font-size: 14px;
  white-space: nowrap; cursor: pointer; list-style: none; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary::marker { content: ""; }
.side-item:hover, .side-group > summary:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.side-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.side-group.has-active > summary { color: var(--ink); }
/* the icons in the accent, the words in ink: the menu reads at a glance */
.side-item .icon, .side-group > summary .icon { flex: none; color: var(--accent); }
.side-item.active .icon { color: var(--accent-strong); }
.side-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-chevron { display: inline-flex; color: var(--ink-3); transition: transform .15s ease; }
.side-group[open] > summary .side-chevron { transform: rotate(180deg); }
.side-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 31px; }
.side-sub a {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 34px; border-radius: 8px;
  color: var(--ink-2); font-weight: 500; font-size: 13.5px; white-space: nowrap;
}
.side-sub a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.side-sub a.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.side-count {
  flex: none; margin-left: auto; min-width: 20px; padding: 0 7px; border-radius: 999px; text-align: center;
  font-size: 11.5px; font-weight: 650; line-height: 19px; color: var(--ink-3); background: var(--bg);
}
.side-count.alert { background: var(--accent-fill); color: var(--on-accent); }
.side-sub a.active .side-count { background: var(--paper); color: var(--accent-strong); }
/* F29: a folder of the requirements, inside their group: it opens as the
   groups do, and closed it counts the requirements of what it holds */
.side-folder > summary {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 34px; border-radius: 8px;
  color: var(--ink-2); font-weight: 550; font-size: 13.5px; white-space: nowrap; cursor: pointer; list-style: none;
}
.side-folder > summary::-webkit-details-marker { display: none; }
.side-folder > summary::marker { content: ""; }
.side-folder > summary:hover { background: var(--hover); color: var(--ink); }
.side-folder > summary .icon { flex: none; color: var(--accent); }
.side-folder.has-active > summary { color: var(--ink); }
.side-folder[open] > summary .side-count { display: none; }
.side-folder[open] > summary .side-chevron { transform: rotate(180deg); }
.side-folder > .side-sub { padding: 1px 0 2px 17px; }
/* F31: the first sections of the type on show, under it, a step to the right */
.side-type-sections { padding: 0 0 2px 14px; }
.side-type-sections a { min-height: 30px; padding: 4px 10px; font-size: 13px; }
/* the project on show: a label, its card, its sections */
.side-label {
  margin: 10px 4px 6px; padding-top: 12px; border-top: 1px solid var(--grid);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-strong);
}
.side-project-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 6px;
  border: 1px solid var(--grid); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.side-project-card:hover { border-color: var(--baseline); text-decoration: none; }
.side-project-card .key { flex: none; }
.key-short { display: none; }
.side-project-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-project-name { font-weight: 650; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-project-role { font-size: 11.5px; color: var(--ink-3); }
.side-sections { display: flex; flex-direction: column; gap: 1px; }
.sidebar-foot {
  flex: none; padding: 7px 12px 9px; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--grid);
}
@media (max-height: 640px) { .sidebar-foot { display: none; } }

/* folded: the icons only, the names in their tooltips; a group opens the menu */
html.sidebar-collapsed .sidebar { width: var(--sidebar-narrow); }
html.sidebar-collapsed .side-text, html.sidebar-collapsed .side-chevron, html.sidebar-collapsed .side-sub,
html.sidebar-collapsed .side-label, html.sidebar-collapsed .side-project-text,
html.sidebar-collapsed .sidebar-head .brand-name, html.sidebar-collapsed .sidebar-foot { display: none; }
html.sidebar-collapsed .sidebar-head { flex-direction: column; padding: 12px 0 8px; gap: 6px; }
html.sidebar-collapsed .sidebar-head .brand { flex: none; }
html.sidebar-collapsed .side-item, html.sidebar-collapsed .side-group > summary {
  justify-content: center; padding: 9px 0; position: relative;
}
html.sidebar-collapsed .side-count {
  position: absolute; top: 2px; right: 6px; margin: 0; font-size: 10px; min-width: 16px; padding: 0 4px; line-height: 16px;
}
html.sidebar-collapsed .side-group.has-active > summary { background: var(--accent-soft); color: var(--accent-strong); }
html.sidebar-collapsed .side-project-card { justify-content: center; padding: 6px 0; margin-top: 10px; }
/* folded, a long key would spill out of the menu: its first letters in a chip */
html.sidebar-collapsed .side-project-card .key-full { display: none; }
html.sidebar-collapsed .side-project-card .key-short { display: inline-block; font-size: 11px; padding: 3px 6px; }

.sidebar-veil { display: none; }
/* under 900px a panel over the page, from the bar's button; folded or not
   does not count. Closed, it is out of the way of the keyboard too */
@media (max-width: 900px) {
  .with-sidebar { display: block; }
  .menu-button { display: inline-flex; }
  .topbar-brand { display: flex; font-size: 17px; }
  .sidebar, html.sidebar-collapsed .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; margin: 0; height: 100%;
    width: min(300px, 86vw); border-radius: 0 14px 14px 0;
    transform: translateX(-105%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  html.sidebar-collapsed .side-text, html.sidebar-collapsed .side-chevron, html.sidebar-collapsed .side-label,
  html.sidebar-collapsed .sidebar-head .brand-name, html.sidebar-collapsed .sidebar-foot { display: revert; }
  html.sidebar-collapsed .side-project-text { display: flex; }
  html.sidebar-collapsed .side-group[open] .side-sub { display: flex; }
  html.sidebar-collapsed .sidebar-head { flex-direction: row; padding: 12px 10px 10px 14px; }
  html.sidebar-collapsed .sidebar-head .brand { flex: 1; }
  html.sidebar-collapsed .side-item, html.sidebar-collapsed .side-group > summary { justify-content: flex-start; padding: 8px 10px; }
  html.sidebar-collapsed .side-count { position: static; margin-left: auto; }
  html.sidebar-collapsed .side-project-card { justify-content: flex-start; padding: 8px 10px; margin-top: 0; }
  html.sidebar-shown .sidebar { transform: none; visibility: visible; transition: transform .2s ease;
    box-shadow: 0 16px 48px rgba(var(--shade), .22); }
  html.sidebar-shown .sidebar-veil {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(var(--shade), .32);
  }
  .sidebar-toggle, .sidebar-grip { display: none; }
  html.sidebar-collapsed .side-project-card .key-full { display: inline-block; }
  html.sidebar-collapsed .side-project-card .key-short { display: none; }
  .side-item, .side-group > summary, .side-sub a, .side-folder > summary { min-height: 44px; }
}
/* the panel has room for the name the bar hides on a narrow phone */
@media (max-width: 420px) {
  .sidebar-head .brand-name {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
  }
}
/* the projects opened lately, when no project is on show */
.side-recent { display: flex; flex-direction: column; gap: 1px; }
.side-recent a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 38px; border-radius: 9px; color: var(--ink-2); font-size: 13.5px; }
.side-recent a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.side-recent .key { flex: none; }
.side-recent .side-text { white-space: nowrap; }
html.sidebar-collapsed .side-recent { display: none; }
@media (max-width: 900px) { html.sidebar-collapsed .side-recent { display: flex; } }
@media (prefers-reduced-motion: reduce) {
  .sidebar, .side-chevron, .side-item, .side-group > summary { transition: none; }
}

/* language switch: two letters, the active one highlighted */
.lingua { display: flex; border: 1px solid var(--grid); border-radius: 999px; overflow: hidden; }
.lingua button {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; padding: 4px 9px; color: var(--ink-3);
}
.lingua button:hover { background: var(--bg); color: var(--ink); }
.lingua button.on { background: var(--accent-soft); color: var(--accent-strong); }
.login-corner {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
}
.lingua-login { background: var(--paper); }

/* the theme switch (F9): three words in the user menu, three marks on the
   sign-in page; the one in use highlighted like the language */
.tema { display: flex; align-items: center; gap: 10px; }
.tema-label { font-size: 12px; color: var(--ink-3); }
.tema-options { display: flex; border: 1px solid var(--grid); border-radius: 999px; overflow: hidden; }
.tema-options button {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 9px; color: var(--ink-2);
}
.tema-options button:hover { background: var(--bg); color: var(--ink); }
.tema-options button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.tema-login .tema-options { background: var(--paper); }
.tema-login .tema-options button { font-size: .8rem; padding: 3px 8px; line-height: 1.3; }
.tema-options button svg, .guida-btn svg { display: block; flex: none; }

/* "Vai a" in the top bar (F9): a quiet button with its key */
.palette-button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-size: 13px;
  border: 1px solid var(--grid); background: var(--bg); color: var(--ink-3);
  border-radius: 8px; padding: 3px 4px 3px 10px;
}
.palette-button:hover { border-color: var(--baseline); color: var(--ink); }
.palette-button kbd { font-size: 11px; }
.palette-icon { display: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 820px) {
  .palette-button { padding: 3px 4px; }
  /* out of sight, still the button's name for a screen reader */
  .palette-button-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}
/* the guide in the top bar, as on SkillHub: a quiet pill with the book. On a
   narrow screen the book alone; the word stays the link's name for a screen
   reader */
.guida-btn {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--grid); border-radius: 999px; padding: 4px 11px;
  color: var(--ink-2); font-size: .82rem; font-weight: 600;
}
.guida-btn:hover {
  background: var(--accent-soft); border-color: var(--accent-soft);
  color: var(--accent-strong); text-decoration: none;
}
@media (max-width: 820px) {
  .guida-btn { padding: 4px 8px; }
  .guida-btn .guida-txt {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}
/* a phone (F9): no keyboard to hint at, and room for the sections */
@media (max-width: 600px) {
  .topbar-inner { gap: 8px; padding: 0 10px; }
  .brand small { display: none; }
  .palette-button { padding: 5px 6px; }
  .palette-button kbd { display: none; }
  .palette-icon { display: block; }
  .usermenu > summary { padding: 4px; }
  .usermenu .caret { display: none; }
}
/* the language in the user menu, only where the bar has no room for it */
.usermenu .menu .menu-lingua { display: none; }
@media (max-width: 600px) {
  .lingua-bar { display: none; }
  .usermenu .menu .menu-lingua {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; margin: 2px 0 0; border-top: 1px solid var(--bg);
  }
  .usermenu .menu .menu-lingua + .tema { margin-top: 0; }
}
@media (max-width: 420px) {
  /* the mark alone; the name stays for a screen reader, the link's name */
  .brand-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}
kbd {
  display: inline-block; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--ink);
  padding: 0 6px; border: 1px solid var(--baseline); border-bottom-width: 2px; border-radius: 5px;
  background: var(--paper); white-space: nowrap;
}

/* user menu */
.usermenu { position: relative; }
.usermenu > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid transparent;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary::marker { content: ""; }
.usermenu > summary:hover, .usermenu[open] > summary { background: var(--bg); border-color: var(--grid); }
.usermenu[open] .caret { transform: rotate(180deg); }
.usermenu .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.usermenu .avatar.is-admin { background: var(--accent-fill); color: var(--on-accent); }
.usermenu .who { display: flex; flex-direction: column; line-height: 1.15; }
.usermenu .who b { font-size: 13px; font-weight: 600; }
.usermenu .who small { font-size: 11px; color: var(--ink-3); }
.usermenu .caret { color: var(--ink-3); font-size: 11px; transition: transform .15s ease; }
.usermenu .menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 258px;
  background: var(--paper); border: 1px solid var(--grid); border-radius: 12px;
  box-shadow: 0 16px 38px rgba(var(--shade), 0.16); padding: 6px;
  display: flex; flex-direction: column;
}
.usermenu .menu-mail {
  font-size: 12px; color: var(--ink-3); padding: 8px 10px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usermenu .menu form { margin: 0; }
.usermenu .menu .tema {
  justify-content: space-between; padding: 8px 10px; margin: 2px 0 4px;
  border-top: 1px solid var(--bg); border-bottom: 1px solid var(--bg);
}
.usermenu .menu .logout button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13.5px;
  color: var(--bad-tx); font-weight: 550;
}
.usermenu .menu .logout button:hover { background: var(--bad-bg); }
@media (max-width: 900px) { .usermenu .who { display: none; } }

/* ── layout ──────────────────────────────────────────────────────────────── */
.container { max-width: 1880px; margin: 0 auto; padding: 24px var(--gutter) 60px; }
@media (max-width: 820px) { .container { padding: 24px 20px 60px; } }
.container:focus { outline: none; }
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
/* a sentence under a title stays a sentence, also on a wide page */
.page-head p { margin: 0; color: var(--ink-2); max-width: 90ch; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
/* cards side by side as long as each keeps a readable width, else one under the other */
.grid-auto {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
  gap: 14px 18px; align-items: start;
}
.grid-2 > *, .grid-cards > *, .grid-auto > * { min-width: 0; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
/* Where the page is (core/ui.js, crumbs): quiet links that light up under the
   pointer, a chevron between them, the page itself in ink. An ID in its own
   letters, as everywhere. */
.crumbs { margin: 0 0 8px; font-size: 13px; }
.crumbs ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
}
.crumbs li { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.crumbs a {
  color: var(--ink-2); font-weight: 550; padding: 2px 6px; border-radius: 6px;
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumbs li:first-child > a { margin-left: -6px; }
.crumbs a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.crumb-sep { color: var(--ink-3); }
.crumb-here { color: var(--ink); font-weight: 600; padding: 2px 6px; }
.crumb-key { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
/* F29: the folders a type stands in, before its name in the crumbs */
.crumb-folder { color: var(--ink-2); font-weight: 500; }
.crumb-here .crumb-sep { margin: 0 4px; vertical-align: -1px; }

/* ── cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; box-shadow: 0 1px 2px rgba(var(--shade), 0.04); overflow-wrap: break-word;
}
:is(main, form, section, aside) > .card:not(:first-child) { margin-top: 14px; }
.card h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card h2 small { font-weight: 500; color: var(--ink-3); font-size: 12px; }
a.card { display: block; color: inherit; transition: border-color .12s, box-shadow .12s; }
a.card:hover { text-decoration: none; border-color: var(--baseline); box-shadow: 0 4px 14px rgba(var(--shade), 0.07); }
/* the projects, a row each (features/projects.js): the numbers on the line, the rest opens under it */
.project-list { display: flex; flex-direction: column; border: 1px solid var(--grid); border-radius: 12px; background: var(--paper); overflow: hidden; container-type: inline-size; }
.project-list > .project-card-wrap + .project-card-wrap { border-top: 1px solid var(--grid); }
.project-row { flex: 1; min-width: 0; }
.project-line {
  display: grid; align-items: center; gap: 4px 14px; padding: 10px 52px 10px 10px; cursor: pointer;
  grid-template-columns: 28px 120px minmax(220px, 1fr) 110px 130px 130px 110px 170px;
}
.project-line:hover { background: var(--hover); }
.row-chevron {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none;
  border-radius: 7px; background: none; color: var(--ink-3); cursor: pointer;
}
.row-chevron:hover { color: var(--ink); }
.row-chevron .icon { transition: transform .15s ease; }
.project-row.open .row-chevron .icon { transform: rotate(90deg); }
.project-row.open > .project-line { background: var(--hover); }
.project-line .key { justify-self: start; }
.project-line .name { font-size: 15px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-line .badges { display: flex; gap: 6px; justify-content: flex-start; }
.project-line .facts { display: contents; font-size: 12.5px; color: var(--ink-2); }
.project-line .col-reqs, .project-line .col-criteria { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.project-line .col-alerts { display: flex; gap: 6px; flex-wrap: wrap; }
.project-line .facts .badge { font-size: 11.5px; padding: 1px 8px; }
.project-line .when { font-size: 12.5px; color: var(--ink-3); text-align: left; white-space: nowrap; }
.project-row.archived .name, .project-row.archived .key { color: var(--ink-2); }
.project-detail { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 4px 52px 16px 52px; max-width: 100ch; }
.project-detail[hidden] { display: none; }
.project-detail .desc { color: var(--ink-2); font-size: 14px; margin: 0; white-space: pre-line; }
.project-detail .bar { height: 8px; width: min(420px, 100%); }
.project-detail .meta { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 0 8px; flex-wrap: wrap; }
.project-detail .open-project { margin-top: 2px; }
/* in the room of the list, not the window's: the menu may be wide or folded */
@container (max-width: 1060px) {
  .project-line {
    grid-template-columns: 28px 120px minmax(0, 1fr) auto;
    grid-template-areas: "c k n b" ". f f f" ". w w w";
  }
  .project-line .row-chevron { grid-area: c; } .project-line .key { grid-area: k; }
  .project-line .name { grid-area: n; } .project-line .badges { grid-area: b; }
  .project-line .facts { grid-area: f; display: flex; gap: 2px 12px; flex-wrap: wrap; align-items: center; } .project-line .when { grid-area: w; }
  .project-detail { padding-left: 52px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .row-chevron .icon { transition: none; } }
/* the archived projects, last and folded (features/projects.js) */
.archived-projects { margin-top: 22px; }
.archived-projects > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px;
  font-weight: 600; color: var(--ink-2); margin-bottom: 12px;
}
.archived-projects > summary::-webkit-details-marker { display: none; }
.archived-projects > summary .icon { transition: transform .15s; }
.archived-projects[open] > summary .icon { transform: rotate(90deg); }
.archived-projects > summary small { color: var(--ink-3); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .archived-projects > summary .icon { transition: none; } }
/* the end of a project, last on its page (features/lifecycle.js) */
.end-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 12px 0; border-top: 1px solid var(--grid); flex-wrap: wrap;
}
.end-row:first-of-type { border-top: none; padding-top: 0; }
.end-row > div { flex: 1; min-width: 240px; }
.end-row h3 { margin: 0 0 4px; }
.end-row .hint { margin: 0; }
.end-row > .btn { flex: none; }
.delete-dialog .delete-losses { margin: 0 0 12px; padding-left: 20px; }
.delete-dialog .delete-losses li { margin: 2px 0; }
.projects-toolbar .toolbar-search { flex: 0 1 420px; }
.key {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent-strong); background: var(--accent-soft); border-radius: 6px; padding: 2px 7px;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-fill); color: var(--on-accent); border: 1px solid var(--accent-fill);
  padding: 8px 14px; border-radius: 8px; font-family: inherit;
  font-size: 14px; font-weight: 550; line-height: 1.2; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn:disabled, .btn[disabled] { background: var(--grid); border-color: var(--grid); color: var(--ink-3); cursor: not-allowed; }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--baseline); }
.btn-secondary:hover { background: var(--bg); border-color: var(--ink-3); }
.btn-danger { background: var(--paper); color: var(--bad-tx); border-color: var(--bad-tx); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad-tx); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14.5px; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: none; border: none; color: var(--ink-3); cursor: pointer;
  font-size: 16px; padding: 4px 8px; border-radius: 6px;
}
.btn-ghost:hover { background: var(--bg); color: var(--ink); }
/* busy is disabled, but not "not allowed": the button keeps its colours */
.btn.is-busy { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); cursor: progress; }
.btn.is-busy::before { margin-right: 0; }
.btn-secondary.is-busy { background: var(--paper); color: var(--ink); border-color: var(--baseline); }
.btn-danger.is-busy { background: var(--paper); color: var(--bad-tx); border-color: var(--bad-tx); }

/* ── forms ───────────────────────────────────────────────────────────────── */
form { margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label, .field .label { font-size: 13px; font-weight: 550; color: var(--ink-2); }
.field input, .field select, .field textarea {
  padding: 8px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--hover); color: var(--ink-3); cursor: not-allowed;
}
.field textarea { min-height: 90px; resize: vertical; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad-tx); }
.field-error { font-size: 12.5px; color: var(--bad-tx); margin: 0; }
.field-row { display: grid; gap: 12px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
/* F17: the ratings of a row of an analysis, three or four side by side */
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .cols-2 { grid-template-columns: 1fr; } .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; } }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.choices { display: grid; gap: 8px; }
.choice {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start;
  border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: var(--paper);
}
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { margin: 3px 0 0; }
.choice b { font-size: 14px; font-weight: 600; }
.choice span { grid-column: 2; font-size: 12.5px; color: var(--ink-2); }
/* the button that saves a form, apart from the last field */
.form-actions { margin-top: 16px; }

/* ── badges, chips, banners ──────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok-tx); }
.badge.warn { background: var(--warn-bg); color: var(--warn-tx); }
.badge.bad { background: var(--bad-bg); color: var(--bad-tx); }
.badge.neutral { background: var(--bg); color: var(--ink-2); border: 1px solid var(--grid); }
.badge.info { background: var(--accent-soft); color: var(--accent-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--bg);
  border: 1px solid var(--grid); padding: 3px 9px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2);
}
.banner { border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin: 0 0 14px; }
.banner.bad { background: var(--bad-bg); color: var(--bad-tx); }
.banner.warn { background: var(--warn-bg); color: var(--warn-tx); }
.banner.ok { background: var(--ok-bg); color: var(--ok-tx); }
.banner.info { background: var(--accent-soft); color: var(--accent-strong); }
.banner code { background: var(--veil); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }

/* ── lists and tables ────────────────────────────────────────────────────── */
.empty-state { text-align: center; color: var(--ink-3); padding: 40px 20px; }
.empty-state .empty-icon {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-strong);
}
.empty-state h2 { color: var(--ink-title); margin-bottom: 6px; justify-content: center; }
.empty-state p { max-width: 520px; margin: 0 auto 14px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-3); padding: 0 10px 8px; border-bottom: 1px solid var(--grid);
}
.table td { padding: 9px 10px; border-bottom: 1px solid var(--bg); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
/* a column of numbers: its heading on the same side as the numbers */
.table th.num { text-align: right; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; min-width: 0; }

/* ── dialogs (native <dialog>) ───────────────────────────────────────────── */
dialog.dialog {
  border: 1px solid var(--border); border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px));
  box-shadow: 0 20px 46px rgba(var(--shade), 0.18); color: var(--ink); background: var(--surface);
}
dialog.dialog::backdrop { background: rgba(var(--shade), 0.32); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0; }
.dialog-head h2 { margin: 0; }
.dialog-body { padding: 16px 22px 4px; max-height: calc(100vh - 220px); overflow-y: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 18px; }

/* "Vai a" (F9): higher than the other dialogs, one field and its list */
dialog.palette { width: min(640px, calc(100vw - 32px)); margin: 12vh auto auto; }
.palette .dialog-body { padding-bottom: 14px; }
.palette-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--baseline); border-radius: 10px;
  font: inherit; font-size: 16px; background: var(--paper); color: var(--ink);
}
.palette-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.palette-list {
  list-style: none; margin: 10px 0 0; padding: 0; max-height: 50vh; overflow-y: auto;
  display: grid; gap: 2px;
}
.palette-option {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
.palette-option.active { background: var(--accent-soft); }
.palette-kind {
  flex: none; min-width: 96px; font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.palette-option.active .palette-kind { color: var(--accent-strong); }
.palette-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-empty { padding: 8px 10px; color: var(--ink-3); font-size: 14px; }
.palette-help { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.table.shortcuts th {
  width: 40%; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink);
  white-space: nowrap; padding: 6px 10px; border: 0;
}
.table.shortcuts td { padding: 6px 10px; }

/* ── toasts ──────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 36px));
}
.toast {
  background: var(--toast-bg); color: var(--on-accent); border-radius: 10px; padding: 10px 14px;
  font-size: 13.5px; box-shadow: 0 10px 28px rgba(var(--shade), 0.22);
}
.toast.bad { background: var(--bad-solid); }
.toast.ok { background: var(--ok-solid); }

/* ── sign-in (SkillHub's page) ───────────────────────────────────────────── */
.login-body {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 34px 20px;
  background:
    radial-gradient(1000px 620px at 14% -8%, rgba(42, 120, 214, 0.11), rgba(42, 120, 214, 0) 62%),
    radial-gradient(820px 620px at 96% 108%, rgba(27, 175, 122, 0.09), rgba(27, 175, 122, 0) 58%),
    var(--bg);
}
.login-shell {
  width: min(980px, 100%); display: grid; grid-template-columns: 1fr 396px; gap: 60px; align-items: center;
}
.login-logo {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-title); font-size: 25px; font-weight: 600; letter-spacing: -.01em;
}
.login-logo.compact { display: none; margin-bottom: 22px; }
.login-pitch h1 { font-size: 36px; line-height: 1.18; font-weight: 600; letter-spacing: -.02em; margin: 24px 0 28px; }
.login-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.login-points li { display: grid; grid-template-columns: 36px 1fr; gap: 13px; align-items: start; }
.login-points .ic {
  width: 36px; height: 36px; border-radius: 10px; background: var(--paper); border: 1px solid var(--grid);
  display: flex; align-items: center; justify-content: center; color: var(--accent-strong);
}
.login-points b { display: block; font-size: 14px; font-weight: 620; margin-bottom: 2px; color: var(--ink); }
.login-points div { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 30px 28px 24px;
  box-shadow: 0 20px 46px rgba(var(--shade), 0.10), 0 2px 6px rgba(var(--shade), 0.04);
}
.login-card h2 { font-size: 20px; margin-bottom: 3px; }
.login-sub { color: var(--ink-2); font-size: 13.5px; margin: 0 0 20px; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px 16px; border: 1px solid var(--baseline); border-radius: 9px; background: var(--paper);
  color: var(--ink); font-size: 15px; font-weight: 550; box-shadow: 0 1px 2px rgba(var(--shade), 0.05);
}
.btn-google:hover { background: var(--bg); border-color: var(--ink-3); text-decoration: none; }
.btn-google:active { transform: translateY(1px); }
.login-or {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 18px;
  color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
}
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--grid); }
.dev-box { background: var(--bg); border: 1px solid var(--grid); border-radius: 12px; padding: 14px; }
.dev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px; }
.dev-box .field { margin-bottom: 10px; }
.login-note { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.45; }
.login-foot {
  text-align: center; color: var(--ink-3); font-size: 11.5px; line-height: 1.45;
  margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--bg);
}
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; max-width: 420px; gap: 0; }
  .login-pitch { display: none; }
  .login-logo.compact { display: flex; }
}

/* ── project page ────────────────────────────────────────────────────────── */
/* the head of every page of a project (features/projectnav.js): key, name,
   role, what it is about, and on the requirements the project's actions. One
   height on each section, so the tabs under it never move */
.project-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 34px; margin: 0 0 10px;
}
.project-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.project-title .key { flex: none; }
.project-title .badge { flex: none; }
/* the project's name is the page's title: Outfit, as h1 */
.project-name { margin: 0; font-family: var(--font-title); font-size: 27px; font-weight: 600; letter-spacing: -.015em;
  line-height: 1.2; white-space: nowrap; }
.project-description {
  color: var(--ink-3); font-size: 13.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-head .actions { flex: none; }
/* an archived project (features/lifecycle.js): under the head, on every page */
.project-head:has(.archived-banner) { flex-wrap: wrap; }
.archived-banner {
  flex-basis: 100%; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.archived-banner > span { flex: 1; min-width: 200px; }
@media (max-width: 700px) {
  .project-head { flex-wrap: wrap; }
  .project-title { flex-wrap: wrap; row-gap: 6px; }
  .project-description { display: none; }
  .project-name { font-size: 22px; white-space: normal; }
}
/* on a phone the import next to the export is only its icon: the row fits */
@media (max-width: 480px) {
  .project-head .head-import { padding-left: 7px; padding-right: 7px; }
  .project-head .head-import .btn-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}

/* ── project workspace ───────────────────────────────────────────────────── */
/* the types (the test levels, the proposals' views) as one control of
   segments: the tabs underlined are the project's sections only. In the
   toolbar it opens the row; on a phone it scrolls */
.subnav {
  display: flex; gap: 2px; width: fit-content; max-width: 100%; margin-bottom: 14px; padding: 3px;
  background: var(--paper); border: 1px solid var(--grid); border-radius: 9px;
  overflow-x: auto; scrollbar-width: none; position: relative;
}
.subnav::-webkit-scrollbar { display: none; }
.toolbar > .subnav { margin: 0; flex: none; }
.subnav a, .subnav button {
  padding: 4px 11px; color: var(--ink-2); font-weight: 550; font-size: 13.5px; line-height: 1.5;
  border-radius: 6px; white-space: nowrap; flex: none;
}
/* a tab that filters the page instead of changing it is a button */
.subnav button { background: none; border: 0; cursor: pointer; font-family: inherit; }
.subnav a:hover, .subnav button:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.subnav a.active, .subnav button.active { background: var(--accent-soft); color: var(--accent-strong); }
.subnav a span, .subnav button span {
  font-size: 11.5px; color: var(--ink-3); background: var(--bg); border-radius: 999px;
  padding: 1px 7px; margin-left: 4px; font-weight: 600;
}
.subnav a.active span, .subnav button.active span { background: var(--paper); color: var(--accent-strong); }
@media (max-width: 600px) { .toolbar > .subnav { flex-basis: 100%; width: auto; } }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.toolbar select, .toolbar input[type=search] {
  padding: 7px 10px; border: 1px solid var(--baseline); border-radius: 8px; font: inherit;
  font-size: 14px; background: var(--paper); color: var(--ink);
}
.toolbar select { max-width: 190px; }
.toolbar-search { flex: 1 1 220px; min-width: 200px; max-width: 560px; }
/* the actions at the end of a toolbar: one block, on the right of its row */
.toolbar-end { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.toolbar-check { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
/* the requirements' filters are one menu, «Filtri», with the ones in use as
   chips (F10, features/workspace.js): the tree starts on the first screen
   of a phone too */
@media (max-width: 600px) {
  .toolbar-search { min-width: 0; flex-basis: 100%; }
}
/* the card alone on a narrow screen: the search and the filters serve the
   tree, and wait with it; undo, redo and «Nuovo» stay */
@media (max-width: 1000px) {
  #app:has(> .workspace[data-view="card"]) > .toolbar
    > :is(.toolbar-search, .toolbar-filters, .filter-chips) { display: none; }
}
.spacer { flex: 1; }
/* the card takes more than the tree: on a wide screen its sections and its
   details stand side by side (.detail-layout) */
.workspace {
  display: grid; grid-template-columns: minmax(300px, 3fr) 12px 5fr; column-gap: 2px; row-gap: 16px;
  align-items: start;
}
.workspace > * { min-width: 0; }
/* the width the person chose with the divider (F9, features/splitter.js) */
.workspace.sized { grid-template-columns: minmax(240px, var(--tree-width)) 12px minmax(0, 1fr); }
.splitter {
  align-self: stretch; position: relative; cursor: col-resize; touch-action: none; border-radius: 6px;
}
.splitter::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 2px; border-radius: 2px;
  background: var(--grid);
}
.splitter:hover::before, .splitter.dragging::before { background: var(--accent); }
.splitter:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.splitter:focus-visible::before { background: var(--accent); }
.tree-panel { padding: 8px; max-height: calc(100vh - 230px); overflow: auto; position: sticky; top: 72px; }
/* the card answers to its own width, not the window's: the divider moves it */
.detail-panel { padding: 20px; container: card / inline-size; }
/* narrow screens (F9): the tree (or the list of cases) and the card take
   turns, as the address says (data-view, features/workspace.js); "← Albero"
   above the card goes back */
.back-to-list { display: none; margin: 0 0 10px; }
.back-to-list .btn-link { font-size: 14px; padding: 6px 0; }
@media (max-width: 1000px) {
  .workspace, .workspace.sized { grid-template-columns: 1fr; }
  .splitter { display: none; }
  .workspace[data-view="card"] > .tree-panel { display: none; }
  .workspace[data-view="tree"] > .detail-panel { display: none; }
  .back-to-list { display: block; }
  .tree-panel { position: static; max-height: none; overflow: visible; }
  .detail-panel { padding: 16px; }
}

/* the tree */
.tree { list-style: none; margin: 0; padding: 0; }
.tree-row {
  display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer;
  padding: 5px 8px 5px calc(8px + var(--depth, 0) * 18px);
  border-radius: 8px; border: 1px solid transparent; user-select: none;
}
.tree-row:hover { background: var(--bg); }
.tree-row.selected { background: var(--accent-soft); border-color: var(--accent-line); }
.tree-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree-row.context { opacity: .55; }
.tree-row.obsolete .tree-title { text-decoration: line-through; color: var(--ink-3); }
.tree-row.dragging { opacity: .4; }
.tree-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.tree-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.tree-row.drop-inside { background: var(--accent-soft); border-color: var(--accent); }
/* F29: the structure of the requirements in the model (features/model.js):
   folders and types one under the other, inside a folder a step to the right */
.structure .structure-name { padding-left: calc(10px + var(--depth, 0) * 22px); }
.structure .structure-name .icon { color: var(--accent); vertical-align: -3px; margin-right: 6px; }
.structure .structure-name small { margin-left: 8px; font-weight: 450; }
/* F31: a type's sections under it, quieter than the types */
.structure-section td { color: var(--ink-2); font-size: 13.5px; }
.structure-section .structure-number { color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.structure-row[draggable="true"] { cursor: grab; }
.structure-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.structure-row.dragging { opacity: .4; }
.structure-row.drop-before > td { box-shadow: inset 0 2px 0 var(--accent); }
.structure-row.drop-after > td { box-shadow: inset 0 -2px 0 var(--accent); }
.structure-row.drop-inside > td { background: var(--accent-soft); }
.tree-toggle {
  flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center;
  justify-content: center; border: 0; background: none; color: var(--ink-3); font-size: 11px;
  cursor: pointer; padding: 0; border-radius: 4px;
}
button.tree-toggle:hover { background: var(--grid); color: var(--ink); }
.tree-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-flag { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; flex: none; }
.tree-flag.warn { color: var(--warn-tx); }
.tree-flag.bad { color: var(--bad-tx); }
/* F31: a section of the tree, a chapter's title among the requirements
   (features/tree.js): its number in the accent, its title in deep blue, how
   many requirements it holds */
.tree-section {
  display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer;
  padding: 6px 8px 6px calc(8px + var(--depth, 0) * 18px); margin-top: 2px;
  border-radius: 8px; border: 1px solid transparent; user-select: none;
  color: var(--ink-title); font-weight: 650;
}
.tree-section:hover { background: var(--bg); }
.tree-section:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree-section.context { opacity: .55; }
.tree-section .tree-number { flex: none; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.tree-section .tree-count {
  flex: none; min-width: 20px; padding: 0 7px; border-radius: 999px; text-align: center;
  font-size: 11.5px; font-weight: 650; line-height: 19px; color: var(--ink-3); background: var(--bg);
}
.tree-section.dragging { opacity: .4; }
.tree-section.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.tree-section.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.tree-section.drop-inside { background: var(--accent-soft); border-color: var(--accent); }
.tree-section .row-more { width: 24px; height: 24px; margin: -3px -4px -3px 0; border-radius: 6px; }
/* F31: a section in the document: a chapter's title, no facts under it */
.doc-chapter { margin-bottom: 10px; }
.doc-chapter-title { color: var(--ink-title); }
.tree-row .badge { font-size: 11px; padding: 1px 7px; }
.tree-empty { padding: 20px; color: var(--ink-3); text-align: center; font-size: 14px; }
/* above the tree (F9): one branch only, fold all, unfold all */
.tree-tools {
  display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap;
  padding: 2px 6px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--bg); font-size: 13px;
}
.tree-tools .btn-link { font-size: 13px; }
.tree-tools .btn-link:disabled { color: var(--ink-3); cursor: not-allowed; text-decoration: none; }
.tree-tools-branch { font-size: 12.5px; font-weight: 550; }

/* the card */
.detail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.detail-title { font-size: 20px; margin: 0 0 10px; }
/* Each section of a card is a box (core/ui.js, box): its title in a band on
   top, what it says below. The same on a test case and on a proposal of the AI. */
.detail-section {
  margin: 0 0 12px; background: var(--paper); border: 1px solid var(--grid); border-radius: 10px;
  min-width: 0;
}
.detail-section > h3, .detail-section > summary {
  margin: 0; padding: 7px 14px; background: var(--box-head); border-bottom: 1px solid var(--grid);
  border-radius: 9px 9px 0 0;
  font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-strong);
}
.detail-section-body { padding: 12px 14px; }
.kv + .detail-section, p + .detail-section { margin-top: 14px; }
/* the sections on the left, the details beside them when the card is wide;
   one column, details last, when it is not */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; align-items: start; }
.detail-layout > *, .detail-main { min-width: 0; }
@container card (min-width: 860px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .detail-aside { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 72px; }
}
.prose { white-space: pre-wrap; margin: 0; }
.criteria { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.criteria li { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: start; }
.criterion-label {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent-strong);
  background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; text-align: center;
}
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.link-kind { color: var(--ink-3); font-size: 12.5px; min-width: 110px; }
.link-title { color: var(--ink-2); flex: 1; min-width: 120px; }
.link.suspect { background: var(--warn-bg); border-radius: 8px; padding: 4px 8px; }
/* F23: a test case's criteria, result and warnings, wrapping as one */
.link-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.link-tags .chip { padding: 1px 8px; font-size: 12px; }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.finding { display: grid; grid-template-columns: 20px 1fr; gap: 6px; }
.finding-icon { display: flex; padding-top: 2px; }
.finding.warn .finding-icon { color: var(--warn-tx); }
.finding.info .finding-icon { color: var(--accent); }
.detail-meta { font-size: 13.5px; gap: 8px 14px; }
.kv .kv-sub { display: block; font-size: 12.5px; color: var(--ink-3); }
.kv select {
  padding: 4px 8px; border: 1px solid var(--baseline); border-radius: 8px; max-width: 100%;
  font: inherit; font-size: 13.5px; background: var(--paper); color: var(--ink); margin-top: 4px;
}
.kv select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
/* the history: a box that opens from its band */
.detail-history > summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none;
}
.detail-history > summary::-webkit-details-marker { display: none; }
.detail-history > summary:hover { color: var(--ink); }
.detail-history > summary .icon { color: var(--ink-3); transition: transform .15s ease; }
.detail-history[open] > summary .icon { transform: rotate(90deg); }
.detail-history:not([open]) > summary { border-bottom: 0; border-radius: 9px; }
.detail-history > summary:focus-visible { outline-offset: -2px; }

/* the editor */
.editor .detail-head { margin-bottom: 14px; }
.criteria-editor { display: grid; gap: 8px; }
.criteria-editor > .btn { justify-self: start; }
.criteria-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.criterion-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: start;
  border: 1px solid var(--grid); border-radius: 10px; padding: 8px; background: var(--paper);
}
.criterion-row .criterion-label { margin-top: 6px; font-size: 11px; }
.criterion-fields { display: grid; gap: 6px; }
.criterion-fields textarea, .criterion-fields input, .criterion-fields select {
  padding: 7px 9px; border: 1px solid var(--baseline); border-radius: 8px; font: inherit;
  font-size: 14px; background: var(--paper); color: var(--ink); width: 100%;
}
.criterion-fields textarea { min-height: 52px; resize: vertical; }
.criterion-sub { display: grid; grid-template-columns: 170px 1fr; gap: 6px; }
.criterion-tools { display: flex; flex-direction: column; gap: 2px; }
.editor-conflict .banner { margin-bottom: 12px; }
.editor-conflict:empty { display: none; }

/* a save refused with 409 (F9): the person's text next to the server's */
.conflict {
  background: var(--warn-bg); color: var(--warn-tx); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 14px; display: grid; gap: 8px;
}
.conflict p { margin: 0; }
.conflict-fields { margin: 0; display: grid; gap: 4px 0; }
.conflict-fields dt { font-size: 13px; font-weight: 650; margin-top: 4px; }
.conflict-fields dd { margin: 0; }
.conflict-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.conflict-side {
  background: var(--paper); color: var(--ink); border: 1px solid var(--grid); border-radius: 8px;
  padding: 6px 10px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere;
}
.conflict-side .label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
.conflict-side p { margin: 0; }
.conflict .actions { margin-top: 4px; }
@media (max-width: 700px) { .conflict-pair { grid-template-columns: 1fr; } }

/* the open intervention */
.intervention { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13.5px; }
.intervention.open {
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 10px;
  padding: 8px 12px; color: var(--accent-strong);
}
.intervention-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.intervention code { background: var(--veil); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.btn-link {
  background: none; border: 0; padding: 0; color: var(--accent-strong); font: inherit;
  font-size: 13.5px; font-weight: 550; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

/* history */
.history { list-style: none; margin: 0; padding: 0; }
.history-item { border-bottom: 1px solid var(--bg); }
.history-item:last-child { border-bottom: 0; }
.history-item > details > summary {
  list-style: none; cursor: pointer; padding: 10px 4px; display: flex; flex-wrap: wrap;
  gap: 4px 12px; align-items: baseline;
}
.history-item > details > summary::-webkit-details-marker { display: none; }
.history-summary { font-weight: 550; }
.history-meta { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.history-item.reverted .history-summary { color: var(--ink-3); text-decoration: line-through; }
.history-item.revert .history-summary { color: var(--ink-2); font-style: italic; }
.history-lines { list-style: none; margin: 0 0 10px; padding: 0 4px; display: grid; gap: 8px; }
.history-line { font-size: 13.5px; }
.history-fields { display: grid; grid-template-columns: 140px 1fr; gap: 2px 10px; margin: 4px 0 0; }
.history-fields dt { color: var(--ink-3); }
.history-fields dd { margin: 0; overflow-wrap: anywhere; }
.history-fields .arrow { color: var(--ink-3); }
.actions.center { justify-content: center; margin-top: 12px; }

/* link dialog (F23): the kind, then at once the list of what it can reach,
   a box on each row (features/linkpicker.js) */
dialog.link-dialog { width: min(720px, calc(100vw - 32px)); }
.link-form .hint { margin: -6px 0 12px; }
.check-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; cursor: pointer; }
.check-list { display: grid; gap: 6px; }
.check-list .check-line { margin: 0; align-items: flex-start; }
.field :is(.check-line, .pick-label) input[type=checkbox],
.check-line input[type=checkbox] { width: auto; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--accent); }
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row input { flex: 1; min-width: 0; }
.input-row .btn { flex: none; }
.pick-box { display: grid; gap: 8px; }
.pick-search, .field input.pick-search {
  width: 100%; padding: 7px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--paper); color: var(--ink);
}
.pick-search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.pick-list {
  list-style: none; margin: 0; padding: 4px; max-height: min(46vh, 420px); overflow-y: auto;
  border: 1px solid var(--grid); border-radius: 10px; background: var(--paper);
}
.pick-list[aria-busy="true"] { opacity: .6; }
.pick-children { list-style: none; margin: 0; padding: 0; }
.pick-label {
  display: flex; align-items: flex-start; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer;
  padding-left: calc(8px + var(--depth, 0) * 16px);
}
.pick-label:hover { background: var(--accent-soft); }
.pick-label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.pick-body { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pick-body .badge { font-size: 11px; padding: 1px 7px; vertical-align: 1px; }
.pick-title { color: var(--ink); }
.pick-why { flex: none; font-size: 12px; color: var(--ink-3); padding-top: 1px; }
.pick.is-disabled .pick-label { cursor: default; }
.pick.is-disabled .pick-label:hover { background: none; }
.pick.is-disabled .pick-body { color: var(--ink-3); }
.pick.is-disabled .pick-title { color: var(--ink-2); }
.pick-head .pick-label { font-weight: 600; }
.pick-head .pick-label .pick-title { font-weight: 600; }
.pick-children .pick-label { padding-left: calc(34px + var(--depth, 0) * 16px); color: var(--ink-2); }
.pick-group + .pick-group, .pick-group + .pick, .pick + .pick-group { border-top: 1px solid var(--grid); margin-top: 2px; padding-top: 2px; }
.pick-empty { padding: 10px 8px; color: var(--ink-3); font-size: 13.5px; }
.pick-empty.banner { margin: 0; }
.pick-status { margin: 0; font-size: 12.5px; color: var(--ink-3); min-height: 1em; }
.pick-status:empty { display: none; }
@media (max-width: 560px) {
  .pick-label { flex-wrap: wrap; }
  .pick-why { flex-basis: 100%; padding-left: 24px; }
}

/* project settings: the sections one under the other, as wide as a form reads
   well; their index above them, and beside them, staying, on a wide screen
   (features/settings.js) */
.settings-page { display: grid; grid-template-columns: minmax(0, 1000px); gap: 14px 28px; }
.settings-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.settings-nav button {
  display: flex; align-items: center; gap: 9px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--ink-2); padding: 6px 10px; border-radius: 8px; text-align: left;
}
.settings-nav button .icon { flex: none; color: var(--ink-3); }
.settings-nav button:hover { background: var(--hover); color: var(--ink); }
.settings-nav button[aria-current="true"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 550; }
.settings-nav button[aria-current="true"] .icon { color: inherit; }
.settings-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.settings-sections > .card { scroll-margin-top: 76px; }
.settings-sections > .card h2:focus { outline: none; }
@media (min-width: 1100px) {
  .settings-page { grid-template-columns: 210px minmax(0, 1000px); }
  .settings-nav { position: sticky; top: 72px; align-self: start; }
  .settings-nav ol { flex-direction: column; flex-wrap: nowrap; }
  .settings-nav button { width: 100%; }
}
/* checkboxes side by side while each keeps its width; a number as wide as a number */
.choices-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
form > .choices-row { margin-bottom: 14px; }
/* the templates of a new project, two by two in a dialog (F17) */
.choices-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* F17: the safety and security analyses, and the level a row gives as it is written */
.analysis-level { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px;
  padding: 10px 12px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface); }
.analysis-level > .label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.dialog-foot .push-left { margin-right: auto; }
table.analyses td { vertical-align: top; }
table.analyses td p.small { margin: 2px 0 0; }
table.analyses .chip { margin-right: 3px; }
.analyses-levels { margin-top: 18px; }
.analysis-form .field textarea { min-height: 56px; }
/* the TARA workbook: the reviewers' columns folded away, its pages in a dialog */
.analysis-review { margin: 4px 0 14px; padding: 8px 12px; border: 1px solid var(--grid); border-radius: 10px; }
.analysis-review > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.analysis-review[open] > summary { margin-bottom: 10px; }
.with-list > input { width: 100%; }
table.tara-list td { padding: 4px; vertical-align: top; }
table.tara-list input, table.tara-list textarea { width: 100%; min-width: 90px; }
table.tara-list textarea { min-height: 32px; resize: vertical; }
.tara-form .detail-section + .detail-section { margin-top: 14px; }
.tara-logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* the attack tree, drawn on white as in the workbook; a wide one scrolls */
.attack-tree { margin: -4px 0 14px; max-height: 460px; overflow: auto; border: 1px solid var(--grid);
  border-radius: 10px; background: #fff; padding: 6px; }
.attack-tree > p { margin: 6px; color: #595959; }
.attack-tree-img { display: block; max-width: none; height: auto; }
.tara-logo { max-height: 56px; max-width: 120px; border: 1px solid var(--grid); border-radius: 6px; }
/* F17: the variants, a card each */
.variant-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.variant-card { padding: 14px 16px; }
.variant-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.variant-head h3 { margin: 0; }
.variant-numbers { margin: 10px 0; }
.variant-card .actions { flex-wrap: wrap; }
.applicability-reach.bad { color: var(--bad-tx); }
/* F17: the planned exchanges */
.exchange-card { padding: 14px 16px; }
.exchange-card .actions { flex-wrap: wrap; }
.exchange-card .bad-text { color: var(--bad-tx); }
.exchange-runs summary { cursor: pointer; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.field input.input-number { max-width: 120px; }
.form-subhead { margin-top: 10px; }
.add-form { display: grid; grid-template-columns: 1fr 180px auto; gap: 10px; align-items: end; margin-top: 14px; }
.add-form .field { margin-bottom: 0; }
/* a role changed in place, in the people table */
.table select {
  padding: 4px 8px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 13.5px; background: var(--paper); color: var(--ink);
}
.table select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.add-form-hint { grid-column: 1 / -1; margin: -4px 0 0; }
@media (max-width: 800px) { .add-form { grid-template-columns: 1fr; } }

/* the document: a sheet as wide as reading wants; on a wide screen its
   contents beside it, to jump to a chapter (features/document.js) */
.doc-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.doc-page { display: grid; grid-template-columns: minmax(0, 1100px); justify-content: center; gap: 20px; }
.doc-toc { display: none; }
@media (min-width: 1400px) {
  .doc-page { grid-template-columns: 300px minmax(0, 1100px); }
  .doc-toc {
    display: block; position: sticky; top: 72px; align-self: start;
    max-height: calc(100vh - 96px); overflow-y: auto; padding: 12px 8px;
  }
}
.doc-toc h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-strong); margin: 0 8px 8px; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.doc-toc button {
  display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-2); border-radius: 7px;
  padding: 4px 8px 4px calc(8px + var(--depth, 0) * 14px);
}
.doc-toc button:hover { background: var(--hover); color: var(--ink); }
.doc-toc .doc-number { min-width: 0; flex: none; font-size: 12px; }
.doc-toc .toc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-page > .doc-tools { grid-column: -2; margin-bottom: 0; }
.document { padding: 32px 40px; }
/* a chapter reached from the contents shows below the top bar, not under it */
.doc-heading { scroll-margin-top: 76px; }
.doc-heading:focus { outline: none; }
.doc-heading:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.doc-header { border-bottom: 1px solid var(--grid); margin-bottom: 20px; padding-bottom: 12px; }
.doc-item { margin: 0 0 18px calc(var(--depth, 0) * 18px); break-inside: avoid; }
.doc-heading { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 6px; }
/* a chapter is an h2 inside a card: not spread like a card's title (F9) */
.document .doc-heading { justify-content: flex-start; }
.doc-number { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 32px; }
.doc-rationale { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }
.doc-meta { color: var(--ink-3); font-size: 12.5px; margin: 6px 0; }
.doc-criteria { margin: 6px 0; font-size: 13.5px; }
.doc-links { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }

/* ── review, discussion, inbox (F2) ──────────────────────────────────────── */
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.review-item .prose { margin: 4px 0 0; }
.discussion { display: grid; gap: 12px; }
.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.comment { border-left: 3px solid var(--grid); padding: 2px 0 2px 10px; font-size: 14px; }
.comment.is-finding { border-left-color: var(--s4); }
.comment.is-finding.resolved { border-left-color: var(--ok-tx); opacity: .85; }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0; }
.comment-tools { display: flex; gap: 12px; font-size: 13px; }
.comment-edit { display: grid; gap: 6px; }
.comment-edit textarea, .comment-form textarea { width: 100%; }
.comment-form .actions { justify-content: flex-end; }
.mention { color: var(--accent-strong); font-weight: 600; }

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inbox { list-style: none; margin: 0; padding: 0; }
.inbox-item { padding: 10px 0; border-bottom: 1px solid var(--bg); }
.inbox-item:last-child { border-bottom: 0; }
.inbox-item.unread .inbox-headline { font-weight: 650; }
.inbox-item.unread { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.inbox-body { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; }

/* baselines and comparisons */
.baselines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.baseline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.baseline-head h2 { margin: 0; justify-content: flex-start; }
.baseline-head .badge { margin-left: 8px; }
.baseline-counts { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.table.commits { margin-bottom: 12px; font-size: 13px; }
.commit-rows { display: grid; gap: 6px; margin-bottom: 8px; }
.commit-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 6px; }
.diff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.diff-title { font-weight: 600; margin-bottom: 4px; }
.diff-before { background: var(--bad-bg); color: var(--bad-tx); text-decoration: line-through; padding: 0 3px; border-radius: 4px; }
.diff-after { background: var(--ok-bg); color: var(--ok-tx); padding: 0 3px; border-radius: 4px; }
.diff-sub { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); }

/* import */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.map-field { display: grid; gap: 4px; font-size: 13px; font-weight: 550; color: var(--ink-2); min-width: 0; }
/* the same select as every form's; a long header never spills into the next column */
.map-field select {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 450; background: var(--paper); color: var(--ink);
}
.map-field select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
/* F27: the two ways of the AI, side by side over the whole width, one under the other when narrow */
.import-ai { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; }
.import-ai > * { min-width: 0; }
/* F26: a filled workbook's problems, warnings, the confirmation and the import, apart */
.template-checks { display: grid; gap: 10px; margin-top: 12px; }
.table-scroll { overflow-x: auto; margin: 10px 0; }
.table-scroll .table td { white-space: pre-wrap; max-width: 360px; }
/* a wide table scrolls in its own box on a narrow screen, not the page (core/ui.js, scrollX) */
/* positioned: what is placed absolutely inside (a word only a screen reader reads) scrolls with it
   instead of widening the page */
.scroll-x { overflow-x: auto; position: relative; }

/* ── tests, runs, dashboard, matrix, tokens (F3) ─────────────────────────── */
.usermenu .menu > a { padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 13.5px; }
.usermenu .menu > a:hover { background: var(--bg); text-decoration: none; }

.case-list { list-style: none; margin: 0; padding: 4px; }
.case-row { border-radius: 8px; }
.case-row.selected { background: var(--accent-soft); }
.case-button {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; background: none;
  padding: 7px 8px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; border-radius: 8px;
}
.case-button:hover { background: var(--bg); }
.case-button .tree-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps-edit { list-style: decimal; margin: 0 0 8px; padding-left: 22px; display: grid; gap: 8px; }
.step-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: start; }
.step-row textarea { width: 100%; }
.table.steps td:first-child { width: 32px; }
.criterion-cases { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.case-chip {
  font-family: var(--mono); font-size: 12px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--grid);
  background: var(--paper); color: var(--ink-2);
}
.case-chip:hover { text-decoration: none; border-color: var(--accent); }
.case-chip.ok { background: var(--ok-bg); color: var(--ok-tx); border-color: transparent; }
.case-chip.bad { background: var(--bad-bg); color: var(--bad-tx); border-color: transparent; }
.case-chip.draft { border-style: dashed; }
.criterion-actions { display: flex; gap: 12px; font-size: 13px; margin-top: 2px; }
.inline-form { display: flex; gap: 6px; margin-top: 8px; }
.inline-form input, .inline-form select {
  flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 13.5px; background: var(--paper); color: var(--ink);
}
.inline-form input:focus, .inline-form select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
pre.code {
  background: #0f1720; color: #e6edf3; border-radius: 10px; padding: 12px 14px; overflow: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.45; max-height: 380px; white-space: pre;
}
.pre { white-space: pre-wrap; }
.totals { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.banner.secret { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.banner.secret input { flex: 1; min-width: 240px; font-size: 13px; }
.repo-form { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: end; }
.repo-form > .btn { justify-self: start; }

/* the numbers of the dashboard fill their row, however wide */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 10px; margin-bottom: 14px; }

/* the first steps of a new project (F9): a checklist, each step a link */
.first-steps { margin-bottom: 14px; }
.first-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.first-step { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.first-step-mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--baseline);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.first-step.done .first-step-mark { background: var(--ok-solid); border-color: var(--ok-solid); color: var(--on-accent); }
.first-step.done a { color: var(--ink-3); text-decoration: line-through; }
.stat {
  background: var(--paper); border: 1px solid var(--grid); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
/* the dashboard's numbers in Outfit, as the titles: few in a page, so
   they show; green, amber and red only when the number is a verdict */
.stat b { font-family: var(--font-title); font-size: 28px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--ink-2); }
.stat.ok b { color: var(--ok-tx); }
.stat.warn b { color: var(--warn-tx); }
.stat.bad b { color: var(--bad-tx); }
/* a number that leads to what it counts: another page (a link) or a card
   further down (a button); the chevron says which way */
.stat-to {
  position: relative; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.stat-to:hover { text-decoration: none; border-color: var(--baseline); box-shadow: 0 4px 14px rgba(var(--shade), 0.07); }
.stat-go { position: absolute; top: 12px; right: 12px; color: var(--ink-3); transition: color .12s; }
.stat-to:hover .stat-go { color: var(--accent-strong); }
/* where those buttons bring the page: under the top bar, not behind it */
.card[data-card] { scroll-margin-top: 76px; }
.bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--bg); margin: 6px 0 10px; }
.bar-part { display: block; height: 100%; }
/* two parts side by side keep a thin gap of the card's colour between them */
.bar-part + .bar-part { border-left: 2px solid var(--surface); }
.bar-part.ok { background: var(--bar-ok); }
.bar-part.info { background: var(--bar-info); }
.bar-part.warn { background: var(--bar-warn); }
.bar-part.bad { background: var(--bar-bad); }
.bar-part.neutral { background: var(--baseline); }
/* the words of the bars' colours (charts.js, legend): each colour once, with how many */
.legend {
  list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12.5px; color: var(--ink-2);
}
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend b { font-weight: 650; color: var(--ink); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--baseline); }
.legend-swatch.ok { background: var(--bar-ok); }
.legend-swatch.info { background: var(--bar-info); }
.legend-swatch.warn { background: var(--bar-warn); }
.legend-swatch.bad { background: var(--bar-bad); }
/* the colour of a part, next to its name where the bar has no words (a legend) */
.swatch {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px;
}
.swatch.ok { background: var(--bar-ok); }
.swatch.info { background: var(--bar-info); }
.swatch.warn { background: var(--bar-warn); }
.swatch.bad { background: var(--bar-bad); }
.swatch.neutral { background: var(--baseline); }
/* a long list of a card in columns, as many as the width holds */
ul.plain.in-columns { display: block; columns: 300px; column-gap: 28px; }
ul.plain.in-columns > li { break-inside: avoid; margin-bottom: 6px; }
td.wide { width: 60%; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.history-item.auto .history-summary { color: var(--accent-strong); }

.matrix-card { padding: 0; overflow: hidden; }
.matrix-scroll { overflow: auto; max-height: 70vh; }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.matrix th, table.matrix td { border-bottom: 1px solid var(--bg); border-right: 1px solid var(--bg); padding: 6px 8px; }
table.matrix thead th { position: sticky; top: 0; background: var(--paper); z-index: 2; }
table.matrix .corner { left: 0; z-index: 3; text-align: left; }
table.matrix .req-row { position: sticky; left: 0; background: var(--paper); z-index: 1; text-align: left; font-weight: 500; min-width: 260px; }
table.matrix .test-col { white-space: nowrap; font-family: var(--mono); font-size: 12px; }
table.matrix td { text-align: center; font-family: var(--mono); font-size: 12px; min-width: 54px; }
table.matrix td.hit { background: var(--accent-soft); color: var(--accent-strong); }
table.matrix td.hit.ok { background: var(--ok-bg); color: var(--ok-tx); }
table.matrix td.hit.bad { background: var(--bad-bg); color: var(--bad-tx); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 5px; background: var(--baseline); }
.dot.ok { background: var(--ok-solid); }
.dot.bad { background: var(--bad-solid); }

/* Campaigns (F6) */
.campaigns { display: grid; gap: 12px; }
.campaign-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.campaign-head h2 { margin: 0; }
.inline-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.add-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.bar-part.empty { background: transparent; }
.break { word-break: break-all; }
.signature .banner { margin: 10px 0 0; }
.step-cards { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.step-card {
  background: var(--paper); border: 1px solid var(--grid); border-radius: 12px; padding: 12px 14px;
  display: grid; gap: 8px;
}
.step-card.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.step-card.is-passed { border-left: 4px solid var(--ok-tx); }
.step-card.is-failed, .step-card.is-blocked { border-left: 4px solid var(--bad-tx); }
.step-card.is-skipped { border-left: 4px solid var(--baseline); }
.step-card textarea, textarea.run-note {
  padding: 7px 9px; border: 1px solid var(--baseline); border-radius: 8px; font: inherit;
  font-size: 14px; background: var(--paper); color: var(--ink); width: 100%; resize: vertical;
}
.step-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.step-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.step-body p { margin: 2px 0 0; }
.outcomes { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.outcome.ok { background: var(--ok-solid); border-color: var(--ok-solid); color: var(--on-accent); }
.btn.outcome.bad { background: var(--bad-solid); border-color: var(--bad-solid); color: var(--on-accent); }
.btn.outcome.neutral { background: var(--neutral-solid); border-color: var(--neutral-solid); color: var(--on-accent); }
.step-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.evidence li { display: flex; gap: 10px; align-items: center; }
.evidence-thumb {
  width: 96px; height: 64px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--grid); background: var(--bg);
}
@media (max-width: 700px) { .step-body { grid-template-columns: 1fr; } }
.form-error { margin: 0 0 12px; }

/* The AI (F5) */
.ai-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.ai-diff .label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ai-diff input, .ai-diff textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); resize: vertical;
}
.ai-checks .banner { margin: 0 0 8px; }
.ai-choices { display: grid; gap: 10px; padding-left: 20px; }
.ai-choices li { padding: 8px 10px; border: 1px solid var(--grid); border-radius: 10px; }
.ai-case ol { margin: 4px 0; padding-left: 18px; }
.ai-decide { margin-top: 14px; flex-wrap: wrap; }
.ai-decide-hint { margin: 14px 0 -4px; font-size: 13px; }
.ai-decide input { flex: 1; min-width: 200px; padding: 7px 9px; border: 1px solid var(--baseline); border-radius: 8px; font: inherit; }
.ai-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ai-questions textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--baseline); border-radius: 8px; font: inherit; }
textarea.code-edit { width: 100%; font-family: var(--mono); font-size: 13px; padding: 8px; border: 1px solid var(--baseline); border-radius: 8px; white-space: pre; }
@media (max-width: 760px) { .ai-diff { grid-template-columns: 1fr; } }

/* What was asked of the AI, where it was asked (features/ai.js, aiRequests):
   a row per request, what and how it stands on the left, the way to the
   proposal on the right. While something waits for someone the box's band is
   the accent's, at the top of the card. */
.ai-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ai-request {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
}
.ai-request + .ai-request { padding-top: 10px; border-top: 1px solid var(--box-head); }
.ai-request-text { flex: 1 1 220px; min-width: 0; }
.ai-request-head { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.ai-request .btn { flex: none; white-space: nowrap; }
.ai-request-note { margin: 10px 0 0; color: var(--ink-2); }
.ai-box.is-waiting { border-color: var(--accent-line); }
.ai-box.is-waiting > h3 { background: var(--accent-soft); color: var(--accent-strong); border-bottom-color: var(--accent-line); }
.ai-spinner {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
.ai-asked { margin-top: 8px; }
.ai-asked .ai-request { gap: 4px 10px; }
/* what a proposal is about: links, or its words cut to a line */
.subject { display: inline-flex; align-items: baseline; gap: 4px 6px; flex-wrap: wrap; }
.subject-text {
  display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
td.row-action { text-align: right; white-space: nowrap; }
/* the list of the proposals: each row on its middle line, the button with its words;
   on a phone the table scrolls sideways and the button stays in sight at its end */
.table.proposals td { vertical-align: middle; }
/* picked to be deleted together: the box first, the bar with what to do above the table */
.table.proposals th.pick, .table.proposals td.pick { width: 1%; padding-right: 0; }
.table.proposals .pick input { margin: 0; vertical-align: middle; }
.ai-picked { margin-bottom: 10px; padding: 6px 12px; border-radius: 8px; background: var(--accent-soft); }
.ai-remove { margin-top: 14px; text-align: right; }

/* F18: a proposal at a glance. What it proposes in one sentence, what it is
   about a click away, what to look at in one box, the items one row each */
.ai-summary { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ai-subject > summary, .ai-attention > summary { cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.ai-subject:not([open]) > summary, .ai-attention:not([open]) > summary { border-bottom: 0; border-radius: 9px; }
.ai-attention > summary { background: var(--warn-bg); color: var(--warn-tx); }
.ai-attention { border-color: var(--warn-bg); }
.ai-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.ai-notes li { display: flex; gap: 8px; align-items: baseline; }
.ai-notes .badge { flex: none; }
/* F27: what a document's import left out, with its reason and the way to take it in */
.ai-left { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ai-left-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ai-left p { margin: 4px 0 0; color: var(--ink-2); }
.ai-table { position: relative; }
.ai-open-all { display: block; margin: 0 0 6px auto; }
.table.ai-items td { vertical-align: middle; }
.table.ai-items th.pick, .table.ai-items td.pick { width: 1%; padding-right: 0; }
.table.ai-items .pick input { margin: 0; vertical-align: middle; }
.table.ai-items td.ai-first { white-space: nowrap; }
.table.ai-items .ai-toggle-cell { width: 1%; padding-left: 0; text-align: right; }
.table.ai-items tr.has-more { cursor: pointer; }
.table.ai-items tr.has-more:hover td { background: var(--hover); }
.table.ai-items > tbody > tr.is-open > td { border-bottom-color: transparent; }
.table.ai-items > tbody > tr.ai-more > td { padding: 4px 14px 14px 36px; background: var(--surface); border-bottom: 1px solid var(--grid); }
.table.ai-items .badge + .badge, .table.ai-items b + .badge { margin-left: 6px; }
/* F21: a row of the proposal already applied */
.table.ai-items .ai-done { display: inline-flex; color: var(--ok-tx); vertical-align: middle; }
.table.ai-items tr.is-done > td:not(.pick) { color: var(--ink-2); }
.table.ai-items .key + .badge { margin-left: 6px; }
.ai-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer;
}
.ai-toggle:hover { background: var(--hover); color: var(--ink); }
.ai-toggle svg { transition: transform .15s ease; }
.ai-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.ai-fields { font-size: 13.5px; gap: 8px 16px; }
.ai-fields dt { white-space: nowrap; }
.ai-fields .pre { white-space: pre-wrap; }
.table.ai-criteria { font-size: 13px; width: auto; }
.table.ai-criteria td { padding: 4px 8px 4px 0; border: 0; }
.table.ai-criteria td.ai-narrow { white-space: nowrap; }
.ai-steps { margin: 0; padding-left: 18px; }
/* F18: the whole project from a customer's document */
.ai-stages { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
.ai-made { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ai-table + p { margin-top: 12px; }
.ai-generate { border-color: var(--accent-line); }
.ai-generate .card-head h2 { display: inline-flex; align-items: center; gap: 6px; }
.ai-generate p { margin: 0 0 12px; max-width: 760px; }
@media (max-width: 760px) {
  .ai-fields { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ai-fields dd + dt { margin-top: 8px; }
  .table.ai-items > tbody > tr.ai-more > td { padding-left: 14px; }
  /* the table scrolls sideways; what opens under a row stays as wide as the screen */
  .table.ai-items > tbody > tr.ai-more > td > * { max-width: calc(100vw - 72px); }
}
.btn-link.danger { color: var(--bad-tx); }
@media (max-width: 760px) {
  .table.proposals td.row-action {
    position: sticky; right: 0; background: var(--surface);
    box-shadow: -10px 0 10px -10px rgba(var(--shade), 0.3);
  }
}

/* How the AI's proposals end, on the dashboard: one table, by function and
   by model. Each row: the proposals, the bar of the decided ones, the share
   of each outcome; the colour next to each heading is the bar's legend. */
.ai-stats .card-head { align-items: baseline; }
.ai-stats .card-head a { font-size: 13.5px; font-weight: 550; white-space: nowrap; }
.ai-outcomes { table-layout: fixed; min-width: 760px; }
.ai-outcomes .ai-col-n { width: 112px; }
.ai-outcomes .ai-col-mix { width: 30%; }
.ai-outcomes .ai-col-pct { width: 124px; }
.ai-outcomes thead th {
  text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); vertical-align: bottom;
  white-space: nowrap;
}
.ai-outcomes td, .ai-outcomes tbody th { vertical-align: middle; }
.ai-outcomes tbody th {
  padding: 9px 10px; border-bottom: 1px solid var(--bg); text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere;
}
.ai-outcomes thead tr:last-child td { padding: 0 10px 8px; border-bottom: 1px solid var(--grid); }
/* the name of a group of rows; a line before the second group */
.ai-outcomes tr.ai-group th {
  padding: 14px 10px 2px; border-bottom: 0;
  font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
}
.ai-outcomes tbody + tbody tr.ai-group th { border-top: 1px solid var(--grid); }
.ai-outcomes tbody tr:last-child > * { border-bottom: 0; }
.ai-outcomes .bar { margin: 0; height: 10px; }
.ai-outcomes td.zero { color: var(--ink-3); }
.ai-outcomes .ai-open { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* ── F10: icons, menus, tooltips, toolbars ─────────────────────────────────
   One engine for dropdowns, «⋯» and right clicks (core/menu.js, abgantt's),
   the platform's tooltips (core/tip.js), and buttons that are an icon. */
.icon { flex: none; vertical-align: middle; }
.btn .icon { margin: -2px 0; }
.btn .caret { margin-right: -3px; opacity: .7; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer; font: inherit;
}
.btn-icon:hover:not(:disabled), .btn-icon[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.btn-icon:disabled, .btn-icon.is-disabled { color: var(--ink-3); opacity: .45; cursor: not-allowed; }
.btn-icon.is-disabled:hover { background: transparent; color: var(--ink-3); }
.btn.is-disabled, .btn.is-disabled:hover {
  background: var(--grid); border-color: var(--grid); color: var(--ink-3); cursor: not-allowed;
}
.btn-icon.sm { width: 28px; height: 28px; border-radius: 7px; }
.btn-icon.bordered { border-color: var(--baseline); background: var(--paper); }
.btn-icon.bordered:hover:not(:disabled) { border-color: var(--ink-3); }
.btn-icon.danger:hover:not(:disabled) { background: var(--bad-bg); color: var(--bad-tx); }
.btn-icon.is-busy::before { margin-right: 0; }
.btn-icon.is-busy > .icon { display: none; }
/* two icon buttons as one control: undo and redo */
.btn-pair { display: inline-flex; }
.btn-pair > .btn-icon.bordered:first-child { border-radius: 8px 0 0 8px; }
.btn-pair > .btn-icon.bordered:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.btn-pair > .btn-icon.bordered:hover:not(:disabled) { position: relative; z-index: 1; }

/* the menus */
.pop-menu {
  position: fixed; z-index: 9500; min-width: 220px; max-width: 380px; padding: 5px;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--paper); border: 1px solid var(--grid); border-radius: 12px;
  box-shadow: 0 16px 38px rgba(var(--shade), 0.16), 0 2px 6px rgba(var(--shade), 0.05);
  max-height: calc(100vh - 16px); overflow-y: auto;
}
.pop-menu.menu-sub { z-index: 9501; }
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--ink); cursor: pointer;
  text-align: left; font: inherit; font-size: 13.5px; line-height: 1.3;
}
.menu-item:hover, .menu-item:focus-visible, .menu-item.has-sub[aria-expanded="true"] {
  background: var(--hover); outline: none;
}
.menu-item:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-line); }
.menu-item.is-disabled { color: var(--ink-3); cursor: not-allowed; }
.menu-item.danger { color: var(--bad-tx); font-weight: 550; }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background: var(--bad-bg); }
.menu-lead { width: 16px; flex: none; display: inline-flex; justify-content: center; color: var(--ink-3); }
.menu-item:hover:not(.is-disabled) .menu-lead, .menu-item:focus-visible .menu-lead { color: var(--ink-2); }
.menu-item.danger .menu-lead { color: inherit; }
.menu-item[aria-checked="true"] .menu-lead { color: var(--accent-strong); }
.menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-why { font-size: 12px; color: var(--ink-3); white-space: normal; }
/* items with a line under the label: wider, the label above it in evidence */
.pop-menu.has-detail { max-width: min(460px, calc(100vw - 16px)); }
.pop-menu.has-detail .menu-item { align-items: flex-start; padding: 8px 10px; }
.pop-menu.has-detail .menu-lead:empty { display: none; }
.pop-menu.has-detail .menu-text { gap: 3px; }
.pop-menu.has-detail .menu-label { font-weight: 550; }
.menu-detail { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); white-space: normal; }
.menu-hint { font-size: 11.5px; color: var(--ink-3); margin-left: 14px; white-space: nowrap; }
.menu-keys { display: inline-flex; gap: 3px; margin-left: 14px; }
.menu-keys kbd { font-size: 11px; color: var(--ink-3); background: var(--bg); border-color: var(--grid); }
.menu-more { display: inline-flex; margin-left: auto; color: var(--ink-3); }
.menu-sep { flex: none; height: 1px; background: var(--grid); margin: 4px 6px; }
.menu-heading {
  padding: 6px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the thing whose menu is open */
.menu-target { outline: 2px solid var(--accent-line); outline-offset: -2px; }

/* the tooltips */
.tip {
  position: fixed; z-index: 9800; pointer-events: none; max-width: 320px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  padding: 6px 9px; border-radius: 8px; background: var(--tip-bg); color: var(--tip-ink);
  font-size: 12.5px; font-weight: 500; line-height: 1.4; white-space: pre-line;
  box-shadow: 0 8px 24px rgba(var(--shade), 0.22);
}
.tip-keys { display: inline-flex; gap: 3px; }
/* the name of a button that shows only its icon, above what it does */
.tip-name { flex-basis: 100%; font-weight: 650; }
.tip kbd {
  font-size: 11px; color: var(--tip-ink); background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28); border-bottom-width: 1px;
}

/* the «⋯» of a row: at hand under the pointer, always there on a touch screen */
.row-more { opacity: 0; transition: opacity .12s; }
:is(.tree-row, .tree-section, .case-row, .link, .criteria > li, .campaign, .project-card-wrap, tr):is(:hover, :focus-within) .row-more,
.row-more[aria-expanded="true"], .tree-row.selected .row-more, .tree-row.menu-target .row-more { opacity: 1; }
@media (hover: none) { .row-more { opacity: 1; } }
.tree-row .row-more { width: 24px; height: 24px; margin: -3px -4px -3px 0; border-radius: 6px; }

/* a project's card is a link; its «⋯» sits beside it, in its corner */
.project-card-wrap { position: relative; display: flex; }
.project-card-wrap > .project-card { flex: 1; min-width: 0; }
.card-more { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; }
/* a case in the list: the button that opens it, then its «⋯» */
.case-row { display: flex; align-items: center; gap: 2px; padding-right: 4px; }
.case-row > .case-button { flex: 1; min-width: 0; }
.campaign-head .inline-actions { flex: none; }

/* toolbars: groups of controls, a thin line between groups */
.toolbar-group { display: inline-flex; align-items: center; gap: 6px; }
.toolbar-sep { flex: none; width: 1px; height: 22px; background: var(--grid); margin: 0 2px; }
.filter-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip.removable { padding: 2px 4px 2px 10px; gap: 2px; background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-line); }
.chip-x {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; padding: 0;
}
.chip-x:hover { background: var(--accent-line); }
.chip-clear { font-size: 13px; }
.menu-trigger.has-value { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }

/* The actions of a card: what comes next first, the rest in «⋯». One row,
   always: the AI and «⋯» at its end never go to a line of their own. When
   the buttons do not fit, they show their icon only, from the last
   (core/fit.js); only if that is not enough do the first ones wrap, under
   themselves. */
.card-actions {
  display: flex; align-items: flex-start; gap: 6px 12px; flex-wrap: nowrap; margin: 2px 0 14px;
}
.card-actions-main, .card-actions-end { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.card-actions-main { flex: 1 1 auto; min-width: 0; }
.card-actions-end { flex: none; margin-left: auto; }
.card-actions.wraps .card-actions-main { flex-wrap: wrap; }
.card-actions .btn { flex: none; white-space: nowrap; }
.card-actions .btn-sm { padding: 5px 9px; gap: 5px; }
/* a button that gave its words up for room: the icon alone; the name stays
   for a screen reader, and the tooltip says it (core/tip.js) */
.btn.is-compact { padding-left: 7px; padding-right: 7px; }
.btn.is-compact .btn-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.flow-line {
  display: flex; align-items: flex-start; gap: 8px; margin: -2px 0 10px;
  font-size: 13.5px; color: var(--ink-2);
}
.flow-line > span { flex: 1; min-width: 0; }
.flow-line .icon { color: var(--ink-3); margin-top: 2px; }
.flow-line.warn { color: var(--warn-tx); }
.flow-line.warn .icon { color: currentColor; }
.ai-busy-label { font-size: 12.5px; color: var(--ink-3); }

/* ── F11: the project's model, attributes, rules ───────────────────────────
   The model page (features/model.js): types and attributes side by side when
   there is room, the allowed links as one grid per kind, the rules as rows
   with what breaks them. Checkboxes in a row wrap, as chips do. */
.model { display: grid; gap: 18px; }
/* a wide grid of links scrolls in its card, it does not widen the page */
.model > * { min-width: 0; }
.model .card { margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.checks label, .field .checks label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 450; color: var(--ink);
  cursor: pointer;
}
.checks input, .field .checks input { margin: 0; width: auto; padding: 0; }
.row-tools { width: 1%; white-space: nowrap; text-align: right; }
.model .table td:first-child { white-space: nowrap; }
.chip.attribute-chip { font-weight: 600; color: var(--ink); }
.attribute-name { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.link-rules { display: grid; gap: 6px; }
.link-rules > * { min-width: 0; }
.link-rules details { border: 1px solid var(--grid); border-radius: 10px; padding: 6px 12px; background: var(--paper); }
.link-rules summary { cursor: pointer; display: flex; align-items: center; gap: 10px; }
.link-grid { width: auto; margin-top: 8px; }
.link-grid th, .link-grid td { text-align: center; padding: 4px 10px; }
.link-grid thead th:first-child, .link-grid tbody th { text-align: left; }
.link-grid tbody th { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.rules { list-style: none; margin: 0; padding: 0; }
.rule-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--bg);
}
.rule-row:last-child { border-bottom: 0; }
.rule-row.is-off .rule-main { opacity: .6; }
.rule-name { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 2px; }
.rule-state { text-align: right; }
.rule-broken summary { cursor: pointer; list-style: none; }
.rule-broken summary::-webkit-details-marker { display: none; }
.rule-broken ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13.5px; text-align: left; }
.rule-totals { display: inline-flex; gap: 6px; }
.suggested { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.condition-row { display: flex; gap: 8px; flex-wrap: wrap; }
.condition-row select, .condition-row input { flex: 1 1 140px; min-width: 0; }
@media (max-width: 600px) {
  .rule-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rule-state { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}
/* the card: the rules it breaks; the editor: the attributes side by side */
.rule-violations { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.rule-violations li { display: flex; gap: 8px; align-items: baseline; }
.attribute-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px 12px; }
.attribute-field { display: flex; flex-direction: column; gap: 4px; }
.attribute-field .hint { margin: 0; font-weight: 450; }
/* the requirements as a table (features/table.js): the tree's depth as an
   indent of the title, the ticked rows changed together from the bar */
.view-switch { margin: 0; flex: none; }
@media (max-width: 600px) { .toolbar .view-switch { flex-basis: auto; width: fit-content; } }
.view-switch button { display: inline-flex; align-items: center; padding: 5px 9px; }
.table-panel { padding: 12px 14px; }
.req-grid { font-size: 13.5px; }
.req-grid th { white-space: nowrap; }
.req-grid td { padding: 7px 10px; }
.req-grid .check-cell { width: 1%; padding-right: 0; }
.req-grid .check-cell input { margin: 0; }
.req-grid .title-cell { padding-left: calc(10px + var(--depth, 0) * 14px); min-width: 220px; }
.req-grid tr.obsolete td { color: var(--ink-3); }
.req-grid tbody tr:hover td { background: var(--hover); }
.nowrap { white-space: nowrap; }
.bulk-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); font-size: 14px;
}
.bulk-bar[hidden] { display: none; }
.req-table-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.req-table-tools .bulk-bar { margin: 0; flex: 1 1 auto; }
.req-grid th .sort-button {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit;
  letter-spacing: inherit; cursor: pointer; white-space: nowrap;
}
.req-grid th .sort-button:hover { color: var(--ink); }
.req-grid th[aria-sort] .sort-button { color: var(--accent-strong); }
/* the document written in place (features/document.js): a requirement's tools
   on hover or focus (always on a touch screen), the form where it stood */
.doc-toc-box { display: contents; }
.doc-tools { gap: 8px; }
.doc-tools .btn.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.doc-item.is-writing {
  position: relative; border-radius: 8px; padding: 4px 8px;
  margin-left: calc(var(--depth, 0) * 18px - 8px);
}
/* the tools sit beside the title: the text below has the whole width */
.doc-item.is-writing .doc-heading { padding-right: 72px; }
.doc-item.is-writing:hover, .doc-item.is-writing:focus-within { background: var(--hover); }
.doc-item-tools { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; }
.doc-item.is-writing:hover .doc-item-tools, .doc-item.is-writing:focus-within .doc-item-tools { display: flex; }
@media (hover: none) { .doc-item.is-writing .doc-item-tools { display: flex; } }
.doc-edit {
  margin: 0 0 18px calc(var(--depth, 0) * 18px); padding: 12px 14px; border: 1px solid var(--accent);
  border-radius: 10px; background: var(--paper);
}
.doc-edit-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.doc-edit .actions .hint { margin: 0; }

/* ── F12: the customer's IDs, the answers to them, a new version ─────────── */
.chip.foreign-id { font-family: var(--mono); font-size: 12px; background: var(--paper); }
.compliance { display: grid; gap: 8px; }
.compliance-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.compliance .prose { margin: 0; }
.customer-questions { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.customer-questions li.dismissed > div:first-child { text-decoration: line-through; color: var(--ink-3); }
.customer-answer { margin-top: 2px; }
.choice.is-disabled { opacity: .55; cursor: not-allowed; }
.update-section .update-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.update-head { grid-template-columns: auto 1fr; }
.update-head b { display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.update-list .history-fields { margin: 6px 0 0 28px; }
.history-fields dd.is-conflict { border-left: 3px solid var(--warn-tx); padding-left: 8px; }
.conflict-choice { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 0 28px; }
.ai-match { margin: 6px 0 0; color: var(--ink-2); }
.ai-match select { font: inherit; font-size: 13px; padding: 2px 6px; border: 1px solid var(--baseline);
  border-radius: 6px; background: var(--paper); color: var(--ink); }

/* ── F13: traceability across the levels, regression, defects ──────────────── */
dialog.wide { width: min(880px, calc(100vw - 32px)); }
.matrix-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
table.matrix tr.uncovered .req-row, table.matrix th.uncovered { box-shadow: inset 3px 0 0 var(--warn-tx); }
table.matrix td.linked { font-size: 10px; }
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chain-root { border-bottom: 1px solid var(--bg); padding-bottom: 8px; }
.chain-root:last-child { border-bottom: 0; }
.chain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.chain-node { padding-left: calc(var(--depth, 0) * 22px); }
.chain-node + .chain-node { position: relative; }
.chain-cases { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.trace h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-strong); }
.baseline-coverage { margin: 4px 0 10px; }
table.defects td:first-child { min-width: 240px; }

/* ── F14: change requests, electronic signatures, the register ───────────── */
ol.steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.step {
  display: flex; flex-direction: column; gap: 1px; min-width: 112px; padding: 7px 12px;
  border: 1px solid var(--grid); border-radius: 10px; background: var(--paper); color: var(--ink-3);
}
.step .step-label { font-weight: 600; font-size: 13px; }
.step.done { color: var(--ink); border-color: var(--border); }
.step.current { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.change-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.change-grid > * { min-width: 0; }
.change-grid h4 { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-strong); }
.change-grid .detail-section-body > :first-child > h4:first-child,
.change-grid .detail-section-body > h4:first-child { margin-top: 0; }
.change-grid .prose { margin: 0; }
.impact > * + * { margin-top: 8px; }
.board-list, .change-links, .signatures { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board-list p { margin: 4px 0 0; }
.chip.signed { background: var(--ok-bg); color: var(--ok-tx); border-color: transparent; }
.signature { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.signature > svg { color: var(--ok-tx); margin-top: 2px; }
.sign-sha { color: var(--ink-3); }
.sign-notice {
  display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 9px 12px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; line-height: 1.45;
}
.sign-notice > svg { flex: none; margin-top: 2px; }
.sign-shell { width: min(460px, 100%); }
.sign-card .login-logo { margin-bottom: 18px; }
.sign-meaning { font-family: var(--font-title); font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 2px 0 14px; color: var(--ink); }
.sign-what { margin: 0 0 12px; }
.sign-card .btn-google { margin-top: 16px; }
.sign-card .dev-box { margin-top: 16px; }
.sign-cancel { text-align: center; margin: 16px 0 0; font-size: 13px; }
.audit-filters { align-items: flex-end; flex-wrap: wrap; }
.audit-filters .field { margin: 0; min-width: 140px; }
.audit-filters input, .audit-filters select { height: 38px; }
table.audit td:last-child { min-width: 260px; }

/* ── F14b: abgantt ───────────────────────────────────────────────────────── */
.warn-text { color: var(--warn-tx); }
.plan-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; text-decoration: none; }
.plan-chip:hover { text-decoration: none; border-color: var(--accent); }
.plan-chip.ok svg { color: var(--ok-tx); }
.plan-chip.warn svg { color: var(--warn-tx); }
.plan-chip.bad { border-color: var(--bad-tx); color: var(--bad-tx); }
.plan-milestones { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.plan-milestones svg, .delivery-head svg { color: var(--warn-tx); vertical-align: -2px; }
.delivery-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
                 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.delivery { border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px; background: var(--paper); }
.delivery .bar { margin: 8px 0 6px; height: 8px; }
.delivery p { margin: 4px 0 0; }
.deliveries .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.baseline-milestone select { margin-left: 6px; max-width: 260px; }

/* ── F15: the AI of the engineering, EARS, the score ─────────────────────── */
.ai-pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-score { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ai-origin { display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
             background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-line); }
.ai-origin:hover { text-decoration: none; border-color: var(--accent); }
.ai-origin.is-reviewed { background: none; }
.quality-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.quality-head .badge { font-variant-numeric: tabular-nums; }
.ears-chip { border-color: var(--accent-line); }
.statement-field .statement-tools, .statement-field .live-quality { margin-top: 6px; }
.statement-tools { display: flex; gap: 6px; align-items: center; }
/* an EARS template in its menu: the fields still to fill in */
.ears-slot {
  display: inline-block; padding: 0 3px; border-radius: 4px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 500;
}
.live-quality:empty { display: none; }
.live-quality { border-left: 3px solid var(--grid); padding: 4px 0 2px 10px; }
.live-quality .findings { margin: 0; }

/* ── F16: data sets, blocks of reusable steps ─────────────────────────────── */
.step-adders { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.step-row.step-block { grid-template-columns: 1fr auto; align-items: center;
                       background: var(--accent-soft); border-radius: 8px; padding: 6px 8px; }
.step-block-text { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.step-block-text svg { color: var(--accent-strong); }
.datasets-editor { display: grid; gap: 8px; }
.datasets-editor > input { max-width: 420px; }
.datasets-editor > button { justify-self: start; }
.datasets-edit input { width: 100%; min-width: 90px; }
.datasets-edit td, .datasets-edit th { padding: 4px 6px; }
.dataset-states { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.dataset-states .chip { font-size: 12px; text-decoration: none; }
.dataset-states .state-ok { background: var(--ok-bg); color: var(--ok-tx); }
.dataset-states .state-bad { background: var(--bad-bg); color: var(--bad-tx); }
.dataset-states .state-info { border-color: var(--accent); }
.dataset-chip { margin-left: 8px; vertical-align: middle; font-size: 14px; }
tr.from-block td:nth-child(2) { border-left: 3px solid var(--accent-line); }
.shared-blocks { display: grid; gap: 16px; }
.shared-block .card-head h2 { display: flex; gap: 8px; align-items: baseline; }
.plan-matrix th.is-current { background: var(--accent-soft); }
.plan-matrix th a { font-weight: 650; }

/* A finger, not a mouse: on a touch screen the controls get a target of
   44px at least, the size a fingertip hits without a second try. The layout
   stays the same; only what is pressed grows. */
@media (pointer: coarse) {
  :is(.btn, .btn-ghost, .btn-link, .lingua button, .tema-options button, .subnav a, .subnav button,
      .project-nav a, .nav a, .palette-button, .guida-btn, .menu-item, .tree-row, .case-button) {
    min-height: 44px;
  }
  :is(.btn-icon, .btn-icon.sm, .btn-ghost) { min-width: 44px; min-height: 44px; }
  :is(.field, .toolbar, .table, .kv) :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: 44px; }
}

/* Less movement for whoever asks the system for it (F9): spinners and
   skeletons stand still, nothing slides or turns. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ── F20: the TARA, step by step ───────────────────────────────────────────
   The steps of ISO/SAE 21434 in a row, each with its state (done, warnings,
   errors, to do); the step on show beside its checks; the rows of the step
   in a table that rates in place (features/tara.js). */
.tara-norm { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 10px; letter-spacing: .02em; }
/* F21: a completion of the AI still to decide */
.tara-ai-banner { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.tara-ai-banner .tara-ai-text { flex: 1; min-width: 200px; }
.tara-progress { display: flex; align-items: center; gap: 8px 16px; margin: 0 0 12px; flex-wrap: wrap; }
.tara-progress-text { margin: 0; font-size: 13.5px; }
.tara-progress-bar {
  flex: 1 1 180px; max-width: 440px; height: 8px; border-radius: 999px; background: var(--grid); overflow: hidden;
}
.tara-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--bar-ok); transition: width .3s ease; }
.tara-steps { margin: 0 0 16px; }
.tara-stepper {
  list-style: none; margin: 0; padding: 6px 2px 8px; display: flex; overflow-x: auto; scrollbar-width: thin;
}
.tara-step { flex: 1 1 0; min-width: 100px; position: relative; }
/* the line to the next step, green after a step done */
.tara-step:not(:last-child)::after {
  content: ""; position: absolute; top: 19px; left: calc(50% + 21px); right: calc(-50% + 21px);
  height: 2px; border-radius: 2px; background: var(--grid);
}
.tara-step.is-done:not(:last-child)::after { background: var(--bar-ok); }
.tara-step a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 4px 4px;
  border-radius: 10px; color: var(--ink-2); text-align: center;
}
.tara-step a:hover { text-decoration: none; color: var(--ink); }
.tara-step-mark {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; background: var(--paper); border: 2px solid var(--baseline); color: var(--ink-2);
  position: relative; z-index: 1; transition: box-shadow .15s ease, border-color .15s ease;
}
.tara-step a:hover .tara-step-mark { border-color: var(--ink-3); }
.tara-step.is-done .tara-step-mark { background: var(--ok-solid); border-color: var(--ok-solid); color: var(--on-accent); }
.tara-step.is-warning .tara-step-mark { background: var(--warn-bg); border-color: var(--bar-warn); color: var(--warn-tx); }
.tara-step.is-error .tara-step-mark { background: var(--bad-bg); border-color: var(--bar-bad); color: var(--bad-tx); }
.tara-step.is-current .tara-step-mark { box-shadow: 0 0 0 4px var(--accent-soft); border-color: var(--accent); }
.tara-step.is-current.is-todo .tara-step-mark { background: var(--accent-fill); color: var(--on-accent); }
.tara-step-text { display: flex; flex-direction: column; line-height: 1.25; }
.tara-step-title { font-size: 12.5px; font-weight: 600; }
.tara-step.is-current .tara-step-title { color: var(--ink); font-weight: 700; }
.tara-step-sub { font-size: 11.5px; color: var(--ink-3); }
.tara-step.is-error .tara-step-sub { color: var(--bad-tx); }
.tara-step.is-warning .tara-step-sub { color: var(--warn-tx); }
.tara-step.is-done .tara-step-sub { color: var(--ok-tx); }

.tara-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.tara-main { min-width: 0; }
.tara-stage { padding: 22px 24px; }
.tara-stage-head { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--grid); }
.tara-eyebrow {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-strong);
}
.tara-stage-head h2 { font-size: 20px; margin: 0 0 6px; display: block; }
.tara-what { color: var(--ink-2); max-width: 82ch; margin: 0 0 10px; }
.tara-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.subtle { background: transparent; }
.tara-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.tara-checks { position: sticky; top: 72px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px; }
.tara-checks-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.tara-checks-head h2 { margin: 0; font-size: 15px; }
.tara-checks-foot { margin: 14px 0 0; }
.tara-ok { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 8px 6px; color: var(--ink-2); }
.tara-ok p { margin: 0; }
@media (max-width: 1180px) {
  .tara-layout { grid-template-columns: 1fr; }
  .tara-checks { position: static; max-height: none; }
}
@media (max-width: 700px) {
  .tara-stage { padding: 16px; }
  .tara-step { min-width: 86px; }
  .tara-step-sub { display: none; }
}

/* the findings: what is missing, what does not hold together, an advice */
.finding-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.finding {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--grid); border-left: 3px solid var(--grid); background: var(--paper);
}
.finding.is-error { border-left-color: var(--bar-bad); }
.finding.is-warning { border-left-color: var(--bar-warn); }
.finding.is-info { border-left-color: var(--bar-info); }
.finding-body { min-width: 0; flex: 1; }
.finding-body p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.finding-kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.finding-actions { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; }
.finding-list.compact .finding { padding: 8px 10px; }
.level-icon { display: inline-flex; flex: none; margin-top: 1px; }
.level-icon.is-error { color: var(--bad-tx); }
.level-icon.is-warning { color: var(--warn-tx); }
.level-icon.is-info { color: var(--accent-strong); }
.level-icon.is-ok { color: var(--ok-tx); }

/* the rows of a step */
.tara-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.tara-toolbar p { margin: 0; }
table.tara-table td { vertical-align: middle; }
table.tara-table tbody tr:hover td { background: var(--hover); }
.tara-id-col { width: 1%; white-space: nowrap; }
.tara-state-col { width: 1%; text-align: center; }
.tara-title-cell { min-width: 220px; }
.tara-title-cell p { margin: 2px 0 0; max-width: 72ch; }
.tara-row-title { text-align: left; font-weight: 600; color: var(--ink); font-size: 14px; }
.cell-col, .num-col, .tara-table .btn { white-space: nowrap; }
.table select.cell-select { width: auto; min-width: 110px; max-width: 190px; min-height: 34px; font-size: 13px; }
.cell-select.is-saving { opacity: .55; }
.chip-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip-row .chip { padding: 1px 8px; font-size: 12px; }
.path-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
/* a row rated on several scales: a card, its choices side by side, what they give */
.rating-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rating-row { border: 1px solid var(--grid); border-radius: 12px; padding: 12px 14px; background: var(--paper); }
.rating-row:hover { border-color: var(--baseline); }
.rating-head { display: flex; align-items: flex-start; gap: 10px; }
.rating-title { flex: 1; min-width: 0; }
.rating-title p { margin: 2px 0 0; }
.rating-state { flex: none; }
.rating-fields {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(130px, auto); gap: 10px;
  align-items: end; margin-top: 10px;
}
.rating-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.rating-field .cell-select {
  width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 450; background: var(--paper); color: var(--ink);
}
.rating-field .cell-select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.rating-outcome { display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; min-height: 36px; justify-content: center; }
.rating-outcome-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 820px) {
  .rating-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rating-outcome { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 8px; }
}
.tara-trees, .tara-more { margin-top: 16px; }
.tara-trees > summary, .tara-more > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; min-height: 32px; }
.tara-trees .detail-section + .detail-section { margin-top: 12px; }
.tara-goals .detail-section + .detail-section { margin-top: 14px; }
.tara-goals > div:last-child:not(:empty) { margin-top: 14px; }
.tara-form .detail-section { margin-top: 14px; }
tr.is-covered td { color: var(--ink-3); }

/* the risk: the matrix of annex H, the values as badges */
.tara-risk { display: grid; gap: 20px; }
.risk-matrix-wrap .hint { margin-top: 8px; }
.risk-matrix { border-collapse: separate; border-spacing: 4px; min-width: 560px; }
.risk-matrix th { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 4px 8px; text-align: left; white-space: nowrap; }
.risk-matrix thead th { text-align: center; }
.risk-cell { min-width: 110px; height: 62px; border-radius: 10px; padding: 6px 8px; vertical-align: top; }
.risk-cell-value { display: block; font-weight: 800; font-size: 15px; }
.risk-cell-refs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.risk-ref {
  font: inherit; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.5;
  border: 1px solid currentColor; background: var(--paper); color: inherit; border-radius: 6px; padding: 0 6px; cursor: pointer;
}
.risk-ref:hover { background: var(--hover); }
.risk-0 { background: var(--risk0-bg); color: var(--risk0-tx); }
.risk-1 { background: var(--risk1-bg); color: var(--risk1-tx); }
.risk-2 { background: var(--risk2-bg); color: var(--risk2-tx); }
.risk-3 { background: var(--risk3-bg); color: var(--risk3-tx); }
.risk-4 { background: var(--risk4-bg); color: var(--risk4-tx); }
.risk-5 { background: var(--risk5-bg); color: var(--risk5-tx); }
.risk-badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px 2px 3px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.risk-badge b {
  display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--paper); font-size: 12px;
}

/* the dialogs of a step: what the row is, the choices as chips and cards, its checks */
.tara-context {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 14px;
  border-radius: 10px; background: var(--box-head);
}
.tara-context p { margin: 2px 0 0; }
.tara-context .key, .tara-table .key, .rating-head .key, .finding-actions .key { flex: none; white-space: nowrap; }
.tara-sentence-box { padding: 10px 12px; border: 1px dashed var(--baseline); border-radius: 10px; margin: 0 0 14px; }
.tara-sentence-box .label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.tara-sentence { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); font-style: italic; }
.tara-branch {
  padding: 12px 14px 2px; margin: 0 0 14px; border-left: 3px solid var(--accent-line);
  background: var(--surface); border-radius: 0 10px 10px 0;
}
.tara-sub { margin: 4px 0 10px; font-size: 13px; }
.check-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.check-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 36px; cursor: pointer;
  border: 1px solid var(--baseline); border-radius: 999px; background: var(--paper); font-size: 13.5px; user-select: none;
}
.field .check-chip input { margin: 0; accent-color: var(--accent); width: auto; }
.check-chip small { font-family: var(--mono); color: var(--ink-3); font-size: 11px; }
.check-chip b { font-family: var(--mono); }
.check-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.check-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.choice-card {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--baseline); border-radius: 10px; background: var(--paper);
}
.field .choice-card input { margin: 3px 0 0; accent-color: var(--accent); width: auto; }
.choice-card-text { display: flex; flex-direction: column; gap: 2px; }
.choice-card-text small { color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.analysis-level .risk-badge + .chip { margin-left: 2px; }
.dialog-checks-title { margin: 8px 0 8px; font-size: 13px; }
.dialog-checks { margin: 0 0 8px; }
.dialog-checks-ok { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ok-tx); font-size: 13.5px; }

/* the release: the verdict, where each step stands */
.tara-verdict { display: flex; align-items: center; gap: 10px; }
.tara-summary {
  list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}
.tara-summary li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--grid); border-left: 3px solid var(--grid); border-radius: 9px; background: var(--paper);
}
.tara-summary li.is-done { border-left-color: var(--bar-ok); }
.tara-summary li.is-warning { border-left-color: var(--bar-warn); }
.tara-summary li.is-error { border-left-color: var(--bar-bad); }
.tara-form .form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .tara-progress-fill, .tara-step-mark { transition: none; } }

/* ── print (F9) ──────────────────────────────────────────────────────────────
   What prints is the content: no bars, menus, buttons or toolbars, black on
   white whatever the theme (the dark one is for the screen only), links as
   their text, blocks not cut in half, table headers again on every page.
   The document, the matrix, a campaign and an execution carry a header that
   only paper shows (.print-head, core/ui.js); the matrix prints landscape. */
.print-only { display: none; }
@page {
  margin: 16mm 14mm 18mm;
  @bottom-right { content: counter(page) " / " counter(pages); font: 8pt system-ui, sans-serif; color: #555; }
}
@page landscape { size: landscape; }
@media print {
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #000; }
  body { font-size: 10.5pt; line-height: 1.45; }
  /* F20: the side menu and the TARA's steps and checks are the screen's */
  .sidebar, .sidebar-veil, .skip-link, .tara-steps, .tara-progress, .tara-checks, .tara-foot,
  .topbar, .toasts, .no-print, .doc-tools, .project-head, .project-nav, .crumbs, .toolbar, .subnav, .tree-panel,
  .splitter, .back-to-list, .tree-tools, .intervention, .card-actions, .flow-line, .filter-chips,
  .first-steps, .comment-form, .step-tools, .outcomes, .page-head .actions, .detail-history,
  button, .btn, .btn-link, .pop-menu, .tip, dialog, .skeleton, textarea, p.hint { display: none !important; }
  .print-only { display: block !important; }
  /* the dashboard's numbers print, buttons or not; where they lead does not */
  .stats .stat { display: flex !important; }
  .stat-go { display: none !important; }
  .container { padding: 0; max-width: none; }
  .with-sidebar, .tara-layout { display: block; }
  .doc-page { display: block; }
  .card, .document, .detail-panel, .stat, .step-card {
    border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none !important;
  }
  :is(main, form, section, aside) > .card:not(:first-child) { margin-top: 12pt; }
  .workspace, .grid-2 { display: block; }
  a { color: inherit !important; text-decoration: none !important; }
  .key, .badge, .chip, .criterion-label, .case-chip {
    background: none !important; color: #000 !important; border: 1px solid #888 !important;
  }
  .muted, .hint, .doc-meta, .doc-number { color: #444 !important; }
  /* the screen's blues print black: the titles and the bold words like the
     text, the labels of the sections like the muted text */
  h1, h2, b, strong, .empty-state h2 { color: inherit; }
  .detail-section > h3, .detail-section > summary, .doc-toc h2, .trace h4, .change-grid h4 { color: #444; }
  h1, h2, h3, .doc-heading { break-after: avoid; }
  .doc-item, tr, .step-card, .criteria li, .stat, .history-item, .finding, .comment { break-inside: avoid; }
  thead { display: table-header-group; }
  .table th { color: #000; border-bottom: 1px solid #000; }
  .table td { border-bottom: 1px solid #bbb; }
  /* what scrolls on screen prints whole */
  .matrix-scroll, .scroll-x, .table-scroll { overflow: visible !important; max-height: none !important; }
  table.matrix { font-size: 7.5pt; }
  table.matrix thead th, table.matrix .req-row { position: static; background: none; }
  table.matrix th, table.matrix td { border: 1px solid #bbb; padding: 2pt 4pt; }
  table.matrix td.hit { background: none !important; color: #000 !important; font-weight: 700; }
  table.matrix .key, table.matrix .badge { font-size: 7pt; padding: 0 3pt; }
  .print-landscape { page: landscape; }
  .bar { border: 1px solid #888; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .print-head {
    display: flex !important; justify-content: space-between; gap: 12pt; flex-wrap: wrap;
    font-size: 8.5pt; color: #333; border-bottom: 1px solid #000; padding-bottom: 4pt; margin-bottom: 12pt;
  }
  .document .doc-header { border-bottom-color: #000; }
}

/* F17: OSLC, the addresses to give the other tools, and their dialogs */
.oslc-address { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto; gap: 6px 14px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.oslc-address:last-of-type { border-bottom: 0; }
.oslc-address .hint { margin: 2px 0 0; }
.oslc-address code { overflow-wrap: anywhere; font-size: 12.5px; }
.oslc-tools li { padding: 4px 0; }
.oslc-tool-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) auto; gap: 8px;
  align-items: center; margin-bottom: 8px; }
.oslc-tools .mono { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .oslc-address { grid-template-columns: minmax(0, 1fr) auto; }
  .oslc-address > div { grid-column: 1 / -1; }
  .oslc-tool-row { grid-template-columns: 1fr; }
}

/* F17: the pages other tools open: the selection dialog, the previews */
.oslc-body { background: var(--paper); }
.oslc-dialog { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-height: 100vh;
  box-sizing: border-box; max-width: 900px; margin: 0 auto; }
.oslc-head h1 { font-size: 18px; margin: 8px 0 2px; }
.oslc-head p { margin: 0; }
.oslc-brand { display: flex; align-items: center; gap: 7px; font-weight: 650; color: var(--ink-2); }
.oslc-search { display: flex; gap: 8px; flex-wrap: wrap; }
.oslc-search input { flex: 1 1 220px; }
.oslc-results { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto;
  border: 1px solid var(--grid); border-radius: 8px; min-height: 160px; }
.oslc-results li { border-bottom: 1px solid var(--grid); }
.oslc-results li:last-child { border-bottom: 0; }
.oslc-results label { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; cursor: pointer; }
.oslc-results label:hover { background: var(--bg); }
.oslc-results b { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; white-space: nowrap; }
.oslc-more, .oslc-note { margin: 0; font-size: 13px; }
.oslc-note { color: var(--warn-tx, var(--ink-2)); }
.oslc-foot { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.oslc-foot .muted { margin-right: auto; }
.oslc-preview { padding: 12px 14px; font-size: 13.5px; line-height: 1.45; }
.oslc-preview h1 { font-size: 15.5px; margin: 4px 0 6px; }
.oslc-preview.large h1 { font-size: 18px; }
.oslc-facts { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.oslc-text { white-space: pre-wrap; margin: 0 0 8px; }
.oslc-criteria { margin: 0 0 8px; padding-left: 20px; }
.oslc-open { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.external-links { margin-bottom: 10px; }
.external-links a.link-title { color: var(--accent); }
.oslc-search select { min-height: 36px; }

/* F17: the semantic search across projects */
.semantic-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.semantic-form input { flex: 1 1 280px; min-width: 0; }
.semantic-form select { flex: 0 1 260px; min-width: 0; }
.semantic-out .hint { margin: 4px 0 10px; }
.semantic-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.semantic-result { background: var(--paper); border: 1px solid var(--grid); border-radius: 10px;
  padding: 10px 14px; }
.semantic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.semantic-title { font-weight: 600; color: var(--ink); flex: 1 1 200px; min-width: 0; }
.semantic-score { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.semantic-bar { width: 56px; height: 6px; border-radius: 3px; background: var(--grid);
  overflow: hidden; display: inline-block; }
.semantic-fill { display: block; height: 100%; background: var(--accent); }
.semantic-text { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }

/* F30: the rows ticked together in the tree, a bar over them as in the table */
.tree-row.picked { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tree-bulk { margin: 0 0 8px; padding: 6px 10px; gap: 8px; }
.tree-bulk .btn-text { white-space: nowrap; }