/* ============================================================================
   Turnauspolku — chrome.css (29.9.2026)
   ----------------------------------------------------------------------------
   Sivuston KEHYS: yläpalkki (.site-top) ja alapalkki (.site-foot).

   MIKSI OMA TIEDOSTO
   Mikael 29.9.2026: "Minä en vieläkään tykkää alkuperäisesti tehdystä
   sivustomme ylä- ja alabannerista. Toivoisin että basen tekemää versiota
   turnauspolku.fi etusivusta muokattaisiin enemmän mukaan." ja "Fontit myös
   häiritsee meidän bannereissa."

   Etusivun SISÄLTÖ sai Base44:n "Tactical Precision" -ilmeen 12.9.2026, mutta
   kehys jäi vanhaksi: tumma metsänvihreä palkki ja leveä lihava kirjasin.
   Vanhat säännöt ovat hajallaan app.css:ssä ja data/custom.css:ssä
   sivukohtaisina !important-lohkoina (page-admin, page-pricing, page-auth,
   page-wizard, page-public-tournament …), yhteensä yli sata sääntöä. Niiden
   muokkaaminen paikallaan olisi jättänyt aina yhden sivutyypin väliin.

   Tämä tiedosto ladataan VIIMEISENÄ (html.ts: app.css → custom.css →
   tokens.css → chrome.css) ja jokainen valitsin alkaa `html:root body`, joten
   se voittaa vanhat säännöt sekä järjestyksellä että spesifisyydellä.

   SÄÄNNÖT (samat kuin etusivun Tactical Precision -lohkossa)
   1. Aksentti #CCFF00 on TAUSTA, ei tekstiväri vaalealla pinnalla.
   2. Ei kovakoodattuja värejä säännöissä: kaikki --chrome-*-tokenien kautta,
      ja jokaisella tokenilla on tumman teeman vastinpari.
   3. Fokusrengas on --chrome-fg, ei aksentti.
   4. Julkinen turnaussivu on SEURAN oma: siellä ei ole yläpalkkia lainkaan ja
      alapalkki on hillitty rivi. Turnauspolun sanamerkki ei näy siellä isona.
   ========================================================================== */

html:root {
  --chrome-bg: #ffffff;
  --chrome-fg: #111418;
  --chrome-mut: #525960;
  --chrome-line: #dcdfe5;
  --chrome-control: #6f767f;
  --chrome-turf: #ccff00;
  --chrome-on-turf: #111418;
  --chrome-solid: #111418;
  --chrome-on-solid: #ffffff;
  --chrome-hover: rgba(17, 20, 24, 0.06);
  --chrome-shadow: rgba(17, 20, 24, 0.14);
  --chrome-notch: 7px;
  --chrome-display: 'Saira Extra Condensed', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --chrome-text: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
html:root.theme-dark {
  --chrome-bg: #14171a;
  --chrome-fg: #f1f3f4;
  --chrome-mut: #a8b0b8;
  --chrome-line: #2a2f34;
  --chrome-control: #8d959e;
  --chrome-turf: #ccff00;
  --chrome-on-turf: #111418;
  --chrome-solid: #f1f3f4;
  --chrome-on-solid: #111418;
  --chrome-hover: rgba(255, 255, 255, 0.08);
  --chrome-shadow: rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------------
   YLÄPALKKI
   ------------------------------------------------------------------------ */
html:root body .site-top {
  background: var(--chrome-bg) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chrome-line) !important;
  box-shadow: none !important;
  color: var(--chrome-fg) !important;
  font-family: var(--chrome-text);
}
html:root body .site-top .site-top-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px 28px;
  box-sizing: border-box;
  max-width: 1200px;
  min-height: 60px;
  margin: 0 auto;
  padding: 0 20px !important;
}
html:root body .site-top :is(a, a:visited, span, strong, b, summary) {
  color: var(--chrome-fg) !important;
}
html:root body .site-top :is(a, summary, button):focus-visible {
  outline: 2px solid var(--chrome-fg) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Tunnus: aksenttilovi + sanamerkki. Sama merkki kuin Base44:n etusivulla. */
html:root body .site-top .site-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  background: none !important;
  text-decoration: none !important;
}
html:root body .site-top .site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
html:root body .site-top .site-logo-mark.brand-mark,
html:root body .site-foot .powered-by-turnauspolku .brand-mark {
  /* Tunnus: kaksi vastakkaista lovea. Neljä lovea teki 24 px:n neliöstä
     kahdeksankulmion, joka näytti pallolta. */
  clip-path: polygon(
    var(--chrome-notch) 0, 100% 0, 100% calc(100% - var(--chrome-notch)),
    calc(100% - var(--chrome-notch)) 100%, 0 100%, 0 var(--chrome-notch)
  ) !important;
}
html:root body .site-top .site-logo-mark.brand-mark {
  --chrome-notch: 8px;
  display: inline-block !important;
  flex: 0 0 auto;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--chrome-turf) !important;
  background-image: none !important;
  box-shadow: none !important;
  clip-path: polygon(
    var(--chrome-notch) 0, calc(100% - var(--chrome-notch)) 0, 100% var(--chrome-notch),
    100% calc(100% - var(--chrome-notch)), calc(100% - var(--chrome-notch)) 100%,
    var(--chrome-notch) 100%, 0 calc(100% - var(--chrome-notch)), 0 var(--chrome-notch)
  );
}
html:root body .site-top .site-logo-mark.brand-mark::before,
html:root body .site-top .site-logo-mark.brand-mark::after {
  content: none !important;
}
html:root body .site-top .site-logo-wordmark {
  font-family: var(--chrome-display) !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  font-size: 27px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--chrome-fg) !important;
}

/* Navigaatio: tavallinen tekstikirjasin, ei lihavointia eikä levitystä. */
html:root body .site-top .site-nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 4px 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
}
html:root body .site-top .site-nav a {
  padding: 8px 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: inset 0 -2px 0 transparent;
  font-family: var(--chrome-text) !important;
  font-weight: 500 !important;
  font-stretch: normal !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  color: var(--chrome-mut) !important;
}
html:root body .site-top .site-nav a:hover,
html:root body .site-top .site-nav a[aria-current="page"] {
  color: var(--chrome-fg) !important;
  box-shadow: inset 0 -2px 0 var(--chrome-turf);
}
/* Käyttöönoton varaus on palkin ainoa painike. */
html:root body .site-top .site-nav a[href="/aloita-pilotti"] {
  margin-inline-start: auto;
  padding: 10px 18px 9px;
  background: var(--chrome-solid) !important;
  box-shadow: none;
  font-family: var(--chrome-display) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--chrome-on-solid) !important;
  clip-path: polygon(
    var(--chrome-notch) 0, calc(100% - var(--chrome-notch)) 0, 100% var(--chrome-notch),
    100% calc(100% - var(--chrome-notch)), calc(100% - var(--chrome-notch)) 100%,
    var(--chrome-notch) 100%, 0 calc(100% - var(--chrome-notch)), 0 var(--chrome-notch)
  );
}
html:root body .site-top .site-nav a[href="/aloita-pilotti"]:hover {
  background: var(--chrome-turf) !important;
  box-shadow: none;
  color: var(--chrome-on-turf) !important;
}

/* Toiminnot: kieli, kirjautuminen, käyttäjä. */
html:root body .site-top .site-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto;
  flex-wrap: nowrap !important;
  row-gap: 0 !important;
  gap: 14px;
  margin-inline-start: auto;
}
html:root body .site-top .site-nav ~ .site-actions { margin-inline-start: 0; }
html:root body .site-top .user-dock {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 14px;
  min-width: 0;
  margin: 0 !important;
}
html:root body .site-top .user-dock > * { margin: 0 !important; }
html:root body .site-top .site-lang { margin: 0 !important; }
html:root body .site-top .user-dock a {
  padding: 0;
  border: 0;
  background: none !important;
  font-family: var(--chrome-text) !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  color: var(--chrome-fg) !important;
}
html:root body .site-top .user-dock a:hover { text-decoration: underline !important; }
html:root body .site-top .user-dock a.ud-name {
  min-height: 0 !important;
  line-height: 1.3 !important;
  /* Pitkä nimi ei saa työntää uloskirjautumista ruudun ulkopuolelle
     (e2e/account-header-reflow.spec.ts). Koko nimi on tilisivulla. */
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500 !important;
  color: var(--chrome-mut) !important;
}
html:root body .site-top .user-dock a.ud-admin {
  display: inline-flex;
  align-items: center;
  min-height: 0 !important;
  padding: 6px 9px 5px;
  line-height: 1 !important;
  border: 1px solid var(--chrome-control) !important;
  border-radius: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--chrome-fg) !important;
}
html:root body .site-top .user-dock a.ud-admin::before { content: none !important; }
html:root body .site-top .user-dock a.ud-admin:hover {
  background: var(--chrome-solid) !important;
  border-color: var(--chrome-solid) !important;
  color: var(--chrome-on-solid) !important;
  text-decoration: none !important;
}
html:root body .site-top .user-dock form { display: inline-flex; margin: 0; }
html:root body .site-top .user-dock form button,
html:root body .site-top .user-dock button.ghost {
  min-height: 0;
  padding: 7px 12px;
  border: 1px solid var(--chrome-control) !important;
  border-radius: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--chrome-text) !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: var(--chrome-fg) !important;
}
html:root body .site-top .user-dock form button:hover,
html:root body .site-top .user-dock button.ghost:hover {
  background: var(--chrome-hover) !important;
  border-color: var(--chrome-fg) !important;
}

/* Kielenvaihdin yläpalkissa. Julkisen sivun telakka (.public-lang-dock) on
   eri elementti eikä kuulu tähän. */
html:root body .site-top .site-lang { font-family: var(--chrome-text); font-size: 12px; }
html:root body .site-top .site-lang > summary {
  padding: 6px 8px;
  border: 1px solid var(--chrome-line) !important;
  border-radius: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
  letter-spacing: 0.04em !important;
  color: var(--chrome-fg) !important;
}
html:root body .site-top .site-lang > summary:hover,
html:root body .site-top .site-lang[open] > summary {
  background: var(--chrome-hover) !important;
  border-color: var(--chrome-control) !important;
}
html:root body .site-top .site-lang-menu {
  padding: 4px;
  border: 1px solid var(--chrome-line) !important;
  border-radius: 2px !important;
  background: var(--chrome-bg) !important;
  box-shadow: 0 12px 32px var(--chrome-shadow) !important;
}
html:root body .site-top .site-lang-menu a.site-lang-link {
  border-radius: 0 !important;
  font-weight: 500 !important;
  font-stretch: normal !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: var(--chrome-fg) !important;
}
html:root body .site-top .site-lang-menu a.site-lang-link:hover {
  background: var(--chrome-hover) !important;
  text-decoration: none !important;
}

@media (max-width: 900px) {
  html:root body .site-top .site-top-inner {
    flex-wrap: wrap;
    gap: 0 12px;
    width: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 16px !important;
  }
  html:root body .site-top .site-brand { min-height: 52px; }
  html:root body .site-top .site-logo-wordmark { font-size: 24px !important; }
  html:root body .site-top .site-logo-mark.brand-mark {
    width: 22px !important;
    height: 22px !important;
  }
  html:root body .site-top .site-actions { gap: 10px; }
  html:root body .site-top .user-dock { gap: 10px; }
  /* Navigaatio omalle rivilleen, yhdelle riville. Ennen se rivittyi kolmelle
     riville ja palkki oli puhelimessa 155 px korkea. */
  html:root body .site-top .site-nav {
    order: 3;
    flex: 1 0 calc(100% + 32px);
    width: calc(100% + 32px);
    max-width: none !important;
    gap: 0 20px;
    box-sizing: border-box;
    margin: 0 -16px;
    padding: 0 16px;
    border-top: 1px solid var(--chrome-line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  html:root body .site-top .site-nav::-webkit-scrollbar { display: none; }
  html:root body .site-top .site-nav a {
    padding: 14px 0 13px;
    font-size: 14px !important;
  }
  html:root body .site-top .site-nav a[href="/aloita-pilotti"] {
    margin-block: 6px;
    padding: 9px 14px 8px;
    font-size: 16px !important;
  }
  /* Kirjautunut käyttäjä: kieli, nimi ja uloskirjautuminen eivät mahdu
     tunnuksen viereen 390 px:n ruudulla. Ne saavat oman rivinsä. Ennen ne
     rivittyivät kolmelle riville ja palkki oli 136 px korkea. */
  html:root body .site-top .site-actions:has(.user-dock form) {
    order: 3;
    flex: 1 0 calc(100% + 32px);
    box-sizing: border-box;
    width: calc(100% + 32px);
    max-width: none !important;
    min-width: 0;
    min-height: 48px;
    margin: 0 -16px;
    padding: 8px 16px;
    border-top: 1px solid var(--chrome-line);
  }
  /* Kapeimmalla ruudulla (320 px) ja pitkillä käännöksillä rivi saa
     rivittyä. Mikään ei saa jäädä ruudun ulkopuolelle. */
  html:root body .site-top .site-actions:has(.user-dock form) .user-dock {
    flex: 1 1 0;
    flex-wrap: wrap !important;
    row-gap: 6px;
    min-width: 0;
  }
  html:root body .site-top .site-actions:has(.user-dock form) .user-dock form {
    margin-inline-start: auto;
  }
  html:root body .site-top .user-dock a.ud-admin {
    padding: 6px 7px 5px;
    letter-spacing: 0.08em !important;
  }
  /* Käyttäjän nimi vie puhelimessa tilan jonka uloskirjautuminen tarvitsee.
     Nimi on edelleen tilisivulla; ruudunlukija lukee linkin silti. */
  html:root body .site-top .user-dock form { flex: 0 0 auto; }
  html:root body .site-top .user-dock a.ud-admin { flex: 0 0 auto; }
  html:root body .site-top .user-dock a.ud-name {
    /* Kasvaa jäljelle jäävään tilaan ja kutistuu nollaan asti: nimi ei
       koskaan aiheuta rivitystä eikä työnnä uloskirjautumista ulos. */
    display: block;
    flex: 1 1 0;
    align-self: center;
    min-width: 0;
    max-width: none;
    line-height: 1.3 !important;
  }
}
@media (max-width: 430px) {
  /* Sivun sisäinen ankkuri väistyy kapeimmalla ruudulla, jotta painike mahtuu. */
  html:root body .site-top .site-nav a[href="/#ominaisuudet"] { display: none; }
}

/* ---------------------------------------------------------------------------
   ALAPALKKI — täysi versio (omat sivumme ja hallinta)
   ------------------------------------------------------------------------ */
html:root body .site-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px 0;
  box-sizing: border-box;
  width: auto;
  max-width: none !important;
  margin: 64px 0 0 !important;
  padding: 36px max(20px, calc((100% - 1160px) / 2)) 28px !important;
  border: 0 !important;
  border-top: 1px solid var(--chrome-line) !important;
  border-radius: 0 !important;
  background: var(--chrome-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: var(--chrome-text);
  font-size: 14px;
  text-align: start;
  color: var(--chrome-mut) !important;
}
html:root body .site-foot::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 2;
  border-top: 1px solid var(--chrome-line);
}
html:root body .site-foot .site-foot-bottom {
  display: contents !important;
}
html:root body .site-foot :is(a, a:visited) {
  font-weight: 500 !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  color: var(--chrome-mut) !important;
}
html:root body .site-foot a:hover {
  text-decoration: underline !important;
  color: var(--chrome-fg) !important;
}
html:root body .site-foot :is(a, button):focus-visible {
  outline: 2px solid var(--chrome-fg) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
html:root body .site-foot .mut { color: var(--chrome-mut) !important; }

html:root body .site-foot .powered-by-turnauspolku {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  justify-self: start !important;
  width: auto !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html:root body .site-foot .powered-by-turnauspolku .brand-mark {
  --chrome-notch: 7px;
  display: inline-block !important;
  flex: 0 0 auto;
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--chrome-turf) !important;
  background-image: none !important;
  box-shadow: none !important;
  clip-path: polygon(
    var(--chrome-notch) 0, calc(100% - var(--chrome-notch)) 0, 100% var(--chrome-notch),
    100% calc(100% - var(--chrome-notch)), calc(100% - var(--chrome-notch)) 100%,
    var(--chrome-notch) 100%, 0 calc(100% - var(--chrome-notch)), 0 var(--chrome-notch)
  );
}
html:root body .site-foot .powered-by-turnauspolku .brand-mark::before,
html:root body .site-foot .powered-by-turnauspolku .brand-mark::after {
  content: none !important;
}
html:root body .site-foot span.powered-by-turnauspolku > span:not(.brand-mark):not(.site-foot-year) {
  font-family: var(--chrome-display) !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--chrome-fg) !important;
}
html:root body .site-foot .powered-by-turnauspolku .site-foot-year {
  font-family: var(--chrome-text) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: var(--chrome-mut) !important;
}

html:root body .site-foot .site-foot-nav {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html:root body .site-foot .site-foot-nav a {
  display: inline-block;
  padding: 4px 0 !important;
  border: 0 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}
html:root body .site-foot .site-foot-nav a.site-foot-support {
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html:root body .site-foot .site-foot-nav a::before,
html:root body .site-foot .site-foot-nav a::after {
  content: none !important;
}

html:root body .site-foot .site-foot-legal {
  /* Koko rivin levyinen: sarake 1 jää kapeaksi, koska navigaatio varaa
     sarakkeet 2–3, ja sähköpostiosoite rivittyi omalle rivilleen. Asetukset
     ovat samalla rivillä oikeassa reunassa omissa sarakkeissaan. */
  grid-column: 1 / -1;
  grid-row: 3;
  display: block;
  justify-self: start;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 13px !important;
  line-height: 1.5;
  text-align: start;
}
html:root body .site-foot .site-foot-legal a {
  display: inline !important;
  padding: 0 !important;
  font-weight: 500 !important;
  color: var(--chrome-fg) !important;
}

html:root body .site-foot .density-toggle {
  grid-row: 3;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  justify-self: end;
  padding-inline-start: 24px;
  font-size: 12px !important;
  opacity: 1;
}
html:root body .site-foot .density-toggle.theme-toggle { grid-column: 3; }
html:root body .site-foot .density-toggle .density-label {
  margin: 0;
  color: var(--chrome-mut) !important;
}
html:root body .site-foot .density-toggle .density-btn {
  min-height: 0;
  padding: 5px 9px;
  border: 1px solid var(--chrome-line) !important;
  border-radius: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--chrome-text) !important;
  font-weight: 500 !important;
  font-stretch: normal !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  color: var(--chrome-fg) !important;
}
html:root body .site-foot .density-toggle .density-btn:hover {
  border-color: var(--chrome-fg) !important;
  background: var(--chrome-hover) !important;
}

@media (max-width: 860px) {
  html:root body .site-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 0;
    margin-top: 48px !important;
    padding: 28px 16px 24px !important;
  }
  html:root body .site-foot .powered-by-turnauspolku { grid-column: 1; grid-row: 1; }
  html:root body .site-foot .site-foot-nav {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 2px 20px;
  }
  html:root body .site-foot .site-foot-nav a { padding: 8px 0 !important; }
  html:root body .site-foot::before { grid-column: 1; grid-row: 3; }
  html:root body .site-foot .site-foot-legal { grid-column: 1; grid-row: 4; }
  html:root body .site-foot .density-toggle {
    grid-column: 1;
    grid-row: 5;
    justify-self: start;
    padding-inline-start: 0;
  }
  html:root body .site-foot .density-toggle.theme-toggle { grid-column: 1; grid-row: 6; }
}

/* ---------------------------------------------------------------------------
   ALAPALKKI — seuran oma julkinen sivu (footerVariant: minimal)
   Tunnistetaan linkkimuotoisesta merkistä: html.ts renderöi
   `a.powered-by-turnauspolku` VAIN minimi-variantissa.
   Yksi hillitty rivi: linkit vasemmalla, palveluntarjoaja oikealla.
   Ei tummaa laatikkoa, ei isoa sanamerkkiä.
   ------------------------------------------------------------------------ */
html:root body .site-foot:has(a.powered-by-turnauspolku) {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 24px;
  margin-top: 40px !important;
  padding: 18px max(16px, calc((100% - 980px) / 2)) 22px !important;
  background: transparent !important;
  font-size: 13px;
}
html:root body .site-foot:has(a.powered-by-turnauspolku)::before { content: none; }
html:root body .site-foot:has(a.powered-by-turnauspolku) .site-foot-nav {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-start;
  gap: 2px 18px;
}
html:root body .site-foot:has(a.powered-by-turnauspolku) .site-foot-nav a {
  font-size: 13px !important;
  font-weight: 400 !important;
}
html:root body .site-foot a.powered-by-turnauspolku {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  gap: 7px;
  font-size: 13px !important;
  font-weight: 400 !important;
}
html:root body .site-foot a.powered-by-turnauspolku > span {
  font-family: var(--chrome-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--chrome-mut) !important;
}
html:root body .site-foot a.powered-by-turnauspolku .brand-mark {
  width: 12px !important;
  height: 12px !important;
  --chrome-notch: 4px;
}
html:root body .site-foot:has(a.powered-by-turnauspolku) .site-foot-legal {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 12px !important;
}
html:root body .site-foot:has(a.powered-by-turnauspolku) .site-foot-legal a {
  font-weight: 400 !important;
  color: var(--chrome-mut) !important;
}
html:root body .site-foot:has(a.powered-by-turnauspolku) .density-toggle {
  grid-row: 3;
  grid-column: 1 / -1;
  padding-inline-start: 0;
}
@media (max-width: 860px) {
  html:root body .site-foot:has(a.powered-by-turnauspolku) {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 16px 20px !important;
  }
  html:root body .site-foot:has(a.powered-by-turnauspolku) .site-foot-nav { grid-row: 1; }
  html:root body .site-foot:has(a.powered-by-turnauspolku) .site-foot-nav a { padding: 8px 0 !important; }
  html:root body .site-foot:has(a.powered-by-turnauspolku) .site-foot-legal { grid-row: 2; }
  html:root body .site-foot a.powered-by-turnauspolku {
    grid-column: 1;
    grid-row: 3;
    justify-self: start !important;
  }
  /* Alarivi samaan vasempaan reunaan kuin alapalkin linkit. */
  html:root body .public-page-meta { padding-inline: 10px !important; }
}

@media print {
  html:root body .site-top,
  html:root body .site-foot { display: none !important; }
}
@media (forced-colors: active) {
  html:root body .site-top .site-logo-mark.brand-mark,
  html:root body .site-foot .powered-by-turnauspolku .brand-mark {
    forced-color-adjust: none;
  }
}

/* ---------------------------------------------------------------------------
   JULKISEN SIVUN ALARIVI (.public-page-meta)
   Mikael 29.9.2026: "Anna palautetta aika jännässä kohdassa" ja "miksi kukaan
   ei pitäisi automaattipäivitystä päällä?". Ennen: kaksi keskitettyä pilleriä
   sisällön ja alapalkin välissä. Nyt: yksi hillitty tekstirivi heti alapalkin
   yläpuolella. Päivitysaika vasemmalla, palaute oikealla.
   Automaattipäivityksen pysäytys EI poistu: ruudunlukijan lukukohta katoaa
   jokaisessa uudelleenlatauksessa, ja WCAG 2.2.1 vaatii että ajastetun
   päivityksen voi pysäyttää (public_auto_refresh_a11y.test.ts). Se on nyt
   tekstilinkin näköinen eikä kilpaile sisällön kanssa.
   ------------------------------------------------------------------------ */
html:root body .public-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  margin: 48px 0 0 !important;
  padding: 0 !important;
  font-family: var(--chrome-text);
  font-size: 13px;
  line-height: 1.4;
  color: var(--chrome-mut);
}
html:root body .public-page-meta > p {
  order: 2;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  text-align: start !important;
  color: var(--chrome-mut) !important;
}
html:root body .public-page-meta > p.public-updated-stamp { order: 1; }
html:root body .public-page-meta a.feedback-link,
html:root body .public-page-meta button.auto-refresh-toggle {
  display: inline !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: var(--chrome-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--chrome-control) !important;
  text-underline-offset: 0.2em;
  color: var(--chrome-mut) !important;
  opacity: 1 !important;
  cursor: pointer;
}
html:root body .public-page-meta a.feedback-link::before,
html:root body .public-page-meta a.feedback-link::after {
  content: none !important;
}
html:root body .public-page-meta button.auto-refresh-toggle::before {
  content: "· ";
  display: inline-block;
  padding-inline-end: 0.35em;
  text-decoration: none;
}
html:root body .public-page-meta a.feedback-link:hover,
html:root body .public-page-meta button.auto-refresh-toggle:hover {
  color: var(--chrome-fg) !important;
}
html:root body .public-page-meta :is(a, button):focus-visible {
  outline: 2px solid var(--chrome-fg) !important;
  outline-offset: 2px !important;
}
html:root body .public-page-meta button.auto-refresh-toggle[aria-pressed="false"] {
  font-weight: 600 !important;
  color: var(--chrome-fg) !important;
}
/* Alarivi ja alapalkki ovat yksi kokonaisuus: väli pieneksi. */
html:root body:has(.public-page-meta) .site-main.wrap { padding-bottom: 14px !important; }
html:root body:has(.public-page-meta) .site-foot:has(a.powered-by-turnauspolku) {
  margin-top: 0 !important;
}
@media print {
  html:root body .public-page-meta { display: none !important; }
}

/* ---------------------------------------------------------------------------
   JULKISEN SIVUN VÄLILEHDET — kaikilla julkisilla sivuilla
   Ennen: pillerit reunustetussa laatikossa.
   Nyt: alleviivatut välilehdet, kuten Base44:n ehdotuksessa.
   Aktiivisen välilehden viiva on SEURAN aksentti (var(--accent)), ei meidän.
   Rivi RIVITTYY kapealla ruudulla eikä vieri sivusuunnassa: se on IA-erän
   5.9.2026 päätös (e2e/mobile.spec.ts, TUR-116), koska vierivässä rivissä
   osa välilehdistä jäi näkymättömiin. Jokaisella välilehdellä on siksi oma
   ohut alaviivansa, jotta myös ylempi rivi näyttää välilehtiriviltä.
   ------------------------------------------------------------------------ */
html:root body[class*="page-public-"] .public-shell .public-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch;
  gap: 0 2px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: inset 0 -1px 0 var(--line) !important;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html:root body[class*="page-public-"] .public-shell .public-tabs::before,
html:root body[class*="page-public-"] .public-shell .public-tabs::after {
  content: none !important;
}
html:root body[class*="page-public-"] .public-shell .public-tabs .public-tab {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  min-height: 46px;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: inset 0 -1px 0 var(--line) !important;
  font-family: var(--chrome-text) !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
  color: var(--mut) !important;
}
html:root body[class*="page-public-"] .public-shell .public-tabs .public-tab:first-child {
  padding-inline-start: 2px !important;
}
html:root body[class*="page-public-"] .public-shell .public-tabs .public-tab:hover {
  color: var(--fg) !important;
  box-shadow: inset 0 -3px 0 var(--mut) !important;
}
html:root body[class*="page-public-"] .public-shell .public-tabs .public-tab.is-active {
  color: var(--fg) !important;
  box-shadow: inset 0 -3px 0 var(--accent) !important;
}
html:root body[class*="page-public-"] .public-shell .public-tabs .public-tab:focus-visible {
  outline: 2px solid var(--fg) !important;
  outline-offset: -2px !important;
}
/* Mikael 30.9.2026: "miksi sivu liikkuu kokoajan?" Välilehti vierittää
   navin kohdalle (#public-tabs, scroll-margin-top 72 px), mutta lyhyellä
   välilehdellä (Sarjat, Kirjautuminen) sivu loppui ennen kuin navi ehti
   ylös → navi jäi 72–365 px:n väliin välilehdestä riippuen (mitattu 1280 ja
   390 px). Vähimmäiskorkeus pitää navin aina samassa kohdassa. */
html:root body.page-public-tournament .public-tab-content {
  min-height: calc(100vh - 72px);
}

/* Julkisen joukkuesivun pelaajalista (Mikael 30.9.2026: "En oikein tykkää
   tämän pelaajalistan ulkoasusta ja fonteista"). Ennen admin-taulukko:
   nimet oikeassa reunassa kaukana numeroista, sininen 750–950-lihavointi ja
   🃏-emoji. Nyt pelinumero + nimi vierekkäin, tavallinen tumma teksti, koko
   rivi linkkinä ja leveällä näytöllä usea sarake. */
html:root body .team-roster .roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  column-gap: 1.5rem;
}
html:root body .team-roster .roster-list > li {
  margin: 0;
  padding: 0;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}
html:root body .team-roster .roster-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.2rem;
  color: var(--fg) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
html:root body .team-roster .roster-num {
  flex: 0 0 2.3rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft, var(--panel));
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html:root body .team-roster .roster-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
html:root body .team-roster .roster-card {
  flex: 0 0 auto;
  color: var(--mut);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}
html:root body .team-roster .roster-player:hover .roster-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html:root body .team-roster .roster-player:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   JULKISEN SIVUN OLETUSILME — seura EI ole valinnut väriä eikä ladannut
   banneria ([data-default-background] tai [data-default-look],
   public_brand.ts). Logo saa olla ladattu.
   Mikael 29.9.2026: "Turnaussivustot eivät ole automaattisesti visuaalisesti
   kivannäköisiä, eikä edes tyydyttäviä." Mikael 12.9.2026: perusversion pitää
   olla hieno, ja keinot ovat typografia, tyhjä tila ja rytmi, EI laatikot.
   Ennen: raidoitettu nauha + tumma laatikko jossa eri pyöristys ylä- ja
   alakulmissa. Nyt: seuran nimi, ohut viiva, iso otsikko sivun omalla
   pohjalla. Väri tulee vain aksentista (laji, tila, painike, välilehti).
   Seuran valitsema väri tai banneri ohittaa tämän kokonaan.
   ------------------------------------------------------------------------ */
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand.is-club {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-club[data-default-background] {
  min-height: 76px !important;
  margin: 0 !important;
  padding-block: 12px !important;
  padding-inline-start: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
  box-shadow: none !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-club-crest.is-initials {
  width: 40px;
  height: 40px;
  border-radius: 4px !important;
  background: var(--accent) !important;
  font-family: var(--chrome-text);
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--accent-ink, #fff) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-club-name {
  font-family: var(--chrome-text);
  font-size: 17px !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  color: var(--fg) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-club-tagline {
  color: var(--mut) !important;
}

html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero {
  margin: 0 !important;
  padding: 30px 0 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fg) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero::before,
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero::after {
  content: none !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero .pub-eyebrow {
  display: block;
  width: auto;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-family: var(--chrome-text);
  font-size: 12px !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--accent) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero h1 {
  max-width: 22ch;
  margin: 0 0 14px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-stretch: normal !important;
  font-size: clamp(30px, 4.8vw, 48px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
  color: var(--fg) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero .hero-text {
  max-width: 62ch;
  margin: 0 0 12px !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--fg) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero .mut,
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero .registration-deadline {
  margin: 0 !important;
  font-family: var(--chrome-text);
  font-size: 15px !important;
  font-weight: 500 !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  color: var(--mut) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero a:not(.public-cta-register):not(.hero-btn) {
  color: var(--accent) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero .public-cta-register {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-ink, #fff) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .pub-stats {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 48px !important;
  margin: 0 0 18px !important;
  padding: 14px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--fg) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .pub-stats .pub-stat {
  display: grid;
  gap: 2px;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: start !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .pub-stats .pub-stat span {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--mut) !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .pub-stats .pub-stat b {
  font-family: var(--font-heading) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  font-stretch: normal !important;
  line-height: 1 !important;
  color: var(--fg) !important;
}
@media (max-width: 560px) {
  html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-club[data-default-background] {
    min-height: 68px !important;
    padding-inline: 10px 88px !important;
  }
  html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero {
    padding: 22px 10px 18px !important;
  }
  html:root body[class*="page-public-"] .public-shell .public-tabs {
    margin-bottom: 18px !important;
    padding-inline: 8px !important;
  }
  html:root body[class*="page-public-"] .public-shell .public-tabs .public-tab {
    /* Seitsemän välilehteä mahtuu 390 px:llä kahdelle riville (4 + 3),
       kuten ennenkin. Leveämmällä täytteellä rivejä tuli kolme. */
    flex: 1 0 auto;
    justify-content: center;
    min-height: 44px;
    padding: 0 7px !important;
    font-size: 13px !important;
  }
  html:root body[class*="page-public-"] .public-shell .public-tabs .public-tab:first-child {
    padding-inline-start: 7px !important;
  }
  html:root body[class*="page-public-"] .public-shell .public-tabs {
    padding-inline: 4px !important;
  }
}

/* ---------------------------------------------------------------------------
   JULKISEN SIVUN KIELIVALITSIN (.public-lang-dock)
   Ennen: musta varjostettu pilleri joka leijui seuran nauhan päällä.
   Nyt: sama hillitty reunustettu valitsin kuin yläpalkissa.
   ------------------------------------------------------------------------ */
html:root body .public-lang-dock .site-lang { font-family: var(--chrome-text); }
html:root body .public-lang-dock .site-lang > summary {
  border: 1px solid var(--chrome-line) !important;
  border-radius: 2px !important;
  background: var(--chrome-bg) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
  letter-spacing: 0.04em !important;
  color: var(--chrome-fg) !important;
}
html:root body .public-lang-dock .site-lang > summary:hover,
html:root body .public-lang-dock .site-lang[open] > summary {
  border-color: var(--chrome-control) !important;
}
html:root body .public-lang-dock .site-lang > summary:focus-visible {
  outline: 2px solid var(--chrome-fg) !important;
  outline-offset: 2px !important;
}
html:root body .public-lang-dock .site-lang-menu {
  border: 1px solid var(--chrome-line) !important;
  border-radius: 2px !important;
  background: var(--chrome-bg) !important;
  box-shadow: 0 12px 32px var(--chrome-shadow) !important;
}
html:root body .public-lang-dock .site-lang-menu a.site-lang-link {
  border-radius: 0 !important;
  font-weight: 500 !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  color: var(--chrome-fg) !important;
}
html:root body .public-lang-dock .site-lang-menu a.site-lang-link:hover {
  background: var(--chrome-hover) !important;
  text-decoration: none !important;
}
html:root body .public-lang-dock a:not(.site-lang-link) {
  font-family: var(--chrome-text);
  font-stretch: normal !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------------------
   TUNNUSLUVUT (.pub-stats) JA OTSIKKOLOHKON KULMAT — kaikilla julkisilla
   sivuilla. Ennen: värillinen otsikkolohko jonka yläkulmat olivat pyöreät ja
   alakulmat kulmikkaat, ja sen alla irrallinen musta laatikko. Nyt:
   otsikkolohko on yksi ehjä pinta ja luvut ovat kevyt rivi sen alla.
   ------------------------------------------------------------------------ */
html:root body[class*="page-public-"] .public-shell .public-hero {
  border-radius: 12px !important;
}
html:root body[class*="page-public-"] .public-shell .pub-stats {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 48px !important;
  margin: 0 0 14px !important;
  padding: 16px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--fg) !important;
}
html:root body[class*="page-public-"] .public-shell .pub-stats .pub-stat {
  flex: 0 0 auto !important;
  display: grid;
  gap: 3px;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: start !important;
}
html:root body[class*="page-public-"] .public-shell .pub-stats .pub-stat span {
  font-family: var(--chrome-text);
  font-size: 12px !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--mut) !important;
}
html:root body[class*="page-public-"] .public-shell .pub-stats .pub-stat b {
  font-family: var(--font-heading) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  font-stretch: normal !important;
  line-height: 1 !important;
  color: var(--fg) !important;
}
/* Oletusilmeessä otsikkolohkolla ei ole pintaa, joten ei pyöristystäkään. */
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero {
  border-radius: 0 !important;
}
html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .pub-stats {
  border-top: 1px solid var(--line) !important;
  padding-inline: 0 !important;
}

@media (max-width: 560px) {
  /* Kenttäpiirros ei mahdu puhelimessa kielivalitsimen viereen peittämättä
     seuran nimeä. Se on koriste, joten se väistyy. */
  html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-court {
    display: none !important;
  }
  html:root body[class*="page-public-"] .public-shell .pub-stats {
    gap: 8px 32px !important;
    padding-inline: 10px !important;
  }
}

/* ---------------------------------------------------------------------------
   SIVUT JOILLA KEHYSTÄ EI OLE
   Ottelu-ruudukko ja TV-näyttö ovat koko ruudun näkymiä ja piilottavat ylä-
   ja alapalkin (data/custom.css, app.css). Ylempänä oleva `display: grid`
   toi alapalkin niille takaisin ja vei ruudukolta 33 px korkeutta
   (e2e/grid-usability.spec.ts). Piilotus toistetaan tässä, koska tämä
   tiedosto voittaa aiemmat.
   ------------------------------------------------------------------------ */
html:root body:is(.page-display, .page-tournament-grid) :is(.site-top, .site-foot) {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   KELLUVA TUKIPAINIKE JA ALAPALKKI
   Yli 1240 px:n ruudulla "Apua?"-painike kelluu oikeassa alakulmassa. Uusi
   alapalkki on koko ruudun levyinen, joten sen oikean reunan linkit jäivät
   painikkeen alle sivun lopussa (e2e/support-public-reflow.spec.ts).
   Alapalkin alle varataan painikkeen korkuinen tila.
   ------------------------------------------------------------------------ */
@media (min-width: 1241px) {
  html:root body .site-foot { padding-bottom: 84px !important; }
  html:root body .site-foot:has(a.powered-by-turnauspolku) { padding-bottom: 84px !important; }
}

/* ---------------------------------------------------------------------------
   MATALA RUUTU (200 % zoomaus, 720 x 450)
   Otsikko ja tunnusluvut saavat viedä enintään 70 % ruudusta
   (e2e/hero-fold.spec.ts, TUR-185), jotta sisältö alkaa näkyä heti.
   ------------------------------------------------------------------------ */
@media (max-height: 560px) {
  html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-club[data-default-background] {
    min-height: 56px !important;
    padding-block: 8px !important;
  }
  html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-court {
    height: 40px !important;
    width: 82px !important;
  }
  html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero {
    padding: 16px 0 10px !important;
  }
  html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero .pub-eyebrow {
    margin-bottom: 6px !important;
  }
  html:root body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-hero h1 {
    margin-bottom: 8px !important;
    font-size: 28px !important;
  }
  html:root body[class*="page-public-"] .public-shell .public-hero {
    margin-bottom: 0 !important;
  }
  html:root body[class*="page-public-"] .public-shell .pub-stats {
    margin: 0 0 6px !important;
    padding-block: 8px 6px !important;
  }
  html:root body[class*="page-public-"] .public-shell .pub-stats .pub-stat {
    gap: 0;
  }
  html:root body[class*="page-public-"] .public-shell .pub-stats .pub-stat span {
    font-size: 11px !important;
  }
  html:root body[class*="page-public-"] .public-shell .pub-stats .pub-stat b {
    font-size: 20px !important;
  }
}

/* ---------------------------------------------------------------------------
   KIRJAUTUNUT KATSOJA JULKISELLA SIVULLA (30.9.2026, tuotannosta todettu)
   Paikallinen katselu tehtiin kirjautumatta, joten kaksi asiaa jäi näkemättä:
   1. Alapalkin näkymä- ja teema-asetukset olivat samassa ruudukon solussa
      päällekkäin.
   2. "Turnauksen hallintaan" -paluulinkki oli yhä musta pilleri ja peitti
      kenttäpiirroksen.
   ------------------------------------------------------------------------ */
html:root body .site-foot:has(a.powered-by-turnauspolku) .density-toggle {
  grid-row: 3;
  grid-column: 1;
  justify-self: start;
  padding-inline-start: 0;
}
html:root body .site-foot:has(a.powered-by-turnauspolku) .density-toggle.theme-toggle {
  grid-row: 3;
  grid-column: 2;
  justify-self: end;
}
@media (max-width: 860px) {
  html:root body .site-foot:has(a.powered-by-turnauspolku) .density-toggle {
    grid-row: 4;
    grid-column: 1;
  }
  html:root body .site-foot:has(a.powered-by-turnauspolku) .density-toggle.theme-toggle {
    grid-row: 5;
    grid-column: 1;
    justify-self: start;
  }
}

html:root body .public-lang-dock a.public-admin-back {
  border: 1px solid var(--chrome-line) !important;
  border-radius: 2px !important;
  background: var(--chrome-bg) !important;
  box-shadow: none !important;
  font-family: var(--chrome-text) !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  color: var(--chrome-fg) !important;
}
html:root body .public-lang-dock a.public-admin-back:hover {
  border-color: var(--chrome-control) !important;
}
html:root body .public-lang-dock a.public-admin-back:focus-visible {
  outline: 2px solid var(--chrome-fg) !important;
  outline-offset: 2px !important;
}
/* Paluulinkki leventää telakkaa kenttäpiirroksen päälle. Piirros on koriste,
   joten se väistyy järjestäjän omassa näkymässä. */
html:root body .site-main:has(.public-lang-dock a.public-admin-back) .public-brand-court {
  display: none !important;
}
@media (max-width: 560px) {
  /* Puhelimessa paluulinkki + kielivalitsin ovat yhdessä niin leveät, että
     ne peittivät seuran nimen. Järjestäjän omassa näkymässä telakka on siksi
     omalla rivillään nauhan yläpuolella eikä sen päällä. */
  html:root body .site-main:has(.public-lang-dock a.public-admin-back) .public-lang-dock {
    height: auto !important;
    position: static !important;
  }
  html:root body .site-main:has(.public-lang-dock a.public-admin-back) .public-lang-dock-inner {
    position: static !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 0;
  }
  html:root body .site-main:has(.public-lang-dock a.public-admin-back) .public-brand-club[data-default-background] {
    padding-inline-end: 10px !important;
  }
}

/* ---------------------------------------------------------------------------
   OLETUSILME KUN SEURALLA ON LOGO (30.9.2026, Nuta Cup)
   Pelkkä logo ilman valittua väriä: logo seisoo sivun omalla pohjalla ohuen
   viivan yläpuolella, ei sävytetyssä laatikossa.
   ------------------------------------------------------------------------ */
html:root body[class*="page-public-"] .public-shell .public-brand-standalone[data-default-look] {
  min-height: 76px;
  margin: 0 !important;
  padding: 12px 96px 12px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html:root body[class*="page-public-"] .public-shell .public-brand-standalone[data-default-look] img {
  display: block;
  width: auto;
  max-width: min(100%, 260px);
  height: auto;
  max-height: 84px;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
@media (max-width: 560px) {
  html:root body[class*="page-public-"] .public-shell .public-brand-standalone[data-default-look] {
    padding-inline: 10px 88px !important;
  }
  html:root body[class*="page-public-"] .public-shell .public-brand-standalone[data-default-look] img {
    max-height: 64px;
  }
}

/* ---------------------------------------------------------------------------
   ILMOITTAUTUMISSIVU TURNAUSSIVUSTON KEHYKSESSÄ (30.9.2026)
   Kehys on sivun levyinen kuten pääsivulla. Lomake pysyy kapeana sen alla.
   ------------------------------------------------------------------------ */
html:root body.page-public-register .public-shell.public-register-frame {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
html:root body.page-public-register .public-register-frame .public-subpage-tournament {
  margin: 18px 0 10px !important;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  font-stretch: normal;
  letter-spacing: -0.01em;
}
html:root body.page-public-register .public-register-frame .public-subpage-tournament a {
  text-decoration: none !important;
  color: var(--fg) !important;
}
html:root body.page-public-register .public-register-frame .public-tabs {
  margin-bottom: 22px !important;
}

/* ---------------------------------------------------------------------------
   NÄKYMÄ TIIVIS / LAAJA EI KUULU TURNAUSSIVULLE
   Mikael 30.9.2026: "en oikein ymmärrä mitä varten tuo on mukana
   turnaussivulla." Asetus tiivistää hallinnan taulukoita, eikä sillä ole
   julkisella sivulla tehtävää. Teemavalinta jää.
   ------------------------------------------------------------------------ */
html:root body .site-foot:has(a.powered-by-turnauspolku) .density-toggle:not(.theme-toggle) {
  display: none !important;
}
html:root body .site-foot:has(a.powered-by-turnauspolku) .density-toggle.theme-toggle {
  grid-row: 3;
  grid-column: 1;
  justify-self: start;
}
@media (max-width: 860px) {
  html:root body .site-foot:has(a.powered-by-turnauspolku) .density-toggle.theme-toggle {
    grid-row: 4;
  }
}

/* "Katso mukana olevat joukkueet" -rivi on DOM:ssa heti faktarivin jälkeen,
   mutta data/custom.css:n alasivusääntö (TUR-207: `.public-shell > p
   { order: 6 }`) osui myös siihen, koska se on <p>. Rivi putosi sivun
   loppuun päivitysrivin ja alapalkin väliin (Kartano, 30.9.2026).
   Julkisen etusivun lohkoilla ei saa olla order-arvoa
   (e2e/display-order.spec.ts), joten järjestys palautetaan DOM-järjestykseksi. */
html:root body .public-shell > .public-registered-preview {
  order: 0 !important;
}

/* Audit 30.9.2026 (P2): yhdestä pitkästä sanasta koostuva turnauksen nimi
   ("Kaupunginosajalkapallomestaruusturnaus2026") levitti yläosan ruudukon
   ainoan sarakkeen sanan levyiseksi (690 px 320 px:n näytöllä), ja
   overflow:hidden leikkasi otsikon ja "Ilmoittautuminen auki" -merkin.
   Sarake saa kutistua näkymän levyiseksi ja otsikko rivittyy sanan sisältä. */
html:root body[class*="page-public-"] .public-shell .public-hero {
  grid-template-columns: minmax(0, 1fr);
}
html:root body[class*="page-public-"] .public-shell .public-hero h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Audit 30.9.2026 (P2): "Ilmoittautuminen auki" -merkki. Vaaleassa teemassa
   valkoinen #1d8a4b-taustalla oli 4,38:1 (11,7 px:n tekstille vaaditaan
   4,5:1) → #177a41 (5,39:1). Tummassa teemassa yleinen tilamerkkien
   sääntö (html.theme-dark .pill.status-open) vaihtoi tekstin vaaleanvihreäksi
   saman kiinteän taustan päällä (2,27:1); yläosan merkki pitää valkoisen. */
html:root body.page-public-tournament .public-shell .public-hero .pill.status-open {
  background: #177a41 !important;
  color: #fff !important;
}

/* Audit 30.9.2026 (P2): seuran alkukirjainlogo tummassa teemassa. Tumman
   teeman vaaleampi aksentti valkoisella tekstillä jäi 3,22:1:een; tumma
   teksti vaaleammalla aksentilla. */
html.theme-dark body[class*="page-public-"] .public-shell:has([data-default-background], [data-default-look]) .public-brand-club-crest.is-initials {
  color: #0b0f0c !important;
}