/* The design library's components (Tom Solid's foundations/8): Button, Text field, List row, Card, Chip,
   Checkbox, Dialog, Sidebar item, Empty state; then Search box and Editor (capture/1), Composer, Entry and Small calendar (capture/2), Image and File chip (capture/3), Capture box and Inbox card (capture/4), Link, Link suggestions and Backlink pane (pkm/1), Person card (pkm/2), Task in a note and Task row (tasks/1), Event block (time/1), Suggestion (assistant/3), Approval card and Segmented switch (assistant/4), Mode banner (assistant-plus/9), Calendar link row (calendar/1), Hour grid and Task block (calendar/2), Lens switch (calendar/3), Sentence preview (calendar/5), Template chip and routine block (calendar/6), Answer bar (calendar/9). Built only from design/tokens.css. A new piece goes here first,
   then into the screen that needs it; a new component needs BG's yes (AGENTS.md, Design). Loaded before style.css. */

/* Text field: input, select, textarea */
input, select, textarea { font:inherit; color:inherit; border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-8) var(--sp-10); background:var(--surface); }
input:focus, select:focus, textarea:focus, input.is-focus, select.is-focus, textarea.is-focus { outline:2px solid var(--line); border-color:var(--ink); }

/* Button */
.btn { padding:var(--sp-8) var(--sp-14); border-radius:var(--r-md); border:1px solid var(--line); }
.btn:hover, .btn.is-hover { border-color:var(--soft); }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn.small { padding:var(--sp-4) var(--sp-8); font-size:var(--fs-meta); }
.btn.danger { background:var(--red); color:var(--on-accent); border-color:var(--red); }

/* List row: a task or an item in a list */
.row { display:flex; gap:var(--sp-12); padding:var(--sp-8) var(--sp-8); border-radius:var(--r-lg); align-items:flex-start; cursor:default; }
.row:hover, .row.is-hover { background:var(--hover); }
.row.sel { background:var(--hover); outline:1px solid var(--line-strong); }
.row.multi { box-shadow: inset 3px 0 0 var(--ink); }
.row.dragging { opacity:.4; }
.row.done .t { text-decoration:line-through; color:var(--faint); }
.body { flex:1; min-width:0; }
.t { word-break:break-word; }
.n { color:var(--soft); font-size:var(--fs-meta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.f { color:var(--faint); font-size:var(--fs-meta); }
.f span + span::before { content:" · "; }
.f .missed { color:var(--red); }

/* Checkbox: round, filled when done, thick when Must */
.chk { flex:none; width:20px; height:20px; border-radius:var(--r-round); border:1.5px solid var(--line-strong); margin-top:var(--sp-2); background:var(--surface); }
.row.must .chk { border:2.5px solid var(--ink); }
.chk:hover, .chk.is-hover { border-color:var(--ink); }
.row.done .chk { background:var(--soft); border-color:var(--soft); box-shadow: inset 0 0 0 3px var(--surface); }

/* Card: a task on the week board */
.card { border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-8); margin-bottom:var(--sp-4); font-size:var(--fs-meta); background:var(--surface); cursor:grab; }
.card.done { color:var(--faint); text-decoration:line-through; }
.card.must { border-color:var(--ink); }
.card .e { color:var(--faint); font-size:var(--fs-label); }

/* Chip */
.chips { display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-top:var(--sp-10); min-height:26px; }
.chip { background:var(--sunken); color:var(--ink); border-radius:var(--r-pill); padding:var(--sp-2) var(--sp-10); font-size:var(--fs-meta); }
.chipb { padding:var(--sp-4) var(--sp-10); border-radius:var(--r-pill); border:1px solid var(--line); font-size:var(--fs-meta); color:var(--soft); }
.chipb.on { background:var(--hover); color:var(--ink); border-color:var(--ink); }
.chipb:hover, .chipb.is-hover { border-color:var(--line-strong); color:var(--ink); }

/* Dialog */
.overlay { position:fixed; inset:0; background:var(--overlay); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; z-index:20; }
.dlg { background:var(--surface); border-radius:var(--r-2xl); padding:var(--sp-20); width:min(560px, 92vw); border:1px solid var(--line); max-height:76vh; overflow:auto; }
.dlg h2 { margin:0 0 var(--sp-10); font-size:var(--fs-heading); }
.dlg input[type=text], .dlg textarea { width:100%; }
.dlg label { display:block; margin:var(--sp-10) 0 var(--sp-4); color:var(--soft); font-size:var(--fs-meta); }
.dlg .btns { display:flex; gap:var(--sp-10); justify-content:flex-end; margin-top:var(--sp-16); }

/* Sidebar item: the side lists of Tasks, My Life and Chat */
.tnav button { display:block; width:100%; text-align:left; padding:var(--sp-8) var(--sp-10); border-radius:var(--r-md); color:var(--soft); }
.tnav button.on { background:var(--hover); color:var(--ink); font-weight:600; }
.litem { display:flex; justify-content:space-between; gap:var(--sp-8); width:100%; text-align:left; padding:var(--sp-6) var(--sp-8); border-radius:var(--r-md); color:var(--ink); }
.litem:hover, .litem.is-hover { background:var(--hover); } .litem.on { background:var(--hover); color:var(--ink); font-weight:600; }
.litem .f { white-space:nowrap; }
.citem { text-align:left; padding:var(--sp-8) var(--sp-10); border-radius:var(--r-md); color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.citem.on { background:var(--hover); color:var(--ink); font-weight:600; }

/* Empty state */
.empty { color:var(--faint); padding:var(--sp-10) var(--sp-8); font-size:var(--fs-small); }

/* Search box (capture/1): one box that finds as you type */
.searchbox { display:block; width:100%; padding:var(--sp-8) var(--sp-12); border-radius:var(--r-pill); background:var(--sunken); border-color:transparent; }
.searchbox:focus, .searchbox.is-focus { background:var(--surface); }
.searchbox:hover, .searchbox.is-hover { background:var(--hover); }
.searchbox::-webkit-search-cancel-button { filter:grayscale(1); opacity:.6; }

/* Editor (capture/1): a title and a Markdown body, saved as you type; the body shown formatted under it */
.editor { display:flex; flex-direction:column; gap:var(--sp-8); }
.editor .etitle { width:100%; border:0; padding:var(--sp-4) 0; background:transparent; font-size:var(--fs-title); font-weight:600; }
.editor .ebody { width:100%; min-height:220px; border:0; padding:var(--sp-4) 0; background:transparent; line-height:1.55; resize:vertical; }
.editor .etitle:focus, .editor .ebody:focus { outline:0; }
.editor .estate { color:var(--faint); font-size:var(--fs-meta); }
.md { border-top:1px solid var(--line); padding-top:var(--sp-12); line-height:1.55; }
.md h1 { font-size:var(--fs-title); margin:var(--sp-12) 0 var(--sp-6); }
.md h2 { font-size:var(--fs-heading); margin:var(--sp-12) 0 var(--sp-6); }
.md h3 { font-size:var(--fs-body); margin:var(--sp-10) 0 var(--sp-4); }
.md p { margin:0 0 var(--sp-10); }
.md ul, .md ol { margin:0 0 var(--sp-10); padding-left:var(--sp-24); }
.md > :first-child { margin-top:0; }

/* Composer (capture/2): the box that takes a new entry and clears itself */
.composer { display:block; width:100%; padding:var(--sp-10) var(--sp-12); border-radius:var(--r-lg); background:var(--surface); }

/* Entry (capture/2): one dated line with its time on the left */
.entry { display:flex; gap:var(--sp-10); align-items:baseline; padding:var(--sp-6) var(--sp-8); border-radius:var(--r-md); cursor:pointer; }
.entry:hover, .entry.is-hover { background:var(--hover); }
.entry.sel { background:var(--hover); outline:1px solid var(--line-strong); }
.entry .etime { flex:none; width:68px; color:var(--soft); font-size:var(--fs-meta); font-variant-numeric:tabular-nums; }
.entry .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry > .f { flex:none; }

/* Small calendar (capture/2 step 3): a month; a day written on carries a dot and its number of entries */
.minical { font-size:var(--fs-meta); }
.minical .mc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); font-weight:600; }
.minical .mc-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--sp-2); text-align:center; }
.minical .mc-dow { color:var(--faint); font-size:var(--fs-label); padding:var(--sp-2) 0; }
.minical .mc-day { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:34px; padding:var(--sp-2) 0; border-radius:var(--r-md); }
.minical .mc-day:hover, .minical .mc-day.is-hover { background:var(--hover); }
.minical .mc-day.today > span:first-child { font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.minical .mc-day.on { background:var(--hover); outline:1px solid var(--ink); }
.minical .mc-n { font-size:var(--fs-label); color:var(--soft); line-height:1.1; }
.minical .mc-n::before { content:"\2022\00a0"; }

/* Image (capture/3): a picture shown inline with its name under it; it opens full size */
.image { margin:0 0 var(--sp-12); }
.image img { display:block; max-width:100%; max-height:420px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.image figcaption { color:var(--soft); font-size:var(--fs-meta); margin-top:var(--sp-4); }

/* File chip (capture/3): everything that is not a picture: its kind, its name, its size, and Open */
.filechip { display:inline-flex; align-items:center; gap:var(--sp-8); max-width:100%; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-8) var(--sp-6) var(--sp-10); background:var(--surface); margin:0 var(--sp-8) var(--sp-8) 0; }
.filechip .kind { font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:0 var(--sp-4); }
.filechip .name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filechip a.btn { color:inherit; text-decoration:none; }

/* Capture box (capture/4): one box over what you are doing, in the Dialog; it asks for the thought and nothing else */
.capbox textarea { display:block; width:100%; min-height:88px; resize:vertical; border:0; padding:var(--sp-4) 0; background:transparent; font-size:var(--fs-heading); line-height:1.4; }
.capbox textarea:focus { outline:0; }
.capbox .f { border-top:1px solid var(--line); padding-top:var(--sp-8); margin-top:var(--sp-8); }

/* Inbox card (capture/4): the capture you are sorting, with one key for each way out */
.inboxcard { border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--sp-20); background:var(--surface); }
.inboxcard .ct { font-size:var(--fs-title); line-height:1.35; white-space:pre-wrap; word-break:break-word; }
.inboxcard > .f { margin-top:var(--sp-8); }
.inboxcard .ways { display:flex; flex-wrap:wrap; gap:var(--sp-8); margin-top:var(--sp-20); }
.inboxcard .ways kbd { font-family:inherit; font-size:var(--fs-caption); color:var(--soft); border:1px solid var(--line); border-radius:var(--r-sm); padding:0 var(--sp-4); margin-right:var(--sp-6); }
.inboxcard .became { margin-top:var(--sp-16); padding-top:var(--sp-12); border-top:1px solid var(--line); display:flex; gap:var(--sp-10); align-items:center; }

/* Link (pkm/1): a link in the text, underlined; it opens the page it points at */
a.wikilink { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:2px; cursor:pointer; }
a.wikilink:hover, a.wikilink.is-hover { text-decoration-color:var(--ink); }
a.wikilink.gone { color:var(--faint); text-decoration-style:dashed; }
/* advanced/people/1: Mention, a person or a company named with @: their initial in a circle and the name (a company's in a square); it opens their page */
a.mention { display:inline-flex; align-items:center; gap:var(--sp-4); padding:0 var(--sp-6) 0 var(--sp-2); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--sunken); color:var(--ink); text-decoration:none; white-space:nowrap; line-height:1.4; cursor:pointer; }
a.mention:hover, a.mention.is-hover { border-color:var(--line-strong); }
a.mention .mi { flex:none; width:1.25em; height:1.25em; border-radius:var(--r-round); border:1px solid var(--line-strong); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; font-size:.72em; font-weight:700; }
a.mention.company .mi { border-radius:var(--r-xs); }
/* advanced/people/2: Timeline row, the kind as a small shape, its time, one line, where it lives; it opens the item */
.tlrow { display:flex; align-items:baseline; gap:var(--sp-10); width:100%; padding:var(--sp-6) var(--sp-8); border:0; border-radius:var(--r-md); background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.tlrow:hover, .tlrow.is-hover { background:var(--hover); }
.tlrow.ahead { color:var(--soft); }
.tlrow .tlshape { flex:none; align-self:center; width:14px; height:10px; display:flex; align-items:center; justify-content:center; }
.tlshape::before { content:''; box-sizing:border-box; width:9px; height:9px; border:1.5px solid var(--soft); }
.tlshape.is-note::before { border-radius:var(--r-xs); }
.tlshape.is-entry::before { border-radius:var(--r-round); }
.tlshape.is-task::before { width:7px; height:7px; border:0; background:var(--soft); transform:rotate(45deg); }
.tlshape.is-event::before { width:14px; height:6px; border:0; border-radius:var(--r-pill); background:var(--soft); }
.tlshape.is-capture::before { border:0; background:var(--soft); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.tlshape.is-interaction::before { border-radius:var(--r-round); background:var(--soft); }
.tlshape.is-mail::before { width:12px; height:8px; border-radius:var(--r-xs); } /* advanced/mail/10: a mail on a person's timeline */
/* advanced/people/4: Log line, what happened outside the app in seconds: a kind, a day (today), one sentence, Log */
.logline { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-8); padding:var(--sp-8); margin-bottom:var(--sp-12); border:1px solid var(--line); border-radius:var(--r-lg); }
.logline select, .logline input[type="date"] { flex:none; width:auto; }
.logline input[type="text"] { flex:1; min-width:180px; }
/* advanced/people/5: Cadence chip, under a person's name: how often, and how many days are left or overdue; pressing it shows the choices */
.cadchip { display:inline-flex; align-items:center; gap:var(--sp-6); margin-top:var(--sp-4); padding:var(--sp-2) var(--sp-10); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--sunken); color:var(--ink); font:inherit; font-size:var(--fs-meta); cursor:pointer; }
.cadchip:hover, .cadchip.is-hover { border-color:var(--line-strong); }
.cadchip.off { color:var(--soft); }
.cadchip.overdue .when { color:var(--red); font-weight:600; }
.cadchoices { display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-top:var(--sp-6); }
/* advanced/people/7: Merge pair, two entries side by side, row by row; in each row the value to keep is chosen */
.mergepair { display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,1fr); gap:var(--sp-6) var(--sp-8); align-items:stretch; margin-bottom:var(--sp-16); }
.mergepair .mh { padding:var(--sp-4) var(--sp-8); font-weight:600; overflow-wrap:anywhere; }
.mergepair .ml { padding:var(--sp-8) 0; color:var(--soft); font-size:var(--fs-meta); }
.mergepair .mv { display:flex; align-items:flex-start; gap:var(--sp-8); margin:0; padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; overflow-wrap:anywhere; }
.mergepair .mv.on { border-color:var(--ink); background:var(--sunken); }
.mergepair .mv input { flex:none; width:auto; margin:0; }
.mergepair .mv .none { color:var(--faint); }
/* advanced/tasks/7: World tag, a circle for Inner World, a square for Outer World: shape and word, never colour alone; pressing it switches */
.worldtag { display:inline-flex; align-items:center; gap:var(--sp-4); padding:0 var(--sp-6); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); color:var(--soft); font:inherit; font-size:var(--fs-meta); cursor:pointer; }
.worldtag::before { content:''; width:7px; height:7px; border:1.5px solid currentColor; }
.worldtag.inner::before { border-radius:var(--r-round); }
.worldtag.outer::before { border-radius:var(--r-xs); }
/* advanced/mail/2: Mail row, one thread: who wrote last, the subject, a line of its text, its labels and when; the shape the Mail list (mail/5) uses */
.mailrow { display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr) auto; gap:var(--sp-4) var(--sp-12); align-items:baseline; padding:var(--sp-8); border-bottom:1px solid var(--line); }
.mailrow .who { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mailrow .subj { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mailrow .subj .snip { color:var(--soft); }
.mailrow .when { color:var(--soft); font-size:var(--fs-meta); font-variant-numeric:tabular-nums; }
.mailrow .labels { grid-column:2 / 4; display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.mailrow .n { color:var(--soft); font-size:var(--fs-meta); }
/* advanced/mail/5: the Mail row gains the letter of the account it came to; open or selected, it is marked */
.mailrow.withacct { grid-template-columns:20px minmax(0,150px) minmax(0,1fr) auto; cursor:pointer; }
.mailrow.withacct .labels { grid-column:3 / 5; }
.mailrow .acct { width:18px; height:18px; border:1px solid var(--line-strong); border-radius:var(--r-xs); display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-meta); font-weight:700; color:var(--soft); }
.mailrow.sel { background:var(--hover); }
/* advanced/mail/5: Split tabs, six tabs over the Mail list, each with its count; the one you are on is underlined */
.splittabs { display:flex; flex-wrap:wrap; gap:var(--sp-4); border-bottom:1px solid var(--line); margin-bottom:var(--sp-8); }
.splittabs button { padding:var(--sp-6) var(--sp-10); border:0; border-bottom:2px solid transparent; background:none; color:var(--soft); font:inherit; cursor:pointer; }
.splittabs button.on { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
.splittabs button:hover, .splittabs button.is-hover { color:var(--ink); }
.splittabs .sub { margin-left:var(--sp-4); color:var(--soft); font-size:var(--fs-meta); font-weight:400; }
/* advanced/mail/6: Key hint, the key shown beside the action it does, so the menu teaches the keys */
.keyhint { display:inline-flex; align-items:center; justify-content:center; min-width:1.5em; margin-left:var(--sp-6); padding:0 var(--sp-4); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--sunken); color:var(--soft); font-family:inherit; font-size:var(--fs-caption); line-height:1.5; }
.cmdlist .litem { display:flex; justify-content:space-between; width:100%; }
/* advanced/mail/7: Sealed frame, someone else's HTML shown with no permissions at all (no scripts, nothing from the network), and a quiet bar for the images it holds back */
iframe.sealed { display:block; width:100%; height:60vh; min-height:240px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); resize:vertical; }
.imagebar { display:flex; align-items:center; gap:var(--sp-8); margin:var(--sp-6) 0; color:var(--soft); font-size:var(--fs-meta); }
.lyinglinks { margin-top:var(--sp-8); }
.lyinglinks .jrow .f { color:var(--warn); }
/* advanced/mail/8: Mail composer, under the conversation: to, subject, the words, Send, Send later; and the undo bar of a mail that waits */
.mailcomposer { display:grid; gap:var(--sp-6); margin-top:var(--sp-12); padding:var(--sp-12); border:1px solid var(--line-strong); border-radius:var(--r-lg); }
.mailcomposer textarea { min-height:120px; }
.mailcomposer .row2 { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-8); }
.mailcomposer .row2 .sp { flex:1; }
.undobar { display:flex; align-items:center; gap:var(--sp-8); margin-top:var(--sp-8); padding:var(--sp-6) var(--sp-10); border-radius:var(--r-md); background:var(--sunken); font-size:var(--fs-meta); }
.undobar .sp { flex:1; }
.undobar.error { color:var(--warn); }
/* advanced/mail/9: Opened chip, beside a sent mail: "Opened" with its time, grey when nothing is known; never "Read" */
.openchip { display:inline-flex; align-items:center; gap:var(--sp-4); padding:0 var(--sp-8); border:1px solid var(--line-strong); border-radius:var(--r-pill); font-size:var(--fs-meta); color:var(--ink); }
.openchip.unknown { color:var(--faint); border-color:var(--line); }
.notcounted { color:var(--soft); font-size:var(--fs-meta); }
/* advanced/mail/12: Invitation card, at the top of a mail: what, when, where, from whom, and the three keys; then what happened, in plain words */
.invitecard { display:grid; gap:var(--sp-6); margin-bottom:var(--sp-12); padding:var(--sp-12) var(--sp-14); border:1.5px solid var(--line-strong); border-radius:var(--r-lg); }
.invitecard .what { font-size:var(--fs-title); font-weight:600; }
.invitecard .when, .invitecard .where { color:var(--soft); }
.invitecard .answers { display:flex; flex-wrap:wrap; gap:var(--sp-8); }
.invitecard .answers .btn.on { border-color:var(--ink); font-weight:600; }
.invitecard .said { font-size:var(--fs-meta); }
/* advanced/writing/1: Outline bullet, a line of a tree: the fold triangle (with children only), the dot (it zooms in), the text */
.outline, .outline ul { list-style:none; margin:0; padding:0; }
.outline ul { padding-left:var(--sp-24); }
.outline .obrow { display:flex; align-items:flex-start; gap:var(--sp-2); }
.outline .ofold, .outline .odot { flex:none; width:18px; height:24px; padding:0; border:0; background:none; color:var(--soft); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:var(--fs-caption); }
.outline .ofold { visibility:hidden; }
.outline li.haskids > .obrow > .ofold { visibility:visible; }
.outline .odot::before { content:''; width:6px; height:6px; border-radius:var(--r-round); background:var(--ink); }
.outline li.folded > .obrow > .odot::before { box-shadow:0 0 0 4px var(--line); }
.outline .otext { flex:1; min-width:0; height:24px; padding:0; border:0; border-radius:var(--r-xs); background:none; color:var(--ink); font:inherit; line-height:24px; resize:none; overflow:hidden; }
.outline .otext:focus { outline:none; background:var(--hover); }
.outline li.folded > ul { display:none; }
.outline .oread { flex:1; min-width:0; min-height:24px; line-height:24px; cursor:text; overflow-wrap:anywhere; }
.outline .oread.ntask { display:flex; align-items:center; gap:var(--sp-6); }
.obar { display:flex; justify-content:flex-end; margin-bottom:var(--sp-4); }
/* advanced/writing/2: Block embed, a passage shown live where a bullet links it alone: the passage and its children in a
   frame, the note it lives in under it. A block link is the passage's words, underlined; a missing one says so. */
.bembed { flex:1; min-width:0; margin:var(--sp-2) 0; padding:var(--sp-4) var(--sp-10); border:1px solid var(--line); border-left:2px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); }
.bembed .bebody { line-height:24px; overflow-wrap:anywhere; }
.bembed ul { list-style:none; margin:0; padding:0 0 0 var(--sp-16); }
.bembed li::before { content:'•'; color:var(--soft); margin-right:var(--sp-6); }
.bembed .bsrc { display:inline-block; margin-top:var(--sp-2); padding:0; border:0; background:none; color:var(--soft); font:inherit; font-size:var(--fs-meta); cursor:pointer; text-decoration:underline; }
.bembed.gone { border-style:dashed; color:var(--soft); font-style:italic; }
a.blockref { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; cursor:pointer; }
a.blockref:hover, a.blockref.is-hover { text-decoration-color:var(--ink); }
a.blockref.gone { color:var(--soft); font-style:italic; text-decoration:none; cursor:default; }
a.blockref.plain { text-decoration:none; cursor:text; }
.usedin { flex:none; height:24px; padding:0 var(--sp-6); border:0; background:none; color:var(--soft); font:inherit; font-size:var(--fs-meta); white-space:nowrap; cursor:pointer; text-decoration:underline; }
.usedlist { display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); margin:0 0 var(--sp-4) var(--sp-40); }
.usedlist button { padding:0; border:0; background:none; color:var(--ink); font:inherit; font-size:var(--fs-meta); cursor:pointer; text-decoration:underline; text-decoration-color:var(--line-strong); }
.outline li.hit > .obrow { background:var(--hover); border-radius:var(--r-xs); }
/* advanced/writing/3: Comment thread, a comment on the words it means: the quote, the comment and who wrote it, the replies
   (the assistant's signed), and under an open one the two choices. The passage gets a quiet dotted underline. */
.cpane { display:flex; flex-direction:column; gap:var(--sp-12); min-width:0; }
.cpane > h3.sec { margin:0; }
.comthread { display:flex; flex-direction:column; gap:var(--sp-8); padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.comthread.on { border-color:var(--ink); }
.comthread .cquote { padding:0 0 0 var(--sp-8); border:0; border-left:2px dotted var(--line-strong); background:none; color:var(--soft); font:inherit; font-size:var(--fs-meta); text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.comthread .cquote.gone { cursor:default; font-style:italic; }
.comthread .cmsg { display:flex; flex-direction:column; gap:var(--sp-2); overflow-wrap:anywhere; white-space:pre-wrap; }
.comthread .cmsg.assistant { padding-left:var(--sp-8); border-left:2px solid var(--line-strong); }
.comthread .cwho { color:var(--soft); font-size:var(--fs-meta); white-space:normal; }
.comthread .cacts { display:flex; flex-wrap:wrap; gap:var(--sp-6); }
.comthread .cacts .btn.on { border-color:var(--ink); font-weight:600; }
.comthread textarea { width:100%; min-height:64px; padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); color:var(--ink); font:inherit; resize:vertical; }
.cmark { text-decoration:underline dotted var(--soft); text-underline-offset:3px; cursor:pointer; }
.cmark.on { background:var(--hover); }
.cbtn { position:fixed; z-index:30; }
/* advanced/writing/4: Version list, every save of a note: the clock with the count in the note's header; the versions newest
   first, each with what changed, who and when; two picked show the words that changed, added marked, removed struck through. */
.verbtn { display:inline-flex; align-items:center; gap:var(--sp-4); height:28px; padding:0 var(--sp-8); border:1px solid var(--line); border-radius:var(--r-pill); background:none; color:var(--soft); font:inherit; font-size:var(--fs-meta); cursor:pointer; flex:none; }
.verbtn:hover, .verbtn.is-hover { color:var(--ink); border-color:var(--line-strong); }
.verbtn svg { width:14px; height:14px; }
.dlg:has(.verdialog) { width:min(920px, 94vw); padding:0; overflow:hidden; }
.verdialog { display:grid; grid-template-columns:290px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); max-height:76vh; }
.verdialog .vhead { grid-column:1 / -1; display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-10) var(--sp-14); border-bottom:1px solid var(--line); }
.verdialog .vhead h2 { margin:0; font-size:var(--fs-heading); }
.verdialog .vhead .sp { flex:1; }
.verlist { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-6); overflow:auto; border-right:1px solid var(--line); }
.vrow { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--sp-8); padding:var(--sp-6) var(--sp-8); border:1px solid transparent; border-radius:var(--r-sm); background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.vrow:hover, .vrow.is-hover { background:var(--hover); }
.vrow.on { border-color:var(--ink); background:var(--hover); }
.vrow .vnum { grid-row:span 2; font-size:var(--fs-meta); font-weight:600; line-height:20px; }
.vrow .vsaid { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vrow .vwho { color:var(--soft); font-size:var(--fs-meta); }
.vview { display:flex; flex-direction:column; gap:var(--sp-10); padding:var(--sp-14); overflow:auto; }
.vview .vtop { display:flex; align-items:center; gap:var(--sp-8); color:var(--soft); font-size:var(--fs-meta); }
.vview .vtop .sp { flex:1; }
.vdiff { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.vdiff .vt { margin-bottom:var(--sp-8); font-weight:600; }
.vdiff ins { text-decoration:none; background:var(--hover); box-shadow:inset 0 -2px 0 var(--ink); }
.vdiff del { color:var(--soft); text-decoration:line-through; }
@media (max-width: 700px) { .verdialog { grid-template-columns:minmax(0,1fr); } .verlist { max-height:36vh; border-right:0; border-bottom:1px solid var(--line); } }
/* advanced/writing/5: Clash box, where you and your assistant changed the same line: both sides, Yours and Assistant's,
   and three buttons. Until you choose, your words are the note's; the assistant's are kept as a version. */
.clashbox { display:flex; flex-direction:column; gap:var(--sp-8); margin:var(--sp-4) 0 var(--sp-6) var(--sp-40); padding:var(--sp-10) var(--sp-12); border:1px dashed var(--line-strong); border-radius:var(--r-md); background:var(--surface); }
.clashbox .clhead { color:var(--soft); font-size:var(--fs-meta); }
.clashbox .csides { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-8); }
.clashbox .cside { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--r-sm); overflow-wrap:anywhere; }
.clashbox .cside.yours { border-color:var(--ink); }
.clashbox .clab { color:var(--soft); font-size:var(--fs-meta); font-weight:600; }
.clashbox .cside .cnone { color:var(--soft); font-style:italic; }
.clashbox .cbtns { display:flex; flex-wrap:wrap; gap:var(--sp-6); }
@media (max-width: 700px) { .clashbox { margin-left:0; } .clashbox .csides { grid-template-columns:minmax(0,1fr); } }
/* advanced/writing/6: Board card and connector, a canvas in a note: cards with words, cards that are your own notes, people
   and tasks (shown live, a thick left line and the kind), plain words, and arrows drawn from edge to edge. */
.boardblock { flex:1; min-width:0; margin:var(--sp-2) 0; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; }
.boardblock .bbhead { display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6) var(--sp-10); border-bottom:1px solid var(--line); color:var(--soft); font-size:var(--fs-meta); }
.boardblock .bbhead b { color:var(--ink); font-size:var(--fs-body); }
.boardblock .bbhead .sp, .boardfull .bfhead .sp { flex:1; }
.bstage { position:relative; overflow:hidden; }
.boardfull .bstage { overflow:visible; }
.bcanvas { position:absolute; left:0; top:0; transform-origin:0 0; }
.bconns { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.bconn { fill:none; stroke:var(--soft); stroke-width:1.5; pointer-events:none; }
.bconnhit { fill:none; stroke:transparent; stroke-width:12; cursor:pointer; pointer-events:stroke; }
.bconn.sel { stroke:var(--ink); stroke-width:2; }
.bconnhead { fill:var(--soft); }
.bconnlabel { fill:var(--soft); font-size:var(--fs-caption); }
.bcard { position:absolute; display:flex; flex-direction:column; justify-content:center; gap:var(--sp-2); padding:var(--sp-6) var(--sp-10); border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--bg); color:var(--ink); overflow:hidden; cursor:grab; user-select:none; touch-action:none; box-sizing:border-box; }
.bcard.ref { border-left:3px solid var(--ink); }
.bcard .bk { color:var(--soft); font-size:var(--fs-caption); }
.bcard .bt { font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.bcard .bl { overflow:hidden; color:var(--soft); font-size:var(--fs-meta); text-overflow:ellipsis; white-space:nowrap; }
.bcard.text { border-color:transparent; background:none; padding:var(--sp-2) var(--sp-4); }
.bcard.text .bt { font-weight:400; }
.bcard.gone { border-style:dashed; color:var(--soft); }
.bcard.sel { outline:2px solid var(--ink); outline-offset:1px; }
.bcard.dragging { cursor:grabbing; z-index:2; }
.bcard textarea { width:100%; height:100%; padding:0; border:0; background:none; color:inherit; font:inherit; font-weight:600; resize:none; }
.boardfull { position:fixed; inset:0; z-index:25; display:flex; flex-direction:column; background:var(--bg); }
.boardfull:focus { outline:none; }
.boardfull .bfhead { display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-10) var(--sp-16); border-bottom:1px solid var(--line); }
.boardfull .bfhead input { min-width:0; max-width:420px; padding:var(--sp-2) var(--sp-4); border:0; background:none; color:var(--ink); font:inherit; font-size:var(--fs-heading); font-weight:600; }
.boardfull .bfhint { color:var(--soft); font-size:var(--fs-meta); }
.boardfull .bfbody { position:relative; flex:1; overflow:auto; padding:var(--sp-16); }
.badd { position:relative; }
.badd .linksugg { position:absolute; top:calc(100% + 4px); right:0; left:auto; }
.badd .linksugg input { width:100%; margin-bottom:var(--sp-4); }
/* advanced/writing/7: what your assistant drew: a marked outline, a small tag, dashed arrows */
.bcard.byai { border:1px dashed var(--ink); box-shadow:0 0 0 2px var(--hover); }
.bcard .btag { align-self:flex-start; padding:0 var(--sp-4); border-radius:var(--r-xs); background:var(--hover); color:var(--soft); font-size:var(--fs-caption); }
.bconn.byai { stroke-dasharray:5 4; }
/* advanced/writing/8: Ink layer, the pen on a board: each stroke a filled outline, wider where the pen pressed harder,
   over the cards; a page from a paper tablet under them. */
.inklayer { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.inkstroke { fill:var(--ink); }
.inkstroke.live { opacity:.8; }
.inkstroke.faded { opacity:.3; }
.boardfull:not(.pen) .inklayer:not(.faded) .inkstroke { pointer-events:fill; cursor:pointer; }
.inkstroke.sel { stroke:var(--soft); stroke-width:3; paint-order:stroke; }
.bpage { position:absolute; display:block; max-width:none; pointer-events:none; user-select:none; box-shadow:0 0 0 1px var(--line); }
.boardfull.pen .bcanvas, .boardfull.pen .bcard { cursor:crosshair; }
/* advanced/writing/9: Import report, what one run brought in: imported, already here, doubled (always 0), kept because you
   edited them since, and their names; for a journal, the entries and the days they cover. */
.importreport { display:flex; flex-direction:column; gap:var(--sp-8); padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.importreport .irhead { display:flex; flex-wrap:wrap; gap:var(--sp-6); align-items:baseline; }
.importreport .irhead b { font-size:var(--fs-body); }
.importreport .irhead .f { color:var(--soft); font-size:var(--fs-meta); }
.importreport .irnums { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-8); }
.importreport .irn { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--r-sm); }
.importreport .irn .n { font-size:var(--fs-heading); font-weight:600; font-variant-numeric:tabular-nums; }
.importreport .irn .l { color:var(--soft); font-size:var(--fs-meta); }
.importreport .irn.zero .n { color:var(--soft); }
.importreport .irkept { margin:0; padding-left:var(--sp-16); color:var(--soft); font-size:var(--fs-meta); }
.importbtns { display:flex; flex-wrap:wrap; gap:var(--sp-8); margin-bottom:var(--sp-8); }
/* advanced/design-library/4: Rule card, one rule of RULES.md: its id and title, Do and Never in words (never colour), each
   with its live example; in the assistant's answer, a way to open it in the Library's Rules. */
.rules { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:var(--sp-12); margin:var(--sp-10) 0; }
.rulecard { display:flex; flex-direction:column; gap:var(--sp-8); padding:var(--sp-12) var(--sp-14); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); min-width:0; }
.rulecard.hit { border-color:var(--ink); }
.rulecard .rhead { display:flex; align-items:baseline; gap:var(--sp-8); }
.rulecard .rid { color:var(--soft); font-size:var(--fs-meta); font-weight:600; }
.rulecard .rdo, .rulecard .rnever { display:grid; grid-template-columns:minmax(48px, auto) minmax(0, 1fr); gap:var(--sp-8); }
.rulecard .rlab { color:var(--soft); font-size:var(--fs-meta); font-weight:600; }
.rulecard .rnever .rlab { text-decoration:line-through; }
.rulecard .rex { margin-top:var(--sp-6); padding:var(--sp-8) var(--sp-10); border:1px dashed var(--line); border-radius:var(--r-sm); overflow:hidden; }
.rulecard .ropen { font-size:var(--fs-meta); }
.rulesline { margin:var(--sp-8) 0; padding:var(--sp-6) var(--sp-10); border-left:2px solid var(--line-strong); color:var(--soft); font-size:var(--fs-meta); }
.opath { display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-bottom:var(--sp-8); color:var(--soft); font-size:var(--fs-meta); }
.opath button { padding:0; border:0; background:none; color:var(--soft); font:inherit; cursor:pointer; text-decoration:underline; }
/* advanced/mail/3: Count check, one label: Gmail's count beside yours, and Equal, or how many are left to fill */
.countcheck { display:grid; grid-template-columns:minmax(0,1fr) 80px 80px 110px; gap:var(--sp-4) var(--sp-12); align-items:baseline; padding:var(--sp-6) var(--sp-8); border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.countcheck.head { color:var(--soft); font-size:var(--fs-meta); }
.countcheck .num { text-align:right; }
.countcheck .ok { color:var(--soft); }
.countcheck .gap { color:var(--red); font-weight:600; }
.countcheck.total { font-weight:600; border-bottom:0; }
.tlrow .tltime { flex:none; width:68px; color:var(--soft); font-size:var(--fs-meta); font-variant-numeric:tabular-nums; }
.tlrow .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tlrow .f { flex:none; }
/* advanced/people/2: Now line, a hairline at now: what is still ahead today above it, what happened below */
.tlnow { display:flex; align-items:center; gap:var(--sp-8); margin:var(--sp-4) 0; padding:0 var(--sp-8); color:var(--ink); font-size:var(--fs-meta); font-weight:600; }
.tlnow::after { content:''; flex:1; height:1px; background:var(--ink); }
.tlday { margin:var(--sp-16) 0 var(--sp-4); padding:0 var(--sp-8); font-weight:600; }

/* Link suggestions (pkm/1): what [[ offers, at the cursor */
.linksugg { position:fixed; z-index:30; width:320px; max-height:280px; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-4); }
.linksugg.lib-static { position:static; }
.linksugg .litem .f { margin-left:var(--sp-8); }

/* Backlink pane (pkm/1): Linked from, at the bottom of a page: each page that links here, with the sentence around the link */
.backlinks { margin-top:var(--sp-24); }
.backlink { display:block; width:100%; text-align:left; padding:var(--sp-8); border-radius:var(--r-md); }
.backlink:hover, .backlink.is-hover { background:var(--hover); }
.backlink .t { display:block; font-weight:600; }
.backlink .n { display:block; white-space:normal; }

/* Person card (pkm/2): the head of a person or a company: initials, name and role. A company's initials sit in a square,
   a person's in a circle: shape, not colour, tells them apart. */
.personcard { display:flex; align-items:center; gap:var(--sp-14); margin-bottom:var(--sp-16); }
.personcard .initials { flex:none; width:48px; height:48px; border-radius:var(--r-round); border:1.5px solid var(--line-strong); background:var(--sunken); display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.02em; }
.personcard.company .initials { border-radius:var(--r-md); }
.personcard .pname { font-size:var(--fs-title); font-weight:600; }
.personcard .prole { color:var(--soft); font-size:var(--fs-small); }

/* Task in a note (tasks/1): a line with a checkbox, in a note or an entry; its @date shows as a Chip */
.ntask { display:flex; gap:var(--sp-10); align-items:flex-start; padding:var(--sp-2) 0; }
.ntask .chk { cursor:pointer; }
.ntask.done .chk { background:var(--soft); border-color:var(--soft); box-shadow: inset 0 0 0 3px var(--surface); }
.ntask.done .t { text-decoration:line-through; color:var(--faint); }
.ntask .chip { margin-left:var(--sp-4); }

/* Task row (tasks/1): the same task in a list, with where it lives (the List row and its quiet line, plus the note) */
.tasknote .link { font-size:var(--fs-meta); }

/* Event block (time/1): an event in the day at its fixed time; its height is its length; the line on its left is its
   calendar's colour, named in the legend beside it. Your own events can be moved; the others are read only. */
.evblock { position:absolute; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--ink); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-6); font-size:var(--fs-caption); cursor:pointer; }
.evblock .evt { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evblock .evm { color:var(--soft); }
.evblock.own { cursor:grab; }
.evblock.sel { outline:2px solid var(--ink); z-index:2; }
.evblock.declined { opacity:.55; text-decoration:line-through; }
.evblock.allday { position:static; margin-bottom:var(--sp-2); }
.calline { display:inline-block; width:12px; height:3px; border-radius:var(--r-sm); vertical-align:middle; }

/* Suggestion (assistant/3): what the assistant proposes for a capture, one line of why, and one button; nothing moves until
   it is pressed. The buttons under it stay, so a wrong guess costs one press. */
.suggestion { margin-top:var(--sp-16); padding:var(--sp-12) var(--sp-14); border:1px solid var(--line); border-left:3px solid var(--ink); border-radius:var(--r-lg); background:var(--sunken); }
.suggestion .srow { display:flex; align-items:center; gap:var(--sp-10); }
.suggestion .swhy { color:var(--soft); font-size:var(--fs-small); margin-top:var(--sp-4); }
.suggestion kbd { font-family:inherit; font-size:var(--fs-caption); margin-left:var(--sp-6); opacity:.8; }
.suggestion.pending { color:var(--faint); font-size:var(--fs-small); border-left-color:var(--line-strong); }

/* Approval card (assistant/4): a step that asks first, said in one sentence; Approve, or Not now. Nothing happens before. */
.ccard.approval { border-left:3px solid var(--ink); }
.ccard.approval.open .cct .quiet { color:var(--ink); font-weight:600; }

/* Segmented switch (assistant/4): two positions side by side, the one that holds filled; a locked one is shown, not changed */
.segswitch { display:inline-flex; border:1px solid var(--line); border-radius:var(--r-pill); padding:var(--sp-2); gap:var(--sp-2); background:var(--sunken); }
.segswitch button { padding:var(--sp-4) var(--sp-10); border-radius:var(--r-pill); font-size:var(--fs-meta); color:var(--soft); }
.segswitch button.on { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 0 0 1px var(--line-strong); }
.segswitch button:disabled, .segswitch button.is-disabled { cursor:default; opacity:.7; }
.segswitch button:not(.on):hover, .segswitch button.is-hover { background:var(--hover); }

/* Mode banner (advanced/assistant-plus/9): a quiet line at the top of a chat that works without cards */
.modebanner { margin:var(--sp-8) var(--sp-20); padding:var(--sp-6) var(--sp-12); border:1px dashed var(--line-strong); border-radius:var(--r-md); color:var(--soft); font-size:var(--fs-small); }
.ccard.floor { border-left-style:double; border-left-width:4px; }

/* Calendar link row (advanced/calendar/1): a calendar in the Calendars pane: its line colour, its name, when it was read */
.calrow { display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-6) var(--sp-4); border-bottom:1px solid var(--line); }
.calrow .calline { flex:none; width:14px; height:4px; }
.calrow .body { flex:1; min-width:0; }
.calrow .warn-t { color:var(--warn); }
/* A link's events: the same Event block in a lighter style, read only */
.evblock.feed { background:var(--sunken); color:var(--soft); border-style:dashed; border-left-style:solid; cursor:default; }

/* Hour grid (advanced/calendar/2): days side by side in hours, an hour a fixed height; the working day lighter than the
   hours around it; a line for now. Events and blocks sit at their times, solid. */
.hourgrid { display:grid; grid-template-columns:52px repeat(var(--cols), minmax(0,1fr)); border-top:1px solid var(--line); margin-top:var(--sp-10); }
.hourcol { position:relative; border-left:1px solid var(--line); background-color:var(--sunken); background-image:linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size:100% 44px; }
.hourcol .workday { position:absolute; left:0; right:0; background:var(--surface); opacity:.7; }
.hourcol .evblock { z-index:1; }
.hourcol .hblock { border-left-color:var(--soft); background:var(--hover); }
/* Task block (advanced/calendar/2): a placed task, dashed, as tall as its estimate, or its share of an over gap */
.taskblock { position:absolute; left:var(--sp-6); right:var(--sp-2); z-index:2; overflow:hidden; border:1px dashed var(--line-strong); border-radius:var(--r-sm); background:var(--surface); padding:0 var(--sp-6); font-size:var(--fs-caption); }
.taskblock span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.taskblock.done span { text-decoration:line-through; color:var(--faint); }
.gapover { position:absolute; right:var(--sp-4); z-index:3; color:var(--red); font-size:var(--fs-label); font-weight:700; background:var(--surface); padding:0 var(--sp-4); }

/* Lens switch (advanced/calendar/3): which lens the Planner shows, the order or the hours; V switches it */
.lensswitch button[data-lens="hours"]::after { content:" V"; font-size:var(--fs-label); color:var(--faint); }
/* While a task is dragged over the hours, the gap under the pointer lights up and names the event it would follow */
.gaplit { position:absolute; left:0; right:0; z-index:4; border:2px dashed var(--ink); background:var(--hover); border-radius:var(--r-sm); pointer-events:none; }
.gaplit span { position:absolute; left:var(--sp-4); top:var(--sp-2); font-size:var(--fs-label); font-weight:700; background:var(--surface); padding:0 var(--sp-4); }
.taskblock[draggable="true"] { cursor:grab; }

/* A time block for a task (advanced/calendar/4): pinned, solid, with a pin mark (a diamond), in the order and in the hours */
.pinrow { border-left:3px solid var(--ink); background:var(--surface); border-radius:var(--r-md); margin:var(--sp-4) 0; padding-left:var(--sp-6); }
.pinrow .pintime { font-size:var(--fs-caption); font-weight:700; padding:var(--sp-4) var(--sp-4) 0; }
.evblock.pinblock { border:1px solid var(--ink); border-left-width:3px; background:var(--surface); z-index:2; }
.evblock.pinblock.done .evt { text-decoration:line-through; color:var(--faint); }
.pin { font-size:var(--fs-label); }

/* Sentence preview (advanced/calendar/5): what Enter will make, as chips, before anything exists; a missing piece says so */
.sentprev { display:flex; flex-wrap:wrap; gap:var(--sp-6); min-height:var(--sp-32); margin:var(--sp-10) 0; align-items:center; }
.sentprev .chip.person { border:1px solid var(--line-strong); background:var(--surface); }
.sentprev .chip.missing { background:transparent; border:1px dashed var(--line-strong); color:var(--soft); }

/* Template chip (advanced/calendar/6): a routine you set up once, a name and a length; drag it into a gap of the hours */
.tplchip { display:inline-flex; align-items:center; gap:var(--sp-6); border:1px dotted var(--line-strong); border-radius:var(--r-pill); padding:var(--sp-2) var(--sp-10); background:var(--surface); font-size:var(--fs-meta); cursor:grab; }
.tplchip .link { font-size:var(--fs-meta); text-decoration:none; }
/* The routine block: a routine placed in a day shares its gap like a task, with a dotted outline; never an event */
.taskblock.routineblock { border-style:dotted; border-width:2px; background:var(--sunken); }
.row.routine { border:1px dotted var(--line-strong); }
.row.routine .rmark { flex:none; width:20px; text-align:center; color:var(--soft); }
/* Drawing an event in the Calendar: the stroke shows its time; a small field asks for the title */
.evdraft { position:absolute; left:2px; right:2px; z-index:5; border:2px dashed var(--ink); border-radius:var(--r-sm); background:var(--surface); padding:var(--sp-2) var(--sp-4); font-size:var(--fs-caption); }
.evdraft input { width:100%; padding:var(--sp-2) var(--sp-4); font-size:var(--fs-meta); }
.evdraft .dt { color:var(--soft); }

/* Answer bar (advanced/calendar/9): Yes, Maybe, No to an invitation, your choice raised; an unanswered one is dashed */
.answerbar { display:inline-flex; gap:var(--sp-6); margin:var(--sp-12) 0; }
.answerbar .btn.on { border-color:var(--ink); font-weight:700; box-shadow:0 0 0 1px var(--ink); }
.evblock.invite { border-style:dashed; border-left-style:dashed; background:var(--surface); }
.calpane .outbox { padding:var(--sp-4) var(--sp-4) var(--sp-8); }
/* advanced/design-library/3: every state designed once. A component's hover sits beside its own rule above (with its twin
   class, .is-hover); focus, disabled and error are shared here, each with a twin class a page or the Library can force. */
:where(.btn, .chipb, .litem, .row, .chk, .splittabs button, .segswitch button, .tlrow, .backlink, .cadchip, .vrow, .verbtn, .entry, .minical .mc-day, a.wikilink, a.mention, a.blockref, .link, .menu button, .crow, button.originchip, .linkkind, .relx, .mightx, .gbin):focus-visible,
:where(.btn, .chipb, .litem, .row, .chk, .splittabs button, .segswitch button, .tlrow, .backlink, .cadchip, .vrow, .verbtn, .entry, .minical .mc-day, a.wikilink, a.mention, a.blockref, .link, .menu button, .crow, button.originchip, .linkkind, .relx, .mightx, .gbin).is-focus { outline:2px solid var(--ink); outline-offset:2px; }
:where(.btn, .chipb, .litem, .chk, .splittabs button, .cadchip, .verbtn, .link, .menu button, input, select, textarea):disabled,
:where(.btn, .chipb, .litem, .row, .chk, .splittabs button, .cadchip, .verbtn, .link, .menu button, input, select, textarea, .searchbox).is-disabled { opacity:.5; cursor:not-allowed; }
/* an error says what is wrong in words, under the field; the line is only a second sign */
input.is-error, select.is-error, textarea.is-error, input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color:var(--warn); }
.field__msg { display:flex; gap:var(--sp-4); margin-top:var(--sp-4); color:var(--warn); font-size:var(--fs-meta); }
.field__msg::before { content:'!'; font-weight:700; }
.field__msg[hidden] { display:none; } /* no message, no line */
/* states that lived in the views (style.css), moved here so a screen never styles a state of its own */
.link:hover, .link.is-hover { text-decoration-color:var(--ink); }
.menu button:hover, .menu button.is-hover { background:var(--hover); }
.crow:hover, .crow.is-hover, .crow.sel { background:var(--hover); }
.titlein:hover, .titlein.is-hover, .titlein:focus, .titlein.is-focus { border-bottom-color:var(--line); outline:0; }

/* App icon (advanced/design-library/7): the one icon.svg, next to the app's name and at its sizes in the Library */
.brand:has(.appmark) { display:flex; align-items:center; gap:var(--sp-8); }
.appmark { width:var(--sp-20); height:var(--sp-20); flex:none; display:block; }
.appicon { display:inline-flex; flex-direction:column; align-items:center; gap:var(--sp-6); }

/* Origin chip (advanced/context/1): where a row came from, under its title; pressed, it opens the source */
.originslot { display:block; margin:var(--sp-4) 0 var(--sp-8); }
.originslot:empty { display:none; }
.originchip { display:inline-flex; align-items:center; gap:var(--sp-6); padding:var(--sp-2) var(--sp-8); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); color:var(--soft); font-size:var(--fs-meta); }
button.originchip { cursor:pointer; }
button.originchip:hover, button.originchip.is-hover { border-color:var(--line-strong); color:var(--ink); }
.originchip .oicon { width:var(--sp-14); height:var(--sp-14); flex:none; }
.originchip .owhen { color:var(--faint); }
.originchip.unknown { border-style:dashed; color:var(--faint); }
.originsrc .osrcquote { white-space:pre-wrap; background:var(--sunken); border-radius:var(--r-md); padding:var(--sp-12) var(--sp-14); margin:var(--sp-10) 0; }
.cm.hit { background:var(--hover); border-radius:var(--r-md); } /* the chat message an Origin chip opened */

/* Link kind (advanced/context/2): how a page that links here relates to this one, and why, under its Linked from row */
.linkrel { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-8); padding:0 var(--sp-8) var(--sp-8); }
.linkkind { border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:0 var(--sp-8); font-size:var(--fs-meta); color:var(--ink); }
.linkkind:hover, .linkkind.is-hover { background:var(--hover); }
.linkkind.add { border-style:dashed; color:var(--soft); }
.linkwhy { font-style:italic; color:var(--soft); font-size:var(--fs-small); }
.linkmenu { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-8); margin:0 var(--sp-8) var(--sp-10); padding:var(--sp-10); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.linkmenu .linkwhyin { flex:1 1 220px; }

/* Related pane (advanced/context/3): notes close to this one, each with why; and one quiet line under a task */
.related { margin-top:var(--sp-24); }
.relrow { display:flex; align-items:baseline; gap:var(--sp-8); padding:var(--sp-6) var(--sp-8); border-radius:var(--r-md); }
.relrow:hover, .relrow.is-hover { background:var(--hover); }
.relrow .t { font-weight:600; text-align:left; }
.relrow .relwhy { flex:1; color:var(--soft); font-size:var(--fs-small); }
.relx, .mightx { color:var(--faint); padding:0 var(--sp-4); border-radius:var(--r-sm); }
.relx:hover, .relx.is-hover, .mightx:hover, .mightx.is-hover { color:var(--ink); background:var(--hover); }
.mightbe { color:var(--soft); font-size:var(--fs-meta); margin-top:var(--sp-2); }
.mightbe .link { font-size:var(--fs-meta); }
.mightbe .f { margin-left:var(--sp-4); }

/* Insight card (advanced/context/4): an insight with the exact words it stands on; what the checks dropped, and why */
.inscard { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:var(--sp-14) var(--sp-16); margin:var(--sp-12) 0; }
.inshead { display:flex; align-items:baseline; gap:var(--sp-8); }
.inskind { border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:0 var(--sp-8); font-size:var(--fs-label); color:var(--soft); }
.institle { font-size:var(--fs-heading); }
.instext { color:var(--soft); margin:var(--sp-6) 0 var(--sp-8); }
.insev { list-style:none; padding:0; margin:0 0 var(--sp-10); }
.insev li { padding:var(--sp-4) 0; border-top:1px solid var(--line-soft); }
.insquote { font-style:italic; text-align:left; }
.inslast { margin:var(--sp-8) 0; }
.insdropped { margin-top:var(--sp-24); }
.insdrop { padding:var(--sp-6) 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-small); }

/* Strength (advanced/context/5): the moments a thing was used, beside its title; Forget this; the notes list's sort */
.strength { display:inline-flex; align-items:center; gap:var(--sp-4); color:var(--soft); font-size:var(--fs-meta); font-variant-numeric:tabular-nums; }
.strength:empty { display:none; }
.strength .sicon { width:var(--sp-14); height:var(--sp-14); }
.forgetbtn { font-size:var(--fs-meta); color:var(--soft); }
.nsort { display:block; margin:var(--sp-8) 0; }
.nrow .strength { float:right; }
.strength .trend { margin-left:var(--sp-4); font-style:italic; } /* advanced/context/6: rising, steady, fading, in a word */

/* In mind row (advanced/context/7): what the assistant has at hand, each with why; the line an answer read it on */
.imgroup { margin-top:var(--sp-20); }
.imrow { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-8); padding:var(--sp-6) var(--sp-8); border-radius:var(--r-md); }
.imrow:hover, .imrow.is-hover { background:var(--hover); }
.imrow .t { font-weight:600; text-align:left; }
.imrow .imkind { color:var(--faint); font-size:var(--fs-meta); }
.imrow .imwhy { flex:1; color:var(--soft); font-size:var(--fs-small); }
.readline { color:var(--faint); font-size:var(--fs-meta); margin-bottom:var(--sp-4); }
.cm.hit .readline { color:var(--soft); }

/* Sleep summary (advanced/context/8): the night's line, the steps you repeat, the guesses marked as guesses */
.sleep .sleepline { font-size:var(--fs-heading); margin:var(--sp-6) 0 var(--sp-2); }
.repeat { flex:1; }
.repeat .rstep { font-weight:600; }
.guesstag { border:1px dashed var(--line-strong); border-radius:var(--r-pill); padding:0 var(--sp-8); font-size:var(--fs-label); color:var(--soft); }
.sleepscore { margin-top:var(--sp-8); }

/* Mic pill (advanced/voice/1): dictation at the foot of the page, its state in words and a dot's shape */
#micpill { position:fixed; left:50%; bottom:var(--sp-16); transform:translateX(-50%); z-index:40; }
.micpill { display:inline-flex; align-items:center; gap:var(--sp-8); max-width:min(560px, 92vw); padding:var(--sp-6) var(--sp-14); border:1px solid var(--line-strong); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font-size:var(--fs-small); }
.micpill .mpwords { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.micpill .mpdot { width:var(--sp-10); height:var(--sp-10); border-radius:var(--r-pill); border:2px solid var(--soft); flex:none; }
.micpill.listening .mpdot { background:var(--red); border-color:var(--red); }
.micpill.writing .mpdot { border-style:dashed; }
.micpill.done .mpdot { background:var(--ink); border-color:var(--ink); }
.micpill.idle { color:var(--soft); }
.mplevel { width:var(--sp-40); height:var(--sp-4); background:var(--line-soft); border-radius:var(--r-pill); overflow:hidden; flex:none; }
.mplevel i { display:block; height:100%; background:var(--ink); }

/* Glossary row (advanced/voice/2): a term, how it is spelled, where it came from; the card that asks to learn a fix */
.glossrow { display:flex; align-items:baseline; gap:var(--sp-8); padding:var(--sp-6) 0; border-bottom:1px solid var(--line-soft); }
.glossrow .gterm { font-weight:600; }
.glossrow .gheard { color:var(--soft); font-style:italic; font-size:var(--fs-small); }
.glossrow .gsource { flex:1; text-align:right; color:var(--faint); font-size:var(--fs-meta); }
.gbin { color:var(--faint); padding:0 var(--sp-4); border-radius:var(--r-sm); }
.gbin:hover, .gbin.is-hover { color:var(--ink); background:var(--hover); }
.glossask { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-10); padding:var(--sp-10) var(--sp-14); border:1px solid var(--line-strong); border-radius:var(--r-lg); background:var(--surface); font-size:var(--fs-small); }
#glossask { position:fixed; left:50%; bottom:var(--sp-64); transform:translateX(-50%); z-index:41; max-width:min(560px, 92vw); }

/* Call widget (advanced/voice/3): the call, above the chat's message box; the mark on what was said on a call */
.callwidget { display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-8) var(--sp-12); margin:var(--sp-8) 0; border:1px solid var(--line-strong); border-radius:var(--r-lg); background:var(--surface); font-size:var(--fs-small); }
#callwidget.floating { position:fixed; left:50%; bottom:var(--sp-16); transform:translateX(-50%); z-index:40; width:min(560px, 92vw); margin:0; }
.callwidget .cwphone { width:var(--sp-16); height:var(--sp-16); flex:none; }
.callwidget .cwstate { min-width:var(--sp-64); }
.callwidget .cwturn { color:var(--soft); }
.callwidget .cwwords { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--soft); }
.viavoice { display:inline-block; border:1px solid var(--line); border-radius:var(--r-pill); padding:0 var(--sp-6); font-size:var(--fs-label); color:var(--soft); margin-bottom:var(--sp-4); }
/* Metric chip (advanced/voice/5): a measured number in plain words */
.metric { display:inline-block; border:1px dashed var(--line-strong); border-radius:var(--r-pill); padding:0 var(--sp-6); font-size:var(--fs-label); color:var(--soft); font-variant-numeric:tabular-nums; }
/* Hand-off line (advanced/voice/4 and 6): the assistant at work on a call's turn, then Done or Asks first; the line said at a pause */
.handoff { display:flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-small); color:var(--soft); margin:var(--sp-4) 0; }
.handoff b { color:var(--ink); font-weight:600; }
.handoff.asks b { color:var(--gold); }
.handoff .hodots { display:inline-flex; gap:var(--sp-4); }
.handoff .hodots i { width:var(--sp-4); height:var(--sp-4); border-radius:var(--r-pill); background:var(--faint); animation: hodot 1.2s ease-in-out infinite; }
@keyframes hodot { 50% { opacity:0.25; } }
@media (prefers-reduced-motion: reduce) { .handoff .hodots i { animation:none; } }
.handoff .hodots i:nth-child(2) { animation-delay:0.2s; } .handoff .hodots i:nth-child(3) { animation-delay:0.4s; }
.handoff.said { color:var(--faint); }
/* advanced/paperwork/1: a document in the list: its kind, title, who issued it and the next date that matters */
.doccard { display:flex; align-items:baseline; gap:var(--sp-8); width:100%; padding:var(--sp-8) var(--sp-10); margin:0 0 var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-small); text-align:left; cursor:pointer; }
.doccard:hover { background:var(--hover); }
.doccard .dtitle { font-weight:600; } .doccard .dmeta { color:var(--soft); margin-left:auto; white-space:nowrap; } .doccard .dwarn { color:var(--warn); font-size:var(--fs-meta); }
.kindtag { display:inline-block; border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:0 var(--sp-6); font-size:var(--fs-label); color:var(--soft); text-transform:capitalize; }
/* advanced/paperwork/2: a field read from a document: its value, how sure the reading is, Check this, and a field to correct it */
.fieldrow { display:grid; grid-template-columns:8rem 1fr max-content max-content minmax(8rem, 14rem); gap:var(--sp-8); align-items:center; padding:var(--sp-4) 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-small); }
.fieldrow .fname { color:var(--soft); text-transform:capitalize; } .fieldrow .fconf { color:var(--soft); font-size:var(--fs-meta); }
.fieldrow .fcheck { color:var(--watch); font-weight:600; font-size:var(--fs-meta); } .fieldrow.check .fval { color:var(--watch); }
.fieldrow .fix { display:flex; gap:var(--sp-4); } .fieldrow .fedit { font-size:var(--fs-small); padding:var(--sp-2) var(--sp-6); min-width:0; flex:1; }
.fieldrow .fcorrect { justify-self:end; font-size:var(--fs-meta); }
/* advanced/paperwork/3: the Scan inbox strip on Documents, each scan with its step */
.scanstrip { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6) var(--sp-12); padding:var(--sp-8) var(--sp-10); margin-bottom:var(--sp-10); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--sunken); font-size:var(--fs-meta); }
.scanitem { white-space:nowrap; } .scanitem.st-failed { color:var(--warn); white-space:normal; } .scanitem.st-removed, .scanitem.st-duplicate { color:var(--soft); }
/* advanced/assistant-plus/10: a Claude Code session outside the app, above the chats: title, where and folder, running or stopped */
.sesslist { margin:var(--sp-8) 0; padding-bottom:var(--sp-8); border-bottom:1px solid var(--line); }
.sessrow { padding:var(--sp-6) var(--sp-4); border-radius:var(--r-sm); font-size:var(--fs-small); }
.sessrow:hover { background:var(--hover); }
.sessrow .sesst { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sessrow .sessb { display:flex; align-items:center; gap:var(--sp-8); margin-top:var(--sp-2); }
.sesstag { display:inline-block; border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:0 var(--sp-6); font-size:var(--fs-label); color:var(--soft); }
.sesstag.running { border-color:var(--good); color:var(--good); }
/* advanced/assistant-plus/8: a connection in Settings › Connections: its name, host and health, Reads and Writes, each action with its kind */
.connrow { padding:var(--sp-10) 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-small); }
.connrow .cnhead { display:flex; align-items:baseline; gap:var(--sp-8); }
.connrow .cnhealth { margin-left:auto; font-size:var(--fs-meta); color:var(--soft); } .connrow .cnhealth.ok { color:var(--good); } .connrow .cnhealth.bad { color:var(--warn); }
.connrow .cnact { display:grid; grid-template-columns:max-content minmax(0, 14rem) 1fr max-content; gap:var(--sp-8); align-items:center; padding:var(--sp-4) 0; font-size:var(--fs-meta); }
.connrow .cnm { font-family:ui-monospace, Menlo, monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .connrow .cns { color:var(--soft); }
.kindchip { display:inline-block; border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:0 var(--sp-6); font-size:var(--fs-label); white-space:nowrap; }
.kindchip.k-changes { border-color:var(--amber); } .kindchip.k-reaches { border-color:var(--watch); } .kindchip.k-removes { border-color:var(--bad); color:var(--bad); }
.connadd { margin-top:var(--sp-8); }
/* advanced/assistant-plus/7: a routine in Settings › Routines: title and switch, its schedule, the next run, its runs */
.routinerow { padding:var(--sp-10) 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-small); }
.routinerow .rthead { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); }
.routinerow .rtwhen { margin:var(--sp-4) 0 var(--sp-2); }
.routinerow .rtruns { margin-top:var(--sp-6); padding-left:var(--sp-12); border-left:2px solid var(--line); }
/* advanced/assistant-plus/6: a skill in Settings › Skills: its name and switch, what it is for, what it needs and whether it is in place */
.skillrow { padding:var(--sp-10) 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-small); }
.skillrow .skhead { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); }
.skillrow .skpurpose { color:var(--soft); margin:var(--sp-4) 0; }
.skillrow .skneeds { display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-12); font-size:var(--fs-meta); }
.skillrow .skneeds .ok { color:var(--good); } .skillrow .skneeds .missing { color:var(--warn); }
/* advanced/assistant-plus/5: a live card points at a row (a person, a note) and draws it as it is now; a ring round a part */
.livecard { display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-10) var(--sp-12); margin:var(--sp-8) 0; border:1px solid var(--line); border-left:3px solid var(--steel); border-radius:var(--r-lg); background:var(--surface); font-size:var(--fs-small); max-width:420px; }
.livecard .lckind { color:var(--soft); font-size:var(--fs-label); }
.livecard .lct { font-weight:600; font-size:var(--fs-body); }
.livecard .lcl { color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.livecard > .link { align-self:flex-start; }
.livecard.gone { opacity:0.6; }
.preview .livecard { margin:0 0 var(--sp-12); max-width:none; }
.ring { outline:2px solid var(--blue); outline-offset:var(--sp-4); border-radius:var(--r-sm); animation:ringpulse 1s ease-in-out 3; }
@keyframes ringpulse { 50% { outline-offset:var(--sp-8); } }
@media (prefers-reduced-motion: reduce) { .ring { animation:none; } }
/* advanced/assistant-plus/1: the Took on list above the chat, each job with its state */
.tookon { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6); padding:var(--sp-6) 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-small); }
.tookon > .f { margin-right:var(--sp-4); }
.tkrow { display:inline-flex; align-items:center; gap:var(--sp-6); padding:var(--sp-2) var(--sp-10); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-meta); cursor:pointer; max-width:100%; }
.tkrow:hover, .tkrow.on { background:var(--hover); border-color:var(--line-strong); }
.tkrow .tkt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:28ch; }
.tkrow .tks { color:var(--soft); }
.tkrow .jdot { width:8px; height:8px; border-radius:var(--r-round); background:var(--faint); flex:none; }
.tkrow.st-working .jdot { background:var(--violet); animation:micpulse 1.2s ease-in-out infinite; } .tkrow.st-done .jdot { background:var(--soft); } .tkrow.st-error .jdot { background:var(--warn); }
/* advanced/assistant-plus/2: a helper's brief, four parts that read without the chat; an answer's sources as links */
.hbrief { flex-basis:100%; padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-left:3px solid var(--violet); border-radius:var(--r-lg); background:var(--surface); }
.hbrief dl { display:grid; grid-template-columns:max-content 1fr; gap:var(--sp-4) var(--sp-12); margin:var(--sp-6) 0 0; }
.hbrief dt { color:var(--soft); font-size:var(--fs-meta); } .hbrief dd { margin:0; white-space:pre-wrap; }
.hsources { font-size:var(--fs-meta); margin-top:var(--sp-4); color:var(--soft); }
.hsources .f { margin-right:var(--sp-4); }
/* advanced/health/3, the dashboard kit. Status mark: always a word and a shape (good a circle, watch a diamond, bad a triangle) */
.status { display:inline-flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-label); font-weight:600; white-space:nowrap; }
.status.good { color:var(--good); } .status.watch { color:var(--watch); } .status.bad { color:var(--bad); }
.status .smark { display:inline-block; width:10px; height:10px; background:currentColor; flex:none; }
.status.good .smark { border-radius:var(--r-round); }
.status.watch .smark { width:8px; height:8px; transform:rotate(45deg); margin:0 var(--sp-2); }
.status.bad .smark { clip-path:polygon(50% 0, 100% 100%, 0 100%); width:11px; }
.status.small .smark { width:8px; height:8px; } .status.watch.small .smark { width:6px; height:6px; } .status.bad.small .smark { width:9px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Line and area: the days over the area under them, on your usual band */
.hline { display:block; width:100%; height:120px; }
.hline.spark { height:36px; }
.hline .hband { fill:var(--good-bg); }
.hline .harea { fill:var(--line-soft); }
.hline .hpath { fill:none; stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.hline.spark .hpath { stroke:var(--soft); }
.hline .hdot { fill:var(--ink); }
/* Bars, labelled at the bar */
.hbars { display:flex; align-items:stretch; gap:var(--sp-8); height:140px; }
.hbar { flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); min-width:0; }
.hbar .hbarval { font-size:var(--fs-caption); color:var(--soft); white-space:nowrap; font-variant-numeric:tabular-nums; }
.hbar .hbartrack { flex:1; width:100%; position:relative; background:var(--line-soft); border-radius:var(--r-xs); }
.hbar .hbarfill { position:absolute; left:0; right:0; bottom:0; background:var(--bar-fill); border-radius:var(--r-xs); }
.hbar .hbarkey { font-size:var(--fs-caption); color:var(--faint); white-space:nowrap; }
/* Calendar of days: one small square a day, with its status mark */
.hcal { display:grid; grid-template-columns:repeat(7, 20px); gap:var(--sp-2); }
.hcal .hday { width:20px; height:20px; border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; }
.hcal .hday.good { background:var(--good-bg); } .hcal .hday.watch { background:var(--watch-bg); } .hcal .hday.bad { background:var(--bad-bg); }
.hcal .hday.none { background:var(--sunken); } .hcal .hday.blank { visibility:hidden; }
/* health/4: the Focus row and the Area card */
.focusrow { display:flex; align-items:center; gap:var(--sp-12); width:100%; padding:var(--sp-8) var(--sp-12); margin:0 0 var(--sp-6); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-body); text-align:left; cursor:pointer; }
.focusrow .status { min-width:var(--sp-64); }
.focusrow:hover, .areacard:hover { background:var(--hover); }
.areacard { display:flex; flex-direction:column; gap:var(--sp-6); padding:var(--sp-12); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; min-width:0; }
.areacard .ahead { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); }
.areacard .alast { font-size:var(--fs-heading); font-variant-numeric:tabular-nums; }
/* Fallback notice (advanced/voice/7): what failed, what still works, one choice */
.fallback { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-10); padding:var(--sp-8) var(--sp-12); border:1px solid var(--line-strong); border-radius:var(--r-lg); background:var(--sunken); font-size:var(--fs-small); }
/* the warm dot on the Call button (advanced/voice/5): warming is a ring, ready is filled */
.warmdot { display:inline-block; width:var(--sp-8); height:var(--sp-8); margin-left:var(--sp-6); border-radius:var(--r-pill); border:1.5px solid var(--soft); vertical-align:middle; }
.warmdot.ready { background:var(--ink); border-color:var(--ink); }

/* advanced/paperwork/4 and 5: Transaction row, Category rule row */
.txlist { display:flex; flex-direction:column; }
.txrow { display:grid; grid-template-columns:4.5rem minmax(0, 1fr) max-content minmax(8rem, 11rem) 4.5rem; gap:var(--sp-8); align-items:center; padding:var(--sp-6) 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-small); }
.txrow .txday { color:var(--soft); font-size:var(--fs-meta); }
.txrow .txwho { display:flex; flex-direction:column; min-width:0; } .txrow .txwho b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .txrow .txwho .f { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.txrow .txamt { font-variant-numeric:tabular-nums; text-align:right; } .txrow .txamt.out { color:var(--soft); } .txrow .txamt.in { color:var(--ink); font-weight:600; }
.txrow .txcat { font-size:var(--fs-meta); padding:var(--sp-2) var(--sp-6); } .txrow .txby { color:var(--soft); font-size:var(--fs-meta); }
.catrules { display:flex; flex-direction:column; margin-bottom:var(--sp-8); }
.catrule { display:grid; grid-template-columns:minmax(8rem, 1fr) max-content minmax(8rem, 12rem) 6rem max-content; gap:var(--sp-8); align-items:center; padding:var(--sp-4) 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-small); }
.catrule .crwords { font-size:var(--fs-small); letter-spacing:0.02em; padding:var(--sp-2) var(--sp-6); } .catrule .crarrow, .catrule .crcount { color:var(--soft); font-size:var(--fs-meta); }

/* advanced/paperwork/6: Numbers table, under every chart of the dashboard kit */
.numtable { margin:var(--sp-4) 0 var(--sp-8); font-size:var(--fs-meta); color:var(--soft); }
.numtable summary { cursor:pointer; width:max-content; }
.numtable table { border-collapse:collapse; margin-top:var(--sp-4); font-variant-numeric:tabular-nums; color:var(--ink); }
.numtable th, .numtable td { text-align:left; padding:var(--sp-2) var(--sp-12) var(--sp-2) 0; border-bottom:1px solid var(--line-soft); font-weight:400; }
.numtable thead th { color:var(--soft); }

/* advanced/paperwork/9 and 10: Payment draft card, Question card */
.paycard { border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-12); display:flex; flex-direction:column; gap:var(--sp-8); margin-bottom:var(--sp-8); }
.paycard .payhead { display:flex; align-items:baseline; gap:var(--sp-8); flex-wrap:wrap; } .paycard .payamt { font-variant-numeric:tabular-nums; font-weight:600; }
.paycard .paymeta { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:var(--sp-4) var(--sp-8); align-items:center; font-size:var(--fs-small); }
.paycard .paymeta .f { grid-column:1 / -1; } .paycard .payiban { font-variant-numeric:tabular-nums; letter-spacing:0.03em; }
.paycard .paychecks { display:flex; flex-direction:column; gap:var(--sp-4); font-size:var(--fs-small); } .paycard .paycheck { display:flex; align-items:center; gap:var(--sp-8); }
.paycard .payfoot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); flex-wrap:wrap; font-size:var(--fs-small); padding-top:var(--sp-6); border-top:1px solid var(--line-soft); }
.paycard.st-paid, .paycard.st-handed { background:var(--sunken); }
.moneyasks { display:flex; flex-direction:column; gap:var(--sp-8); margin-bottom:var(--sp-8); }
.qcard { border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:var(--sp-10) var(--sp-12); display:flex; flex-direction:column; gap:var(--sp-6); }
.qcard .qtext { font-weight:600; } .qcard .qbtns { display:flex; gap:var(--sp-8); }


/* advanced/desktop/1: Menu bar menu, the desktop app's item in the menu bar (Capture, Ask, Pause sight, Quit), as the system draws it */
.mbmenu { display:inline-flex; flex-direction:column; min-width:200px; padding:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); font-size:var(--fs-body); }
.mbitem { display:flex; align-items:center; gap:var(--sp-16); padding:var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-24); border-radius:var(--r-sm); position:relative; color:var(--ink); }
.mbitem.on::before { content:'✓'; position:absolute; left:var(--sp-8); }
.mbkey { margin-left:auto; color:var(--soft); font-size:var(--fs-meta); }
.mbsep { display:block; height:1px; margin:var(--sp-4) var(--sp-8); background:var(--line); }
/* advanced/desktop/1: Floating window, a small window over every app with one Capture box; Escape closes it and keeps the draft */
.floatwin { width:min(560px, 92vw); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-xl); padding:var(--sp-16) var(--sp-20); }
.floathead { display:flex; align-items:baseline; gap:var(--sp-8); margin-bottom:var(--sp-4); }
.floatfoot { display:flex; justify-content:flex-end; gap:var(--sp-10); margin-top:var(--sp-10); }
.floatlayer { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:30; pointer-events:none; }
.floatlayer > .floatwin { pointer-events:auto; }
/* advanced/desktop/2: Gate line, one line per look at the screen, allowed or refused, with why */
.gatelines { display:flex; flex-direction:column; }
.gateline { display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:baseline; gap:var(--sp-4) var(--sp-12); padding:var(--sp-8) 0; border-bottom:1px solid var(--line); font-size:var(--fs-small); }
.gltime { color:var(--soft); font-size:var(--fs-meta); white-space:nowrap; }
.glwhat { color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.glapp { color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.glstate { font-weight:600; color:var(--ink); white-space:nowrap; }
.gateline.refused .glstate { color:var(--bad); text-decoration:underline; text-underline-offset:3px; }
.glwhy { grid-column:2 / -1; color:var(--soft); }
/* advanced/desktop/3: Recording bar, red only on the dot that says it records */
.recbar { display:flex; align-items:center; gap:var(--sp-12); padding:var(--sp-8) var(--sp-12); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.recdot { width:10px; height:10px; border-radius:var(--r-round); background:var(--red); flex:none; }
.recbar.paused .recdot { background:transparent; border:2px solid var(--red); box-sizing:border-box; }
.rectime { font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); min-width:3.2em; }
.recmarks { display:flex; gap:var(--sp-4); flex:1; min-width:0; }
.recmark { width:2px; height:14px; background:var(--line-strong); }
.recmissing { color:var(--soft); font-size:var(--fs-meta); }
/* advanced/desktop/4: Stop button, always in view while the assistant uses the computer; Step check, one checked step */
.stoppill { display:inline-flex; align-items:center; gap:var(--sp-12); padding:var(--sp-6) var(--sp-8) var(--sp-6) var(--sp-16); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-pill); }
.stopgoal { color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.stopbtn { border-color:var(--red); color:var(--red); }
.stepcheck { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-12); padding:var(--sp-8) 0; border-bottom:1px solid var(--line); font-size:var(--fs-small); }
.stepcheck > .status { grid-row:span 3; align-self:start; }
.scact { color:var(--ink); font-weight:600; }
.scexp, .scsaw, .scwhy { color:var(--soft); }

/* Sync badge (advanced/everywhere/1): one quiet line at the foot of the sidebar; the word carries the state, never colour alone */
.syncbadge { font-size:var(--fs-meta); color:var(--faint); padding:var(--sp-6) var(--sp-8) 0; white-space:nowrap; }
.syncbadge.waiting { color:var(--soft); }
.syncbadge.offline { color:var(--soft); font-style:italic; }
/* advanced/everywhere/2: the Conflict card, on a note and in Settings › Cloud */
.conflictcard { display:flex; flex-direction:column; gap:var(--sp-8); margin:0 0 var(--sp-10); padding:var(--sp-10) var(--sp-12); border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); }
.conflictcard .cfhead { font-weight:600; }
.conflictcard .cfhead .f { font-weight:400; color:var(--soft); font-size:var(--fs-meta); margin-left:var(--sp-6); }
.conflictcard .cfmerged { color:var(--soft); font-size:var(--fs-meta); }
.conflictcard .cffield { color:var(--soft); font-size:var(--fs-meta); font-weight:600; }
.conflictcard .cfsides { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-8); }
.conflictcard .cfside { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--r-sm); overflow-wrap:anywhere; white-space:pre-wrap; }
.conflictcard .cfside.mine { border-color:var(--ink); }
.conflictcard .cflab { color:var(--soft); font-size:var(--fs-meta); font-weight:600; white-space:normal; }
.conflictcard .cfbtns { display:flex; flex-wrap:wrap; gap:var(--sp-6); }
.conflictslot:empty { display:none; }
/* advanced/everywhere/11: a new computer's first sync */
.restoreset { display:flex; flex-direction:column; gap:var(--sp-8); margin:0 0 var(--sp-12); }
.restoreask { display:flex; flex-direction:column; gap:var(--sp-6); padding-top:var(--sp-8); border-top:1px solid var(--line); }
/* advanced/everywhere/3: the Device row, in Settings › Devices */
.devicesset { display:flex; flex-direction:column; gap:var(--sp-6); }
.devicerow { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:var(--sp-12); padding:var(--sp-6) 0; border-bottom:1px solid var(--line); }
.devicerow .dvname { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-6); min-width:0; }
.devicerow .dvname .f { color:var(--soft); font-size:var(--fs-meta); }
.devicerow .dvstate { color:var(--soft); font-size:var(--fs-meta); }
.devicerow .dvstate.active { color:var(--ink); font-weight:600; }
.devicerow .dvseen { color:var(--faint); font-size:var(--fs-meta); white-space:nowrap; }
@media (max-width: 700px) { .devicerow { grid-template-columns:minmax(0,1fr) auto; } .devicerow .dvseen { grid-column:1; } }
@media (max-width: 700px) { .conflictcard .cfsides { grid-template-columns:minmax(0,1fr); } }

/* Tom's demo stage (advanced/desktop/1 to 4, the demo copy only): his desktop drawn small, a menu bar strip with My app ▾,
   and a pretend browser whose page is the planner's stage; a look or a session your assistant runs there shows as it happens */
.dkstage { margin:var(--sp-12) 0 var(--sp-20); }
.stagebar { position:relative; display:flex; align-items:center; gap:var(--sp-8); height:28px; padding:0 var(--sp-12); background:var(--sunken); border:1px solid var(--line); border-bottom:0; border-radius:var(--r-md) var(--r-md) 0 0; font-size:var(--fs-meta); }
.stagebar .sp, .stageurl .sp { flex:1; }
.stagemy { font:inherit; background:none; border:0; padding:var(--sp-2) var(--sp-6); border-radius:var(--r-sm); cursor:pointer; color:var(--ink); }
.stagemy[aria-expanded="true"], .stagemy:hover { background:var(--hover); }
.stagemenu { position:absolute; right:var(--sp-8); top:28px; z-index:5; display:flex; flex-direction:column; min-width:190px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 6px 20px var(--overlay); padding:var(--sp-4); }
.stagemenu button { font:inherit; text-align:left; background:none; border:0; padding:var(--sp-6) var(--sp-8); border-radius:var(--r-sm); cursor:pointer; display:flex; justify-content:space-between; gap:var(--sp-12); color:var(--ink); }
.stagemenu button:hover { background:var(--hover); }
.stagebrowser { border:1px solid var(--line); border-radius:0 0 var(--r-md) var(--r-md); background:var(--surface); overflow:hidden; }
.stageurl { display:flex; gap:var(--sp-8); padding:var(--sp-6) var(--sp-12); border-bottom:1px solid var(--line-soft); background:var(--bg); }
.stagepage { position:relative; aspect-ratio:1280 / 740; }
.stagetext { position:absolute; left:0; right:0; text-align:center; color:var(--soft); }
.stagetext b { display:block; font-size:var(--fs-heading); color:var(--ink); margin-bottom:var(--sp-4); }
.stagepart { position:absolute; transform:translate(-50%, -50%); font:inherit; border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--r-md); cursor:pointer; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 var(--sp-6); } /* desktop/5: a long label stays inside its part on a narrow stage */
.stagepage { container-type:inline-size; }
@container (max-width: 640px) { .stagepart { font-size:var(--fs-meta); } }
.stagepart.k-link { text-decoration:underline; border-color:transparent; background:none; }
.stagepart.k-field { text-align:left; padding:0 var(--sp-10); background:var(--bg); }
.stagepart.k-field.on { border-color:var(--ink); }
.stagepart.k-day.on { background:var(--ink); color:var(--surface); }
.stagepart.k-button { background:var(--sunken); font-weight:600; }
/* Code field (advanced/everywhere/5): the six digits of the sign-in email, one box each; its focus and error are the
   text field's own (input.is-focus, input.is-error) */
.codefield { display:flex; gap:var(--sp-8); margin:var(--sp-12) 0 var(--sp-4); }
.codebox { width:44px; height:52px; padding:0; text-align:center; font-size:var(--fs-title); font-weight:600; font-variant-numeric:tabular-nums; }