/* Practice (25 Oct 2026). Loaded after the Conversations sheets so it can win on order. Every class is prefixed pr- and
   every colour is a theme token, so all palettes and dark mode follow. The house style is the New conversation card
   (r294): one card, a left column and a right Call details column, labelled selects with icons and chevrons, strong
   borders, a footer with a switch at the left and the filled primary button at the right. */

/* ---------- the Practice button beside New conversation ---------- */
.cv .cv-primary.pr-open,
.cv .cv-primary.pr-open:hover,
.cv .cv-primary.pr-open:active,
.cv .cv-primary.pr-open:focus-visible {
  background: var(--cv-card); color: var(--ink); border: 1px solid var(--card-edge, var(--line-2, var(--line))); font-weight: 500;
}
.cv .cv-primary.pr-open:hover:not(:disabled) { border-color: var(--sig); color: var(--sig); filter: none; }
.cv .cv-primary.pr-open > svg { flex: none; width: 18px; height: 18px; }
.cv .cv-controls > .cv-list-new.pr-open { width: auto; flex: 0 0 auto; padding-inline: 18px; }
.cv .cv-controls > .cv-list-new:not(.pr-open):has(+ .pr-open) { width: auto; flex: 1 1 auto; white-space: nowrap; }

/* ---------- screen frame ---------- */
.cv.pr {
  --pr-edge: var(--card-edge, var(--line-2, var(--line)));
  --pr-tile: color-mix(in srgb, var(--sig) 10%, var(--cv-card));
}
.cv.pr-live { max-width: 760px; padding-bottom: 0; }
.cv.pr-live-loading { max-width: 760px; }
.cv.pr h1 { overflow-wrap: anywhere; }
.pr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 20px; padding: 0 0 22px; }
.pr-head-copy { min-width: 0; }
/* Try again and Next drill, at the top right of a drill result (owner comp, 25 Oct 2026). */
.pr-head-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding-top: 34px; }
.cv .pr-head-actions > button { min-height: 48px; padding: 0 20px; border-radius: 10px; font-size: 15px; font-weight: 500; gap: 10px; }
.pr-head-actions > button > svg { flex: none; width: 19px; height: 19px; }
.pr-head h1:focus { outline: none; }
/* Focus moves to the heading on each screen; on a phone it must land below the fixed bar, not under it (390 walk, 25 Oct 2026). */
.pr-head h1 { scroll-margin-top: 84px; }
.pr-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.cv .pr-back {
  min-height: 44px; margin: 0 0 4px -2px; padding: 0 6px 0 2px; gap: 6px; justify-content: flex-start;
  border-color: transparent; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 450;
}
.cv .pr-back:hover { border-color: transparent; background: transparent; color: var(--sig); }
.pr-back > svg { flex: none; width: 19px; height: 19px; }
.pr-loading { margin: 8px 0; color: var(--ink-2); }
.pr-help { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.pr-note { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.pr-alert {
  margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line-2, var(--line)); border-left: 3px solid var(--sig);
  border-radius: 6px; background: var(--card-2, var(--cv-card)); overflow-wrap: anywhere;
}
.pr-empty { display: flex; align-items: center; gap: 18px; margin: 16px 0 0; }
.pr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.pr-actions > button { min-height: 48px; padding: 0 22px; border-radius: 10px; font-size: 15px; font-weight: 500; }
.pr-actions > button > svg { flex: none; width: 20px; height: 20px; }

/* ---------- cards and lists ---------- */
.pr-card { margin: 0 0 18px; padding: 22px 24px; border: 1px solid var(--pr-edge); border-radius: 12px; background: var(--cv-card); min-width: 0; }
.pr-card > h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.pr-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.pr-card-head > h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.pr-today { margin: 0; color: var(--ink-2); font-size: 14px; text-align: right; }
.pr-running { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pr-running p { margin-top: 2px; color: var(--ink-2); }
/* The icon tile every row and card of the Practice room wears: a soft square with the icon in the ink (owner comp, 25 Oct 2026). */
.pr-tile { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--pr-tile); color: var(--ink); }
.pr-tile > svg { width: 28px; height: 28px; }
.pr-starts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; }
.pr-start-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 20px; padding: 22px;
  border: 1px solid var(--pr-edge); border-radius: 12px; background: var(--cv-card);
}
.pr-start-choice .pr-tile { width: 68px; height: 68px; }
.pr-start-choice .pr-tile > svg { width: 34px; height: 34px; }
.pr-start-copy { display: grid; gap: 4px; min-width: 0; }
.pr-start-copy b { font-size: 18px; font-weight: 600; }
.pr-start-copy small { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.cv .pr-start-choice > button {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 0 22px;
  border-radius: 8px; font-size: 15px; font-weight: 600;
}
.cv .pr-start-choice > button:not(.cv-primary) { border: 1.5px solid var(--sig); background: var(--cv-card); color: var(--ink); }
.cv .pr-start-choice > button:not(.cv-primary):hover:not(:disabled) { background: var(--pr-tile); }
.pr-start-choice > button > svg { flex: none; width: 20px; height: 20px; }
.pr-list { display: block; margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2, var(--line)); }
.pr-list > li + li { border-top: 1px solid var(--line-2, var(--line)); }
.pr-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; min-width: 0; }
.cv .pr-row-button {
  width: 100%; min-height: 64px; padding: 16px 0; border: 0; border-radius: 0; background: transparent; text-align: left; font-weight: 400; justify-content: flex-start; gap: 16px;
}
.cv .pr-row-button:hover { background: transparent; }
.cv .pr-row-button:hover .pr-row-main b { color: var(--sig); }
.pr-row-button > svg { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--ink-2); }
.pr-row-main { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.pr-row-main b { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.pr-row-main span, .pr-row-main small { color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.pr-row > button { display: flex; align-items: center; gap: 12px; flex: none; min-height: 48px; padding: 0 18px; border-radius: 8px; font-size: 15px; font-weight: 500; }
.pr-row > button > svg { flex: none; width: 19px; height: 19px; }
.pr-pill {
  flex: none; padding: 3px 12px; border: 1px solid var(--line-2, var(--line)); border-radius: 99px; font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pr-pill.is-live { border-color: var(--sig); background: var(--pr-tile); color: var(--sig); }
.pr-group { margin: 18px 0 0; }
.pr-group:first-of-type { margin-top: 10px; }
.pr-group > h3 { margin: 0; color: var(--ink-2); font-size: 14px; font-weight: 550; }

/* ---------- setup ---------- */
.pr-setup-card { display: grid; grid-template-columns: minmax(0, 1fr); padding: 22px 20px 24px; }
.pr-setup-card > .pr-alert { grid-column: 1 / -1; margin: 22px 0 0; }
.pr-col { min-width: 0; margin: 0; padding: 0; border: 0; }
.pr-col > legend { margin: 0 0 18px; padding: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pr-field { display: grid; gap: 8px; margin: 0 0 22px; font-size: 15px; font-weight: 400; color: var(--ink); }
.pr-label { font-size: 15px; }
.pr-select { position: relative; display: block; min-width: 0; }
.pr-select > svg { position: absolute; top: 50%; display: block; flex: none; color: var(--ink); pointer-events: none; transform: translateY(-50%); }
.pr-select > svg:first-child { left: 18px; width: 24px; height: 24px; }
.pr-select > svg:last-child { right: 16px; width: 20px; height: 20px; }
.cv .pr-select > select {
  display: block; width: 100%; min-height: 56px; padding: 0 50px 0 56px; border: 1px solid var(--pr-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;
}
.cv .pr-select > select:hover:not(:disabled) { border-color: var(--sig); }
.cv .pr-select > select:disabled { opacity: .7; cursor: default; }
.pr-readonly {
  display: flex; align-items: center; gap: 14px; min-height: 56px; margin: 0; padding: 0 18px; border: 1px solid var(--line-2, var(--line));
  border-radius: 10px; background: var(--card-2, var(--cv-card)); color: var(--ink-2); font-size: 16px;
}
.pr-readonly > svg { flex: none; width: 24px; height: 24px; color: var(--ink); }
.pr-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--pr-edge); border-radius: 10px; overflow: hidden; background: var(--cv-card); }
.cv .pr-seg > button { min-height: 54px; border: 0; border-radius: 0; background: transparent; font-size: 16px; font-weight: 450; }
.cv .pr-seg > button + button { border-left: 1px solid var(--pr-edge); }
.cv .pr-seg > button:hover:not([aria-pressed="true"]) { background: var(--card-2, var(--cv-card)); color: var(--sig); }
.cv .pr-seg > button[aria-pressed="true"] { background: var(--pr-tile); color: var(--sig); font-weight: 600; }
.pr-col-call { margin-top: 12px; }
.pr-col > .pr-help { margin: -10px 0 22px; }
.pr-foot {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin: 12px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--line-2, var(--line));
}
.pr-switch, .cv.pr .pr-switch { position: relative; display: flex; flex-direction: row; align-items: center; gap: 16px; margin: 0; cursor: pointer; }
.pr-switch.is-off { cursor: default; }
.pr-switch > input[type="checkbox"] { position: absolute; opacity: 0; left: 0; top: 0; width: 48px; height: 28px; margin: 0; cursor: inherit; }
.pr-track { flex: none; position: relative; width: 48px; height: 28px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--line-2); }
.pr-track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--cv-card); transition: transform .15s ease; }
.pr-switch > input:checked + .pr-track { background: var(--sig); border-color: var(--sig); }
.pr-switch > input:checked + .pr-track::after { transform: translateX(20px); background: var(--on-sig); }
.pr-switch > input:focus-visible + .pr-track { outline: 2px solid var(--sig); outline-offset: 4px; }
.pr-switch > input:disabled + .pr-track { opacity: .5; }
.pr-switch-copy { display: grid; gap: 3px; min-width: 0; }
.pr-switch-copy b { font-size: 16px; font-weight: 450; }
.pr-switch-copy small { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.pr-foot-go { display: grid; justify-items: end; gap: 8px; }
.cv .pr-go { min-height: 56px; padding: 0 32px; border-radius: 10px; font-size: 17px; font-weight: 500; gap: 12px; }
.pr-go > svg { flex: none; width: 24px; height: 24px; }

/* ---------- live ---------- */
.pr-live-head { align-items: center; padding-bottom: 14px; }
.pr-live-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.pr-speaking-slot:empty { display: none; }
.pr-speaking { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.pr-speaking > i { display: block; width: 3px; height: 6px; border-radius: 2px; background: var(--sig); animation: pr-bars .9s ease-in-out infinite; }
.pr-speaking > i:nth-child(2) { animation-delay: .15s; }
.pr-speaking > i:nth-child(3) { animation-delay: .3s; }
@keyframes pr-bars { 0%, 100% { height: 5px; } 50% { height: 16px; } }
.pr-meta { display: flex; flex: none; align-items: center; gap: 8px; }
.pr-clock, .pr-mood {
  padding: 5px 12px; border: 1px solid var(--line-2, var(--line)); border-radius: 99px; font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pr-mood.is-warm { border-color: var(--cv-good); color: var(--cv-good); background: color-mix(in srgb, var(--cv-good) 12%, var(--cv-card)); }
.pr-mood.is-neutral { color: var(--ink-2); }
.pr-mood.is-cool { border-color: var(--cv-mid); color: var(--cv-mid); background: color-mix(in srgb, var(--cv-mid) 12%, var(--cv-card)); }
.pr-mood.is-cold { border-color: var(--cv-bad); color: var(--cv-bad); background: color-mix(in srgb, var(--cv-bad) 12%, var(--cv-card)); }
.pr-scroll { min-height: 36vh; padding: 4px 0 18px; }
.pr-log { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pr-line { max-width: 88%; padding: 10px 14px 11px; border: 1px solid var(--line-2, var(--line)); border-radius: 12px; background: var(--card-2, var(--cv-card)); scroll-margin-bottom: 260px; }
.pr-line.is-agent { justify-self: end; border-color: color-mix(in srgb, var(--sig) 30%, var(--line-2, var(--line))); background: var(--pr-tile); }
.pr-line.is-pending { opacity: .65; }
.pr-line.is-waiting { min-width: 76px; }
.pr-dots { display: inline-flex; align-items: center; gap: 5px; height: 24px; }
.pr-dots > i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); animation: pr-dots 1.2s ease-in-out infinite; }
.pr-dots > i:nth-child(2) { animation-delay: .18s; }
.pr-dots > i:nth-child(3) { animation-delay: .36s; }
@keyframes pr-dots { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }
.pr-line > small { display: block; margin-bottom: 2px; color: var(--ink-2); font-size: 12px; font-weight: 550; }
.pr-line > p { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.pr-interim { margin: 12px 0 0; color: var(--ink-2); font-style: italic; font-size: 16px; text-align: right; overflow-wrap: anywhere; }
.pr-interim:empty { display: none; }
.pr-bar {
  position: sticky; bottom: 0; z-index: 4; display: grid; gap: 10px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pr-edge); background: var(--bg, var(--cv-card));
}
.pr-notice { display: grid; gap: 6px; }
.pr-notice:not(:has(.pr-alert, .pr-note, .pr-status:not(:empty))) { display: none; }
.pr-notice .pr-alert { margin: 0; }
.pr-status { margin: 0; color: var(--ink-2); font-size: 13px; }
.pr-status:empty { display: none; }
.pr-type { display: flex; gap: 8px; margin: 0; }
.pr-type[hidden] { display: none; }
.cv .pr-type > input[type="text"] { flex: 1 1 auto; min-height: 48px; padding: 0 14px; border: 1px solid var(--pr-edge); border-radius: 10px; background: var(--cv-card); font-size: 16px; }
.cv .pr-send { flex: none; min-height: 48px; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 500; }
.pr-send > svg { flex: none; width: 18px; height: 18px; }
.pr-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.pr-controls-end { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; }
.pr-controls-talk { grid-column: 2; grid-row: 1; }
.pr-controls:has(.pr-ended), .pr-controls:has(.pr-confirm) { grid-template-columns: minmax(0, 1fr); }
.pr-controls:has(.pr-ended) .pr-controls-end, .pr-controls:has(.pr-confirm) .pr-controls-end { grid-column: 1; justify-self: stretch; }
.pr-controls:has(.pr-confirm) .pr-controls-talk { display: none; }
.cv .pr-talk {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 92px; height: 92px; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--sig); color: var(--on-sig); font-size: 15px; font-weight: 600;
}
.cv .pr-talk:hover:not(:disabled) { background: var(--sig); filter: brightness(.93); }
.pr-talk > svg { width: 28px; height: 28px; }
.cv .pr-talk.is-live { animation: pr-ring 1.6s ease-out infinite; }
/* Try voice again sits where Talk was; its three words need a pill, not the circle (3 Nov 2026). */
.cv .pr-talk.pr-retry { flex-direction: row; gap: 8px; width: auto; height: 56px; padding: 0 22px; border-radius: 999px; white-space: nowrap; }
.pr-controls:has(.pr-retry) { grid-template-columns: auto minmax(0, 1fr); }
.pr-controls:has(.pr-retry) .pr-controls-talk { justify-self: end; }
.pr-talk.pr-retry > svg { width: 20px; height: 20px; }
@keyframes pr-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sig) 45%, transparent); } 100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--sig) 0%, transparent); } }
.cv .pr-end { min-height: 44px; padding: 0 14px; border-radius: 8px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.pr-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--pr-edge); border-radius: 10px; background: var(--card-2, var(--cv-card)); }
.pr-confirm > p { font-size: 15px; font-weight: 550; }
.pr-confirm > div { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-confirm button { min-height: 44px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.pr-ended { display: grid; justify-items: center; gap: 10px; padding: 6px 0; text-align: center; }
.pr-ended-line { font-size: 16px; font-weight: 550; }
.cv .pr-ended > button { min-height: 52px; padding: 0 28px; border-radius: 10px; font-size: 16px; font-weight: 500; }

/* ---------- results ---------- */
/* The banner under the title: how it ended, with its icon and the outcome sentence (owner comp, 25 Oct 2026). */
.cv p.pr-banner {
  display: flex; align-items: center; gap: 14px 16px; margin: 0 0 22px; padding: 16px 24px; border: 1px solid var(--pr-edge); border-radius: 12px;
  background: color-mix(in srgb, var(--cv-good) 7%, var(--cv-card));
}
.cv p.pr-banner.is-bad { background: color-mix(in srgb, var(--cv-bad) 7%, var(--cv-card)); }
.cv p.pr-banner.is-mid { background: color-mix(in srgb, var(--cv-mid) 8%, var(--cv-card)); }
.pr-banner-icon { display: grid; flex: none; place-items: center; color: var(--cv-good); }
.pr-banner.is-bad .pr-banner-icon { color: var(--cv-bad); }
.pr-banner.is-mid .pr-banner-icon { color: var(--cv-mid); }
.pr-banner-icon > svg { width: 36px; height: 36px; stroke-width: 1.8; }
.pr-banner-icon > svg circle { fill: currentColor; }
.pr-banner-icon > svg path { stroke: var(--on-sig); }
.pr-banner > b { flex: none; font-size: 19px; font-weight: 600; }
.pr-banner-line { min-width: 0; padding-left: 18px; border-left: 1px solid var(--pr-edge); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
/* Feedback and The real concern: one card, a tab bar on top and the panel under it. */
.pr-tabbed { padding: 0; }
.pr-tabs { display: flex; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--pr-edge); }
.cv .pr-tabs > button {
  min-height: 60px; margin-bottom: -1px; padding: 0 22px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent;
  color: var(--ink-2); font-size: 17px; font-weight: 500;
}
.cv .pr-tabs > button:hover:not([aria-selected="true"]) { background: transparent; color: var(--sig); }
.cv .pr-tabs > button[aria-selected="true"] { border-bottom-color: var(--sig); color: var(--sig); font-weight: 650; }
.cv .pr-tabs > button:focus-visible { outline: 2px solid var(--sig); outline-offset: -4px; }
.pr-panel { padding: 24px 28px 28px; }
.pr-panel[hidden] { display: none; }
.pr-reveal-list { display: grid; gap: 14px; margin: 14px 0; }
.pr-reveal-list dt { color: var(--ink-2); font-size: 13px; font-weight: 550; }
.pr-reveal-list dd { margin: 2px 0 0; font-size: 16px; line-height: 1.5; }
.pr-card blockquote { margin: 8px 0 12px; padding: 9px 14px; border-left: 3px solid var(--sig); border-radius: 0 8px 8px 0; background: var(--card-2, var(--cv-card)); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.pr-found { margin: 16px 0 6px; color: var(--cv-good); font-size: 17px; }
.pr-found.is-missed { color: var(--cv-mid); }
.pr-said { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.pr-move { margin: 12px 0 0; font-size: 15px; }
.pr-chip { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 99px; background: var(--pr-tile); color: var(--sig); font-size: 12px; font-weight: 550; }
.pr-reading > h2 { margin: 0; font-size: 18px; }
.pr-reading p { margin-top: 6px; }
.pr-moments { margin: 0 0 26px; }
.pr-moments > h2 { margin: 0; font-size: 18px; font-weight: 600; }
.pr-moments .pr-row { flex-wrap: wrap; }
.pr-grade .cv-grade { padding-top: 0; }
.pr-transcript > summary { cursor: pointer; font-size: 16px; font-weight: 600; }
.pr-transcript > .pr-log { margin-top: 16px; }
.pr-transcript .pr-line { max-width: 100%; }
.pr:has(.cv-grade-sum[data-cv-grade-screen]) .pr-aside { display: none; }
.pr:has(.cv-grade-sum[data-cv-grade-screen]) .pr-tabbed { padding: 0; border: 0; background: transparent; }
.pr:has(.cv-grade-sum[data-cv-grade-screen]) .pr-panel { padding: 0; }

/* ---------- desktop: two columns ---------- */
@media (min-width: 781px) {
  .pr-setup-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 28px 30px 28px; }
  .pr-col-main { padding-right: 44px; }
  .pr-col-call { margin-top: 0; padding-left: 44px; border-left: 1px solid var(--line-2, var(--line)); }
}
@media (min-width: 781px) and (max-width: 1000px) {
  .pr-setup-card { grid-template-columns: minmax(0, 1fr); }
  .pr-col-main { padding-right: 0; }
  .pr-col-call { margin-top: 12px; padding-left: 0; border-left: 0; }
}

/* ---------- phone: one column, 16px gutters come from the page, thumb-reachable Talk ---------- */
@media (max-width: 780px) {
  /* The sizes of a phone (type, padding, radius, heights) are in the block at the foot of this file, on the scale of
     26 Oct 2026; this one keeps the phone's layout. */
  .pr-starts { grid-template-columns: minmax(0, 1fr); }
  .pr-card-head { flex-direction: column; align-items: flex-start; }
  .pr-today { text-align: left; }
  .pr-running { flex-direction: column; align-items: stretch; }
  .pr-head { flex-wrap: wrap; }
  .pr-head-actions { flex: 1 1 100%; justify-content: stretch; padding-top: 0; }
  .cv .pr-head-actions > button { flex: 1 1 0; justify-content: center; }
  .pr-banner { flex-wrap: wrap; }
  .pr-banner-line { flex: 1 1 100%; padding-left: 0; border-left: 0; }
  .cv .pr-tabs > button { flex: 1 1 0; }
  .pr-select > svg { display: none; }
  .cv .pr-select > select { -webkit-appearance: menulist; appearance: menulist; }
  .pr-foot { flex-direction: column; align-items: stretch; }
  .pr-foot-go { justify-items: stretch; }
  .cv .pr-go { width: 100%; }
  .pr-live-head { flex-wrap: wrap; }
  .pr-line { max-width: 94%; }
  .cv.pr-live { padding-bottom: 0; }
  .pr-bar { padding-bottom: calc(var(--m-pad, 14px) + env(safe-area-inset-bottom, 0px)); }
  .pr-controls { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .pr-row:not(.pr-row-button) { flex-wrap: wrap; }
  .pr-row:not(.pr-row-button) > .pr-row-main { flex: 1 1 calc(100% - 80px); }
  .pr-row:not(.pr-row-button) > button { flex: 1 1 100%; justify-content: center; }
}
/* THE FIRST-RUN EXPLAINER (owner ruling, 28 Oct 2026). Practice only makes sense once you know the client is holding
   something back, and nothing said so, so the result tab read as a riddle. An inline line on the setup screen was the
   first attempt and it was wrong twice over: it became a column in that two-column grid and shoved Call details down
   the page, and a sentence beside the fields is a sentence nobody reads. It is a modal shown once instead, with the
   Start button held for five seconds so it cannot be clicked past without being seen. */
.pr-first { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.pr-first-box {
  width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  padding: 26px 26px 22px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line-2, var(--line)); box-shadow: var(--shadow);
}
.pr-first-box h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.25; }
.pr-first-box p { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.pr-first-go { display: flex; justify-content: flex-end; margin-top: 4px; }
.pr-first-go button { min-height: 44px; }
.pr-first-go button[disabled] { opacity: 0.55; cursor: default; }
@media (max-width: 767px) {
  /* Phone sizes are tokens, never numbers (r335's one type scale, and the lint in practice-ui.test.mjs enforces it). */
  /* Centred on a phone too, not bottom anchored: a sheet pinned to the bottom clipped against the viewport once
     the box grew, and there is nothing here worth the risk of a cut-off button. */
  .pr-first { padding: var(--m-gap); }
  .pr-first-box { padding: var(--m-pad); border-radius: var(--m-radius); max-height: calc(100vh - 2 * var(--m-gap)); }
  .pr-first-box h2 { font-size: var(--m-body-lg); }
  .pr-first-box p { font-size: var(--m-body); }
  .pr-first-go { justify-content: stretch; }
  .pr-first-go button { width: 100%; min-height: var(--m-tap); }
}

/* ======================================================================================================================
   PRACTICE ON 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", and "BREAK
   ALL EXISTING RULES IF NEEDED"). The Practice room was drawn at desktop size and only narrowed for a phone: 17 to 19px
   headings, 56 to 68px icon tiles, 52 to 60px rows and fields, 16px type everywhere. It now reads the tokens at the foot
   of mobile-media.css, so it is the same size as the rest of Conversations: type 12 / 14 / 15 / 18, gaps 4 / 8 / 12 /
   16, a card's padding 14 at a 12px radius, a field 40 tall, a thumb target 44. The query is the one that file declares
   the tokens in, so the tokens exist wherever this applies. Nothing above 767px changes. Where a button is two or
   three words its height is made of padding, so its words are one line tall to anything that measures them.
   ====================================================================================================================== */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
  html body #view .cv.pr .pr-head { padding-bottom: var(--m-gap); gap: var(--m-gap-s) var(--m-gap); }
  html body #view .cv.pr .pr-head h1 { font-size: var(--m-h2); line-height: 1.15; }
  /* A screen-reader label is as wide as its words, still clipped to nothing, so nothing in it is cut off to a measure. */
  html body #view .cv .pr-sr { left: 0; width: max-content; max-width: 100%; }
  html body #view .cv.pr .pr-head-actions { gap: var(--m-gap-s); }
  html body #view .cv .pr-head-actions > button { min-height: var(--m-control); padding: var(--m-pad-s) var(--m-gap); border-radius: var(--m-radius); font-size: var(--m-body); gap: var(--m-gap-s); }
  html body #view .cv .pr-head-actions > button > svg { width: 18px; height: 18px; }
  html body #view .cv .pr-back { min-height: var(--m-control); padding-block: var(--m-pad-s); font-size: var(--m-body); }
  html body #view .cv .pr-back > svg { width: 18px; height: 18px; }
  html body #view .cv .pr-sub { font-size: var(--m-body); line-height: 1.4; }
  html body #view .cv .pr-help,
  html body #view .cv .pr-note,
  html body #view .cv .pr-status { font-size: var(--m-cap); line-height: 1.45; }
  html body #view .cv .pr-alert { margin: 0 0 var(--m-gap); padding: var(--m-pad-s) var(--m-gap); }
  html body #view .cv .pr-actions { gap: var(--m-gap-s); margin: var(--m-gap) 0 0; }
  /* a button keeps the width of its own words and a lone one fills the row, so none sits at half width beside nothing */
  html body #view .cv .pr-actions > button { flex: 1 1 auto; min-width: min(100%, max-content); min-height: var(--m-tap); padding: var(--m-gap) var(--m-gap-l); border-radius: var(--m-radius); font-size: var(--m-body); }
  html body #view .cv .pr-transcript > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--m-gap); }

  /* cards and rows */
  html body #view .cv .pr-card { margin: 0 0 var(--m-gap); padding: var(--m-pad); border-radius: var(--m-radius); }
  html body #view .cv .pr-card > h2,
  html body #view .cv .pr-card-head > h2 { font-size: var(--m-h4); }
  html body #view .cv .pr-today { font-size: var(--m-body); }
  html body #view .cv .pr-running { gap: var(--m-gap-s); }
  html body #view .cv .pr-tile { width: var(--m-control); height: var(--m-control); border-radius: var(--m-radius); }
  html body #view .cv .pr-tile > svg { width: 20px; height: 20px; }
  html body #view .cv .pr-starts { gap: var(--m-gap-s); margin-top: var(--m-gap-s); }
  html body #view .cv .pr-start-choice { gap: var(--m-gap-s) var(--m-gap); padding: var(--m-pad); border-radius: var(--m-radius); }
  html body #view .cv .pr-start-choice .pr-tile { width: var(--m-control); height: var(--m-control); }
  html body #view .cv .pr-start-choice .pr-tile > svg { width: 20px; height: 20px; }
  html body #view .cv .pr-start-copy b { font-size: var(--m-body-lg); }
  html body #view .cv .pr-start-copy small { font-size: var(--m-body); line-height: 1.4; }
  html body #view .cv .pr-start-choice > button { min-height: var(--m-tap); padding: var(--m-gap) var(--m-pad); border-radius: var(--m-radius); font-size: var(--m-body); }
  html body #view .cv .pr-start-choice > button > svg { width: 18px; height: 18px; }
  html body #view .cv .pr-list { margin-top: var(--m-gap-s); }
  html body #view .cv .pr-row { gap: var(--m-gap); padding: var(--m-pad-s) 0; }
  html body #view .cv .pr-row-button { min-height: var(--m-tap); padding: var(--m-pad-s) 0; gap: var(--m-gap); }
  html body #view .cv .pr-row-main b { font-size: var(--m-body-lg); }
  html body #view .cv .pr-row-main span,
  html body #view .cv .pr-row-main small { font-size: var(--m-body); }
  html body #view .cv .pr-row > button { min-height: var(--m-control); padding: var(--m-pad-s) var(--m-gap); border-radius: var(--m-radius); font-size: var(--m-body); gap: var(--m-gap-s); }
  html body #view .cv .pr-row > button > svg { width: 18px; height: 18px; }
  html body #view .cv .pr-pill { padding: 2px var(--m-pad-s); font-size: var(--m-cap); }
  html body #view .cv .pr-group { margin-top: var(--m-gap); }
  html body #view .cv .pr-group > h3 { font-size: var(--m-body); }
  html body #view .cv .pr-empty { gap: var(--m-gap); margin-top: var(--m-gap-s); }

  /* setup */
  html body #view .cv .pr-setup-card { padding: var(--m-pad); }
  html body #view .cv .pr-setup-card > .pr-alert { margin-top: var(--m-gap); }
  html body #view .cv .pr-col > legend { margin-bottom: var(--m-gap); font-size: var(--m-h4); }
  html body #view .cv .pr-field { gap: var(--m-gap-xs); margin: 0 0 var(--m-gap); font-size: var(--m-body); }
  html body #view .cv .pr-label { font-size: var(--m-body); }
  html body #view .cv .pr-col-call { margin-top: 0; }
  html body #view .cv .pr-col > .pr-help { margin: calc(-1 * var(--m-gap-s)) 0 var(--m-gap); }
  html body #view .cv .pr-select > select { min-height: var(--m-control); padding: 0 var(--m-pad); border-radius: var(--m-radius); font-size: var(--m-input); }
  html body #view .cv .pr-readonly { min-height: var(--m-control); padding: 0 var(--m-pad); gap: var(--m-gap-s); border-radius: var(--m-radius); font-size: var(--m-body); }
  html body #view .cv .pr-readonly > svg { width: 20px; height: 20px; }
  html body #view .cv .pr-seg { border-radius: var(--m-radius); }
  html body #view .cv .pr-seg > button { min-height: var(--m-control); padding: var(--m-pad-s) var(--m-gap-s); font-size: var(--m-body); }
  html body #view .cv .pr-foot { gap: var(--m-gap); margin-top: 0; padding-top: var(--m-gap); }
  html body #view .cv .pr-switch { justify-content: flex-start; gap: var(--m-gap); }
  html body #view .cv .pr-switch-copy b { font-size: var(--m-body); }
  html body #view .cv .pr-switch-copy small { font-size: var(--m-cap); }
  html body #view .cv .pr-go { min-height: var(--m-tap); padding: var(--m-gap) var(--m-gap-l); border-radius: var(--m-radius); font-size: var(--m-body); gap: var(--m-gap-s); }
  html body #view .cv .pr-go > svg { width: 20px; height: 20px; }

  /* live */
  html body #view .cv .pr-live-head { padding-bottom: var(--m-gap-s); }
  html body #view .cv .pr-clock,
  html body #view .cv .pr-mood { padding: var(--m-gap-xs) var(--m-pad-s); font-size: var(--m-cap); }
  html body #view .cv .pr-log { gap: var(--m-gap-s); }
  html body #view .cv .pr-line { padding: var(--m-pad-s) var(--m-gap); }
  html body #view .cv .pr-line > p { font-size: var(--m-body); line-height: 1.45; }
  html body #view .cv .pr-interim { font-size: var(--m-body); }
  html body #view .cv .pr-bar { gap: var(--m-gap-s); padding-top: var(--m-gap-s); }
  html body #view .cv .pr-type > input[type="text"] { min-height: var(--m-control); padding: 0 var(--m-gap); border-radius: var(--m-radius); font-size: var(--m-input); }
  html body #view .cv .pr-send { min-height: var(--m-control); padding: var(--m-pad-s) var(--m-pad); border-radius: var(--m-radius); font-size: var(--m-body); }
  html body #view .cv .pr-talk { width: 72px; height: 72px; font-size: var(--m-body); }
  html body #view .cv .pr-talk > svg { width: 24px; height: 24px; }
  html body #view .cv .pr-talk.pr-retry { width: auto; height: var(--m-control); padding: 0 var(--m-pad); }
  html body #view .cv .pr-talk.pr-retry > svg { width: 20px; height: 20px; }
  html body #view .cv .pr-end { min-height: var(--m-tap); padding: var(--m-gap) var(--m-pad); font-size: var(--m-body); }
  html body #view .cv .pr-confirm { padding: var(--m-pad-s) var(--m-gap); border-radius: var(--m-radius); }
  html body #view .cv .pr-confirm > p { font-size: var(--m-body); }
  html body #view .cv .pr-confirm button { min-height: var(--m-tap); padding: var(--m-gap) var(--m-pad); font-size: var(--m-body); }
  html body #view .cv .pr-ended-line { font-size: var(--m-body-lg); }
  html body #view .cv .pr-ended > button { min-height: var(--m-tap); padding: var(--m-gap) var(--m-gap-l); border-radius: var(--m-radius); font-size: var(--m-body); }

  /* results */
  html body #view .cv p.pr-banner { gap: var(--m-gap-s) var(--m-gap); margin-bottom: var(--m-gap); padding: var(--m-pad-s) var(--m-gap); border-radius: var(--m-radius); }
  html body #view .cv .pr-banner-icon > svg { width: 28px; height: 28px; }
  html body #view .cv .pr-banner > b { font-size: var(--m-h4); }
  html body #view .cv .pr-banner-line { padding-left: var(--m-gap); font-size: var(--m-body); line-height: 1.45; }
  html body #view .cv .pr-tabs { gap: 0; padding: 0 var(--m-gap-s); }
  html body #view .cv .pr-tabs > button { min-height: var(--m-tap); padding: var(--m-gap) var(--m-gap-s); font-size: var(--m-body); }
  html body #view .cv .pr-panel { padding: var(--m-pad); }
  html body #view .cv .pr-reveal-list { gap: var(--m-gap-s); margin: var(--m-gap-s) 0; }
  html body #view .cv .pr-reveal-list dt { font-size: var(--m-cap); }
  html body #view .cv .pr-reveal-list dd { font-size: var(--m-body); line-height: 1.45; }
  html body #view .cv .pr-card blockquote { margin: var(--m-gap-s) 0; padding: var(--m-pad-s) var(--m-gap); font-size: var(--m-body); line-height: 1.45; }
  html body #view .cv .pr-found { margin: var(--m-gap) 0 var(--m-gap-xs); font-size: var(--m-body-lg); }
  html body #view .cv .pr-said { font-size: var(--m-body); }
  html body #view .cv .pr-move { margin-top: var(--m-gap-s); font-size: var(--m-body); }
  html body #view .cv .pr-reading > h2,
  html body #view .cv .pr-moments > h2 { font-size: var(--m-h4); }
  html body #view .cv .pr-moments { margin-bottom: var(--m-gap); }
  html body #view .cv .pr-transcript > summary { min-height: var(--m-tap); font-size: var(--m-body-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .pr-speaking > i, .cv .pr-talk.is-live { animation: none; }
  .pr-dots > i { animation: none; opacity: .6; }
  .pr-track::after { transition: none; }
}