/* PersonalVault — "Milestone" design system — Google Material (M3) dark theme.
   Token-driven: every surface (home, planning, matrix, habits, learn, focus,
   calendar, kanban, modals) consumes these variables + the shared component
   classes, so the whole app shares one Material look. Blue is the primary. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

:root{
  /* surfaces — M3 dark neutrals (surface → surface-container elevations) */
  --bg:#121316; --bg-1:#1a1c1e; --bg-2:#202327; --panel-head:#16181b; --field-bg:#1e2125; --nav-active:#1e2a3d;
  /* lines — M3 outline / outline-variant */
  --line:#2a2c30; --line-2:#33363b; --line-3:#1e2125; --line-strong:#3c3f45;
  /* text — M3 on-surface / on-surface-variant (raised for contrast on dark) */
  --txt:#ecebef; --txt-soft:#d3d2d7; --txt-dim:#b8b7bd; --txt-mute:#a2a2a9; --txt-faint:#83838b; --txt-ghost:#5e5e66;
  /* brand + status — Google blue primary */
  --accent:#8ab4f8; --accent-2:#4285f4; --accent-soft:#aecbfa; --accent-grad:linear-gradient(140deg,#5e97f6,#3b78e7);
  --flag:#8ab4f8;   /* Milestone brand blue — flag logo + milestone icons */
  --good:#81c995; --done:#81c995; --warn:#fdd663; --warn-soft:#f6c244; --bad:#f28b82;
  /* type + radii — Roboto + Material's rounded geometry */
  --mono:'Roboto Mono',ui-monospace,monospace;
  --sans:'Roboto',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);overflow:hidden;letter-spacing:-.003em;font-size:18px;line-height:1.5;font-weight:500;}
.mono{font-family:var(--mono);letter-spacing:0;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:#26262d;border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}
button{font-family:inherit;}
input,textarea{font-family:inherit;color:var(--txt);}
.hidden{display:none !important;}

/* ---------- buttons / inputs (Material: pill shape, state-layer hovers) ---------- */
.btn{border:1px solid var(--line-strong);background:transparent;color:var(--txt-soft);font-family:var(--sans);font-weight:500;
  font-size:15.5px;letter-spacing:.01em;padding:8px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .12s,border-color .12s,background .12s;}
.btn:hover{color:var(--accent);border-color:var(--accent);background:rgba(138,180,248,.10);}
.btn:active{background:rgba(138,180,248,.16);}
.btn-primary{border:none;background:var(--accent-grad);color:#fff;font-family:var(--sans);font-weight:500;font-size:15.5px;padding:9px 20px;
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px 1px rgba(0,0,0,.25);}
.btn-primary:hover{filter:brightness(1.08);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.45),0 3px 8px 2px rgba(0,0,0,.25);}
.field{width:100%;background:var(--field-bg);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:11px 14px;
  font-size:16px;color:var(--txt);outline:none;transition:border-color .12s,box-shadow .12s;}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.field::placeholder,textarea::placeholder,input::placeholder{color:var(--txt-faint);}
.ghost{color:var(--txt-ghost);cursor:pointer;transition:color .12s;}
.ghost:hover{color:var(--txt);}
.link{color:var(--accent-soft);cursor:pointer;text-decoration:none;}

/* ---------- auth screen ---------- */
.auth-wrap{height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{width:360px;max-width:100%;border:1px solid var(--line-2);border-radius:16px;padding:30px;background:var(--bg-1);box-shadow:0 24px 60px rgba(0,0,0,.4);}
.auth-card h1{font-size:23px;margin:0 0 4px;letter-spacing:-.02em;}
.auth-sub{color:var(--txt-mute);font-size:15px;margin:0 0 20px;line-height:1.5;}
.auth-card .field{margin-bottom:10px;}
.auth-err{color:var(--bad);font-size:14.5px;min-height:16px;margin:4px 0 8px;}
.auth-remember{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--txt-mute);margin:2px 0 10px;cursor:pointer;line-height:1.4;}
.auth-switch{margin-top:16px;font-size:14.5px;color:var(--txt-mute);text-align:center;}
.recovery-box{font-family:var(--mono);font-size:18px;letter-spacing:.04em;background:var(--bg);border:1px solid var(--accent);
  border-radius:var(--r-md);padding:14px;word-break:break-all;line-height:1.6;color:var(--accent-soft);margin:10px 0;}

/* ---------- app shell ---------- */
.shell{height:100vh;display:flex;position:relative;}
.sidebar{width:244px;flex-shrink:0;background:var(--bg-1);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:12px 12px;overflow-y:auto;}
.sb-collapse{margin-left:auto;font-size:15.5px;flex-shrink:0;}
.sb-resize{width:5px;flex-shrink:0;cursor:col-resize;margin-left:-3px;z-index:5;}
.sb-resize:hover{background:rgba(109,131,243,.25);}
body.resizing-x{cursor:col-resize;user-select:none;}
.sb-reopen{position:absolute;top:14px;left:10px;z-index:6;font-size:19px;cursor:pointer;display:none;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:3px 8px;}
.shell.sidebar-collapsed .sidebar,.shell.sidebar-collapsed .sb-resize{display:none;}
.shell.sidebar-collapsed .sb-reopen{display:block;}
.shell.sidebar-collapsed .topbar{padding-left:52px;}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;}
.brand .logo{width:25px;height:25px;border-radius:7px;background:none;display:flex;align-items:center;justify-content:center;font-size:23px;line-height:1;color:var(--flag);}
.flag{color:var(--flag);}   /* milestone flag icon — blue, recolourable (⚑, not the 🚩 emoji) */
.brand .name{font-size:20.5px;font-weight:600;letter-spacing:-.01em;}
.sb-section{font-family:var(--mono);font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-faint);
  padding:18px 10px 8px;display:flex;align-items:center;}
.sb-section .add{margin-left:auto;cursor:pointer;font-size:19px;}
.sb-section .add:hover{color:var(--accent-soft);}
.sb-item{display:flex;align-items:center;gap:11px;padding:9px 11px;font-size:17.5px;color:var(--txt-dim);cursor:pointer;border-radius:var(--r-sm);}
.sb-ic{font-size:19px;width:19px;text-align:center;flex-shrink:0;}
.sb-count{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--txt-mute);}
.sb-item:hover{color:var(--txt);background:rgba(138,180,248,.08);}
.sb-item.active{color:var(--accent-soft);font-weight:600;background:var(--nav-active);box-shadow:inset 2px 0 0 var(--accent);}
.sb-page{padding-left:24px;font-size:17px;}
.sb-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:11px 9px;border-top:1px solid var(--line);font-size:15.5px;color:var(--txt-dim);}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--txt-faint);flex-shrink:0;}
.sync-dot.ok{background:var(--done);} .sync-dot.busy{background:var(--accent);} .sync-dot.off{background:var(--warn);} .sync-dot.err{background:var(--bad);}
.sync-dot.pending{box-shadow:0 0 0 2px var(--warn);} /* local changes waiting to sync */

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--panel-head);flex-shrink:0;}
.topbar input.title{background:transparent;border:none;outline:none;font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--txt);flex:1;min-width:0;}
.content{flex:1;min-height:0;overflow-y:auto;padding:28px 30px 52px;}
.empty{color:var(--txt-faint);font-size:15.5px;text-align:center;margin-top:60px;line-height:1.7;}

/* ---------- blocks ---------- */
.block{margin-bottom:22px;}
.block-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.block-head .ttl{font-size:14.5px;font-weight:600;letter-spacing:.02em;color:var(--txt-soft);}
.block-head .del{margin-left:auto;color:var(--txt-faint);cursor:pointer;font-size:14.5px;}
.block-head .del:hover{color:var(--bad);}
.block-handle{cursor:grab;color:var(--txt-faint);font-size:14.5px;opacity:0;margin-right:2px;user-select:none;}
.block:hover .block-handle{opacity:.5;}
.block-handle:active{cursor:grabbing;}
.block.block-dragging{opacity:.4;}
.block.block-drop{box-shadow:inset 0 2px 0 var(--accent);}
.add-block-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}

.rt-toolbar{display:flex;gap:4px;margin-bottom:6px;}
.rt-btn{border:1px solid var(--line-2);background:transparent;color:var(--txt-mute);border-radius:6px;
  width:28px;height:26px;cursor:pointer;font-size:14.5px;}
.rt-btn:hover{color:var(--txt);border-color:#3a3a44;}
.rt-editor{border:1px solid var(--line-2);border-radius:var(--r-md);padding:12px 14px;font-size:16px;line-height:1.6;
  min-height:48px;outline:none;color:var(--txt-soft);}
.rt-editor:focus{border-color:#34343a;}
.rt-editor h2{font-size:19px;margin:.4em 0;} .rt-editor h3{font-size:17px;margin:.4em 0;}
.rt-editor ul,.rt-editor ol{margin:.4em 0;padding-left:22px;list-style-position:outside;}
.rt-editor ul{list-style-type:disc;} .rt-editor ol{list-style-type:decimal;} .rt-editor li{margin:1px 0;}
.rt-editor a{color:var(--accent-soft);}
.rt-editor blockquote{margin:.4em 0;padding-left:12px;border-left:2px solid var(--line-2);color:var(--txt-mute);}
.rt-editor pre{font-family:var(--mono);font-size:15px;line-height:1.5;background:#08080a;border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:12px 14px;margin:.5em 0;white-space:pre-wrap;word-break:break-word;overflow-x:auto;color:var(--txt-soft);}
.rt-editor code{font-family:var(--mono);font-size:15px;background:#08080a;border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;}
.rt-editor pre code{background:none;border:none;padding:0;}
.rt-editor img{max-width:100%;border-radius:6px;margin:.4em 0;display:block;}
.rt-editor table.rt-table{border-collapse:collapse;margin:.6em 0;width:100%;}
.rt-editor table.rt-table td,.rt-editor table.rt-table th{border:1px solid var(--line-2);padding:7px 9px;font-size:15.5px;min-width:48px;vertical-align:top;}
.rt-editor table.rt-table th{background:var(--field-bg);font-weight:600;text-align:left;color:var(--txt-soft);}
.rt-editor details.rt-toggle,.tl-note details.rt-toggle,.cv-note details.rt-toggle{margin:.4em 0;}
.rt-editor details.rt-toggle>summary,.tl-note details.rt-toggle>summary,.cv-note details.rt-toggle>summary{cursor:pointer;font-weight:600;color:var(--txt-soft);outline:none;padding:1px 0;}
.rt-editor details.rt-toggle>.rt-toggle-body,.tl-note details.rt-toggle>.rt-toggle-body,.cv-note details.rt-toggle>.rt-toggle-body{margin:.3em 0 .3em 1.1em;padding-left:.6em;border-left:2px solid var(--line);}

/* sidebar container menu */
.sb-menu{opacity:0;font-size:15.5px;flex-shrink:0;}
.sb-item:hover .sb-menu{opacity:.6;}
.sb-menu:hover{opacity:1 !important;}
.sb-leaf{padding-left:20px;}
.sb-item.sb-drop{box-shadow:inset 0 2px 0 var(--accent);}
.sb-item.sb-nest{background:var(--nav-active);box-shadow:inset 2px 0 0 var(--accent);}
.sb-page-menu{opacity:0;transition:opacity .12s;}
.sb-item:hover .sb-page-menu{opacity:.6;}
.sb-page-menu:hover{opacity:1 !important;}

/* internal page links */
.rt-editor a[data-page]{background:rgba(109,131,243,.16);color:var(--accent-soft);border:1px solid rgba(109,131,243,.4);border-radius:5px;padding:0 5px;text-decoration:none;cursor:pointer;}
.rt-editor a[data-page]:hover{background:rgba(109,131,243,.28);}

/* backlinks */
.backlinks{margin-top:28px;border-top:1px solid var(--line);padding-top:14px;}
.backlinks-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:8px;}
.backlink{font-size:15.5px;color:var(--accent-soft);cursor:pointer;padding:5px 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);margin-bottom:6px;display:inline-block;margin-right:8px;}
.backlink:hover{background:var(--bg-2);}

/* page breadcrumb + sub-pages */
.page-nav{flex-basis:100%;display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.nav-arrow{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:15.5px;color:var(--txt-mute);border:1px solid var(--line);}
.nav-arrow:hover{background:var(--hover);color:var(--txt);}
.nav-arrow.disabled{opacity:.35;pointer-events:none;}
.page-crumb{font-size:13px;color:var(--txt-faint);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crumb-link{color:var(--accent-soft);cursor:pointer;}
.crumb-link:hover{text-decoration:underline;}
.crumb-sep{color:var(--txt-faint);margin:0 1px;}
.crumb-here{color:var(--txt-mute);}
.tdetail-notes{width:100%;resize:vertical;min-height:64px;margin-bottom:8px;}
.subpages{margin-top:24px;border-top:1px solid var(--line);padding-top:12px;}
.subpages-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:6px;}
.subpage-row{font-size:15.5px;cursor:pointer;padding:7px 9px;border-radius:var(--r-sm);}
.subpage-row:hover{background:var(--bg-2);}

/* task smart-filter bar + saved filters */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px;}
.saved-chip{display:inline-flex;align-items:center;gap:5px;font-size:14px;padding:4px 9px;border:1px solid var(--line-2);border-radius:14px;cursor:pointer;color:var(--txt-mute);}
.saved-chip:hover{background:var(--bg-2);color:var(--txt);}
.saved-x{color:var(--txt-faint);font-size:15.5px;line-height:1;}
.saved-x:hover{color:var(--bad);}

/* weekday picker (event recurrence) */
.wd-pick{font-size:13px;padding:3px 7px;border:1px solid var(--line-2);border-radius:6px;cursor:pointer;color:var(--txt-mute);user-select:none;}
.wd-pick:hover{background:var(--bg-2);}
.wd-pick.on{background:var(--accent);border-color:var(--accent);color:#fff;}

/* rich-text slash-command menu */
.slash-menu{position:fixed;z-index:50;min-width:180px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:0 8px 28px rgba(0,0,0,.45);padding:5px;}
.slash-item{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:6px;font-size:15.5px;cursor:pointer;color:var(--txt);}
.slash-item.sel{background:var(--nav-active);}
.slash-hint{font-size:13px;color:var(--txt-faint);width:20px;text-align:center;flex:none;}
.slash-item.sel .slash-hint{color:var(--accent-soft);}

/* habits — rows and layout */
.habit-row{display:flex;align-items:center;gap:10px;padding:7px 0;}
.habit-name{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;}
.habit-name-sub{display:flex;align-items:center;gap:6px;}
.habit-streak{font-size:13px;color:var(--txt-mute);width:52px;text-align:right;font-family:var(--mono);flex-shrink:0;}
.habit-cells{display:flex;gap:4px;}
.habit-cell{width:26px;height:26px;border-radius:6px;border:1px solid var(--line-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,border-color .1s;}
.habit-cell.off{opacity:.28;cursor:default;border-style:dashed;}
.habit-cell.today{box-shadow:0 0 0 1.5px var(--accent);}
.habit-cell.done{border-color:transparent;}
/* each habit wrapped in a card for sub-row support */
.habit-card{border-bottom:1px solid var(--line-1);padding-bottom:2px;margin-bottom:2px;}
.habit-card:last-of-type{border-bottom:none;}
.habit-sub-row{padding:0 0 6px 34px;}
.habit-sub-row:empty{display:none;}
/* compact schedule selector on each habit row */
.trk-sched-sel{font-size:12px;font-family:var(--mono);color:var(--txt-mute);background:var(--bg-1);border:1px solid var(--line-2);border-radius:3px;padding:1px 4px;cursor:pointer;outline:none;}
.trk-sched-sel:hover,.trk-sched-sel:focus{border-color:var(--accent);color:var(--txt);}
/* freq sub-row text */
.trk-freq-row{font-size:13px;font-family:var(--mono);color:var(--txt-mute);display:flex;align-items:center;gap:5px;}
/* day column headers */
.habit-day-hdr{padding-top:2px !important;padding-bottom:6px !important;border-bottom:1px solid var(--line-1);margin-bottom:4px;}
.trk-hdr-spc-l{width:26px;flex-shrink:0;}
.trk-hdr-spc-s{width:52px;flex-shrink:0;}
.trk-hdr-spc-r{width:20px;flex-shrink:0;}
.trk-col-hdr{width:56px;text-align:center;font-size:12px;font-family:var(--mono);font-weight:700;color:var(--txt-mute);letter-spacing:.04em;flex-shrink:0;}
.trk-col-hdr.weekend{opacity:.5;}
.trk-col-hdr.today-col{color:var(--accent);}
/* "Add Habit" divider bar */
.habit-create-bar{display:flex;align-items:center;gap:10px;margin:20px 0 14px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-faint);}
.habit-create-bar::before,.habit-create-bar::after{content:'';flex:1;height:1px;background:var(--line-1);}
/* tracker cells: wider to hold [− val +] stepper */
.trk-num-cell{width:56px !important;height:30px !important;border-radius:7px !important;gap:0;padding:0 3px;user-select:none;}
.trk-btn{flex:0 0 18px;height:100%;display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;color:var(--txt-mute);border-radius:4px;cursor:pointer;transition:color .1s,background .1s;}
.trk-btn:hover{color:var(--txt);background:rgba(255,255,255,.08);}
.trk-num-cell.done .trk-btn{color:rgba(255,255,255,.7);}
.trk-num-cell.done .trk-btn:hover{color:#fff;background:rgba(255,255,255,.15);}
.trk-val{flex:1;text-align:center;font-size:13px;font-family:var(--mono);font-weight:600;color:inherit;cursor:default;}
.trk-num-cell.done .trk-val{color:#fff;}
.trk-inp{width:100%;text-align:center;background:transparent;border:none;outline:none;font-size:13px;font-family:var(--mono);color:var(--txt);padding:0;}
/* journal mood picker */
.mood-pick{line-height:1;transition:opacity .12s,transform .12s;}
.mood-pick.on{transform:scale(1.15);}

/* planning screen */
.plan-sec{font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-mute);margin:24px 0 12px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:baseline;}
.plan-sec:first-child{border-top:none;padding-top:0;margin-top:6px;}
.plan-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:11px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.plan-card.active{box-shadow:inset 2px 0 0 var(--accent);}
.plan-card.highlight{border-color:#33384f;background:rgba(109,131,243,.06);}
.plan-row{display:flex;gap:10px;align-items:flex-start;}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.plan-grid label,.plan-row label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--txt-mute);}
.plan-warn{border:1px solid #5a3a2c;background:rgba(224,160,32,.08);border-radius:var(--r-md);padding:12px 14px;margin-bottom:6px;font-size:15px;color:var(--warn-soft);}
.plan-warn-row{padding:2px 0;}
.plan-ok{border:1px solid #2c4a36;background:rgba(79,191,123,.07);border-radius:var(--r-md);padding:10px 14px;margin-bottom:6px;font-size:14.5px;color:var(--good);}
.cap-bar{height:7px;border-radius:4px;background:var(--bg-2);overflow:hidden;margin-top:8px;}
.cap-fill{height:100%;background:var(--accent);}
.cap-fill.over{background:var(--bad);}
/* planning: goal→project tree + blueprint drawer */
.tree-head{cursor:pointer;user-select:none;}
.tree-caret{width:14px;color:var(--txt-faint);font-size:12px;}
.plan-inline-title{flex:1;font-weight:600;border:none;background:transparent;color:var(--txt);font:inherit;padding:2px 0;}
.plan-inline-title:focus{outline:none;border-bottom:1px solid var(--line);}
.plan-proj{margin-left:6px;}
.plan-status{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:9px;background:var(--bg-2);color:var(--txt-mute);}
.plan-status.s-active{background:rgba(95,207,134,.16);color:#5fcf86;}
.plan-status.s-someday{background:rgba(108,182,232,.14);color:#6cb6e8;}
.plan-status.s-done{background:var(--bg-2);color:var(--txt-faint);}
.plan-drawer{margin-top:8px;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:8px;}
.plan-dep{cursor:pointer;font-size:14.5px;color:var(--txt-mute);white-space:nowrap;}
.plan-dep:hover{color:var(--txt);}
.kr-box{margin:2px 0;}
.plan-help{font-size:16px;line-height:1.55;color:var(--txt-mute);background:var(--bg-1);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:11px 14px;margin-bottom:14px;}
/* page-type identity */
.type-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:8px;color:#fff;margin-right:8px;white-space:nowrap;}
.content.view-typed{border-top:2px solid var(--view-c);}
.plan-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.plan-chip{font-size:13px;padding:3px 9px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);cursor:pointer;white-space:nowrap;}
.plan-chip:hover{background:var(--accent);color:#fff;border-color:transparent;}
/* daily review: 1–5 rating dots */
.rating-dot{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font:600 14.5px var(--mono);background:var(--bg-2);border:1px solid var(--line-2);color:var(--txt-faint);cursor:pointer;user-select:none;transition:background .12s,color .12s;}
.rating-dot:hover{border-color:var(--accent);color:var(--txt);}
.rating-dot.on{background:var(--accent);color:#0b1320;border-color:transparent;}
/* weekly review: rolled-up daily entries */
.dr-row{display:flex;gap:10px;align-items:flex-start;padding:7px 2px;border-top:1px solid var(--line-3);cursor:pointer;}
.dr-row:first-of-type{border-top:none;}
.dr-row:hover .dr-txt{color:var(--txt);}
.dr-day{flex:none;width:62px;font-size:13px;color:var(--accent-soft);padding-top:1px;}
.dr-txt{flex:1;font-size:15px;line-height:1.5;color:var(--txt-mute);}
/* Learn → Notes: two-pane knowledge base (explorer tree + inline doc editor) */
.ln-notes{display:flex;align-items:stretch;gap:0;min-height:calc(100vh - 168px);}
.ln-tree{width:288px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);padding-right:12px;max-height:calc(100vh - 168px);position:sticky;top:0;overflow:hidden;}
.ln-tree-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;}
.ln-tree-title{font-size:15.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-mute);}
.ln-new{margin-left:auto;cursor:pointer;font-size:20.5px;line-height:1;color:var(--txt-mute);padding:0 4px;border-radius:6px;}
.ln-new:hover{color:var(--accent);background:var(--bg-2);}
.ln-search{margin-bottom:8px;flex:none;}
.ln-tree-rows{flex:1;overflow-y:auto;margin-right:-6px;padding-right:6px;}
.ln-row{display:flex;align-items:center;gap:5px;padding:6px 6px;border-radius:8px;cursor:pointer;font-size:16px;color:var(--txt-soft);}
.ln-row:hover{background:var(--bg-2);}
.ln-row.active{background:var(--nav-active);color:var(--txt);}
.ln-twisty{width:13px;flex:none;font-size:11px;color:var(--txt-faint);text-align:center;cursor:pointer;}
.ln-row-ic{flex:none;font-size:15.5px;}
.ln-row-tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ln-row-act{flex:none;opacity:0;color:var(--txt-faint);cursor:pointer;font-size:15.5px;padding:0 3px;border-radius:5px;}
.ln-row:hover .ln-row-act{opacity:1;}
.ln-row-act:hover{color:var(--accent);background:var(--bg-1);}
.ln-doc{flex:1;min-width:0;padding:0 4px 40px 22px;}
.ln-doc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:var(--txt-soft);}
.ln-doc-crumb{font-size:13px;color:var(--txt-faint);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ln-doc-title{width:100%;background:none;border:none;outline:none;color:var(--txt);font-family:var(--sans);font-size:29.5px;font-weight:700;padding:0 0 6px;margin-bottom:6px;}
.ln-doc-title::placeholder{color:var(--txt-ghost);}
.ln-doc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.ln-doc-blocks{display:flex;flex-direction:column;gap:14px;}
.ln-subs{margin-top:26px;border-top:1px solid var(--line);padding-top:12px;}
.ln-subs-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:8px;}
.ln-sub-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line-2);border-radius:9px;margin-bottom:6px;cursor:pointer;font-size:15.5px;color:var(--txt-soft);}
.ln-sub-row:hover{border-color:var(--line-strong);background:var(--bg-1);color:var(--txt);}
.ln-sub-row.add{color:var(--txt-faint);border-style:dashed;}
.ln-row.folder .ln-row-tx{font-weight:600;color:var(--txt);}
.ln-row.ln-drop{background:rgba(138,180,248,.18);outline:1px solid var(--accent);outline-offset:-1px;}
.ln-folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:6px;}
.ln-folder-card{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-md);cursor:pointer;background:var(--bg-1);transition:border-color .12s,background .12s;}
.ln-folder-card:hover{border-color:var(--line-strong);background:var(--bg-2);}
.ln-fc-ic{font-size:22px;flex:none;}
.ln-fc-tx{min-width:0;}
.ln-fc-title{font-size:15px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ln-fc-sub{font-size:11px;color:var(--txt-faint);margin-top:2px;}
@media (max-width:900px){.ln-notes{flex-direction:column;}.ln-tree{width:auto;max-height:none;position:static;border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:12px;margin-bottom:12px;}.ln-tree-rows{max-height:240px;}.ln-doc{padding-left:0;}}
/* roadmap: milestone markers on a week timeline */
.rm-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-1);}
.rm-grid{display:grid;align-items:stretch;min-width:max-content;}
.rm-corner{position:sticky;left:0;z-index:2;background:var(--bg-1);border-bottom:1px solid var(--line);}
.rm-wk{font:13px var(--mono);color:var(--txt-faint);padding:6px 4px;text-align:center;border-bottom:1px solid var(--line);border-left:1px solid var(--line);white-space:nowrap;}
.rm-wk.now{color:var(--accent);font-weight:600;}
.rm-lane{position:sticky;left:0;z-index:1;background:var(--bg-1);display:flex;align-items:center;padding:6px 8px;font-size:14.5px;font-weight:600;border-bottom:1px solid var(--line);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rm-lane:hover{color:var(--accent);}
.rm-cell{min-height:34px;padding:3px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:3px;}
.rm-cell.now{background:rgba(109,131,243,.05);}
.rm-cell.rm-unsched{background:var(--bg-2);}
.rm-pill{display:flex;align-items:center;gap:4px;font-size:13px;padding:2px 6px;border-radius:10px;cursor:pointer;max-width:160px;border:1px solid var(--line);}
.rm-pill-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rm-pill.rm-done{background:var(--bg-2);color:var(--txt-faint);}
.rm-pill.rm-ready{background:rgba(95,207,134,.16);color:#5fcf86;border-color:transparent;}
.rm-pill.rm-blocked{background:rgba(224,163,90,.16);color:#e0a35a;border-color:transparent;}
.tb-row{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:7px;font-size:17px;}
.tb-row.deep{border-left:3px solid var(--c-deep);}
.tb-row.learning{border-left:3px solid var(--c-learning);}
.tb-row.shallow{border-left:3px solid var(--c-shallow);}
.tb-row.buffer{border-left:3px solid var(--c-buffer);}
.tb-time{font-size:14.5px;color:var(--txt-mute);white-space:nowrap;font-family:var(--mono);}
.tb-timein{width:auto;padding:2px 4px;font-size:13px;margin:0;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--txt-mute);}
.tb-timein:hover,.tb-timein:focus{border-color:var(--line-2);background:var(--field-bg);}
.tb-kind{font-size:12px;text-transform:uppercase;letter-spacing:.07em;width:62px;font-family:var(--mono);font-weight:700;text-align:center;padding:3px 0;border-radius:6px;border:1px solid var(--line);}
.tb-kind.deep{color:var(--c-deep);border-color:var(--c-deep);}
.tb-kind.learning{color:var(--c-learning);border-color:var(--c-learning);}
.tb-kind.shallow{color:var(--c-shallow);border-color:var(--c-shallow);}
.tb-kind.buffer{color:var(--c-buffer);border-color:var(--c-buffer);}
.tb-trace{flex:1;overflow:hidden;text-overflow:ellipsis;}

/* focus overlay (Make Time "Laser") */
.focus-overlay{position:fixed;inset:0;z-index:100;background:#08080b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;}
.focus-tag{font-size:13px;letter-spacing:.3em;color:var(--accent-soft);font-family:var(--mono);}
.focus-title{font-size:31px;font-weight:700;letter-spacing:-.02em;}
.focus-sub{font-size:17px;color:var(--txt-mute);max-width:560px;line-height:1.5;}
.focus-clock{font-family:var(--mono);font-size:64px;font-weight:500;color:var(--txt);letter-spacing:.04em;}
.focus-clock.done{color:var(--good);}
.focus-note{font-size:13px;color:var(--txt-faint);max-width:480px;margin-top:8px;font-family:var(--mono);}

/* mind map (outline tree) */
.mm-tree{display:flex;flex-direction:column;gap:2px;}
.mm-row{display:flex;align-items:center;gap:8px;padding:3px 0;position:relative;}
.mm-bullet{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;opacity:.85;}
.mm-text{flex:1;outline:none;font-size:16px;line-height:1.5;border-radius:5px;padding:2px 6px;min-width:40px;}
.mm-text:focus{background:var(--bg-2);}
.mm-btn{cursor:pointer;color:var(--txt-faint);font-size:15.5px;opacity:0;flex-shrink:0;}
.mm-row:hover .mm-btn{opacity:.7;}
.mm-btn:hover{opacity:1 !important;color:var(--txt);}

/* calendar: external + repeat indicators */
.cal-ev.ext .lbl{font-style:italic;opacity:.85;}
.cal-ev .ev-rep{font-size:12px;color:var(--txt-faint);flex-shrink:0;}
.cal-ev a.lbl{text-decoration:none;}
.cal-ev a.lbl:hover{text-decoration:underline;}

/* custom labels */
.label-ctl{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;}
.label-chip{font-size:12.5px;border-radius:5px;padding:1px 7px;white-space:nowrap;line-height:1.5;font-family:var(--mono);}
.label-add{cursor:pointer;font-size:13px;opacity:.55;flex-shrink:0;}
.label-add:hover{opacity:1;}
.kb-labels{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.label-row{display:flex;align-items:center;gap:9px;padding:7px 4px;border-radius:6px;cursor:pointer;}
.label-row:hover{background:var(--bg-2);}
.label-row.on{background:var(--bg-2);}
.label-check{width:14px;flex-shrink:0;color:var(--good);font-size:13px;}
.swatch{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.swatch.sel{border-color:var(--txt);}
.lbl-mark{width:6px;height:6px;border-radius:2px;flex-shrink:0;margin-left:2px;}

/* reusable colour picker (swatch button + pop-up) */
.color-btn{display:inline-block;width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid var(--line-2);flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;}
.color-pop{position:fixed;z-index:1000;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:0 8px 28px rgba(0,0,0,.45);padding:10px;}
.color-pop-grid{display:grid;grid-template-columns:repeat(4,18px);gap:8px;margin-bottom:8px;}
.color-pop-row{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--txt-mute);border-top:1px solid var(--line);padding-top:8px;}
.color-pop-input{width:28px;height:20px;padding:0;border:1px solid var(--line-2);border-radius:4px;background:none;cursor:pointer;}

/* home dashboard */
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}
.home-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px;box-shadow:0 1px 2px rgba(0,0,0,.3);}
/* metrics dashboard */
.mtr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.mtr-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.mtr-label{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-mute);}
.mtr-value{font-size:33px;font-weight:700;letter-spacing:-.02em;color:var(--txt);margin-top:4px;line-height:1.1;}
.mtr-sub{font-size:14.5px;color:var(--txt-faint);margin-top:2px;}
.home-card-h{display:flex;align-items:center;font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--txt-soft);text-transform:uppercase;margin-bottom:11px;}
.home-card-h span:first-child{flex:1;}
.home-empty{color:var(--txt-faint);font-size:16px;padding:4px 0;}

/* command palette */
.pal-back{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;}
.pal{width:560px;max-width:92vw;background:var(--bg-1);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.pal-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);outline:none;color:var(--txt);font-size:18px;padding:16px 18px;}
.pal-list{max-height:50vh;overflow-y:auto;padding:7px;}
.pal-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:var(--r-md);cursor:pointer;}
.pal-row.sel{background:var(--nav-active);}
.pal-kind{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-faint);width:64px;flex-shrink:0;font-family:var(--mono);}
.pal-label{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* learning: flashcards + grades */
.cal-tab.badge{color:var(--accent-soft);}
.flashcard{background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px 22px;min-height:140px;display:flex;flex-direction:column;justify-content:center;text-align:center;}
.flash-front{font-size:21.5px;font-weight:500;line-height:1.5;}
.flash-divider{height:1px;background:var(--line-2);margin:18px 0;}
.flash-back{font-size:19px;color:var(--accent-soft);line-height:1.5;white-space:pre-wrap;}
.grade-row{display:flex;gap:8px;margin-top:12px;}
.grade-row .grade{flex:1;text-align:center;}
.grade.again{border-color:#5a2c2c;color:var(--bad);}
.grade.hard{border-color:#5a4a2c;color:var(--warn-soft);}
.grade.good{border-color:#2c4a36;color:var(--good);}
.grade.easy{border-color:#33384f;color:var(--accent-soft);}

/* urgency toggle (Eisenhower) */
.urg{cursor:pointer;font-size:14.5px;opacity:.3;flex-shrink:0;user-select:none;filter:grayscale(1);}
.urg:hover{opacity:.7;}
.urg.on{opacity:1;filter:none;}
.urg.ro{cursor:default;}              /* read-only: urgency is automatic (≤48h) */
.urg.ro:hover{opacity:1;}
.rep{cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--txt-faint);opacity:.55;flex-shrink:0;user-select:none;}
.rep:hover{opacity:1;}
.rep.on{opacity:1;color:var(--accent-soft);}

/* Eisenhower matrix */
.matrix-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.matrix-cell{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 15px;min-height:120px;}
.matrix-cell.q1{border-top:2px solid var(--bad);}
.matrix-cell.q2{border-top:2px solid var(--good);}
.matrix-cell.q3{border-top:2px solid var(--warn);}
.matrix-cell.q4{border-top:2px solid var(--line-2);}
.matrix-h{display:flex;align-items:center;font-size:15px;font-weight:600;color:var(--txt-soft);}
.matrix-advice{font-size:11.5px;letter-spacing:.08em;color:var(--txt-faint);margin:2px 0 8px;font-family:var(--mono);}
.matrix-item{display:flex;gap:8px;align-items:center;font-size:15px;padding:3px 0;}

/* focus modes / pomodoro */
.focus-phase{font-size:14.5px;letter-spacing:.14em;color:var(--accent-soft);}
.focus-clock.break{color:var(--good);}
.focus-modes{display:flex;gap:8px;}
.focus-mode{font-family:var(--mono);font-size:14px;color:var(--txt-mute);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:5px 11px;cursor:pointer;}
.focus-mode:hover{color:var(--txt);}
.focus-mode.on{color:var(--accent-soft);border-color:var(--accent);}

/* priority controls */
.prio-pill{font-family:var(--mono);font-size:12px;border:1px solid var(--line-2);border-radius:5px;
  padding:2px 7px;cursor:pointer;user-select:none;line-height:1.4;white-space:nowrap;flex-shrink:0;}
.prio-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-2);cursor:pointer;
  flex-shrink:0;display:inline-block;}

/* file attachments */
.file-row{display:flex;align-items:center;gap:10px;padding:6px 0;}
.file-ic{font-size:15.5px;opacity:.7;flex-shrink:0;}
.file-row .link{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.check-row{display:flex;flex-direction:column;gap:4px;padding:5px 0;border-radius:6px;}
.check-row.dragging{opacity:.4;}
.check-row.drop-target{box-shadow:inset 0 2px 0 var(--accent);}
.check-line{display:flex;align-items:center;gap:10px;}
.drag-handle{cursor:grab;color:var(--txt-faint);font-size:14.5px;opacity:0;flex-shrink:0;user-select:none;}
.check-row:hover .drag-handle{opacity:.6;}
.drag-handle:active{cursor:grabbing;}
.check-labels{padding-left:25px;}
.check-labels .label-ctl:empty{display:none;}
.check-box{width:18px;height:18px;border-radius:5px;border:1.5px solid #3a3a44;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;}
.check-box.done{background:var(--done);border-color:var(--done);}
.check-text{flex:1;background:transparent;border:none;outline:none;font-size:16px;color:var(--txt);}
.check-text.done{text-decoration:line-through;color:var(--txt-mute);}
.check-due{font-family:var(--mono);font-size:12.5px;color:var(--txt-mute);border:1px solid var(--line-2);
  border-radius:5px;padding:3px 6px;cursor:pointer;background:transparent;}
.check-due.set{color:var(--accent-soft);border-color:#33384f;}
.check-del{color:var(--txt-faint);cursor:pointer;font-size:15.5px;}
.check-del:hover{color:var(--bad);}

.kb{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;}
.kb-col{flex:1;min-width:200px;display:flex;flex-direction:column;}
.kb-col-head{display:flex;align-items:center;gap:8px;padding:0 2px 10px;}
.kb-col-head input{background:transparent;border:none;outline:none;font-size:14.5px;font-weight:600;color:var(--txt-soft);}
.kb-count.over{color:var(--bad);}
.kb-col-del{cursor:pointer;color:var(--txt-faint);font-size:13px;opacity:0;flex-shrink:0;}
.kb-col-head:hover .kb-col-del{opacity:.6;}
.kb-col-del:hover{opacity:1 !important;color:var(--bad);}
.kb-col-handle{cursor:grab;color:var(--txt-faint);font-size:13px;opacity:0;flex-shrink:0;user-select:none;}
.kb-col-head:hover .kb-col-handle{opacity:.5;}
.kb-col-collapse{cursor:pointer;color:var(--txt-faint);font-size:12px;flex-shrink:0;}
.kb-col.collapsed .kb-col-body{display:none;}
.kb-col.collapsed{min-width:150px;}
.kb-col.col-dragging{opacity:.4;}
.kb-col.col-drop{box-shadow:inset 2px 0 0 var(--accent);}
.kb-col-body{display:flex;flex-direction:column;gap:8px;min-height:24px;border-radius:8px;padding:2px;}
.kb-col-body.over{background:var(--bg-2);}
.kb-card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:10px 11px;cursor:grab;}
.kb-card:hover{border-color:#36363f;}
.kb-card.dragging{opacity:.4;}
.kb-card .ct{font-size:15.5px;line-height:1.4;outline:none;}
.kb-card .meta{display:flex;align-items:center;gap:8px;margin-top:7px;}
.kb-add{color:var(--txt-faint);cursor:pointer;font-family:var(--mono);font-size:13px;padding:4px 2px;}
.kb-add:hover{color:var(--txt);}

/* ---------- calendar (pinned bottom, draggable resize) ---------- */
.cal-resize{position:relative;border-left:1px solid var(--line);transition:background .12s;}
.cal-resize::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:34px;border-radius:3px;background:#2c2c32;transition:background .12s;}
.cal-resize:hover::after,.cal-resize.dragging::after{background:var(--accent);}
.cal-resize.dragging{background:rgba(109,131,243,.06);}
body.resizing{cursor:row-resize;user-select:none;}
.cal{flex-shrink:0;display:flex;flex-direction:column;background:var(--panel-head);}
/* calendar pinned as a RIGHT rail (desktop) */
.cal-rail{flex-shrink:0;width:320px;height:100vh;border-left:1px solid var(--line);background:var(--panel-head);display:flex;flex-direction:column;overflow:hidden;}
.cal-rail .cal{height:100% !important;flex:1;min-height:0;}
.cal-rail .cal-resize{display:none;}
.cal-rail .cal-head{flex-wrap:wrap;padding:12px 14px;gap:8px 10px;}
.cal-rail .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
.cal-rail .cal-day{padding:7px 5px;}
@media(max-width:1180px){.cal-rail{width:264px;}}
.cal-head{display:flex;align-items:center;gap:14px;padding:11px 24px;}
.cal-head .t{font-size:16px;font-weight:600;color:var(--txt-soft);}
.cal-tabs{display:flex;gap:3px;border:1px solid var(--line-2);background:var(--field-bg);border-radius:8px;padding:3px;}
.cal-tab{font-size:15px;padding:6px 12px;border-radius:6px;cursor:pointer;color:var(--txt-mute);font-family:var(--mono);}
.cal-tab:hover{color:var(--txt);}
.cal-tab.active{background:var(--line-strong);color:var(--txt);}
.cal-grid{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;}
/* month view */
.cal-month{flex:1;min-height:0;flex-direction:column;overflow-y:auto;}
.cm-hdr{display:grid;grid-template-columns:repeat(7,1fr);padding:0 0 4px;}
.cm-hdr span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-faint);text-align:center;font-family:var(--mono);}
.cm-grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(56px,1fr);}
.cm-cell{border:1px solid var(--line-3);border-right:none;border-bottom:none;padding:4px 5px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0;}
.cm-grid .cm-cell:nth-child(7n){border-right:1px solid var(--line-3);}
.cm-grid .cm-cell:nth-last-child(-n+7){border-bottom:1px solid var(--line-3);}
.cm-cell:hover{background:var(--bg-1);}
.cm-cell.over{background:var(--bg-2);}
.cm-cell.out{opacity:.4;}
.cm-cell.today{background:var(--nav-active);box-shadow:inset 0 0 0 1.5px var(--accent);}
.cm-cell.today .cm-num{color:#fff;font-weight:600;}
.cm-num{font-size:12.5px;color:var(--txt-soft);font-family:var(--mono);}
.cm-evs{display:flex;flex-direction:column;gap:1px;overflow:hidden;}
.cm-ev{font-size:11.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt-dim);background:var(--bg-2);border-radius:3px;padding:0 3px;}
.cm-ev.done{opacity:.5;text-decoration:line-through;}
.cm-more{font-size:11px;color:var(--txt-faint);}

/* timeline */
.cal-timeline{flex:1;min-height:0;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;align-items:stretch;}
.tl-col{flex:0 0 auto;min-width:150px;border-right:1px solid var(--line-3);padding:9px 12px;display:flex;flex-direction:column;gap:7px;}
.tl-col.past{opacity:.6;}
.tl-col.today{background:var(--bg-1);box-shadow:inset 0 2px 0 var(--accent);}
.tl-col.over{background:var(--nav-active);box-shadow:inset 0 0 0 2px var(--accent);}
.tl-date{display:flex;align-items:baseline;gap:7px;}
.tl-date .wd{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-faint);font-family:var(--mono);}
.tl-date .num{font-size:14px;font-weight:500;color:var(--txt-soft);font-family:var(--mono);}
.tl-items{display:flex;flex-direction:column;gap:5px;overflow-y:auto;min-height:0;}
.cal-day{flex:1 0 132px;border-right:1px solid var(--line-3);padding:9px 11px;display:flex;flex-direction:column;gap:6px;overflow:hidden;cursor:pointer;min-height:0;}
/* alternate column tint so adjacent days read as separate blocks at a glance */
.cal-day:nth-child(even){background:rgba(127,131,150,.045);}
.cal-day:nth-child(7n+6),.cal-day:nth-child(7n){background:rgba(127,131,150,.085);}  /* weekend a touch deeper */
.cal-day:hover{background:var(--bg-1);}
.cal-day.over{background:var(--bg-2);}
.cal-day .dh{display:flex;align-items:baseline;gap:7px;}
.cal-day .wd{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-faint);}
.cal-day .num{margin-left:auto;font-family:var(--mono);font-size:15px;font-weight:500;color:var(--txt-soft);border-bottom:1.5px solid transparent;padding-bottom:1px;}
.cal-day.today .num{color:var(--accent-soft);border-bottom-color:var(--accent);}
.cal-day .evs{display:flex;flex-direction:column;gap:5px;overflow-y:auto;flex:1;min-height:0;}

/* Milestones timeline (vertical) */
.cal-milestones{flex:1;min-height:0;overflow-y:auto;padding:8px 18px 16px;}
.ms-node{display:flex;gap:12px;align-items:stretch;cursor:pointer;border-radius:7px;}
.ms-node:hover{background:var(--bg-1);}
.ms-date{flex:0 0 56px;text-align:right;padding-top:3px;display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px;color:var(--txt-mute);line-height:1.25;}
.ms-date.overdue{color:var(--bad);}
.ms-date .ms-yr{color:var(--txt-faint);font-size:11px;}
.ms-railcol{flex:0 0 14px;position:relative;display:flex;justify-content:center;}
.ms-railcol::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--line);}
.ms-node:first-child .ms-railcol::before{top:9px;}
.ms-node:last-child .ms-railcol::before{bottom:auto;height:9px;}
.ms-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--accent);background:var(--bg);margin-top:4px;z-index:1;}
.ms-dot.done{background:var(--good);border-color:var(--good);}
.ms-dot.overdue{border-color:var(--bad);}
.ms-body{flex:1;min-width:0;padding:2px 0 12px;}
.ms-title{font-size:15.5px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-node.done .ms-title{color:var(--txt-mute);}
.ms-meta{font-size:12.5px;color:var(--txt-faint);margin-top:1px;}

/* calendar week/day — new time grid (6am–midnight) */
.cal-grid{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.cal-tg-head-row{display:flex;flex-shrink:0;border-bottom:1px solid var(--line-3);background:var(--panel-head);}
.cal-tg-hd{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;border-left:1px solid var(--line-3);cursor:pointer;}
.cal-tg-hd .wd{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-faint);}
.cal-tg-hd .num{font-size:15.5px;font-weight:500;color:var(--txt-soft);font-family:var(--mono);}
.cal-tg-hd.today .num{color:var(--accent-soft);}
.cal-tg-ad-row{display:flex;flex-shrink:0;border-bottom:1px solid var(--line-3);min-height:20px;max-height:52px;}
.cal-tg-ad-col{flex:1;border-left:1px solid var(--line-3);padding:2px 4px;display:flex;flex-direction:column;gap:1px;overflow:hidden;cursor:pointer;}
.cal-tg-ad-col:hover{background:var(--bg-1);}
.cal-tg-ad-col.today{background:rgba(109,131,243,.03);}
.cal-tg-ad-col.over{background:var(--bg-2);}
.cal-tg-scroll{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;}
.cal-tg-inner{display:flex;flex-shrink:0;}
.cal-tg-gutter{flex-shrink:0;position:relative;}
.cal-tg-guthr{display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 5px 0 0;height:56px;
  font-family:var(--mono);font-size:11px;color:var(--txt-faint);border-top:1px solid var(--line-3);}
.cal-tg-guthr:first-child{border-top:none;}
.cal-tg-cols{flex:1;position:relative;display:flex;}
.cal-tg-hline{position:absolute;left:0;right:0;border-top:1px solid var(--line-3);pointer-events:none;}
.cal-tg-hline.half{border-top-style:dashed;opacity:.2;}
.cal-tg-col{flex:1;position:relative;border-left:1px solid var(--line-3);}
.cal-tg-col.alt{background:rgba(255,255,255,.018);}
.cal-tg-col.today{background:rgba(109,131,243,.05);}
.cal-tg-col.over{background:rgba(109,131,243,.06);}
.cal-tg-col.drag-over{background:rgba(109,131,243,.12);}
.cal-tg-now{position:absolute;left:0;right:0;border-top:2px solid var(--bad);z-index:4;pointer-events:none;}
.cal-tg-now::before{content:'';position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--bad);}
.cal-tblock{position:absolute;left:2px;right:2px;border-radius:5px;padding:3px 6px;overflow:hidden;cursor:pointer;min-height:20px;z-index:2;}
.cal-tblock:hover{filter:brightness(1.12);}
.cal-tblock.is-event{background:var(--accent);}
.cal-tblock.is-routine{font-style:italic;}
.cal-tblock.is-task{background:var(--bg-2);border:1px solid var(--line-2);}
.cal-tblock.is-block{box-shadow:inset 3px 0 0 rgba(0,0,0,.25);}
.cal-tblock.done{opacity:.5;}
.cal-tblock.done .cal-tblock-title{text-decoration:line-through;}
/* any block given an explicit colour gets readable light text */
.cal-tblock.has-bg .cal-tblock-title{color:#fff;}
.cal-tblock.has-bg .cal-tblock-time{color:rgba(255,255,255,.78);}
.cal-tblock-title{font-size:12.5px;line-height:1.3;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-tblock.is-task .cal-tblock-title{color:var(--txt-soft);}
.cal-tblock-time{font-size:11px;color:rgba(255,255,255,.7);font-family:var(--mono);margin-top:1px;}
.cal-tblock.is-task .cal-tblock-time{color:var(--txt-faint);}
.cal-tblock-crumb{font-size:11px;line-height:1.25;margin-top:2px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);}
.cal-tblock.is-task .cal-tblock-crumb{color:var(--txt-faint);}
/* ---- planner: hide the right rail + big day grid + shutdown ritual ---- */
body.no-rail .cal-rail,body.no-rail .cal-resize{display:none !important;}
/* two-column planner: controls on the left (wider), the big calendar to the side */
.pl-split{display:flex;gap:0;align-items:flex-start;}
.pl-split-main{flex:1.7 1 0;min-width:360px;}
.pl-split-cal{flex:1 1 0;min-width:300px;position:sticky;top:0;}
/* draggable resize strip between plan-main and plan-cal — full height, same look as cal-resize */
.pl-split-resize{width:5px;flex-shrink:0;cursor:col-resize;position:sticky;top:0;align-self:stretch;z-index:5;border-left:1px solid var(--line);transition:background .12s;}
.pl-split-resize::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:34px;border-radius:3px;background:#2c2c32;transition:background .12s;}
.pl-split-resize:hover,.pl-split-resize.dragging{background:rgba(109,131,243,.06);}
.pl-split-resize:hover::after,.pl-split-resize.dragging::after{background:var(--accent);}
@media (max-width:1100px){.pl-split{flex-direction:column;}.pl-split-main{width:auto;}.pl-split-cal{width:100%;position:static;}.pl-split-resize{display:none;}}
.pl-daygrid-wrap{height:calc(100vh - 168px);max-height:780px;min-height:420px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-1);margin:0;box-shadow:0 1px 2px rgba(0,0,0,.3);display:flex;flex-direction:column;}
.pl-daygrid{flex:1;min-height:0;}
.pl-daygrid .cal-tg-gutter{width:52px;}
.pl-weekgrid-wrap{height:calc(100vh - 168px);max-height:780px;min-height:420px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-1);margin:0;box-shadow:0 1px 2px rgba(0,0,0,.3);display:flex;flex-direction:column;}
.pl-weekgrid-wrap .cal-tg-gutter{width:52px;}
.pl-wg-head{display:flex;flex-shrink:0;border-bottom:1px solid var(--line);background:var(--panel-head);}
.pl-wg-gut{width:52px;flex-shrink:0;}
.pl-wg-day{flex:1;text-align:center;padding:7px 2px;border-left:1px solid var(--line-3);cursor:pointer;}
.pl-wg-day:hover{background:rgba(138,180,248,.06);}
.pl-wg-day.today{background:rgba(138,180,248,.10);}
.pl-wg-day .wd{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-faint);font-family:var(--mono);}
.pl-wg-day .nm{font-size:17px;font-weight:600;color:var(--txt-soft);}
.pl-wg-day.today .nm{color:var(--accent-soft);}
/* planning calendars: week grid scrolls horizontally; scrollbar hidden — ◀/▶ nav buttons used instead.
   cal-tg-inner is a flex-column child so it stretches to container width by default —
   min-width:max-content lets it grow beyond the container and trigger the hidden overflow. */
.pl-weekgrid-wrap .cal-tg-scroll{overflow-x:auto;scrollbar-width:none;}
.pl-weekgrid-wrap .cal-tg-scroll::-webkit-scrollbar{display:none;}
.pl-weekgrid-wrap .cal-tg-col{min-width:132px;}
.pl-weekgrid-wrap .cal-tg-inner{min-width:max-content;}
.pl-weekgrid-wrap .pl-wg-day{min-width:132px;}
.pl-weekgrid-wrap .pl-wg-head{overflow:hidden;}
/* ◀/▶ nav buttons used in week-grid header and day side-calendar */
.pl-wg-gut{width:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.pl-nav-btn{display:flex;align-items:center;justify-content:center;width:28px;height:100%;flex-shrink:0;cursor:pointer;color:var(--txt-mute);font-size:15px;user-select:none;}
.pl-nav-btn:hover{color:var(--txt-soft);background:rgba(138,180,248,.1);}
/* day side-calendar nav header */
.pl-cal-navhead{display:flex;align-items:center;gap:0;background:var(--panel-head);border-bottom:1px solid var(--line);height:38px;}
.pl-cal-navlabel{flex:1;text-align:center;font-size:14px;font-weight:500;color:var(--txt-soft);}
.pl-cal-navhead .pl-nav-btn{width:38px;font-size:17px;}
.shutdown-locked{border-color:var(--accent);background:rgba(138,180,248,.07);}
.shutdown-cele{position:fixed;inset:0;background:rgba(8,10,14,.78);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:120;animation:scrimIn .2s ease;cursor:pointer;}
.shutdown-cele-card{text-align:center;animation:msIn .35s cubic-bezier(.2,.8,.2,1);}
.shutdown-cele-check{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:42px;color:#fff;background:var(--accent-grad);box-shadow:0 8px 28px rgba(59,120,231,.5);}
.shutdown-cele-title{font-size:26.5px;font-weight:700;letter-spacing:-.01em;color:var(--txt);}
.shutdown-cele-sub{font-size:16px;color:var(--txt-mute);margin-top:8px;}

/* drag-to-resize handles (top/bottom of timed event blocks) */
.cal-tblock-rh{position:absolute;left:0;right:0;height:8px;z-index:4;touch-action:none;}
.cal-tblock-rh.rh-top{top:0;cursor:n-resize;border-radius:5px 5px 0 0;}
.cal-tblock-rh.rh-bot{bottom:0;cursor:s-resize;border-radius:0 0 5px 5px;}
.cal-tblock-rh:hover{background:rgba(255,255,255,.3);}
.cal-tblock-rh:active{background:rgba(255,255,255,.45);}
/* all-day strip in day view */
.cal-day-adstrip{flex-shrink:0;display:flex;flex-direction:column;gap:3px;padding:4px 8px;border-bottom:1px solid var(--line-3);background:var(--field-bg);}
/* canvas marquee selection */
.cv-select-rect{position:absolute;border:1.5px solid var(--accent);background:rgba(109,131,243,.1);border-radius:3px;z-index:100;display:none;pointer-events:none;}
.canvas-card.selected{border-color:var(--accent) !important;box-shadow:0 0 0 2px rgba(109,131,243,.3),0 6px 18px rgba(0,0,0,.32);}
.canvas-frame.selected{outline:2px solid var(--accent);outline-offset:2px;}

/* calendar Day view */
.cal-dayview{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.cal-day-bar{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line-3);color:var(--txt-soft);}
.cal-day-sched{display:flex;flex-direction:column;gap:5px;}
.cal-day-add{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;}
.cal-day-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-faint);margin:16px 0 6px;}
.cal-day-agenda{display:flex;flex-direction:column;gap:5px;}
.cal-ev{display:flex;align-items:center;gap:7px;}
.cal-ev.draggable{cursor:grab;}
.cal-ev.draggable:active{cursor:grabbing;}
.cal-ev .dot{width:4px;height:4px;border-radius:50%;flex-shrink:0;background:var(--txt-mute);}
.cal-ev.event .dot{background:var(--accent);}
.cal-ev.is-task .dot{width:6px;height:6px;border-radius:1px;}   /* tasks: square marker */
.cal-ev.is-event .dot{width:5px;height:5px;border-radius:50%;} /* events: round marker */
.cal-ev.is-routine .dot{width:5px;height:5px;border-radius:1px;opacity:.85;}  /* routine: small square block */
.cal-ev.is-routine .lbl{font-style:italic;color:var(--txt-mute);}
.cal-ev.is-task:hover,.cal-ev.is-event:hover,.cal-ev.is-routine:hover{background:var(--bg-2);border-radius:4px;}
.cal-ev .lbl{font-size:14.5px;line-height:1.3;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-ev.done .lbl{text-decoration:line-through;opacity:.5;}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:2000;}
.modal{width:340px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:16px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.modal h3{margin:0 0 12px;font-size:18px;letter-spacing:-.01em;}
.modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}

/* ========================================================================
   MOBILE SHELL — "Milestone Phone" design (top tabs + drawer + sheets).
   Activated by app.js on native/narrow viewports; desktop uses .shell above.
   ===================================================================== */
@keyframes msIn{from{transform:translateY(6px);opacity:.4;}to{transform:none;opacity:1;}}
@keyframes drawerIn{from{transform:translateX(-26px);}to{transform:translateX(0);}}
@keyframes sheetIn{from{transform:translateY(40px);}to{transform:translateY(0);}}
@keyframes scrimIn{from{opacity:0;}to{opacity:1;}}

.m-shell{height:100vh;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;}
.m-appbar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:max(8px,env(safe-area-inset-top)) 18px 10px;}
.m-burger{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt-soft);border:1px solid var(--line);background:var(--bg-1);font-size:20.5px;flex-shrink:0;}
.m-burger:active{transform:scale(.96);}
.m-brand{display:flex;align-items:center;gap:9px;}
.m-logo{width:25px;height:25px;border-radius:7px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:700;color:#fff;flex-shrink:0;}
.m-wordmark{font-size:20.5px;font-weight:600;letter-spacing:-.01em;}
.m-tabs{flex-shrink:0;display:flex;gap:3px;padding:0 18px 11px;}
.m-tab{flex:1;text-align:center;padding:8px 0;border-radius:8px;font-size:14.5px;font-weight:600;cursor:pointer;background:var(--bg-1);color:var(--txt-mute);box-shadow:inset 0 0 0 1px var(--line);transition:background .12s,color .12s;}
.m-tab.active{background:var(--nav-active);color:var(--accent-soft);box-shadow:inset 0 0 0 1px #2f3350;}
.m-tab:active{transform:scale(.985);}
.m-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 18px calc(32px + env(safe-area-inset-bottom));}
.m-body::-webkit-scrollbar{width:0;height:0;}
.m-screen{animation:msIn .22s ease;}

.m-eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-mute);}
.m-greet{font-size:25.5px;font-weight:700;letter-spacing:-.02em;margin-top:4px;}
.m-sec{display:flex;align-items:center;gap:8px;margin:0 2px 10px;}
.m-sec .t{font-size:17px;font-weight:600;}
.m-sec .c{font-family:var(--mono);font-size:12.5px;color:var(--txt-mute);}

/* capture */
.m-capture{background:#101015;border:1px solid var(--line-strong);border-radius:14px;padding:13px 13px 11px;margin-bottom:18px;}
.m-cap-head{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
.m-cap-tag{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);}
.m-cap-hint{font-family:var(--mono);font-size:11px;color:var(--txt-faint);}
.m-cap-field{width:100%;resize:none;background:var(--field-bg);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:10px 11px;font-family:inherit;font-size:16px;line-height:1.45;color:var(--txt);outline:none;}
.m-cap-foot{display:flex;align-items:center;gap:9px;margin-top:8px;}
.m-commit{margin-left:auto;border:none;background:var(--accent-grad);color:#fff;font-family:inherit;font-size:14.5px;font-weight:600;padding:8px 16px;border-radius:8px;cursor:pointer;}
.m-commit:active{filter:brightness(.94);}
.m-cap-ok{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:14px;color:var(--good);}

/* task rows */
.m-row{display:flex;align-items:center;gap:11px;background:var(--bg-1);border:1px solid var(--line);border-radius:11px;padding:12px;}
.m-row:active{background:#16161c;}
.m-rows{display:flex;flex-direction:column;gap:8px;}
.m-check{flex-shrink:0;width:20px;height:20px;border-radius:6px;border:1.5px solid #3a3a44;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:#fff;}
.m-check.done{background:var(--done);border-color:var(--done);}
.m-row .ti{font-size:17px;line-height:1.3;}
.m-row .ti.done{text-decoration:line-through;color:var(--txt-mute);}
.m-meta{display:flex;align-items:center;gap:7px;margin-top:4px;}
.m-chip{font-family:var(--mono);font-size:11.5px;padding:1px 6px;border-radius:5px;}
.m-due{font-family:var(--mono);font-size:12px;}
.m-caret{flex-shrink:0;color:var(--txt-faint);font-size:18px;cursor:pointer;padding:4px;}

/* project header + board */
.m-phead{display:flex;align-items:center;gap:9px;cursor:pointer;margin:2px 2px 12px;}
.m-phead .ic{font-size:24px;}
.m-phead .nm{font-size:23px;font-weight:700;letter-spacing:-.02em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.m-switch{flex-shrink:0;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--txt-faint);border:1px solid var(--line);border-radius:6px;padding:3px 8px;}
.m-board-wrap{background:var(--panel-head);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:20px;}
.m-board-head{display:flex;align-items:center;gap:8px;margin-bottom:11px;}
.m-board-head .t{font-size:15px;font-weight:600;}
.m-levels{margin-left:auto;display:flex;gap:3px;background:var(--field-bg);border:1px solid var(--line-2);border-radius:8px;padding:2px;}
.m-level{font-family:var(--mono);font-size:12px;padding:4px 9px;border-radius:6px;cursor:pointer;color:var(--txt-mute);}
.m-level.on{background:var(--line-strong);color:var(--txt);}
.m-board{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;}
.m-board::-webkit-scrollbar{height:0;}
.m-col{flex:none;width:158px;display:flex;flex-direction:column;}
.m-col-h{display:flex;align-items:center;gap:6px;padding:0 2px 8px;}
.m-col-h .dot{width:7px;height:7px;border-radius:3px;}
.m-col-h .lb{font-size:13px;font-weight:600;color:var(--txt-soft);}
.m-col-h .ct{font-family:var(--mono);font-size:11.5px;color:var(--txt-faint);}
.m-card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:9px 10px;cursor:pointer;margin-bottom:7px;}
.m-card:active{background:#16161c;}
.m-card .ct{font-size:14.5px;line-height:1.35;}

/* drawer */
.m-scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);animation:scrimIn .2s ease;}
.m-drawer{position:fixed;top:0;left:0;bottom:0;z-index:81;width:288px;max-width:86vw;background:var(--bg-1);border-right:1px solid var(--line-2);display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 0 14px;animation:drawerIn .24s cubic-bezier(.2,.7,.3,1);overflow-y:auto;}
.m-drawer .m-brand{padding:4px 18px 14px;}
.m-drawer-sec{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-faint);padding:16px 20px 7px;}
.m-drawer-item{display:flex;align-items:center;gap:12px;padding:10px 18px;font-size:17px;color:var(--txt-dim);cursor:pointer;}
.m-drawer-item .ic{width:20px;text-align:center;font-size:18px;flex-shrink:0;}
.m-drawer-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.m-drawer-item .ct{font-family:var(--mono);font-size:12px;color:var(--txt-mute);}
.m-drawer-item:active{background:#16161c;}
.m-drawer-item.active{background:var(--nav-active);color:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent);}

/* bottom sheets */
.m-sheet-scrim{position:fixed;inset:0;z-index:84;background:rgba(0,0,0,.55);display:flex;flex-direction:column;justify-content:flex-end;animation:scrimIn .2s ease;}
.m-sheet{background:var(--bg-1);border-top:1px solid var(--line-2);border-radius:22px 22px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto;animation:sheetIn .26s cubic-bezier(.2,.7,.3,1);}
.m-grab{width:38px;height:4px;border-radius:3px;background:var(--line-strong);margin:2px auto 14px;}
.m-sheet h3{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.01em;}
.m-sheet .quote{background:var(--field-bg);border:1px solid var(--line-2);border-radius:10px;padding:11px 12px;font-size:16px;line-height:1.45;color:var(--txt-soft);margin:8px 0 14px;}
.m-dest{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line-3);cursor:pointer;}
.m-dest:active{background:#16161c;}
.m-dest .ic{width:22px;text-align:center;font-size:19px;flex-shrink:0;}
.m-dest .nm{flex:1;font-size:17px;}
.m-dest .sub{font-family:var(--mono);font-size:11.5px;color:var(--txt-mute);}
.m-prop{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:15.5px;}
.m-prop .k{font-family:var(--mono);font-size:12.5px;color:var(--txt-mute);width:74px;flex-shrink:0;}

/* ---------- tile-container section (Visual Spaces "Tiles") ---------- */
.tsec{background:#0e0e11;border:1px solid #1b1b21;border-radius:15px;padding:16px;}
.tsec-head{display:flex;align-items:center;gap:9px;margin:0 2px 12px;}
.tsec-dot{width:10px;height:10px;border-radius:3px;cursor:pointer;flex-shrink:0;}
.tsec-title{font-size:17px;font-weight:600;letter-spacing:-.01em;outline:none;color:var(--txt);min-width:40px;}
.tsec-title:empty:before{content:'Section title';color:var(--txt-ghost);}
.tsec-meta{font-family:var(--mono);font-size:11.5px;color:var(--txt-faint);}
.tsec-addcol{margin-left:auto;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--txt-mute);border:1px solid var(--line-strong);border-radius:6px;padding:3px 8px;}
.tsec-addcol:hover{color:var(--accent-soft);border-color:var(--accent);}
.tsec-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;}
.tl-col{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:10px;}
.tl-col-drop{outline:1px dashed var(--accent);outline-offset:3px;border-radius:var(--r-md);}
.tsec-addcol{flex:0 0 auto;padding-top:2px;}
.tsec-col-bar{display:flex;justify-content:flex-end;margin-bottom:-6px;}
.tsec-col-del{cursor:pointer;color:var(--txt-faint);font-size:13px;line-height:1;padding:0 2px;}
.tsec-col-del:hover{color:var(--bad);}
.tl-tile{background:#121215;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;}
.tl-tile.tl-dragging{opacity:.5;}
.tl-tile.tl-drop{border-color:var(--accent);box-shadow:0 -2px 0 var(--accent) inset;}
.tl-head{display:flex;align-items:center;gap:7px;padding:9px 11px 7px;cursor:grab;}
.tl-grip{color:var(--txt-faint);font-size:13px;cursor:grab;flex-shrink:0;}
.tl-kind{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-mute);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tl-icon{font-size:15.5px;}
.tl-link-task{cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--txt-mute);border:1px solid var(--line-strong);border-radius:5px;padding:2px 6px;white-space:nowrap;}
.tl-link-task:hover{color:var(--accent-soft);border-color:var(--accent);}
.tl-link-task.on{color:var(--accent-soft);border-color:var(--accent);}
.fmt-bar{display:flex;gap:4px;margin-bottom:5px;}
/* Quick-capture rich-text surface — behaves like a single tile note */
.cap-editor{min-height:52px;max-height:220px;overflow-y:auto;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--field-bg);font-size:15.5px;line-height:1.55;}
.cap-editor:focus{outline:none;border-color:var(--accent);}
.cap-editor:empty:before{content:attr(data-ph);color:var(--txt-faint);pointer-events:none;}
.cap-note{font-size:15px;line-height:1.55;color:var(--txt-soft);}
.cap-note>:first-child{margin-top:0;} .cap-note>:last-child{margin-bottom:0;}
.fmt-btn{cursor:pointer;font-family:var(--mono);font-size:13px;line-height:1.4;color:var(--txt-mute);border:1px solid var(--line-strong);border-radius:5px;padding:2px 7px;user-select:none;}
.fmt-btn:hover{color:var(--txt);border-color:var(--accent);}
.tl-note-wrap{display:flex;flex-direction:column;}
.tl-note ol,.tl-note ul,.cv-note ol,.cv-note ul{margin:4px 0;padding-left:22px;list-style-position:outside;}
.tl-note ul,.cv-note ul{list-style-type:disc;} .tl-note ol,.cv-note ol{list-style-type:decimal;}
.tl-del{cursor:pointer;color:var(--txt-faint);font-size:13px;}
.tl-del:hover{color:var(--bad);}
.tl-body{padding:0 12px 12px;}
.tl-body [contenteditable]{outline:none;}
.tl-h-title{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--txt);}
.tl-h-title:empty:before{content:'Heading';color:var(--txt-ghost);}
.tl-h-sub{font-size:14.5px;color:var(--txt-mute);margin-top:5px;line-height:1.4;}
.tl-h-sub:empty:before{content:'Subtitle (optional)';color:var(--txt-ghost);}
.tl-note{font-size:15px;line-height:1.55;color:var(--txt-soft);}
.tl-note:empty:before{content:'Write\2026';color:var(--txt-ghost);}
.tl-quote{font-size:16px;font-style:italic;line-height:1.5;color:var(--txt-soft);border-left:2.5px solid var(--accent);padding-left:11px;}
.tl-quote:empty:before{content:'Quote\2026';color:var(--txt-ghost);}
.tl-check{display:flex;flex-direction:column;gap:8px;}
.tl-check-row{display:flex;align-items:flex-start;gap:9px;}
.tl-check-row input{margin-top:1px;flex-shrink:0;}
.tl-check-tx{flex:1;font-size:15px;color:var(--txt-soft);outline:none;}
.tl-check-row.done .tl-check-tx{text-decoration:line-through;color:var(--txt-mute);}
.tl-links{display:flex;flex-direction:column;gap:7px;}
.tl-link-row{display:flex;align-items:center;gap:6px;}
.tl-link-ic{color:var(--txt-faint);font-size:13px;}
.tl-link-tx{flex:1;min-width:0;background:var(--field-bg);border:1px solid var(--line-strong);border-radius:5px;padding:4px 7px;font-size:14.5px;color:var(--accent-soft);outline:none;}
.tl-link-url{flex:1;min-width:0;background:var(--field-bg);border:1px solid var(--line-strong);border-radius:5px;padding:4px 7px;font-size:13px;color:var(--txt-mute);outline:none;}
.tl-link-go{color:var(--accent-soft);text-decoration:none;font-size:15.5px;}
.tl-link-del{cursor:pointer;color:var(--txt-faint);font-size:13px;}
.tl-link-del:hover{color:var(--bad);}
.tl-image .tl-img{width:100%;border-radius:9px;display:block;}
.tl-img-ph{height:92px;border-radius:9px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--txt-faint);background-image:repeating-linear-gradient(135deg,#17171c 0 9px,#121216 9px 18px);}
.tl-table{border-collapse:collapse;width:100%;font-size:14.5px;}
.tl-table td{border:1px solid var(--line-strong);padding:5px 8px;color:var(--txt-soft);outline:none;min-width:40px;}
.tl-table-ctrls{display:flex;gap:8px;margin-top:6px;}
.tl-add-row{display:inline-block;cursor:pointer;color:var(--txt-mute);font-family:var(--mono);font-size:12.5px;margin-top:2px;}
.tl-add-row:hover{color:var(--accent-soft);}
.tl-col-add{margin-top:2px;}
.tl-add-tile{cursor:pointer;text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--txt-faint);border:1px dashed var(--line-strong);border-radius:11px;padding:9px;}
.tl-add-tile:hover{color:var(--accent-soft);border-color:var(--accent);}
.tl-add-menu{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.tl-add-opt{cursor:pointer;color:var(--txt-dim);font-family:var(--mono);font-size:12.5px;border:1px solid var(--line-strong);border-radius:5px;padding:3px 8px;}
.tl-add-opt:hover{color:var(--txt);border-color:var(--accent);}

/* ---------- board-space section (Visual Spaces "Board") ---------- */
.canvas-block{display:flex;flex-direction:column;height:540px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#0f0f12;}
.canvas-toolbar{flex-shrink:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel-head);}
.cv-tool{cursor:pointer;font-family:var(--mono);font-size:12.5px;color:var(--txt-dim);border:1px solid var(--line-strong);border-radius:6px;padding:5px 9px;white-space:nowrap;}
.cv-tool:hover{color:var(--txt);border-color:var(--accent);}
.cv-tool-sep{width:1px;height:18px;background:var(--line-strong);margin:0 2px;}
.cv-zoom{font-family:var(--mono);font-size:12.5px;color:var(--txt-mute);min-width:38px;text-align:center;}
.canvas-viewport{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:none;background:radial-gradient(640px 380px at 50% 42%,#15151b,#0f0f12);cursor:default;}
.canvas-viewport.panning{cursor:grabbing;}   /* pan with middle mouse button */
.canvas-world{position:absolute;inset:0;transform-origin:0 0;}
.canvas-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--accent);}
.canvas-edges path{vector-effect:non-scaling-stroke;}
.cedge{stroke:#5a5f7a;stroke-width:2;stroke-opacity:.7;}
.cedge-temp{stroke:var(--accent-2);stroke-width:2;stroke-dasharray:5 5;}
.cedge-hit{stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer;}
.canvas-frame{position:absolute;border-radius:16px;background:rgba(109,131,243,.07);border:1.5px dashed rgba(109,131,243,.3);z-index:0;}
.cv-frame-head{display:flex;align-items:center;gap:7px;margin:9px 0 0 10px;padding:5px 10px;border-radius:8px;background:var(--bg-1);border:1px solid var(--line-2);width:max-content;}
.cv-frame-handle{cursor:grab;color:var(--txt-faint);font-size:13px;}
.cv-frame-label{font-size:14px;font-weight:600;color:var(--txt-soft);outline:none;min-width:30px;}
.cv-frame-del{cursor:pointer;color:var(--txt-faint);font-size:12px;}
.cv-frame-del:hover{color:var(--bad);}
.cv-frame-resize{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:3px;background:var(--line-strong);cursor:nwse-resize;}
.canvas-card{position:absolute;border-radius:13px;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:0 6px 18px rgba(0,0,0,.32);overflow:hidden;z-index:2;}
.cv-card-head{display:flex;align-items:center;gap:6px;padding:7px 9px 5px;}
.cv-card-handle{cursor:grab;color:var(--txt-faint);font-size:13px;}
.cv-card-color{width:13px;height:13px;border-radius:4px;border:1px solid var(--line-strong);background:linear-gradient(140deg,#5e97f6,#3b78e7);cursor:pointer;}
.cv-card-link{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--accent);background:var(--bg);cursor:crosshair;}
.cv-card-del{cursor:pointer;color:var(--txt-faint);font-size:13px;}
.cv-card-del:hover{color:var(--bad);}
.cv-card-body{padding:0 11px 11px;}
.cv-card-body [contenteditable]{outline:none;}
.cv-note{font-size:15px;line-height:1.5;color:var(--txt-soft);min-height:18px;}
.cv-note:empty:before{content:'Note\2026';color:var(--txt-ghost);}
.cv-todo-row{display:flex;align-items:flex-start;gap:8px;margin:3px 0;}
.cv-todo-tx{flex:1;font-size:14.5px;color:var(--txt-soft);outline:none;}
.cv-todo-row.done .cv-todo-tx{text-decoration:line-through;color:var(--txt-mute);}
.cv-todo-add{display:inline-block;cursor:pointer;color:var(--txt-mute);font-family:var(--mono);font-size:12px;margin-top:3px;}
.cv-todo-add:hover{color:var(--accent-soft);}
.cv-img{width:100%;border-radius:9px;display:block;}
.cv-img-ph{height:100%;min-height:80px;border-radius:9px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--txt-faint);background-image:repeating-linear-gradient(135deg,#17171c 0 9px,#121216 9px 18px);}
.cv-link{color:var(--accent-soft);text-decoration:none;font-size:15px;word-break:break-all;}
.cv-link-edit{cursor:pointer;color:var(--txt-faint);font-size:13px;margin-left:6px;}
.cv-card-resize{position:absolute;right:2px;bottom:2px;width:13px;height:13px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--line-strong) 50%);border-radius:0 0 4px 0;}

/* ---------- main Project board (pinned, milestone/task/step) ---------- */
.pboard-wrap{margin-bottom:18px;}
.pboard-title{font-size:28.5px;font-weight:700;letter-spacing:-.02em;margin:2px 0 4px;}
.pboard-stats{font-size:13px;color:var(--txt-mute);margin-bottom:14px;}
.pboard{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px 20px;}
.pboard-head{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.pboard-pin{font-size:17px;font-weight:600;}
.pboard-pinned{font-size:12px;color:var(--txt-faint);}
.pboard-levlbl{font-size:12px;color:var(--txt-faint);}
.pboard-levels{display:flex;gap:2px;background:var(--field-bg);border:1px solid var(--line-2);border-radius:8px;padding:2px;}
.pboard-level{font-family:var(--mono);font-size:13px;padding:5px 12px;border-radius:6px;cursor:pointer;color:var(--txt-mute);white-space:nowrap;}
.pboard-level.on{background:var(--nav-active);color:var(--accent-soft);}
.pboard-cols{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;}
.pb-col{flex:1;min-width:212px;display:flex;flex-direction:column;}
.pb-col-head{display:flex;align-items:center;gap:8px;padding:0 2px 11px;}
.pb-dot{width:8px;height:8px;border-radius:3px;flex-shrink:0;}
.pb-col-label{font-size:15px;font-weight:600;}
.pb-col-count{font-size:12.5px;color:var(--txt-mute);}
.pb-col-body{display:flex;flex-direction:column;gap:9px;}
.pb-card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:11px;}
.pb-card-top{display:flex;align-items:flex-start;gap:9px;}
.pb-check{flex-shrink:0;width:16px;height:16px;border-radius:5px;border:1.5px solid var(--txt-ghost);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:#fff;margin-top:1px;}
.pb-check.on{background:var(--done);border-color:var(--done);}
.pb-flag{font-size:15.5px;}
.pb-card-title{font-size:15.5px;line-height:1.4;color:var(--txt);}
.pb-card.done .pb-card-title{color:var(--txt-mute);text-decoration:line-through;}
.pb-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:8px 0 0 25px;}
.pb-tag{font-size:11.5px;color:var(--txt-mute);}
.pb-steps{font-size:11.5px;color:var(--txt-mute);}
.pb-bar{height:4px;border-radius:3px;background:var(--line-2);overflow:hidden;margin:9px 0 0 25px;}
.pb-bar-fill{height:100%;background:var(--accent);border-radius:3px;}
.pb-card-foot{display:flex;align-items:center;gap:6px;margin:9px 0 0 25px;}
.pb-due{font-size:12px;color:var(--txt-mute);}
.pb-due.red{color:var(--bad);}
.pb-open{font-size:12px;color:var(--accent-soft);cursor:pointer;}
.pb-open:hover{text-decoration:underline;}
.pb-add{font-size:12.5px;color:var(--txt-faint);cursor:pointer;padding:6px 2px;}
.pb-add:hover{color:var(--accent-soft);}

/* ---------- task detail (atop a task page) ---------- */
.tdetail{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:18px;}
.tdetail-row{display:flex;align-items:center;gap:12px;margin-bottom:9px;}
.tdetail-k{font-size:12.5px;color:var(--txt-mute);width:54px;flex-shrink:0;}
.tdetail-chips{display:flex;gap:6px;flex-wrap:wrap;}
.tdetail-chip{font-family:var(--mono);font-size:13px;padding:4px 11px;border-radius:6px;cursor:pointer;border:1px solid var(--line-strong);color:var(--txt-mute);}
.tdetail-chip.on{background:var(--nav-active);border-color:var(--accent);color:var(--accent-soft);}
.tdetail-due{background:var(--field-bg);border:1px solid var(--line-strong);border-radius:6px;padding:5px 8px;color:var(--txt);font-size:14.5px;}
.tdetail-steps-h{font-size:15.5px;font-weight:600;margin:14px 0 8px;}
.tdetail-steps{display:flex;flex-direction:column;gap:7px;}
.tdetail-step{display:flex;align-items:center;gap:10px;}
.tdetail-step-tx{flex:1;font-size:16px;color:var(--txt);outline:none;}
.tdetail-step.done .tdetail-step-tx{text-decoration:line-through;color:var(--txt-mute);}
.tdetail-step-del{cursor:pointer;color:var(--txt-faint);font-size:14.5px;}
.tdetail-step-del:hover{color:var(--bad);}
.tdetail-add{margin-top:9px;width:100%;background:var(--field-bg);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:9px 11px;color:var(--txt);font-size:15.5px;outline:none;}