/* Storm Chasers Cup components.
   Colours, spacing, radii and borders come from tokens.css. Type comes from the generated
   style classes (display-xl, display, heading, eyebrow, score, body-lg, body, label, small, credit):
   put the style class on the element and the component class beside it. */

body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-body); }
/* The hidden attribute always wins over a component's display (a Notice is display: grid). */
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol { margin: 0; }
.display-xl, .display, .eyebrow { text-transform: uppercase; }
.score { font-variant-numeric: tabular-nums; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: var(--border-bold) solid var(--focus-ring); outline-offset: 2px; }

/* Preview helpers: a padded stack and a wrapping row. */
.scc-stack { display: grid; gap: var(--space-4); padding: var(--space-4); }
.scc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.scc-muted { color: var(--ink-muted); }

/* Button: 48px tall so it is an easy tap on a phone. */
.scc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-md);
  border: var(--border-bold) solid transparent; text-decoration: none; cursor: pointer; }
.scc-btn-primary { background: var(--action); color: var(--on-action); }
.scc-btn-signal { background: var(--signal); color: var(--on-signal); }
.scc-btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.scc-btn-primary:hover, .scc-btn-signal:hover { filter: brightness(1.12); }
.scc-btn-outline:hover { background: var(--surface-band); }

/* Pill: status and division. Each one carries its word; colour never works alone. */
.scc-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); border: var(--border-bold) solid transparent; white-space: nowrap; }
.scc-pill-open { background: var(--ice); color: var(--on-ice); }
.scc-pill-limited { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.scc-pill-full { background: var(--signal); color: var(--on-signal); }
.scc-pill-division { background: var(--ink); color: var(--surface); }
.scc-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Apply CTA: the one red button, its status pill, and the address as plain text. */
.scc-cta { display: grid; gap: var(--space-3); justify-items: start; }
.scc-cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.scc-cta-address { color: var(--ink-muted); user-select: all; }

/* Application form: labelled fields in fieldsets, one column, 48px controls. The submit button is
   primary (navy): the red Apply button at the top of the page is the view's one red. Error text uses
   signal-ink and always says what to fix, so colour never works alone. */
.scc-form { display: grid; gap: var(--space-6); }
.scc-fieldset { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: var(--space-4);
  background: var(--surface-raised); border: var(--border-thin) solid var(--line); border-radius: var(--radius-md); }
.scc-fieldset legend { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); color: var(--ink); }
.scc-field { display: grid; gap: var(--space-1); min-width: 0; }
.scc-field-label { color: var(--ink); }
.scc-field-hint { color: var(--ink-muted); }
.scc-required { color: var(--ink-muted); }
.scc-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--ink); background: var(--surface); border: var(--border-bold) solid var(--line-strong);
  border-radius: var(--radius-sm); }
textarea.scc-input { min-height: 112px; resize: vertical; }
.scc-input[aria-invalid="true"] { border-color: var(--signal-ink); }
.scc-choices { display: grid; gap: var(--space-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.scc-choice { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3);
  border: var(--border-thin) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.scc-choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--action); }
.scc-choice:has(input:checked) { border-color: var(--line-strong); background: var(--surface-band); }
.scc-field-error { color: var(--signal-ink); }
.scc-field-error:empty { display: none; }
.scc-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.scc-form-actions .scc-btn[disabled] { opacity: 0.6; cursor: progress; }
/* The honeypot: off-screen for people, still in the form for bots. Never display: none. */
.scc-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.scc-field-pair { display: grid; gap: var(--space-4); }
@media (min-width: 640px) {
  .scc-fieldset { padding: var(--space-6); }
  .scc-field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* @texture-start: generated by branding/design-system/make_texture.py. Don't edit by hand. */
/* Texture: faint ice scratches behind a whole area, used sparingly (at most three areas a page: the
   first-screen backdrop, one band section and the footer). The tile is a mask, so the colour and
   strength come from the texture tokens and follow the theme. Text stays at full contrast. */
.scc-texture, .scc-texture-navy { position: relative; isolation: isolate; }
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .scc-texture::before, .scc-texture-navy::before { content: ""; position: absolute; inset: 0; z-index: -1;
    pointer-events: none; background-color: var(--texture);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M239 123Q141 161 50 213' stroke-width='0.9' stroke-opacity='0.45'/%3E%3Cpath d='M268 227Q358 369 525 356' stroke-width='0.7' stroke-opacity='1.0'/%3E%3Cpath d='M-212 227Q-122 369 45 356' stroke-width='0.7' stroke-opacity='1.0'/%3E%3Cpath d='M292 249Q255 179 176 183' stroke-width='1.4' stroke-opacity='0.45'/%3E%3Cpath d='M124 396Q14 373 -95 344' stroke-width='0.7' stroke-opacity='0.45'/%3E%3Cpath d='M604 396Q494 373 385 344' stroke-width='0.7' stroke-opacity='0.45'/%3E%3Cpath d='M138 214Q197 209 225 261' stroke-width='1.1' stroke-opacity='0.8'/%3E%3Cpath d='M342 26Q483 58 627 55' stroke-width='1.4' stroke-opacity='0.8'/%3E%3Cpath d='M-138 26Q3 58 147 55' stroke-width='1.4' stroke-opacity='0.8'/%3E%3Cpath d='M277 158Q132 166 42 52' stroke-width='0.9' stroke-opacity='0.6'/%3E%3Cpath d='M470 89Q365 191 222 225' stroke-width='0.7' stroke-opacity='0.45'/%3E%3Cpath d='M184 114Q226 133 272 145' stroke-width='1.1' stroke-opacity='0.8'/%3E%3Cpath d='M21 458Q-60 479 -137 511' stroke-width='1.1' stroke-opacity='0.6'/%3E%3Cpath d='M21 -22Q-60 -1 -137 31' stroke-width='1.1' stroke-opacity='0.6'/%3E%3Cpath d='M501 458Q420 479 343 511' stroke-width='1.1' stroke-opacity='0.6'/%3E%3Cpath d='M501 -22Q420 -1 343 31' stroke-width='1.1' stroke-opacity='0.6'/%3E%3Cpath d='M110 352Q219 384 332 403' stroke-width='1.4' stroke-opacity='0.45'/%3E%3Cpath d='M391 425Q313 386 238 342' stroke-width='0.7' stroke-opacity='1.0'/%3E%3Cpath d='M33 55Q-52 13 -124 75' stroke-width='1.1' stroke-opacity='1.0'/%3E%3Cpath d='M513 55Q428 13 356 75' stroke-width='1.1' stroke-opacity='1.0'/%3E%3Cpath d='M359 173Q261 213 155 215' stroke-width='0.7' stroke-opacity='0.8'/%3E%3Cpath d='M472 355Q421 329 364 337' stroke-width='1.1' stroke-opacity='1.0'/%3E%3Cpath d='M262 342Q212 381 156 352' stroke-width='0.7' stroke-opacity='0.45'/%3E%3Cpath d='M366 243Q281 271 210 217' stroke-width='1.1' stroke-opacity='0.8'/%3E%3Cpath d='M355 185Q219 182 92 134' stroke-width='0.7' stroke-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 480px 480px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M239 123Q141 161 50 213' stroke-width='0.9' stroke-opacity='0.45'/%3E%3Cpath d='M268 227Q358 369 525 356' stroke-width='0.7' stroke-opacity='1.0'/%3E%3Cpath d='M-212 227Q-122 369 45 356' stroke-width='0.7' stroke-opacity='1.0'/%3E%3Cpath d='M292 249Q255 179 176 183' stroke-width='1.4' stroke-opacity='0.45'/%3E%3Cpath d='M124 396Q14 373 -95 344' stroke-width='0.7' stroke-opacity='0.45'/%3E%3Cpath d='M604 396Q494 373 385 344' stroke-width='0.7' stroke-opacity='0.45'/%3E%3Cpath d='M138 214Q197 209 225 261' stroke-width='1.1' stroke-opacity='0.8'/%3E%3Cpath d='M342 26Q483 58 627 55' stroke-width='1.4' stroke-opacity='0.8'/%3E%3Cpath d='M-138 26Q3 58 147 55' stroke-width='1.4' stroke-opacity='0.8'/%3E%3Cpath d='M277 158Q132 166 42 52' stroke-width='0.9' stroke-opacity='0.6'/%3E%3Cpath d='M470 89Q365 191 222 225' stroke-width='0.7' stroke-opacity='0.45'/%3E%3Cpath d='M184 114Q226 133 272 145' stroke-width='1.1' stroke-opacity='0.8'/%3E%3Cpath d='M21 458Q-60 479 -137 511' stroke-width='1.1' stroke-opacity='0.6'/%3E%3Cpath d='M21 -22Q-60 -1 -137 31' stroke-width='1.1' stroke-opacity='0.6'/%3E%3Cpath d='M501 458Q420 479 343 511' stroke-width='1.1' stroke-opacity='0.6'/%3E%3Cpath d='M501 -22Q420 -1 343 31' stroke-width='1.1' stroke-opacity='0.6'/%3E%3Cpath d='M110 352Q219 384 332 403' stroke-width='1.4' stroke-opacity='0.45'/%3E%3Cpath d='M391 425Q313 386 238 342' stroke-width='0.7' stroke-opacity='1.0'/%3E%3Cpath d='M33 55Q-52 13 -124 75' stroke-width='1.1' stroke-opacity='1.0'/%3E%3Cpath d='M513 55Q428 13 356 75' stroke-width='1.1' stroke-opacity='1.0'/%3E%3Cpath d='M359 173Q261 213 155 215' stroke-width='0.7' stroke-opacity='0.8'/%3E%3Cpath d='M472 355Q421 329 364 337' stroke-width='1.1' stroke-opacity='1.0'/%3E%3Cpath d='M262 342Q212 381 156 352' stroke-width='0.7' stroke-opacity='0.45'/%3E%3Cpath d='M366 243Q281 271 210 217' stroke-width='1.1' stroke-opacity='0.8'/%3E%3Cpath d='M355 185Q219 182 92 134' stroke-width='0.7' stroke-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 480px 480px; }
  .scc-texture-navy::before { background-color: var(--texture-on-navy); }
}
/* @texture-end */

/* Section heading: eyebrow, heading, and a short jersey stripe (ice over steel). */
.scc-section-head { display: grid; gap: var(--space-2); }
.scc-section-head .eyebrow { color: var(--ink-muted); }
.scc-stripe { display: grid; gap: 3px; width: 64px; margin-top: var(--space-1); }
.scc-stripe::before, .scc-stripe::after { content: ""; display: block; border-radius: var(--radius-pill); }
.scc-stripe::before { height: 6px; background: var(--ice); }
.scc-stripe::after { height: 2px; width: 40px; background: var(--steel); }

/* Event header: the top of the page. Mark beside the text on wide screens, above it on phones. */
.scc-event { display: grid; gap: var(--space-6); padding: var(--space-6) var(--space-4);
  background: var(--surface-raised); border: var(--border-thin) solid var(--line); border-radius: var(--radius-md); }
.scc-event-mark { width: 100%; max-width: 200px; height: auto; justify-self: center; }
.scc-event-body { display: grid; gap: var(--space-3); min-width: 0; }
.scc-event-body .display-xl { text-wrap: balance; }
.scc-event-host { color: var(--ink); }
.scc-event-when { color: var(--ink-muted); }
@media (min-width: 640px) {
  .scc-event { grid-template-columns: 200px minmax(0, 1fr); align-items: center; padding: var(--space-8); }
}
@media (max-width: 639px) { .scc-event-body .display-xl { font-size: 40px; line-height: 42px; } }

/* Fact list: "Every team gets". A big number or word, then the plain sentence. */
.scc-facts { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.scc-facts li { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md); }
.scc-facts .score { color: var(--ink); }
@media (min-width: 640px) { .scc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Game row: one game in the schedule. A final adds the score on the right. */
.scc-game { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md); }
.scc-game-when { display: grid; white-space: nowrap; }
.scc-game-when .eyebrow { color: var(--ink-muted); }
.scc-game-teams { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); min-width: 0; }
.scc-game-vs { color: var(--ink-muted); }
.scc-game-where { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.scc-game-result { grid-column: 2; }
@media (min-width: 640px) {
  .scc-game { grid-template-columns: max-content minmax(0, 1fr) auto; }
  .scc-game-where { grid-column: 2; }
  .scc-game-result { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
}

/* Standings table: scrolls sideways inside its own box on a narrow phone. */
.scc-table-wrap { overflow-x: auto; background: var(--surface-raised); border: var(--border-thin) solid var(--line); border-radius: var(--radius-md); }
.scc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.scc-table caption { text-align: left; padding: var(--space-3) var(--space-4); color: var(--ink-muted); }
.scc-table th, .scc-table td { padding: var(--space-3) var(--space-4); border-top: var(--border-thin) solid var(--line); text-align: right; }
.scc-table th:first-child, .scc-table td:first-child { text-align: left; }
.scc-table thead th { color: var(--ink-muted); }
.scc-table abbr { text-decoration: none; }
.scc-table .scc-pts { color: var(--ink); }

/* Notice: a fact the reader must not miss, in a full border (never a coloured side rule). */
.scc-notice { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--surface-raised);
  border: var(--border-bold) solid var(--line-strong); border-radius: var(--radius-md); }
.scc-notice .eyebrow { color: var(--link); }
.scc-notice-ice { background: var(--ice); border-color: var(--ice); color: var(--on-ice); }
.scc-notice-ice .eyebrow { color: var(--on-ice); }

/* Disclosure: a native details/summary that opens a longer list (the full schedule). Works without
   script. The summary is a 48px tap target; its state is a word ("Show" or "Hide"), not an icon. */
.scc-disclosure { background: var(--surface-raised); border: var(--border-thin) solid var(--line); border-radius: var(--radius-md); }
.scc-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 48px; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; color: var(--ink);
  border-radius: var(--radius-md); }
.scc-disclosure > summary::-webkit-details-marker { display: none; }
.scc-disclosure > summary::after { content: "Show"; flex: none; color: var(--link); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; font: 600 15px/20px var(--font-body); }
.scc-disclosure[open] > summary::after { content: "Hide"; }
.scc-disclosure[open] > summary { border-bottom: var(--border-thin) solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.scc-disclosure-body { display: grid; gap: var(--space-6); padding: var(--space-4); }
@media (min-width: 640px) { .scc-disclosure > summary, .scc-disclosure-body { padding-left: var(--space-6); padding-right: var(--space-6); } }

/* Updates list: "Last updated" and dated changes, newest first. */
.scc-updates { display: grid; gap: var(--space-3); }
.scc-updates ol { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.scc-updates li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); align-items: baseline;
  padding-bottom: var(--space-2); border-bottom: var(--border-thin) solid var(--line); }
.scc-updates time { color: var(--ink-muted); }

/* Site footer: navy in both themes, with the jersey stripe along its top edge. */
.scc-footer { display: grid; gap: var(--space-4); padding: var(--space-8) var(--space-4) var(--space-6);
  background: var(--navy); color: var(--white); border-top: 6px solid var(--ice); }
.scc-footer a { color: var(--ice); }
.scc-footer-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.scc-footer-badge { width: 96px; height: 96px; }
.scc-footer-text { display: grid; gap: var(--space-1); min-width: 0; }
.scc-footer .credit { color: var(--white); }