/* Desktop redesign, 22 Oct 2026, revised the same day by the owner's second set of comps (10, 11 and 12).
   Every rule in this file sits inside the desktop media query below. Owner comps: scratch-tmp/desktop-2026-10-22/.
   Phone and tablet keep what they have. */
@media (min-width:768px){

/* Icons drawn once as masks, so they take the text colour of whatever theme is on. */
#view .cv {
  --cvd-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M8.5 5.5v13l10.5-6.5z'/%3E%3C/svg%3E");
  --cvd-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 4 5 5M4 20l4-1L20 7a2 2 0 0 0-4-4L4 15Z'/%3E%3C/svg%3E");
  --cvd-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11a8 8 0 0 1-8 8H5l-3 3V11a8 8 0 0 1 8-8h3a8 8 0 0 1 8 8Z'/%3E%3Cpath d='M7 9h9M7 13h6'/%3E%3C/svg%3E");
  --cvd-edge: var(--card-edge, var(--line-2, var(--line)));
  --cvd-pill: color-mix(in srgb, var(--ink) 8%, transparent);
  --cvd-tile: color-mix(in srgb, var(--sig) 11%, var(--cv-card));
}

/* ---------- Conversation detail: header (comp 11) ---------- */
/* Details and Rules and law are buttons with their words, each with its icon; the minutes left is a quieter pill. */
#view .cv-flow .cv-heading-actions { gap: 12px; }
#view .cv-flow .cv-heading-actions > .cv-rules-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; min-width: 0; padding: 0 20px;
  border: 1px solid var(--cvd-edge); border-radius: 10px; background: var(--cv-card); color: var(--ink); font-size: 15px; font-weight: 450;
}
#view .cv-flow .cv-heading-actions > .cv-rules-button:hover { border-color: var(--sig); color: var(--sig); }
#view .cv-flow .cv-heading-actions > .cv-rules-button > svg { flex: none; width: 20px; height: 20px; }
#view .cv-flow .cv-heading-actions > .cv-rules-button > .cv-rules-label { display: inline; }
#view .cv-flow .cv-usage-menu > summary {
  min-height: 46px; padding: 0 22px; border: 1px solid var(--cvd-edge); border-radius: 10px; background: var(--card-2, var(--cv-card));
  color: var(--ink-2); font-size: 15px; gap: 12px;
}
#view .cv-flow .cv-usage-menu > summary svg { width: 20px; height: 20px; color: var(--ink); }

/* ---------- Conversation detail: the tab bar is a card of its own, the four cards sit below it ---------- */
#view .cv-flow .cv-workspace-card[data-cv-panel="review"] { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
#view .cv-flow .cv-workspace-card[data-cv-panel="review"] > .cv-workspace-header {
  align-items: stretch; margin: 0 0 18px; padding: 8px 26px 0; border: 1px solid var(--cvd-edge); border-radius: 12px; background: var(--cv-card);
}
#view .cv-flow .cv-workspace-header > div { display: flex; align-items: center; padding-bottom: 8px; }
/* Edit notes: the pencil beside its words, no box. On a desktop it opens the Conversation notes screen. */
#view .cv-flow .cv-workspace-header [data-cv-door] {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; border: 0; background: transparent;
  color: var(--ink); font-size: 15px; font-weight: 450; cursor: pointer;
}
#view .cv-flow .cv-workspace-header [data-cv-door] > svg { display: none; }
#view .cv-flow .cv-workspace-header [data-cv-door]::before {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--cvd-pencil) center / contain no-repeat; mask: var(--cvd-pencil) center / contain no-repeat;
}
#view .cv-flow .cv-workspace-header [data-cv-door]:hover:not(:disabled) { color: var(--sig); }
#view .cv-flow .cv-workspace-header [data-cv-door]:disabled { opacity: .5; cursor: default; }
/* The transcript has no cards of its own, so it keeps a white one. */
#view .cv-flow .cv-workspace-card[data-cv-panel="review"] > div[data-cv-review-panel="transcript"]:not([hidden]) {
  padding: 0 26px 10px; border: 1px solid var(--cvd-edge); border-radius: 12px; background: var(--cv-card);
}

/* ---------- Summary: client said and you promised side by side, still to answer and answered full width ---------- */
#view .cv-flow .cv-workspace-card .cv-summary {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin: 0; padding: 0; border: 0; background: transparent;
}
#view .cv-flow .cv-summary > :not(.cv-summary-group) { grid-column: 1 / -1; margin: 0; }
#view .cv-flow .cv-summary > .cv-sr { grid-column: auto; }
/* The recording player and notices lead; the Approve button is placed by the answered card (or on its own row). */
#view .cv-flow .cv-summary > :not(.cv-summary-group):not(.cv-review) { order: -1; }
#view .cv-flow .cv-summary > .cv-sg-open,
#view .cv-flow .cv-summary > .cv-sg-answered { grid-column: 1 / -1; }
/* "Client said" and "You promised" share a row. When only one of them has anything, it takes the whole row instead of
   leaving half the page empty (owner's screenshot, 25 Oct 2026). */
#view .cv-flow .cv-summary:not(:has(> .cv-sg-promised)) > .cv-sg-said,
#view .cv-flow .cv-summary:not(:has(> .cv-sg-said)) > .cv-sg-promised { grid-column: 1 / -1; }
#view .cv-flow .cv-summary > .cv-review-player { max-width: 560px; }
/* Owner, 25 Oct 2026, with a screenshot of how it is meant to look: the cards first, the recording player below them
   ("that voicebox can be below"), then Approve or Continue on its own row at the right, never inside a card. */
#view .cv-flow .cv-summary > .cv-review-player { order: 1; }
#view .cv-flow .cv-summary > .cv-review { order: 2; }
#view .cv-flow .cv-summary > .cv-summary-group {
  display: block; min-width: 0; margin: 0; padding: 22px 24px 24px; border: 1px solid var(--cvd-edge); border-radius: 12px; background: var(--cv-card);
}
#view .cv-flow .cv-summary > .cv-summary-group > h3 {
  display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding: 0; font-size: 20px; font-weight: 550; letter-spacing: -.01em; color: var(--ink);
}
#view .cv-flow .cv-summary > .cv-summary-group > h3 > svg {
  flex: none; box-sizing: border-box; width: 48px; height: 48px; padding: 13px; border-radius: 10px; background: var(--cvd-tile); color: var(--sig);
}
#view .cv-flow .cv-summary > .cv-summary-group > ul {
  display: block; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-2, var(--line)); border-radius: 10px; background: var(--cv-card);
}
#view .cv-flow .cv-summary > .cv-summary-group > ul + ul { margin-top: 12px; }
/* The LIST owns the two columns and every row is a subgrid of it, so the time column belongs to the card, not to the
   row that happens to be widest. Sized per row, as it was, a row with a wider time (or with several of them) made its
   own column and pulled its time off the line the other rows sit on (owner's screenshot, 26 Oct 2026). */
#view .cv-flow .cv-summary > .cv-summary-group > ul:not(.cv-questions) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; }
#view .cv-flow .cv-summary > .cv-summary-group > ul:not(.cv-questions) > li { grid-column: 1 / -1; grid-template-columns: subgrid; }

/* A row: the play circle in the left margin, the words, then the time chip. */
#view .cv-flow .cv-summary-group li {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; row-gap: 3px; align-items: center; min-width: 0;
  margin: 0; padding: 20px 20px 20px 80px; border: 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--ink); list-style: none;
}
#view .cv-flow .cv-summary-group li + li { margin: 0; }
#view .cv-flow .cv-summary-group li:first-child { border-top: 0; }
#view .cv-flow .cv-summary-group li::before { content: none; display: none; }
#view .cv-flow .cv-summary-group .cv-summary-evidence,
#view .cv-flow .cv-summary-group .cv-question-meta .cv-summary-evidence { display: contents; margin: 0; }
#view .cv-flow .cv-summary-group .cv-summary-due { grid-column: 1; grid-row: 2; display: block; margin: 0; font-size: 14.5px; font-weight: 400; color: var(--sig); }
#view .cv-flow .cv-summary-group li > .cv-summary-evidence > .cv-summary-quote {
  grid-column: 1; grid-row: 3; display: block; margin: 4px 0 0; padding: 0; border: 0; font-size: 14.5px; font-style: normal; font-weight: 400; line-height: 1.5; color: var(--ink-2);
}
/* Every time pill sits in column 2, and none of them is pinned to row 1. A line the client said more than once links
   each occurrence, which is the point of the link (pinned by "review groups grounded client words and agent promises
   with exact transcript evidence"), and all of those pills used to be placed in the one cell, so they printed on top
   of each other as an unreadable smudge. Left to place themselves they stack DOWN the column instead, one per row:
   "do up and down, so the timestamps stay in the same vertical line" (owner, 26 Oct 2026). */
#view .cv-flow .cv-summary-group li > .cv-summary-evidence > .cv-summary-source { grid-column: 2; justify-self: end; }
#view .cv-flow .cv-sg-promised li > .cv-summary-evidence > .cv-summary-source { grid-row: 1 / span 3; align-self: start; }
/* A row that links several occurrences: the play circle rides the first time at the top of the row, and the times
   under it are times alone, so two circles never print in the same place either. `align-items: start` is what makes
   the circle's offset exact: the first pill's top is then the row's top whatever the words below it do. */
#view .cv-flow .cv-summary-group li:has(> .cv-summary-evidence + .cv-summary-evidence) { align-items: start; row-gap: 6px; }
#view .cv-flow .cv-summary-group li:has(> .cv-summary-evidence + .cv-summary-evidence) .cv-summary-source::before { top: 12px; margin-top: 0; }
#view .cv-flow .cv-summary-group li:has(> .cv-summary-evidence + .cv-summary-evidence) .cv-summary-source::after { top: 25.5px; margin-top: 0; }
#view .cv-flow .cv-summary-group li > .cv-summary-evidence + .cv-summary-evidence > .cv-summary-source::before,
#view .cv-flow .cv-summary-group li > .cv-summary-evidence + .cv-summary-evidence > .cv-summary-source::after { content: none; }

/* The time chip, and the play circle that rides in the row's margin as part of the same button. */
#view .cv-flow .cv-summary-source {
  display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; padding: 6px 13px; border: 0; border-radius: 8px;
  background: var(--cvd-pill); color: var(--ink); font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.3;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
#view .cv-flow .cv-summary-source > span { font-size: inherit; font-weight: inherit; }
#view .cv-flow .cv-summary-source:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
#view .cv-flow .cv-summary-group li .cv-summary-source::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: var(--cvd-pill);
}
#view .cv-flow .cv-summary-group li .cv-summary-source::after {
  content: ""; position: absolute; left: 34px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; background: var(--ink);
  -webkit-mask: var(--cvd-play) center / contain no-repeat; mask: var(--cvd-play) center / contain no-repeat;
}
#view .cv-flow .cv-sg-promised li .cv-summary-source::before { top: 15px; margin-top: 0; }
#view .cv-flow .cv-sg-promised li .cv-summary-source::after { top: 28.5px; margin-top: 0; }
#view .cv-flow .cv-summary-group li .cv-summary-source:hover::before { background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* Still to answer: the question, its time, then its action as a button with its words.
   The action column is a FIXED width, not `auto`. Sized to content it changed with what the row happened to carry, so
   a row with a second button, or one already reading the shorter "In follow-ups", squeezed the question column and
   dragged its time out of the column the other rows line up in (owner's screenshot, 26 Oct 2026: "do up and down, so
   the timestamps stay in the same vertical line"). Fixed here, the times sit on one vertical line whatever the row
   holds, and the actions stack down inside their column rather than widening it. */
#view .cv-flow .cv-summary-group .cv-questions > li.cv-question { grid-template-columns: minmax(0, 1fr) clamp(96px, 24%, 320px) 172px; column-gap: 18px; }
#view .cv-flow .cv-summary-group .cv-question > .cv-question-actions { flex-direction: column; align-items: stretch; gap: 6px; }
#view .cv-flow .cv-summary-group .cv-question > .cv-question-actions > * { width: 100%; justify-content: center; text-align: center; }
#view .cv-flow .cv-summary-group .cv-question > b.cv-question-text { grid-column: 1; grid-row: 1; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.45; }
#view .cv-flow .cv-summary-group .cv-question > .cv-question-meta { grid-column: 2; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
#view .cv-flow .cv-summary-group .cv-question > .cv-question-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; }
#view .cv-flow .cv-summary-group .cv-question > .cv-live-gap,
#view .cv-flow .cv-summary-group .cv-question > .cv-answer-points { grid-column: 1 / -1; grid-row: 2; margin: 6px 0 0; color: var(--ink-2); }
#view .cv-flow .cv-summary-group [data-cv-action="question-task"] {
  display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 0 20px; border: 1px solid var(--cvd-edge); border-radius: 8px;
  background: var(--cv-card); color: var(--ink); font-size: 15px; font-weight: 450; text-decoration: none; cursor: pointer;
}
#view .cv-flow .cv-summary-group [data-cv-action="question-task"]:hover:not(:disabled) { border-color: var(--sig); color: var(--sig); }
#view .cv-flow .cv-summary-group [data-cv-action="question-task"]:disabled { opacity: .5; cursor: default; }

/* Answered: the question in bold, the answer, then where it was said. Approve sits on its own row below the cards. */
#view .cv-flow .cv-sg-answered .cv-questions > li.cv-question { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
#view .cv-flow .cv-sg-answered .cv-question > b.cv-question-text { grid-row: 1; font-weight: 600; }
#view .cv-flow .cv-sg-answered .cv-question > .cv-question-answer,
#view .cv-flow .cv-sg-answered .cv-question > .cv-answer-points { grid-column: 1; grid-row: 2; margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
#view .cv-flow .cv-sg-answered .cv-question > .cv-question-meta { grid-column: 1; grid-row: 3; margin-top: 4px; font-size: 14px; color: var(--ink-2); }
/* An answer with a headline above it is two lines, not one: the headline keeps row 2 and the answer and its source
   step down a row each, so the two never print on top of each other (owner's screenshot, 25 Oct 2026). */
#view .cv-flow .cv-sg-answered .cv-question > .cv-answer-headline ~ .cv-question-answer,
#view .cv-flow .cv-sg-answered .cv-question > .cv-answer-headline ~ .cv-answer-points { grid-row: 3; font-weight: 400; }
#view .cv-flow .cv-sg-answered .cv-question:has(> .cv-answer-headline) > .cv-question-meta { grid-row: 4; }
#view .cv-flow .cv-sg-answered .cv-question-meta .cv-dot,
#view .cv-flow .cv-sg-answered .cv-question-meta .cv-question-source { display: inline; font-size: 14px; color: var(--ink-2); }
#view .cv-flow .cv-summary > .cv-review {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 0; padding: 0; border: 0;
}
#view .cv-flow .cv-summary > .cv-review .cv-primary { min-height: 44px; padding: 0 22px; border-radius: 8px; font-size: 15px; font-weight: 500; }

/* ---------- Conversation notes (comp 10): two columns, then a bar of its own for Approve ---------- */
#view .cv[data-cv-notes] .cv-journal-content { padding-top: 0; }
/* The way back (owner, 22 Oct 2026: "add a visible one"): the detail's own quiet "Conversations" link, arrow at its left, at the
   top left above the cards. It takes the strip the cards' top gap was, so the screen still reads as the comp. */
.cv[data-cv-notes] > .cv-back { margin: 0; min-height: 28px; }
/* The screen fills the window: the two cards stretch and the Approve bar rests at the bottom, as drawn. */
.cv .cv-notes { display: flex; flex-direction: column; gap: 18px; min-height: calc(100vh - 97px); margin-top: 10px; }
.cv .cv-notes > * { margin: 0; }
.cv .cv-notes > .cv-ncols { flex: 1 1 auto; }
.cv .cv-ncols { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.cv .cv-ncols.is-single { grid-template-columns: minmax(0, 1fr); }
.cv .cv-ncard { min-width: 0; padding: 28px 30px 32px; border: 1px solid var(--cvd-edge); border-radius: 12px; background: var(--cv-card); }
.cv .cv-nsec + .cv-nsec { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.cv .cv-nhead { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; }
.cv .cv-ntile { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--cvd-tile); color: var(--sig); }
.cv .cv-ntile > svg { width: 28px; height: 28px; }
.cv .cv-nhead > div { min-width: 0; }
.cv .cv-nhead h2 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.cv .cv-nhead p { margin: 5px 0 0; font-size: 16px; line-height: 1.3; color: var(--ink-2); }
.cv .cv-nlist { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cv .cv-nrow, .cv .cv-nq { min-width: 0; padding: 22px 24px; border: 1px solid var(--line-2, var(--line)); border-radius: 10px; background: var(--cv-card); }

/* You promised: the circle to tick, the title and its time, the due date, the sentence she said. */
.cv .cv-nrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 18px; row-gap: 12px; align-items: start; }
#view .cv .cv-ncheck {
  grid-column: 1; grid-row: 1; display: inline-grid; place-items: center; width: 30px; height: 30px; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 1.6px solid var(--ink-2); border-radius: 50%; background: transparent; color: transparent; cursor: pointer;
}
#view .cv .cv-ncheck:hover { border-color: var(--sig); }
#view .cv .cv-ncheck svg { width: 17px; height: 17px; stroke-width: 2.6; }
#view .cv .cv-ncheck[aria-checked="true"] { background: var(--sig); border-color: var(--sig); color: var(--on-sig); }
.cv .cv-ntitle { display: block; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.cv .cv-nrow > .cv-ntitle { grid-column: 2; grid-row: 1; padding-top: 2px; }
.cv .cv-nrow.is-done .cv-ntitle { text-decoration: line-through; color: var(--ink-2); }
.cv .cv-nrow > .cv-summary-source { grid-column: 3; grid-row: 1; }
.cv .cv-ndue { grid-column: 2 / -1; grid-row: 2; display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--sig); }
.cv .cv-ndue > svg { flex: none; width: 20px; height: 20px; }
.cv .cv-nquote { grid-column: 2 / -1; grid-row: 3; margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cv .cv-notes .cv-summary-source {
  display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; padding: 6px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--cvd-tile); color: var(--ink); font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.cv .cv-notes .cv-summary-source > span { font-size: inherit; font-weight: inherit; }
.cv .cv-notes .cv-summary-source:hover { border-color: var(--sig); }

/* Still to answer and Answered. */
.cv .cv-nq { display: grid; gap: 14px; }
.cv .cv-nmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.cv .cv-nmeta .cv-question-source { font-size: 15px; color: var(--ink-2); }
.cv .cv-nmeta .cv-dot { color: var(--ink-2); }
.cv .cv-nanswer { font-size: 17px; line-height: 1.5; color: var(--ink); }
.cv .cv-nanswer > * { margin: 0; }
.cv .cv-nanswer .cv-question-answer { font-size: 17px; color: var(--ink); }
.cv .cv-nadd { margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--line); }
#view .cv .cv-nadd-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 0 18px; border: 1px solid var(--cvd-edge); border-radius: 8px;
  background: var(--cv-card); color: var(--ink); font-size: 15px; font-weight: 450; text-decoration: none; cursor: pointer;
}
#view .cv .cv-nadd-btn:hover:not(:disabled) { border-color: var(--sig); color: var(--sig); }
#view .cv .cv-nadd-btn:disabled { opacity: .5; cursor: default; }
.cv .cv-nadded { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--sig); white-space: nowrap; }
.cv .cv-nadded svg { width: 16px; height: 16px; }
#view .cv .cv-nlink { min-width: 0; min-height: 0; padding: 2px 0; border: 0; background: none; color: var(--sig); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cv .cv-notes .cv-review-player { margin: 0; max-width: 560px; }
.cv .cv-nfooter { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 14px 16px; border: 1px solid var(--cvd-edge); border-radius: 12px; background: var(--cv-card); }
#view .cv .cv-nfooter .cv-primary { min-height: 50px; padding: 0 26px; border-radius: 8px; font-size: 16px; font-weight: 500; }

/* ---------- Property feedback (comp 12) ---------- */
/* The filters stand straight on the page (second comp, 14): the property and dates fields each hold their own icon, with Filters at the right. */
#view .cv[data-cv-view="feedback"] .cv-feedback-toolbar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; margin: 0 0 18px; padding: 0; border: 0; border-radius: 0; background: transparent;
}
#view .cv[data-cv-view="feedback"] .cv-feedback-property,
#view .cv[data-cv-view="feedback"] .cv-feedback-dates {
  display: flex; align-items: center; gap: 0; min-width: 0; padding: 0; border: 1px solid var(--cvd-edge); border-radius: 10px; background: var(--cv-card); overflow: hidden;
}
#view .cv[data-cv-view="feedback"] .cv-feedback-property { flex: 0 1 440px; }
#view .cv[data-cv-view="feedback"] .cv-feedback-dates { flex: 0 1 290px; }
#view .cv[data-cv-view="feedback"] .cv-feedback-property > svg,
#view .cv[data-cv-view="feedback"] .cv-feedback-dates > svg { flex: none; box-sizing: border-box; align-self: center; width: 22px; height: 22px; margin-left: 18px; padding: 0; border: 0; color: var(--ink); }
html body #view .cv[data-cv-view="feedback"] .cv-feedback-property > select,
html body #view .cv[data-cv-view="feedback"] .cv-feedback-dates > select { flex: 1; min-width: 0; min-height: 54px; padding: 0 16px 0 14px; border: 0; background-color: transparent !important; font-size: 16px; }
#view .cv[data-cv-view="feedback"] .cv-feedback-toolbar > button[data-cv-action="filters"] {
  display: inline-flex; align-items: center; gap: 12px; margin-left: auto; min-height: 56px; padding: 0 26px; border: 1px solid var(--cvd-edge); border-radius: 10px;
  background: var(--cv-card); color: var(--ink); font-size: 15px; font-weight: 500;
}

/* "N conversations excluded": a quiet band that folds, each conversation with its reason. */
#view .cv[data-cv-view="feedback"] .cv-excluded { margin: 0 0 18px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2, var(--cv-card)); }
#view .cv[data-cv-view="feedback"] .cv-excluded > summary { min-height: 0; padding: 20px 26px; font-size: 18px; font-weight: 600; color: var(--ink); }
#view .cv[data-cv-view="feedback"] .cv-excluded[open] > summary { margin: 0; padding-bottom: 16px; }
/* The journal draws every disclosure's chevron as a "›" with !important, so the band turns it: down when shut, up when open. */
#view .cv[data-cv-view="feedback"] .cv-excluded > summary::after { flex: none; margin: 0 0 0 auto; color: var(--ink); font-size: 30px; font-weight: 300; line-height: .7; transform: rotate(90deg) !important; }
#view .cv[data-cv-view="feedback"] .cv-excluded[open] > summary::after { transform: rotate(-90deg) !important; }
#view .cv[data-cv-view="feedback"] .cv-excluded > .cv-exclusion {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: start; gap: 3px; box-sizing: border-box; width: calc(100% - 40px); min-height: 0; margin: 0 20px 10px; padding: 16px 20px 16px 88px; border: 1px solid var(--line-2, var(--line)); border-radius: 10px; background: var(--cv-card);
  box-shadow: none; text-align: left; color: var(--ink); cursor: pointer;
}
#view .cv[data-cv-view="feedback"] .cv-excluded > .cv-exclusion:last-child { margin-bottom: 20px; }
/* Each conversation is a card of its own: a plain chat icon, a hairline, then its name and why it is out. */
#view .cv[data-cv-view="feedback"] .cv-excluded > .cv-exclusion::before {
  content: ""; position: absolute; left: 66px; top: 50%; width: 1px; height: 40px; margin-top: -20px; background: var(--line);
}
#view .cv[data-cv-view="feedback"] .cv-excluded > .cv-exclusion::after {
  content: ""; position: absolute; left: 23px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--ink);
  -webkit-mask: var(--cvd-chat) center / contain no-repeat; mask: var(--cvd-chat) center / contain no-repeat;
}
#view .cv[data-cv-view="feedback"] .cv-excluded > .cv-exclusion > b { font-size: 16px; font-weight: 550; line-height: 1.35; }
#view .cv[data-cv-view="feedback"] .cv-excluded > .cv-exclusion > .cv-exclusion-why { font-size: 14px; color: var(--ink-2); }
#view .cv[data-cv-view="feedback"] .cv-excluded > .cv-exclusion:hover > b { color: var(--sig); }

/* What buyers are saying: one bordered list, each row a numbered circle, topic, chip, "3 of 5" over its percentage and a chevron (second comp, 14: no icon tile, no bar). */
#view .cv[data-cv-view="feedback"] .cv-feedback-group > .cv-ranked-board { margin: 0; padding: 28px 28px 26px; border-radius: 12px; }
#view .cv[data-cv-view="feedback"] .cv-ranked-board > header { padding: 0 0 22px; }
#view .cv[data-cv-view="feedback"] .cv-feedback-group > .cv-ranked-board > header h2 { font-size: 28px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
#view .cv[data-cv-view="feedback"] .cv-ranked-board .cv-feedback-basis { margin: 8px 0 0; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
#view .cv[data-cv-view="feedback"] .cv-ranked-topics { display: block; padding: 0; border: 1px solid var(--line-2, var(--line)); border-radius: 10px; background: var(--cv-card); overflow: hidden; }
#view .cv[data-cv-view="feedback"] .cv-ranked-topics > .cv-insight { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line-2, var(--line)); border-radius: 0; background: transparent; }
#view .cv[data-cv-view="feedback"] .cv-ranked-topics > .cv-insight:first-child { border-top: 0; }
#view .cv[data-cv-view="feedback"] .cv-ranked-topics > .cv-insight > summary {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 26px; column-gap: 20px; align-items: center;
  min-height: 0; padding: 20px 22px 20px 20px;
}
#view .cv[data-cv-view="feedback"] .cv-ranked-topics > .cv-insight > summary > .cv-desk-tile { display: none !important; }
#view .cv[data-cv-view="feedback"] .cv-ranked-topics > .cv-insight > summary > .cv-topic-rank {
  grid-column: 1; display: grid !important; place-items: center; box-sizing: border-box; width: 44px; height: 44px; border: 1px solid var(--cvd-edge); border-radius: 50%; background: transparent; color: var(--ink); font-size: 18px; font-weight: 450;
}
#view .cv[data-cv-view="feedback"] .cv-ranked-topics > .cv-insight > summary > .cv-topic-label { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
#view .cv[data-cv-view="feedback"] .cv-topic-label > b { font-size: 19px; font-weight: 600; line-height: 1.35; }
#view .cv[data-cv-view="feedback"] .cv-topic-label > small.cv-pol {
  justify-self: start; padding: 3px 13px; border: 1px solid color-mix(in srgb, var(--pol, var(--ink-2)) 28%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--pol, var(--ink-2)) 13%, var(--cv-card));
  color: color-mix(in srgb, var(--pol, var(--ink-2)) 85%, var(--ink)); font-size: 14px; font-weight: 500; line-height: 1.4;
}
/* "3 of 5" over its percentage, both set to the right. */
#view .cv[data-cv-view="feedback"] .cv-ranked-board .cv-insight-count { grid-column: 3; display: grid; justify-items: end; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--ink); text-align: right; white-space: nowrap; }
#view .cv[data-cv-view="feedback"] .cv-ranked-board .cv-insight-count > small { font-size: 16px; color: var(--ink-2); }
#view .cv[data-cv-view="feedback"] .cv-ranked-topics > .cv-insight > summary > .cv-topic-bar { display: none; }
#view .cv[data-cv-view="feedback"] .cv-ranked-topics > .cv-insight > summary::after { grid-column: 4; justify-self: end; align-self: center; color: var(--ink); font-size: 30px; font-weight: 300; }
#view .cv[data-cv-view="feedback"] .cv-ranked-board .cv-insight > .cv-disclosure-body { padding: 0 22px 20px 84px; }

/* ---------- Follow-ups (comp 13) ---------- */
/* The count on a tab is a soft green chip. */
#view .cv .cv-tabs > button > span > span {
  padding: 1px 9px; border: 1px solid color-mix(in srgb, var(--sig) 22%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--sig) 10%, var(--cv-card));
  color: var(--ink); font-size: 14px; line-height: 22px;
}
/* The property filter is one plain field above the list. */
#view .cv[data-cv-view="followups"] .cv-controls { margin: 0 0 22px; }
#view .cv[data-cv-view="followups"] .cv-controls > select {
  flex: 0 0 310px; width: 310px; min-height: 48px; padding: 0 16px; border: 1px solid var(--cvd-edge); border-radius: 10px; background-color: var(--cv-card); font-size: 16px; color: var(--ink);
}
/* One card per follow-up: the tick, the task with its pencil, where it came from, the date, the bin. */
#view .cv[data-cv-view="followups"] .cv-task-list:not(:has(> .cv-empty)) { display: grid; gap: 13px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#view .cv[data-cv-view="followups"] .cv-task-list > .cv-task {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 20px; align-items: start; margin: 0; padding: 20px 26px 22px;
  border: 1px solid var(--cvd-edge); border-radius: 10px; background: var(--cv-card); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
}
/* The tick keeps the product's own checkbox (dashboard-f27: green fill and a white check when done), drawn larger as in the comp.
   That sheet fixes every checkbox at 17px with !important, so the size is overridden the same way and only here. */
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-check { min-width: 28px; min-height: 28px; margin: 10px 0 0; padding: 0; }
html body #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-check input[type="checkbox"] {
  width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; border-radius: 7px !important;
}
html body #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-check input[type="checkbox"]::before { width: 16px !important; height: 16px !important; }
/* The task in bold, a quiet line for where it came from, and View quote after a hairline. */
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-copy { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding: 0; }
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-title {
  margin: 5px 0 0 -8px; padding: 2px 8px; min-height: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none; font-size: 18px; font-weight: 600; line-height: 1.5;
}
/* The theme sheet forces every field's edge with !important, so the resting and hover edges are set the same way. */
html body #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-title:not(:focus) { border-color: transparent !important; }
html body #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-title:not(:focus):hover { border-color: var(--line-2, var(--line)) !important; }
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-title:focus { border-color: var(--sig); background: var(--cv-card); }
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-pencil { display: none; }
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-context { gap: 0; align-items: center; margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-context > button[data-cv-action="evidence"] {
  min-width: 0; min-height: 22px; margin: 0 0 0 18px; padding: 0 0 0 18px; border: 0; border-left: 1px solid var(--line-2, var(--line)); border-radius: 0; background: transparent;
  color: var(--ink); font-size: 15px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-context > button[data-cv-action="evidence"]:hover { color: var(--sig); }
/* The pencil sits right after the words, so the title field is as wide as its text; a browser that cannot size a field to its text keeps the field full width and no pencil. */
@supports (field-sizing: content) {
  #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-copy { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; }
  #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-title { flex: 0 1 auto; field-sizing: content; width: auto; min-width: 0; max-width: calc(100% - 42px); height: auto !important; }
  /* `.cv [hidden]` hides with !important, so the pencil, which is hidden on a phone, is shown here by a heavier selector. */
  #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-pencil,
  #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-pencil[hidden] {
    display: inline-grid !important; flex: none; place-items: center; width: 32px; height: 32px; margin: 5px 0 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer;
  }
  #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-pencil:hover { color: var(--sig); }
  #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-pencil > svg { width: 20px; height: 20px; }
  #view .cv[data-cv-view="followups"] .cv-task-list .cv-task-context { flex: 1 0 100%; }
}
/* The date field, then the bin at the far right. The bin keeps the size it had. */
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-side { align-items: center; gap: 18px; }
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-date {
  box-sizing: border-box; width: 172px; min-height: 48px; margin: 0; padding: 0 14px 0 16px; border: 1px solid var(--cvd-edge); border-radius: 10px; background: var(--card-2, var(--cv-card)); color: var(--ink); font-size: 16px;
}
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-buttons { gap: 10px; }
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-buttons > button[data-cv-action="save-task"] { min-height: 44px; padding: 0 18px; border-radius: 8px; font-size: 15px; }
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-buttons > button[data-cv-action="delete-task"] {
  display: inline-grid; place-items: center; width: 29px; min-width: 0; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-buttons > button[data-cv-action="delete-task"]:hover { color: var(--bad, #b3261e); }
#view .cv[data-cv-view="followups"] .cv-task-list .cv-task-buttons > button[data-cv-action="delete-task"] svg { width: 21px; height: 21px; }

/* ---------- New conversation (owner comps 83 and 84, 23 Oct 2026) ----------
   Above 780px only: that is the width the script calls narrow, so a phone and the band just above it keep the screen they had.
   Theme tokens only. The markup is the old screen's own controls moved: the four method radios sit inside the dropdown's list,
   the two call selects and the property and client fields are the Call details column, and the step rail is the header's. */
@media (min-width:781px){
/* Header: Conversations and the actions on the first row, the title and the step rail on the second. */
#view .cv-flow:has(.cv-setup) > .cv-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "back actions" "title rail"; align-items: center; gap: 0 24px; padding-bottom: 30px;
}
#view .cv-flow:has(.cv-setup) .cv-mobile-brand { display: none; }
#view .cv-flow:has(.cv-setup) .cv-heading-copy { display: contents; }
#view .cv-flow:has(.cv-setup) .cv-heading-copy > .cv-back { grid-area: back; justify-self: start; min-height: 44px; margin: -6px 0 4px; }
#view .cv-flow:has(.cv-setup) .cv-heading-copy > h1 { grid-area: title; margin: 0; }
#view .cv-flow:has(.cv-setup) .cv-heading-actions { grid-area: actions; justify-self: end; padding: 0; }
#view .cv-flow:has(.cv-setup) .cv-heading > .cv-workflow { grid-area: rail; align-self: end; }
#view .cv-flow:has(.cv-setup) .cv-usage-menu > summary > span { font-size: 15px; }

/* The step rail is words, not circles: Record / Review / Follow up, the current one green and underlined. */
#view .cv .cv-heading > .cv-workflow { display: flex; align-items: center; gap: 0; max-width: none; margin: 0; }
#view .cv .cv-heading > .cv-workflow .cv-stage {
  position: relative; flex: none; min-height: 44px; margin: 0 40px 0 0; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--ink-2); font-size: 17px; font-weight: 400; gap: 0; cursor: default; opacity: 1;
}
#view .cv .cv-heading > .cv-workflow .cv-stage:last-child { margin-right: 0; }
#view .cv .cv-heading > .cv-workflow .cv-stage .cv-stage-number { display: none; }
#view .cv .cv-heading > .cv-workflow .cv-stage:not(:last-child)::after {
  content: "/"; position: absolute; left: calc(100% + 15px); top: 50%; width: auto; min-width: 0; height: auto; margin: 0; flex: none; transform: translateY(-50%); background: none; color: var(--ink-2);
}
#view .cv .cv-heading > .cv-workflow .cv-stage[aria-current="step"] { color: var(--sig); border-bottom-color: var(--sig); font-weight: 450; }

/* One card: the three tabs across the top, then Recording and Call details side by side, then the footer. */
#view .cv .cv-setup { max-width: none; margin: 0; }
#view .cv .cv-setup > .cv-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; margin: 0; padding: 0 40px 36px;
  border: 1px solid var(--cvd-edge); border-radius: 12px; background: var(--cv-card);
}
#view .cv .cv-setup > .cv-card > .cv-panel-tabs {
  grid-column: 1 / -1; display: flex; gap: 0; margin: 0 0 34px; padding: 0; border: 0; border-bottom: 1px solid var(--line-2, var(--line)); border-radius: 0; background: none;
}
#view .cv .cv-setup > .cv-card > .cv-panel-tabs > button {
  position: relative; flex: none; min-height: 66px; margin: 0 0 -1px; padding: 0 30px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--ink); font-size: 17px; font-weight: 400;
}
#view .cv .cv-setup > .cv-card > .cv-panel-tabs > button:first-child { padding-left: 2px; margin-right: 8px; }
#view .cv .cv-setup > .cv-card > .cv-panel-tabs > button + button::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 28px; margin-top: -14px; background: var(--line-2, var(--line));
}
#view .cv .cv-setup > .cv-card > .cv-panel-tabs > button svg { display: block; flex: none; width: 26px; height: 26px; }
#view .cv .cv-setup > .cv-card > .cv-panel-tabs > button > span { gap: 14px; }
#view .cv .cv-setup > .cv-card > .cv-panel-tabs > button:hover { background: none; color: var(--sig); }
#view .cv .cv-setup > .cv-card > .cv-panel-tabs > button[aria-pressed="true"] { background: none; color: var(--sig); border-bottom-color: var(--sig); font-weight: 550; }
#view .cv .cv-setup [data-cv-setup-panel] { grid-column: 1; grid-row: 2 / span 2; min-width: 0; padding: 0 44px 0 0; }
#view .cv .cv-setup .cv-call-field,
#view .cv .cv-setup .cv-setup-details { grid-column: 2; min-width: 0; margin: 0; padding: 0 0 0 44px; border: 0; border-left: 1px solid var(--line-2, var(--line)); border-radius: 0; background: none; }
#view .cv .cv-setup .cv-call-field { grid-row: 2; }
#view .cv .cv-setup .cv-setup-details { grid-row: 3; }
#view .cv .cv-setup .cv-setup-details > summary { display: none; }
#view .cv .cv-setup .cv-setup-details:not([open]) > div { display: block; }
#view .cv .cv-setup .cv-mode-field legend,
#view .cv .cv-setup .cv-call-field legend { margin: 0 0 18px; padding: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
#view .cv .cv-setup .cv-mode-field { margin: 0; padding: 0; border: 0; }

/* The fields: one native select (or a disclosure) dressed with a leading icon and a trailing chevron. */
#view .cv .cv-setup .cv-call-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
#view .cv .cv-setup .cv-call-choices > label,
#view .cv .cv-setup .cv-setup-property { gap: 10px; margin: 0; font-size: 15px; font-weight: 400; color: var(--ink); }
#view .cv .cv-setup .cv-setup-property { margin-top: 24px; }
#view .cv .cv-setup .cv-setup-property > small { display: none; }
#view .cv .cv-setup .cv-select { position: relative; display: block; min-width: 0; }
#view .cv .cv-setup .cv-select > svg { position: absolute; top: 50%; display: block; flex: none; color: var(--ink); pointer-events: none; transform: translateY(-50%); }
#view .cv .cv-setup .cv-select > svg:first-child { left: 18px; width: 24px; height: 24px; }
#view .cv .cv-setup .cv-select > svg:last-child { right: 16px; width: 20px; height: 20px; }
#view .cv .cv-setup .cv-select > select {
  display: block; width: 100%; min-height: 56px; padding: 0 50px 0 56px; border: 1px solid var(--cvd-edge); border-radius: 10px; background: var(--cv-card); color: var(--ink);
  font-size: 16px; font-weight: 400; text-align: left; -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
#view .cv .cv-setup .cv-select > select:hover { border-color: var(--sig); }
#view .cv .cv-setup .cv-call-field .cv-help { margin: 12px 0 0 !important; font-size: 13px; }
#view .cv .cv-setup .cv-client-details { margin: 24px 0 0; }
#view .cv .cv-setup .cv-client-details > summary { display: grid; gap: 10px; min-height: 0; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 400; color: var(--ink); }
#view .cv .cv-setup .cv-client-details > summary::after { content: none !important; display: none; }
#view .cv .cv-setup .cv-field-label { display: block; }
#view .cv .cv-setup .cv-client-summary {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px 0 18px; border: 1px solid var(--cvd-edge); border-radius: 10px; background: var(--cv-card);
  color: var(--ink); font-size: 16px; cursor: pointer;
}
#view .cv .cv-setup .cv-client-details > summary:hover .cv-client-summary { border-color: var(--sig); }
#view .cv .cv-setup .cv-client-summary > svg { flex: none; width: 24px; height: 24px; }
#view .cv .cv-setup .cv-client-summary > svg:first-child { color: var(--sig); }
#view .cv .cv-setup .cv-client-summary > svg:last-child { display: block; width: 20px; height: 20px; margin-left: auto; transition: transform .15s ease; }
#view .cv .cv-setup .cv-client-details[open] .cv-client-summary > svg:last-child { transform: rotate(180deg); }
#view .cv .cv-setup .cv-client-details > .cv-form-grid { margin: 16px 0 0; gap: 16px; grid-template-columns: minmax(0, 1fr); }
#view .cv .cv-setup .cv-client-details .cv-form-grid > label { font-size: 14px; font-weight: 400; color: var(--ink); }
#view .cv .cv-setup .cv-client-details .cv-form-grid :is(input, select) { min-height: 50px; border-radius: 10px; background: var(--cv-card); border-color: var(--cvd-edge); font-size: 16px; }

/* Recording: the method is a dropdown. The trigger shows the choice; the list is the four radios, a tick on the chosen row. */
#view .cv .cv-setup .cv-mode-menu { position: relative; }
#view .cv .cv-setup .cv-mode-trigger {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; min-height: 56px; padding: 0 16px 0 18px; border: 1px solid var(--cvd-edge); border-radius: 10px;
  background: var(--cv-card); color: var(--ink); font-size: 16px; font-weight: 400; text-align: left;
}
#view .cv .cv-setup .cv-mode-trigger:hover,
#view .cv .cv-setup .cv-mode-menu.is-open > .cv-mode-trigger { border-color: var(--sig); background: var(--cv-card); }
#view .cv .cv-setup .cv-mode-trigger > svg { flex: none; width: 24px; height: 24px; }
#view .cv .cv-setup .cv-mode-trigger > span { flex: 1; min-width: 0; }
#view .cv .cv-setup .cv-mode-trigger > svg:last-child { width: 20px; transition: transform .15s ease; }
#view .cv .cv-setup .cv-mode-trigger[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
#view .cv .cv-setup .cv-mode-menu > .cv-modes {
  display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(100%, 480px); gap: 4px; padding: 10px; overflow: visible;
  border: 1px solid var(--cvd-edge); border-radius: 10px; background: var(--cv-card); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
}
#view .cv .cv-setup .cv-mode-menu.is-open > .cv-modes { display: grid; grid-template-columns: minmax(0, 1fr); }
#view .cv .cv-setup .cv-mode-menu .cv-mode,
#view .cv .cv-setup .cv-mode-menu .cv-modes:not(.is-choosing) .cv-mode:not(.is-selected) {
  position: relative; display: flex; align-items: center; gap: 18px; min-height: 52px; margin: 0; padding: 0 14px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--ink);
}
#view .cv .cv-setup .cv-mode-menu .cv-mode:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
#view .cv .cv-setup .cv-mode-menu .cv-mode.is-selected { background: color-mix(in srgb, var(--sig) 10%, var(--cv-card)); }
#view .cv .cv-setup .cv-mode-menu .cv-mode:has(input:focus-visible) { outline: 2px solid var(--sig); outline-offset: -2px; }
#view .cv .cv-setup .cv-mode-menu .cv-mode > input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; pointer-events: none; }
#view .cv .cv-setup .cv-mode-menu .cv-mode > svg { width: 24px; height: 24px; margin: 0; color: var(--ink); }
#view .cv .cv-setup .cv-mode-menu .cv-mode > span:not(.cv-mode-tick) { flex: 1; display: block; }
#view .cv .cv-setup .cv-mode-menu .cv-mode b { font-size: 16px; font-weight: 400; }
#view .cv .cv-setup .cv-mode-menu .cv-mode > .cv-mode-tick { display: block; flex: none; width: 24px; height: 24px; color: var(--sig); visibility: hidden; }
#view .cv .cv-setup .cv-mode-menu .cv-mode.is-selected > .cv-mode-tick { visibility: visible; }
#view .cv .cv-setup .cv-mode-tick > svg { display: block; width: 24px; height: 24px; }
#view .cv .cv-setup .cv-source-hint { margin: 14px 0 0; font-size: 14px; }

/* Live help: the words at the left, the switch at the right. */
#view .cv .cv-setup .cv-live-switch { position: relative; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; margin: 26px 0 0; padding: 0; border: 0; }
#view .cv .cv-setup .cv-live-switch > input[type="checkbox"] { left: auto; right: 0; top: 50%; transform: translateY(-50%); }
#view .cv .cv-setup .cv-live-switch-copy { display: grid; gap: 3px; font-size: 17px; }
#view .cv .cv-setup .cv-live-switch-copy b { font-size: 17px; font-weight: 400; }
#view .cv .cv-setup .cv-live-switch-copy small { padding: 0; border: 0; font-size: 13px; }
#view .cv .cv-setup .cv-record-later { margin: 26px 0 0; font-size: 14px; }
#view .cv .cv-setup .cv-setup-input-hint { justify-items: start; padding: 8px 0; text-align: left; }
#view .cv .cv-setup .cv-initial-transcript textarea { min-height: 150px; border-radius: 10px; background: var(--cv-card); border-color: var(--cvd-edge); }

/* Footer: the consent at the left, Start recording at the right. */
#view .cv .cv-setup .cv-setup-footer {
  grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; justify-content: space-between; gap: 40px; margin: 38px 0 0; padding: 28px 0 0; border: 0; border-top: 1px solid var(--line-2, var(--line));
}
#view .cv .cv-setup .cv-setup-footer .cv-consent { gap: 16px; max-width: 640px; margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.4; }
#view .cv .cv-setup .cv-consent > input[type="checkbox"] { width: 26px; height: 26px; margin-top: 1px; border-radius: 6px; }
#view .cv .cv-setup .cv-consent-text { gap: 4px; }
#view .cv .cv-setup .cv-consent-text > b { font-size: 16px; font-weight: 400; }
#view .cv .cv-setup .cv-consent-text > small { font-size: 13px; }
#view .cv .cv-setup .cv-setup-footer .cv-primary { min-height: 56px; padding: 0 32px; border-radius: 10px; font-size: 17px; font-weight: 500; }
#view .cv .cv-setup .cv-setup-footer .cv-primary > span { gap: 14px; }
#view .cv .cv-setup .cv-setup-footer .cv-primary svg { width: 24px; height: 24px; }
}
/* Below 1000px the two columns stack, so each field keeps a readable width. */
@media (min-width:781px) and (max-width:1000px){
  #view .cv .cv-setup > .cv-card { grid-template-columns: minmax(0, 1fr); }
  #view .cv .cv-setup [data-cv-setup-panel],
  #view .cv .cv-setup .cv-call-field,
  #view .cv .cv-setup .cv-setup-details,
  #view .cv .cv-setup .cv-setup-footer { grid-column: 1; grid-row: auto; }
  #view .cv .cv-setup [data-cv-setup-panel] { padding-right: 0; }
  #view .cv .cv-setup .cv-call-field,
  #view .cv .cv-setup .cv-setup-details { padding-left: 0; border-left: 0; }
  #view .cv .cv-setup .cv-call-field { margin-top: 34px; }
  #view .cv .cv-setup .cv-setup-footer { flex-wrap: wrap; }
  #view .cv .cv-setup > .cv-card { padding: 0 24px 28px; }
  #view .cv .cv-setup > .cv-card > .cv-panel-tabs > button { padding: 0 16px; font-size: 16px; }
  #view .cv .cv-setup > .cv-card > .cv-panel-tabs > button svg { width: 22px; height: 22px; }
  #view .cv .cv-setup > .cv-card > .cv-panel-tabs > button > span { gap: 10px; }
  #view .cv-flow:has(.cv-setup) > .cv-heading { grid-template-columns: minmax(0, 1fr); grid-template-areas: "back" "actions" "title" "rail"; gap: 0; }
  #view .cv-flow:has(.cv-setup) .cv-heading-actions { justify-self: start; justify-content: flex-start; flex-wrap: wrap; width: auto; margin-top: 4px; }
  #view .cv-flow:has(.cv-setup) .cv-heading-copy > h1 { margin: 18px 0 6px; }
  #view .cv-flow:has(.cv-setup) .cv-heading > .cv-workflow { justify-self: start; }
}

/* The two-by-two and the side-by-side pair give way to one column when the page is narrow. */
@media (max-width:1060px){
  #view .cv-flow .cv-workspace-card .cv-summary { grid-template-columns: minmax(0, 1fr); }
  .cv .cv-ncols { grid-template-columns: minmax(0, 1fr); }
  #view .cv[data-cv-view="feedback"] .cv-ranked-topics > .cv-insight > summary { grid-template-columns: 44px minmax(0, 1fr) auto 20px; column-gap: 14px; }
}
}