/* Roboto — samma font som ikgota.se använder för all brödtext
   (`body { font-family: Roboto, Arial, sans-serif !important }`).
   Självhostad, inte länkad till Google: ishallens täckning är opålitlig, och
   sidan ska inte skicka besökarnas IP till tredje part. Variabel fil, så en
   enda woff2 täcker vikterna 400–700. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Team 15 U12 — dagens ispass
   Minimalt lager ovanpå Bootstrap. Egna klasser prefixas is-.
   Sidan är medvetet enbart ljus: vit botten, inga kort, ingen mörk variant. */

:root {
  --is-papper:  #ffffff;
  --is-black:   #12161b;
  --is-dampad:  #67727d;
  --is-svag:    #99a3ac;
  --is-harfin:  #e4e8ec;
  --is-platta:  #f4f6f8;   /* ljus platta: headern och varannan tabellrad */
  --is-sidopadding: 1.15rem;
  --is-rod:     #c8102e;
  --is-bla:     #0b4da2;
  --is-gul:     #f5c400;
  --is-varning: #96590a;
}

body {
  background: var(--is-papper);
  color: var(--is-black);
  font-family: Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  padding-bottom: 5.5rem;
}

.is-sida { max-width: 34rem; margin: 0 auto; padding: 0 var(--is-sidopadding); }

.is-kondens { font-family: Roboto, Arial, sans-serif; }

.is-etikett {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color: var(--is-svag);
}

/* ---------- Header ---------- */

/* Headern ligger på en svagt grå platta så att den läser som en egen zon
   mot det vita innehållet — särskilt när sidan scrollas under den. */
.is-topp {
  position: sticky; top: 0; z-index: 1020;
  background: var(--is-platta);
  border-bottom: 1px solid var(--is-harfin);
}

.is-titelrad {
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* Liten ikonknapp intill rubriken. 40 px träffyta trots 18 px ikon —
   allt man ska kunna trycka på med handskar behöver marginal. */
.is-historikknapp {
  flex: none;
  width: 2rem;
  height: 2rem;
  margin: -.4rem 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--is-dampad);
  display: grid;
  place-items: center;
}

.is-historikknapp:hover { color: var(--is-black); }

.is-topp h1 {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  margin: 0; line-height: 1.05;
}

.is-nar {
  font-variant-numeric: tabular-nums;
  color: var(--is-dampad);
  font-size: .88rem;
}

/* Omklädningsrummet i sidhuvudet. Numret är det enda man behöver läsa på
   avstånd i en hall, så det får egen vikt — resten är etikett. */
.is-omklader {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .3rem;
}

.is-omkladerlapp {
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .3rem;
  background: var(--is-black);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.is-omkladertext {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--is-dampad);
}

/* Knapparna 1–4 och "–" i redigeringsläget: samma fyrkant som tröjfärgerna,
   men vänsterställda — de hör till passet, inte till en person på en rad.

   Den valda måste markeras här: tröjfärgernas regel kräver att knappen sitter
   i en .is-redigerarad, och den här gruppen står för sig själv. */
.is-omkladerval {
  margin-left: 0;
}

.is-omkladerval button[aria-pressed="true"] {
  background: var(--is-black);
  border-color: var(--is-black);
  color: #fff;
}

/* Samma luft under headern som övningsflikens första block har, så att
   raden inte klistrar sig mot den grå plattan. */
.is-synk {
  margin-top: 1.2rem;
  font-size: .78rem; color: var(--is-svag);
  display: flex; align-items: center; gap: .4rem;
}

.is-prick { width: .4rem; height: .4rem; border-radius: 50%; background: #2e9e5b; flex: none; }

.is-synkknapp {
  margin-left: auto;
  flex: none;
  border: 1px solid var(--is-harfin);
  background: none;
  color: var(--is-dampad);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .2rem .55rem;
}

.is-synkknapp:disabled { opacity: .5; }

@media (prefers-reduced-motion: no-preference) {
  .is-prick { animation: is-puls 2.6s ease-in-out infinite; }
  @keyframes is-puls { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
}

/* ---------- Flikar ---------- */

/* Två flikar på halva bredden var. Raden vilar på en hårfin linje och den
   aktiva flikens understrykning lägger sig ovanpå den (margin-bottom: -1px),
   så att de inte staplas på varandra. */
.is-flikar { display: flex; border-bottom: 1px solid var(--is-harfin); }

.is-flikar .nav-link {
  flex: 1 1 50%;
  text-align: center;
  white-space: nowrap;
  padding: .6rem .25rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  /* Dämpad, inte svag: den inaktiva fliken är en knapp man ska kunna läsa.
     Skillnaden mot den aktiva bärs av bläckfärgen och understrykningen. */
  color: var(--is-dampad);
}

.is-flikar .nav-link.active {
  color: var(--is-black);
  border-bottom-color: var(--is-black);
  background: none;
}

.is-flikar .nav-link:focus-visible { outline: 2px solid var(--is-bla); outline-offset: 2px; }

/* Antalet på fliken: utespelare + målvakter, samma format som svenskalag
   använder på sina egna flikar. Ärver flikens färg, så den dämpas
   automatiskt när fliken är inaktiv. */
.is-flikbadge {
  margin-left: .45rem;
  padding: 0 .3rem;
  border: 1px solid currentColor;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

/* Panelerna börjar direkt — ingen extra linje ovanför första blocket */
.tab-pane > .is-block:first-child { border-top: 0; padding-top: 1.2rem; }

/* ---------- Sektioner ---------- */

.is-block { padding: 1.6rem 0; border-top: 1px solid var(--is-harfin); }
.is-block:first-of-type { border-top: 0; padding-top: 1.2rem; }

.is-rubrik {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .35rem;
  text-wrap: balance;
}

/* Skissen är en vit PNG — den behöver bara en hårfin kant för att få form
   mot det vita papperet, ingen ram och ingen platta. */
/* Ingen ram på skisser och bilder — de flesta är ritade på vit botten och
   en kantlinje ramar då in tomrum snarare än motiv. */
.is-skiss { display: block; width: 100%; height: auto; }

/* Bilder i brödtexten, oavsett om de skrivits som ![]() eller <img>. */
.is-text img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 .9rem;
  border: 0;
}

.is-meta { color: var(--is-dampad); font-size: .85rem; }
.is-meta span + span::before { content: " · "; color: var(--is-svag); }

.is-text p { margin-bottom: .8rem; max-width: 62ch; }
/* ul och ol måste ha samma indrag. Utan en egen ol-regel ärver den
   Bootstraps 2rem medan ul låg på 1.15 — en punktlista hamnade då till
   vänster om siffrorna i en numrerad lista, alltså tvärtemot hierarkin.
   1.5rem ger plats även för tvåsiffriga nummer. */
.is-text ul,
.is-text ol { margin-bottom: .8rem; padding-left: 1.5rem; }

.is-text li { margin-bottom: .3rem; }

/* Underlistor ska ligga tätt mot sin förälder, inte se ut som ett nytt stycke. */
.is-text li > ul,
.is-text li > ol { margin-top: .3rem; margin-bottom: .35rem; }
.is-text h2 {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--is-black);
  margin: 1.5rem 0 .4rem;
}

.is-text h3,
.is-text h4 {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--is-svag);
  margin: 1.2rem 0 .35rem;
}

.is-text h2:first-child,
.is-text h3:first-child,
.is-text h4:first-child { margin-top: 0; }
.is-text > :last-child { margin-bottom: 0; }

/* Inbäddad video, lika bred som textkolumnen och innanför sidans marginal —
   samma bredd som skisserna, så att sidan har en enda innehållskant. */
.is-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom: .9rem;
  background: #000;
  border: 1px solid var(--is-harfin);
}

.is-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tabeller ryms alltid inom skärmen — ingen sidledsscroll. Innehållet bryter
   rader i stället. Behållaren finns kvar som blockelement för marginalen. */
.is-tabell { margin-bottom: .9rem; }

.is-text table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

.is-text th,
.is-text td {
  text-align: left;
  vertical-align: top;
  white-space: normal;
  padding: .45rem .5rem;

  /* Ord hålls hela. `hyphens: auto` avstavade svenska ord ("Peri-od") eftersom
     sidan är lang="sv", och `anywhere` bröt även korta ord mitt itu.
     `break-word` är kvar som sista utväg: den slår bara till när ett enda ord
     inte får plats på egen rad, och sätter aldrig bindestreck. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.is-text th {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--is-dampad);
  border-bottom: 1px solid var(--is-black);
}

/* Zebra: varannan rad på den ljusa plattan. Med ränder behövs inga linjer
   mellan raderna — de två tillsammans blir bara stökigt. */
.is-text tbody tr:nth-child(even) { background: var(--is-platta); }

/* Korta kolumner som "10 min" ska inte brytas mitt itu bara för att en
   annan kolumn är lång. */
.is-text td { min-width: 0; }

.is-text del { color: var(--is-svag); }

/* ---------- Lagen ---------- */

.is-lag { display: flex; flex-direction: column; gap: 1.5rem; }

.is-lagrubrik {
  display: flex; align-items: baseline; gap: .45rem;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid currentColor;
}

/* Färgen bärs av rubriken och linjen under den. Formen (● / ■) står kvar
   så att kolumnerna går att skilja åt utan färgseende. */
.is-lag--rod { --bg: var(--is-rod); --pa: #fff; }
.is-lag--bla { --bg: var(--is-bla); --pa: #fff; }
.is-lag--gul { --bg: var(--is-gul); --pa: var(--is-black); }

/* Rubriken tar lagfärgen som text. Gult är för ljust för att läsas som
   text mot vitt, så den får bläckfärg med en gul linje under i stället.
   Linjen är lika tjock som de andra gruppernas — 1 px från basregeln. */
.is-lag--rod .is-lagrubrik { color: var(--is-rod); }
.is-lag--bla .is-lagrubrik { color: var(--is-bla); }
.is-lag--gul .is-lagrubrik { color: var(--is-black); border-bottom-color: var(--is-gul); }

/* Ofärgade har ingen lagfärg och ska inte se ut att ha en. Tomma rader med
   hårfin kant — samma form som en osatt rad i redigeringsläget. */
.is-lag--utan .is-lagrubrik {
  color: var(--is-dampad);
  border-bottom-color: var(--is-harfin);
}

.is-lag--utan .is-namn {
  background: var(--is-papper);
  color: var(--is-black);
  box-shadow: inset 0 0 0 1px var(--is-harfin);
}

.is-antal { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

.is-namnlista { display: flex; flex-direction: column; gap: 2px; }

.is-namn {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.35;
}

.is-namn { background: var(--bg); color: var(--pa); }

.is-mv, .is-ny {
  font-family: Roboto, Arial, sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  flex: none; margin-left: auto;
  padding: .05rem .35rem;
  border: 1px solid currentColor;
  color: inherit;
  opacity: .75;
}
.is-ny { opacity: 1; }

/* ---------- Tränare ---------- */

.is-tranare { display: flex; flex-direction: column; gap: .2rem; }

.is-tranarrad {
  display: flex; align-items: baseline; gap: .45rem;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 500; font-size: 1.02rem;
}
.is-tranarroll { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--is-svag); }

/* ---------- Redigeringsläge ---------- */

.is-redigeralista { display: flex; flex-direction: column; gap: 2px; }

.is-redigerarad {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem .35rem .7rem;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 500; font-size: 1.02rem;
  background: var(--is-papper);
  box-shadow: inset 0 0 0 1px var(--is-harfin);
  color: var(--is-black);
}
.is-redigerarad[data-farg] { background: var(--bg); color: var(--pa); box-shadow: none; }
.is-redigerarad[data-farg="rod"] { --bg: var(--is-rod); --pa: #fff; }
.is-redigerarad[data-farg="bla"] { --bg: var(--is-bla); --pa: #fff; }
.is-redigerarad[data-farg="gul"] { --bg: var(--is-gul); --pa: var(--is-black); }

.is-valj { display: flex; gap: .25rem; margin-left: auto; flex: none; }

.is-valj button {
  min-width: 1.85rem; height: 2rem; padding: 0 .3rem;
  border-radius: 0;
  border: 1px solid var(--is-harfin);
  background: var(--is-papper);
  color: var(--is-svag);
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700; font-size: .88rem;
  display: grid; place-items: center; padding: 0;
}

/* På en färgad rad vänds knapparna: genomskinliga med förgrunden som kant,
   och den valda fylls med förgrunden och får bottenfärgen som text.
   Samma regel bär rött, blått och gult utan specialfall. */
.is-redigerarad[data-farg] .is-valj button {
  background: transparent; border-color: currentColor; color: currentColor; opacity: .75;
}
.is-redigerarad[data-farg] .is-valj button[aria-pressed="true"] {
  background: var(--pa); border-color: var(--pa); color: var(--bg); opacity: 1;
}

.is-redigerarad:not([data-farg]) .is-valj button[aria-pressed="true"] {
  background: var(--is-black); border-color: var(--is-black); color: #fff;
}

.is-mvknapp {
  border: 1px solid transparent; background: none; padding: .05rem .35rem;
  font-family: Roboto, Arial, sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: inherit;
}
.is-redigerarad[data-farg] .is-mvknapp[aria-pressed="true"] { border-color: currentColor; }
.is-redigerarad:not([data-farg]) .is-mvknapp[aria-pressed="true"] { border-color: var(--is-harfin); }

.is-sparrad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: var(--is-papper);
  border-top: 1px solid var(--is-harfin);
  padding: .7rem 1.15rem calc(.7rem + env(safe-area-inset-bottom));
}

/* ---------- Arkiv ---------- */

.is-arkivkort {
  border: 0; border-bottom: 1px solid var(--is-harfin);
  background: none; color: var(--is-black);
  padding: .7rem 0; width: 100%; text-align: left;
  display: flex; gap: .8rem; align-items: center;
}
.is-arkivkort[aria-pressed="true"] { color: var(--is-bla); }

/* Ordningsnumret i arkivet: vilket pass som körs först, inte bara att det valts. */
.is-arkivnr {
  flex: none;
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.is-arkivkort[aria-pressed="true"] .is-arkivnr {
  background: var(--is-bla);
  color: #fff;
}
.is-arkivkort img { width: 4.5rem; flex: none; border: 1px solid var(--is-harfin); }
.is-arkivtitel { font-family: Roboto, Arial, sans-serif; font-weight: 600; font-size: 1rem; }

.is-demo { border-top: 1px solid var(--is-harfin); color: var(--is-svag); font-size: .8rem; padding: 1.4rem 0 0; }

/* ---------- Övningar ---------- */

/* Innehållsförteckningen spänner alltid hela kolumnen. Den ligger därför i
   ett eget block, inte i flexrad med Byt-knappen. */
.is-innehall ol {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  border-top: 1px solid var(--is-harfin);
}

.is-innehall li { border-bottom: 1px solid var(--is-harfin); }

.is-innehall a {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .55rem 0;
  color: var(--is-black);
  text-decoration: none;
}

.is-innehall a:hover .is-innehall-titel { text-decoration: underline; }

.is-innehall-titel { font-weight: 600; }

.is-innehall-tid {
  margin-left: auto;
  flex: none;
  font-size: .8rem;
  color: var(--is-svag);
  font-variant-numeric: tabular-nums;
}

.is-pass { padding-top: 1.6rem; }

.is-pass + .is-pass {
  margin-top: 1.6rem;
  border-top: 1px solid var(--is-harfin);
}

/* Rubriken får inte hamna under den fasta headern när man hoppar hit
   från innehållsförteckningen. */
.is-pass { scroll-margin-top: 7.5rem; }

/* Pilen på Byt-knappen antyder att panelen kommer in från höger. Dekorativ,
   därför aria-hidden i markupen — skärmläsare ska bara höra "Byt". */
.is-pil {
  display: inline-block;
  margin-left: .35rem;
  transition: transform .15s ease;
}

.btn:hover .is-pil,
.btn:focus-visible .is-pil { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .is-pil { transition: none; }
}

/* ---------- Arkivpanelen ---------- */

/* Hela skärmen på telefon, men inte oändligt bred på en stor skärm —
   raderna ska inte bli meterlånga. */
.is-panel.offcanvas-end {
  width: 100%;
  max-width: 34rem;
  background: var(--is-papper);
  color: var(--is-black);
  border-left: 1px solid var(--is-harfin);
  display: flex;
  flex-direction: column;
}

.is-panelhuvud {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--is-harfin);
  flex: none;
}

.is-panelrubrik {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.is-tillbaka {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--is-harfin);
  background: none;
  color: var(--is-black);
  font-size: 1.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.is-panelverktyg {
  flex: none;
  padding: .75rem 1.15rem;
  border-bottom: 1px solid var(--is-harfin);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.is-panelverktyg .form-control {
  border-radius: 0;
  border-color: var(--is-harfin);
}
.is-panelverktyg .form-control:focus {
  border-color: var(--is-bla);
  box-shadow: none;
}

.is-chips {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding-bottom: .15rem;
  -webkit-overflow-scrolling: touch;
}

.is-chip {
  flex: none;
  border: 1px solid var(--is-harfin);
  background: none;
  color: var(--is-dampad);
  padding: .3rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

.is-chip[aria-pressed="true"] {
  background: var(--is-black);
  border-color: var(--is-black);
  color: #fff;
}

.is-panelkropp {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.15rem 1.15rem;
}

.is-panelfot {
  flex: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.15rem calc(.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--is-harfin);
}

/* En rad i listan: vänsterdelen öppnar förhandsgranskningen,
   knappen till höger väljer. Två tydligt skilda träffytor. */
.is-arkivrad {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid var(--is-harfin);
}

.is-arkivoppna {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 0;
  border: 0;
  background: none;
  color: var(--is-black);
  text-align: left;
  min-width: 0;
}

.is-arkivoppna img {
  width: 4.25rem;
  flex: none;
  border: 1px solid var(--is-harfin);
  background: #fff;
}

/* Utan min-width: 0 vägrar flexbarnet krympa och långa titlar spränger raden. */
.is-arkivoppna > div { min-width: 0; }
/* Samma regel som i tabellerna: bryt bara ett ord som inte ryms alls. */
.is-arkivoppna .is-arkivtitel { overflow-wrap: break-word; }

.is-arkivvalj {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--is-harfin);
  background: none;
  color: var(--is-svag);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}

.is-arkivvalj[aria-pressed="true"] {
  background: var(--is-bla);
  border-color: var(--is-bla);
  color: #fff;
}

.is-arkivtom {
  padding: 2rem 0;
  text-align: center;
}

/* ---------- Skiss i helskärm ---------- */

.is-skiss { cursor: zoom-in; }

.is-helskarm {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: #0d0f12;
  padding: 0;
  border: 0;
}

/* Bilden fyller rutan i den riktning som begränsar — höjden på en stående
   skärm, bredden på en liggande. `object-fit: contain` behåller
   proportionerna och skalar både upp och ner, till skillnad från
   max-width/max-height som bara kan krympa.
   Bilden positioneras absolut mot overlayen i stället för att vara ett
   grid-objekt: med `place-items: center` sträcks rutan inte ut, och då
   resolverar height:100% mot en rad vars höjd beror på bilden själv — så
   boxen kunde bli större än skärmen och bilden klipptes i liggande läge. */
.is-helskarm img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.is-stang {
  position: fixed;
  top: max(.75rem, env(safe-area-inset-top));
  right: max(.75rem, env(safe-area-inset-right));
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

body.is-last { overflow: hidden; }

/* Bootstrap-knappar nedtonade till samma språk */
.btn { border-radius: 0; font-family: Roboto, Arial, sans-serif; font-weight: 600; letter-spacing: .04em; }
.btn-primary { --bs-btn-bg: var(--is-black); --bs-btn-border-color: var(--is-black); --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; }
.modal-content { border-radius: 0; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--is-bla); outline-offset: 2px; }


/* ---------- Historik ---------- */

/* Bannern gör det omöjligt att missa att man tittar bakåt. Den ska sticka ut
   mot resten av sidan, annars förväxlas gammal data med dagens. */
.is-historikbanner {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.2rem 0 .6rem;
  padding: .55rem .7rem;
  background: var(--is-platta);
  border-left: 3px solid var(--is-black);
  font-size: .85rem;
  font-weight: 600;
}

.is-tillbakaknapp {
  margin-left: auto;
  flex: none;
  border: 1px solid var(--is-black);
  background: var(--is-black);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .25rem .6rem;
}

.is-historikrad {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid var(--is-harfin);
  background: none;
  color: var(--is-black);
  text-align: left;
}

/* Fokusfiltret är en rullgardin under periodknapparna. Perioderna är en
   handfull och ryms som knappar; fokusområdena hämtas ur innehållet och kan
   bli hur många som helst — en lista håller dem på en rad oavsett antal. */
.is-fokusval {
  margin-top: .45rem;
}

/* ---------- Gäster ---------- */

/* En gäst är inte vår spelare. Märket ska synas men inte skrika — det står
   bredvid namnet, i samma storlek som Ny-märket. */
.is-gastmarke {
  margin-left: .4rem;
  padding: .05rem .3rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  vertical-align: .08em;
}

/* Knappen ärver fyrkanten från .is-valj button. Marginalen skiljer den från
   färgvalen, så den inte läses som en femte färg. */
.is-gastbort {
  margin-left: .4rem;
}

.is-valj .is-gastbort:hover,
.is-valj .is-gastbort:focus-visible {
  border-color: var(--is-rod);
  color: var(--is-rod);
  opacity: 1;
}

.is-gastform {
  padding: .5rem 0 .2rem;
}

.is-gastform-rad {
  display: flex;
  gap: .35rem;
}

.is-gastform-rad input {
  flex: 1 1 auto;
  min-width: 0;
}

.is-gastform-rad select {
  flex: 0 0 6.5rem;
}

.is-gastform-knappar {
  display: flex;
  justify-content: flex-end;
  gap: .4rem;
  margin-top: .5rem;
}

/* ---------- Lägrets ispass på lägersidan ---------- */

.is-ispasslista {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--is-harfin);
}

.is-ispassdag {
  margin: .9rem 0 .2rem;
  font-weight: 700;
  font-size: .9rem;
}

.is-ispassdag:first-child {
  margin-top: 0;
}

.is-ispassrad {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--is-harfin);
  background: none;
  color: var(--is-black);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.is-ispassrad .is-pil {
  flex: none;
  color: var(--is-svag);
}

.is-ispassrad:hover .is-pil,
.is-ispassrad:focus-visible .is-pil {
  color: var(--is-black);
}

/* ---------- Träningar-panelen ---------- */

/* Ispassen under en kallelse hör ihop, och grupperas under en rubrik med dag
   och titel. Utan den ser lägrets två rader ut som två olika träningar. */
/* Flikarna i panelen: träningar för sig, läger för sig. */
.is-panelflikar {
  display: flex;
  gap: 1.2rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--is-harfin);
}

.is-panelflikar .nav-link {
  padding: .5rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--is-dampad);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.is-panelflikar .nav-link.active {
  color: var(--is-black);
  border-bottom-color: var(--is-black);
}

.is-grupp {
  margin-bottom: 1.4rem;
}

/* Formuläret för ett nytt lägerpass: dag, från och till på en rad. */
.is-passform {
  padding: .6rem 0 .2rem;
}

.is-passform-rad {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.is-passform-rad select {
  flex: 1 1 8rem;
  min-width: 0;
}

.is-passform-rad input[type="time"] {
  flex: 0 1 6.5rem;
  min-width: 0;
}

.is-passform-till {
  color: var(--is-svag);
}

.is-passform-knappar {
  display: flex;
  justify-content: flex-end;
  gap: .4rem;
  margin-top: .5rem;
}

.is-avsnitt {
  margin: 1.1rem 0 .3rem;
}

/* Lägerrubriken är klickbar: den leder till lägrets egen sida. */
.is-grupplank {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  color: var(--is-black);
  text-align: left;
}

.is-grupplank .is-pil {
  flex: none;
  color: var(--is-svag);
}

.is-grupplank:hover .is-pil,
.is-grupplank:focus-visible .is-pil {
  color: var(--is-black);
}

.is-grupplank-vald {
  box-shadow: inset 3px 0 0 var(--is-black);
  padding-left: .7rem;
}

.is-gruppdag {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding-bottom: .15rem;
  border-bottom: 1px solid var(--is-harfin);
}

.is-gruppdatum {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.is-grupptitel {
  font-size: .82rem;
  color: var(--is-svag);
  overflow-wrap: break-word;
  min-width: 0;
  /* Titel och datum är inline-syskon inne i länken, så föräldrans gap når dem
     inte — de skulle annars sitta ihop: "Läger - Flen19 sep." */
  margin-left: .45rem;
}

.is-radwrap {
  display: flex;
  align-items: stretch;
  gap: .25rem;
}

.is-radtitel {
  display: block;
}

/* Krysset tar bort ett tillagt ispass. Diskret tills man siktar på det —
   det ska gå att hitta, men inte dra blicken till sig i en lista man läser. */
.is-radbort {
  flex: none;
  width: 2rem;
  border: 0;
  background: none;
  color: var(--is-svag);
  font-size: 1.1rem;
  line-height: 1;
  border-bottom: 1px solid var(--is-harfin);
}

.is-radbort:hover,
.is-radbort:focus-visible {
  color: var(--is-rod);
}

.is-bekrafta {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--is-harfin);
  font-size: .9rem;
}

.is-laggtill {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .4rem 0;
  border: 0;
  background: none;
  color: var(--is-dampad);
  font-size: .85rem;
  text-align: left;
}

.is-laggtill:hover,
.is-laggtill:focus-visible {
  color: var(--is-black);
}

/* Genvägen till den aktuella träningen, överst i Träningar-fliken. Den är en
   annan sorts rad än listans — en väg hem, inte ett val bland flera — och
   markeras med en tyngre underkant. */
.is-aktuellrad {
  border-bottom: 2px solid var(--is-black);
  margin-bottom: .2rem;
}

.is-aktuellrad .is-radtitel {
  font-weight: 700;
}

.is-aktuellrad .is-pil {
  flex: none;
  color: var(--is-svag);
}

.is-aktuellrad:hover .is-pil,
.is-aktuellrad:focus-visible .is-pil {
  color: var(--is-black);
}

.is-historikrad-vald {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--is-black);
  padding-left: .7rem;
}

.is-historikdatum {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 6.5rem;
}

.is-historikantal {
  margin-left: auto;
  flex: none;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--is-dampad);
}

.is-historikpass {
  display: block;
  font-size: .82rem;
  color: var(--is-svag);
  margin-top: .1rem;
}

/* ---------- Utskrift ---------- */

/* På skärmen finns rubriken bara för utskriftens skull. */
.is-utskriftshuvud { display: none; }

@media print {
  @page {
    size: A4 portrait;
    margin: 25mm 20mm;
  }

  /* Färgade rader måste tvingas fram — annars skriver webbläsaren ut vit
     text på vit botten och listan blir oläslig. Vissa utskriftsdialoger har
     dessutom en egen kryssruta för bakgrundsgrafik. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    background: #fff;
    padding: 0;
    margin: 0;
    font-size: 11pt;
  }

  /* Ta bort allt utom kedjan ned till laglistan — med display: none, inte
     visibility: hidden. Det gömda behåller annars sin plats i flödet, och
     dokumentet blir flera sidor högt fast bara en liten del syns. */
  body > *:not(main) { display: none !important; }
  main > *:not(.tab-content) { display: none !important; }
  .tab-content > *:not(#panelFarger) { display: none !important; }
  #panelFarger > *:not(#vyLag) { display: none !important; }

  main, .tab-content, #panelFarger {
    display: block !important;
    padding: 0;
    margin: 0;
    max-width: none;
  }

  /* Listan flödar normalt högst upp på arket, centrerad i 80 mm. */
  #vyLag {
    width: 80mm;
    margin: 0 auto;
    padding: 0;
    border: 0;
  }

  .is-utskriftshuvud { display: block; margin-bottom: 6mm; }

  .is-utskriftshuvud h2 {
    margin: 0;
    font-size: 14pt;
    font-weight: 700;
    letter-spacing: -.01em;
  }

  .is-utskriftshuvud p {
    margin: 1mm 0 0;
    font-size: 9.5pt;
    color: #444;
  }

  .is-lag { gap: 6mm; }

  .is-lagrubrik {
    font-size: 10pt;
    letter-spacing: .1em;
    margin-bottom: 2mm;
    padding-bottom: 1mm;
    /* En grupp ska inte brytas över två sidor. */
    break-after: avoid;
  }

  .is-lag--rod, .is-lag--bla, .is-lag--gul, .is-lag--utan { break-inside: avoid; }

  .is-namnlista { gap: 1px; }

  .is-namn {
    font-size: 11pt;
    padding: 1.6mm 2.5mm;
    line-height: 1.25;
  }

  /* Räknaren till höger i rubriken är användbar även på papper. */
  .is-antal { font-size: 10pt; }

  /* Inget av det här hör hemma i en utskrift. */
  .is-topp, .is-synk, #synkVarning, #vyRedigera, #panelOvning,
  .is-sparrad, .offcanvas, .modal, .toast-container, #knappSkrivUt,
  .is-tranare, .is-demo { display: none !important; }
}