/* ============================================================================
   Eisenhower Matrix — design system & styles
   Tokens → base → appbar → rail → board → matrix → cards → list → drawer
   → modals → palette → toasts → responsive
   ========================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, SFMono-Regular, Consolas, monospace;

  --r-xs: 5px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-full: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;

  --dur-fast: .12s; --dur: .2s; --dur-slow: .34s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --bar-h: 62px;
  --rail-h: 46px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.24), 0 1px 1px rgba(0,0,0,.14);
  --shadow-2: 0 4px 14px -4px rgba(0,0,0,.34), 0 2px 6px -2px rgba(0,0,0,.2);
  --shadow-3: 0 18px 48px -12px rgba(0,0,0,.5), 0 6px 18px -6px rgba(0,0,0,.3);
  --shadow-4: 0 30px 70px -18px rgba(0,0,0,.62), 0 10px 26px -10px rgba(0,0,0,.4);
}

/* ── Themes ─────────────────────────────────────────────────────────────── */
html[data-theme="midnight"]{
  color-scheme: dark;
  --bg:            #0a0c14;
  --bg-grad:       radial-gradient(1200px 700px at 12% -8%, #1a1f3a 0%, transparent 62%),
                   radial-gradient(1000px 640px at 92% 4%, #17203a 0%, transparent 58%),
                   radial-gradient(900px 600px at 50% 108%, #151a30 0%, transparent 60%);
  --surface:       #12141f;
  --surface-2:     #171a28;
  --surface-3:     #1e2233;
  --surface-hi:    #262b40;
  /* Precomputed equivalent of .quad's translucent fill over --bg. Kept opaque
     so every backdrop is unambiguous to contrast checkers (and cheaper to
     composite). Recompute if --bg or --surface changes. */
  --panel:         #10121c;
  --border:        #262a3d;
  --border-soft:   #1d2132;
  --border-strong: #363c56;
  --text:          #eef1fb;
  --text-2:        #a2a9c6;
  --text-3:        #8b93b0;   /* ≥4.5:1 on --surface-2 for WCAG AA */
  --accent:        #7b7cff;
  --accent-hi:     #9a9bff;
  --accent-soft:   rgba(123,124,255,.15);
  --accent-ring:   rgba(123,124,255,.42);

  --q1: #ff5d6c; --q1-soft: rgba(255,93,108,.13); --q1-line: rgba(255,93,108,.34);
  --q2: #4bb3f7; --q2-soft: rgba(75,179,247,.13);  --q2-line: rgba(75,179,247,.32);
  --q3: #f7b23b; --q3-soft: rgba(247,178,59,.13);  --q3-line: rgba(247,178,59,.32);
  --q4: #8b93ad; --q4-soft: rgba(139,147,173,.12); --q4-line: rgba(139,147,173,.3);

  --ok: #3ddc97; --warn: #ffb454; --danger: #ff5f6d; --danger-soft: rgba(255,95,109,.14);
  --overdue: #ff7a85;
}
html[data-theme="slate"]{
  color-scheme: dark;
  --bg:            #0f1216;
  --bg-grad:       radial-gradient(1100px 660px at 10% -10%, #1c242e 0%, transparent 60%),
                   radial-gradient(900px 560px at 96% 0%, #1a222c 0%, transparent 55%);
  --surface:       #161b21;
  --surface-2:     #1b2129;
  --surface-3:     #222a34;
  --surface-hi:    #2b3542;
  --panel:         #14181e;
  --border:        #2a333f;
  --border-soft:   #202832;
  --border-strong: #3b4756;
  --text:          #e9eef5;
  --text-2:        #9eabb9;
  --text-3:        #6d7a89;
  --accent:        #46b3a4;
  --accent-hi:     #5fcfbf;
  --accent-soft:   rgba(70,179,164,.15);
  --accent-ring:   rgba(70,179,164,.4);

  --q1: #ff6b6b; --q1-soft: rgba(255,107,107,.12); --q1-line: rgba(255,107,107,.32);
  --q2: #4dabf7; --q2-soft: rgba(77,171,247,.12);  --q2-line: rgba(77,171,247,.3);
  --q3: #ffc078; --q3-soft: rgba(255,192,120,.12); --q3-line: rgba(255,192,120,.3);
  --q4: #8d99a6; --q4-soft: rgba(141,153,166,.11); --q4-line: rgba(141,153,166,.28);

  --ok: #51cf66; --warn: #ffc078; --danger: #ff6b6b; --danger-soft: rgba(255,107,107,.13);
  --overdue: #ff8787;
}
html[data-theme="daylight"]{
  color-scheme: light;
  --bg:            #f4f6fb;
  --bg-grad:       radial-gradient(1100px 640px at 8% -10%, #e5ebff 0%, transparent 60%),
                   radial-gradient(900px 560px at 96% 0%, #f0e9ff 0%, transparent 55%);
  --surface:       #ffffff;
  --surface-2:     #f8fafd;
  --surface-3:     #eef2f9;
  --surface-hi:    #e4eaf5;
  --panel:         #fcfcfe;
  --border:        #dde3ee;
  --border-soft:   #e8edf5;
  --border-strong: #c3ccdd;
  --text:          #131722;
  --text-2:        #4e586c;
  --text-3:        #6b7688;
  --accent:        #5b5bf5;
  --accent-hi:     #4444e0;
  --accent-soft:   rgba(91,91,245,.1);
  --accent-ring:   rgba(91,91,245,.32);

  --q1: #e5484d; --q1-soft: rgba(229,72,77,.08);  --q1-line: rgba(229,72,77,.26);
  --q2: #0a7fd4; --q2-soft: rgba(10,127,212,.08); --q2-line: rgba(10,127,212,.24);
  --q3: #c47f00; --q3-soft: rgba(196,127,0,.09);  --q3-line: rgba(196,127,0,.25);
  --q4: #64708a; --q4-soft: rgba(100,112,138,.09); --q4-line: rgba(100,112,138,.3);

  --ok: #128f5c; --warn: #b26b00; --danger: #d93843; --danger-soft: rgba(217,56,67,.09);
  --overdue: #d93843;

  --shadow-1: 0 1px 2px rgba(20,28,48,.07), 0 1px 1px rgba(20,28,48,.04);
  --shadow-2: 0 3px 10px -3px rgba(20,28,48,.12), 0 1px 3px rgba(20,28,48,.06);
  --shadow-3: 0 16px 40px -12px rgba(20,28,48,.2), 0 4px 12px -4px rgba(20,28,48,.1);
  --shadow-4: 0 28px 64px -16px rgba(20,28,48,.26), 0 8px 20px -8px rgba(20,28,48,.14);
}
html[data-theme="nord"]{
  color-scheme: dark;
  --bg:            #2e3440;
  --bg-grad:       radial-gradient(1100px 640px at 10% -10%, #3b4252 0%, transparent 60%),
                   radial-gradient(900px 560px at 96% 0%, #373e4d 0%, transparent 55%);
  --surface:       #343b48;
  --surface-2:     #3b4252;
  --surface-3:     #434c5e;
  --surface-hi:    #4c566a;
  --panel:         #323946;
  --border:        #465062;
  --border-soft:   #3d4553;
  --border-strong: #5b6679;
  --text:          #eceff4;
  --text-2:        #c2cbd9;
  --text-3:        #8f9bad;
  --accent:        #88c0d0;
  --accent-hi:     #9ed3e2;
  --accent-soft:   rgba(136,192,208,.16);
  --accent-ring:   rgba(136,192,208,.4);

  --q1: #bf616a; --q1-soft: rgba(191,97,106,.16); --q1-line: rgba(191,97,106,.36);
  --q2: #81a1c1; --q2-soft: rgba(129,161,193,.16); --q2-line: rgba(129,161,193,.34);
  --q3: #ebcb8b; --q3-soft: rgba(235,203,139,.15); --q3-line: rgba(235,203,139,.32);
  --q4: #7b869a; --q4-soft: rgba(123,134,154,.14); --q4-line: rgba(123,134,154,.3);

  --ok: #a3be8c; --warn: #ebcb8b; --danger: #bf616a; --danger-soft: rgba(191,97,106,.16);
  --overdue: #d08770;
}

html[data-density="compact"]{ --sp-5: 16px; --sp-6: 20px; --bar-h: 56px; }

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  background-image:var(--bg-grad);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.is-dragging{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
body.is-dragging *{ cursor:grabbing !important; }

h1,h2,h3,h4,p{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
[hidden]{ display:none !important; }
::selection{ background:var(--accent-ring); }

.ico{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7;
      stroke-linecap:round; stroke-linejoin:round; }
.muted{ color:var(--text-3); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
          clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200; padding:10px 16px;
  background:var(--accent); color:#fff; border-radius:var(--r-sm); text-decoration:none;
  font-weight:600; transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }

/* Scrollbars */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; border:3px solid transparent;
  background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--text-3); background-clip:content-box; }
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:var(--r-sm);
  font-size:13px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  border:1px solid transparent; background:var(--surface-3); color:var(--text);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover{ background:var(--surface-hi); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.42; cursor:not-allowed; transform:none; }
.btn .ico{ width:16px; height:16px; }
.btn--primary{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:#fff; box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover{ background:linear-gradient(180deg,var(--accent-hi),var(--accent-hi));
  box-shadow:var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.2); }
.btn--ghost{ background:transparent; border-color:var(--border); color:var(--text-2); }
.btn--ghost:hover{ background:var(--surface-3); color:var(--text); border-color:var(--border-strong); }
.btn--danger{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.btn--danger:hover{ background:var(--danger); color:#fff; }
.btn--sm{ padding:6px 11px; font-size:12px; }

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--r-sm);
  color:var(--text-2); border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.iconbtn:hover{ background:var(--surface-3); color:var(--text); border-color:var(--border); }
.iconbtn:active{ transform:scale(.94); }
.iconbtn:disabled{ opacity:.35; cursor:not-allowed; }
.iconbtn--sm{ width:30px; height:30px; }
.iconbtn--sm .ico{ width:16px; height:16px; }
.iconbtn--danger:hover{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.iconbtn.is-on{ background:var(--accent-soft); color:var(--accent-hi); border-color:var(--accent-ring); }
.iconbtn--busy .ico{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

kbd{
  font-family:var(--font-mono); font-size:10.5px; line-height:1;
  padding:3px 5px; border-radius:var(--r-xs);
  background:var(--surface-3); border:1px solid var(--border);
  border-bottom-width:2px; color:var(--text-2);
}

/* ── App bar ────────────────────────────────────────────────────────────── */
.appbar{
  flex:none; z-index:60;
  display:flex; align-items:center; gap:var(--sp-4);
  height:var(--bar-h); padding:0 var(--sp-4);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--border);
  position:relative;
}
.appbar__brand{ display:flex; align-items:center; gap:11px; flex:none; }
.logo{ width:32px; height:32px; flex:none; }
.logo rect{ fill:var(--q1); } .logo .l2{ fill:var(--q2); }
.logo .l3{ fill:var(--q3); } .logo .l4{ fill:var(--q4); }
.appbar__title h1{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; line-height:1.2; }
.appbar__title p{ font-size:11px; color:var(--text-3); letter-spacing:.01em; }

.appbar__center{ flex:1; display:flex; justify-content:center; min-width:0; }
.search{
  display:flex; align-items:center; gap:8px;
  width:min(520px,100%); height:38px; padding:0 10px 0 12px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--surface); }
.search .ico{ color:var(--text-3); width:16px; height:16px; }
.search input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-size:13.5px; padding:0;
}
.search input::-webkit-search-cancel-button{ display:none; }
.search input::placeholder{ color:var(--text-3); }
.search__kbd{ pointer-events:none; }
.search__clear{ display:flex; padding:2px; border-radius:var(--r-xs); color:var(--text-3); }
.search__clear:hover{ color:var(--text); background:var(--surface-3); }
.search__clear .ico{ width:14px; height:14px; }

.appbar__actions{ display:flex; align-items:center; gap:6px; flex:none; }

.viewswitch{
  display:flex; gap:2px; padding:3px; margin-right:4px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
}
.viewswitch__btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--text-2);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.viewswitch__btn .ico{ width:15px; height:15px; }
.viewswitch__btn:hover{ color:var(--text); background:var(--surface-3); }
.viewswitch__btn.is-active{ background:var(--accent-soft); color:var(--accent-hi); }

/* Local-API sync indicator: only rendered once js/sync.js reports a status */
.syncchip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; margin-right:4px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:650; letter-spacing:.01em; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.syncchip__dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--text-3); }
.syncchip[data-state="synced"]{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.syncchip[data-state="synced"] .syncchip__dot{ background:var(--ok); }
.syncchip[data-state="syncing"]{ color:var(--q2); border-color:var(--q2-line); }
.syncchip[data-state="syncing"] .syncchip__dot{ background:var(--q2); animation:pulse 1.1s var(--ease) infinite; }
.syncchip[data-state="error"]{ color:var(--overdue); border-color:var(--overdue); background:var(--danger-soft); }
.syncchip[data-state="error"] .syncchip__dot{ background:var(--overdue); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (max-width:1180px){ .syncchip #syncLabel{ display:none; } }

#themeBtn .ico--moon{ display:none; }
html[data-theme="daylight"] #themeBtn .ico--sun{ display:none; }
html[data-theme="daylight"] #themeBtn .ico--moon{ display:block; }

/* ── Rail ───────────────────────────────────────────────────────────────── */
.rail{
  flex:none; z-index:55;
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:var(--rail-h); padding:7px var(--sp-4);
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  border-bottom:1px solid var(--border-soft);
  overflow-x:auto; overflow-y:hidden;
}
.rail__stats{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.rail__spacer{ flex:1; min-width:8px; }
.rail__filters{ display:flex; align-items:center; gap:7px; }

.stat{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:var(--r-full); font-size:12px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  white-space:nowrap;
}
.stat b{ color:var(--text); font-variant-numeric:tabular-nums; font-weight:700; }
.stat__dot{ width:7px; height:7px; border-radius:50%; flex:none; background:currentColor; }
.stat--q1,.stat--q2,.stat--q3,.stat--q4{ color:var(--text-2); background:var(--surface-2); }
.stat--q1 b,.stat--q2 b,.stat--q3 b,.stat--q4 b{ color:var(--text); }
.stat--q1 .stat__dot{ background:var(--q1); }
.stat--q2 .stat__dot{ background:var(--q2); }
.stat--q3 .stat__dot{ background:var(--q3); }
.stat--q4 .stat__dot{ background:var(--q4); }
.stat--q1:not(.stat--plain){ border-color:var(--border); }
.stat--alert{ color:var(--overdue); border-color:var(--overdue); background:var(--danger-soft); }
.stat--ok{ color:var(--ok); border-color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:var(--r-full); font-size:12px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  cursor:pointer; white-space:nowrap; user-select:none;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.chip .ico{ width:14px; height:14px; }
.chip:hover{ border-color:var(--border-strong); color:var(--text); }
.chip select{
  border:none; background:none; outline:none; font-size:12px; font-weight:600;
  color:inherit; cursor:pointer; padding:0 2px; appearance:none; padding-right:14px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 7px) 50%, calc(100% - 3px) 50%;
  background-size:4px 4px,4px 4px; background-repeat:no-repeat;
}
.chip select option{ background:var(--surface); color:var(--text); }
.chip--check input{ appearance:none; width:15px; height:15px; border-radius:4px;
  border:1.6px solid var(--border-strong); background:var(--surface); flex:none; position:relative;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.chip--check input:checked{ background:var(--accent); border-color:var(--accent); }
.chip--check input:checked::after{
  content:""; position:absolute; inset:0;
  background:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.chip--check input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.toolbar{
  display:none; flex:none; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:11px var(--sp-4) 3px;
}
body[data-view="list"] .toolbar{ display:flex; }
.toolbar__filters{ display:flex; gap:6px; flex-wrap:wrap; }
.toolbar__right{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--r-full); font-size:12.5px; font-weight:600;
  background:transparent; border:1px solid var(--border); color:var(--text-2);
  transition:all var(--dur-fast) var(--ease);
}
.pill:hover{ border-color:var(--border-strong); color:var(--text); background:var(--surface-2); }
.pill.is-active{ background:var(--accent-soft); border-color:var(--accent-ring); color:var(--accent-hi); }
.pill__n{
  font-variant-numeric:tabular-nums; font-size:11px; font-weight:700;
  padding:1px 6px; border-radius:var(--r-full); background:var(--surface-3); color:var(--text-3);
}
.pill.is-active .pill__n{ background:var(--accent); color:#fff; }
.pill--overdue.is-active{ background:var(--danger-soft); border-color:var(--overdue); color:var(--overdue); }
.pill--overdue.is-active .pill__n{ background:var(--overdue); }

/* ── Board ──────────────────────────────────────────────────────────────── */
.board{
  flex:1; min-height:0; overflow:auto; padding:var(--sp-4) var(--sp-4) var(--sp-6);
  scroll-behavior:smooth;
}
body[data-view="matrix"] .listview,
body[data-view="list"] .matrix{ display:none; }

/* ── Matrix ─────────────────────────────────────────────────────────────── */
.matrix{ display:flex; flex-direction:column; height:100%; min-height:0; gap:5px; }
.matrix__axis{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:0 6px 0 2px;
  font-size:11px; font-weight:700; letter-spacing:.085em; text-transform:uppercase; color:var(--text-3);
}
.matrix__rows{
  font-weight:600; letter-spacing:.05em; text-transform:none; opacity:.8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.matrix__grid{
  flex:1; min-height:0;
  display:grid; gap:12px;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  padding:5px 0 0;
}

.quad{
  display:flex; flex-direction:column; min-height:0; min-width:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-top:3px solid var(--quad-color,var(--border-strong));
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quad--q1{ --quad-color:var(--q1); --quad-soft:var(--q1-soft); --quad-line:var(--q1-line); }
.quad--q2{ --quad-color:var(--q2); --quad-soft:var(--q2-soft); --quad-line:var(--q2-line); }
.quad--q3{ --quad-color:var(--q3); --quad-soft:var(--q3-soft); --quad-line:var(--q3-line); }
.quad--q4{ --quad-color:var(--q4); --quad-soft:var(--q4-soft); --quad-line:var(--q4-line); }
.quad.is-over{
  border-color:var(--quad-color); background:var(--quad-soft);
  box-shadow:0 0 0 3px var(--quad-soft), var(--shadow-3); transform:scale(1.004);
}
.quad.is-dim{ opacity:.45; }
.quad.is-flash{ animation:flash 1.1s var(--ease); }
@keyframes flash{
  0%,100%{ box-shadow:none; }
  25%{ box-shadow:0 0 0 3px var(--quad-line), var(--shadow-3); }
}

.quad__head{
  display:flex; align-items:center; gap:9px; flex:none;
  padding:11px 13px 9px; border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg, var(--quad-soft), transparent);
}
.quad__badge{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:23px; height:23px; border-radius:7px;
  background:var(--quad-color); color:#fff;
  font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px -2px var(--quad-color);
}
html[data-theme="daylight"] .quad__badge{ color:#fff; }
.quad__titles{ min-width:0; flex:1; }
.quad__title{ font-size:13.5px; font-weight:700; letter-spacing:-.005em; line-height:1.25; }
.quad__sub{ font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quad__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 7px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--surface-3); color:var(--text-2); border:1px solid var(--border);
}
.quad__actions{ display:flex; gap:3px; opacity:0; transition:opacity var(--dur) var(--ease); }
.quad:hover .quad__actions,.quad:focus-within .quad__actions{ opacity:1; }
.quad__body{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:9px; display:flex; flex-direction:column; gap:7px;
  scrollbar-gutter:stable;
}
.quad__empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1; min-height:80px; gap:5px; text-align:center;
  color:var(--text-3); font-size:12px; border:1.5px dashed var(--border);
  border-radius:var(--r-md); margin:2px; padding:14px 10px;
}
.quad__empty b{ font-weight:600; color:var(--text-2); font-size:12.5px; }
.quad__foot{
  flex:none; display:flex; gap:6px; padding:0 9px 9px;
}
.quad__foot[hidden]{ display:none; }
.quad__body:has(+ .quad__foot:not([hidden])){ padding-bottom:2px; }
.quad__foot textarea{
  flex:1; resize:none; min-height:34px; max-height:120px; padding:8px 10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:13px; outline:none;
}
.quad__foot textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* ── Task card ──────────────────────────────────────────────────────────── */
.card{
  position:relative; flex:none;
  background:var(--surface-2); border:1px solid var(--border-soft);
  border-left:3px solid var(--quad-color,var(--border-strong));
  border-radius:var(--r-md);
  box-shadow:var(--shadow-1);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  animation:cardIn var(--dur-slow) var(--ease-out) backwards;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(6px) scale(.985); } }
.card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-2); }
.card.is-done{ opacity:.62; }
.card.is-done .card__title{ text-decoration:line-through; text-decoration-color:var(--text-3); }
.card.is-overdue{ border-left-color:var(--overdue); }
.card.is-selected{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--shadow-2); }
.card.is-ghost{ opacity:.34; }
.card.is-placeholder{
  border-style:dashed; border-color:var(--quad-color,var(--accent));
  background:var(--quad-soft,var(--accent-soft)); box-shadow:none; animation:none;
}
.card.is-placeholder .card__inner{ visibility:hidden; }
.card.is-flash{ animation:flashCard 1.2s var(--ease); }
@keyframes flashCard{
  0%,100%{ box-shadow:var(--shadow-1); }
  20%{ box-shadow:0 0 0 3px var(--accent-ring), var(--shadow-3); }
}
.card.is-dragging{
  position:fixed; z-index:999; pointer-events:none;
  width:var(--drag-w,320px);
  box-shadow:var(--shadow-4), 0 0 0 1px var(--quad-line,var(--accent-ring));
  transform:rotate(1.6deg) scale(1.018);
  opacity:.98; animation:none; border-color:var(--quad-color,var(--accent));
  transition:none; will-change:transform;
}
.card.is-dragging .card__grip{ color:var(--quad-color,var(--accent)); }

.card__inner{ display:flex; align-items:flex-start; gap:8px; padding:9px 10px 9px 8px; }

.card__check{
  flex:none; margin-top:1px; appearance:none;
  width:17px; height:17px; border-radius:5px;
  border:1.7px solid var(--border-strong); background:var(--surface);
  position:relative; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
/* larger pointer target without changing the visual box */
.card__check::before{ content:""; position:absolute; inset:-6px; }
.card__check:hover{ border-color:var(--quad-color,var(--accent)); transform:scale(1.08); }
.card__check:checked{ background:var(--ok); border-color:var(--ok); }
.card__check:checked::after{
  content:""; position:absolute; inset:0;
  background:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

.card__main{ flex:1; min-width:0; cursor:grab; }
.card__main:active{ cursor:grabbing; }
.card__title{
  font-size:13.5px; font-weight:550; line-height:1.42; letter-spacing:-.003em;
  overflow-wrap:anywhere; cursor:grab;
}
.card.is-editing{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-2); }
.card__title[contenteditable="true"]{
  outline:none; background:var(--surface-3); border-radius:var(--r-xs);
  cursor:text; user-select:text; -webkit-user-select:text;
  box-shadow:0 0 0 2px var(--accent-ring); padding:1px 3px; margin:-1px -3px;
}
.card__notes{
  margin-top:3px; font-size:11.5px; color:var(--text-3); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere;
}
.card__meta{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:6px; }

.tagchip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:var(--r-full);
  font-size:10.5px; font-weight:600; letter-spacing:.01em;
  background:var(--surface-3); color:var(--text-2); border:1px solid var(--border);
}
.tagchip::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--tag-color,var(--accent)); }
.tagchip--button{ cursor:pointer; }
.tagchip--button:hover{ border-color:var(--accent-ring); color:var(--text); }

.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:var(--r-full);
  font-size:10.5px; font-weight:650; letter-spacing:.01em; white-space:nowrap;
  background:var(--surface-3); color:var(--text-2); border:1px solid var(--border);
}
.badge .ico{ width:11px; height:11px; stroke-width:2.1; }
.badge--due{ color:var(--text-2); }
.badge--today{ background:var(--q3-soft); color:var(--q3); border-color:var(--q3-line); }
.badge--tomorrow{ background:var(--q2-soft); color:var(--q2); border-color:var(--q2-line); }
.badge--soon{ color:var(--text-2); }
.badge--overdue{ background:var(--danger-soft); color:var(--overdue); border-color:var(--overdue); }
.badge--done{ background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok); border-color:var(--ok); }
.badge--sub{ color:var(--text-2); }
.badge--sub.is-all{ color:var(--ok); border-color:var(--ok); }
button.badge{ cursor:pointer; transition:border-color var(--dur-fast) var(--ease),
  background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
button.badge:hover{ border-color:var(--quad-color,var(--accent)); color:var(--text); }
button.badge[aria-expanded="true"]{ background:var(--surface-hi); color:var(--text); }
.badge--prio-high{ color:var(--q1); border-color:var(--q1-line); background:var(--q1-soft); }
.badge--prio-med{ color:var(--q3); border-color:var(--q3-line); background:var(--q3-soft); }
.badge--prio-low{ color:var(--text-3); }
.badge--rec{ color:var(--accent-hi); background:var(--accent-soft); border-color:var(--accent-ring); }
.badge--timer{
  color:var(--accent-hi); background:var(--accent-soft); border-color:var(--accent-ring);
}
.badge--timer .badge__label{ font-variant-numeric:tabular-nums; }

/* Subtask completion: a hairline sitting between the title and the badges, so it
   reads as part of the task rather than as another metadata chip. */
.progress{
  height:3px; border-radius:99px; background:var(--surface-hi); overflow:hidden;
  margin:8px 0 2px;
}
.progress__fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--ok) 72%, transparent), var(--ok));
  transition:width var(--dur-slow) var(--ease);
}

.card__tools{
  flex:none; display:flex; flex-direction:column; gap:2px;
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.card:hover .card__tools,.card:focus-within .card__tools{ opacity:1; }
.card__tool{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:var(--r-xs); color:var(--text-3);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.card__tool .ico{ width:13.5px; height:13.5px; stroke-width:1.9; }
.card__tool:hover{ background:var(--surface-hi); color:var(--text); }
.card__tool--danger:hover{ background:var(--danger-soft); color:var(--danger); }
.card__grip{ cursor:grab; }
.card__grip:active{ cursor:grabbing; }

.card__subs{ padding:0 10px 8px 33px; display:flex; flex-direction:column; gap:2px; }
.subrow{
  display:flex; align-items:center; gap:7px; padding:2px 0;
  font-size:12px; color:var(--text-2); border-radius:var(--r-xs);
}
.subrow:hover{ color:var(--text); }
.subrow input[type="checkbox"]{
  appearance:none; width:15px; height:15px; border-radius:4px; flex:none;
  border:1.5px solid var(--border-strong); background:var(--surface); position:relative; cursor:pointer;
}
.subrow input[type="checkbox"]::before{ content:""; position:absolute; inset:-5px; }
.subrow input[type="checkbox"]:checked{ background:var(--ok); border-color:var(--ok); }
.subrow input[type="checkbox"]:checked::after{
  content:""; position:absolute; inset:0;
  background:no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.subrow__text{ flex:1; min-width:0; overflow-wrap:anywhere; }
.subrow.is-done .subrow__text{ text-decoration:line-through; color:var(--text-3); }

/* ── List view ──────────────────────────────────────────────────────────── */
.listview{ padding-top:var(--sp-3); }
.list{ display:flex; flex-direction:column; gap:var(--sp-5); }
.group__head{
  display:flex; align-items:center; gap:9px; margin-bottom:9px;
  padding-bottom:7px; border-bottom:1px solid var(--border-soft);
  position:sticky; top:0; z-index:2;
  background:var(--bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.group__swatch{ width:10px; height:10px; border-radius:3px; background:var(--quad-color,var(--text-3)); flex:none; }
.group__title{ font-size:13px; font-weight:700; letter-spacing:-.005em; }
.group__sub{ font-size:11.5px; color:var(--text-3); }
.group__count{
  margin-left:auto; font-size:11.5px; font-weight:700; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.group__items{ display:flex; flex-direction:column; gap:7px; }

/* List view: one compact row per task, title left / metadata right.
   Structure is flat in the DOM, so grid areas arrange it without extra markup. */
.card--row .card__inner{
  display:grid; align-items:center; gap:4px 12px; padding:8px 10px 8px 8px;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "check title tools"
    ".     prog  tools"
    ".     meta  tools"
    ".     subs  tools";
}
.card--row .card__check{ grid-area:check; align-self:start; margin-top:2px; }
.card--row .card__main{ display:contents; }
.card--row .card__title{ grid-area:title; min-width:0; }
.card--row .card__meta{ grid-area:meta; margin-top:3px; }
.card--row .card__notes{ display:none; }
/* In a one-line row a full-width bar would read as a divider, so the progress
   collapses into a short inline meter that sits under the title. */
.card--row .progress{ grid-area:prog; width:120px; justify-self:start; margin:5px 0 0; }
.card--row .card__tools{ grid-area:tools; flex-direction:row; align-self:start; }
.card--row .card__subs{ grid-area:subs; padding:2px 0 0; }

@media (min-width:760px){
  /* wide screens: title and metadata share a baseline; the meter tucks under the
     title in its own slim row, and the checklist spans the full width below. */
  .card--row .card__inner{
    grid-template-areas:
      "check title meta  tools"
      ".     prog  prog  tools"
      ".     subs  subs  tools";
  }
  .card--row .card__meta{ margin-top:0; }
  .card--row .progress{ margin:6px 0 0; }
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.emptystate{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; height:100%; min-height:340px; text-align:center; padding:var(--sp-6);
}
.emptystate svg{ width:88px; height:88px; fill:currentColor; color:var(--text-3); opacity:.32; }
.emptystate h2{ font-size:18px; font-weight:700; letter-spacing:-.015em; }
.emptystate p{ font-size:13.5px; color:var(--text-3); max-width:44ch; }

/* ── Drawer ─────────────────────────────────────────────────────────────── */
.scrim{
  position:fixed; inset:0; z-index:90;
  background:rgba(6,8,16,.5); backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  animation:fade var(--dur) var(--ease);
}
@keyframes fade{ from{ opacity:0; } }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:100;
  width:min(460px,100vw);
  display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:var(--shadow-4);
  animation:slideIn var(--dur-slow) var(--ease-out);
}
@keyframes slideIn{ from{ transform:translateX(24px); opacity:.4; } }
.drawer.is-closing{ animation:slideOut var(--dur) var(--ease) forwards; }
@keyframes slideOut{ to{ transform:translateX(24px); opacity:0; } }

.drawer__head{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.drawer__headleft{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.drawer__headright{ display:flex; gap:3px; }
.drawer__head h2{ font-size:13.5px; font-weight:700; letter-spacing:-.005em; }
.drawer__back{ display:none; }
.drawer__body{ flex:1; min-height:0; overflow-y:auto; padding:var(--sp-4) var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4); }
.drawer__title{
  width:100%; padding:9px 11px; font-size:15.5px; font-weight:650; letter-spacing:-.01em;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); outline:none;
}
.drawer__title:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.drawer__meta{
  margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--border-soft);
  font-size:11px; color:var(--text-3); line-height:1.7;
}
.drawer__foot{
  flex:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px var(--sp-4); border-top:1px solid var(--border);
  background:var(--surface-2);
}
.drawer__footright{ margin-left:auto; display:flex; gap:7px; }
.chip--done span{ font-weight:650; }

.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field__label{
  font-size:10.5px; font-weight:700; letter-spacing:.085em; text-transform:uppercase; color:var(--text-3);
}
.field__labelrow{ display:flex; align-items:center; justify-content:space-between; }
.input{
  width:100%; padding:8px 10px; font-size:13px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  outline:none; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:hover{ border-color:var(--border-strong); }
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input--area{ resize:vertical; min-height:76px; line-height:1.55; }
.input--bare{ background:transparent; border-style:dashed; }
html[data-theme="daylight"] .input{ background:#fff; }
html[data-theme="daylight"] .input--bare{ background:transparent; }

.quadpick{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.quadpick__btn{
  display:flex; align-items:center; gap:8px; text-align:left;
  padding:9px 10px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border);
  transition:all var(--dur-fast) var(--ease);
}
.quadpick__btn:hover{ border-color:var(--qp-color); background:var(--qp-soft); }
.quadpick__btn.is-active{ border-color:var(--qp-color); background:var(--qp-soft);
  box-shadow:0 0 0 2px var(--qp-soft); }
.quadpick__n{
  width:19px; height:19px; border-radius:6px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--qp-color); color:#fff; font-size:10.5px; font-weight:800;
}
.quadpick__t{ font-size:12.5px; font-weight:650; line-height:1.15; }
.quadpick__s{ font-size:10.5px; color:var(--text-3); }

.tags{ display:flex; flex-wrap:wrap; gap:5px; }
.tags:empty{ display:none; }
.tag-edit{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 5px 3px 9px; border-radius:var(--r-full); font-size:11.5px; font-weight:600;
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-2);
}
.tag-edit::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--tag-color,var(--accent)); }
.tag-edit button{ display:flex; color:var(--text-3); border-radius:50%; padding:1px; }
.tag-edit button:hover{ color:var(--danger); background:var(--danger-soft); }
.tag-edit button .ico{ width:11px; height:11px; stroke-width:2.4; }

.subtasks{ display:flex; flex-direction:column; gap:3px; }
.subtasks:empty{ display:none; }
.subtask{
  display:flex; align-items:center; gap:8px; padding:5px 7px;
  border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border-soft);
}
.subtask:hover{ border-color:var(--border); }
.subtask input[type="checkbox"]{
  appearance:none; width:15px; height:15px; border-radius:4px; flex:none;
  border:1.6px solid var(--border-strong); background:var(--surface); position:relative; cursor:pointer;
}
.subtask input[type="checkbox"]:checked{ background:var(--ok); border-color:var(--ok); }
.subtask input[type="checkbox"]:checked::after{
  content:""; position:absolute; inset:0;
  background:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.subtask input[type="text"]{
  flex:1; min-width:0; background:none; border:none; outline:none; font-size:12.5px;
}
.subtask.is-done input[type="text"]{ text-decoration:line-through; color:var(--text-3); }
.subtask__del{ display:flex; color:var(--text-3); padding:2px; border-radius:var(--r-xs); }
.subtask__del:hover{ color:var(--danger); background:var(--danger-soft); }
.subtask__del .ico{ width:13px; height:13px; }
.subtask-add{ display:flex; gap:6px; align-items:center; }
.subtask-add .input{ flex:1; }

.timer{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 13px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); }
.timer__time{
  font-family:var(--font-mono); font-size:24px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; min-width:82px;
}
.timer.is-running .timer__time{ color:var(--accent-hi); }
.timer.is-done{ border-color:var(--ok); background:color-mix(in srgb,var(--ok) 10%,transparent); }
.timer__ctrls{ display:flex; gap:5px; flex-wrap:wrap; }

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(6,8,16,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:fade var(--dur) var(--ease);
}
.modal__box{
  width:min(460px,100%); padding:var(--sp-5);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-4); animation:pop var(--dur-slow) var(--ease-out);
}
@keyframes pop{ from{ transform:scale(.96) translateY(8px); opacity:0; } }
.modal__box h2{ font-size:16px; font-weight:700; letter-spacing:-.015em; margin-bottom:8px; }
.modal__body{ font-size:13.5px; color:var(--text-2); line-height:1.6; }
.modal__body strong{ color:var(--text); font-weight:650; }
.modal__body ul{ margin:10px 0 0; padding-left:18px; }
.modal__body li{ margin:3px 0; }
.modal__body .kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin-top:10px; }
.modal__body .kv b{ font-weight:650; color:var(--text); font-variant-numeric:tabular-nums; }
.modal__actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:var(--sp-5); flex-wrap:wrap; }

/* ── Command palette ────────────────────────────────────────────────────── */
.modal__box--palette{
  width:min(600px,100%); padding:0; overflow:hidden;
  align-self:flex-start; margin-top:8vh;
  animation:pop var(--dur) var(--ease-out);
}
.palette__inputrow{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.palette__inputrow .ico{ color:var(--text-3); }
.palette__inputrow input{
  flex:1; min-width:0; background:none; border:none; outline:none;
  font-size:15px; font-weight:500; letter-spacing:-.01em;
}
.palette__list{ max-height:min(52vh,420px); overflow-y:auto; padding:6px; }
.palette__group{
  padding:9px 10px 4px; font-size:10.5px; font-weight:700; letter-spacing:.085em;
  text-transform:uppercase; color:var(--text-3);
}
.palette__item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 10px; border-radius:var(--r-sm); font-size:13.5px; color:var(--text-2);
}
.palette__item .ico{ width:16px; height:16px; color:var(--text-3); }
.palette__item:hover{ background:var(--surface-3); color:var(--text); }
.palette__item.is-active{ background:var(--accent-soft); color:var(--accent-hi); }
.palette__item.is-active .ico{ color:var(--accent-hi); }
.palette__item small{ margin-left:auto; font-size:11px; color:var(--text-3); font-weight:600; }
.palette__empty{ padding:26px 16px; text-align:center; color:var(--text-3); font-size:13px; }
.palette__hint{
  display:flex; gap:8px; align-items:center; padding:9px 14px;
  border-top:1px solid var(--border); font-size:11px; color:var(--text-3);
}

/* ── Context menu ───────────────────────────────────────────────────────── */
.ctxmenu{
  position:fixed; z-index:160; min-width:206px; padding:5px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-3); animation:pop var(--dur-fast) var(--ease-out);
}
.ctxmenu__item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 9px; border-radius:var(--r-sm); font-size:13px; color:var(--text-2);
}
.ctxmenu__item .ico{ width:15px; height:15px; color:var(--text-3); }
.ctxmenu__item:hover{ background:var(--surface-3); color:var(--text); }
.ctxmenu__item:hover .ico{ color:var(--text-2); }
.ctxmenu__item--danger{ color:var(--danger); }
.ctxmenu__item--danger .ico{ color:var(--danger); }
.ctxmenu__item--danger:hover{ background:var(--danger-soft); color:var(--danger); }
.ctxmenu__item kbd{ margin-left:auto; }
.ctxmenu__sep{ height:1px; background:var(--border-soft); margin:4px 6px; }
.ctxmenu__label{
  padding:7px 9px 4px; font-size:10px; font-weight:700; letter-spacing:.085em;
  text-transform:uppercase; color:var(--text-3);
}

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.toasts{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:200; display:flex; flex-direction:column-reverse; gap:9px;
  align-items:center; pointer-events:none; width:min(560px,calc(100vw - 32px));
}
.toast{
  pointer-events:auto; display:flex; align-items:center; gap:11px;
  width:100%; padding:11px 13px;
  background:color-mix(in srgb, var(--surface-3) 94%, transparent);
  border:1px solid var(--border-strong); border-left:3px solid var(--accent);
  border-radius:var(--r-md); box-shadow:var(--shadow-3);
  font-size:13px; color:var(--text);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:toastIn var(--dur-slow) var(--ease-out);
}
.toast.is-out{ animation:toastOut var(--dur) var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(10px) scale(.98); } }
.toast--ok{ border-left-color:var(--ok); }
.toast--warn{ border-left-color:var(--warn); }
.toast--danger{ border-left-color:var(--danger); }
.toast__icon{ flex:none; display:flex; }
.toast__icon .ico{ width:17px; height:17px; }
.toast--ok .toast__icon{ color:var(--ok); }
.toast--warn .toast__icon{ color:var(--warn); }
.toast--danger .toast__icon{ color:var(--danger); }
.toast__msg{ flex:1; min-width:0; overflow-wrap:anywhere; }
.toast__msg b{ font-weight:650; }
.toast__action{
  flex:none; padding:5px 11px; border-radius:var(--r-sm); font-size:12px; font-weight:700;
  background:var(--accent-soft); color:var(--accent-hi); border:1px solid var(--accent-ring);
}
.toast__action:hover{ background:var(--accent); color:#fff; }
.toast__close{ flex:none; display:flex; color:var(--text-3); padding:3px; border-radius:var(--r-xs); }
.toast__close:hover{ color:var(--text); background:var(--surface-hi); }
.toast__close .ico{ width:13px; height:13px; }

/* ── Bulk bar ───────────────────────────────────────────────────────────── */
.bulkbar{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:180; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  max-width:calc(100vw - 32px); padding:10px 14px;
  background:color-mix(in srgb, var(--surface-3) 95%, transparent);
  border:1px solid var(--border-strong); border-radius:var(--r-lg);
  box-shadow:var(--shadow-4); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:toastIn var(--dur-slow) var(--ease-out);
}
.bulkbar__count{ font-size:12.5px; font-weight:700; color:var(--accent-hi); white-space:nowrap; }
.bulkbar__actions{ display:flex; gap:5px; flex-wrap:wrap; }

/* ── Drag feedback helpers ──────────────────────────────────────────────── */
body.is-dragging .quad__body{ min-height:60px; }
body.is-dragging .card:not(.is-dragging){ transition:transform var(--dur-fast) var(--ease); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .appbar__title p{ display:none; }
  .viewswitch__btn span{ display:none; }
  .viewswitch__btn{ padding:7px 9px; }
}
@media (max-width:980px){
  .matrix__axis{ display:none; }
  .matrix__grid{ grid-template-columns:1fr; grid-template-rows:none; gap:10px; }
  .quad{ min-height:210px; }
  .board{ padding:var(--sp-3) var(--sp-3) var(--sp-6); }
  .matrix{ height:auto; }
  .appbar__center{ order:3; flex-basis:100%; }
  .appbar{ height:auto; flex-wrap:wrap; padding:9px var(--sp-3); row-gap:9px; }
  .appbar__actions{ margin-left:auto; }
  .rail{ min-height:0; flex-wrap:wrap; }
  .rail__spacer{ display:none; }
}
@media (max-width:620px){
  #addBtn span{ display:none; }
  #addBtn{ padding:9px 11px; }
  .drawer{ width:100vw; border-left:none; animation:slideUp var(--dur-slow) var(--ease-out); }
  @keyframes slideUp{ from{ transform:translateY(20px); opacity:.5; } }
  .drawer__back{ display:inline-flex; }
  .field-row{ grid-template-columns:1fr; }
  .quadpick{ grid-template-columns:1fr; }
  .toasts,.bulkbar{ bottom:12px; }
  .toolbar{ padding:9px var(--sp-3) 0; }
  .card__tools{ opacity:1; }
  .quad__actions{ opacity:1; }
}

/* Collapsible filter strip: on phones the rail keeps only the headline stats on
   the first row and the filters slide in on demand, so no chip is unreachable. */
.rail__filters-toggle{ display:none; }
/* Inline "search" affordance used instead of the always-on search field. */
.mobilefind{ display:none; }
/* Per-quadrant back affordance, shown only while drilled into a quadrant. */
.group__back{ display:none; }

@media (max-width:760px){
  .mobilefind{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex:none; border-radius:var(--r-sm);
    color:var(--text-2); border:1px solid var(--border);
  }
  .mobilefind:hover{ color:var(--text); border-color:var(--border-strong); }
  .rail__filters-toggle{
    display:inline-flex; align-items:center; gap:5px; flex:none;
    padding:6px 10px; min-height:34px; border-radius:var(--r-full);
    font-size:12px; font-weight:650; color:var(--text-2);
    background:var(--surface-2); border:1px solid var(--border);
  }
  .rail__filters-toggle::after{
    content:""; width:6px; height:6px; border-right:1.6px solid currentColor;
    border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-1px);
  }
  [data-mobile-filters="open"] .rail__filters-toggle{
    color:var(--accent-hi); border-color:var(--accent-ring); background:var(--accent-soft);
  }
  [data-mobile-filters="open"] .rail__filters-toggle::after{
    transform:rotate(-135deg) translateY(-1px);
  }
}

/* ── Phone layout (<=620px) ─────────────────────────────────────────────── */
@media (max-width:620px){
  /* Header: one compact row. The search field is hidden and revealed on demand
     so the app bar stops consuming a quarter of the screen. */
  .appbar__center{ display:none; }
  .appbar[data-search="open"] .appbar__center{
    display:flex; order:4; flex-basis:100%; margin-top:2px;
  }
  .syncchip{ padding:0; width:44px; height:44px; justify-content:center; margin-right:0; }
  .syncchip #syncLabel{ display:none; }
  .mobilefind{ width:44px; height:44px; border:none; }
  .viewswitch__btn{ padding:9px 11px; min-width:44px; min-height:44px; justify-content:center; }

  /* The app bar cannot fit every control at this width, so drop the two least
     essential (undo/redo, both offered in the overflow menu on phones) rather
     than letting them paint over the board. The primary action stays in place. */
  #undoBtn, #redoBtn{ display:none; }
  #addBtn{ min-width:44px; }
  #addBtn span{ display:none; }
  #addBtn .ico{ width:22px; height:22px; stroke-width:2.2; }

  /* Filters collapse into the rail's second row. */
  .rail{ flex-wrap:wrap; align-items:center; row-gap:8px; padding:8px 12px; overflow:visible; }
  .rail__spacer{ display:none; }
  .rail__filters{ display:none; }
  [data-mobile-filters="open"] .rail__filters{ display:flex; flex-wrap:wrap; flex-basis:100%; gap:7px; }
  /* One calm row of headline stats. The per-quadrant counts are already on each
     quadrant border, so repeating them here would cost three rows of chrome.
     Sized to fit three chips without truncation at 360px wide. */
  .rail__stats{
    flex:1; min-width:0; flex-wrap:nowrap; overflow-x:auto;
    gap:6px; scrollbar-width:none; -ms-overflow-style:none;
  }
  .rail__stats::-webkit-scrollbar{ display:none; }
  .rail__stats .stat{ flex:0 0 auto; }
  .rail__stats .stat--q1,
  .rail__stats .stat--q2,
  .rail__stats .stat--q3,
  .rail__stats .stat--q4{ display:none; }
  .rail__stats .stat{ padding:5px 9px; font-size:11.5px; gap:5px; min-height:34px; }
  /* The figure alone is self-explanatory next to its target icon; the trailing
     label is what pushed this chip past the viewport and into a clipped edge. */
  .rail__stats .stat__tail{ display:none; }
  .stat{ min-height:34px; }

  /* Board: no axis chrome, compact quadrant summary, drill-down on tap. */
  .matrix__axis{ display:none; }
  .matrix__grid{ gap:8px; }

  .quad__head{ padding:9px 11px; }
  .quad__sub{ display:none; }
  .quad__badge{ width:26px; height:26px; border-radius:8px; font-size:12px; }
  .quad__actions{ opacity:1; }
  .quad__actions .iconbtn{ width:34px; height:34px; }

  .card__tools{ opacity:1; gap:2px; }
  .card__tool{ width:34px; height:34px; position:relative; }
  /* The icon stays 16px but the tap halo reaches ~44px, without making the card
     taller. Neighbouring halos meet rather than overlap. */
  .card__tool::before{ content:""; position:absolute; inset:-5px; }
  .card__tool .ico{ width:16px; height:16px; }
  /* The grip is redundant on touch: the card body is the drag handle, and a
     third stacked tool added ~36px of height to every card. */
  .card__grip{ display:none; }

  /* Touch targets: the checkbox keeps its look but gains a forgiving halo. */
  .card__check{ width:22px; height:22px; border-radius:6px; margin-top:0; }
  .card__check::before{ inset:-11px; }
  .subrow input[type="checkbox"]{ width:19px; height:19px; }
  .subrow input[type="checkbox"]::before{ inset:-10px; }
  .subtask input[type="checkbox"]{ width:20px; height:20px; }
  .subtask{ padding:8px; gap:10px; }
  .subtask__del{ width:38px; height:38px; align-items:center; justify-content:center; }

  /* Dropdown chips get real height so they are easy to hit. */
  .chip{ padding:8px 12px; min-height:40px; }
  .chip select{ padding:4px 16px 4px 2px; }
  .chip--check input{ width:19px; height:19px; }
  .pill{ padding:8px 12px; min-height:40px; }

  /* Primary chrome controls reach a true 44px touch target on phones. */
  .appbar .iconbtn{ width:44px; height:44px; }
  .appbar .btn{ min-height:44px; }
  .rail__filters-toggle{ min-height:44px; padding:8px 14px; }

  /* Interactive inline chips get a thumb-sized height too. */
  button.tagchip{ padding:6px 9px; }
  button.badge{ padding:5px 9px; }
  /* The quadrant header double-duties as the drill-down control. */
  .quad__titles{ min-height:44px; display:flex; flex-direction:column; justify-content:center; cursor:pointer; }

  /* Context menu becomes a thumb-reachable bottom sheet. */
  .ctxmenu{
    position:fixed; left:0 !important; right:0; bottom:0; top:auto !important;
    width:100%; max-height:66vh; overflow-y:auto;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-left:none; border-right:none; border-bottom:none;
    box-shadow:var(--shadow-4); animation:sheetUp var(--dur) var(--ease-out);
    padding:6px 8px calc(10px + env(safe-area-inset-bottom));
  }
  .ctxmenu__item{ padding:12px; font-size:14px; }
  @keyframes sheetUp{ from{ transform:translateY(14px); opacity:.5; } }

  /* Toasts and the bulk bar clear the home indicator. */
  .toasts,.bulkbar{ bottom:calc(12px + env(safe-area-inset-bottom)); }
  .toast{ padding:12px 13px; }
  .bulkbar{ width:calc(100vw - 20px); gap:10px; }
  .bulkbar__actions{ gap:6px; }
  .bulkbar .btn{ padding:9px 12px; }

  .quad__empty{ min-height:76px; padding:12px 10px; }
}

/* Touch devices: hover-revealed affordances are otherwise unreachable. */
@media (hover:none){
  .quad__actions,.card__tools{ opacity:1; }
}

/* ── Phone drill-down: tap a quadrant header to focus it ────────────────── */
@media (max-width:620px){
  body[data-view="matrix"][data-mobile-quad] .quad{ display:none; }
  body[data-view="matrix"][data-mobile-quad="q1"] .quad--q1,
  body[data-view="matrix"][data-mobile-quad="q2"] .quad--q2,
  body[data-view="matrix"][data-mobile-quad="q3"] .quad--q3,
  body[data-view="matrix"][data-mobile-quad="q4"] .quad--q4{ display:flex; }
  /* A focused quadrant owns the board, so its list stops scrolling inside a box
     that is itself inside a scrolling page (nested scroll on touch). */
  body[data-view="matrix"][data-mobile-quad] .matrix__grid{ grid-template-columns:1fr; }
  body[data-view="matrix"][data-mobile-quad] .quad__body{ overflow:visible; }
  body[data-view="matrix"][data-mobile-quad] .card__title{ font-size:15px; }
  body[data-view="matrix"][data-mobile-quad] .quad__head{
    position:sticky; top:0; z-index:3;
    background:var(--surface); border-bottom:1px solid var(--border);
  }

  .group__back{
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 11px; margin:-4px 0 2px; border-radius:var(--r-full);
    font-size:12px; font-weight:650; color:var(--text-2);
    background:var(--surface-2); border:1px solid var(--border);
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* Print: matrix as a clean handout */
@media print{
  html,body{ height:auto; overflow:visible; background:#fff; color:#000; }
  .appbar,.rail,.toolbar,.bulkbar,.toasts,.drawer,.scrim,.modal{ display:none !important; }
  .board{ overflow:visible; padding:0; }
  .matrix__grid{ gap:8px; }
  .quad{ border:1.5px solid #999; min-height:170px; page-break-inside:avoid; break-inside:avoid; }
  .card{ border:1px solid #ccc; box-shadow:none; }
  .card__tools,.card__check{ display:none; }
}