/* The Verify bar.
 *
 * The bottom-left control that reveals every [verify] chip and walks them one
 * at a time. It is OURS, not the design pack's: public/legacy/verify-mode.js
 * builds it, and the 2026-09 design.css styles the chips (.verify) but knows
 * nothing about the bar. Lifted out of the retiring wps-site.css so it
 * survives the redesign, and kept separate so design.css stays byte-identical
 * to the handoff and can be re-imported when a new pack arrives.
 */
.vbar{position:fixed;left:12px;bottom:12px;z-index:200;display:flex;align-items:center;gap:.4rem;background:var(--foot);border:1px solid rgba(250,247,239,.2);border-radius:999px;padding:.32rem;box-shadow:0 12px 30px -14px rgba(0,0,0,.45);max-width:34px;overflow:hidden;transition:max-width .3s cubic-bezier(.2,.8,.3,1),background .2s;opacity:.5}
.vbar:hover,.vbar:focus-within,.vbar.open{max-width:min(92vw,560px);opacity:1}
@media (max-width:939px){.vbar{bottom:84px;left:10px}}
.vbar__t{flex:none;min-width:0}
.vbar__t span{white-space:nowrap;opacity:0;transition:opacity .2s}
.vbar:hover .vbar__t span,.vbar:focus-within .vbar__t span,.vbar.open .vbar__t span{opacity:1}
.vbar__t i{margin:0 .12rem}
.vbar__t{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;background:transparent;border:0;color:rgba(250,247,239,.8);cursor:pointer;padding:.42rem .7rem;border-radius:999px}
.vbar__t:hover{background:rgba(250,247,239,.1);color:var(--paper)}
.vbar__t i{width:7px;height:7px;border-radius:50%;background:#8A9679;display:block}
.vbar__t[aria-pressed="true"]{background:var(--sun);color:#221A08}
.vbar__t[aria-pressed="true"] i{background:#C4381F}
.vbar__nav[hidden]{display:none}
.vbar__nav{display:flex;align-items:center;gap:.35rem;padding-left:.35rem;border-left:1px solid rgba(250,247,239,.2)}
.vbar__b,.vbar__x{font-family:var(--mono);font-size:.68rem;background:rgba(250,247,239,.1);border:0;color:var(--paper);cursor:pointer;padding:.42rem .68rem;border-radius:999px;line-height:1}
.vbar__b:hover,.vbar__x:hover{background:rgba(250,247,239,.24)}
.vbar__x{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase}
.vbar__count{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:rgba(250,247,239,.75);min-width:4.4em;text-align:center}
.vbar__all{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sun-lt);text-decoration:none;padding:.42rem .5rem}
.vbar__all:hover{color:var(--paper);text-decoration:underline}
@media print{.vbar{display:none}}

/* ═══════════════════════════════════════════════════════════════
   The [hidden] guard.

   The design pack sets display:flex / display:block on elements it
   also toggles with the `hidden` ATTRIBUTE. A display declaration
   beats `hidden`'s built-in display:none, silently breaking every
   element toggled via the hidden attribute. This has now bitten
   .vbar__nav and .slot__times. One guard, applied everywhere.

   This comment's opening `/*` had been lost, so the four lines
   below it parsed as a malformed selector and CSS error recovery
   discarded the rule that followed — which was the guard itself.
   Verified in a browser: the rule did not parse, and a [hidden]
   element with display:flex still computed to flex.
   ═══════════════════════════════════════════════════════════════ */
[hidden]{display:none!important}

/* Handout downloads.
 *
 * Ours, not the design pack's: these blocks are injected by
 * scripts/convert-design.mjs from its DOCUMENT_LINKS table, because the slugs
 * are rows in this project's documents table and the pack cannot know them.
 * Styled here for the same reason design.css is left alone — so it stays
 * byte-identical to the handoff and can be re-imported when a new pack lands.
 */
/* Centred, always. These sit inside a section's centred column; the cap and
   the auto margins are a safety net so one that ever lands OUTSIDE a column
   centres rather than spanning from padding edge to padding edge, which is
   how the "After your visit" callout came to hang off the left of the page. */
.doc-download { display: block; max-width: 1100px; margin: 2rem auto 0; }
.doc-download__link {
  display: block;
  padding: 1.15rem 1.35rem;
  border: 2px solid #F5C531;
  border-radius: 14px;
  background: #FAF6EC;
  color: #22301E;
  text-decoration: none;
  max-width: 44rem;
  transition: background .18s ease, transform .18s ease;
}
.doc-download__link:hover,
.doc-download__link:focus-visible { background: #FCF3DA; transform: translateY(-1px); }
.doc-download__link strong {
  display: block;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -.01em;
  margin-bottom: .35rem;
}
.doc-download__link span { display: block; font-size: .97rem; line-height: 1.55; color: #56663F; max-width: 58ch; }
.doc-download__link em { display: block; margin-top: .7rem; font-style: normal; font-weight: 700; font-size: .9rem; color: #56663F; }
/* On the dark and sage grounds the paper card would fight the section. */
.on-ink .doc-download__link, .on-sage .doc-download__link { background: rgba(250,247,239,.06); color: #FAF6EC; }
.on-ink .doc-download__link span, .on-ink .doc-download__link em,
.on-sage .doc-download__link span, .on-sage .doc-download__link em { color: #CBD4B2; }

/* The calendar strip's month dots.
 *
 * The pack authors these as `height:15px;border-radius:50%` with no width, so
 * inside `grid-template-columns:repeat(7,1fr)` each stretched to its whole
 * column and the row read as squashed, touching ovals. The width is restored by
 * the converter (a circle with no width is always that bug); the behaviour
 * below is ours.
 *
 * Each dot is one month. Growing on hover makes the row feel like something you
 * can read rather than decoration, and the `title` the pack already puts on
 * each one names the month.
 */
.dot-row { align-items: center; justify-items: center; }
.dot-row > span {
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s ease;
  transform-origin: center;
  cursor: default;
}
.dot-row > span:hover {
  transform: scale(1.55);
  box-shadow: 0 2px 8px rgba(34, 48, 30, .28);
}
/* The row is decorative motion, so it stops when motion is turned down. */
@media (prefers-reduced-motion: reduce) {
  .dot-row > span { transition: none; }
  .dot-row > span:hover { transform: none; box-shadow: 0 0 0 3px rgba(34, 48, 30, .22); }
}

/* The grain switch. Sits in the same bar and cycles
   auto -> off -> paper -> cloth -> fibre, so a ground can be compared against
   each texture without a rebuild. See grain.css for what it actually swaps. */
.vbar__g{flex:none;white-space:nowrap;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(250,247,239,.1);border:0;color:rgba(250,247,239,.85);cursor:pointer;padding:.42rem .68rem;border-radius:999px;margin-left:.35rem;opacity:0;transition:opacity .2s}
.vbar:hover .vbar__g,.vbar:focus-within .vbar__g,.vbar.open .vbar__g{opacity:1}
.vbar__g:hover{background:rgba(250,247,239,.24);color:var(--paper)}

/* ═══════════════════════════════════════════════════════════════
   Form controls that fit the box they are in.

   The pack styles every field with `padding:12px 14px` and a 2px
   border and sets NO box-sizing. design.css declares it nowhere,
   so the initial `content-box` applies: inside a
   `grid-template-columns:1fr 1fr` track, the field's content box
   is one track wide and the 28px of padding plus 4px of border
   then push it 32px past that track.

   Measured on the tour form at 390px: five controls extended past
   the right edge of the screen. That is the school's only enquiry
   form, on the device most parents open it with.

   Scoped to the fields rather than set as a global `*` reset,
   because design.css was authored without one and a blanket rule
   would quietly re-lay-out all 30 pages to fix one form.
   ═══════════════════════════════════════════════════════════════ */
.page input,
.page select,
.page textarea,
.page button {
  box-sizing: border-box;
  max-width: 100%;
}

/* Two-up field rows are fine on a laptop and impossible on a phone:
   a 1fr track at 390px leaves ~170px for "First name" plus its
   padding. Below the pack's own small breakpoint they stack. */
@media (max-width: 560px) {
  .page form [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   The CAPE section on a phone.

   On a laptop this is the best thing on the site: a 340vh section
   whose inner track is translated sideways by a scroll-driven
   animation, so four steps pass through a pinned frame as you
   scroll. On a phone the sideways motion competes with the thumb's
   vertical scroll — the reader either skips it or feels stuck, and
   this is the site's central idea, so it is the worst place to
   lose someone.

   Below 900px the same markup stacks instead: the section stops
   being 340vh tall, the frame stops being pinned, the track stops
   being translated, and the four steps become four ordinary blocks
   in reading order. Nothing is hidden and no content is duplicated
   — it is one breakpoint over markup that already exists.

   `!important` is needed on the steps because their width and
   height are inline (`width:100vw;height:100%`) and an inline
   declaration otherwise wins.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  #home-cape-method {
    height: auto !important;
    padding-bottom: 8vh;
  }
  #methodPin {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  #methodTrack {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    animation: none !important;
    transform: none !important;
  }
  #methodTrack > article {
    width: 100% !important;
    height: auto !important;
    padding: 8vh 6vw !important;
  }
  /* The giant letter behind each step is sized against the viewport
     height for a full-screen panel. In a stacked block it covers the
     text it sits behind, so it steps down rather than disappearing. */
  #methodTrack .cape-mark {
    font-size: 34vw !important;
    left: 4vw !important;
  }
  #methodTrack .cape-inner {
    grid-template-columns: 1fr !important;
  }
}

/* ── Sample values ─────────────────────────────────────────────────────────
   preview-values.js fills the four blocking facts with stand-in numbers so a
   page can be judged as finished copy. design.css sets `.verify{display:none}`
   28 times over, so showing one takes !important — but ONLY the chips that
   actually carry a sample, and only while the switch is on.

   It is deliberately loud. An invented ratio on a DCF-licensed school's site
   is a compliance claim if anyone mistakes it for the real one, so it is
   tinted, underlined and marked rather than blended into the prose. If this
   ever looks like ordinary body copy, that is the bug. */
html.samples-on .verify.is-sample{
  display:inline !important;
  background:#FFF3D6;
  color:#5A4200;
  border-bottom:2px dashed #E0A800;
  border-radius:3px;
  padding:0 .25em;
  font-style:normal;
}
html.samples-on .verify.is-sample::after{
  content:" (sample)";
  font-size:.78em;
  letter-spacing:.02em;
  opacity:.72;
  text-transform:uppercase;
}
@media print{ html.samples-on .verify.is-sample{ background:none; } }

.vbar__s{
  font:inherit;
  font-size:13px;
  line-height:1;
  padding:8px 12px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:999px;
  background:#fff;
  color:#22301E;
  cursor:pointer;
}
.vbar__s[aria-pressed="true"]{ background:#FFF3D6; border-color:#E0A800; }

/* ═══════════════════════════════════════════════════════════════
   THE CHIPS THEMSELVES — the rule that reveals them.

   THIS WAS MISSING, and verify mode had been silently dead since the
   2026-09 pack landed. The pack's design.css declares `.verify{display:none}`
   (twelve times, once per source file it was assembled from) and nothing
   anywhere declared the other half. verify-mode.js toggles
   `html.verify-on`, the bar counted "1 / 126" and scrolled the page —
   and every chip stayed display:none. The school turned verify mode on,
   walked all 126 items, and was shown nothing to answer. Verified in a
   browser before the fix: with .verify-on set on <html>, a chip still
   computed display:none and a 0px box.

   The bar was "lifted out of the retiring wps-site.css so it survives the
   redesign" (see the header of this file) — the bar was, the reveal rule
   was not. It lives here now, in a hand-maintained sheet that
   convert:design does not overwrite, and it is loaded after design.css
   (see src/routes/__root.tsx), so `html.verify-on .verify` at (0,2,0)
   beats the pack's (0,1,0) with no !important.

   A chip has to read as a question, not as copy: it sits inline in the
   sentence it belongs to, in the mono face, on the sun ground, so a
   reader can tell at a glance what is an unanswered fact and what is
   finished text. `is-at` is the one the bar is currently parked on.
   ═══════════════════════════════════════════════════════════════ */
html.verify-on .verify{
  display:inline !important;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:.78em;
  line-height:1.35;
  letter-spacing:.01em;
  color:#3A2C08;
  background:var(--sun-lt,#F5DFA6);
  /* NO BORDER, deliberately. A chip is one question but it wraps across
     lines, and with a border plus box-decoration-break:clone each wrapped
     fragment drew its own complete box — one three-line question read as
     three separate chips. A continuous tinted ground reads as one run of
     text no matter how it breaks, and the question's own square brackets
     already mark where it starts and ends. */
  border:0;
  border-radius:4px;
  padding:.1em .3em;
  margin:0 .08em;
  box-shadow:0 1px 0 rgba(58,44,8,.35);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  white-space:normal;
  overflow-wrap:break-word;
  text-transform:none;
  font-weight:500;
  vertical-align:baseline;
  cursor:text;
}

/* The one the bar has walked to. Sun ground, dark ring, and a soft halo so
   it is findable after the scroll lands — the walk is the whole point of
   the bar and a chip that looks like its 125 neighbours defeats it. */
html.verify-on .verify.is-at{
  background:var(--sun,#EBB93F);
  color:#221A08;
  box-shadow:0 0 0 2px #221A08;
  scroll-margin-block:40vh;
}

/* Inside a heading a chip must not inherit the display face at display
   size — 13vw of mono question text is unreadable and breaks the line box. */
html.verify-on :is(h1,h2,h3,h4) .verify{ font-size:.42em; font-weight:500; }

/* In the admin's live preview the chip is editable text like any other, so
   the editor's own outline is what marks it; drop the dashed border there
   to avoid two rings around one word. */
html.verify-on .verify[contenteditable="true"],
html.verify-on [contenteditable="true"] .verify{ box-shadow:none; }

@media print{ .verify{display:none !important} }