/* ===== PATCH SET additions ===== */
.vision-badge{font:600 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:6px;border:1px solid var(--line2);color:var(--soft)}
.vision-badge.on{color:var(--ok);border-color:var(--ok)}
.vision-badge.off{color:var(--dim);opacity:.7}
.study-view[data-view="dashboard"] .dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:14px;padding:18px 22px 40px}
.dash-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.dash-card h4{font:italic 16px var(--serif);color:var(--ink);margin:0;display:flex;align-items:center;gap:8px}
.dash-card h4 .count{font:600 10px var(--mono);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:99px;padding:1px 8px}
.dash-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.dash-row:hover{background:var(--panel2);border-color:var(--line)}
.dash-row .nm{flex:1;min-width:0;font:500 13px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-row .mt{font:11px var(--mono);color:var(--soft);flex:none}
.dash-empty{padding:10px 4px;color:var(--soft);font:12.5px var(--sans)}
.dash-qa{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px 0}

/* Sit above the whiteboard's page bar rather than on top of it.

   The bar is anchored bottom-right at z-index 8 and the FAB was anchored
   bottom-right at z-index 640, 4px apart - so the FAB covered the right-hand
   end of the bar and swallowed every click that landed there. Adding a labelled
   button to the bar made it wide enough that the overlap reached buttons people
   actually use, and Playwright reported it plainly: "calcFab intercepts
   pointer events".

   Stacked, neither has to win a z-index fight, and both stay clickable. The
   offset tracks the bar's own height so it stays correct when the bar wraps on
   a narrow screen. */
.calc-fab{animation:dialogIn var(--dur-base) var(--ease-out);position:fixed;right:18px;bottom:calc(18px + var(--wb-pages-bar-h,46px));z-index:640;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-s);background:var(--surface);color:var(--fg);display:none;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.calc-fab.show{display:grid}
.calc-fab:hover{border-color:var(--accent);color:var(--accent)}
.calc-panel{animation:dialogIn var(--dur-base) var(--ease-out);position:fixed;right:18px;bottom:74px;z-index:641;width:260px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);padding:12px;display:none;font-family:var(--sans)}
.calc-panel.show{display:block}
/* Settings > Layout > Hide the calculator.

   `!important` is load-bearing here, not laziness. Two 500-800ms intervals go
   on adding `.show` to the button for as long as the whiteboard or a quiz is
   open (js/whiteboard/whiteboard-100.js and the tick() in bootCalc), and
   `.calc-fab.show{display:grid}` would win on specificity against a plain
   attribute selector. The attribute has to outrank a class that is being
   re-added forever. */
html[data-calc-off] .calc-fab,
html[data-calc-off] .calc-panel{display:none !important}
.calc-panel .cdisp{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-align:right;font:600 20px var(--mono);color:var(--fg);margin-bottom:8px;overflow-x:auto;white-space:nowrap}
.calc-panel .cg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.calc-panel button{padding:9px 0;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);font:600 13px var(--sans);cursor:pointer;transition:background .12s,border-color .12s}
.calc-panel button:hover{border-color:var(--accent);color:var(--accent)}
.calc-panel button.wide{grid-column:span 2}
.calc-panel button.eq{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.calc-panel .crow{display:flex;gap:6px;justify-content:flex-end;margin-top:6px;font:11px var(--mono);color:var(--soft)}

.exam-shell{flex:1;display:flex;min-height:0;overflow:hidden}
.exam-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--paper)}
.exam-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface);flex:none;flex-wrap:wrap}
.exam-timer{font:700 16px var(--mono);color:var(--fg);padding:4px 10px;border:1px solid var(--line);border-radius:8px}
.exam-timer.warn{color:var(--err);border-color:var(--err)}
.exam-body{flex:1;overflow:auto;padding:22px 26px}
.exam-q{max-width:820px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 22px}
.exam-q h3{margin:0 0 4px;font:italic 20px var(--serif)}
.exam-q .qmeta{font:11px var(--mono);color:var(--soft);margin-bottom:12px}
.exam-aside{width:220px;border-left:1px solid var(--line);padding:12px 10px;overflow:auto;background:var(--surface);flex:none}
.exam-aside h5{margin:0 0 8px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.exam-pal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.exam-pal button{aspect-ratio:1;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);font:600 12px var(--mono);cursor:pointer}
.exam-pal button.answered{background:color-mix(in srgb,var(--ok) 24%,var(--surface-2));border-color:var(--ok)}
.exam-pal button.marked{background:color-mix(in srgb,var(--warn) 28%,var(--surface-2));border-color:var(--warn)}
.exam-pal button.cur{outline:2px solid var(--accent);outline-offset:-2px}
.exam-nav{display:flex;gap:10px;justify-content:space-between;margin-top:18px;max-width:820px;margin-left:auto;margin-right:auto}
.exam-cfg{max-width:760px;margin:20px auto;padding:22px 24px;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:12px}
.exam-cfg h2{margin:0;font:italic 24px var(--serif)}
.exam-cfg .row{display:flex;gap:12px;flex-wrap:wrap}
.exam-cfg .row>*{flex:1;min-width:160px}
@media(max-width:820px){
  .exam-aside{position:absolute;right:0;top:0;bottom:0;z-index:8;transform:translateX(102%);transition:transform .25s;box-shadow:var(--shadow);max-width:280px}
  .exam-aside.open{transform:none}
  .exam-body{padding:14px}
}

.mist-wrap{max-width:900px;margin:0 auto;padding:16px 0 40px}
.mist-row{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:12px 14px;margin-bottom:10px}
.mist-row .qhead{font:600 13.5px var(--sans);color:var(--fg);margin-bottom:6px}
.mist-row .verdict{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:6px;margin-right:8px}
.mist-row .verdict.bad{background:color-mix(in srgb,var(--err) 18%,var(--surface-2));color:var(--err)}
.mist-row .verdict.part{background:color-mix(in srgb,var(--warn) 22%,var(--surface-2));color:var(--warn)}
.mist-row .verdict.good{background:color-mix(in srgb,var(--ok) 22%,var(--surface-2));color:var(--ok)}
.mist-row .kv{font:12.5px var(--sans);color:var(--soft);margin:3px 0}
.mist-row .kv b{color:var(--fg)}
.mist-row .tagnote{display:inline-flex;gap:6px;font:10.5px var(--mono);margin-top:6px}
.mist-row .tagnote span{padding:1px 7px;border-radius:6px;border:1px solid var(--line2);color:var(--soft)}

.htmlview-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--surface);flex:none;flex-wrap:wrap}
.htmlview-bar input[type=text]{flex:1;min-width:180px}
.htmlview-frame{flex:1;border:0;background:#fff;width:100%}
.htmlview-wrap{flex:1;position:relative;display:flex;min-height:0}
.htmlview-wrap.zoomed .htmlview-frame{transform-origin:0 0}
/* ===== HTML viewer: folder tree layout ===== */
.htmlview-body{flex:1;display:flex;min-height:0;overflow:hidden}
.html-tree{width:240px;flex:none;border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.html-tree[hidden]{display:none!important}
.html-tree-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none}
.html-tree-head .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.html-tree-head .ibtn.sm{width:24px;height:24px;min-width:24px;min-height:24px;padding:0}
.html-tree-list{flex:1;overflow:auto;padding:6px;min-height:0}
.html-tree-item{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:none;background:none;padding:5px 9px;border-radius:6px;color:var(--fg);cursor:pointer;font:500 12.5px var(--sans);overflow:hidden;min-width:0}
.html-tree-item:hover{background:var(--surface-2)}
.html-tree-item.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.html-tree-item.dir{color:var(--soft);font-weight:600}
.html-tree-item.disabled{opacity:.5;cursor:default}
.html-tree-item.disabled:hover{background:none}
.html-tree-icon{flex:none;width:13px;height:13px;display:inline-flex;align-items:center;justify-content:center;color:var(--soft)}
.html-tree-item.on .html-tree-icon{color:var(--accent)}
.html-tree-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){
  .htmlview-body{flex-direction:column}
  .html-tree{width:100%;border-right:none;border-bottom:1px solid var(--line);max-height:34vh}
}

.ocr-prog{font:12px var(--mono);color:var(--soft);padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);margin-top:8px;display:none}
.ocr-prog.show{display:block}
.ocr-prog .b{height:6px;border-radius:99px;background:var(--surface-3);margin-top:6px;overflow:hidden}
.ocr-prog .b i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}

.nt-badge{font:600 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:6px;border:1px solid var(--line2);color:var(--soft);margin-left:8px}
.dg-legend{position:absolute;left:14px;top:14px;z-index:5;max-width:280px;max-height:calc(100% - 28px);overflow:auto;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:10px;padding:8px;box-shadow:var(--shadow);font:12px var(--sans)}
.dg-legend-title{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:2px 4px 6px}
.dg-legend-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:none;background:none;color:var(--fg);padding:6px 8px;border-radius:7px;cursor:pointer}
.dg-legend-item:hover{background:var(--panel2)}
.dg-legend-item b{font:600 12px var(--sans);color:var(--accent)}
.dg-legend-item span{font:11.5px var(--sans);color:var(--soft);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(max-width:820px){
  .dg-legend{left:auto;right:8px;top:auto;bottom:8px;max-width:60vw;max-height:40vh}
}
.res-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.res-list .cres{padding:16px 18px;margin-top:0}
.res-list .cres:first-child{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
/* ===== Home page: collapsible Study Desk ===== */
#homeDesk{margin:22px auto 6px;max-width:62rem;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 62%,transparent);backdrop-filter:blur(12px);overflow:hidden;text-align:left}
.desk-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;background:none;border:none;color:var(--fg);cursor:pointer;font-family:inherit;text-align:left;transition:background .15s}
.desk-toggle:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.desk-toggle .desk-ico{width:18px;height:18px;flex:none;color:var(--accent)}
.desk-toggle .desk-label{font:600 15px var(--sans);color:var(--fg);flex:none}
.desk-toggle .desk-hint{font:12px var(--sans);color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desk-toggle .desk-chev{width:16px;height:16px;flex:none;color:var(--muted);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
#homeDesk.open .desk-chev{transform:rotate(180deg)}
/* The desk expands and collapses on a real grid track (0fr -> 1fr), so the panel
   animates to its natural height, not a guessed max-height. The inner wrapper
   clips overflow and leaves the tab order + a11y tree when collapsed. */
#homeDesk .desk-body{display:grid;grid-template-rows:0fr;padding:0 18px 0;border-top:1px solid transparent;transition:grid-template-rows var(--dur-base) var(--ease-out),padding var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
#homeDesk.open .desk-body{grid-template-rows:1fr;padding:0 18px 14px;border-top-color:var(--border)}
#homeDesk .desk-inner{min-height:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base) var(--ease-out)}
#homeDesk.open .desk-inner{opacity:1;visibility:visible;transform:none}
#homeDesk .dash-qa{padding:14px 0 0;gap:8px;flex-wrap:wrap}
#homeDeskGrid.dash-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px;padding:14px 0 4px}
@media(max-width:720px){
  #homeDesk{margin:16px auto 4px}
  .desk-toggle .desk-hint{display:none}
  .desk-toggle{padding:12px 14px}
  #homeDesk .desk-body{padding:0 14px 0}
  #homeDesk.open .desk-body{padding:0 14px 12px}
}
/* ===== Hideable study rail ===== */
.shell.rail-hidden .rail{display:none !important}
#railToggle svg{transition:opacity .15s}
.shell.rail-hidden #railToggle svg{opacity:.45}
.shell.rail-hidden #railToggle:hover svg{opacity:1}
/* On phones: the rail starts hidden by default the first time; tap the toggle to reveal. */
@media (max-width:720px){
  .shell.rail-hidden .rail{display:none !important}
}
.nb-banner{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:min(1060px,calc(100% - 24px));margin:10px auto 2px;padding:8px 12px;border:1px solid var(--border,hsla(0,0%,55%,.35));border-radius:12px;background:linear-gradient(135deg,hsla(var(--acc-h,204),var(--acc-s,100%),var(--acc-l,55%),.12),hsla(var(--acc-h,204),var(--acc-s,100%),var(--acc-l,55%),.04));font-size:.82rem}
.nb-banner .nb-crumb{font-weight:600;color:var(--acc-ink,var(--ink,#111))}
.nb-banner .nb-info{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink,#111);opacity:.85}
.nb-banner .nb-info strong{font-weight:600;opacity:1}
/* ============ Connection badge (top bar, far right) ============ */
.net-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font:600 11px var(--mono);letter-spacing:.04em;cursor:pointer;transition:all .18s;flex:none}.net-badge:hover{border-color:var(--border-s);color:var(--fg)}
.net-badge .net-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 22%,transparent);transition:background .18s,box-shadow .18s}
.net-badge .net-text{white-space:nowrap}
.net-badge.offline{border-color:color-mix(in srgb,var(--err) 55%,var(--border));background:color-mix(in srgb,var(--err) 10%,var(--surface-2));color:var(--err)}
.net-badge.offline .net-dot{background:var(--err);box-shadow:0 0 0 2px color-mix(in srgb,var(--err) 28%,transparent);animation:netPulse 1.8s ease-in-out infinite}
.net-badge.recheck{border-color:var(--accent);color:var(--accent)}
.net-badge.recheck .net-dot{background:var(--accent);animation:netSpin .8s linear infinite}
@keyframes netPulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes netSpin{to{transform:rotate(360deg)}}
@media (max-width:720px){
  /* ===== Top navigation: one tight row on phones ===== */
  .top-nav{
    gap:6px;
    padding-left:calc(10px + env(safe-area-inset-left,0px));
    padding-right:calc(10px + env(safe-area-inset-right,0px));
  }
  .brand{font-size:22px;height:52px}
  .brand .brand-back{width:20px;height:20px;margin-right:4px}
  .top-nav .ibtn{width:40px;height:40px;min-width:40px;min-height:40px}
  .top-nav .ibtn svg{width:17px;height:17px}
  .top-nav .net-badge{padding:5px 7px}
  .net-badge .net-text{display:none} /* dot alone on phones */
  .net-badge .net-dot{width:9px;height:9px}
  /* The AI model select flexes so it never squeezes the icons. */
  .ai-model-select{
    flex:1 1 60px;
    min-width:0;
    max-width:140px;
    font-size:11px;
    padding:6px 8px;
  }
  /* ===== Home page: breathe less on a small screen ===== */
  #view-home > div{padding-left:14px !important;padding-right:14px !important}
  .hero-title{font-size:clamp(42px,14vw,60px)}
  .hero-sub{font-size:14px;margin-top:10px}
  .hero-note{font-size:9.5px;letter-spacing:.12em;margin-top:14px}
  .cat-label{margin-top:18px;margin-bottom:8px;font-size:11px}
  /* ===== Tool cards: more room for the title ===== */
  .tool-card{padding:12px;gap:10px;backdrop-filter:none;background:var(--surface)}
  .tool-card .tc-icon{width:34px;height:34px;border-radius:8px}
  .tool-card .tc-icon svg{width:17px;height:17px}
  .tool-card h3{font-size:13px}
  .tool-card p{font-size:10.5px}
  /* No hover-lift on touch ,  use a press state instead. */
  .tool-card:hover{transform:none;border-color:var(--border);background:var(--surface)}
  .tool-card:active{transform:scale(.985);border-color:var(--accent)}
  /* ===== Study view: slim top bar ===== */
  #view-study .topbar{gap:6px;padding:0 8px;min-height:48px}
  #view-study .brand{font-size:16px;padding-bottom:2px}
  #view-study .brand .scrawl{display:none}
  .top-actions .btn{padding:6px 10px;font-size:12px}
  .top-actions .ibtn{width:36px;height:36px;min-width:36px;min-height:36px}
  .top-actions .ibtn svg{width:15px;height:15px}
  .vbar{padding:8px 8px;gap:6px;min-height:46px}
  /* Reader: tighter content padding so pages use the full width */
  #pages{padding:12px 8px 60px}
  .pg{margin-bottom:16px}
  .pg.dx{padding:20px 16px;font-size:14.5px}
  /* ===== Slightly smaller secondary buttons overall ===== */
  .btn.sm{padding:6px 10px;font-size:11.5px}
  /* ===== Dialog: use the full phone width ===== */
  dialog{width:min(560px,96vw);max-height:92vh}
  .dlg-body{max-height:58vh}
}
/* ===== Very narrow phones (Galaxy Fold, small Androids) ===== */
@media (max-width:400px){
  .brand{font-size:20px}
  .brand .brand-back{margin-right:2px}
  .top-nav{gap:4px}
  .top-nav .ibtn{width:38px;height:38px;min-width:38px;min-height:38px}
  .ai-model-select{max-width:110px;font-size:16px;padding:6px 7px}
  .hero-title{font-size:clamp(38px,15vw,54px)}
  .tool-card{padding:10px;gap:8px}
  .tool-card .tc-icon{width:30px;height:30px}
  .tool-card h3{font-size:12.5px}
  .tool-card p{display:none} /* hide the descriptions entirely on the narrowest screens */
}
.chat-nav{position:fixed;top:0;right:0;bottom:0;width:288px;z-index:8000;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);max-width:85vw}
body.chat-overlay .chat-nav{position:absolute;top:50%;transform:translateY(-50%);margin-right:10px;right:10px;width:260px}
.chat-nav-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 15px;border-bottom:1px solid var(--line)}
.chat-nav-title{font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chat-nav-count{font:600 11px var(--mono);color:var(--dim)}
.chat-nav-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;min-height:0}
.chat-nav-item{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:9px 11px;cursor:pointer;transition:border-color .14s,box-shadow .14s,transform .14s}
.chat-nav-item:hover{border-color:var(--line2);box-shadow:0 3px 14px -8px rgba(0,0,0,.4)}
.chat-nav-item:active{transform:scale(.98)}
.chat-nav-led{width:10px;height:10px;border-radius:50%;background:var(--line2);flex:none;box-shadow:0 0 0 1px var(--line)}
.chat-nav-item.user .chat-nav-led{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.chat-nav-snippet{font:13px/1.4 var(--sans);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.chat-nav-role{font:600 10px var(--mono);color:var(--dim);flex:none}
.chat-nav-item.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.chat-nav-item .msg-flash{animation:railFlash .5s ease}
@keyframes railFlash{0%{background:var(--accent)}}60%{background:color-mix(in srgb,var(--accent) 32%,var(--panel2))}100%{background:none}}
.chat-nav-empty{padding:26px 18px;text-align:center;color:var(--dim);font:13px/1.5 var(--sans)}
.chat-nav-toggle{flex:none;border:1px solid var(--line);background:var(--panel2);width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:color .14s,border-color .14s}
.chat-nav-toggle:hover{color:var(--ink);border-color:var(--line2)}
.chat-nav-open .chat-wrap{display:none}body.chat-overlay .chat-wrap{display:flex}
@media(max-width:720px){.chat-nav{display:none}}
/* ===== Notebook save status chip ===== */
#nbSaveChip{
  display:none;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--soft);
  font:600 10.5px var(--mono);
  letter-spacing:.05em;
  cursor:pointer;
  transition:border-color var(--dur-layout),color var(--dur-layout),background var(--dur-layout);
}
#nbSaveChip.on{display:inline-flex}
#nbSaveChip .nb-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ok);
  flex:none;
}
#nbSaveChip.dirty{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));color:var(--warn)}
#nbSaveChip.dirty .nb-dot{background:var(--warn);animation:nbPulse 1.2s ease-in-out infinite}
#nbSaveChip.saving{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent)}
#nbSaveChip.saving .nb-dot{background:var(--accent);animation:nbPulse .8s ease-in-out infinite}
#nbSaveChip.error{border-color:color-mix(in srgb,var(--err) 60%,var(--line));color:var(--err)}
#nbSaveChip.error .nb-dot{background:var(--err);animation:nbPulse .9s ease-in-out infinite}
#nbSaveChip:hover{border-color:var(--accent);color:var(--accent)}
@keyframes nbPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(max-width:720px){
  #nbSaveChip{padding:4px 8px;font-size:9.5px}
  #nbSaveChip .nb-text{display:none}
}
/* ============================================================
   LUMEN UI/UX PATCH ,  Phase 1 + Phase 2 core
   ============================================================ */

/* ---------- Mobile: 16px inputs to prevent iOS focus-zoom ---------- */
@media (max-width: 768px) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ---------- Custom tooltip ---------- */
#lumenTip {
  position: fixed;
  z-index: 1100;
  max-width: 240px;
  padding: 6px 10px;
  background: var(--surface, #1b1b20);
  color: var(--fg, #f3f1ea);
  border: 1px solid var(--border-s, rgba(255,255,255,.12));
  border-radius: 8px;
  font: 500 12px/1.4 'Space Grotesk', system-ui, sans-serif;
  box-shadow: 0 6px 24px -8px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.3);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
#lumenTip.show { opacity: 1; transform: translateY(0); }
#lumenTip span { flex: 1; min-width: 0; }
#lumenTip kbd {
  flex: none;
  font: 600 10px var(--mono, monospace);
  padding: 2px 6px;
  border: 1px solid var(--border-s, rgba(255,255,255,.16));
  border-radius: 4px;
  background: var(--surface-2, #1b1b20);
  color: var(--muted, #8b8794);
}
@media (pointer: coarse) { #lumenTip { display: none; } }

/* ---------- Toast with inline action (undo) ---------- */
.toast button.toast-action {
  margin-left: 4px;
  padding: 3px 10px;
  border: 1px solid var(--accent, #ff5e3a);
  border-radius: 6px;
  background: transparent;
  color: var(--accent, #ff5e3a);
  font: 600 11px 'Space Grotesk', sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--dur-quick);
}
.toast button.toast-action:hover {
  background: var(--accent, #ff5e3a);
  color: var(--accent-ink, #fff);
}

/* ---------- Command palette ----------
   The universal search is the same entrance as every native <dialog>: fade the
   scrim, pop the card, both keyframed (a transition never sees a first frame
   when the element flips from display:none). */
#cpRoot {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; align-items: flex-start; justify-content: center;
  padding: min(15vh, 140px) 16px 16px;
  background-color: rgba(8,7,6,.45);
  backdrop-filter: blur(6px) saturate(.9);
  -webkit-backdrop-filter: blur(6px) saturate(.9);
  animation: backdropIn var(--dur-base) var(--ease-out);
}
.cp-card {
  width: min(640px, 100%);
  background: var(--surface, #15151a);
  border: 1px solid var(--border-s, rgba(255,255,255,.12));
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: min(70vh, 620px);
  animation: dialogIn var(--dur-base) var(--ease-out);
}
.cp-search {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #26262c);
}
.cp-search-icon { font-size: 16px; color: var(--muted, #8b8794); flex: none; }
.cp-search input {
  flex: 1; border: 0; background: transparent; box-shadow: none;
  outline: none; padding: 0; font-size: 16px; color: var(--fg, #f5f3ef);
}
.cp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.cp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out);
}
.cp-item.active { background: var(--surface-3, #222228); }
.cp-label {
  flex: 1; min-width: 0;
  color: var(--fg, #f5f3ef);
  font: 500 14px 'Space Grotesk', sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-sub {
  font: 400 11px var(--mono, monospace);
  color: var(--muted, #8b8794); flex: none;
}
.cp-empty {
  padding: 24px 16px; text-align: center;
  color: var(--muted, #8b8794); font-size: 13px;
}
.cp-hint {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border, #26262c);
  background: var(--surface-2, #1b1b20);
  font: 500 11px var(--mono, monospace);
  color: var(--muted, #8b8794);
}
.cp-hint kbd {
  padding: 1px 5px;
  border: 1px solid var(--border-s, rgba(255,255,255,.16));
  border-radius: 4px;
  background: var(--surface, #15151a);
  font: 600 10px var(--mono, monospace);
  color: var(--fg, #f5f3ef);
}/* ---------- Shortcut help overlay ----------
   Same universal entrance as the palette and every <dialog>. */
#scHelp {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background-color: rgba(8,7,6,.45);
  backdrop-filter: blur(6px) saturate(.9);
  -webkit-backdrop-filter: blur(6px) saturate(.9);
  animation: backdropIn var(--dur-base) var(--ease-out);
}
.sc-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 80vh; overflow-y: auto;
  background: var(--surface, #15151a);
  border: 1px solid var(--border-s, rgba(255,255,255,.12));
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
  animation: dialogIn var(--dur-base) var(--ease-out);
}
.sc-card h3 {
  font: italic 20px var(--serif, Georgia, serif);
  margin-bottom: 14px;
  color: var(--ink, var(--fg));
}
.sc-sec { margin-bottom: 16px; }
.sc-sec h4 {
  font: 600 10px var(--mono, monospace);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted, #8b8794);
  margin-bottom: 8px;
}
.sc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font: 400 13px 'Space Grotesk', sans-serif;
  color: var(--fg, #f5f3ef);
  border-bottom: 1px solid var(--border, #26262c);
}
.sc-row:last-child { border-bottom: 0; }
.sc-row kbd {
  font: 600 10px var(--mono, monospace);
  padding: 2px 6px;
  border: 1px solid var(--border-s, rgba(255,255,255,.16));
  border-radius: 4px;
  background: var(--surface-2, #1b1b20);
  color: var(--fg, #f5f3ef);
  margin-left: 4px;
}
.sc-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  border: 1px solid var(--border, #26262c);
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #8b8794);
  cursor: pointer; font-size: 16px; line-height: 1;
}
.sc-close:hover {
  color: var(--fg, #f5f3ef);
  border-color: var(--border-strong, #3a3a42);
}

/* ---------- Reduced motion clamp ---------- */
@media (prefers-reduced-motion: reduce) {
  #cpRoot, .cp-card, #scHelp, .sc-card, #lumenTip {
    transition-duration: 1ms !important;
    transform: none !important;
  }
}

/* ===== PDF Signer ===== */
.sg-toolbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sg-toolbar .pgnav{display:flex;align-items:center;gap:8px}
.sg-toolbar .pgnav .mono{font:600 12px var(--mono);color:var(--soft);min-width:52px;text-align:center}
.sg-stage{position:relative;display:flex;justify-content:center;padding:18px;background:color-mix(in srgb,var(--surface-2) 55%,transparent);border-top:1px solid var(--line);overflow:auto;max-height:70vh}
.sg-stage canvas{display:block;background:#fff;box-shadow:0 4px 24px -6px rgba(0,0,0,.35);max-width:100%;height:auto}
.sg-overlay{position:absolute;inset:18px;pointer-events:none}
.sg-sig{position:absolute;pointer-events:auto;cursor:move;outline:1.5px dashed transparent;transition:outline-color .12s;user-select:none}
.sg-sig:hover{outline-color:var(--accent)}
.sg-sig.on{outline-color:var(--accent);outline-style:solid}
.sg-sig img,.sg-sig canvas{display:block;width:100%;height:100%;pointer-events:none}
.sg-handle{position:absolute;width:12px;height:12px;background:var(--accent);border:2px solid #fff;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:auto;z-index:2}
.sg-handle[data-h="nw"]{left:-6px;top:-6px;cursor:nwse-resize}
.sg-handle[data-h="ne"]{right:-6px;top:-6px;cursor:nesw-resize}
.sg-handle[data-h="sw"]{left:-6px;bottom:-6px;cursor:nesw-resize}
.sg-handle[data-h="se"]{right:-6px;bottom:-6px;cursor:nwse-resize}
.sg-handle[data-h="del"]{right:-10px;top:-10px;background:var(--err);color:#fff;font:700 10px/1 var(--sans);cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}

/* ===== To-Do ===== */
.td-wrap{max-width:760px;margin:0 auto;padding:22px 20px 60px}
.td-add{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.td-add input[type="text"]{flex:1;font-size:16px}
.td-add select{width:auto;flex:none}
.td-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.td-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);transition:border-color .12s,background .12s}
.td-item:hover{border-color:var(--line2)}
.td-item input[type="checkbox"]{width:17px;height:17px;flex:none;accent-color:var(--accent);cursor:pointer}
.td-item .td-txt{flex:1;min-width:0;word-break:break-word;font:400 14.5px var(--sans);line-height:1.45}
.td-item.done .td-txt{opacity:.5;text-decoration:line-through}
.td-item .td-pri{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dim)}
.td-item .td-pri[data-v="1"]{background:var(--warn)}
.td-item .td-pri[data-v="2"]{background:var(--err)}
.td-item .td-del{margin-left:auto;background:none;border:none;color:var(--dim);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px;border-radius:6px;opacity:0;transition:opacity .12s,color .12s}
.td-item:hover .td-del{opacity:1}
.td-item .td-del:hover{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
.td-empty{text-align:center;padding:34px 12px;color:var(--soft)}
.td-empty[hidden]{display:none!important}

/* ===== Document Generator ===== */
/* Standalone feature (was a Marginalia tab). Fills the view the way the study
   tabs do, so it keeps the full editor height instead of being boxed inside a
   scrolling page body. */
.docgen-body{flex:1;display:flex;min-height:0;padding:0;overflow:hidden}
.dg-gen-split{flex:1;display:grid;grid-template-columns:260px 1fr;min-height:0;overflow:hidden}
.dg-gen-side{width:260px;flex:none;border-right:1px solid var(--line);background:var(--surface);padding:16px 14px;overflow:auto;min-height:0}
.dg-gen-side .lbl{display:block;margin:0 0 8px}
.dg-gen-mode-sel{display:block;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--fg);font:500 13px var(--sans);margin-bottom:10px;outline:none;cursor:pointer}
.dg-gen-mode-sel:focus{border-color:var(--accent)}
.dg-gen-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg);min-height:0}
.dg-gen-hero{padding:16px 22px 12px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent);flex:none}
.dg-gen-hero-top{display:flex;align-items:center;gap:12px}
.dg-gen-title{flex:1;min-width:0;border:none;background:transparent;padding:0;font:italic 22px var(--serif);color:var(--ink);outline:none;box-shadow:none}
.dg-gen-title:focus{box-shadow:none}
.dg-gen-title::placeholder{color:var(--dim);font-style:italic;opacity:.7}
.dg-gen-mode-badge{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:999px;padding:4px 11px;flex:none}
.dg-gen-msgs{flex:1;overflow:auto;padding:18px 22px;min-height:0}
.dg-gen-empty{text-align:center;max-width:440px;margin:6vh auto 0;padding:0 20px}
.dg-gen-empty h3{font:italic 22px var(--serif);margin:8px 0 6px;color:var(--ink)}
.dg-gen-empty p{color:var(--soft);font-size:14px;line-height:1.6;margin:0}
.dg-doc{max-width:780px;margin:0 auto;font-family:var(--read);font-size:15px;line-height:1.75;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 32px;box-shadow:var(--shadow-sm);white-space:pre-wrap;word-break:break-word}
.dg-doc h1,.dg-doc h2,.dg-doc h3{font-family:var(--serif);margin:.9em 0 .4em;line-height:1.2}
.dg-doc p{margin:0 0 .8em}
.dg-doc ul,.dg-doc ol{padding-left:1.4em;margin:.4em 0 .9em}
.dg-doc blockquote{border-left:3px solid var(--accent);padding-left:12px;color:var(--soft);font-style:italic;margin:.6em 0}
.dg-doc code{font:13px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px}
.dg-msg.user{max-width:70%;margin:0 0 18px auto;padding:11px 15px;background:color-mix(in srgb,var(--accent) 14%,var(--surface-2));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));border-radius:12px;border-top-right-radius:5px;font:400 14px var(--sans);color:var(--fg);white-space:pre-wrap}
.dg-msg.ai{margin:0 0 22px;max-width:100%}
.dg-msg.ai .bubble{background:var(--panel);border:1px solid var(--line);border-radius:12px;border-top-left-radius:5px;padding:2px 6px 2px 16px;border-left:2px solid var(--accent)}
.dg-msg.ai .bubble .dg-doc{border:none;background:none;box-shadow:none;padding:16px 0 16px 6px;margin:0}
.dg-msg.typing .bubble::after{content:'';display:inline-block;width:13px;height:13px;border:2px solid color-mix(in srgb,var(--accent) 28%,transparent);border-top-color:var(--accent);border-radius:50%;animation:rspin .7s linear infinite;vertical-align:-2px;margin-left:6px}
.dg-gen-form{padding:14px 22px 16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 82%,transparent);flex:none;max-height:44vh;overflow:auto}
.dg-gen-form-actions{display:flex;align-items:center;gap:12px;margin-top:12px}
.dg-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.dg-form-grid label{display:flex;flex-direction:column;gap:5px;min-width:0}
.dg-form-grid label>span{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.dg-form-grid input,.dg-form-grid textarea,.dg-form-grid select{width:100%;font-size:16px}
.dg-form-grid .span-2{grid-column:span 2}
.dg-gen-composer{padding:12px 22px 14px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);flex:none}
.dg-gen-composer textarea{width:100%;font-size:16px;min-height:52px;max-height:180px;resize:vertical}
.dg-gen-composer-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.dg-gen-exports{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.dg-gen-exports .lbl{flex:none;margin:0}
@media (max-width:820px){
  .dg-gen-split{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .dg-gen-side{width:100%;border-right:none;border-bottom:1px solid var(--line);max-height:38vh;padding:12px}
  .dg-gen-mode-sel{width:100%}
  .dg-form-grid{grid-template-columns:1fr}
  .dg-form-grid .span-2{grid-column:auto}
}
/* ===== Font download / text-pdf quality additions ===== */
.md h5,.md h6{margin:1em 0 .35em;line-height:1.3}
.md h5{font-size:1em;font-weight:600;color:var(--fg)}
.md h6{font-size:.92em;font-weight:600;opacity:.85;color:var(--soft)}
.tp-math,.md .tp-math{font-family:"STIX Two Math","Cambria Math","Latin Modern Math","Noto Sans Math","Segoe UI Symbol",serif;font-variant-numeric:tabular-nums}
.tp-pane-foot{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);font:600 11px var(--mono);letter-spacing:.04em;color:var(--soft)}
.tp-pane-foot .spacer{flex:1}
.tp-pane-foot .btn.sm{padding:4px 10px;font-size:11px}
.tp-pane-foot .tp-page-est{color:var(--accent)}

/* ============================================================
   COMPRESSORS - ported from the retired /compress/* pages into
   first-class app views. Rules copied from the old engine.css;
   token names are shared, so they follow the theme for free.
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(77,187,125,.13);border:1px solid rgba(77,187,125,.3);color:var(--ok);font-size:12px;font-weight:600;letter-spacing:.2px}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;color:var(--fg);text-transform:none;letter-spacing:0;font-weight:400}
.check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.copt-title .dim{color:var(--muted);font-weight:400;font-size:13px}
.copt-opts{display:flex;gap:12px;margin-top:9px;flex-wrap:wrap;align-items:center}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.opts.wide{grid-template-columns:1fr}
.fn{display:flex;flex-direction:column;gap:6px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* compressor views now use the app's .guide/.hint idioms */
.flist{display:flex;flex-direction:column;gap:8px}
.frow img,.frow .ph{width:46px;height:46px;flex:0 0 46px;border-radius:9px;object-fit:cover;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:11px}
.frow .meta{min-width:0;flex:1}
.frow .nm{font:500 13px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .sz{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.frow .tb{display:flex;gap:6px;flex:none}
.icon-btn{width:36px;height:36px;min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:15px;transition:color .15s var(--ease-out),border-color .15s var(--ease-out)}
.icon-btn:hover{color:var(--fg);border-color:var(--border-strong)}
.icon-btn.danger:hover{color:var(--err);border-color:rgba(224,100,90,.4)}
.sbs{position:relative;display:block;width:100%;height:340px;overflow:hidden;border-radius:13px;border:1px solid var(--border);background:var(--surface);cursor:ew-resize;touch-action:none;user-select:none}
.sbs:focus-visible{outline:none;box-shadow:var(--ring-soft)}
.sbs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sbs-b{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.sbs-bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);pointer-events:none}
.sbs-tag{position:absolute;top:8px;font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;pointer-events:none}
.sbs-l{left:8px}
.sbs-r{right:8px}
.delta{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.delta.good{background:rgba(77,187,125,.14);color:var(--ok);border:1px solid rgba(77,187,125,.28)}
.delta.bad{background:rgba(224,100,90,.14);color:var(--err);border:1px solid rgba(224,100,90,.28)}
.delta.same{background:var(--surface-3);color:var(--muted);border:1px solid var(--border)}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.cmp th,.cmp td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--hairline)}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp thead th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.cmp tbody tr.pick{background:rgba(255,94,58,.09)}
.cmp tbody tr.pick td:first-child{box-shadow:inset 2px 0 0 var(--accent);font-weight:600}
.cmp .skipped{color:var(--dim)}
.cmp .warnv{color:var(--warn)}
/* The drop zones wire themselves up with a live file input appended to
   the zone; it must never show a native picker button inside the app. */
.drop input[type=file]{display:none}

/* Every upload rectangle in the app, in every theme:
   a soft panel behind the drop target so the prompt stays legible over
   busy backdrops (most notably the custom wallpaper). Hover and .over keep
   their accent treatment (higher specificity, both still win). */
.drop{
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
/* Legacy note rules gone; .note no longer used anywhere in views. */

.wave{display:block;width:100%;height:90px;padding:10px 0;background:var(--surface-2);border-top:1px solid var(--line)}
.hint b{color:var(--fg);font-weight:600}

/* Touch: keep the todo row's delete action reachable (no hover on touch). */
@media (hover:none), (pointer:coarse){
  .td-item .td-del{opacity:1}
}