/* ---------- App page layout ---------- */
.page {
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

/* Page sections never touch: every section after the first sits at least 1rem
   below the previous one, whatever component it is. Zero specificity so a
   component's own larger margin still wins (vertical margins collapse, so the
   gaps don't add up). */
:where(.page) > * + * { margin-block-start: 1rem; }

.page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.page__header > div:first-child {
  position: relative;
  min-width: 0;
  padding-inline-start: .75rem;
}

.page__header > div:first-child::before {
  content: "";
  position: absolute;
  inset-block: .125rem;
  inset-inline-start: 0;
  width: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--brand), var(--accent));
}

.page__header > div:has(.btn) {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

.settings-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.settings-toc a {
  color: var(--brand-dark);
  font-weight: 700;
  font-size: var(--text-body);
  text-decoration: none;
}
.settings-toc a:hover { text-decoration: underline; }

.settings-section-break {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 2rem 0 1.25rem;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 800;
}
.settings-section-break::before,
.settings-section-break::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--border);
}

.page__title { margin: 0; font-size: clamp(1.28rem, 1rem + .7vw, 1.6rem); font-weight: 800; line-height: 1.2; }
.page__subtitle { max-width: 72ch; margin: .25rem 0 0; color: var(--muted); font-size: var(--text-body); line-height: 1.45; }
.page-actions,
.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

/* ---------- Filter / toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: end;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.toolbar .field { margin-bottom: 0; }
.toolbar .field--grow { flex: 1; min-width: 180px; }
.toolbar__input {
  width: 100%;
  height: 40px;
  padding: .5rem .75rem;
  font-size: var(--text-lead);
  line-height: 1.4;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.toolbar__input--auto { width: auto; }
.table__select { width: 32px; }
.toolbar__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.toolbar__label { display:block; font-size:var(--text-label); font-weight:600; color:var(--ink); margin-bottom:.25rem; }
.toolbar--auto-filter .toolbar__manual-submit { display: none; }
.toolbar .btn {
  height: 40px;
  min-height: 40px;
  padding: .5rem 1rem;
  font-size: var(--text-lead);
}

/* ---------- Fees ---------- */
.fees-toolbar { gap: .75rem 1rem; padding: 1rem; }
.fees-toolbar__month { min-width: 180px; }
.fees-toolbar__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.fees-statements { margin-bottom: 1.25rem; }

@media (max-width: 640px) {
  .fees-toolbar > .field,
  .fees-toolbar__actions,
  .fees-toolbar__actions .btn { width: 100%; }
}

select.input,
select.toolbar__input {
  appearance: none;
  padding-inline-end: 2.5rem;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23667085' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 16px;
  cursor: pointer;
}

/* WebKit clips a native <select>'s displayed text when appearance:none is
   combined with dir="rtl" (reproduced on current Safari/WebKit), regardless
   of padding or the custom arrow -- it's an engine bug in how it lays out
   the value box, not a spacing issue. Falling back to the native control for
   RTL sidesteps it; the browser's own arrow replaces the custom svg one. */
[dir="rtl"] select.input,
[dir="rtl"] select.toolbar__input {
  appearance: auto;
  background-image: none;
  padding-inline-start: .75rem;
  padding-inline-end: .75rem;
}

select.input:hover,
select.toolbar__input:hover {
  border-color: var(--success-border);
}

.bulk-select,
.toolbar-select {
  position: relative;
  display: inline-grid;
  min-width: 130px;
}

.bulk-select::after,
.toolbar-select::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: .75rem;
  width: 7px;
  height: 7px;
  border-right: 1.7px solid var(--muted); /* physical-ok: chevron drawn from rotated borders */
  border-bottom: 1.7px solid var(--muted);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.bulk-select select.toolbar__input,
.toolbar-select select.toolbar__input {
  width: 100%;
  padding-inline: .75rem 2.5rem;
  background-image: none;
}

/* RTL selects fall back to the native control (see above), which already
   draws its own arrow -- suppress the custom chevron so only one shows. */
[dir="rtl"] .bulk-select::after,
[dir="rtl"] .toolbar-select::after {
  display: none;
}

[dir="rtl"] .bulk-select select.toolbar__input,
[dir="rtl"] .toolbar-select select.toolbar__input {
  padding-inline: .75rem;
}

.schedule-days {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.schedule-day {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--text-small);
  font-weight: 700;
}

.schedule-day:has(input:checked) {
  color: var(--brand-dark);
  background: var(--brand-light);
  border-color: var(--brand-border);
}

.schedule-slots {
  display: grid;
  gap: .5rem;
  padding: 0;
  border: 0;
}

.schedule-slots__list {
  display: grid;
  gap: .5rem;
}

.schedule-slots__add {
  justify-self: start;
}

.schedule-slot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: .5rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

@media (max-width: 720px) {
  .schedule-slot {
    grid-template-columns: 1fr 1fr;
  }

  .schedule-slot__remove {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.schedule-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.schedule-card > div,
.table-stack {
  display: grid;
  gap: .125rem;
  min-width: 0;
}

.schedule-card span,
.table-stack span {
  color: var(--muted);
  font-size: var(--text-small);
}

.schedule-card strong,
.table-stack strong {
  color: var(--ink);
  font-size: var(--text-body);
}

/* Data card list actions */
.row-actions { display: flex; align-items: center; gap: .375rem; justify-content: flex-end; }

/* A table cell must keep its native display mode on desktop. Applying flex
   directly to <td> removes it from the table's column and border layout. */
@media (min-width: 641px) {
  .table th.table-actions-heading,
  .table td.row-actions,
  .table td.table-actions-cell {
    text-align: end;
    white-space: nowrap;
  }

  .table td.row-actions {
    display: table-cell;
  }

  .table td.row-actions .btn:not(.action-menu__item) + .btn {
    margin-inline-start: .25rem;
  }

  /* Beats the max-width:860px ".row-actions .btn { width: 100% }" rule below,
     which is meant for stacked mobile action bars, not inline table cells.
     Action menu items keep their full-width panel layout. */
  .table td.row-actions .btn:not(.action-menu__item) {
    width: auto;
  }
}

.count-pill {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand-dark);
  border-radius: var(--radius-pill);
  padding: .125rem .5rem;
  font-size: var(--text-small);
  font-weight: 700;
  margin-inline-start: .375rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
}

.card:has(> .table:only-child),
.card:has(> form:only-child > .table),
.card:has(> form:only-child > .bulk-bar + .table),
.card:has(> .table-wrap:only-child) {
  /* clip, not hidden: hidden turns the card into a scroll container, so a
     sticky save bar inside it pins to the card's own bottom edge and covers
     the last rows instead of following the viewport. */
  overflow: clip;
  padding: 0;
}
/* The bar already spans an unpadded card; the mobile bleed would be clipped. */
.card:has(> form:only-child > .table) .form-actions--sticky { margin-inline: 0; }

/* Keep after the ".card:has(> .table:only-child)" clipping rule: equal
   specificity, so source order lets row action panels escape the card. */
.card:has(.table .action-menu) { overflow: visible; }
.card:has(.table .action-menu) .table { overflow: visible; }
/* Without clipping, round the header corners to match the card. */
.card:has(.table .action-menu) .table thead th:first-child { border-start-start-radius: var(--radius); }
.card:has(.table .action-menu) .table thead th:last-child { border-start-end-radius: var(--radius); }

.card > form > .bulk-bar {
  margin: .75rem .75rem 0;
}

.card:hover,
.student-overview__panel:hover,
.planner-panel:hover,
.notifications-card:hover {
  border-color: var(--border-strong);
}

.card + .card { margin-top: 1rem; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.card__title { margin: 0 0 .75rem; font-size: var(--text-lead); }
.card__head .card__title { margin: 0; }
.chip-list, .record-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.chip--link { text-decoration: none; }
.chip--link:hover { text-decoration: none; }
.table__ltr { text-align: start; }
.record-summary { margin-bottom: 1rem; }
.portion-list { display: grid; gap: .5rem; }
.portion-list__item { width: 100%; justify-content: space-between; }
.quran-portion-summary { display: grid; min-width: 0; gap: .125rem; }
.quran-portion-summary__primary { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.quran-portion-summary__range { color: var(--muted); font-size: var(--text-label); line-height: 1.45; }
.quran-portion-summary-list { display: grid; gap: .5rem; }
.quran-portion-summary-list__badges { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.metric-chip-grid { display: grid; --grid-min: 150px; gap: .5rem; }

/* ---------- Balanced card grids ----------
   Cards fill as many columns as fit, but a known count never strands a card
   alone on the last row: 4 -> 4|2, 5 -> 5|3+2, 6 -> 6|3|2, 8 -> 8|4|2.
   Each step is picked from the grid's own width: (threshold - 100%) * 999
   flips between the wide and narrow track, so no breakpoint is needed. The
   1rem in the thresholds covers the widest grid gap. */
:is(.stat-grid, .planner-summary, .leaderboard-summary, .student-overview, .detail-grid,
    .metric-chip-grid, .progress-attendance, .health-infrastructure__grid) {
  --grid-track: var(--grid-min);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-track), 100%), 1fr));
}
:is(.stat-grid, .planner-summary, .leaderboard-summary, .student-overview, .detail-grid,
    .metric-chip-grid, .progress-attendance, .health-infrastructure__grid):has(> :nth-child(4):last-child) {
  --grid-track: max(var(--grid-min), clamp(calc(25% - 1rem), calc((4 * var(--grid-min) + 3rem - 100%) * 999), calc(50% - 1rem)));
}
:is(.stat-grid, .planner-summary, .leaderboard-summary, .student-overview, .detail-grid,
    .metric-chip-grid, .progress-attendance, .health-infrastructure__grid):has(> :nth-child(5):last-child) {
  --grid-track: max(var(--grid-min), clamp(calc(20% - 1rem), calc((5 * var(--grid-min) + 4rem - 100%) * 999), calc(100% / 3 - 1rem)));
}
:is(.stat-grid, .planner-summary, .leaderboard-summary, .student-overview, .detail-grid,
    .metric-chip-grid, .progress-attendance, .health-infrastructure__grid):has(> :nth-child(6):last-child) {
  --grid-track: max(var(--grid-min), clamp(calc(100% / 6 - 1rem), calc((6 * var(--grid-min) + 5rem - 100%) * 999),
    clamp(calc(100% / 3 - 1rem), calc((3 * var(--grid-min) + 2rem - 100%) * 999), calc(50% - 1rem))));
}
:is(.stat-grid, .planner-summary, .leaderboard-summary, .student-overview, .detail-grid,
    .metric-chip-grid, .progress-attendance, .health-infrastructure__grid):has(> :nth-child(8):last-child) {
  --grid-track: max(var(--grid-min), clamp(calc(12.5% - 1rem), calc((8 * var(--grid-min) + 7rem - 100%) * 999),
    clamp(calc(25% - 1rem), calc((4 * var(--grid-min) + 3rem - 100%) * 999), calc(50% - 1rem))));
}
/* Six stat cards keep their long subtitles readable: 3 x 2 at most. */
.stat-grid:has(> :nth-child(6):last-child) {
  --grid-track: max(var(--grid-min), clamp(calc(100% / 3 - 1rem), calc((3 * var(--grid-min) + 2rem - 100%) * 999), calc(50% - 1rem)));
}
.record-notes { color: var(--ink); }
.record-notes > :first-child { margin-top: 0; }
.record-notes > :last-child { margin-bottom: 0; }
.field--separated, .record-step--separated { margin-top: 1rem; }
.field__hint { margin: 0 0 .5rem; color: var(--muted); font-size: var(--text-small); }
.field__hint--spacious { margin-bottom: .75rem; }
.field__hint--section { margin-bottom: 1rem; }
.empty-action--compact { padding: .75rem; min-height: 0; }
.empty-action--compact .table__empty { padding: 0; }
.errors__hint { margin: .25rem 0 .5rem; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem 1rem; background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius); }
.danger-zone h2 { margin: 0; color: var(--danger); font-size: var(--text-lead); }
.danger-zone p { margin: .25rem 0 0; color: var(--muted); font-size: var(--text-small); }
@media (max-width: 640px) {
  .danger-zone { align-items: stretch; flex-direction: column; }
  .danger-zone .button_to, .danger-zone .btn { width: 100%; }
}

/* Workflow UX: accessibility, operations, saved views and communications */
.skip-link {
  position: fixed; inset-inline-start: 1rem; top: -5rem; z-index: 10000;
  padding: .75rem 1rem; border-radius: var(--radius); background: var(--surface); color: var(--brand);
  box-shadow: var(--shadow-lg); font-weight: 700;
}
.skip-link:focus { top: 1rem; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand); outline-offset: 3px;
}
.undo-notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.undo-notice form { margin: 0; }
.saved-views { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: center; margin-block: .75rem; }
.saved-views__list, .saved-view-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.saved-views__hint { margin: 0; color: var(--muted); font-size: var(--text-small); }
.saved-view-chip { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); overflow: clip; }
.saved-view-chip a { padding: .375rem .25rem .375rem .75rem; color: var(--ink); text-decoration: none; }
.saved-view-chip a:hover { text-decoration: none; }
[dir="rtl"] .saved-view-chip a { padding: .375rem .75rem .375rem .25rem; }
.saved-view-chip form { display: inline-flex; margin: 0; }
.saved-view-chip__delete { border: 0; background: transparent; color: var(--muted); padding: .375rem .5rem; cursor: pointer; }
.import-columns, .context-help { margin-block: 1rem; border: 1px solid var(--info-border); border-radius: var(--radius-lg); background: var(--info-bg); color: var(--info); }
.import-columns { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
.import-columns h2 { margin: 0 0 .25rem; font-size: var(--text-lead); }
.import-columns p { margin: 0; color: var(--info); }
.context-help summary { display: flex; gap: .5rem; align-items: center; padding: .75rem 1rem; cursor: pointer; font-weight: 700; }
.context-help__body { padding: 0 1rem 1rem; line-height: 1.65; }
.daily-briefing {
  margin-block: 1rem 1.25rem;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--warning-bg), var(--surface) 72%);
  box-shadow: var(--shadow-sm);
}
.daily-briefing--complete {
  border-color: color-mix(in srgb, var(--brand) 26%, transparent);
  background: linear-gradient(135deg, var(--brand-light), var(--surface) 72%);
}
.daily-briefing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 1.25rem;
}
.daily-briefing__head h2 { margin: .125rem 0; font-size: var(--text-heading); }
.daily-briefing__head p { max-width: 690px; margin: 0; color: var(--muted); font-size: var(--text-small); }
.daily-briefing__head .btn { flex: 0 0 auto; }
.daily-briefing__eyebrow { color: var(--warning); font-size: var(--text-micro); font-weight: 800; }
.daily-briefing--complete .daily-briefing__eyebrow { color: var(--brand); }
.daily-briefing__summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid color-mix(in srgb, var(--warning) 16%, transparent);
  background: var(--surface);
}
.daily-briefing--complete .daily-briefing__summary { border-color: color-mix(in srgb, var(--brand) 15%, transparent); }
.daily-briefing__metric {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  padding: .75rem .75rem;
  color: var(--ink);
  border-inline-end: 1px solid var(--border);
  text-decoration: none;
}
.daily-briefing__metric:last-child { border-inline-end: 0; }
.daily-briefing__metric:hover { color: var(--brand-dark); background: var(--brand-light); text-decoration: none; }
.daily-briefing__metric strong { color: var(--brand); font-size: var(--text-heading); }
.daily-briefing__metric span { min-width: 0; color: var(--muted); font-size: var(--text-label); font-weight: 700; line-height: 1.3; }
.daily-briefing__metric--focus { background: color-mix(in srgb, var(--accent-light) 88%, transparent); }
.daily-briefing__metric--focus strong { color: var(--warning); }
.daily-briefing__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  color: var(--muted);
  font-size: var(--text-label);
}
.daily-briefing__footer a { font-weight: 800; white-space: nowrap; }
.attention-item__actions { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: end; }
.communication-search { position: relative; z-index: 20; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr); gap: 1.25rem; align-items: center; }
.communication-search__intro, .communication-section-head { display: flex; align-items: flex-start; gap: .75rem; }
.communication-search__intro p, .communication-section-head p, .communication-contacts p { margin: .25rem 0 0; color: var(--muted); }
.communication-search__step { display: inline-grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; color: var(--on-brand); font-weight: 800; border-radius: 50%; background: var(--brand); }
.communication-search__form .field { margin: 0; }
.communication-search__form + .filter-chips { display: none; }
.communication-contacts { display: grid; gap: 1rem; }
.communication-contacts__student { display: flex; align-items: center; gap: .75rem; }
.communication-avatar { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; color: var(--brand-dark); font-size: var(--text-heading); font-weight: 800; border-radius: 50%; background: var(--brand-light); }
.guardian-contact-list { display: grid; gap: .75rem; }
.guardian-contact { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.guardian-contact__identity { display: grid; min-width: 0; }
.guardian-contact__identity small { color: var(--muted); overflow-wrap: anywhere; }
.guardian-contact__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .375rem; }
.communication-section-head { margin: 1.25rem 0 .75rem; }
.communication-section-head h2 { margin: 0; font-size: var(--text-lead); }
.communication-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.communication-template { display: grid; gap: .75rem; }
.communication-template textarea { resize: vertical; line-height: 1.6; }
.communication-empty { display: grid; justify-items: center; gap: .375rem; padding: 2rem; color: var(--muted); text-align: center; }
.communication-empty strong { color: var(--ink); }
.communication-empty__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .25rem; color: var(--brand); font-size: var(--text-title); border-radius: 50%; background: var(--brand-light); }
.communication-empty--compact { justify-items: start; padding: 1rem; text-align: start; background: var(--surface-soft); }
.report-ranking { list-style: none; padding: 0; margin: 1rem 0 0; }
.report-ranking li { display: flex; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--border); }

@media (max-width: 900px) {
  .daily-briefing__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-briefing__metric { border-block-end: 1px solid var(--border); }
  .daily-briefing__metric:nth-child(2n) { border-inline-end: 0; }
  .daily-briefing__metric:last-child { grid-column: 1 / -1; border-block-end: 0; }
  .communication-search { grid-template-columns: 1fr; }
  .communication-grid { grid-template-columns: 1fr; }
  .import-columns { align-items: stretch; flex-direction: column; }
}
@media (max-width: 640px) {
  .daily-briefing__head { align-items: stretch; flex-direction: column; padding: 1rem; }
  .daily-briefing__head .btn { width: 100%; }
  .daily-briefing__summary { grid-template-columns: 1fr; }
  .daily-briefing__metric,
  .daily-briefing__metric:nth-child(2n) { border-inline-end: 0; }
  .daily-briefing__metric:last-child { grid-column: auto; }
  .daily-briefing__footer { align-items: flex-start; flex-direction: column; padding-inline: 1rem; }
  .saved-view-form { width: 100%; }
  .saved-view-form .toolbar__input { flex: 1; min-width: 0; }
  .form-actions--sticky { bottom: calc(4.6rem + env(safe-area-inset-bottom)); z-index: 30; }
  .guardian-contact { align-items: stretch; flex-direction: column; }
  .guardian-contact__actions, .guardian-contact__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.record-step .card__heading { display: flex; align-items: center; gap: .5rem; }
.step-badge {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: var(--text-small);
  font-weight: 800;
  flex: 0 0 auto;
}