/* Grizzly Gym prototype — industrial, restrained. One accent, no glow, no gradients.
   Display face for names and times (Big Shoulders Display), IBM Plex Sans for everything else.
   Fonts are bundled so the installed app works offline in the gym. */

@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #f1eee8;
  --surface: #ffffff;
  --surface-2: #f7f5f1;
  --line: #e3ded4;
  --line-strong: #cbc4b7;
  --ink: #171512;
  --ink-2: #47423a;
  --muted: #736c61;
  /* black like the bear logo (Ayden 2026-10-07: no orange); greens, reds, yellows and blues stay for status */
  --accent: #171512;
  --accent-ink: #ffffff;
  --accent-soft: #ebe7e0;
  --ok: #1d6f46;
  --ok-soft: #e2f1e8;
  --warn: #7f5300;
  --warn-soft: #f9eed6;
  --danger: #b2261b;
  --danger-soft: #fbe6e3;
  --info: #1f5a9e;
  --info-soft: #e4ecf7;
  --guest: #574a96;
  --guest-soft: #ebe8f6;
  --ribbon-bg: #171512;
  --ribbon-ink: #e9e4da;
  --brand-bg: #171512;
  --brand-ink: #f1eee8;
  --brand-muted: #b3ab9e;
  --radius: 12px;
  --radius-sm: 8px;
  --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Roboto, sans-serif;
  --tabbar-h: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100f0d;
    --surface: #1a1916;
    --surface-2: #211f1c;
    --line: #2e2b27;
    --line-strong: #3e3a34;
    --ink: #eeeae3;
    --ink-2: #cbc5ba;
    --muted: #978f83;
    --accent: #eeeae3;
    --accent-ink: #171512;
    --accent-soft: #2b2824;
    --ok: #5cc28f;
    --ok-soft: #14271c;
    --warn: #e2b553;
    --warn-soft: #2c230f;
    --danger: #f07a6e;
    --danger-soft: #331512;
    --info: #86b4ee;
    --info-soft: #142134;
    --guest: #b6aaf0;
    --guest-soft: #221d38;
    --ribbon-bg: #000000;
    --ribbon-ink: #b8b1a5;
    --brand-bg: #1a1916;
    --brand-ink: #eeeae3;
    --brand-muted: #978f83;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* no grey/blue flash from the phone on tap */
  overscroll-behavior-y: contain; /* no pull-to-refresh, no overscroll glow */
}
/* Buttons are not text: no selection handles and no callout on long-press. */
button, a, .chip, .tab, .checkrow, .field-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body.has-tabs { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
body.sheet-open { overflow: hidden; }

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon { flex: none; display: block; }

/* ---------- frame ---------- */

.ribbon {
  background: var(--ribbon-bg);
  color: var(--ribbon-ink);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 12px calc(5px);
  padding-top: calc(5px + env(safe-area-inset-top));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 52px;
  padding: 0 12px 0 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.brand-role { margin-left: 2px; }

/* The gym's bear, drawn through a mask so it takes the text colour in light and dark. */
.logo {
  display: block;
  flex: none;
  aspect-ratio: 1236 / 668;
  background-color: currentColor;
  -webkit-mask: url("../icons/logo-mask.png") center / contain no-repeat;
  mask: url("../icons/logo-mask.png") center / contain no-repeat;
}
.brand-logo { width: 40px; color: var(--ink); }
.brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-role { font-size: 13px; color: var(--muted); font-weight: 500; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 8px 6px; text-decoration: none; font-weight: 500; color: var(--ink-2); }

.main {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 16px 32px;
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 4px;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 6px 12px env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .icon { color: var(--accent); }

/* ---------- type ---------- */

.page-head { padding: 18px 0 14px; }
.eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.title:focus { outline: none; }
.lead { margin: 8px 0 0; color: var(--ink-2); }
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.section-title:focus { outline: none; }
/* a section title with its action on the right ("Nicht zusammen buchbar" + "Regel hinzufügen") */
.section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 4px; }
.section-head-row .section-title { margin: 0; }
.combo-section .plain-list { margin-top: 10px; }
.card-title { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.optional { font-weight: 400; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.empty { color: var(--muted); padding: 12px 0; margin: 0; list-style: none; }
.placeholder { color: var(--accent); font-weight: 500; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- surfaces ---------- */

.stack { display: grid; gap: 12px; margin-top: 12px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 12px;
}
.card > :first-child { margin-top: 0; }
.card-quiet { background: transparent; }
.card-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.card-row-head .card-title { margin: 0; }

.note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
}
.note p { margin: 0; flex: 1; }
.note .icon { margin-top: 1px; color: var(--muted); }
.note-ok { background: var(--ok-soft); border-color: transparent; }
.note-ok .icon { color: var(--ok); }
.note-danger { background: var(--danger-soft); border-color: transparent; }
.note-danger .icon { color: var(--danger); }
.note-action { align-items: center; }
.note-action .icon { color: var(--accent); }
.note-wrap { flex-wrap: wrap; }
.note-buttons { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; padding-left: 28px; }
.note .note-buttons .btn { flex: 1 1 auto; } /* beats layout.css ".note .btn { flex: none }" */

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  /* a label is never broken over two lines; rows move the whole button down instead */
  white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
/* pressed: towards the page colour (towards the text colour would be black on black) */
.btn-primary:not(:disabled):active { background: color-mix(in srgb, var(--accent) 82%, var(--bg)); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:not(:disabled):active { background: var(--surface-2); }
.btn-ghost { color: var(--ink-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost-danger { color: var(--danger); border-color: var(--line-strong); background: var(--surface); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn-row .btn { flex: 1 1 auto; min-width: 120px; }
.btn-row-split { justify-content: space-between; }
.btn-row-split .btn { flex: 0 1 auto; }
.btn-col { display: grid; gap: 8px; margin-top: 20px; }
.main > .btn-block { margin-top: 4px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 0;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:active { background: var(--surface-2); }

.link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-quiet { color: var(--muted); font-weight: 500; font-size: 14px; margin-top: 8px; }

/* ---------- chips, choices ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* filter rows (inbox sections, member and contract filters) wrap: on the phone a sideways-scrolling row hid
   half of them behind the edge and nobody found them (2026-10-10) */
.chips-filter { margin-top: 12px; }
.chip {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.choice-list { display: grid; gap: 8px; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  text-align: left;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
}
.choice-tall { flex-direction: column; align-items: flex-start; gap: 2px; }
.choice-title { font-weight: 600; }
.choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.choice[aria-pressed="true"] .icon { color: var(--accent); }

/* ---------- badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-neutral { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-guest { background: var(--guest-soft); color: var(--guest); }
.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
}

/* ---------- session card ---------- */

.session { padding: 14px 16px 12px; margin-top: 0; }
.session-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.when { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.when-day { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.when-time { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: .95; letter-spacing: .01em; }
.when-end { font-size: 14px; color: var(--muted); }
/* Body face on purpose: the display face's "1" reads as "I" ("M1" looked like "MI"). */
.mat {
  flex: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  padding: 5px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  line-height: 1;
}
.session-name { margin: 8px 0 2px; font-size: 17px; font-weight: 600; line-height: 1.25; }
.meta { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.topic { margin: 8px 0 0; color: var(--ink-2); }
.topic-empty { color: var(--muted); font-style: italic; }
.topic-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.topic-row .icon-btn { margin: 0 -8px 0 0; }
.deadline { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.deadline .icon { color: var(--accent); }
.deadline-closed .icon { color: var(--muted); }
.count { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.is-cancelled .when-time, .is-cancelled .session-name { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }

.answer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ans { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 0 10px; font-size: 14px; }
.ans .icon { color: var(--muted); }
.ans-yes[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ans-yes[aria-pressed="true"] .icon { color: var(--accent-ink); }
/* "no" chosen: clearly selected, but not the same solid fill as "yes" (the accent is black now) */
.ans-no[aria-pressed="true"] { background: var(--surface-2); border-color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-2); color: var(--ink); font-weight: 600; }
.ans-no[aria-pressed="true"] .icon { color: var(--ink); }

.state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
}
.state-ok { background: var(--ok-soft); color: var(--ok); }
.state-warn { background: var(--warn-soft); color: var(--warn); align-items: flex-start; }
.state-warn .icon { margin-top: 1px; }
.state-muted { background: var(--surface-2); color: var(--muted); }
.hint { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.hint .icon { margin-top: 1px; color: var(--info); }

.tally { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0; font-size: 13px; color: var(--muted); }
.tally strong { color: var(--ink); font-size: 15px; }

/* ---------- check-in ---------- */

.counter {
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.counter-text { display: flex; align-items: baseline; justify-content: space-between; }
.counter-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.counter-value { font-weight: 600; font-size: 28px; line-height: 1; }
.counter-of { color: var(--muted); font-weight: 500; font-size: 20px; }
.bar { height: 6px; margin-top: 12px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ok); border-radius: 3px; transition: width .25s ease; }

.search {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.search .icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.search input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.results { list-style: none; margin: 6px 0 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  cursor: pointer;
}
.result:active { background: var(--surface-2); }
.result > .icon { color: var(--muted); margin-left: auto; }
.result-new { color: var(--accent); font-weight: 600; min-height: 48px; }
.result-new .icon { margin-left: 0; color: var(--accent); }

/* name + badges inside a search result (the check-in list itself is photo tiles, layout.css) */
.checkrow-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.checkrow-name { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.checkrow-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.checkrow-badges:empty { display: none; }

.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .02em;
}

.fold { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.fold summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; cursor: pointer; font-weight: 500; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.75px solid var(--muted); border-bottom: 1.75px solid var(--muted); transform: rotate(45deg) translateY(-2px); }
.fold[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.fold-names { margin: 0; padding: 0 14px 14px; color: var(--ink-2); font-size: 14px; }

/* Training notes (2026-10-12): on a training's own page and on the notes page */
.tnotes .section-title { margin-top: 0; }
.tnotes .btn { margin-top: 10px; }
.tnote-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tnote { display: flex; align-items: flex-start; gap: 4px; padding: 10px 6px 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tnote-text { flex: 1; min-width: 0; }
.tnote-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tnote-meta { margin: 4px 0 0; }
.tnote-actions { display: flex; flex: none; margin: -6px 0; }
.tnote-feed { display: grid; }
.tnote-card .tnote { background: var(--surface-2); border-color: transparent; }
.tnote-topic { font-weight: 400; color: var(--muted); }
.tnote-there { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.tnote-there-label { font-weight: 600; }
.tnote-hint { margin: 4px 0 14px; }

.obstacles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.list-hint { margin: -4px 0 8px; }

/* ---------- forms ---------- */

.form { padding-bottom: 18px; }
.form > .btn-block { margin-top: 20px; } /* submit buttons right after chips looked glued on */
.field { display: block; margin-top: 14px; }
.field .label { margin: 0 0 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 16px; /* no zoom on iOS */
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .search input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row > .field { min-width: 0; }
.field-row-zip { grid-template-columns: 7.5em 1fr; }
.err { display: block; min-height: 0; margin-top: 4px; font-size: 13px; color: var(--danger); }
.err:empty { display: none; }

.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; cursor: pointer; }
/* Own checkbox instead of the phone's: the input stays (keyboard + screen reader), only its look is ours. */
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.check input::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
  transform: scale(0);
  transition: transform .12s ease;
}
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Autofill keeps our colours instead of the browser's yellow/blue. */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--surface) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }

/* ---------- own pickers (replace the phone's dropdown / date / time dialogs) ---------- */

.field-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.field-btn .icon { color: var(--muted); }
.field-btn.is-empty { color: var(--muted); }
.field-btn:active { background: var(--surface-2); }
.field-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.picker-group { margin: 14px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.picker-group:first-child { margin-top: 2px; }
.picker-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 8px 14px;
  border: 0;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.picker-item + .picker-item { border-top: 1px solid var(--line); }
.picker-item:active { background: var(--surface-2); }
.picker-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.picker-label { font-weight: 500; }
.picker-mark { color: transparent; }
.picker-item[aria-pressed="true"] { background: var(--accent-soft); }
.picker-item[aria-pressed="true"] .picker-mark { color: var(--accent); }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-title { font-weight: 600; font-size: 16px; }
.icon-btn:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { padding: 4px 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-day {
  aspect-ratio: 1;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal-day:not(:disabled):active { background: var(--surface-2); }
.cal-day:disabled { color: var(--line-strong); cursor: default; }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--line-strong); font-weight: 600; }
.cal-day[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: none; }

.time-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.time-cell {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.time-cell[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }

.stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.stepper-btn { width: 54px; min-height: 46px; border: 0; background: none; font-size: 22px; font-weight: 500; cursor: pointer; color: var(--ink); }
.stepper-btn:active { background: var(--surface-2); }
.stepper-value { flex: 1; text-align: center; font-weight: 500; border-left: 1px solid var(--line); border-right: 1px solid var(--line); line-height: 46px; }

.tariff {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.tariff-name { font-weight: 600; }
.tariff-price { font-family: var(--font-display); font-weight: 800; font-size: 26px; white-space: nowrap; }
.tariff-per { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--ink-2); }

.iban-state { margin: 6px 0 0; min-height: 20px; font-size: 13px; }
.iban-state span { display: inline-flex; align-items: center; gap: 6px; }
.iban-state .ok { color: var(--ok); }
.iban-state .bad { color: var(--danger); }

.mandate { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.mandate p { margin: 6px 0 0; }
.mandate-title { margin: 0 !important; font-weight: 600; }

.progress { height: 4px; margin-top: 14px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); }
.demo-fill { display: flex; margin: 12px auto 0; }

.preview { margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); }
.preview .label { margin-top: 0; }
.preview-line { margin: 2px 0 0; font-size: 14px; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.card-title + .toggle-row { border-top: 0; }
.toggle-text { display: flex; flex-direction: column; gap: 2px; }
.toggle-label { font-weight: 500; }
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color .15s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.switch:checked { background: var(--ok); }
.switch:checked::after { transform: translateX(18px); }

/* ---------- lists, kv, tables ---------- */

.kv { margin: 6px 0 0; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; text-align: right; font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }

.plain-list { list-style: none; margin: 8px 0 0; padding: 0; }
.plain-list.card { padding: 4px 0; }
.plain-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.plain-list li + li .plain-row { border-top: 1px solid var(--line); }
.plain-list.card .plain-row { padding: 10px 14px; }
.plain-btn { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.plain-btn > .icon { color: var(--muted); }
.plain-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.plain-name { font-weight: 500; }
.plain-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.plain-badges:empty { display: none; }

/* overview: the people waiting for the ID check - how many, the newest few, one row to all of them.
   The same height for 6 and for 600. */
.newcomers { padding: 0; }
/* two kinds of new, one row each (2026-10-10): the number, what they wait for, one tap */
.newcomers-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.newcomers-row + .newcomers-row { border-top: 1px solid var(--line); }
.newcomers-count { min-width: 3ch; text-align: right; font-size: 28px; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums; } /* 3 digits wide: the texts of both rows start in one line */
.newcomers-row .plain-main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.newcomers-row .plain-name { font-weight: 500; overflow-wrap: anywhere; }
.newcomers-row > .icon:last-child { color: var(--muted); flex: none; }
/* the rollout's App-Zugang tile spans the first row: 2 or 4 columns stay without a hole */
.kpi-full { grid-column: 1 / -1; }

.list-card { padding: 4px 0; }
.list-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; text-decoration: none; font-weight: 500; }
.list-link + .list-link { border-top: 1px solid var(--line); }
.list-link > .icon:first-child { color: var(--accent); }
.list-link > .icon:last-child { margin-left: auto; color: var(--muted); }
/* a count on a row (the Postfach under "Mehr"): at the right, just before the arrow */
.list-link .nav-count { position: static; margin-left: auto; }
.list-link .nav-count + .icon:last-child { margin-left: 0; }

.table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14px; }
.table th, .table td { padding: 9px 4px; border-top: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: middle; }
.table thead th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.table tbody th { font-weight: 500; }
.table tfoot th, .table tfoot td { font-weight: 600; border-top: 1.5px solid var(--line-strong); }
.table td:nth-child(3):not(.num) { white-space: nowrap; }
.inline-bar { display: inline-block; width: 52px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); vertical-align: middle; overflow: hidden; }
.inline-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

.log { list-style: none; margin: 4px 0 0; padding: 0; }
.log li { display: grid; gap: 1px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.log li:first-child { border-top: 0; }
.log-when { font-size: 12px; color: var(--muted); }
.log-why { font-size: 13px; color: var(--ink-2); }

.big-line { margin: 4px 0; font-size: 18px; }

/* ---------- KPI tiles ---------- */

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.kpi-label { margin: 0; font-size: 13px; color: var(--muted); }
.kpi-value { margin: 4px 0 0; font-size: 28px; font-weight: 600; line-height: 1.1; }
.kpi-sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- start page (landing) ----------
   One order on every screen: brand → sign in → new here → cancel → legal footer.
   Phone: a dark brand band over one column. PC (layout.css): the same as a split screen. */

body.is-landing .main { max-width: none; margin: 0; padding: 0; }
body.is-landing .topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.is-landing .lang-btn { background: transparent; color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand-ink) 35%, transparent); }

.landing { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.landing-brand {
  background: var(--brand-bg);
  color: var(--brand-ink);
  padding: calc(60px + env(safe-area-inset-top)) 20px 28px;
  border-bottom: 1px solid var(--line);
}
.landing-brand-inner { max-width: 520px; margin: 0 auto; }
.landing-logo { width: 92px; margin-bottom: 14px; color: var(--brand-ink); }
.landing-mark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.landing-mark:focus { outline: none; }
.landing-sub { margin: 8px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-muted); }

.landing-panel { flex: 1; padding: 24px 16px 28px; }
.landing-inner { display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; }
.landing-welcome { display: none; }
.landing-section { margin: 28px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.landing-cancel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.landing-cancel > .icon:first-child { color: var(--accent); }
.landing-cancel > .icon:last-child { margin-left: auto; color: var(--muted); }
.landing-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.landing-foot a { color: var(--muted); text-decoration: none; }
.landing-foot a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- the ways in: one grouped list (start page and #/join) ---------- */

.option-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.option + .option { border-top: 1px solid var(--line); }
.option:active, .landing-cancel:active { background: var(--surface-2); }
@media (hover: hover) {
  .option:hover, .landing-cancel:hover { background: var(--surface-2); }
}
.option-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex: none; }
.option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.option-title { font-size: 16px; font-weight: 600; line-height: 1.25; }
.option-desc { font-size: 14px; line-height: 1.35; color: var(--muted); }
.option > .icon:last-child { flex: none; color: var(--muted); }
.footnote { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.footnote p { margin: 0 0 8px; }
.footnote .btn { margin-left: -12px; }

/* ---------- done ---------- */

.done { padding: 28px 0 8px; }
.done-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--ok); color: #fff; }
.steps { list-style: none; counter-reset: s; padding: 4px 16px; }
.steps li { counter-increment: s; position: relative; display: grid; gap: 2px; padding: 12px 0 12px 36px; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
/* a trial guest's way to the first training (views/probe.js): done steps are ticked and quiet, open ones stand out */
.trial-card { margin-bottom: 14px; }
.check-steps { list-style: none; margin: 8px 0 10px; padding: 0; }
.check-step { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.check-step:first-child { border-top: 0; }
.check-step-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line-strong); }
.check-step.is-done .check-step-mark { border-color: var(--ok); background: var(--ok); color: #fff; }
.check-step-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.check-step.is-done .check-step-body { color: var(--muted); }
.check-step .btn-row { margin-top: 8px; }

/* the code for the gym's wall (#/o/trial-qr): one sheet of paper - printing shows the poster and nothing else */
.qr-poster { max-width: 520px; margin: 0 auto 16px; padding: 28px 24px; text-align: center; background: #fff; color: #000; }
.qr-poster-gym { margin: 0 0 6px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.qr-poster-title { margin: 0 0 6px; font-size: 30px; line-height: 1.15; font-weight: 700; }
.qr-poster-text { margin: 0 0 16px; font-size: 16px; }
.qr-poster-code { max-width: 340px; margin: 0 auto; }
.qr-poster-code svg { display: block; width: 100%; height: auto; }
.qr-poster-url { margin: 12px 0 0; font-size: 12px; overflow-wrap: anywhere; color: #444; }
.qr-locs { margin-top: 14px; }
.qr-actions { display: flex; justify-content: center; }
.qr-actions .btn { min-width: 220px; }
@media print {
  .no-print, #topbar, #tabbar, #sidebar, #loadbar { display: none !important; }
  body, #main { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .qr-poster { max-width: none; margin: 0; padding: 12mm 10mm; border: 0; box-shadow: none; }
  .qr-poster-title { font-size: 44pt; }
  .qr-poster-text { font-size: 20pt; }
  .qr-poster-code { max-width: 130mm; }
}
.howto { margin: 6px 0 0; padding-left: 20px; }
.howto li { margin: 8px 0; }
.howto .icon { display: inline-block; vertical-align: -4px; }

/* ---------- sheet + toast ---------- */

/* Sized to the VISUAL viewport (set by ui.js): with the keyboard open, the sheet sits
   above it instead of behind it. Falls back to the full screen. */
.sheet-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--vv-top, 0px);
  height: var(--vv-h, 100%);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 9, 8, .45);
  animation: fade .15s ease;
}
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: calc(var(--vv-h, 100vh) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* no top padding: a sticky header sticks at the padding edge, and scrolled content showed
     through a band above it (seen on the A54 with the keyboard open) — the head carries it */
  padding: 0 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  animation: rise .18s ease;
}
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0 8px; background: var(--surface); }
.sheet-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.sheet-body > .btn-block { margin-top: 18px; }
.sheet-body .field + .chips { margin-top: 10px; } /* quick-pick chips under an input (seen tight on the A54) */
.sheet-body p { margin: 8px 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  animation: rise .18s ease;
}
body.has-tabs .toast { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translate(var(--tx, 0), 12px); opacity: 0; } to { transform: translate(var(--tx, 0), 0); opacity: 1; } }
.toast { --tx: -50%; }

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

@media (min-width: 600px) {
  .main { padding-top: 16px; }
  .title { font-size: 40px; }
}