/* ProjectMind · one design system for every screen.
   Colors come from theme.js, which sets them on :root for the chosen theme:
     --bg --text --text-strong --text-dim --text-faint --line --hover --raised
     --accent --on-accent --danger --warn --ok, and the content colors --c-green … --c-white.
   The values below are calm's, for the first frame before theme.js runs.
   Rules: one ground framed by 1px lines (titles sit in the frame); names in ink, color only on
   marks (dots, glyphs, frame lines, the selected bar); motion only for state. */
:root {
  --bg: #252a33; --text: #d8dee9; --text-strong: #eceff4; --text-dim: #8891a0; --text-faint: #5f6878;
  --line: #3e4655; --hover: #2f343e; --raised: #2e333d; --accent: #91c5cb; --on-accent: #252a33;
  --danger: #dea3a2; --warn: #dcbe8f; --ok: #9ec2a6; --c-amber: #dcbe8f;

  --font: "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 16px; --fs-2xl: 20px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --row: 24px;
  --float: 0 10px 28px rgb(0 0 0 / .34);
  --t-fast: 120ms; --t-med: 200ms; --pulse: 2.4s;
  color-scheme: dark;
}
:root[data-light] { --float: 0 10px 28px rgb(60 50 30 / .16); }

/* ---------- base ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: var(--fs-md)/1.45 var(--font); }
::selection { background: var(--accent); color: var(--on-accent); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-track { background: transparent; }
p { margin: 0; }
.grow { flex: 1; }
.dim { color: var(--text-dim); }
.err { color: var(--danger); }

/* a key badge: the hotkey, shown the same way on every control */
kbd { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 1px solid var(--line); border-radius: 2px; font: var(--fs-xs)/1 var(--font); color: var(--text-dim); text-transform: none; letter-spacing: 0; }

/* buttons: plain by default; .outline, .primary (the one main action), .danger, .quiet */
button { display: inline-flex; align-items: center; gap: 6px; min-height: var(--row); padding: 0 var(--s2); border: 1px solid transparent; background: none; color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
button:hover { background: var(--hover); color: var(--text-strong); }
button:hover kbd { color: var(--text); border-color: var(--text-dim); }
button:disabled { color: var(--text-faint); background: none; cursor: default; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
button.outline { border-color: var(--line); }
button.outline:hover { border-color: var(--text-dim); }
button.primary { border-color: var(--accent); color: var(--accent); font-weight: 700; }
button.primary kbd { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
button.primary:hover { background: var(--accent); color: var(--on-accent); }
button.primary:hover kbd { color: var(--on-accent); border-color: color-mix(in srgb, var(--on-accent) 45%, transparent); }
button.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
button.quiet { color: var(--text-dim); }

/* chips: pick one of a few */
.chip { min-height: 22px; border-color: var(--line); color: var(--text-dim); }
.chip:hover { background: none; border-color: var(--text-dim); color: var(--text-strong); }
.chip.on { border-color: var(--accent); color: var(--accent); }
.chip .g { font-style: normal; color: var(--cc, inherit); }
/* a type chip: its mark in its color; the picked one is tinted with it */
.chip.cat.on { border-color: var(--cc); color: var(--text-strong); background: color-mix(in srgb, var(--cc) 13%, transparent); }

/* color swatches: real squares */
.sw { width: 16px; height: 16px; min-height: 0; padding: 0; border: 0; background: var(--c); flex: none; }
.sw:hover { background: var(--c); outline: 1px solid var(--text-dim); outline-offset: 2px; }
.sw.on { outline: 2px solid var(--text-strong); outline-offset: 2px; }

/* fields */
input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 3px var(--s2); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select { min-height: 26px; }
select option { background: var(--bg); color: var(--text); }

.row { display: flex; flex-wrap: wrap; gap: var(--s1) 6px; align-items: center; }
.lbl { color: var(--text-dim); font-size: var(--fs-sm); }

/* ---------- the frame: a box with its title set into the top line ---------- */

.box { position: relative; border: 1px solid var(--line); padding: var(--s4) var(--s3) var(--s3); min-width: 0; min-height: 0; }
.box > .bt { position: absolute; top: -.72em; left: var(--s2); max-width: calc(100% - 9ch); padding: 0 var(--s1); background: var(--bg); font-size: var(--fs-xs); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box > .bt i { font-style: normal; color: var(--text-faint); letter-spacing: .02em; }
.box > .bt i.g { color: var(--bc, var(--text-dim)); }
/* a frame's corner control (close, fold all) */
.box > .x { position: absolute; top: -.8em; right: var(--s2); min-height: 0; padding: 0 var(--s1); background: var(--bg); color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.3; }
.box > .x:hover { background: var(--bg); color: var(--text-strong); }

/* ---------- layout ---------- */

#app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 280px minmax(0, 1fr) minmax(360px, 34%); grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s5) var(--s3); padding: var(--s3) var(--s3) var(--s2); }
#app.no-editor { grid-template-columns: 280px minmax(0, 1fr); }
#app.no-editor #editor, #app.no-editor #dired, #app:not(.dir-open) #dired, #app.dir-open #editor { display: none; }
#side { grid-column: 1; }
#main { grid-column: 2; padding: var(--s2) var(--s1) var(--s1); }
#editor, #dired { grid-column: 3; }
#status { grid-column: 1 / -1; }

/* ---------- header ---------- */

.bar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s3) var(--s2); }
.bar > .bt { font-weight: 700; letter-spacing: .14em; }
.tabs { display: flex; gap: 2px; }
.tabs button { color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.tabs button.on { color: var(--text-strong); box-shadow: inset 0 -2px var(--accent); }
.tabs button.on kbd { color: var(--accent); border-color: var(--accent); }
#crumb { display: flex; align-items: center; gap: var(--s1); min-width: 0; white-space: nowrap; color: var(--text-dim); }
#crumb .cr { color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-sm); }
#crumb .cr.here { padding: 0 var(--s1); color: var(--text-strong); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; }
#crumb .cr.here::before { content: "●"; margin-right: 6px; font-size: var(--fs-xs); color: var(--pc, var(--accent)); }
#crumb .sep { color: var(--text-faint); }
.actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
/* two groups: write (things you type in) and organize (containers) */
.grp { position: relative; display: flex; gap: 2px; border: 1px solid var(--line); padding: 3px var(--s1) 2px; }
.grp .gl { position: absolute; top: -.75em; left: 6px; padding: 0 3px; background: var(--bg); font-size: var(--fs-xs); line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
#btn-folder, #btn-inbox { cursor: grab; }
#btn-scratch.on { color: var(--accent); }
#btn-scratch.on kbd { color: var(--accent); border-color: var(--accent); }
/* the workspace makes only thoughts, sticky notes and projects */
#app.ws #btn-scratch, #app.ws #btn-board, #app.ws #btn-folder, #app.ws #btn-inbox, #app.ws #btn-core { display: none; }
#app:not(.ws) #btn-project { display: none; }

/* ---------- index ---------- */

#side { display: flex; flex-direction: column; gap: var(--s3); }
#search { width: 100%; }
#tree { overflow: auto; flex: 1; margin: 0 calc(-1 * var(--s1)); }
/* a row: --d = depth (indent + guide lines), --bc = a container's color, --tc = a thought's */
.ti { --step: 14px; position: relative; display: flex; align-items: center; gap: 6px; height: var(--row); padding: 0 var(--s2) 0 calc(var(--s1) + var(--d, 0) * var(--step)); color: var(--text); cursor: pointer; white-space: nowrap; }
.ti::before { content: ""; position: absolute; left: var(--s1); top: 0; bottom: 0; width: calc(var(--d, 0) * var(--step)); background: repeating-linear-gradient(to right, transparent 0 9px, color-mix(in srgb, var(--line) 75%, transparent) 9px 10px, transparent 10px var(--step)); pointer-events: none; }
.ti:hover { background: var(--hover); }
.ti.on { background: color-mix(in srgb, var(--bc, var(--accent)) 13%, transparent); box-shadow: inset 2px 0 var(--bc, var(--accent)); color: var(--text-strong); }
.ti .nm { overflow: hidden; text-overflow: ellipsis; }
.ti .n { margin-left: auto; padding-left: var(--s2); color: var(--text-faint); font-size: var(--fs-xs); }
/* the fold button: a real target, not a tiny glyph */
.ti .tg { flex: none; width: 18px; height: 20px; display: grid; place-items: center; color: var(--text-faint); }
.ti .tg[data-toggle]::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(-1px) rotate(-45deg); transition: transform var(--t-fast); }
.ti .tg.open::before { transform: translateY(-2px) rotate(45deg); }
.ti .tg[data-toggle]:hover { color: var(--text-strong); background: var(--hover); }
.ti .sq, .ti .gl { flex: none; width: 14px; text-align: center; font-style: normal; font-size: var(--fs-xs); color: var(--bc, var(--text-dim)); }
.ti .gl { color: var(--tc, var(--text-dim)); }
/* containers: ink names, bold; their color is on the mark */
.ti.tf .nm, .ti.inbox-ti .nm, .ti.pj-ti .nm { color: var(--text-strong); font-weight: 700; }
.ti.inbox-ti .nm { letter-spacing: .04em; }
.ti.pj-ti.missing { opacity: .5; }
/* section heads: the cores, and the workspace's sections */
.ti.head-ti { --bc: var(--c-amber); margin-top: var(--s2); }
.ti.head-ti:first-child { margin-top: 0; }
.ti.head-ti .nm { color: var(--text-strong); font-weight: 700; font-size: var(--fs-sm); letter-spacing: .1em; }
.ti.free-ti, .ti.stk-ti { --bc: var(--text-dim); }
.ti.free-ti .nm, .ti.stk-ti .nm { color: var(--text-dim); }
.ti.free-ti.empty { display: none; }
body.dragging .ti.free-ti.empty { display: flex; }
/* thoughts */
.ti.tt.on { --bc: var(--tc, var(--accent)); }
.ti.tt.done .nm { text-decoration: line-through; color: var(--text-dim); }
.ti.tt.todo .nm { color: var(--text-strong); }
.ti.stk-row .nm { font-style: italic; }

/* ---------- list ---------- */

#list { height: 100%; overflow: auto; padding: var(--s3) var(--s2) var(--s6); columns: 330px; column-gap: var(--s4); }
#list > * { break-inside: avoid; }
#list .box { border-color: color-mix(in srgb, var(--bc, var(--line)) 38%, var(--line)); }
#list .folder, #list .inbox { display: inline-block; width: 100%; vertical-align: top; margin: var(--s1) 0 var(--s5); }
#list .box > .bt { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); cursor: pointer; }
#list .box.sel { border-color: var(--bc, var(--accent)); }
#list.single { columns: auto; }
#list.single .inners { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 var(--s4); }
/* a container inside a container */
.inner { margin: var(--s4) 0 var(--s1); padding: var(--s3) var(--s2) var(--s2); }
.crumb { margin-bottom: var(--s3); }
/* a thought in a list */
.th { display: flex; gap: var(--s2); align-items: center; height: var(--row); padding: 0 var(--s1); cursor: pointer; white-space: nowrap; overflow: hidden; }
.th:hover { background: var(--hover); }
.th.on { background: color-mix(in srgb, var(--tc, var(--accent)) 13%, transparent); box-shadow: inset 2px 0 var(--tc, var(--accent)); }
.th .gl { flex: none; width: 14px; text-align: center; font-size: var(--fs-xs); }
.th .tt { flex: none; max-width: 65%; overflow: hidden; text-overflow: ellipsis; }
.th .pv { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.th .tag { flex: none; color: var(--text-dim); font-size: var(--fs-xs); cursor: pointer; }
.th .tag:hover { color: var(--accent); }
.th.done .tt { text-decoration: line-through; color: var(--text-dim); }
.th.todo .tt { color: var(--text-strong); }
.th .thumb { height: 34px; max-width: 54px; margin-left: auto; border: 1px solid var(--line); object-fit: contain; }
.empty { color: var(--text-faint); font-size: var(--fs-sm); padding: 2px var(--s1); }
.add { margin-top: var(--s1); color: var(--text-dim); font-size: var(--fs-sm); visibility: hidden; }
.box:hover > .add { visibility: visible; }
.hello { column-span: all; padding: var(--s5); color: var(--text-dim); }
.hello b { color: var(--accent); font-weight: 400; }
/* dragging */
.over { background: var(--hover) !important; outline: 1px dashed var(--accent); outline-offset: 1px; }
.over-before { box-shadow: inset 0 2px 0 var(--accent) !important; }
.over-after { box-shadow: inset 0 -2px 0 var(--accent) !important; }
body.dragging .th { pointer-events: none; }

/* ---------- the side panel: one layout for thoughts, containers and projects ---------- */

.panel { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4); min-height: 0; }
.title-row { display: flex; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-top: var(--s1); }
.title-row .mark { flex: none; width: 20px; min-height: 0; padding: 0; justify-content: center; font-size: var(--fs-xl); color: var(--mc, var(--text-dim)); }
.title-row .mark:disabled { color: var(--mc, var(--text-dim)); cursor: default; }
.title-row .mark:not(:disabled):hover { background: color-mix(in srgb, var(--mc) 16%, transparent); }
#ed-title, #dd-name { flex: 1; min-width: 0; padding: 2px 0; border: 0; background: none; font-size: var(--fs-2xl); font-weight: 700; color: var(--text-strong); }
#dd-name:read-only { cursor: default; }
/* label / value pairs; .prop groups a pair so it can be hidden as one */
.props { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: center; }
.prop { display: contents; }
.props > .sug, .props .full { grid-column: 2; }
#ed-tags { flex: 1 1 10ch; min-width: 0; border-style: dashed; padding: 0 6px; height: 22px; }
#ed-tags:focus { border-style: solid; }
#ed-tagson .chip.on { color: var(--text); border-color: var(--line); }
#ed-tagson .chip.on:hover { color: var(--danger); border-color: var(--danger); }
#ed-tagsug .chip { border-style: dashed; font-size: var(--fs-sm); }
#ed-tagsug .chip.new { color: var(--accent); border-color: var(--accent); }
#ed-where, #dd-where { flex: 1; min-width: 0; }
#dd-whererow .row { flex-wrap: nowrap; }
/* "in the web": how it looks on the canvas, folded away until you want it */
.inweb { border-top: 1px solid var(--line); padding-top: var(--s2); }
.inweb > summary { display: flex; align-items: center; gap: var(--s2); list-style: none; cursor: pointer; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.inweb > summary::-webkit-details-marker { display: none; }
.inweb > summary::after { content: ""; width: 5px; height: 5px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast); }
.inweb[open] > summary::after { transform: translateY(-2px) rotate(45deg); }
.inweb > summary:hover { color: var(--text-strong); }
.inweb > summary .v { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--text); }
.inweb[open] > summary { margin-bottom: var(--s3); }
.inweb > .props + .cardwrap { margin-top: var(--s3); }
.panel .foot { display: flex; align-items: center; gap: var(--s1); border-top: 1px solid var(--line); padding-top: var(--s2); margin-top: auto; }
.section-label, .cardlbl { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.cardlbl span { text-transform: none; letter-spacing: 0; margin-left: var(--s1); color: var(--text-faint); }
.cardwrap { display: grid; gap: 6px; }
/* the text you write */
#ed-bodywrap { position: relative; flex: 1; display: flex; min-height: 160px; }
#ed-body { flex: 1; width: 100%; resize: none; padding: var(--s2) var(--s3); font-size: var(--fs-lg); line-height: 1.6; }
#ed-links { display: flex; flex-direction: column; gap: var(--s1); }
#ed-links .lbl { width: 6ch; flex: none; }
#ed-links .chip { color: var(--accent); }
#ed-links .chip.miss { color: var(--text-dim); border-style: dashed; }
#ed-mic.rec { color: var(--danger); animation: blink 1s steps(2) infinite; }
#ed-lang { min-height: var(--row); padding: 0 var(--s1); }
@keyframes blink { 50% { opacity: .5; } }
/* the board (a thought you draw on) gets more room */
#ed-board, #ed-wide { display: none; }
#editor.board-mode #ed-board { display: flex; }
#editor.board-mode #ed-wide { display: inline-flex; }
#editor.board-mode #ed-bodywrap, #editor.board-mode #ed-mic, #editor.board-mode #ed-lang { display: none; }
#app.board-open:not(.no-editor) { grid-template-columns: 280px minmax(0, 1fr) minmax(420px, 58%); }
#app.board-full:not(.no-editor) { grid-template-columns: 280px 0 minmax(0, 1fr); column-gap: 0; }
#app.board-full:not(.no-editor) #main { display: none; }
#app.board-full #side { margin-right: var(--s3); }
#app.board-full #ed-wide { color: var(--accent); }
/* the scratch pad: just text */
#editor.scratch-mode .title-row, #editor.scratch-mode .props, #editor.scratch-mode .inweb, #editor.scratch-mode #ed-links,
#editor.scratch-mode #ed-goal, #editor.scratch-mode #ed-trash { display: none; }
/* a file that isn't a note: no text box, just what it is and where it lives */
#ed-file { display: none; flex-direction: column; gap: 6px; }
#editor.file-mode #ed-file { display: flex; }
#editor.file-mode #ed-bodywrap, #editor.file-mode #ed-mic, #editor.file-mode #ed-lang, #editor.file-mode #ed-links { display: none; }
/* the container panel */
#dd-tree { flex: 1; min-height: 80px; overflow: auto; margin: 0 calc(-1 * var(--s1)); }
#dired.pj-mode #dd-web { border-top: 0; padding-top: 0; }
/* a sticky note's panel: its text fills the space the contents use */
#dired.stk-mode #dd-web { display: none; }
#dd-tree .stk-text { display: block; width: 100%; height: 100%; min-height: 10em; padding: var(--s2) var(--s1); border: 0; background: none; resize: none; color: var(--text); line-height: 1.6; }
#dired.pj-mode #dd-web > summary { display: none; }
#app.ws .where { display: none; }

/* ---------- card text (the description or list a card shows in the web) ---------- */

.card-ed .ce-text { width: 100%; min-height: 70px; padding: 6px var(--s2); resize: vertical; }
.card-ed .ce-list { display: flex; flex-direction: column; gap: 2px; }
.card-ed .ce-li { display: flex; align-items: center; gap: var(--s2); min-height: var(--row); padding: 0 6px; cursor: text; }
.card-ed .ce-li:focus-within { background: var(--hover); }
.card-ed .ce-b { flex: none; width: 1ch; color: var(--dc, var(--accent)); }
.card-ed .ce-li input { flex: 1; min-width: 0; padding: 2px 0; border: none; background: none; }
.card-ed .ce-hint { padding: 0 6px; color: var(--text-faint); font-size: var(--fs-xs); }
/* a point or the description shows as text with clickable links until you click to edit it */
.card-ed .ce-view { flex: 1; min-width: 0; padding: 2px 0; overflow-wrap: anywhere; }
.card-ed .ce-li:not(.editing) input, .card-ed .ce-note:not(.editing) textarea { display: none; }
.card-ed .ce-li.editing .ce-view, .card-ed .ce-note.editing .ce-view { display: none; }
.card-ed .ce-note .ce-view { min-height: 34px; padding: 6px var(--s2); border: 1px solid transparent; cursor: text; }
.card-ed .ce-note .ce-view:hover, .card-ed .ce-li:not(.editing):hover { background: var(--hover); }
.ce-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ce-link:hover { color: var(--text-strong); }
.ce-link.missing { opacity: .65; text-decoration-style: dashed; }

/* ---------- floating things: popups, menus, the dialog ---------- */

#mention-pop { position: fixed; z-index: 60; min-width: 24ch; max-width: 44ch; padding: var(--s1) 0; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--float); }
#mention-pop .mi { display: flex; width: 100%; min-height: var(--row); padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; }
#mention-pop .mi .d { margin-left: auto; padding-left: var(--s3); color: var(--text-dim); font-size: var(--fs-xs); }
#mention-pop .mi.sel { background: var(--hover); color: var(--text-strong); box-shadow: inset 2px 0 var(--accent); }
#ed-split { position: absolute; z-index: 21; min-height: 22px; background: var(--raised); border-color: var(--accent); color: var(--accent); box-shadow: var(--float); }
#colormenu { position: fixed; z-index: 55; display: flex; flex-direction: column; min-width: 210px; max-width: 320px; padding: var(--s1) 0; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--float); }
#colormenu .ml { padding: var(--s1) var(--s3) 6px; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
#colormenu .row { padding: 2px var(--s3) var(--s2); gap: 6px; }
#colormenu .sep { margin: var(--s1) 0; border-top: 1px solid var(--line); }
#colormenu .mi { width: 100%; min-height: 26px; padding: 0 var(--s3); }
#colormenu .mi .d { margin-left: auto; color: var(--text-dim); font-size: var(--fs-xs); }
#colormenu .mi.danger:hover { color: var(--danger); }
/* the theme list */
#colormenu .mi.on { color: var(--text-strong); box-shadow: inset 2px 0 var(--accent); }
#colormenu .tsw { display: inline-flex; margin-right: var(--s2); outline: 1px solid var(--line); }
#colormenu .tsw i { display: block; width: 7px; height: 14px; }
/* dialogs: the modal and the shortcut sheet */
#modal, #keys { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 60%, transparent); }
#modal .box, #keys .box { display: grid; gap: var(--s3); padding: var(--s4); background: var(--raised); box-shadow: var(--float); }
#modal .box { width: min(440px, 92vw); }
#modal .box > .bt, #keys .box > .bt { position: static; max-width: none; padding: 0; background: none; }
#keys .box { width: min(820px, 94vw); max-height: 90vh; overflow: auto; }
#keys .box > .x { top: var(--s3); right: var(--s3); background: none; }
#keys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4) var(--s5); }
#keys-grid section { display: grid; gap: 2px; align-content: start; }
#keys-grid .wide { grid-column: 1 / -1; }
#keys-grid h4 { margin: 0 0 var(--s1); font-size: var(--fs-xs); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
#keys-grid section > div { display: flex; align-items: center; gap: var(--s2); min-height: 22px; font-size: var(--fs-sm); }
#keys-grid .k { flex: none; display: inline-flex; gap: 2px; min-width: 9ch; color: var(--text-strong); }
#keys-grid .wide .k { min-width: 13ch; }
#keys-grid .marks { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-sm); }
#keys-grid .km i { margin-right: 6px; font-style: normal; }
#modal p { color: var(--text-dim); font-size: var(--fs-sm); }
#modal input { width: 100%; }
#modal .row { justify-content: flex-end; flex-wrap: nowrap; }
#modal .row button { white-space: nowrap; }

/* ---------- status line ---------- */

#status { display: flex; gap: var(--s4); padding: 0 var(--s1); color: var(--text-dim); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; }
#ctx b { color: var(--text); font-weight: 400; }
#btn-keys { min-height: 0; font-size: var(--fs-sm); }
#save-state { margin-left: auto; }
#save-state.err { color: var(--danger); }

/* ---------- web ---------- */

#web { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#web-home { position: absolute; right: var(--s3); top: var(--s3); background: var(--raised); border-color: var(--line); }
/* writing on a sticky note in the web: the text box sits on top of the note drawn on the canvas */
#sticky-ed { position: fixed; z-index: 30; border: none; outline: none; resize: none; background: none; color: #2b2722; caret-color: #2b2722; overflow: hidden; font-family: var(--font); white-space: pre-wrap; overflow-wrap: break-word; }

/* ---------- focus ---------- */

#focus { height: 100%; display: grid; grid-template-rows: auto minmax(220px, 1fr); gap: var(--s5); padding: var(--s4) var(--s2) var(--s2); overflow: auto; }
.lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.lane { --lc: var(--accent); --bc: var(--lc); border-color: color-mix(in srgb, var(--lc) 38%, var(--line)); padding: var(--s4) var(--s2) var(--s2); transition: border-color var(--t-med); }
.lane > .bt { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.lane-clear { position: absolute; top: -.8em; right: var(--s2); min-height: 0; padding: 0 var(--s1); background: var(--bg); color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.3; }
.lane-clear:hover { background: var(--bg); color: var(--text-strong); }
.lane.over { border-color: var(--lc); }
.lane.full { border-color: var(--danger); }
.lane.full::after { content: "full · let one go first"; position: absolute; right: var(--s2); bottom: 2px; color: var(--danger); font-size: var(--fs-xs); }
.lane-body { display: flex; flex-direction: column; gap: var(--s1); }
.pr, .slot { display: flex; align-items: center; gap: var(--s2); min-height: 30px; padding: 0 var(--s2); }
.pr { border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); color: var(--text-strong); cursor: grab; touch-action: none; user-select: none; }
.pr:hover { background: var(--hover); }
.pr .num, .slot .num { flex: none; width: 1.5ch; color: var(--text-faint); font-size: var(--fs-sm); }
.pr .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pr .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pr .bk { min-height: 0; color: var(--text-dim); visibility: hidden; }
.pr:hover .bk { visibility: visible; }
.slot { border: 1px dashed var(--line); color: var(--text-faint); font-size: var(--fs-sm); }
.ins { height: 2px; margin: 1px 0; background: var(--lc); }
.pool { --bc: var(--c-mint); display: flex; flex-direction: column; gap: var(--s2); min-height: 220px; padding: var(--s4) var(--s2) var(--s2); }
.pool > .bt { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.pool-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s3); }
#goal-new { flex: 1; min-width: 200px; }
.goal-colors { display: flex; gap: 6px; }
.pool-space { position: relative; flex: 1; min-height: 160px; overflow: hidden; }
.pool-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); }
.bubble { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: var(--s2); max-width: 280px; padding: 5px var(--s2) 5px var(--s3); background: var(--raised); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); color: var(--text-strong); cursor: grab; touch-action: none; user-select: none; will-change: transform; }
.bubble:hover { border-color: var(--c); z-index: 2; }
.bubble .soma { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bubble .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble .bx { min-height: 0; padding: 0 var(--s1); color: var(--text-dim); visibility: hidden; }
.bubble:hover .bx { visibility: visible; }
.bubble .bx:hover { background: none; color: var(--danger); }
.lifted { opacity: .25; }
.ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: .95; box-shadow: var(--float); }
body.grabbing, body.grabbing * { cursor: grabbing !important; }

/* ---------- archive ---------- */

#archive { height: 100%; overflow: auto; padding: var(--s3) var(--s2) var(--s6); display: grid; align-content: start; gap: var(--s5); }
.arc-help { padding: 0 var(--s1); color: var(--text-dim); }
.arc-grp > .bt { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.arc-hint { padding: 0 var(--s1) 6px; color: var(--text-dim); font-size: var(--fs-sm); }
.arc-row { display: flex; gap: var(--s2); align-items: center; padding: 6px var(--s1); border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.arc-row:first-of-type { border-top: 0; }
.arc-row:hover { background: var(--hover); }
.arc-row .gl { flex: none; width: 14px; text-align: center; font-style: normal; color: var(--text-dim); font-size: var(--fs-xs); }
.arc-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: var(--s3); }
.arc-main .tt { color: var(--text-strong); }
.arc-main .pv { min-width: 0; max-width: 100%; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-was { flex-basis: 100%; color: var(--text-dim); font-size: var(--fs-sm); }
.arc-was b { color: var(--text); font-weight: 400; }
.arc-was em { color: var(--warn); font-style: normal; }

/* ---------- the board's drawing tools ---------- */

#ed-board { flex: 1; flex-direction: column; gap: 6px; min-height: 220px; }
.bd-tools { gap: var(--s1); user-select: none; }
.bd-tools .sep { width: 1px; height: 16px; background: var(--line); }
.bd-tools .sz { width: 24px; min-height: 22px; padding: 0; justify-content: center; }
.bd-tools .sz i { display: block; border-radius: 50%; background: var(--text-dim); }
.bd-tools .sz.on i { background: var(--accent); }
.bd-tools .sw { outline: 1px solid var(--line); outline-offset: 0; }
.bd-tools .sw.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.bd-tools .pick { position: relative; display: inline-block; background: conic-gradient(#d0474f, #e6b450, #4caf6a, #3f8fd0, #8a5cd0, #d0474f); cursor: pointer; }
.bd-tools .pick.on { background: var(--c); }
.bd-tools .pick input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.bd-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; border: 1px solid var(--line); outline: none; touch-action: none; cursor: crosshair; }
.bd-stage:focus-visible { border-color: var(--accent); }
.bd-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bd-stage[data-tool="hand"], .bd-stage.can-pan { cursor: grab; }
.bd-stage.panning { cursor: grabbing; }
.bd-stage[data-tool="eraser"] { cursor: cell; }
.bd-zoom { position: absolute; right: var(--s2); bottom: var(--s2); display: flex; background: var(--raised); border: 1px solid var(--line); user-select: none; cursor: default; }
.bd-zoom [data-z100] { min-width: 6ch; justify-content: center; color: var(--text-dim); }

/* ---------- the workspace: projects ---------- */

#list.ws-list { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5) var(--s4); align-content: start; }
#list.ws-list > .ws-th, #list.ws-list > .stk-box { grid-column: 1 / -1; }
.pj-card { display: flex; flex-direction: column; gap: var(--s3); min-height: 150px; padding: var(--s4) var(--s3) var(--s2); border-color: color-mix(in srgb, var(--bc) 45%, var(--line)) !important; cursor: pointer; }
.pj-card:hover { border-color: var(--bc) !important; }
.pj-card.on { border-color: var(--bc) !important; background: color-mix(in srgb, var(--bc) 6%, transparent); }
.pj-card.missing { opacity: .55; border-style: dashed; }
.pj-card > .bt { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; }
.pj-desc { flex: 1; line-height: 1.5; overflow-wrap: anywhere; }
.pj-foot { display: flex; align-items: center; gap: var(--s2); color: var(--text-dim); font-size: var(--fs-sm); }
.pj-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-foot .dim { flex: none; white-space: nowrap; }
.pj-new { min-height: 150px; justify-content: center; border: 1px dashed var(--line); color: var(--text-dim); }
.pj-new:hover { border-color: var(--accent); color: var(--accent); background: none; }
.pj-info { display: flex; flex-direction: column; gap: 6px; padding: 6px var(--s1); }
.pj-info code { font: inherit; color: var(--text); overflow-wrap: anywhere; }
.pj-info p { font-size: var(--fs-sm); }
/* "enter ▸" for the selected project: its frame breathes so it catches the eye */
.pj-enter { --ec: var(--bc, var(--accent)); border-color: color-mix(in srgb, var(--ec) 60%, transparent); color: var(--ec); font-weight: 700; }
.pj-enter kbd { border-color: currentColor; color: inherit; }
.pj-card:not(.on) .pj-enter { opacity: .45; border-color: transparent; }
.pj-card.on .pj-enter { animation: enter-breathe var(--pulse) ease-in-out infinite; }
.pj-enter:hover { animation: none; opacity: 1; background: var(--ec); color: var(--bg); border-color: var(--ec); }
@keyframes enter-breathe { 50% { border-color: var(--ec); background: color-mix(in srgb, var(--ec) 14%, transparent); } }

/* ---------- sticky notes in the list: plain rows in their own frame ---------- */

.stk-box .stk-row { cursor: text; }
.stk-box .stk-row.editing { align-items: flex-start; height: auto; padding: var(--s1); background: var(--hover); }
.stk-box .stk-row textarea { flex: 1; min-height: 3.2em; field-sizing: content; padding: 0; border: none; background: none; resize: none; }

/* ---------- open to-dos: their mark pulses, so they catch the eye ---------- */

@keyframes todo-pulse { 50% { opacity: .3; } }
.ti.tt.todo .gl, .th.todo .gl, .title-row .mark.todo:not(.done) { animation: todo-pulse var(--pulse) ease-in-out infinite; }
.th.todo.on .gl { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- small screens ---------- */

@media (max-width: 860px) {
  #app, #app.no-editor { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #side, #main, #status { grid-column: 1; }
  #side { max-height: 30vh; }
  #editor, #dired { position: fixed; inset: var(--s3); z-index: 40; background: var(--bg); }
  .actions { margin-left: 0; }
  .bar { flex-wrap: wrap; }
  #btn-keys { display: none; }
  .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}