:root {
  /* ShowOffice-branden, tagen från showoffice.se. */
  --navy:#343851; --navy-dark:#282a40;
  --crimson:#920330; --crimson-hover:#7a0228;
  --teal:#1fa5a3; --teal-dark:#178886; --teal-50:#e4f4f3; --teal-line:#bfe6e4;
  --cream:#EBEAE0; --sida:#f8f9fa; --danger:#A32D2D;
  /* Ljust innehåll — alias så att befintlig CSS ärver branden utan att röras. */
  --ram:#e5e6e9; --dov:#5f6167; --bg:#ffffff; --text:#2b2c30;
  --hover:#f3f4f6; --strak:var(--crimson); --ochre:#b8860b;
}
* { box-sizing:border-box; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px;
          background:var(--navy); padding:14px max(20px, calc((100% - 960px) / 2)); }
.topbar-brand img { height:24px; width:auto; display:block; filter:brightness(0) invert(1); }
.topbar-login { font-size:13px; font-weight:600; text-decoration:none; color:#F1F1F1;
                background:var(--crimson); border-radius:999px; padding:8px 18px;
                white-space:nowrap; }
.topbar-login:hover { background:var(--crimson-hover); }
/* Navigering i topbaren på arbetsvyn (inloggad) */
.topbar-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.topbar-lank { font:inherit; font-size:13px; font-weight:600; text-decoration:none;
               color:#F1F1F1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
               border-radius:999px; padding:8px 15px; white-space:nowrap; cursor:pointer;
               transition:background .14s, border-color .14s; }
.topbar-lank:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); }
.topbar-lank.stark { background:var(--crimson); border-color:var(--crimson); }
.topbar-lank.stark:hover { background:var(--crimson-hover); border-color:var(--crimson-hover); }
body { margin:0; font:15px/1.5 "Manrope",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
       color:var(--text); background:var(--sida); }
main { max-width:960px; margin:0 auto; padding:32px 20px 80px; }
h1, h2, h3, .hero h1, .kort2-namn, .namn, .brand {
  font-family:"Oswald",-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-weight:600; letter-spacing:.01em; }
h1 { font-size:24px; margin:0 0 4px; }
h2 { font-size:17px; margin:36px 0 2px; padding-bottom:4px; border-bottom:2px solid var(--navy); }
.pdfar { float:right; display:flex; gap:6px; }
.pdf { font-size:12px; font-weight:400; color:var(--dov);
          text-decoration:none; border:1px solid var(--ram); border-radius:5px;
          padding:2px 9px; background:#fff; }
.pdf:hover { background:var(--hover); color:var(--text); }
h3 { font-size:14px; margin:22px 0 6px; }
.dov { color:var(--dov); font-size:13px; }
a { color:inherit; }

.kort { display:block; border:1px solid var(--ram); border-radius:6px;
        padding:12px 14px; margin:8px 0; text-decoration:none; color:inherit; }
a.kort:hover { background:var(--hover); border-color:#bbb; }
.namn { font-weight:600; }
.text { font-size:13px; color:var(--dov); margin-top:2px; }

/* ---------------------------------------------------- publika landningen */
.hero { margin:20px 0 26px; padding-bottom:20px; border-bottom:1px solid var(--ram); }
.kicker { display:inline-flex; align-items:center; gap:9px; margin:0 0 12px;
          font-family:"Oswald",sans-serif; font-size:12px; font-weight:600;
          letter-spacing:.16em; text-transform:uppercase; color:var(--teal-dark); }
.kicker::before { content:""; width:24px; height:2px; background:var(--teal); }
.hero h1 { font-size:46px; line-height:1.0; margin:0; letter-spacing:-.01em; }

/* Brand-huvud på ställningssidan. */
.serie-header { display:flex; align-items:center; gap:18px; margin:14px 0 8px;
                padding-bottom:20px; border-bottom:1px solid var(--ram); }
.serie-mark { flex:0 0 auto; width:76px; height:76px; border-radius:16px; background:var(--mark, var(--accent));
              border:1px solid rgba(0,0,0,.07);
              display:flex; align-items:center; justify-content:center; }
.serie-mark .grupp-mono { font-size:24px; }
.serie-mark img { max-width:100%; max-height:54px; }
.serie-header h1 { font-size:30px; line-height:1.06; margin:0; }
.serie-header .kicker { margin:0 0 6px; }
.serie-meta { font-size:13px; color:var(--dov); margin-top:8px; }
.hero .dov { font-size:15px; max-width:600px; margin:10px 0 0; line-height:1.55; }
@media (max-width:600px) { .hero h1 { font-size:32px; } }

/* -------------------------------------------------------------- mobil */
@media (max-width:640px) {
  main { padding:20px 14px 64px; }
  /* Ställningstabellen: visa bara #, Ryttare, Totalt — resten i utfällningen.
     (.omgkol = tabellens omgångskolumner, inte .omg-blocken i utfällningen.) */
  .klubb, .omgkol { display:none; }
  th, td { padding:9px 8px; }
  /* Brand-huvudet på ställningssidan */
  .serie-header { gap:13px; padding-bottom:16px; }
  .serie-mark { width:58px; height:58px; border-radius:12px; }
  .serie-mark .grupp-mono { font-size:18px; }
  .serie-header h1 { font-size:22px; }
  .serie-meta { font-size:12.5px; }
  /* Grupp-/seriekort */
  .grupp-mark { flex-basis:88px; }
  .grupp-mono { font-size:26px; }
  .grupp-namn { font-size:17px; }
  /* PDF-knapparna under rubriken i stället för trängda bredvid */
  h2 .pdfar { float:none; display:flex; margin-top:8px; }
  /* Utfällningen: på smal skärm blir tre kolumner för trångt. Varje moment blir
     i stället ett block — namn + poäng på en rad, detaljtexten under i dämpad
     färg — så det går att skanna i stället för att brytas mitt i meningen. */
  .utrakning { padding:10px 12px 12px 14px; }
  .omgnamn { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .omgpoang { float:none; white-space:nowrap; }
  .utrakning .steg { display:grid; grid-template-columns:1fr auto; column-gap:10px;
          padding:7px 0; border-bottom:1px solid var(--ram); }
  .utrakning .steg:last-of-type { border-bottom:none; }
  .utrakning .stegnamn { flex:none; grid-column:1; grid-row:1; color:var(--text); font-weight:600; }
  .utrakning .stegpoang { flex:none; grid-column:2; grid-row:1; }
  .utrakning .stegtext { grid-column:1 / -1; grid-row:2; color:var(--dov);
          font-size:12.5px; margin-top:1px; }
}
.kortgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.sasong-sektion { margin:22px 0 8px; }
.sasong-rubrik { font-size:15px; font-weight:700; color:var(--text); margin:0 0 12px;
                 padding-bottom:8px; border-bottom:1px solid var(--ram); }
.del { margin:14px 0 4px; }
.del-rubrik { display:inline-flex; align-items:center; font-size:13px; font-weight:800;
              letter-spacing:.09em; text-transform:uppercase; color:#fff;
              background:color-mix(in srgb, var(--accent, var(--teal)) 86%, #000);
              padding:6px 14px; border-radius:999px;
              margin:0 0 12px; box-shadow:0 2px 8px rgba(44,44,42,.14); }
.kort2 { position:relative; display:flex; flex-direction:column; gap:8px; border:1px solid var(--ram);
         border-radius:10px; padding:16px 18px; text-decoration:none; color:inherit;
         background:var(--bg); transition:border-color .12s, box-shadow .12s, transform .12s; }
.kort2:hover { border-color:#c7c9d0; box-shadow:0 6px 20px rgba(44,44,42,.10); transform:translateY(-2px); }
.kort2-topp { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.kort2-huvud { display:flex; align-items:center; gap:12px; min-width:0; }
.monogram { display:inline-flex; align-items:center; justify-content:center;
            width:40px; height:40px; border-radius:9px; color:#fff; flex:0 0 auto;
            font-family:"Oswald",sans-serif; font-weight:600; font-size:13px; letter-spacing:.03em; }
.kort2-namn { font-weight:600; font-size:16px; }
.badge { font-size:12px; color:var(--dov); border:1px solid var(--ram);
         border-radius:20px; padding:2px 10px; white-space:nowrap; }
.kort2-text { font-size:13px; color:var(--dov); }
.kort2-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; align-items:baseline; }
.kort2-meta b { font-weight:600; }
.status { font-size:12.5px; color:var(--dov); white-space:nowrap; }
.status.live { color:var(--strak); font-weight:600; }
/* Grön "online"-markering när en klass i sammanräkningen rids just nu. */
.online { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
          color:var(--teal-dark); background:var(--teal-50); border:1px solid var(--teal-line);
          border-radius:20px; padding:2px 10px; white-space:nowrap; }
.online .prick { width:7px; height:7px; border-radius:50%; background:var(--teal);
                 animation:pulsa 1.6s ease-in-out infinite; }
.online-banner { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
                 color:var(--teal-dark); background:var(--teal-50); border:1px solid var(--teal-line);
                 border-radius:8px; padding:9px 13px; margin:12px 0; }
.online-banner .prick { width:8px; height:8px; border-radius:50%; background:var(--teal);
                        animation:pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.livestamp { font-size:12px; color:var(--dov); margin:-6px 0 12px; }
.kort2-pilrad { display:flex; justify-content:flex-end; margin-top:2px; }
.kort2-pil { width:34px; height:34px; border-radius:50%; color:#fff; display:inline-flex;
             align-items:center; justify-content:center; font-size:16px; line-height:1;
             transition:transform .12s, filter .12s; }
.kort2:hover .kort2-pil { transform:translateX(3px); filter:brightness(1.1); }

/* Gruppkort — stor brand-ruta (logga/monogram) i full höjd, namn & innehåll till höger. */
.kort-grupp { display:flex; align-items:stretch; overflow:hidden; max-width:540px;
              border:1px solid var(--ram); border-radius:16px; background:var(--bg);
              text-decoration:none; color:inherit;
              transition:box-shadow .15s, transform .15s, border-color .15s; }
.kort-grupp:hover { box-shadow:0 12px 32px rgba(44,44,42,.14); transform:translateY(-2px);
                    border-color:#c7c9d0; }
.grupp-mark { flex:0 0 118px; background:var(--mark, var(--accent)); display:flex; align-items:center;
              justify-content:center; padding:14px; }
.grupp-mono { font-family:"Oswald",sans-serif; font-weight:600; color:#fff; font-size:32px; letter-spacing:.04em; }
.grupp-mark img { max-width:100%; max-height:90px; display:block; }
.grupp-innehall { flex:1 1 auto; min-width:0; padding:18px 20px; display:flex;
                  flex-direction:column; justify-content:center; gap:6px; }
.grupp-topp { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.grupp-namn { font-family:"Oswald",sans-serif; font-weight:600; font-size:20px; line-height:1.12; }
.grupp-under { font-size:13px; color:var(--dov); }
.nasta { font-size:13px; color:var(--dov); }
.nasta b { color:var(--text); font-weight:600; }
.nasta .sedan { font-size:12px; opacity:.8; }
.regler { margin-top:28px; }
.regler-lista { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
                gap:12px; margin-top:14px; }
.regel-lank { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text);
              border:1px solid var(--ram); border-radius:14px; padding:14px 16px; background:var(--bg);
              transition:border-color .14s, box-shadow .14s, transform .14s; }
.regel-lank:hover { border-color:var(--accent); box-shadow:0 6px 20px rgba(44,44,42,.10);
                    transform:translateY(-1px); }
.regel-ikon { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
              font-family:"Oswald",sans-serif; font-weight:600; font-size:12px; letter-spacing:.04em;
              color:#fff; background:var(--danger); border-radius:9px; width:44px; height:44px; }
.regel-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.regel-namn { font-size:14px; font-weight:600; line-height:1.25; }
.regel-under { font-size:11.5px; color:var(--dov); }
.regel-pil { margin-left:auto; flex:0 0 auto; color:var(--accent); font-size:18px; font-weight:600;
             transition:transform .14s; }
.regel-lank:hover .regel-pil { transform:translateX(3px); }
.grupp-botten { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.grupp-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.serie-chip { font-size:12px; font-weight:600; color:var(--accent);
              background:color-mix(in srgb, var(--accent) 10%, #fff);
              border:1px solid color-mix(in srgb, var(--accent) 26%, #fff);
              border-radius:20px; padding:3px 11px; }
/* Pilen är samma på alla kort — fast navy, inte märkesfärg. Annars blir den
   osynlig på tävlingar med ljus logga (t.ex. vit bakgrund). */
.grupp-pil { flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--navy);
             color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:16px;
             transition:transform .15s, filter .15s; }
.kort-grupp:hover .grupp-pil { transform:translateX(3px); filter:brightness(1.1); }
/* Dold sammanställning: tonas ned på hubben så den syns men känns avstängd. */
.kort-grupp.ar-dold { opacity:.62; border-style:dashed; }
.kort-grupp.ar-dold:hover { opacity:1; }
.badge-dold { color:var(--dov); border-color:var(--ram); background:var(--hover);
              font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:.04em;
              text-transform:uppercase; }

/* Hubben som tabell: en grupprad per tävlingsserie följd av en rad per
   sammanställning. Grupprad har logga, namn och åtgärder; radraden är klickbar. */
.hubbtabell { width:100%; border-collapse:separate; border-spacing:0; }
.hubbtabell th { white-space:nowrap; }
/* Serien ramas in: rubrikraden får tonad bakgrund och en färgstapel i
   märkesfärgen, sammanställningsraderna sitter tydligt under den. */
.hubbtabell .hgrupp > td { padding:0; border-bottom:none; }
.hgrupp-rad { display:flex; align-items:center; gap:12px; padding:12px 14px;
              margin-top:18px; background:var(--hover); border:1px solid var(--ram);
              border-left:4px solid var(--accent); border-radius:10px 10px 0 0; }
.hubbtabell tbody tr:first-child .hgrupp-rad { margin-top:4px; }
.hubbtabell .hrad td { background:var(--bg); border-bottom:1px solid var(--ram); vertical-align:middle; }
.hubbtabell .hrad td:first-child { border-left:1px solid var(--ram); }
.hubbtabell .hrad td.hpil { border-right:1px solid var(--ram); }
/* Sista raden i en serie rundar av nederkanten så rubrik + rader blir ett kort. */
.hubbtabell .hrad.hsist td:first-child { border-bottom-left-radius:10px; }
.hubbtabell .hrad.hsist td.hpil { border-bottom-right-radius:10px; }
.hubbtabell .hrad.tom.hsist td { border-right:1px solid var(--ram); border-radius:0 0 10px 10px; }
.hgrupp-mark { flex:0 0 40px; width:40px; height:40px; border-radius:9px; background:var(--mark, var(--accent));
               border:1px solid rgba(0,0,0,.07);
               display:flex; align-items:center; justify-content:center; padding:5px; overflow:hidden; }
.hgrupp-mark img { max-width:100%; max-height:100%; display:block; }
.hgrupp-mark .grupp-mono { font-size:15px; }
.hgrupp-titel { display:flex; flex-direction:column; gap:1px; min-width:0; }
.hgrupp-namn { font-family:"Oswald",sans-serif; font-weight:600; font-size:18px; line-height:1.1; }
.hgrupp-atg { margin-left:auto; display:flex; gap:8px; flex:0 0 auto; }
.hubbtabell .hrad { cursor:pointer; }
.hubbtabell .hrad:hover td { background:var(--hover); }
.hubbtabell .hnamn span:first-child { font-weight:600; }
/* Inte display:flex på td — det tar cellen ur tabell-layouten så den inte blir
   lika hög som de andra (2-radig "Nästa"). Namn + badge ligger inline i stället. */
.hubbtabell .hnamn > * { vertical-align:middle; }
.hubbtabell .hnamn > * + * { margin-left:8px; }
.hubbtabell .hnasta { color:var(--dov); font-size:13px; }
.hubbtabell .hnasta b { color:var(--text); font-weight:600; }
.hubbtabell .hpil { text-align:right; color:var(--navy); width:1%; }
.hubbtabell .hrad.ar-dold td { opacity:.55; }
.hubbtabell .hrad.ar-dold:hover td { opacity:1; }
.hubbtabell .hrad.tom td { color:var(--dov); font-size:13px; cursor:default; }
.hubbtabell .hrad.tom:hover td { background:none; }
.knapp-liten { flex:0 0 auto; white-space:nowrap; font-size:13px; font-weight:600;
               color:var(--navy); text-decoration:none; border:1px solid var(--ram);
               border-radius:20px; padding:7px 15px; cursor:pointer; background:var(--bg);
               transition:border-color .14s, color .14s, background .14s; }
.knapp-liten:hover { border-color:var(--navy); background:var(--navy); color:#fff; }
.knapp-liten.stark { background:var(--crimson); border-color:var(--crimson); color:#fff; }
.knapp-liten.stark:hover { background:var(--crimson-hover); border-color:var(--crimson-hover); }
.tomstate { margin-top:22px; padding:28px; border:1px dashed var(--ram); border-radius:14px;
            background:var(--bg); }
.tomstate p { margin:0 0 6px; }
/* Ledar-stat på serie-korten. */
.serie-ledare { margin:2px 0; }
.serie-ledare-etikett { display:block; font-size:11px; font-weight:600; letter-spacing:.12em;
                        text-transform:uppercase; color:var(--dov); margin-bottom:2px; }
.serie-ledare-rad { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.serie-ledare-namn { font-weight:700; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.serie-ledare-poang { font-family:"Oswald",sans-serif; font-weight:600; font-size:20px;
                      color:var(--accent); white-space:nowrap; }

.tillbaka { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
            color:var(--text); text-decoration:none; border:1px solid var(--ram);
            border-radius:999px; padding:7px 15px 7px 12px; background:var(--bg);
            margin-bottom:4px; transition:border-color .14s, box-shadow .14s, color .14s; }
.tillbaka:hover { border-color:var(--accent); color:var(--accent);
                  box-shadow:0 3px 12px rgba(44,44,42,.08); }
.tillbaka::before { content:"←"; font-size:15px; line-height:1; color:var(--accent);
                    transition:transform .14s; }
.tillbaka:hover::before { transform:translateX(-2px); }

.rullar { overflow-x:auto; margin:10px 0 4px; }
/* Fyll containern och håll sifferkolumnerna smala — ställningen ska rymmas
   utan sidoscroll även med sex omgångskolumner. */
table { border-collapse:collapse; font-size:14px; white-space:nowrap; width:100%; }
th, td { padding:7px 10px; text-align:left; border-bottom:1px solid #eee; }
th.omgkol, td.omgkol { padding:7px 6px; font-size:13px; }
td.klubb { font-size:13px; }
/* Poängserie-biblioteket: en admintabell, inte en ställning. Poänglistan får
   radbryta så tabellen ryms på bredden i stället för att klippas. */
.bibtabell { white-space:normal; table-layout:fixed; }
.bibtabell td.poang { width:42%; }
.bibtabell td.atgardkol, .bibtabell th:last-child { width:130px; white-space:nowrap; text-align:right; }
th { font-weight:600; font-size:12px; color:var(--navy); text-transform:uppercase;
     letter-spacing:.05em; border-bottom:2px solid var(--navy); }
td.h, th.h { text-align:right; font-variant-numeric:tabular-nums; }
td.tot, th.h:last-child { font-weight:700; color:var(--text); }
.medalj { display:inline-block; width:8px; height:8px; border-radius:50%;
          margin-right:7px; vertical-align:middle; }
.m1 { background:#C9A227; } .m2 { background:#AAB0B6; } .m3 { background:#C08A3E; }
.strakrad td { padding:12px; background:transparent; border:0; }
.strak-inner { display:flex; align-items:center; gap:14px; color:var(--crimson);
               font-family:"Oswald",sans-serif; font-size:11px; font-weight:600;
               letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.strak-inner::before, .strak-inner::after { content:""; flex:1; height:2px;
               background:var(--crimson); border-radius:2px; }
/* Höstfinal-strecket i ockra så det inte förväxlas med totalfinalens (crimson). */
.streck-host .strak-inner { color:var(--ochre); }
.streck-host .strak-inner::before, .streck-host .strak-inner::after { background:var(--ochre); }
.klubb { color:var(--dov); }
.noll { color:#bbb; }
/* Pågående omgång: kolumnen får en * och en not under tabellen om att poängen
   är preliminära (bara ridna klasser räknade). */
.omgkol-pagar { color:var(--ochre); }
.prelstj { color:var(--ochre); font-weight:700; }
.prelnot { margin:0 0 12px; font-size:13px; color:#8a6a12; background:#fdf7e6;
           border-left:3px solid var(--ochre); padding:8px 12px; border-radius:4px; }

tr.rad { cursor:pointer; }
tr.rad:hover td { background:var(--hover); }
.pil { color:var(--dov); font-size:11px; display:inline-block; width:10px; }
tr.utfallt td { background:#fafafa; padding:0; border-bottom:1px solid var(--ram); }
tr.doldt, .doldt { display:none; }
/* Uträkningen är läsning, inte tabell — begränsad bredd så att poängen står
   nära texten i stället för långt ut till höger, luft mellan raderna och en
   tunn linje mellan momenten. */
.utrakning { padding:14px 18px 14px 32px; white-space:normal; max-width:660px; }
.omg { margin:0 0 14px; }
.omgnamn { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
           font-size:13px; font-weight:600; border-bottom:1px solid var(--ram);
           padding-bottom:5px; margin-bottom:4px; }
.omgpoang { font-weight:600; color:var(--text); white-space:nowrap;
            font-variant-numeric:tabular-nums; }
.steg { display:flex; align-items:baseline; gap:12px; font-size:13.5px;
        padding:5px 0; border-bottom:1px solid var(--hover); }
.omg .steg:last-of-type { border-bottom:none; }
.stegnamn { flex:0 0 165px; color:var(--navy); font-weight:600;
            font-family:"Oswald",sans-serif; font-size:12px; letter-spacing:.04em;
            text-transform:uppercase; }
.stegtext { flex:1 1 auto; }
.golvnotis { font-size:12.5px; font-style:italic; color:var(--dov); margin:-2px 0 8px; }
.equipe-lank { color:inherit; text-decoration:none; border-bottom:1px dotted #b7b9c0; }
.equipe-lank:hover { color:var(--teal-dark); border-bottom-color:var(--teal); }
.ror { font-size:11px; font-weight:700; padding:1px 5px; border-radius:6px; margin-left:6px;
       vertical-align:middle; white-space:nowrap; }
.ror.upp { color:#1a7a1a; background:rgba(26,122,26,.12); }
.ror.ned { color:#a12626; background:rgba(161,38,38,.10); }
.ror.ny { color:var(--teal-dark); background:rgba(0,128,128,.12); }
@keyframes radblink { 0% { background:rgba(255,209,102,.55); } 100% { background:transparent; } }
.rad.blink > td { animation:radblink 1.8s ease-out; }
.stegpoang { flex:0 0 52px; text-align:right; font-weight:700; color:var(--teal-dark);
             font-variant-numeric:tabular-nums; }
.steg.tom { color:#aab; }
.steg.tom .stegnamn { color:#aab; }
.steg.tom .stegpoang { font-weight:400; color:#aab; }
.omg.summa { font-size:13.5px; border-top:1px solid var(--ram); padding-top:8px; margin-top:2px; }
.omg.summa b { color:var(--crimson); }
.omg.tiebreak { border-left:3px solid var(--ochre); padding-left:11px; background:#fffdf6;
                border-radius:0 6px 6px 0; }
.omg.tiebreak .omgnamn { color:var(--ochre); border-bottom-color:#eadfbf; }

details { border:1px solid var(--ram); border-radius:6px; padding:8px 12px; margin:8px 0; }
details[open] { background:#fcfcfc; }
summary { cursor:pointer; font-weight:600; font-size:14px; }
/* Deltävlingsraden: titel till vänster, läget (v · status · poäng) till höger.
   Flex med radbrytning så att läget håller ihop och hamnar snyggt under en lång
   titel i stället för att brytas mitt itu. Egen ▸-triangel som appens paneler. */
summary.omgsum { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;
  list-style:none; }
summary.omgsum::-webkit-details-marker { display:none; }
summary.omgsum .omgtitel { flex:1 1 auto; }
/* Triangeln limmas vid titeln (inte som eget flex-barn) så den aldrig hamnar
   ensam på en rad när ett långt namn radbryts. */
summary.omgsum .omgtitel::before { content:"\25B8"; color:var(--dov); font-size:12px;
  display:inline-block; margin-right:8px; transition:transform .15s ease; }
details[open] > summary.omgsum .omgtitel::before { transform:rotate(90deg); }
summary .lage { margin-left:auto; text-align:right; font-weight:400; font-size:12px;
  color:var(--dov); }

/* ---------------------------------------------------- inställningssidan */

.mitten { max-width:420px; margin:0 auto; padding:60px 20px; }
.topp { margin-bottom:22px; }
.topp h1 { margin-top:6px; }
.topp h1 .dov { font-weight:400; font-size:16px; }
.avviker { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px;
           background:#fffbf0; border:1px solid #f0e6c8; border-left:3px solid var(--strak);
           padding:10px 14px; margin-top:10px; border-radius:0 8px 8px 0; }

.panel { border:1px solid var(--ram); border-radius:14px; padding:20px 20px 22px;
         margin:0 0 16px; background:var(--bg); }
.panel > summary { list-style:none; cursor:pointer; }
.panel > summary::-webkit-details-marker { display:none; }
.panel h2 { margin:0; font-family:"Oswald",sans-serif; font-size:16px; font-weight:600;
            display:flex; align-items:baseline; gap:8px; padding-bottom:10px;
            border-bottom:1px solid var(--ram); }
.panel > summary > h2::before { content:"▸"; color:var(--dov); font-size:12px;
            transition:transform .12s; }
.panel[open] > summary > h2::before { transform:rotate(90deg); }
.panel:not([open]) > summary > h2 { border-bottom:none; padding-bottom:0; }
.panel h2 .antal { margin-left:auto; float:none; font-weight:400; color:var(--dov);
                   font-size:13px; font-family:"Manrope",sans-serif; }
.hjalp { font-size:12.5px; color:var(--dov); margin:8px 0 10px; line-height:1.45; }
.hjalp b { color:var(--text); font-weight:600; }

.val { margin:18px 0 4px; }
.val:first-of-type { margin-top:14px; }
.valrubrik { font-size:11px; font-weight:600; font-family:"Oswald",sans-serif;
             letter-spacing:.05em; text-transform:uppercase; color:var(--navy); }
.radiorad { display:flex; gap:10px; align-items:flex-start; font-size:13px;
            border:1px solid var(--ram); border-radius:9px; padding:11px 13px;
            margin:6px 0; cursor:pointer; transition:border-color .12s, background .12s; }
.radiorad:hover { background:var(--hover); }
.radiorad.vald { border-color:var(--navy); background:color-mix(in srgb, var(--navy) 13%, #fff);
                 box-shadow:inset 0 0 0 2px var(--navy); }
.radiorad.vald b { color:var(--navy); }
.radiorad input { margin-top:2px; accent-color:var(--navy); }
.radiorad .hjalp { margin:1px 0 0; }
/* Kryssrad: samma utseende som radiorad, men markerad i crimson (av/på-beslut). */
.kryssrad { display:flex; gap:9px; align-items:flex-start; font-size:13px;
            border:1px solid var(--ram); border-radius:6px; padding:8px 11px;
            margin:5px 0; cursor:pointer; }
.kryssrad:hover { background:var(--hover); }
.kryssrad.vald { border-color:var(--crimson); background:#fbf1f4; }
.kryssrad input { margin-top:2px; }
.kryssrad .hjalp { margin:1px 0 0; }

details.delt { padding:10px 14px; }
details.delt summary { font-weight:600; font-size:14px; }
details.delt .dnr { display:inline-block; min-width:22px; color:var(--dov);
                    font-weight:400; }
select { font:inherit; font-size:13px; padding:4px 6px; border:1px solid var(--ram);
         border-radius:4px; background:#fff; color:var(--text); }
button.farlig { color:var(--danger); background:#fff; border-color:#e6bcbc; }
button.farlig:hover { background:#fdf3f3; }

.sparfot.doldt { display:none; }   /* samma specificitetsfälla som tr.doldt */
.sparfot { position:sticky; bottom:0; background:rgba(255,255,255,.96);
           border-top:1px solid var(--ram); padding:12px 20px;
           display:flex; justify-content:flex-end; align-items:center; gap:12px; }

.falt { display:flex; flex-wrap:wrap; gap:10px 14px; margin:8px 0; align-items:flex-end; }
.falt label { font-size:12px; color:var(--dov); display:flex; flex-direction:column; gap:2px; }
.falt label.kryss { flex-direction:row; align-items:center; gap:5px; }
input.smal, input.bred, textarea, #poang input {
  font:inherit; font-size:13px; padding:4px 7px; border:1px solid var(--ram);
  border-radius:4px; color:var(--text); background:#fff; }
input.smal { width:96px; }
input.bred { width:260px; }
.falt textarea { width:100%; resize:vertical; }
#poang input[data-f="start"] { width:320px; }
#poang input[data-f="text"] { width:420px; }
#poang input.smal { width:74px; }

.las { font-size:13px; background:#f4f7f4; border:1px solid #dde6dd; border-radius:5px;
       padding:8px 12px; margin:8px 0; }
.las.oppen { background:#fafafa; border-color:var(--ram); color:var(--dov); }

.varning { border-left:3px solid var(--strak); background:#fffbf0; padding:8px 12px;
           font-size:13px; margin:10px 0; border-radius:0 4px 4px 0; }
.regel { font-size:13px; color:var(--dov); margin:2px 0; }
.regel b { color:var(--text); font-weight:600; }
.vaxel { font-size:12px; color:var(--dov); margin:8px 0 0; }

/* ---------------------------------------------------- inloggning */

/* Inloggning/återställning ligger på egen navy-sida — fokuserad och tydligt
   ShowOffice. Fixed så den täcker skärmen oberoende av <main>, och försvinner
   helt när man loggat in (då visas app-vyn på ljus botten som vanligt). */
.login { position:fixed; inset:0; z-index:5; overflow:auto;
         background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
         display:flex; flex-direction:column; align-items:center; justify-content:center;
         gap:24px; padding:32px 20px; }
.login-logga { height:30px; width:auto; filter:brightness(0) invert(1); }
.login-kort { width:100%; max-width:380px; border:none; border-radius:16px;
              padding:32px 30px; background:var(--bg);
              box-shadow:0 20px 50px rgba(0,0,0,.28); }
.brand { font-size:16px; font-weight:700; letter-spacing:-.01em;
         color:var(--text); margin:0 0 16px; }
.brand .by { font-weight:400; color:var(--dov); letter-spacing:0; }
.brand .prick { color:var(--strak); }
.brand-logga { display:block; height:26px; width:auto; margin:0 0 18px; }
.login-kort h1 { font-size:21px; margin:0 0 6px; }
.login-kort .dov { font-size:13px; margin:0; }
.login-kort form { display:flex; flex-direction:column; gap:10px; margin:18px 0 0; }
/* .doldt måste vinna över .login-kort form ovan — annars göms aldrig
   glömt-formuläret (samma specificitetsfälla som tr.doldt). */
.login-kort .doldt { display:none; }
.login-kort input { font:inherit; width:100%; padding:11px 13px; border:1px solid var(--ram);
                    border-radius:9px; background:var(--bg); color:var(--text); }
.login-kort input:focus { outline:none; border-color:var(--text);
                          box-shadow:0 0 0 3px rgba(26,26,26,.10); }
.login-kort form button { width:100%; padding:11px; border-radius:9px; }
.login-lankar { font-size:13px; margin:12px 0 0; }
.login-lankar a { color:var(--dov); }
.login-kort .klar { font-size:13px; margin:14px 0 0; padding:10px 12px;
                    background:#f4f7f4; border:1px solid #dde6dd; border-radius:8px; }
.login-fot { margin:16px 0 0; padding-top:16px; border-top:1px solid var(--ram); }
.knapp-sekundar { display:block; width:100%; text-align:center; padding:11px 14px;
                  border-radius:9px; border:1px solid var(--navy); background:var(--navy);
                  color:#fff; font-weight:600; font-size:14px; text-decoration:none;
                  transition:background .14s, box-shadow .14s; }
.knapp-sekundar:hover { background:var(--navy-dark);
                        box-shadow:0 4px 14px rgba(40,42,64,.25); }

/* Flerstegsformulär — ny sammanställning */
.steg-rad { display:flex; flex-wrap:wrap; gap:6px 14px; margin:14px 0 22px; }
.steg-prick { font-size:12px; color:var(--dov); display:inline-flex; align-items:center; gap:6px; }
.steg-prick b { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
                border-radius:999px; background:var(--ram); color:var(--dov); font-size:11px; font-weight:700; }
.steg-prick.nu { color:var(--text); font-weight:600; }
.steg-prick.nu b { background:var(--navy); color:#fff; }
.steg-prick.klar b { background:var(--teal); color:#fff; }
.form2 { display:flex; flex-direction:column; gap:14px; max-width:560px; }
.falt2 { display:flex; flex-direction:column; gap:5px; align-items:stretch; }
.falt-namn { font-size:13px; font-weight:600; }
.falt-tips { font-size:12px; color:var(--dov); }
.falt-par { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form2 input, .form2 textarea, .form2 select { font:inherit; width:100%; padding:10px 12px;
    border:1px solid var(--ram); border-radius:9px; background:var(--bg); color:var(--text); }
.form2 input:focus, .form2 textarea:focus, .form2 select:focus { outline:none;
    border-color:var(--navy); box-shadow:0 0 0 3px rgba(52,56,81,.12); }
.form2 input.fargval { width:56px; height:40px; padding:3px; cursor:pointer; }
.form2 textarea { resize:vertical; }
.radioval { display:flex; flex-direction:column; gap:8px; }
.radio { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; padding:11px 13px;
         border:1px solid var(--ram); border-radius:10px; cursor:pointer; }
.radio input { width:auto; margin-top:2px; }
.radio:hover { border-color:var(--navy); }
.hitta-block { border:1px solid var(--ram); border-radius:10px; padding:13px 14px;
               display:flex; flex-direction:column; gap:12px; }
.hitta-titel { font-family:"Oswald",sans-serif; font-weight:600; font-size:13px;
               text-transform:uppercase; letter-spacing:.05em; color:var(--navy); }
/* Utfällbara paneler (native <details>) på Hantera-sidan. */
.fallpanel { border:1px solid var(--ram); border-radius:12px; background:var(--bg);
             margin-top:14px; padding:0 16px; }
.fallpanel > summary { display:flex; align-items:baseline; gap:10px; cursor:pointer;
             list-style:none; padding:14px 0; font-family:"Oswald",sans-serif;
             font-weight:600; }
.fallpanel > summary::-webkit-details-marker { display:none; }
.fallpanel > summary::before { content:"▸"; color:var(--dov); font-size:12px;
             transition:transform .12s; }
.fallpanel[open] > summary::before { transform:rotate(90deg); }
.fallpanel[open] > summary { border-bottom:1px solid var(--ram); margin-bottom:4px; }
.fp-titel { font-size:16px; }
.fp-nyckel { font-family:"Manrope",sans-serif; font-weight:400; font-size:13px; margin-left:auto; }
.fp-lista { display:flex; flex-direction:column; margin-top:6px; }
.fp-rad { display:flex; align-items:center; gap:12px; padding:11px 8px; text-decoration:none;
          color:inherit; border-bottom:1px solid var(--ram); border-radius:6px; transition:background .12s; }
.fp-rad:last-child { border-bottom:none; }
.fp-rad:hover { background:var(--hover); }
.fp-rad-namn { font-weight:600; font-size:14px; flex:1 1 auto; min-width:0;
               color:inherit; text-decoration:none; }
.fp-rad-namn:hover { color:var(--crimson); }
.fp-rad-antal { flex:0 0 auto; }
.fp-rad-pil { flex:0 0 auto; color:var(--navy); }
.fp-rad-lank { flex:0 0 auto; font-size:13px; font-weight:600; color:var(--navy);
               text-decoration:none; border:1px solid var(--ram); border-radius:16px;
               padding:5px 12px; transition:border-color .14s, background .14s, color .14s; }
.fp-rad-lank:hover { border-color:var(--navy); background:var(--navy); color:#fff; }
.fp-rad-lank.stark { color:var(--crimson); border-color:color-mix(in srgb, var(--crimson) 40%, #fff); }
.fp-rad-lank.stark:hover { background:var(--crimson); border-color:var(--crimson); color:#fff; }
.spara-rad { display:flex; justify-content:flex-end; margin:16px 0 24px; }
.kvitto { font-size:13px; color:var(--dov); transition:opacity .2s; }
.kvitto.klar { color:var(--teal-dark); font-weight:600; }
textarea[readonly] { background:var(--sida); color:var(--text); cursor:default; }
/* Poängskalor: ett block per moment med en förhandsvisning av hur skalan faller ut. */
.skalor { display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.skala { border:1px solid var(--ram); border-radius:10px; padding:12px 14px;
         display:flex; flex-direction:column; gap:8px; background:var(--bg); }
.skala-namn { font-family:"Oswald",sans-serif; font-weight:600; font-size:14px; }
.skala-forhands { font-size:13px; color:var(--teal-dark); font-variant-numeric:tabular-nums;
                  background:var(--teal-50); border-radius:7px; padding:6px 10px; }

/* Inbäddad inställningssida (iframe) på Hantera-sidan. */
.embed { background:transparent; }
.embed .topbar { display:none; }
.embed .tillbaka, .embed #app footer, .embed .kicker { display:none; }
.embed #app > .topp h1 { font-size:18px; }
.embed main#app { padding:2px 0; }
.samm-fall { border-bottom:1px solid var(--ram); }
.samm-fall:last-of-type { border-bottom:none; }
.samm-sum { display:flex; align-items:center; gap:12px; padding:12px 8px; cursor:pointer; list-style:none; }
.samm-sum::-webkit-details-marker { display:none; }
.samm-sum::before { content:"▸"; color:var(--dov); font-size:12px; transition:transform .12s; }
.samm-fall[open] .samm-sum::before { transform:rotate(90deg); }
.samm-inbadd { padding:4px 2px 16px; }
.samm-iframe { width:100%; min-height:120px; border:1px solid var(--ram); border-radius:10px;
               background:var(--bg); display:block; }

.delt-kort { border:1px solid var(--ram); border-radius:10px; margin-bottom:10px;
             background:var(--bg); overflow:hidden; }
.delt-kort > summary { display:flex; align-items:center; gap:12px; cursor:pointer;
             list-style:none; padding:11px 14px; }
.delt-kort > summary::-webkit-details-marker { display:none; }
.delt-kort[open] > summary { border-bottom:1px solid var(--ram); background:var(--hover); }
.delt-nr { flex:0 0 auto; width:24px; height:24px; border-radius:6px; background:var(--navy);
           color:#fff; font-family:"Oswald",sans-serif; font-weight:600; font-size:12px;
           display:inline-flex; align-items:center; justify-content:center; }
.delt-summa { min-width:0; }
.delt-in { display:flex; flex-direction:column; gap:12px; padding:14px 16px; }
.delt-topp { display:flex; justify-content:space-between; align-items:center; }
.kryss { display:flex; align-items:center; gap:8px; font-size:13.5px; }
.kryss input { width:auto; }
.lankknapp { background:none; border:none; color:var(--danger); font-weight:600; font-size:13px;
             cursor:pointer; padding:0; border-radius:0; }
.lankknapp:hover { text-decoration:underline; }
.wizard-knappar { display:flex; justify-content:space-between; align-items:center; gap:12px;
                  margin-top:22px; max-width:560px; }
.wizard-knappar .lag { background:none; border:1px solid var(--ram); color:var(--text); }
.wizard-knappar .lag:hover { border-color:var(--navy); }
/* Equipe-klassväljaren i deltävlingssteget */
.klasskoppling { border-top:1px dashed var(--ram); padding-top:12px; margin-top:4px; }
.klasskoppling .lag { background:none; border:1px solid var(--navy); color:var(--navy); }
.klasskoppling .lag:hover { background:var(--navy); color:#fff; }
.klass-info { margin:10px 0 6px; font-size:12.5px; }
.klassval-knapp { display:block; width:100%; text-align:left; margin:4px 0 0; }
.klasslista { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.klassrad { display:flex; align-items:center; gap:10px; justify-content:space-between;
            border:1px solid var(--ram); border-radius:8px; padding:8px 10px; }
.klassnamn { font-size:13px; min-width:0; }
.klass-titel { display:block; line-height:1.35; }
.klass-metarad { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.klassrad select { flex:0 0 auto; width:auto; font:inherit; font-size:13px; padding:6px 8px;
                   border:1px solid var(--ram); border-radius:7px; background:var(--bg); color:var(--text); }
/* Klassens registrerade höjd, status och startfält från Equipe */
.klass-meta { display:inline-block; font-size:11.5px; font-weight:600; color:var(--teal-dark);
              background:rgba(31,165,163,.10); border-radius:999px; padding:2px 9px;
              white-space:nowrap; }
.klass-meta.meta-dov { color:var(--dov); background:rgba(44,44,42,.06); font-weight:500; }
.klass-meta.meta-varning { color:#8a6d1a; background:rgba(186,117,23,.12); font-weight:500; }
/* Filterraden i poängserie-biblioteket */
.ps-filter { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.ps-filter input, .ps-filter select { font:inherit; font-size:13.5px; padding:9px 12px;
    border:1px solid var(--ram); border-radius:9px; background:var(--bg); color:var(--text); }
.ps-filter input:first-child { flex:1 1 220px; }
/* Dagrubriker i klasslistan */
.klass-dag { font-family:"Oswald",sans-serif; font-weight:600; font-size:12.5px;
             text-transform:uppercase; letter-spacing:.08em; color:var(--navy);
             margin:14px 0 6px; padding-bottom:3px; border-bottom:2px solid var(--navy); }
/* Klasspoäng-rader: kryss + poängserie per klass, som i Equipe */
.klassrad-kp { border:1px solid var(--ram); border-radius:10px; padding:10px 12px;
               display:flex; flex-direction:column; gap:8px; background:var(--bg);
               transition:border-color .12s; }
.klassrad-kp:has(input:checked) { border-color:var(--teal); }
.klassrad-kp .kryss { font-size:13px; align-items:flex-start; }
.klassrad-kp .kryss input { margin-top:3px; }
.klassrad { align-items:flex-start; }
.klassrad select { margin-top:2px; }
.kp-falt .falt-tips { display:none; }
.kp-falt input { padding:7px 9px; font-size:13px; }
/* Logga-uppladdning på tävlingen: förhandsvisning på den färgade marken */
.logga-val { display:flex; align-items:center; gap:14px; }
.logga-forhand { width:76px; height:76px; border-radius:14px; flex:0 0 auto;
                 display:flex; align-items:center; justify-content:center; overflow:hidden; }
.logga-forhand img { max-width:82%; max-height:82%; }
.logga-val input[type=file] { font-size:13px; }

button { font:inherit; font-weight:600; padding:9px 20px; border-radius:999px;
         border:1px solid var(--crimson); background:var(--crimson); color:#F1F1F1; cursor:pointer; }
button:hover { background:var(--crimson-hover); border-color:var(--crimson-hover); }
button.lag { font-size:12px; font-weight:400; padding:4px 12px; background:#fff; color:var(--text);
             border:1px solid var(--ram); margin-left:6px; }
button.lag:hover { background:var(--hover); }
.lank { font-size:12px; margin-left:8px; }
input[type=password] { font:inherit; padding:8px; border:1px solid var(--ram);
                       border-radius:6px; }
.fel { color:#b00; font-size:13px; }
.privat { display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
          color:var(--strak); border:1px solid var(--strak); border-radius:4px;
          padding:1px 6px; vertical-align:3px; margin-left:8px; }

footer { margin-top:44px; padding-top:12px; border-top:1px solid var(--ram);
         font-size:12px; color:var(--dov); }
.laddar { color:var(--dov); font-size:13px; padding:20px 0; }