@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,500;0,600;1,500&display=swap');
:root{
  --font-sans:'Inter',system-ui,sans-serif;
  --font-serif:'Newsreader',Georgia,serif;
  --bg:oklch(97.3% 0.011 75);--bg-elevated:oklch(99% 0.006 75);--bg-hover:oklch(94.5% 0.014 70);
  --text:oklch(24% 0.02 50);--text-muted:oklch(48% 0.018 50);--text-faint:oklch(63% 0.014 55);
  --border:oklch(87% 0.014 60);--border-strong:oklch(78% 0.016 60);
  --accent:oklch(56% 0.14 35);--accent-strong:oklch(46% 0.15 35);--accent-bg:oklch(93% 0.035 40);--accent-ink:oklch(99% 0.006 75);
  --info:oklch(55% 0.12 230);--info-bg:oklch(94% 0.025 230);
  --color-error:oklch(54% 0.16 25);--color-error-bg:oklch(94% 0.03 25);
  --color-warning:oklch(58% 0.13 75);--color-warning-bg:oklch(94% 0.045 80);
  --color-success:oklch(53% 0.11 150);--color-success-bg:oklch(94% 0.03 150);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:56px;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;
  --text-xs:0.75rem;--text-sm:0.8125rem;--text-base:0.9375rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-2xl:1.875rem;
  --shadow-sm:0 1px 2px oklch(30% 0.02 50 / 0.06),0 1px 1px oklch(30% 0.02 50 / 0.04);
  --shadow-md:0 4px 16px oklch(30% 0.02 50 / 0.08),0 1px 2px oklch(30% 0.02 50 / 0.05);
  --ease:cubic-bezier(.2,.7,.3,1);--dur:150ms;--sidebar-w:240px;
}
:root[data-theme="dark"]{
  --bg:oklch(20.5% 0.014 50);--bg-elevated:oklch(25% 0.016 50);--bg-hover:oklch(29% 0.018 50);
  --text:oklch(93% 0.008 60);--text-muted:oklch(68% 0.012 60);--text-faint:oklch(52% 0.014 55);
  --border:oklch(34% 0.018 50);--border-strong:oklch(42% 0.02 50);
  --accent:oklch(72% 0.13 40);--accent-strong:oklch(80% 0.12 40);--accent-bg:oklch(30% 0.05 40);--accent-ink:oklch(15% 0.01 50);
  --info:oklch(72% 0.11 230);--info-bg:oklch(28% 0.035 230);
  --color-error:oklch(70% 0.15 25);--color-error-bg:oklch(28% 0.05 25);
  --color-warning:oklch(75% 0.12 80);--color-warning-bg:oklch(28% 0.05 80);
  --color-success:oklch(68% 0.1 150);--color-success-bg:oklch(26% 0.04 150);
  --shadow-sm:0 1px 2px oklch(0% 0 0 / 0.3);--shadow-md:0 4px 20px oklch(0% 0 0 / 0.4);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);font-size:var(--text-base);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong);text-decoration:underline}
h1,h2,h3,h4{font-weight:600;margin:0 0 var(--space-3);color:var(--text)}
h1{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:var(--text-2xl);letter-spacing:-0.01em}
.h1-agent{color:var(--text-muted);font-style:normal;font-weight:400}
h2{font-size:var(--text-lg);border-bottom:1px solid var(--border);padding-bottom:var(--space-2);margin-top:var(--space-6)}
h3{font-size:1rem}
h4{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:var(--space-1)}
.muted{color:var(--text-muted)}
/* R-6: visible to screen readers, not on screen. Carries the <caption> of every action table and
   any label a sighted user reads from context. Not 'display:none' and not 'visibility:hidden' --
   both remove the node from the accessibility tree, which is the opposite of the point. */
.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}
.label{font-size:var(--text-xs);color:var(--text-faint);margin:var(--space-4) 0 var(--space-2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
body.doc-page{max-width:800px;margin:var(--space-6) auto;padding:0 var(--space-4) var(--space-8)}
/* Grid (not padding-left on a position:fixed sidebar) so the layout is driven by normal in-flow
   reflow -- a fixed-position element sized with vh/dvh can desync from the real viewport after a
   window resize/zoom animation (macOS drag-resize in particular) until something forces a
   relayout; a grid track has no such caching path, it's recomputed every layout pass. */
/* minmax(0,1fr), not a bare 1fr -- a bare 1fr track has an implicit min size of "auto" (the
   content's max-content width), so any wide un-wrapping child (e.g. a table on the Settings
   page) forces the whole track -- and the whole page -- wider than the viewport instead of
   scrolling internally within that one element. minmax(0,1fr) lets the track shrink to the
   available space and pushes any overflow back down to .table-scroll's own overflow-x:auto. */
body:has(app-sidebar){display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--dur) var(--ease)}
.app-main{padding:var(--space-6) var(--space-6) var(--space-8)}
body.wizard-page{max-width:900px;margin:0 auto;padding:var(--space-5) var(--space-5) 0;height:100vh;height:100dvh;display:flex;flex-direction:column;box-sizing:border-box}
body.wizard-page h1{flex:none;margin-top:0}
body.wizard-page .breadcrumb,body.wizard-page .wizard-subtitle{flex:none}
body.wizard-page>form{display:flex;flex-direction:column;flex:1;min-height:0}
/* The wizard steps render WITH the sidebar (design/mocks/wizard-*.html show an Onboarding nav
   group), so body carries both .wizard-page and (via :has(app-sidebar)) the grid layout above --
   two selectors of equal class-level specificity, and .wizard-page's plain display:flex (a
   single-class selector) would otherwise beat body:has(app-sidebar) (two type selectors) by
   CSS specificity regardless of source order, silently stacking the sidebar above the content
   instead of beside it. This rule's extra :has(app-sidebar) clause outweighs that and re-asserts
   the grid; the wizard's own flex-column/max-width/height behavior moves from body onto
   .app-main (the grid's second track) instead, since body itself must stay a plain grid box. */
body.wizard-page:has(app-sidebar){display:grid;max-width:none;margin:0;padding:0;height:auto;min-height:100vh;min-height:100dvh}
body.wizard-page:has(app-sidebar) .app-main{padding:var(--space-6) var(--space-6) var(--space-8);height:100%;display:flex;flex-direction:column;box-sizing:border-box;min-width:0}
body.wizard-page:has(app-sidebar) .app-main h1{flex:none;margin-top:0}
body.wizard-page:has(app-sidebar) .app-main .breadcrumb,body.wizard-page:has(app-sidebar) .app-main .wizard-subtitle{flex:none}
body.wizard-page:has(app-sidebar) .app-main>form{display:flex;flex-direction:column;flex:1;min-height:0}
.wizard-subtitle{margin:0 0 var(--space-4);color:var(--text-muted)}
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}
.card.primary{border-color:var(--accent);background:var(--accent-bg)}
.card.border-error{border-color:var(--color-error);background:var(--color-error-bg)}
.card.border-warning{border-color:var(--color-warning);background:var(--color-warning-bg)}
.card-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.card-row .card{flex:1;min-width:14rem;margin-bottom:0}
.error,.warning,.notice{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-4)}
.error{border-color:var(--color-error);background:var(--color-error-bg)}
.warning{border-color:var(--color-warning);background:var(--color-warning-bg)}
.text-error{color:var(--color-error)}
.text-warning{color:var(--color-warning)}
.text-success{color:var(--color-success)}
.over{color:var(--color-error);font-weight:600}
.badge{background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:1px var(--space-2);font-size:var(--text-xs);font-weight:600;vertical-align:middle}
.lane-badge{background:var(--bg-hover);color:var(--text-muted);border-radius:10px;padding:1px var(--space-2);font-size:var(--text-xs);font-weight:500}
.spinner{display:inline-block;width:.9em;height:.9em;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;vertical-align:-.15em;margin-right:var(--space-2)}
@keyframes spin{to{transform:rotate(360deg)}}
label{display:block;margin:var(--space-2) 0;font-size:var(--text-sm)}
/* R-14 spacing scale for forms: three values, not one more. 6px label->field, 8px field->the
   button that validates it (they are one group), 16px between two fields or two groups.
   flex-direction:column, never 'display:block' with an inline <input>: in
   '<label style="display:block">Text<input></label>' the input stays inline, so it lands after
   the label's text separated by a whitespace node and a margin-top can only push it down, never
   align it. That is what produced the field floating to the right of its label on Settings.
   The label margin is zeroed inside these wrappers so it cannot add to the gap. */
.field{display:flex;flex-direction:column;gap:6px}
.field-group{display:flex;flex-direction:column;gap:8px}
.field>label,.field-group>label{display:block;margin:0}
.field+.field,.field+.field-group,.field-group+.field,.field-group+.field-group{margin-top:var(--space-4)}
/* SET-10: a named group of fields introduced by what it is for. The heading and its sentence sit
   tighter to the fields they govern than to whatever came before. */
.field-group>h4{margin:0;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.field-group>h4+p{margin:0 0 var(--space-2)}
input[type=text],input[type=password],input[type=search],input[type=date],input[type=time],input[type=number],input[type=datetime-local],textarea,select{
  font-family:inherit;font-size:var(--text-sm);padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);width:100%;box-sizing:border-box;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)
}
/* R-13 field system, compact size: same font-size as the normal field above, tighter box. For
   dense settings rows and table cells. The normal size is already the shared rule above and
   covers every input type plus select and textarea, so no field falls back to browser chrome. */
input.input-compact,select.input-compact,textarea.input-compact{padding:6px 10px}
/* Pre-existing 4px/8px scale on the dense number-input rows (and on .action-row's select, below).
   It is the THIRD field scale R-13 removes, but the fix is not a blind restyle from here:
   .action-row's grid track is a fixed 6.5rem, so widening the box without seeing the Behavior
   page can overflow the column. Migrate these to .input-compact in the Behavior/Settings lot,
   then delete this rule and the two .action-row overrides further down. */
.action-row input[type=number],.range-pair input[type=number],.ramp-table input[type=number]{width:4.5rem;padding:4px 8px;font-size:var(--text-base)}
/* The rule above narrows the NUMBER inputs in a .range-pair but never the time ones, which kept the
   base width:100%. That was invisible while Active hours sat in a full-width block label, and broke
   the moment the schedule fields moved into .field-grid: at 100% of the flex line each input claims
   the whole row, so the pair wrapped to three lines (start / en dash / end) and stopped lining up
   with the Timezone select beside it. auto lets a time input take its intrinsic width. */
.range-pair input[type=time]{width:auto}
input[type=checkbox],input[type=radio]{width:auto;flex:none;accent-color:var(--accent);margin:0 var(--space-2) 0 0;vertical-align:-2px;cursor:pointer}
label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:flex;align-items:center;gap:0;cursor:pointer}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:hover,textarea:hover,select:hover{border-color:var(--border-strong)}
textarea{min-height:4rem;resize:vertical}
/* Short identity fields sit side by side when there is room and stack when there is not. The
   column count follows the CONTAINER's width via auto-fit, not a media/container breakpoint, so
   the same class serves the full-width Voice page (3 across) and the wizard's half-width pane
   (2 across) without either being tuned for. */
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--space-3);align-items:end;margin:var(--space-2) 0}
.field-grid>label{margin:0}
fieldset{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);margin:var(--space-4) 0}
legend{font-weight:600;padding:0 var(--space-2)}
details{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-4);background:var(--bg-elevated)}
summary{cursor:pointer;font-weight:600}
details p{margin:var(--space-2) 0}
details.advanced{border:none;border-top:1px dashed var(--border);border-radius:0;padding:var(--space-1) 0 0;margin-top:var(--space-3);background:none}
details.advanced>summary{font-size:var(--text-sm);color:var(--text-muted);font-weight:500;padding:var(--space-2) 0}
.summary-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3);font-size:var(--text-sm)}
.fork-status-row{display:flex;align-items:baseline;gap:var(--space-1);flex-wrap:wrap}
.fork-status-row p{margin:0}
/* Flex, not grid: a fixed three-column grid needed a breakpoint to escape from in the wizard's
   narrow pane, and that breakpoint was always on there, stacking every row into three lines with
   a full-width select. Wrapping now happens per row, exactly when the content stops fitting.
   `min-width:8rem` on the label is what still aligns the selects down the card -- the only thing
   the grid was buying. */
.action-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin:var(--space-3) 0}
.action-row select,.action-row input[type=number]{padding:4px 8px}
.action-row select{width:auto;min-width:6.5rem;padding:4px 8px}
.action-row select,.action-row input,.action-row{font-size:var(--text-base)}
.action-row h3{margin-bottom:0}
.action-label{flex:0 0 auto;min-width:8rem;font-weight:600;font-size:var(--text-base);padding-left:var(--space-2)}
.range-pair{display:inline-flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;min-width:0}
.archetype-row{display:grid;grid-template-columns:10rem 1fr 2rem;align-items:center;gap:var(--space-2);margin:var(--space-2) 0}
.archetype-row input[type=range]{width:100%;accent-color:var(--accent)}
.archetype-sources{margin:0 0 var(--space-3) 10rem;font-size:var(--text-sm)}
.cadence-pair input:invalid{border-color:var(--color-error);outline-color:var(--color-error)}
button{font-family:inherit;font-size:var(--text-sm);font-weight:600;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;margin-right:var(--space-2);transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
button:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
button:active{transform:translateY(1px)}
/* R-7 button system: 4 roles x 2 sizes, defined here once and nowhere else. The unclassed
   'button' above IS the primary role (one per context). Roles: primary (above), secondary,
   tertiary/ghost, danger (btn-danger, further down next to its hover).
   .btn-outline is the accent-outline secondary R-7 deletes: it competed visually with the
   primary. It is NOT removed as a selector yet -- ~40 renderer call sites still emit it, and
   deleting the class would silently promote every one of them to a primary (two primaries per
   context, the exact problem R-7 fixes). Instead it shares the neutral secondary definition
   from here on, which is the role R-7 assigns to all of its current users (Reject, Refine,
   Skip, Didn't post, Discard, Pause all). Rename the call sites in the page lots, then drop
   this selector. */
button.btn-secondary,button.btn-outline{background:var(--bg-elevated);color:var(--text);border-color:var(--border-strong)}
/* Tertiary (ghost): low-stakes row actions inside tables (Reject, Remove). Transparent BORDER,
   not 'border:none' -- a borderless button is 2px shorter than its siblings and breaks the
   baseline of a .btn-row that mixes roles. */
button.btn-tertiary{background:transparent;color:var(--text-muted);border-color:transparent}
button.btn-tertiary:hover{background:var(--bg-hover);color:var(--text);border-color:transparent}
/* The compact size: same font-size as the default, tighter box. Tables and dense action bars. */
button.btn-compact{padding:6px 12px}
/* REV-05: a navigation row, not a text link. Full-width click target, normal text colour (this is
   a task list, not a paragraph of links), 1px separator between rows, count/chip/chevron right.
   Reused by any card that lists destinations. */
.row-list{display:flex;flex-direction:column}
.row-list>.row-link+.row-link{border-top:1px solid var(--border)}
.row-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-2);color:var(--text);text-decoration:none;border-radius:var(--radius-sm)}
.row-link:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
.row-label{flex:1;min-width:0;font-weight:500}
.row-meta{display:flex;align-items:center;gap:var(--space-2);flex:none;color:var(--text-muted);font-size:var(--text-sm)}
.row-count{font-weight:600;color:var(--text)}
.row-chevron{color:var(--text-faint);font-size:1.1rem;line-height:1}
/* R-5: the confirmation of an action that just removed its own card from the screen. Bottom of the
   viewport, above everything, gone on its own after a few seconds. There is no undo (decided), so
   it confirms rather than offering anything: it never needs to be clicked and never takes focus. */
.toast-stack{position:fixed;left:50%;bottom:var(--space-5);transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:var(--space-2);align-items:center;pointer-events:none}
.toast{background:var(--text);color:var(--bg-elevated);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;box-shadow:0 6px 20px rgba(0,0,0,.18);max-width:min(90vw,28rem);text-align:center;animation:toast-in .18s cubic-bezier(.2,.7,.3,1)}
.toast.leaving{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.toast.leaving{transition:none}}
/* A <details> summary is a toggle, but its label never was: once open, "Ask for changes" sat above
   "Send back to the agent" looking like a second, duplicate submit -- while actually being Cancel.
   So the opener steps aside once it has opened, and a real Cancel sits next to the submit it
   cancels, where the eye already is.
   Gated on .has-close, which row-actions.js sets: without it the summary must stay, since it would
   otherwise be the only way to close the reveal and nothing else could. */
.ask-changes.has-close[open]>summary{display:none}
/* R-5: a card on its way out. The height collapse is what keeps the cards below from jumping. */
.r5-leaving{opacity:0;transform:scale(.99);transition:opacity .16s ease,transform .16s ease}
/* The bulk form carries .inline, whose explicit display beats the UA's [hidden]{display:none} --
   so hiding it once the list empties (FOL-08) needs a selector that outranks a class. */
[data-r5-bulk][hidden],[data-r5-body][hidden],[data-r5-empty][hidden]{display:none}
@media (prefers-reduced-motion:reduce){.r5-leaving{transition:none}}
/* Item 15: "Ask for changes" fires a SYNCHRONOUS LLM rewrite, so several seconds pass with the old
   draft still fully legible and every button still inviting a click. The card goes inert and its
   draft becomes a skeleton until the server's own re-render replaces it. Nothing here is rendered
   client-side -- see ROW_ACTIONS_JS's header: this is a state the stylesheet already knows how to
   draw, and row-actions.js only adds the class. pointer-events:none is a visual guard, not a
   security one; the server still owns whether a second decision is accepted. */
.is-rewriting{opacity:.55}
.is-rewriting button,.is-rewriting summary{pointer-events:none}
.rewriting-note{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-2) 0 0;color:var(--text-muted);font-size:var(--text-sm)}
/* Same trap as [data-r5-bulk][hidden] above: an explicit display on a class beats the UA's
   [hidden]{display:none}, so the server-rendered hidden attribute would be ignored and the note
   would sit on EVERY idle card announcing a rewrite that is not happening. Caught by looking at
   the page, not by the tests -- the markup they assert is correct, the stylesheet overrode it. */
.rewriting-note[hidden]{display:none}
.is-rewriting [data-rewrite-skeleton] p{color:transparent;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-hover) 25%,var(--bg) 50%,var(--bg-hover) 75%);background-size:200% 100%;animation:skeleton 1.2s ease-in-out infinite}
@keyframes skeleton{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.is-rewriting [data-rewrite-skeleton] p{animation:none}}
/* SET-13: a subtitle belongs to what it announces, so it sits further from what precedes it than
   from what follows. Undeclared margins had these h4s collapsing against the block above instead. */
.usage-subhead{margin:var(--space-5) 0 var(--space-2)}
/* SET-13: the two purpose disclosures stacked with no separator and no visible click target. Same
   row pattern as Review: a full-width line with a rule between rows. */
.usage-rows>.usage-row{border-top:1px solid var(--border)}
.usage-rows>.usage-row:last-child{border-bottom:1px solid var(--border)}
.usage-row>summary{padding:var(--space-3) 0;cursor:pointer}
.usage-row>summary:hover{color:var(--text)}
/* SET-01: the attention list was the last <ul> in the app on browser defaults -- disc bullets, a
   40px indent, and no gap, which ran three multi-line warnings into one block of text. Each item
   is a stacked row: severity and text, then its link on the line below where the eye finds it. */
.attention-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.attention-list>li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1)}
/* REV-03: urgency is a chip on the row it concerns, never a header-wide red sentence. */
.chip{display:inline-block;padding:1px var(--space-2);border-radius:10px;font-size:var(--text-xs);font-weight:600;border:1px solid var(--border)}
.chip-urgent{color:var(--color-error);border-color:var(--color-error);background:var(--color-error-bg)}
/* OUT-10 / OUT-11: the two blocks of a Review card are labelled and rendered as post cartridges,
   so "what they said" and "what we drafted" are told apart by something other than a grey border.
   The one that is OURS is the contrasted one. */
.post-block{margin-bottom:var(--space-4)}
.post-block-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--text-muted);margin-bottom:var(--space-1)}
.post-cartridge{display:block;border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3);background:var(--bg);color:var(--text);text-decoration:none}
a.post-cartridge:hover{background:var(--bg-hover);color:var(--text);text-decoration:none;border-color:var(--border-strong)}
.post-cartridge-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2);font-size:var(--text-sm)}
.post-handle{font-weight:600}
.post-cartridge-ours{background:var(--bg-elevated);border-left:2px solid var(--accent)}
/* OUT-07: the two numbered steps of a reply/quote card. Step 1 is where the weight sits. */
.step-panel{display:flex;flex-direction:column;gap:var(--space-4);border-top:1px solid var(--border);padding-top:var(--space-4)}
.step-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--bg-hover);color:var(--text-muted);font-size:var(--text-xs);font-weight:700;flex:none}
/* R-2: "Ask for changes" is an action, so its trigger is a real button, not an accent <summary>. */
details.ask-changes{border:none;background:none;padding:0;margin:var(--space-2) 0 0}
details.ask-changes>summary{display:inline-block;font-family:inherit;font-size:var(--text-sm);font-weight:600;padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-elevated);color:var(--text);cursor:pointer;list-style:none}
details.ask-changes>summary::-webkit-details-marker{display:none}
details.ask-changes>summary::marker{content:""}
details.ask-changes>summary:hover{background:var(--bg-hover)}
/* OUT-07 wants the four step-1 controls on ONE row, the reveal included. As a flex item the
   <summary> sits inline as the third control, in the order the decision specifies. Once OPEN it
   also takes order:99, so it moves to the end of the row before claiming a full-width line: with
   flex-basis alone it kept its DOM position and shoved Reject down past the revealed textarea, so
   a button unrelated to the reveal jumped every time you opened it. */
details.ask-changes-inline{margin:0}
.btn-row>details.ask-changes-inline[open]{flex-basis:100%;order:99}
/* AGT-08: an agent card is one click target for one agent, with the hover and chevron the Review
   rows established. Flex rather than the old fixed 12rem/1fr/12rem grid, whose columns truncated
   the moment a name or a topic list ran long. */
.agent-list{display:flex;flex-direction:column;gap:var(--space-3)}
.agent-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);color:var(--text);text-decoration:none}
.agent-card:hover{background:var(--bg-hover);color:var(--text);text-decoration:none;border-color:var(--border-strong)}
/* AGT-04: the label stays precise, only the colour groups -- four levels, not four vocabularies. */
.chip-ok{color:var(--color-success);border-color:var(--color-success);background:var(--color-success-bg)}
.chip-attention{color:var(--color-warning);border-color:var(--color-warning);background:var(--color-warning-bg)}
.chip-blocked{color:var(--color-error);border-color:var(--color-error);background:var(--color-error-bg)}
.chip-neutral{color:var(--text-muted)}
/* REV-06 / TWE-06 / FOL empty states: centred in the content area, with a way out. */
.empty-state{text-align:center;padding:var(--space-8) var(--space-4)}
.empty-state h2{border:none;margin:0 0 var(--space-2);padding:0}
.empty-state p{margin:0 0 var(--space-3)}
.btn-row{display:flex;gap:var(--space-2);align-items:center}
.card-head{display:grid;grid-template-columns:16rem 1fr;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-3)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.page-head h1{margin-bottom:0}
.status-band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-5);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);font-size:var(--text-base);line-height:1.5}
.status-band .band-actions{margin-left:auto}
/* R-7: was a third button scale (4px 12px). Folded onto the compact size so the app has exactly
   two. Once the agent-page lot emits class="btn-compact" here, this override goes away. */
.status-band button{padding:6px 12px}
.confirm-destructive{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.confirm-destructive label{display:flex;align-items:center;gap:var(--space-2);margin:0;font-size:var(--text-sm);white-space:nowrap}
.confirm-destructive code{background:var(--bg-subtle,rgba(0,0,0,.05));padding:1px 5px;border-radius:3px;font-size:.95em}
button.btn-danger{background:transparent;color:var(--color-error);border-color:var(--color-error)}
button.btn-danger:hover:not(:disabled){background:var(--color-error);color:var(--accent-ink);border-color:var(--color-error)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.card-head h3{margin-bottom:0}
.unit{margin-left:4px;color:var(--text-muted);font-size:var(--text-base)}
button.btn-secondary:hover,button.btn-outline:hover{background:var(--bg-hover);border-color:var(--border-strong)}
form.inline{display:inline;margin:0}
table{border-collapse:collapse;width:100%}
section{max-height:2000px;overflow:hidden;transition:max-height var(--dur) var(--ease);margin-bottom:var(--space-4)}
section.collapsed{max-height:80px}
section.collapsed .card{display:none}
th{color:var(--text-muted);font-weight:600;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.03em;text-align:left}
table.plain th,table.plain td{padding:var(--space-1) var(--space-2)}
tbody tr:hover{background:var(--bg-hover)}
.table-scroll,.ramp-table-wrap{overflow-x:auto;margin:var(--space-3) 0;border-radius:var(--radius-sm)}
.table-scroll table{table-layout:auto}
.table-scroll td.text-cell,.table-scroll th.text-cell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-scroll td:not(.text-cell),.table-scroll th:not(.text-cell){white-space:nowrap}
.ramp-table{border-collapse:collapse;white-space:nowrap}
.ramp-table th,.ramp-table td{padding:var(--space-1) var(--space-2);text-align:left;border-bottom:1px solid var(--border)}
.breadcrumb{margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}
.breadcrumb a{margin-right:var(--space-2)}
.breadcrumb .current{font-weight:600;margin-right:var(--space-2);color:var(--text)}
.fork-nav{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-2) 0 var(--space-4);font-size:var(--text-sm)}
.fork-start-over{cursor:pointer;color:var(--accent)}
.fork-breadcrumb .current{font-weight:600;color:var(--text)}
.fork-breadcrumb .sep{color:var(--text-faint);margin:0 var(--space-1)}
.wizard-nav-bar{position:fixed;left:0;right:0;bottom:0;background:var(--bg-elevated);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);box-shadow:0 -2px 12px oklch(30% 0.02 50 / 0.08);display:flex;gap:var(--space-2);justify-content:center;z-index:20}
body:has(app-sidebar) .wizard-nav-bar{left:var(--sidebar-w);transition:left var(--dur) var(--ease)}
.brainstorm-layout,.signup-layout{display:flex;gap:var(--space-4);flex:1;min-height:0}
.brainstorm-chat,.brainstorm-fields,.signup-chat,.signup-fields{flex:1;min-width:0;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);background:var(--bg-elevated)}
/* .card-head (policyRender.ts's cards, embedded here as the wizard's "Behavior" fieldset) uses a
   fixed 16rem first column sized for the full-width standalone Behavior page; halved into this
   side-by-side pane it eats nearly the whole width and doesn't reflow like the rest of the form.
   container-type here + the @container rule below make it fall back to a single stacked column
   once the PANE itself (not the viewport) gets narrow -- scoped to these two panes only so the
   standalone Behavior page is unaffected. `.action-row` used to be listed here too; it is a
   wrapping flex row now and reflows on its own, at the width where it actually stops fitting. */
.brainstorm-fields,.signup-fields{container-type:inline-size}
@container (max-width: 600px){
  .brainstorm-fields .card-head,.signup-fields .card-head{grid-template-columns:1fr}
}
.brainstorm-transcript{overflow-y:auto;flex:1;margin-bottom:var(--space-3)}
.signup-keywords{margin:var(--space-2) 0 0;font-size:var(--text-sm)}
.signup-identity p{margin:var(--space-1) 0}