/* Pulsbuch: ein Instrumentenbrett für Erholung, Belastung und Schlaf.
   Aufbau: Kopf mit Abruf-Status, Reiter (oben am Computer, unten am Handy), Karten im Raster (2 Spalten breit, 1 Spalte schmal). */
:root{
  --bg:#eef1f4; --surface:#ffffff; --surface-2:#f4f6f9; --ink:#121820; --muted:#5b6672; --line:#dbe1e7;
  --accent:#1d6bcc; --accent-ink:#ffffff; --accent-soft:#e3eefb; --sleep:#5f4fc9; --sleep-soft:#ebe8fb;
  --good:#127a4b; --warn:#8a6700; --bad:#c22f2f; --good-soft:#e2f4ea; --warn-soft:#fbf2d6; --bad-soft:#fbe5e5;
  --good-mark:#16935a; --warn-mark:#d9a400; --bad-mark:#d33c3c;
  --z1:#9fb3c8; --z2:#3ba776; --z3:#e0b237; --z4:#e5803a; --z5:#d6453d;
  --font:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-base:15px; --radius:14px; --navh:0px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0d1217; --surface:#151c24; --surface-2:#1b232d; --ink:#e6ebf0; --muted:#93a0ad; --line:#26303b;
  --accent:#5aa2f7; --accent-ink:#06121f; --accent-soft:#17283d; --sleep:#a094f5; --sleep-soft:#231f3d;
  --good:#3fcf8c; --warn:#e9bd45; --bad:#f37474; --good-soft:#12291f; --warn-soft:#2c2512; --bad-soft:#331919;
  --good-mark:#33c482; --warn-mark:#e6b83c; --bad-mark:#f06a6a; --z1:#6c8196; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0d1217; --surface:#151c24; --surface-2:#1b232d; --ink:#e6ebf0; --muted:#93a0ad; --line:#26303b;
  --accent:#5aa2f7; --accent-ink:#06121f; --accent-soft:#17283d; --sleep:#a094f5; --sleep-soft:#231f3d;
  --good:#3fcf8c; --warn:#e9bd45; --bad:#f37474; --good-soft:#12291f; --warn-soft:#2c2512; --bad-soft:#331919;
  --good-mark:#33c482; --warn-mark:#e6b83c; --bad-mark:#f06a6a; --z1:#6c8196; color-scheme:dark }
html.big{ --fs-base:18px }
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--fs-base); line-height:1.45;
  padding-top:env(safe-area-inset-top,0px); -webkit-tap-highlight-color:transparent }
.wrap{ max-width:1100px; margin:0 auto; padding:10px 16px 48px }
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.01em; text-wrap:balance }
h2{ font-size:1.12em } h3{ font-size:1em }
p{ margin:0 0 8px } p:last-child{ margin-bottom:0 }
.num{ font-variant-numeric:tabular-nums }
.muted{ color:var(--muted) } .small{ font-size:.86em }
a{ color:var(--accent) }
button,input,select,textarea{ font:inherit; color:inherit }
[hidden]{ display:none !important }

/* Kopf */
header.top{ display:flex; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap; padding:6px 0 10px }
.brand{ display:flex; align-items:center; gap:10px; min-width:0 }
.brand img{ width:30px; height:30px; border-radius:8px }
.brand h1{ font-size:1.45em }
.syncline{ display:flex; align-items:center; gap:8px; font-size:.84em; color:var(--muted); min-width:0 }
.syncline .dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none }
.syncline .dot.good{ background:var(--good-mark) } .syncline .dot.bad{ background:var(--bad-mark) } .syncline .dot.busy{ background:var(--accent); animation:pulse 1s infinite alternate }
@keyframes pulse{ from{ opacity:.35 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .syncline .dot.busy{ animation:none } }

/* Reiter */
nav.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:14px; overflow-x:auto; scrollbar-width:none }
nav.tabs button{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:.95em; background:none; border:none; color:var(--muted);
  padding:10px 12px; cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap }
nav.tabs button svg{ width:18px; height:18px; flex:none }
nav.tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent) }
@media (max-width:760px){
  :root{ --navh:62px }
  body{ padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px)) }
  nav.tabs{ position:fixed; z-index:5; left:0; right:0; bottom:0; margin:0; border-bottom:none; border-top:1px solid var(--line);
    background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px)); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0 }
  nav.tabs button{ flex-direction:column; gap:2px; font-size:.68em; padding:6px 2px; border-bottom:none; border-radius:10px; min-height:52px; justify-content:center }
  nav.tabs button svg{ width:22px; height:22px }
  nav.tabs button[aria-selected="true"]{ color:var(--accent) }
  .wrap{ padding-inline:12px }
}

/* Bausteine */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:8px 13px; cursor:pointer; font-weight:600; min-height:38px; text-decoration:none; color:var(--ink) }
.btn:hover{ border-color:var(--muted) }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.btn.danger{ color:var(--bad) }
.btn.ghost{ background:none; border-color:transparent; color:var(--accent); padding-inline:8px }
.btn.sq{ width:38px; padding:0 }
.btn[disabled]{ opacity:.5; cursor:default }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
input[type=number],input[type=text],input[type=password],input[type=date],input[type=time],select,textarea{
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:8px 10px; width:100%; min-height:38px }
textarea{ resize:vertical }
label.f{ display:flex; flex-direction:column; gap:4px; font-size:.86em; color:var(--muted); min-width:0 }
label.f > span{ font-weight:600 }
.grid{ display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid > .wide{ grid-column:1 / -1 }
@media (max-width:760px){ .grid{ grid-template-columns:minmax(0,1fr); gap:12px } }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; min-width:0 }
.card > h2, .card > .head{ margin-bottom:10px }
.head{ display:flex; justify-content:space-between; align-items:baseline; gap:6px 10px; flex-wrap:wrap }
.banner{ background:var(--accent-soft); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:14px; display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap }
.banner p{ margin:0; flex:1 1 260px }
.banner.warn{ background:var(--warn-soft) } .banner.bad{ background:var(--bad-soft) }
.daynav{ display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap }
.daynav .d{ font-weight:700; font-size:1.08em; min-width:12ch; text-align:center }
.note{ font-size:.85em; color:var(--muted) }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.spacer{ flex:1 }

/* Ringe */
.dials{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 8px 14px; margin-bottom:14px }
.dial{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; min-width:0; background:none; border:none; padding:0; cursor:pointer; color:inherit }
.dial svg{ width:100%; max-width:150px; height:auto }
.dial .lbl{ font-size:.82em; color:var(--muted); font-weight:700 }
.dial .sub{ font-size:.8em; color:var(--muted); min-height:1.3em }
.dial .arc{ transition:stroke-dasharray .7s cubic-bezier(.2,.8,.2,1) }
@media (prefers-reduced-motion: reduce){ .dial .arc{ transition:none } }

.pill{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:.8em; font-weight:700; white-space:nowrap }
.pill.good{ background:var(--good-soft); color:var(--good) } .pill.warn{ background:var(--warn-soft); color:var(--warn) } .pill.bad{ background:var(--bad-soft); color:var(--bad) } .pill.na{ background:var(--surface-2); color:var(--muted) }

table.t{ width:100%; border-collapse:collapse; font-size:.92em }
table.t th{ text-align:left; font-weight:600; color:var(--muted); font-size:.85em; padding:4px 6px; border-bottom:1px solid var(--line) }
table.t td{ padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:top; font-variant-numeric:tabular-nums }
table.t tr:last-child td{ border-bottom:none }
table.t td.r, table.t th.r{ text-align:right; white-space:nowrap }
.tscroll{ overflow-x:auto }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px }
.stat{ background:var(--surface-2); border-radius:10px; padding:9px 11px; min-width:0 }
.stat .k{ font-size:.78em; color:var(--muted); font-weight:600 }
.stat .v{ font-size:1.35em; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap }
.stat .v small{ font-size:.6em; color:var(--muted); font-weight:500 }
.stat .d{ font-size:.78em; color:var(--muted) }
.stat .d.up{ color:var(--good) } .stat .d.down{ color:var(--bad) }

.stages{ display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--surface-2); margin-block:8px; gap:2px }
.stages span{ display:block; height:100% }
.legend{ display:flex; gap:6px 12px; flex-wrap:wrap; font-size:.82em; color:var(--muted) }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px }
.bar{ height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden }
.bar > span{ display:block; height:100%; border-radius:4px }

/* Diagramme mit Hinweisfenster */
.chart{ position:relative; width:100%; min-height:150px; touch-action:pan-y }
.chart svg{ display:block; overflow:visible }
.chart .guide{ position:absolute; top:6px; bottom:22px; width:1px; background:var(--muted); opacity:.5; pointer-events:none }
.tip{ position:absolute; z-index:3; pointer-events:none; background:var(--ink); color:var(--bg); border-radius:9px; padding:7px 10px; font-size:.82em; line-height:1.35; white-space:nowrap; box-shadow:0 4px 18px rgb(0 0 0 / .18) }
.tip b{ display:block; font-size:1.02em }
.tip .sw{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px }

/* Tagebuch */
.jrow{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line) }
.jrow:last-of-type{ border-bottom:none }
.jrow .q{ flex:1; min-width:0 }
.yn{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; flex:none }
.yn button{ border:none; background:var(--surface); padding:7px 13px; cursor:pointer; font-weight:600; min-width:54px; min-height:36px; color:var(--muted) }
.yn button + button{ border-left:1px solid var(--line) }
.yn button[aria-pressed="true"][data-v="yes"]{ background:var(--accent); color:var(--accent-ink) }
.yn button[aria-pressed="true"][data-v="no"]{ background:var(--surface-2); color:var(--ink) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ border:1px solid var(--line); background:var(--surface-2); border-radius:99px; padding:6px 12px; cursor:pointer; font-weight:600; font-size:.9em; min-height:34px }
.chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.insight{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding-block:9px; border-bottom:1px solid var(--line) }
.insight:last-of-type{ border-bottom:none }
.eff{ font-weight:700; font-size:1.1em; font-variant-numeric:tabular-nums }
.eff.pos{ color:var(--good) } .eff.neg{ color:var(--bad) }

/* Woche */
.wkdays{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; align-items:end }
.wkday{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.8em; color:var(--muted); background:none; border:none; padding:0; cursor:pointer }
.wkday .col{ width:100%; max-width:38px; height:110px; background:var(--surface-2); border-radius:8px; position:relative; overflow:hidden }
.wkday .col span{ position:absolute; left:0; right:0; bottom:0; border-radius:8px }
.wkday b{ color:var(--ink); font-variant-numeric:tabular-nums }
.wklines li{ margin-bottom:6px }

/* Formulare */
.formrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; align-items:end }
.drop{ border:2px dashed var(--line); border-radius:var(--radius); padding:22px; text-align:center; background:var(--surface-2); cursor:pointer }
.drop.over{ border-color:var(--accent); background:var(--accent-soft) }
.check{ display:flex; align-items:center; gap:10px; font-size:.92em; cursor:pointer; min-height:38px }
.check input{ width:20px; height:20px; accent-color:var(--accent); flex:none }
.why td:first-child{ font-weight:600 }
.inline-confirm{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; padding:10px; border-radius:10px; background:var(--bad-soft) }
ol.steps{ padding-left:22px; margin:6px 0 10px } ol.steps li{ margin-bottom:6px }
details > summary{ cursor:pointer; font-weight:600; padding:4px 0 }
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:2px; gap:2px; flex-wrap:wrap }
.seg button{ border:none; background:none; border-radius:8px; padding:6px 11px; cursor:pointer; font-weight:600; color:var(--muted); min-height:32px }
.seg button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgb(0 0 0 / .12) }
.list-act{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); width:100%; background:none; border-left:0; border-right:0; border-top:0; text-align:left; cursor:pointer; color:inherit }
.list-act:last-child{ border-bottom:none }
.list-act .ic{ width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none }
.list-act .ic svg{ width:18px; height:18px }
.list-act .m{ flex:1; min-width:0 }
.list-act .m b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.list-act .ld{ text-align:right; font-variant-numeric:tabular-nums }
.edit{ background:var(--surface-2); border-radius:10px; padding:12px; margin:4px 0 8px }

.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + var(--navh) + env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg);
  padding:10px 16px; border-radius:10px; font-weight:600; z-index:9; max-width:calc(100% - 32px); display:flex; gap:12px; align-items:center }
.toast button{ background:none; border:none; color:inherit; font-weight:700; text-decoration:underline; cursor:pointer; padding:0 }
.sig{ display:flex; gap:10px; align-items:flex-start }
.sig svg{ width:22px; height:22px; flex:none; color:var(--warn) }
.card.alert{ border-color:color-mix(in srgb, var(--warn-mark) 55%, var(--line)); background:linear-gradient(var(--warn-soft), var(--surface) 70%) }
.btn svg{ width:18px; height:18px; flex:none }
@media (max-width:420px){ table.t{ font-size:.86em } table.t td, table.t th{ padding:6px 4px } .card{ padding:14px } }