/* Studio as one screen: the main panel, a narrow column of entries, two reactive panels. */
body:has(.hub-shell) #section-studio.section.active { display:flex !important; flex-direction:column !important; gap:0 !important; padding:16px var(--as-page-pad-x, 40px) 0 !important; overflow:visible !important; }
#section-studio > * { flex:0 0 auto; }

/* Write and Board, just above the frame. Board's two views sit beside them. */
.ob-tabsrow { display:flex; align-items:baseline; gap:22px; padding:0 0 10px 4px; }
.ob-tabs, .ob-subtabs { display:flex; align-items:baseline; gap:24px; }
.ob-subtabs { gap:18px; padding-left:22px; border-left:1px solid var(--border); }
.ob-subtabs[hidden] { display:none; }
.ob-tab, .ob-sub-tab { background:none; border:0; border-bottom:1.5px solid transparent; border-radius:0; padding:2px 0 4px; font-family:var(--serif); color:var(--muted); cursor:pointer; transition:color .24s ease, border-color .24s ease; }
.ob-tab { font-size:21px; }
.ob-sub-tab { font-size:17px; }
.ob-tab:hover, .ob-sub-tab:hover { color:var(--ink); }
.ob-tab.on, .ob-sub-tab.on { color:var(--ink); border-color:var(--ink); }

/* Buttons: bordered, title case. The filled one rides the shared action list through button.primary. */
.ob-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border:1px solid var(--border); border-radius:0; background:transparent; color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; transition:border-color .2s ease, background .2s ease; }
.ob-btn:hover { border-color:color-mix(in srgb, var(--ink) 45%, var(--border)); }
.ob-btn.ob-sm { padding:6px 11px; font-size:12.5px; }

/* The frame */
.ob-ws { --qw:300px; --lw:250px; --rw:320px; --rth:42%; display:grid; grid-template-columns:var(--qw) 7px minmax(0,1fr) 7px var(--lw) 7px var(--rw); height:calc(100vh - 200px); min-height:480px; border:1px solid var(--border); background:var(--paper); }
.ob-ws[data-view="write"] :is(.ob-only-graph, .ob-only-canvas),
.ob-ws[data-view="board"] .ob-only-write,
.ob-ws[data-board="graph"] .ob-only-canvas,
.ob-ws[data-board="canvas"] .ob-only-graph { display:none !important; }
.ob-pane { min-height:0; min-width:0; display:flex; flex-direction:column; }
.ob-ws[data-view="board"] { grid-template-columns:minmax(0,1fr) 7px var(--lw) 7px var(--rw); }
.ob-center { min-width:0; min-height:0; display:flex; flex-direction:column; }
.ob-right { display:grid; grid-template-rows:var(--rth) 7px minmax(0,1fr); min-height:0; min-width:0; }
.ob-ws .ob-pane, .ob-ws .ob-center { animation:asPageIn 360ms cubic-bezier(.22,.8,.24,1) both; }
@media (prefers-reduced-motion: reduce) { .ob-ws .ob-pane, .ob-ws .ob-center { animation:none; } }

/* Dividers: a hairline that turns lavender under the pointer. The narrow column keeps its width. */
.ob-gut { position:relative; cursor:col-resize; touch-action:none; z-index:3; }
.ob-gut::before { content:''; position:absolute; top:0; bottom:0; left:3px; width:1px; background:var(--border); transition:background .15s ease, width .15s ease, left .15s ease; }
.ob-gut:not(.ob-gut-fixed):hover::before, .ob-gut.drag::before { background:var(--purple); width:3px; left:2px; }
.ob-gut-fixed { cursor:default; }
.ob-gut-row { cursor:row-resize; }
.ob-gut-row::before { top:3px; bottom:auto; left:0; right:0; width:auto; height:1px; }
.ob-gut-row:hover::before, .ob-gut-row.drag::before { width:auto; left:0; top:2px; height:3px; }
body.ob-resizing, body.ob-resizing * { cursor:col-resize !important; user-select:none !important; }
body.ob-resizing.row, body.ob-resizing.row * { cursor:row-resize !important; }

/* The main panel's strip: this view's controls on the left, the analyses on the right */
.ob-strip { display:flex; align-items:center; gap:14px; padding:8px 12px 8px 16px; border-bottom:1px solid var(--border); flex-shrink:0; min-height:48px; box-sizing:border-box; }
.ob-stripl { display:flex; align-items:center; gap:6px; }
.ob-striplbl { font-family:var(--serif); font-size:16px; color:var(--ink-soft); margin-right:4px; white-space:nowrap; }
.ob-field { box-sizing:border-box; padding:7px 10px; border:1px solid var(--border); border-radius:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:13px; outline:none; }
.ob-field:focus { border-color:color-mix(in srgb, var(--ink) 40%, var(--border)); }
.ob-sel-sm { padding:5px 8px; font-size:12.5px; }
.ob-analyses { margin-left:auto; display:flex; gap:6px; }
.ob-an { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--border); border-radius:0; background:transparent; color:var(--ink-soft); font-family:var(--sans); font-size:12.5px; font-weight:500; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.ob-an .bi { font-size:13.5px; color:var(--purple); }
.ob-an:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 40%, var(--border)); }
.ob-an.on { color:var(--ink); border-color:var(--purple); background:color-mix(in srgb, var(--purple) 6%, transparent); }
.ob-tool { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--border); border-radius:0; background:none; font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; }
.ob-tool .bi { font-size:13.5px; }
.ob-tool:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 40%, var(--border)); }
.ob-tool.on { color:var(--ink); border-color:var(--purple); background:color-mix(in srgb, var(--purple) 7%, transparent); }

/* Panel headings */
.ob-phrow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 14px 10px 18px; min-height:28px; }
.ob-ph { font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:-0.01em; color:var(--ink); margin:0; }
.ob-scroll { flex:1; min-height:0; overflow-y:auto; padding:0 12px 14px; }
.ob-search { padding:0 14px 10px; }
.ob-search input { width:100%; box-sizing:border-box; padding:8px 11px; border:1px solid var(--border); border-radius:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:13px; outline:none; }
.ob-search input:focus { border-color:color-mix(in srgb, var(--ink) 40%, var(--border)); }

/* Narrow column: entries by title, in collapsible groups */
.ob-folder > .ob-fold { display:flex; align-items:center; gap:9px; width:100%; padding:7px 6px; background:none; border:0; border-radius:0; text-align:left; font-family:var(--serif); font-size:17px; font-weight:500; color:var(--ink); cursor:pointer; }
.ob-fold .car { font-size:9px; color:var(--muted); transition:transform .22s cubic-bezier(.4,0,.2,1); }
.ob-folder.open .car { transform:rotate(90deg); }
.ob-folder ul { list-style:none; margin:0 0 6px; padding:0; display:none; }
.ob-folder.open ul { display:block; }
.ob-item { display:flex; flex-direction:column; padding:5px 8px 6px 24px; border-left:2px solid transparent; font-family:var(--serif); cursor:pointer; transition:background .15s ease; }
.ob-item .t { font-size:15.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-item .d { font-size:13.5px; font-style:italic; color:var(--muted); }
.ob-item:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ob-item.on { border-left-color:var(--purple); background:color-mix(in srgb, var(--purple) 7%, transparent); }
.ob-item.on .t { color:var(--ink); }

/* Empty states: centered icon, serif title, one line */
.ob-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:28px 16px; color:var(--muted); }
.ob-empty .bi { font-size:26px; opacity:.6; }
.ob-empty h4 { font-family:var(--serif); font-size:19px; font-weight:500; color:var(--ink); margin:4px 0 0; }
.ob-empty p { font-family:var(--serif); font-size:15px; margin:0; max-width:240px; line-height:1.45; }

/* Write: the page */
.ob-write { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
.ob-page { max-width:700px; margin:0 auto; padding:38px 44px 120px; }
/* the shell sizes every h1 large; the entry's title keeps to the page's measure */
#section-studio .ob-title { font-family:var(--serif); font-size:32px !important; font-weight:500; letter-spacing:-0.015em !important; line-height:1.15; color:var(--ink); margin:0; outline:none; }
.ob-title:empty::before { content:attr(data-ph); color:var(--muted); }
.ob-props { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:10px 0 30px; padding-bottom:16px; border-bottom:1px solid var(--border-light); font-family:var(--serif); font-size:16px; color:var(--muted); }
.ob-props .when { font-style:italic; }
.ob-props .grp { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ob-props .lbl { color:var(--ink-soft); }
.ob-body { font-family:var(--serif); font-size:19px; line-height:1.75; color:var(--ink); outline:none; min-height:260px; }
.ob-body:empty::before { content:'Start writing. Type ## and a space for a heading.'; color:var(--muted); font-style:italic; }
.ob-body h2 { font-family:var(--serif); font-size:26px; font-weight:500; letter-spacing:-0.01em; line-height:1.3; margin:32px 0 6px; }
.ob-body h3 { font-family:var(--serif); font-size:21px; font-weight:500; margin:22px 0 4px; }
.ob-body > :first-child { margin-top:0; }
.ob-body p { margin:0 0 16px; }
.ob-body h2.flash, .ob-body h3.flash { background:color-mix(in srgb, var(--purple) 10%, transparent); transition:background 1.2s ease; }
/* A word that keeps coming back across entries: one soft wash, never the word being typed */
mark.rw { background:color-mix(in srgb, var(--gold) 15%, transparent); color:inherit; padding:0 1px; border-bottom:1px solid color-mix(in srgb, var(--gold) 55%, transparent); cursor:pointer; transition:background .2s ease; }
mark.rw:hover, mark.rw.on { background:color-mix(in srgb, var(--gold) 30%, transparent); }

/* Chips: feeling and topics */
.ob-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--border); border-radius:0; background:transparent; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; }
.ob-chip:hover { border-color:color-mix(in srgb, var(--ink) 40%, var(--border)); color:var(--ink); }
.ob-chip.on { border-color:color-mix(in srgb, var(--purple) 60%, var(--border)); background:color-mix(in srgb, var(--purple) 8%, transparent); color:var(--ink); }
.ob-chip .x { font-size:10px; opacity:.5; }
.ob-chip:hover .x { opacity:.9; }
select.ob-chip { appearance:none; -webkit-appearance:none; padding:4px 30px 4px 10px; line-height:1.4; background-image:none; outline:none; }
.ob-chipsel { position:relative; display:inline-flex; }
.ob-chipsel::after { content:'\F282'; font-family:'bootstrap-icons'; font-size:9px; position:absolute; right:8px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); }

/* Outline */
.ob-outline { list-style:none; margin:0; padding:0; }
.ob-outline li { display:flex; align-items:center; gap:4px; }
.ob-outline li.h3 { padding-left:18px; }
.ob-outline .go { flex:1; min-width:0; display:block; padding:6px 8px; background:none; border:0; border-radius:0; text-align:left; font-family:var(--serif); font-size:16px; color:var(--ink-soft); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-outline .go:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ob-outline .mk { flex-shrink:0; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; background:none; border:1px solid transparent; border-radius:0; color:var(--muted); cursor:pointer; opacity:.45; transition:opacity .2s ease, border-color .2s ease, color .2s ease; }
.ob-outline li:hover .mk, .ob-outline .mk:focus-visible { opacity:1; }
.ob-outline .mk:hover { color:var(--purple); border-color:var(--border); }
.ob-outline .mk.done { color:var(--purple); opacity:1; cursor:default; }

/* Previews and details in the reactive panels */
.ob-sel { padding:0 6px; }
.ob-sel h4 { font-family:var(--serif); font-size:23px; font-weight:500; line-height:1.2; color:var(--ink); margin:0; }
.ob-sel .when { font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted); margin:4px 0 10px; }
.ob-sel .tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.ob-sel .tags .ob-chip { cursor:default; }
.ob-selbody { font-family:var(--serif); font-size:16px; line-height:1.6; color:var(--ink); }
.ob-selbody p { margin:0 0 8px; }
.ob-selbody h2, .ob-selbody h3 { font-family:var(--serif); font-size:17.5px; font-weight:500; margin:10px 0 2px; }
.ob-acts { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px; }
.ob-note { font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted); margin:2px 6px 10px; line-height:1.45; }
.ob-group { margin:0 0 16px; }
.ob-group h5 { font-family:var(--serif); font-size:16.5px; font-weight:500; color:var(--ink); margin:2px 6px 8px; }
.ob-stack { display:flex; flex-direction:column; gap:8px; padding:0 2px; }

/* Paper cards: hairline edge, faint fill, a soft lift on hover */
.ob-card { border:1px solid var(--border); background:color-mix(in srgb, var(--ink) 1.6%, var(--bg)); padding:10px 13px 11px; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ob-card:hover { transform:translateY(-1px); box-shadow:0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent); border-color:color-mix(in srgb, var(--ink) 22%, var(--border)); }
.ob-card h4 { font-family:var(--serif); font-size:16px; font-weight:500; line-height:1.25; color:var(--ink); margin:0; }
.ob-card .w { font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--muted); margin-top:1px; }
.ob-card p { font-family:var(--serif); font-size:14.5px; line-height:1.42; color:var(--ink-soft); margin:5px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ob-card[draggable="true"] { cursor:grab; }

/* New recurring topic, from a highlighted word */
.ob-flow { padding:0 6px; }
.ob-flow p { font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--ink); margin:0 0 12px; }
.ob-flow .ob-lbl { display:block; font-family:var(--serif); font-size:15.5px; color:var(--ink); margin:0 0 6px; }
.ob-flow .ob-field { width:100%; }
.ob-checks { list-style:none; margin:12px 0 0; padding:0; }
.ob-checks li { display:flex; gap:10px; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--border-light); font-family:var(--serif); font-size:15.5px; color:var(--ink); }
.ob-checks input { accent-color:var(--action); margin-top:5px; }
.ob-checks small { display:block; font-style:italic; font-size:13.5px; color:var(--muted); }

/* Analysis results */
.ob-result { padding:0 6px; font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--ink); }
.ob-result p { margin:0 0 10px; }
.ob-result ul { margin:0 0 10px; padding-left:18px; }
.ob-result li { margin:0 0 4px; }

/* Board, Graph */
.ob-graph { flex:1; min-height:0; position:relative; }
.ob-graph svg { width:100%; height:100%; display:block; user-select:none; touch-action:none; cursor:grab; }
.ob-graph svg.panning { cursor:grabbing; }
.ob-graph .edge { stroke:color-mix(in srgb, var(--ink) 20%, transparent); stroke-width:1.2; }
.ob-graph .edge.hot { stroke:var(--purple); stroke-width:1.8; }
.ob-graph .hub rect { fill:var(--bg); stroke:color-mix(in srgb, var(--purple) 55%, transparent); stroke-width:1.2; }
.ob-graph .hub text { font-family:var(--serif); font-size:16px; font-weight:500; fill:var(--ink); }
.ob-graph .node circle { fill:var(--bg); stroke:color-mix(in srgb, var(--ink) 55%, transparent); stroke-width:1.4; }
.ob-graph .node text { font-family:var(--serif); font-size:14.5px; fill:var(--ink-soft); paint-order:stroke; stroke:var(--paper); stroke-width:4px; }
.ob-graph .node, .ob-graph .hub { cursor:pointer; transition:opacity .25s ease; }
.ob-graph .node.sel circle { fill:var(--purple); stroke:var(--purple); }
.ob-graph .node.sel text { fill:var(--ink); }
.ob-graph .hub.sel rect { fill:color-mix(in srgb, var(--purple) 12%, var(--bg)); stroke:var(--purple); }
.ob-graph .dim { opacity:.2; }

/* Board, Canvas */
.ob-canvaswrap { flex:1; min-height:0; display:flex; }
.ob-board { flex:1; min-height:0; overflow:auto; background-image:radial-gradient(color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.2px); background-size:22px 22px; }
.ob-board.drop { background-color:color-mix(in srgb, var(--purple) 4%, transparent); }
.ob-board:is([data-tool="note"], [data-tool="draw"]) .ob-canvas { cursor:crosshair; }
.ob-board[data-tool="link"] .ob-cv { cursor:alias; }
.ob-canvas { position:relative; width:1600px; height:1000px; }
.ob-ink { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; pointer-events:none; }
.ob-ink .lnk { stroke:color-mix(in srgb, var(--purple) 60%, transparent); stroke-width:1.6; fill:none; }
.ob-ink .lnk.sel { stroke:var(--purple); stroke-width:2.6; }
.ob-ink .hit { stroke:transparent; stroke-width:14; fill:none; pointer-events:stroke; cursor:pointer; }
.ob-ink .lbl { font-family:var(--serif); font-style:italic; font-size:14.5px; fill:var(--ink-soft); paint-order:stroke; stroke:var(--paper); stroke-width:5px; }
.ob-ink .stroke { stroke:color-mix(in srgb, var(--ink) 65%, transparent); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ob-ink .stroke.sel { stroke:var(--purple); }
.ob-cv { position:absolute; box-sizing:border-box; user-select:none; touch-action:none; z-index:2; cursor:grab; }
.ob-cv.ob-card { width:220px; }
.ob-cv.drag { cursor:grabbing; box-shadow:0 14px 30px color-mix(in srgb, var(--ink) 14%, transparent); z-index:5; transition:none; }
.ob-cv.sel, .ob-cv.from { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple), 0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent); }
.ob-sticky { width:184px; min-height:118px; padding:12px 14px; background:var(--gold-light); border:1px solid color-mix(in srgb, var(--gold) 30%, transparent); box-shadow:0 4px 12px color-mix(in srgb, var(--ink) 7%, transparent); font-family:var(--serif); font-size:16px; line-height:1.4; color:var(--ink); }
.ob-sticky[data-c="sage"] { background:var(--sage-w); border-color:color-mix(in srgb, var(--sage) 35%, transparent); }
.ob-sticky[data-c="ocean"] { background:var(--ocean-w); border-color:color-mix(in srgb, var(--ocean) 35%, transparent); }
.ob-sticky .tx { outline:none; min-height:88px; cursor:text; user-select:text; }
.ob-sticky .tx:empty::before { content:'Write a note'; color:var(--muted); font-style:italic; }
.ob-swatches { display:flex; gap:8px; margin:4px 0 0; }
.ob-swatch { width:30px; height:30px; border:1px solid var(--border); border-radius:0; cursor:pointer; padding:0; }
.ob-swatch.on { outline:2px solid var(--purple); outline-offset:2px; }

/* ── The guiding prompt: a lavender rule above the page, a caret to change it ── */
.ob-promptwrap { margin:-12px 0 26px; }
.ob-prompt { display:flex; align-items:baseline; gap:12px; width:100%; padding:11px 16px 11px 15px; border:0; border-left:2px solid var(--purple); border-radius:0; background:color-mix(in srgb, var(--purple) 4.5%, transparent); text-align:left; cursor:pointer; font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.4; color:var(--ink); }
.ob-prompt .car { align-self:center; font-size:9px; color:var(--purple); flex-shrink:0; font-style:normal; }
.ob-prompt.add { color:var(--muted); background:none; border-left-color:color-mix(in srgb, var(--purple) 35%, transparent); padding:6px 12px; font-size:16px; }
.ob-prompt:hover { background:color-mix(in srgb, var(--purple) 8%, transparent); }

/* ── Tool panels: readings, conversations, lists ── */
.ob-tool-p { padding:0 6px; font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--ink); }
.ob-tool-p p { margin:0 0 10px; }
.ob-tool-p .meta { font-style:italic; font-size:14.5px; color:var(--muted); }
.ob-obs { border-left:2px solid color-mix(in srgb, var(--purple) 45%, transparent); padding:2px 0 2px 12px; margin:0 0 14px; }
.ob-obs p { margin:0 0 6px; }
.ob-doors { display:flex; gap:6px; flex-wrap:wrap; }
.ob-quote { border-left:2px solid var(--purple); padding:6px 12px; margin:0 0 12px; font-style:italic; color:var(--ink-soft); }
.ob-turn { margin:0 0 10px; }
.ob-turn.ai { color:var(--ink); }
.ob-turn.me { color:var(--ink-soft); padding-left:14px; border-left:1px solid var(--border); }
.ob-compose { display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
.ob-compose textarea, .ob-tool-p textarea { width:100%; box-sizing:border-box; min-height:64px; resize:vertical; padding:9px 11px; border:1px solid var(--border); border-radius:0; background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:16px; line-height:1.45; outline:none; }
.ob-compose textarea:focus, .ob-tool-p textarea:focus { border-color:color-mix(in srgb, var(--ink) 40%, var(--border)); }
.ob-disc { border-bottom:1px solid var(--border-light); }
.ob-disc > button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 0; background:none; border:0; text-align:left; font-family:var(--serif); font-size:16.5px; color:var(--ink); cursor:pointer; }
.ob-disc > button .car { font-size:9px; color:var(--muted); transition:transform .22s cubic-bezier(.4,0,.2,1); }
.ob-disc.open > button .car { transform:rotate(90deg); }
.ob-disc > div { display:none; padding:0 0 12px; }
.ob-disc.open > div { display:block; }
.ob-qtabs { display:flex; gap:16px; margin:0 0 10px; }
.ob-qtabs button { background:none; border:0; border-bottom:1.5px solid transparent; padding:0 0 3px; font-family:var(--serif); font-size:16.5px; color:var(--muted); cursor:pointer; }
.ob-qtabs button.on { color:var(--ink); border-color:var(--ink); }
.ob-q { padding:9px 0; border-bottom:1px solid var(--border-light); }
.ob-q p { margin:0 0 6px; }
.ob-belief { border:1px solid var(--border); background:color-mix(in srgb, var(--ink) 1.4%, var(--bg)); padding:10px 12px; margin:0 0 8px; }
.ob-belief p { margin:0 0 4px; }
.ob-modes { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.ob-shelf h5 { font-family:var(--serif); font-size:16.5px; font-weight:500; margin:4px 0 6px; color:var(--ink); }
.ob-shelf button { display:block; width:100%; text-align:left; padding:7px 0; background:none; border:0; border-bottom:1px solid var(--border-light); font-family:var(--serif); font-size:15.5px; color:var(--ink-soft); cursor:pointer; }
.ob-shelf button:hover { color:var(--ink); }
.ob-shelf button small { display:block; font-style:italic; font-size:13.5px; color:var(--muted); }

/* ── Foot of the entries column: Google Docs and Files ── */
.ob-more { border-top:1px solid var(--border); padding:4px 12px 8px; flex-shrink:0; max-height:40%; overflow-y:auto; }
.ob-more .ob-folder > .ob-fold { font-size:16px; }
.ob-more .ob-item .t { font-size:15px; }
#obDictate.rec { border-color:var(--red); color:var(--red); }

/* ── The guiding prompt, opened into a writing space ── */
.ob-prompt-open { border-left:2px solid var(--purple); background:color-mix(in srgb, var(--purple) 4.5%, transparent); padding:10px 16px 14px 15px; }
.ob-prompt-head { display:flex; align-items:center; gap:10px; padding:0 0 6px; background:none; border:0; font-family:var(--serif); font-size:15px; color:var(--purple); cursor:pointer; }
.ob-prompt-head .car { font-size:9px; transform:rotate(90deg); }
#obPromptIn { width:100%; box-sizing:border-box; min-height:30px; resize:none; overflow:hidden; padding:2px 0 8px; border:0; border-bottom:1px solid color-mix(in srgb, var(--purple) 25%, transparent); background:none; outline:none; font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.45; color:var(--ink); }
.ob-qpick-l { font-family:var(--serif); font-size:15px; color:var(--muted); margin:12px 0 4px; }
.ob-qpick { display:block; width:100%; text-align:left; padding:6px 10px; margin:0 0 2px; background:none; border:0; border-left:2px solid transparent; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-soft); cursor:pointer; }
.ob-qpick:hover { color:var(--ink); background:color-mix(in srgb, var(--purple) 6%, transparent); }
.ob-qpick.on { color:var(--ink); border-left-color:var(--purple); }
.ob-prompt-open .ob-doors { margin-top:12px; }
.ob-qchips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.ob-qchips .ob-chip { font-family:var(--serif); font-style:italic; font-size:14px; }

/* ── The chat, docked at the bottom center ── */
.ob-dock { position:fixed; left:50%; bottom:10px; transform:translateX(-50%); width:min(780px, calc(100vw - 32px)); z-index:350; display:flex; flex-direction:column; align-items:stretch; pointer-events:none; }
.ob-dock > * { pointer-events:auto; }
.ob-barrow { display:flex; align-items:center; gap:10px; }
.ob-pill { flex:1; display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 7px 6px 20px; box-sizing:border-box; border:1px solid var(--border); background:var(--bg); box-shadow:0 10px 30px color-mix(in srgb, var(--ink) 10%, transparent); cursor:text; transition:border-color .2s ease, box-shadow .2s ease; }
.ob-pill:hover { border-color:color-mix(in srgb, var(--purple) 40%, var(--border)); }
.ob-pill-t { flex:1; font-family:var(--serif); font-style:italic; font-size:17px; color:var(--muted); }
.ob-pill-chip, .ob-recipe { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--border); border-radius:0; background:transparent; font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; white-space:nowrap; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.ob-pill-chip .bi, .ob-recipe .bi { color:var(--purple); font-size:13px; }
.ob-pill-chip:hover, .ob-recipe:hover { color:var(--ink); border-color:color-mix(in srgb, var(--purple) 45%, var(--border)); background:color-mix(in srgb, var(--purple) 5%, transparent); }
.ob-recipe.all { margin-left:auto; border-color:transparent; color:var(--muted); }
.ob-disclaim { margin:6px 0 0; text-align:center; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--muted); }

/* The circle, and the menu that rises out of it */
.ob-orb-wrap { position:relative; flex-shrink:0; align-self:flex-end; }
.ob-orb { width:52px; height:52px; border-radius:50%; border:1px solid color-mix(in srgb, var(--purple) 40%, var(--border)); background:var(--bg); color:var(--purple); display:flex; align-items:center; justify-content:center; gap:2px; cursor:pointer; box-shadow:0 10px 30px color-mix(in srgb, var(--ink) 10%, transparent); transition:background .25s ease, color .25s ease, transform .25s ease; }
.ob-orb .bi-stars { font-size:18px; }
.ob-orb .up { font-size:10px; transition:transform .3s cubic-bezier(.22,.8,.24,1); }
.ob-orb:hover { transform:translateY(-1px); }
.ob-dock.orb-open .ob-orb { background:var(--purple); color:var(--bg); }
.ob-dock.orb-open .ob-orb .up { transform:rotate(180deg); }
.ob-orb-menu { position:absolute; left:0; bottom:62px; width:250px; max-height:min(560px, calc(100vh - 140px)); overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:2px; background:var(--bg); border:1px solid var(--border); box-shadow:0 18px 50px color-mix(in srgb, var(--ink) 14%, transparent); transform-origin:26px calc(100% + 36px); transform:scale(.4); opacity:0; pointer-events:none; transition:transform .32s cubic-bezier(.22,.8,.24,1), opacity .2s ease; }
.ob-dock.orb-open .ob-orb-menu { transform:none; opacity:1; pointer-events:auto; }
.ob-orb-item { display:flex; align-items:center; gap:11px; padding:7px 9px; border:0; border-radius:0; background:none; text-align:left; font-family:var(--serif); font-size:16px; color:var(--ink-soft); cursor:pointer; opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .3s cubic-bezier(.22,.8,.24,1), background .15s ease, color .15s ease; transition-delay:calc(var(--i) * 22ms); }
.ob-dock.orb-open .ob-orb-item { opacity:1; transform:none; }
.ob-orb-item .bi { width:28px; height:28px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:var(--purple); background:color-mix(in srgb, var(--purple) 8%, transparent); border:1px solid color-mix(in srgb, var(--purple) 18%, transparent); }
.ob-orb-item:hover { color:var(--ink); background:color-mix(in srgb, var(--purple) 6%, transparent); }

/* The open chat: the outer box holds results, the inner box the prompts and the input */
.ob-chat { display:none; flex-direction:column; height:min(620px, calc(100vh - 150px)); margin:0 0 10px 62px; border:1px solid var(--border); background:var(--bg); box-shadow:0 24px 70px color-mix(in srgb, var(--ink) 16%, transparent); animation:obChatIn .34s cubic-bezier(.22,.8,.24,1) both; }
@keyframes obChatIn { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.ob-dock.open .ob-chat { display:flex; }
.ob-dock.open .ob-pill { display:none; }
.ob-dock.open .ob-barrow { position:absolute; left:0; bottom:28px; }
.ob-chat-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 12px 22px; border-bottom:1px solid var(--border-light); }
.ob-chat-head .ob-ph { font-size:20px; }
.ob-thread { flex:1; min-height:0; overflow-y:auto; padding:18px 22px 10px; display:flex; flex-direction:column; gap:14px; }
.ob-msg p { margin:0; font-family:var(--serif); font-size:17px; line-height:1.55; color:var(--ink); }
.ob-msg.me { align-self:flex-end; max-width:78%; padding:9px 14px; border:1px solid var(--border); background:color-mix(in srgb, var(--ink) 3%, var(--bg)); }
.ob-msg.ai { max-width:88%; }
.ob-msg .meta { font-style:italic; font-size:14.5px; color:var(--muted); }
.ob-msg.result { padding:14px 16px 16px; border:1px solid color-mix(in srgb, var(--purple) 22%, var(--border)); border-left:2px solid var(--purple); background:color-mix(in srgb, var(--purple) 2.5%, var(--bg)); }
.ob-msg.result > h4 { display:flex; align-items:center; gap:9px; margin:0 0 10px; font-family:var(--serif); font-size:19px; font-weight:500; color:var(--ink); }
.ob-msg.result > h4 .bi { color:var(--purple); font-size:15px; }
.ob-msg.result .ob-tool-p, .ob-msg.result .ob-result { padding:0; }
.ob-inner { margin:0 12px 12px; padding:10px 10px 8px; border:1px solid var(--border); background:color-mix(in srgb, var(--ink) 1.5%, var(--bg)); }
.ob-recipes { display:flex; flex-wrap:wrap; gap:6px; padding:0 0 10px; }
.ob-inputrow { display:flex; align-items:flex-end; gap:8px; }
#obAsk { flex:1; min-height:38px; max-height:140px; resize:none; box-sizing:border-box; padding:9px 4px; border:0; background:none; outline:none; font-family:var(--serif); font-size:17px; line-height:1.35; color:var(--ink); }
#obAsk::placeholder { color:var(--muted); font-style:italic; }
.ob-mode { padding:7px 8px; border:1px solid var(--border); border-radius:0; background:var(--bg); font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); outline:none; cursor:pointer; }
.ob-send { width:38px; height:38px; flex-shrink:0; border:1px solid var(--action); border-radius:0; background:var(--action); color:var(--action-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
html[data-theme="dark"] .ob-send { background:var(--ink); border-color:var(--ink); color:var(--bg); }
@media (prefers-reduced-motion: reduce) { .ob-chat, .ob-orb-menu, .ob-orb-item { animation:none; transition:none; } }

/* ── Charts: one hue, thin marks, quiet axes, a label on hover ── */
.ob-bars { margin:6px 0 4px; }
.ob-bar { display:grid; grid-template-columns:104px 1fr 28px; align-items:center; gap:10px; margin:0 0 6px; font-family:var(--serif); font-size:15px; color:var(--ink-soft); }
.ob-bar .track { height:10px; background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ob-bar .track i { display:block; height:100%; background:var(--purple); }
.ob-bar b { font-weight:500; color:var(--ink); text-align:right; font-family:var(--sans); font-size:12.5px; }
.ob-bar:hover .track i { background:color-mix(in srgb, var(--purple) 80%, var(--ink)); }
.ob-chart { width:100%; height:auto; display:block; margin:6px 0 8px; overflow:visible; }
.ob-chart .gr { stroke:color-mix(in srgb, var(--ink) 12%, transparent); stroke-dasharray:3 4; }
.ob-chart .ax { font-family:var(--serif); font-size:13px; fill:var(--muted); }
.ob-chart .ln { fill:none; stroke:var(--purple); stroke-width:2; stroke-linejoin:round; }
.ob-chart .dot { fill:var(--purple); stroke:var(--bg); stroke-width:2; }
.ob-chart .hit { fill:transparent; cursor:pointer; }
.ob-chart .pt:hover .dot { r:7; }
.ob-chart .lb { font-family:var(--serif); font-size:13.5px; fill:var(--ink); }
/* the shell gives every field full width; in the chat's input row the text box takes the room and the mode keeps to its word */
.ob-inputrow #obAsk { flex:1 1 auto !important; width:auto !important; min-width:0 !important; }
.ob-inputrow .ob-mode { flex:0 0 auto !important; width:auto !important; }

/* ── Links: the open entry's title and headings, date, feeling and topics ── */
.ob-ls { padding:2px 6px 14px; margin:0 0 12px; border-bottom:1px solid var(--border-light); }
.ob-ls:last-child { border-bottom:0; }
.ob-ls h5 { font-family:var(--serif); font-size:17px; font-weight:500; color:var(--ink); margin:0 0 8px; }
.ob-lt { display:block; width:100%; text-align:left; padding:4px 8px; margin:0 0 2px; background:none; border:0; font-family:var(--serif); font-size:17px; color:var(--ink); cursor:pointer; }
.ob-lt:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ob-ls .ob-outline li { padding-left:12px; }
.ob-ls .ob-outline li.h3 { padding-left:28px; }
.ob-ls .ob-note { margin:6px 8px 0; font-size:14.5px; }
.ob-lp { font-family:var(--serif); font-size:16px; color:var(--ink-soft); margin:0 8px; }
.ob-lsub { font-family:var(--serif); font-size:15px; color:var(--muted); margin:12px 0 6px; }
.ob-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ob-chip.add { border-style:dashed; color:var(--muted); }
.ob-chip.sug { border-color:color-mix(in srgb, var(--gold) 45%, var(--border)); background:color-mix(in srgb, var(--gold) 9%, transparent); }
.ob-chip.add:hover, .ob-chip.sug:hover { color:var(--ink); }
.ob-newtopic { display:flex; gap:6px; margin:12px 0 0; }
.ob-newtopic .ob-field { flex:1 1 auto !important; width:auto !important; min-width:0; }

/* ── A section becoming its own entry: the section tints, the offer slides in beside its heading ── */
.ob-page { position:relative; }
.ob-secglow { position:absolute; left:28px; right:28px; pointer-events:none; border-left:2px solid var(--purple); background:color-mix(in srgb, var(--purple) 5%, transparent); opacity:0; transform:scaleY(.97); transform-origin:top; transition:opacity .28s ease, transform .34s cubic-bezier(.22,.8,.24,1); }
.ob-secglow.on { opacity:1; transform:none; }
.ob-split { position:absolute; right:-6px; display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border:1px solid color-mix(in srgb, var(--purple) 45%, var(--border)); border-radius:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:12.5px; font-weight:500; cursor:pointer; box-shadow:0 8px 22px color-mix(in srgb, var(--ink) 10%, transparent); opacity:0; transform:translateX(10px); pointer-events:none; transition:opacity .26s ease, transform .38s cubic-bezier(.22,.8,.24,1), background .2s ease; z-index:4; }
.ob-split .bi { color:var(--purple); font-size:12.5px; }
.ob-split.on { opacity:1; transform:none; pointer-events:auto; }
.ob-split:hover { background:color-mix(in srgb, var(--purple) 7%, var(--bg)); }
.ob-moved { font-style:italic; color:var(--muted); }
@media (prefers-reduced-motion: reduce) { .ob-secglow, .ob-split { transition:opacity .01s; transform:none; } }

/* ── In Board the right column is one whole panel ── */
.ob-ws[data-view="board"] .ob-right { grid-template-rows:minmax(0,1fr) 0 0; }
.ob-ws[data-view="board"] .ob-right > .ob-gut-row, .ob-ws[data-view="board"] .ob-right > section:last-child { display:none; }

/* ── A prompt becoming a section: the travelling marker, the sweep, the line the caret lands on ── */
.ob-guide-dot { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--purple); box-shadow:0 0 0 4px color-mix(in srgb, var(--purple) 18%, transparent); pointer-events:none; z-index:5; }
.ob-guide-dot.go { transition:left .85s cubic-bezier(.65,0,.35,1), top .85s cubic-bezier(.65,0,.35,1); }
.ob-body h2.ob-guide { position:relative; }
.ob-body h2.ob-guide::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--purple); transform-origin:left; animation:obSweep 1.6s cubic-bezier(.22,.8,.24,1) both; }
@keyframes obSweep { 0% { transform:scaleX(0); opacity:1; } 45% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(1); opacity:0; } }
.ob-body p.ob-caretline { animation:obCaretLine 1.8s ease both; }
@keyframes obCaretLine { 0% { box-shadow:-12px 0 0 -10px var(--purple); background:color-mix(in srgb, var(--purple) 9%, transparent); } 100% { box-shadow:-12px 0 0 -10px transparent; background:transparent; } }
@media (prefers-reduced-motion: reduce) { .ob-guide-dot { display:none; } .ob-body h2.ob-guide::after, .ob-body p.ob-caretline { animation:none; } }

/* ── Where an entry came from, and what grew out of it ── */
.ob-derived { display:block; margin:0 0 8px; font-family:var(--serif); font-style:italic; font-size:15.5px; color:var(--muted); }
.ob-derived .bi { font-style:normal; font-size:12px; color:var(--purple); margin-right:8px; }
.ob-promptwrap .ob-derived:last-of-type { margin-bottom:12px; }

/* ── The connection graph under Linked Entries ── */
.ob-egof { display:flex; flex-wrap:wrap; gap:6px; margin:0 4px 6px; }
.ob-ego { width:100%; height:auto; display:block; overflow:visible; }
.ob-ego .eg { stroke:color-mix(in srgb, var(--ink) 22%, transparent); stroke-width:1.2; }
.ob-ego .eg.strong { stroke:var(--purple); stroke-width:2.2; }
.ob-ego .egc circle { fill:var(--purple); stroke:var(--bg); stroke-width:2; }
.ob-ego .egn { cursor:pointer; }
.ob-ego .egn circle:not(.hit) { fill:var(--bg); stroke:color-mix(in srgb, var(--ink) 60%, transparent); stroke-width:1.4; transition:fill .2s ease; }
.ob-ego .egn .hit { fill:transparent; }
.ob-ego .egn text { font-family:var(--serif); font-size:12.5px; fill:var(--ink-soft); paint-order:stroke; stroke:var(--paper); stroke-width:4px; }
.ob-ego .egn:hover circle:not(.hit) { fill:var(--purple); stroke:var(--purple); }
.ob-ego .egn:hover text { fill:var(--ink); }

/* ── Graph: the focused entry, read whole ── */
.ob-read { padding:0 8px 20px; }
.ob-read h2 { font-family:var(--serif); font-size:26px; font-weight:500; line-height:1.2; color:var(--ink); margin:0; }
.ob-read .when { font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted); margin:4px 0 12px; }
.ob-read .tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 14px; }
.ob-read .tags .ob-chip { cursor:default; }
.ob-prompt.static { cursor:default; font-size:15.5px; padding:9px 12px; }
.ob-read-body { font-family:var(--serif); font-size:16.5px; line-height:1.65; color:var(--ink); }
.ob-read-body h2, .ob-read-body h3 { font-family:var(--serif); font-size:19px; font-weight:500; margin:16px 0 2px; }
.ob-read-body p { margin:0 0 10px; }

/* ── Canvas: the card library ── */
.ob-libtools { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 2px 10px; }
.ob-libtools #obLibQ { grid-column:1 / -1; }
.ob-libtools .ob-field { width:100% !important; }
.ob-libgrid { column-count:2; column-gap:8px; margin:0 2px 10px; }
.ob-lcard { break-inside:avoid; display:block; margin:0 0 8px; padding:12px 13px 10px; border:1px solid var(--border); background:var(--bg); cursor:grab; box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ob-lcard:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--purple) 35%, var(--border)); box-shadow:0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent); }
.ob-lcard h4 { font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.2; color:var(--ink); margin:0 0 6px; }
.ob-lcard p { font-family:var(--serif); font-size:14.5px; line-height:1.45; color:var(--ink-soft); margin:0 0 6px; }
.ob-lcard .w { font-family:var(--serif); font-style:italic; font-size:13px; color:var(--muted); }
.ob-lcard mark.hl { background:none; color:color-mix(in srgb, var(--gold) 85%, var(--ink)); font-weight:600; }
.ob-lcard.placed { background:color-mix(in srgb, var(--ink) 2.5%, var(--bg)); }

/* tabs inside a panel heading */
.ob-phtabs { display:flex; gap:20px; align-items:baseline; }
.ob-phtabs button { background:none; border:0; border-bottom:1.5px solid transparent; border-radius:0; padding:0 0 3px; font-family:var(--serif); font-size:19px; color:var(--muted); cursor:pointer; transition:color .24s ease, border-color .24s ease; }
.ob-phtabs button:hover { color:var(--ink); }
.ob-phtabs button.on { color:var(--ink); border-color:var(--ink); }

/* ── New Recurring Topic: a window over the blurred page ── */
.ob-modal { position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb, var(--ink) 16%, transparent); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); opacity:0; transition:opacity .22s ease; }
.ob-modal.on { opacity:1; }
.ob-modal[hidden] { display:none; }
.ob-modal-card { width:min(500px, 100%); max-height:calc(100vh - 48px); overflow-y:auto; box-sizing:border-box; padding:26px 28px 22px; background:var(--bg); border:1px solid var(--border); box-shadow:0 30px 80px color-mix(in srgb, var(--ink) 22%, transparent); transform:translateY(10px) scale(.98); transition:transform .3s cubic-bezier(.22,.8,.24,1); }
.ob-modal.on .ob-modal-card { transform:none; }
.ob-modal-card .ob-ph { font-size:26px; margin:0 0 8px; }
.ob-modal-lead { font-family:var(--serif); font-size:17px; line-height:1.5; color:var(--ink); margin:0 0 18px; }
.ob-modal-card .ob-lbl { display:block; font-family:var(--serif); font-size:16px; color:var(--ink); margin:0 0 6px; }
.ob-modal-card .ob-field { width:100% !important; }
.ob-modal-card .ob-acts { margin:20px 0 0; }
.ob-btn.ob-quiet { margin-left:auto; border-color:transparent; color:var(--muted); }
.ob-btn.ob-quiet:hover { color:var(--ink); border-color:var(--border); }
@media (prefers-reduced-motion: reduce) { .ob-modal, .ob-modal-card { transition:none; } }
/* the shell styles labels in the sans; a list of entries reads in the serif */
.ob-checks label { font-family:var(--serif) !important; font-size:16.5px !important; color:var(--ink); cursor:pointer; }
.ob-checks label small { font-family:var(--serif); }

/* ── Entries: three small cards per group, paged with Newer and Older ── */
.ob-folder.open .ob-gbody { display:block; }
.ob-folder .ob-gbody { display:none; padding:0 0 10px; }
.ob-folder .ob-gbody > ul { display:flex !important; }
.ob-ecards { list-style:none; margin:0; padding:0 0 0 4px; flex-direction:column; gap:5px; }
.ob-ecards.slide-up { animation:obPageUp .32s cubic-bezier(.22,.8,.24,1) both; }
.ob-ecards.slide-down { animation:obPageDown .32s cubic-bezier(.22,.8,.24,1) both; }
@keyframes obPageUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes obPageDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
.ob-item.ob-ecard { padding:8px 11px 8px; border:1px solid var(--border); border-left:2px solid var(--border); background:color-mix(in srgb, var(--ink) 1.4%, var(--bg)); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.ob-item.ob-ecard .t { font-size:15px; color:var(--ink); }
.ob-item.ob-ecard .d { font-size:12.5px; margin-top:1px; }
.ob-item.ob-ecard:hover { transform:translateY(-1px); background:var(--bg); border-color:color-mix(in srgb, var(--ink) 22%, var(--border)); box-shadow:0 6px 16px color-mix(in srgb, var(--ink) 7%, transparent); }
.ob-item.ob-ecard.on { border-color:color-mix(in srgb, var(--purple) 45%, var(--border)); border-left-color:var(--purple); background:color-mix(in srgb, var(--purple) 6%, var(--bg)); }
.ob-pager { display:flex; justify-content:flex-end; gap:4px; margin:6px 0 0; }
.ob-pg { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:1px solid var(--border); border-radius:0; background:transparent; font-family:var(--sans); font-size:11.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; transition:color .2s ease, border-color .2s ease; }
.ob-pg .bi { font-size:9px; color:var(--purple); }
.ob-pg:hover:not(:disabled) { color:var(--ink); border-color:color-mix(in srgb, var(--purple) 45%, var(--border)); }
.ob-pg:disabled { opacity:.35; cursor:default; }
@media (prefers-reduced-motion: reduce) { .ob-ecards.slide-up, .ob-ecards.slide-down { animation:none; } .ob-item.ob-ecard:hover { transform:none; } }
/* tighter cards, so more groups fit in the column */
.ob-item.ob-ecard { padding:5px 10px 6px; line-height:1.25; }
.ob-item.ob-ecard .t { font-size:14.5px; }
.ob-item.ob-ecard .d { font-size:12px; margin-top:0; }
.ob-ecards { gap:4px; }
.ob-pager { margin:5px 0 0; }

/* ── Card library: two by two, four at a time, each group folds ── */
.ob-libgroup { margin:0 0 8px; }
.ob-libgroup > .ob-fold { display:flex; align-items:center; gap:9px; width:100%; padding:6px 2px; background:none; border:0; text-align:left; font-family:var(--serif); font-size:16.5px; font-weight:500; color:var(--ink); cursor:pointer; }
.ob-libgroup > .ob-fold .car { font-size:9px; color:var(--muted); transition:transform .22s cubic-bezier(.4,0,.2,1); }
.ob-libgroup.open > .ob-fold .car { transform:rotate(90deg); }
.ob-libgroup > .ob-gbody { display:none; }
.ob-libgroup.open > .ob-gbody { display:block; }
.ob-libgrid { column-count:initial; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:2px 2px 0; }
.ob-libgrid.slide-up { animation:obPageUp .32s cubic-bezier(.22,.8,.24,1) both; }
.ob-libgrid.slide-down { animation:obPageDown .32s cubic-bezier(.22,.8,.24,1) both; }
.ob-lcard { margin:0; padding:10px 11px 9px; display:flex; flex-direction:column; min-height:0; }
.ob-lcard h4 { font-size:15.5px; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ob-lcard p { font-size:13.5px; line-height:1.4; margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.ob-lcard .w { font-size:12.5px; }
.ob-libgroup .ob-pager { margin:6px 2px 0; }
@media (prefers-reduced-motion: reduce) { .ob-libgrid.slide-up, .ob-libgrid.slide-down { animation:none; } }
/* compact enough that both groups sit on one screen */
.ob-lcard { padding:8px 10px 7px; }
.ob-lcard h4 { font-size:15px; margin:0 0 3px; }
.ob-lcard p { -webkit-line-clamp:2; font-size:13.5px; margin:0 0 4px; }
.ob-libgrid { gap:6px; }
.ob-libgroup { margin:0 0 4px; }
.ob-libtools { margin-bottom:6px; }
/* the links a card carries, as small word tags; lavender when they tie it to the board */
.ob-ltags { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 5px; }
.ob-ltag { display:inline-block; padding:1px 7px; border:1px solid var(--border); font-family:var(--sans); font-size:10.5px; font-weight:500; line-height:1.5; color:var(--muted); white-space:nowrap; }
.ob-ltag.on { color:var(--ink); border-color:color-mix(in srgb, var(--purple) 50%, var(--border)); background:color-mix(in srgb, var(--purple) 9%, transparent); }
/* the text keeps to its two lines; tags and day sit at the foot of the card */
.ob-lcard p { flex:0 0 auto; max-height:calc(2 * 1.4em); }
.ob-lcard .ob-ltags { margin-top:auto; padding-top:2px; }
/* entry cards on the canvas carry their link tags too; lavender where they meet another card on the board */
.ob-cv .ob-ltags { margin:8px 0 0; }
/* a single paragraph sits a little tighter in its tint than a whole section */
.ob-body p:hover { cursor:text; }

/* ── Lineage: where an entry came from and what grew out of it, as paper cards ── */
.ob-lineage { margin:0 0 14px; }
.ob-lineage .lbl { display:flex; align-items:center; gap:8px; margin:0 0 7px; font-family:var(--serif); font-size:15px; color:var(--ink-soft); }
.ob-lineage .lbl .bi { font-size:12px; color:var(--purple); }
.ob-lincards { display:flex; flex-wrap:wrap; gap:8px; }
.ob-lincard { display:flex; flex-direction:column; gap:2px; width:min(250px, 100%); padding:10px 13px 10px 14px; border:1px solid var(--border); border-left:2px solid var(--purple); border-radius:0; background:color-mix(in srgb, var(--purple) 3%, var(--bg)); text-align:left; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ob-lincard:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--purple) 40%, var(--border)); border-left-color:var(--purple); box-shadow:0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent); }
.ob-lincard .t { font-family:var(--serif); font-size:16.5px; font-weight:500; line-height:1.25; color:var(--ink); }
.ob-lincard .x { font-family:var(--serif); font-size:14px; line-height:1.4; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ob-lincard .w { font-family:var(--serif); font-style:italic; font-size:13px; color:var(--muted); margin-top:2px; }
.ob-promptwrap .ob-lineage:last-of-type { margin-bottom:18px; }

/* ── A part moved to its own entry: a card where it used to be ── */
.ob-body .ob-movedcard { position:relative; display:flex; flex-direction:column; gap:3px; margin:6px 0 20px; padding:12px 44px 13px 16px; border:1px solid var(--border); border-left:2px solid var(--purple); background:color-mix(in srgb, var(--purple) 3.5%, var(--bg)); cursor:pointer; user-select:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ob-body .ob-movedcard:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--purple) 40%, var(--border)); border-left-color:var(--purple); box-shadow:0 10px 24px color-mix(in srgb, var(--ink) 9%, transparent); }
.ob-movedcard .k { display:flex; align-items:center; gap:7px; font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); }
.ob-movedcard .k .bi { font-style:normal; font-size:11.5px; color:var(--purple); }
.ob-movedcard .t { font-family:var(--serif); font-size:20px; font-weight:500; line-height:1.25; color:var(--ink); }
.ob-movedcard .x { font-family:var(--serif); font-size:15.5px; line-height:1.45; color:var(--ink-soft); }
.ob-movedcard .go { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--purple); transition:transform .2s ease; }
.ob-movedcard:hover .go { transform:translate(3px, -50%); }
@media (prefers-reduced-motion: reduce) { .ob-lincard:hover, .ob-body .ob-movedcard:hover { transform:none; } }

/* ── Tags under the date: the entry's feeling and topics, and a panel to choose them ── */
.ob-props { flex-direction:column; align-items:flex-start; gap:10px; }
.ob-tagrow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ob-tag { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; box-sizing:border-box; border:1px solid var(--border); background:color-mix(in srgb, var(--ink) 2%, var(--bg)); font-family:var(--serif); font-size:15px; color:var(--ink); }
.ob-tag.feel { border-color:color-mix(in srgb, var(--purple) 45%, var(--border)); background:color-mix(in srgb, var(--purple) 8%, var(--bg)); font-style:italic; }
.ob-tag .x { display:inline-flex; padding:0; margin-right:-3px; background:none; border:0; color:var(--muted); font-size:10px; cursor:pointer; opacity:.6; transition:opacity .2s ease, color .2s ease; }
.ob-tag .x:hover { opacity:1; color:var(--ink); }
.ob-tag.add { border-style:dashed; color:var(--muted); cursor:pointer; font-family:var(--sans); font-size:12.5px; font-weight:500; transition:color .2s ease, border-color .2s ease; }
.ob-tag.add .bi { font-size:10px; color:var(--purple); }
.ob-tag.add:hover, .ob-tag.add.on { color:var(--ink); border-color:color-mix(in srgb, var(--purple) 50%, var(--border)); border-style:solid; }
.ob-tagadd { position:relative; }
.ob-tagpanel { position:absolute; left:0; top:calc(100% + 8px); z-index:30; width:340px; padding:14px 16px 16px; background:var(--bg); border:1px solid var(--border); box-shadow:0 18px 50px color-mix(in srgb, var(--ink) 14%, transparent); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .2s ease, transform .26s cubic-bezier(.22,.8,.24,1); }
.ob-tagpanel.open { opacity:1; transform:none; pointer-events:auto; }
.ob-tagpanel .h { margin:10px 0 6px; font-family:var(--serif); font-size:15.5px; font-style:normal; color:var(--ink); }
.ob-tagpanel .h:first-child { margin-top:0; }
.ob-tagpanel .ob-newtopic { margin-top:14px; }
@media (prefers-reduced-motion: reduce) { .ob-tagpanel { transition:none; } }
/* the outline: the title, then the headings beneath it, with a quiet rule down the side */
.ob-outlinebox { padding:0 4px; }
.ob-outlinebox .ob-lt { font-size:17.5px; font-weight:500; padding:4px 8px 6px; }
.ob-outlinebox .ob-outline { margin:2px 0 0 10px; border-left:1px solid var(--border); }
.ob-outlinebox .ob-outline li { padding-left:4px; }
.ob-outlinebox .ob-outline li.h3 { padding-left:20px; }
.ob-outlinebox .ob-outline .go { font-size:16px; }
.ob-outlinebox .ob-outline .mk { opacity:0; }
.ob-outlinebox .ob-outline li:hover .mk, .ob-outlinebox .ob-outline .mk:focus-visible, .ob-outlinebox .ob-outline .mk.done { opacity:1; }

/* ── The bar's chip carries the analysis picked in the circle ── */
.ob-pill-chip { gap:8px; }
.ob-pill-chip .go { font-size:16px; margin-right:-4px; color:var(--muted); transition:transform .2s ease, color .2s ease; }
.ob-pill-chip:hover .go { transform:translateX(2px); color:var(--purple); }
.ob-pill-chip.flash { animation:obChipIn .5s cubic-bezier(.22,.8,.24,1); }
@keyframes obChipIn { 0% { opacity:.2; transform:translateX(-8px); border-color:var(--purple); } 100% { opacity:1; transform:none; } }
.ob-orb-item.on { color:var(--ink); background:color-mix(in srgb, var(--purple) 7%, transparent); }
.ob-orb-item.on .bi:first-child { background:var(--purple); color:var(--bg); border-color:var(--purple); }
.ob-orb-item .ck { margin-left:auto; width:auto; height:auto; background:none !important; border:0 !important; color:var(--purple) !important; font-size:15px; }
@media (prefers-reduced-motion: reduce) { .ob-pill-chip.flash { animation:none; } }

/* ── On the canvas the narrow column lists boards, like files ── */
.ob-ws[data-view="board"][data-board="canvas"] .ob-hide-canvas { display:none !important; }
.ob-files { list-style:none; margin:0; padding:0 2px; display:flex; flex-direction:column; gap:4px; }
.ob-file { position:relative; display:flex; align-items:flex-start; gap:10px; padding:9px 8px 9px 10px; border:1px solid transparent; border-left:2px solid transparent; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.ob-file:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ob-file.on { background:color-mix(in srgb, var(--purple) 7%, var(--bg)); border-color:color-mix(in srgb, var(--purple) 30%, var(--border)); border-left-color:var(--purple); }
.ob-file .ic { flex-shrink:0; margin-top:2px; font-size:14px; color:var(--purple); }
.ob-file .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ob-file .t { font-family:var(--serif); font-size:15.5px; line-height:1.3; color:var(--ink); }
.ob-file .w { font-family:var(--serif); font-style:italic; font-size:13px; color:var(--muted); }
.ob-file .acts { display:flex; align-items:center; gap:2px; flex-shrink:0; opacity:0; transition:opacity .15s ease; }
.ob-file:hover .acts, .ob-file .acts:focus-within, .ob-file .acts:has(.ob-del) { opacity:1; }
.ob-fact { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:none; border:1px solid transparent; border-radius:0; color:var(--muted); cursor:pointer; font-size:12.5px; }
.ob-fact:hover { color:var(--ink); border-color:var(--border); }
.ob-del { color:var(--red) !important; border-color:color-mix(in srgb, var(--red) 45%, var(--border)) !important; padding:3px 8px !important; }
.ob-rename { width:100% !important; padding:4px 7px !important; font-family:var(--serif) !important; font-size:15px !important; }
/* the board's name and its save, at the right of the canvas strip */
.ob-boardbar { margin-left:auto; display:flex; align-items:center; gap:10px; min-width:0; }
.ob-bname { font-family:var(--serif); font-size:16.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
#obSaveBoard:disabled { opacity:.55; cursor:default; }
/* the rename and delete float over the row's right edge, so the name gets the full width */
.ob-file { padding-right:10px; }
.ob-file .acts { position:absolute; top:6px; right:6px; padding-left:16px; background:linear-gradient(to right, transparent, var(--bg) 14px); }
.ob-file.on .acts { background:linear-gradient(to right, transparent, color-mix(in srgb, var(--purple) 7%, var(--bg)) 14px); }

/* ── Linked Entries, alive: dots pop out along the timeline, lines reach out to meet them ── */
.ob-ego { touch-action:none; }
.ob-ego .egn, .ob-ego .eg, .ob-ego .egc { opacity:0; }
.ob-ego .egn.shown, .ob-ego .eg.shown, .ob-ego .egc.shown { opacity:1; }
.ob-ego .egc.pop { animation:egFade .3s ease both; }
.ob-ego .egn.pop { animation:egFade .35s ease both; }
.ob-ego .egn.pop .dot, .ob-ego .egc.pop circle { transform-box:fill-box; transform-origin:center; animation:egPop .55s cubic-bezier(.34,1.56,.64,1) both; }
.ob-ego .egn.pop text { animation:egFade .5s ease .15s both; }
.ob-ego .eg.draw { animation:egFade .4s ease both; }
@keyframes egPop { 0% { transform:scale(0); } 100% { transform:scale(1); } }
@keyframes egFade { from { opacity:0; } to { opacity:1; } }
.ob-ego .egn { cursor:grab; }
.ob-ego .egn:active { cursor:grabbing; }
.ob-ego .egn .dot { fill:var(--bg); stroke:color-mix(in srgb, var(--ink) 60%, transparent); stroke-width:1.4; transition:fill .2s ease, stroke .2s ease; }
.ob-ego .egn .hit { fill:transparent; }
.ob-ego.hov .egn:not(.hot) { opacity:.35; transition:opacity .2s ease; }
.ob-ego.hov .eg:not(.hot) { opacity:.25; transition:opacity .2s ease; }
.ob-ego .egn.hot .dot { fill:var(--purple); stroke:var(--purple); }
.ob-ego .egn.hot text { fill:var(--ink); }
.ob-ego .eg.hot { stroke:var(--purple); stroke-width:2; }
@media (prefers-reduced-motion: reduce) { .ob-ego .egn.pop, .ob-ego .egn.pop .dot, .ob-ego .egn.pop text, .ob-ego .eg.draw, .ob-ego .egc.pop, .ob-ego .egc.pop circle { animation:none; opacity:1; } }
/* the board graph while it grows in */
.ob-graph svg.growing .node text, .ob-graph svg.growing .hub text { opacity:.4; transition:opacity .4s ease; }
.ob-graph .node, .ob-graph .hub { touch-action:none; }
/* the drawing is scaled down to the panel, so its labels are set larger to read at about 12px */
.ob-ego .egn text { font-size:15.5px; }
.ob-ego .egn .dot { r:6.5px; }
.ob-ego .egc circle { r:9px; }

/* ══ Day pages: the page is a day; every titled block is an entry ══ */
.ob-crumb { display:inline-flex; align-items:center; gap:8px; margin:0 0 10px; padding:4px 10px 4px 8px; border:1px solid var(--border); background:transparent; font-family:var(--serif); font-size:15px; color:var(--ink-soft); cursor:pointer; }
.ob-crumb:hover { color:var(--ink); border-color:color-mix(in srgb, var(--purple) 40%, var(--border)); }
.ob-crumb .bi { font-size:12px; color:var(--purple); }
.ob-crumb[hidden] { display:none; }
#section-studio .ob-title[contenteditable="false"] { cursor:default; }
.ob-body h2.ob-blk { position:relative; font-size:28px; margin:44px 0 10px; padding-top:22px; border-top:1px solid var(--border-light); }
.ob-body > h2.ob-blk:first-child { margin-top:0; padding-top:0; border-top:0; }
.ob-body h2.ob-blk:empty::before { content:'Untitled'; color:var(--muted); font-style:italic; }
.ob-body h3 { font-family:var(--serif); font-size:21px; font-weight:500; margin:24px 0 4px; }
.ob-body h2.ob-qblk { padding-left:16px; }
.ob-body h2.ob-qblk::before { content:''; position:absolute; left:0; top:28px; bottom:6px; width:2px; background:var(--purple); }
.ob-body > h2.ob-qblk:first-child::before { top:6px; }
/* a question's section carries its state under the title: Open with Settle beside it, or Settled */
.ob-body .ob-qtagrow { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0 12px; padding-left:16px; user-select:none; }
.ob-qtagrow .ob-tag { height:26px; font-size:14.5px; font-style:italic; gap:6px; }
.ob-qtagrow .ob-tag .bi { font-size:12px; font-style:normal; color:var(--purple); }
.ob-qtagrow .qopen { border-style:dashed; border-color:color-mix(in srgb, var(--purple) 45%, var(--border)); }
.ob-qtagrow .qdone { border-color:color-mix(in srgb, var(--purple) 45%, var(--border)); background:color-mix(in srgb, var(--purple) 8%, var(--bg)); }
.ob-qtagrow .ob-qsettle { height:26px; opacity:.75; transition:opacity .2s ease, border-color .2s ease; }
.ob-qtagrow .ob-qsettle:hover, .ob-body h2.ob-qblk:hover + .ob-qtagrow .ob-qsettle { opacity:1; border-color:color-mix(in srgb, var(--purple) 50%, var(--border)); }
.ob-qtagrow.just .qdone { animation:obTagIn .6s .05s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes obTagIn { from { opacity:0; transform:translateY(-8px) scale(.85); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .ob-qtagrow.just .qdone { animation:none; } }
.ob-body .ob-flash { animation:obFlash 1.3s ease both; }
@keyframes obFlash { 0% { background:color-mix(in srgb, var(--purple) 14%, transparent); } 100% { background:transparent; } }

/* ══ Questions: each a branch, its follow-ups the commits on it ══ */
.ob-qs { margin:0 0 26px; border:1px solid var(--border); background:color-mix(in srgb, var(--purple) 2.5%, var(--bg)); }
.ob-qs-head { display:flex; align-items:center; gap:10px; width:100%; padding:11px 16px; background:none; border:0; text-align:left; font-family:var(--serif); font-size:18px; font-weight:500; color:var(--ink); cursor:pointer; }
.ob-qs-head .car { font-size:9px; color:var(--purple); transition:transform .22s cubic-bezier(.4,0,.2,1); }
.ob-qs.open .ob-qs-head .car { transform:rotate(90deg); }
.ob-qs-body { display:none; padding:0 16px 14px; }
.ob-qs.open .ob-qs-body { display:block; }
.ob-qthread { position:relative; padding:4px 0 6px 2px; margin:0 0 6px; }
.ob-qthread::before { content:''; position:absolute; left:7px; top:16px; bottom:30px; width:1.5px; background:color-mix(in srgb, var(--purple) 45%, transparent); }
.ob-qnode { position:relative; display:flex; align-items:baseline; gap:10px; width:100%; padding:4px 6px 4px 22px; background:none; border:0; text-align:left; cursor:pointer; transition:background .15s ease; }
.ob-qnode:hover { background:color-mix(in srgb, var(--purple) 7%, transparent); }
.ob-qnode .dot { position:absolute; left:2px; top:11px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1.5px solid var(--purple); }
.ob-qnode.root .dot { background:var(--purple); }
.ob-qnode .t { flex:1; min-width:0; font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.4; color:var(--ink); }
.ob-qnode:not(.root) .t { font-size:15px; color:var(--ink-soft); }
.ob-qnode .d { flex-shrink:0; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--muted); }
.ob-qmore { display:inline-flex; align-items:center; gap:6px; margin:2px 0 0 22px; padding:3px 9px; border:1px dashed var(--border); background:none; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; }
.ob-qmore .bi { font-size:10px; color:var(--purple); }
.ob-qmore:hover { color:var(--ink); border-style:solid; border-color:color-mix(in srgb, var(--purple) 45%, var(--border)); }
.ob-qadd { display:flex; gap:6px; margin:4px 0 0 22px; }
.ob-qadd.new { margin:10px 0 0; }
.ob-qadd .ob-field { flex:1 1 auto !important; width:auto !important; min-width:0; font-family:var(--serif) !important; font-size:15px !important; }

/* ══ Settling: a nudge, then the block lights, sparkles rise and the word flies ══ */
.ob-settlebtn { position:absolute; right:28px; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border:1px solid var(--purple); background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer; overflow:hidden; box-shadow:0 10px 26px color-mix(in srgb, var(--purple) 18%, transparent); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .3s ease, transform .4s cubic-bezier(.22,.8,.24,1); z-index:6; }
.ob-settlebtn .bi { color:var(--purple); font-size:15px; }
.ob-settlebtn.on { opacity:1; transform:none; pointer-events:auto; }
.ob-settlebtn.on::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:-50%; background:color-mix(in srgb, var(--purple) 16%, transparent); transform:skewX(-20deg); animation:obShine 1.1s .35s ease both; }
@keyframes obShine { to { left:120%; } }
.ob-settlebtn:hover { background:color-mix(in srgb, var(--purple) 7%, var(--bg)); }
.ob-settlefx { position:absolute; left:28px; right:28px; pointer-events:none; z-index:5; border:1px solid var(--purple); background:color-mix(in srgb, var(--purple) 9%, transparent); animation:obLight 2.3s ease both; }
@keyframes obLight { 0% { opacity:0; box-shadow:0 0 0 0 color-mix(in srgb, var(--purple) 0%, transparent); } 18% { opacity:1; box-shadow:0 0 0 6px color-mix(in srgb, var(--purple) 16%, transparent), 0 0 40px color-mix(in srgb, var(--purple) 30%, transparent); } 70% { opacity:1; } 100% { opacity:0; box-shadow:0 0 0 14px transparent; } }
.ob-settlefx .sp { position:absolute; left:var(--x); top:var(--y); width:10px; height:10px; transform:scale(0) rotate(0deg); animation:obSpark 1.1s var(--d) cubic-bezier(.22,.8,.24,1) both; }
.ob-settlefx .sp::before, .ob-settlefx .sp::after { content:''; position:absolute; left:50%; top:0; width:2px; height:100%; margin-left:-1px; background:var(--purple); border-radius:2px; }
.ob-settlefx .sp::after { transform:rotate(90deg); }
@keyframes obSpark { 0% { transform:scale(0) rotate(0deg); opacity:0; } 40% { transform:scale(var(--s)) rotate(45deg); opacity:1; } 100% { transform:translateY(-18px) scale(0) rotate(90deg); opacity:0; } }
.ob-settlefx .fly { position:absolute; right:24px; top:14px; display:inline-flex; align-items:center; gap:7px; padding:4px 12px; background:var(--purple); color:var(--bg); font-family:var(--serif); font-size:16px; font-style:italic; animation:obFly 2s .25s cubic-bezier(.22,.8,.24,1) both; }
@keyframes obFly { 0% { opacity:0; transform:translateY(10px) scale(.9); } 20% { opacity:1; transform:none; } 70% { opacity:1; transform:translateY(-14px); } 100% { opacity:0; transform:translateY(-46px); } }
@media (prefers-reduced-motion: reduce) { .ob-settlefx, .ob-settlefx .sp, .ob-settlefx .fly, .ob-settlebtn.on::after { animation-duration:.01s; } }

/* ══ History: the day line, branches for questions, commits for follow-ups, merges when settled ══ */
.ob-hist { position:relative; padding:2px 0 10px; }
.ob-histsvg { position:absolute; left:0; top:2px; overflow:visible; }
.ob-histsvg .main { stroke:color-mix(in srgb, var(--ink) 35%, transparent); stroke-width:2; }
.ob-histsvg .br { fill:none; stroke:var(--purple); stroke-width:1.8; opacity:.75; }
.ob-histsvg .br.open { stroke-dasharray:none; }
.ob-histsvg .br.anim-merge, .ob-histsvg .br.anim-branch { stroke-dasharray:1; stroke-dashoffset:1; animation:obDraw 1.4s .2s cubic-bezier(.65,0,.35,1) forwards; opacity:1; stroke-width:2.4; }
@keyframes obDraw { to { stroke-dashoffset:0; } }
.ob-histsvg .cm { fill:var(--bg); stroke:color-mix(in srgb, var(--ink) 60%, transparent); stroke-width:1.6; }
.ob-histsvg .cm.cur { fill:var(--ink); }
.ob-histsvg .ask { fill:var(--purple); stroke:var(--bg); stroke-width:1.5; }
.ob-histsvg .fu { fill:var(--bg); stroke:var(--purple); stroke-width:1.6; }
.ob-histsvg .mg { fill:var(--purple); stroke:var(--bg); stroke-width:2.5; }
.ob-histsvg .pop { transform-box:fill-box; transform-origin:center; animation:egPop .6s 1.2s cubic-bezier(.34,1.56,.64,1) both; }
.ob-histrows { list-style:none; margin:0; padding:0 4px 0 calc(var(--lanes) + 6px); }
.ob-histrows .hr { display:flex; align-items:center; gap:8px; height:30px; padding:0 6px; border-left:2px solid transparent; }
.ob-histrows .hr[data-hgo], .ob-histrows .hr[data-hq] { cursor:pointer; }
.ob-histrows .hr:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ob-histrows .hr.cur { border-left-color:var(--ink); background:color-mix(in srgb, var(--ink) 3%, transparent); }
.ob-histrows .hr.fresh { animation:obFresh 2.4s .9s ease both; }
@keyframes obFresh { 0% { background:color-mix(in srgb, var(--purple) 16%, transparent); } 100% { background:transparent; } }
.ob-histrows .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--serif); font-size:14.5px; color:var(--ink); }
.ob-histrows .t.q { font-style:italic; color:var(--ink-soft); }
.ob-histrows .t.mgd { color:var(--ink); }
.ob-histrows .t em { font-style:normal; color:var(--purple); margin-right:4px; font-size:13px; }
.ob-histrows .d { flex-shrink:0; font-family:var(--serif); font-style:italic; font-size:12.5px; color:var(--muted); }
/* sparkles: upright four-point glints that only turn as they fade */
@keyframes obSpark { 0% { transform:scale(0) rotate(0deg); opacity:0; } 45% { transform:scale(var(--s)) rotate(0deg); opacity:1; } 100% { transform:translateY(-20px) scale(0) rotate(35deg); opacity:0; } }
.ob-settlefx .sp::before, .ob-settlefx .sp::after { background:linear-gradient(transparent, var(--purple) 35%, var(--purple) 65%, transparent); }

/* ══ The day's tree: a trunk from the day up to its tip, settled questions merged onto it ══ */
.ob-treewrap { padding:0 2px; }
.ob-tree { width:100%; height:auto; display:block; overflow:hidden; touch-action:none; cursor:grab; user-select:none; }
.ob-tree .trunk { fill:none; }
.ob-tree.panning { cursor:grabbing; }
.ob-tree .trunk { stroke:color-mix(in srgb, var(--ink) 45%, transparent); stroke-width:2.2; stroke-linecap:round; }
.ob-tree .root circle { fill:var(--ink); }
.ob-tree .root .hl { font-style:italic; fill:var(--ink-soft); }
.ob-tree .tip path { fill:var(--purple); }
.ob-tree .ah { fill:none; stroke:var(--purple); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ob-tree .mergearrow { fill:none; stroke:var(--purple); stroke-width:1.6; }
.ob-tree .mergearrow.drawin { stroke-dasharray:1; stroke-dashoffset:1; animation:obDraw 1.2s .25s cubic-bezier(.65,0,.35,1) forwards; }
.ob-tree .workarrow { fill:none; stroke:color-mix(in srgb, var(--purple) 70%, transparent); stroke-width:1.4; stroke-dasharray:4 4; }
.ob-tree .hl { font-family:var(--serif); font-size:15px; fill:var(--ink-soft); }
.ob-tree .hl.strong { fill:var(--ink); }
.ob-tree .hl .hsub { font-style:italic; font-size:13px; fill:var(--purple); }
.ob-tree .hit { fill:transparent; }
.ob-tree .mnode .dot { fill:var(--purple); stroke:var(--bg); stroke-width:2.5; }
.ob-tree .onode .dot { fill:var(--bg); stroke:color-mix(in srgb, var(--ink) 55%, transparent); stroke-width:1.5; transition:fill .2s ease, stroke .2s ease; }
.ob-tree .onode.settledq .dot { fill:color-mix(in srgb, var(--purple) 35%, var(--bg)); stroke:var(--purple); }
.ob-tree .onode.working .dot { stroke:var(--purple); stroke-width:2; }
.ob-tree .onode.float .hl { fill:var(--muted); font-style:italic; }
.ob-tree [data-hq], .ob-tree [data-hgo] { cursor:pointer; }
.ob-tree [data-hq]:hover .dot, .ob-tree [data-hgo]:hover .dot { fill:var(--purple); stroke:var(--purple); }
.ob-tree [data-hq]:hover .hl, .ob-tree [data-hgo]:hover .hl { fill:var(--ink); }
.ob-tree .popin .dot { transform-box:fill-box; transform-origin:center; animation:egPop .6s 1.25s cubic-bezier(.34,1.56,.64,1) both; }
.ob-tree .popin .hl { animation:egFade .6s 1.3s ease both; }
@media (prefers-reduced-motion: reduce) { .ob-tree .mergearrow.drawin, .ob-tree .popin .dot, .ob-tree .popin .hl { animation:none; stroke-dashoffset:0; } }

.ob-tree .hl { font-size:13.5px; }
.ob-tree .hl .hsub { font-size:12.5px; }

/* ══ Write's formatting, along the foot of the page ══ */
.ob-ws[data-view="write"] .ob-strip { display:none; }
.ob-fmt { flex-shrink:0; border-top:1px solid var(--border); background:var(--paper); }
.ob-attach { display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px 0; }
.ob-attach[hidden] { display:none; }
.ob-att { position:relative; display:inline-flex; align-items:center; gap:6px; height:56px; max-width:180px; padding:0 10px 0 0; border:1px solid var(--border); background:var(--bg); overflow:hidden; font-family:var(--serif); font-size:14px; color:var(--ink-soft); }
.ob-att img { width:60px; height:56px; object-fit:cover; }
.ob-att > .bi { font-size:18px; color:var(--purple); padding-left:10px; }
.ob-att span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-att button { position:absolute; top:3px; right:3px; width:18px; height:18px; display:none; align-items:center; justify-content:center; padding:0; border:0; background:color-mix(in srgb, var(--ink) 70%, transparent); color:var(--bg); font-size:9px; cursor:pointer; }
.ob-att:hover button { display:inline-flex; }
.ob-fmtrow { display:flex; flex-wrap:wrap; align-items:center; gap:4px 4px; padding:8px 18px 10px; min-height:44px; box-sizing:border-box; }
.ob-fmtg { display:flex; align-items:center; gap:2px; padding:0 8px; border-left:1px solid var(--border); }
.ob-fmtg:first-child { padding-left:0; border-left:0; }
.ob-fb { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border:1px solid transparent; border-radius:0; background:none; color:var(--ink-soft); font-size:15px; cursor:pointer; transition:color .15s ease, background .15s ease, border-color .15s ease; }
.ob-fb.txt { font-family:var(--sans); font-size:12.5px; font-weight:500; white-space:nowrap; }
.ob-fb:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ob-fb.on { color:var(--ink); border-color:color-mix(in srgb, var(--purple) 45%, var(--border)); background:color-mix(in srgb, var(--purple) 7%, transparent); }
#obDictate.rec { color:var(--red); border-color:color-mix(in srgb, var(--red) 45%, var(--border)); }
.ob-wc { margin-left:auto; font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); white-space:nowrap; }
.ob-linkwrap { position:relative; display:inline-flex; }
.ob-linkpop { position:absolute; left:0; bottom:calc(100% + 8px); z-index:20; width:260px; padding:8px; background:var(--bg); border:1px solid var(--border); box-shadow:0 12px 30px color-mix(in srgb, var(--ink) 12%, transparent); }
.ob-linkpop[hidden] { display:none; }
.ob-linkpop .ob-field { width:100% !important; }
.ob-body ul, .ob-body ol { margin:0 0 16px; padding-left:26px; }
.ob-body li { margin:0 0 4px; }
.ob-body a:not(.wl) { color:var(--purple); text-decoration:underline; text-underline-offset:3px; }
.ob-body b, .ob-body strong { font-weight:600; }

/* ══ Links: a local graph, after Obsidian's ══ */
.ob-egof { align-items:center; }
.ob-lgset { margin-left:auto; padding:4px 10px !important; }
.ob-lgset.on { border-color:color-mix(in srgb, var(--purple) 50%, var(--border)); background:color-mix(in srgb, var(--purple) 7%, transparent); }
.ob-lgwrap { position:relative; }
.ob-lg { display:block; touch-action:none; cursor:grab; overflow:hidden; }
.ob-lg.panning { cursor:grabbing; }
.ob-lg .lge { stroke:color-mix(in srgb, var(--ink) 22%, transparent); stroke-width:1.2; opacity:0; transition:stroke .2s ease, opacity .3s ease; }
.ob-lg .lge.shown { opacity:1; }
.ob-lg .lge.back { stroke:color-mix(in srgb, var(--purple) 60%, transparent); stroke-width:1.8; }
.ob-lg .lge.tagl { stroke-dasharray:3 3; }
.ob-lg .lgah { fill:color-mix(in srgb, var(--purple) 70%, transparent); }
.ob-lg .lgn { opacity:0; cursor:pointer; }
.ob-lg .lgn.shown { opacity:1; }
.ob-lg .lgn.pop .dot { transform-box:fill-box; transform-origin:center; animation:egPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.ob-lg .lgn .dot { fill:var(--bg); stroke:color-mix(in srgb, var(--ink) 55%, transparent); stroke-width:1.4; }
.ob-lg .lgn.center .dot { fill:var(--purple); stroke:var(--bg); stroke-width:2.5; }
.ob-lg .lgn.tag .dot { fill:color-mix(in srgb, var(--ink) 30%, var(--bg)); stroke:none; }
.ob-lg .lgn text { font-family:var(--serif); font-size:13px; fill:var(--ink-soft); paint-order:stroke; stroke:var(--paper); stroke-width:4px; opacity:var(--lgtext, 1); transition:opacity .2s ease; pointer-events:none; }
.ob-lg .lgn.center text { opacity:1; fill:var(--ink); font-size:14px; }
.ob-lg .lgn.tag text { font-style:italic; font-size:12px; }
.ob-lg.hov .lgn:not(.hot) { opacity:.25; }
.ob-lg.hov .lge:not(.hot) { opacity:.15; }
.ob-lg .lgn.hot text { opacity:1; fill:var(--ink); }
.ob-lg .lgn.hot:not(.center) .dot { stroke:var(--purple); stroke-width:2; }
.ob-lg .lge.hot { stroke:var(--purple); stroke-width:2; }
.ob-lghint { margin:2px 4px 0; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--muted); }
.ob-lgpanel { position:absolute; right:0; top:0; z-index:5; width:236px; max-height:100%; overflow-y:auto; padding:12px 14px 14px; background:var(--bg); border:1px solid var(--border); box-shadow:0 14px 36px color-mix(in srgb, var(--ink) 12%, transparent); display:none; }
.ob-lgpanel.open { display:block; }
.ob-lgpanel .h { margin:12px 0 4px; font-family:var(--serif); font-size:15px; font-weight:500; color:var(--ink); }
.ob-lgsw, .ob-lgsl { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; font-family:var(--serif); font-size:14.5px; color:var(--ink-soft); cursor:pointer; }
.ob-lgsl { flex-direction:column; align-items:stretch; gap:2px; }
.ob-lgsl b { font-weight:500; color:var(--ink); }
.ob-lgsl input[type=range] { width:100%; accent-color:var(--purple); }
.ob-lgsw input { position:absolute; opacity:0; width:0; height:0; }
.ob-lgsw i { position:relative; flex-shrink:0; width:30px; height:16px; border:1px solid var(--border); background:color-mix(in srgb, var(--ink) 6%, var(--bg)); transition:background .2s ease, border-color .2s ease; }
.ob-lgsw i::after { content:''; position:absolute; top:2px; left:2px; width:10px; height:10px; background:var(--muted); transition:transform .2s ease, background .2s ease; }
.ob-lgsw input:checked + i { background:color-mix(in srgb, var(--purple) 20%, var(--bg)); border-color:var(--purple); }
.ob-lgsw input:checked + i::after { transform:translateX(14px); background:var(--purple); }
.ob-lgsw input:focus-visible + i { outline:2px solid var(--purple); outline-offset:2px; }
.ob-lgpanel .ob-doors { margin-top:12px; }
@media (prefers-reduced-motion: reduce) { .ob-lg .lgn.pop .dot { animation:none; } }

#obRBhead .ob-lgset { margin-left:auto; }
.ob-lg .lgn text { font-size:13.5px; }

/* ── r24: the Questions panel ── */
.ob-qpane { min-width:0; }
.ob-qtree { flex:1 1 auto; min-height:0; position:relative; padding:0 6px; }
.ob-qtree .ob-tree { height:100%; }
.ob-qfoot { padding:10px 14px 14px; border-top:1px solid var(--border-light); }
.ob-qfoot .ob-note { margin:0 0 10px; font-size:14.5px; }
.ob-qacts { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; animation:obQIn .32s cubic-bezier(.22,.8,.24,1) both; }
.ob-qfoot .ob-qadd { margin:0 0 10px; }
.ob-qfoot .ob-qadd.new { margin:0; }
.ob-qfoot .ob-qadd .ob-field { height:36px; }
@keyframes obQIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.ob-tree [data-hq] { outline:none; }
.ob-tree .onode .dot { transform-box:fill-box; transform-origin:center; }
.ob-tree .onode .ring { fill:none; stroke:var(--purple); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.5); transition:opacity .25s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.ob-tree .onode.sel .ring, .ob-tree [data-hq]:focus-visible .ring { opacity:1; transform:scale(1); }
.ob-tree .onode.sel .dot { fill:var(--purple); stroke:var(--purple); }
.ob-tree .onode.sel .hl { fill:var(--ink); }
.ob-tree .onode.past { opacity:.5; }
.ob-tree .born .dot { animation:obBorn .9s .1s cubic-bezier(.34,1.56,.64,1) both; }
.ob-tree .born .hl { animation:obBornText .7s .4s cubic-bezier(.22,.8,.24,1) both; }
.ob-tree .born .ripple { fill:none; stroke:var(--purple); stroke-width:1.4; transform-box:fill-box; transform-origin:center; animation:obRipple 1.5s .1s cubic-bezier(.22,.8,.24,1) both; pointer-events:none; }
.ob-tree .born .ripple.r2 { animation-delay:.45s; }
@keyframes obBorn { 0% { transform:scale(0); fill:var(--purple); stroke:var(--purple); } 55% { transform:scale(1.7); fill:var(--purple); stroke:var(--purple); } 100% { transform:scale(1); } }
@keyframes obBornText { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes obRipple { 0% { transform:scale(.4); opacity:.9; } 100% { transform:scale(6); opacity:0; } }
.ob-flydot { position:fixed; left:0; top:0; z-index:60; width:10px; height:10px; border-radius:50%; background:var(--purple); box-shadow:0 0 0 5px color-mix(in srgb, var(--purple) 18%, transparent), 0 0 20px color-mix(in srgb, var(--purple) 45%, transparent); pointer-events:none; will-change:transform; }
.ob-flydot.land { animation:obDotLand .32s ease-out forwards; }
@keyframes obDotLand { to { opacity:0; box-shadow:0 0 0 22px transparent, 0 0 30px transparent; } }
.ob-settlefx.soft { border-color:transparent; }
@media (prefers-reduced-motion: reduce) { .ob-tree .born .dot, .ob-tree .born .hl, .ob-tree .born .ripple, .ob-qacts { animation:none; } .ob-tree .born .ripple { display:none; } }
/* Links: the dates are the parents */
.ob-lg .lgn.date .dot { fill:var(--ink); stroke:var(--bg); stroke-width:2; }
.ob-lg .lgn.date text { opacity:1; fill:var(--ink); font-size:14px; font-weight:600; }
.ob-lg .lge.day { stroke:color-mix(in srgb, var(--ink) 40%, transparent); stroke-width:1.6; }

/* Guiding ideas, above the Ask field: one at a time */
.ob-gi { margin:0 0 10px; padding:11px 12px 12px 14px; border:1px solid var(--border); border-left:2px solid var(--purple); background:color-mix(in srgb, var(--purple) 3.5%, var(--bg)); }
.ob-gihead { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ob-gil { font-family:var(--serif); font-size:15.5px; font-weight:500; color:var(--ink); }
.ob-ginav { display:flex; gap:4px; }
.ob-gib { width:28px; min-width:0; height:26px; padding:0; justify-content:center; }
.ob-gib[disabled] { opacity:.35; cursor:default; }
.ob-gibody { overflow:hidden; min-height:46px; margin:6px 0 10px; }
.ob-git { margin:0; font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.4; color:var(--ink-soft); }
.ob-git.fwd { animation:obGiFwd .38s cubic-bezier(.22,.8,.24,1) both; }
.ob-git.back { animation:obGiBack .38s cubic-bezier(.22,.8,.24,1) both; }
@keyframes obGiFwd { from { opacity:0; transform:translateX(22px); } to { opacity:1; transform:none; } }
@keyframes obGiBack { from { opacity:0; transform:translateX(-22px); } to { opacity:1; transform:none; } }
.ob-git.thinking { display:flex; gap:6px; align-items:center; height:46px; }
.ob-git.thinking i { width:6px; height:6px; border-radius:50%; background:var(--purple); animation:obGiDot 1s ease-in-out infinite; }
.ob-git.thinking i:nth-child(2) { animation-delay:.15s; } .ob-git.thinking i:nth-child(3) { animation-delay:.3s; }
@keyframes obGiDot { 0%, 100% { opacity:.25; transform:translateY(0); } 50% { opacity:1; transform:translateY(-4px); } }
.ob-giask { height:28px; }
@media (prefers-reduced-motion: reduce) { .ob-git.fwd, .ob-git.back, .ob-git.thinking i { animation:none; } }

/* question nodes can be grabbed and thrown */
.ob-tree .onode[data-qn] { cursor:grab; }
.ob-tree.grabbing, .ob-tree.grabbing .onode { cursor:grabbing; }
.ob-tree .onode.held .dot { stroke:var(--purple); stroke-width:2; filter:drop-shadow(0 3px 6px color-mix(in srgb, var(--purple) 35%, transparent)); }
.ob-tree .onode.held .hl { fill:var(--ink); }

/* ── r27: properties as soft tiles under the title ── */
.ob-props .ob-propbox { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; width:100%; }
.ob-pcell { min-width:0; padding:10px 14px 12px; border:1px solid var(--border-light); background:color-mix(in srgb, var(--ink) 1.5%, var(--bg)); transition:border-color .2s ease; }
.ob-pcell:hover { border-color:var(--border); }
.ob-pcell .k { display:flex; align-items:center; gap:7px; margin:0 0 8px; font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--muted); }
.ob-pcell .k .bi { font-style:normal; font-size:12px; color:var(--purple); }
.ob-pcell .v { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ob-pcell.links { grid-column:1 / -1; }
.ob-pday { padding:0; background:none; border:0; font-family:var(--serif); font-size:16.5px; color:var(--ink); cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--purple) 35%, transparent); text-underline-offset:4px; transition:text-decoration-color .2s ease; }
.ob-pday:hover { text-decoration-color:var(--purple); }
.ob-pcell .at { font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted); }
.ob-plink { display:inline-flex; align-items:baseline; gap:8px; padding:6px 12px 7px; border:1px solid var(--border); border-left:2px solid var(--purple); background:var(--bg); cursor:pointer; text-align:left; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ob-plink:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--purple) 40%, var(--border)); border-left-color:var(--purple); box-shadow:0 8px 18px color-mix(in srgb, var(--ink) 8%, transparent); }
.ob-plink .bi { font-size:11px; color:var(--purple); }
.ob-plink .n { font-family:var(--serif); font-size:16px; color:var(--ink); }
.ob-plink .d { font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); }
@media (prefers-reduced-motion: reduce) { .ob-plink:hover { transform:none; } }
/* ── Links as a hierarchy: dates, then their entries; ties to other dates as arcs ── */
.ob-mmwrap { padding:0 2px 6px; }
.ob-mm { width:100%; display:block; overflow:hidden; touch-action:none; cursor:grab; user-select:none; }
.ob-mm.panning { cursor:grabbing; }
.ob-mm .hit { fill:transparent; }
.ob-mm .mml { fill:none; stroke:color-mix(in srgb, var(--ink) 30%, transparent); stroke-width:1.4; transition:stroke .2s ease; }
.ob-mm .mml.me, .ob-mm .mml.hot { stroke:var(--purple); stroke-width:1.8; }
.ob-mm .mmdate { cursor:pointer; outline:none; }
.ob-mm .mmdate circle { fill:var(--ink); stroke:var(--bg); stroke-width:2; }
.ob-mm .mmdate text { font-family:var(--serif); font-size:15px; font-weight:600; fill:var(--ink); }
.ob-mm .mmdate:hover text, .ob-mm .mmdate:focus-visible text { text-decoration:underline; text-decoration-color:var(--purple); }
.ob-mm .mmrow { cursor:pointer; outline:none; }
.ob-mm .mmrow.me { cursor:default; }
.ob-mm .mmrow circle:not(.hit) { fill:var(--bg); stroke:color-mix(in srgb, var(--ink) 50%, transparent); stroke-width:1.3; transition:fill .2s ease, stroke .2s ease; }
.ob-mm .mmrow text { font-family:var(--serif); font-size:14.5px; fill:var(--ink-soft); transition:fill .2s ease; }
.ob-mm .mmrow.me circle:not(.hit) { fill:var(--purple); stroke:var(--bg); stroke-width:2.5; }
.ob-mm .mmrow.me text { fill:var(--ink); font-weight:600; }
.ob-mm .mmrow.hot circle:not(.hit), .ob-mm .mmrow:focus-visible circle:not(.hit) { fill:var(--purple); stroke:var(--purple); }
.ob-mm .mmrow.hot text, .ob-mm .mmrow:focus-visible text { fill:var(--ink); }
.ob-mm .mmarc path { fill:none; stroke:color-mix(in srgb, var(--purple) 55%, transparent); stroke-width:1.5; transition:stroke .2s ease, stroke-width .2s ease; }
.ob-mm .mmarc.q path { stroke-dasharray:4 4; }
.ob-mm.grow .mmarc.q path { stroke-dasharray:1; }
.ob-mm .mmarc text { font-family:var(--serif); font-style:italic; font-size:13px; fill:var(--purple); paint-order:stroke; stroke:var(--paper); stroke-width:4px; }
.ob-mm .mmarc.hot path { stroke:var(--purple); stroke-width:2.2; }
.ob-mm.grow .mml, .ob-mm.grow .mmarc path { stroke-dasharray:1; stroke-dashoffset:1; animation:obDraw .7s var(--d) cubic-bezier(.65,0,.35,1) forwards; }
.ob-mm.grow .mmdate, .ob-mm.grow .mmrow, .ob-mm.grow .mmarc text { animation:egFade .5s calc(var(--d) + .2s) ease both; }
@media (prefers-reduced-motion: reduce) { .ob-mm.grow .mml, .ob-mm.grow .mmarc path, .ob-mm.grow .mmdate, .ob-mm.grow .mmrow, .ob-mm.grow .mmarc text { animation:none; stroke-dashoffset:0; } }
.ob-mmname { display:flex; align-items:center; gap:9px; margin:2px 4px 6px; font-family:var(--serif); font-size:16.5px; font-weight:500; color:var(--ink); line-height:1.3; }
.ob-mmname i { flex:none; width:10px; height:10px; border-radius:50%; background:var(--purple); }

/* ── r29: grab a part of the entry and move it ── */
.ob-grip { position:absolute; left:12px; width:22px; height:28px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid transparent; background:none; color:var(--muted); font-size:16px; cursor:grab; opacity:0; transition:opacity .2s ease, color .2s ease, border-color .2s ease, background .2s ease; z-index:4; touch-action:none; }
.ob-grip.on { opacity:1; }
.ob-grip:hover, .ob-grip.held { color:var(--purple); border-color:color-mix(in srgb, var(--purple) 40%, var(--border)); background:var(--bg); }
.ob-grip.held { cursor:grabbing; }
body.ob-moving, body.ob-moving * { cursor:grabbing !important; user-select:none !important; }
.ob-body .ob-dragging { opacity:.28; transition:opacity .2s ease; }
.ob-dragghost { position:fixed; left:0; top:0; z-index:70; pointer-events:none; padding:8px 16px 10px; margin:0; background:var(--bg); border:1px solid color-mix(in srgb, var(--purple) 40%, var(--border)); border-left:2px solid var(--purple); box-shadow:0 22px 50px color-mix(in srgb, var(--ink) 18%, transparent); opacity:.96; max-height:260px; overflow:hidden; box-sizing:border-box; }
.ob-dragghost > :first-child { margin-top:0 !important; }
.ob-dropline { position:absolute; left:40px; right:40px; height:2px; background:var(--purple); opacity:0; pointer-events:none; z-index:5; transition:top .12s cubic-bezier(.22,.8,.24,1), opacity .15s ease; }
.ob-dropline::before { content:''; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--purple); }
.ob-dropline.on { opacity:1; }
@media (prefers-reduced-motion: reduce) { .ob-dropline { transition:none; } .ob-dragghost { transform:none; } }
/* inner parts move by the line alone; a whole block lifts as a card */
.ob-body .ob-dragsoft { opacity:.55; transition:opacity .2s ease; }
.ob-dragghost { padding:14px 18px 16px; -webkit-mask-image:linear-gradient(#000 75%, transparent); mask-image:linear-gradient(#000 75%, transparent); }
.ob-dragghost > h2.ob-blk { margin:0 0 8px !important; padding-top:0 !important; border-top:0 !important; }
/* while an entry is carried, the others read as cards and nothing inside them reacts */
.ob-unitbox { position:absolute; left:28px; right:28px; border:1px solid var(--border); background:color-mix(in srgb, var(--ink) 2%, transparent); box-shadow:0 6px 16px color-mix(in srgb, var(--ink) 5%, transparent); pointer-events:none; z-index:0; opacity:0; transition:opacity .25s ease, top .12s ease; }
.ob-unitbox.on { opacity:1; }
.ob-body.ob-blockdrag mark.rw { background:none; border-color:transparent; }
body.ob-moving .ob-secglow, body.ob-moving .ob-split, body.ob-moving .ob-settlebtn { opacity:0 !important; pointer-events:none !important; }
/* ideas not yet placed float quietly; a chosen one comes in by the branch */
.ob-tree .onode.float .dot { stroke:color-mix(in srgb, var(--ink) 40%, transparent); }
.ob-tree .onode.float .hl { fill:var(--muted); }
.ob-tree .onode.float.near .hl { fill:var(--ink); font-style:normal; }
/* the pop-up card for the full question */
.ob-tip { position:fixed; z-index:1000; max-width:280px; padding:12px 15px 13px; background:var(--bg); border:1px solid var(--border); border-top:2px solid var(--purple); box-shadow:0 16px 40px color-mix(in srgb, var(--ink) 16%, transparent); pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .22s cubic-bezier(.22,.8,.24,1); }
.ob-tip.below { transform:translateY(-4px); }
.ob-tip.on { opacity:1; transform:none; }
.ob-tip::after { content:''; position:absolute; left:calc(var(--ax) - 6px); bottom:-7px; width:12px; height:12px; background:var(--bg); border-right:1px solid var(--border); border-bottom:1px solid var(--border); transform:rotate(45deg); }
.ob-tip.below::after { bottom:auto; top:-8px; border:0; border-left:2px solid var(--purple); border-top:2px solid var(--purple); }
.ob-tip p { margin:0; font-family:var(--serif); }
.ob-tip .t { font-size:17px; line-height:1.3; color:var(--ink); }
.ob-tip .s { margin-top:5px; font-size:14.5px; font-style:italic; color:var(--muted); }
.ob-tip .n { margin-top:7px; font-size:15px; line-height:1.4; color:var(--ink-soft); }
.ob-tip .h { margin-top:9px; font-size:14px; font-style:italic; color:var(--purple); }
.ob-tip ul { margin:3px 0 0; padding-left:16px; font-family:var(--serif); font-size:15px; line-height:1.4; color:var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .ob-tip { transition:none; transform:none; } }

/* ════════════════════════════════════════════════════════════════
   r31: polish. Same layout, flat and serif. Panels sit a breath lighter
   than the canvas; every line is a true hairline; no drop shadows; the
   secondary text is a touch darker; numbers set as oldstyle figures;
   graphs get more room, crisp strokes and one muted ink accent.
   ════════════════════════════════════════════════════════════════ */
.ob-ws, .ob-dock, .ob-tabsrow, .ob-tip, .ob-dragghost, .ob-modal {
  --ob-panel:color-mix(in oklab, var(--paper) 70%, white);              /* two to three percent lighter than the canvas */
  --ob-hair:color-mix(in srgb, var(--ink) 8%, transparent);
  --ob-hair-strong:color-mix(in srgb, var(--ink) 15%, transparent);
  --border:var(--ob-hair);
  --border-light:color-mix(in srgb, var(--ink) 5%, transparent);
  --ink-soft:color-mix(in srgb, var(--ink) 84%, var(--paper));
  --muted:color-mix(in srgb, var(--ink) 60%, var(--paper));
  --ob-accent:color-mix(in oklab, var(--purple) 62%, var(--muted));     /* faded lavender ink, for what is active in a graph */
}
html[data-theme="dark"] :is(.ob-ws, .ob-dock, .ob-tabsrow, .ob-tip, .ob-dragghost, .ob-modal) { --ob-panel:color-mix(in oklab, var(--paper) 97%, white); }
.ob-ws { background:var(--ob-panel); border-color:var(--ob-hair); }
.ob-ws, .ob-dock, .ob-tip { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* no drop shadows: separation comes from the hairline and the lighter panel */
.ob-card:hover, .ob-lcard:hover, .ob-lincard:hover, .ob-plink:hover, .ob-body .ob-movedcard:hover, .ob-item.ob-ecard:hover { box-shadow:none; transform:none; border-color:var(--ob-hair-strong); }
.ob-plink:hover, .ob-body .ob-movedcard:hover, .ob-lincard:hover { border-left-color:var(--purple); }
.ob-cv.drag, .ob-cv.sel, .ob-cv.from { box-shadow:none; }
.ob-cv.sel, .ob-cv.from { outline:1px solid var(--purple); outline-offset:-1px; }
.ob-tip, .ob-tagpanel, .ob-linkpop, .ob-lgpanel, .ob-orb-menu, .ob-chat, .ob-pill, .ob-split, .ob-settlebtn, .ob-dragghost, .ob-unitbox, .ob-modal-card { box-shadow:none !important; border-color:var(--ob-hair-strong); background-color:var(--ob-panel); }
.ob-tip { border-top-color:var(--purple); }
.ob-tip::after { background:var(--ob-panel); border-color:var(--ob-hair-strong); }
.ob-unitbox { background:color-mix(in srgb, var(--ink) 2%, transparent); }

/* type: a clearer ladder, darker reading text, oldstyle figures for dates and times */
.ob-body { color:color-mix(in srgb, var(--ink) 94%, var(--paper)); }
.ob-body h2.ob-blk { font-size:29px; letter-spacing:-0.012em; }
.ob-body h3 { font-size:20.5px; font-weight:600; letter-spacing:-0.005em; color:var(--ink); }
.ob-ph { letter-spacing:-0.012em; }
.ob-props .when, .ob-pcell .at, .ob-plink .d, .ob-item .w, .ob-card .w, .ob-tip .s, .ob-wc, .ob-mm text, .ob-tree .hl, .ob-tree .root text { font-variant-numeric:oldstyle-nums proportional-nums; font-feature-settings:"onum" 1, "pnum" 1; }
.ob-pcell .k { color:var(--muted); }

/* graphs: crisp hairlines that stay hairlines when zoomed, and one muted accent for what is active */
.ob-tree, .ob-mm, .ob-graph svg, .ob-lg { shape-rendering:geometricPrecision; text-rendering:geometricPrecision; }
.ob-tree :is(path, line, circle), .ob-mm :is(path, circle), .ob-graph svg :is(line, circle, rect) { vector-effect:non-scaling-stroke; }
.ob-tree .trunk { stroke-width:1.6; stroke:color-mix(in srgb, var(--ink) 38%, transparent); }
.ob-tree .mergearrow, .ob-tree .ah { stroke-width:1.2; }
.ob-mm .mml { stroke-width:1.1; }
.ob-graph .edge { stroke-width:1; }
.ob-tree .onode.sel .dot, .ob-tree .mnode .dot, .ob-tree .onode.settledq .dot { fill:var(--ob-accent); stroke:var(--ob-accent); }
.ob-tree .onode .ring, .ob-tree .tip path { stroke:var(--ob-accent); }
.ob-tree .tip path { fill:var(--ob-accent); }
.ob-tree .mergearrow, .ob-tree .ah, .ob-tree .workarrow { stroke:var(--ob-accent); }
.ob-mm .mmrow.me circle:not(.hit), .ob-mm .mmrow.hot circle:not(.hit) { fill:var(--ob-accent); stroke:var(--ob-accent); }
.ob-mm .mml.me, .ob-mm .mml.hot, .ob-mm .mmarc path, .ob-mm .mmarc.hot path { stroke:var(--ob-accent); }
.ob-mm .mmarc text { fill:var(--ob-accent); }
.ob-graph .node.sel circle { fill:var(--ob-accent); stroke:var(--ob-accent); }
.ob-graph .edge.hot { stroke:var(--ob-accent); }

/* ── r32: Links as a tidy local graph around the day ── */
.ob-lday { width:100%; display:block; overflow:hidden; touch-action:none; cursor:grab; user-select:none; shape-rendering:geometricPrecision; }
.ob-lday.panning { cursor:grabbing; }
.ob-lday .hit { fill:transparent; }
.ob-lday .ll { stroke:color-mix(in srgb, var(--ink) 18%, transparent); stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke .2s ease, opacity .2s ease; }
.ob-lday .ll.day { stroke:color-mix(in srgb, var(--ink) 34%, transparent); stroke-width:1.3; }
.ob-lday .ll.q { stroke:color-mix(in srgb, var(--ob-accent, var(--purple)) 55%, transparent); }
.ob-lday .ll.tie, .ob-lday .ll.q.far { stroke:var(--ob-accent, var(--purple)); stroke-dasharray:4 4; }
.ob-lday .lnode { cursor:pointer; outline:none; transition:opacity .2s ease; }
.ob-lday .lnode text { font-family:var(--serif); font-size:13.5px; fill:var(--muted); paint-order:stroke; stroke:var(--ob-panel, var(--paper)); stroke-width:4px; stroke-linejoin:round; transition:fill .2s ease; font-variant-numeric:oldstyle-nums; }
.ob-lday .lnode .dot { fill:var(--ob-panel, var(--bg)); stroke:color-mix(in srgb, var(--ink) 48%, transparent); stroke-width:1.3; vector-effect:non-scaling-stroke; transition:fill .2s ease, stroke .2s ease; }
.ob-lday .lnode.date .dot { fill:var(--ink); stroke:var(--ob-panel, var(--bg)); stroke-width:2; }
.ob-lday .lnode.date text { fill:var(--ink); font-weight:600; font-size:14px; }
.ob-lday .lnode.main .dot { stroke-width:3; }
.ob-lday .lnode.main .halo { fill:none; stroke:color-mix(in srgb, var(--ink) 14%, transparent); stroke-width:1; }
.ob-lday .lnode.main text { font-size:16px; }
.ob-lday .lnode.date.far .dot { fill:color-mix(in srgb, var(--ink) 55%, var(--paper)); }
.ob-lday .lnode.date.far text { font-weight:500; fill:var(--ink-soft); }
.ob-lday .lnode.me .dot { fill:var(--ob-accent, var(--purple)); stroke:var(--ob-panel, var(--bg)); stroke-width:2.5; }
.ob-lday .lnode.me text { fill:var(--ink); font-weight:600; }
.ob-lday .lnode.q .dot { fill:var(--ob-panel, var(--bg)); stroke:var(--ob-accent, var(--purple)); }
.ob-lday .lnode.q.done .dot { fill:var(--ob-accent, var(--purple)); }
.ob-lday .lnode.q text { font-style:italic; fill:color-mix(in srgb, var(--ob-accent, var(--purple)) 80%, var(--ink)); font-size:13px; }
.ob-lday.hov .lnode:not(.lit) { opacity:.22; }
.ob-lday.hov .ll:not(.lit) { opacity:.15; }
.ob-lday .lnode.lit text { fill:var(--ink); }
.ob-lday .ll.lit { stroke:var(--ob-accent, var(--purple)); }
.ob-lday .lnode:focus-visible .dot { stroke:var(--ob-accent, var(--purple)); stroke-width:2.5; }
.ob-lday.grow .lnode { animation:obLIn .55s var(--d) cubic-bezier(.34,1.4,.64,1) both; }
.ob-lday.grow .ll { animation:egFade .5s calc(var(--d) + .1s) ease both; }
@keyframes obLIn { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .ob-lday.grow .lnode, .ob-lday.grow .ll { animation:none; } }

/* ── Product only ── */
/* The app's section rules exempt #section-journal by name (".section.active:not(#section-overview):not(#section-journal)"),
   so on #section-studio they add a 56px gap, other padding and a staggered entrance the approval never had. Their two ids
   outrank the approved section rule; repeating the id three times lifts it above them. */
body:has(.hub-shell) #section-studio#section-studio#section-studio.section.active { display:flex !important; flex-direction:column !important; gap:0 !important; padding:16px var(--as-page-pad-x, 40px) 0 !important; overflow:visible !important; }
body:has(.hub-shell) #section-studio#section-studio#section-studio.section.active > * { animation:none; }
/* The chat dock lives on <body> (so it can float over the page); it shows only while Studio is open. */
body:not(.studio-on) #obDock { display:none !important; }
/* While the data loads, and if it cannot, the section says so in the house empty state. */
#section-studio.ob-wait > :not(.ob-loading) { display:none !important; }
#section-studio .ob-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:60vh; text-align:center; }
#section-studio .ob-loading h4 { font-family:var(--serif); font-size:22px; font-weight:500; margin:6px 0 0; color:var(--ink); }
#section-studio .ob-loading p { font-family:var(--serif); font-size:16px; color:var(--muted); margin:0; }
#section-studio .ob-loading .bi { font-size:26px; color:var(--purple); }