/* /timetable: the live class list from TM Hub. Builds on tm-v3.css. */

/* ---------- hero ----------
   A deep band with the headline, under the site's header (tm-chrome.css): on phones the paper bar sits above it, on laptops
   the pill floats over it. Phones have no photo, so the timetable is close; laptops put the high-five photo as a tile on the right.
   The course chooser sits across the hero's bottom edge, its top on deep and the rest on paper. */
/* --overlap: how far the chooser card reaches up into the deep hero */
:root { --overlap:52px; }
@media (min-width: 960px) { :root { --overlap:40px; } }
.hero { position:relative; background:var(--tm-paper); }
.hero .ground { inset:0; }
/* room for the laptop header pill, which floats over the top of the hero (nothing on phones: their bar is above it) */
.hero { padding-top:var(--tm-head-space, 0px); }
.hero-grid { position:relative; display:grid; }
.hero-copy { position:relative; z-index:1; padding:30px 0 calc(var(--overlap) + 34px); }
.hero h1 { margin:16px 0 0; }
.hero h1 em { white-space:nowrap; }
.live { display:flex; align-items:center; gap:8px; margin-top:24px; font-size:14px; color:var(--quiet-dark); }
.live i { position:relative; width:8px; height:8px; border-radius:50%; background:var(--tm-mint); flex:none; }
.live i::after { content:""; position:absolute; inset:-4px; border-radius:50%; background:var(--tm-mint); opacity:.35; animation:tt-pulse 2.4s ease-out infinite; }
.live.stale i { background:rgba(251,250,246,.5); } .live.stale i::after { display:none; }
@keyframes tt-pulse { 0% { transform:scale(.6); opacity:.45; } 70%, 100% { transform:scale(1.8); opacity:0; } }
.hero-photo { display:none; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,420px); column-gap:64px; align-items:end; }
  .hero-copy { padding:48px 0 calc(var(--overlap) + 64px); }
  .hero-photo { display:block; margin:40px 0 calc(var(--overlap) + 64px); border-radius:var(--r-big); overflow:hidden; aspect-ratio:4/3; box-shadow:0 30px 60px -30px rgba(0,0,0,.55); }
  .hero-photo img { width:100%; height:100%; object-fit:cover; object-position:42% 40%; }
}

/* ---------- one system for the whole page (owner, 16 Oct 2026: "strong consistency") ----------
   Buttons you tap (course and campus buttons, a row's Book button) are 32 px pills, 14.5 px text, 14 px in from their
   rounded ends (0.9 x the 16 px radius). Labels that only inform (availability, school focus) are smaller, 24 px with
   13 px text, so they never read as buttons. Big buttons are the brand's 54 px. White boxes have 24 px corners.
   Gaps run on 8 px steps. */
:root { --pill-h:32px; --pill-x:14px; --pill-font:14.5px; --label-h:24px; --label-x:11px; --label-font:13px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
/* every choice is one tap, never a dropdown */
.chip { display:inline-flex; align-items:center; gap:8px; height:var(--pill-h); padding:0 var(--pill-x); border-radius:999px; border:0; background:var(--white); box-shadow:inset 0 0 0 1px rgba(16,22,19,.16); font:500 var(--pill-font)/1 var(--body); color:var(--tm-ink); cursor:pointer; white-space:nowrap; transition:box-shadow .15s ease, background-color .15s ease; -webkit-tap-highlight-color:transparent; }
@media (hover: hover) { .chip:hover { box-shadow:inset 0 0 0 1px rgba(16,22,19,.42); } }
.chip[aria-pressed="true"] { background:var(--tm-forest); color:var(--white); font-weight:600; box-shadow:none; }
.chip:focus-visible { outline:none; box-shadow:var(--tm-glow); }
.chip .dot { width:9px; height:9px; }
/* course buttons carry a radio in the course's colour (owner, 16 Oct 2026), so they read as "pick one": a white disc with
   a coloured ring, and the centre fills when chosen. The white disc keeps the colour visible on the chosen (forest) button. */
.radio { position:relative; flex:none; width:16px; height:16px; border-radius:50%; background:var(--white); box-shadow:inset 0 0 0 2px var(--rc, var(--tm-forest)); }
.radio::after { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--rc, var(--tm-forest)); transform:scale(0); transition:transform .15s ease, opacity .15s ease; }
.radio.y10 { --rc:var(--c-y10); } .radio.std { --rc:var(--c-std); } .radio.adv { --rc:var(--c-adv); } .radio.ext1 { --rc:var(--c-ext1); } .radio.ext2 { --rc:var(--c-ext2); }
.chip[aria-pressed="true"] .radio::after { transform:scale(1); }
@media (hover: hover) { .chip:not([aria-pressed="true"]):hover .radio::after { transform:scale(1); opacity:.3; } }
/* a group's label ("Year 12", "Campus"): one style for every group of buttons */
.ylabel span { font:600 17px/1.2 var(--body); letter-spacing:-.01em; color:var(--tm-ink); }

/* ---------- the chooser: two steps, 1 the course, 2 the campus; the classes show once both are tapped ----------
   (owner, 16 Oct 2026: no campus chosen for the visitor; step 2 stays faded until step 1 is done, then wakes) */
.chooser { position:relative; z-index:3; margin-top:calc(var(--overlap) * -1); padding:8px 20px; border-radius:var(--r-big); background:var(--white); box-shadow:0 18px 40px rgba(2,39,30,.18); }
/* the instruction sits right above the buttons it asks for (owner, 16 Oct 2026) */
.chooser-title { display:flex; align-items:center; gap:10px; padding:16px 0 0; font-size:20px; line-height:1.3; letter-spacing:-.015em; color:var(--tm-ink); }
/* the step number: a label-sized forest disc */
.step-n { display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--label-h); height:var(--label-h); border-radius:50%; background:var(--tm-forest); color:var(--white); font:600 var(--label-font)/1 var(--body); letter-spacing:0; transition:background-color .3s ease, color .3s ease; }
/* The number is drawn, not set as text in a line box (owner, 16 Oct 2026: "dead centre"). A line box rounds to the
   screen's pixels differently at each browser zoom, which left the digit up to a pixel high on the owner's screen. In
   the 24-unit drawing the baseline sits at 12 + half Inter's figure height (0.7275 x 13 = 9.46) = 16.73, set a hair lower
   (16.85): screens still round a glyph to whole device pixels, and this way any rounding lands a quarter pixel low,
   never high (measured at 1x to 3x). The 1 sits .4 left of the middle: its weight is its upright. */
.step-n svg { display:block; width:100%; height:100%; overflow:visible; }
.step-n text { font:600 13px var(--body); fill:currentColor; text-anchor:middle; }
.chooser .terms { padding:16px 0; border-bottom:1px solid var(--line); }
.yrow { display:grid; gap:8px; padding:16px 0; }
.yrow + .yrow { border-top:1px solid var(--line); }
.chip-sk { width:136px; height:var(--pill-h); border-radius:999px; }
/* every course button is one width, the widest name's ("Extension 2"), so the rows line up (owner, 16 Oct 2026);
   the dot and name stay left-aligned inside. min-width, so a fallback font can still grow a button rather than clip it. */
.course-chip { min-width:136px; }
/* phones: each year's courses stack, full width, 32 px tall (owner, 16 Oct 2026) */
@media (max-width: 767px) {
  .yrow .chips, .ch-campus .chips { flex-direction:column; flex-wrap:nowrap; }
  .course-chip, .chip-sk, .campus-chip { width:100%; min-width:0; }
}
@media (min-width: 768px) {
  .chooser { width:fit-content; max-width:100%; padding:8px 32px; }
  .chooser-title { padding-top:24px; }
  .course-chip { min-width:136px; }
  .yrow { grid-template-columns:104px auto; align-items:center; column-gap:24px; padding:16px 0; }
}
/* step 2, the campus: under the courses on phones and tablets, the card's right-hand panel on laptops */
.ch-campus { padding:0 0 16px; border-top:1px solid var(--line); scroll-margin-bottom:96px; }   /* clear of the phone booking bar */
.ch-campus .chips { padding-top:16px; }
.campus-chip { min-width:136px; }
/* asleep until a course is tapped: faded, and its buttons can't be pressed */
.ch-campus > * { transition:opacity .3s ease; }
.ch-campus[data-step="off"] > * { opacity:.4; }
.ch-campus[data-step="off"] .step-n { background:rgba(16,22,19,.14); color:var(--tm-ink); }
.ch-campus[data-step="off"] .chip:disabled { opacity:1; }
/* awake and waiting: the buttons take a forest outline, so the next tap is plain */
.ch-campus[data-step="wait"] .campus-chip:not(:disabled) { box-shadow:inset 0 0 0 1.5px var(--tm-forest); }
/* the step waiting for a tap glows softly, over and over, until it's done (owner, 16 Oct 2026): the 1 on arrival, then
   the 2 once a course is tapped. A gentle saffron ring every 2.4 s, never more than 6 px out. Still under reduced motion. */
.ch-course[data-step="wait"] .step-n, .ch-campus[data-step="wait"] .step-n { animation:tt-step 2.4s ease-out infinite; }
@keyframes tt-step { 0% { box-shadow:0 0 0 0 rgba(242,158,31,.42); } 65%, 100% { box-shadow:0 0 0 6px rgba(242,158,31,0); } }
@media (min-width: 1140px) {
  /* the card runs the page's full width, lined up with the header and the classes below it (owner, 16 Oct 2026) */
  .chooser { width:auto; display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:32px; }
  .ch-campus { margin:24px 0; padding:0 0 0 32px; border-top:0; border-left:1px solid var(--line); }
  .ch-campus .chooser-title { padding-top:0; }
  .ch-campus .chips { flex-direction:column; align-items:flex-start; }
}
/* under the campus buttons, where the chosen campus is: one short line, a link to the map */
.ch-addr { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:14px; line-height:1.3; color:var(--tm-muted); text-decoration:none; white-space:nowrap; }
.ch-addr svg { width:14px; height:14px; flex:none; fill:none; stroke:var(--tm-forest); }
.ch-addr:hover { color:var(--tm-forest); text-decoration:underline; }
/* a campus with none of the chosen course: still there, so the panel doesn't jump, but it can't be picked */
.chip:disabled { opacity:.45; cursor:default; }
@media (hover: hover) {
  .chip:disabled:hover { box-shadow:inset 0 0 0 1px rgba(16,22,19,.16); }
  .chip:disabled:hover .radio::after { transform:scale(0); }
}

/* ---------- results ---------- */
.tt { padding-bottom:72px; }
@media (min-width: 900px) { .tt { padding-bottom:112px; } }
.tt-results { margin-top:40px; max-width:960px; scroll-margin-top:calc(var(--tm-head-space, 0px) + 16px); }
.tt-results:empty { display:none; }   /* before a course is tapped: no gap under the chooser */
@media (min-width: 900px) { .tt-results { margin-top:56px; } }
/* laptops: the classes run the card's full width */
@media (min-width: 1140px) { .tt-results { max-width:none; } }


.sel-head h2 { display:flex; align-items:center; gap:14px; font-size:clamp(28px, calc(1vw + 22px), 38px); }
.sel-head h2 .dot { width:12px; height:12px; }

/* each class is one link to the booking form with that class chosen */
.rows { list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--line); }
/* phones: the day and its availability, then the time, then the class type, each on its own short line.
   The day takes one width on every row, the longest day's ("Wednesday"), so the availability labels start in one
   line down the list, like a table's column (owner, 16 Oct 2026). minmax: a wider fallback font grows it, never clips. */
.row { --day-w:6.1em; position:relative; display:grid; grid-template-columns:minmax(var(--day-w), max-content) minmax(0,1fr) auto; grid-template-areas:"day avail go" "time time go" "type type go"; column-gap:16px; row-gap:4px; align-items:center;
  margin:0 -14px; padding:16px 14px; border-radius:16px; color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background-color .15s ease, box-shadow .15s ease; }
.row::after { content:""; position:absolute; left:14px; right:14px; bottom:0; height:1px; background:var(--line); }
li:last-child > .row::after { display:none; }
.row .tt-day { grid-area:day; font-weight:600; color:var(--tm-ink); }
.row .tt-time { grid-area:time; font-size:15px; color:var(--body-ink); }
/* a school-focus class: the grey badge (a label, so 24 px) with a forest graduation cap; mixed classes show nothing */
.row .tt-type { grid-area:type; display:flex; align-items:center; min-width:0; font-size:15px; color:var(--body-ink); }
.focus-badge { display:inline-flex; align-items:center; gap:6px; height:var(--label-h); padding:0 var(--label-x); border-radius:999px; background:rgba(16,22,19,.06); font:600 var(--label-font)/1 var(--body); color:var(--tm-ink); white-space:nowrap; }
.focus-badge svg { width:14px; height:14px; flex:none; stroke:var(--tm-forest); }
@media (max-width: 767px) { .row .tt-type .focus-badge { margin-top:2px; } }
.row .avail { grid-area:avail; justify-self:start; }
/* a row's Book button: the same outline pill on every screen (a 32 px circle with the arrow on phones), filled on hover or tap */
.row .go { grid-area:go; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:var(--pill-h); height:var(--pill-h); border-radius:999px; background:transparent; color:var(--tm-forest); box-shadow:inset 0 0 0 1.5px var(--tm-forest); font:600 var(--pill-font)/1 var(--body); transition:background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.row .go-l { display:none; }
/* the arrow is drawn, its stroke matching the ring's 1.5 px (a type arrow is a hairline at this size) */
.row .go svg { width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.row:hover .go, .row:focus-visible .go, .row:active .go { background:var(--tm-forest); color:var(--white); }
@media (hover: hover) { .row:hover { background:var(--white); box-shadow:inset 0 0 0 1px var(--card-line); } .row:hover::after { opacity:0; } }
.row:focus-visible { outline:none; box-shadow:var(--tm-glow); }
@media (min-width: 768px) {
  /* laptops: the availability column is one width, the widest label's ("3 spots left"), each label starting at its left
     edge, so the labels line up down the list as well as beside the Book buttons */
  .row { grid-template-columns:150px 210px minmax(0,1fr) var(--avail-w, 112px) auto; grid-template-areas:"day time type avail go"; column-gap:16px; padding:16px 14px; }
  .row .tt-time, .row .tt-type { font-size:17px; }
  .row .avail { justify-self:start; }
  .row .go { width:auto; padding:0 var(--pill-x); }
  .row .go-l { display:inline; }
}
/* tablets: one line leaves the school badge under 150 px, so it was cut off ("Parramatta High focu"). The badge
   drops under the time instead; the day, availability and Book button sit centred beside the two lines. A mixed
   class has no badge, so its second line is empty and takes no height (row-gap 0). */
@media (min-width: 768px) and (max-width: 1139px) {
  .row { grid-template-columns:130px minmax(0,1fr) var(--avail-w, 112px) auto; grid-template-areas:"day time avail go" "day type avail go"; row-gap:0; }
  .row .tt-type .focus-badge { margin-top:6px; }
}
.tt-hint { margin-top:16px; font-size:15px; color:var(--tm-muted); }
.tt-hint a, .tt-note a:not(.btn) { color:var(--tm-forest); font-weight:600; }

/* availability: the owner's bands. Plenty of room reads calm (pale mint), a few spots left gets a forest outline,
   the last spot gets the saffron highlight. No real numbers above 3, and no red: this isn't a worry. */
.avail { display:inline-flex; align-items:center; gap:6px; height:var(--label-h); padding:0 var(--label-x); border-radius:999px; font:600 var(--label-font)/1 var(--body); white-space:nowrap; }
.avail::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.avail.open { background:var(--tm-pale-mint); color:var(--tm-forest); }
.avail.few { background:var(--white); color:var(--tm-forest); box-shadow:inset 0 0 0 1.5px rgba(8,79,60,.45); }
.avail.last { background:var(--tm-highlight); color:var(--tm-ink); }
.avail.last::before { background:var(--tm-saffron); }

/* loading: quiet placeholders in the same rhythm as the real thing */
.sk { display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, rgba(16,22,19,.06) 0%, rgba(16,22,19,.11) 50%, rgba(16,22,19,.06) 100%) 0 0 / 200% 100%; animation:tt-shimmer 1.4s linear infinite; }
@keyframes tt-shimmer { to { background-position:-200% 0; } }
.row.loading { pointer-events:none; }
.row.loading .tt-day .sk { width:90px; height:14px; } .row.loading .tt-time .sk { width:140px; } .row.loading .avail .sk { width:96px; height:var(--label-h); border-radius:999px; }

/* a note in place of classes: Standard 2's waitlist, a course with no spots, or a feed that didn't load */
.tt-note { margin-top:24px; max-width:640px; padding:24px; border-radius:var(--r-big); background:var(--white); box-shadow:inset 0 0 0 1px var(--card-line); }
.tt-note h3 { font-size:20px; }
.tt-note p { margin-top:8px; color:var(--body-ink); font-size:16px; }
.tt-note .chip { margin-top:16px; }
.tt-note .btn { margin-top:24px; }

/* ---------- the closing card ---------- */
.close { padding-bottom:72px; }
@media (min-width: 900px) { .close { padding-bottom:112px; } }
.offer-grid { position:relative; display:grid; gap:28px; }
@media (min-width: 960px) { .offer-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:56px; align-items:end; } }
.offer-card .lede { margin-top:16px; color:var(--body-dark); max-width:34em; }
@media (max-width: 389px) { .offer-card h2 { font-size:25px; } .offer-card .lede { font-size:16px; } }   /* each stays on one line on small phones */
.offer-actions { display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width: 599px) { .offer-actions .btn { width:100%; } }
/* laptops: the two buttons stack at one width on the right, level with the words' last line */
@media (min-width: 960px) { .offer-actions { flex-direction:column; justify-self:end; width:300px; } }