/* ==========================================================================
   Golf-Runde — Fairway Paper
   Vanilla, mobile-first, fully German. One fairway-green accent.
   ========================================================================== */

:root {
  /* color — Direction A: Fairway Paper (light) */
  --paper:#F4F1E9; --surface:#FBFAF6; --surface-sunk:#EEEAE0;
  --ink:#1B1D19; --ink-muted:#6A6E63; --ink-faint:#9B9E92;
  --hairline:#E2DDD0;
  --fairway:#27563B; --fairway-press:#1E4530; --fairway-tint:#E4ECE3; --fairway-ink:#1A3A28;
  --clay:#B4513A; --clay-tint:#F1E2DD;

  /* heatmap steps (1 / 2 / 3 frei) */
  --heat1:#E4ECE3; --heat2:#8FB79C; --heat3:#27563B; --heat-on3-ink:#FBFAF6;

  /* type */
  --font-ui:"Schibsted Grotesk",-apple-system,"Segoe UI",system-ui,sans-serif;
  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;

  /* space (4px grid) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* radius */
  --radius-input:12px; --radius-card:18px; --radius-sheet:24px; --radius-pill:999px;

  /* elevation */
  --shadow-soft:0 1px 2px rgba(27,29,25,0.05);

  /* motion */
  --ease-out:cubic-bezier(0.2,0.8,0.2,1);
  --ease-in:cubic-bezier(0.4,0,1,1);
  --dur-micro:120ms; --dur-standard:180ms; --dur-sheet:260ms;

  /* layout */
  --screen-gutter:20px; --content-max:520px; --tap-min:44px;
  --tabbar-h:64px;
}

/* Direction B — Twilight Green (token swap only) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#10150F; --surface:#171D14; --surface-sunk:#0C100B;
    --ink:#ECEFE6; --ink-muted:#9AA08D; --ink-faint:#646B58;
    --hairline:#2A3324;
    --fairway:#5FA877; --fairway-press:#4C8C61; --fairway-tint:#1C2A1E; --fairway-ink:#A9D4B4;
    --clay:#C97559; --clay-tint:#2A1E18;
    --heat1:#1C2A1E; --heat2:#3E6B4E; --heat3:#5FA877; --heat-on3-ink:#10150F;
    --shadow-soft:0 1px 2px rgba(0,0,0,0.30);
  }
}

* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
html { -webkit-text-size-adjust:100%; }
html[lang="de"] body { hyphens:auto; }

body {
  margin:0;
  font-family:var(--font-ui);
  font-size:16px; line-height:24px; font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#app {
  max-width:var(--content-max);
  margin:0 auto;
  min-height:100dvh;
  position:relative;
}

/* ---------- screens ---------- */
.screen { display:none; }
.screen[hidden] { display:none !important; }
.screen.active { display:block; }
.screen.has-tabbar {
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-6));
}

.page {
  padding:0 var(--screen-gutter);
}

/* ---------- typography helpers ---------- */
.display { font-family:var(--font-display); font-weight:400; font-size:40px; line-height:44px; letter-spacing:-0.01em; }
.title { font-size:26px; line-height:30px; font-weight:500; letter-spacing:-0.01em; margin:0; }
.headline { font-size:20px; line-height:26px; font-weight:500; margin:0; }
.body { font-size:16px; line-height:24px; }
.callout { font-size:15px; line-height:22px; font-weight:500; }
.label { font-size:13px; line-height:18px; font-weight:500; color:var(--ink-muted); }
.caption { font-size:12px; line-height:16px; color:var(--ink-muted); }
.muted { color:var(--ink-muted); }
.faint { color:var(--ink-faint); }

/* ---------- app header ---------- */
.appbar {
  display:flex; align-items:center; gap:var(--space-3);
  padding:calc(env(safe-area-inset-top) + var(--space-5)) var(--screen-gutter) var(--space-4);
}
.appbar .appbar-title { flex:1; min-width:0; }
.appbar-mark { display:inline-flex; align-items:center; gap:var(--space-2); color:var(--ink); }
.appbar-mark .pin-glyph { width:20px; height:20px; }
.appbar-mark .mark-text { font-family:var(--font-display); font-size:22px; line-height:1; }

.icon-btn {
  flex:none;
  min-width:var(--tap-min); min-height:var(--tap-min);
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer; color:var(--ink);
  font-family:var(--font-ui); font-size:15px;
}
.icon-btn:active { opacity:.7; }

/* ---------- buttons ---------- */
.btn {
  font-family:var(--font-ui); font-size:15px; line-height:22px; font-weight:500;
  min-height:52px; padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-pill); border:1px solid transparent;
  cursor:pointer; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  text-align:center;
  transition:transform var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--fairway); color:#FBFAF6; }
.btn-primary:active { background:var(--fairway-press); }
.btn-primary:disabled { background:var(--surface-sunk); color:var(--ink-faint); cursor:default; transform:none; }
.btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--hairline); }
.btn-text {
  background:none; border:none; color:var(--ink-muted); width:auto; min-height:var(--tap-min);
  padding:var(--space-2) var(--space-3); font-weight:500; cursor:pointer;
}
.btn-danger-text { color:var(--clay); }

.btn-auto { width:auto; }

/* ---------- fields ---------- */
.field { margin-bottom:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
.field label { font-size:13px; line-height:18px; font-weight:500; color:var(--ink-muted); }
.field input {
  font-family:var(--font-ui); font-size:16px; line-height:24px; color:var(--ink);
  background:var(--surface-sunk); border:1px solid transparent;
  border-radius:var(--radius-input); padding:var(--space-3) var(--space-4);
  min-height:48px; width:100%;
  transition:border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.field input::placeholder { color:var(--ink-faint); }
.field input:focus { outline:none; border-color:var(--fairway); box-shadow:0 0 0 1px var(--fairway); }

.form-error { color:var(--clay); font-size:13px; line-height:18px; margin:0 0 var(--space-3); }
.form-ok { color:var(--fairway-ink); font-size:13px; line-height:18px; margin:0 0 var(--space-3); }

/* ---------- login ---------- */
.screen-login { min-height:100dvh; display:flex; }
.login-wrap {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:calc(env(safe-area-inset-top) + var(--space-12)) var(--screen-gutter)
          calc(env(safe-area-inset-bottom) + var(--space-12));
  gap:var(--space-10);
}
.brand-lockup { text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); }
.wordmark { font-family:var(--font-display); font-weight:400; font-size:44px; line-height:48px; margin:0; letter-spacing:-0.01em; }
.tagline { color:var(--ink-muted); font-size:16px; line-height:24px; margin:0; }
/* "Golf meets Ozempic" inside-joke sub-brand lockup */
.subbrand {
  display:inline-flex; align-items:baseline; justify-content:center; gap:6px;
  margin:var(--space-2) 0 0; color:var(--ink-faint);
}
.subbrand .sb-cap {
  font-family:var(--font-display); font-size:15px; line-height:1; letter-spacing:0.14em;
}
.subbrand .sb-meets {
  font-family:var(--font-display); font-style:italic; font-size:14px; line-height:1;
  color:var(--ink-muted);
}
.login-form .btn-primary { margin-top:var(--space-2); }

/* ---------- pin glyph ---------- */
.pin-glyph {
  display:inline-block; width:24px; height:24px;
  background:currentColor; color:var(--fairway);
  -webkit-mask:var(--pin-mask) no-repeat center / contain;
  mask:var(--pin-mask) no-repeat center / contain;
}
:root {
  --pin-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21V4'/%3E%3Cpath d='M9 4l9 2.6L9 9.2'/%3E%3Cpath d='M6.5 21h6'/%3E%3C/svg%3E");
}
.pin-hero { width:56px; height:56px; }

/* ---------- cards ---------- */
.card {
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius-card); padding:var(--space-5);
}
.section { margin-top:var(--space-6); }
.section-label { font-size:13px; line-height:18px; font-weight:500; color:var(--ink-muted); margin:0 0 var(--space-3); }

/* round hero card */
.round-card .rc-label { color:var(--ink-muted); font-size:13px; font-weight:500; }
.round-card .rc-date { font-family:var(--font-display); font-size:40px; line-height:44px; margin:var(--space-1) 0 var(--space-2); letter-spacing:-0.01em; }
.round-card .rc-divider { height:1px; background:var(--hairline); margin:var(--space-4) 0; }

/* home hero (group result) variants */
.rc-kicker { display:flex; align-items:center; gap:var(--space-2); }
.hero-win { background:var(--fairway-tint); border-color:transparent; }
.hero-win .rc-kicker, .hero-win .rc-date, .hero-win .hero-time { color:var(--fairway-ink); }
.hero-near .rc-kicker { color:var(--clay); }
.hero-time { color:var(--ink); }
.hero-miss { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); font-size:15px; color:var(--ink-muted); }
.hero-miss .hm-name { color:var(--ink); font-weight:500; }
.hero-empty-sub { color:var(--ink-muted); font-size:16px; line-height:24px; margin-top:var(--space-2); }
.hero-cta { margin-top:var(--space-4); }
.hero-cta .btn { width:100%; }

/* near-miss face */
.nearmiss-item .nm-face { flex:none; }

/* "Deine Zeiten" summary rows in the round card */
.mytime-row {
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-2) 0; border-top:1px solid var(--hairline);
}
.mytime-row:first-child { border-top:none; padding-top:0; }
.mytime-row .mt-day { font-size:15px; font-weight:500; }
.mytime-row .mt-times { font-size:14px; color:var(--fairway-ink); text-align:right; }
.mytime-foot { margin-top:var(--space-2); text-align:right; }

/* ---------- avatars ---------- */
.avatar {
  --sz:40px;
  width:var(--sz); height:var(--sz); flex:none;
  border-radius:var(--radius-pill); overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-sunk); color:var(--ink);
  font-weight:500; font-size:calc(var(--sz) * 0.4); line-height:1;
  border:1px solid var(--hairline);
}
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar.xs { --sz:22px; font-size:10px; }
.avatar.sm { --sz:32px; }
.avatar.lg { --sz:56px; }
.avatar.xl { --sz:96px; }
.avatar.ref-av { --sz:15px; font-size:8px; box-shadow:0 0 0 1.5px var(--surface); }
.avatar.is-in { background:var(--fairway-tint); color:var(--fairway-ink); border-color:transparent; }

.avatar-stack { display:flex; align-items:center; }
.avatar-stack .avatar { margin-left:-10px; box-shadow:0 0 0 2px var(--surface); }
.avatar-stack .avatar:first-child { margin-left:0; }

/* ---------- player rows ---------- */
.player-row {
  display:flex; align-items:center; gap:var(--space-3);
  width:100%; min-height:var(--tap-min);
  padding:var(--space-3) 0; border:none; background:none;
  border-top:1px solid var(--hairline); color:var(--ink);
  font-family:var(--font-ui); text-align:left; cursor:default;
}
.player-row:first-of-type { border-top:none; }
.player-row.tappable { cursor:pointer; }
.player-row.tappable:active { opacity:.7; }
.player-row .pr-name { flex:1; font-size:16px; line-height:24px; font-weight:500; }
.player-row .pr-name .pr-you { color:var(--ink-faint); font-weight:400; font-size:13px; }
.player-row .chevron { color:var(--ink-faint); }

/* status chips */
.chip {
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:var(--space-1) var(--space-3); min-height:28px;
  border-radius:var(--radius-pill); font-size:13px; line-height:18px; font-weight:500;
}
.chip-in { background:var(--fairway-tint); color:var(--fairway-ink); }
.chip-open { background:var(--surface-sunk); color:var(--ink-muted); }
.chip-blocker { background:var(--clay-tint); color:var(--clay); }
.player-row.is-blocker .pr-name { color:var(--ink); }
.player-row.is-blocker .avatar { box-shadow:0 0 0 2px var(--clay-tint); }
.chip-soon { background:var(--surface-sunk); color:var(--ink-faint); }
.dot { width:6px; height:6px; border-radius:999px; background:currentColor; display:inline-block; }

/* status line count */
.status-line { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-3); }
.status-line .count { font-size:15px; font-weight:500; }

/* ---------- success banner ---------- */
.banner {
  background:var(--fairway-tint); border:1px solid transparent;
  border-radius:var(--radius-card); padding:var(--space-4) var(--space-5);
  color:var(--fairway-ink);
}
.banner .banner-kicker { font-size:13px; font-weight:500; display:flex; align-items:center; gap:var(--space-2); }
.banner .banner-line { font-size:16px; line-height:24px; font-weight:500; margin-top:var(--space-1); }
.banner .banner-line + .banner-line { margin-top:var(--space-1); }
.banner-empty { background:var(--surface); border:1px solid var(--hairline); color:var(--ink-muted); }
.banner-nudge {
  background:var(--surface); border:1px solid var(--hairline); color:var(--ink);
  display:flex; align-items:center; gap:var(--space-3);
}
.banner-soft {
  background:var(--surface); border:1px solid var(--hairline); color:var(--ink);
  display:flex; align-items:center; gap:var(--space-3);
  width:100%; text-align:left; font-family:var(--font-ui);
}
button.banner-soft { cursor:pointer; }
button.banner-soft:active { background:var(--surface-sunk); }
.banner-soft .bn-text { flex:1; }
.banner-soft .chevron { color:var(--ink-faint); font-size:20px; }
.banner-nudge .bn-text { flex:1; font-size:15px; line-height:21px; }

/* near-miss list */
.nearmiss { display:flex; flex-direction:column; gap:var(--space-2); }
.nearmiss-item {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) 0; border-top:1px solid var(--hairline); font-size:15px; line-height:21px;
}
.nearmiss-item:first-child { border-top:none; }
.nearmiss-item .nm-who { color:var(--clay); font-weight:500; }
.nearmiss-item .nm-when { color:var(--ink-muted); font-size:14px; }

/* ---------- heatmap (overlap) ---------- */
.daylist { display:flex; flex-direction:column; }
.dayheat {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) 0; border-top:1px solid var(--hairline);
  width:100%; background:none; border-left:none; border-right:none; border-bottom:none;
  font-family:var(--font-ui); color:var(--ink); text-align:left;
}
.daylist .dayheat:first-child { border-top:none; }
.dayheat.is-weekend .dh-label { color:var(--ink); }
.dayheat.tappable { cursor:pointer; }
.dayheat.tappable:active { opacity:.75; }
.dh-label { flex:none; width:84px; font-size:13px; line-height:18px; }
.dh-label .dh-wd { font-weight:500; }
.dh-label .dh-date { color:var(--ink-muted); }
.heatrow {
  flex:1; display:flex; gap:2px; height:20px; align-items:stretch;
  background:var(--surface-sunk); border-radius:6px; overflow:hidden;
}
.hcell { flex:1; }
.hcell.c0 { background:transparent; }
.hcell.c1 { background:var(--heat1); }
.hcell.c2 { background:var(--heat2); }
.hcell.c3 { background:var(--heat3); }

.heat-axis {
  display:flex; justify-content:space-between; gap:var(--space-2);
  margin:var(--space-2) 0 0 calc(84px + var(--space-3));
  font-size:12px; color:var(--ink-faint);
}
.heat-legend { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-4); }
.legend-item { display:inline-flex; align-items:center; gap:var(--space-2); font-size:12px; color:var(--ink-muted); }
.legend-sw { width:14px; height:14px; border-radius:4px; border:1px solid var(--hairline); }
.legend-sw.c1 { background:var(--heat1); } .legend-sw.c2 { background:var(--heat2); } .legend-sw.c3 { background:var(--heat3); border-color:transparent; }

/* ---------- availability editor ---------- */
.avail-day {
  border-top:1px solid var(--hairline);
}
.daylist-edit .avail-day:first-child { border-top:none; }
.avail-day-head {
  display:flex; align-items:center; gap:var(--space-3);
  width:100%; min-height:56px; padding:var(--space-3) 0;
  background:none; border:none; color:var(--ink); font-family:var(--font-ui);
  text-align:left; cursor:pointer;
}
.avail-day-head:active { opacity:.75; }
.avail-day-head .adh-label { flex:none; width:84px; font-size:14px; }
.avail-day-head .adh-label .dh-wd { font-weight:500; }
.avail-day-head .adh-label .dh-date { display:block; color:var(--ink-muted); font-size:12px; }
.avail-day-head .adh-mini {
  flex:1; min-height:16px; position:relative;
  display:flex; flex-direction:column; gap:3px; justify-content:center; overflow:visible;
}
/* one lane per person, each carrying their face at the band start */
.adh-mini .mlane { position:relative; height:16px; background:var(--surface-sunk); border-radius:5px; }
.adh-mini .mlane-empty { background:var(--surface-sunk); }
.adh-mini .mlane-band { position:absolute; top:4px; height:8px; background:var(--heat2); border-radius:4px; opacity:.9; }
.adh-mini .mlane-band.me { background:var(--fairway); opacity:1; }
.adh-mini .mlane-face { position:absolute; top:50%; transform:translate(-50%, -50%); z-index:2; }
.avatar.mini-av { --sz:16px; font-size:8px; box-shadow:0 0 0 1.5px var(--surface); }
.avatar.mini-av.me-av { box-shadow:0 0 0 1.5px var(--fairway-tint); }
.avail-day-head .chevron { color:var(--ink-faint); transition:transform var(--dur-standard) var(--ease-out); }
.avail-day.open .avail-day-head .chevron { transform:rotate(180deg); }

.avail-day-body { padding:0 0 var(--space-4); }
.ruler-hint { font-size:13px; color:var(--ink-muted); margin:0 0 var(--space-2); min-height:18px; }
.ruler-hint.active { color:var(--fairway-ink); }

.ruler-scroll {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 calc(-1 * var(--screen-gutter)); padding:0 var(--screen-gutter) var(--space-2);
}
.ruler {
  position:relative; height:74px;
}
.ruler-band {
  position:absolute; top:22px; height:14px; background:var(--fairway);
  border-radius:7px; opacity:.95;
}
.ruler-pending {
  position:absolute; top:18px; height:22px; width:2px; background:var(--fairway);
}
/* faint, non-editable reference bands for the OTHER players (with their face) */
.ruler-ref-row { position:absolute; left:0; right:0; height:9px; }
.ruler-ref {
  position:absolute; top:0; height:9px; background:var(--heat2); opacity:.85;
  border-radius:4px;
}
.ruler-ref-face { position:absolute; top:-3px; z-index:2; }
.ruler-own-face { position:absolute; top:22px; z-index:3; }
.avatar.ref-av.me-av { box-shadow:0 0 0 1.5px var(--fairway-tint); }
.ruler-hint.ref-legend { margin-top:var(--space-1); color:var(--ink-faint); }
.ruler-ticks { position:absolute; inset:0; display:flex; }
.tick {
  width:44px; flex:none; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:var(--space-1); color:var(--ink-muted); font-family:var(--font-ui);
  font-size:13px; height:74px;
}
.tick:active { opacity:.6; }
.tick.in { color:var(--fairway-ink); font-weight:500; }
.tick.pending { color:var(--fairway-ink); font-weight:500; }

.window-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
.window-chip {
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--fairway-tint); color:var(--fairway-ink);
  border:none; border-radius:var(--radius-pill); padding:var(--space-2) var(--space-3);
  min-height:36px; font-size:14px; font-weight:500; cursor:pointer; font-family:var(--font-ui);
}
.window-chip:active { opacity:.7; }
.window-chip .wc-x { font-size:16px; line-height:1; color:var(--fairway-ink); }
.no-window { font-size:13px; color:var(--ink-faint); margin-top:var(--space-2); }

/* booking CTA (appears when >= 2 free) */
.btn-sm { min-height:40px; padding:var(--space-2) var(--space-3); font-size:14px; }
.btn-book { flex:none; gap:var(--space-2); }
.btn-book .pcc-badge {
  font-size:10px; font-weight:500; letter-spacing:.04em; line-height:1;
  padding:2px 4px; border-radius:4px; background:var(--fairway); color:#FBFAF6;
}
.btn-book .ext-ico {
  width:14px; height:14px; flex:none; background:currentColor;
  -webkit-mask:var(--ico-ext) no-repeat center / contain; mask:var(--ico-ext) no-repeat center / contain;
}
.banner-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-2); }
.banner-row .banner-line { margin:0; }
.banner-soft-col { flex-direction:column; align-items:stretch; gap:var(--space-3); }
.nearmiss-item .nm-text { flex:1; display:flex; flex-direction:column; }

/* voice / NL entry on the Flight screen */
.voice-entry {
  display:flex; align-items:center; gap:var(--space-3); width:100%;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-card);
  padding:var(--space-3) var(--space-4); margin:var(--space-2) 0 var(--space-4);
  font-family:var(--font-ui); color:var(--ink); text-align:left; cursor:pointer;
}
.voice-entry:active { background:var(--surface-sunk); }
.voice-entry .ve-ico {
  width:22px; height:22px; flex:none; background:var(--fairway);
  -webkit-mask:var(--ico-mic) no-repeat center / contain; mask:var(--ico-mic) no-repeat center / contain;
}
.voice-entry .ve-text { flex:1; display:flex; flex-direction:column; }
.voice-entry .chevron { color:var(--ink-faint); font-size:20px; }

/* voice input + review screen */
.voice-input { position:relative; }
.voice-input textarea {
  width:100%; min-height:120px; resize:vertical; font-family:var(--font-ui); font-size:16px;
  line-height:24px; color:var(--ink); background:var(--surface-sunk); border:1px solid transparent;
  border-radius:var(--radius-input); padding:var(--space-4); padding-right:60px;
}
.voice-input textarea:focus { outline:none; border-color:var(--fairway); box-shadow:0 0 0 1px var(--fairway); }
.mic-btn {
  position:absolute; right:10px; bottom:10px; width:44px; height:44px; border-radius:var(--radius-pill);
  background:var(--fairway); border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.mic-btn:active { background:var(--fairway-press); }
.mic-btn .mic-ico {
  width:20px; height:20px; background:#FBFAF6;
  -webkit-mask:var(--ico-mic) no-repeat center / contain; mask:var(--ico-mic) no-repeat center / contain;
}
/* prominent listening state: expanding fairway-green halo + steady glow */
.mic-btn.listening { background:var(--fairway); animation:mic-glow 1.4s ease-in-out infinite; }
.mic-btn.listening::before, .mic-btn.listening::after {
  content:""; position:absolute; inset:0; border-radius:var(--radius-pill);
  border:2px solid var(--fairway); animation:mic-ring 1.6s var(--ease-out) infinite; pointer-events:none;
}
.mic-btn.listening::after { animation-delay:.8s; }
@keyframes mic-ring {
  0% { transform:scale(1); opacity:.7; }
  100% { transform:scale(2.6); opacity:0; }
}
@keyframes mic-glow {
  0%,100% { box-shadow:0 0 0 0 rgba(39,86,59,.35); }
  50% { box-shadow:0 0 0 8px rgba(39,86,59,.12); }
}
.listening-label {
  display:flex; align-items:center; gap:var(--space-2);
  color:var(--fairway-ink); font-size:14px; font-weight:500; margin:var(--space-2) 0 0;
}
.listening-dot {
  width:9px; height:9px; border-radius:999px; background:var(--fairway);
  animation:mic-glow 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mic-btn.listening, .mic-btn.listening::before, .mic-btn.listening::after, .listening-dot { animation:none; }
  .mic-btn.listening { box-shadow:0 0 0 4px var(--fairway-tint); }
}

.review-list { display:flex; flex-direction:column; }
.review-item {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) 0; border-top:1px solid var(--hairline);
}
.review-item:first-child { border-top:none; }
.review-item.out { opacity:.55; }
.review-item .ri-check input { width:22px; height:22px; accent-color:var(--fairway); }
.review-item .ri-text { flex:1; display:flex; flex-direction:column; }
.review-item .ri-label { font-size:16px; font-weight:500; }
.review-item .ri-remove {
  flex:none; width:36px; height:36px; border:none; background:none; cursor:pointer;
  color:var(--ink-faint); font-size:22px; line-height:1;
}
.review-unclear { margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--hairline); }
.review-unclear .uc-item { margin-top:var(--space-1); }
.save-bar.review-actions { display:flex; gap:var(--space-3); }
.save-bar.review-actions .btn { width:auto; flex:1; }

/* sticky save bar */
.save-bar {
  position:sticky; bottom:0;
  margin:var(--space-6) calc(-1 * var(--screen-gutter)) 0;
  padding:var(--space-4) var(--screen-gutter) calc(env(safe-area-inset-bottom) + var(--space-4));
  background:linear-gradient(to top, var(--paper) 70%, transparent);
}

/* ---------- konto ---------- */
.konto-id { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-4) 0 var(--space-6); }
.konto-id .konto-name { font-size:20px; line-height:26px; font-weight:500; }
.konto-id .konto-user { color:var(--ink-muted); font-size:13px; }
.konto-id .konto-logout { margin-top:var(--space-3); }
.konto-block { margin-top:var(--space-6); }
.konto-block h3 { font-size:13px; font-weight:500; color:var(--ink-muted); margin:0 0 var(--space-3); }
.hidden-file { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }

/* empty state */
.empty {
  text-align:center; padding:var(--space-16) var(--space-5);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
}
.empty .pin-glyph { width:40px; height:40px; color:var(--ink-faint); }

/* ---------- bottom tab bar ---------- */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  max-width:var(--content-max); margin:0 auto;
  display:flex; background:var(--surface); border-top:1px solid var(--hairline);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar[hidden] { display:none; }
.tab {
  flex:1; min-height:var(--tabbar-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1);
  background:none; border:none; cursor:pointer; color:var(--ink-faint);
  font-family:var(--font-ui); padding:var(--space-2) var(--space-1);
}
.tab .tab-label { font-size:12px; line-height:16px; font-weight:500; text-align:center; }
.tab .tab-ico {
  width:24px; height:24px; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.tab[data-ico] { } /* set below via attr */
.tab .tab-ico { }
.tab.active { color:var(--fairway); }
.tab:active { opacity:.7; }

.tab-ico[data-ico="runde"], .tab [data-ico="runde"] { -webkit-mask-image:var(--ico-runde); mask-image:var(--ico-runde); }
.tab [data-ico="avail"] { -webkit-mask-image:var(--ico-avail); mask-image:var(--ico-avail); }
.tab [data-ico="ueberblick"] { -webkit-mask-image:var(--ico-ueberblick); mask-image:var(--ico-ueberblick); }

:root {
  --ico-runde:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18M8 3v3M16 3v3'/%3E%3C/svg%3E");
  --ico-avail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --ico-ueberblick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18V9M9.3 18V5M14.6 18v-6M20 18v-9'/%3E%3C/svg%3E");
  --ico-konto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 19.5a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
  --ico-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --ico-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  --ico-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M6 11a6 6 0 0 0 12 0'/%3E%3Cpath d='M12 17v4M9 21h6'/%3E%3C/svg%3E");
}

/* ---------- toast ---------- */
.toast {
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-4));
  z-index:50; max-width:calc(var(--content-max) - 2 * var(--screen-gutter));
  background:var(--ink); color:var(--paper);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-input);
  font-size:14px; line-height:20px; box-shadow:var(--shadow-soft);
  opacity:0; transition:opacity var(--dur-standard) var(--ease-out);
}
.toast.show { opacity:1; }

/* ---------- motion prefs ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration:.001ms !important; animation-duration:.001ms !important; }
  .btn:active { transform:none; }
}

/* small-phone niceties */
@media (max-width:360px) {
  .dh-label, .avail-day-head .adh-label { width:72px; }
  .heat-axis { margin-left:calc(72px + var(--space-3)); }
}