/* Provider Handoff, V3 page styles.

   Load order on the page:
     1 /assets/provider-handoff.css?v=9  the live tool's styles and the state
                                         rules its scripts toggle (is-collapsed,
                                         is-ready, is-error, is-active, [hidden],
                                         aria-invalid). Never edited.
     2 ../assets/v3.css                  shared V3 system (nav, footer, tokens)
     3 this file                         restyles the tool with V3 tokens

   Markup hooks stay exactly as live. Everything here is presentation only:
   colors, type, spacing, radii. The scripts at /assets/provider-handoff*.js
   generate some of the markup (chips, menus, temporary rows, change rows),
   so those classes are styled here too.

   Contents
   1  Tool variables mapped onto V3 tokens
   2  Chrome fixes (nav padding the tool stylesheet adds)
   3  Hero, privacy line, workflow switch
   4  Layout: grid, panels, panel heads
   5  Fields, inputs, selects, pickers, chips
   6  Buttons
   7  Defaults row and saved state
   8  Monthly limits
   9  Review card: status, summary, export, preview
   10 Follow-up: note, cross-check box, review rows, apply bar
   11 Temporary treatment rows */

/* ── 1 Tool variables → V3 tokens ───────────────────────── */
/* The tool stylesheet reads these names; pointing them at V3 tokens turns
   every rule that uses them warm-neutral, and lifts its #6e685f text to the
   lowest V3 text tier. */
body.handoff {
  --text-primary: var(--ink-hi);
  --text-body: var(--ink);
  --text-muted: var(--ink-mut);
  --text-dim: var(--ink-mut);
  --accent: var(--ink-hi);
  --accent-strong: var(--ink-mut);
  --accent-warm: var(--ember);
  --accent-glow: rgba(236, 170, 104, .28);
  --border: var(--hair);
  --border-strong: var(--hair-2);
  --border-warm: var(--hair);
  --green: var(--ok);
  --red: var(--err);
  --container: var(--maxw);
}

/* ── 2 Chrome ───────────────────────────────────────────── */
/* the tool stylesheet pads its own header; V3's nav sets its height */
.nav-inner { padding-block: 0; }
.nav-link { opacity: 1; }
/* "For patients" + "Add your clinic" is ~21px wider than a 375px phone allows
   at the shared nav spacing; tighten the spacing on small phones so the
   button stays inside the gutter down to 360px. */
@media (max-width: 399px) {
  .nav-inner { gap: 8px; }
  .nav .brand { gap: 8px; }
  .nav-link { padding: 0 6px; }
  .nav-links .btn { margin-left: 0; padding: 0 14px; }
}
@media (max-width: 369px) {
  .nav-link { padding: 0 2px; }
  .nav-links .btn { padding: 0 10px; }
}

/* ── 3 Hero ─────────────────────────────────────────────── */
.tool-hero { padding: 32px 0 72px; }
@media (min-width: 600px) { .tool-hero { padding: 48px 0 96px; } }
.tool-shell { display: block; }
/* v3.css pins .reveal visible; drop the tool's fade transition with it */
.reveal { transition: none; }

.tool-intro { max-width: 760px; }
/* .tool-intro h1 in the tool stylesheet outranks .t-h2; restate its steps */
.tool-intro .t-h2 {
  margin: 0; max-width: 15em;
  font-family: var(--serif); font-weight: 400; font-optical-sizing: auto;
  font-size: 34px; line-height: 1.06; letter-spacing: -.02em;
  color: var(--ink-hi); text-wrap: balance;
}
@media (min-width: 600px) { .tool-intro .t-h2 { font-size: 44px; } }
@media (min-width: 1024px) { .tool-intro .t-h2 { font-size: 56px; } }
.tool-intro .hero-sub { margin-top: var(--h2-lead); }
.tool-intro .kicker + .t-h2 { margin-top: 12px; }

.privacy-strip {
  margin: 24px 0 0; padding: 11px 16px 11px 14px; gap: 10px;
  justify-content: flex-start; align-items: flex-start;
  border: 1px solid var(--hair); border-radius: 14px; background: transparent;
  color: var(--ink); font-size: 15px; line-height: 1.45;
}
.privacy-icon { color: var(--ember); margin-top: 1px; }
.privacy-icon svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .privacy-strip { border-radius: 14px; } }

/* segmented control */
.workflow-switch {
  margin-top: 32px; padding: 4px; gap: 4px;
  background: var(--raised); border: 1px solid var(--hair); border-radius: 999px;
}
.workflow-tab {
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: transparent; color: var(--ink);
  font: 600 15px/1.2 var(--sans); white-space: nowrap;
  transition: background-color 160ms var(--ease-std), color 160ms var(--ease-std);
}
.workflow-tab:hover { color: var(--ink-hi); }
.workflow-tab.is-active { background: var(--btn); color: var(--btn-ink); }
@media (max-width: 600px) {
  .workflow-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .workflow-tab { padding: 0 8px; }
}
#new-handoff-workflow, #followup-handoff-workflow { margin-top: 24px; }

/* ── 4 Layout ───────────────────────────────────────────── */
.generator-grid { grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (min-width: 1024px) {
  .generator-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 380px); gap: 24px; }
}
.form-flow, .followup-flow { gap: var(--grid-gap); }
.followup-flow { max-width: 940px; }

.panel, .review-card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius-card); box-shadow: none;
}
.panel, .review-card { padding: var(--card-pad); }

.panel-head, .review-head { gap: 8px 16px; margin-bottom: 24px; }
/* Round 3: step labels read as the site's colored kickers (dot + color key).
   Steps in ember; the review and finished panels in green. Text unchanged. */
.section-kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0; text-transform: none; color: var(--ember);
}
.section-kicker::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
@media (min-width: 600px) { .section-kicker { font-size: 15px; } }
.review-head .section-kicker, .followup-export-panel .section-kicker { color: var(--green); }
.panel h2, .review-head h2 {
  margin: 6px 0 0;
  font: 400 22px/1.2 var(--serif); letter-spacing: -.01em; font-optical-sizing: auto;
  color: var(--ink-hi); text-wrap: balance;
}
@media (min-width: 600px) { .panel h2, .review-head h2 { font-size: 24px; } }
@media (min-width: 1024px) { .panel h2, .review-head h2 { font-size: 26px; } }

.panel-meta, .schema-pill {
  display: inline-flex; align-items: center; min-height: 28px; margin-top: 2px; padding: 0 12px;
  border: 1px solid var(--hair-2); border-radius: 999px; background: transparent;
  color: var(--ink-mut); font-size: 14px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}

.panel-copy { margin: -8px 0 20px; max-width: 36em; color: var(--ink); font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/* ── 5 Fields ───────────────────────────────────────────── */
.field { gap: 8px; }
.field-grid, .list-grid { gap: 20px 16px; }
.list-grid { margin: 20px 0; }
.field-label {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 6px;
  color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0; text-transform: none;
}
.field-label b { color: var(--ink-mut); font-weight: 600; }
.field-label span, .field-help {
  color: var(--ink-mut); font-size: 14px; font-weight: 400; line-height: 1.45;
  letter-spacing: 0; text-transform: none;
}

.input, .textarea {
  min-height: 52px; padding: 0 16px;
  font: 400 16px/1.4 var(--sans); color: var(--ink-hi); caret-color: var(--ember);
  background: var(--bg); border: 1px solid var(--hair-2); border-radius: var(--radius-field);
  transition: border-color 160ms var(--ease-std), box-shadow 160ms var(--ease-std);
}
.textarea { padding: 14px 16px; line-height: 1.55; min-height: 132px; }
.textarea-compact { min-height: 104px; }
.avs-textarea { min-height: 220px; }
.input-date { max-width: 240px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-dim); opacity: 1; }
.input:hover, .textarea:hover { border-color: var(--hair-3); }
.input:focus, .textarea:focus, .limit-input:focus {
  border-color: var(--ember); box-shadow: 0 0 0 3px rgba(236, 170, 104, .25); background: var(--bg); outline: none;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .limit-input[aria-invalid="true"] {
  border-color: var(--err); box-shadow: 0 0 0 3px rgba(239, 143, 134, .22);
}
select.input, .editor-grid select.input {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a847b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center / 16px 16px;
}
select.input option { background: var(--surface); color: var(--ink-hi); }

/* medication pickers */
.match-box { gap: 8px; }
.match-add {
  min-height: 52px; padding: 0 18px;
  border: 1px solid var(--hair-2); border-radius: var(--radius-field);
  background: var(--raised); color: var(--ink-hi); font: 600 15px/1 var(--sans);
  transition: border-color 160ms var(--ease-std), background-color 160ms var(--ease-std);
}
.match-add:hover { border-color: var(--hair-3); background: #211f1c; }
/* the menu sits under the 52px field: label 20px + 8px gap + 52px + 6px */
.suggestion-menu {
  top: 86px; gap: 2px; max-height: 312px; padding: 6px;
  border: 1px solid var(--hair-2); border-radius: 16px;
  background: var(--raised);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.suggestion-option {
  min-height: 48px; padding: 8px 12px; gap: 2px; border-radius: 10px;
  color: var(--ink-hi); transition: background-color 120ms var(--ease-std);
}
.suggestion-option:hover, .suggestion-option:focus-visible { background: rgba(232, 230, 227, .07); outline: none; }
.suggestion-option:focus-visible { box-shadow: inset 0 0 0 2px var(--ember); }
.suggestion-option span { font-size: 15px; font-weight: 600; line-height: 1.3; }
.suggestion-option em { font-size: 14px; line-height: 1.3; color: var(--ink-mut); }

.selected-chip-list { gap: 8px; min-height: 0; padding-top: 4px; }
.selected-chip-list:empty { display: none; }
.selected-chip {
  column-gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px;
  border: 1px solid rgba(143, 194, 158, .3); background: rgba(143, 194, 158, .08);
}
.selected-chip.is-custom { border-color: var(--hair-2); background: var(--raised); }
.selected-chip span { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink-hi); }
.selected-chip em { font-size: 14px; line-height: 1.3; color: var(--ink-mut); }
.selected-chip button {
  position: relative; width: 32px; height: 32px;
  background: rgba(232, 230, 227, .06); color: var(--ink);
  font-size: 18px; line-height: 1;
  transition: background-color 160ms var(--ease-std), color 160ms var(--ease-std);
}
.selected-chip button::after { content: ""; position: absolute; inset: -6px; }
.selected-chip button:hover { background: rgba(232, 230, 227, .12); color: var(--ink-hi); }
.treatment-picker > .field-help { margin-top: 2px; }

/* ── 6 Buttons ──────────────────────────────────────────── */
/* primary: V3 pill */
.btn-primary {
  min-height: 52px; padding: 0 24px; gap: 8px; border: 0; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink); box-shadow: none;
  font: 600 16px/1.1 var(--sans);
  transition: background-color 160ms var(--ease-std), transform 120ms var(--ease-std), opacity 160ms var(--ease-std);
}
.btn-primary:hover:not(:disabled) { background: var(--btn-hover); filter: none; transform: none; box-shadow: none; }
.btn-primary:active:not(:disabled) { transform: scale(.98); }
.btn-primary svg { width: 16px; height: 16px; flex: none; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: .5; }

/* secondary: ghost pill */
.btn-secondary {
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-hi); box-shadow: inset 0 0 0 1px var(--hair-2);
  font: 600 15px/1.1 var(--sans); text-align: center;
  transition: background-color 160ms var(--ease-std), box-shadow 160ms var(--ease-std), transform 120ms var(--ease-std);
}
.btn-secondary:hover:not(:disabled) {
  color: var(--ink-hi); background: var(--raised); border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--hair-3); transform: none;
}
.btn-secondary:active:not(:disabled) { transform: scale(.98); }
/* "Save defaults" was a pulsing orange pill; in V3 it is a plain secondary */
.btn-save-defaults {
  animation: none; color: var(--ink-hi); background: transparent;
  border-color: transparent; box-shadow: inset 0 0 0 1px var(--hair-2);
}
.btn-save-defaults:hover:not(:disabled) {
  color: var(--ink-hi); background: var(--raised); border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--hair-3);
}

/* tertiary: quiet outline */
.btn-ghost, .tool-link {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair);
  font: 500 15px/1.1 var(--sans);
  transition: background-color 160ms var(--ease-std), box-shadow 160ms var(--ease-std), color 160ms var(--ease-std);
}
.btn-ghost:hover, .tool-link:hover {
  color: var(--ink-hi); background: var(--raised); border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--hair-3); transform: none;
}
.btn-primary, .btn-secondary, .btn-ghost { white-space: nowrap; }
.btn-compact { min-height: 40px; padding: 0 14px; font-size: 14px; }
@media (max-width: 600px) {
  .btn-compact { width: auto; }
}

/* ── 7 Defaults ─────────────────────────────────────────── */
.defaults-row { gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); }
.defaults-title { margin: 0 0 4px; font: 600 15px/1.3 var(--sans); color: var(--ink-hi); }
.defaults-copy { font-size: 14px; line-height: 1.45; color: var(--ink-mut); max-width: 34em; }
.defaults-actions { gap: 8px; }
.defaults-saved-row {
  flex-wrap: wrap; gap: 8px 16px; margin-top: 0; padding: 10px 10px 10px 16px;
  border: 1px solid rgba(143, 194, 158, .25); border-radius: 14px;
  background: rgba(143, 194, 158, .08); color: var(--ink-hi);
  font-size: 15px; line-height: 1.45;
}
.defaults-saved-row > span { display: inline-flex; align-items: center; gap: 10px; }
.defaults-saved-row > span::before {
  content: ""; width: 18px; height: 18px; flex: none; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.25'/%3E%3Cpath d='M6.2 10.4l2.5 2.4 5-5.4'/%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 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.25'/%3E%3Cpath d='M6.2 10.4l2.5 2.4 5-5.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.defaults-saved-row .btn-ghost { width: auto; flex: none; }
.defaults-panel.is-collapsed { padding-block: var(--card-pad); }
.defaults-panel.is-collapsed .panel-head { margin-bottom: 16px; }

/* ── 8 Monthly limits ───────────────────────────────────── */
.limit-grid { gap: 12px; }
.limit-row {
  grid-template-columns: minmax(0, 1fr) 76px; gap: 12px; min-height: 68px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--raised);
}
.limit-grid .limit-row strong { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink-hi); }
.limit-row em { margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--ink-mut); }
.limit-input {
  min-height: 44px; padding: 0 8px;
  font: 600 17px/1 var(--sans); font-variant-numeric: tabular-nums;
  color: var(--ink-hi); caret-color: var(--ember);
  background: var(--bg); border: 1px solid var(--hair-2); border-radius: 10px;
  transition: border-color 160ms var(--ease-std), box-shadow 160ms var(--ease-std);
}
.limit-input:hover { border-color: var(--hair-3); }
.panel-actions { gap: 8px; margin-top: 20px; justify-content: flex-start; }

/* ── 9 Review card ──────────────────────────────────────── */
.review-panel { position: static; }
@media (min-width: 1024px) { .review-panel { position: sticky; top: calc(var(--nav-h) + 24px); } }

.status-box {
  gap: 12px; min-height: 48px; margin-bottom: 20px; padding: 12px 14px;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--bg);
  color: var(--ink); font-size: 15px; line-height: 1.45;
}
.status-box.is-ready { color: var(--ink-hi); border-color: rgba(143, 194, 158, .25); background: rgba(143, 194, 158, .08); }
.status-box.is-error { color: var(--ink-hi); border-color: rgba(239, 143, 134, .25); background: rgba(239, 143, 134, .08); }
.status-dot { background: var(--ink-mut); box-shadow: none; }
.status-box.is-ready .status-dot { background: var(--ok); box-shadow: none; }
.status-box.is-error .status-dot { background: var(--err); box-shadow: none; }

/* Five counts as a short list: label left, number right. Five tiles can't
   fit a 14px label in a 380px card, so the rows carry the labels in full. */
.summary-grid {
  grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 20px;
  border-top: 1px solid var(--hair);
}
.summary-grid div {
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 8px 0;
  border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: none;
}
.summary-grid strong {
  font: 400 24px/1 var(--serif); font-optical-sizing: auto; font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-hi);
}
.summary-grid span {
  margin: 0; font-size: 15px; font-weight: 400; line-height: 1.3;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}

.export-actions { gap: 12px; margin-top: 0; }
.review-foot { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-mut); overflow-wrap: break-word; }
/* Keeps the filename whole: it drops to its own line as a unit, and only
   breaks at its hyphens if the card is narrower than the name. The span is
   static markup; provider-handoff.js replaces the whole line via textContent. */
.review-foot .review-file { display: inline-block; max-width: 100%; }
.review-foot.is-ok, .inline-status.is-ok, .editor-error.is-ok { color: var(--ok); }
.review-foot.is-warn, .inline-status.is-warn { color: var(--ember); }
.review-foot.is-error, .inline-status.is-error, .editor-error { color: var(--err); }

.handoff-preview-details { margin-top: 12px; font-size: 15px; color: var(--ink); }
.handoff-preview-details summary, .optional-context summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  list-style: none; cursor: pointer;
  color: var(--ink-hi); font-size: 15px; font-weight: 600; line-height: 1.3;
}
.handoff-preview-details summary::-webkit-details-marker, .optional-context summary::-webkit-details-marker { display: none; }
.handoff-preview-details summary::before, .optional-context summary::before {
  content: ""; width: 16px; height: 16px; flex: none; background: var(--ink-mut);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%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 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms var(--ease-std);
}
.handoff-preview-details[open] > summary::before, .optional-context[open] > summary::before { transform: rotate(90deg); }
.handoff-preview-details summary:focus-visible, .optional-context summary:focus-visible { outline-offset: 2px; border-radius: 6px; }

.json-preview {
  min-height: 200px; margin-top: 8px; padding: 16px;
  background: var(--bg); border: 1px solid var(--hair); border-radius: 14px;
  color: var(--ink); font: 400 14px/1.5 var(--mono);
}

/* ── 10 Follow-up ───────────────────────────────────────── */
.copy-boundary-note {
  gap: 4px 12px; margin: 0 0 24px; padding: 14px 16px;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--raised);
  color: var(--ink); font-size: 15px; line-height: 1.55;
}
.copy-boundary-note > span { text-wrap: pretty; }
.copy-boundary-note strong { color: var(--ink-hi); font-weight: 600; }
.copy-boundary-note b {
  padding: 1px 6px; border: 1px solid var(--hair-2); border-radius: 6px; background: var(--bg);
  font: 600 14px/1.4 var(--mono); color: var(--ink-hi); white-space: nowrap;
}
.followup-date-field { max-width: 300px; margin-bottom: 20px; }
.followup-date-field .field-help { margin-top: -2px; }

.optional-context {
  margin-top: 20px; padding: 2px 16px;
  border: 1px solid var(--hair); border-radius: 14px; background: transparent;
}
.optional-context[open] { padding-bottom: 16px; }
.optional-context[open] summary { margin-bottom: 4px; }
.optional-context .handoff-load-grid { margin-top: 16px; gap: 16px; }
.load-choice { gap: 8px; }
.load-divider { color: var(--ink-mut); font-size: 14px; letter-spacing: 0; text-transform: none; }
.load-divider::before, .load-divider::after { background: var(--hair-2); }
.followup-load-actions { margin-top: 16px; }

.inline-status { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-mut); }
.followup-avs-actions { margin-top: 24px; }

.review-notices { gap: 8px; margin-bottom: 16px; }
.review-notice {
  gap: 4px; padding: 14px 16px;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--raised);
  color: var(--ink); font-size: 15px; line-height: 1.5;
}
.review-notice strong { color: var(--ink-hi); font-weight: 600; }

.change-list { border-top: 1px solid var(--hair); }
.change-row { padding: 20px 0; border-bottom: 1px solid var(--hair); }
.change-row.is-ignored { opacity: .6; }
.change-row-head { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; }
.change-symbol {
  width: 36px; height: 36px; margin-top: 0;
  border: 1px solid var(--hair-2); background: var(--raised); color: var(--ink-hi);
  font-size: 17px; font-weight: 600;
}
.change-symbol--stop, .change-symbol--never_started { color: var(--err); border-color: rgba(239, 143, 134, .3); background: rgba(239, 143, 134, .08); }
.change-symbol--continue { color: var(--ok); border-color: rgba(143, 194, 158, .3); background: rgba(143, 194, 158, .08); }
.change-symbol--hold, .change-symbol--review { color: var(--ember); border-color: var(--ember-edge); background: var(--ember-tint); }
.change-primary { gap: 4px; }
.change-primary strong { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink-hi); }
/* The scripts write these two labels in capitals ("DOSE CHANGE", "HIGH").
   CSS shows them in sentence case; the text nodes are unchanged. */
.change-action, .confidence-badge { text-transform: lowercase; letter-spacing: 0; }
.change-action::first-letter, .confidence-badge::first-letter { text-transform: uppercase; }
.change-action { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-hi); }
.confidence-badge {
  display: inline-block; padding: 2px 10px;
  border: 1px solid var(--hair-2); border-radius: 999px;
  color: var(--ink-mut); font-size: 14px; font-weight: 500; line-height: 18px;
}
.confidence-badge--review, .confidence-badge--unresolved { color: var(--ember); border-color: var(--ember-edge); }
.confidence-badge--resolved, .confidence-badge--high { color: var(--ok); border-color: rgba(143, 194, 158, .3); }
.change-summary, .change-effect { font-size: 14px; line-height: 1.45; color: var(--ink-mut); }
.change-row-actions { gap: 8px; }
.needs-help {
  gap: 2px; padding: 12px 14px;
  border: 1px solid var(--ember-edge); border-radius: 12px; background: var(--ember-tint);
  color: var(--ink); font-size: 15px; line-height: 1.5;
}
.needs-help strong { color: var(--ink-hi); font-weight: 600; }
/* the AVS line the change came from; V3 sets no italics */
.source-instruction { font-size: 14px; line-height: 1.5; font-style: normal; color: var(--ink); }
.source-instruction::before { color: var(--ink-mut); }
.change-editor { border-top-color: var(--hair); }
.editor-grid { gap: 16px; }
.editor-actions { gap: 8px; margin-top: 16px; }
.editor-error { font-size: 14px; }
.add-manual-change { margin-top: 16px; }

.review-subsection { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); }
.review-subsection-head { gap: 12px 16px; }
.review-subsection-head .field-help { margin-top: 4px; }

.apply-bar { gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); }
.apply-bar > div { gap: 4px; }
.apply-bar strong { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink-hi); }
.apply-bar span { font-size: 14px; line-height: 1.45; color: var(--ink-mut); }

.followup-export-panel .status-box { margin-bottom: 20px; }
.followup-export-actions { gap: 12px; }
@media (max-width: 600px) { .followup-export-actions { grid-template-columns: minmax(0, 1fr); } }
.review-subsection-head > .btn-secondary { flex: none; }

/* ── 11 Temporary treatment rows ────────────────────────── */
.temporary-treatment-list { gap: 12px; margin-top: 16px; }
.temporary-treatment-row { padding: 16px; border: 1px solid var(--hair); border-radius: 16px; background: var(--raised); }
.temporary-treatment-row-head { gap: 12px; margin-bottom: 16px; }
.temporary-treatment-row-head strong { font-size: 15px; font-weight: 600; color: var(--ink-hi); }
.temporary-treatment-grid { gap: 16px; }
.temporary-treatment-row .input-date { max-width: none; }