/* ============================================================
   awanagames.com — "Kit", laid out as "Lane"
   Direction: team apparel. Light ground so it holds up in a bright
   gym, Awana's own green and red, chunky athletic type, and one hard
   diagonal repeated everywhere as the signature.

   Layout, chosen 2026-08-11: the splash's neutral ground, drifting
   track lines and solid-word/hollow-word lockup continue onto every
   page, and sections are joined by a skewed colour .cut rather than a
   border. Chrome is light; the programme colour is a rule under the
   header and above the footer, not a slab.

   Colour has one job per hue. Programme colour: hero, chrome rules,
   active states. Navy: every section heading and the dark panels.
   Orange/blue/green: the three record tiers, nothing else.

   The skew angle is -9deg and it is used on purpose: rank badges,
   the lockup, the cut, the record block. Keep it consistent.

   Commits to one light world. Every color is painted explicitly.
   ============================================================ */

/* ---------- fonts (self-hosted, no CDN) ---------- */
/* Archivo is a variable font: one file covers every weight. Declaring it
   once with a weight RANGE means the browser downloads 35KB instead of the
   same 35KB three times under three names. Do not split this back out into
   per-weight faces. */
@font-face{font-family:"Archivo Black";src:url("../fonts/archivo-black-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* Sampled off Awana's own T&T and Sparks pages (awanabasics.awana.org) on
   2026-08-11, so the site sits in the same family as the material a leader
   already has in front of them. Their system is:
     green  #3ECF7C / #34AD68   T&T
     red    #FF4746             Sparks
     blue   #3379FF             action, shared by both
     navy   #263A63             ink
     grey   #E8EBF1             page ground
   Two of those are used here at a darker value and the reason is contrast:
   Awana puts the bright green and red on hero panels behind navy text, never
   behind white text. We need chrome that carries white nav links, and
   #34AD68 on white is 2.9:1. So --royal is a deeper cousin, and Awana's
   actual brights live in --royal-bright / --energy-2 for accents. */
:root{
  /* ground */
  --track:#E8EBF1;          /* page — Awana's own */
  --panel:#FFFFFF;          /* cards */
  --panel-2:#EDF0F6;        /* table headers, insets */
  --line:#D4D7DE;           /* Awana's own */
  --line-soft:#E4E7EE;

  /* ink */
  --ink:#1A2436;
  --ink-2:#5D6272;          /* Awana's own body grey */
  /* Awana's muted is #8D919E, which they use on white. Ours sits on the grey
     ground and carries 10px uppercase labels, where it measured 2.6:1. This is
     the same hue taken down until those labels clear 4.5:1. */
  --dim:#5F6779;
  --navy:#263A63;           /* Awana's own heading navy */

  /* kit — T&T is green primary, blue secondary.
     --royal is the chrome: header, footer, headings.
     --energy is the accent on light ground: buttons, links, focus.
     --energy-2 is the same accent shifted light enough to read ON --royal,
     because a mid blue on a mid green is invisible. Anywhere the accent sits
     over the chrome, use --energy-2, not --energy. */
  --royal:#12793F;
  --royal-2:#0E7A46;
  --royal-bright:#3ECF7C;  /* Awana's T&T green, for accents on dark only */
  /* Awana's blue is #3379FF. This is it taken down far enough to clear 4.5:1
     as small text on the grey ground, which #1C6DE0 did not (4.08:1). */
  --energy:#1A63CF;
  --energy-2:#5C9BFF;
  --energy-deep:#11529F;   /* pressed / hover state of --energy, and accent
                              text on a pale ground where --energy is too light */
  --royal-tint:#E4F5EB;    /* pale wash of the chrome, for inline tags */
  --energy-tint:#EDF3FE;   /* pale wash of the accent, for callouts */

  /* record tiers. Fill colors carry white text; -ink is for text on
     white; -soft tints a row. Never swap these roles.
     The fills are darker than the obvious orange/green because they sit
     behind 9px white chip text: #EA580C measured 3.6:1 and #12885A 4.5:1.
     Hues are unchanged, so the three still read apart at a glance. */
  --t-world:#C2410C;    --t-world-ink:#B44507;  --t-world-soft:#FFF2EA;
  --t-region:#1D6FD0;   --t-region-ink:#14539E; --t-region-soft:#EBF3FD;
  --t-church:#0F7A4E;   --t-church-ink:#0C6942; --t-church-soft:#E9F7F0;

  --record:var(--energy);
  --lane-red:#DC2F26; --lane-blue:#1D6FD0; --lane-green:#12885A; --lane-gold:#EA580C;
  --warn:#C42B21;

  --display:"Archivo Black","Archivo",system-ui,-apple-system,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Archivo",system-ui,-apple-system,sans-serif;

  --skew:-9deg;
  --shadow:0 1px 2px rgba(12,16,23,.05), 0 10px 24px -16px rgba(12,16,23,.28);
  --pad:clamp(16px,4vw,28px);
  --maxw:1120px;
  /* Full-bleed bars use this so their contents line up with .wrap instead
     of hugging the window edge on a wide screen. */
  --edge:max(var(--pad), calc((100% - var(--maxw)) / 2));
}

/* The HTML `hidden` attribute only sets display:none in the UA stylesheet, so
   ANY author rule that sets display beats it. That is not a corner case here:
   .globetip is display:flex and .splash-games is display:inline-flex, and both
   are toggled with .hidden from script, so both rendered as empty boxes while
   claiming to be hidden. The tooltip drew a navy blob on the north pole of the
   globe for an afternoon. One rule, rather than remembering per selector. */
[hidden]{display:none !important}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--track);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:680px}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(36px,8.5vw,72px)}
h2{font-size:clamp(24px,5vw,38px)}
h3{font-size:clamp(18px,3.2vw,23px)}
p{margin:0}

a{color:var(--royal-2);text-underline-offset:3px}
a:hover{color:var(--energy)}
:focus-visible{outline:3px solid var(--energy);outline-offset:2px;border-radius:4px}
/* The accent is a mid blue and disappears against the chrome, so the focus
   ring switches to the light accent anywhere the ground is dark. */
.sitehead :focus-visible,.sitefoot :focus-visible,body.is-splash :focus-visible{outline-color:var(--energy-2)}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:10px;z-index:99;background:var(--energy);color:#fff;padding:10px 15px;border-radius:6px;font-weight:700;font-size:13px}

/* The signature move is now the track lines plus the skewed .cut, both set
   near the hero below. This class only establishes the containing block; the
   old corner wedge was retired when the pages went to the "Lane" layout, and
   the class is kept because it is on the markup of all 16 pages. */
.lanes{position:relative;overflow:hidden}

/* visually hidden, still read by screen readers and crawlers */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- site header ----------
   Light, not a solid colour slab. The splash is airy neutral ground and a
   saturated bar two clicks later was the seam that made the site feel like
   two different products. The programme colour survives as the rule
   underneath and the pill, which is all the slab was ever communicating. */
.sitehead{background:var(--panel);border-bottom:4px solid var(--royal)}
.sitehead .wrap{display:flex;align-items:center;gap:8px 14px;min-height:60px;flex-wrap:wrap;position:relative;z-index:1;padding-top:8px;padding-bottom:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.logo svg{width:26px;height:26px;flex:none}
.logo b{font-family:var(--display);text-transform:uppercase;font-size:18px;letter-spacing:-.02em;color:var(--navy)}
.logo:hover b{color:var(--royal)}
.nav{display:flex;gap:2px;flex-wrap:wrap}
/* 13px in a 44px target. Was 11px in 28px, which is under the usual touch
   floor -- guidance that exists mostly for people with less steady hands,
   which is a fair description of a lot of this site's audience. */
.nav a{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:13px 11px;border-radius:6px;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
@media(min-width:560px){.nav a{font-size:13.5px;letter-spacing:.07em;padding:13px 13px}}
.nav a:hover{color:var(--royal);background:var(--royal-tint)}
.nav a[aria-current="page"]{color:#fff;background:var(--royal)}

/* ---------- hero ("Lane") ----------
   Same ground as the splash, same drifting track lines, so walking from the
   front door into a programme reads as one continuous surface rather than
   two pages. The section ends on a skewed colour rule, not a box edge. */
.hero{background:var(--track);padding:clamp(30px,6.5vw,58px) 0 clamp(26px,4vw,40px);position:relative;overflow:hidden}
.hero .wrap{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}
.hero h1{color:var(--royal)}
.hero p.lede{font-size:clamp(15px,2.4vw,19px);color:var(--ink-2);max-width:640px}
.herostats{display:flex;flex-wrap:wrap;gap:14px 34px;padding-top:16px;border-top:2px solid var(--line)}
.stat{display:flex;flex-direction:column;gap:1px}
.stat b{font-family:var(--display);font-size:30px;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.03em;transform:skewX(var(--skew));display:inline-block}
.stat span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* the splash's track lines, reused. Absolutely positioned, so .hero must
   stay position:relative or these escape its overflow:hidden. */
.hero::before{
  content:"";position:absolute;inset:-45%;pointer-events:none;z-index:0;opacity:.07;
  transform:rotate(-24deg);
  background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 94px);
}

/* solid word + hollow word, the move the splash opens with. The hollow word
   carries the page's state: "Records" on T&T, "Soon" on Sparks. */
.lockup{display:flex;align-items:baseline;gap:clamp(8px,1.6vw,16px);flex-wrap:wrap}
.lockup .solid{font-family:var(--display);font-size:clamp(44px,9vw,82px);text-transform:uppercase;
  letter-spacing:-.035em;line-height:.9;color:var(--royal);transform:skewX(var(--skew));display:block}
.lockup .hollow{font-family:var(--display);font-size:clamp(26px,5vw,48px);text-transform:uppercase;
  letter-spacing:-.03em;line-height:.9;color:var(--navy);transform:skewX(var(--skew));display:block}
/* Guarded: without stroke support, color:transparent renders the word
   invisible rather than merely unstyled. */
@supports (-webkit-text-stroke:2px currentColor){
  .lockup .hollow{color:transparent;-webkit-text-stroke:clamp(1.5px,.28vw,3px) var(--navy)}
}

/* the skewed rule that closes a hero. A wedge of page colour cuts across a
   band of programme colour, so the join is a diagonal, not a border. */
.cut{height:clamp(30px,4vw,44px);background:var(--royal);position:relative;overflow:hidden}
/* The wedge hangs below the bar and is taller than it, so what is left is a
   solid band with one diagonal edge. Keep it overhanging: sized to sit inside
   the bar it renders as two thin lines with a gap. */
.cut::after{content:"";position:absolute;left:-10px;right:-10px;bottom:-20px;height:38px;
  background:var(--track);transform:skewY(-1.2deg)}

/* ---------- filter chips ---------- */
.filterbar{position:sticky;top:0;z-index:20;background:rgba(241,245,250,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:13px var(--edge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);background:var(--panel);border:2px solid var(--line);
  padding:12px 18px;min-height:44px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:color .12s,border-color .12s,background .12s;
}
.chip:hover{color:var(--royal);border-color:var(--royal-2)}
.chip[aria-pressed="true"]{color:#fff;border-color:var(--royal);background:var(--royal)}

/* ---------- status strip ---------- */
.status{padding:11px var(--edge);border-bottom:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--dim);display:flex;flex-wrap:wrap;gap:5px 16px;align-items:center;background:var(--panel-2)}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--t-church);flex:none}
.status.is-warn{color:#8A2C1E;background:#FDECE6;border-bottom-color:#F5C4B2}
.status.is-warn .dot{background:var(--warn)}

/* ---------- event block ---------- */
.event{padding:clamp(26px,5vw,46px) 0;border-bottom:1px solid var(--line)}
.event > .wrap{display:flex;flex-direction:column;gap:18px}
.evhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.evhead h2{scroll-margin-top:74px;color:var(--navy)}
.evhead .fmt{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--royal-2);background:var(--royal-tint);border-radius:999px;padding:4px 11px}
.evhead .ruleslink{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--energy);text-decoration:none}
.evhead .ruleslink:hover{text-decoration:underline}
.evblurb{color:var(--ink-2);font-size:15px;max-width:640px;margin-top:-8px}

.divisions{display:flex;flex-direction:column;gap:24px}
.division{display:flex;flex-direction:column;gap:9px}
.divhead{display:flex;align-items:center;gap:11px}
.divhead .lbl{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--navy)}
.divhead .rule{flex:1;height:2px;background:var(--line)}

/* ---------- record rows ---------- */
.rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}

.row{display:grid;grid-template-columns:44px 5px 1fr auto;gap:0 12px;align-items:center;padding:12px 14px 12px 0;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row .rank{
  font-family:var(--display);font-size:23px;color:#B7C2CE;text-align:center;
  font-variant-numeric:tabular-nums;transform:skewX(var(--skew));letter-spacing:-.04em;
}
.row .lane{width:5px;height:30px;border-radius:3px;background:#E3E9F1}
.row .who{min-width:0}
.row .church{font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.row .meta{font-size:12px;color:var(--dim);margin-top:3px;overflow-wrap:anywhere;font-weight:500}
.row .meta .sep{opacity:.5;padding:0 5px}
.row .time{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.04em;text-align:right;color:var(--ink)}
.row .gap{font-size:11px;font-weight:700;color:var(--dim);text-align:right;margin-top:1px;font-variant-numeric:tabular-nums}

@media(min-width:760px){
  .row{grid-template-columns:56px 5px minmax(250px,1.5fr) 1.3fr 116px 100px;gap:0 16px;padding:13px 16px 13px 0}
  .row .meta{display:none}
  .row .detail,.row .verif{font-size:12px;color:var(--dim);font-weight:500;min-width:0}
  .row .rank{font-size:27px}
  .row .timecell{text-align:right}
}
.row .detail,.row .verif{display:none}
@media(min-width:760px){.row .detail,.row .verif{display:block}}

.rowhead{display:none}
@media(min-width:760px){
  .rowhead{display:grid;grid-template-columns:56px 5px minmax(250px,1.5fr) 1.3fr 116px 100px;gap:0 16px;padding:10px 16px 10px 0;
    border-bottom:2px solid var(--line);background:var(--panel-2)}
  .rowhead span{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .rowhead span:first-child{text-align:center}
  .rowhead .r{text-align:right}
}

/* ---------- record tiers ----------
   Orange = world, blue = regional, green = church best. Reserved.
   An ordinary row's rank and lane stay grey so color always means a tier. */
.row .badge{
  font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;border-radius:4px;padding:3px 7px;margin-left:7px;
  vertical-align:3px;white-space:nowrap;display:inline-block;
}
/* A row can carry more than one, so each badge is colored by its own tier
   rather than inheriting the row's. */
.row .badge.b-world{background:var(--t-world)}
.row .badge.b-regional{background:var(--t-region)}
.row .badge.b-church{background:var(--t-church)}
.row.tier-world{background:var(--t-world-soft)}
.row.tier-world .rank{color:#fff;background:var(--t-world);border-radius:5px;padding:5px 0}
.row.tier-world .time{color:var(--t-world-ink)}
.row.tier-world .badge{background:var(--t-world)}

.row.tier-regional{background:var(--t-region-soft)}
.row.tier-regional .rank{color:#fff;background:var(--t-region);border-radius:5px;padding:5px 0}
.row.tier-regional .time{color:var(--t-region-ink)}
.row.tier-regional .badge{background:var(--t-region)}

.row.tier-church{background:var(--t-church-soft)}
.row.tier-church .rank{color:#fff;background:var(--t-church);border-radius:5px;padding:5px 0}
.row.tier-church .time{color:var(--t-church-ink)}
.row.tier-church .badge{background:var(--t-church)}

/* Official is where a time was set, not how fast. Neutral on purpose. */
.row .official{
  font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--royal-2);background:var(--royal-tint);border-radius:4px;padding:2px 6px;
  margin-left:8px;white-space:nowrap;display:inline-block;
}

/* Any row belonging to the looked-up church, tier or not. */
.row.is-mine{box-shadow:inset 4px 0 0 var(--t-church)}

/* ---------- church lookup ---------- */
.lookup{display:flex;align-items:flex-end;gap:10px;padding:14px var(--edge) 4px;flex-wrap:wrap}
.lookup form{position:relative;flex:1 1 280px;max-width:430px}
.lookup label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:6px}
.lookup input{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:11px 14px;
}
.lookup input::placeholder{color:#96A2AF}
.lookup input:focus{border-color:var(--energy);outline:none;box-shadow:0 0 0 4px rgba(22,104,201,.16)}
.results{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 20px 44px -18px rgba(12,16,23,.4);max-height:min(58vh,340px);overflow-y:auto;
}
.sr-item{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-radius:7px;padding:10px 12px;color:var(--ink)}
.sr-item:hover,.sr-item.is-active{background:var(--royal-tint)}
.sr-name{font-family:var(--display);font-size:16px;text-transform:uppercase;letter-spacing:-.02em}
.sr-meta{font-size:11.5px;color:var(--dim);font-weight:500}
.sr-none{padding:12px;font-size:13px;color:var(--dim)}

/* ---------- church panel ---------- */
#churchpanel[hidden]{display:none}
.churchpanel{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;
  margin:6px var(--edge) 0;padding:16px 20px;
  border:2px solid var(--t-church);border-radius:12px;background:var(--t-church-soft);
}
.churchpanel.is-missing{border-color:var(--warn);background:#FDECE6}
.cp-id{font-size:12px;font-weight:700;letter-spacing:.09em;color:#fff;background:var(--t-church);border-radius:6px;padding:6px 10px;flex:none}
.churchpanel.is-missing .cp-id{display:none}
.cp-main{min-width:0}
.cp-name{font-family:var(--display);font-size:clamp(21px,4vw,29px);text-transform:uppercase;letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
.cp-meta{font-size:12.5px;color:var(--ink-2);margin-top:3px;font-weight:500}
.cp-stats{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.cp-stat{display:flex;flex-direction:column}
.cp-stat b{font-family:var(--display);font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--t-church)}
.cp-stat span{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cp-actions{display:flex;gap:8px;flex-wrap:wrap}
.cp-btn{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  background:var(--panel);color:var(--ink-2);border:2px solid var(--line);border-radius:8px;padding:10px 14px}
.cp-btn:hover{color:var(--royal);border-color:var(--royal-2)}
.cp-btn.is-on{color:#fff;border-color:var(--t-church);background:var(--t-church)}
.cp-btn.ghost{color:var(--dim)}

/* legend */
.legend{display:flex;gap:8px 18px;flex-wrap:wrap;padding:10px var(--edge) 12px}
.legend span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:3px;flex:none;transform:skewX(var(--skew))}
.legend i.sw-world{background:var(--t-world)}
.legend i.sw-regional{background:var(--t-region)}
.legend i.sw-church{background:var(--t-church)}

/* ---------- empty state ---------- */
.empty{
  border:2px dashed var(--line);border-radius:10px;padding:20px;background:var(--panel);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
}
.empty p{font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:-.02em;color:var(--navy)}
.empty small{font-size:13px;color:var(--dim);display:block;margin-top:3px;font-weight:500}
.empty a{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  text-decoration:none;background:var(--energy);border-radius:8px;padding:11px 16px;white-space:nowrap}
.empty a:hover{background:var(--energy-deep);color:#fff}

/* ---------- failure / loading ---------- */
.panel{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.panel.is-error{border-color:#F0B7A4;background:#FDECE6}
.panel h3{color:var(--navy)}
.panel p{color:var(--ink-2);font-size:15px;max-width:640px}
.panel code{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--dim);overflow-wrap:anywhere}
.loading{font-size:13px;font-weight:600;color:var(--dim);padding:46px var(--edge);text-align:center}

/* ---------- content pages ---------- */
.prose{padding:clamp(28px,6vw,54px) 0;display:flex;flex-direction:column;gap:18px}
.prose p,.prose li{color:var(--ink-2);font-size:16.5px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose strong{color:var(--ink);font-weight:700}
/* Navy, not --royal. The programme colour on every heading is what stopped it
   carrying meaning; it now belongs to the hero, the chrome and links only. */
.prose h1,.prose h2{color:var(--navy)}
.prose h2{margin-top:14px}
.prose h3{margin-top:8px}

.rulegrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media(min-width:640px){.rulegrid{grid-template-columns:180px 1fr}}
.rulegrid dt{background:var(--panel-2);padding:14px 18px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--royal)}
.rulegrid dd{background:var(--panel);padding:14px 18px;margin:0;color:var(--ink-2);font-size:15.5px}
.todo{color:#B44507;font-weight:600;font-size:14px}

.callout{border:2px solid var(--energy);background:var(--energy-tint);padding:18px 20px;border-radius:12px;display:flex;flex-direction:column;gap:9px}
/* --energy-deep, not --energy: heading-sized accent text has to clear 4.5:1
   on the tint, and Sparky yellow does not come close. */
.callout h2,.callout h3{color:var(--energy-deep);font-size:clamp(18px,3.2vw,23px)}
.callout p{color:var(--ink-2)}

/* inline-flex and min-height are what make an <a class="btn"> and a
   <button class="btn"> the same size. A button gets line-height:normal from
   the UA stylesheet rather than the inherited 20px, which left .btn.ghost at
   42.5px -- under the touch floor, and only on the button form. */
.btn{align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--energy);text-decoration:none;padding:14px 22px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.btn:hover{background:var(--energy-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--royal);border:2px solid var(--royal);padding:12px 20px}
.btn.ghost:hover{background:var(--royal);color:#fff}

/* ---------- rules index ---------- */
/* ---------- rules library ----------
   A locked rail of events beside the rules themselves. It replaced a grid of
   cards that linked away: to read two events you had to leave the page and
   come back, and the prose above it sat in a 680px column with a third of a
   desktop screen empty either side. */
.ruleslayout{display:grid;gap:22px;align-items:start;padding:clamp(22px,4vw,38px) 0 clamp(34px,6vw,58px)}
@media(min-width:900px){
  .ruleslayout{grid-template-columns:262px minmax(0,1fr);gap:34px}
}

.rulenav{display:flex;flex-direction:column;gap:5px;min-width:0}
@media(min-width:900px){
  /* 74px clears the sticky nothing above it and leaves the first tab visible
     under the header on a short window. */
  .rulenav{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;
           scrollbar-width:thin;padding-right:2px}
}
/* On a phone the rail becomes a swipeable strip pinned under the header,
   which is the same pattern the record board's event filter uses. */
@media(max-width:899px){
  .rulenav{position:sticky;top:0;z-index:15;flex-direction:row;overflow-x:auto;
    gap:7px;padding:11px var(--pad);margin:0 calc(var(--pad) * -1);
    background:rgba(232,235,241,.96);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);scrollbar-width:none}
  .rulenav::-webkit-scrollbar{display:none}
  .rulenav a{flex:none;border-radius:999px;padding:8px 14px;border:2px solid var(--line);background:var(--panel)}
  .rulenav .rn-num{display:none}
}

.rulenav a{
  display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--ink-2);
  font-size:13.5px;font-weight:600;line-height:1.25;padding:10px 12px;border-radius:9px;
  border:1px solid transparent;white-space:nowrap;
}
.rulenav a:hover{background:var(--panel);color:var(--royal);border-color:var(--line)}
.rulenav a[aria-current="true"]{background:var(--royal);color:#fff;border-color:var(--royal)}
.rulenav .rn-num{font-family:var(--display);font-size:11px;color:var(--dim);flex:none;
  font-variant-numeric:tabular-nums}
.rulenav a[aria-current="true"] .rn-num{color:rgba(255,255,255,.72)}
.rulenav a:hover .rn-num{color:var(--royal)}
.rn-head{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);padding:14px 12px 6px}
@media(max-width:899px){.rn-head{display:none}}

.rulepanel{min-width:0;display:flex;flex-direction:column;gap:18px}
.rulepanel > h2{color:var(--navy)}
.rulepanel .prose{padding:0}
/* The pane's own actions live at the TOP, next to the heading. Sending a
   reader to the bottom of a rules table to find the way out is what the
   card grid did wrong. */
.rp-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;
  padding-bottom:14px;border-bottom:2px solid var(--line)}
.rp-titles{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 320px}
.rp-titles h2{color:var(--navy);font-size:clamp(24px,4.2vw,34px)}
.rp-titles .lede{font-size:16px;color:var(--ink-2);max-width:62ch}
.rp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.rp-link{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--royal);background:var(--royal-tint);
  border-radius:7px;padding:9px 13px;white-space:nowrap}
.rp-link:hover{background:var(--royal);color:#fff}
/* Small and dim: it is a label for the pane, not a second lede competing
   with the blurb above it and the buttons beside it. */
.rp-meta{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim)}

.eventgrid{display:grid;gap:16px}
@media(min-width:640px){.eventgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.eventgrid{grid-template-columns:repeat(3,1fr)}}
.eventcard{
  display:flex;flex-direction:column;gap:9px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;
  box-shadow:var(--shadow);transition:border-color .12s,transform .12s;
}
.eventcard:hover{border-color:var(--energy);transform:translateY(-3px)}
.ec-top{display:flex;align-items:center;gap:10px}
.ec-num{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--royal);border-radius:5px;padding:4px 8px}
.eventcard h3{color:var(--navy)}
.ec-blurb{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.ec-div{font-size:12px;color:var(--dim);font-weight:600;line-height:1.5}
.ec-go{margin-top:auto;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--energy)}

/* ---------- single event page ---------- */
.ev-head{display:flex;flex-direction:column;gap:11px;margin-bottom:6px}
.ev-head h1{font-size:clamp(34px,8vw,58px);color:var(--royal)}
.ev-head .lede{font-size:17.5px;color:var(--ink-2)}
.dqbox{border:2px solid #F0B7A4;background:#FDECE6;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:11px}
.dqbox h2{font-size:20px;margin:0;color:#8A2C1E}
.dqbox ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.dqbox li{color:var(--ink-2);font-size:15.5px}
/* The old .ev-links pair of buttons at the foot of an event page is gone;
   the actions moved up under the heading as .ev-actions. */
.ev-actions{margin:0 0 4px}
/* Long-form rules read badly at full page width, so the event page keeps a
   measure without leaving a third of the screen empty: the rules table takes
   the width it needs and the prose around it is capped. */
.ev-head .lede,#eventrules > .prose > p{max-width:66ch}
.rulegrid{max-width:900px}

/* ---------- footer ---------- */
/* Navy, with the programme colour as the rule above it. That mirrors the
   header, which is light with the programme colour as the rule below it, so
   the page is bookended and the colour is a marker rather than a slab. */
.sitefoot{border-top:5px solid var(--royal);background:var(--navy);padding:32px 0 48px;margin-top:10px}
/* Centred as a block: the nav and the disclaimer share one axis, so the
   footer reads as one column rather than two ragged left-aligned strips. */
.sitefoot .wrap{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
/* .68 white came out at 4.03:1 on the green. 13px body text needs 4.5. */
.sitefoot p{font-size:13px;color:rgba(255,255,255,.78);max-width:660px;line-height:1.65}
.sitefoot .disclaimer{color:rgba(255,255,255,.88)}
.sitefoot nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.sitefoot nav a{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none}
.sitefoot nav a:hover{color:#fff}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   TWO PROGRAMMES
   T&T keeps the royal/orange kit. Sparks goes red, because that is
   what a Sparks vest looks like.

   The three record-tier colors (--t-world / --t-region / --t-church)
   deliberately do NOT change between programs. They are a data
   language, not branding, and a regional record has to mean the same
   thing on both sides of the site.
   ============================================================ */
[data-program="Sparks"]{
  --royal:#C42B21;       /* Awana's #FF4746 darkened to hold white nav links */
  --royal-2:#B32020;
  --royal-bright:#FF4746;  /* Awana's actual Sparks red */
  --energy:#E8A100;      /* Sparky yellow */
  --energy-2:#FFC53D;
  --energy-deep:#8A6100;   /* Sparky yellow is unreadable as text on white */
  --royal-tint:#FCE9E7;
  --energy-tint:#FFF6E3;
  --on-energy:#2A1200;   /* dark ink, because yellow needs it */
}
:root{ --on-energy:#FFFFFF; }

/* Pages that belong to both clubs — /submit and /about — wear neither club's
   colour. Swapping the token rather than restyling each component is what
   keeps the header rule, the hero wordmark, the cut and the nav states in
   step; restyle them one at a time and the next thing added comes out green.
   The lockup still reads as two words because the hollow one is an outline,
   so filled navy against outlined navy keeps the contrast in shape, not hue. */
body.is-shared{
  --royal:#263A63;
  --royal-2:#1C2C4C;
  --royal-tint:#E7EAF2;
}

.btn{color:var(--on-energy)}
.btn:hover{color:var(--on-energy)}
.empty a{color:var(--on-energy)}
.empty a:hover{color:var(--on-energy)}
.nav a[aria-current="page"]{color:var(--on-energy)}
.skip:focus{color:var(--on-energy)}

/* program pill in the header */
.progpill{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--royal);background:var(--royal-tint);border:1px solid transparent;
  border-radius:999px;padding:5px 12px;white-space:nowrap;
}
.progpill:hover{background:var(--royal);color:#fff}
.progpill[aria-current="page"]{background:var(--royal);border-color:var(--royal);color:#fff}

/* ============================================================
   SPLASH — the front door
   AWANA races in from the left, GAMES from the right, they meet,
   and the chooser rises underneath.

   ⚠️ This page is deliberately NEUTRAL. It carries no data-program
   attribute, so it borrows neither palette: it is the page where you
   pick a side, and wearing one side's colours pre-answers the question.
   The only colour on it is the green and the red on the two cards.
   Ground and ink are Awana's own #E8EBF1 and #263A63.
   ============================================================ */
body.is-splash{background:var(--track);color:var(--navy);min-height:100vh;display:flex;flex-direction:column}
.splash{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(28px,7vw,64px) var(--pad);overflow:hidden;position:relative}
/* position:relative above is load-bearing: .tracklines is absolutely
   positioned, and without it the track lines resolve against the viewport
   and escape this overflow:hidden, pushing the page 449px wide on a
   phone. Do not remove it. */
.splash-inner{width:100%;max-width:var(--maxw);display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4vw,34px)}

.wordmark{display:flex;flex-direction:column;align-items:center;position:relative;width:100%}
.wm-line{position:relative;display:block;line-height:.86}
.wm-line b{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(56px,17vw,190px);letter-spacing:-.035em;display:block;
  transform:skewX(var(--skew));
}
/* AWANA solid, GAMES hollow. Two weights of the same ink instead of two
   colours, so the wordmark stays neutral. The @supports guard matters:
   without the stroke, color:transparent would render GAMES invisible. */
.wm-top b{color:var(--navy)}
.wm-bot b{color:var(--navy)}
@supports (-webkit-text-stroke:2px currentColor){
  .wm-bot b{
    color:transparent;
    -webkit-text-stroke:clamp(2px,.5vw,5px) var(--navy);
    paint-order:stroke fill;
  }
}
.wm-rule{display:block;height:5px;width:min(78%,640px);background:var(--navy);border-radius:3px;
  transform:skewX(var(--skew));margin:clamp(4px,1vw,10px) 0 clamp(6px,1.4vw,14px);order:1}
.wm-top{order:0}
.wm-bot{order:2}

/* speed streaks trailing each word */
.streaks{position:absolute;top:14%;bottom:14%;width:min(46vw,420px);pointer-events:none;opacity:0;
  background:repeating-linear-gradient(90deg,rgba(38,58,99,.4) 0 3px,transparent 3px 13px);
  transform:skewX(var(--skew));}
.wm-top .streaks{right:100%;margin-right:12px}
.wm-bot .streaks{left:100%;margin-left:12px;
  background:repeating-linear-gradient(90deg,rgba(38,58,99,.26) 0 3px,transparent 3px 13px)}

.splash-kicker{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}

.chooser{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.chooser-lead{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.chooser-grid{display:grid;gap:14px;width:100%;max-width:760px}
@media(min-width:640px){.chooser-grid{grid-template-columns:1fr 1fr}}

.pcard{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;position:relative;overflow:hidden;
  background:#fff;border-radius:14px;padding:22px 22px 20px;color:var(--ink);
  box-shadow:0 14px 30px -18px rgba(38,58,99,.4);
  /* Each card wears its own programme's colour. That is the whole job of
     this page, and on a neutral ground it is the only colour present. */
  border-top:6px solid #34AD68;
  transition:transform .14s ease, box-shadow .14s ease;
}
.pcard:hover{transform:translateY(-6px);box-shadow:0 26px 46px -20px rgba(38,58,99,.5);color:var(--ink)}
.pcard-go{transition:transform .16s ease}
.pcard:hover .pcard-go{transform:translateX(5px)}
.pcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 42%,rgba(38,58,99,.09) 50%,transparent 58%);
  transform:translateX(-120%);transition:transform .55s ease,opacity .2s ease;
}
.pcard:hover::after{opacity:1;transform:translateX(120%)}
.pcard-sparks{border-top-color:#FF4746}
.pcard-grade{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.pcard-name{font-family:var(--display);font-size:clamp(34px,6vw,48px);text-transform:uppercase;letter-spacing:-.03em;line-height:1;color:var(--royal)}
.pcard-sparks .pcard-name{color:#C42B21}
.pcard-sub{font-size:14.5px;color:var(--ink-2)}
.pcard-meta{font-size:12.5px;color:var(--dim);margin-top:4px}
.pcard-meta b{color:var(--ink);font-weight:700}
.pcard-go{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--royal)}
.pcard-sparks .pcard-go{color:#C42B21}
/* T&T states its colour outright instead of leaning on --royal, because this
   chooser also runs on /submit where the token is navy. Same values the
   token carries on the splash, so nothing moves there. */
.pcard-tt{border-top-color:#34AD68}
.pcard-tt .pcard-name,.pcard-tt .pcard-go{color:#12793F}
/* Sits directly under the chooser, so it pulls up tight against it rather
   than taking the .prose gap and reading as a new paragraph. */
.formnote{font-size:13px;color:var(--dim);margin-top:-6px}

body.is-splash .sitefoot{background:transparent;border-top:1px solid var(--line);margin-top:0}
/* --ink-2, not --dim: --dim on this ground is 2.6:1 and the disclaimer is
   the one paragraph on the site that has to be legible. */
body.is-splash .sitefoot p,body.is-splash .sitefoot .disclaimer{color:var(--ink-2)}
body.is-splash .sitefoot nav a{color:var(--ink-2)}
body.is-splash .sitefoot nav a:hover{color:var(--navy)}

/* ---- ambient track lines ----
   Slow diagonal drift behind everything. The page has a pulse before the
   animation starts and after it ends, which is most of what stops a splash
   feeling like it froze. background-position loops seamlessly; a transform
   would fight the rotate. */
.tracklines{
  position:absolute;inset:-45%;pointer-events:none;z-index:0;opacity:.07;
  transform:rotate(-24deg);
  background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 94px);
}
.splash-inner{position:relative;z-index:1}

/* bloom where the words meet, on impact. White on the light ground: a dark
   flash would read as a bruise rather than an impact. */
.wm-flash{
  position:absolute;left:-8%;right:-8%;top:-18%;bottom:-18%;pointer-events:none;
  border-radius:50%;opacity:0;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.95),rgba(255,255,255,0) 62%);
}

/* ---- the race ----
   Sequenced, not overlapping: both words land, the rule draws under them,
   then the cards arrive one after the other. Nothing overshoots -- an
   overshoot keyframe snapping back reads as a twitch at this size.

   AWANA 0-0.95s · GAMES 0.18-1.13s · bloom 1.0s · rule 1.15-1.55s
   kicker 1.35s · T&T card 1.55s · Sparks card 1.72s, each over 0.85s. */
@media(prefers-reduced-motion:no-preference){
  .wm-line b{will-change:transform,opacity}
  .wm-top b{animation:race-in-left .95s cubic-bezier(.14,.8,.24,1) both}
  .wm-bot b{animation:race-in-right .95s cubic-bezier(.14,.8,.24,1) .18s both}
  .wm-top .streaks{animation:streak .8s ease-out both}
  .wm-bot .streaks{animation:streak .8s ease-out .18s both}
  .wm-flash{animation:bloom 1.1s ease-out 1s both}
  .wm-rule{animation:rule-grow .42s cubic-bezier(.2,.85,.3,1) 1.15s both}
  .splash-kicker{animation:kicker-in .8s cubic-bezier(.22,.7,.3,1) 1.35s both}
  .chooser-lead{animation:soft-rise .7s cubic-bezier(.22,.7,.3,1) 1.45s both}
  .pcard{will-change:transform,opacity}
  /* Delays follow POSITION, not programme: the reveal has to sweep left to
     right. Sparks sits on the left, so it goes first. Swap the cards in
     index.html and these two numbers swap with them. */
  .pcard-sparks{animation:card-in .85s cubic-bezier(.22,.7,.3,1) 1.55s both}
  .pcard-tt{animation:card-in .85s cubic-bezier(.22,.7,.3,1) 1.72s both}
  .tracklines{animation:drift 11s linear infinite}
}
@keyframes race-in-left{
  0%{transform:translateX(-130%) skewX(-26deg);opacity:0}
  28%{opacity:1}
  100%{transform:translateX(0) skewX(var(--skew));opacity:1}
}
@keyframes race-in-right{
  0%{transform:translateX(130%) skewX(-26deg);opacity:0}
  28%{opacity:1}
  100%{transform:translateX(0) skewX(var(--skew));opacity:1}
}
@keyframes streak{0%{opacity:.9}55%{opacity:.55}100%{opacity:0}}
@keyframes bloom{0%{opacity:0;transform:scale(.72)}30%{opacity:.9}100%{opacity:0;transform:scale(1.3)}}
@keyframes rule-grow{0%{transform:scaleX(0) skewX(var(--skew))}100%{transform:scaleX(1) skewX(var(--skew))}}
@keyframes kicker-in{0%{opacity:0;letter-spacing:.5em}100%{opacity:1;letter-spacing:.22em}}
@keyframes soft-rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes card-in{
  0%{opacity:0;transform:translateY(26px) scale(.965)}
  100%{opacity:1;transform:none}
}
@keyframes drift{from{background-position:0 0}to{background-position:94px 0}}

/* ============================================================
   T&T OVERVIEW PAGE
   ============================================================ */
/* Tier cards carry a left rail in the tier's own colour, the same colour the
   row wears on the board. Headings are ink, not --royal: the programme colour
   used on every heading is what stopped it meaning anything. */
.tiergrid{display:grid;gap:12px}
@media(min-width:820px){.tiergrid{grid-template-columns:repeat(3,1fr)}}
.tiercard{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 18px 20px 26px;display:flex;flex-direction:column;gap:8px;
  position:relative;overflow:hidden}
.tiercard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}
.tiercard.t-world::before{background:var(--t-world)}
.tiercard.t-regional::before{background:var(--t-region)}
.tiercard.t-church::before{background:var(--t-church)}
.tc-chip{align-self:flex-start;font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;border-radius:4px;padding:4px 8px}
.t-world .tc-chip{background:var(--t-world)}
.t-regional .tc-chip{background:var(--t-region)}
.t-church .tc-chip{background:var(--t-church)}
.tiercard h3{color:var(--ink);font-size:clamp(16px,2.4vw,19px)}
.tiercard p{font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* One rhythm, not a second card grid: a list of rows in a single panel.
   No 01/02/03 numbering -- these are four independent things you can do,
   not four steps in an order. */
.dogrid{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.docard{display:grid;grid-template-columns:1fr auto;gap:2px 14px;text-decoration:none;
  padding:16px 18px;border-bottom:1px solid var(--line-soft);color:var(--ink);
  transition:background .12s}
@media(min-width:640px){
  .docard{grid-template-columns:200px 1fr auto;align-items:center;gap:0 18px}
}
.docard:last-child{border-bottom:0}
.docard:hover{background:var(--royal-tint)}
.docard h3{font-size:15px;color:var(--ink);letter-spacing:-.01em}
.docard p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.do-go{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--royal);white-space:nowrap;justify-self:start}
@media(min-width:640px){.do-go{justify-self:end}}
.docard:hover .do-go{text-decoration:underline;text-underline-offset:3px}

/* The two-adult rule is the one thing on the page that is not optional, so it
   gets the only dark panel. Navy, not the programme colour: it is true on
   both sides of the site. */
.strip{background:var(--navy);border-radius:12px;padding:20px 22px;
  display:grid;gap:8px}
/* Two columns once there is room. Stacked, a 64ch measure inside a 1100px
   panel wraps at about 60% and leaves the rest empty with a one-word last
   line; the heading column absorbs that space instead. */
@media(min-width:820px){
  .strip{grid-template-columns:minmax(180px,220px) 1fr;gap:10px 30px;align-items:start;padding:24px 26px}
  /* Explicit columns, not a span: the Sparks strip carries two paragraphs and
     any span count would drop a third one under the heading. */
  .strip h2,.strip h3{grid-column:1;grid-row:1}
  .strip p{grid-column:2}
  /* The button needs placing too. Left to auto-flow it lands in the first
     free cell AFTER the last auto-placed paragraph, which is row 3 -- so it
     sat at the foot of the panel, adrift from the heading it belongs to.
     Row 2 of column 1 puts it directly under the heading; the row is as tall
     as the paragraph beside it, so start alignment keeps it at the top. */
  .strip .btn{grid-column:1;grid-row:2;justify-self:start;align-self:start}
}
.strip h2,.strip h3{color:#fff;font-size:clamp(16px,2.6vw,20px)}
.strip p{color:rgba(255,255,255,.82);font-size:15px;max-width:68ch;text-wrap:pretty}
/* .prose strong is dark ink, which is invisible on the navy panel. */
.strip strong,.strip b{color:#fff}
.strip a{color:#fff}

/* ============================================================
   GAMES MAP
   The list is the content; the globe is a view onto it. That is why the
   list is real markup and the canvas is aria-hidden: everything the globe
   shows is in the list beside it.
   ============================================================ */
.gamesmap{display:grid;gap:22px;align-items:start;padding:clamp(20px,4vw,34px) 0 clamp(28px,5vw,44px)}
@media(min-width:960px){
  .gamesmap{grid-template-columns:minmax(320px,44%) minmax(0,1fr);gap:34px}
  /* The globe stays put while the list scrolls past it. */
  .globewrap{position:sticky;top:16px}
}

.globewrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
#globe{display:block;max-width:100%;cursor:grab;touch-action:none;border-radius:50%}
#globe.is-dragging{cursor:grabbing}
.globehint{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:center}

.globetip{
  position:absolute;z-index:5;pointer-events:none;
  background:var(--navy);color:#fff;border-radius:9px;padding:9px 12px;
  display:flex;flex-direction:column;gap:2px;max-width:230px;
  box-shadow:0 12px 26px -14px rgba(20,28,50,.8);
}
.globetip b{font-family:var(--display);font-size:13.5px;text-transform:uppercase;letter-spacing:-.01em}
.globetip span{font-size:12px;color:rgba(255,255,255,.82)}
.globetip .gt-count{font-weight:700;color:var(--royal-bright)}

.gameslist{display:flex;flex-direction:column;gap:11px;min-width:0}
.gamecard{
  display:grid;grid-template-columns:6px minmax(0,1fr);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:box-shadow .2s,border-color .2s;
}
.gamecard.is-lit{border-color:var(--royal);box-shadow:0 0 0 3px var(--royal-tint)}
.gc-rail{display:block}
.gc-body{padding:15px 17px;display:flex;flex-direction:column;gap:7px;min-width:0}
.gc-when{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.gc-when b{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.gc-count{font-family:var(--display);font-size:12.5px;color:var(--royal);letter-spacing:.02em}
.gamecard h3{font-size:clamp(17px,2.6vw,21px);color:var(--ink)}
.gc-where{font-size:14.5px;color:var(--ink-2)}
.gc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.gc-tag{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;border-radius:4px;padding:4px 8px;background:var(--dim)}
.gc-tag.gc-official{background:var(--navy)}
.gc-tag.gc-open{background:var(--t-church)}
.gc-tag.gc-ask{background:var(--panel-2);color:var(--ink-2)}
.gc-link{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--energy);text-decoration:none;margin-top:2px}
.gc-link:hover{text-decoration:underline;text-underline-offset:3px}
.gc-note{font-size:12.5px;color:var(--dim)}

/* The chooser's footnote on the splash, only shown when games exist. */
.splash-games{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.splash-games:hover{color:var(--navy)}
.splash-games b{font-family:var(--display);color:var(--navy)}

/* ============================================================
   PRINT
   Awana leaders run the games off a clipboard in a gym, not off a
   phone, so every rules page has to survive a trip through a black
   and white office printer. Screen chrome goes, colour goes, and
   links say where they point, because paper cannot be clicked.
   ============================================================ */
@media print {
  /* Ink economy and legibility beat brand fidelity on paper. */
  :root{
    --track:#FFF; --panel:#FFF; --panel-2:#FFF;
    --ink:#000; --ink-2:#1A1A1A; --dim:#3A3A3A; --navy:#000;
    --royal:#000; --royal-2:#000; --royal-tint:#FFF;
    --energy:#000; --energy-deep:#000; --energy-tint:#FFF;
    --line:#999; --line-soft:#CCC;
  }

  @page{ margin:16mm 14mm; }

  /* overflow:visible is load-bearing, not tidying. The base stylesheet sets
     overflow-x:hidden on both html and body to stop the splash track lines
     widening the page on a phone. An overflow container disables page
     fragmentation in Chrome, so with it in place every break-after:page is
     silently ignored and eight one-page sheets print as one long ribbon
     across three pages. */
  html,body{background:#fff !important;color:#000;font-size:11.5pt;overflow:visible !important}

  /* Navigation, decoration and anything interactive. None of it means
     anything on paper and all of it costs a sheet. */
  .sitehead,.sitefoot,.skip,.cut,.tracklines,.filterbar,.chips,
  .globewrap,.splash-games,.textsize,.btn,.wm-flash,.wm-rule,
  .searchwrap,.toggles,.legend{display:none !important}
  .hero::before{display:none !important}

  /* The page loses its header, so say where it came from. */
  body::before{
    content:"awanagames.com";
    display:block;font-family:var(--display);text-transform:uppercase;
    font-size:9pt;letter-spacing:.12em;border-bottom:1pt solid #999;
    padding-bottom:5pt;margin-bottom:12pt;
  }

  .wrap,.wrap.narrow{max-width:none;padding:0}
  .hero{padding:0 0 10pt;background:none}
  .prose{padding:0;gap:9pt}

  /* The hollow half of the lockup is transparent with a stroke on
     screen. Printers render that as a hairline outline that mostly
     disappears, so it goes back to solid black. */
  .lockup{display:block}
  .lockup .solid,.lockup .hollow{
    font-size:22pt;color:#000 !important;-webkit-text-stroke:0 !important;
    transform:none;display:inline;
  }
  h1,.ev-head h1{font-size:22pt}
  h2{font-size:14pt;margin-top:10pt}
  h3{font-size:12pt}
  .lede,.ev-head .lede{font-size:12pt}
  p,li,dd{font-size:11.5pt;line-height:1.45}

  /* Panels that were coloured blocks become ruled boxes. */
  /* .dqbox belongs in this list. It was the one panel left carrying its
     coral border and pink fill into print, and its heading colour prints on
     any colour printer whether or not background graphics are switched on. */
  .strip,.callout,.tiercard,.gamecard,.docard,.pcard,.dqbox{
    background:none !important;border:1pt solid #999 !important;
    box-shadow:none !important;color:#000 !important;padding:8pt 10pt;
  }
  .strip *,.callout *,.pcard *,.dqbox *{color:#000 !important}

  /* Nothing should be orphaned across a page break mid-thought. */
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  dl,dt,dd,li,tr,.tiercard,.gamecard,.callout,.strip{break-inside:avoid;page-break-inside:avoid}
  dt{margin-top:7pt}
  thead{display:table-header-group}

  /* Paper cannot be clicked, so a link has to say where it goes.
     Internal hrefs are root relative, so they get the domain back. */
  .prose a[href^="/"]::after{content:" (awanagames.com" attr(href) ")"}
  .prose a[href^="http"]::after{content:" (" attr(href) ")"}
  .prose a::after{font-size:9.5pt;color:#333;word-break:break-all}
  .prose a{color:#000;text-decoration:underline}

  /* Anything only worth reading on a screen. */
  .noprint{display:none !important}
  /* ...and its opposite, for the sheets built to be printed. */
  .printonly{display:block !important}
}

/* Print-only blocks stay out of the way on screen. */
.printonly{display:none}

/* ============================================================
   TIMING SHEETS
   The screen half is a list of buttons. The paper half is the grid
   you actually write on, and it only exists for the printer.
   ============================================================ */
.sheetlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sl-item{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.sl-item:last-child{border-bottom:0}
.sl-name{font-family:var(--display);text-transform:uppercase;font-size:16px;
  letter-spacing:-.01em;color:var(--ink)}
.sl-meta{grid-column:1;font-size:13px;color:var(--dim)}
.sl-btn{grid-column:2;grid-row:1/3;font-family:var(--body);font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--energy);
  border:0;border-radius:8px;padding:13px 18px;cursor:pointer;min-height:44px}
.sl-btn:hover{background:var(--energy-deep)}

/* Screen never shows the sheets: eight of them would bury the page. */
.sheet{display:none}

@media print {
  .sheet{display:block;break-after:page;page-break-after:always}
  #sheets{display:block}
  /* Two separate jobs. print-sheets drops the on-screen half of the page,
     which is instructions and buttons and would otherwise put two sheets of
     paper in front of the thing you asked for. print-one then narrows the
     set to a single sheet. Printing all eight wants the first without the
     second. */
  body.print-sheets main,body.print-sheets .hero{display:none !important}
  body.print-one .sheet{display:none}
  body.print-one .sheet.is-printing{display:block;break-after:auto;page-break-after:auto}
  /* "Print all eight" means eight. The one-page master is offered on its
     own button and would otherwise arrive as an unasked-for ninth sheet. */
  body.print-sheets:not(.print-one) .sheet-master{display:none}
  /* No trailing blank page after the final sheet. */
  .sheet:last-child{break-after:auto;page-break-after:auto}
  .sheetlist,.sl-btn{display:none !important}

  .sh-head{border-bottom:2pt solid #000;padding-bottom:6pt;margin-bottom:10pt}
  .sh-kicker{display:block;font-size:9pt;letter-spacing:.14em;text-transform:uppercase}
  .sh-head h2{font-size:24pt;margin:2pt 0 0}

  .sh-meta{display:flex;gap:18pt;margin-bottom:12pt}
  .sh-field{flex:1;display:flex;align-items:baseline;gap:6pt}
  .sh-field b{font-size:10pt;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
  /* The line you write on. */
  .sh-rule{flex:1;border-bottom:1pt solid #000;height:15pt}

  .sh-table{width:100%;border-collapse:collapse;margin-bottom:14pt}
  .sh-table th{font-size:9.5pt;text-transform:uppercase;letter-spacing:.08em;
    text-align:left;border-bottom:1.5pt solid #000;padding:4pt 6pt}
  .sh-table td{border-bottom:1pt solid #000;padding:0 6pt;height:30pt}
  .sh-div{font-size:11pt;font-weight:700;width:26%;white-space:nowrap}
  .sh-time{width:20%}
  /* The columns you write in need a visible box, not just a baseline. */
  .sh-time,.sh-who{border-left:1pt solid #999}

  .sh-sign{display:flex;gap:24pt;margin-bottom:8pt}
  .sh-signer{flex:1;display:flex;flex-direction:column;gap:2pt}
  .sh-signer b{font-size:10pt;text-transform:uppercase;letter-spacing:.08em}
  .sh-signer .sh-rule{height:26pt}
  .sh-signer small{font-size:8.5pt;color:#333}
  .sh-foot{font-size:9.5pt;color:#333;border-top:1pt solid #999;padding-top:5pt}
}

/* ---- the one-page master sheet ----
   Everything the games night needs on one side. It buys the space by
   dropping the spare rows and the per-event signatures, running two
   columns, and giving each division a box rather than a table row. */
@media print {
  .sheet-master .sh-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:7pt 16pt;margin-bottom:10pt;
  }
  .sheet-master .sh-ev{break-inside:avoid;page-break-inside:avoid}
  .sheet-master .sh-ev h3{
    font-size:11pt;text-transform:uppercase;letter-spacing:.04em;
    border-bottom:1.5pt solid #000;padding-bottom:2pt;margin:0 0 1pt;
  }
  /* 32pt, not the 21pt that would also fit. Everything still lands on one
     page with room to spare, and the spare is worth more as space to write
     a stopwatch reading in biro than as white space at the foot. */
  .sheet-master .sh-row{
    display:flex;align-items:flex-end;gap:6pt;
    border-bottom:1pt solid #000;height:32pt;
  }
  .sheet-master .sh-rowlabel{
    font-size:9pt;font-weight:700;white-space:nowrap;padding-bottom:3pt;
  }
  /* The empty half is where the time goes. */
  .sheet-master .sh-rowbox{flex:1;border-left:1pt solid #CCC;align-self:stretch}
  .sheet-master .sh-head h2{font-size:19pt}
  .sheet-master .sh-meta{margin-bottom:9pt}
  .sheet-master .sh-signer .sh-rule{height:20pt}
}

/* ============================================================
   LARGER TEXT + SCROLL CUES
   Two accommodations for readers who are not going to reach for a
   browser setting or guess that a row scrolls sideways.
   ============================================================ */

/* Every size on this site is in px, so bumping the root font-size would
   move almost nothing. zoom scales the whole layout, which is what someone
   asking for bigger text is actually asking for, and it keeps the
   proportions the design was drawn at. */
html.text-lg{zoom:1.18}

.textsize{
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);background:transparent;
  border:2px solid var(--line);border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;min-height:44px;
}
.textsize b{font-family:var(--display);font-size:15px;line-height:1;color:var(--royal)}
.textsize:hover{border-color:var(--royal);color:var(--royal)}
.textsize[aria-pressed="true"]{border-color:var(--royal);background:var(--royal-tint);color:var(--royal)}
/* On a narrow screen it drops under the logo rather than crushing the nav. */
@media(max-width:560px){.textsize{order:3}}

/* The fade that says there is more chip row off to the right. Only painted
   when something is genuinely out of view, and it turns itself off once you
   reach the end so it never lies. */
.chips{position:relative}
.chips.is-scrollable{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent 100%);
}
.chips.is-scrollable.at-end{-webkit-mask-image:none;mask-image:none}

@media print{
  html.text-lg{zoom:1}
  .textsize{display:none !important}
}

/* ============================================================
   GYM POSTER
   Printed once and pinned to a wall, so it is read from several feet
   away rather than at arm's length. Black and white on purpose: it
   costs one sheet on whatever printer the church actually owns.
   ============================================================ */
.poster{display:none}

@media print {
  body.print-poster .poster{display:block}
  body.print-poster main,body.print-poster .hero{display:none !important}

  /* The poster carries its own masthead, so the site's running header
     would just be a second, smaller wordmark above it. */
  body.print-poster::before{display:none}

  .poster{text-align:center;height:100%}
  .po-kicker{font-family:var(--display);text-transform:uppercase;font-size:12pt;
    letter-spacing:.22em;margin-bottom:10pt}
  .po-head{font-family:var(--display);text-transform:uppercase;font-size:46pt;
    line-height:.95;letter-spacing:-.02em;margin:0 0 8pt}
  .po-sub{font-size:13pt;margin-bottom:18pt}

  .po-mid{display:flex;align-items:center;justify-content:center;gap:26pt;
    border-top:2pt solid #000;border-bottom:2pt solid #000;padding:16pt 0;margin-bottom:16pt}
  .qr{width:150pt;height:150pt;display:block}
  .po-qrnote{font-size:8.5pt;text-transform:uppercase;letter-spacing:.1em;margin-top:4pt}
  .po-url{text-align:left}
  .po-label{font-size:9pt;text-transform:uppercase;letter-spacing:.12em}
  .po-domain{font-family:var(--display);text-transform:uppercase;font-size:26pt;line-height:1}
  .po-path{font-family:var(--display);text-transform:uppercase;font-size:26pt;line-height:1}

  .po-steps{text-align:left;margin:0 auto 16pt;padding-left:20pt;max-width:78%;
    display:flex;flex-direction:column;gap:7pt}
  .po-steps li{font-size:12pt}
  .po-foot{font-size:10.5pt;border-top:1pt solid #999;padding-top:8pt;
    max-width:82%;margin:0 auto}
}

/* ============================================================
   SCOREBOARD
   A church computer wired to a television. Read from across a
   room, not at arm's length, so every size is in vmin and the
   ground is the navy the footer already uses -- a light page at
   television brightness in a dark lobby is a lamp.
   ============================================================ */
.sb-body{
  margin:0;background:var(--navy);color:#fff;height:100vh;height:100dvh;
  overflow:hidden;cursor:default;
}
.sb{height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:2.4vmin 3vmin}

.sb-head{display:flex;align-items:center;gap:2vmin;border-bottom:.35vmin solid rgba(255,255,255,.22);
  padding-bottom:1.4vmin}
.sb-mark{display:flex;align-items:center;gap:1.2vmin;margin-right:auto}
.sb-mark svg{width:4.4vmin;height:4.4vmin}
.sb-mark b{font-family:var(--display);text-transform:uppercase;font-size:2.6vmin;letter-spacing:-.01em}
.sb-title{font-family:var(--display);text-transform:uppercase;font-size:2.6vmin;
  letter-spacing:.1em;color:var(--royal-bright);margin:0}
.sb-stamp{font-size:1.7vmin;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}

.sb-stage{display:flex;flex-direction:column;justify-content:center;gap:2vmin;min-height:0}
.sb-stage.in{animation:sbin .5s ease both}
@keyframes sbin{from{opacity:0;transform:translateY(2.2vmin)}to{opacity:1;transform:none}}

.sb-eventname{font-family:var(--display);text-transform:uppercase;
  font-size:7.6vmin;line-height:.95;letter-spacing:-.02em;margin:0;color:#fff}

.sb-rows{display:flex;flex-direction:column;gap:1.1vmin;min-height:0}
.sb-row{
  display:grid;grid-template-columns:22% 1fr auto;align-items:center;gap:2vmin;
  background:rgba(255,255,255,.07);border-left:.9vmin solid rgba(255,255,255,.28);
  border-radius:.9vmin;padding:1.5vmin 2.2vmin;
}
.sb-div{font-family:var(--display);text-transform:uppercase;font-size:2.5vmin;
  letter-spacing:.03em;color:rgba(255,255,255,.82)}
.sb-who{display:flex;flex-direction:column;gap:.2vmin;min-width:0}
.sb-who b{font-size:3.4vmin;font-weight:700;line-height:1.05;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-who small{font-size:1.8vmin;color:rgba(255,255,255,.62)}
.sb-time{font-family:var(--display);font-size:5.4vmin;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* The three tiers keep the meanings they have on the board. On this ground
   they are the bright values, not the darkened ones tuned for white pages. */
.sb-row.t-world{border-left-color:#FF9A3D;background:rgba(255,154,61,.14)}
.sb-row.t-regional{border-left-color:#5C9BFF;background:rgba(92,155,255,.14)}
.sb-row.t-church{border-left-color:#3ECF7C;background:rgba(62,207,124,.13)}
.sb-row.t-world .sb-time{color:#FFB367}
.sb-row.t-regional .sb-time{color:#8FBAFF}
.sb-row.t-church .sb-time{color:#6FE0A0}

.sb-empty{font-size:2.6vmin;color:rgba(255,255,255,.7)}

.sb-foot{display:flex;align-items:center;gap:2vmin;border-top:.35vmin solid rgba(255,255,255,.22);
  padding-top:1.4vmin}
.sb-key{display:flex;gap:1vmin;margin-right:auto}
.sb-chip{font-size:1.5vmin;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.6vmin 1.1vmin;border-radius:.6vmin;color:#0F1A2E}
.sb-chip.t-world{background:#FFB367}
.sb-chip.t-regional{background:#8FBAFF}
.sb-chip.t-church{background:#6FE0A0}
.sb-cta{font-family:var(--display);text-transform:uppercase;font-size:2vmin;
  letter-spacing:.05em;color:var(--royal-bright)}

.sb-dots{display:flex;gap:.9vmin}
.sb-dot{width:1.1vmin;height:1.1vmin;border-radius:50%;background:rgba(255,255,255,.28)}
.sb-dot.on{background:#fff}

/* Controls exist for the person setting it up and then get out of the way.
   They float clear above the footer rather than on top of it: at bottom:2vmin
   the Fullscreen button landed across the submit line and the event dots,
   which is exactly the moment somebody is looking at the screen. */
.sb-controls{position:fixed;right:3vmin;bottom:9vmin;display:flex;align-items:center;gap:1.4vmin;
  background:rgba(15,26,46,.82);border-radius:1vmin;padding:1vmin 1.4vmin;
  transition:opacity .4s ease}
body.sb-idle .sb-controls{opacity:0;pointer-events:none}
.sb-count{font-size:1.6vmin;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.sb-btn{font-family:var(--body);font-size:1.6vmin;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);
  border:.2vmin solid rgba(255,255,255,.3);border-radius:.8vmin;padding:1.1vmin 1.8vmin;cursor:pointer}
.sb-btn:hover{background:rgba(255,255,255,.24)}
.sb-hint{font-size:1.5vmin;color:rgba(255,255,255,.5)}
body.sb-paused .sb-title::after{content:" · paused";color:rgba(255,255,255,.6)}

/* A television is landscape. A phone opening this link should still get
   something readable rather than a squashed grid. */
@media (max-aspect-ratio:1/1){
  .sb-eventname{font-size:9vw}
  .sb-row{grid-template-columns:1fr auto;row-gap:.6vmin}
  .sb-div{grid-column:1/-1;font-size:3.4vw}
  .sb-who b{font-size:5vw}
  .sb-who small{font-size:3vw}
  .sb-time{font-size:8vw}
  .sb-hint{display:none}
}

@media print{ .sb-body{display:none} }

/* ---- scoreboard: one church's own board ----
   The gap rows are the reason this mode exists, so they are styled to be
   read as a to-do list rather than as missing data. */
.sb-row.sb-gap{background:rgba(255,255,255,.04);border-left-color:rgba(255,255,255,.2)}
.sb-row.sb-gap .sb-who b{color:rgba(255,255,255,.72);font-weight:600}
.sb-time.sb-none{color:rgba(255,255,255,.32)}
.sb-row.sb-holds{border-left-color:#3ECF7C;background:rgba(62,207,124,.13)}
.sb-row.sb-holds .sb-time{color:#6FE0A0}

/* The picker. Only ever seen while somebody is setting the screen up. */
.sb-picker{
  position:fixed;inset:0;z-index:40;background:rgba(15,26,46,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2vmin;padding:5vmin;
}
.sb-pickhead{font-family:var(--display);text-transform:uppercase;font-size:4.4vmin;margin:0}
.sb-picknote{font-size:1.9vmin;color:rgba(255,255,255,.72);max-width:60ch;text-align:center}
/* A column, not a wrapped grid: these are search results now, and results
   are read down a list rather than scanned across a wall. */
.sb-picklist{display:flex;flex-direction:column;gap:1vmin;width:min(74ch,86vw);
  max-height:46vh;overflow:auto}

.sb-search{
  font-family:var(--body);font-size:2.6vmin;color:#fff;
  background:rgba(255,255,255,.1);border:.3vmin solid rgba(255,255,255,.4);
  border-radius:1vmin;padding:1.6vmin 2vmin;width:min(74ch,86vw);
  min-height:52px;
}
.sb-search::placeholder{color:rgba(255,255,255,.5)}
.sb-search:focus{outline:.3vmin solid #3ECF7C;outline-offset:.2vmin;border-color:transparent}
.sb-picknone{font-size:2vmin;color:rgba(255,255,255,.7);text-align:center;padding:2vmin}
/* The top match, which is what Enter will take. */
.sb-pickitem.first{border-color:#3ECF7C}
.sb-pickitem{
  font-family:var(--body);color:#fff;background:rgba(255,255,255,.1);
  border:.25vmin solid rgba(255,255,255,.28);border-radius:1vmin;
  padding:1.4vmin 2.2vmin;cursor:pointer;min-height:52px;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:.2vmin;text-align:left;
}
.sb-pickitem b{font-size:2.2vmin}
.sb-pickitem small{font-size:1.5vmin;color:rgba(255,255,255,.6)}
.sb-pickitem:hover{background:rgba(255,255,255,.2)}
.sb-pickitem.on{border-color:#3ECF7C;background:rgba(62,207,124,.18)}
.sb-pickclose{
  font-family:var(--body);font-size:1.7vmin;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:transparent;
  border:.25vmin solid rgba(255,255,255,.4);border-radius:.9vmin;
  padding:1.2vmin 2.4vmin;cursor:pointer;min-height:44px;
}

/* The church-mode key. Deliberately not the tier colours: in that mode green
   means "you hold it", not "church best", and reusing the tier swatches would
   have the legend contradict the rows above it. */
@media screen {
  .sb-chip.sb-holds-key{background:#6FE0A0}
  .sb-chip.sb-gap-key{background:rgba(255,255,255,.28);color:#fff}
}