/* ============================================================================
   Turnauspolku — ui.css (30.9.2026): UUSI ILME SOVELLUKSEN SIVUILLE
   ----------------------------------------------------------------------------
   Mikael 30.9.2026: "Tämän ulkoasu (tuomarin näkymä) näyttää meidän vanhalta
   css:ltä. Onkohan sitä paljonkin sivulla vielä?" → "kaikki olisi uusittava".

   Sama designjärjestelmä kuin etusivun "Tactical Precision" (Base44, 12.9.,
   app.css ~5493) ja kehys (chrome.css, 29.9.). Ladataan chrome.css:n JÄLKEEN.

   KÄYTTÖÖNOTTO SIVU KERRALLAAN: KAIKKI säännöt alkavat `html:root body.ui-v2`.
   Sivu siirretään lisäämällä sen sivuluokka listaan src/web/ui_v2.ts ja
   viimeistelemällä sen omat kohdat tämän tiedoston SIVUOSIOIHIN (alla).
   Vanhat säännöt (app.css, data/custom.css) ovat !important-lohkoja, joten
   tässä tiedostossa käytetään !importantia siellä missä vanha sääntö muuten
   voittaisi. data/custom.css on vain luku (data/AGENTS.md) — EI muokata.

   SÄÄNNÖT
   1. Vain --ui-*-tokenit. Jokaisella on tumman teeman pari (html.theme-dark).
      Ei heksoja sääntöjen sisällä.
   2. Aksentti (--ui-turf, #CCFF00) on TAUSTA- ja grafiikkaväri. Tekstinä
      vaalealla pinnalla se on näkymätön (1,08:1). Sen päällä teksti on
      --ui-on-turf.
   3. Otsikot (h1, h2) Saira Extra Condensed isoin kirjaimin. Muu teksti
      järjestelmäfontilla. Pienin teksti 12 px: ei 10–11 px:n versaalirivejä
      (tuomarin kortin "Aika muuttunut" luettiin "Alka muuttunut").
   4. Kortit: valkoinen pinta, hiusviiva, suorat kulmat, ei varjoa, ei lasia.
   5. Pääpainike: tumma pinta, Saira isoin kirjaimin, leikatut kulmat.
      Toissijainen: reunaviiva, tavallinen kirjasin.
   6. Fokusrengas on --ui-fg, ei aksentti.
   7. Semanttiset värit (virhe/varoitus/onnistui) omina tokeneinaan.
   ========================================================================== */

html:root {
  --ui-bg: #f8f9fa;
  --ui-panel: #ffffff;
  --ui-fg: #111418;
  --ui-mut: #525960;
  --ui-line: #dcdfe5;
  --ui-control: #6f767f;
  --ui-turf: #ccff00;
  --ui-on-turf: #111418;
  --ui-solid: #111418;
  --ui-solid-hover: #2b3138;
  --ui-on-solid: #ffffff;
  --ui-hover: rgba(17, 20, 24, 0.05);
  --ui-warn-bg: #fff4d6;
  --ui-warn-fg: #6b4a00;
  --ui-warn-line: #f0d48a;
  --ui-err-bg: #fdecec;
  --ui-err-fg: #8a1c1c;
  --ui-err-line: #f2b8b8;
  --ui-ok-bg: #e8f6ee;
  --ui-ok-fg: #14532d;
  --ui-ok-line: #a7d9bb;
  --ui-display: 'Saira Extra Condensed', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --ui-text: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --ui-notch: 7px;
}
html:root.theme-dark {
  --ui-bg: #0e1113;
  --ui-panel: #16191c;
  --ui-fg: #f1f3f4;
  --ui-mut: #a8b0b8;
  --ui-line: #2a2f34;
  --ui-control: #8d959e;
  --ui-turf: #ccff00;
  --ui-on-turf: #111418;
  --ui-solid: #f1f3f4;
  --ui-solid-hover: #d5dadf;
  --ui-on-solid: #111418;
  --ui-hover: rgba(255, 255, 255, 0.06);
  --ui-warn-bg: #3a2e0b;
  --ui-warn-fg: #f5d27a;
  --ui-warn-line: #5c4a14;
  --ui-err-bg: #3a1515;
  --ui-err-fg: #f4a3a3;
  --ui-err-line: #5e2424;
  --ui-ok-bg: #0f2e1d;
  --ui-ok-fg: #9ee0b8;
  --ui-ok-line: #1f5236;
}

/* ---------------------------------------------------------------------------
   PERUSOSAT — kaikille ui-v2-sivuille
   ------------------------------------------------------------------------ */

/* Tausta: vanha vihreä ruutupaperi (custom.css body:not(.page-display)) ja
   vesileima (body::before) pois. */
html:root body.ui-v2 {
  background: var(--ui-bg) !important;
  background-image: none !important;
  color: var(--ui-fg);
}
html:root body.ui-v2::before { content: none !important; }
html:root body.ui-v2 .site-main {
  font-family: var(--ui-text);
  color: var(--ui-fg);
}

/* Otsikot */
html:root body.ui-v2 .site-main h1 {
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: clamp(2.1rem, 5vw, 3.1rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase;
  color: var(--ui-fg) !important;
  margin: 12px 0 18px !important;
}
html:root body.ui-v2 .site-main h2 {
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: 1.55rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2 .site-main h3 {
  font-family: var(--ui-text) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-fg) !important;
}

/* Leipäteksti ja apuvihjeet */
html:root body.ui-v2 .site-main :is(.mut, .field-help) {
  color: var(--ui-mut) !important;
  font-size: max(13px, 0.875rem);
}
html:root body.ui-v2 .site-main a:not([class]) {
  color: var(--ui-fg);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ui-control);
}

/* Kortit */
html:root body.ui-v2 .site-main .card {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--ui-fg);
}

/* Painikkeet: pääpainike tumma + Saira + leikatut kulmat */
html:root body.ui-v2 .site-main :is(
  button:not(.ghost):not(.linklike):not(.danger),
  .btn:not(.ghost),
  a.button,
  a.live-link,
  a.ref-next-cta,
  a.team-next-action-cta
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px 9px !important;
  background: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  clip-path: polygon(
    var(--ui-notch) 0, calc(100% - var(--ui-notch)) 0, 100% var(--ui-notch),
    100% calc(100% - var(--ui-notch)), calc(100% - var(--ui-notch)) 100%,
    var(--ui-notch) 100%, 0 calc(100% - var(--ui-notch)), 0 var(--ui-notch)
  );
}
html:root body.ui-v2 .site-main :is(
  button:not(.ghost):not(.linklike):not(.danger),
  .btn:not(.ghost),
  a.button,
  a.live-link,
  a.ref-next-cta,
  a.team-next-action-cta
):hover {
  background: var(--ui-solid-hover) !important;
}
/* Toissijainen: reunaviiva, tavallinen kirjasin */
html:root body.ui-v2 .site-main :is(
  button.ghost,
  .btn.ghost,
  a.ghost,
  a.mc-detail,
  a.ref-match-map-link,
  a.team-next-action-ghost
) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
  border: 1px solid var(--ui-control) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  clip-path: none !important;
}
html:root body.ui-v2 .site-main :is(button.ghost, .btn.ghost, a.ghost, a.mc-detail, a.ref-match-map-link, a.team-next-action-ghost):hover {
  background: var(--ui-hover) !important;
}
html:root body.ui-v2 .site-main :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ui-fg) !important;
  outline-offset: 2px !important;
}

/* Merkit: typografia ja kulmat. Tilamerkkien (status-*) värit säilyvät. */
html:root body.ui-v2 .site-main .pill {
  border-radius: 0 !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  padding: 3px 8px !important;
}
html:root body.ui-v2 .site-main .pill:not([class*="status-"]) {
  background: var(--ui-panel) !important;
  color: var(--ui-fg) !important;
  border: 1px solid var(--ui-line) !important;
}

/* Ilmoitukset */
html:root body.ui-v2 .site-main .err {
  background: var(--ui-err-bg) !important;
  color: var(--ui-err-fg) !important;
  border: 1px solid var(--ui-err-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2 .site-main .ok {
  background: var(--ui-ok-bg) !important;
  color: var(--ui-ok-fg) !important;
  border: 1px solid var(--ui-ok-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2 .site-main :is(.err, .ok) :is(a, b, strong, li) { color: inherit !important; }
html:root body.ui-v2 .site-main :is(.err, .ok) { font-weight: 500 !important; line-height: 1.5; }
html:root body.ui-v2 .site-main :is(.err, .ok) :is(li, p) { font-weight: 500 !important; }

/* Sivun reunus puhelimessa: vanhoilla sivuilla sisältö oli kiinni ruudun
   reunassa (tuomarin näkymä 390 px: otsikko 5 px reunasta). */
@media (max-width: 720px) {
  html:root body.ui-v2 .site-main { padding-inline: 16px !important; }
}

/* ---------------------------------------------------------------------------
   OTTELUKORTTI (.match-card, render.ts matchCardHtml) — kaikille ui-v2-sivuille
   Ennen: 10–11 px versaalirivit, 800–950-lihavointi, joukkueet reunoissa ja
   irrallinen "vs"-rivi. Nyt: numero tummana lappuna, aika selvästi, joukkueet
   allekkain, kenttä hillitysti.
   ------------------------------------------------------------------------ */
html:root body.ui-v2 .match-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)) !important;
  gap: 12px !important;
}
html:root body.ui-v2 .match-card {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2 .match-card .mc-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2 .match-card .mc-number {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px !important;
  background: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
html:root body.ui-v2 .match-card .mc-number a { color: inherit !important; text-decoration: none !important; }
html:root body.ui-v2 .match-card .mc-time {
  font-family: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2 .match-card .mc-teams {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 2px;
  font-family: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2 .match-card :is(.mc-home, .mc-away) {
  display: block !important;
  text-align: left !important;
  width: 100%;
  overflow-wrap: anywhere;
}
html:root body.ui-v2 .match-card .mc-teams .mc-vs { display: none !important; }
/* Pelaamaton ottelu: pelkkä "vs" ei kerro mitään, joukkueet ovat jo allekkain. */
html:root body.ui-v2 .match-card .mc-result:has(> .mc-result-vs:only-child) { display: none !important; }
html:root body.ui-v2 .match-card .mc-result {
  font-family: var(--ui-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2 .match-card .mc-meta {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2 .match-card .match-changed {
  display: inline-flex !important;
  width: fit-content;
  padding: 3px 8px !important;
  background: var(--ui-warn-bg) !important;
  color: var(--ui-warn-fg) !important;
  border: 1px solid var(--ui-warn-line) !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html:root body.ui-v2 .match-card .mc-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

/* ---------------------------------------------------------------------------
   SIVUOSIO: TUOMARIN NÄKYMÄ (body.page-referee, server.ts pageReferee)
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-referee .ref-next-match {
  position: relative;
  padding: 18px 20px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 6px solid var(--ui-turf) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-referee .ref-next-label {
  display: inline-block;
  width: fit-content;
  margin: 0 0 10px;
  padding: 3px 9px;
  background: var(--ui-turf) !important;
  color: var(--ui-on-turf) !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
html:root body.ui-v2.page-referee .ref-next-teams {
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-referee .ref-next-meta {
  margin-top: 6px;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2.page-referee .ref-next-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
html:root body.ui-v2.page-referee .ref-overlap-warning { padding: 14px 16px !important; }
html:root body.ui-v2.page-referee .ref-overlap-list { margin: 8px 0; padding-left: 20px; }
/* Ottelukorttien ympärillä ei laatikkoa: kortit ovat jo omia pintojaan. */
html:root body.ui-v2.page-referee .site-main > .card:has(.match-cards) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 28px;
}
html:root body.ui-v2.page-referee .site-main > .card > h2 { margin: 0 0 14px !important; }

/* Tuomarivastaavan yhteystietokortti: custom.css antaa liukuvärin ja
   pyöristyksen — tasataan hiusviivakortiksi, nimiö 12 px. */
html:root body.ui-v2.page-referee .ref-contact-card {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 4px solid var(--ui-fg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-referee .ref-contact-label {
  font-size: 12px !important;
  color: var(--ui-mut) !important;
}

/* Tieto-osio (referee_info_section.ts, 1.10.): ohjeet, peliajat, säännöt,
   muistilista. Kortti tulee PERUSOSISTA; tässä vain sisäiset välit. */
html:root body.ui-v2.page-referee .ref-info { display: grid; gap: 12px; margin: 12px 0; }
html:root body.ui-v2.page-referee .ref-info-card { margin: 0 !important; }
html:root body.ui-v2.page-referee .ref-info-title { margin: 0 0 6px !important; font-size: 18px !important; }
html:root body.ui-v2.page-referee .ref-info-instructions h3 { margin: 10px 0 4px !important; font-size: 15px !important; }
html:root body.ui-v2.page-referee .ref-info-pre { white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 8px; }
html:root body.ui-v2.page-referee :is(.ref-info-series, .ref-info-rules, .ref-guide) > summary { cursor: pointer; font-weight: 600; }
html:root body.ui-v2.page-referee .ref-info-series-list, html:root body.ui-v2.page-referee .ref-guide-steps { margin: 8px 0 0; padding-left: 20px; }
html:root body.ui-v2.page-referee .ref-info-series-row { margin: 3px 0; overflow-wrap: anywhere; }

/* ===========================================================================
   KAISTA A — TURNAUSPÄIVÄN PORTAALIT (joukkueen portaali, tulospalvelu,
   talkoot, tilastoija, tuomaripooli). Omat säännöt VAIN tämän otsikon alle.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Jaetut lomake- ja taulukkoperussäännöt kaistan kuudelle sivulle (viisi
   portaalia + majoituksen peruutussivu page-team-portal, joka käyttää samaa
   joukkueportaalin koodia). PERUSOSAT ei kata input/select/textarea/label:
   data/custom.css:n "label { font-weight:900; text-transform:uppercase;
   font-size:.76rem }" ja puuttuva kenttätyyli korvataan tässä (sääntö 7).
   ------------------------------------------------------------------------ */
html:root body.ui-v2:is(.page-team, .page-team-portal, .page-results-desk, .page-staff-portal, .page-stat-collector, .page-referee-pool) label {
  font-family: var(--ui-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-mut) !important;
  margin: 0 0 6px !important;
}
html:root body.ui-v2:is(.page-team, .page-team-portal, .page-results-desk, .page-staff-portal, .page-stat-collector, .page-referee-pool) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  select
) {
  min-height: 44px;
  padding: 8px 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html:root body.ui-v2:is(.page-team, .page-team-portal, .page-results-desk, .page-staff-portal, .page-stat-collector, .page-referee-pool) textarea {
  min-height: 96px;
  padding: 8px 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
/* Sivun otsikko (talkoot, tuomaripooli): data/custom.css:n YLEINEN
   .page-header (ei sivukohtainen) antaa liuku-taustan ja varjon kaikille
   .page-header-elementeille — rajataan tässä näiden kahden sivun kortiksi. */
html:root body.ui-v2:is(.page-staff-portal, .page-referee-pool) .page-header {
  padding: 18px 20px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   page-team — joukkueen portaali (/team/<koodi>)
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-team .next-match {
  position: relative;
  padding: 18px 20px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 6px solid var(--ui-turf) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-team .next-match.nm-empty { border-left-color: var(--ui-line) !important; }
html:root body.ui-v2.page-team .nm-label {
  display: inline-block;
  width: fit-content;
  margin: 0 0 10px;
  padding: 3px 9px;
  background: var(--ui-turf) !important;
  color: var(--ui-on-turf) !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
html:root body.ui-v2.page-team .nm-opponent {
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-team .nm-meta {
  margin-top: 6px;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2.page-team .nm-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }

/* team-status-card / team-payment-card / team-next-action jakavat saman
   "valkoinen kortti + tilanvärinen reunaviiva" -kaavan kuin mallisivun
   .ref-next-match (ei näy oletusfixturessa — joukkue on vahvistettu eikä
   sarjassa ole maksua — mutta tila voi olla jono/odottaa/hylätty/maksu
   kesken turnauspäivänäkin, joten kortit skinataan silti). */
html:root body.ui-v2.page-team :is(.team-status-card, .team-payment-card, .team-next-action) {
  display: grid;
  gap: 8px;
  padding: 16px 18px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 6px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-team .team-payment-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
html:root body.ui-v2.page-team :is(.team-status-card.is-confirmed, .team-payment-card.is-paid) { border-left-color: var(--ui-ok-fg) !important; }
html:root body.ui-v2.page-team :is(.team-status-card.is-pending, .team-status-card.is-waitlist, .team-payment-card.is-unpaid) { border-left-color: var(--ui-warn-fg) !important; }
html:root body.ui-v2.page-team .team-status-card.is-rejected { border-left-color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-team .team-payment-card.is-muted { border-left-color: var(--ui-line) !important; }
html:root body.ui-v2.page-team .team-payment-label {
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2.page-team :is(.team-next-action-copy, .team-payment-card p) { color: var(--ui-mut) !important; font-weight: 500 !important; }

/* Ylimääräiset CTA-linkit joita PERUSOSATin painikevalitsin ei kata (ei
   kosketa PERUSOSATa, sääntö 2 — sama ilme toistetaan omassa osiossa).
   nm-cal/team-payment-link ovat korttinsa ainoa toiminto, sama rooli kuin
   mallisivun a.ref-next-cta → pääpainike. nm-map-link on toissijainen. */
html:root body.ui-v2.page-team :is(a.nm-cal, a.team-payment-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px 9px !important;
  background: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  clip-path: polygon(
    var(--ui-notch) 0, calc(100% - var(--ui-notch)) 0, 100% var(--ui-notch),
    100% calc(100% - var(--ui-notch)), calc(100% - var(--ui-notch)) 100%,
    var(--ui-notch) 100%, 0 calc(100% - var(--ui-notch)), 0 var(--ui-notch)
  );
}
html:root body.ui-v2.page-team :is(a.nm-cal, a.team-payment-link):hover { background: var(--ui-solid-hover) !important; }
html:root body.ui-v2.page-team a.nm-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
  border: 1px solid var(--ui-control) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  clip-path: none !important;
}
html:root body.ui-v2.page-team a.nm-map-link:hover { background: var(--ui-hover) !important; }

html:root body.ui-v2.page-team .team-code-notice {
  padding: 12px 16px !important;
  border: 1px dashed var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
  color: var(--ui-mut) !important;
  font-weight: 500 !important;
}
html:root body.ui-v2.page-team .team-code-notice b { color: var(--ui-fg) !important; }

/* team-data-card on jo .card (PERUSOSAT) — vain sisäiset osiot (Joukkueen
   perustiedot / Yhteyshenkilö / Pelipaidat / Esteet ja toiveet / Pelaajat)
   tarvitsevat saman litteän hiusviivakortin, ne eivät peri .card:ia. */
html:root body.ui-v2.page-team .team-data-section {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
  box-shadow: none !important;
}
/* team-data-card.team-data-details -taitoksen oma +/− -pyöreä merkki (eri
   luokka kuin team-secondary-details, sama kaava, tarvitsee oman ohituksen). */
html:root body.ui-v2.page-team .team-data-card.team-data-details > summary { color: var(--ui-fg) !important; font-weight: 700 !important; }
html:root body.ui-v2.page-team .team-data-card.team-data-details > summary::after {
  border: 1px solid var(--ui-control) !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-team .team-data-card.team-data-details[open] > summary {
  border-bottom: 1px solid var(--ui-line) !important;
  background: transparent !important;
}
html:root body.ui-v2.page-team .team-data-card.team-data-details[open] > summary::after {
  background: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
}
html:root body.ui-v2.page-team .roster-bulk-actions {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Pelaajataulukko (.roster-table.admin-table-stack) ja suostumustaulukko:
   hiusviivat, ei 900-painoista 11–12 px:n versaalia (sääntö 7). */
html:root body.ui-v2.page-team :is(.roster-table, .card-consent-table) {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
}
html:root body.ui-v2.page-team :is(.roster-table, .card-consent-table) th {
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--ui-line) !important;
}
html:root body.ui-v2.page-team :is(.roster-table, .card-consent-table) td {
  color: var(--ui-fg) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--ui-line) !important;
}
@media (max-width: 600px) {
  html:root body.ui-v2.page-team :is(.roster-table, .card-consent-table).admin-table-stack tr:not(:first-child) {
    border: 1px solid var(--ui-line) !important;
    border-left: 1px solid var(--ui-line) !important;
    border-radius: 0 !important;
    background: var(--ui-panel) !important;
    box-shadow: none !important;
  }
  html:root body.ui-v2.page-team :is(.roster-table, .card-consent-table).admin-table-stack td::before {
    color: var(--ui-mut) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
}

/* "Palkitse vastustaja" / "Harvoin tarvittavat" -laatikot (<details>,
   eivät .card). Sisällä avautuva team-withdrawal-card ON jo .card. */
html:root body.ui-v2.page-team .team-secondary-details {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-team .team-secondary-details > summary { color: var(--ui-fg) !important; font-weight: 700 !important; }
html:root body.ui-v2.page-team .team-secondary-details > summary::after {
  border: 1px solid var(--ui-control) !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-team .team-secondary-details[open] > summary {
  border-bottom: 1px solid var(--ui-line) !important;
  background: transparent !important;
}
html:root body.ui-v2.page-team .team-secondary-details[open] > summary::after {
  background: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
}
html:root body.ui-v2.page-team .team-secondary-summary-hint { color: var(--ui-mut) !important; font-size: 13px !important; font-weight: 500 !important; }

html:root body.ui-v2.page-team a.team-print-link {
  color: var(--ui-fg) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--ui-control) !important;
  text-underline-offset: 3px !important;
}

/* ---------------------------------------------------------------------------
   page-results-desk — tulospalvelu (/tulospalvelu/<koodi>)
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-results-desk .rds-card {
  padding: 14px 16px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 6px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-results-desk .rds-label {
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
html:root body.ui-v2.page-results-desk .rds-value {
  color: var(--ui-fg) !important;
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
}
html:root body.ui-v2.page-results-desk .rds-done { border-left-color: var(--ui-ok-fg) !important; }
html:root body.ui-v2.page-results-desk .rds-pending { border-left-color: var(--ui-warn-fg) !important; }
html:root body.ui-v2.page-results-desk .rds-live { border-left-color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-results-desk :is(.rds-pending.is-active, .rds-live.is-active) {
  background: var(--ui-panel) !important;
  border-color: var(--ui-line) !important;
}

html:root body.ui-v2.page-results-desk :is(.results-desk-form, .results-desk-step-1, .results-desk-step-2, .results-desk-recent) {
  padding: 16px 18px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-results-desk .results-desk-help { color: var(--ui-mut) !important; }

html:root body.ui-v2.page-results-desk table.results-desk-pending {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
}
html:root body.ui-v2.page-results-desk table.results-desk-pending th {
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--ui-line) !important;
}
html:root body.ui-v2.page-results-desk table.results-desk-pending td {
  color: var(--ui-fg) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--ui-line) !important;
}
html:root body.ui-v2.page-results-desk table.results-desk-pending td:first-child { font-weight: 700 !important; }
/* Lead 1.10.: custom.css tasaa kaikki solut oikealle ja värjää rivit vanhalla
   paneelivärillä — tuloslista luetaan vasemmalta, rivit valkoisiksi. */
html:root body.ui-v2.page-results-desk table.results-desk-pending :is(th, td) { text-align: left !important; }
html:root body.ui-v2.page-results-desk table.results-desk-pending tr { background: transparent !important; }
html:root body.ui-v2.page-results-desk table.results-desk-pending :is(th, td):last-child { text-align: right !important; }
html:root body.ui-v2.page-results-desk :is(.results-row.is-done, tr.results-row.is-done td) {
  background: var(--ui-ok-bg) !important;
  color: var(--ui-ok-fg) !important;
}
@media (max-width: 640px) {
  html:root body.ui-v2.page-results-desk table.results-desk-pending tr {
    border: 1px solid var(--ui-line) !important;
    border-radius: 0 !important;
    background: var(--ui-panel) !important;
    box-shadow: none !important;
  }
  html:root body.ui-v2.page-results-desk table.results-desk-pending td::before {
    color: var(--ui-mut) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  html:root body.ui-v2.page-results-desk table.results-desk-pending td:first-child {
    color: var(--ui-fg) !important;
  }
}

/* ---------------------------------------------------------------------------
   page-stat-collector — tilastointi (/tilastoi/<koodi>)
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-stat-collector :is(.sc-meta, .sc-quality) {
  color: var(--ui-mut) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
/* .stat-btn on <button>, jonka PERUSOSAT muuttaisi tummaksi leikattukulmaiseksi
   Saira-painikkeeksi (html:root body.ui-v2 .site-main button:not(.ghost):
   not(.linklike):not(.danger), spesifisyys (0,6,3)) — tilastoinnin
   isokosketuspintaiset laskurit eivät ole sitä. Oma ilme tässä VOITTAA vain
   jos spesifisyys riittää (molemmat !important): .site-main mukaan ja samat
   :not()-toistot spesifisyydeksi (0,7,3). */
html:root body.ui-v2.page-stat-collector .site-main button.stat-btn:not(.ghost):not(.linklike):not(.danger) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 8px 6px !important;
  background: var(--ui-panel) !important;
  color: var(--ui-fg) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ui-text) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  clip-path: none !important;
}
html:root body.ui-v2.page-stat-collector .site-main button.stat-btn:not(.ghost):not(.linklike):not(.danger):hover { background: var(--ui-hover) !important; }
/* Koti/vieras-erottelu (sininen/oranssi) on olemassa oleva TOIMINNALLINEN
   väritys (app.css .stat-btn-home/.stat-btn-away) — ei uusi brändivalinta,
   säilytetään sellaisenaan samaan tapaan kuin status-*-pillerien värit. */
html:root body.ui-v2.page-stat-collector .site-main button.stat-btn-home:not(.ghost):not(.linklike):not(.danger) { border-color: #1f6feb !important; }
html:root body.ui-v2.page-stat-collector .site-main button.stat-btn-away:not(.ghost):not(.linklike):not(.danger) { border-color: #e8590c !important; }
html:root body.ui-v2.page-stat-collector .site-main .sc-poss-btns button.sc-active:not(.ghost):not(.linklike):not(.danger) {
  background: var(--ui-turf) !important;
  border-color: var(--ui-turf) !important;
  color: var(--ui-on-turf) !important;
}

/* ---------------------------------------------------------------------------
   page-referee-pool — tuomaripoolin julkinen sivu (/tt/<token>)
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-referee-pool .pool-claim-form {
  margin-top: 14px;
  padding: 18px 20px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
}

/* --- kaista A loppu --- */

/* ===========================================================================
   KAISTA B — JÄRJESTÄJÄN SIVUT (page-admin: yleiskuva, sarjat, joukkueet,
   otteluohjelma, laskutus, viestit, asetukset …). Omat säännöt VAIN tänne.

   page-admin oli valmiiksi kertaalleen uudistettu "Iltapeli"-ilmeeseen
   (pyöristetyt 14 px kortit, --tp-accent-soft-täytöt) app.css:ssä — kaikki
   sen säännöt ovat !important, joten tämäkin osio käyttää !importantia
   kaikkialla missä muuten hävittäisi. .page-tournament-grid (otteluruudukko)
   on täysnäyttösivu jonka tiheää taulukkoa ei kosketa rakenteellisesti,
   vain sen kevyt otsikkorivi ja napit — ks. oma lohko lopussa.

   TOKENIUUDELLEENOHJAUS: page-admin käytti aiemmin omaa --tp-*-tokeniper-
   hettään (surface/line/mut/ink-text/live) JA custom.css:n yleisiä
   --panel/--bg/--line/--mut/--fg-tokeneita (app.css: body.page-admin {
   --fg: var(--tp-ink); --mut: var(--tp-mut); --line: var(--tp-line); … } —
   HUOM --fg osoittaa --tp-inkiin, ei --tp-ink-textiin). Kymmenet pienet
   komponentit (cc-section-icon, rc-blocker, prc-row, platform-billing-
   metric, plan-flow, si-item, ref-stat, grid-cell, kanslia-chip,
   results-code-qr…) lukevat näitä SUORAAN ilman omaa !importantia. Sen
   sijaan että jokainen komponentti ohitettaisiin erikseen, tokenit
   uudelleenohjataan tässä ui-tokeneihin — CSS-muuttujan arvo ratkeaa
   elementin laskennan hetkellä, joten yksi korkeamman spesifisyyden
   !important-määrittely riittää sekä vaaleaan että tummaan teemaan
   (var(--ui-bg) jne. itse vaihtaa arvoa html.theme-dark:n mukaan).
   --accent/--tp-accent JÄTETÄÄN ennalleen (kuluttajat kovakoodaavat
   color:#fff-parin — ks. erilliset korjaukset .cc-section-cta.is-primary
   ja .plan-grid-link-cta alla).
   ======================================================================== */
html:root body.ui-v2.page-admin {
  --tp-surface: var(--ui-bg) !important;
  --tp-surface-2: var(--ui-bg) !important;
  --tp-line: var(--ui-line) !important;
  --tp-mut: var(--ui-mut) !important;
  --tp-mut-2: var(--ui-mut) !important;
  --tp-ink-text: var(--ui-fg) !important;
  --tp-ink: var(--ui-fg) !important;
  --tp-live: var(--ui-err-fg) !important;
  --tp-accent-soft: var(--ui-bg) !important;
  --panel: var(--ui-panel) !important;
  --panel-soft: var(--ui-bg) !important;
  --bg: var(--ui-bg) !important;
  --line: var(--ui-line) !important;
  --mut: var(--ui-mut) !important;
  --fg: var(--ui-fg) !important;
  --danger: var(--ui-err-fg) !important;
  --ok: var(--ui-ok-fg) !important;
  --warning: var(--ui-warn-fg) !important;
  /* --accent jäljellä olevat tekstikäyttäjät (linkit, pienet merkit):
     ui.css:n linjaus on tumma teksti + alleviivaus, ei väri-linkki (ks.
     PERUSOSAT .site-main a:not([class])) — sama tässä. Taustatäyttöiset
     kuluttajat (cc-section-cta.is-primary, plan-grid-link-cta) on
     ohitettu erikseen omalla !importantillaan eivätkä lue tätä. */
  --accent: var(--ui-fg) !important;
  --accent-soft: var(--ui-bg) !important;
  --accent-tint: var(--ui-bg) !important;
}

/* --- Murupolku, sivuotsikko --- */
html:root body.ui-v2.page-admin .crumbs {
  background: none !important;
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
}
html:root body.ui-v2.page-admin .crumbs a { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin .crumbs a:hover { color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .page-header { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html:root body.ui-v2.page-admin h1,
html:root body.ui-v2.page-admin .site-main > h1 { font-weight: 700 !important; letter-spacing: -0.01em !important; }
html:root body.ui-v2.page-admin h2,
html:root body.ui-v2.page-admin h3 { color: var(--ui-fg) !important; letter-spacing: 0 !important; }

/* --- Sivunavigaatio: ei omaa pintaa, aktiivinen = tumma teksti + 3 px
   aksenttipalkki (--ui-turf). Läpinäkyvä vasen reuna kaikilla riveillä,
   ettei aktivointi hypäytä tekstiä sivuun. --- */
html:root body.ui-v2.page-admin .side-nav {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 16px !important;
}
html:root body.ui-v2.page-admin .side-nav-title {
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
html:root body.ui-v2.page-admin .side-nav-group-title {
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
html:root body.ui-v2.page-admin :is(.side-nav-link, .ts-item) {
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding-left: 9px !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-admin :is(.side-nav-link, .ts-item):hover {
  background: var(--ui-hover) !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin :is(.side-nav-link.is-active, .ts-item.is-active) {
  border-left-color: var(--ui-turf) !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
  font-weight: 700 !important;
}
html:root body.ui-v2.page-admin .side-nav-group[data-today] { border-left-color: var(--ui-turf) !important; }
html:root body.ui-v2.page-admin .tournament-switcher { border-top-color: var(--ui-line) !important; }

/* --- Moduulitabit (760–1023 px) ja mobiilinavi (<760 px): sama hiusviiva-
   kieli kuin muualla, ei täytepillereitä. --- */
html:root body.ui-v2.page-admin .module-tabs { border-bottom-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .module-tab {
  border: 1px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-admin .module-tab:hover { color: var(--ui-fg) !important; background: var(--ui-hover) !important; }
html:root body.ui-v2.page-admin .module-tab.is-active {
  background: none !important;
  border-color: var(--ui-line) !important;
  border-bottom-color: var(--ui-fg) !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .admin-mobile-nav-details,
html:root body.ui-v2.page-admin .admin-mobile-nav-toggle,
html:root body.ui-v2.page-admin .admin-mobile-nav-panel {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-admin .admin-mobile-nav-link { background: none !important; color: var(--ui-mut) !important; font-family: var(--ui-text) !important; }
html:root body.ui-v2.page-admin .admin-mobile-nav-link:hover,
html:root body.ui-v2.page-admin .admin-mobile-nav-link.is-active {
  background: var(--ui-hover) !important;
  color: var(--ui-fg) !important;
  font-weight: 700 !important;
}
html:root body.ui-v2.page-admin .admin-mobile-nav-hint { color: var(--ui-mut) !important; }

/* --- Kortit: yleinen valkoinen hiusviivapinta jokaiselle "…-card"-
   loppuiselle säiliölle + settings-card/command-center/next-action-card.
   Tilalliset (conflict-card, cc-section jne.) saavat oman värityksensä
   alempana — tämä ei aseta border-left/top-väriä. --- */
html:root body.ui-v2.page-admin :is(
  [class*="-card"], .settings-card, .command-center, .next-action-card,
  .publish-readiness-card, .conflict-center, .billing-panel, .tic-metric
) {
  background: var(--ui-panel) !important;
  border-color: var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html:root body.ui-v2.page-admin :is([class*="-card"], .settings-card, .metric):hover {
  border-color: var(--ui-line) !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-admin .metric::after { content: none !important; }
html:root body.ui-v2.page-admin .billing-panel::before { background: var(--ui-turf) !important; }

/* --- Tilastokortit (.metric) --- */
html:root body.ui-v2.page-admin .metric-value,
html:root body.ui-v2.page-admin .tic-value,
html:root body.ui-v2.page-admin .pbm-value {
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .metric-label,
html:root body.ui-v2.page-admin .tic-label,
html:root body.ui-v2.page-admin .pbm-label {
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2.page-admin .tic-metric.is-danger .tic-value { color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-admin .tic-metric.is-warn .tic-value { color: var(--ui-warn-fg) !important; }

/* --- Komentokeskus (.cc-*) --- */
html:root body.ui-v2.page-admin .cc-attention {
  background: var(--ui-warn-bg) !important;
  border: 1px solid var(--ui-warn-line) !important;
  border-left: 4px solid var(--ui-warn-fg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-warn-fg) !important;
}
html:root body.ui-v2.page-admin .cc-attention-title,
html:root body.ui-v2.page-admin .cc-attention-item { color: var(--ui-warn-fg) !important; }
html:root body.ui-v2.page-admin .cc-attention-detail { color: var(--ui-warn-fg) !important; opacity: 0.85; }
html:root body.ui-v2.page-admin .cc-attention-sev { color: var(--ui-warn-fg) !important; font-size: 12px !important; font-weight: 700 !important; }
html:root body.ui-v2.page-admin .cc-attention-item.is-critical .cc-attention-sev { color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-admin .cc-attention-cta { color: var(--ui-warn-fg) !important; text-decoration: underline; }
html:root body.ui-v2.page-admin .cc-section {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 3px solid var(--ui-control) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-admin .cc-section.is-ok { border-left-color: var(--ui-ok-fg) !important; }
html:root body.ui-v2.page-admin .cc-section.is-todo,
html:root body.ui-v2.page-admin .cc-section.is-warn { border-left-color: var(--ui-warn-fg) !important; }
html:root body.ui-v2.page-admin .cc-section.is-danger { border-left-color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-admin .cc-section-icon { background: var(--ui-bg) !important; border: 0 !important; border-radius: 0 !important; }
html:root body.ui-v2.page-admin .cc-section-title { font-weight: 700 !important; color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .cc-section-state {
  background: var(--ui-bg) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-mut) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html:root body.ui-v2.page-admin .cc-section-summary { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin .cc-section-cta { border-radius: 0 !important; box-shadow: none !important; font-size: 12px !important; }
html:root body.ui-v2.page-admin .cc-section-cta.is-primary {
  background: var(--ui-solid) !important;
  border-color: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
}

/* --- Seuraava askel -kortti (next-action-card) ja yleiskuvan päätoiminto --- */
html:root body.ui-v2.page-admin .next-action-card { border-top: 4px solid var(--ui-turf) !important; }
html:root body.ui-v2.page-admin .next-action-card::before { content: none !important; }
html:root body.ui-v2.page-admin .next-action-content::before {
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
html:root body.ui-v2.page-admin .next-action-title { font-family: var(--ui-display) !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .next-action-desc { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin .overview-primary-action { border-top: 4px solid var(--ui-turf) !important; }
html:root body.ui-v2.page-admin .overview-primary-action.is-critical { border-top-color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-admin .overview-primary-action.is-warning { border-top-color: var(--ui-warn-fg) !important; }
html:root body.ui-v2.page-admin .overview-primary-action.is-ready { border-top-color: var(--ui-ok-fg) !important; }
html:root body.ui-v2.page-admin .overview-primary-eyebrow { color: var(--ui-mut) !important; font-family: var(--ui-text) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }
html:root body.ui-v2.page-admin .overview-primary-title { font-family: var(--ui-display) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: uppercase; color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .overview-primary-reason { color: var(--ui-mut) !important; }

/* --- Aktivointi-, huomio- ja tilabannerit --- */
html:root body.ui-v2.page-admin .activation-banner {
  background: var(--ui-bg) !important;
  border: 0 !important;
  border-left: 4px solid var(--ui-turf) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .activation-banner.is-trial { background: var(--ui-warn-bg) !important; border-left-color: var(--ui-warn-fg) !important; }
html:root body.ui-v2.page-admin .activation-banner .activation-badge {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .card.stale-open-notice {
  background: var(--ui-err-bg) !important;
  border-left: 4px solid var(--ui-err-fg) !important;
  color: var(--ui-err-fg) !important;
}

/* --- Taulukot: hiusviivat, ei raidoitusta, otsikkorivi mut-värillä 12 px.
   Ei kosketa .grid-table:tä (otteluruudukko, oma lohko lopussa). --- */
html:root body.ui-v2.page-admin .site-main :is(table, .admin-table):not(.grid-table) {
  background: none !important;
  font-family: var(--ui-text);
  font-size: 14px;
}
html:root body.ui-v2.page-admin .site-main :is(table, .admin-table):not(.grid-table) :is(thead, tbody, tr) {
  background: none !important;
}
html:root body.ui-v2.page-admin .site-main :is(table, .admin-table):not(.grid-table) th {
  color: var(--ui-mut) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-bottom: 1px solid var(--ui-line) !important;
}
html:root body.ui-v2.page-admin .site-main :is(table, .admin-table):not(.grid-table) td {
  border-bottom: 1px solid var(--ui-line) !important;
  color: var(--ui-fg);
}
html:root body.ui-v2.page-admin .site-main :is(table, .admin-table):not(.grid-table) tbody tr:last-child td { border-bottom: 0 !important; }
html:root body.ui-v2.page-admin .site-main :is(table, .admin-table):not(.grid-table) tbody tr:hover { background: var(--ui-hover); }

/* --- Lomakkeet: hiusviivareunat, suorat kulmat, nimiö tavallisella
   kirjasimella 13 px 600 (custom.css tekee labeleista isoja versaaleja). --- */
html:root body.ui-v2.page-admin .site-main :is(input, select, textarea) {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-weight: 500 !important;
  min-height: 44px;
}
html:root body.ui-v2.page-admin .site-main textarea { min-height: 96px; }
html:root body.ui-v2.page-admin .site-main :is(input, select, textarea):hover { border-color: var(--ui-control) !important; }
html:root body.ui-v2.page-admin .site-main :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--ui-fg) !important;
  outline-offset: 1px !important;
  border-color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .site-main input[type="checkbox"],
html:root body.ui-v2.page-admin .site-main input[type="radio"] { min-height: 0; }
html:root body.ui-v2.page-admin .site-main label {
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html:root body.ui-v2.page-admin .site-main :is(.checkbox-line, .checkbox-row) label,
html:root body.ui-v2.page-admin .site-main label.checkbox-line-plain,
html:root body.ui-v2.page-admin .site-main label.ct-option {
  color: var(--ui-fg) !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* --- Merkit: status-pillit semanttisilla tokeneilla, nav-badge ja
   "…-chip"-loppuiset sirut. .pill::before (custom.css) säilyttää pisteen. --- */
html:root body.ui-v2.page-admin .pill:is(
  .status-open, .status-confirmed, .status-paid, .status-live,
  .kanslia-ok, .kanslia-arrived
) { background: var(--ui-ok-bg) !important; color: var(--ui-ok-fg) !important; border-color: var(--ui-ok-line) !important; }
html:root body.ui-v2.page-admin .pill:is(
  .status-pending, .status-sent, .status-draft, .status-unpaid,
  .kanslia-late-risk
) { background: var(--ui-warn-bg) !important; color: var(--ui-warn-fg) !important; border-color: var(--ui-warn-line) !important; }
html:root body.ui-v2.page-admin .pill:is(
  .status-rejected, .status-overdue, .status-cancelled, .status-failed,
  .kanslia-no-show
) { background: var(--ui-err-bg) !important; color: var(--ui-err-fg) !important; border-color: var(--ui-err-line) !important; }
html:root body.ui-v2.page-admin .pill:is(.status-closed, .status-finished, .status-waitlist, .status-ambiguous) {
  background: var(--ui-panel) !important;
  color: var(--ui-fg) !important;
  border-color: var(--ui-line) !important;
}
html:root body.ui-v2.page-admin .pill.is-active { background: var(--ui-turf) !important; color: var(--ui-on-turf) !important; border-color: var(--ui-turf) !important; }
html:root body.ui-v2.page-admin .nav-badge {
  border-radius: 0 !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html:root body.ui-v2.page-admin .nav-badge.is-critical { background: var(--ui-err-fg) !important; color: var(--ui-err-bg) !important; }
html:root body.ui-v2.page-admin .nav-badge.is-warning { background: var(--ui-warn-fg) !important; color: var(--ui-warn-bg) !important; }
html:root body.ui-v2.page-admin .nav-badge.is-info { background: var(--ui-solid) !important; color: var(--ui-on-solid) !important; }
html:root body.ui-v2.page-admin [class*="-chip"] {
  border-radius: 0 !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
html:root body.ui-v2.page-admin :is(.club-chip, .billing-chip, .kanslia-chip):not([class*="is-"]) {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .change-chip { background: var(--ui-bg) !important; border: 1px solid var(--ui-line) !important; color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin .change-chip.change-chip-major { background: var(--ui-warn-bg) !important; border-color: var(--ui-warn-line) !important; color: var(--ui-warn-fg) !important; }
html:root body.ui-v2.page-admin :is(.kanslia-chip.is-warning, .billing-chip.is-active) { background: var(--ui-warn-bg) !important; border-color: var(--ui-warn-line) !important; color: var(--ui-warn-fg) !important; }

/* --- Haitarit: details/summary (.plan-accordion, .content-section) --- */
html:root body.ui-v2.page-admin .plan-accordion {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-admin .plan-accordion > summary {
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-weight: 700 !important;
}
html:root body.ui-v2.page-admin .plan-accordion > summary::after {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-bg) !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .plan-accordion[open] > summary::after {
  background: var(--ui-solid) !important;
  border-color: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
}
html:root body.ui-v2.page-admin .plan-accordion > summary:hover,
html:root body.ui-v2.page-admin .plan-accordion > summary:focus-visible { background: var(--ui-hover) !important; }
html:root body.ui-v2.page-admin .plan-accordion[open] > summary { background: none !important; border-bottom: 1px solid var(--ui-line) !important; }
html:root body.ui-v2.page-admin .plan-accordion.plan-auto { border-color: var(--ui-line) !important; border-left: 4px solid var(--ui-turf) !important; }
html:root body.ui-v2.page-admin .plan-accordion.plan-auto > summary { color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .plan-accordion.plan-auto[open] { box-shadow: none !important; }
html:root body.ui-v2.page-admin .content-section {
  border-color: var(--ui-line) !important;
}
html:root body.ui-v2.page-admin .content-section > .content-section-summary {
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-weight: 700 !important;
}
html:root body.ui-v2.page-admin .content-section-count { background: var(--ui-bg) !important; color: var(--ui-mut) !important; border-radius: 0 !important; }

/* --- Tyhjät tilat, toimintopainikkeet (hero-btn, qr-action, cu-copy,
   danger), tapahtumavirta --- */
html:root body.ui-v2.page-admin .empty-state { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin .empty-state::before { background: var(--ui-turf) !important; }
html:root body.ui-v2.page-admin .empty-state-title { color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .site-main a.hero-btn:not(.ghost) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px 9px !important;
  background: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
}
html:root body.ui-v2.page-admin .site-main a.hero-btn:not(.ghost):hover { background: var(--ui-solid-hover) !important; }
html:root body.ui-v2.page-admin .site-main a.hero-btn.ghost {
  background: transparent !important;
  color: var(--ui-fg) !important;
  border: 1px solid var(--ui-control) !important;
  border-radius: 2px !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html:root body.ui-v2.page-admin .site-main :is(button.danger, .btn.danger, a.danger) {
  background: var(--ui-panel) !important;
  color: var(--ui-err-fg) !important;
  border: 1px solid var(--ui-err-line) !important;
  border-radius: 2px !important;
}
html:root body.ui-v2.page-admin .site-main :is(button.danger, .btn.danger, a.danger):hover { background: var(--ui-err-bg) !important; }
html:root body.ui-v2.page-admin .site-main .qr-action,
html:root body.ui-v2.page-admin .site-main .cu-copy {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-control) !important;
  border-radius: 2px !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
}
html:root body.ui-v2.page-admin .site-main .qr-action:hover,
html:root body.ui-v2.page-admin .site-main .cu-copy:hover { background: var(--ui-hover) !important; border-color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .site-main .cu-copy.is-copied { border-color: var(--ui-ok-fg) !important; color: var(--ui-ok-fg) !important; }
html:root body.ui-v2.page-admin .site-main .cu-text {
  background: var(--ui-bg) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .site-main summary.mut { background: none !important; }
html:root body.ui-v2.page-admin .activity-dot { background: var(--ui-control) !important; }
html:root body.ui-v2.page-admin .activity-item.is-result .activity-dot { background: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .activity-item.is-invoice .activity-dot { background: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-admin .activity-text { color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .activity-time { color: var(--ui-mut) !important; }

/* ---------------------------------------------------------------------------
   SIVU: Otteluohjelma (page-plan) — konfliktikortit, ajolaatu, tilarivi
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-plan .conflict-stat {
  border-radius: 0 !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
}
html:root body.ui-v2.page-plan .conflict-stat.severity-critical { background: var(--ui-err-bg) !important; color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-plan .conflict-stat.severity-warning { background: var(--ui-warn-bg) !important; color: var(--ui-warn-fg) !important; }
html:root body.ui-v2.page-plan .conflict-stat.severity-info { background: var(--ui-bg) !important; color: var(--ui-mut) !important; }
html:root body.ui-v2.page-plan .conflict-readiness .is-ok { color: var(--ui-ok-fg) !important; }
html:root body.ui-v2.page-plan .conflict-readiness .is-blocked { color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-plan .conflict-card {
  border: 1px solid var(--ui-line) !important;
  border-left: 4px solid var(--ui-control) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
}
html:root body.ui-v2.page-plan .conflict-card.severity-critical { border-left-color: var(--ui-err-fg) !important; background: var(--ui-err-bg) !important; }
html:root body.ui-v2.page-plan .conflict-card.severity-warning { border-left-color: var(--ui-warn-fg) !important; background: var(--ui-warn-bg) !important; }
html:root body.ui-v2.page-plan .conflict-card.severity-info { border-left-color: var(--ui-control) !important; }
html:root body.ui-v2.page-plan .conflict-severity { color: inherit !important; font-size: 12px !important; font-weight: 700 !important; }
html:root body.ui-v2.page-plan .conflict-title { color: var(--ui-fg) !important; }
html:root body.ui-v2.page-plan :is(.conflict-meta, .conflict-suggestion) { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-plan .schedule-quality-score-pill {
  background: var(--ui-bg) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-plan .schedule-quality-item.is-warning { background: var(--ui-warn-bg) !important; border-color: var(--ui-warn-line) !important; }
html:root body.ui-v2.page-plan .plan-status-chip {
  border-radius: 0 !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
}
html:root body.ui-v2.page-plan .plan-status-chip.is-done,
html:root body.ui-v2.page-plan .plan-status-chip.is-ready,
html:root body.ui-v2.page-plan .plan-status-chip.is-ok { background: var(--ui-ok-bg) !important; color: var(--ui-ok-fg) !important; border-color: var(--ui-ok-line) !important; }
html:root body.ui-v2.page-plan .plan-status-strip.is-alert { background: var(--ui-warn-bg) !important; border-color: var(--ui-warn-line) !important; color: var(--ui-warn-fg) !important; }
html:root body.ui-v2.page-plan .match-lock-toggle { border-radius: 0 !important; }
html:root body.ui-v2.page-plan .plan-grid-link-cta {
  background: var(--ui-solid) !important;
  border-color: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
  border-radius: 0 !important;
}
html:root body.ui-v2.page-plan .manual-scheduler-mode-option {
  background: var(--ui-bg) !important;
  border: 1px solid var(--ui-line) !important;
}
html:root body.ui-v2.page-plan table.admin-table,
html:root body.ui-v2.page-plan .match-row { border-color: var(--ui-line) !important; }

/* ---------------------------------------------------------------------------
   SIVU: Otteluruudukko (page-tournament-grid) — täysnäyttö, kehys piilossa.
   VAIN otsikkorivi + napit + hiusviivavärit. Ei kosketa grid-cell/grid-slot
   -taulukon mittoihin tai asetteluun.
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-tournament-grid { background: var(--ui-bg) !important; }
html:root body.ui-v2.page-tournament-grid .grid-page-header { border-bottom: 1px solid var(--ui-line) !important; }
html:root body.ui-v2.page-tournament-grid .grid-page-title { font-family: var(--ui-display) !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--ui-fg) !important; }
html:root body.ui-v2.page-tournament-grid .grid-page-subtitle,
html:root body.ui-v2.page-tournament-grid .grid-page-stats { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-tournament-grid .grid-page-back { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-tournament-grid select { border: 1px solid var(--ui-line) !important; border-radius: 0 !important; }
html:root body.ui-v2.page-tournament-grid .grid-print-button,
html:root body.ui-v2.page-tournament-grid .ghost {
  border: 1px solid var(--ui-control) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-tournament-grid .grid-drag-hint { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-tournament-grid .grid-table-wrap,
html:root body.ui-v2.page-tournament-grid .grid-table { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-tournament-grid :is(.grid-time-col, .grid-venue-col, .grid-row-hour) { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-tournament-grid :is(.grid-time-col, .grid-venue-link) { font-size: 12px !important; }
html:root body.ui-v2.page-tournament-grid .grid-focus-bar { background: var(--ui-bg) !important; border-color: var(--ui-line) !important; color: var(--ui-fg) !important; }

/* ---------------------------------------------------------------------------
   SIVU: Sarjat (/s/<id>) — ei omaa page-*-luokkaa, mutta series_*-luokat
   ovat ainutlaatuisia eivätkä esiinny muilla kaista B:n sivuilla.
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-admin :is(.series-mini-nav-link, .series-switcher-nav-link) {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
}
html:root body.ui-v2.page-admin :is(.series-mini-nav-link, .series-switcher-nav-link):hover { border-color: var(--ui-control) !important; color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .series-mini-nav { background: var(--ui-panel) !important; border-bottom-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .series-switcher {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
}
html:root body.ui-v2.page-admin .series-switcher-current { color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .series-switcher-list a:hover { background: var(--ui-hover) !important; }
html:root body.ui-v2.page-admin .series-card-label { color: var(--ui-mut) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; }
html:root body.ui-v2.page-admin .team-crest { border-radius: 0 !important; }

/* ---------------------------------------------------------------------------
   SIVU: Asetukset (/t/<id>/settings) — osioiden pillinavi + kortit
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-admin .settings-index { background: none !important; }
html:root body.ui-v2.page-admin .settings-index-title { font-size: 12px !important; }
html:root body.ui-v2.page-admin .settings-index-links a {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .settings-index-links a:hover { background: var(--ui-hover) !important; }
html:root body.ui-v2.page-admin .settings-section-nav {
  background: var(--ui-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
html:root body.ui-v2.page-admin .settings-section-nav a {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-mut) !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
}
html:root body.ui-v2.page-admin .settings-section-nav a:hover { color: var(--ui-fg) !important; border-color: var(--ui-control) !important; }
html:root body.ui-v2.page-admin .settings-section-nav a.is-active {
  background: var(--ui-solid) !important;
  border-color: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
}
html:root body.ui-v2.page-admin .settings-section-nav a.settings-nav-danger { color: var(--ui-err-fg) !important; border-color: var(--ui-err-line) !important; }
html:root body.ui-v2.page-admin .settings-section-title {
  background: var(--ui-bg) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-weight: 700 !important;
}
html:root body.ui-v2.page-admin .settings-index-target { color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin :is(.publish-item, .settings-radio-option, .ct-option) {
  background: none !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   SIVU: Laskutus (/t/<id>/invoices) — tilastokortit, sirurivi, ct-table
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-admin .billing-chip {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .billing-chip.is-active {
  background: var(--ui-solid) !important;
  border-color: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
}
html:root body.ui-v2.page-admin .bc-count { color: inherit !important; }
html:root body.ui-v2.page-admin table.ct-table th {
  background: none !important;
  color: var(--ui-mut) !important;
  border-bottom: 1px solid var(--ui-line) !important;
}
html:root body.ui-v2.page-admin table.ct-table td { border-bottom: 1px solid var(--ui-line) !important; }
html:root body.ui-v2.page-admin table.ct-table tbody tr:hover { background: var(--ui-hover) !important; }
html:root body.ui-v2.page-admin table.ct-table :is(input:not([type="checkbox"]), select, textarea) {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   SIVU: Viestit (/t/<id>/messages) — massaviestin lomake
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-admin .mass-msg-compose,
html:root body.ui-v2.page-admin .mass-msg-history { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .mass-msg-radio { accent-color: var(--ui-fg); }

/* ---------------------------------------------------------------------------
   SIVU: Kentät (/t/<id>/venues) — aikataulupoiminta + kenttätaulukko
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-admin .tv-pick-card,
html:root body.ui-v2.page-admin .ftp-card { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .tv-pick-row.is-selected { background: var(--ui-hover) !important; }
html:root body.ui-v2.page-admin .tv-pick-status {
  background: var(--ui-bg) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2.page-admin .tv-pick-status.is-ready { background: var(--ui-ok-bg) !important; border-color: var(--ui-ok-line) !important; color: var(--ui-ok-fg) !important; }
html:root body.ui-v2.page-admin table.ftp-table th { background: none !important; border-bottom: 1px solid var(--ui-line) !important; color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin table.ftp-table td { border-bottom: 1px solid var(--ui-line) !important; }
html:root body.ui-v2.page-admin .venue-bulk-bar {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   MUUT KAISTA B:N SIVUT (roolit, tuomarit, talkoot, tapaukset, muutosloki,
   pelikiellot, live-seuranta, kanslia, seura) — jaetut säännöt yllä kattavat
   suurimman osan (kortit, taulukot, lomakkeet, merkit, sivunavi, haitarit).
   Loput ovat pieniä täydennyksiä joissa vanha vihreä/sininen sävy jäisi
   muuten näkyviin.
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-admin .role-card { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .role-section-title { color: var(--ui-mut) !important; font-family: var(--ui-text) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px !important; }
html:root body.ui-v2.page-admin .ref-board-table,
html:root body.ui-v2.page-admin .ref-mobile-card { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .ref-conflict { color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-admin .ref-stat { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .rs-value { font-family: var(--ui-display) !important; color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .rs-label { color: var(--ui-mut) !important; font-size: 12px !important; }
html:root body.ui-v2.page-admin .staff-shift-row { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .staff-peak-bar { background: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .staff-peak-bar > * { background: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .incident-field { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .incident-submit-button { background: var(--ui-solid) !important; color: var(--ui-on-solid) !important; border-radius: 0 !important; }
html:root body.ui-v2.page-admin .change-row { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .change-entity { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin .change-time { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin .blackout-inline-form,
html:root body.ui-v2.page-admin .bo-add { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin :is(.budget-table, .blackout-table) th { background: none !important; border-bottom: 1px solid var(--ui-line) !important; color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin :is(.budget-table, .blackout-table) td { border-bottom: 1px solid var(--ui-line) !important; }
html:root body.ui-v2.page-admin .ops-quick-btn {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin .ops-quick-btn:hover { border-color: var(--ui-control) !important; background: var(--ui-hover) !important; }
html:root body.ui-v2.page-admin .live-venue-row.is-free { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin .live-venue-progress { background: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .live-progress-label { font-size: 12px !important; }
html:root body.ui-v2.page-admin .live-progress::-webkit-progress-value { background: var(--ui-turf) !important; }
html:root body.ui-v2.page-admin .live-progress::-moz-progress-bar { background: var(--ui-turf) !important; }
html:root body.ui-v2.page-admin .kanslia-summary { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .kanslia-mobile-card { border: 1px solid var(--ui-line) !important; border-radius: 0 !important; }
html:root body.ui-v2.page-admin .kanslia-print-box { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .results-code-card { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin .results-code-status {
  background: var(--ui-bg) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2.page-admin .results-code-status.is-ready { background: var(--ui-ok-bg) !important; border-color: var(--ui-ok-line) !important; color: var(--ui-ok-fg) !important; }
html:root body.ui-v2.page-admin .org-workbench-card,
html:root body.ui-v2.page-admin .org-dir-item,
html:root body.ui-v2.page-admin .org-section-directory {
  background: var(--ui-panel) !important;
  border-color: var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-admin .org-dir-item:hover { background: var(--ui-hover) !important; }
html:root body.ui-v2.page-admin .org-dir-arrow { color: var(--ui-mut) !important; }
html:root body.ui-v2.page-admin .org-workbench-cta { color: var(--ui-fg) !important; }
html:root body.ui-v2.page-admin .notif-log { border-color: var(--ui-line) !important; }
html:root body.ui-v2.page-admin #perustiedot .settings-submit-row {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- kaista B loppu --- */

/* ===========================================================================
   KAISTA C — MUUT SIVUT (kirjautuminen, oma tili, velho, kalenteri,
   info- ja virhesivut). Omat säännöt VAIN tänne.

   /kalenteri (page-calendar), /ukk (page-faq) ja /privacy (page-legal) ovat
   JO Tactical Precision -ilmeessä (app.css, --tpx-*-tokenit, 12.-15.9.) —
   EI siirretty ui-v2:een, ei omia sääntöjä tänne.
   ======================================================================== */

/* Lomakekentät: kirjautuminen, oma tili, velho, palaute. PERUSOSAT ei sisällä
   input/select/textarea-perustyylejä (tuomarin näkymässä ei ole lomakkeita) —
   nämä neljä sivua tarvitsevat omansa. Hiusviivareuna, suorat kulmat,
   min-height 44 px, 16 px fonttikoko puhelimessa (sääntö 7). Checkbox/radio
   jätetään ulos — ne eivät saa levetä koko riviksi. */
html:root body.ui-v2.page-auth :is(input:not([type="checkbox"]):not([type="radio"]), select),
html:root body.ui-v2.page-account :is(input:not([type="checkbox"]):not([type="radio"]), select),
html:root body.ui-v2.page-wizard :is(input:not([type="checkbox"]):not([type="radio"]), select),
html:root body.ui-v2.page-feedback :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: 44px;
  padding: 10px 12px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
html:root body.ui-v2.page-auth textarea,
html:root body.ui-v2.page-account textarea,
html:root body.ui-v2.page-wizard textarea,
html:root body.ui-v2.page-feedback textarea {
  padding: 10px 12px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
/* app.css:n vanha sininen fokusrengas (page-auth/page-wizard) pois — PERUSOSAT
   antaa jo tumman fokusreunuksen :focus-visible:lle. */
html:root body.ui-v2.page-auth :is(input, select, textarea):focus,
html:root body.ui-v2.page-account :is(input, select, textarea):focus,
html:root body.ui-v2.page-wizard :is(input, select, textarea):focus,
html:root body.ui-v2.page-feedback :is(input, select, textarea):focus {
  outline: none;
  box-shadow: none !important;
  border-color: var(--ui-fg) !important;
}
/* Oma tili: sähköposti on aina readonly (kirjautumistunnus). */
html:root body.ui-v2.page-account input[readonly] {
  background: var(--ui-bg) !important;
  color: var(--ui-mut) !important;
}
/* Nimiöt tavalliseksi: custom.css tekee labeleista isoja lihavia versaaleja
   (sääntö 7) — ohitetaan. .checkbox-line (valintaruutu + teksti) jätetään
   rauhaan, sillä on oma asettelunsa eikä se ole tekstikentän nimiö. */
html:root body.ui-v2.page-auth label:not(.checkbox-line),
html:root body.ui-v2.page-account label:not(.checkbox-line),
html:root body.ui-v2.page-wizard label:not(.checkbox-line),
html:root body.ui-v2.page-feedback label:not(.checkbox-line) {
  font-family: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ui-fg) !important;
}
/* Murupolku (oma tili, palaute): pois custom.css:n isosta versaalikirjaimesta. */
html:root body.ui-v2.page-account .crumbs,
html:root body.ui-v2.page-feedback .crumbs {
  font-family: var(--ui-text) !important;
  color: var(--ui-mut) !important;
  font-weight: 600 !important;
}
html:root body.ui-v2.page-account .crumbs a,
html:root body.ui-v2.page-feedback .crumbs a {
  color: var(--ui-fg) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   SIVUOSIO: page-auth (kirjautuminen /login, salasanan palautus /forgot+/reset)
   ------------------------------------------------------------------------ */
/* "Varaa käyttöönotto" (a.btn-secondary) ei osu PERUSOSATin ghost-listaan
   (se tunnistaa vain a.ghost:n) — sama resepti omalla spesifisyydellä. */
html:root body.ui-v2.page-auth .site-main a.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
  border: 1px solid var(--ui-control) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  clip-path: none !important;
}
html:root body.ui-v2.page-auth .site-main a.btn-secondary:hover {
  background: var(--ui-hover) !important;
}

/* ---------------------------------------------------------------------------
   SIVUOSIO: page-account (/tili)
   ------------------------------------------------------------------------ */
/* Ei omia lisäsääntöjä: kortit (PERUSOSAT .card), otsikot (h1/h2) ja napit
   (plain <button>) tulevat jo PERUSOSATista. Lomakekentät ja nimiöt yllä. */

/* ---------------------------------------------------------------------------
   SIVUOSIO: page-wizard (/turnaus/uusi, uuden turnauksen velho)
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-wizard fieldset.fieldset {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html:root body.ui-v2.page-wizard legend {
  font-family: var(--ui-text) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--ui-mut) !important;
}
/* .btn-secondary (edellinen/tallenna-ja-jatka, myös <a>-muotoinen "Edellinen")
   ei osu PERUSOSATin listaan, mutta plain <button class="btn-secondary">
   OSUU sen pääpainike-sääntöön (button:not(.ghost):not(.linklike):not(.danger)
   — btn-secondary ei ole yksikään noista). Se sääntö painaa kolmella
   :not()-luokalla (spesifisyys 0,6,3), joten pelkkä sivuluokka (0,5,3) ei
   riitä voittamaan. :not(.ghost):not(.linklike):not(.danger) tässäkin
   (btn-secondary-elementeillä ei koskaan ole näitä luokkia) nostaa
   spesifisyyden yli (0,8,3) — sama resepti kuin page-auth yllä. */
html:root body.ui-v2.page-wizard .site-main :is(
  a.btn-secondary:not(.ghost):not(.linklike):not(.danger),
  button.btn-secondary:not(.ghost):not(.linklike):not(.danger)
) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
  border: 1px solid var(--ui-control) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  clip-path: none !important;
}
html:root body.ui-v2.page-wizard .site-main :is(
  a.btn-secondary:not(.ghost):not(.linklike):not(.danger),
  button.btn-secondary:not(.ghost):not(.linklike):not(.danger)
):hover {
  background: var(--ui-hover) !important;
}
/* Peruuta turnauksen teko: tuhoava toiminto, virheväri erottaa muista.
   Sama spesifisyysongelma ja -ratkaisu kuin yllä. */
html:root body.ui-v2.page-wizard .site-main button.wizard-cancel-btn:not(.ghost):not(.linklike):not(.danger) {
  color: var(--ui-err-fg) !important;
  border-color: var(--ui-err-line) !important;
}
/* Vaihemittari (1-6): hiusviivalaatikko, aktiivi tumma, tehty turf. */
html:root body.ui-v2.page-wizard .wp-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--ui-panel);
  color: var(--ui-mut);
  font-family: var(--ui-text);
  font-weight: 700;
  font-size: 13px;
}
html:root body.ui-v2.page-wizard .wp-step.current {
  background: var(--ui-solid) !important;
  border-color: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
}
html:root body.ui-v2.page-wizard .wp-step.done {
  background: var(--ui-turf) !important;
  border-color: var(--ui-turf) !important;
  color: var(--ui-on-turf) !important;
}
/* Kapasiteettivaroitukset + joukkuemäärälaskurin tulos: vain kulmat suoriksi,
   värit tulevat jo --warning/--danger-tokeneista (toimivat tummassa). */
html:root body.ui-v2.page-wizard :is(.wizard-capacity-gap, .wizard-fix-list, .wizard-teamcalc-result) {
  border-radius: 0 !important;
}
html:root body.ui-v2.page-wizard .wizard-teamcalc > summary {
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
}

/* ---------------------------------------------------------------------------
   SIVUOSIO: page-feedback (/feedback)
   ------------------------------------------------------------------------ */
/* Ei omia lisäsääntöjä: kortti, otsikot, .err/.ok ja lähetä-nappi (plain
   <button>) tulevat PERUSOSATista; lomakekentät ja nimiöt yllä. */

/* ---------------------------------------------------------------------------
   SIVUOSIO: page-error (404/validointi/oikeus-virhesivu, html.ts errorPage)
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-error .error-page {
  background: var(--ui-panel) !important;
  background-image: none !important;
  border: 1px solid var(--ui-line) !important;
  border-top: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-error .error-page-help {
  color: var(--ui-mut) !important;
  font-weight: 500 !important;
}
html:root body.ui-v2.page-error .error-page-detail {
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-panel) !important;
}
html:root body.ui-v2.page-error .error-page-detail > summary {
  background: var(--ui-panel) !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
}
/* "Takaisin" (a.hero-btn ilman .ghost) ei osu PERUSOSATin listaan — sama
   pääpainike-resepti kuin PERUSOSAT, omalla spesifisyydellä. "Etusivulle" ja
   "Ilmoita ongelmasta" kantavat .ghost:ia ja saavat PERUSOSATin toissijaisen
   napin automaattisesti (a.ghost on jo sen listalla). */
html:root body.ui-v2.page-error .site-main a.hero-btn:not(.ghost) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px 9px !important;
  background: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  clip-path: polygon(
    var(--ui-notch) 0, calc(100% - var(--ui-notch)) 0, 100% var(--ui-notch),
    100% calc(100% - var(--ui-notch)), calc(100% - var(--ui-notch)) 100%,
    var(--ui-notch) 100%, 0 calc(100% - var(--ui-notch)), 0 var(--ui-notch)
  );
}
html:root body.ui-v2.page-error .site-main a.hero-btn:not(.ghost):hover {
  background: var(--ui-solid-hover) !important;
}

/* --- kaista C loppu --- */

/* ===========================================================================
   KAISTA D — JULKISET ALASIVUT + TUOMARIN LIVE-KIRJAUSSIVU. Omat säännöt
   VAIN tänne.

   JULKISET SIVUT (page-public-tournament: turnaussivun välilehdet, sarja-,
   ottelu-, joukkue-, kenttä- ja ilmoittautumissivu, tähtihetket, palaute-
   kysely; page-public: seuran julkinen sivu + palkintojenjako) ovat SEURAN
   oma sivu. Siksi tämä osio EI koske:
   - otsikkolohkoa (.public-hero): seuran väri, banneri ja valkoinen teksti
     värillisellä pohjalla tulevat chrome.css:stä / app.css:stä sellaisenaan
   - seuran aksenttia: pääpainike, aktiivinen välilehti ja linkit käyttävät
     var(--accent) / var(--accent-ink) (branding.ts), EI --ui-solid-mustaa
   Uusi ilme näkyy tässä: litteät hiusviivapinnat (ei pyöristystä, varjoa
   eikä kermanväristä liukua), Saira-otsikot, leikatut kulmat painikkeissa,
   kentät kuten muilla ui-v2-sivuilla ja vähintään 12 px teksti.
   ======================================================================== */

/* Seuran tunnusnauha: oma beige pohja pois, sivun pohja näkyy. */
html:root body.ui-v2:is(.page-public-tournament, .page-public) :is(.public-brand, .public-brand-club) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* chrome.css antaa oletusilmeen nauhalle app.css:n kermanvärisen --bg-pohjan
   (6 luokan spesifisyys) — uusi sivupohja on --ui-bg, joten nauha läpinäkyväksi. */
html:root body.ui-v2[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-club[data-default-background] {
  /* Peittävä sivupohjan väri, EI läpinäkyvä: e2e/public-brand-background mittaa
     tekstin kontrastin nauhan omaa taustaväriä vasten. */
  background: var(--ui-bg) !important;
}

/* Oletusilmeen otsikko (seura ei ole valinnut väriä): chrome.css antoi
   Archivo-lihavan; uusi ilme käyttää Sairaa kuten kaikki muutkin otsikot.
   Värillinen otsikkolohko (seuran väri/banneri) jää ennalleen. */
html:root body.ui-v2[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero h1 {
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: clamp(2.5rem, 6vw, 3.8rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.005em !important;
  text-transform: uppercase;
  max-width: none;
}
html:root body.ui-v2[class*="page-public-"] .public-hero h1 { text-transform: uppercase; }

/* Litteät pinnat: pyöreät kulmat, varjo ja kermanvärinen liuku pois. Reunaviivat
   ja seuran aksenttireunat (ylä-/vasen reuna) jäävät vanhoista säännöistä. */
html:root body.ui-v2:is(.page-public-tournament, .page-public) :is(
  .pub-live-now, .public-day-program, .public-series-hero, .public-series-all-matches,
  .public-series-scorers, .public-series-utility, .public-team-next-match, .pub-match-head,
  .register-hero, .register-form, .register-summary, .register-status, .register-discount-field,
  .info-card, .venue-card, .series-list-compact, .series-row, .goal-feed-card,
  .public-after-register-step, .public-team-rank-row, .public-team-scorer-row,
  .register-series-option, .reg-team-card-link, .tp-mlist, .standings-table,
  .series-ranking-note, .pub-match-focus-card, .public-rules, .rules-body,
  details.public-series-all-matches, details.public-series-scorers
) {
  background-color: var(--ui-panel) !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2:is(.page-public-tournament, .page-public) :is(.par-step-n, .series-ranking-note, .public-team-next-detail) {
  border-radius: 0 !important;
}
/* Pinnat joiden oma tausta on tilaväri (tilarivi, sarja-alue) pidetään ennallaan. */
html:root body.ui-v2:is(.page-public-tournament, .page-public) .pub-live-now { border-color: var(--ui-line) !important; }

/* Linkit: seuran aksentti sekoitettuna tekstiväriin (kontrasti), ei musta. */
html:root body.ui-v2:is(.page-public-tournament, .page-public) .public-subpage-tournament a {
  color: color-mix(in srgb, var(--accent, var(--ui-fg)) 78%, var(--ui-fg)) !important;
  font-weight: 700;
}

/* Pääpainikkeet = seuran aksentti (leikatut kulmat kuten muualla). */
html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main :is(
  button:not(.ghost):not(.linklike):not(.danger):not(.auto-refresh-toggle):not(.density-btn),
  a.button, .btn:not(.ghost)
) {
  background: var(--accent, var(--ui-solid)) !important;
  color: var(--accent-ink, var(--ui-on-solid)) !important;
}
html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main :is(
  button:not(.ghost):not(.linklike):not(.danger):not(.auto-refresh-toggle):not(.density-btn),
  a.button, .btn:not(.ghost)
):hover {
  background: color-mix(in srgb, var(--accent, var(--ui-solid)) 88%, var(--ui-fg)) !important;
}
/* Ilmoittaudu-painike: seuran väri säilyy (app.css/chrome.css), muoto uuteen. */
html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main a.public-cta-register {
  min-height: 48px;
  padding: 12px 20px 11px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  clip-path: polygon(
    var(--ui-notch) 0, calc(100% - var(--ui-notch)) 0, 100% var(--ui-notch),
    100% calc(100% - var(--ui-notch)), calc(100% - var(--ui-notch)) 100%,
    var(--ui-notch) 100%, 0 calc(100% - var(--ui-notch)), 0 var(--ui-notch)
  );
}
/* Automaattipäivitys-kytkin on tekstilinkki, ei painike. */
html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main button.auto-refresh-toggle:not(.ghost):not(.linklike):not(.danger) {
  min-height: 32px;
  padding: 4px 0 !important;
  background: transparent !important;
  color: var(--ui-mut) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ui-text) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  clip-path: none !important;
}
html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main button.auto-refresh-toggle:not(.ghost):not(.linklike):not(.danger):hover { background: transparent !important; color: var(--ui-fg) !important; }
/* Toissijaiset linkkipainikkeet, joita PERUSOSAT ei tunnista. */
html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main :is(a.public-team-next-detail, a.register-rules-link) {
  border: 1px solid var(--ui-control) !important;
  border-radius: 2px !important;
  color: var(--ui-fg) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Lomakkeet (ilmoittautuminen, palautuslomakkeet, palautekysely). */
html:root body.ui-v2:is(.page-public-tournament, .page-public) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  select
) {
  min-height: 44px;
  padding: 8px 12px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
html:root body.ui-v2:is(.page-public-tournament, .page-public) textarea {
  min-height: 96px;
  padding: 8px 12px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
html:root body.ui-v2:is(.page-public-tournament, .page-public) :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--ui-fg) !important;
  box-shadow: none !important;
}
html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main label:not([class]) {
  font-family: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-fg) !important;
}

/* Otsikko-tason poikkeukset: sarjataulukon otsikko on h2-tasoa, mutta h3-tagi. */
html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main .standings-heading {
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: 1.55rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

/* Seuran julkisen sivun turnauslista: taulukon kermanvärinen pohja pois. */
html:root body.ui-v2.page-public .site-main table,
html:root body.ui-v2.page-public .site-main table :is(thead, tbody, tr, th, td) {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Tekstit vähintään 12 px (ennen 10–11,5 px: ottelunumero, tilamerkit, eyebrow). */
html:root body.ui-v2:is(.page-public-tournament, .page-public) :is(
  .tp-mrow-no, .match-changed, .public-team-next-label, .pub-eyebrow, .series-mini-title,
  .tp-mrow-badges, .mc-live-min, .rsm-fee, .rsm-capacity, .rsm-status, a.series-name-link
) {
  font-size: max(12px, 0.75rem) !important;
}
html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main table:not(.standings-table) th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-mut) !important;
}

/* Puhelin: kosketuskohteet vähintään 44 px julkisilla sivuilla (tiiviit
   rivin sisäiset nimilinkit jäävät rivin omaan korkeuteen — koko rivi on
   jo linkki) ja kehyksen käyttäjälinkki. */
@media (max-width: 768px) {
  html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main :is(
    .public-subpage-tournament a, a.public-team-next-detail, a.public-series-register-link,
    a.public-series-ical, a.venue-day-link, a.venue-schedule-link, a.feedback-link,
    a.series-deep-link, a.my-team-hint-inline, a.goal-feed-match, a.team-chip-link,
    a.register-rules-link, .public-register-frame a:not([class])
  ) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main :is(a.hero-btn, a.public-cta-register) { min-height: 48px !important; }
  html:root body.ui-v2:is(.page-public-tournament, .page-public) :is(a.feedback-link, button.auto-refresh-toggle) {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
  }
  html:root body.ui-v2:is(.page-public-tournament, .page-public) .site-main summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* "← Takaisin …" -rivit (kappaleen ainoa linkki): palautuslomakkeet ja sarjasivu. */
  html:root body.ui-v2:is(.page-public-tournament, .page-public, .page-auth) .site-main p > a:only-child:not([class]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Kehyksen käyttäjälinkki ja uloskirjautuminen (chrome.css !important). */
  html:root body.ui-v2 .site-top :is(a.ud-name, .user-dock button) {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
  }
}

/* ---------------------------------------------------------------------------
   TUOMARIN LIVE-KIRJAUSSIVU (body.page-referee.page-live, referee_live_page.ts)
   Aiemmin poissuljettu (UI_V2_EXCLUDED_CLASSES): vain osa komponenteista
   uudistui. Nyt kaikki: tulostaulu, kello, kellopainikkeet, maalinapit
   (joukkueen paitavärit säilyvät, ne ovat toiminto), tapahtumat, lopetus.
   Mitoitus puhelimelle (375 px) ensin; kaikki napit vähintään 44 px.
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-live .site-main { max-width: 980px; }
html:root body.ui-v2.page-live .crumbs {
  font-family: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2.page-live .crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ui-fg) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tulostaulu-kortti */
html:root body.ui-v2.page-live .site-main .public-hero {
  display: block !important;
  margin: 8px 0 12px !important;
  padding: 14px 16px 16px !important;
  background: var(--ui-panel) !important;
  background-image: none !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 6px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-live .site-main .public-hero:has(.live-clock[data-status="RUNNING"]) { border-left-color: var(--ui-turf) !important; }
html:root body.ui-v2.page-live.live-fulltime .site-main .public-hero,
html:root body.ui-v2.page-live.live-fulltime .site-main .public-hero:has(.live-clock[data-status]) { border-left-color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-live .ref-hero-context {
  margin: 0 0 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
html:root body.ui-v2.page-live .site-main h1.live-score {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center;
  gap: 8px 12px !important;
  width: 100%;
  max-width: none !important;
  margin: 0 0 4px !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  text-align: left;
}
html:root body.ui-v2.page-live .site-main h1.live-score :is(.live-score-home, .live-score-away) {
  display: block;
  min-width: 0;
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.3rem, 5.6vw, 2.2rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ui-fg) !important;
  overflow-wrap: anywhere;
  word-break: normal !important;
}
html:root body.ui-v2.page-live .site-main h1.live-score .live-score-home { text-align: left !important; }
html:root body.ui-v2.page-live .site-main h1.live-score .live-score-away { text-align: right !important; }
html:root body.ui-v2.page-live .ref-kit-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: 0.05em;
  border-radius: 0 !important;
}
html:root body.ui-v2.page-live .site-main h1.live-score .live-score-away .ref-kit-dot { margin: 0 0 0 0; margin-right: 6px; }
html:root body.ui-v2.page-live .site-main h1.live-score .live-score-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 14px 2px;
  background: var(--ui-solid) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-on-solid) !important;
  clip-path: polygon(
    var(--ui-notch) 0, calc(100% - var(--ui-notch)) 0, 100% var(--ui-notch),
    100% calc(100% - var(--ui-notch)), calc(100% - var(--ui-notch)) 100%,
    var(--ui-notch) 100%, 0 calc(100% - var(--ui-notch)), 0 var(--ui-notch)
  );
}
html:root body.ui-v2.page-live .site-main h1.live-score .live-score-num {
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: clamp(2.6rem, 11vw, 4.4rem) !important;
  line-height: 0.95 !important;
  color: var(--ui-on-solid) !important;
}
html:root body.ui-v2.page-live .site-main h1.live-score .live-score-sep {
  font-family: var(--ui-display) !important;
  font-size: clamp(1.6rem, 6vw, 2.6rem) !important;
  font-weight: 700 !important;
  color: var(--ui-on-solid) !important;
  opacity: 0.6;
}
html:root body.ui-v2.page-live.live-fulltime .site-main h1.live-score .live-score-result {
  background: var(--ui-err-fg) !important;
}
html:root body.ui-v2.page-live.live-fulltime .site-main h1.live-score :is(.live-score-num, .live-score-sep) { color: var(--ui-err-bg) !important; }
html:root body.ui-v2.page-live .ref-live-setdetail { margin: 0 0 6px; }

/* Pelikello */
html:root body.ui-v2.page-live .live-clock {
  margin: 4px 0 0 !important;
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: clamp(4.6rem, 25vw, 8rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-live.live-fulltime .live-clock { color: var(--ui-err-fg) !important; }
html:root body.ui-v2.page-live .public-hero > p.mut { margin: 6px 0 0; font-size: 14px !important; }

/* Kellopainikkeet: iso, yksi rivi (Käynnistä/Tauko, Nollaa kello, Päätä ottelu) */
html:root body.ui-v2.page-live .ref-clock-merged { margin-top: 12px; }
html:root body.ui-v2.page-live .ref-clock-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
html:root body.ui-v2.page-live .ref-clock-actions-row > form {
  display: flex;
  flex: 1 1 auto;
  margin: 0 !important;
}
html:root body.ui-v2.page-live .ref-clock-actions-row > form > button {
  flex: 1 1 auto;
  min-height: 52px;
  padding-inline: 16px !important;
}
html:root body.ui-v2.page-live .ref-clock-actions-row > form > button:not(.ghost):not(.danger) { font-size: 20px !important; }
html:root body.ui-v2.page-live .site-main :is(button.danger, a.danger) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px !important;
  background: var(--ui-panel) !important;
  color: var(--ui-err-fg) !important;
  border: 1px solid var(--ui-err-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--ui-text) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html:root body.ui-v2.page-live .site-main :is(button.danger, a.danger):hover { background: var(--ui-err-bg) !important; }
html:root body.ui-v2.page-live .ref-sound-prime-row { margin: 10px 0 0; }
html:root body.ui-v2.page-live .ref-sound-primed-ok { color: var(--ui-ok-fg); font-size: 13px; font-weight: 600; }
/* Saman sivun toiminto kesken (REF_LIVE_NAV_JS, katselmus 3.10.2026): fetch
   ei näytä selaimen omaa latausilmaisinta → napautettu nappi himmenee, kunnes
   uusi sisältö vaihtuu (hitaalla yhteydellä tuomari näkee napautuksen menneen). */
html:root body.ui-v2.page-live .site-main button.is-busy { opacity: 0.55 !important; cursor: progress !important; }
/* Hälytyksen rehellinen huomautus (3.10.2026): oma rivinsä "Salli äänet"
   -napin alla; kun ääni on päällä, nappi piiloutuu ja jäljelle jää tämä. */
html:root body.ui-v2.page-live .ref-sound-prime-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
html:root body.ui-v2.page-live .site-main .ref-alarm-note {
  flex: 1 0 100%;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: var(--ui-mut) !important;
}
/* Puhelimen oma ajastin -apu (Mikael 3.10.2026): vain kun kello ei käy.
   LIVE_CLOCK_JS merkitsee alustan (is-ios / is-android) ja vain sen ohje
   näkyy; ilman JS:ää molemmat. */
html:root body.ui-v2.page-live .site-main .ref-timer-help {
  flex: 1 0 100%;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2.page-live .site-main .ref-timer-help a.ref-timer-ios {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 4px 0 0;
  padding: 0 14px;
  font-weight: 600;
}
html:root body.ui-v2.page-live .site-main .ref-timer-help .ref-timer-android { color: var(--ui-fg) !important; font-weight: 600; }
html:root body.ui-v2.page-live .site-main .ref-timer-help.is-ios .ref-timer-android,
html:root body.ui-v2.page-live .site-main .ref-timer-help.is-android .ref-timer-ios { display: none !important; }
/* Täysiajan / jakson hälytys (3.10.2026): iso, pysyy ruudun yläreunassa
   (sticky, yläpalkin päällä) kunnes tuomari napauttaa sitä. */
html:root body.ui-v2.page-live .site-main #liveAlarm.live-alarm:not(.is-hidden) {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 !important;
  padding: 8px 8px 8px 14px !important;
  background: var(--ui-err-fg) !important;
  color: var(--ui-err-bg) !important;
  border: 0 !important;
  font-family: var(--ui-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}
html:root body.ui-v2.page-live .site-main #liveAlarm.live-alarm.is-period:not(.is-hidden) {
  background: var(--ui-warn-fg) !important;
  color: var(--ui-warn-bg) !important;
}
html:root body.ui-v2.page-live .site-main #liveAlarm .live-alarm-ack {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px !important;
  background: transparent !important;
  color: inherit !important;
  border: 2px solid currentColor !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--ui-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html:root body.ui-v2.page-live :is(.ref-clock-target-details, .ref-goal-details) > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 !important;
  color: var(--ui-mut);
  font-family: var(--ui-text);
  font-size: 14px !important;
  font-weight: 600;
  cursor: pointer;
}
html:root body.ui-v2.page-live :is(.ref-clock-target-details, .ref-goal-details, .ref-clock-target-details > summary, .ref-goal-details > summary) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-live .ref-clock-target-details form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
html:root body.ui-v2.page-live .ref-clock-target-details label { display: flex; align-items: center; gap: 8px; }

/* Lomakekentät ja nimiöt live-sivulla */
html:root body.ui-v2.page-live :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select
) {
  min-height: 44px;
  padding: 8px 10px !important;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-control) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
html:root body.ui-v2.page-live :is(input, select, textarea):focus { outline: none; border-color: var(--ui-fg) !important; box-shadow: none !important; }
html:root body.ui-v2.page-live .site-main label {
  font-family: var(--ui-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-mut) !important;
  margin: 0 0 4px !important;
}

/* Tuomarivastaavan kortti + pisteilmoitus */
html:root body.ui-v2.page-live .ref-contact-card {
  background: var(--ui-panel) !important;
  background-image: none !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 4px solid var(--ui-fg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-live .ref-contact-label { font-size: 12px !important; font-weight: 700 !important; color: var(--ui-mut) !important; }
html:root body.ui-v2.page-live .ref-contact-name { font-weight: 700 !important; }
html:root body.ui-v2.page-live .site-main :is(a.ref-contact-phone, a.ref-contact-email) {
  color: var(--ui-fg) !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html:root body.ui-v2.page-live .ref-score-notice {
  margin: 8px 0;
  padding: 12px 16px;
  background: var(--ui-warn-bg) !important;
  color: var(--ui-warn-fg) !important;
  border: 1px solid var(--ui-warn-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-live .ref-score-notice p { margin: 4px 0 0; }

/* Viimeisin tapahtuma + Kumoa */
html:root body.ui-v2.page-live .ref-event-feedback {
  margin: 8px 0 !important;
  padding: 10px 14px !important;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line) !important;
  border-left: 4px solid var(--ui-turf) !important;
  border-block-width: 1px;
}
html:root body.ui-v2.page-live .site-main .ref-event-feedback h2 {
  flex: 0 0 100%;
  margin: 0 !important;
  font-family: var(--ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--ui-mut) !important;
}
html:root body.ui-v2.page-live .ref-event-feedback .live-event { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* Tapahtumalista */
html:root body.ui-v2.page-live .event-log { display: grid; gap: 0; margin: 0; padding: 0; }
html:root body.ui-v2.page-live .live-event {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
}
html:root body.ui-v2.page-live .live-event :is(.le-min, .le-type, .le-team) {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-live .live-event .le-min { font-variant-numeric: tabular-nums; color: var(--ui-mut) !important; }
html:root body.ui-v2.page-live .live-event .le-team { font-weight: 500 !important; color: var(--ui-mut) !important; }
html:root body.ui-v2.page-live .live-event .le-who:not(:empty) {
  background: var(--ui-bg) !important;
  color: var(--ui-fg) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Maalit: joukkuesarakkeet. Paitavärit (--kit-*) ovat toiminto: pelaajanappi
   näyttää kumpaa joukkuetta kirjataan. Muoto uusi, väri säilyy. */
html:root body.ui-v2.page-live .ref-team-cols { gap: 12px; margin-top: 8px; }
html:root body.ui-v2.page-live .ref-team-swatch { width: 14px; height: 14px; border-radius: 0 !important; }
/* Otsikko: väripala + nimi (enintään 2 riviä), paitateksti omalla rivillään —
   molempien sarakkeiden napit alkavat samalta korkeudelta nimen pituudesta
   riippumatta (vain jos molemmilla on sama rivimäärä; muuten ero on yksi rivi). */
html:root body.ui-v2.page-live .ref-team-head {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 2px 8px;
  margin-bottom: 8px;
}
html:root body.ui-v2.page-live .ref-team-head .ref-team-swatch { margin-top: 3px; }
html:root body.ui-v2.page-live .ref-team-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
html:root body.ui-v2.page-live .ref-team-kit-label { grid-column: 2; font-size: 12px; }
html:root body.ui-v2.page-live .site-main .ref-team-col .ref-scorer-grid > button.ref-scorer-pick:not(.is-unknown):not(.is-own),
html:root body.ui-v2.page-live .site-main .ref-team-col button.ref-scorer-bigbtn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 10px !important;
  background: var(--kit-primary) !important;
  color: var(--kit-text) !important;
  border: 1px solid color-mix(in srgb, var(--kit-primary) 55%, var(--ui-line)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ui-text) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  clip-path: none !important;
}
html:root body.ui-v2.page-live .site-main .ref-team-col button.ref-scorer-bigbtn { justify-content: center; text-align: center; font-size: 16px !important; }
html:root body.ui-v2.page-live .site-main .ref-team-col-light .ref-scorer-grid > button.ref-scorer-pick:not(.is-unknown):not(.is-own),
html:root body.ui-v2.page-live .site-main .ref-team-col-light button.ref-scorer-bigbtn { border-color: var(--ui-control) !important; }
html:root body.ui-v2.page-live .site-main .ref-team-col .ref-scorer-grid > button.ref-scorer-pick:not(.is-unknown):not(.is-own):hover,
html:root body.ui-v2.page-live .site-main .ref-team-col button.ref-scorer-bigbtn:hover { filter: brightness(0.94); }
html:root body.ui-v2.page-live .ref-scorer-pick .rsp-num {
  min-width: 1.7em;
  padding: 2px 6px !important;
  border-radius: 0 !important;
  font-size: 15px;
  font-weight: 800 !important;
}
html:root body.ui-v2.page-live .ref-scorer-pick .rsp-name { font-size: 14px; font-weight: 600; }
html:root body.ui-v2.page-live .site-main .ref-team-col .ref-scorer-grid > .ref-scorer-pick:is(.is-unknown, .is-own) {
  justify-content: center;
  width: 100%;
  min-height: 44px;
  font-size: 14px !important;
}
html:root body.ui-v2.page-live .ref-scorer-help { margin-top: 10px; }

/* Kortit, merkinnät ja tapahtumahistoria: kaksi laatikkoa, ei kahta viivaa */
html:root body.ui-v2.page-live :is(details.ref-card-entry, details.ref-event-history, details.ref-corrections) {
  margin: 12px 0 !important;
  padding: 0 !important;
  background: var(--ui-panel) !important;
  background-image: none !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-live :is(details.ref-card-entry, details.ref-event-history, details.ref-corrections) > summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ui-fg) !important;
  font-family: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: none !important;
}
html:root body.ui-v2.page-live :is(details.ref-card-entry, details.ref-event-history, details.ref-corrections)[open] > summary { border-bottom: 1px solid var(--ui-line) !important; }
html:root body.ui-v2.page-live :is(details.ref-card-entry, details.ref-event-history, details.ref-corrections) > :not(summary) { margin-inline: 16px; }
html:root body.ui-v2.page-live :is(details.ref-card-entry, details.ref-event-history, details.ref-corrections) > :last-child { margin-bottom: 16px; }
html:root body.ui-v2.page-live details.ref-corrections > .card { margin-inline: 0; }
html:root body.ui-v2.page-live .ref-cards-row-label { margin: 14px 0 6px !important; font-size: 15px !important; }
html:root body.ui-v2.page-live .site-main .settings-card {
  padding: 12px !important;
  background: transparent !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-live .ref-live-event-form { gap: 8px; align-items: end; }

/* Koripallon pisteet / rangaistusajat: napit isoiksi, muoto sama */
html:root body.ui-v2.page-live .ref-points-buttons button,
html:root body.ui-v2.page-live .ref-penalty-time-buttons button { min-height: 48px; }

/* Ottelun lopetus: yhteenveto, ennenaikaisen lopetuksen kortti, rangaistuspotkut */
html:root body.ui-v2.page-live .site-main .ref-end-summary {
  background: var(--ui-panel) !important;
  background-image: none !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 6px solid var(--ui-ok-fg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body.ui-v2.page-live .ref-summary-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-ok-fg) !important;
}
html:root body.ui-v2.page-live .site-main h2.ref-summary-score {
  font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}
html:root body.ui-v2.page-live .ref-summary-stats li {
  min-height: 28px;
  padding: 2px 10px;
  background: var(--ui-bg) !important;
  color: var(--ui-fg) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: 600;
}
html:root body.ui-v2.page-live .ref-summary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html:root body.ui-v2.page-live .site-main a.ref-summary-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px 9px !important;
  background: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--ui-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  clip-path: polygon(
    var(--ui-notch) 0, calc(100% - var(--ui-notch)) 0, 100% var(--ui-notch),
    100% calc(100% - var(--ui-notch)), calc(100% - var(--ui-notch)) 100%,
    var(--ui-notch) 100%, 0 calc(100% - var(--ui-notch)), 0 var(--ui-notch)
  );
}
html:root body.ui-v2.page-live .site-main :is(a.ref-summary-corrections, a.ref-summary-home, a.ref-early-cancel) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
  border: 1px solid var(--ui-control) !important;
  border-radius: 2px !important;
  font-family: var(--ui-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
html:root body.ui-v2.page-live .ref-early-end { border-left: 6px solid var(--ui-err-fg) !important; }
html:root body.ui-v2.page-live .ref-early-end .ref-early-clock { font-size: 18px; font-weight: 700; }
html:root body.ui-v2.page-live .ref-penalty-card,
html:root body.ui-v2.page-live .ref-rules-ref { border-radius: 0 !important; }
html:root body.ui-v2.page-live .ref-summary-stats li { gap: 0.3em; }
html:root body.ui-v2.page-live .site-main :is(a.ref-contact-phone, a.ref-contact-email) { display: inline-flex; align-items: center; min-height: 44px; }

/* Tiivis näkymä 375x812 (Mikael 17.9.2026, e2e/referee-mobile-journey): kolmannen
   pelaajanapin alareunan on oltava ruudulla ILMAN vieritystä aloittamattomassa
   ja käynnissä olevassa ottelussa sekä ensimmäisen maalin jälkeen. Kapealla
   näytöllä kello ja kellopainikkeet pienemmiksi (painikkeet 44 px), tuomari-
   vastaavan kortti yhdelle riville (nimi vasemmalla, numero oikealla). */
@media (max-width: 400px) {
  html:root body.ui-v2.page-live .crumbs { margin: 0 !important; padding: 0 !important; }
  html:root body.ui-v2.page-live .site-main .public-hero { margin: 4px 0 8px !important; padding: 8px 12px 10px !important; }
  html:root body.ui-v2.page-live .ref-hero-context { margin: 0 0 4px !important; }
  html:root body.ui-v2.page-live .site-main h1.live-score { gap: 6px 8px !important; margin: 0 !important; }
  html:root body.ui-v2.page-live .site-main h1.live-score .live-score-result { padding: 4px 10px 1px; }
  html:root body.ui-v2.page-live .site-main h1.live-score .live-score-num { font-size: 2.3rem !important; }
  html:root body.ui-v2.page-live .live-clock { margin: 0 !important; font-size: clamp(3.4rem, 18vw, 4.8rem) !important; }
  html:root body.ui-v2.page-live .public-hero > p.mut { margin: 2px 0 0; }
  html:root body.ui-v2.page-live .ref-clock-merged { margin-top: 6px; }
  html:root body.ui-v2.page-live .ref-clock-actions-row { gap: 6px; flex-wrap: nowrap; }
  html:root body.ui-v2.page-live .ref-clock-actions-row > form { min-width: 0; }
  html:root body.ui-v2.page-live .ref-clock-actions-row > form > button {
    min-height: 44px;
    min-width: 0;
    padding-inline: 8px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  html:root body.ui-v2.page-live .ref-sound-prime-row .ref-sound-prime { padding-inline: 8px !important; font-size: 13px !important; }
  html:root body.ui-v2.page-live .ref-clock-actions-row > form > button:not(.ghost):not(.danger) { font-size: 18px !important; }
  html:root body.ui-v2.page-live .ref-sound-prime-row { margin: 6px 0 0; }
  html:root body.ui-v2.page-live .ref-clock-target-details > summary { min-height: 44px; }
  html:root body.ui-v2.page-live .ref-contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
    margin: 6px 0 !important;
    padding: 4px 12px !important;
  }
  html:root body.ui-v2.page-live .ref-contact-card .ref-contact-label { grid-column: 1; grid-row: 1; }
  html:root body.ui-v2.page-live .ref-contact-card .ref-contact-name { grid-column: 1; grid-row: 2; }
  html:root body.ui-v2.page-live .ref-contact-card .ref-contact-lines { grid-column: 2; grid-row: 1 / span 2; }
  html:root body.ui-v2.page-live .ref-event-feedback { margin: 6px 0 !important; padding: 6px 12px !important; }
  html:root body.ui-v2.page-live .ref-team-cols-card { margin-top: 6px; padding: 10px 12px !important; }
  html:root body.ui-v2.page-live .ref-team-cols { margin-top: 4px; }
  html:root body.ui-v2.page-live .ref-team-head { margin-bottom: 6px; }
}

/* Avattavat osiot: yksi tunniste (+ / −) kaikilla kolmella, vanha pyöreä
   merkki ja piste (custom.css details.ref-corrections) pois. */
html:root body.ui-v2.page-live :is(details.ref-card-entry, details.ref-event-history, details.ref-corrections) > summary { list-style: none; gap: 12px; }
html:root body.ui-v2.page-live :is(details.ref-card-entry, details.ref-event-history, details.ref-corrections) > summary::-webkit-details-marker { display: none; }
html:root body.ui-v2.page-live details.ref-corrections > summary::before { content: none !important; }
html:root body.ui-v2.page-live :is(details.ref-card-entry, details.ref-event-history, details.ref-corrections) > summary::after {
  content: "+";
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: auto;
  place-items: center;
  border: 1px solid var(--ui-control) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ui-fg) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
html:root body.ui-v2.page-live :is(details.ref-card-entry, details.ref-event-history, details.ref-corrections)[open] > summary::after {
  content: "−";
  background: var(--ui-solid) !important;
  color: var(--ui-on-solid) !important;
}

/* --- kaista D loppu --- */

/* ---------------------------------------------------------------------------
   KORJAUKSET 1.10.2026 — öisen E2E:n ui-v2-löydökset (e2e.yml punaisena
   26.9. alkaen). Kosketuskohteiden minimikorkeus on koko sovelluksessa 44 px
   (app.css:n 69 sääntöä, mobile.spec/series-bulk/stat-collector-lukot) —
   ui.css:n 40 px pudotti napit ja kentät 40–42 px:iin → kaikki min-height
   40px → 44px. Lisäksi:
   ------------------------------------------------------------------------ */
/* schedule.spec: esikatselun diff-taulukossa ei alle 14 px tekstiä 320 px:ssä
   (app.css .schedule-diff-table th 14px) — yleinen 12 px th-sääntö ei koske sitä. */
html:root body.ui-v2.page-admin .site-main .schedule-diff table.schedule-diff-table th { font-size: 14px !important; } /* spesifisyys (0,6,4) > yleinen th-sääntö (0,6,3) */
/* accommodation-cancellation.spec (T8): perumisen vahvistussivu on dialogi,
   ei laskeutumissivu — h1 enintään 36 px (clamp 2.1–3.1rem antoi 49,6 px). */
html:root body.ui-v2.page-team-portal .site-main .accommodation-cancel-confirm h1 { font-size: clamp(1.6rem, 4vw, 2.25rem) !important; }

/* grid-usability.spec (390 px): ruudukkosivu on täysnäyttö (custom.css: body
   100vh + overflow hidden, taulukko saa loput). Puhelimessa ylätunniste
   (3 suodatinta × 76 px, tilarivi, vihjeet, Tulosta) + poikkeuskortti +
   fokusvihje veivät 845 px → taulukolle jäi 20 px eikä yhtään saraketta
   näkynyt. Kapea näyttö: suodattimet kahteen sarakkeeseen, raahaus-/tiheys-
   vihje ja Tulosta piiloon (eivät koske kosketusnäyttöä), poikkeuskortin
   selite piiloon. Leveämmät näytöt ennallaan. */
@media (max-width: 600px) {
  html:root body.ui-v2.page-tournament-grid .grid-page-header { padding: 8px 10px !important; gap: 6px !important; }
  html:root body.ui-v2.page-tournament-grid .grid-page-header-left { gap: 4px 10px !important; }
  html:root body.ui-v2.page-tournament-grid .grid-page-subtitle { display: none !important; }
  html:root body.ui-v2.page-tournament-grid .grid-page-header-right {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px !important;
    align-items: end !important;
  }
  html:root body.ui-v2.page-tournament-grid .grid-page-header-right > form.inline {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html:root body.ui-v2.page-tournament-grid .grid-page-header-right > form.inline select { width: 100% !important; min-width: 0 !important; }
  html:root body.ui-v2.page-tournament-grid .grid-page-header-right > form.inline label { font-size: 12px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  html:root body.ui-v2.page-tournament-grid .grid-series-filter,
  html:root body.ui-v2.page-tournament-grid .grid-page-stats,
  html:root body.ui-v2.page-tournament-grid .grid-venue-limit,
  html:root body.ui-v2.page-tournament-grid #grid-undo-form { grid-column: 1 / -1 !important; }
  html:root body.ui-v2.page-tournament-grid .grid-page-stats { white-space: normal !important; font-size: 12px !important; }
  html:root body.ui-v2.page-tournament-grid :is(.grid-drag-hint, .grid-density-hint, .grid-print-button) { display: none !important; }
  html:root body.ui-v2.page-tournament-grid .grid-exceptions-head .mut { display: none !important; }
  html:root body.ui-v2.page-tournament-grid .grid-focus-hint { font-size: 12px !important; margin: 0 0 4px !important; }
}

/* ---------------------------------------------------------------------------
   POLISH 2.10.2026 (a) — murupolut ja avattavien osioiden otsikot puhelimessa
   ui_shots mittasi kaikilla siirretyillä sivuilla: murupolun linkit (Etusivu /
   seura / turnaus) 25 px ja summary-otsikot 18–29 px korkeita. Kosketus-
   minimi on 44 px (sama kuin painikkeilla). Vain puhelinleveys.
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  html:root body.ui-v2 .site-main .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  html:root body.ui-v2 .site-main summary {
    min-height: 44px;
    box-sizing: border-box;
    align-content: center;
  }
}

/* ---------------------------------------------------------------------------
   POLISH 2.10.2026 (b) — tuomarin näkymän yhteystieto- ja tietolinkit
   Tuomarivastaavan puhelinnumero (soitetaan kentältä) oli 21 px ja
   "Avaa turnaussivu" -linkki 31 px korkea puhelimessa.
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  html:root body.ui-v2.page-referee .site-main :is(a.ref-contact-phone, a.ref-contact-email, a.ref-info-public-link) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Maalintekijät-sivu (Mikael 3.10.2026, match_scorer_editor.ts): työpöydällä
   kapeat numero- ja minuuttikentät; puhelimessa (≤ 600 px) jokainen maali on
   oma korttinsa: valinta koko leveydelle, numero + minuutti + rastit rivissä.
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-match-scorers .match-scorers-table :is(.scorer-num, .scorer-min) { width: 5.5em !important; min-width: 0 !important; }
html:root body.ui-v2.page-match-scorers .match-scorers-table select { width: 100% !important; max-width: 420px; min-width: 0 !important; }
html:root body.ui-v2.page-match-scorers .match-scorers-table .scorer-check { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
html:root body.ui-v2.page-match-scorers .match-scorers-table .scorer-ref-note { font-size: 13px; margin-top: 4px; }
html:root body.ui-v2.page-match-scorers .match-scorers-table .scorer-new-head th { padding-top: 14px !important; }
html:root body.ui-v2.page-match-scorers .match-scorers-table :is(th, td) { text-align: left !important; }
/* Sarjasivun ottelurivi: "Maalintekijät" tuloksen perässä linkkinä. */
html:root body.ui-v2.page-admin .site-main a.match-scorers-link {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 600px) {
  html:root body.ui-v2.page-match-scorers .match-scorers-table thead { display: none !important; }
  html:root body.ui-v2.page-match-scorers .match-scorers-table,
  html:root body.ui-v2.page-match-scorers .match-scorers-table tbody { display: block !important; width: 100% !important; }
  html:root body.ui-v2.page-match-scorers .match-scorers-table tr.scorer-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ui-line);
  }
  html:root body.ui-v2.page-match-scorers .match-scorers-table tr.scorer-row td {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12px;
    color: var(--ui-mut);
  }
  html:root body.ui-v2.page-match-scorers .match-scorers-table tr.scorer-row td:first-child { grid-column: 1 / -1; color: var(--ui-fg); }
  html:root body.ui-v2.page-match-scorers .match-scorers-table tr.scorer-row td:not(:first-child)::before { content: attr(data-label); font-weight: 600; }
  html:root body.ui-v2.page-match-scorers .match-scorers-table tr.scorer-row.is-new td:last-child { visibility: hidden; }
  html:root body.ui-v2.page-match-scorers .match-scorers-table :is(.scorer-num, .scorer-min) { width: 100% !important; }
  html:root body.ui-v2.page-match-scorers .match-scorers-table select { max-width: none; }
  html:root body.ui-v2.page-match-scorers .match-scorers-table tr.scorer-new-head { display: block; }
  html:root body.ui-v2.page-match-scorers .match-scorers-table .scorer-check { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
   TUOMARIN KUTSU JA KUITTAUS 45 min ENNEN OTTELUA (3.10.2026)
   Tuomarin sivu: kuittauskortti ylimpänä (referee_callup_card.ts). Tuomarit-
   sivu: "Tuomarien kuittaukset" -taulu (referee_callup_admin.ts) + kytkin
   Tuomarivastaava-kortissa. Kosketuskohteet >= 44 px, teksti >= 12 px.
   ------------------------------------------------------------------------ */
html:root body.ui-v2.page-referee .ref-callup { scroll-margin-top: 80px; }
html:root body.ui-v2.page-referee .ref-callup-ok { margin: 0 0 12px; padding: 10px 14px !important; }
html:root body.ui-v2.page-referee .ref-callup-card {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 18px 20px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-left: 6px solid var(--ui-line);
  border-radius: 0;
  box-shadow: none;
  color: var(--ui-fg);
}
html:root body.ui-v2.page-referee .ref-callup-card.is-pending {
  background: var(--ui-warn-bg);
  border-color: var(--ui-warn-line);
  border-left-color: var(--ui-warn-fg);
}
html:root body.ui-v2.page-referee .ref-callup-card.is-coming { padding: 14px 16px; border-left-color: var(--ui-ok-fg); }
html:root body.ui-v2.page-referee .ref-callup-card.is-not-coming { padding: 14px 16px; border-left-color: var(--ui-err-fg); }
html:root body.ui-v2.page-referee .ref-callup-label {
  display: inline-block;
  width: fit-content;
  padding: 3px 9px;
  background: var(--ui-solid);
  color: var(--ui-on-solid);
  font-family: var(--ui-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html:root body.ui-v2.page-referee .site-main h2.ref-callup-title {
  margin: 0 !important;
  font-size: clamp(1.5rem, 4.4vw, 2rem) !important;
  line-height: 1.05 !important;
}
html:root body.ui-v2.page-referee .site-main h2.ref-callup-title.is-compact { font-size: 1.15rem !important; }
html:root body.ui-v2.page-referee .ref-callup-meta,
html:root body.ui-v2.page-referee .ref-callup-role,
html:root body.ui-v2.page-referee .ref-callup-reason {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ui-mut);
  overflow-wrap: anywhere;
}
html:root body.ui-v2.page-referee .ref-callup-reason { color: var(--ui-fg); }
html:root body.ui-v2.page-referee .ref-callup-venue { color: var(--ui-fg); font-weight: 600; }
/* Linkin kosketusalue >= 44 px ilman rivivälin kasvua: padding kumotaan negatiivisella marginaalilla. */
html:root body.ui-v2.page-referee a.ref-callup-venue {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ui-control);
}
html:root body.ui-v2.page-referee .ref-callup-done { margin: 0; font-size: 16px; line-height: 1.4; }
html:root body.ui-v2.page-referee .ref-callup-call { margin: 0; }
html:root body.ui-v2.page-referee .ref-callup-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
html:root body.ui-v2.page-referee .ref-callup-yes { margin: 0; }
html:root body.ui-v2.page-referee .site-main .ref-callup-yes button.ref-callup-coming {
  min-height: 52px;
  padding: 12px 28px 11px !important;
  font-size: 20px !important;
}
html:root body.ui-v2.page-referee .ref-callup-no { flex: 1 1 14rem; min-width: 0; }
html:root body.ui-v2.page-referee .ref-callup-no > summary,
html:root body.ui-v2.page-referee .ref-callup-change > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ui-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-fg);
}
html:root body.ui-v2.page-referee .ref-callup-no > summary::-webkit-details-marker,
html:root body.ui-v2.page-referee .ref-callup-change > summary::-webkit-details-marker { display: none; }
html:root body.ui-v2.page-referee .ref-callup-no > summary {
  justify-content: space-between;
  border: 1px solid var(--ui-control);
  border-radius: 2px;
  background: transparent;
}
html:root body.ui-v2.page-referee .ref-callup-no > summary::after { content: "\25BE"; font-size: 14px; }
html:root body.ui-v2.page-referee .ref-callup-no[open] > summary::after { content: "\25B4"; }
html:root body.ui-v2.page-referee .ref-callup-no > summary:hover,
html:root body.ui-v2.page-referee .ref-callup-no[open] > summary { background: var(--ui-hover); }
html:root body.ui-v2.page-referee .ref-callup-change > summary { padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
html:root body.ui-v2.page-referee .ref-callup-change[open] .ref-callup-actions { margin-top: 6px; }
html:root body.ui-v2.page-referee .ref-callup-no-form { display: grid; gap: 10px; margin-top: 10px; }
html:root body.ui-v2.page-referee .ref-callup-no-form textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  font-family: var(--ui-text);
  font-size: 16px;
  color: var(--ui-fg);
  background: var(--ui-panel);
  border: 1px solid var(--ui-control);
  border-radius: 2px;
  box-sizing: border-box;
}
html:root body.ui-v2.page-referee label.ref-callup-reason-label {
  font-family: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-referee label.ref-callup-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  font-family: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-referee label.ref-callup-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ui-solid); }
@media (max-width: 520px) {
  html:root body.ui-v2.page-referee .ref-callup-card { padding: 16px 14px; }
  html:root body.ui-v2.page-referee .ref-callup-yes { flex: 1 1 100%; }
  html:root body.ui-v2.page-referee .site-main .ref-callup-yes button.ref-callup-coming { width: 100%; }
  html:root body.ui-v2.page-referee .ref-callup-no { flex: 1 1 100%; }
  html:root body.ui-v2.page-referee .site-main .ref-callup-call a.ghost { display: flex; justify-content: center; box-sizing: border-box; width: 100%; text-align: center; }
}

/* Tuomarit-sivu: kuittaustaulu */
html:root body.ui-v2.page-admin .ref-callup-admin > p { margin: 4px 0 12px; }
html:root body.ui-v2.page-admin .ref-callup-table-wrap { overflow-x: auto; }
html:root body.ui-v2.page-admin table.ref-callup-table { width: 100%; border-collapse: collapse; }
html:root body.ui-v2.page-admin table.ref-callup-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-mut);
  border-bottom: 1px solid var(--ui-line);
}
html:root body.ui-v2.page-admin table.ref-callup-table td {
  padding: 10px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid var(--ui-line);
  overflow-wrap: anywhere;
}
html:root body.ui-v2.page-admin table.ref-callup-table td.ref-callup-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
html:root body.ui-v2.page-admin tr.ref-callup-row.is-urgent > td { background: var(--ui-warn-bg); }
html:root body.ui-v2.page-admin tr.ref-callup-row.is-not-coming > td { background: var(--ui-err-bg); }
html:root body.ui-v2.page-admin tr.ref-callup-row.is-urgent > td:first-child { box-shadow: inset 4px 0 0 var(--ui-warn-fg); }
html:root body.ui-v2.page-admin tr.ref-callup-row.is-not-coming > td:first-child { box-shadow: inset 4px 0 0 var(--ui-err-fg); }
html:root body.ui-v2.page-admin .ref-callup-pill {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  color: var(--ui-mut);
}
html:root body.ui-v2.page-admin .ref-callup-pill.is-coming { background: var(--ui-ok-bg); color: var(--ui-ok-fg); border-color: var(--ui-ok-line); }
html:root body.ui-v2.page-admin .ref-callup-pill.is-not-coming { background: var(--ui-err-bg); color: var(--ui-err-fg); border-color: var(--ui-err-line); }
html:root body.ui-v2.page-admin .ref-callup-pill.is-pending { background: var(--ui-warn-bg); color: var(--ui-warn-fg); border-color: var(--ui-warn-line); }
html:root body.ui-v2.page-admin .ref-callup-pill.is-urgent { background: var(--ui-warn-fg); color: var(--ui-warn-bg); border-color: var(--ui-warn-fg); }
html:root body.ui-v2.page-admin .ref-callup-reason { display: block; margin-top: 4px; color: var(--ui-err-fg); font-weight: 600; }
html:root body.ui-v2.page-admin .ref-callup-callme { display: block; margin-top: 2px; color: var(--ui-err-fg); }
html:root body.ui-v2.page-admin .ref-callup-when,
html:root body.ui-v2.page-admin .ref-callup-noemail { font-size: 12px; }
html:root body.ui-v2.page-admin a.ref-callup-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ui-fg);
}
@media (max-width: 760px) {
  html:root body.ui-v2.page-admin table.ref-callup-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  html:root body.ui-v2.page-admin table.ref-callup-table,
  html:root body.ui-v2.page-admin table.ref-callup-table tbody,
  html:root body.ui-v2.page-admin table.ref-callup-table tr { display: block; }
  html:root body.ui-v2.page-admin table.ref-callup-table tr {
    margin: 0 0 10px;
    border: 1px solid var(--ui-line);
  }
  html:root body.ui-v2.page-admin table.ref-callup-table td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 8px;
    padding: 8px 12px;
  }
  html:root body.ui-v2.page-admin table.ref-callup-table td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-mut);
  }
}

/* Tuomarivastaava-kortin kytkin (referee_contact_card.ts) */
html:root body.ui-v2.page-admin label.ref-callup-setting-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  font-family: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-fg) !important;
}
html:root body.ui-v2.page-admin label.ref-callup-setting-label input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ui-solid); }

/* Palautekyselyn jakaminen (feedback_survey_followup.ts, 3.10.2026):
   Viestit-sivun valmis viestipohja + yleiskuvan Palautekysely-kortti. */
html:root body.ui-v2.page-admin .mass-msg-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 12px; }
html:root body.ui-v2.page-admin .mass-msg-template-applied { margin: 0 0 12px; }
html:root body.ui-v2.page-admin .feedback-followup-card h2 { margin: 0 0 6px; }
html:root body.ui-v2.page-admin .feedback-followup-count { margin: 0 0 4px; font-weight: 600; }
html:root body.ui-v2.page-admin .feedback-followup-link { margin: 8px 0 12px; }
html:root body.ui-v2.page-admin .feedback-followup-url { overflow-wrap: anywhere; }
html:root body.ui-v2.page-admin .feedback-followup-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===========================================================================
   OHJESIVUT (TUR-287, 4.10.2026): järjestäjän ohjeet /ohjeet ja
   /ohjeet/<ohje> (help_pages.ts, body.page-help). Luettava tekstisivu:
   kapea palsta, typografinen hierarkia ja hiusviivat. Ei kortteja, ei
   ikoneita, ei aksenttia tekstinä (sääntö 2). Lisäksi Seuraavat askeleet
   -sivun ohjelinkit (setup_steps_page.ts). Omat säännöt VAIN tänne.
   ======================================================================== */
html:root body.ui-v2.page-help :is(.help-page, .help-pager, .help-support) {
  max-width: 46rem;
}
html:root body.ui-v2.page-help .crumbs {
  font-family: var(--ui-text) !important;
  color: var(--ui-mut) !important;
  font-weight: 600 !important;
}
html:root body.ui-v2.page-help .crumbs a {
  color: var(--ui-fg) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html:root body.ui-v2.page-help .help-head { margin: 8px 0 24px; }
/* custom.css:n yleinen h1 { max-width: 15ch } katkaisi ohjeen nimen kahdelle
   riville, vaikka palstassa on tilaa. */
html:root body.ui-v2.page-help .help-head h1 { max-width: none; }
html:root body.ui-v2.page-help .help-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-mut);
}
html:root body.ui-v2.page-help .help-lead {
  margin: 0 0 12px;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ui-fg);
}
html:root body.ui-v2.page-help .help-pages {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ui-mut);
}
html:root body.ui-v2.page-help .help-pages-label { margin-inline-end: 4px; }
html:root body.ui-v2.page-help .help-ui { font-weight: 700; color: var(--ui-fg); }

/* Ohjeen osiot */
html:root body.ui-v2.page-help .help-section {
  padding: 20px 0 6px;
  border-top: 1px solid var(--ui-line);
}
html:root body.ui-v2.page-help .help-section h2 {
  margin: 0 0 10px !important;
  font-size: 1.35rem !important;
}
html:root body.ui-v2.page-help .help-section :is(p, li) {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ui-fg);
}
html:root body.ui-v2.page-help .help-section p { margin: 0 0 12px; }
html:root body.ui-v2.page-help :is(.help-steps, .help-list) {
  margin: 0 0 12px;
  padding-inline-start: 1.5em;
}
html:root body.ui-v2.page-help :is(.help-steps, .help-list) li {
  margin: 0 0 8px;
  padding-inline-start: 4px;
}
html:root body.ui-v2.page-help .help-steps li::marker { font-weight: 700; }

/* Hakemisto */
html:root body.ui-v2.page-help .help-index {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ui-line);
}
html:root body.ui-v2.page-help .help-index-item { border-bottom: 1px solid var(--ui-line); }
html:root body.ui-v2.page-help .help-index-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 44px;
  padding: 14px 8px;
  color: var(--ui-fg);
  text-decoration: none;
}
html:root body.ui-v2.page-help .help-index-link:hover { background: var(--ui-hover); }
html:root body.ui-v2.page-help .help-index-num {
  flex: none;
  min-width: 2ch;
  font-family: var(--ui-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  text-align: end;
  color: var(--ui-mut);
}
html:root body.ui-v2.page-help .help-index-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
html:root body.ui-v2.page-help .help-index-title {
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ui-control);
}
html:root body.ui-v2.page-help .help-index-summary {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ui-mut);
}
html:root body.ui-v2.page-help .help-account { line-height: 1.6; }
html:root body.ui-v2.page-help .help-support {
  margin: 24px 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ui-mut);
}

/* Edellinen / Kaikki ohjeet / Seuraava */
html:root body.ui-v2.page-help .help-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-line);
}
html:root body.ui-v2.page-help .help-pager a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ui-control);
}
html:root body.ui-v2.page-help .help-pager-next { justify-content: flex-end; text-align: end; }
@media (max-width: 640px) {
  html:root body.ui-v2.page-help .help-pager { grid-template-columns: 1fr; gap: 0; }
  html:root body.ui-v2.page-help .help-pager-next { justify-content: flex-start; text-align: start; }
  html:root body.ui-v2.page-help .help-pager > span:empty { display: none; }
}

/* Seuraavat askeleet: ohjelinkki vaiheen painikkeen vieressä + hakemistolinkki */
html:root body.ui-v2.page-setup-steps .setup-step-help {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline-start: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-mut);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html:root body.ui-v2.page-setup-steps .setup-help-index { margin: 6px 0 0; font-size: 14px; }
/* --- ohjesivut loppu --- */