/* School Holiday Planner — what the working site adds to the design's layer (planner.css).
   Never knows: a colour, a radius, a duration or a type size. Every one arrives as a var() from
   tokens.css, as in planner.css. The two literal colours are the QR code's, and they are marked.
   These are the parts the mockups show but did not need to work: a native select drawn as the
   pill the mock draws, a date chosen with the device's own picker, a month at a finger's size,
   the confirmation dialog, the toast, and the empty and read-only states. */

/* ------------------------------------------------------------------ faces
   Geist and Source Serif 4 (SIL OFL 1.1), from docs/design/redesign-2026-09/fonts. On an Apple
   device the stack in tokens.css reaches SF and New York first and these never load. */

@font-face {
  font-family: "Geist";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4.woff2") format("woff2");
}

/* ------------------------------------------------------------------ page */

html.sheet-open body {
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 10px 14px;
  border-radius: var(--r-control);
  background: var(--bg-card);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

main:focus {
  outline: none;
}

.page-pad {
  padding-top: 20px;
}

.noscript {
  max-width: 44rem;
  margin: 20px auto;
  padding: 0 var(--gutter);
  color: var(--label-2);
}

.notices {
  padding-top: 8px;
}

.notices .notice p + p,
.notice .btn-row {
  margin-top: 8px;
}

.notice .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

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

.group--gap {
  margin-top: 10px;
}

.form-error:empty {
  display: none;
}

.form-error {
  margin: 12px 4px 0;
  font-size: var(--t-subhead);
  font-weight: 600;
  color: var(--needs);
}

/* The email sheet's "Copy the link instead": the link and its button read as ordinary text. */
.form-error .link-box,
.form-error .btn-row {
  margin-top: 8px;
  font-weight: 400;
  color: var(--label);
}

.unknown {
  font-style: italic;
}

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

.home-resume {
  justify-content: space-between;
  margin-top: 16px;
}

.home-results {
  margin-top: 12px;
}

.home-results:empty {
  margin-top: 0;
}

.home-results .group-title {
  margin-top: 4px;
}

.search-form {
  margin-top: 16px;
}

.loading-line {
  font-style: italic;
}

/* ------------------------------------------------------------------ controls the mock draws as pills */

/* A native select, so the device's own list opens and a screen reader names it, drawn as the
   mock's grey pill with its chevron. */
.select-pill {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  font: inherit;
  font-size: var(--t-subhead);
  cursor: pointer;
}

.select-pill {
  background-color: var(--fill-3);
}

.select-pill:disabled {
  background-image: none;
  padding-right: 12px;
  cursor: default;
  opacity: 1;
}

/* A day is chosen with the device's own picker, never typed, and shown back with its weekday
   (DS-C16). The input covers the pill and is see-through; the pill shows "Tue 1 Sep 2026". */
.date-choice,
.date-add {
  position: relative;
  cursor: pointer;
}

.date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: var(--touch);
  margin: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.date-choice:focus-within,
.date-add:focus-within {
  outline: 3px solid var(--tint);
  outline-offset: 2px;
}

.date-native {
  min-height: var(--touch);
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--fill-3);
  color: var(--label);
  font: inherit;
  font-size: var(--t-subhead);
  font-variant-numeric: tabular-nums;
  color-scheme: light dark;
}

.form-row--wrap {
  flex-wrap: wrap;
}

.form-row--spread {
  row-gap: 6px;
}

.form-row--spread > .date-pill {
  margin-left: auto;
}

.form-row--end {
  justify-content: flex-end;
}

/* On a phone the name takes its own line and the two days sit under it; in a wider column they
   share one line, as the mock draws them. */
.inline-input--left {
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* A holiday's name and its remove button share a line, so on a phone the button stays beside the
   name it removes and the two days sit under them. */
.name-and-remove {
  display: flex;
  flex: 1 1 11rem;
  align-items: center;
  gap: 4px;
  min-width: 11rem;
}

.foot--planner {
  margin-top: 40px;
}

.row-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.num-input {
  width: 4.5em;
  flex: none;
  padding-right: 4px;
  font-variant-numeric: tabular-nums;
}

.icon-only {
  padding: 0;
}

.cell--top {
  align-items: flex-start;
}

.icon-btn:disabled {
  color: var(--label-3);
  cursor: default;
}

/* A tick in a grouped row, drawn by the browser in the tint. */
.pick-check {
  cursor: pointer;
}

.switch {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--tint);
  cursor: pointer;
}

/* ------------------------------------------------------------------ the day sheet's choices */

.pick {
  cursor: pointer;
}

.pick-mark {
  flex: none;
  color: var(--tint);
  visibility: hidden;
}

.pick:has(input:checked) .pick-mark {
  visibility: visible;
}

.pick:has(input:focus-visible) {
  outline: 3px solid var(--tint);
  outline-offset: -3px;
}

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

.trip-note {
  margin-top: 8px;
}

/* ------------------------------------------------------------------ sheets */

.sheet--small {
  height: auto;
}

.ask-body {
  padding: 4px 4px 0;
  font-size: var(--t-callout);
  line-height: 1.45;
  color: var(--label-2);
}

.sheet .actions {
  margin-top: 20px;
}

.link-pad {
  padding: 0 16px 16px;
}

/* The second literal: the QR code's modules, dark on the white quiet zone planner.css draws, in
   either appearance, because a code has to be dark on light to scan. */
.qr-ink {
  fill: #1a1d21;
}

@media (max-width: 420px) {
  .qr {
    width: 132px;
    height: 132px;
  }
}

@media (min-width: 768px) {
  .sheet--medium {
    width: min(460px, calc(100vw - 64px));
  }

  .sheet--small {
    width: min(420px, calc(100vw - 64px));
  }
}

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 12px);
  z-index: 70;
  max-width: min(32rem, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--r-control);
  background: var(--label);
  color: var(--bg-card);
  font-size: var(--t-subhead);
  line-height: 1.35;
  box-shadow: var(--lift);
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .toast {
    bottom: 24px;
  }
}

/* ------------------------------------------------------------------ empty and print */

.empty .actions {
  margin-top: 24px;
}

.print-only {
  display: none;
}

/* ------------------------------------------------------------------ the privacy page */

.prose {
  max-width: 40rem;
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
}

.prose h2 {
  margin-top: 32px;
  font-size: var(--t-title3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.prose p,
.prose li {
  margin-top: 10px;
  font-size: var(--t-callout);
  line-height: 1.55;
  text-wrap: pretty;
}

.prose ul {
  padding-left: 1.2em;
  list-style: disc;
}

.prose .lede {
  max-width: none;
}

@media (min-width: 768px) {
  .prose {
    padding-top: 40px;
  }
}

/* The home page's bar carries the school page's heading, the school's name, once the large title
   scrolls away (#2673). Centred between "Search" and "Open a plan", it keeps clear of both, about
   116 px each at 360 and 390, and ends in an ellipsis; the whole name is the heading. */
#home-nav .nav-title {
  max-width: calc(100% - 240px);
}

/* Show source on a holiday's screen before there is a plan (the note "The year on top"): it opens in
   place under the dates line, one line after another, each what the page calls the period above its
   DS-C20 block (FR-39 as amended on 20 October 2026). */
.reveal-body {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.reveal-body .reveal-name {
  margin: 4px 0 0;
}