/* BF-040 action language: blue moves work forward; neutral controls reverse
   or refine it. Green remains a completed/success state, red destructive,
   and forest/sage structural identity. */
:root {
  --tr-action: #0a58ca;
  --tr-action-rgb: 10, 88, 202;
  --tr-action-hover: #084298;
  --tr-action-active: #073b87;
  --tr-action-contrast: #fff;
}

/* Accession card language (Card Tournament winner, 2026-08-16). Every
   assignment card in the product wears it: parent board day/week/month, the
   phone board, the kid dashboard, and the day/year popout cards. A museum
   wall label — warm paper, one hairline, square corners, no shadow, and
   nothing that moves on hover.

   Ryan's modification: the ground is the SUBJECT's color washed into that
   paper rather than a uniform beige, so a week of cards reads as a mosaic
   (BF-216/217). The hairline is the same hue mixed into slightly darker
   paper, so a card's edge reads as its own sheet, never a gray frame.

   The ink values started at the tournament's (#7a7a7a subline, #999 done)
   and were darkened until each clears 4.5:1 on the STRONGEST washed ground,
   not merely on plain paper. Worst measured ratios against the shipped
   subject palette: title 15.5:1, subline 6.8:1, done title 5.1:1, check
   4.8:1. Anything lighter fails on the deepest wash. */
:root {
  --tr-card-paper: #faf8f6;
  --tr-card-edge: #e8e5e0;
  --tr-card-paper-hover: #fcfbf9;
  --tr-card-edge-hover: #dcd8d0;
  --tr-card-wash: 42%;
  --tr-card-title: #1a1a1a;
  --tr-card-subline: #575350;
  --tr-card-title-done: #6b6560;
  --tr-card-check: #147a38;
}

/* Warm dark paper, never pure black. A pale subject color lightens a dark
   ground fast, so the wash drops to 18%: at the shipped 42% the cards land
   near mid-gray and no muted ink can hold 4.5:1 on them. Worst measured
   ratios at 18%: title 8.4:1, subline 5.3:1, done title 4.5:1, check
   5.1:1 — across the default palette, saturated custom subject colors, and
   the even-spaced palette BF-216 proposes. */
[data-bs-theme="dark"],
[data-theme="dark"] {
  --tr-card-paper: #221f1c;
  --tr-card-edge: #3b352e;
  --tr-card-paper-hover: #2a2622;
  --tr-card-edge-hover: #4a433a;
  --tr-card-wash: 18%;
  --tr-card-title: #f4f1ec;
  --tr-card-subline: #c6c0b8;
  --tr-card-title-done: #b8b2aa;
  --tr-card-check: #5fd48c;
}

/* Bootstrap's default pink code color and red danger-link color both land
   just under AA on Trellis's pale pages. These variables/classes cover the
   help examples and editable compliance questionnaire without changing the
   meaning of either color. */
html:not([data-bs-theme="dark"]) {
  --bs-code-color: #a61e62;
}
html:not([data-bs-theme="dark"]) .remove-question-student {
  color: #b02a37 !important;
}
[data-bs-theme="dark"] {
  --bs-code-color: #f29ac4;
}
[data-bs-theme="dark"] .remove-question-student {
  color: #ff9ba5 !important;
}

[data-bs-theme="dark"] {
  --tr-action: #6ea8fe;
  --tr-action-rgb: 110, 168, 254;
  --tr-action-hover: #8bb9fe;
  --tr-action-active: #9ec5fe;
  --tr-action-contrast: #101820;
}

/* Bootstrap's stock outline-secondary text is #6c757d in both themes. On
   its dark #212529 canvas that is only ~3.3:1, so neutral reversals and View
   controls get an explicit dark-theme palette too. */
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #a7acb1;
  --bs-btn-border-color: #a7acb1;
  --bs-btn-hover-color: #101820;
  --bs-btn-hover-bg: #a7acb1;
  --bs-btn-hover-border-color: #a7acb1;
  --bs-btn-focus-shadow-rgb: 167, 172, 177;
  --bs-btn-active-color: #101820;
  --bs-btn-active-bg: #ced4da;
  --bs-btn-active-border-color: #ced4da;
  --bs-btn-disabled-color: #a7acb1;
  --bs-btn-disabled-border-color: #a7acb1;
}

.btn-primary {
  --bs-btn-color: var(--tr-action-contrast);
  --bs-btn-bg: var(--tr-action);
  --bs-btn-border-color: var(--tr-action);
  --bs-btn-hover-color: var(--tr-action-contrast);
  --bs-btn-hover-bg: var(--tr-action-hover);
  --bs-btn-hover-border-color: var(--tr-action-hover);
  --bs-btn-focus-shadow-rgb: var(--tr-action-rgb);
  --bs-btn-active-color: var(--tr-action-contrast);
  --bs-btn-active-bg: var(--tr-action-active);
  --bs-btn-active-border-color: var(--tr-action-active);
  --bs-btn-disabled-color: var(--tr-action-contrast);
  --bs-btn-disabled-bg: var(--tr-action);
  --bs-btn-disabled-border-color: var(--tr-action);
}

.btn-outline-primary {
  --bs-btn-color: var(--tr-action);
  --bs-btn-border-color: var(--tr-action);
  --bs-btn-hover-color: var(--tr-action-contrast);
  --bs-btn-hover-bg: var(--tr-action);
  --bs-btn-hover-border-color: var(--tr-action);
  --bs-btn-focus-shadow-rgb: var(--tr-action-rgb);
  --bs-btn-active-color: var(--tr-action-contrast);
  --bs-btn-active-bg: var(--tr-action-active);
  --bs-btn-active-border-color: var(--tr-action-active);
  --bs-btn-disabled-color: var(--tr-action);
  --bs-btn-disabled-border-color: var(--tr-action);
}

.btn-primary:hover { box-shadow: 0 .18rem .4rem rgba(var(--tr-action-rgb), .3); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }
.btn-primary:disabled,
.btn-primary.disabled { cursor: not-allowed; filter: grayscale(.3); }
.btn-outline-secondary:active { transform: translateY(1px); }
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled { cursor: not-allowed; }

/* Password visibility is one quiet, recognizable control everywhere. The
   paired SVGs are masks so Bootstrap's accessible light/dark button color is
   the icon color too; no platform-dependent emoji or raster fringe remains. */
.password-toggle {
  --password-toggle-icon: url("../ui/password-eye.svg");
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding-inline: .65rem;
}
.password-toggle::before {
  content: "";
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  background: currentColor;
  -webkit-mask: var(--password-toggle-icon) center / contain no-repeat;
  mask: var(--password-toggle-icon) center / contain no-repeat;
}
.password-toggle.is-showing {
  --password-toggle-icon: url("../ui/password-eye-off.svg");
}

/* Edge supplies its own reveal glyph inside password inputs. Keep the shared
   Trellis button as the single visible control instead of showing two eyes. */
.masked-password::-ms-reveal,
.masked-password::-ms-clear {
  display: none;
}

@media (forced-colors: active) {
  .btn-primary { border-width: 2px; }
  .btn-outline-primary,
  .btn-outline-secondary { border-width: 2px; border-style: solid; }
  .btn-primary:active,
  .btn-outline-primary:active,
  .btn-outline-secondary:active { outline: 2px solid ButtonText; outline-offset: -5px; }
  .password-toggle::before { background: ButtonText; }
}
.split-calculated-total {
  cursor: pointer;
  background-color: var(--bs-tertiary-bg);
  border-style: dashed;
}