:root{
  --ink:#0F1220;
  --raised:#181D2E;
  --soft:#212840;
  --line:#2C3450;
  --text:#E8E6F2;
  --muted:#9B9EBB;
  --lamp:#F3C879;
  --yes:#8FC9AC;
  --no:#E19797;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.5;
  padding:0 18px calc(88px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:33rem;margin:0 auto}
h1{font-size:30px;line-height:1.15;letter-spacing:-.01em;font-weight:700;margin:8px 0 10px}
h1 em{font-style:normal;color:var(--lamp)}
h2{font-size:20px;margin-bottom:6px}
section{padding:24px 0;border-top:1px solid var(--line)}
section:first-child{border-top:0}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sub{color:var(--muted);font-size:15px;margin-bottom:14px}
.sub.wrong{color:var(--no)}
.empty{color:var(--muted);font-size:15px;padding:8px 0}
.pagehead{padding:38px 0 24px;border-top:0}

/* hero */
.hero{padding:40px 0 26px;text-align:center;border-top:0}
.clock{font-size:56px;line-height:1;font-weight:700;letter-spacing:-.02em;margin:10px 0 18px;
  font-variant-numeric:tabular-nums}
.clock.muted{color:var(--muted)}
.asleep .clock{color:var(--lamp)}

button{font:inherit;cursor:pointer}
.big{
  width:100%;border:0;border-radius:var(--r);padding:22px;
  font-size:20px;font-weight:700;letter-spacing:.01em;
}
.big.sleep{background:var(--lamp);color:#221B08}
.big.wake{background:var(--soft);color:var(--text);border:1px solid var(--line)}
.big:active{transform:scale(.99)}

.ago{display:flex;gap:8px;margin-top:12px;justify-content:center;flex-wrap:wrap}
.ago button{
  background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:8px 14px;font-size:13px;
}

/* wake window */
.window{margin:6px 0 22px}
.bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.bar span{display:block;height:100%;background:var(--muted);border-radius:99px;
  transition:width .4s ease}
.window.in .bar span{background:var(--yes)}
.window.late .bar span{background:var(--no)}
.windowtext{font-size:15px;color:var(--muted);margin-top:10px}
.window.in .windowtext{color:var(--yes)}
.window.late .windowtext{color:var(--no)}

/* totals */
.totals{display:flex;gap:10px;text-align:center}
.totals div{flex:1;background:var(--raised);border-radius:var(--r);padding:14px 6px}
.totals .n{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.totals .l{display:block;font-size:12px;color:var(--muted);letter-spacing:.05em;margin-top:2px}

/* log */
.entry{background:var(--raised);border-radius:var(--r);padding:14px;margin-top:10px}
.entry.live{border:1px solid var(--lamp)}
.entry header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.times{font-weight:700;font-variant-numeric:tabular-nums}
.len{color:var(--muted);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{
  background:var(--soft);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:9px 13px;font-size:13px;
}
.chip.picked{background:var(--lamp);border-color:var(--lamp);color:#221B08;font-weight:700}
details{margin-top:12px}
summary{color:var(--muted);font-size:13px;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"⋯ ";letter-spacing:.1em}
.edit{display:flex;gap:8px;align-items:flex-end;margin-top:12px;flex-wrap:wrap}
.edit label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.edit input{
  background:var(--soft);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:9px 10px;font:inherit;font-size:16px;
}
.save{background:var(--soft);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:10px 16px;font-size:14px}
.row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ghost{background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:8px 14px;font-size:13px}
.ghost.danger{color:var(--no);border-color:#4A2E37}

/* week */
.dayrow{padding:14px 0;border-bottom:1px solid var(--line)}
.dayrow:last-child{border-bottom:0}
.dayrow.today .date{color:var(--lamp)}
.dayhead{display:flex;justify-content:space-between;margin-bottom:8px}
.dayhead .tot{color:var(--muted);font-variant-numeric:tabular-nums}
.daymeta{font-size:13px;color:var(--muted);margin-top:8px}
.daymeta .cot{color:var(--lamp)}

/* plan */
.card{background:var(--raised);border-radius:var(--r);padding:18px;border-top:0}
.card .from{color:var(--muted)}
.card .arrow{color:var(--lamp);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;margin:12px 0}
.ladder{list-style:none;counter-reset:l;margin-top:12px}
.ladder li{background:var(--raised);border-left:3px solid var(--line);
  border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin-bottom:8px}
.ladder .stage{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--lamp)}
.ladder .steps{display:block;margin-top:4px;font-size:16px}
.steps-list{margin:10px 0 0 20px}
.steps-list li{padding:7px 0;border-bottom:1px solid var(--line)}
.steps-list li:last-child{border-bottom:0}
.note{background:var(--raised);border-left:3px solid var(--lamp);
  border-radius:0 var(--r) var(--r) 0;padding:16px;margin-top:18px;font-size:16px}
ul.rules{list-style:none;margin-top:6px}
ul.rules li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
ul.rules li:last-child{border-bottom:0}
.mark{font-weight:700}
.do .mark{color:var(--yes)}
.dont .mark{color:var(--no)}
.do h2{color:var(--yes)}
.dont h2{color:var(--no)}
.closing{background:linear-gradient(160deg,var(--soft),var(--raised));
  border-radius:var(--r);padding:22px;border-top:0;margin-top:24px}
.closing .big{font-size:20px;font-weight:700;line-height:1.3;margin-bottom:12px;
  width:auto;padding:0;background:none;color:var(--text)}
.closing .heart{color:var(--lamp)}

/* alerts */
#alerts-section{padding-top:6px}
#push-status{margin-bottom:14px}

/* settings */
.saved{background:var(--raised);border-left:3px solid var(--yes);color:var(--yes);
  border-radius:0 10px 10px 0;padding:12px 14px;font-size:15px;margin-bottom:4px}
.settings-now{margin-bottom:4px}
.settings-now .from b{color:var(--lamp)}
.srow{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:10px}
.srow.fallback{border-style:dashed}
.srow legend{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--lamp);padding:0 6px}
.srow.fallback legend{color:var(--muted)}
.srow .wide{display:block;font-size:12px;color:var(--muted)}
.srow .wide input{width:100%;margin-top:4px}
.mins{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* 96px lets all three fit across a phone; wider and they wrap 2 + 1. */
.mins label{flex:1;min-width:96px;font-size:12px;color:var(--muted);
  display:flex;flex-direction:column;gap:4px;position:relative}
.mins .unit{position:absolute;right:11px;bottom:11px;font-size:12px;color:var(--muted);
  pointer-events:none}
.schedule input,.alertsettings input[type=number],.alertsettings input[type=time]{
  background:var(--soft);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:10px 11px;font:inherit;font-size:16px;width:100%}
/* Leave room for the "min" suffix sitting inside the field. */
.mins input[type=number]{padding-right:38px}
.check{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--lamp);flex:0 0 auto}
.srow-actions{margin-top:14px}
.hint{color:var(--muted);font-size:13px;margin-top:10px}
.hint a{color:var(--lamp)}
.alertsettings .big{margin-top:18px}
.schedule .big{margin-top:4px}

/* pin */
.pinform{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.pinform input{background:var(--raised);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r);padding:18px;font-size:22px;text-align:center;letter-spacing:.3em}

/* nav */
nav{position:fixed;left:0;right:0;bottom:0;z-index:10;
  background:rgba(15,18,32,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));display:flex}
nav a{flex:1;text-align:center;padding:11px 4px;border-radius:10px;color:var(--muted);
  text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.04em}
nav a.on{color:var(--lamp);background:var(--raised)}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--lamp);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}