/* Design tokens. One named source of truth per recurring visual decision,
   and dark-mode values that are first-class rather than a growing list of
   repairs bolted onto hardcoded light colors — which is precisely how the
   forest green ended up written out thirty times across four templates,
   each with its own dark-mode patch beside it.

   Brand green says "Trellis" and "complete". Action blue says "this is
   interactive". Making one color do both jobs is what makes a system hard
   to read, so they stay separate. */
:root {
  --tr-brand: #2f5d3f;          /* deep forest: brand and structural accent */
  --tr-brand-strong: #2e6b4f;   /* the same family, one step brighter */
  --tr-brand-ink: #2f5d3f;      /* brand-colored text on a light surface */
  --tr-brand-surface: #eef4f0;  /* tinted fill behind brand-marked content */
  --tr-brand-surface-soft: #f4f8f5;
  --tr-brand-border: #cfe0d5;
  --tr-rule: #cbd5cf;           /* printed rules and quiet dividers */
}
[data-bs-theme="dark"] {
  --tr-brand: #8fbfa0;
  --tr-brand-strong: #8fbfa0;
  --tr-brand-ink: #b9d8c6;
  --tr-brand-surface: #23312a;
  --tr-brand-surface-soft: #1c2620;
  --tr-brand-border: #35493c;
  --tr-rule: #3a4741;
}

.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 1px solid #adb5bd;
  color: #6c757d;
  background: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: text-top;
  user-select: none;
}
.help-tip:hover,
.help-tip:focus {
  border-color: #0d6efd;
  color: #0d6efd;
}
/* Colored, obviously-clickable "learn how" pills for parents who don't
   hunt for grey ? marks — beta feedback from a self-described
   not-good-with-computers mom. */
.help-chip {
  display: inline-block;
  padding: .05rem .55rem;
  border-radius: 999px;
  background: #e7f1ff;
  border: 1px solid #b6d4fe;
  color: #0a58ca;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
.help-chip:hover,
.help-chip:focus {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}
/* Progress bars sweep up to their value on load — progress feels earned
   rather than just printed. Opt-in via class; reduced-motion disables. */
.progress-sweep {
  transform-origin: left;
  animation: progress-sweep .6s cubic-bezier(.22, 1, .36, 1);
}
@keyframes progress-sweep { from { transform: scaleX(0); } }
/* A finished bar reads differently from a nearly-finished one. */
.progress-sweep.is-full { filter: saturate(1.15) brightness(1.05); }
@media (prefers-reduced-motion: reduce) {
  .progress-sweep { animation: none; }
}
.alert.auto-dismiss {
  transition: opacity .4s ease;
}
.alert.auto-dismiss.fade-out {
  opacity: 0;
}
/* Required-field cue, site-wide convention: a box an entry point expects
   filled in gets a calm gray ring — never error-red. Fields marked
   `required` pick it up automatically; .required-cue opts in fields that
   should have a value but legitimately submit empty (visual only — no
   browser blocking). The inset shadow doubles the 1px border with zero
   layout shift, and :not(:focus) steps aside so Bootstrap's focus border
   and ring stay untouched. .cue-quiet exempts in-place editors of data
   that already exists (inline row edits on list pages) — a ring on thirty
   filled-in boxes reads as "something needs fixing" when nothing does. */
input.form-control[required]:not(:focus):not(.cue-quiet),
select.form-select[required]:not(:focus):not(.cue-quiet),
textarea.form-control[required]:not(:focus):not(.cue-quiet),
.required-cue:not(:focus) {
  border-color: #adb5bd;
  box-shadow: inset 0 0 0 1px #adb5bd;
}
/* Same convention for pick-at-least-one widget groups (child checkboxes,
   task assignees) where `required` can't express the rule — matches the
   .tool-choice outline on the Import Curriculum page. */
.required-cue-group {
  border: 2px solid #e3e7eb;
  border-radius: 8px;
  padding: .5rem .75rem;
}
/* Bootstrap's default action colors land just below WCAG AA when they
   sit on Trellis's light-gray canvas. Keep one accessible light-theme
   palette for links and outline actions instead of fixing each screen. */
html:not([data-bs-theme="dark"]) {
  --bs-link-color: #0a58ca;
  --bs-link-color-rgb: 10, 88, 202;
}
html:not([data-bs-theme="dark"]) .btn-outline-secondary {
  --bs-btn-color: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-bg: #495057;
  --bs-btn-hover-border-color: #495057;
  --bs-btn-active-bg: #495057;
  --bs-btn-active-border-color: #495057;
  --bs-btn-disabled-color: #495057;
  --bs-btn-disabled-border-color: #495057;
}
html:not([data-bs-theme="dark"]) .text-success {
  color: #146c43 !important;
}
:focus-visible { outline: 3px solid #fd7e14; outline-offset: 2px; }
@media (max-width: 700px) {
  .navbar { margin-bottom: 1rem !important; }
  .navbar .container-fluid, main.container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
  h1.h2, .h2 { font-size: 1.35rem; }
  .card-body { padding: .85rem; }
  .btn { white-space: nowrap; }
  table.table { font-size: .88rem; }
}
/* ------------------------------------------------------------------
   Dark mode. Bootstrap 5.3's data-bs-theme carries its own components;
   everything below is the short list of hardcoded whites/grays from
   inline template styles, kept in this ONE home so light mode ships
   zero changes. Rule of thumb: readable contrast, kid and subject
   colors still pop, nothing pure #000. var(--bs-*) values are
   preferred so the print flip at the end reverts them for free.
   ------------------------------------------------------------------ */
/* Utility backgrounds: .bg-white cards and .bg-light headers are
   everywhere; two rules retint them all instead of editing templates. */
[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
/* Bootstrap's .table-light band/header rows stay paper-white inside dark
   tables — stark bars ("too much for my eyes" — Ryan, transcript editor).
   Soften them to the theme's grey; print sheets use their own classes
   and never inherit this. */
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  /* Inside a .table-striped, Bootstrap swaps in the STATE colors, and
     .table-light's own striped/hover/active values are all #000 —
     black on the dark band, 1.57:1, which is what the Gradebook's All
     Work section headings were reading (axe sweep, 2026-09-01). */
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-hover-color: var(--bs-body-color);
}
/* Base widgets: help marks and the required-field cue grays. */
[data-bs-theme="dark"] .help-tip { background: var(--bs-body-bg); border-color: #6c757d; color: #adb5bd; }
[data-bs-theme="dark"] .help-tip:hover,
[data-bs-theme="dark"] .help-tip:focus { border-color: #6ea8fe; color: #6ea8fe; }
[data-bs-theme="dark"] .help-chip { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); color: var(--bs-link-color); }
[data-bs-theme="dark"] .help-chip:hover,
[data-bs-theme="dark"] .help-chip:focus { background: #0d6efd; border-color: #0d6efd; color: #fff; }
[data-bs-theme="dark"] input.form-control[required]:not(:focus):not(.cue-quiet),
[data-bs-theme="dark"] select.form-select[required]:not(:focus):not(.cue-quiet),
[data-bs-theme="dark"] textarea.form-control[required]:not(:focus):not(.cue-quiet),
[data-bs-theme="dark"] .required-cue:not(:focus) { border-color: #6c757d; box-shadow: inset 0 0 0 1px #6c757d; }
[data-bs-theme="dark"] .required-cue-group { border-color: var(--bs-border-color); }
/* Calendar board: white cells, gray sticky headers, break/today tints. */
[data-bs-theme="dark"] .board-view-tabs { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .board-view-tabs a { border-right-color: var(--bs-border-color); color: var(--bs-body-color); }
[data-bs-theme="dark"] .board-view-tabs a.active,
[data-bs-theme="dark"] .kid-view-tabs a.active,
[data-bs-theme="dark"] .step-number { background: var(--bs-body-color); color: var(--bs-body-bg); }
[data-bs-theme="dark"] .assignment-board-table th,
[data-bs-theme="dark"] .assignment-board-table td { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .assignment-board-table th,
[data-bs-theme="dark"] .child-header,
[data-bs-theme="dark"] .child-cell,
[data-bs-theme="dark"] .week-head-cell,
[data-bs-theme="dark"] .week-child-cell,
[data-bs-theme="dark"] .month-day-header,
[data-bs-theme="dark"] details.board-tool[open] > summary { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .board-cell,
[data-bs-theme="dark"] .month-day,
[data-bs-theme="dark"] .month-week,
[data-bs-theme="dark"] .week-board,
[data-bs-theme="dark"] details.board-tool,
[data-bs-theme="dark"] .catch-up-row,
[data-bs-theme="dark"] .edit-drawer { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .month-day-header,
[data-bs-theme="dark"] details.board-tool[open] > summary { border-bottom-color: var(--bs-border-color); }
[data-bs-theme="dark"] .unscheduled-col,
[data-bs-theme="dark"] .unscheduled-cell,
[data-bs-theme="dark"] .week-unscheduled-cell { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .month-day.outside-month { background: #1b1e21; color: #7a828a; }
[data-bs-theme="dark"] .board-cell.is-today,
[data-bs-theme="dark"] .date-drop-target.is-today,
[data-bs-theme="dark"] .month-day.is-today .month-day-header { background: #3a3113; }
[data-bs-theme="dark"] .month-day.is-today .month-day-header { border-bottom-color: #5c4d1c; }
[data-bs-theme="dark"] .date-drop-target.is-today .fw-bold,
[data-bs-theme="dark"] .month-day.is-today .month-day-header .fw-bold { color: #6ea8fe; }
[data-bs-theme="dark"] .month-day.is-break,
[data-bs-theme="dark"] .board-cell.is-break,
[data-bs-theme="dark"] .date-drop-target.is-break { background: #34231a; }
[data-bs-theme="dark"] .board-cell.drag-over,
[data-bs-theme="dark"] .date-drop-target.drag-over,
[data-bs-theme="dark"] .month-day.drag-over,
[data-bs-theme="dark"] .panel-drop-target.drag-over { background: #16283f; }
/* Assignment cards are the Accession card (2026-08-16): their ground,
   hairline and every ink value are theme tokens, so their night colors
   live with their rules in css/assignment_board.css and the kid
   dashboard's in css/family_view.css. */
[data-bs-theme="dark"] .week-cell { border-right-color: var(--bs-border-color); }
[data-bs-theme="dark"] .week-row { border-bottom-color: #565e66; }
[data-bs-theme="dark"] .board-toast { background: #f8f9fa; color: #212529; }
[data-bs-theme="dark"] .calendar-event { background: #182c47; border-color: #2b4d7c; color: #a9c8ef; }
[data-bs-theme="dark"] .calendar-event.school-day { background: #17301c; border-color: #2c5535; color: #9fd3ab; }
[data-bs-theme="dark"] .calendar-event.time-off { background: #362a14; border-color: #5c4a24; color: #dcbf85; }
[data-bs-theme="dark"] .calendar-event.todo-done { background: #2b3035; border-color: #495057; color: #868e96; }
/* Kid dashboard: sticky topbar, day cards, tabs, checklist and meters. */
[data-bs-theme="dark"] .kid-topbar { background: rgba(33, 37, 41, .96); border-bottom-color: var(--bs-border-color); }
[data-bs-theme="dark"] .kid-summary-card,
[data-bs-theme="dark"] .kid-day,
[data-bs-theme="dark"] .kid-view-tabs,
[data-bs-theme="dark"] .monthly-checklist-panel { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .kid-view-tabs a { border-right-color: var(--bs-border-color); color: var(--bs-body-color); }
[data-bs-theme="dark"] .kid-day-header { background: var(--bs-tertiary-bg); border-bottom-color: var(--bs-border-color); }
[data-bs-theme="dark"] .kid-day.outside-month { background: #1b1e21; color: #7a828a; }
[data-bs-theme="dark"] .kid-day.is-today .kid-day-header { background: #16283f; }
[data-bs-theme="dark"] .kid-day.day-clear .kid-day-header { background: #1a2b1e; }
[data-bs-theme="dark"] .kid-day-count { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .kid-progress-track,
[data-bs-theme="dark"] .checklist-pace-track { background: #3a4148; }
[data-bs-theme="dark"] .checklist-pace-marker { background: #adb5bd; }
[data-bs-theme="dark"] .kid-all-done,
[data-bs-theme="dark"] .streak-chip { background: #1c3a24; border-color: #2c5535; color: #8fd19e; }
/* The compact timer — recolor its label, the bottom expand strip, and
   the minute chips here or they sit at ~3:1 on the dark timer panel. */
[data-bs-theme="dark"] .focus-adjust { color: #8fd19e; border-top-color: #2c5535; }
[data-bs-theme="dark"] .focus-adjust:hover { background: #1c3a24; }
[data-bs-theme="dark"] .focus-plan { color: #cfe8d4; }
[data-bs-theme="dark"] .focus-timer .btn-outline-success { color: #8fd19e; border-color: #4a6b4e; }
[data-bs-theme="dark"] .kid-milestone { background: #16283f; border-color: #2b4d7c; color: #a9c8ef; }
[data-bs-theme="dark"] .monthly-checklist-item,
[data-bs-theme="dark"] .monthly-item { border-bottom-color: var(--bs-border-color); }
[data-bs-theme="dark"] .monthly-checklist-item.item-open,
[data-bs-theme="dark"] .monthly-item.item-open { background: #32291a; }
[data-bs-theme="dark"] .kid-celebration-card { background: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .focus-timer { background: #17301c; border-color: #2c5535; }
[data-bs-theme="dark"] .focus-bullets span { background: #2b3a2d; border-color: #4a6b4e; }
[data-bs-theme="dark"] .focus-bullets span.done { background: #198754; }
[data-bs-theme="dark"] .focus-break { color: #e0b45c; }
/* Import curriculum: step cards, tool-choice chooser, column chips. */
[data-bs-theme="dark"] .step-card,
[data-bs-theme="dark"] .tool-choice { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .tool-choice:hover { border-color: #4d6a8f; }
[data-bs-theme="dark"] .tool-choice.is-active { border-color: #0d6efd; background: #16283f; }
[data-bs-theme="dark"] .column-chip { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
/* Learning log suggestion chips. */
[data-bs-theme="dark"] .suggestion-chip { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
/* Compliance walkthrough steps. */
[data-bs-theme="dark"] .cmp-step { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .cmp-num { color: #7cc09a; }
[data-bs-theme="dark"] .cmp-cite a { color: var(--bs-secondary-color); }
/* Task spreadsheet: sticky toolbar/headers and row-state tints. */
[data-bs-theme="dark"] .sheet-toolbar { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .sheet-table th { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .sheet-table input.cell:focus,
[data-bs-theme="dark"] .sheet-table select.cell:focus { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .sheet-table tr.dirty { background: #32291a; }
[data-bs-theme="dark"] .sheet-table tr.row-error { background: #3a1e21; }
/* Weekly checklist (screen view; printing flips back to paper below). */
[data-bs-theme="dark"] .wk-day { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .wk-box { border-color: var(--bs-secondary-color); }
/* Year at a Glance mini-calendars: the same sage/rose day language in
   night inks; its own @media print rules re-force the paper palette. */
[data-bs-theme="dark"] .mini-calendar .dow,
[data-bs-theme="dark"] .mini-calendar .outside { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .mini-calendar .outside { color: #6c757d; }
[data-bs-theme="dark"] .mini-calendar .school { background: #5a614f; }
[data-bs-theme="dark"] .mini-calendar .break { background: #5c3a30; }
/* The help guides are drawn on paper-white throughout — darkening them
   would be a full repaint, so they stay a light sheet inside the dark
   chrome (same treatment as the letters and the Overwhelmed page). That
   island now lives in css/light_sheet.css, linked above: restating a
   token list is the whole job, and half of it was missing here. */
/* Printing is paper: whatever the theme, the light palette wins. The
   var(--bs-*) overrides above revert with it; pages with print tints
   (Year at a Glance) re-force their colors inside @media print. */
@media print {
  /* Ryan: "This is bad, when you hit print" — the browser stamps the
     date, tab title, and URL into the @page margin box of EVERY print,
     including official documents (the transcript printed its own
     ?omit= query string onto the page a PSEO office reads). Zeroing
     the page margin removes the box those stamps are drawn in; the
     body carries the margin instead. Pages tuned to other margins
     override the padding in their own print rules. */
  @page { margin: 0; }
  body { padding: 0.5in 0.6in; }
  /* The site footer (Terms, Privacy, "Operated by...") is web chrome,
     not document content — it printed at the bottom of the Year at a
     Glance ("Get rid of these" — Ryan, 2026-07-29), and it has no more
     business on a transcript. Every print, gone. */
  footer { display: none !important; }
  [data-bs-theme="dark"] {
    color-scheme: light;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, .75);
    --bs-secondary-bg: #e9ecef;
    --bs-tertiary-color: rgba(33, 37, 41, .5);
    --bs-tertiary-bg: #fff; /* PR-022 rule 3: paper is white; body.bg-light paints with this. */
    --bs-border-color: #dee2e6;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
  }
}