/* ==========================================================================
   Trainus — gränssnittskomponenter
   --------------------------------------------------------------------------
   Skal, meny, knappar, kort, tabeller, chips och toast.
   Alla värden kommer från trainus.light.css — inga hårdkodade färger här.
   Laddas EFTER main.css och bootstrap.min.css.
   ========================================================================== */

/* ── Neutralisera main.css ────────────────────────────────────────────────
   main.css sätter `* { font-family: Outfit; color: #000 }`. En universell
   selektor träffar varje element direkt, så inget ärver — därför måste den
   släckas innan tokens kan slå igenom. `body *` har högre specificitet än
   `*` men lägre än alla klasser, så komponenterna nedan vinner ändå.
   ------------------------------------------------------------------------ */
body,
body * {
  font-family: var(--tu-font-body);
  color: inherit;
}

body {
  background: var(--tu-bg);
  color: var(--tu-ink);
  font-size: var(--tu-text);
  line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Bootstrap-brygga ─────────────────────────────────────────────────────
   Låter de ~250 befintliga .btn-*/.text-*-klasserna ärva den nya paletten
   utan att markupen rörs. Nya vyer bör använda .tu-btn nedan.
   ------------------------------------------------------------------------ */
:root {
  --bs-primary:       var(--tu-accent);
  --bs-primary-rgb:   232, 82, 63;
  --bs-body-bg:       var(--tu-bg);
  --bs-body-color:    var(--tu-ink);
  --bs-border-color:  var(--tu-line);
  --bs-border-radius: var(--tu-radius);
  --bs-link-color:    var(--tu-accent-ink);
  --bs-link-hover-color: var(--tu-accent);
  --bs-success:       var(--tu-ok);
  --bs-warning:       var(--tu-warn);
  --bs-danger:        var(--tu-danger);
  --bs-info:          var(--tu-info);
}

.btn-primary {
  --bs-btn-bg: var(--tu-accent);
  --bs-btn-border-color: var(--tu-accent);
  --bs-btn-color: var(--tu-on-accent);
  --bs-btn-hover-bg: var(--tu-accent-ink);
  --bs-btn-hover-border-color: var(--tu-accent-ink);
  --bs-btn-hover-color: var(--tu-on-accent);
  --bs-btn-active-bg: var(--tu-accent-ink);
  --bs-btn-active-border-color: var(--tu-accent-ink);
}

/* ── Typografi ────────────────────────────────────────────────────────────
   Rubriker i gemener med tight spärr. Versaler finns bara på .tu-label.
   ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.tu-h1, .tu-h2, .tu-h3 {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  letter-spacing: var(--tu-display-track);
  color: var(--tu-ink);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 var(--tu-space-3);
}

h1, .tu-h1 { font-size: var(--tu-h1); }
h2, .tu-h2 { font-size: var(--tu-h2); }
h3, .tu-h3 { font-size: var(--tu-h3); }
h4 { font-size: var(--tu-text-lg); }
h5, h6 { font-size: var(--tu-text); }

.tu-label {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
}

.tu-muted  { color: var(--tu-muted); }
.tu-num    { font-variant-numeric: tabular-nums; font-family: var(--tu-font-label); }

a { color: var(--tu-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tu-accent); }

:focus-visible {
  outline: 2px solid var(--tu-accent);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SKAL — sidomeny till vänster, innehåll till höger
   ══════════════════════════════════════════════════════════════════════════ */
.tu-app {
  display: grid;
  grid-template-columns: var(--tu-nav-w) minmax(0, 1fr);
  min-height: 100vh;
}

.tu-main {
  padding: var(--tu-main-pad);
  min-width: 0;
}

/* Sidhuvud inne i innehållsytan: rubrik till vänster, åtgärder till höger */
.tu-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tu-space-4);
  margin-bottom: var(--tu-space-5);
}
.tu-page-head h1 { margin: 0; }
.tu-page-actions { display: flex; gap: var(--tu-space-2); flex-wrap: wrap; align-items: center; }

/* ── Sidomeny ─────────────────────────────────────────────────────────── */
/* Kanten finns alltid men sätts till menyns egen bakgrund i teman med mörk
   sidomeny, där den vore överflödig. Ett tema med ljus meny — där menyn och
   innehållsytan annars flyter ihop — ger --tu-side-line ett eget värde. */
.tu-side {
  background: var(--tu-side-bg);
  color: var(--tu-side-fg);
  border-right: 1px solid var(--tu-side-line);
  padding: var(--tu-space-4) 0 var(--tu-space-5);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.tu-side a { color: var(--tu-side-fg); text-decoration: none; }

.tu-brand {
  font-family: var(--tu-font-display);
  font-weight: 700;
  font-size: var(--tu-text-lg);
  letter-spacing: var(--tu-display-track);
  color: var(--tu-side-brand);
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: var(--tu-space-2);
}
.tu-brand img { height: 26px; width: auto; }
.tu-brand a { color: var(--tu-side-brand); }

.tu-teamswitch {
  display: flex;
  align-items: center;
  gap: var(--tu-space-2);
  margin: var(--tu-space-3) 12px var(--tu-space-4);
  padding: var(--tu-space-2) 10px;
  background: var(--tu-side-chip);
  border-radius: var(--tu-radius);
  font-size: 12.5px;
  border: 0;
  width: calc(100% - 24px);
  text-align: left;
  cursor: pointer;
  color: var(--tu-side-fg);
}
.tu-teamswitch:hover { background: var(--tu-side-hover); }
.tu-teamswitch img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }

.tu-navgroup {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-side-muted);
  padding: var(--tu-space-4) 18px var(--tu-space-1);
}

.tu-navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--tu-space-2) 11px;
  margin: 1px var(--tu-space-2);
  border-radius: var(--tu-radius);
  font-size: var(--tu-text-sm);
  line-height: 1.35;
}
.tu-navlink i { width: 15px; text-align: center; font-size: 12px; opacity: .75; flex: none; }
.tu-navlink:hover { background: var(--tu-side-hover); color: var(--tu-side-brand); }
.tu-navlink.is-active {
  background: var(--tu-accent);
  color: var(--tu-on-accent);
  font-weight: 600;
}
.tu-navlink.is-active i { opacity: 1; }

.tu-side-foot { margin-top: auto; padding: var(--tu-space-4) 12px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   KNAPPAR — fem roller, inget mer
   ══════════════════════════════════════════════════════════════════════════ */
.tu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tu-space-2);
  font-family: var(--tu-font-body);
  font-size: var(--tu-text-sm);
  font-weight: 600;
  line-height: 1.3;
  padding: var(--tu-space-2) 15px;
  border: 1px solid transparent;
  border-radius: var(--tu-radius);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  background: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.tu-btn:disabled, .tu-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* 1. Primär — en per vy, den åtgärd sidan finns för */
.tu-btn--primary { background: var(--tu-accent); color: var(--tu-on-accent); }
.tu-btn--primary:hover { background: var(--tu-accent-ink); color: var(--tu-on-accent); }

/* 2. Sekundär — alternativ åtgärd */
.tu-btn--secondary { color: var(--tu-ink); border-color: var(--tu-line-strong); background: var(--tu-surface); }
.tu-btn--secondary:hover { border-color: var(--tu-muted); color: var(--tu-ink); }

/* 3. Diskret — tertiär, ser ut som en länk men beter sig som en knapp */
.tu-btn--quiet { color: var(--tu-accent-ink); padding-left: 6px; padding-right: 6px; }
.tu-btn--quiet:hover { color: var(--tu-accent); background: var(--tu-accent-soft); }

/* 4. Destruktiv — alltid outline tills åtgärden bekräftats */
.tu-btn--danger { color: var(--tu-danger); border-color: var(--tu-danger); }
.tu-btn--danger:hover { background: var(--tu-danger); color: var(--tu-on-danger); }

/* 5. Ikon — kräver alltid aria-label */
.tu-btn--icon {
  width: 32px; height: 32px; padding: 0;
  background: var(--tu-surface-2);
  border-color: var(--tu-line);
  color: var(--tu-muted);
}
.tu-btn--icon:hover { color: var(--tu-ink); border-color: var(--tu-line-strong); }

.tu-btn--sm { font-size: var(--tu-text-xs); padding: 5px 11px; }
.tu-btn--block { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   YTOR
   ══════════════════════════════════════════════════════════════════════════ */
.tu-card {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-card-pad);
}
.tu-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tu-space-3);
  margin-bottom: var(--tu-space-3);
}
.tu-card__head h2, .tu-card__head h3, .tu-card__head h4 { margin: 0; font-size: var(--tu-text-lg); }

.tu-grid { display: grid; gap: var(--tu-gap); }
.tu-grid--stats { grid-template-columns: repeat(4, 1fr); }
.tu-grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.tu-stat {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-space-3) var(--tu-space-4);
}
.tu-stat__val {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: 25px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTVYER — en modell för hela appen
   --------------------------------------------------------------------------
   Två former, samma rytm:
     .tu-cards  — kort, för sådant som har en bild eller ett innehåll att
                  visa: övningar, träningar, skisser, matchplaner, playbooks
     .tu-table  — tabell, för sådant man jämför rad mot rad: matcher,
                  spelare, statistik

   Rutnätet var tidigare definierat fem gånger med olika brytpunkter
   (row-cols-sm-6, col-xl-2, row-cols-md-2 …). Här är det ett auto-fill som
   fyller raden med kort av minst --tu-card-min, så antalet spalter följer
   ytan istället för godtyckliga brytpunkter.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tu-card-min, 250px), 1fr));
  gap: var(--tu-gap);
  margin: 0;
  /* Korten i samma rad blir jämnhöga. Det fungerar först nu när
     min-height: 350px nedan är släckt — annars blev varje kort en halv
     skärm tom yta. */
}

/* ── Skissytan ────────────────────────────────────────────────────────────
   Övningsbilderna kommer i två format: helplan är stående (540×720) och
   halvplan liggande (720×510). drawer.css gav dem varsin regel — fast höjd
   256 px för .half, width:70% för .full, max-height:292px för alla — vilket
   gjorde att korten fick olika höga bildytor och att bilder stack utanför.

   Här får alla samma kvadratiska yta med object-fit: contain. Kvadraten är
   kompromissen som ger både stående och liggande skisser störst yta utan att
   korten blir olika höga. Bilden centreras och beskärs aldrig.
   ------------------------------------------------------------------------ */
.tu-cards .ex_img {
  aspect-ratio: 1 / 1;
  height: auto !important;      /* slår .ex_img.half { height: 256px } */
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--tu-space-1);
}
.tu-cards .ex_img img {
  width: auto !important;       /* slår img.full { width: 70% }        */
  max-width: 100%;
  max-height: 100% !important;  /* slår .ex_img img { max-height: 292px } */
  object-fit: contain;
}
.tu-cards .card-body:empty { display: none; }
/* ── Matchplanslistan ─────────────────────────────────────────────────────
   Ungefär hälften av planerna har en ritning. Eftersom en rad i rutnätet
   blir lika hög som sitt högsta kort räckte en enda ritning för att dra upp
   hela raden till 380 px, medan rader utan ritning föll ihop till 88. Varje
   kort får därför samma kvadratiska rityta, tom eller ifylld. */
.list_gameplans { --tu-card-min: 220px; }

/* Titeln får plats för två rader, alltid. Annars blev raden med
   "Syrianska Eskilstuna IF - Säffle SK" 22 px högre än de andra, och
   eftersom rutnätet sträcker en hel rad drogs fyra grannkort med. */
.list_gameplans .sess-title {
  line-height: 1.35 !important;
  min-height: calc(2 * 1.35em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list_gameplans .ex_img {
  aspect-ratio: 1 / 1;
  height: auto !important;
  max-height: none;
}
.list_gameplans .ex_img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tu-surface-2);
  border: 1px dashed var(--tu-line);
  border-radius: var(--tu-radius);
}
.list_gameplans .ex_img--empty span {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-faint);
}


/* drawer.css sätter min-height: 350px på .list_exercises .card-body, vilket
   gav varje kort i varje lista en halv skärm tom yta. Samma specificitet,
   men den här filen laddas sist. */
.tu-cards .card-body { min-height: 0; }
.tu-cards > * > .card { height: 100%; }
.tu-cards--wide   { --tu-card-min: 320px; }
.tu-cards--narrow { --tu-card-min: 200px; }

/* ── Matchrapportkortet ───────────────────────────────────────────────────
   Samma form som träningskortet: "..."-meny och titel i huvudet, klubb-
   märket nere till höger. Skillnaden är innehållet — en träning listar sina
   sektioner, en rapport har ett resultat att läsa av. Resultatet får därför
   bära kortet, och saknas det säger kortet det istället för att stå tomt.
   ------------------------------------------------------------------------ */
.list_reports { --tu-card-min: 230px; }
.list_reports .card-body { position: relative; padding-bottom: 46px; }
.list_reports .sess-title a { color: var(--tu-ink); text-decoration: none; }
.list_reports .sess-title a:hover { color: var(--tu-accent-ink); }

.gr-score {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: var(--tu-display-track);
  color: var(--tu-ink);
}
/* Utan resultat vore en stor tankstreck bara ett streck på vift. Kortet
   säger vad som saknas, i samma rad som resultatet skulle ha stått. */
.gr-score--empty {
  font-size: var(--tu-text-sm);
  color: var(--tu-faint);
  line-height: 1.9;
}
.gr-half {
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  margin-top: 2px;
}

.gr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-1);
  margin-top: var(--tu-space-3);
}
.gr-chip {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  letter-spacing: 0.04em;
  color: var(--tu-muted);
  background: var(--tu-surface-2);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
/* ── Scoutrapportkortet ───────────────────────────────────────────────────
   Samma form som matchrapporten. Formationerna bär kortet — det är dem man
   känner igen en scoutad motståndare på. */
.list_scouts { --tu-card-min: 230px; }
.list_scouts .card-body { position: relative; padding-bottom: 46px; }
.list_scouts .sess-title a { color: var(--tu-ink); text-decoration: none; }
.list_scouts .sess-title a:hover { color: var(--tu-accent-ink); }

.sr-form {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: var(--tu-display-track);
  color: var(--tu-ink);
}
.sr-form__k {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-faint);
  margin-top: 2px;
}
.sr-form--empty {
  font-size: var(--tu-text-sm);
  color: var(--tu-faint);
  line-height: 1.9;
}

.gr-chip--on {
  color: var(--tu-accent-ink);
  background: var(--tu-accent-soft);
  border-color: var(--tu-accent-soft);
}

/* Korten bar tidigare col-*-klasser. I ett rutnät sätter de fel bredd,
   så de neutraliseras här istället för att rensas ur 200 rader markup. */
.tu-cards > * {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  /* Utan detta sätter en bred bild spaltens min-bredd och drar ut just den
     spalten — ett kort blev bredare än de andra. */
  min-width: 0;
}

/* ── Bootstrap-korten får appens form ─────────────────────────────────── */
.card {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  box-shadow: none;
}
.card-header {
  background: var(--tu-surface-2);
  border-bottom: 1px solid var(--tu-line);
  padding: 10px var(--tu-card-pad);
  font-size: var(--tu-text-sm);
  font-weight: 600;
  color: var(--tu-ink);
}
.card-body   { padding: var(--tu-card-pad); }
.card-footer {
  background: transparent;
  border-top: 1px solid var(--tu-line);
  padding: var(--tu-space-2) var(--tu-card-pad);
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
}
.card-title { font-size: var(--tu-text-lg); margin-bottom: var(--tu-space-1); }

/* ── Bootstrap-tabellerna likaså ──────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--tu-line);
  font-size: var(--tu-text-sm);
  margin-bottom: 0;
}
.table > thead th,
.table > thead td {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  border-bottom: 1px solid var(--tu-line-strong);
  padding: 0 var(--tu-cell-pad-x) var(--tu-space-2);
  white-space: nowrap;
}
.table > tbody td { padding: var(--tu-cell-pad-y) var(--tu-cell-pad-x); border-bottom: 1px solid var(--tu-line); vertical-align: middle; }
.table > tbody tr:last-child td { border-bottom: 0; }

/* ── Radlistor byggda av div:ar ───────────────────────────────────────────
   Statistik, RPE och laglistan är tabeller till innehållet men byggda av
   .row/.col. De får samma rytm som en riktig tabell här, så de tre
   listformerna ser ut att höra ihop utan att markupen skrivs om.
   ------------------------------------------------------------------------ */
.row.player {
  border-bottom: 1px solid var(--tu-line);
  align-items: center;
  margin: 0;
  font-size: var(--tu-text-sm);
}
.row.player:hover { background: var(--tu-surface-2); }

/* Första raden är rubrikraden */
.row.player:first-child {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  border-bottom: 1px solid var(--tu-line-strong);
  background: transparent;
}
.row.player:first-child:hover { background: transparent; }

/* Siffror linjerar */
.row.player .exercise-descr { font-variant-numeric: tabular-nums; }

/* Laglistan: en post per rad, inte en punktlista */
.list-group-item, ul.list-unstyled > li > .row {
  border-color: var(--tu-line);
}

/* ── Sidhuvudet på en listvy ──────────────────────────────────────────── */
#page_header { margin: 0; }
#filters { display: flex; gap: var(--tu-space-2); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
#filters .row { margin: 0; flex: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   AKTIVITETSLISTAN
   --------------------------------------------------------------------------
   Var tidigare löpande textrader med länkar inklämda till höger. Nu samma
   radform som övriga listor: datum till vänster, innehåll i mitten, åtgärd
   till höger. Status ligger i chips i stället för som lösa siffror.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tu-space-2);
  margin-bottom: var(--tu-space-4);
}
.tu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--tu-text-sm);
  padding: 5px var(--tu-space-3) 5px 9px;
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius-pill);
  cursor: pointer;
  background: var(--tu-surface);
  user-select: none;
}
.tu-toggle:hover { border-color: var(--tu-muted); }
.tu-toggle:has(input:checked) {
  background: var(--tu-accent-soft);
  border-color: var(--tu-accent);
  color: var(--tu-accent-ink);
  font-weight: 600;
}

/* Månadsraden — tolv flikar som scrollar i stället för att radbrytas */
.tu-month-title { margin: 0 0 var(--tu-space-3); }
.tu-months { overflow-x: auto; margin-bottom: var(--tu-space-4); }
.tu-months ul {
  display: flex;
  gap: var(--tu-space-1);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--tu-space-1);
}
.tu-months a {
  display: block;
  white-space: nowrap;
  font-size: var(--tu-text-sm);
  padding: 5px var(--tu-space-3);
  border-radius: var(--tu-radius-pill);
  color: var(--tu-muted);
  text-decoration: none;
}
.tu-months a:hover { background: var(--tu-surface-2); color: var(--tu-ink); }
.tu-months a.active { background: var(--tu-accent); color: var(--tu-on-accent); font-weight: 600; }

/* ── Raden ────────────────────────────────────────────────────────────── */
#my-events ul.list-group { box-shadow: none; border-radius: var(--tu-radius-lg); overflow: hidden; border: 1px solid var(--tu-line); }

.tu-event {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: var(--tu-space-4);
  align-items: start;
  padding: var(--tu-space-4) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tu-line) !important;
  border-left: 3px solid var(--tu-line-strong) !important;
  background: var(--tu-surface) !important;
}
.tu-event:last-child { border-bottom: 0 !important; }
.tu-event.type-GAME     { border-left-color: var(--tu-accent) !important; }
.tu-event.type-TRAINING { border-left-color: var(--tu-ok) !important; }
.tu-event.today         { background: var(--tu-accent-soft) !important; }
.tu-event.past-event    { background: var(--tu-surface-2) !important; }
.tu-event.past-event .tu-event__day { color: var(--tu-muted); }

.tu-event__date { text-align: center; line-height: 1.1; padding-top: 2px; }
.tu-event__day {
  display: block;
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.tu-event__wd {
  display: block;
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
}

.tu-event__main { min-width: 0; }
.tu-event__top { display: flex; align-items: center; gap: var(--tu-space-2); flex-wrap: wrap; }
.tu-event__title { margin: 0; font-size: var(--tu-text-lg); }
.tu-event__title a { color: var(--tu-ink); text-decoration: none; }
.tu-event__title a:hover { color: var(--tu-accent-ink); text-decoration: underline; }
.tu-event__meta { margin: 3px 0 0; font-size: var(--tu-text-sm); color: var(--tu-muted); }
.tu-event__details { margin: 5px 0 0; font-size: var(--tu-text-sm); color: var(--tu-muted); }
.tu-event__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--tu-space-2); }
.tu-event__chips a { text-decoration: none; }
.tu-event__chips a:hover { border-color: var(--tu-muted); }

.tu-chip--type {
  background: transparent;
  border-color: var(--tu-line-strong);
  color: var(--tu-muted);
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
}

.tu-event__actions { display: flex; gap: var(--tu-space-2); flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 700px) {
  .tu-event {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: var(--tu-space-3);
  }
  .tu-event__actions { grid-column: 2; justify-content: flex-start; }
  .tu-event__day { font-size: 20px; }
}

/* ── Tomt läge ────────────────────────────────────────────────────────── */
.tu-empty {
  border: 1px dashed var(--tu-line-strong);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-space-6) var(--tu-space-5);
  text-align: center;
  color: var(--tu-muted);
  background: var(--tu-surface);
}
.tu-empty h3 { color: var(--tu-ink); margin-bottom: var(--tu-space-2); }

/* ── Chips / status ───────────────────────────────────────────────────── */
.tu-chip {
  display: inline-block;
  font-size: var(--tu-text-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--tu-radius-pill);
  background: var(--tu-surface-2);
  color: var(--tu-muted);
  border: 1px solid var(--tu-line);
}
/* Bootstrap-märken och växlar följer paletten ─────────────────────────── */
.badge {
  font-family: var(--tu-font-body);
  font-size: var(--tu-text-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--tu-radius-pill);
}
.badge.bg-primary {
  background: var(--tu-accent-soft) !important;
  color: var(--tu-accent-ink) !important;
}

/* Taggarna på övningskorten var vit text i vikt 250 på mellangrå botten vid
   11 px. Fyllningen behöver synas mot det vita kortet och texten behöver
   full kontrast — ljusgrå text på nästan vit botten föll bort i 11 px. */
.badge.tagz,
.badge.text-bg-secondary {
  background: var(--tu-line) !important;
  color: var(--tu-ink) !important;
  border: 0;
  font-weight: 600 !important;
  font-size: 11.5px;
  padding: var(--tu-space-1) 10px;
  letter-spacing: .005em;
}
.form-check-input:checked {
  background-color: var(--tu-accent);
  border-color: var(--tu-accent);
}
.form-check-input:focus {
  border-color: var(--tu-accent);
  box-shadow: var(--tu-focus);
}

.tu-chip--ok     { background: var(--tu-ok-soft);     color: var(--tu-ok-ink);     border-color: transparent; }
.tu-chip--warn   { background: var(--tu-warn-soft);   color: var(--tu-warn-ink);   border-color: transparent; }
.tu-chip--danger { background: var(--tu-danger-soft); color: var(--tu-danger-ink); border-color: transparent; }
.tu-chip--info   { background: var(--tu-info-soft);   color: var(--tu-info-ink);   border-color: transparent; }

/* ── Tabeller ─────────────────────────────────────────────────────────── */
.tu-table { width: 100%; border-collapse: collapse; font-size: var(--tu-text-sm); }
.tu-table th {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  text-align: left;
  padding: 0 var(--tu-cell-pad-x) var(--tu-space-2);
  border-bottom: 1px solid var(--tu-line-strong);
  white-space: nowrap;
}
.tu-table td { padding: var(--tu-cell-pad-y) var(--tu-cell-pad-x); border-bottom: 1px solid var(--tu-line); vertical-align: middle; }
.tu-table tbody tr:last-child td { border-bottom: 0; }
.tu-table tbody tr:hover { background: var(--tu-surface-2); }
.tu-table .tu-td-date { font-family: var(--tu-font-label); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tu-table .tu-td-actions { text-align: right; white-space: nowrap; }
/* Tabellen är ett objekt på sidan, precis som korten i listvyerna: vit yta
   mot sidans grå botten, samma ram och radie. Utan den flöt raderna direkt
   på bakgrunden — och eftersom --tu-bg ligger nära vitt såg tabellen ut att
   vara vit fast den var helt genomskinlig. */
.tu-table__scroll {
  overflow-x: auto;
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-space-3) var(--tu-space-2);
}
.tu-table__scroll > .tu-table { margin: 0; }

/* ── Matchlistan ──────────────────────────────────────────────────────────
   Matcher jämförs rad mot rad, så de hör hemma i en tabell. Dokumenten
   visas som markörer i stället för knappar: förut satt en röd "Skapa
   matchplan" i varje kommande rad, så det man inte gjort skrek högst av
   allt. Att skapa ligger i radens "..."-meny, som i de andra listorna. */
/* Kommande och tidigare matcher är två tabeller. Med innehållsstyrd bredd
   hamnade "Motståndare" på olika ställen i dem, vilket gjorde sidan skev.
   Fasta spaltbredder låter dem linjera som en enda lista.

   Bredderna räknas med cellens vaddering inräknad. Utan border-box låg
   112 px padding utanför de deklarerade bredderna, och eftersom fyra av
   fem spalter var låsta åt de 96 px av den femte: "Plats" fick 0 px och
   rubriken rann rakt in i "Dokument". Mittspalterna är dessutom procent
   hela vägen, så en trång yta krymper dem proportionellt i stället för
   att nolla den enda som inte har en egen bredd. */
.tu-games { table-layout: fixed; }
.tu-games th, .tu-games td { box-sizing: border-box; }
.tu-games th { white-space: normal; }
.tu-games th:nth-child(1), .tu-games td:nth-child(1) { width: 112px; }
.tu-games th:nth-child(2), .tu-games td:nth-child(2) { width: 26%; }
.tu-games th:nth-child(3), .tu-games td:nth-child(3) { width: 84px; }
.tu-games th:nth-child(4), .tu-games td:nth-child(4) { width: 18%; }
.tu-games th:nth-child(5), .tu-games td:nth-child(5) { width: 34%; }
.tu-games th:nth-child(6), .tu-games td:nth-child(6) { width: 56px; }
.tu-games td:nth-child(2), .tu-games td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tu-table .tu-td-date { line-height: 1.3; }
.tu-table .tu-date { display: block; color: var(--tu-ink); }
.tu-table .tu-time { display: block; color: var(--tu-faint); font-size: 11px; }
.tu-table .tu-td-result { line-height: 1.3; white-space: nowrap; }
.tu-table .tu-score {
  display: block;
  color: var(--tu-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tu-table .tu-rowlink {
  color: var(--tu-ink);
  text-decoration: none;
  font-weight: 500;
}
.tu-table .tu-rowlink:hover { color: var(--tu-accent-ink); }
.tu-table .tu-muted { color: var(--tu-muted); }
.tu-table .tu-empty { color: var(--tu-faint); text-align: center; padding: var(--tu-space-5) 12px; }

.tu-docmarks { display: flex; flex-wrap: wrap; gap: var(--tu-space-1); }
.tu-docmark {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--tu-accent-ink);
  background: var(--tu-accent-soft);
  border: 1px solid var(--tu-accent-soft);
  border-radius: var(--tu-radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
.tu-docmark:hover { border-color: var(--tu-accent); color: var(--tu-accent-ink); }

/* Matchlistan på en telefon ───────────────────────────────────────────────
   Fem spalter ryms inte på 390 px, och table-layout: fixed skrollar inte
   när det blir trångt — den klämmer ihop spalterna till containerns bredd.
   Rubrikerna är nowrap och flöt därför ihop ovanpå varandra till en gröt,
   och motståndarspalten krympte till några pixlar: med overflow: hidden
   syntes matchen inte alls, bara dokumentmarkörerna som får brytas. En
   vågrät skrollyta hade gömt matchen lika bra, så raden blir ett kort i
   stället — datum, match, plats under varandra, markörerna underst och
   "..."-menyn i hörnet.

   Gränsen är 900 px, samma som där sidomenyn blir en flikrad: i hela det
   läget är ytan under 820 px. Liggande telefon ligger mitt i det spannet,
   så den fick samma gröt som stående innan. */
@media (max-width: 900px) {
  .tu-games { table-layout: auto; }
  .tu-games thead { display: none; }
  .tu-games tbody,
  .tu-games td { display: block; }

  .tu-games tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 40px;
    grid-template-areas:
      "when  when  act"
      "who   score act"
      "where where act"
      "docs  docs  docs";
    align-items: start;
    column-gap: var(--tu-space-2);
    padding: var(--tu-space-3) 4px;
    border-bottom: 1px solid var(--tu-line);
  }
  .tu-games tbody tr:last-child { border-bottom: 0; }
  .tu-games tbody tr:hover { background: transparent; }

  /* Spaltbredderna hör till det breda läget och måste bort här, annars
     styr de rutnätets celler. */
  .tu-games td,
  .tu-games tbody td:nth-child(1),
  .tu-games tbody td:nth-child(2),
  .tu-games tbody td:nth-child(3),
  .tu-games tbody td:nth-child(4),
  .tu-games tbody td:nth-child(5),
  .tu-games tbody td:nth-child(6) {
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  .tu-games tbody td:nth-child(1) { grid-area: when; }
  .tu-games tbody td:nth-child(2) { grid-area: who; }
  .tu-games tbody td:nth-child(3) { grid-area: score; text-align: right; margin-top: 2px; }
  .tu-games tbody td:nth-child(4) { grid-area: where; }
  .tu-games tbody td:nth-child(5) { grid-area: docs; }
  .tu-games tbody td:nth-child(6) { grid-area: act; text-align: right; }
  .tu-games tbody td:nth-child(3):empty { display: none; }
  .tu-games .tu-score { font-size: 15px; }

  /* Datum och tid stod på var sin rad i tabellen. Här är de överraden och
     ryms bredvid varandra. */
  .tu-games .tu-td-date { display: flex; gap: 6px; align-items: baseline; }
  .tu-games .tu-date,
  .tu-games .tu-time { display: inline; }

  /* Matchen är radens rubrik nu, inte en cell i mängden. Den får brytas —
     ellipsen hörde till den fasta spalten. */
  .tu-games tbody td:nth-child(2),
  .tu-games tbody td:nth-child(4) {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .tu-games tbody td:nth-child(2) { font-size: 15px; margin-top: 2px; }
  .tu-games tbody td:nth-child(4) { font-size: var(--tu-text-xs); margin-top: 2px; }
  .tu-games tbody td:nth-child(4):empty { display: none; }
  .tu-games .tu-docmarks { margin-top: var(--tu-space-2); }

  /* "Inga matcher här." är en ensam cell med colspan — den ska lägga sig
     över hela raden, inte i datumrutan. */
  .tu-games tbody td.tu-empty {
    grid-area: auto;
    grid-column: 1 / -1;
    padding: var(--tu-space-4) 12px;
  }
}
/* Statusrad i redigeringsvyn — till exempel att en inbjudan väntar på svar.
   Låg tidigare som lös text mitt i knappraden. */
.tu-note {
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   STATISTIKVYERNA
   --------------------------------------------------------------------------
   En statistikvy finns för att jämföra. Siffrorna behöver därför en nämnare
   och en form som går att skanna — inte bara ett tal i en cell.
   ══════════════════════════════════════════════════════════════════════════ */

/* Nyckeltalen ramar in resten: utan dem säger "75" ingenting. Låg tidigare
   som två kort i en smal högerspalt. */
.tu-keyfigures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--tu-gap);
  margin-bottom: var(--tu-space-5);
}
.tu-kf {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-space-4);
}
.tu-kf .v {
  display: block;
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: var(--tu-display-track);
  color: var(--tu-ink);
}
.tu-kf .k {
  display: block;
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-faint);
  margin-top: var(--tu-space-1);
}

/* Flikarna: samma form som matchrapportens, men som länkar eftersom varje
   flik är sin egen sidladdning med egen fråga. */
.tu-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--tu-line);
  margin-bottom: var(--tu-space-4);
}
.tu-tab {
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
  text-decoration: none;
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tu-tab:hover { color: var(--tu-ink); }
.tu-tab.is-active { color: var(--tu-ink); border-bottom-color: var(--tu-accent); font-weight: 500; }

.tu-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tu-space-2);
  margin-bottom: var(--tu-space-4);
}
.tu-filterbar .tu-label { color: var(--tu-faint); margin-right: 2px; }
.tu-filterbar input[type="date"] { min-width: 150px; }
.tu-filterbar .tu-select--inline { margin-left: auto; }

/* Sorterbara rubriker */
.tu-table[data-sortable] th[data-sort] { cursor: pointer; user-select: none; }
.tu-table[data-sortable] th[data-sort]:hover { color: var(--tu-ink); }
.tu-table[data-sortable] th[data-sort]::after {
  content: "";
  display: inline-block;
  margin-left: 5px;
  border: 3px solid transparent;
  vertical-align: middle;
  opacity: 0;
}
.tu-table[data-sortable] th.is-asc::after  { border-bottom-color: var(--tu-accent); border-top-width: 0; opacity: 1; }
.tu-table[data-sortable] th.is-desc::after { border-top-color: var(--tu-accent); border-bottom-width: 0; opacity: 1; }

/* Siffror ska gå att jämföra lodrätt, alltså högerställda och med samma
   teckenbredd. */
.tu-stats .tu-td-count { text-align: right; font-variant-numeric: tabular-nums; }
.tu-stats .tu-td-total { font-weight: 600; color: var(--tu-ink); }
.tu-stats .tu-td-rate  { color: var(--tu-muted); }
/* Siffror högerställs, text vänsterställs — rubriken ska stå över sitt
   innehåll, inte i motsatt kant. */
.tu-stats th[data-sort="num"] { text-align: right; }
.tu-stats th[data-sort="text"] { text-align: left; }
.tu-stats th:not([data-sort]):not(:first-child):not(:last-child) { text-align: right; }
/* Ett datum är ingen kvantitet — det ska stå vänsterställt under sin
   rubrik, inte högerställt som en summa. */
.tu-stats .tu-td-date, .tu-stats th.tu-th-date { width: 120px; white-space: nowrap; }
.tu-stats th.tu-th-date[data-sort] { text-align: left; }

/* Närvarolistan: aktivitetens namn är det man läser, så den kolumnen får
   resten av bredden. Utan fasta bredder svällde "Typ" och tryckte ihop
   namnet till fem rader. */
.tu-att { table-layout: fixed; }
.tu-att th:nth-child(2), .tu-att td:nth-child(2) { width: 130px; }
.tu-att .tu-td-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-stats th.tu-th-actions, .tu-stats td.tu-td-actions { width: 56px; }

/* Närvarocellen: stapeln bakom, procenten framför, antalet som fotnot.
   Spalten har fast bredd — utan den sträckte sig stapeln över halva sidan
   och rubriken hamnade långt från sitt innehåll. */
.tu-stats--att { table-layout: fixed; }
.tu-stats--att th:nth-child(2), .tu-stats--att td:nth-child(2) { width: 190px; text-align: left; }
.tu-stats--att th:nth-child(3), .tu-stats--att td:nth-child(3),
.tu-stats--att th:nth-child(4), .tu-stats--att td:nth-child(4),
.tu-stats--att th:nth-child(5), .tu-stats--att td:nth-child(5) { width: 110px; }
.tu-stats .tu-td-pct { min-width: 0; }
.tu-stats .tu-bar {
  height: 4px;
  border-radius: var(--tu-radius-sm);
  background: var(--tu-line);
  overflow: hidden;
  margin-bottom: var(--tu-space-1);
}
.tu-stats .tu-bar span { display: block; height: 100%; background: var(--tu-accent); }
.tu-stats .tu-pct {
  font-variant-numeric: tabular-nums;
  color: var(--tu-ink);
  margin-right: 6px;
}
.tu-stats .tu-of {
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
  font-variant-numeric: tabular-nums;
}

/* Nyckeltal med en förändring under sig. Jämförelsen är mot en lika lång
   period omedelbart före — annars går talen inte att ställa mot varandra. */
.tu-kf .d {
  display: block;
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
  margin-top: 6px;
}
.tu-kf .d.is-up   { color: var(--tu-trend-up); }
.tu-kf .d.is-down { color: var(--tu-trend-down); }

/* Aktivitetstypen: ikon och ord, så raden går att läsa utan att hovra. */
.tu-stats .tu-td-type { white-space: nowrap; color: var(--tu-muted); }
.tu-stats .tu-td-type i { width: 16px; text-align: center; margin-right: 7px; color: var(--tu-faint); }
.tu-stats .tu-type-label { font-size: var(--tu-text-sm); }

.tu-sect-note {
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
  margin-left: auto;
}

/* ── Belastning (ACWR) ────────────────────────────────────────────────────
   Fyra zoner. Legenden har alltid beskrivit fyra, men koden hade tre och
   "Varning" kunde aldrig inträffa. */
.tu-acwr-low  { color: var(--tu-scale-low); }
.tu-acwr-ok   { color: var(--tu-scale-ok); }
.tu-acwr-warn { color: var(--tu-scale-warn-ink); }
.tu-acwr-high { color: var(--tu-scale-high-ink); }

.tu-rpe { table-layout: fixed; }
.tu-rpe th:nth-child(2), .tu-rpe td:nth-child(2) { width: 200px; text-align: left; }
.tu-rpe th:nth-child(3), .tu-rpe td:nth-child(3),
.tu-rpe th:nth-child(4), .tu-rpe td:nth-child(4),
.tu-rpe th:nth-child(5), .tu-rpe td:nth-child(5),
.tu-rpe th:nth-child(6), .tu-rpe td:nth-child(6),
.tu-rpe th:nth-child(7), .tu-rpe td:nth-child(7) { width: 110px; }

/* Stapeln går 0–2,0 med markeringar vid 0,8 och 1,3, så zonerna syns utan
   att man läser siffran. Ersätter ett ifyllt färgblock bakom talet. */
.tu-acwr-bar {
  position: relative;
  height: 5px;
  border-radius: var(--tu-radius-sm);
  background: var(--tu-line);
  overflow: hidden;
  margin-bottom: 5px;
}
.tu-acwr-bar::before, .tu-acwr-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tu-surface);
  z-index: 2;
}
.tu-acwr-bar::before { left: 40%; }   /* 0,80 av 2,0 */
.tu-acwr-bar::after  { left: 65%; }   /* 1,30 av 2,0 */
.tu-acwr-bar span { display: block; height: 100%; }
.tu-acwr-bar span.is-low  { background: var(--tu-scale-low); }
.tu-acwr-bar span.is-ok   { background: var(--tu-scale-ok); }
.tu-acwr-bar span.is-warn { background: var(--tu-scale-warn); }
.tu-acwr-bar span.is-high { background: var(--tu-scale-high); }

.tu-acwr-v { font-variant-numeric: tabular-nums; margin-right: 6px; }
.tu-acwr-l { font-size: var(--tu-text-xs); color: var(--tu-faint); }

.tu-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tu-space-4);
  margin-top: var(--tu-space-4);
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
}
.tu-legend__k { color: var(--tu-faint); }
.tu-legend__i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tu-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tu-dot.is-low  { background: var(--tu-scale-low); }
.tu-dot.is-ok   { background: var(--tu-scale-ok); }
.tu-dot.is-warn { background: var(--tu-scale-warn); }
.tu-dot.is-high { background: var(--tu-scale-high); }

/* xG-vyn */
.tu-xg .tu-td-diff.is-up   { color: var(--tu-trend-up); }
.tu-xg .tu-td-diff.is-down { color: var(--tu-trend-down); }
.tu-xg .tu-td-result { font-weight: 600; }
.tu-xg .tu-td-result.is-win  { color: var(--tu-trend-up); }
.tu-xg .tu-td-result.is-loss { color: var(--tu-trend-down); }

/* Summeringsrader — halvlek och totalt — ska gå att skilja från kvartarna. */
.tu-periods th[scope="row"], .tu-zones th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--tu-ink);
  padding: var(--tu-cell-pad-y) var(--tu-cell-pad-x);
  border-bottom: 1px solid var(--tu-line);
  font-size: var(--tu-text-sm);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--tu-font-body);
  white-space: nowrap;
}
.tu-periods tbody tr:last-child th, .tu-zones tbody tr:last-child th { border-bottom: 0; }
.tu-periods tr.is-sum th, .tu-periods tr.is-sum td,
.tu-zones tr.is-sum th, .tu-zones tr.is-sum td {
  font-weight: 600;
  background: var(--tu-surface-2);
}
.tu-zone-note { color: var(--tu-faint); font-size: var(--tu-text-xs); margin-left: 6px; }

/* Skottfliken: andelen står under antalet i samma cell. Antalet är det man
   läser, andelen det man jämför med — därför mindre och dämpad, inte en
   egen kolumn bredvid varje tal. */
.tu-shot-pct {
  display: block;
  font-size: var(--tu-text-xs);
  font-weight: 400;
  color: var(--tu-faint);
  line-height: 1.3;
}
/* Snittraden visar inga andelar, så dess celler ska inte reservera plats
   för en rad som inte finns. */
.tu-shots tr.is-avg td { vertical-align: top; }

/* Tabellen har två nivåer. På mål, blockade och utanför delar upp alla
   skott; räddade och mål delar i sin tur upp dem som gick på mål. Den tunna
   linjen före kolumn 6 och 12 markerar var den andra nivån börjar, så att
   man inte försöker addera fem kolumner till skottsumman. */
.tu-shots th:nth-child(6),  .tu-shots td:nth-child(6),
.tu-shots th:nth-child(12), .tu-shots td:nth-child(12) {
  border-left: 1px solid var(--tu-line);
}
.tu-shots .tu-td-goal { font-weight: 600; }

/* Kolumn 8 börjar motståndarnas halva. Linjen där är kraftigare än den
   inom halvan, så tabellens två sidor syns först. */
.tu-shots th:nth-child(8), .tu-shots td:nth-child(8) {
  border-left: 2px solid var(--tu-line-strong);
}

/* Utfällbar matchdetalj i Matcher. Raden är osynlig tills den öppnas, så
   den får varken ram eller hover som en vanlig rad. */
/* Två knappar i cellen — fäll ut och "..." — så den behöver mer än de
   56 px en ensam knapp får. Klassen dubbleras för att vinna över
   .tu-stats td.tu-td-actions, som är mer specifik än en ensam klass. */
.tu-stats.tu-xg th.tu-th-actions,
.tu-stats.tu-xg td.tu-td-actions { width: 104px; white-space: nowrap; text-align: right; }

/* Bootstraps .dropdown är blocknivå, så knapparna hamnade under varandra. */
.tu-xg .tu-td-actions .dropdown { display: inline-block; vertical-align: middle; }
.tu-xg .tu-td-actions .tu-expand { vertical-align: middle; }
.tu-xg .tu-expand { margin-right: var(--tu-space-1); }
.tu-xg .tu-expand i { transition: transform 0.15s ease; font-size: 11px; }
.tu-xg .tu-expand[aria-expanded="true"] i { transform: rotate(180deg); }

.tu-xg tr.tu-detail-row:hover { background: transparent; }
.tu-xg tr.tu-detail-row > td { padding: 0; border-bottom: 0; }
.tu-xg tr.tu-detail-row .collapse.show + *, .tu-detail { padding: 0; }
.tu-detail {
  background: var(--tu-surface-2);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius);
  margin: 0 0 var(--tu-space-3);
  padding: var(--tu-space-2) var(--tu-space-3);
}
.tu-periods--inline { font-size: var(--tu-text-xs); }
.tu-periods--inline th, .tu-periods--inline td { padding: 7px var(--tu-cell-pad-x); }
.tu-periods--inline tr.is-sum th, .tu-periods--inline tr.is-sum td { background: transparent; }
.tu-periods--inline tbody tr:last-child th,
.tu-periods--inline tbody tr:last-child td { border-bottom: 0; }

/* Snittraden är inte en summa utan ett annat mått — den markeras med en
   tydligare överkant i stället för fyllning. */
.tu-periods tr.is-avg th, .tu-periods tr.is-avg td {
  border-top: 1px solid var(--tu-line-strong);
  color: var(--tu-muted);
}

.tu-note--after { margin-top: var(--tu-space-4); }
.tu-note--after a { color: var(--tu-accent-ink); }

/* ── Spelarlistan ─────────────────────────────────────────────────────────
   Samma tabellmodell som matcherna. Positions- och rollmärkena kommer från
   get_positions() / get_coaches() med bootstrapfärger och inline font-size —
   här får de appens form i stället. */
.tu-members { table-layout: fixed; }
.tu-members th:nth-child(1), .tu-members td:nth-child(1) { width: 48px; }
.tu-members th:nth-child(3), .tu-members td:nth-child(3) { width: 26%; }
.tu-members th:nth-child(4), .tu-members td:nth-child(4) { width: 19%; }
.tu-members th:nth-child(5), .tu-members td:nth-child(5) { width: 64px; text-align: center; }
.tu-members th:nth-child(6), .tu-members td:nth-child(6) { width: 56px; }

.tu-members td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-members .tu-td-num {
  font-family: var(--tu-font-label);
  font-variant-numeric: tabular-nums;
  color: var(--tu-faint);
}
.tu-members .tu-td-contact { line-height: 1.35; }
.tu-members .tu-td-contact a { color: var(--tu-muted); text-decoration: none; }
.tu-members .tu-td-contact a:hover { color: var(--tu-accent-ink); }
.tu-members .tu-td-cell {
  display: block;
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
  font-variant-numeric: tabular-nums;
}
.tu-members .tu-td-active .form-check { display: flex; justify-content: center; margin: 0; padding: 0; }
.tu-members .tu-td-active .form-check-input { margin: 0; float: none; cursor: pointer; }

/* Märkena får samma form som chipsen i korten. Inline font-size i markupen
   slår igenom, så storleken sätts med !important. */
.tu-members .badge {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  color: var(--tu-muted) !important;
  background: var(--tu-surface-2) !important;
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-pill);
  padding: 3px 9px;
  margin-right: 3px;
}

.tu-docmark--none {
  color: var(--tu-faint);
  background: transparent;
  border-color: transparent;
  padding-left: 0;
}

/* Andra sektionsrubriken behöver luft från tabellen ovanför. */
.tu-sect-h--later { margin-top: var(--tu-space-6, 32px); }


/* ── Formulär ─────────────────────────────────────────────────────────── */
.tu-input, .tu-select {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius);
  padding: var(--tu-space-2) var(--tu-space-3);
  font-size: var(--tu-text-sm);
  color: var(--tu-ink);
  font-family: var(--tu-font-body);
  width: 100%;
}
.tu-input--inline { width: auto; min-width: 190px; }
.tu-select--inline { width: auto; min-width: 170px; }
.tu-input::placeholder { color: var(--tu-faint); }
.tu-input:focus, .tu-select:focus { border-color: var(--tu-accent); box-shadow: var(--tu-focus); outline: none; }

/* ══════════════════════════════════════════════════════════════════════════
   TOM-SELECT
   --------------------------------------------------------------------------
   Stilmallen pekade på /css/tom-select.min.css som inte finns — filen heter
   tom-select.default.min.css. Därför renderades varje tom-select som en rå
   listbox. Här får den samma fält- och chipsform som resten av appen.
   ══════════════════════════════════════════════════════════════════════════ */
.ts-wrapper { min-width: 180px; }

/* TomSelect kopierar originalfältets klasser till omslaget. Fältet var alltså
   .tu-select (eller .form-control, eller .form-select) både på omslaget och —
   via .ts-control — på kontrollen inuti, så varje tom-select ritades med två
   ramar utanpå varandra. Omslaget är bara en behållare; ramen, botten och
   luften hör till kontrollen.

   Klassen dubbleras för att gå före ett enskilt .form-control i bootstrap
   utan att behöva !important. */
.ts-wrapper.ts-wrapper {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  height: auto;
  min-height: 0;
}
.ts-wrapper.ts-wrapper > .ts-control { width: 100%; }

.ts-control {
  background: var(--tu-surface) !important;
  border: 1px solid var(--tu-line-strong) !important;
  border-radius: var(--tu-radius) !important;
  /* Samma luft som .tu-input, annars står tom-selecten 6 px lägre än
     fälten bredvid på samma rad. */
  padding: var(--tu-space-2) var(--tu-space-3) !important;
  font-size: var(--tu-text-sm);
  color: var(--tu-ink);
  box-shadow: none !important;
  gap: 5px;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--tu-accent) !important;
  box-shadow: var(--tu-focus) !important;
}
.ts-control input { font-size: var(--tu-text-sm); color: var(--tu-ink); }
.ts-control input::placeholder { color: var(--tu-faint); }

/* Valda värden blir chips.
   Standardtemat lägger text-shadow, gradient och inre skugga på [data-value]
   — arvet från ett gammalt knappmanér. Skuggan gör texten suddig i den här
   storleken, så alla tre släcks explicit. */
.ts-wrapper.multi .ts-control > .item,
.ts-wrapper.multi .ts-control [data-value] {
  background: var(--tu-accent-soft) !important;
  background-image: none !important;
  color: var(--tu-accent-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: var(--tu-radius-pill) !important;
  font-size: var(--tu-text-xs);
  font-weight: 600;
  padding: 3px var(--tu-space-1) 3px 10px !important;
  margin: 1px !important;
  display: inline-flex;
  align-items: center;
  gap: var(--tu-space-1);
}
.ts-wrapper.multi .ts-control > .item .remove {
  border: 0 !important;
  padding: 0 6px !important;
  color: var(--tu-accent-ink);
  opacity: .65;
}
.ts-wrapper.multi .ts-control > .item .remove:hover { opacity: 1; background: transparent !important; }

/* Listan */
.ts-dropdown {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius);
  box-shadow: var(--tu-shadow-lift);
  margin-top: var(--tu-space-1);
  font-size: var(--tu-text-sm);
  color: var(--tu-ink);
}
.ts-dropdown .option { padding: 7px var(--tu-space-3); }
.ts-dropdown .active { background: var(--tu-accent-soft); color: var(--tu-accent-ink); }
.ts-dropdown .optgroup-header {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   TOAST — en enda, global. Anropas med trainus.toast(text, typ)
   ══════════════════════════════════════════════════════════════════════════ */
#tu-toasts {
  position: fixed;
  right: var(--tu-space-5);
  bottom: var(--tu-space-5);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--tu-space-2);
  pointer-events: none;
}
.tu-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tu-toast-bg);
  color: var(--tu-toast-fg);
  border-radius: var(--tu-radius);
  padding: var(--tu-space-3) var(--tu-space-4);
  font-size: var(--tu-text-sm);
  box-shadow: var(--tu-shadow-lift);
  max-width: 340px;
  pointer-events: auto;
  animation: tu-toast-in .18s ease-out;
}
.tu-toast__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tu-ok); }
.tu-toast--error   .tu-toast__dot { background: var(--tu-danger); }
.tu-toast--warning .tu-toast__dot { background: var(--tu-warn); }
.tu-toast--info    .tu-toast__dot { background: var(--tu-info); }
.tu-toast.is-leaving { opacity: 0; transition: opacity .2s; }

@keyframes tu-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ÖVNINGSEDITORN
   --------------------------------------------------------------------------
   Ritbordet till vänster, texten i en panel till höger med tre flikar.
   Tidigare låg fem textfält staplade i en smal kolumn och knapparna
   1000 px längre ned — sidan var 1476 px hög för att rymma tomma fält.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-editor { display: flex; flex-direction: column; gap: var(--tu-space-4); }

.tu-ed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tu-space-4);
  flex-wrap: wrap;
}
.tu-ed-back { font-size: var(--tu-text-sm); color: var(--tu-muted); text-decoration: none; display: inline-block; margin-bottom: var(--tu-space-1); }
.tu-ed-back:hover { color: var(--tu-accent-ink); }

/* Namnet är sidans rubrik och redigeras direkt */
.tu-ed-title {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: var(--tu-h1);
  letter-spacing: var(--tu-display-track);
  color: var(--tu-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tu-radius);
  padding: 2px var(--tu-space-2);
  margin-left: -8px;
  width: 100%;
  max-width: 560px;
  line-height: 1.15;
}
/* style.css (Tailwind-preflight, laddas bara i drawer) sätter kant på alla
   element. Rubriken ska se ut som en rubrik tills man hovrar i den, därav
   !important här — det är en riktad override av en universell regel. */
input[type="text"].tu-ed-title { border-color: transparent !important; background: transparent; }
.tu-ed-title:hover { border-color: var(--tu-line) !important; }
.tu-ed-title:focus { border-color: var(--tu-accent) !important; }
.tu-ed-title:focus { border-color: var(--tu-accent); box-shadow: var(--tu-focus); outline: none; background: var(--tu-surface); }
.tu-ed-title::placeholder { color: var(--tu-faint); }

.tu-ed-tags { margin-top: var(--tu-space-2); max-width: 560px; }
.tu-ed-actions { display: flex; gap: var(--tu-space-2); align-items: center; flex: none; }

/* Ritbordets duk har fast bredd (fabric.js sätter pixelmått), så kolumnen
   ska följa innehållet i stället för att sträckas. Annars hamnar duken kvar
   till vänster med ett växande tomrum fram till textpanelen. */
.tu-ed-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-4);
  align-items: flex-start;
}
/* Duken skalas av React (viewportTransform) efter hur bred den här kolumnen
   är. Därför måste kolumnen få sin bredd av FÖRÄLDERN — med flex:0 0 auto blev
   den innehållsstyrd, dvs duken bestämde bredden som duken skulle anpassas
   efter, och skalan fastnade på 1. Textpanelen har egen flex-basis och hoppar
   fortfarande ner under ritbordet när utrymmet inte räcker. */
.tu-ed-canvas { flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* Verktygspanelen ligger i en vit Tailwind-behållare (bg-white) som syntes
   som en tom vit spalt bredvid duken. Den blir genomskinlig här — själva
   verktygskortet behåller sin egen yta. Kräver ingen ombyggnad av React-
   komponenten; klassnamnen är stabila. */
#field-canvas div:has(> .shadow-tool),
#field-gameplan div:has(> .shadow-tool),
#field-playbook div:has(> .shadow-tool) {
  background: transparent !important;
}
[id^="field-"] .shadow-tool {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  box-shadow: none;
}
/* React-komponenten sätter min-h-screen på sin rot, vilket gav sidan en
   hel skärmhöjd tom yta under ritbordet. */
.tu-ed-canvas .min-h-screen { min-height: 0; }
.tu-ed-side {
  flex: 1 1 340px;
  max-width: 440px;
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-card-pad);
}

/* ── Stegremsan ───────────────────────────────────────────────────────── */
.tu-steps { display: flex; align-items: center; gap: var(--tu-space-2); margin-bottom: var(--tu-space-3); flex-wrap: wrap; }
.tu-steps__label {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
}
.tu-step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius);
  background: var(--tu-surface);
  color: var(--tu-ink);
  font-size: var(--tu-text-sm);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.tu-step:hover { border-color: var(--tu-muted); color: var(--tu-ink); }
.tu-step.is-active {
  background: var(--tu-accent);
  border-color: var(--tu-accent);
  color: var(--tu-on-accent);
}
.tu-step--add { border-style: dashed; color: var(--tu-muted); cursor: pointer; font-weight: 400; font-size: 17px; }

/* ── Orientering (skisser) ────────────────────────────────────────────────
   Stående eller liggande ritbord. Segmenterad kontroll i stället för två
   fristående knappar, eftersom det är ett val mellan två lägen — inte två
   olika åtgärder.
   ------------------------------------------------------------------------ */
.tu-orient {
  display: inline-flex;
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius);
  overflow: hidden;
  background: var(--tu-surface);
}
.tu-orient__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  color: var(--tu-muted);
  text-decoration: none;
  font-size: 13px;
  border-right: 1px solid var(--tu-line);
}
.tu-orient__btn:last-child { border-right: 0; }
.tu-orient__btn:hover { background: var(--tu-surface-2); color: var(--tu-ink); }
.tu-orient__btn.is-active {
  background: var(--tu-accent);
  color: var(--tu-on-accent);
}
/* Klicklyssnaren matchar på elementets id, så ikonen får inte bli target. */
.tu-orient__btn i,
#save_sketch i { pointer-events: none; }

/* ── Animeringsraden ──────────────────────────────────────────────────── */
.tu-anim {
  display: flex;
  align-items: center;
  gap: var(--tu-space-2);
  flex-wrap: wrap;
  margin-top: var(--tu-space-3);
  padding: var(--tu-space-2) var(--tu-space-3);
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius);
}
.tu-anim__label {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  margin-right: var(--tu-space-1);
}
.tu-anim__none { font-size: var(--tu-text-sm); color: var(--tu-faint); margin-right: auto; }

/* ── Textpanelens flikar ──────────────────────────────────────────────── */
.tu-ed-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--tu-line); margin-bottom: var(--tu-space-4); }
.tu-ed-tabs button {
  font-family: var(--tu-font-body);
  font-size: 12.5px;
  font-weight: 600;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 7px 11px;
  color: var(--tu-muted);
  cursor: pointer;
}
.tu-ed-tabs button:hover { color: var(--tu-ink); }
.tu-ed-tabs button.is-active { color: var(--tu-accent-ink); border-bottom-color: var(--tu-accent); }

.tu-ed-panel { display: none; }
.tu-ed-panel.is-active { display: block; }

.tu-field { margin-bottom: var(--tu-space-4); }
.tu-field:last-child { margin-bottom: 0; }
.tu-field label {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  display: block;
  margin-bottom: 5px;
}
.tu-textarea { resize: vertical; min-height: 70px; line-height: 1.5; font-family: var(--tu-font-body); }

/* Matchplanens textpanel är en egen rad under ritbordet, i hela dess bredd.
   Med flex: 1 1 460px låg den bredvid ritbordet på en riktigt bred skärm men
   bröt ner på en laptop — och då stod den kvar på 620 px, vänsterställd,
   med ett halvmeterbrett tomrum till höger. Ritbordet plus verktygspanelen
   är över tusen pixlar; textpanelen fick aldrig plats bredvid ändå. */
.tu-ed-side#gp_text_panel { flex: 1 1 100%; max-width: none; }

/* Fälten är byggda som col-sm-4 och tvingas till full bredd av panelens
   generella regel ovan, eftersom övningseditorns panel är smal. Här finns
   bredden — låt dem dela på den igen, och bryt när de inte får plats. */
.tu-ed-side#gp_text_panel > .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--tu-gap);
  align-items: start;
}
.tu-ed-side#gp_text_panel > .row > [class*="col-"] {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding: 0;
}

/* Fält som låg i spalter bredvid varandra staplar i den smala panelen.
   Matchplanens tre fält var byggda som col-sm-4 och blev annars 80 px breda. */
.tu-ed-side [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
.tu-ed-side .row { margin-left: 0; margin-right: 0; }

/* TinyMCE i textpanelen ska hålla sig innanför den, med appens ram och radie
   i stället för sin egen. */
.tu-ed-side .tox-tinymce {
  max-width: 100%;
  border: 1px solid var(--tu-line-strong) !important;
  border-radius: var(--tu-radius) !important;
}
.tu-ed-side .tox .tox-toolbar__primary { background: var(--tu-surface-2); }
.tu-ed-side .tox .tox-statusbar { border-top-color: var(--tu-line); }
/* Statusraden trycker in elementsökväg, hjälptext, ordräknare och logotyp på
   samma rad — de skriver över varandra i en smal panel. Bara ordräknaren
   säger något i det här sammanhanget. */
.tu-ed-side .tox-statusbar__path,
.tu-ed-side .tox-statusbar__help-text,
.tu-ed-side .tox-statusbar__branding { display: none !important; }
.tu-field__hint { font-size: var(--tu-text-xs); color: var(--tu-faint); margin: var(--tu-space-1) 0 0; }

/* Destruktiva val i ⋯-menyn */
.dropdown-item.tu-danger { color: var(--tu-danger); }
.dropdown-item.tu-danger:hover { background: var(--tu-danger-soft); color: var(--tu-danger-ink); }

@media (max-width: 1100px) {
  .tu-ed-side { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MATCHPLANEN
   --------------------------------------------------------------------------
   Scoutrapporten är ingången till AI-genereringen och får därför en egen rad
   direkt under rubriken, i stället för att ligga som en knapp bland sex.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-scout {
  display: flex;
  align-items: center;
  gap: var(--tu-space-3);
  flex-wrap: wrap;
  background: var(--tu-accent-soft);
  border: 1px solid var(--tu-accent);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-space-3) var(--tu-space-4);
  margin-bottom: var(--tu-space-3);
}
.tu-scout--empty {
  background: var(--tu-surface);
  border-color: var(--tu-line-strong);
  border-style: dashed;
}
.tu-scout__label {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-accent-ink);
  flex: none;
}
.tu-scout--empty .tu-scout__label { color: var(--tu-muted); }
.tu-scout__text { font-size: var(--tu-text-sm); color: var(--tu-ink); }
.tu-scout--empty .tu-scout__text { color: var(--tu-muted); }
.tu-scout__actions { margin-left: auto; display: flex; gap: var(--tu-space-2); flex-wrap: wrap; }

/* ── Matchrapporten ───────────────────────────────────────────────────────
   Rapporten får hela bredden; matchinfo bor i en modal. Resultatet är
   rapportens rubriknummer och lyfts därför i sammanfattningsraden.
   ------------------------------------------------------------------------ */
.tu-ed-title-static {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: var(--tu-h1);
  letter-spacing: var(--tu-display-track);
  margin: 0;
}
.tu-gr-report { width: 100%; max-width: 100%; flex: 0 0 100%; }

/* Matchinfo på en NY rapport: står kvar i flödet som ett eget kort, i
   stället för att gömmas i en modal man inte kan öppna. Efter första
   sparningen tar sammanfattningsraden över och panelen flyttar till
   modalen — se trainus.ui.js. */
.tu-gr-info--inline {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-space-4);
  margin-bottom: var(--tu-space-5);
}
.tu-gr-info__h {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: var(--tu-h3);
  letter-spacing: var(--tu-display-track);
  margin: 0 0 var(--tu-space-3);
  padding-bottom: var(--tu-space-2);
  border-bottom: 1px solid var(--tu-line);
}

.tu-gr-report .nav-tabs {
  border-bottom: 1px solid var(--tu-line);
  gap: 2px;
  margin-bottom: var(--tu-space-4);
}
.tu-gr-report .nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--tu-space-2) 13px;
  font-size: var(--tu-text-sm);
  font-weight: 600;
  color: var(--tu-muted);
}
.tu-gr-report .nav-tabs .nav-link:hover { color: var(--tu-ink); }
.tu-gr-report .nav-tabs .nav-link.active {
  background: transparent;
  color: var(--tu-accent-ink);
  border-bottom-color: var(--tu-accent);
}

/* Slutresultatet läses som en siffra, inte som ett fält bland andra */
.tu-sum--score .v {
  font-family: var(--tu-font-display);
  font-size: var(--tu-h3);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ── Delad vy ─────────────────────────────────────────────────────────────
   Öppen sida utan meny — läsvy för den som fått länken.
   ------------------------------------------------------------------------ */
.tu-share {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  padding-block: var(--tu-space-6) var(--tu-space-6);
}
.tu-share__head { margin-bottom: var(--tu-space-4); }
.tu-share__head h1 { margin: var(--tu-space-2) 0 0; }
.tu-share__section { margin-top: var(--tu-space-6); }
.tu-share__section h2 {
  font-size: var(--tu-h3);
  padding-bottom: var(--tu-space-2);
  border-bottom: 1px solid var(--tu-line);
  margin-bottom: var(--tu-space-3);
}
.tu-share__text { font-size: var(--tu-text-lg); line-height: 1.7; max-width: 68ch; }
.tu-share__text p { margin: 0 0 var(--tu-space-3); }
/* Den delade träningen bär rutnät med övningskort och behöver mer bredd än
   en löpande text. */
.tu-share--wide { max-width: 1100px; }
.tu-share--wide .tu-share__text { max-width: 68ch; }

.tu-share__tags { margin: var(--tu-space-3) 0 var(--tu-space-5); display: flex; flex-wrap: wrap; gap: 4px; }
.tu-share__tags .badge { margin: 0 !important; }

.tu-share__org { margin-bottom: var(--tu-space-4); }
.tu-share__org h3 {
  font-size: var(--tu-text);
  margin: 0 0 var(--tu-space-1);
}
.tu-share__org .tu-share__text { font-size: var(--tu-text); line-height: 1.6; }

/* Sektionerna i passet kommer från samma markup som editorn. Utan editorns
   sidopadding och med luft mellan sig. */
.tu-share .wrap_block { padding: 0 !important; margin-bottom: var(--tu-space-5); }

/* ── Delningssidor som bläddrar i steg ────────────────────────────────────
   Matchplanen och scoutrapporten är båda bootstrap-karuseller. Stegraden är
   .carousel-indicators, som normalt ligger absolutplacerad ovanpå innehållet
   — här är den en vanlig flikrad i flödet. Klassen behålls bara för att
   bootstrap ska flytta .active åt oss när man byter steg.
   ------------------------------------------------------------------------ */
.tu-share-tabs {
  position: static;
  margin: var(--tu-space-5) 0;
  padding: 0;
  list-style: none;
  z-index: auto;
  gap: var(--tu-space-5);
  flex-wrap: wrap;
}
.tu-share-tabs [data-bs-target] {
  text-indent: 0;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  opacity: 1;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

/* Pilarna låg mitt över innehållet och fångade klick på det. */
.tu-share .carousel-control-prev,
.tu-share .carousel-control-next {
  top: auto;
  bottom: -3.25rem;
  width: 2.5rem;
  height: 2.5rem;
  opacity: .5;
}
.tu-share .carousel-control-prev { left: auto; right: 3rem; }
.tu-share .carousel-control-next { right: 0; }

.tu-share__foot {
  margin-top: var(--tu-space-6);
  padding-top: var(--tu-space-4);
  border-top: 1px solid var(--tu-line);
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
}

/* ── AI-matchplanen ───────────────────────────────────────────────────────
   Dialogen har två lägen: välja underlag, och granska förslaget. Fälten och
   knapparna följer samma system som resten av appen.
   ------------------------------------------------------------------------ */
#ai_matchplan .modal-content {
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
}
#ai_matchplan .modal-header {
  border-bottom: 1px solid var(--tu-line);
  padding: var(--tu-space-3) var(--tu-space-4);
}
#ai_matchplan .modal-title {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  letter-spacing: var(--tu-display-track);
  font-size: var(--tu-h3);
}
#ai_matchplan .modal-body   { padding: var(--tu-space-5); }

/* Luft mellan fältgrupperna — Bootstraps mb-3 är för tajt när etiketten är
   versal och liten, då hänger den ihop med fältet ovanför i stället för sitt
   eget. */
#ai_matchplan .modal-body > div,
#ai_matchplan #ai_state_select > .mb-3,
#ai_matchplan #ai_state_preview > div { margin-bottom: var(--tu-space-5); }
#ai_matchplan .modal-body > div:last-child { margin-bottom: 0; }
#ai_matchplan .modal-footer {
  border-top: 1px solid var(--tu-line);
  padding: var(--tu-space-3) var(--tu-space-4);
  gap: var(--tu-space-2);
}

.tu-ai-intro {
  font-size: var(--tu-text-sm);
  line-height: 1.6;
  color: var(--tu-muted);
  background: var(--tu-surface-2);
  border-radius: var(--tu-radius);
  padding: var(--tu-space-4);
  margin-bottom: var(--tu-space-5);
}
.tu-ai-intro strong { color: var(--tu-ink); font-weight: 600; }

/* Fältetiketterna får samma form som i övriga formulär */
#ai_matchplan .form-label {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  margin-bottom: var(--tu-space-2);
  display: block;
}
#ai_matchplan .form-select,
#ai_matchplan .form-control {
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius);
  font-size: var(--tu-text-sm);
  line-height: 1.5;
  padding: 10px 13px;
  color: var(--tu-ink);
  background-color: var(--tu-surface);
}
#ai_matchplan .form-select { padding-right: 34px; }
#ai_matchplan textarea.form-control { min-height: 92px; padding: 11px 13px; }
#ai_matchplan .form-select:focus,
#ai_matchplan .form-control:focus {
  border-color: var(--tu-accent);
  box-shadow: var(--tu-focus);
}

/* Förbrukade tokens är en fotnot, inte ett värde man läser av */
#ai_token_display {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
}

/* Förslaget: en sektion per rad, hopfällbar */
#ai_accordion .accordion-item {
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius) !important;
  margin-bottom: 6px;
  overflow: hidden;
}
#ai_accordion .accordion-button {
  font-size: var(--tu-text-sm);
  font-weight: 600;
  padding: 10px 14px;
  background: var(--tu-surface-2);
  color: var(--tu-ink);
  box-shadow: none;
}
#ai_accordion .accordion-button:not(.collapsed) {
  background: var(--tu-accent-soft);
  color: var(--tu-accent-ink);
}
#ai_accordion .accordion-body { padding: var(--tu-space-3) var(--tu-space-4); font-size: var(--tu-text-sm); }

#ai_matchplan .alert {
  border-radius: var(--tu-radius);
  font-size: var(--tu-text-sm);
  border: 0;
}
#ai_matchplan .alert-info    { background: var(--tu-info-soft);   color: var(--tu-info-ink); }
#ai_matchplan .alert-danger  { background: var(--tu-danger-soft); color: var(--tu-danger-ink); }
#ai_matchplan .alert-success { background: var(--tu-ok-soft);     color: var(--tu-ok-ink); }

/* Summeringen gäller hela planen och ligger därför ovanför stegen, inte
   i stegets panel. Fältet bor på td_gameplans, inte på td_gameplans_steps. */
.tu-plan-summary {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-card-pad);
  margin-bottom: var(--tu-space-4);
}
.tu-plan-summary__head {
  display: flex;
  align-items: baseline;
  gap: var(--tu-space-3);
  flex-wrap: wrap;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--tu-font-body);
}
.tu-plan-summary.is-open .tu-plan-summary__head { margin-bottom: var(--tu-space-3); }
.tu-plan-summary__hint {
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
}
.tu-plan-summary__chev {
  margin-left: auto;
  color: var(--tu-muted);
  transition: transform .15s;
}
.tu-plan-summary.is-open .tu-plan-summary__chev { transform: rotate(180deg); }
.tu-plan-summary [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Stegen är matchplanens sektioner — namnen bär informationen, inte numren */
.tu-gp-steps { margin-bottom: var(--tu-space-4); }
.tu-gp-steps .step_nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.tu-gp-steps .step_nav .nav-link {
  display: block;
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius-pill);
  padding: 5px 13px;
  font-size: var(--tu-text-sm);
  font-weight: 600;
  color: var(--tu-muted);
  text-decoration: none;
  white-space: nowrap;
}
.tu-gp-steps .step_nav .nav-link:hover { border-color: var(--tu-muted); color: var(--tu-ink); }
.tu-gp-steps .step_nav .nav-link.active {
  background: var(--tu-accent);
  border-color: var(--tu-accent);
  color: var(--tu-on-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   TRÄNINGSEDITORN
   --------------------------------------------------------------------------
   Flödet är förutsättningar → sektioner med övningar → lagindelning. Tidigare
   låg alla tre i samma kolumn utan avgränsning.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Sammanfattningsrad ───────────────────────────────────────────────────
   Passets förutsättningar som en rad nyckeltal i stället för en lista i
   högerspalten. Tomma värden visas som "—" så man ser vad som saknas.
   ------------------------------------------------------------------------ */
.tu-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: 2px var(--tu-space-1);
  margin-bottom: var(--tu-space-3);
}
.tu-sum {
  padding: 7px 14px;
  border-right: 1px solid var(--tu-line);
  min-width: 0;
}
.tu-sum:last-of-type { border-right: 0; }
.tu-sum .k {
  display: block;
  font-family: var(--tu-font-label);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
}
.tu-sum .v {
  font-size: var(--tu-text-sm);
  font-weight: 600;
  white-space: nowrap;
}
/* Tomt fält ska synas som tomt, inte som en etikett utan värde */
.tu-sum .v:empty::after {
  content: "—";
  font-weight: 400;
  color: var(--tu-faint);
}
.tu-sum__edit { margin-left: auto; margin-right: var(--tu-space-2); }

/* ── Planerad tid ─────────────────────────────────────────────────────────
   Summan av övningarnas minuter mot passets längd. Datan fanns redan;
   den visades bara aldrig.
   ------------------------------------------------------------------------ */
.tu-planned {
  display: flex;
  align-items: center;
  gap: var(--tu-space-3);
  flex-wrap: wrap;
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-space-3) var(--tu-space-4);
  margin-bottom: var(--tu-space-4);
}
.tu-planned__label {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  flex: none;
}
.tu-planned__bar {
  flex: 1 1 160px;
  height: 8px;
  border-radius: var(--tu-radius-pill);
  background: var(--tu-line);
  overflow: hidden;
}
.tu-planned__bar > span { display: block; height: 100%; background: var(--tu-accent); }
.tu-planned__sum { font-size: var(--tu-text-sm); color: var(--tu-muted); flex: none; }
.tu-planned__sum b { color: var(--tu-ink); font-variant-numeric: tabular-nums; }
.tu-planned__sum.is-over b:last-child { color: var(--tu-warn-ink); }

/* ── Sektionen som ett kort ───────────────────────────────────────────────
   Sektionerna flöt tidigare fritt på sidbakgrunden; bara en rubrik skilde
   dem åt. Nu äger varje sektion sin egen yta med sina övningar i.
   ------------------------------------------------------------------------ */
.wrap_block {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-card-pad) !important;
  margin-bottom: var(--tu-space-3);
}

/* ── Övningskorten i en sektion ───────────────────────────────────────────
   Samma rutnät och samma kortform som övningslistan. drawer.css sätter
   min-height: 350px på .list_exercises .card-body, och sidans egen style-tagg
   sätter höjd 56px på kortens huvud och fot — båda släcks här.
   ------------------------------------------------------------------------ */
.list_session {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--tu-space-3);
  margin: 0 !important;
}
.list_session > * {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}
.list_session > * > .card { height: 100%; }

.list_session .card-header {
  height: auto !important;
  padding: 7px 10px;
  font-size: var(--tu-text-xs);
  background: var(--tu-surface-2);
}
/* Rubrikraden var sned: titeln låg i överkant av sin kolumn medan
   ×-knappen centrerades av sin egen padding. */
.list_session .card-header .row {
  align-items: center;
  flex-wrap: nowrap;
  margin: 0;
  gap: var(--tu-space-2);
}
.list_session .card-header .row > * { padding: 0; }
.list_session .card-header .card-text {
  font-weight: 600;
  color: var(--tu-ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_session .card-header .col-2 { flex: 0 0 auto; width: auto; }
.list_session .card-header .remove_ex {
  color: var(--tu-faint);
  padding: 0 var(--tu-space-1);
  line-height: 1;
}
.list_session .card-header .remove_ex:hover { color: var(--tu-danger); }

.list_session .card-body {
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  overflow: hidden;
}
.list_session .card-body img {
  width: auto !important;
  max-width: 100%;
  max-height: 100% !important;
  object-fit: contain;
}

/* Saknas bild bär noteringen kortet. Den låg tidigare i ett stycke med
   height: 350px inuti en kropp på ~140 px med overflow: hidden — texten
   renderades men hamnade långt under den synliga ytan. */
.list_session .notes-text {
  margin: 0;
  max-height: 100%;
  overflow: hidden;
  font-size: var(--tu-text-sm);
  line-height: 1.45;
  color: var(--tu-ink);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.list_session .card-footer {
  height: auto !important;
  padding: 7px 10px;
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  background: transparent;
}
.list_session .card-footer i { color: var(--tu-muted); }

/* Med bild i kroppen hamnar noteringen på en egen rad i foten, ovanför
   längd och ikoner. En rad med ellips — hela texten ligger i title. */
.list_session .card-footer .tu-ex-note {
  color: var(--tu-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--tu-line);
}
/* Längd till vänster, ikonerna till höger — på samma rad. Footern är byggd
   av en .row med kolumner som annars bryter ner i två rader. */
.list_session .card-footer .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tu-space-2);
  margin: 0;
}
.list_session .card-footer .row > * {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  text-align: left;
}

/* ── Sektionshuvud ────────────────────────────────────────────────────── */
.tu-sect-h {
  display: flex;
  align-items: baseline;
  gap: var(--tu-space-3);
  flex-wrap: wrap;
  padding-bottom: var(--tu-space-2);
  margin-bottom: var(--tu-space-3);
  border-bottom: 1px solid var(--tu-line);
}
.tu-sect-h h2 {
  margin: 0;
  font-size: var(--tu-h3);
  cursor: pointer;
}
.tu-sect-h h2:hover { color: var(--tu-accent-ink); }
.tu-sect-dur {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  font-variant-numeric: tabular-nums;
}
.tu-sect-dur.is-empty { color: var(--tu-warn-ink); }
.tu-sect-actions { margin-left: auto; display: flex; gap: var(--tu-space-2); align-items: center; }

/* ── Lagindelning ─────────────────────────────────────────────────────────
   Listorna var färgade block utan synlig släppyta — tomma lag såg ut som
   streck. Nu en ram per lag med tydlig yta och tomt läge.
   ------------------------------------------------------------------------ */
/* Lagen låg i fyra fasta kolumner. I en smal spalt blir varje lag ~70 px —
   smalare än de flesta spelarnamn. Ett auto-fit-rutnät lägger dem på rad när
   bredden inte räcker och sida vid sida när den gör det. */
#teams > .row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--tu-space-2);
  margin: 0 !important;
}
#teams > .row > div {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

#teams ul[id^="team"] {
  background: var(--tu-surface) !important;
  border: 1px solid var(--tu-line);
  border-top-width: 3px;
  border-radius: var(--tu-radius);
  min-height: 56px;
  padding: var(--tu-space-2) !important;
  display: flex;
  /* bootstraps .list-group är flex-direction: column — utan den här raden
     hamnar namnen under varandra i stället för att flöda som chips. */
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--tu-space-1);
  align-content: flex-start;
}
#teams ul#team1 { border-top-color: var(--tu-team-1); }
#teams ul#team2 { border-top-color: var(--tu-team-2); }
#teams ul#team3 { border-top-color: var(--tu-team-3); }
#teams ul#team4 { border-top-color: var(--tu-team-4); }

/* :empty faller på blanktecken i markupen, så tomt läge avgörs på om det
   finns ett <li> eller inte. */
#teams ul[id^="team"]:not(:has(li))::after {
  content: "Dra spelare hit";
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
  padding: var(--tu-space-2);
}

/* Spelare som ännu inte är indelade — poolen man drar ifrån. */
#teams #players {
  background: var(--tu-surface);
  border: 1px dashed var(--tu-line-strong);
  border-radius: var(--tu-radius);
  padding: var(--tu-space-2) !important;
  margin-top: var(--tu-space-3);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--tu-space-1);
  align-content: flex-start;
  min-height: 48px;
}
#teams #players::before {
  content: "Ej indelade";
  flex: 1 0 100%;
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  margin-bottom: 2px;
}
#teams #players > li {
  background: var(--tu-surface-2);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-pill);
  padding: 3px 10px;
  font-size: var(--tu-text-xs);
  font-weight: 600;
  cursor: grab;
  white-space: nowrap;
}
#teams #players > li:active { cursor: grabbing; }

#teams ul[id^="team"] > li,
#teams #players > li {
  width: auto;        /* .list-group-item är 100% bred som standard */
  background: var(--tu-surface-2);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-pill);
  padding: 3px 10px;
  font-size: var(--tu-text-xs);
  font-weight: 600;
  cursor: grab;
  white-space: nowrap;
}
#teams ul[id^="team"] > li:active { cursor: grabbing; }

/* ══════════════════════════════════════════════════════════════════════════
   RITBORDET — UPPLYSNINGEN OM LITEN SKÄRM
   --------------------------------------------------------------------------
   Ritbordet går att använda på en telefon, men precisionen blir därefter.
   Rutan säger det rakt ut under 820 px. Själva omflyttningen av
   verktygspanelen hör inte hit — den styrs av bordets egen bredd, se
   @container längre ned.

   Ritbordet renderas av React (Coachr) i #field-canvas, #field-gameplan
   eller #field-playbook, så reglerna hänger på id-prefixet.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-board-note { display: none; }

@media (max-width: 819px) {
  .tu-board-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--tu-warn-soft);
    color: var(--tu-warn-ink);
    border-radius: var(--tu-radius);
    padding: var(--tu-space-3) var(--tu-space-4);
    font-size: var(--tu-text-sm);
    margin-bottom: var(--tu-space-3);
  }
  .tu-board-note i { margin-top: 2px; }

  /* Under 820 px fönster ryms ingen sidopanel bredvid duken på något av
     ritborden. Sidor som ger bordet en smal spalt även på stora skärmar
     stackar tidigare — se .tu-board-col längre ned. */
  [id^="field-"] .flex.gap-4 { flex-direction: column !important; gap: 0 !important; }
  [id^="field-"] .min-h-screen { min-height: 0; }
  [id^="field-"] #sc-toolbar { width: 100% !important; margin-top: var(--tu-space-3); }
}

/* ══════════════════════════════════════════════════════════════════════════
   VERKTYGSPANELEN UNDER RITBORDET — NÄR SIDAN GER BORDET EN SMAL SPALT
   --------------------------------------------------------------------------
   Fönsterbredden räcker inte som mått när ritbordet delar sidan med något
   annat. På playbookens bildsida ligger bordet i en kolumn på 7/12 bredvid
   textrutan: panelen är fasta 312 px, så planen fick 192 px vid 1200 px
   fönster och 17 px vid 900 — utraderad långt innan @media-regeln ovan slog
   till vid 819.

   Sidan märker ut sin spalt med .tu-board-col, och container-frågan mäter
   den i stället för fönstret. Samma tal som förut, 820 px, men nu om
   spaltens bredd.

   Containern sitter medvetet på spalten och inte på #field-* självt:
   container-type medför inline-size-containment, så elementets bredd slutar
   bero på innehållet. Ritbordet på skiss-, övnings- och matchplanssidorna
   ligger i .tu-ed-canvas (flex: 0 1 auto), som är innehållsstyrd — där
   kollapsade bordet till bredd 0. En bootstrap-kolumn har sin bredd från
   rutnätet och har inte det problemet.

   Panelen var först en fast bottenpanel, men den var fel form för
   innehållet: toolbar-kortet är 788 px högt, så med max-height 45vh hamnade
   halva innehållet bakom en inre scroll — och AnimBar, som "Visa animering"
   öppnar, låg 796 px ned i den och syntes aldrig. I flödet scrollar sidan i
   stället och allt går att nå.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-board-col { container-type: inline-size; }

/* ══════════════════════════════════════════════════════════════════════════
   PLAYBOOKENS BILDSIDA — ORDNINGEN SAKER GER VIKA I
   --------------------------------------------------------------------------
   Titeln och texten står först och till vänster, ritbordet till höger. Det
   är bordet som ger vika: blir det trångt släpper det ner under texten och
   får hela bredden i stället för att klämmas ihop vid sidan av den.

   Två spalter bara över 1600 px. Talet kommer ur måtten: bordets spalt är
   7/12 av innehållsytan, verktygspanelen är fasta 312 px, och planen behöver
   ett par hundra pixlar för att gå att rita på. Vid 1600 px fönster blir
   spalten 753 px och planen 425 px — under det blir planen smalare än panelen
   bredvid den, och då är en spalt bättre än två.

   Sedan tar .tu-board-col vid: när bordets spalt ändå kryper under 820 px går
   verktygspanelen under duken. Ordningen blir alltså bordet ner, panelen ner,
   i den följden.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .tu-slide-row > .tu-slide-board { flex: 0 0 auto; width: 58.3333%; }
  .tu-slide-row > .tu-slide-text  { flex: 0 0 auto; width: 41.6667%; }
}

@container (max-width: 820px) {
  [id^="field-"] .flex.gap-4 { flex-direction: column !important; gap: 0 !important; }
  [id^="field-"] .min-h-screen { min-height: 0; }

  /* Bredden sätts som inline-style i Index.tsx — därav !important. */
  [id^="field-"] #sc-toolbar {
    width: 100% !important;
    margin-top: var(--tu-space-3);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL — sidomenyn blir en flikrad i botten
   ══════════════════════════════════════════════════════════════════════════ */
.tu-tabbar { display: none; }

@media (max-width: 900px) {
  .tu-app { grid-template-columns: minmax(0, 1fr); }

  /* Vågrät topprad: kanten flyttar från höger till underkant, annars
     saknar en ljus meny avgränsning mot innehållet som rullar under. */
  .tu-side {
    position: sticky;
    top: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--tu-space-4);
    z-index: 1030;
    border-right: 0;
    border-bottom: 1px solid var(--tu-side-line);
  }
  .tu-side .tu-navgroup,
  .tu-side .tu-navlink,
  .tu-side .tu-side-foot { display: none; }

  /* .tu-nav själv måste också bort, inte bara länkarna i den. Tom och
     osynlig var den ändå kvar som flexbarn, och med justify-content:
     space-between delade den raden i tre delar — lagväljaren hamnade mitt
     i rubrikraden i stället för till höger. */
  .tu-side .tu-nav { display: none; }

  .tu-brand { padding: 0; }
  .tu-teamswitch { margin: 0; width: auto; }

  /* Utfälld via "Mer" i flikraden */
  .tu-side.is-open {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: var(--tu-space-4) 0 88px;
  }
  .tu-side.is-open .tu-nav { display: block; }
  .tu-side.is-open .tu-navgroup,
  .tu-side.is-open .tu-navlink,
  .tu-side.is-open .tu-side-foot { display: flex; }
  .tu-side.is-open .tu-navgroup { display: block; }
  .tu-side.is-open .tu-brand { padding: 0 18px var(--tu-space-2); }
  .tu-side.is-open .tu-teamswitch { margin: 0 12px var(--tu-space-3); width: calc(100% - 24px); }

  .tu-main { padding: var(--tu-space-4); padding-bottom: 84px; }

  /* Höjden står i --tu-tabbar-h så att andra fasta element kan lägga sig
     precis ovanpå raden utan att gissa. min-height binder variabeln till
     det raden faktiskt mäter. */
  .tu-tabbar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    min-height: calc(var(--tu-tabbar-h) + env(safe-area-inset-bottom));
    background: var(--tu-surface);
    border-top: 1px solid var(--tu-line);
    z-index: 1040;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tu-tabbar a {
    flex: 1;
    /* Ikonen är ett block utan egen bredd och lade sig i vänsterkanten
       istället för över etiketten — text-align räckte inte. En flexspalt
       centrerar båda oavsett hur bred ikonen råkar bli. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9px var(--tu-space-1) 11px;
    font-family: var(--tu-font-label);
    font-size: var(--tu-text-2xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tu-muted);
    text-decoration: none;
  }
  .tu-tabbar i { display: block; font-size: 15px; margin-bottom: 3px; opacity: .65; }
  .tu-tabbar a.is-active { color: var(--tu-accent-ink); font-weight: 600; }
  .tu-tabbar a.is-active i { opacity: 1; }

  /* Primärknappen går full bredd istället för att hamna utanför kanten */
  .tu-page-head { flex-direction: column; align-items: stretch; }
  .tu-page-actions .tu-btn--primary { flex: 1; }

  .tu-grid--stats { grid-template-columns: repeat(2, 1fr); }

  #tu-toasts { right: var(--tu-space-4); left: var(--tu-space-4); bottom: 84px; }
  .tu-toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Matchens dokument ────────────────────────────────────────────────────
   Matchsidan är navet: matchplan, matchrapport och scoutrapport hör till
   matchen, och skapas härifrån när de behövs. */
.tu-docs { list-style: none; margin: 0; padding: 0; }
.tu-docs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tu-space-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--tu-line);
}
.tu-docs li:last-child { border-bottom: 0; }
.tu-docs__k { font-size: var(--tu-text-sm); color: var(--tu-ink); }
.tu-docs__v {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  letter-spacing: 0.04em;
  color: var(--tu-accent-ink);
  text-decoration: none;
  white-space: nowrap;
}
.tu-docs__v:hover { text-decoration: underline; }
.tu-docs__v--new { color: var(--tu-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   STARTSIDAN ("Idag")
   --------------------------------------------------------------------------
   Låg tidigare som bootstrap-kort i kort: "Aktuellt" var ett kort som bara
   innehöll två andra kort, och högerspalten upprepade samma aktiviteter som
   vänsterspalten redan visade. Formen här är den ur designförslaget: en
   rubrikrad, nästa aktivitet som enda stora yta, fyra nyckeltal och därefter
   listorna i två spalter.
   ══════════════════════════════════════════════════════════════════════════ */

/* Överraden i sidhuvudet — dagens datum. Mikroetikett, inte en rubrik. */
.tu-crumb {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  margin: 0 0 3px;
}

/* ── Nästa aktivitet ──────────────────────────────────────────────────────
   Sidans enda stora yta. Allt man behöver för att gå till planen: vad, var,
   när, vilka som kommer och vad som saknas. */
.tu-next {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius-lg);
  margin-bottom: var(--tu-space-5);
}
.tu-next__body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-5);
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--tu-card-pad);
}
.tu-next__main { min-width: 260px; flex: 1; }
.tu-next__kicker {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-accent-ink);
  margin: 0 0 7px;
}
.tu-next__title {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  letter-spacing: var(--tu-display-track);
  font-size: 23px;
  line-height: 1.12;
  margin: 0 0 7px;
}
.tu-next__title a { color: var(--tu-ink); text-decoration: none; }
.tu-next__title a:hover { color: var(--tu-accent-ink); }
.tu-next__meta { margin: 0; font-size: var(--tu-text-sm); color: var(--tu-muted); }
.tu-next__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--tu-space-3); }
.tu-next__chips a { text-decoration: none; }
.tu-next__actions { display: flex; gap: var(--tu-space-2); flex-wrap: wrap; }

/* Är nästa aktivitet en träning ligger nästa match som en remsa under — det
   är den man förbereder, även när den inte står först. */
.tu-next__game {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tu-space-3);
  padding: var(--tu-space-3) var(--tu-card-pad);
  border-top: 1px solid var(--tu-line);
  background: var(--tu-surface-2);
  border-radius: 0 0 var(--tu-radius-lg) var(--tu-radius-lg);
  font-size: var(--tu-text-sm);
}
.tu-next__game .lbl {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
}
.tu-next__game .fix { font-weight: 600; color: var(--tu-ink); text-decoration: none; }
.tu-next__game .fix:hover { color: var(--tu-accent-ink); }
.tu-next__game .when { color: var(--tu-muted); }
.tu-next__game .tu-next__chips { margin: 0; }
.tu-next__game > :last-child { margin-left: auto; }

/* ── Spaltsättning ────────────────────────────────────────────────────── */
.tu-dash { display: grid; gap: var(--tu-gap); margin-bottom: var(--tu-gap); }
.tu-dash--2 { grid-template-columns: 1.25fr 1fr; }
.tu-dash--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tu-dash > .tu-card { display: flex; flex-direction: column; }
.tu-dash > .tu-card > .tu-mini,
.tu-dash > .tu-card > .tu-bars,
.tu-dash > .tu-card > .tu-feed { flex-grow: 1; }
.tu-card__note { font-size: var(--tu-text-sm); color: var(--tu-muted); margin: 0; }
.tu-card__foot {
  margin-top: auto;
  padding-top: var(--tu-space-3);
  border-top: 1px solid var(--tu-line);
  display: flex;
  justify-content: space-between;
  gap: var(--tu-space-3);
}

/* ── Kommande ─────────────────────────────────────────────────────────────
   Samma radform som aktivitetslistan men utan datumblocket i stor grad —
   här ska fem rader rymmas bredvid närvaron, inte läsas en och en. */
.tu-feed { display: flex; flex-direction: column; }
.tu-feed__row {
  display: grid;
  grid-template-columns: 34px 7px minmax(0, 1fr) auto;
  gap: var(--tu-space-3);
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--tu-line);
}
.tu-feed__row:first-child { border-top: 0; }
.tu-feed__date {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tu-feed__main { min-width: 0; }
.tu-feed__title {
  margin: 0;
  font-size: var(--tu-text-sm);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tu-feed__title a { color: var(--tu-ink); text-decoration: none; }
.tu-feed__title a:hover { color: var(--tu-accent-ink); }
.tu-feed__sub {
  margin: 1px 0 0;
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Prickens färg säger typen utan att kosta en egen kolumn. */
.tu-feed__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tu-line-strong); }
.tu-feed__row.type-GAME     .tu-feed__dot { background: var(--tu-accent); }
.tu-feed__row.type-TRAINING .tu-feed__dot { background: var(--tu-ok); }

/* ── Närvarostaplar ─────────────────────────────────────────────────────
   Ett antal utan nämnare sade ingenting — "76" kunde vara 76 av 80 eller 76
   av 104. Stapeln är andelen, siffran är procenten. */
.tu-bars { display: flex; flex-direction: column; gap: 2px; }
.tu-bar {
  display: flex;
  align-items: center;
  gap: var(--tu-space-3);
  padding: 5px 0;
}
.tu-bar__name {
  font-size: var(--tu-text-sm);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tu-bar__name a { color: var(--tu-ink); text-decoration: none; }
.tu-bar__name a:hover { color: var(--tu-accent-ink); }
.tu-bar__track {
  width: 84px;
  height: 6px;
  border-radius: var(--tu-radius-pill);
  background: var(--tu-line);
  flex: none;
  overflow: hidden;
}
.tu-bar__fill { display: block; height: 100%; border-radius: var(--tu-radius-pill); background: var(--tu-accent); }
.tu-bar__pct {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  width: 34px;
  text-align: right;
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* ── Minilistor (senaste, populäraste, poäng) ─────────────────────────── */
.tu-mini { list-style: none; margin: 0; padding: 0; }
.tu-mini li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tu-space-3);
  padding: var(--tu-space-2) 0;
  border-top: 1px solid var(--tu-line);
  font-size: var(--tu-text-sm);
}
.tu-mini li:first-child { border-top: 0; }
.tu-mini a { color: var(--tu-ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-mini a:hover { color: var(--tu-accent-ink); }
.tu-mini .v {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── RPE-formuläret ─────────────────────────────────────────────────────
   Egen belastning som inte hänger på en aktivitet. Tvåspaltigt så det tar
   en kortyta, inte en halv sida. */
.tu-rpe-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tu-space-3); }
.tu-rpe-form label {
  display: block;
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  margin-bottom: var(--tu-space-1);
}
.tu-rpe-form .full { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .tu-dash--2, .tu-dash--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .tu-next__body { padding: var(--tu-space-4); gap: var(--tu-space-4); }
  .tu-next__title { font-size: 19px; }
  .tu-next__actions { width: 100%; }
  .tu-next__actions .tu-btn { flex: 1; }
  .tu-next__game > :last-child { margin-left: 0; }
  .tu-rpe-form { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   NÄRVARORAPPORTERING
   --------------------------------------------------------------------------
   Vyn används med en tumme, stående, på plan. Den låg som bootstrap-rader
   med col-9/col-3 och en form-switch uppblåst till 4,6 × 3 em, och varje
   klick laddade om hela sidan — efter varje spelare fick man skrolla ner
   till samma ställe igen. Här är raden i sig tryckytan, och listan står
   still medan man bockar av.
   ══════════════════════════════════════════════════════════════════════════ */

/* En rad är ett namn och en växel. På en bred skärm hamnar de annars i var
   sin ände av tolvhundra pixlar, med tomrum emellan. Vyn hålls i en spalt. */
.tu-att-bar,
.tu-tabs--narrow,
#attendance,
#absence { max-width: 680px; }

/* Rubrik, räknare och förval följer med när man skrollar. Rubriken låg först
   ovanför i full storlek och skrollade bort — efter tio spelare syntes inte
   längre vilken träning man stod i.

   Två spalter, två rader: vad man gör till vänster, det man ändrar till
   höger.  rubrik | Aktiviteten
          räknare | längd och RPE                                          */
.tu-att-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tu-space-2) var(--tu-space-4);
  padding: var(--tu-space-3) 0;
  margin-bottom: var(--tu-space-4);
  background: var(--tu-bg);
  border-bottom: 1px solid var(--tu-line);
}
.tu-att-bar__head { min-width: 0; }
.tu-att-bar__head .tu-crumb { margin: 0 0 1px; }
.tu-att-bar__head h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tu-att-bar__count { grid-column: 1; margin: 0; font-size: var(--tu-text-sm); color: var(--tu-muted); }
.tu-att-bar__count b {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: 19px;
  color: var(--tu-ink);
  font-variant-numeric: tabular-nums;
  margin-right: 3px;
}
.tu-att-bar__fields { grid-column: 2; display: flex; gap: var(--tu-space-3); justify-self: end; }
.tu-att-bar__link { grid-column: 2; grid-row: 1; justify-self: end; }
.tu-att-bar__fields label {
  display: flex;
  align-items: center;
  gap: var(--tu-space-2);
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
  white-space: nowrap;
}
.tu-att-bar__fields input {
  width: 68px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Raden ────────────────────────────────────────────────────────────── */
.tu-roster {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  overflow: hidden;
  margin-bottom: var(--tu-space-4);
}
.tu-roster__label {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  margin: 0;
  padding: var(--tu-space-3) var(--tu-space-4) var(--tu-space-2);
  background: var(--tu-surface-2);
  border-bottom: 1px solid var(--tu-line);
}
.tu-roster__label:not(:first-child) { border-top: 1px solid var(--tu-line); }

.tu-att-row {
  display: flex;
  align-items: center;
  gap: var(--tu-space-3);
  padding: 0 var(--tu-space-4);
  border-bottom: 1px solid var(--tu-line);
}
.tu-roster > .tu-att-row:last-child,
.tu-roster > .tu-att-rpe:last-child { border-bottom: 0; }
.tu-att-row.is-on { background: var(--tu-ok-soft); }

/* Hela namnytan är tryckytan — en 46 px-switch är för liten att sikta på
   när man står med en boll under armen. */
.tu-att-row__hit {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--tu-space-2);
  padding: 14px 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.tu-att-row__name {
  font-size: var(--tu-text);
  color: var(--tu-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tu-att-row.is-on .tu-att-row__name { font-weight: 600; }

.tu-att-row__rpe {
  flex: none;
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tu-muted);
  background: var(--tu-surface);
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius-pill);
  padding: var(--tu-space-1) 11px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.tu-att-row__rpe:hover { color: var(--tu-ink); border-color: var(--tu-muted); }
.tu-att-row__rpe[aria-expanded="true"] {
  background: var(--tu-accent-soft);
  border-color: var(--tu-accent);
  color: var(--tu-accent-ink);
}

/* ── Växeln ────────────────────────────────────────────────────────────── */
.tu-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border: 0;
  border-radius: var(--tu-radius-pill);
  background: var(--tu-line-strong);
  position: relative;
  cursor: pointer;
  transition: background-color .15s;
}
.tu-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tu-surface);
  box-shadow: var(--tu-shadow-raised);
  transition: transform .15s;
}
.tu-switch:checked { background: var(--tu-ok); }
.tu-switch:checked::after { transform: translateX(18px); }
.tu-switch:focus-visible { outline: none; box-shadow: var(--tu-focus); }
.tu-switch:disabled { opacity: .5; cursor: progress; }

/* ── RPE per spelare ──────────────────────────────────────────────────── */
.tu-att-rpe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tu-space-3);
  padding: var(--tu-space-3) var(--tu-space-4);
  background: var(--tu-surface-2);
  border-bottom: 1px solid var(--tu-line);
}
.tu-att-rpe[hidden] { display: none; }
.tu-att-rpe label {
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  display: block;
}
.tu-att-rpe input { width: 90px; margin-top: var(--tu-space-1); }

/* ── Gäster ───────────────────────────────────────────────────────────── */
.tu-guest { display: flex; flex-wrap: wrap; gap: var(--tu-space-2); align-items: flex-start; }
.tu-guest > .ts-wrapper, .tu-guest > select { flex: 1; min-width: 200px; }

/* Bootstrap sätter .active på flikarna, appens egen tabbrad på .is-active. */
.tu-tab.active { color: var(--tu-ink); border-bottom-color: var(--tu-accent); font-weight: 500; }
.tu-tabs .tu-tab { border-radius: 0; background: none; }

/* Spara-knappen i snabbregistreringen ligger efter trettio rader, så den
   följer med nedre kanten — annars får man skrolla tillbaka för att spara.

   Den satt förut som en lyft knapp som svävade ovanpå raderna. Den läste
   sig som ett löst element mitt i listan, och i Firefox på mobil hoppade
   den när adressfältet fälls in och ut. Nu är den en egen list med kant
   och botten, så den syns som en kant på ytan i stället för något som
   flyter ovanpå den. */
.tu-att-save {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: var(--tu-space-4);
  padding: var(--tu-space-3) 0;
  background: var(--tu-bg);
  border-top: 1px solid var(--tu-line);
}

@media (max-width: 900px) {
  /* Sidhuvudet är sticky på top: 0 med z-index 1030, så räknaren måste
     lägga sig under det — annars klistras den fast bakom. */
  .tu-att-bar { top: 58px; }

  /* På mobil är den fäst i underkanten, direkt ovanpå flikraden. Sticky
     mäts mot sidans flöde och gled därför med när Firefox fäller in
     adressfältet; fixed mäts mot rutan och ligger still. Flikraden är
     fixed på z-index 1040 — knapplisten ska ligga under den, inte över. */
  .tu-att-save {
    position: fixed;
    inset: auto 0 0 0;
    bottom: calc(var(--tu-tabbar-h) + env(safe-area-inset-bottom));
    z-index: 1035;
    margin: 0;
    padding: var(--tu-space-2) var(--tu-space-4);
    background: var(--tu-surface);
  }
  .tu-att-save .tu-btn { width: 100%; }

  /* Sista raden hamnar annars bakom listen. Flikraden är redan inräknad i
     .tu-main, det här är knapplistens egen höjd ovanpå den. */
  #absence { padding-bottom: 64px; }
}

@media (max-width: 700px) {
  .tu-att-bar { gap: 6px var(--tu-space-3); padding: var(--tu-space-2) 0; }
  .tu-att-bar__head h1 { font-size: 17px; }
  .tu-att-bar__count { font-size: var(--tu-text-xs); }
  .tu-att-bar__count b { font-size: 16px; }
  /* Längd och RPE är förvalen som gäller när man bockar av — de sätts en
     gång och ska inte ta lika mycket plats som räknaren. */
  .tu-att-bar__fields { gap: var(--tu-space-3); }
  .tu-att-bar__fields label { gap: 5px; font-size: var(--tu-text-xs); }
  .tu-att-bar__fields input { width: 52px; padding: var(--tu-space-1) 7px; }
  .tu-att-rpe input { width: 100%; }
  .tu-att-rpe label { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULÄRRUTNÄT
   --------------------------------------------------------------------------
   Fälten låg tidigare i bootstraps col-6 inne i en col-lg-4, alltså två fält
   på 310 px. "Sporthälla IP A-plan" blev "Sporthälla IP A-pla" och
   aktivitetsväljaren kapades mitt i matchnamnet. Ett auto-fit-rutnät lägger
   så många fält som får plats och bryter när de inte gör det.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-formgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tu-fld-min, 190px), 1fr));
  gap: var(--tu-space-4);
}
.tu-formgrid--tight { --tu-fld-min: 140px; gap: var(--tu-space-3); }
.tu-fld { min-width: 0; }
.tu-fld > label {
  display: block;
  font-size: var(--tu-text-xs);
  font-weight: 500;
  color: var(--tu-muted);
  margin-bottom: 5px;
}
.tu-fld--wide { grid-column: span 2; }
.tu-fld--full { grid-column: 1 / -1; }
.tu-fld--full { grid-column: 1 / -1; }
.tu-fld__hint { display: block; font-size: var(--tu-text-xs); color: var(--tu-faint); margin-top: var(--tu-space-1); }

/* style.css (Tailwind-preflight, laddas i drawer) nollställer appearance på
   select, så pilen försvann och fältet såg ut som en tom textruta. */
select.tu-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235a6a6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

/* Beräknade värden är inga fält — de går inte att skriva i och ska inte se ut
   som om de gick. xG, försök och mål räknas ur de registrerade avsluten. */
.tu-kf--calc .v { font-size: 1.5rem; }
.tu-kf--calc { background: var(--tu-surface-2); }

@media (max-width: 700px) {
  .tu-fld--wide { grid-column: span 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MATCHSIDANS xG-TABELLER
   --------------------------------------------------------------------------
   Låg som table-bordered i tolv kolumner utan skrollskal, så den sköt ut
   32 px utanför sidan och de sista kolumnerna gick inte att läsa alls.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-card--flush { padding: var(--tu-card-pad) 0 0; margin-bottom: var(--tu-gap); }
.tu-card--flush > .tu-card__head { padding: 0 var(--tu-card-pad); }
.tu-card--flush > .tu-table__scroll { border: 0; border-radius: 0; padding: 0 var(--tu-space-2) var(--tu-space-2); }

.tu-xg-list th[scope="row"], .tu-xg-sum th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--tu-ink);
  padding: var(--tu-cell-pad-y) var(--tu-cell-pad-x);
  border-bottom: 1px solid var(--tu-line);
  font-size: var(--tu-text-sm);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--tu-font-body);
  white-space: nowrap;
}
.tu-xg-list tr.is-sum th, .tu-xg-list tr.is-sum td,
.tu-xg-sum tr.is-sum th,  .tu-xg-sum tr.is-sum td {
  font-weight: 600;
  background: var(--tu-surface-2);
}
.tu-xg-sum tbody tr:last-child th { border-bottom: 0; }

/* Ett mål är det enda i tabellen man letar efter med blicken. */
.tu-xg-list tr.is-goal td:nth-child(3) { font-weight: 600; color: var(--tu-ok-ink); }

.tu-xg-del {
  border: 0;
  background: none;
  color: var(--tu-faint);
  font-size: 17px;
  line-height: 1;
  padding: 2px 7px;
  border-radius: var(--tu-radius);
  cursor: pointer;
}
.tu-xg-del:hover { color: var(--tu-danger); background: var(--tu-danger-soft); }
/* Ett klick markerar, ett till tar bort — en rad man registrerat för hand
   ska inte försvinna på en felträff. */
.tu-xg-del.is-confirming {
  font-size: var(--tu-text-xs);
  font-weight: 600;
  color: var(--tu-on-danger);
  background: var(--tu-danger);
  padding: var(--tu-space-1) 9px;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOPFÄLLD SIDOMENY
   --------------------------------------------------------------------------
   Ritbordet, xG-tabellerna och matchlistan vill ha bredden. Menyn fälls ihop
   till en ikonrad på 62 px — destinationerna finns kvar, bara namnen försvinner
   och hovringen bär dem i stället. Läget ligger på <html> och sätts redan i
   sidhuvudet, så sidan aldrig ritas bred och hoppar ihop.

   Gäller bara desktop: under 900 px är menyn redan en rad i toppen.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-brand__mark { display: none; }
.tu-brand a { display: flex; align-items: center; gap: var(--tu-space-2); min-width: 0; }

.tu-railtoggle {
  margin-left: auto;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--tu-radius);
  background: transparent;
  color: var(--tu-side-muted);
  font-size: 12px;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.tu-railtoggle:hover { background: var(--tu-side-hover); color: var(--tu-side-brand); }
.tu-railtoggle:focus-visible { outline: 2px solid var(--tu-accent); outline-offset: 1px; }

@media (max-width: 900px) {
  /* Menyn är en rad i toppen här — knappen har inget att fälla ihop. */
  .tu-railtoggle { display: none; }
}

@media (min-width: 901px) {
  html.tu-rail .tu-app { grid-template-columns: var(--tu-nav-w-rail, 62px) minmax(0, 1fr); }

  html.tu-rail .tu-side { padding-left: 0; padding-right: 0; overflow-x: hidden; }

  html.tu-rail .tu-brand { flex-direction: column; gap: var(--tu-space-2); padding: 0 var(--tu-space-2); }
  html.tu-rail .tu-brand__name { display: none; }
  html.tu-rail .tu-brand__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--tu-radius);
    background: var(--tu-accent);
    color: var(--tu-on-accent);
    font-family: var(--tu-font-display);
    font-weight: 700;
    font-size: 15px;
  }
  html.tu-rail .tu-railtoggle { margin: 0; }
  html.tu-rail .tu-railtoggle i { transform: rotate(180deg); }

  /* Lagväljaren och kontoraden blir sina egna ikoner. */
  html.tu-rail .tu-teamswitch {
    justify-content: center;
    margin: var(--tu-space-3) 8px var(--tu-space-3);
    width: calc(100% - 16px);
    padding: var(--tu-space-2) 0;
  }
  html.tu-rail .tu-teamswitch span { display: none; }
  html.tu-rail .tu-side-foot { padding: var(--tu-space-4) 8px 0; }

  /* Gruppetiketten blir ett streck — rytmen finns kvar, ordet får inte plats. */
  html.tu-rail .tu-navgroup { font-size: 0; padding: var(--tu-space-3) 14px var(--tu-space-2); }
  html.tu-rail .tu-navgroup::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--tu-side-chip);
  }

  html.tu-rail .tu-navlink {
    justify-content: center;
    gap: 0;
    padding: 10px 0;
    margin: 1px var(--tu-space-2);
  }
  html.tu-rail .tu-navlink__t { display: none; }
  html.tu-rail .tu-navlink i { font-size: 14px; width: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AKTIVITETSVYN (calendar/add.php)
   --------------------------------------------------------------------------
   Vyn låg som två bootstrap-spalter — fälten i col-5 med etiketterna i
   col-4 bredvid, flikarna i col-7 — inuti en .row med p-5. Fälten fick
   340 px och en textruta för utvärdering som aldrig sparades tog den
   halva som borde ha visat träningens innehåll. Nu ligger uppgifterna i
   ett kort över hela bredden och flikarna under.
   ══════════════════════════════════════════════════════════════════════════ */

/* Fälten i ett tolvspaltsrutnät. Ett auto-fit-rutnät gav sex lika breda
   spalter på en bred skärm, så "Plats" blev lika bred som "Börjar" och låg
   ensam på en halv rad. Här fyller varje rad: typ · beskrivning · plats,
   sedan datum · tid · den träning eller match aktiviteten hör till. */
.tu-eventfields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--tu-space-4);
}
.tu-eventfields > .f-type   { grid-column: span 3; }
.tu-eventfields > .f-name   { grid-column: span 5; }
.tu-eventfields > .f-venue  { grid-column: span 4; }
.tu-eventfields > .f-date   { grid-column: span 3; }
.tu-eventfields > .f-time   { grid-column: span 2; }
.tu-eventfields > .f-link   { grid-column: span 5; }
.tu-eventfields > .f-repeat { grid-column: span 3; }
.tu-eventfields > .f-full   { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .tu-eventfields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tu-eventfields > .f-type   { grid-column: span 2; }
  .tu-eventfields > .f-name   { grid-column: span 4; }
  .tu-eventfields > .f-venue  { grid-column: span 6; }
  .tu-eventfields > .f-date   { grid-column: span 2; }
  .tu-eventfields > .f-link   { grid-column: span 6; }
}

@media (max-width: 700px) {
  .tu-eventfields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tu-space-3); }
  .tu-eventfields > .f-type,
  .tu-eventfields > .f-name,
  .tu-eventfields > .f-venue,
  .tu-eventfields > .f-date,
  .tu-eventfields > .f-link   { grid-column: span 2; }
  .tu-eventfields > .f-time,
  .tu-eventfields > .f-repeat { grid-column: span 1; }
}

/* Ett fält där rullistan delar rad med en knapp — "välj träning" plus
   "ny träning". */
.tu-fld__row { display: flex; gap: var(--tu-space-2); align-items: center; }
.tu-fld__row > .tu-select,
.tu-fld__row > .ts-wrapper { flex: 1; min-width: 0; }
.tu-fld__row > .tu-btn { flex: none; }

/* Länkarna till matchen, planen och rapporten står på fältets plats — de är
   vad fältet hade visat om det gick att ändra här. */
.tu-fld__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-3);
  align-items: center;
  margin: 0;
  padding: 7px 0;
  font-size: var(--tu-text-sm);
}
.tu-fld__links .tu-muted { color: var(--tu-muted); }

/* Kryssruta med sin text, på fältets rad. Etikettregeln .tu-fld > label är
   mer specifik än en ensam klass, så den måste matchas. */
.tu-fld > .tu-check,
.tu-check {
  display: flex;
  align-items: center;
  gap: var(--tu-space-2);
  font-size: var(--tu-text-sm);
  color: var(--tu-ink);
  padding: 7px 0;
  margin: 0;
  cursor: pointer;
}
.tu-check > input { width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }

/* ── Träningens innehåll i summeringen ───────────────────────────────────
   Låg som list-group inuti list-group: varje övning fick en egen ram och
   14 px indrag, så tjugo övningar blev tjugo lådor. Blocket är rubriken,
   övningarna raderna under den. */
.tu-plan { list-style: none; margin: 0; padding: 0; counter-reset: tu-block; }
.tu-plan > li { padding: var(--tu-space-3) 0; border-top: 1px solid var(--tu-line); }
.tu-plan > li:first-child { border-top: 0; padding-top: 0; }
.tu-plan__block {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  margin: 0 0 var(--tu-space-2);
}
.tu-plan__ex { list-style: none; margin: 0; padding: 0; }
.tu-plan__ex li {
  font-size: var(--tu-text-sm);
  color: var(--tu-ink);
  padding: var(--tu-space-1) 0 var(--tu-space-1) 14px;
  position: relative;
}
.tu-plan__ex li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tu-line-strong);
}
.tu-plan__ex li p:last-child { margin-bottom: 0; }

/* Fritext som skrivits i TinyMCE — matchplanens coachpunkter, matchrapporten,
   träningens beskrivning. */
.tu-prose {
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
  margin-top: var(--tu-space-3);
}
.tu-prose > :last-child { margin-bottom: 0; }

/* Matchplanens första steg. Bilden är bredare än kortet och låg som
   card-img-top, alltså utan maxhöjd — en plan i liggande format sköt ner
   matchrapporten bredvid. */
.tu-gp-img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: var(--tu-surface-2);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius);
  margin-bottom: var(--tu-space-3);
}

/* ── RPE-raden ───────────────────────────────────────────────────────────
   Namnet, längden och skalan 1–10 på en rad. Skalan låg som tio
   form-check-input med siffran före, så den bröt mitt i på en smal skärm
   och det gick inte att se vilken siffra som hörde till vilken ruta. */
.tu-att-row--rpe {
  flex-wrap: wrap;
  gap: var(--tu-space-2) var(--tu-space-4);
  padding-top: var(--tu-space-3);
  padding-bottom: var(--tu-space-3);
}
.tu-att-row--rpe .tu-att-row__name { flex: 1; min-width: 140px; }

.tu-rpe-len {
  display: flex;
  align-items: center;
  gap: var(--tu-space-2);
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  white-space: nowrap;
  margin: 0;
}
.tu-rpe-len input { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }

.tu-rpe-scale { display: flex; flex-wrap: wrap; gap: var(--tu-space-1); }
.tu-rpe-opt { margin: 0; cursor: pointer; }
.tu-rpe-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.tu-rpe-opt span {
  display: block;
  min-width: 30px;
  padding: 5px 0;
  text-align: center;
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tu-muted);
  background: var(--tu-surface);
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius);
}
.tu-rpe-opt:hover span { border-color: var(--tu-muted); color: var(--tu-ink); }
.tu-rpe-opt input:checked + span {
  background: var(--tu-accent);
  border-color: var(--tu-accent);
  color: var(--tu-on-accent);
  font-weight: 600;
}
.tu-rpe-opt input:focus-visible + span { box-shadow: var(--tu-focus); }

/* ── Matchtruppen ─────────────────────────────────────────────────────── */
.tu-troop { table-layout: fixed; }
.tu-troop th:first-child, .tu-troop td:first-child { width: 40%; }
.tu-troop .tu-td-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-troop .tu-td-count { width: 15%; }
.tu-troop .tu-td-count input {
  display: block;
  width: 100%;
  max-width: 90px;
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* ── Målpoäng på matchsidan ───────────────────────────────────────────────
   Kortet står till höger om matchens dokument. Dokumentlistan är tre rader,
   målpoängen en hel trupp — den breda kolumnen hör till höger sida här, och
   inte till vänster som .tu-dash--2 annars ger. Under 1100px lägger den
   generella regeln korten på varandra, och då ska det stå kvar så. */
@media (min-width: 1101px) {
  .tu-dash--gamehead { grid-template-columns: 1fr 1.6fr; }
  /* Truppen är tjugo rader, dokumenten tre. Utan detta sträcktes
     dokumentkortet till målpoängens höjd och blev mest tom yta. */
  .tu-dash--gamehead { align-items: start; }
}
.tu-troop--pts th:first-child, .tu-troop--pts td:first-child { width: 46%; }
.tu-troop--pts .tu-td-count { width: 18%; }
.tu-troop--pts tfoot th, .tu-troop--pts tfoot td {
  border-top: 2px solid var(--tu-line-strong);
  /* Sista raden i en tabell behöver ingen linje under sig — kortets kant
     står redan där, och tillsammans blev det två streck. */
  border-bottom: 0;
  font-weight: 600;
  color: var(--tu-ink);
}

/* Räknaren: ett mål i taget är det vanliga, och då är en knapp snabbare än
   att markera innehållet och skriva en siffra. Fältet är kvar för den som
   vill skriva in fyra direkt. */
.tu-cnt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tu-space-1);
}
.tu-cnt__btn {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--tu-muted);
  background: var(--tu-surface);
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius);
  cursor: pointer;
}
.tu-cnt__btn:hover:not(:disabled) { border-color: var(--tu-accent); color: var(--tu-accent); }
.tu-cnt__btn:focus-visible { box-shadow: var(--tu-focus); outline: none; }
.tu-cnt__btn:disabled { opacity: .35; cursor: default; }
.tu-troop--pts .tu-cnt__val {
  width: 46px;
  max-width: 46px;
  margin: 0;
  padding-left: var(--tu-space-1);
  padding-right: var(--tu-space-1);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Sifferfältets egna pilar tar plats som räknarknapparna redan har. */
.tu-cnt__val::-webkit-outer-spin-button,
.tu-cnt__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tu-cnt__val { -moz-appearance: textfield; appearance: textfield; }

/* Raderna som har något att visa ska gå att hitta i en lista på tjugo. */
.tu-troop--pts tbody tr.is-scoring .tu-td-name { font-weight: 600; color: var(--tu-ink); }
.tu-troop--pts tbody tr.is-scoring .tu-td-total { color: var(--tu-accent); font-weight: 600; }
.tu-troop--pts tbody tr.is-saving { opacity: .55; }
.tu-troop--pts tbody tr.is-saved { background: var(--tu-ok-soft); }
.tu-troop--pts tbody tr { transition: background .25s ease, opacity .15s ease; }

.tu-gs-foot { justify-content: flex-start; }
.tu-gs-check[data-off] { color: var(--tu-warn-ink); }

@media (max-width: 700px) {
  .tu-troop--pts th:first-child, .tu-troop--pts td:first-child { width: 34%; }
  .tu-troop--pts .tu-td-count { width: 22%; }
  .tu-cnt { gap: 2px; }
  .tu-cnt__btn { width: 28px; height: 28px; }
  .tu-troop--pts .tu-cnt__val { width: 38px; max-width: 38px; }
}

/* Minilistans vänsterled är oftast ett namn, inte en länk — det ska kapas
   på samma sätt. */
.tu-mini li > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .tu-att-row--rpe { gap: var(--tu-space-2); }
  .tu-rpe-scale { width: 100%; }
  .tu-rpe-opt { flex: 1; }
  .tu-rpe-opt span { min-width: 0; padding: 9px 0; }
  .tu-troop th:first-child, .tu-troop td:first-child { width: 34%; }
}

/* RPE-listan och bulkfältet är smala till innehållet: namn, längd och en
   skala tar inte tolvhundra pixlar, och sträckt över hela bredden hamnade
   namnet i ena kanten och skalan i den andra. */
#pane_rpe .tu-roster { max-width: 920px; }
.tu-rpe-bulk { max-width: 520px; }
/* Namnet på det dokument kortet visar — matchplanen, rapporten. */
.tu-card__lead { font-size: var(--tu-text); color: var(--tu-ink); margin: 0 0 var(--tu-space-3); }

/* ══════════════════════════════════════════════════════════════════════════
   AKTIVITETSLISTANS SNABBVY
   --------------------------------------------------------------------------
   Klick på aktivitetens namn öppnar en panel bredvid listan. Panelen låg som
   `col-6 border shadow rounded` med ett bootstrap-modalhuvud inuti och
   växlades genom att byta col-klass på listan — listan hoppade i bredd och
   panelen hamnade långt ner på mobilen utan att man såg att något hänt.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tu-gap); }
.tu-split.is-open { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }

.tu-quick {
  display: flex;
  flex-direction: column;
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-card-pad);
  box-shadow: var(--tu-shadow-lift);
  /* Listan är lång. Panelen följer med i stället för att skrolla bort. */
  position: sticky;
  top: var(--tu-space-4);
  max-height: calc(100vh - var(--tu-space-6));
  overflow-y: auto;
  align-self: start;
}
.tu-quick[hidden] { display: none; }

/* Panelen skrollar inuti sig själv, så en absolut placerad stängknapp
   försvann uppåt så fort man tittade på belastningen längst ner. Sticky i
   panelens övre högra hörn — den negativa marginalen låter rubriken ligga
   kvar på samma rad. */
.tu-quick__close {
  position: sticky;
  top: 0;
  z-index: 3;
  align-self: flex-end;
  margin-bottom: -28px;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 20px;
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius);
  background: var(--tu-surface);
  color: var(--tu-faint);
  cursor: pointer;
}
.tu-quick__close:hover { background: var(--tu-surface-2); color: var(--tu-ink); }

.tu-quick__head { margin-bottom: var(--tu-gap); padding-right: 34px; }
.tu-quick__head h2 { margin: 0; font-size: var(--tu-h3); }
.tu-quick__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-2);
  margin-top: var(--tu-space-3);
}
.tu-quick__details {
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
  margin-bottom: var(--tu-gap);
}
.tu-quick__details > :last-child { margin-bottom: 0; }

.tu-quick h3 { margin: 0; font-size: var(--tu-text-lg); }

/* De frånvarande är hopfällda — de är fler än de närvarande och panelen ska
   gå att överblicka utan att skrolla förbi trettio namn. */
.tu-quick__more { margin-top: var(--tu-space-3); }
.tu-quick__more > summary {
  font-size: var(--tu-text-sm);
  color: var(--tu-accent-ink);
  cursor: pointer;
  padding: var(--tu-space-2) 0;
  list-style: none;
}
.tu-quick__more > summary::-webkit-details-marker { display: none; }
.tu-quick__more > summary::before { content: "＋ "; }
.tu-quick__more[open] > summary::before { content: "－ "; }
.tu-quick__more > summary:hover { color: var(--tu-accent); }
.tu-quick__more .tu-roster { margin-bottom: 0; }

/* Anteckningarnas TinyMCE ska se ut som ett fält, inte som ett eget program. */
.tu-quick .tox-tinymce {
  border: 1px solid var(--tu-line-strong) !important;
  border-radius: var(--tu-radius) !important;
}
.tu-quick textarea#event_notes {
  width: 100%;
  background: var(--tu-surface);
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius);
  padding: var(--tu-space-2) var(--tu-space-3);
  font-size: var(--tu-text-sm);
  font-family: var(--tu-font-body);
  color: var(--tu-ink);
}

.tu-quick__spin { padding: var(--tu-space-6) 0; display: flex; justify-content: center; }
.tu-quick__spin[hidden] { display: none; }
.tu-quick__spin span {
  width: 22px;
  height: 22px;
  border: 2px solid var(--tu-line-strong);
  border-top-color: var(--tu-accent);
  border-radius: 50%;
  animation: tu-spin .7s linear infinite;
}
@keyframes tu-spin { to { transform: rotate(360deg); } }

/* ── Övningen i snabbvyn ──────────────────────────────────────────────────
   Samma panel som kalendern använder, men innehållet är en ritning per steg
   i stället för närvaro och belastning. Stegen staplas: en flikrad knäcks
   över tre rader i 27 rem och gömmer då det mesta. */
.tu-quick__tags { margin: var(--tu-space-3) 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tu-quick__tags .badge { margin: 0; }

.tu-quick__sect { margin-top: var(--tu-gap); }
.tu-quick__sect h3 { margin-bottom: var(--tu-space-2); }

.tu-quick__step { margin-top: var(--tu-gap); }
.tu-quick__step h3 {
  margin-bottom: var(--tu-space-2);
  font-size: var(--tu-text-sm);
  font-family: var(--tu-font-label);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tu-muted);
}

/* Ritningen är panelens tyngsta innehåll och ska fylla bredden. Ramen gör
   att en plan med vit botten inte flyter ut i kortet. */
.tu-quick__media {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius);
  background: var(--tu-surface-2);
}
.tu-quick__step .tu-quick__details { margin-top: var(--tu-space-2); }

@media (max-width: 1100px) {
  .tu-split.is-open { grid-template-columns: minmax(0, 1fr); }
  .tu-quick { position: static; max-height: none; order: -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMERINGEN PÅ ÖVNINGSKORTET
   --------------------------------------------------------------------------
   Kortet visar skissen; den gröna knappen i nedre högra hörnet spelar upp
   animeringen i en egen ruta. Knappens plats och form kommer från
   drawer.css — här bara rutan filmen spelas i.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Rutan filmen spelas i ────────────────────────────────────────────── */
.tu-lightbox {
  /* Skisserna spelas in i planens format: helplan är stående 1440×2040,
     halvplan liggande. En fast bredd gav vita fält på sidorna om den
     stående. Rutan tar formen filmen har, inom rimliga gränser. */
  width: fit-content;
  min-width: min(340px, 90vw);
  max-width: min(920px, 92vw);
  padding: var(--tu-card-pad);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  background: var(--tu-surface);
  color: var(--tu-ink);
  box-shadow: var(--tu-shadow-lift);
}
.tu-lightbox::backdrop { background: var(--tu-overlay); }

.tu-lightbox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tu-space-3);
  margin-bottom: var(--tu-space-3);
}
.tu-lightbox__title { margin: 0; font-size: var(--tu-text-lg); }
.tu-lightbox__close {
  flex: none;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 20px;
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius);
  background: var(--tu-surface);
  color: var(--tu-faint);
  cursor: pointer;
}
.tu-lightbox__close:hover { background: var(--tu-surface-2); color: var(--tu-ink); }

.tu-lightbox__video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: var(--tu-radius);
  background: var(--tu-surface-2);
}

@media (max-width: 700px) {
  .tu-lightbox { padding: var(--tu-space-4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SÄSONGSPLANERINGEN
   --------------------------------------------------------------------------
   Modulen var ren bootstrap med tre olika färgscheman för samma fem dagtyper
   — bootstrapklasser på två ställen, hexfärger på två andra — och på
   startsidan lästes en variabel som aldrig definierades, så dagtypsraden var
   alltid vit.

   Här finns ett schema. .tu-dt--* sätter bara tre custom properties; den som
   bär dem (tabellcell, chip, dagrad) bestämmer själv hur de används.

   Valet följer appens konvention: match är korall och träning grönt, precis
   som .tu-event.type-GAME och .type-TRAINING i aktivitetslistan. Matchdagen
   är den enda med mättad botten, så veckans form läses med en blick.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-dt--rest     { --tu-dt-line: var(--tu-line-strong); --tu-dt-bg: var(--tu-surface-2);   --tu-dt-ink: var(--tu-muted); }
.tu-dt--recovery { --tu-dt-line: var(--tu-info);        --tu-dt-bg: var(--tu-info-soft);   --tu-dt-ink: var(--tu-info-ink); }
.tu-dt--high     { --tu-dt-line: var(--tu-warn);        --tu-dt-bg: var(--tu-warn-soft);   --tu-dt-ink: var(--tu-warn-ink); }
.tu-dt--prep     { --tu-dt-line: var(--tu-accent);      --tu-dt-bg: var(--tu-accent-soft); --tu-dt-ink: var(--tu-accent-ink); }
.tu-dt--game     { --tu-dt-line: var(--tu-accent);      --tu-dt-bg: var(--tu-accent);      --tu-dt-ink: var(--tu-on-accent); }

/* Chipset läser tonen i stället för att ha en egen variant per dagtyp. */
.tu-chip.tu-dt {
  background: var(--tu-dt-bg);
  color: var(--tu-dt-ink);
  border-color: transparent;
}

/* ── Veckans form som sju rutor ───────────────────────────────────────────
   M T O T F L S i en remsa. Visar om det är en matchvecka eller en tung
   träningsvecka utan att något behöver fällas ut. */
.tu-daystrip { display: inline-flex; gap: 2px; vertical-align: middle; }
.tu-daystrip__d {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--tu-radius-sm);
  background: var(--tu-dt-bg);
  color: var(--tu-dt-ink);
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  cursor: default;
}

/* ── Läsmatrisen ──────────────────────────────────────────────────────────
   En kolumn per veckodag. Låg förut som table-bordered table-sm med inline
   style-attribut på varje cell. */
.tu-weekgrid { table-layout: fixed; font-size: var(--tu-text-sm); }
.tu-weekgrid th:first-child,
.tu-weekgrid td:first-child { width: 142px; }
.tu-weekgrid thead th { text-align: center; }
.tu-weekgrid thead th:first-child { text-align: left; }
.tu-weekgrid tbody th[scope="row"] {
  text-align: left;
  font-family: var(--tu-font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  padding: var(--tu-space-2) var(--tu-cell-pad-x);
  border-bottom: 1px solid var(--tu-line);
  vertical-align: top;
}
.tu-weekgrid td {
  text-align: center;
  vertical-align: top;
  padding: 9px 10px;
}
.tu-weekgrid tbody tr:hover { background: transparent; }
/* .tu-table släcker kantlinjen på sista radens td men inte på dess th, så
   det hängde kvar ett streck under etikettspalten. */
.tu-weekgrid tbody tr:last-child th[scope="row"] { border-bottom: 0; }

.tu-weekgrid__date {
  display: block;
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 400;
  color: var(--tu-faint);
  letter-spacing: 0;
  text-transform: none;
}
.tu-weekgrid td.tu-dt {
  background: var(--tu-dt-bg);
  color: var(--tu-dt-ink);
  font-weight: 600;
}
.tu-weekgrid__num { font-variant-numeric: tabular-nums; }
.tu-weekgrid__yes { color: var(--tu-ok); font-size: 13px; }
.tu-weekgrid__text { text-align: left; color: var(--tu-muted); line-height: 1.45; }
.tu-weekgrid__tags { display: table-cell; }
.tu-weekgrid__tags .tu-chip { margin: 0 2px 2px 0; }

@media (max-width: 900px) {
  .tu-weekgrid { min-width: 760px; }
}

/* ── Hubben: period, veckorader och nyskapande ────────────────────────────
   Perioderna låg i ett dragspel med veckorna i ett andra dragspel inuti, och
   veckans matris tre klick ner. Här är perioden ett kort och veckan en rad
   som fäller ut sin matris på plats. */
.tu-period { margin-bottom: var(--tu-gap); }
.tu-period.is-now { border-color: var(--tu-accent); }
.tu-period__descr {
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
  margin: 0 0 var(--tu-space-4);
  line-height: 1.55;
}
.tu-period .tu-card__head h2 { display: flex; align-items: center; gap: var(--tu-space-2); }

/* Sektionsrubrik med sin förklaring — det är den som gör skillnaden mellan
   mall och planering tydlig. */
.tu-sect { margin-top: var(--tu-space-4); }
.tu-sect__label {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  margin: 0 0 var(--tu-space-2);
}
.tu-sect__label span {
  font-family: var(--tu-font-body);
  font-size: var(--tu-text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tu-faint);
  margin-left: var(--tu-space-2);
}

.tu-weekrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-top: 1px solid var(--tu-line);
}
.tu-weekrow:last-of-type { border-bottom: 1px solid var(--tu-line); }
.tu-weekrow.is-now { background: var(--tu-accent-soft); }

/* Hela raden utom knapparna är tryckytan för att fälla ut matrisen. */
.tu-weekrow__hit {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) minmax(0, 1fr) auto minmax(0, 0.8fr) 18px;
  align-items: center;
  gap: var(--tu-space-3);
  width: 100%;
  padding: 11px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.tu-weekrow__name { font-weight: 600; color: var(--tu-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-weekrow__dates { font-size: var(--tu-text-sm); color: var(--tu-muted); white-space: nowrap; }
.tu-weekrow__count { font-size: var(--tu-text-xs); color: var(--tu-faint); text-align: right; }
.tu-weekrow__chev { color: var(--tu-faint); transition: transform .15s ease; justify-self: end; }
.tu-weekrow__hit[aria-expanded="true"] .tu-weekrow__chev { transform: rotate(180deg); }
.tu-weekrow__hit:hover .tu-weekrow__name { color: var(--tu-accent-ink); }

.tu-weekrow__actions { display: flex; gap: var(--tu-space-2); align-items: center; padding-left: var(--tu-space-3); }
.tu-weekrow__body { grid-column: 1 / -1; padding: 0 0 var(--tu-space-4); }
.tu-weekrow__body[hidden] { display: none; }

/* Formuläret för en ny mall eller vecka ligger hopfällt i sin sektion —
   det var en egen sida förut. */
.tu-newrow { margin-top: var(--tu-space-3); }
.tu-newrow > summary {
  display: inline-block;
  font-size: var(--tu-text-sm);
  color: var(--tu-accent-ink);
  cursor: pointer;
  list-style: none;
  padding: var(--tu-space-2) 0;
}
.tu-newrow > summary::-webkit-details-marker { display: none; }
.tu-newrow > summary::before { content: "＋ "; }
.tu-newrow[open] > summary::before { content: "－ "; }
.tu-newrow > summary:hover { color: var(--tu-accent); }
/* Att byta namn lägger inte till något, så plustecknet skulle ljuga. */
.tu-newrow--edit > summary::before,
.tu-newrow--edit[open] > summary::before { content: "✎ "; }
.tu-newrow__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--tu-space-3);
  align-items: end;
  padding: var(--tu-space-3);
  background: var(--tu-surface-2);
  border-radius: var(--tu-radius);
}

@media (max-width: 900px) {
  .tu-weekrow { grid-template-columns: minmax(0, 1fr); }
  .tu-weekrow__hit { grid-template-columns: minmax(0, 1fr) auto 18px; row-gap: 6px; }
  .tu-weekrow__dates { grid-column: 1; font-size: var(--tu-text-xs); }
  .tu-weekrow__count { grid-column: 2; text-align: left; }
  .tu-weekrow__actions { padding: 0 0 var(--tu-space-3); }
}

/* ── Dagredigeraren: en rad per dag ───────────────────────────────────────
   Veckan låg som sju höga kort med tio fält i varje, i ett rutnät som bröt
   4+3 på laptop — fredagen hamnade under måndagen och det slutade läsas som
   en vecka. Nu är dagen en rad: typ, minuter och RPE står alltid framme,
   textfälten fälls in. */
.tu-week {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  overflow: hidden;
  margin-bottom: var(--tu-gap);
}
.tu-day { border-bottom: 1px solid var(--tu-line); }
.tu-week > .tu-day:last-child { border-bottom: 0; }

.tu-day__head {
  display: grid;
  grid-template-columns: 76px minmax(150px, 210px) 92px 80px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tu-space-3);
  padding: var(--tu-space-3) var(--tu-space-4);
}

/* Dagnamnet bär dagtypens färg — samma ton som remsan på hubben och som
   matrisens översta rad. Matchdagen är den enda med mättad botten. */
.tu-day__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  border-radius: var(--tu-radius);
  background: var(--tu-dt-bg);
  color: var(--tu-dt-ink);
  font-family: var(--tu-font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
}
.tu-day__date { font-size: var(--tu-text-2xs); font-weight: 400; letter-spacing: 0; opacity: .8; }

/* Minuter och RPE är de två siffror man jämför mellan dagarna. */
.tu-day__num {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  white-space: nowrap;
}
.tu-day__num input { width: 56px; text-align: right; font-variant-numeric: tabular-nums; }

/* Vad som står i den hopfällda raden, så en stängd dag inte är tyst. */
.tu-day__preview {
  margin: 0;
  font-size: var(--tu-text-sm);
  color: var(--tu-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tu-day__toggle[aria-expanded="true"] { color: var(--tu-ink); }
/* Sammanfattningen är till för den stängda raden — när den är öppen står
   texten i fälten i stället. */
.tu-day__head:has(.tu-day__toggle[aria-expanded="true"]) .tu-day__preview { visibility: hidden; }

.tu-day__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--tu-space-3);
  padding: 0 var(--tu-space-4) var(--tu-space-4);
}
.tu-day__body[hidden] { display: none; }
.tu-day__body > .f-check { grid-column: span 3; align-self: end; padding-bottom: 7px; }
.tu-day__body > .f-tags  { grid-column: span 9; }
.tu-day__body > .f-text  { grid-column: span 3; }
.tu-day__body > .f-full  { grid-column: 1 / -1; }

.tu-week__bar { display: flex; justify-content: flex-end; margin-bottom: var(--tu-space-2); }
.tu-week__save { display: flex; gap: var(--tu-space-2); margin-bottom: var(--tu-space-5); }

@media (max-width: 1100px) {
  .tu-day__body { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tu-day__body > .f-check { grid-column: span 2; }
  .tu-day__body > .f-tags  { grid-column: span 4; }
  .tu-day__body > .f-text  { grid-column: span 3; }
}

@media (max-width: 820px) {
  .tu-day__head {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    row-gap: var(--tu-space-2);
  }
  .tu-day__name { grid-row: span 2; }
  .tu-day__preview { grid-column: 2 / -1; }
  .tu-day__num { justify-self: start; }
}

@media (max-width: 700px) {
  .tu-day__body { grid-template-columns: minmax(0, 1fr); }
  .tu-day__body > .f-check,
  .tu-day__body > .f-tags,
  .tu-day__body > .f-text { grid-column: 1 / -1; }
}
/* Underrubriken i redigerarens sidhuvud säger vilken sorts vecka man står i —
   mall eller planering. Det var den skillnaden som inte gick att se förut. */
.tu-page-sub { margin: var(--tu-space-1) 0 0; font-size: var(--tu-text-sm); color: var(--tu-muted); }

/* ── Perioderna i säsongsredigeraren ───────────────────────────────────── */
.tu-partrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tu-space-3);
  align-items: start;
  padding: var(--tu-space-3) 0;
  border-top: 1px solid var(--tu-line);
}
.tu-partrow__top { margin: 0; display: flex; align-items: center; gap: var(--tu-space-2); flex-wrap: wrap; }
.tu-partrow__dates { font-size: var(--tu-text-sm); color: var(--tu-muted); }
.tu-partrow__descr { margin: 5px 0 0; font-size: var(--tu-text-sm); color: var(--tu-muted); line-height: 1.5; }
.tu-partrow__actions { display: flex; gap: var(--tu-space-2); }

/* Periodformuläret står alltid öppet — det är sidans uppgift. */
.tu-newrow--open { margin-top: var(--tu-space-4); }
.tu-newrow__buttons { grid-column: 1 / -1; display: flex; gap: var(--tu-space-2); }
.tu-newrow__form .tu-fld--full { grid-column: 1 / -1; }
.tu-note--error { border-color: var(--tu-danger); color: var(--tu-danger-ink); }
/* I en tvåspaltig dash blir rutnätet lika högt som grannen — fälten gled isär
   när TinyMCE bredvid var dubbelt så hög. */
.tu-dash .tu-formgrid { align-content: start; }

/* Delningsvyn är publik och har ingen sidomeny — eget, enkelt sidhuvud. */
.tu-share-head {
  padding: var(--tu-space-4) 0 var(--tu-space-5);
  border-bottom: 1px solid var(--tu-line);
  margin-bottom: var(--tu-gap);
}
.tu-share-head h1 { margin: 0; font-size: var(--tu-h2); }

/* ── Delningslänken ────────────────────────────────────────
   Rutan ligger hopfälld under det man delar — säsongen, perioden eller
   veckomallen — och fälls ut med färdig länk. */
.tu-sharebox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-2);
  align-items: center;
  margin: var(--tu-space-2) 0;
  padding: var(--tu-space-3);
  background: var(--tu-surface-2);
  border-radius: var(--tu-radius);
}
.tu-sharebox[hidden] { display: none; }
.tu-sharebox__url {
  flex: 1 1 280px;
  min-width: 0;
  font-size: var(--tu-text-xs);
  font-family: var(--tu-font-label);
}
/* Veckoraden är ett rutnät med två spalter; rutan ska ha hela bredden. */
.tu-weekrow > .tu-sharebox { grid-column: 1 / -1; }

/* ── Veckomallarna i delningsvyn ───────────────────────────── */
.tu-shareweek + .tu-shareweek { margin-top: var(--tu-space-5); }
.tu-shareweek__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--tu-space-3);
  margin-bottom: var(--tu-space-2);
}
.tu-shareweek__head h3 { margin: 0; font-size: var(--tu-text-lg); }
.tu-share-foot {
  text-align: center;
  color: var(--tu-faint);
  font-size: var(--tu-text-xs);
  margin-top: var(--tu-space-5);
}

@media print {
  .no-print { display: none !important; }
  .tu-shareweek { break-inside: avoid; }
  .tu-card { box-shadow: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PLAYBOOKEN — DELNINGSVYN
   --------------------------------------------------------------------------
   En playbook delas med spelare och läses oftast i telefon, en bild i taget.
   Därför är en slide byggd för att rymmas på en skärm: ritbordet har ett
   höjdtak och navigeringen klistrar sig i underkanten. Tjugo bilder ska gå
   att klicka igenom utan att skrolla en enda gång — förut låg knapparna
   under vecket, så varje bildbyte kostade två skrollningar.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-pb { max-width: 1240px; margin: 0 auto; padding: 0 var(--tu-space-4); }

/* Sidhuvudet: lagmärket, playbookens namn, utskrift. Namnet är sidans h1 —
   slidens egen rubrik står i sliden. */
.tu-pb__head {
  display: flex;
  align-items: center;
  gap: var(--tu-space-4);
  padding: var(--tu-space-4) 0 var(--tu-space-3);
  border-bottom: 1px solid var(--tu-line);
}
.tu-pb__badge { flex: none; width: 48px; height: 48px; object-fit: contain; }
.tu-pb__id { flex: 1 1 auto; min-width: 0; }
.tu-pb__id h1 { margin: 0; font-size: var(--tu-h2); }
.tu-pb__head .tu-btn { flex: none; }
/* På smal skärm blir beskrivningen flera rader, och en lodrätt centrerad
   utskriftsknapp hamnade då mitt i texten. Toppjustera i stället. */
@media (max-width: 767.98px) {
  .tu-pb__head { align-items: flex-start; }
  .tu-pb__head .tu-btn { margin-top: 2px; }
}

/* ── Sliden ──────────────────────────────────────────────────────────────
   Bara den aktiva syns på skärm. Regeln ligger i @media screen så utskriften
   inte behöver slå tillbaka den med en lika tung väljare. */
@media screen {
  .tu-pb__slide { display: none; }
  .tu-pb__slide.is-active { display: block; }
}
.tu-pb__slide { padding: var(--tu-space-5) 0 var(--tu-space-4); }
.tu-pb__title { margin: 0 0 var(--tu-space-5); font-size: var(--tu-h1); text-align: center; }

/* Text och ritbord står i två spalter först när det finns bredd för det. En
   slide utan ritbord får läsbar radlängd i stället för en tom halva — den
   gamla vyn höll uppe en tom 800 px hög spalt. */
.tu-pb__grid { display: grid; gap: var(--tu-space-5); grid-template-columns: minmax(0, 1fr); }
.tu-pb__grid--text { max-width: 70ch; margin-inline: auto; }
@media (min-width: 768px) {
  .tu-pb__grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.tu-pb__body { font-size: var(--tu-text-lg); line-height: 1.7; color: var(--tu-ink); }
.tu-pb__body > :last-child { margin-bottom: 0; }
.tu-pb__body ul, .tu-pb__body ol { padding-left: 1.3em; }

/* Ritbordet. Höjdtaket är det som håller sliden på en skärm — en stående
   plan blev annars 1300 px hög och sköt ut navigeringen ur bild. */
.tu-pb__fig { margin: 0; display: flex; justify-content: center; }
.tu-pb__fig img {
  max-width: 100%;
  max-height: calc(100vh - 290px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--tu-radius);
  background: var(--tu-surface);
  box-shadow: var(--tu-shadow-lift);
}
@media (max-width: 767.98px) { .tu-pb__fig img { max-height: 58vh; } }

/* ── Navigeringen ────────────────────────────────────────────────────────
   Klistrad i underkanten, och knapparna sitter ihop med räknaren i mitten i
   stället för i varsin skärmkant — på en bred skärm låg de 1400 px isär. */
.tu-pb__nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tu-space-4);
  padding: var(--tu-space-3) 0;
  padding-bottom: calc(var(--tu-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--tu-bg);
  border-top: 1px solid var(--tu-line);
}
.tu-pb__nav .tu-btn { width: 44px; height: 44px; padding: 0; }
.tu-pb__count {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-sm);
  font-weight: 600;
  color: var(--tu-muted);
  min-width: 54px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Prickarna bär upp till ett tiotal bilder. Fler än så blev ett band av
   tiopixelsmål som ingen kan sikta på — då visas spåret i stället. */
.tu-pb__dots { display: flex; gap: var(--tu-space-2); }
.tu-pb__dot {
  width: 10px; height: 10px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--tu-line-strong);
  cursor: pointer;
  transition: background-color .15s;
}
.tu-pb__dot.is-active { background: var(--tu-accent); }
.tu-pb__track {
  width: min(240px, 38vw);
  height: 4px;
  border-radius: var(--tu-radius-pill);
  background: var(--tu-line);
  overflow: hidden;
}
.tu-pb__track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tu-accent);
  border-radius: inherit;
  transition: width .2s;
}

/* ── Utskrift ────────────────────────────────────────────────────────────
   Alla bilder, en per sida. Brytningen ligger före varje slide utom den
   första, så utskriften inte slutar med ett tomt blad. */
@media print {
  .tu-pb { max-width: none; padding: 0; }
  .tu-pb__slide { break-inside: avoid; }
  .tu-pb__slide + .tu-pb__slide { break-before: page; }
  .tu-pb__head { border-bottom: 0; }
  .tu-pb__fig img { max-height: none; box-shadow: none; border: 1px solid var(--tu-line); }
}


/* ══════════════════════════════════════════════════════════════════════════
   ÖVNINGEN — DELNINGSVYN
   --------------------------------------------------------------------------
   Samma hållning som playbookens delningsvy. Två skillnader: bredden är
   flytande hela vägen i stället för att hoppa vid bootstraps brytpunkter,
   och animeringsknappen ligger i bildens hörn. Förut satt den i textspalten,
   trehundra pixlar från den bild den styr, och syntes bara på steg 1 — så
   animeringar på senare steg gick inte att nå alls.
   ══════════════════════════════════════════════════════════════════════════ */
.tu-ex {
  width: min(1400px, 100%);
  margin: 0 auto;
  padding-inline: clamp(var(--tu-space-4), 4vw, 48px);
  padding-bottom: var(--tu-space-5);
}

.tu-ex__head {
  display: flex;
  align-items: flex-start;
  gap: var(--tu-space-4);
  padding: var(--tu-space-4) 0 var(--tu-space-3);
  border-bottom: 1px solid var(--tu-line);
}
.tu-ex__badge { flex: none; width: 48px; height: 48px; object-fit: contain; }
.tu-ex__id { flex: 1 1 auto; min-width: 0; }
.tu-ex__id h1 { margin: 0; font-size: var(--tu-h2); }
.tu-ex__head .tu-btn { flex: none; }

/* "Vad?" — vad övningen tränar. Taggarna hör till övningen, inte till
   steget; de stod förut överst i varje steg och sa samma sak om och om
   igen. De stod också nakna under rubriken, i samma bleka grå som allt
   annat smått, och lästes som en bildtext i stället för som innehåll.
   Etiketten säger vad de är, och plattan ger dem tyngd. */
.tu-ex__what {
  margin-top: var(--tu-space-3);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--tu-space-2) var(--tu-space-3);
}
.tu-ex__whatlabel {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  flex: none;
}
.tu-ex__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tu-ex .tagz {
  display: inline-block;
  font-family: var(--tu-font-body);
  font-size: var(--tu-text-sm) !important;
  font-weight: 600;
  letter-spacing: 0;
  padding: 4px 12px !important;
  border-radius: var(--tu-radius-pill);
  background: var(--tu-accent-soft);
  border: 1px solid var(--tu-accent-soft);
  color: var(--tu-accent-ink) !important;
  margin: 0 !important;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Stegnumret syns bara på papper — på skärmen säger flikarna samma sak, och
   de är dolda i utskrift. Utan det här hade sidorna inte sagt vilket steg
   de visade. */
.tu-ex__stepno { display: none; }

/* ── Stegen ──────────────────────────────────────────────────────────────
   Flikarna är egna knappar i stället för bootstrap nav-tabs, så de följer
   husets former. Bara det aktiva steget syns; i utskrift skrivs alla ut. */
.tu-ex__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-2);
  padding: var(--tu-space-3) 0 0;
}
.tu-ex__steptab {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-sm);
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius-pill);
  background: var(--tu-surface);
  color: var(--tu-muted);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.tu-ex__steptab:hover { color: var(--tu-ink); border-color: var(--tu-muted); }
.tu-ex__steptab.is-active {
  background: var(--tu-accent);
  border-color: var(--tu-accent);
  color: var(--tu-on-accent);
}

@media screen {
  .tu-ex__step { display: none; }
  .tu-ex__step.is-active { display: block; }
}
.tu-ex__step { padding-top: var(--tu-space-5); }

/* Flytande hela vägen: en spalt tills det finns plats för två, och då en
   textspalt som får en andel av bredden i stället för en fast kolumn.
   Bootstraps col-sm-5/col-sm-7 bröt redan vid 576 px, där två spalter bara
   blev trånga. */
.tu-ex__grid { display: grid; gap: clamp(var(--tu-space-4), 3vw, 44px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .tu-ex__grid { grid-template-columns: minmax(240px, 32%) minmax(0, 1fr); align-items: start; }
}
/* Utan text finns ingen spalt att ställa bilden bredvid. Då står den ensam
   och mittad, med ett tak så den inte breder ut sig över hela skärmen. */
.tu-ex__grid--media { grid-template-columns: minmax(0, 1fr) !important; }
.tu-ex__grid--media .tu-ex__media { max-width: 900px; margin-inline: auto; width: 100%; }

.tu-ex__sec + .tu-ex__sec { margin-top: var(--tu-space-5); }
.tu-ex__sec > h2 {
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
  margin: 0 0 var(--tu-space-2);
}
.tu-ex__prose { font-size: var(--tu-text); line-height: 1.65; color: var(--tu-ink); }
.tu-ex__prose > :last-child { margin-bottom: 0; }
.tu-ex__prose ul, .tu-ex__prose ol { padding-left: 1.3em; margin-bottom: var(--tu-space-2); }

/* ── Bilden och animeringen ──────────────────────────────────────────────
   Båda ligger i samma ruta och byter plats med varandra, så ytan inte
   hoppar när animeringen startar. Knappen ligger i rutans nedre högra hörn
   — samma placering som på övningskorten i listan. */
.tu-ex__media {
  position: relative;
  background: var(--tu-surface);
  border-radius: var(--tu-radius);
  box-shadow: var(--tu-shadow-lift);
  overflow: hidden;
}
.tu-ex__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 230px);
  object-fit: contain;
}
/* Filmen ligger som ett överlägg ovanpå stillbilden i stället för att byta
   ut den. Bilden håller därmed rutans höjd hela tiden — ett videoelement
   utan laddad metadata är 150 px högt, så rutan hoppade ihop i det ögonblick
   man tryckte på play och ut igen när filmen kommit fram. Den är genomskinlig
   tills första bildrutan finns, så stillbilden syns under under tiden. */
.tu-ex__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}
.tu-ex__media.is-playing video { opacity: 1; }
.tu-ex__play {
  position: absolute;
  right: var(--tu-space-3);
  bottom: var(--tu-space-3);
  z-index: 2;
  box-shadow: var(--tu-shadow-lift);
}

/* ── Utskrift ────────────────────────────────────────────────────────────
   Alla steg, ett per sida, utan knappar och utan videoelement. */
@media print {
  /* Sidans botten är grå på skärm. Slår man på bakgrundsgrafik i
     utskriftsdialogen följde den grå tonen med ut på papperet. */
  html, body, .tu-ex, .tu-ex__step { background: #fff !important; }

  .tu-ex { width: auto; padding: 0; }
  .tu-ex__steps, .tu-ex__play, .tu-ex__media video,
  .tu-ex__head .tu-btn, .tu-share-foot { display: none !important; }

  /* En spalt, och bilden under texten i stället för bredvid. Ritborden är
     breda — i en 62-procentsspalt blev de små, och textspalten bredvid blev
     så smal att steget växte förbi sidhöjden. Över hela bredden får bilden
     både mer plats och en kortare text ovanför. */
  .tu-ex__grid { grid-template-columns: minmax(0, 1fr); gap: 5mm; }
  .tu-ex__grid--media .tu-ex__media { max-width: none; }

  /* Ett steg per sida. Inget break-inside: avoid — ryms steget inte i
     resten av sidan flyttade Chrome ner hela steget och lämnade sidhuvudet
     ensamt på första arket. Brytningen före varje steg utom det första
     räcker, och håller utskriften fri från ett tomt sista blad. */
  .tu-ex__step { padding-top: 4mm; }
  .tu-ex__step + .tu-ex__step { break-before: page; }

  .tu-ex__stepno {
    display: block;
    margin: 0 0 3mm;
    font-family: var(--tu-font-label);
    font-size: 9pt;
    font-weight: 600;
    letter-spacing: var(--tu-label-track);
    text-transform: uppercase;
    color: #555;
  }

  /* Tätare sats på papper, så texten inte tränger undan bilden. */
  .tu-ex__head { padding: 0 0 3mm; }
  .tu-ex__id h1 { font-size: 15pt; }
  .tu-ex__sec + .tu-ex__sec { margin-top: 3mm; }
  .tu-ex__sec > h2 { font-size: 8pt; margin-bottom: 1mm; }
  .tu-ex__prose { font-size: 10pt; line-height: 1.4; }
  .tu-ex__prose p { margin-bottom: 2mm; }

  /* Rutan krymper till bildens bredd, annars ramade kanten in en tom yta
     när bilden är smalare än spalten. */
  .tu-ex__media {
    box-shadow: none;
    border: 1px solid #ccc;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
  }
  .tu-ex__media img {
    width: auto;
    max-width: 100%;
    max-height: 110mm;
    margin: 0 auto;
  }
}

/* ── Frånvaroorsak i snabbregistreringen ──────────────────────────────────
   Rutan ligger inline på raden. Skriver man något faller spelaren ur
   närvaron och anmäls som frånvarande den dagen — orsaken lagras i
   t_members_absence med reason OTHER och start = slut = aktivitetens datum,
   så den syns i spelarens frånvarohistorik och inte bara här. */
.tu-att-row--quick { gap: var(--tu-space-3); }
.tu-att-row--quick .tu-att-row__hit { flex: 0 1 auto; min-width: 120px; }
.tu-att-row__reason {
  flex: 1 1 200px;
  min-width: 0;
  font-size: var(--tu-text-sm);
  padding: 5px 10px;
}
.tu-att-row--quick.is-on .tu-att-row__reason { background: var(--tu-surface); }

/* Orsaken syns på raden i närvarolistan, så den inte bara finns i
   snabbregistreringen. */
.tu-att-row__why {
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
  font-style: italic;
  margin-left: 6px;
}

/* Gruppetiketten får en förklarande text, som sektionsrubrikerna i
   säsongsplanen. */
.tu-roster__label span {
  font-family: var(--tu-font-body);
  font-size: var(--tu-text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tu-faint);
  margin-left: var(--tu-space-2);
}
/* Ledare har ingen frånvaroruta, men raden ska linjera med spelarnas. */
.tu-att-row__reason--none { flex: 1 1 200px; min-width: 0; }
/* Uppdelningen under det stora talet: utespelare, målvakter, ledare. */
.tu-att-bar__split { color: var(--tu-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   FYSTESTER
   --------------------------------------------------------------------------
   Inmatningen är en lista med en rad per spelare, byggd som närvarolistan:
   namnet till vänster, fältet i mitten, det framräknade till höger. Samma
   rad på mobil, men staplad — en tränare står på plan med telefonen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Testväljaren på det nya tillfället ──────────────────────────────────── */
.tu-fit-pick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--tu-space-2);
}
.tu-fit-pick__opt {
  display: block;
  padding: var(--tu-space-3);
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius);
  background: var(--tu-surface);
  cursor: pointer;
  margin: 0;
}
.tu-fit-pick__opt:hover { border-color: var(--tu-accent); }
/* Radioknappen döps bort — hela kortet är tryckytan. Den ligger kvar för
   tangentbord och skärmläsare, bara flyttad utanför bild. */
.tu-fit-pick__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tu-fit-pick__opt:has(input:checked) {
  border-color: var(--tu-accent);
  background: var(--tu-accent-soft);
}
.tu-fit-pick__opt:has(input:focus-visible) { box-shadow: var(--tu-focus); }
.tu-fit-pick__name {
  display: block;
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: var(--tu-text-lg);
  color: var(--tu-ink);
}
.tu-fit-pick__descr {
  display: block;
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
  margin-top: 2px;
}

.tu-fit-new .tu-card__foot,
.tu-fit-settings .tu-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tu-space-3);
}
.tu-fit-settings .tu-card__foot .tu-note { margin: 0 auto 0 0; }

/* ── Listan ──────────────────────────────────────────────────────────────── */
.tu-fit-list {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  overflow: hidden;
}

/* Kolumnrubrikerna. Fälten är tomma innan man börjat, och utan rubrik går
   det inte att se om siffran ska vara meter eller sekunder. */
/* Fältkolumnen rymmer nivåväljarens längsta text, "23 · 19,0 km/h", plus
   löpningsfältet bredvid. Smalare än så kapades hastigheten mitt i. */
.tu-fit-head,
.tu-fit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 215px 170px 34px;
  align-items: center;
  gap: var(--tu-space-3);
  padding: 0 var(--tu-space-4);
}

/* Med kopplad aktivitet får raderna en datumkolumn. Den står tom för dem
   som var med — deras resultat gäller tillfällets dag. */
.tu-fit-list--split .tu-fit-head,
.tu-fit-list--split .tu-fit-row {
  grid-template-columns: minmax(0, 1fr) 215px 140px 170px 34px;
}
.tu-fit-head {
  padding-top: var(--tu-space-2);
  padding-bottom: var(--tu-space-2);
  background: var(--tu-surface-2);
  border-bottom: 1px solid var(--tu-line);
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-muted);
}
.tu-fit-head > span:last-child { grid-column: span 2; }
.tu-fit-head i {
  font-style: normal;
  color: var(--tu-faint);
  margin-left: var(--tu-space-2);
}

.tu-fit-row { border-bottom: 1px solid var(--tu-line); }
.tu-fit-row:last-child { border-bottom: 0; }
.tu-fit-row.is-done { background: var(--tu-ok-soft); }
.tu-fit-row.is-saving { opacity: .55; }

/* ── Gruppindelningen efter närvaro ──────────────────────────────────────
   Två rubriker i listan i stället för två listor: raderna ska linjera i
   samma kolumner, annars läser man dem som två olika tabeller.
   ------------------------------------------------------------------------ */
.tu-fit-group {
  padding: var(--tu-space-3) var(--tu-space-4) var(--tu-space-2);
  background: var(--tu-surface-2);
  border-bottom: 1px solid var(--tu-line);
  border-top: 1px solid var(--tu-line);
  font-family: var(--tu-font-label);
  font-size: var(--tu-text-2xs);
  font-weight: 600;
  letter-spacing: var(--tu-label-track);
  text-transform: uppercase;
  color: var(--tu-ink);
}
.tu-fit-group:first-of-type { border-top: 0; }
/* Förklaringen bredvid rubriken är vanlig text — versalerna gäller bara
   etiketten. */
.tu-fit-group span {
  font-family: var(--tu-font-body);
  font-size: var(--tu-text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tu-faint);
  margin-left: var(--tu-space-2);
}
.tu-fit-group--out { color: var(--tu-warn-ink); background: var(--tu-warn-soft); }

/* Den som inte var med har inget resultat ännu, och raden ska se ut som en
   väntande rad snarare än en tom. */
.tu-fit-row.is-late:not(.is-done) .tu-fit-row__name { color: var(--tu-muted); }

/* Anledningen till frånvaron, under namnet. */
.tu-fit-why {
  display: block;
  font-style: normal;
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
  line-height: 1.3;
}

.tu-fit-date { font-size: var(--tu-text-sm); padding-left: var(--tu-space-2); padding-right: var(--tu-space-2); }
.tu-fit-nodate { display: block; }

.tu-fit-row__name {
  font-size: var(--tu-text);
  color: var(--tu-ink);
  padding: 11px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tu-fit-gk {
  font-style: normal;
  font-size: var(--tu-text-xs);
  font-weight: 600;
  color: var(--tu-muted);
  background: var(--tu-line);
  border-radius: var(--tu-radius-pill);
  padding: 1px 6px;
  margin-left: 6px;
}

/* ── Fälten ──────────────────────────────────────────────────────────────── */
.tu-fit-row__in {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
/* Siffror högerställs — då står entalen under varandra hela listan ner och
   ett värde som sticker ut syns utan att läsas. */
.tu-fit-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.tu-fit-num--s { width: 58px; flex: 0 0 58px; }
.tu-fit-lvl { min-width: 0; flex: 1 1 auto; }
.tu-fit-colon { color: var(--tu-faint); font-weight: 600; }
.tu-fit-unit { font-size: var(--tu-text-sm); color: var(--tu-muted); }

/* Webkit lägger stegpilar i number-fält som äter halva bredden på ett
   62 px-fält och aldrig träffas med tummen. */
.tu-fit-num::-webkit-outer-spin-button,
.tu-fit-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tu-fit-num { -moz-appearance: textfield; appearance: textfield; }

/* ── Det framräknade ─────────────────────────────────────────────────────── */
.tu-fit-row__out {
  display: flex;
  align-items: baseline;
  gap: var(--tu-space-2);
  min-width: 0;
}
.tu-fit-calc {
  flex: 1;
  min-width: 0;
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tu-fit-vo2 {
  font-family: var(--tu-font-display);
  font-weight: var(--tu-display-weight);
  font-size: var(--tu-text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--tu-ink);
}
/* Förändringen mot förra testet av samma typ. Grönt upp, gult ner — det är
   en riktning, inte ett fel, så ingen röd. */
.tu-fit-delta {
  font-size: var(--tu-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tu-faint);
  white-space: nowrap;
}
.tu-fit-delta.is-up { color: var(--tu-ok-ink); }
.tu-fit-delta.is-down { color: var(--tu-warn-ink); }

.tu-fit-clear {
  border: 0;
  background: none;
  color: var(--tu-faint);
  font-size: 20px;
  line-height: 1;
  padding: var(--tu-space-1) var(--tu-space-2);
  border-radius: var(--tu-radius);
  cursor: pointer;
  visibility: hidden;
}
.tu-fit-row.is-done .tu-fit-clear { visibility: visible; }
.tu-fit-clear:hover { color: var(--tu-danger); background: var(--tu-danger-soft); }

/* ── Mobil ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Rubrikraden beskriver fyra kolumner som inte längre finns. */
  .tu-fit-head { display: none; }

  .tu-fit-row,
  .tu-fit-list--split .tu-fit-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name  clear"
      "in    in"
      "date  date"
      "out   out";
    gap: var(--tu-space-2);
    padding: var(--tu-space-3) var(--tu-space-4);
  }
  .tu-fit-row__name { grid-area: name; padding: 0; font-weight: 500; }
  .tu-fit-row__in   { grid-area: in; }
  .tu-fit-date      { grid-area: date; width: 100%; }
  .tu-fit-row__out  { grid-area: out; }
  .tu-fit-clear     { grid-area: clear; visibility: visible; }

  /* Platshållaren i datumkolumnen behövs inte när raderna är staplade —
     en tom rad mellan fälten och resultatet är bara luft. */
  .tu-fit-nodate { display: none; }

  /* Fälten tar hela bredden — ett 58 px-fält mitt på en rad är svårt att
     träffa, och här finns ingen kolumn att linjera mot. Minut och sekund
     delar bredden lika. */
  .tu-fit-num--s { flex: 1 1 0; width: auto; min-width: 64px; }
  .tu-fit-row__in .tu-fit-num[data-field="distance_m"] { flex: 1 1 auto; }

  /* Yo-Yo-raden har en väljare bredvid sifferfältet. Med lika delning blev
     löpningsfältet så smalt att siffran i det inte syntes — väljaren får
     resten av raden, fältet behåller en bredd som går att läsa och träffa. */
  .tu-fit-row__in:has(.tu-fit-lvl) .tu-fit-num--s { flex: 0 0 78px; width: 78px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDLINJEANALYS I MATCHRAPPORTEN
   Delas av rapportens flik, utskriften och den delade länken, därför här
   och inte i gamereport.css. Markup kommer från gas_render().
   ══════════════════════════════════════════════════════════════════════════ */
.gas { display: grid; gap: var(--tu-space-5); margin-top: var(--tu-space-4); }
.gas-h { font-family: var(--tu-font-display); font-size: var(--tu-text-lg); margin: 0 0 var(--tu-space-2); }

.gas-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--tu-space-3); }
.gas-kpi { background: var(--tu-surface-2); border: 1px solid var(--tu-line); border-radius: var(--tu-radius-lg); padding: var(--tu-space-3); display: grid; gap: 2px; }
.gas-kpi .k { font-family: var(--tu-font-label); font-size: var(--tu-text-2xs); font-weight: 600; letter-spacing: var(--tu-label-track); text-transform: uppercase; color: var(--tu-muted); }
.gas-kpi .v { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gas-kpi .s { font-size: var(--tu-text-sm); color: var(--tu-muted); }

.gas-insights { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tu-space-2); }
.gas-insights li { background: var(--tu-surface); border: 1px solid var(--tu-line); border-left: 4px solid var(--tu-line-strong); border-radius: var(--tu-radius); padding: var(--tu-space-2) var(--tu-space-3); font-size: var(--tu-text); }
.gas-insights li.them { border-left-color: var(--tu-them); }
.gas-insights li.us { border-left-color: var(--tu-us); }

.gas-cols { display: grid; gap: var(--tu-space-4); }
@media (min-width: 760px) { .gas-cols { grid-template-columns: 1fr 1fr; } }
.gas-card { background: var(--tu-surface); border: 1px solid var(--tu-line); border-radius: var(--tu-radius-lg); padding: var(--tu-card-pad); display: grid; gap: var(--tu-space-4); min-width: 0; align-content: start; }
.gas-card.them { border-top: 4px solid var(--tu-them); }
.gas-card.us { border-top: 4px solid var(--tu-us); }

.gas-bars { display: grid; gap: 5px; min-width: 0; }
.gas-bt { font-family: var(--tu-font-label); font-size: var(--tu-text-2xs); font-weight: 600; letter-spacing: var(--tu-label-track); text-transform: uppercase; color: var(--tu-muted); }
.gas-bar { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 78px; gap: var(--tu-space-2); align-items: center; font-size: var(--tu-text-sm); }
.gas-track { height: 12px; background: var(--tu-surface-2); border-radius: var(--tu-radius-sm); overflow: hidden; }
.gas-fill { display: block; height: 100%; border-radius: var(--tu-radius-sm); }
.gas-fill.them { background: var(--tu-them); }
.gas-fill.us { background: var(--tu-us); }
.gas-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tu-muted); }

.gas-tblwrap { overflow-x: auto; }
.gas-tbl { border-collapse: collapse; width: 100%; font-size: var(--tu-text-sm); font-variant-numeric: tabular-nums; }
.gas-tbl th, .gas-tbl td { padding: var(--tu-space-2); text-align: right; border-bottom: 1px solid var(--tu-line); }
.gas-tbl th:first-child, .gas-tbl td:first-child { text-align: left; }
.gas-tbl th { font-family: var(--tu-font-label); font-size: var(--tu-text-2xs); font-weight: 600; letter-spacing: var(--tu-label-track); text-transform: uppercase; color: var(--tu-muted); }
.gas-mut { color: var(--tu-muted); font-size: var(--tu-text-xs); }

.gas-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tu-space-2); }
.gas-notes li { font-size: var(--tu-text-sm); }
.gas-notes b { font-variant-numeric: tabular-nums; margin-right: var(--tu-space-2); }
.gas-link { margin: 0; font-size: var(--tu-text-sm); }

/* Knappen under textrutorna i rapporten */
.gas-insert { display: flex; align-items: center; gap: var(--tu-space-2); flex-wrap: wrap; margin-top: var(--tu-space-2); }

@media print {
  .gas-card, .gas-kpi, .gas-insights li { break-inside: avoid; }
  .gas-cols { grid-template-columns: 1fr 1fr; }
}

/* Koppla en fristående analys till en scoutrapport, direkt i listan */
.ga-scoutpick { display: flex; align-items: center; gap: var(--tu-space-2); flex-wrap: wrap; margin: 0; }
.ga-scoutpick select { max-width: 220px; }

/* Mätpunkter: formulering före match */
.ga-point-edit { background: var(--tu-surface); border: 1px solid var(--tu-line); border-radius: var(--tu-radius-lg); padding: var(--tu-card-pad); margin-bottom: var(--tu-space-3); }
.ga-point-actions { display: flex; gap: var(--tu-space-2); align-items: center; }

/* Mätpunkter: en rad per punkt, bara rubriken */
.ga-point-row { display: flex; align-items: center; gap: var(--tu-space-2); margin: 0 0 var(--tu-space-2); max-width: 760px; }
.ga-point-row input[type="text"] { flex: 1; min-width: 0; }
.ga-point-no { width: 24px; flex: none; text-align: center; color: var(--tu-muted); font-variant-numeric: tabular-nums; }
.ga-point-new { margin-top: var(--tu-space-4); }

/* ══════════════════════════════════════════════════════════════════════════
   FORM OCH VARIATION
   --------------------------------------------------------------------------
   Fem zoner, inte fyra som på belastningssidan, och de går inte från bra
   till dåligt utan från tungt till avtränat med balansen i mitten. Därför
   egna namn och egen skala istället för .tu-acwr-*: grönt i mitten, rött
   och grått i var sin ände.
   ══════════════════════════════════════════════════════════════════════════ */

.tu-form-hard    { color: var(--tu-zone-hard-ink); }
.tu-form-build   { color: var(--tu-zone-build-ink); }
.tu-form-neutral { color: var(--tu-zone-neutral-ink); }
.tu-form-fresh   { color: var(--tu-zone-fresh-ink); }
.tu-form-stale   { color: var(--tu-zone-stale-ink); }

/* Formstapeln går från −60 till +40 procent. Nollan ligger på 60 % av
   spåret och markeringen sitter på samma ställe, så det går att se vilken
   sida av balansen en spelare hamnat på utan att läsa talet. */
.tu-form-bar {
  position: relative;
  height: 6px;
  background: var(--tu-line);
  border-radius: var(--tu-radius-sm);
  overflow: hidden;
  margin-bottom: 4px;
  min-width: 96px;
}
.tu-form-bar::after {
  content: "";
  position: absolute;
  left: 60%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--tu-line-strong);
}
.tu-form-bar span { position: absolute; top: 0; bottom: 0; }
.tu-form-bar span.is-hard    { background: var(--tu-zone-hard); }
.tu-form-bar span.is-build   { background: var(--tu-zone-build); }
.tu-form-bar span.is-neutral { background: var(--tu-zone-neutral); }
.tu-form-bar span.is-fresh   { background: var(--tu-zone-fresh); }
.tu-form-bar span.is-stale   { background: var(--tu-zone-stale); }

.tu-form-v { font-variant-numeric: tabular-nums; margin-right: 6px; }
.tu-form-l { font-size: var(--tu-text-xs); color: var(--tu-faint); }

.tu-dot.is-hard    { background: var(--tu-zone-hard); }
.tu-dot.is-build   { background: var(--tu-zone-build); }
.tu-dot.is-neutral { background: var(--tu-zone-neutral); }
.tu-dot.is-fresh   { background: var(--tu-zone-fresh); }
.tu-dot.is-stale   { background: var(--tu-zone-stale); }

/* ── Diagrammet ─────────────────────────────────────────────────────────── */

/* preserveAspectRatio="none" i markupen: figuren ska följa spaltens bredd
   och behålla sin höjd, inte krympa på höjden när fönstret smalnar. Allt
   som inte får sträckas med — text och linjetjocklek — hålls fast här. */
.tu-pmc {
  display: block;
  width: 100%;
  height: 260px;
  overflow: visible;
}
.tu-pmc--form { height: 210px; }

.tu-pmc__grid  { stroke: var(--tu-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tu-pmc__grid.is-zero { stroke: var(--tu-line-strong); }
.tu-pmc__month { stroke: var(--tu-line); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }

.tu-pmc__bar { fill: var(--tu-line-strong); opacity: .75; }

.tu-pmc__line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Fitness går hel och lite grövre, fatigue streckad. Kulören räcker för den
   som ser den, men streckningen bär figuren vidare i utskrift, i tvingade
   färglägen och för den som inte skiljer kulörerna åt. */
.tu-pmc__line.is-fit { stroke: var(--tu-chart-fit); stroke-width: 2.25; }
.tu-pmc__line.is-fat { stroke: var(--tu-chart-fat); stroke-dasharray: 7 4; }

/* Etiketterna vid linjernas slut med sin hårfina ledare. */
.tu-pmc__lead { stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }
.tu-pmc__lead.is-fit { stroke: var(--tu-chart-fit); }
.tu-pmc__lead.is-fat { stroke: var(--tu-chart-fat); }

.tu-pmc__tag {
  font-family: var(--tu-font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.tu-pmc__tag.is-fit { fill: var(--tu-chart-fit); }
.tu-pmc__tag.is-fat { fill: var(--tu-chart-fat); }

/* Formremsans zoner: ett tonat band bakom staplarna och namnet i
   marginalen. Bandet är det som säger vad som är bra — det får därför
   synas, men inte så mycket att staplarna tappar sin kant. */
.tu-pmc__band { opacity: .10; }
/* Det gröna fältet är det figuren pekar mot och får synas mest; grått är
   bara "här är inget kvar att återhämta sig från" och ska inte tynga. */
.tu-pmc__band.is-neutral { opacity: .15; }
.tu-pmc__band.is-fresh   { opacity: .12; }
.tu-pmc__band.is-stale   { opacity: .07; }
.tu-pmc__band.is-hard    { fill: var(--tu-zone-hard); }
.tu-pmc__band.is-build   { fill: var(--tu-zone-build); }
.tu-pmc__band.is-neutral { fill: var(--tu-zone-neutral); }
.tu-pmc__band.is-fresh   { fill: var(--tu-zone-fresh); }
.tu-pmc__band.is-stale   { fill: var(--tu-zone-stale); }

.tu-pmc__chip.is-hard    { fill: var(--tu-zone-hard); }
.tu-pmc__chip.is-build   { fill: var(--tu-zone-build); }
.tu-pmc__chip.is-neutral { fill: var(--tu-zone-neutral); }
.tu-pmc__chip.is-fresh   { fill: var(--tu-zone-fresh); }
.tu-pmc__chip.is-stale   { fill: var(--tu-zone-stale); }

.tu-pmc__zlab {
  font-family: var(--tu-font-label);
  font-size: 10px;
  fill: var(--tu-muted);
}

/* Högermarginalens etiketter ligger i viewBoxen, och med
   preserveAspectRatio="none" trycks de ihop på bredden när spalten smalnar.
   Under en dryg spaltbredd blir de oläsbara, och då är det bättre att låta
   legenden under figuren bära namnen ensam än att visa hoptryckt text. */
@media (max-width: 720px) {
  .tu-pmc__tag,
  .tu-pmc__lead,
  .tu-pmc__zlab,
  .tu-pmc__chip { display: none; }
}

.tu-pmc__form.is-hard    { fill: var(--tu-zone-hard); }
.tu-pmc__form.is-build   { fill: var(--tu-zone-build); }
.tu-pmc__form.is-neutral { fill: var(--tu-zone-neutral); }
.tu-pmc__form.is-fresh   { fill: var(--tu-zone-fresh); }
.tu-pmc__form.is-stale   { fill: var(--tu-zone-stale); }

/* Texten i figuren skalas inte med viewBox — därför px och inte em. */
.tu-pmc__ytick, .tu-pmc__xtick {
  font-family: var(--tu-font-label);
  font-size: 10px;
  fill: var(--tu-faint);
}

.tu-chartbox {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-space-4) var(--tu-space-3) var(--tu-space-2);
  margin-bottom: var(--tu-space-4);
}
.tu-chartkey {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-2) var(--tu-space-4);
  align-items: center;
  font-size: var(--tu-text-xs);
  color: var(--tu-muted);
  padding: 0 var(--tu-space-2) var(--tu-space-2);
}
.tu-chartkey span { display: inline-flex; align-items: center; }
.tu-chartkey i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; margin-right: 6px; flex: none; }
.tu-chartkey i.is-fit { background: var(--tu-chart-fit); }
/* Samma streckning som i figuren, så legenden och kurvan är samma sak. */
.tu-chartkey i.is-fat {
  background: repeating-linear-gradient(to right,
    var(--tu-chart-fat) 0 5px, transparent 5px 8px);
  border-radius: 0;
}
.tu-chartkey i.is-bar { background: var(--tu-line-strong); height: 9px; width: 4px; }

/* Zonnyckeln under formremsan. En rad per zon, i samma ordning som de ligger
   i figuren, så listan går att läsa uppifrån och ned mot remsan. */
.tu-chartkey--zones { gap: var(--tu-space-1) var(--tu-space-3); }
/* Punkten måste vinna över .tu-chartkey i, som ritar linjeprovet ovanför:
   zonerna är ytor i figuren, inte linjer, och ska inte se ut som serier. */
.tu-chartkey--zones i.tu-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  flex: none;
}
.tu-chartkey--zones b { font-weight: 600; color: var(--tu-ink); margin-right: 4px; }

/* Meningen mellan de två figurerna. Den säger vad remsan under är och hur
   den ska läsas — hör till figuren, inte till brödtexten, så den sitter
   inne i chartboxen och inte som en tu-note efter den. */
.tu-chartlead {
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
  line-height: 1.5;
  max-width: 76ch;
  padding: var(--tu-space-2) var(--tu-space-2) var(--tu-space-3);
  border-top: 1px solid var(--tu-line);
  margin-top: var(--tu-space-1);
}

/* ── Räkningen, utfälld ─────────────────────────────────────────────────── */

/* Hur fitness och fatigue räknas fram. Utfällbar och inte alltid synlig: den
   som läser sidan varje måndag behöver den en gång, och en halv skärm text
   mellan figuren och veckotabellen skjuter undan det sidan handlar om.
   <details> och inte en egen knapp — webbläsaren kan det här, och den
   utfällda texten går då att söka i och skriva ut. */
.tu-explain {
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-lg);
  background: var(--tu-surface);
  margin-bottom: var(--tu-space-4);
}
.tu-explain > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--tu-space-3) var(--tu-space-4);
  font-size: var(--tu-text-sm);
  font-weight: 600;
  color: var(--tu-ink);
  display: flex;
  align-items: center;
  gap: var(--tu-space-2);
  border-radius: var(--tu-radius-lg);
}
.tu-explain > summary::-webkit-details-marker { display: none; }

/* Egen pil, så den pekar åt samma håll i alla webbläsare. */
.tu-explain > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 1.5px solid var(--tu-muted);
  border-bottom: 1.5px solid var(--tu-muted);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.tu-explain[open] > summary::before { transform: rotate(45deg); }
.tu-explain > summary:hover { background: var(--tu-surface-2); }
.tu-explain > summary:focus-visible { outline: 2px solid var(--tu-accent); outline-offset: -2px; }

.tu-explain__body {
  padding: 0 var(--tu-space-4) var(--tu-space-4);
  border-top: 1px solid var(--tu-line);
  margin-top: 0;
  font-size: var(--tu-text-sm);
  color: var(--tu-muted);
  line-height: 1.6;
  max-width: 82ch;
}
.tu-explain__body > p:first-child { margin-top: var(--tu-space-3); }
.tu-explain__body p { margin: 0 0 var(--tu-space-3); }
.tu-explain__body strong { color: var(--tu-ink); font-weight: 600; }
.tu-explain__body ul { margin: 0 0 var(--tu-space-3); padding-left: var(--tu-space-4); }
.tu-explain__body li { margin-bottom: var(--tu-space-2); }
.tu-explain__last { margin-bottom: 0 !important; }

/* Formlerna. Monospace oavsett tema — en formel som inte linjerar är en
   bild av en formel. --tu-font-label duger inte, den är proportionell i
   hälften av temana. */
.tu-explain__calc {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--tu-text-xs);
  color: var(--tu-ink);
  background: var(--tu-surface-2);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-sm);
  padding: var(--tu-space-2) var(--tu-space-3);
  line-height: 1.9;
  overflow-x: auto;
}
.tu-explain__calc sub { font-size: .82em; color: var(--tu-faint); }
/* Kommentaren efter uttrycket: tillägg, inte en del av formeln. */
.tu-explain__calc span {
  font-family: var(--tu-font-body);
  font-size: var(--tu-text-xs);
  color: var(--tu-faint);
}

/* ── Veckomatrisen ──────────────────────────────────────────────────────── */

/* En smal kolumn per vecka. Monotony står stort, strain under — samma cell
   bär båda, för det är tillsammans de säger något. */
.tu-wk { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tu-wk__m { display: block; }
.tu-wk__s { display: block; font-size: var(--tu-text-xs); color: var(--tu-faint); }
.tu-wk--now { background: var(--tu-surface-2); }

/* Monotony delar zonernas färger: varierad är det eftersträvade läget och
   monoton är det som ska uppmärksammas, så grönt och rött pekar åt samma
   håll som i formremsan. Tidigare satt "monoton" i accenten, som i ett blått
   tema läste som en knapp och inte som en varning. */
.tu-mono-ok    { color: var(--tu-zone-neutral-ink); }
.tu-mono-build { color: var(--tu-zone-build-ink); }
.tu-mono-hard  { color: var(--tu-zone-hard-ink); }
.tu-mono-none  { color: var(--tu-faint); }

.tu-th-wk { text-align: right; }

/* Varningen när RPE saknas på för många pass. Egen ruta och inte en
   tu-note: den ska läsas före tabellen, för utan täckning betyder talen i
   tabellen inte vad de ser ut att betyda. */
.tu-datawarn {
  background: var(--tu-warn-soft);
  border: 1px solid var(--tu-warn);
  border-radius: var(--tu-radius-lg);
  padding: var(--tu-space-3) var(--tu-space-4);
  margin-bottom: var(--tu-space-4);
  font-size: var(--tu-text-sm);
  color: var(--tu-warn-ink);
  line-height: 1.55;
}
.tu-datawarn strong { display: block; margin-bottom: 2px; color: var(--tu-warn-ink); }
.tu-datawarn a { color: var(--tu-warn-ink); text-decoration: underline; }

/* Täckningen i tabellen: loggat av närvarande, inte en form att färga om. */
.tu-cov { font-variant-numeric: tabular-nums; }
.tu-cov--low { color: var(--tu-warn-ink); }

/* ── Ansökningar i /admin ────────────────────────────────────────────────
   Fritexten från registreringsformuläret. Radbrytningarna tränaren skrev
   ska synas (pre-wrap), men texten får inte dra ut tabellen — därför en
   fast maxbredd och radbrytning i långa ord, för den som klistrar in en
   adress utan blanksteg. */
.tu-reg__about {
  max-width: 520px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--tu-text-sm);
  line-height: 1.55;
  color: var(--tu-muted);
}

/* Raden i formuläret som visar att kontot kommer ur en ansökan. Accentens
   svaga ton: den säger "det här händer också", inte "något är fel". */
.tu-reg__from {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tu-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--tu-space-4);
  padding: var(--tu-space-3) var(--tu-space-4);
  background: var(--tu-accent-soft);
  border-radius: var(--tu-radius);
  font-size: var(--tu-text-sm);
  color: var(--tu-accent-ink);
}
.tu-reg__from strong { color: var(--tu-accent-ink); }