/* Interview and brief share the existing local fonts, themes, and controls. */
.flow-shell { min-height:100vh; color:var(--text); background:var(--bg); }
.flow-bar { display:flex; align-items:center; gap:24px; min-height:76px; padding:16px 36px; border-bottom:1px solid var(--line); }
.flow-bar .brand { border:0; background:none; color:var(--text); cursor:pointer; padding:0; text-decoration:none; font-weight:600; }
.flow-bar > span.crumb-current { color:var(--muted); font-size:12px; }
.flow-bar > div { margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; }
.crumbs { display:flex; align-items:center; gap:8px; min-width:0; }
.crumb-folder { display:flex; align-items:center; gap:8px; min-width:0; }
.crumb { border:0; background:none; padding:0; color:var(--muted); font-size:12px; cursor:pointer; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.crumb:hover { color:var(--text); }
.crumb:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
.crumb-sep { color:var(--faint); font-size:12px; user-select:none; }
.crumb-current { color:var(--text-soft); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
@media (max-width:640px) { .crumb-folder { display:none; } .crumb { max-width:120px; } }
.interview-main { width:var(--site-width); margin:0 auto; padding:48px 0 64px; }
.flow-heading { margin:20px 0 32px; }
.flow-heading h1 { font:450 clamp(30px,4vw,44px)/1.14 var(--headline); letter-spacing:-1.2px; margin:14px 0 18px; overflow-wrap:anywhere; }
.flow-heading p { color:var(--text-soft); font-size:16px; line-height:1.7; max-width:650px; }
.flow-shell h2 { font-size:21px; font-weight:500; line-height:1.4; }
.flow-shell h3 { font-size:16px; font-weight:500; line-height:1.5; }
.flow-shell p { line-height:1.7; }
.interview-start { border:1px solid var(--line-strong); border-radius:var(--radius-lg); padding:32px; background:var(--bg-raised); }
.interview-start h2 { margin:20px 0 12px; }
.interview-start > p { margin:12px 0 24px; color:var(--text-soft); }
.flow-note { font-size:12px; color:var(--muted); line-height:1.65; }
.flow-shell .flow-note { margin:12px 0; }
.flow-toolbar, .home-secondary { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; }
.home-secondary .btn { min-height:42px; }
.home-start-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.home-start-grid .start-card { grid-template-columns:1fr 18px; align-content:start; text-decoration:none; }
.home-start-grid .start-card-icon { grid-column:1 / -1; margin-bottom:4px; }
#preset-browser-title { scroll-margin-top:150px; }
.home-secondary { align-items:center; }
.home-secondary > span { font-size:12px; color:var(--muted); margin-right:4px; }
.home-secondary .home-backup { margin-left:auto; }
.preset-browser { margin-top:44px; padding-top:32px; border-top:1px solid var(--line); }
.preset-browser-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.preset-browser-head h2 { font:450 25px/1.3 var(--headline); margin:10px 0; }
.preset-browser-head p { max-width:510px; color:var(--text-soft); font-size:13px; line-height:1.6; }
.preset-search { min-width:220px; }
.preset-search label { display:block; margin-bottom:9px; color:var(--muted); font-size:12px; }
.preset-search input { background:var(--input); color:var(--text); border:1px solid var(--line-strong); border-radius:8px; font:13px var(--sans); width:100%; padding:12px; }
.preset-filter-set { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin:18px 0 0; }
.preset-filter-label { flex:0 0 auto; min-width:96px; color:var(--faint); font:10px var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.preset-filters { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 0; }
.preset-filter-set .preset-filters { flex:1 1 260px; margin:0; }
.preset-filters .btn { min-height:34px; }
.preset-filters [aria-pressed="true"] { background:var(--text); color:var(--bg); }
.preset-filters span { opacity:.65; margin-left:4px; }
.preset-result-count { font:11px var(--mono); color:var(--muted); margin:20px 0 20px; }
.preset-card-tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.preset-card-domain { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--bg-raised); border:1px solid var(--line); color:var(--text-soft); font-size:10px; font-weight:500; }
.preset-card-category { font-size:10px; color:var(--muted); }
.preset-library > summary { font-size:13px; color:var(--text-soft); padding:18px 0; }
.preset-library > .btn { margin:8px 0 24px; }
.flow-field { display:grid; gap:10px; margin:0 0 28px; }
.flow-field label { font-size:14px; font-weight:500; color:var(--text); }
.flow-field input, .flow-field textarea, .flow-field select, .share-link { width:100%; background:var(--input); border:1px solid var(--line-strong); border-radius:8px; color:var(--text); padding:13px 15px; font:400 15px/1.6 var(--sans); }
.flow-field textarea { resize:vertical; min-height:105px; }
.flow-field input::placeholder, .flow-field textarea::placeholder { color:var(--muted); opacity:1; }
.flow-field :is(input,textarea,select):focus, .share-link:focus { outline:2px solid var(--focus); outline-offset:3px; }
.interview-progress { display:flex; gap:4px; margin:0 0 44px; }
.interview-progress button { flex:1; min-width:0; border:0; border-bottom:2px solid var(--line); background:none; color:var(--muted); cursor:pointer; font:400 11px/1.4 var(--sans); text-align:left; padding:8px 4px 12px; }
.interview-progress button span { display:block; font-family:var(--mono); font-size:11px; margin-bottom:8px; }
.interview-progress button[aria-current] { color:var(--text); border-color:var(--text); }
.interview-actions { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); margin-top:28px; padding-top:24px; }
.interview-actions .btn, .interview-start > .btn { min-height:46px; padding-inline:22px; }
.interview-save { display:flex; justify-content:space-between; gap:18px; align-items:center; margin:24px 0; font-size:12px; color:var(--muted); }
.work-step { background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:24px; margin:0 0 20px; }
.work-step h3 { margin:0 0 20px; }
.work-step .flow-field:last-child { margin-bottom:0; }
.work-step .brief-section-head { margin-bottom:20px; }
.work-step [hidden] { display:none; }
.brief-main { width:100%; margin:0 auto; padding:28px 0 148px; }

/* Right companion panel (the notebook "desk"). A grid reserves its column when open so the spec
   document simply narrows rather than being overlapped; the dock shifts to stay centred on the doc. */
.brief-body { display:grid; grid-template-columns:1fr; align-items:start; }
.brief-shell.desk-open .brief-body { grid-template-columns:minmax(0,1fr) var(--desk-w,344px); }
.brief-desk { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; background:var(--panel); border-left:1px solid var(--line); }
.brief-desk[hidden] { display:none; }
.brief-desk-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 12px; background:var(--panel); }
.brief-desk-head strong { font-family:var(--headline); font-size:15px; font-weight:500; letter-spacing:.005em; }
.brief-shell.desk-open .brief-dock { right:var(--desk-w,344px); }
.brief-desk-toggle { display:inline-flex; align-items:center; gap:7px; }
.brief-desk-toggle .icon { width:14px; height:14px; }
.brief-desk-toggle.active { border-color:var(--line-strong); background:var(--panel); color:var(--text); }
.brief-desk-count { min-width:16px; height:16px; padding:0 4px; display:inline-grid; place-items:center; border-radius:99px; background:var(--text); color:var(--bg); font-family:var(--mono); font-size:9px; }
.brief-desk-scrim { display:none; }
@media (max-width:900px) {
  .brief-shell.desk-open .brief-body { grid-template-columns:1fr; }
  .brief-desk { position:fixed; top:0; right:0; bottom:0; height:100vh; width:min(360px,88vw); z-index:60; box-shadow:var(--shadow-menu); }
  .brief-shell.desk-open .brief-dock { right:0; }
  .brief-desk-scrim:not([hidden]) { display:block; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.42); }
}
.brief-head-l { display:flex; align-items:center; gap:8px; min-width:0; }
.brief-head-l h2 { margin:0; }

/* Notebook — a calm per-project planner living in the right companion panel (the "desk"), kept
   visually distinct from the spec document. Never leaves this browser or enters the agent handoff. */
.brief-notebook { padding:2px 20px 26px; }
.notebook-scope { margin:0; color:var(--faint); font-size:11px; }
.notebook-intro { margin:10px 0 18px; }
.notebook-tasks { display:grid; gap:6px; }
.notebook-task { display:flex; align-items:center; gap:11px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--bg); }
.notebook-task.is-done { background:transparent; border-color:transparent; }
.notebook-check { flex:none; width:19px; height:19px; border:1.5px solid var(--line-strong); border-radius:6px; background:transparent; color:var(--bg); display:grid; place-items:center; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.notebook-check .icon { width:12px; height:12px; }
.notebook-check[aria-checked="true"] { background:var(--text); border-color:var(--text); }
.notebook-task-text { flex:1 1 auto; min-width:0; color:var(--text-soft); font-size:13.5px; line-height:1.5; }
.notebook-task.is-done .notebook-task-text { color:var(--faint); text-decoration:line-through; }
.notebook-task-src { flex:none; display:inline-flex; align-items:center; gap:4px; color:var(--faint); font-size:10px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.notebook-task-src .icon { width:11px; height:11px; }
.notebook-task-remove { flex:none; width:24px; height:24px; display:grid; place-items:center; border:0; background:none; color:var(--faint); border-radius:6px; cursor:pointer; opacity:0; transition:opacity .15s ease, color .15s ease, background .15s ease; }
.notebook-task-remove .icon { width:13px; height:13px; }
.notebook-task:hover .notebook-task-remove, .notebook-task-remove:focus-visible { opacity:1; }
.notebook-task-remove:hover { color:var(--text); background:var(--panel); }
.notebook-empty { color:var(--faint); font-size:13px; padding:6px 2px; }
.notebook-add { display:flex; gap:8px; margin-top:10px; }
.notebook-add input { flex:1 1 auto; min-width:0; height:38px; padding:0 13px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--text); font-size:13.5px; }
.notebook-add input:focus-visible { outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); }
.notebook-suggests { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:8px; }
.notebook-suggests-label { color:var(--faint); font-size:10px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; }
.notebook-suggest { display:flex; align-items:center; gap:12px; }
.notebook-suggest-text { flex:1 1 auto; min-width:0; color:var(--muted); font-size:13px; line-height:1.5; }
.notebook-suggest-actions { flex:none; display:flex; align-items:center; gap:4px; }
.notebook-suggest-add { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border:1px solid var(--line-strong); border-radius:7px; background:var(--panel); color:var(--text); font-size:11px; cursor:pointer; }
.notebook-suggest-add .icon { width:12px; height:12px; }
.notebook-suggest-add:hover { background:var(--panel-hover); border-color:var(--focus); }
.notebook-suggest-dismiss { width:28px; height:28px; flex:none; display:grid; place-items:center; border:0; background:none; color:var(--faint); border-radius:7px; cursor:pointer; }
.notebook-suggest-dismiss .icon { width:13px; height:13px; }
.notebook-suggest-dismiss:hover { color:var(--text); background:var(--panel); }
.notebook-notes-field { margin-top:18px; display:grid; gap:7px; }
.notebook-notes-field label { color:var(--muted); font-size:12px; }
.notebook-notes { width:100%; min-height:76px; padding:12px 13px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--text); font-size:13.5px; line-height:1.6; resize:vertical; font-family:inherit; }
.notebook-notes:focus-visible { outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); }

/* The calm suggestion dock: pinned bottom-centre, floating over the brief like the chat box
   people expect, but carrying the deterministic next step rather than a conversation. Reuses
   .next-step-inner styling from components.css so it stays consistent with the editor dock. */
.brief-dock { position:fixed; left:0; right:0; bottom:0; z-index:40; padding:26px 24px 20px; background:linear-gradient(to bottom,transparent,var(--bg) 46%); pointer-events:none; }
.brief-dock .next-step-inner { pointer-events:auto; }
@media (max-width:720px) {
  .brief-dock { padding:18px 12px 12px; }
  .brief-dock .next-step-footer { flex-wrap:wrap; }
  .brief-dock .next-step-context { display:none; }
}
.brief-check, .brief-section { padding:28px; border:1px solid var(--line); border-radius:12px; margin:24px 0; background:var(--bg-raised); }
.brief-check { border-color:var(--line-strong); }
.brief-check-heading, .brief-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brief-check-heading h2 { margin:8px 0; }
.brief-check > p { color:var(--text-soft); font-size:13px; }
.brief-section h2 { margin:0; }
.brief-section > h3 { margin:24px 0 8px; }
.brief-gaps { color:var(--text-soft); font-size:13px; padding-left:20px; line-height:1.9; }
.flow-shell details { margin-top:16px; }
.flow-shell summary { display:flex; align-items:center; gap:12px; cursor:pointer; font-size:13px; line-height:1.6; padding:8px 0; font-weight:500; color:var(--text-soft); list-style:none; }
.flow-shell summary::-webkit-details-marker { display:none; }
.flow-shell summary::after { content:""; flex:none; margin-left:auto; width:16px; height:16px; background-color:var(--muted); -webkit-mask:var(--chev) center/15px no-repeat; mask:var(--chev) center/15px no-repeat; transition:transform .2s ease; }
.flow-shell summary:hover { color:var(--text); }
.flow-shell summary:hover::after { background-color:var(--text-soft); }
.flow-shell details[open]>summary::after { transform:rotate(180deg); }
.brief-findings { display:grid; gap:16px; margin:20px 0; }
.brief-findings article { padding:20px; border:1px solid var(--line); border-radius:8px; }
.brief-findings p { font-size:13px; color:var(--text-soft); margin:10px 0; }
.finding-severity { display:inline-block; color:var(--muted); font:11px var(--mono); text-transform:uppercase; margin-bottom:8px; }
.finding-severity.critical { color:var(--danger); }
.finding-severity.warning { color:var(--warning); }
.brief-plan { padding-left:22px; font-size:13px; line-height:1.7; }
.brief-plan li { padding:10px 0; }
.brief-plan small { display:block; color:var(--muted); margin-top:6px; }
/* Move 1 — Field Guide "Learn" link: a quiet, secondary affordance beside a finding's remedy. */
.brief-finding-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.fg-learn { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; text-decoration:none; }
.fg-learn .icon { width:13px; height:13px; opacity:.7; }
.fg-learn:hover { color:var(--text); }
.fg-learn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }
/* Move 2 — leverage note in the dock: the planner's "one decision clears N" made visible, calmly. */
.next-step-leverage { display:flex; align-items:center; gap:6px; margin:2px 0 0; color:var(--text-soft); font-size:12px; line-height:1.4; }
.next-step-leverage .icon { width:12px; height:12px; color:var(--code-accent); flex:none; }
.next-step-main .fg-learn { margin-top:8px; }
/* Move 3 — the finding actions row (review / ask as a decision / learn) aligns on one baseline. */
.brief-finding-actions .fg-learn { margin-top:0; margin-left:2px; }
/* Move 4 — the notebook's live verdict strip and per-task finding badges. */
.notebook-verdict { display:flex; align-items:center; gap:8px; margin:9px 0 0; font-size:12px; color:var(--text-soft); }
.notebook-verdict small { color:var(--faint); }
.notebook-verdict .nb-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.notebook-verdict.is-blocked .nb-dot { background:var(--danger); }
.notebook-verdict.is-incomplete .nb-dot { background:var(--warning); }
.notebook-verdict.is-safe .nb-dot { background:var(--success); }
.notebook-task-tag { flex:none; display:inline-flex; align-items:center; gap:4px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.04em; color:var(--faint); }
.notebook-task-tag .icon { width:11px; height:11px; }
.notebook-task-tag.blocker { color:var(--danger); }
.notebook-task-tag.finding { color:var(--warning); }
.notebook-task-tag.cleared { color:var(--success); }
.notebook-task.is-done .notebook-task-tag { opacity:.5; }
/* Move 5 — precedent line: how this spec compares to the curated corpus of its shape. */
.brief-precedent { display:flex; gap:8px; align-items:baseline; margin:16px 0 0; color:var(--text-soft); font-size:12.5px; line-height:1.55; }
.brief-precedent .icon { flex:none; width:13px; height:13px; color:var(--code-accent); position:relative; top:2px; }
.brief-requirement { padding:22px 0; border-top:1px solid var(--line); margin-top:20px; }
.brief-requirement:last-child { padding-bottom:0; }
.brief-requirement h3 { margin:10px 0; overflow-wrap:anywhere; }
.flow-answer { color:var(--text-soft); font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0; }
.brief-tag { display:inline-block; background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:5px 9px; font-size:11px; color:var(--text-soft); margin:8px 8px 0 0; }
.brief-tag.needs-review { color:var(--warning); }
.brief-provenance summary { color:var(--muted); font-size:11px; padding:0; }
.brief-question { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.brief-question p { font-size:14px; }
.brief-question .btn { flex-shrink:0; }
.answer-summary { border-bottom:1px solid var(--line); padding:12px 0 24px; }
.answer-summary h3 { margin:16px 0; }
.answer-summary h4 { font-size:12px; color:var(--muted); font-weight:400; margin:20px 0 6px; }
.resume-interview { display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%; padding:20px 0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--text); text-align:left; cursor:pointer; font:14px var(--sans); }
.resume-interview span { color:var(--muted); font-size:12px; }
.share-form fieldset { border:0; padding:0; margin:0 0 24px; }
.share-form legend { font-size:14px; margin-bottom:12px; }
.flow-checkbox { display:flex; gap:12px; align-items:center; padding:8px 0; font-size:14px; }
.share-link { margin:14px 0; font:12px var(--mono); }
.storage-error { color:var(--warning); font-size:13px; line-height:1.6; }
.workspace-storage-error { position:relative; z-index:45; padding:15px 24px; background:var(--panel); border-bottom:1px solid var(--warning); display:flex; gap:18px; align-items:center; justify-content:center; }
.editor-brief-back { margin-right:10px; flex-shrink:0; }
@media(max-width:700px) {
  .home-start-grid { grid-template-columns:1fr; }
  .home-secondary > span { width:100%; }
  .home-secondary .home-backup { margin-left:0; }
  .preset-browser-head { display:block; }
  .preset-search { margin-top:20px; }
  .preset-search input { font-size:16px; }
  .flow-bar { padding:14px 20px; gap:14px; flex-wrap:wrap; }
  .flow-bar > span:not(.brand) { display:none; }
  .flow-bar .btn { font-size:11px; }
  .interview-main,.brief-main { padding-top:24px; }
  .interview-progress { gap:2px; margin-bottom:28px; overflow-x:auto; }
  .interview-progress button { min-width:70px; }
  .flow-heading h1 { letter-spacing:-.7px; }
  .flow-heading p { font-size:15px; }
  .brief-check,.brief-section,.interview-start,.work-step { padding:20px; }
  .brief-section-head { gap:10px; }
  .brief-question { align-items:flex-start; }
  .brief-question p { font-size:13px; }
  .flow-field input,.flow-field textarea,.flow-field select { font-size:16px; }
  .workspace-storage-error { flex-wrap:wrap; }
  .editor-brief-back { position:fixed; bottom:16px; left:16px; z-index:60; box-shadow:var(--shadow-menu); background:var(--panel); }
}

/* Match the public page edges while reserving space for the agent sidebar. */
.flow-bar { padding-inline:max(var(--site-gutter), calc((100% - var(--site-max)) / 2)); }
.flow-bar .brand { width:auto; margin-right:24px; }
.brief-body { width:var(--site-width); margin-inline:auto; }
.brief-main { min-width:0; }
.brief-shell.desk-open .brief-main { padding-right:32px; }
.interview-main>.interview-form,.interview-main>.interview-start,.interview-main>.brief-section { max-width:960px; }
.brief-dock { left:max(var(--site-gutter), calc((100% - var(--site-max)) / 2)); right:max(var(--site-gutter), calc((100% - var(--site-max)) / 2)); }
.brief-shell.desk-open .brief-dock { right:calc(max(var(--site-gutter), (100% - var(--site-max)) / 2) + var(--desk-w,344px)); }
@media(max-width:900px) {
  .brief-shell.desk-open .brief-main { padding-right:0; }
  .brief-shell.desk-open .brief-dock { right:var(--site-gutter); }
}

@media(min-width:901px) {
  .brief-desk { top:var(--workspace-header-height,140px); height:calc(100vh - var(--workspace-header-height,140px)); }
}