/* Desktop-first Compliance Center skin. Legal copy, state calculations,
   write routes, and printable evidence documents remain independent of it. */
/* The in-place controller restores the captured document offset itself.
   Disable native anchoring on the actual root scroller so replacing the
   whole guide cannot apply a second adjustment against the footer or other
   nodes outside the replaced subtree. This stylesheet is Compliance-only. */
:root,
body {
  overflow-anchor: none;
  /* Bootstrap enables smooth root scrolling. A control brought into view can
     otherwise still be animating when its in-place request starts, leaving
     no stable offset for the controller to preserve. */
  scroll-behavior: auto;
}

.compliance-page {
  --cmp-surface: var(--bs-body-bg);
  --cmp-surface-soft: #f7faf7;
  --cmp-surface-green: #f1f6f2;
  --cmp-surface-blue: #f4f7fb;
  --cmp-border: #d9e2db;
  --cmp-border-strong: #c2d0c5;
  --cmp-ink: #202722;
  --cmp-muted: #647068;
  --cmp-green: #315f43;
  --cmp-green-strong: #254c35;
  --cmp-green-pale: #e9f2eb;
  --cmp-blue: #315f87;
  --cmp-blue-pale: #edf4fa;
  --cmp-gold: #9a6b24;
  --cmp-gold-pale: #fbf5e8;
  --cmp-shadow: 0 .2rem .8rem rgba(31, 54, 38, .05);
  --cmp-heading-light: "Gill Sans Light", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  --cmp-heading-semibold: "Gill Sans SemiBold", "Gill Sans Semibold", "Gill Sans Semi Bold", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  max-width: 96rem;
  margin: 0 auto;
  color: var(--cmp-ink);
}

.compliance-page .text-muted { color: var(--cmp-muted) !important; }

.cmp-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.cmp-page-header h1 {
  margin: 0 0 .22rem;
  font-family: var(--cmp-heading-light);
  font-size: clamp(1.9rem, 2.5vw, 2.45rem);
  font-weight: 300;
  letter-spacing: -.028em;
  line-height: 1.08;
}

.cmp-eyebrow {
  color: var(--cmp-green);
  font-family: var(--cmp-heading-semibold);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.cmp-page-subtitle {
  max-width: 52rem;
  margin: 0;
  color: var(--cmp-muted);
  font-size: .88rem;
}

.cmp-page-header .btn {
  min-height: 2.35rem;
  padding: .42rem .85rem;
  border-radius: .42rem;
}

.cmp-intro {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: .9rem;
  padding: 1rem 1.15rem;
  overflow: hidden;
  border: 1px solid var(--cmp-border);
  border-radius: .62rem;
  background:
    radial-gradient(circle at 92% 14%, rgba(179, 202, 184, .24), transparent 15rem),
    var(--cmp-surface-soft);
  box-shadow: var(--cmp-shadow);
}

.cmp-intro > img {
  width: 5.15rem;
  height: 4.75rem;
  object-fit: contain;
}

.cmp-intro h2 {
  margin: 0 0 .18rem;
  font-family: var(--cmp-heading-semibold);
  font-size: 1.05rem;
  font-weight: 600;
}

.cmp-intro p {
  max-width: 65rem;
  margin: 0;
  color: var(--cmp-muted);
  font-size: .84rem;
  line-height: 1.5;
}

.cmp-state-chip {
  display: inline-grid;
  min-width: 3rem;
  min-height: 3rem;
  place-items: center;
  border: 1px solid var(--cmp-border-strong);
  border-radius: 999px;
  background: var(--cmp-surface);
  color: var(--cmp-green);
  font-family: var(--cmp-heading-semibold);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.cmp-jump-nav {
  display: flex;
  gap: .2rem;
  margin: 0 0 .65rem;
  padding: .25rem;
  overflow-x: auto;
  border: 1px solid var(--cmp-border);
  border-radius: .55rem;
  background: var(--cmp-surface);
  scrollbar-width: thin;
}

.cmp-jump-nav a {
  flex: 0 0 auto;
  padding: .42rem .62rem;
  border-radius: .34rem;
  color: var(--cmp-muted);
  font-family: var(--cmp-heading-semibold);
  font-size: .72rem;
  font-weight: 600;
  text-decoration: none;
}

.cmp-jump-nav a:hover,
.cmp-jump-nav a:focus-visible,
.cmp-jump-nav a.active {
  background: var(--cmp-green-pale);
  color: var(--cmp-green-strong);
}

.cmp-guide-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
  padding: .42rem .65rem;
  border: 1px solid var(--cmp-border);
  border-radius: .48rem;
  background: var(--cmp-surface-soft);
}

.cmp-expand-controls,
.cmp-filter-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
}

.cmp-expand-controls > span {
  width: 1px;
  height: 1rem;
  background: var(--cmp-border-strong);
}

.cmp-guide-controls .btn-link {
  padding: .2rem .35rem;
  color: var(--cmp-green-strong);
  text-decoration: none;
}

.cmp-filter-controls > span {
  margin-right: .15rem;
  color: var(--cmp-muted);
  font-size: .72rem;
}

.cmp-filter-controls .btn {
  padding: .24rem .52rem;
  border: 1px solid transparent;
  color: var(--cmp-muted);
  font-size: .7rem;
}

.cmp-filter-controls .btn:hover,
.cmp-filter-controls .btn:focus-visible,
.cmp-filter-controls .btn.active {
  border-color: var(--cmp-border-strong);
  background: var(--cmp-surface);
  color: var(--cmp-green-strong);
}

.cmp-workspace {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.cmp-workspace-main { min-width: 0; }

.cmp-section-nav {
  position: sticky;
  top: 1rem;
  padding: .85rem;
  border: 1px solid var(--cmp-border);
  border-radius: .58rem;
  background: var(--cmp-surface);
  box-shadow: var(--cmp-shadow);
}

.cmp-section-nav h2 {
  margin: 0 0 .2rem;
  font-family: var(--cmp-heading-semibold);
  font-size: .88rem;
  font-weight: 600;
}

.cmp-section-nav > p {
  margin: 0 0 .55rem;
  color: var(--cmp-muted);
  font-size: .72rem;
  line-height: 1.42;
}

.cmp-section-nav > a {
  display: flex;
  align-items: center;
  gap: .42rem;
  min-height: 2rem;
  padding: .3rem .42rem;
  border-radius: .35rem;
  color: var(--cmp-muted);
  font-size: .73rem;
  line-height: 1.25;
  text-decoration: none;
}

.cmp-section-nav > a span {
  display: inline-grid;
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 1px solid var(--cmp-border);
  border-radius: 999px;
  color: var(--cmp-green);
  font-family: var(--cmp-heading-semibold);
  font-size: .66rem;
}

.cmp-section-nav > a:hover,
.cmp-section-nav > a:focus-visible,
.cmp-section-nav > a.active {
  background: var(--cmp-green-pale);
  color: var(--cmp-green-strong);
}

.cmp-section-nav-note {
  margin-top: .65rem;
  padding: .6rem;
  border-radius: .4rem;
  background: var(--cmp-surface-green);
  color: var(--cmp-muted);
  font-size: .68rem;
  line-height: 1.42;
}

.cmp-section-nav-note strong {
  display: block;
  color: var(--cmp-green-strong);
}

.cmp-musts {
  margin: 0 0 .9rem !important;
  padding: .72rem .9rem;
  border: 1px solid #cbdccc;
  border-radius: .55rem;
  background: var(--cmp-surface-green);
  color: var(--cmp-muted);
  font-size: .82rem;
  line-height: 1.7;
}

.cmp-musts strong {
  color: var(--cmp-ink);
  font-family: var(--cmp-heading-semibold);
}

.cmp-musts a {
  display: inline-block;
  margin: .08rem .08rem;
  padding: .04rem .32rem;
  border-radius: .25rem;
  color: var(--cmp-green-strong);
  font-weight: 600;
  text-decoration: none;
}

.cmp-musts a:hover,
.cmp-musts a:focus-visible {
  background: var(--cmp-green-pale);
  text-decoration: underline;
}

.cmp-step {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--cmp-border);
  border-radius: .58rem;
  background: var(--cmp-surface);
  box-shadow: var(--cmp-shadow);
}

.cmp-step h2 {
  display: flex;
  align-items: center;
  gap: .52rem;
  margin: 0 0 .7rem;
  color: var(--cmp-ink);
  font-family: var(--cmp-heading-semibold);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  flex-wrap: wrap;
}

/* The heading text shrinks and wraps beside its step number instead of
   dropping whole onto the next line and leaving the number alone (visual
   audit 2, 2026-09-04: Iowa's steps 2, 4, 5 and 6 at 390px). The status
   pill may still wrap under the heading on a narrow screen. */
.cmp-step h2 .cmp-heading-text {
  flex: 1 1 12rem;
  min-width: 0;
}

.cmp-step p,
.cmp-step li {
  font-size: .84rem;
  line-height: 1.52;
}

.cmp-step p { margin-bottom: .68rem; }
.cmp-step p:last-child,
.cmp-step ul:last-child { margin-bottom: 0; }

/* A calm, dependable line height for quiet source links (WCAG 2.2's 24px
   target floor; 2.5.8 exempts inline links in prose, so inline is enough).
   These were inline-block until the visual audit of 2026-09-04: an
   inline-block link that wraps on a phone becomes a full-width box, so a
   list bullet dropped to the link's last line (Minnesota's immunization
   links) and a trailing period landed alone on the next line (Iowa's
   exemption links). */
.cmp-step a:not(.btn),
.cmp-intro a,
.cmp-privacy-note a {
  display: inline;
  line-height: 1.5rem;
}

.cmp-glance {
  margin-bottom: .9rem;
  border-color: var(--cmp-border-strong);
  border-left: .24rem solid var(--cmp-green);
  /* Samantha: the left accent bar reads as the same mark as the calendar
     assignment cards' subject-color bar (Accession, 2026-08-16), which is
     a square-edged strip, not a rounded one. Zero only the left corners so
     the bar itself stays flush top to bottom; the card's own rounded
     corners on the right are untouched. */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: linear-gradient(100deg, var(--cmp-surface-green), var(--cmp-surface) 35%);
}

.cmp-glance h2 {
  font-size: 1.08rem;
}

.cmp-glance > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem .9rem;
  /* Grid items are boxed cards; the default list markers rendered as
     stray dots floating between the columns. The seven rule bullets
     draw their own marker INSIDE the box instead (Ryan: "I want bullets
     here", pointing at each box's left edge); the status cards below stay
     unmarked. */
  list-style: none;
  padding-left: 0;
}

.cmp-glance > ul.cmp-glance-summary > li {
  position: relative;
  padding-left: 1.35rem;
}
.cmp-glance > ul.cmp-glance-summary > li::before {
  content: "•";
  position: absolute;
  left: .6rem;
  top: .42rem;
  color: var(--cmp-accent, #2f5d3f);
  font-weight: 700;
}

.cmp-glance > ul > li {
  min-width: 0;
  padding: .48rem .58rem;
  border: 1px solid color-mix(in srgb, var(--cmp-border) 78%, transparent);
  border-radius: .4rem;
  background: color-mix(in srgb, var(--cmp-surface) 88%, transparent);
}

.cmp-state-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: .85rem;
}

.cmp-law-stack,
.cmp-tool-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .85rem;
}

.cmp-tool-card {
  border-color: #cad9e5;
  background: linear-gradient(145deg, var(--cmp-surface-blue), var(--cmp-surface) 52%);
}

.cmp-state-layout #subjects-lineup {
  grid-column: 1;
}

.cmp-law-card,
.cmp-tool-card {
  padding-left: 4.15rem;
}

.cmp-law-card > h2 { margin-bottom: 0; }

.cmp-heading-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  width: 100%;
  min-height: 2.35rem;
  align-items: center;
  gap: .52rem;
  padding: .12rem .16rem;
  border: 0;
  border-radius: .35rem;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.cmp-heading-toggle .cmp-heading-text { min-width: 0; }
.cmp-heading-toggle .cmp-req { grid-column: 3; margin-left: 0; }

.cmp-heading-toggle:hover { background: var(--cmp-surface-soft); }
.cmp-heading-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--cmp-green) 38%, transparent); outline-offset: 2px; }

.cmp-card-body {
  margin-top: .72rem;
}

.cmp-card-body[hidden] { display: none; }

.cmp-disclosure {
  display: inline-grid;
  flex: 0 0 1.9rem;
  width: 1.9rem;
  height: 1.9rem;
  grid-column: 4;
  margin-left: 0;
  padding: 0;
  place-items: center;
  border: 1px solid var(--cmp-border);
  border-radius: 999px;
  background: var(--cmp-surface-soft);
  color: var(--cmp-green-strong);
}

.cmp-disclosure::before {
  display: block;
  width: .46rem;
  height: .46rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: translateY(-.12rem) rotate(45deg);
  transition: transform .15s ease;
}

.cmp-heading-toggle[aria-expanded="true"] .cmp-disclosure::before {
  transform: translateY(.12rem) rotate(225deg);
}

.cmp-heading-toggle:hover .cmp-disclosure,
.cmp-heading-toggle:focus-visible .cmp-disclosure { background: var(--cmp-green-pale); }

.cmp-law-card:not(.is-open) {
  padding-top: .82rem;
  padding-bottom: .82rem;
}

.cmp-law-card:not(.is-open)::before { top: .62rem; }

.cmp-step[hidden] { display: none !important; }

.cmp-law-card::before,
.cmp-tool-card::before {
  position: absolute;
  top: .95rem;
  left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #d2e1d5;
  border-radius: .52rem;
  background-color: var(--cmp-green-pale);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.72rem 1.72rem;
  content: "";
}

.cmp-tool-card::before {
  border-color: #d3e0eb;
  background-color: var(--cmp-blue-pale);
}

.cmp-card--family::before { background-image: url("../compliance/family.svg"); }
.cmp-card--filing::before { background-image: url("../compliance/filing.svg"); }
.cmp-card--subjects::before { background-image: url("../compliance/subjects.svg"); }
.cmp-card--assessment::before { background-image: url("../compliance/assessment.svg"); }
.cmp-card--records::before { background-image: url("../compliance/records.svg"); }
.cmp-card--hours::before { background-image: url("../compliance/hours.svg"); }
.cmp-card--notes::before { background-image: url("../compliance/notes.svg"); }

/* A subject-lineup pill carries a state's own requirement name, and North
   Dakota's longest one measures 347px. Bootstrap pins every .badge to
   nowrap, so on a 360px phone the pill ran 27px past the right edge of the
   screen and the last words were gone. The pill wraps instead. */
.cmp-card--subjects .badge { white-space: normal; }

/* Trellis's in-place compliance controls are written as the last words of a
   sentence -- "Exclude from this year's PI-1206 and 875-hour tracker" -- and
   base.html pins .btn to nowrap below 700px. That combination pushed the
   Wisconsin control off a 360px screen. A control that reads as prose wraps
   like prose. */
.compliance-page .btn-link { white-space: normal; }

/* Public state pages use the same long, sentence-like second link in each
   signup card. Keep it inside the card on a phone and align wrapped lines
   with the link's first line. */
.state-signup .btn-link { white-space: normal; text-align: left; }

.cmp-num {
  color: var(--cmp-green);
  font-family: var(--cmp-heading-semibold);
  font-size: 1.14rem;
  font-weight: 600;
}

.cmp-req,
.cmp-tool,
.cmp-guide {
  margin-left: auto;
  padding: .17rem .52rem;
  border-radius: 999px;
  font-family: var(--cmp-heading-semibold);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.cmp-req {
  border: 1px solid #c7dccb;
  background: var(--cmp-green-pale);
  color: var(--cmp-green-strong);
}

.cmp-tool {
  border: 1px solid #ccdae6;
  background: var(--cmp-blue-pale);
  color: var(--cmp-blue);
}

.cmp-guide {
  border: 1px solid #e3d1af;
  background: var(--cmp-gold-pale);
  color: var(--cmp-gold);
}

.cmp-cite {
  display: block;
  margin: .82rem -1.15rem -1.05rem -4.15rem;
  padding: .55rem 1.15rem;
  border-top: 1px solid var(--cmp-border);
  background: color-mix(in srgb, var(--cmp-surface-soft) 76%, transparent);
  color: var(--cmp-muted);
  font-size: .72rem;
  line-height: 1.45;
}

.cmp-cite a { color: var(--cmp-muted); }
.cmp-cite a:hover,
.cmp-cite a:focus-visible { color: var(--bs-link-color); }

.cmp-cite-inline {
  display: inline;
  padding: 0;
  border: 0;
  color: var(--cmp-muted);
  font-size: .85em;
  text-decoration: underline dotted;
}

.cmp-cite-inline:hover,
.cmp-cite-inline:focus-visible { color: var(--bs-link-color); }

.cmp-step .form-control,
.cmp-step .form-select {
  border-color: #bfcac2;
  border-radius: .38rem;
}

.cmp-step textarea { resize: vertical; }

/* S12 (Samantha, 2026-08-21). The records-year picker offers
   "2026-2027 (current)", and a browser's own auto sizing for a <select>
   lands within a pixel of its widest option: measured at 122.4px of text in
   123.0px of room, which clips the moment a font renders a hair wider than
   the one measured. A floor with real slack in it, in rem so it tracks the
   type size rather than guessing at characters. Same fix, same reason, on
   Year At A Glance (year_at_a_glance.css) and the year board's school-year
   filter (board_year.css), which show the identical labels. */
#compliance-records-year {
  width: auto;
  min-width: 11.5rem;
  max-width: 100%;
}

.cmp-step table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.cmp-group {
  margin-bottom: .72rem;
  padding: .65rem .72rem;
  border: 1px solid var(--cmp-border);
  border-radius: .42rem;
  background: color-mix(in srgb, var(--cmp-surface-soft) 84%, transparent);
}

.cmp-group:last-child { margin-bottom: 0; }

.cmp-group-label {
  color: var(--cmp-muted);
  font-family: var(--cmp-heading-semibold);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
}

/* Ryan's rule, 2026-08-16: a step that does not apply to this child is
   greyed with the reason inside it, never hidden. Hiding it reads as a step
   Trellis forgot; greying it teaches the rule where the family is already
   looking. Colour only, so the words stay readable and every control inside
   keeps working without JavaScript. */
.cmp-quiet {
  padding: .5rem .65rem;
  border-left: .2rem solid var(--cmp-border);
  background: var(--cmp-surface-soft);
  color: var(--cmp-muted);
  line-height: 1.5;
}

.cmp-quiet strong { color: var(--cmp-muted); font-weight: 600; }

/* Public state fact tables are short reading tables, not spreadsheets. At
   phone width, stack the exceptional multi-column tables so every value stays
   in the card and the former column heading remains visible as a label. */
@media (max-width: 575.98px) {
  .state-stack-mobile,
  .state-stack-mobile tbody,
  .state-stack-mobile tr,
  .state-stack-mobile th,
  .state-stack-mobile td {
    display: block;
    width: 100%;
  }
  .state-stack-mobile { min-width: 0; max-width: 100%; }
  .state-stack-mobile thead { display: none; }
  .state-stack-mobile tbody tr {
    padding: .45rem 0;
    border-top: 1px solid var(--bs-border-color);
  }
  .state-stack-mobile tbody tr:first-child { border-top: 0; }
  .state-stack-mobile tbody th[scope="row"],
  .state-stack-mobile tbody td {
    padding: .12rem 0;
    border: 0;
    text-align: left !important;
    white-space: normal;
  }
  .state-stack-mobile tbody td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
  }
}

@media (forced-colors: active) {
  .cmp-quiet { border-left-color: currentColor; }
}

.cmp-privacy-note {
  margin: .9rem 0 0;
  padding: .72rem .85rem;
  border-left: .2rem solid var(--cmp-border-strong);
  background: var(--cmp-surface-soft);
  line-height: 1.5;
}

.compliance-page > .alert {
  margin-bottom: .9rem;
  border-color: #c8d8e7;
  background: var(--cmp-blue-pale);
  color: var(--cmp-ink);
}

[data-bs-theme="dark"] .compliance-page {
  --cmp-surface: #202521;
  --cmp-surface-soft: #1b211d;
  --cmp-surface-green: #202b23;
  --cmp-surface-blue: #202932;
  --cmp-border: #38433b;
  --cmp-border-strong: #4b5c50;
  --cmp-ink: #edf2ee;
  --cmp-muted: #b6c0b8;
  --cmp-green: #9dc7a8;
  --cmp-green-strong: #b5d7bd;
  --cmp-green-pale: #26372b;
  --cmp-blue: #a8c8e4;
  --cmp-blue-pale: #253341;
  --cmp-gold: #e2c17f;
  --cmp-gold-pale: #3b3323;
  --cmp-shadow: none;
}

[data-bs-theme="dark"] .cmp-intro {
  background:
    radial-gradient(circle at 92% 14%, rgba(103, 145, 113, .18), transparent 15rem),
    var(--cmp-surface-soft);
}

/* base.html's legacy dark-mode rule is declared after this linked stylesheet.
   The extra .compliance-page specificity keeps the page's law/tool distinction
   visible instead of flattening every card back to the generic body surface. */
[data-bs-theme="dark"] .compliance-page .cmp-step {
  border-color: var(--cmp-border);
  background: var(--cmp-surface);
}

[data-bs-theme="dark"] .compliance-page .cmp-glance {
  border-color: var(--cmp-border-strong);
  border-left-color: var(--cmp-green);
  background: linear-gradient(100deg, var(--cmp-surface-green), var(--cmp-surface) 35%);
}

[data-bs-theme="dark"] .compliance-page .cmp-tool-card {
  border-color: #3d5262;
  background: linear-gradient(145deg, var(--cmp-surface-blue), var(--cmp-surface) 52%);
}

[data-bs-theme="dark"] .cmp-state-chip,
[data-bs-theme="dark"] .cmp-glance > ul > li {
  background: #242b26;
}

[data-bs-theme="dark"] .cmp-law-card::before,
[data-bs-theme="dark"] .cmp-tool-card::before {
  border-color: var(--cmp-border-strong);
}

[data-bs-theme="dark"] .cmp-step .form-control,
[data-bs-theme="dark"] .cmp-step .form-select { border-color: #536057; }

/* The whole affirmation an in-place save gets (PR-013): one word beside the
   control, gone in a couple of seconds. Nothing accumulates, nothing counts,
   and the row itself is already showing the new answer. Named for the page
   rather than for Iowa now that Minnesota's and Wisconsin's shared controls
   save the same way. */
.cmp-saved {
  transition: opacity .5s ease;
}

.cmp-saved.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cmp-saved { transition: none; }
}

@media (max-width: 991.98px) {
  .cmp-workspace { grid-template-columns: minmax(0, 1fr); }
  .cmp-section-nav {
    position: static;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
  }
  .cmp-section-nav h2,
  .cmp-section-nav > p,
  .cmp-section-nav-note { display: none; }
  .cmp-section-nav > a { flex: 0 0 auto; }
  .cmp-glance > ul { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  .cmp-page-header { display: block; }
  .cmp-page-header .btn { margin-top: .75rem; }
  .cmp-intro { grid-template-columns: 3.7rem minmax(0, 1fr); }
  .cmp-intro > img { width: 3.6rem; height: 3.6rem; }
  .cmp-state-chip { display: none; }
  .cmp-jump-nav { display: none; }
  .cmp-guide-controls { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 575.98px) {
  .cmp-page-header h1 { font-size: 1.72rem; }
  .cmp-intro { padding: .82rem; }
  .cmp-intro h2 { font-size: .98rem; }
  .cmp-step,
  .cmp-law-card,
  .cmp-tool-card { padding: .9rem; }
  .cmp-law-card::before,
  .cmp-tool-card::before { display: none; }
  .cmp-step h2 { font-size: .95rem; }
  /* BF mobile fix -- plain <h2> fallback (progressive enhancement: this is
     what renders before compliance_page.js wraps the heading into a
     button.cmp-heading-toggle). The pill used to sit flex: 0 1 auto on the
     same line as the number + title. Squeezing three items (num, title,
     pill) onto one ~360px line shrank the title flex item down toward its
     min-content width, wrapping it one word per line into a sliver column
     with the pill rendered on top of it. flex-basis 100% forces the pill
     onto its own line below the title instead, so the title keeps the full
     row width on its own line. Desktop (>575.98px) is untouched. */
  .cmp-req,
  .cmp-tool,
  .cmp-guide { margin-left: 0; white-space: normal; flex: 1 1 100%; }
  /* With the pill pushed to its own line above, the title is left alone on
     the first line with just the step number, so it can take the rest of
     that line's width instead of guessing at a shared flex-basis. */
  .cmp-step h2 .cmp-heading-text { flex: 1 1 0; min-width: 0; }  /* basis 0: the text shrinks to sit beside the number instead of dropping under it (visual audit 2) */

  /* BF mobile fix -- the real runtime case. Every .cmp-law-card heading is
     rewritten by compliance_page.js into a button.cmp-heading-toggle
     (grid-template-columns: auto minmax(0,1fr) auto auto -- num / title /
     pill / caret) *before Samantha ever sees the page*, in every state
     template, since the JS runs generically on ".cmp-law-card". The pill
     and caret are "auto" grid tracks, which size to their own max-content
     (the pill's full one-line text width) before the minmax(0,1fr) title
     track gets whatever is left over -- on a ~340px-wide card that is
     often less than the pill itself, so the title got crushed into a
     one-word-per-line sliver with the pill sitting in the column next to
     (visually, on top of) it. Splitting the grid into two rows -- num +
     title + caret on row 1, the pill alone spanning the full width on row
     2 -- gives the title the row to itself. Desktop (>575.98px), where
     there is room for all four on one line, is untouched. */
  .cmp-heading-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: auto;
    row-gap: .35rem;
  }
  .cmp-heading-toggle .cmp-num { grid-column: 1; grid-row: 1; }
  .cmp-heading-toggle .cmp-heading-text { grid-column: 2; grid-row: 1; min-width: 0; }
  .cmp-heading-toggle .cmp-disclosure { grid-column: 3; grid-row: 1; }
  .cmp-heading-toggle .cmp-req,
  .cmp-heading-toggle .cmp-tool,
  .cmp-heading-toggle .cmp-guide {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0;
    white-space: normal;
    justify-self: start;
  }
  .cmp-cite { margin: .72rem -.9rem -.9rem; padding: .5rem .9rem; }
  .cmp-step form.d-inline-flex { display: flex !important; align-items: stretch !important; }
  .cmp-step form.d-inline-flex .form-control { width: 100% !important; }
  .cmp-step form.d-inline-flex > label { width: 100%; }
  #assessment-records .row > div { width: 100%; }
}

@media (forced-colors: active) {
  .cmp-intro,
  .cmp-step,
  .cmp-musts,
  .cmp-group { border: 1px solid CanvasText; box-shadow: none; }
  .cmp-law-card::before,
  .cmp-tool-card::before { display: none; }
  .cmp-law-card,
  .cmp-tool-card { padding-left: 1.15rem; }
}

/* Detail cards (Samantha, 2026-08-14): a one-line face, the detail behind
   a click, so close-together options stop blurring. Born as Iowa's
   five-pathway chooser; renamed cmp-detail-card when PR-015 gave Minnesota
   and Wisconsin the same disclosure (BF-204), because what a Minnesota
   immunization exception and an Iowa pathway share is the SHAPE, not the
   word "pathway". Native details/summary; no script. */
.cmp-detail-cards { display: grid; gap: .5rem; margin: 0 0 1rem; }
.cmp-detail-card {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .55rem .8rem;
  margin: 0 0 .5rem;
  background: var(--bs-body-bg);
}
.cmp-detail-cards .cmp-detail-card { margin-bottom: 0; }
.cmp-detail-card > summary { cursor: pointer; line-height: 1.35; }
.cmp-detail-card > summary em { color: var(--bs-secondary-color); font-size: .92em; }
.cmp-detail-card[open] > summary { margin-bottom: .5rem; }
.cmp-detail-card > ul { margin-bottom: 0; }
.faq-card > h2,
.faq-card > h3 { line-height: 1.35; }
.faq-disclosure > summary { cursor: pointer; line-height: 1.35; }
.faq-disclosure[open] > summary { margin-bottom: .5rem; }

.state-index-jump { max-width: 24rem; }
.state-full-guide { font-size: .68em; white-space: nowrap; }

@media print {
  body { background: #fff !important; }
  .cmp-page-header .btn,
  .cmp-step form,
  .cmp-step .btn,
  .cmp-jump-nav,
  .cmp-guide-controls,
  .cmp-section-nav { display: none !important; }
  .compliance-page { max-width: none; }
  .cmp-intro,
  .cmp-musts { break-inside: avoid; box-shadow: none; }
  .cmp-step { break-inside: auto; box-shadow: none; }
  .cmp-step h2,
  .cmp-heading-toggle { break-after: avoid; }
  .cmp-state-layout { display: block; }
  .cmp-workspace { display: block; }
  .cmp-card-body[hidden] { display: block; }
  .cmp-heading-toggle { padding: 0; }
  .cmp-disclosure { display: none; }
  .cmp-step { margin-bottom: .6rem; }
}

/* Round 5 visual audit (2026-09-04): a fact table inside a step card wraps
   its cells like any other table. The .cmp-step table rule above keeps
   nowrap for the wide compliance grids; a table the partial wraps in
   .table-responsive is a reading table, not a grid. */
.cmp-step .table-responsive > table {
  display: table;
  width: 100%;
  white-space: normal;
}

/* The high-school credit table: twelve short subject names in the first
   column. They stay on one line; the "What that means" column takes the
   wrap (table-wrap measurement, 2026-09-04). */
.state-credit-table th[scope="row"] {
  white-space: nowrap;
}