/* conversations.css — owned by new-ux lane 10; see docs/APP.md "The split stylesheets". */

/*
 * The conversation drawer stack and its turn blocks
 * (docs/new-ux/specs/10-conversations-drawers.md §B2/§B3,
 * docs/new-ux/CONTRACTS.md §2.7): the drawer body the assistant
 * controller renders into lane 06's surface shell, and the six block
 * types the block renderer appends into assistant turns.  Markup
 * source for the bk- rules: the shapes app_ctrl_blocks.js's render
 * functions actually emit on this tree; the Stetworth mockup's drawer
 * aside (mockup lines 756-851) is the visual reference only,
 * translated onto the style.css token registry.
 *
 * Token discipline (tests/test_app_design_tokens.py): every colour is
 * a var(--c-*) token (no hex literal), every font-size a var(--fs-*)
 * rung, every box-shadow a var(--focus-ring) composition.  The ask
 * and quote rules ride the LEFT edge at the single 3px status
 * width (edge law).  No motion: entrance animation and the
 * reduced-motion guard are lane 06's (surfaces.css); this sheet
 * declares none, so nothing here needs guarding.  Geometry and
 * stacking are AppSurface's: the drawer fills lane 06's .fs-body slot
 * (already a padded flex child that could scroll) and instead scrolls
 * .cv-turns internally so the composer stays pinned at the foot — no
 * fixed positioning, no stacking rung.  One conditional prelude only:
 * the 720px phone block at the tail, per the lane 06 split-sheet
 * amendment (§7.7) — a split sheet may carry no other media prelude
 * (tests/test_app_static.py TestSplitSheetMediaDiscipline), so the
 * below-360px one-tile figures rule is a min-width wrap device inside
 * that block, not a nested query.
 */

/* ---------------------------------------------------------------- */
/* The drawer shell (§B2)                                           */
/* ---------------------------------------------------------------- */

/* The root fills the surface body top to bottom: task pill row,
   context card, the scrolling turn list, the composer. */
.cv-drawer {
    display: flex;
    flex-direction: column;
    gap: 22px;  /* the mockup's body rhythm (dc.html :766) */
    height: 100%;
    min-height: 100%;
}

/* While the first fetch is in flight the composer reads as not yet
   ready; the skeleton itself is lane 06's loading markup inside the
   turn list. */
.cv-drawer[data-drawer-state="loading"] .cv-composer {
    opacity: 0.55;
}

/* A conversation the server no longer has: the controller toasts and
   closes; the moment between is quieted. */
.cv-drawer[data-drawer-state="gone"] {
    opacity: 0.55;
    pointer-events: none;
}

/* The one-line strip the controller raises after a task link opens a
   screen the bottom sheet is covering (§B4).  Drawn above the turns;
   the copy is the contract's, verbatim. */
.cv-drawer[data-drawer-hint="task-open"]::before {
    content: "Task opened below — close this to see it";
    flex: none;
    padding: var(--s-1) var(--s-3);
    background: var(--c-soft);
    color: var(--c-ink-soft);
    font-size: var(--fs-meta);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius-sm);
}

/* The head the drawer borrows from lane 06 (surfaces.css owns its
   chrome; these two rules are the drawer's own layout of it).  The
   mockup's head is a left group — title then the count line, both
   shrinking together — with the close × alone at the right
   (dc.html :757-759), so the shared `.fs-title { flex: 1 1 auto }` that
   would push the count across the head is shrunk back to its content
   and the drawer's own controls take the free space instead.  The
   title still ellipsises: it keeps `min-width: 0` and `overflow:
   hidden` from surfaces.css.  (The fidelity audit, 2026-09-11, drawer
   rows 7 and 8.) */
.fs-drawer .fs-title {
    flex: 0 1 auto;
}

.fs-drawer [data-conv-rename] {
    margin-left: auto;
}

/* The chip row: one chip per linked task.  The "{n} tasks from here"
   caption that used to head it is the surface head's now — the mockup
   draws it inline after the title (dc.html :760, gold dot), and the
   controller writes it into `[data-surface-title-meta]`. */
.cv-tasks {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    color: var(--c-burnished-text);
    font-size: var(--fs-meta);
}

/* The 6px gold dot the mockup seats before the count (dc.html :760).
   The count itself sits in the head's meta slot, which surfaces.css
   sizes and colours; only the dot is this sheet's. */
.cv-tasks-count::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: var(--s-1);
    vertical-align: middle;
    background: var(--c-gold);
    border-radius: 50%;
}

.cv-task-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    max-width: 100%;
    padding: var(--s-1) var(--s-2);
    background: var(--c-sand-card);
    color: var(--c-burnished-text);
    font-size: var(--fs-meta);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius-pill);
}

/* App-only: the mockup's conversation screen draws no task chip.  Its
   hover keeps step with .cv-context, the card the mockup does draw
   (dc.html :767), so both warm to the minted --c-gold-hover rung. */
.cv-task-chip:hover {
    border-color: var(--c-gold-hover);
    color: var(--c-ink);
}

.cv-task-chip:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The rename control beside lane 06's surface title (§B2), minted
   into the head by the controller.  The button is a quiet pencil
   glyph; the input takes the title's place in the head while a rename
   is in flight, and the title and the glyph are hidden for as long as
   it stands. */
[data-conv-rename] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--s-1);
    background: transparent;
    color: var(--c-ink-muted);
    font-size: var(--fs-ui);
    line-height: 1;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

[data-conv-rename]:hover {
    color: var(--c-ink);
}

[data-conv-rename]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The head is the surface's drag grip and paints `cursor: grab`
   (surfaces.css .fs-head), which inherits into anything minted inside
   it.  The editor is a text field, so it takes the caret back: without
   this the pointer over the rename box reads as "drag the sheet". */
[data-conv-rename-input] {
    flex: 1 1 auto;
    min-width: 0;
    cursor: text;
    padding: 0 var(--s-1);
    background: var(--c-sand-card);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-body);
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius-sm);
    outline: none;
}

[data-conv-rename-input]:focus-visible {
    box-shadow: var(--focus-ring);
}

/* The "About a decision / improvement / task" context card
   (mockup 767): eyebrow, the anchored text, the basis line.  The
   children are pinned in that order by §B2, so the card styles them
   structurally rather than minting extra classes. */
.cv-context {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--c-sand-page);
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--c-sand-rule);
    border-left: 3px solid var(--c-gold);
    border-radius: var(--radius);
}

/* dc.html :767 hovers the card's border to the mockup's hover rung,
   `--c-gold-hover`, not to the resting gold its left rule keeps. */
.cv-context:hover {
    border-color: var(--c-gold-hover);
}

.cv-context:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.cv-context > :first-child {
    color: var(--c-ink-muted);
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;  /* the mockup's eyebrow tracking (dc.html :767) */
    text-transform: uppercase;
}

.cv-context > :nth-child(2) {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.35;
    color: var(--c-ink);
}

.cv-context > :nth-child(3) {
    font-size: var(--fs-meta);
    color: var(--c-burnished-text);
}

/* An open decision's options follow the basis line inside the card
   (fidelity row 9): a bare inline list in the basis line's voice. */
.cv-anchor-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-meta);
    color: var(--c-burnished-text);
}

/* The turn list: the drawer's one scroll region, so the composer
   below it stays pinned to the sheet foot without any positioning. */
.cv-turns {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    margin: 0;
    padding: var(--s-2) 0 var(--s-4);
    overflow: auto;
    list-style: none;
}

.cv-turn {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

/* A user turn is a bubble seated to the left (mockup 770-772);
   assistant turns hold block roots and stay full measure. */
.cv-turn[data-turn-author="user"] {
    align-self: flex-start;
    max-width: 90%;
    padding: 10px 14px;
    background: var(--c-sand-page);
    color: var(--c-ink-soft);
    font-size: var(--fs-14-5);
    line-height: 1.45;
    border-radius: var(--r-10) var(--r-10) var(--r-10) 3px;
}

.cv-turn[data-turn-author="user"] p {
    margin: 0;
}

/* The bubble body is the person's text escaped, not markup: the
   composer keeps Shift+Enter = newline (spec 10 :108), so the stored
   body carries the line breaks they typed and the bubble must keep
   them — pre-wrap paints each one, and anywhere-wrapping stops one
   long token (a URL, a path) from pushing the bubble past 90%. */
.cv-turn[data-turn-author="user"] .cv-bubble {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The optimistic echo: visibly provisional until the server's turn
   replaces it. */
.cv-turn[data-conv-echo] {
    opacity: 0.65;
}

/* The pending assistant row holds only the thinking dots. */
.cv-turn[data-conv-pending] {
    flex-direction: row;
    align-items: center;
}

/* Three 7px gold dots (dc.html :838-844): the row holds three empty
   spans and the pending sentence only as its aria-label, so it paints
   no text.  The blink (fs-blink, 1.2s, .2s/.4s delays) and its
   reduced-motion guard are lane 06's, in surfaces.css. */
.cv-thinking {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--s-1) 0;
    line-height: 1;
}

.cv-thinking > span {
    width: 7px;
    height: 7px;
    background: var(--c-gold);
    border-radius: 50%;
}

/* The designed empty-conversation fallback ("Say what you want to
   know.", §B8) — quiet serif, vertically centred in the list. */
.cv-empty[data-conv-empty] {
    margin: auto 0;
    padding: var(--s-4) 0;
    font-family: var(--font-text);
    font-size: var(--fs-lede);
    color: var(--c-ink-muted);
}

/* The composer (mockup 846-848): a bordered field row with the send
   button seated inside its right edge. */
.cv-composer {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 6px 6px 6px 14px;
    background: var(--c-sand-page);
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--r-10);
}

.cv-composer [data-conv-input] {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--s-2) 0;
    background: transparent;
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-body);
    line-height: 1.4;
    border: 0;
    outline: none;
    resize: none;
}

.cv-composer [data-conv-input]:disabled {
    color: var(--c-ink-muted);
    cursor: not-allowed;
}

.cv-composer [data-conv-send] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--c-accent);
    color: var(--c-sand-card);
    line-height: 1;
    border: 0;
    border-radius: var(--r-7);
    cursor: pointer;
}

.cv-composer [data-conv-send]:hover {
    background: var(--c-accent-hover);
}

.cv-composer [data-conv-send]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cv-composer [data-conv-send]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The footer archive action (§B2): a quiet text control under the
   composer. */
[data-conv-archive] {
    flex: none;
    align-self: flex-start;
    padding: 0 var(--s-1);
    background: transparent;
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}

[data-conv-archive]:hover {
    color: var(--c-ink);
}

[data-conv-archive]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The archive confirm dialog's body and its §7.9 button pair: Cancel
   quiet, the accept carrying the ink. */
.cv-confirm-body {
    margin: 0 0 var(--s-3);
    color: var(--c-ink-muted);
}

.cv-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
}

.cv-confirm-cancel,
.cv-confirm-accept {
    min-height: 44px;
    padding: 0 var(--s-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-rule);
    background: transparent;
    color: var(--c-ink);
    cursor: pointer;
}

.cv-confirm-accept {
    background: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
}

.cv-confirm-cancel:focus-visible,
.cv-confirm-accept:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------------- */
/* The turn blocks (§2.7 / §B3)                                     */
/* ---------------------------------------------------------------- */

/* text — markdown-lite prose in the correspondence serif
   (mockup 775). */
.bk-text {
    font-family: var(--font-text);
    font-size: var(--fs-lede);
    line-height: 1.4;
    color: var(--c-ink);
    overflow-wrap: break-word;
}

.bk-text p {
    margin: 0 0 var(--s-3);
}

.bk-text ul {
    margin: 0 0 var(--s-3);
    padding-left: var(--s-4);
}

.bk-text li {
    margin: var(--s-1) 0;
}

.bk-text > :last-child {
    margin-bottom: 0;
}

.bk-text code {
    padding: 0 var(--s-1);
    background: var(--c-soft);
    font-family: var(--font-mono);
    font-size: var(--fs-ui);
    border-radius: var(--radius-sm);
}

/* event — a small uppercase pill marking something that happened
   (mockup 774); its first child is the linked or plain label, and a
   trailing status span may follow. */
.bk-event {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-micro);
}

/* The green-tinted pill (dc.html :774).  Its tint pair is minted:
   style.css :166-167 declares --c-status-complete-soft and
   --c-status-complete-rule, both pinned by TINT_TOKENS, so the chip
   paints the mockup's ground and border outright — the old
   "until minted" fallbacks to --c-sand-page / --c-sand-rule were dead
   from the day the request landed (review round 6, R6-V2-1). */
.bk-event > :first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: var(--c-status-complete-soft);
    color: var(--c-status-complete);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--c-status-complete-rule);
    border-radius: var(--radius-pill);
}

.bk-event > a:first-child:hover {
    border-color: var(--c-status-complete);
}

.bk-event > a:first-child:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.bk-event [data-display-status] {
    color: var(--c-ink-muted);
    letter-spacing: var(--track-tag);
    text-transform: uppercase;
}

/* figures — stat tiles, two to a row, the value in the display face
   over an uppercase label (dc.html :776-781): 10px grid gap, 14px 16px
   tile padding, the value on the 30px rung. */
.bk-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bk-figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--c-sand-page);
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius);
}

.bk-figure-value {
    font-family: var(--font-display);
    font-size: var(--fs-30);
    line-height: 1.1;
    color: var(--c-ink);
}

.bk-figure-label {
    color: var(--c-ink-muted);
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* items — one card per surfaced thing (app_ctrl_blocks.js
   renderItems; mockup 786-791).  The renderer emits a flat card: an
   optional provider chip (AppFoundation.mark) prepended before
   span.bk-item-title, then optional span.bk-item-meta and
   span.bk-item-tag.  The mockup's meta-row-over-title arrangement is
   recreated with wrap order — chip and meta lead the top row, the tag
   rides its right edge, and the full-width title drops below. */
.bk-items {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.bk-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--c-sand-page);
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius);
}

/* dc.html :789 hovers the item's border to the mockup's hover rung,
   `--c-gold-hover`. */
.bk-item:hover {
    border-color: var(--c-gold-hover);
}

.bk-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The provider chip is the card's first child only when the renderer
   prepends one — the title span leads otherwise — so the chip rule is
   structural (scoped like the sheet's .bk-text p idiom; .fs-mark is
   lane 06's class and data-mark is §6.2, neither in this sheet's
   selector grant): lane 06's pill compacts to the mockup's 22×22 mark
   tile. */
.bk-item > :first-child:not(.bk-item-title) {
    flex: none;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: var(--radius-sm);
}

.bk-item-meta {
    order: 1;
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
}

.bk-item-tag {
    order: 2;
    margin-left: auto;
    color: var(--c-accent);
    font-size: var(--fs-meta);
    font-weight: 500;
}

.bk-item-title {
    order: 3;
    width: 100%;
    font-family: var(--font-text);
    font-size: var(--fs-base);
    line-height: 1.3;
    color: var(--c-ink);
    overflow-wrap: break-word;
}

/* asks — a question card carried on the gold left rule, its options
   as pill buttons that wrap into rows (mockup 796-803).  The options
   flow inline so they row-wrap whether or not the renderer wraps
   them in a container. */
.bk-asks {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.bk-ask {
    padding: 12px 14px;
    background: var(--c-sand-page);
    border: 1px solid var(--c-sand-rule);
    border-left: 3px solid var(--c-gold);
    border-radius: var(--radius);
}

.bk-ask-q {
    margin: 0 0 var(--s-2);
    color: var(--c-ink);
    font-size: var(--fs-13-5);
    line-height: 1.4;
}

.bk-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px 6px 0;
    padding: 5px 10px;
    background: transparent;
    color: var(--c-ink-soft);
    font-family: inherit;
    font-size: var(--fs-12-5);
    line-height: 1.3;
    text-align: center;
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.bk-option:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/* The picked option is filled accent (dc.html :1022: accent border and
   ground, light text). */
.bk-option[data-picked="true"] {
    background: var(--c-accent);
    color: var(--c-sand-card);
    border-color: var(--c-accent);
}

.bk-option:disabled {
    opacity: 0.6;
    cursor: default;
}

.bk-option[data-picked="true"]:disabled {
    opacity: 1;
}

.bk-option:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* draft — the dashed proposed-task card (mockup 810-829): eyebrow,
   the draft text, the optional credit quote, the four readiness
   checks, then the action row. */
.bk-draft {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: 14px 16px;
    background: var(--c-sand-card);
    border: 1px dashed var(--c-rule-strong);
    border-radius: var(--radius);
}

/* The "Draft" eyebrow (span.bk-draft-eyebrow, app_ctrl_blocks.js
   renderDraft). */
.bk-draft-eyebrow {
    color: var(--c-ink-muted);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--track-tag);
    text-transform: uppercase;
}

.bk-draft-text {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--fs-base);
    line-height: 1.35;
    color: var(--c-ink);
    overflow-wrap: break-word;
}

.bk-draft-quote {
    margin: 0;
    padding-left: var(--s-3);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    font-style: italic;
    line-height: 1.4;
    color: var(--c-ink-muted);
    border-left: 3px solid var(--c-sand-rule);
}

/* The readiness checks: chips on desktop, each keyed ok / missing by
   its data-ok state.  The hint travels only as each row's title=
   (app_ctrl_blocks.js renderDraft) — a native tooltip on desktop; the
   phone block below surfaces it as visible text instead. */
.bk-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bk-checks [data-check] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    font-size: var(--fs-meta);
    line-height: 1.2;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius-pill);
}

/* ok = green tint, missing = amber tint (dc.html :1025).  Both pairs are
   minted in style.css's token registry — --c-gold-soft/-rule at :110-111
   and --c-status-complete-soft/-rule at :166-167, all four pinned by
   TINT_TOKENS — so these paint the mockup's colours with no fallback to
   argue about (review round 6, R6-V2-1). */
.bk-checks [data-ok="true"] {
    background: var(--c-status-complete-soft);
    color: var(--c-status-complete);
    border-color: var(--c-status-complete-rule);
}

.bk-checks [data-ok="false"] {
    background: var(--c-gold-soft);
    color: var(--c-burnished-text);
    border-color: var(--c-gold-rule);
}

/* The action row: "Run this task" (or "Run anyway"), the missing-
   checks line, and "Edit first" seated at the right edge. */
.bk-draft-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-1);
}

.bk-draft [data-draft-run] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    background: var(--c-accent);
    color: var(--c-sand-card);
    font-family: var(--font-ui);
    font-size: var(--fs-13);
    font-weight: 500;
    border: 1px solid var(--c-accent);
    border-radius: var(--r-6);
    cursor: pointer;
}

/* "Run anyway" (not every check passed) is the outline variant
   (dc.html :824): sand-rule border, no fill, ink-soft text. */
.bk-draft [data-draft-ready="false"][data-draft-run] {
    background: transparent;
    color: var(--c-ink-soft);
    border-color: var(--c-rule-strong);
}

/* dc.html :824 hovers "Run anyway"'s border to the mockup's hover
   rung, `--c-gold-hover`. */
.bk-draft [data-draft-ready="false"][data-draft-run]:hover {
    background: transparent;
    color: var(--c-ink-soft);
    border-color: var(--c-gold-hover);
}

.bk-draft [data-draft-run]:hover {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
}

.bk-draft [data-draft-run]:disabled {
    opacity: 0.6;
    cursor: default;
}

.bk-draft [data-draft-run]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.bk-draft [data-draft-edit] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: var(--s-1) var(--s-2);
    background: transparent;
    color: var(--c-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--fs-13);
    text-decoration: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.bk-draft [data-draft-edit]:hover {
    color: var(--c-accent);
}

.bk-draft [data-draft-edit]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.bk-draft [data-draft-missing] {
    margin: 0;
    color: var(--c-burnished-text);
    font-size: var(--fs-12-5);
}

/* The sent state that replaces the action row on a 201 (§B4). */
.bk-draft-sent,
.bk-draft [data-draft-sent] {
    margin: 0;
    color: var(--c-status-complete);
    font-size: var(--fs-13);
}

/* ---------------------------------------------------------------- */
/* Phone (§2.7 / §7.8): the drawer is a bottom sheet, blocks run     */
/* full width, and every tap target clears the 44px floor.  The one  */
/* conditional prelude this sheet may own.                           */
/* ---------------------------------------------------------------- */

@media (max-width: 720px) {
    .cv-drawer {
        gap: var(--s-2);
    }

    /* The chip row scrolls sideways instead of wrapping. */
    .cv-tasks {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--s-1);
    }

    .cv-task-chip {
        flex: none;
    }

    /* The context card runs the sheet's full width. */
    .cv-context {
        align-self: stretch;
    }

    /* The rename input takes the single-column title row's width. */
    [data-conv-rename-input] {
        width: 100%;
    }

    /* Bubbles and blocks run full width inside the sheet. */
    .cv-turn[data-turn-author="user"] {
        max-width: 100%;
    }

    /* Two stat tiles per row; below a 360px viewport the row narrows
       to one tile.  A split sheet may carry no second media prelude,
       so the flip is a wrap device: the half-row basis caps rows at
       two tiles, and the 157px floor (the half of a 360px viewport
       left inside the sheet's borders and body padding) forces the
       wrap to one tile per row on anything narrower. */
    .bk-figures {
        display: flex;
        flex-wrap: wrap;
    }

    .bk-figure {
        flex: 1 1 calc(50% - var(--s-2));
        min-width: 157px;
    }

    /* Item cards stack full width. */
    .bk-item {
        align-self: stretch;
    }

    /* Option pills wrap two to a row at the touch floor. */
    .bk-option {
        width: 47%;
        min-height: 44px;
    }

    /* Check rows stack, the hint visible under the label — touch has
       no tooltips, so each row's title= (the hint's only carrier,
       app_ctrl_blocks.js renderDraft) is surfaced as text: a
       full-width ::after inside the wrapping flex row lands it on its
       own line under the label. */
    .bk-checks {
        flex-direction: column;
    }

    .bk-checks [data-check] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: var(--s-2) var(--s-3);
        border-radius: var(--radius-sm);
    }

    .bk-checks [data-check]::after {
        content: attr(title);
        width: 100%;
        color: var(--c-ink-muted);
        font-size: var(--fs-meta);
    }

    /* The draft action row wraps with "Run this task" full width
       first; "Edit first" falls to its own row at the left. */
    .bk-draft [data-draft-run] {
        width: 100%;
        min-height: 44px;
    }

    .bk-draft [data-draft-edit] {
        margin-left: 0;
        min-height: 44px;
    }

    /* The composer sits on the sheet foot: the send button at the
       44px floor, the field padded clear of the home-indicator
       inset. */
    .cv-composer {
        padding: var(--s-1) var(--s-1) calc(var(--s-1) + env(safe-area-inset-bottom)) var(--s-3);
    }

    .cv-composer [data-conv-send] {
        width: 44px;
        height: 44px;
    }
}