/* BCDA theme — Brady's Pub house style.
   Palette and type measured from bradyspub.com: cream parchment ground,
   Irish green, orange accent, Anton headlines, Special Elite labels,
   Caveat for the chalkboard. Single light theme, no dark mode. */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Special+Elite&family=Caveat:wght@500;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --paper:  #F5ECD7;
  --panel:  #FFFCF2;
  --sunk:   #EDE0C2;
  --line:   #D9C9A4;
  --ink:    #1A1A1A;
  --muted:  #6E6553;

  --green:  #0D6B3A;
  --forest: #084D29;
  --slate:  #123021;   /* chalkboard */
  --chalk:  #F2EFE4;
  --orange: #E87722;
  --amber:  #F5B04A;

  --women:  #C9A6E8;   /* chalk violet */
  --men:    #F5B04A;   /* chalk amber  */
  --good:   #0D6B3A;
  --bad:    #B33A1A;

  --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --type:    'Special Elite', 'Courier New', monospace;
  --hand:    'Caveat', 'Segoe Script', cursive;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --hard:   3px 3px 0 var(--ink);
  --hard-l: 2px 2px 0 var(--ink);
  --r:      10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.06;
  text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance;
}
h1 { font-size: clamp(22px, 4.5vw, 32px); }
h2 { font-size: clamp(17px, 2.6vw, 22px); color: var(--forest); }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--green); }

.shell { max-width: 1280px; margin: 0 auto;
  padding: clamp(18px, 2.8vw, 26px) clamp(12px, 3vw, 24px) 60px;
  display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.shell > * { min-width: 0; }
.shell.narrow { max-width: 520px; }

.eyebrow { font-family: var(--type); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.note { font-size: 13px; color: var(--muted); }
.note b { color: var(--ink); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1 1 auto; }
.hide { display: none !important; }

/* ------------------------------------------------------------ green bar */

.topbar { background: var(--forest); color: var(--paper); }
.topbar .in { max-width: 1280px; margin: 0 auto;
  padding: 12px clamp(12px, 3vw, 24px) 14px; display: flex;
  flex-direction: column; gap: 11px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .board { width: 34px; height: 34px; color: var(--amber); flex: 0 0 auto; }
/* Header mark. Height is capped so the logo can never drive the bar taller
   than the two lines of text beside it; width follows the aspect ratio. */
/* White tile behind the mark: the logo's own navy body would otherwise sit
   on the dark green bar with almost no separation. Box-sizing is global, so
   the height below is the tile and the padding eats into the artwork. */
.brand .logo {
  height: 64px; width: auto; flex: 0 0 auto; display: block;
  background: var(--panel); border-radius: 13px; padding: 5px;
}
.brand .nm { font-family: var(--display); font-size: clamp(19px, 3.4vw, 26px);
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1; color: var(--paper); }
.brand .sub { font-family: var(--type); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--amber); }
.brand .spacer { flex: 1 1 auto; }
.brand .when { font-family: var(--type); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: #9DBBA6; text-align: right; }

/* segmented league toggle */
.seg { display: flex; background: rgba(0,0,0,.28); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button {
  flex: 1; font-family: var(--display); font-size: clamp(13px, 2.4vw, 15px);
  letter-spacing: .05em; text-transform: uppercase; padding: 9px 6px;
  border: 0; border-radius: 8px; background: transparent; color: #CFE0D4;
  cursor: pointer; transition: background .18s, color .18s, box-shadow .18s;
}
/* Hover used to be a text-colour shift alone, which on the dark bar was almost
   invisible. The plate and ring make the target unmistakable. */
.seg button:hover:not(:disabled):not([aria-selected="true"]) {
  background: rgba(245,236,215,.16); color: var(--paper);
  box-shadow: inset 0 0 0 2px rgba(245,236,215,.34);
}
.seg button[aria-selected="true"] { background: var(--orange); color: #fff; }
/* Darkens rather than brightens: the already-selected tab needs far less of a
   hover cue than its neighbours, and going darker lifts the white label's
   contrast instead of eroding it. Matches .btn.primary:hover. */
.seg button[aria-selected="true"]:hover { background: #D96C18; }
.seg button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* -------------------------------------------------- season / division picks */

.selectors { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sel { position: relative; display: inline-flex; }
.sel.division { margin-left: auto; }
.sel select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--type); font-size: 12.5px; letter-spacing: .09em;
  text-transform: uppercase;
  /* Special Elite's capitals are 0.734em tall but it declares only 0.7025em of
     ascent, so at line-height:1 the tops poke outside the content box — and a
     select clips to that box, shaving the caps. The extra leading gives them
     0.068em of headroom.
     The padding then centres what is left: the .2975em of descent these
     all-caps labels never use is handed back to the top, which is what stops
     the text sitting high in the pill. */
  line-height: 1.2;
  padding: .929em 38px .623em 17px; border-radius: 24px; cursor: pointer;
  border: 2px solid var(--green); background: var(--panel); color: var(--green);
  box-shadow: var(--hard-l);
}
.sel select:hover { background: var(--sunk); }
.sel select:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.sel::after {
  content: ''; position: absolute; right: 16px; top: 50%; margin-top: -3px;
  pointer-events: none; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--green);
}
.sel.season select { border-color: var(--orange); color: #A85714; }
.sel.season::after { border-top-color: var(--orange); }

/* ------------------------------------------------- chalkboard record tiles */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile {
  position: relative; overflow: hidden;
  background: var(--slate);
  background-image:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.05) 0 38%, transparent 39%),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.04) 0 32%, transparent 33%);
  border: 3px solid #6B4A22;
  border-radius: var(--r);
  box-shadow: var(--hard), inset 0 0 26px rgba(0,0,0,.45);
  padding: 10px 12px 11px;
  display: flex; flex-direction: column; gap: 1px;
}
.tile .l { font-family: var(--type); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #9DBBA6; display: flex; align-items: center; gap: 6px; }
.tile .l svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }
.tile .v { font-family: var(--hand); font-weight: 700; font-size: clamp(40px, 8vw, 52px);
  line-height: .92; margin: 1px 0 -2px; }
.tile .w { font-family: var(--hand); font-weight: 500; font-size: 15px; color: #DCE8DF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.tile.women .v { color: var(--women); }
.tile.men   .v { color: var(--men); }
.tile.empty .v { color: #7D9585; font-size: 30px; }
.tile.empty .w { color: #7D9585; }

/* ------------------------------------------------------------ view switch */

.viewbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vtoggle { position: relative; display: inline-flex; padding: 3px; border-radius: 999px;
  background: var(--forest); border: 2px solid var(--ink); box-shadow: var(--hard-l);
  flex: 0 0 auto; margin-left: auto; }
.vtoggle button {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 92px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--type); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 15px; border: 0; border-radius: 999px; background: transparent;
  color: #BFD8C6; cursor: pointer; transition: background .2s, color .2s;
}
.vtoggle button[aria-pressed="true"] { background: var(--amber); color: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.vtoggle button svg { width: 14px; height: 14px; }
.vtoggle button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* Women-only filter. Shares the .gtabs button face because on a phone it sits
   directly beside those tabs; on a desktop it is the left-hand control in the
   bar. Pressed, it takes the same violet the table's gender dot already uses
   for women, so the two read as one piece of colour language. */
.wfilter {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; padding: 7px 13px;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--panel); color: var(--ink);
  box-shadow: var(--hard-l); cursor: pointer;
  transition: background .18s, color .18s;
}
.wfilter svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* Matches the height of the Cricket / '01 tabs it shares a row with on a phone,
   rather than being the one undersized target in the group. */
.wfilter { min-height: 36px; }
.wfilter:hover:not(:disabled) { background: var(--sunk); }
.wfilter[aria-pressed="true"] { background: #6E3796; color: var(--paper); }
.wfilter[aria-pressed="true"]:hover { background: #5C2C7E; }
.wfilter:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.wfilter:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* sort chips */
/* flex-basis 0 rather than auto, overriding .grow. A wrapping flex container
   assigns items to lines by their base size before it shrinks anything, so at
   basis auto the chips' full content width pushed them onto a line of their
   own and the bar ran to three rows on a phone. min-width:0 alone cannot fix
   that; it only governs shrinking once a line is already chosen. */
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; min-width: 0; flex: 1 1 0; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: 0 0 auto; font-family: var(--type); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 7px; cursor: pointer;
  border: 2px solid var(--line); background: var(--panel); color: var(--muted);
}
.chips button[aria-pressed="true"] { border-color: var(--ink); background: var(--amber); color: var(--ink); }
.chips button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ------------------------------------------------------------- rank cards */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.pc { background: var(--panel); border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--hard); overflow: hidden; cursor: pointer; align-self: start; }
.pc:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.pc .top { display: flex; align-items: center; gap: 10px; padding: 9px 11px; }
.rank { font-family: var(--display); font-size: 18px; width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--ink);
  background: var(--sunk); }
.pc.g1 .rank { background: var(--amber); }
.pc.g2 .rank { background: #D7D2C4; }
.pc.g3 .rank { background: #D9A87A; }
.who { flex: 1 1 auto; min-width: 0; }
.who .n { font-family: var(--display); font-size: 17px; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.12; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* Team name and division stamp share this line. The team is the part that
   gives way: it truncates, so the stamp is never the thing pushed out. */
.who .m { font-family: var(--type); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 7px; min-width: 0; }
.who .m .tm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.who .m .divstamp { flex: 0 0 auto; font-size: 8.5px; }
.tot { text-align: right; flex: 0 0 auto; }
.tot .v { font-family: var(--display); font-size: 31px; line-height: .95; color: var(--forest);
  font-variant-numeric: tabular-nums; }
.tot .l { font-family: var(--type); font-size: 8px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.strip { display: flex; border-top: 2px solid var(--line); background: var(--sunk); }
.strip div { flex: 1; padding: 5px 4px; text-align: center; border-right: 1px solid var(--line); }
.strip div:last-child { border-right: 0; }
.strip .k { font-family: var(--type); font-size: 8px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); display: block; }
.strip .sv { font-family: var(--display); font-size: 15px; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.more { display: none; padding: 9px 11px 11px; border-top: 2px solid var(--line); }
.pc.open .more { display: block; }
.mlab { font-family: var(--type); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); margin: 9px 0 5px; }
.mlab:first-child { margin-top: 0; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mgrid span { background: var(--sunk); border-radius: 6px; padding: 5px 2px; text-align: center; }
.mgrid b { display: block; font-family: var(--display); font-size: 15px; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.mgrid i { font-family: var(--type); font-style: normal; font-size: 8px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------------ table */

.gtabs { display: flex; gap: 6px; }
.gtabs button { flex: 1; max-width: 150px; font-family: var(--display); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; padding: 7px 4px; border-radius: 8px;
  cursor: pointer; border: 2px solid var(--ink); background: var(--panel); color: var(--ink);
  box-shadow: var(--hard-l); }
.gtabs button[aria-pressed="true"] { background: var(--green); color: var(--paper); }
.gtabs button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.tablewrap { min-width: 0; border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--hard); background: var(--panel); overflow-x: auto;
  overscroll-behavior-x: contain; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px;
  font-variant-numeric: tabular-nums; }
/* 7px rather than 10px each side: across twenty columns that is 120px of width
   back, which is what lets Total land inside the pane instead of behind a
   sideways scroll. Tabular numerals still keep 14px between neighbours. */
th, td { padding: 8px 7px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); }
th:first-child, td:first-child, th.text, td.text { text-align: left; font-variant-numeric: normal; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.alt td { background: rgba(237,224,194,.5); }
tbody tr:hover td { background: var(--sunk); }

thead th {
  position: sticky; top: 0; z-index: 3; cursor: pointer; user-select: none;
  font-family: var(--type); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--paper); background: var(--forest); border-bottom: 2px solid var(--ink);
}
thead th:hover { background: var(--green); }
thead th[aria-sort] { background: var(--green); color: #fff; }
/* The idle sort chevron sits in every one of twenty headers, so its inset is
   real table width; 2px still separates it from the label. */
thead th .arrow { opacity: .45; margin-left: 2px; font-size: 9px; }
thead th[aria-sort] .arrow { opacity: 1; }
thead th:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }

th.pin, td.pin { position: sticky; left: 0; z-index: 2; background: var(--panel);
  border-right: 2px solid var(--ink); }
thead th.pin { z-index: 4; background: var(--forest); }
tbody tr.alt td.pin { background: #F4E9D3; }
tbody tr:hover td.pin { background: var(--sunk); }
td.pin .nm { font-weight: 700; }
td.pin .sub { display: block; font-size: 11px; color: var(--muted); }
td.r { font-family: var(--display); width: 26px; text-align: center; color: var(--muted); }
td.as { font-family: var(--display); font-size: 15px; }
td.total { font-family: var(--display); font-size: 16px; color: var(--forest); }
td.total { background: rgba(245,176,74,.22); }
tbody tr:hover td.total { background: rgba(245,176,74,.34); }
/* The headline column's header needs its own colours: the pale amber tint above
   out-specifies `thead th`, so it would keep that rule's cream text and vanish. */
thead th.total { background: var(--amber); color: var(--ink); }
thead th.total:hover { background: #EFA93A; color: var(--ink); }
thead th.total[aria-sort] { background: #DE9223; color: var(--ink); }
th.grp { border-left: 2px solid var(--ink); }
td.grp { border-left: 2px solid var(--line); }
td.dim { color: var(--muted); }

.gdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; }
.gdot.F { background: #7A3FA8; }
.gdot.M { background: var(--orange); }
.gdot.X { background: var(--line); }

.emptystate { padding: 40px 20px; text-align: center; color: var(--muted); }
.emptystate b { display: block; font-family: var(--display); font-size: 19px;
  text-transform: uppercase; color: var(--forest); margin-bottom: 4px; }

.legend { display: flex; gap: 15px; flex-wrap: wrap; font-family: var(--type);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; }

/* ----------------------------------------------------------- division marks */

/* One colour per division, taken from its place in the board's division list,
   so the first is always green and the second orange whether a league letters
   them A and B or names them Masters and Mixed. Each tone is a full set —
   text, wash and keyline — carried on custom properties so the stamp, the card
   heading and the table rule all pick it up from a single class. */
/* The wash and keyline carry the hue; the text is darker than the hue it
   belongs to because 9px type has to clear 4.5:1 on the cream, on the striped
   row and on the band's darker ground alike. Measured, not picked by eye —
   the lightest of these lands at 4.64:1. */
.divtone-0 { --dv-ink: #0C6537; --dv-fill: rgba(13,107,58,.12);  --dv-edge: rgba(13,107,58,.50); }
.divtone-1 { --dv-ink: #894614; --dv-fill: rgba(232,119,34,.18); --dv-edge: rgba(232,119,34,.70); }
.divtone-2 { --dv-ink: #743CA0; --dv-fill: rgba(122,63,168,.13); --dv-edge: rgba(122,63,168,.55); }
.divtone-3 { --dv-ink: #1D5A73; --dv-fill: rgba(29,90,115,.13);  --dv-edge: rgba(29,90,115,.55); }

/* A stamp rather than more small grey type: a translucent wash, a hairline
   keyline and the typewriter face, so it reads as a mark made on the paper and
   is told apart from the team name at a glance without shouting over it.
   Sized to sit inside the card's team line, so it stays small deliberately. */
.divstamp {
  display: inline-block; vertical-align: middle; white-space: nowrap;
  font-family: var(--type); font-size: 9px; line-height: 1;
  letter-spacing: .11em; text-transform: uppercase;
  border-radius: 4px; border: 1px solid var(--dv-edge, rgba(13,107,58,.42));
  color: var(--dv-ink, var(--green)); background: var(--dv-fill, rgba(13,107,58,.10));
  /* Optical centring, measured rather than eyeballed. Special Elite reserves
     .30em below the baseline that these all-caps labels never use, so equal
     padding leaves the letters riding a third of an em high — the top gets
     that third back. Letter-spacing lands after the final glyph too, dragging
     short text left, so half of it moves from the right side to the left. */
  padding: .45em .725em .12em .835em;
}

/* Card view: the heading that opens each division's block of cards. */
.divband { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  margin: 8px 0 0; }
.divband::after { content: ''; flex: 1 1 auto; height: 3px; border-radius: 2px;
  background: var(--dv-edge, var(--line)); }
.divband span { font-family: var(--type); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dv-ink, var(--forest)); }
.divband:first-child { margin-top: 0; }

/* Table view: one table throughout, with a heavy rule where a division ends.
   The label is sticky so it stays in view when a wide table scrolls sideways.
   The wash goes on as an image so it can sit over the cream without either
   colour having to be restated. */
.divsplit td { background-color: var(--sunk); border-top: 4px solid var(--ink);
  border-bottom: 2px solid var(--ink); padding: 5px 10px; text-align: left;
  background-image: linear-gradient(var(--dv-fill, transparent), var(--dv-fill, transparent)); }
.divsplit.first td { border-top: 0; }
.divsplit td span { position: sticky; left: 10px; display: inline-block;
  font-family: var(--type); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dv-ink, var(--forest)); }
tbody tr.divsplit:hover td { background-color: var(--sunk); }

/* ------------------------------------------------------- shared controls */

.card { background: var(--panel); border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--hard); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }

.btn {
  font-family: var(--display); font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
  padding: 9px 17px; cursor: pointer; color: var(--ink); background: var(--panel);
  border: 2px solid var(--ink); border-radius: 8px; box-shadow: var(--hard);
  transition: box-shadow .08s, transform .08s; text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--sunk); }
.btn:active { box-shadow: 0 0 var(--ink); transform: translate(3px, 3px); }
.btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; box-shadow: var(--hard); }
.btn.primary { background: var(--orange); color: #fff; }
.btn.primary:hover { background: #D96C18; }
.btn.go { background: var(--green); color: var(--paper); }
.btn.go:hover { background: var(--forest); }

.input, select.input {
  width: 100%; height: 42px; font-family: var(--body); font-size: 15px; font-weight: 600;
  color: var(--ink); background: var(--panel); border: 2px solid var(--ink); border-radius: 8px;
  box-shadow: var(--hard); padding: 5px 11px; outline: none;
}
.input::placeholder { color: var(--muted); }
.input:focus { border-color: var(--green); box-shadow: 3px 3px 0 var(--green); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-family: var(--type); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--type);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px;
  border-radius: 5px; background: var(--ink); color: var(--paper); }
.badge.ok { background: var(--green); }
.badge.warn { background: var(--bad); }
.badge.quiet { background: var(--sunk); color: var(--muted); border: 1px solid var(--line); }

.msg { border: 2px solid var(--ink); border-radius: 8px; padding: 10px 13px; font-size: 13.5px;
  background: var(--sunk); }
.msg.bad { border-color: var(--bad); color: var(--bad); background: #FBEDE8; }
.msg.good { border-color: var(--green); color: var(--forest); background: #E7F1E9; }

@media (max-width: 640px) {
  .brand .logo { height: 52px; border-radius: 11px; padding: 4px; }
  /* Side by side and half-width each. Wrapping left the division picker
     alone on its own row, shoved right by its auto margin. */
  .selectors { flex-wrap: nowrap; gap: 8px; }
  .sel { flex: 1 1 0; min-width: 0; }
  .sel.division { margin-left: 0; }
  /* Vertical padding stays in em so the optical centring above scales with the
     smaller type; only the arrow clearance changes here. */
  .sel select { width: 100%; font-size: 11.5px; padding-right: 30px; padding-left: 13px; }
  .sel::after { right: 12px; }
  th, td { padding: 7px 6px; font-size: 12.5px; }
  /* Icon only beside the Cricket / '01 tabs; the aria-label carries the name. */
  .wfilter { padding: 7px 10px; }
  .wfilter span { display: none; }
  /* Buys back the width the filter takes, so the view bar stays one row. */
  .vtoggle button { min-width: 0; padding: 8px 11px; }
  .cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* segmented control on a cream surface (admin) */
.seg.light { background: var(--sunk); border: 2px solid var(--ink); box-shadow: var(--hard-l); }
.seg.light button { color: var(--muted); }
.seg.light button:hover:not(:disabled):not([aria-selected="true"]) {
  background: rgba(8,77,41,.15); color: var(--forest);
  box-shadow: inset 0 0 0 2px rgba(8,77,41,.38);
}
.seg.light button[aria-selected="true"] { background: var(--green); color: var(--paper); }
.seg.light button[aria-selected="true"]:hover { background: var(--forest); }

/* ------------------------------------------------------------ powered by */
.powered { display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin-top: 30px; padding-top: 20px; border-top: 2px solid var(--line); }
.powered span { font-family: var(--type); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); }
.powered a { display: block; line-height: 0; }
.powered img { height: 56px; width: auto; display: block; }
@media (max-width: 640px) { .powered img { height: 48px; } }

/* explains why one division's totals sit on a different scale */
.scorenote { font-size: 13px; line-height: 1.5; color: #7A4A12;
  background: #FDF1E2; border-left: 4px solid var(--orange);
  border-radius: 0 6px 6px 0; padding: 9px 13px; }