:root {
  --ink: #1a1d23;
  --ink-soft: #5b6270;
  --line: #e2e5ea;
  --surface: #ffffff;
  --bg: #f7f8fa;
  --accent: #2f6fed;
  --accent-ink: #ffffff;
  --good: #1c8a4b;
  --warn: #b3271e;
  --radius: 10px;
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.4rem;
  --space-4: 2.2rem;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  line-height: 1.5;
}

main {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) 6rem;
}

/* Wider screens: use the width instead of forcing a dense single-column wall of text.
   Session cards go into a grid so each card's text still wraps at a comfortable reading
   width -- widening `main` alone would just stretch paragraphs edge-to-edge, which is worse,
   not better. See docs/local-first-architecture-spec.md's UX philosophy + the old app's own
   resolution of this exact complaint (git history: "Never form a grid column narrower than
   comfortable reading width"). */
@media (min-width: 900px) {
  main { max-width: min(95vw, 100rem); }

  #sessions-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-3);
    align-items: start;
  }
  #sessions-list > * { min-width: 0; }

  /* Two independent launch panels on the Dashboard -- nothing here is referenced between
     the two, so this is purely a scroll-reduction overview layout, no sticky needed. */
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
  }
  .dashboard-grid > * { min-width: 0; }

  /* Main content + a persistent reference/status sidebar. The sidebar stays pinned in the
     viewport while the main column scrolls -- side-by-side alone isn't enough when one
     column is taller than the other; without `sticky` the sidebar just scrolls out of view
     once the user gets past its own height. Used wherever the user is likely to look back
     and forth between the two (Pathway composition while generating Sessions, Assessment
     History while adjusting the Roster). */
  .with-sidebar {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-3);
    align-items: start;
  }
  .with-sidebar > .main-column { order: 1; min-width: 0; }
  .with-sidebar > .sidebar {
    order: 2;
    position: sticky;
    top: var(--space-3);
    min-width: 0;
  }

  /* Session focus view (Evaluation 2): the reference column reads more naturally on the left
     with the working form on the right, so mirror the default ordering. Unlike the default
     pattern above, here the "sidebar" (Lesson Plan) is the long side and the "main column"
     (debrief form) is the short one -- sticky positioning wouldn't help, since the tall side
     just scrolls past the viewport instead of ever sticking, dragging the whole page down to
     the length of the Lesson Plan text while the debrief form and page sidebar sit stranded
     next to thousands of pixels of empty space below them. Cap the reference column to the
     debrief form's own height instead and let it scroll independently within that frame.
     That cap is set in JS (see `focusSession` in series.js), not here: a grid item with
     `align-items: stretch` still contributes its own full content height to auto track sizing
     even with `min-height: 0` and a percentage `max-height` -- the row just grows to fit the
     reference column instead of shrinking it, since a percentage height against an
     auto-sized track has nothing definite to resolve against. There's no pure-CSS way to say
     "as tall as my sibling's content, not mine" here, so JS measures `.main-column` and writes
     the result to `--plan-pane-height`. */
  .with-sidebar.sidebar-left {
    grid-template-columns: 320px 1fr;
  }
  .with-sidebar.sidebar-left > .sidebar {
    order: 1;
    position: static;
    align-self: start;
    max-height: var(--plan-pane-height, 80vh);
    overflow-y: auto;
  }
  .with-sidebar.sidebar-left > .main-column { order: 2; }
  /* The session card has a THIRD .tab-plan sibling besides the plan (.sidebar) and debrief
     form (.main-column): #supplemental-slot (the "original plan" / "draft supplemental"
     banner, see renderSupplementalSlot in series.js). It gets no order of its own, so without
     this it's an uncontrolled third grid item -- with only 2 explicit column tracks, CSS
     grid's auto-placement puts it in row 1 col 1, which bumps .sidebar into col 2 (the wide
     track meant for the debrief form) and wraps .main-column onto row 2 col 1 (the narrow
     track), i.e. the debrief form renders narrow and BELOW the plan text instead of beside
     it. Span it across both columns so it reads as a banner above the two-column pair
     instead of contending for one of their cells -- it has order 0 (lower than .sidebar's 1
     and .main-column's 2), so it still lands in row 1, above them, when it has content. */
  .with-sidebar.sidebar-left > .tab-plan:not(.sidebar):not(.main-column) { grid-column: 1 / -1; }
}

/* Focusing one Session for active work (Evaluation 2): its siblings aren't relevant to that
   work, so they're hidden rather than left competing for attention in the grid -- see
   feedback_isolate_selected_item memory. Grid auto-fit collapses to one column on its own
   once siblings are display:none, so no extra width rule is needed here. */
#sessions-list.session-focused > .session-card { display: none; }
#sessions-list.session-focused > .session-card.session-active { display: block; }

/* A titled card gets a subtitle, not just a bare heading -- the user shouldn't have to guess
   what a section is for from its name alone (e.g. "Series" vs. "Classes"). */
.section-subtitle { color: var(--ink-soft); font-size: 0.85rem; margin-top: -0.4rem; }

h1 { font-size: 1.6rem; margin: 0 0 var(--space-1); }
h2 { font-size: 1.1rem; margin: 0 0 var(--space-2); color: var(--ink); }
h3 { font-size: 0.95rem; margin: 0 0 var(--space-1); color: var(--ink-soft); font-weight: 600; }
p { margin: 0 0 var(--space-2); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { color: var(--ink); font-weight: 600; }

section { margin-bottom: var(--space-4); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.row-list { display: flex; flex-direction: column; gap: var(--space-1); }
.confirmed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.confirmed-row .meta { color: var(--ink-soft); font-size: 0.85rem; }

.inline-input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--surface);
  color: var(--ink);
}
.inline-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.empty-state {
  text-align: center;
  padding: var(--space-4) var(--space-3);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.empty-state .prompt { color: var(--ink); font-weight: 600; margin-bottom: var(--space-1); }

button, .btn {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.9rem;
}
button.primary, .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
button:disabled { opacity: 0.5; cursor: default; }

.wizard-step { max-width: 26rem; }
.wizard-step .options { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.wizard-step .option {
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
}
.wizard-step .option:hover, .wizard-step .option:focus { border-color: var(--accent); outline: none; }
.wizard-step .option.selected { border-color: var(--accent); background: #eef3ff; }
.actions { display: flex; justify-content: space-between; gap: var(--space-2); }

.topic-picker-list { max-height: 16rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.topic-picker-list .topic-row {
  padding: var(--space-2);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.topic-picker-list .topic-row:last-child { border-bottom: none; }
.topic-picker-list .topic-row:hover, .topic-picker-list .topic-row:focus { background: #eef3ff; outline: none; }
.topic-picker-list .topic-row.selected { cursor: default; background: #f5f5f5; font-weight: 600; }
.topic-picker-list .topic-row.selected:hover { background: #f5f5f5; }
.topic-picker-list .topic-row .unit { color: var(--ink-soft); font-size: 0.8rem; }

.session-card { border-left: 3px solid var(--line); }
.session-card.has-plan { border-left-color: var(--good); }

/* Objectives is the always-visible at-a-glance preview; every other section (Materials, each
   5E phase, Pathway notes, etc.) is its own disclosure -- the teacher picks which section(s)
   to read instead of an all-or-nothing "show full plan" wall of text. */
.plan-expand { margin-top: var(--space-2); }
.plan-expand summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.3rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}
.plan-expand summary::-webkit-details-marker { display: none; }
.plan-expand summary::after { content: "▸"; display: inline-block; }
.plan-expand[open] summary::after { content: "▾"; }
.plan-expand summary:hover { text-decoration: underline; }

/* Carrying out a plan is a single-Session act -- see the "single vs. Compare" comment in
   series.js. Compare sits apart (pushed right) since it's a different kind of action from
   picking which Session to work on. */
.session-picker { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.session-tab {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.85rem;
}
.session-tab.selected { border-color: var(--accent); background: #eef3ff; color: var(--ink); font-weight: 600; }
.session-tab.compare-tab { margin-left: auto; }
.picker-disabled { pointer-events: none; opacity: 0.5; }

/* Card-level tabs (Lesson Plan vs. Attendance within one Session) -- same look as the
   Session picker's tabs above, but a distinct class since they pick between two views of one
   Session rather than between Sessions. */
.card-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); }
.card-tab {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.85rem;
}
.card-tab.selected { border-color: var(--accent); background: #eef3ff; color: var(--ink); font-weight: 600; }

.sessions-list-header {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.sessions-list-header button { font-size: 0.85rem; }

.plan-field { margin-bottom: var(--space-2); }
.plan-field .field-label { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 2px; }

/* Evaluation 2 is a sequence of small decisions (objectives, 5E review, outcome, checklist,
   notes) rather than one long form -- a divider plus generous spacing between each keeps them
   visually distinct so the page doesn't read as crowded. */
.eval-section { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.eval-section:last-of-type { border-bottom: none; margin-bottom: var(--space-2); padding-bottom: 0; }
details.eval-section { padding-bottom: var(--space-2); }
details.eval-section[open] { padding-bottom: var(--space-3); }

/* 5E segment headings (Engage/Explore/Explain/Elaborate) on the Evaluation 2 form -- these are
   section headings for everything underneath, so they need to outrank .field-label, not match
   it. */
.segment-heading { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }

/* Tag explanations: hidden by default behind a small "?" popover instead of a permanently-shown
   caption under every tag -- that was the biggest source of clutter on this page. */
.tag-row { position: relative; }
.tag-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.3rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}
.tag-info-btn:hover, .tag-info-btn:focus { border-color: var(--accent); color: var(--accent); }
.tag-popover {
  position: absolute;
  z-index: 20;
  top: 1.6rem;
  left: 1.6rem;
  max-width: 16rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: 0.8rem;
  color: var(--ink);
}
.tag-popover[hidden] { display: none; }
.plan-field .field-value { cursor: text; padding: 4px; border-radius: 4px; }
.plan-field .field-value:hover { background: #eef3ff; }
.plan-field .field-value.locked { cursor: default; }
.plan-field .field-value.locked:hover { background: none; }
.plan-field .field-value .field-line { margin-bottom: 0.35rem; }
.plan-field .field-value .field-line:last-child { margin-bottom: 0; }
.plan-field textarea {
  width: 100%;
  min-height: 4rem;
  padding: var(--space-1);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  overflow-y: hidden; /* height is set to scrollHeight in JS, so it grows instead of scrolling */
  resize: none;
}
.pathway-1, .pathway-2, .pathway-3 { border-left: 3px solid var(--accent); padding-left: var(--space-2); }

.error-banner {
  background: #fdecea;
  border: 1px solid var(--warn);
  color: var(--warn);
  padding: var(--space-2);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
}

.muted { color: var(--ink-soft); font-size: 0.85rem; }

/* Informational, not an error -- lighter tint than .error-banner so it doesn't read as
   something wrong, just as a "you're looking at history, not now" orientation cue. */
.week-history-note {
  background: #eef3ff;
  border: 1px solid var(--accent);
  color: var(--ink);
  padding: var(--space-2);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}

.pathway-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Pacing: the curriculum's recommended duration (anchor) vs the sessions the teacher has
   actually planned (progress counter), stamped server-side on every generated Lesson Plan.
   .pacing-badge = chip on the Session card header; .pacing-banner = readout at the top of
   the Lesson Plan. Status tints match the tone: behind = warn-ish, on pace = green,
   ahead = accent, unknown = neutral. */
.pacing-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.pacing-behind { background: #fdeceb; color: var(--warn); }

/* "Struggling On" mastery panel (roster.js) -- same warn-tint chip language as .pacing-behind,
   its own class since the meaning (a student's repeat-flagged standard) is unrelated to pacing. */
.mastery-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  background: #fdeceb;
  color: var(--warn);
}
/* Same green-tint language as .pacing-onpace below -- a resolved flag is settled, not alarming. */
.mastery-resolved-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  background: #eaf6ec;
  color: #1e7a34;
}
.pacing-onpace { background: #eaf6ec; color: #1e7a34; }
.pacing-ahead { background: #eef3ff; color: var(--accent); }
.pacing-unknown { background: #f0f1f4; color: var(--ink-soft); }

/* Coverage panel (series.js, coverage.js) -- same tint language as pacing/mastery above:
   green = done, accent = in progress, neutral = not begun. Covered is the only "settled" state;
   Touched and Planned are both still-open, so Touched borrows the mastery-badge warn tint (needs
   another look) while Planned stays the same accent blue as "in flight" elsewhere. */
.coverage-status-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
}
.coverage-status-notStarted { background: #f0f1f4; color: var(--ink-soft); }
.coverage-status-planned { background: #eef3ff; color: var(--accent); }
.coverage-status-touched { background: #fdeceb; color: var(--warn); }
.coverage-status-covered { background: #eaf6ec; color: #1e7a34; }

.pacing-banner {
  background: #f6f7f9;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-soft);
  border-radius: var(--radius);
  color: var(--ink);
  padding: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
}
.pacing-banner.pacing-behind { border-left-color: var(--warn); background: #fdf5f4; }
.pacing-banner.pacing-onpace { border-left-color: #1e7a34; background: #f2faf3; }
.pacing-banner.pacing-ahead { border-left-color: var(--accent); background: #f3f7ff; }
.pacing-banner.pacing-unknown { border-left-color: var(--ink-soft); }

.remove-equipment-btn {
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
}
.remove-equipment-btn:hover { color: var(--warn); }

#debrief-disruption-note,
#debrief-resource-note {
  width: 100%;
  min-height: 3rem;
  margin-top: 0.4rem;
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
}

/* Report export: the printable document is built off-screen and only shown to the print
   engine -- everything else in the app is hidden for the duration of window.print(). */
#report-print-area { display: none; }
/* Each Session/Evaluation gets its own page (confirmed as wanted, not the bug) -- the actual
   bug was page 1 being left mostly blank, not sections starting fresh pages. */
#report-print-area .report-session { margin-bottom: 1.4rem; page-break-after: always; }
#report-print-area .report-session:last-child { page-break-after: auto; }
/* Keep a heading from being orphaned alone at the bottom of a page -- but a Session's full
   content (every Lesson Plan field plus its Debrief summary) routinely runs well past one
   printed page, so it must NOT be marked page-break-inside: avoid on the whole .report-session:
   an unsatisfiable "avoid" makes Chrome push the entire section to the next page rather than
   split it, leaving whatever page it was on mostly blank. Only the heading needs protecting. */
#report-print-area h2 { border-bottom: 1px solid #000; padding-bottom: 0.2rem; page-break-after: avoid; }
#report-print-area h3 { margin-top: 0.6rem; page-break-after: avoid; }

/* Title page: previously just a title + one line of text sitting at the top of an otherwise
   blank page -- vertically centering the block fills that space intentionally instead of
   leaving it looking like wasted/broken layout. 100vh maps to the printable page's content
   box in Chrome's print engine, not the screen viewport, since this only ever renders under
   @media print. */
#report-print-area .report-title-page {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  page-break-after: always;
}

/* Worksheet export (worksheet.js): same off-screen-until-print pattern as #report-print-area
   above, just a second print target -- only one of the two is ever populated for a given
   print action. */
#worksheet-print-area { display: none; }

/* Our own repeating header/footer, printed on every page -- genuinely different from the
   browser's own header/footer (which this doesn't replace or suppress -- that's still a
   print-dialog checkbox the teacher has to uncheck themselves, see below). This is real
   document content the app puts there on purpose: identifying context (class/subject/Pathway,
   date), so a shuffled stack of printed pages can be regrouped by document even without a page
   number (which Chrome's print engine has no CSS API to supply -- see the @page comment below
   for why that's a separate, harder, deferred problem).
   `position: fixed` was tried first and dropped: it repeated correctly on page 1 but drifted on
   page 2+ (a known Chrome print-engine issue -- fixed elements aren't reliably re-pinned per
   physical page past the first one), so the header/footer ended up overlapping real content on
   every page after the first. `<thead>`/`<tfoot>` inside a real `<table>` is the replacement:
   browsers (Chrome included) repeat a table's head/foot rows on every physical page a table
   breaks across natively, as part of table pagination itself -- not a position hack, so it
   doesn't degrade after page 1. report.js/worksheet.js wrap their whole print document in
   `<table class="print-page-table"><thead>/<tfoot>/<tbody>`. */
.print-page-table {
  width: 100%;
  border-collapse: collapse;
}
.print-header {
  font-size: 0.75rem;
  color: #555;
  text-align: left;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1.5mm;
}
.print-footer {
  font-size: 0.7rem;
  color: #777;
  text-align: left;
  border-top: 1px solid #ccc;
  padding-top: 1.5mm;
}
/* thead/tfoot repeat on every page; give the tbody's cell breathing room from both so repeated
   content never touches the document body directly. */
.print-page-table > tbody > tr > td {
  padding-top: 4mm;
  padding-bottom: 4mm;
}

@media print {
  body > *:not(#report-print-area):not(#worksheet-print-area) { display: none !important; }
  #report-print-area { display: block !important; }
  #worksheet-print-area { display: block !important; }
  /* Shrinks (not removes) the browser's own header/footer margin allowance. Chrome's
     "Headers and footers" URL/date/page-number strip is a print-dialog checkbox, not
     something a page's CSS can turn off -- there is no CSS API for it. size: auto keeps
     the user's chosen paper size/orientation instead of forcing one. No longer needs to be
     oversized to reserve room for a position: fixed overlay -- the table's own thead/tfoot rows
     occupy ordinary page space now. */
  @page {
    size: auto;
    margin: 14mm 12mm 14mm 12mm;
  }
}

/* Supplemental plan surface (see series.js): the banner is informational, not an error --
   same tone as .week-history-note but inline-compact (it sits inside a Session card or
   right under an Evaluation 2 status line, where a full-width note would be too loud). */
.supplemental-banner {
  background: #eef3ff;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0 var(--space-2) var(--space-2);
  margin-top: var(--space-2);
}

.supplemental-draft {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin-top: var(--space-2);
}

/* The "View original plan" disclosure on a Session whose operative plan is a supplemental. */
.supplemental-original summary {
  color: var(--ink);
  font-weight: 600;
}

/* Session-meta line on the Session card: the one explicit per-Session "taught" fact,
   independent of E2 and attendance (see renderSessionMeta). */
.session-meta { margin-top: 0.25rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
}

.chip-toggle { cursor: pointer; user-select: none; }
.chip-toggle input { margin: 0; cursor: pointer; }

.chip-evaluated {
  background: #e9f7ee;
  border-color: var(--good);
  color: var(--good);
}

/* Printed report: the retained original plan when a supplemental was used instead. */
.report-original-plan {
  border: 1px dashed var(--line);
  padding: 0 var(--space-2);
  margin: var(--space-2) 0;
}