/* home_options_2026-10-06.css  PITCH 2026-10-06. Styles for the four Home options behind ?home=a|b|c|d.
   EVERY RULE IS SCOPED UNDER html[data-home-opt="..."], an attribute that only home_options_2026-10-06.js
   sets and only when the flag is in the URL. With no flag no selector here matches any element, so the
   cascade is exactly what it was. Zero bang-important declarations in this file. No red: the "now" marker is gold
   (--bw-gold) and small text that must read is ink or muted, never gold (gold is 2.43 on cream).
   THE TEXT GROWS. THE FRAME DOESN'T (DESIGN 2026-10-01): at .text-large (zoom 1.5) and .text-xlarge
   (zoom 2) every non-type length below is divided back toward its Normal painted size. Line-height is
   never reduced. Tap targets keep the 44px floor (RULINGS.json R-032). */

/* ---------- the block itself (b, c, d) ---------- */
html[data-home-opt] #hop-now{ margin:12px 0 0; }
html[data-home-opt] #hop-now:empty{ display:none; }

html[data-home-opt] .hop-card{ background:var(--surface); border-radius:var(--radius); border-inline-start:3px solid var(--bw-gold); padding:12px 14px; }
html[data-home-opt] .hop-head, html[data-home-opt] .hop-d{ display:block; width:100%; margin:0; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:start; cursor:pointer; -webkit-appearance:none; appearance:none; min-height:44px; }
html[data-home-opt] .hop-d{ background:var(--surface); border-radius:var(--radius); border-inline-start:3px solid var(--bw-gold); padding:10px 14px; }
html[data-home-opt] .hop-note{ display:block; font-size:14px; line-height:1.45; }

html[data-home-opt] .hop-now{ font-size:16px; line-height:1.4; font-weight:700; color:var(--ink); }
html[data-home-opt] .hop-next{ font-size:15px; line-height:1.4; color:var(--muted); margin-top:2px; }
html[data-home-opt] .hop-title{ font-family:var(--font-serif); font-size:20px; line-height:1.25; font-weight:500; color:var(--navy); margin:0 0 6px; }
html[data-home-opt] .hop-stage{ font-family:var(--font-label); font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--bw-gold-ink); }
html[data-home-opt] .hop-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--bw-gold); margin-inline-end:7px; vertical-align:baseline; }
html[data-home-opt] .hop-line{ font-size:15px; line-height:1.45; color:var(--ink); margin-top:4px; }
html[data-home-opt] .hop-k{ font-family:var(--font-label); font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--bw-gold-ink); margin-inline-end:4px; }
html[data-home-opt] .hop-note{ color:var(--muted); }

/* the fold: a native <details> that opens BELOW the thumb. 44px summary. Past acts dimmed, not hidden. */
html[data-home-opt] .hop-fold{ margin-top:6px; }
html[data-home-opt] .hop-sum{ min-height:44px; display:flex; align-items:center; cursor:pointer; font-family:var(--font-label); font-weight:700; font-size:13px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--navy); list-style:none; padding:0; }
html[data-home-opt] .hop-sum::-webkit-details-marker{ display:none; }
html[data-home-opt] .hop-sum::before{ content:""; display:inline-block; width:8px; height:8px; border-inline-end:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-inline-end:10px; margin-top:-5px; }
html[data-home-opt] .hop-fold[open] > .hop-sum::before{ transform:rotate(-135deg); margin-top:4px; }
html[data-home-opt] .hop-acts, html[data-home-opt] .hop-sibs{ list-style:none; margin:0; padding:0 0 6px; }
html[data-home-opt] .hop-actrow{ font-size:15px; line-height:1.45; padding:6px 0; border-top:1px solid var(--border); color:var(--ink); }
html[data-home-opt] .hop-actrow.hop-past{ opacity:.72; }
html[data-home-opt] .hop-at{ font-variant-numeric:tabular-nums; }
html[data-home-opt] .hop-sib{ border-top:1px solid var(--border); }
html[data-home-opt] .hop-sibbtn{ display:block; width:100%; margin:0; padding:9px 0; border:0; background:none; font:inherit; color:inherit; text-align:start; cursor:pointer; min-height:44px; -webkit-appearance:none; appearance:none; }
html[data-home-opt] .hop-sibttl{ display:block; font-weight:700; font-size:15px; line-height:1.4; color:var(--navy); }
html[data-home-opt] .hop-sibwhen{ display:block; font-size:14px; line-height:1.4; color:var(--muted); }
html[data-home-opt] .hop-fact{ font-size:14px; line-height:1.45; color:var(--ink); padding:0 0 8px; }

/* ---------- the rows (b, c): a record whose published close has passed sits under the ones still to come, dimmed */
html[data-home-opt="b"] #home-events .event-row.hop-ended, html[data-home-opt="c"] #home-events .event-row.hop-ended{ opacity:.72; }
/* the row's own on-stage line is already said in the block right above it: one line, not two */
html[data-home-opt="b"] #home-events .event-row .ev-lu-face, html[data-home-opt="c"] #home-events .event-row .ev-lu-face{ display:none; }
/* c: the lead row's published-hours line (app.js evFactFaceHTML, painting since the 2026-10-06 app.js fix) is the same
   line the block above just printed; one line, not two. Other rows keep theirs. */
html[data-home-opt="c"] #home-events .event-row.hop-lead .ev-facts-face{ display:none; }

/* ---------- the frame doesn't grow: divide non-type lengths back at the two big steps ---------- */
html[data-home-opt] .phone.text-large #hop-now{ margin-top:8px; }
html[data-home-opt] .phone.text-large .hop-card{ padding:8px 10px; border-inline-start-width:2px; }
html[data-home-opt] .phone.text-large .hop-d{ padding:7px 10px; border-inline-start-width:2px; }
html[data-home-opt] .phone.text-large .hop-dot{ width:7px; height:7px; margin-inline-end:5px; }
html[data-home-opt] .phone.text-large .hop-actrow{ padding:4px 0; }
html[data-home-opt] .phone.text-large .hop-sibbtn{ padding:6px 0; min-height:30px; }
html[data-home-opt] .phone.text-large .hop-sum{ min-height:30px; }
html[data-home-opt] .phone.text-large .hop-head, html[data-home-opt] .phone.text-large .hop-d{ min-height:30px; }
html[data-home-opt] .phone.text-xlarge #hop-now{ margin-top:6px; }
html[data-home-opt] .phone.text-xlarge .hop-card{ padding:6px 7px; border-inline-start-width:2px; }
html[data-home-opt] .phone.text-xlarge .hop-d{ padding:6px 7px; border-inline-start-width:2px; }
html[data-home-opt] .phone.text-xlarge .hop-dot{ width:5px; height:5px; margin-inline-end:4px; }
html[data-home-opt] .phone.text-xlarge .hop-actrow{ padding:3px 0; }
html[data-home-opt] .phone.text-xlarge .hop-sibbtn{ padding:5px 0; min-height:22px; }
html[data-home-opt] .phone.text-xlarge .hop-sum{ min-height:22px; }
html[data-home-opt] .phone.text-xlarge .hop-head, html[data-home-opt] .phone.text-xlarge .hop-d{ min-height:22px; }

/* DEFAULT 2026-10-07. NOT ONE RULE ABOVE IS CHANGED. The header's "only when the flag is in the URL" is no longer
   the whole truth: home_options_2026-10-06.js now sets html[data-home-opt="b"] with NO flag, so B is the default
   Home and these rules apply by default. ?home=off (or any home= value that is not a to d) leaves the attribute
   unset, so with that flag no rule here matches and the cascade is the 2026-10-06 one. The scoping is unchanged on
   purpose: it is what makes the restore flag byte-identical. UNDO 2: delete this comment block; nothing else in this
   file moved. Snapshot: C:\!Brain\LFG4\NEVER_OVERWRITE\default_2026-10-07\home_options_2026-10-06.css */

/* DEFAULT 2026-10-07, the one rule added. A real Tab walk found the fold's <summary> was the only stop on Home with the
   browser's default focus ring (auto 1px) while every other stop wears the app's 3px ring (app.css:141 for buttons and
   links, .off-roster>summary for the one other summary on a page). Same ring, same variable, same inset as that summary.
   No bang-important. UNDO 3: delete the one line below. */
html[data-home-opt] .hop-sum:focus-visible{ outline:3px solid var(--navy); outline-offset:-3px; }

/* BEST 2026-10-07. PICK THREE'S ROW ON THE DEFAULT: "Today's hours, and what is free". One row under the stage lines,
   HOURS and COST side by side where they fit and wrapping where they do not (320, Large, Extra Large, long languages).
   Only the no-flag default paints .hop-today, so ?home=b|c|d and ?home=off cannot match these. Same label and value
   styles as the rest of the card (.hop-k gold-ink label, ink value, 15px / 1.45). No red, no bang-important, line-height
   untouched. The two folds under it keep the 44px summary floor (RULINGS.json R-032). BEST UNDO 5: delete from this
   comment to the end of the file. Snapshot: C:\!Brain\LFG4\NEVER_OVERWRITE\best_2026-10-07\home_options_2026-10-06.css.PRE */
html[data-home-opt] .hop-today{ display:flex; flex-wrap:wrap; column-gap:14px; row-gap:0; margin-top:5px; }
html[data-home-opt] .hop-today .hop-line{ margin-top:0; }
html[data-home-opt] .hop-today .hop-v{ font-variant-numeric:tabular-nums; }
html[data-home-opt] .phone.text-large .hop-today{ column-gap:10px; margin-top:3px; }
html[data-home-opt] .phone.text-xlarge .hop-today{ column-gap:7px; margin-top:2px; }

/* PREVIEW 2026-10-07. ONE SELECTOR, ONE PURPOSE, NO NEW COLOUR AND NO BANG-IMPORTANT.
   .hop-actrow already carries a border-top, which separates the acts inside the SHOW n MORE fold
   from each other. The first published act now sits INSIDE the card's own button, where a rule
   above the first item would be a line across the card for no reason, so .hop-pre1 drops that one
   border and keeps the same 15px / 1.45 ink face as every other act row. Nothing else changes: the
   card, the title, the HOURS and COST row, both folds and the gold dot rule are all untouched, and
   .hop-pre1 exists nowhere but the preview card, so ?home=off, ?home=a, b, c and d cannot match it.
   PREVIEW CSS UNDO 1 OF 1: delete from this comment to the end of the file. The file is then
   byte-identical to C:\!Brain\LFG4\NEVER_OVERWRITE\preview_2026-10-07\home_options_2026-10-06.css.PRE_PREVIEW
   (9,103 bytes, sha256 e69756d6414789e1ae1a79d3ef06e2c179825a309e1659dd0b8e8e373802a46e). */
html[data-home-opt] .hop-pre1{ border-top:0; padding:6px 0 0; }
html[data-home-opt] .phone.text-large .hop-pre1{ padding:4px 0 0; }
html[data-home-opt] .phone.text-xlarge .hop-pre1{ padding:3px 0 0; }

/* LIVE4 2026-10-07. THE NEXT FOUR ON THE TOWN'S CLOCK, THE FOLD, THE DAY ROW. Only the no-flag default paints
   .hop-live, so ?home=a|b|c|d and ?home=off cannot match any rule here. No red, no bang-important, line-height
   untouched; the now marker is the same gold dot (.hop-dot) the card already uses. The four rows are a plain list
   (no door of their own); a record row inside it (fireworks, rides) is a real button at the 44px floor. The day row
   is a row of buttons at the 44px floor; the pressed one is filled navy with the surface colour on it. Past rows are
   dimmed with the same .hop-past opacity as before, never hidden. The frame does not grow at Large and Extra Large,
   as above. LIVE4 CSS UNDO 1 OF 1: delete from this comment to the end of the file. The file is then byte-identical to
   C:\!Brain\LFG4\NEVER_OVERWRITE\live4_2026-10-07\home_options_2026-10-06.css.PRE_LIVE4
   (10,285 bytes, sha256 797d337f548fc1de5ed805df9d821e315af1808db3c279a4c0d799fd32b0b383). */
html[data-home-opt] .hop-live .hop-four, html[data-home-opt] .hop-live .hop-rest{ list-style:none; margin:4px 0 0; padding:0; }
html[data-home-opt] .hop-live .hop-four[hidden], html[data-home-opt] .hop-live .hop-rest[hidden], html[data-home-opt] .hop-live .hop-days[hidden], html[data-home-opt] .hop-live .hop-done[hidden], html[data-home-opt] .hop-live .hop-sibs[hidden]{ display:none; }
html[data-home-opt] .hop-live .hop-row{ display:block; }
html[data-home-opt] .hop-live .hop-four > .hop-row:first-child{ border-top:0; }
html[data-home-opt] .hop-live .hop-row.hop-on{ font-weight:700; }
html[data-home-opt] .hop-live .hop-lbl{ font-family:var(--font-label); font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--bw-gold-ink); }
html[data-home-opt] .hop-live .hop-rowbtn{ display:block; width:100%; margin:0; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:start; cursor:pointer; min-height:44px; -webkit-appearance:none; appearance:none; }
html[data-home-opt] .hop-live .hop-rowbtn:focus-visible{ outline:3px solid var(--navy); outline-offset:-3px; }
html[data-home-opt] .hop-live .hop-done{ font-size:15px; line-height:1.45; color:var(--muted); margin:0 0 6px; }
html[data-home-opt] .hop-live .hop-days{ display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 6px; }
html[data-home-opt] .hop-live .hop-day{ min-height:44px; padding:6px 12px; margin:0; border:2px solid var(--navy); border-radius:var(--radius); background:var(--surface); color:var(--navy); font:inherit; font-size:15px; line-height:1.3; font-weight:700; cursor:pointer; -webkit-appearance:none; appearance:none; }
html[data-home-opt] .hop-live .hop-day[aria-pressed="true"]{ background:var(--navy); color:var(--surface); }
html[data-home-opt] .hop-live .hop-day:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }
html[data-home-opt] .hop-live .hop-rest{ border-top:1px solid var(--border); }
html[data-home-opt] .phone.text-large .hop-live .hop-days{ gap:4px; padding:3px 0 4px; }
html[data-home-opt] .phone.text-large .hop-live .hop-day{ min-height:30px; padding:4px 8px; border-width:1px; }
html[data-home-opt] .phone.text-large .hop-live .hop-rowbtn{ min-height:30px; }
html[data-home-opt] .phone.text-xlarge .hop-live .hop-days{ gap:3px; padding:2px 0 3px; }
html[data-home-opt] .phone.text-xlarge .hop-live .hop-day{ min-height:22px; padding:3px 6px; border-width:1px; }
html[data-home-opt] .phone.text-xlarge .hop-live .hop-rowbtn{ min-height:22px; }