/* Assembly base styles and retained chart/data primitives.
   experience.css loads after this file and owns the current editorial refinement.
   Its root overrides, responsive components and motion rules are intentional.
   Historical chart-era comments below describe these base primitives, not a ban
   on the current rounded surfaces or restrained explorer shadows. See DESIGN.md
   for the current contract and docs/design-legacy-chart-20260726.md for history. */

/* ---------- TOKENS ---------- */
:root{
  /* Light only: there's no dark theme, and "only" keeps a browser's own darkening (Chrome's
     "darken websites", Samsung Internet's dark mode) from repainting the warm paper muddy
     brown around a still-light illustration. */
  color-scheme:only light;

  /* stock */
  --stock:#F4F6F6;        /* the page: cool chart paper, never cream */
  --sheet:#FFFFFF;        /* plates, tables, inputs */
  --stock-2:#E8EDEC;      /* recessed bands, table stripes */

  /* ink */
  --ink:#0E1513;
  --ink-2:#45514E;
  --ink-3:#5F6C69;        /* quietest ink allowed: 5.4:1 on stock, 5.9:1 on sheet.
                             Chrome and furniture only — never a parent's own words. */
  --rule:#C9D4D3;
  --rule-2:#9FB0AD;
  --control-rule:#788985; /* Input boundaries, distinct from decorative rules. */
  --rule-ink:#0E1513;

  /* tide — time, waiting, what is owed to you */
  --tide:#04657E;
  --tide-deep:#023B4A;
  --tide-line:#0B93AE;    /* plot linework only, never text */
  --tide-field:#DCEDF1;
  --tide-field-2:#BFDFE8;

  /* notice — magenta overprint. A window closing on you. Used sparingly,
     exactly as chart corrections are: it must never become decoration. */
  --notice:#A4005A;
  --notice-deep:#6E003C;
  --notice-field:#FBE4F0;

  /* land — settled, resolved, nothing owed */
  --land:#E9E0C6;
  --land-2:#DCD0AC;
  --land-ink:#6B5A24;

  --focus:#04657E;

  /* washes — terrain, not state. A printed chart is not stark: water is tinted,
     land is buff, and neither tint is a message about the reader's case. Washes
     are paler than any role field so a field still reads as a statement. */
  --tide-wash:#EAF4F7;    /* water: large grounds that hold an instrument */
  --land-wash:#F4F0DE;    /* shore: the sheet's settled bottom margin */
  --graticule:#DFEAED;    /* the faint grid the chart is drawn on */

  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6C69' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* Charts are drawn, not stacked: near-square throughout. One surface radius and a
     1px hairline for marks is the whole scale — the 3px/4px/pill steps were declared
     during the port and referenced nowhere, which is how a radius scale quietly
     becomes four arbitrary numbers. */
  --r-sm:2px;

  /* One workhorse stack. A chart is set in a grotesque, and the numbers
     are the point — tabular figures are on by default sitewide. */
  --font-sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-sans);

  --wrap:1140px;
  --gutter:clamp(18px,4vw,32px);
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-sans);
  /* the graticule: the survey grid every chart is drawn over. Faint enough to be
     paper texture, present enough that the plates visibly sit ON something. */
  background-color:var(--stock);
  background-image:
    linear-gradient(var(--graticule) 1px,transparent 1px),
    linear-gradient(90deg,var(--graticule) 1px,transparent 1px);
  background-size:72px 72px;
  color:var(--ink);
  font-size:1.0625rem;
  line-height:1.6;
  min-height:100vh;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%}
svg{display:block}

h1,h2,h3,h4{line-height:1.15;letter-spacing:-.022em;font-weight:660;color:var(--ink);text-wrap:balance}
/* Running text never ends on one stranded word ("let you" / "in."): the browser weighs the
   last lines of each paragraph. Where it isn't supported, text wraps as before. */
p,li,dd,blockquote,figcaption{text-wrap:pretty}
h1{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.032em;font-weight:700}
h2{font-size:clamp(1.4rem,2.6vw,1.95rem)}
h3{font-size:1.125rem;letter-spacing:-.014em}
p{max-width:68ch}
/* A word or web address longer than its column breaks rather than running past the edge
   (the NSW Ombudsman's lodging address was cut off on a 360px phone). Ordinary words are
   never split; only one that cannot fit is. */
p,li,dd,dt,blockquote,figcaption,label,h1,h2,h3,h4{overflow-wrap:break-word}
/* A date or a time reads as one thing: “2 Nov 2026” never leaves its “2” at the end of a line. Every
   <time> on the site is short (the longest, “29 July 2026, 5:51 am”), so it fits a 320px screen. */
time{white-space:nowrap}
/* A breadcrumb's last step is a room's name or a thread's title, in parents' own words. */
.breadcrumb > *{min-width:0;overflow-wrap:anywhere}

a{color:var(--tide);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--tide-deep)}

:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:1px}
/* Where a link or a redirect lands (a room on People you know, a record's Timeline, main after
   "Skip to content") takes focus, so the next Tab starts there and a screen reader reads it,
   but it isn't a control: no ring. Error summaries (role=alert) keep theirs. */
:where(main, section, div, aside, h1, h2, h3)[tabindex="-1"]:not([role=alert]):focus{outline:none}

::selection{background:var(--tide-field-2);color:var(--ink)}

.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.page{padding:clamp(28px,5vw,56px) 0 clamp(56px,8vw,88px)}
.page-narrow{--wrap:820px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--sheet);
  padding:12px 18px;font-weight:640}
.skip:focus{left:8px;top:8px}

/* ---------- CHART FURNITURE ----------
   The label grammar of a chart: small, tracked, uppercase, and only
   ever attached to plot furniture — an axis, a mark, a table head, a
   title block. Never floated over a section as a decorative kicker. */
.chart-label,.eyebrow,.label,th,.legend dt{
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:680;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.eyebrow{display:block;margin-bottom:10px;color:var(--tide)}

/* The neat-line: a chart's double border. This is the primary container
   in the system and it replaces the card as the default surface. */
.plate{
  background:var(--sheet);
  border:1px solid var(--rule-ink);
  box-shadow:0 0 0 1px var(--sheet) inset, 0 0 0 4px var(--stock) inset, 0 0 0 5px var(--rule) inset;
  padding:clamp(20px,3vw,30px);
  border-radius:var(--r-sm);
}
.plate-flush{padding:0;overflow:hidden}
/* The water plate: the ground a working instrument sits on. On a chart the water
   is tinted and the land is not — so the plates that hold a live plot take the
   tide wash, and prose plates stay on sheet. */
.plate-water{background:var(--tide-wash);
  box-shadow:0 0 0 1px var(--tide-wash) inset, 0 0 0 4px var(--stock) inset, 0 0 0 5px var(--rule) inset}
/* The land plate: a record that has come to rest. Nothing is owed, nothing is running,
   and the sheet should say so before the badge does — a settled concern reads as
   ground, not as water. */
.plate-land{background:var(--land-wash);
  box-shadow:0 0 0 1px var(--land-wash) inset, 0 0 0 4px var(--stock) inset, 0 0 0 5px var(--land-2) inset}

/* Title block — the cartouche in a chart's corner. Heading plus the
   metadata that makes the sheet trustworthy: who, where, verified when. */
/* The cartouche's head-band: a 3px tide rule drawn INSIDE the neat-line (zero-blur
   inset linework per the Drawn-Depth rule), so the ink border stays the outer edge
   on all four sides and the corners stay clean. */
.title-block{border:1px solid var(--rule-ink);background:var(--sheet);
  box-shadow:inset 0 3px 0 var(--tide);
  padding:21px 20px 18px;border-radius:var(--r-sm)}
.title-block h1,.title-block h2{margin:0}
.title-block .meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--rule)}
.title-block .meta > span{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:640;color:var(--ink-3)}
.title-block .meta b{color:var(--ink);font-weight:660;letter-spacing:0;text-transform:none;font-size:.875rem}

/* Legend — the key that makes the colour roles readable rather than decorative. */
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  border-top:1px solid var(--rule);padding-top:12px;margin-top:16px}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--ink-2)}
.legend i{width:14px;height:14px;flex:none;border:1px solid var(--rule-ink);border-radius:1px}
.legend .k-tide{background:var(--tide-field-2)}
.legend .k-notice{background:var(--notice)}
.legend .k-land{background:var(--land)}
.legend .k-ink{background:var(--ink)}

/* ---------- THE POSITION PLOT ----------
   The signature. A tracked period drawn the way a tide table draws one:
   two published marks, the span between them, and the reader's own
   position on it. Server-computed percentage, no script, degrades to a
   plain sentence for screen readers.

   TIDE  = time someone else owes you (service target, entity duty)
   NOTICE= a window closing on you (filing deadline) */
.plot{margin:18px 0 4px}
.plot-head{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-bottom:14px}
.plot-head b{font-size:.9375rem;font-weight:660;letter-spacing:-.01em}

.plot-rail{position:relative;height:40px}
.plot-line{position:absolute;left:0;right:0;top:26px;height:3px;background:var(--stock-2);
  border-block:1px solid var(--rule)}
.plot-fill{position:absolute;left:0;top:26px;height:3px;background:var(--tide);
  box-shadow:0 0 0 1px var(--tide)}
.plot-cap{position:absolute;top:18px;width:2px;height:19px;background:var(--rule-ink)}
.plot-cap.start{left:0}
.plot-cap.end{right:0}

/* the reader's position: a plotted triangle, the one moving thing on a
   printed sheet. It is what turns a table into "you are here". */
.plot-now{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:2px}
.plot-now::after{content:"";width:0;height:0;border-left:6px solid transparent;
  border-right:6px solid transparent;border-top:8px solid var(--ink)}
.plot-now span{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;color:var(--ink)}

.plot-ends{display:flex;justify-content:space-between;gap:14px;margin-top:2px}
.plot-ends span{font-size:.8125rem;color:var(--ink-2);font-weight:600}
.plot-ends span small{display:block;font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:680;margin-bottom:1px}
.plot-ends span:last-child{text-align:right}

.plot-notice .plot-fill{background:var(--notice)}
.plot-notice .plot-now::after{border-top-color:var(--notice)}
.plot-notice .plot-now span{color:var(--notice)}
.plot-past .plot-fill{background:var(--notice)}
.plot-done .plot-fill{background:var(--land-2)}
.plot-done .plot-now{display:none}

/* ---------- TABLES ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--rule-ink);border-radius:var(--r-sm);background:var(--sheet)}
table{border-collapse:collapse;width:100%;font-size:.9375rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere}
thead th{background:var(--tide-wash);border-bottom:1.5px solid var(--rule-ink);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td b{font-weight:660}

/* ---------- THE TIMETABLE ----------
   The escalation ladder. A published sequence read the way an almanac
   is read: one row per body, its span plotted on a shared axis, so a
   parent sees the whole route and their place on it at a glance.
   Detail is not removed — it is put behind the row's own disclosure. */
.timetable{border:1px solid var(--rule-ink);border-radius:var(--r-sm);background:var(--sheet);overflow:hidden}
.tt-axis{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:0;
  background:var(--tide-wash);border-bottom:1.5px solid var(--rule-ink)}
.tt-axis > *{padding:9px 16px}
.tt-axis > *:last-child{border-left:1px solid var(--rule)}

.tt-row{display:grid;grid-template-columns:minmax(0,1fr) 190px;border-bottom:1px solid var(--rule)}
.tt-row:last-child{border-bottom:0}
.tt-row > *{padding:16px}
.tt-span{border-left:1px solid var(--rule);display:flex;flex-direction:column;justify-content:center;gap:7px}
.tt-main{min-width:0}

.tt-stop{display:flex;gap:13px;align-items:flex-start}
.tt-num{flex:none;width:26px;height:26px;border:1.5px solid var(--rule-ink);border-radius:1px;
  display:grid;place-items:center;font-size:.8125rem;font-weight:700;background:var(--sheet)}
.tt-row.here .tt-num{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.tt-row.here{background:var(--tide-field)}
.tt-name{font-weight:660;letter-spacing:-.012em;font-size:1.0625rem}
.tt-does{color:var(--ink-2);font-size:.9375rem;margin-top:3px}

/* a plotted bar rather than a sentence: the eye compares durations */
.tt-bar{height:9px;border:1px solid var(--rule-ink);border-radius:1px;background:var(--stock-2);
  position:relative;overflow:hidden}
.tt-bar i{position:absolute;inset:0;background:var(--tide-field-2);border-right:1px solid var(--tide)}
.tt-bar.is-filing i{background:var(--notice-field);border-right-color:var(--notice)}
.tt-bar.is-none{background:repeating-linear-gradient(135deg,var(--stock-2) 0 5px,var(--sheet) 5px 10px)}
.tt-time{font-size:.8125rem;color:var(--ink-2);line-height:1.4}
.tt-time b{display:block;font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:680}

/* the disclosure that keeps the sheet simple without losing a word of it */
.tt-more{margin-top:12px}
.tt-more > summary{cursor:pointer;font-size:.8125rem;font-weight:660;color:var(--tide);
  list-style:none;display:inline-flex;align-items:center;gap:6px;padding:5px 2px;min-height:26px}
.tt-more > summary::-webkit-details-marker{display:none}
.tt-more > summary::before{content:"+";font-weight:700;font-size:1rem;line-height:1;width:14px;
  display:inline-grid;place-items:center}
.tt-more[open] > summary::before{content:"\2212"}
.tt-more > summary:hover{color:var(--tide-deep)}
.tt-body{padding:12px 0 2px;border-top:1px solid var(--rule);margin-top:10px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:10px;font-size:.9375rem;color:var(--ink-2)}
.tt-body b{color:var(--ink)}

@media (max-width:720px){
  .tt-axis,.tt-row{grid-template-columns:minmax(0,1fr)}
  .tt-axis > *:last-child,.tt-span{border-left:0;border-top:1px solid var(--rule)}
  .tt-span{padding-top:12px}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;min-height:46px;
  border:1.5px solid var(--rule-ink);border-radius:var(--r-sm);
  font:inherit;font-size:.9375rem;font-weight:660;letter-spacing:-.005em;
  cursor:pointer;text-decoration:none;background:var(--sheet);color:var(--ink);
  transition:background .13s linear,color .13s linear,border-color .13s linear;
}
.btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.1;fill:none;flex:none;
  transition:transform .15s cubic-bezier(.16,1,.3,1)}
.btn:hover{background:var(--stock-2);color:var(--ink)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.btn-primary:hover{background:var(--tide-deep);border-color:var(--tide-deep);color:var(--sheet)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--sheet)}
.btn-notice{background:var(--notice);border-color:var(--notice);color:var(--sheet)}
.btn-notice:hover{background:var(--notice-deep);border-color:var(--notice-deep);color:var(--sheet)}
.btn-sm{padding:7px 13px;min-height:38px;font-size:.875rem;gap:7px}
.btn-sm svg{width:15px;height:15px}
.btn-lg{padding:14px 26px;min-height:54px;font-size:1rem}
.btn-block{display:flex;width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;background:transparent;
  border:1.5px solid var(--rule-ink);border-radius:var(--r-sm);cursor:pointer;color:var(--ink)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.1;fill:none}
.icon-btn:hover{background:var(--stock-2)}

.actions{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.inline-form{display:inline}

/* ---------- BADGES — the colour roles, made literal ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border:1px solid var(--rule-ink);border-radius:1px;
  font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--sheet);color:var(--ink);white-space:nowrap}
.badge-wrap,.thread-badges .badge{white-space:normal;text-align:center;justify-content:center;overflow-wrap:anywhere}

/* The four roles, and nothing else. The old-world aliases (badge-green/amber/blue/clay/
   grey) are deliberately gone: while they existed, call sites kept picking a colour by
   its dead name, and a badge would say LAND — settled, nothing owed — about a room rep.
   Every badge now has to name the role it means. */
/* tide: time is running, someone owes you something */
.badge-tide{background:var(--tide-field);color:var(--tide-deep);border-color:var(--tide)}
/* notice: a window is closing on you */
.badge-notice{background:var(--notice-field);color:var(--notice-deep);border-color:var(--notice)}
/* land: settled, nothing owed */
.badge-land{background:var(--land);color:var(--land-ink);border-color:var(--land-ink)}
/* ink: a plain recorded fact */
.badge-ink{background:var(--stock-2);color:var(--ink-2);border-color:var(--rule-2)}

/* ---------- NOTICES ----------
   A chart annotates in the margin; it does not shout. Notices are a
   ruled band with a role colour on the left edge only. */
.notice{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;
  border:1px solid var(--rule-ink);border-radius:var(--r-sm);background:var(--sheet)}
.notice svg{width:19px;height:19px;flex:none;margin-top:2px;stroke-width:2;fill:none;stroke:var(--ink-2)}
.notice p{font-size:.9375rem;color:var(--ink-2);max-width:none;overflow-wrap:anywhere}
.notice b{color:var(--ink)}
.notice-info{background:var(--tide-field)}
.notice-info svg{stroke:var(--tide)}
.notice-warn{background:var(--tide-field)}
.notice-warn svg{stroke:var(--tide)}
.notice-green{background:var(--land)}
.notice-green svg{stroke:var(--land-ink)}
.notice-green p,.notice-green b{color:var(--land-ink)}
.notice-danger{background:var(--notice-field);border-color:var(--notice)}
.notice-danger svg{stroke:var(--notice)}
.notice-danger p,.notice-danger b{color:var(--notice-deep)}

.text-danger{color:var(--notice-deep);font-size:.875rem;font-weight:600}

/* A button that belongs inside a sentence. It is a real <button> because it performs
   an action rather than navigating, but it must not look like a control sitting in
   the middle of prose. WCAG 2.5.8's inline exception covers it for the same reason
   it covers a link in a sentence. */
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--tide);font-weight:640;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.linkish:hover{color:var(--tide-deep)}

/* ---------- CARDS ----------
   Kept as an API for existing views, but re-grounded: a card is a
   small plate. No shadow, no float, ruled like everything else. */
.card{background:var(--sheet);border:1px solid var(--rule-ink);border-radius:var(--r-sm);
  padding:clamp(18px,2.6vw,26px)}
.card-sm{padding:16px 18px}
.card-link{display:block;text-decoration:none;color:inherit;
  transition:background .13s linear,border-color .13s linear}
.card-link:hover{background:var(--tide-field);border-color:var(--tide);color:inherit}

.next-step{border:1.5px solid var(--rule-ink);border-radius:var(--r-sm);background:var(--tide-wash);
  padding:clamp(20px,3vw,28px)}
.next-step .label{display:block;color:var(--tide);margin-bottom:9px}

/* ---------- FORMS ---------- */
.field{margin-bottom:20px}
.field:last-child{margin-bottom:0}
label{display:block;font-weight:640;font-size:.9375rem;margin-bottom:6px;color:var(--ink)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=number],
input[type=search],textarea,select{
  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:var(--r-sm);
  font-variant-numeric:tabular-nums;
}
textarea{min-height:120px;resize:vertical;line-height:1.55}
select{appearance:none;background-image:var(--chevron);background-repeat:no-repeat;
  background-position:right 12px center;background-size:19px;padding-right:42px}
/* A search box's clear button in the site's own ink, not the browser's accent blue. */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  margin-left:6px;cursor:pointer;background-color:var(--ink-2);
  -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.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%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.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}
input[type=search]::-webkit-search-cancel-button:hover{background-color:var(--ink)}
/* Where a search box has its own labelled clear button (the FAQ's "Clear search", the school
   picker's "Clear"), the browser's × beside it was a second one doing the same job. */
.faq-search input[type=search]::-webkit-search-cancel-button,
[data-school-picker-query]::-webkit-search-cancel-button{display:none}
input:focus,textarea:focus,select:focus{border-color:var(--tide);outline:2.5px solid var(--focus);outline-offset:1px}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
.hint{font-size:.8125rem;color:var(--ink-3);margin-top:5px;max-width:62ch}

/* A numbered question, so "three questions" is countable at a glance rather than
   a claim the parent has to take on faith while scrolling. */
.q-n{display:inline-grid;place-items:center;width:21px;height:21px;flex:none;
  margin-right:7px;vertical-align:-3px;
  border:1.5px solid var(--rule-ink);border-radius:1px;background:var(--sheet);
  font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums}
/* "optional" said once, quietly, in the label where the decision is made. */
.opt{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;font-weight:680;
  color:var(--ink-3);margin-left:6px}

.form-check{display:flex;gap:10px;align-items:flex-start}
.form-check-input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--tide)}
.form-check-label{font-weight:500;font-size:.9375rem;margin:0;color:var(--ink-2)}

fieldset{border:0}
legend{font-weight:660;margin-bottom:9px}

/* ---------- LAYOUT PRIMITIVES ---------- */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-side{grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
/* minmax(0,1fr), not 1fr: a plain 1fr won't shrink below its longest unbroken line, so one
   60-letter name in a room's member list pushed the whole page sideways on a phone. */
@media (max-width:860px){.grid-2,.grid-3,.grid-side{grid-template-columns:minmax(0,1fr)}}

.stack > * + *{margin-top:16px}
.stack-sm > * + *{margin-top:9px}
.row-between{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.flex{display:flex;gap:12px;align-items:center}
.flex-col{display:flex;flex-direction:column;gap:12px}
.wrap-gap{display:flex;gap:10px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.nowrap{white-space:nowrap}
.tc{text-align:center}.tr{text-align:right}

.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:36px}

.divider{border:0;border-top:1px solid var(--rule);margin:22px 0}

.h-lg{font-size:1.3125rem;font-weight:660;letter-spacing:-.02em;line-height:1.2}
.h-md{font-size:1.125rem;font-weight:660;letter-spacing:-.015em;line-height:1.25}
.h-sm{font-size:1rem;font-weight:660;letter-spacing:-.01em}
.h-xs{font-size:.875rem;font-weight:660}

/* The one place a number is allowed to outrank a heading: a chart's key figure. */
.figure{font-size:2.7rem;font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:6px;
  font-variant-numeric:tabular-nums}

.lede{font-size:clamp(1.0625rem,1.6vw,1.22rem);color:var(--ink-2);line-height:1.55;max-width:60ch}
.muted{color:var(--ink-2)}
.small{font-size:.875rem}
.small.muted,.muted.small{color:var(--ink-3)}

/* The page head carries the chart border's graduations: minute ticks hanging above
   the main rule, a taller mark at each degree. Furniture, drawn once, everywhere. */
.page-head{margin-bottom:clamp(24px,3.5vw,38px);padding-bottom:clamp(18px,2.5vw,24px);
  border-bottom:1.5px solid var(--rule-ink);position:relative}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;
  background:
    repeating-linear-gradient(90deg,var(--rule-2) 0 1px,transparent 1px 18px) left bottom/100% 5px no-repeat,
    repeating-linear-gradient(90deg,var(--rule-ink) 0 1px,transparent 1px 90px) left bottom/100% 8px no-repeat}
/* Every section head carries the sheet's scale bar: a short tide segment laid over
   the start of its rule. The recurring mark that keys the page to the chart. */
.section-head{margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--rule);
  position:relative}
.section-head::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2.5px;
  background:var(--tide)}

.breadcrumb{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:.8125rem;
  color:var(--ink-3);margin-bottom:14px;letter-spacing:.02em}
/* Breadcrumb links are standalone targets, not words in a sentence, so WCAG 2.5.8's
   inline exception does not cover them — they get a real 24px box. */
.breadcrumb a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;
  min-height:24px;padding:0 4px;margin:0 -4px;border-radius:1px}
.breadcrumb a:hover{color:var(--tide);text-decoration:underline}

/* A link that is the whole paragraph or list item is a standalone target too. A link
   inside a sentence is exempt and is deliberately left alone here.
   Links that are already blocks — a card, a button, a list box's option (the explorer's
   school results) — must be excluded: making them inline-flex lays their stacked contents
   out in a row and blows the min-content width of every list they sit in, and an option
   shrank to its words, so its "Choose" zigzagged down the list. They clear 24px on their own.
   The option shares the button's :not(), so the rule weighs what it always did: components
   that restyle their own links by matching it exactly (the settings rows, search results,
   the nearby schools) still come later and win. A third :not() outweighed them all. As flex boxes they drop the
   spaces between their parts ("Official page→"), so a small gap stands in for them, at
   no specificity, so a component that spaces its own link (the explorer's list) keeps it. */
p > a:only-child:not(.card-link):not(.btn),
li > a:only-child:not(.card-link):not(.btn, [role="option"]){display:inline-flex;align-items:center;min-height:24px}
:where(p, li) > a:where(:only-child:not(.card-link):not(.btn)){column-gap:.3em}

.step-num{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;
  border:1.5px solid var(--rule-ink);border-radius:1px;background:var(--sheet);
  font-weight:700;font-size:.875rem}

/* Q&A / reading structure — ruled entries, the way a chart's notes page reads */
.qa > article{padding:22px 0;border-top:1px solid var(--rule)}
.qa > article:first-child{border-top:0;padding-top:0}
.qa h2{font-size:1.125rem;letter-spacing:-.016em;margin-bottom:7px}
.qa p{color:var(--ink-2)}

/* A disclosure is a standalone control, so it carries a real target box even when its
   label is set at chart-label size — and it opens with the same +/− the timetable uses.
   The UA's default triangle belongs to no world; leaving it in one place and not another
   is how a sheet starts looking assembled from parts. */
details > summary{cursor:pointer;min-height:26px;display:flex;align-items:center;gap:7px;
  list-style:none}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"+";font-weight:700;font-size:1rem;line-height:1;width:13px;
  flex:none;display:inline-grid;place-items:center;color:var(--tide)}
details[open] > summary::before{content:"\2212"}

/* An aside the reader opens themselves, at the moment the question occurs to them.
   The product had a good FAQ and a good How-it-works and zero help anywhere a parent
   was actually stuck — which is the same as no help, because nobody leaves a form
   they are halfway through to go and read a page. */
.aside-help{margin-top:8px}
.aside-help > summary{font-size:.8125rem;font-weight:640;color:var(--tide);padding:4px 2px}
.aside-help > summary:hover{color:var(--tide-deep)}
/* A bounded annotation on tide-wash, matching the notice band — not a thick coloured
   left rule, which belongs to a different product's callout grammar and which this
   world already refuses. */
.aside-help > div{margin-top:7px;padding:11px 13px;border:1px solid var(--rule);
  background:var(--tide-wash);font-size:.875rem;color:var(--ink-2);border-radius:var(--r-sm)}
.aside-help p + p{margin-top:7px}
.aside-help b{color:var(--ink)}

/* What has already been written up and frozen, stated where a parent is deciding whether
   to add their name. Land, not tide: a frozen submission is a record of what happened,
   not something still owed. Same bounded-band grammar as the annotation above. */
.frozen-note{padding:10px 13px;border:1px solid var(--rule);background:var(--land-wash);
  border-radius:var(--r-sm);font-size:.8125rem;line-height:1.5;color:var(--land-ink)}
.frozen-note b{color:var(--land-ink)}

/* The action a reading page implies. A page of answers that ends in nothing but more
   reading is a dead end; each answer now names the thing it just made possible. */
.so{display:flex;align-items:baseline;gap:8px;margin-top:11px;padding-top:9px;
  border-top:1px solid var(--rule);font-size:.875rem;max-width:none}
.so > span{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;font-weight:680;
  color:var(--ink-3);flex:none;padding-top:3px}
/* A standalone target, not a word in a sentence — WCAG 2.5.8's inline exception does
   not cover it, so it carries a real 24px box. */
.so a{font-weight:640;display:inline-flex;align-items:center;min-height:24px;
  padding:0 4px;margin:0 -4px;border-radius:1px}

/* Definition rows — label/value pairs read as a chart's data block */
.data:not(table){display:grid;gap:0;border:1px solid var(--rule-ink);border-radius:var(--r-sm);background:var(--sheet)}
table.data{display:table;border:1px solid var(--rule-ink);border-radius:var(--r-sm);background:var(--sheet)}
.data > div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;padding:11px 15px;
  border-bottom:1px solid var(--rule)}
.data > div:last-child{border-bottom:0}
.data dt,.data > div > span:first-child{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:680;color:var(--ink-3);padding-top:2px}
@media (max-width:560px){.data > div{grid-template-columns:minmax(0,1fr);gap:3px}}

/* ---------- TIMELINE ---------- */
.timeline{list-style:none;padding:0;margin:0}
.tl-item{display:flex;gap:14px;padding-bottom:20px;position:relative}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:14px;top:30px;bottom:0;
  width:1px;background:var(--rule)}
.tl-dot{flex:none;width:29px;height:29px;border:1.5px solid var(--rule-ink);border-radius:1px;
  background:var(--sheet);display:grid;place-items:center;z-index:1}
.tl-dot svg{width:15px;height:15px;stroke:var(--ink);stroke-width:2.1;fill:none}
.tl-body{padding-top:3px;min-width:0}
.tl-body b{font-weight:660;display:block;letter-spacing:-.01em}
.tl-body p{color:var(--ink-2);font-size:.9375rem;margin-top:2px}
.user-copy{white-space:pre-wrap;overflow-wrap:anywhere}
/* Written right to left (site.js marks it), a post kept to a reading width sits against the right
   edge, under its title, rather than the left. */
.user-copy[dir=rtl]{margin-left:auto}

/* ---------- THE CARRY ----------
   The room's two lists are one process, and two stacked headings never say so. This is
   the transfer drawn between them: the same notation a chart uses when a quantity moves
   from one column to the next. It sits in the flow, not in a disclosure, because a parent
   deciding whether asking is worth it needs to see where asking can lead. */
.carry{border-top:1.5px solid var(--rule-ink);border-bottom:1.5px solid var(--rule-ink);
  background:var(--sheet);padding:16px 18px;margin:6px 0;
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
/* The arrow is drawn, not typed: a stem that starts in the questions above and turns
   into the requests below, so the eye follows the movement before reading a word. */
.carry-mark{width:26px;height:44px;flex:none;position:relative;margin-top:2px}
.carry-mark::before{content:"";position:absolute;left:11px;top:0;width:1.5px;height:26px;
  background:var(--rule-ink)}
.carry-mark::after{content:"";position:absolute;left:5px;top:24px;width:13px;height:13px;
  border-right:1.5px solid var(--tide);border-bottom:1.5px solid var(--tide);
  transform:rotate(45deg)}
.carry b{display:block;font-size:1rem;letter-spacing:-.01em}
.carry p{color:var(--ink-2);font-size:.875rem;margin-top:3px;max-width:64ch}
.carry-next{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);
  font-size:.875rem}
.carry-next a{color:var(--tide);font-weight:640}
@media (max-width:560px){
  .carry{grid-template-columns:minmax(0,1fr);gap:8px}
  .carry-mark{height:26px;width:44px}
  .carry-mark::before{left:0;top:12px;width:26px;height:1.5px}
  .carry-mark::after{left:22px;top:6px}
}

/* The roll — the room's people, as a chart lists its observers. Initial marks, not
   table rows: a parent scanning this should see a group, then read the names. */
.roll{list-style:none;padding:0;margin:0}
.roll li{display:flex;align-items:center;gap:11px;padding:8px 0;
  border-bottom:1px solid var(--rule)}
.roll li:last-child{border-bottom:0}
.roll .initial{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;
  border:1.5px solid var(--rule-ink);border-radius:1px;background:var(--sheet);
  font-size:.8125rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.roll .initial.is-rep{background:var(--land);border-color:var(--land-ink);color:var(--land-ink)}
.roll .initial.is-you{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.roll .who{min-width:0;flex:1}
.roll .who b{display:block;font-size:.9375rem;font-weight:640;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roll .who span{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:640;color:var(--ink-3)}

/* ---------- PARENT ROOM FEED ----------
   Facebook's useful grammar — composer, actor row, activity, actions and inline replies —
   redrawn as the Published Chart. These are ruled records, not floating social cards. */
.community-room{--feed-avatar:38px}
.community-room-head h1{font-size:clamp(2rem,3vw,3.1rem);margin-top:4px}
.room-member-count{display:inline-flex;align-items:baseline;gap:6px;padding:7px 10px;
  border:1px solid var(--rule);background:var(--stock);font-size:.8125rem;color:var(--ink-2)}
.room-member-count b{font-size:1.125rem;color:var(--ink)}
.community-room-grid{grid-template-columns:minmax(0,1fr) 310px;gap:24px}
.community-feed{min-width:0}
.room-rail{position:sticky;top:84px}

.room-avatar{width:var(--feed-avatar);height:var(--feed-avatar);display:inline-grid;place-items:center;
  flex:none;border:1.5px solid var(--rule-ink);border-radius:1px;background:var(--sheet);
  color:var(--ink);font-size:.8125rem;font-weight:720;line-height:1}
.room-avatar.is-you{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.room-avatar-sm{width:30px;height:30px;font-size:.6875rem}

.feed-composer{border:1px solid var(--rule-ink);border-radius:var(--r-sm);background:var(--sheet);
  margin-bottom:24px;scroll-margin-top:84px}
.feed-composer > summary{min-height:76px;padding:15px 17px;gap:12px;list-style:none;
  transition:background .13s linear}
.feed-composer > summary::before{content:none;display:none}
.feed-composer > summary:hover{background:var(--tide-wash)}
.feed-composer[open] > summary{border-bottom:1px solid var(--rule);background:var(--tide-wash)}
.composer-prompt{min-width:0;flex:1;display:flex;flex-direction:column}
.composer-prompt b{font-size:1rem;color:var(--ink)}
.composer-prompt span{font-size:.875rem;color:var(--ink-3)}
.composer-open-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:680;
  color:var(--tide);padding:6px 9px;border:1px solid var(--tide)}
.composer-form{padding:18px}
.composer-form .field{margin-bottom:16px}
.composer-form textarea{min-height:112px}
.composer-field-foot{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.composer-settings{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:9px 0;margin:4px 0 16px}
.composer-settings > summary{color:var(--tide);font-size:.875rem;font-weight:640;padding:4px 0}
.composer-settings .hint{padding-left:34px}
.composer-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.composer-request-link{font-size:.8125rem;color:var(--ink-3);margin-left:auto}
.composer-request-link a{font-weight:640}
.draft-note{font-size:.8125rem;color:var(--ink-2);margin-top:12px;padding-top:10px;
  border-top:1px solid var(--rule)}

/* With large text the count drops under the heading rather than pushing the page sideways. */
.feed-heading{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:2px 16px;
  padding:0 2px 10px;margin-bottom:12px;border-bottom:1.5px solid var(--rule-ink)}
.feed-heading h2{margin-top:3px}
.feed-count{font-size:.8125rem;color:var(--ink-3)}
.feed-empty{padding:42px 24px}
.thread-list{list-style:none;padding:0;margin:0}
.thread-list > li + li{margin-top:14px}
.thread-card{background:var(--sheet);border:1px solid var(--rule-ink);border-radius:var(--r-sm);
  scroll-margin-top:82px;overflow:clip}
.thread-card:target{outline:2px solid var(--tide);outline-offset:2px}
.thread-head{display:flex;align-items:flex-start;gap:11px;padding:15px 16px 10px}
.thread-byline{min-width:0;flex:1;padding-top:1px}
.thread-byline b{display:block;font-size:.9375rem;line-height:1.35;overflow-wrap:anywhere}
.thread-byline > span{display:block;font-size:.75rem;color:var(--ink-3);line-height:1.45}
.thread-badges{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:45%}
.thread-content{padding:0 16px 14px 65px}
.thread-content h3{font-size:1.2rem;margin:0;overflow-wrap:anywhere}
.thread-content h3 a{color:var(--ink);text-decoration:none}
.thread-content h3 a:hover{color:var(--tide);text-decoration:underline}
.thread-copy{margin-top:7px;color:var(--ink-2);font-size:.96875rem;line-height:1.58;
  white-space:pre-line;overflow-wrap:anywhere;max-width:none}
.thread-outcome{margin-top:12px;padding:10px 12px;border:1px solid var(--rule);
  background:var(--tide-wash);font-size:.875rem;color:var(--ink-2);max-width:none}
.thread-outcome span{display:block;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tide-deep);font-weight:680;margin-bottom:3px}
.thread-review-note{margin:0 16px 12px 65px;padding:9px 11px;border:1px solid var(--rule);
  background:var(--tide-wash);font-size:.8125rem;color:var(--ink-2)}
.thread-review-note b{color:var(--ink)}
.thread-stats{display:flex;justify-content:space-between;gap:16px;min-height:37px;
  padding:8px 16px;border-top:1px solid var(--rule);font-size:.8125rem;color:var(--ink-3)}

.comment-preview{padding:12px 16px 4px;border-top:1px solid var(--rule);background:var(--stock)}
.previous-replies{display:inline-flex;align-items:center;min-height:32px;margin-bottom:7px;
  font-size:.8125rem;font-weight:640}
.comment-row{display:flex;align-items:flex-start;gap:9px;margin-bottom:10px}
.comment-body{min-width:0;flex:1;padding:8px 10px;border:1px solid var(--rule);background:var(--sheet)}
.comment-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;line-height:1.35}
.comment-author-line{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.comment-meta b{font-size:.8125rem;overflow-wrap:anywhere}
.comment-author-line .badge{font-size:.6875rem;padding:2px 6px}
.comment-meta time{font-size:.6875rem;color:var(--ink-3);white-space:nowrap}
.comment-body p{font-size:.875rem;color:var(--ink-2);line-height:1.5;margin-top:2px;
  white-space:pre-line;overflow-wrap:anywhere;max-width:none}
.comment-state{display:block;margin-top:4px;font-size:.6875rem;color:var(--tide-deep);font-weight:640}

.thread-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:var(--sheet)}
.thread-actions.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.thread-action-form{min-width:0}
.thread-action{width:100%;min-height:44px;padding:8px 10px;display:flex;align-items:center;
  justify-content:center;text-align:center;border:0;border-right:1px solid var(--rule);border-radius:0;
  background:transparent;color:var(--ink-2);font:inherit;font-size:.8125rem;font-weight:650;
  text-decoration:none;cursor:pointer;line-height:1.25;transition:background .13s linear,color .13s linear}
.thread-actions > :last-child{border-right:0}
.thread-action:hover{background:var(--tide-wash);color:var(--tide-deep)}
.thread-action.is-active{background:var(--tide-field);color:var(--tide-deep)}
.thread-action.is-disabled{color:var(--ink-3);cursor:default}
.thread-action.is-disabled:hover{background:transparent;color:var(--ink-3)}
.thread-action:disabled{cursor:wait;color:var(--ink-3)}
.inline-reply{display:flex;align-items:flex-start;gap:9px;padding:12px 16px;background:var(--sheet)}
.inline-reply-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;min-width:0;flex:1}
.inline-reply-form textarea{min-height:44px;height:44px;max-height:180px;padding:9px 11px;
  font-size:.875rem;line-height:1.45;grid-column:1;grid-row:1}
.inline-reply-form .btn{flex:none;min-height:44px;grid-column:2;grid-row:1}
.reply-review-note{grid-column:1/-1;padding:7px 9px;border-left:2px solid var(--tide);
  background:var(--tide-wash);color:var(--ink-2);font-size:.75rem;line-height:1.45;max-width:none}
.inline-reply-form .draft-note{grid-column:1/-1;margin-top:0;width:100%}
.feed-pagination{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
  margin-top:18px}
.feed-pagination > :last-child{justify-self:end}
.feed-pagination > span{font-size:.8125rem;color:var(--ink-3)}
.admission-row{padding-top:14px;margin-top:14px;border-top:1px solid var(--rule)}
#discussion,#support{scroll-margin-top:82px}

@media (max-width:860px){
  .community-room-grid{grid-template-columns:minmax(0,1fr)}
  .room-rail{position:static;margin-top:8px}
}
@media (max-width:560px){
  .form-check{min-height:44px;align-items:center}
  .aside-help > summary{display:flex;align-items:center;min-height:44px}
  .community-room{--feed-avatar:34px}
  .community-room-head .row-between{align-items:flex-start}
  .room-member-count{width:100%;justify-content:center}
  .feed-composer > summary{min-height:68px;padding:13px}
  .composer-open-label{display:none}
  .composer-form{padding:14px 13px}
  .composer-field-foot{display:block}
  .composer-field-foot .nowrap{display:block;margin-top:3px}
  .composer-actions{align-items:stretch}
  .composer-actions .btn{flex:1}
  .composer-request-link{width:100%;margin:4px 0 0}
  .thread-head{padding:13px 13px 9px}
  .thread-badges{max-width:38%}
  .thread-content{padding:0 13px 12px}
  .thread-review-note{margin:0 13px 10px}
  .thread-content h3{font-size:1.1rem}
  .thread-stats{padding:8px 13px;gap:8px;flex-wrap:wrap}
  .comment-preview{padding:10px 13px 2px}
  .thread-action{padding-inline:6px;font-size:.75rem}
  .btn-sm{min-height:44px}
  .previous-replies{min-height:44px}
  .inline-reply{padding:11px 13px}
  .inline-reply-form textarea,.inline-reply-form .btn{min-height:44px}
  .feed-pagination{grid-template-columns:1fr 1fr}
  .feed-pagination > span{grid-column:1/-1;grid-row:1;text-align:center}
}
@media (max-width:360px){
  .thread-actions{grid-template-columns:minmax(0,1fr)}
  .thread-action{border-right:0;border-bottom:1px solid var(--rule)}
  .thread-actions > :last-child{border-bottom:0}
  .inline-reply{align-items:flex-start}
  .inline-reply > .room-avatar{display:none}
  .inline-reply-form{grid-template-columns:minmax(0,1fr)}
  .inline-reply-form .btn{grid-column:1;grid-row:auto;justify-self:stretch}
}

/* ---------- EMPTY STATE ----------
   Absence already has a notation here: the hatch the timetable draws where a body
   publishes no time limit. An empty record is the same statement — a real region of
   the sheet with nothing plotted in it yet — so it gets the same fill and the same
   solid neat-line, not a dashed drop-zone borrowed from some other product. */
.empty{border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:repeating-linear-gradient(135deg,var(--stock-2) 0 6px,var(--sheet) 6px 12px);
  padding:44px 26px;text-align:center}
.empty svg{width:34px;height:34px;stroke:var(--ink-3);stroke-width:1.7;fill:none;margin:0 auto 14px}
.empty h3{margin-bottom:6px}
.empty p{color:var(--ink-2);margin-inline:auto}

/* ---------- LETTER PREVIEW ---------- */
.letter-preview{background:var(--sheet);border:1px solid var(--rule-ink);border-radius:var(--r-sm);
  padding:clamp(20px,3vw,32px);white-space:pre-wrap;font-size:1rem;line-height:1.72;
  color:var(--ink);max-width:74ch;font-variant-numeric:normal;overflow-wrap:anywhere}

/* ---------- NAV ----------
   The chart's top margin: title on the left, the sheet's controls on
   the right, one firm rule under the whole thing. */
.nav{position:sticky;top:0;z-index:40;background:var(--stock);border-bottom:1.5px solid var(--rule-ink)}
/* On a short screen (a phone held sideways is 390px tall) the pinned header would take a fifth
   of it, and about half of what's left with the keyboard up. There it slides away while reading
   down and comes back on any scroll up (site.js); never while it has focus. */
@media (max-height:500px){
  .nav{transition:transform .2s ease}
  .nav.is-tucked:not(:focus-within){transform:translateY(-100%)}
}
@media (max-height:500px) and (prefers-reduced-motion:reduce){.nav{transition:none}}
.nav-in{display:flex;align-items:center;gap:20px;min-height:64px;padding-block:9px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;background:var(--ink);border-radius:1px}
.brand-mark svg{width:19px;height:19px;stroke:var(--stock);stroke-width:2.1;fill:none}
.brand-text{font-weight:700;font-size:1.0625rem;letter-spacing:-.028em}

.nav-links{display:flex;gap:4px;margin-left:14px}
.nav-links a{padding:9px 12px;min-height:40px;display:inline-flex;align-items:center;
  text-decoration:none;color:var(--ink-2);font-size:.9375rem;font-weight:600;border-radius:1px;
  position:relative;transition:background .13s linear,color .13s linear}
.nav-links a:hover{background:var(--stock-2);color:var(--ink)}
/* The current page's mark is drawn, not painted on: a real element so the pen can
   lay it down left-to-right on arrival, the way every line in this world arrives. */
.nav-links a[aria-current]{color:var(--ink)}
.nav-links a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2.5px;background:var(--notice);transform-origin:left}

.nav-user{margin-left:auto;display:flex;align-items:center;gap:10px}
/* "Hi, Sam" and "Sign in" are navigation, not prose — they get the same quiet target
   box as the other nav links rather than defaulting to an underlined body link. */
.nav-me{padding:9px 11px;min-height:40px;display:inline-flex;align-items:center;
  text-decoration:none;color:var(--ink-2);font-size:.9375rem;font-weight:600;border-radius:1px;
  max-width:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .13s linear,color .13s linear}
.nav-me:hover{background:var(--stock-2);color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:9px}
.nav-start{flex:none;white-space:nowrap}
.nav-start-short{display:none}
.menu-btn{display:none}
.mobile-menu{display:none}

@media (max-width:900px){
  .js .nav-links,.no-js .nav-links{display:none}
  .js .menu-btn{display:inline-grid}
  .mobile-menu.open,.no-js .mobile-menu{display:block;border-bottom:1.5px solid var(--rule-ink);
    background:var(--sheet);padding:10px 0 16px}
  /* The header is pinned, so a menu taller than the screen below it (a phone held sideways,
     or large text) would leave its last items, "Sign out" among them, where no scroll reaches.
     Open, it scrolls within itself instead, with a soft shadow at an edge that has more. */
  .js .mobile-menu.open{max-height:calc(100vh - 5rem);max-height:calc(100dvh - 5rem);overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(var(--sheet) 30%,transparent) center top/100% 40px no-repeat local,
      linear-gradient(transparent,var(--sheet) 70%) center bottom/100% 40px no-repeat local,
      radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.16),transparent) center top/100% 12px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.16),transparent) center bottom/100% 12px no-repeat scroll var(--sheet)}
  .mobile-menu a{display:block;padding:12px 0;min-height:46px;text-decoration:none;
    color:var(--ink);font-weight:600;border-bottom:1px solid var(--rule)}
  .mobile-menu a:last-child{border-bottom:0}
  /* Without scripts the menu can't fold, so it stays open at the top; the header then scrolls
     away with the page instead of pinning that open menu over two-thirds of a phone screen. */
  .no-js .nav{position:relative}
}
@media (max-width:560px){
  .brand-text{display:none}
  /* At this width the greeting is the first thing worth losing — the sign-out
     control and the primary action both have to survive on one line. */
  .nav-me{max-width:9ch}
}
/* "Your class" can read as though you already have one, so the full label stays down to
   360px, where it still fits beside the mark, the menu and "Sign in". */
@media (max-width:359px){
  .nav-start-long{display:none}
  .nav-start-short{display:inline}
}
/* Large text. A phone or browser set to bigger text grows the words but not the screen, so
   the header's own width decides. The name beside the mark goes first, as it does on a phone;
   then "Find your class" shortens to "Your class"; past that it moves into the menu, as its
   first item, and "Sign in" stays. The figures are the header's measured needs: about 175px of
   fixed parts (the mark, the gaps, the menu button) plus 8.25em of words with the full label
   or 6.3em with the short one, and 12.5em with the name too, inside the page's gutters. */
.nav{container:site-nav / inline-size}
.mobile-menu .menu-start{display:none}
@container site-nav (width < calc(250px + 12.5em)){
  .brand-text{display:none}
}
@container site-nav (width < calc(209px + 8.25em)){
  .nav-start-long{display:none}
  .nav-start-short{display:inline}
}
@container site-nav (width < calc(206px + 6.3em)){
  .nav-start{display:none}
  .mobile-menu .menu-start{display:block;color:var(--tide-deep);font-weight:700}
}

/* Section tabs — the sheet's own index strip, not a pill row. */
.tabs{display:flex;gap:0;border-bottom:1.5px solid var(--rule-ink);margin-bottom:clamp(20px,3vw,30px);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:11px 16px;min-height:46px;display:inline-flex;align-items:center;white-space:nowrap;
  text-decoration:none;color:var(--ink-2);font-weight:620;font-size:.9375rem;
  border:1px solid transparent;border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0;
  margin-bottom:-1.5px;transition:background .13s linear,color .13s linear}
.tabs a:hover{color:var(--ink);background:var(--stock-2)}
.tabs a.active{color:var(--ink);background:var(--sheet);border-color:var(--rule-ink);
  box-shadow:0 1.5px 0 var(--sheet)}

/* ---------- FOOTER ----------
   The shore. Every chart ends at land, and the sheet's bottom margin takes the
   buff wash — the settled ground under everything above it. The compass rose
   sits here too, drawn in the shore's own tones with north in tide. */
footer.site{border-top:1.5px solid var(--rule-ink);margin-top:64px;padding:40px 0 32px;
  background:var(--land-wash)}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-brand p{margin-top:10px;font-size:.875rem;color:var(--ink-3);max-width:34ch}
.foot-rose{width:88px;height:88px;margin-top:18px}
.foot-rose circle{fill:none;stroke:var(--land-2);stroke-width:1}
.foot-rose .r-maj{fill:var(--land-2)}
.foot-rose .r-min{fill:var(--land)}
.foot-rose .r-n{fill:var(--tide-field-2)}
.foot-links{display:flex;gap:44px;flex-wrap:wrap}
/* Footer column heads are h2 — they are top-level sections of the contentinfo
   landmark, and an h4 under an h2 left a level gap on every page for anyone
   navigating by heading. The chart-label size is the look, not the level. */
.foot-links h2{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--land-ink);
  margin-bottom:9px;font-weight:680}
.foot-links a{display:block;padding:4px 0;font-size:.875rem;color:var(--ink-2);text-decoration:none;
  transition:color .13s linear}
.foot-links a:hover{color:var(--tide);text-decoration:underline}
.foot-base{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:.8125rem;color:var(--ink-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- LANDING ----------
   The sheet head: claim on the left, the working instrument on the right. The
   instrument is the argument, so it gets real estate rather than a mock. */
/* Claim and actions on the left, the working instrument on the right, credentials as
   a footnote under the claim. Three children, two columns: the instrument spans both
   rows so it stays optically centred against the whole left stack. */
.sheet-head{display:grid;grid-template-columns:minmax(0,.88fr) minmax(540px,1.12fr);
  gap:clamp(24px,4vw,52px) clamp(24px,4vw,52px);align-items:start}
.sheet-head > .hero-claim{grid-column:1;grid-row:1}
.sheet-head > .hero-actions{grid-column:1;grid-row:2}
.sheet-head > .sheet-instrument{grid-column:2;grid-row:1 / span 3}
.sheet-head > .creds{grid-column:1;grid-row:3;align-self:end}
@media (max-width:900px){
  /* Stacked, the order that matters is claim → action → picture → proof. */
  .sheet-head{grid-template-columns:minmax(0,1fr);gap:26px}
  .sheet-head > .hero-claim{grid-column:1;grid-row:1}
  .sheet-head > .hero-actions{grid-column:1;grid-row:2}
  .sheet-head > .sheet-instrument{grid-column:1;grid-row:3}
  .sheet-head > .creds{grid-column:1;grid-row:4}
}

/* The route: a marked line, not three identical cards. Ownership of each mark is
   the information a stalled parent is missing — whose turn is it right now. */
.route{list-style:none;padding:0;margin:0;display:grid;gap:0;
  border:1px solid var(--rule-ink);border-radius:var(--r-sm);background:var(--sheet)}
.route > li{display:grid;grid-template-columns:38px minmax(0,1fr) 116px;gap:14px;align-items:start;
  padding:18px 18px;border-bottom:1px solid var(--rule)}
.route > li:last-child{border-bottom:0}
.route-n{grid-row:span 2;width:30px;height:30px;border:1.5px solid var(--rule-ink);border-radius:1px;
  display:grid;place-items:center;font-weight:700;font-size:.875rem;background:var(--sheet)}
.route b{font-size:1.0625rem;font-weight:660;letter-spacing:-.014em;align-self:center}
.route p{grid-column:2;color:var(--ink-2);font-size:.9375rem;margin-top:2px}
.route-owner{grid-row:1;grid-column:3;justify-self:end;font-size:.6875rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--rule-ink);
  border-radius:1px;white-space:nowrap}
.owner-you{background:var(--land);color:var(--land-ink);border-color:var(--land-ink)}
.owner-them{background:var(--tide-field);color:var(--tide-deep);border-color:var(--tide)}
@media (max-width:620px){
  .route > li{grid-template-columns:30px minmax(0,1fr);row-gap:4px}
  .route-owner{grid-row:3;grid-column:2;justify-self:start;margin-top:6px}
}

/* Credentials — the sheet's margin note about itself. Ruled, not boxed: it is a
   footnote to the claim above it, so it must not compete with the actions between
   them. Two columns on a phone so four facts cost one glance, not four lines. */
.creds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--rule);padding-top:12px}
.creds > div{padding-right:14px;border-right:1px solid var(--rule)}
.creds > div:last-child{border-right:0;padding-right:0}
.creds dt{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:680;color:var(--ink-3);margin-bottom:2px}
.creds dd{font-size:.875rem;font-weight:660;color:var(--ink);line-height:1.3}
@media (max-width:620px){
  .creds{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0}
  .creds > div:nth-child(2n){border-right:0;padding-right:0}
}

/* The index of sheets — proof by enumeration, in the chart's own index style. */
/* Fixed columns, not auto-fill: eight sheets divide evenly into 4 and 2, so the
   grid never leaves half a row of empty cells showing the rule colour through. */
.index-grid{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  border:1px solid var(--rule-ink);border-radius:var(--r-sm);overflow:hidden;background:var(--rule)}
.index-grid li{background:var(--sheet)}
.index-grid a{display:flex;align-items:baseline;gap:9px;padding:13px 15px;text-decoration:none;
  color:var(--ink);min-height:48px;transition:background .13s linear}
.index-grid a:hover{background:var(--tide-field)}
.index-grid b{font-size:1rem;font-weight:700;letter-spacing:-.02em;min-width:2.6em;
  transition:color .13s linear}
.index-grid a:hover b{color:var(--tide-deep)}
.index-grid span{font-size:.8125rem;color:var(--ink-2)}
@media (max-width:720px){.index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- MOTION ----------
   One gesture, conjugated: the pen laying a line onto the sheet. The plot's fill is
   the focal moment; every other motion is the same hand at smaller scale — a bar laid
   in, an underline drawn, a mark placed, a disclosure unfolding like a margin note.
   Nothing bounces, nothing floats, nothing loops. All of it inside the preference gate;
   the printed sheet holds perfectly still for anyone who asks it to. */
@media (prefers-reduced-motion:no-preference){
  /* the focal moment — the reader's own position, drawn in */
  .plot-fill{animation:lay-line .85s cubic-bezier(.16,1,.3,1) both}
  .plot-now{animation:place-mark .5s cubic-bezier(.16,1,.3,1) .5s both}

  /* the timetable's published spans lay in one after another, so the eye does the
     comparison the component exists for: watching short bars stop while long ones
     keep going. The stagger is capped — a ladder, not a parade. */
  .tt-bar i{animation:lay-line .6s cubic-bezier(.16,1,.3,1) both}
  .tt-row:nth-child(3) .tt-bar i{animation-delay:.08s}
  .tt-row:nth-child(4) .tt-bar i{animation-delay:.16s}
  .tt-row:nth-child(5) .tt-bar i{animation-delay:.24s}
  .tt-row:nth-child(6) .tt-bar i{animation-delay:.32s}
  .tt-row:nth-child(n+7) .tt-bar i{animation-delay:.4s}

  /* the current page's mark is drawn left to right on arrival */
  .nav-links a[aria-current]::after{animation:draw-under .35s cubic-bezier(.16,1,.3,1) both}

  /* the carry's mark takes its place between the two lists */
  .carry-mark{animation:take-position .45s cubic-bezier(.16,1,.3,1) both}

  /* disclosures unfold like a margin note being opened, not a panel arriving */
  details[open] > summary ~ *{animation:unfold .2s ease-out}
  .mobile-menu.open{animation:unfold .18s ease-out}

  /* a redirect's flash message is an annotation added to the sheet */
  [role="status"] .notice{animation:annotate .3s cubic-bezier(.16,1,.3,1)}

  /* feedback: the landing CTA's arrow leans into the click it is asking for */
  .btn-lg:hover svg{transform:translateX(2px)}

  @keyframes lay-line{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes place-mark{from{opacity:0;transform:translateX(-50%) translateY(-5px)}
    to{opacity:1;transform:translateX(-50%) translateY(0)}}
  @keyframes draw-under{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes take-position{from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:translateY(0)}}
  @keyframes unfold{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
  @keyframes annotate{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
}

/* ---------- PRINT ----------
   The product's whole argument is that this is a printable record. */
@media print{
  .nav,footer.site,.no-print,.skip{display:none !important}
  body{background:#fff;color:#000;font-size:11pt;background-image:none}
  .plate,.card,.table-wrap,.timetable,.title-block{border-color:#000;box-shadow:none;background:#fff}
  a{color:#000;text-decoration:none}
}

/* ---------- FORCED COLORS ---------- */
@media (forced-colors:active){
  .plate,.card,.notice,.badge,.timetable,.tt-num,.tl-dot{border:1px solid CanvasText}
  .plot-line,.plot-fill,.plot-cap{background:CanvasText}
  .btn{border:1px solid ButtonText}
  /* A button drawn as a link reads as one: the system's link colour, not its button text. */
  button.linkish{color:LinkText}
}

/* ---------- THE LOCAL SCHOOL ATLAS ----------
   One instrument, one direction: official school search establishes the anchor;
   the plot and distance ledger show local context; the route leaves from that same
   anchor. Google is an optional selected-profile layer, never the directory or rank. */
.school-atlas{position:relative;display:block;overflow:visible;padding:20px;scroll-margin-top:84px}
.atlas-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.atlas-head h2{font-size:1.3125rem;margin-top:5px}
.atlas-head p{max-width:50ch;margin-top:6px;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.atlas-source-mark{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 7px;
  border:1px solid var(--rule-2);background:var(--sheet);white-space:nowrap;
  color:var(--ink-2);font-size:.6875rem;font-weight:680;letter-spacing:.07em;text-transform:uppercase}
.atlas-source-mark > span{font-size:1rem;color:var(--tide)}

.atlas-search{position:relative;z-index:4;margin-top:16px}
.atlas-search > label{display:block;margin-bottom:5px;font-size:.6875rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}
.atlas-search-control{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;
  min-height:50px;border:1.5px solid var(--rule-ink);background:var(--sheet)}
.atlas-search-control > svg{width:19px;height:19px;margin-left:12px;color:var(--ink-2)}
.atlas-search-control input{width:100%;min-width:0;height:48px;padding:0 10px;border:0;background:transparent;
  color:var(--ink);font:inherit;font-size:1rem;outline:0}
.atlas-search-control input::placeholder{color:var(--ink-3);opacity:1}
.atlas-search-control:focus-within{box-shadow:0 0 0 2px var(--stock),0 0 0 4px var(--focus)}
.atlas-search-submit{align-self:stretch;min-width:66px;border:0;border-left:1px solid var(--rule-ink);
  background:var(--ink);color:var(--sheet);font:inherit;font-size:.8125rem;font-weight:700;cursor:pointer}
.atlas-search-submit:hover{background:var(--tide-deep)}
.atlas-location{display:flex;align-items:center;gap:7px;min-height:28px;margin-top:4px;
  color:var(--ink-2);font-size:.75rem;line-height:1.35}
.atlas-location svg{flex:0 0 auto;width:16px;height:16px}
.atlas-location strong{color:var(--tide-deep);font-weight:700}
.atlas-search-results{position:absolute;left:0;right:0;top:78px;z-index:8;list-style:none;
  border:1.5px solid var(--rule-ink);background:var(--sheet);
  box-shadow:0 6px 0 color-mix(in srgb,var(--ink) 12%,transparent)}
.atlas-search-results li + li{border-top:1px solid var(--rule)}
.atlas-search-results a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:54px;padding:8px 11px;color:var(--ink);text-decoration:none}
.atlas-search-results a:hover,.atlas-search-results a:focus-visible,
.atlas-search-results a[aria-selected="true"]{background:var(--tide-field)}
.atlas-search-results a > span:first-child{display:grid;min-width:0}
.atlas-search-results strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem}
.atlas-search-results small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3);font-size:.75rem}
.atlas-search-results a > span:last-child{white-space:nowrap;color:var(--tide);font-size:.75rem;font-weight:700}
.atlas-no-results{margin-top:6px;color:var(--ink-2);font-size:.75rem}

.atlas-workbench{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(240px,.88fr);
  margin-top:12px;border:1.5px solid var(--rule-ink);background:var(--sheet)}
.atlas-plot-shell{position:relative;min-width:0;min-height:430px;overflow:hidden;
  border-right:1px solid var(--rule-ink);background:var(--tide-wash);touch-action:pan-y pinch-zoom}
.atlas-workbench.is-empty .atlas-plot-shell{min-height:300px}
.atlas-schematic,.atlas-google-map{position:absolute;inset:0;width:100%;height:100%}
.atlas-schematic{overflow:hidden;background-color:var(--tide-wash);
  background-image:
    linear-gradient(var(--graticule) 1px,transparent 1px),
    linear-gradient(90deg,var(--graticule) 1px,transparent 1px);
  background-size:36px 36px}
.atlas-schematic::before{content:"";position:absolute;inset:9%;background:
  linear-gradient(142deg,transparent 0 24%,color-mix(in srgb,var(--land-2) 58%,transparent) 24.2% 34%,transparent 34.2% 58%,color-mix(in srgb,var(--land-2) 42%,transparent) 58.2% 73%,transparent 73.2%);
  clip-path:polygon(0 18%,31% 4%,52% 18%,78% 5%,100% 22%,92% 54%,100% 82%,66% 94%,39% 80%,8% 96%,0 67%);
  opacity:.8}
.atlas-range{position:absolute;left:50%;top:50%;translate:-50% -50%;border:1px dashed var(--rule-2);
  border-radius:50%;pointer-events:none}
.atlas-range span{position:absolute;right:7%;bottom:5%;padding:0 3px;background:var(--tide-wash);
  color:var(--ink-3);font-size:.6875rem;font-weight:680}
.range-15{width:84%;aspect-ratio:1}
.range-10{width:56%;aspect-ratio:1}
.range-5{width:28%;aspect-ratio:1}
.atlas-axis{position:absolute;z-index:1;background:color-mix(in srgb,var(--tide) 40%,transparent)}
.atlas-axis-x{left:7%;right:7%;top:50%;height:1px}
.atlas-axis-y{top:7%;bottom:7%;left:50%;width:1px}
.atlas-marker{position:absolute;z-index:2;left:var(--plot-x);top:var(--plot-y);translate:-50% -50%;
  display:grid;place-items:center;width:31px;height:31px;color:var(--ink);
  padding:0;border:0;background:transparent;font:inherit;cursor:pointer}
.atlas-marker:hover,.atlas-marker:focus-visible{z-index:5}
.atlas-plot-shell{container-type:inline-size}
.atlas-marker::before{content:"";position:absolute;inset:0;border:1.5px solid var(--ink);
  border-radius:50% 50% 50% 2px;rotate:-45deg;background:var(--sheet)}
.atlas-marker b{position:relative;z-index:1;font-size:.6875rem;line-height:1}
.atlas-marker.is-anchor{width:36px;height:36px;color:var(--sheet)}
.atlas-marker.is-anchor::before{border-color:var(--tide-deep);background:var(--tide);
  box-shadow:0 0 0 4px var(--tide-field-2)}
.atlas-google-marker{position:relative;display:grid;place-items:center}
.atlas-marker-name{--atlas-marker-label-shift:-50%;position:absolute;z-index:3;left:50%;
  bottom:calc(100% + 8px);translate:var(--atlas-marker-label-shift) 0;width:max-content;
  max-width:min(220px,60cqw);padding:4px 7px;
  border:1px solid var(--rule-ink);background:var(--sheet);color:var(--ink);
  font-size:.75rem;font-weight:700;line-height:1.25;letter-spacing:0;text-align:left;
  text-transform:none;white-space:normal;overflow-wrap:anywhere;pointer-events:none;
  opacity:0;visibility:hidden}
.atlas-marker.is-label-left .atlas-marker-name,.atlas-google-marker.is-label-left .atlas-marker-name{
  --atlas-marker-label-shift:0;left:-3px;right:auto}
.atlas-marker.is-label-right .atlas-marker-name,.atlas-google-marker.is-label-right .atlas-marker-name{
  --atlas-marker-label-shift:0;right:-3px;left:auto}
.atlas-marker.is-label-below .atlas-marker-name,.atlas-google-marker.is-label-below .atlas-marker-name{
  top:calc(100% + 8px);bottom:auto}
.atlas-marker:hover .atlas-marker-name,.atlas-marker:focus-visible .atlas-marker-name,.atlas-marker.is-related .atlas-marker-name,
.atlas-google-marker:hover .atlas-marker-name,.atlas-google-marker.is-label-visible .atlas-marker-name{
  opacity:1;visibility:visible}
.atlas-google-marker.is-anchor .atlas-marker-name{border-color:var(--tide-deep);
  background:var(--tide-deep);color:var(--sheet)}
.atlas-anchor-label{position:absolute;z-index:2;left:9px;bottom:9px;
  max-width:62%;padding:3px 7px;border:1px solid var(--tide-deep);background:var(--tide-deep);
  color:var(--sheet);font-size:.6875rem;font-weight:700;line-height:1.2;text-align:center;
  text-transform:uppercase;letter-spacing:.06em}
.atlas-map-caption{position:absolute;z-index:3;left:9px;top:9px;padding:4px 7px;
  border:1px solid var(--rule-ink);background:var(--sheet);color:var(--ink-2);
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.atlas-empty-plot{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;
  display:grid;justify-items:center;width:min(250px,76%);padding:18px;border:1px solid var(--rule-ink);
  background:color-mix(in srgb,var(--sheet) 92%,transparent);text-align:center}
.atlas-crosshair{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--tide);
  color:var(--tide);font-size:1.25rem}
.atlas-empty-plot strong{margin-top:8px;font-size:.875rem}
.atlas-empty-plot span:last-child{margin-top:3px;color:var(--ink-2);font-size:.75rem}

.atlas-ledger{display:flex;min-width:0;flex-direction:column;background:var(--sheet)}
.atlas-selected{padding:13px;border-bottom:1px solid var(--rule-ink);box-shadow:inset 0 3px 0 var(--tide)}
.atlas-selected h3{margin-top:5px;font-size:1rem;line-height:1.15}
.atlas-selected > p{margin-top:5px;color:var(--ink-2);font-size:.8125rem;line-height:1.45}
.atlas-selected > .atlas-school-overview{margin-top:8px;font-size:.875rem;line-height:1.5}
.atlas-school-facts{display:grid;gap:3px;margin-top:9px;padding-top:8px;border-top:1px solid var(--rule)}
.atlas-school-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:7px}
.atlas-school-facts dt{font-size:.75rem}
.atlas-school-facts dd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);
  font-size:.8125rem;text-align:right}
.atlas-sector-check{margin-top:9px;padding:8px;border:1px solid var(--notice);background:var(--notice-field)}
.atlas-sector-check > p{margin-top:3px;color:var(--notice-deep);font-size:.8125rem;line-height:1.45}
.atlas-sector-check > div{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:7px;background:var(--notice)}
.atlas-sector-check a{display:grid;place-items:center;min-height:44px;background:var(--sheet);
  color:var(--notice-deep);font-size:.8125rem;font-weight:700;text-decoration:none}
.atlas-sector-check a:hover,.atlas-sector-check a:focus-visible,.atlas-sector-check a.is-active{
  background:var(--notice);color:var(--sheet)}
.atlas-save{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;margin-top:9px;padding:6px 8px;
  border:1px solid var(--rule-2);background:var(--stock);color:var(--ink-2);font:inherit;
  font-size:.8125rem;font-weight:680;text-decoration:none;cursor:pointer}
.atlas-save:hover{border-color:var(--tide);background:var(--tide-field);color:var(--tide-deep)}
.atlas-save[aria-pressed="true"]{border-color:var(--tide);background:var(--tide-field);color:var(--tide-deep)}
.atlas-nearby{display:flex;min-height:0;flex:1;flex-direction:column}
.atlas-nearby-head{display:flex;align-items:baseline;justify-content:space-between;gap:7px;padding:10px 10px 7px}
.atlas-nearby-head b{color:var(--ink-2);font-size:.75rem}
.atlas-nearby ol{list-style:none;border-top:1px solid var(--rule)}
.atlas-nearby li + li{border-top:1px solid var(--rule)}
.atlas-nearby li > a,.atlas-nearby-empty{display:grid;grid-template-columns:26px minmax(0,1fr);
  gap:8px;align-items:center;min-height:52px;padding:6px 9px;color:var(--ink);text-decoration:none}
.atlas-nearby li > a:hover,.atlas-nearby li > a:focus-visible{background:var(--tide-field)}
.atlas-nearby li.is-anchor > a{background:var(--tide-field)}
.atlas-row-number,.atlas-nearby-empty > span{display:grid;place-items:center;width:26px;height:26px;
  border:1px solid var(--rule-ink);background:var(--sheet);font-size:.6875rem;font-weight:700}
.atlas-nearby li.is-anchor .atlas-row-number{border-color:var(--tide-deep);background:var(--tide);color:var(--sheet)}
.atlas-nearby a > span:last-child,.atlas-nearby-empty p{display:grid;min-width:0}
.atlas-nearby strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font-size:.8125rem;line-height:1.3}
.atlas-nearby small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3);font-size:.75rem;line-height:1.4}
.atlas-nearby-empty{color:var(--ink-2)}
.atlas-nearby-empty small{overflow:visible;text-overflow:clip;white-space:normal}
.atlas-nearby li.is-related > a{background:var(--tide-field-2)}
.atlas-marker.is-related{z-index:4;scale:1.12}
.atlas-marker.is-related::before{box-shadow:0 0 0 4px var(--tide-field-2)}
.atlas-distance-note{margin-top:auto;padding:8px 9px;border-top:1px solid var(--rule);
  color:var(--ink-3);font-size:.75rem;line-height:1.45}

.atlas-action{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px 12px;margin-top:10px}
.atlas-action > p{color:var(--ink-2);font-size:.8125rem;line-height:1.45}
.atlas-pathway-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;
  padding:8px 12px;border:1px solid var(--tide-deep);background:var(--tide-deep);color:var(--sheet);
  font-size:.8125rem;font-weight:700;text-decoration:none}
.atlas-pathway-cta:hover{background:var(--ink);color:var(--sheet)}
.atlas-pathway-cta.is-disabled{border-color:var(--rule-2);background:var(--stock-2);color:var(--ink-3);
  pointer-events:none}
.atlas-action > small{grid-column:1 / -1;color:var(--ink-3);font-size:.75rem;line-height:1.45}
.atlas-attribution{margin-top:8px;padding-top:7px;border-top:1px solid var(--rule);
  color:var(--ink-3);font-size:.75rem;line-height:1.45}

@media (prefers-reduced-motion:no-preference){
  .atlas-marker{animation:atlas-place .28s cubic-bezier(.16,1,.3,1) both;transition:scale .18s cubic-bezier(.16,1,.3,1)}
  .atlas-marker::before{transition:box-shadow .18s cubic-bezier(.16,1,.3,1)}
  .atlas-marker-name{translate:var(--atlas-marker-label-shift) 3px;
    transition:opacity .16s cubic-bezier(.16,1,.3,1),translate .16s cubic-bezier(.16,1,.3,1)}
  .atlas-marker:hover .atlas-marker-name,.atlas-marker:focus-visible .atlas-marker-name,.atlas-marker.is-related .atlas-marker-name,
  .atlas-google-marker:hover .atlas-marker-name,.atlas-google-marker.is-label-visible .atlas-marker-name{
    translate:var(--atlas-marker-label-shift) 0}
  .atlas-marker:nth-of-type(2){animation-delay:.04s}
  .atlas-marker:nth-of-type(3){animation-delay:.08s}
  @keyframes atlas-place{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
}

@media (max-width:1060px) and (min-width:901px){
  .sheet-head{grid-template-columns:minmax(0,.82fr) minmax(500px,1.18fr);gap:28px}
  .school-atlas{padding:17px}
  .atlas-workbench{grid-template-columns:minmax(0,1.1fr) minmax(220px,.9fr)}
}

@media (max-width:720px){
  .school-atlas{padding:16px}
  .atlas-head{display:grid}
  .atlas-source-mark{justify-self:start}
  .atlas-workbench{grid-template-columns:minmax(0,1fr)}
  .atlas-plot-shell{min-height:245px;border-right:0;border-bottom:1px solid var(--rule-ink)}
  .atlas-workbench.is-empty .atlas-plot-shell{min-height:220px}
  .atlas-ledger{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .atlas-selected{border-right:1px solid var(--rule-ink);border-bottom:0}
  .atlas-nearby-empty:nth-child(n+3){display:none}
  .atlas-action{grid-template-columns:minmax(0,1fr)}
  .atlas-pathway-cta{grid-row:1}
  .atlas-action > small{grid-column:1}
}

@media (max-width:480px){
  .school-atlas{padding:13px}
  .atlas-head h2{font-size:1.25rem}
  .atlas-source-mark{display:none}
  .atlas-search-control{grid-template-columns:32px minmax(0,1fr)}
  .atlas-search-submit{grid-column:1 / -1;min-height:44px;border-top:1px solid var(--rule-ink);border-left:0}
  .atlas-search-results{top:123px}
  .atlas-location-detail{display:none}
  .atlas-ledger{grid-template-columns:minmax(0,1fr)}
  .atlas-selected{border-right:0;border-bottom:1px solid var(--rule-ink)}
  .atlas-empty-plot{padding:13px}
  .atlas-anchor-label{display:none}
  .atlas-pathway-cta{font-size:.8125rem}
  .atlas-save,.atlas-sector-check a{min-height:44px}
}

@media (forced-colors:active){
  .school-atlas,.atlas-search-control,.atlas-workbench,.atlas-plot-shell,.atlas-selected,
  .atlas-pathway-cta,.atlas-row-number,.atlas-nearby-empty > span{
    border-color:CanvasText}
  .atlas-marker::before,.atlas-marker-name{border-color:CanvasText}
  .atlas-marker.is-anchor::before,.atlas-google-marker.is-anchor .atlas-marker-name,
  .atlas-nearby li.is-anchor .atlas-row-number{
    background:Highlight;color:HighlightText}
  .atlas-schematic{background:Canvas}
  .atlas-pathway-cta{background:ButtonFace;color:ButtonText}
}