/* Calm Instrument Slice 5: Prepare conversation (.pv) and its print brief, the paper brief (.pb).
   Prepare is an internal account brief: one reading column (~680px) and a narrow supporting rail (~300px), sections
   separated by space and a kicker, not boxes. Why and the outcome lead; the next step closes the column. The rail
   holds Before you say it, the service and its price (never larger than the service), and preparation (not tasks).
   Cautions are not errors: a caution (orange, solid rule), something not known (violet, dashed), a commercial
   limit (teal) — each with its glyph and its label as well as its colour. The paper brief is light, editorial and
   labelled as internal preparation at the top and the foot; it never prints a figure. Tokens only; scoped to .pv
   and .pb, so nothing reaches another page. */

/* ---- Prepare conversation ---------------------------------------------------------------------------------- */
.pv { container: pv / inline-size; max-width: 1060px; }
.pv-crumb { margin: 0 0 var(--s3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.pv-crumb .ci-link { color: var(--text-2); text-decoration-color: transparent; overflow-wrap: anywhere; }
.pv-crumb .ci-link:hover { text-decoration-color: var(--line-strong); }
.pv .ci-ph { align-items: flex-start; margin-bottom: var(--s8); }
.pv .ci-ph-desc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.pv-who { color: var(--text-2); overflow-wrap: anywhere; }
.pv-dot { color: var(--muted); }
.pv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-copied { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-strong); color: var(--progress); }
.pv-copied:empty { display: none; }

.pv-grid { display: grid; grid-template-columns: minmax(0, 680px) minmax(240px, 300px); column-gap: var(--s9); align-items: start; }
.pv-solo { grid-template-columns: minmax(0, 680px); }
.pv-main, .pv-rail { min-width: 0; }

.pv-sec + .pv-sec { margin-top: var(--s7); }
.pv-sec h2 { margin: 0 0 var(--s2); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-sec p { margin: 0; max-width: 68ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); overflow-wrap: anywhere; }
.pv-sec p + p { margin-top: var(--s2); }
.pv-sec .pv-lead { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-strong); letter-spacing: -.01em; }
.pv-sec .pv-outcome { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-strong); }

.pv-changes, .pv-evlist, .pv-qs, .pv-cautions ul, .pv-prep ul { list-style: none; margin: 0; padding: 0; }
.pv-changes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; color: var(--text); overflow-wrap: anywhere; }
.pv-changes li + li { margin-top: var(--s2); }

.pv-sec .pv-extent { display: inline-block; margin-bottom: var(--s2); font-weight: var(--fw-strong); }
.pv-sec .pv-extent-Bounded { color: var(--unknown); border-bottom: 1px dashed var(--line-unknown); }
/* No single count for the need (a theme of findings): said quietly; the lines below carry their own counts. */
.pv-sec .pv-extent-NotQuantified { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--muted); border-bottom: 1px dashed var(--line-strong); }
.pv-evlist li { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.pv-evlist li:last-child { border-bottom: 1px solid var(--line); }
.pv-evt { display: block; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.pv-evd { display: block; margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }

.pv-sec .pv-first { font-weight: var(--fw-strong); }
.pv-sec .pv-unlock { padding-left: var(--s3); border-left: 2px dashed var(--line-strong); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }

.pv-qs { counter-reset: pvq; }
.pv-qs li { counter-increment: pvq; display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 6px 0; font-size: var(--fs-heading); line-height: var(--lh-heading); color: var(--text); overflow-wrap: anywhere; }
.pv-qs li::before { content: counter(pvq); color: var(--muted); font-weight: var(--fw-strong); }

.pv-main .pv-next { padding-top: var(--s5); border-top: 1px solid var(--line-strong); }
.pv-sec .pv-nexttext { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-strong); }
.pv-sec .pv-note { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }

/* The rail: what to have in mind. Never sticky; on a narrow screen it follows the column. */
.pv-c { padding: 2px 0 2px var(--s3); border-left: 3px solid var(--caution); }
.pv-c + .pv-c { margin-top: var(--s4); }
.pv-c-label { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-strong); color: var(--caution); }
.pv-c-g { display: inline-block; min-width: 1ch; text-align: center; }
.pv-c-text { display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); overflow-wrap: anywhere; }
.pv-c-unknown { border-left: 2px dashed var(--line-unknown); padding-left: 13px; }
.pv-c-unknown .pv-c-label { color: var(--unknown); }
.pv-c-commercial { border-left-color: var(--line-commercial); }
.pv-c-commercial .pv-c-label { color: var(--commercial); }

.pv-sec .pv-svc-name { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-strong); }
.pv-svc-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pv-sec .pv-svc-state { margin-top: 2px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.pv-sec .pv-svc-ReadyToPropose { font-weight: var(--fw-strong); color: var(--commercial); }
.pv-sec .pv-svc-NeedsInformation { color: var(--unknown); }
.pv-sec .pv-price { margin-top: var(--s2); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }

.pv-prep li { position: relative; padding-left: 22px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); overflow-wrap: anywhere; }
.pv-prep li + li { margin-top: var(--s2); }
.pv-prep li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border: 1.5px solid var(--muted); border-radius: var(--r-full); }

.pv-quiet { max-width: 680px; }
.pv-quiet h2 { margin: 0 0 var(--s2); font-size: var(--fs-title); line-height: var(--lh-title); color: var(--text); }
.pv-quiet p { margin: 0; color: var(--text-2); }

.pv-copytext { max-width: 680px; margin-top: var(--s8); }

@container pv (max-width: 1000px) {
    .pv-grid { grid-template-columns: minmax(0, 680px); }
    .pv-rail { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line-strong); }
}
@media (max-width: 900px) {
    .pv-tools .ci-btn { min-height: var(--h-touch); }
}
@media (max-width: 640px) {
    .pv .ci-ph { margin-bottom: var(--s6); }
    .pv-tools .ci-btn { flex: 1 1 auto; }
    .pv-copied { flex-basis: 100%; }
    .pv-sec + .pv-sec { margin-top: var(--s6); }
}

/* ---- The paper brief ------------------------------------------------------------------------------------- */
.pb { min-height: 100vh; padding: var(--s8) var(--s4) var(--s9); background: var(--paper); color: var(--paper-ink); font: var(--fw-body) 14px/1.55 var(--font); }
.pb-sheet { max-width: 720px; margin: 0 auto; }
.pb a { color: var(--paper-ink); text-underline-offset: 3px; }
.pb :focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
.pb-tools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: 0 0 var(--s6); }
.pb-btn { min-height: var(--h-control); padding: 8px 16px; border-radius: var(--r-md); border: 1px solid var(--paper-ink); background: transparent; color: var(--paper-ink); font: var(--fw-strong) var(--fs-control)/var(--lh-control) var(--font); cursor: pointer; }
.pb-internal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--s4); margin: 0 0 var(--s5); padding-bottom: var(--s2); border-bottom: 2px solid var(--paper-ink); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-ink-2); }
.pb-not { color: var(--paper-ink); }
.pb h1 { margin: 0 0 4px; font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -.01em; color: var(--paper-ink); overflow-wrap: anywhere; }
.pb-meta { margin: 0 0 var(--s2); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--paper-ink-3); }
.pb-sec { margin-top: var(--s5); }
.pb-sec h2 { margin: 0 0 6px; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-ink-3); }
.pb-sec p, .pb-sec li { margin: 0; color: var(--paper-ink); overflow-wrap: anywhere; }
.pb-sec p + p { margin-top: 4px; }
.pb-sec ul, .pb-sec ol { margin: 0; padding-left: 20px; }
.pb-sec li + li { margin-top: 3px; }
.pb-sec .pb-lead { font-size: 16px; line-height: 1.45; font-weight: var(--fw-strong); }
.pb-sec .pb-first, .pb-sec .pb-next { font-weight: var(--fw-strong); }
.pb-cat { font-weight: 600; color: var(--paper-ink-2); }
.pb-sec .pb-extent { margin-bottom: 4px; font-weight: var(--fw-strong); }
.pb-sec .pb-extent-Bounded { color: var(--paper-unknown); }
.pb-sec .pb-extent-NotQuantified { font-size: var(--fs-meta); font-weight: 600; color: var(--paper-ink-3); }
.pb-sec .pb-cautions { list-style: none; padding: 0; }
.pb-sec .pb-c { padding: 2px 0 2px 10px; border-left: 3px solid var(--paper-caution); }
.pb-sec .pb-c + .pb-c { margin-top: 6px; }
.pb-c-label { font-weight: var(--fw-strong); color: var(--paper-caution); }
.pb-sec .pb-c-unknown { border-left: 2px dashed var(--paper-unknown); padding-left: 11px; }
.pb-c-unknown .pb-c-label { color: var(--paper-unknown); }
.pb-sec .pb-c-commercial { border-left-color: var(--paper-commercial); }
.pb-c-commercial .pb-c-label { color: var(--paper-commercial); }
.pb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--s4); margin-top: var(--s8); padding-top: var(--s2); border-top: 1px solid var(--paper-rule); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--paper-ink-3); }
.pb-mark { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-ink); }

@media (max-width: 600px) {
    .pb { padding: var(--s5) var(--s4) var(--s8); }
    .pb h1 { font-size: 22px; line-height: 28px; }
    .pb-btn { min-height: var(--h-touch); }
}

/* On paper: real margins (the header never meets the edge of the sheet), no ground, and no heading, caution,
   question or service left alone at the foot of a page. */
@page { size: A4; margin: 16mm 16mm 18mm; }
@media print {
    .pb { min-height: 0; padding: 0; background: none; font-size: 10pt; line-height: 1.45; }
    .pb-sheet { max-width: none; }
    .pb-internal { margin-bottom: 4mm; }
    .pb h1 { font-size: 18pt; line-height: 1.25; }
    .pb-sec { margin-top: 3.5mm; }
    .pb-sec h2 { margin-bottom: 1mm; }
    .pb-sec .pb-lead { font-size: 11.5pt; }
    .pb-foot { margin-top: 6mm; }
    .pb-head, .pb-sec h2 { break-after: avoid; page-break-after: avoid; }
    .pb-sec { break-inside: avoid; page-break-inside: avoid; }
    .pb-sec li, .pb-sec p { break-inside: avoid; page-break-inside: avoid; }
    .pb a { text-decoration: none; }
}