:root { --bg:#fafaf8; --fg:#1c1c1e; --muted:#6e6e73; --line:#e5e5ea; --card:#fff; --chip:#f0f0f3; --accent:#2f6fde; --soft:#eef3fd;
        --ok:#1f9d55; --warn:#c2410c; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111113; --fg:#ececf0; --muted:#9a9aa2; --line:#2a2a2e; --card:#1a1a1d; --chip:#26262a; --soft:#1b2436;
          --ok:#3ecf7e; --warn:#fb923c; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.45 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif; -webkit-text-size-adjust:100%; }
body.brief { --accent:#d97706; --soft:#fdf3e2; }
body.wrapup { --accent:#4f46e5; --soft:#eeedfd; }
body.check { --accent:#0d9488; --soft:#e6f5f3; }
@media (prefers-color-scheme: dark) { body.brief { --accent:#f59e0b; --soft:#2a2112; } body.wrapup { --accent:#818cf8; --soft:#1c1d35; } body.check { --accent:#2dd4bf; --soft:#112725; } }
main { max-width:640px; margin:0 auto; padding:16px 16px 48px; }
header h1 { font-size:26px; margin:4px 0 0; letter-spacing:-.01em; }
header p { margin:2px 0 8px; color:var(--muted); font-size:15px; }
nav { position:sticky; top:0; z-index:1; display:flex; gap:8px; overflow-x:auto; margin:0 -16px; padding:8px 16px; scrollbar-width:none;
      background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(8px); }
nav a { flex:none; font-size:14px; color:var(--fg); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:4px 12px; background:var(--card); }
h2 { font-size:19px; margin:26px 0 8px; scroll-margin-top:56px; display:flex; align-items:baseline; gap:8px; }
h2 .n { font-size:13px; color:var(--accent); font-weight:700; }
h3 { font-size:14px; margin:16px 0 4px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.note-line { color:var(--muted); font-size:15px; margin:0 0 6px; }
.list { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.item { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; padding:11px 14px; border-top:1px solid var(--line); }
.item:first-child { border-top:0; }
.code { font-size:12px; font-weight:700; color:var(--accent); background:var(--soft); border-radius:6px; padding:2px 6px; align-self:start; margin-top:3px; font-variant-numeric:tabular-nums; }
.item.nocode { grid-template-columns:1fr; }
.main { min-width:0; }
.hero, .card { display:flex; gap:10px; align-items:flex-start; }
.time { font-weight:600; font-variant-numeric:tabular-nums; margin-right:6px; }
code { font:14.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--chip); border-radius:6px; padding:1px 6px; word-break:break-word; cursor:pointer; }
code.copied { outline:2px solid var(--ok); }
.plain { word-break:break-word; }
.pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.pill { font-size:13px; border:1px solid var(--line); border-radius:999px; padding:1px 9px; color:var(--muted); }
.pill.go { color:var(--accent); border-color:var(--accent); font-weight:600; }
.pill.bad { color:var(--warn); border-color:var(--warn); }
.sub { color:var(--muted); font-size:15px; margin-top:4px; }
.done .plain, .done code { opacity:.75; }
.done .code { color:var(--ok); background:transparent; font-size:15px; }
.hero { border:1px solid var(--accent); background:var(--soft); border-radius:14px; padding:12px 14px; }
.hero .code { margin-right:8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:10px 0; }
.card h4 { margin:0 0 6px; font-size:17px; }
.card ul { margin:6px 0; padding-left:20px; }
.card li { margin:4px 0; }
.box { border-radius:10px; padding:8px 11px; margin-top:8px; font-size:15px; background:var(--chip); }
.box.web { background:var(--soft); }
.muted .list { opacity:.8; }
footer { margin-top:28px; padding:12px 14px; border-radius:14px; background:var(--soft); font-size:16px; }
.edit-btn { float:right; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:8px; font-size:15px; padding:0 8px; margin-left:8px; cursor:pointer; }
.edited { box-shadow:inset 3px 0 0 var(--accent); }
.panel { margin-top:8px; display:grid; gap:8px; }
.panel label { display:grid; gap:2px; font-size:13px; color:var(--muted); }
.panel input, .panel textarea { font-size:16px; font-family:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 9px; width:100%; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bar { position:fixed; left:0; right:0; bottom:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 90%,transparent);
       backdrop-filter:blur(8px); border-top:1px solid var(--line); display:none; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.bar.on { display:flex; }
.bar button { border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:10px; padding:9px 14px; font-size:15px; }
.bar #copy { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.bar textarea { width:100%; height:90px; font:13px ui-monospace,monospace; }

.acts { float:right; display:flex; gap:6px; margin-left:8px; }
.acts button { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:8px; font-size:15px; padding:0 9px; cursor:pointer; line-height:26px; }
.acts .edit-btn { float:none; margin:0; padding:0 9px; }
.will-complete .acts .complete { color:#fff; background:var(--ok); border-color:var(--ok); }
.will-drop .acts .drop { color:#fff; background:var(--warn); border-color:var(--warn); }
.will-complete code, .will-drop code { text-decoration:line-through; opacity:.6; }
.agenda { margin-top:4px; }
.slot { display:grid; grid-template-columns:44px 10px 1fr; gap:0 6px; }
.when { text-align:right; font-variant-numeric:tabular-nums; font-size:15px; font-weight:600; padding-top:10px; }
.when span { display:block; font-weight:400; color:var(--muted); font-size:13px; }
.rail { position:relative; }
.rail::before { content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:var(--line); }
.rail i { position:absolute; left:1px; top:14px; width:12px; height:12px; border-radius:50%; background:var(--c, var(--accent)); border:2px solid var(--bg); }
.blk { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--c, var(--accent)); border-radius:10px; padding:8px 11px; margin:4px 0; min-width:0; }
.blk .item { border:0; padding:0; }
.blk .tag { font-size:12px; color:var(--muted); margin-top:2px; }
.blk.fixed { background:var(--chip); border-style:dashed; border-left-style:solid; }
.blk.opt { opacity:.75; border-style:dashed; border-left-style:solid; }
.gap { margin-left:72px; color:var(--muted); font-size:13px; padding:2px 0; font-style:italic; }
.now { display:flex; align-items:center; gap:8px; margin:4px 0; color:var(--warn); font-size:13px; font-weight:700; }
.now::before { content:""; flex:none; width:10px; height:10px; border-radius:50%; background:var(--warn); }
.now::after { content:""; flex:1; border-top:2px solid var(--warn); }
.cat-work { --c:#d97706; } .cat-uni { --c:#2f6fde; } .cat-learn { --c:#1f9d55; } .cat-proj { --c:#8b5cf6; }
.cat-home { --c:#e11d74; } .cat-admin { --c:#0d9488; } .cat-self { --c:#6e6e73; } .cat-fixed { --c:#9a9aa2; }

.qa { margin:10px 0 4px; }
.q { font-size:16px; margin-bottom:4px; }
.ans { width:100%; font-size:16px; font-family:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 9px; }
.qa.answered .q { color:var(--accent); }

footer label { display:inline-flex; align-items:center; gap:8px; margin:4px 12px 4px 0; }
footer input { font-size:18px; width:9.5em; min-width:9.5em; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 9px; }

/* agenda rows: the title gets the full width, the buttons sit under it */
.blk .item { grid-template-columns:auto 1fr; gap:2px 6px; }
.blk .main > div:first-child { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 4px; }
.blk .main > div:first-child > code { flex:1 1 0; min-width:0; }
.blk .acts { float:none; margin:4px 0 0; order:3; flex-basis:100%; }
.blk .acts button { font-size:13px; padding:0 8px; line-height:22px; }
.badge { flex:none; }

.tools { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0; }
.tools button, .past-sum { font:inherit; font-size:14px; border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:999px; padding:6px 12px; cursor:pointer; }
.agenda .past { display:none; }
.agenda.show-past .past { display:grid; }
.agenda.show-past .gap.past, .agenda.show-past .now.past { display:block; }
.past-sum { display:block; margin:6px 0 6px 56px; color:var(--muted); }
.slot.past { opacity:.55; }
#toast { position:fixed; left:12px; right:12px; bottom:14px; padding:10px 14px; border-radius:12px; background:var(--fg); color:var(--bg); font-size:15px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:9; }
#toast.on { opacity:.96; }

.when .code { display:inline-block; margin-top:5px; font-size:12px; padding:1px 6px; }

.will-frog { box-shadow: inset 3px 0 0 var(--ok); }
.will-frog .acts .frog { background:var(--ok); border-color:var(--ok); }

footer #sleep_dur { width:5em; min-width:5em; }

.pill.go.cancelable { background:transparent; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.pill.go.cancelled { text-decoration:line-through; opacity:.5; }
.item:not(.edited):not(.will-complete):not(.will-drop):not(.will-frog):not(.has-cancel) .act.reset { display:none; }