/* ============================================================================
   brand.css - the RowOn Indoor Hat Trick volunteer tool's own layer. DRAFT.

   ro-tokens.css owns the tokens, the base element styles (type scale, links,
   form controls, focus rings) and a set of ro-prefixed components. It is a copy
   of the Row Ontario design system stylesheet: never edit it here.

   This file owns only what is specific to this tool:
     1. Aliases for token names the pages use.
     2. The tool's own component classes (.app-header, .tile, .btn, .card,
        .table-wrap, .ro-load, .demo-banner, .app-footer), declared on system
        tokens.
     3. The phone-first page width.

   System components are namespaced ro-* so they cannot collide with a name a
   page already uses. Never add an unprefixed utility class to ro-tokens.css.
   Do not add new tokens here. If something is missing it belongs in the design
   system, so every Row Ontario build inherits it.
   ========================================================================== */

@import "ro-tokens.css";

/* Every page carries data-density="compact" on <html>, which steps the heading
   tokens down one rung of the same 1.25 scale so more fits on a phone. */

:root{
  /* ---- aliases ---- */
  --ro-soft:var(--ro-neutral);
  --ro-radius:var(--radius);
  --ro-radius-sm:var(--radius-sm);
  --ro-font:var(--font);

  /* State washes. The system names them --ro-yellow-*; the pages say amber. */
  --ro-amber-bg:var(--ro-yellow-bg);
  --ro-amber-border:var(--ro-yellow-line);
  --ro-amber-ink:var(--ro-yellow-ink);
  --ro-green-border:var(--ro-green-line);
  --ro-blue-border:var(--ro-blue-line);

  /* ---- AA text on the state washes ----
     The extended accents are data colours and are not readable as small text:
     --ro-green on --ro-green-bg measures 2.90:1 and --ro-blue on --ro-blue-bg
     4.10:1, against a 4.5:1 floor. These two are for TEXT only; the accents
     themselves are untouched.
       --ro-green-text  5.36:1 on --ro-green-bg,  5.90:1 on white
       --ro-blue-text   6.37:1 on --ro-blue-bg,   7.10:1 on white
     They live here and not in ro-tokens.css, which is overwritten on the next
     copy from the design system. */
  --ro-green-text:#00743A;
  --ro-blue-text:#005A9E;
}

/* ---------- page width ----------
   Phone-first. The primary viewport is 390px and most screens are read
   one-handed. */
.page{width:100%;max-width:480px;margin-inline:auto;padding:var(--s2) var(--s2) var(--s6);}
/* What a person types (a name, notes, a station) can be one long unbroken word, or a link.
   It wraps inside the page; it never pushes the page sideways. */
.page main{overflow-wrap:anywhere;}
@media (min-width:700px){.page{max-width:720px;}}
@media (min-width:1000px){.page--wide{max-width:1100px;}}

/* ---------- .app-header ----------
   Two rows on a committed red block.
   Row 1, the brand: Row Ontario's own RowOn wordmark with the event's name in
   type beside it, and the mode chip pushed right. ONE mark per screen.
   Row 2, the bar: the Back link and the page's own heading.

   The wordmark is sized by HEIGHT ONLY, at two body lines, and its width
   follows. Never set both: that is how a mark gets stretched. The file carries
   its own clear space (about a fifth of its height above and below the
   letters), so at 48px the letters stand about 15px tall and the type beside
   them is set to match. The small negative margin lines the first letter up
   with the page heading below it: one left edge. Nothing is cropped. */
.app-header{background:var(--ro-red);color:var(--ro-paper);
  padding:var(--s1) var(--s2) var(--s2);
  border-radius:var(--radius);margin-bottom:var(--s2);}
.app-header__brand{display:flex;align-items:center;gap:var(--s1);min-height:var(--line-2);}
.app-header__mark{flex-shrink:0;height:var(--line-2);width:auto;max-width:none;display:block;
  margin-left:calc(var(--s1) * -1);}
.app-header__event{min-width:0;font-size:var(--fs-1);font-weight:900;
  line-height:var(--line-1);letter-spacing:-0.005em;white-space:nowrap;}
.app-header .chip{margin-left:auto;flex-shrink:0;}
.app-header__bar{display:flex;align-items:center;gap:var(--s2);min-height:var(--line-2);}
/* A 48px tap target on a text link: the negative inline margin keeps it looking
   the same distance from the edge while the target extends past the text. */
.app-header__back{display:inline-flex;align-items:center;min-height:var(--line-2);
  padding-inline:var(--s1);margin-inline:calc(var(--s1) * -1);
  color:var(--ro-paper);text-decoration:none;font-weight:700;
  font-size:var(--fs-small);flex-shrink:0;}
.app-header__back:hover,.app-header__back:focus-visible{color:var(--ro-paper);text-decoration:underline;}
.app-header__title{flex:1 1 auto;min-width:0;margin:0;color:var(--ro-paper);
  font-size:var(--fs-2);font-weight:900;line-height:1.1;letter-spacing:-0.01em;}
/* The focus ring is ink everywhere else. On red it is white, or it cannot be seen. */
.app-header :focus-visible{outline-color:var(--ro-paper);}
/* Narrow phones: the event's name steps down one rung so the brand row never wraps. */
@media (max-width:359px){ .app-header__event{font-size:var(--fs-0);} }
/* On a phone the brand row has room for the wordmark and the event's name and nothing more,
   so the mode chip is left out there rather than laid over the name. Nothing is lost: in
   demo mode the banner directly under this header says DEMO in full, the footer says it
   again, and both of those print. The chip returns from 480px up. */
@media (max-width:479px){ .app-header .chip{display:none;} }

/* ---------- .chip ----------
   ui.js builds these class names at runtime ("chip chip-" + mode). */
.chip{display:inline-flex;align-items:center;gap:6px;height:var(--line-1);
  font-size:var(--fs-caption);font-weight:700;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;padding:0 10px;border-radius:999px;
  border:1px solid var(--hairline);background:var(--panel-tint);color:var(--fg-dim);}
.chip:empty{display:none;}
.chip-demo{background:var(--ro-yellow-bg);border-color:var(--ro-yellow-line);color:var(--ro-yellow-ink);}
.chip-live{background:var(--ro-green-bg);border-color:var(--ro-green-line);color:var(--ro-green-text);}
.chip-stale{background:var(--panel-tint);border-color:var(--hairline);color:var(--fg-dim);}

/* ---------- .demo-banner ----------
   Shown at the top of every page in demo mode by ui.js renderDemoBanner(). The
   chip alone is too quiet, and it is hidden in print: this banner PRINTS, so a
   sheet printed from demo mode can never pass for a real one. */
.demo-banner{margin:0 0 var(--s2);padding:var(--s1) var(--s2);
  background:var(--ro-yellow-bg);border:1px solid var(--ro-yellow-line);
  border-radius:var(--radius-sm);color:var(--ro-yellow-ink);
  font-size:var(--fs-small);font-weight:700;line-height:1.4;}
.demo-banner strong{font-weight:900;letter-spacing:.04em;}

/* ---------- .tile ---------- */
.tile-grid{display:grid;grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s2);}
@media (min-width:480px){.tile-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:820px){.tile-grid{grid-template-columns:1fr 1fr 1fr;}}
.tile{display:block;background:var(--panel-bg);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--s2);text-decoration:none;color:inherit;
  transition:border-color .15s ease;}
.tile:hover,.tile:focus-visible{border-color:var(--ro-red);color:inherit;}
.tile:active{transform:translateY(1px);}
.tile__title{font-size:var(--fs-0);font-weight:900;color:var(--fg);line-height:1.3;}
.tile__desc{font-size:var(--fs-caption);color:var(--fg-dim);margin-top:4px;}

/* ---------- .btn ----------
   Pages write class="btn primary". 48px is the touch minimum, including .sm:
   the height is a floor, so a button whose label wraps grows instead of
   clipping. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-height:var(--line-2);padding:var(--s1) var(--s3);
  font:inherit;font-weight:700;font-size:var(--fs-0);line-height:1.2;
  background:var(--panel-bg);color:var(--fg);border:1px solid var(--hairline);
  border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;text-align:center;}
.btn:hover{border-color:var(--fg);color:var(--fg);}
.btn:active{transform:translateY(1px);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:default;transform:none;}
.btn.primary{background:var(--ro-red);border-color:var(--ro-red);color:#fff;}
.btn.primary:hover{background:var(--ro-red-2);border-color:var(--ro-red-2);color:#fff;}
.btn.ghost{background:var(--ro-paper);}
.btn.danger{background:var(--ro-red-2);border-color:var(--ro-red-2);color:#fff;}
.btn.sm{min-height:var(--line-2);padding:var(--s1) var(--s2);font-size:var(--fs-small);}
.btn.block{display:flex;width:100%;}

/* DRAFT marking for a page that carries no shared footer. */
.draft-chip{display:inline-block;font-size:var(--fs-caption);font-weight:800;letter-spacing:.08em;
  color:var(--ro-red);background:#fff;border:1px solid var(--ro-red);border-radius:var(--radius-sm);
  padding:1px 7px;vertical-align:middle;margin-left:var(--s1);white-space:nowrap;}

/* ---------- fields ---------- */
.field{margin:var(--s1) 0;}
.field-note{font-size:var(--fs-caption);color:var(--fg-dim);margin-top:4px;}
.field-row{display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap;margin:var(--s1) 0;}

/* ---------- tables ---------- */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:var(--fs-small);}
th{font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-dim);text-align:left;padding:var(--s1);
  border-bottom:1px solid var(--hairline);}
/* nowrap only inside the scroll container. A bare table has nowhere to overflow
   to, so unwrappable headers would push the whole page sideways. */
.table-wrap th{white-space:nowrap;}
td{padding:var(--s1);border-bottom:1px solid var(--hairline);vertical-align:top;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}

/* ---------- .card ---------- */
.card{background:var(--panel-bg);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--s2);margin-top:var(--s2);}
.card > :last-child{margin-bottom:0;}
.card h2{font-size:var(--fs-0);font-weight:900;line-height:1.3;letter-spacing:0;
  margin:0 0 var(--s1);}

/* ---------- .ro-load ---------- */
.ro-load{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;
  font-size:var(--fs-small);font-weight:700;color:var(--fg-dim);}
.ro-load::before{content:"";flex-shrink:0;width:var(--s4);height:4px;border-radius:2px;
  background:var(--ro-red);animation:ro-pulse 1.1s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.ro-load::before{animation:none;opacity:.8;transform:none;}}

/* ---------- DRAFT footer ---------- */
.app-footer{max-width:480px;margin:var(--s3) auto 0;padding:var(--s2) 0 0;
  font-size:var(--fs-caption);color:var(--fg-dim);
  border-top:1px solid var(--hairline);text-align:center;}
/* A second demo marking that survives printing, beside the banner. */
.app-footer__demo{color:var(--ro-red-2);font-weight:800;}

/* ============================================================================
   WHAT A VOLUNTEER SEES: the sign-up form and the volunteer's own page.
   The markup for these is built in volunteer-view.js. Every value below is a
   system token. Phone first: every target is at least 48px tall, every input
   is 16px so a phone does not zoom on focus.
   ========================================================================== */

.is-hidden{display:none!important;}

/* A quiet secondary line under a heading or a value. */
.note{font-size:var(--fs-small);line-height:1.45;color:var(--fg-dim);margin:var(--s1) 0;}
.note strong{color:var(--fg);}

/* Section opening on the form: the larger gap sits ABOVE the heading. */
.sec{margin:var(--s4) 0 var(--s1);}
.sec h2{margin:0 0 4px;}
.sec .note{margin:0 0 var(--s1);}

/* "Required" micro-label. Uppercase is allowed at this size, tracked open. */
.req-tag{display:inline-block;margin-left:6px;font-size:var(--fs-caption);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ro-red-2);vertical-align:middle;}

/* ---------- .pick ----------
   A whole-row tick: a real checkbox inside its own label, so the full row is
   the target. Used for the four availability blocks and for every
   self-declared tick. Ticked is shown three ways (the box, the border, the
   weight), never by colour alone. */
.pick-set{border:0;margin:0;padding:0;min-width:0;}
.pick{display:flex;align-items:flex-start;gap:var(--s2);width:100%;cursor:pointer;
  min-height:var(--line-2);margin:var(--s1) 0;padding:12px var(--s2);
  font-size:var(--fs-0);font-weight:400;
  background:var(--panel-bg);border:1px solid var(--hairline);border-radius:var(--radius-sm);}
.pick:hover{border-color:var(--fg);}
.pick:has(.pick__cb:checked){border-color:var(--fg);background:var(--panel-tint);}
.pick:has(.pick__cb:focus-visible){outline:3px solid var(--fg);outline-offset:2px;}
.pick__cb{flex-shrink:0;width:var(--line-1);height:var(--line-1);margin:0;}
.pick__main{flex:1;min-width:0;}
.pick__title{display:block;font-weight:700;line-height:var(--line-1);color:var(--fg);}
.pick__date{display:block;font-size:var(--fs-small);font-weight:700;color:var(--fg);}
.pick__sub{display:block;font-size:var(--fs-small);line-height:1.45;color:var(--fg-dim);margin-top:2px;}
.pick--tick{align-items:center;}
.pick--tick .pick__title{font-weight:400;}
.pick--tick:has(.pick__cb:checked) .pick__title{font-weight:700;}
.pick-invalid{outline:3px solid var(--ro-red);outline-offset:4px;border-radius:var(--radius-sm);}

/* ---------- errors ---------- */
.inline-error{color:var(--ro-red-2);font-size:var(--fs-small);font-weight:700;margin:var(--s1) 0 0;}
input.is-invalid{border-color:var(--ro-red);}
.form-error{background:var(--ro-red-bg);border:1px solid var(--ro-red-line);
  border-left:var(--s1) solid var(--ro-red);color:var(--fg);
  border-radius:var(--radius-sm);padding:var(--s2);font-weight:700;margin:var(--s2) 0;}

/* ---------- the privacy notice ---------- */
.privacy{border-left:var(--s1) solid var(--fg-dim);background:var(--panel-tint);
  border-radius:var(--radius-sm);padding:var(--s2);margin:var(--s2) 0;font-size:var(--fs-small);line-height:1.45;}
.privacy__title{font-size:var(--fs-0);font-weight:900;line-height:1.3;margin:0 0 var(--s1);}
.privacy ul{margin:0;padding-left:var(--s3);}
.privacy li{margin:var(--s1) 0;}
.privacy li:last-child{margin-bottom:0;}

/* ---------- the private link, on the done screen ---------- */
.mylink{border:1px solid var(--fg);border-radius:var(--radius);padding:var(--s2);margin:var(--s2) 0 var(--s3);}
.mylink > .btn{margin-top:var(--s1);}
/* The whole link shows, wrapped, so it can be read and copied by hand if the button fails. */
.mylink__url{font-family:var(--font-mono);font-size:var(--fs-0);line-height:1.5;
  min-height:var(--line-3);word-break:break-all;resize:none;}
.mylink__warn{border-left:var(--s1) solid var(--ro-yellow);background:var(--ro-yellow-bg);
  border-radius:var(--radius-sm);padding:var(--s2);margin:var(--s2) 0 0;}
.mylink__warn p{margin:0 0 var(--s1);max-width:none;}
.mylink__warn p:last-child{margin-bottom:0;}

/* ---------- the volunteer's own page ---------- */
/* The greeting leads the screen: one large element against quiet body text. */
.hello{margin:var(--s3) 0 var(--s2);}
.hello__name{font-size:var(--fs-4);font-weight:900;line-height:1.0;letter-spacing:-0.015em;margin:0 0 var(--s1);}
.hello__event{font-size:var(--fs-0);font-weight:700;margin:0;}
.hello__meta{display:block;font-size:var(--fs-small);font-weight:400;color:var(--fg-dim);}

.banner{background:var(--ro-green-bg);border:1px solid var(--ro-green-line);color:var(--ro-green-text);
  border-radius:var(--radius-sm);padding:var(--s1) var(--s2);font-size:var(--fs-small);font-weight:700;margin:var(--s1) 0 var(--s2);}

.linkrow{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center;margin-top:var(--s2);}

.card--quiet{background:var(--panel-tint);border-color:var(--panel-tint);}

/* One assignment. A second one is separated by a fine line inside the card. */
.assign + .assign{border-top:1px solid var(--hairline);margin-top:var(--s3);padding-top:var(--s3);}
.assign__area{font-size:var(--fs-eyebrow);font-weight:700;line-height:var(--line-1);
  text-transform:uppercase;letter-spacing:.1em;color:var(--fg-dim);margin:0;}
.assign__role{font-size:var(--fs-2);font-weight:900;line-height:1.1;letter-spacing:-0.01em;margin:0 0 var(--s1);}
.assign__what{font-size:var(--fs-small);line-height:1.45;margin:0 0 var(--s1);}

/* Facts: a small quiet label over its value. */
.facts{margin:var(--s2) 0;}
.facts dt{font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-dim);margin:var(--s2) 0 2px;}
.facts dd{margin:0;}
.facts dd p{margin:0 0 4px;max-width:none;}

/* WHEN. The two clock times are the largest thing in the card. */
.when__day{font-weight:700;margin:0 0 var(--s1);}
.when__times{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);}
.when__label{display:block;font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-dim);}
.when__value{display:block;font-size:var(--fs-3);font-weight:900;line-height:1.1;letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.when__open{margin:0;}
/* An Ends line with no end set says so in words, not in the clock times' large type. */
.when__value--open{font-size:var(--fs-0);font-weight:700;letter-spacing:0;white-space:normal;}
/* A time that carries words ("after the closing awards, about 2:05 pm", "Short emergency briefing on arrival"): it
   wraps, in smaller type, so a phone never scrolls sideways (slice A8, fix pass round 2). */
.when__value--words{font-size:var(--fs-1);line-height:1.25;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;}
.when__ends{margin-top:var(--s1);}
/* The draft mark beside a time nobody has confirmed (standing rule 6 as amended, 5 October 2026):
   an amber chip, never hidden on paper. Its words come from time-mark.js. */
.time-mark{display:inline-block;margin:2px 0 0;padding:0 6px;border:1px solid var(--ro-yellow-line);
  border-radius:var(--radius-sm);background:var(--ro-yellow-bg);color:var(--ro-yellow-ink);
  font-size:var(--fs-caption);font-weight:700;line-height:1.6;letter-spacing:0;white-space:nowrap;
  vertical-align:middle;}
.when__time .time-mark{margin-top:4px;}

/* What they offered. */
.recap{list-style:none;margin:var(--s1) 0;padding:0;}
.recap li{margin:var(--s1) 0;}
.recap__date{display:block;font-size:var(--fs-small);color:var(--fg-dim);}

/* The day's outline: the time over what happens, row by row. */
.outline{list-style:none;margin:var(--s1) 0 0;padding:0;max-width:none;}
.outline__row{margin:0;padding:var(--s1) 0;border-top:1px solid var(--hairline);}
.outline__when{display:block;font-size:var(--fs-small);font-weight:700;font-variant-numeric:tabular-nums;}
.outline__what{display:block;font-size:var(--fs-small);line-height:1.45;color:var(--fg-dim);}

/* Numbered steps on the hub. */
.steps{margin:var(--s2) 0 0;padding-left:var(--s3);}
.steps li{margin:var(--s1) 0;}

/* Get ready, on a volunteer's own page: one set of questions after another, one question at
   a time. Long options wrap and read from the left edge. */
.ready-set + .ready-set{border-top:1px solid var(--hairline);margin-top:var(--s3);padding-top:var(--s3);}
.ready-set__title{font-size:var(--fs-1);font-weight:900;line-height:1.2;margin:0;}
.quiz__count{font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-dim);margin:var(--s2) 0 var(--s1);}
.quiz__q{font-weight:700;margin:0 0 var(--s2);}
.quiz__options{display:grid;gap:var(--s1);}
.quiz__opt{justify-content:flex-start;text-align:left;font-weight:400;}
.quiz__done{list-style:none;margin:0 0 var(--s2);padding:0;}
.quiz__was{margin:var(--s1) 0;padding:var(--s1) var(--s2);border:1px solid var(--hairline);border-radius:var(--radius-sm);}
.quiz__was.is-right{border-left:var(--s1) solid var(--ro-green);font-weight:700;}
.quiz__was.is-wrong{border-left:var(--s1) solid var(--ro-red);}
.quiz__tag{font-size:var(--fs-small);font-weight:700;color:var(--fg-dim);}
.quiz__verdict{margin:0 0 var(--s1);}
.quiz__line{font-size:var(--fs-small);line-height:1.45;border-left:var(--s1) solid var(--hairline);
  padding-left:var(--s2);margin:var(--s1) 0;}
.quiz__from{font-weight:700;}
.quiz__done-line{font-size:var(--fs-1);font-weight:900;line-height:1.25;margin:var(--s2) 0 var(--s1);}
.quiz__missed{margin:0 0 var(--s1);padding-left:var(--s3);}

/* ---------- print ---------- */
@media print{
  .app-header,.chip,.no-print,.ro-load{display:none!important;}
  /* The draft mark is printed: a time on paper says it may change, as it does on the screen. */
  .time-mark{background:#fff;border:1pt solid var(--ro-ink);color:var(--ro-ink);}
  /* The banner and the footer are the defence against a demo sheet being handed
     out as real, so give both real weight on paper. */
  .demo-banner{font-size:13pt;border:2pt solid #C82029;color:#C82029;background:#fff;}
  .app-footer{font-size:11pt;}
  .app-footer__demo{display:block;margin-top:2mm;font-size:13pt;color:#C82029;}
  body{background:#fff;}
  .print-page{page-break-after:always;}
  .print-page:last-child{page-break-after:auto;}
  @page{margin:12mm;}
}