/* Planboard uses v4 reading surfaces and type/colour tokens. */
[data-page="wizard"] .vi-shell:has(.pb-board), [data-page="wizard"] .vi-shell:has(.pb-moment) { max-width: 1180px; }
.pb-board, .pb-main, .pb-section-body, .pb-aside, .pb-question-content { min-width: 0; }
.pb-board-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); margin-bottom: var(--s-5); }
.pb-board-head > div { max-width: 680px; }
.pb-free { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; padding: var(--s-2) var(--s-3); color: var(--success); background: var(--success-tint); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; }
.pb-board-head .pb-free { white-space: normal; max-width: 240px; }
.pb-board-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.46fr); gap: var(--s-5); align-items: start; }
.pb-main { display: grid; gap: var(--s-3); }
.pb-section { border: 1px solid var(--hairline-strong); background: var(--raised); border-radius: var(--r-lg); }
.pb-section > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4); color: var(--ink); }
.pb-section > summary::after { content: "+"; color: var(--ink-2); font-size: var(--fs-body); }
.pb-section[open] > summary::after { content: "−"; }
.pb-section-title { font-size: var(--fs-row); font-weight: 600; }
.pb-section-meta { margin-left: auto; color: var(--ink-2); font-size: var(--fs-small); text-align: right; }
.pb-section-body { border-top: 1px solid var(--hairline); padding: var(--s-4); display: grid; gap: var(--s-3); }
.pb-section-body > .pb-section { background: var(--sunken); }
.pb-upload-grid { display: grid; gap: var(--s-3); }
.pb-upload { border-bottom: 1px solid var(--hairline); padding-bottom: var(--s-3); }
.pb-upload:last-child { border: 0; padding: 0; }
.pb-upload-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.pb-upload-head b { font-size: var(--fs-ui); font-weight: 600; overflow-wrap: anywhere; }
.pb-file-symbol { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--hairline); border-radius: var(--r-md); color: var(--ink-2); background: var(--sunken); font-size: var(--fs-small); font-weight: 600; }
.pb-impact { padding: var(--s-3); border-left: 2px solid var(--warning); background: var(--warning-tint); font-size: var(--fs-desc); color: var(--ink); }
.pb-impact--clear { background: var(--sunken); border-color: var(--hairline-strong); color: var(--ink-2); }
.pb-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pb-chip, .pb-suggestions button, .pb-question-tools button, .pb-handle { min-height: 44px; min-width: 44px; border: 1px solid var(--hairline-strong); background: var(--sunken); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); color: var(--ink); font: var(--fs-ui)/var(--lh-ui) var(--font-sans); cursor: pointer; }
.pb-chip { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.pb-chip b { font-weight: 500; }
.pb-chip > span:not(:first-child) { font-size: var(--fs-small); }
.pb-chip--include { color: var(--success); background: var(--success-tint); border-color: var(--success-line); }
.pb-chip--exclude { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-line); }
.pb-chip:disabled { opacity: 1; cursor: default; color: var(--ink-2); background: var(--sunken); border-color: var(--hairline-strong); }
.pb-inline { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.vi-shell .pb-inline select { width: auto; }
.pb-templates { display: grid; gap: var(--s-2); }
.pb-template, .pb-effort { display: flex; align-items: flex-start; gap: var(--s-3); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: var(--s-3); cursor: pointer; }
.pb-template:has(input:checked), .pb-effort:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.pb-template input, .pb-effort input, .pb-operator input { flex: none; width: 18px; height: 18px; margin: var(--s-1) 0 0; accent-color: var(--accent); }
.pb-template > span, .pb-effort > span { min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.pb-template .vi-meta, .pb-effort .vi-meta { flex: 0 0 100%; }
.pb-template b, .pb-effort b, .pb-operator b { font-size: var(--fs-ui); font-weight: 600; }
.pb-recommended { font-size: var(--fs-small); color: var(--accent-ink); }
.pb-mappings { display: grid; gap: var(--s-3); }
.pb-mapping { display: grid; grid-template-columns: 1fr minmax(120px,1fr) auto; gap: var(--s-2); align-items: center; }
.pb-mapping label { font-size: var(--fs-ui); }
.pb-mapping p { grid-column: 1 / -1; }
.pb-rejected { padding: var(--s-3); color: var(--danger); background: var(--danger-tint); font-size: var(--fs-desc); border-radius: var(--r-md); }
.pb-operator { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.pb-operator > span { min-width: 0; }
.pb-operator > span:not(.pb-cost) { flex: 1; }
.pb-operator .vi-meta { display: block; }
.pb-operator:has(input:disabled) { color: var(--ink-2); cursor: default; }
.pb-cost { flex: none; color: var(--ink-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; text-align: right; }
.pb-scope-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-3); }
.pb-scope-label { font-size: var(--fs-small); color: var(--ink-2); font-weight: 600; margin-bottom: var(--s-2); }
.pb-scope-entry { display: grid; grid-template-columns: minmax(0,1fr) 120px auto; gap: var(--s-2); }
.pb-suggestions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pb-suggestions button { background: var(--raised); font-size: var(--fs-small); }
.pb-questions { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.pb-questions li { display: flex; align-items: flex-start; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--hairline); }
.pb-question-number { display: grid; gap: var(--s-1); text-align: center; color: var(--ink-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pb-handle { padding: 0; background: var(--raised); color: var(--ink-2); cursor: grab; }
.pb-question-content { flex: 1; display: grid; gap: var(--s-2); }
.vi-shell .pb-question-content textarea { padding: var(--s-2) var(--s-3); field-sizing: content; }
.vi-shell .pb-question-content textarea[data-key="title"] { font-size: var(--fs-ui); font-weight: 600; background: var(--sunken); }
.pb-question-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pb-question-tools button { background: var(--raised); font-size: var(--fs-small); }
.pb-question-tools button:disabled { opacity: 1; color: var(--ink-2); cursor: default; }
.pb-efforts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-2); }
.pb-effort { gap: var(--s-2); padding: var(--s-3); }
.pb-effort strong { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 600; flex: 0 0 100%; font-variant-numeric: tabular-nums; }
.pb-effort strong span { font-size: var(--fs-small); font-weight: 400; }
.pb-estimate-delta { color: var(--accent-ink); background: var(--accent-tint); padding: var(--s-3); border-radius: var(--r-md); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pb-aside .vi-quote { margin: 0; padding: var(--s-4); }
.pb-aside .vi-metrics > div { display: block; }
.pb-aside .vi-metrics dd { text-align: left; margin-top: var(--s-1); }
.pb-moment, .pb-loading { padding: var(--s-5); background: var(--raised); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); }
.pb-moment-head { max-width: 560px; }
.pb-moment-head .pb-free { margin-top: var(--s-3); }
.pb-moment-list { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-3); }
.pb-moment-list li { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.pb-moment-list li > div { flex: 1; min-width: 0; }
.pb-moment-list b { font-size: var(--fs-ui); font-weight: 600; }
.pb-moment-list li > .vi-meta { flex: none; }
.pb-moment-list .is-current { border-color: var(--accent); background: var(--accent-tint); }
.pb-moment-number { display: grid; place-items: center; min-width: 28px; min-height: 28px; color: var(--ink-2); font-size: var(--fs-small); border-radius: var(--r-pill); background: var(--sunken); }
.pb-moment-list .is-done .pb-moment-number { color: var(--success); background: var(--success-tint); }
.pb-summary { font-size: var(--fs-ui); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.pb-dock-copy { min-width: 0; flex: 1; }
.vi-actions .pb-dock-copy .vi-action-hint { display: block; padding: 0; text-align: left; }
.pb-site-footer { margin-top: var(--s-5); }
@media (min-width: 761px) { .pb-aside { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); } .vi-actions.is-plan { position: sticky; bottom: 0; z-index: 65; background: var(--paper); padding: var(--s-4); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); } }
@media (max-width: 760px) {
  .pb-board-head { display: grid; gap: var(--s-3); }
  .pb-board-layout { grid-template-columns: minmax(0,1fr); }
  .pb-section-body { padding: var(--s-3); }
  .pb-section > summary { padding: var(--s-3); flex-wrap: wrap; }
  .pb-section-meta { text-align: left; margin-left: 0; }
  .pb-section > summary::after { margin-left: auto; }
  .pb-scope-columns { grid-template-columns: minmax(0,1fr); }
  .pb-scope-entry { grid-template-columns: minmax(0,1fr) 110px; }
  .pb-scope-entry input { grid-column: 1 / -1; }
  .pb-mapping { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .pb-mapping button { grid-column: 1 / -1; }
  .pb-efforts { grid-template-columns: minmax(0,1fr); }
  .pb-effort strong { flex-basis: auto; margin-left: auto; }
  .pb-effort > span { flex: 1; }
  .pb-effort .vi-meta { display: block; }
  .pb-moment { padding: var(--s-3); }
  .pb-moment-list li { padding: var(--s-2); }
  .pb-moment-list li > .vi-meta { display: none; }
  .vi-actions .pb-dock-copy { flex: 0 0 100%; }
  .vi-actions.is-plan .pb-dock-copy .vi-action-hint { font-size: var(--fs-small); }
  .pb-question-tools { gap: var(--s-1); }
}
.pb-handle { touch-action: none; user-select: none; }
.pb-handle.pb-is-dragging { cursor: grabbing; outline: var(--focus-outline); background: var(--accent-tint); }

/* The full labelled card is the radio/checkbox hit area; values are not rendered text. */
.pb-template input, .pb-effort input, .pb-operator input { position: static; opacity: 1; -webkit-text-fill-color: transparent; }
@media (max-width: 760px) { .vi-actions .pb-dock-copy { order: -1; } }

/* ---- v3.1 polish pass (design review 10-08) ---- */
/* Plan stage heading becomes a quiet label; the board title leads. */
.vi-shell:has(.pb-board, .pb-moment, .pb-loading) .vi-stage { gap: var(--s-2); }
.vi-shell:has(.pb-board, .pb-moment, .pb-loading) .vi-stage > .t-heading { margin: var(--s-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.vi-shell:has(.pb-board, .pb-moment, .pb-loading) .vi-status { margin: var(--s-2) 0 0; min-height: 0; }
.vi-shell:has(.pb-board, .pb-moment, .pb-loading) .vi-progress-summary { margin: var(--s-3) 0 0; }
.pb-board-head { margin-bottom: var(--s-4); align-items: flex-start; }
.pb-board-head > div { max-width: 820px; flex: 1; }
.pb-board-head .t-heading { margin: var(--s-1) 0 var(--s-2); }
.pb-question-brief { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); max-width: 64ch; }
.pb-brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--hairline); }
.pb-brief > div { min-width: 0; }
.pb-brief dt { color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.pb-brief dd { margin: 0; font-size: var(--fs-desc); line-height: var(--lh-desc); overflow-wrap: anywhere; }
.pb-section > summary { min-height: 56px; cursor: pointer; border-radius: var(--r-lg); }
.pb-section > summary:hover { background: var(--hover-tint); }
.pb-section[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pb-section > summary::after { flex: none; width: 24px; text-align: center; }
/* Uploads: text hangs under the file name, not under the icon. */
.pb-upload-body { display: grid; gap: var(--s-2); margin-top: var(--s-2); margin-left: calc(44px + var(--s-3)); }
.pb-upload-body > p { margin: 0; }
.pb-upload-body .vi-check { padding: 0; min-height: 44px; }
/* Template */
.pb-recommended { padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--accent-tint); font-weight: 500; }
/* Mapping: confirmed pairs read as done, pending pairs as the next action */
.pb-confirm.is-confirmed { color: var(--success); background: var(--success-tint); border-color: var(--success-line); font-weight: 600; }
.pb-confirm:not(.is-confirmed):not(:disabled) { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
/* Scope chips name the move they perform */
.pb-chip > b { font-weight: 500; }
.pb-chip .pb-chip-action { margin-left: auto; padding-left: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.pb-chip--include .pb-chip-action { color: var(--ink-2); }
/* Questions: title on top; sub-question and its tools share the second row */
@media (min-width: 761px) {
  .pb-question-content { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: start; }
  .pb-question-content > textarea[data-key="title"] { grid-column: 1 / -1; }
  .pb-question-content > textarea[data-key="subquestion"] { grid-column: 1; }
  .pb-question-tools { grid-column: 2; flex-wrap: nowrap; }
  .pb-question-tools button { white-space: nowrap; }
  .pb-questions li { padding-bottom: var(--s-4); }
}
/* Effort: the radio cards are the control; the menu below is a compact alternative */
.pb-efforts + .pb-estimate-delta { margin-top: var(--s-3); }
.pb-section[data-pb-section="effort"] .vi-label { margin-top: var(--s-4); font-weight: 500; color: var(--ink-2); }
.pb-effort strong { font-weight: 600; }
/* Quote aside: compact, and reachable at any viewport height */
.pb-aside .vi-quote { padding: var(--s-4); }
.pb-aside .vi-quote .t-heading { margin: var(--s-1) 0; }
.pb-aside .vi-ready { margin: var(--s-3) 0 var(--s-2); padding: var(--s-3); gap: var(--s-1); font-size: var(--fs-small); }
.pb-aside .vi-metrics { margin: var(--s-2) 0; }
.pb-aside .vi-metrics > div { padding: var(--s-2) 0; }
.pb-aside .vi-metrics dd { font-size: var(--fs-desc); line-height: var(--lh-desc); margin-top: 0; }
.pb-aside .vi-meta { font-size: var(--fs-small); }
@media (min-width: 761px) {
  .pb-aside { max-height: calc(100vh - var(--topbar-h) - 144px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-lg); scrollbar-width: thin; }
  .pb-aside:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
}
/* Dock: a blocked Start reads as not-yet-available but still explains itself on press */
.vi-actions.is-plan:has(.vi-action-hint.is-blocked) [data-next] { background: var(--sunken-2); color: var(--ink); border: 1px solid var(--hairline-strong); }
.vi-actions.is-plan:has(.vi-action-hint.is-blocked) [data-next]:hover { background: var(--hover-tint); }
.vi-actions.is-plan .pb-dock-copy .vi-action-hint { order: 0; flex: none; }
.vi-actions.is-plan .pb-dock-copy { display: grid; gap: 2px; }
/* Planning moment: calm progress */
.pb-moment-bar { height: 4px; margin: var(--s-4) 0 0; border-radius: var(--r-pill); background: var(--sunken-2); overflow: hidden; }
.pb-moment-bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .8s linear; }
.pb-moment-list { margin-top: var(--s-4); }
.pb-moment-list li { align-items: center; }
.pb-moment-list .is-current .vi-meta:last-child { color: var(--accent-ink); font-weight: 600; }
.pb-moment-list li:not(.is-done):not(.is-current) { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .pb-moment-bar > span { transition: none; } }
@media (max-width: 760px) {
  .pb-board-head { align-items: stretch; }
  .pb-board-head .pb-free { max-width: none; justify-self: start; }
  .pb-brief { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .pb-brief > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-2); }
  .pb-upload-body { margin-left: 0; }
  .pb-section > summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; column-gap: var(--s-2); row-gap: 0; padding: var(--s-3); min-height: 56px; }
  .pb-section-title { grid-column: 1; }
  .pb-section-meta { grid-column: 1; grid-row: 2; margin: 0; text-align: left; font-size: var(--fs-small); }
  .pb-section > summary::after { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .pb-mapping { grid-template-columns: minmax(0, 1fr); }
  .pb-mapping label { grid-column: 1; }
  .pb-mapping select, .pb-mapping button { width: 100%; }
  /* Questions: handle + number on the left, tools in one row beneath */
  .pb-questions li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-2); }
  .pb-question-content { display: contents; }
  .pb-question-number { grid-column: 1; grid-row: 1 / span 2; }
  .pb-question-content > textarea[data-key="title"] { grid-column: 2; grid-row: 1; }
  .pb-question-content > textarea[data-key="subquestion"] { grid-column: 2; grid-row: 2; }
  .pb-question-tools { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .pb-question-tools button { min-width: 0; padding: var(--s-1) var(--s-2); }
  /* Dock: copy on top, buttons one compact row */
  .vi-actions.is-plan { padding: var(--s-2) var(--s-4) calc(var(--s-2) + var(--dock-inset, env(safe-area-inset-bottom))); row-gap: var(--s-1); }
  .vi-actions.is-plan button { min-height: 44px; }
  .vi-actions.is-plan .pb-summary { font-size: var(--fs-small); line-height: var(--lh-small); }
  .vi-actions.is-plan .pb-dock-copy .vi-action-hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-small); line-height: var(--lh-small); }
}

@media (max-width: 760px) { html:has(.pb-board) { scroll-padding-top: 80px; scroll-padding-bottom: 170px; } }