/* ======================================================================
   tasky — shared design system  (the "E / Calm Loud" build)
   ONE spine, every axis tokenized: color / accent / font / density /
   colorblind / disclosure flags. Themes are just token bundles.
   The ACCENT is a single swappable token (--accent). Default = electric
   indigo, but it is NOT the identity — Settings can change it and the whole
   app re-skins. Only the notebook cover art and the category palette
   (cat1–5) are fixed; everything "brand" flows through --accent.
   ====================================================================== */

/* ---------- COLOR: light base (cool white — Calm Loud) ---------- */
:root{
  --canvas:#ffffff; --surface:#f7f8fc; --tint:#f0f2fa;
  --ink:#0e1020; --ink-2:#454a63; --ink-3:#848aa3; --ink-4:#b6bcd2;
  --line:#eceef6; --line-2:#e0e3ef; --stroke:#c1c6dc;
  --shadow:0 1px 2px rgba(14,16,32,.05),0 8px 24px -14px rgba(14,16,32,.16);
  --scrim:#0e102010;
  /* category palette (functional, not brand) */
  --cat1:#f0616b; --cat2:#12b886; --cat3:#f59f00; --cat4:#4f6ff0; --cat5:#c15fa0;
  /* priority palette (functional) — default set */
  --prio-1:#d64545; --prio-2:#e0952b; --prio-3:#4c82f7;
}
[data-theme="dark"]{
  --canvas:#0f1017; --surface:#171922; --tint:#1c1f2b;
  --ink:#eceef4; --ink-2:#a6abbd; --ink-3:#767c92; --ink-4:#4c5064;
  --line:#232634; --line-2:#2c3040; --stroke:#3a3f52;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);
  --scrim:#ffffff10;
}

/* ---------- ACCENT bundles (swap accent + soft + on-accent) ---------- */
:root{ --accent:#4f46e5; --accent-soft:#e9e8fd; --on-accent:#ffffff; }  /* default: electric */
[data-accent="electric"]{ --accent:#4f46e5; --accent-soft:#e9e8fd; --on-accent:#ffffff; }
[data-accent="sage"]    { --accent:#4b7f6a; --accent-soft:#e5efe9; --on-accent:#ffffff; }
[data-accent="clay"]    { --accent:#b45f38; --accent-soft:#f3e2d8; --on-accent:#ffffff; }
[data-accent="indigo"]  { --accent:#5b62c4; --accent-soft:#e3e4f6; --on-accent:#ffffff; }
[data-theme="dark"][data-accent="electric"]{ --accent:#8b83f5; --accent-soft:#242149; }
[data-theme="dark"][data-accent="sage"]    { --accent:#7fb79f; --accent-soft:#22322b; }
[data-theme="dark"][data-accent="clay"]    { --accent:#e0906a; --accent-soft:#32251d; }
[data-theme="dark"][data-accent="indigo"]  { --accent:#9aa0ec; --accent-soft:#232645; }
/* Colorblind-safe overrides accent to a deuteranopia/protanopia-safe blue,
   and retunes priority to blue/orange/gray (never red↔green). */
[data-cb="on"]{ --accent:#2f6fb0; --accent-soft:#dde9f4; --on-accent:#ffffff;
                --prio-1:#c26a00; --prio-2:#2f6fb0; --prio-3:#6b7280; }
[data-cb="on"][data-theme="dark"]{ --accent:#79aee6; --accent-soft:#1a2a3a; }

/* ---------- FONT bundles ---------- */
[data-font="grotesk"]{ --font-body:"Hanken Grotesk"; --font-display:"Hanken Grotesk"; --display-weight:800; --display-tr:-.03em; }
[data-font="serif"]  { --font-body:"Hanken Grotesk"; --font-display:"Fraunces"; --display-weight:600; --display-tr:-.01em; }
[data-font="rounded"]{ --font-body:"Nunito"; --font-display:"Nunito"; --display-weight:800; --display-tr:-.02em; }

/* ---------- DENSITY bundles ---------- */
[data-density="comfortable"]{ --row-py:15px; --title:16.5px; --unit-m:8px 18px; --sub-py:7px; --lift:1; }
[data-density="compact"]    { --row-py:10px; --title:15px;   --unit-m:6px 14px; --sub-py:4px; --lift:1; }

/* ---------- DISCLOSURE flags (render-complete rows, gated visibility) ---------- */
:root{ --show-priority:none; --show-projects:none; --show-meta:flex; --show-avatar:flex; }
[data-power="on"]{ --show-priority:inline-grid; --show-projects:inline-flex; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh; background:var(--canvas); color:var(--ink);
  font-family:var(--font-body),system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .25s ease,color .25s ease;
}
.material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; line-height:1; user-select:none; }
body.mono .phone .screen{ filter:grayscale(1) contrast(1.03); }

/* ============ PROTOTYPE CHROME (page + control toolbar) ============ */
.stage{ min-height:100vh; display:flex; flex-direction:column; align-items:center;
        padding:0 20px 80px;
        background:
          radial-gradient(900px 500px at 50% -12%, var(--scrim), transparent 60%),
          var(--canvas); }
.toolbar{ position:sticky; top:0; z-index:20; width:100%; display:flex; justify-content:center;
          gap:22px; flex-wrap:wrap; padding:16px 20px; margin-bottom:34px;
          background:color-mix(in srgb, var(--canvas) 88%, transparent);
          backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.ctl{ display:flex; align-items:center; gap:8px; }
.ctl .lab{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.seg{ display:inline-flex; background:var(--tint); border:1px solid var(--line-2); border-radius:9px; padding:2px; gap:2px; }
.seg button{ font-family:inherit; font-size:12px; font-weight:600; color:var(--ink-2);
             border:0; background:transparent; padding:5px 9px; border-radius:7px; cursor:pointer;
             display:inline-flex; align-items:center; gap:5px; transition:.12s; }
.seg button:hover{ color:var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.seg .sw{ width:12px; height:12px; border-radius:4px; display:inline-block; border:1px solid #0002; }
.toolbar .brand{ font-family:var(--font-display),serif; font-weight:var(--display-weight); font-size:17px;
                 letter-spacing:var(--display-tr); color:var(--ink); align-self:center; margin-right:4px; }
.toolbar .brand em{ color:var(--accent); font-style:normal; }
.hint{ width:100%; text-align:center; font-size:12px; color:var(--ink-3); margin:-20px 0 26px; }
.hint b{ color:var(--ink-2); font-weight:600; }

/* ============ PHONE FRAME ============ */
.phone{ position:relative; width:390px; height:812px; flex:none;
        border-radius:46px; background:linear-gradient(160deg,#2a2c31,#0c0d10 65%);
        padding:10px; box-shadow:0 2px 3px rgba(255,255,255,.06) inset, 0 44px 80px -34px rgba(0,0,0,.7); }
.phone::after{ content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
        width:30%; height:24px; background:#0c0d10; border-radius:0 0 15px 15px; z-index:6; }
.screen{ position:relative; width:100%; height:100%; border-radius:37px; overflow:hidden;
         background:var(--canvas); display:flex; flex-direction:column; transition:background-color .25s; }

/* ---------- app header ---------- */
header.app{ padding:58px 24px 12px; }
.h-top{ display:flex; align-items:flex-start; justify-content:space-between; }
h1{ font-family:var(--font-display),Georgia,serif; font-size:34px; font-weight:var(--display-weight);
    letter-spacing:var(--display-tr); margin:0; line-height:1; font-optical-sizing:auto; }
[data-font="serif"] h1{ font-size:37px; }
.h-menu{ color:var(--ink-3); width:40px; height:40px; display:grid; place-items:center; margin:-6px -8px 0 0; text-decoration:none; }
.h-sub{ margin-top:9px; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-3); font-weight:500; }
.h-sub .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-4); }
.h-sub b{ color:var(--ink-2); font-weight:600; }

/* ---------- lens switcher (tappable title + chevron) ---------- */
.lens{ position:relative; }
.lens-btn{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0;
           margin:0; cursor:pointer; color:inherit; font-family:inherit; }
.lens-chev{ color:var(--ink-3); font-size:28px; margin-top:8px; transition:transform .2s; }
.lens.open .lens-chev{ transform:rotate(180deg); }
.lens-menu{ position:absolute; top:calc(100% + 10px); left:0; z-index:40; min-width:200px;
            background:var(--surface); border:1px solid var(--line-2); border-radius:16px;
            box-shadow:var(--shadow); padding:6px; display:none; }
.lens.open .lens-menu{ display:block; }
.lens-item{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px;
            text-decoration:none; color:var(--ink); font-size:15px; font-weight:600; }
.lens-item .material-symbols-outlined{ font-size:20px; color:var(--ink-3); }
.lens-item:hover{ background:var(--tint); }
.lens-item.active{ color:var(--accent); }
.lens-item.active .material-symbols-outlined{ color:var(--accent);
            font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
/* ---------- segmented lens control (Variant B) ---------- */
.lens-seg{ margin:14px 24px 2px; display:flex; align-items:center; gap:8px; }
.lens-seg .segset{ display:inline-flex; background:var(--tint); border:1px solid var(--line-2);
            border-radius:11px; padding:3px; gap:2px; flex:1; }
.lens-seg .segset a{ flex:1; text-align:center; font-size:13.5px; font-weight:600; color:var(--ink-2);
            text-decoration:none; padding:7px 10px; border-radius:8px; transition:.12s; }
.lens-seg .segset a:hover{ color:var(--ink); }
.lens-seg .segset a.on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.lens-seg .filterchip{ display:inline-flex; align-items:center; gap:5px; flex:none; text-decoration:none;
            font-size:13px; font-weight:600; color:var(--ink-2); background:var(--tint);
            border:1px solid var(--line-2); border-radius:999px; padding:7px 12px; }
.lens-seg .filterchip .material-symbols-outlined{ font-size:16px; color:var(--ink-3); }

main{ flex:1; overflow-y:auto; padding:6px 0 112px; }   /* bottom pad clears the floating dock */
main::-webkit-scrollbar{ width:0; }
.sec{ padding:22px 24px 6px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-4); }

/* ---------- checkbox (state = fill + check glyph, never hue alone) ---------- */
.cbx{ flex:none; width:24px; height:24px; margin-top:1px; border:2px solid var(--stroke);
      border-radius:8px; display:grid; place-items:center; background:transparent; }
.cbx .material-symbols-outlined{ font-size:17px; color:var(--on-accent); opacity:0;
      font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }
.cbx.done{ background:var(--accent); border-color:var(--accent); }
.cbx.done .material-symbols-outlined{ opacity:1; }

/* ---------- flat row (render-complete) ---------- */
.row{ display:flex; align-items:flex-start; gap:14px; padding:var(--row-py) 24px; border-top:1px solid var(--line); }
.row.first{ border-top:0; }
.body{ flex:1; min-width:0; }
.tline{ display:flex; align-items:center; gap:8px; }
/* priority marker — shape + letter, so it survives grayscale/colorblind */
.prio{ display:var(--show-priority); place-items:center; width:16px; height:16px; border-radius:4px;
       font-size:9px; font-weight:800; color:#fff; letter-spacing:-.02em; flex:none; }
.prio.p1{ background:var(--prio-1); } .prio.p2{ background:var(--prio-2); } .prio.p3{ background:var(--prio-3); }
.title{ font-size:var(--title); font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.title .q{ color:var(--ink-3); font-weight:500; }
.meta{ margin-top:5px; display:var(--show-meta); align-items:center; gap:12px; font-size:13px; color:var(--ink-3); font-weight:500; }
.meta .m{ display:inline-flex; align-items:center; gap:4px; }
.meta .material-symbols-outlined{ font-size:15px; }
.meta .due{ color:var(--accent); font-weight:600; }
/* colored project tag — gated */
.ptag{ display:var(--show-projects); align-items:center; gap:3px; font-size:12px; font-weight:600; }
.ptag::before{ content:"#"; opacity:.8; }
.ptag.home{ color:#7c5cff; } .ptag.family{ color:#db2777; } .ptag.health{ color:#0ea5a4; } .ptag.bills{ color:#c26a00; }
.ptag.work{ color:#2f6fb0; } .ptag.personal{ color:#7c5cff; } .ptag.social{ color:#0ea5a4; }
[data-cb="on"] .ptag{ color:var(--ink-2)!important; }

.right{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; padding-top:1px; }
.rt-when{ font-size:13px; font-weight:600; color:var(--ink-3); }
.rt-when.soon{ color:var(--accent); }
.who{ display:var(--show-avatar); width:24px; height:24px; border-radius:50%; place-items:center;
      font-size:11px; font-weight:700; color:#fff; }
.who.derek{ background:#6b7f9e; } .who.sarah{ background:#a06b8c; } .who.mia{ background:#6f9e7a; } .who.leo{ background:#c08a5a; }
.who.jordan{ background:#6f9e7a; } .who.priya{ background:#a06b8c; } .who.sam{ background:#6b7f9e; } .who.mom{ background:#c08a5a; }
.who-all{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.who-all .material-symbols-outlined{ font-size:17px; color:var(--ink-3); }

/* ---------- sub-task unit (headerless parent; subs own completion) ---------- */
.unit{ margin:var(--unit-m); background:var(--tint); border:1px solid var(--line-2); border-radius:16px; padding:14px 16px 8px; }
.unit-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.unit-title{ display:flex; align-items:center; gap:9px; font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
.unit-title .material-symbols-outlined{ font-size:19px; color:var(--ink-2); }
.unit-meta{ display:flex; align-items:center; gap:9px; }
.frac{ font-size:13px; font-weight:700; color:var(--ink-2); background:var(--surface); border:1px solid var(--line-2); padding:2px 8px; border-radius:999px; font-variant-numeric:tabular-nums; }
.tag{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--ink-3); }
.tag .material-symbols-outlined{ font-size:14px; }
.subs{ margin-top:6px; }
.sub{ display:flex; align-items:center; gap:11px; padding:var(--sub-py) 0; }
.cir{ flex:none; width:19px; height:19px; border:1.5px solid var(--stroke); border-radius:50%; display:grid; place-items:center; }
.cir .material-symbols-outlined{ font-size:13px; color:var(--on-accent); opacity:0; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20; }
.cir.done{ background:var(--accent); border-color:var(--accent); }
.cir.done .material-symbols-outlined{ opacity:1; }
.sub-t{ font-size:15px; font-weight:500; color:var(--ink); }
.sub.done .sub-t{ color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--ink-4); }
.more{ font-size:13.5px; font-weight:600; color:var(--ink-3); padding:6px 0 4px 30px; }

/* ---------- habit / streak — dragged bar (E), fill derived from --accent ---------- */
.habit{ margin:6px 24px; padding:var(--row-py) 0; border-top:1px solid var(--line); }
.habit-head{ display:flex; align-items:center; gap:14px; }
.habit-title{ flex:1; font-size:var(--title); font-weight:600; letter-spacing:-.01em; }
.streak{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.streak .material-symbols-outlined{ font-size:16px; }
.streak-bar{ margin-top:14px; padding-left:38px; }
.sb-row{ display:flex; height:34px; }
.sb-c{ flex:1; max-width:44px; display:grid; place-items:center; }
.sb-c.on{ background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 82%, #fff 12%), var(--accent)); }
.sb-c.on.rs{ border-radius:17px 0 0 17px; }
.sb-c.on.re{ border-radius:0 17px 17px 0; }
.sb-c.on.rs.re{ border-radius:17px; }   /* isolated single-day run = full pill */
.sb-c.on .material-symbols-outlined{ font-size:17px; color:var(--on-accent); font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 20; }
.sb-dot{ width:28px; height:28px; border-radius:50%; border:2px dashed var(--accent); background:var(--accent-soft); }
.sb-lab{ display:flex; margin-top:8px; }
.sb-lab span{ flex:1; max-width:44px; text-align:center; font-size:11px; font-weight:700; color:var(--ink-4); }
.sb-lab span.now{ color:var(--accent); }

/* ---------- collapsible done ---------- */
.group{ margin-top:14px; border-top:1px solid var(--line); }
.group-head{ display:flex; align-items:center; gap:8px; padding:14px 24px 10px; cursor:pointer; }
.group-head .lbl{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-4); }
.group-head .count{ font-size:12px; font-weight:700; color:var(--ink-4); }
.group-head .chev{ margin-left:auto; color:var(--ink-4); display:grid; place-items:center; transition:transform .2s; }
.group-head .chev .material-symbols-outlined{ font-size:20px; }
.group.collapsed .chev{ transform:rotate(180deg); }
.group.collapsed .done-list{ display:none; }
.done-row{ display:flex; align-items:center; gap:14px; padding:10px 24px; }
.done-row .cbx{ margin-top:0; }
.done-row .d-t{ flex:1; font-size:15.5px; font-weight:500; color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--line-2); }
.done-row .d-r{ font-size:12.5px; font-weight:600; color:var(--ink-4); }

/* ---------- bottom nav — docked-add pill (E). No FAB, no tab bar. ---------- */
.dock{ position:absolute; left:18px; right:18px; bottom:20px; z-index:30; height:60px;
       background:#1c1d24; border-radius:20px; padding:0 10px;
       display:flex; align-items:center; gap:2px;
       box-shadow:0 16px 34px -16px rgba(0,0,0,.55); }
[data-theme="dark"] .dock{ background:#0a0b0f; border:1px solid var(--line-2); }
.dock .tab{ flex:1; display:grid; place-items:center; height:100%; color:#8b8f9e; text-decoration:none; }
.dock .tab .material-symbols-outlined{ font-size:25px; }
.dock .tab.active{ color:#ffffff; }
.dock .tab.active .material-symbols-outlined{ font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }
.dock .add{ flex:none; width:50px; height:50px; margin:0 6px; border-radius:16px;
            background:#ffffff; color:#15161a; display:grid; place-items:center; text-decoration:none;
            box-shadow:0 6px 15px -5px rgba(0,0,0,.4); }
.dock .add .material-symbols-outlined{ font-size:28px; }

@media (max-width:460px){ .phone{ transform:scale(.9); transform-origin:top center; } }