/* Rhythm — activity, rest & sleep
   Palette runs warm → cool along the exertion → rest axis. */
:root{
  --H:#f0614e;  --H-ink:#fff;
  --L:#f2a03d;  --L-ink:#241603;
  --R:#25b3a0;  --R-ink:#04231f;
  --S:#7a6ce0;  --S-ink:#fff;

  --bg:#0e1013; --surface:#171a20; --raised:#1f232b;
  --ink:#eef0f4; --dim:#9aa3b2; --faint:#5b6472;
  --line:#262b34; --hair:#1e232b;
  --accent:#7a6ce0;

  --slot:26px;              /* height of one 30-minute slot */
  --gutter:52px;
  --radius:14px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f6f7f9; --surface:#fff; --raised:#fff;
    --ink:#14171c; --dim:#5d6673; --faint:#98a1ae;
    --line:#e3e6eb; --hair:#eef0f3;
    --L-ink:#3a2503; --R-ink:#032b26;
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0; height:100%; overscroll-behavior:none}
body{
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column;
  height:100dvh; overflow:hidden;
}
h2{margin:0; font-size:13px; font-weight:600; letter-spacing:.02em}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}

/* ---------- top bar ---------- */
/* Explicit columns — flex basis on the button cluster proved unreliable. */
.bar{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center; gap:8px;
  padding:calc(10px + var(--safe-t)) 12px 8px;
  background:var(--bg); flex:none;
}
.title{text-align:left; min-width:0; padding:2px 4px; border-radius:10px; overflow:hidden}
.title strong{display:block; font-size:19px; font-weight:650; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.title span{display:block; font-size:12px; color:var(--dim); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.round{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--surface); border:1px solid var(--line);
  font-size:20px; line-height:1; display:grid; place-items:center;
}
.round.quiet{font-size:17px; color:var(--dim)}
.round:active{background:var(--raised)}

/* ---------- type palette ---------- */
.palette{
  display:flex; gap:6px; padding:2px 12px 10px; flex:none;
  overflow-x:auto; scrollbar-width:none;
}
.palette::-webkit-scrollbar{display:none}
.chip{
  display:flex; align-items:center; gap:5px; flex:none;
  padding:7px 9px 7px 7px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-size:12px; font-weight:500; color:var(--dim); white-space:nowrap;
}
.chip i{width:10px; height:10px; border-radius:3px; flex:none}
.chip[data-type=H] i{background:var(--H)} .chip[data-type=L] i{background:var(--L)}
.chip[data-type=R] i{background:var(--R)} .chip[data-type=S] i{background:var(--S)}
.chip-erase i{background:repeating-linear-gradient(45deg,var(--faint) 0 3px,transparent 3px 6px)}
.chip.is-on{color:var(--ink); border-color:currentColor; background:var(--raised)}
.chip.is-on[data-type=H]{color:var(--H)} .chip.is-on[data-type=L]{color:var(--L)}
.chip.is-on[data-type=R]{color:var(--R)} .chip.is-on[data-type=S]{color:var(--S)}

/* ---------- day headers (week view) ---------- */
.dayhead{
  display:grid; gap:1px; flex:none;
  padding:0 12px 6px; margin-left:var(--gutter);
  border-bottom:1px solid var(--line);
}
.dh{text-align:center; padding:4px 0; border-radius:8px}
.dh b{display:block; font-size:11px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:.06em}
.dh span{display:block; font-size:17px; font-weight:600; margin-top:2px}
.dh.is-today span{color:var(--accent)}
.dh.is-today b{color:var(--accent)}

/* ---------- scroller + board ---------- */
.scroller{flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:0 12px}
.board{display:flex; gap:1px; padding-bottom:8px}
.gutter{width:var(--gutter); flex:none; position:relative}
.glabel{
  position:absolute; right:8px; transform:translateY(-50%);
  font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap;
}

.col{
  flex:1 1 0; min-width:0; position:relative;
  border-radius:10px; background:var(--surface);
  /* Hour rule, then a hairline on the half hour. Both gradients MUST end at
     the same stop: repeating-linear-gradient takes its period from the last
     stop, so a shorter second period drifts against the first down the page. */
  background-image:
    repeating-linear-gradient(to bottom,
      var(--line) 0 1px,
      transparent 1px calc(var(--slot) * 2)),
    repeating-linear-gradient(to bottom,
      transparent 0 var(--slot),
      var(--hair) var(--slot) calc(var(--slot) + 1px),
      transparent calc(var(--slot) + 1px) calc(var(--slot) * 2));
  touch-action:pan-y;
}
.col.is-armed{touch-action:none}
.col.is-today{outline:1px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:0}

/* ---------- blocks ---------- */
.blk{
  position:absolute; left:2px; right:2px;
  border-radius:7px; padding:3px 7px;
  font-size:11px; font-weight:600; line-height:1.25;
  overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; gap:1px;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
}
.blk small{font-weight:500; opacity:.8; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.blk.t-H{background:var(--H); color:var(--H-ink)}
.blk.t-L{background:var(--L); color:var(--L-ink)}
.blk.t-R{background:var(--R); color:var(--R-ink)}
.blk.t-S{background:var(--S); color:var(--S-ink)}
.blk.is-tiny{padding:1px 7px; font-size:10px}
.blk.from-health::after{
  content:""; position:absolute; top:5px; right:6px;
  width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55;
}
.blk.is-sel{box-shadow:0 0 0 2px var(--bg),0 0 0 4px currentColor; z-index:5}

.handle{
  position:absolute; left:0; right:0; height:22px; touch-action:none; z-index:6;
  display:grid; place-items:center;
}
.handle::before{content:""; width:32px; height:4px; border-radius:2px; background:currentColor; opacity:.9}
.handle.top{top:-11px} .handle.bot{bottom:-11px}

.ghost{
  position:absolute; left:2px; right:2px; border-radius:7px;
  opacity:.55; pointer-events:none; z-index:4;
  border:2px dashed currentColor;
}
.ghost.t-H{background:var(--H); color:var(--H)} .ghost.t-L{background:var(--L); color:var(--L)}
.ghost.t-R{background:var(--R); color:var(--R)} .ghost.t-S{background:var(--S); color:var(--S)}
.ghost.t-{background:var(--faint); color:var(--faint)}

.nowline{position:absolute; left:0; right:0; height:2px; background:var(--accent); z-index:3; pointer-events:none}
.nowline::before{
  content:""; position:absolute; left:-3px; top:-3px;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}

.tip{text-align:center; font-size:12px; color:var(--faint); padding:2px 0 calc(16px + var(--safe-b)); margin:0}

/* ---------- login gate ---------- */
body.gated > *:not(.gate){ display:none !important }
.gate{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.gate-inner{width:100%; max-width:340px; text-align:center}
.gate-mark{
  width:64px; height:104px; margin:0 auto 22px; border-radius:20px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.gate-mark i{display:block; width:100%}
.gate-mark i:nth-child(1){background:var(--S); flex:30}
.gate-mark i:nth-child(2){background:var(--L); flex:16}
.gate-mark i:nth-child(3){background:var(--H); flex:24}
.gate-mark i:nth-child(4){background:var(--R); flex:30}
.gate h1{font-size:27px; font-weight:650; letter-spacing:-.02em; margin:0 0 6px}
.gate-sub{margin:0 0 28px; color:var(--dim); font-size:14px}
.gate-note{margin:14px 0 0; font-size:12.5px; color:var(--faint)}
.gate-msg{margin:0 0 16px; font-size:14px; color:var(--dim); line-height:1.5}
.gate-msg strong{color:var(--ink); word-break:break-all}
.gate-err{
  margin:18px 0 0; font-size:13px; color:var(--H);
  background:color-mix(in srgb,var(--H) 12%,transparent);
  border-radius:10px; padding:10px 12px; text-align:left;
}
#gate-pending .btn + .btn{margin-top:8px}

/* ---------- sheets ---------- */
.backdrop{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center;
  backdrop-filter:blur(2px);
}
.sheet{
  background:var(--surface); width:100%; max-width:460px;
  border-radius:20px 20px 0 0; padding:8px 16px calc(18px + var(--safe-b));
  max-height:86dvh; overflow-y:auto;
  animation:rise .18s ease-out;
}
@keyframes rise{from{transform:translateY(14px)}}
@media (min-width:700px){
  .backdrop{align-items:center}
  .sheet{border-radius:18px; max-height:80dvh}
}
.grab{width:34px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 12px}
.sheet-when{margin:0 0 12px; font-size:16px; font-weight:600; text-align:center}
.sheet-actions{display:flex; gap:8px; margin-top:14px}
.sheet-actions .btn{flex:1}

.seg{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px}
.segbtn{
  display:grid; justify-items:center; gap:5px; padding:10px 4px;
  border-radius:11px; background:var(--raised); border:1px solid var(--line);
  font-size:11px; font-weight:600; color:var(--dim);
}
.segbtn i{width:16px; height:16px; border-radius:5px}
.segbtn[data-type=H] i{background:var(--H)} .segbtn[data-type=L] i{background:var(--L)}
.segbtn[data-type=R] i{background:var(--R)} .segbtn[data-type=S] i{background:var(--S)}
.segbtn.is-on{color:var(--ink); border-color:currentColor}
.segbtn.is-on[data-type=H]{color:var(--H)} .segbtn.is-on[data-type=L]{color:var(--L)}
.segbtn.is-on[data-type=R]{color:var(--R)} .segbtn.is-on[data-type=S]{color:var(--S)}

input[type=text]{
  width:100%; font:inherit; font-size:16px; padding:12px 13px;
  border-radius:11px; border:1px solid var(--line);
  background:var(--raised); color:var(--ink);
}
input[type=text]::placeholder{color:var(--faint)}

.btn{
  min-height:44px; padding:0 16px; border-radius:11px;
  background:var(--raised); border:1px solid var(--line);
  font-size:14px; font-weight:600;
}
.btn.solid{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.danger{color:var(--H); border-color:color-mix(in srgb,var(--H) 45%,transparent)}
.btn.wide{width:100%; margin-top:8px}

.mgroup{padding:14px 0; border-bottom:1px solid var(--line)}
.mgroup h2{margin-bottom:10px}
.mgroup input[type=text]{margin-bottom:8px}
.mrow{display:flex; gap:8px; flex-wrap:wrap}
.mrow .btn{flex:1 1 auto; min-width:96px}
.mstatus{margin:0 0 10px; font-size:13px; color:var(--dim)}
.mstatus.ok{color:var(--R); font-weight:600}
.switch{display:flex; gap:9px; align-items:center; margin-top:12px; font-size:13px; color:var(--dim)}
.switch input{width:19px; height:19px; accent-color:var(--accent); flex:none}
.help{font-size:12.5px; color:var(--dim); margin-top:4px}
.help summary{cursor:pointer; color:var(--accent)}
.help ol{padding-left:17px; margin:8px 0 0} .help li{margin-bottom:5px}
.help code{background:var(--raised); padding:2px 5px; border-radius:5px; font-size:11px; word-break:break-all}

.toast{
  position:fixed; left:50%; bottom:calc(22px + var(--safe-b)); transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:22px;
  font-size:13.5px; font-weight:500; z-index:99; max-width:86vw; text-align:center;
}

/* ---------- print: fall back to the clinic-friendly weekly grid ---------- */
.printout{display:none}
@media print{
  body{height:auto; overflow:visible; background:#fff; color:#000; display:block}
  .bar,.palette,.dayhead,.scroller,.backdrop,.toast{display:none !important}
  .printout{display:block; padding:0}
  .printout h1{font-size:15px; margin:0 0 3px}
  .printout p.range{margin:0 0 12px; font-size:11px; color:#444}
  .ptable{border-collapse:collapse; width:100%; font-size:9px; table-layout:fixed}
  .ptable th,.ptable td{border:1px solid #000; text-align:center; padding:0}
  .ptable th.d{width:64px; text-align:left; padding:3px 5px; font-size:10px}
  .ptable thead th{padding:3px 1px; font-weight:600}
  .ptable td{height:20px}
  .ptable td.noon{border-left:2px solid #000}
  .p-H{background:#f0614e} .p-L{background:#f2a03d}
  .p-R{background:#25b3a0} .p-S{background:#7a6ce0}
  .pkey{display:flex; gap:16px; margin-top:10px; font-size:10px; list-style:none; padding:0}
  .pkey li{display:flex; align-items:center; gap:5px}
  .pkey i{width:11px; height:11px; border:1px solid #000; display:inline-block}
  .pnotes{margin-top:12px; font-size:10px; page-break-inside:avoid}
  .pnotes div{margin-bottom:3px}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  @page{size:A4 landscape; margin:12mm}
}