/* ══ THE WALK'S FORMS IN THE SHEET LANGUAGE ══════════════════════════════════
   Steven 2026-10-14 morning, his screenshot of the "Questions · From Bree"
   popup (a purple header bar, numbered "01 OPEN" dotted rows, boxed radio
   options with a thin border, a Yes/No pair in a black outline, a long note,
   a checkbox, Cancel and a green Send): "The popup question page doesn't
   look redesigned; use our design tokens and adjust them."

   The forms a person fills on the walk are brought into the sheet language
   (static/css/pages/step-cards.css, "THE SHEET LANGUAGE": .sl-sheet,
   .sl-scroll, .sl-kicker-row, .sl-want, .sl-title / .sl-hl, .sl-ask,
   .sl-label, .sl-rows / .sl-row / .sl-check, .sl-field / .sl-input,
   .sl-info, .sl-status, .sl-foot). Each is one flat sheet, nothing nested,
   the foot pinned under the scroll. This file holds only what the forms
   add to the language; every value is a token (static/css/tokens.css), and
   app/tests/test_walk_forms.py holds it to test_card_tokens' checks.

   It is its own sheet, linked by the forms themselves, not a section of
   step-cards.css: step-cards.css rides css/bundle/home.css on the deck, so a
   change there is a bundle rebuild and a ?v= bump in six templates of other
   lanes; this file comes with the markup that needs it, after the page's
   sheets, so its rules win where the old ones also match.

     THE QUESTIONS SHEET   an agent's questions before it plans
                           (feed/_want_cards.html questions_sheet_head,
                           finalist_question_field and the two modals)
       .wf-qsheet           the modal: the scrim; want-finalist.js makes it a
                            <dialog>, so it is also the top layer's box
       .wf-qsheet__round    the agent's moving round in the kicker row
       .wf-qsheet__want     the want's line, filled from the page on open
       .wf-q                one question: .wf-q__num (the purple mono "01",
                            .sl-label), .wf-q__title (the heading face),
                            .wf-q__help, then its control
       .wf-q__row           a choice: an .sl-row holding its native radio or
                            checkbox (or a Yes / No button) and the .sl-check
                            that draws it; .wf-q__other the Other box
       .wf-qsheet__carry    "Carry my answers ..." as a row with its check
       .wf-qsheet__foot     the pinned foot: "Send to Bree", Cancel */

/* ── THE QUESTIONS SHEET ─────────────────────────────────────────────────── */

/* The modal is the scrim and holds the sheet on the bottom of the screen,
   the card's width (.sl-sheet). As a <dialog> (want-finalist.js openPanel)
   it is the top layer's whole screen; its backdrop stays clear because the
   modal is its own scrim. */
.wf-qsheet[hidden], dialog.wf-qsheet:not([open]) { display: none !important; }
.wf-qsheet {
  position: fixed; inset: 0; z-index: var(--z-fullscreen);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--surface-overlay); color: var(--text-primary);
  overflow: hidden; overscroll-behavior: contain;
}
dialog.wf-qsheet::backdrop { background: transparent; }
.wf-qsheet > .sl-sheet { flex: none; margin: auto auto 0; }

/* The kicker row: the agent's round in the disc column, "QUESTIONS · FROM
   BREE", the X on the right edge. */
.wf-qsheet__round {
  flex: none; display: block; position: relative; overflow: hidden;
  width: var(--sl-disc, var(--size-10)); height: var(--sl-disc, var(--size-10));
  border-radius: var(--radius-full); background: var(--surface-tertiary);
}
/* The round's own <link> and <script> ride beside it (they stay
   display: none); only the picture fills the disc. */
.wf-qsheet__round > :is(.agent-round, .aa, svg) { display: block; width: 100%; height: 100%; }

/* The questions: one block each, flat on the sheet, air between them. */
.wf-qsheet .finalist-questions {
  display: flex; flex-direction: column; gap: var(--space-6);
  margin: var(--space-2) 0 0; padding: 0; list-style: none;
}
.wf-qsheet__area { display: flex; flex-direction: column; gap: 0; }
.wf-qsheet__area[hidden] { display: none; }
.wf-qsheet__block { margin: 0; padding: 0; border: 0; }
.wf-q {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0; padding: 0; border: 0; background: none;
}
/* The number is the language's purple mono label, never the old ringed
   badge (toll-bench-sheets.css and approved-proposals.css still draw
   .finalist-question__number as a circle on the old sheet). */
.wf-q > .wf-q__num {
  display: block; width: auto; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; color: var(--tb-brand-purple);
}
.wf-q__title, .wf-q > .finalist-question__label {
  display: block; margin: 0;
  font: var(--font-bold) var(--text-lg)/var(--leading-snug) var(--font-heading);
  color: var(--text-primary); overflow-wrap: anywhere;
}
.sl-sheet .wf-q__title, .sl-sheet .wf-q > .finalist-question__label { font-family: var(--font-heading) !important; }
.wf-q__help, .wf-q > .finalist-question__help {
  margin: 0; font: var(--font-normal) var(--text-sm)/var(--leading-snug) var(--font-body); color: var(--text-secondary);
}
.wf-q > .sl-rows, .wf-q > .sl-field, .wf-q > .sl-input, .wf-q > .wf-q__form { margin-top: var(--space-1); }

/* A choice: the row is the tap target, at least the size of a thumb; the
   native control stays in it for the script and the keyboard, drawn by the
   purple check beside the words. A Yes / No answer is a button row whose
   aria-pressed draws the same check. */
.wf-q__row {
  position: relative; width: 100%; min-height: var(--size-12);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.wf-q__row { margin: 0; padding: var(--space-2) 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.wf-q__row > input[type="radio"], .wf-q__row > input[type="checkbox"] {
  position: absolute; top: 50%; right: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; opacity: 0; pointer-events: none;
}
.wf-q__row > input:checked ~ .sl-check,
.wf-q__row[aria-pressed="true"] > .sl-check {
  border-color: var(--tb-brand-purple); background: var(--tb-brand-purple); color: var(--color-white);
}
.wf-q__row > input:focus-visible ~ .sl-check { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; }
.wf-q__row:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.wf-q__row > .sl-check { cursor: pointer; }
.wf-q__row .sl-row__name { font-weight: var(--font-medium); }
.wf-q__other { margin-top: var(--space-1); }

/* Put in order: each row's place picker stands in the right column. */
.wf-q__rank > .wf-q__row { cursor: default; }
.sl-sheet .wf-q__place {
  width: auto; min-width: var(--size-16); min-height: var(--size-10);
  padding: 0 var(--space-3); font-size: var(--text-base) !important;
}

/* A number with its unit; a form's named fields. */
.wf-q__number { flex-direction: row; align-items: center; }
.wf-q__unit { flex: none; font: var(--font-medium) var(--text-base)/1 var(--font-body); color: var(--text-secondary); }
.wf-q__form { display: flex; flex-direction: column; gap: var(--space-4); }
.wf-q__fieldlabel { font: var(--font-semibold) var(--text-sm)/var(--leading-snug) var(--font-body); color: var(--text-secondary); }

/* The legacy lines say who to expect a plan from, in the ask's voice. */
.wf-qsheet__legacy { margin-top: var(--space-2); }
.wf-qsheet .sl-info { margin-top: var(--space-6); }
.wf-qsheet__missing, .wf-qsheet__error { margin: var(--space-3) 0 0; }
.wf-qsheet__missing[hidden], .wf-qsheet__error[hidden] { display: none; }
.wf-qsheet__error { color: var(--color-red-600); }

/* "Carry my answers to the next agents on this want": a row, its check at
   the right, on the sheet's edge under the note. */
.wf-qsheet__carry { margin-top: var(--space-4); }

/* The foot: the one green control and Cancel as words. No deal yet, so no
   fail dot in the corner: the foot runs the sheet's width. */
.wf-qsheet .sl-foot { padding-right: var(--sl-edge, var(--space-5)); }
.wf-qsheet .sl-foot__go:hover { background: var(--accent-neon); }
.wf-qsheet .sl-foot__go:disabled { opacity: .5; cursor: not-allowed; }

/* ── THE ANSWER FORM ON A QUESTION STEP ────────────────────────────────────
   The person answers the agent's named questions (a PROVIDE step's blocks,
   targets/_path_macros.html har_blocks_fields inside form[data-tp-har-form]). On the
   work sheet the questions were a white card each on the grey sheet, the
   choices grey pills, the button purple: cards inside a sheet. Now the form
   is one white surface (the artifact card's: the same corner and inset),
   each question a block on it the way the questions sheet draws one (the
   purple mono "01" with Required or Optional beside it in the same caps,
   the question in the heading face, its control), a choice a list of rows
   with the purple check at the right, and the step's one control pinned as
   the sheet's foot, green, clear of the fail dot. The text boxes keep the
   work sheet's own sunken box, which .sl-input already is.

   The work sheet's quieting rules (step-cards.css, .is--cards .sc-sheet--work
   .sc-work__body ...) style these pieces with !important at four classes'
   weight; these carry the same prefix and the form's own hook, so they win
   at five. Off the work sheet (the one-ball page, the record) nothing here
   applies but the check's hiding. */
.tp-har-choice-label > .sl-check { display: none; }

.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] {
  --font-body: var(--font-sans);
  --font-heading: var(--auth-title-font);
  --font-mono: var(--topbar-pill-font);
  --wf-dot-room: calc(var(--size-12) + var(--space-1) + var(--space-5) + var(--space-2));
  display: block !important; margin: 0 0 var(--space-4) !important; padding: var(--space-5) var(--space-5) 0 !important;
  border: 0 !important; border-radius: var(--radius-2xl) !important;
  background: var(--surface-primary) !important; box-shadow: none !important;
  font-family: var(--font-body) !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-block {
  margin: 0 0 var(--space-6) !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
/* The block's head: "01 · REQUIRED" in the mono caps, the question under it. */
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-block__header {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important;
  gap: var(--space-2) var(--space-3) !important; margin: 0 0 var(--space-3) !important; padding: 0 !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-block__number {
  grid-column: 1; grid-row: 1; width: auto; min-width: 0;
  font: var(--font-bold) var(--text-xs)/var(--leading-snug) var(--font-mono) !important;
  letter-spacing: .1em; color: var(--tb-brand-purple) !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] :is(.tp-har-required-chip, .tp-har-optional-chip) {
  grid-column: 2; grid-row: 1; justify-self: start;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  font: var(--font-bold) var(--text-xs)/var(--leading-snug) var(--font-mono) !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted) !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-required-chip { color: var(--color-red-600) !important; }
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-block__title {
  grid-column: 1 / -1; grid-row: 2; margin: 0 !important;
  font: var(--font-bold) var(--text-lg)/var(--leading-snug) var(--font-heading) !important;
  color: var(--text-primary) !important; overflow-wrap: anywhere;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-block__help {
  margin: 0 0 var(--space-2) !important; font: var(--font-normal) var(--text-sm)/var(--leading-snug) var(--font-body) !important; color: var(--text-secondary) !important;
}

/* A choice: rows with the check, as on the questions sheet. */
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-choices {
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 0 !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-choice-label {
  position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important; column-gap: var(--space-3) !important;
  width: 100% !important; min-height: var(--size-12) !important; margin: 0 !important; padding: var(--space-2) 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--text-primary) !important; font: var(--font-medium) var(--text-base)/var(--leading-snug) var(--font-body) !important;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-choice-label > input {
  position: absolute !important; top: 50%; right: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-choice-label > .tp-har-choice-text {
  grid-column: 1; display: flex !important; flex-direction: column; gap: var(--space-1); min-width: 0;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-choice-name { font: inherit !important; }
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-choice-detail {
  display: block; font: var(--font-normal) var(--text-sm)/var(--leading-snug) var(--font-body) !important; color: var(--text-secondary) !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-choice-label > .sl-check { display: grid; grid-column: 2; grid-row: 1; }
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-choice-label > input:checked ~ .sl-check {
  border-color: var(--tb-brand-purple); background: var(--tb-brand-purple); color: var(--color-white);
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-choice-label > input:focus-visible ~ .sl-check {
  outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-other-row { margin: var(--space-1) 0 0; }

/* The foot: the step's one control, pinned, green, the fail dot clear at
   its right (the language's foot, --sl-dot-room's sum). "0 of 7" is the
   quiet line over it. The page's action layout (detail-action-cards.js)
   moves the actions into the last question's block, which held them to
   that block's height, so they never pinned; that block lends its children
   to the form (display: contents, nothing of its own to draw on this flat
   surface), and the foot sticks for the whole form. */
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-block:has(> .tp-har-actions) { display: contents !important; }
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-actions {
  position: sticky !important; bottom: 0; z-index: 3;
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--space-2) !important;
  margin: 0 calc(-1 * var(--space-5)) !important;
  padding: var(--space-3) var(--wf-dot-room) calc(var(--space-3) + env(safe-area-inset-bottom)) var(--space-5) !important;
  border-radius: 0 !important; background: var(--surface-primary) !important; box-shadow: 0 -1px 0 var(--border-default) !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-actions > .sc-work__count {
  font: var(--font-semibold) var(--text-xs)/var(--leading-snug) var(--font-mono) !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary);
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-actions [data-tp-har-submit] {
  display: flex !important; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100% !important; min-height: var(--size-14); height: auto !important; margin: 0 !important; padding: 0 var(--space-5) !important;
  border: 0 !important; border-radius: var(--radius-full) !important; box-shadow: none !important;
  font: var(--font-bold) var(--text-lg)/1.2 var(--font-body) !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-actions [data-tp-har-submit]:not(.is--locked) {
  background: var(--accent-neon) !important; color: var(--color-black) !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-actions [data-tp-har-submit].is--locked {
  background: var(--color-gray-300) !important; color: var(--color-gray-700) !important;
}
.is--cards .sc-sheet--work .sc-work__body form[data-tp-har-form] .tp-har-actions [data-tp-har-nothing] {
  align-self: flex-start; min-height: var(--size-10); margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--text-primary) !important; font: var(--font-semibold) var(--text-base)/1.2 var(--font-body) !important;
}

/* ── THE APPROVE AND PAY SHEET ─────────────────────────────────────────────
   feed/_want_accept_overlay.html: the approval popup a plan's Approve opens
   (want-detail.js). It was a centred white box (a purple "Loading card
   form..." beside "Not yet", the card in a bordered frame). Now one flat
   sheet on the bottom of the screen: the kicker "APPROVE AND PAY" and the X,
   the plan's agent (round and name), the Refined plan's receipt strip, the
   two money sentences quiet under it, the card as the language's box, the
   foot pinned: "Approve and pay $11.50" green, Cancel as words. The overlay
   keeps its own place in the stack (wants.css .want-accept-overlay, under
   the fail dot); this file only moves the sheet to the bottom.
     .wf-pay           the overlay (the scrim), the sheet at its bottom
     .wf-pay__agent    the plan's agent: .sl-disc round, name, the plan's title
     .wf-pay__receipt  the receipt strip: plan-sheet.css's .preceipt, drawn
                       here too for a page that does not carry plan-sheet.css
     .wf-pay__money    the two money sentences
     .wf-pay__field    a labelled box: the guest's email, the card
     .wf-pay__saved    the saved card as one box, Change at its right
     .wf-pay__foot     the pinned foot */
.want-accept-overlay.wf-pay { align-items: flex-end; justify-content: center; padding: 0; }
.wf-pay > .sl-sheet { margin: auto auto 0; }
.wf-pay .sl-kicker-row { margin-bottom: var(--space-2); }

.wf-pay__agent { margin: 0 0 var(--space-2); }
/* No face on the card it opened from (the old proposal card): the name
   starts on the left edge. */
.wf-pay .sl-row.wf-pay__agent--noface { grid-template-columns: minmax(0, 1fr); }
.wf-pay .sl-row.wf-pay__agent--noface > .sl-words { grid-column: 1; }
.wf-pay__round { position: relative; overflow: hidden; padding: 0; background: var(--surface-tertiary); }
.wf-pay__round > :is(.agent-round, .aa, svg, img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }

.wf-pay .sl-ask.want-accept__lede {
  margin: var(--space-2) 0 var(--space-3);
  font: var(--font-normal) var(--text-lg)/var(--leading-snug) var(--font-body); color: var(--tb-prose);
}
.wf-pay__money > .want-accept__lede {
  margin: var(--space-3) 0 0;
  font: var(--font-normal) var(--text-sm)/var(--leading-normal) var(--font-body); color: var(--text-secondary);
}
.wf-pay__money > .want-accept__lede + .want-accept__lede { margin-top: var(--space-1); }

/* The receipt strip, the Refined plan's (cards/plan-sheet.css .preceipt):
   mono between two perforated rules, dotted leaders, the Total bold. */
:is(.wf-pay, .wf-fund) .preceipt { margin: var(--space-3) 0 0; }
:is(.wf-pay, .wf-fund) .preceipt__lines {
  margin: 0; padding: var(--space-3) 0;
  border-top: 2px dashed var(--border-strong); border-bottom: 2px dashed var(--border-strong);
}
:is(.wf-pay, .wf-fund) .preceipt__row {
  display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) 0;
  font: var(--font-medium) var(--text-sm)/var(--leading-snug) var(--font-mono);
  font-family: var(--font-mono) !important; color: var(--text-secondary);
}
:is(.wf-pay, .wf-fund) .preceipt__row :is(dt, dd) { margin: 0; font-family: var(--font-mono) !important; }
:is(.wf-pay, .wf-fund) .preceipt__row::before {
  content: ""; order: 1; flex: 1 1 var(--space-4); align-self: center;
  border-bottom: 2px dotted var(--border-default);
}
:is(.wf-pay, .wf-fund) .preceipt__row dd { order: 2; font-variant-numeric: tabular-nums; color: var(--text-primary); }
:is(.wf-pay, .wf-fund) .preceipt__row--total {
  margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--border-default);
  font-weight: var(--font-bold); font-size: var(--text-lg); color: var(--text-primary);
}
:is(.wf-pay, .wf-fund) .preceipt__row--total::before { border-bottom-color: transparent; }
:is(.wf-pay, .wf-fund) .preceipt__pct {
  margin-left: var(--space-1); padding: 0 var(--space-1); border-radius: var(--radius-xs);
  background: var(--color-purple-100); color: var(--tb-brand-purple);
  font-size: var(--text-xs); font-weight: var(--font-bold);
}

/* A labelled box: the guest's email, the card. The card form is Stripe's
   own frame, its fields drawn as the language's box (want-detail.js hands
   Stripe the tokens' values); the saved card is one box with Change. */
.wf-pay__field { margin: var(--space-5) 0 0; }
.wf-pay__field > .sl-label { margin: 0; }
:is(.wf-pay, .wf-fund) .sl-input.wf-pay__saved {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-base) !important;
}
.wf-pay__savedlabel { min-width: 0; overflow-wrap: anywhere; }
.wf-pay__change {
  flex: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--tb-brand-purple); font: var(--font-semibold) var(--text-base)/1.2 var(--font-body);
  text-decoration: underline; text-underline-offset: 3px;
}
.wf-pay__change:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; }
.wf-pay__cardmount { margin: 0; padding: 0; border: 0; background: none; }
.wf-pay__error { color: var(--color-red-600); }

.wf-pay .sl-info.want-accept__agree {
  margin: var(--space-5) 0 0;
  font: var(--font-normal) var(--text-sm)/var(--leading-snug) var(--font-body); color: var(--text-secondary);
}
.wf-pay .want-accept__agree a { color: var(--text-primary); text-underline-offset: 3px; }

/* The foot: the green control names the total; Cancel stands on the left
   edge under it (interface-standards.css draws .want-accept__cancel as a
   pill at two classes and an element; these win at three). */
.wf-pay .sl-foot .sl-foot__go:hover { background: var(--accent-neon); }
.wf-pay .sl-foot .sl-foot__go:disabled { opacity: .5; cursor: progress; }
.wf-pay .sl-foot .want-accept__cancel {
  display: block; width: auto; min-height: var(--size-10); margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--text-primary); font: var(--font-semibold) var(--text-base)/1.2 var(--font-body);
}
.wf-pay .sl-foot .want-accept__cancel:hover { background: none; color: var(--text-primary); }

/* ── THE GRANT AND SETUP ROWS ──────────────────────────────────────────────
   An account the plan runs on (targets/_path_macros.html har_blocks_fields,
   the connect_account row): on a connect step, and live on an act's step
   while its action waits (section.tp-act-rows). It was a white card with a
   grey "Select service" box, a small green Connect pill and two links. On
   the work sheet now: the rows' section is the one white surface; the row
   a block like a question ("01 · REQUIRED", its own sentence, "Connect your
   Gmail account", in the heading face); then "You allow" in the
   highlighter with the exact thing allowed after it (the registry's
   sentence, the protection: the exact thing that leaves); the account row,
   its logo in the disc, the service, linked or not under it, the picker's
   caret at the right; the details fold as a quiet line; the doors as the
   language's foot: the one green control, the second door outlined, the
   refusal as words. Words, doors and folds unchanged. The page's own
   connect-row rules (approved-details.css, at five classes and the body)
   are outweighed by the work sheet's prefix here (seven). */
.wf-grant__allow { margin: 0 0 var(--space-3); font: var(--font-normal) var(--text-lg)/var(--leading-snug) var(--font-body); color: var(--tb-prose); }
.wf-grant__allow > .sl-hl { font-family: var(--font-heading); font-weight: var(--font-bold); }

.is--cards .sc-sheet--work .sc-work__body .tp-act-rows {
  --font-body: var(--font-sans);
  --font-heading: var(--auth-title-font);
  --font-mono: var(--topbar-pill-font);
  display: block; margin: 0 0 var(--space-4); padding: var(--space-5);
  border: 0; border-radius: var(--radius-2xl); background: var(--surface-primary); box-shadow: none;
  font-family: var(--font-body);
}
.is--cards .sc-sheet--work .sc-work__body .tp-act-rows .tp-har-block {
  margin: 0 0 var(--space-6) !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
.is--cards .sc-sheet--work .sc-work__body .tp-act-rows .tp-har-block:last-child { margin-bottom: 0 !important; }
.is--cards .sc-sheet--work .sc-work__body .tp-act-rows .tp-har-block__header {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important;
  gap: var(--space-2) var(--space-3) !important; margin: 0 0 var(--space-3) !important; padding: 0 !important;
}
.is--cards .sc-sheet--work .sc-work__body .tp-act-rows .tp-har-block__number {
  grid-column: 1; grid-row: 1; width: auto; min-width: 0;
  font: var(--font-bold) var(--text-xs)/var(--leading-snug) var(--font-mono) !important;
  letter-spacing: .1em; color: var(--tb-brand-purple) !important;
}
.is--cards .sc-sheet--work .sc-work__body .tp-act-rows :is(.tp-har-required-chip, .tp-har-optional-chip) {
  grid-column: 2; grid-row: 1; justify-self: start;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  font: var(--font-bold) var(--text-xs)/var(--leading-snug) var(--font-mono) !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted) !important;
}
.is--cards .sc-sheet--work .sc-work__body .tp-act-rows .tp-har-required-chip { color: var(--color-red-600) !important; }
.is--cards .sc-sheet--work .sc-work__body .tp-act-rows .tp-har-block__title {
  grid-column: 1 / -1; grid-row: 2; margin: 0 !important;
  font: var(--font-bold) var(--text-lg)/var(--leading-snug) var(--font-heading) !important;
  color: var(--text-primary) !important; overflow-wrap: anywhere;
}

/* The account row: the service's logo in the disc, its name, linked or not. */
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-service { margin: 0; padding: 0; border: 0; background: none; }
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-service__label {
  margin: 0 0 var(--space-1) !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important;
  font: var(--font-bold) var(--text-xs)/var(--leading-snug) var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-brand-purple);
}
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-service__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: 0; background: none;
}
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] :is(.tp-har-service__selected, .tp-har-service__one) {
  display: grid; grid-template-columns: var(--size-10) minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3);
  min-height: var(--size-12); margin: 0; padding: var(--space-1) 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--text-primary); font: var(--font-semibold) var(--text-base)/var(--leading-snug) var(--font-body);
  list-style: none; cursor: pointer;
}
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-service__one { cursor: default; }
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-service__selected::-webkit-details-marker { display: none; }
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] :is(.tp-har-service__selected, .tp-har-service__one) > .tp-har-service__logo {
  grid-column: 1; width: var(--size-10); height: var(--size-10); padding: var(--space-2);
  border-radius: var(--radius-full); background: var(--surface-tertiary); object-fit: contain;
}
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] :is(.tp-har-service__selected, .tp-har-service__one) > span { grid-column: 2; min-width: 0; }
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-service__selected > iconify-icon { grid-column: 3; color: var(--color-gray-700); }
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-service__status {
  margin: 0 0 0 calc(var(--size-10) + var(--space-3)); padding: 0; border: 0; background: none;
  font: var(--font-normal) var(--text-sm)/var(--leading-snug) var(--font-body); color: var(--text-secondary);
}
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-service__status.is--linked { color: var(--color-green-600); }

/* The details fold: one quiet line that opens in place. */
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-connect__details { margin: var(--space-3) 0 0; padding: 0; border: 0; background: none; }
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-connect__details > summary {
  min-height: var(--size-10); display: flex; align-items: center;
  font: var(--font-semibold) var(--text-sm)/var(--leading-snug) var(--font-body); color: var(--text-secondary); cursor: pointer;
}

/* The doors: the language's foot, at the row's end. */
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-doors {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2);
  margin: var(--space-4) 0 0; padding: 0; border: 0; background: none;
}
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-doors > .tp-btn--primary {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: var(--size-14); margin: 0; padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-full); box-shadow: none;
  background: var(--accent-neon); color: var(--color-black);
  font: var(--font-bold) var(--text-lg)/1.2 var(--font-body); text-decoration: none;
}
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-doors > .tp-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-doors > .tp-btn--ghost {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: var(--size-12); margin: 0; padding: 0 var(--space-5);
  border: 1px solid var(--border-strong); border-radius: var(--radius-full); box-shadow: none;
  background: var(--surface-primary); color: var(--text-primary);
  font: var(--font-semibold) var(--text-base)/1.2 var(--font-body); text-decoration: none;
}
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-doors > .tp-har-doors__decline {
  align-self: flex-start; min-height: var(--size-10); margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none;
  color: var(--text-primary); font: var(--font-semibold) var(--text-base)/1.2 var(--font-body);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.is--cards .sc-sheet--work .sc-work__body .tp-har-block[data-har-slug="connect_account"] .tp-har-doors > :focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; }
/* The rows' own note over them ("Emails go out from Herald's mailbox unless
   you connect your Gmail."): a quiet line on the sheet's edge. */
.is--cards .sc-sheet--work .sc-work__body .tp-har-block__help[data-row-aside] {
  margin: 0 0 var(--space-3); padding: 0 var(--space-5);
  font: var(--font-normal) var(--text-sm)/var(--leading-snug) var(--font-body); color: var(--text-secondary);
}

/* ── THE PICK ──────────────────────────────────────────────────────────────
   A pick between items the agent handed back (targets/_path_macros.html
   pick_control, the options; the songs are the audio lane's .art-versions
   rows and the people the Contact book's): on the work sheet the options
   were stacked green pill buttons. Now the pick is one white surface, its
   question in the heading face, each option a row with the purple check at
   its right. The row is still a button and its tap is still the answer
   (one control per step, 2026-09-24): the row tapped shows its check while
   it sends (step-answer.js disables it). Off the work sheet the check stays
   out of sight. */
.tp-pick__option > .sl-check { display: none; }
.is--cards .sc-sheet--work .sc-work__body .tp-pick:not(.art-versions) {
  --font-body: var(--font-sans);
  --font-heading: var(--auth-title-font);
  display: flex !important; flex-direction: column; gap: var(--space-3);
  margin: 0 0 var(--space-4) !important; padding: var(--space-5) !important;
  border: 0 !important; border-radius: var(--radius-2xl) !important;
  background: var(--surface-primary) !important; box-shadow: none !important;
}
.is--cards .sc-sheet--work .sc-work__body .tp-pick:not(.art-versions) > .tp-pick__q {
  margin: 0 !important; font: var(--font-bold) var(--text-lg)/var(--leading-snug) var(--font-heading) !important;
  color: var(--text-primary) !important;
}
.is--cards .sc-sheet--work .sc-work__body .tp-pick:not(.art-versions) .tp-pick__options { display: flex; flex-direction: column; gap: 0; }
.is--cards .sc-sheet--work .sc-work__body .tp-pick:not(.art-versions) .tp-pick__options > .tp-pick__option {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3);
  width: 100% !important; min-height: var(--size-12) !important; height: auto !important; margin: 0 !important; padding: var(--space-2) 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--text-primary) !important; font: var(--font-medium) var(--text-base)/var(--leading-snug) var(--font-body) !important;
  text-align: left !important; white-space: normal; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.is--cards .sc-sheet--work .sc-work__body .tp-pick:not(.art-versions) .tp-pick__options > .tp-pick__option > .sl-check { display: grid; grid-column: 2; }
.is--cards .sc-sheet--work .sc-work__body .tp-pick:not(.art-versions) .tp-pick__options > .tp-pick__option:is(:active, :disabled) > .sl-check {
  border-color: var(--tb-brand-purple); background: var(--tb-brand-purple); color: var(--color-white);
}
.is--cards .sc-sheet--work .sc-work__body .tp-pick:not(.art-versions) .tp-pick__options > .tp-pick__option:disabled { opacity: 1; cursor: progress; }
.is--cards .sc-sheet--work .sc-work__body .tp-pick:not(.art-versions) .tp-pick__options > .tp-pick__option:focus-visible > .sl-check {
  outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px;
}

/* ── THE FUND SHEET ────────────────────────────────────────────────────────
   targets/_fund_sheet.html, step 1 of a paid deal signed but not yet
   funded (fund-sheet.js): the same sheet as Approve and pay, in the step
   cards' fixed layer (.sc-sheet: the scrim, Escape, the live refresh's
   wait). The frame sits on the bottom of the screen as the plan sheet's
   does; a release of the agent's price is a quiet indented row of the
   strip; the money sentences under the strip are the Approve and pay
   sheet's. The fail dot keeps its corner (the language's foot). */
.fs-sheet > .wf-fund { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; }
.wf-fund .sl-kicker-row .sc-sheet__x { margin-left: auto; }
.wf-fund__agent { margin: 0 0 var(--space-2); }
.wf-fund__art { position: relative; overflow: hidden; padding: 0; background: var(--surface-tertiary); }
.wf-fund__art > *, .wf-fund__art svg { display: block; width: 100%; height: 100%; }
.wf-fund .preceipt__row.wf-fund__release { padding-left: var(--space-4); font-size: var(--text-xs); }
.wf-fund .preceipt__line {
  margin: var(--space-3) 0 0;
  font: var(--font-normal) var(--text-sm)/var(--leading-normal) var(--font-body); color: var(--text-secondary);
}
.wf-fund .preceipt__line + .preceipt__line { margin-top: var(--space-1); }
.wf-fund__loading { margin: 0; }
.wf-fund .sl-info.wf-fund__note { margin: var(--space-5) 0 0; }
.wf-fund .sl-foot .sl-foot__go:disabled { opacity: .5; cursor: progress; }