/* Breathing — web */

:root {
  /* De gekozen accentkleur. Alles wat groen is volgt hieruit — knoppen,
     schakelaars, de ademcirkel en de ring eromheen. Dezelfde tint in beide
     modi: wie een kleur kiest, hoort die kleur te krijgen. */
  --accent:      #3f8025;          /* witcontrast 4,85:1 */
  --accent-fg:   #3f8025;          /* JS maakt foreground veilig op elk vlak */
  --accent-ring: #3f8025;          /* ring/bolrand: de gekozen kleur zelf; JS
                                      klemt alleen extremen die in de
                                      achtergrond zouden oplossen */
  --on-accent:   #ffffff;          /* presets zijn AA; vrije kleur volgt JS */
  --bg:          #ffffff;          /* Background, licht */
  --surface:     #f2f2f7;          /* secondarySystemBackground */
  --card:        #ffffff;          /* systemBackground */
  --text:        #000000;
  --text-2:      #6e6e73;          /* 5,17:1 op wit; ook kleine hulptekst blijft AA */
  --counter:     var(--on-accent);
  --hairline:    rgba(0, 0, 0, .12);
  --shadow:      rgba(0, 0, 0, .10);
  --pill:        #ffffff;

  --radius:      16px;
  --tap:         44px;             /* Apple's minimum raakdoel */
  --safe-t:      env(safe-area-inset-top, 0px);
  --safe-b:      env(safe-area-inset-bottom, 0px);
  --safe-l:      env(safe-area-inset-left, 0px);
  --safe-r:      env(safe-area-inset-right, 0px);

  --ease-out:    cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #0b0b0b;           /* Background, donker (0.043) */
    --surface:  #1c1c1e;
    --card:     #000000;
    --text:     #ffffff;
    --text-2:   #ababaf;           /* TextSecondary, donker */
    --hairline: rgba(255, 255, 255, .16);
    --shadow:   rgba(0, 0, 0, .5);
    --pill:     rgba(255, 255, 255, .10);
  }
}

:root[data-theme="dark"] {
  --bg:       #0b0b0b;
  --surface:  #1c1c1e;
  --card:     #000000;
  --text:     #ffffff;
  --text-2:   #ababaf;
  --hairline: rgba(255, 255, 255, .16);
  --shadow:   rgba(0, 0, 0, .5);
  --pill:     rgba(255, 255, 255, .10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; }

/* De web-app gebruikt bewust overal de gewone pijlcursor. De elementen zelf
   blijven echte links en bedieningen, dus toetsenbord-, screenreader- en
   aanraakgedrag verandert hierdoor niet. */
a,
button,
summary,
select,
input[type='color'],
input[type='range'],
[role='button'],
.card-head {
  cursor: default;
}

/* Een tik mag geen focusring achterlaten; toetsenbordnavigatie wel */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ─── Sessiescherm ──────────────────────────────────────────────── */

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}

/* De visuals nemen wat overblijft tussen pil en dok — het venster mag elke
   vorm hebben, de knoppen blijven altijd in beeld */
#visuals {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

#rings {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--max-d, 300px);
  height: var(--max-d, 300px);
  pointer-events: none;
}

/* Buitenring: de volledig zichtbare oorspronkelijke puls. Alleen de
   standaardstijl schaalt deze dikke grens; experimentele stijlen gebruiken de
   aparte dunne begeleiding eronder. */
#outer-ring {
  position: absolute;
  inset: -10px;
  border: 10px solid var(--accent-ring);
  border-radius: 50%;
  transform: scale(var(--outer-scale, 1));
  opacity: 1;
  will-change: transform;
}

/* De gekozen begeleiding leeft op een aparte, lichtere ring. Daardoor blijft
   de grens rustig en herkenbaar, ook wanneer de begeleiding uit staat. */
#guidance-ring {
  position: absolute;
  inset: -5px;
  border: 4px solid var(--accent-ring);
  border-radius: 50%;
  transform: scale(var(--guidance-scale, 1));
  opacity: var(--guidance-opacity, 0);
  will-change: transform, opacity;
}

/* De ademcirkel zelf */
#inner-circle {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    inset 0 0 0 6px var(--accent-ring),
    0 6px 12px color-mix(in srgb, var(--accent) 14%, transparent),
    0 2px 3px var(--shadow);
  transform: scale(var(--breath-scale, .333));
  will-change: transform;
}

#counter {
  position: relative;
  font-size: var(--counter-size, 48px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--counter);
  opacity: var(--counter-opacity, 0);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  will-change: opacity;
}

/* Onzichtbare trefzone over het hele bovenvlak: tik = start/stop */
#breath-tap {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  padding: 0;
  z-index: 2;
}

#phase-label {
  margin: 0;
  min-height: 1.5em;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
  opacity: var(--phase-opacity, 0);
  transition: opacity .3s ease;
}

#hint {
  margin: 6px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--text-2);
  transition: opacity .3s ease;
}

#stage-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: max(18px, var(--safe-b));
}

#progress {
  margin: 0;
  min-height: 1.2em;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* De ronde accentknop, zoals in de app */
.fab {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  transition: opacity .22s ease, transform .15s var(--ease-out);
}
/* Ruimer raakvlak dan de knop groot is — onderaan het scherm mikt niemand exact */
.fab::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}
.fab:active { transform: scale(.92); }
.fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Tijdens een sessie blijft er niets over dan de adem: geen knop, geen tekst.
   `visibility` erbij, want alleen opacity laat het element bestaan — dan kan het
   tijdens de fade nog even oplichten en lijken alsof er iets te bedienen valt. */
body.running #pill,
body.running #dock,
body.running #store-badges {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
body.running #hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
}

/* ─── Instellingenpaneel ────────────────────────────────────────── */

#panel {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  animation: rise .32s var(--ease-out);
}
#panel[hidden] { display: none; }

@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  #panel { animation: none; }
}

.panel-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-t) + 12px) max(12px, var(--safe-r)) 24px max(12px, var(--safe-l));
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 12px;
}
.panel-head h1 {
  flex: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.panel-foot {
  display: grid;
  place-items: center;
  padding: 12px 0 max(20px, var(--safe-b));
  background: var(--bg);
}

/* Ronde info-knoppen in accentkleur — het herkenbare patroon uit de app */
.icon-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  transition: transform .15s var(--ease-out);
}
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.round { background: none; color: var(--accent-fg); width: var(--tap); height: var(--tap); }
.icon-btn.round svg { width: 22px; height: 22px; stroke-width: 2.4; }

/* De kaart draagt zelf de omhulling: één doorlopend vlak met afgeronde hoeken
   dat bij de kop begint en eindigt na de laatste uitgeklapte optie. Zonder dat
   zweeft de inhoud los van waar hij bij hoort — in lichte modus stond de body
   wit op wit. */
.card {
  margin-bottom: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  user-select: none;
}
.card-head h2 {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.chev {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  color: var(--text-2);
}
.chev svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease-out);
}
.chev[data-open="false"] svg { transform: rotate(-90deg); }

.card-body {
  padding: 14px;
}
.card-body[hidden] { display: none; }
/* Haarlijn tussen kop en inhoud, alleen wanneer er iets openstaat */
.card-body:not([hidden]) { border-top: 1px solid var(--hairline); }

/* Profielrij: info · naam · eigen timing uitklappen. */
.profile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.profile-pick {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1.2px solid color-mix(in srgb, var(--accent-fg) 85%, transparent);
  border-radius: 10px;
  background: var(--pill);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.profile-pick[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent-fg);
  color: var(--on-accent);
}
.icon-btn.dim { background: color-mix(in srgb, var(--accent) 35%, transparent); cursor: default; }
.icon-btn.dim svg { opacity: .7; }

/* De zucht is geen profiel dat je kiest, dus geen omkaderde keuzeknop */
.profile-pick.ghost {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent-fg) 85%, transparent);
  background: none;
  font-weight: 500;
}
.sigh-row {
  justify-content: center;
}
.sigh-row .profile-pick.ghost {
  flex: 0 1 320px;
  min-height: 44px;
}

/* Knop die een techniek voordoet */
.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
  padding: 11px 18px 11px 14px;
  border: 0; border-radius: 24px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 600;
}
.demo-btn svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.demo-btn:active { transform: scale(.97); }

/* Uitgeklapte timing direct onder de bijbehorende profielrij. */
.profile-settings {
  margin: 0 0 14px 16px;
  padding-bottom: 4px;
}

/* Rij met label · stepper · waarde */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
}
.row > .label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row .value {
  flex: 0 0 62px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  font-size: 16px;
}
.row.disabled { opacity: .4; pointer-events: none; }

/* Schakelaarrijen hebben geen kolomuitlijning nodig, dus lange labels
   mogen daar gewoon afbreken in plaats van afgekapt te worden. */
.row.wrap { min-height: 0; padding: 6px 0; }
.row.wrap > .label { white-space: normal; overflow: visible; }

/* De telwijze met één native keuzelijst: compact genoeg om de keuze
   rechtstreeks tussen de instellingen te tonen zonder ze te belasten. */
.choice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 48%);
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  margin: 4px 0;
}
.choice-row > .label { font-size: 16px; }
.choice-row .picker { min-width: 0; padding: 8px 30px 8px 9px; font-size: 15px; }
/* Stepper: − | + , zoals SwiftUI's Stepper */
.stepper {
  flex: 0 0 auto;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pill);
  border: 1px solid var(--hairline);
}
.stepper button {
  width: 44px; height: 44px;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
.stepper button:active { background: var(--hairline); }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper button + button { border-left: 1px solid var(--hairline); }

/* Schakelaar */
.switch {
  flex: 0 0 auto;
  position: relative;
  width: 51px; height: 31px;
  border: 0; border-radius: 16px;
  background: color-mix(in srgb, var(--text-2) 40%, transparent);
  transition: background .22s ease;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  transition: transform .22s var(--ease-out);
}
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* Segmenten (thema, taal) */
.segments {
  display: flex;
  flex-wrap: wrap;              /* acht accenten passen niet op één rij */
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: var(--card);      /* niet --surface: dat is nu de kaart zelf */
}
.segments button {
  flex: 1;
  padding: 7px 4px;
  border: 0; border-radius: 7px;
  background: none;
  font-size: 14px;
  font-weight: 500;
}
.segments button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

/* Kleurkeuze: acht vaste tinten plus een vrije keuze */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.swatch {
  position: relative;
  width: 36px; height: 36px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--swatch);
  transition: transform .15s var(--ease-out);
}
.swatch:active { transform: scale(.9); }

/* Vinkje op de gekozen kleur, in zwart of wit al naar gelang de tint. De
   buitenring gebruikt de aparte foregroundtint, zodat ook een zilveren of
   bijna witte vrije kleur zichtbaar geselecteerd blijft. */
.swatch[aria-pressed="true"],
.swatch.custom[data-on="true"] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-fg);
}
.swatch[aria-pressed="true"]::after,
.swatch.custom[data-on="true"]::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 9px;
  width: 12px;
  height: 7px;
  border-left: 3px solid var(--on-accent);
  border-bottom: 3px solid var(--on-accent);
  transform: rotate(-45deg);
}

/* De vrije keuze verbergt een kleurkiezer achter een regenboog — een
   uitnodiging om te kiezen. Is er eenmaal een eigen kleur gekozen, dan toont
   dit staal die kleur, net als de vaste tinten: een staal hoort te laten zien
   wat de app gebruikt. */
.swatch.custom {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    conic-gradient(#ff2d55, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #5856d6, #af52de, #ff2d55);
}
.swatch.custom[data-on="true"] { background: var(--swatch); }
.swatch.custom input {
  position: absolute;
  inset: -20%;
  width: 140%; height: 140%;
  opacity: 0;
  border: 0; padding: 0;
}

.picker {
  width: 100%;
  min-height: var(--tap);
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--card);      /* niet --surface: dat is nu de kaart zelf */
  color: var(--text);
  font: inherit;
}

.field { margin-bottom: 16px; }
.field > .label { display: block; margin-bottom: 8px; font-size: 16px; }
.field .note { margin: 6px 0 0; font-size: 13px; color: var(--text-2); }

/* Uitleg onder een instelling, alleen zichtbaar met de vraagtekenknop aan */
.note.help {
  margin: -2px 0 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}

/* De vraagtekenknop laat zien of de uitleg aan staat */
.icon-btn[aria-pressed="false"] {
  background: none;
  color: var(--accent-fg);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-fg) 85%, transparent);
}

.divider { height: 1px; margin: 4px 0 14px; background: var(--hairline); border: 0; }

/* Verwijzing naar de iOS-app — app.js toont hem alleen op iPhone en iPad */
.note.appstore {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
}
.note.appstore a { color: var(--accent-fg); font-weight: 600; }

/* De officiële winkelbadges. Googles PNG draagt de voorgeschreven vrije
 * ruimte in het beeld zelf (646×250 om een badge van ~168 hoog), Apples SVG
 * niet — de hoogte- en margewaarden tonen beide badges even groot en houden
 * de zichtbare badge boven het merkminimum van 40px. */
a.store-badge { display: inline-block; line-height: 0; }
img.badge-play { height: 64px; }
img.badge-appstore { height: 43px; margin: 11px; }
#store-badges {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 0;
}
#store-badges[hidden] { display: none; }
/* Zelfde voetafdruk als de echte badge (43px zichtbaar + 11px vrije ruimte),
 * zodat de wissel na livegang niets verschuift — maar bewust géén zwarte
 * badge-look: dat zou een nagemaakte winkelbadge zijn. */
.store-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  height: 43px;
  margin: 11px 0;
  padding: 0 14px;
  /* Smaller dan de badge ernaast: lange talen wikkelen op twee regels,
   * korte (zoals het Duits) blijven vanzelf één regel. */
  max-width: 12em;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.2;
}

.version {
  margin: 4px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-line;      /* de copyrightregel staat op een eigen regel */
  color: var(--text-2);
}

/* ─── Info-sheet ────────────────────────────────────────────────── */

#sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .35);
  animation: fade .2s ease;
}
#sheet[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet-inner {
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px 14px 0 0;
  background: var(--bg);
  animation: rise .3s var(--ease-out);
}
@media (min-width: 640px) {
  #sheet { align-items: center; justify-content: center; }
  .sheet-inner { max-width: 560px; border-radius: 14px; max-height: 86vh; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-inner, #sheet { animation: none; }
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 20px;
  border-bottom: 1px solid var(--hairline);
}
.sheet-head h2 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px max(28px, var(--safe-b));
}
.sheet-body h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 8px;
  font-size: 17px;
  font-weight: 600;
}
.sheet-body h3:first-child { margin-top: 0; }
.sheet-body h3 svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--accent-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-body p { margin: 0 0 8px; font-size: 16px; }
.sheet-body ul { margin: 0; padding-left: 20px; }
.sheet-body li { margin-bottom: 6px; font-size: 16px; }
.sheet-body a { color: var(--accent-fg); overflow-wrap: anywhere; }
/* Bij een smal venster — inclusief 200% tekst-/pagina-zoom op mobiel — krijgen
   lange vertalingen een eigen regel. Geen label wordt ellipsis of dwingt de
   bediening buiten beeld; de 44px-raakdoelen blijven intact. */
@media (max-width: 360px) {
  .profile-settings .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    padding: 6px 0;
  }
  .profile-settings .row > .label {
    grid-column: 1 / -1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .profile-settings .row .stepper {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .profile-settings .row .value {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
  .choice-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 6px 0;
  }
  .choice-row .picker { max-width: 100%; }
}
/* Markeert dat de link de app verlaat en een browservenster opent */
.sheet-body a .ext,
.note.appstore a .ext {
  width: 13px; height: 13px;
  vertical-align: -1px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .75;
}

/* Waarschuwing wanneer instellingen niet bewaard kunnen worden */
.note.warn {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  font-size: 14px;
}

.refs summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
}
.refs summary::-webkit-details-marker { display: none; }
.refs summary svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.refs ul { margin-top: 10px; }

.cadence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 14px;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--text-2);
}
.cadence b {
  padding: 3px 9px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  font-weight: 600;
}

.install-steps { padding-left: 20px; }

/* De makersregel telt drie regels; expliciete regeleinden blijven staan */
.sheet-body p { white-space: pre-line; }

/* De volumeschuif volgt de accentkleur */
.field input[type='range'] { width: 100%; accent-color: var(--accent-fg); }

/* ─── Twee werelden: pil boven, dok onder ───────────────────────── */

#pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: calc(var(--safe-t) + 10px) auto 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--accent-fg) 85%, transparent);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  transition: opacity .22s ease, visibility 0s;
}
#pill .pil-icoon svg {
  display: block;
  width: 16px; height: 16px;
  fill: none; stroke: var(--accent-fg);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
#pill .pil-chev {
  width: 14px; height: 14px;
  fill: none; stroke: var(--text-2);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

#dock {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 26px;
}
.fab.klein {
  width: calc(var(--tap) * .82);
  height: calc(var(--tap) * .82);
}
.fab.klein svg { width: 17px; height: 17px; }

/* Eén paneel, twee gezichten: de profielkiezer valt van boven binnen,
   de instellingen rijzen van onder — zoals in de apps. */
#panel[data-mode="profiles"] [data-card="settings"],
#panel[data-mode="profiles"] #appstore-note,
#panel[data-mode="profiles"] .version { display: none; }
#panel[data-mode="settings"] [data-card="profiles"] { display: none; }
#panel[data-mode="profiles"] { animation: sink .32s var(--ease-out); }
@keyframes sink { from { transform: translateY(-100%); } to { transform: translateY(0); } }