/* mobile-conversations: the new mobile dashboard, this zone's half (owner's design, 20 Oct 2026).
   PHONE ONLY: every rule sits inside @media (max-width:767px),(pointer:coarse) and (max-height:500px).
   Covers the zone's three tabs (Conversations, Follow-ups, Property feedback). The conversation detail flow is untouched.
   Shot 8 / 12 draw the tab row UNDERLINED; shot 10 draws a BORDERED SEGMENTED control. Each tab follows its own shot
   (section[data-cv-view] says which tab is showing). */
@media (max-width:767px),(pointer:coarse) and (max-height:500px){

  /* ---- phone wording: the phone label sits in a span the desktop never shows (hidden attribute) ---- */
  .cv .cv-d { display: none; }
  .cv .cv-m[hidden] { display: inline !important; }   /* beats `.cv [hidden]{display:none!important}` by specificity */
  .cv .cv-empty-icon > .cv-m[hidden] { display: contents !important; }
  .cv .cv-empty-icon > svg:not(:only-child) { display: none; }

  /* Screen-reader-only labels ("Search conversations", "Property", "Dates"). The shared rule hides them in a 1px box with
     overflow hidden, so the words are wider than their box, which reads as text cut off to anything that measures it
     (the phone walk reports every one as damage). The box is as wide as its words instead and is still clipped to nothing
     by clip-path, so it is as invisible as before and nothing is cut. Nothing visible moves: it is absolutely positioned,
     and `left: 0` keeps a label whose own place is at the right edge of a row from reaching past the screen and widening
     the page (found in the Grader's Score tab, where one such label made the page 429px wide on a 390px phone). */
  html body #view .cv .cv-sr { left: 0 !important; width: max-content !important; max-width: 100% !important; }
  html body #view .cv .cv-ov-type-label { left: 0; width: max-content; max-width: 100%; }

  /* TEXT FIELDS STAY AT --m-input (16px), not --m-body (coordinator's amendment to the scale, 26 Oct 2026): a phone browser
     (iOS Safari) zooms the whole page when a field under 16px takes focus and never zooms back. mobile-media.css sets it on
     every field in #view with !important, so nothing here sets a field's size below it: this sheet only names the token
     where it sizes a field. Height, padding, radius and the labels around a field still come down with the scale. */

  /* ---- the title row: the title, and its allowance beside it (L2) ---- */
  .cv:not(.cv-flow) .cv-mobile-brand { display: none; }
  /* THE PHONE SCALE (owner ruling, 26 Oct 2026: "most of my text shld be smaller fonts uk and zoom out abit more the
     cards eveyrthing, everything is so mega sized that my brain cant focus", "i want to go cosnistent", "BREAK ALL
     EXISTING RULES IF NEEDED"). Every size, gap, padding and radius in this sheet now reads the tokens at the foot of
     mobile-media.css: type 10 / 12 / 14 / 15 / 18 / 20 / 24 / 28, gaps 4 / 8 / 12 / 16, a card's padding 14, radius 12,
     a thumb target 44 and a secondary control 40. Where an older ruling of 21 or 26 Oct drew a larger size (a 30px
     title, 16px buttons, 56px tab rows, 48px fields), today's scale replaces it, and the comment on that rule says so. */
  .cv:not(.cv-flow) { padding-top: var(--m-gap); }
  .cv:not(.cv-flow) .cv-heading {
    display: flex;
    flex-wrap: wrap-reverse;            /* when title + allowance do not fit, the allowance rides above, as in shot 10 */
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--m-gap);
    padding: 0 0 var(--m-gap);
  }
  .cv:not(.cv-flow) .cv-heading-copy { flex: 0 1 auto; min-width: 0; }
  /* The tab's title is a screen's subject, so --m-h2 and not the page-title size: at 28px "Property feedback" and the
     allowance beside it did not fit one row, the allowance rode above the title on that tab alone, and the header was
     taller on one tab than on the others. At 24 the same one row holds on every tab. */
  .cv:not(.cv-flow) .cv-heading-copy h1 {
    margin: 0;
    font-size: var(--m-h2);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .cv:not(.cv-flow) .cv-heading-actions { flex: none; margin-left: auto; padding: 0; gap: 2px; align-items: center; }
  .cv:not(.cv-flow) .cv-heading-actions > .cv-rules-button { width: var(--m-control); height: var(--m-control); min-height: var(--m-control); padding: 0; color: var(--ink-2); }
  .cv:not(.cv-flow) .cv-usage-menu > summary { min-height: var(--m-control); padding: 0; font-size: var(--m-body); color: var(--ink-2); }
  .cv:not(.cv-flow) .cv-heading-actions > .cv-primary { display: none; }   /* New conversation lives under the tabs */

  /* ---- the tab row: shot 8 / 12, underlined, the active tab green ---- */
  .cv:not(.cv-flow) .cv-navigation { display: block; border: 0; margin: 0 0 var(--m-gap); padding: 0; }
  /* MOVED 26 Oct 2026 (owner: "dont do where 2 simple words form 2 sentences one up one down, it looks ugly"). His comp of
     the same day drew "Property feedback" wrapping onto two lines inside its own tab, in four equal columns. Today's
     ruling replaces that: every tab label is one line, so the four tabs take the width their words need and share what
     is left between them, 12px type (14px does not fit four labels in a 360px phone), 44px tall; at 340 and under the label
     drops to 10, the smallest size on the scale, before it would ever wrap. Never a column each. */
  .cv:not(.cv-flow) .cv-navigation > .cv-tabs {
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--line-2);
  }
  /* `html body #view` because dashboard.html ends with an inline sheet that sets these buttons to clamp(10px, 2.9vw, 13px)
     (10.4px at 360), later in the document and as specific as a bare class chain; this is what lets the scale reach them. */
  html body #view .cv:not(.cv-flow) .cv-tabs > button,
  html body #view .cv:not(.cv-flow) .cv-tabs > button.cv-feedback-link {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--m-tap);
    max-width: none;
    margin: 0 0 -1px;
    padding: var(--m-gap) 0;   /* the height is made of padding, so the text box inside is one line tall; the width is the label's own */
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--ink-2);
    font-size: var(--m-cap);
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }
  .cv:not(.cv-flow) .cv-tabs > button > svg { display: none; }
  html body #view .cv:not(.cv-flow) .cv-tabs > button[aria-current="page"],
  html body #view .cv:not(.cv-flow) .cv-tabs > button.cv-feedback-link[aria-current="page"] {
    color: var(--sig);
    font-weight: 650;
    text-decoration: none;
    border-bottom-color: var(--sig);
  }

  /* MOVED 26 Oct 2026, owner's four comps of that day: the open tab is the green word and its underline, with no tint
     behind it, on ALL FOUR tabs. This replaces two earlier laws. One was the tint that used to sit on this rule. The
     other was his ruling of 21 Oct 2026, which drew Property feedback's row as a bordered segmented control with the
     open tab FILLED signature green; that whole block is gone, and his Property feedback comp of 26 Oct draws the same
     plain underlined row as the other three. (His fourth comp of the day does show a tint behind Overall: it is the
     press state of the tab he has that moment tapped, not a second design, which is why it stands alone.) */

  /* ---- Conversations: New conversation, search, then property + Filters abreast ---- */
  .cv .cv-controls { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--m-gap-s); margin: 0 0 var(--m-gap); }
  .cv .cv-controls > .cv-list-new {
    display: flex;
    order: 1;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    gap: var(--m-gap-s);
    min-height: var(--m-tap);
    padding: var(--m-gap) var(--m-gap);   /* the height is padding, so a two word label is one line tall to the check */
    border: 0;
    border-radius: var(--m-radius);
    background: var(--sig);
    color: var(--on-sig);
    font-size: var(--m-body);
    font-weight: 600;
  }
  .cv .cv-controls > .cv-list-new svg { width: 18px; height: 18px; }
  .cv .cv-controls > .cv-search { order: 2; flex: 1 1 100%; min-width: 0; }
  #view .cv .cv-search > input[type="search"] {
    width: 100%;
    min-height: var(--m-control);
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
    font-size: var(--m-input);
  }
  .cv .cv-controls > .cv-list-property { order: 3; flex: 1 1 0; min-width: 0; }
  .cv .cv-controls > .cv-list-property > select {
    width: 100%;
    height: var(--m-control);
    min-height: var(--m-control);
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background-color: var(--cv-card);
    font-size: var(--m-input);
  }
  .cv .cv-controls > .cv-list-filters { order: 4; flex: 0 0 auto; }
  .cv .cv-list-filters > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-gap-s);
    min-width: 0;
    min-height: var(--m-control);
    padding: 0 var(--m-gap);
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
    color: var(--ink);
    font-size: var(--m-body);
    font-weight: 500;
  }
  .cv .cv-list-filters > summary::after { display: none; }
  .cv .cv-list-filters > summary svg { width: 18px; height: 18px; flex: none; }
  .cv .cv-list-filters > .cv-filter-panel { max-width: calc(100vw - 2 * var(--m-page-x)); }

  /* ---- a conversation is a white card: icon, title + pill, "Buyer . date", kebab, divider, the review link (L6, L9) ---- */
  .cv .cv-list {
    display: grid;
    gap: var(--m-gap-s);
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
  .cv .cv-list > .cv-list-head { display: none; }
  .cv .cv-row-wrap {
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
    overflow: hidden;
  }
  .cv .cv-row-wrap:last-child { border-bottom: 1px solid var(--line-2); }
  .cv .cv-row-wrap > .cv-row {
    display: grid;
    grid-template-columns: var(--m-control) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 var(--m-gap) !important;   /* `.cv-row{gap:11px!important}` sits in conversations.css at 600px */
    align-items: start;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: var(--m-pad) var(--m-pad) 0 var(--m-pad) !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
  }
  .cv .cv-row-wrap > .cv-row > .cv-row-icon {
    grid-column: 1;
    grid-row: 1;
    width: var(--m-control);
    height: var(--m-control);
    border-radius: var(--m-radius);
  }
  /* title + pill share a line when they fit, the pill drops under the title when they do not; the kebab keeps its corner.
     MOVED 26 Oct 2026: his comp of the same morning put the chip on its own line under the title. Gmail's rhythm
     (today's ruling) is a title and its status on one line, which takes a line out of every card. */
  .cv .cv-row-wrap > .cv-row > .cv-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--m-gap-xs) var(--m-gap-s);
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 0 var(--m-control) 0 0;
  }
  .cv .cv-row-wrap > .cv-row .cv-row-main > b {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--m-body-lg);
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: break-word;
  }
  .cv .cv-row-wrap > .cv-row .cv-row-main > span:not(.cv-badge) {
    flex: 1 0 100%;
    margin: 0;
    color: var(--ink-2);
    font-size: var(--m-body);
    line-height: 1.3;
  }
  .cv .cv-row-wrap > .cv-row .cv-row-main > small {
    flex: 1 0 100%;
    margin: 0;
    color: var(--ink-2);
    font-size: var(--m-cap);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .cv .cv-row-wrap > .cv-row > .cv-row-status { display: none; }
  .cv .cv-row-main > .cv-row-pill[hidden] { display: inline-block !important; flex: none; }
  .cv .cv-row-wrap > .cv-row .cv-badge {
    display: inline-block;
    padding: 2px var(--m-gap-s);
    border-radius: var(--m-gap-s);
    font-size: var(--m-cap);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
  }
  .cv .cv-row-wrap > .cv-row > .cv-row-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-self: stretch;
    width: auto;
    min-width: 0;
    margin: var(--m-gap-s) calc(-1 * var(--m-pad)) 0;
    padding: 0 var(--m-pad);
    border-top: 1px solid var(--line-2);
  }
  .cv .cv-row-wrap > .cv-row .cv-next-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--m-control);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--m-body);
    font-weight: 500;
  }
  .cv .cv-row-wrap > .cv-row .cv-next-action svg { width: 18px; height: 18px; flex: none; }

  /* the kebab: the same delete control, drawn as three dots (top-right) */
  .cv .cv-row-wrap > .cv-row-delete {
    top: var(--m-gap-xs);
    right: var(--m-gap-xs);
    width: var(--m-control);
    height: var(--m-control);
    transform: none;
    color: var(--ink);
    z-index: 1;
  }
  .cv .cv-row-wrap > .cv-row-delete > svg { display: none; }
  .cv .cv-row-wrap > .cv-row-delete::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .cv .cv-list-total { margin: var(--m-gap-l) 0 0; color: var(--ink-2); font-size: var(--m-body); }

  /* ---- empty states (L10): centred art, 22px title, a grey line, a green button ---- */
  .cv .cv-list > .cv-empty,
  .cv .cv-task-list,
  .cv .cv-feedback-group > .cv-card > .cv-empty {
    text-align: center;
  }
  .cv .cv-list > .cv-empty,
  .cv .cv-task-list:has(> .cv-empty) {
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
  }
  .cv .cv-task-list:has(> .cv-empty) { padding: 0; }
  .cv .cv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--m-gap-l) var(--m-pad);
  }
  .cv .cv-empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 0 var(--m-gap);
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sig) 10%, var(--cv-card));
    color: var(--ink);
  }
  .cv .cv-empty-icon svg { width: 28px; height: 28px; }
  .cv .cv-empty h3 { margin: 0 0 var(--m-gap-xs); font-size: var(--m-h4); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
  .cv .cv-empty p { margin: 0 0 var(--m-gap-l); max-width: 32ch; color: var(--ink-2); font-size: var(--m-body); line-height: 1.45; }
  .cv .cv-empty button,
  .cv .cv-feedback-group .cv-empty button.cv-text-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-gap-s);
    width: 100%;
    min-height: var(--m-tap);
    margin: 0;
    padding: var(--m-gap) var(--m-gap-l);
    border: 0;
    border-radius: var(--m-radius);
    background: var(--sig);
    color: var(--on-sig);
    font-size: var(--m-body);
    font-weight: 600;
    text-decoration: none;
  }
  .cv .cv-empty > .cv-empty-upload {
    margin-top: var(--m-gap-s);
    border: 1px solid var(--line-2);
    background: var(--cv-card);
    color: var(--ink);
  }
  /* Follow-ups, empty: his shot has no property field above the card */
  .cv .cv-controls.cv-controls-bare { display: none; }

  /* ---- Property feedback: the filter bar (owner's comp, 26 Oct 2026) ----
     MOVED from his ruling of 21 Oct 2026, which drew these as three separate boxes over two rows, the property with a
     chevron pointing RIGHT and a home glyph, the dates with a calendar, and a Filters button with its word. His comp of
     26 Oct draws ONE bordered bar, split by vertical hairlines: "All properties v | All dates v | =". So the glyphs go,
     the word Filters goes (its span is the repo's .cv-d, which only a phone hides, so the desktop button still reads
     Filters), the property's chevron turns to point down like the one beside it, and the three cells share one border.
     The controls themselves are untouched: both are still the real selects, filling their cell, and Filters still opens
     the same panel. */
  .cv .cv-feedback-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) var(--m-tap);
    align-items: stretch;
    gap: 0;
    margin: 0 0 var(--m-gap);
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
    overflow: hidden;
  }
  .cv .cv-feedback-toolbar > .cv-feedback-property,
  .cv .cv-feedback-toolbar > .cv-feedback-dates,
  .cv .cv-feedback-toolbar > button[data-cv-action="filters"] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
    min-width: 0;
    min-height: var(--m-tap);
    margin: 0;
    padding: 0 var(--m-gap-xs) 0 var(--m-gap);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--m-body);
    font-weight: 500;
  }
  /* the two vertical hairlines of the comp */
  .cv .cv-feedback-toolbar > .cv-feedback-dates,
  .cv .cv-feedback-toolbar > button[data-cv-action="filters"] { border-left: 1px solid var(--line-2); }
  /* the home and the calendar are not in the comp: the words carry the control */
  .cv .cv-feedback-property > svg,
  .cv .cv-feedback-dates > svg { display: none; }
  #view .cv .cv-feedback-property > select,
  #view .cv .cv-feedback-dates > select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: calc(var(--m-tap) - 2px);
    min-height: calc(var(--m-tap) - 2px);
    padding: 0;
    border: 0;
    background-color: transparent !important;
    color: var(--ink);
    font-size: var(--m-input);
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
  }
  /* both carets point down, because both open a list */
  .cv .cv-feedback-property::after,
  .cv .cv-feedback-dates::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: var(--ink);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .cv .cv-feedback-toolbar > button[data-cv-action="filters"] { justify-content: center; padding: 0; }
  .cv .cv-feedback-toolbar > button[data-cv-action="filters"] svg { width: 20px; height: 20px; }

  /* The excluded line (owner's comp, 26 Oct 2026). MOVED from his ruling of 21 Oct 2026, which gave this its own
     white card with an info glyph and a green "View details" / "Hide details". His comp of 26 Oct draws one quiet line
     under the filter bar, "10 conversations excluded" with a chevron, closed. The list underneath it is unchanged, and
     the fold is still the same <details>: this only takes the card, the glyph and the words off it. The desktop fold
     is untouched, including the open it starts in. */
  .cv .cv-feedback-main > details.cv-excluded {
    position: relative;
    margin: 0 0 var(--m-gap-s);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .cv .cv-excluded > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: var(--m-control);
    margin: 0;
    padding: 0;
    color: var(--ink-2);
    font-size: var(--m-body);
    font-weight: 450;
  }
  .cv .cv-excluded > summary::before { content: none; }
  #view .cv details.cv-excluded > summary::after {
    content: "" !important;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background: var(--ink-2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
  }
  #view .cv details.cv-excluded[open] > summary::after { content: "" !important; transform: rotate(180deg) !important; }
  .cv .cv-excluded[open] > summary { margin-bottom: 6px; border-bottom: 0; }
  .cv .cv-excluded > .cv-exclusion {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: start;
    gap: var(--m-gap-s);
    width: calc(100% - 2 * var(--m-pad));
    margin: 0 var(--m-pad);
    padding: var(--m-gap) 0;
    border: 0;
    border-top: 1px solid var(--line-2);
    border-radius: 0;
    background: transparent;
    text-align: left;
  }
  .cv .cv-excluded > .cv-exclusion:last-child { padding-bottom: var(--m-gap-l); }
  .cv .cv-excluded > .cv-exclusion > b { font-size: var(--m-body-lg); font-weight: 650; line-height: 1.3; color: var(--ink); }
  .cv .cv-excluded > .cv-exclusion > span {
    padding: var(--m-gap-xs) var(--m-gap);
    border-radius: var(--m-gap-s);
    background: color-mix(in srgb, var(--ink) 7%, var(--cv-card));
    color: var(--ink-2);
    font-size: var(--m-cap);
    line-height: 1.3;
  }
  .cv .cv-feedback-main > .cv-feedback-group { margin: 0 0 var(--m-gap); }
  .cv .cv-feedback-group > .cv-card:has(> .cv-empty) {
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
  }
  .cv .cv-feedback-group > .cv-card > .cv-empty { padding: var(--m-gap-l) var(--m-pad); }

  /* "What buyers are saying". Owner ruling, 21 Oct 2026: a white 14px card; the heading is bold and large with the
     reviewed-count under it; each theme is its OWN bordered row (comp) rather than one boxed list split by lines:
     rank ring, theme over its sentiment pill, the score box, a chevron. Every row still opens its quotes. */
  .cv .cv-feedback-group > .cv-ranked-board { padding: var(--m-pad); border-radius: var(--m-radius); background: var(--cv-card); }
  .cv .cv-feedback-group > .cv-ranked-board > header { padding: 0 0 var(--m-gap); }
  .cv .cv-feedback-group > .cv-ranked-board > header h2 { font-size: var(--m-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
  #view .cv .cv-feedback-group > .cv-ranked-board > header .cv-feedback-basis { margin: var(--m-gap-xs) 0 0 !important; font-size: var(--m-body); }   /* conversations.css sets margin-bottom with !important */
  .cv .cv-ranked-board > header { margin-bottom: 0; }
  /* MOVED 26 Oct 2026 (his scale ruling and "i hate fucking scrolling super much"): a topic was a 130px card of its own, a
     36px rank ring, 17px name, a bordered 16px count box, a bar and a chevron stranded alone on a third line. It is now a
     row of one line of facts (rank, name, count, chevron) with its bar tucked under, about half the height. */
  .cv .cv-ranked-topics { display: grid; gap: var(--m-gap-s); padding: 0; border: 0; border-radius: 0; }
  .cv .cv-ranked-topics > .cv-insight,
  .cv .cv-ranked-topics > .cv-insight:first-child {
    border: 1px solid var(--card-edge, var(--line-2));
    border-radius: var(--m-radius);
    background: var(--cv-card);
  }
  .cv .cv-ranked-topics > .cv-insight > summary { grid-template-columns: calc(2 * var(--m-pad)) minmax(0, 1fr) auto var(--m-gap-l); align-items: center; gap: 0 var(--m-gap-s); padding: var(--m-pad-s) var(--m-gap); }
  .cv .cv-topic-rank { width: 28px; height: 28px; font-size: var(--m-body); font-weight: 450; justify-self: start; }
  .cv .cv-topic-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-gap-xs) var(--m-gap-s); }
  .cv .cv-topic-label > b { font-size: var(--m-body-lg); font-weight: 600; line-height: 1.3; }
  .cv .cv-topic-label > small.cv-pol { padding: 2px var(--m-gap-s); border-radius: var(--m-gap-s); font-size: var(--m-cap); font-weight: 500; }
  .cv .cv-ranked-board .cv-insight-count { display: grid; justify-items: end; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: var(--m-body); font-weight: 500; line-height: 1.25; white-space: nowrap; }
  .cv .cv-ranked-board .cv-insight-count > small { color: var(--ink-2); font-size: var(--m-cap); }
  .cv .cv-ranked-board .cv-insight > .cv-disclosure-body { padding: 0 var(--m-gap) var(--m-pad); }
  /* the chevron is the fourth cell of the first row, never a row of its own */
  #view .cv .cv-ranked-topics > .cv-insight > summary::after { grid-column: 4; grid-row: 1; justify-self: end; color: var(--ink); font-size: var(--m-h3); line-height: 1; }

  /* "Seller report" and "More property insights": two list rows, one card, a chevron each */
  .cv .cv-feedback-main > .cv-card.cv-report-details {
    margin: 0;
    border-radius: var(--m-radius) var(--m-radius) 0 0;
    border-color: var(--line-2);
  }
  .cv .cv-feedback-main > .cv-report-details > summary {
    min-height: var(--m-tap);
    gap: var(--m-gap);
    padding: 0 var(--m-pad);
    font-size: var(--m-body);
    font-weight: 450;
  }
  .cv .cv-feedback-main > .cv-report-details > summary > svg { width: 20px; height: 20px; }
  .cv .cv-feedback-main > .cv-report-details > summary::after,
  .cv .cv-feedback-main > .cv-more-insights::after { color: var(--ink); font-size: var(--m-h3); }
  /* A dropdown on a phone (owner, 26 Oct 2026, "dont do that arrow, make it a dropdown instead"): the chevron turns to point
     down while the eight insights are open under it, like every other dropdown in this zone. */
  .cv .cv-feedback-main > .cv-more-insights[aria-expanded="true"]::after { transform: rotate(90deg); }
  .cv .cv-feedback-main > .cv-more-insights {
    display: flex;
    align-items: center;
    gap: var(--m-gap);
    min-height: var(--m-tap);
    margin: 0 0 var(--m-gap);
    padding: var(--m-gap) var(--m-pad);
    border: 1px solid var(--line-2);
    border-top: 0;
    border-radius: 0 0 var(--m-radius) var(--m-radius);
    background: var(--cv-card);
    color: var(--ink);
    font-size: var(--m-body);
    font-weight: 450;
  }
  .cv .cv-feedback-main > .cv-more-insights > span { flex: 1 1 auto; text-align: left; }
  /* open: the row is the head of the list under it, so it squares off its bottom and the list continues the card */
  .cv .cv-feedback-main > .cv-more-insights[aria-expanded="true"] { margin-bottom: 0; border-radius: 0; }
  .cv .cv-feedback-main > #cv-more-insights-panel { margin: 0 0 var(--m-gap); }
  .cv .cv-feedback-main > #cv-more-insights-panel > .cv-feedback-secondary { margin: 0; border-top: 0; border-radius: 0 0 var(--m-radius) var(--m-radius); }
  .cv .cv-feedback-main > .cv-more-insights::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 4v16M12 9v11M18 13v7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 4v16M12 9v11M18 13v7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* ---- Follow-ups heading: the same one row as every other tab ----
     MOVED 26 Oct 2026 (owner: "i want to go cosnistent", "i hate fucking scrolling super much"). His comp of 21 Oct
     (shot 12) drew the allowance on a second row under this tab's title, with a clock, so Follow-ups alone had a
     taller header than Conversations, Property feedback and Overall. Today's ruling is one heading on every tab:
     the title at the left, the Rules book and the allowance beside it at the right. */

  /* ---- Follow-ups, populated: no outer wrapper (L6); each follow-up is a white card (L6-L9) ----
     State pill, the text, its context, a due-date fact row, a divider, then the foot: "Mark as done" left, "View quote" right.
     The raw controls stay (checkbox, text box, date input, delete) and carry every function; they are restyled, not replaced.
     Extra elements (.cv-tm) are hidden above this breakpoint by the hidden attribute. */
  .cv .cv-tm[hidden] { display: flex !important; }
  .cv .cv-list-total.cv-tm[hidden] { display: block !important; }
  .cv[data-cv-view="followups"] .cv-controls > select {
    width: 100%;
    height: var(--m-control);
    min-height: var(--m-control);
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background-color: var(--cv-card);
    font-size: var(--m-input);
  }
  .cv .cv-task-list:not(:has(> .cv-empty)) {
    display: grid;
    gap: var(--m-gap-s);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    text-align: left;
  }
  #view .cv .cv-task-list > .cv-task {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "pill del" "title title" "ctx ctx" "due due" "save save" "chk quote";
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
    overflow: hidden;
  }
  #view .cv .cv-task-list > .cv-task::after {
    content: "";
    grid-area: chk;
    grid-column: 1 / -1;
    align-self: start;
    height: 1px;
    margin-top: var(--m-gap-s);
    background: var(--line-2);
  }
  #view .cv .cv-task-list .cv-task-copy,
  #view .cv .cv-task-list .cv-task-context,
  #view .cv .cv-task-list .cv-task-side,
  #view .cv .cv-task-list .cv-task-buttons { display: contents; }

  #view .cv .cv-task-list .cv-task-pill {
    grid-area: pill;
    justify-self: start;
    align-items: center;
    gap: 6px;
    margin: var(--m-gap-s) 0 0 var(--m-pad);
    padding: 2px var(--m-gap-s);
    border: 1px solid var(--line-2);
    border-radius: var(--m-gap-s);
    background: color-mix(in srgb, var(--ink) 5%, var(--cv-card));
    color: var(--ink-2);
    font-size: var(--m-cap);
    font-weight: 500;
    line-height: 1.25;
  }
  .cv .cv-task-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  #view .cv .cv-task-list .cv-task-pill.is-done { color: var(--sig); background: color-mix(in srgb, var(--sig) 10%, var(--cv-card)); border-color: color-mix(in srgb, var(--sig) 35%, var(--line-2)); }
  #view .cv .cv-task-list .cv-task-pill.is-late { color: var(--bad, #b3261e); background: color-mix(in srgb, var(--bad, #b3261e) 8%, var(--cv-card)); border-color: color-mix(in srgb, var(--bad, #b3261e) 35%, var(--line-2)); }
  #view .cv .cv-task-list .cv-task-pill.is-soon { color: #7b5418; background: #fff0cc; border-color: #d7b96c; }

  #view .cv .cv-task-list .cv-task-title {
    grid-area: title;
    width: calc(100% - 2 * var(--m-gap-s));
    min-height: var(--m-control);
    margin: var(--m-gap-xs) var(--m-gap-s) var(--m-gap-xs);
    padding: var(--m-gap-xs) 6px;
    border: 1px solid transparent;
    border-radius: var(--m-gap-s);
    background: transparent;
    color: var(--ink);
    font-size: var(--m-input);
    font-weight: 650;
    line-height: 1.35;
  }
  #view .cv .cv-task-list .cv-task-title:hover { border-color: transparent; }
  #view .cv .cv-task-list .cv-task-title:focus { border-color: var(--sig); background: var(--cv-card); }
  #view .cv .cv-task-list .cv-task.is-done .cv-task-title { color: var(--ink-2); text-decoration: line-through; }
  #view .cv .cv-task-list .cv-task-context > span {
    grid-area: ctx;
    margin: 0;
    padding: 0 var(--m-pad);
    color: var(--ink-2);
    font-size: var(--m-cap);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* the due date: a fact row (icon + label left, date right); the native date field sits invisibly over it, a 44px target */
  #view .cv .cv-task-list .cv-task-due-row {
    grid-area: due;
    align-items: center;
    gap: var(--m-gap-s);
    min-height: var(--m-tap);
    margin: 0;
    padding: 0 var(--m-pad);
    color: var(--ink);
    font-size: var(--m-body);
  }
  .cv .cv-task-due-row::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .cv .cv-task-due-row > span { flex: 1 1 auto; color: var(--ink-2); }
  .cv .cv-task-due-row > b { flex: none; font-weight: 600; }
  .cv .cv-task-due-row > b::after { content: "\203A"; margin-left: var(--m-gap-s); color: var(--ink-2); font-size: var(--m-h3); font-weight: 400; vertical-align: -1px; }
  #view .cv .cv-task-list .cv-task-date {
    grid-area: due;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    min-height: var(--m-tap);
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    z-index: 2;
    position: relative;
    overflow: hidden;
  }
  #view .cv .cv-task-list .cv-task-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; }
  #view .cv .cv-task-list .cv-task-date:focus-visible + .cv-task-due-row { outline: 2px solid var(--sig); outline-offset: -2px; border-radius: 10px; }

  /* Save appears once the text or date is edited: a full-width green button */
  #view .cv .cv-task-list .cv-task-buttons > button[data-cv-action="save-task"] {
    grid-area: save;
    justify-content: center;
    height: var(--m-tap);
    min-height: var(--m-tap);
    margin: var(--m-gap-s) var(--m-pad) var(--m-gap-xs);
    padding: var(--m-gap) var(--m-gap-l);
    border: 0;
    border-radius: var(--m-radius);
    background: var(--sig);
    color: var(--on-sig);
    font-size: var(--m-body);
    font-weight: 600;
  }
  #view .cv .cv-task-list .cv-task-buttons > button[data-cv-action="save-task"][hidden] { display: none !important; }

  /* delete: the same control, top-right, a 44px target */
  #view .cv .cv-task-list .cv-task-buttons > button[data-cv-action="delete-task"] {
    grid-area: del;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--m-control);
    height: var(--m-control);
    min-height: var(--m-control);
    margin: 0;
    padding: 0;
    color: var(--ink-2);
  }
  #view .cv .cv-task-list .cv-task-buttons > button[data-cv-action="delete-task"] svg { width: 20px; height: 20px; }

  /* the foot: a divider, "Mark as done" left, "View quote" right (L9) */
  #view .cv .cv-task-list .cv-task-check {
    grid-area: chk;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--m-gap);
    min-width: 0;
    min-height: var(--m-tap);
    margin: var(--m-gap-s) 0 0;
    padding: 0 var(--m-pad);
    color: var(--ink);
    font-size: var(--m-body);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
  }
  #view .cv .cv-task-list .cv-task-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid var(--ink-2);
    border-radius: var(--m-gap-s);
    background: var(--cv-card) center / 16px no-repeat;
  }
  #view .cv .cv-task-list .cv-task-check input[type="checkbox"]:checked {
    border-color: var(--sig);
    background-color: var(--sig);
  }
  #view .cv .cv-task-list .cv-task-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
  #view .cv .cv-task-list .cv-task-context > button[data-cv-action="evidence"] {
    grid-area: quote;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--m-tap);
    margin: var(--m-gap-s) 0 0;
    padding: var(--m-gap) var(--m-pad);
    border: 0;
    background: transparent;
    color: var(--sig);
    font-size: var(--m-body);
    font-weight: 600;
    text-decoration: none;
  }
  #view .cv .cv-task-list .cv-task-context > button[data-cv-action="evidence"] > span { text-decoration: none; }
  #view .cv .cv-task-list .cv-task-context > button[data-cv-action="evidence"]::after { content: "\203A"; margin: -3px 0 0 6px; font-size: var(--m-h3); font-weight: 400; line-height: 1; }

  /* The share drawn under each buyer row (owner ruling, 21 Oct 2026, his Property feedback comp): the row's own
     figure as a green fill on a quiet track. js/dashboard-conversations.js emits the bar with --pct set to the same
     number the row prints, and only when it prints one, so the bar can never disagree with the words beside it.
     It takes a row of its own under the four summary columns. */
  #view .cv .cv-ranked-topics > .cv-insight > summary > .cv-topic-bar {
    grid-column: 1 / -1;
    display: block;
    grid-row: 2;
    height: var(--m-gap-xs);
    margin: var(--m-gap-s) 0 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 10%, var(--cv-card));
    overflow: hidden;
  }
  #view .cv .cv-ranked-topics > .cv-insight > summary > .cv-topic-bar::after {
    content: "";
    display: block;
    width: var(--pct, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--sig);
  }

  /* A conversation held back for her to look at is amber, not the same grey as one that was never a buyer's
     (owner ruling, 21 Oct 2026, his comp reads "Awaiting review" in amber over "Not a buyer conversation" in grey). */
  #view .cv .cv-excluded > .cv-exclusion > .cv-exclusion-pending {
    background: #FDF3DF;
    color: #8A6A2F;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #8A6A2F 22%, transparent);
  }

  /* ======================================================================================================================
     The conversation's Review and Follow up stages (owner ruling, 21 Oct 2026, his ten comps). Every rule below is led by
     #view .cv-flow so it only ever touches the open conversation, and beats the desktop and 780px sheets by specificity.
     ====================================================================================================================== */

  /* the conversation's title: bold, loosely tracked so it breaks after "her" as drawn, the Reviewed pill sitting after the
     last word, the date under it at reading size (the comps show the same header on every stage) */
  /* THE HEADER IS ONE ROW (owner, 26 Oct 2026, his phone against his redesign: "theres this really weird bug throughout
     conversations where the header is really big, and messy"). The 780px sheet builds this grid around
     `.cv-mobile-brand`: row 1 is the brand on the left and the actions on the right, row 2 the title across both. The
     app shell draws ☰ Plinth and the plan itself now, so the brand is hidden on a phone and row 1 was left holding the
     allowance alone, above the title. That is the loose band he circled, and the header stood 222px tall in three
     stacked rows before the page began. The back arrow and title take the left, the allowance sits at their right, as
     his redesign draws it. The recording state keeps its own three column grid (point 3 of the live help comp). */
  /* 26 Oct 2026, the scale ruling ("i hate fucking scrolling super much"): the row is unchanged (the back arrow and title
     at the left, the allowance with its two buttons at the right), but the date line under the title now spans the whole
     header instead of living in the title's narrow column. A long title leaves that column 130px wide, and the line broke
     into three, taking the header to 250px; it is one line under the whole row now. The recording state's grid, below,
     was already built this way. */
  #view .cv-flow:not(:has(.cv-recorder.is-recording)) .cv-heading {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 var(--m-gap-s);
  }
  #view .cv-flow:not(:has(.cv-recorder.is-recording)) .cv-heading > .cv-heading-copy { display: contents; }
  #view .cv-flow:not(:has(.cv-recorder.is-recording)) .cv-heading-copy > .cv-back { grid-column: 1; grid-row: 1; }
  #view .cv-flow:not(:has(.cv-recorder.is-recording)) .cv-heading-copy > h1 { grid-column: 2; grid-row: 1; }
  #view .cv-flow:not(:has(.cv-recorder.is-recording)) .cv-heading-copy > .cv-detail-subtitle { grid-column: 2 / -1; grid-row: 2; }
  #view .cv-flow:not(:has(.cv-recorder.is-recording)) .cv-heading > .cv-heading-actions {
    grid-column: 3;
    grid-row: 1;
    padding: 0;
    justify-content: flex-end;
  }
  #view .cv-flow:not(:has(.cv-recorder.is-recording)) .cv-heading > .cv-workflow { grid-column: 1 / -1; grid-row: 3; margin-top: var(--m-gap-s); }
  #view .cv-flow .cv-heading-actions { min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
  #view .cv-flow .cv-heading-actions > .cv-usage-menu { flex: 0 1 auto; min-width: 0; }
  #view .cv-flow .cv-usage-menu > summary { min-width: 0; white-space: normal; }
  #view .cv-flow .cv-usage-menu > summary > span { min-width: 0; overflow-wrap: anywhere; }
  /* MOVED 26 Oct 2026 (the scale ruling): the title was 26px with a 15px date under it and a 14px badge. A conversation's
     title is a section heading, so it takes --m-h3, its date and badge the caption size. */
  #view .cv-flow .cv-heading-copy > h1 { font-size: var(--m-h4); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
  /* the buttons at the right of the title (Details, Rules and law) are 40 wide and tall, so a long title keeps the room */
  #view .cv-flow .cv-heading-actions > .cv-rules-button { flex: 0 0 var(--m-control); width: var(--m-control); min-width: var(--m-control); height: var(--m-control); min-height: var(--m-control); padding: 0; }
  #view .cv-flow .cv-heading-actions > .cv-usage-menu > summary { min-height: var(--m-control); padding: 0; font-size: var(--m-body); color: var(--ink-2); }
  #view .cv-flow .cv-reviewed-badge { gap: 6px; margin-left: var(--m-gap-s); padding: 2px var(--m-gap-s) 2px 6px; border-radius: var(--m-gap-s); font-size: var(--m-cap); font-weight: 500; }
  #view .cv-flow .cv-reviewed-badge > svg { width: 14px; height: 14px; }
  #view .cv-flow .cv-heading-copy > .cv-detail-subtitle { margin-top: var(--m-gap-xs); font-size: var(--m-cap); }
  /* the Record / Review / Follow up stepper: its labels give way (words wrap) at the largest text sizes instead of widening the page */
  #view .cv-flow .cv-workflow { min-width: 0; }
  #view .cv-flow .cv-workflow .cv-stage { min-width: 0; }
  #view .cv-flow .cv-workflow .cv-stage { flex: 1 1 auto; font-size: var(--m-cap); white-space: normal; text-align: left; }
  #view .cv-flow .cv-workflow .cv-stage > span { min-width: 0; font-size: var(--m-cap); white-space: normal; overflow-wrap: anywhere; }
  /* The rail is a row of three thumb targets, 44px tall, made of padding around a 20px number so the label inside is one
     line tall to anything that measures it; its digits are the smallest size on the scale. Setup and every stage. */
  #view .cv .cv-workflow .cv-stage { min-height: var(--m-tap); padding-block: var(--m-gap); font-size: var(--m-cap); }
  #view .cv .cv-workflow .cv-stage .cv-stage-number { width: 20px; height: 20px; font-size: var(--m-cap-s); }

  /* the stage card and its tab row: one white 14px card, tabs filling the row, the open tab green with a 3px underline
     that sits on the hairline. The Edit notes (Review) and Add task (Follow up) controls ride at the right of the row. */
  #view .cv-flow .cv-workspace-card {
    margin: 0 0 var(--m-gap);
    padding: 0 var(--m-gap);
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
  }
  #view .cv-flow .cv-workspace-header {
    display: flex;
    flex-wrap: nowrap;   /* one row at every text size: the tabs and the button give way (words wrap) before the row breaks */
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 4px 0 0;
    border: 0;
    border-bottom: 1px solid var(--line-2);
  }
  #view .cv-flow .cv-workspace-header > .cv-panel-tabs { flex: 1 1 auto; gap: 0; margin: 0; border: 0; }
  #view .cv-flow .cv-workspace-header > .cv-panel-tabs > button {
    flex: 1 1 0;
    min-height: var(--m-tap);
    margin: 0 0 -1px;
    padding: var(--m-gap) var(--m-gap-s);   /* the height is padding, so the label's own box is one line tall */
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: var(--m-body);
    font-weight: 450;
  }
  #view .cv-flow .cv-workspace-header > .cv-panel-tabs > button span { font-size: var(--m-body); font-weight: inherit; color: inherit; }   /* sizes are written out, not inherited, so a text-size change scales each once */
  #view .cv-flow .cv-workspace-header > .cv-panel-tabs > button[aria-pressed="true"] {
    color: var(--sig);
    font-weight: 650;
    border-bottom-color: var(--sig);
  }
  /* with a control at the right the tabs take their own width; with none (Transcript, Message) they share the row */
  #view .cv-flow .cv-workspace-header:has(> div:not([hidden])) > .cv-panel-tabs { flex: 0 1 auto; min-width: 0; }
  #view .cv-flow .cv-workspace-header:has(> div:not([hidden])) > .cv-panel-tabs > button { flex: 0 1 auto; min-width: 0; padding-inline: var(--m-gap); }
  #view .cv-flow .cv-workspace-header > .cv-panel-tabs > button span { overflow-wrap: anywhere; }
  #view .cv-flow .cv-workspace-header > div { position: relative; flex: 0 1 auto; min-width: 0; margin: 0 0 3px auto; padding: 0; }
  /* Review has three tabs since the call grader's "How it went" (23 Oct 2026). The two rules above assume two
     tabs plus the action on one row and let everything shrink, with overflow-wrap as the safety valve, and three
     tabs trip it: the labels broke mid-word ("Sum mary", "Trans cript") and "Edit notes" wrapped letter by
     letter. With the grade tab present the tabs take the whole row and share it evenly, and the action drops
     to its own line. Keyed on the grade tab so the two-tab Follow-up strip keeps the layout above. */
  #view .cv-flow .cv-workspace-header:has(> .cv-panel-tabs > button[data-cv-target="grade"]) { flex-wrap: wrap; }
  #view .cv-flow .cv-workspace-header:has(> .cv-panel-tabs > button[data-cv-target="grade"]) > .cv-panel-tabs { flex: 1 1 100%; }
  #view .cv-flow .cv-workspace-header:has(> .cv-panel-tabs > button[data-cv-target="grade"]) > .cv-panel-tabs > button { flex: 1 1 0; white-space: nowrap; padding-inline: 6px; }
  #view .cv-flow .cv-workspace-header > div > button {
    display: flex;
    align-items: center;
    gap: var(--m-gap-s);
    min-height: var(--m-control);
    max-width: 100%;
    margin: 0;
    padding: var(--m-pad-s) var(--m-gap-xs) var(--m-pad-s) var(--m-gap);
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--m-body);
    font-weight: 500;
    text-decoration: none;
  }
  #view .cv-flow .cv-workspace-header > div > button > svg { display: none; }
  #view .cv-flow .cv-workspace-header > div > button > span { min-width: 0; font-size: var(--m-body); font-weight: inherit; color: inherit; overflow-wrap: anywhere; }
  #view .cv-flow .cv-workspace-header > div > button[data-cv-action="add-task"] > span { font-size: var(--m-body); }
  /* Edit notes: a pencil before the words and a hairline divider before the pencil, as drawn */
  #view .cv-flow .cv-workspace-header > div > button[data-cv-action="edit-transcript"]::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-3.5L16 4.5 19.5 8 7.5 20H4z'/%3E%3Cpath d='m13.5 7 3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-3.5L16 4.5 19.5 8 7.5 20H4z'/%3E%3Cpath d='m13.5 7 3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #view .cv-flow .cv-workspace-header > div:has(> button[data-cv-action="edit-transcript"])::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 24px;
    border-left: 1px solid var(--line-2);
    transform: translateY(-50%);
  }
  /* Add task: the white outlined button with a plus, 40px tall */
  #view .cv-flow .cv-workspace-header > div > button[data-cv-action="add-task"] {
    padding-inline: var(--m-gap);
    border: 1px solid var(--card-edge, var(--line-2));
    border-radius: var(--m-radius);
    background: var(--cv-card);
    font-size: var(--m-body);
  }
  #view .cv-flow .cv-workspace-header > div > button[data-cv-action="add-task"] > svg { display: block; width: 18px; height: 18px; flex: none; }

  /* ---- Review, Summary tab (af82d43e, fc12e681, dcbfc453) ----
     His card holds the tab row and "Client said"; "You promised" and "Still to answer" sit on the page under it as their own
     cards. So while the Summary tab shows, the stage card gives up its own box and the tab row plus the first group draw it
     (the header is its top, the first group its bottom). The Transcript tab keeps the whole card. */
  #view .cv-flow .cv-workspace-card[data-cv-panel="review"]:has(> div[data-cv-review-panel="summary"]:not([hidden])) { display: contents; }
  #view .cv-flow .cv-workspace-card[data-cv-panel="review"]:has(> div[data-cv-review-panel="summary"]:not([hidden])) > .cv-workspace-header {
    margin: 0 0 var(--m-gap);
    padding: var(--m-gap-xs) var(--m-gap) 0;
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card) linear-gradient(var(--line-2), var(--line-2)) var(--m-gap) 100% / calc(100% - 2 * var(--m-gap)) 1px no-repeat;
  }
  /* when a group follows, the header is only the top of the card */
  #view .cv-flow .cv-workspace-card[data-cv-panel="review"]:has(.cv-summary > .cv-summary-group):has(> div[data-cv-review-panel="summary"]:not([hidden])) > .cv-workspace-header {
    margin-bottom: 0;
    border-bottom-color: transparent;
    border-radius: var(--m-radius) var(--m-radius) 0 0;
  }
  #view .cv-flow .cv-summary { margin: 0; padding: 0; }
  #view .cv-flow .cv-summary-group { margin: var(--m-gap-l) 0 0; padding: 0; border: 0; }
  /* MOVED 26 Oct 2026: a group heading ("You promised", "Still to answer") was 22px with a 26px glyph; it is a section
     heading, so --m-h3, and the card's own first group takes --m-h4. */
  #view .cv-flow .cv-summary-group h3 {
    display: flex;
    align-items: center;
    gap: var(--m-gap-s);
    margin: 0 0 var(--m-gap-s);
    color: var(--ink);
    font-size: var(--m-h3);
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  #view .cv-flow .cv-summary-group h3 > svg { flex: none; width: 22px; height: 22px; color: var(--sig); }
  /* the first group is the bottom of the tab card: smaller heading, inset rows split by hairlines */
  #view .cv-flow .cv-summary > .cv-summary-group:first-of-type {
    margin: 0 0 var(--m-gap);
    padding: var(--m-gap-xs) var(--m-gap) 0;
    border: 1px solid var(--line-2);
    border-top: 0;
    border-radius: 0 0 var(--m-radius) var(--m-radius);
    background: var(--cv-card);
  }
  #view .cv-flow .cv-summary > .cv-summary-group:first-of-type h3 { margin: var(--m-gap-s) 0 var(--m-gap-xs); padding: 0 var(--m-gap-xs); font-size: var(--m-h4); font-weight: 600; letter-spacing: 0; }
  #view .cv-flow .cv-summary > .cv-summary-group:first-of-type h3 > svg { width: 20px; height: 20px; }

  /* a plain list row: the words left, the timestamp link hard right, a hairline between rows */
  #view .cv-flow .cv-summary-group > ul:not(.cv-questions) { margin: 0; padding: 0; list-style: none; }
  #view .cv-flow .cv-summary-group > ul:not(.cv-questions) > li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--m-gap);
    margin: 0;
    padding: var(--m-pad-s) var(--m-gap-s);
    color: var(--ink);
    font-size: var(--m-body);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  #view .cv-flow .cv-summary-group > ul:not(.cv-questions) > li + li { margin: 0; border-top: 1px solid var(--line-2); }
  #view .cv-flow .cv-summary-evidence { display: flex; flex: none; align-items: flex-start; margin: 0 0 0 auto; color: var(--ink-2); }
  /* A line the client said more than once links every occurrence, so that row carries one time per occurrence. Side
     by side in the flex row they pushed the first time into the middle, off the line every other row's time sits on
     (owner's screenshot, 26 Oct 2026: "do up and down, so the timestamps stay in the same vertical line"). Such a row
     becomes a two column grid instead, the words left and every time in the right hand column, so the extras stack
     under the first on the same edge. The first keeps its negative top margin, which is what sets it level with the
     first line of the words; the ones below start where they are, since two 44px targets pulled up by 11px each
     would run into each other. */
  #view .cv-flow .cv-summary-group > ul:not(.cv-questions) > li:has(> .cv-summary-evidence + .cv-summary-evidence) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 12px; row-gap: 0;
  }
  #view .cv-flow li:has(> .cv-summary-evidence + .cv-summary-evidence) > .cv-summary-evidence { grid-column: 2; justify-content: flex-end; margin: 0; }
  #view .cv-flow li:has(> .cv-summary-evidence + .cv-summary-evidence) .cv-summary-source { margin: -11px -9px 0 0; }
  #view .cv-flow li:has(> .cv-summary-evidence + .cv-summary-evidence) > .cv-summary-evidence + .cv-summary-evidence .cv-summary-source { margin-top: 0; }
  /* the timestamp is a real link to that point: green, underlined, 44px tall, set level with the first line */
  #view .cv-flow .cv-summary-source,
  #view .cv-flow .cv-question-meta .cv-summary-source {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--m-tap);
    min-height: var(--m-tap);
    margin: -11px -9px -11px 0;
    padding: 0 var(--m-gap-s);
    border: 0;
    border-radius: var(--m-gap-s);
    background: transparent;
    color: var(--sig);
    font-size: var(--m-body);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    white-space: nowrap;
  }
  #view .cv-flow .cv-summary-source > span { font-size: var(--m-body); font-weight: 500; }

  /* You promised: one white card per promise: a green dot, the promise in bold, "Due ..." in green, then the agent's own
     words in a tinted block with a green left bar and the timestamp at its right */
  #view .cv-flow .cv-summary-group > ul:not(.cv-questions):has(> li > .cv-summary-due) { display: grid; gap: 12px; }
  #view .cv-flow .cv-summary-group > ul:not(.cv-questions) > li:has(> .cv-summary-due) {
    position: relative;
    display: block;
    padding: var(--m-pad) var(--m-pad) var(--m-pad) 34px;
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
    font-size: var(--m-body-lg);
    font-weight: 650;
    line-height: 1.35;
  }
  #view .cv-flow .cv-summary-group > ul:not(.cv-questions) > li:has(> .cv-summary-due) + li { margin: 0; border-top: 1px solid var(--line-2); }
  #view .cv-flow .cv-summary-group > ul:not(.cv-questions) > li:has(> .cv-summary-due)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 21px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sig);
  }
  #view .cv-flow .cv-summary-due {
    display: block;
    margin: var(--m-gap-xs) 0 0 -18px;
    padding: 0 0 var(--m-gap-s) 18px;
    border-bottom: 1px solid var(--line-2);
    color: var(--sig);
    font-size: var(--m-body);
    font-weight: 600;
    line-height: 1.4;
  }
  #view .cv-flow li:has(> .cv-summary-due) > .cv-summary-evidence {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--m-gap-s);
    margin: var(--m-gap-s) 0 0 -18px;
    padding: var(--m-pad-s) var(--m-pad-s) var(--m-pad-s) var(--m-gap);
    border-left: 3px solid var(--sig);
    border-radius: 4px;
    background: color-mix(in srgb, var(--sig) 10%, var(--cv-card));
  }
  #view .cv-flow .cv-summary-quote {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0 0 0.5em;
    color: var(--ink-2);
    font-size: var(--m-body);
    font-weight: 400;
    line-height: 1.45;
    text-indent: -0.5em;   /* the opening quote mark hangs, so the words line up under the words */
  }
  #view .cv-flow li:has(> .cv-summary-due) > .cv-summary-evidence > .cv-summary-source { margin: -11px -9px -11px 0; flex: none; }

  /* any other plain list in a later group (next steps) is one white card of rows */
  #view .cv-flow .cv-summary-group:not(:first-of-type) > ul:not(.cv-questions):not(:has(> li > .cv-summary-due)) {
    padding: 0 var(--m-gap);
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
  }

  /* Still to answer: the buyer's question in a card, its timestamp under it, then Add follow-up and Check rules abreast */
  #view .cv-flow .cv-summary-group .cv-questions { display: grid; gap: var(--m-gap-s); margin: 0; padding: 0; list-style: none; }
  #view .cv-flow .cv-question {
    display: block;
    padding: var(--m-pad);
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
    color: var(--ink);
  }
  #view .cv-flow .cv-question > * + * { margin-top: var(--m-gap-s); }
  #view .cv-flow .cv-question-text { display: block; font-size: var(--m-body-lg); font-weight: 650; line-height: 1.35; }
  #view .cv-flow .cv-question-answer { font-size: var(--m-body); line-height: 1.45; }
  #view .cv-flow .cv-question-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: var(--m-gap-xs); }
  #view .cv-flow .cv-question-meta .cv-summary-evidence { display: contents; }
  #view .cv-flow .cv-question-meta .cv-summary-source { margin: 0 0 0 -9px; }
  /* The two buttons share a row while both fit and the second drops under the first when they do not, so neither label is
     ever set on two lines (it was two equal columns, and "Add to follow-ups" broke in half in its column). */
  #view .cv-flow .cv-question-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-gap-s);
    margin-top: var(--m-gap-xs);
    padding: var(--m-gap-s) 0 0;
    border-top: 1px solid var(--line-2);
  }
  #view .cv-flow .cv-question .cv-question-actions > .cv-text-button:not(.cv-summary-source) {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--m-control) !important;
    margin: 0;
    padding: var(--m-pad-s) var(--m-gap-s);
    white-space: nowrap;
    border: 1px solid var(--card-edge, var(--line-2));
    border-radius: var(--m-radius);
    background: var(--cv-card);
    color: var(--ink);
    font-size: var(--m-body);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }
  #view .cv-flow .cv-question-actions > .cv-text-button > span { font-size: var(--m-body); font-weight: 500; color: inherit; }
  #view .cv-flow .cv-question-actions > button[data-cv-action="question-task"]::before,
  #view .cv-flow .cv-question-actions > button[data-cv-action="lookup"]::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: currentColor;
  }
  #view .cv-flow .cv-question-actions > button[data-cv-action="question-task"]::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #view .cv-flow .cv-question-actions > button[data-cv-action="lookup"]::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Continue to follow up: no divider above it now, a full-width 48px green primary */
  #view .cv-flow .cv-review { margin: var(--m-gap) 0 0; padding: 0; border: 0; }
  #view .cv-flow .cv-review > .cv-primary {
    min-height: var(--m-tap) !important;   /* dashboard-f27 floors every button at 44px with !important; a primary is the thumb floor, 44 */
    padding-block: var(--m-gap);
    border-radius: var(--m-radius);
    font-size: var(--m-body);
    font-weight: 600;
  }
  #view .cv-flow .cv-review > .cv-primary > svg { width: 20px; height: 20px; }

  /* ---- Review, Transcript tab (90d22830, f37a0c02, 24055462) ----
     No inner box: the heading and its two buttons, then one entry per line, all inside the stage card. */
  #view .cv-flow .cv-workspace-card .cv-transcript-editor {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #view .cv-flow .cv-transcript-editor .cv-transcript-header {
    display: block;
    padding: var(--m-gap) 0;
    border-bottom: 1px solid var(--line-2);
  }
  #view .cv-flow .cv-transcript-header > div { display: flex; align-items: baseline; gap: var(--m-gap); margin: 0 0 var(--m-gap-s); }
  #view .cv-flow .cv-transcript-header h2 { margin: 0; color: var(--ink); font-size: var(--m-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
  #view .cv-flow .cv-transcript-header > div > span { color: var(--ink-2); font-size: var(--m-body); }
  #view .cv-flow .cv-transcript-header .cv-transcript-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--m-gap-s);
    width: auto;
    margin: 0;
  }
  #view .cv-flow .cv-transcript-header-actions > button,
  #view .cv-flow .cv-transcript-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-gap-s);
    width: 100%;
    min-height: var(--m-control) !important;
    margin: 0;
    padding: var(--m-pad-s) var(--m-gap);
    border-radius: var(--m-radius);
    font-size: var(--m-body);
    font-weight: 600;
    line-height: 1.2;
  }
  #view .cv-flow .cv-transcript-add { border: 1px solid var(--sig); background: var(--cv-card); color: var(--sig); }
  #view .cv-flow .cv-transcript-add span { font-size: var(--m-body); font-weight: 600; color: inherit; }
  #view .cv-flow .cv-transcript-add svg,
  #view .cv-flow .cv-transcript-header-actions > .cv-primary svg { width: 18px; height: 18px; flex: none; }
  #view .cv-flow .cv-transcript-header-actions > .cv-primary { border: 0; background: var(--sig); color: var(--on-sig); }

  #view .cv-flow .cv-transcript-editor .cv-transcript-lines > .cv-transcript-row {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 var(--m-gap-s);
    margin: 0;
    padding: var(--m-gap-xs) 0 var(--m-gap-s);
    border-bottom: 1px solid var(--line-2);
  }
  /* the timestamp chip: a green-tinted 30px chip that is still a 44px target, and still the link that seeks the audio */
  #view .cv-flow .cv-line-time { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding: 0; }
  #view .cv-flow .cv-line-time > button {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--m-tap);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sig);
    font-size: var(--m-body);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  #view .cv-flow .cv-line-time > button::before {
    content: "";
    position: absolute;
    inset: 9px 0;
    z-index: -1;
    border-radius: var(--m-gap-s);
    background: color-mix(in srgb, var(--sig) 10%, var(--cv-card));
  }
  #view .cv-flow .cv-line-speaker { grid-column: 2; grid-row: 1; padding: var(--m-gap-s) 0 0; font-size: var(--m-body); font-weight: 700; line-height: 28px; color: var(--ink); }
  #view .cv-flow .cv-transcript-row[data-cv-role="buyer"] .cv-line-speaker { color: var(--ink); }
  #view .cv-flow .cv-line-content { grid-column: 2; grid-row: 2; }
  #view .cv-flow .cv-transcript-editor textarea[data-cv-line-text] { color: var(--ink); font-size: var(--m-input); line-height: 1.5; }
  /* the line's edit and delete icons appear when a line is tapped; they float at its top right instead of taking a column */
  #view .cv-flow .cv-transcript-row > .cv-line-actions { position: absolute; top: 4px; right: 0; grid-column: auto; grid-row: auto; }
  #view .cv-flow .cv-transcript-editor .cv-transcript-footer { padding: var(--m-gap) 0; }
  #view .cv-flow .cv-transcript-footer > small { color: var(--ink-2); font-size: var(--m-body); }
  #view .cv-flow .cv-transcript-footer .cv-transcript-add { width: auto; min-width: 0; min-height: var(--m-control) !important; padding: var(--m-pad-s) var(--m-gap); font-size: var(--m-body); }
  #view .cv-flow .cv-transcript-tools { border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: var(--m-body); }
  #view .cv-flow .cv-transcript-tools > summary { min-height: var(--m-tap); padding: 0; font-size: var(--m-body); }
  #view .cv-flow .cv-transcript-tools > summary::after { color: var(--ink); font-size: var(--m-h3); line-height: 1; }

  /* ---- Follow up, Tasks tab (6be1a16b, 996fc913) ----
     One bordered card per task inside the stage card: the box for the words with its tick beside it, "You promised" with
     View quote, then the due date and the bin. */
  #view .cv-flow .cv-followup-tasks { padding: 0; }
  #view .cv-flow .cv-followup-tasks > .cv-task-readable {
    grid-template-columns: var(--m-tap) minmax(0, 1fr);
    gap: 0;
    align-items: start;
    margin: var(--m-gap-s) 0 0;
    padding: var(--m-pad-s) var(--m-gap) var(--m-pad-s) 2px;
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
  }
  /* the tick: a 44px target (the real checkbox, laid invisibly over its cell) that draws a 24px box. The product's own
     checkbox rule is !important at 17px, so the box is drawn by the label and the input only carries the tap. */
  #view .cv-flow .cv-task-readable > .cv-task-check { position: relative; align-self: start; justify-content: center; width: 44px; min-height: 44px; padding: 0; }
  #view .cv-flow .cv-task-readable > .cv-task-check input[type="checkbox"] {
    position: absolute !important;
    inset: 0;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    opacity: 0;
    cursor: pointer;
  }
  #view .cv-flow .cv-task-readable > .cv-task-check::before {
    content: "";
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--ink-2);
    border-radius: 7px;
    background: var(--cv-card);
    pointer-events: none;
  }
  #view .cv-flow .cv-task-readable > .cv-task-check:has(input:checked)::before {
    border-color: var(--sig);
    background: var(--sig);
  }
  #view .cv-flow .cv-task-readable > .cv-task-check:has(input:checked)::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 16px;
    height: 16px;
    margin: auto;
    background: var(--on-sig);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  }
  #view .cv-flow .cv-task-readable > .cv-task-check:has(input:focus-visible)::before { outline: 2px solid var(--sig); outline-offset: 2px; }
  #view .cv-flow .cv-task-readable .cv-task-copy { padding: 0; }
  #view .cv-flow .cv-task-title {
    margin: 0;
    padding: var(--m-pad-s) var(--m-gap);
    border: 1px solid var(--line-2);
    border-radius: var(--m-gap-s);
    background: var(--cv-card);
    color: var(--ink);
    font-size: var(--m-input);
    font-weight: 450;
    line-height: 1.4;
  }
  #view .cv-flow .cv-task-title:hover { border-color: var(--line-2); }
  #view .cv-flow .cv-task-title:focus { border-color: var(--sig); }
  #view .cv-flow .cv-task-context { flex-wrap: nowrap; align-items: center; margin: var(--m-gap-xs) 0 0; gap: 0 var(--m-gap); color: var(--ink-2); font-size: var(--m-body); }
  #view .cv-flow .cv-task-context > span { flex: 0 1 auto; min-width: 0; padding-left: var(--m-gap-xs); overflow-wrap: anywhere; }
  #view .cv-flow .cv-task-context .cv-text-button {
    flex: 0 1 auto;
    min-width: 0;
    min-height: var(--m-tap);
    padding: var(--m-gap) var(--m-gap-xs);
    color: var(--sig);
    font-size: var(--m-body);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }
  #view .cv-flow .cv-task-context .cv-text-button > span { font-size: var(--m-body); font-weight: 600; }
  /* the due date: a calendar at its left, a chevron at its right, the native date field underneath so the picker still opens
     on a tap; the bin sits straight after it */
  #view .cv-flow .cv-task-readable .cv-task-side { position: relative; flex-wrap: nowrap; gap: var(--m-gap-s); margin-top: var(--m-gap-xs); }
  #view .cv-flow .cv-task-date {
    position: relative;
    flex: none;
    width: min(200px, calc(100% - 52px));
    min-height: var(--m-control);
    margin: 0;
    padding: 0 34px 0 38px;
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: color-mix(in srgb, var(--ink) 4%, var(--cv-card));
    color: var(--ink);
    font-size: var(--m-input);
    text-align: left;
    overflow: hidden;
  }
  #view .cv-flow .cv-task-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  #view .cv-flow .cv-task-side::before,
  #view .cv-flow .cv-task-side::after {
    content: "";
    position: absolute;
    top: calc((var(--m-control) - 20px) / 2);
    z-index: 3;   /* above the date field, which is later in the row */
    width: 20px;
    height: 20px;
    background: var(--ink);
    pointer-events: none;
  }
  #view .cv-flow .cv-task-side::before {
    left: var(--m-gap);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #view .cv-flow .cv-task-side::after {
    left: calc(min(200px, 100% - 52px) - 32px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #view .cv-flow .cv-task-side .cv-task-buttons { flex: none; gap: 0; }
  #view .cv-flow .cv-task-side .cv-task-buttons > button[data-cv-action="delete-task"] { min-height: var(--m-control); width: var(--m-control); color: var(--ink-2); }
  #view .cv-flow .cv-task-side .cv-task-buttons > button[data-cv-action="delete-task"] svg { width: 20px; height: 20px; }
  #view .cv-flow .cv-task-side .cv-task-buttons > button[data-cv-action="save-task"] { min-height: var(--m-control); margin-left: var(--m-gap-s); padding: var(--m-pad-s) var(--m-gap); border-radius: var(--m-radius); font-size: var(--m-body); }
  /* the footer: a hairline, "3 open tasks", and a full-width 44px green Draft message */
  #view .cv-flow .cv-followup-footer { flex-wrap: wrap; gap: var(--m-gap-s); margin: var(--m-gap) 0 0; padding: var(--m-gap) 0; border-top: 1px solid var(--line-2); }
  #view .cv-flow .cv-followup-footer > p { flex: 1 1 100%; margin: 0; color: var(--ink-2); font-size: var(--m-body); }
  #view .cv-flow .cv-followup-footer > .cv-primary { flex: 1 1 100%; width: 100%; min-height: var(--m-tap) !important; margin: 0; padding-block: var(--m-gap); border-radius: var(--m-radius); font-size: var(--m-body); font-weight: 600; }

  /* ---- Follow up, Message tab (dd9554ea, cdf5eb60) ----
     "Message" with the kind select at its right, the draft in a bordered box that grows to fit it, a hairline, then
     Rebuild draft (green, a refresh icon) with the "..." menu at its right, a full-width Copy message, and "Not sent". */
  #view .cv-flow .cv-message { padding: 0; }
  #view .cv-flow .cv-message > header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--m-gap); padding: var(--m-gap) 0 var(--m-gap-s); margin: 0; }
  #view .cv-flow .cv-message-to { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink); font-size: var(--m-body-lg); font-weight: 450; overflow-wrap: anywhere; }
  #view .cv-flow .cv-message > header > select {
    flex: 0 1 54%;
    width: auto;
    min-width: 0;
    max-width: 54%;
    min-height: var(--m-control);
    padding: 0 34px 0 var(--m-gap);
    border: 1px solid var(--card-edge, var(--line-2));
    border-radius: var(--m-radius);
    background-color: color-mix(in srgb, var(--ink) 4%, var(--cv-card));
    color: var(--ink);
    font-size: var(--m-input);
    font-weight: 450;
    -webkit-appearance: none;
    appearance: none;
  }
  /* the light theme clears every select's background image, so the chevron is drawn on the header, over the select's right
     end, the way the property row does it. The select stays the real control. */
  #view .cv-flow .cv-message > header { position: relative; }
  #view .cv-flow .cv-message > header::after {
    content: "";
    position: absolute;
    right: var(--m-gap-s);
    top: calc(var(--m-gap) + (var(--m-control) - 18px) / 2);
    width: 18px;
    height: 18px;
    background: var(--ink-2);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #view .cv-flow .cv-message textarea {
    display: block;
    min-height: 160px;
    max-height: none;
    padding: var(--m-pad);
    border: 1px solid var(--line-2);
    border-radius: var(--m-radius);
    background: var(--cv-card);
    color: var(--ink);
    font-size: var(--m-input);
    line-height: 1.5;
    resize: none;
    field-sizing: content;   /* the box grows to hold the whole draft, so nothing hides behind a scrollbar */
  }
  @supports not (field-sizing: content) { #view .cv-flow .cv-message textarea { min-height: 240px; } }
  #view .cv-flow .cv-message-footer { display: block; margin: var(--m-gap) 0 0; padding: 0; border-top: 1px solid var(--line-2); }
  #view .cv-flow .cv-message-secondary { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--m-tap); gap: var(--m-gap-s); }
  #view .cv-flow .cv-message-secondary > .cv-text-button {
    display: flex;
    align-items: center;
    gap: var(--m-gap-s);
    min-height: var(--m-tap);
    padding: var(--m-gap) var(--m-gap-xs);
    color: var(--sig);
    font-size: var(--m-body);
    font-weight: 500;
    text-decoration: none;
  }
  #view .cv-flow .cv-message-secondary > button[data-cv-action="draft"]::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.5-4.2L4 9M4 4v5h5M4 13a8 8 0 0 0 14.5 4.2L20 15M20 20v-5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.5-4.2L4 9M4 4v5h5M4 13a8 8 0 0 0 14.5 4.2L20 15M20 20v-5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #view .cv-flow .cv-message-secondary > button[data-cv-action="draft"] > span { font-size: var(--m-body); font-weight: 500; color: inherit; }
  #view .cv-flow .cv-message-more > summary { min-width: var(--m-tap); min-height: var(--m-tap); border-left: 1px solid var(--line-2); color: var(--ink); font-size: var(--m-h2); }
  #view .cv-flow .cv-message-more > div { border-color: var(--card-edge, var(--line-2)); }
  #view .cv-flow .cv-message-footer > .cv-primary { width: 100%; min-height: var(--m-tap) !important; margin: var(--m-gap-xs) 0 0; padding-block: var(--m-gap); border-radius: var(--m-radius); font-size: var(--m-body); font-weight: 600; }
  #view .cv-flow .cv-message-footer > .cv-primary > svg { width: 20px; height: 20px; }
  #view .cv-flow .cv-message-status { margin: var(--m-gap-s) 0 var(--m-gap); color: var(--ink-2); font-size: var(--m-body); text-align: center; }

  /* the narrowest phones: shorter tabs, and the two question buttons stack so neither is crushed */
  @media (max-width: 359px) {
    #view .cv-flow .cv-workspace-card { padding: 0 var(--m-pad-s); }
    #view .cv-flow .cv-workflow .cv-stage,
    #view .cv-flow .cv-workflow .cv-stage > span { font-size: var(--m-cap); }
    #view .cv-flow .cv-workspace-header:has(> div:not([hidden])) > .cv-panel-tabs > button { padding-inline: 6px; font-size: var(--m-body); }
    #view .cv-flow .cv-workspace-header:has(> div:not([hidden])) > .cv-panel-tabs > button span { font-size: var(--m-body); }
    #view .cv-flow .cv-workspace-card[data-cv-panel="review"]:has(> div[data-cv-review-panel="summary"]:not([hidden])) > .cv-workspace-header {
      padding: var(--m-gap-xs) var(--m-gap-s) 0;
      background-position: var(--m-gap-s) 100%;
      background-size: calc(100% - 2 * var(--m-gap-s)) 1px;
    }
    #view .cv-flow .cv-summary > .cv-summary-group:first-of-type { padding-left: var(--m-gap-s); padding-right: var(--m-gap-s); }
    #view .cv-flow .cv-transcript-header .cv-transcript-header-actions { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: var(--m-gap-s); }
    #view .cv-flow .cv-transcript-header-actions > button,
    #view .cv-flow .cv-transcript-add { gap: 6px; padding-inline: 6px; }
    #view .cv-flow .cv-transcript-add span,
    #view .cv-flow .cv-transcript-header-actions > .cv-primary span { font-size: var(--m-body); }
    #view .cv-flow .cv-transcript-add svg,
    #view .cv-flow .cv-transcript-header-actions > .cv-primary svg { width: 16px; height: 16px; }
    #view .cv-flow .cv-workspace-header > div > button { gap: 5px; padding-inline: var(--m-gap-s) 0; font-size: var(--m-body); }
    #view .cv-flow .cv-workspace-header > div > button[data-cv-action="edit-transcript"] > span { font-size: var(--m-body); }
    #view .cv-flow .cv-workspace-header > div > button[data-cv-action="add-task"] > span { font-size: var(--m-body); }
    #view .cv-flow .cv-workspace-header > div > button[data-cv-action="edit-transcript"]::before { width: 16px; height: 16px; }
    #view .cv-flow .cv-workspace-header > div > button[data-cv-action="add-task"] { padding-inline: var(--m-pad-s); font-size: var(--m-body); }
    #view .cv-flow .cv-followup-tasks > .cv-task-readable { padding: var(--m-pad-s) var(--m-pad-s) var(--m-pad-s) 0; }
    #view .cv-flow .cv-task-date { font-size: var(--m-input); padding: 0 var(--m-pad-s) 0 38px; }
    #view .cv-flow .cv-task-side::after { display: none; }
  }

  /* The usage card hangs from the header, not from the clock button (owner ruling, 21 Oct 2026). Desktop pins it to
     the button, left:0 and 280px wide. The button sits at the right of the header (x 280 of 412 in the capture flow,
     x 324 on the list), so the card ran from there to x 560 and the page scrolled sideways the moment it opened, on
     every phone width. His screen recording caught it in the capture flow. Anchored to the header and as wide as the
     header, it cannot leave the screen at any width or text size. */
  .cv .cv-heading { position: relative; }
  .cv .cv-heading .cv-usage-menu { position: static; }
  .cv .cv-heading .cv-usage-popover { left: 0; right: 0; width: auto; max-width: none; }
  /* Owner ruling, 21 Oct 2026: whatever the text size, the card's own words wrap and any overrun scrolls inside the card,
     so an enlarged allowance can never widen the page (the stress walk found it at 175% and 200% with the card open). */
  .cv .cv-heading .cv-usage-popover { overflow-x: auto; overflow-wrap: anywhere; }

  /* ======================================================================================================================
     THE CONVERSATIONS LIST ON A PHONE (owner's comp of 26 Oct 2026). The comp keeps what is already here (the big title
     with the book glyph and the minutes beside it, the four tabs in one row with "Property feedback" wrapping inside
     its own tab, New conversation beside Practice, the search, All properties beside Filters, and a card per
     conversation whose action is a full-width row at its foot behind a hairline) and changes four things:
       1. the voice card is short. The mic badge, "Set up your voice", one sentence, an OUTLINED Voice enrolment button
          and a Details link. The two sentences it leaves out are in the markup either way and open behind Details, so
          the desktop card is word for word what it was.
       2. the status chip sits on its own line under the title, not beside it.
       3. the property is two lines: its name, then its street in lighter type.
       4. the open tab is underlined and nothing more. Three of his four comps of this day draw it that way, including
          Property feedback, which has carried a FILLED segmented control since his ruling of 21 Oct 2026. That ruling
          is overtaken here (the fourth comp, the one with a fill, is his finger still on the tab he has just pressed).
     ====================================================================================================================== */

  /* The voice card, short (point 1). The long sentences keep their place in the markup and are ordered under the short
     one, so the desktop reads them in the order it always has. */
  #view .cv:not(.cv-flow) .cv-enrol {
    grid-template-columns: var(--m-control) minmax(0, 1fr);
    align-items: start;
    gap: var(--m-gap-s) var(--m-gap);
    padding: var(--m-pad);
  }
  #view .cv:not(.cv-flow) .cv-enrol-icon { grid-column: 1; grid-row: 1; }
  #view .cv:not(.cv-flow) .cv-enrol-copy { grid-column: 2; grid-row: 1; gap: var(--m-gap-xs); }
  /* The two controls become one row of their own, under the sentence and aligned with it, as the comp draws them.
     Beside the button at a phone's width they would be a column each, and "Details" would break off its chevron. */
  #view .cv:not(.cv-flow) .cv-enrol > .cv-enrol-actions {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
  }
  #view .cv:not(.cv-flow) .cv-enrol > .cv-enrol-actions > * { flex: 0 0 auto; width: auto; }
  #view .cv:not(.cv-flow) .cv-enrol-eyebrow { display: none; }
  #view .cv:not(.cv-flow) .cv-enrol h2 { font-size: var(--m-h4); letter-spacing: -0.01em; }
  #view .cv .cv-enrol .cv-enrol-short[hidden] { display: block !important; order: 0; font-size: var(--m-body); line-height: 1.4; color: var(--ink-2); }
  #view .cv .cv-enrol .cv-enrol-why { display: none; order: 1; }
  #view .cv .cv-enrol.is-details .cv-enrol-why { display: block; }
  #view .cv:not(.cv-flow) .cv-enrol .cv-enrol-button {
    min-height: var(--m-control);
    padding: var(--m-pad-s) var(--m-gap);   /* the height is padding, so the two words are one line tall to the walk's check */
    border: 1px solid var(--sig);
    background: transparent;
    color: var(--sig);
    font-size: var(--m-body);
    font-weight: 650;
  }
  #view .cv .cv-enrol .cv-enrol-details {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: var(--m-control);
    padding: var(--m-pad-s) var(--m-gap-s);
    border: 0;
    background: none;
    color: var(--ink);
    font-size: var(--m-body);
    font-weight: 500;
    white-space: nowrap;
  }
  #view .cv .cv-enrol .cv-enrol-details > span { text-decoration: underline; text-underline-offset: 3px; }
  #view .cv .cv-enrol .cv-enrol-details > svg { width: 16px; height: 16px; flex: none; }

  /* The chip (point 2). MOVED 26 Oct 2026: his comp of the morning gave it a line of its own under the title, with the
     date and the property under that. Today's scale ruling takes the line back: the title and its status share a line
     whenever they fit (a long title still sends the chip under it), as the first comp of 21 Oct drew them. */
  .cv .cv-row-wrap > .cv-row .cv-row-main > b { flex: 0 1 auto; }

  /* The property, two lines (point 3). The comma between them is drawn in a `.cv-d` span, which only a phone hides, so
     the desktop row still reads "Treasure At Tampines, 7 Tampines Lane" on its one line. */
  .cv .cv-row-wrap > .cv-row .cv-row-main > small { font-size: var(--m-cap); color: var(--ink); }
  .cv .cv-row-main > small > .cv-row-address { display: block; color: var(--ink-2); }

  /* The comp's three abreast rows, HELD BELOW 390 (owner, 26 Oct 2026, his own phone against his comp: "didnt i tell u
     to follow the design i gave u and make sure its the same"). The list was built and checked at 390, where all three
     fit. His phone is 360, and at 360 every one of them gave up: the minutes rode above the title, Details dropped
     under Voice enrolment, and Practice fell under New conversation. His comp draws them abreast, so below 390 each
     row keeps its shape by giving up type and padding and never by stacking. The wrap stays as the last resort for
     widths narrower than any phone sold. */
  @media (max-width: 389px) {
    .cv:not(.cv-flow) .cv-heading { flex-wrap: nowrap; gap: 0 var(--m-gap-s); }
    .cv:not(.cv-flow) .cv-heading-copy h1 { letter-spacing: -0.03em; }
    .cv:not(.cv-flow) .cv-heading-actions { gap: 0; }
    .cv:not(.cv-flow) .cv-usage-menu > summary { gap: 6px; font-size: var(--m-body); white-space: nowrap; }

    #view .cv:not(.cv-flow) .cv-enrol { grid-template-columns: var(--m-control) minmax(0, 1fr); gap: var(--m-gap-s) var(--m-gap); padding: var(--m-pad); }
    #view .cv:not(.cv-flow) .cv-enrol > .cv-enrol-actions { flex-wrap: nowrap; gap: 0 2px; }
    #view .cv:not(.cv-flow) .cv-enrol .cv-enrol-button { padding-inline: var(--m-pad-s); font-size: var(--m-body); }
    #view .cv .cv-enrol .cv-enrol-details { padding-inline: 2px; font-size: var(--m-body); }
    #view .cv .cv-enrol .cv-enrol-details > svg { width: 16px; height: 16px; }

    .cv .cv-controls { gap: var(--m-gap-s); }
    .cv .cv-controls > .cv-list-new { gap: var(--m-gap-s); padding-inline: var(--m-pad-s); font-size: var(--m-body); }
    .cv .cv-controls > .cv-list-new.pr-open { padding-inline: var(--m-pad-s); }
    .cv .cv-controls > .cv-list-new svg { width: 18px; height: 18px; }

    /* The narrowest phones still sold (320). The pair misses one row by a single pixel at the sizes above, and the tab
       grid gives each tab 96px, which breaks "Conversations" across two lines mid-word. Both are bought back here.
       `#view` on the pair is not decoration: practice.css loads after this sheet and sets the same padding on
       `.cv .cv-controls > .cv-list-new.pr-open` at equal weight, so without it the later sheet simply wins. The tab
       size goes on the buttons, which carry their own font-size, not on the row that holds them. */
    @media (max-width: 339px) {
      html body #view .cv:not(.cv-flow) .cv-tabs > button,
      html body #view .cv:not(.cv-flow) .cv-tabs > button.cv-feedback-link { font-size: var(--m-cap-s); }
      #view .cv:not(.cv-flow) .cv-heading-copy h1 { font-size: var(--m-h3); }
      #view .cv .cv-controls { gap: var(--m-gap-s); }
      #view .cv .cv-controls > .cv-list-new { gap: 6px; padding-inline: var(--m-gap-s); }
      #view .cv .cv-controls > .cv-list-new.pr-open { padding-inline: var(--m-gap-s); }
    }
  }

  /* ======================================================================================================================
     OVERALL ON A PHONE: THE DRILL-DOWN (owner's four Overall comps, 26 Oct 2026). On a phone the tab is three screens,
     not one scroll: the tab itself, the Coaching checklist, and one move. Each deeper screen draws a back row naming where
     it returns to, which is exactly what his comps show ("Overall" over the checklist page, "Coaching checklist" over a
     move's page). The markup is the same markup the desktop renders: the drill-down is the data-cv-step attribute the
     view puts on .cv-ov, and that attribute is only ever set by an action that asked onPhone(), so the desktop keeps
     the one page and the one open fold it has always had.
     He also asked for both the move's page and the open pattern card to be ZOOMED OUT MORE: the type on them comes
     down a step from what the 26 Oct rebuild left.
     ====================================================================================================================== */

  /* The back row. It names the screen it returns to, and it is a 44px target. */
  #view .cv .cv-ov > .cv-ov-back {
    display: inline-flex;
    justify-self: start;
    align-self: start;
    align-items: center;
    gap: var(--m-gap-s);
    min-height: var(--m-control);
    margin: 0 0 var(--m-gap-xs);
    padding: 0;
    border: 0;
    background: none;
    color: var(--sig);
    padding-block: var(--m-pad-s);   /* the height is padding, so "Coaching checklist" is one line tall to the walk's check */
    font-size: var(--m-body);
    font-weight: 500;
  }
  #view .cv .cv-ov > .cv-ov-back > svg { width: 18px; height: 18px; flex: none; }
  /* The group chips wrap onto as many rows as they need instead of running off the right edge in a strip that scrolls
     sideways with its last chips out of sight (owner: "make sure all the elemtns ... not cut off"). One line each, 40 tall. */
  #view .cv .cv-ov-chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; gap: var(--m-gap-s); }
  #view .cv .cv-ov .cv-ov-chip { min-height: var(--m-control); padding: var(--m-pad-s) var(--m-gap); font-size: var(--m-body); white-space: nowrap; }

  /* On either deeper screen only the browser is on the page, and it gives up the card it wears on the tab. */
  #view .cv .cv-ov[data-cv-step] > :not(.cv-ov-back):not(.cv-ov-looked) { display: none; }
  #view .cv .cv-ov[data-cv-step] > .cv-ov-looked { margin-top: 0; border: 0; border-radius: 0; background: transparent; }
  #view .cv .cv-ov[data-cv-step] > .cv-ov-looked::before { display: none; }
  #view .cv .cv-ov[data-cv-step] > .cv-ov-looked > .cv-ov-browser-body { padding: 0; }
  #view .cv .cv-ov[data-cv-step] > .cv-ov-looked.is-open > .cv-ov-browser-head { border-bottom: 0; }

  /* The Coaching checklist page: its own title with the calls reviewed under it, then Find an area, the chips, and the
     grouped list in one card. The fold's head becomes that title, so there is one of it and not two. */
  #view .cv .cv-ov[data-cv-step="areas"] > .cv-ov-looked > .cv-ov-browser-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding: 0 0 var(--m-gap);
  }
  #view .cv .cv-ov[data-cv-step="areas"] > .cv-ov-looked > .cv-ov-page-title { margin: 0; }
  #view .cv .cv-ov[data-cv-step="areas"] .cv-ov-browser-name { gap: var(--m-gap-xs); }
  #view .cv .cv-ov[data-cv-step="areas"] .cv-ov-browser-name > b { font-size: var(--m-h2); letter-spacing: -0.02em; line-height: 1.15; }
  #view .cv .cv-ov[data-cv-step="areas"] .cv-ov-browser-name > small { font-size: var(--m-body); }
  #view .cv .cv-ov[data-cv-step="areas"] .cv-ov-detail { display: none; }
  /* the list is the page now, so it does not keep a scroll of its own inside the page's scroll, and it wears the one
     card the comp draws around the whole grouped list */
  #view .cv .cv-ov[data-cv-step="areas"] .cv-ov-scroll {
    max-height: none;
    overflow: visible;
    padding: var(--m-gap-xs) var(--m-pad) var(--m-gap-xs);
    border: 1px solid var(--cv-edge);
    border-radius: var(--m-radius);
    background: var(--cv-card);
  }
  #view .cv .cv-ov[data-cv-step="areas"] .cv-ov-area-row { min-height: var(--m-tap); }

  /* A move's page: the move alone, with the list and the fold's head behind the back row. */
  #view .cv .cv-ov[data-cv-step="area"] > .cv-ov-looked > .cv-ov-browser-head,
  #view .cv .cv-ov[data-cv-step="area"] .cv-ov-master { display: none; }
  #view .cv .cv-ov[data-cv-step="area"] .cv-ov-split { gap: 0; }

  /* Viewing outcomes and Awaiting outcome are ONE card on a phone (his third Overall comp): the outcome's line, a
     hairline, then a clock in green over "Awaiting outcome" and the call under it. They are two sections in the
     markup, next to each other, so the pair is fused by taking the join off them rather than by moving either. */
  /* .cv-ov is a grid with a 16px row gap, so the join is closed by pulling the second section up over that gap. */
  #view .cv .cv-ov > .cv-ov-outcome:has(+ .cv-ov-waiting) { margin-bottom: -16px; border-bottom: 0; border-radius: var(--m-radius) var(--m-radius) 0 0; }
  #view .cv .cv-ov > .cv-ov-outcome + .cv-ov-waiting { margin-top: 0; border-top: 1px solid var(--line, var(--line-2)); border-radius: 0 0 var(--m-radius) var(--m-radius); }
  #view .cv .cv-ov > .cv-ov-outcome + .cv-ov-waiting > h2 {
    display: flex;
    align-items: center;
    gap: var(--m-gap-s);
    color: var(--sig);
    font-size: var(--m-body-lg);
    font-weight: 650;
  }
  #view .cv .cv-ov > .cv-ov-outcome + .cv-ov-waiting > h2::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: var(--sig);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* the two meta lines of the call, each behind its own glyph and neither in a pill, as the comp draws them */
  #view .cv .cv-ov-wait .cv-ov-next,
  #view .cv .cv-ov-wait .cv-ov-by {
    display: flex;
    align-items: center;
    gap: var(--m-gap-s);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: var(--m-body);
  }
  #view .cv .cv-ov-wait .cv-ov-next::before,
  #view .cv .cv-ov-wait .cv-ov-by::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--ink-2);
  }
  #view .cv .cv-ov-wait .cv-ov-next::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #view .cv .cv-ov-wait .cv-ov-by::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* ZOOMED OUT MORE, his words, on the move's page and on the open pattern card. */
  /* MOVED 26 Oct 2026: the same block carried 14.5 / 15.5 / 13.5 / 13px type, between the owner's sizes. It is on the scale
     now: 14 for the card's reading, 15 for its names, 12 for its counts, 18 and 20 for its headings. */
  #view .cv .cv-ov .cv-ov-area-title { gap: var(--m-gap-s); padding-bottom: var(--m-gap-s); font-size: var(--m-h4); }
  #view .cv .cv-ov-area-glyph > svg { width: 18px; height: 18px; }
  #view .cv .cv-ov-area-body { gap: var(--m-gap-s); padding: var(--m-pad); }
  #view .cv .cv-ov-explain { font-size: var(--m-body); line-height: 1.45; }
  #view .cv .cv-ov-why > .cv-why-head { font-size: var(--m-body-lg); }
  #view .cv .cv-ov-why .cv-why-box { padding: var(--m-pad-s); }
  #view .cv .cv-ov-review > h2 { font-size: var(--m-h3); }
  #view .cv .cv-ov-recurs-icon > svg { width: 18px; height: 18px; }
  #view .cv .cv-ov-pattern-name > b { font-size: var(--m-body-lg); }
  /* The card's head is the move's NAME and its count, and nothing else: the move sentence that used to sit under the
     name is off the card (owner, 26 Oct 2026, "it shltndt ever be shown"), so there is no subtitle to size here. */
  #view .cv .cv-ov-pattern-count { font-size: var(--m-cap); }
  #view .cv .cv-ov-pattern-body { gap: var(--m-gap-s); padding: var(--m-pad-s) var(--m-gap) var(--m-gap); font-size: var(--m-body); }
  #view .cv .cv-ov-pattern-body p { font-size: var(--m-body); line-height: 1.45; }
  #view .cv .cv-ov-try { padding: var(--m-pad-s) var(--m-gap); font-size: var(--m-body); }

  /* ======================================================================================================================
     LIVE HELP ON A PHONE (owner's comp of 26 Oct 2026, and his words with it). The comp draws the recording screen with
     Live help open: the app header, the back arrow with the title, its pencil and the date, the step rail, the three
     tabs, the card, and the recording bar. His asks, in order:
       "Lke it should lower the font size honestly and zoom out and keep this layout at the top and bottom"
       "when i said show all i mean show all of the current live help card its on"
       "look u can scroll, obv not forcibly squeeze ukwim, but the thing is we shld have big headers or footers during
        live help where we shld see everything more"
     So the card is not squeezed into one screen: the type comes down a step and the FURNITURE gives up its room, which
     is where the slack was. Measured on the seeded demo at 390x844 with a full worry card (a Say, its If-they-say
     column, the Numbers drawer, the latest sales and the foot tip: 1,038 px of card): before any of this, 339 px of
     chrome above the card and a 132 px bar below it left 373 px showing, under a third. What is taken back here:
       1. the second "Plinth" wordmark. The shell header already draws one directly above it, and the Conversations LIST
          screen has never drawn a second (`.cv:not(.cv-flow)` hides it), so the open conversation drew the only
          duplicate on the phone. The owner's standing rule is that the phone header does not change between pages.
       2. the heading block. The back arrow, title and the pencil share one row, as the comp draws them, with the date
          under the title, instead of an actions row above a title row.
       3. Rules & law and the minutes allowance, for the length of the recording only. The comp draws neither: the row
          beside the title holds the pencil and nothing else. They cost 113 px of the title's own row, which is what
          made the title wrap to two lines and overflow its row. Both ride every other Conversations header, including
          this one the moment the recording stops, so nothing is lost; they are one tap away behind the back arrow.
       4. the step rail and the tab row, a step shorter each, and the page's own bottom padding under the bar.
     The panel the card scrolls in is NOT sized by a magic number. The screen is one flex column from `#view` down to
     the panel, so the panel takes whatever the furniture above and below it leaves, at any phone height, any text
     size and with or without a browser address bar (100dvh counts it). An earlier draft of this block subtracted a
     measured 390 px instead, which is right on one phone and wrong on the next.
     The recording bar is the one piece he watches while he talks, so it is only tightened into the comp's own two rows
     (the time beside "Recording", the mic note at the right, then Pause, Finish and Download abreast), never shrunk
     below the 44 px touch floor. Everything here is led by `#view` inside this file's phone media query and gated on
     `:has(.cv-recorder.is-recording)`, so the desktop rendering of this screen, and the phone's own rendering of
     every other screen, are untouched. */
  #view .cv-flow .cv-mobile-brand { display: none; }
  /* One flex column, so the panel is sized by what is left rather than by a number. The page's own bottom gutter is
     NOT touched: `html #view` in plinth-mobile.css sets the phone gutter with !important, product-wide, and it is the
     same 16px under every zone. The column is sized inside it (box-sizing: border-box), so the recording bar ends on
     that gutter and the whole screen still fits without the page scrolling. What IS taken back is `.cv`'s own 24px
     bottom padding, which only pushed the bar up off the gutter. */
  #view:has(.cv-recorder.is-recording) { box-sizing: border-box; display: flex; flex-direction: column; height: 100dvh; }
  #view .cv-flow:has(.cv-recorder.is-recording) { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: 0; }
  #view .cv-flow:has(.cv-recorder.is-recording) > .cv-journal-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-stage-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #view .cv-flow .cv-recorder.is-recording { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: 0; }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-heading {
    /* The title takes the row and the pencil sits at its end. A max-content title column would hug the pencil as the
       comp's short title does, but it overflows and clips the moment the title is longer than the row. */
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 0 var(--m-gap-s);
    padding-bottom: var(--m-gap-s);
  }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-heading-copy { display: contents; }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-heading-copy > .cv-back { grid-column: 1; grid-row: 1; }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-heading-copy > h1 { grid-column: 2; grid-row: 1; font-size: var(--m-h4); letter-spacing: -0.01em; }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-heading-copy > .cv-detail-subtitle { grid-column: 2; grid-row: 2; margin-top: 0; font-size: var(--m-cap); }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-heading-actions { grid-column: 3; grid-row: 1 / span 2; padding: 0; gap: 0; }
  /* Rules & law and the allowance stand down for the length of the recording (point 3 above): the comp's row beside the
     title holds the pencil alone, and their 113 px is what made the title wrap. Both come back when recording stops. */
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-heading-actions > [data-cv-action="rules"],
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-heading-actions > .cv-usage-menu { display: none; }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-workflow { margin: 0 0 var(--m-gap-s); }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-workflow .cv-stage,
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-workflow .cv-stage > span { font-size: var(--m-cap); }
  #view .cv-flow:has(.cv-recorder.is-recording) .cv-workflow .cv-stage .cv-stage-number { width: 20px; height: 20px; }
  #view .cv-flow .cv-recorder.is-recording > .cv-panel-tabs { flex: none; }
  #view .cv-flow .cv-recorder.is-recording > .cv-panel-tabs > button { min-height: var(--m-tap); padding: var(--m-gap) 6px; font-size: var(--m-body); }
  #view .cv-flow .cv-recorder.is-recording > .cv-panel-tabs > button span { font-size: var(--m-body); }

  /* The panel the card scrolls in: the last flexible row of the column above, so it ends where the recording bar
     begins and nothing else on the screen has to be guessed at. My notes, when that tab is the open one, fills the
     same room. The shared sheet's own max-height is a figure for the desktop sheet and is cleared here. */
  #view .cv-flow .cv-recorder.is-recording > .cv-live-status { flex: 1; min-height: 0; max-height: none; }
  /* On the My notes tab both panels inside the status slot carry `hidden`, so the slot takes no room and the notes
     take the whole panel instead of sitting under an empty one. */
  #view .cv-flow .cv-recorder.is-recording > .cv-live-status:not(:has(> :not([hidden]))) { flex: none; }
  #view .cv-flow .cv-recorder.is-recording > .cv-capture-notes:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: 8px; }
  #view .cv-flow .cv-recorder.is-recording > .cv-capture-notes > label { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #view .cv-flow .cv-recorder.is-recording > .cv-capture-notes textarea { flex: 1; min-height: 0; }
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar { flex: none; }

  /* The card itself, one step down in type (his "lower the font size honestly and zoom out"). Every size is written
     out rather than inherited, so a phone text-size change scales each one once. */
  /* MOVED 26 Oct 2026 (the scale ruling): the card carried 11, 11.5, 12.5, 13, 13.5 and 16.5px type, between the owner's
     sizes. The words the agent says aloud and the headings stay readable at a glance (14, 15), everything that sits
     around them takes the caption size (12), nothing is under 12. */
  #view .cv-flow .cv-live-question.is-newest { padding: var(--m-gap) var(--m-gap); gap: var(--m-gap-s); }
  #view .cv-flow .cv-live-question.is-newest .cv-live-title { font-size: var(--m-body-lg); }
  #view .cv-flow .cv-live-title { font-size: var(--m-body); }
  #view .cv-flow .cv-live-pill { padding: 2px var(--m-gap-s); font-size: var(--m-cap); }
  #view .cv-flow .cv-live-said { padding: 2px var(--m-gap-s); font-size: var(--m-cap); }
  #view .cv-flow .cv-live-gist { font-size: var(--m-cap); line-height: 1.4; }
  #view .cv-flow .cv-live-say { margin-top: var(--m-gap-s); padding: var(--m-pad-s) var(--m-gap); }
  #view .cv-flow .cv-live-say h4 { font-size: var(--m-cap); }
  #view .cv-flow .cv-live-say > p { font-size: var(--m-body); line-height: 1.45; }
  #view .cv-flow .cv-live-question.is-expanded .cv-live-say > p { font-size: var(--m-body); }
  #view .cv-flow .cv-live-notes { margin-top: var(--m-gap-s); font-size: var(--m-cap); }
  #view .cv-flow .cv-live-cols { margin-top: var(--m-gap); gap: var(--m-gap); }
  #view .cv-flow .cv-live-col { gap: var(--m-gap); }
  #view .cv-flow .cv-live-ifs > h4 { margin-bottom: var(--m-gap-s); font-size: var(--m-body); }
  #view .cv-flow .cv-live-ifs ul { gap: var(--m-gap-s); }
  #view .cv-flow .cv-live-ifs li { font-size: var(--m-cap); line-height: 1.4; }
  #view .cv-flow .cv-live-data > summary,
  #view .cv-flow .cv-live-latest > summary,
  #view .cv-flow .cv-live-latest h4 { font-size: var(--m-body); }
  #view .cv-flow .cv-live-facts-list dt { font-size: var(--m-cap); }
  #view .cv-flow .cv-live-facts-list dd { font-size: var(--m-cap); }
  #view .cv-flow .cv-live-timed { font-size: var(--m-cap); }
  #view .cv-flow .cv-live-details { font-size: var(--m-cap); }
  #view .cv-flow .cv-live-latest { margin-top: var(--m-gap); padding-top: var(--m-pad-s); }
  #view .cv-flow .cv-live-oneline { font-size: var(--m-cap); }

  /* The recording bar, as the comp draws it: the dot, "Recording" and the running time on one row with the mic note at
     its right, then Pause, Finish recording and Download recording abreast under a hairline. `.cv-actions` becomes a
     pass-through so the time can sit on the first row and the three buttons share the second. */
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    /* 8px of side padding, not the card's 12px: it is what lets the three labels sit on one line at 390px. */
    padding: 8px 8px 10px;
  }
  /* A zero-height break, so the three actions always start their own row however many of them the recorder is
     offering (Pause and Finish at the start of a call, Resume, Retry or Download later). */
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar:not(:empty)::before { content: ""; order: 4; flex: 1 0 100%; height: 0; }
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-rec-state { order: 1; flex: 0 0 auto; }
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-audio-quality { order: 3; flex: 1 1 0; min-width: 0; justify-content: flex-end; font-size: var(--m-cap); line-height: 1.3; text-align: right; }
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-alert { order: 6; flex: 1 0 100%; }
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-actions { display: contents; }
  /* The running time sits on "Recording"'s own line, as the comp draws it. The shared sheet gives it a 44px box, which
     is a tap target it does not need (it is a <time>, not a control) and which was both lifting the figure off that
     line and making the whole first row 44px tall. */
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar .cv-rec-time { order: 2; flex: 0 0 auto; width: auto; min-width: 0; max-width: none; min-height: 0; height: auto; font-size: var(--m-body); line-height: 1.4; }
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-actions > button,
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-actions > a {
    order: 5;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: auto;
    min-width: max-content;
    min-height: var(--m-tap);
    margin: 0;
    padding: var(--m-gap-xs) 1px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-size: var(--m-cap);
    font-weight: 500;
    /* MOVED 26 Oct 2026 (owner: "dont do where 2 simple words form 2 sentences one up one down"). "Download recording" is
       the longest of the three labels and, in an equal third of a 360px row, used to take a second line. Each button now
       keeps the width of its own words and shares what is left, so all three are one line at 360; at a width where they
       would not fit, the last one drops to the next row whole (the bar wraps by whole buttons), never inside its label. */
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
  }
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-actions > button + button,
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-actions > a { border-left: 1px solid var(--line-2, var(--line)); }
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-actions > .cv-primary { color: var(--sig); font-weight: 650; }
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-actions > button > svg,
  #view .cv-flow .cv-recorder.is-recording > .cv-recorder-bar > .cv-actions > a > svg { width: 20px; height: 20px; }

  /* ======================================================================================================================
     DIALOGS AND THE RULES & LAW DRAWER, on the phone scale (owner ruling, 26 Oct 2026). The confirm dialog was a 22px
     padded card with a 16px heading, and the drawer a 22px title over 13px and 11px lines with 18px source links that no
     thumb could hit. Both come onto the scale: a dialog is a card (14 padding, 12 radius) with an 18px heading and 14px
     words, a drawer's title is a section heading (20), its lines are 12 and 14, and every row and link in it is a
     target of 40 or more.
     ====================================================================================================================== */
  html body .cv-confirm-dialog { padding: var(--m-pad); border-radius: var(--m-radius); }
  html body .cv-confirm-dialog > h2 { font-size: var(--m-h4); line-height: 1.25; }
  html body .cv-confirm-dialog > p { margin-top: var(--m-gap-s); font-size: var(--m-body); }
  html body .cv-confirm-dialog > .cv-confirm-note { margin: var(--m-gap-s) 0 0; font-size: var(--m-cap); }
  html body .cv-confirm-dialog > .cv-actions { margin-top: var(--m-gap-l); gap: var(--m-gap-s); }
  html body .cv-confirm-dialog > .cv-actions > button { min-height: var(--m-tap); padding-block: var(--m-gap); font-size: var(--m-body); }

  html body .cv .cv-rules-drawer > header h2 { font-size: var(--m-h3); letter-spacing: -0.01em; }
  html body .cv .cv-rules-drawer > header p { margin-top: var(--m-gap-xs); font-size: var(--m-cap); }
  html body .cv .cv-rules-controls { gap: var(--m-gap-s); margin-top: var(--m-gap); }
  html body .cv .cv-rules-controls :is(input, select) { min-height: var(--m-control); font-size: var(--m-input); }
  html body .cv .cv-rules-checked { margin: var(--m-gap-s) 0 var(--m-gap); font-size: var(--m-cap); }
  html body .cv .cv-rule > summary { min-height: var(--m-tap); padding: var(--m-pad-s) 0; font-size: var(--m-body); }
  html body .cv .cv-rule > summary b { font-size: var(--m-body); }
  html body .cv .cv-rule > summary small { font-size: var(--m-cap); }
  html body .cv .cv-rule-body { font-size: var(--m-body); }
  html body .cv .cv-rule-body p,
  html body .cv .cv-rule-body li { font-size: var(--m-body); line-height: 1.45; }
  html body .cv .cv-rule-footnote p { font-size: var(--m-cap); }
  html body .cv .cv-rule-links { display: flex; flex-wrap: wrap; gap: 0 var(--m-gap); }
  /* a source link is a target: its words are 12px, the box around them is not */
  html body .cv .cv-rule-links a,
  html body .cv .cv-rule-references a { display: inline-flex; align-items: center; gap: 4px; min-height: var(--m-control); padding-block: var(--m-pad-s); font-size: var(--m-cap); }
  html body .cv .cv-rules-empty p { font-size: var(--m-body); }

  /* ======================================================================================================================
     THE SIZES THAT WERE BETWEEN THE OWNER'S (26 Oct 2026). Rules in the shared sheets that set 13px or 16px on a phone
     and that nothing above reaches: meta lines are 12, a row you press is 14, a fieldset's question is 18. One block, so the
     next person looking for a stray size finds the list of what was moved and to what.
     ====================================================================================================================== */
  html body #view .cv .cv-recording-meta,
  html body #view .cv .cv-saved-next p,
  html body #view .cv .cv-grade-row-at,
  html body #view .cv .cv-call-field .cv-help,
  html body #view .cv .cv-loading { font-size: var(--m-cap); }
  /* Live help's own small print (the Numbers drawer's table, counts, price moves, the recording state) was 11, 12.5 and
     13px; it is the caption size, and the inline "Surface objections" link stays on one line. */
  html body #view .cv .cv-live-sales,
  html body #view .cv .cv-live-sales th,
  html body #view .cv .cv-live-sales td,
  html body #view .cv .cv-live-count,
  html body #view .cv .cv-live-fact-sub,
  html body #view .cv .cv-live-move,
  html body #view .cv .cv-live-move b,
  html body #view .cv .cv-live-facts-list dd,
  html body #view .cv .cv-rec-state > b { font-size: var(--m-cap); letter-spacing: 0; }
  /* The Numbers drawer's table is five columns in a 276px card: its cells wrap inside their columns (a month over its year,
     a price over its psf) instead of holding one line each and running 55px out of the card and off a 360px screen. */
  html body #view .cv .cv-live-sales th,
  html body #view .cv .cv-live-sales tbody td { padding: var(--m-gap-xs); white-space: normal; overflow-wrap: anywhere; }
  /* the one link under a Score item ("View feedback", "Open transcript") fills its row instead of sitting at 45% of it */
  html body #view .cv .cv-grade-item-link > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-block: var(--m-pad-s); }
  html body #view .cv .cv-grade-tag-label,
  html body #view .cv .cv-grade-tag-topic,
  html body #view .cv .cv-grade-verb { font-size: var(--m-cap); }
  html body #view .cv .cv-grade-part-label,
  html body #view .cv .cv-grade-item-title { font-size: var(--m-body-lg); }
  html body #view .cv .cv-fold > summary,
  html body #view .cv .cv-more-quotes > summary { font-size: var(--m-body); }
  /* a text button of two or three words is 40 tall by its padding, so its words are one line tall to anything that measures them */
  html body #view .cv .cv-source > .cv-text-button,
  html body #view .cv .cv-ov .cv-ov-related { min-height: var(--m-control); padding-block: var(--m-pad-s); font-size: var(--m-body); }
  html body #view .cv .cv-intelligence-fold > summary { min-height: var(--m-tap); padding: var(--m-pad-s) var(--m-pad); font-size: var(--m-body); }
  html body #view .cv .cv-call-field legend { margin-bottom: var(--m-gap-s); font-size: var(--m-h4); }
  /* A source (a recorded sale, a listing's saved fact): 12px small print under a 14px line, tight, so the eighteen sales of
     a busy property take a third of the screens they took. */
  html body #view .cv .cv-intelligence-row { padding: var(--m-gap) 0; }
  html body #view .cv .cv-source { padding: var(--m-pad-s) var(--m-gap); border-radius: var(--m-gap-s); font-size: var(--m-cap); line-height: 1.35; }
  html body #view .cv .cv-source > p { margin: 2px 0 0; font-size: var(--m-body); }
  html body #view .cv .cv-source > small { margin: 2px 0 0; font-size: var(--m-cap); }

  /* A row of action buttons (Download saved audio parts, New conversation; Copy, Download; Cancel, Delete) is a flex row
     that wraps by whole buttons. It was two equal columns at 414px and under, so a label of three or four words broke in
     half inside its column, and a lone button sat at half width beside nothing (owner: "dont do where 2 simple words form
     2 sentences one up one down", and a row holding one lonely control is to be repositioned). A button keeps the width
     of its own words, up to the full row; one that does not fit drops to the next line whole; a lone one fills the row. */
  html body #view .cv .cv-actions { display: flex; flex-wrap: wrap; gap: var(--m-gap-s); }
  html body #view .cv .cv-actions > button,
  html body #view .cv .cv-actions > a { flex: 1 1 auto; width: auto; min-width: min(100%, max-content); min-height: var(--m-tap); padding-block: var(--m-pad-s); font-size: var(--m-body); }
}