/* ==========================================================================
   Mit FTT - app.css
   Apple-inspireret design med "glas" (translucent flader), flydende tab-bar
   på mobil og glas-sidebar på desktop. Én kilde til både appen og mockuppen.
   Palette: logoets farver (rød, gul, blå) + sort/hvid + neutrale grå.
   ========================================================================== */

:root {
  color-scheme: light;
  --tint: #246DB4;                      /* logoets blå = handlingsfarve */
  --tint-soft: rgba(36, 109, 180, .14);
  --swim: #2F6DB5;                      /* triatlon: svøm = blå, cykel = gul, løb = rød (i den rækkefølge) */
  --bike: #F6C90E;
  --run: #D7263D;
  --tri-stripe: linear-gradient(90deg, var(--swim) 0 33.33%, var(--bike) 33.33% 66.66%, var(--run) 66.66% 100%);
  --tint-btn: #246DB4;                  /* flader med hvid tekst (knapper, avatar) */
  --tint-ink: #1B5A96;                  /* blå tekst på lyseblå flade */
  --tint-bg: #EAF2FB;                   /* valgt felt / bekræftet banner */
  --ink: #111111;
  --ink-2: #4D535A;                     /* kontrast mindst 4,5:1 (WCAG AA) på lys baggrund */
  --ink-3: #666C73;
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --surface: #FFFFFF;                   /* felter, lister og kort */
  --fill-rgb: 60, 60, 67;               /* grå fyld (hover, tryk, tags) i forskellige styrker */
  --sep: rgba(60, 60, 67, .14);
  --danger-bg: #FDE7E8;
  --danger-soft: rgba(255, 59, 48, .14);
  --danger-ink: #A3151A;
  --warn-bg: #FFF1CC;
  --warn-ink: #7A5200;
  --ok-bg: rgba(52, 199, 89, .15);
  --ok-ink: #166A33;
  --banner-bg: #FFF8CC;
  --banner-ink: #4A4300;
  --glass: rgba(255, 255, 255, .66);
  --tabbar-glass: rgba(255, 255, 255, .32);
  --glass-edge: rgba(255, 255, 255, .78);
  --glass-solid: rgba(255, 255, 255, .94);
  --hi-1: rgba(255, 255, 255, .9);      /* lys kant øverst på glas */
  --hi-2: rgba(255, 255, 255, .25);
  --sheet-rgb: 255, 255, 255;
  --sheet-bg: rgba(255, 255, 255, .86);
  --sheet-solid: rgba(255, 255, 255, .97);
  --pop-bg: rgba(255, 255, 255, .82);
  --seg-active: rgba(255, 255, 255, .92);
  --toast-bg: rgba(17, 17, 17, .86);
  --shadow-glass: 0 10px 34px rgba(17, 17, 17, .14), 0 1px 3px rgba(17, 17, 17, .06);
  --r-card: 22px;
  --r-lg: 28px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
}

/* Mørkt tema. theme.js sætter data-theme til light eller dark (system følger telefonens indstilling). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --tint: #4A9BE8;
  --tint-btn: #2B72C0;
  --tint-ink: #7DB8F2;
  --tint-soft: rgba(74, 155, 232, .2);
  --tint-bg: rgba(74, 155, 232, .2);
  --ink: #F5F5F7;
  --ink-2: #A5AAB1;
  --ink-3: #959BA3;
  --bg: #000000;
  --card: #1C1C1E;
  --surface: #1C1C1E;
  --fill-rgb: 235, 235, 245;
  --sep: rgba(235, 235, 245, .16);
  --danger-bg: rgba(255, 69, 58, .2);
  --danger-soft: rgba(255, 69, 58, .22);
  --danger-ink: #FF8A80;
  --warn-bg: rgba(255, 204, 0, .18);
  --warn-ink: #FFD866;
  --ok-bg: rgba(52, 199, 89, .2);
  --ok-ink: #6FE08F;
  --banner-bg: rgba(250, 234, 42, .15);
  --banner-ink: #E9E08A;
  --glass: rgba(28, 28, 30, .7);
  --tabbar-glass: rgba(40, 40, 44, .36);
  --glass-edge: rgba(255, 255, 255, .1);
  --glass-solid: rgba(28, 28, 30, .96);
  --hi-1: rgba(255, 255, 255, .1);
  --hi-2: rgba(255, 255, 255, .04);
  --sheet-rgb: 36, 36, 38;
  --sheet-bg: rgba(36, 36, 38, .88);
  --sheet-solid: rgba(36, 36, 38, .98);
  --pop-bg: rgba(44, 44, 46, .92);
  --seg-active: rgba(99, 99, 102, .95);
  --toast-bg: rgba(72, 72, 74, .95);
  --shadow-glass: 0 10px 34px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
}
/* Inde i et ark er felter og lister lidt lysere end arket */
:root[data-theme="dark"] .sheet { --surface: #2C2C2E; --card: #2C2C2E; }
/* Logoet har sort tekst og ring: på mørk baggrund lægges det på en hvid rund flade */
:root[data-theme="dark"] img[src$="logo.png"], :root[data-theme="dark"] img[src$="logo-192.png"] { background-color: #fff; border-radius: 50%; aspect-ratio: 1; object-fit: contain; padding: 1.5%; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
html { background: var(--bg); }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
::placeholder { color: var(--ink-3); opacity: 1; }
h1, h2, p { margin: 0; }
a, button, input, label { touch-action: manipulation; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; }
.tabbar, .btn, .bandcard, .tab, .num, .seg a { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---- App-skal: fuld skærm, indhold ruller under glasset ---------------- */
.app { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
.app[hidden] { display: none !important; }
.scroll {
  overscroll-behavior-y: contain;
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;   /* footeren skubbes ned i bunden, når der er lidt indhold */
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(20px, env(safe-area-inset-right, 0px)) calc(120px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));   /* max(): holder indholdet fri af hullet i skærmen i vandret visning */
}
/* Bund på alle sider */
.app-footer { width: 100%; max-width: 720px; margin: auto auto 0; padding-top: 18px; border-top: 1px solid var(--sep); text-align: center; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.authcard .app-footer { max-width: none; margin: 0; padding-top: 12px; font-size: 13px; line-height: 1.5; }
.authcard .app-footer p:nth-child(2) { display: none; }
.app-footer p:first-child { font-weight: 600; color: var(--ink); }
.app-footer .ver { vertical-align: middle; }
.app-footer .refresh-btn { margin-left: 4px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 18px; line-height: 1; vertical-align: middle; color: var(--tint); cursor: pointer; transition: color .15s, background .15s; }
.app-footer .refresh-btn:hover { background: var(--tint-soft); }
/* Banner: ny version er klar (som i Budgetark) */
#sw-update-banner { position: fixed; z-index: 9998; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 10px 8px 18px; border-radius: 999px; background: var(--tint-btn); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
#sw-update-banner button { padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
#sw-update-banner button:hover { background: rgba(255, 255, 255, .35); }
#sw-update-banner button:disabled { opacity: .6; cursor: default; }
#sw-update-banner button[aria-label] { padding: 6px 10px; background: none; }
@media (max-width: 899px) { #sw-update-banner { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }   /* over den flydende tab-bar */
.chk { appearance: none; -webkit-appearance: none; position: relative; width: 26px; height: 26px; margin: 0; justify-self: center; border: 2px solid var(--ink-3); border-radius: 8px; background: transparent; cursor: pointer; flex: none; transition: background .12s, border-color .12s; }
.chk:checked { background: var(--tint-btn); border-color: var(--tint-btn); }
.chk:checked::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.chk:disabled { opacity: .35; cursor: default; }
/* Beskedindstillinger: en række pr. besked, en kolonne pr. kanal */
.prefs-grid { background: var(--surface); border-radius: 20px; overflow: hidden; }
.prefs-row { position: relative; display: grid; align-items: center; gap: 6px; padding: 12px 8px 12px 16px; }
.prefs-cols2 { grid-template-columns: minmax(0, 1fr) 64px 64px; }
.prefs-cols3 { grid-template-columns: minmax(0, 1fr) 56px 56px 56px; }
.prefs-cols1 { grid-template-columns: minmax(0, 1fr) 64px; }
.prefs-cols-n1 { grid-template-columns: minmax(0, 1fr) 84px; }
.prefs-cols-n2 { grid-template-columns: minmax(0, 1fr) repeat(2, 84px); }
.prefs-cols-n3 { grid-template-columns: minmax(0, 1fr) repeat(3, 84px); }
.chat-frame { margin: 14px 0 10px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--sep); overflow: hidden; }
.chat-list { display: flex; flex-direction: column; gap: 3px; padding: 6px 12px 14px; max-height: clamp(180px, calc(100dvh - 430px), 520px); overflow-y: auto; scrollbar-width: none; }
.chat-list.ft { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px); mask-image: linear-gradient(to bottom, transparent 0, #000 40px); }
.chat-list.fb { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%); }
.chat-list.ft.fb { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.chat-list::-webkit-scrollbar { display: none; }
.chat-day { align-self: center; margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.mine { justify-content: flex-end; }
.chat-row:not(.grouped) { margin-top: 6px; }
.chat-av { flex: none; width: 32px; display: flex; }
.chat-col { display: flex; flex-direction: column; min-width: 0; max-width: 78%; }
.chat-row.mine .chat-col { align-items: flex-end; }
.chat-meta { margin: 0 8px 3px; font-size: 12px; color: var(--ink-3); }
.chat-meta b { font-weight: 600; color: var(--ink-2); }
.chat-bubble { padding: 9px 14px; border-radius: 18px; background: rgba(var(--fill-rgb), .12); color: var(--ink); font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-row:not(.mine) .chat-bubble { border-bottom-left-radius: 6px; }
.chat-row.mine .chat-bubble { background: var(--tint-btn); color: #fff; border-bottom-right-radius: 6px; }
.chat-bubble.dim { opacity: .55; }
.chat-bubble.gone, .chat-row.mine .chat-bubble.gone { background: transparent; color: var(--ink-3); font-style: italic; font-size: 14px; box-shadow: inset 0 0 0 1px var(--sep); }
.chat-col .action-menu { display: flex; max-width: 100%; }
.chat-bubble.tap { border: 0; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-compose { display: flex; align-items: flex-end; gap: 8px; }
.chat-compose .input { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; resize: none; padding-top: 11px; overflow-y: auto; scrollbar-width: none; }
.chat-compose .input::-webkit-scrollbar { display: none; }
.club-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--tint-ink); }
.club-mark .ico { width: 20px; height: 20px; stroke-width: 2.4; }
.prefs-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prefs-person .prefs-text { overflow-wrap: anywhere; }
.prefs-head .prefs-chan small { text-align: center; font-size: 10.5px; line-height: 1.2; white-space: nowrap; }
@media (max-width: 520px) { .prefs-person .avatar { display: none; } .prefs-cols-n3 { grid-template-columns: minmax(0, 1fr) repeat(3, 74px); } }
.prefs-cell { justify-self: center; }
.prefs-device { margin-bottom: 14px; }
.prefs-ico { width: 18px; height: 18px; stroke-width: 1.9; color: var(--ink-2); margin-bottom: 2px; }
.prefs-label { display: flex; align-items: center; gap: 2px; min-width: 0; }
.prefs-text { display: flex; flex-direction: column; min-width: 0; }
.prefs-text .s { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.prefs-head .prefs-label { gap: 4px; }
.prefs-row + .prefs-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--sep); }
.prefs-head { padding-top: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--sep); }
.prefs-col { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-2); }
.prefs-chan { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.prefs-chan.off { opacity: .45; cursor: default; }
.prefs-chan small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.prefs-chan .chk { margin-top: 4px; }
.prefs-group { padding: 12px 16px 6px; background: rgba(var(--fill-rgb), .06); font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-2); }
.prefs-na { justify-self: center; font-size: 18px; color: var(--ink-3); }
.prefs-row .t { font-size: 16px; }
.prefs-row .s { font-size: 13px; }
/* Banneret flyder lige over menubjælken i bunden (mobil og tablet) */
/* Mobil og tablet: de tre sportsgrene som tynd kant helt øverst på skærmen, lige under hullet (svøm, cykel, løb). På desktop står den på hovedmenuen. */
@media (max-width: 899px) {
  .app.top-stripe::before { content: ""; position: absolute; z-index: 15; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 4px; background: var(--tri-stripe); pointer-events: none; }
}
.install-wrap { position: absolute; z-index: 19; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); bottom: calc(12px + 68px + 10px + env(safe-area-inset-bottom, 0px)); }
.app.has-install .scroll { padding-bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
.install-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 4px; border-radius: 22px; background: var(--glass-solid); border: 1px solid var(--sep); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.install-x { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.install-x .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.install-icon { width: 48px; height: 48px; flex: none; border-radius: 11px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }
.install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.install-text .t { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.install-text .s { font-size: 13px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.install-go { flex: none; padding: 7px 16px; border: 0; border-radius: 999px; background: var(--tint-soft); color: var(--tint-ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.install-go:active { opacity: .7; }
.legal .largetitle { margin: 6px 0 10px; }
.backbtn { display: inline-flex; align-items: center; gap: 2px; margin: 4px 0 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--tint-soft); color: var(--tint-ink); font-size: 15px; font-weight: 600; }
.backbtn .ico { width: 20px; height: 20px; stroke-width: 2.6; }
.backbtn:active { opacity: .7; }
.legal-meta { margin-bottom: 8px; font-size: 14px; color: var(--ink-2); }
.legal h2 { margin: 28px 0 8px; font-size: 20px; line-height: 1.25; font-weight: 700; }
.legal p, .legal li { font-size: 16px; line-height: 1.6; }
.legal p { margin: 8px 0; }
.legal ul { margin: 8px 0; padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal a, .app-footer a { color: var(--tint); text-decoration: underline; text-underline-offset: 2px; }
.legal code { padding: 1px 6px; border-radius: 6px; background: rgba(var(--fill-rgb), .1); font-size: 14px; }
.page { width: 100%; max-width: 720px; margin: 0 auto 40px; }
.page.wide { max-width: 760px; }

/* ---- Glas -------------------------------------------------------------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-glass), inset 0 1px 0 var(--hi-1), inset 0 -1px 0 var(--hi-2);
}

/* ---- Tab-bar (mobil) / sidebar (desktop) ------------------------------- */
.tabbar {
  position: absolute; z-index: 20; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: 68px; padding: 6px; border-radius: 34px; display: flex; gap: 2px;
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .35s ease;
}
.tabbar.glass {
  background: var(--tabbar-glass);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  backdrop-filter: blur(30px) saturate(200%);
}
@media (max-width: 899px) {
  html.tabs-away .tabbar { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .tabbar { transition: opacity .2s; } }
.tab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0 4px; border-radius: 28px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); white-space: nowrap;
  transition: background .2s, color .2s;
}
.tab[aria-current="page"] { background: var(--tint-soft); color: var(--tint-ink); }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tab .ico { width: 26px; height: 26px; }
.tab-brand, .tab-user { display: none; }
.action-menu.user-menu:has(.tab-user) { display: none; }
.desk-only { display: none !important; }
@media (max-width: 899px) {
  .mob-hidden { display: none !important; }
  .tabbar.icons-only .tab > span:not(.nbadge) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabbar.icons-only .tab .ico { width: 28px; height: 28px; }
}

/* ---- Titel ------------------------------------------------------------- */
.titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 0 14px; }
/* Mobil og tablet: logo og navn øverst, profilen yderst til højre, titlen under. Fra 900 px er logoet i sidemenuen. */
.titlebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 14px; }
.titlebar .m-brand { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; justify-self: start; }
.titlebar .m-brand img { height: 38px; width: auto; }
.titlebar .m-brand b { font-size: 18px; line-height: 1.1; font-weight: 700; color: var(--ink); }
.titlebar .tb-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; }
.bell, .helpbtn { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); flex: none; box-shadow: 0 1px 3px rgba(17, 17, 17, .08); }
.bell .ico, .helpbtn .ico { width: 22px; height: 22px; stroke-width: 1.8; }
.bell:active, .helpbtn:active { opacity: .7; }
button:not(:disabled), [role="button"], a[href], select { cursor: pointer; }
button:disabled { cursor: default; }
.bell .badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #D6313B; color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.bell .badge[hidden] { display: none; }
.inbox-tabs { margin: 14px 0 0; }
.inbox-tabs a { gap: 8px; }
.inbox-tabs .nbadge { margin-left: 0; }

.drag-handle { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 36px; margin-left: -8px; font-size: 20px; line-height: 1; color: var(--ink-3); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.drag-handle:active { cursor: grabbing; }
.admin-row.annlist .drag-handle { width: 22px; margin: 0 -4px 0 -6px; }
.admin-row.annlist .inbox-ic { width: 38px; height: 38px; }
.dragging { opacity: .4; }
.drag-over { box-shadow: inset 0 3px 0 var(--tint-btn); }
.drag-ghost { position: fixed; z-index: 9999; max-width: 70vw; padding: 10px 16px; border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; box-shadow: 0 8px 28px rgba(17, 17, 17, .25); pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-all { display: block; margin: -8px 0 16px; padding: 4px 6px; }
.board-text { margin: 4px 0 14px; padding: 16px 18px; border-radius: 16px; background: var(--surface); font-size: 16px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.inbox-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.inbox-bar { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
.inbox-bar:empty { display: none; }
.inbox { margin-top: 14px; }
.inbox .empty { margin: 24px 0; }
.inbox-row { align-items: flex-start; gap: 12px; padding: 14px 8px 14px 14px; }
.inbox-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--tint-soft); color: var(--tint-ink); }
.inbox-ic.hot { background: var(--danger-bg); color: var(--danger-ink); }
.inbox-ic.ok { background: var(--ok-bg); color: var(--ok-ink); }
.inbox-ic.warn { background: var(--warn-bg); color: var(--warn-ink); }
.inbox-ic .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.inbox-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inbox-top { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.inbox-kind { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tint-ink); }
.inbox-kind.hot { color: var(--danger-ink); }
.inbox-kind.ok { color: var(--ok-ink); }
.inbox-kind.warn { color: var(--warn-ink); }
.inbox-when { color: var(--ink-3); }
.inbox-top .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tint-btn); margin-left: auto; }
.inbox-row .t { font-size: 16px; line-height: 1.3; font-weight: 600; }
.inbox-row.unread .t { font-weight: 700; }
.inbox-main .s { font-size: 14px; line-height: 1.4; }
.inbox-via { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.inbox-del { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: -2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); }
.inbox-del .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.inbox-del:hover { background: rgba(var(--fill-rgb), .1); }
.titlebar .tb-title { grid-column: 1 / -1; grid-row: 2; }
.largetitle { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: .37px; }
.sub { margin-top: 6px; font-size: 17px; line-height: 1.35; color: var(--ink-2); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--tint-btn); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600;
}
button.avatar { border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.action-menu.user-menu { display: inline-flex; }
.avatar.sm { width: 32px; height: 32px; font-size: 14px; }
.avatar.lg { width: 76px; height: 76px; font-size: 32px; }
.avatar.xl { width: 112px; height: 112px; font-size: 46px; }
.avatar.photo, .person .pi.photo, .person.me .pi.photo { overflow: hidden; background: rgba(var(--fill-rgb), .12); }
.sh-trainer { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 16px; border-radius: 20px; background: var(--surface); }
.sh-trainer + .sh-list { margin-top: 16px; }
.sh-trainer small { display: block; font-size: 13px; color: var(--ink-2); }
.sh-trainer b { display: block; font-size: 17px; font-weight: 600; }
.avatar-edit { position: relative; display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.avatar-cam { position: absolute; right: -2px; bottom: -2px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tint-btn); color: #fff; box-shadow: 0 0 0 3px var(--card); }
.avatar-cam .ico { width: 18px; height: 18px; }
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; margin-top: 8px; }
.avatar-pick { padding: 3px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.avatar-pick.on { box-shadow: 0 0 0 3px var(--tint-btn); }
.avatar-pick:disabled { opacity: .5; }
.crop { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 6px 0 4px; }
.crop-frame { width: 260px; height: 260px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px var(--tint-btn); touch-action: none; }
.crop-stage { display: block; cursor: grab; touch-action: none; }
.crop-zoom { display: flex; align-items: center; gap: 12px; width: 260px; color: var(--ink-2); }
.crop-zoom input { flex: 1; min-width: 0; }
.crop-zoom .ico { width: 20px; height: 20px; flex: none; }
.avatar img, .person .pi img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Lister (inset grouped) ------------------------------------------- */
.group-title { margin: 26px 4px 8px; font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-2); }
.group { background: var(--card); border-radius: var(--r-card); overflow: hidden; }
.group.stripe-top { background: var(--tri-stripe) top / 100% 5px no-repeat, var(--card); }   /* de tre farver øverst (svøm, cykel, løb) */
.row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 10px 16px; transition: background .15s; }
.row + .row::before, .admin-row + .admin-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--sep); }
a.row:active { background: rgba(var(--fill-rgb), .08); }
.grow { flex: 1; min-width: 0; }
.grow .t, .grow .s { display: block; }
.t { font-size: 17px; font-weight: 600; line-height: 1.25; }
.s { font-size: 15px; line-height: 1.3; color: var(--ink-2); }
.chev { width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hold-bar { width: 5px; align-self: stretch; min-height: 34px; margin-right: -4px; border-radius: 3px; flex: none; }
.numtile { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; background: rgba(var(--fill-rgb), .1); color: var(--ink-2); }
.chip.hot { background: var(--danger-bg); color: var(--danger-ink); }
.chip.sm { padding: 2px 8px; font-size: 11px; }
.t-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.chip.ok { background: var(--tint-soft); color: var(--tint-ink); }
.chip.live, .chip.status.live { background: var(--tint); color: #fff; }
.chip .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: center; }

/* ---- Knapper ----------------------------------------------------------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--tint-btn); color: #fff; font-size: 17px; font-weight: 600; cursor: pointer;
  transition: transform .12s, opacity .12s;
}
.btn:active { transform: scale(.98); opacity: .9; }
.btn.lg { min-height: 64px; font-size: 19px; }
.btn.tinted { background: var(--tint-soft); color: var(--tint-ink); }
.btn.sm { width: auto; min-height: 40px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.btn.outline { background: var(--surface); color: var(--tint); box-shadow: inset 0 0 0 1.5px var(--tint); }
.btn .ico { stroke-width: 3; }
.stack { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

/* ---- Segmenteret kontrol (glas) --------------------------------------- */
.seg { display: flex; gap: 2px; padding: 4px; border-radius: 18px; margin-bottom: 18px; }
.seg a { flex: 1; min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 15px; font-weight: 600; }
.seg a[aria-current="true"] { background: var(--surface); box-shadow: 0 2px 8px rgba(17, 17, 17, .14); }

/* ---- Armbåndskort ------------------------------------------------------ */
.band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.band-grid > .bandcard { height: 100%; }
.banner + .band-grid, .group + .band-grid { margin-top: 14px; }
.section-head + .seg { margin: 4px 0 8px; }
.wk-day { position: relative; display: flex; gap: 14px; padding: 12px 16px; align-items: flex-start; }
.wk-day + .wk-day::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--sep); }
.wk-date { width: 40px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 2px 0 0; border: 0; background: none; color: inherit; font: inherit; }
button.wk-date { cursor: pointer; }
.wk-date svg { width: 16px; height: 16px; margin-top: 2px; color: var(--tint); opacity: .75; }
.wk-date small { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--ink-2); }
.wk-date b { font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.wk-day.today { box-shadow: inset 3px 0 0 var(--tint); }
.wk-day.today .wk-date small { color: var(--tint-ink); }
.wk-day.today .wk-date b { color: var(--tint); }
.group-title.today { color: var(--tint-ink); }
.wk-day.past .wk-date, .wk-day.past .wk-none { opacity: .55; }
.wk-items { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wk-day.empty { padding-top: 10px; padding-bottom: 10px; }
.wk-none { font-size: 15px; color: var(--ink-3); padding-top: 10px; border: 0; background: none; font-family: inherit; text-align: left; }
button.wk-none { cursor: pointer; }
.wk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: rgba(var(--fill-rgb), .06); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.wk-item:active { background: rgba(var(--fill-rgb), .12); }
.wk-item .hold-bar { min-height: 30px; margin-right: 0; }
.hold-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; margin: 0 -6px 0 -2px; }
.wk-item .hold-dot { margin: 0 -2px 0 -2px; }
.kind-tag.hot { color: var(--danger-ink); }
.kind-tag.warn { color: var(--warn-ink); }
.kind-tag.ok, .kind-tag.live { color: var(--tint-ink); }
.kind-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1px; }
.wk-item.open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sep); }
.wk-item.open:active { background: rgba(var(--fill-rgb), .06); }
.wk-item:not(.open) { background: rgba(var(--fill-rgb), .11); box-shadow: inset 0 0 0 1.5px rgba(var(--fill-rgb), .08); }
.wk-item:not(.open):active { background: rgba(var(--fill-rgb), .17); }
.wk-item.hc:not(.open), .row.hc, .admin-row.hc { background: color-mix(in srgb, var(--hc) 14%, var(--card)); }
.wk-item.hc:not(.open) { box-shadow: inset 0 0 0 1.5px var(--sep); }
.group:has(> .row.hc, > .row.open) { background: transparent; overflow: visible; display: flex; flex-direction: column; gap: 8px; }
.group:has(> .row.hc, > .row.open) > .row::before { display: none; }
.group:has(> .row.hc, > .row.open) > .row.open { background: var(--card); border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--sep); }
.mv { padding: 8px 12px 16px; }
.mv .cal-head { padding: 6px 2px 12px; font-size: 18px; }
.mv .cal-nav { background: rgba(var(--fill-rgb), .07); }
.mv .cal-nav:disabled { opacity: .25; cursor: default; }
.mv .cal-head strong { flex: 1; }
.mv-right { display: flex; align-items: center; gap: 6px; }
.mv-today-btn { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--tint-soft); color: var(--tint-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mv-today-btn:disabled { opacity: .4; cursor: default; }
.mv-grid { display: grid; grid-template-columns: 24px repeat(7, 1fr); gap: 4px; }
.mv-wn { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.mv-wd { display: flex; align-items: center; justify-content: center; height: 24px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }
.mv-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 50px; padding: 4px 0 4px; border: 0; border-radius: 12px; background: rgba(var(--fill-rgb), .045); font: inherit; color: var(--ink); cursor: pointer; transition: background .12s; }
.mv-day b { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mv-day.has b { font-weight: 800; }
.mv-day:not(.has) { background: rgba(var(--fill-rgb), .025); }
.mv-day:not(.has) b { font-weight: 500; color: var(--ink-3); }
.mv-day:not(.has).today b { color: var(--tint-ink); }
.mv-day.hc { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 17%, var(--card)), color-mix(in srgb, var(--c2) 17%, var(--card))); }
:root[data-theme="dark"] .mv-day.hc { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 14%, var(--card)), color-mix(in srgb, var(--c2) 14%, var(--card))); }
.mv-day:hover:not(:disabled) { filter: brightness(.97); }
.mv-day.out { visibility: hidden; }
.mv-day.far { opacity: .4; cursor: default; }
.mv-day.past { opacity: .65; }
.mv-day.past .mv-dot { filter: grayscale(.8); }
.mv-day.today b { box-shadow: inset 0 0 0 2px var(--tint); color: var(--tint-ink); }
.mv-day.on { box-shadow: inset 0 0 0 2px var(--tint); }
.mv-day.on b, .mv-day.on:not(.has).today b { background: var(--tint-btn); color: #fff; box-shadow: none; }
.mv-dots { display: flex; align-items: center; justify-content: center; gap: 3px; height: 9px; }
.mv-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--card); }
.mv-dot.open { background: var(--ink-3); }
.mv-dots small { font-size: 11px; font-weight: 700; line-height: 1; color: var(--ink-2); }
@media (max-width: 600px) {
  .mv { padding: 4px 8px 12px; }
  .mv .cal-head { padding: 2px 0 6px; font-size: 16px; }
  .mv .cal-nav { width: 32px; height: 32px; }
  .mv-grid { gap: 3px; }
  .mv-wd { height: 18px; }
  .mv-day { min-height: 40px; gap: 1px; padding: 3px 0; border-radius: 10px; }
  .mv-day b { width: 24px; height: 24px; font-size: 14px; }
  .mv-dots { height: 8px; }
  .mv-dot { width: 8px; height: 8px; }
  .mv-title { margin-top: 10px; }
}
.mv-title { margin: 16px 4px 8px; font-size: 14px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ink); }
.mv-items { padding: 0 2px; }
.day-card { margin-top: 14px; padding: 2px 10px 10px; border-radius: var(--r-card); background: var(--card); }
.day-card > .group-title { margin: 14px 4px 8px; }
.day-card > .group + .group-title { margin-top: 20px; }
.day-card > .group-title { font-size: 14px; font-weight: 700; letter-spacing: .4px; color: var(--ink); }
.group-title.week-title { margin-top: 30px; font-size: 15px; font-weight: 700; letter-spacing: .4px; color: var(--ink); }
.day-card > .group-title.today { color: var(--tint-ink); }
.day-card .row.open { background: transparent; }
.wk-item.hc.held:not(.open), .row.hc.held { background: rgba(var(--fill-rgb), .06); box-shadow: inset 0 0 0 1.5px var(--sep); }
:root[data-theme="dark"] .wk-item.hc:not(.open):not(.held), :root[data-theme="dark"] .row.hc:not(.held), :root[data-theme="dark"] .admin-row.hc:not(.held) { background: color-mix(in srgb, var(--hc) 9%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 28%, transparent); }
:root[data-theme="dark"] .wk-item.hc:not(.open):not(.held):active { background: color-mix(in srgb, var(--hc) 15%, var(--card)); }
.row.hc { margin: 0; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--sep); }
.row.hc::before { display: none; }
.group:has(> .row.hc, > .row.open) > .row:not(.hc):not(.open) { background: var(--card); border-radius: 14px; min-height: 48px; }
.day-card .group > .row:not(.hc):not(.open) { background: rgba(var(--fill-rgb), .045); }
.wk-item.open, .group:has(> .row.hc, > .row.open) > .row.open, .day-card .group > .row.open { background: rgba(var(--fill-rgb), .045); }
.wk-item.open:active { background: rgba(var(--fill-rgb), .09); }
.wk-item.hc:not(.open):active { background: color-mix(in srgb, var(--hc) 22%, var(--card)); }
.row.open { background: transparent; }
.wk-item.open.hc, .group:has(> .row.hc, > .row.open) > .row.open.hc, .day-card .group > .row.open.hc { background: color-mix(in srgb, var(--hc) 14%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--sep); }
.wk-item.open.hc:active { background: color-mix(in srgb, var(--hc) 22%, var(--card)); }
:root[data-theme="dark"] .wk-item.open.hc, :root[data-theme="dark"] .group:has(> .row.hc, > .row.open) > .row.open.hc, :root[data-theme="dark"] .day-card .group > .row.open.hc { background: color-mix(in srgb, var(--hc) 9%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 28%, transparent); }
.wk-item.open.hc.held, .group:has(> .row.hc, > .row.open) > .row.open.hc.held, .day-card .group > .row.open.hc.held { background: rgba(var(--fill-rgb), .06); box-shadow: inset 0 0 0 1.5px var(--sep); }
:root[data-theme="dark"] .wk-item.open.hc.held, :root[data-theme="dark"] .group:has(> .row.hc, > .row.open) > .row.open.hc.held, :root[data-theme="dark"] .day-card .group > .row.open.hc.held { background: rgba(var(--fill-rgb), .06); box-shadow: inset 0 0 0 1.5px var(--sep); }
.numtile.n.open { border-radius: 50%; background: rgba(var(--fill-rgb), .06); box-shadow: inset 0 0 0 2px var(--bar); }
.wk-item .when { width: auto; min-width: 48px; }
.wk-main { flex: 1; min-width: 96px; display: flex; flex-direction: column; }
.wk-main .t { font-size: 16px; font-weight: 600; }
.wk-main .s { font-size: 13px; color: var(--ink-2); }
.wk-main .s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.wk-main .t { overflow-wrap: break-word; }
.row .grow .s .tr-part, .wk-main .s .tr-part { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
@media (max-width: 520px) {
  .row .grow .s .tr-dot, .wk-main .s .tr-dot { display: none; }
  .row .grow .s .tr-part, .wk-main .s .tr-part { display: block; }
  .row.train.has-tick, .wk-item.has-tick { position: relative; }
  .has-tick .chips { display: contents; }
  .has-tick .chip.tick { position: absolute; top: 10px; right: 12px; }
  .has-tick .t { padding-right: 28px; }
  .row.train.has-club-mark, .wk-item.has-club-mark { position: relative; }
  .has-club-mark .chips { display: contents; }
  .has-club-mark .club-mark { position: absolute; top: 10px; right: 12px; }
  .has-club-mark .t { padding-right: 28px; }
}
.chip.tick { flex: none; box-sizing: border-box; width: 20px; height: 20px; padding: 0; background: transparent; color: var(--tint-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 0; }
.chip.tick::before { content: ""; display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.wk-item .chip { flex: none; white-space: nowrap; }
.wk-item .actions { flex: none; display: flex; }
.wk-item .menu-btn { width: 36px; height: 36px; }
.filterbar.inline { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; }
.filterbar.inline .action-menu { display: inline-flex; }
.filterbar.inline .filter-btn { width: auto; }
.filterbar.inline .seg { margin-bottom: 0; margin-left: auto; }
@media (max-width: 560px) { .filterbar.inline .seg { flex: 1 1 100%; margin-left: 0; } }
.filterbar.inline .seg a { padding: 0 16px; }
.row.train .chev { display: none; }
.page.fp .row.train .chev { display: block; }
.row.dim, .wk-item.dim, .admin-row.dim { opacity: .55; }
.wk-item.cancelled .t { text-decoration: line-through; color: var(--ink-3); }
.bandcard {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; min-height: 164px; padding: 20px;
  border-radius: var(--r-lg); overflow: hidden; transition: transform .12s;
  box-shadow: 0 10px 28px rgba(17, 17, 17, .14), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.bandcard:active { transform: scale(.985); }
.bandcard .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bandcard .kicker { font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.bandcard .avail { padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bandcard.lt .avail { background: rgba(255, 255, 255, .55); }
.bandcard .name { font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: .2px; }

/* ---- Aktivt lån -------------------------------------------------------- */
.loan { display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: var(--r-lg); box-shadow: 0 10px 28px rgba(17, 17, 17, .14), inset 0 1px 0 rgba(255, 255, 255, .55); }
.loan .kicker { font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.loan .big { font-size: 112px; line-height: 1; font-weight: 800; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.loan .meta { font-size: 17px; font-weight: 600; }

.fp-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.fp-band { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px 10px 18px; border-radius: 18px; box-shadow: 0 6px 16px rgba(17, 17, 17, .12), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .15s; }
.fp-band:active { transform: scale(.985); }
.fp-band .big { min-width: 34px; font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.fp-band .grow { display: flex; flex-direction: column; gap: 1px; }
.fp-band .kicker { font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.fp-band .meta { font-size: 13px; font-weight: 600; opacity: .9; }
.fp-next { display: block; padding: 16px 16px 12px; background: var(--tri-stripe) top / 100% 5px no-repeat, var(--card); border-radius: var(--r-card); box-shadow: 0 1px 3px rgba(17, 17, 17, .06); }
.fp-next.trainer { background: var(--tri-stripe) top / 100% 5px no-repeat, linear-gradient(var(--tint-soft), var(--tint-soft)), var(--card); }
.fp-next.trainer .time { color: var(--tint-ink); }
.fp-stack { display: flex; flex-direction: column; gap: 10px; }
.fp-next.hc:not(.trainer) { background: var(--tri-stripe) top / 100% 5px no-repeat, linear-gradient(color-mix(in srgb, var(--hc) 14%, transparent), color-mix(in srgb, var(--hc) 14%, transparent)), var(--card); }
:root[data-theme="dark"] .fp-next.hc:not(.trainer) { background: var(--tri-stripe) top / 100% 5px no-repeat, linear-gradient(color-mix(in srgb, var(--hc) 9%, transparent), color-mix(in srgb, var(--hc) 9%, transparent)), var(--card); }
.fp-next:active { background-color: rgba(var(--fill-rgb), .04); }
.fp-next .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fp-next .kicker { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--tint-ink); }
.fp-next .main { display: flex; align-items: stretch; gap: 14px; }
.fp-next .time { font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.fp-next .name { font-size: 20px; line-height: 1.15; font-weight: 700; }
.fp-next .meta { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.fp-next .count { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: var(--tint-soft); color: var(--tint-ink); font-size: 13px; font-weight: 700; }
.fp-next + .group-title, .fp-bands + .group-title, .fp-next ~ .group-title { margin-top: 20px; }
.fp-next + .group { margin-top: 12px; }
.fp-cancelled { margin-bottom: 12px; }
.fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 4px 8px; }
.fp-head .group-title { margin: 0; }
.fp-all { flex: none; font-size: 14px; font-weight: 600; color: var(--tint-ink); }
.fp-next .top .r { display: flex; align-items: center; gap: 6px; }
.group + .fp-next { margin-top: 14px; }
.fp-sub { margin: 10px 4px 6px; font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-3); }

/* ---- Log ind ----------------------------------------------------------- */
.scroll.auth { display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 12px) max(24px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
.authcard {
  width: 100%; max-width: 440px; margin: auto; display: flex; flex-direction: column; gap: 22px; padding: 34px 28px 28px;
  /* kort med de tre sportsgrene som kant øverst (svøm, cykel, løb) */
  background: var(--tri-stripe) top / 100% 6px no-repeat, var(--card); border: 1px solid var(--sep); border-radius: var(--r-lg); box-shadow: var(--shadow-glass);
}
.authcard .brand { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.authcard .brand img { height: 132px; width: auto; }
.link { color: var(--tint); font-weight: 600; }
.authcard .brand h1 { font-size: 30px; font-weight: 700; letter-spacing: .3px; }
.authcard .brand p { font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.auth-side, .auth-main { display: contents; }
@media (max-width: 899px) and (max-height: 940px) {
  .authcard { gap: 16px; padding: 26px 24px 20px; }
  .authcard .brand { gap: 10px; }
  .authcard .brand img { height: 96px; }
  .authcard .brand h1 { font-size: 26px; }
  .authcard .input { min-height: 52px; }
  .authcard .btn.lg { min-height: 52px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .authcard { gap: 12px; padding: 22px 20px 16px; }
  .authcard .brand img { height: 68px; }
  .authcard .brand h1 { font-size: 22px; }
}
.field label { display: block; margin: 0 0 8px 4px; font-size: 15px; font-weight: 600; }
.input { width: 100%; min-height: 56px; padding: 0 18px; border-radius: 16px; border: 1.5px solid var(--sep); background: var(--surface); font-size: 17px; }
.input:focus { border-color: var(--tint); }
textarea.input { min-height: 180px; padding: 14px 18px; font-family: inherit; line-height: 1.4; resize: none; display: block; }
.input[type="search"] { -webkit-appearance: none; appearance: none; }
.input[type="search"]::-webkit-search-decoration, .input[type="search"]::-webkit-search-cancel-button, .input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; display: none; }
.otp { position: relative; display: flex; gap: 10px; }
.otp-real { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; cursor: text; }
.otp-real:focus-visible { outline: none; }
.otp-real { -webkit-appearance: none; appearance: none; }
.otp-real::-webkit-search-decoration, .otp-real::-webkit-search-cancel-button, .otp-real::-webkit-search-results-button { -webkit-appearance: none; display: none; }
.otp-cell { flex: 1; min-width: 0; height: 66px; display: flex; align-items: center; justify-content: center; position: relative; font-size: 28px; font-weight: 700; border-radius: 16px; border: 1.5px solid var(--sep); background: var(--surface); }
.otp-cell.filled { border-color: var(--ink); }
.otp-cell.on { border-color: var(--tint); }
.otp-cell.on:not(.filled)::after { content: ""; width: 2px; height: 32px; border-radius: 1px; background: var(--tint); animation: otp-blink 1s steps(1) infinite; }
@keyframes otp-blink { 50% { opacity: 0; } }
.backlink { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--tint); font-size: 17px; font-weight: 500; }
.backlink .ico { width: 22px; height: 22px; stroke-width: 2.4; }

/* ---- iOS-kontakt ------------------------------------------------------- */
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: rgba(120, 120, 128, .32); transition: background .2s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch input:checked + i { background: var(--tint); }
.switch input:disabled { cursor: default; }
.switch input:disabled + i { opacity: .4; }
.switch input:checked + i::after { transform: translateX(20px); }

/* ---- Bundark (sheet) --------------------------------------------------- */
.scrim { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .32); }
.sheet {
  position: absolute; z-index: 40; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  padding: 10px 20px 20px; border-radius: 36px; background: var(--sheet-bg);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid var(--glass-edge); box-shadow: 0 -6px 40px rgba(17, 17, 17, .2);
}
.grabber { width: 38px; height: 5px; border-radius: 3px; background: rgba(var(--fill-rgb), .3); margin: 0 auto 14px; }
.sheet h2 { font-size: 22px; line-height: 1.2; font-weight: 700; margin-top: 10px; }
.sheet .sub { font-size: 16px; margin-top: 4px; }
.numgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.num {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px;
  border-radius: 22px; background: var(--surface); border: 2px solid transparent; font-size: 40px; font-weight: 700; line-height: 1; transition: transform .12s;
}
a.num:active { transform: scale(.96); }
.num small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.num.sel { border-color: var(--tint); background: var(--tint-bg); color: var(--tint-ink); }
.num.sel small { color: var(--tint-ink); }
.num.out { background: rgba(var(--fill-rgb), .08); color: var(--ink-3); }
.num .tick { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-btn); display: flex; align-items: center; justify-content: center; }
.num .tick .ico { width: 14px; height: 14px; stroke: #fff; stroke-width: 3.4; }

/* ---- Bestyrelse -------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { --c: var(--swim); background: linear-gradient(var(--c), var(--c)) top / 100% 4px no-repeat, var(--card); border-radius: 20px; padding: 20px 16px 16px; }
.stat:nth-child(2) { --c: var(--bike); }   /* én farve pr. tal, i triatlonrækkefølge: svøm (blå), cykel (gul), løb (rød) */
.stat:nth-child(3) { --c: var(--run); }
.stat.c1 { --c: var(--swim); }
.stat .n { font-size: 34px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { margin-top: 6px; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--ink-2); }
.stat.hot .n { color: var(--danger-ink); }
.side { display: block; }
.stat .d { margin-top: 6px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.stat .d.up { color: var(--tint-ink); }
.stat .d.down { color: var(--danger-ink); }
.stat .sub { margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.stats + .stats { margin-top: 12px; }
.group + .stats, .stats + .group, .group + .hbars { margin-top: 14px; }
.usage-box > .group + .group { margin-top: 14px; }
.group-title .info-btn, .field label .info-btn { margin-top: -4px; margin-bottom: -4px; }
.hbars { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 20px; background: var(--card); }
.hb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hb-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 600; }
.hb-label span:last-child { overflow-wrap: anywhere; }
.hb-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.hb-val { flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-track { height: 10px; margin-top: 6px; border-radius: 5px; background: rgba(var(--fill-rgb), .1); overflow: hidden; }
.hb-fill { height: 100%; min-width: 2px; border-radius: 5px; background: var(--swim); }
.hb-fill.zero { min-width: 0; }
.hb-sub { margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.hb-sub.linkbtn { display: block; font: inherit; font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--tint); text-align: left; }
.hbars .none { margin: 0; font-size: 14px; color: var(--ink-2); }
.seg.tight a { flex: 1 1 auto; padding: 0 10px; font-size: 14px; }
.seg.usage-tabs { margin-top: 4px; overflow: hidden; }
.seg.usage-tabs a { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 13.5px; }
.pnote { margin: 12px 4px 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); text-align: left; }
.chartcard { padding: 16px 14px 14px; border-radius: 20px; background: var(--card); }
.chart-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 36px; margin: 0 2px 12px; }
.chart-when { font-size: 15px; font-weight: 700; }
.chart-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart-nums .dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--swim); }
.chart-nums .dot.b { background: var(--bike); }
.chart-wrap { display: flex; gap: 8px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; flex: none; min-width: 20px; height: 130px; font-size: 11px; line-height: 1; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.chart-x { display: flex; justify-content: space-between; margin: 6px 0 0 28px; font-size: 11px; color: var(--ink-3); }
.chart { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 2px; height: 130px; touch-action: pan-y; cursor: pointer; outline-offset: 4px;
  background: linear-gradient(var(--sep), var(--sep)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--sep), var(--sep)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--sep), var(--sep)) 0 100% / 100% 1px no-repeat; }
.chart .col { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; gap: 1px; opacity: .5; border-radius: 3px; }
.chart .col.on { opacity: 1; background: rgba(var(--fill-rgb), .08); }
.chart .bar { flex: 1 1 0; min-width: 1px; border-radius: 2px 2px 0 0; background: var(--swim); }
.chart .bar.b { background: var(--bike); }
.usage-people > .group-title:first-child { margin-top: 4px; }
.usage-people .group + .group-title { margin-top: 22px; }
.heatcard { padding: 14px 12px; border-radius: 20px; background: var(--card); }
.heat { display: grid; gap: 3px; align-items: center; font-size: 11px; color: var(--ink-3); }
.heat .hh { text-align: center; font-variant-numeric: tabular-nums; }
.heat .hl { padding-right: 4px; font-weight: 600; }
.heat .hc { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 6px; background: rgba(var(--fill-rgb), .06); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.heat .hc.hot { color: #fff; }
.stat.tap { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stat.tap:active { filter: brightness(.96); }
.stat .go { position: absolute; top: 16px; right: 10px; display: flex; color: var(--ink-3); }
.stat .go .chev { width: 14px; height: 14px; }
.legend { display: flex; gap: 18px; margin: 10px 4px 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.legend .dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--swim); }
.legend .dot.b { background: var(--bike); }

.thead { display: none; }
.admin-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; }
.admin-row .who { flex: 1; min-width: 0; }
.who .t, .who .s { display: block; }
.admin-row .hide-m { display: none; }
/* Rækkens menu står yderst på første linje, også på mobil */
.admin-row.clickable { cursor: pointer; transition: background .12s; }
.admin-row.clickable:hover { background: rgba(var(--fill-rgb), .04); }
.admin-row.clickable:focus-visible { outline-offset: -3px; border-radius: 16px; }
.admin-row .actions { display: flex; align-items: center; justify-content: flex-end; }
.only-m { display: inline; }
.tnum { font-variant-numeric: tabular-nums; font-size: 15px; }
.tnum.hot { font-weight: 700; color: var(--danger-ink); }

/* ---- Tablet ------------------------------------------------------------ */
@media (min-width: 700px) {
  .seg.fit { display: inline-flex; max-width: 100%; }
  .seg.fit a { padding: 0 24px; }
  .band-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .band-grid > .bandcard { height: auto; min-height: 202px; }
  .sub { font-size: 18px; }
}

/* ---- Desktop: tab-bar bliver til glas-sidebar -------------------------- */
@media (min-width: 900px) {
  .titlebar { display: flex; align-items: flex-end; row-gap: 0; }
  .titlebar .m-brand { display: none; }
  .titlebar .tb-title { grid-column: auto; grid-row: auto; }
  .titlebar .tb-title.has-wx { flex: 1; min-width: 0; }
  .tb-wx { right: 12px; }
  .desk-only { display: flex !important; }
  .mob-only { display: none !important; }
  .tabbar {
    top: calc(16px + env(safe-area-inset-top, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); right: auto; width: 248px; height: auto;
    flex-direction: column; justify-content: flex-start; gap: 4px; padding: 14px; border-radius: 30px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar > .action-menu.user-menu:has(.tab-user), .tabbar > a.tab-user { position: sticky; bottom: 0; z-index: 1; border-radius: 16px; background: var(--glass-solid); }
  .tabbar > .action-menu.user-menu:has(.tab-user)::before, .tabbar > a.tab-user::before { content: ""; position: absolute; z-index: -1; left: -14px; right: -14px; top: -28px; bottom: -14px; background: linear-gradient(var(--glass-solid), var(--glass-solid)) 0 100% / 100% calc(100% - 28px) no-repeat, linear-gradient(to bottom, transparent, var(--glass-solid) 28px); pointer-events: none; }
  .tab-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
  .tab-brand img { height: 58px; width: auto; }
  .tab-brand b { font-size: 19px; line-height: 1.1; font-weight: 700; }
  .tab { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; height: 46px; padding: 0 14px; font-size: 16px; }
  .tab .ico { width: 24px; height: 24px; }
  .tabbar > .action-menu.side-menu { display: flex !important; width: 100%; flex: none; }
  .tab-group { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
  .tab-group .chev { margin-left: auto; width: 18px; height: 18px; transform: rotate(-90deg); color: var(--ink-3); }
  .tab-group .nbadge { margin-left: 4px; }
  .tab-section { margin: 16px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }
  .tab-spacer { flex: 1; }
  .tab-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; font-size: 15px; font-weight: 600; color: var(--ink); transition: background .12s; }
  .action-menu.user-menu:has(.tab-user) { display: flex; width: 100%; }
  button.tab-user { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
  .tab-user:hover { background: rgba(var(--fill-rgb), .07); }
  .tab-user:active { background: rgba(var(--fill-rgb), .12); }
  .tab-user[aria-current="page"] { background: rgba(var(--fill-rgb), .09); }
  .scroll { padding: calc(24px + env(safe-area-inset-top, 0px)) max(32px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) calc(280px + max(16px, env(safe-area-inset-left, 0px))); }
  .scroll.auth { display: flex; flex-direction: column; padding: calc(32px + env(safe-area-inset-top, 0px)) max(32px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(32px, env(safe-area-inset-left, 0px)); }
  .authcard { margin: auto; }
  .authcard:has(> .auth-main) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 56px; max-width: 900px; padding: 44px 48px 32px; }
  .authcard:has(> .auth-main) > .banner, .authcard:has(> .auth-main) > .app-footer { grid-column: 1 / -1; }
  .auth-side, .auth-main { display: flex; flex-direction: column; gap: 22px; }
  .auth-side { align-items: center; text-align: center; }
  .auth-side .backlink { align-self: flex-start; }
  .largetitle { font-size: 38px; }
  .page { max-width: 760px; margin-left: 0; }
  .page.wide { max-width: 760px; }
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 440px; padding-bottom: 20px; transform: translate(-50%, -50%); }

  .thead, .admin-row { display: grid; grid-template-columns: 46px minmax(0, 1.3fr) 120px 100px 140px 44px; gap: 14px; align-items: center; }
  .thead { padding: 14px 16px 10px; border-bottom: 1px solid var(--sep); font-size: 11.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-3); }
  .admin-row .hide-m { display: block; }
  .thead.annlist, .admin-row.annlist { grid-template-columns: 22px 38px minmax(0, 1.4fr) minmax(0, 1fr) 112px 44px; }
  .thead.hold, .admin-row.hold { grid-template-columns: 46px minmax(0, 1.15fr) minmax(0, 1fr) 112px 104px 44px; }
  .only-m { display: none; }
}

/* ---- Android og ældre browsere: glas uden backdrop-filter ------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
  .sheet { background: var(--sheet-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .sheet { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

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

/* ---- Hold og booking --------------------------------------------------- */
.when { width: 70px; flex: none; display: flex; flex-direction: column; }
.when b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.when small { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.row.cancelled .t { text-decoration: line-through; color: var(--ink-3); }
.numtile.n { background: rgba(var(--fill-rgb), .1); color: var(--ink); }
.facts { background: var(--surface); border-radius: 18px; margin: 16px 0; }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; font-size: 16px; }
.facts div + div { border-top: 1px solid var(--sep); }
.facts span { color: var(--ink-2); }
.facts b { font-weight: 600; text-align: right; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.sh-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.sh-bar .btn { flex: none; }
.admin-row .trainer { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.admin-row .seats b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-row .seats small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.sheet .btn { margin-top: 4px; }

/* ---- Besked, banner og formularer i appen -------------------------------- */
.toast {
  position: absolute; z-index: 60; left: 50%; transform: translateX(-50%);
  top: calc(12px + env(safe-area-inset-top, 0px)); max-width: calc(100% - 40px);
  padding: 12px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; text-align: center;
  background: var(--toast-bg); color: #fff; box-shadow: 0 8px 24px rgba(17, 17, 17, .25);
}
.banner { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin: 6px 0 16px; border-radius: var(--r-card); background: var(--banner-bg); color: var(--ink); }
.banner .t { font-size: 17px; font-weight: 700; }
.banner .s { color: var(--banner-ink); }
.banner .btn { align-self: flex-start; }
.page.maint { margin-bottom: 0; }
.banner.hot { background: var(--danger-bg); }
.banner.hot .t { color: var(--danger-ink); }
.banner.ok { background: var(--tint-bg); }
.banner.ok .t { color: var(--tint); }
.banner.ok .s { color: var(--ink-2); }
.banner.hot .s { color: var(--danger-ink); }
.viewas-wrap { position: sticky; top: 0; z-index: 30; padding-top: 8px; padding-bottom: 0; }
.viewas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 16px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; font-weight: 600; box-shadow: 0 2px 10px rgba(17, 17, 17, .12); }
.viewas .btn { flex: none; }
select.input { appearance: auto; }
.sec { display: flex; flex-direction: column; gap: 14px; }
.sec > .group-title { margin: 10px 4px -8px; }
.sec > .backbtn + .group-title { margin-top: 2px; }
.sec .stack { margin-top: 4px; }
.sec .note { margin-top: 0; }
.note.left { text-align: left; }
.group.form { padding: 18px 16px; }
.group.form .fields > .field { margin-top: 14px; }
.group.form .field + .field, .group.form .field + .fields { margin-top: 14px; }
.sec > .backbtn { align-self: flex-start; margin: 0; }
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); vertical-align: middle; flex: none; }
.info-btn .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--tint); }
.info-pop { position: fixed; z-index: 900; padding: 12px 14px; border-radius: 14px; background: var(--card); color: var(--ink); border: 1px solid var(--sep); box-shadow: 0 8px 30px rgba(17, 17, 17, .22); font-size: 14px; line-height: 1.45; }
.sel { position: relative; }
.sel-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.sel-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; color: var(--ink); font-family: inherit; }
.sel-btn::after { content: ''; width: 9px; height: 9px; margin-right: 2px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-3px) rotate(45deg); flex: none; }
.sel-btn[aria-expanded="true"] { border-color: var(--tint); }
.sel-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--pop-bg); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-glass); max-height: 260px; overflow-y: auto; }
.sel-list li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 10px; font-size: 17px; cursor: pointer; }
.sel-list li:hover { background: var(--tint-btn); color: #fff; }
.sel-list li .ck { width: 18px; text-align: center; font-weight: 700; }
.sel-list li.on:not(:hover) .ck { color: var(--tint); }
.field + .field { margin-top: 14px; }
#email-form .field + .field { margin-top: 0; }
.field .hint { margin: 6px 4px 0; font-size: 13px; color: var(--ink-2); }
.field.missing > label { color: var(--danger-ink); }
.field.missing .input, .field.missing .select-btn { box-shadow: inset 0 0 0 1.5px var(--danger-ink); }
.field .miss { margin: 6px 4px 0; font-size: 13px; color: var(--danger-ink); }
.sheet .field { margin-top: 14px; }
.field-row { display: grid; gap: 0 12px; }
.field-row.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-row > .field, .field-row > .field + .field, .group.form .field-row > .field + .field, .sheet .field-row > .field { margin-top: 0; }
.sheet .field-row, .field-row + .field-row { margin-top: 14px; }
@media (max-width: 520px) {
  .field-row.stack-sm { grid-template-columns: minmax(0, 1fr); }
  .field-row.stack-sm > .field + .field, .group.form .field-row.stack-sm > .field + .field { margin-top: 14px; }
}
.field-row .field label { margin-left: 2px; }
.field-row .input, .field-row .select-btn { min-width: 0; padding-left: 12px; padding-right: 10px; }
.field-row .select-btn { gap: 6px; }
.field-row .select-btn .ico { width: 16px; height: 16px; }
.hint.tight { margin: 8px 4px 0; font-size: 13px; color: var(--ink-2); }
.tr-wrap { margin: 14px 0 6px; border-radius: 14px; background: rgba(var(--fill-rgb), .06); }
.tr-wrap > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.tr-wrap > summary::-webkit-details-marker { display: none; }
.tr-wrap > summary .t { font-size: 16px; }
.tr-wrap > summary .s { font-size: 13px; }
.tr-wrap > summary .chev { transition: transform .2s; }
.tr-wrap[open] > summary .chev { transform: rotate(90deg); }
.tr-box { margin: 0; padding: 0 14px 6px; }
.tr-box + .tr-box { padding-top: 10px; border-top: 1px solid var(--sep); }
.tr-box .input { background: var(--card); }
.sheet .err, .err { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--danger-ink); text-align: center; }
.sheet .stack .btn + .btn { margin-top: 0; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.empty { padding: 28px 16px; text-align: center; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.sheet-list { max-height: 46vh; overflow-y: auto; margin: 14px -4px 4px; border-radius: 18px; background: var(--surface); }
.sheet-list .row { min-height: 56px; }
.people-row { min-height: 60px; gap: 12px; }
.people-row .s { font-size: 13px; color: var(--ink-3); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--tint); font-weight: 600; cursor: pointer; }
.linkbtn[disabled] { color: var(--ink-3); cursor: default; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.kv .s { text-align: right; }
.kv .t { white-space: nowrap; }
.sheet { max-height: calc(100% - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.stat a { color: inherit; }
@media (min-width: 900px) { .sheet.wide { width: 520px; } }
.sheet.inbox-sheet { height: calc(100% - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.sheet .legal { margin-top: 6px; padding-bottom: 8px; }
.sheet .legal h2:first-child { margin-top: 12px; }

/* hidden-attributten skal vinde over klassernes display */
.app [hidden], [hidden] { display: none !important; }

/* ---- Skabets QR-kode: på skærmen og som plakat til print ---------------- */
.qrbox { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px; }
.qrbox svg { max-width: 100%; border-radius: 8px; background: #fff; }
.qrbox .url { max-width: 100%; font-size: 12px; color: var(--ink-3); word-break: break-all; text-align: center; }
.poster { display: none; }
@media print {
  body * { visibility: hidden; }
  .poster, .poster * { visibility: visible; }
  .poster { display: flex; position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 40px; background: #fff; color: #000; text-align: center; font-family: var(--font); }
  .poster img { height: 110px; width: auto; }
  .poster h1 { margin: 0; font-size: 40px; line-height: 1.15; }
  .poster svg { width: 62vmin; height: 62vmin; }
  .poster p { margin: 0; font-size: 20px; line-height: 1.4; max-width: 560px; }
}

/* ---- Kamera i appen (scan QR-koden på skabet) --------------------------- */
.scanbox { position: relative; width: 100%; aspect-ratio: 1; max-height: 50vh; margin: 14px auto 10px; border-radius: 24px; overflow: hidden; background: #111; }
.scanbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanframe { position: absolute; inset: 15%; border: 3px solid rgba(255, 255, 255, .92); border-radius: 22px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .3); pointer-events: none; }
.scanstatus { min-height: 24px; margin: 0; text-align: center; font-size: 16px; color: var(--ink-2); }
.scanstatus.bad { color: var(--danger-ink); font-weight: 600; }
.scanstatus.good { color: var(--tint); font-weight: 600; }
.btn.danger { background: var(--danger-soft); color: var(--danger-ink); }

/* ---- Detaljeark: overskrift med brik, lukkeknap og indrykket liste (som iOS' Indstillinger) ---- */
.sh-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; padding-right: 44px; }
.sh-head .numtile { width: 56px; height: 56px; border-radius: 17px; font-size: 26px; }
.sh-title { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.3px; }
.sh-sub { margin-top: 3px; font-size: 15px; color: var(--ink-2); }
.sh-x { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(120, 120, 128, .16); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sh-x:active { background: rgba(120, 120, 128, .3); }
.sh-x .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.sh-list { background: var(--surface); border-radius: 20px; overflow: hidden; }
.sh-list + .sh-list { margin-top: 16px; }
.sh-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink); text-align: left; cursor: pointer; }
.sh-row + .sh-row::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--sep); }
.sh-row:active { background: rgba(var(--fill-rgb), .1); }
.sh-row:disabled { opacity: .5; }
.sh-row .t { flex: 1; }
.sh-row.destructive { color: #FF3B30; }
.sh-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--tint-btn); display: flex; align-items: center; justify-content: center; flex: none; }
.sh-ic .ico { width: 19px; height: 19px; stroke: #fff; stroke-width: 2; }
.sh-ic.gray { background: #8E8E93; }
.sh-ic.red { background: #FF3B30; }
.sh-about { margin: 4px 0 14px; padding: 16px 18px; border-radius: 16px; background: var(--surface); }
.sh-about h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.sh-about p { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.tb-title.has-wx { position: relative; }
.tb-wx { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.tb-wx .wx-big { font-size: 28px; line-height: 1; }
.tb-wx .wx-col { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.tb-wx b { font-size: 20px; font-weight: 700; }
.tb-wx small { font-size: 11px; color: var(--ink-2); }
.chip.wx { gap: 4px; cursor: pointer; font-variant-numeric: tabular-nums; }
.chip.wx .wx-ic { font-size: 14px; line-height: 1; }
.sh-weather { margin: 4px 0 14px; padding: 16px 18px; border-radius: 16px; background: var(--surface); }
.sh-weather .wx-top { display: flex; align-items: center; gap: 14px; }
.sh-weather .wx-big { font-size: 40px; line-height: 1; }
.sh-weather .wx-temp { font-size: 28px; font-weight: 700; line-height: 1.1; }
.sh-weather .wx-place { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.sh-weather .wx-text { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.sh-weather .wx-tip { margin: 6px 0 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.sh-weather .wx-sun { display: flex; gap: 28px; margin-top: 12px; }
.sh-weather .wx-sun span { display: flex; flex-direction: column; }
.sh-weather .wx-sun small { font-size: 12px; color: var(--ink-2); }
.sh-weather .wx-sun b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sh-weather .wx-source { display: block; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.sh-about p.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.sh-slot:not(:empty) + .sh-about { margin-top: 16px; }
.sh-more { display: block; margin-top: 10px; font-size: 15px; }
.bandcard.locked { opacity: .5; filter: grayscale(.35); }
.sh-note { margin: 10px 6px 0; font-size: 13px; color: var(--ink-2); }
.row.calm { min-height: 64px; }
.calm-ic { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-ink); flex: none; }
.calm-ic.neutral { background: rgba(var(--fill-rgb), .1); color: var(--ink-2); }
.calm-ic.warn { background: var(--warn-bg); color: var(--warn-ink); }
.calm-ic .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.cap { margin-bottom: 14px; padding: 14px 16px 16px; border-radius: 18px; background: var(--card); }
.cap-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cap-title { font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-2); }
.cap-num { margin: 6px 0 10px; font-size: 15px; color: var(--ink-2); }
.cap-num b { font-size: 30px; line-height: 1; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.hb-fill.full { background: var(--run); }
.cap-sub { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.sh-cap.sh-cap-gap { margin-top: 22px; }
.sh-sec.who { margin: 20px 0 0; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.people.wide { grid-template-columns: 1fr; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--card); }
.person .pi { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--tint-soft); color: var(--tint-ink); font-size: 13px; font-weight: 700; }
.person .pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; }
.person.me { box-shadow: inset 0 0 0 1.5px var(--tint); }
.person.me .pi { background: var(--tint-btn); color: #fff; }
.person .you { flex: none; font-size: 12px; font-weight: 700; color: var(--tint-ink); }
.step-n { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--tint-soft); color: var(--tint-ink); font-size: 15px; font-weight: 700; }
.row-actions { display: flex; gap: 8px; flex: none; }
.sh-people { padding: 8px; border-radius: 16px; background: var(--card); }
.sh-people .people, .sh-people .people.wide { display: block; }
.sh-people .person { position: relative; min-height: 52px; background: transparent; }
.sh-people .person:not(:last-child)::after { content: ""; position: absolute; bottom: 0; left: 52px; right: 0; height: 1px; background: var(--sep); }
.sh-people .person.me { margin: 4px 0; }
.sh-people .person.me::after { display: none; }
.sh-empty { padding: 14px 16px; border-radius: 16px; background: var(--card); color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.sh-warn { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 0; padding: 13px 14px; border-radius: 16px; background: var(--warn-bg); color: var(--warn-ink); }
.sh-warn.ok { background: var(--ok-bg); color: var(--ok-ink); }
.sh-warn.info { background: var(--tint-bg); color: var(--tint-ink); }
.sh-warn.sh-error { background: var(--danger-bg); color: var(--danger-ink); margin-top: 12px; }
.sh-warn.sh-error span { margin-top: 0; font-weight: 600; }
.sh-warn + .btn { margin-top: 16px; }
.sh-warn + .sh-list, .sh-warn + .sh-info, .sh-warn + .sh-sec { margin-top: 16px; }
.sh-warn .ico { width: 22px; height: 22px; margin-top: 1px; flex: none; }
.sh-warn b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.sh-warn span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; }
.sh-warn a { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Knapper på sider fylder aldrig sidens bredde (iOS/macOS: kompakte knapper). Ark og login-kort har egne regler ---- */
.page .btn:not(.sm) { display: inline-flex; width: auto; min-width: 220px; max-width: 100%; min-height: 50px; padding: 0 30px; font-size: 17px; text-align: center; }
.page .stack { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.page .stack.loan-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin-top: 12px; gap: 10px; }
.loan-actions .btn { width: 100%; }
.sheet h2 { padding-right: 44px; font-size: 24px; letter-spacing: -.3px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sh-head .grow { min-width: 0; }
.sh-list + .sh-list, .sh-sec + .sh-list, .sh-info + .sh-list { margin-top: 16px; }
.sh-info { margin-bottom: 16px; }
.sh-row.static { min-height: 50px; cursor: default; font-size: 16px; }
.sh-row.static:active { background: transparent; }
.sh-row.static .t { color: var(--ink-2); }
.sh-row.static b { font-weight: 600; text-align: right; }
.sh-row.static::before { left: 16px !important; }
.sh-row.static.plain { min-height: 58px; font-size: 17px; }
.sh-row.static.plain .t { color: var(--ink); }
.sh-row.static.plain b { font-size: 16px; color: var(--ink-2); }
.sh-row.static .sh-ic + .t { flex: 1; }
.sh-sec .sh-row.static + .sh-row::before { left: 60px; }
.sheet .btn:not(.sm) { width: 100%; min-height: 50px; padding: 0 28px; font-size: 17px; }
.sheet > .btn:not(.sm) { margin-top: 18px; }
.sheet > .btn:not(.sm) + .btn:not(.sm) { margin-top: 10px; }
.sheet .stack { align-items: center; }
.sh-head .avatar { width: 56px; height: 56px; font-size: 24px; flex: none; }
.sh-row + .sh-row.static::before { left: 16px; }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.row .grow { min-width: 0; }
.row .grow .t, .row .grow .s { overflow-wrap: anywhere; }
.row-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---- Segmenteret kontrol i Liquid Glass: frostet kapsel, valgt segment er en lysere glaskapsel ---- */
.seg, .seg.glass {
  gap: 2px; padding: 4px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(120, 120, 128, .20), rgba(120, 120, 128, .13));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--hi-1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08), 0 1px 0 var(--hi-2);
}
.seg a { flex: 1 0 auto; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; text-align: center; transition: background .2s, box-shadow .2s; }
.seg a[aria-current="true"] {
  background: var(--seg-active); font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .13), 0 1px 2px rgba(0, 0, 0, .08), inset 0 1px 0 var(--hi-1);
  border: 1px solid var(--hi-1);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .seg, .seg.glass { background: rgba(120, 120, 128, .18); } }

/* Status med prik (Åben / Fuld / Aflyst, Ude / Over x t / Kritisk). Prikken er en mørkere udgave af pillens farve. */
.chip.status { gap: 7px; padding: 5px 12px 5px 10px; font-size: 13px; font-weight: 600; line-height: 1.3; background: rgba(var(--fill-rgb), .09); color: var(--ink-2); }
.chip.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip.status.ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip.status.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip.status.hot { background: var(--danger-bg); color: var(--danger-ink); }

/* Menu på rækker: hamburgerknap + liste (efter Budgetark) */
.action-menu { position: relative; display: inline-flex; }
/* Pull-down til filter (som Apples pop-up-knap): det valgte vises, pilen røber, at der er flere valg */
.filterbar { display: flex; gap: 10px; align-items: stretch; margin-bottom: 16px; }
.filterbar .field { flex: 1; min-width: 0; }
.filterbar .seg { flex: none; margin-bottom: 0; }
@media (max-width: 640px) {
  .filterbar { flex-direction: column; gap: 10px; }
  .filterbar .action-menu { display: block; }
  .filterbar .filter-btn { width: 100%; justify-content: space-between; }
}
.filter-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 56px; padding: 0 12px 0 18px; border: 1.5px solid var(--sep); border-radius: 16px; background: var(--surface); font: inherit; font-size: 17px; font-weight: 600; color: var(--tint); cursor: pointer; white-space: nowrap; flex: none; }
.filter-btn .ico { width: 18px; height: 18px; stroke-width: 2.6; transition: transform .2s; }
.action-menu.is-open .filter-btn .ico { transform: rotate(180deg); }
.filter-btn.sm { min-height: 40px; padding: 0 10px 0 14px; border-radius: 12px; font-size: 15px; }
.filter-btn.sm .ico { width: 16px; height: 16px; }
/* Overskrift med en pull-down yderst til højre */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin: 26px 0 8px; }
.section-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.filter-btn.sm > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-head .group-title { margin: 0 4px; }
.filter-btn:active { background: rgba(var(--fill-rgb), .07); }
/* Vælger i formularer: ser ud som et felt, åbner menuen */
.action-menu.select { display: flex; width: 100%; }
.select-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 56px; padding: 0 14px 0 18px; border: 1.5px solid var(--sep); border-radius: 16px; background: var(--surface); font: inherit; font-size: 17px; text-align: left; color: var(--ink); cursor: pointer; }
.select-btn .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn .ico { width: 18px; height: 18px; color: var(--ink-2); stroke-width: 2.6; transition: transform .2s; }
.action-menu.is-open .select-btn { border-color: var(--tint); }
.action-menu.is-open .select-btn .ico { transform: rotate(180deg); }
.picker .select-btn .ico { stroke-width: 2; transform: none !important; }
.picker .select-btn .v.ph { color: var(--ink-3); font-weight: 400; }
.picker-dd { padding: 10px 12px 12px; min-width: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 8px; font-size: 16px; }
.cal-nav { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.cal-nav:hover { background: rgba(var(--fill-rgb), .09); }
.cal-nav .ico { width: 20px; height: 20px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 38px); gap: 2px; }
.cal-wd { display: flex; align-items: center; justify-content: center; height: 28px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.cal-day { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.cal-day:hover:not(:disabled) { background: rgba(var(--fill-rgb), .09); }
.cal-day.out { color: var(--ink-3); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--tint); }
.cal-day.on { background: var(--tint-btn); color: #fff; font-weight: 700; box-shadow: none; }
.cal-day:disabled { opacity: .3; cursor: default; }
.cal-today { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 0; border-radius: 12px; background: var(--tint-soft); color: var(--tint-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cal-today:disabled { opacity: .4; cursor: default; }
.time-cols { display: flex; align-items: center; gap: 6px; }
.time-col { display: flex; flex-direction: column; gap: 2px; width: 68px; max-height: 232px; overflow-y: auto; scrollbar-width: none; }
.time-col::-webkit-scrollbar { display: none; }
.time-pad { flex: none; height: 96px; }
.time-sep { font-size: 20px; font-weight: 700; color: var(--ink-2); }
.time-opt { flex: none; height: 40px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.time-opt:hover { background: rgba(var(--fill-rgb), .09); }
.time-opt.on { background: var(--tint-btn); color: #fff; font-weight: 700; }
.row .action-menu.select { display: inline-flex; width: auto; flex: none; }
.row .select-btn { width: auto; min-height: 44px; }
.menu-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--sep); border-radius: 12px; background: var(--surface); cursor: pointer; transition: background .15s; flex: none; }
.menu-btn:hover, .action-menu.is-open .menu-btn { background: rgba(var(--fill-rgb), .07); }
.menu-btn span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transform-origin: center; transition: transform .2s, opacity .2s; }
.action-menu.is-open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.action-menu.is-open .menu-btn span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.action-menu.is-open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Rullebjælker: ingen i arkene (tåge i bunden viser, at der er mere); tynde og diskrete på sidens egen rulning, lister og menuer */
.app.sheet-open .scroll, .app.menu-open .scroll { overflow: hidden; }
.scrim { touch-action: none; }
.sheet, .sheet-list { overscroll-behavior: contain; }
.sheet, .scroll { scrollbar-width: none; -ms-overflow-style: none; }   /* ingen synlig rullebjælke på siden og i arkene */
.sheet::-webkit-scrollbar, .scroll::-webkit-scrollbar { display: none; }
.sheet.more-below > :last-child { position: relative; z-index: 1; }
.sheet.more-below::after { content: ""; position: sticky; bottom: -20px; display: block; height: 44px; margin: -24px -20px -20px; border-radius: 0 0 36px 36px; background: linear-gradient(rgba(var(--sheet-rgb), 0), rgba(var(--sheet-rgb), .96) 85%); pointer-events: none; }
.action-menu-dropdown, .sheet-list { scrollbar-width: thin; scrollbar-color: rgba(var(--fill-rgb), .28) transparent; }
.action-menu-dropdown::-webkit-scrollbar, .sheet-list::-webkit-scrollbar { width: 10px; }
.action-menu-dropdown::-webkit-scrollbar-track, .sheet-list::-webkit-scrollbar-track { background: transparent; }
.action-menu-dropdown::-webkit-scrollbar-thumb, .sheet-list::-webkit-scrollbar-thumb { background: rgba(var(--fill-rgb), .28); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
.action-menu-dropdown { overflow-y: auto; scrollbar-width: none; }
.action-menu-dropdown::-webkit-scrollbar { display: none; }
.action-menu-dropdown.more-below::after { content: ""; position: sticky; bottom: 0; display: block; height: 44px; margin-top: -44px; border-radius: 0 0 14px 14px; background: linear-gradient(transparent, var(--card) 85%); pointer-events: none; }
.action-menu-dropdown { position: fixed; z-index: 700; min-width: 210px; background: var(--tri-stripe) top / 100% 4px no-repeat, var(--card); border: 1px solid var(--sep); border-radius: 14px; padding-top: 4px; box-shadow: var(--shadow-glass); }   /* tre farver øverst: svøm, cykel, løb */
.action-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 16px; border: 0; background: none; font: inherit; font-size: 16px; text-align: left; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .12s; }
.action-menu-item .ico { width: 19px; height: 19px; color: var(--ink-2); }
.action-menu-item.current { color: var(--tint-ink); font-weight: 600; }
.action-menu-item.current .ico { color: var(--tint-ink); }
.action-menu-item:hover, .action-menu-item:focus-visible { background: rgba(var(--fill-rgb), .08); }
.action-menu-item:focus-visible { outline-offset: -3px; }
.action-menu-item.danger, .action-menu-item.danger .ico { color: var(--danger-ink); }
.action-menu-item .tick { width: 18px; height: 18px; margin-left: auto; color: var(--tint); stroke-width: 2.6; }
.action-menu-item.checked { font-weight: 600; }
.action-menu-item span { flex: 1; }
.action-menu-item span.avatar { flex: none; }
.action-menu-divider { height: 1px; margin: 4px 0; background: var(--sep); }
a.row:focus-visible, button.sh-row:focus-visible { outline-offset: -3px; border-radius: 16px; }
.sheet:focus { outline: none; }
.sh-sec { margin-bottom: 16px; }
.role-row { gap: 10px; }
.role-row .role-name { flex: 0 1 auto; min-width: 0; text-align: left; font-weight: 600; color: var(--ink); }
.role-row .role-name.warn { color: var(--tint-ink); }
.role-row .switch { margin-left: auto; }
.sh-sec .sh-list + .sh-list { margin-top: 0; }
.sh-cap { margin: 0 6px 8px; font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-2); }
.sh-row .two { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 8px 0; }
.sh-head.center { justify-content: center; text-align: center; padding: 0 44px; }
.about-logo { display: flex; justify-content: center; padding: 4px 0 16px; }
.about-logo img { height: 112px; width: auto; }
.group.ov-all { margin-bottom: 12px; }
.ov-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ov-line b { min-width: 76px; font-size: 15px; font-weight: 600; }
.sh-copy { margin: 22px 6px 4px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink); }
.sh-row.person-row { cursor: default; }
.sh-row.person-row:active { background: transparent; }
.sh-row .two b { font-weight: 600; }
.sh-row .two small { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.sh-row .chev { flex: none; }
.seg { position: relative; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }

/* Kode til at taste (scanning som sidste udvej) */
.codeinput { text-align: center; font-size: 32px; font-weight: 700; letter-spacing: 8px; font-variant-numeric: tabular-nums; min-height: 68px; }
.codebox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 16px 22px; border-top: .5px solid var(--sep); text-align: center; }
.codebox .cap { font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-2); }
.codebox .digits { font-size: 40px; font-weight: 700; letter-spacing: 8px; font-variant-numeric: tabular-nums; }
.codebox .s { max-width: 360px; font-size: 14px; color: var(--ink-2); }
@media print { .poster .poster-code b { display: block; margin-top: 8px; font-size: 56px; letter-spacing: 10px; } }

.helpbox { margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: var(--surface); font-size: 15px; line-height: 1.45; }
.helpbox p { margin: 0; }
.help-reason { margin-bottom: 10px !important; font-weight: 600; color: var(--danger-ink); }
.help-title { margin-bottom: 8px !important; font-weight: 700; font-size: 16px; }
.help-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.help-steps li::marker { font-weight: 700; color: var(--tint); }
.help-foot { margin-top: 10px !important; color: var(--ink-2); font-size: 14px; }

/* Hovedmenuen på desktop: de tre sportsgrene som farvet kant øverst (svøm, cykel, løb). Står sidst, så den ikke nulstilles af .glass. */
@media (min-width: 900px) {
  .tabbar { background-image: var(--tri-stripe); background-size: 100% 5px; background-repeat: no-repeat; background-position: top; }
}
.rot-row { display: flex; align-items: flex-end; gap: 10px; }
.rot-row .field { flex: 1; min-width: 0; }
.rot-row .btn { margin-bottom: 14px; }
.rot-preview .sh-list { margin-top: 10px; }

.ann { --ann-ink: var(--tint-ink); display: flex; align-items: flex-start; gap: 14px; padding: 14px 12px 14px 16px; margin: 6px 0 16px; border-radius: var(--r-card); background: var(--tint-soft); }
.ann.success, .ann-mini.success { --ann-ink: var(--ok-ink); background: var(--ok-bg); }
.ann.warning, .ann-mini.warning { --ann-ink: var(--warn-ink); background: var(--warn-bg); }
.ann.critical, .ann-mini.critical { --ann-ink: var(--danger-ink); background: var(--danger-bg); }
.ann-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--ann-ink) 16%, transparent); color: var(--ann-ink); }
.ann-ic .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.ann .grow { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 2px; }
.ann .t { font-size: 17px; font-weight: 700; color: var(--ann-ink); overflow-wrap: anywhere; }
.ann .s { white-space: pre-line; overflow-wrap: anywhere; color: var(--ink); }
.ann .btn { margin-top: 8px; }
.ann .btn.tinted { background: var(--ann-ink); color: var(--card); }
.ann-hide { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ann-ink); cursor: pointer; }
.ann-hide .ico { width: 18px; height: 18px; }
.ann-hide:active { background: rgba(var(--fill-rgb), .12); }
.ann-mini { --ann-ink: var(--tint-ink); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 6px 0 16px; border: 0; border-radius: 50%; background: var(--tint-soft); color: var(--ann-ink); cursor: pointer; }
.ann-mini .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.ann-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ann-pick button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--tint-soft); color: var(--tint-ink); cursor: pointer; }
.ann-pick button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tint-ink); }
.ann-pick .ico { width: 20px; height: 20px; }
.nbadge { flex: none; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #D6313B; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.nbadge[hidden] { display: none; }
.action-menu-item .nbadge { flex: none; }
.sh-list:has(> .sh-row.destructive:only-child) { background: none; border-radius: 0; overflow: visible; margin-top: 10px !important; }
.sh-list:has(> .sh-row.destructive:only-child) .sh-row { justify-content: center; min-height: 50px; border-radius: 999px; background: var(--danger-soft); color: var(--danger-ink); font-size: 17px; font-weight: 600; transition: transform .12s, opacity .12s; }
.sh-list:has(> .sh-row.destructive:only-child) .sh-row:active { transform: scale(.98); opacity: .9; background: var(--danger-soft); }
.sh-list:has(> .sh-row.destructive:only-child) .sh-ic { display: none; }
.sh-list:has(> .sh-row.destructive:only-child) .sh-row .t { flex: none; }
.confirm-scrim { z-index: 200; }
.confirm { position: absolute; z-index: 201; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(290px, calc(100% - 48px)); overflow: hidden; border-radius: 26px; background: var(--card); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); text-align: center; }
.confirm::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--tri-stripe); }
.confirm h3 { margin: 0; padding: 26px 20px 4px; font-size: 17px; font-weight: 700; }
.confirm p { margin: 0; padding: 0 20px 20px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sep); }
.confirm-actions button { height: 48px; border: 0; background: none; font: inherit; font-size: 17px; color: var(--tint); cursor: pointer; }
.confirm-actions button + button { border-left: 1px solid var(--sep); font-weight: 600; }
.confirm-actions button:active { background: rgba(var(--fill-rgb), .1); }
.confirm-actions .dan { color: #FF3B30; }
.sec > .toolbar { margin: 6px 0 -6px; }
.help-list { margin-top: 14px; border-radius: 20px; background: var(--surface); overflow: hidden; }
.help-row { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; }
.help-row + .help-row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--sep); }
.help-row .sh-ic { margin-top: 1px; }
.help-row .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.help-row b { font-size: 16px; font-weight: 600; }
.help-row span:not(.sh-ic) { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.sp-card { padding: 20px 16px 6px; border-radius: var(--r-card); background: #fff; box-shadow: inset 0 0 0 1px var(--sep); color: #111; }
.sp-stage { display: grid; }
.sp-slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .5s; }
.sp-slide.on { opacity: 1; pointer-events: auto; }
.sp-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 72px; padding: 0; border: 0; background: none; cursor: pointer; }
.sp-logo img { max-width: 70%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; }
.sp-name { margin-top: 2px; font-size: 16px; font-weight: 600; text-align: center; }
.sp-more { margin-top: 4px; min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(36, 109, 180, .12); color: #1B5A96; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sp-more:active { opacity: .7; }
.sp-dots { display: flex; justify-content: center; margin-top: 6px; }
.sp-dot { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.sp-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgba(60, 60, 67, .25); transition: background .2s; }
.sp-dot[aria-current="true"]::before { background: var(--tint-btn); }
@media (prefers-reduced-motion: reduce) { .sp-slide { transition: none; } }
.sp-hero { display: flex; align-items: center; justify-content: center; height: 120px; margin-top: 14px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--sep); }
.sp-hero img { max-width: 70%; max-height: 80%; object-fit: contain; }
.sp-host { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--ink-2); }
.sp-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 44px; padding: 4px 6px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; }
.sp-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-tile.big { width: 120px; height: 64px; }
.sp-none { font-size: 12px; color: #6B7078; text-align: center; }
.sp-logo-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.group + .filterbar { margin-top: 16px; }
.day-card > .note + .group-title { margin-top: 20px; }
.day-card + .group { margin-top: 14px; }
.page.fp .fp-stack + .group-title, .page.fp .group + .group-title { margin-top: 20px; }


.extra-coaches { display: flex; flex-direction: column; gap: 10px; }
.extra-coaches .et-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.extra-coaches .et-none { font-size: 14px; color: var(--ink-3); }
.extra-coaches .et-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin-right: -4px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.extra-coaches .et-x .ico { width: 12px; height: 12px; }
.extra-coaches [hidden] { display: none; }
.usage-fold { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 8px); background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
.usage-fold::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 4px; transition: transform .2s; }
.usage-fold[aria-expanded="true"]::after { transform: rotate(-135deg); }

.fb-stars { display: flex; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.fb-star { background: none; border: 0; padding: 2px; font-size: 44px; line-height: 1; color: var(--sep); cursor: pointer; transition: color .12s, transform .1s; }
.fb-star.on { color: #F5C518; transform: scale(1.12); }
.fb-hint { margin: 0 0 14px; text-align: center; font-size: 13px; color: var(--ink-2); }
.fb-hint[hidden] { display: none; }
.fb-read { color: #F5C518; letter-spacing: .05em; white-space: nowrap; font-size: 15px; align-self: flex-start; }
.row .s.fb-text { display: block; white-space: normal; overflow-wrap: anywhere; margin-top: 4px; color: var(--ink); }
.fb-cta { flex: none; padding: 9px 14px; border-radius: 999px; background: var(--tint); color: #fff; font-size: 15px; font-weight: 600; }
.fb-link { margin-bottom: 14px; }
.fb-sum { margin: 4px 6px 12px; }
.row .fb-text { padding-top: 2px; }
.fb-read { padding-top: 2px; }
.row.fb-entry { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.fb-stars { margin: 20px 0 6px; }
.fb-hint { margin: 0 0 22px; }
.fb-field { margin-bottom: 16px; }
.fb-field textarea.input { min-height: 110px; }
.fb-anon { margin-bottom: 20px; }
.fb-send { margin-top: 4px; }
.fb-avg { display: flex; align-items: center; gap: 4px; flex: none; font-size: 17px; }
.fb-avg .fb-read { align-self: center; padding-top: 0; font-size: 17px; }
.fb-wrap { padding-top: 10px; }
.fb-x { flex: none; width: 32px; height: 32px; margin-right: -6px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.fb-x .ico { width: 18px; height: 18px; }
.fb-x:active { background: rgba(var(--fill-rgb), .09); }
.fb-row { cursor: pointer; }
.fb-named { margin: 0 6px 18px; font-size: 13px; color: var(--ink-2); }
.fb-summary { display: flex; align-items: center; gap: 16px; min-height: 88px; margin: 4px 0 0; padding: 18px 20px; border-radius: var(--r-card); background: var(--card); }
.fb-summary .hold-bar { align-self: stretch; margin-right: 0; min-height: 52px; }
.fb-big { flex: none; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.fb-sum-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb-sum-text .fb-read { padding-top: 0; font-size: 20px; letter-spacing: .08em; align-self: flex-start; }
.fb-sum-text .s { font-size: 14px; color: var(--ink-2); }
.fb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.fb-toolbar:empty { display: none; }
.fb-list { min-height: 220px; }
.fb-list > .group-title { margin: 20px 4px 8px; font-size: 14px; font-weight: 700; letter-spacing: .4px; color: var(--ink); }
.fb-list > .group-title:first-child { margin-top: 22px; }
.fb-skel { margin-top: 12px; }
.fb-bar { display: block; height: 12px; margin: 6px 0; border-radius: 6px; background: rgba(var(--fill-rgb), .1); animation: fb-pulse 1.2s ease-in-out infinite; }
.fb-bar.w60 { width: 60%; }
.fb-bar.w40 { width: 40%; }
.fb-bar.w20 { width: 72px; }
@keyframes fb-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .fb-bar { animation: none; } }

/* ---- App-følelse: installeret app og mobilapp (html.feel sættes af theme.js) ---- */
html.feel .tabbar { view-transition-name: ftt-tabbar; }
html.feel .app.top-stripe::before { view-transition-name: ftt-stripe; }
::view-transition-old(ftt-tabbar) { animation: none; mix-blend-mode: normal; }
::view-transition-new(ftt-tabbar) { animation: ftt-in .25s ease-out both; mix-blend-mode: normal; }
html[data-slide="fade"]::view-transition-old(root) { animation: ftt-out .12s ease-out both; }
html[data-slide="fade"]::view-transition-new(root) { animation: ftt-in .2s ease-out both; }
html[data-slide="right"]::view-transition-old(root) { animation: ftt-out-left .3s cubic-bezier(.22, .8, .3, 1) both; }
html[data-slide="right"]::view-transition-new(root) { animation: ftt-in-right .3s cubic-bezier(.22, .8, .3, 1) both; }
html[data-slide="left"]::view-transition-old(root) { animation: ftt-out-right .3s cubic-bezier(.22, .8, .3, 1) both; }
html[data-slide="left"]::view-transition-new(root) { animation: ftt-in-left .3s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes ftt-out { to { opacity: 0; } }
@keyframes ftt-in { from { opacity: 0; } }
@keyframes ftt-in-right { from { transform: translateX(34%); opacity: .5; } }
@keyframes ftt-out-left { to { transform: translateX(-20%); opacity: 0; } }
@keyframes ftt-in-left { from { transform: translateX(-34%); opacity: .5; } }
@keyframes ftt-out-right { to { transform: translateX(20%); opacity: 0; } }
html.feel img { -webkit-user-drag: none; }
@media (pointer: coarse) {
  html.feel body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  html.feel input, html.feel textarea, html.feel [contenteditable], html.feel .legal, html.feel .legal *, html.feel .chat-bubble, html.feel .board-text { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
}
.ftt-ptr { position: fixed; z-index: 60; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); width: 34px; height: 34px; margin-left: -17px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--glass-solid); box-shadow: var(--shadow-glass); opacity: 0; pointer-events: none; }
.ftt-ptr svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; }
.ftt-ptr.spin svg { animation: ftt-spin .8s linear infinite; }
@keyframes ftt-spin { to { transform: rotate(360deg); } }

.btn .working { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ftt-spin .8s linear infinite; }
.locmap { padding: 12px; }
.locmap svg { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--bg); }
.locmap .cap { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-3); text-align: center; }
.locatebox { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 36px 0 18px; }
.locspin { width: 46px; height: 46px; border: 4px solid var(--sep); border-top-color: var(--tint); border-radius: 50%; animation: ftt-spin .9s linear infinite; }
.locdone { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tint); color: #fff; }
.locdone svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (min-width: 900px) {
  .tabbar .tab:not([aria-current="page"]):hover, .tabbar .action-menu.is-open > .tab-group:not([aria-current="page"]) { background: rgba(var(--fill-rgb), .07); color: var(--ink); }
  .tabbar .tab:not([aria-current="page"]):active { background: rgba(var(--fill-rgb), .12); }
}