/* IBM Plex, shipped with the app (SIL Open Font License, fonts/OFL.txt):
   no request to Google on start, and the same look offline. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

:root{
  --bg:#E9EBEE; --surface:#FFFFFF; --surface-2:#F4F5F7; --surface-3:#EDEFF2;
  --ink:#15171B; --ink-2:#4B515A; --ink-3:#687080;
  --line:#D6DAE0; --line-2:#C2C8D1;
  --accent:#2A4B8D; --accent-soft:#E3E9F6; --on-accent:#FFFFFF;
  --ok:#1B6F47; --warn:#9A6206; --crit:#A63220;
  --ok-bg:#E1F0E8; --warn-bg:#F7EBD6; --crit-bg:#F7E3DF;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  --scale:1;
  --fs:1;              /* content text multiplier — not the same as zoom */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101215; --surface:#181B1F; --surface-2:#1E2227; --surface-3:#23282E;
    --ink:#E7EAEE; --ink-2:#A6ADB8; --ink-3:#8B93A0;
    --line:#2A2F36; --line-2:#363C45;
    --accent:#8AAEFF; --accent-soft:#1C2740; --on-accent:#101215;
    --ok:#5CB98A; --warn:#DDA945; --crit:#E2745E;
    --ok-bg:#16291F; --warn-bg:#2C2415; --crit-bg:#2E1C18;
  }
}
:root[data-theme="dark"]{
  --bg:#101215; --surface:#181B1F; --surface-2:#1E2227; --surface-3:#23282E;
  --ink:#E7EAEE; --ink-2:#A6ADB8; --ink-3:#8B93A0;
  --line:#2A2F36; --line-2:#363C45;
  --accent:#8AAEFF; --accent-soft:#1C2740; --on-accent:#101215;
  --ok:#5CB98A; --warn:#DDA945; --crit:#E2745E;
  --ok-bg:#16291F; --warn-bg:#2C2415; --crit-bg:#2E1C18;
}
:root[data-ground="paper"]{
  --bg:#EFECE5; --surface:#FFFDF8; --surface-2:#F7F4ED; --surface-3:#F1EDE4;
  --line:#DFD8CC; --line-2:#CBC3B4;
}
:root[data-ground="plain"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F4F7; --surface-3:#E9ECF1;
  --line:#C9CFD8; --line-2:#AEB6C2;
}
@media (prefers-color-scheme:dark){
  :root[data-ground="paper"]:not([data-theme="light"]){
    --bg:#15130F; --surface:#1E1B16; --surface-2:#24211B; --surface-3:#2A2620;
    --line:#332E26; --line-2:#413B31;
  }
  :root[data-ground="plain"]:not([data-theme="light"]){
    --bg:#000000; --surface:#131619; --surface-2:#1B1F24; --surface-3:#222730;
    --line:#333A44; --line-2:#454E5B;
  }
}
:root[data-ground="paper"][data-theme="dark"]{
  --bg:#15130F; --surface:#1E1B16; --surface-2:#24211B; --surface-3:#2A2620;
  --line:#332E26; --line-2:#413B31;
}
:root[data-ground="plain"][data-theme="dark"]{
  --bg:#000000; --surface:#131619; --surface-2:#1B1F24; --surface-3:#222730;
  --line:#333A44; --line-2:#454E5B;
}

/* ---------- font ----------
   Every stack ends in a family Windows actually ships, because this app has
   no webfonts: a CDN link would make the UI depend on the network, which is
   the thing the dashboard CDN cache exists to avoid. */
:root[data-font="system"]{
  --sans:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",sans-serif;
}
:root[data-font="serif"]{
  --sans:"Charter","Cambria",Georgia,"Times New Roman",serif;
}
:root[data-font="mono"]{
  --sans:"IBM Plex Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
}

/* ---------- accent ----------
   Light and dark are separate colours, not one colour dimmed: a hue that
   reads as considered on white goes muddy on near-black, and a link has to
   clear contrast against both grounds. Same three-block shape the ground
   presets use, so a preset never leaks across themes. */
:root[data-accent="teal"]{--accent:#0F6259;--accent-soft:#DCEEEB;--on-accent:#FFFFFF}
:root[data-accent="plum"]{--accent:#6B3A7A;--accent-soft:#EFE3F3;--on-accent:#FFFFFF}
:root[data-accent="amber"]{--accent:#8A5A06;--accent-soft:#F7EBD4;--on-accent:#FFFFFF}
:root[data-accent="crimson"]{--accent:#992F3D;--accent-soft:#F7E2E5;--on-accent:#FFFFFF}
:root[data-accent="graphite"]{--accent:#3A4048;--accent-soft:#E5E8EC;--on-accent:#FFFFFF}
@media (prefers-color-scheme:dark){
  :root[data-accent="teal"]:not([data-theme="light"]){--accent:#63CFC0;--accent-soft:#11302C;--on-accent:#101215}
  :root[data-accent="plum"]:not([data-theme="light"]){--accent:#D39BE4;--accent-soft:#2B1B31;--on-accent:#101215}
  :root[data-accent="amber"]:not([data-theme="light"]){--accent:#E4B25A;--accent-soft:#2E2413;--on-accent:#101215}
  :root[data-accent="crimson"]:not([data-theme="light"]){--accent:#EC8494;--accent-soft:#33191E;--on-accent:#101215}
  :root[data-accent="graphite"]:not([data-theme="light"]){--accent:#AEB7C2;--accent-soft:#242931;--on-accent:#101215}
}
:root[data-accent="teal"][data-theme="dark"]{--accent:#63CFC0;--accent-soft:#11302C;--on-accent:#101215}
:root[data-accent="plum"][data-theme="dark"]{--accent:#D39BE4;--accent-soft:#2B1B31;--on-accent:#101215}
:root[data-accent="amber"][data-theme="dark"]{--accent:#E4B25A;--accent-soft:#2E2413;--on-accent:#101215}
:root[data-accent="crimson"][data-theme="dark"]{--accent:#EC8494;--accent-soft:#33191E;--on-accent:#101215}
:root[data-accent="graphite"][data-theme="dark"]{--accent:#AEB7C2;--accent-soft:#242931;--on-accent:#101215}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;
  line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}
h1,h2,h3,h4{margin:0;font-weight:600}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* header */
.top{zoom:var(--scale);flex-shrink:0;display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.brand .logo{width:22px;height:22px;border-radius:5px;display:block}
.brand b{font-size:14px}
.brand span{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase}
.summon{position:relative;flex:1;min-width:160px;max-width:380px}
.summon input{width:100%;padding:5px 10px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:5px;color:var(--ink);font:inherit;font-size:13px;outline:none}
.summon input:focus{border-color:var(--accent)}
.summon input:not(:placeholder-shown){padding-right:28px}
.sclear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;
  border:0;border-radius:4px;background:transparent;color:var(--ink-3);font-size:16px;line-height:1;cursor:pointer}
.sclear:hover{background:var(--line);color:var(--ink)}
.sclear[hidden]{display:none}
.results{position:absolute;left:0;right:0;top:calc(100% + 5px);max-height:60vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:6px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);z-index:60}
.results .hit{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  padding:6px 10px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px}
.results .hit:last-child{border-bottom:0}
.results .hit:hover{background:var(--surface-2)}
.results .hn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.results .hp{grid-column:1/-1;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-4px}
.results .hm{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.seg{display:flex;border:1px solid var(--line-2);border-radius:5px;overflow:hidden;flex-shrink:0}
.seg button{font-size:13px;padding:4px 10px;color:var(--ink-2);background:var(--surface)}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.hbtn{font-size:13px;padding:4px 9px;border:1px solid var(--line-2);border-radius:5px;
  color:var(--ink-2);background:var(--surface);flex-shrink:0}
.hbtn:hover{color:var(--accent);border-color:var(--accent)}
.stat{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}

/* layout — every pane is user-resizable, so sizes are flex weights in vars */
:root{
  --cL:1.30; --cM:1.55; --cR:0.85;   /* the three columns */
  --lTop:1.9; --lBot:1.0;            /* left column, top / bottom */
  --rTop:1.7; --rBot:1.0;            /* right column, top / bottom */
}
.grid{zoom:var(--scale);flex:1;min-height:0;display:flex;flex-wrap:wrap;
  align-items:stretch;padding:10px 14px 12px}
.col{min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px}
/* The grid wraps (the right column drops below under 1300px), and a wrapping
   row is as tall as its tallest column's CONTENT — so a long Nudges list made
   every column taller than the window and pushed Activity off the bottom.
   Size containment keeps a column's content out of that sum: the columns
   share the window and each panel scrolls inside itself. Not in the one-
   column layout under 900px, where the page is meant to scroll. */
@media (min-width:901px){.col{contain:size}}
/* the right column hidden from the top bar: the other two take its width */
body.rhide #colR,body.rhide .vsplit[data-vs="1"]{display:none}
body.lhide #colL,body.lhide .vsplit[data-vs="0"]{display:none}
#lcolBtn{margin-right:4px}
#rcolBtn{margin-right:6px}
#rcolBtn[aria-pressed="true"],#lcolBtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
#colL{flex:var(--cL) 1 0}
#midCol{flex:var(--cM) 1 0;gap:0}
#colR{flex:var(--cR) 1 0}
/* A size belongs to the slot, not the panel — swap two panels and each takes
   the room the other had. */
[data-slot="lTop"]{flex:var(--lTop) 1 0}
[data-slot="lBot"]{flex:var(--lBot) 1 0}
[data-slot="rTop"]{flex:var(--rTop) 1 0}
[data-slot="rBot"]{flex:var(--rBot) 1 0}

/* moving panels — drag a head onto another panel to swap the two */
[data-slot] > .exp-head,[data-slot] > .panel-head,.notepane > .ctx{cursor:grab}
body.moving,body.moving *{cursor:grabbing!important;user-select:none!important}
.block-src{opacity:.45}
.block-drop{outline:2px solid var(--accent);outline-offset:-2px}

/* drag handles */
.vsplit,.hsplit{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  touch-action:none;position:relative}
.vsplit{width:11px;cursor:col-resize;align-self:stretch}
.hsplit{height:10px;cursor:row-resize}
.vsplit::before{content:"";width:3px;height:42px;border-radius:2px;background:var(--line-2)}
.hsplit::before{content:"";height:3px;width:42px;border-radius:2px;background:var(--line-2)}
.vsplit:hover::before,.hsplit:hover::before,
.vsplit.dragging::before,.hsplit.dragging::before{background:var(--accent)}
.vsplit.dragging::before{height:100%}
.hsplit.dragging::before{width:100%}
body.resizing{cursor:col-resize;user-select:none}
body.resizing-v{cursor:row-resize;user-select:none}
body.resizing *,body.resizing-v *{user-select:none!important}

@media (max-width:1300px){
  #colR{flex-basis:100%;flex-grow:1;min-height:220px;margin-top:8px}
  .vsplit[data-vs="1"]{display:none}
}
@media (max-width:900px){
  html,body{height:auto}
  body{overflow:auto;display:block}
  .grid{display:block;padding:10px 12px 24px}
  .col{margin-bottom:10px}
  .vsplit,.hsplit,#midCol > .psplit{display:none}
  /* In the columns, a panel's height is its share of the column (flex, on a
     basis of nothing). Here the column is as tall as what is in it, so a
     share of it is nothing, and every panel closed to a line — the window
     snapped to half a screen showed a header and a blank page. One column:
     each panel is as tall as its content, up to a limit, and the page
     scrolls. !important, because a note pane carries its share inline. */
  .col > [data-slot],.col > .panel,#midCol > .notepane{flex:0 0 auto!important}
  #midCol{gap:8px}
  #explorer{max-height:400px}
  #dashPanel,#srcPanel{max-height:340px}
  /* the graph has no content height of its own to go by */
  #loosePanel{height:min(72vh,480px)}
  #midCol > .notepane{min-height:320px;max-height:78vh}
}

/* filters */
.bar{flex-shrink:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.bar .lab{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.f{font-size:12px;color:var(--ink-2);border:1px solid var(--line-2);border-radius:12px;
  padding:2px 9px;background:var(--surface);display:flex;align-items:center;gap:5px}
.f:hover{border-color:var(--accent);color:var(--accent)}
.f b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-3)}
.f[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.f[aria-pressed="true"] b{color:var(--on-accent);opacity:.75}

/* shared chips */
.cat{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border-radius:3px;padding:1.5px 5px;white-space:nowrap;flex-shrink:0}
button.cat{cursor:pointer;border:0}
button.cat:hover{outline:1px solid var(--accent)}
.pill{font-family:var(--mono);font-size:11px;padding:1.5px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0}
.pill.live,.pill.st-wip{background:var(--ok-bg);color:var(--ok)}
.pill.waiting,.pill.st-wait{background:var(--warn-bg);color:var(--warn)}
.pill.stalled{background:var(--crit-bg);color:var(--crit)}
.pill.st-new{background:var(--accent-soft);color:var(--accent)}
.pill.st-hold{background:var(--surface-3);color:var(--ink-2)}
.pill.st-closed{background:none;color:var(--ink-3);border:1px solid var(--line-2)}
.tr.closed .tname{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line-2)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--warn);flex-shrink:0;display:inline-block}
.slot{font-family:var(--mono);font-size:8px;color:var(--on-accent);background:var(--accent);
  border-radius:2px;padding:0 3px;flex-shrink:0}

/* explorer */
.explorer{background:var(--surface);border:1px solid var(--line);border-radius:6px;
  display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
.exp-head{flex-shrink:0;display:flex;align-items:center;gap:5px;padding:6px 9px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.exp-head h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);flex:1}
.ico{font-size:13px;line-height:1;color:var(--ink-3);padding:2px 5px;border-radius:4px;flex-shrink:0}
.ico:hover{color:var(--accent);background:var(--accent-soft)}
.tree{flex:1;min-height:0;overflow-y:auto;padding:3px 0 8px}
.tr{display:flex;align-items:center;gap:6px;padding:3px 9px 3px 0;font-size:calc(13px * var(--fs));
  cursor:pointer;border-left:2px solid transparent;position:relative}
.tr:hover{background:var(--surface-2)}
.tr.open{background:var(--accent-soft)}
.tr.focusin{border-left-color:var(--accent)}
.tr.dragover-in{background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.tr.dragover-before::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent)}
.tw{width:13px;flex-shrink:0;text-align:center;color:var(--ink-3);font-size:11px}
.tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr.folder .tname{font-weight:600}
.tr.folder.top .tname{font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2)}
.sdot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--line-2)}
.sdot.live{background:var(--ok)} .sdot.waiting{background:var(--warn)} .sdot.stalled{background:var(--crit)}
.tmeta{font-family:var(--mono);font-size:11px;color:var(--ink-3);flex-shrink:0;font-variant-numeric:tabular-nums}
.tacts{display:none;gap:1px;flex-shrink:0}
.tr:hover .tacts{display:flex}
.tacts button{font-size:12px;line-height:1;color:var(--ink-3);padding:1px 4px;border-radius:3px}
.tacts button:hover{color:var(--accent);background:var(--surface)}
.tacts button.del:hover{color:var(--crit);background:var(--crit-bg)}
.tr input.ren{flex:1;min-width:0;font:inherit;font-size:13px;padding:1px 4px;
  border:1px solid var(--accent);border-radius:3px;background:var(--surface);color:var(--ink);outline:none}
.exp-foot{flex-shrink:0;padding:5px 9px;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  background:var(--surface-2);border-top:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* panels + tables */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;min-height:0}
.panel.grow{flex:1}
/* Panels sit in either column now, so a head has to survive the narrow one:
   it stays on one line and the title gives up width before the controls do. */
.panel-head{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:7px 10px;
  border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:nowrap}
.panel-head h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Inheriting the body font makes these taller than the title they sit beside,
   so every panel head ends up a different height. Size them here instead. */
.panel-head .fold{white-space:nowrap;flex-shrink:0;font-size:12px;line-height:1.5;
  padding:0;color:var(--ink-3)}
.panel-head .fold:hover{color:var(--accent)}
.panel-head .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:auto}
.panel-body{min-height:0;overflow-y:auto;flex:1}
.rows{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;width:100%}
.rows-head,.drow{display:grid;grid-template-columns:minmax(80px,1.6fr) 96px 46px 52px 26px;
  gap:8px;align-items:center;padding:4px 9px}
.rows-head{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);border-bottom:1px solid var(--line)}
.drow{border-bottom:1px solid var(--line);font-size:calc(12px * var(--fs));cursor:pointer;border-left:2px solid transparent;position:relative}
.drow:last-child{border-bottom:0}
.drow:hover{background:var(--surface-2);border-left-color:var(--accent)}
.dn{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:3px;padding:1px 4px;justify-self:start;white-space:nowrap}
.dk.build{color:var(--warn);border-color:var(--warn)}
.dk.rel{color:var(--accent);border-color:var(--accent)}
.du,.dz{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;text-align:right}
.dashrows{border:0;border-radius:0}

/* ---------- sources ---------- */
.srcrow{padding:9px 10px;border-bottom:1px solid var(--line)}
.srcrow .arowbtn{font-size:13px}
.srcrow:hover .arowbtn{opacity:.75}

/* ---------- Sources section heads ---------- */
.areahead{display:flex;align-items:center;gap:7px;padding:7px 10px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.areahead .fold{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap}
.areahead .fold+.fold{margin-left:0}
.areahead .fold:hover{color:var(--accent)}
/* Pin and hide stay out of the way until you are on the row, like the
   dashboard control — the list is for reading first. */
.arowbtn{font-size:12px;line-height:1;color:var(--ink-3);opacity:0;padding:0;
  background:none;border:0;transition:opacity .12s,color .12s}
.arow:hover .arowbtn,.srcrow:hover .arowbtn,.arowbtn:focus-visible{opacity:.75}
.arowbtn.pin:hover{color:var(--accent);opacity:1}
.arowbtn.hide:hover{color:var(--crit);opacity:1}
.arow.pinned .arowbtn.pin{opacity:.8;color:var(--accent)}
.pintag{color:var(--accent);font-size:8px;margin-right:5px;vertical-align:1px}

/* ---------- graph settings ---------- */
/* .linkmenu caps at 196px and scrolls as one piece, which is right for a
   completion list and wrong here: six categories clipped the heading. That
   rule comes later in this file, so these need .linkmenu.gset to win. The
   panel's height is set where it opens (openGraphSettings), from the room
   under the button; the heading and the reset stay put and only the list
   of names between them scrolls. */
.linkmenu.gset{padding:0;gap:0;max-height:none;overflow:hidden}
.gset > *{flex-shrink:0}
.gset > .gsbody{flex:1 1 auto;min-height:0;overflow-y:auto}
.gshead{border-bottom:1px solid var(--line-2)}
.gshead .gmtitle{border-bottom:0}
/* Name on the left, the whole palette on the right: ten swatches fit across
   the panel, and one click beats a swatch that opens another picker. */
.gsrow{display:flex;align-items:center;gap:10px;padding:6px 10px;
  border-bottom:1px solid var(--line)}
.gsbody .gsrow:last-child{border-bottom:0}
.gsname{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsw{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;flex-shrink:0;width:187px}
.cpsw{height:16px;border-radius:3px;border:0;padding:0;opacity:.8}
.cpsw:hover{opacity:1}
/* the colour in use: a ring clear of the swatch, so it reads on any hue */
.cpsw.on{opacity:1;box-shadow:0 0 0 1.5px var(--surface),0 0 0 3px var(--ink)}
.gset .lrow{border-radius:0;justify-content:center;color:var(--ink-3);font-size:12px;padding:7px;
  border-top:1px solid var(--line-2)}

/* ---------- new note ---------- */
/* .modal.nnmodal, not .nnmodal: the base .modal rule comes later in the file
   and, at equal weight, won — every small dialog opened 680px wide. */
.modal.nnmodal{width:min(440px,92vw);height:auto}
/* status dialog */
.stpick{display:flex;border:1px solid var(--line-2);border-radius:5px;overflow:hidden}
.stpick button{flex:1;padding:7px 8px;font-size:13px;color:var(--ink-2)}
.stpick button+button{border-left:1px solid var(--line-2)}
.stpick button:hover{color:var(--accent)}
.stpick button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.stpick button:disabled{color:var(--ink-3);opacity:.5;cursor:not-allowed}
.stwait{display:flex;flex-direction:column;gap:11px}
.stwait[hidden]{display:none}
button.pill{border:0;cursor:pointer;line-height:inherit}
button.pill:hover{outline:1px solid currentColor}
.nnbody{padding:13px 14px;display:flex;flex-direction:column;gap:11px}
.nnfield{display:flex;flex-direction:column;gap:4px}
.nnfield span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.nnfield input,.nnfield select{font:inherit;font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:5px;
  padding:6px 9px;outline:none;width:100%}
.nnfield input:focus,.nnfield select:focus{border-color:var(--accent)}
/* The categories to choose from, all in view: two or three across, each with
   its graph colour and the number of notes in it. Past about eight rows the
   list scrolls inside its box, and the dialog stays the size it is. */
.catlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;
  max-height:288px;overflow-y:auto;padding:5px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--surface-2)}
.catrow{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 9px;text-align:left;
  font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:5px}
.catrow i{flex-shrink:0;width:10px;height:10px;border-radius:50%}
.catrow b{flex:1;min-width:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catrow em{flex-shrink:0;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.catrow:hover{border-color:var(--accent);color:var(--accent)}
.catrow[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--accent)}
.catrow[aria-checked="true"] b{font-weight:600}
/* Show the path before it is written: which folder a note lands in is the
   whole point of asking, so it should not be a guess. */
.nnhint{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-height:12px}

/* ---------- search preview ---------- */
.preview{width:min(760px,92vw);height:min(70vh,640px)}
.pvmeta{flex-shrink:0;display:flex;flex-direction:column;gap:2px;padding:7px 11px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.pvpath{font-family:var(--mono);font-size:11px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvfacts{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.pvbody{flex:1;min-height:0;overflow:auto;background:var(--surface)}
/* Monospaced and wrapped: these are notes, logs and CSVs, and horizontal
   scrolling to read a line is worse than a ragged right edge. */
.pvtext{margin:0;padding:11px 13px;font-family:var(--mono);font-size:12px;line-height:1.6;
  color:var(--ink);white-space:pre-wrap;word-break:break-word}
.pvfoot{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:6px 11px;
  border-top:1px solid var(--line);background:var(--surface-2)}
.pvfoot .fold{font-size:12px;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:4px;padding:2.5px 10px;background:var(--surface)}
.pvfoot .fold:hover{color:var(--accent);border-color:var(--accent)}
.pvfoot .fold.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pvfoot .fold.primary:hover{color:var(--on-accent);opacity:.9}
.pvhint{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.pvforce{margin-top:4px;color:var(--warn);border:1px solid var(--warn);
  border-radius:4px;padding:3px 10px;font-size:12px;background:none}
.pvforce:hover{background:var(--warn-bg)}

/* ---------- Add-a-dashboard picker ---------- */
.dpbar{display:flex;align-items:center;gap:7px;padding:7px 11px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.dpbar input{flex:1;min-width:0;font:inherit;font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:3px 8px;outline:none}
.dpbar input:focus{border-color:var(--accent)}
.dpbar .fold{font-size:12px;color:var(--ink-3);white-space:nowrap;flex-shrink:0}
.dpbar .fold:hover{color:var(--accent)}
/* Title on top, path underneath: two dashboards often share a title and the
   path is the only thing that tells them apart. */
.picker .pn em{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.picker .prow.cand .pn{white-space:normal;line-height:1.3}

/* Hiding is reversible and the file is never touched, so the control stays
   quiet: visible only on the row you are pointing at. It floats over the CDN
   cell rather than taking a column of its own, because a permanent lane for a
   hover-only button costs every dashboard name 24px of width. */
.dhide{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  font-size:14px;line-height:1;color:var(--ink-3);display:none;padding:0 4px;
  background:var(--surface-2);border:0;transition:color .12s}
.drow:hover .dhide,.dhide:focus-visible{display:block}
.dhide:hover{color:var(--crit)}
.dadded{font-family:var(--mono);font-size:11px;color:var(--accent);margin-right:4px}
.hiddenrow{cursor:default;color:var(--ink-3)}
.hiddenrow .dn{font-weight:400}
.dshow{font-family:var(--mono);font-size:11px;color:var(--ink-3);border:1px solid var(--line-2);
  border-radius:3px;padding:1px 6px;background:var(--surface);white-space:nowrap}
.dshow:hover{color:var(--accent);border-color:var(--accent)}
.fold.on{color:var(--accent);border-color:var(--accent)}
.fold[hidden]{display:none}
.sec-head{flex-shrink:0;display:flex;align-items:baseline;gap:7px}
.sec-head h2{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.sec-head .n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.sec-head .act{margin-left:auto;font-size:12px;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:4px;padding:1px 7px;background:var(--surface)}
.sec-head .act:hover{color:var(--accent);border-color:var(--accent)}

/* note panes */
#midCol{gap:0}
.notepane{min-height:0;transition:border-color .14s}
.notepane.focus{border-color:var(--accent)}
.notepane.focus .ctx{background:var(--accent-soft)}
/* gutter between note panes */
.psplit{flex:0 0 auto;height:10px;cursor:row-resize;display:flex;align-items:center;
  justify-content:center;touch-action:none}
.psplit::before{content:"";width:46px;height:3px;border-radius:2px;background:var(--line-2)}
.psplit:hover::before,.psplit.dragging::before{background:var(--accent);width:100%}

/* ---------- mind map: a note read as a tree ---------- */
/* The bar stays put and the map scrolls under it, both ways: a long note
   makes a tall map and a deep one a wide map, and neither should be squeezed. */
.mmbody{display:flex;flex-direction:column;min-height:0;padding:0;overflow:hidden}
.mmbar{flex-shrink:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:6px 10px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.mmbar button{font-size:12px;padding:2px 9px;border:1px solid var(--line-2);border-radius:5px;
  color:var(--ink-2);background:var(--surface);line-height:1.5}
.mmbar button:hover:not([disabled]){border-color:var(--accent);color:var(--accent)}
.mmbar button[disabled]{opacity:.4;cursor:default}
.mmzoom{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.mmzoom button{padding:0 7px}
.mmstat{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.mmscroll{flex:1;min-height:0;overflow:auto;background:var(--surface)}
.mmsvg{display:block}
.mmlink{fill:none;stroke-width:1.6;stroke-linecap:round;opacity:.8}
.mmnode text{fill:var(--ink-2);white-space:pre}
.mmnode.d1 text{fill:var(--ink)}
.mmnode.d0 text{fill:var(--on-accent)}
.mmroot{fill:var(--accent)}
.mmhit{fill:transparent}
.mmdot{stroke-width:1.6}
/* A branch with something under it folds on a click, and says so. */
.mmnode.can{cursor:pointer}
.mmnode.can:hover text{fill:var(--accent)}

/* per-pane menu, Obsidian style */
.panemenu{position:relative;flex-shrink:0}
.panemenu .ctxbtn{font-size:14px;line-height:1;padding:0 6px}
.pmenu{position:absolute;right:0;top:calc(100% + 5px);min-width:148px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.18);
  z-index:55;overflow:hidden;display:flex;flex-direction:column}
.pmenu[hidden]{display:none}
.pmenu button{text-align:left;padding:7px 11px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.pmenu button:hover:not([disabled]){background:var(--accent-soft);color:var(--accent)}
.pmenu button[disabled]{opacity:.4;cursor:default}
.pmenu button+button{border-top:1px solid var(--line)}
.ctx{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:7px 10px;
  background:var(--surface-2);border-bottom:1px solid var(--line);flex-wrap:wrap;transition:background .14s}
.ctx .cn{font-weight:600;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.savest{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.savest.on{color:var(--ok)}
.ctxbtn{font-size:11px;color:var(--ink-3);padding:1px 7px;border-radius:4px;
  border:1px solid var(--line-2);background:var(--surface);flex-shrink:0}
.ctxbtn:hover{color:var(--accent);border-color:var(--accent)}
.newnote{font-size:11px;color:var(--ink-2);padding:1.5px 8px;border-radius:4px;
  border:1px solid var(--line-2);background:var(--surface);flex-shrink:0}
.newnote:hover{color:var(--accent);border-color:var(--accent)}

/* Every note is editable where it sits, so none of them is styled as "the
   editor". They are identical blocks; the only one that looks different is
   the one you are actually in, which gets the accent rule and its footer. */
.notes li.note{gap:3px}
.notes li.note:focus-within{background:var(--surface);box-shadow:inset 2px 0 0 var(--accent)}
.notes li.note textarea{width:100%;border:0;background:none;color:var(--ink);font:inherit;
  font-size:calc(13px * var(--fs));line-height:1.55;padding:0;resize:none;outline:none;
  display:block;min-height:20px;overflow:hidden}
.notes li.note.fresh textarea{min-height:58px}
.notes li.note textarea::placeholder{color:var(--ink-3)}

/* Live checkboxes: the text is drawn by .nmirror underneath; the text box on
   top keeps the caret and selection but shows no text of its own. */
.notes li.note{position:relative}
.notes li.note textarea.mirrored{position:relative;z-index:1;color:transparent;caret-color:var(--ink)}
.nmirror{position:absolute;z-index:0;pointer-events:none;color:var(--ink);
  font:inherit;font-size:calc(13px * var(--fs));line-height:1.55;
  white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word}
.notes li.note.reading .nmirror{display:none}
.nmirror .mk{position:relative;color:transparent}
.nmirror .cb{position:absolute;left:0;top:50%;transform:translateY(-50%);width:11px;height:11px;
  border:1.5px solid var(--ink-3);border-radius:3px;background:var(--surface)}
.nmirror .cb.on{background:var(--accent);border-color:var(--accent)}
.nmirror .cb.on::after{content:"";position:absolute;left:3px;top:0;width:3px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.nmirror .dn{color:var(--ink-3);text-decoration:line-through}

/* Attach and Discard belong to one note, so they appear only for the note
   with the caret in it. Otherwise a file of ten notes is a wall of buttons. */
.ed-foot{display:none;align-items:center;gap:5px;padding:3px 0 0;flex-wrap:wrap}
.notes li.note:focus-within .ed-foot{display:flex}
.ed-foot button{font-size:12px;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:4px;padding:2.5px 9px;background:var(--surface)}
.ed-foot button:hover{color:var(--accent);border-color:var(--accent)}
.ed-foot button:disabled{opacity:.4;cursor:default}
.linknote{margin-left:auto}
.assign{width:100%;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:2px}
.chipf{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:3px;padding:1.5px 6px;color:var(--ink-2)}
.notes{list-style:none;margin:0;padding:0}
.notes li{padding:8px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.notes li:last-child{border-bottom:0}
.nhead{display:flex;align-items:center;gap:7px}
.ntime{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nbody{font-size:13px;line-height:1.55;white-space:pre-wrap}
.nfiles{display:flex;gap:5px;flex-wrap:wrap}
.nmeta{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:auto}
.empty{padding:13px 10px;font-size:13px;color:var(--ink-3);line-height:1.5}
.pathbar{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:5px 10px;
  background:var(--surface-2);border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.pathbar[hidden]{display:none}
.pathbar b{color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pathbar button{font-size:11px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:3px;padding:0 5px}
.pathbar button:hover{color:var(--accent);border-color:var(--accent)}

/* modal */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.34);display:flex;align-items:center;
  justify-content:center;z-index:80;padding:24px}
.modal{background:var(--surface);border:1px solid var(--line-2);border-radius:8px;width:min(540px,100%);
  max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.3)}
.modal header{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line)}
.modal header h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);flex:1}
.crumb{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:5px 12px;
  border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker{flex:1;min-height:0;overflow-y:auto}
.picker .prow{display:grid;grid-template-columns:16px 1fr auto auto;gap:8px;align-items:center;
  padding:5px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px}
.picker .prow:hover{background:var(--surface-2)}
.modal.foldermodal{width:min(440px,94vw)}
.picker .prow .fold{font-size:11px;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:4px;padding:0 8px;background:var(--surface)}
.picker .prow .fold:hover{color:var(--accent);border-color:var(--accent)}
.picker .pi{color:var(--ink-3);font-size:11px}
.picker .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker .pm{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.cloudtag{font-family:var(--mono);font-size:11px;color:var(--warn);border:1px solid var(--warn);
  border-radius:3px;padding:0 4px}
.sharedwarn{padding:6px 12px;font-size:12px;color:var(--warn);background:var(--warn-bg);
  border-bottom:1px solid var(--line)}

/* setup */
.setwrap{position:relative;flex-shrink:0}
.setpanel{position:absolute;right:0;top:calc(100% + 6px);width:270px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.16);z-index:70;overflow:hidden}
.setpanel h4{padding:7px 11px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);border-bottom:1px solid var(--line)}
.setrow{padding:9px 11px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.setrow:last-child{border-bottom:0}
.setrow .sl{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.setrow .sl b{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:400}
.optrow{display:flex;gap:4px}
.optrow button{font-size:12px;padding:3px 0;border:1px solid var(--line-2);border-radius:4px;
  color:var(--ink-2);background:var(--surface);flex:1}
.optrow button:hover{border-color:var(--accent);color:var(--accent)}
.optrow button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* A colour is easier to pick by looking at it than by reading its name, so
   the accent row shows the colour itself and keeps the name as the label. */
.optrow.swatches button{height:20px;background:var(--sw);border-color:transparent;
  color:transparent;position:relative}
.optrow.swatches button:hover{border-color:var(--ink-3)}
.optrow.swatches button[aria-pressed="true"]{background:var(--sw);border-color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--surface)}
/* The font row previews each option in the font it selects. */
.optrow.fonts button[data-v="system"]{font-family:system-ui,"Segoe UI",sans-serif}
.optrow.fonts button[data-v="plex"]{font-family:"IBM Plex Sans",system-ui,sans-serif}
.optrow.fonts button[data-v="serif"]{font-family:"Charter",Cambria,Georgia,serif}
.optrow.fonts button[data-v="mono"]{font-family:"IBM Plex Mono",Consolas,monospace;font-size:11px}

#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:var(--bg);font-size:13px;padding:8px 15px;border-radius:5px;
  opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:90;
  max-width:calc(100vw - 32px);text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* loose ends */
.loose{list-style:none;margin:0;padding:0}
.loose li{display:flex;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);align-items:flex-start}
.loose li:last-child{border-bottom:0}
.loose .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;cursor:pointer}
.loose .lt{font-size:calc(13px * var(--fs));line-height:1.4}
.loose .lm{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.src{font-family:var(--mono);font-size:11px;padding:1px 5px;border-radius:3px;
  background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.age{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.age.hot{color:var(--crit)}
.why{font-size:12px;color:var(--ink-3);line-height:1.4}
.dismiss{font-size:14px;line-height:1;color:var(--ink-3);padding:1px 5px;border-radius:4px;flex-shrink:0}
.dismiss:hover{color:var(--crit);background:var(--crit-bg)}
.results .hs{grid-column:1/-1;font-size:12px;color:var(--ink-2);line-height:1.4;margin-top:-2px}
.results .kindtag{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:3px;padding:0 4px}

.resetlayout{width:100%;font-size:12px;color:var(--ink-3);padding:3px 0;
  border:1px dashed var(--line-2);border-radius:4px}
.resetlayout:hover{color:var(--accent);border-color:var(--accent)}

/* App items at the foot of the ⚙ panel: it is the app's menu too. */
.setpanel{max-height:calc(100vh - 70px);overflow-y:auto}
.setsep{height:4px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.setrow[hidden],.setquit[hidden]{display:none}
.setbtns{display:flex;gap:4px}
.setquit{display:block;width:100%;padding:8px 11px;text-align:left;font-size:12px;color:var(--crit);
  background:var(--surface-2)}
.setquit:hover{background:var(--crit-bg)}
/* keyboard shortcuts / about */
.keys{width:100%;border-collapse:collapse;font-size:13px}
.keys td{padding:5px 0;border-bottom:1px solid var(--line);vertical-align:top}
.keys td:first-child{width:42%;padding-right:10px;white-space:nowrap}
.keys th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding:12px 0 4px}
.keys tr:first-child th{padding-top:0}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-bottom-width:2px;
  border-radius:3px;padding:0 4px;background:var(--surface-2);color:var(--ink-2)}
.about dt{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-top:9px}
.about dd{margin:2px 0 0;font-size:13px;word-break:break-all}
.about dt:first-child{margin-top:0}
.about dd.prose{word-break:normal;line-height:1.5}
.aboutacts{display:flex;gap:6px;margin-top:8px}

/* ---------- graph panel ---------- */
/* Two titles where there used to be one. The inactive tab reads as a heading
   rather than a button, so the panel head stays quiet until you use it. */
.panel-head .tab{cursor:pointer;color:var(--ink-3);padding-bottom:1px;
  border-bottom:1.5px solid transparent;transition:color .12s,border-color .12s}
.panel-head .tab:hover{color:var(--ink-2)}
.panel-head .tab.on{color:var(--ink);border-bottom-color:var(--accent)}
/* count badge on a tab (Nudges) */
.panel-head .tab .tabn{margin-left:5px;display:inline-block;min-width:16px;padding:0 5px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:600;line-height:16px;text-align:center;vertical-align:1px}
.panel-head .tab .tabn[hidden]{display:none}

.tabbody{display:flex;flex-direction:column;min-height:0}
/* display:flex beats the user-agent [hidden] rule, so say it again here or
   both tabs render at once. */
.tabbody[hidden]{display:none}
.gtools{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:5px 10px;
  border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap;row-gap:4px}
.gtools > *{flex-shrink:0}
.gtools label{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  display:flex;align-items:center;gap:4px}
.gtools select{font:inherit;font-size:11px;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}
/* The buttons wrap to a second row in a narrow panel rather than run off its
   edge. The count never takes a row of its own: it shrinks and trims on the
   last one, and the full figures are in its tooltip. */
.gtools > .gstat{flex:1 1 0;min-width:0;text-align:right}
.gstat{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The background is draggable, so it says so. touch-action:none stops the
   browser claiming the gesture for scrolling before the handler sees it. */
.gwrap{flex:1;min-height:0;overflow:hidden;position:relative;background:var(--surface);
  cursor:grab;touch-action:none}
.gwrap.panning{cursor:grabbing}
.gwrap svg{width:100%;height:100%;display:block;touch-action:none}

/* Edges sit behind and stay quiet: the shape of the cluster is the message,
   not any one line. currentColor lets a hover dim the whole layer at once. */
/* Halfway from the hairline colour to the faint-text one: firm enough to
   follow across the panel, on any ground, without competing with the dots. */
.gwrap{--gedge:color-mix(in srgb,var(--ink-3) 55%,var(--line-2))}
.gedge{stroke:var(--gedge);stroke-width:1;opacity:.9}
.gedge.dim{opacity:.13}
/* The arrowhead says which note mentions which; it dims with its line. */
.garrow{fill:var(--gedge)}

.gnode{cursor:grab}
.gwrap.panning .gnode{cursor:grabbing}
/* plain dots: no outline, halo or pinned ring */
.gnode .gdot{stroke:none;transition:opacity .12s}
/* A dot you placed is a deeper shade of its colour (lighter on dark), so you
   can tell what the simulation still controls from what you have decided. */
:root{--gpin:brightness(.68) saturate(1.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--gpin:brightness(1.45) saturate(1.2)}}
:root[data-theme="dark"]{--gpin:brightness(1.45) saturate(1.2)}
.gnode.pinned .gdot{filter:var(--gpin)}
.gnode.dim{opacity:.22}
.glabel{font-family:var(--mono);font-size:7.5px;fill:var(--ink-2);text-anchor:middle;
  paint-order:stroke;stroke:var(--surface);stroke-width:2.5px;pointer-events:none}
.gnode.anchor .glabel{fill:var(--ink);font-size:8px;font-weight:600}

/* An empty note pane: what it is for, and a way to fill it right here. */
.pstart{padding:18px 18px 14px;max-width:560px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.pstart h5{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--ink)}
.pstart p{margin:0 0 10px}
.pstart b{color:var(--ink);font-weight:600}
.pquick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.pquick input{flex:1 1 220px;min-width:0;font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:4px;padding:6px 9px}
.pquick input:focus{outline:none;border-color:var(--accent)}
.pquick select{font:inherit;font-size:12px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:4px;padding:5px 6px;max-width:170px}
.precent{display:flex;flex-direction:column;gap:3px;margin:0 0 12px}
.precent button{display:flex;align-items:baseline;gap:8px;text-align:left;font:inherit;font-size:13px;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:5px 9px;cursor:pointer}
.precent button:hover{border-color:var(--accent);color:var(--accent)}
.precent em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.phint{font-size:12px;color:var(--ink-3)}
/* Buttons in the first-run surfaces: a .fold is only a word until its
   container gives it a box. */
.pquick .fold,.apbar .fold,.aboutacts .fold,.ghint .fold{font-size:12.5px;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:4px;padding:5px 12px;background:var(--surface);white-space:nowrap;cursor:pointer}
.pquick .fold.primary,.apbar .fold.primary,.aboutacts .fold.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pquick .fold:disabled{opacity:.6}

/* The empty state carries the feature when there is nothing to draw yet. */
.gempty{padding:14px 12px;font-size:13px;line-height:1.6;color:var(--ink-2);
  overflow-y:auto;height:100%}
.gempty p{margin:0 0 9px}
.gempty code{font-family:var(--mono);font-size:12px;background:var(--surface-3);
  border:1px solid var(--line-2);border-radius:3px;padding:0 3px;color:var(--ink)}
/* Dots but no lines: the notes still show, with how to join them on top. */
.ghint{position:absolute;left:8px;right:8px;bottom:8px;max-height:45%;overflow-y:auto;
  padding:8px 28px 8px 11px;font-size:12px;line-height:1.5;color:var(--ink-2);cursor:auto;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.ghint p{margin:0}
.ghint .gsuggest:not(:empty){margin-top:8px}
.ghx{position:absolute;top:4px;right:6px;border:0;background:none;color:var(--ink-3);
  font-size:16px;line-height:1;padding:2px 4px;cursor:pointer}
.ghx:hover{color:var(--ink)}
.ghint code{font-family:var(--mono);font-size:12px;background:var(--surface-3);
  border:1px solid var(--line-2);border-radius:3px;padding:0 3px;color:var(--ink)}
.ghow{border-left:3px solid var(--accent);padding:4px 0 4px 10px;margin:4px 0 8px}
.ghowline{font-size:13px;color:var(--ink)}
.gwl{color:var(--accent);font-family:var(--mono);font-size:12px}
.ghowcap{font-size:12px;color:var(--ink-3);margin-top:3px}
.gsuggest{margin-top:4px;display:flex;flex-direction:column;gap:3px}
.gsughead{font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.gsug{display:flex;align-items:center;gap:6px;width:100%;text-align:left;font-size:12px;
  color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;padding:3.5px 8px}
.gsug:hover{color:var(--accent);border-color:var(--accent)}
.gsug span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* ---------- [[ autocomplete ---------- */
.linkmenu{position:fixed;z-index:60;max-height:196px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:6px;
  box-shadow:0 8px 26px rgba(0,0,0,.17);padding:3px;display:flex;flex-direction:column;gap:1px}
.linkmenu[hidden]{display:none}
.lrow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-size:13px;
  color:var(--ink-2);background:none;border:0;border-radius:4px;padding:4px 7px}
.lrow span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.lrow.on,.lrow:hover{background:var(--surface-3);color:var(--ink)}
/* The create row is an action, not a search hit, so it reads differently and
   its right-hand column names the folder rather than a link count. */
.lrow.mk{color:var(--accent)}
.lrow.mk b{font-weight:600}
.lrow.mk span{font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.lrow.mk+.lrow{border-top:1px solid var(--line)}

/* ---------- graph node menu ---------- */
.gmenu{padding:0}
.gmtitle{padding:7px 9px;border-bottom:1px solid var(--line);font-size:13px;
  font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmtitle em{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  font-style:normal;font-weight:400;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin-top:2px}
.gmenu .lrow{border-radius:0;padding:6px 9px}
.gmenu .lrow.warn{color:var(--crit)}
.gmenu .lrow.warn:hover{background:var(--crit-bg)}
.gmenu .lrow:disabled{color:var(--ink-3);cursor:default;background:none}

/* dialogs move by their title bar */
.mask > .modal > header{cursor:move}

/* linked folder and related links — chips in the pane head */
.pill.flink{background:var(--surface-3);color:var(--ink-2);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.pill.flink.hot{background:var(--accent-soft);color:var(--accent)}
.pill.flink.gone{background:var(--crit-bg);color:var(--crit)}
.pill.rlink{display:inline-flex;align-items:center;gap:2px;padding:0;background:var(--surface-3);color:var(--ink-2);max-width:200px}
.pill.rlink button{font:inherit;color:inherit;padding:1.5px 2px 1.5px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pill.rlink button+button{padding:1.5px 5px 1.5px 2px;color:var(--ink-3)}
.pill.rlink button+button:hover{color:var(--crit)}

/* renaming a note file from its pane title */
.ctx .cn .cren{width:100%;font:inherit;font-weight:600;font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--accent);border-radius:4px;padding:1px 5px;outline:none}

/* ---------- Ask ---------- */
.askbody{flex:1;min-height:0}
.asktools{flex-wrap:wrap}
.askscope button{font-size:12px;padding:2px 8px}
.askhint{flex-shrink:0;display:flex;gap:8px;justify-content:space-between;padding:4px 10px;
  font-size:12px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.askhint span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.askwho{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.asklog{flex:1;min-height:0;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.am{font-size:calc(13px * var(--fs));line-height:1.5;overflow-wrap:anywhere}
.am.user{align-self:flex-end;max-width:88%;background:var(--accent-soft);color:var(--ink);
  padding:5px 9px;border-radius:8px 8px 2px 8px}
.am.bot{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:6px 9px}
.am.divider{align-self:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.am.note{font-size:13px;color:var(--ink-2)}
.am.err{font-size:13px;color:var(--crit);background:var(--crit-bg);padding:5px 8px;border-radius:5px}
.athink{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.asteps{margin:0 0 4px;padding-left:16px;font-size:12px;color:var(--ink-3)}
.asteps:empty{display:none}
.asteps li.ok::marker{color:var(--ok)}
.asteps li.bad{color:var(--crit)}
.atext h5{margin:8px 0 3px;font-size:1em}
.atext p{margin:0 0 5px}
.atext ul,.atext ol{margin:0 0 5px;padding-left:18px}
.atext code{font-family:var(--mono);font-size:.9em;background:var(--surface-3);padding:0 3px;border-radius:3px}
.atext .mdtable{font-family:var(--mono);font-size:11px;overflow-x:auto;margin:0 0 5px;white-space:pre}
.ameta{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:3px}
.ameta:empty{display:none}
.aacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px;padding-top:5px;border-top:1px solid var(--line)}
.aacts[hidden]{display:none}
.aacts .fold,.am .fold{font-size:12px;color:var(--accent)}
.aacts .fold:disabled{color:var(--ok);cursor:default}
.askquick{flex-shrink:0;display:flex;flex-wrap:wrap;gap:5px;padding:5px 10px 0}
.askquick button{font-size:12px;color:var(--ink-2);border:1px solid var(--line-2);border-radius:10px;padding:1px 8px}
.askquick button:hover{color:var(--accent);border-color:var(--accent)}
.askin{flex-shrink:0;display:flex;gap:6px;align-items:flex-end;padding:6px 10px 8px}
.askin textarea{flex:1;min-width:0;resize:vertical;min-height:38px;max-height:180px;font:inherit;font-size:13px;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:5px 8px;outline:none}
.askin textarea:focus{border-color:var(--accent)}
.askin .fold.primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
  border-radius:5px;padding:5px 12px;font-size:13px}
.askin .fold.primary.stop{background:var(--crit);border-color:var(--crit)}
.aichk{display:flex;gap:7px;align-items:baseline;font-size:13px;color:var(--ink-2)}
.aichk small{color:var(--ink-3)}
.aichk[hidden]{display:none}
#aiDirRow[hidden]{display:none}
.asaved{color:var(--ink-3)}
.aiclear{align-self:flex-start;font-size:12px;color:var(--crit)}
.aiprivacy{font-family:var(--sans);font-size:12px;line-height:1.45}

/* ---------- redesign: structure (review L1, L3, B1, B3, B4) ---------- */
.topsp{flex:1;min-width:0;display:flex;justify-content:center;overflow:hidden}
/* The slogan sits in the middle of the window (.mid, set by placeSlogan in
   app.js while it clears the search box); when it would not, it falls back
   into the gap between search and settings, and drops out when the bar is
   too narrow to hold it at all. */
.top{position:relative}
.slogan{font-size:12.5px;font-style:italic;letter-spacing:.02em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slogan.mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
@media (max-width:760px){.slogan{display:none}}
/* one icon-button shape everywhere: 28px square, line icon inside */
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:block}
.ibtn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--ink-2);flex-shrink:0}
.ibtn:hover{background:var(--accent-soft);color:var(--accent)}
/* an icon that is a switch, switched on (the mind map) */
.ctx .ibtn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.ibtn.pclose:hover{background:var(--crit-bg);color:var(--crit)}
.hbtn.ibtn,.ctxbtn.ibtn{border:1px solid var(--line-2);background:var(--surface)}
.hbtn.ibtn:hover,.ctxbtn.ibtn:hover{border-color:var(--accent);background:var(--accent-soft)}
.exp-head .ibtn{width:26px;height:26px}
.exp-head .ibtn svg.i{width:15px;height:15px}
/* the filters and the Tree/Flat switch sit with the list they act on */
.wbtools{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:7px 9px;border-bottom:1px solid var(--line)}
.wbtools .bar{flex:1;min-width:0}
.wbtools #viewSeg{flex-shrink:0}
/* Sources is as tall as what it lists */
#srcPanel[data-slot]:not(.sized){flex:0 1 auto;max-height:55%}
/* Sources folded to its head: the other panel in the column fills, and the
   gutter between them has nothing to resize */
#srcPanel[data-slot].min,#dashPanel[data-slot].min,#explorer[data-slot].min{flex:0 0 auto}
#srcPanel.min #sources,#dashPanel.min .panel-body,#explorer.min .wbtools,#explorer.min .tree{display:none}
#explorer.min .exp-head{border-bottom:0}
#srcPanel.min .panel-head,#dashPanel.min .panel-head{border-bottom:0}
#srcPanel .calchev{margin-left:4px;width:24px;height:24px}
#srcPanel .calchev svg{transition:transform .15s}
#srcPanel.min .calchev svg,#dashPanel.min .calchev svg,#explorer.min .calchev svg{transform:rotate(-90deg)}
#dashPanel .calchev,#explorer .calchev{width:24px;height:24px}
/* a file or link being dragged over Pinned */
#dashPanel.dropping{outline:2px dashed var(--accent);outline-offset:-3px}
#dashPanel .calchev{margin-left:4px}
#dashPanel .calchev svg,#explorer .calchev svg{transition:transform .15s}
.hsplit:has(+ #srcPanel.min),#srcPanel.min + .hsplit,
.hsplit:has(+ #dashPanel.min),#dashPanel.min + .hsplit,
.hsplit:has(+ #explorer.min),#explorer.min + .hsplit{pointer-events:none;visibility:hidden}
.hsplit[hidden]{display:none}

/* ---------- redesign: type and colour (review F1, F2, C2, C3) ----------
   One scale: 11 meta · 12 buttons and panel titles · 13 rows · 14 note
   text · 15 pane titles. Nothing below 11px. */
.panel-head h3,.exp-head h3{font-size:12px;letter-spacing:.06em;font-weight:600}
.panel-head .tab{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}
.ctx .cn{font-size:15px}
.gtools .fold{font-size:12px;padding:2px 9px;border:1px solid var(--line-2);border-radius:5px;
  color:var(--ink-2);background:var(--surface);line-height:1.5}
.gtools .fold:hover{border-color:var(--accent);color:var(--accent)}
.gtools .fold.ibtn{border:0;background:none;padding:0}
.gtools label{font-family:var(--sans);font-size:12px;text-transform:none;letter-spacing:0}
.gtools select{font-size:12px}
/* list rows: open in a pane = faint tint; focused = stronger tint, bar and a
   filled badge — the same blue as the focused pane */
:root{--accent-tint:color-mix(in srgb,var(--accent-soft) 50%,var(--surface))}
.tr.open{background:var(--accent-tint)}
.tr.focusin{background:var(--accent-soft);border-left-color:var(--accent)}
.tr.focusin .tname{font-weight:500}
.slot{font-size:10px;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;padding:0 3px;background:var(--surface);color:var(--accent);border:1px solid var(--line-2)}
.tr.focusin .slot{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* "a note is in progress" is a neutral ring; amber and red mean status only */
.dot{width:7px;height:7px;background:none;border:1.5px solid var(--ink-3)}
.tr .pill{font-size:11px;padding:0 7px;border-radius:9px}
/* graph labels (review F3, F4, C1): a fixed 12px on screen, regular sans;
   only the note in the focused pane is bold. Wiki notes are grey dots. */
:root{--gwiki:#B9B2A4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--gwiki:#5E6570}}
:root[data-theme="dark"]{--gwiki:#5E6570}
.glabel{font-family:var(--sans);font-size:calc(var(--gk,1) * 12px * var(--fs,1));font-weight:400;fill:var(--ink-2)}
.gnode.anchor .glabel{font-family:var(--sans);font-size:calc(var(--gk,1) * 12px * var(--fs,1));font-weight:400;fill:var(--ink)}
.gnode.sel .glabel{font-weight:600}
/* every dot carries its name; only those marked .lab show it, so a hover can
   reveal one without redrawing the graph */
.gnode:not(.lab) .glabel{display:none}
/* the note a "This note" graph is drawn around */
.gnode.centre .gdot{stroke:var(--ink);stroke-width:1.5}
/* a search or status-filter match: no ring (dots stay plain), just a firmer label */
.gnode.hit .glabel{font-weight:600}
/* dashboards (review B5): name · size · age; the unusual kind and any CDN
   use ride after the name as small tags instead of taking a column each */
.dashrows .rows-head,.dashrows .drow{grid-template-columns:minmax(80px,1fr) 64px 48px 18px}
.drow .dn{display:flex;align-items:center;gap:6px;min-width:0}
.drow .dn .dt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.drow .dk{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;font-weight:400;
  border:0;border-radius:9px;padding:0 7px;flex-shrink:0}
.drow .dk.rel{background:var(--accent-soft);color:var(--accent)}
.drow .dk.build{background:var(--warn-bg);color:var(--warn)}
.drow .dk.net{background:var(--warn-bg);color:var(--warn)}
.rows-head{font-family:var(--sans);letter-spacing:.05em}
/* Sources: section labels sit left, Add sits right */
.areahead .nmeta{margin-left:0}

/* resize handles you can find: a darker, longer grip, and the whole edge
   lights up in the accent colour under the pointer */
.vsplit::before{width:4px;height:56px;background:color-mix(in srgb,var(--ink-3) 55%,transparent)}
.hsplit::before{height:4px;width:56px;background:color-mix(in srgb,var(--ink-3) 55%,transparent)}
.vsplit:hover::before{height:100%;background:var(--accent)}
.hsplit:hover::before{width:100%;background:var(--accent)}
.psplit::before{height:4px;width:56px;background:color-mix(in srgb,var(--ink-3) 55%,transparent)}
.psplit:hover::before,.psplit.dragging::before{background:var(--accent);width:100%}

/* ---------- Activity calendar strip ---------- */
.calstrip{flex:0 0 auto;margin-top:8px}
.calstrip .panel-head{min-height:0}
.calstrip .calchev{margin-left:4px;width:24px;height:24px}
.calstrip .calchev svg{transition:transform .15s}
.calstrip.min .calchev svg{transform:rotate(-90deg)}
.calstrip.min .cal{display:none}
.calstrip.min .panel-head{border-bottom:0}
/* the totals sit in the heading; the arrow stays at the far right */
.calstrip #calSum{margin-left:auto}
.cal{padding:8px 12px 9px;overflow:hidden}
.calbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
/* Week: one row of the Month squares, larger; today marked, days to come outlined */
.calsvg text.cwd{font-size:10.5px;fill:var(--ink-3)}
.calsvg text.cwn{font-size:12px;fill:var(--ink-2);font-weight:500}
.calsvg text.cwd.today{fill:var(--accent);font-weight:700}
.calsvg text.cwd.future{opacity:.5}
.cwfut{fill:none;stroke:var(--line-2);stroke-dasharray:3 3}
.calweek .cd{cursor:pointer}
.calseg button{font-size:11px;padding:1px 8px}
.calsvg{display:block}
.calsvg text{font-family:var(--sans);font-size:10.5px;fill:var(--ink-3)}
/* five shades from the accent, so they follow Setup's accent and theme */
.cd.l0,.csw.l0{fill:color-mix(in srgb,var(--ink-3) 14%,var(--surface));background:color-mix(in srgb,var(--ink-3) 14%,var(--surface))}
.cd.l1,.csw.l1{fill:color-mix(in srgb,var(--accent) 28%,var(--surface));background:color-mix(in srgb,var(--accent) 28%,var(--surface))}
.cd.l2,.csw.l2{fill:color-mix(in srgb,var(--accent) 52%,var(--surface));background:color-mix(in srgb,var(--accent) 52%,var(--surface))}
.cd.l3,.csw.l3{fill:color-mix(in srgb,var(--accent) 76%,var(--surface));background:color-mix(in srgb,var(--accent) 76%,var(--surface))}
.cd.l4,.csw.l4{fill:var(--accent);background:var(--accent)}
.cd{cursor:pointer;stroke:transparent;stroke-width:1.4}
.cd:hover,.cd.sel{stroke:var(--ink)}
.ce{fill:var(--surface);pointer-events:none}
.calfoot{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:5px;font-size:11px;color:var(--ink-3)}
.csw{width:11px;height:11px;border-radius:2.5px;flex-shrink:0}
.caltip{position:fixed;z-index:80;pointer-events:none;background:#23262B;color:#F0F2F5;font-size:12px;
  padding:5px 9px;border-radius:6px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.caltip[hidden]{display:none}
.calday{position:fixed;z-index:81;width:340px;max-height:340px;overflow:auto;background:var(--surface);
  border:1px solid var(--line-2);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.18);font-size:13px}
.calday header{position:sticky;top:0;display:flex;align-items:center;padding:8px 10px 8px 12px;
  border-bottom:1px solid var(--line);background:var(--surface-2);font-weight:600}
.calday header .ctxbtn{margin-left:auto}
.calday h6{margin:8px 12px 3px;font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.calday .cit{display:block;width:100%;text-align:left;padding:4px 12px}
.calday .cit:hover{background:var(--accent-tint)}
.calday .cit b{font-weight:500}
.calday .cit small{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:6px}
.calday .cit span{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calday .cnone{padding:3px 12px 8px;font-size:12px;color:var(--ink-3)}

/* ---------- setup screen (first run, and Setup → Folders…) ---------- */
.setupmask.first{background:var(--bg)}
.modal.setupmodal{width:min(600px,94vw)}
.suintro{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}
.surow{display:flex;gap:8px;align-items:center}
.surow input{flex:1;min-width:0}
.subrowse{border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.subrowse[hidden]{display:none}
.subar{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.supath{flex:1;min-width:0;font-family:var(--mono);font-size:11px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sulist{max-height:190px;overflow:auto;padding:3px 0}
.sulist button{display:block;width:100%;text-align:left;padding:4px 10px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sulist button:hover{background:var(--accent-tint)}
.setupmodal .aichk small{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:4px}
.setsel{font:inherit;font-size:12px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;max-width:170px}
/* the setup dialog scrolls in the middle, so its buttons are always on screen */
.setupmodal{max-height:92vh;display:flex;flex-direction:column}
.setupmodal .nnbody{overflow:auto;min-height:0;flex:1}
.setupmodal .pvfoot{flex-shrink:0}
.setupmodal .aichk{justify-content:flex-start;text-align:left;align-items:center}
.setupmodal .aichk input{width:auto;flex:0 0 auto;margin:0}
.setupmodal .nnfield .aichk small{text-transform:none;letter-spacing:0}
.pvfoot .fold.primary{white-space:nowrap}

/* Folders: what saving would do, shown before it is done */
.supreview{border:1px solid var(--line-2);border-radius:6px;padding:8px 10px;font-size:12.5px;line-height:1.5;
  color:var(--ink-2);background:var(--surface);display:flex;flex-direction:column;gap:4px}
.supreview[hidden]{display:none}
.supreview code{font-size:11.5px;word-break:break-all}
.supreview .suwarn{color:var(--warn);font-weight:500}

/* Buttons inside dialogs and the Sources rows look like buttons: Browse…,
   ↑ Up, Use this folder, Change… were plain text before and read as labels. */
.surow .fold,.subar .fold,.srcrow .fold{font-size:12px;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:4px;padding:2.5px 10px;background:var(--surface);white-space:nowrap;flex-shrink:0}
.surow .fold:hover,.subar .fold:hover,.srcrow .fold:hover{color:var(--accent);border-color:var(--accent)}
.subar .fold.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.subar .fold.primary:hover{color:var(--on-accent);opacity:.9}
.subar .supath{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sulist button{cursor:pointer}
.sulist button::after{content:"›";float:right;color:var(--ink-3)}
.suhint{font-size:11px;color:var(--ink-3);padding:4px 10px 6px}
.sulist .cnone{padding:6px 10px;font-size:12px;color:var(--ink-3)}

/* Pinned panel: link and file tags, and the "what to pin" chooser */
.drow .dk.pin{background:var(--surface-3);color:var(--ink-2)}
.pinchoice{gap:8px}
.pinchoice button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  padding:10px 12px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface)}
.pinchoice button:hover{border-color:var(--accent)}
.pinchoice button b{font-size:13px;font-weight:600;color:var(--ink)}
.pinchoice button small{font-size:12px;color:var(--ink-3)}
/* a link has no size or age, so its name takes that room */
.dashrows .drow.wide .dn{grid-column:1 / span 3}
.rmsample{align-self:flex-start;font-size:12px;color:var(--accent)}
.rmsample[hidden]{display:none}

/* Theme studio: form on the left, the real template previewed on the right */
.modal.studio{width:min(1240px,96vw);max-height:94vh;display:flex;flex-direction:column}
.studiobody{display:grid;grid-template-columns:340px 1fr;gap:0;min-height:0;flex:1;overflow:hidden}
.studioform{display:flex;flex-direction:column;gap:12px;padding:14px;overflow:auto;border-right:1px solid var(--line)}
.studioframe{width:100%;height:min(70vh,720px);border:0;background:#fff}
.tscolours{display:flex;gap:16px}
.tscolours label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.tscolours code{font-size:11px;color:var(--ink-2);text-transform:none}
.tscolours input[type=color],.tspalette input[type=color]{width:44px;height:30px;padding:0;border:1px solid var(--line-2);border-radius:5px;background:none;cursor:pointer}
.tspalette{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.tspalette input[type=color]{width:100%}
.tsreset{float:right;font-size:11px;color:var(--accent);text-transform:none;letter-spacing:0}
.tschecks{display:flex;flex-direction:column;gap:4px;font-size:12px}
.tscheck{display:flex;align-items:baseline;gap:6px;color:var(--ink-2)}
.tscheck small{color:var(--ink-3)}
.tscheck .tsmark{width:12px;font-weight:700}
.tscheck.ok .tsmark{color:var(--ok)}
.tscheck.bad .tsmark{color:var(--crit)}
.tscheck.warn .tsmark{color:var(--warn)}
.tscheck .fold{margin-left:auto;font-size:11px;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:0 7px}
#tsMsg.err{color:var(--crit)}
@media (max-width:900px){.studiobody{grid-template-columns:1fr}.studioform{border-right:0}}
#aiVerRow[hidden]{display:none}

/* Images in notes: thumbnails under the entry, full size on click */
.nimgs{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 8px}
.nimgs[hidden]{display:none}
.nimg{max-width:220px;max-height:140px;border:1px solid var(--line);border-radius:5px;cursor:zoom-in;background:var(--surface-2);object-fit:contain}
.nimg:hover{border-color:var(--accent)}
#imgmask .imgview{max-width:94vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:zoom-out}
#imgmask .imgview img{max-width:94vw;max-height:86vh;object-fit:contain;background:#fff;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
#imgmask .imgcap{font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* New dashboard from a spreadsheet */
.modal.sheetmodal{width:min(720px,94vw);max-height:92vh;display:flex;flex-direction:column}
.sheetmodal .nnbody{overflow:auto}
/* in a scrolling column, nothing may shrink — squeezed text overlaps the next row */
.sheetmodal .nnbody>*{flex-shrink:0}
#smSheetRow[hidden],.smpropose[hidden],.smreview[hidden],.smlook[hidden]{display:none}
.smpropose{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.smpropose .nnhint{flex-basis:100%}
.smpropose .fold,.smjson .fold{font-size:12px;border:1px solid var(--line-2);border-radius:4px;padding:3px 10px;background:var(--surface)}
.smpropose .fold.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.smpropose .fold:disabled{opacity:.5;cursor:not-allowed}
.smreview{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.smhead{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-top:6px}
.smhead small{text-transform:none;letter-spacing:0}
.smrow{display:grid;grid-template-columns:18px 1fr minmax(120px,auto);gap:8px;align-items:center}
.smrow .smlabel{font-size:13px;padding:3px 6px;border:1px solid transparent;border-radius:4px;background:none;color:var(--ink)}
.smrow input.smlabel:hover,.smrow input.smlabel:focus{border-color:var(--line-2);background:var(--surface)}
.smfig{font-size:13px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.smfig small{color:var(--ink-3);margin-left:4px}
.smjson summary{font-size:12px;color:var(--accent);cursor:pointer;margin-top:6px}
.smjson textarea{width:100%;height:220px;font-family:var(--mono);font-size:11px;margin:6px 0}
.smlook{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.smerr,#smMsg.err{color:var(--crit)}

/* ---- the editor (CodeMirror) ----
   Set to read like the text box it stands in for: same type, same line
   height, no frame of its own. The Markdown is coloured by what it is, and
   its marks (# ** > - `) are dimmed, so the words come first. */
.notes li.note textarea.cmhidden{display:none}
.notes li.note.reading .cm-editor{display:none}
.notes li.note .cm-editor{font-size:calc(13px * var(--fs));line-height:1.55;color:var(--ink);background:none}
.notes li.note .cm-editor.cm-focused{outline:none}
.notes li.note .cm-scroller{font-family:inherit;line-height:inherit;overflow:visible}
.notes li.note .cm-content{padding:0;min-height:20px;caret-color:var(--ink);tab-size:4}
.notes li.note.fresh .cm-content{min-height:58px}
.notes li.note .cm-line{padding:0}
.notes li.note .cm-placeholder{color:var(--ink-3)}
.cm-editor .cmh{font-weight:600}
.cm-editor .cmh1{font-size:1.5em}.cm-editor .cmh2{font-size:1.32em}.cm-editor .cmh3{font-size:1.17em}.cm-editor .cmh4{font-size:1.06em}
.cm-editor .cmb{font-weight:600}
.cm-editor .cmi{font-style:italic}
.cm-editor .cms{text-decoration:line-through;color:var(--ink-2)}
.cm-editor .cml,.cm-editor .cm-wl,.cm-editor .cm-wl .cmm{color:var(--accent)}
.cm-editor .cmc{font-family:var(--mono);font-size:.9em}
.cm-editor .cmq{color:var(--ink-2)}
.cm-editor .cmm,.cm-editor .cmx{color:var(--ink-3);font-weight:400;font-style:normal;text-decoration:none}
.cm-editor .cm-hl{background:#ffe58a;color:#1c1c1c;border-radius:2px}
.cm-editor .cm-task{display:inline-block;position:relative;width:11px;height:11px;margin:0 6px 0 1px;vertical-align:-1px;
  border:1.5px solid var(--ink-3);border-radius:3px;background:var(--surface);cursor:pointer}
.cm-editor .cm-task.on{background:var(--accent);border-color:var(--accent)}
.cm-editor .cm-task.on::after{content:"";position:absolute;left:3px;top:0;width:3px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cm-editor .cm-done{color:var(--ink-3);text-decoration:line-through}
/* Live preview: off the caret's line the marks are gone, and what they mean
   is drawn instead, as the reading view draws it. */
.cm-editor .cm-bullet{color:var(--ink-2);display:inline-block;min-width:.7em}
.cm-editor .cm-rule{display:inline-block;width:100%;height:0;vertical-align:middle;border-top:1px solid var(--line)}
.notes li.note .cm-line.cm-quoteline{border-left:3px solid var(--line-2);padding-left:10px;color:var(--ink-2)}
.notes li.note .cm-line.cm-codeline{font-family:var(--mono);font-size:12px;background:var(--surface-3);padding:0 10px}
.cm-editor .cmc{background:var(--surface-3);border-radius:3px;padding:0 2px}
.cm-editor .cm-codeline .cmc{background:none;padding:0}

/* ---- formatting in notes ----
   An entry you are not in shows formatted (.reading); the one you are in is
   the editor with its toolbar. */
.notes li.note .nread{display:none}
.notes li.note.reading .nread{display:block}
.notes li.note.reading textarea,.notes li.note.reading .nimgs{display:none}
.nread{font-size:calc(13px * var(--fs));line-height:1.55;color:var(--ink);cursor:text;overflow-wrap:anywhere}
.nread p{margin:0}
/* one blank line in the source, as tall as one line of text */
.nread .nbl{height:1.55em}
.nread .nbl + .nh{margin-top:0}
.nread ul,.nread ol{margin:2px 0 6px;padding-left:22px}
.nread li{margin:1px 0}
.nread li.task{list-style:none;margin-left:-18px}
.nread li.task input{margin:0 5px 0 0;vertical-align:-1px;cursor:pointer;accent-color:var(--accent)}
.nread li.task.done{color:var(--ink-3);text-decoration:line-through}
.nread .nh{margin:8px 0 4px;font-weight:600;line-height:1.3}
/* # to ######, each its own size, as in Obsidian. A ## line starts a new
   dated entry once saved, so h2 is only seen until then. */
.nread h1.nh{font-size:1.5em}.nread h2.nh{font-size:1.32em}.nread h3.nh{font-size:1.17em}
.nread h4.nh{font-size:1.06em}.nread h5.nh{font-size:1em}.nread h6.nh{font-size:.94em;color:var(--ink-2)}
/* An indented line keeps its indent, as wide as it is in the editor. */
.nread p{white-space:pre-wrap}
.nread,.nmirror,.notes li.note textarea{tab-size:4}
.nread blockquote{margin:4px 0;padding:2px 10px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.nread code{font-family:var(--mono);font-size:.9em;background:var(--surface-3);padding:0 4px;border-radius:3px}
.nread pre.ncode{font-family:var(--mono);font-size:12px;background:var(--surface-3);padding:8px 10px;border-radius:5px;overflow:auto;margin:4px 0}
.nread mark{background:#ffe58a;color:#1c1c1c;padding:0 2px;border-radius:2px}
.nread hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.nread a.wl,.nread a.xl{color:var(--accent);text-decoration:none;cursor:pointer}
.nread a.wl:hover,.nread a.xl:hover{text-decoration:underline}
.nread .ninline{display:block;max-width:100%;max-height:360px;margin:6px 0;border:1px solid var(--line);border-radius:5px;cursor:zoom-in;background:var(--surface-2)}
/* A ```mermaid block, drawn. It keeps to the pane's width — a wide diagram
   shrinks to fit, and scrolls sideways only if shrinking is not enough —
   and sits on the note's own ground so it reads as part of the page. */
.nread .nmmd{margin:6px 0;overflow-x:auto}
.nread .nmmd.done:not(.bad){padding:8px 4px;border:1px solid var(--line);border-radius:6px;background:var(--surface);text-align:center}
.nread .nmmd svg{max-width:100%;height:auto}
.nread .nmmderr{font-family:var(--mono);font-size:11px;color:var(--crit);white-space:pre-wrap;margin:2px 0 4px}
.nread table.ntable{border-collapse:collapse;margin:4px 0;font-size:.95em}
.nread .ntable th,.nread .ntable td{border:1px solid var(--line);padding:3px 8px;text-align:left}
.nread .ntable th{background:var(--surface-2);font-weight:600}
.nempty{color:var(--ink-3);font-style:italic}
.notes li.note.reading:hover{background:color-mix(in srgb,var(--surface) 60%,transparent)}

/* the toolbar: only on the entry you are in */
.ntools{display:none;align-items:center;gap:1px;margin-left:10px;position:relative}
.notes li.note:focus-within:not(.reading) .ntools{display:inline-flex}
/* The toolbar of the entry you are writing in stays at the top of the pane
   while that entry is on screen: a long entry used to carry it out of sight,
   and Bold was a scroll away from the line you wanted bold. It takes over
   the row's own padding (the negative margin and the padding cancel, so
   nothing moves) to be a solid strip the text passes under, and redraws the
   accent rule it would otherwise cover. */
.notes li.note:focus-within:not(.reading) .nhead{position:sticky;top:0;z-index:5;
  margin:-8px -10px -3px;padding:8px 10px 3px;background:var(--surface);
  box-shadow:inset 2px 0 0 var(--accent),0 1px 0 var(--line)}
.ntools button{min-width:24px;height:22px;padding:0 5px;border-radius:4px;font-size:12px;color:var(--ink-2);line-height:1}
.ntools button:hover{background:var(--surface-3);color:var(--ink)}
.ntools .tsep{width:1px;height:14px;background:var(--line-2);margin:0 4px}
.ntools .tmark{background:#ffe58a;color:#1c1c1c;padding:0 2px;border-radius:2px}
.ntools .tcol{color:#d64545;font-weight:700}
.ncolours{position:absolute;top:24px;right:0;z-index:30;display:flex;gap:4px;padding:5px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.ncolours[hidden]{display:none}
.ncolours button{width:20px;height:20px;min-width:0;padding:0;border-radius:50%;border:2px solid var(--surface)}
.ncolours button:hover{outline:2px solid var(--accent)}
.ncolours .tnone{background:var(--surface-3);color:var(--ink-2);font-size:10px}
.nwarn{font-size:12px;color:var(--warn);background:var(--warn-bg);padding:4px 8px;border-radius:4px}
.nwarn code{font-family:var(--mono)}
.nwarn button{margin-left:6px;font-size:12px;color:var(--accent);text-decoration:underline}
/* A note entry is an <li> in .notes, styled as a card; the lists inside a
   formatted entry are <li>s too and must stay ordinary list items. */
.notes .nread li{display:list-item;padding:0;border:0;gap:0;background:none;box-shadow:none}
.notes .nread li.task{list-style:none}
.nread ul{list-style:disc}.nread ul ul{list-style:circle}.nread ul ul ul{list-style:square}

/* back button in a note pane header */
.ctx .pback{flex-shrink:0}

/* review tags */
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline}
.tagmodal{width:min(560px,calc(100vw - 32px))}
.tagmodal .nnbody{max-height:65vh;overflow-y:auto}
.tgh{margin:14px 0 4px;font-size:13px;font-weight:600}
.tgh small{color:var(--ink-3);font-weight:400;margin-left:4px}
.tgdupe{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 0;border-bottom:1px solid var(--line)}
.tgdupe .stpick{margin:0}
.tgdupe small{color:var(--ink-3)}
.tglist{list-style:none;margin:4px 0 0;padding:0}
.tglist li{display:flex;align-items:center;gap:8px;padding:3px 0}
.tglist input{flex:1;min-width:0;padding:3px 6px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;color:var(--ink);font:inherit;font-size:13px}
.tglist input:focus{outline:none;border-color:var(--accent)}
.tgn{font-size:12px;color:var(--ink-3);white-space:nowrap}
.tgx{font-size:16px;line-height:1}