/* ============================================================================
   COMPASS — "Instrument"  ·  refined dark planner
   Type: Fraunces (display) · Hanken Grotesk (UI) · JetBrains Mono (data)
   ============================================================================ */

:root {
  /* ink surfaces — warm charcoal (bronze undertone) so brass reads intentional, not generic-dark */
  --ink-900:#0f0e0c; --ink-850:#13110e; --ink-800:#181611;
  --ink-750:#1e1b15; --ink-700:#26221b; --ink-650:#2e2a22;
  --line:rgba(236,222,200,.08); --line-2:rgba(236,222,200,.14);
  /* text */
  --text:#ece9e2; --dim:#a6a298; --faint:#726d62;
  /* accent */
  --brass:#d8a657; --brass-12:rgba(216,166,87,.12); --brass-20:rgba(216,166,87,.22);
  --teal:#6fb3b8;
  /* quadrants */
  --q1:#e5733b; --q2:#5bb98c; --q3:#5a8fd6; --q4:#80828c;
  --q1-12:rgba(229,115,59,.13); --q2-12:rgba(91,185,140,.13);
  --q3-12:rgba(90,143,214,.13); --q4-12:rgba(128,130,140,.12);
  /* type */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --ui:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* space + form */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -22px rgba(0,0,0,.85);
  --shadow-pop:0 30px 70px -28px rgba(0,0,0,.9);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* ease-out-quint — natural deceleration for entrances */
  /* fluid type scale */
  --t-xs:11px; --t-sm:12.5px; --t-base:14px; --t-md:15px;
  --t-lg:clamp(16px,3.2vw,17.5px); --t-title:clamp(23px,5.4vw,28px);
  /* spacing rhythm — tight within a group, generous between */
  --s-1:6px; --s-2:10px; --s-3:16px; --s-4:24px; --s-5:34px; --s-6:48px;
  --side-w:248px; --max-w:840px;   /* comfortable reading column for list views */
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--ui); background:var(--ink-900); color:var(--text);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow:hidden;
  font-feature-settings:"cv11","ss01";
}
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }   /* beat class display rules (e.g. .tab__badge) */
ul { list-style:none; }
::selection { background:var(--brass-20); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--ink-700); border-radius:99px; border:3px solid var(--ink-900); }

/* ---------- atmosphere ---------------------------------------------------- */
.atmosphere { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.glow { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.glow--brass { width:60vw; height:60vw; top:-26vw; right:-14vw;
  background:radial-gradient(circle,rgba(216,166,87,.16),transparent 62%); }
.glow--teal { width:50vw; height:50vw; bottom:-22vw; left:-12vw;
  background:radial-gradient(circle,rgba(111,179,184,.10),transparent 62%); }
.grain { position:absolute; inset:0; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- app frame ----------------------------------------------------- */
.app { position:relative; z-index:1; height:100%; display:grid;
  grid-template-columns:1fr; }
.surface { position:relative; height:100%; overflow:hidden; display:flex; flex-direction:column; }

/* ---------- sidebar (desktop) -------------------------------------------- */
.sidebar { display:none; }
.brand { display:flex; align-items:center; gap:12px; padding:22px 22px 26px; }
.brand__mark { width:30px; height:30px; display:inline-grid; place-items:center; color:var(--brass); }
.brand__mark svg { width:30px; height:30px; }
.brand__name { font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:.01em;
  font-optical-sizing:auto; }
.nav { display:flex; flex-direction:column; gap:2px; padding:0 12px; }
.nav__item { display:flex; align-items:center; gap:13px; padding:10px 14px; border-radius:var(--r);
  color:var(--dim); font-weight:500; font-size:14.5px; transition:.18s var(--ease);
  position:relative; }
.nav__item svg { width:19px; height:19px; flex:0 0 auto; opacity:.85; }
.nav__item:hover { color:var(--text); background:var(--ink-800); }
.nav__item.is-active { color:var(--text); background:var(--ink-800); }
.nav__item.is-active::before { content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:99px; background:var(--brass); }
.nav__count { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint);
  background:var(--ink-700); padding:2px 7px; border-radius:99px; }
.nav__item.is-active .nav__count { color:var(--brass); background:var(--brass-12); }
.sidebar__foot { margin-top:auto; padding:12px; }
.sidebar__actions { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.sidebar__actions .nav__item { width:100%; text-align:left; cursor:pointer; }
.datechip { padding:0 10px; }
.datechip { font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.04em; }

/* ---------- topbar -------------------------------------------------------- */
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:18px 20px 15px; padding-top:max(18px,env(safe-area-inset-top));
  border-bottom:1px solid var(--line); }
.topbar__lead { min-width:0; }
.topbar__actions { flex:0 0 auto; }
.topbar__title { font-family:var(--display); font-weight:580; font-size:var(--t-title); line-height:1.02;
  font-optical-sizing:auto; letter-spacing:-.022em; }
.topbar__sub { color:var(--dim); font-size:var(--t-sm); margin-top:5px; font-family:var(--mono); letter-spacing:.04em; }
.topbar__actions { display:flex; gap:8px; align-items:center; }

/* ---------- view scroller ------------------------------------------------- */
.view { flex:1; overflow-y:auto; overflow-x:hidden; padding:clamp(20px,5.5vw,30px) 16px 120px;
  scroll-behavior:smooth; }
/* content is centered with balanced margins; multi-pane/grid views fill a wider track. */
.view > * { max-width:var(--max-w); margin-inline:auto; }
.view > .todaywrap { max-width:1100px; }
.view > .midwrap { max-width:1120px; }
.view > .inboxwrap { max-width:780px; }
.view > .todayhome { max-width:920px; }
.view > .wide { max-width:1760px; }
/* multi-column lists — fill wide screens with content, collapse to one column on phones */
.items.cols { display:grid; grid-template-columns:1fr; column-gap:38px; }
@media (min-width:720px){ .items.cols { grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .midwrap .items.cols, .wide .items.cols { grid-template-columns:1fr 1fr 1fr; } }
.midwrap .quickadd { max-width:680px; margin-inline:auto; }
.rolesgrid { display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .rolesgrid { grid-template-columns:1fr 1fr; } }
.rolesgrid .rolecard { margin-bottom:0; }
.archivegrid { columns:320px; column-gap:38px; }
.archivegroup { break-inside:avoid; margin-bottom:20px; }

/* day navigation (Today view) */
.daynav { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.daynav .iconbtn { width:34px; height:34px; }
.daynav .flip { display:flex; transform:rotate(180deg); }
.daynav__label { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }

/* work/personal context bar */
.ctxbar { margin-bottom:16px; display:flex; flex-direction:column; gap:7px; }
.ctxseg { display:flex; width:100%; }
.ctxseg button { flex:1; }
.ctxbar__cap { font-family:var(--mono); font-size:11px; color:var(--faint); display:flex; align-items:center; gap:6px; padding-left:4px; }
.ctxbar__dot { width:8px; height:8px; border-radius:50%; background:var(--q4); }
.ctxbar__dot.work { background:var(--q2); }
.ctxbar__dot.personal { background:var(--teal); }

/* day picker (settings) */
.daypick { display:flex; gap:6px; }
.daypick__b { flex:1; height:38px; border-radius:var(--r); border:1px solid var(--line); background:var(--ink-800);
  color:var(--dim); font-weight:600; font-size:13px; transition:.16s var(--ease); }
.daypick__b.is-on { color:#231a08; background:var(--brass); border-color:transparent; }

/* staggered reveal — one calm, orchestrated entrance per view */
@keyframes rise { from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.reveal { animation:rise .6s var(--ease-out) both; }
.reveal:nth-child(2){ animation-delay:.05s; } .reveal:nth-child(3){ animation-delay:.1s; }
.reveal:nth-child(4){ animation-delay:.15s; } .reveal:nth-child(5){ animation-delay:.2s; }
/* in-view updates (filters, day nav, context, view/plan toggles): the chrome
   (toggles/nav) stays put while only the content that changed slides in. Real
   navigation still gets the full staggered entrance above. */
.view.no-anim .reveal { animation:none; }
@keyframes swap { from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;} }
.view.no-anim .swap { animation:swap .26s var(--ease-out) both; }

/* loading skeleton — shimmer placeholders for cold/slow loads */
@keyframes shimmer { from{background-position:200% 0;} to{background-position:-200% 0;} }
.skel { border-radius:7px; background:linear-gradient(90deg,
    var(--ink-800) 25%, color-mix(in oklab,var(--ink-700) 70%,var(--ink-650)) 50%, var(--ink-800) 75%);
  background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite; }
.skelrow { display:flex; align-items:flex-start; gap:12px; padding:12px 8px; border-bottom:1px solid var(--line); }
.skelrow .skel--dot { width:21px; height:21px; border-radius:7px; flex:0 0 auto; margin-top:1px; }
.skelcard { padding:16px 17px 15px; border-radius:var(--r-lg); background:var(--ink-850); box-shadow:var(--shadow); min-height:134px;
  display:flex; flex-direction:column; }

/* ---------- buttons ------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--r-pill);
  font-weight:600; font-size:13.5px; color:var(--dim); background:var(--ink-800);
  border:1px solid var(--line); transition:.16s var(--ease); white-space:nowrap; }
.btn svg { width:16px; height:16px; }
.btn:hover { color:var(--text); border-color:var(--line-2); }
.btn--primary { background:var(--brass); color:#231a08; border-color:transparent; }
.btn--primary:hover { background:#e6b568; color:#231a08; }
.btn--ghost { background:transparent; }
.iconbtn { width:38px; height:38px; border-radius:var(--r); display:grid; place-items:center;
  color:var(--dim); background:var(--ink-800); border:1px solid var(--line); transition:.16s var(--ease); }
.iconbtn:hover { color:var(--text); border-color:var(--line-2); }
.iconbtn svg { width:18px; height:18px; }

/* ---------- FAB ----------------------------------------------------------- */
.fab { position:fixed; right:16px; bottom:calc(82px + env(safe-area-inset-bottom)); z-index:30;
  width:56px; height:56px; border-radius:20px; display:grid; place-items:center;
  color:#231a08; background:var(--brass); box-shadow:0 14px 30px -8px rgba(216,166,87,.5);
  transition:.2s var(--ease); }
.fab:hover { transform:translateY(-2px) rotate(90deg); box-shadow:0 18px 38px -8px rgba(216,166,87,.6); }
.fab:active { transform:scale(.94); }

/* ---------- tabbar (mobile) ---------------------------------------------- */
/* floating pill bar — icon-only tabs, active expands to a labelled pill */
.tabbar { position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:25;
  display:flex; justify-content:space-between; align-items:center; gap:3px; padding:7px;
  background:rgba(24,22,17,.82); backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--line-2); border-radius:26px; box-shadow:0 16px 36px -12px rgba(0,0,0,.7); }
.tab { flex:0 1 auto; display:inline-flex; align-items:center; padding:11px; border-radius:18px;
  color:var(--dim); transition:.22s var(--ease); position:relative; }
.tab:active { transform:scale(.94); }
.tab svg { width:23px; height:23px; flex:0 0 auto; }
.tab__lbl { max-width:0; overflow:hidden; white-space:nowrap; font-size:13px; font-weight:700; opacity:0;
  transition:.22s var(--ease); }
.tab.is-active { color:#231a08; background:var(--brass); padding:11px 15px; }
.tab.is-active .tab__lbl { max-width:130px; opacity:1; margin-left:8px; }
.tab__badge { position:absolute; top:4px; right:5px; font-family:var(--mono); font-size:9px; line-height:1;
  background:var(--q1); color:#fff; min-width:16px; height:16px; padding:0 3px; border-radius:99px;
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--ink-800); }

/* ---------- generic card -------------------------------------------------- */
.card { background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); }
.section-label { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin:0 4px 10px; display:flex; align-items:center; gap:8px; }
.section-label .ln { flex:1; height:1px; background:var(--line); }

/* ---------- banner (carried over) ---------------------------------------- */
.banner { display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:var(--r);
  background:var(--brass-12); border:1px solid var(--brass-20); color:var(--brass);
  font-size:13.5px; font-weight:600; margin-bottom:16px; }
.banner svg { width:17px; height:17px; }

/* ============================ TODAY ====================================== */
/* main (schedule + tasks) on the left, a "week ahead" panel on the right (wide only) */
.todaygrid { display:grid; gap:clamp(22px,3vw,40px); grid-template-columns:1fr; }
@media (min-width:900px){ .todaygrid--aside { grid-template-columns:minmax(0,1fr) 304px; align-items:start; } }
.todaymain { min-width:0; }
.todaymain .rail { margin-bottom:22px; }
.todayaside { display:none; }
@media (min-width:900px){ .todayaside { display:block; } }
.ahead { padding:11px 0; border-bottom:1px solid var(--line); }
.ahead:last-child { border-bottom:none; }
.ahead__h { display:flex; align-items:baseline; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); margin-bottom:7px; }
.ahead__n { margin-left:auto; color:var(--faint); }
.ahead__list { display:flex; flex-direction:column; gap:6px; }
.ahead__t { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); cursor:pointer; overflow:hidden; }
.ahead__t span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ahead__t:hover span:last-child { color:var(--brass); }
.ahead__empty { font-size:12px; color:var(--faint); }
.ahead__more { font-size:11px; color:var(--faint); font-family:var(--mono); margin-top:3px; }

/* time rail */
.rail { position:relative; }
.rail__list { position:relative; padding-left:58px; }
.rail__line { position:absolute; left:46px; top:6px; bottom:6px; width:1px; background:var(--line); }
.slot { position:relative; padding:0 0 18px; min-height:30px; }
.slot__time { position:absolute; left:-58px; top:-2px; width:44px; text-align:right;
  font-family:var(--mono); font-size:11px; color:var(--faint); }
.slot__dot { position:absolute; left:-16px; top:4px; width:9px; height:9px; border-radius:99px;
  background:var(--ink-650); border:2px solid var(--ink-900); }
.slot--focus .slot__dot { background:var(--brass); }
.slot--meeting .slot__dot { background:var(--teal); }
.nowline { position:absolute; left:30px; right:0; display:flex; align-items:center; gap:7px; z-index:3; }
.nowline__dot { width:9px; height:9px; border-radius:99px; background:var(--q1);
  box-shadow:0 0 0 4px rgba(229,115,59,.2); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 50%{ box-shadow:0 0 0 8px rgba(229,115,59,0);} }
.nowline__ln { flex:1; height:1px; background:linear-gradient(90deg,var(--q1),transparent); }
.event { padding:9px 13px; border-radius:var(--r); background:var(--ink-800); border:1px solid var(--line); }
.event__t { font-weight:600; font-size:14px; }
.event__meta { font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:2px; }
.focusblock { padding:11px 13px; border-radius:var(--r); background:linear-gradient(180deg,var(--brass-12),transparent);
  border:1px solid var(--brass-20); }
.focusblock__head { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--brass); }
.focusblock__kids { margin-top:9px; display:flex; flex-direction:column; gap:6px; }

/* quadrant-grouped task list */
.qgroup { margin-bottom:18px; }
.qgroup__head { display:flex; align-items:center; gap:9px; margin:0 4px 9px; }
.qgroup__tag { font-family:var(--mono); font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; }
.qgroup__name { font-size:13px; font-weight:600; color:var(--dim); }
.qgroup__count { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint); }
.q1 .qgroup__tag,.tag-q1 { color:var(--q1); background:var(--q1-12); }
.q2 .qgroup__tag,.tag-q2 { color:var(--q2); background:var(--q2-12); }
.q3 .qgroup__tag,.tag-q3 { color:var(--q3); background:var(--q3-12); }
.q4 .qgroup__tag,.tag-q4 { color:var(--q4); background:var(--q4-12); }

/* ---------- item row — a calm list, not a stack of boxes ------------------ */
/* Accent (--ac) is the row's PROJECT color; it lives on the checkbox ring. */
.items { display:flex; flex-direction:column; }
.item { display:flex; align-items:flex-start; gap:12px; padding:12px 8px; border-radius:9px;
  border-bottom:1px solid var(--line); transition:background .16s var(--ease);
  position:relative; }
.item:last-child { border-bottom:none; }
.item:hover { background:var(--ink-850); }
.item.is-done { opacity:.46; }
.item.is-done .item__title { text-decoration:line-through; color:var(--dim); }
.item__spacer { width:21px; flex:0 0 auto; }
.tdot { width:7px; height:7px; border-radius:50%; background:var(--ac,var(--faint)); flex:0 0 auto; }
.check { flex:0 0 auto; width:21px; height:21px; border-radius:7px; border:2px solid var(--ac,var(--line-2));
  margin-top:1px; display:grid; place-items:center; color:transparent; transition:.16s var(--ease); }
.check:hover { border-color:var(--brass); box-shadow:0 0 0 4px var(--brass-12); }
.check svg { width:13px; height:13px; }
.item.is-done .check { background:var(--brass); border-color:var(--brass); color:#231a08; }
.item__body { flex:1; min-width:0; }
.item__title { font-size:var(--t-base); font-weight:500; line-height:1.4; }
.item__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:5px; }
.chip { font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; padding:2px 8px; border-radius:99px;
  color:var(--faint); background:var(--ink-750); display:inline-flex; align-items:center; gap:4px; }
.chip svg { width:11px; height:11px; }
.chip--proj { color:var(--dim); }
.chip--push { color:var(--q1); background:var(--q1-12); }
.chip--deleg { color:var(--q3); background:var(--q3-12); }
.chip--due { color:var(--brass); background:var(--brass-12); }
.chip--overdue { color:var(--q1); background:var(--q1-12); }
.section-label__n { margin-left:auto; font-family:var(--mono); font-size:var(--t-xs); color:var(--faint); }
/* per-row quick action (e.g. reschedule on Today) */
.item .rowbtn { width:34px; height:34px; flex:0 0 auto; align-self:center; background:transparent; border-color:transparent; color:var(--faint); }
.item .rowbtn:hover { color:var(--brass); background:var(--ink-800); }
.item.is-blocked { opacity:.55; }
.chip--blocked { color:var(--q3); background:var(--q3-12); }
.blockpick { display:flex; flex-wrap:wrap; gap:6px; max-height:150px; overflow-y:auto; padding:2px; }
.blockpick__b { padding:7px 11px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--ink-800);
  color:var(--dim); font-size:12.5px; font-weight:500; transition:.16s var(--ease); text-align:left; }
.blockpick__b.is-on { color:var(--q3); border-color:var(--q3); background:var(--q3-12); }
.item__grip { color:var(--faint); opacity:0; transition:.16s; cursor:grab; }
.item:hover .item__grip { opacity:.6; }

/* ============================ QUADRANTS ================================== */
.qboard { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:680px){ .qboard { grid-template-columns:1fr 1fr; } }
.qaxis { display:none; }
@media (min-width:680px){
  .qboard-wrap { display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; }
  .qaxis { display:grid; }
  .qaxis__y { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:10px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--faint); text-align:center; }
}
.qcell { border-radius:var(--r-lg); border:1px solid var(--line); background:var(--ink-850); padding:14px;
  min-height:150px; transition:.16s var(--ease); }
.qcell.is-over { border-color:var(--brass); background:var(--ink-800); }
.qcell__head { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.qcell__no { font-family:var(--display); font-size:19px; font-weight:600; }
.qcell__name { font-weight:700; font-size:13.5px; }
.qcell__act { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
@media (max-width:560px){ .qcell__act { display:none; } }
.qcell--1{ box-shadow:inset 0 2px 0 var(--q1); } .qcell--1 .qcell__no{color:var(--q1);}
.qcell--2{ box-shadow:inset 0 2px 0 var(--q2); } .qcell--2 .qcell__no{color:var(--q2);}
.qcell--3{ box-shadow:inset 0 2px 0 var(--q3); } .qcell--3 .qcell__no{color:var(--q3);}
.qcell--4{ box-shadow:inset 0 2px 0 var(--q4); } .qcell--4 .qcell__no{color:var(--q4);}
.qcell .item { background:var(--ink-800); cursor:grab; }
.qcell .item.dragging { opacity:.4; }
.qcell__empty { color:var(--faint); font-size:12.5px; font-style:italic; padding:8px 2px; }

/* ============================ FOLLOW-UPS ================================= */
.fu { display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:var(--r);
  background:var(--ink-800); border:1px solid var(--line); margin-bottom:8px; }
.fu.is-overdue { border-color:rgba(229,115,59,.4); background:linear-gradient(90deg,var(--q1-12),transparent); }
.fu__who { width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-weight:700; font-size:14px; color:var(--ink-900); background:var(--q3); font-family:var(--display); }
.fu__body { flex:1; min-width:0; }
.fu__title { font-weight:500; font-size:14.5px; }
.fu__meta { font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:3px; }
.fu__meta .od { color:var(--q1); }
.fu__actions { display:flex; gap:7px; flex:0 0 auto; }
@media (max-width:540px){
  .fu { flex-wrap:wrap; }
  .fu__actions { width:100%; justify-content:flex-end; margin-top:4px; }
  .fu__actions .btn { flex:1; justify-content:center; }
}

/* ============================ PROJECTS / GENERIC ========================= */
/* fills the available width on wide screens; --pc is each project's color */
.grid-cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); }
/* matte card: a flat, slightly desaturated tint + fine grain — no gloss, no glass */
.pcard { --pc:var(--brass); --pcm:color-mix(in oklab, var(--pc) 74%, #6f6a60);   /* muted toward warm grey = matte */
  display:flex; flex-direction:column; min-height:134px; padding:16px 17px 15px; border-radius:var(--r-lg);
  position:relative; overflow:hidden; isolation:isolate;
  background:color-mix(in oklab, var(--pcm) 18%, var(--ink-850));
  box-shadow:0 14px 30px -22px rgba(0,0,0,.7);
  transition:transform .22s var(--ease-out), box-shadow .2s var(--ease), background .2s var(--ease); }
.pcard::before {   /* fine grain so the tint reads as a painted surface, not a flat swatch */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pcard::after {    /* hairline edge in the project hue */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:1px solid color-mix(in oklab,var(--pc) 16%,transparent); }
.pcard:hover { transform:translateY(-2px);
  background:color-mix(in oklab, var(--pcm) 24%, var(--ink-850));
  box-shadow:0 24px 48px -24px rgba(0,0,0,.8); }
.pcard__top { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.pcard__dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--pc);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--pc) 13%,transparent); }
.pcard__name { font-family:var(--display); font-weight:600; font-size:var(--t-lg); line-height:1.15; letter-spacing:-.01em; color:var(--text); }
.pcard__desc { color:color-mix(in oklab,var(--text) 60%,transparent); font-size:13px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard__foot { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:14px; }
.progress { flex:1; height:5px; border-radius:99px; background:color-mix(in oklab,var(--pc) 13%,var(--ink-700)); overflow:hidden; }
.progress__fill { height:100%; border-radius:99px; background:var(--pc); }
.pcard__pct { font-family:var(--mono); font-size:11px; color:color-mix(in oklab,var(--text) 58%,transparent); }

/* ============================ ROLES & GOALS ============================== */
/* a calm panel per role; goals are a borderless list inside (no card-in-card) */
.rolecard { background:var(--ink-850); border:none; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:15px 16px 6px; margin-bottom:14px; }
.rolecard__head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rolecard__dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.rolecard__name { font-family:var(--display); font-weight:600; font-size:var(--t-lg); flex:1; letter-spacing:-.01em; }
.rolecard__head .iconbtn { width:32px; height:32px; background:transparent; border-color:transparent; }
.rolecard__head .iconbtn:hover { background:var(--ink-800); }
.goals { display:flex; flex-direction:column; }
.goal { display:flex; align-items:flex-start; gap:11px; padding:11px 2px; border-radius:8px;
  border-bottom:1px solid var(--line); transition:background .16s var(--ease); }
.goal:last-child { border-bottom:none; }
.goal:hover { background:var(--ink-800); }
.goal.is-done { opacity:.5; }
.goal.is-done .goal__title { text-decoration:line-through; color:var(--faint); }
.goal__body { flex:1; min-width:0; }
.goal__title { font-size:var(--t-base); font-weight:500; }
.goal__meta { font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:3px; display:flex; align-items:center; gap:4px; }
.goal .check { width:19px; height:19px; border-color:var(--ac,var(--line-2)); }
.goal.is-done .check { background:var(--brass); border-color:var(--brass); color:#231a08; }

/* inbox quick-add — the brain-dump focal point */
.quickadd { display:flex; gap:10px; align-items:center; margin-bottom:var(--s-4); }
.quickadd .input { flex:1; padding:14px 16px; border-radius:14px; font-size:var(--t-md);
  background:var(--ink-850); transition:.2s var(--ease); }
.quickadd .input:focus { border-color:var(--brass-20); background:var(--ink-800); box-shadow:0 0 0 4px var(--brass-12); }
.quickadd .btn { flex:0 0 auto; width:48px; height:48px; padding:0; border-radius:14px; justify-content:center; }
.quickadd .btn svg { width:18px; height:18px; }

/* inbox ledger — a quiet, scannable table of loose thoughts */
.ledger { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.lrow { display:flex; align-items:center; gap:13px; padding:10px 10px; border-bottom:1px solid var(--line);
  transition:background .14s var(--ease); }
.lrow:hover { background:var(--ink-850); }
.lrow.is-done { opacity:.46; }
.lrow.is-done .lrow__t { text-decoration:line-through; color:var(--dim); }
.lrow .check { width:19px; height:19px; }
.lrow__t { flex:1; min-width:0; font-size:var(--t-base); font-weight:500; line-height:1.35; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lrow__meta { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.lrow__act { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; border-radius:7px;
  color:var(--faint); background:transparent; opacity:0; transition:.14s var(--ease); }
.lrow:hover .lrow__act, .lrow__act:focus-visible { opacity:1; }
.lrow__act:hover { color:var(--brass); background:var(--ink-800); }
@media (max-width:560px){ .lrow__act { opacity:1; } .lrow__t { white-space:normal; } }

/* projects filter strip */
.projfilter { display:inline-flex; margin-bottom:14px; }

/* home (Today+Compass) view/plan toggles */
.hometabs { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.viewseg button { display:inline-flex; align-items:center; gap:6px; }
.viewseg svg { width:15px; height:15px; opacity:.85; }
.hometabs .pilltoggle { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; font-size:11px; }
.hometabs .pilltoggle svg { width:13px; height:13px; }

/* small pill toggle (e.g. Compass "hide on-hold") */
.pilltoggle { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; padding:4px 11px; border-radius:99px;
  color:var(--faint); background:var(--ink-800); border:1px solid var(--line); transition:.16s var(--ease); white-space:nowrap; }
.pilltoggle:hover { color:var(--dim); }
.pilltoggle.is-on { color:var(--brass); background:var(--brass-12); border-color:var(--brass-20); }

/* weekly planning board (Compass) */
.planweek { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:560px) { .planweek { grid-template-columns:repeat(2,1fr); } }
@media (min-width:880px) { .planweek { grid-template-columns:repeat(4,1fr); } }
/* whole week in one row; today's column gets extra width via --week-cols (set in JS) */
@media (min-width:1180px){ .planweek { grid-template-columns:var(--week-cols, repeat(7,1fr)); } }
.planday, .plantray { border-radius:var(--r-lg); padding:12px 13px; background:var(--ink-850);
  box-shadow:inset 0 0 0 1px var(--line);   /* faint lane outline so empty days read as drop targets */
  transition:background .16s var(--ease), box-shadow .16s var(--ease); }
.planday { min-height:118px; }
.planday.is-over, .plantray.is-over { background:var(--brass-12); box-shadow:inset 0 0 0 1px var(--brass-20); }
.planday.is-today { background:linear-gradient(180deg,var(--brass-12),transparent 60%); box-shadow:inset 0 0 0 1px var(--brass-20); }
.planday.is-today .planlbl__dom, .planday.is-today .planlbl__wd { color:var(--brass); }
.planday__h { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.planlbl { display:flex; align-items:baseline; gap:6px; }
.planlbl__wd { font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); }
.planlbl__dom { font-family:var(--display); font-size:17px; color:var(--text); }
.planday__n { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint); }
.planday__list { display:flex; flex-direction:column; gap:1px; min-height:14px; }
.plantray { margin-top:4px; }
/* many unscheduled tasks → scannable multi-column list that scrolls, not a wall of chips */
.plantray__list { display:grid; grid-template-columns:1fr; gap:1px; max-height:min(44vh,400px); overflow-y:auto; }
@media (min-width:620px){ .plantray__list { grid-template-columns:repeat(2,1fr); column-gap:14px; } }
@media (min-width:1080px){ .plantray__list { grid-template-columns:repeat(3,1fr); } }
.planday__empty { color:var(--faint); font-size:12px; padding:2px 4px; }
.planitem { display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; cursor:grab;
  background:transparent; transition:background .14s var(--ease); }
.planitem:hover { background:var(--ink-800); }
.planitem:active { cursor:grabbing; }
.planitem.dragging { opacity:.5; }
.planitem__dot { width:7px; height:7px; border-radius:50%; background:var(--ac,var(--faint)); flex:0 0 auto; }
.planitem__t { font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planitem__p { font-family:var(--mono); font-size:10px; color:var(--faint); margin-left:auto; flex:0 0 auto; padding-left:6px; }
.daygrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.daygrid__b { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:12px;
  border:1px solid var(--line); background:var(--ink-800); color:var(--text); cursor:pointer; }
.daygrid__b.is-on { border-color:var(--brass); background:var(--brass-12); }
.daygrid__b .planlbl__dom { font-size:15px; }

/* recap / momentum */
.momentum { text-align:center; padding:24px 18px; border-radius:var(--r-lg);
  background:radial-gradient(120% 120% at 50% 0,var(--brass-12),transparent 70%); border:1px solid var(--line); }
.momentum__score { font-family:var(--display); font-weight:600; font-size:58px; line-height:1; color:var(--brass); }
.momentum__label { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:6px; }
.momentum__bits { display:flex; justify-content:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.mb { font-family:var(--mono); font-size:12px; padding:4px 10px; border-radius:99px; }
.mb--up { color:var(--q2); background:var(--q2-12); }
.mb--down { color:var(--q1); background:var(--q1-12); }
.statcard { padding:16px; border-radius:var(--r-lg); background:var(--ink-800); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.statcard__n { font-family:var(--display); font-weight:600; font-size:26px; display:inline-flex; align-items:center; gap:6px; }
.statcard__n svg { width:20px; height:20px; color:var(--brass); }
.statcard__l { font-size:12px; color:var(--faint); }

/* empty state */
.empty { text-align:center; padding:60px 20px; color:var(--faint); }
.empty svg { width:46px; height:46px; opacity:.4; margin-bottom:14px; }
.empty h3 { font-family:var(--display); font-weight:600; font-size:19px; color:var(--dim); margin-bottom:6px; }
.empty p { font-size:13.5px; max-width:280px; margin-inline:auto; }

/* ============================ MODAL ====================================== */
.modal-scrim { position:fixed; inset:0; z-index:40; background:rgba(8,7,5,.64);
  backdrop-filter:blur(4px); animation:fade .2s ease both; }
@keyframes fade { from{opacity:0;} }
.sheet { position:fixed; left:0; right:0; bottom:0; margin-inline:auto; max-width:520px;
  background:var(--ink-850); border:1px solid var(--line-2); border-radius:22px 22px 0 0;
  box-shadow:var(--shadow-pop); padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  animation:slideup .32s var(--ease) both; overflow-x:hidden; }
@media (min-width:600px){ .sheet { border-radius:22px; left:16px; right:16px; bottom:20px; } }
@keyframes slideup { from{ transform:translateY(24px); opacity:0;} }
.sheet__grip { width:38px; height:4px; border-radius:99px; background:var(--line-2); margin:0 auto 16px; }
.sheet__title { font-family:var(--display); font-weight:600; font-size:20px; margin-bottom:16px; }
.field { margin-bottom:14px; }
.field__label { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:7px; }
.input, .textarea, .select { width:100%; padding:11px 13px; border-radius:var(--r); background:var(--ink-800);
  border:1px solid var(--line); color:var(--text); font-size:15px; transition:.16s var(--ease); }
.input:focus,.textarea:focus,.select:focus { outline:none; border-color:var(--brass); background:var(--ink-750); }
.input::placeholder { color:var(--faint); }
.textarea { resize:vertical; min-height:64px; }
.titleinput { font-family:var(--display); font-size:19px; font-weight:500; padding:6px 2px;
  background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; }
.titleinput:focus { border-color:var(--brass); background:transparent; }

/* quadrant picker */
.qpick { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.qpick__btn { padding:11px; border-radius:var(--r); border:1px solid var(--line); background:var(--ink-800);
  text-align:left; transition:.16s var(--ease); }
.qpick__btn:hover { border-color:var(--line-2); }
.qpick__btn.is-on { border-color:currentColor; }
.qpick__btn[data-q="1"]{ color:var(--q1);} .qpick__btn[data-q="2"]{ color:var(--q2);}
.qpick__btn[data-q="3"]{ color:var(--q3);} .qpick__btn[data-q="4"]{ color:var(--q4);}
.qpick__btn.is-on { background:color-mix(in srgb, currentColor 12%, var(--ink-800)); }
.qpick__no { font-family:var(--mono); font-size:11px; font-weight:600; }
.qpick__lbl { display:block; color:var(--text); font-weight:600; font-size:13px; margin-top:3px; }
.qpick__sub { display:block; color:var(--faint); font-size:11px; }
.toggle-row { display:flex; gap:8px; }
.toggle { flex:1; min-width:0; padding:10px; border-radius:var(--r); border:1px solid var(--line); background:var(--ink-800);
  font-weight:600; font-size:13px; color:var(--dim); transition:.16s var(--ease); }
.toggle.is-on { color:var(--brass); border-color:var(--brass-20); background:var(--brass-12); }
.swatches { display:flex; flex-wrap:wrap; gap:9px; }
.swatch { width:30px; height:30px; border-radius:50%; border:2px solid transparent; transition:.16s var(--ease); }
.swatch:hover { transform:scale(1.08); }
.swatch.is-on { border-color:var(--text); box-shadow:0 0 0 3px var(--ink-800); }
.sheet__foot { display:flex; gap:10px; margin-top:20px; }
.sheet__foot .btn { flex:1; min-width:0; justify-content:center; padding:12px; }

/* segmented (date view nav) */
.seg { display:inline-flex; background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.seg button { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 13px; border-radius:99px; font-size:13px; font-weight:600; color:var(--dim); transition:.16s var(--ease); }
.seg button svg { width:15px; height:15px; opacity:.85; }
.seg button.is-on { background:var(--brass-12); color:var(--brass); }
/* inline "new project" row inside the task sheet */
.newproj { display:flex; gap:8px; margin-top:8px; }
.newproj .input { flex:1; }
.newproj .btn { flex:0 0 auto; }

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- desktop layout switch ---------------------------------------- */
@media (min-width:880px){
  .app { grid-template-columns:var(--side-w) 1fr; }
  .sidebar { display:flex; flex-direction:column; border-right:1px solid var(--line);
    background:linear-gradient(180deg,var(--ink-850),var(--ink-900)); }
  .tabbar { display:none; }
  .fab { right:28px; bottom:28px; }
  .view { padding:24px 28px 60px; }
  .topbar { padding:24px 28px 16px; }
}
/* ============================ POLISH ===================================== */
/* toast */
.toast { position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:60;
  transform:translateX(-50%) translateY(16px); background:var(--ink-700); color:var(--text);
  border:1px solid var(--line-2); padding:11px 18px; border-radius:var(--r-pill); font-size:13.5px;
  font-weight:600; box-shadow:var(--shadow-pop); opacity:0; pointer-events:none; transition:.26s var(--ease);
  max-width:90vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (min-width:880px){ .toast { bottom:28px; } }
/* top loading bar */
.loadbar { position:absolute; top:0; left:0; height:2px; width:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--brass),var(--teal)); z-index:20; }
.loadbar.go { animation:loadgo 1.1s var(--ease) forwards; }
.loadbar.done { transition:transform .2s ease, opacity .35s ease .1s; transform:scaleX(1); opacity:0; }
@keyframes loadgo { 0%{transform:scaleX(0);opacity:1;} 60%{transform:scaleX(.7);} 100%{transform:scaleX(.92);} }
/* interaction states */
.btn--danger { color:var(--q1)!important; border-color:rgba(229,115,59,.4)!important; }
.item:active { transform:scale(.992); }
.item__title, .goal__title, .pcard__name { overflow-wrap:anywhere; }
:focus-visible { outline:2px solid var(--brass); outline-offset:2px; border-radius:5px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline:none; }

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }