/* Deskline — capture first, organize later. */

:root{
  --paper:#edeeea;
  --surface:#ffffff;
  --sunk:#f6f7f4;
  --ink:#1b201d;
  --muted:#6a726d;
  --line:#dcdfd7;
  --line-soft:#e9ebe5;
  --accent:#1f5f4b;
  --accent-ink:#164537;
  --accent-soft:#e2eee8;
  --low:#7b837d;
  --medium:#35618d;
  --high:#a4610d;
  --urgent:#a62b22;
  --radius:10px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --shadow:0 1px 2px rgba(27,32,29,.06),0 8px 24px rgba(27,32,29,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ic{width:18px;height:18px;flex:none}

/* ---------------------------------------------------------------- shell */
.shell{display:flex;min-height:100vh}
.rail{width:236px;flex:none;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 12px;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:40}
.main{margin-left:236px;flex:1;min-width:0;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.1px;padding:0 6px}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.brand-mark .ic{width:18px;height:18px}
.rail-top{margin-bottom:6px}
.orgpick{margin-top:12px;padding:0 4px}
.orgpick select{width:100%;padding:10px 12px;background:var(--sunk);border:1px solid var(--line);border-radius:10px;font-size:14.5px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:10px;color:#4d544f;
  font-size:14.5px;background:none;border:0;width:100%;text-align:left;cursor:pointer}
.nav-a:hover{background:var(--sunk);color:var(--ink)}
.nav-a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.nav-group{font-size:10.5px;color:var(--muted);padding:16px 10px 5px;letter-spacing:.9px;text-transform:uppercase;font-weight:600}
.nav-count{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--muted);background:var(--sunk);border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.nav-a.on .nav-count{background:#fff;color:var(--accent-ink)}
.rail-foot{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:2px}
.whoami{display:flex;align-items:center;gap:10px;padding:12px 10px 2px;border-top:1px solid var(--line-soft);margin-top:10px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
.whoami-t{display:flex;flex-direction:column;min-width:0}
.whoami-t strong{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-tag{font-size:10.5px;color:#a3a9a4;padding:6px 10px 0;letter-spacing:.3px}
.whoami-t em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.topbar{display:flex;align-items:center;gap:12px;padding:16px 26px;border-bottom:1px solid var(--line);
  background:rgba(237,238,234,.92);backdrop-filter:blur(6px);position:sticky;top:0;z-index:20}
.topbar-title{flex:1;min-width:0}
.page-title{font-family:var(--serif);font-size:20px;font-weight:600;margin:0}
.page-sub{margin:2px 0 0;color:var(--muted);font-size:13px}
.topbar-hero .page-title{font-size:24px;letter-spacing:-.2px}
.tb-icon{position:relative;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  display:grid;place-items:center;color:var(--ink);flex:none}
.tb-icon:hover{border-color:#c2c8bf;background:var(--sunk)}
.tb-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--urgent);color:#fff;font-size:10.5px;font-style:normal;font-weight:600;display:grid;place-items:center}
.content{padding:22px 26px 60px;max-width:1180px;width:100%}
/* On a large display 1180px leaves a third of the screen empty and holds card
   grids to three columns. Widen the shell a step so the grid can take a fourth
   column; list rows stay readable because their own content is left-aligned. */
@media (min-width:1500px){ .content{max-width:1340px} }
@media (min-width:1800px){ .content{max-width:1480px} }
.only-mobile{display:none}

/* -------------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 14px;border:1px solid var(--line);
  background:var(--surface);border-radius:8px;cursor:pointer;font-size:14px}
.btn:hover{border-color:#c6cbc2}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-ghost{background:none;border-color:transparent;color:var(--muted);padding:6px 8px}
.btn-ghost:hover{background:var(--sunk);color:var(--ink)}
.btn-danger{color:var(--urgent)}
.btn-sm{padding:5px 10px;font-size:13px}
.iconbtn{background:none;border:0;padding:6px;border-radius:8px;cursor:pointer;color:var(--muted);display:inline-grid;place-items:center}
.iconbtn:hover{background:var(--sunk);color:var(--ink)}
.lbl{display:block;font-size:13px;color:var(--muted);margin:14px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
textarea{resize:vertical}
select[multiple]{height:auto;padding:6px 8px}
select[multiple] option{padding:3px 4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.fld{min-width:0}

/* ----------------------------------------------------------------- cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.card-pad{padding:18px}
.sec{margin-bottom:26px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.sec-head h2{font-family:var(--serif);font-size:17px;font-weight:600;margin:0}
.sec-head .more{margin-left:auto;font-size:13px;color:var(--muted)}
.sec-head .more:hover{color:var(--accent-ink)}

.greet{font-family:var(--serif);font-size:27px;margin:0 0 2px}
.greet-sub{color:var(--muted);margin:0 0 22px;font-size:14px}

.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:26px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;display:block}
.stat b{display:block;font-size:26px;font-family:var(--serif);font-weight:600;line-height:1.1}
.stat span{font-size:12.5px;color:var(--muted)}
.stat.alert b{color:var(--urgent)}
.stat:hover{border-color:#c6cbc2}

/* ------------------------------------------------------------- item rows */
.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.rows>.row:first-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.rows>.row:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}
.row{display:flex;align-items:flex-start;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--sunk)}
.row-main{flex:1;min-width:0}
.row-title{font-weight:550;word-break:break-word}
.row-title.done{text-decoration:line-through;color:var(--muted)}
.row-sub{font-size:13px;color:var(--muted);margin-top:3px;word-break:break-word}
.row-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:7px}
.row-acts{display:flex;gap:2px;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end}

.pill{font-size:11.5px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.tag{background:var(--sunk)}
/* organization badge: present but never louder than the content */
.pill.org{background:var(--accent-soft);border-color:#cfe2d8;color:var(--accent-ink);font-weight:500;
  max-width:16ch;overflow:hidden;text-overflow:ellipsis}
.org-filter{font-weight:500}
.pill.p-low{color:var(--low);border-color:#d5d9d3}
.pill.p-medium{color:var(--medium);border-color:#c8d6e5}
.pill.p-high{color:var(--high);border-color:#e6d2ae}
.pill.p-urgent{color:var(--urgent);border-color:#e7c3bf;background:#fbf0ef}
.pill.due-over{color:var(--urgent);border-color:#e7c3bf}
.pill.st{background:var(--accent-soft);border-color:#cfe2d8;color:var(--accent-ink)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;align-items:start}
.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px 10px;display:flex;flex-direction:column;gap:8px;transition:border-color .12s,box-shadow .12s}
.note:hover{border-color:#c9cec5;box-shadow:0 2px 10px rgba(27,32,29,.05)}
.note h3{margin:0;font-size:15px;font-weight:600;line-height:1.35}
.note p{margin:0;font-size:13.5px;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.note .row-meta{margin-top:0}

.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;align-items:start}
.col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px;min-height:120px}
.col h2{font-family:var(--serif);font-size:16px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.col h2 small{font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:400}
.col-items{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pcard{border:1px solid var(--line-soft);border-radius:8px;padding:10px 11px;background:var(--sunk)}
.pcard .row-title{font-size:14px}

.daygroup{margin-bottom:22px}
.daygroup h2{font-family:var(--serif);font-size:16px;margin:0 0 8px;color:var(--muted)}

/* --------------------------------------------------------------- tables */
.tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:500;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--sunk)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:14px}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num{text-align:center}
.tbl .chkcell{text-align:center}

/* -------------------------------------------------------------- filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center}
.filters .grow{flex:1 1 150px;min-width:0}
.filters select,.filters input[type=text]{width:auto;min-width:130px;padding:7px 10px;font-size:13.5px}
.searchbox{position:relative;flex:1;min-width:190px;max-width:320px}
.filters .searchbox input[type=text]{padding-left:32px;width:100%}
.searchbox .ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted)}

/* ---------------------------------------------------------------- sheets */
.scrim{position:fixed;inset:0;background:rgba(27,32,29,.38);opacity:0;pointer-events:none;transition:opacity .16s;z-index:45}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:start center;padding:8vh 16px 16px;overflow-y:auto}
.sheet[hidden]{display:none}
.sheet-card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:480px;animation:pop .14s ease-out}
.sheet-card.wide{max-width:620px}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet-card{animation:none}}
.sheet-head{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.sheet-head h2{font-family:var(--serif);font-size:18px;margin:0;flex:1}
.sheet-body{padding:6px 18px 18px}
.sheet-body .lbl:first-child{margin-top:10px}
.sheet-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.capture-wrap{position:relative}
.capture-wrap textarea{padding-right:44px;font-size:15.5px}
.micbtn{position:absolute;right:8px;top:8px;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px}
.micbtn.live{color:var(--urgent);background:#fbf0ef}
.typerow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:14px}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.hint{font-size:12.5px;color:var(--muted);margin:12px 0 0}

/* ------------------------------------------- actions: Edit + ⋯ menu */
.row-acts{align-items:center}
.act{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid var(--line);
  background:var(--surface);border-radius:8px;cursor:pointer;color:var(--ink);font-size:13px;white-space:nowrap}
.act .ic{width:15px;height:15px;color:var(--muted)}
.act:hover{border-color:#c2c8bf;background:var(--sunk)}
.act:hover .ic{color:var(--ink)}
.act-icon{width:32px;padding:0;justify-content:center}
.act-icon .ic{width:17px;height:17px}
.menu{position:relative;display:inline-block}
.menu-toggle[aria-expanded="true"]{background:var(--sunk);border-color:#c2c8bf}
.menu-panel{position:absolute;right:0;top:calc(100% + 5px);min-width:190px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(27,32,29,.14);padding:5px;z-index:30}
.menu-panel[hidden]{display:none}
/* While open the panel lives on <body>, positioned from the button's rect, so
   nothing that scrolls or clips can crop it. 55 sits above the sidebar (50)
   and the scrim (45) but below an open sheet (60), which should win. */
.menu-panel.is-portal{position:fixed;right:auto;top:0;left:0;z-index:55;
  max-height:min(70vh,420px);overflow-y:auto;overscroll-behavior:contain}
.menu-panel .menu-item:focus-visible{background:var(--sunk);outline:2px solid var(--accent);outline-offset:-2px}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;
  border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--ink);text-align:left}
.menu-item .ic{width:16px;height:16px;color:var(--muted)}
.menu-item:hover{background:var(--sunk)}
.menu-item.danger{color:var(--urgent)}
.menu-item.danger .ic{color:var(--urgent)}
.menu-item.danger:hover{background:#fbf0ef}
.menu-sep{height:1px;background:var(--line-soft);margin:4px 2px}

/* ---- long content safety -------------------------------------------
   One rule rather than a patch per screen: anything that can hold a pasted
   URL, a long title or someone's full name breaks rather than overflowing.
   overflow-wrap only breaks when a word genuinely cannot fit, so ordinary
   prose still wraps on spaces. */
.note h3,.note-body,.rich,.row-title,.row-sub,.tcard-title,.tcard-body,
.dh-t,.wk-title,.card-pad,.sheet-card label,.hint{
  overflow-wrap:anywhere;word-break:normal}
/* Table cells are deliberately NOT in that list: letting a cell break anywhere
   lets its column collapse to a few characters while a neighbour hogs the
   width. Cells size to their content and the wrapper scrolls instead, which
   keeps every column readable. */
.tbl td,.tbl th{overflow-wrap:normal}
.tbl td{max-width:320px}
.rich a{overflow-wrap:anywhere}
/* flex and grid children refuse to shrink below their content without this */
.row-main,.note,.tcard,.card,.main,.content,.row,.wk-t,.dh-main{min-width:0}

/* idea card anatomy
   The body previews a few lines and ends in a visible ellipsis, never a fade
   into nothing. Nothing is thrown away: where the text is longer than the
   preview, app.js adds a Show more button that removes the clamp entirely. */
/* list rows get the same treatment, so a long note reads the same everywhere */
.note-body{font-size:13.5px;color:var(--muted)}
.tcard-body{font-size:12.5px}
.clamp-more{align-self:flex-start;border:0;background:none;padding:2px 0;margin:-2px 0 0;
  font-size:12.5px;font-weight:500;color:var(--accent-ink);cursor:pointer}
.clamp-more:hover{text-decoration:underline}
.note-add{align-self:flex-start;border:1px dashed var(--line);background:none;border-radius:7px;padding:6px 10px;
  color:var(--muted);font-size:12.5px;cursor:pointer}
.note-add:hover{border-color:var(--accent);color:var(--accent-ink)}
.note-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-top:1px solid var(--line-soft);padding-top:9px;margin-top:2px}
.note-date{font-size:12px;color:var(--muted);white-space:nowrap}
.note-foot .row-acts{gap:6px}

/* ------------------------------------------------------- assistant */
.chat{display:flex;flex-direction:column;gap:10px;max-width:820px}
.chat-log{display:flex;flex-direction:column;gap:12px;min-height:260px;max-height:calc(100vh - 300px);overflow-y:auto;padding:4px 2px}
.chat-msg{display:flex;max-width:100%}
.chat-msg.me{justify-content:flex-end}
.chat-body{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 15px;font-size:14.5px;line-height:1.5;max-width:88%}
.chat-msg.me .chat-body{background:var(--accent);border-color:var(--accent);color:#fff;border-bottom-right-radius:5px}
.chat-msg.bot .chat-body{border-bottom-left-radius:5px}
.chat-body p{margin:0 0 8px}
.chat-body p:last-child{margin-bottom:0}
.chat-body ul,.chat-body ol{margin:6px 0;padding-left:20px}
.chat-body .hint{color:var(--muted)}
.chat-msg.me .chat-body .hint{color:rgba(255,255,255,.8)}
.chat-note{font-size:12px;color:var(--muted);margin-top:6px}
.chat-typing{display:inline-flex;gap:4px;align-items:center}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.2s}
.chat-typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.chat-typing i{animation:none;opacity:.6}}
.chat-suggest{display:flex;gap:7px;flex-wrap:wrap}
.chip-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:13px;cursor:pointer;color:var(--muted)}
.chip-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.chat-bar{display:flex;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px}
.chat-bar input{flex:1;min-width:0;border:0;background:transparent;padding:10px 8px;font-size:15px;outline:none}
.chat-bar .btn{flex:none;height:42px;border-radius:10px}

/* ------------------------------------------------ tasks week board */
.weekbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:2px 0 12px}
.weekbar-nav,.weekbar-views{display:flex;align-items:center;gap:6px}
.weekbar-label{font-size:14.5px;font-weight:550;padding:0 4px}
.weekbar-label em{font-style:normal;font-size:12px;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:2px 9px;margin-left:8px}
.weekbar .act.on{background:var(--accent);border-color:var(--accent);color:#fff}
.weekbar .act.on .ic{color:#fff}

/* Only this container scrolls; the page never gains a horizontal scrollbar
   because the board is free to be narrower than its content. */
.weekboard{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;overflow-y:visible;
  padding-bottom:10px;scroll-padding-left:2px;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:#c8cec6 transparent}
.weekboard::-webkit-scrollbar{height:9px}
.weekboard::-webkit-scrollbar-track{background:transparent}
.weekboard::-webkit-scrollbar-thumb{background:#ccd2ca;border-radius:999px;
  border:2px solid var(--paper)}
.weekboard::-webkit-scrollbar-thumb:hover{background:#b4bcb2}
/* A week of seven readable columns does not fit a laptop, so the board
   scrolls sideways instead of compressing the cards. Columns never shrink. */
.wday{flex:0 0 272px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:9px;display:flex;flex-direction:column}
.wday.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.wday.past{background:#f7f8f6}
.wday header{display:flex;align-items:baseline;gap:6px;padding:2px 4px 8px}
.wday-name{font-size:13.5px;font-weight:600;margin-right:4px}
.wday.today .wday-name{color:var(--accent-ink)}
.wday-date{font-size:12px;color:var(--muted);white-space:nowrap}
.wday header em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--muted);background:var(--sunk);border-radius:999px;padding:1px 7px}
.wday-items{display:flex;flex-direction:column;gap:8px;flex:1;min-height:60px;border-radius:9px}
.wday-add{border:1px dashed var(--line);background:none;border-radius:8px;padding:5px 0;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
.wday-add:hover{border-color:var(--accent);color:var(--accent)}

.tcard{border:1px solid var(--line-soft);border-radius:10px;background:var(--sunk);padding:8px 9px;display:flex;flex-direction:column;gap:6px}
.tcard[draggable=true]{cursor:grab}
.tcard.dragging{opacity:.45}
.tcard.is-done{opacity:.6}
.tcard-top{display:flex;align-items:flex-start;gap:8px}
.tcard-title{flex:1;min-width:0;background:none;border:0;padding:0;text-align:left;cursor:pointer;font-size:13.5px;font-weight:550;color:var(--ink);line-height:1.35}
.tcard-title:hover{color:var(--accent-ink)}
.tcard-title.done{text-decoration:line-through;color:var(--muted)}
.tcard-title[disabled]{cursor:default}
.tcard .row-meta{gap:4px}
.tcard .pill{font-size:10.5px;padding:1px 7px}
.tcard .row-acts{justify-content:flex-start}
.tcard .act{height:28px;padding:0 9px;font-size:12px}
.tcard .act-icon{width:28px}
.tcard .dh-check{width:19px;height:19px;border-radius:5px}
.tcard .dh-check .ic{width:12px;height:12px}

.overdue-strip{background:#fdf3f2;border:1px solid #f0d5d2;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.overdue-strip h2{font-size:13.5px;font-weight:600;color:var(--urgent);margin:0 0 8px}
.overdue-row{display:flex;gap:9px;overflow-x:auto;padding-bottom:2px}
.overdue-row .tcard{min-width:210px;background:var(--surface)}

.weekextra{display:flex;gap:12px;margin-top:12px;align-items:flex-start}
.weekextra>.dh-card{flex:1 1 0;min-width:0}
.weekextra .wday-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,208px),1fr));gap:9px}
.tcards{grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr))}
.tcards .tcard{background:var(--surface);border-color:var(--line)}

@media (max-width:900px){
  /* The board stays horizontal on a phone too — see the swipe rules below. */
  .wday-items{min-height:0}
  .weekextra{flex-direction:column}
  .weekextra>.dh-card{width:100%}
}

/* -------------------------------------------- urgent brief + week */
/* ---- urgent: one quiet line that expands on demand ---- */
.attn{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.attn-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;color:var(--ink);min-width:0}
.attn-bar:hover{background:var(--sunk)}
.attn-ic{flex:none;width:20px;height:20px;border-radius:50%;background:#fbeceb;color:var(--urgent);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;line-height:1}
.attn-bar strong{font-size:14px;font-weight:600;white-space:nowrap}
.attn-sub{flex:1;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attn-sub:not(:empty)::before{content:"· ";color:var(--line)}
.attn-go{flex:none;font-size:13px;color:var(--accent-ink);font-weight:500;white-space:nowrap}
.attn.open{border-color:#cfe2d8}
.attn-list{list-style:none;margin:0;padding:2px 14px 10px;border-top:1px solid var(--line-soft)}
.attn-list li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line-soft)}
.attn-list li:first-child{border-top:0}
.attn-rest{padding:10px 0 4px}
.attn-rest a{font-size:13px;color:var(--accent-ink)}

.wk{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.wk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.wk-nav{display:flex;align-items:center;gap:7px}
.wk-head h2{font-size:16px;font-weight:600;margin:0;white-space:nowrap;letter-spacing:-.1px}
.wk-range{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:96px;text-align:center}
.wk-nav h2 em{font-style:normal;font-size:11.5px;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:2px 9px;margin-left:6px}
.wk-all{font-size:13px;color:var(--muted)}
.wk-all:hover{color:var(--accent-ink)}

.wk-tabs{display:none;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;-webkit-overflow-scrolling:touch}
/* Day name, date, then the count on its own line — nothing overlaps, and a
   48px-wide target is comfortable to tap. */
.wk-tab{flex:0 0 auto;min-width:48px;border:1px solid var(--line);background:var(--surface);border-radius:11px;
  padding:6px 7px 5px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer}
.wk-tab span{font-size:11px;color:var(--muted);line-height:1.3}
.wk-tab b{font-size:16px;font-weight:600;line-height:1.2}
.wk-tab i{font-style:normal;font-size:9.5px;line-height:13px;min-width:13px;padding:0 4px;
  background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;margin-top:2px}
/* every tab reserves the count row, so the strip does not jump as days fill */
.wk-tab:not(:has(i))::after{content:"";height:15px}
.wk-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.wk-tab.on span{color:rgba(255,255,255,.85)}
.wk-tab.on i{background:rgba(255,255,255,.25);color:#fff}

.wk-grid{display:flex;gap:8px;align-items:stretch}
.wk-grid>.wk-day{flex:1 1 0;min-width:0}
.wk-day{background:var(--sunk);border:1px solid transparent;border-radius:12px;padding:9px 8px;min-height:104px;display:flex;flex-direction:column}
.wk-day.today{background:var(--accent-soft);border-color:#cfe2d8}
.wk-day.past{background:#f3f4f1}
.wk-day.past .wk-dow,.wk-day.past .wk-date{color:#9ba19b}
.wk-day header{display:flex;align-items:baseline;gap:5px;margin-bottom:7px;flex-wrap:wrap}
.wk-dow{font-size:12.5px;font-weight:600}
.wk-day.today .wk-dow{color:var(--accent-ink)}
.wk-date{font-size:11.5px;color:var(--muted)}
.wk-day ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.wk-item{display:flex;align-items:flex-start;gap:6px;min-width:0}
.wk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.wk-t:hover .wk-title{color:var(--accent-ink)}
.wk-t[disabled]{cursor:default}
.wk-t[disabled]:hover .wk-title{color:var(--ink)}
.wk-title{font-size:12.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wk-meta{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-time{color:var(--accent-ink);font-weight:600;margin-right:4px;white-space:nowrap}
.wk-item.ev .wk-title{color:var(--accent-ink)}
.wk-item.is-done .wk-title{text-decoration:line-through;color:var(--muted)}
.wk-item.is-done{opacity:.68}
.wk-dot{flex:none;width:6px;height:6px;border-radius:50%;margin-top:5px;background:#cfd4cd}
.wk-dot.urgent{background:var(--urgent)}
.wk-dot.high{background:var(--high)}
.wk-dot.ok{background:var(--accent)}
.wk-dot.soft{background:#d4d9d2}
.wk-tick{flex:none;width:14px;height:14px;margin-top:1px;border:1.4px solid #c3c8c0;border-radius:4px;background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:transparent;padding:0}
.wk-tick .ic{width:9px;height:9px}
.wk-tick:hover{border-color:var(--accent);color:var(--accent)}
/* cap a column at six rows so the whole week stays on one screen */
.wk-day ul>li:nth-child(n+7){display:none}
.wk-more{display:inline-block;margin-top:6px;font-size:11px;color:var(--muted)}
.wk-more:hover{color:var(--accent-ink)}
.wk-empty{font-size:11.5px;color:#9ba19b;margin:0;display:flex;align-items:center;gap:6px}
.wk-add{flex:none;border:0;background:none;padding:0 2px;color:#9ba19b;font-size:15px;line-height:1;cursor:pointer}
.wk-day:hover .wk-add,.wk-add:focus-visible{color:var(--accent)}

.dh-stat.zero b{color:#9aa19c;font-weight:400}
.dh-capture-org{width:auto;flex:none;padding:0 10px;font-size:13.5px;border-radius:10px;background:var(--sunk)}

@media (max-width:1100px){
  .wk-grid{flex-wrap:wrap}
  .wk-grid>.wk-day{flex:1 1 calc(25% - 6px)}
}
@media (max-width:760px){
  /* one day at a time, chosen from the tab strip */
  .wk-tabs{display:flex}
  .wk-grid{display:block}
  .wk-grid>.wk-day{flex:none;width:100%}
  .wk-day{display:none;min-height:0;background:transparent;padding:0}
  .wk-day.on{display:flex}
  .wk-day.today{background:transparent}
  .wk-day header{margin-bottom:10px}
  .wk-dow{font-size:14px}
  .wk-date{font-size:13px}
  .wk{padding:12px}
  /* roomier rows: the whole screen is one day, so nothing needs squeezing */
  .wk-day ul{gap:0}
  .wk-item{gap:10px;padding:11px 2px;border-top:1px solid var(--line-soft)}
  .wk-item:first-child{border-top:0}
  .wk-dot{width:7px;height:7px;margin-top:7px}
  .wk-tick{width:19px;height:19px;margin-top:1px}
  .wk-tick .ic{width:12px;height:12px}
  .wk-title{font-size:15px;-webkit-line-clamp:3}
  .wk-meta{font-size:12px}
  .wk-day ul>li:nth-child(n+7){display:flex}
  .wk-more{display:none}
  .wk-empty{padding:8px 2px;font-size:13.5px}
  .wk-add{font-size:18px}
}


}

/* ------------------------------------------- dashboard (reference) */
.topbar-hero{background:transparent;border-bottom:0;backdrop-filter:none;position:static;padding-top:22px;padding-bottom:4px;align-items:flex-start}
.topbar-hero .page-title{font-family:var(--sans);font-size:27px;font-weight:650;letter-spacing:-.4px;line-height:1.2}
.topbar-hero .page-sub{font-size:14px;margin-top:4px}
.topbar-hero .tb-icon{width:46px;height:46px;border-radius:12px}
.topbar-hero .btn-primary{height:46px;padding:0 18px;border-radius:12px;font-size:15px}

.dh{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.sum{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sum-i{flex:1 1 0;display:flex;align-items:baseline;gap:8px;padding:11px 16px;border-left:1px solid var(--line-soft);min-width:0}
.sum-i:first-child{border-left:0}
.sum-i:hover{background:var(--sunk)}
.sum-i b{font-size:20px;font-weight:550;line-height:1;font-variant-numeric:tabular-nums}
.sum-i span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-i.alert b{color:var(--urgent)}
.sum-i.hot b{color:var(--high)}
.sum-i.ok b{color:var(--accent)}
.sum-i.zero b{color:#a7ada8;font-weight:400}

/* quiet secondary row: counts and links, no cards */
.dh-sec{display:flex;flex-wrap:wrap;gap:8px}
.dh-sec a{flex:1 1 150px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:0}
.dh-sec a:hover{border-color:#c6cbc2;background:var(--sunk)}
.dh-sec span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-sec b{flex:none;font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

.dh-stats{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dh-stat{flex:1 1 0;display:flex;align-items:center;gap:10px;padding:13px 18px;border-left:1px solid var(--line-soft);min-width:0}
.dh-stat:first-child{border-left:0}
.dh-stat b{font-size:24px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.dh-stat span{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-stat:hover{background:var(--sunk)}
.dh-stat.alert b{color:var(--urgent)}
.dh-stat.hot b{color:var(--accent)}

.dh-capture{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px}
.dh-capture-field{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:var(--sunk);border:1px solid var(--line);
  border-radius:10px;padding:0 14px;color:var(--muted);cursor:text}
.dh-capture-field input[type=text]{flex:1;min-width:0;border:0;background:transparent;padding:12px 0;font-size:15px;outline:none;color:var(--ink)}
.dh-capture-field:focus-within{border-color:var(--accent);background:var(--surface)}
.dh-save{height:46px;padding:0 18px;border-radius:10px;font-size:15px;flex:none}

.dh-grid{display:flex;gap:14px;align-items:flex-start}
.dh-col{min-width:0;display:flex;flex-direction:column;gap:14px}
.dh-left{flex:1 1 0}
.dh-right{flex:1.1 1 0}
.dh-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 18px}
.dh-card header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.dh-card h2{font-size:16px;font-weight:550;margin:0;letter-spacing:-.1px}
.dh-card header a{font-size:13px;color:var(--muted);white-space:nowrap}
.dh-card header a:hover{color:var(--accent-ink)}
.dh-empty{color:var(--muted);font-size:13.5px;margin:8px 0 4px}
.dh-card ul{list-style:none;margin:0;padding:0}
.dh-card li{display:flex;align-items:center;gap:12px;padding:8px 0}

.dh-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--ink)}
.dh-main[disabled]{cursor:default}
.dh-t{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dh-t.plain{flex:1}
.dh-main:hover .dh-t{color:var(--accent-ink)}
.dh-main[disabled]:hover .dh-t{color:var(--ink)}
.dh-s{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-s.late{color:var(--urgent)}
.dh-mini li>.dh-s{flex:none}

.dh-check{flex:none;width:24px;height:24px;border:1.5px solid #cdd1ca;border-radius:7px;background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:transparent;padding:0}
.dh-check .ic{width:15px;height:15px}
.dh-check:hover{border-color:var(--accent);color:var(--accent)}
.dh-badge{flex:none;font-size:13px;padding:6px 12px;border-radius:999px;white-space:nowrap}
.b-red{background:#fbeceb;color:var(--urgent)}
.b-amber{background:#fdf1dc;color:#9a5b0c}
.b-soft{background:var(--accent-soft);color:#4d6a5d}

.dh-rem li{padding:10px 0;border-top:1px solid var(--line-soft)}
.dh-rem li:first-child{border-top:0}
.dh-date{flex:none;width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;font-size:12.5px}
.dh-date b{font-weight:500}
.dh-date i{font-style:normal;font-size:11.5px;letter-spacing:.3px}
.dh-date.late{background:#fbeceb;color:var(--urgent)}
.dh-dots{flex:none;width:32px;height:32px;border:0;background:none;border-radius:8px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.dh-dots:hover,.dh-dots[aria-expanded="true"]{background:var(--sunk);color:var(--ink)}

.dh-week{display:flex;gap:8px;margin-top:8px}
.dh-day{flex:1 1 0;min-width:0;border-radius:10px;background:var(--sunk);padding:10px 0 9px;display:flex;flex-direction:column;align-items:center;gap:5px}
.dh-day span{font-size:12.5px;color:var(--muted)}
.dh-day b{font-size:17px;font-weight:500}
.dh-day i{width:6px;height:6px;border-radius:50%;background:#d9ddd6}
.dh-day i.has{background:var(--accent)}
.dh-day.today{background:var(--accent);color:#fff}
.dh-day.today span{color:rgba(255,255,255,.85)}
.dh-day.today i{background:rgba(255,255,255,.45)}
.dh-day.today i.has{background:#fff}

.dh-ic{flex:none;color:var(--muted);display:grid;place-items:center;width:22px}
.dh-ic .ic{width:18px;height:18px}

@media (max-width:1100px){
  .dh-grid{flex-direction:column;align-items:stretch}
  .dh-left,.dh-right{flex:none;width:100%}
}

/* ------------------------------------------------ compact dashboard */
.dash{display:flex;flex-direction:column;gap:14px}
.dash-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dash-greet{font-family:var(--serif);font-size:22px;margin:0}
.dash-date{color:var(--muted);font-size:13px;margin:0}

.dash-stats{display:flex;gap:8px;flex-wrap:wrap}
.dash-stat{flex:1 1 120px;display:flex;align-items:baseline;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:9px 13px}
.dash-stat b{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1}
.dash-stat span{font-size:12.5px;color:var(--muted)}
.dash-stat.alert b{color:var(--urgent)}
.dash-stat:hover{border-color:#c6cbc2}

.dash-capture{display:flex;gap:8px;align-items:stretch;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:8px}
.dash-capture-input{flex:1;min-width:0}
.dash-capture textarea{height:40px;min-height:40px;resize:none;padding:9px 40px 9px 11px;font-size:14.5px;line-height:1.4}
.dash-capture textarea{overflow:hidden}
.dash-capture textarea:focus{height:84px;overflow-y:auto}
.dash-capture .micbtn{top:6px}
.dash-capture select{width:auto;flex:none;padding:0 10px;font-size:14px}
.dash-capture .btn{flex:none;justify-content:center}

.dash-panels{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.dash-panel{flex:1 1 300px;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column}
.dash-panel header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.dash-panel h2{font-family:var(--serif);font-size:15.5px;margin:0}
.dash-panel h2 small{font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:400}
.dash-panel header a{font-size:12.5px;color:var(--accent-ink);white-space:nowrap}
.dash-panel header a:hover{text-decoration:underline}
.dash-empty{color:var(--muted);font-size:13px;margin:8px 0 2px}

.dash-list{list-style:none;margin:0;padding:0}
.dash-list li{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line-soft);min-height:36px}
.dash-list li:first-child{border-top:0}
.dash-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:13.5px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--ink)}
.dash-title:hover{color:var(--accent-ink)}
.dash-title.plain,.dash-title[disabled]{cursor:default}
.dash-title.plain:hover,.dash-title[disabled]:hover{color:var(--ink)}
.dash-meta{flex:none;font-size:12px;color:var(--muted);white-space:nowrap}
.dash-meta.late{color:var(--urgent)}
.dash-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#cfd3cc}
.dash-dot.d-urgent{background:var(--urgent)}
.dash-dot.d-high{background:var(--high)}
.dash-dot.d-medium{background:var(--medium)}
.dash-dot.d-low{background:var(--low)}
.dash-dot.d-ok{background:var(--accent)}
.dash-tick{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:6px;
  width:26px;height:26px;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;padding:0}
.dash-tick:hover{border-color:var(--accent);color:var(--accent)}
.dash-who{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);
  display:grid;place-items:center;font-size:11px;font-weight:600}

/* ------------------------------------------------- picker + formatting */
.picker{position:relative}
.picker-btn{width:100%;text-align:left;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;color:var(--muted)}
.picker-btn.has{color:var(--ink)}
.picker-btn:after{content:"▾";float:right;color:var(--muted)}
.picker-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--shadow);max-height:210px;overflow-y:auto;z-index:5;padding:4px}
.picker-panel[hidden]{display:none}
.picker-opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;cursor:pointer;font-size:14px}
.picker-opt:hover{background:var(--sunk)}
.picker-opt input{width:auto;margin:0}

.fmtbar{display:flex;gap:4px;margin-bottom:6px}
.fmtbar button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:4px 9px;font-size:12.5px;cursor:pointer;color:var(--muted)}
.fmtbar button:hover{background:var(--sunk);color:var(--ink)}

.rich p{margin:0 0 6px}
.rich p:last-child{margin-bottom:0}
.rich ul,.rich ol{margin:4px 0 6px;padding-left:20px}
.rich li{margin:1px 0}
.rich strong{font-weight:650;color:var(--ink)}

.pill.pf{background:#eef1f5;border-color:#d3dbe4;color:var(--medium)}
/* Why a card sits on this day. Start is quiet, Due carries a little more
   weight, and only a missed deadline goes red. */
.pill.kind{font-weight:600;letter-spacing:.01em}
.pill.kind.start{background:#eef2f6;border-color:#d4dde6;color:#3c5a78}
.pill.kind.due{background:var(--accent-soft);border-color:#cfe2d8;color:var(--accent-ink)}
.pill.kind.both{background:var(--accent-soft);border-color:#bcd7c9;color:var(--accent-ink)}
.pill.kind.late{background:#fbeceb;border-color:#e7c3bf;color:var(--urgent)}
.tcard-span{margin:1px 0 0;font-size:11px;color:var(--muted)}

/* ------------------------------------------------------- attachments */
.shots{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.shot{display:block;width:74px;height:74px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--sunk);position:relative}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot-x{position:absolute;top:2px;right:2px;width:20px;height:20px;border:0;border-radius:50%;
  background:rgba(27,32,29,.72);color:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0}
#attachWrap[hidden],#attachHint[hidden]{display:none}

/* ------------------------------------------------------- AI things */
.split{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
.split-side .sec-head{margin-top:0}
.newslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.newslist li{border-bottom:1px solid var(--line-soft);padding-bottom:10px}
.newslist li:last-child{border-bottom:0;padding-bottom:0}
.newslist a{font-size:13.5px;line-height:1.35;display:block}
.newslist a:hover{color:var(--accent-ink)}
.newsmeta{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}

/* ------------------------------------------------------ drag and drop */
.dropzone{min-height:46px;border-radius:8px;transition:background .12s}
.dropzone.over{background:var(--accent-soft);outline:2px dashed #b7d3c6;outline-offset:2px}
.pcard[draggable=true]{cursor:grab}
.pcard.dragging{opacity:.45}
.pcard-top{display:flex;align-items:flex-start;gap:8px}
.pcard-top .tick{width:auto;margin:3px 0 0;flex:none}
.pcard.is-done{opacity:.6}

/* --------------------------------------------------------------- pieces */
.flash{margin:14px 26px 0;padding:10px 14px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);font-size:14px}
.flash-err{background:#fbf0ef;color:var(--urgent)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.18s;z-index:80}
.toast.on{opacity:1;transform:translate(-50%,0)}
.empty{text-align:center;color:var(--muted);padding:34px 20px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}
.empty h2{font-family:var(--serif);color:var(--ink);font-size:18px;margin:0 0 6px}
.empty p{margin:0 auto 14px;max-width:44ch;font-size:14px}
.empty.big{margin:60px auto;max-width:520px}

/* ---------------------------------------------------------------- auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px;width:100%;max-width:400px;box-shadow:var(--shadow)}
.auth-card.wide{max-width:520px}
.auth h1{font-family:var(--serif);font-size:24px;margin:0 0 4px}
.auth .sub{color:var(--muted);font-size:14px;margin:0 0 18px}
.auth .btn{width:100%;justify-content:center;margin-top:20px}
.err{background:#fbf0ef;color:var(--urgent);padding:9px 12px;border-radius:8px;font-size:13.5px;margin-bottom:14px}

/* --------------------------------------------------------------- mobile */
@media (max-width:900px){
  .rail{transform:translateX(-100%);transition:transform .18s;box-shadow:var(--shadow)}
  .rail.open{transform:none;z-index:50}
  .main{margin-left:0}
  .only-mobile{display:inline-grid}
  .topbar,.content,.flash{padding-left:14px;padding-right:14px}
  .flash{margin-left:14px;margin-right:14px}
  .content{padding-top:16px}
  .page-title{font-size:18px}
  .greet{font-size:22px}
  .stats{grid-template-columns:repeat(2,1fr)}
  /* Two buckets side by side reads better than one tall column on a tablet;
     below 620px they stack. */
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .tbl{min-width:640px}
  .sheet{padding:3vh 10px 10px}
  .sheet-card,.sheet-card.wide{max-width:100%}

  /* Actions are two compact controls, so they sit beside the title on phones too. */
  .row{padding:12px 13px;gap:10px}
  .row-acts{gap:6px}
  .act{height:36px}
  .act-icon{width:36px}
  .menu-item{padding:11px 12px;font-size:14.5px}
  .menu-panel{min-width:210px}

  /* Search takes its own row; the selects pair up two across; buttons follow.
     This is the only place filter layout is decided below 900px. */
  .filters{gap:7px}
  .searchbox{max-width:none;flex:1 1 100%;min-width:0}
  .filters select,.filters input[type=text],.filters .grow{
    flex:1 1 calc(50% - 7px);min-width:0;width:auto;padding:9px 10px;font-size:14px}
  .filters .searchbox input[type=text]{flex:1 1 100%}
  .filters .btn{padding:9px 14px;flex:0 0 auto}

  /* Comfortable tap targets for the small inline controls. */
  .row-meta select,.pcard select{padding:6px 8px;font-size:13px}
  .picker-panel{max-height:240px}
  .shot{width:64px;height:64px}
  .newslist a{font-size:14px}
  .col{padding:11px}
  .dash-stat{flex:1 1 calc(50% - 8px)}
  .dash-capture{flex-wrap:wrap}
  .dash-capture-input{flex:1 1 100%}
  .dash-capture select{flex:1}
  .dash-panel{flex:1 1 100%}
  .dh-stats{flex-wrap:wrap}
  .dh-stat{flex:1 1 33%;border-top:1px solid var(--line-soft);padding:11px 13px}
  .dh-stat b{font-size:20px}
  .dh-capture{flex-wrap:wrap}
  .dh-capture-field{flex:1 1 100%}
  .dh-save{flex:1 1 100%}
  .topbar-hero{padding-top:14px}
  .topbar-hero .tb-icon,.topbar-hero .btn-primary{height:40px}
  .topbar-hero .tb-icon{width:40px}
  .topbar-hero .page-title{font-size:21px}
  .page-sub{font-size:12px}
  .hide-sm{display:none}
  .tb-icon{width:36px;height:36px}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr 1fr}
  .act-label{display:none}
  .act{width:36px;padding:0;justify-content:center}
}


/* ------------------------------------------------- dashboard on a phone */
@media (max-width:359px){
  /* below this two controls side by side become too cramped to read */
  .filters select,.filters input[type=text],.filters .grow{flex:1 1 100%}
}
@media (max-width:620px){
  .board{grid-template-columns:minmax(0,1fr)}
  /* the five figures scroll sideways rather than crushing to one letter */
  .sum{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sum::-webkit-scrollbar{display:none}
  .sum-i{flex:0 0 auto;min-width:max-content;padding:10px 15px;gap:7px}
  .sum-i span{overflow:visible;text-overflow:clip}

  .attn{position:relative}
  .attn-bar{flex-wrap:wrap;gap:4px 10px;padding:11px 62px 11px 12px}
  .attn-bar strong{font-size:13.5px}
  .attn-sub{flex:1 1 100%;white-space:normal}
  .attn-sub:not(:empty)::before{content:none}
  .attn-go{position:absolute;right:12px;top:12px}

  /* capture: full-width field, then organization and button side by side */
  .dh-capture{flex-wrap:wrap;gap:8px}
  .dh-capture-field{flex:1 1 100%}
  .dh-capture-org{flex:1 1 auto;height:44px}
  .dh-save{flex:1 1 auto}

  .dh-sec a{flex:1 1 100%}
}

/* ================================================================
   Touch targets and small-screen layout
   One block rather than a patch per screen. Controls grow by padding
   and min-size, never by fixed height, so nothing is pushed out of
   its row. 40px is the comfortable thumb target; 32px is the floor
   for controls that sit inline inside a line of text.
   ================================================================ */
@media (hover:none),(max-width:760px){
  .iconbtn{min-width:40px;min-height:40px;padding:8px}
  .act{min-height:38px;padding:0 13px}
  .act-icon{min-width:38px;width:38px}
  .btn{min-height:40px}
  .btn-sm{min-height:36px;padding:7px 12px}
  .btn-ghost{min-height:38px;padding:8px 12px}
  .tcard .act{min-height:34px;padding:0 11px}
  .tcard .act-icon{min-width:34px;width:34px}
  /* Inline checkboxes: the control itself becomes a real 38px target and the
     visible box is drawn inside it, so the tap area is genuinely that size
     rather than an invisible overlay that assistive tooling cannot measure. */
  .dh-check,.wk-tick,.tcard .dh-check{
    width:38px;height:38px;min-width:38px;border:0;background:none;padding:0;
    display:grid;place-items:center}
  .dh-check::before,.wk-tick::before,.tcard .dh-check::before{
    content:"";position:absolute;width:22px;height:22px;border:1.6px solid #cdd1ca;
    border-radius:6px;background:var(--surface)}
  .dh-check,.wk-tick{position:relative}
  .dh-check .ic,.wk-tick .ic{position:relative;width:14px;height:14px}
  .dh-check:hover::before,.wk-tick:hover::before{border-color:var(--accent)}
  /* native checkbox: browsers ignore width on some platforms, so scale it */
  input[type=checkbox].tick{width:32px;height:32px;margin:2px 2px 0;accent-color:var(--accent)}
  /* text-only buttons and card-header links need a real row height */
  .tcard-title,.wk-t,.dh-main,.row-title{padding-block:6px;min-height:34px}
  /* Every inline text link that acts as a control gets a real row height.
     Listed by role rather than patched per screen. */
  .dh-card header a,.sec-head a,.note-date+*,.panel-head a,
  .jr-label a,.cardsec>header a,.strip header a,.ag-more,.wk-more,.newsbox .newslist a{
    display:inline-flex;align-items:center;min-height:36px;min-width:36px;
    justify-content:flex-end}
  .strip-t,a.strip-t{min-height:36px;display:flex;align-items:center}
  .wk-add{min-width:36px;padding:0 10px}
  .more,a.more{display:inline-flex;align-items:center;min-height:36px}
  select,input[type=text],input[type=date],input[type=datetime-local],input[type=email],
  input[type=password],input[type=number]{min-height:40px}
  .filters select,.filters input[type=text]{min-height:40px;font-size:15px}
  .wk-add,.wday-add{min-height:36px;min-width:40px}
  /* segmented control and the inline note link need real targets */
  .seg a{min-height:36px;display:inline-flex;align-items:center}
  .plan-note a{display:inline-flex;align-items:center;min-height:36px}
  .clamp-more{min-height:36px;padding:6px 0}
  /* the one-line gist is also the control that opens the note */
}

/* ---- filters and page headers stack rather than clip ---- */
@media (max-width:760px){
  .filters .btn{flex:0 0 auto}
  /* a settings row is a label, an edit form and its actions — let it wrap
     onto a second line instead of pushing the actions off the screen */
  .row{flex-wrap:wrap}
  .row>form.filters{flex:1 1 100%}
  .row .row-acts{flex:1 1 100%;justify-content:flex-start}
  /* a select must never be wider than the row that holds it */
  select,.dh-capture-org{max-width:100%}
  /* Menu, title and actions on one line — the hamburger belongs top-left,
     not underneath the heading. The title is what shrinks. */
  .topbar{padding:12px 16px;gap:8px;flex-wrap:nowrap}
  .topbar-title{flex:1 1 auto;min-width:0}
  /* The heading wraps onto as many lines as it needs. Clamping it only
     chopped short titles like "Organizations" for no benefit. */
  .topbar .page-title{font-size:19px;line-height:1.25;overflow-wrap:anywhere}
  .topbar-hero .page-title{font-size:22px}
  .content{padding:16px 16px 72px}
}

/* ---- tables stay tables, but scroll instead of overflowing the page ---- */
.tbl-wrap{max-width:100%}
@media (max-width:900px){
  /* Scrolls sideways, with a shadow rather than a fade to signal it: a fade
     would dim the last column on touch, where there is no hover to undo it. */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:linear-gradient(to right,var(--surface) 30%,transparent) left/28px 100% no-repeat,
               linear-gradient(to left,var(--surface) 30%,transparent) right/28px 100% no-repeat,
               radial-gradient(farthest-side at 0 50%,rgba(27,32,29,.12),transparent) left/10px 100% no-repeat,
               radial-gradient(farthest-side at 100% 50%,rgba(27,32,29,.12),transparent) right/10px 100% no-repeat;
    background-attachment:local,local,scroll,scroll}
  .tbl{min-width:620px}
  .tbl th,.tbl td{padding:10px 12px;font-size:13.5px}
}
@media (max-width:420px){
  .content{padding:14px 12px 72px}
  .note{padding:13px 13px 9px}
  .cards{gap:10px}
}

/* ================================================================
   Journal stream — Thoughts and Self learn
   A reading surface, not a board. No box per entry: a hairline rail
   carries the eye down the day, the time sits in the margin, and the
   text runs at a comfortable measure. Actions stay quiet until the
   entry is hovered, so the page reads as writing rather than UI.
   ================================================================ */
.journal{display:flex;flex-direction:column;gap:26px}
.jr-group{display:flex;flex-direction:column;gap:2px}
.jr-label{display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.jr-label::after{content:"";flex:1;height:1px;background:var(--line)}
.jr-label i{order:1;font-style:normal;font-size:11.5px;letter-spacing:0;text-transform:none;
  color:var(--muted);background:var(--sunk);border-radius:999px;padding:1px 8px}

.jr-list{list-style:none;margin:0;padding:0}
.jr-entry{display:flex;gap:16px;padding:14px 0;position:relative}
.jr-entry+.jr-entry{border-top:1px solid var(--line-soft)}

/* the margin: time, date and the rail dot */
.jr-when{flex:0 0 76px;display:flex;flex-direction:column;gap:1px;padding-top:2px;position:relative}
.jr-when time{font-size:12.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.jr-when em{font-style:normal;font-size:11.5px;color:var(--muted)}
.jr-dot{position:absolute;right:-9px;top:6px;width:7px;height:7px;border-radius:50%;
  background:var(--surface);border:1.6px solid #cfd6ce}
.jr-entry:hover .jr-dot{border-color:var(--accent)}
/* the rail itself, drawn once per group behind the dots */
.jr-list{position:relative}
.jr-list::before{content:"";position:absolute;left:82px;top:10px;bottom:10px;width:1px;background:var(--line-soft)}

.jr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;max-width:68ch}
.jr-title{margin:0;font-size:15.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.jr-text{font-size:14.5px;line-height:1.62;color:#333a35;overflow-wrap:anywhere}
.jr-meta{margin-top:1px}

/* actions: present for keyboard and touch, quiet for the eye */
.jr-acts{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px;opacity:.55;transition:opacity .12s}
.jr-entry:hover .jr-acts,.jr-acts:focus-within{opacity:1}
@media (hover:none){ .jr-acts{opacity:1} }

@media (max-width:620px){
  /* the margin becomes a line above the entry; the rail would only crowd it */
  .jr-entry{flex-direction:column;gap:7px;padding:13px 0}
  .jr-when{flex:none;flex-direction:row;align-items:baseline;gap:8px}
  .jr-when time{font-size:12px}
  .jr-dot{display:none}
  .jr-list::before{display:none}
  .jr-body{max-width:none}
  .jr-text{font-size:15px}
}

/* ================================================================
   Dashboard strips — reminders and AI news
   Two thin panels under the week. Capped in height on purpose: they
   are a glance, not a section, and must never rival the week above.
   ================================================================ */
.strips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.strip{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 14px 9px;min-width:0}
.strip header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.strip h2{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.strip h2 .ic{width:14px;height:14px}
.strip header a{font-size:12.5px;color:var(--muted)}
.strip header a:hover{color:var(--accent-ink)}
.strip ul{list-style:none;margin:0;padding:0}
.strip li{display:flex;align-items:baseline;gap:9px;padding:6px 0;border-top:1px solid var(--line-soft);min-width:0}
.strip li:first-child{border-top:0}
.strip-when{flex:none;font-size:11.5px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:52px}
.strip li.late .strip-when{color:var(--urgent)}
.strip li.soon .strip-when{color:var(--accent-ink)}
.strip-t{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;cursor:pointer;
  font-size:13.5px;line-height:1.4;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
a.strip-t{display:-webkit-box}
.strip-t:hover{color:var(--accent-ink)}
.strip-t[disabled]{cursor:default}
.strip-org{flex:none;font-size:10.5px;color:var(--muted);max-width:11ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (hover:none),(max-width:760px){
  .strip li{padding:9px 0}
  .strip-t{font-size:14.5px}
  .strip-when{min-width:46px}
}

/* ================================================================
   Today — one agenda, not eight panels
   Sections are labels over compact rows rather than cards, so the
   day reads top to bottom in priority order and the content, not
   the containers, carries the page.
   ================================================================ */
.agenda{display:flex;flex-direction:column;gap:22px}

.ag-empty{margin:2px 0 0;padding:7px 2px;font-size:13.5px;color:#9ba19b}
.ag-more{display:inline-block;margin-top:7px;font-size:12.5px;color:var(--accent-ink)}
.ag-more:hover{text-decoration:underline}

@media (max-width:620px){
  .agenda{gap:18px}
}



/* ---- AI things: a library per kind, with the feed alongside ---- */
.split-main>.ag-sec{margin-bottom:22px}
.ai-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.newsbox{padding:4px 14px 12px}
.newsbox .newslist{list-style:none;margin:0;padding:0}
.newsbox .newslist li{padding:10px 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:3px}
.newsbox .newslist li:first-child{border-top:0}
.newsbox .newslist a{font-size:13.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.newsbox .newslist a:hover{color:var(--accent-ink)}
.newsbox .newsmeta{font-size:11.5px;color:var(--muted)}
@media (max-width:900px){
  /* the feed stacks under the list rather than squeezing beside it */
  .split-side{width:100%}
}

/* ================================================================
   Tasks planner — this week, next week, then by month
   ================================================================ */
.plan{display:block;margin-bottom:24px}
.plan>.jr-label{margin-bottom:9px}
.plan>.jr-label a{order:2;margin-left:8px;font-size:11.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--muted)}
.plan>.jr-label a:hover{color:var(--accent-ink)}
details.plan>summary{cursor:pointer;list-style:none}
details.plan>summary::-webkit-details-marker{display:none}
details.plan>summary::before{content:"▸";margin-right:7px;font-size:10px;color:var(--muted);
  display:inline-block;transition:transform .12s}
details.plan[open]>summary::before{transform:rotate(90deg)}
.plan-note{margin:4px 0 28px}

/* the week board scrolls sideways rather than squeezing seven unreadable
   columns; menus portal to <body>, so nothing is clipped by that scroll */
.weekboard{scroll-snap-type:x proximity}
.weekboard>.wday{scroll-snap-align:start}

.wday.is-empty{min-height:0}
.wday.is-empty .wday-items{min-height:0}
/* an empty day is a header and a + , not a tall blank card */
.wday.is-empty .wday-add{margin-top:2px}

/* next week: same board, tighter, so the page does not double in height */
.weekboard.is-compact .wday{flex:0 0 248px;padding:8px}
.weekboard.is-compact .tcard{padding:6px 7px;gap:4px}
.weekboard.is-compact .tcard-body,
.weekboard.is-compact .tcard .row-meta .pill:nth-child(n+3){display:none}
.weekboard.is-compact .tcard-title{font-size:12.5px}
.weekboard.is-compact .wday header{margin-bottom:5px}

/* ---- one-line callout that opens in place (overdue) ---- */
.callout{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:16px}
.callout>summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;
  list-style:none;min-width:0}
.callout>summary::-webkit-details-marker{display:none}
.callout>summary:hover{background:var(--sunk);border-radius:12px}
.callout-ic{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;line-height:1}
.callout.late{border-color:#eccbc7}
.callout.late .callout-ic{background:#fbeceb;color:var(--urgent)}
.callout.late strong{color:var(--urgent)}
.callout>summary strong{font-size:14px;font-weight:600;white-space:nowrap}
.callout-sub{flex:1;min-width:0;font-size:13px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.callout-go{flex:none;font-size:13px;font-weight:500;color:var(--accent-ink)}
.callout[open] .callout-go::after{content:" ▴"}
.callout:not([open]) .callout-go::after{content:" ▾"}
.callout-body{padding:4px 14px 14px}

/* ---- the No-due-date chip in the toolbar ---- */
.chipcount{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;
  color:var(--muted);cursor:pointer}
.chipcount b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.chipcount:hover{border-color:#c2c8bf;color:var(--ink)}
.chipcount[aria-expanded="true"]{background:var(--accent-soft);border-color:#cfe2d8;color:var(--accent-ink)}
.reveal{margin-bottom:20px}

/* a proper segmented control rather than two look-alike buttons */
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg a{padding:6px 14px;border-radius:7px;font-size:13px;color:var(--muted);line-height:1.2}
.seg a.on{background:var(--surface);color:var(--ink);font-weight:550;box-shadow:0 1px 2px rgba(27,32,29,.06)}
.seg a:hover:not(.on){color:var(--ink)}

@media (max-width:900px){
  /* Swipe through the days rather than scrolling past seven stacked blocks.
     Snapping makes one day settle in view at a time. */
  .weekboard,.weekboard.is-compact{scroll-snap-type:x mandatory}
  .weekboard>.wday,.weekboard.is-compact .wday{flex:0 0 min(86vw,300px);scroll-snap-align:center}
  .weekboard.is-compact .tcard-body{display:block}
}
@media (max-width:420px){
  .weekboard>.wday,.weekboard.is-compact .wday{flex:0 0 min(88vw,280px)}
}
@media (max-width:620px){
  .weekbar{flex-wrap:wrap;gap:8px}
  .weekbar-views{width:100%;display:flex;align-items:center;gap:8px}
  .chipcount{flex:1;justify-content:space-between}
  .seg{flex:none}
  .callout>summary{flex-wrap:wrap;gap:6px 10px;padding:10px 12px}
  .callout-sub{flex:1 1 100%;white-space:normal}
  .callout-body{padding:4px 12px 12px}
}

/* ---- folding secondary filters ---- */
/* On a laptop the details box must not interrupt the flex row, so it becomes
   display:contents and its children sit in the row directly. */
.morefilters{display:contents}
.morefilters>summary{display:none}
.ff-apply{order:9}
.morefilters>.ff{display:contents}
@media (max-width:760px){
  .morefilters{display:block;flex:1 1 100%;min-width:0}
  .morefilters>summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    list-style:none;width:auto;min-height:40px}
  .morefilters>summary::-webkit-details-marker{display:none}
  .morefilters>summary::after{content:"▾";font-size:10px;color:var(--muted)}
  .morefilters[open]>summary::after{content:"▴"}
  .morefilters>.ff{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .morefilters>.ff>select{flex:1 1 calc(50% - 8px);min-width:0}
  .morefilters>.ff>.btn{flex:0 0 auto}
  /* the fold button and New task share one row */
  .morefilters{flex:0 0 auto}
}

/* ================================================================
   Preview clamp — one implementation for every body of rich text
   -webkit-line-clamp cannot be trusted here: these bodies hold real
   markup (paragraphs, lists), and once a block child is involved it
   stops counting lines, which is how a reminder grew to 268px. A
   max-height derived from the line height bounds the box whatever is
   inside it, and because the cap is a whole number of lines the cut
   lands on a line boundary. Nothing is lost: app.js adds "Show more"
   to anything that actually overflows.
   ================================================================ */
[data-clamp]{--clamp-lines:6;--clamp-lh:1.55em;
  overflow:hidden;max-height:calc(var(--clamp-lines) * var(--clamp-lh))}
[data-clamp].is-open{max-height:none;overflow:visible}

/* how much of each kind of thing is worth previewing */
.note-body[data-clamp]{--clamp-lines:7;--clamp-lh:1.5em}
.tcard-body[data-clamp]{--clamp-lines:4;--clamp-lh:1.45em}
.jr-text[data-clamp]{--clamp-lines:8;--clamp-lh:1.62em}
.row-sub[data-clamp]{--clamp-lines:5}

/* ================================================================
   Item card + grouped card sections
   The Planner card's shape, reused by Reminders, Thoughts and Today
   so those pages read as boards rather than long lists of rows.
   ================================================================ */
.cardsec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px 14px;margin-bottom:14px}
.cardsec>header{display:flex;align-items:center;gap:9px;margin-bottom:11px;min-width:0}
.cardsec>header h2{font-family:var(--serif);font-size:16px;font-weight:600;margin:0;white-space:nowrap}
.cardsec>header .n{font-size:12px;color:var(--muted);background:var(--sunk);
  border-radius:999px;padding:1px 9px;font-variant-numeric:tabular-nums}
.cardsec>header .rule{flex:1;height:1px;background:var(--line-soft);min-width:12px}
.cardsec>header a{font-size:12.5px;color:var(--muted);white-space:nowrap}
.cardsec>header a:hover{color:var(--accent-ink)}
.cardsec.late{border-color:#eccbc7}
.cardsec.late>header h2{color:var(--urgent)}
.cardsec.muted{opacity:.72}

.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr));
  gap:10px;align-items:start}

.icard{display:flex;flex-direction:column;gap:6px;min-width:0;
  background:var(--sunk);border:1px solid var(--line-soft);border-radius:9px;padding:10px 11px}
.icard:hover{border-color:#cfd5cc}
.icard.is-done{opacity:.62}
.icard.is-done .icard-title{text-decoration:line-through;color:var(--muted)}

.icard-top{display:flex;align-items:flex-start;gap:9px;min-width:0}
.icard-top .tick{flex:none;margin:1px 0 0}
.icard-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.icard-when{font-size:11.5px;font-weight:600;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.icard-when.late{color:var(--urgent)}
.icard-title{margin:0;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}

/* one line of gist; the button opens the whole note in place */
.icard-peek{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  font-size:12.5px;line-height:1.45;color:var(--muted);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icard-peek:hover{color:var(--accent-ink)}
.icard-peek[aria-expanded="true"]{color:var(--accent-ink);font-weight:500}
.icard-full{font-size:12.5px;line-height:1.55;color:var(--muted)}

.icard-meta{gap:5px;margin-top:1px}
.icard .pill{font-size:10.5px;padding:1px 7px}
.icard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:7px;border-top:1px solid var(--line-soft)}
.icard-date:empty{display:none}
.icard-date{font-size:11px;color:var(--muted);white-space:nowrap;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.icard .act{height:28px;padding:0 9px;font-size:12px}
.icard .act-icon{width:28px}
.icard .row-acts{flex:none;gap:4px}

@media (hover:none),(max-width:760px){
  .icard .act{min-height:34px;padding:0 11px}
  .icard .act-icon{min-width:34px;width:34px}
  .icard-peek{min-height:32px;display:flex;align-items:center}
  .icard-title{font-size:15px}
}
@media (max-width:420px){
  .cardsec{padding:11px 11px 12px}
  .cardgrid{gap:8px}
}

/* ---- error log: long messages must stay readable ---- */
.errlog td{vertical-align:top;font-size:12.5px}
.errlog td:nth-child(4){overflow-wrap:anywhere;max-width:520px;white-space:normal;color:var(--urgent)}
.errlog code{font-size:12px;background:var(--sunk);padding:1px 5px;border-radius:4px}
.errlog small{color:var(--muted)}

/* ================================================================
   Checklists inside an item's details
   Steps written as "[ ] thing" become real boxes. Ticking one saves
   straight away, so the list is a working checklist rather than
   decoration.
   ================================================================ */
/* A checklist is the thing you act on, so it is not worth hiding behind
   "Show more" the way a long paragraph is: give a body that holds one far
   more room before it clamps. */
[data-clamp]:has(.chklist){--clamp-lines:16}

.chklist{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:3px}
.chklist .chk{display:flex;align-items:flex-start;gap:9px;min-width:0;line-height:1.5}
.chk-box{flex:none;width:17px;height:17px;margin:2px 0 0;cursor:pointer;accent-color:var(--accent)}
.chk-box:disabled{opacity:.5;cursor:wait}
.chk>span{flex:1;min-width:0;overflow-wrap:anywhere}
.chk.done>span{text-decoration:line-through;color:var(--muted)}

/* Finished steps sit under this, so what is left reads first. The rule is
   drawn by the heading itself rather than a border on the first done row,
   which would move around as steps are ticked. */
.chk-sep{display:flex;align-items:center;gap:8px;margin:7px 0 1px;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.chk-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.chk-sep span{font-variant-numeric:tabular-nums;letter-spacing:0}
.chklist .chk.done{opacity:.72}

/* progress, beside the other pills */
.chk-count{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--muted);background:var(--sunk);
  border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.chk-count.all{background:var(--accent-soft);border-color:#cfe2d8;color:var(--accent-ink)}

@media (hover:none),(max-width:760px){
  /* a 17px box is a poor target; the row carries the tap area */
  .chklist .chk{padding:4px 0}
  .chk-box{width:22px;height:22px;margin-top:1px}
}