/*
 * Op by Op — design tokens (spec 10 §3.1) + base styles.
 * Industrial-utilitarian, warm light palette. Burnt orange is the ONLY chromatic accent.
 * No gradients, glows, or shadows. Structure over polish.
 */

:root {
  --background: #FAFAF7;          /* warm off-white paper — never pure white on the body */
  --foreground: #18181B;         /* warm near-black */
  --card: #FFFFFF;               /* cards / popovers only */
  --border: #E7E5E0;             /* all 1px borders */
  --muted-foreground: #71717A;   /* captions, metadata */
  --primary: #C2410C;            /* burnt orange — the only accent */
  --ring: #C2410C;

  --risk-high: #B91C1C;
  --risk-med:  #D97706;
  --risk-low:  #15803D;
  --pokayoke:  #0369A1;
  --danger:    #B91C1C;          /* failure states — same red as high risk, not a one-off */

  /* Lighter fills for table RPN cells (readable on white). */
  --risk-high-bg: #FCE7E7; --risk-high-fg: #991B1B;
  --risk-med-bg:  #FEF3E2; --risk-med-fg:  #92400E;
  --risk-low-bg:  #E7F5EA; --risk-low-fg:  #166534;

  /* interaction + structure accents */
  --primary-hover: #9A3412;      /* darker burnt orange for :hover */
  --border-strong: #D8D6D0;      /* group separators, dividers */
  --hover-bg: #FBF6F1;           /* subtle warm hover fill */

  /* spacing scale (0.25rem base) — use these, not ad-hoc rems */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;  --space-8: 3rem;

  /* type scale */
  --text-xs: .72rem; --text-sm: .82rem; --text-base: .92rem;
  --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 2rem;

  /* radii */
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px;
}

/* --- Dark theme (opt-in via the toggle → <html data-theme="dark">). Same warm, industrial palette
   inverted to a warm near-black paper; only the color TOKENS change, plus dark restatements of the
   rules that hardcode a light fill. color-scheme is pinned per theme so native controls, dropdown
   popups and scrollbars match (and Chrome doesn't algorithmically re-invert us). --- */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #1A1917;          /* warm near-black paper — never pure black */
  --foreground: #ECEAE5;          /* warm off-white */
  --card: #232220;                /* cards / popovers / table surface — lifted off the bg */
  --border: #38352F;
  --muted-foreground: #A19C92;
  --primary: #F2703A;             /* burnt orange, brightened so it carries on dark */
  --ring: #F2703A;

  --risk-high: #F1746E;
  --risk-med:  #F0A93A;
  --risk-low:  #59C87E;
  --pokayoke:  #58B6E6;
  --danger:    #F1746E;

  /* Muted RPN fills that stay legible on dark. */
  --risk-high-bg: #3A1E1E; --risk-high-fg: #F6ADA9;
  --risk-med-bg:  #3A2A14; --risk-med-fg:  #F3C888;
  --risk-low-bg:  #16301F; --risk-low-fg:  #93D8A8;

  --primary-hover: #F7864F;
  --border-strong: #4A463F;
  --hover-bg: #2A2825;
}

/* Rules that hardcode a light fill — restated with dark surfaces (each out-specifies its light rule
   via the leading [data-theme] attribute). Light rules stay untouched. */
[data-theme="dark"] .list-item:hover { background: var(--hover-bg); }
[data-theme="dark"] .flow-col { background: #201F1C; }
[data-theme="dark"] .pfmea thead th { background: #2B2926; color: #C9C4BA; }
[data-theme="dark"] .pfmea tbody tr:hover td { background: var(--hover-bg); }
[data-theme="dark"] .pfmea tbody tr:hover td.just { background: #201F1C; }
[data-theme="dark"] .pfmea th.just { background: #201F1C; }
[data-theme="dark"] .pfmea td.just { background: #1F1E1B; color: #B5B0A6; }
[data-theme="dark"] .pfmea tr.row-added td { background: #16281C; }
[data-theme="dark"] .editable-cell:hover { background: var(--hover-bg); }
[data-theme="dark"] .inline-input,
[data-theme="dark"] .compare-pick select { background: var(--card); color: var(--foreground); }
[data-theme="dark"] .flash { background: #3A2A14; color: #F3C888; border-color: #5A4520; }
[data-theme="dark"] .pill-draft { background: #3A2A14; color: #F3C888; }
[data-theme="dark"] .pill-final { background: #16301F; color: #93D8A8; }
[data-theme="dark"] .pill-poka  { background: #10304A; }
/* Dark text reads better than white on the brightened primary; give popovers a real lift on dark. */
[data-theme="dark"] .btn, [data-theme="dark"] .proc-tag { color: #1A1917; }
[data-theme="dark"] .annotate-popover,
[data-theme="dark"] .export-menu-pop,
[data-theme="dark"] .cols-menu-pop,
[data-theme="dark"] .rev-select-pop { box-shadow: 0 6px 20px rgba(0, 0, 0, .55); }

/* The global light/dark toggle — fixed bottom-right, clear of the top-right save toast and above the
   horizontal table scrollbar; z-index below popovers (60) and the save toast (50). */
.theme-toggle { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--foreground); cursor: pointer; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }

*, *::before, *::after { box-sizing: border-box; }

/* small, shared utilities — so views don't reach for inline styles */
.hidden { display: none; }
/* MUST stay overflow:visible so a wide table's sticky <thead> pins to the PAGE. Any non-visible
   overflow (even overflow-y:hidden for a horizontal scrollbar) makes this a scroll container, and
   the header would then pin to THIS box (which never scrolls vertically) instead of the viewport.
   So: no inner horizontal scroller — fit-to-width zoom keeps tables in-bounds; a genuinely wide
   table at 100% overflows to the page's own horizontal scroll (headers still stick vertically). */
.scroll-x { overflow: visible; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;   /* non-negotiable — RPN columns must align */
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 78rem; margin: 0 auto; padding: 1.75rem 1.5rem 5rem; }

.brand { font-weight: 700; letter-spacing: -0.01em; font-size: 1.05rem; }
.brand small { color: var(--muted-foreground); font-weight: 400; }
h1 { font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.02em; margin: .15rem 0 .35rem; }
.muted { color: var(--muted-foreground); }
.dim { color: var(--muted-foreground); font-size: .82rem; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.docid { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--primary); }

/* --- cards / list --- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); margin: var(--space-2) 0; }
.list-item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  transition: border-color .12s ease, background .12s ease; }
.list-item:hover { border-color: var(--border-strong); background: #FCFBF9; }

/* --- buttons --- */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem; line-height: 1.2; cursor: pointer;
  font-weight: 600; font-size: var(--text-base); padding: .5rem 1rem; border-radius: var(--radius);
  border: 1px solid transparent; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .06s ease;
}
.btn { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn:hover { text-decoration: none; background: var(--primary-hover); border-color: var(--primary-hover); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: var(--card); color: var(--foreground); border-color: var(--border); }
.btn-ghost:hover { text-decoration: none; background: var(--hover-bg); border-color: var(--primary); color: var(--primary); }
/* On dark, --card sits barely above --background and --border is nearly invisible, so a ghost button
   camouflages into the page. Give it a clear outline so "Sign in" (and other ghost buttons) read as buttons. */
[data-theme="dark"] .btn-ghost { border-color: color-mix(in srgb, var(--foreground) 30%, transparent); }
.btn-sm { font-size: var(--text-sm); padding: .35rem .7rem; }

/* focus ring — visible for keyboard users, not on mouse click */
:where(a, button, input, select, textarea, summary, .btn, .btn-ghost, .row-op):focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* --- consolidated line view (spec 13) --- */
.procedure { margin: 0 0 var(--space-6); scroll-margin-top: var(--space-3); }
/* Brief pulse when you land on a procedure via an "open →" anchor from the Process Flow. */
.procedure.is-flash { animation: procedure-flash 1.8s ease-out; }
@keyframes procedure-flash {
  0%   { box-shadow: 0 0 0 3px var(--primary); background: var(--hover-bg); }
  100% { box-shadow: 0 0 0 3px transparent; background: transparent; }
}
/* Landing on a specific operation (#op_<trace_key>): clear BOTH sticky layers (the procedure head sets
   --thead-top; add the thead's own height), and flash the step cell with an INSET shadow (a td clips outset). */
.pfmea td.step-cell { scroll-margin-top: calc(var(--thead-top, 0px) + 3.5rem); }
.pfmea td.step-cell.is-flash { animation: cell-flash 1.8s ease-out; }
@keyframes cell-flash {
  0%   { box-shadow: inset 0 0 0 3px var(--primary); background: var(--hover-bg); }
  100% { box-shadow: inset 0 0 0 3px transparent; background: transparent; }
}
.departed-name { margin-right: auto; }
.procedure-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 .5rem;
  position: sticky; top: 0; z-index: 5; background: var(--background); padding: .35rem 0; }
.procedure-head h2 { font-size: var(--text-lg); margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.procedure-head .meta { font-size: var(--text-sm); }
.procedure-head .btn-ghost { margin-left: auto; }
.proc-tag { display: inline-block; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .05rem .45rem; border-radius: var(--radius-sm); margin-right: .4rem; vertical-align: middle; }
.proc-move { display: inline-flex; gap: .2rem; margin-left: auto; }
.proc-move + .btn-ghost { margin-left: .5rem; }
.step-move { display: inline-flex; gap: .1rem; }
.row-op.move { line-height: 1; padding: .05rem .3rem; }
.op-move-form { display: inline; margin: 0; }
.op-move-select { font-size: .68rem; padding: 0 .2rem; margin-top: .2rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--card); color: var(--muted-foreground); max-width: 9rem; }

/* --- process flow (drag-to-arrange) --- */
/* Data-dense pages (PFMEA table, consolidated line, redline, flow board) fill the screen on ANY
   monitor with responsive side gutters — a fixed rem cap left big empty margins on wide displays
   and shrank the fit-to-width table into ~65% of the screen. Prose/list/form pages keep .wrap. */
.wrap-fluid { max-width: min(100%, 160rem); padding-left: clamp(1rem, 3.5vw, 3.5rem); padding-right: clamp(1rem, 3.5vw, 3.5rem); }
.flow { display: flex; gap: 2.25rem; align-items: flex-start; overflow-x: auto; padding-bottom: var(--space-4); }
.flow-col { position: relative; flex: 0 0 17rem; background: #F4F4F1; border: 1px solid var(--border);
  border-radius: var(--radius-lg); display: flex; flex-direction: column; }
/* → between procedures (pure CSS, survives drag reorder) */
.flow-col:not(:first-child)::before { content: "→"; position: absolute; left: -1.7rem; top: .55rem;
  color: var(--border-strong); font-size: 1.2rem; font-weight: 700; }
.flow-col-head { display: flex; align-items: center; gap: .4rem; padding: .6rem .75rem; font-weight: 700;
  font-size: var(--text-sm); border-bottom: 1px solid var(--border); cursor: grab; }
.flow-col-head:active { cursor: grabbing; }
.flow-col-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-col-open { margin-left: auto; font-size: .72rem; font-weight: 400; }
.flow-cards { padding: .6rem; display: flex; flex-direction: column; gap: .5rem; min-height: 2.5rem; }
.flow-card { display: flex; align-items: center; gap: .5rem; background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); border-radius: var(--radius); padding: .5rem .6rem;
  font-size: .85rem; cursor: grab; }
/* ↓ between operations in a procedure */
.flow-card:not(:first-child)::before { content: "↓"; position: absolute; margin-top: -.62rem; align-self: center;
  color: var(--border-strong); font-size: .8rem; }
.flow-card:active { cursor: grabbing; }
.flow-card:hover { border-color: var(--primary); }
.flow-card-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.flow-card-rpn { min-width: 1.9rem; text-align: center; font-size: .72rem; }
.flow-card--ghost, .flow-col--ghost { opacity: .4; }
.flow-note { padding: 0 .75rem .6rem; font-size: .78rem; }
/* drag MPI files onto the flow */
.flow-wrap { position: relative; }
.flow-upload-form { margin: 0; }
.flow-add { flex: 0 0 13rem; align-self: stretch; min-height: 6rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .25rem; text-align: center; font: inherit;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: transparent;
  color: var(--muted-foreground); cursor: pointer; padding: 1rem; }
.flow-add:hover { border-color: var(--primary); color: var(--primary); }
.flow-add-plus { font-size: 1.4rem; line-height: 1; }
.flow-add-label { font-weight: 700; font-size: var(--text-sm); }
.flow--dropping { outline: 2px dashed var(--primary); outline-offset: 5px; border-radius: var(--radius-lg); }
.flow-col--insert-before { box-shadow: -5px 0 0 -1px var(--primary); }
.flow-col--insert-after  { box-shadow:  5px 0 0 -1px var(--primary); }

/* place-then-start: procedures dropped on the flow wait until "Start analysis" */
.flow-pending-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin: 0 0 1rem; padding: .7rem 1rem; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.flow-pending-msg { font-size: var(--text-sm); }
.flow-note.ready { color: var(--primary); font-weight: 600; }
/* analyzing: an indeterminate bar reads as "working" far better than a lone spinner */
.flow-analyzing { padding: 0 .1rem; }
.flow-progress { height: 4px; margin: 0 .75rem .45rem; background: var(--border);
  border-radius: 999px; overflow: hidden; }
.flow-progress > span { display: block; height: 100%; width: 40%; background: var(--primary);
  border-radius: 999px; animation: flow-indeterminate 1.3s ease-in-out infinite; }
@keyframes flow-indeterminate {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
/* failed / warning states — the flow no longer lies about a dead run */
.flow-note.failed { color: var(--danger); font-weight: 600; display: flex; flex-wrap: wrap;
  align-items: center; gap: .4rem; }
.flow-retry, .flow-retry button { all: unset; }
.flow-retry button, .flow-retry { cursor: pointer; font-weight: 700; font-size: .72rem;
  color: var(--primary); text-decoration: underline; }
.analysis-failed { border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 7%, transparent); }
.analysis-failed .fail-head { display: flex; align-items: center; gap: .4rem; font-weight: 700;
  color: var(--danger); }
.analysis-failed .fail-msg { margin: .4rem 0 .6rem; }
.flow-col--insert-before, .flow-col--insert-after { transition: box-shadow .1s; }
.flow-col--locked { opacity: .85; }
.flow-col--locked .flow-col-head { cursor: default; }

/* --- page header --- */
.page-head { margin-bottom: var(--space-5); }
/* Opt-in sticky bar (table pages) — a SLIM row (title + Undo/Redo + actions), not the whole
   masthead, so it doesn't eat vertical space. Travels with the sticky column headers. */
.sticky-head { position: sticky; top: 0; z-index: 5; background: var(--background); padding: .4rem 0; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; }
.meta .meta-sep { color: var(--border-strong); }
.page-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.subhead { color: var(--muted-foreground); margin: .1rem 0 var(--space-5); max-width: 46rem; }
/* a subhead sitting inside the header row is the last thing there — no trailing margin */
.page-head-row .subhead { margin-bottom: 0; }

/* section header: an uppercase label + optional inline hint, used above lists/forms */
.section-header { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-2); }

/* a card that pairs a line of copy with a call-to-action button */
.card-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-4); }
.card-cta p { margin: 0; }

/* --- delete a line --- */
.danger-zone { margin-top: var(--space-6); text-align: right; }
.danger-zone form { display: inline; margin: 0; }
.btn-danger-link { background: none; border: 0; color: var(--risk-high); font-size: .8rem; cursor: pointer; padding: .2rem .3rem; }
.btn-danger-link:hover { text-decoration: underline; }
.list-item-actions { display: inline-flex; align-items: center; gap: .3rem; }
.list-item-actions form { display: inline; margin: 0; }

/* --- product profile: a quiet one-line strip, expands to the edit form --- */
.profile-strip { margin: 0 0 var(--space-5); }
.profile-strip > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  padding: .3rem 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.profile-strip > summary::-webkit-details-marker { display: none; }
.profile-strip > summary:hover { color: var(--foreground); }
.profile-strip > summary:hover .profile-toggle { text-decoration: underline; }
.profile-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-toggle { color: var(--primary); font-weight: 600; margin-left: auto; }
.profile-strip[open] .profile-preview { display: none; }
.profile-body { margin-top: var(--space-2); padding: var(--space-3);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.profile-empty-hint { margin: 0 0 var(--space-3); }

/* --- forms --- */
.field { margin: 0 0 var(--space-4); }
.field-hint { margin-top: var(--space-1); }
.input { width: 100%; font: inherit; padding: .5rem .6rem; background: var(--card);
  color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(194, 65, 12, .12); }

/* --- flash --- */
.flashes { padding-bottom: 0; }
.flash { background: #FEF3E2; color: #92400E; border: 1px solid #F5D9A8; border-radius: 6px; padding: .55rem .85rem; margin: .6rem 0; }

/* --- labels / pills --- */
.label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); }
.pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: .08rem .5rem; border-radius: 9999px; }
.pill-draft { background: #FEF3E2; color: #92400E; } .pill-final { background: #E7F5EA; color: #166534; }
.pill-poka { background: #E0F2FE; color: var(--pokayoke); }

/* --- the analysis table (spec 04/07: 9 columns, one row per failure mode) --- */
.pfmea { width: 100%; border-collapse: collapse; background: var(--card);
         border: 1px solid var(--border); font-size: .84rem; }
.pfmea thead th {
  /* --thead-top is set by the sticky_table controller = height of any sticky page/procedure
     header above, compensated for the table's zoom (0 when there's no sticky header). */
  position: sticky; top: var(--thead-top, 0); z-index: 2;
  background: #F0EEE9; color: #52525B;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.pfmea td { padding: .55rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.pfmea tbody tr:hover td { background: #FCFBF8; }
.pfmea tbody tr:hover td.just { background: #F6F4EE; }
.pfmea tr.step-start td { border-top: 2px solid var(--border-strong); }
.pfmea td.num { text-align: center; white-space: nowrap; }
.pfmea .step-cell { white-space: nowrap; font-family: ui-monospace, Menlo, monospace; color: var(--foreground); }
.pfmea .suppressed { color: var(--muted-foreground); font-style: italic; }
/* justification columns — reasoning, tinted + muted so the table still scans */
.pfmea th.just { background: #F1EFE9; }
.pfmea td.just { background: #FBFAF6; color: #52525B; font-size: .8rem; min-width: 12rem; }
.pfmea ol.mits { margin: 0; padding-left: 1.1rem; }
.pfmea .harm { color: var(--muted-foreground); }
.pfmea .harm::before { content: "→ "; }

/* RPN cell */
.rpncell { text-align: center; white-space: nowrap; }
.rpn-num { display: inline-block; min-width: 2.2rem; font-weight: 700; padding: .1rem .4rem; border-radius: 4px; }
.rpn-num.red   { background: var(--risk-high-bg); color: var(--risk-high-fg); }
.rpn-num.amber { background: var(--risk-med-bg);  color: var(--risk-med-fg); }
.rpn-num.green { background: var(--risk-low-bg);  color: var(--risk-low-fg); }
.rpn-num.none  { background: var(--hover-bg);     color: var(--muted-foreground); }
.osd { color: var(--muted-foreground); font-size: .72rem; }

/* reasoning: lightweight expandable detail under a cell */
details.why { margin-top: .25rem; }
details.why > summary { cursor: pointer; color: var(--primary); font-size: .72rem; list-style: none; }
details.why > summary::-webkit-details-marker { display: none; }
details.why > summary::before { content: "ⓘ why"; }
details.why[open] > summary::before { content: "▾ why"; }
details.why .body { color: var(--muted-foreground); font-size: .8rem; margin-top: .2rem; }

.spinner { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- change log (audit history) --- */
.change-log { margin-top: 1rem; }
.change { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: .7rem .9rem; margin: .5rem 0; }
.change-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; }
.change-no { color: var(--primary); font-weight: 700; font-size: .78rem; }
.change-item { font-weight: 600; }
/* line feed: which procedure a change came from */
.change-proc { font-size: .72rem; font-weight: 700; color: var(--primary);
  background: var(--hover-bg); border: 1px solid var(--border); border-radius: 999px; padding: 0 .5rem; }
.change-when { margin-left: auto; }
.log-cap { margin-top: var(--space-4); }
/* revision-range picker on the line history */
.rev-range { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 var(--space-3); }
.rev-select { font: inherit; font-size: var(--text-sm); padding: .3rem .4rem; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); }
.rev-range-note { margin: 0 0 var(--space-4); }
.change-summary { font-style: italic; }
table.change-diff { border-collapse: collapse; margin-top: .5rem; width: 100%; font-size: .84rem; }
table.change-diff td { padding: .2rem .5rem; vertical-align: top; border-top: 1px solid var(--border); }
table.change-diff .before { color: var(--risk-high-fg); background: var(--risk-high-bg); border-radius: 3px; }
table.change-diff .after  { color: var(--risk-low-fg);  background: var(--risk-low-bg);  border-radius: 3px; }
table.change-diff .arrow { color: var(--muted-foreground); }
.row-history { font-size: .72rem; color: var(--muted-foreground); white-space: nowrap; }

/* --- inline editing --- */
.editable-cell { cursor: text; border-bottom: 1px dashed transparent; border-radius: 2px; }
.editable-cell:hover { border-bottom-color: var(--primary); background: #FBF6F1; }
.editable-cell.cell-saved { background: var(--risk-low-bg); box-shadow: inset 0 0 0 1px var(--risk-low); }
.editable-cell.cell-error { background: var(--risk-high-bg); box-shadow: inset 0 0 0 1px var(--risk-high); }

/* edit bar + auto-save indicator */
.edit-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.save-status { font-size: .8rem; font-weight: 700; opacity: 0; transition: opacity .15s ease-out; padding: .1rem .5rem; border-radius: 999px; }
.save-status.show { opacity: 1; }
.save-status.ok  { color: var(--risk-low-fg);  background: var(--risk-low-bg); }
.save-status.err { color: var(--risk-high-fg); background: var(--risk-high-bg); }
/* flow: a prominent "✓ Saved · rev N" toast, top-right, that slides in so it's hard to miss */
.flow-save-status { position: fixed; top: 1rem; right: 1.25rem; z-index: 50;
  color: var(--risk-low-fg); background: var(--risk-low-bg);
  border: 1px solid var(--risk-low); border-left: 4px solid var(--risk-low);
  font-size: var(--text-base); font-weight: 700; padding: .55rem 1rem; border-radius: var(--radius);
  transform: translateY(-.6rem); transition: opacity .18s ease-out, transform .18s ease-out; }
.flow-save-status.show { transform: translateY(0); }
.reanalyze-form { display: inline; margin: 0; }
.reanalyze-label { cursor: pointer; display: inline-block; }
#analyze_status:empty { display: none; }
#analyze_status { margin: .5rem 0 1rem; }

/* --- analysis progress card --- */
.progress-card { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 8px; padding: .85rem 1rem; }
.progress-head { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600; }
.progress-msg { flex: 1; }
.progress-clock { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground); font-weight: 700; font-size: .9rem; }
.progress-track { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; margin: .6rem 0 .35rem; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 999px;
  transition: width .4s ease-out; min-width: 2px; }
.progress-sub { font-size: .8rem; color: var(--muted-foreground); }
.inline-input { width: 100%; min-width: 8rem; font: inherit; padding: .2rem .3rem;
  border: 1px solid var(--primary); border-radius: 4px; background: #fff; color: var(--foreground); }
textarea.inline-input { resize: vertical; }
.osd-edit { font-weight: 600; color: var(--foreground); }
.osd-edit .inline-input { width: auto; min-width: 3rem; display: inline; padding: 0 .1rem; }

/* --- row operations --- */
.row-op { background: none; border: 1px solid var(--border); border-radius: 4px;
  font-size: .72rem; padding: .05rem .4rem; cursor: pointer; color: var(--muted-foreground); line-height: 1.4; }
.row-op:hover { border-color: var(--primary); color: var(--primary); }
.row-op.del { color: var(--risk-high); border-color: transparent; padding: 0 .3rem; }
.row-op.del:hover { border-color: var(--risk-high); background: var(--risk-high-bg); }
.cell-ops { margin-top: .35rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.table-ops { margin-top: .8rem; }

/* --- per-row gutter: hover-revealed add-above / add-below / delete, out of the way until wanted --- */
.col-gutter { width: 1%; white-space: nowrap; padding-left: .25rem; padding-right: .1rem; }
.row-gutter { display: inline-flex; flex-wrap: wrap; gap: .15rem; max-width: 2.6rem;
  opacity: 0; transition: opacity .1s ease; }
tr:hover .row-gutter, .row-gutter:focus-within { opacity: 1; }
.gutter-btn { padding: 0 .25rem; font-size: .68rem; line-height: 1.25; }

/* --- redline compare --- */
.compare-pick { margin: .75rem 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.compare-pick select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
del.diff-old { color: var(--risk-high-fg); background: var(--risk-high-bg); text-decoration: line-through; border-radius: 2px; padding: 0 .1rem; }
ins.diff-new { color: var(--risk-low-fg); background: var(--risk-low-bg); text-decoration: none; border-radius: 2px; padding: 0 .1rem; }
.diff-added { background: var(--risk-low-bg); color: var(--risk-low-fg); border-radius: 2px; padding: 0 .15rem; }
.diff-moved { display: inline-block; font-size: .68rem; font-weight: 700; margin-left: .35rem;
  color: var(--risk-med-fg); background: var(--risk-med-bg); border-radius: 999px; padding: 0 .4rem; }
.pfmea tr.row-added td { background: #F2FBF5; }
/* a removed / moved-out operation, struck through in place */
.pfmea tr.row-removed td { background: color-mix(in srgb, var(--risk-high) 6%, transparent); opacity: .75; }
.diff-removed { color: var(--risk-high-fg); text-decoration: line-through; font-size: .85rem; }

/* removed / moved-out section under a redline */
.departed { margin-top: var(--space-5); border-top: 1px solid var(--border-strong); padding-top: var(--space-3); }
.departed-head { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-foreground); font-weight: 700; margin: 0 0 var(--space-2); }
.departed-list { list-style: none; margin: 0; padding: 0; }
.departed-list li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .9rem; }
.departed-type { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted-foreground); min-width: 8.5rem; }
.departed-tag { font-size: .72rem; font-weight: 700; color: var(--risk-med-fg); background: var(--risk-med-bg);
  border-radius: 999px; padding: 0 .5rem; }
.departed-tag.removed { color: var(--risk-high-fg); background: var(--risk-high-bg); }
.diff-old-key { color: var(--risk-high-fg); background: var(--risk-high-bg); padding: 0 .25rem; border-radius: 2px; }
.diff-new-key { color: var(--risk-low-fg); background: var(--risk-low-bg); padding: 0 .25rem; border-radius: 2px; }

/* Reviewer annotations — attention flags (full-row fill) + comments. */
.annotate-count { font-size: var(--text-sm); font-weight: 700; color: var(--risk-med-fg);
  background: var(--risk-med-bg); border-radius: var(--radius-sm); padding: .25rem .6rem;
  display: inline-block; margin: 0 0 .5rem; }
/* Reviewer highlights. Cell + row tints must beat the row-hover fill (which is (0,2,2), and (0,3,2)
   in dark) — since right-click always leaves the pointer over the row — so author them at hover
   specificity and restate for dark, including the .just columns (which carry their own fill). */
.pfmea td.cell-attention,
.pfmea tbody tr:hover td.cell-attention, .pfmea tbody tr:hover td.just.cell-attention { background: var(--risk-med-bg); }
.pfmea td.cell-critical,
.pfmea tbody tr:hover td.cell-critical, .pfmea tbody tr:hover td.just.cell-critical { background: var(--risk-high-bg); }
.pfmea tr.row-attention > td, .pfmea tbody tr.row-attention:hover > td { background: var(--risk-med-bg); }
.pfmea tr.row-critical  > td, .pfmea tbody tr.row-critical:hover  > td { background: var(--risk-high-bg); }
[data-theme="dark"] .pfmea tbody tr:hover td.cell-attention,
[data-theme="dark"] .pfmea tbody tr:hover td.just.cell-attention,
[data-theme="dark"] .pfmea tbody tr.row-attention:hover > td { background: var(--risk-med-bg); }
[data-theme="dark"] .pfmea tbody tr:hover td.cell-critical,
[data-theme="dark"] .pfmea tbody tr:hover td.just.cell-critical,
[data-theme="dark"] .pfmea tbody tr.row-critical:hover > td { background: var(--risk-high-bg); }
/* A commented cell holds a clickable 💬 badge (added by the annotations controller) that opens the
   sidebar; selecting a comment flashes its cell. */
.pfmea td.cell-commented { position: relative; }
.comment-badge { position: absolute; top: 0; right: 1px; z-index: 1; padding: 0; border: 0;
  background: none; cursor: pointer; font-size: .62rem; line-height: 1; opacity: .85; }
.comment-badge:hover { opacity: 1; }
/* The cell of the comment currently open in the sidebar — a persistent box so it's obvious where it
   is. Inset shadow layers over any highlight tint and isn't clipped by the scroll container. */
.pfmea td.cell-active { box-shadow: inset 0 0 0 2px var(--primary); }
/* Cells being drag-selected for one comment (💬 mode) read the same box while you drag. */
.pfmea td.cell-selecting { box-shadow: inset 0 0 0 2px var(--primary); }

/* Right-click menu (reuses the popover shell) — positioned at the cursor (fixed = viewport coords). */
.annotate-popover { position: fixed; z-index: 60; background: var(--card);
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: .5rem;
  min-width: 13rem; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
[data-theme="dark"] .annotate-popover { box-shadow: 0 6px 20px rgba(0,0,0,.55); }
.annotate-menu { display: flex; flex-direction: column; gap: .4rem; }
.annotate-scope { display: flex; align-items: center; gap: .3rem; }
/* These `display` rules would otherwise beat the UA `[hidden]{display:none}` (author > UA), so the
   hidden attribute the JS toggles is ignored and the menu/dot never close. Restore hiding. */
.annotate-popover[hidden], .annotate-scope[hidden] { display: none; }
.annotate-label { font-size: var(--text-xs); color: var(--muted-foreground); width: 2.4rem; }
.annotate-swatch { font-size: .8rem; line-height: 1; padding: .15rem .4rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.annotate-swatch:hover { border-color: var(--primary); }
.annotate-actions { display: flex; gap: .4rem; }
.annotate-hint { margin-left: auto; }

/* "Mark up" header toolbar — an Excel-style fill palette: pick a color chip, then click cells. */
.markup-tools { display: inline-flex; align-items: center; gap: .25rem; margin-right: .3rem;
  padding-right: .45rem; border-right: 1px solid var(--border); }
.markup-icon { font-size: .95rem; line-height: 1; }
.hl-chip { width: 16px; height: 16px; padding: 0; cursor: pointer; border-radius: 3px;
  border: 1px solid var(--border-strong); }
.hl-amber { background: var(--risk-med-bg); border-color: var(--risk-med); }
.hl-red   { background: var(--risk-high-bg); border-color: var(--risk-high); }
.hl-none  { position: relative; background: var(--card); }
.hl-none::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent 44%, var(--risk-high) 45%, var(--risk-high) 55%, transparent 56%); }
.hl-chip:hover, .hl-comment:hover { border-color: var(--primary); }
.hl-chip.armed, .hl-comment.armed { box-shadow: 0 0 0 2px var(--primary); border-color: var(--primary); }
.hl-comment { font-size: .78rem; line-height: 1; padding: .1rem .3rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.markup-hint { font-size: var(--text-xs); color: var(--primary); font-weight: 600; margin-left: .15rem; white-space: nowrap; }
/* While a color is armed, cells read as paintable and don't text-select as you drag across them. */
body.markup-active .pfmea td[data-field] { cursor: crosshair; }
body.markup-active .pfmea { user-select: none; -webkit-user-select: none; }

/* --- Reviewer comments sidebar (right slide-out) --- */
.comments-handle { position: fixed; right: 0; top: 40%; z-index: 46; cursor: pointer;
  border: 1px solid var(--border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--card); color: var(--foreground); padding: .5rem .3rem; font-size: .8rem;
  writing-mode: vertical-rl; box-shadow: -2px 2px 8px rgba(0,0,0,.1); }
.comments-handle:hover { color: var(--primary); border-color: var(--primary); }
.comments-sidebar.open .comments-handle { display: none; }
.comments-panel { position: fixed; top: 0; right: 0; height: 100dvh; width: 340px; max-width: 90vw;
  z-index: 45; background: var(--card); border-left: 1px solid var(--border-strong);
  box-shadow: -6px 0 22px rgba(0,0,0,.14); transform: translateX(100%); transition: transform .18s ease;
  display: flex; flex-direction: column; padding: .8rem .85rem; overflow-y: auto; }
.comments-sidebar.open .comments-panel { transform: translateX(0); }
body.comments-open .wrap { padding-right: 360px; }
.comments-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.comments-close { border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--muted-foreground); }
.comments-close:hover { color: var(--primary); }
.comments-detail { border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem;
  margin-bottom: .6rem; background: var(--background); }
.comments-loc { font-size: var(--text-xs); font-weight: 600; color: var(--primary); margin-bottom: .3rem; }
.comments-body { width: 100%; font: inherit; font-size: var(--text-sm); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .4rem; resize: vertical; }
.comments-meta { font-size: var(--text-xs); margin-top: .3rem; }
.comments-actions { display: flex; gap: .4rem; margin-top: .45rem; }
.comments-delete { color: var(--risk-high); }
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.comment-item { border: 1px solid var(--border); border-radius: var(--radius); padding: .45rem .55rem; cursor: pointer; }
.comment-item:hover { border-color: var(--primary); }
.comment-item-head { display: flex; justify-content: space-between; gap: .5rem; }
.comment-loc { font-size: var(--text-xs); font-weight: 600; color: var(--primary); }
.comment-when { font-size: var(--text-xs); color: var(--muted-foreground); white-space: nowrap; }
.comment-snippet { font-size: var(--text-sm); margin-top: .2rem; white-space: pre-wrap; word-break: break-word; }
.comment-empty { padding: .5rem 0; }

/* Export chooser — clean sheet by default, opt-in annotation variants. */
.export-menu { position: relative; display: inline-block; }
.export-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu-pop { position: absolute; right: 0; z-index: 60; margin-top: .3rem; min-width: 14rem;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: .3rem; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.export-menu-pop a, .export-menu-pop button { display: block; width: 100%; text-align: left;
  padding: .35rem .5rem; border-radius: var(--radius-sm); font-size: var(--text-sm);
  color: var(--foreground); background: none; border: 0; cursor: pointer; }
.export-menu-pop a:hover, .export-menu-pop button:hover { background: var(--hover-bg); color: var(--primary); text-decoration: none; }
.map-export > summary { list-style: none; }  /* the ⤓ Export toolbar chip */

/* Wide-table zoom / fit-to-width + a clearly-visible horizontal scrollbar (dogfeedback).
   NOTE: keep .table-wrap / .scroll-x position:static — the annotation popover is positioned
   with page coordinates, so a positioned ancestor here would throw off its placement. */
.table-tools { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; flex-wrap: wrap; }
.table-tools .annotate-count { margin: 0; }
.zoom-tools { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; }
.zoom-tools .row-op { line-height: 1; padding: .1rem .4rem; }
.zoom-label { font-size: var(--text-sm); color: var(--muted-foreground); min-width: 3.2ch;
  text-align: center; font-variant-numeric: tabular-nums; }

/* In-document revision browsing (Polarion-style) — pick a revision, enter the document at
   that point. Quiet chrome, not an alarm banner: it reads as the document, at r{N}. */
.rev-viewing { color: var(--risk-med-fg); background: var(--risk-med-bg); padding: 0 .4rem;
  border-radius: var(--radius-sm); font-weight: 700; }
.rev-select { position: relative; display: inline-block; }
.rev-select > summary { list-style: none; cursor: pointer; }
.rev-select > summary::-webkit-details-marker { display: none; }
.rev-select-pop { position: absolute; right: 0; z-index: 60; margin-top: .3rem; min-width: 15rem;
  max-height: 22rem; overflow-y: auto; background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: .3rem; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.rev-opt { display: flex; gap: .5rem; align-items: baseline; padding: .35rem .5rem;
  border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--foreground); }
.rev-opt:hover { background: var(--hover-bg); color: var(--primary); text-decoration: none; }
.rev-opt.is-active { background: var(--hover-bg); font-weight: 700; }
.change-open { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }

/* A restore collapsed into one history entry. */
.change-restore { border-left: 3px solid var(--primary); padding-left: .6rem; }
.change-restore .change-item { color: var(--primary); font-weight: 700; }

/* Revision browser: the raw r-number is demoted to a small dim tag (relationship leads). */
.rev-opt { justify-content: space-between; }
.rev-opt .rev-num { margin-left: auto; font-size: var(--text-xs); }

/* Failed-procedure inline actions (line view): replace the doc or delete it. */
.fail-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.replace-form { display: inline-flex; align-items: center; gap: .4rem; }
.replace-form input[type="file"] { font-size: var(--text-sm); max-width: 16rem; }
.flash-undo { margin-left: .6rem; font-size: var(--text-sm); font-weight: 700; text-decoration: underline;
  background: none; border: 0; cursor: pointer; color: inherit; }

/* Optional MPI / Page columns (off by default; toggled via the Columns menu). */
.pfmea.hide-mpi .col-mpi { display: none; }
.pfmea.hide-page .col-page { display: none; }
.pfmea td.col-mpi, .pfmea td.col-page { white-space: nowrap; color: var(--muted-foreground); }
.cols-menu { position: relative; display: inline-block; }
.cols-menu > summary { list-style: none; cursor: pointer; }
.cols-menu > summary::-webkit-details-marker { display: none; }
.cols-menu-pop { position: absolute; right: 0; z-index: 60; margin-top: .3rem; min-width: 11rem;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: .4rem; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.cols-menu-pop label { display: flex; align-items: center; gap: .4rem; padding: .25rem .3rem;
  font-size: var(--text-sm); cursor: pointer; }

/* ── Process map — a procedure's operations as a risk-colored flowchart ─────────── */
.map-shell { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.map-toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: .4rem .6rem; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); position: sticky; top: 0; z-index: 30; }
.map-lens, .map-zoom { display: inline-flex; align-items: center; gap: .3rem; }
.map-lens-label { font-size: .82rem; color: var(--muted-foreground); margin-right: .1rem; }
.map-lens .row-op.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.map-legend { display: inline-flex; align-items: center; gap: .8rem; font-size: .78rem;
  color: var(--muted-foreground); }
.map-legend-item { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.map-legend .dot, .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
.dot.red { background: var(--risk-high); } .dot.amber { background: var(--risk-med); }
.dot.green { background: var(--risk-low); } .dot.none { background: var(--border-strong); }
.swatch-rework { display: inline-block; width: 1.1rem; height: 0; border-top: 2px dashed var(--risk-med); }
.map-hint { font-size: .8rem; }
.map-hint b { color: var(--primary); }

.map-canvas { position: relative; height: calc(100vh - 190px); min-height: 26rem; overflow: hidden;
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background-image: radial-gradient(var(--border-strong) .6px, transparent .6px);
  background-size: 22px 22px; cursor: grab; touch-action: none; }
.map-canvas:active { cursor: grabbing; }
.map-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.map-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.map-edge { fill: none; stroke: var(--border-strong); stroke-width: 2;
  transition: stroke .12s; }
.map-edge--guide { stroke: var(--primary); stroke-dasharray: 5 4; }
.map-edge--rework { stroke: var(--risk-med); stroke-dasharray: 6 4; }  /* a return / rework loop */
/* Fills the stage but never blocks node clicks / pan — only the × buttons are interactive. */
.map-edge-layer { position: absolute; inset: 0; pointer-events: none; }
.edge-del { position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  width: 1.15rem; height: 1.15rem; line-height: 1; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--muted-foreground);
  font-size: .9rem; cursor: pointer; opacity: 0; transition: opacity .12s; }
.map-canvas:hover .edge-del { opacity: .38; }        /* discoverable while the map is in focus */
.edge-del:hover { opacity: 1; color: var(--risk-high); border-color: var(--risk-high); }

.map-nodes { position: absolute; top: 0; left: 0; }
.op-node { position: absolute; box-sizing: border-box; display: flex; flex-direction: column;
  gap: .15rem; padding: .5rem .6rem; background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong); border-radius: var(--radius); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .12s, border-color .12s; }
.op-node:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); border-color: var(--primary); }
.op-node:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring), 0 4px 14px rgba(0,0,0,.14); }
/* Only draggable maps swallow touch on nodes — a read-only viewer must still scroll the page. */
.map-shell.is-editable .op-node { touch-action: none; }
.op-node.band-red    { border-left-color: var(--risk-high); }
.op-node.band-amber  { border-left-color: var(--risk-med); }
.op-node.band-green  { border-left-color: var(--risk-low); }
.op-node.band-none   { border-left-color: var(--border-strong); }
.op-node-label { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-foreground); }
.op-node-name { font-size: .9rem; font-weight: 600; line-height: 1.25; color: var(--foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op-node-risk { position: absolute; top: .4rem; right: .45rem; }
.op-node-risk .rpn-num { min-width: 1.9rem; font-size: .78rem; text-align: center; }
.op-node-handle { position: absolute; left: 50%; bottom: -.7rem; transform: translateX(-50%);
  width: 1.4rem; height: 1.4rem; line-height: 1; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--muted-foreground);
  font-size: 1rem; font-weight: 700; cursor: crosshair; opacity: 0; transition: opacity .12s;
  touch-action: none; z-index: 2; }
.op-node:hover .op-node-handle { opacity: 1; }
.op-node-handle:hover { color: #fff; background: var(--primary); border-color: var(--primary); }

/* Line map: high-level procedure boxes (one per MPI). */
.op-node-count { font-weight: 600; color: var(--muted-foreground); }
.op-node-state { display: block; margin-top: .15rem; font-size: .72rem; text-transform: capitalize; }
.view-toggle { display: inline-flex; gap: .25rem; }
.view-toggle .row-op.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Risk-flow highlighting — hover an op to trace its flow; critical path = worst-risk route. */
.map-crit-btn.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.op-node.is-dim { opacity: .28; filter: saturate(.6); }
.map-edge.is-dim { opacity: .18; }
.op-node.is-trace { box-shadow: 0 0 0 2px var(--primary), 0 4px 14px rgba(0,0,0,.14); }
.map-edge.is-trace { stroke: var(--primary); stroke-width: 2.5; }
.op-node.is-critical { box-shadow: 0 0 0 2px var(--risk-high), 0 6px 18px rgba(0,0,0,.16); }
.map-edge.is-critical { stroke: var(--risk-high); stroke-width: 3; }
.op-node { transition: box-shadow .12s, border-color .12s, opacity .12s, filter .12s; }

.map-popover { position: fixed; z-index: 80; min-width: 15rem; max-width: 20rem;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: .6rem .7rem; box-shadow: 0 8px 28px rgba(0,0,0,.16); font-size: .84rem; }
.map-pop-name { font-weight: 600; margin-bottom: .3rem; }
.map-pop-parts { color: var(--muted-foreground); font-size: .8rem; }
.map-pop-parts b { color: var(--foreground); font-weight: 600; }
.map-pop-fms { list-style: none; margin: .4rem 0 .2rem; padding: 0; display: flex;
  flex-direction: column; gap: .25rem; }
.map-pop-fms li { display: flex; align-items: center; gap: .4rem; }
.map-pop-fms .rpn-num { min-width: 1.9rem; font-size: .74rem; text-align: center; }
.map-pop-open { display: inline-block; margin-top: .4rem; font-weight: 600; }
.map-pop-wire { margin: .5rem 0 .2rem; padding-top: .45rem; border-top: 1px solid var(--border); }
.map-pop-wire label { display: block; font-size: .78rem; color: var(--muted-foreground); }
.map-pop-wire select { width: 100%; margin-top: .2rem; padding: .25rem; border: 1px solid var(--border);
  border-radius: 4px; background: var(--card); color: var(--foreground); }
.map-pop-links { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.map-pop-links li { display: flex; align-items: center; gap: .4rem; font-size: .82rem; }
.map-pop-links .rework-tag { font-style: normal; font-size: .68rem; color: var(--risk-med-fg);
  background: var(--risk-med-bg); padding: 0 .3rem; border-radius: 3px; }

/* ── Auth: sign-in page + account menu ─────────────────────────────────────── */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.auth-card { width: 100%; max-width: 22rem; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.auth-card h1 { font-size: var(--text-lg); margin: .2rem 0 var(--space-3); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-form label { display: flex; flex-direction: column; gap: .3rem; font-size: var(--text-sm); font-weight: 600; }
.auth-form input { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--foreground); font-size: 1rem; }
.auth-form .btn { margin-top: .2rem; }
.auth-error { background: var(--risk-high-bg); color: var(--risk-high-fg); padding: .5rem .6rem;
  border-radius: var(--radius); font-size: var(--text-sm); }
.auth-note { background: var(--risk-low-bg); color: var(--risk-low-fg); padding: .5rem .6rem;
  border-radius: var(--radius); font-size: var(--text-sm); }
.auth-foot { margin-top: var(--space-3); font-size: .82rem; }
.account-menu { position: fixed; bottom: 1rem; right: 4.2rem; z-index: 50; }
.account-menu > summary { list-style: none; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-chip { background: var(--card); border: 1px solid var(--border-strong); border-radius: 999px;
  padding: .3rem .7rem; font-size: .78rem; color: var(--muted-foreground); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.account-pop { position: absolute; bottom: 2.2rem; right: 0; min-width: 12rem; background: var(--card);
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.account-pop p { margin: 0 0 .4rem; font-size: .78rem; word-break: break-all; }

/* ── Marketing landing (spec 10) ───────────────────────────────────────────── */
.btn-lg { padding: .7rem 1.4rem; font-size: 1.02rem; }
.lp { --lp-max: 68rem; }
.lp .wrap { max-width: var(--lp-max); }
.lp-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 1.4rem; padding-bottom: 1.4rem; }
.lp-nav .brand { font-size: 1.15rem; }
.lp-nav nav { display: flex; gap: .6rem; align-items: center; }

.lp-hero { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.lp-hero-copy { max-width: 46rem; }
.lp-hero h1 { max-width: 20ch; }
.lp-eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; font-weight: 700;
  color: var(--primary); margin: 0 0 .6rem; }
.lp-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 var(--space-3); }
.lp-lede { font-size: 1.15rem; line-height: 1.5; color: var(--foreground); max-width: 34rem; }
.lp-cta-row { display: flex; gap: .6rem; margin: var(--space-4) 0 .8rem; flex-wrap: wrap; }
.lp-trustline { font-size: .78rem; }

/* Subtle vertical-rule grid behind the hero — engineering-paper texture, not decoration. */
.gridbg { background-image: linear-gradient(to right,
  color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px); background-size: 88px 100%; }

.lp-band { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: var(--space-6) 0; margin: var(--space-6) 0; }
.lp-section { padding: var(--space-6) 1.5rem; }
.lp-narrow { max-width: 44rem; }
.lp h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.01em; margin: 0 0 var(--space-3); }
.lp p { font-size: 1.02rem; line-height: 1.6; }

.lp-steps { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.lp-steps li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); font-size: .95rem; line-height: 1.5; }
.lp-step-n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem; margin-bottom: .5rem; }

.lp-quote p { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.45; font-weight: 500; max-width: 48rem; letter-spacing: -0.01em; }

/* Real product screenshot, framed in subtle app chrome. */
.lp-shot-wrap { padding-top: 0; }
.lp-shot { margin: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--card); box-shadow: 0 20px 50px -24px rgba(0,0,0,.28); }
.lp-shot-bar { display: flex; align-items: center; gap: 6px; padding: .55rem .8rem; background: var(--background);
  border-bottom: 1px solid var(--border); }
.lp-shot-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.lp-shot-bar em { margin-left: .6rem; font-style: normal; font-size: .74rem; color: var(--muted-foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lp-shot-img { display: block; width: 100%; height: auto; }
.lp-shot-cap { padding: .7rem .9rem 0; font-size: .82rem; margin: 0; }

/* Founder voice, up high. */
.lp-founder { display: flex; gap: var(--space-5); align-items: flex-start; }
.lp-founder-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border); }
.lp-founder-quote { font-size: 1.12rem; line-height: 1.5; letter-spacing: -0.005em; margin: 0; }
.lp-founder-name { margin: .8rem 0 0; font-size: .9rem; color: var(--muted-foreground); }

.lp-request { background: var(--hover-bg); }
.lp-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.lp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lp-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 600; }
.lp-form input, .lp-form textarea { padding: .55rem .65rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--card); color: var(--foreground); font: inherit; font-size: 1rem; }
.lp-form .btn { align-self: flex-start; margin-top: .3rem; }

.lp-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-5);
  padding-bottom: var(--space-6); border-top: 1px solid var(--border); margin-top: var(--space-6); }

@media (max-width: 820px) {
  .lp-steps, .lp-form-row { grid-template-columns: 1fr; }
  .lp-founder { flex-direction: column; gap: var(--space-3); }
}

/* ── Team / invitations / access-request triage ───────────────────────────── */
.team-page { max-width: 720px; margin: var(--space-8) auto; padding: 0 var(--space-4); }
.team-head { margin-bottom: var(--space-6); }
.team-head h1 { font-size: var(--text-2xl); margin: 0; }
.team-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); margin-bottom: var(--space-4);
}
.team-card h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.team-list li {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border);
}
.team-list li:last-child { border-bottom: 0; }
.team-email { font-weight: 600; }
.team-role {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-foreground); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
}
.invite-form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.invite-form input[type=email] { flex: 1 1 240px; }
.invite-row { flex-wrap: wrap; }
.invite-link {
  flex: 1 1 260px; font-size: var(--text-xs); color: var(--muted-foreground);
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
.row-op.danger { color: var(--danger); }
.request-row { align-items: flex-start; justify-content: space-between; }
.request-who { display: flex; flex-direction: column; gap: 2px; }
.request-note { margin: var(--space-1) 0 0; font-style: italic; color: var(--muted-foreground); }
.request-actions { display: flex; gap: var(--space-2); align-items: center; }

/* ── Landing: "Anatomy of an operation" — the interactive reasoning chain ──────
   Ported from the original Op by Op landing; retokenized so it adapts to dark mode. */
.lp .tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px 2px; border: 1px solid var(--border-strong); background: transparent;
  color: var(--muted-foreground); border-radius: 2px; line-height: 1.4; }
.lp .tag.accent { color: var(--primary); border-color: var(--primary); }
.lp .tag.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }

.anatomy { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--background); margin-top: var(--space-5); }
.op-header { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-strong); background: var(--card); }
.op-header .op-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem; color: var(--muted-foreground); letter-spacing: .05em; margin-bottom: 4px; }
.op-header .op-name { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; }
.op-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.op-chain { border-bottom: 1px solid var(--border-strong); }
.chain { display: grid; grid-template-columns: repeat(5, 1fr); }
.chain-cell { position: relative; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: var(--space-4); background: var(--background); border: 0; border-right: 1px solid var(--border);
  min-height: 128px; display: flex; flex-direction: column; gap: 6px; transition: background .15s ease; }
.chain-cell:last-child { border-right: 0; }
.chain-cell:hover { background: var(--hover-bg); }
.chain-cell[data-on="1"] { background: var(--card); box-shadow: inset 0 -3px 0 var(--primary); }
.chain-cell:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.chain-cell .step-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem; letter-spacing: .06em; color: var(--muted-foreground); text-transform: uppercase; }
.chain-cell .step-name { font-weight: 600; font-size: .9rem; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--foreground); }
.chain-cell .arrow-r { position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--foreground); }
.chain-cell:last-child .arrow-r { display: none; }

.op-detail { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--card); }
.op-rationale { padding: var(--space-5) var(--space-5) var(--space-6); border-right: 1px solid var(--border); }
.op-rationale h4, .op-ruled h4 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem; color: var(--muted-foreground); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }
.op-rationale .r-headline { font-size: 1.08rem; font-weight: 600; line-height: 1.35; margin-bottom: 14px; letter-spacing: -0.005em; }
.op-rationale .r-body { font-size: .92rem; line-height: 1.55; color: color-mix(in srgb, var(--foreground) 82%, var(--background)); }
.op-rationale .r-quote { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; color: var(--muted-foreground); padding: 12px 14px; background: var(--background);
  border-left: 2px solid var(--primary); margin-top: 18px; line-height: 1.5; text-wrap: pretty; }
.op-ruled { padding: var(--space-5) var(--space-5) var(--space-6); background: var(--background); }
.ruled-item { border-top: 1px solid var(--border); padding: 13px 0; display: flex; flex-direction: column; gap: 6px; }
.ruled-item:first-of-type { border-top: 0; padding-top: 0; }
.ruled-item .r-name { font-size: .9rem; font-weight: 600; letter-spacing: -0.005em; color: var(--foreground);
  display: flex; align-items: center; gap: 8px; }
.ruled-item .r-name .strike { flex: 1; height: 1px; background: var(--border-strong); margin: 0 4px; }
.ruled-item .r-reason { font-size: .84rem; line-height: 1.5; color: var(--muted-foreground); }

@media (max-width: 880px) {
  .chain { grid-template-columns: 1fr; }
  .chain-cell { border-right: 0; border-bottom: 1px solid var(--border); min-height: auto; }
  .chain-cell:last-child { border-bottom: 0; }
  .chain-cell .arrow-r { display: none; }
  .op-detail { grid-template-columns: 1fr; }
  .op-rationale { border-right: 0; border-bottom: 1px solid var(--border); }
  .op-header { grid-template-columns: 1fr; }
  .op-meta { justify-content: flex-start; }
}

/* ── Legal pages (privacy, DPA) ───────────────────────────────────────────── */
.legal { padding: var(--space-6) 0 var(--space-8); }
.legal .brand { margin-bottom: var(--space-5); }
.legal h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.legal h2 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal li { line-height: 1.6; color: var(--foreground); }
.legal ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.legal a { color: var(--primary); }
.legal-foot { margin-top: var(--space-6); border-top: 1px solid var(--border); padding-top: var(--space-4); }