/* Shared Corella look — every page links this, then adds only its own layout.
   Type + stripe come from the DDD Launch Map artifact; navy ink and the
   fall-yellow add button come from the original (lost) Corella tracker. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@500;600&display=swap");

:root{
  --pink:#FA0080; --cyan:#00DDFA; --yellow:#FADD00; --olive:#A59837; --plum:#7A3D5D; --teal:#3D737A;
  --navy:#14213d; --navy-soft:#e3e7f1;
  --fall:#f2a71b; --fall-ink:#14213d;
  --bg:#f6f4f0; --surface:#ffffff; --surface-2:#faf8f5; --line:#e4dfd7;
  --fg:#14213d; --muted:#5d6478; --faint:#9096a6; --charcoal:#33373d; --strike:#7fa88a;
  --accent:var(--navy); --accent-soft:var(--navy-soft);
  --done:#2f6a72;
  --red:#c0392b; --red-soft:#fbe6e3;
  --orange:#d9730d; --orange-soft:#fdeedd;
  --amber:#b38f00; --amber-soft:#faf3cf;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif;
  --f-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(20,33,61,.05),0 2px 6px -2px rgba(20,33,61,.06);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --navy:#a9bdf0; --navy-soft:#1d2a4a;
  --fall-ink:#14213d;
  --bg:#0e1527; --surface:#16203a; --surface-2:#1b2644; --line:#2a3757;
  --fg:#eef1f8; --muted:#aab3c8; --faint:#76809a; --charcoal:#e4e7ee; --strike:#6f9c7c;
  --done:#7fd6e2;
  --red:#ff8a7a; --red-soft:#3d1f1c;
  --orange:#ffb46b; --orange-soft:#3d2a14;
  --amber:#f0d860; --amber-soft:#36311a;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark }}
:root[data-theme="dark"]{
  --navy:#a9bdf0; --navy-soft:#1d2a4a;
  --fall-ink:#14213d;
  --bg:#0e1527; --surface:#16203a; --surface-2:#1b2644; --line:#2a3757;
  --fg:#eef1f8; --muted:#aab3c8; --faint:#76809a; --charcoal:#e4e7ee; --strike:#6f9c7c;
  --done:#7fd6e2;
  --red:#ff8a7a; --red-soft:#3d1f1c;
  --orange:#ffb46b; --orange-soft:#3d2a14;
  --amber:#f0d860; --amber-soft:#36311a;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17.5px;line-height:1.55}
a{color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
[hidden]{display:none!important}

.wrap{max-width:760px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px))}

/* Each page's brand palette: same total length whether it has 2 colors or 6.
   Pages set the colors inline, e.g. <span style="--c:#14213d"></span>. */
.stripe{display:flex;height:8px;border-radius:0 0 6px 6px;overflow:hidden}
.stripe span{flex:1;background:var(--c)}

.page-head{display:grid;gap:8px;padding:18px 0 6px}
.head-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.eyebrow,.label{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.eyebrow a{text-decoration:none}
.eyebrow a:hover{color:var(--fg)}
h1{font-family:var(--f-display);font-weight:800;font-size:clamp(36px,8vw,56px);line-height:1;letter-spacing:-.02em;margin:0;color:var(--navy);text-wrap:balance}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.home-btn{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--navy);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.home-btn:hover{border-color:var(--faint)}
h1 em{font-style:normal;color:var(--page-accent,var(--fall))}
h2{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.01em;margin:0}
.dek{margin:0;color:var(--muted);max-width:62ch}
.linkish{font:inherit;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-decoration:underline}

.meter{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:8px}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.meter-name{font-weight:700}
.meter-count{font-family:var(--f-mono);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.bar>span{display:block;height:100%;width:0;background:var(--page-accent,var(--navy));transition:width .35s}

.chip{font:600 15px var(--f-body);border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--faint)}
.chip[aria-pressed="true"],.chip.sel{background:var(--navy);color:var(--bg);border-color:var(--navy)}
.chip.add-chip{border-style:dashed;color:var(--faint);font-weight:400}

.btn{font:700 16px var(--f-body);background:var(--navy);color:var(--bg);border:0;border-radius:8px;padding:9px 18px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:var(--surface);color:var(--fg);border:1px solid var(--line)}

.chk{flex:none;width:24px;height:24px;border:2px solid var(--faint);border-radius:50%;background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0;margin-top:1px;color:var(--bg);font-size:13px;font-weight:700}
.chk[aria-checked="true"]{background:var(--done);border-color:var(--done)}
.chk[aria-checked="true"]::after{content:"✓"}

.tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:2px 6px;white-space:nowrap;background:var(--navy-soft);color:var(--navy)}

/* The floating add button: fall yellow, bottom right, just a plus. */
.fab{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:30;
  width:60px;height:60px;border-radius:50%;border:0;background:var(--fall);color:var(--fall-ink);
  font:400 34px/1 var(--f-body);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(20,33,61,.45),0 2px 4px rgba(20,33,61,.2);transition:transform .15s}
.fab:hover{transform:scale(1.06)}
.fab:active{transform:scale(.96)}

/* Bottom sheet used for add forms. */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:min(640px,100%);max-height:88vh;background:var(--surface);color:var(--fg);
  border-radius:20px 20px 0 0;box-shadow:0 -10px 40px -10px rgba(0,0,0,.35)}
dialog.sheet::backdrop{background:rgba(14,21,39,.45)}
@media (min-width:700px){dialog.sheet{margin:auto;border-radius:20px}}
.sheet-body{padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:14px}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-close{background:none;border:0;font-size:22px;color:var(--faint);cursor:pointer;padding:2px 6px}

.field{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:9px 11px;outline:none;min-width:0;font:17px var(--f-body)}
.field:focus{border-color:var(--navy)}

.empty{padding:22px 14px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);text-align:center;font-size:16px}

.login-gate{max-width:380px;margin:0 auto;padding:22vh 20px 0;text-align:center;display:grid;gap:12px;justify-items:center}
.login-gate p{color:var(--muted);margin:0}

.chip:focus-visible,.chk:focus-visible,.btn:focus-visible,.fab:focus-visible,a:focus-visible,.field:focus-visible,.linkish:focus-visible{outline:2px solid var(--fall);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.bar>span,.fab{transition:none}}

/* "Waiting on me" panel (lib/onme.js), top of Quick Log */
.onme{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--fall);border-radius:14px;padding:14px 16px 6px;box-shadow:var(--shadow)}
.onme-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.onme-head h2{font-size:24px;margin:0;color:var(--charcoal)}
.onme-count{font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--fall)}
.onme-empty{color:var(--muted);margin:4px 0 10px}
.onme-group{padding:8px 0;border-top:1px solid var(--line)}
.onme-ghead{display:flex;align-items:center;gap:8px;margin:2px 0 4px}
.onme-dot{width:10px;height:10px;border-radius:50%;background:var(--pc);flex:none}
.onme-proj{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--pc) 75%,var(--fg));text-decoration:none}
.onme-proj:hover{text-decoration:underline}
.onme-n{font-family:var(--f-mono);font-size:12.5px;color:var(--faint)}
.onme-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:7px 0}
.onme-check{width:22px;height:22px;margin-top:2px;border:2px solid var(--faint);border-radius:6px;background:none;cursor:pointer;padding:0}
.onme-check:hover{border-color:var(--pc)}
.onme-main{min-width:0}
.onme-title{font-size:18px;line-height:1.35;color:var(--charcoal)}
.onme-note summary{font-family:var(--f-mono);font-size:12.5px;color:var(--faint);cursor:pointer;margin-top:2px}
.onme-note div{font-size:15.5px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px}
.onme .flag{font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--orange);background:var(--orange-soft);border-radius:4px;padding:1px 6px;margin-right:6px;vertical-align:1px}