/* ══ THE HOURLY SUPER FLASH LADDER · ONE COMPONENT, TWO PAGES ══════════════════════════════════════
   KB-1168. This started life inside public/pesta-bina.html, scoped to .fshero, drawn once on the
   festival hero. The booking page then needed the same table behind its "All hours" link, and there
   were exactly two ways to give it one: copy these rules across, or lift them out. A copy is the
   thing this whole feature exists to prevent. The rates are read off the server precisely so that a
   customer who is shown 70% is charged 70%, and a SECOND STYLESHEET is the same failure one layer
   further out: the two pages would keep agreeing about the numbers and slowly stop agreeing about
   which row is the live one, which row is spent, and which row is the loud one.

   So it moved here whole, and both pages link it:
     public/pesta-bina.html   the festival hero, inside its two-card panel
     public/book-pesta.html   the booking page, inside the Today's clock card

   WHAT LIVES HERE: the maroon card and the ladder rows. Everything that is true wherever the table
   is drawn.
   WHAT DOES NOT: the hero's own chrome. Its two-column layout, its rotating glow frame, its yellow
   companion card, its disclosure button, its photograph. Those are one page's furniture and they
   stay in that page.

   COLOUR GRAMMAR, copied and not re-derived. Yellow #ffd21e with #1a1a1a ink is the plain sale on
   every ticket all day. Maroon #7B1E28 with white ink is the super flash: a few tickets an hour, on
   the quietest slots. They are never mixed, and there is no yellow in this file at all, because
   every row in this table is a super flash rate.

   SAFARI 12. No custom-property fallback tricks, no :is(), no nesting. --disp and --r-pill both come
   from assets/tokens.css, which every page carrying this file already loads. ═════════════════════ */

/* ── THE CARD ─────────────────────────────────────────────────────────────────────────────────────
   White body, maroon head. The head says what the table is before a single percentage is read, which
   matters most on the booking page, where the same screen also carries a yellow strip about a
   different discount entirely.

   padding:0 is NOT redundant. The festival page sets a large padding on every bare <section> for its
   own page sections, and this card is a <section>, so without the reset it opened with 60px of empty
   white above its own title bar. Caught on the rendered page, not in review. */
.fs-card{padding:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.16)}
.fs-card h3{margin:0;padding:10px 14px;font-size:16px;font-size:clamp(15px,1.8vw,18px);line-height:1.25;letter-spacing:-.01em;text-align:center}
.fs-m h3{background:#7B1E28;color:#fff}
.fs-card .fs-body{padding:12px 14px}

/* THE HONEST LINE, inside the card it qualifies and above the rates it qualifies. It is the reason
   this table is not a promise: every percentage below is capped at a handful of tickets an hour. */
.fs-note{margin:0 0 10px;color:#1a1a1a;font-size:13px;font-size:clamp(12.5px,1.4vw,14px);line-height:1.45}
.fs-note b{color:#1a1a1a;font-weight:800}

/* ── THE LADDER ───────────────────────────────────────────────────────────────────────────────────
   ONE COLUMN. Jon's call, and the hours run 9am to 12am in the single direction the eye reads. */
.fs-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.fs-r{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;background:#f4f4f4;color:#1a1a1a;font-size:13px;font-size:clamp(12.5px,1.4vw,14px);line-height:1.35;min-width:0;overflow:hidden}
.fs-r .fs-h{flex:none;width:4em;font-weight:600;font-variant-numeric:tabular-nums}
/* Maroon as INK on the ordinary rows: every rate in this ladder is a super flash rate, so all of
   them carry the colour, and the loud rows differ in how much of it they use, not in which hue. */
.fs-r .fs-p{font-family:var(--disp);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#7B1E28}
/* A headline hour: maroon as a BLOCK with white on it, the treatment the booking chip already uses.
   Size and weight carry it too, never colour alone, so the ladder keeps its three peaks for a reader
   who cannot separate the hues at all. */
.fs-r.is-big{background:#7B1E28;color:#fff}
.fs-r.is-big .fs-p{color:#fff;font-size:15px;font-size:clamp(14px,1.6vw,16.5px)}
/* NOW. The same maroon as a headline, because the grammar says maroon and nothing else may mean
   super flash, plus a dark ring a headline row does not have. A ring rather than a second colour:
   a new hue would then need a meaning of its own. box-shadow follows the border radius. */
.fs-r.is-now{background:#7B1E28;color:#fff;box-shadow:0 0 0 2px #1a1a1a}
.fs-r.is-now .fs-p{color:#fff}
.fs-r.is-next{background:#f6e8ea}
/* KB-1167. A headline hour that HAPPENS to be next keeps the headline treatment, and the four-class
   selector says so out loud rather than leaving it to source order. Being 70% or 90% is a fact about
   the rate and is true all day; being next is a fact about the clock and lasts an hour. The louder
   fact wins the block, and the NEXT pill below carries the clock on its own, exactly as .is-now
   already does. Without this the two rules met for the first time on the pale pink background and
   .is-big's white ink survived it, which put the 8pm 90% row at 1.19:1 in the 7pm hour: invisible in
   the one hour somebody is reading the ladder to decide whether to wait for it. */
.fs-r.is-big.is-next{background:#7B1E28;color:#fff}
/* A gone hour carries NO maroon, fill or ink, because maroon means an offer somebody can still take
   and a spent hour wearing it would be the panel's only outright lie. Source order puts this after
   .is-big and .is-now on purpose, so it strips both. */
.fs-r.is-past{background:#f4f4f4;color:#5f5f5f;box-shadow:none}
.fs-r.is-past .fs-p{color:#5f5f5f;font-size:13px;font-size:clamp(12.5px,1.4vw,14px)}
/* The word as well as the colour, so a colourblind reader, a printed page and a screen reader all
   get the same answer, and a past 20% is never mistaken for a live one. */
.fs-r .fs-tag{margin-left:auto;flex:none;padding:1px 7px;border-radius:var(--r-pill);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.fs-r.is-now .fs-tag{background:#fff;color:#7B1E28}
.fs-r.is-next .fs-tag{background:#7B1E28;color:#fff}
/* KB-1167, the other half. Once the row above stays maroon, a maroon NEXT pill on it has no edge and
   stops reading as a pill at all, so the word loses the only thing that made it a marker. Flipping it
   to white on maroon is the same swap .is-now makes one line up, for the same reason. */
.fs-r.is-big.is-next .fs-tag{background:#fff;color:#7B1E28}
.fs-r.is-past .fs-tag{background:#dcdcdc;color:#4a4a4a}
/* Midnight is the FINISH, not a discount. It never renders a percentage: a 0 there would read as
   "0% off" and an empty cell would read as a bug. It says the word. */
.fs-r.is-end{background:#f4f4f4}
.fs-r.is-end .fs-p{color:#5f5f5f;font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* ── THE SMALLEST SCREEN ──────────────────────────────────────────────────────────────────────────
   Sixteen rows in one column is the tallest this table ever gets, and on the booking page it is
   opening inside a 331px column that also has to hold a grid of festival hours underneath it. */
@media(max-width:400px){
  .fs-card h3{padding:9px 12px}
  .fs-card .fs-body{padding:10px 12px}
  .fs-r{padding:5px 8px;gap:6px;font-size:12px}
  .fs-r .fs-h{width:3.6em}
  .fs-r.is-big .fs-p{font-size:13px}
  .fs-r.is-past .fs-p{font-size:12px}
  .fs-r .fs-tag{font-size:9px;padding:1px 5px}
}