/* Waukesha MoneyBaggers. A bar-league scoreboard look built around the crest: deep green, gold, cream paper, a condensed
   display face for headings and hairline rules instead of boxes. Colour, type and spacing are tokens on :root. Light is
   the default; dark follows the system setting unless the reader picks one with the Theme button (data-theme on <html>). */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-800.woff2") format("woff2"); }

:root {
  --bg: #f4efe2;            /* cream paper */
  --surface: #eae3d0;       /* a shade deeper, for zebra rows and quiet fills */
  --field: #fffdf7;         /* inputs */
  --fg: #15211a;
  --muted: #5c675f;
  --line: #cdc5ae;
  --rule: #15211a;          /* the heavy rules */
  --mast: #10301b;          /* masthead and footer: the crest's green */
  --mast-fg: #f4efe2;
  --mast-line: rgba(244, 239, 226, .18);
  --accent: #1c4a2a;        /* buttons, table heads */
  --accent-fg: #f4efe2;
  --gold: #f2b705;          /* the crest's gold: rules, marks, the current page */
  --gold-ink: #8a6500;      /* gold as text on cream */
  --danger: #a8281e;
  --link: #1c4a2a;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, system-ui, sans-serif;
  --radius: 2px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1510;
    --surface: #132119;
    --field: #0a120e;
    --fg: #efe9d8;
    --muted: #a0ab9f;
    --line: #26382c;
    --rule: #efe9d8;
    --mast: #0b2415;
    --mast-fg: #efe9d8;
    --mast-line: rgba(239, 233, 216, .16);
    --accent: #1f5a32;
    --accent-fg: #efe9d8;
    --gold: #f2b705;
    --gold-ink: #f2b705;
    --danger: #ff8a80;
    --link: #8fd9a3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1510;
  --surface: #132119;
  --field: #0a120e;
  --fg: #efe9d8;
  --muted: #a0ab9f;
  --line: #26382c;
  --rule: #efe9d8;
  --mast: #0b2415;
  --mast-fg: #efe9d8;
  --mast-line: rgba(239, 233, 216, .16);
  --accent: #1f5a32;
  --accent-fg: #efe9d8;
  --gold: #f2b705;
  --gold-ink: #f2b705;
  --danger: #ff8a80;
  --link: #8fd9a3;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--font); font-size: 1.0625rem; color: var(--fg); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
main.wrap { flex: 1 0 auto; width: 100%; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent); }
a:hover { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
b, strong { font-weight: 700; }
a, button, summary, select, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Skip to content: the first thing Tab reaches, out of sight until then. */
.skip-link {
  position: absolute; left: .75rem; top: .75rem; z-index: 50; padding: .55rem 1rem; transform: translateY(-300%);
  background: var(--gold); color: #15211a; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 max(1.25rem, env(safe-area-inset-left)) 3rem max(1.25rem, env(safe-area-inset-right)); }

/* Masthead: a green band across the top, the crest at the left, plain capitals for the nav, the current page underlined in gold. */
.masthead { background: var(--mast); color: var(--mast-fg); border-bottom: 4px solid var(--gold); padding-top: env(safe-area-inset-top); }
.masthead-in { max-width: 64rem; margin: 0 auto; padding: 0 max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left)); display: flex; align-items: stretch; gap: 1.5rem; min-height: 4.25rem; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--mast-fg); text-decoration: none; margin-right: auto; padding: .5rem 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 3.25rem; height: auto; flex: none; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.brand-name b { color: var(--gold); font-weight: 800; }
.site-nav { display: flex; align-items: stretch; gap: .25rem; }
.site-nav .link {
  display: inline-flex; align-items: center; padding: 0 .7rem; color: var(--mast-fg); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 4px solid transparent; margin-bottom: -4px;
}
.site-nav .link:hover { color: var(--gold); }
.site-nav .link[aria-current="page"], .site-nav .link.current { color: var(--gold); border-bottom-color: var(--gold); }
/* The More menu: a <details> in the bar; its panel hangs below the masthead, right-aligned under More. */
.nav-more { position: relative; display: flex; }
.nav-more > summary { list-style: none; cursor: pointer; gap: .3rem; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .15s; }
.nav-more[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }
.nav-more[open] > summary { color: var(--gold); }
.nav-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 11rem; display: grid; padding: .35rem 0;
  background: var(--mast); border: 1px solid var(--mast-line); border-top: 3px solid var(--gold); box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.nav-item { display: block; padding: .6rem 1rem; color: var(--mast-fg); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.nav-item:hover, .nav-item:focus-visible { color: var(--gold); background: rgba(255, 255, 255, .05); }
.nav-item[aria-current="page"] { color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.theme-btn {
  flex: none; align-self: center; font: inherit; color: var(--mast-fg); background: transparent;
  border: 1px solid var(--mast-line); border-radius: var(--radius); cursor: pointer;
}
.theme-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; }
.icon-btn .icon { width: 1.2rem; height: 1.2rem; }

/* Page header */
.cornhole-head { padding: 2.25rem 0 .75rem; }
.cornhole-logo { display: none; }
h1 { margin: .15rem 0 .5rem; font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.25rem); line-height: .95; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
h2 { margin: 0 0 .75rem; font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
h3 { margin: 1.25rem 0 .5rem; font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow { margin: 0; display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.eyebrow::before { content: ""; width: 1.75rem; height: 4px; background: var(--gold); flex: none; }
.lede { margin: .5rem 0 0; font-size: 1.1rem; max-width: 46rem; color: var(--muted); }
.lede strong { color: var(--fg); }
.meta { margin: 0 0 .75rem; color: var(--muted); font-size: .95rem; }
.sub { font-size: .8em; color: var(--muted); font-weight: 500; }
.star { color: var(--gold-ink); font-weight: 800; cursor: help; }

/* Sections: a heavy rule above each, no boxes */
.cornhole-window { margin-top: 2.25rem; padding-top: 1rem; border-top: 3px solid var(--rule); }
.cornhole-window > ul { margin: 0; padding: 0; list-style: none; }
.cornhole-window > ul > li { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.cornhole-window > ul > li a { font-weight: 600; text-decoration: none; }
.cornhole-window > ul > li a:hover { text-decoration: underline; }
.cornhole-window > ul > li .count { float: right; color: var(--muted); font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }

/* Fixture list: the events page */
.event-list { list-style: none; margin: 0; padding: 0; }
.fixture { display: flex; gap: 1.1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.fixture-date { flex: none; width: 3.8rem; display: grid; justify-items: center; line-height: 1; font-family: var(--display); color: var(--muted); padding: .2rem 0; border-right: 2px solid var(--gold); }
.fx-wd, .fx-mon { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.fx-day { font-weight: 800; font-size: 1.9rem; color: var(--fg); margin: .1rem 0; }
.fixture-body { display: grid; gap: .1rem; min-width: 0; }
.fixture-name { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.1; text-decoration: none; color: var(--fg); }
.fixture-name:hover { color: var(--link); text-decoration: underline; }
.fixture-meta { color: var(--muted); font-size: .95rem; }
.fixture-note { color: var(--gold-ink); font-weight: 600; font-size: .95rem; }
/* A note a series' nights share, said once above the first of them. */
.fixture-rules { margin: .75rem 0 .25rem; padding: .7rem .9rem .8rem; border-left: 4px solid var(--gold); background: color-mix(in srgb, var(--gold) 4%, var(--bg)); }
.fixture-rules p { margin: 0; }
.fixture-rules-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin-bottom: .3rem !important; font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fixture-rules-head b { color: var(--gold-ink); font-weight: 800; font-size: 1.05rem; }
.fixture-rules-text { font-size: .95rem; line-height: 1.45; }

/* Home: the next event as the page head, then three blocks (latest results, the wheel, the leaders) and a tile per section. */
.home-next-row { display: flex; gap: 1.1rem; align-items: center; margin-top: .6rem; }
.home-next .fixture-date { width: 4.6rem; }
.home-next .fx-day { font-size: 2.6rem; }
.home-next h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); }
.home-next-what { min-width: 0; }
.home-when { margin: .35rem 0 0; color: var(--muted); font-size: 1.1rem; }
.home-when time { color: var(--fg); font-weight: 600; }
.home-next .button-row { margin: 1.25rem 0 0; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 2.5rem; }
.home-grid > .cornhole-window { min-width: 0; }
.home-podium { list-style: none; margin: 0; padding: 0; }
.home-podium li { display: flex; align-items: baseline; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.home-place { flex: none; width: 2.6rem; font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.home-podium li:first-child .home-place { color: var(--gold-ink); }
.home-podium li:first-child { box-shadow: inset 0 -2px 0 var(--gold); }
.home-team { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.home-wl { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .95rem; }
.home-more { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: .85rem 0 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.home-more a { text-decoration: none; border-bottom: 2px solid var(--gold); }
.home-more a:hover { color: var(--fg); }
.home-wheel { display: flex; gap: 1.1rem; align-items: center; }
.home-wheel .wheel-stage { flex: none; width: 6.5rem; color: var(--muted); }
.home-wheel .wheel-pointer { border-left-width: .45rem; border-right-width: .45rem; border-top-width: .8rem; top: -.25rem; }
.home-wheel .wheel-chips { gap: .2rem; margin: .5rem 0 0; }
.home-wheel .wheel-chip { font-size: 1rem; gap: .45rem; }
.home-wheel .wheel-chip .sub { display: none; }
.home-wheel .wheel-swatch { width: .8rem; height: .8rem; }
.home-pick { margin: 0; display: grid; gap: .1rem; }
.home-pick a { font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); text-decoration: none; }
.home-pick strong { font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
.home-pick + .meta { margin: .25rem 0 0; }
.cornhole-table.home-board table { min-width: 0; }
.cornhole-table.home-board th, .cornhole-table.home-board td { padding: .45rem .5rem; }
.cornhole-table.home-board thead th { letter-spacing: .05em; }
.home-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Players: the filter box over the list. */
.people-filter { display: flex; align-items: center; gap: .25rem .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
#people-filter { flex: 1 1 14rem; max-width: 24rem; }
.people-table { max-width: 36rem; }
.cornhole-table.people-table table { min-width: 0; }
.people-table td, .people-table thead th:not(:first-child) { width: 5rem; }

/* Tables: a scoreboard. Green head row, hairlines, zebra, the podium marked in gold. */
.cornhole-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cornhole-table table { border-collapse: collapse; width: 100%; min-width: 26rem; font-variant-numeric: tabular-nums; }
.cornhole-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--accent); color: var(--accent-fg);
  font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
  text-align: right; padding: .5rem .7rem; white-space: nowrap;
}
.cornhole-table th, .cornhole-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.cornhole-table tbody tr { --row: var(--bg); }
.cornhole-table tbody tr:nth-child(even) { --row: color-mix(in srgb, var(--surface) 60%, var(--bg)); background: var(--row); }
.cornhole-table th:nth-child(-n+2), .cornhole-table td:nth-child(-n+2) { text-align: left; }
/* The rank column: tables with a head row lead with a rank (or a game or place number); .no-rank opts a table out.
   In those tables the rank and the name stay put when the table scrolls sideways on a phone, so a row keeps its name. */
.cornhole-table:not(.no-rank) thead th:first-child, .cornhole-table:not(.no-rank) thead ~ tbody td:first-child { font-family: var(--display); font-weight: 700; font-size: 1.05rem; width: 2.75rem; min-width: 2.75rem; color: var(--muted); }
.cornhole-table:not(.no-rank) thead th:first-child { color: var(--accent-fg); }
.cornhole-table:not(.no-rank) thead th:nth-child(-n+2) { position: sticky; z-index: 2; }
.cornhole-table:not(.no-rank) thead ~ tbody tr > :nth-child(-n+2) { position: sticky; background: var(--row); }
.cornhole-table:not(.no-rank) thead th:first-child, .cornhole-table:not(.no-rank) thead ~ tbody tr > :first-child { left: 0; }
.cornhole-table:not(.no-rank) thead th:nth-child(2), .cornhole-table:not(.no-rank) thead ~ tbody tr > :nth-child(2) { left: 2.75rem; }
.cornhole-table tbody th { font-weight: 600; }
.cornhole-table:not(.no-rank) thead ~ tbody tr:first-child td:first-child { color: var(--gold-ink); }
.cornhole-table tr.podium { --row: color-mix(in srgb, var(--gold) 12%, var(--bg)); background: var(--row); }
.cornhole-table tr.podium > :first-child { box-shadow: inset 4px 0 0 var(--gold); }
.cornhole-table tr.podium td:first-child { color: var(--gold-ink); font-weight: 800; }
@media (hover: hover) { .cornhole-table tbody tr:hover { --row: color-mix(in srgb, var(--gold) 14%, var(--bg)); background: var(--row); } }
.cornhole-table td a, .cornhole-table th a { text-decoration: none; font-weight: 600; color: var(--fg); }
.cornhole-table td a:hover, .cornhole-table th a:hover { color: var(--link); text-decoration: underline; }
/* A table that scrolls sideways fades at the right edge while there is more to see (the page script sets .more). */
.cornhole-table.more { -webkit-mask-image: linear-gradient(to left, transparent, #000 1.5rem); mask-image: linear-gradient(to left, transparent, #000 1.5rem); }
/* A player's events: on a phone the venue and date fold into the event cell (.cell-sub) and their columns go. */
.cornhole-table .cell-sub { display: none; }
.cornhole-table .nw { white-space: nowrap; }
.person-events tbody td:first-child { white-space: normal; min-width: 16rem; }

/* Bracket and match tables */
.cornhole-table td.won { font-weight: 800; color: var(--fg); }
.cornhole-table td.score { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.cornhole-table td.vs, .cornhole-table th.vs { text-align: center; color: var(--muted); }
.cornhole-table .seed { display: inline-block; min-width: 1.6rem; color: var(--muted); font-family: var(--display); font-weight: 700; font-size: .95em; }

/* Tabs: text with a gold underline on the open one */
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 1.5rem 0 0; border-bottom: 2px solid var(--line); }
.tab {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px;
  padding: .45rem .8rem .35rem; cursor: pointer;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--gold); }
.tab-panel { margin-top: .75rem; }
.tab-panel.week-panel { margin-top: 0; }
.cornhole-window > .tabs { margin-top: 0; }
.tab-panel > .cornhole-window:first-child { margin-top: .75rem; border-top: 0; padding-top: .5rem; }

/* Nights (details) */
details.night { border-bottom: 1px solid var(--line); }
details.night summary { cursor: pointer; padding: .7rem 0; font-family: var(--display); font-size: 1.1rem; letter-spacing: .03em; color: var(--muted); }
details.night summary strong { color: var(--fg); font-weight: 700; text-transform: uppercase; }
details.night[open] summary { color: var(--fg); }
details.night .cornhole-table { margin-bottom: .75rem; }
details.night td { white-space: normal; }
details.night td.score { width: 3rem; }
details.night td.vs { width: 2rem; }

/* Week view: standings and the match log side by side */
.week-view .week-tabs { margin-top: .25rem; }
.week-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1.5rem; align-items: start; margin-top: 1rem; }
.week-grid h3, .match-log h3 { margin: 0 0 .5rem; }
.match-log { border-top: 3px solid var(--rule); padding-top: .5rem; max-height: 34rem; overflow: auto; }
.match-log ol { list-style: none; margin: 0; padding: 0; }
.match-log li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.match-log .when { grid-column: 1 / -1; color: var(--muted); font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.match-log .pair { color: var(--muted); }
.match-log .pair.won { color: var(--fg); font-weight: 700; }
.match-log .pair b { font-variant-numeric: tabular-nums; margin-left: .35rem; font-family: var(--display); font-size: 1.1em; }
@media (max-width: 760px) { .week-grid { grid-template-columns: 1fr; } .match-log { max-height: none; } }

/* Forms */
.import-form { display: grid; gap: 1.1rem; max-width: 36rem; }
.import-form label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.import-form .hint { font-weight: 400; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.import-form input:not([type="file"]):not([type="checkbox"]), .import-form select, #stats-pick, #people-filter {
  font: inherit; font-weight: 500; min-height: 2.6rem; padding: .5rem .7rem; color: var(--fg); background: var(--field);
  border: 2px solid var(--line); border-radius: var(--radius); transition: border-color .15s;
}
.import-form input:focus, .import-form select:focus, #stats-pick:focus, #people-filter:focus { outline: none; border-color: var(--gold); }
.import-form input[type="file"] {
  font: inherit; font-weight: 400; color: var(--muted); padding: .6rem; background: var(--field);
  border: 2px dashed var(--line); border-radius: var(--radius);
}
.import-form input[type="file"]::file-selector-button {
  font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  margin-right: .75rem; padding: .35rem .8rem; border-radius: var(--radius); border: 2px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer;
}
.import-form button, .btn {
  justify-self: start; display: inline-block; cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem 1.2rem; border-radius: var(--radius); border: 2px solid var(--accent); background: var(--accent); color: var(--accent-fg);
  transition: filter .15s, transform .05s;
}
.import-form button:hover, .btn:hover { filter: brightness(1.12); }
.import-form button:active, .btn:active { transform: translateY(1px); }
.import-form button:disabled, .btn:disabled, .tab:disabled { opacity: .45; cursor: default; filter: none; transform: none; }
.import-form .btn, .btn.secondary { background: transparent; color: var(--fg); border-color: var(--fg); }
#stats-pick { min-width: 16rem; }
label[for="stats-pick"], label[for="people-filter"] { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; margin-right: .5rem; }

/* Import result */
#import-out h2 { margin-bottom: .5rem; }
#import-out p { margin: .45rem 0; line-height: 1.55; }
#import-out .download { margin-top: .75rem; }
#import-out .error { color: var(--danger); font-weight: 600; }

/* Admin import: file rows and the on-file mark */
.file-row { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.file-row label { flex: 1 1 18rem; }
.file-state { font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .55rem; border: 2px solid currentColor; border-radius: var(--radius); white-space: nowrap; margin-bottom: .4rem; }
.file-state:empty { display: none; }
.file-state.on-file { color: var(--link); }
.file-state.needed { color: var(--danger); }
.file-state.optional { color: var(--muted); }
.button-row { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Admin: possible duplicates */
.dupe { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.dupe-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .35rem 0; }
#people-list { columns: 16rem; }
#people-list li { break-inside: avoid; padding: .35rem 0; }
#people-list input[type="text"] { font: inherit; font-weight: 500; min-height: 2.4rem; width: 8.5rem; margin: .25rem .5rem .25rem 0; padding: .3rem .5rem; color: var(--fg); background: var(--field); border: 2px solid var(--line); border-radius: var(--radius); }
#people-list input[type="text"]:focus { outline: none; border-color: var(--gold); }
.series + .series { margin-top: 1.5rem; }
.series h3 { margin: 0 0 .5rem; }

/* Admin home and event editor */
.admin-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin-top: 2rem; }
.admin-card, .tile { display: grid; gap: .35rem; align-content: start; padding: 1.1rem 1.2rem 1.3rem; border: 2px solid var(--line); border-top: 4px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--fg); }
.admin-card strong, .tile strong { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.admin-card span, .tile span { color: var(--muted); font-size: .95rem; }
.admin-card:hover, .tile:hover { border-color: var(--gold); border-top-color: var(--gold); text-decoration: none; }
.edit-list { list-style: none; margin: 0; padding: 0; }
.wheel-admin { text-align: center; }
.wheel-week { display: inline-flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.wheel-stage { position: relative; width: min(78vw, 22rem); aspect-ratio: 1; margin: 0 auto; }
.wheel { width: 100%; height: 100%; display: block; }
.wheel-pointer { position: absolute; top: -.4rem; left: 50%; transform: translateX(-50%); z-index: 1; width: 0; height: 0; border-left: .9rem solid transparent; border-right: .9rem solid transparent; border-top: 1.6rem solid var(--gold); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.wheel-result { min-height: 1.6em; margin: 1rem 0 .5rem; font-family: var(--display); font-size: 1.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.wheel-options { margin: 1.5rem auto 0; padding: .5rem 1rem; border: 2px solid var(--line); border-radius: var(--radius); max-width: 22rem; text-align: left; }
.wheel-options legend { padding: 0 .4rem; color: var(--muted); }
.wheel-option { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; font-size: 1.05rem; }
.wheel-option input { width: 1.2rem; height: 1.2rem; }
.wheel-admin .button-row { justify-content: center; }
.wheel-testing { margin: .25rem 0 0; }
.wheel-sound { font-size: .95rem; border: 2px solid var(--line); border-radius: var(--radius); }
.wheel-sound[aria-pressed="false"] { color: var(--muted); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
/* The public wheel: the wheel and what is on it side by side, stacked on a phone. */
.wheel-public { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2rem; align-items: center; }
.wheel-public .wheel-stage { width: 100%; color: var(--muted); }
.wheel-side h2 { margin-bottom: .5rem; }
.wheel-chips { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .45rem; }
.wheel-chip { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: .03em; text-transform: uppercase; }
.wheel-chip.used { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.wheel-chip .sub { text-decoration: none; display: inline-block; font-family: var(--font); font-weight: 500; font-size: .85rem; letter-spacing: 0; text-transform: none; }
.wheel-swatch { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 3px; }
.wheel-picks-head { margin-top: 2rem; }
.my-wheel-options { margin: 1rem 0 0; max-width: none; }
.my-wheel-options .wheel-option { gap: .6rem; }
.wheel-public .wheel-result { text-align: left; margin: .75rem 0 .25rem; }
.wheel-public .button-row { margin: .5rem 0; }
.wheel-extras { display: flex; gap: .5rem; flex-wrap: wrap; }
.my-wheel-picks { margin: .75rem 0; }
.my-wheel-picks h3 { margin: 0 0 .35rem; }
.my-wheel-picks ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .2rem; }
.my-wheel-picks li { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; text-transform: uppercase; }
.my-wheel-picks li .sub { font-family: var(--font); font-weight: 500; font-size: .85rem; text-transform: none; letter-spacing: 0; }
#my-wheel { color: var(--muted); }
.wheel-chip.used .wheel-swatch { opacity: .35; }
@media (max-width: 720px) { .wheel-public { grid-template-columns: 1fr; gap: 1.25rem; } .wheel-public .wheel-stage { width: min(78vw, 20rem); } }
.edit-row { padding: 1.25rem 0; border-top: 3px solid var(--rule); }
.edit-row + .edit-row { margin-top: 1rem; }

/* Calendar */
.cal-month + .cal-month { margin-top: 2rem; }
.cal-month h2 { margin: 0 0 .6rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cal-head { background: var(--accent); color: var(--accent-fg); text-align: center; font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; padding: .35rem 0; }
.cal-cell { background: var(--bg); min-height: 4.75rem; padding: .3rem; display: grid; gap: .2rem; align-content: start; }
.cal-cell.blank { background: color-mix(in srgb, var(--surface) 60%, var(--bg)); }
.cal-cell.has { background: color-mix(in srgb, var(--gold) 9%, var(--bg)); }
.cal-day { font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-cell.has .cal-day { color: var(--fg); }
.cal-event { font-family: var(--display); font-weight: 600; font-size: .9rem; line-height: 1.15; text-decoration: none; color: var(--fg); border-left: 3px solid var(--gold); padding: .1rem .35rem; overflow: hidden; text-overflow: ellipsis; }
.cal-event:hover { color: var(--link); text-decoration: underline; }

.cal-list { display: none; margin-top: 1rem; }
.cal-subscribe .button-row { margin: 1rem 0; }
.cal-subscribe .btn { font-size: .95rem; padding: .5rem .9rem; }
.cal-subscribe .meta a { overflow-wrap: anywhere; }
.fixture.past .fixture-name { color: var(--muted); }
.fixture.past .fixture-date { border-right-color: var(--line); }
.fixture.past .fx-day { color: var(--muted); }

/* Footer: a green band to close the page */
.site-foot { margin-top: 3rem; background: var(--mast); color: var(--mast-fg); border-top: 4px solid var(--gold); padding-bottom: env(safe-area-inset-bottom); }
.site-foot-in { max-width: 64rem; margin: 0 auto; padding: 1.25rem max(1.25rem, env(safe-area-inset-right)) 1.25rem max(1.25rem, env(safe-area-inset-left)); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; align-items: center; font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.site-foot-in span { color: color-mix(in srgb, var(--mast-fg) 70%, transparent); }
.site-foot-in b { color: var(--gold); font-weight: 800; }
.install-link { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--gold); background: transparent; border: 0; padding: .25rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.install-link:hover { text-decoration-color: var(--gold); }

/* Install sheet: a card pinned to the bottom, shown once when the site can be added to the home screen */
.install-sheet {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  width: min(100% - 2rem, 30rem); display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: center;
  padding: 1rem 1.1rem; background: var(--bg); color: var(--fg); border: 2px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.install-sheet img { width: 3rem; height: 3rem; border-radius: 12px; }
.install-text { display: grid; gap: .15rem; min-width: 0; }
.install-text b { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.install-text span { color: var(--muted); font-size: .95rem; line-height: 1.35; }
.install-actions { grid-column: 1 / -1; display: flex; gap: .6rem; flex-wrap: wrap; }

/* The bar in two rows: the crest, the name and the theme button, then the nav across the full width. The one-row bar needs about
   830px for six items, so this starts below 860px, not just on phones. */
@media (max-width: 860px) {
  .masthead-in { flex-wrap: wrap; gap: 0 1rem; min-height: 0; }
  .brand { padding: .55rem 0; }
  .brand-mark { width: 2.6rem; }
  .brand-name { font-size: 1.25rem; }
  /* Six items fit across a 360px phone, so the bar does not scroll (a scrolling bar would also clip the More menu). */
  .site-nav { flex: 1 1 100%; order: 3; margin: 0 -1.25rem; padding: 0 .25rem; gap: 0; border-top: 1px solid var(--mast-line); }
  .site-nav .link { flex: 1 1 auto; justify-content: center; padding: .6rem .2rem .5rem; margin-bottom: 0; font-size: .98rem; letter-spacing: .04em; white-space: nowrap; }
  .nav-more { flex: 1 1 auto; }
  .nav-more > summary { width: 100%; }
  .nav-menu { right: .25rem; top: 100%; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 1rem 2.5rem; }
  .masthead-in { padding: 0 1rem; }
  .site-nav { margin: 0 -1rem; }
  .cornhole-head { padding-top: 1.5rem; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .aka { display: none; }
  .week-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
  .week-tabs::-webkit-scrollbar { display: none; }
  .week-tabs .tab { flex: none; white-space: nowrap; scroll-snap-align: center; }
  .cal-list { display: block; }
  .cal-grid .cal-event { display: none; }
  .cal-cell.has::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); justify-self: center; margin-top: .1rem; }
  .cal-cell.has.past-day::after { background: var(--muted); }
  .cornhole-table table { min-width: 22rem; }
  .cornhole-table th, .cornhole-table td { padding: .45rem .5rem; }
  /* Narrower heads and cells, so the rank, the name, rounds, PPR and DPR fit across a 390px phone. */
  .cornhole-table thead th { font-size: .82rem; letter-spacing: .04em; padding: .45rem .3rem; }
  .cornhole-table td, .cornhole-table tbody th { padding-left: .3rem; padding-right: .3rem; }
  .cornhole-table:not(.no-rank) thead th:first-child, .cornhole-table:not(.no-rank) thead ~ tbody td:first-child { width: 2.1rem; min-width: 2.1rem; padding-left: .4rem; padding-right: .2rem; }
  .cornhole-table:not(.no-rank) thead th:nth-child(2), .cornhole-table:not(.no-rank) thead ~ tbody tr > :nth-child(2) { left: 2.1rem; }
  .person-events thead th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
  .person-events thead th + th { min-width: 3.6rem; }
  .person-events .opt { display: none; }
  .person-events .cell-sub { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }
  .person-events tbody td:first-child { min-width: 9.5rem; position: sticky; left: 0; background: var(--row); }
  .person-events thead th:first-child { position: sticky; left: 0; z-index: 2; }
  .import-form { max-width: none; }
  #stats-pick { min-width: 0; width: 100%; }
  .fixture { gap: .85rem; }
  .fixture-date { width: 3.3rem; }
  .fx-day { font-size: 1.6rem; }
  .fixture-name { font-size: 1.2rem; }
  .cal-cell { min-height: 2.75rem; padding: .2rem; justify-items: center; }
  .cal-head { font-size: .7rem; letter-spacing: .04em; }
  .site-foot-in { justify-content: center; text-align: center; }
  .home-next .fixture-date { width: 3.8rem; }
  .home-next .fx-day { font-size: 2.1rem; }
  .home-next h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .home-when { font-size: 1rem; }
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tile { padding: .8rem .85rem 1rem; }
  .tile strong { font-size: 1.2rem; }
  .tile span { font-size: .88rem; line-height: 1.3; }
}
/* Fingers: bigger targets than a pointer needs */
@media (pointer: coarse) {
  .icon-btn { width: 2.75rem; height: 2.75rem; }
  .tab { padding: .6rem .85rem .5rem; min-height: 2.75rem; }
  .skip-link { min-height: 2.75rem; display: flex; align-items: center; }
  /* A link in a table is as tall as its row, and the row at least 44px. */
  .cornhole-table td, .cornhole-table tbody th { padding-top: .6rem; padding-bottom: .6rem; }
  .cornhole-table td a, .cornhole-table th a { display: inline-block; padding: .6rem 0; margin: -.6rem 0; }
  .cornhole-window > ul > li { padding: .8rem 0; }
  details.night summary { padding: .85rem 0; }
}
/* The narrowest phones (320px): the crest, the name and the theme button on one line. */
@media (max-width: 360px) { .brand { gap: .5rem; } .brand-mark { width: 2.2rem; } .brand-name { font-size: 1.05rem; } .site-nav .link { font-size: .92rem; letter-spacing: .03em; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Calendar paging and past events */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cal-nav .tab:disabled { opacity: .4; cursor: default; }
.cal-title { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cal-cell.today { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Past events read as grey: the muted text (at least 4.5:1 on the cell in both themes, so no opacity), no colour bar */
.cal-event.past { color: var(--muted); background: transparent; border-left: 3px solid var(--line); font-weight: 500; }
.cal-cell.past-day { background: color-mix(in srgb, var(--surface) 60%, var(--bg)); }
.cal-cell.past-day .cal-day { color: var(--muted); }
.tier2 .won { font-weight: 800; }
.tier2 .vs { color: var(--muted); text-align: center; }
.idtag { font-size: .75em; color: var(--muted); font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 999px; padding: 0 .4em; }
.aka { font-size: .8em; color: var(--muted); font-style: italic; }
.week-games h3 { margin: 1rem 0 .5rem; font-size: 1rem; }
.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.match-list li { display: grid; grid-template-columns: 6rem 1fr 1fr; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.match-list .when { color: var(--muted); font-size: .8rem; }
@media (max-width: 640px) { .match-list li { grid-template-columns: 4rem 1fr; gap: .15rem .6rem; } .match-list .when { grid-row: 1 / 3; align-self: center; } }
.bracket .game { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Bracket: two bands on one canvas, a column per round, a card per game (a tag above, a row per team), elbow lines between them.
   The winner's row is bold with a green score, the loser's dimmed with a red one; the Championship cards carry gold. */
.bt-tools { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: 0 0 .25rem; }
.bt-tools .meta { margin: 0; }
.bt-fit { font-size: .95rem; padding: .35rem .7rem .3rem; border: 2px solid var(--line); border-radius: var(--radius); margin: 0; }
.bt-fit[aria-pressed="true"] { border-color: var(--gold); color: var(--fg); }
.bt-wrap { overflow-x: auto; padding: .5rem 0 1rem; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bt-scale { position: relative; overflow: hidden; }
.bt { position: relative; transform-origin: top left; }
.bt-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.bt-lines path { fill: none; stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 2; stroke-linejoin: round; }
.bt-lines path.to-final { stroke: var(--gold); }
.bt-title { position: absolute; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); line-height: 1.2; }
.bt-round { position: absolute; box-sizing: border-box; font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.2; padding: .25rem .5rem; background: color-mix(in srgb, var(--surface) 70%, var(--bg)); border-left: 3px solid var(--line); }
.bt-champ-head { color: var(--gold-ink); border-left-color: var(--gold); }
.bt-tag { position: absolute; display: inline-flex; gap: .45rem; align-items: baseline; height: 17px; line-height: 17px; padding: 0 .45rem 0 0; font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.bt-tag b { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .06em; color: var(--fg); }
.bt-game {
  position: absolute; box-sizing: border-box; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--surface) 55%, var(--bg));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14); font-size: .84rem;
  transition: border-color .12s, box-shadow .12s, opacity .12s;
}
.bt-game.final { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 2px 8px rgba(0, 0, 0, .2); }
.bt-game:hover, .bt-game:focus-within, .bt-game.bt-hi { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 60%, transparent); outline: none; }
.bt-game.bt-dim { opacity: .3; }
/* A team row is a button: tap it to follow that team. The followed team's row is marked in each of its games, and the lines
   between its games are drawn in gold while the others fade. */
.bt-row { cursor: pointer; }
.bt-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.bt-row.bt-me { box-shadow: inset 3px 0 0 var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--fg); }
.bt-following .bt-lines path { opacity: .25; }
.bt-following .bt-lines path.bt-on { opacity: 1; stroke: var(--gold); stroke-width: 3; }
.bt-row { display: grid; grid-template-columns: 1.45rem minmax(0, 1fr) 2.1rem; align-items: stretch; height: 24px; line-height: 24px; color: var(--muted); }
.bt-row + .bt-row { border-top: 1px solid var(--line); }
.bt-row.won { color: var(--fg); font-weight: 700; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bt-row.lost { color: var(--muted); }
.bt-seed { font-size: .66rem; font-weight: 500; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--surface) 85%, var(--bg)); }
.bt-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .4rem; }
.bt-score { text-align: center; font-family: var(--display); font-weight: 700; font-size: .98rem; font-variant-numeric: tabular-nums; color: var(--fg); background: color-mix(in srgb, var(--muted) 22%, transparent); }
.bt-row.won .bt-score { background: var(--accent); color: var(--accent-fg); }
.bt-row.lost .bt-score { background: color-mix(in srgb, var(--danger) 78%, var(--bg)); color: #fff; }
.bt-champs { position: absolute; display: flex; align-items: center; gap: .45rem; font-family: var(--display); font-weight: 800; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-champs::before { content: ""; flex: none; width: .55rem; height: .55rem; background: var(--gold); transform: rotate(45deg); }
.ev-tabs { margin-top: 1.25rem; }
.evtab-panel .cornhole-window { margin-top: 1rem; }

/* Sign-in (/signin/): the import form's fields and buttons, a large code box, and the status line. */
.signin-form, .signin-panel { max-width: 28rem; }
.signin-form input[name="email"] { width: 100%; }
.signin-form.import-form input[name="code"] { width: 100%; max-width: 13rem; font-family: var(--display); font-size: 1.6rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.signin-form p, .signin-panel p { margin: 0 0 .75rem; line-height: 1.5; }
.signin-alt { padding-top: 1rem; border-top: 1px solid var(--line); }
.signin-status { min-height: 1.5em; margin: 0 0 1rem; font-weight: 600; color: var(--muted); }
.signin-status.error { color: var(--danger); }
.signin-status:empty { min-height: 0; margin: 0; }