:root {
  --bg:           #0d1117;
  --bg-glass:     rgba(13, 17, 23, 0.78);
  --sidebar:      #161b22;
  --card:         #1c2333;
  --card-glass:   rgba(28, 35, 51, 0.78);
  --border:       #30363d;
  --accent:       #f0a500;
  --accent2:      #3fb950;
  --text:         #e6edf3;
  --muted:        #8b949e;
  --label:        #8b949e;
  --danger:       #f85149;
  --success:      var(--accent2);
  --info:         #58a6ff;   /* länkat, synkat, information */
  --pb:           #b57aff;   /* personbästa */
  /* Orange och grön som TEXT. Samma som --accent/--accent2 i mörkt tema, mörkare i ljust så att
     texten går att läsa mot vitt. --accent/--accent2 är kvar för bakgrunder, kanter och ikoner. */
  --accent-text:  var(--accent);
  --accent2-text: var(--accent2);
  --input-bg:     #0d1117;
  --card-hover:   #212d3d;
  --comment-text: #b1bac4;
  --sidebar-w:    220px;
  /* Native Android already reserves the status bar; iOS/web use CSS safe areas. */
  --ct-safe-top: env(safe-area-inset-top, 0px);
  --topbar-row-height: 52px;
  --topbar-height: calc(var(--topbar-row-height) + var(--ct-safe-top));
  /* One glass material for the bottom bar and joined page navigation. */
  --nav-glass-bg: linear-gradient(160deg,rgba(190,213,245,.08),rgba(100,137,186,.03) 45%,rgba(150,183,224,.04)),rgba(29,37,53,.20);
  --nav-glass-border: rgba(210,223,240,.14);
  --nav-glass-shadow: inset 0 1px 1px #ffffff26,inset 0 -1px 1px #ffffff0a,0 5px 20px #0003;
  --nav-glass-filter: blur(8px) saturate(160%);
  --nav-glass-solid: #1d2535;
  --nav-glass-fallback: rgba(29,37,53,.94);
}

[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656d76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="light"] {
  --bg:           #f6f8fa;
  --bg-glass:     rgba(246, 248, 250, 0.78);
  --sidebar:      #ffffff;
  --card:         #ffffff;
  --card-glass:   rgba(255, 255, 255, 0.78);
  --border:       #d0d7de;
  --text:         #1f2328;
  --muted:        #656d76;
  --label:        #57606a;
  --danger:       #cf222e;
  --info:         #0969da;
  --pb:           #8250df;
  --accent-text:  #9a6700;
  --accent2-text: #1a7f37;
  --input-bg:     #ffffff;
  --card-hover:   #eaf1f8;
  --comment-text: #444d56;
  --nav-glass-bg: linear-gradient(160deg,rgba(255,255,255,.30),rgba(190,213,245,.08) 45%,rgba(255,255,255,.16)),rgba(246,248,250,.65);
  --nav-glass-border: var(--border);
  --nav-glass-shadow: inset 0 1px 1px #ffffff80,0 5px 20px #0001;
  --nav-glass-solid: var(--card);
  --nav-glass-fallback: var(--card);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  /* overflow-x (inte overflow-x: hidden): 'hidden' tvingar webbläsaren att
     räkna om den motsatta axelns 'visible' till 'auto' per CSS-specen, vilket
     gör elementet till en oavsiktlig scroll-container och därmed förstör
     .page-headers sticky-positionering (se dess kommentar). 'clip' klipper
     likadant utan den bieffekten. */
  overflow-x: clip;
  touch-action: manipulation;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.2s, color 0.2s;
}

/* ── Layout ── */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--pv); left: 0;
  height: calc(100vh - var(--pv));
  z-index: 100;
  transition: width 0.25s ease, background 0.2s, border-color 0.2s;
  /* Bredden animeras (dold i sidled), men menyn ska gå att scrolla när t.ex. Visa som är utfälld */
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}

/* min-width:0 åsidosätter flex-items defaultvärde min-width:auto, som annars hindrar
   .main från att krympa under bredden av sitt bredaste barn (t.ex. en lång rad
   knappar) — utan den växer .main sig bredare än .app och trycker innehåll,
   inklusive sidhuvudets knappar, utanför den synliga skärmen på mobil. */
.main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; min-height: 100vh; transition: margin-left 0.25s ease; padding-top: var(--pv); }

/* ── Sidebar ── */
.sidebar-logo {
  padding: 1.4rem 1.25rem 1.1rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent-text);
  letter-spacing: 2px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo span { color: var(--text); opacity: 0.7; }

.sidebar-team-picker {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-team-picker select {
  width: 100%;
  padding: 0.38rem 0.6rem;
  font-size: 0.82rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}

.sidebar-nav {
  flex: 1;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.9rem;
  border-radius: 7px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.15s;
}
.sidebar-nav a .icon { width: 18px; text-align: center; }
.sidebar-nav a:hover { background: rgba(128,128,128,0.08); color: var(--text); }
.sidebar-nav a.active {
  background: rgba(240,165,0,0.1);
  color: var(--accent-text);
  font-weight: 600;
}

.sidebar-footer {
  padding: 1rem 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-user {
  font-size: 0.79rem;
  color: var(--muted);
  padding: 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kontokortet ersätter bara namnraden; menyn och knappraden behåller sitt utseende. */
.sidebar-user.sidebar-user-account {
  padding: 0;
  overflow: visible;
  white-space: normal;
}
.sidebar-account {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 60px;
  padding: .65rem .7rem;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--sidebar);
  color: var(--text);
  text-decoration: none;
}
.sidebar-account:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--sidebar));
}
.sidebar-account:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.sidebar-account-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, var(--sidebar));
  color: var(--accent-text);
}
.sidebar-account-copy { flex: 1; min-width: 0; }
.sidebar-account-name {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sidebar-account-label {
  display: block;
  margin-top: .12rem;
  font-size: .72rem;
  color: var(--accent-text);
}
.sidebar-account-arrow {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--accent-text);
}

/* ── Page header ── */
.page-header {
  padding: 0.9rem 2rem 0.6rem;
  /* Padding nedtill + marginal = samma luft (1rem) som mellan korten */
  margin-bottom: 0.4rem;
  position: sticky;
  top: var(--pv);
  z-index: 40;
  background: var(--bg-glass);
}
.page-header h1 { font-size: 1.2rem; font-weight: 700; }

/* ── Container ── */
.container { padding: 0 2rem 3rem; max-width: 960px; }
/* .page-tabs-standalone = .page-tabs som ligger direkt som syskon till .main:s
   övriga innehåll (t.ex. Förare, där flikraden ligger ovanför sidhuvudet) i
   stället för nästlad i .container. Samma horisontella padding/bredd som
   .container — men får INTE ligga i en egen litet-hög wrapper-div, för då får
   den sticky elementet ingen "rörelsemarginal" inom sin närmaste förälder och
   sticky-positioneringen slutar fungera (kräver en förälder som är högre än
   elementet självt). Lägg därför padding direkt på flik-elementet i stället. */
.page-tabs-standalone { padding: 0 2rem; max-width: 960px; box-sizing: border-box; }

/* ── Cards ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  transition: background 0.2s, border-color 0.2s;
}

.card-title {
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--label);
  margin-bottom: 1rem;
}

/* ── Track grid ── */
.tracks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 0.85rem;
}

.track-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background 0.15s, transform 0.15s;
}
.track-card:hover { background: var(--card-hover); transform: translateY(-2px); }
.track-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.35rem; }
.track-card .track-meta { font-size: 0.8rem; color: var(--muted); }

/* ── Table ── */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--label);
}

td {
  padding: 0.72rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }

.pos-1 { color: #f59e0b; font-weight: 700; }
.pos-2 { color: #9ca3af; font-weight: 700; }
.pos-3 { color: #c07832; font-weight: 700; }

/* ── Forms ── */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.79rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--label); }

select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input:not([type]),
textarea {
  width: 100%;
  padding: 0.58rem 0.85rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
  font-size: 16px;
  color-scheme: dark;
}
input[readonly] { cursor: pointer; }
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"] { color-scheme: light; }
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2rem;
}
select:focus, input:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 0.5rem 1.15rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 600;
  transition: opacity 0.2s;
  line-height: 1.4;
  white-space: nowrap;
}
.btn:hover { opacity: 0.82; }
.btn-primary { background: var(--accent); color: #0d1117; }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-ghost   { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: rgba(128,128,128,0.1); opacity: 1; }
.btn-sm { padding: 0.28rem 0.7rem; font-size: 0.79rem; }
/* Secondary share action: one shape, icon size and accent across cards and sheets. */
.btn-share { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; flex-shrink: 0; min-height: 1.875rem; border-radius: 8px; padding: .25rem .6rem; font-size: .78rem; }
.btn-share, .btn-share:hover { color: var(--accent-text); background: transparent; }
.btn-share:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Sidhuvudets knappar och väljare (Tillbaka, banväljare, förarväljare, + Nytt pass …) lika höga */
.page-header select,
.page-header .btn,
.page-header .sort-btn,
.page-header #dashConfigBtn {
  height: 1.875rem;
  box-sizing: border-box;
}
.page-header .btn,
.page-header .sort-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.page-header select { padding-top: 0; padding-bottom: 0; line-height: normal; }
/* Ogenomskinlig bakgrund (inte transparent) — .sort-btn används bara i sticky
   sidhuvuden (Bantider, Bana) där innehåll scrollar bakom knappen. */
.sort-btn { background: var(--bg); border: 1px solid var(--accent); color: var(--accent-text); }
.sort-btn.active { background: var(--accent); color: #0d1117; }

/* ── Alerts ── */
.alert { padding: 0.62rem 1rem; border-radius: 6px; font-size: 0.85rem; }
.alert-error   { background: rgba(248,81,73,0.12); color: #ff7b72; border: 1px solid rgba(248,81,73,0.25); }
.alert-success { background: rgba(63,185,80,0.12); color: var(--accent2-text); border: 1px solid rgba(63,185,80,0.25); }

/* ── Tabs ── */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
/* .page-tabs = de översta huvudflikarna på en sida (till skillnad från nästlade
   underflikar, t.ex. status/inställningar inuti ett hoj-kort på Förare-sidan) —
   håller dem synliga under topbaren/sidhuvudet vid skrollning, precis som
   .page-header. Sidor med ett eget sidhuvud ovanför flikarna (Connect, Förare)
   justerar `top` med JS för att stapla dem rätt under headern i stället för att
   skriva över den. */
.page-tabs { position: sticky; top: var(--pv); z-index: 35; background: var(--bg); }
/* Höger-kant-tona som hint om att flikraden går att skrolla i sidled (visas
   bara när JS har konstaterat att .tabs faktiskt svämmar över — se
   updateTabScrollHints() i api.js). Kräver att .page-tabs är den positionerade
   föräldern (redan sticky) och att .tabs ligger som ett direkt barn i den. */
.page-tabs.tabs-overflowing::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2rem;
  background: linear-gradient(to right, transparent, var(--bg-glass) 70%);
  pointer-events: none;
}
.tab-btn {
  background: none; border: none;
  padding: 0.62rem 1.1rem;
  cursor: pointer;
  font-size: 0.87rem; font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}
.tab-btn.active { color: var(--accent-text); border-bottom-color: var(--accent); }
.tab-btn:hover:not(.active) { color: var(--text); }

/* ── Points badge ── */
.points-badge {
  display: inline-block;
  background: rgba(240,165,0,0.1);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.84rem;
  padding: 0.18rem 0.65rem;
  border-radius: 20px;
  min-width: 42px;
  text-align: center;
  border: 1px solid rgba(240,165,0,0.25);
}

/* ── Comments ── */
.comment { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: none; }
.comment-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.comment-author { font-weight: 600; font-size: 0.83rem; }
.comment-date   { font-size: 0.74rem; color: var(--muted); }
.comment-text   { font-size: 0.87rem; color: var(--comment-text); }

/* ── Row items (admin lists) ── */
.row-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.58rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.row-item:last-child { border-bottom: none; }

/* ── Back link ── */
.back-link { font-size: 0.81rem; color: var(--muted); text-decoration: none; display: inline-block; margin-bottom: 0.75rem; }
.back-link:hover { color: var(--text); }

.hidden { display: none !important; }

/* ── Standings sticky table ── */
.standings-outer {
  position: relative;
  margin: 0 -1.5rem -1.25rem;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.standings-outer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--sticky-offset, 0px);
  height: 14px;
  background: var(--card);
  z-index: 10;
  pointer-events: none;
}
.standings-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}
.standings-wrap::-webkit-scrollbar { height: 6px; }
.standings-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.standings-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 3px;
}
.standings-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
}
.sc-l {
  position: sticky;
  z-index: 1;
  background: var(--card);
  transition: background 0.2s;
}
.standings-wrap table th:nth-child(1),
.standings-wrap table td:nth-child(1) { left: 0;    min-width: 28px; }
.standings-wrap table th:nth-child(2),
.standings-wrap table td:nth-child(2) { left: 28px; min-width: 52px; }
.standings-wrap table th:nth-child(3),
.standings-wrap table td:nth-child(3) { left: 80px; min-width: 44px; }
.standings-wrap table th:nth-child(4),
.standings-wrap table td:nth-child(4) { left: 124px; }
thead .sc-l { z-index: 3; }
.standings-wrap th,
.standings-wrap td { text-align: center; }
.sc-l-last::after {
  content: '';
  position: absolute;
  top: 0; right: -5px; bottom: 0;
  width: 5px;
  background: linear-gradient(to right, rgba(0,0,0,.2), transparent);
  pointer-events: none;
}

/* ── Fokusläge i poängtabellen ── */
.standings-wrap th.sf-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.standings-wrap .sf-dim,
.standings-wrap .sf-dim-track a { opacity: .3; }
.standings-wrap th, .standings-wrap td, .standings-wrap .sc-l a { transition: opacity .2s, background .2s; }
.standings-wrap .sf-focus   { background: rgba(240,165,0,.10); box-shadow: inset 1px 0 rgba(240,165,0,.45), inset -1px 0 rgba(240,165,0,.45); }
.standings-wrap .sf-compare { background: rgba(88,166,255,.10); box-shadow: inset 1px 0 rgba(88,166,255,.45), inset -1px 0 rgba(88,166,255,.45); }
.sf-diff { display: inline-block; margin-left: .2rem; font-size: .68rem; font-weight: 600; color: var(--muted); }
.sf-diff-pos { color: var(--accent2-text); }
.sf-diff-neg { color: var(--danger); }

/* ── Driver link ── */
.driver-link {
  cursor: pointer;
  color: inherit;
  border-bottom: 1px dashed var(--muted);
}
.driver-link:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* ── Topbar ── */
.topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  z-index: 200;
  align-items: center;
  padding:var(--ct-safe-top) max(1rem,env(safe-area-inset-right,0px)) 0 max(1rem,env(safe-area-inset-left,0px));
  gap: 0.75rem;
}
.topbar-logo {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-logo span { color: var(--text); opacity: 0.7; }

.topbar-bell {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 1.25rem;
  padding: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.8;
}
.topbar-bell:hover { opacity: 1; }
.topbar-bell-badge {
  position: absolute;
  top: 0; right: 0;
  background: var(--danger);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0.5rem;
  width: min(340px, calc(100vw - 1.5rem));
  max-height: min(420px, calc(100vh - 80px));
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 250;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.9rem;
}
.notif-markall {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
}
.notif-list {
  overflow-y: auto;
  flex: 1;
}
.notif-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.notif-item {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.unread .notif-item-title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
}
.notif-item-title {
  font-size: 0.85rem;
  font-weight: 600;
}
.notif-item-body {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}
.notif-item-time {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 4px;
}
/* Grupperade aviseringar: "Du" och ett avsnitt per team (notifGroupsHtml i api.js) */
.notif-group-head {
  display: flex; align-items: baseline; gap: .5rem; margin: 0;
  padding: .8rem .2rem .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--label);
}
.notif-group:first-child .notif-group-head { padding-top: .2rem; }
.notif-group-head.team span { color: var(--accent-text); }
.notif-group-head::after { content: ''; flex: 1; height: 1px; background: var(--border); align-self: center; }
.notif-item.notif-record { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.notif-hl { color: var(--accent-text); font-weight: 700; }
.notif-times { color: var(--muted); font-size: .8em; font-weight: 600; }
.notif-more { display: block; margin: .5rem auto 0; padding: .4rem .8rem; min-height: 36px; border: none; background: none; color: var(--accent-text); font: inherit; font-size: .85rem; cursor: pointer; }
.notif-group-head small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.notif-item-title.notif-item-line { font-weight: 400; }
.notif-item-line b { font-weight: 700; }
.notif-viewall {
  display: block;
  text-align: center;
  padding: 0.6rem;
  font-size: 0.8rem;
  color: var(--accent-text);
  text-decoration: none;
  border-top: 1px solid var(--border);
}
.notif-viewall:hover { text-decoration: underline; }

.topbar-year-select {
  flex-shrink: 0;
  width: 90px;
  background-color: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 3px 1.7rem 3px 6px;
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* ── Sidebar overlay (mobil) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}
.sidebar-overlay.open { display: block; }

.track-abbr { display: none; }

/* 44px touch targets plus the bottom border; no extra vertical padding. */
@media (max-width: 1200px) {
  :root { --topbar-row-height:45px; }
}

/* ── Mobile ── */
@media (max-width: 680px) {
  .topbar { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    top: calc(var(--topbar-height) + var(--pv));
    height: calc(100vh - var(--topbar-height) - var(--pv));
  }
  .sidebar-logo { display: none; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; padding-top: calc(var(--topbar-height) + var(--pv)); }
  .container { padding: 0 0.75rem 2rem; }
  .page-tabs-standalone { padding: 0 0.75rem; }
  .page-header { padding: 0.5rem 0.75rem 0.4rem; margin-bottom: 0.6rem; top: calc(var(--topbar-height) + var(--pv)); }
  .page-header h1 { font-size: 1.05rem; }
  .page-tabs { top: calc(var(--topbar-height) + var(--pv)); }
  .tracks-grid { grid-template-columns: 1fr; }
  table { font-size: 0.8rem; }
  td, th { padding: 0.55rem 0.4rem; }
  .track-full { display: none; }
  .track-abbr { display: inline; }
  /* Förhindra iOS-autozoom vid fokus på inputs */
  select, input, textarea { font-size: 1rem; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 0.9rem 0.95rem; font-size: 0.82rem; white-space: nowrap; }
}

/* ── Surfplatta: sidebar som overlay (681–1200px) ── */
@media (min-width: 681px) and (max-width: 1200px) {
  .topbar { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w) !important;
    transition: transform 0.25s ease, background 0.2s, border-color 0.2s;
    top: calc(var(--topbar-height) + var(--pv));
    height: calc(100vh - var(--topbar-height) - var(--pv));
  }
  .sidebar-logo { display: none; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0 !important; padding-top: calc(var(--topbar-height) + var(--pv)); }
  .page-header { top: calc(var(--topbar-height) + var(--pv)); }
  .page-tabs { top: calc(var(--topbar-height) + var(--pv)); }
}

/* På datorn behövs samma notiser, hjälp och årsväljare som i den smala vyn.
   Topbaren ligger bredvid den fasta sidomenyn, under eventuell Visa som-list.
   Innehåll och sticky sidhuvud/flikar lämnar plats för hela topbaren. */
@media (min-width: 1201px) {
  .topbar {
    display: flex;
    left: var(--sidebar-w);
    top:0;
    height:calc(var(--topbar-height) + var(--pv));
    padding-top:calc(var(--ct-safe-top) + var(--pv));
    padding-left:max(2rem,env(safe-area-inset-left,0px));
    padding-right:max(2rem,env(safe-area-inset-right,0px));
  }
  .sidebar { top:0; height:100dvh; padding-top:calc(var(--ct-safe-top) + var(--pv)); }
  .pv-strip { top:var(--ct-safe-top); }
  .topbar .hamburger { display: none; }
  .main { padding-top: calc(var(--topbar-height) + var(--pv)); }
  .page-header, .page-tabs { top: calc(var(--topbar-height) + var(--pv)); }
  .sidebar-overlay.open { display: none; }
  body.public-help .topbar { left: 0; }
}

/* Leaflet: glipor mellan kartbitarna (syns som tunna ljusa linjer i Safari/WebView) får mörk
   bakgrund i stället för Leaflets ljusgrå — då smälter de in i satellitbilden. */
html .leaflet-container { background: #1b1f24; }
/* Rutorna överlappar 1 px (gapFreeTileLayer) — Leaflets plus-lighter skulle göra överlappet till ljusa streck */
html .leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
.opp-reasons::-webkit-scrollbar { display: none; }

/* ── Träningspass: dagväljare (bottenark på mobil, sidopanel på bred skärm) ── */
.ts-nav { display:grid; grid-template-columns:44px minmax(0, 1fr) 44px; align-items:center; gap:8px; margin-bottom:.6rem; }
.ts-nav.ts-nav-footer { margin:12px 0 0; border-top:1px solid var(--border); padding-top:12px; }
.ts-nav-date { min-width:0; text-align:center; }
.ts-nav-btn { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:44px; height:44px; padding:0; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--accent-text); cursor:pointer; touch-action:manipulation; }
.ts-nav-btn svg { width:18px; height:18px; }
.ts-nav-btn:disabled { cursor:default; }
.ts-nav-btn:disabled svg { color:var(--muted); opacity:.45; }
.ts-nav-btn:not(:disabled):hover { background:var(--card-hover); }
.ts-nav-btn:not(:disabled):active { background:color-mix(in srgb,var(--accent) 16%,var(--card)); }
.ts-nav-btn:focus-visible, .ts-date:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.ts-date { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-width:0; height:44px; box-sizing:border-box; margin:0; padding:0 8px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); font:inherit; font-size:15px; font-weight:700; line-height:1.2; cursor:pointer; touch-action:manipulation; }
.ts-date:hover { background:var(--card-hover); }
.ts-date:active { background:color-mix(in srgb,var(--accent) 16%,var(--card)); }
.ts-caret { color:var(--muted); display:inline-flex; flex-shrink:0; }
.ts-date-icon { display:inline-flex; width:16px; height:16px; flex-shrink:0; color:var(--accent-text); }
.ts-date .ts-date-label { min-width:0; }
#trainingList { display: none; }
#dpSheet { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.6); display: none; align-items: flex-end; justify-content: center; }
#dpSheet .dp-sheet { background: var(--card); width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; padding: .6rem 1rem calc(1rem + env(safe-area-inset-bottom)); animation: dpUp .22s ease-out; }
#dpSheetBody { display: flex; flex-direction: column; min-height: 0; flex: 1; }
@keyframes dpUp { from { transform: translateY(100%); } to { transform: none; } }
.dp-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto .8rem; }
.dp-close { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--bg); color: var(--muted); cursor: pointer; }
.dp-title { font-size: 1.1rem; font-weight: 800; margin-bottom: .7rem; }
.dp-bar { flex-shrink: 0; display: flex; gap: .45rem; align-items: stretch; }
.dp-bar .seg { flex: 1; min-width: 0; flex-shrink: 0; }
.dp-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; flex: 1; }
.dp-month { display: flex; justify-content: space-between; gap: .5rem; font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: .8rem .15rem .35rem; }
/* Dagväljaren i ett openTeamSheet-fönster (Mekaniker, Team): Lista/Kalender och banfilter överst */
#teamDialog:has(.days-sheet) { align-items:flex-end; }
#teamDialog .cm-sheet.days-sheet { width:min(560px,100%);max-height:86dvh;height:auto;border-radius:20px 20px 0 0;padding:.6rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
#teamDialog .days-sheet .cm-handle { display:block;margin-bottom:.8rem; }
#teamDialog .days-sheet .cm-head { margin-bottom:.8rem; }
#teamDialog .days-sheet .cm-head h3 { font-size:1.1rem;font-weight:800; }
#teamDialog .days-sheet .cm-close { width:34px;height:34px; }
#teamDialog .days-controls { flex-shrink:0; }
#teamDialog .days-controls .searchable-select { flex:0 1 45%;min-width:0; }
#teamDialog .days-controls .searchable-select input { min-height:36px;font-size:.82rem;font-weight:700;color:var(--accent-text);border-color:var(--accent); }
#teamDialog .days-controls .searchable-select input::placeholder { color:var(--accent-text);opacity:1; }
#teamDialog .days-controls .searchable-select .track-picker-toggle { color:var(--accent-text); }
#teamDialog .days-sheet .team-sheet-body { flex:1;overscroll-behavior:contain; }
.dp-row { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .6rem; align-items: center; padding: .5rem .55rem; border-radius: 10px; cursor: pointer; margin-bottom: .15rem; }
.dp-row:hover { background: var(--bg); }
.dp-row.sel { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dp-date { width: 2.6rem; height: 2.75rem; border-radius: 9px; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.dp-date b { font-size: 1rem; }
.dp-date small { font-size: .62rem; color: var(--muted); text-transform: uppercase; margin-top: .15rem; }
.dp-name { font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-sub { font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.dp-pb { color: var(--pb); font-weight: 800; font-size: .62rem; margin-left: .25rem; }
.dp-delta { font-size: .7rem; margin-top: .1rem; }
.dp-nav { width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text); cursor: pointer; display: inline-grid; place-items: center; }
.dp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; text-align: center; }
.dp-ch { font-size: .65rem; color: var(--muted); padding-bottom: .2rem; }
.dp-cd { height: 2.4rem; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .82rem; color: var(--muted); }
.dp-cd.has { color: var(--text); font-weight: 700; background: var(--bg); cursor: pointer; }
.dp-cd.has i { width: 6px; height: 6px; border-radius: 50%; margin-top: .2rem; }
.dp-cd.sel { box-shadow: inset 0 0 0 1.5px var(--accent); }
@media (min-width: 1150px) {
  #trainingTab:not(.hidden) { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; align-items: start; }
  #trainingList { display: block; grid-column: 1; grid-row: 1; position: sticky; top: 7.5rem; }
  #trainingSummary { grid-column: 2; grid-row: 1; }
  #trainingList .dp-panel { display: flex; flex-direction: column; max-height: calc(100vh - 9rem); margin-bottom: 0; }
  #trainingTab .ts-caret { display: none; }
  #trainingTab .ts-date { cursor: default; pointer-events: none; }
  .ts-empty { display: none; }
}

/* Hjälpsidan utan inloggning: ingen sidomeny, innehållet tar hela bredden */
body.public-help .main { margin-left: 0; }
body.public-help .topbar { display: flex; }
body.public-help .container { margin: 0 auto; }

/* Hjälp: guiderna som en lista med ikon, text och pil */
.help-intro { color: var(--muted); font-size: .88rem; max-width: 680px; margin: 0 0 1rem; line-height: 1.5; }
.help-list { display: flex; flex-direction: column; max-width: 560px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.help-list[hidden] { display: none; }
.help-more { margin-top: 1rem; }
.help-row { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .8rem 1rem; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.help-row:first-child { border-top: 0; }
.help-row:hover { background: var(--card-hover); }
.help-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.help-row > svg:last-child { color: var(--muted); flex-shrink: 0; }
.help-ico { --c: var(--accent); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.help-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.help-txt b { font-size: .95rem; }
.help-txt small { font-size: .8rem; color: var(--muted); line-height: 1.35; }
@media (min-width: 681px) { body.public-help .main { padding-top:calc(var(--topbar-height) + var(--pv)); } }

/* ── Teams → Säsong ─────────────────────────────────────────────────────── */
.ssn-card { margin-bottom: .75rem; }
.ssn-h { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; color: var(--label); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .6rem; }
.ssn-h > span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.ssn-h .btn { padding: .25rem .45rem; }
.ssn-field { padding-bottom: .65rem; border-bottom: 1px solid var(--border); }
.ssn-lbl { font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }
.ssn-dates { display: flex; align-items: center; gap: .4rem; }
.ssn-dates input { flex: 1; min-width: 0; font-size: .85rem; padding: .3rem .4rem; border-radius: 8px; transition: box-shadow .3s; }
.ssn-dates > span { color: var(--muted); }
.ssn-note { font-size: .74rem; color: var(--muted); margin-top: .35rem; line-height: 1.4; }
.ssn-kv { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.ssn-kv:last-of-type { border-bottom: 0; }
.ssn-kv > span { color: var(--muted); }
.ssn-kv-edit { border-bottom: 0; padding-bottom: 0; }
.ssn-kv input, .ssn-sub input { width: 58px; text-align: center; font-weight: 700; font-size: .9rem; padding: .25rem .3rem; border-radius: 8px; transition: box-shadow .3s; }
.ssn-saved { box-shadow: 0 0 0 2px var(--accent2) !important; }
.ssn-pills { margin-top: .6rem; }

.ssn-cat { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .6rem 0; border-top: 1px solid var(--border); cursor: pointer; }
.ssn-cat:first-of-type { border-top: 0; }
.ssn-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ssn-cat .ck { margin-top: .1rem; }
.ssn-cat-txt b { display: block; font-size: .9rem; }
.ssn-cat-txt b em { font-style: normal; font-size: .68rem; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .45rem; margin-left: .25rem; vertical-align: 1px; }
.ssn-cat-txt small, .ssn-toggle small { display: block; font-size: .75rem; color: var(--muted); margin-top: .1rem; line-height: 1.35; }
.ssn-cat.soon { cursor: default; opacity: .55; }
.ssn-sub { display: flex; justify-content: space-between; align-items: center; margin: -.15rem 0 .5rem 2.1rem; padding: .45rem .7rem; background: var(--bg); border-radius: 8px; font-size: .82rem; color: var(--muted); }
.ssn-sub[hidden] { display: none; }

.ssn-toggle { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding-bottom: .65rem; margin-bottom: .65rem; border-bottom: 1px solid var(--border); cursor: pointer; font-size: .88rem; }
.ssn-toggle .sw { margin-top: .05rem; }

.ssn-links { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: .25rem 0 1rem; }
.ssn-link { background: none; border: 0; color: var(--muted); font-size: .85rem; cursor: pointer; padding: .3rem .5rem; }
.ssn-link b { color: var(--accent-text); }

/* ── Grenflikar (Mästerskap + bansidan) ─────────────────────────────────── */
#fullCatTabs { margin: -.35rem 0 .75rem; }
.cat-desc { font-size: .74rem; color: var(--muted); margin: .4rem 0 0; }
.cat-desc[hidden] { display: none; }
.st-crown { font-size: .8em; margin-right: .1rem; }
.tv { user-select: none; -webkit-user-select: none; }
.tv-df.up { color: var(--accent2-text); }
.tv-df.dn { color: #ff7b72; }
.tv-grid { touch-action: pan-y; }
.tv-grid[hidden] { display: none; }
.tv-row { display: flex; align-items: stretch; gap: 2px; margin-bottom: 2px; }
.tv-tn { flex: 0 0 auto; font-size: .78rem; font-weight: 700; display: flex; align-items: center; padding-left: .25rem; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; }
.tv-tn.dim { opacity: .35; }
.tv-tl { color: inherit; text-decoration: none; overflow: hidden; text-overflow: clip; padding: .3rem .1rem .3rem 0; }
.tv-tn-h { font-size: .7rem; color: var(--label); letter-spacing: .06em; text-transform: uppercase; align-items: flex-end; padding-bottom: .3rem; }
.tv-h { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 78px; overflow: hidden; padding-bottom: 4px; border-radius: 6px 6px 0 0; transition: width .22s ease, background .2s; cursor: pointer; }
.tv-h.foc { background: rgba(240,165,0,.09); }
.tv-h.foc.oth { background: rgba(88,166,255,.14); }
.tv-n { font-size: var(--fs, .66rem); font-weight: 700; border-radius: 4px; padding: 1px 3px; background: rgba(128,128,128,.2); color: var(--muted); letter-spacing: .03em; max-width: 100%; }
.tv-h.me .tv-n { color: #ff6b5e; }
.tv-h.lead .tv-n { background: #c0392b; color: #fff; }
.tv-t { font-size: var(--fs, .66rem); font-weight: 800; color: var(--muted); border: 1px solid rgba(128,128,128,.35); background: rgba(128,128,128,.1); border-radius: 999px; padding: 0 2px; min-width: 100%; text-align: center; }
.tv-t.r1 { color: #fff; border-color: #c0392b; background: #c0392b; }
.tv-t.r2 { color: #fff; border-color: #6e7884; background: #6e7884; }
.tv-t.r3 { color: #e0995a; border-color: rgba(205,127,50,.6); background: rgba(205,127,50,.16); }
[data-theme="light"] .tv-t.r3 { color: #8a4f1c; }
.tv-df { font-size: .64rem; font-weight: 800; color: var(--muted); }
.tv-v { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--fs, .6rem); font-weight: 700; color: var(--text); white-space: nowrap; letter-spacing: .02em; }
.tv-c { flex: 0 0 auto; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: var(--text); overflow: hidden; white-space: nowrap; transition: width .22s ease, opacity .2s; cursor: pointer; }
.tv-c.empty { background: rgba(128,128,128,.07); }
.tv-c.p1 { background: #c0392b; color: #fff; font-weight: 800; }
.tv-c.p2 { background: #6e7884; color: #fff; font-weight: 800; }
.tv-c.rest { color: #111; }
.tv-c.p3 { background: #a8652c; color: #fff; font-weight: 800; }
.tv-c.dim { opacity: .28; }
.tv-h.dim { opacity: .45; }
.tv-c.foc.empty { background: rgba(240,165,0,.10); }
.tv-c.foc.oth.empty { background: rgba(88,166,255,.13); }
.tv-c.best { box-shadow: inset 0 0 0 2px #fff; }
[data-theme="light"] .tv-c.best { box-shadow: inset 0 0 0 2px #111; }
.tv-c.king:not(.best) { box-shadow: inset 0 0 0 2px var(--accent); }
.tv-c.up { background: rgba(63,185,80,.22); color: var(--accent2-text); }
.tv-c.dn { background: rgba(229,83,75,.2); color: #ff7b72; }
.tv-c.eq { background: rgba(128,128,128,.15); color: var(--muted); }
[data-theme="light"] .tv-c.up { color: #1a7f37; }
[data-theme="light"] .tv-c.dn { color: #cf222e; }
.tv-pend { opacity: .55; }
.tv-pend-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: .35rem; padding: .5rem .25rem .3rem; }
.tv-pend-btn .pend-arrow { display: inline-block; transition: transform .2s; }
.tv-pend-btn.open .pend-arrow { transform: rotate(90deg); }
.tv-legend { display: flex; gap: .3rem .7rem; flex-wrap: wrap; font-size: .7rem; color: var(--muted); margin-top: .6rem; }
.tv-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: .25rem; }
.tv-legend .tv-tip { flex-basis: 100%; }

/* ── Bansidan: King-fliken ── */
.kt-head { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .6rem .7rem; border-radius: 12px; background: rgba(240,165,0,.08); border: 1px solid rgba(240,165,0,.25); }
.kt-crown { font-size: 1.9rem; line-height: 1; }
.kt-lbl { font-size: .68rem; font-weight: 700; color: var(--label); text-transform: uppercase; letter-spacing: .07em; }
.kt-king { font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-sub { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.kt-streak { text-align: right; }
.kt-streak b { display: block; font-size: 1.5rem; color: var(--accent-text); line-height: 1; }
.kt-streak small { font-size: .66rem; color: var(--muted); }
.kt-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: .8rem; background: var(--border); }
.kt-bar i { display: block; height: 100%; }
.kt-leg { display: flex; justify-content: space-between; font-size: .66rem; color: var(--muted); margin-top: .25rem; }
.kt-chips { margin-top: .55rem; }
.kt-chips b { color: var(--text); }
.kt-row { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .6rem; align-items: center; padding: .5rem .45rem; border-radius: 10px; }
.kt-row.me { background: rgba(245,165,36,.1); }
.kt-pos { width: 22px; height: 22px; border-radius: 50%; color: #111; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 900; }
.kt-name { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-nr { font-size: .68rem; font-weight: 800; color: var(--accent-text); background: rgba(245,165,36,.12); border-radius: 5px; padding: .08rem .35rem; margin-right: .35rem; }
.kt-days { font-weight: 800; font-size: 1rem; }
.kt-days.lead { color: var(--accent-text); }
.ssn-cat-txt b { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.ssn-cat-txt b { justify-content: flex-start; }
.du-btn, #duelSheetModal h3 { display: flex; align-items: center; justify-content: center; gap: .4rem; }
#duelSheetModal h3 { justify-content: flex-start; }
.st-crown .cat-ico { vertical-align: -1px; }

/* ── Förarprofil (Förare-fliken) ── */
.pf-head { display: flex; align-items: center; gap: .9rem; }
.pf-avatar { width: 58px; height: 58px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.pf-avatar span { font-weight: 900; font-size: 1.15rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); letter-spacing: .02em; }
.pf-name { font-size: 1.15rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; font-size: .74rem; color: var(--muted); }
.pf-class { padding: .12rem .6rem; border-radius: 20px; font-weight: 800; font-size: .78rem; background: rgba(240,165,0,.12); color: var(--accent-text); border: 1px solid rgba(240,165,0,.3); }
.pf-sec { font-size: .72rem; font-weight: 700; color: var(--label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6rem; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pf-sw { display: flex; flex-wrap: wrap; gap: .55rem; }
.pf-dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; transition: transform .12s, border-color .15s; }
.pf-dot.on { border-color: var(--text); transform: scale(1.08); }
.pf-pw-toggle { background: none; border: none; color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; padding: .9rem 0 .3rem; display: flex; align-items: center; gap: .35rem; }
.pf-pw-toggle .pend-arrow { display: inline-block; transition: transform .2s; }
.pf-pw-toggle.open .pend-arrow { transform: rotate(90deg); }
/* iOS/Chrome autofyll ska inte göra fälten vita */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg) inset; transition: background-color 9999s ease-out 0s;
}

/* ── Admin: flikdelar och inkorg ── */
#adminSeg { margin: 0 0 .75rem; }
.adm-badge { display: inline-block; margin-left: .35rem; background: var(--danger); color: #fff; font-size: .66rem; font-weight: 800; border-radius: 9px; padding: 0 .38rem; line-height: 1.35rem; min-width: 1.35rem; text-align: center; vertical-align: 1px; }
.adm-badge[hidden] { display: none; }
.inbox-setting { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); cursor: pointer; margin: 1rem .2rem 0; }

/* ── Admin: Personer ── */
.pp-item { border-top: 1px solid var(--border); }
.pp-item:first-child { border-top: 0; }
.pp-row { display: flex; align-items: center; gap: .65rem; padding: .6rem 0; cursor: pointer; }
.pp-av { background:var(--border);width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .74rem; color: var(--text); }
.pp-main { flex: 1; min-width: 0; }
.pp-name { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.pp-sub { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.pp-cls { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .8rem; color: #000; }
.pp-row.btn { width:100%;text-align:left;white-space:normal;border:0;border-radius:0;justify-content:flex-start; }
.pp-row .pp-sub { display:block;font-weight:400; }
.admin-team-letter { width:40px;height:40px;border-radius:10px;background:var(--border);display:grid;place-items:center;font-size:1.1rem;font-weight:700;flex-shrink:0; }
.admin-accent { color:var(--accent-text); }
.admin-list-heading { display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem; }
.admin-list-heading .card-title { margin:0; }
.admin-list-meta { display:block;color:var(--muted);font-size:.8rem;font-weight:400;margin:.2rem 0;overflow-wrap:anywhere; }
.admin-search { display:flex;align-items:center;gap:.5rem;border:1px solid var(--border);border-radius:10px;padding:0 .7rem;margin-bottom:.75rem;background:var(--input-bg);color:var(--muted); }
.admin-search input { flex:1;min-width:0;width:100%;background:transparent;border:0;padding:.65rem 0;font-size:16px; }
.admin-search:focus-within { outline:2px solid var(--accent);outline-offset:1px; }
.admin-person-panel .cm-head h3 { display:flex;align-items:center;gap:.65rem;min-width:0;flex:1;overflow-wrap:anywhere; }
.admin-person-panel .cm-head h3>span:last-child { min-width:0; }
.admin-person-panel h4 { margin:1.2rem 0 .55rem;font-size:.82rem;color:var(--label); }
.admin-help { display:block;font-size:.76rem;color:var(--muted);line-height:1.5;margin:.45rem 0; }
.admin-detail-row { width:100%;display:flex;align-items:center;justify-content:space-between;gap:.7rem;min-height:48px;white-space:normal;text-align:left; }
.admin-detail-row>span { flex:1;min-width:0; }
.admin-detail-row small { display:block;color:var(--muted);font-size:.75rem; }
.admin-more { position:relative;flex-shrink:0; }
.admin-danger { color:var(--danger); }
.admin-relation-row { display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 0;border-bottom:1px solid var(--border); }
.admin-person-panel .form-group input,.admin-person-panel .form-group select { width:100%; }
.admin-person-panel .alert[hidden] { display:none; }
.pp-sec { font-size: .7rem; font-weight: 700; color: var(--label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.pp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .4rem; }
.pp-grid3 { display: grid; grid-template-columns: 70px 1fr 74px; gap: .4rem; }
.pp-clsbtn { display: flex; align-items: center; justify-content: center; gap: .25rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-weight: 700; font-size: .95rem; cursor: pointer; padding: 0 .4rem; white-space: nowrap; }
.pp-clsbtn small { font-size: .62rem; font-weight: 600; color: var(--muted); }
.pp-grid3 { grid-template-columns: 70px 1fr 92px; }
.pp-email { font-size: .76rem; color: var(--muted); margin: .45rem 0 0; }
.pp-lbl { font-size: .72rem; color: var(--label); font-weight: 600; margin: .7rem 0 .3rem; }
.pp-chips-row { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
select.pp-add { width: auto; max-width: 160px; font-size: .74rem !important; padding: .2rem 1.6rem .2rem .5rem; color: var(--muted); border-style: dashed; }
.pp-role { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--border); font-size: .88rem; cursor: pointer; }
.pp-role span { display: inline-flex; align-items: center; gap: .4rem; }
.pp-role-row { cursor: default; }
.pp-subbox { background: var(--card); border-radius: 9px; padding: .55rem .6rem; margin: 0 0 .5rem; }

/* ── Visa som (admin förhandsvisar en roll) ──
   --pv är listens höjd när förhandsvisningen är på (0 annars); sidhuvud, flikar, sidomeny
   och innehåll flyttas ned lika mycket så inget hamnar under listen. */
:root { --pv: 0px; }
body.pv-on { --pv: 30px; }
.pv-strip { display: none; position: fixed; left: 0; right: 0; top: 0; height: 30px; z-index: 250;
  background: var(--accent); color: #000; align-items: center; justify-content: space-between; gap: .6rem;
  padding: 0 .9rem; font-size: .78rem; font-weight: 700; }
body.pv-on .pv-strip { display: flex; }
.pv-strip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-strip button { background: #000; color: var(--accent-text); border: none; border-radius: 6px; padding: .15rem .6rem; font-size: .72rem; font-weight: 800; cursor: pointer; flex-shrink: 0; }
@media (max-width: 1200px) { .pv-strip { top: var(--topbar-height); } }
.pv-box { margin: .6rem .75rem 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.pv-box.on { border-color: var(--accent); }
.pv-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: none; border: none;
  color: var(--text); padding: .5rem .7rem; cursor: pointer; text-align: left; font: inherit; }
.pv-box.on .pv-head { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pv-k { display: block; font-size: .6rem; letter-spacing: .08em; color: var(--muted); font-weight: 800; text-transform: uppercase; }
.pv-v { font-size: .84rem; font-weight: 700; }
.pv-box.on .pv-v { color: var(--accent-text); }
.pv-opt { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border-top: 1px solid var(--border); font-size: .84rem; cursor: pointer; }
.pv-opt input { margin: 0; }
.pv-sub { font-size: .6rem; letter-spacing: .08em; color: var(--muted); font-weight: 800; text-transform: uppercase; padding: .5rem .7rem .1rem; border-top: 1px solid var(--border); }

/* ── Träningsmallar (Coaching) ── */
.tpl-sec { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .1rem 0 .45rem; }
.tpl-sec > span { font-size: .72rem; font-weight: 700; color: var(--label); text-transform: uppercase; letter-spacing: .07em; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tpl-chips .chip { min-width: 7.5rem; }
.tpl-chips .chip b { font-size: .82rem; }
.tpl-chips .chip i { font-style: normal; font-size: .7rem; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: .25rem; }
.tpl-card { padding: .75rem .85rem; margin-bottom: .6rem; }
.tpl-head { display: flex; align-items: baseline; gap: .5rem; cursor: pointer; }
.tpl-head b { font-size: .95rem; }
.tpl-head span { font-size: .74rem; color: var(--muted); }
.tpl-head .tpl-chev { margin-left: auto; }
.tpl-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-top: .45rem; }
.tpl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: .65rem; }
.tpl-day { background: var(--bg); border-radius: 7px; min-height: 5.5rem; padding: .25rem .2rem; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tpl-dh { font-size: .66rem; color: var(--muted); text-align: center; font-weight: 700; }
.tpl-m { border: none; border-radius: 5px; padding: .2rem .2rem; font: inherit; font-size: .62rem; font-weight: 700; line-height: 1.15; cursor: pointer; text-align: left;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); word-break: break-word; }
.tpl-plus { margin-top: auto; border: 1px dashed var(--border); background: none; color: var(--muted); border-radius: 5px; cursor: pointer; font-size: .85rem; padding: 0; }
.tpl-acts { display: flex; gap: .4rem; margin-top: .6rem; }
.tpl-acts .btn { flex: 1; }
.tpl-overlay { position: fixed; inset: 0; z-index: 1900; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; }
.tpl-overlay[hidden] { display: none; }
.tpl-sheet { background: var(--card); width: min(520px, 100%); border-radius: 14px 14px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); max-height: 85vh; overflow-y: auto; }
.tpl-seg { display: flex; gap: .35rem; margin-bottom: .5rem; flex-wrap: wrap; }
.tpl-seg .chip { flex: 1; }

/* ── Coaching: bantips + elevkort ── */
.cb-bar { display:flex; align-items:center; gap:.45rem; font-size:.76rem; color:var(--muted); border:1px dashed var(--border); border-radius:10px; padding:.35rem .6rem; margin-bottom:.75rem }
.cb-bar select { flex:1; min-width:0; background:none; border:none; color:var(--text); font-weight:700; font-size:.8rem; padding:.15rem 1.4rem .15rem .1rem }
.ctip { border:1px solid var(--border); border-radius:12px; padding:.65rem .8rem; margin-bottom:.5rem; background:var(--card); position:relative }
.ctip-h { display:flex; align-items:center; gap:.4rem; font-weight:700; font-size:.9rem }
.ctip p { margin:.3rem 0 0; font-size:.85rem; line-height:1.45; white-space:pre-wrap }
.ctip small { display:block; color:var(--muted); font-size:.72rem; margin-top:.3rem }
.c-more { margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; padding:.35rem; border-radius:8px; display:inline-grid; place-items:center }
.c-menu { position:absolute; right:.5rem; top:2.2rem; z-index:30; background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.4); padding:.25rem; min-width:160px }
.c-menu button { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; background:none; border:none; color:var(--text); padding:.5rem .65rem; font-size:.83rem; border-radius:6px; cursor:pointer }
.c-menu button.danger { color:var(--danger) }
.c-menu button:hover { background:color-mix(in srgb,var(--text) 6%,transparent) }
.c-menu.in-flow { position:static;flex-basis:100%;min-width:0;box-shadow:none;margin:.25rem 0; }

/* ── Gemensamma reglage (docs/UI-GUIDE.md §7): flikväljare, switch, kryssruta, chip, etikett ──
   Valt läge markeras med aria-pressed="true" (eller aria-selected/.on/.active i äldre kod). */
.ico-tile { --c:var(--muted);display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;border-radius:8px;color:var(--c);background:color-mix(in srgb, var(--c) 14%, transparent); }
.ico-tile.md { width:32px;height:32px;flex-basis:32px; }
.ico-tile.lg { width:40px;height:40px;flex-basis:40px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.seg[hidden], .seg:empty { display: none; }
.seg.inline { display: inline-flex; }
.seg > button { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 36px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; padding: .35rem .6rem; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.seg > button:is([aria-pressed="true"], [aria-selected="true"], .on, .active) { background: var(--card); color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.22); }
.seg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg > button small { display: block; font-size: .66rem; font-weight: 600; color: var(--muted); }
.seg > button:is([aria-pressed="true"], [aria-selected="true"], .on, .active) small { color: var(--accent-text); }
.seg.stack > button { flex-direction: column; gap: .05rem; }
.seg.sm { padding: 2px; border-radius: 8px; }
.seg.sm > button { min-height: 28px; font-size: .75rem; padding: .2rem .6rem; border-radius: 6px; }
.seg.on-map { background: rgba(13,17,23,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.seg.on-map > button { color: rgba(230,237,243,.8); }
.seg.on-map > button:is([aria-pressed="true"], .on, .active) { background: #1c2333; color: #e6edf3; }

/* Discipline tabs keep every icon/label visible and give each selection its full width.
   On exceptionally narrow cards or larger text, scroll this row instead of overlapping. */
:is(#timesModeToggle .seg, #catTabs.seg, #fullCatTabs.seg) {
  min-width: 0; max-width: 100%; overflow-x: auto;
  overscroll-behavior-x: contain; scrollbar-width: thin;
}
:is(#timesModeToggle .seg, #catTabs.seg, #fullCatTabs.seg) > button {
  flex: 1 0 auto; min-width: max-content; padding-inline: .45rem;
}
:is(#timesModeToggle .seg, #catTabs.seg, #fullCatTabs.seg) > button > svg { flex-shrink: 0; }
@media (max-width: 680px) {
  :is(#timesModeToggle .seg, #catTabs.seg, #fullCatTabs.seg) > button { gap: .2rem; padding-inline: .3rem; }
}

/* Rad med text till vänster och switch till höger. */
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; font-size: .88rem; cursor: pointer; }

/* Switch: <input type="checkbox" role="switch" class="sw">, eller ett dolt input följt av <span class="sw" aria-hidden="true">. */
.sw { appearance: none; -webkit-appearance: none; position: relative; display: block; width: 40px; height: 24px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 35%, transparent); cursor: pointer; transition: background .15s; flex-shrink: 0; margin: 0; padding: 0; border: 0; box-sizing: border-box; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.sw:checked, input:checked + .sw { background: var(--accent2); }
.sw:checked::after, input:checked + .sw::after { transform: translateX(16px); }
.sw:focus-visible, input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw:disabled, input:disabled + .sw { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .sw, .sw::after { transition: none; } }

/* Kryssruta när man väljer flera i en lista: <input type="checkbox" class="ck"> */
.ck { appearance: none; -webkit-appearance: none; padding: 0; width: 20px; height: 20px; border-radius: 6px; border: 2px solid color-mix(in srgb, var(--muted) 65%, transparent); background: none; display: inline-grid; place-content: center; margin: 0; cursor: pointer; flex-shrink: 0; transition: background .15s, border-color .15s; }
.ck:checked { background: var(--accent); border-color: var(--accent); }
.ck:checked::after { content: ''; width: 5px; height: 10px; border: solid #0d1117; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.ck:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck:disabled { opacity: .45; cursor: default; }

/* Chip (knapp). Valt: aria-pressed="true". Egen färg som betyder något: .chip.color med --c. */
.team-picker-row { width:100%;box-sizing:border-box;background:transparent;border:2px solid transparent;border-radius:14px;color:var(--text);font:inherit;display:flex;align-items:center;gap:.8rem;padding:.85rem .6rem;text-align:left;white-space:normal;cursor:pointer; }
.team-picker-row:focus-visible { outline:2px solid var(--accent); }
.team-picker-row:disabled { opacity:.5;cursor:default; }
.team-picker-icon { width:44px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--bg);color:var(--muted);flex-shrink:0; }
.team-picker-text { flex:1;min-width:0;overflow-wrap:anywhere; }
.team-picker-text strong { display:block;font-size:1rem; }
.team-picker-text small { display:block;color:var(--muted);font-size:.82rem;margin-top:.25rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip { --c: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 30px; border: 1px solid var(--border); border-radius: 999px; padding: .25rem .75rem; background: none; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none; }
.chip:is([aria-pressed="true"], .on) { border-color: var(--c); color: color-mix(in srgb, var(--c) 82%, var(--text)); background: color-mix(in srgb, var(--c) 12%, transparent); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip:disabled { opacity: .55; cursor: default; }
.chip.chief { border-color:var(--accent);color:var(--accent-text); }
.chip small { font-size: .7rem; font-weight: 600; color: var(--muted); }
.chip.sm { min-height: 26px; padding: .15rem .6rem; font-size: .72rem; }
.chip.lg { min-height: 44px; font-size: .9rem; }
.chip.color { color: color-mix(in srgb, var(--c) 82%, var(--text)); border-color: color-mix(in srgb, var(--c) 30%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); }
.chip.color:is([aria-pressed="true"], .on) { border-color: color-mix(in srgb, var(--c) 80%, transparent); background: color-mix(in srgb, var(--c) 28%, transparent); }
.chip.color small { color: color-mix(in srgb, var(--c) 70%, var(--muted)); }
.chip.stack { flex-direction: column; align-items: flex-start; gap: .1rem; border-radius: 12px; padding: .45rem .75rem; white-space: normal; text-align: left; }
.chip.static { cursor: default; color: var(--text); }
.chip .chip-x { display: inline-grid; place-items: center; margin-right: -.4rem; padding: 2px; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .7; cursor: pointer; }
.chip .chip-x:hover { opacity: 1; }
.admin-support-section { margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border); }
.admin-support-heading { display:flex;align-items:center;gap:.6rem; }
.admin-mail-open { display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:0;padding:0;max-width:100%;white-space:normal;overflow-wrap:anywhere; }
.admin-support-status { display:flex;gap:.65rem;padding:.75rem 0;border-bottom:1px solid var(--border); }
.admin-support-status > div { flex:1;min-width:0; }
.admin-support-meta dt { color:var(--muted);font-size:.8rem;margin-top:.6rem; }
.admin-support-meta dd { margin:0;overflow-wrap:anywhere; }
.support-mail-row { width:100%;text-align:left;overflow-wrap:anywhere; }
.support-mail-row strong,.support-mail-row small { display:block; }
.support-mail-line { display:flex;justify-content:space-between;gap:.75rem; }
.support-mail-line small { flex-shrink:0;color:var(--muted); }
.support-mail-row.is-unread .support-mail-line { color:var(--info); }
.support-mail-row.is-unread .support-mail-line b::before { content:'';display:inline-block;width:6px;height:6px;background:var(--info);border-radius:50%;margin-right:.4rem; }
.support-message { margin:.6rem 0;padding:.7rem;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;overflow-wrap:anywhere; }
.support-message summary { cursor:pointer;display:flex;flex-wrap:wrap;gap:.4rem; }
.support-message summary small { color:var(--muted);margin-left:auto; }
.support-message.via-ai { background:color-mix(in srgb,var(--pb) 9%,var(--card)); }
.support-start-choice { display:flex;gap:.6rem;align-items:center;padding:.75rem;border:1px solid var(--border);border-radius:10px;margin:.5rem 0; }
.support-count-error { color:var(--danger); }
#supportInbox .seg,#supportInbox .chips { margin:.65rem 0; }
#supportInbox [data-support-search] { display:flex;gap:.4rem;margin:.7rem 0; }
#supportInbox [data-support-search] .admin-search { flex:1;min-width:0;margin:0; }
#supportInbox .admin-inbox-head { gap:.4rem; }
#supportInbox .admin-help { overflow-wrap:anywhere; }
@media(max-width:1200px){.ct-admin-add-support #newSupportMailBtn{display:none;}}
.chip.static.people-filter-chip { max-width:100%;white-space:normal;color:color-mix(in srgb, var(--c) 82%, var(--text));border-color:color-mix(in srgb, var(--c) 35%, transparent);background:color-mix(in srgb, var(--c) 14%, transparent); }
.people-filter-chip > span { min-width:0;overflow-wrap:anywhere; }
.people-filter-chip > svg,.people-filter-chip > .chip-x { flex-shrink:0; }
.people-filter-chip .chip-x:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }

/* Etikett (bara text, går inte att trycka på). Färg via --c. */
.tag { --c: var(--muted); display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; line-height: 1.15rem; border-radius: 999px; padding: 0 .5rem; color: color-mix(in srgb, var(--c) 82%, var(--text)); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; }
.tag.outline { border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }

/* Sökbar väljare (docs/UI-GUIDE.md §6): banväljaren (track-picker.js) och searchableSelect() i api.js. */
.track-picker { position: relative; }
.track-picker-field { position:relative; }
.track-picker-field input { padding-right:2.8rem; box-sizing:border-box; }
.track-picker-field input:focus { border-color:var(--accent); }
.track-picker-field input::-webkit-search-cancel-button { display:none; }
.track-picker-toggle { position:absolute; right:1px; top:1px; bottom:1px; width:2.6rem; display:flex; align-items:center; justify-content:center; color:var(--text); border:0; background:transparent; cursor:pointer; border-radius:0 6px 6px 0; }
.track-picker-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.track-picker.is-open .track-picker-toggle svg { transform:rotate(180deg); }
.track-picker-list { position:absolute; z-index:50; top:calc(100% + .25rem); left:0; right:0; max-height:min(19rem,45vh); overflow-y:auto; overscroll-behavior:contain; background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 25px #0005; }
.track-picker-list[hidden] { display:none; }
.track-picker-option { display:flex; align-items:center; justify-content:space-between; gap:.65rem; min-height:44px; padding:.55rem .85rem; box-sizing:border-box; color:var(--text); font-size:16px; cursor:pointer; overflow-wrap:anywhere; }
.track-picker-option > span:first-child { min-width:0; }
.track-picker-option[aria-selected=true] { color:var(--accent-text); background:color-mix(in srgb,var(--accent) 14%,var(--card)); }
.track-picker-option.is-active { outline:1px solid var(--accent); outline-offset:-1px; }
.track-picker-group { padding:.6rem .85rem .25rem; color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; }
.track-picker-empty { padding:.85rem; color:var(--muted); }
.track-picker-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Laddar och tomma lägen (docs/UI-GUIDE.md §10): bygg med uiLoading() och uiEmpty() i api.js. */
.ui-loading { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: 1.4rem .5rem; color: var(--muted); font-size: .85rem; }
.ui-loading::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--muted) 30%, transparent); border-top-color: var(--accent); animation: uiSpin .8s linear infinite; flex-shrink: 0; }
.ui-loading.sm { justify-content: flex-start; padding: .4rem 0; font-size: .8rem; }
.ui-loading.sm::before { width: 12px; height: 12px; }
@keyframes uiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-loading::before { animation-duration: 2.4s; } }
.ui-empty { --c: var(--muted); display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.4rem .5rem; }
.ui-empty-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); margin-bottom: .2rem; }
.ui-empty b { font-size: .95rem; }
.ui-empty p { margin: 0; font-size: .82rem; color: var(--muted); max-width: 34ch; line-height: 1.45; }
.ui-empty-acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .45rem; }
.ui-empty.ok { --c: var(--accent2); }
.ui-empty.err { --c: var(--danger); }
.ui-empty.sm { flex-direction: row; text-align: left; gap: .6rem; padding: .4rem 0; }
.ui-empty.sm .ui-empty-ico { width: 30px; height: 30px; margin: 0; flex-shrink: 0; }
.ui-empty.sm p { max-width: none; }

/* Kortdelar (docs/UI-GUIDE.md §11): rubrikrad, bläddring, undertext och "Visa alla (N)" */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.card-head > .card-title { margin: 0; min-width: 0; }
.card-pager { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.card-pager[hidden] { display: none; }
.card-pager button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.card-pager button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-pager-count { min-width: 3.2rem; text-align: center; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.card-sub { color: var(--muted); font-size: .66rem; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 8px; }
.card-more { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; color: var(--accent-text); font-size: .85rem; font-weight: 700; text-decoration: none; }
.st-actions { display:flex; gap:.4rem; margin-top:.75rem }
.st-actions > * { flex:1; text-align:center; text-decoration:none; justify-content:center }
.st-mall { border:1px solid var(--border); border-radius:12px; padding:.6rem .7rem; margin-top:.75rem; background:color-mix(in srgb,var(--text) 2%,transparent) }
.st-mall-row { display:flex; gap:.35rem; align-items:center; margin-top:.4rem }
.st-mall-row select { flex:1; min-width:0; padding:.4rem .5rem; font-size:.83rem }
.st-wk { display:flex; justify-content:space-between; gap:.5rem; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:.9rem 0 .25rem }
.st-it { display:flex; align-items:center; gap:.6rem; padding:.45rem .1rem; border-bottom:1px solid var(--border) }
.st-it:last-child { border-bottom:none }
.st-it.done { opacity:.5 }
.st-ck { width:22px; height:22px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:900; background:none; color:#0d1117; cursor:pointer; padding:0 }
.st-ck.on { background:var(--accent2); border-color:var(--accent2) }
.st-dt { width:2.3rem; text-align:center; flex-shrink:0; line-height:1.1 }
.st-dt small { display:block; font-size:.6rem; color:var(--muted); text-transform:uppercase }
.st-dt b { font-size:.95rem }
.st-bar { width:3px; align-self:stretch; border-radius:2px; flex-shrink:0 }
.st-nm { font-size:.86rem; font-weight:600 }
.st-mt { font-size:.72rem; color:var(--muted); display:flex; align-items:center; gap:.3rem; flex-wrap:wrap }
.st-z { font-size:.66rem; border-radius:999px; padding:.05rem .45rem; font-weight:700 }
.st-x { margin-left:auto; background:none; border:none; color:var(--muted); font-size:1.05rem; cursor:pointer; padding:.1rem .4rem }
.st-fold { width:100%; background:none; border:1px dashed var(--border); border-radius:10px; padding:.45rem; color:var(--muted); font-size:.78rem; margin-top:.6rem; cursor:pointer }

/* Koppla AI (MCP) — profilen och Admin → System → API */
.mcp-desc { font-size: .84rem; color: var(--muted); margin: 0 0 .8rem; line-height: 1.45; }
.mcp-sub { font-size: .75rem; color: var(--muted); margin-top: .15rem; }
.mcp-key { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--border); }
.mcp-key b { font-size: .9rem; }
.mcp-tag { display: inline-block; font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--border); vertical-align: 1px; }
.mcp-tag.w { color: var(--accent-text); border-color: var(--accent); }
.mcp-new { border: 1px solid var(--accent); border-radius: 10px; padding: .8rem; margin-bottom: .8rem; background: rgba(240,165,0,.06); }
.mcp-new label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .7rem 0 .25rem; }
.mcp-copy { display: flex; gap: .4rem; align-items: stretch; }
.mcp-copy code { flex: 1; min-width: 0; font-size: .72rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .45rem .5rem; overflow-wrap: anywhere; user-select: all; }
.mcp-chk { display: flex; align-items: center; gap: .5rem; font-size: .86rem; cursor: pointer; }
.mcp-help { display: block; text-align: center; font-size: .8rem; color: var(--accent-text); margin-top: .7rem; text-decoration: none; }
.mcp-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.mcp-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: normal; }
.mcp-plugin-hint { margin: .6rem 0; line-height: 1.5; }
.mcp-instruction summary, .mcp-advanced summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; padding: .65rem 0; font-size: .84rem; font-weight: 600; }
.mcp-instruction summary::-webkit-details-marker, .mcp-advanced summary::-webkit-details-marker { display: none; }
.mcp-instruction summary { color: var(--muted); font-size: .78rem; }
.mcp-instruction summary > svg, .mcp-advanced summary > svg { flex-shrink: 0; }
.mcp-instruction[open] > summary > svg, .mcp-advanced[open] > summary > svg { transform: rotate(90deg); }
.mcp-instruction pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .8rem; line-height: 1.5; user-select: text; padding: .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.mcp-advanced { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: .4rem; }
.mcp-advanced summary small { color: var(--muted); font-weight: 400; margin-left: .5rem; }
.mcp-add { width: 100%; margin: .6rem 0; }
.mcp-permissions { display: flex; align-items: flex-start; gap: .4rem; color: var(--muted); font-size: .75rem; margin: .8rem 0 0; }
.mcp-permissions svg { flex-shrink: 0; }
@media (max-width: 500px) {
  .mcp-actions { flex-direction: column; }
  .mcp-actions .btn { width: 100%; min-height: 44px; }
  .mcp-advanced summary small { display: block; margin-left: 0; }
  .mcp-key { flex-wrap: wrap; }
}

/* Klubbens länkar (bansidan och Banstatus) */
.tl-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.tl-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.tl-pill:active { opacity: .7; }
.tl-pills.tl-compact { gap: .45rem; }
.tl-pill.tl-ico { width: 34px; height: 34px; padding: 0; justify-content: center; }
/* Bansidan: nästa banstatus överst */
.ts-next { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.ts-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ts-next b { font-size: .92rem; }
.ts-next small { display: block; font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.ts-next .ts-go { margin-left: auto; color: var(--accent-text); font-size: .8rem; font-weight: 700; white-space: nowrap; }

/* Admin → Banor */
.trk-filterbar { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.trk-count { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.trk-row { display: flex; align-items: center; gap: .7rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; margin-bottom: .5rem; cursor: pointer; }
.trk-ring { width: 38px; height: 38px; border-radius: 50%; border: 3px solid; display: grid; place-items: center; font-size: .68rem; font-weight: 800; flex-shrink: 0; }
.trk-abbr { font-size: .7rem; color: var(--muted); background: var(--border); padding: .05rem .4rem; border-radius: 4px; margin-left: .4rem; font-weight: 600; vertical-align: 1px; }
.trk-meta { display: flex; flex-wrap: wrap; gap: .15rem .6rem; margin-top: .2rem; font-size: .74rem; }
.trk-meta .ok { color: var(--accent2-text); } .trk-meta .no { color: var(--muted); opacity: .75; }
.trk-sheet { background: var(--card); width: min(560px, 100%); max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); }
.trk-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.trk-head h3 { margin: 0; font-size: 1.2rem; }
.trk-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); border: none; color: var(--muted); font-size: 1rem; cursor: pointer; flex-shrink: 0; }
.trk-sec { display: flex; justify-content: space-between; align-items: baseline; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .45rem; }
.trk-sec button { background: none; border: none; color: var(--accent-text); font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; }
.trk-f { display: flex; align-items: center; gap: .6rem; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .75rem; margin-bottom: .35rem; font-size: .86rem; }
.trk-f .l { color: var(--muted); width: 84px; flex-shrink: 0; font-size: .8rem; }
.trk-f .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-f .v.empty { color: var(--muted); font-style: italic; opacity: .8; }
.trk-go { background: none; border: none; color: var(--accent-text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.trk-ver { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .75rem; margin-bottom: .35rem; font-size: .86rem; }
.trk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: .35rem; }
.trk-grid div { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .5rem; text-align: center; }
.trk-grid b { display: block; font-size: 1.1rem; } .trk-grid span { font-size: .7rem; color: var(--muted); }

/* Bakgrundskartor (mapBaseLayers i api.js) */
.map-bases { position: relative; }
.map-bases-btn { width: 2.4rem; height: 2.4rem; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.map-bases-menu { position: absolute; top: calc(100% + .35rem); left: 0; min-width: 8.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .25rem; box-shadow: 0 6px 20px rgba(0,0,0,.45); z-index: 1; }
.leaflet-right .map-bases-menu { left: auto; right: 0; }
.leaflet-bottom .map-bases-menu { top: auto; bottom: calc(100% + .35rem); }
.map-bases-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; }
.map-bases-menu button.on { background: rgba(240,165,0,.15); color: var(--accent-text); }
.leaflet-control-attribution { font-size: 9px !important; background: rgba(0,0,0,.45) !important; color: #c9d1d9 !important; }
.leaflet-control-attribution a { color: #c9d1d9 !important; }

/* Filterknappen och dess meny (filterBtnHtml/openFilterMenu i api.js) — samma på alla sidor */
.ct-fmenu { position: fixed; z-index: 3000; max-width: 280px; max-height: 70vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .3rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ct-fmenu button { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-size: .88rem; padding: .5rem .65rem; border-radius: 8px; cursor: pointer; }
.ct-fmenu button span { flex: 1; }
.ct-fmenu button small { color: var(--muted); font-size: .75rem; }
.ct-fmenu button.on { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-text); font-weight: 700; }
.ct-fsep { height: 1px; background: var(--border); margin: .3rem .4rem; }
.ct-fhead { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .45rem .65rem .2rem; }

/* Banor: samma sökrad och lista/karta/status-knappar i båda befintliga vyerna. */
.banor-row { display: flex; gap: .45rem; align-items: center; margin-bottom: .9rem; }
.banor-row .banor-search { flex: 1; min-width: 0; margin-bottom: 0; }
.banor-views { display: flex; width:max-content; max-width:100%; box-sizing:border-box; background:var(--nav-glass-bg); border:1px solid var(--nav-glass-border); box-shadow:var(--nav-glass-shadow); backdrop-filter:var(--nav-glass-filter); -webkit-backdrop-filter:var(--nav-glass-filter); border-radius:999px; padding:0; flex-shrink:0; isolation:isolate; }
.banor-views :is(button,a) { display: inline-flex; align-items: center; justify-content: center; gap:0; flex:0 0 auto; min-width:2.3rem; box-sizing:border-box; padding:0 .3rem; overflow:hidden; white-space:nowrap; background: none; border: none; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; height: 2.1rem; border-radius:0; cursor: pointer; transition:background-color .2s ease,color .2s ease; }
.banor-views :is(button,a) svg { flex-shrink:0; }
.banor-views .banor-view-label { max-width:0; opacity:0; overflow:hidden; margin-left:0; transition:max-width .4s cubic-bezier(.22,1,.36,1),opacity .4s ease,margin-left .4s cubic-bezier(.22,1,.36,1); }
.banor-views :is(button,a).on { background:none; color:var(--accent-text); transition:background-color .4s ease,color .4s ease; }
.banor-views :is(button,a).on .banor-view-label { max-width:var(--view-label-width,24rem); opacity:1; margin-left:.4rem; }
.banor-views > :is(button,a):first-child { border-radius:999px 0 0 999px; }
.banor-views > :is(button,a):last-child { border-radius:0 999px 999px 0; }
.banor-views > :is(button,a):only-child { border-radius:999px; }
.banor-views > :is(button,a) + :is(button,a) { border-left:1px solid var(--nav-glass-border); }
.banor-views :is(button,a):focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
/* The floating capsule is the surface; the sticky row behind it stays clear. */
.page-header:has(.banor-views) { background:transparent; }
@media(prefers-reduced-transparency:reduce) {
  .banor-views { background:var(--nav-glass-solid); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .banor-views { background:var(--nav-glass-fallback); }
}
@media (prefers-reduced-motion:reduce) { .banor-views :is(button,a),.banor-views :is(button,a).on,.banor-views .banor-view-label { transition:none; } }
.banor-search-container { padding-bottom: 0; }
.banor-status-header { flex-wrap: wrap; }
@media (pointer: coarse) {
  .banor-views :is(button,a) { min-width:44px; min-height:44px; }
}

/* Samma genomskinliga sticky-rad och knappar som Banor. */
.page-view-header { display:flex; align-items:center; justify-content:flex-end; gap:.5rem; }
.page-view-scroll { margin-left:auto; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.page-view-scroll::-webkit-scrollbar { display:none; }
.banor-views.page-view-group { width:max-content; max-width:none; }
.page-view-group .tab-btn { margin:0; text-decoration:none; border-bottom:0; line-height:normal; }
.page-view-group .banor-view-label { text-overflow:clip; }
#driversPageHeader { flex-wrap:nowrap; }
#driversPageHeader > :first-child { flex:0 10 140px; min-width:0; overflow:hidden; }
#driversPageHeader > :first-child:has(#driversAdminUserSelect[style*="display:none"]),
#driversPageHeader > :first-child:has(#driversAdminUserSelect[style*="display: none"]) { display:none; }
#driversAdminUserSelect { width:100%; min-width:0; text-overflow:ellipsis; }
#driversMainTabs { flex:0 1 auto; }
#driversPageHeader > :last-child { flex:0 0 auto; }
#driversPageHeader > :last-child:has(> .hidden):not(:has(> :not(.hidden))) { display:none; }

/* Hjälp och år tar mindre plats; långa sidrubriker får två rader på smala mobiler. */
@media (max-width: 600px) {
  .topbar.topbar-with-help { gap: .3rem; padding-left: .65rem; padding-right: .65rem; }
  .topbar-with-help .topbar-year-select { width: 64px; padding: 3px 18px 3px 5px; font-size: .78rem; }
  .topbar-with-help #topbarHelp,
  .topbar-with-help #topbarBell { box-sizing: border-box; width: 44px; min-height: 44px; flex: 0 0 44px; justify-content: center; }
  .topbar-with-help #topbarBell { justify-content: flex-end; padding-right: 0; }
  .topbar-with-help #topbarHelp { margin-left: .1rem; margin-right: .1rem; }
  .topbar-with-help .topbar-logo { font-size: .88rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
}


/* Swedish workshop entry and service reminder, matching the red tips widget. */
.workshop-icon,#supportDialog .cm-ico.workshop-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:46px;height:46px;border-radius:12px;background:rgba(248,81,73,.16);color:#aab2bd}
.workshop-service-banner{border:1px solid rgba(248,81,73,.4);border-left:4px solid var(--danger);background:linear-gradient(110deg,rgba(248,81,73,.13),rgba(248,81,73,.04));border-radius:14px;padding:.9rem;margin-bottom:.75rem}
.workshop-warning-heading{display:flex;align-items:flex-start;gap:.75rem;line-height:1.4}
.workshop-warning-heading>svg{flex-shrink:0;margin-top:.15rem}
.workshop-warning-line{color:var(--muted);font-size:.83rem;margin-top:.2rem;overflow-wrap:anywhere}
.workshop-warning-actions{display:flex;justify-content:flex-end;margin-top:.7rem}





/* Season context belongs directly below the team context. */
.sidebar-year-picker{padding:.35rem .75rem .6rem;border-bottom:1px solid var(--border)}
.sidebar-year-picker label{display:block;color:var(--muted);font-size:.72rem;font-weight:600;margin-bottom:.3rem}
.sidebar-year-picker .topbar-year-select{width:100%;min-height:36px;background-color:var(--bg);font-size:.9rem;padding:.38rem .6rem}




/* Touch devices keep native scrolling without visible scrollbar tracks. */
@media (pointer: coarse) {
  *, *::before, *::after { scrollbar-width: none; }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
}


/* Preview settings stay inside the existing narrow sidebar and expand vertically. */
.pv-box .pv-head[aria-expanded=true] .pv-c { transform:rotate(180deg); }
.pv-box .pv-fields { display:grid;gap:.6rem;padding:0 .7rem .7rem 1.9rem;min-width:0; }
.pv-box .pv-fields[hidden] { display:none; }
.pv-box .pv-field { display:grid;gap:.25rem;min-width:0;color:var(--muted);font-size:.74rem; }
.pv-box .pv-field select { box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:44px;font-size:.77rem;padding:.45rem .4rem; }
.pv-box .pv-field select.pv-changed { border-color:var(--accent);color:var(--accent-text); }
.pv-box .pv-actions { display:grid;gap:.4rem;padding:.65rem .7rem; }
.pv-box .pv-start { white-space:normal;min-height:44px;font-size:.8rem; }
.pv-box .pv-reset { border:0;background:none;color:var(--muted);font:inherit;font-size:.74rem;min-height:44px;cursor:pointer; }


.page-view-group .adm-badge { flex-shrink:0; margin-left:.25rem; }

/* Endurodagbok: tiderna syns även när varvet inte är tävlingsgrundande. */
.diary-route-times { display:flex;flex-direction:column;gap:.3rem; }
.diary-route-times > div { display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.35rem; }
.diary-route-times small { color:var(--muted);font-size:.67rem;font-weight:400; }
.diary-route-summary { display:flex;justify-content:space-between;gap:.75rem;padding:.4rem 0; }
.diary-route-summary > div { min-width:0; }
.diary-route-summary > div:last-child { text-align:right;flex-shrink:0; }
.diary-route-summary small { display:block;color:var(--muted);font-size:.72rem;margin-top:.25rem; }
.pass-route-label { display:block;font-size:.65rem;font-weight:600;color:var(--muted); }
.enduro-coverage-hint { font-size:.78rem;line-height:1.5;color:var(--muted);margin:.4rem 0; }
@media (max-width:640px) {
  .diary-pass-row { flex-wrap:wrap; }
  .diary-pass-row > div:nth-child(2) { flex-basis:calc(100% - 2rem); }
  .diary-pass-row > div:last-child { width:100%;padding-left:1.75rem;box-sizing:border-box; }
  .diary-pass-row .diary-route-times > div { justify-content:flex-start; }
}

/* Lägg till bana i Connect (tillfällig bana): bladet där föraren pekar ut start/mål */
.td-form { display: flex; flex-direction: column; gap: .6rem; }
.td-form input:not([type="checkbox"]):not([type="radio"]) { width: 100%; box-sizing: border-box; font-size: 16px; }
.td-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Instruktionen ligger som en etikett överst på kartan så att kartan får hela höjden */
.td-map-wrap { position: relative; }
.td-hint { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); z-index: 500; margin: 0; width: max-content; max-width: calc(100% - 6rem); box-sizing: border-box; padding: .35rem .7rem; border-radius: 999px; background: var(--bg-glass); font-size: .85rem; font-weight: 600; color: var(--accent-text); text-align: center; pointer-events: none; }
.td-hint:empty { display: none; }
.td-map { height: 300px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); touch-action: none; }
.td-result { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .75rem; border-radius: 10px; font-size: .85rem; color: var(--muted);
  background: color-mix(in srgb, var(--accent2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent2) 35%, transparent); }
.td-result b { color: var(--accent2-text); }
.td-result.err { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.td-actions { display: flex; gap: .5rem; } .td-actions .btn { flex: 1; min-height: 48px; width: auto !important; }
.td-actions .btn:disabled { opacity: .45; cursor: default; }
.td-note { margin: 0; font-size: .78rem; color: var(--muted); }
.td-tap-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--info); background: color-mix(in srgb, var(--info) 22%, transparent); border: 2px solid var(--info); box-sizing: border-box; }
.td-tap-dot.finish { color: var(--danger); background: color-mix(in srgb, var(--danger) 22%, transparent); border-color: var(--danger); }
.prelim-pill { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 20px;
  border: 1px solid var(--accent); color: var(--accent-text); vertical-align: middle; }
/* Ingen bana matchade: två val i passvyn, och stegen i bladet (connect.html) */
.td-result[hidden] { display: none; }
.team-sheet-footer .td-result { margin-bottom: .6rem; }
.td-choices { display: flex; flex-direction: column; gap: .5rem; }
.td-choice { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: .75rem; min-height: 60px; padding: .7rem .8rem; border-radius: 12px; background: var(--card); border: 1px solid var(--border); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.td-choice:hover { background: var(--card-hover); }
.td-choice-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.td-choice-text { flex: 1; min-width: 0; }
.td-choice-text strong { display: block; font-size: .95rem; }
.td-choice-text small { display: block; margin-top: .15rem; font-size: .8rem; color: var(--muted); }
.td-choice-chev { display: inline-flex; color: var(--muted); }
.td-versions { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0 .5rem; }
.td-km { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.td-or { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .6rem; font-size: .8rem; color: var(--muted); }
.td-or::before, .td-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
#teamDialog .td-back + h3 { flex: 1; }
#teamDialog .cm-head:has(.td-back) { justify-content: flex-start; gap: .6rem; }
/* Peka start/mål: bladet är nästan hela skärmen och kartan fyller resten, så att inget scrollar */
#teamDialog .cm-sheet.td-sheet { height: calc(100dvh - env(safe-area-inset-top, 0px) - 4px); max-height: none; }
#teamDialog .td-sheet .team-sheet-body { display: flex; flex-direction: column; overflow: hidden; }
#teamDialog .td-sheet .td-form { flex: 1; min-height: 0; }
#teamDialog .td-sheet .td-map-wrap { flex: 1; min-height: 160px; display: flex; }
#teamDialog .td-sheet .td-map { flex: 1; height: auto; }

/* Course rows in the existing Admin club sheet. */
.trk-f.trk-layout { width:100%;text-align:left;color:var(--text);cursor:pointer; }
.trk-layout small { display:block;color:var(--accent2-text);font-size:.78rem;margin-top:.25rem;overflow-wrap:anywhere; }
#versionsModalTitle { min-width:0;overflow-wrap:anywhere; }
#versionsModalTitle small { display:block;font-size:.78rem;font-weight:400;color:var(--muted); }

/* Approved Connect sheet 05–11: shared rows, chips and footer, no scroll in map step. */
#teamDialog .connect-track-sheet #teamDialogTitle small { display:block;font-size:.78rem;font-weight:400;color:var(--muted); }
#teamDialog .connect-track-sheet .td-choice { background:var(--bg);margin-bottom:.8rem; }
#teamDialog .connect-track-sheet .td-course-row,
#teamDialog .connect-track-sheet .td-version-row { background:var(--bg);border-color:var(--border); }
#teamDialog .connect-track-sheet .td-version-row[aria-pressed=true] { border-color:var(--accent);background:var(--bg); }
#teamDialog .connect-track-sheet .td-choice-ico.enduro { color:var(--accent2-text);background:color-mix(in srgb,var(--accent2) 14%,transparent); }
.td-warning { display:flex;gap:.6rem;align-items:flex-start;padding:.8rem;border:1px solid var(--accent);border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);margin-bottom:.8rem; }
.td-warning[hidden] { display:none; }
.td-warning svg { flex-shrink:0;color:var(--accent-text); }
#teamDialog .connect-track-sheet.td-sheet .td-form { display:flex;flex-direction:column;min-height:0;gap:.6rem; }
#teamDialog .connect-track-sheet.td-sheet .td-map-wrap { min-height:0; }
#teamDialog .connect-track-sheet.td-sheet .team-sheet-body { overflow:hidden;min-height:0; }
#importNoMatchPrompt h3 { margin:0 0 .5rem; }
#importNoMatchPrompt .td-note { margin-bottom:.8rem; }

/* Admin mail and inbox use the same rows and contextual BikeSheets. */
.admin-mail-overview{display:grid;gap:.8rem}
.admin-mail-overview h3,.admin-mail-overview p{margin:0}
.admin-mail-overview .card-title{margin-bottom:.6rem}
.admin-mail-head{display:flex;align-items:center;gap:.65rem;min-width:0;margin-bottom:.65rem}
.admin-mail-grow{flex:1;min-width:0;overflow-wrap:anywhere;text-align:start}
.admin-mail-sub{display:block;color:var(--muted);font-size:.82rem;line-height:1.5;margin:.25rem 0}
.admin-mail-icon{color:var(--accent-text);display:inline-flex}
.admin-mail-row{display:flex;width:100%;gap:.6rem;align-items:center;padding:.8rem 0;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font:inherit;text-align:start;cursor:pointer}
.admin-mail-row:hover{background:var(--card-hover)}
.admin-mail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7rem}
.admin-mail-pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font:inherit;line-height:1.5}
.admin-context-panel .form-group{display:block;margin:.8rem 0}
.admin-context-panel .form-group :is(input,select,textarea){width:100%;margin-top:.3rem}
.admin-context-panel h4{margin:.8rem 0 .3rem}
.admin-mail-log{display:flex;gap:.65rem;padding:.8rem 0;border-bottom:1px solid var(--border)}
.admin-mail-dot{--status:var(--muted);width:8px;height:8px;flex-shrink:0;border-radius:50%;background:var(--status);margin-top:.45rem}
.admin-mail-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.admin-mail-overview .sw-row{margin:0;padding:.7rem 0;gap:.7rem}
.admin-context-panel .seg{margin:.6rem 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* System summaries and forms use the shared Admin controls and sheet flow. */
.system-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.system-two>*{min-width:0}.system-two input{width:100%;box-sizing:border-box}
.system-version{display:block;font-size:2rem;margin:.6rem 0}
.system-current{color:var(--accent2-text);background:color-mix(in srgb,var(--success) 12%,transparent)}
.system-file{display:flex;align-items:center;justify-content:center;gap:.7rem;min-height:100px;border:1px dashed var(--border);border-radius:12px;padding:1rem;cursor:pointer;overflow-wrap:anywhere}
.system-file:focus-within{outline:2px solid var(--accent)}
.system-person{text-align:left;white-space:normal;min-width:0;flex:1;display:block}
.system-person b,.system-person small{display:block}.system-person:disabled{opacity:1;cursor:default}
.admin-context-panel fieldset{border:1px solid var(--border);border-radius:12px;padding:.75rem;margin:0 0 1rem;min-width:0}
.admin-context-panel fieldset legend{padding:0 .3rem;font-weight:700}
.input-unit{position:relative}.input-unit input{width:100%;box-sizing:border-box;padding-right:3rem}.input-unit>span{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.system-map{height:320px;border-radius:12px;overflow:hidden;margin:.6rem 0;background:var(--bg)}
.system-map-large{height:min(52dvh,440px)}
.system-points-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}.system-points-grid input{text-align:center;width:100%;min-width:0;box-sizing:border-box}
.system-points-grid label{font-size:.78rem}
.system-points-chart{display:flex;height:150px;gap:3px;margin:1rem 0 2rem;padding-top:1rem}
.system-points-chart>div{position:relative;flex:1;display:flex;align-items:flex-end;min-width:0;border-bottom:1px solid var(--border)}
.system-points-bar{width:100%;min-height:1px;background:var(--muted);opacity:.45;border-radius:3px 3px 0 0}.system-points-bar.podium{background:var(--accent);opacity:1}
.system-points-chart small{position:absolute;top:calc(100% + .3rem);width:100%;text-align:center;font-size:.6rem;color:var(--muted)}
.system-points-top{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}.system-points-top>div{padding:.6rem .2rem;text-align:center;border:1px solid var(--border);border-radius:10px}.system-points-top small,.system-points-top b{display:block}.system-points-top small{font-size:.65rem;color:var(--muted)}.system-points-top b{font-size:1.3rem}
#serviceTab>.card,#androidReleaseInfo>.card{margin-bottom:1rem}
#serviceTab .admin-relation-row>.admin-detail-row{flex:1;min-width:0}
#androidVersionPanel progress{width:100%;accent-color:var(--accent)}

/* Space between workshop address, contact cards and directions in every sheet step. */
.workshop-address{margin:0 0 .85rem;line-height:1.5;overflow-wrap:anywhere}
.workshop-directions{margin-top:.85rem}

/* Keep workshop fields compact; location editing has a single map step. */
.admin-context-panel.workshop-editor .form-group{margin:.5rem 0}
.workshop-location-row{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:.5rem 0}
.workshop-location-row .admin-help{margin:0}


.workshop-location-map .map-bases-menu button{min-height:44px;font-size:1rem;line-height:1.35;padding:.65rem .8rem;white-space:nowrap;color:var(--text)}
.workshop-location-map .map-bases-menu button.on{color:var(--accent-text);background:color-mix(in srgb,var(--accent) 15%,transparent)}


/* Admin People and Connections: layout inside the shared panel and row controls. */
.admin-person-panel .pp-av { color:var(--c);border:1px solid var(--c);background:color-mix(in srgb, var(--c) 14%, transparent); }
.admin-person-panel .person-details { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px;width:100%;text-align:left;padding:12px 0;white-space:normal; }
.person-details>span { min-width:0;display:flex;flex-direction:column;gap:4px; }
.person-details small { color:var(--muted);font-size:.7rem; }
.person-details strong { overflow-wrap:anywhere; }
.person-details .person-class { color:var(--c);background:color-mix(in srgb, var(--c) 14%, transparent);border-radius:8px;padding:4px 8px;font-size:1.5rem;align-self:flex-start; }
.person-details .person-number { color:var(--accent-text);font-size:1.2rem; }
.admin-person-panel [data-person-section] { background:var(--bg);border-radius:12px;padding:12px;margin:12px 0; }
.admin-person-panel [data-person-section]>h4 { display:flex;align-items:center;gap:8px;margin:0 0 10px; }
.admin-person-panel .sw-row>span,.admin-person-panel .admin-detail-row>span { display:flex;align-items:center;gap:10px;min-width:0; }
.admin-person-panel .admin-detail-row>span>span { min-width:0; }
.admin-person-panel .admin-detail-row small { display:block; }
[data-person-section] [data-person-action^="add"] { border-style:dashed; }
[data-person-section] .chip.static { --c:var(--success);background:color-mix(in srgb, var(--c) 14%, transparent); }
.person-coach-initials { display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:color-mix(in srgb, var(--info) 14%, transparent);color:var(--info);font-weight:700; }
[data-mcp-person] .sw-row { --c:var(--pb);background:color-mix(in srgb, var(--c) 14%, transparent);border-radius:10px;padding:12px; }
[data-mcp-person] [data-revoked] { opacity:.6; }
#connectionsCard .admin-detail-row { gap:10px; }
#connectionsCard .admin-detail-row>span:nth-child(2) { flex:1;min-width:0; }
#connectionsCard .admin-detail-row small { display:block;white-space:normal; }
#connectionsCard .tag { flex:0 0 auto; }
#connectionsCard .ico-tile { flex-grow:0;flex-shrink:0; }
[data-provider-panel] .form-group input { width:100%;min-width:0; }
[data-provider-panel] [data-redirect-row] { display:flex;gap:8px; }
[data-provider-panel] [data-redirect-row] input { flex:1;min-width:0; }
[data-provider-panel] label .tag { margin-left:8px; }
[data-provider-panel] input[data-missing] { border-color:var(--c); }
[data-provider-panel] [data-step] { display:flex;align-items:center;gap:8px; }
[data-provider-panel] [data-step]>b { border-radius:50%;background:var(--accent);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0; }
#adminSeg { overflow-x:auto;scrollbar-width:none; }
#adminSeg>button { flex:1 0 auto; }

/* Riding form: one shared view for driver overview, Start and evidence panels. */
.riding-beta { container-type:inline-size; position:relative; min-width:0; margin-bottom:.75rem; }
.riding-beta p { margin:.5rem 0; }
.riding-title { display:flex; align-items:center; gap:.45rem; font-size:.71rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.riding-title small,.riding-beta-label { font-size:.65rem; font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0; }
.riding-layout { display:grid; grid-template-columns:minmax(0,1fr); }
.riding-summary,.riding-development { min-width:0; }
.riding-score-row { display:flex; align-items:center; gap:1.1rem; padding:.5rem 0; }
.riding-score { flex-shrink:0; font-size:72px; line-height:1.1; font-weight:800; letter-spacing:-.04em; color:var(--accent-text); }
.riding-score-row>div { min-width:0; }
.riding-change { display:inline-flex; align-items:center; gap:.25rem; font-size:17px; font-weight:700; color:var(--text); }
.riding-tagline { color:var(--muted); font-size:13px; line-height:1.45; }
.riding-status,.riding-foot { color:var(--muted); font-size:12px; line-height:1.6; }
.riding-start-text { font-size:13px; color:var(--muted); }
.riding-graph { display:block; width:100%; height:216px; min-width:0; margin:.75rem 0; overflow:visible; }
.riding-line { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.riding-grid { stroke:var(--border); stroke-width:.6; }
.riding-baseline { stroke:var(--muted); stroke-width:1; stroke-dasharray:4 4; opacity:.6; }
.riding-dot { fill:var(--accent); }
.riding-start-dot { fill:var(--muted); }
.riding-axis { fill:var(--muted); font-size:11px; }
.riding-graph-value { fill:var(--accent-text); font-size:13px; font-weight:700; }
.riding-metric-rows { border-top:1px solid var(--border); }
.riding-metric-row { display:grid; grid-template-columns:minmax(0,1fr) 80px minmax(66px,auto); gap:.55rem; padding:.85rem 0; border-bottom:1px solid var(--border); align-items:center; }
.riding-metric-row strong { font-size:13px; }
.riding-metric-row small { display:block; font-size:11px; color:var(--muted); margin-top:.2rem; line-height:1.5; }
.riding-metric-value { text-align:right; }
.riding-metric-value small { display:flex; align-items:center; justify-content:flex-end; gap:.15rem; }
.riding-spark { width:80px; height:36px; }
.riding-pulse .riding-line { stroke:var(--muted); }
.riding-pulse .riding-dot { fill:var(--muted); }
.riding-metric-value .riding-better,.riding-better { color:var(--accent2-text); }
.riding-metric-value .riding-worse { color:var(--accent-text); }
.riding-conditions { color:var(--muted); font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.riding-runs-link { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; min-height:44px; padding:12px 0; margin:8px 0; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; color:var(--accent-text); font-weight:700; text-align:left; white-space:normal; }
.riding-runs-link span { min-width:0; overflow-wrap:anywhere; }
.riding-runs-link > svg { flex-shrink:0; }
.riding-runs-link:hover { color:var(--accent-text); background:transparent; }
.riding-runs-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.riding-how { font-size:13px; margin:.8rem 0; line-height:1.6; color:var(--muted); }
.riding-how summary { cursor:pointer; color:var(--text); font-weight:600; padding:.3rem 0; }
.riding-table-wrap { display:none; overflow-x:auto; }
.riding-table { width:100%; border-collapse:collapse; font-size:11px; }
.riding-table caption { text-align:left; font-size:13px; font-weight:700; padding:.75rem 0; }
.riding-table th,.riding-table td { padding:.55rem .3rem; border-bottom:1px solid var(--border); text-align:left; }
.riding-table th { color:var(--muted); font-weight:500; }
.riding-table td:nth-child(2) { overflow-wrap:anywhere; max-width:140px; }
.riding-tags { display:flex; flex-wrap:wrap; gap:.25rem; }
.riding-tags .tag { font-size:10px; }
.riding-run-row { display:flex; width:100%; align-items:center; gap:.75rem; text-align:left; white-space:normal; padding:.85rem .25rem; border-bottom:1px solid var(--border); border-radius:0; }
.riding-run-date { display:flex; flex-direction:column; width:34px; flex-shrink:0; text-align:center; }
.riding-run-date strong { font-size:25px; }
.riding-run-date small { color:var(--muted); font-size:11px; }
.riding-run-info { flex:1; min-width:0; overflow-wrap:anywhere; }
.riding-run-info>strong { display:block; font-size:13px; margin-bottom:.3rem; }
.riding-run-info>small { display:block; font-size:11px; color:var(--muted); margin-top:.3rem; }
.riding-run-change { display:flex; align-items:center; gap:.3rem; font-weight:800; color:var(--accent-text); }
.riding-detail { min-width:0; font-size:13px; line-height:1.6; }
.riding-detail h4 { margin:1rem 0 .5rem; }
.riding-detail-part { border-top:1px solid var(--border); padding:.8rem 0; }
.riding-detail-part>div:first-child { display:flex; justify-content:space-between; align-items:center; }
.riding-detail-part small,.riding-hint { font-size:12px; color:var(--muted); line-height:1.6; }
.riding-part-bar { position:relative; height:7px; background:var(--input-bg); border-radius:4px; margin:.5rem 0; }
.riding-part-bar::after { content:''; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--muted); }
.riding-part-bar>span { position:absolute; top:0; bottom:0; border-radius:4px; background:var(--accent); }
.riding-lap-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.riding-lap { fill:var(--muted); opacity:.5; }
.riding-lap-run { fill:var(--accent); }
.riding-lap-slowest { fill:var(--info); }
.riding-lap-excluded { fill:none; stroke:var(--muted); stroke-dasharray:3 2; }
.riding-gap { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; opacity:.7; }
.riding-trend-line { stroke:var(--text); stroke-width:2; stroke-dasharray:5 3; }
.riding-evidence { display:grid; grid-template-columns:1fr 1.4fr; gap:.4rem .75rem; }
.riding-evidence dt { color:var(--muted); }
.riding-evidence dd { margin:0; overflow-wrap:anywhere; }
.riding-compact .riding-score { font-size:44px; }
.riding-compact .riding-change { font-size:13px; }
.riding-compact .riding-score-row { padding:0; }
.riding-beta-label { position:absolute; right:16px; top:14px; }
.riding-compact .riding-title small { display:none; }
.riding-latest { display:flex; align-items:center; gap:.5rem; padding:.7rem 0; border-top:1px solid var(--border); color:var(--text); text-decoration:none; font-size:12px; }
.riding-latest span { flex:1; min-width:0; overflow-wrap:anywhere; }
.riding-latest strong { color:var(--accent-text); }
.riding-portal { border-radius:12px; background:var(--input-bg); padding:.7rem .8rem; margin:.5rem 0 .9rem; }
.riding-portal strong { display:block; font-size:13px; }
.riding-portal small { color:var(--muted); font-size:11px; }
.riding-portal-line { stroke:var(--info); stroke-width:1.3; stroke-dasharray:6 4; }
@container (min-width:900px) {
  .riding-beta:not(.riding-compact) .riding-layout { grid-template-columns:340px minmax(0,1fr); gap:1.5rem; }
  .riding-table-wrap { display:block; }
}
@container (max-width:899px) {
  .riding-summary { display:contents; }
  .riding-development { display:contents; }
  .riding-score-row { order:0; }
  .riding-status { order:1; }
  .riding-graph { order:2; }
  .riding-portal { order:3; }
  .riding-start-text { order:4; }
  .riding-metric-rows { order:5; }
}
@container (max-width:325px) {
  .riding-metric-row { grid-template-columns:minmax(0,1fr) 60px minmax(60px,auto); gap:.4rem; }
  .riding-spark { width:60px; }
}

.riding-graph-small { height:72px; }



/* Mechanic driver actions use the shared buttons, panels and switch. */
.mechanic-driver-card { margin-bottom:.75rem;min-width:0; }
.mechanic-driver-head { display:flex;align-items:center;gap:10px;min-width:0; }
.mechanic-driver-head>.mechanic-list-title { flex:1;margin:0; }
.mechanic-add-driver { width:44px;height:44px;padding:0;flex-shrink:0;color:var(--accent-text);border:1px solid var(--border); }
.has-driver .mechanic-add-driver { width:56px;height:56px; }
.mechanic-driver-choice { flex:1;display:flex;align-items:center;gap:10px;min-width:0;min-height:64px;padding:0;background:transparent;color:var(--text);border:0;text-align:left;cursor:pointer; }
.mechanic-driver-avatar { --driver-color:var(--accent-text);width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--driver-color) 16%,var(--card));color:var(--driver-color);font-size:13px;font-weight:700; }
.mechanic-driver-avatar.large { width:44px;height:44px; }
.mechanic-driver-copy { flex:1;min-width:0;display:block; }
.mechanic-driver-copy strong { display:block;font-size:15px;font-weight:700;line-height:1.35;overflow-wrap:anywhere; }
.mechanic-driver-copy small { display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.4;overflow-wrap:anywhere; }
.mechanic-driver-choice strong { font-size:17px; }
.mechanic-driver-choice small { overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.mechanic-driver-mark { display:flex;color:var(--muted);flex-shrink:0; }
.mechanic-bikes-row { width:100%;display:flex;align-items:center;gap:9px;min-height:48px;margin-top:10px;padding:10px 0 0;border:0;border-top:1px solid var(--border);background:transparent;color:var(--muted);text-align:left;cursor:pointer; }
.mechanic-bikes-row strong { font-size:15px;font-weight:600;color:var(--text); }
.mechanic-bike-names { flex:1;min-width:0;text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px; }
.mechanic-list-title { color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px; }
.mechanic-driver-head>.mechanic-list-title { font-size:12px; }
.mechanic-overview-search { width:100%;box-sizing:border-box;margin-top:14px;font-size:16px; }
.mechanic-show-all { border:0;background:transparent;min-height:44px;width:100%;text-align:left;padding:10px 0 0;cursor:pointer;color:var(--accent-text); }
.mechanic-picker-sheet .team-sheet-body { max-height:58dvh;overflow:auto;min-height:0;overscroll-behavior:contain; }
.mechanic-picker-sheet.sheet-view-content { height:auto!important; }
.mechanic-picker-controls { flex-shrink:0; }
.mechanic-picker-controls .mechanic-list-title { margin-top:0; }
.mechanic-driver-row { display:flex;align-items:center;gap:4px;position:relative;margin-bottom:6px;flex-wrap:wrap; }
.mechanic-driver-option { display:flex;align-items:center;gap:10px;flex:1;width:100%;min-width:0;min-height:60px;border:1px solid transparent;border-radius:10px;padding:8px;background:transparent;color:var(--text);text-align:left;cursor:pointer; }
.mechanic-driver-option[aria-checked="true"] { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent); }
.mechanic-driver-option[aria-checked="true"] .mechanic-driver-mark { color:var(--accent-text); }
.mechanic-driver-option:hover,.mechanic-bike-option:hover { background:var(--card-hover); }
.mechanic-driver-menu { display:contents; }
.mechanic-driver-menu .c-more { width:44px;min-height:44px; }
.mechanic-driver-menu .c-menu button { display:flex;align-items:center;gap:8px;min-height:44px; }
.mechanic-add-row { display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 0;border:0;background:transparent;color:var(--text);font-size:15px;text-align:left;cursor:pointer; }
.mechanic-add-row>span:nth-child(2) { flex:1; }
.mechanic-add-circle { display:flex;align-items:center;justify-content:center;border:1px dashed var(--border);color:var(--accent-text);border-radius:50%;width:40px;height:40px; }
.mechanic-search-row { display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap; }
.mechanic-search-row>.mechanic-driver-copy { min-width:100px; }
.mechanic-request-action { display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-left:auto;max-width:100%;font-size:12px;color:var(--muted); }
.mechanic-request-action.is-connected { color:var(--accent2-text); }
.mechanic-request-action .btn,.mechanic-search-row>.btn { min-height:44px;white-space:normal; }
.mechanic-send-request { border-color:var(--accent);color:var(--accent-text); }
.mechanic-text-action { color:var(--accent-text);border-color:transparent; }
.mechanic-bike-option { display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 0;text-decoration:none;color:var(--muted);border-bottom:1px solid var(--border); }
.mechanic-bike-option strong { color:var(--text); }
.mechanic-bike-icon { display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--input-bg);flex-shrink:0; }
.mechanic-driver-choice:focus-visible,.mechanic-driver-option:focus-visible,.mechanic-bikes-row:focus-visible,.mechanic-add-row:focus-visible,.mechanic-show-all:focus-visible,.mechanic-bike-option:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.mechanic-driver-card [hidden] { display:none; }
.mechanics-sheet-body { min-width:0; }
.mechanic-person-line { display:flex;align-items:center;gap:12px;min-width:0; }
.mechanic-incoming-card { border:1px solid var(--accent);border-radius:12px;padding:14px;margin-bottom:12px;background:color-mix(in srgb,var(--accent) 6%,var(--card)); }
.mechanic-incoming-card .sw-row { margin:16px 0;gap:12px; }
.mechanic-incoming-card .sw-row span { font-size:13px;min-width:0; }
.mechanic-incoming-card .sw { flex-shrink:0; }
.mechanic-request-buttons { display:flex;justify-content:space-between;gap:12px; }
.mechanic-request-buttons .btn { min-height:44px;min-width:88px; }
.mechanic-connected-row { display:flex;align-items:center;gap:12px;min-width:0;width:100%;min-height:64px;padding:12px 0;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-family:inherit;text-align:left;cursor:pointer; }
.mechanic-connected-row:hover { background:var(--card-hover); }
.mechanic-connected-row:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.mechanic-connected-row .mechanic-permission-status { display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted); }
.mechanic-connected-row .mechanic-permission-status.can-edit { color:var(--accent2-text); }
.mechanic-how-to { margin:16px 0;font-size:13px;color:var(--muted);line-height:1.5; }
.mechanic-person-profile { margin:4px 0 24px; }
.mechanic-person-profile .mechanic-driver-avatar { width:52px;height:52px;font-size:17px; }
.mechanic-person-profile strong { font-size:17px; }
.mechanic-access-info { display:flex;align-items:center;gap:10px;min-height:40px;font-size:14px;color:var(--muted); }
.mechanic-access-info span { color:var(--text); }
.mechanic-person-sheet .sw-row { margin:14px 0 8px;gap:12px; }
.mechanic-person-sheet .sw-row span { min-width:0;font-size:14px; }
.mechanic-person-sheet .sw { flex-shrink:0; }
.mechanic-permission-desc { font-size:13px;color:var(--muted);line-height:1.5;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border); }
.mechanic-person-sheet .btn.mechanic-remove-person { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;color:var(--danger);border:1px solid var(--danger); }
.mechanic-search-desc { font-size:.83rem;color:var(--muted);margin:.5rem 0 1rem; }
#addDriverModal input { width:100%; }
#driverSearchResults .row-item { gap:.5rem;flex-wrap:wrap; }
.bike-access-message { margin-bottom:.75rem;color:var(--muted);font-size:.83rem; }
.bike-change-row { padding:.55rem 0;border-bottom:1px solid var(--border); }
.bike-change-row small { display:block;color:var(--muted);margin-top:.2rem; }


/* Version scope and compact global leaderboard toggle. */
.times-heading { display:flex; align-items:center; gap:.65rem; margin-bottom:.75rem; }
.times-heading .card-title { margin:0; }
.times-context { color:var(--muted); font-size:.8rem; }
.globe-toggle { margin-left:auto; border-radius:50%; min-width:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); border:1px solid var(--border); }
.globe-toggle[aria-pressed="true"] { color:var(--accent-text); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.own-global-divider { border:0; border-top:1px solid var(--border); margin:.75rem 0; }
.version-choice-row { padding:.75rem 0; border-bottom:1px solid var(--border); }
.version-choice-row label { display:grid; gap:.4rem; }

#pfVersionRow[hidden], .version-choice-row[hidden] { display:none; }
.version-record-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.version-record-date { color:var(--muted); font-size:.75rem; }
.version-record-details { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; }
.version-record-time { font-size:1.6rem; font-weight:800; color:var(--accent-text); }


/* Pending cloud recordings on the existing Sync action. */
[data-cloud-pending] { position: relative; }
[data-cloud-pending]::after { content: attr(data-cloud-pending); position: absolute; top: -4px; right: -4px; min-width: 19px; padding: 2px 4px; border-radius: 12px; background: var(--danger); color: var(--text); font-size: 11px; line-height: 15px; text-align: center; }

/* Shared card-level read feedback keeps existing content visible. */
.ui-request-feedback{margin:.75rem 0;padding:.65rem;color:var(--muted);font-size:.85rem}
.ui-request-feedback p{margin:0 0 .5rem}
.ui-request-feedback .ui-loading{justify-content:flex-start}

/* Landsteget återanvänder filtermenyn och dess position. */
.ct-fmenu.ct-country-menu { max-width:calc(100vw - 16px); max-height:min(520px,70dvh,calc(100dvh - var(--country-menu-top) - 8px)); overflow:hidden; display:flex; flex-direction:column; box-sizing:border-box; }
.ct-country-search { min-width:0; max-width:calc(100% - 16px); width:calc(100% - 16px); box-sizing:border-box; margin:8px; font-size:16px; flex-shrink:0; }
.ct-country-list { overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.ct-country-choice { display:grid; grid-template-columns:18px 26px minmax(0,1fr); align-items:center; gap:.5rem; padding:.7rem .8rem; min-height:44px; box-sizing:border-box; cursor:pointer; color:var(--text); }
.ct-country-choice span { overflow-wrap:anywhere; }
.ct-country-note { margin:.6rem .8rem; font-size:.8rem; color:var(--muted); }
.ct-country-back { flex-shrink:0; }

.ct-country-head { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; min-width:0; }
.ct-country-head button { width:auto; min-width:0; padding:.5rem .35rem; }
.ct-country-head .ct-country-all { color:var(--accent-text); font-size:.75rem; text-align:right; }
.ct-country-head .ct-country-all[aria-pressed=true] { font-weight:700; }
.ct-country-code { color:var(--muted); font-size:.68rem; font-weight:700; }
.ct-country-name { min-width:0; font-size:.8rem; }
.ct-country-home { display:block; color:var(--accent-text); font-size:.65rem; }
.ct-country-menu .ct-country-note { flex-shrink:0; }


/* Optional system password picker; native and browser capability controls visibility. */
.credential-choice { width:100%; margin-top:.5rem; }
.credential-choice[hidden] { display:none; }