/* School Holiday Planner — the tool's own layer over Togetha's design system.
   Never knows: a colour, a radius, a duration or a type size. Every foundation value arrives as a
   var() from tokens.css (generated from docs/design/system/tokens.json); the rem bindings of the
   type scale are generated from the same file by scripts/sync-design.mjs (css/type-rem.css), so a
   reader's text-size setting scales every step together (Dynamic Type on the web). This file is the
   design specification's own layer (design/src/planner.css, 16 October 2026), kept as drawn; what
   the working site adds is in site.css. Spacing is written per component on a 4px rhythm,
   because tokens.json has no spacing scale yet (the gap DESIGN.md names). */

/* ------------------------------------------------------------------ browser surfaces */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg-grouped);
  color: var(--label);
  font-family: var(--ui);
  font-size: var(--t-body);
  line-height: 1.47;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--tint);
  scrollbar-color: var(--fill-1) transparent;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--tint-edge);
}

a {
  color: var(--tint);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tint);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
}

.num,
time,
.tab-n {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ type roles (DS-F05) */

.t-large {
  font-size: var(--t-large-title);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.t-title1 {
  font-size: var(--t-title1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.t-title2 {
  font-size: var(--t-title2);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.t-title3 {
  font-size: var(--t-title3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.t-headline {
  font-size: var(--t-headline);
  font-weight: 600;
  line-height: 1.3;
}

.t-callout {
  font-size: var(--t-callout);
  line-height: 1.45;
}

.t-subhead {
  font-size: var(--t-subhead);
  line-height: 1.4;
}

.t-footnote {
  font-size: var(--t-footnote);
  line-height: 1.38;
}

.t-caption {
  font-size: var(--t-caption);
  line-height: 1.33;
}

.second {
  color: var(--label-2);
}

.lede {
  max-width: 34rem;
  margin-top: 12px;
  font-size: var(--t-callout);
  line-height: 1.45;
  color: var(--label-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ icons */

.ic {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic--sm {
  width: 16px;
  height: 16px;
}

.ic--lg {
  width: 24px;
  height: 24px;
}

.ic--fill {
  fill: currentColor;
  stroke: none;
}

/* ------------------------------------------------------------------ shell: phone first */

.wrap {
  padding: 0 var(--gutter);
}

/* The compact navigation bar. Transparent over the large title; once the title scrolls under it,
   it takes the material and a hairline and shows the title inline (HIG large-title collapse). */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-h);
  padding: 0 6px;
  background: var(--bg-grouped);
  border-bottom: 1px solid transparent;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.nav[data-stuck] {
  background: var(--material);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom-color: var(--separator);
}

.nav-title {
  position: absolute;
  left: 50%;
  max-width: 55%;
  overflow: hidden;
  font-size: var(--t-headline);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--fast) var(--ease);
}

.nav[data-stuck] .nav-title {
  opacity: 1;
}

/* Collapsed, the bar keeps the mark and gives the middle to the screen's own name. */
.nav[data-stuck] .brand > span:not(.brand-mark) {
  display: none;
}

.nav-side {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: var(--touch);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: var(--r-capsule);
  background: transparent;
  color: var(--tint);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.icon-btn:active {
  transform: scale(0.94);
  background: var(--fill-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 0 10px;
  color: var(--label);
  font-size: var(--t-subhead);
  font-weight: 600;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-control);
  background: var(--label);
  color: var(--bg-grouped);
  font-family: var(--serif);
  font-size: var(--t-headline);
  font-weight: 700;
  line-height: 1;
}

.brand small {
  font-size: var(--t-footnote);
  font-weight: 400;
  color: var(--label-2);
}

.head {
  padding: 2px var(--gutter) 0;
}

.head-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
  font-size: var(--t-subhead);
  color: var(--label-2);
}

.toolbar {
  display: none;
}

/* The bottom tab bar (components.css .tabbar), pinned. Three sections, never four. Sticky as the
   last thing on the page, so nothing can end up behind it. */
.tabbar {
  position: sticky;
  bottom: 0;
  margin-top: 40px;
  z-index: 30;
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}

.tab {
  min-height: var(--touch);
}

.has-tabbar {
  padding-bottom: 0;
}

.wrap .head {
  padding-left: 0;
  padding-right: 0;
}

.head-sub a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

/* ------------------------------------------------------------------ grouped inset lists */

.section {
  margin-top: 28px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 16px 8px;
}

.section-head h2 {
  font-size: var(--t-title3);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.section-head .count {
  font-size: var(--t-footnote);
  color: var(--label-2);
}

.group {
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--bg-card);
}

.group + .group {
  margin-top: 20px;
}

.group-title {
  margin: 0 16px 6px;
  font-size: var(--t-footnote);
  font-weight: 600;
  color: var(--label-2);
}

.group-foot {
  margin: 8px 16px 0;
  font-size: var(--t-footnote);
  line-height: 1.38;
  color: var(--label-2);
  text-wrap: pretty;
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--touch);
  padding: 11px 16px;
  color: var(--label);
  text-decoration: none;
}

/* The inset separator: starts where the text does, as an inset grouped list draws it. */
.cell + .cell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: var(--sep-from, 16px);
  border-top: 1px solid var(--separator-opaque);
}

.cell--icon {
  --sep-from: 56px;
}

.cell-body {
  flex: 1;
  min-width: 0;
}

.cell-title {
  display: block;
  font-size: var(--t-body);
  line-height: 1.3;
}

.cell-title b {
  font-weight: 600;
}

.cell-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--t-footnote);
  line-height: 1.38;
  color: var(--label-2);
}

.cell-value {
  flex: none;
  font-size: var(--t-subhead);
  color: var(--label-2);
  text-align: right;
}

.cell-go {
  flex: none;
  color: var(--label-3);
}

.cell--action {
  color: var(--tint);
  font-weight: 500;
}

.cell--action .cell-icon {
  background: var(--tint-wash);
  color: var(--tint);
}

.cell-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-control);
  background: var(--fill-3);
  color: var(--label);
}

button.cell {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

button.cell:active,
a.cell:active {
  background: var(--fill-4);
}

/* ------------------------------------------------------------------ segmented control (DS-C09)
   Apple's control at Togetha's floor: every option is 44px tall, not 32, and the chosen one sits
   on the card ground with a hairline rather than a drop shadow (DS-F04, DS-F06). */

.seg {
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-control);
  background: var(--fill-3);
}

.seg button,
.seg a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: calc(var(--r-control) - 2px);
  background: transparent;
  color: var(--label);
  font-size: var(--t-subhead);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.seg [aria-selected="true"],
.seg [aria-current="page"] {
  border-color: var(--separator-opaque);
  background: var(--bg-card);
  font-weight: 600;
}

.seg--full {
  display: grid;
  width: 100%;
}

/* ------------------------------------------------------------------ search (DS-C11, for schools) */

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid var(--separator-opaque);
  border-radius: var(--r-control);
  background: var(--bg-card);
  color: var(--label-2);
  transition: border-color var(--fast) var(--ease);
}

.search:focus-within {
  border-color: var(--tint);
  box-shadow: inset 0 0 0 1px var(--tint);
}

.search input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--label);
  font: inherit;
  font-size: var(--t-body);
  outline: none;
}

.search input::placeholder {
  color: var(--label-2);
}

.search-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--t-headline);
  font-weight: 600;
}

.search-hint {
  margin-top: 8px;
  font-size: var(--t-footnote);
  color: var(--label-2);
}

.clear-btn {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--label-2);
}

.clear-btn span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fill-1);
}

mark {
  background: none;
  color: inherit;
  font-weight: 700;
}

/* ------------------------------------------------------------------ the trust line */

.trust {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  font-size: var(--t-subhead);
  line-height: 1.4;
  color: var(--label-2);
}

.trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.trust li svg {
  margin-top: 1px;
  color: var(--label-2);
}

.trust b {
  color: var(--label);
  font-weight: 600;
}

/* ------------------------------------------------------------------ the year map
   Apple Calendar's year view, holding still: twelve small months, the school's holidays drawn as
   quiet bands across the days (never a personal colour, per the Calendar contract §10), and amber
   only on a day that still needs someone. Covered is neutral because covering is the family's own
   plan, not something the world confirmed (DS-P02). */

.ymap {
  --cols: 2;
  --gap-x: 14px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 18px var(--gap-x);
}

.ycard {
  padding: 14px 12px 16px;
  border-radius: var(--r-card);
  background: var(--bg-card);
}

.mm h3 {
  margin: 0 0 4px 2px;
  font-size: var(--t-subhead);
  font-weight: 600;
  line-height: 1.3;
}

/* The whole month is the target, as tapping a month in Apple's year view opens it; the name is the
   link a screen reader hears, with the month's count in its label. */
.mm {
  position: relative;
}

.mm h3 a::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--r-control);
}

.mm h3 a:focus-visible {
  outline: none;
}

.mm h3 a:focus-visible::after {
  outline: 3px solid var(--tint);
}

.mm h3 a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  text-decoration: none;
}

.mm-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 2px;
}

.mm-dow {
  padding-bottom: 2px;
  font-size: var(--t-caption2);
  line-height: 1.2;
  color: var(--label-2);
  text-align: center;
}

.d {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  font-size: var(--t-caption2);
  line-height: 1;
  color: var(--label);
}

.d span {
  position: relative;
  z-index: 1;
}

.d.we {
  color: var(--label-2);
}

.d.off {
  background: var(--fill-3);
  color: var(--label);
}

.d.off.we {
  color: var(--label-2);
}

.d.need {
  background: var(--needs-wash);
  color: var(--needs);
  font-weight: 700;
}

.d.trip {
  background: var(--fill-1);
}

.d.s {
  border-top-left-radius: var(--r-capsule);
  border-bottom-left-radius: var(--r-capsule);
}

.d.e {
  border-top-right-radius: var(--r-capsule);
  border-bottom-right-radius: var(--r-capsule);
}

.d.bh::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid var(--label-2);
  border-radius: 50%;
}

.d.today::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: var(--label);
}

.d.today span {
  color: var(--bg-card);
  font-weight: 700;
}

.d i {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 0;
  height: 0;
  border-top: 5px solid var(--label);
  border-left: 5px solid transparent;
}

.d.pending {
  color: var(--label-2);
}

.mm--dim .d.off,
.mm--dim .d.need {
  background: transparent;
}

.ymap-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  padding: 0 2px;
  font-size: var(--t-footnote);
  color: var(--label-2);
}

.ymap-key li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ymap-key .d {
  width: 20px;
}

/* ------------------------------------------------------------------ people: monograms, not colours
   The first version gave each carer a colour. Paper & pen has no categorical palette: one tint for
   action and a status family, each meaning one thing (DS-F02). So a person is their initial. */

.mono {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fill-3);
  color: var(--label);
  font-size: var(--t-footnote);
  font-weight: 600;
  line-height: 1;
}

.mono--lg {
  width: 36px;
  height: 36px;
  font-size: var(--t-subhead);
}

/* ------------------------------------------------------------------ status words (DS-V02, DS-P02) */

.state {
  white-space: nowrap;
}

.state svg {
  width: 14px;
  height: 14px;
}

.cert--read svg {
  width: 13px;
  height: 13px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  gap: 8px;
  padding: 0 14px 0 6px;
  cursor: pointer;
}

.chip .mono {
  width: 30px;
  height: 30px;
  background: var(--tint-wash);
  color: var(--tint);
}

.chip[aria-checked="true"] .mono {
  background: var(--on-tint);
  color: var(--tint);
}

.chip--plain {
  padding: 0 14px;
}

/* ------------------------------------------------------------------ provenance (DS-C04 / DS-C20) */

.source--published {
  margin-top: 16px;
  background: var(--bg-card);
}

.source-meta a {
  color: var(--tint);
}

.prov-note {
  margin-top: 10px;
  font-size: var(--t-footnote);
  line-height: 1.4;
  color: var(--label-2);
  text-wrap: pretty;
}

.unknown {
  font-style: italic;
  color: var(--label-2);
}

/* ------------------------------------------------------------------ the chosen school */

.picked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--bg-card);
}

.picked-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-control);
  background: var(--fill-3);
  color: var(--label);
}

/* An in-flight line keeps its place while it waits; a quiet dot moves, and stops under reduced
   motion (DS-F08). */
.working {
  display: inline-flex;
  gap: 3px;
  margin-top: 6px;
}

.working span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--label-2);
  animation: pulse 1.2s var(--ease) infinite;
}

.working span:nth-child(2) {
  animation-delay: 0.2s;
}

.working span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pulse {
  0%, 80%, 100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ forms */

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--touch);
  padding: 8px 16px;
}

.form-row + .form-row,
.cell + .form-row {
  border-top: 1px solid var(--separator-opaque);
}

.form-row label,
.form-row > span:first-child {
  flex: none;
  font-size: var(--t-body);
}

.form-row .inline-input {
  flex: 1;
}

.notice .needs-dot {
  flex: none;
}

.section-head .group-title {
  margin: 0;
  font-size: var(--t-footnote);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--label-2);
}

.foot--wide {
  max-width: 1180px;
}

.inline-input {
  min-width: 0;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--label);
  font: inherit;
  font-size: var(--t-body);
  text-align: right;
}

.inline-input::placeholder {
  color: var(--label-2);
}

.date-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--fill-3);
  color: var(--label);
  font-size: var(--t-subhead);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.date-pill--empty {
  color: var(--label-2);
}

.date-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  color: var(--label-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.actions .btn--filled {
  min-width: 10rem;
}

.btn-wide {
  width: 100%;
}

/* Destructive: Apple paints it red. Togetha's claret means missed and nothing else, so removing
   something is a plain control that asks first. */
.cell--remove {
  justify-content: center;
  color: var(--tint);
  font-weight: 500;
}

/* ------------------------------------------------------------------ sheets and dialogs (DS-C08)
   The one shadow (DS-F06) and the one authored motion (DS-F08) belong here. */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--scrim);
}

.sheet {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-height: calc(100svh - 40px);
  padding: 0 0 calc(var(--safe-bottom) - 10px);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--bg-grouped);
  box-shadow: var(--lift);
  animation: sheet-in var(--sheet-time) var(--sheet-curve);
}

.sheet--medium {
  height: 64svh;
}

.sheet--large {
  height: calc(100svh - 52px);
}

@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
}

.grabber {
  flex: none;
  width: 36px;
  height: 5px;
  margin: 6px auto 0;
  border-radius: var(--r-capsule);
  background: var(--fill-1);
}

.sheet-head {
  display: grid;
  flex: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 52px;
  padding: 0 8px;
}

.sheet-head h2 {
  font-size: var(--t-headline);
  font-weight: 600;
  text-align: center;
}

.sheet-head .btn {
  justify-self: end;
}

.sheet-head .btn:first-child {
  justify-self: start;
}

.sheet-body {
  flex: 1;
  overflow: auto;
  padding: 4px var(--gutter) 24px;
  overscroll-behavior: contain;
}

.sheet-title {
  padding: 0 4px;
}

.sheet-title p {
  margin-top: 2px;
  font-size: var(--t-subhead);
  color: var(--label-2);
}

/* ------------------------------------------------------------------ QR code */

.qr {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  padding: 10px;
  border-radius: var(--r-control);
  /* The one literal: a QR code must be dark on white to scan, in either appearance. */
  background: #ffffff;
}

.qr svg {
  width: 100%;
  height: 100%;
}

.link-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-control);
  background: var(--bg-sunken);
  font-size: var(--t-subhead);
  color: var(--label);
}

.link-box span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The link's words, its buttons, and under them the QR code once Show a QR code opens it. */
.share-link {
  padding: 14px 16px 16px;
}

.share-link .qr {
  margin-top: 14px;
}

/* ------------------------------------------------------------------ footer */

.foot {
  max-width: 44rem;
  margin: 48px auto 0;
  padding: 24px var(--gutter) 40px;
  border-top: 1px solid var(--separator-opaque);
  font-size: var(--t-footnote);
  line-height: 1.45;
  color: var(--label-2);
}

.foot p + p {
  margin-top: 8px;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--label);
  font-size: var(--t-subhead);
}

.foot-brand b {
  font-weight: 600;
}

/* The home page shows four months on a phone: enough to see what the planner draws. */
@media (max-width: 767px) {
  .ymap--teaser .mm:nth-child(n + 5) {
    display: none;
  }
}

/* ------------------------------------------------------------------ home */

.home-hero {
  padding: 12px var(--gutter) 0;
}

.home-hero .t-large {
  max-width: 15ch;
}

.home-search {
  margin-top: 24px;
}

.home-or {
  margin-top: 14px;
  font-size: var(--t-subhead);
}

.preview {
  margin-top: 32px;
  padding: 0 var(--gutter);
}

.preview-cap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 4px 10px;
  font-size: var(--t-footnote);
  color: var(--label-2);
}

.steps {
  display: grid;
  gap: 2px;
}

/* ------------------------------------------------------------------ the desktop toolbar (768+)
   A Mac-style unified toolbar: name at the leading edge, the section switcher in the middle as a
   segmented control (Calendar's Day/Week/Month/Year), actions at the trailing edge. The Togetha
   app's 268px rail is not borrowed: this site is not one of the app's four destinations. */

@media (min-width: 768px) {
  .nav,
  .tabbar {
    display: none;
  }

  .has-tabbar {
    padding-bottom: 0;
  }

  /* The toolbar's height, in one place: the holiday's pane beside the list sits under it, and a
     heading scrolled to sits below it. */
  :root {
    --toolbar-h: 73px;
  }

  html {
    scroll-padding-top: calc(var(--toolbar-h) + 12px);
  }

  .toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: var(--toolbar-h);
    padding: 6px 24px;
    border-bottom: 1px solid var(--separator);
    background: var(--material);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
  }

  .toolbar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .toolbar .brand {
    min-width: var(--touch);
    padding-left: 0;
  }

  .wrap,
  .head {
    padding-left: 32px;
    padding-right: 32px;
  }

  .ymap {
    --cols: 3;
  }

  .ymap--wide {
    --cols: 4;
    --gap-x: 24px;
  }

  .home-hero .lede {
    margin-top: 16px;
  }

  .home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 64px 32px 0;
  }

  .home-hero {
    padding: 8px 0 0;
  }

  .preview {
    margin-top: 0;
    padding: 0;
  }

  .center {
    max-width: 44rem;
    margin: 0 auto;
  }

  .sheet {
    inset: 50% auto auto 50%;
    width: min(560px, calc(100vw - 64px));
    height: auto;
    max-height: calc(100svh - 96px);
    padding-bottom: 8px;
    border-radius: var(--r-sheet);
    transform: translate(-50%, -50%);
    animation: dialog-in var(--sheet-time) var(--sheet-curve);
  }

  .sheet .grabber {
    display: none;
  }

  @keyframes dialog-in {
    from {
      opacity: 0;
      transform: translate(-50%, -46%);
    }
  }
}

/* Past 1120px a selection opens beside the list instead of taking the window (DS-L03). */
@media (min-width: 1120px) {
  /* The plan in a 420px pane and the open holiday beside it (the note's d2): opening a holiday is a
     selection here, as opening a Thread is, and the pick bar sits at the foot of the holiday's pane. */
  .panes {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    min-height: calc(100svh - var(--toolbar-h));
  }

  .pane-plan {
    padding-bottom: 24px;
    border-right: 1px solid var(--separator-opaque);
  }

  .pane-plan .wrap {
    padding-right: 16px;
    padding-left: 16px;
  }

  .pane-plan h1 {
    margin-top: 16px;
    font-size: var(--t-title1);
  }

  /* The holiday's pane stays under the toolbar while the list scrolls, so a holiday selected low in
     the list opens in view, its pick bar at the pane's foot (the review of #2771). */
  .pane-holiday {
    position: sticky;
    top: var(--toolbar-h);
    display: flex;
    flex-direction: column;
    align-self: start;
    height: calc(100svh - var(--toolbar-h));
    overflow-y: auto;
  }

  .pane-holiday .holiday-col {
    box-sizing: border-box;
    flex: 1;
    width: 100%;
    padding-top: 12px;
  }

  .pane-holiday .pick {
    position: sticky;
  }

  .hol-link[aria-current="true"] {
    background: var(--fill-4);
  }

  html body:has(.panes) {
    padding-bottom: 0;
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 28px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .split > .wrap,
  .split .head {
    padding-left: 0;
    padding-right: 0;
  }

  .pane .section-head {
    margin-top: 0;
  }

  .split--setup {
    grid-template-columns: minmax(0, 44rem) minmax(0, 1fr);
    gap: 48px;
    max-width: 1240px;
  }
}

/* ------------------------------------------------------------------ the year on top
   The plan as the founder signed it off on 24 October 2026 (docs/design/drafts/
   2026-10-24-the-year-on-top.md): the year on one card (DS-C24), a ring leading each holiday
   (DS-C26), one button to the next holiday to sort, and a holiday's own screen of day circles
   (DS-C25) with a bar that picks who the next taps go to (DS-C09's second form). Colour C, "Ink ring,
   plain tick": a day that needs someone is drawn in `needs`, never `needs-fill`, which is under the
   3:1 floor for a mark; a sorted holiday closes in ink, never sage. Status colours fill marks, never
   rows (DS-F02). */

.plan-col,
.holiday-col,
.year-col {
  max-width: var(--measure);
  margin: 0 auto;
}

/* Each screen fills the window, so the page's footer starts below the fold, as on a pushed screen. */
#main {
  min-height: calc(100svh - var(--nav-h));
}

.plan-group {
  margin-top: 16px;
}

.plan-group + .plan-group {
  margin-top: 16px;
}

/* The navigation bar's back link names the screen it returns to. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--touch);
  padding: 0 10px 0 2px;
  color: var(--tint);
  font-size: var(--t-body);
  text-decoration: none;
}

/* The year card: one link to the year, every weekday a mark. */
.year-card {
  display: block;
  margin-top: 14px;
  padding: 12px 12px 10px;
  border: 1px solid var(--separator-opaque);
  border-radius: var(--r-card);
  background: var(--bg-card);
  color: var(--label);
  text-decoration: none;
}

.year-card:active {
  background: var(--fill-4);
}

.year-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: var(--t-footnote);
  color: var(--label-2);
}

.year-card-head b {
  font-weight: 600;
  color: var(--label);
}

.year-card-year {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.year-card-year .ic {
  color: var(--label-3);
}

.mx {
  width: 100%;
  height: auto;
}

.mx-month {
  font-family: var(--ui);
  font-size: var(--t-caption2);
  font-weight: 500;
  fill: var(--label-2);
}

.mx-open {
  fill: var(--needs-tint);
  stroke: var(--needs);
  stroke-width: 1.3;
}

.mx-given,
.mx-today {
  fill: var(--label);
}

/* Two people: two small ink dots overlapping, the first in front, edged in the card colour. */
.mx-two--first {
  stroke: var(--bg-card);
  stroke-width: 1;
}

/* The away square in the card: fill-1 with a label-3 edge, 3.63:1 / 4.29:1 (the bible's contrast table). */
.mx-trip {
  fill: var(--fill-1);
  stroke: var(--label-3);
  stroke-width: 1;
}

.mx-bank,
.mx-pastoff {
  fill: none;
  stroke: var(--label-3);
  stroke-width: 1;
}

/* A day off that has gone stays faint on purpose: the bible's named exception (Decision Log 151 (k)). */
.mx-pastoff {
  opacity: 0.6;
}

.mx-dot {
  fill: var(--label-3);
  opacity: 0.6;
}

.mx-dot--past {
  opacity: 0.3;
}

/* The holiday list: a ring where a row's state goes (DS-C01), the reading's own label, its days. */
.hol-list {
  padding: 0;
}

.hol {
  position: relative;
}

.hol + .hol::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 58px;
  border-top: 1px solid var(--separator-opaque);
}

.hol-link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 16px;
  color: var(--label);
  text-decoration: none;
}

.hol-link:active {
  background: var(--fill-4);
}

.hol-ring {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
}

.hol-body {
  flex: 1;
  min-width: 0;
}

/* Two lines at most; the whole label is one tap away, on the holiday's own screen (DS-C01). */
.hol-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--t-body);
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.hol-kids {
  display: block;
  font-size: var(--t-footnote);
  line-height: 1.3;
  color: var(--label-2);
}

.hol-link .cell-go .ic {
  width: 16px;
  height: 16px;
}

.hol-when,
.hol-note {
  flex: none;
  font-size: var(--t-subhead);
  color: var(--label-2);
  white-space: nowrap;
}

/* The holiday ring (DS-C26). */
.ring {
  display: block;
  flex: none;
}

.ring-seg {
  fill: none;
  stroke-width: 3;
}

.ring-seg--given,
.ring-done {
  stroke: var(--label);
}

.ring-seg--open {
  stroke: var(--needs);
}

.ring-done {
  fill: none;
  stroke-width: 3;
}

.ring-tick {
  fill: none;
  stroke: var(--label);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ring-none {
  fill: none;
  stroke: var(--separator-opaque);
  stroke-width: 1.5;
}

.ring-count {
  font-family: var(--ui);
  font-size: var(--t-caption2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--needs);
}

/* The bars pinned under the thumb: Sort {holiday}, Save, and the pick bar. They take the material
   and a hairline, and float nothing (DS-F06). */
.sort-bar,
.pick {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--separator);
  background: var(--material);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}

.sort-bar {
  display: flex;
  justify-content: center;
}

.sort-bar .btn {
  width: 100%;
  max-width: calc(var(--measure) - 32px);
  min-height: 50px;
}

body:has(.sort-bar) {
  padding-bottom: 80px;
}

body:has(.pick) {
  padding-bottom: 132px;
}

/* The school's dates page (the note's 02-dates): Use these dates pinned at the foot, with Add your
   family under it while the family's forms are closed. */
.dates-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px var(--gutter) calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--separator);
  background: var(--material);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}

.dates-bar .btn {
  width: 100%;
  max-width: calc(var(--measure) - 32px);
}

.dates-bar .btn--filled {
  min-height: 50px;
}

body:has(.dates-bar) {
  padding-bottom: 132px;
}

.dates-page .head + .plan-group {
  margin-top: 4px;
}

.dates-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.dates-list li + li .cell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  border-top: 1px solid var(--separator-opaque);
}

.dates-row {
  box-sizing: border-box;
  min-height: 52px;
}

.dates-row .cert {
  font-size: inherit;
  font-style: italic;
  font-weight: 400;
  color: var(--label-2);
}

/* The family's own dates read "You said" upright; only a worked-out date is italic (DS-V02). */
.dates-row .cert:not(.cert--worked) {
  font-style: normal;
}

.dates-row .cell-go .ic {
  width: 16px;
  height: 16px;
}

/* On the dates page the year card is the year itself, not a way to it. */
.year-card--still:active {
  background: var(--bg-card);
}

/* A holiday's own screen. */
.holiday-head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.holiday-title {
  flex: 1;
  min-width: 0;
}

.holiday-head .ring {
  margin-bottom: 6px;
}

.holiday-dates {
  margin-top: 4px;
}

.holiday-line {
  font-size: var(--t-subhead);
  line-height: 1.6;
  color: var(--label-2);
}

.holiday-line .sep {
  color: var(--label-2);
}

.holiday-line .cert {
  font-size: inherit;
  font-style: italic;
  font-weight: 400;
  color: var(--label-2);
}

.was {
  color: var(--label-2);
  text-decoration-thickness: 1.5px;
}

.text-link {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tint);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* Inline in the dates line, the press area reaches 44px without changing the line's height. */
.holiday-line .text-link::after {
  content: "";
  position: absolute;
  inset: -13px -10px -11px;
}

.text-link--block {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: var(--touch);
  margin-top: 8px;
  font-size: var(--t-subhead);
  text-align: left;
  text-decoration: none;
}

.holiday-source {
  margin-top: 12px;
}

.holiday-more {
  margin-top: 12px;
}

/* Monday to Friday, a week a line: 52px circles on a holiday's screen (DS-C25). */
.weeks {
  display: grid;
  gap: 2px;
  margin-top: 18px;
}

.week {
  display: grid;
  grid-template-columns: minmax(40px, 58px) repeat(5, 52px);
  column-gap: clamp(2px, 2vw, 8px);
  align-items: center;
}

/* The week before and the week after a holiday sit outside a hairline (2A). */
.week--before {
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--separator);
}

.week--after {
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--separator);
}

/* The rows under the key, for the other holidays and trips in those weeks (2A). */
.holiday-around {
  margin-top: 16px;
}

.week-head span {
  font-size: var(--t-caption);
  color: var(--label-2);
  text-align: center;
}

.week-label {
  font-size: var(--t-footnote);
  color: var(--label-2);
  white-space: nowrap;
}

.day {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

span.day {
  cursor: default;
}

.day i {
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.day-ring {
  border: 1.5px dashed var(--needs);
  background: var(--needs-tint);
  color: var(--needs);
  font-size: var(--t-callout);
  font-weight: 600;
}

/* Given, the ink fills the circle from its middle: the bible's 180ms state change (DS-F08). */
.day-ink {
  background: var(--label);
  color: var(--bg-card);
  font-size: var(--t-headline);
  font-weight: 700;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path var(--fast) var(--ease);
}

.day[data-s="given"] .day-ink {
  clip-path: circle(50% at 50% 50%);
}

.day[data-s="given"] .day-ring {
  border-color: transparent;
}

/*
 * Two people on a day (DS-C25, 3G): two ink discs, 30px each, overlapping inside the 52px circle.
 * The first is in front, edged in the ground colour so the two read as two; the second's letters sit
 * in the part of it the first does not cover, so neither is clipped. At 11px, the scale's smallest
 * step, a pair's two-letter names (Sm) fit that part.
 */
.day[data-s="two"] .day-ring {
  border-color: transparent;
  background: none;
  color: transparent;
}

.day .day-ink--two {
  inset: 0;
  background: none;
  border-radius: 0;
  clip-path: none;
  transition: none;
  font-size: var(--t-caption2);
}

.day-ink--two b {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: var(--label);
  color: var(--bg-card);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.day-ink--two b:first-child {
  left: 0;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--bg-grouped);
}

.day-ink--two b:last-child {
  right: 0;
  padding-left: 10px;
}

.slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--label-3);
  font-size: var(--t-footnote);
}

.slot-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fill-1);
}

.slot-bank {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--label-2);
  border-radius: 50%;
}

.slot-away {
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: center;
  border: 1.25px solid var(--label-2);
  border-radius: var(--r-card);
  background: var(--fill-3);
  color: var(--label-2);
}

.slot-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.slot-open s {
  font-size: var(--t-callout);
  color: var(--label-2);
  text-decoration-thickness: 1.5px;
}

.slot-open span {
  margin-top: 3px;
  font-size: var(--t-caption);
  color: var(--label-2);
}

/* The "pick a person" bar (DS-C09's second form): a radio group of 44px chips, then +. */
.pick-in {
  max-width: calc(var(--measure) - 32px);
  margin: 0 auto;
}

.pick-line {
  margin: 0 0 6px;
  font-size: var(--t-footnote);
  line-height: 1.4;
  color: var(--label-2);
}

.pick-line b {
  font-weight: 600;
  color: var(--label);
}

.pick-chips,
.pick-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 16px 0 6px;
  border: 0;
  border-radius: var(--r-capsule);
  background: var(--fill-3);
  color: var(--label);
  font: inherit;
  font-size: var(--t-callout);
  font-weight: 600;
  cursor: pointer;
}

.pick-mono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--label);
  font-size: var(--t-footnote);
}

.pick-chip[aria-checked="true"] {
  background: var(--label);
  color: var(--bg-card);
}

.pick-chip--add {
  justify-content: center;
  width: var(--touch);
  padding: 0;
  color: var(--tint);
}

.pick-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pick-input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch);
  padding: 0 12px;
  border: 1px solid var(--separator-opaque);
  border-radius: var(--r-control);
  background: var(--bg-card);
  color: var(--label);
  font: inherit;
}

/* Which days is the school open? */
.open-days {
  padding: 0;
}

.open-day {
  min-height: 52px;
}

.open-days li + li .open-day::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  border-top: 1px solid var(--separator-opaque);
}

.open-check {
  flex: none;
  color: var(--tint);
  visibility: hidden;
}

.open-day[aria-pressed="true"] .open-check {
  visibility: visible;
}

/* The year: twelve small month grids, two across. */
.year-count {
  margin-top: 4px;
  font-size: var(--t-body);
  color: var(--label-2);
}

.year-count b {
  font-weight: 600;
  color: var(--label);
}

.ym-grid i {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.ym-grid i.op {
  border: 1.25px dashed var(--needs);
  background: var(--needs-tint);
}

.ym-grid i.gv {
  background: var(--label);
  color: var(--bg-card);
  font-weight: 700;
}

/*
 * Two people in a month grid (DS-C24, 3G): two small discs set corner to corner, the first top left
 * and in front, each holding that person's first letter inside its own disc and clear of the other.
 */
.ym-grid i.tw {
  position: relative;
  border-radius: 0;
}

.ym-grid i.tw b {
  position: absolute;
  display: grid;
  place-items: center;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--label);
  color: var(--bg-card);
  font-size: var(--t-caption2);
  font-weight: 700;
  line-height: 1;
}

.ym-grid i.tw b:first-child {
  top: 0;
  left: 0;
  z-index: 1;
  box-shadow: 0 0 0 1.5px var(--bg-grouped);
}

.ym-grid i.tw b:last-child {
  right: 0;
  bottom: 0;
}

/*
 * The key line (DS-C24, DS-C25; Decision Log 151 (c)): one line of marks and words naming only the
 * marks the screen drew. Each mark is drawn as it is on that screen, at the key's size, and at full
 * strength, so it clears 3:1 even where the screen's own mark is faint on purpose. The words are
 * label-2 at the footnote step, never a status colour (DS-F02). It wraps rather than shrink.
 */
.mark-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: var(--t-footnote);
  line-height: 1.3;
  color: var(--label-2);
}

.mark-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.key-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-style: normal;
  font-size: var(--t-caption2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Inside the year card, under a hairline. */
.mark-key--card {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--separator);
}

/* Needs someone: solid in the card, dashed on a holiday's screen and in a month grid. */
.key-mark--needs::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1.3px solid var(--needs);
  border-radius: 50%;
  background: var(--needs-tint);
}

.mark-key--holiday .key-mark--needs::before,
.mark-key--grid .key-mark--needs::before {
  width: 16px;
  height: 16px;
  border: 1.25px dashed var(--needs);
}

/* Sorted: an ink disc; on the year screen, each person's letters in one. */
.key-mark--sorted {
  background: var(--label);
  color: var(--bg-card);
}

.key-mark--two-letters {
  width: 24px;
  height: 24px;
}

.mark-key--card .key-mark--sorted {
  width: 10px;
  height: 10px;
  margin: 4px;
}

/* Two people: two ink discs overlapping, the first in front, as the screen draws a shared day. */
.key-mark--twoPeople {
  position: relative;
  width: 24px;
}

.key-mark--twoPeople::before,
.key-mark--twoPeople::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--label);
}

.key-mark--twoPeople::before {
  left: 0;
  z-index: 1;
  box-shadow: 0 0 0 1.5px var(--bg-grouped);
}

.key-mark--twoPeople::after {
  right: 0;
}

.mark-key--card .key-mark--twoPeople {
  width: 16px;
}

.mark-key--card .key-mark--twoPeople::before,
.mark-key--card .key-mark--twoPeople::after {
  top: 4px;
  width: 9px;
  height: 9px;
}

.mark-key--card .key-mark--twoPeople::before {
  box-shadow: 0 0 0 1px var(--bg-card);
}

/* All sorted: the ring closed in ink with a plain tick (DS-C26). */
.key-mark--allSorted {
  border: 2px solid var(--label);
}

.key-mark--allSorted::before {
  content: "";
  width: 6px;
  height: 3px;
  margin-top: -2px;
  border-bottom: 1.8px solid var(--label);
  border-left: 1.8px solid var(--label);
  transform: rotate(-45deg);
}

/* Bank holiday: a thin ring. */
.key-mark--bank::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--label-3);
  border-radius: 50%;
}

.mark-key--holiday .key-mark--bank::before,
.mark-key--grid .key-mark--bank::before {
  width: 14px;
  height: 14px;
  border: 1.25px solid var(--label-2);
}

/* Away: a rounded square with an edge. */
.key-mark--away {
  border-radius: 0;
}

.key-mark--away::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--label-3);
  border-radius: 2px;
  background: var(--fill-1);
}

.mark-key--holiday .key-mark--away::before,
.mark-key--grid .key-mark--away::before {
  width: 16px;
  height: 16px;
  border: 1.25px solid var(--label-2);
  border-radius: 4px;
  background: var(--fill-3);
}

/* School day: a date the family marked Open on a holiday's screen, struck through. */
.key-mark--schoolDay::before {
  content: "1";
  color: var(--label-2);
  font-size: var(--t-footnote);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* No one needed: a holiday screen's grey dot. */
.key-mark--noOneNeeded::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--label-2);
}

/*
 * In the year card, the card's own dot: r=1.5 in label-3. At full strength, not the card's 0.6, since
 * the key draws its marks at full strength so the key itself clears the floor (BIBLE.md, the named
 * exception for faded marks).
 */
.mark-key--card .key-mark--noOneNeeded::before {
  width: 3px;
  height: 3px;
  background: var(--label-3);
}

/* Past: the card's ring for a day off that has gone. */
.key-mark--past::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid var(--label-3);
  border-radius: 50%;
}

/* Today: the card's bar, a month grid's outline. */
.key-mark--today {
  border-radius: 0;
}

.key-mark--today::before {
  content: "";
  width: 1.6px;
  height: 11px;
  border-radius: 1px;
  background: var(--label);
}

.mark-key--grid .key-mark--today {
  outline: 1.25px solid var(--label);
  outline-offset: -1.25px;
  border-radius: 50%;
}

.mark-key--grid .key-mark--today::before {
  content: none;
}

.year-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  margin-top: 16px;
}

/*
 * A month that holds a holiday is one link to it (1A, DS-C24). The year looks as it did: the link's
 * padding is cancelled by an equal negative margin, so it reaches 7px into the space either side and
 * 6px above and below without moving a grid. Pressed, it draws a 1.5px label-2 edge inside its
 * rounded corners, never a fill, so the ground under the dates does not change.
 */
.ym--link {
  display: block;
  margin: -6px -7px;
  padding: 6px 7px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.ym--link:active {
  box-shadow: inset 0 0 0 1.5px var(--label-2);
}

.ym h3 {
  margin: 0 0 4px;
  font-size: var(--t-footnote);
  font-weight: 600;
  line-height: 1.4;
}

.ym h3 span {
  font-weight: 400;
  color: var(--label-2);
}

.ym-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 2px;
}

.ym-grid i {
  aspect-ratio: 1;
  margin: 1px;
  font-size: var(--t-caption2);
  color: var(--label-2);
}

/* Weekday letters, weekends and bank holidays in label-2, 5.73:1 / 7.07:1 (the bible's contrast table). */
.ym-grid i.we,
.ym-grid i.bk,
.ym-grid i.ym-letter {
  color: var(--label-2);
}

/* A bank holiday is its date inside a thin ring, so it is told from a weekend by shape. */
.ym-grid i.bk {
  box-shadow: inset 0 0 0 1px var(--label-2);
}

.ym-grid i.ym-letter {
  aspect-ratio: auto;
  height: 14px;
}

.ym-grid i.pa {
  opacity: 0.45;
}

.ym-grid i.op {
  color: var(--needs);
  font-weight: 600;
}

.ym-grid i.tr {
  border-radius: 4px;
  background: var(--fill-3);
  box-shadow: inset 0 0 0 1.25px var(--label-2);
}

.ym-grid i.td {
  outline: 1.25px solid var(--label);
  outline-offset: -1.25px;
  color: var(--label);
  font-weight: 700;
}

/* Family, and Trips and costs (the note's 11 to 15): a label above each group, rows that push. */
.group-label {
  margin: 24px 16px 7px;
  font-size: var(--t-footnote);
  font-weight: 400;
  line-height: 1.4;
  color: var(--label-2);
}

.cell--add {
  color: var(--tint);
}

.cell-add {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  color: var(--tint);
}

.cell-icon--plain {
  background: transparent;
  color: var(--label-2);
}

a.cell .cell-value,
.cell .cell-value {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-row {
  min-height: 60px;
}

.source-row-open {
  padding: 0 16px 12px;
  font-size: var(--t-subhead);
}

.source-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--t-footnote);
  word-break: break-all;
}

.source-row-fill {
  margin-top: 8px;
  font-weight: 600;
}

.kind-choice {
  min-height: 52px;
}

.kind-choice[aria-checked="true"] .open-check {
  visibility: visible;
}

.kind-choice + .kind-choice::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  border-top: 1px solid var(--separator-opaque);
}

.leave-days {
  justify-content: space-between;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 2px;
}

.stepper button {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: var(--fill-3);
  color: var(--tint);
  cursor: pointer;
}

.stepper output {
  min-width: 40px;
  font-weight: 600;
  text-align: center;
}

.trip-who {
  margin: 0 0 4px;
}

.pick-chip[aria-pressed="true"] {
  background: var(--label);
  color: var(--bg-card);
}

/* The year's month grids four across from 1,120px (the note's d3), after the rules they widen. */
@media (min-width: 1120px) {
  .year-col {
    max-width: 1040px;
  }

  .year-months {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}

/* ------------------------------------------------------------------ reduced motion (DS-F08) */

@media (prefers-reduced-motion: reduce) {
  /* A day circle's ink appears at once: nothing moves (DS-F08). */
  .day-ink {
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Who's off on a holiday's screen with two schools (FR-27): a run's days are data, so they wrap
   rather than being cut short. */
.holiday-kids {
  margin-top: 2px;
}

.whos-off .cell-value {
  max-width: 60%;
  overflow: visible;
  white-space: normal;
}

.whos-off .day-whole {
  white-space: nowrap;
}

/* Family's row keeps its word whole; the names beside it give way and wrap onto a second line, and
   the Family screen lists them all (the review of #2771, on #2769's row). */
.plan-more .cell-body {
  flex: 1 0 auto;
}

.plan-more .cell-value {
  flex: 0 1 auto;
  min-width: 0;
}

/* A day marked a school day is a link to the screen it was marked on, to change it back. */
.slot--link {
  border-radius: 50%;
  text-decoration: none;
}

.slot--link:active {
  background: var(--fill-4);
}

/* Under the next-year row, why a school's dates for that year are not there, with what to do. */
.next-year-notices .notice {
  margin-top: 12px;
}

/*
 * The home page (2B; BIBLE.md, "The home page's three sections"; mock p2-b-home): the title, three
 * short lines, the search and "Free. No account.", then three sections from the example family.
 */
.home-steps {
  margin: 8px 0 0;
  font-size: var(--t-title3);
  font-weight: 600;
  line-height: 1.25;
}

.home-search .search-hint {
  margin-top: 10px;
}

.home-example {
  padding: 0 var(--gutter);
}

.home-section {
  margin-top: 28px;
}

.home-section-h {
  margin: 0 0 10px;
  font-size: var(--t-headline);
  font-weight: 600;
}

.home-section .year-card {
  margin-top: 0;
}

.home-days {
  padding: 14px 16px 12px;
  border: 1px solid var(--separator-opaque);
  border-radius: var(--r-card);
  background: var(--bg-card);
}

.home-days-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.home-days-name {
  flex: 1;
  font-size: var(--t-headline);
  font-weight: 600;
}

.home-days-when {
  font-size: var(--t-subhead);
  color: var(--label-2);
}

.home-days-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  gap: 4px;
}

.home-days-letters {
  margin-bottom: 4px;
  font-size: var(--t-footnote);
  color: var(--label-2);
}

.home-example-cap {
  margin: 8px 16px 0;
  font-size: var(--t-footnote);
  color: var(--label-2);
}

@media (min-width: 1120px) {
  .home-example {
    padding: 0;
  }

  .home-example .home-section:first-child {
    margin-top: 0;
  }
}

/*
 * The School group on a child's screen and on Add a child (1B; BIBLE.md, "The School group on Add a
 * child", DS-C11 inside a form): the plan's schools as choices, a search inside the group whose
 * matches open in place, and once a school is picked, its row ticked with Change school under it.
 */
.school-choice {
  width: 100%;
  text-align: left;
}

.school-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  border: 1.5px solid var(--label-2);
  border-radius: 50%;
}

.school-mark--on {
  border-color: var(--tint);
  background: var(--tint);
  color: var(--bg-card);
}

.school-choice .cell-title b {
  font-weight: 700;
}

.school-reading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--label-2);
}

.school-change {
  width: 100%;
  color: var(--tint);
  text-align: left;
}

.school-search {
  padding: 8px var(--inset, 16px);
}

.school-search .search {
  min-height: 48px;
}

/* The matches scroll in the room left above the keyboard (keepMatchesAboveTheKeyboard). */
.school-matches {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.school-none {
  margin: 0;
  padding: 10px var(--inset, 16px);
}

/* The no-match words (FR-41) sit inside the School group, at its own inset, as .school-none does. */
.school-no-match {
  padding: 10px 0;
}

.school-no-match .group-title,
.school-no-match .group-foot {
  margin: 0 var(--inset, 16px);
}

.school-no-match .group-foot {
  margin-top: 4px;
}

.school-enter {
  color: var(--tint);
}

.school-matches .attribution {
  margin: 0;
  padding: 8px var(--inset, 16px) 12px;
}

/* Your family (4A; mock p4-a2-family): a first name, then its year group or who they are, on one row. */
.family-row .family-name {
  text-align: left;
}

.family-row .select-pill {
  flex: none;
}