/* nimlog's web UI: the browser, the phone (over the tailnet) and nimlog-window
   app. Two looks: "classic", and "terminal" (the TUI's: monospace, columns,
   box-drawing day lines), which the quick window uses. */
:root {
  --card: rgba(30, 40, 60, .035); --card2: rgba(30, 40, 60, .06); --whoL: 42%;
  --bg: #f7f7f5; --panel: #eef0f4; --fg: #2e3440; --dim: #6b7280; --faint: #9aa1ae;
  --accent: #2f6f8f; --accent2: #8a4f8a; --ok: #4f7a3a; --due: #b0501a; --line: #dfe3ea;
  --sel: #e3ebf3; --code: #f0f1f4; --mention: #2f5f9f; --font: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1d23; --panel: #22252c; --fg: #d8dee9; --dim: #8a93a6; --faint: #5c6370;
          --accent: #88c0d0; --accent2: #b48ead; --ok: #a3be8c; --due: #d08770; --line: #2e3440;
          --sel: #2b303b; --code: #262931; --mention: #81a1c1;
          --card: rgba(255, 255, 255, .035); --card2: rgba(255, 255, 255, .06); --whoL: 72%; }
}
body.terminal { --font: var(--mono); --bg: #15171c; --panel: #1d2026; --fg: #d8dee9; --dim: #8a93a6;
                --faint: #59606d; --accent: #88c0d0; --accent2: #b48ead; --ok: #a3be8c; --due: #d08770;
                --line: #2a2e37; --sel: #263040; --code: #20232a;
                --card: rgba(255, 255, 255, .03); --card2: rgba(255, 255, 255, .055); --whoL: 72%; }
/* the scale everything is measured in (NL-120): spacing, type, corners, depth; surfaces and states.
   Colours are the TUI's (ui/theme.nim: Nord in the dark), so both UIs read as one thing. */
:root {
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 15px; --fs-lg: 18px; --fs-xl: 22px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .07);
  --shadow-2: 0 6px 16px rgba(15, 23, 42, .12), 0 2px 4px rgba(15, 23, 42, .06);
  --raised: #ffffff; --on-accent: #ffffff; --bad: #bf4b55; --warn: #b07d00;
  --st-inbox: #9aa1ae; --st-ready: #5e81ac; --st-doing: #2f8fb0; --st-review: #9a6fb0; --st-needs: #d0772f; --st-done: #5f9a45;
  --st-wont: #8a7568;
}
@media (prefers-color-scheme: dark) {
  :root { --raised: #262a33; --on-accent: #1b1d23; --bad: #bf616a; --warn: #ebcb8b;
          --shadow-1: 0 1px 2px rgba(0, 0, 0, .25); --shadow-2: 0 8px 24px rgba(0, 0, 0, .4);
          --st-inbox: #6b7385; --st-ready: #81a1c1; --st-doing: #88c0d0; --st-review: #b48ead; --st-needs: #d08770; --st-done: #a3be8c;
          --st-wont: #9a8a80; }
}
body.terminal { --raised: #1d2026; --on-accent: #15171c; --shadow-1: none; --shadow-2: 0 8px 24px rgba(0, 0, 0, .4); }

/* base controls: zero specificity (:where), so any rule of a view's own still wins */
:where(button) { font: inherit; font-size: var(--fs-md); line-height: 1.45; color: var(--fg); background: var(--raised);
                 border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px 10px; cursor: pointer;
                 box-shadow: var(--shadow-1); transition: background-color .12s, border-color .12s; white-space: nowrap; }
:where(button):hover { background: var(--sel); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
:where(button):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:where(button:disabled) { opacity: .5; cursor: default; }
:where(button.primary) { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }
:where(button.primary):hover { background: color-mix(in srgb, var(--accent) 85%, var(--fg)); }
:where(button.ghost) { background: transparent; border-color: transparent; box-shadow: none; color: var(--dim); }
:where(button.ghost):hover { color: var(--fg); background: var(--sel); }
:where(button.danger) { color: var(--bad); }
:where(button.danger):hover { border-color: var(--bad); }
:where(button.small) { font-size: var(--fs-sm); padding: 1px 8px; }
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), select, textarea) {
  font: inherit; color: var(--fg); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 5px 8px; }
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), select, textarea):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
:where(input, select, textarea)::placeholder { color: var(--faint); }
:where(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--accent); }
:where(label) { cursor: pointer; }
/* a small coloured pill: a status, a type, a count */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; line-height: 18px;
         padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--dim)) 16%, transparent);
         color: color-mix(in srgb, var(--c, var(--dim)) 80%, var(--fg)); white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); flex: none; }
/* a bar of controls over a view */
.toolbar { display: flex; gap: var(--sp2); align-items: center; flex-wrap: wrap; margin: var(--sp1) 0 var(--sp3); }
.toolbar .grow { flex: 1; }
.notebar { padding-bottom: var(--sp2); border-bottom: 1px solid var(--line); }
.notebar b { color: var(--dim); font-size: var(--fs-md); margin-right: var(--sp1); }
.empty { color: var(--faint); text-align: center; padding: var(--sp5) var(--sp3); border: 1px dashed var(--line);
         border-radius: var(--r-lg); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.5 var(--font); background: var(--bg); color: var(--fg); display: grid;
       grid-template-columns: 250px 1fr auto; height: 100vh; overflow: hidden; }
body.terminal { font-size: 14px; }
aside { background: var(--panel); border-right: 1px solid var(--line); padding: 12px; overflow-y: auto; }
aside h2 { font-size: 11px; letter-spacing: .08em; color: var(--faint); margin: 16px 0 6px; font-weight: 600; }
aside .me { font-weight: 600; } aside .handle { color: var(--faint); font-size: 13px; }
aside a.doc { display: flex; gap: 6px; padding: 3px 8px; border-radius: 6px; color: var(--fg); text-decoration: none;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
aside a.doc .n { margin-left: auto; color: var(--accent); font-size: 12px; }
aside a.doc:hover { background: color-mix(in srgb, var(--sel) 70%, transparent); }
aside a.doc.active { background: var(--sel); font-weight: 600; }
aside a.doc.sub { padding-left: 22px; }
aside a.doc { padding-left: calc(4px + max(0, var(--d, 1) - 1) * 14px); align-items: center; position: relative; }
aside a.doc .tw, aside .sec .tw { width: 12px; flex: none; color: var(--faint); font-size: 10px; text-align: center; }
aside a.doc .ic { flex: none; width: 1.1em; text-align: center; color: var(--dim); }
aside a.doc .tt { overflow: hidden; text-overflow: ellipsis; }
aside a.doc .sh { font-size: 11px; }
aside a.doc.trashed { color: var(--faint); }
aside a.doc.view { font-size: 13px; color: var(--dim); padding-left: calc(30px + max(0, var(--d, 1) - 2) * 14px); }
/* how a row stands (a part's count, a pipeline's newest run, a service up), and the open page's link: the accent's
   mark at its edge, as the terminal lights its row (C2) */
aside a.doc .dt { margin-left: auto; padding-left: 6px; color: var(--faint); font-size: 12px; flex: none; }
aside a.doc .dt ~ .rowmore { margin-left: 0; }
aside a.doc.part { font-size: 13px; }
aside a.doc.shelf { font-size: 13px; color: var(--dim); }   /* a group of the Library (D1): it folds */
aside a.doc.topic .ic { color: var(--faint); }               /* a topic of Notes (D2): folds as a group does */
/* the sidebar's filter (D2): what has it, with what it's under — those dimmed */
aside #sideFilter { margin-top: 10px; padding: 4px 8px; font-size: 13px; }
aside .along { opacity: .62; }
aside a.doc[aria-current="page"] { background: var(--sel); font-weight: 600; }
aside a.doc[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
                                            border-radius: 2px; background: var(--accent); }
aside .sec { display: flex; gap: 4px; align-items: center; font-size: 11px; letter-spacing: .08em; color: var(--faint);
             font-weight: 600; margin: 14px 0 3px; padding-left: calc(max(0, var(--d, 0)) * 14px); cursor: pointer;
             user-select: none; position: relative; }
aside .sec[style*="--d:0"] { margin-top: 16px; }
aside .sec .n { color: var(--dim); font-weight: normal; letter-spacing: 0; }
aside .rowmore { margin-left: auto; color: var(--faint); cursor: pointer; padding: 0 4px; visibility: hidden; flex: none; }
aside a.doc:hover .rowmore, aside .sec:hover .rowmore { visibility: visible; }
@media (hover: none) { aside .rowmore { visibility: visible; } }
aside .drop-before { box-shadow: 0 -2px 0 var(--accent); }
aside .drop-after { box-shadow: 0 2px 0 var(--accent); }
aside .drop-into { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
aside #newSection { color: var(--faint); font-size: 13px; margin-top: 8px; }
.popmenu { position: fixed; z-index: 50; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
           box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 4px; min-width: 190px; font-size: 14px; }
.popmenu div { padding: 5px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
/* making sure (NL-225, app.js confirmBar): one small bar by what asked, everywhere — its question, Cancel (the keys
   start there) and the word for doing it */
.confirmbar { position: fixed; z-index: 55; display: flex; flex-wrap: wrap; gap: var(--sp2); align-items: center;
              width: max-content; max-width: min(460px, calc(100vw - 16px)); padding: var(--sp2) var(--sp3); background: var(--raised);
              border: 1px solid var(--line); border-left: 3px solid var(--bad); border-radius: var(--r-md);
              box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: var(--fs-md); }
.confirmbar .cbq { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.confirmbar .cbbtns { display: flex; gap: var(--sp2); margin-left: auto; }     /* (wrapped together under a long question) */
.confirmbar button.danger { background: var(--bad); color: #fff; border-color: transparent; font-weight: 600; }
.confirmbar:has(.cbyes.primary) { border-left-color: var(--accent); }
.confirmbar button.danger:hover { background: color-mix(in srgb, var(--bad) 85%, var(--fg)); }
.popmenu div:hover { background: var(--sel); }
aside input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
              background: var(--bg); color: var(--fg); font: inherit; }
aside .dev { font-size: 13px; padding: 1px 8px; color: var(--dim); }
aside .dev.on::before { content: "● "; color: var(--ok); } aside .dev.off::before { content: "○ "; color: var(--faint); }
main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
header { padding: var(--sp2) var(--sp4); border-bottom: 1px solid var(--line); display: flex; gap: var(--sp2); align-items: center;
         flex-wrap: wrap; min-height: 48px; }
header h1 { font-size: var(--fs-lg); font-weight: 650; margin: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header .meta { color: var(--dim); font-size: 13px; }
header .chip, .chip { background: var(--panel); border-radius: 999px; padding: 1px 9px; font-size: var(--fs-sm); color: var(--dim);
                      cursor: pointer; border: 0; font-family: inherit; white-space: nowrap; }
header .chip.on { color: var(--accent); } header .chip.off { text-decoration: line-through; }
header .grow { flex: 1; }
header .clock { color: var(--accent); font-size: 13px; }
#burger { display: none; background: none; border: 0; color: var(--fg); font-size: 20px; cursor: pointer; padding: 0 4px; }
#view { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp3) var(--sp5) var(--sp4); -webkit-overflow-scrolling: touch; }
/* views that fill the space (a run, feeds, chat, a canvas): the view is a column, they take what's left */
#view:has(> .runview, > .feeds, > .chat, > .cv-wrap) { display: flex; flex-direction: column; overflow: hidden; }
#view > .runview, #view > .feeds, #view > .chat, #view > .cv-wrap { flex: 1; min-height: 0; height: auto; }
.day { text-align: center; color: var(--faint); font-size: 12px; margin: 16px 0 6px; }
body.terminal .day { display: flex; gap: 8px; align-items: center; }
body.terminal .day::before, body.terminal .day::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.block, .event { display: grid; grid-template-columns: var(--cols, 48px 110px 1fr); gap: 8px; padding: 3px 6px;
                 border-radius: 6px; position: relative; }
.block:hover, .block.sel { background: var(--sel); }
.block .time, .event .time { color: var(--faint); font-size: 13px; }
.block .who { color: var(--accent); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block .topic, .event .topic { color: var(--accent2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
body.terminal .block .who, body.terminal .block .time, body.terminal .block .topic { font-size: inherit; font-weight: normal; }
.block .body p { margin: 0 0 4px; } .block .body { display: flow-root; min-width: 0; overflow-wrap: anywhere; }
.block .body.done { text-decoration: line-through; color: var(--faint); }
.block.reply { margin-left: calc(var(--depth, 1) * 28px); }
.block .tools { position: absolute; right: 6px; top: 2px; display: none; gap: 2px; background: var(--panel);
                border-radius: 6px; padding: 1px 3px; }
.block:hover .tools, .block.sel .tools { display: flex; }
.block .tools button { border: 0; background: none; color: var(--dim); cursor: pointer; padding: 0 4px; font-size: 13px; }
.block .tools button:hover { color: var(--fg); }
.block .fold { cursor: pointer; color: var(--faint); margin-right: 4px; user-select: none; }
.event { color: var(--dim); font-size: 14px; padding: 1px 6px; }
.event.strong .text { color: var(--accent); font-weight: 600; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
.chips .chip { cursor: default; }
.comment { color: var(--dim); font-style: italic; font-size: 13px; }
.tag { color: var(--accent2); } .project { color: #b8860b; } .context { color: var(--ok); } .due { color: var(--due); font-weight: 600; }
a.wiki { color: var(--accent); text-decoration: underline dotted; } a { color: var(--accent); }
code { background: var(--code); padding: 0 4px; border-radius: 4px; font-family: var(--mono); }
pre { background: var(--code); padding: 8px; border-radius: 6px; overflow-x: auto; }
pre code { background: none; padding: 0; border-radius: 0; }
blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--dim); }
table { border-collapse: collapse; } td, th { border: 0; border-bottom: 1px solid var(--line); padding: 5px 10px 5px 0; text-align: left; }
th { color: var(--dim); font-weight: 600; font-size: var(--fs-md); }
input.todo { float: left; margin: 5px 8px 0 0; }
img.att { max-width: min(520px, 100%); border-radius: 6px; display: block; margin: 4px 0; }
.thread { margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; }
.thread > .th { padding: 4px 10px; background: var(--panel); border-radius: 8px 8px 0 0; cursor: pointer; display: flex; gap: 8px; }
.thread > .th .n { color: var(--faint); font-size: 12px; margin-left: auto; }
.thread.folded > .tb { display: none; }
.thread .tb { padding: 2px 4px; }
footer { border-top: 1px solid var(--line); padding: 8px 16px; }
footer .row { display: flex; gap: 6px; align-items: flex-end; }
footer textarea { flex: 1; min-height: 42px; max-height: 200px; resize: vertical; padding: 9px 12px;
                  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--raised); color: var(--fg); font: inherit; }
footer .btn { border: 1px solid var(--line); background: var(--raised); color: var(--dim); border-radius: var(--r-lg);
              padding: 8px 10px; cursor: pointer; font: inherit; box-shadow: none; }
footer .hint { color: var(--faint); font-size: 12px; margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
footer .hint .x { cursor: pointer; color: var(--accent); }
#note { width: 100%; height: 100%; min-height: 60vh; border: 0; background: transparent; color: var(--fg);
        font: 15px/1.6 var(--mono); resize: none; outline: none; }
.notehtml { max-width: 760px; }
.notewrap { display: flex; gap: 18px; align-items: flex-start; min-height: 60vh; }
.notewrap > #note, .notewrap > .notehtml, .notewrap > .projform { flex: 1; min-width: 0; }
#ncomments { width: 280px; flex: none; border-left: 1px solid var(--line); padding-left: 14px; font-size: 13px;
             position: sticky; top: 0; max-height: 85vh; overflow: auto; }
#ncomments .nchead { color: var(--dim); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
#ncomments .nchead button { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 6px;
                            cursor: pointer; font: inherit; font-size: 12px; padding: 2px 8px; }
#ncomments .ncomment { margin: 0 0 12px; cursor: pointer; }
#ncomments .ncquote { color: var(--accent); font-size: 12px; margin-bottom: 2px; }
@media (max-width: 900px) { .notewrap { flex-direction: column; } #ncomments { width: auto; border-left: 0; padding-left: 0;
                            position: static; border-top: 1px solid var(--line); padding-top: 10px; } }
.notehtml .cell { border-left: 3px solid var(--line, #8884); padding-left: 10px; margin: 10px 0; }
.notehtml .cell.ok { border-left-color: #4caf50; }
.notehtml .cell.fail, .notehtml .cell.problem { border-left-color: #d9434f; }
.notehtml .cellbar { font-size: 12px; opacity: .8; display: flex; gap: 6px; align-items: center; }
.notehtml .cellbar button { border: none; background: #4caf5022; color: inherit; border-radius: 4px; cursor: pointer; padding: 1px 8px; }
.notehtml .cellout { background: #0001; border-radius: 6px; margin-top: 4px; }
.notehtml .cellout pre { margin: 0; padding: 6px 10px; font-size: 12px; white-space: pre-wrap; }
.notehtml .outhead { font-size: 11px; opacity: .6; padding: 4px 10px 0; }
.notehtml .params { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.notehtml .params input { width: 9em; }
.grid { border-collapse: collapse; width: 100%; } .grid td[contenteditable]:focus { outline: 2px solid var(--accent); }
.board { display: flex; gap: var(--sp3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--sp2); }
.col { background: var(--panel); border-radius: var(--r-lg); padding: var(--sp2); flex: 0 0 272px; min-height: 96px;
       border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.col.drop { outline: 2px dashed var(--accent); }
/* a folded column (Won't do): narrow, its dot and count, its name down it; a click opens it */
.col.folded { flex: 0 0 40px; min-height: 160px; padding: var(--sp2) 0; display: flex; flex-direction: column; align-items: center;
              gap: var(--sp2); cursor: pointer; color: var(--dim); font-size: var(--fs-sm); }
.col.folded:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.col.folded .count { font-variant-numeric: tabular-nums; }
.col.folded b { writing-mode: vertical-rl; font-weight: 600; white-space: nowrap; }
.colhead { display: flex; align-items: center; gap: var(--sp2); padding: 2px 4px var(--sp2); font-size: var(--fs-md); }
.colhead b { font-weight: 650; }
.colhead .count { color: var(--dim); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.colhead .grow { flex: 1; }
.col .over { color: var(--due); font-weight: 600; }
.card.dropbefore { box-shadow: 0 -3px 0 var(--accent); }
/* a board's columns scroll on their own (NL-225; NL-196's web half): the board fills the view, which doesn't scroll
   itself; each column is as tall as that lets it be, its cards scrolled under its head with a scrollbar you can see,
   "▲ N more" and "▼ N more" over them where cards are out of sight (app.js drawMore). In lanes, a column is at most
   most of the screen, and the page scrolls between lanes. */
#view:has(> .kanban) { display: flex; flex-direction: column; overflow: hidden; }
#view:has(> .kanban) > * { flex: none; }
#view > .kanban { flex: 1 1 0; min-height: 0; overflow-y: hidden; }
.kanban > .col { display: flex; flex-direction: column; max-height: min(75vh, 900px); }
#view > .kanban > .col { max-height: 100%; }
.colbody { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.colcards { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 26px;
            margin: -4px calc(-1 * var(--sp2)) -4px -4px; padding: 4px var(--sp2) 4px 4px; }
            /* (the cards where they were, the scrollbar at the column's edge, room for a card's outline) */
.colmore { position: absolute; left: 0; right: 0; height: 22px; line-height: 22px; text-align: center; z-index: 1;
           font-size: var(--fs-xs); color: var(--dim); cursor: pointer; user-select: none; }
.colmore[hidden] { display: none; }
.colmore:hover { color: var(--fg); }
.colmore.up { top: 0; background: linear-gradient(var(--panel) 65%, transparent); }
.colmore.down { bottom: 0; background: linear-gradient(transparent, var(--panel) 35%); }
/* scrollbars you can see where something scrolls on its own (a column, the board sideways, a hub's tabs too narrow
   for them: NL-248): never hidden, thin, in the theme's colours (WebKit's own where it has them — Safari,
   nimlog-window — else the standard ones) */
.colcards::-webkit-scrollbar, .kanban::-webkit-scrollbar { width: 8px; height: 8px; }
#hubBar::-webkit-scrollbar { height: 6px; }
.colcards::-webkit-scrollbar-thumb, .kanban::-webkit-scrollbar-thumb, #hubBar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--dim) 45%, transparent); border-radius: 4px; }
.colcards::-webkit-scrollbar-thumb:hover, .kanban::-webkit-scrollbar-thumb:hover, #hubBar::-webkit-scrollbar-thumb:hover { background: var(--dim); }
.colcards::-webkit-scrollbar-track, .kanban::-webkit-scrollbar-track, #hubBar::-webkit-scrollbar-track { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .colcards, .kanban, #hubBar { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--dim) 45%, transparent) transparent; }
}
.lanes { overflow-x: auto; } .lanes .board { overflow: visible; }
.lane { margin: 14px 0 4px; font-size: 13px; color: var(--dim); text-transform: none; position: sticky; left: 0; }
.boardhint { color: var(--faint); font-size: var(--fs-sm); margin: var(--sp2) 0; }
.card { background: var(--bg); border-radius: var(--r-md); padding: 6px 8px; margin: 6px 0; }
.board .card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp2) 10px;
               margin: 0 0 var(--sp2); box-shadow: var(--shadow-1); line-height: 1.35; font-size: 14px;
               transition: border-color .12s, box-shadow .12s; }
.board .card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-2); }
/* marked (shift- or ⌘-click): tinted with the accent's bar, as a marked block — the outline is the keys' alone */
.board .card.marked, .board .card.marked:hover { background: color-mix(in srgb, var(--accent) 14%, var(--raised));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: inset 3px 0 0 var(--accent), var(--shadow-1); }
table.grid tr.marked td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
table.grid tr.marked td.recmark { box-shadow: inset 3px 0 0 var(--accent); }
.board .card .meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 6px; font-size: var(--fs-sm);
                     color: var(--dim); }
.board .card .f-id { font-family: var(--mono); font-size: var(--fs-xs); color: var(--faint); }
.board .card .f-assignee::before { content: "@"; }
.board .card .f-importance[data-v=high] { color: var(--bad); font-weight: 600; }
.board .card .f-importance[data-v=low] { color: var(--faint); }
.card[draggable=true] { cursor: grab; }
/* (a message, not a label: raised over what's under it, beside the card when one's open — it read as a field's label
   beside a card's address: B4) */
.status { position: fixed; right: 16px; bottom: 16px; background: var(--raised); padding: 6px 12px; border-radius: 8px;
          color: var(--dim); display: none; z-index: 20; max-width: 80vw; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
@media (min-width: 1100px) {
  #side.open + .status { right: calc(var(--sidew, min(420px, 90vw)) + 16px); max-width: 40vw; }
  #side.open.wide + .status { right: calc(var(--sidew, min(600px, 95vw)) + 16px); }
}
/* (a card over the page from the right, with room left of it: beside it there too) */
@media (min-width: 900px) and (max-width: 1100px) {
  #side.open + .status { right: calc(var(--sidew, min(560px, 88vw)) + 16px);
    max-width: max(0px, calc(100vw - var(--sidew, min(560px, 88vw)) - 32px)); }
  #side.open.wide + .status { right: calc(var(--sidew, min(600px, 92vw)) + 16px);
    max-width: max(0px, calc(100vw - var(--sidew, min(600px, 92vw)) - 32px)); }
}
/* (no room beside it — a phone, a narrow window: at the card's foot, its width, and the card's last line scrolls
   clear of it) */
@media (max-width: 899px) {
  #side.open + .status { left: auto; right: 0; bottom: 0; width: var(--sidew, min(560px, 88vw)); max-width: none;
    box-sizing: border-box; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
  #side.open.wide + .status { width: var(--sidew, min(600px, 92vw)); }
  #side.open .sb { padding-bottom: 48px; }
}
@media (max-width: 760px) { #side.open + .status { width: 100vw; }
  #side.open.wide + .status { width: var(--sidew, min(600px, 95vw)); } }   /* (the card's widths there) */
.hits div { padding: 4px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
svg.timeline { margin: 8px 0 12px; } svg.timeline text { fill: var(--fg); font-size: 12px; }
svg.timeline .axis, svg.timeline .tick { fill: var(--dim); stroke: var(--line); }
svg.timeline .group { font-weight: 600; } svg.timeline .bar { fill: var(--accent); opacity: .45; }
svg.timeline .done { fill: var(--accent); } svg.timeline .today { stroke: var(--accent); stroke-dasharray: 3 3; }
.viewtabs { gap: 2px; }
.viewtabs a { padding: 3px 10px; border-radius: 999px; text-decoration: none; color: var(--dim); font-size: var(--fs-md); }
.viewtabs a:hover { background: var(--sel); color: var(--fg); }
.viewtabs a.active { background: var(--sel); color: var(--fg); font-weight: 600; }
.viewtabs a small { opacity: .6; margin-left: 2px; }
.card.rich { border-left: 3px solid var(--accent); margin: 6px 0; max-width: 640px; background: var(--panel); }
.card.rich .ct { font-weight: 600; } .card.rich .cs { color: var(--dim); font-size: 13px; }
.card.rich .cd { margin: 4px 0; } .cstatus { font-size: 12px; } .cstatus.open, .cstatus.answered { color: var(--ok); }
.cstatus.merged { color: var(--accent2); } .cstatus.closed { color: var(--due); }
.more { text-align: center; margin: 8px 0; } .more a { color: var(--dim); }
#complete { display: none; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
            margin-bottom: 6px; max-height: 240px; overflow-y: auto; }
#complete div { padding: 4px 10px; cursor: pointer; display: flex; gap: 12px; }
#complete div.on { background: var(--sel); } #complete .u { color: var(--dim); font-size: 13px; }
#complete .h { color: var(--faint); font-size: 13px; margin-left: auto; text-align: right; }
#complete div.hint { color: var(--faint); font-size: 12px; cursor: default; border-top: 1px solid var(--line); }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.3); display: none; align-items: flex-start;
         justify-content: center; padding-top: 8vh; z-index: 10; }
.modal .box { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; width: min(680px, 94vw);
              box-shadow: 0 16px 48px rgba(0,0,0,.3); overflow: hidden; max-height: 84vh; display: flex; flex-direction: column; }
.modal input { width: 100%; padding: 14px 16px; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); font: inherit;
               font-size: 16px; background: var(--raised); color: var(--fg); outline: none; box-shadow: none; }
.modal .list { overflow-y: auto; padding: var(--sp1); }
.modal .pscope { padding: 6px 16px; color: var(--faint); font-size: 12px; border-bottom: 1px solid var(--line); }
.modal .list div.pempty { color: var(--faint); cursor: default; }
.modal .list div { padding: 7px 12px; display: flex; gap: 12px; cursor: pointer; border-radius: var(--r-md); }
.modal .list div.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); } .modal .list .d { color: var(--faint); font-size: 13px; margin-left: auto; text-align: right; }
.topicpick .combo { display: block; }   /* (the box clips what overflows it: the list in its flow, the box grown to hold it) */
.topicpick .fieldlist { position: static; max-height: 50vh; margin: var(--sp1); }
.topicpick .hint { margin: 0; padding: 8px 14px; color: var(--faint); font-size: 13px; }
.modal h3 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
#side { width: 0; overflow: hidden; border-left: 1px solid var(--line); background: var(--panel); height: 100vh;
        display: flex; flex-direction: column; position: relative; }
#side.open { width: var(--sidew, min(420px, 90vw)); }
#side.open.wide { width: var(--sidew, min(600px, 95vw)); }
#side:not(.open) { visibility: hidden; }     /* (put away: out of Tab's way, and nothing in it keeps the keys) */
#sideGrip { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 3; }
#sideGrip:hover, #side.resizing #sideGrip { background: color-mix(in srgb, var(--accent) 40%, transparent); }
#side.resizing { user-select: none; }
#side .rectitle { width: 100%; font: 650 var(--fs-lg) var(--font, inherit); padding: 6px 8px; margin: 4px 0 var(--sp3);
                  box-sizing: border-box; background: transparent; border-color: transparent; box-shadow: none; }
#side .rectitle:hover { border-color: var(--line); }
#side textarea { width: 100%; box-sizing: border-box; font: inherit; }
#side .recstatus { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: var(--sp3); }
#side .recstatus button { border-radius: 0; margin: 0 -1px 0 0; box-shadow: none; display: inline-flex; gap: 6px; align-items: center; }
#side .recstatus button:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
#side .recstatus button:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
#side .reccomment { border-top: 1px solid var(--line); padding: var(--sp2) 0; }
#side .recacts { margin: 0 0 var(--sp3); gap: 6px; }
/* an issue's card as a form (B4): each part as it reads, ✎ to edit it in place; "not saved", a draft, what changed under it */
#side .rectitlebox { display: flex; align-items: center; gap: var(--sp2); }
#side .rectitlebox .rectitle { flex: 1; min-width: 0; }
#side .recsec { padding: var(--sp1) var(--sp2); margin: 0 calc(-1 * var(--sp2)); border-radius: var(--r-md); }
#side .recsec + .recsec { margin-top: var(--sp1); }
#side .recsec .sechead { display: flex; align-items: center; gap: var(--sp2); min-height: 26px; }
#side .recsec h5 { margin: 0; font-size: var(--fs-md); font-weight: 650; color: var(--fg); }
#side .recsec > .body > :first-child { margin-top: 0; } #side .recsec > .body > :last-child { margin-bottom: 0; }
#side .recsec .sechead .grow { flex: 1; }
#side .recsec .secedit { padding: 1px 8px; font-size: var(--fs-sm); color: var(--dim); opacity: .55; }
#side .recsec .body .hint, #side .recsec .toolbar .hint { color: var(--faint); font-size: var(--fs-sm); }
#side .recsec:hover .secedit, #side .recsec:focus-within .secedit, #side .recsec:focus .secedit { opacity: 1; }
#side .recsec:hover:not(.editing) { background: color-mix(in srgb, var(--accent) 5%, transparent); }
#side .recsec.editing { background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-1); padding: var(--sp2); margin: var(--sp1) 0; }
#side .recsec.editing textarea { font: 13px/1.5 var(--mono); margin-top: var(--sp1); resize: vertical; }
#side .recsec.editing .toolbar { margin: var(--sp1) 0 0; }
#side .reccomment.editing { padding: var(--sp1) 0; }
#side .reccomment.editing .recsec.editing { margin: 0; }
.secmark { font-size: var(--fs-xs); padding: 1px 7px; border-radius: 999px; white-space: nowrap; font-weight: 600; }
.secmark.dirty { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.secmark.draft { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.secmark.draft.conflict { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.recconflict { margin: var(--sp1) 0; padding: 4px 8px; border-left: 3px solid var(--warn); border-radius: var(--r-sm);
               background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: var(--fs-sm); }
.recconflict button { padding: 0 6px; font-size: var(--fs-sm); color: var(--accent); font-weight: 600; }
/* (theirs, as stored now, beside yours: to choose between them seeing both) */
.rectheirs { margin: var(--sp1) 0; padding: 2px 8px; border-left: 3px solid var(--warn); border-radius: var(--r-sm);
             font-size: var(--fs-sm); }
.rectheirs summary { color: var(--dim); cursor: pointer; }
.rectheirs .body { max-height: 12em; overflow: auto; margin: var(--sp1) 0; }
.rectheirs .body > :first-child { margin-top: 0; } .rectheirs .body > :last-child { margin-bottom: 0; }
#side .recadd { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp2) 0; }
#side .recadd button { font-size: var(--fs-sm); color: var(--dim); border-style: dashed; }
#side .recpre { color: var(--dim); }
#side .morefields { margin: var(--sp2) 0; }
#side .morefields summary { color: var(--faint); font-size: var(--fs-md); cursor: pointer; padding: 2px 0; }
#side .morefields[open] summary { margin-bottom: var(--sp2); }
a.issueref { font-family: var(--mono); font-size: .92em; text-decoration: none; padding: 0 3px; border-radius: var(--r-sm);
             background: color-mix(in srgb, var(--accent) 12%, transparent); }
a.issueref:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
#side .reccomment small { color: var(--dim); }
#side .kv input, #side .kv select { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 3px 7px; }
.card.open { cursor: pointer; } .board .card { cursor: pointer; }
#side .sh { display: flex; padding: var(--sp2) var(--sp4); border-bottom: 1px solid var(--line); align-items: center; gap: 8px;
            min-height: 48px; }
#side .sh b { flex: 1; font-size: var(--fs-md); color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
#side .sh button { border: 0; background: none; box-shadow: none; color: var(--dim); cursor: pointer; font-size: 18px; }
#side .sb { overflow-y: auto; padding: var(--sp3) var(--sp4) var(--sp5); font-size: 14px; flex: 1; }
#side .sb h4 { margin: var(--sp4) 0 var(--sp2); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--faint); }
#side .sb .kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp2); align-items: center; margin: 3px 0; }
#side .sb .kv span:first-child { color: var(--dim); font-size: var(--fs-md); }
/* one field component (B2): a choice, chips, a combobox with its list, a date, an address with ↗, a checkbox */
.combo, .fieldurl, .fieldmulti { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.combo > input, .fieldurl > input { flex: 1; min-width: 6em; }
.combo > .fielderr, .fieldurl > .fielderr { flex-basis: 100%; }
.fieldmulti .chip { cursor: pointer; } .fieldmulti .combo { flex: 1; min-width: 7em; }
.fieldmulti .fieldadd { border-style: dashed; }
.fieldopen { text-decoration: none; padding: 0 4px; color: var(--accent); font-size: 16px; }
#side .sb .kv input[type=checkbox] { justify-self: start; }
.fieldro { color: var(--dim); }
pre.fieldro { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-family: var(--mono, monospace); }
.fieldlist { position: absolute; z-index: 40; top: 100%; left: 0; right: 0; min-width: 14em; max-height: 15em; overflow-y: auto;
             margin: 2px 0 0; padding: 3px; list-style: none; background: var(--raised); border: 1px solid var(--line);
             border-radius: var(--r-md); box-shadow: 0 6px 18px color-mix(in srgb, var(--fg) 14%, transparent); }
.fieldlist li { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: var(--r-sm); cursor: pointer; }
.fieldlist li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fieldlist li small { color: var(--dim); font-family: var(--mono); font-size: var(--fs-xs); white-space: nowrap; }
.fieldlist li:hover { background: var(--sel); }
.fieldlist li[aria-selected=true] { background: color-mix(in srgb, var(--accent) 18%, transparent);
                                    box-shadow: inset 2px 0 0 var(--accent); }
.fieldlist li.none { color: var(--faint); cursor: default; }
.grid td.ctlcell { padding: 2px 4px; } .grid td.ctlcell :where(select, input) { width: 100%; font-size: var(--fs-md); padding: 2px 5px; }
.grid td.ctlcell input[type=checkbox] { width: auto; }
.grid td.ctlcell .fieldmulti { flex-wrap: nowrap; }
.ff .combo input, .ff .fieldurl input { font: inherit; }
/* a value refused (B1): the field marked, why said beside it; what was typed stays in it */
[aria-invalid=true]:where(input, select, textarea, td) { border-color: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.grid td[contenteditable][aria-invalid=true] { outline: 2px solid var(--bad); outline-offset: -2px; box-shadow: none; }
.fielderr { color: var(--bad); font-size: var(--fs-sm); line-height: 1.4; padding: 2px 0 2px var(--sp2);
            border-left: 2px solid var(--bad); margin: 2px 0; overflow-wrap: anywhere; }
#side .sb .kv .fielderr { grid-column: 2; margin-top: -1px; }
.recstatus + .fielderr, .toolbar .fielderr, p > .fielderr { flex-basis: 100%; }
.grid tr.fielderrrow td { padding-top: 0; border-top: 0; }
/* a project's note as its form (D4a): a label and its control a row, what it takes under the control; one column on a
   phone, nothing wider than the page */
.projform { max-width: 760px; }
.projform .pfintro { margin: 0 0 var(--sp3); }
.projform .pfrow { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--sp2) var(--sp3); align-items: start;
                   padding: 7px 0; border-bottom: 1px solid var(--line); }
.projform .pfrow > label { color: var(--dim); padding-top: 5px; font-size: var(--fs-md); }
.projform .pfctl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.projform .pfctl :where(input:not([type=checkbox]), select, textarea) { font: inherit; padding: 4px 8px; min-width: 0; width: 100%;
                                                                       box-sizing: border-box; }
.projform .pfctl textarea { font-family: var(--mono); font-size: var(--fs-sm); resize: vertical; }
.projform .pfhint { color: var(--faint); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.projform .pfpage { margin: var(--sp5) 0 var(--sp2); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--faint); }
/* a service's (D4b): its parts listed at the top, each a heading over its fields; a part's last row, adding one, quieter */
.projform .pfparts { display: flex; flex-wrap: wrap; gap: 4px var(--sp3); margin: 0 0 var(--sp3); font-size: var(--fs-md); }
.projform .pfparts a { color: var(--accent); text-decoration: none; }
.projform .pfparts a:hover, .projform .pfparts a:focus-visible { text-decoration: underline; }
.projform .pfpart { margin: var(--sp4) 0 0; padding-bottom: 4px; font-size: var(--fs-xs); letter-spacing: .08em; color: var(--dim);
                    text-transform: uppercase; border-bottom: 1px solid var(--line); scroll-margin-top: var(--sp3); }
.projform .pfpart:first-child { margin-top: 0; }
.projform .pfadd > label { color: var(--faint); }
.projform .pfrow > label { overflow-wrap: anywhere; }
@media (max-width: 760px) { .projform .pfrow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
                            .projform .pfrow > label { padding-top: 0; } }
.places .sec { margin: 14px 0 4px; font-size: 11px; letter-spacing: .08em; color: var(--faint); }
.places .pl { display: flex; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); align-items: baseline; flex-wrap: wrap; }
.places .pl .dot { color: var(--faint); } .places .pl.on .dot { color: var(--ok); }
.places .pl .nm { font-weight: 600; } .places .pl .dt { color: var(--dim); font-size: 13px; flex: 1 1 260px; overflow-wrap: anywhere; }
.places .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.places button, .btnline button { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 6px;
                  padding: 2px 8px; cursor: pointer; font: inherit; font-size: 13px; }
.qr { background: #fff; padding: 6px; display: inline-block; border-radius: 6px; margin: 6px 0; }
.chess { display: grid; grid-template-columns: repeat(8, min(9vw, 48px)); grid-template-rows: repeat(8, min(9vw, 48px));
         border: 2px solid var(--line); width: max-content; margin: 8px 0; user-select: none; }
.chess div { display: flex; align-items: center; justify-content: center; font-size: min(7vw, 34px); cursor: pointer; color: #111; }
.chess .l { background: #e8dcc0; } .chess .d { background: #b58863; } .chess .last { box-shadow: inset 0 0 0 3px rgba(80,140,200,.7); }
.chess .pick { box-shadow: inset 0 0 0 3px #e2b007; }
.ttt { display: grid; grid-template-columns: repeat(3, 64px); gap: 4px; margin: 8px 0; }
.ttt div { height: 64px; background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 32px; cursor: pointer; border-radius: 6px; }
.gamepane { border-bottom: 1px solid var(--line); padding: 4px 0 8px; margin-bottom: 6px; }
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lib .it { background: var(--panel); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.lib .it .t { font-weight: 600; overflow-wrap: anywhere; } .lib .it .s { color: var(--dim); font-size: 12px; }
.lib .it button { border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 6px; cursor: pointer;
                  font: inherit; font-size: 13px; padding: 2px 6px; }
.drop-hint { outline: 2px dashed var(--accent); outline-offset: -6px; }
body.compact { grid-template-columns: 1fr auto; }
body.compact aside { display: none; }
body.compact header { padding: 6px 10px; } body.compact #view { padding: 4px 10px 10px; }
body.compact footer { padding: 6px 10px; } body.compact footer .hint { display: none; }
body.compact header h1 { font-size: 15px; }
/* phones: the sidebar becomes a drawer, columns fold into the message */
@media (max-width: 760px) {
  body { grid-template-columns: 1fr; font-size: 16px; }
  #burger { display: block; }
  aside { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 15; transform: translateX(-100%);
          transition: transform .2s; box-shadow: 0 0 30px rgba(0,0,0,.3); }
  body.drawer aside { transform: none; }
  .block, .event { grid-template-columns: 1fr !important; gap: 0; }
  .block .time, .block .who, .block .topic { display: inline; margin-right: 6px; }
  .block .tools { display: flex; position: static; background: none; justify-content: flex-end; }
  #side.open { position: fixed; right: 0; top: 0; bottom: 0; width: 100vw; z-index: 16; }
  header .meta { display: none; }
  footer textarea { font-size: 16px; }
  .modal { padding-top: 0; } .modal .box { width: 100vw; max-height: 100vh; border-radius: 0; height: 100vh; }
}

/* marking several blocks */
.block.marked { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.blockdrop { outline: 2px dashed var(--accent); outline-offset: 1px; border-radius: 6px; }
#markbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 16px; border-top: 1px solid var(--line);
           background: var(--panel); font-size: 13px; }
#markbar button { border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 6px; cursor: pointer;
                  padding: 2px 8px; font: inherit; }
#markbar .hint { color: var(--faint); margin-left: auto; }

/* ---------------------------------------------------------------- messages, like a chat app
   Each message group is a soft card; a person's name keeps one hue; in shared
   documents yours are tinted with the accent, everyone else's with their hue.
   Mentions of you, guests and pins stand out; a group's later messages drop
   the name and time (they come back on hover). */
#view .block { background: var(--card); margin-top: 6px; padding: 5px 8px; border-radius: 10px; }
#view .block.cont { margin-top: 1px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
#view .block.cont .who, #view .block.cont .time { visibility: hidden; }
#view .block.cont:hover .time { visibility: visible; }
#view .block .who { color: hsl(var(--hue) 55% var(--whoL)); }
#view.shared .block.mine { background: color-mix(in srgb, var(--accent) 9%, transparent); }
#view.shared .block.other { background: hsl(var(--hue) 60% 55% / .08); }
#view .block.guest { background: transparent; border: 1px dashed var(--line); }
#view .block.mention { background: color-mix(in srgb, var(--mention) 13%, transparent); box-shadow: inset 3px 0 0 var(--mention); }
#view .block.pinned { box-shadow: inset 3px 0 0 var(--due); }
#view .block:hover, #view .block.sel { background: var(--sel); }
#view .block.marked { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
#view .block.reply { background: var(--card2); margin-top: 2px; }
#view .event { margin-top: 2px; }
.block .body pre, .block .body blockquote, .block img.att, .block .card.rich { border-radius: 8px; }
.block .body blockquote { background: var(--card2); padding: 4px 10px; border-left-width: 3px; }
.chip.replies { cursor: pointer; color: var(--accent); }
/* the floating tools: a pill above the message's corner */
.block .tools { top: -12px; right: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
                box-shadow: 0 2px 8px rgba(0,0,0,.12); background: var(--bg); z-index: 2; }
/* outlines: a bullet per item and a guide per level */
#view.outline .block { background: transparent; margin-top: 0; border-radius: 6px; padding-top: 2px; padding-bottom: 2px; }
#view.outline .block.reply { margin-left: 0; padding-left: calc(var(--depth) * 24px + 8px);
  background-image: repeating-linear-gradient(to right, transparent 0 11px, var(--line) 11px 12px, transparent 12px 24px);
  background-size: calc(var(--depth) * 24px) 100%; background-repeat: no-repeat; }
#view.outline .block .body::before { content: "•"; color: var(--faint); margin-right: 8px; float: left; }
#view.outline .block.todoish .body::before { content: none; }
#view.outline .block:hover, #view.outline .block.sel { background-color: var(--sel); }
/* threads: a card per topic */
#view.threads .thread { border-radius: 12px; background: var(--card); border-color: transparent; }
#view.threads .thread > .th { background: transparent; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0;
                              padding: 6px 12px; }
#view.threads .thread .tb { padding: 4px 6px 8px; }
#view.threads .block { background: transparent; }
#view.threads .block:hover, #view.threads .block.sel { background: var(--sel); }
/* the terminal look keeps its plain rows */
body.terminal #view .block { border-radius: 0; margin-top: 0; background: transparent; padding: 1px 6px; }
body.terminal #view .block.mine .who { color: var(--accent); }
body.terminal #view.shared .block.other { background: transparent; }
body.terminal #view .block:hover, body.terminal #view .block.sel { background: var(--sel); }
body.terminal #view .block.marked { background: color-mix(in srgb, var(--accent) 16%, transparent); }

@media (max-width: 760px) {
  /* phones: the tools of the message you tapped, under it; a group's names and times once */
  #view .block .tools { display: none; position: static; box-shadow: none; border: 0; background: none;
                        justify-content: flex-end; margin-top: 2px; }
  #view .block.sel .tools { display: flex; }
  #view .block.cont .who, #view .block.cont .time { display: none; }
  #view .block .time { margin-right: 6px; }
}

/* a game session's bar: who's waiting, invites, guests */
.sessionbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.sessionbar .grow { flex: 1; }
.sessionbar .waiting { display: inline-flex; gap: 6px; align-items: center; background: color-mix(in srgb, var(--mention) 14%, transparent);
                       padding: 3px 8px; border-radius: 999px; }
.inviteform { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.inviteform select { font: inherit; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; }

/* typed blocks: highlighted code, data, diffs, output, callouts, diagrams, live queries, attachments */
pre.code, pre.output, pre.diff { position: relative; }
pre .copy { position: absolute; top: 4px; right: 4px; border: none; background: transparent; color: inherit;
  opacity: 0; cursor: pointer; font-size: 13px; }
pre:hover .copy { opacity: .6; }
.hl-kw { color: #6f42c1; font-weight: 600; } .hl-str { color: #22863a; } .hl-com { color: #8b949e; font-style: italic; }
.hl-num { color: #b76b01; } .hl-key { color: #005cc5; } .hl-var { color: #a0469c; } .hl-type { color: #0b7a75; }
@media (prefers-color-scheme: dark) {
  .hl-kw { color: #c792ea; } .hl-str { color: #a3be8c; } .hl-com { color: #6b7280; } .hl-num { color: #f78c6c; }
  .hl-key { color: #82aaff; } .hl-var { color: #d39ad6; } .hl-type { color: #8fbcbb; }
}
pre.output { background: #0002; } pre.output .out-head { opacity: .55; font-size: 11px; } pre.output .out-err { color: #d9434f; }
pre.diff .d-add { color: #2e8b57; } pre.diff .d-del { color: #d9434f; } pre.diff .d-hunk { color: #8e44ad; }
pre.diff .d-meta { opacity: .6; }
/* a diff (text/diffview): a line each where it's narrow, its sides beside each other where there's room */
.diffview { width: 100%; max-width: 100%; }
.diffview pre.diff span.d-add, .diffview table.sbs td.d-add { display: inline-block; min-width: 100%; color: inherit;
  background: color-mix(in srgb, #2ea043 14%, transparent); }
.diffview pre.diff span.d-del, .diffview table.sbs td.d-del { display: inline-block; min-width: 100%; color: inherit;
  background: color-mix(in srgb, #f85149 14%, transparent); }
.diffview table.sbs td.d-add, .diffview table.sbs td.d-del { display: table-cell; }
.diffview .d-add mark { background: color-mix(in srgb, #2ea043 38%, transparent); color: inherit; border-radius: 2px; }
.diffview .d-del mark { background: color-mix(in srgb, #f85149 38%, transparent); color: inherit; border-radius: 2px; }
.diffview table.sbs { display: none; width: 100%; border-collapse: collapse; table-layout: fixed;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.diffview table.sbs td { padding: 0 6px; white-space: pre-wrap; word-break: break-all; vertical-align: top; }
.diffview table.sbs col.ln { width: 3.5em; }
.diffview table.sbs td.ln { text-align: right; opacity: .5; user-select: none; }
.diffview table.sbs td.d-hunk { color: #8e44ad; padding: 4px 6px; } .diffview table.sbs td.d-meta { opacity: .6; }
@media (min-width: 1100px) {
  .diffview pre.diff.unified { display: none; }
  .diffview table.sbs { display: table; }
}
table.data { border-collapse: collapse; font-size: 13px; margin: 6px 0; }
table.data th, table.data td { border: 1px solid #8884; padding: 2px 8px; text-align: left; }
table.data th { cursor: pointer; background: #8881; }
.jsontree { font: 12px/1.5 ui-monospace, monospace; }
.jsontree ul { list-style: none; margin: 0; padding-left: 16px; } .jsontree summary { cursor: pointer; opacity: .7; }
.callout { border-left: 4px solid #3d6be0; background: #3d6be014; border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.callout .ct { font-weight: 600; } .callout.good { border-color: #4caf50; background: #4caf5014; }
.callout.warn { border-color: #e0a100; background: #e0a10014; } .callout.bad { border-color: #d9434f; background: #d9434f14; }
.mermaid-src svg { max-width: 100%; height: auto; }
.query { border: 1px dashed #8886; border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.query .qhead { font-size: 12px; opacity: .7; margin-bottom: 4px; } .query .qrow { font-size: 13px; }
.att-pdf embed { width: 100%; height: 70vh; border: 1px solid #8884; border-radius: 6px; }
.att-text pre { max-height: 50vh; overflow: auto; font-size: 12px; }
video.att { max-width: 100%; border-radius: 6px; }

/* going back in time */
#historyBar { background: var(--code); border-radius: 8px; padding: 6px 10px; margin: 6px 12px; font-size: 13px; }
#historyBar .hb-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0; }
#historyBar input[type=range] { flex: 1; min-width: 120px; }
#historyBar button { border: 1px solid #8884; background: transparent; color: inherit; border-radius: 6px; cursor: pointer; padding: 2px 8px; }
#historyBar button.primary { background: var(--accent, #3d6be0); color: #fff; border: none; }
#historyBar .hb-when { opacity: .8; } #historyBar .hb-what { flex: 1; opacity: .8; }
#historyBar .hb-picture { height: 144px; image-rendering: pixelated; border-radius: 4px; }
#historyBar .hb-checkpoint:empty { display: none; }

/* the sidebar's mini pane */
#statsPane { margin: 14px 8px 8px; font-size: 11px; line-height: 1.5; opacity: .7; cursor: pointer; font-family: var(--mono); }
#statsPane:hover { opacity: 1; } #statsPane .warn { color: #d9434f; opacity: 1; }

/* reading a book (library/reading): the reading document's head, the reader */
.rd-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; padding: 8px 10px;
  background: var(--code); border-radius: 8px; }
.rd-head span:first-child { flex: 1; }
.rd-head button, .rd-bar button, .rd-notes button { border: 1px solid #8884; background: transparent; color: inherit;
  border-radius: 6px; cursor: pointer; padding: 3px 10px; }
.rd-head button.primary, .rd-bar button.primary { background: var(--accent, #3d6be0); color: #fff; border: none; }
.rd-bar { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 6px 0; background: var(--bg); border-bottom: 1px solid #8883; }
.rd-bar select { max-width: 40ch; }
.rd-title { font-weight: 600; } .rd-who { flex: 1; opacity: .7; font-size: 13px; }
.rd-tog { opacity: .8; font-size: 13px; white-space: nowrap; } #rdMode { font-size: 12px; max-width: 11em; }
.rd-text { max-width: 38em; margin: 18px auto 40vh; font-family: Georgia, "Iowan Old Style", serif; font-size: 19px;
  line-height: 1.6; }
.rd-text p, .rd-text blockquote, .rd-text h3, .rd-text pre { position: relative; }
.rd-text blockquote { opacity: .85; border-left: 3px solid #8885; margin-left: 0; padding-left: 1em; }
.rd-text .pic img { max-width: 100%; }
.rd-hl { background: color-mix(in srgb, var(--accent, #3d6be0) 14%, transparent); border-radius: 3px;
  box-shadow: -6px 0 0 color-mix(in srgb, var(--accent, #3d6be0) 60%, transparent); }
.rd-at { position: absolute; right: -7.5em; top: 0; font: 12px var(--mono, monospace); opacity: .65; white-space: nowrap; }
@media (max-width: 1100px) { .rd-at { position: static; float: right; margin-left: 8px; } }
.rd-mark { position: fixed; z-index: 30; border: none; border-radius: 6px; padding: 5px 12px; cursor: pointer;
  background: var(--accent, #3d6be0); color: #fff; box-shadow: 0 2px 8px #0004; }
.rd-comic { text-align: center; margin: 12px 0; } .rd-comic img { max-width: 100%; max-height: 82vh; }
.rd-notes { max-width: 40em; margin: 0 auto 20px; display: grid; gap: 6px; }

/* the history's timeline (app/doctimeline) */
#tlStrip svg { width: 100%; display: block; cursor: pointer; }
#tlStrip .tl-tick { font: 10px var(--mono, monospace); fill: var(--dim); }
#tlStrip .tl-lane { font: 11px var(--font, sans-serif); fill: var(--dim); }
#tlStrip .tl-rule { stroke: #8882; }
#tlStrip .tl-mark { font: 13px var(--mono, monospace); text-anchor: middle; fill: var(--accent, #3d6be0); }
#tlStrip .tl-commented, #tlStrip .tl-reacted { fill: #a3be8c; }
#tlStrip .tl-deleted, #tlStrip .tl-rewound { fill: #bf616a; }
#tlStrip .tl-todo, #tlStrip .tl-organized { fill: #d08770; }
#tlStrip .tl-people, #tlStrip .tl-forked { fill: #b48ead; font-weight: 700; }
#tlStrip .tl-checkpoint, #tlStrip .tl-played, #tlStrip .tl-edited { fill: #88c0d0; }
#tlStrip .tl-cur { stroke: var(--accent, #3d6be0); stroke-width: 2; }
#historyBar .hb-tools button { padding: 1px 7px; }
.cmp { padding: 4px 0; border-bottom: 1px solid #8882; } .cmp b { display: inline-block; width: 1.2em; }
.cmp-added b { color: #4c9a5a; } .cmp-removed b { color: #bf616a; } .cmp-edited b { color: #d08770; }

/* a block being edited, live (Phase 62) */
.edit-box { width: 100%; box-sizing: border-box; font: inherit; color: inherit; background: var(--panel);
  border: 1px solid var(--accent, #3d6be0); border-radius: 6px; padding: 6px 8px; resize: vertical; }

/* what's known about an attachment (media/info) */
.att-about { font-size: 12px; opacity: .7; margin: 2px 0 4px; }
.media-tree .mt-row { font: 12px var(--mono, monospace); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-tree .mt-row:hover { background: #8882; } .media-tree i { opacity: .7; }
.media-hex pre { font: 11px var(--mono, monospace); overflow-x: auto; }
.att-about[data-media] { cursor: pointer; }
.live { position: relative; display: inline-block; }
.live .live-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; pointer-events: none; }
.live.playing .live-v { opacity: 1; }
.live .live-badge { position: absolute; left: 8px; top: 8px; font: 600 11px var(--font, sans-serif); color: #fff; background: #0006; padding: 2px 6px; border-radius: 4px; }

/* the Tasks page */
.taskbar { margin: 6px 0 10px; }
.taskbar input { width: 100%; box-sizing: border-box; padding: 6px 8px; background: var(--panel);
  color: inherit; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.block.task .acts { display: none; margin-left: 6px; }
.block.task:hover .acts { display: inline; }
.block.task .acts button { background: none; border: 1px solid var(--line); border-radius: 4px; color: inherit;
  cursor: pointer; padding: 0 5px; margin-left: 2px; }
h3 .n { color: var(--faint); font-weight: normal; font-size: 12px; }

/* the sync map */
.syncmap { overflow-x: auto; margin-bottom: 8px; }
.syncmap table { border-collapse: collapse; font-size: 13px; }
.syncmap th, .syncmap td { text-align: left; vertical-align: top; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); }
.syncmap .dim, .places .dim { color: var(--dim); font-size: 12px; }

/* ![[embeds]] and a cell's markdown result */
.embed { border-left: 3px solid var(--accent2); padding: 4px 10px; margin: 6px 0; background: var(--panel); border-radius: 0 6px 6px 0; }
.embed .ehead { font-weight: 600; margin-bottom: 2px; }
.embed .ehead a { color: inherit; text-decoration: none; }
.embed .eline { font-size: 13px; white-space: pre-wrap; }
.embed .dim, .embed .eline.dim { color: var(--dim); }
.cellout.result { white-space: normal; }

/* terminals */
.termpanel { position: fixed; right: 16px; bottom: 16px; width: min(900px, 92vw); height: min(520px, 70vh); z-index: 40;
  display: flex; flex-direction: column; background: #1b1d23; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35); resize: both; overflow: hidden; }
.termbar { display: flex; gap: 8px; align-items: center; padding: 4px 8px; color: #d8dee9; font-size: 12px; }
.termbar .grow { flex: 1; }
.termbar button { background: none; border: 1px solid #444; color: #d8dee9; border-radius: 4px; cursor: pointer; }
.termbox { flex: 1; min-height: 0; padding: 2px 4px; }
.cast { background: #1b1d23; border-radius: 6px; padding: 4px; margin: 4px 0; cursor: pointer; overflow-x: auto; }
.cast .castbar { color: #8a93a6; font-size: 12px; padding: 2px 4px; }
.cast-play { background: none; border: none; color: #d8dee9; cursor: pointer; font: inherit; }

.entity { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.entity summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.entity .ent-icon { width: 1.4em; text-align: center; }
.entity .hint { margin-left: auto; }
.ent-refs { padding: 4px 0 4px 2em; font-size: 13px; }
.ent-refs .hint { margin-left: 8px; }

.gallery .card { width: 220px; }
.gallery .gpic { display: block; width: 100%; height: 160px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; cursor: zoom-in; }
/* pictures, big (B6): every picture to be looked at opens in the one lightbox — a click, or Enter on one with the
   keys (outlined in the accent, as everything with the keys). The picture fitted to the window with a margin, its
   caption, n of N and its keys, ← →, the original and "copy as a picture" under it; on a phone the bar wraps, its
   buttons big enough for a thumb */
img[data-lb] { cursor: zoom-in; }
img[data-lb]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img.mdimg { display: block; max-width: min(640px, 100%); max-height: 70vh; height: auto; border-radius: 6px; margin: 6px 0;
            border: 1px solid var(--line); background: var(--card2, transparent); }
a.imglink { white-space: nowrap; }
#lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .9); z-index: 1000; display: flex; flex-direction: column;
  color: #eee; cursor: zoom-out; overscroll-behavior: contain; }
/* (a swipe is the lightbox's: not the browser's back a page, nor the page scrolled under it) */
html:has(#lightbox) { overscroll-behavior-x: none; }
#lightbox .lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px 16px 0;
  touch-action: pinch-zoom; }
#lightbox .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
#lightbox .lb-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  cursor: default; flex-wrap: wrap; justify-content: center; }
#lightbox .lb-cap { flex: 0 1 auto; min-width: 0; text-align: center; font-size: 14px; }
#lightbox .lb-about { color: #aaa; font-size: 13px; }
#lightbox .lb-n { color: #ccc; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#lightbox button { background: #ffffff1a; color: #eee; border: 1px solid #ffffff33; border-radius: 6px; min-width: 40px;
  min-height: 36px; font-size: 16px; cursor: pointer; }
#lightbox button:hover:not(:disabled) { background: #ffffff33; }
#lightbox button:disabled { opacity: .35; cursor: default; }
#lightbox .lb-orig { color: #9ecfe0; font-size: 13px; white-space: nowrap; }
#lightbox .lb-copy { font-size: 13px; padding: 0 10px; white-space: nowrap; }
#lightbox .lb-hint { color: #999; font-size: 12px; white-space: nowrap; }
/* (the accent of the dark look, whatever the page's: the light one's is too dark on the black around the picture) */
#lightbox :focus-visible { outline: 2px solid #88c0d0; outline-offset: 2px; }
@media (max-width: 760px) {
  #lightbox .lb-stage { padding: 8px 8px 0; }
  #lightbox .lb-bar { gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
  #lightbox .lb-cap { order: -1; flex-basis: 100%; }
  #lightbox button { min-width: 48px; min-height: 44px; }
  #lightbox .lb-orig { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  #lightbox .lb-hint { display: none; }         /* (a phone has no keys: a swipe and the buttons) */
}

.rd-text.web img { max-width: 100%; }
.rd-text table.rd-table { border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.rd-text table.rd-table td, .rd-text table.rd-table th { border: 1px solid var(--line); padding: 4px 8px; }
.rd-text pre { overflow-x: auto; font-size: 14px; }
.rd-text code { font-size: 0.9em; }
.block.visit { display: flex; gap: 10px; align-items: baseline; padding: 4px 10px; }
.clipform { max-width: 36em; margin: 40px auto; font: 15px system-ui, sans-serif; }
.clipform blockquote { border-left: 3px solid var(--line); margin: 8px 0; padding-left: 10px; color: #555; }
a.btn { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; text-decoration: none; }

.feeds { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; height: calc(100vh - 120px); }
.feedlist, .feeditems, .feedpreview { overflow-y: auto; border-right: 1px solid var(--line); padding: 6px; }
.feedlist div { padding: 4px 8px; cursor: pointer; border-radius: 5px; display: flex; justify-content: space-between; }
.feedlist div.in { padding-left: 20px; } .feedlist div.on, .fitem.on { background: var(--line); }
.feedlist div b { color: var(--accent); font-weight: 600; }
.fitem { display: flex; gap: 8px; padding: 5px 8px; cursor: pointer; border-radius: 5px; align-items: baseline; }
.fitem .ftitle { flex: 1; font-weight: 600; } .fitem.read .ftitle { font-weight: 400; opacity: .7; }
.fitem .fmark { color: var(--accent); width: 1em; }
.feedpreview { padding: 10px 16px; }
@media (max-width: 800px) { .feeds { grid-template-columns: 1fr; height: auto; } .feedpreview { display: none; } }
.chat { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: calc(100vh - 120px); }
.chatrooms { overflow-y: auto; border-right: 1px solid var(--line); padding: 6px; }
.chatrooms > div { padding: 5px 8px; cursor: pointer; border-radius: 5px; display: grid; grid-template-columns: 1fr auto; }
.chatrooms > div.on { background: var(--line); }
.chatrooms b { color: var(--accent); font-weight: 600; }
.chatrooms small { grid-column: 1 / -1; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatmain { display: flex; flex-direction: column; min-width: 0; }
.chathead { padding: 6px 14px; border-bottom: 1px solid var(--line); }
.chatlog { flex: 1; overflow-y: auto; padding: 8px 14px; }
.chatmsg { padding: 6px 8px; border-radius: 6px; margin-bottom: 4px; }
.chatmsg.on, .chatmsg:hover { background: var(--line); }
.chatmsg .who b { color: var(--accent); } .chatmsg.mine .who b { color: var(--accent2); }
.chatmsg .acts { visibility: hidden; float: right; font-size: 0.85em; }
.chatmsg:hover .acts, .chatmsg.on .acts { visibility: visible; }
.chatmsg .text { white-space: normal; overflow-wrap: anywhere; }
.chatimg { max-width: min(360px, 100%); max-height: 280px; border-radius: 6px; display: block; margin-top: 4px; }
.chatmsg .warn { color: var(--due); font-size: 0.85em; }
.chatwrite { display: flex; gap: 6px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line); }
.chatwrite input { flex: 1; min-width: 0; }
#chatWhat { color: var(--dim); white-space: nowrap; }
@media (max-width: 800px) { .chat { grid-template-columns: 1fr; height: auto; } .chatrooms { max-height: 30vh; border-right: 0; } .chatlog { max-height: 55vh; } }

.hnitem { display: flex; gap: 8px; padding: 5px 10px; } .hnrank { width: 2.2em; text-align: right; opacity: .6; }
.hnitem.read > div > a { opacity: .65; } .hnnew { color: var(--accent); font-weight: 600; }
.hnthread { max-width: 52em; padding: 0 12px; } .hnc summary { cursor: pointer; opacity: .75; font-size: 13px; margin-top: 6px; }
.hnc.new > summary { opacity: 1; } .hncomment { font-size: 15px; line-height: 1.45; } .hncomment p { margin: 6px 0; }
.hnc { border-left: 2px solid var(--line); padding-left: 8px; }

.graph { overflow-x: auto; margin: 8px 0; }
.graph svg { max-width: none; font: 13px ui-monospace, Menlo, monospace; }
.graph .g-node { fill: var(--bg, #fff); stroke: var(--accent); stroke-width: 1.4; }
.graph .g-node.g-end { fill: var(--accent); }
.graph .g-label { fill: currentColor; }
.graph .g-edge { stroke: #889; stroke-width: 1.3; }
.graph .g-arrow { fill: #889; }
.graph .g-edge-label { fill: var(--accent2); font-size: 12px; }
.graph .g-edge-label-bg { fill: var(--bg, #fff); opacity: .9; }
.graph .g-group { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 5 3; }
.graph .g-group-title { fill: var(--accent2); font-size: 12px; }
.graph-page { padding: 12px; }

/* canvases (app/canvas): panels on a plane, edges between them; JSON Canvas's six colours */
:root { --cv1: #d9534f; --cv2: #e8913a; --cv3: #d6b331; --cv4: #4f9a5a; --cv5: #3a9db0; --cv6: #8a63b8; }
.cv-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.cv-bar input { flex: 1 1 320px; min-width: 0; }
.cv-bar button { min-width: 2.2em; }
.cv-errors { color: var(--due); font-size: 13px; margin: 0 0 8px; }
.cv-wrap { overflow: auto; height: calc(100vh - 170px); border: 1px solid var(--line); border-radius: 6px;
           background: radial-gradient(circle, var(--line) 1px, transparent 1px) 0 0 / 18px 18px; cursor: grab; }
.cv-size { position: relative; }
.cv-plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cv-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.cv-edge { fill: none; stroke: var(--faint); stroke-width: 1.6; }
.cv-edges marker path { fill: var(--faint); }
.cv-elabel { fill: var(--accent2); font: 12px var(--font); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.cv-group { position: absolute; border: 1.5px dashed var(--faint); border-radius: 10px; }
.cv-group span { position: absolute; top: -.75em; left: 12px; padding: 0 6px; background: var(--bg); color: var(--dim);
                 font-size: 13px; font-weight: 600; }
.cv-panel { position: absolute; display: flex; flex-direction: column; background: var(--bg); border: 1.5px solid var(--line);
            border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); overflow: hidden; cursor: default; }
.cv-panel.text { border-radius: 14px; }
.cv-panel.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.cv-panel.other { border-color: var(--accent2); box-shadow: 0 0 0 2px var(--accent2); }
.cv-panel.missing { opacity: .7; border-style: dashed; }
.cv-title { padding: 3px 8px; font-size: 13px; font-weight: 600; background: var(--panel); cursor: move; user-select: none;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-body { flex: 1; overflow: auto; padding: 4px 8px; font-size: 13px; }
.cv-body .notehtml { max-width: none; }
.cv-body .notehtml > :first-child { margin-top: 0; }
.cv-body h1 { font-size: 1.25em; } .cv-body h2 { font-size: 1.12em; } .cv-body h3, .cv-body h4 { font-size: 1em; }
.cv-body h1, .cv-body h2, .cv-body h3, .cv-body h4 { margin: .4em 0 .2em; }
.cv-grip { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
           background: linear-gradient(135deg, transparent 50%, var(--faint) 50%); }
.notehtml .fold { cursor: pointer; color: var(--faint); font-size: .8em; user-select: none; }
.notehtml .fold:hover { color: var(--accent); }
.math-src.inline { white-space: nowrap; }

/* modes: a chip by the title and the frame's colour (ui/modes.nim has the same colours) */
body { --mode-edit: #88c0d0; --mode-view: #a3be8c; --mode-history: #ebcb8b; --mode-log: #8fbcbb; --mode-other: #81a1c1; }
main { border-left: 3px solid var(--mode-other); }
body[data-mode=edit] main { border-left-color: var(--mode-edit); }
body[data-mode=view] main { border-left-color: var(--mode-view); }
body[data-mode=form] main { border-left-color: var(--mode-view); }   /* (a project's form: the view's colour, as ui/modes) */
body[data-mode=history] main { border-left-color: var(--mode-history); }
body[data-mode=log] main { border-left-color: var(--mode-log); }
body[data-mode=shell] main { border-left-color: #d08770; }
.chip.mode.shell { background: #d08770; }
.chip.mode { font-weight: 700; color: #1b1d23; background: var(--mode-other); border-color: transparent; }
.chip.mode.edit { background: var(--mode-edit); }
.chip.mode.view { background: var(--mode-view); }
.chip.mode.form { background: var(--mode-view); }
.chip.mode.history { background: var(--mode-history); }
.chip.mode.log { background: var(--mode-log); }
.chip.mode:empty { display: none; }
.chip.seg + .chip.seg { margin-left: -6px; }
#contextChip.on { background: var(--ctx); color: #1b1d23; border-color: transparent; }

/* the note's link completions (under the line being typed) */
.notewrap { position: relative; }
#ncomplete { display: none; position: absolute; z-index: 5; min-width: 320px; max-width: 560px; border: 1px solid var(--line);
             border-radius: 8px; background: var(--panel); box-shadow: 0 6px 20px #0003; font-size: 14px; }
#ncomplete div { padding: 4px 10px; cursor: pointer; display: flex; gap: 12px; }
#ncomplete div.on { background: var(--sel); }
#ncomplete .h { color: var(--faint); font-size: 12px; margin-left: auto; }

/* flashcards (◇ Review) */
.rvdecks { max-width: 640px; }
.rvdeck { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.rvdeck:hover { background: var(--sel); }
.rvdeck .hint { margin-left: auto; }
.review { max-width: 760px; margin: 0 auto; }
.rvcard { width: 100%; min-height: 240px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rvtype { width: 100%; margin-top: 10px; padding: 8px 10px; font: inherit; border: 1px solid var(--line); border-radius: 8px;
          background: var(--panel); color: var(--fg); }
.rvbar { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.rvbar button { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 8px; padding: 8px 14px;
                cursor: pointer; font: inherit; }
.rvbar button small { display: block; opacity: .65; font-size: 11px; }
.rvbar .rvagain { border-color: #bf616a; } .rvbar .rvgood { border-color: #a3be8c; } .rvbar .rveasy { border-color: #88c0d0; }
body[data-mode=review] main { border-left-color: #b48ead; }
.chip.mode.review { background: #b48ead; }

/* the calendar */
.calendar { display: flex; flex-direction: column; gap: 8px; }
.calbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.calbar button.on { background: var(--accent); color: var(--bg); }
.calbar .grow, .caldetail .grow { flex: 1; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.calhd { font-size: 12px; color: var(--dim); padding: 2px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calday { min-height: 92px; padding: 2px 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; overflow: hidden; }
.calday.other { background: var(--panel); color: var(--faint); }
.calday.picked { outline: 2px solid var(--accent); outline-offset: -2px; }
.caln { font-size: 12px; font-weight: 600; }
.calday.today .caln { background: var(--accent); color: var(--bg); border-radius: 9px; display: inline-block; padding: 0 6px; }
.calit { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--c); padding-left: 4px; margin: 1px 0; cursor: pointer; }
.calit.sel, .calrow.sel, .calblock.sel { background: var(--sel); }
.calweek { display: grid; grid-template-columns: 3.2em repeat(7, minmax(0, 1fr)); max-height: 70vh; overflow-y: auto; border-top: 1px solid var(--line); }
.calcol { border-right: 1px solid var(--line); }
.calcol.picked .calhd { color: var(--accent); font-weight: 600; }
.calcol .calhd { position: sticky; top: 0; background: var(--bg); z-index: 1; }
.calallday { height: var(--ad, 21px); overflow: hidden; border-bottom: 1px solid var(--line); padding: 2px; }
.calgutter .calhours { background: none; }
.calgutter .calhours span { position: absolute; right: 4px; font-size: 11px; color: var(--faint); transform: translateY(-7px); }
.calhours { position: relative; height: 1080px; background: repeating-linear-gradient(var(--bg) 0 44px, var(--line) 44px 45px); }
.calblock { position: absolute; left: 2px; right: 2px; font-size: 12px; overflow: hidden; border-left: 3px solid var(--c);
            background: color-mix(in srgb, var(--c) 18%, var(--bg)); border-radius: 4px; padding: 1px 4px; cursor: pointer; }
.callist h3 { font-size: 14px; margin: 14px 0 4px; }
.calrow { display: flex; gap: 10px; align-items: baseline; padding: 4px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.caltime { width: 9em; color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.caldot { width: 10px; height: 10px; border-radius: 5px; background: var(--c); flex: none; }
.caldetail { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
@media (max-width: 700px) { .calday { min-height: 60px; } .calit { font-size: 11px; } }
mark.fz { background: none; color: var(--accent); font-weight: 600; text-decoration: underline; }  /* what the filter matched */
/* a list of files (fbOpen): a bar, sortable column heads, rows drawn a screenful at a time */
.fb { --fbcols: 1fr; margin-top: .5em; }
.fbbar { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; margin-bottom: .4em; }
.fbbar .fbwhere { font-weight: 600; }
.fbbar .fbwhere a { color: var(--accent); text-decoration: none; }
.fbbar input { flex: 1 1 18em; min-width: 0; }
.fbcolhead, .fbrow { display: grid; grid-template-columns: 1.2em var(--fbcols); gap: .6em; align-items: center; }
.fbcolhead { color: var(--dim); font-size: .85em; border-bottom: 1px solid var(--line); padding: .2em 0; overflow: hidden; }
.fbcolhead > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbcolhead::before, .fbrow::before { content: ""; }
.fbcolhead .sortable { cursor: pointer; }
.fbcolhead .num, .fbrow .num { text-align: right; }
.fblist { position: relative; height: min(70vh, 40em); overflow-y: auto; outline: none; }
.fbrow { position: absolute; left: 0; right: 0; height: 26px; cursor: pointer; white-space: nowrap; border-radius: var(--r-sm); }
.fbrow:hover { background: color-mix(in srgb, var(--sel) 60%, transparent); }
.fbrow > span { overflow: hidden; text-overflow: ellipsis; }
.fbrow.on { background: var(--panel); }
.fblist:focus .fbrow.on::before { content: "›"; color: var(--accent); }
.fbrow.dir .n { color: var(--accent2); }
/* a row with a menu (the Notes page's Open and Topic…, Needs you's answers): its ⋯ at the right, as the sidebar's (D3) */
.fb.menus .fbrow, .fb.menus .fbcolhead { padding-right: 1.8em; box-sizing: border-box; }
.fbrow .rowmore { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--faint); padding: 0 6px;
                  visibility: hidden; overflow: visible; }
.fbrow:hover .rowmore, .fbrow.on .rowmore { visibility: visible; }
@media (hover: none), (max-width: 900px) { .fbrow .rowmore { visibility: visible; } }
.fbrow.hid, .fbrow.away { color: var(--dim); }
.fbrow .c-sync { color: var(--ok); letter-spacing: .1em; }
.fbrow .c-last { letter-spacing: .18em; }
.fbrow .c-state, .fbrow .c-by, .fbrow .c-mtime, .fbrow .c-on, .fbrow .c-tags { color: var(--dim); }
#fbplay video, #fbplay img { max-width: 100%; max-height: 60vh; margin-top: .5em; }
.fbwrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2em; }
.fbprev { border-left: 1px solid var(--line); padding-left: 1em; max-height: min(74vh, 42em); overflow: auto; }
.fbprev img { max-width: 100%; max-height: 60vh; }
.fbprev .fbpname { font-weight: 600; margin-bottom: .3em; }
.fbprev pre.fbtext { white-space: pre-wrap; font-size: .85em; margin: 0; }
/* a unified diff (a proposal's: app/asks), and answers as buttons (Needs you, a card's "waits on you") */
pre.diff { white-space: pre-wrap; font-size: .85em; margin: .4em 0; padding: .4em .5em; background: var(--code);
  border-radius: 6px; overflow-x: auto; }
pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); display: inline-block; width: 100%; }
pre.diff .del { color: var(--due); background: color-mix(in srgb, var(--due) 12%, transparent); display: inline-block; width: 100%; }
pre.diff .gap { opacity: .5; }
.askbtns { display: flex; flex-wrap: wrap; gap: .4em; margin: .5em 0; }
.fbprev pre.hex { white-space: pre; color: var(--dim); }
.fbprev .fblisting .dir { color: var(--accent2); }
.fbprev .fbfacts td:first-child { color: var(--dim); padding-right: 1em; }
@media (max-width: 900px) { .fbwrap { grid-template-columns: 1fr; } .fbprev { display: none; } }
.fbprev mark.fbline { background: var(--panel); color: var(--fg); font-weight: 600; }
.fbrow > span, .fbcolhead > span { min-width: 0; }


/* a job's run, watched (app.js runPage) */
.runbar { display: flex; gap: var(--sp2); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp3); font-size: var(--fs-md); }
.runbar .runhead { flex: 1 1 100%; color: var(--dim); font-size: 14px; }
.runbar .runhead b { color: var(--fg); }
.runbar input#runFind { flex: 1; min-width: 160px; }
.runview { display: grid; grid-template-columns: 1fr; gap: var(--sp3); height: calc(100vh - 170px); }
.runview #runSteps { display: none; }        /* (the graph above says it; the list stays for phones) */
/* a run's graph: a box per step in its state's colour, lines from what it waits for */
.rundag { overflow: auto; flex: none; max-height: 34vh; margin-bottom: var(--sp3); padding: var(--sp1);
          background: var(--panel); border-radius: var(--r-lg); }
.dag { display: block; font: 12.5px var(--font); }
/* a pipeline's note as its form (D4e): its steps' graph, the chosen part's fields beside it (under it on a phone) */
.projform.pipehost { max-width: none; width: 100%; }   /* (a phone's column: as wide as the view, its graph scrolling in it) */
.pipeedit { display: flex; flex-wrap: wrap; gap: var(--sp3) var(--sp4); align-items: flex-start; }
.pipegraph { flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: var(--sp2); }
.pipetools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pipetools button:disabled { opacity: .45; cursor: default; }
.pipescroll { overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
/* (its form beside the graph where both fit, else under it: a card either way) */
.pipepanel { flex: 1 1 360px; min-width: min(100%, 320px); max-width: 760px; border: 1px solid var(--line); border-radius: 10px;
             padding: var(--sp2) var(--sp3) var(--sp3); background: color-mix(in srgb, var(--raised) 55%, transparent); }
.pipepanel .pfpart { margin-top: var(--sp1); }
.pipepanel .pfrow { grid-template-columns: 110px minmax(0, 1fr); }
.pipepanel .pinst { margin: 0 0 var(--sp2); overflow-wrap: anywhere; }
.pipepanel .pinst code { font-size: var(--fs-xs); }
.pipepanel .btnline { display: flex; gap: var(--sp1); margin-top: var(--sp3); flex-wrap: wrap; }
@media (max-width: 760px) { .pipepanel .pfrow { grid-template-columns: minmax(0, 1fr); }
                            .pipepanel { padding: var(--sp2); } }
.dag.pipesvg .dag-node.bad rect:first-of-type { stroke: var(--bad); stroke-width: 2.4; }
.dag.pipesvg .dag-node.bad rect.bar { fill: var(--bad); }
.pipesvg .dag-node.bad text.nm { fill: var(--bad); }
.dag.pipesvg .dag-node.droptarget rect:first-of-type { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 4 3; }
.pipesvg .pstack rect { fill: var(--raised); stroke: var(--line); stroke-width: 1.2; }
.pipesvg .dag-node rect.pbadge, .pipesvg .pbadge rect { fill: color-mix(in srgb, var(--accent) 18%, var(--raised)); stroke: none; }
.pipesvg .pbadge text { fill: var(--fg); font-size: 10.5px; font-weight: 600; text-anchor: middle; }
.pipesvg .pport { fill: var(--raised); stroke: var(--accent); stroke-width: 2; cursor: crosshair; }
/* (only a drag from a ● keeps the finger: elsewhere on the graph it pans the box, or scrolls the page) */
.pipesvg .pport, .pipesvg .pporthit, .pipesvg.dragging { touch-action: none; }
.pipesvg .pporthit { fill: transparent; stroke: none; cursor: crosshair; }
.pipesvg .pport:hover, .pipesvg .pporthit:hover + .pport, .pipesvg.dragging .pport { fill: var(--accent); }
.pipesvg .pdel, .pipesvg .padd, .pipesvg .pcut { cursor: pointer; display: none; }
.pipesvg .pdel circle, .pipesvg .padd circle, .pipesvg .pcut circle { fill: var(--raised); stroke: var(--line); stroke-width: 1.2; }
.pipesvg .pdel text, .pipesvg .padd text, .pipesvg .pcut text { fill: var(--dim); font-size: 11px; text-anchor: middle; }
.pipesvg .pdel:hover circle, .pipesvg .pcut:hover circle { stroke: var(--bad); }
.pipesvg .pdel:hover text, .pipesvg .pcut:hover text { fill: var(--bad); }
.pipesvg .padd:hover circle { stroke: var(--accent); }
.pipesvg .padd:hover text { fill: var(--accent); }
.pipesvg .dag-node.on .pdel, .pipesvg .dag-node.on .padd, .pipesvg .dag-node:hover .pdel, .pipesvg .dag-node:hover .padd,
.pipesvg .plink.near .pcut, .pipesvg .plink:hover .pcut { display: inline; }
.pipesvg.dragging .pdel, .pipesvg.dragging .padd, .pipesvg.dragging .pcut { display: none; }
.pipesvg .phit { fill: none; stroke: transparent; stroke-width: 14; }
.pipesvg .plink.near .dag-edge { stroke: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pipesvg .plink:hover .dag-edge { stroke: var(--dim); }
.pipesvg .pdrag { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.pipesvg .pdrag[hidden] { display: none; }
.dag .dag-edge { fill: none; stroke: var(--line); stroke-width: 2; }
.dag .dag-edge.done { stroke: color-mix(in srgb, var(--st-done) 60%, var(--line)); }
.dag .dag-node { cursor: pointer; }
.dag .dag-node rect { fill: var(--raised); stroke: color-mix(in srgb, var(--c) 55%, var(--line)); stroke-width: 1.2; }
.dag .dag-node rect.bar { fill: var(--c); stroke: none; }
.dag .dag-node.on rect:first-child { stroke: var(--accent); stroke-width: 2.4; }
.dag .dag-node:hover rect:first-child { stroke: var(--c); }
.dag .dag-node.live rect.bar { animation: dagpulse 1.2s ease-in-out infinite; }
@keyframes dagpulse { 50% { opacity: .35; } }
.dag text.nm { fill: var(--fg); font-weight: 600; }
.dag text.ms { fill: var(--dim); font-size: 11px; }
.runview ol { list-style: none; margin: 0; padding: var(--sp1); overflow-y: auto; font-size: var(--fs-md); background: var(--panel);
              border-radius: var(--r-lg); }
.runview li { display: flex; gap: 6px; padding: 5px 8px; border-radius: var(--r-md); cursor: pointer; align-items: center; }
.runview li:hover { background: var(--sel); }
.runview li.on { background: var(--raised); box-shadow: var(--shadow-1); }
.runview li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runview li .ms { color: var(--dim); font-size: 12px; }
.runview li.st-passed .mk { color: var(--ok); } .runview li.st-failed .mk { color: var(--due); }
.runview li.st-running .mk, .runview li.st-waiting .mk { color: var(--accent); }
.runview li.st-skipped { color: var(--faint); }
.runview li .on { color: var(--dim); font-size: 12px; }
.runlog { overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; background: var(--code, var(--panel));
          border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp2) var(--sp3); white-space: pre; }
.runlog .ln.hit { background: var(--sel, var(--panel)); outline: 1px solid var(--accent); }
.runlog .tm { color: var(--faint); margin-right: 1em; user-select: none; }
@media (max-width: 700px) { .runview { grid-template-columns: 1fr; height: auto; } .runview ol { max-height: 30vh; }
  .runview #runSteps { display: block; } .rundag { display: none; } .runlog { height: 60vh; } }

/* the Monitor: the machine above the table (app.js monitorPage) */
.mon-host { margin: 4px 0 10px; }
.mon-line { color: var(--dim); font-size: 13px; margin-bottom: 8px; }
.mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mon-chart { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; position: relative; }
.mon-chart b { font-weight: 600; font-size: 12px; color: var(--dim); }
.mon-chart .now { float: right; font-size: 13px; }
.mon-chart.empty span { display: block; color: var(--faint); font-size: 12px; }
.mon-chart svg { width: 100%; height: 56px; display: block; margin-top: 4px; cursor: crosshair; }
.mon-chart .line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mon-chart .area { fill: var(--accent); opacity: .12; }
.mon-chart .cross { stroke: var(--dim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mon-chart .tip { position: absolute; right: 8px; bottom: 4px; font-size: 11px; color: var(--dim); }

.pagegroup { color: var(--faint); font-size: 11px; text-transform: lowercase; margin: 8px 0 2px 12px; }
.ff .ffrow { display: flex; flex-direction: column; gap: 3px; margin: 10px 0; }
.ff .ffrow label { font-weight: 600; font-size: 13px; }
.ff input[type=text], .ff input[type=number], .ff input[type=url], .ff input[type=date], .ff select, .ff textarea {
  font: inherit; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
.ff .ffm { font-weight: normal; margin-right: 8px; } .ff .ffstep { color: var(--dim); font-size: 12px; }
.ff .ffbad { color: var(--due); } .ff .ffbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.ff .hint { color: var(--dim); font-size: 12px; margin: 0; }

/* widgets (```widget): tiles that sit side by side on a dashboard note */
.widget { display: inline-block; vertical-align: top; min-width: 220px; max-width: 100%; margin: 6px 8px 6px 0;
          padding: var(--sp3) var(--sp4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised);
          box-shadow: var(--shadow-1); }
.widget .wt { color: var(--dim); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
              margin-bottom: var(--sp2); }
.widget .wv { font-size: 28px; font-weight: 600; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
/* a note of widgets (a dashboard, a project's page): the tiles fill the width and wrap */
.notehtml:has(> .widget) { max-width: none; display: flex; flex-wrap: wrap; gap: var(--sp3); align-items: flex-start; }
.notehtml:has(> .widget) > :not(.widget) { flex: 0 0 100%; margin: 0; }
.notehtml:has(> .widget) > .widget { flex: 1 1 300px; margin: 0; }
.notewrap:has(.notehtml > .widget) #ncomments:not(:has(.ncomment)) { display: none; }
/* a project's header: its name, what it is, its controls — across the top, not a tile */
.notehtml > .widget[data-kind=actions] { flex: 0 0 100%; background: transparent; border: 0; box-shadow: none;
                                          padding: 0 0 var(--sp2); border-bottom: 1px solid var(--line); border-radius: 0; }
.widget .whead { display: flex; align-items: baseline; gap: var(--sp3); flex-wrap: wrap; }
.widget .whead h2 { margin: 0; font-size: var(--fs-xl); }
.widget[data-kind=actions] .toolbar { margin: var(--sp2) 0 0; }
.widget[data-kind=actions] button { font-size: 14px; padding: 5px 12px; }
.widget .wbar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.widget .wbar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.widget .wbar span.hot { background: var(--due); }
.widget .mon-chart.bare { border: 0; padding: 0; }
.widget table.wl { border-collapse: collapse; font-size: var(--fs-md); width: 100%; }
.widget table.wl th { color: var(--faint); text-align: left; font-weight: 600; font-size: var(--fs-xs); }
.widget table.wl td, .widget table.wl th { padding: 4px 10px 4px 0; border: 0; border-bottom: 1px solid var(--line); }
.widget table.wl tr:last-child td { border-bottom: 0; }
.widget > button, .widget .wb button { font-size: 14px; padding: 6px 14px; } .widget tr.click { cursor: pointer; } .widget tr.click:hover td { color: var(--accent); }
.widget .mon-chart { border: 0; padding: 0; }
.widget[data-kind=stat] .mon-chart .now, .widget[data-kind=stat] .mon-chart b { display: none; }
/* a dashboard arranged (D4c): its tiles in order, each a handle to drag and a ⋯ for its form; what they show, inert */
.dashbar { margin: 0 0 var(--sp3); align-items: center; }
.dashbar .hint { font-size: var(--fs-sm); }
.widget.arranging { position: relative; cursor: grab; outline: 1px dashed var(--line); outline-offset: 2px; padding-top: 34px; }
.widget.arranging > :not(.wtools) { pointer-events: none; opacity: .75; }
.widget.arranging:focus-visible, .widget.arranging.chosen { outline: 2px solid var(--accent); }
.widget.arranging.dragging { opacity: .4; }
.widget.arranging.dropbefore { box-shadow: -4px 0 0 0 var(--accent); }
.widget.arranging.dropafter { box-shadow: 4px 0 0 0 var(--accent); }
.widget.arranging.dropv.dropbefore { box-shadow: 0 -4px 0 0 var(--accent); }   /* (a tile with its row to itself: above or below it) */
.widget.arranging.dropv.dropafter { box-shadow: 0 4px 0 0 var(--accent); }
.widget .wtools { position: absolute; top: 6px; left: var(--sp3); right: 6px; display: flex; align-items: center; gap: var(--sp2);
                  font-size: var(--fs-xs); color: var(--dim); }
.widget .wtools .wgrip { cursor: grab; font-size: 14px; }
.widget .wtools .wname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget .wtools .wmore { padding: 0 8px; font-size: 14px; line-height: 20px; }
.notehtml > .widget.arranging[data-kind=actions] { border: 1px dashed var(--line); padding: 34px var(--sp3) var(--sp2); }
.tileform .btnline { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-top: var(--sp3); }
.widget[data-kind=stat] .mon-chart svg { height: 28px; }
.pagegroup[data-pagegroup] { cursor: pointer; user-select: none; }
/* a project's log beside its board (the side panel: /workspace project NAME) */
.wlog { display: flex; flex-direction: column; gap: 2px; }
.wlog .wl { display: grid; grid-template-columns: 3.4em 1fr; gap: var(--sp2); padding: 4px 0; border-bottom: 1px solid var(--line);
            font-size: 13.5px; }
.wlog .wl .t { color: var(--faint); font-variant-numeric: tabular-nums; }
.wlog .wl .x p { margin: 0; }
.wlog .wl.todo .x::before { content: "☐ "; color: var(--st-needs); }

/* an issue's runs on its card (NL-135): status, the run, when and where; the one that fixed it marked */
.recruns { display: flex; flex-direction: column; gap: var(--sp1); }
.recrun { display: grid; grid-template-columns: 1.5em minmax(0, 1fr) auto auto; gap: var(--sp2); align-items: baseline;
          padding: var(--sp1) var(--sp2); border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.recrun:hover { background: var(--sel); }
.recrun b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recrun small { color: var(--dim); font-size: var(--fs-sm); }

/* an issue's pictures on its card (screenshots of what it changed, to review): two across, each opening in the lightbox */
.recshots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp2); margin-bottom: var(--sp3); }
.recshots figure { display: flex; flex-direction: column; gap: var(--sp1); margin: 0; min-width: 0; }
.recshots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: var(--r-sm);
                border: 1px solid var(--line); background: var(--card2); }
.recshots img:hover { border-color: var(--accent); }
.recshots figcaption { font-size: var(--fs-sm); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a step's outputs in the run view (NL-180) */
.runsteps .outs, #runSteps .outs { display: block; font-size: .8em; color: var(--dim); font-family: var(--mono); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* a newer nimlog installed than the one serving this page (NL-210) */
#staleBar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 16px;
  background: color-mix(in srgb, var(--warn) 16%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); }
#staleBar[hidden] { display: none; }
#staleBar .grow { flex: 1; }

/* an issue card's reply words (NL-211) */
.replywords { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.replywords .chip { cursor: pointer; }

/* a list's preview shown in the side panel, on a narrow screen (NL-214) */
.fbprev.inside { display: block !important; border-left: 0; padding-left: 0; max-height: none; }

/* a list on a phone or a narrow window (no preview beside it): each row its name, then the rest smaller under it
   (NL-214) */
@media (max-width: 900px) {
  .fbcolhead { display: none; }
  .fbrow { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 .9em; height: 54px; padding: 4px 0 4px 8px;
           overflow: hidden; line-height: 1.4; box-sizing: border-box; }
  .fbrow::after { content: ""; flex-basis: 100%; order: 1; height: 0; }      /* (the line after the name) */
  .fbrow > span { font-size: .82em; color: var(--dim); white-space: nowrap; }
  .fbrow > span.n { flex: 1 1 0; min-width: 0; font-size: 1em; color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
  .fbrow > span.n ~ span { order: 2; flex: 1 1 0; min-width: 0; max-width: fit-content; overflow: hidden; text-overflow: ellipsis; }
                                                  /* (the rest on one line: each shortened, none wrapped out of sight) */
  .fbrow::before, .fbrow.on::before, .fblist:focus .fbrow.on::before { content: none; display: none; }
  /* (the cursor's row without its ›, so marked another way: lit, with the accent's bar — whether the list has the
     keys or a tap left them elsewhere; NL-225) */
  .fbrow.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
}
/* a phone: a tap gives no keyboard ring, so the card or row that has the keys (one it came back to: a card put away)
   keeps its outline — the cursor never vanishes (NL-225) */
@media (max-width: 760px) {
  :where(.board, .feedlist, .feeditems, .chatlog, #runSteps) [data-rv]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
  img[data-lb]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }    /* (the picture the lightbox closed back to) */
}

/* a narrow window (a tablet, a small one): the open card over the page from the right, not a column that pushes the
   page past the screen's edge (NL-214: 768 px scrolled sideways with a card open) */
@media (max-width: 1100px) and (min-width: 761px) {
  #side.open { position: fixed; right: 0; top: 0; bottom: 0; z-index: 16; box-shadow: -8px 0 30px rgba(0,0,0,.18);
               width: var(--sidew, min(560px, 88vw)); }
  #side.open.wide { width: var(--sidew, min(600px, 92vw)); }
}

/* a <details>' summary folds with the sidebar's ▸ ▾ (the signs' table's, set by app.js), not the browser's ▶ (A9) */
summary { list-style: none; } summary::-webkit-details-marker { display: none; }
summary::before { content: var(--sign-folded, "▸ "); opacity: .7; }
details[open] > summary::before { content: var(--sign-unfolded, "▾ "); }
/* where the keys are (NL-222): what has the keyboard is outlined in the accent, in both looks, light and dark — a
   card, a record, a folded column, the palette's rows, a menu's items, a run's steps, a search's hits, a button, a
   chip, a link. The keyboard's ring only: a click shows none on what isn't typed in. A line being typed in has the
   accent's border and ring (the box, a card's title, the palette's line, a note's text); a list's cursor row is
   outlined while the list has the keys; the view itself, and a card beside it, when they have the keys always have
   a faint inner one, however the keys got there (a board opened by a click too). */
:where(button, a, summary, [tabindex], [data-rv]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.chip { box-shadow: none; line-height: inherit; }
button.chip:focus-visible { outline-offset: 1px; }
:where(.modal .list, .popmenu, #runSteps, .hits) [data-rv]:focus-visible { outline-offset: -2px; }
#info .box:focus { outline: none; }
.popmenu [data-rv]:focus { background: var(--sel); }
.popmenu [data-rv]:focus:not(:focus-visible) { outline: none; }
#view:focus, #side:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -2px; }
footer textarea:focus { outline: none; border-color: var(--accent);
                        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.modal input:focus { box-shadow: inset 0 -2px 0 var(--accent); }
#side .rectitle:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#note { padding-left: 10px; } #note:focus { box-shadow: inset 3px 0 0 var(--accent); }
.fblist:focus .fbrow.on { box-shadow: inset 0 0 0 2px var(--accent); }
.dag .dag-node:focus { outline: none; }
.dag .dag-node:focus-visible rect:first-child { stroke: var(--accent); stroke-width: 3;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)); }
/* NAV or TYPE, by the box (the terminal's status bar says the same) */
#keysChip { font: 600 10px/16px var(--mono); letter-spacing: .06em; padding: 0 6px; border-radius: 999px;
            border: 1px solid var(--line); color: var(--dim); align-self: center; }
#keysChip.type { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.fieldmulti[aria-invalid=true] { outline: 2px solid var(--bad); outline-offset: 2px; border-radius: var(--r-md); }

/* a project's hub (C3, NL-236): its parts as tabs over the tab's page — one row that scrolls on its own at a phone's
   width (never the page; its thin scrollbar shown, as a column's), the tab shown in the accent, a tab with the keys
   outlined */
#hubBar { display: flex; align-items: stretch; gap: 2px; padding: 0 var(--sp4); border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden; flex: none; min-width: 0; }
#hubBar[hidden] { display: none; }
#hubBar .hubname { flex: none; align-self: center; color: var(--dim); font-weight: 600; margin-right: var(--sp2);
  max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hubBar [role=tab] { flex: none; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; background: none;
  border: 0; border-bottom: 2px solid transparent; color: var(--dim); padding: 8px 10px 6px; font: inherit; cursor: pointer; }
#hubBar [role=tab]:hover { color: var(--fg); }
#hubBar [role=tab][aria-selected=true] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
#hubBar [role=tab]:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
#hubBar .k { font-family: var(--mono); font-size: var(--fs-sm); color: var(--faint); }
#hubBar .dt { font-size: var(--fs-sm); color: var(--faint); font-weight: 400; }
#hubBar .keys { flex: none; align-self: center; margin-left: auto; padding-left: var(--sp4); color: var(--faint);
  font-size: var(--fs-sm); white-space: nowrap; }
@media (max-width: 760px) { #hubBar { padding: 0 var(--sp2); } #hubBar .keys, #hubBar .dt { display: none; } }