/* Assembly — the family layer.
   Loads after site.css and experience.css and wins where it overrides them.
   Direction (25 Sep 2026): the site should feel like a calm, capable friend to a worried
   parent, not a government form. Warm paper instead of cool grey, a friendlier teal,
   one warm accent for encouragement, soft rounded surfaces with gentle depth, and
   sentence-case labels instead of small tracked capitals. Meaning still comes from
   text; colour only supports it. Every text/ground pair here is checked by
   tools/test-control-contrast.cjs. */

:root{
  --stock:#FAF7F2;        /* warm paper */
  --sheet:#FFFFFF;
  --stock-2:#F3EDE3;      /* recessed bands, footer */

  --ink:#1C2B2A;
  --ink-2:#46534F;
  --ink-3:#5B6663;
  --rule:#EAE2D6;
  --rule-2:#D3C8B8;
  --control-rule:#8A8275;
  --rule-ink:#D3C8B8;     /* the old black neat-line becomes a soft warm edge */

  --tide:#0E6B66;         /* friendly teal: links, focus, emphasis */
  --tide-deep:#0A4B48;    /* primary buttons */
  --tide-line:#2A9D8F;
  --tide-field:#E3F2EE;
  --tide-field-2:#C5E6DE;
  --tide-wash:#EFF7F4;
  --focus:#0E6B66;

  --notice:#B3261E;       /* problems and deadlines: a plain warm red */
  --notice-deep:#8C1D18;
  --notice-field:#FCE9E6;

  --land:#F5E9CC;
  --land-2:#E6D3A5;
  --land-ink:#6B5520;
  --land-wash:#FBF4E4;

  /* Encouragement accents. Decoration only, never the sole carrier of meaning. */
  --sun:#F2B544;
  --sun-field:#FCEFD6;
  --morning:#91A0C8;      /* the footer painting's sky (the hero's periwinkle), where the landing's dawn ends */
  --dusk:#F2E2CF;         /* the landing: the hero's afternoon warming to evening */
  --predawn:#D9BAD7;      /* the landing: the dawn sky's first colour, at the hero's foot */
  --sun-ink:#7A4A12;       /* text on sun-field, 6.55:1 */
  --sun-deep:#C2831B;      /* icon strokes on sun-field */
  --sun-hover:#F6C765;
  --on-sun:#2B1D05;
  --coral:#E4805F;
  --coral-deep:#A8432A;
  --coral-field:#FDEEE8;

  --r-sm:10px;
  --r-card:18px;
  --shadow-soft:0 1px 2px rgba(60,42,20,.05),0 10px 30px -14px rgba(60,42,20,.18);
  --shadow-lift:0 2px 4px rgba(60,42,20,.06),0 18px 40px -18px rgba(60,42,20,.26);

  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

html{background:var(--stock)}
body{background:var(--stock);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
h1{letter-spacing:-.03em}
::selection{background:var(--sun-field);color:var(--ink)}
:focus-visible{border-radius:6px}

/* ---------- Labels: sentence case, readable size ---------- */
.chart-label,.eyebrow,.label,.legend dt,.creds dt,.opt,
.data dt,.data > div > span:first-child,.foot-links h2,.route-owner{
  text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:650}
th{text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:650;color:var(--ink-2)}
.chart-label,.eyebrow{color:var(--tide)}
.atlas-head .chart-label{letter-spacing:0;font-size:.8125rem}
.opt{font-weight:500}
/* Every other small tracked-capitals label inherited from the chart era. */
.badge,.title-block .meta > span,.plot-now span,.plot-ends span small,.tt-time b,.so > span,
.roll .who span,.composer-open-label,.thread-outcome span,.atlas-source-mark,.atlas-search > label,
.atlas-anchor-label,.atlas-map-caption,.school-picker-option > span:last-child,
.school-picker-selection small,.school-picker-plotted{
  text-transform:none;letter-spacing:0;font-size:.8125rem}
.badge{font-weight:650;padding:3px 11px}

/* ---------- Surfaces: soft, rounded, gently raised ---------- */
.plate,.card,.title-block,.record-welcome,.thread-card,.feed-composer,.letter-preview{
  border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow-soft)}
.plate-water{background:var(--tide-wash);border-color:var(--tide-field-2);box-shadow:none}
.plate-land{background:var(--land-wash);border-color:var(--land-2);box-shadow:none}
.card-link:hover{background:var(--sheet);border-color:var(--tide-field-2);box-shadow:var(--shadow-lift)}
.next-step{border:1px solid var(--tide-field-2);border-radius:var(--r-card)}
/* Surfaces the refinement layer deliberately flattens stay flat: no stray shadow. */
.record-head.title-block,.record-letter .letter-preview{box-shadow:none}
/* How it works: the five steps become friendly cards rather than a ruled list. */
.process-story{position:relative;display:grid;gap:14px}
/* Bulleted lists on reading pages (Community rules, About) keep their bullets inside the text
   column, not out in the gutter, and space out like the paragraphs around them. */
:where(.qa > article) > ul{margin-top:12px;padding-left:22px;color:var(--ink-2)}
:where(.qa > article) > ul > li + li{margin-top:10px}
:where(.qa > article) > ul > li::marker{color:var(--tide)}
:where(.qa > article) > ul strong{color:var(--ink)}
/* A subheading inside an answer ("Closing your account", "What OpenAI keeps") stands clear of
   the paragraph above it, which it had touched; so does a paragraph after a list. */
:where(.qa > article) h3{margin:24px 0 6px;font-size:1.0625rem;line-height:1.4}
:where(.qa > article) > ul + p{margin-top:12px}
/* The FAQ in four groups: a tide label over each list, the questions under it as before. Without
   scripts the answers stay articles, spaced and ruled as a .qa list is. */
.faq-empty:not([hidden]) ~ .faq-more{display:none}
.qa .faq-group + .faq-group{margin-top:40px}
.qa .faq-group-title{margin:0 0 4px;font-size:.9375rem;font-weight:700;letter-spacing:0;color:var(--tide-deep)}
.qa .faq-group > article{padding:22px 0;border-top:1px solid var(--rule)}
.qa .faq-group > article h3{font-size:1.125rem;letter-spacing:-.016em;margin:0 0 7px}
.qa .faq-group > article p{color:var(--ink-2)}
.process-story > .card,.process-story > .card:first-child,.reading-content .process-story > .card:first-child{
  position:relative;z-index:1;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-card);padding:24px 26px}
/* How it works has two paths, each under its own heading: the class on ordinary days,
   then when something isn't right. */
.how-page .shared-section-nav{margin:20px 0 0}
.process-part{margin:44px 0 18px;scroll-margin-top:96px;font-size:clamp(1.5rem,2.6vw,1.75rem);letter-spacing:-.02em}
.process-part:focus{outline:none}
/* Each path carries its colour from the landing's story: sun for ordinary days, teal for
   the record. The everyday steps' numbers and connecting line are warm to match. */
.process-part::before{content:"";display:block;width:36px;height:5px;margin-bottom:14px;border-radius:999px;background:var(--tide-line)}
#ordinary-days::before{background:var(--sun)}
#ordinary-days + .process-story .step-num{background:var(--sun-field);color:var(--sun-ink)}
#ordinary-days + .process-story::before{background:color-mix(in srgb,var(--sun) 45%,var(--sheet))}
/* One line runs behind the cards through the step numbers, showing in the gaps, so each
   path's steps read as one path rather than separate notes. */
.process-story::before{content:"";position:absolute;left:47px;top:0;bottom:0;width:2px;margin-left:-1px;
  border-radius:2px;background:var(--tide-field-2)}
.process-story .step-num{width:42px;height:42px;border-radius:999px;background:var(--tide-field);color:var(--tide-deep);font-size:1.125rem}
/* On a phone the number and the step's name share a line and the words below use the card's
   whole width; beside the number they had run in a 255px column. The line between the steps
   still passes through the numbers' centres. */
@media(max-width:480px){
  .process-story > .card,.process-story > .card:first-child,.reading-content .process-story > .card:first-child{padding:20px}
  .process-story .flex{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:10px}
  .process-story .flex > div{display:contents}
  .process-story .flex :is(.step-num,h3){align-self:center;margin:0}
  .process-story .flex > div > :not(h3){grid-column:1 / -1;margin-top:0}
  .process-story::before{left:41px}
}
.data:not(table),table.data,.table-wrap,.timetable,.route{border:1px solid var(--rule);border-radius:14px;overflow:hidden}
thead th{border-bottom:1px solid var(--rule)}
.notice{border-radius:14px;border-color:transparent}
.notice-danger{border-color:var(--notice-field)}
.form-errors{border-radius:14px}
.badge{border-radius:999px}
.q-n,.tt-num,.tl-dot,.route-n{border-radius:999px;border-color:var(--rule-2)}
.tl-item.is-change .tl-dot{background:var(--coral-field);border-color:var(--coral)}
/* Danger right now is Triple Zero's: in the coral the record uses for what changed, with a warning
   mark, under the child-safety choice once it's picked and at the top of such a record. */
.safety-now{display:flex;gap:10px;align-items:flex-start;max-width:none;margin:0 0 16px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--coral) 45%,transparent);
  border-radius:14px;background:var(--coral-field);color:var(--ink);font-size:.9375rem;line-height:1.5}
.safety-now svg{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--coral-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.safety-now b{color:var(--coral-deep)}
.kind-choice .safety-now{display:none;margin:-2px 0 8px}
.kind-choice:has(input[value="ChildSafety"]:checked) .safety-now{display:flex}
.tl-item.is-change .tl-dot svg{stroke:var(--coral-deep)}
.record-detail .tl-item.is-change .tl-body > .small{margin-top:0;font-size:.875rem}
.record-change > p.small{margin:0;color:var(--ink-2)}
.plot-cap{background:var(--ink-2)}
.carry{border-color:var(--rule-2)}

/* ---------- Buttons: pill shaped, confident ---------- */
.btn{border-radius:999px;border:1.5px solid var(--rule-2);background:var(--sheet);font-weight:650;padding-inline:22px}
.btn:hover{background:var(--stock-2);border-color:var(--control-rule)}
.btn-primary{background:var(--tide-deep);border-color:var(--tide-deep);color:var(--sheet)}
.btn-primary:hover{background:var(--tide);border-color:var(--tide);color:var(--sheet)}
.btn-lg{padding:15px 30px;min-height:56px;font-size:1.0625rem}
.btn-notice{background:var(--notice);border-color:var(--notice)}
/* A destructive choice among quiet ones ("Delete this concern" under More options): red words had
   sat on the same mint wash as the safe actions. White, with a red edge, and red on hover. */
.btn.btn-danger-quiet{background:var(--sheet);border-color:color-mix(in srgb,var(--notice) 40%,transparent);color:var(--notice)}
.btn.btn-danger-quiet:hover{background:var(--notice-field);border-color:var(--notice);color:var(--notice-deep)}
.btn-notice:hover{background:var(--notice-deep);border-color:var(--notice-deep)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:1;background:var(--stock-2);border-color:var(--rule-2);color:var(--ink-3)}
/* The button just pressed on a form that's on its way (site.js): it's working, not dead. */
.is-sending,.btn.is-sending:disabled{cursor:progress}
.is-sending:not(:disabled){opacity:.7}
/* How much room a box has left, near its limit (site.js); at it, or when a paste didn't fit. */
.limit-note{grid-column:1 / -1;margin:4px 0 0;font-size:.8125rem;line-height:1.45;color:var(--ink-3);font-variant-numeric:tabular-nums}
.limit-note.is-full{color:var(--sun-ink);font-weight:600}
.btn-ghost{border-color:transparent;background:transparent}

/* ---------- Fields ---------- */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=number],
input[type=search],textarea,select{border-radius:12px;border-width:1.5px}
input:focus,textarea:focus,select:focus{outline:3px solid var(--tide-field-2);outline-offset:0;border-color:var(--tide)}

/* ---------- Navigation ---------- */
.nav{background:color-mix(in srgb,var(--sheet) 92%,transparent);border-bottom:1px solid var(--rule);backdrop-filter:saturate(1.2) blur(10px)}
.brand-mark{background:var(--tide-deep);border-radius:10px}
.brand-mark svg{stroke:var(--sheet)}
.brand-mark svg path[fill]{fill:var(--sun)}
.nav-links a,.nav-me{border-radius:999px}
.nav-links a:hover,.nav-me:hover{background:var(--tide-wash);color:var(--tide-deep)}
.nav-links a[aria-current],.nav-me[aria-current]{color:var(--tide-deep);background:var(--tide-field)}
.nav-links a[aria-current]::after{display:none}
/* The header row never wraps a label onto two lines. Signed in, the bell and greeting need
   the room of "How it works" and "FAQ" until 1080px; both stay in the footer. */
.nav-links a,.nav-me,.nav-user .btn{white-space:nowrap}
@media(min-width:901px) and (max-width:1080px){.nav-signed .nav-info{display:none}}
/* An operator's header carries Moderation too, so those two step out until 1240px, and "The
   pathway" until 980px; the footer and the menu keep all three. */
@media(min-width:901px) and (max-width:1240px){.nav-operator .nav-info{display:none}}
@media(min-width:901px) and (max-width:980px){.nav-operator .nav-path{display:none}}
/* Signed in: the greeting on wide screens, the parent's initial in the solid teal
   "you" circle on phones, where the greeting would be cut to "Hi, Sam M". */
.nav-me-initial{display:none}
@media (max-width:560px){
  .nav-me-signed{max-width:none;padding:4px;min-width:44px;min-height:44px;justify-content:center}
  .nav-me-signed .nav-me-text{display:none}
  .nav-me-initial{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
    background:var(--tide);color:var(--sheet);font-weight:700;font-size:.9375rem;line-height:1}
  .nav-me-signed:hover .nav-me-initial{background:var(--tide-deep)}
  /* On your account's pages the circle is ringed in deep teal: where you are. */
  .nav-me-signed[aria-current]{background:none}
  .nav-me-signed[aria-current] .nav-me-initial{background:var(--tide-deep);box-shadow:0 0 0 2px var(--sheet),0 0 0 4px var(--tide-deep)}
}
.tabs{border-bottom:1px solid var(--rule)}
.tabs a.active{border-color:var(--tide);color:var(--tide-deep)}

/* ---------- Page and section heads ---------- */
.page-head{border-bottom:0}
.page-head::after{display:none}
.section-head{border-bottom:0;padding-bottom:0}
.section-head::after{display:none}

/* ---- Info pages: a watercolour behind the page's title (29 Sep 2026; painted 8 Oct 2026) ----
   How it works, About, FAQ, Contact, Privacy, Terms, Community rules, the pathway and the
   missing page each open on a watercolour of their own (fal.ai; out/scenes-art), the words in
   its open morning sky, the scene on the right and along the foot: About, parents at the gate
   under a jacaranda; How it works, children riding to school; FAQ, a cup of tea by the kitchen
   window; Contact, a red letterbox at a front gate; Privacy, a quiet verandah; Terms, the
   noticeboard by the gate; Community rules, families on picnic rugs under a river red gum; the
   pathway, a bush track up towards the sun; the missing page, a lost school hat on a bench.
   Each painting stands at the band's full height on the right, its left side fading into the
   paper (its paper is the page's paper), so the words stand on paper beside the scene and
   never over its busy middle. On phones the words run the full width, so the scene's corner
   shows under them. Decoration only. */
main:has(.scene-head){overflow-x:clip;isolation:isolate}
.page .page-head.scene-head{--scene-h:clamp(110px,12vw,200px);
  padding-bottom:calc(var(--scene-h) + clamp(24px,3vw,36px));margin-bottom:clamp(20px,3vw,36px)}
.page .scene-head::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * clamp(32px,5vw,64px));bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:var(--scene-webp) right bottom / auto 100% no-repeat;
  background-image:image-set(var(--scene-avif) type("image/avif"),var(--scene-webp) type("image/webp"));
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent)}
.page .scene-head::after{display:none}
.scene-about{--scene-avif:url("/img/scenes/about-2400.avif");--scene-webp:url("/img/scenes/about-2400.webp")}
.scene-how{--scene-avif:url("/img/scenes/how-2400.avif");--scene-webp:url("/img/scenes/how-2400.webp")}
.scene-faq{--scene-avif:url("/img/scenes/faq-2400.avif");--scene-webp:url("/img/scenes/faq-2400.webp")}
.scene-contact{--scene-avif:url("/img/scenes/contact-2400.avif");--scene-webp:url("/img/scenes/contact-2400.webp")}
.scene-privacy{--scene-avif:url("/img/scenes/privacy-2400.avif");--scene-webp:url("/img/scenes/privacy-2400.webp")}
.scene-terms{--scene-avif:url("/img/scenes/terms-2400.avif");--scene-webp:url("/img/scenes/terms-2400.webp")}
.scene-rules{--scene-avif:url("/img/scenes/rules-2400.avif");--scene-webp:url("/img/scenes/rules-2400.webp")}
.scene-pathway{--scene-avif:url("/img/scenes/pathway-2400.avif");--scene-webp:url("/img/scenes/pathway-2400.webp")}
.scene-error{--scene-avif:url("/img/scenes/error-2400.avif");--scene-webp:url("/img/scenes/error-2400.webp")}
@media(max-width:1200px){
.scene-about{--scene-avif:url("/img/scenes/about-1200.avif");--scene-webp:url("/img/scenes/about-1200.webp")}
.scene-how{--scene-avif:url("/img/scenes/how-1200.avif");--scene-webp:url("/img/scenes/how-1200.webp")}
.scene-faq{--scene-avif:url("/img/scenes/faq-1200.avif");--scene-webp:url("/img/scenes/faq-1200.webp")}
.scene-contact{--scene-avif:url("/img/scenes/contact-1200.avif");--scene-webp:url("/img/scenes/contact-1200.webp")}
.scene-privacy{--scene-avif:url("/img/scenes/privacy-1200.avif");--scene-webp:url("/img/scenes/privacy-1200.webp")}
.scene-terms{--scene-avif:url("/img/scenes/terms-1200.avif");--scene-webp:url("/img/scenes/terms-1200.webp")}
.scene-rules{--scene-avif:url("/img/scenes/rules-1200.avif");--scene-webp:url("/img/scenes/rules-1200.webp")}
.scene-pathway{--scene-avif:url("/img/scenes/pathway-1200.avif");--scene-webp:url("/img/scenes/pathway-1200.webp")}
.scene-error{--scene-avif:url("/img/scenes/error-1200.avif");--scene-webp:url("/img/scenes/error-1200.webp")}
}
/* The words stand in the painting's sky; a paper halo keeps them crisp where a cloud or a
   branch reaches in behind them. */
.page .scene-head > :is(h1,p,.lede){text-shadow:0 0 2px rgb(250 247 242/.75),0 0 14px rgb(250 247 242/.65)}
@media(max-width:860px){
  .page .scene-head::before{top:auto;height:calc(var(--scene-h) + 16px);background-size:auto 210%;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,transparent,#000 42%,#000 calc(100% - 24px),transparent)}
}
@media(max-width:560px){.page .page-head.scene-head{--scene-h:128px;padding-bottom:calc(var(--scene-h) + 20px)}}
@media(forced-colors:active),print{.page .scene-head::before{display:none}.page .page-head.scene-head{padding-bottom:20px}}

/* ---- The app's pages and the sign-in pages: a watercolour sky (8 Oct 2026) ----
   Every other inner page (Parent rooms, My concerns, Your week, Updates for you, the account
   pages, a record, a letter) opens under a quiet watercolour morning sky with a faint line of
   gums along its foot; the sign-in pages under a watercolour of the school's open gate first
   thing in the morning. Both lie behind the top of the page and fade into its paper, so the
   cards and forms stand on paint without a band of their own. A room keeps its own look. */
body.page-interior:not(.in-room):not(:has(.scene-head)){
  background:url("../img/scenes/sky-2400.webp") center top / max(100%,1100px) auto no-repeat,var(--stock);
  background-image:image-set(url("../img/scenes/sky-2400.avif") type("image/avif"),url("../img/scenes/sky-2400.webp") type("image/webp"))}
body.page-interior:not(.in-room):not(:has(.scene-head)):has(main > :is(.login-page,.registration-page,.recovery-page,.account-security)){
  background-image:image-set(url("../img/scenes/gate-2400.avif") type("image/avif"),url("../img/scenes/gate-2400.webp") type("image/webp"))}
@media(max-width:1200px){
  body.page-interior:not(.in-room):not(:has(.scene-head)){background-image:image-set(url("../img/scenes/sky-1200.avif") type("image/avif"),url("../img/scenes/sky-1200.webp") type("image/webp"))}
  body.page-interior:not(.in-room):not(:has(.scene-head)):has(main > :is(.login-page,.registration-page,.recovery-page,.account-security)){
    background-image:image-set(url("../img/scenes/gate-1200.avif") type("image/avif"),url("../img/scenes/gate-1200.webp") type("image/webp"))}
}
/* On the gate, a heading's words keep a paper halo where a tree reaches in behind them. On a
   phone the gum's crown sits right behind the line under the heading, where two faint layers left
   grey words on green leaves; close layers of paper stack into a glow that follows each word, and
   a wide one softens the leaves around it (14 Oct 2026). */
body.page-interior:has(main > :is(.login-page,.registration-page,.recovery-page,.account-security)) .page-head > :is(h1,p,.lede){
  text-shadow:0 0 1px var(--stock),0 0 2px var(--stock),0 0 4px var(--stock),0 0 7px var(--stock),0 0 12px var(--stock),0 0 22px rgb(250 247 242/.85)}
@media(forced-colors:active),print{body.page-interior{background-image:none}}

/* ---------- Footer (27 Sep 2026; painted 8 Oct 2026; repainted 9 Oct 2026; all on the painting 9 Oct) ----------
   The walk to school, painted across the foot of every page: the next morning, families walking
   to school along a path, a mum and her two children in the middle, repainted from the hero
   (owner, 9 Oct: "still too bright... use the hero image as ref"): the hero's periwinkle sky,
   cream cumulus and muted sage greens (out/footer-art). Later on 9 Oct the owner: "i want the
   walking to school scene on all footers. its the top bit i dont want", the small print "should
   end the footer BUT the image with the walking children must be above this", and the name and
   links took "way too much verical sapce. compress that on top of the image"; then, on desktop,
   "use the cloud more effectively and reduct the height from the top", and the acknowledgement
   and the small print go "on top of the bottom of the photo. nothing after the photo". So:
   - the name, its line and the links are one compact block on the cumulus: the name and the
     line on one row, the links in one run under them (their group headings kept for screen
     readers only);
   - the block sits straight on the treeline: the second row is the painting from the tops of
     the trees down (--tree-row, a row of the 2784px-wide master, found under where the words
     start at each width), and the first row is only as tall as the words, so the painting shows
     just as much cloud above the trees as the words need and no empty sky;
   - the acknowledgement and the small print lie on the road and grass under the walkers' feet
     (--feet-row), and the painting ends --feet-room below the feet, just under them: nothing
     comes after it. On phones the words run to more lines, so there the painting stands at its
     own height from its top and the name and links start at its top (the owner: "mobile is good").
   The painting keeps one size for a given width (--paint-w: at least 1100px wide so the walkers
   never shrink; phones get 640px of the middle of their own cut). Words in ink (5.7:1 on the periwinkle, more on the cream cloud), with a faint white
   halo; only the motto's second sentence keeps the deep teal (3.9:1, large text). The focus ring
   is ink too. Away from the landing the periwinkle fades in from the page above. */
footer.site{--paint-w:max(100cqw,1100px);--paint-r:.5014;--paint-h:calc(var(--paint-w) * var(--paint-r));
  --paint-cols:2784;--paint-top:860;--tree-row:1180;--feet-row:1860;--feet-room:104px;--mist:.45;
  --paint-under:calc(var(--paint-w) * (var(--feet-row) - var(--tree-row)) / var(--paint-cols) + var(--feet-room));
  position:relative;isolation:isolate;overflow:clip;container-type:inline-size;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto var(--paint-under);
  margin-top:48px;padding:0;border:0;color:var(--ink);
  background:linear-gradient(180deg,rgb(145 160 200/0),var(--morning) clamp(56px,8vw,120px))}
.foot-paint{grid-row:1 / 3;grid-column:1;position:relative;display:block;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 clamp(40px,4.4vw,72px));mask-image:linear-gradient(180deg,transparent,#000 clamp(40px,4.4vw,72px))}
/* A morning mist over the grass and road under the walkers' feet, so the small print holds
   4.5:1 on the painting; it thins to nothing just under their feet. */
.foot-paint::after{content:"";position:absolute;inset:auto 0 0;z-index:1;height:calc(var(--feet-room) + 6px);
  background:linear-gradient(0deg,rgb(250 247 242/var(--mist)) 0,rgb(250 247 242/var(--mist)) calc(100% - 46px),rgb(250 247 242/0))}
/* Both cuts end at the master's foot, row 2256; the painting is lowered so it ends --feet-room
   under the walkers' feet. Where the words need more height than the cloud above the trees
   (between 700 and 900px wide), the painting's own top shows, so it fades in too. */
.foot-paint img{position:absolute;left:50%;bottom:calc(var(--feet-room) - var(--paint-w) * (2256 - var(--feet-row)) / var(--paint-cols));
  display:block;width:var(--paint-w);height:var(--paint-h);max-width:none;object-fit:cover;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 48px);mask-image:linear-gradient(180deg,transparent,#000 48px)}
footer.site :is(.foot-top,.foot-ground){text-shadow:0 0 1px rgb(255 255 255/.9),0 0 8px rgb(250 247 242/.75),0 0 20px rgb(250 247 242/.5)}
footer.site :focus-visible{outline-color:var(--ink)}
.foot-top{grid-row:1;grid-column:1;position:relative;z-index:1;
  display:flex;flex-direction:column;gap:clamp(10px,1.4vw,16px);padding-block:clamp(20px,2.2vw,32px) 6px}
footer.site .brand{gap:12px}
footer.site .brand-text{display:inline;font-size:1.1875rem}
footer.site .brand-mark{width:36px;height:36px}
/* The name and its line on one row; one sentence to a line where the row runs out. */
.foot-brand{display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(16px,2.4vw,32px)}
.foot-brand p{max-width:none;margin:0;color:var(--ink)}
.foot-brand .foot-motto{font-family:var(--font-display);font-size:clamp(1.1875rem,1rem + .45vw,1.375rem);
  font-weight:680;line-height:1.3;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.foot-motto > span + span{color:var(--tide-deep)}
.foot-rose{display:none}
/* The links in one run; the group headings stay for screen readers. */
.foot-links{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.2vw,30px)}
.foot-links > div{display:contents}
.foot-links h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.foot-links a{display:block;width:fit-content;padding-block:6px;font-size:1rem;font-weight:600;color:var(--ink);text-decoration:none}
.foot-links a:hover{text-decoration:underline;text-underline-offset:4px}
/* The small print, on the misted road and grass at the foot of the painting: the
   acknowledgement flush left, the copyright and the advice line flush right, their last lines
   on one baseline. The last thing on every page. */
.foot-ground{grid-row:2;grid-column:1;align-self:end;position:relative;z-index:1}
.foot-ground > .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:8px clamp(32px,5vw,80px);
  padding-block:0 clamp(16px,2.2vw,28px)}
.foot-ack{flex:0 1 auto;max-width:62ch;margin:0;font-size:.875rem;font-weight:500;line-height:1.5;color:var(--ink);text-wrap:balance}
.foot-ground .foot-base{display:flex;flex:none;flex-direction:column;justify-content:flex-start;align-items:flex-end;gap:0;max-width:none;margin:0;padding:0;border:0;
  font-size:.875rem;font-weight:500;line-height:1.5;text-align:right;color:var(--ink)}
/* On the landing the close turns from paper to the same periwinkle and runs straight on
   into the footer: no fade at the footer's top there, and it tucks 1px under the close so no
   seam shows at fractional heights. */
.page-home footer.site{margin-top:-1px;background:var(--morning)}
/* Where the trees start under the words: the far-left crowns up to 1100px wide, further in as
   the page centres; below 1000px the links run out to the high crowns on the right. */
@media(max-width:1000px){ footer.site{--tree-row:1165} }
@media(min-width:1440px){ footer.site{--tree-row:1225} }
@media(min-width:1800px){ footer.site{--tree-row:1280} }
@media(max-width:900px){
  footer.site{--feet-room:136px}
  .foot-ground > .wrap{flex-direction:column;align-items:flex-start}
  .foot-ack{max-width:none}
  .foot-ground .foot-base{align-self:stretch;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0 20px;text-align:left}
}
@media(max-width:700px){
  /* Phones: the middle 1567px of the walk, from the cumulus to a little under the walkers'
     feet (owner: the image was "too long on the bottom"). Their words run to more lines, so the
     painting stands on its own row at its full height and the words start at its top (the
     owner, 9 Oct: "mobile is good"). */
  footer.site{--paint-w:max(100cqw,640px);--paint-r:.9675;--paint-cols:1567;--paint-top:740;--feet-room:142px;grid-template-rows:auto}
  .foot-paint{grid-row:1;align-self:end;height:calc(var(--paint-w) * (var(--feet-row) - var(--paint-top)) / var(--paint-cols) + var(--feet-room));
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 70px);mask-image:linear-gradient(180deg,transparent,#000 70px)}
  .foot-top{align-self:start;padding-block:22px 0}
  .foot-ground{grid-row:1}
  .foot-ack,.foot-ground .foot-base{font-size:.8125rem;line-height:1.45}
}
@media(max-width:560px){
  .foot-motto > span{display:block}
  .foot-links{gap:0 18px}
  .foot-ground .foot-base{flex-direction:column}
}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;
  background:var(--sun-field);color:var(--sun-ink);border-radius:999px;font-size:.875rem;font-weight:650;letter-spacing:0}
.hero-kicker svg{width:18px;height:18px;flex:none;stroke:var(--sun-deep);fill:none;stroke-width:2}

/* The hero is one picture: a warm afternoon at the school gate, drawn across the whole
   hero behind the words.
   Wide screens (above 1100px):
   - The hero fills the first view, even on a short 13-inch laptop. The type scales with the
     screen's height so the words always fit.
   - The picture takes the full height. The school and the families stand to the right of
     the words, and the picture fades softly into the paper behind them.
   Below 1100px the picture sits under the words, centred on the gate. */
.story-hero{--words-w:680px;--words-right:calc(max(var(--gutter), 50% - var(--wrap) / 2) + var(--words-w));
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(460px,calc(100svh - 76px),960px);
  padding-top:clamp(20px,4vh,52px);padding-bottom:clamp(28px,6vh,64px);background:var(--stock)}
.story-hero-words > :where(:not(.story-scene)){max-width:var(--words-w)}
.story-title{margin-top:clamp(10px,2vh,18px);max-width:10em;font-size:clamp(2.25rem,min(4.6vw,7.8vh),3.9rem);line-height:1.05;font-weight:750;letter-spacing:-.035em;text-wrap:balance}
/* "your child's class" in teal; the sun underline under it came off on 10 Oct 2026 (owner). */
.story-title span{color:var(--tide)}
.story-lede{margin-top:clamp(12px,2.4vh,20px);font-size:clamp(1rem,min(1.5vw,2.9vh),1.25rem);line-height:1.6;color:var(--ink-2);max-width:56ch}
.story-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(16px,3vh,28px)}
.story-quiet{font-weight:600;color:var(--ink-2);text-decoration:none}
.story-quiet span{white-space:nowrap;color:var(--tide);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.story-quiet:hover span{color:var(--tide-deep);text-decoration-thickness:2px}
/* Find your child's school: a white card under the headline, and on wide screens over the
   sky above the school in the picture, beside the words. */
.story-hero .hero-find{z-index:6;max-width:440px;scroll-margin-top:96px;margin-top:clamp(16px,3vh,26px);padding:16px 16px 12px;border-radius:20px;
  background:color-mix(in srgb,var(--sheet) 96%,transparent);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:var(--shadow-lift)}
.story-hero .hero-find > label,.close-find > label{margin-bottom:8px;font-size:.9375rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.story-hero .hero-find .atlas-location{margin-top:6px}
.find-picked{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.find-picked svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--tide)}
.find-picked b{color:var(--ink);font-weight:700}
.find-picked a{font-weight:650;white-space:nowrap}
.find-picked .find-picked-next{display:flex;width:max-content;margin-top:10px;gap:6px}
.find-picked .find-picked-next svg{width:16px;height:16px;margin:0;color:currentColor}
/* Wide screens: 64px right of the words, 300-420px wide. Where that leaves less than 300px
   (just above 1100px) it keeps 300px and moves left into the words' column, whose text
   ends well short of its 680px, so "Name or postcode" is never cut off. */
@media(min-width:1101px){
  .story-hero .hero-find{--find-w:clamp(300px,100% - var(--words-right) - 64px - var(--gutter),420px);
    position:absolute;top:clamp(20px,4vh,52px);width:var(--find-w);max-width:none;margin:0;
    left:min(var(--words-right) + 64px,100% - var(--gutter) - var(--find-w))}
}
/* "See it beside the schools nearby": the explorer's map, school and nearby list in a pop-up
   over the page (_SchoolAtlas, school-explorer.js). It is its own school-atlas container, so
   the explorer's layout follows the pop-up's width: map and school side by side from 500px
   inside, the list below. On a phone it rises from the bottom as a sheet. Scrolling inside it
   stops at its ends rather than moving the page. (The page is not locked: Chrome drops the
   scrollbar's gutter on a locked page, which shifts everything behind sideways.) */
.atlas-popup{container:school-atlas / inline-size;margin:auto;border:0;border-radius:22px;padding:18px 22px 22px;
  width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-lift)}
.atlas-popup::backdrop{background:color-mix(in srgb,var(--ink) 40%,transparent)}
.atlas-popup-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.atlas-popup-head h2{font-size:1.25rem;line-height:1.3}
.atlas-popup-close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-4px -10px -4px 0;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.atlas-popup-close:hover{background:var(--tide-wash);color:var(--ink)}
.atlas-popup-close svg{width:22px;height:22px}
.atlas-popup .atlas-workbench{margin-top:14px}
.atlas-popup .atlas-return{margin-top:12px}
@container school-atlas (min-width:500px){
  .atlas-popup .atlas-plot-shell{height:320px;min-height:320px}
}
@media(max-width:600px){
  .atlas-popup{width:100%;max-width:100%;max-height:calc(100dvh - 16px);margin:auto 0 0;padding:14px 16px 20px;border-radius:22px 22px 0 0}
}
@media(prefers-reduced-motion:no-preference){
  .atlas-popup[open]{animation:atlas-popup-in .2s ease-out}
  @keyframes atlas-popup-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media(forced-colors:active){.atlas-popup{border:1px solid CanvasText}}
/* Without script the pop-up is simply open, in the flow at the foot of the close, once a
   school is chosen, and its close button (which needs script) is hidden. With script it is
   only ever the pop-up. The explorer's host shows nothing of its own. */
.story-close .school-atlas{padding:0;scroll-margin-top:96px}
.atlas-popup[open]:not(:modal){position:static;display:block;width:auto;max-width:880px;max-height:none;overflow:visible;
  margin:clamp(32px,5vw,56px) auto 0;border-radius:22px;box-shadow:0 28px 60px -24px rgba(0,0,0,.5)}
.atlas-popup:not(:modal) .atlas-popup-close{display:none}
html.js .atlas-popup[open]:not(:modal){display:none}

/* The picture: a painting of the school gate at pick-up on a summer afternoon (8 Oct 2026,
   made with fal.ai): a weatherboard school, a jacaranda, gum trees, a cumulus sky and the
   families along the fence. On wide screens it fills the hero, anchored at its foot so the
   fence and the families always show. Behind the words it thins to a faint wash on the paper
   (so any amount of text reads), and it dissolves into the paper under the header. Where the
   screen is tall enough for the words to end above the fence, the families show across the
   whole width, and the road at the painting's foot fades into the paper. The fence's top sits
   23% of the painting's height above its foot, and the painting is as tall as the hero or as
   the hero's width allows (2752 x 1536), whichever is more, so max(23cqh, 12.84cqw) finds it
   at any size. */
.story-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;container-type:size}
.story-scene picture{display:contents}
.story-paint{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 100%;
  --paint-ends:linear-gradient(180deg,transparent 0,#000 18cqh,#000 calc(100% - max(6cqh,3.4cqw)),transparent);
  --paint-words:linear-gradient(90deg,rgb(0 0 0/.13) calc(var(--words-right) - 240px),#000 calc(var(--words-right) + 90px));
  --paint-band:linear-gradient(180deg,transparent calc(100% - max(23cqh,12.84cqw) - 36px),#000 calc(100% - max(23cqh,12.84cqw)));
  -webkit-mask-image:var(--paint-ends),var(--paint-words);-webkit-mask-composite:source-in;
  mask-image:var(--paint-ends),var(--paint-words);mask-composite:intersect}
/* On short laptops the line under the button can reach the painting's trees, so the words
   over the painting carry a soft halo of paper. */
@media(min-width:1101px){
  .story-hero :is(.story-lede,.story-quiet){text-shadow:0 0 4px var(--stock),0 0 10px var(--stock),0 0 18px var(--stock)}
}
@media(min-width:1101px) and (min-height:660px){
  .story-paint{-webkit-mask-image:var(--paint-ends),var(--paint-words),var(--paint-band);-webkit-mask-composite:source-in,source-over;
    mask-image:var(--paint-ends),var(--paint-words),var(--paint-band);mask-composite:intersect,add}
}
/* Short laptop screens: a little less air so the words, the button and the picture's
   families all fit in the first view. */
@media(min-width:1101px) and (max-height:720px){
  .story-lede{line-height:1.5}
  .story-hero .hero-kicker{padding:5px 12px 5px 9px}
}

/* The beats sit in full-width bands; alternate bands lift to a lighter paper, so the story
   moves in steady steps without rules between them. */
.story-band{padding-block:clamp(48px,min(9vw,13vh),120px)}
.story-band.is-tinted{background:color-mix(in srgb,var(--sheet) 55%,var(--stock));
  border-block:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}
.story-beat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.story-beat.is-flipped .story-words{order:2}
/* A step below the hero's headline (8 Oct 2026: 46px at most against its 62px), so the
   page has one loudest line. */
.story-words h2{font-size:clamp(1.875rem,min(3.3vw,7vh),2.875rem);line-height:1.08;letter-spacing:-.03em;font-weight:740;max-width:15ch}
.story-words h2::before{content:"";display:block;width:44px;height:6px;border-radius:999px;background:var(--sun);margin-bottom:24px}
#beat-silence::before,#beat-next::before{background:var(--coral)}
#beat-kind::before{background:var(--land-2)}
.story-words p{margin-top:16px;font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.65;color:var(--ink-2);max-width:44ch}
.story-words h2 + p{margin-top:26px;color:var(--ink)}
.story-words a{font-weight:650;white-space:nowrap}
/* A way on, in a line of its own under the beat's words. */
.story-words p.story-more{margin-top:12px}

/* The story speaks in large type on paper; each example is a screen from the app, and has
   to look like one at a glance. So it sits on a stage in its beat's colour (the colour of
   the mark above the beat's heading), in a window whose bar says where you are, "Class 2A
   parent room" or "The pathway", with an Example tag where the eye lands first.
   Inside, type is the app's size, a step below the story's, so the two voices never blur. */
.story-stage{--proof-tint:var(--sun-field);--proof-tint-2:color-mix(in srgb,var(--sun) 30%,var(--sun-field));
  width:100%;max-width:560px;justify-self:center;padding:clamp(16px,3vw,32px);border-radius:32px;
  background:radial-gradient(120% 90% at 100% 0%,var(--proof-tint-2),transparent 62%),var(--proof-tint)}
[aria-labelledby="beat-silence"] .story-stage,[aria-labelledby="beat-next"] .story-stage{--proof-tint:var(--coral-field);--proof-tint-2:color-mix(in srgb,var(--coral) 26%,var(--coral-field))}
[aria-labelledby="beat-kind"] .story-stage{--proof-tint:var(--land);--proof-tint-2:color-mix(in srgb,var(--land-2) 45%,var(--land))}
.story-proof{margin:0;overflow:hidden;font-size:.9375rem;background:var(--sheet);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  border-radius:20px;box-shadow:var(--shadow-lift)}
.story-proof svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.proof-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px 11px 18px;
  background:var(--stock);border-bottom:1px solid var(--rule);font-size:.8125rem;line-height:1.3;color:var(--ink-3)}
.proof-where{display:flex;align-items:center;gap:8px;min-width:0}
.proof-where svg{color:var(--tide)}
.proof-where b{font-weight:700;color:var(--ink)}
.proof-tag{flex:none;padding:3px 10px;border-radius:999px;border:1px solid var(--rule-2);background:var(--sheet);
  font-size:.75rem;font-weight:650;color:var(--ink-2)}
.proof-body{padding:18px}
.proof-note{margin-top:14px;font-size:.8125rem;color:var(--ink-3)}
/* Inside the three room examples: the room itself. Since 27 Sep 2026 a parent room looks
   like the group apps parents already use (rooms.css), so these windows show exactly that:
   the group's grey page and white cards, blue for what you've pressed, the counts and the
   Me too / Reply / Open row under a post, replies in grey bubbles, and a family's
   messages with their helper in the green-and-beige chat. Same colours, same words and the
   same faces (.room-avatar tones) as inside. The window's bar and stage, and the path,
   stay the landing's own. */
.room-look{--fb-ink:#050505;--fb-ink-2:#65676B;--fb-line:#CED0D4;--fb-line-2:#E4E6EB;--fb-field:#F0F2F5;--fb-grey:#E4E6EB;
  --fb-blue:#0866FF;--fb-link:#0064D1;--fb-blue-field:#EBF5FF;--fb-shadow:0 1px 2px rgba(0,0,0,.2);
  --fb-green:#2E9A48;--fb-green-ink:#1E7B36;--fb-green-field:#E6F4EA;
  --wa-wall:#EFEAE2;--wa-out:#D9FDD3;--wa-in:#FFFFFF;--wa-ink:#111B21;--wa-meta:#54656F;--wa-green-deep:#008069;--wa-read:#027EB5;
  --look-pad:12px;container-type:inline-size;background:#F0F2F5;color:var(--fb-ink);
  font-family:"Segoe UI Historic","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;font-size:.9375rem;line-height:1.35}
.proof-body.room-look{padding:var(--look-pad)}
.room-look :where(p){margin:0}
.room-look .proof-note{margin:10px 4px 0;color:var(--fb-ink-2)}
.look-feed{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.look-card{padding:12px 14px;border-radius:8px;background:#fff;box-shadow:var(--fb-shadow)}
.look-head{display:flex;align-items:center;gap:8px}
.room-look .room-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;font-size:.8125rem;line-height:1}
.look-by{display:grid;min-width:0;line-height:1.3}
.look-by > b{font-size:.9375rem;font-weight:600}
.look-by > span{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;color:var(--fb-ink-2);font-size:.8125rem}
.look-kind{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.look-kind::before{content:"";flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a8 8 0 0 1-11.7 7.1L4 20l1.4-4.4A8 8 0 1 1 20.5 11.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a8 8 0 0 1-11.7 7.1L4 20l1.4-4.4A8 8 0 1 1 20.5 11.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.look-ask{padding:0 8px;border-radius:6px;background:var(--sun-field);color:var(--sun-ink);font-size:.75rem;font-weight:700;line-height:1.6}
.look-title{margin-top:8px;font-size:1rem;font-weight:700;line-height:1.35;text-wrap:pretty}
.look-text{margin-top:4px;text-wrap:pretty}
.look-title + .look-text{margin-top:2px}
.look-matched{display:flex;align-items:center;gap:8px;margin-top:10px;padding:6px 10px;border-radius:8px;background:var(--fb-field)}
.room-look .look-matched .room-avatar{width:26px;height:26px;font-size:.6875rem}

/* A family and their helper, in the chat app's green and beige. */
.look-chat{margin-top:10px;border-radius:10px;overflow:hidden;background:var(--wa-wall) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23000' stroke-opacity='.075' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 12) rotate(-18 12 12)'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4'/%3E%3C/g%3E%3Cg transform='translate(92 6) rotate(10 12 12)'%3E%3Cpath d='M12 8c-2-2-7-1.5-7 4 0 4 3 8 5 8 1 0 1.5-.5 2-.5s1 .5 2 .5c2 0 5-4 5-8 0-5.5-5-6-7-4zM12 8c0-2 1-3.5 3-4'/%3E%3C/g%3E%3Cg transform='translate(54 50) rotate(12 12 12)'%3E%3Cpath d='M12 3.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8 6.8 19.5l1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/g%3E%3Cg transform='translate(128 58) rotate(-10 12 12)'%3E%3Cpath d='M12 20s-7-4.4-7-9.5A3.9 3.9 0 0 1 12 8a3.9 3.9 0 0 1 7 2.5C19 15.6 12 20 12 20z'/%3E%3C/g%3E%3Cg transform='translate(8 92) rotate(8 12 12)'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H19v14H5.5A1.5 1.5 0 0 0 4 19.5zM4 19.5A1.5 1.5 0 0 0 5.5 21H19'/%3E%3C/g%3E%3Cg transform='translate(88 106) rotate(-6 12 12)'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 14a4 4 0 0 0 7 0M9.5 10h.01M14.5 10h.01'/%3E%3C/g%3E%3Cg transform='translate(140 132) rotate(20 12 12)'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4a12 12 0 0 1 0 16M12 4a12 12 0 0 0 0 16'/%3E%3C/g%3E%3Cg transform='translate(44 138) rotate(-14 12 12)'%3E%3Cpath d='M12 3.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8 6.8 19.5l1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/g%3E%3C/svg%3E") 0 0/180px 180px;
  box-shadow:0 1px 2px rgba(11,20,26,.18)}
.look-chat-head{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--wa-green-deep);color:#fff;line-height:1.25}
.room-look .look-chat-head .room-avatar{width:30px;height:30px;font-size:.75rem;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.look-chat-head b{display:block;font-weight:600}
.look-chat-head small{display:block;font-size:.75rem}
.look-chat-wall{list-style:none;margin:0;padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px}
.look-chat-wall li{position:relative;max-width:88%;padding:6px 9px 7px;border-radius:8px;color:var(--wa-ink);font-size:.875rem;line-height:1.35;
  box-shadow:0 1px .5px rgba(11,20,26,.13);text-wrap:balance}
.look-chat-wall li::after{content:"";display:inline-block;width:4.4em;height:1px}
.look-chat-wall li::before{content:"";position:absolute;top:0;width:8px;height:13px}
.look-chat-wall .is-theirs{align-self:flex-start;background:var(--wa-in);border-top-left-radius:0}
.look-chat-wall .is-theirs::before{left:-8px;background:var(--wa-in);clip-path:polygon(0 0,100% 0,100% 100%)}
.look-chat-wall .is-mine{align-self:flex-end;background:var(--wa-out);border-top-right-radius:0}
.look-chat-wall .is-mine::before{right:-8px;background:var(--wa-out);clip-path:polygon(0 0,100% 0,0 100%)}
.look-chat-wall time{position:absolute;right:8px;bottom:5px;color:var(--wa-meta);font-size:.6875rem;line-height:1;white-space:nowrap}
/* Your message, seen: the two blue ticks the room's own chat shows. */
.look-chat-wall .is-mine:has(.look-tick)::after{width:6.2em}
.look-chat-wall .is-mine:has(.look-tick) time{right:27px}
.look-tick{position:absolute;right:8px;bottom:4px;display:flex;color:var(--wa-read)}
.look-tick svg{width:17px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* A roster: a row a day, your turn in blue, an open day with its button. */
.look-slots{list-style:none;margin:10px 0 0;padding:0;border:1px solid var(--fb-line-2);border-radius:8px;overflow:hidden}
.look-slots li{display:flex;align-items:center;gap:10px;min-height:38px;padding:3px 6px 3px 12px}
.look-slots li + li{border-top:1px solid var(--fb-line-2)}
.look-slots b{flex:none;width:2.6em;font-weight:600}
.look-slots span:first-of-type{flex:1;min-width:0}
.look-slots .is-mine{background:var(--fb-blue-field)}
.look-slots .is-mine span{font-weight:700}
.look-slots .is-open span:first-of-type{color:var(--fb-ink-2)}
.look-btn{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:6px;background:var(--fb-grey);
  color:var(--fb-ink);font-size:.875rem;font-weight:600;line-height:1.2;white-space:nowrap}
.look-btn.is-blue{background:var(--fb-blue);color:#fff}

/* The Sunday week-ahead, as it lands on a phone. */
.look-alert{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:16px;
  background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 14px rgba(0,0,0,.06)}
.look-app{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--tide-deep);color:#fff}
.story-proof .look-app svg{width:18px;height:18px}
.look-alert p{display:grid;gap:1px;font-size:.8125rem;line-height:1.35}
.look-alert small{color:var(--fb-ink-2);font-size:.75rem}
.look-alert b{font-size:.875rem;font-weight:600}

/* A post in the Conversations tab: the tabs, the counts, the row of actions, a comment. */
.look-tabs{display:flex;margin:calc(var(--look-pad) * -1) calc(var(--look-pad) * -1) 10px;padding:0 6px;
  border-bottom:1px solid var(--fb-line);background:#fff;overflow:hidden}
.look-tabs span{flex:none;padding:10px 10px 7px;border-bottom:3px solid transparent;color:var(--fb-ink-2);font-size:.875rem;font-weight:600;white-space:nowrap}
.look-tabs .is-on{color:var(--fb-blue);border-bottom-color:var(--fb-blue)}
.look-stats{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;color:var(--fb-ink-2);font-size:.875rem}
.look-noticed{display:inline-flex;align-items:center;gap:6px}
.look-noticed::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V6a1.5 1.5 0 0 1 3 0v4M10 10V4.5a1.5 1.5 0 0 1 3 0V10M13 10V5.5a1.5 1.5 0 0 1 3 0V11M16 11V8a1.5 1.5 0 0 1 3 0v6a7 7 0 0 1-7 7h-.5A6.5 6.5 0 0 1 6 17.5L4.2 13a1.5 1.5 0 0 1 2.7-1.3L8 14'/%3E%3C/svg%3E") center/11px no-repeat,linear-gradient(#18AFFF,#0062DF)}
.look-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:8px;padding:2px 0;border-top:1px solid var(--fb-line)}
.look-actions span{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:34px;color:var(--fb-ink-2);font-size:.875rem;font-weight:600;white-space:nowrap}
.look-actions span::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.look-actions .is-on{color:var(--fb-blue)}
.look-i-hand{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V6a1.5 1.5 0 0 1 3 0v4M10 10V4.5a1.5 1.5 0 0 1 3 0V10M13 10V5.5a1.5 1.5 0 0 1 3 0V11M16 11V8a1.5 1.5 0 0 1 3 0v6a7 7 0 0 1-7 7h-.5A6.5 6.5 0 0 1 6 17.5L4.2 13a1.5 1.5 0 0 1 2.7-1.3L8 14'/%3E%3C/svg%3E")}
.look-i-reply{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a8 8 0 0 1-11.7 7.1L4 20l1.4-4.4A8 8 0 1 1 20.5 11.5z'/%3E%3C/svg%3E")}
.look-i-open{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
/* A narrow window puts each icon above its word, as the room does on a small phone. */
@container (max-width:330px){
  .look-actions span{flex-direction:column;gap:2px;min-height:44px;font-size:.75rem;line-height:1.15;text-align:center;white-space:normal}
}
/* A wide window sets the roster and the Sunday alert side by side under the ask, so the
   three everyday moments still fit under the bar on a short laptop screen. */
@container (min-width:440px){
  .look-feed{grid-template-columns:repeat(2,minmax(0,1fr))}
  .look-feed > :first-child{grid-column:1 / -1}
  .look-alert{align-self:start}
}
/* Phone-width windows: the cards and the chat close up a little. */
@container (max-width:360px){
  .look-card{padding:10px 12px}
  .look-chat-head{padding:6px 10px}
  .look-chat-wall{padding:8px 12px 10px}
  .look-slots li{min-height:36px}
}
/* On the smallest phones the tabs run on past the edge, as they scroll sideways in the room. */
@container (max-width:300px){
  .look-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
}
.look-comment{display:flex;align-items:flex-start;gap:6px;padding-top:8px;border-top:1px solid var(--fb-line)}
.room-look .look-comment .room-avatar{width:30px;height:30px;font-size:.6875rem}
.look-bubble{width:fit-content;padding:7px 12px;border-radius:18px;background:var(--fb-field);font-size:.875rem;line-height:1.35;text-wrap:pretty}
.look-bubble b{display:block;font-size:.8125rem;font-weight:600}
.look-foot{display:flex;gap:10px;padding:2px 0 0 12px;color:var(--fb-ink-2);font-size:.75rem}
.look-foot b{font-weight:700}
.look-next{display:flex;align-items:center;gap:8px;margin:10px 4px 0;color:var(--fb-ink-2);font-size:.8125rem}
.look-next::before{content:"";flex:none;width:16px;height:16px;background:#F3425F;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h2l5 4V5l-5 4h-2a1 1 0 0 0-1 1zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h2l5 4V5l-5 4h-2a1 1 0 0 0-1 1zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat}

/* Held back: what you wrote struck through, the notice, the calmer version, two buttons. */
.look-struck{color:var(--fb-ink-2);text-decoration:line-through 1.5px rgba(228,30,63,.65)}
.look-review{display:grid;gap:8px;margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--fb-blue-field);font-size:.875rem}
.look-suggest{display:grid;gap:4px;padding:10px 12px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--fb-blue)}
.look-suggest-label{display:flex;align-items:center;gap:6px;color:var(--fb-link);font-size:.8125rem;font-weight:700}
.story-proof .look-suggest-label svg{width:15px;height:15px}
.look-buttons{display:flex;flex-wrap:wrap;gap:8px}
@media(forced-colors:active){
  .look-card,.look-alert,.look-chat,.look-slots,.look-review,.look-suggest,.look-bubble{border:1px solid CanvasText}
  :is(.look-kind,.look-actions span,.look-next)::before{forced-color-adjust:none;background:CanvasText}
}

/* The beats laid across the page (.is-wide): since 9 Oct 2026 the main event, the class's
   request and the path beyond the school, the only two (the record beat, laid across from
   8 Oct, came off the landing the same day). The heading on the left with its words
   beside it, starting level with its first line, and the example below at full width. Narrow
   screens keep the one column. */
@media(min-width:861px){
  .story-beat.is-wide{grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px)}
  .is-wide .story-words{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr;column-gap:clamp(28px,6vw,96px)}
  .is-wide .story-words h2{grid-row:1 / 4;align-self:start;max-width:none}
  .is-wide .story-words p{grid-column:2;max-width:50ch}
  .is-wide .story-words h2 + p{grid-row:1;margin-top:36px}
  .is-wide .story-words p + p{grid-row:2}
  .is-wide .story-words p + p + p{grid-row:3}
  .is-wide .story-stage{max-width:none;justify-self:stretch}
  .is-wide .proof-body{padding:24px clamp(20px,3vw,32px) 26px}
}
/* ---------- The main event (9 Oct 2026) ----------
   The owner: the class's request with the school's reply, and where it goes when the school
   doesn't answer, are "the main event". Both are laid across the page (.is-wide), the request
   in the teal of action, the path in the coral of the silence it answers.
   The request: three dated moments in the room's own look, left to right in a wide window
   (a dot on each date, a line from date to date, the last one green for the reply), one
   above another in a narrow one. The card is the feed's request (its chip, "What we're
   asking the school to do", the green count, Supported), what the school receives is an
   email from the parent's own address with the reply link, and the answer is the feed's
   green "What the school said" with the days it took. */
#beat-together::before{background:var(--tide-line)}
[aria-labelledby="beat-together"] .story-stage{--proof-tint:var(--tide-field);--proof-tint-2:color-mix(in srgb,var(--tide-line) 34%,var(--tide-field))}
.req-flow{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.req-flow > li{display:grid;align-content:start;gap:8px;min-width:0}
.req-when{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;margin:0 4px;color:var(--fb-ink-2);font-size:.8125rem;line-height:1.3}
.req-when::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--fb-blue)}
.req-flow > li:last-child .req-when::before{background:var(--fb-green)}
.req-when time{font-weight:700;color:var(--fb-ink);font-variant-numeric:tabular-nums}
.req-flow .look-card{height:100%}
.look-kind.is-request{color:var(--fb-link)}
.look-kind.is-request::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h2l5 4V5l-5 4h-2a1 1 0 0 0-1 1zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h2l5 4V5l-5 4h-2a1 1 0 0 0-1 1zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E")}
.look-outcome{margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--fb-field);font-size:.875rem;text-wrap:pretty}
.look-outcome-label{display:flex;align-items:center;gap:6px;margin-bottom:2px;color:var(--fb-ink-2);font-size:.8125rem;font-weight:600}
.look-outcome-label::before{content:"";flex:none;width:15px;height:15px;background:#F3425F;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h2l5 4V5l-5 4h-2a1 1 0 0 0-1 1zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h2l5 4V5l-5 4h-2a1 1 0 0 0-1 1zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat}
.look-support{display:inline-flex;align-items:center;gap:6px}
.look-support::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat,linear-gradient(#5CD07A,#2E9A48)}
.story-request .look-buttons{margin-top:10px}
.look-mail-head{display:grid;gap:1px;padding-bottom:8px;border-bottom:1px solid var(--fb-line-2);color:var(--fb-ink-2);font-size:.8125rem}
.look-mail .look-title{margin-top:8px}
.look-mail-note{margin-top:6px;color:var(--fb-ink-2);font-size:.75rem}
.look-reply{padding:10px 12px;border-radius:8px;background:var(--fb-green-field);font-size:.875rem;line-height:1.4;text-wrap:pretty}
.look-reply-label{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin-bottom:4px;color:var(--fb-green-ink);font-size:.8125rem;font-weight:600}
.story-proof .look-reply-label svg{width:15px;height:15px;stroke-width:2.6}
.look-reply-label time{font-weight:400}
.look-reply-label time::before{content:"· "}
.look-days{margin-top:10px;color:var(--fb-ink-2);font-size:.8125rem;line-height:1.4;text-wrap:pretty}
.look-days b{margin-right:3px;color:var(--fb-ink);font-size:1.25rem;font-weight:700;line-height:1}
@container (min-width:700px){
  .req-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
  .req-when{position:relative;display:block;padding-top:20px}
  .req-when::before{position:absolute;left:0;top:0;width:12px;height:12px}
  .req-when time{display:block}
  .req-flow > li:not(:last-child) .req-when::after{content:"";position:absolute;left:18px;right:-16px;top:5px;height:2px;border-radius:2px;background:var(--fb-line)}
}
@media(forced-colors:active){
  .look-outcome,.look-reply{border:1px solid CanvasText}
  :is(.req-when,.look-outcome-label,.look-support)::before{forced-color-adjust:none;background:CanvasText}
}

/* The path: the pathway page's timetable (_Timetable), cut down. Each stop in order, a
   number on it, what it can do, and its published time beside it: a bar to scale against the
   longest (teal for time they owe you, red for a window that closes on you, hatched where
   none is published), the label in the page's own words. Where you are is marked, with the
   note the record gives there. A wide window sets the time in a column of its own. */
.story-path{container-type:inline-size}
.ex-path{list-style:none;margin:0;padding:0;display:grid}
.ex-path > li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:start;padding:14px 0;border-top:1px solid var(--rule)}
.ex-path > li:first-child{padding-top:0;border-top:0}
.ex-path > li.is-here{margin-inline:-12px;padding:12px;border:0;border-radius:14px;background:var(--tide-wash)}
.ex-path > li.is-here + li{border-top:0}
.ex-path-n{grid-row:1 / 3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--stock-2);color:var(--ink);font-size:.875rem;font-weight:750;line-height:1}
.ex-path .is-here .ex-path-n{background:var(--tide-deep);color:#fff}
.ex-path-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:1rem;line-height:1.35;color:var(--ink)}
.ex-path-name b{font-weight:700}
.ex-path-here{padding:1px 10px;border-radius:999px;background:var(--tide-deep);color:#fff;font-size:.75rem;font-weight:700;line-height:1.6}
.ex-path-who > p + p{margin-top:3px;font-size:.875rem;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.ex-path-time{grid-column:2;display:grid;gap:7px}
.ex-path-bar{position:relative;display:block;height:8px;border-radius:999px;background:var(--stock-2);overflow:hidden}
.ex-path-bar::before{content:"";position:absolute;inset:0 auto 0 0;width:max(var(--w,0%),10px);border-radius:inherit;background:var(--tide-line)}
.ex-path-time.is-yours .ex-path-bar::before{background:var(--notice)}
.ex-path-time.is-none .ex-path-bar{background:repeating-linear-gradient(-45deg,var(--stock-2) 0 4px,var(--rule-2) 4px 6px)}
.ex-path-time.is-none .ex-path-bar::before{display:none}
.ex-path-time p{font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.ex-path-time b{display:block;font-weight:750;color:var(--tide-deep)}
.ex-path-time.is-yours b{color:var(--notice-deep)}
.ex-path-time.is-none b{color:var(--ink-3)}
.ex-path-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:.8125rem;color:var(--ink-2)}
.ex-path-key span{display:inline-flex;align-items:center;gap:6px}
.ex-path-key span::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--tide-line)}
.ex-path-key .is-yours::before{background:var(--notice)}
.ex-path-key .is-here::before{background:var(--tide-deep)}
@container (min-width:620px){
  .ex-path > li{grid-template-columns:36px minmax(0,1.3fr) minmax(0,1fr);column-gap:22px}
  .ex-path-n{grid-row:auto}
  .ex-path-time{grid-column:3;padding-top:4px}
}
@media(forced-colors:active){
  .ex-path-bar{border:1px solid CanvasText}
  :is(.ex-path-bar,.ex-path-key span)::before{forced-color-adjust:none;background:CanvasText}
  .ex-path-n,.ex-path-here{border:1px solid CanvasText}
}

/* Short laptop screens: the example cards tighten a little, so the tallest (the three
   everyday moments) fits under the bar in one view beside its words. */
@media(min-width:1101px) and (max-height:720px){
  .story-stage{padding:20px}
  .proof-body{padding:16px}
  .proof-note{margin-top:10px}
  .room-look{--look-pad:10px}
  .look-feed{gap:8px}
  .look-card{padding:10px 12px}
  .look-chat-wall{padding:8px 12px 10px}
}

/* The close: the last word, at the foot of the dawn (below), in its periwinkle, which the
   footer's painting carries straight on (8 Oct 2026, owner: the painting is the background
   and the words sit on it; no blocks of colour). So the close's words, the finder and then
   the footer's links all stand in one sky above the families walking to school. The ode's
   street was night; this is the next morning. The words on the left; on the right the
   hero's finder again, as a glass card. No overflow clipping: the finder's results drop
   below its field, and the close (with the whole dawn) sits a layer above the footer so a
   long list of results can overlap it. */
.story-close{position:relative;z-index:1;margin-top:clamp(24px,4vw,48px);
  padding-block:clamp(72px,10vw,144px) clamp(40px,5vw,64px);color:var(--ink)}
.story-close-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,6vw,96px);align-items:center}
.story-close-words h2{max-width:13ch;font-size:clamp(2rem,4vw,3.1rem);line-height:1.07;letter-spacing:-.035em;font-weight:740;color:var(--ink)}
.story-close-words p{margin-top:20px;max-width:38ch;font-size:1.125rem;line-height:1.6;color:var(--ink)}
/* On the periwinkle (since 9 Oct 2026) the teals don't hold for words this size (deep teal
   3.8:1), so the line and the quiet link are ink (5.6:1); the focus ring keeps the deep teal,
   which a ring may use at 3:1. */
.story-close .story-quiet,.story-close .story-quiet span{color:var(--ink)}
.story-close-words :focus-visible{outline-color:var(--tide-deep)}
/* The finder, as in the hero: a white card in the sky. Under it, once the explorer can tell,
   schools around the parent's approximate area, one tap to choose; and the credit for the
   directory the schools come from. */
.close-find-card{padding:18px 18px 14px;border-radius:22px;background:var(--sheet);color:var(--ink);
  box-shadow:0 1px 2px rgba(28,43,42,.06),0 24px 48px -24px rgba(28,43,42,.38)}
.story-close .close-find{margin-top:0}
.close-find .atlas-location{margin-top:6px}

/* ---------- The dawn (8 Oct 2026) ----------
   The landing is one painted day, with no blocks of white (owner's direction: "make the
   whole page feel like the footer... painted color throughout the page", mock-up A, "a
   little more australian in terms of iconography and nature"). The afternoon at the gate
   (the hero) warms to evening (--dusk) and on to pre-dawn at its foot (the night between,
   the ode "For the parent who…" on its blue-hour street, came out on 9 Oct 2026: the
   owner, "does not work"); from there one painted dawn sky (.story-dawn) runs behind the
   four beats and the close: pre-dawn lilac (--predawn) with the Southern Cross still out,
   rose and peach clouds, gold, then the hero's periwinkle the footer's walk to school
   begins in (9 Oct 2026; it was a pale morning blue), so the landing ends in the sky it began with. The sky is a fal.ai painting set to cover from the top, fading into a gradient
   of its own colours that ends in --morning, so the close and the footer meet it exactly.
   Australian birds and plants live at its edges and in the gaps between the beats, never
   behind the words: the Southern Cross over the first heading and golden wattle behind the
   first example (the silence), two rainbow lorikeets crossing to the path, a gum branch
   hanging behind the ordinary days' example and galahs crossing on from it, and a kookaburra
   on a branch over the close, laughing at the morning. Each is a watercolour painted alone on white (fal.ai,
   sources in out/dawn-art) and multiplied into the sky, so the white drops away and the
   paint glazes into the dawn. On the painting, the example windows and the finders are clear
   glass, white at 86% with no blur behind them, and the bar at the top is frosted glass. (Until
   10 Oct 2026 the windows were frosted too; the owner found scrolling "sometimes gets stuck",
   and a live blur behind every example was why: scrolling the landing took 40ms a frame, with
   stalls of 180ms, against a steady 17ms without it.) */
.page-home .nav{background:rgb(255 251 244/.42);border-bottom-color:transparent;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.page-home .story-hero{background:linear-gradient(180deg,var(--stock) 0,var(--stock) 48%,var(--dusk) 82%,var(--predawn) 100%)}
.story-dawn{position:relative;z-index:1;isolation:isolate;overflow-x:clip;
  background:linear-gradient(180deg,var(--predawn) 0,#F1D6D0 34%,#F0DCCF 56%,var(--morning) 84%)}
.story-dawn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/dawn/sky.webp") 50% 0 / cover no-repeat;
  background-image:image-set(url("../img/dawn/sky.avif") type("image/avif"),url("../img/dawn/sky.webp") type("image/webp"));
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 95%);mask-image:linear-gradient(180deg,#000 78%,transparent 95%)}
.story-dawn .story-band,.story-dawn .story-band.is-tinted{position:relative;background:none;border:0}
/* The whole dawn is the layer above the footer now, so the close needn't be one of its own:
   as one, it would cut the kookaburra off from the sky it is multiplied into. */
.story-dawn .story-close{z-index:auto}
.story-dawn .story-words :is(h2,p){text-shadow:0 0 2px rgb(255 255 255/.55),0 0 12px rgb(255 255 255/.45)}
.story-dawn .story-stage{padding:0;background:none}
.story-dawn .story-proof,.story-dawn .close-find-card,.page-home .story-hero .hero-find{
  background:rgb(255 255 255/.86);border-color:rgb(255 255 255/.75)}
.story-dawn .story-proof{box-shadow:0 2px 6px rgb(40 40 70/.07),0 40px 80px -36px rgb(40 40 70/.45)}
.story-dawn .proof-bar{background:rgb(255 255 255/.5);border-bottom-color:rgb(28 43 42/.08)}
/* The birds and plants: behind the words and the glass, multiplied into the sky. Where one
   reaches in from beyond the page's edge, its far end fades out rather than stopping. */
.dawn-el{position:absolute;z-index:-1;display:block;pointer-events:none;mix-blend-mode:multiply}
.dawn-el img{display:block;width:100%;height:auto}
/* The Southern Cross hangs over the first beat's heading (silence, its words on the right). */
.dawn-cross{position:absolute;z-index:-1;top:clamp(18px,2.6vw,40px);right:max(var(--gutter),50% - var(--wrap) / 2 + 4px);
  width:clamp(52px,5.6vw,80px);height:auto;pointer-events:none}
.dawn-gum{top:0;right:max(0px,50% - var(--wrap) / 2 - 150px);width:clamp(150px,17vw,250px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
/* The galahs cross the gap under the ordinary days, clear of the next heading's mark. */
.dawn-galahs{bottom:clamp(-90px,-4.4vw,-40px);right:clamp(16px,9vw,200px);width:clamp(240px,38vw,580px)}
.dawn-wattle{bottom:clamp(24px,5vw,80px);left:max(0px,50% - var(--wrap) / 2 - 130px);width:clamp(120px,14vw,210px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
.dawn-lorikeets{top:clamp(-120px,-7vw,-48px);right:clamp(16px,12vw,240px);width:clamp(150px,17vw,260px)}
.dawn-kookaburra{top:clamp(-72px,-3.4vw,-22px);left:max(0px,50% - var(--wrap) / 2 - 120px);width:clamp(170px,19vw,280px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%);mask-image:linear-gradient(90deg,transparent,#000 26%)}
@media(max-width:860px){
  /* One column: the words run full width at the top of each beat, so the gum (which would
     sit behind them) stays out, the Southern Cross keeps to the right of the heading, and
     the rest keep to the gaps and to behind the examples. */
  .dawn-gum{display:none}
  .dawn-cross{right:var(--gutter);top:14px;width:52px}
  .dawn-galahs{bottom:-64px;right:4vw;width:min(72vw,420px)}
  .dawn-wattle{left:-18px;bottom:18px;width:min(30vw,170px)}
  .dawn-lorikeets{top:-44px;right:var(--gutter);width:min(36vw,200px)}
  .dawn-kookaburra{top:-34px;left:0;width:min(36vw,200px)}
}
@media print{.story-dawn::before,.dawn-el,.dawn-cross{display:none}.story-dawn,.page-home .story-hero{background:none}}
@media(forced-colors:active){.story-dawn::before,.dawn-el,.dawn-cross{display:none}}

/* ---------- Watercolour (8 Oct 2026) ----------
   On the landing everything painted is a watercolour (the owner: "water colored"): the
   footer's morning, and the buttons, labels, marks, dots and faces with it. Each is a wash
   cut from a fal.ai watercolour swatch, its pigment and ragged edge kept and its colours set
   here, light to dark by how heavy the paint lay (pieces and script in out/watercolour-art).
   So the words on them keep 4.5:1 or more even where a wash is palest (white on the teal,
   the blue and the faces; dark words on the pale labels; tools/test-watercolour.cjs). Each
   wash is drawn as one image, in a long or a short shape made with both ends kept, never as
   border-image slices (on a 150% screen their joins fell on half pixels and showed a seam).
   The other pages keep their solid fills for now. */
.page-home{--mark-w:62px}
.page-home .btn-primary,.page-home .atlas-search-submit{border-color:transparent;color:var(--sheet);
  background:url("../img/wc/wash-teal.webp") 50% / 100% 100% no-repeat border-box}
.page-home :is(.btn-primary,.atlas-search-submit):hover{border-color:transparent;color:var(--sheet);background-image:url("../img/wc/wash-teal-hover.webp")}
.page-home .atlas-search-submit{background-image:url("../img/wc/wash-teal-short.webp")}
.page-home .atlas-search-submit:hover{background-image:url("../img/wc/wash-teal-hover-short.webp")}
.page-home :is(.hero-kicker:not(.welcome-back *),.look-ask,.proof-tag){
  border-color:transparent;background:var(--wash) 50% / 100% 100% no-repeat border-box}
.page-home :is(.hero-kicker,.look-ask){--wash:url("../img/wc/pill-sun-long.webp")}
.page-home .proof-tag{--wash:url("../img/wc/pill-paper.webp")}
.page-home .look-btn{background:url("../img/wc/wash-grey.webp") 50% / 100% 100% no-repeat border-box}
.page-home .look-btn.is-blue{background-image:url("../img/wc/wash-blue.webp")}
/* The marks over the headings and the hero's underline are brush strokes, laid on as they grow. */
.page-home .story-words h2::before{width:var(--mark-w);height:14px;border-radius:0;
  background:url("../img/wc/stroke-sun.webp") 0 50% / var(--mark-w) 100% no-repeat}
.page-home :is(#beat-silence,#beat-next)::before{background:url("../img/wc/stroke-coral.webp") 0 50% / var(--mark-w) 100% no-repeat}
.page-home #beat-kind::before{background:url("../img/wc/stroke-sand.webp") 0 50% / var(--mark-w) 100% no-repeat}
.page-home #beat-together::before{background:url("../img/wc/stroke-teal.webp") 0 50% / var(--mark-w) 100% no-repeat}
/* The path's stops are blots: grey with ink numbers, your stop teal with white; "You are here" a teal wash. */
.page-home .ex-path-n{border-radius:0;background:url("../img/wc/face-grey.webp") 50% / 100% 100% no-repeat}
.page-home .ex-path .is-here .ex-path-n{background:url("../img/wc/face-teal.webp") 50% / 100% 100% no-repeat}
.page-home .ex-path-here{border-radius:0;padding:3px 16px;background:url("../img/wc/wash-teal.webp") 50% / 100% 100% no-repeat}
/* Faces are blots of their own colour, the letter on them as before. */
.page-home .room-avatar.room-avatar{border-radius:0;box-shadow:none;background:url("../img/wc/face-teal.webp") 50% / 100% 100% no-repeat}
.page-home .room-avatar.room-avatar.tone-1{background-image:url("../img/wc/face-sun.webp")}
.page-home .room-avatar.room-avatar.tone-2{background-image:url("../img/wc/face-coral.webp")}
.page-home .room-avatar.room-avatar.tone-3{background-image:url("../img/wc/face-plum.webp")}
.page-home .room-avatar.room-avatar.tone-4{background-image:url("../img/wc/face-blue.webp")}
.page-home .room-avatar.room-avatar.tone-5{background-image:url("../img/wc/face-green.webp")}
.page-home .room-avatar.room-avatar.is-you{background-image:url("../img/wc/face-you.webp")}
/* The mark, the app's icon and the chat's bar: painted teal, the chat's with a wet lower edge. */
.page-home :is(.brand-mark,.look-app){background:url("../img/wc/tex-teal.webp") 50% / cover}
.page-home .look-chat-head{background:url("../img/wc/band-wa.webp") 50% 100% / 100% 100% no-repeat}
@media print,(forced-colors:active){
  .page-home :is(.btn-primary,.atlas-search-submit,.hero-kicker,.look-ask,.proof-tag,.look-btn,
    .room-avatar.room-avatar,.brand-mark,.look-app,.look-chat-head,.ex-path-n,.ex-path-here),
  .page-home .story-words h2::before{background-image:none}
}

/* ---------- Watercolour on every page (8 Oct 2026) ----------
   The owner: "go through each and every page and do the water color effects and backgrounds".
   The landing's pieces are cut to measure; the rest of the site has some 270 filled pills,
   buttons, badges and circles, in every state, so one rule paints them all: each keeps its
   own colour (hover, current and pressed states change it as before), and the paint is laid
   behind its words as a watercolour, cut to the edge of the landing's teal wash (both ragged
   ends, whatever the width; a blot for the round ones) with that wash's pigment multiplied
   in. The element's own fill is clipped to its letters, where its words cover it, so only
   the paint shows; its focus ring is its own and stays whole. Multiplying only darkens, so
   white words gain contrast, and dark words on the pale fills keep 4.5:1 (the pigment takes
   a pale fill down by 15% at most). Faces are the landing's blots; room covers are a wash
   in the room's colour. */
:where(body:not(.page-home)) :where(.btn:not(.btn-ghost),.btn-ghost:hover,.tabs.app-tabs a.active,.nav-links a:is([aria-current],:hover),.nav-me:is([aria-current],:hover),.badge,.new-tag,.badge-new,.room-entry-rep,.room-entry-new,.room-entry-asks,.room-entry-action,.ai-verdict,.device-this,.roster-mine,.plan-label,.welcome-chip-new,.help-kind,.asked-tag,.live-pill,.for-you-live:not(.room-avatar),.nav-count,.nav-bell-count,.filter-count,.room-result-kind,.choice-pills label:has(input:checked),.kind-pill input + span,.rsvp.is-active,.circle-toggle.is-active,.day-chip[aria-pressed="true"],.feed-filters a,.shared-section-nav a,.pin-toggle,.post-stage,.school-reply-label,.newcomers-strip a,.needs-hand-go,.tt-here,.nav-me-initial,.step-num,.needs-hand-icon,.help-compose-icon,.room-entry-asks-icon,.letter-step-n,.invite-step-n,.settings-icon,.room-shortcut-icon,.q-n,.tt-num,.compose-fab,.tl-dot,.room-joined-icon,.record-change-flag,.event-date){position:relative;isolation:isolate}
body:not(.page-home) :is(.btn:not(.btn-ghost),.btn-ghost:hover,.tabs.app-tabs a.active,.nav-links a:is([aria-current],:hover),.nav-me:is([aria-current],:hover),.badge,.new-tag,.badge-new,.room-entry-rep,.room-entry-new,.room-entry-asks,.room-entry-action,.ai-verdict,.device-this,.roster-mine,.plan-label,.welcome-chip-new,.help-kind,.asked-tag,.live-pill,.for-you-live:not(.room-avatar),.nav-count,.nav-bell-count,.filter-count,.room-result-kind,.choice-pills label:has(input:checked),.kind-pill input + span,.rsvp.is-active,.circle-toggle.is-active,.day-chip[aria-pressed="true"],.feed-filters a,.shared-section-nav a,.pin-toggle,.post-stage,.school-reply-label,.newcomers-strip a,.needs-hand-go,.tt-here,.nav-me-initial,.step-num,.needs-hand-icon,.help-compose-icon,.room-entry-asks-icon,.letter-step-n,.invite-step-n,.settings-icon,.room-shortcut-icon,.q-n,.tt-num,.compose-fab,.tl-dot,.room-joined-icon,.record-change-flag,.event-date){-webkit-background-clip:text;background-clip:text;border-color:transparent}
body:not(.page-home) :is(.btn:not(.btn-ghost),.btn-ghost:hover,.tabs.app-tabs a.active,.nav-links a:is([aria-current],:hover),.nav-me:is([aria-current],:hover),.badge,.new-tag,.badge-new,.room-entry-rep,.room-entry-new,.room-entry-asks,.room-entry-action,.ai-verdict,.device-this,.roster-mine,.plan-label,.welcome-chip-new,.help-kind,.asked-tag,.live-pill,.for-you-live:not(.room-avatar),.nav-count,.nav-bell-count,.filter-count,.room-result-kind,.choice-pills label:has(input:checked),.kind-pill input + span,.rsvp.is-active,.circle-toggle.is-active,.day-chip[aria-pressed="true"],.feed-filters a,.shared-section-nav a,.pin-toggle,.post-stage,.school-reply-label,.newcomers-strip a,.needs-hand-go,.tt-here,.nav-me-initial,.step-num,.needs-hand-icon,.help-compose-icon,.room-entry-asks-icon,.letter-step-n,.invite-step-n,.settings-icon,.room-shortcut-icon,.q-n,.tt-num,.compose-fab,.tl-dot,.room-joined-icon,.record-change-flag,.event-date)::before{content:"";position:absolute;inset:-1px -2px;z-index:-1;pointer-events:none;border-radius:0;
  background-color:inherit;background-image:url("../img/wc/grain-dark.webp");background-size:cover;background-position:center;background-blend-mode:multiply;
  -webkit-mask:url("../img/wc/edge-l.webp") left / auto 100% no-repeat,url("../img/wc/edge-r.webp") right / auto 100% no-repeat,url("../img/wc/edge-band.webp") center / calc(100% - 1.5em) 100% no-repeat;
  mask:url("../img/wc/edge-l.webp") left / auto 100% no-repeat,url("../img/wc/edge-r.webp") right / auto 100% no-repeat,url("../img/wc/edge-band.webp") center / calc(100% - 1.5em) 100% no-repeat}
body:not(.page-home) :is(.nav-me-initial,.step-num,.needs-hand-icon,.help-compose-icon,.room-entry-asks-icon,.letter-step-n,.invite-step-n,.settings-icon,.room-shortcut-icon,.q-n,.tt-num,.compose-fab,.tl-dot,.room-joined-icon,.record-change-flag,.event-date)::before{inset:-1px;
  -webkit-mask:url("../img/wc/blot-mask.webp") center / 100% 100% no-repeat;mask:url("../img/wc/blot-mask.webp") center / 100% 100% no-repeat}
/* A secondary button was white with an edge; on its own the paint needs a colour, so it is a
   pale teal wash (deeper on hover), and the quiet delete a pale red one. */
body:not(.page-home) .btn:not(.btn-primary,.btn-notice,.btn-ghost,.btn-danger-quiet,:disabled,[aria-disabled="true"]){background-color:var(--tide-field)}
body:not(.page-home) .btn:not(.btn-primary,.btn-notice,.btn-ghost,.btn-danger-quiet,:disabled,[aria-disabled="true"]):hover{background-color:var(--tide-field-2)}
body:not(.page-home) .btn.btn-danger-quiet{background-color:var(--notice-field)}
/* So are the white jump links under a record's or a page's title (inside a room they keep the
   room's grey). */
body:not(.page-home):not(.in-room) .shared-section-nav a{background-color:var(--tide-field)}
body:not(.page-home):not(.in-room) .shared-section-nav a:hover{background-color:var(--tide-field-2)}
/* The room card's Open room was set static (it had been placed over the card); the paint
   needs it to be its own box. */
/* Relative only to hold its paint; inset:auto keeps experience.css's old right/top (from when the
   button floated absolutely) from shifting it 24px left and half a row down. */
body:not(.page-home) .room-entry .room-entry-action{position:relative;inset:auto}
/* A comment's "new" beside its time has no fill of its own, so it gets no paint. */
body.in-room :is(.comment-when,.reply-when) .new-tag::before{display:none}
/* Faces: the landing's blots, in each tone; a group's tile keeps its rounded square, painted. */
body:not(.page-home) :is(.room-avatar.room-avatar,.roll .initial.initial){background:url("../img/wc/face-teal.webp") 50% / 100% 100% no-repeat}
body:not(.page-home) :is(.room-avatar.room-avatar,.roll .initial.initial).tone-1{background-image:url("../img/wc/face-sun.webp")}
body:not(.page-home) :is(.room-avatar.room-avatar,.roll .initial.initial).tone-2{background-image:url("../img/wc/face-coral.webp")}
body:not(.page-home) :is(.room-avatar.room-avatar,.roll .initial.initial).tone-3{background-image:url("../img/wc/face-plum.webp")}
body:not(.page-home) :is(.room-avatar.room-avatar,.roll .initial.initial).tone-4{background-image:url("../img/wc/face-blue.webp")}
body:not(.page-home) :is(.room-avatar.room-avatar,.roll .initial.initial).tone-5{background-image:url("../img/wc/face-green.webp")}
body:not(.page-home) :is(.room-avatar.room-avatar,.roll .initial.initial).is-you{background-image:url("../img/wc/face-you.webp")}
body:not(.page-home) .room-avatar.room-avatar.for-you-quiet{background-image:url("../img/wc/face-grey.webp")}
body:not(.page-home) :is(.school-group-face,.room-result-face).room-avatar.room-avatar{background-size:150% 150%}
/* A room's cover: a watercolour wash in the room's own colour. */
body.in-room .room-cover.room-cover{background:url("../img/wc/cover-teal.webp") center / cover no-repeat}
body.in-room .room-cover.room-cover.tone-1{background-image:url("../img/wc/cover-sun.webp")}
body.in-room .room-cover.room-cover.tone-2{background-image:url("../img/wc/cover-coral.webp")}
body.in-room .room-cover.room-cover.tone-3{background-image:url("../img/wc/cover-plum.webp")}
body.in-room .room-cover.room-cover.tone-4{background-image:url("../img/wc/cover-blue.webp")}
body.in-room .room-cover.room-cover.tone-5{background-image:url("../img/wc/cover-green.webp")}
body.in-room .room-cover.room-cover::after{display:none}
/* The pale notes and panels (sun for what needs you, teal for what is settled) carry the same
   pigment, so they read as washes too. */
body:not(.page-home) :is(.notice-warn,.notice-green,.private-field,.private-note,.tell-school,.thanks-form,.asked-you,.asked-declined,.late-line,
  .ai-drafted,.ai-reading,.letter-mail-hint,.letter-long-hint,.plate-water,.plate-land,.for-you-item.is-new > a,.newcomers-strip,.thread-school-reply){
  background-image:url("../img/wc/grain-dark.webp");background-size:cover;background-position:center;background-blend-mode:multiply}
@media print,(forced-colors:active){
  body:not(.page-home) :is(.btn:not(.btn-ghost),.btn-ghost:hover,.tabs.app-tabs a.active,.nav-links a:is([aria-current],:hover),.nav-me:is([aria-current],:hover),.badge,.new-tag,.badge-new,.room-entry-rep,.room-entry-new,.room-entry-asks,.room-entry-action,.ai-verdict,.device-this,.roster-mine,.plan-label,.welcome-chip-new,.help-kind,.asked-tag,.live-pill,.for-you-live:not(.room-avatar),.nav-count,.nav-bell-count,.filter-count,.room-result-kind,.choice-pills label:has(input:checked),.kind-pill input + span,.rsvp.is-active,.circle-toggle.is-active,.day-chip[aria-pressed="true"],.feed-filters a,.shared-section-nav a,.pin-toggle,.post-stage,.school-reply-label,.newcomers-strip a,.needs-hand-go,.tt-here,.nav-me-initial,.step-num,.needs-hand-icon,.help-compose-icon,.room-entry-asks-icon,.letter-step-n,.invite-step-n,.settings-icon,.room-shortcut-icon,.q-n,.tt-num,.compose-fab,.tl-dot,.room-joined-icon,.record-change-flag,.event-date){-webkit-background-clip:border-box;background-clip:border-box}
  body:not(.page-home) :is(.btn:not(.btn-ghost),.btn-ghost:hover,.tabs.app-tabs a.active,.nav-links a:is([aria-current],:hover),.nav-me:is([aria-current],:hover),.badge,.new-tag,.badge-new,.room-entry-rep,.room-entry-new,.room-entry-asks,.room-entry-action,.ai-verdict,.device-this,.roster-mine,.plan-label,.welcome-chip-new,.help-kind,.asked-tag,.live-pill,.for-you-live:not(.room-avatar),.nav-count,.nav-bell-count,.filter-count,.room-result-kind,.choice-pills label:has(input:checked),.kind-pill input + span,.rsvp.is-active,.circle-toggle.is-active,.day-chip[aria-pressed="true"],.feed-filters a,.shared-section-nav a,.pin-toggle,.post-stage,.school-reply-label,.newcomers-strip a,.needs-hand-go,.tt-here,.nav-me-initial,.step-num,.needs-hand-icon,.help-compose-icon,.room-entry-asks-icon,.letter-step-n,.invite-step-n,.settings-icon,.room-shortcut-icon,.q-n,.tt-num,.compose-fab,.tl-dot,.room-joined-icon,.record-change-flag,.event-date)::before{display:none}
}
.find-local{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.find-local h3{font-size:1rem;line-height:1.4}
.find-local > p{margin-top:2px;font-size:.8125rem;line-height:1.5;color:var(--ink-3)}
.find-local ul{list-style:none;margin:6px -8px 0;padding:0}
/* The second selector outranks the site's rule for a link alone in a list item (site.css). */
.find-local a,.find-local li > a:only-child:not(.btn){display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px;
  border-radius:12px;color:var(--ink);text-decoration:none}
.find-local a:hover{background:var(--tide-wash)}
.find-local a::after{content:"";flex:none;width:8px;height:8px;margin-right:6px;border:solid var(--tide);
  border-width:2px 2px 0 0;transform:rotate(45deg)}
.find-local a > span{display:grid;gap:2px;min-width:0}
.find-local strong{font-size:.9375rem;font-weight:650}
.find-local small{font-size:.8125rem;color:var(--ink-3)}
.find-source{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font-size:.75rem;line-height:1.5;color:var(--ink-3)}

.school-atlas.plate{border-radius:24px;border:1px solid var(--rule);box-shadow:var(--shadow-lift)}
.atlas-search-control{border-radius:14px}
.atlas-search-submit{border-radius:10px;margin:5px;min-height:40px}
/* On a phone "Name or postcode" is never cut off: a tighter icon and padding, and on the
   narrowest phones "Find" drops under the field at full width. */
@media(max-width:480px){
  .atlas-search-control{grid-template-columns:30px minmax(0,1fr) auto}
  .atlas-search-control > svg{margin-left:10px}
  .atlas-search-control input{padding-inline:4px}
  .atlas-search-submit{margin:5px 5px 5px 2px}
}
@media(max-width:380px){
  .atlas-search-control{grid-template-columns:30px minmax(0,1fr)}
  .atlas-search-submit{grid-column:1 / -1;margin:0 5px 5px}
}

/* =====================================================================
   Signed-in pages (reviewed 25 Sep 2026 as a demo parent)
   ===================================================================== */
/* Secondary actions were transparent with no edge, so "Add to timeline", "Copy the
   letter" or "Open the record" read as plain bold text. A soft teal pill keeps them
   clearly secondary to the primary button but unmistakably clickable. */
.btn-ghost{background:var(--tide-wash);border-color:var(--tide-field-2);color:var(--tide-deep)}
.btn-ghost:hover{background:var(--tide-field);border-color:var(--tide);color:var(--tide-deep)}
/* Navigation stays quiet: the header already has one strong action. */
.nav .btn-ghost{background:transparent;border-color:transparent}
.nav .btn-ghost:hover{background:var(--tide-wash)}

.hint,.field .hint{font-size:.875rem;line-height:1.5}
.q-n{width:26px;height:26px;border:0;background:var(--tide-field);color:var(--tide-deep);font-size:.8125rem}

/* Section shortcuts and room filters: pills, like every other control. */
.shared-section-nav a,.feed-filters a{border-radius:999px}
.shared-section-nav a:hover{border-color:var(--tide-field-2)}
/* On a phone a thread's section links are one row that scrolls sideways with faded ends,
   like a record's, so the post starts a row higher. */
@media(max-width:560px){
  .shared-section-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px calc(-1 * var(--gutter)) 18px;
    padding:6px var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
  .shared-section-nav::-webkit-scrollbar{display:none}
  .shared-section-nav a{flex:none;white-space:nowrap}
}

/* Support choices: rounded option cards; the chosen one gets a full teal edge. */
.shared-consent-choices label{border-radius:14px;border-color:var(--rule-2)}
.shared-consent-choices label:has(input:checked){box-shadow:0 0 0 1px var(--tide)}

/* People in a room: round avatars in four warm tones (see Tone() in Room.cshtml).
   Your own stays solid teal; a rep also carries a sun ring, and "Rep" is always
   printed beside the name. */
.room-avatar,.roll .initial{border:0;border-radius:50%;background:var(--tide-field);color:var(--tide-deep)}
.room-avatar.tone-1,.roll .initial.tone-1{background:var(--sun-field);color:var(--sun-ink)}
.room-avatar.tone-2,.roll .initial.tone-2{background:var(--coral-field);color:var(--coral-deep)}
.room-avatar.tone-3,.roll .initial.tone-3{background:var(--land);color:var(--land-ink)}
.room-avatar.is-you,.roll .initial.is-you{background:var(--tide-deep);color:var(--sheet)}
.roll .initial.is-rep{box-shadow:0 0 0 2px var(--sheet),0 0 0 4px var(--sun)}

/* New concern: the school & details column sits in its own soft panel instead of
   floating beside the story card. */
.record-context{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:24px;box-shadow:var(--shadow-soft)}
.record-context .field{margin-bottom:24px}
/* The heading's padding was room for a rule this look doesn't draw. */
.record-context .section-head{padding-bottom:0;margin-bottom:20px}
/* The last field in the grouped block drops its margin, which jammed the next label. */
.record-context-fields{margin-bottom:24px}

.account-rooms{border-radius:var(--r-card);box-shadow:var(--shadow-soft)}

/* Empty states: a friendly card with a soft icon disc, not a bare ruled box. */
.empty{border-radius:var(--r-card);box-shadow:var(--shadow-soft)}
.empty svg{width:52px;height:52px;padding:12px;border-radius:50%;background:var(--tide-field);stroke:var(--tide-deep)}
.empty .btn{margin-inline:auto}

/* Success messages ("Saved", "Posted") were drawn on buff land and read as a caution.
   Teal says "done" in this palette. */
.notice-green{background:var(--tide-field)}
.notice-green svg{stroke:var(--tide)}
.notice-green p,.notice-green b{color:var(--tide-deep)}
/* Something that didn't go as expected ("so it wasn't sent", "That invite link is no longer
   available") was the same teal as "done", and its flash had the same tick, so a refusal read
   as a success. It's the sun now, as "needs you" is; red stays for problems and deadlines. */
.notice-warn{background:var(--sun-field)}
.notice-warn > svg{stroke:var(--sun-deep)}

/* The in-page confirmation (site.js) that replaces the browser's own pop-up. */
/* margin:auto restores the native centring that the global margin reset removes. */
.confirm-dialog{margin:auto;border:0;border-radius:22px;padding:28px;width:min(440px,calc(100vw - 32px));
  background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-lift)}
.confirm-dialog::backdrop{background:color-mix(in srgb,var(--ink) 40%,transparent)}
.confirm-dialog h2{font-size:1.25rem;line-height:1.3}
.confirm-dialog p{margin-top:10px;color:var(--ink-2);font-size:1rem;line-height:1.6}
.confirm-dialog .actions{margin-top:22px}
@media(prefers-reduced-motion:no-preference){
  .confirm-dialog[open]{animation:confirm-in .18s ease-out}
  @keyframes confirm-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
}

/* ---------- Parent room as a forum ----------
   What a parent needs at a glance: who is here, what is new since they last looked,
   and how to join in. "New" is always sun, which is otherwise only decoration, so it
   never competes with teal actions or red warnings. */
.room-where{margin-top:6px;color:var(--ink-2);font-size:.9375rem}
.room-people{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 8px;
  border:1px solid var(--rule);border-radius:999px;background:var(--sheet);color:var(--ink-2);
  font-size:.875rem;text-decoration:none;box-shadow:var(--shadow-soft);white-space:nowrap}
.room-people b{color:var(--ink);font-size:1rem}
.room-people:hover{background:var(--tide-wash);border-color:var(--tide-field-2);color:var(--tide-deep)}
/* A row of faces keeps its own width: beside words that wrap ("Kate L., Hannah W. and 3 others in
   this conversation") it was squeezed, and its last faces sat on the first words. */
.room-faces{display:inline-flex;flex:none}
.room-faces .room-avatar{box-shadow:0 0 0 2px var(--sheet)}
.room-faces .room-avatar + .room-avatar{margin-left:-8px}

.room-news{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:14px;padding:12px 16px;
  background:var(--sun-field);border:1px solid color-mix(in srgb,var(--sun) 45%,transparent);border-radius:14px}
.room-news p{color:var(--ink);font-size:.9375rem;line-height:1.45;flex:1 1 220px}
.room-news-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--sun-deep)}
.room-news-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.room-news-actions a,.room-news-actions .linkish{color:var(--tide-deep);font-weight:650;font-size:.9375rem;min-height:36px;display:inline-flex;align-items:center}

/* One row of filters that scrolls sideways on a phone, instead of a two-by-two block. */
.feed-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding:2px;margin-inline:-2px}
.feed-filters::-webkit-scrollbar{display:none}
.feed-filters a{flex:none;white-space:nowrap;min-height:40px;gap:6px}
/* Wider than a phone, the row sits inside its column, and on a small laptop beside a room's rail
   it still runs out of room ("Your posts" cut at a hard edge). The end with more filters past it
   fades, as the phone's row does, so it reads as "more this way"; site.js marks which end. */
@media(min-width:561px){
  .feed-filters.has-more-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .feed-filters.has-more-start{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
  .feed-filters.has-more-start.has-more-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
}
/* On a phone the row runs to the screen's edges with softly faded ends, like a record's
   section links, so a filter cut off at the edge reads as "more this way". The 6px block
   padding keeps keyboard focus rings from being clipped by the scrolling row. */
@media(max-width:560px){
  .feed-filters{margin:-4px calc(-1 * var(--gutter)) 8px;padding:6px var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
}
/* A private record's section links: on a phone, one row running to the screen's edges and
   scrolling sideways, softly faded at each edge, instead of three rows of pills pushing the
   next step out of the first view. At either end the first and last links line up with
   the page. The extra block padding keeps focus rings from being clipped. */
@media(max-width:560px){
  .record-section-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:-4px calc(-1 * var(--gutter)) 20px;padding:6px var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
  .record-section-nav::-webkit-scrollbar{display:none}
  .record-section-nav a{flex:none;white-space:nowrap}
}
.filter-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--sun);color:var(--on-sun);font-size:.75rem;font-weight:750}

.badge-new{background:var(--sun-field);color:var(--sun-ink);border-color:color-mix(in srgb,var(--sun) 55%,transparent);text-decoration:none}
a.badge-new:hover{background:var(--sun-hover);color:var(--on-sun)}
.new-tag{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:var(--sun-field);
  color:var(--sun-ink);font-size:.75rem;font-weight:750;line-height:1.5}
.thread-card[data-news="true"]{box-shadow:inset 4px 0 0 var(--sun),var(--shadow-soft)}
.comment-when{display:inline-flex;align-items:center;gap:6px;flex:none}

.room-guide-list{list-style:none;padding:0;margin:10px 0 12px}
.room-guide-list li{font-size:.875rem;line-height:1.5;color:var(--ink-2)}
.room-guide-list li + li{margin-top:8px}
.room-guide-list b{color:var(--ink)}

/* Thread page: the opening post and every reply carry a face and a name. */
.shared-issue-page{--feed-avatar:36px}
.post-byline{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--ink-2);line-height:1.4}
.post-byline b{color:var(--ink)}
.discussion-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.shared-replies > li.reply{display:grid;grid-template-columns:var(--feed-avatar) minmax(0,1fr);gap:12px;scroll-margin-top:96px}
.reply-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;line-height:1.4}
.reply-meta b{font-size:.9375rem;color:var(--ink);overflow-wrap:anywhere}
.reply-meta time{font-size:.8125rem;color:var(--ink-3)}
.reply-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.reply-flags .badge{white-space:normal;text-align:left;max-width:100%}
.reply-body > .user-copy{margin-top:6px;color:var(--ink)}
.reply-report{margin-top:4px}
.reply-report > summary{display:inline-flex;align-items:center;min-height:32px;list-style:none;cursor:pointer;
  font-size:.8125rem;font-weight:600;color:var(--ink-3)}
.reply-report > summary::-webkit-details-marker,.reply-report > summary::before{display:none}
.reply-report > summary:hover,.reply-report[open] > summary{color:var(--notice-deep)}
.reply-compose .btn-primary{align-self:flex-start}

/* Reactions and reply-to under each reply: small, quiet pills. "Helpful" is teal when
   it is yours, like "Noticed too"; the count beside it is anonymous. */
.reply-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:6px;margin-left:-10px}
.reply-actions .reply-report{margin-top:0;margin-left:10px}
.helpful-form{display:inline-flex}
.reply-action{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 10px;border:0;
  border-radius:999px;background:transparent;color:var(--ink-2);font:inherit;font-size:.8125rem;font-weight:650;cursor:pointer}
.reply-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reply-action:hover{background:var(--tide-wash);color:var(--tide-deep)}
.reply-action.is-active{background:var(--tide-field);color:var(--tide-deep)}
.reply-action.is-active svg{fill:var(--tide-field-2)}
.reply-action:disabled{cursor:wait;opacity:.7}
.helpful-count:empty{display:none}
.helpful-count{min-width:1ch}
.reply-helped{font-size:.8125rem;color:var(--ink-3);margin-left:10px}
.comment-row .reply-actions{margin-top:4px}

/* "Now live": your own words reached the room. Teal, because it is yours and it is done. */
.new-tag.is-live,.badge-new.is-live{background:var(--tide-field);color:var(--tide-deep);border-color:var(--tide-field-2)}
.post-live-note{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;color:var(--ink-2);font-size:.9375rem}

/* Your own reply in review: fix it or take it back before anyone reads it. */
.reply-edit{flex-basis:auto}
.reply-edit > summary{list-style:none}
.reply-edit > summary::-webkit-details-marker,.reply-edit > summary::before{display:none}
.reply-edit[open]{flex-basis:100%;order:10}
.reply-edit[open] > summary{background:var(--tide-field);color:var(--tide-deep)}
.reply-edit-form{display:grid;gap:8px;margin:8px 0 4px 10px}
.reply-edit-form .btn{justify-self:start}

/* Quick reactions under the opening post. */
.post-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;
  margin-top:18px;padding-top:12px;border-top:1px solid var(--rule)}
.post-stats{font-size:.875rem;color:var(--ink-2)}
.post-actions-row{display:flex;flex-wrap:wrap;gap:4px 8px}
.post-actions-row .reply-action{text-decoration:none;background:var(--tide-wash)}
.post-actions-row .reply-action.is-active{background:var(--tide-field)}
/* Share needs script (room-live.js), so it shows only with it, and takes no column without. */
.post-share{display:none}
.js .post-share{display:inline-flex}
.js .post-share[hidden]{display:none}

/* Composer starters: optional first words for a hesitant parent. */
.composer-starters{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:2px 0 8px}
.composer-starters .hint{margin:0 4px 0 0}
.starter{min-height:36px;padding:6px 12px;border:1px solid var(--tide-field-2);border-radius:999px;background:var(--tide-wash);
  color:var(--tide-deep);font:inherit;font-size:.8125rem;font-weight:650;cursor:pointer}
.starter:hover{background:var(--tide-field)}
/* On a phone the hint keeps its line and the three starters share one row that scrolls
   sideways, faded at the right, instead of three stacked rows before the Topic box. */
@media(max-width:560px){
  .composer-starters:not([hidden]){display:grid;grid-template-columns:repeat(3,max-content);column-gap:8px;row-gap:6px;
    overflow-x:auto;scrollbar-width:none;margin:2px -4px 8px;padding:4px 28px 4px 4px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .composer-starters::-webkit-scrollbar{display:none}
  .composer-starters .hint{grid-column:1 / -1}
  .starter{white-space:nowrap}
}

/* Links and addressing inside what parents write. */
.user-link{color:var(--tide);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.user-link:hover{color:var(--tide-deep)}
.mention{color:var(--tide-deep);font-weight:650;background:var(--tide-field);border-radius:6px;padding:0 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Thread page: where the parent left off, and the private mute. */
.discussion-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.shared-replies li.new-divider{display:flex;align-items:center;gap:12px;padding:0;border-top:0;
  color:var(--sun-ink);font-size:.8125rem;font-weight:700;scroll-margin-top:96px}
.shared-replies li.new-divider::before,.shared-replies li.new-divider::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--sun)}
.shared-replies > li.new-divider + li{border-top:0;margin-top:14px;padding-top:0}

/* Answers hang under the reply they answer, one level deep, on a quiet rule. */
.shared-replies .reply-answers{list-style:none;margin:12px 0 0;padding:0 0 0 14px;border-left:2px solid var(--rule)}
.reply-answers > li.reply{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;scroll-margin-top:96px}
.reply-answers > li + li{margin-top:14px}
.reply-answers > li.new-divider + li{margin-top:10px}
.reply-answers .room-avatar{width:28px;height:28px;font-size:.6875rem}
.conversation-people{display:flex;align-items:center;gap:10px;margin:-2px 0 12px;font-size:.875rem;color:var(--ink-2);line-height:1.4}
.conversation-people > span{min-width:0;overflow-wrap:anywhere}

/* The small box that opens under a reply when you answer it. */
.answer-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding-left:14px;
  border-left:2px solid var(--tide-field-2)}
.answer-form textarea{flex:1 0 100%;min-height:64px;max-height:240px}
.answer-form .answer-note{flex-basis:100%;margin:0;font-size:.8125rem;color:var(--ink-3)}
.answer-form .linkish{font-size:.875rem}
.key-hint{display:none;font-size:.8125rem;color:var(--ink-3)}
@media(hover:hover) and (pointer:fine){.key-hint{display:inline}}
.reply-compose .key-hint{margin-top:-4px}

/* "Replying to Jess T." in a room card's reply box. */
.replying-to{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:.8125rem;font-weight:650;color:var(--tide-deep)}
.replying-to[hidden]{display:none}
.inline-reply-form .replying-to{grid-column:1/-1;grid-row:1}
.inline-reply-form:has(.replying-to:not([hidden])) .reply-context{display:none}

/* A quoted passage inside a post or reply, and the "Quote" button that makes one. */
.user-copy .quote{display:block;margin:4px 0 8px;padding:6px 12px;border-inline-start:3px solid var(--tide-line);
  border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:10px;border-end-end-radius:10px;background:var(--tide-wash);color:var(--ink-2)}
.quote-button{position:fixed;z-index:75;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px 8px 12px;
  border:0;border-radius:999px;background:var(--ink);color:var(--sheet);font:inherit;font-size:.875rem;font-weight:700;
  box-shadow:var(--shadow-lift);cursor:pointer}
.quote-button[hidden]{display:none}
.quote-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* "Updates for you": answers, mentions and replies on your posts, from every room. */
.room-head-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
/* On a phone three faces, not five, so "Your week" and the members share one row. */
@media(max-width:400px){.room-head-links .room-faces .room-avatar:nth-child(n+4){display:none}}
.room-updates{text-decoration:none}
.room-updates svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.room-updates .nav-count,.room-updates-btn .nav-count{margin-left:2px}
/* Joining another class or starting a room, under the rooms a parent is already in. */
.rooms-more{margin-top:16px;gap:8px}
/* With rooms, the privacy line follows joining, and any request waiting follows it. */
.rooms-private{margin:14px 0 32px;max-width:60ch}
.for-you-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin:0 0 12px}
.for-you-bar .for-you-summary{margin:0}
.for-you-mark{margin:0;flex:none}
.for-you-summary{margin:0 0 12px;font-weight:650;color:var(--ink)}
.for-you-summary .muted{font-weight:400}
.for-you-list{list-style:none;margin:0;padding:0;background:var(--sheet);border:1px solid var(--rule);border-radius:18px;overflow:hidden}
.for-you-item + .for-you-item{border-top:1px solid var(--rule)}
/* Beats the general "single link in a list item" rule in site.css, which centres an inline link. */
:is(.for-you-page,.bell-panel) .for-you-list > li.for-you-item > a.for-you-link{display:grid;grid-template-columns:30px minmax(0,1fr);
  align-items:start;gap:12px;min-height:0;padding:14px 18px;color:inherit;text-decoration:none}
.for-you-item > a:hover{background:var(--tide-wash)}
.for-you-item.is-new > a{background:var(--sun-field)}
.for-you-item.is-new > a:hover{background:color-mix(in srgb,var(--sun-field) 70%,var(--tide-wash))}
.for-you-text{display:grid;gap:3px;min-width:0}
/* Ordinary text, so a long one wraps word by word (as a flex row it moved "cancelled a date
   you’re going to" onto a line of its own), with New after the last word. */
.for-you-headline{display:block;color:var(--ink-2);line-height:1.4}
/* Solid sun, so it stands out on a new update's sun-tinted row (the pale pill vanished into it),
   the same in the bell's panel. */
.for-you-headline .new-tag{margin-left:6px;vertical-align:.08em;background:var(--sun);color:var(--on-sun)}
/* On the page every new update sits under "New", on a sun row: a pill on each said it a third
   time and pushed short headlines onto a second line. The bell’s panel, whose rows aren’t
   tinted, keeps it. */
.for-you-page .for-you-headline .new-tag{display:none}
.for-you-headline b{color:var(--ink)}
.for-you-where{font-size:.875rem;font-weight:650;color:var(--tide-deep);overflow-wrap:anywhere}
/* "· Class 3B" stays together on a line, and a room name too long for one line still breaks. */
.for-you-room{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.for-you-excerpt{font-size:.9375rem;color:var(--ink-2);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.for-you-item time{font-size:.8125rem;color:var(--ink-3)}
.for-you-live{background:var(--tide-field);color:var(--tide-deep)}
.for-you-live svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.for-you-empty{max-width:640px}

/* A flat room preview says whose reply an answer answers. */
.answering-to{font-size:.8125rem;font-weight:600;color:var(--ink-3);white-space:nowrap}
.moderation-answering{margin-bottom:0;padding:8px 12px;border-radius:10px;background:var(--tide-wash);color:var(--ink-2);overflow-wrap:anywhere}

/* "@" suggests the people in this conversation. */
[data-mention-people]{position:relative}
.mention-menu{position:absolute;z-index:40;min-width:200px;max-width:calc(100% - 8px);margin:0;padding:6px;list-style:none;
  background:var(--sheet);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow-lift)}
.mention-menu li{padding:9px 12px;border-radius:8px;font-size:.9375rem;font-weight:600;cursor:pointer}
.mention-menu li:hover{background:var(--tide-wash)}
.mention-menu li[aria-selected="true"]{background:var(--tide-field);color:var(--tide-deep)}

/* Search matches, marked where they were found. */
.community-feed mark{background:var(--sun-field);color:inherit;border-radius:3px;padding:0 1px;box-shadow:0 0 0 1px color-mix(in srgb,var(--sun) 50%,transparent)}
.previous-replies[aria-busy="true"]{opacity:.7;pointer-events:none}

/* Something the parent just posted settles in with a brief teal wash. */
@media(prefers-reduced-motion:no-preference){
  .just-posted{animation:just-posted 2.4s ease-out}
/* A reply just posted is scrolled into view with room under it for the toast that says where
   it went, so the toast doesn't sit on the reply and its "In review" line. */
.just-posted{scroll-margin-bottom:120px}
body:has(.compose-fab:not([hidden])) .just-posted{scroll-margin-bottom:184px}
  @keyframes just-posted{from{background:var(--tide-field)}to{background:transparent}}
}

/* Notifications: a count on "Parent rooms" and a dot on the phone menu button for what is
   new in your rooms; the bell (below) for what is for you. */
.nav-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;
  border-radius:999px;background:var(--sun);color:var(--on-sun);font-size:.75rem;font-weight:750;line-height:1;vertical-align:1px}
/* What's new in your rooms is coral, as the room card's "N new" and the home page's chip are;
   sun stays for what needs you (the bell, Updates for you, the moderation queue). */
.nav-count[data-nav-news]{background:var(--coral-deep);color:var(--sheet)}
.menu-btn{position:relative}
/* Open, the menu button is an X, as its label ("Close menu") already said: the usual sign that
   the same button closes it. The news dot goes while it's open; the menu shows the count. */
.menu-btn .menu-icon-close,.menu-btn[aria-expanded="true"] .menu-icon-open{display:none}
.menu-btn[aria-expanded="true"] .menu-icon-close{display:inline}
.menu-btn.has-news[aria-expanded="true"]::after{display:none}
/* Where the menu button shows, sign-out moves from the header into the end of the menu. */
.mobile-signout{display:none}
@media(max-width:900px){
  .js .nav-user .inline-form{display:none}
  .js .mobile-menu .mobile-signout{display:block;margin:0}
  .mobile-signout button{display:block;width:100%;min-height:46px;padding:12px 0;border:0;background:none;
    font:inherit;font-weight:600;color:var(--ink-2);text-align:left;cursor:pointer}
  .mobile-signout button:hover{color:var(--notice-deep)}
  .js .mobile-menu a:has(+ .mobile-signout){border-bottom:1px solid var(--rule)}
  /* Where you are, as the header's teal pill says it on a wider screen: deep-teal words and a
     bar at the screen's edge, so the words stay in line with the rest. The menu had marked it
     for screen readers only. */
  .mobile-menu a[aria-current]{position:relative;color:var(--tide-deep)}
  .mobile-menu a[aria-current]::before{content:"";position:absolute;left:calc(-1 * var(--gutter));top:8px;bottom:8px;
    width:4px;border-radius:0 4px 4px 0;background:var(--tide-deep)}
  /* Open, the menu scrolls within itself, and a scroller clips what's outside its box: inset by
     the page's width, it cut that bar off (7 Oct 2026). Open, it spans the screen and the gutter
     is its padding, so the words stay where they were and the bar sits at the edge inside it. */
  .js .mobile-menu.open{width:auto;margin-inline:0;padding-inline:var(--gutter)}
}
.menu-btn.has-news::after{content:"";position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;
  background:var(--coral-deep);box-shadow:0 0 0 2px var(--sheet)}

/* The bell: Updates for you from any page. Header buttons are circles, like the "you"
   circle beside them; the bell's count is the sun badge on its shoulder. */
.nav-user .icon-btn{border-radius:50%;border:1px solid var(--rule);background:var(--sheet);color:var(--ink)}
.nav-user .icon-btn:hover{background:var(--tide-wash);border-color:var(--tide-field-2);color:var(--tide-deep)}
.nav-user .icon-btn[aria-expanded="true"]{background:var(--tide-field);border-color:var(--tide-field-2);color:var(--tide-deep)}
.nav-bell{position:relative;text-decoration:none}
.nav-bell svg{width:21px;height:21px;stroke-width:2}
.nav-bell-count{position:absolute;top:-3px;right:-5px;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--sun);color:var(--on-sun);font-size:.6875rem;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--sheet)}
.bell-panel{position:fixed;inset:auto;margin:0;padding:0;width:min(400px,calc(100vw - 16px));
  max-height:min(600px,calc(100dvh - 96px));overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--rule);border-radius:var(--r-card);background:var(--sheet);color:var(--ink);
  box-shadow:0 2px 6px rgba(60,42,20,.07),0 24px 56px -18px rgba(60,42,20,.34);transform-origin:top right}
.bell-head{position:sticky;top:0;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:16px 18px 8px;background:var(--sheet)}
.bell-title{margin:0;font-family:var(--font-display);font-size:1.25rem;font-weight:740;letter-spacing:-.02em;line-height:1.2}
.bell-mark{margin:0;flex:none}
.bell-mark .linkish{font-size:.875rem}
.bell-list{margin:0;padding:2px 8px 8px;border:0;border-radius:0;background:transparent;overflow:visible;display:grid;gap:2px}
.bell-list .for-you-item + .for-you-item{border-top:0}
/* In the panel a new update is marked by its "New" tag alone; a run of tinted rows reads heavy. */
.bell-list .for-you-item.is-new > a{background:transparent}
.bell-list .for-you-item > a:hover,.bell-list .for-you-item.is-new > a:hover{background:var(--tide-wash)}
.bell-panel .for-you-list > li.for-you-item > a.for-you-link{padding:10px;border-radius:12px;gap:10px}
.bell-list .for-you-headline{font-size:.9375rem}
.bell-list .for-you-excerpt{font-size:.875rem;-webkit-line-clamp:1}
.bell-empty{padding:4px 18px 16px}
.bell-empty p{margin:0}
.bell-empty p + p{margin-top:4px}
.bell-all{position:sticky;bottom:0;display:block;padding:13px 18px;border-top:1px solid var(--rule);background:var(--sheet);
  text-align:center;font-weight:650;color:var(--tide-deep);text-decoration:none}
.bell-all:hover{background:var(--tide-wash)}
.bell-loading{display:grid;gap:10px;padding:18px}
.bell-loading i{display:block;height:52px;border-radius:12px;background:var(--stock-2)}
.bell-loading i:first-child{height:22px;width:45%;border-radius:8px}
@media(max-width:560px){
  /* On a phone the panel is a sheet across the top, under the header. */
  .bell-panel{left:8px!important;right:8px!important;width:auto;max-height:calc(100dvh - 84px)}
}
@media(prefers-reduced-motion:no-preference){
  .bell-panel{transition:opacity .16s ease,transform .16s ease,overlay .16s allow-discrete,display .16s allow-discrete}
  .bell-panel:not(:popover-open){opacity:0;transform:translateY(-4px) scale(.985)}
  @starting-style{.bell-panel:popover-open{opacity:0;transform:translateY(-6px) scale(.985)}}
  .bell-loading i{background:linear-gradient(90deg,var(--stock-2) 30%,var(--tide-wash) 50%,var(--stock-2) 70%) 0 0/250% 100%;
    animation:bell-shimmer 1.1s linear infinite}
  @keyframes bell-shimmer{to{background-position:-150% 0}}
}
.room-entry-badges{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.room-entry-asks{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:4px 12px 4px 4px;border-radius:999px;
  background:var(--sun-field);border:1px solid var(--sun-deep);color:var(--sun-ink);font-size:.875rem;font-weight:650;line-height:1.3}
.room-entry-asks-icon{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--sun);color:var(--on-sun);font-size:.75rem;font-weight:800}

/* Outcomes of in-place actions. */
.live-toast{position:fixed;left:50%;bottom:24px;z-index:80;width:max-content;max-width:min(520px,calc(100vw - 32px));
  padding:12px 18px;border-radius:14px;background:var(--ink);color:var(--sheet);font-size:.9375rem;line-height:1.45;
  box-shadow:var(--shadow-lift);opacity:0;transform:translate(-50%,10px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.live-toast.is-shown{opacity:1;transform:translate(-50%,0)}
.live-toast.is-warn{background:var(--notice-deep)}
/* With an "Undo" (an open roster turn taken by mistake): the words, then the button, which works. */
.live-toast.has-undo{display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px}
.live-toast.has-undo.is-shown{pointer-events:auto}
.live-toast .flash-undo{flex:none;margin:0}
.live-toast .flash-undo .btn{border-color:rgba(255,255,255,.55);background:transparent;color:var(--sheet)}
.live-toast .flash-undo .btn:hover{background:rgba(255,255,255,.14);color:var(--sheet)}
.live-toast .flash-undo .btn:focus-visible{outline:2.5px solid var(--sheet);outline-offset:2px}

/* The connection note: shown while offline, then "back online" for a moment. Same look as
   the outcome toast; it stays while the parent is offline. */
.net-status{position:fixed;left:50%;bottom:24px;z-index:81;width:max-content;max-width:min(520px,calc(100vw - 32px));
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:var(--ink);color:var(--sheet);
  font-size:.9375rem;line-height:1.45;text-wrap:balance;box-shadow:var(--shadow-lift);opacity:0;transform:translate(-50%,10px);
  pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.net-status::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--sun)}
.net-status.is-online::before{background:var(--tide-field-2)}
.net-status.is-shown{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:no-preference){
  .net-status.is-nudged{animation:net-nudge .36s ease}
  @keyframes net-nudge{25%{transform:translate(calc(-50% - 6px),0)}75%{transform:translate(calc(-50% + 6px),0)}}
}
@media print{.net-status{display:none}}

/* "New activity in this room": floats under the header, takes no space until shown. */
.live-pill-slot{position:sticky;top:84px;z-index:30;height:0;display:flex;justify-content:center}
.live-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;
  background:var(--tide-deep);color:var(--sheet);font-weight:650;font-size:.9375rem;text-decoration:none;box-shadow:var(--shadow-lift)}
.live-pill:hover{background:var(--tide);color:var(--sheet)}
.live-pill .room-news-dot{background:var(--sun)}
#composer{scroll-margin-top:96px}

/* Phones: "Start a discussion" follows the parent once the composer scrolls away. */
.compose-fab{display:none}
@media(max-width:760px){
  .compose-fab{position:fixed;right:16px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:8px;
    min-height:52px;padding:14px 20px 14px 16px;border-radius:999px;background:var(--tide-deep);color:var(--sheet);
    font-weight:700;text-decoration:none;box-shadow:var(--shadow-lift);
    opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  /* Out of sight it's out of the Tab order too (visibility, once it has faded), so a keyboard
     never lands on a button no one can see; focused, it always shows. */
  .compose-fab.is-away,.compose-fab:focus-visible{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
  .compose-fab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
  /* Scrolling down to read, it slides out of the way, so it never sits on a post's "Open" or
     "Reply"; any scroll back up brings it back, words and all. (Shrunk to a round "+", it still
     covered the right-hand action of every post that passed under it.) */
  /* It fits a phone at any text size: past the screen's width its words wrap inside the pill. */
  .compose-fab{max-width:calc(100vw - 32px)}
  .compose-fab > span{line-height:24px}
  .compose-fab.is-away.is-tucked:not(:focus-visible){opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;transition-delay:0s,0s,.2s}
  /* Tabbing down, a control stops short of the bottom edge, so the page scrolls on and the
     button tucks away rather than sitting on a post's "Reply" or "Open". */
  :is(a,button,input,select,textarea,summary,[tabindex]):not(.compose-fab){scroll-margin-bottom:84px}
  body:has(.compose-fab:not([hidden])) :is(.live-toast,.net-status){bottom:88px}
  /* Already writing an answer: the button would only cover it. */
  body:has(.answer-form:focus-within) .compose-fab{display:none}
}
/* Phones: a post's three actions size to their words, so "Support options" stays on one line
   beside the short "Reply". Below 361px they stack, as before. */
@media(min-width:361px) and (max-width:560px){
  .thread-actions:not(.is-two){grid-template-columns:repeat(3,auto)}
}
@media print{.compose-fab,.live-pill-slot,.live-toast,.quote-button,.answer-form,.mention-menu,.key-hint{display:none}}

@media(max-width:560px){
  .community-room-head .row-between{flex-direction:column;align-items:flex-start}
  .room-people{padding-right:14px}
  .reply-report > summary,.reply-action,.starter{min-height:44px}
  .shared-issue-page{--feed-avatar:32px}
  .shared-replies > li.reply{gap:10px}
}

@media(max-width:1100px){
  /* Tablets: the painting is a full-width band under the buttons, the whole scene from the
     gum tree to the school, rising out of the paper. The finder follows it, lifted a little
     over the painted road. */
  .story-hero{--band-h:clamp(300px,52vw,500px);min-height:0;padding-top:clamp(28px,4vw,52px);padding-bottom:clamp(28px,5vw,48px)}
  .story-scene{position:relative;inset:auto;z-index:auto;height:var(--band-h);overflow:clip;
    margin:clamp(24px,4vw,40px) calc(50% - 50vw) 0}
  .story-paint{object-position:50% 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 93%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 93%,transparent);
    -webkit-mask-composite:source-over;mask-composite:add}
  .story-hero .hero-find{position:relative;margin-top:-30px}
  .story-title{font-size:clamp(2.25rem,4.9vw,3.4rem)}
  .story-lede{font-size:clamp(1.0625rem,1.8vw,1.1875rem)}
}
/* Phones (9 Oct 2026, the owner: separate images for the phone's orientation, "too much
   white on the top"): a painting of their own, a portrait cut (1:2) of the gate, the clock
   gable and the families at the door under the tall cumulus. Its foot stands in the band
   under the buttons as before, with the finder rising a little over the road, and the rest
   rises behind the words to the top of the hero (which clips it), so the hero is painted sky
   from the top, not bare paper. Behind the words the painting is softened to 45% over the
   paper, with a paper halo on the smaller words, so they keep their contrast; at the band it
   comes up to full. The band is no size container here, so the painting can rise out of it.
   Up to 560px, a phone held upright; from 561 to 760px the band stays the wide painting,
   a little taller, on the gate. */
@media(max-width:760px){
  .story-hero{--band-h:clamp(240px,66vw,340px)}
  .story-scene{margin-top:clamp(22px,6vw,32px)}
  .story-paint{object-position:60% 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 93%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 93%,transparent)}
}
@media(max-width:560px){
  .story-scene{overflow:visible;container-type:normal}
  .story-paint{inset:auto 0 0;z-index:-1;height:auto;aspect-ratio:1 / 2;object-position:50% 100%;
    --phone-veil:linear-gradient(180deg,transparent 0,rgb(0 0 0/.45) 72px,rgb(0 0 0/.45) calc(100% - var(--band-h) - 56px),
      #000 calc(100% - var(--band-h) + 36px),#000 calc(100% - 20px),transparent);
    -webkit-mask-image:var(--phone-veil);mask-image:var(--phone-veil)}
  .story-hero :is(.story-lede,.story-quiet){text-shadow:0 0 4px var(--stock),0 0 10px var(--stock),0 0 18px var(--stock)}
}
@media(max-width:900px){
  .story-close-grid{grid-template-columns:minmax(0,1fr)}
  .story-close-words h2{max-width:18ch}
  .close-find-card{max-width:520px}
}
@media(max-width:860px){
  .story-beat{grid-template-columns:minmax(0,1fr)}
  .story-beat.is-flipped .story-words{order:0}
  .story-stage{justify-self:start}
}
@media(max-width:760px){
  .record-context{padding:20px}
}
@media(max-width:480px){
  .story-stage{padding:12px;border-radius:24px}
  .story-proof{border-radius:16px}
  .proof-body{padding:14px}
  .room-look{--look-pad:8px}
  .proof-bar{padding:9px 10px 9px 14px}
  .close-find-card{padding:14px 14px 12px;border-radius:18px}
}
@media(prefers-reduced-motion:no-preference){
  .card-link{transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
}
/* The landing moves (10 Oct 2026, the owner: "there is no movement on the landing page
   anymore"). Each movement shows the product doing its job, once, and only where motion is
   welcome. The hero's words arrive and its painting settles as the page opens. Then each
   example plays as it comes into view (site.js adds .is-playing): in the room, the press of
   "Me too", Priya's reply and the next step; the request's three dated moments one after
   another, the school's answer landing, then the days it took; the path's stops in turn, each
   time filling to scale, and "You are here" stamped on; the ordinary days' ask taken and the
   chat running; the hot post struck through and the calmer version offered. The heading marks
   draw with your scrolling. Transform and opacity (and one strike-through's colour) only,
   nothing blurred, so scrolling stays smooth; without script, or with less motion asked for,
   everything simply shows. Each movement lets go once it has played (backwards, not both): held
   end states kept dozens of things on their own layers, and scrolling paid for it. The example's
   frame is simply there and its moments arrive in it; fading the whole frame in as well doubled
   the work while you scrolled. The marks draw by clipping (their painting is a fixed size), not
   by width, which laid the page out again every frame. The birds stay still: they are multiplied into the sky, so moving
   them with the scroll repainted it every frame (27ms frames against 17ms, measured 10 Oct). */
@media screen and (prefers-reduced-motion:no-preference){
  .page-home .story-hero-words > :is(.hero-kicker,.welcome-back,.story-title,.story-lede,.story-actions),
  .page-home .story-hero .hero-find{animation:story-in .8s cubic-bezier(.16,1,.3,1) backwards}
  .page-home .story-hero-words > .story-title{animation-delay:.08s}
  .page-home .story-hero-words > .story-lede{animation-delay:.2s}
  .page-home .story-hero-words > .story-actions{animation-delay:.32s}
  .page-home .story-hero .hero-find{animation-delay:.5s}
  .page-home .story-paint{transform-origin:50% 100%;animation:story-settle 2.8s cubic-bezier(.16,1,.3,1) backwards}

  .js .page-home .story-stage:not(.is-playing) :is(.look-comment,.look-next,.req-flow > li,.look-reply,.look-days,.ex-path > li,.ex-path-here,
    .look-feed > li,.look-matched,.look-chat-wall li,.look-tick,.look-review,.look-suggest){opacity:0}
  .js .page-home .story-stage:not(.is-playing) .ex-path-bar::before{transform:scaleX(0)}
  .js .page-home .story-stage:not(.is-playing) .look-struck{text-decoration-color:transparent}
  .is-playing :is(.look-comment,.look-next,.req-flow > li,.look-reply,.look-days,.ex-path > li,.look-feed > li,.look-matched,
    .look-chat-wall li,.look-review,.look-suggest){animation:story-in .6s cubic-bezier(.16,1,.3,1) backwards}
  /* The question: you press Me too, Priya answers, and the next step shows. */
  .is-playing .story-question .look-i-hand.is-on{animation:story-press .45s .45s ease-out backwards}
  .is-playing .story-question .look-comment{animation-delay:.9s}
  .is-playing .story-question .look-next{animation-delay:1.5s}
  /* The request: asked, sent, answered, and how long it took. */
  .is-playing .req-flow > li:nth-child(1){animation-delay:.25s}
  .is-playing .req-flow > li:nth-child(2){animation-delay:.75s}
  .is-playing .req-flow > li:nth-child(3){animation-delay:1.25s}
  .is-playing .req-flow .look-reply{animation-delay:1.75s}
  .is-playing .req-flow .look-days{animation-delay:2.25s}
  /* The path: each stop in turn, its time filling to scale; you are at the first. */
  .is-playing .ex-path > li:nth-child(1){animation-delay:.2s}
  .is-playing .ex-path > li:nth-child(2){animation-delay:.4s}
  .is-playing .ex-path > li:nth-child(3){animation-delay:.6s}
  .is-playing .ex-path > li:nth-child(4){animation-delay:.8s}
  .is-playing .ex-path-bar::before{transform-origin:0 50%;animation:story-fill 1s cubic-bezier(.16,1,.3,1) backwards}
  .is-playing .ex-path > li:nth-child(2) .ex-path-bar::before{animation-delay:.6s}
  .is-playing .ex-path > li:nth-child(3) .ex-path-bar::before{animation-delay:.8s}
  .is-playing .ex-path > li:nth-child(4) .ex-path-bar::before{animation-delay:1s;animation-duration:1.6s}
  .is-playing .ex-path-here{animation:story-stamp .5s .9s cubic-bezier(.16,1,.3,1) backwards}
  /* The ordinary days: your ask, Priya takes it, and the two of you message. */
  .is-playing .look-feed > li:nth-child(1){animation-delay:.2s}
  .is-playing .look-feed > li:nth-child(2){animation-delay:.45s}
  .is-playing .look-feed > li:nth-child(3){animation-delay:.7s}
  .is-playing .look-feed .look-matched{animation-delay:1s}
  .is-playing .look-chat-wall li:nth-child(1){animation-delay:1.5s}
  .is-playing .look-chat-wall li:nth-child(2){animation-delay:2.1s}
  .is-playing .look-tick{animation:story-show .3s 2.7s ease-out backwards}
  /* Kept kind: what you wrote is struck through, then the calmer version is offered. */
  .is-playing .look-struck{animation:story-strike .5s .5s ease-out backwards}
  .is-playing .story-calm .look-review{animation-delay:1s}
  .is-playing .story-calm .look-suggest{animation-delay:1.5s}
  @supports(animation-timeline:view()){
    .story-words h2::before{animation:story-grow linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
  }
}
@keyframes story-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes story-settle{from{scale:1.06}to{scale:1}}
@keyframes story-press{40%{transform:scale(.9)}to{transform:none}}
@keyframes story-fill{from{transform:scaleX(0)}to{transform:none}}
@keyframes story-stamp{from{opacity:0;transform:scale(1.35) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes story-show{from{opacity:0}to{opacity:1}}
@keyframes story-strike{from{text-decoration-color:transparent}to{text-decoration-color:rgba(228,30,63,.65)}}
@keyframes story-grow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media print{
  .plate,.card,.title-block,.record-welcome,.thread-card,.feed-composer,.letter-preview,
  .school-atlas.plate,.story-proof{box-shadow:none}
  .story-stage{background:none;padding:0}
  .story-scene,.close-find-card,.story-close .school-atlas,.foot-paint{display:none}
  .story-hero{padding-bottom:24px;background:none}
  .story-close{background:none;padding-block:24px}
  .story-close-words h2,.story-close-words p{color:black}
}
@media(forced-colors:active){
  .story-scene,.foot-paint{display:none}
  footer.site{display:block;border-top:1px solid CanvasText}
  .foot-ground{border-top:1px solid CanvasText}
  .story-hero{padding-bottom:48px}
  .plate,.card,.story-proof{border:1px solid CanvasText}
}

/* =====================================================================================
   Everyday help between families: room tabs, help board, rosters, calendar, circle, alerts.
   Same warm paper and teal as the rooms; sun marks what needs someone, as "New" does.
   ===================================================================================== */
input[type=time]{width:100%;padding:11px 13px;min-height:46px;font:inherit;font-size:1rem;background:var(--sheet);
  color:var(--ink);border:1.5px solid var(--control-rule);border-radius:12px;font-variant-numeric:tabular-nums}

/* Tabs under the room name: where you are never changes as you move around the room. */
.community-room-head:has(.room-tabs){padding-bottom:0}
.room-tabs{position:relative;display:flex;gap:4px;margin-top:16px;overflow-x:auto;scrollbar-width:none}
.room-tabs::-webkit-scrollbar{display:none}
.room-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:10px 14px;margin-bottom:-1px;
  border-bottom:3px solid transparent;color:var(--ink-2);font-weight:650;text-decoration:none;white-space:nowrap}
.room-tabs a:hover{color:var(--tide-deep);background:var(--tide-wash);border-radius:10px 10px 0 0}
.room-tabs a[aria-current="page"]{color:var(--tide-deep);border-bottom-color:var(--tide)}
.room-tabs .nav-count{margin-left:0}
/* The tab row scrolls, which would clip a focus ring drawn outside the tab; draw it inside. */
.room-tabs a:focus-visible{outline-offset:-3px;border-radius:10px}
.tab-intro{margin:0 0 16px;color:var(--ink-2);max-width:68ch}
.tab-intro-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-bottom:16px}
.tab-intro-row .tab-intro{flex:1 1 300px;margin:0}

/* One plain safety line, where it matters. */
.help-safety{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px 12px;margin-bottom:18px;padding:12px 16px;
  border-radius:14px;background:var(--tide-wash);border:1px solid var(--tide-field-2);color:var(--ink-2)}
.help-safety > svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--tide-deep);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.help-safety p{margin:0;font-size:.9375rem;line-height:1.5}
.help-safety-links{grid-column:2}
.help-safety b{color:var(--ink)}
.help-safety-links{display:flex;gap:14px;font-size:.875rem;font-weight:650}

/* "Ask for a hand" and "Offer something": disclosures that open into a short form. */
.help-compose-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;align-items:start;margin-bottom:8px}
.help-compose-row > .help-compose{margin-bottom:0}
/* Opened, a form takes the whole row: at half width beside the other card its quick days stacked
   one per line and the date box was cut to "dd/mm/y". The other card waits on the next row. */
.help-compose-row > .help-compose[open]{grid-column:1 / -1}
.help-compose{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow-soft);
  margin-bottom:16px;scroll-margin-top:96px}
.help-compose > summary{display:flex;align-items:center;gap:12px;min-height:72px;padding:14px 16px;list-style:none;cursor:pointer;border-radius:var(--r-card)}
.help-compose > summary::-webkit-details-marker{display:none}
.help-compose > summary::before,.help-compose > summary::after{display:none;content:none}
.help-compose > summary:hover{background:var(--tide-wash)}
.help-compose[open] > summary{border-bottom:1px solid var(--rule);border-radius:var(--r-card) var(--r-card) 0 0;background:var(--tide-wash)}
.help-compose > summary b{display:block;color:var(--ink);font-size:1.0625rem}
.help-compose > summary small{display:block;color:var(--ink-3);font-size:.875rem;line-height:1.4}
.help-compose-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--tide-deep);color:var(--sheet);font-weight:800;font-size:1.25rem}
#ask .help-compose-icon{background:var(--sun);color:var(--on-sun)}
.help-form{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}
/* A field's message box with nothing in it takes no room: in a grid or column form an empty
   one still claimed a gap, so the space after some fields was double. Validation swaps the
   class to field-validation-error when it has something to say. */
.field-validation-valid{display:none}
.help-form .field{margin:0}
.help-form fieldset{margin:0;padding:0;border:0;min-width:0}
.help-form legend{margin-bottom:8px;font-weight:650;color:var(--ink);font-size:1rem}
.kind-pills{display:flex;flex-wrap:wrap;gap:8px}
.kind-pills legend{width:100%}
.kind-pill{position:relative;display:inline-flex}
.kind-pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.kind-pill span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1.5px solid var(--rule-ink);
  border-radius:999px;background:var(--sheet);font-weight:650;font-size:.9375rem;color:var(--ink-2)}
.kind-pill:hover span{border-color:var(--tide)}
.kind-pill input:checked + span{background:var(--tide-deep);border-color:var(--tide-deep);color:var(--sheet)}
.kind-pill input:focus-visible + span{outline:3px solid var(--tide-field-2);outline-offset:2px}
.help-when{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
/* With its quick days (Today, Tomorrow and the next two school days), Day takes half the row,
   so the four sit on one line above the date box. Phones stack Day on top (below). */
@media(min-width:561px){.help-when:has(.day-chips){grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}}
.private-field{padding:12px 14px;border-radius:14px;background:var(--sun-field);border:1px dashed var(--sun-deep)}
.private-field label{font-weight:700;color:var(--sun-ink)}
.private-field .hint{margin-top:6px;color:var(--sun-ink)}
.audience-choice{display:grid;gap:8px}
.audience-option{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1.5px solid var(--rule);
  border-radius:14px;background:var(--sheet);cursor:pointer}
.audience-option:has(input:checked){border-color:var(--tide);background:var(--tide-wash)}
.audience-option:has(input:disabled){opacity:.6;cursor:not-allowed}
.audience-option input{flex:none;width:20px;height:20px;accent-color:var(--tide-deep);margin:0}
.audience-option b{color:var(--ink)}
.audience-option small{display:block;color:var(--ink-3);font-size:.8125rem}
.help-form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.help-form-actions .hint{margin:0}

/* The board: a card per ask or offer. */
.help-heading{margin:28px 0 12px}
.help-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.help-card{padding:16px 18px;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow-soft);scroll-margin-top:96px}
.help-card[data-new="true"]{box-shadow:inset 4px 0 0 var(--sun),var(--shadow-soft)}
.help-card.is-helping{border-color:var(--tide-field-2)}
.help-card-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.help-card-top > .help-card-head:only-child{grid-column:1 / -1}
.help-chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.help-kind{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:.8125rem;font-weight:700}
.help-kind.is-ask{background:var(--sun-field);color:var(--sun-ink)}
.help-kind.is-offer{background:var(--tide-field);color:var(--tide-deep)}
.help-kind.is-date{background:var(--land-wash);color:var(--land-ink)}
.help-audience{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:.8125rem;font-weight:650;
  background:var(--stock);color:var(--ink-2);border:1px solid var(--rule)}
.help-summary{margin:6px 0 2px;font-size:1.125rem;line-height:1.35;overflow-wrap:anywhere}
.help-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0;color:var(--ink-2);font-size:.9375rem}
.help-meta b{color:var(--ink)}
/* A place or time a parent typed may be one long word or a pasted link: it breaks inside the
   card rather than widen it (3 Oct 2026; one long place pushed Help, Rosters and Calendar up to
   420px sideways on a phone). */
.help-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.help-meta svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.help-when-text{font-weight:650;color:var(--ink)}
.help-details{margin:8px 0 0;color:var(--ink-2)}
.help-status{margin:12px 0 0;color:var(--ink-2)}
.help-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.help-responses{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.help-responses li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;
  border-radius:14px;background:var(--stock)}
.help-response-text{display:grid;gap:2px}
.help-response-note{color:var(--ink-2);font-size:.9375rem;overflow-wrap:anywhere}
.thanks-count{color:var(--tide-deep);font-weight:600}
.help-matched{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding:10px 12px;border-radius:14px;
  background:var(--tide-wash);color:var(--ink)}
.help-matched p{margin:0}
.help-matched .room-avatar{margin-top:2px}
.thanks-form{display:grid;gap:6px;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--sun-field);color:var(--sun-ink)}
.thanks-form b{color:var(--ink)}
.thanks-form .help-respond{margin-top:0}
/* Messages between a family and their helper: theirs on paper at the left, yours on teal at the right. */
.help-thread{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--stock);border:1px solid var(--rule);scroll-margin-top:96px}
.talk-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px}
.talk-title{margin:0;font-size:1rem;font-weight:700;color:var(--ink)}
.talk-contact{display:flex;flex-wrap:wrap;gap:6px}
.talk-contact .btn{gap:6px}
.talk-contact svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.talk-number{margin:4px 0 0;font-size:.875rem;color:var(--ink-3)}
.talk-number .user-copy{color:var(--ink);font-weight:600;white-space:nowrap}
.talk-msgs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.talk-msg{max-width:88%;padding:8px 12px;border-radius:14px;scroll-margin-top:96px}
.talk-msg.is-theirs{justify-self:start;background:var(--sheet);border:1px solid var(--rule);border-bottom-left-radius:4px}
.talk-msg.is-mine{justify-self:end;background:var(--tide-field);border-bottom-right-radius:4px}
.talk-meta{margin:0;font-size:.8125rem;color:var(--ink-3)}
.talk-meta b{color:var(--ink-2)}
.talk-meta time{margin-left:4px}
.talk-body{margin:2px 0 0;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.talk-removed{margin:2px 0 0;color:var(--ink-3)}
.talk-msg .reply-report{font-size:.8125rem}
.talk-empty,.talk-closed,.talk-sharing{margin:8px 0 0}
.talk-sharing{font-size:.875rem}
.talk-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin-top:10px}
.talk-compose textarea{min-height:44px;max-height:12rem;field-sizing:content;resize:vertical;background:var(--sheet)}
.share-number{margin-top:8px}
.share-number > summary{min-height:40px;font-size:.9375rem;font-weight:650;color:var(--tide-deep)}
.share-number-form{display:grid;gap:6px;margin-top:4px;padding:10px 12px;border-radius:14px;background:var(--sheet);border:1px solid var(--rule)}
.share-number-form label{font-weight:600;color:var(--ink)}
.share-number-form .help-respond{margin-top:0}
.share-number-form .hint{margin:0}
.phone-card > .muted{margin:0 0 14px}
.phone-card .form-check{margin:4px 0 14px}
.phone-actions{display:flex;flex-wrap:wrap;gap:8px}
.alerts-nudge{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px;padding:10px 14px;border-radius:14px;
  background:var(--sheet);border:1px dashed var(--tide);color:var(--ink-2);font-size:.9375rem}
.alerts-nudge svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--tide-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.alerts-nudge span{flex:1 1 220px}
/* These are boxes, not prose: the global p{max-width:68ch} would stop them short of the card or column edge. */
.alerts-nudge,.help-thanks,.record-next,p.help-empty{max-width:none}
.alerts-nudge a{font-weight:700}
.my-turns .alerts-nudge,.rsvp-row + .alerts-nudge,.rsvp-names + .alerts-nudge{margin:10px 0 0}
/* The summary pulls up under the heading; under the recovery nudge it keeps its own line. */
.records-overview .alerts-nudge{margin:0 0 16px}
.records-overview .alerts-nudge + .record-summary{margin-top:0}
.tell-school{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--sun-field);color:var(--sun-ink)}
.tell-school p{margin:0 0 8px}
.tell-school textarea{min-height:0;height:auto;field-sizing:content;resize:none;font-size:.9375rem;color:var(--ink);background:var(--sheet)}
.tell-school .btn{margin-top:8px}
.private-note{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--sun-field);border:1px dashed var(--sun-deep)}
.private-note .chart-label{color:var(--sun-ink)}
.private-note p{margin:6px 0 0;color:var(--ink)}
.help-respond{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.help-responded{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--tide-wash)}
.help-responded p{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--ink)}
.help-responded svg{flex:none;width:18px;height:18px;margin-top:3px;fill:none;stroke:var(--tide-deep);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* On the words' baseline: "Report" is centred in a tall tap target, and would sit below the count. */
.help-card-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px;font-size:.875rem}
.help-card-foot .reply-report{margin-left:auto}
/* Open, "Report" stays where it was, on the count's line, and only its form drops beneath,
   across the card: the form no longer squeezes the count into a column, nor moves "Report" to a
   line of its own above it. */
.help-card-foot > .reply-report[open]{display:contents}
.help-card-foot > .reply-report[open] > summary{margin:4px 0 0 auto}
/* The row's item is the fold's content box (::details-content), with the form inside it. */
.help-card-foot > .reply-report[open]::details-content{flex:1 1 100%}
.help-card-foot > .reply-report[open] > form{margin-top:0}
.help-empty{padding:16px 18px;border:1.5px dashed var(--rule-ink);border-radius:var(--r-card);color:var(--ink-2);background:transparent}
.help-thanks{margin:24px 0 0;padding:12px 16px;border-radius:14px;background:var(--tide-wash);color:var(--ink-2)}
.help-thanks b{color:var(--tide-deep)}
.help-recent{margin-top:20px}
.help-recent ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);display:grid;gap:8px}
.help-recent li > span{display:inline}
.help-recent .recent-thanks{display:block;margin-top:2px;color:var(--tide-deep);font-size:.9375rem;overflow-wrap:anywhere}
/* The help board's "Recently": a row per ask or offer, summary first, how it ended and the day
   under it, and "Ask again" as a button at the end of the row (under it on the narrowest). */
.help-recent .recent-list{list-style:none;margin:8px 0 0;padding:0;gap:0}
.recent-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 0;border-top:1px solid var(--rule)}
.recent-list li:first-child{border-top:0}
.recent-text{display:grid;gap:2px;flex:1 1 13rem;min-width:0}
.recent-what{color:var(--ink);font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.recent-meta{color:var(--ink-2);font-size:.875rem}
.recent-list .is-done .recent-outcome{color:var(--tide-deep);font-weight:650}
.recent-outcome,.recent-when{white-space:nowrap}
.recent-again{flex:none}
.my-turns-links{margin:8px 0 0;font-size:.875rem;font-weight:650}

/* "I've collected them": the one tap a waiting parent is hoping for. */
.check-in-form{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:12px;padding:12px 14px;border-radius:14px;
  background:var(--tide-wash);border:1px solid var(--tide-field-2)}
.check-in-form .btn svg,.checked-in svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.check-in-form .btn{gap:6px}
.check-in-form .hint{margin:0}
.checked-in{display:flex;align-items:center;gap:6px;margin:8px 0 0;color:var(--tide-deep);font-weight:700}
.help-matched .checked-in{margin-top:6px}
.editing-note{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin:0;padding:10px 12px;
  border-radius:12px;background:var(--sun-field);color:var(--sun-ink);font-size:.9375rem}
.editing-note b{color:var(--ink)}
.editing-note a{font-weight:700;white-space:nowrap}
.circle-hint{flex-basis:100%;color:var(--tide-deep);font-size:.8125rem;font-weight:600}
/* Their child, as they named them on joining: how parents at the gate know each other. */
.circle-child{flex-basis:100%;color:var(--ink-2);font-size:.8125rem}

/* Arriving from an alert or a link: the card it points at glows once. */
.help-card:target,.event-item:target,.circle-list li:target{animation:target-glow 2.4s ease-out 1}
@keyframes target-glow{from{box-shadow:0 0 0 3px var(--sun),var(--shadow-soft)}to{box-shadow:0 0 0 3px transparent,var(--shadow-soft)}}
@media (prefers-reduced-motion:reduce){
  .help-card:target,.event-item:target,.circle-list li:target{animation:none;box-shadow:0 0 0 3px var(--sun),var(--shadow-soft)}
}

/* Rosters: turns in a simple list, the open ones asking to be taken. */
.my-turns{margin-bottom:16px;padding:12px 16px;border-radius:14px;background:var(--tide-wash);border:1px solid var(--tide-field-2)}
.my-turns ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.my-turns li{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.my-turns a{color:var(--ink);text-decoration:none}
.my-turns a:hover{color:var(--tide-deep);text-decoration:underline}
/* The turns are quiet links; the alerts nudge among them is still a link and says so. */
.my-turns .alerts-nudge a{color:var(--tide-deep);text-decoration:underline}
.roster-slots{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.roster-slots li{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:8px 12px}
.roster-slots li + li{border-top:1px solid var(--rule)}
.roster-slots li.is-open{background:var(--stock)}
.roster-slots li.is-mine{background:var(--tide-wash)}
.roster-slots li.is-swap{background:var(--sun-field)}
.roster-day{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.roster-who small{color:var(--ink-3)}
.roster-slots li.is-swap .roster-who small{color:var(--sun-ink);font-weight:650}
/* A turn someone can’t make says so on its own line under their name, in the words of the
   button they pressed: "needs someone to swap", run on after the name, broke mid-phrase in a
   phone’s narrow column. */
.roster-who .roster-note{display:block;margin-top:1px;line-height:1.35}
/* Your own turn is a pill, as on Your week: a bold "You" at the top of the turns, beside "Today"
   and "Can’t make it", read like the table’s column headings. */
.roster-mine{display:inline-flex;padding:1px 9px;border-radius:999px;font-size:.8125rem;font-weight:700;background:var(--tide-deep);color:var(--sheet)}

/* Calendar: a date block and the details beside it. */
.event-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.event-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px 18px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow-soft);scroll-margin-top:96px}
.event-date{display:grid;place-content:center;text-align:center;height:64px;border-radius:14px;background:var(--tide-deep);color:var(--sheet)}
.event-date span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.event-date b{font-size:1.5rem;line-height:1.1}
form:has(input[name="Input.Kind"][value="Date"]:checked) .bring-field{display:none}
.rsvp-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px}
.rsvp{min-height:40px;padding:8px 14px;border:1.5px solid var(--rule-ink);border-radius:999px;background:var(--sheet);
  font:inherit;font-size:.875rem;font-weight:650;color:var(--ink-2);cursor:pointer}
.rsvp:hover{border-color:var(--tide);color:var(--tide-deep)}
.rsvp.is-active{background:var(--tide-deep);border-color:var(--tide-deep);color:var(--sheet)}
.rsvp-count{margin-left:6px;font-size:.875rem;color:var(--ink-2)}
.rsvp-names{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:.875rem;color:var(--ink-2)}

/* People you know. */
.circle-private{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
.circle-private svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--tide-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.circle-private p{margin:0}
.circle-room{margin-bottom:28px;scroll-margin-top:96px}
.circle-room-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-bottom:10px}
.circle-room-head h2 small{font-size:.875rem;font-weight:500;margin-left:6px}
/* Says who sees "Happy to welcome new families": the one thing on this page that isn't private. */
.circle-buddy-note{flex-basis:100%;margin:0;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
@media (min-width:1024px){ .circle-buddy-note{max-width:none;margin-top:-2px;text-align:right} }
.circle-list{list-style:none;margin:0;padding:0;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.circle-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;padding:8px 14px;scroll-margin-top:96px}
.circle-list li + li{border-top:1px solid var(--rule)}
.circle-list li.is-known{background:var(--tide-wash)}
.circle-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.circle-toggle{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1.5px solid var(--rule-ink);
  border-radius:999px;background:var(--sheet);font:inherit;font-size:.875rem;font-weight:650;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.circle-toggle:hover{border-color:var(--tide);color:var(--tide-deep)}
.circle-toggle.is-active{background:var(--tide-deep);border-color:var(--tide-deep);color:var(--sheet)}
.circle-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* The one long toggle: with large text its words wrap inside the pill rather than push the page sideways. */
.buddy-toggle{white-space:normal;text-align:left;max-width:100%}
.buddy-toggle svg{stroke-width:2;flex:none}
.buddy-toggle.is-active svg{fill:currentColor}

/* Alerts. */
.no-js .js-only{display:none}
/* Copy buttons need a script. Without one they did nothing, so they stay out of sight; the link
   or letter beside them is still there to select and copy by hand. */
.no-js :is([data-copy],[data-copy-input]){display:none}
.alerts-device,.alerts-choices,.alerts-devices{margin-bottom:18px;scroll-margin-top:96px}
.alerts-on{display:flex;align-items:center;gap:8px;color:var(--tide-deep)}
.alerts-on svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* The states that need the parent to do something get a matching mark: a muted bell when
   the browser won't show alerts, a warm circle when setting up failed. */
.alerts-off{display:flex;align-items:flex-start;gap:10px}
.alerts-off svg{flex:none;width:24px;height:24px;margin-top:.15em;fill:none;stroke:var(--sun-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.alerts-off.is-error svg{stroke:var(--notice)}
/* Long labels: the box sits on the first line, not the middle of the paragraph. */
.phone-card .form-check{align-items:flex-start}
.device-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.device-list li{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:10px 12px;border-radius:12px;background:var(--stock)}
.device-list li > span:first-child{flex:1 1 220px}
.device-this{display:inline-flex;padding:2px 10px;border-radius:999px;background:var(--tide-field);color:var(--tide-deep);font-size:.8125rem;font-weight:700}
.device-this[hidden]{display:none}

/* Conversations tab: a welcome for new families, and who needs a hand today. */
.welcome-card{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;padding:16px 18px;border-radius:var(--r-card);
  background:var(--sun-field);border:1px solid var(--sun-deep)}
.welcome-wave{font-size:1.75rem;line-height:1}
.welcome-card h2{margin:0 0 4px}
.welcome-card p{margin:0;color:var(--ink-2)}
/* Help, rosters and the calendar read in the same column as a room's conversations, not
   across the whole screen: message threads and forms stay a comfortable length. */
@media(min-width:861px){
  :is(.help-page,.rosters-page,.calendar-page) > :not(.breadcrumb,.community-room-head){max-width:860px}
}
/* Updates for you, Your week, Alerts, People you know and search results are lists of short lines,
   most with their own control: across the whole page each row was a short line with half a
   screen of nothing after it, and the eye had to cross it to reach its switch, its "I know
   them" or "Mark all as read". Your week's cards are a time and a title or two. They read in a column, left where the page's tabs and title
   already are, so nothing moves on the way in from Parent rooms or Account. */
@media(min-width:861px){
  :is(.for-you-page,.week-page,.alerts-page,.circle-page,.rooms-search-page) > :not(.tabs,.breadcrumb){max-width:760px}
}
/* The last square corners from the chart edition, rounded to the family's scale: the
   composer's "Write" reads as the pill button it stands for, a post's "What the room is
   asking" box and its action buttons match notices, and the school explorer's result list
   and map match its fields and data blocks. */
.composer-open-label{border-radius:999px}
.thread-outcome{border-radius:12px}
.thread-action{border-radius:10px}
.atlas-search-results{border-radius:12px}
.atlas-plot-shell{border-radius:14px}
.atlas-save{border-radius:999px}
/* The pathway's panels take the family cards' shape: rounded, softly lifted. */
.guidance-context,.guidance-empty{border-radius:var(--r-card);box-shadow:var(--shadow-soft)}
.guidance-preview .route-preview{list-style:none;margin:20px 0 0;padding:0;counter-reset:route}
.route-preview li{position:relative;counter-increment:route;padding:0 0 18px 48px;max-width:60ch}
.route-preview li:last-child{padding-bottom:0}
/* The numbers and the dashed line between them sketch the steps that will fill this space. */
.route-preview li::before{content:counter(route);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tide-wash);color:var(--tide-deep);font-weight:700;font-size:.875rem}
.route-preview li:not(:last-child)::after{content:"";position:absolute;left:14px;top:32px;bottom:2px;border-left:2px dashed var(--rule-ink)}
.route-preview b{display:block;font-size:1rem;line-height:1.4}
.route-preview span{display:block;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.guidance-pending{border-radius:12px}
.guidance-context > .guidance-context-head{display:flex;align-items:start;gap:12px;padding:20px}
.guidance-context > .guidance-context-head > span{min-width:0;flex:1}
/* Two columns: what you asked about stays beside the route as you read down it, with
   "Change" in reach, instead of scrolling away and leaving the column empty. */
@media(min-width:861px){
  .guidance-context{position:sticky;top:96px;max-height:calc(100vh - 112px);overflow:auto}
}

/* The pathway reads as a route, the way the record reads as a timeline: the numbered
   stops sit on one line from the first to the last (the record's spine, 2px, rule-2).
   Each office's published timing gets a third of the width, so the source's wording,
   which is the authority, is not squeezed into a column of single words. */
.timetable{--tt-pad:16px;--tt-num:28px;--tt-spine:calc(var(--tt-pad) + var(--tt-num) / 2 - 1px)}
.tt-axis,.tt-row{grid-template-columns:minmax(0,1fr) minmax(220px,36%)}
.tt-row{position:relative}
.tt-row > *{padding:18px var(--tt-pad)}
.tt-row::before{content:"";position:absolute;left:var(--tt-spine);top:0;bottom:-1px;width:2px;background:var(--rule-2)}
.tt-axis + .tt-row::before{top:calc(18px + var(--tt-num) / 2)}
.tt-row:last-child::before{bottom:auto;height:calc(18px + var(--tt-num) / 2)}
.tt-axis + .tt-row:last-child::before{display:none}
.tt-num{position:relative;z-index:1;width:var(--tt-num);height:var(--tt-num);border-width:2px;background:var(--sheet);color:var(--ink)}
.tt-row.here .tt-num{box-shadow:0 0 0 4px var(--tide-field)}
.tt-stop{gap:14px}
.tt-name{line-height:1.35}
.tt-does{line-height:1.55}
.tt-time{font-size:.875rem;line-height:1.5}
.tt-bar{height:8px;border-radius:999px}
.tt-bar i{border-radius:999px}
@media(max-width:720px){
  /* One column: the timing sits under its office, indented to the words, so the line
     runs unbroken down the left from the first stop to the last. */
  .tt-axis,.tt-row{grid-template-columns:minmax(0,1fr)}
  .tt-axis > *:last-child{display:none}
  .tt-row > .tt-span{border-top:0;padding-top:0;padding-left:calc(var(--tt-pad) + var(--tt-num) + 14px)}
}
@media(forced-colors:active){.tt-row::before{background:CanvasText}}

/* A route card fills the row when it is the only one, and pairs up when there are two,
   rather than leaving half the row empty beside it. */
.grid.route-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.newcomers-strip{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;max-width:none;margin:0 0 14px;padding:10px 14px;border-radius:14px;background:var(--sheet);border:1px solid var(--rule);color:var(--ink-2)}
.newcomers-strip a{font-weight:650}
a.needs-hand{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;
  border-radius:var(--r-card);background:var(--sun-field);border:1px solid var(--sun-deep);color:var(--ink);text-decoration:none}
a.needs-hand:hover{border-color:var(--sun-ink);color:var(--ink)}
.needs-hand b{display:block}
.needs-hand small{display:block;color:var(--sun-ink);font-size:.875rem;overflow-wrap:anywhere}
.needs-hand-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sun);color:var(--on-sun);font-weight:800}
.needs-hand-go{font-size:1.5rem;color:var(--sun-ink)}

/* Asking one person first, and what happens when they can't. */
.audience-option.audience-person{display:grid;gap:8px;align-items:stretch;cursor:default}
.audience-person > label{display:flex;align-items:center;gap:12px;cursor:pointer}
.audience-person select{width:auto;max-width:calc(100% - 32px);margin-left:32px}
.asked-tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:.8125rem;font-weight:700;
  background:var(--sun);color:var(--on-sun)}
.asked-you,.asked-declined{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--sun-field);color:var(--sun-ink)}
.asked-you > p,.asked-declined p{margin:0}
.asked-you > p,.asked-declined b,.asked-declined .user-copy{color:var(--ink)}
.asked-you .help-respond{margin-top:10px}
.asked-you .hint,.asked-declined .hint{margin:6px 0 0;color:var(--sun-ink)}
.widen-actions .muted-count{font-weight:500;opacity:.85}
.widen-quiet{margin-top:6px}
.decline-menu,.late-menu{margin-top:8px}
.decline-menu > summary,.late-menu > summary,.bring-add > summary{min-height:40px;font-size:.9375rem;font-weight:650;color:var(--tide-deep)}
.decline-menu > summary{color:var(--sun-ink)}
.decline-menu > summary::before{content:none;display:none} /* a reply, not something to add */
.decline-menu .help-respond,.bring-add .help-respond{margin-top:4px}

/* "Running late": said in one tap, shown to the other side in sun. */
.late-line{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:10px 12px;border-radius:14px;background:var(--sun-field);color:var(--sun-ink)}
.late-line b{color:var(--ink)}
.late-line .muted{color:var(--sun-ink)}
.late-line svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--sun-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.late-form{display:grid;gap:8px;margin-top:4px;padding:10px 12px;border-radius:14px;background:var(--stock)}
.late-form .hint{margin:0}
.late-options{display:flex;flex-wrap:wrap;gap:6px}

/* Who's bringing what: the list on paper, what's yours on teal. */
.bring{margin-top:12px}
.bring-title{margin:0 0 6px;font-size:.9375rem;color:var(--ink)}
.bring-list{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.bring-list li{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;min-height:48px;padding:6px 12px}
.bring-list li + li{border-top:1px solid var(--rule)}
.bring-list li.is-open{background:var(--stock)}
.bring-list li.is-mine{background:var(--tide-wash)}
.bring-label{font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.bring-who{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;color:var(--ink-2);font-size:.9375rem}
.bring-who b{color:var(--tide-deep)}

/* Your week: the days ahead as simple lists, and the calendar link. */
.week-day{margin-top:22px}
.week-day-name{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-size:1.125rem}
.week-day-name small{font-size:.875rem;font-weight:500;color:var(--ink-3)}
.week-day.is-today .week-day-name{color:var(--tide-deep)}
.plan-list{list-style:none;margin:0;padding:0;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);overflow:hidden}
.plan-item + .plan-item{border-top:1px solid var(--rule)}
.week-page .plan-list > li.plan-item > a.plan-link{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px 16px;
  color:var(--ink);text-decoration:none}
.week-page .plan-list > li.plan-item > a.plan-link:hover{background:var(--tide-wash)}
.plan-time{padding-top:2px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.plan-text{display:grid;gap:3px;min-width:0}
.plan-label{justify-self:start;display:inline-flex;padding:1px 9px;border-radius:999px;font-size:.8125rem;font-weight:700;
  background:var(--tide-field);color:var(--tide-deep);overflow-wrap:anywhere}
.plan-item.is-yours .plan-label{background:var(--tide-deep);color:var(--sheet)}
.plan-item.is-waiting .plan-label{background:var(--sun-field);color:var(--sun-ink)}
.plan-item.is-date .plan-label{background:var(--land-wash);color:var(--land-ink)}
.plan-what{font-size:1rem;line-height:1.35;overflow-wrap:anywhere}
.plan-meta{font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.plan-detail{font-size:.875rem;font-weight:600;color:var(--tide-deep);overflow-wrap:anywhere}
.week-later{margin-top:24px}
.week-later > summary{font-weight:700;color:var(--ink)}
.plan-feed{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;margin-top:32px;padding:18px 20px;border-radius:var(--r-card);
  background:var(--tide-wash);border:1px solid var(--tide-field-2);scroll-margin-top:96px}
.plan-feed-icon svg{width:34px;height:34px;fill:none;stroke:var(--tide-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.plan-feed h2{margin:0 0 6px}
.plan-feed p{margin:0 0 10px;color:var(--ink-2);max-width:62ch}
.plan-feed-actions{margin:4px 0 10px}
.plan-feed-link{margin-bottom:10px}
.plan-feed-link .help-respond{margin-top:4px}
.plan-feed-link input{font-size:.875rem;color:var(--ink-2);background:var(--sheet)}

/* The AI moderator: who reads first, what it thought, and what it did (all undoable). */
.ai-status{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:14px 16px;border-radius:var(--r-card);
  background:var(--tide-wash);border:1px solid var(--tide-line);color:var(--ink-2);line-height:1.5}
.ai-status svg{flex:none;width:22px;height:22px;margin-top:1px;fill:var(--tide);stroke:none}
.ai-status p{margin:0}
.ai-status b{color:var(--ink)}
.ai-status.is-off{background:var(--stock-2);border-color:var(--rule)}
.ai-status{flex-wrap:wrap}
.ai-status > p{flex:1 1 0;min-width:0}
.ai-status .ai-trouble,.ai-status .ai-tally{flex-basis:100%;margin:0;padding-left:34px;font-size:.9375rem}
.ai-status .ai-trouble{color:var(--coral-deep)}
.ai-status .ai-check{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;padding-left:34px}
.ai-status .ai-check .hint{margin:0}
.ai-status .ai-trouble b{color:var(--coral-deep)}
.ai-status.is-off svg{fill:var(--ink-3)}
.ai-reading{margin-bottom:0;padding:8px 12px;border-radius:10px;background:var(--sun-field);color:var(--ink-2);overflow-wrap:anywhere}
.ai-reading b{color:var(--ink)}
.ai-decisions{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.ai-verdict{flex:none;padding:3px 10px;border-radius:999px;font-size:.8125rem;font-weight:700;background:var(--tide-field);color:var(--tide-deep)}
.ai-verdict.is-decline,.ai-verdict.is-takedown{background:var(--coral-field);color:var(--coral-deep)}
.ai-verdict.is-person,.ai-verdict.is-leaveup{background:var(--stock-2);color:var(--ink-2)}
.ai-done .is-undone{opacity:.72}
.ai-done .h-sm{font-size:1rem;overflow-wrap:anywhere}

/* A post the AI moderator didn't publish: the reason, and a way to ask a person. */
.not-published{display:grid;gap:8px;justify-items:start}
.not-published p{margin:0}
.ai-suggested{justify-self:stretch;display:grid;gap:6px;padding:12px 14px;border-radius:12px;background:var(--sheet);border:1px solid var(--tide-line)}
.ai-suggested p{margin:0;overflow-wrap:anywhere}
.ai-suggested-label{font-size:.8125rem;font-weight:700;color:var(--tide-deep)}
.ai-suggested-title{font-weight:700;color:var(--ink)}
.not-published .actions{margin:0}
.not-published .ai-why{justify-self:stretch;margin:0;padding:8px 12px;border-radius:10px;background:var(--sun-field);color:var(--ink);overflow-wrap:anywhere}

/* Suggesting a room's request wording, inside "Turn this into a request". */
.ai-suggest{display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:var(--tide-wash);border:1px solid var(--tide-line)}
.ai-suggest p{margin:0}
.ai-suggest .btn{justify-self:start}

/* Writing a letter with AI help, inside the letter editor. */
.ai-write{margin:0 0 18px;padding:16px;border-radius:var(--r-card);background:var(--tide-wash);border:1px solid var(--tide-line)}
.ai-write summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:flex;align-items:center;gap:8px}
.ai-write summary::-webkit-details-marker{display:none}
.ai-write summary svg{width:20px;height:20px;fill:var(--tide)}
.ai-write-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.ai-write-grid .full{grid-column:1 / -1}
.ai-write fieldset{border:0;margin:0;padding:0;min-width:0}
.ai-write legend{font-weight:650;font-size:.9375rem;margin-bottom:6px;color:var(--ink)}
.choice-pills{display:flex;flex-wrap:wrap;gap:6px}
.choice-pills label{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--control-rule);
  background:var(--sheet);font-size:.9375rem;font-weight:600;cursor:pointer}
.choice-pills input{position:absolute;opacity:0;width:1px;height:1px}
.choice-pills label:has(input:checked){background:var(--tide);border-color:var(--tide);color:#fff}
.choice-pills label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.ai-drafted{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-card);background:var(--sun-field);color:var(--ink-2)}
.ai-drafted b{color:var(--ink)}
.ai-drafted ul{margin:8px 0 0;padding-left:20px}
.ai-drafted li{margin-top:4px}
/* A sent letter carries its own copy and print; the page's buttons below are for going on. */
.letter-sent .letter-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.letter-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.letter-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--rule);background:var(--sheet);color:var(--ink);text-decoration:none}
.letter-list a:hover{border-color:var(--tide-line);background:var(--tide-wash)}
.letter-list .letter-to{font-size:.9375rem;font-weight:650;overflow-wrap:anywhere}
.letter-list .letter-state{font-size:.8125rem;color:var(--ink-3);white-space:nowrap}
.letter-list .letter-subject{grid-column:1 / -1;font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.letter-list a[aria-current]{border-color:var(--tide);background:var(--tide-wash)}
.another-letter{display:grid;gap:12px}
.another-letter .who-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.another-letter .who-fields .wide{grid-column:1 / -1}
.another-letter [data-when][hidden]{display:none}
#another-letter > summary{cursor:pointer}

@media(max-width:560px){
  .room-tabs{gap:0;margin-top:12px}
  .room-tabs a{padding:10px 9px;font-size:.9375rem}
  .help-when{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .help-when > :first-child{grid-column:1 / -1}
  /* Day and Time alone (the calendar) share the row, rather than Time sitting at half width. */
  .help-when > :first-child:nth-last-child(2){grid-column:auto}
}
/* Below 360px a date box and a time box don't both fit on one line, so Day goes back on top. */
@media(max-width:359px){
  .help-when > :first-child:nth-last-child(2){grid-column:1 / -1}
}
@media(max-width:560px){
  .help-respond{grid-template-columns:minmax(0,1fr)}
  .help-respond .btn{justify-self:start}
  .help-responses li{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .help-responses li form{grid-column:1 / -1}
  .roster-slots li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .roster-day{grid-column:1 / -1}
  .event-item{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:14px}
  .event-date{height:56px}
  /* The face by the name it belongs to: centred, it sat halfway down the name, child and
     roster lines, lower the more there were. */
  .circle-list li{grid-template-columns:auto minmax(0,1fr);align-items:start;padding-top:12px;padding-bottom:12px}
  .circle-list li form{grid-column:2}
  .audience-person select{width:calc(100% - 32px)}
  .week-page .plan-list > li.plan-item > a.plan-link{grid-template-columns:4.25rem minmax(0,1fr);gap:8px;padding:12px 14px}
  .plan-time{font-size:.9375rem}
  .plan-feed{grid-template-columns:minmax(0,1fr);padding:16px}
  .plan-feed-icon{display:none}
  .ai-write-grid,.another-letter .who-fields{grid-template-columns:minmax(0,1fr)}
}
/* From 360px a roster turn fits on one line: day, who, and "I'll take it". Only the narrowest
   phones put the day on its own line. Each turn is its own grid, so the day column starts as
   wide as the widest day ("Wed 30 Sept"), as on a wide screen: who is on each turn then reads
   down one straight edge. */
@media(min-width:360px) and (max-width:560px){
  .roster-slots li{grid-template-columns:minmax(6rem,auto) minmax(0,1fr) auto}
  .roster-day{grid-column:auto}
}
/* On a phone a calendar entry keeps its kind, title and time beside the date block, and
   everything after (the note, Going/Maybe/Can't go, who's bringing what, the actions) takes
   the card's full width, so the answers fit on one line. */
@media(max-width:560px){
  .event-item{row-gap:0}
  .event-body{display:contents}
  .event-body > *{grid-column:2;min-width:0}
  .event-body > :is(.help-details,.rsvp-row,.rsvp-names,.bring,.alerts-nudge,.help-actions){grid-column:1 / -1}
  .event-date{grid-row:1 / span 3;align-self:start}
}
/* A help card the same way: the face beside its kind, title and who, and what they wrote
   across the card's full width, as a group post's words run under its header. */
@media(max-width:560px){
  .help-card-top:has(> .room-avatar){row-gap:0}
  .help-card-top > .room-avatar + .help-card-head{display:contents}
  .help-card-top > .room-avatar + .help-card-head > *{grid-column:2;min-width:0}
  .help-card-top > .room-avatar + .help-card-head > .help-details{grid-column:1 / -1}
  .help-card-top > .room-avatar{grid-row:1 / span 3;align-self:start}
}
@media(max-width:400px){
  .room-tabs a{padding:10px 6px;font-size:.875rem;gap:4px}
  .room-tabs .nav-count{padding:0 5px}
}
@media print{.help-compose,.help-respond,.help-card-foot,.room-tabs,.needs-hand,.rsvp-row form,.alerts-nudge,.thanks-form,.check-in-form,
  .late-menu,.decline-menu,.bring-add,.widen-actions,.widen-quiet,.plan-feed,.bring-list form,
  .talk-compose,.talk-contact,.share-number,.talk-msg .reply-report,.ai-write,.ai-drafted,#another-letter,.letter-list,.help-safety-links{display:none}
  /* A folded "Recently" printed as a lone "+ Recently (1)": what's past stays off the fridge,
     unless it was opened to be printed. */
  details.help-recent:not([open]){display:none}
  /* The answer buttons stay on screen, but the count prints: on paper the faces under it had
     nothing saying they were the ones going (7 Oct 2026). */
  .rsvp-row .rsvp-count{margin-left:0}
  /* A printed thread said its count twice, under the post and again as the panel's big figure.
     On paper the line under the post is enough; the panel keeps its notes. */
  .shared-support .figure,.shared-support .figure + p{display:none}
  .shared-support > h2{margin-bottom:8px}}

/* ---- Feel: how the site answers a touch ----
   Moving between pages is a short cross-fade with the header held still (cross-document
   view transitions, where the browser has them; elsewhere pages simply load). A pressed
   button or card sinks a little, so a tap is felt before the next page arrives, and the
   grey flash phones draw over tapped links gives way to those states. With reduced motion
   there is no fade and nothing moves. */
html{-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav{view-transition-name:site-nav}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:ease-out}
  .btn,.card-link,.thread-action,.reply-action,.kind-pill,.story-quiet{transition-property:background,color,border-color,box-shadow,transform,opacity,max-width,padding,gap}
  .btn:active:not(:disabled),.compose-fab:active{transform:scale(.97)}
  .card-link:active{transform:scale(.992)}
  .thread-action:active,.reply-action:active{transform:scale(.96)}
  /* The toggles sink too (Going, a day, a pin, "I know them", a filter, a poll's choice): with the
     phone's flash gone they otherwise gave no sign of a tap until the page answered. A poll's
     row is the width of the post, so it sinks less. */
  .rsvp,.day-chip,.pin-toggle,.circle-toggle,.feed-filters a,button.poll-pick{transition-property:background,color,border-color,box-shadow,transform}
  .rsvp:active,.day-chip:active,.pin-toggle:active,.circle-toggle:active,.feed-filters a:active{transform:scale(.96)}
  button.poll-pick:active{transform:scale(.99)}
}

/* Phones and touch screens: a text field under 16px makes iPhone Safari zoom the whole page
   when it's tapped, and the page stays zoomed after. Compact fields (reply boxes, the
   conversation search, notes) keep their look everywhere else. !important because this is a
   platform rule that must beat every component's own size. */
@media(pointer:coarse),(max-width:560px){
  :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button]),textarea,select){font-size:max(16px,1em)!important}
}

/* Touch screens: small text controls (Edit, Cancel, Take it back, the safety note's links,
   the pathway's link to the official policy, folded sections) keep their look but get a
   finger-sized target, reaching about 44px through an invisible margin around the words. */
@media(pointer:coarse){
  .linkish,.help-safety-links a,.room-guide > a,.title-block .meta a{position:relative}
  .linkish::after,.help-safety-links a::after,.room-guide > a::after,.title-block .meta a::after{content:"";position:absolute;inset:-9px -6px}
  .week-page details > summary,.record-detail details > summary.chart-label{padding-block:9px}
}

/* =====================================================================================
   Faces in six clear colours, wherever a parent's initial stands in for them (rooms,
   Your week, the member lists). Inside a room itself, rooms.css takes over with the look
   of Facebook and WhatsApp. (The landing's example windows keep their own simpler code.)
   ===================================================================================== */
/* Faces: six solid tones, chosen by name (RoomFaces.Tone), white initials; the sun tone
   carries dark ink so its letter still reads. Your own face stays deep teal. Each tone's
   lighter end keeps a white initial at 4.5:1 or more (7 Oct 2026: coral, purple, blue, green
   and teal were 3.5 to 4.2 there, a shade darker now). */
.room-avatar,.roll .initial,.room-cover{--face-a:#1A847A;--face-b:#0E6B66;--face-ink:#fff}
:is(.room-avatar,.roll .initial,.room-cover).tone-1{--face-a:#F6C35C;--face-b:#E39A2E;--face-ink:#3F2805}
:is(.room-avatar,.roll .initial,.room-cover).tone-2{--face-a:#C25434;--face-b:#A8432A;--face-ink:#fff}
:is(.room-avatar,.roll .initial,.room-cover).tone-3{--face-a:#9463AC;--face-b:#6F4988;--face-ink:#fff}
:is(.room-avatar,.roll .initial,.room-cover).tone-4{--face-a:#3D7AB1;--face-b:#2C659A;--face-ink:#fff}
:is(.room-avatar,.roll .initial,.room-cover).tone-5{--face-a:#4E8248;--face-b:#386E3D;--face-ink:#fff}
:is(.room-avatar,.roll .initial).is-you{--face-a:#16847C;--face-b:#08403D;--face-ink:#fff}
/* A declined request, or words held back at review, in Updates for you: a closed door or a held
   sign, in quiet greys rather than the teal that marks good news. */
.room-avatar.for-you-quiet{--face-a:#D9DCDA;--face-b:#BCC2BF;--face-ink:#33403D}
.room-avatar.room-avatar,.roll .initial.initial{background:linear-gradient(145deg,var(--face-a),var(--face-b));color:var(--face-ink);font-weight:750}

/* =====================================================================================
   Parent rooms and My concerns, with contrast (29 Sep 2026, the owner: "very muted and
   blends in. nothing stands out which makes engagement difficult"). Each element carries
   one clear job in one clear colour: the place you're in is filled deep teal; sun marks
   what needs you; teal marks what's waiting on someone else; finished things go quiet.
   ===================================================================================== */

/* The app's three places, as one switch. The place you're in is filled; the others are
   plain ink on white, each with its icon. On a phone the icon sits over the label, as an
   app's tab bar has it. */
.tabs.app-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:min(100%,560px);
  margin:0 0 28px;padding:4px;overflow:visible;border:1px solid var(--rule-2);border-radius:999px;
  background:var(--sheet);box-shadow:var(--shadow-soft)}
.tabs.app-tabs a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:0 14px;
  border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--ink);font-size:.9375rem;font-weight:650;
  text-decoration:none;white-space:nowrap}
.tabs.app-tabs a svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs.app-tabs a:hover{background:var(--tide-wash);color:var(--tide-deep)}
.tabs.app-tabs a.active{background:var(--tide-deep);color:var(--sheet)}
.tabs.app-tabs a.active:hover{background:var(--tide);color:var(--sheet)}
.tabs.app-tabs a:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
@media(max-width:480px){
  .tabs.app-tabs{border-radius:20px}
  .tabs.app-tabs a{flex-direction:column;gap:3px;min-height:56px;padding:6px 4px;border-radius:16px;font-size:.8125rem}
  .tabs.app-tabs a svg{width:20px;height:20px}
}
/* On the narrowest phones (320px) "Parent rooms" all but touched the edges of its filled pill;
   a step smaller, with a little less between the three, it has room either side. */
@media(max-width:340px){
  .tabs.app-tabs{gap:2px;padding:3px}
  .tabs.app-tabs a{font-size:.75rem}
}

/* Across your rooms: Updates for you and Your week, as two tiles with their icons. */
.room-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:-4px 0 28px}
.room-shortcut{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 16px;border:1px solid var(--rule-2);
  border-radius:18px;background:var(--sheet);box-shadow:var(--shadow-soft);color:var(--ink);text-decoration:none}
.room-shortcut:hover{border-color:var(--tide);box-shadow:var(--shadow-lift);color:var(--ink)}
.room-shortcut-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;
  background:var(--tide-deep);color:var(--sheet)}
.room-shortcut-icon.is-week{background:var(--sun);color:var(--on-sun)}
.room-shortcut-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.room-shortcut-text{display:grid;gap:2px;min-width:0}
.room-shortcut-text b{font-size:1rem;font-weight:700;line-height:1.3}
.room-shortcut-text small{font-size:.8125rem;line-height:1.35;color:var(--ink-2)}
.room-shortcut .nav-count{flex:none;margin-left:auto;min-width:24px;height:24px;font-size:.8125rem}
@media(max-width:560px){
  .room-shortcut{gap:10px;min-height:64px;padding:10px 12px;border-radius:16px}
  .room-shortcut-icon{width:38px;height:38px;border-radius:12px}
  .room-shortcut-icon svg{width:20px;height:20px}
  .room-shortcut-text b{font-size:.9375rem}
  .room-shortcut-text small{display:none}
}

/* Your rooms: each with its face (the colour of its cover, and its class, "3B"), what's
   new in it, and a real button. */
.room-entry-list .card-link.room-entry{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:8px 18px;padding:18px 20px;border:1px solid var(--rule-2);border-radius:20px;background:var(--sheet);
  box-shadow:var(--shadow-soft);color:var(--ink)}
.room-entry-list .card-link.room-entry:hover{border-color:var(--tide);box-shadow:var(--shadow-lift);background:var(--sheet)}
.room-entry .room-entry-face{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;
  font-size:1.3125rem;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.room-entry-body{display:grid;gap:4px;min-width:0}
.room-entry-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.room-entry h3{margin:0;min-width:0;overflow-wrap:anywhere;font-size:1.1875rem;font-weight:720;line-height:1.25;color:var(--ink)}
.room-entry-school{font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.room-entry-new,.room-entry-rep{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;
  font-size:.8125rem;font-weight:700;line-height:1}
.room-entry-new{background:var(--coral-deep);color:var(--sheet)}
.room-entry-rep{background:var(--tide-field);color:var(--tide-deep);box-shadow:inset 0 0 0 1px var(--tide-field-2)}
.room-entry .room-entry-asks{justify-self:start;margin-top:6px}
.room-entry .room-entry-action{position:static;transform:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  margin:0;padding:0 20px;border-radius:999px;background:var(--tide-deep);color:var(--sheet);font-size:.9375rem;font-weight:700;
  white-space:nowrap}
.room-entry .room-entry-action span{margin:0}
.room-entry:hover .room-entry-action{background:var(--tide)}
@media(max-width:600px){
  .room-entry-list .card-link.room-entry{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .room-entry .room-entry-face{width:52px;height:52px;border-radius:16px;font-size:1.125rem;align-self:start}
  .room-entry .room-entry-action{grid-column:1 / -1;justify-content:center;margin-top:6px}
}

/* My concerns. Each record says whose turn it is: a bar down its left edge and its state in
   the same colour, sun where it needs you, teal where it's waiting on the school, grey once
   it's finished. The next step is its own tinted line, and a record that needs you has a
   filled button. The summary over the list counts your own records, nothing else. */
.record-summary{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 20px}
.record-summary span,.record-state{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 12px 0 10px;
  border-radius:999px;background:var(--chip-bg);color:var(--chip-ink);font-size:.8125rem;font-weight:700;line-height:1.2}
.record-summary span::before,.record-state::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--bar)}
:is(.record-card,.record-summary span,.record-detail).is-yours{--bar:var(--sun);--chip-bg:var(--sun-field);--chip-ink:var(--sun-ink);--next-bg:color-mix(in srgb,var(--sun-field) 70%,var(--sheet));--next-icon:var(--sun-deep)}
:is(.record-card,.record-detail).is-late{--bar:var(--notice);--chip-bg:var(--notice-field);--chip-ink:var(--notice-deep);--next-bg:var(--notice-field);--next-icon:var(--notice)}
:is(.record-card,.record-summary span,.record-detail).is-waiting{--bar:var(--tide-line);--chip-bg:var(--tide-field);--chip-ink:var(--tide-deep);--next-bg:var(--tide-wash);--next-icon:var(--tide)}
:is(.record-card,.record-summary span,.record-detail).is-done{--bar:var(--rule-2);--chip-bg:var(--stock-2);--chip-ink:var(--ink-2);--next-bg:transparent;--next-icon:var(--ink-3)}
.record-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.record-list > .record-card{position:relative;padding:20px 22px 20px 28px;border:1px solid var(--rule-2);border-radius:20px;
  background:var(--sheet);box-shadow:inset 6px 0 0 var(--bar),var(--shadow-soft)}
.record-card-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
.record-card-meta{font-size:.8125rem;line-height:1.4;color:var(--ink-3)}
.record-card-title{margin:12px 0 0;font-size:1.25rem;font-weight:720;line-height:1.3;letter-spacing:-.01em}
/* A message’s own "Undo" (an open roster turn taken by mistake): at the message’s end, on its line. */
[data-flash]:has(.flash-undo){align-items:center}
[data-flash]:has(.flash-undo) > p{flex:1 1 auto}
.flash-undo{flex:none;margin:0}
/* Under a title two records share: the opening of the parent’s own account, on one line.
   Clamped, not nowrap: an unbroken line set the card’s minimum width and pushed it off a phone. */
.record-card-gist{display:-webkit-box;margin:4px 0 0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;
  color:var(--ink-2);font-size:.9375rem;line-height:1.45;overflow-wrap:anywhere}
.record-card-title a{color:var(--ink);text-decoration:none}
.record-card-title a:hover{color:var(--tide-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.record-next{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding:10px 14px;border-radius:12px;
  background:var(--next-bg);color:var(--ink);font-size:.9375rem;line-height:1.45}
.record-next svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--next-icon);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.record-next b{font-weight:700}
.record-card .plot{margin-top:14px}
.record-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
/* Finished records rest: flatter, their title in the quieter ink, the next step plain. */
.record-list > .record-card.is-done{background:color-mix(in srgb,var(--stock) 55%,var(--sheet));box-shadow:inset 6px 0 0 var(--bar)}
.record-card.is-done .record-card-title{font-size:1.125rem}
.record-card.is-done .record-card-title a{color:var(--ink-2)}
.record-card.is-done .record-next{padding:0;color:var(--ink-2)}
@media(max-width:560px){
  .record-list > .record-card{padding:18px 16px 18px 22px}
  .record-card-title{font-size:1.125rem}
  .record-card-actions .btn{flex:1 1 auto;justify-content:center}
}

/* The record page leads with the same turn (RecordTurn): its state beside the title in the
   list's chip, and the next step straight after it. The step is a warm card, not a block
   (29 Sep 2026, the owner: the filled teal was "too strong"): a wash of the turn's colour
   fading to white, a rising sun in its top corner (the mark's sun, as the room covers
   have it), a border in the same colour, and the kind of step as an icon, filled sun when
   the move is the parent's. The button stays the one filled thing on it, deep teal.
   Waiting on the school the card is teal and calmer; finished, it rests on paper. */
.record-head .record-state{flex:none;max-width:100%;white-space:normal}
.record-detail.is-yours .record-next-step{--ns-wash:var(--sun-field);--ns-line:color-mix(in srgb,var(--sun) 60%,var(--sheet));
  --ns-sun:rgba(242,181,68,.30);--ns-icon-bg:var(--sun);--ns-icon:var(--on-sun)}
.record-detail.is-late .record-next-step{--ns-wash:var(--notice-field);--ns-line:color-mix(in srgb,var(--notice) 35%,var(--sheet));
  --ns-sun:rgba(179,38,30,.10);--ns-icon-bg:var(--notice);--ns-icon:var(--sheet)}
.record-detail.is-waiting .record-next-step{--ns-wash:var(--tide-wash);--ns-line:var(--tide-field-2);
  --ns-sun:rgba(42,157,143,.14);--ns-icon-bg:var(--tide-field);--ns-icon:var(--tide-deep)}
.record-detail.is-done .record-next-step{--ns-wash:var(--stock-2);--ns-line:var(--rule-2);
  --ns-sun:transparent;--ns-icon-bg:var(--sheet);--ns-icon:var(--ink-3)}
.record-detail .record-next-step{--ns-r1:58px;--ns-r2:84px;--ns-r3:110px;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:20px;row-gap:6px;
  align-items:start;padding:clamp(22px,3vw,28px) clamp(22px,3vw,30px);border:1.5px solid var(--ns-line);border-radius:22px;
  background:
    radial-gradient(circle at 100% 0,var(--ns-sun) 0 var(--ns-r1),transparent calc(var(--ns-r1) + 1px)),
    radial-gradient(circle at 100% 0,transparent 0 var(--ns-r2),color-mix(in srgb,var(--ns-sun) 50%,transparent) calc(var(--ns-r2) + 1px) var(--ns-r3),transparent calc(var(--ns-r3) + 1px)),
    linear-gradient(115deg,var(--ns-wash) 0%,color-mix(in srgb,var(--ns-wash) 45%,var(--sheet)) 45%,var(--sheet) 80%);
  box-shadow:var(--shadow-lift)}
.record-detail .record-next-step > .next-icon{grid-column:1;grid-row:1 / span 3;display:grid;place-items:center;width:56px;height:56px;
  border-radius:18px;background:var(--ns-icon-bg);color:var(--ns-icon);box-shadow:0 6px 16px -8px rgba(60,42,20,.35)}
.record-detail .record-next-step > .next-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.record-detail .record-next-step > :is(.label,h2,p){grid-column:2}
.record-detail .record-next-step > :is(.btn,.actions){grid-column:3;grid-row:1 / span 3;align-self:center}
.record-detail .record-next-step > .plot{grid-column:2 / -1}
.record-detail .record-next-step > .label{display:inline-flex;align-items:center;gap:7px;justify-self:start;width:max-content;max-width:100%;
  min-height:28px;margin:0;padding:0 12px 0 10px;border-radius:999px;background:var(--sheet);color:var(--chip-ink);
  box-shadow:inset 0 0 0 1px var(--ns-line);font-size:.8125rem;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none}
.record-detail .record-next-step > .label::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--bar)}
.record-detail .record-next-step > h2{margin-top:6px;font-size:clamp(1.3125rem,2.2vw,1.5rem);font-weight:740;letter-spacing:-.015em;color:var(--ink)}
.record-detail .record-next-step > p{color:var(--ink-2)}
.record-detail.is-done .record-next-step{background:color-mix(in srgb,var(--stock) 55%,var(--sheet));box-shadow:none}
.record-detail.is-done .record-next-step > .next-icon{box-shadow:inset 0 0 0 1px var(--rule-2)}
/* Phones: the icon sits beside its label, and the rest of the step runs full width under
   them, the button across the card. */
@media(max-width:560px){
  .record-detail .record-next-step{--ns-r1:40px;--ns-r2:58px;--ns-r3:76px;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:0;padding:20px}
  .record-detail .record-next-step > .next-icon{grid-row:1;width:44px;height:44px;border-radius:14px}
  .record-detail .record-next-step > .next-icon svg{width:22px;height:22px}
  .record-detail .record-next-step > .label{grid-column:2;grid-row:1;align-self:center}
  .record-detail .record-next-step > :is(h2,p,.btn,.actions,.plot){grid-column:1 / -1;grid-row:auto}
  .record-detail .record-next-step > h2{margin:14px 0 6px}
  .record-detail .record-next-step > :is(.btn,.actions){margin-top:16px}
  .record-detail .record-next-step > .btn{justify-content:center}
}
/* Two answers stacked in the step ("Yes, mark it resolved" / "Not yet, see next steps") are one
   width: the first sits in its form, which stretched while its button kept to its words. */
.record-detail .record-next-step > .actions > form > .btn{width:100%;justify-content:center}
/* On a phone the record's facts run as one line ("Greenhill Primary School · Victoria ·
   Government · Bullying or cyberbullying · Opened 25 Sept 2026"), their labels kept for
   screen readers, and the breadcrumb drops the title the heading repeats, so the next step
   comes into the first view. */
@media(max-width:560px){
  .record-detail .breadcrumb > :is([aria-current],span[aria-hidden]){display:none}
  .record-head .meta{display:block;margin-top:12px;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
  .record-head .meta > span{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;color:inherit}
  .record-head .meta > span + span::before{content:" · ";color:var(--ink-3)}
  .record-head .meta > span:not(.is-opened) .meta-k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .record-head .meta b{font-size:inherit;font-weight:650;color:var(--ink)}
}
/* The timeline says where the record stands: its latest entry has a filled dot, the rest a
   teal tint; an entry about what changed keeps its coral. */
.record-detail .tl-item:not(:last-child)::before{left:13.5px;width:2px;background:var(--tide-field-2)}
.record-detail .tl-dot{background:var(--tide-field);border-color:transparent}
.record-detail .tl-dot svg{stroke:var(--tide-deep)}
.record-detail .tl-item:first-child:not(.is-change) .tl-dot{background:var(--tide-deep);border-color:var(--tide-deep)}
.record-detail .tl-item:first-child:not(.is-change) .tl-dot svg{stroke:var(--sheet)}
/* What changed after raising it is the record's protection: its heading carries the coral
   flag the timeline gives those entries, and its card a coral line all round (not a thick
   edge down one side, 6 Oct 2026). */
.record-change-head{display:flex;align-items:center;gap:12px}
.record-change-flag{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--coral-field);color:var(--coral-deep)}
.record-change-flag svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.record-detail .record-change{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--coral) 45%,transparent),var(--shadow-soft)}

/* The letter page: three steps, one path. Each step's card carries a numbered sun tile (the
   parent's to do, as sun means everywhere), the cards are joined down the page by a sun
   line at the tiles, and the same three sit above them as jump links, since the letter
   makes the page long. The letter shows whole, on a sheet with a sun letterhead rule,
   rather than scrolling inside a box, and the email button says why it waits when there
   is no address yet. */
.letter-path ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 22px;padding:4px;list-style:none;
  border:1px solid var(--rule-2);border-radius:999px;background:var(--sheet);box-shadow:var(--shadow-soft)}
.letter-path a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border-radius:999px;
  color:var(--ink);font-size:.9375rem;font-weight:650;text-decoration:none;white-space:nowrap}
.letter-path a:hover{background:var(--sun-field);color:var(--ink)}
/* site.css shrinks a lone link in a list item to its content; the step links fill their third. */
.letter-path li > a:only-child:not(.btn){display:flex;width:100%}
.letter-step-n{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--sun);color:var(--on-sun);
  font-size:1rem;font-weight:760;line-height:1;font-variant-numeric:tabular-nums}
.letter-path .letter-step-n{width:26px;height:26px;font-size:.8125rem}
.letter-step-head{display:flex;align-items:center;gap:12px}
.record-letter .letter-step,.record-letter #Letter_RecipientEmail{scroll-margin-top:96px}
.record-letter .letter-step{position:relative}
.record-letter .letter-step:focus{outline:none}
.record-letter .letter-step + .letter-step{margin-top:28px}
.record-letter .letter-step + .letter-step::before{content:"";position:absolute;left:45px;top:-29px;width:2px;height:28px;
  background:color-mix(in srgb,var(--sun) 55%,var(--sheet))}
.record-letter #Letter_BodyText{min-height:420px;max-height:none;padding:26px 28px 24px;border:1px solid var(--rule-2);border-radius:14px;
  background:var(--sheet) linear-gradient(var(--sun),var(--sun)) top / 100% 4px no-repeat;
  box-shadow:0 1px 0 var(--rule),0 18px 36px -24px rgba(60,42,20,.4);font-size:1.0625rem;line-height:1.75;color:var(--ink)}
.letter-mail-hint{margin:-4px 0 16px;padding:10px 14px;border-radius:12px;background:var(--sun-field);color:var(--ink);font-size:.9375rem;line-height:1.5}
.letter-mail-hint[hidden]{display:none}
.letter-long-hint{max-width:62ch;padding:10px 14px;border-radius:12px;background:var(--sun-field);color:var(--ink);line-height:1.5}
.letter-long-hint[hidden]{display:none}
.letter-mail-hint a{font-weight:700;color:var(--sun-ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
@media(max-width:560px){
  .record-letter .letter-step + .letter-step::before{left:37px}
  .record-letter #Letter_BodyText{padding:22px 18px 20px;font-size:1rem}
}
@media(max-width:480px){
  .letter-path ol{border-radius:20px}
  .letter-path a{flex-direction:column;gap:3px;min-height:58px;padding:6px 4px;border-radius:16px;font-size:.8125rem}
}
@media print{.letter-path{display:none}}

/* The pathway (a record's next routes, and the public pathway page). Where you stand is
   filled deep teal: its number, its "You are here" and an edge down its row. The stops
   ahead are teal tiles on a teal spine. The published windows are real bars, teal for time
   a body owes you and warm red for a window that closes on you, with that label in the same
   red, so the one deadline that is the parent's reads before a word of it does. */
.timetable{--tt-num:32px;border-color:var(--rule-2);box-shadow:var(--shadow-soft)}
.tt-row::before{background:var(--tide-field-2)}
.tt-num{border:0;background:var(--tide-field);color:var(--tide-deep);font-size:.9375rem;font-weight:750}
.tt-row.here{background:var(--tide-wash);box-shadow:inset 4px 0 0 var(--tide-deep)}
.tt-row.here .tt-num{background:var(--tide-deep);color:var(--sheet);box-shadow:0 0 0 4px var(--tide-field)}
.tt-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:1.0625rem;font-weight:700}
.tt-name .tt-here{margin:0;border-color:var(--tide-deep);background:var(--tide-deep);color:var(--sheet)}
.tt-bar{height:10px;border:0;border-radius:999px;background:var(--stock-2)}
.tt-bar i{min-width:10px;border:0;background:var(--tide-line)}
.tt-bar.is-filing i{background:var(--notice)}
.tt-bar.is-none{background:repeating-linear-gradient(135deg,var(--stock-2) 0 5px,var(--sheet) 5px 10px);box-shadow:inset 0 0 0 1px var(--rule-2)}
.tt-time b{color:var(--tide-deep)}
.tt-time.is-filing b{color:var(--notice-deep)}
.timetable + .legend i{border:0;border-radius:50%}
.timetable + .legend .k-tide{background:var(--tide-line)}
.timetable + .legend .k-ink{background:var(--tide-deep)}
/* Routes beside the pathway: a teal edge on those that run in parallel, and "Write to them"
   as a button at the foot of each. */
.route-card{display:flex;flex-direction:column}
.route-card > .badge{align-self:flex-start}
.route-card.is-parallel{box-shadow:inset 4px 0 0 var(--tide-line),var(--shadow-soft)}
.route-card h3{font-size:1.0625rem;font-weight:700}
.route-write{margin:auto 0 0;padding-top:14px}
@media(forced-colors:active){.tt-row.here{border-left:4px solid CanvasText}}

/* Your week in the same language: each plan has an edge in its label's colour (deep teal for
   what you've taken on, sun for what still needs someone, khaki for a class date), and today
   is marked: its name in a filled pill and its list lifted. */
.plan-item{--edge:var(--tide-line)}
.plan-item.is-yours{--edge:var(--tide-deep)}
.plan-item.is-waiting{--edge:var(--sun)}
.plan-item.is-date{--edge:color-mix(in srgb,var(--land-ink) 45%,var(--land))}
.week-page .plan-list > li.plan-item > a.plan-link{padding-left:21px;box-shadow:inset 5px 0 0 var(--edge)}
.week-day.is-today .week-day-name{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;
  background:var(--tide-deep);color:var(--sheet)}
.week-day.is-today .week-day-name small{color:var(--tide-field)}
.week-day.is-today .plan-list{border-color:var(--tide-line);box-shadow:var(--shadow-lift)}
@media(max-width:560px){.week-page .plan-list > li.plan-item > a.plan-link{padding-left:19px}}
/* Groups across the school: families from any class who share something, like dyslexia
   support. A shelf under your own rooms, quieter than they are: each group a card with its
   face, what it's for and how many are in it, and "Ask to join" as a plain pill, since the
   filled button belongs to the rooms you're already in. Starting one is a dashed pill. */
.school-groups{margin-top:44px;padding-top:28px;border-top:1px solid var(--rule)}
.school-groups-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.school-groups-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:15px;
  background:var(--tide-field);color:var(--tide-deep);box-shadow:inset 0 0 0 1px var(--tide-field-2)}
.school-groups-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.school-groups-head h2{margin:0}
.school-groups-head p{margin:6px 0 0;max-width:62ch;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.school-group-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:12px;
  margin:0;padding:0;list-style:none}
.school-group{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:12px 14px;padding:16px 18px;
  border:1px solid var(--rule-2);border-radius:18px;background:var(--sheet);box-shadow:var(--shadow-soft)}
.school-group > .school-group-face.room-avatar{width:50px;height:50px;border-radius:15px;font-size:1rem;letter-spacing:-.02em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.school-group-body{display:grid;align-content:start;gap:4px;min-width:0}
.school-group h3{margin:0;color:var(--ink);font-size:1.0625rem;font-weight:720;line-height:1.3;overflow-wrap:anywhere}
.school-group-about{color:var(--ink-2);font-size:.9375rem;line-height:1.45}
.school-group-meta{color:var(--ink-3);font-size:.8125rem;font-weight:650}
/* "Ask to join" opens one short line under the card: your child and their class, filled in
   from your class room, then "Send request". */
.school-group-ask{grid-column:2;margin:0}
.school-group-ask > summary{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;
  list-style:none;cursor:pointer}
.school-group-ask > summary::-webkit-details-marker{display:none}
.school-group-ask > summary::before{content:none;display:none}
.school-group-ask > summary:hover{background:var(--sheet);border-color:var(--tide);color:var(--tide-deep)}
.school-group-ask[open] > summary{background:var(--tide-field);border-color:var(--tide-field-2)}
.school-group-join{display:grid;gap:6px;margin:12px 0 0;padding:14px;border:1px solid var(--rule);border-radius:14px;background:var(--stock)}
.school-group-join label{color:var(--ink);font-size:.875rem;font-weight:700}
.school-group-join label .opt{margin-left:4px}
.school-group-join input[type=text]{width:100%;min-height:44px}
.school-group-join .hint{margin:0;font-size:.8125rem;line-height:1.45}
.school-group-join .btn{justify-self:start;min-height:40px;margin-top:4px;padding:0 18px;border-radius:999px}
/* Asking opens in place: the button that opened it gives way to Send request and Cancel side by
   side, as the composer's Post and Close are, so there aren't two look-alike buttons one above the
   other. Without scripts Cancel can't close it, so the summary stays and Cancel doesn't show. */
.school-group-join-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.school-group-join-actions .btn{margin-top:0}
.no-js [data-close-fold]{display:none}
.js :is(.school-group-ask,.room-result-ask)[open] > summary{display:none}
.js :is(.school-group-ask,.room-result-ask)[open] > .school-group-join{margin-top:0}
.js .school-group-ask[open]{grid-column:1 / -1}
/* A search result's own buttons are white; Cancel in the panel is the site's usual quiet one. */
.room-result .school-group-join-actions .btn-ghost{background:var(--tide-wash);border-color:var(--tide-field-2)}
.room-result .school-group-join-actions .btn-ghost:hover{background:var(--tide-field);border-color:var(--tide)}
.school-groups-empty{margin:0;padding:18px 20px;border:1px dashed var(--rule-2);border-radius:18px;background:var(--sheet);
  color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.school-group-start{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:0 20px;
  border:1.5px dashed var(--tide-line);border-radius:999px;color:var(--tide-deep);font-size:.9375rem;font-weight:700;text-decoration:none}
.school-group-start svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.school-group-start:hover{border-style:solid;background:var(--tide-wash)}
.school-group-start:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
@media(max-width:480px){
  .school-groups-icon{width:40px;height:40px;border-radius:13px}
  .school-group{padding:14px 16px}
  .school-group > .school-group-face.room-avatar{width:44px;height:44px;border-radius:13px}
  .school-group-ask{grid-column:1 / -1}
  .school-group-ask > summary,.school-group-join .btn{width:100%;justify-content:center;justify-self:stretch}
  .school-group-join-actions .btn-primary{flex:1 1 0}
  .school-group-join-actions .btn-ghost{width:auto}
}
/* The school's reply page: the request is on the page, as a sheet, under a small label.
   The footer is only the acknowledgement line; the parents' pitch and links aren't for a
   principal replying to a letter. */
.portal-request-label{margin:18px 0 8px;color:var(--ink-2);font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.response-portal .portal-request .letter-preview{max-width:none;box-shadow:none}
.portal-letter{white-space:normal}
.portal-letter p{margin:0 0 14px;white-space:pre-wrap}
.portal-letter p:last-child{margin-bottom:0}
.portal-letter b{color:var(--ink);font-weight:720}
.portal-letter .portal-letter-title{color:var(--ink);font-size:1.0625rem;font-weight:720;line-height:1.4}
/* The school's reply page keeps its footer to the small print, on the paper under a rule. */
.page-response footer.site .foot-top,.page-response footer.site .foot-paint{display:none}
.page-response footer.site{display:block;border-top:1px solid var(--rule);background:none}
.page-response footer.site .foot-ground{text-shadow:none}

/* Join search results, as the rooms list and the groups shelf show rooms: the room's face,
   its name, the school on its own line, and one button under it. "Ask to join" opens the
   same short line as the shelf (the child's first name, or child and class for a group). */
.room-results{border-block:0;display:grid;gap:10px}
.room-result,.room-result + .room-result{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px 14px;
  padding:16px 18px;border:1px solid var(--rule-2);border-radius:18px;background:var(--sheet);box-shadow:var(--shadow-soft)}
.room-result > .room-result-face.room-avatar{width:50px;height:50px;border-radius:15px;font-size:1rem;letter-spacing:-.02em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.room-result-body{display:grid;gap:3px;min-width:0}
.room-result-body h3{margin:0;font-size:1.0625rem;font-weight:720;line-height:1.3}
.room-result-body p{margin:0}
.room-result-school{color:var(--ink);font-size:.9375rem;font-weight:600}
.room-result-meta{color:var(--ink-3);font-size:.8125rem;font-weight:650}
.room-result-body .room-membership-note{margin-top:4px}
/* A sentence, not a label: "The room voted for you to leave. You can ask again from Mon 4 Jan." */
.room-result-body .room-membership-note.is-wait{display:block;font-weight:500;font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.room-result > .room-result-action,.room-result > .room-result-ask{grid-column:2;justify-self:start;margin:0}
.room-result .btn,.room-result .btn:hover{white-space:nowrap}
.room-result > .room-result-action{border:1px solid var(--rule-2);background:var(--sheet)}
.room-result > .room-result-action:hover{border-color:var(--tide);background:var(--tide-wash)}
.room-result .btn-primary{border-color:var(--tide-deep);background:var(--tide-deep);color:var(--sheet)}
.room-result .btn-primary:hover{border-color:var(--tide);background:var(--tide);color:var(--sheet)}
.room-result-ask > summary{list-style:none;cursor:pointer}
.room-result-ask > summary::-webkit-details-marker{display:none}
/* The fold's "+" is replaced by the button's paint, which the watercolour rule lays in ::before:
   hiding ::before here had left "Ask to join" white words on a white card (14 Oct 2026). Only the
   fold marker's 13px width has to go. */
.room-result-ask > summary::before{width:auto}
.room-result-ask[open] > summary{background:var(--tide-field);color:var(--tide-deep)}
@media(max-width:560px){
  .room-result,.room-result + .room-result{padding:14px 16px}
  .room-result > .room-result-face.room-avatar{width:44px;height:44px;border-radius:13px}
  .room-result > .room-result-action,.room-result > .room-result-ask{grid-column:1 / -1;justify-self:stretch;margin:0}
  .room-result > .room-result-action,.room-result-ask > summary,.room-result .school-group-join .btn{width:100%;justify-content:center}
  .room-result .school-group-join-actions .btn-primary{flex:1 1 0}
  .room-result .school-group-join-actions .btn-ghost{width:auto}
}

/* "Kate L. asked to join": the same strip as a family needing a hand (sun, since it needs
   someone), with a person and a plus for its icon. */
.needs-hand-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Starting a room: "What's it for?" is asked only of a group. */
.room-setup form:not(:has(#Input_Scope option[value="Group"]:checked)) .group-only{display:none}
/* Its button says "Create the group" or "Create the room" to match. Without :has(), it names
   what the page was opened for. */
.room-setup form:not(.starts-group) .if-group,.room-setup form.starts-group .if-room{display:none}
.room-setup form:has(#Input_Scope option[value="Group"]:checked) .if-room,
.room-setup form:has(#Input_Scope option:not([value="Group"]):checked) .if-group{display:none}
.room-setup form:has(#Input_Scope option[value="Group"]:checked) .if-group,
.room-setup form:has(#Input_Scope option:not([value="Group"]):checked) .if-room{display:inline}
/* A group in search results and on its invitation: marked as a group, with its line. */
.room-result-kind{display:inline-flex;align-items:center;min-height:22px;margin-left:6px;padding:0 9px;border-radius:999px;
  background:var(--tide-field);color:var(--tide-deep);font-size:.75rem;font-weight:700;letter-spacing:0;vertical-align:.15em}
/* An invite link opened signed out: three numbered steps, then the two ways in. A hairline
   keeps the steps apart from the room's details above them. */
.invite-way-in{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.invite-way-in .chart-label{margin:0}
.invite-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.invite-steps li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.invite-steps li > span:last-child{min-width:0;overflow-wrap:anywhere}
.invite-step-n{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;margin-top:-2px;border-radius:50%;
  background:var(--tide-field);color:var(--tide-deep);font-weight:700;font-size:.875rem}
.invite-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:480px){.invite-actions .btn{flex:1 1 100%}}
[data-share-url][hidden]{display:none}
.room-result-about,.room-invitation-about{color:var(--ink);font-size:.9375rem;line-height:1.5}

/* Account: who you are first (your face and name as other parents see them, and since
   when, then what you have here as chips), your rooms and groups with the faces they have
   on Parent rooms, and settings as one list, closing the account folded into its last row. */
.account-who{display:flex;align-items:center;gap:12px;margin-top:14px}
.account-who .account-face{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;font-size:1.25rem}
.account-who b{display:block;color:var(--ink);font-size:1.0625rem;line-height:1.3}
.account-who small{display:block;margin-top:2px;color:var(--ink-2);font-size:.875rem}
.account-rooms{overflow:hidden;border-color:var(--rule-2);border-radius:18px;box-shadow:var(--shadow-soft)}
.account-rooms > li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:14px 18px}
/* The whole row opens the room, as a Settings row does: the name's link is stretched over it. */
.account-room-detail h3 a::after{content:"";position:absolute;inset:0}
.account-rooms > li:has(h3 a:hover){background:var(--tide-wash)}
.account-room-detail h3 a:focus-visible{outline:none}
.account-rooms > li:has(h3 a:focus-visible){outline:2.5px solid var(--focus);outline-offset:-2.5px}
.account-rooms > li > .account-room-face{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  font-size:.9375rem;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.account-room-detail h3{font-size:1.0625rem;font-weight:700}
.account-room-detail h3 a{color:var(--ink);text-decoration:none}
.account-room-detail h3 a:hover{color:var(--tide-deep)}
.account-room-detail p{margin:2px 0 0}
.account-room-detail .badge{margin-top:6px}
@media(max-width:420px){
  .account-rooms > li{padding:14px 16px}
}
.account-heading .account-counts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.account-counts a{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 15px;border:1px solid var(--rule-2);border-radius:999px;
  background:var(--sheet);color:var(--ink-2);font-size:.875rem;font-weight:600;text-decoration:none;box-shadow:var(--shadow-soft)}
.account-counts a b{color:var(--ink);font-weight:800}
.account-counts a:hover{border-color:var(--tide-line);color:var(--tide-deep)}
.account-counts svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#your-rooms{scroll-margin-top:100px}
/* Settings, as a phone lists them: an icon in a round tile, what it is and where it stands
   (on for how many devices, how many parents you know), and a chevron. The whole row is the
   target. Closing the account is the last row, in warm red, and unfolds in place. */
.account-page .account-settings{padding:18px 8px 8px}
.account-settings > h2{padding:0 12px 6px}
.settings-list{margin:0;padding:0;list-style:none}
.settings-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:62px;
  margin:0;padding:10px 12px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
/* The site's rule for a lone link in a list item would make it inline-flex. */
.settings-list li > a.settings-row:only-child{display:grid;min-height:62px}
.settings-row:hover{background:var(--tide-wash);color:var(--ink)}
.settings-row:focus-visible{outline:2.5px solid var(--focus);outline-offset:-2.5px}
.settings-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tide-field);color:var(--tide-deep)}
.settings-icon svg,.settings-go{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.settings-icon svg{width:20px;height:20px}
.settings-text{min-width:0}
.settings-text b{display:block;font-size:.9375rem;font-weight:700;line-height:1.3}
.settings-text small{display:block;margin-top:2px;color:var(--ink-2);font-size:.8125rem;line-height:1.4}
.settings-go{width:18px;height:18px;color:var(--ink-3)}
.settings-note{margin:-4px 12px 8px 64px;color:var(--ink-2);font-size:.8125rem;line-height:1.4}
#account-data:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:12px}
.account-close > summary{list-style:none}
.account-close > summary::-webkit-details-marker{display:none}
.account-close > summary::before{content:none;display:none}
.account-close > summary::after{content:"";width:8px;height:8px;margin:-4px 6px 0 0;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .15s}
.account-close[open] > summary::after{margin-top:4px;transform:rotate(-135deg)}
.account-close .settings-icon{background:var(--notice-field);color:var(--notice)}
/* No recovery code yet: the row is in the sun, as anything waiting on you is. */
.settings-row.is-needed .settings-icon{background:var(--sun-field);color:var(--sun-ink)}
.settings-row.is-needed .settings-text small{color:var(--ink)}

/* A recovery code (Account/RecoveryCode), set large, spaced and fixed-width so it reads off
   the screen onto paper without a slip, on a dashed slip of its own. Selecting it takes all
   of it. */
.recovery-code{margin:6px 0 0;padding:14px 16px;border:1.5px dashed var(--rule-2);border-radius:12px;background:var(--stock);
  color:var(--ink);font:600 clamp(1.125rem,5.2vw,1.625rem)/1.3 ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",monospace;
  letter-spacing:.06em;text-align:center;overflow-wrap:anywhere;user-select:all}
.recovery-code-copy{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0}
.recovery-code-copy [data-copy-code-status]:empty{display:none}
.recovery-tips{margin:14px 0 0;padding-left:20px;color:var(--ink-2)}
/* "This page was opened on an earlier day": above the page, its Refresh beside the words. */
.day-stale{margin-block:14px 0}
.day-stale .notice{align-items:center;flex-wrap:wrap;justify-content:space-between}
.day-stale .notice p{flex:1 1 220px;margin:0}
/* The moderation queue's batch line, between a section's heading and its cards. */
.queue-batch{margin:-4px 0 14px;color:var(--ink-2)}
/* The email the code goes with, shown beside it (an address may be long, so it may break). */
.recovery-signin{margin:14px 0 0;color:var(--ink-2);overflow-wrap:anywhere}
.recovery-signin b{color:var(--ink)}
.recovery-tips li + li{margin-top:4px}
.recovery-continue{display:grid;justify-items:start;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.recovery-code-input{font-family:ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",monospace;letter-spacing:.05em;text-transform:uppercase}
.recovery-code-input::placeholder{text-transform:none;letter-spacing:.05em}
.recovery-help > summary{cursor:pointer;font-weight:700;min-height:24px}
.account-close .settings-text b{color:var(--notice-deep)}
.account-close-body{padding:4px 12px 12px}
.account-close-body ul{padding-left:18px}
/* Rosters: an open turn today or tomorrow says "Today"/"Tomorrow" and "Still needed" on sun,
   and the roster's status line leads with it. */
.roster-slots li.is-open.is-soon{background:var(--sun-field)}
.roster-soon{color:var(--sun-ink);font-weight:700}
.help-status.is-soon{color:var(--sun-ink)}
.help-status.is-soon b{font-weight:700}
.room-entry-asks-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.room-entry-asks + .room-entry-asks{margin-top:6px}
/* People you know: a big room shows its first ten until "Show all"; a search shows every match. */
.js .circle-room:not(.is-expanded):not(.is-searching) .circle-list > li.is-more{display:none}
.circle-more{margin-top:10px}
.circle-room.is-searching .circle-more{display:none}
/* Search: rosters, asks and dates under their own heading, with a sun chip for the kind. */
.rooms-search-board{margin:26px 4px 12px;font-size:1.0625rem;font-weight:700}
.rooms-search-board .muted{font-weight:500}
/* Board results keep the plain chip: sun is for what needs you, and a search hit doesn't. */
/* The phone menu opens with the rooms search. */
.mobile-menu .menu-search{margin:6px 0 10px}
/* Updates for you, in days: a small heading over each day's card. */
.for-you-day{margin:22px 4px 8px;font-size:.9375rem;font-weight:700;letter-spacing:0;color:var(--ink-2)}
.for-you-bar + .for-you-day{margin-top:4px}
/* The front page, signed in: "Welcome back, Sam" as plain words with the kicker's heart (not
   its sun pill, so sun keeps meaning "needs you"), then white pills back to their rooms and,
   in sun, any record that's their turn. */
.welcome-back{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.welcome-back .hero-kicker{margin:0 6px 0 0;padding:0;background:none;color:var(--ink);font-size:.9375rem;font-weight:700}
.welcome-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px 0 11px;border:1px solid var(--rule);border-radius:999px;
  background:var(--sheet);color:var(--tide-deep);font-size:.875rem;font-weight:650;text-decoration:none;box-shadow:var(--shadow-soft)}
.welcome-chip svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.welcome-chip:hover{border-color:var(--tide);color:var(--tide-deep)}
.welcome-chip:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
.welcome-chip.is-yours{border-color:var(--sun);background:var(--sun-field);color:var(--sun-ink)}
/* What's new in their rooms, in the coral of a room card's "N new" (sun stays for what needs you). */
.welcome-chip-new{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:999px;background:var(--coral-deep);color:var(--sheet);font-size:.75rem;font-weight:700;line-height:1}
.welcome-chip.is-yours:hover{border-color:var(--sun-deep);color:var(--sun-ink)}
/* Asked to join and waiting: the room, then how it stands, quieter than its name. One run of
   words, so a long room name on a phone wraps as a sentence, in a pill that rounds to fit. */
.welcome-chip:has(.welcome-chip-words){border-radius:18px;padding-block:7px;line-height:1.35}
.welcome-chip-wait{color:var(--ink-2);font-weight:500;white-space:nowrap}
.welcome-chip-wait::before{content:"\00b7";margin:0 6px}
/* My concerns: how long a letter has waited sits under the step, quieter than it. */
.record-next-when{display:block;margin-top:2px;color:var(--ink-2);font-size:.875rem}
/* Asking for a hand: quick days above the date, as pills like the kinds above them. */
.day-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.day-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1.5px solid var(--rule-ink);border-radius:999px;
  background:var(--sheet);color:var(--ink-2);font:inherit;font-size:.875rem;font-weight:650;cursor:pointer}
.day-chip:hover{border-color:var(--tide);color:var(--tide-deep)}
.day-chip[aria-pressed="true"]{background:var(--tide-deep);border-color:var(--tide-deep);color:var(--sheet)}
.day-chip:focus-visible{outline:3px solid var(--tide-field-2);outline-offset:2px}
/* Searching every room at once: a round box with its button (Parent rooms and the search
   page), then results as rows, each with the room's face, the room and kind, the title and
   the words around the match marked in sun. */
.rooms-search{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:5px 5px 5px 44px;border:1.5px solid var(--control-rule);
  border-radius:999px;background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346534F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") 16px 50%/18px no-repeat}
.rooms-search:focus-within{border-color:var(--tide);box-shadow:0 0 0 2.5px var(--focus)}
.rooms-search input[type=search]{flex:1;min-width:0;min-height:40px;margin:0;padding:0 4px;border:0;background:none;font:inherit;font-size:1rem;color:var(--ink)}
.rooms-search input[type=search]:focus,.rooms-search input[type=search]:focus-visible{outline:none;box-shadow:none}
.rooms-search .btn{flex:none;min-height:40px}
.rooms-search-summary{margin:4px 4px 14px;color:var(--ink-2);font-size:.9375rem}
.rooms-search-summary b{color:var(--ink)}
/* "Did you mean excursion?" under a search that found nothing: the way out, so it reads first. */
.empty .search-suggest{margin:10px auto 6px;font-size:1.0625rem;color:var(--ink)}
.search-suggest a{font-weight:700;color:var(--tide-deep);text-underline-offset:3px}
.search-results{display:grid;gap:10px;margin:0;padding:0;list-style:none}
/* A result is as wide as the page, whatever it holds: a pasted link or a long word in a title
   once pushed a phone's page 575px sideways (3 Oct 2026). */
.search-results > li{min-width:0}
.search-result{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;gap:14px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-card);
  background:var(--sheet);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-soft)}
/* The site's rule for a lone link in a list item would make it inline-flex. */
.search-results li > a.search-result:only-child{display:grid;align-items:start;min-height:0}
.search-result:hover{border-color:var(--tide-field-2);color:var(--ink);box-shadow:var(--shadow-lift)}
.search-result:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
.search-result-face{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;font-size:.875rem;letter-spacing:-.02em}
.search-result-body{display:grid;gap:4px;min-width:0}
.search-result-where{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;color:var(--ink-2);font-size:.8125rem;font-weight:600}
.search-result-where .kind-chip{padding:1px 9px;border-radius:999px;background:var(--stock-2);color:var(--ink-2)}
.search-result-where .kind-chip.is-request{background:var(--tide-field);color:var(--tide-deep)}
.search-result-private{color:var(--sun-ink);font-weight:700}
.search-result-title{font-size:1.0625rem;line-height:1.35;overflow-wrap:anywhere}
.search-result-snippet{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;color:var(--ink-2);font-size:.9375rem;line-height:1.5;overflow-wrap:anywhere}
.search-result-by{color:var(--ink);font-weight:650}
.search-result-meta{color:var(--ink-3);font-size:.8125rem}
.search-result mark{padding:0 2px;border-radius:3px;background:var(--sun-field);color:var(--ink);box-shadow:inset 0 -2px 0 var(--sun)}
/* A parent's name in a room opens their person card (site.js): who they are to you and
   "I know them". The name looks like a name until it's pointed at. On a phone the card is a
   sheet from the bottom. */
/* A parent's name is theirs to choose (up to 60 characters, sometimes an email address), so
   it may break anywhere rather than push a phone's page sideways. */
.person-link{color:inherit;text-decoration:none;cursor:pointer;overflow-wrap:anywhere}
/* What people type can be one long link or word. It breaks where it must instead of widening
   its card, and with it the page, on a phone: a pasted link in an ask, a roster, a reply's
   excerpt under Updates for you, a room's or group's name and what it's for (3 Oct 2026). */
.for-you-text,.room-entry-body,.school-group-body,.help-card{overflow-wrap:anywhere}
.person-link:hover{color:inherit;text-decoration:underline;text-underline-offset:2px}
.person-link:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:4px}
.person-card{position:fixed;inset:auto;margin:0;width:min(340px,calc(100vw - 16px));padding:16px;border:1px solid var(--rule-2);
  border-radius:18px;background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-lift);
  max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain}
.person-card:focus{outline:none}
.person-card .bell-loading{padding:4px 0}
.person-card-head{display:flex;align-items:center;gap:12px}
.person-card-head .room-avatar{flex:none;width:52px;height:52px;font-size:1.125rem}
.person-card-name{display:block;font-size:1.0625rem;line-height:1.3}
.person-card-head small{display:block;margin-top:2px;color:var(--ink-2);font-size:.875rem;line-height:1.4}
/* Close: a 44px target tucked into the card's corner, drawn as a small round button. */
.person-card-close{flex:none;align-self:flex-start;display:grid;place-items:center;width:44px;height:44px;margin:-8px -8px 0 auto;
  padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.person-card-close svg{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--stock-2);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.person-card-close:hover svg{background:var(--rule);color:var(--ink)}
.person-card-close:focus-visible{outline:none}
.person-card-close:focus-visible svg{outline:2px solid var(--tide);outline-offset:2px}
.person-card-facts{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:.875rem}
.person-card-facts li{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.person-card-hint{color:var(--tide-deep);font-weight:600}
.person-card form{margin:14px 0 0}
.person-card .circle-toggle{width:100%;justify-content:center;min-height:44px}
.person-card .circle-toggle:not(.is-active) svg{display:none}
.person-card-said{margin:8px 0 0;color:var(--tide-deep);font-size:.8125rem;font-weight:600}
.person-card-said:empty{display:none}
.person-card-note{margin:10px 0 0;color:var(--ink-3);font-size:.8125rem}
/* The room's vote on them: at the foot, under a rule, quieter than "I know them". */
.person-card-vote{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--rule);font-size:.8125rem}
.person-card-vote a{color:var(--ink-2);font-weight:600}
@media(max-width:560px){
  .person-card{top:auto !important;left:0 !important;right:0;bottom:0;width:auto;padding:20px 20px calc(20px + env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;border-width:1px 0 0}
  .person-card::backdrop{background:rgba(28,43,42,.32)}
}
/* People you know: a "Find a parent by name" box once there are more than eight, and the
   faces at the size they have in a room's member list. */
.circle-find{margin:0 0 18px}
.circle-find input[type=search]{width:100%;min-height:48px;padding:10px 16px 10px 44px;border:1.5px solid var(--control-rule);border-radius:999px;
  background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346534F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") 16px 50%/18px no-repeat;
  font:inherit;font-size:1rem;color:var(--ink)}
.circle-find input[type=search]:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-color:var(--tide)}
.circle-find-none{margin:10px 4px 0;color:var(--ink-2);font-size:.9375rem}
.circle-room[hidden],.circle-list > li[hidden]{display:none}
.circle-list .room-avatar{width:40px;height:40px;font-size:.875rem}
/* Alerts: what reaches you is grouped rows with a switch each, the same rows as Account's
   settings, and it saves as it changes ("Saving…", then "Saved", beside the heading). */
.alerts-choices-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
.alerts-saved{margin:0;color:var(--tide);font-size:.875rem;font-weight:700}
.alerts-saved:empty{display:none}
.alerts-saved.is-error{color:var(--notice)}
/* The same word under the choice that changed, for one further down the page (alerts.js). */
.row-saved{display:block;margin-top:3px;color:var(--tide);font-size:.8125rem;font-weight:700}
.row-saved.is-error{color:var(--notice)}
.alerts-group,.alerts-choices .audience-choice > legend{margin:22px 0 4px;color:var(--tide);font-size:.8125rem;font-weight:700;letter-spacing:.01em}
.alerts-choices .audience-choice > legend{margin:0 0 8px}
.switch-list{margin:0 -12px}
.switch-row{align-items:start;font-weight:400}
.switch-row .settings-text small{font-size:.875rem}
.switch-row .settings-text b{margin-top:1px}
.switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:48px;height:28px;margin:6px 0 0;border-radius:999px;
  background:var(--control-rule);cursor:pointer;transition:background-color .18s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s}
.switch:checked{background:var(--tide-deep)}
.switch:checked::after{transform:translateX(20px)}
.switch:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
.switch-row.is-quiet .settings-icon{background:var(--land-wash);color:var(--land-ink)}
@media(prefers-reduced-motion:reduce){.switch,.switch::after{transition:none}}
@media(forced-colors:active){
  .switch{border:1px solid CanvasText;background:Canvas}
  .switch::after{background:CanvasText;box-shadow:none}
  .switch:checked{background:Highlight}
  .switch:checked::after{background:HighlightText}
}
/* Settings come first in the page, as a phone's menu puts them; a wide screen places them
   in the right-hand column beside the forms. */
.account-page .grid-side > aside{grid-column:2;grid-row:1}
.account-page .grid-side > aside + div{grid-column:1;grid-row:1}
@media(max-width:820px){.account-page .grid-side > :is(aside,aside + div){grid-column:auto;grid-row:auto}}
/* A parent's first look at Parent rooms: the search is in the empty state itself (rooms and
   groups), the saved school is one tap, and invite links are explained. */
.empty.rooms-start{padding:clamp(24px,4vw,40px)}
.rooms-start > p{max-width:52ch}
.rooms-start .rooms-start-search{max-width:560px;margin:18px auto 0;text-align:left}
.rooms-start .rooms-start-search label{display:block;margin-bottom:6px;color:var(--ink);font-size:.875rem;font-weight:700}
.rooms-start .room-finder-control input{min-height:48px}
.rooms-start .room-finder-control .btn{min-height:48px;padding-inline:22px}
.rooms-start-school{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:12px;padding:0 16px;border-radius:999px;
  background:var(--tide-wash);box-shadow:inset 0 0 0 1px var(--tide-field-2);color:var(--tide-deep);font-size:.9375rem;font-weight:700;text-decoration:none}
.rooms-start-school:hover{background:var(--tide-field)}
.rooms-start > p.small{margin-top:16px;color:var(--ink-2);font-size:.875rem}
@media(max-width:480px){
  .rooms-start .room-finder-control{flex-direction:column}
  .rooms-start .room-finder-control .btn{width:100%;justify-content:center}
}
/* Starting a concern: the children a parent already named in their class rooms, as chips
   that fill the child, class and school in one tap. */
.known-children{grid-column:1 / -1;margin:0 0 18px;padding:14px 16px;border:1px solid var(--tide-field-2);border-radius:16px;background:var(--tide-wash)}
.known-children-label{margin:0 0 10px;color:var(--ink-2);font-size:.8125rem;line-height:1.4}
.known-children-label b{display:block;color:var(--tide-deep);font-size:.875rem;font-weight:700}
.known-children-list{display:flex;flex-wrap:wrap;gap:8px}
.known-child{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 6px;border:1px solid var(--rule-2);
  border-radius:999px;background:var(--sheet);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-soft)}
.known-child:hover{border-color:var(--tide);color:var(--ink)}
.known-child.is-chosen{border-color:var(--tide-deep);box-shadow:0 0 0 1px var(--tide-deep)}
.known-child > .known-child-face{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;font-size:.75rem}
.known-child b{display:block;font-size:.9375rem;line-height:1.2}
.known-child small{display:block;color:var(--ink-2);font-size:.8125rem;line-height:1.3}
.known-child:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
/* On a phone a room's breadcrumb, like a record's, drops the name the heading right below
   repeats: a long room or post name took two lines to say it twice. "Parent rooms" stays
   as the way back. */
@media(max-width:560px){
  :is(.community-room-head,.shared-issue-page) .breadcrumb > :is([aria-current],span[aria-hidden]:has(+ [aria-current])){display:none}
  /* Every way back keeps to one line on a phone. The first crumb and the arrows stay whole;
     a long name between them (a record's title) gives way, and where you are then stays whole
     up to three-fifths of the line: shrinking it even a fraction of a pixel cut "Next steps" to
     "Next ste…". With nothing between, where you are takes the rest of the line. Each link
     still holds the whole name for anyone it is read out to. */
  .breadcrumb{flex-wrap:nowrap}
  .breadcrumb > :is(a,[aria-current]){display:block;min-width:0;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .breadcrumb > a:not(:first-child){flex:0 100 auto}
  .breadcrumb > [aria-current]{flex:0 1 auto}
  .breadcrumb > a:not(:first-child) ~ [aria-current]{flex:none;max-width:60%}
  .breadcrumb > :is(a:first-child,span[aria-hidden]){flex:none}
}
/* Account: a long unbroken name wraps inside its line instead of widening the page. */
.account-who > span:last-child{min-width:0}
.account-who b{overflow-wrap:anywhere}
/* The header greeting: the text itself carries the ellipsis (its box is a flex row, which
   clips a child without one). */
.nav-me-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* New record: the kinds of concern as choices, each with its example in full. */
.kind-choice{margin:0 0 20px;padding:0;min-width:0}
.kind-choice > legend{padding:0;margin-bottom:4px;font-weight:640;font-size:.9375rem;color:var(--ink)}
.kind-choice > .hint{margin:0 0 4px}
.kind-choice .audience-option{margin:0;align-items:flex-start}
.kind-choice .audience-option input{margin-top:2px}
.kind-choice .audience-option b{font-weight:640}
/* A choice row rings as a whole when the keyboard reaches it, as the choice pills do. */
.audience-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.audience-option input:focus-visible{outline:0}
.kind-choice{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.kind-choice > .hint,.kind-choice > .text-danger{grid-column:1 / -1}
/* Paper is white: the page's warm cream stays on screen (it had come through on printed and
   saved copies, around and after the evidence bundle). */
@media print{
  html,body{background:#fff}
  /* Navigation isn't part of a printed page; the letter prints as a letter, not a card. */
  .breadcrumb{display:none}
  .letter-print-sheet{border:0;border-radius:0;box-shadow:none;padding:0}
}
.letter-print-date{margin:0 0 14px;color:var(--ink)}
/* A side column keeps you company down a long page (a room's rail, a record's letter and dates, a
   thread's support panel), as a Facebook group's right column does. Taller than the window, it
   scrolls with the page until its end is in view and holds there; scrolling back up, it comes
   down with the page until its top is in view. site.js moves --rail-top between those two. One
   pinned by its top had been switched off: a room's invite box fell below the window. */
@media (min-width:861px){
  /* "html body" outranks the older .room-rail{position:static} in experience.css. */
  html body .is-following{position:sticky;align-self:start;top:var(--rail-top,88px)}
}
@media print{html body .is-following{position:static}}
/* The letter editor printed with Ctrl+P: the letter alone, as "Print saved letter" lays it out,
   not the form around it (Letter.cshtml fills the sheet in on beforeprint). */
.letter-print-copy{display:none}
@media print{
  .record-letter.is-editing > :not(.letter-print-copy){display:none !important}
  .record-letter.is-editing > .letter-print-copy{display:block}
}
/* A room's printed line (which tab, printed when) is for paper only. */
.room-printed{display:none}
@media print{ .room-printed{display:block;margin:10px 0 0;font-size:.9rem;color:var(--ink)}
  /* Paper is a still: nothing prints mid-animation (a fold opened for print would otherwise
     be caught on its first, invisible frame of "unfold"). */
  *,*::before,*::after{animation:none !important;transition:none !important}
  /* A fold marked for paper prints open (site.js opens it on beforeprint where this isn't styled). */
  details[data-print-open]::details-content{content-visibility:visible;display:block}
  details[data-print-open] > summary::before{display:none}
  /* The pathway on paper: an outside link can't be followed, so its address prints after it. */
  /* A stop's parts stay whole (its name with what it does, each detail, its time), without
     pushing a tall stop to the next sheet and leaving an empty box behind. */
  .tt-name{break-after:avoid}
  :is(.tt-does,.tt-body p,.tt-span,.tt-here-note){break-inside:avoid}
  .guidance-change{display:none}
  /* The pathway on paper: an outside link can't be followed, so its address prints after it,
     on a line of its own (these links are inline-flex for their arrow). */
  :is(.record-routes,.guidance-page) a[href^="http"]{flex-wrap:wrap}
  :is(.record-routes,.guidance-page) a[href^="http"]::after{content:" (" attr(href) ")";flex-basis:100%;font-size:.85em;color:var(--ink-2);overflow-wrap:anywhere} }
/* Next routes: the parent's own position at the step they're on. Sun when a follow-up is
   theirs: the tint and its line all round carry it, not a thick edge down one side. */
.tt-here-note{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--sheet)}
.tt-here-note.is-yours{border-color:color-mix(in srgb,var(--sun) 60%,transparent);background:var(--sun-field)}
.tt-here-note p{margin:0;color:var(--ink);font-size:.9375rem;line-height:1.5}
.tt-here-note .btn{margin-top:10px}
/* Your week, when today is free: a full-width empty slot where Today would be. */
.week-page .week-quiet{max-width:none;margin:0 0 18px;padding:12px 18px}
/* Photos and documents kept with a private record: the photo itself (or its kind) as the
   face, then the name, then a quiet Remove. */
.record-files .file-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.record-files .file-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:8px 8px 8px 8px;border:1px solid var(--rule);border-radius:14px;background:var(--sheet)}
.record-files .file-face{display:grid;place-items:center;width:64px;height:64px;border-radius:10px;overflow:hidden;
  border:1px solid var(--rule);background:var(--tide-wash);text-decoration:none}
.record-files .file-face img{display:block;width:100%;height:100%;object-fit:cover}
.record-files .file-kind{color:var(--tide-deep);font-size:.75rem;font-weight:750;letter-spacing:.04em}
.record-files .file-body{display:grid;gap:2px;min-width:0}
.record-files .file-name{color:var(--ink);font-weight:650;line-height:1.35;overflow-wrap:anywhere;text-decoration:none}
.record-files a.file-name:hover{color:var(--tide);text-decoration:underline}
.record-files .is-missing .file-face{border-style:dashed;background:var(--stock)}
.record-files .is-missing .file-kind{color:var(--ink-3)}
.record-files .file-remove .linkish{min-height:44px;padding:0 8px;color:var(--ink-2)}
.record-files .file-remove .linkish:hover{color:var(--notice)}
/* On a phone, "Remove" goes under the details: beside them it left a file’s description
   ("Note sent home about the side gate, 6 Oct") four lines in a narrow column. */
@media (max-width:480px){
  .record-files .file-item{grid-template-columns:64px minmax(0,1fr);align-items:start}
  .record-files .file-remove{grid-column:2;margin-top:-8px}
  .record-files .file-remove .linkish{padding:0}
}
input[type=file]{display:block;width:100%;max-width:100%;padding:10px;border:1px dashed var(--control-rule);border-radius:14px;
  background:var(--stock);color:var(--ink-2);font:inherit;font-size:.9375rem}
input[type=file]::file-selector-button{min-height:40px;margin-right:12px;padding:0 18px;border:1px solid var(--tide);border-radius:999px;
  background:var(--sheet);color:var(--tide-deep);font:inherit;font-weight:650;cursor:pointer}
input[type=file]:hover::file-selector-button{background:var(--tide-field)}
input[type=file]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input[type=file]:user-invalid{border-color:var(--notice)}
/* A record's file picker with scripts (site.js): the same dashed place and pill, in the site's
   words, with the file's name once chosen. The browser's control lies over it, transparent. */
.file-pick.is-enhanced{position:relative}
.file-pick.is-enhanced input[type=file]{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;opacity:0;cursor:pointer}
/* It wraps, and the button never outgrows the box: at a large text size on a small phone the
   button ran past the screen and the words beside it were squeezed a letter to a line. */
.file-pick-face{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:62px;padding:10px;border:1px dashed var(--control-rule);border-radius:14px;
  background:var(--stock);color:var(--ink-2);font-size:.9375rem;line-height:1.35}
.file-pick-face[hidden]{display:none}
.file-pick-button{display:inline-flex;align-items:center;flex:none;max-width:100%;min-height:40px;padding:0 18px;border:1px solid var(--tide);border-radius:999px;
  background:var(--sheet);color:var(--tide-deep);font-weight:650}
.file-pick-name{min-width:0;overflow-wrap:anywhere}
.file-pick.is-enhanced:hover .file-pick-button{background:var(--tide-field)}
.file-pick.is-enhanced:has(input:focus-visible) .file-pick-face{outline:2px solid var(--focus);outline-offset:2px}
.file-pick.is-enhanced:has(input:user-invalid) .file-pick-face{border-color:var(--notice)}
.file-pick.is-chosen .file-pick-name{color:var(--ink);font-weight:600}
.file-pick.is-dragging .file-pick-face{border-style:solid;border-color:var(--tide);background:var(--tide-field)}
.record-files .file-meta > span{white-space:nowrap}
@media print{ .record-files .file-item{break-inside:avoid} }
/* Small links that stand on their own still make a full target: the room guide's rules link,
   and an author's name (2px of padding reaches 24px without moving a line). */
.room-guide > a.small{display:inline-flex;align-items:center;min-height:44px}
.person-link{padding-block:2px}
/* Sending a letter: the files kept with the record, each one a link that saves it to attach. */
.letter-attach{margin-top:16px;padding:12px 16px;border:1px solid var(--tide-field-2);border-radius:14px;background:var(--tide-wash)}
.letter-attach p{margin:0 0 6px;color:var(--ink)}
.letter-attach-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* What the parent called the file leads; its own name and size sit beneath, in line with the words, not under the clip. */
.letter-attach-list li{display:grid;justify-items:start}
.letter-attach-list li>span{margin:2px 0 6px 26px}
.letter-attach-list a{display:inline-flex;align-items:center;gap:8px;padding-top:10px;font-weight:650;overflow-wrap:anywhere}
.letter-attach-list svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The evidence bundle shows kept photos as they were kept, each whole on its sheet. */
.bundle-photo{margin:16px 0;break-inside:avoid}
.bundle-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:560px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet)}
.bundle-photo figcaption{margin-top:6px;color:var(--ink-2);font-size:.8125rem;line-height:1.5}
@media print{ .bundle-photo img{max-height:15cm;border-color:#ccc} .bundle-photo figcaption{color:#333} }
@media(forced-colors:active){
  .record-list > .record-card{border-left:6px solid CanvasText}
  .tabs.app-tabs a.active{outline:2px solid CanvasText}
  .record-detail .record-next-step{border:2px solid CanvasText}
  .school-group,.school-group-start{border:1px solid CanvasText}
}

/* ---------- Photos on a post, laid out as a Facebook group lays them out ---------- */
/* One at its own shape (the page clamps it between 4:5 and 1.91:1), two side by side, three
   with the first across the top, four in a square. Here because the moderation queue shows
   them too; in a room they also run to the card's edges (rooms.css). */
.post-photos{display:grid;gap:2px;margin:10px 0 2px;overflow:hidden;border-radius:8px;background:var(--fb-line-2,#E4E6EB)}
.post-photos:is(.is-2,.is-3,.is-4){grid-template-columns:1fr 1fr}
.post-photo{position:relative;display:block;overflow:hidden;background:var(--fb-field,#F0F2F5)}
.post-photo img{display:block;width:100%;height:100%;object-fit:cover}
.post-photos.is-1 .post-photo img{height:auto;max-height:600px}
.post-photos:not(.is-1) .post-photo{aspect-ratio:1}
.post-photos.is-3 > .post-photo:first-child{grid-column:1 / -1;aspect-ratio:2}
.post-photo:hover img{filter:brightness(.95)}
.post-photo:focus-visible{outline:none}
.post-photo:focus-visible::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--fb-blue,#0866FF),inset 0 0 0 5px #fff}
/* A photo whose file can't be found (site.js): its space keeps its shape, with a quiet line in it. */
.post-photo.is-missing{cursor:default;min-height:120px}
.post-photo.is-missing img{visibility:hidden}
.post-photo-missing{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;
  color:var(--fb-ink-2,#65676B);font-size:.875rem;font-weight:600}
.queue-photos{display:grid;gap:6px;margin-top:10px}
.queue-photos .post-photos{max-width:420px;margin:0}
.queue-photos ul{margin:2px 0 0;padding-left:20px}
/* A report card quotes what was reported, set off by a rule like any quote. */
.report-said{padding-left:10px;border-left:3px solid var(--rule-2)}
/* A reply's photo (_ReplyPhoto), under its bubble: its own shape, no taller than 300px (the
   partial sets the width from that), rounded like the bubble above it. */
.reply-photo{margin-top:4px;max-width:100%}
.reply-photo .post-photo{border-radius:14px}
.reply-photo .post-photo img{height:auto}

/* The viewer: the photo as large as the screen allows, on black, as any photo viewer is. */
.photo-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.94);color:#fff}
.photo-viewer::backdrop{background:rgba(0,0,0,.94)}
.photo-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.photo-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px}
.photo-viewer-count{font-size:.9375rem;font-weight:600}
.photo-viewer button{display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;line-height:1;cursor:pointer}
.photo-viewer button:hover{background:rgba(255,255,255,.28)}
.photo-viewer button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.photo-viewer-close{width:44px;height:44px;font-size:1.75rem}
.photo-viewer-stage{display:grid;place-items:center;align-content:center;gap:10px;min-height:0;margin:0;padding:0 8px 16px}
.photo-viewer-stage img{max-width:100%;max-height:calc(100dvh - 120px);object-fit:contain}
.photo-viewer-stage figcaption{max-width:60ch;padding:0 16px;color:#E4E6EB;font-size:.9375rem;line-height:1.4;text-align:center}
.photo-viewer-step{position:absolute;top:50%;width:48px;height:48px;font-size:2rem;transform:translateY(-50%)}
.photo-viewer-step.is-prev{left:12px}
.photo-viewer-step.is-next{right:12px}
.photo-viewer-step[hidden]{display:none}
@media(max-width:560px){
  .photo-viewer-step{top:auto;bottom:16px;transform:none}
}

/* Narrowest phones (under 360px, 3 Oct 2026): an example in a box was cut off mid-word ("e.g.
   A teacher on the pickup"). Examples step down to 15px there; what's typed stays full size.
   A select's chosen line goes to exactly 16px, the least iPhones take without zooming in: as
   strong as the touch-screen rule above, which would otherwise keep it at 1em (17px). */
@media (max-width:359.98px){
  :is(input,textarea)::placeholder{font-size:.9375rem}
  select:not([multiple]){font-size:16px!important}
}
/* High Contrast drops the fill that makes an initial a face and a count a badge, leaving a
   loose letter beside a name. An edge in the theme's colour keeps each one a shape. Last in
   the sheet, and under :root, so the looks that set these borders to 0 don't win. */
@media(forced-colors:active){:root :is(.room-avatar,.initial,.nav-me-initial,.nav-bell-count,.nav-count,.needs-hand-icon,.help-compose-icon,.room-entry-asks-icon){border:1px solid CanvasText}
  /* The same for the small labels that are only a tinted pill: "New", "Your turn", a kind of
     ask or date, a record's state. Without an edge they read as stray words in a line. */
  :root :is(.badge,.new-tag,.kind-chip,.poll-tag,.help-kind,.help-audience,.roster-mine,.plan-label,.record-state,
    .welcome-chip-new,.room-entry-new,.room-entry-rep,.filter-count){border:1px solid CanvasText}
  /* A card that is itself the link draws its "button" as a span; it needs a button's edge too. */
  :root :is(.room-entry-action,.needs-hand-go){border:1px solid ButtonText}}