/* canvas.css — the live writing canvas (lane V16).

   New UI, built in the brand kit's tokens (docs/brand-kit.md): no hex, no value
   the ladder does not hold. The kit leaves "the agent surface" undecided, so the
   document's reading type is taken from the console's own rungs (--text-md for
   prose, --text-xl and --text-lg for headings) rather than invented.

   Three columns: Contents, the document at a reading measure, and the assistant
   column the Agent panel is lent into (S's `agpSet("canvas")`). The panel keeps
   its own rules; this file only takes it out of the dock's fixed position while
   it sits in the canvas, as agent.css does for the workspace's `full`. */

.view[data-view="canvas"] > .cv-screen { display: flex; flex-direction: column; min-height: 0; }

/* One row, bounded by the screen: each column scrolls on its own, the document in
   `.cv-main`, which is what the Contents' scroll spy listens to. An auto row would
   grow to the document and hand the scroll to the page. */
.cv-split { flex: 1; min-height: 0; display: grid; overflow: hidden;
  grid-template-columns: 216px minmax(0, 1fr) var(--agp-w); grid-template-rows: minmax(0, 1fr); }
/* Each column is a pane the height of the row, whatever its content: declared, not left to the grid's
   default, so a short document never reads as a box that stopped short beside the assistant. */
.cv-split > * { align-self: stretch; }

/* ── Contents ─────────────────────────────────────────────────────────────── */
.cv-toc { min-height: 0; overflow: auto; padding: 28px 12px 28px 20px; border-right: 1px solid var(--line); }
.cv-toc-h { margin: 0 0 10px 8px; font: 500 var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.cv-toc-r { display: flex; align-items: baseline; gap: 6px; width: 100%; min-height: 28px; padding: 4px 8px;
  border: 0; border-left: 2px solid transparent; background: none; cursor: pointer; text-align: left;
  font: 400 var(--text-sm)/1.4 var(--sans); color: var(--muted); }
.cv-toc-r .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-toc-r .w { flex: none; font: 400 var(--text-xs)/1 var(--mono); color: var(--faint); }
.cv-toc-r.l3 { padding-left: 20px; font-size: var(--text-xs); }
.cv-toc-r:hover { color: var(--ink); background: var(--wash-hover); }
.cv-toc-r:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cv-toc-r.on { color: var(--ink); border-left-color: var(--accent); }
.cv-toc-r.st-pending .t, .cv-toc-r.st-not_written .t { color: var(--faint); }

/* ── The document ─────────────────────────────────────────────────────────── */
.cv-main { min-height: 0; overflow: auto; }
.cv-doc { max-width: 720px; margin: 0 auto; padding: 36px 40px 96px; color: var(--ink);
  font: 400 var(--text-md)/1.75 var(--sans); }
.cv-title { margin: 0 0 24px; font: 650 var(--text-2xl)/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
/* A section leaves a gutter beside its text for a change mark (CT-7, AGM-60): pulled out by as much as it pads in, so the
   text stays where it was, and nothing in the section's own box clips what sits in that gutter. */
.cv-sec { scroll-margin-top: 24px; --cv-mark: 12px; margin-left: calc(-1 * var(--cv-mark)); padding-left: var(--cv-mark); }
.cv-sec h3 { margin: 32px 0 10px; font: 600 var(--text-xl)/1.3 var(--sans); color: var(--ink); text-wrap: balance; }
.cv-sec h4 { margin: 24px 0 8px; font: 600 var(--text-lg)/1.35 var(--sans); color: var(--ink); }
.cv-sec p { margin: 0 0 14px; text-wrap: pretty; }
.cv-sec ul, .cv-sec ol { margin: 0 0 14px; padding-left: 22px; }
.cv-sec li { margin: 0 0 6px; }
/* A code block and a table scroll inside their own boxes, never the section's. */
.cv-doc pre { margin: 0 0 14px; padding: 12px 14px; overflow: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); font: 400 var(--text-sm)/1.6 var(--mono); }
.cv-q { margin: 0 0 14px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line-hover); color: var(--muted); }
.cv-q p:last-child { margin-bottom: 0; }

/* A draft asserts nothing, and looks it: the secondary ink, never below the contrast floor (§5b). */
.cv-sec.is-draft { color: var(--muted); }
.cv-sec.is-draft h3, .cv-sec.is-draft h4 { color: var(--muted); }
.cv-skel { color: var(--faint); }
.cv-skel-w { margin-left: 8px; font: 400 var(--text-xs)/1 var(--mono); color: var(--faint); vertical-align: middle; }
.cv-sec[data-cv-state="writing"] .cv-skel-w { animation: cvPulse 1.4s ease-in-out infinite; }
@keyframes cvPulse { 50% { opacity: .45; } }
/* A planned section (V10's plan path): the plan is the composer talking, never the piece.
   Secondary ink at the small step, the evidence as label and claim, the fallback as a quote. */
.cv-sec.is-plan h3 { margin-bottom: 6px; }
.cv-plan-i { font: 400 var(--text-sm)/1.6 var(--sans); color: var(--muted); }
/* The reading windows the document's figures stand on, stated where the export states them: last. */
.cv-periods { margin-top: 24px; }
.cv-period { margin: 0 0 4px; font: 400 var(--text-sm)/1.5 var(--sans); color: var(--muted); }
.cv-sec .cv-plan-ev { margin: 0 0 12px; padding: 0; list-style: none; font: 400 var(--text-sm)/1.55 var(--sans); color: var(--muted); }
.cv-sec .cv-plan-ev li { margin: 0 0 4px; }
.cv-plan-l { margin-right: 6px; font: 500 var(--text-xs)/1 var(--mono); color: var(--muted); }
.cv-sec .cv-plan-h { margin: 0 0 6px; font: 500 var(--text-xs)/1 var(--mono); color: var(--muted); }
.cv-figph { height: 120px; margin: 0 0 14px; border: 1px dashed var(--line-hover); border-radius: var(--r-sm); }

/* A stated gap is a statement, not a warning: a quiet rule, and its own words. */
.cv-gapsec { padding-left: 14px; border-left: 2px dashed var(--line-hover); }
.cv-note { max-width: 720px; margin: 64px auto; padding: 0 40px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px; color: var(--muted); font: 400 var(--text-sm)/1.6 var(--sans); }
.cv-note b { color: var(--ink); font-weight: 600; }

/* The comparison table. A cell's words are its mark (D11): no colour at rest. */
.cv-doc .tbl { margin: 0 0 18px; overflow-x: auto; }
.cv-sec table { width: 100%; border-collapse: collapse; font: 400 var(--text-sm)/1.55 var(--sans); }
.cv-sec th { padding: 8px 10px; text-align: left; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-hover); }
.cv-sec td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--line); }
.cv-cgap .cv-c { color: var(--muted); font-style: italic; }
.cv-c, .cv-f { position: relative; }
.cv-c[data-cv-factdoor], .cv-f[data-cv-door] { cursor: pointer; }
.cv-f { cursor: help; }
.cv-el { display: block; }
.cv-el + .cv-el { margin-top: 4px; color: var(--faint); }

/* Lit by the held verdict's press, and only then. */
.cv-lit { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::highlight(cv-unsourced) { background-color: var(--selection); color: var(--ink); }

/* ── One section's verbs, and its editor ──────────────────────────────────── */
/* At the section's head, drawn on hover and on focus within, and never hidden from a keyboard. */
.cv-sec { position: relative; }
.cv-sec-acts { position: absolute; top: 26px; right: 0; display: flex; gap: 6px; opacity: 0; transition: opacity .12s ease; }
.cv-sec:hover > .cv-sec-acts, .cv-sec:focus-within > .cv-sec-acts { opacity: 1; }
.cv-sec-acts .cv-btn-s { white-space: nowrap; }
/* Rewrite (WRT P7/P8): one verb, its two ways in a small menu under it. */
.cv-rw { position: relative; }
.cv-rw > summary { list-style: none; }
.cv-rw > summary::-webkit-details-marker { display: none; }
.cv-rw[open] { z-index: 6; }
.cv-rw-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 168px; padding: 4px; display: grid; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.cv-rw-menu button { all: unset; box-sizing: border-box; padding: 6px 10px; border-radius: var(--r-sm); font: 400 var(--text-sm)/1.4 var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.cv-rw-menu button:hover { background: var(--wash-hover); }
.cv-rw-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cv-sec-acts:has(.cv-rw[open]) { opacity: 1; }
.cv-sec.is-editing { padding-top: 24px; }
.cv-ed-t { display: block; width: 100%; min-height: 160px; padding: 12px 14px; resize: vertical; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-hover); border-radius: var(--r-sm);
  font: 400 var(--text-sm)/1.65 var(--mono); }
.cv-ed-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cv-ed-p { margin: 8px 0 0; font: 400 var(--text-xs)/1.5 var(--sans); color: var(--danger); }
.cv-ed-a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .cv-sec-acts { transition: none; } }

/* ── Versions: a summoned list under its control ──────────────────────────── */
.cv-vwrap { position: relative; }
.cv-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(360px, 90vw); max-height: 60vh;
  overflow: auto; padding: 6px; background: var(--pop); border: 1px solid var(--line-hover);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.cv-vrow { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px;
  border-radius: var(--r-sm); font: 400 var(--text-sm)/1.4 var(--sans); color: var(--ink); }
.cv-vrow:hover { background: var(--wash-hover); }
.cv-vrow .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-vrow .w { flex: none; font: 400 var(--text-xs)/1 var(--mono); color: var(--faint); }
.cv-vrow.on .t { font-weight: 600; }

/* ── Export: formats, then destinations, each row a press ──────────────────── */
.cv-xpop { width: min(280px, 90vw); }
.cv-xg + .cv-xg { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.cv-xh { padding: 4px 8px 2px; font: 500 var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.cv-xnote { padding: 6px 8px; font: 400 var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.cv-xnote.is-flag { color: var(--warn); }
.cv-xrow { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 4px 8px;
  cursor: pointer; text-align: left; font: 400 var(--text-sm)/1.4 var(--sans); color: var(--ink); background: none;
  border: 0; border-radius: var(--r-sm); }
.cv-xrow:hover:not(:disabled):not(.is-note) { background: var(--wash-hover); }
.cv-xrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cv-xrow:disabled { cursor: default; color: var(--faint); }
.cv-xrow.is-note { cursor: default; color: var(--muted); }
.cv-xrow .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-xrow .w { flex: none; font: 400 var(--text-xs)/1 var(--mono); color: var(--faint); }

/* ── The header's readings ────────────────────────────────────────────────── */
.cv-verdicts { display: inline-flex; align-items: center; gap: 10px; }
.cv-state { font: 400 var(--text-xs)/1 var(--mono); color: var(--muted); }
.cv-verdict { position: relative; font: 500 var(--text-xs)/1 var(--sans); }
.cv-verdict.ok { color: var(--muted); }
.cv-verdict.held { height: var(--ctl-h-sm); padding: 0 10px; cursor: pointer; color: var(--ink);
  background: none; border: 1px solid var(--line-hover); border-radius: var(--r-sm); }
.cv-verdict.held:hover { background: var(--wash-hover); }
.cv-verdict.held:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cv-verdicts .v2-tip { left: auto; right: -1px; }

/* ── The write line the panel draws (V16-3) ───────────────────────────────── */
.cv-wl { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 2px 0; border: 0; background: none;
  cursor: pointer; text-align: left; font: 400 var(--text-xs)/1.5 var(--sans); color: var(--muted); }
.cv-wl .cv-wl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cv-wl .cv-wl-n { flex: none; font: 400 var(--text-xs)/1 var(--mono); color: var(--faint); }
.cv-wl:hover .cv-wl-t { text-decoration: underline; text-underline-offset: 2px; }
.cv-wl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The row opens into its diff: the words the counter counted, marked. */
.cv-wd > summary.cv-wl { list-style: none; }
.cv-wd > summary.cv-wl::-webkit-details-marker { display: none; }
.cv-wd > summary.cv-wl::before { content: "›"; flex: none; width: 10px; color: var(--faint); transition: transform .12s ease; }
.cv-wd[open] > summary.cv-wl::before { transform: rotate(90deg); }
.cv-wd-b { margin: 4px 0 8px 16px; }
.cv-wd-d { margin: 0 0 8px; font: 400 var(--text-xs)/1.6 var(--sans); color: var(--muted); }
.cv-wd-d ins { text-decoration: none; color: var(--ink); background: var(--wash-accent); border-radius: 2px; padding: 0 1px; }
.cv-wd-d del { color: var(--faint); text-decoration: line-through; }
.cv-wd-gap { color: var(--faint); }
.cv-wd-a { display: flex; gap: 8px; }
.cv-btn-s { height: var(--ctl-h-sm); padding: 0 10px; cursor: pointer; font: 500 var(--text-xs)/1 var(--sans);
  color: var(--ink); background: none; border: 1px solid var(--line-hover); border-radius: var(--r-sm); }
.cv-btn-s:hover { background: var(--wash-hover); }
.cv-btn-s:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cv-wd > summary.cv-wl::before { transition: none; } }

/* ── The summary the panel draws (V16-3) ──────────────────────────────────── */
.cv-sm { font: 400 var(--text-sm)/1.6 var(--sans); color: var(--ink); }
.cv-sm p { margin: 0 0 6px; }
.cv-sm-h { margin-top: 12px !important; font-weight: 600; }
.cv-sm ul { margin: 0 0 6px; padding-left: 18px; }
.cv-sm-w, .cv-sm-none { color: var(--muted); }
/* Rows that share one reason sit under it: the reason once, then the rows. */
.cv-sm li > ul { margin: 2px 0 4px; }

/* ── The panel, lent into the canvas ──────────────────────────────────────── */
.cv-assist { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
/* `z-index: auto`: the dock's z-index still applies to a flex item with no position, and
   stacked the lent panel over the header's summoned lists (found in the live look). */
.cv-assist > .v2-agp.canvas { position: static; z-index: auto; flex: 1; min-height: 0; width: auto; max-width: none;
  border-left: 0; box-shadow: none; transition: none; }
/* Its head holds the dock's own controls (wider, close): the canvas is not a dock. */
.cv-assist > .v2-agp.canvas > .agp-head { display: none; }

/* ── Narrower screens ─────────────────────────────────────────────────────── */
@media (max-width: 1179px) {
  .cv-split { grid-template-columns: minmax(0, 1fr) var(--agp-w); }
  .cv-toc { display: none; }
}
@media (max-width: 760px) {
  .cv-split { display: flex; flex-direction: column; overflow: auto; }
  .cv-main, .cv-assist { overflow: visible; min-height: auto; }
  .cv-doc { padding: 24px 16px 48px; }
  .cv-assist { border-left: 0; border-top: 1px solid var(--line); min-height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-sec[data-cv-state="writing"] .cv-skel-w { animation: none; }
}

/* ── The canvas home: the head of Content › New (phase 6) ─────────────────── */
.cvh { display: grid; gap: 12px; padding: var(--sp-7); }
.cvh-in { border: 1px solid var(--line-hover); border-radius: var(--r-md); background: var(--surface); }
.cvh-in:focus-within { border-color: var(--accent); }
.cvh-t { display: block; width: 100%; min-height: 72px; resize: vertical; padding: 12px 14px 4px; border: 0; outline: 0;
  background: none; font: 400 var(--text-md)/1.5 var(--sans); color: var(--ink); }
.cvh-t::placeholder { color: var(--faint); }
.cvh-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 10px; }
/* Optimize (WRT P7): one line for the page's address, the site's pages under it, and what an import refused. */
.cvh-url { min-height: 0; height: 44px; padding: 12px 14px; resize: none; }
.cvh-err { margin: 8px 2px 0; font: 400 var(--text-sm)/1.5 var(--sans); color: var(--danger); }
.cvh-none { margin: 0; grid-column: 1 / -1; font: 400 var(--text-sm)/1.5 var(--sans); color: var(--muted); }
.cvh-pgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cvh-bar .sp { flex: 1; }
.cvh-ps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; }
.cvh-p { display: grid; gap: 4px; align-content: start; min-height: 64px; padding: 10px 12px; cursor: pointer; text-align: left;
  font: 500 var(--text-sm)/1.4 var(--sans); color: var(--ink); background: none; border: 1px solid var(--line);
  border-radius: var(--r-md); }
.cvh-p:hover { background: var(--wash-hover); border-color: var(--line-hover); }
.cvh-p .f { font: 400 var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.cvh-sh { align-self: center; height: var(--ctl-h-sm); padding: 0 10px; cursor: pointer; font: 500 var(--text-xs)/1 var(--sans);
  color: var(--muted); background: none; border: 0; border-radius: var(--r-sm); }
.cvh-sh:hover { color: var(--ink); background: var(--wash-hover); }
.cvh-p:focus-visible, .cvh-sh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
  .cvh-ps { grid-template-columns: minmax(0, 1fr); }
  .cvh-sh { justify-self: start; }
}

/* The piece at a glance (WRT P9): one segment per section, sized by its words, under the
   header. A state is a shape as well as a tone: written solid, a stated gap hatched, items not
   sourced notched, a section not written a dashed place. The words are on each segment's hover
   and in the key; the tip hangs below, which is why no segment clips its overflow. */
/* Stacked over the columns below it: a segment's tip hangs down across the document. */
.cv-glance { position: relative; z-index: 5; flex: none; display: flex; align-items: center; gap: 16px; padding: 6px 16px 8px; border-bottom: 1px solid var(--line); }
.cv-glance[hidden] { display: none; }
/* The bar is RPT's stacked bar (blocks.js stackedBarHtml). Its sheet (dashboards.css) is not on this page, and where
   it is, the strip keeps its own shape: square segments a gap apart, and no clip (a segment's hover hangs below the bar).
   The gaps overrun the widths by a few pixels, which every segment gives back in proportion to its width. */
.cv-glance .blk-dist { flex: 1; min-width: 0; }
.cv-glance .blk-segbar { display: flex; gap: 2px; height: 14px; border-radius: 0; overflow: visible; box-shadow: none; background: none; }
.cv-glance .blk-seg { position: relative; display: block; flex: 0 1 auto; min-width: 6px; height: 100%; padding: 0; border: 0; border-radius: 2px; }
.cv-glance button.blk-seg { cursor: pointer; }
.cv-glance button.blk-seg:hover { box-shadow: 0 0 0 1px var(--ink); }
.cv-glance button.blk-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cv-glance button.blk-seg:focus-visible .v2-tip { display: block; }
/* The hover's hit area fills its segment and paints nothing: the shell's row hover would wash the segment's state out. */
.cv-glance .cv-gl-hit, .cv-glance .cv-gl-hit:hover { position: absolute; inset: 0; background: none; }
.cv-glance .blk-seg-min { min-width: 10px; }
.cv-glance .blk-seg-written, .cv-gl-sw.st-written { background: var(--muted); }
.cv-glance .blk-seg-outside { background: var(--line); }
.cv-glance .blk-seg-gap, .cv-gl-sw.st-gap { background: repeating-linear-gradient(135deg, var(--line-hover) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--line-hover); }
/* The notch is drawn on a layer of its own: a clip on the segment would clip its tip too. */
.cv-glance .blk-seg-unsourced { background: none; }
.cv-glance .blk-seg-unsourced::before, .cv-gl-sw.st-unsourced { background: var(--warn);
  clip-path: polygon(0 0, calc(50% - 4px) 0, 50% 5px, calc(50% + 4px) 0, 100% 0, 100% 100%, 0 100%); }
.cv-glance .blk-seg-unsourced::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cv-glance .blk-seg-not_written, .cv-gl-sw.st-not_written { background: none; outline: 1px dashed var(--line-hover); outline-offset: -1px; }
.cv-gl-key { flex: none; display: inline-flex; gap: 12px; font: 400 var(--text-xs)/1 var(--mono); color: var(--muted); }
.cv-gl-k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cv-gl-sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
@media (max-width: 720px) { .cv-glance { flex-wrap: wrap; gap: 6px; } .cv-glance .blk-dist { flex-basis: 100%; } }

/* The plan's evidence grid (WRT P9): sections down, kinds of evidence across. A cell's state is its
   words and a mark's shape (on record a filled square, missing an outlined one), never colour
   alone; the claim a record supports, and what a section writes instead, ride the hover. */
.cv-egrid { margin: 0 0 28px; }
.cv-eg-h { margin: 0 0 8px; font: 500 var(--text-xs)/1 var(--mono); color: var(--muted); }
.cv-eg-wrap { overflow-x: auto; }
.cv-eg { width: 100%; border-collapse: collapse; font: 400 var(--text-xs)/1.4 var(--sans); }
.cv-eg th { padding: 6px 8px; text-align: left; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line-hover); }
.cv-eg th[scope="row"] { min-width: 128px; max-width: 220px; color: var(--ink); font-weight: 400; }
.cv-eg td { position: relative; padding: 6px 8px; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--line); }
.cv-eg-on { color: var(--ink); }
.cv-eg-miss { color: var(--ink); }
.cv-eg-none { color: var(--faint); }
.cv-eg-m { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 1px; vertical-align: 0; }
.cv-eg-on .cv-eg-m { background: var(--muted); }
.cv-eg-miss .cv-eg-m { box-shadow: inset 0 0 0 1px var(--warn); }
/* The door sits under its word: the column stays as narrow as "Missing". */
.cv-eg-miss .cv-btn-s { display: block; margin: 4px 0 0 14px; }
.cv-eg td:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The section editor's toolbar (WRT P9): Markdown verbs over the selection, above the text. */
.cv-ed-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
/* The Brand Kit's never-used words, counted under a section rewritten in brand voice (WRT P8). */
.cv-vc { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 8px; font: 400 var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.cv-vc .k { color: var(--ink); }
.cv-vc .v.is-found { color: var(--warn); }
/* A5: the never-used word flag above a section's text (AgentCanvasFlag), the word marked where it stands, and a kit
   with no voice kept (AgentModeStates). */
.cv-flag { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--warn-soft); color: var(--ink); }
.cv-flag-i { font-weight: 600; color: var(--warn); }
.cv-flag-t { flex: 1; margin: 0; }
.cv-sec mark.cv-nu-mark { background: var(--warn-soft); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px var(--warn); }
.cv-novoice { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.cv-novoice-t { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.cv-novoice-s { margin: 0 0 8px; color: var(--muted); }
.cv-xnote.cv-xhead { padding-bottom: 0; font-weight: 600; color: var(--ink); }

/* "Write this plan?" (canvas upgrades §2): the gate under the plan's evidence. The count and price read
   quiet, Write this plan is the one primary, and the plan opens for editing in place, a row per section. */
.cv-gate { margin: 0 0 28px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cv-gate-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cv-gate-k { font: 400 var(--type-small-size)/1.4 var(--font-sans); color: var(--muted); }
.cv-gate-p { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; margin-right: auto; font: 400 var(--type-small-size)/1.4 var(--font-sans); }
.cv-gate-v { color: var(--ink); font-variant-numeric: tabular-nums; }
.cv-gate-why { color: var(--muted); }
.cv-gate-pb { margin: 6px 0 0; font: 400 var(--type-meta-size)/1.4 var(--font-sans); color: var(--warn); }
.cv-gate-pb:empty { display: none; }
.cv-gate-list { margin: 12px 0 8px; padding: 0; list-style: none; }
.cv-gate-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto auto auto auto; align-items: center; gap: 6px 8px; margin: 0 0 6px; }
.cv-gate-row input { min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--canvas); color: var(--ink); font: 400 var(--type-small-size)/1.4 var(--font-sans); }
.cv-gate-s { font: 400 var(--type-meta-size)/1.3 var(--font-sans); color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) { .cv-gate-row { grid-template-columns: minmax(0, 1fr) auto auto auto; } .cv-gate-row .cv-gate-i { grid-column: 1 / -1; } .cv-gate-s { grid-column: 1 / -1; } }

/* P3-17 A6: the plan's retained editable rows, in the existing canvas surface. */
.cv-gate-bar .cv-gate-k { margin-right: auto; }
.cv-gate-row { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.cv-gate-label { grid-column: 1 / -1; display: grid; gap: 4px; min-width: 0; font: 500 var(--type-meta-size)/1.4 var(--font-sans); color: var(--muted); }
.cv-gate-label input { width: 100%; box-sizing: border-box; }
.cv-gate-s { white-space: normal; }
.cv-gate-row.is-dropped .cv-gate-h { text-decoration: line-through; }
@media (max-width: 720px) { .cv-gate-row .cv-gate-s { grid-column: 1 / -1; } }

/* ── The writing home: the canvas with no piece open (P3-17 WR1; the AgentCanvasHome boards) ──────────────────────────────────
   Three cards: P2's composer (its own look is ui-controls.css's, drawn at canvas size), What to write beside it, and the Library
   below. Nothing is open, so Contents has nothing to list and gives its column to the card grid. The grid answers the width the
   canvas has, not the screen's: the panel takes a third of it. Tokens only; light and dark follow them. */
/* No piece is open, so the header has no word count to show (canvas.js hides it; a class's display would beat the attribute). */
.v2-stamp[data-cv-id="cv-count"][hidden], #cv-count[hidden] { display: none; }
.cv-split:has(.wh) { grid-template-columns: minmax(0, 1fr) var(--agp-w); }
.cv-split:has(.wh) .cv-toc { display: none; }
.wh { container-type: inline-size; box-sizing: border-box; padding: var(--space-6) var(--space-6) var(--space-10); }
.wh-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); max-width: 1180px; margin: 0 auto; align-items: start; }
.wh-composer { min-width: 0; }
/* The note a blank ask carries under the box (P2's .ui-composer-note, in the canvas): one short helper line, kept to a reading measure. */
.wh-composer .ui-composer-blank { max-width: 62ch; text-wrap: pretty; }
.wh-card { box-sizing: border-box; min-width: 0; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
.wh-head { margin-bottom: var(--space-3); }
.wh-title { margin: 0; color: var(--ink); font: var(--type-card-title-weight) var(--type-card-title-size)/var(--type-card-title-leading) var(--type-card-title-family);
  letter-spacing: var(--type-card-title-tracking); }
.wh-sub, .wh-note { margin: 0; color: var(--muted); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-sans); }
.wh-sub { margin-top: var(--space-1); }
.wh-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.wh-error { margin: 0 0 var(--space-3); color: var(--neg); font: var(--type-small-weight) var(--type-small-size)/var(--type-small-leading) var(--font-sans); }
.wh-lost, .wh-rows { margin: 0; padding: 0; list-style: none; }
.wh-lost-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.wh-lost-row:first-child { border-top: 0; }
.wh-lost-body { display: grid; gap: var(--space-1); min-width: 0; }
.wh-q { color: var(--ink); font-weight: var(--type-body-strong-weight); overflow-wrap: anywhere; }
.wh-more, .wh-open-drafts { margin-top: var(--space-2); }
.wh-tabs { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.wh-tabs .link { margin-top: 0; }
.wh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.wh-row:first-child { border-top: 0; }
.wh-row-door { display: grid; gap: var(--space-1); min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; }
button.wh-row-door { cursor: pointer; }
button.wh-row-door:hover .wh-row-title { text-decoration: underline; }
button.wh-row-door:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }
.wh-row-title { color: var(--ink); font-weight: var(--type-body-strong-weight); overflow-wrap: anywhere; }
.wh-row-meta { color: var(--muted); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-sans); white-space: nowrap; }
.wh-row-state { color: var(--muted); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-sans); white-space: nowrap; }
.wh-tone-ok { color: var(--pos); }
.wh-tone-warn { color: var(--warn); }
.wh-tone-bad { color: var(--neg); }
.wh-tone-mute { color: var(--muted); }
/* Two columns from 820 px of the grid's own width, at the board's 1.4 : 1 (composer : What to write), REV-P3-17-wr1 ruling (b).
   The container is .wh, so its padding is outside the measure. Narrower, the cards stack, and What to write sits directly under
   the composer, as the board draws it. */
@container (min-width: 820px) {
  .wh-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .wh-library { grid-column: 1 / -1; }
}
@container (max-width: 520px) {
  .wh-card { padding: var(--space-4); }
  .wh-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wh-row-meta { grid-column: 1; }
  .wh-row-state { grid-column: 2; grid-row: 1; }
  .wh-write .v2-btn { min-height: 44px; }
  .wh-more, .wh-open-drafts { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 760px) {
  .wh { padding: var(--space-4) var(--space-4) var(--space-6); }
}