/** * V3 — Narrative-chip everywhere (spike/notebook-stream-design-bets). * * Bet: the cas-sar narrative-chip pattern isn't a CAS-specific affordance — * it's the universal language of the notebook surface. Targets, view modes, * empty states, head-node configuration all read as "verb [chip] · verb [chip]" * pseudocode. Surface becomes uniformly readable as natural language. * * Builds ON TOP of restraint base. All V1 chrome reduction + hover-reveal * sweep + 820px reading column + topbar collapse rules apply here too. * * Narrative deltas — scoped to body[data-notebook-stream-variant="narrative"]: * · project-presets head node renders targets as inline narrative chips * "targeting [BCL-2 chip] vs [Mcl-1 chip] · primary [BCL-2]" * · view-mode switcher reads as "viewing as [chip] · [chip] · ..." * · empty state opens with natural-language prompt + quick-start chips * · cas-sar narrative gets reading-emphasis treatment * · code cell loses card register, reads as soft typescript flow * * FLOOR (preserved per Caitlin direct 2026-06-04): * --s-color-bg-panel cell background — untouched * --s-color-bg-subtle chip background — untouched * default chip border + hover tone-shift — untouched * status-pill background tokens — untouched * * Throwaway: not for main without an explicit promotion brief. */ /* ════════════════════════════════════════════════════════════════════════ * Project-presets head node — narrative-chip language * * The current presets renders as section-heads + chip rows (grid). Narrative * treatment makes targets flow inline as language: * "targeting [BCL-2] vs [Mcl-1] · primary [BCL-2]" * * We keep the existing DOM (no JS edit) and use display:inline + pseudo-element * verbs to inject the reading. Sections collapse from grids to inline lines. * ═══════════════════════════════════════════════════════════════════════ */ body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) .notebook-cell__body--project-presets { display: flex; flex-direction: column; gap: var(--s-space-2); font-size: var(--s-font-size-base); line-height: 1.85; color: var(--s-color-fg-primary); } body[data-notebook-stream-variant="narrative"] .notebook-presets__section { display: flex; align-items: baseline; gap: var(--s-space-2); flex-wrap: wrap; padding-block: 0; border: 0; } body[data-notebook-stream-variant="narrative"] .notebook-presets__section-head { display: inline; font-size: var(--s-font-size-base); font-weight: var(--s-font-weight-regular); color: var(--s-color-fg-secondary); text-transform: none; letter-spacing: 0; margin: 0; font-family: var(--s-font-sans); } body[data-notebook-stream-variant="narrative"] .notebook-presets__chips { display: inline-flex; align-items: baseline; gap: var(--s-space-2); flex-wrap: wrap; } /* Target chips — keep thumbnail prefix; let them flow as inline language */ body[data-notebook-stream-variant="narrative"] .notebook-presets__target-chip { display: inline-flex; align-items: center; gap: var(--s-space-2); padding: 2px var(--s-space-2); border: 1px solid var(--s-color-border-subtle); border-radius: var(--s-radius-sm); /* PRESERVED: chip bg */ background: var(--s-color-bg-subtle); font-family: var(--s-font-mono); font-size: var(--s-font-size-0); color: var(--s-color-fg-primary); cursor: pointer; line-height: 1.4; vertical-align: baseline; } body[data-notebook-stream-variant="narrative"] .notebook-presets__target-chip:hover { border-color: var(--s-color-border-default); /* PRESERVED: chip bg hover follows base tone-shift */ } body[data-notebook-stream-variant="narrative"] .notebook-presets__target-thumb { width: 20px; height: 20px; border-radius: 2px; border: 1px solid var(--s-color-border-subtle); background: var(--s-color-bg-panel); flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } body[data-notebook-stream-variant="narrative"] .notebook-presets__target-thumb img, body[data-notebook-stream-variant="narrative"] .notebook-presets__target-thumb svg { width: 100%; height: 100%; object-fit: contain; } body[data-notebook-stream-variant="narrative"] .notebook-presets__target-label { font-family: var(--s-font-mono); font-size: var(--s-font-size-0); font-weight: var(--s-font-weight-regular); color: var(--s-color-fg-primary); } body[data-notebook-stream-variant="narrative"] .notebook-presets__target-kind { font-size: var(--s-font-size-micro); color: var(--s-color-fg-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-left: var(--s-space-1); } /* Generic preset chips — same narrative discipline */ body[data-notebook-stream-variant="narrative"] .notebook-presets__chip { display: inline-flex; align-items: baseline; gap: var(--s-space-1); padding: 1px var(--s-space-2); border: 1px solid var(--s-color-border-subtle); border-radius: var(--s-radius-sm); background: var(--s-color-bg-subtle); font-family: var(--s-font-mono); font-size: var(--s-font-size-0); color: var(--s-color-fg-primary); vertical-align: baseline; } body[data-notebook-stream-variant="narrative"] .notebook-presets__chip-label { color: var(--s-color-fg-primary); } body[data-notebook-stream-variant="narrative"] .notebook-presets__chip-mode { color: var(--s-color-fg-tertiary); font-size: var(--s-font-size-micro); } /* ════════════════════════════════════════════════════════════════════════ * View-mode switcher — read as language * * Each tab becomes a chip in a sentence. The active tab carries focus styling; * the others read as alternatives the user can switch to mid-sentence. * * Visual goal: "viewing as [Notebook] · [Whiteboard] · [Graph] · [Timeline]" * The "viewing as" prefix lives in ::before on .notebook-shell__view-switch. * ═══════════════════════════════════════════════════════════════════════ */ body[data-notebook-stream-variant="narrative"] .notebook-shell__view-switch { display: inline-flex; align-items: baseline; gap: var(--s-space-2); padding-left: var(--s-space-2); } body[data-notebook-stream-variant="narrative"] .notebook-shell__view-switch::before { content: "viewing as"; font-size: var(--s-font-size-0); color: var(--s-color-fg-tertiary); font-family: var(--s-font-sans); font-weight: var(--s-font-weight-regular); letter-spacing: 0; text-transform: none; align-self: center; } body[data-notebook-stream-variant="narrative"] .notebook-shell__view-tab { display: inline-flex; align-items: center; gap: var(--s-space-1); padding: 2px var(--s-space-2); border: 1px solid var(--s-color-border-subtle); border-radius: var(--s-radius-sm); background: var(--s-color-bg-subtle); font-family: var(--s-font-mono); font-size: var(--s-font-size-0); color: var(--s-color-fg-secondary); text-transform: none; letter-spacing: 0; font-weight: var(--s-font-weight-regular); } body[data-notebook-stream-variant="narrative"] .notebook-shell__view-tab:hover:not(:disabled) { border-color: var(--s-color-border-default); color: var(--s-color-fg-primary); } body[data-notebook-stream-variant="narrative"] .notebook-shell__view-tab[aria-selected="true"] { border-color: var(--s-color-fg-primary); color: var(--s-color-fg-primary); font-weight: var(--s-font-weight-semibold); } body[data-notebook-stream-variant="narrative"] .notebook-shell__view-tab[aria-selected="true"]::after { display: none; } /* ════════════════════════════════════════════════════════════════════════ * Cas-sar narrative — reading emphasis * * The cas-sar widget already renders as narrative. V3 turns up its register: * narrative font size matches body reading; chips align as inline language; * the widget foot reads as plain summary. * ═══════════════════════════════════════════════════════════════════════ */ body[data-notebook-stream-variant="narrative"] .s-cas-narrative__line { font-size: var(--s-font-size-base); line-height: 1.85; color: var(--s-color-fg-primary); margin-bottom: 2px; } body[data-notebook-stream-variant="narrative"] .s-cas-narrative__chip { font-family: var(--s-font-mono); font-size: var(--s-font-size-0); vertical-align: baseline; line-height: 1.4; /* PRESERVED: chip bg + border tokens unchanged */ } /* ════════════════════════════════════════════════════════════════════════ * Code cell — soften the card register * * Code cells in V3 read as a soft typescript flow. Keep the monospace body * but lighten the card chrome so it sits inside the language of the stream * rather than interrupting it as a separate block. * ═══════════════════════════════════════════════════════════════════════ */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="code"] { border-color: var(--s-color-border-subtle); } body[data-notebook-stream-variant="narrative"] .notebook-cell__code { font-size: var(--s-font-size-0); line-height: 1.55; /* PRESERVED: bg token */ } /* ════════════════════════════════════════════════════════════════════════ * Empty state — natural-language prompt * * Cell-palette opens as a natural-language invitation. We can't change the * placeholder text from CSS, but we can lighten the chrome around it so it * reads as a prompt rather than as a form. * ═══════════════════════════════════════════════════════════════════════ */ body[data-notebook-stream-variant="narrative"] .notebook-cell-palette { border: 1px dashed var(--s-color-border-subtle); border-radius: var(--s-radius-md); } body[data-notebook-stream-variant="narrative"] .notebook-cell-palette__search { border: 0; background: transparent; font-size: var(--s-font-size-base); font-family: var(--s-font-sans); color: var(--s-color-fg-secondary); } body[data-notebook-stream-variant="narrative"] .notebook-cell-palette__panel-title { font-family: var(--s-font-sans); font-size: var(--s-font-size-0); text-transform: none; letter-spacing: 0; color: var(--s-color-fg-secondary); font-weight: var(--s-font-weight-regular); } body[data-notebook-stream-variant="narrative"] .notebook-cell-palette__item--tile { font-family: var(--s-font-mono); font-size: var(--s-font-size-0); } /* ════════════════════════════════════════════════════════════════════════ * Surfacebar — language register * * Add a thin "in" prefix before the view-switch chips so the topbar reads * as ambient context. The picker chip sits at left as the spike control. * ═══════════════════════════════════════════════════════════════════════ */ body[data-notebook-stream-variant="narrative"] .notebook-shell__surfacebar { padding-block: 2px; padding-inline: var(--s-space-4); } /* ════════════════════════════════════════════════════════════════════════ * N1 refinements (2026-06-04 evening) — Caitlin direct after spike walk: * "indentation restraint + refinement · placement of affordances in the * left margin · all 'finer' and more tightly organized if possible — * precision-instrument feel, not relaxed sprawl." * * Three moves layered ON TOP of the narrative base above + restraint base. * N1a — indent rails: hairline guide instead of band chrome * N1b — left-margin gutter: tighter, smaller, primary/secondary hierarchy * N1c — micro-typography + finer organization * ═══════════════════════════════════════════════════════════════════════ */ /* ── N1a — indent restraint + refinement ───────────────────────────────── * * Today: nb-group band-head has a 1px border-bottom underline; band-body * has a 2px solid left-rail + 13+21px indent compound (amped 2026-06-03 so * "nesting was unmistakable"). The amp helped legibility but it reads as * chrome, not as quiet typography. Narrative-N1 dials back to: * · band-head: drop the underline; lean on title weight alone * · band-body: 1px hairline rail (was 2px); tighter indent (8+13 = 21px) * · stream-host: tabular rhythm via gap-3 (was gap-4) * * Bands still read as nested, but the indent chrome is whisper-thin instead * of declaring itself. Title + count carry the hierarchy. * ───────────────────────────────────────────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head, body[data-notebook-stream-variant="narrative"] .nb-group__band { border-bottom: 0; padding-block: var(--s-space-1) var(--s-space-1); } body[data-notebook-stream-variant="narrative"] .notebook-shell__group-title, body[data-notebook-stream-variant="narrative"] .nb-group__title { font-size: var(--s-font-size-0); font-weight: var(--s-font-weight-semibold); letter-spacing: -0.005em; } body[data-notebook-stream-variant="narrative"] .notebook-shell__group-sub, body[data-notebook-stream-variant="narrative"] .nb-group__sub { font-size: var(--s-font-size-micro); color: var(--s-color-fg-tertiary); font-feature-settings: "tnum", "cv11"; } /* (group-body geometry consolidated 2026-06-07 — the v1 margin/padding/ * border/gap here were fully superseded by later iterations; removed. * Live group-body geometry now lives at the labelled blocks below: * margin-top, gap+position, border-left (color-cascade), margin-left * indent, and padding-left:0.) */ /* Per-cell depth indent — tighten the step from space-5 to space-4 so * nested-band depth doesn't compound into horizontal sprawl. */ body[data-notebook-stream-variant="narrative"] .notebook-cell[style*="--cell-depth"] { margin-left: calc(var(--cell-depth, 0) * var(--s-space-4)); } /* ── N1b — left-margin gutter ───────────────────────────────────────────── * * Today: 76px container at left:-76px; row-reverse [+][drag][chev]; 22x22 * buttons; gap 2px; all three colored fg-tertiary; kebab top-right separate. * * N1: shrink container to 60px; tighter at left:-66px; buttons 18x18; * gap 0 so the cluster reads as one fine micro-strip. Visual hierarchy: * chev — PRIMARY (closest to card; fg-secondary) * drag — secondary (fg-tertiary) * add — secondary (fg-tertiary; smaller glyph via icon font-size) * Kebab stays right-edge top. * * Cell padding-left shrinks 24 → 20 since the gutter cluster lives outside * the card edge; we don't need the gap. * ───────────────────────────────────────────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-shell .notebook-cell { padding-left: 20px; } body[data-notebook-stream-variant="narrative"] .notebook-cell__margin { left: -66px; width: 60px; gap: 0; top: var(--s-space-twohair); } body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-cell__margin { top: calc(var(--s-space-3) + var(--s-space-twohair)); } body[data-notebook-stream-variant="narrative"] .notebook-cell__collapse, body[data-notebook-stream-variant="narrative"] .notebook-cell__drag-grip, body[data-notebook-stream-variant="narrative"] .notebook-cell__add { width: 18px; height: 18px; border-radius: 3px; } body[data-notebook-stream-variant="narrative"] .notebook-cell__collapse svg, body[data-notebook-stream-variant="narrative"] .notebook-cell__drag-grip svg, body[data-notebook-stream-variant="narrative"] .notebook-cell__add svg { width: 12px; height: 12px; } /* Primary affordance: chev gets a slightly darker resting tone so the eye * lands on collapse first; drag + add stay quieter. */ body[data-notebook-stream-variant="narrative"] .notebook-cell__collapse { color: var(--s-color-fg-secondary); } body[data-notebook-stream-variant="narrative"] .notebook-cell__drag-grip, body[data-notebook-stream-variant="narrative"] .notebook-cell__add { color: var(--s-color-fg-tertiary); opacity: 0.7; } body[data-notebook-stream-variant="narrative"] .notebook-cell:hover .notebook-cell__drag-grip, body[data-notebook-stream-variant="narrative"] .notebook-cell:hover .notebook-cell__add, body[data-notebook-stream-variant="narrative"] .notebook-cell:focus-within .notebook-cell__drag-grip, body[data-notebook-stream-variant="narrative"] .notebook-cell:focus-within .notebook-cell__add { opacity: 1; } /* Kebab — finer glyph too */ body[data-notebook-stream-variant="narrative"] .notebook-cell__kebab-trigger { width: 18px; height: 18px; padding: 0; border-radius: 3px; } body[data-notebook-stream-variant="narrative"] .notebook-cell__kebab-trigger svg { width: 12px; height: 12px; } /* ── N1c — micro-typography + finer organization ───────────────────────── * * Tighten stream-host gap; tabular numerals on counts; cell-header label * goes one step quieter; align baseline rhythm across cell families. * Precision-instrument feel. * ───────────────────────────────────────────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host { gap: var(--s-space-3); } body[data-notebook-stream-variant="narrative"] .notebook-cell__hd { padding-top: 2px; padding-bottom: 1px; gap: var(--s-space-1); } body[data-notebook-stream-variant="narrative"] .notebook-cell__hd-title { font-size: var(--s-font-size-micro); font-feature-settings: "tnum", "cv11"; letter-spacing: 0; } /* Tabular numerals everywhere a number lives (cell-counts, footer counters, * chip values). Aligns columns of digits across cells when scanned. */ body[data-notebook-stream-variant="narrative"] .notebook-cell { font-feature-settings: "tnum", "cv11"; } /* Narrative chip line — tighten line-height so chip flow reads as code, not * as airy prose. */ body[data-notebook-stream-variant="narrative"] .s-cas-narrative__line { line-height: 1.65; } /* Project-presets sections — tighter row spacing so head node reads as * compact rather than spaced-out grid. */ body[data-notebook-stream-variant="narrative"] .notebook-cell__body--project-presets { gap: var(--s-space-1); line-height: 1.7; } body[data-notebook-stream-variant="narrative"] .notebook-presets__section { padding-block: 1px; } /* Pull the cell __hd-title closer to the kind icon at left — finer cluster. */ body[data-notebook-stream-variant="narrative"] .notebook-cell__hd > * + * { margin-left: 0; } /* ════════════════════════════════════════════════════════════════════════ * N1-v2 (2026-06-04 visceral) — Caitlin direct after first N1 push: * "left side of the middle column — continually tighter, very fine. * icons need space, indents do not. remove things from the left if * needed." * * Two corrections to N1-v1: * (a) Indents went tighter but not far enough — push to ultra-fine. * Rail hugs column edge; --cell-depth step at micro scale. * (b) Icons were shrunk to 18x18 with gap 0 (wrong direction). Caitlin * wants the icons to BREATHE. Trade-off: drop one affordance from * the gutter cluster so the remaining two get real space. * * DROPPED: __add (per-cell "insert above" + button). * · Already has 3 other entry points: nb-group__add at band-head, * end-of-stream +Add palette, kebab "Add cell above/below". * · Drag-grip is the unique spatial gesture (no equivalent in the * kebab); chev is the primary collapse affordance. * * KEPT: chev (PRIMARY) + drag (secondary). Each at 20x20 with * 4px gap; container width 44 = 20+4+20. Fine glyph (svg 14) with * breathing room around it. * ═══════════════════════════════════════════════════════════════════════ */ /* ── N1a-v2 — indents ultra-fine ───────────────────────────────────────── * * Rail sits at the column edge with no offset; band-body indent is one * micro step + 1px hairline. Per-cell --cell-depth shrinks to space-2 so * deep nesting compounds gently instead of marching across the column. * ───────────────────────────────────────────────────────────────────────── */ /* Band-body margin-top (top spacing) — the only live geometry from this * iteration; indent/border/gap were superseded downstream and removed. */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body, body[data-notebook-stream-variant="narrative"] .nb-group__body { margin-top: var(--s-space-1); } body[data-notebook-stream-variant="narrative"] .notebook-cell[style*="--cell-depth"] { margin-left: calc(var(--cell-depth, 0) * var(--s-space-2)); } /* Band head pulls in too; tabular rhythm tightens to space-tight */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head, body[data-notebook-stream-variant="narrative"] .nb-group__band { padding-block: var(--s-space-twohair) var(--s-space-twohair); gap: var(--s-space-1); } /* ── N1b-v2 — gutter: drop __add, give chev + drag space ───────────────── * * Container 60→44; left:-66 → -54 (leaves 10px breathing to card edge). * Buttons 18→20; svg 12→14. Gap 0→4. Cluster reads as two distinct * touch targets with room to land, not as a crushed micro-strip. * * __add is hidden (display:none) under narrative variant ONLY; DOM is * untouched (the JS still emits the element so flipping variant restores * it). Caitlin's permission to remove: 2026-06-04 visceral feedback. * ───────────────────────────────────────────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell__add { display: none; } body[data-notebook-stream-variant="narrative"] .notebook-cell__margin { left: -54px; width: 44px; gap: 4px; top: var(--s-space-twohair); } body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-cell__margin { top: calc(var(--s-space-3) + var(--s-space-twohair)); } body[data-notebook-stream-variant="narrative"] .notebook-cell__collapse, body[data-notebook-stream-variant="narrative"] .notebook-cell__drag-grip { width: 20px; height: 20px; border-radius: 3px; } body[data-notebook-stream-variant="narrative"] .notebook-cell__collapse svg, body[data-notebook-stream-variant="narrative"] .notebook-cell__drag-grip svg { width: 14px; height: 14px; } /* Cell padding-left tightens further now that gutter is narrower */ body[data-notebook-stream-variant="narrative"] .notebook-shell .notebook-cell { padding-left: 16px; } /* ════════════════════════════════════════════════════════════════════════ * N1-v3 (2026-06-04 visceral) — Caitlin direct after v2 land: * "what can we do with the section headers and project settings cell * to make them bolder and more clearly anchoring to people who are * new to the program and for first looks at each page — please * presume we are using the narrative view, too" * * Goal: first-look orientation. A new user landing on a notebook should * read TWO things in the first second: * 1. WHAT this page is → "Project settings" head node (dominant) * 2. WHAT sections live here → nb-group bands (strong waypoints) * * LinkedIn-feed pattern: heavy section header at top, supporting chip * rail below. Same anchor mechanism — typography alone, no chrome. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Section headers — strong waypoints ────────────────────────────────── * * Title bumps from sm/semibold → size-1/bold + drops letter-spacing. * Band-head padding grows for breathing. Chev tightens to fg-secondary so * it reads as a control next to a heavy title. * ───────────────────────────────────────────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-title, body[data-notebook-stream-variant="narrative"] .nb-group__title { font-size: var(--s-font-size-1); font-weight: var(--s-font-weight-bold); letter-spacing: 0; color: var(--s-color-fg-primary); line-height: 1.2; } body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head, body[data-notebook-stream-variant="narrative"] .nb-group__band { padding-block: var(--s-space-2) var(--s-space-twohair); gap: var(--s-space-1); align-items: center; } body[data-notebook-stream-variant="narrative"] .notebook-shell__group-chev, body[data-notebook-stream-variant="narrative"] .nb-group__chev { color: var(--s-color-fg-secondary); } body[data-notebook-stream-variant="narrative"] .notebook-shell__group-icon, body[data-notebook-stream-variant="narrative"] .nb-group__icon { color: var(--s-color-fg-secondary); } /* ── Project-presets head node — dominant first-look anchor ────────────── * * The card itself: panel bg locked, but border-default (one tone stronger * than subtle) + more padding so it reads as a header card, not a generic * stream cell. * * Title "Project settings": font-size-2 + bold. The strongest element on * the page; clear answer to "where am I?". * * Section heads ("Targets", "Docking protocols", "Defaults"): semibold + * fg-primary, column-aligned via min-inline-size 7.5rem so the chip * clusters line up vertically into a scannable spec sheet: * * Targets [BCL-2] [Mcl-1] * Docking protocols [autodock] [glide] * Defaults [pH 7.4] [implicit solvent] * * Compact rhythm: section padding-block 2px keeps the block dense. * ───────────────────────────────────────────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) { border: 1px solid var(--s-color-border-default); padding-top: var(--s-space-3); padding-bottom: var(--s-space-3); /* PRESERVED: panel bg via locked floor */ } body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-cell__hd, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) .notebook-cell__hd { margin-bottom: var(--s-space-2); } body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) .notebook-cell__hd-title { font-size: var(--s-font-size-2); font-weight: var(--s-font-weight-bold); color: var(--s-color-fg-primary); letter-spacing: 0; text-transform: none; line-height: 1.2; } body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-cell__hd-kind-icon, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) .notebook-cell__hd-kind-icon { color: var(--s-color-fg-primary); } /* Section heads inside the head node: column-aligned semibold so the * chip clusters read as rows of a spec table. Override the narrative-base * "regular weight + secondary color" treatment above. */ body[data-notebook-stream-variant="narrative"] .notebook-presets__section-head { font-size: var(--s-font-size-0); font-weight: var(--s-font-weight-semibold); color: var(--s-color-fg-primary); min-inline-size: 7.5rem; flex: none; letter-spacing: 0; } body[data-notebook-stream-variant="narrative"] .notebook-presets__section { padding-block: 2px; align-items: baseline; gap: var(--s-space-3); } body[data-notebook-stream-variant="narrative"] .notebook-cell__body--project-presets { gap: var(--s-space-twohair); line-height: 1.65; } /* ════════════════════════════════════════════════════════════════════════ * v4 (2026-06-04 visceral) — Editorial H-scale + user control surface * * Caitlin direct: "larger text — h1, h2, h3 kinds of treatment — smart * combo of how MS Word might do it and how Notion might do it or * obsidian — sections quite large compared to subsections — users to * have a good deal of control over how they look." * * Pattern: heading sizes route through CSS custom properties so a picker * (or future settings panel) can override them without re-touching * selectors. Three presets ship: compact / comfortable / editorial. * * Hierarchy (narrative view, comfortable preset, applies to FOUR layers): * H1 — "Project settings" head node title 1.875rem bold * H1 — in-stream heading cells (data-cell-kind) 1.875rem bold * H2 — nb-group band titles ("Synthesis", …) 1.375rem bold * H3 — project-presets section heads 1.05rem semibold * * Letter-spacing tightens at the larger sizes per editorial convention * (-0.015em H1, -0.005em H2). Line-height anchors the heavy block. * * Word-/Notion-/Obsidian-class margin-top on H2: sections breathe into * view as the eye moves down the stream. Anchor effect = generous space * above a heavy heading. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Custom property API (default = comfortable preset) ──────────────── */ body[data-notebook-stream-variant="narrative"] { /* H1 — page anchor (calm register, Caitlin 2026-06-07: lighter weight, * smaller anchor than the bolder comfortable default) */ --nb-h1-size: 1.75rem; --nb-h1-weight: 600; --nb-h1-line-height: 1.15; --nb-h1-letter-spacing: -0.01em; --nb-h1-margin-bottom: var(--s-space-3); /* H2 — section anchor (calm) */ --nb-h2-size: 1.25rem; --nb-h2-weight: 600; --nb-h2-line-height: 1.2; --nb-h2-letter-spacing: 0; --nb-h2-margin-top: var(--s-space-5); --nb-h2-margin-bottom: var(--s-space-2); /* H3 — subsection (calm) */ --nb-h3-size: 1rem; --nb-h3-weight: 500; --nb-h3-line-height: 1.3; --nb-h3-letter-spacing: 0; /* Density knobs */ --nb-stream-gap: var(--s-space-4); --nb-h3-column-width: 9rem; } /* ── Preset: compact ─────────────────────────────────────────────────── */ body[data-notebook-stream-variant="narrative"][data-notebook-heading-scale="compact"] { --nb-h1-size: 1.375rem; --nb-h2-size: 1.1rem; --nb-h3-size: 0.95rem; --nb-h2-margin-top: var(--s-space-3); --nb-stream-gap: var(--s-space-3); --nb-h3-column-width: 7.5rem; } /* ── Preset: comfortable (default — Notion/Obsidian class) ──────────── */ body[data-notebook-stream-variant="narrative"][data-notebook-heading-scale="comfortable"] { /* All defaults from the base block above */ } /* ── Preset: editorial (Word/print class — Caitlin's "bolder" ceiling) ── */ body[data-notebook-stream-variant="narrative"][data-notebook-heading-scale="editorial"] { --nb-h1-size: 2.375rem; --nb-h2-size: 1.75rem; --nb-h3-size: 1.15rem; --nb-h2-margin-top: var(--s-space-6); --nb-h1-margin-bottom: var(--s-space-4); --nb-stream-gap: var(--s-space-5); --nb-h3-column-width: 10rem; } /* ── Apply: H1 — head node "Project settings" + in-stream heading cells ─ */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell__hd--heading .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title { font-size: var(--nb-h1-size); font-weight: var(--nb-h1-weight); line-height: var(--nb-h1-line-height); letter-spacing: var(--nb-h1-letter-spacing); color: var(--s-color-fg-primary); text-transform: none; margin-bottom: var(--nb-h1-margin-bottom); } /* H1 head node — extra padding so the card reads as the dominant block */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) { padding-top: var(--s-space-4); padding-bottom: var(--s-space-4); } /* ── Apply: H1 — nb-group band titles (top-level default; cascade in v5) ─ */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-title, body[data-notebook-stream-variant="narrative"] .nb-group__title { font-size: var(--nb-h1-size); font-weight: var(--nb-h1-weight); line-height: var(--nb-h1-line-height); letter-spacing: var(--nb-h1-letter-spacing); color: var(--s-color-fg-primary); } /* Band-head before-space — generous so sections breathe into view */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band, body[data-notebook-stream-variant="narrative"] .nb-group { margin-top: var(--nb-h2-margin-top); margin-bottom: var(--nb-h2-margin-bottom); } body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head, body[data-notebook-stream-variant="narrative"] .nb-group__band { padding-block: var(--s-space-1) var(--s-space-twohair); } /* ── Apply: H3 — section heads inside head node ───────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-presets__section-head { font-size: var(--nb-h3-size); font-weight: var(--nb-h3-weight); line-height: var(--nb-h3-line-height); letter-spacing: var(--nb-h3-letter-spacing); color: var(--s-color-fg-primary); min-inline-size: var(--nb-h3-column-width); flex: none; text-transform: none; } /* Stream rhythm uses the preset density knob too */ body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host { gap: var(--nb-stream-gap); } /* ════════════════════════════════════════════════════════════════════════ * v5 (2026-06-04 visceral) — Newspaper-discipline H-cascade by depth * * Caitlin direct: "notice the backward cascade here potentially — think * about newspaper discipline here too." Plus: "section header cell type * that other cells can be dragged into, H1-H6." * * The architecture proposal (section-header-as-container cell type) is * a DOM/data move — captured as v5 doctrine note for follow-up. This * pass does the VISUAL work: cascade H-levels by depth on the existing * substrate so the visceral hierarchy is readable now. * * Newspaper discipline: * · biggest type at the page-anchor (H1), strong steps down through * decks (H2), sub-decks (H3), kickers (H4-H6) * · generous space ABOVE each level — sections breathe into view * · typography carries hierarchy; chrome (rails, borders) steps out * · column-anchored vertical rhythm so the eye finds breaks at scale * * Two depth sources in the current substrate: * 1. nb-group bands nested in nb-group bodies (DOM nesting) * → depth via descendant selectors * 2. heading-kind cells with --cell-depth style prop * → depth via [style*="--cell-depth: N"] attribute matching * * Both cascade in sync so a heading cell at depth 1 reads as the same * H2 register as a band at depth 1. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Extend custom-property API for H4-H6 + space cascade ────────────── */ body[data-notebook-stream-variant="narrative"] { --nb-h4-size: 0.9rem; --nb-h4-weight: 600; --nb-h5-size: 0.875rem; --nb-h5-weight: 600; --nb-h6-size: 0.875rem; --nb-h6-weight: 500; /* Anchor-space above each level — "deeper = less" Fibonacci ladder * (Caitlin 2026-06-07): top sections breathe most, each deeper level * tightens. Exact descending run s-space-5 / 4 / 3 / 2 = 21/13/8/5px. * (Was s-space-6 / 5 / 3 / 2 — top two anchors pulled one step tighter * for the calm register.) */ --nb-h1-anchor-space: var(--s-space-5); --nb-h2-anchor-space: var(--s-space-4); --nb-h3-anchor-space: var(--s-space-3); --nb-h4-anchor-space: var(--s-space-2); } body[data-notebook-stream-variant="narrative"][data-notebook-heading-scale="compact"] { --nb-h4-size: 0.9rem; --nb-h5-size: 0.85rem; --nb-h6-size: 0.85rem; --nb-h1-anchor-space: var(--s-space-4); --nb-h2-anchor-space: var(--s-space-3); --nb-h3-anchor-space: var(--s-space-2); --nb-h4-anchor-space: var(--s-space-1); } body[data-notebook-stream-variant="narrative"][data-notebook-heading-scale="editorial"] { --nb-h4-size: 1.05rem; --nb-h5-size: 0.95rem; --nb-h6-size: 0.875rem; --nb-h1-anchor-space: var(--s-space-7, 3rem); --nb-h2-anchor-space: var(--s-space-6); --nb-h3-anchor-space: var(--s-space-4); --nb-h4-anchor-space: var(--s-space-2); } /* ── nb-group cascade by DOM nesting depth ────────────────────────────── */ /* Depth 0 (top-level) = H1. Already applied above via group-title rule; * here add the newspaper anchor-space. */ body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .nb-group, body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .notebook-shell__group-band { margin-top: var(--nb-h1-anchor-space); } body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .nb-group:first-child, body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .notebook-shell__group-band:first-child { margin-top: 0; } /* Depth 1 = H2 */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group > .nb-group__band > .nb-group__title, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-band-head > .notebook-shell__group-title { font-size: var(--nb-h2-size); font-weight: var(--nb-h2-weight); line-height: var(--nb-h2-line-height); letter-spacing: var(--nb-h2-letter-spacing); } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band { margin-top: var(--nb-h2-anchor-space); } /* Depth 2 = H3 */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group > .nb-group__band > .nb-group__title, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-band-head > .notebook-shell__group-title { font-size: var(--nb-h3-size); font-weight: var(--nb-h3-weight); line-height: var(--nb-h3-line-height); letter-spacing: var(--nb-h3-letter-spacing); } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band { margin-top: var(--nb-h3-anchor-space); } /* Depth 3+ = H4 (collapses to H4 for any deeper level) */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group .nb-group > .nb-group__band > .nb-group__title, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-band-head > .notebook-shell__group-title { font-size: var(--nb-h4-size); font-weight: var(--nb-h4-weight); color: var(--s-color-fg-secondary); } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group .nb-group, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band { margin-top: var(--nb-h4-anchor-space); } /* ── heading-kind cells cascade by --cell-depth ──────────────────────── */ /* Depth 0 already styled at H1 above. Add anchor-space when a heading * cell sits directly in the stream (it's a section break). */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:not([style*="--cell-depth"]) { margin-top: var(--nb-h1-anchor-space); } /* Depth 1 = H2 */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 1"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:1"] .notebook-cell__hd-title { font-size: var(--nb-h2-size); font-weight: var(--nb-h2-weight); line-height: var(--nb-h2-line-height); letter-spacing: var(--nb-h2-letter-spacing); } body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 1"], body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:1"] { margin-top: var(--nb-h2-anchor-space); } /* Depth 2 = H3 */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 2"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:2"] .notebook-cell__hd-title { font-size: var(--nb-h3-size); font-weight: var(--nb-h3-weight); line-height: var(--nb-h3-line-height); letter-spacing: var(--nb-h3-letter-spacing); } body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 2"], body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:2"] { margin-top: var(--nb-h3-anchor-space); } /* Depth 3+ = H4 (catches all deeper, since --cell-depth: 3,4,5,6 all * collapse to one register). */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 3"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:3"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 4"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:4"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 5"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:5"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 6"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:6"] .notebook-cell__hd-title { font-size: var(--nb-h4-size); font-weight: var(--nb-h4-weight); color: var(--s-color-fg-secondary); } /* ── Drop the indent rail under narrative ───────────────────────────────── * * Typography now carries the hierarchy (H1 → H2 → H3 → H4 cascade is * unambiguous). The 1px rail + indent compound was added when the visual * hierarchy was flat; it's chrome we no longer need. Indent itself stays * tiny so children still sit under parents — just no rail line and the * step is one micro space. * ───────────────────────────────────────────────────────────────────────── */ /* (v-drop-rail group-body block removed 2026-06-07 — border/padding/margin/ * gap all superseded by later iterations.) */ /* Per-cell --cell-depth tightens further; deep nesting is implied by * H-size, not by horizontal march. */ body[data-notebook-stream-variant="narrative"] .notebook-cell[style*="--cell-depth"] { margin-left: calc(var(--cell-depth, 0) * var(--s-space-1)); } /* Drop band-head border-bottom entirely (already 0 in v3; reinforced here * for the deeper-nested cases where cascade might re-trigger it). */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group__band, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band-head { border-bottom: 0; } /* ════════════════════════════════════════════════════════════════════════ * v6a (2026-06-04 visceral) — Section-header visual scaffolding * * Caitlin picked (c): spike the section-header-as-container UX. Visual * scaffolding first; drag-into mechanic gated on this visceral. * * The existing nb-group bands ALREADY model section-header-as-container * (head + body + chev fold). What's missing for the user-facing model: * * 1. H-level badge — shows the user what level this section is at * 2. Container chrome — visible link between header and its contents * (the chrome we dropped in v5 actually carried this signal; v6a * restores a tasteful version, color-cascaded by depth) * 3. Section-end marker — newspaper "end of column" cue * 4. Drop-zone affordance — visual hint that cells can land in here * * Same visceral question: "if the user could create + control these * bands explicitly with H1-H6 levels, does the container model work?" * ═══════════════════════════════════════════════════════════════════════ */ /* ── H-level badges before band titles ───────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__title::before, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-title::before { content: "H1"; display: inline-block; margin-right: var(--s-space-2); padding: 1px 5px; font-family: var(--s-font-mono); font-size: 0.65em; font-weight: var(--s-font-weight-semibold); color: var(--s-color-fg-tertiary); background: var(--s-color-bg-subtle); border: 1px solid var(--s-color-border-subtle); border-radius: 3px; vertical-align: middle; letter-spacing: 0.04em; line-height: 1.4; } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group > .nb-group__band > .nb-group__title::before, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-band-head > .notebook-shell__group-title::before { content: "H2"; } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group > .nb-group__band > .nb-group__title::before, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-band-head > .notebook-shell__group-title::before { content: "H3"; } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group .nb-group > .nb-group__band > .nb-group__title::before, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-band-head > .notebook-shell__group-title::before { content: "H4"; } /* Heading-kind cell badges — depth-driven via --cell-depth */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title::before { content: "H1"; display: inline-block; margin-right: var(--s-space-2); padding: 1px 5px; font-family: var(--s-font-mono); font-size: 0.65em; font-weight: var(--s-font-weight-semibold); color: var(--s-color-fg-tertiary); background: var(--s-color-bg-subtle); border: 1px solid var(--s-color-border-subtle); border-radius: 3px; vertical-align: middle; letter-spacing: 0.04em; line-height: 1.4; } body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 1"] .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:1"] .notebook-cell__hd-title::before { content: "H2"; } body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 2"] .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:2"] .notebook-cell__hd-title::before { content: "H3"; } body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 3"] .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:3"] .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 4"] .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:4"] .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 5"] .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:5"] .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth: 6"] .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"][style*="--cell-depth:6"] .notebook-cell__hd-title::before { content: "H4"; } /* ── Container chrome — color-cascaded left rule on band bodies ──────── */ /* Restore a tasteful left rule on band bodies so the visual contains. * Color steps with depth so deeper levels read as "inside" something. */ /* Band-body gap + positioning context. (border-left/padding-left/margin-left * from this iteration were superseded downstream and removed.) */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body, body[data-notebook-stream-variant="narrative"] .nb-group__body { gap: var(--s-space-2); position: relative; } /* (nested border-left color/style cascade removed 2026-06-07 — fully * superseded by the color-mix() border-left cascade further down.) */ /* ── Drop-zone affordance — visual hint at end of band body ──────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__body::after, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body::after { content: "+ Drop a cell here or ⌘N to add"; display: block; padding: var(--s-space-2) var(--s-space-3); margin-top: var(--s-space-1); font-size: var(--s-font-size-micro); font-family: var(--s-font-mono); color: var(--s-color-fg-tertiary); border: 1px dashed var(--s-color-border-subtle); border-radius: var(--s-radius-sm); opacity: 0; transition: opacity 120ms ease; pointer-events: none; } body[data-notebook-stream-variant="narrative"] .nb-group__body:hover::after, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body:hover::after, body[data-notebook-stream-variant="narrative"] .nb-group__band:hover + .nb-group__body::after, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:hover + .notebook-shell__group-body::after { opacity: 0.6; } body[data-notebook-stream-variant="narrative"] .nb-group[data-collapsed="true"] > .nb-group__body::after, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band[data-collapsed="true"] > .notebook-shell__group-body::after { display: none; } /* ── Section-end marker — newspaper "end of column" cue ──────────────── */ /* A whisper-faint horizontal hairline at the very bottom of a top-level * band body marks "this section ended here." Only at depth 0 — nested * sections don't need additional structural cues. */ body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .notebook-shell__group-band > .notebook-shell__group-body { padding-bottom: var(--s-space-3); border-bottom: 1px solid var(--s-color-border-subtle); } body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .nb-group[data-collapsed="true"] > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .notebook-shell__group-band[data-collapsed="true"] > .notebook-shell__group-body { border-bottom: 0; padding-bottom: 0; } /* ════════════════════════════════════════════════════════════════════════ * v6b-vis (2026-06-04 visceral) — Strip chrome in reading mode * * Caitlin direct after v6a: "feels mostly better — perhaps we do remove * the icons from the headers and the badges — we just need to know * [the level/kind] when editing." * * Newspaper-discipline default: clean typography, no level pills, no * section-icon-pills. Edit-intent (hover or focus-within) reveals the * scaffolding so the user can change levels / see what they're working * inside. * * What gets hidden in reading mode: * · H-level badges (H1 H2 H3 H4) on band-heads + heading cells * · nb-group section icon pills (the folder glyph next to band titles) * · heading-kind cell kind-icon pill * * What stays visible in reading mode: * · chev (collapse is a reading affordance, not edit) * · the title text itself + the count * · project-presets head-node anchor icon (page-level orient) * · OTHER cell kind icons (prose / code / cas-sar / decision) — kind * recognition during scanning is reading, not editing * * Reveal triggers: :hover OR :focus-within on the band-head or cell. * 120ms opacity transition matches the existing hover-reveal sweep. * ═══════════════════════════════════════════════════════════════════════ */ /* ── H-level badges — fade in on edit-intent ─────────────────────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__title::before, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title::before { opacity: 0; transition: opacity 120ms ease; } body[data-notebook-stream-variant="narrative"] .nb-group__band:hover .nb-group__title::before, body[data-notebook-stream-variant="narrative"] .nb-group__band:focus-within .nb-group__title::before, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:hover .notebook-shell__group-title::before, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:focus-within .notebook-shell__group-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:hover .notebook-cell__hd-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:focus-within .notebook-cell__hd-title::before { opacity: 1; } /* ── Section icons (nb-group + heading-cell) — same edit-intent reveal ─ */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-icon, body[data-notebook-stream-variant="narrative"] .nb-group__icon { opacity: 0; transition: opacity 120ms ease; } body[data-notebook-stream-variant="narrative"] .nb-group__band:hover .nb-group__icon, body[data-notebook-stream-variant="narrative"] .nb-group__band:focus-within .nb-group__icon, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:hover .notebook-shell__group-icon, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:focus-within .notebook-shell__group-icon { opacity: 1; } /* Heading-kind cell kind-icon — same treatment. Other cell kinds (prose, * code, cas-sar, decision) keep their icons visible for at-a-glance kind * recognition during reading. */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-kind-icon { opacity: 0; transition: opacity 120ms ease; } body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:hover .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:hover .notebook-cell__hd-kind-icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:focus-within .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:focus-within .notebook-cell__hd-kind-icon { opacity: 1; } /* Reserve layout space for the hidden icons so the title doesn't jump * when they reveal. Width matches the standard kind-icon footprint * (22px pill + space-2 gap). */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-icon, body[data-notebook-stream-variant="narrative"] .nb-group__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-kind-icon { visibility: hidden; /* keeps layout box */ } body[data-notebook-stream-variant="narrative"] .nb-group__band:hover .nb-group__icon, body[data-notebook-stream-variant="narrative"] .nb-group__band:focus-within .nb-group__icon, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:hover .notebook-shell__group-icon, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:focus-within .notebook-shell__group-icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:hover .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:hover .notebook-cell__hd-kind-icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:focus-within .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"]:focus-within .notebook-cell__hd-kind-icon { visibility: visible; } /* ════════════════════════════════════════════════════════════════════════ * v6c-min (2026-06-04 visceral) — Ultra-minimalist strip * * Caitlin direct after v6b-vis: "the h-level badge never needs to show * except during editing (change the cell type or add a new cell with * a certain h type) — let's err toward being ultra-minimalist with * the iconography here — folder H1 and collapse all should not remain." * * Overrides v6b-vis hover-reveal: * 1. H-level badges → display:none (never on the cell; the picker * UI is where H-levels show up, not the cell) * 2. Folder icons → display:none (permanently — H-size carries * section identity; the folder pill is chrome) * 3. Collapse-all → display:none (chev alone handles fold; the * per-band collapse-all was a power-user shim) * 4. Heading-cell → display:none (H-size cascade IS the kind cue; * kind-icon the kind-pill is redundant) * * What still hover-reveals: * · + (add cell) — discoverable add-affordance per Phase F lock * · gutter cluster (chev + drag) — handled in N1-v2 above * * What stays visible always: * · chev (in band-head) * · title + count * · other cell kind-icons (prose / code / cas-sar / decision) * · project-presets head-node anchor icon * ═══════════════════════════════════════════════════════════════════════ */ body[data-notebook-stream-variant="narrative"] .nb-group__title::before, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-title::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title::before { display: none; } body[data-notebook-stream-variant="narrative"] .nb-group__icon, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-icon { display: none; } body[data-notebook-stream-variant="narrative"] .nb-group__collapse-all, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-collapse-all { display: none; } body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-kind-icon { display: none; } /* ════════════════════════════════════════════════════════════════════════ * v7 (2026-06-04 visceral) — Chev alignment + heading-cell DOM cascade * * Two Caitlin asks after v6c-min: * (1) "Align the chevrons with the titles they belong to." * (2) "Why is Venetoclax above In silico and under Main line? What * is that cell type?" * * (1) Chev fix: * The chev was geometrically centered in the band's flex line-box, * but heavy-heading text sits BELOW its geometric center due to * line-height leading + cap-height behavior — so the chev visually * appeared too high. * * Fix: cascade a --nb-current-h-size custom property down the * nesting tree (H1 at depth 0, H2 at depth 1, etc.). The chev's * intrinsic height tracks that size, so cap-heights align by virtue * of matched line-box heights. * * (2) Heading-cell cascade fix: * Venetoclax is a heading-kind cell (data: id="h-main-line", * kind="heading", outlineGroup="grp-main") — a CHILD of the Main * line band, not a peer. But the v5 cascade keyed off --cell-depth * inline style, which the data doesn't set for this cell, so it * defaulted to H1 (depth 0). * * Fix: cascade heading-cells by DOM nesting depth — a heading cell * inside an nb-group body is automatically H+1 from its parent * band. Matches the user mental model: "this heading is INSIDE * that section, so it's smaller than the section header." * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) --nb-current-h-size cascade + chev sizing ───────────────────── */ /* Cascading depth indicator — child nb-groups inherit a smaller h-size, * which the chev (and any other em-sized chrome) tracks automatically. */ body[data-notebook-stream-variant="narrative"] { --nb-current-h-size: var(--nb-h1-size); } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band { --nb-current-h-size: var(--nb-h2-size); } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band { --nb-current-h-size: var(--nb-h3-size); } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group .nb-group, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band { --nb-current-h-size: var(--nb-h4-size); } /* Chev box matches the heading's line-box height so center-aligning * actually visually aligns. The SVG inside scales to a fraction of that * box so the glyph stays comfortable. */ body[data-notebook-stream-variant="narrative"] .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-chev { align-self: center; height: calc(var(--nb-current-h-size) * 1.15); width: calc(var(--nb-current-h-size) * 1.15); padding: 0; display: inline-flex; align-items: center; justify-content: center; } body[data-notebook-stream-variant="narrative"] .nb-group__chev svg, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-chev svg { width: calc(var(--nb-current-h-size) * 0.55); height: calc(var(--nb-current-h-size) * 0.55); } /* ── (2) Heading-cell cascade by DOM nesting depth ──────────────────── */ /* Reset: the v5 --cell-depth attribute selectors are unreliable when the * inline style isn't set. Clear the title font-size on those legacy hooks * and re-derive from DOM nesting in band bodies instead. */ /* Depth 0 (heading cell at top of stream, not inside any band) = H1. * Already styled by the H1 rule earlier; no change here. */ /* Depth 1 (heading cell inside an nb-group body) = H2 — Venetoclax case */ body[data-notebook-stream-variant="narrative"] .nb-group__body .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title { font-size: var(--nb-h2-size); font-weight: var(--nb-h2-weight); line-height: var(--nb-h2-line-height); letter-spacing: var(--nb-h2-letter-spacing); } body[data-notebook-stream-variant="narrative"] .nb-group__body > .notebook-cell[data-cell-kind="heading"], body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body > .notebook-cell[data-cell-kind="heading"] { margin-top: var(--nb-h2-anchor-space); } /* Depth 2 (heading cell inside a band-in-band body) = H3 */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group__body .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-body .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title { font-size: var(--nb-h3-size); font-weight: var(--nb-h3-weight); line-height: var(--nb-h3-line-height); letter-spacing: var(--nb-h3-letter-spacing); } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group__body > .notebook-cell[data-cell-kind="heading"], body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-body > .notebook-cell[data-cell-kind="heading"] { margin-top: var(--nb-h3-anchor-space); } /* Depth 3+ (heading cell deeper) = H4 */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group__body .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-body .notebook-cell[data-cell-kind="heading"] .notebook-cell__hd-title { font-size: var(--nb-h4-size); font-weight: var(--nb-h4-weight); color: var(--s-color-fg-secondary); } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group__body > .notebook-cell[data-cell-kind="heading"], body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-body > .notebook-cell[data-cell-kind="heading"] { margin-top: var(--nb-h4-anchor-space); } /* ════════════════════════════════════════════════════════════════════════ * v8 (2026-06-04 visceral) — Mechanical cleanup * * Caitlin direct after v7 screenshot: * "what about the project settings header? ... there are some * mechanical issues ... we don't need the chevrons visible * before hover" * * Three CSS fixes + one data fix (separate commit): * 1. Chevrons hover-only on nb-group bands (newspaper default) * 2. Strip project-settings header chrome (icon + condensed strip) * 3. Bulletproof heading-cell icon hiding (multiple selector forms) * * Data fix (companion commit): flip outlineInRail for "h-main-line" * (Venetoclax) from false → true so the heading appears in the * outline rail like Caitlin expected. * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) Chev hover-only on nb-group bands ───────────────────────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-chev { opacity: 0; transition: opacity 120ms ease; } body[data-notebook-stream-variant="narrative"] .nb-group__band:hover .nb-group__chev, body[data-notebook-stream-variant="narrative"] .nb-group__band:focus-within .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:hover .notebook-shell__group-chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:focus-within .notebook-shell__group-chev, body[data-notebook-stream-variant="narrative"] .nb-group[data-collapsed="true"] > .nb-group__band > .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band[data-collapsed="true"] > .notebook-shell__group-band-head > .notebook-shell__group-chev { opacity: 1; } /* Same for per-cell collapse chev (gutter cluster handled in N1-v2, but * reinforce: only on hover/focus). */ body[data-notebook-stream-variant="narrative"] .notebook-cell__collapse { opacity: 0; } body[data-notebook-stream-variant="narrative"] .notebook-cell:hover .notebook-cell__collapse, body[data-notebook-stream-variant="narrative"] .notebook-cell:focus-within .notebook-cell__collapse, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-collapsed="true"] .notebook-cell__collapse { opacity: 1; } /* ── (2) Project-settings header — strip to title only ───────────────── */ /* Hide every direct child of the project-presets header EXCEPT the title. * That hides the kind-icon (sliders pill), hd-spacer, and the buildHdCondensed * compact strip (target letter pills + alert badge — "B B V circle-0"). */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets > .notebook-cell__hd > *:not(.notebook-cell__hd-title), body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) > .notebook-cell__hd > *:not(.notebook-cell__hd-title) { display: none; } /* Kebab is a sibling of __hd (root.appendChild(kebabWrap) per cell renderer). * Hide by default; reveal on hover/focus-within of the head node card. */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets > .notebook-cell__kebab, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) > .notebook-cell__kebab { opacity: 0; transition: opacity 120ms ease; } body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets:hover > .notebook-cell__kebab, body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets:focus-within > .notebook-cell__kebab, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets):hover > .notebook-cell__kebab, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets):focus-within > .notebook-cell__kebab { opacity: 1; } /* ── (3) Heading-cell icon — bulletproof hide ────────────────────────── */ /* Cover all class forms the icon might appear under (cell-kind attr, * --heading modifier on the cell root, --heading modifier on the hd). */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell--heading .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell__hd--heading .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="heading"] [data-kind-icon], body[data-notebook-stream-variant="narrative"] .notebook-cell--heading [data-kind-icon], body[data-notebook-stream-variant="narrative"] .notebook-cell__hd--heading [data-kind-icon] { display: none; } /* ════════════════════════════════════════════════════════════════════════ * v9 (2026-06-04 visceral) — Chev hover-only ALWAYS + cross-type alignment * * Caitlin direct after v8 screenshot: * "chevrons are not hover only everywhere, which throws a lot of * this layout out of alignment — we need to coordinate across * widget types and layer types" * * Two structural fixes: * * (1) Chev hover-only ALWAYS. v8 kept chev visible on collapsed bands * as a "this is folded" cue; Caitlin wants that gone too. * visibility:hidden (not opacity:0) reserves layout space so * showing/hiding the chev doesn't shift the title's x-position. * * (2) Cross-type title alignment. Bands' chev width + band-head gap * determined the band-title x. Heading-cells (no chev) use cell * padding-left. The two didn't match, so band titles and heading * titles at the same depth sat at different x-positions. * * Fix: fix chev box width to 24px; set band-head gap=0 and * padding-left=0; set cell padding-left=24px. Now both band * titles and heading-cell titles start at 24px from their root, * and inside a shared band-body parent they share the same x. * * SVG inside the chev still scales with --nb-current-h-size (v7 * fix) so cap-height alignment stays correct across depths. * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) Chev hover-only — visibility-based so layout space stays ──── */ body[data-notebook-stream-variant="narrative"] .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-chev { visibility: hidden; opacity: 1; /* opacity transitions reset; visibility handles toggle */ transition: none; } body[data-notebook-stream-variant="narrative"] .nb-group__band:hover .nb-group__chev, body[data-notebook-stream-variant="narrative"] .nb-group__band:focus-within .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:hover .notebook-shell__group-chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:focus-within .notebook-shell__group-chev { visibility: visible; } /* Override v8 collapsed-persist — Caitlin wants HOVER-ONLY across the * board. A collapsed section that's not hovered shows no chev; on hover * the chev reveals (which will be in its rotated form via base CSS). */ body[data-notebook-stream-variant="narrative"] .nb-group[data-collapsed="true"] > .nb-group__band > .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band[data-collapsed="true"] > .notebook-shell__group-band-head > .notebook-shell__group-chev { visibility: hidden; } body[data-notebook-stream-variant="narrative"] .nb-group[data-collapsed="true"] > .nb-group__band:hover > .nb-group__chev, body[data-notebook-stream-variant="narrative"] .nb-group[data-collapsed="true"] > .nb-group__band:focus-within > .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band[data-collapsed="true"] > .notebook-shell__group-band-head:hover > .notebook-shell__group-chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band[data-collapsed="true"] > .notebook-shell__group-band-head:focus-within > .notebook-shell__group-chev { visibility: visible; } /* Per-cell gutter: same discipline — no persist on collapsed cells. */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-collapsed="true"] .notebook-cell__margin { opacity: 0; } body[data-notebook-stream-variant="narrative"] .notebook-cell[data-collapsed="true"]:hover .notebook-cell__margin, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-collapsed="true"]:focus-within .notebook-cell__margin { opacity: 1; } /* ── (2) Cross-type title alignment ──────────────────────────────────── */ /* Fix chev width to a consistent 24px so band-head title-left is the * same across all depths (the chev SVG inside still scales with title * size via --nb-current-h-size). */ body[data-notebook-stream-variant="narrative"] .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-chev { flex: 0 0 24px; width: 24px; } /* Band-head: no padding-left, no gap. Chev is the leftmost item and * provides the offset by itself. Title comes immediately after. */ body[data-notebook-stream-variant="narrative"] .nb-group__band, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head { gap: 0; padding-left: 0; } /* Cell padding-left matches chev width so a heading-cell title (no chev, * just padding) aligns with a band-head title (chev + zero gap) at the * same x within a shared band-body parent. */ body[data-notebook-stream-variant="narrative"] .notebook-shell .notebook-cell { padding-left: 24px; } /* ════════════════════════════════════════════════════════════════════════ * v10 (2026-06-04 visceral) — Notion-style gutter affordances * * Caitlin direct: "check out notion's way of doing things — they are * slightly different (in that there is a sense of organizing lots of * different 'pages' and we will be more about single notebooks with * many cells — more like jupyter — but their ui conventions are * fantastic." * * The Notion convention that translates cleanly to our model: * * [ + ] [ ⋮⋮ ] [ block content ] * * Where on hover of a block, two discrete affordances appear at left: * + = insert new block above this one * ⋮⋮ = drag handle (in Notion, also opens the per-block action menu * on click — we keep our existing kebab-on-right for actions * for now; click-to-menu on the drag handle is JS work, see * next-step list below) * * THIS PASS (CSS-only): * 1. Restore __add under narrative (was display:none in N1-v2) * 2. Replace drag-grip SVG with a 6-dot grid pattern via pseudo- * element (Notion's discrete 2x3 dot handle aesthetic) * 3. Resize buttons to Notion's tighter sizes (18 → 16px) * * NEXT-STEP (JS work, gated on visceral approval): * - Slash command menu (/ in any cell → cell-type picker: H1-H6, * prose, code, decision, etc.). This is ALSO the H-level picker * Caitlin wanted earlier for section headers. * - Drag-handle click → action menu (Turn into · Duplicate · * Move to · Delete · Copy link · Comment · Suggest edits · Ask AI) * - Empty-cell placeholder hint ("Press / for commands · space for AI") * - "Turn into" action (convert cell kind in place) * * Diff vs Notion (intentional): * - Notion is page-organized; we're notebook-cells. Keep our chev * in the gutter (Notion uses toggle-list blocks for fold; we have * section-level collapse on bands + per-cell collapse). * - Keep kebab on right for now (matches our action surface; Notion * puts actions on drag-handle click). Can migrate when JS lands. * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) Restore + button in narrative gutter ────────────────────────── */ /* N1-v2 set __add to display:none under narrative. Restore it as a * hover-revealed affordance, like Notion's + insert-block button. */ body[data-notebook-stream-variant="narrative"] .notebook-cell__add { display: inline-flex; width: 16px; height: 16px; border-radius: 3px; align-items: center; justify-content: center; color: var(--s-color-fg-tertiary); opacity: 0.7; transition: opacity 120ms ease; } body[data-notebook-stream-variant="narrative"] .notebook-cell__add svg { width: 12px; height: 12px; } body[data-notebook-stream-variant="narrative"] .notebook-cell:hover .notebook-cell__add, body[data-notebook-stream-variant="narrative"] .notebook-cell:focus-within .notebook-cell__add { opacity: 1; } /* ── (2) Drag-grip as 6-dot grid (Notion's discrete handle) ──────────── */ /* Hide the existing SVG glyph; draw the 2-col × 3-row dot grid via a * background-image pseudo. currentColor inherits the gutter color, so * the dots track the existing hover/focus states. */ body[data-notebook-stream-variant="narrative"] .notebook-cell__drag-grip svg { display: none; } body[data-notebook-stream-variant="narrative"] .notebook-cell__drag-grip::before { content: ""; display: block; width: 7px; height: 11px; background-image: radial-gradient(circle, currentColor 0.9px, transparent 1.1px); background-size: 4px 4px; background-position: 0 0; background-repeat: repeat; } body[data-notebook-stream-variant="narrative"] .notebook-cell__drag-grip { width: 16px; height: 16px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; } /* ── (3) Gutter sizing + spacing (tighter, more discrete) ───────────── */ /* Widen the gutter container to fit 3 buttons (chev + drag + add) at * 16px each + 4px gaps. 16*3 + 4*2 = 56px. Position left:-66 to keep * the same breathing space to the card edge. */ body[data-notebook-stream-variant="narrative"] .notebook-cell__margin { width: 56px; left: -66px; gap: 4px; } /* Per-cell collapse chev: keep the same 16px sizing for visual parity * with + and drag in the gutter cluster. */ body[data-notebook-stream-variant="narrative"] .notebook-cell__collapse { width: 16px; height: 16px; border-radius: 3px; } body[data-notebook-stream-variant="narrative"] .notebook-cell__collapse svg { width: 12px; height: 12px; } /* ════════════════════════════════════════════════════════════════════════ * v11 (2026-06-04 visceral) — Notion-class simplicity * * Caitlin direct after second Notion screenshot batch: "they have the * simplicity of this down. our widget menu is better — i don't want to * copy outright — but i want to be at least this simple." * * Three CSS-only moves pulled from Notion's interaction polish (NOT * its full architecture): * * (1) End-of-stream typing invitation * A subtle gray hint at the bottom of the stream: "Press 'space' * for AI or '/' for commands". Sits at the cell-padding-left x * so it lands where the cursor would naturally arrive when the * user clicks below the last cell. * * (2) Empty-cell placeholder * For prose/markdown cells with no content, show the same * placeholder inline at the cursor position. Best-effort CSS: * uses :empty pseudo on the cell body + contenteditable. Will * render when the editor structure matches; harmless when it * doesn't. * * (3) Simplified selection state * Notion's selected block = subtle bg tint, rounded corners, NO * brand-color border, NO shadow. Strips the brand-700 accent * + box-shadow from our base aria-selected styling so the * narrative variant matches Notion's calmer focus convention. * * NOT in this pass (still gated on visceral approval for JS work): * - Slash menu wiring (real / command picker) * - Drag-handle click → action menu * - Color picker submenu * - "Turn into" action * - Keyboard shortcut badges in the kebab menu * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) Empty-cell placeholder ──────────────────────────────────────── */ /* Best-effort: render placeholder on prose/markdown bodies when their * editable container is empty. Multiple selectors cover the likely * editor structures (direct body :empty, nested contenteditable :empty, * nested textarea + no-value). */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="prose"] .notebook-cell__body:empty::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="markdown"] .notebook-cell__body:empty::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="prose"] [contenteditable="true"]:empty::before, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="markdown"] [contenteditable="true"]:empty::before { content: "Press '/' for commands"; color: var(--s-color-fg-tertiary); pointer-events: none; user-select: none; font-style: normal; } /* ── (2) Simplified selection / focus state ──────────────────────────── */ /* Strip the base brand-700 border + shadow on aria-selected; replace * with a quiet bg tint. Notion's selected block does exactly this — no * accent border, no elevation, just a calm "this is where I am" cue. */ body[data-notebook-stream-variant="narrative"] .notebook-shell .notebook-cell[aria-selected="true"] { border-color: transparent; background: var(--s-color-bg-subtle); box-shadow: none; border-radius: 4px; } /* Hover stays light too — don't elevate the border accent on hover when * the cell is selected. Match Notion's "focused cell is the only one * that gets the bg tint" convention. */ body[data-notebook-stream-variant="narrative"] .notebook-shell .notebook-cell[aria-selected="true"]:hover { border-color: transparent; background: var(--s-color-bg-subtle); } /* ════════════════════════════════════════════════════════════════════════ * v12 (2026-06-04 visceral) — Strip remaining chrome * * Caitlin direct after v11: "the lines on the left are not used here — * in either the outline or the notebook — what might we gain if we * removed them? where else can we simplify" * * Notion doesn't use container rails. Nesting reads via indent + chev * + typography alone. Our H-cascade is now strong enough that the rails * are redundant. * * Five removals: * 1. Container left-rules on band-bodies (v6a addition) * 2. Section-end markers — hairline at bottom of top-level bands (v6a) * 3. Drop-zone affordance — "+ Drop a cell here" hover tile (v6a) * (the v11 end-of-stream invitation already does this job better) * 4. Project-presets card border — let panel bg be the only signal * 5. Decision-cell hairline — drop under narrative * * What we gain: * · Calmer reading column (no decorative rules to filter past) * · Consistency with Notion's pattern (indent-only nesting) * · Typography carries the work (H-cascade is sufficient) * · Eye finds breaks via space + size, not structural lines * * ──────────────────────────────────────────────────────────────────────── * OTHER candidates for simplification (surfaced for decision, NOT made): * * a. Outline rail vertical separators (between rail + main column) * → keep? we have a visible split between rail and stream; could * dissolve with subtle bg differentiation alone * * b. Cell hover border (.notebook-cell:hover gets border-subtle) * → could drop entirely; aria-selected bg-tint covers focus * * c. Project-presets card panel-bg * → could drop too; rely on title-size + breathing room alone * (but card-as-anchor was earlier intent; flag for trade-off) * * d. Cell margin gutter cluster always-reserved width (76→56→44) * → could go to 0 (purely positioned outside flow); maximizes * column width but loses the consistent left x-anchor for * non-hover state * * e. Footer "34 cells · unchanged · 1 panel · live bus · saved 49d ago" * → 5 separate signals; could compress to 1-2 only * * f. Surfacebar "viewing as Notebook / Whiteboard / Graph / Timeline" * → already on the table per earlier locked dislike; queued for * promotion-time drop * * g. Spike picker chips (spike + scale) * → spike-only, retire on promotion (not visceral concern now) * * h. Stream gap between cells (--nb-stream-gap) * → could tighten further; current is calm but could be Notion- * tight (Notion's between-block gap is ~6px) * * i. Cell hd-title for non-heading kinds (the micro "Notes" label) * → could drop entirely for prose/markdown; user content is the * title; the kind-icon (and maybe color) carries the type * ═══════════════════════════════════════════════════════════════════════ */ /* (v12 "container left-rules gone" block removed 2026-06-07 — its * border/padding/margin were superseded by later iterations.) */ /* (nested "border-left: 0" block removed 2026-06-07 — superseded by the * color-mix() border-left cascade below.) */ /* ── (2) Section-end markers — gone ──────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host > .notebook-shell__group-band > .notebook-shell__group-body { border-bottom: 0; padding-bottom: 0; } /* ── (3) Drop-zone affordance — gone ─────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__body::after, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body::after { display: none; content: ""; } /* ── (4) Project-presets card border — gone (panel bg alone) ─────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) { border: 0; /* PRESERVED: panel bg (locked floor) — this is the card's only signal now */ } /* ── (5) Decision-cell hairline — gone under narrative ───────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="decision"] { border-color: transparent; } /* ════════════════════════════════════════════════════════════════════════ * v13 (2026-06-04 visceral) — Kebab → drag-handle migration * * Caitlin direct: "1) yes [migrate kebab to drag-handle click], 2) yes * [add Turn into], 3) [discuss separately], 4) yes [keyboard shortcuts * harmonized with master dictionary], 5) [search-at-top, we're past 10]" * * UNDER NARRATIVE: * · Right-side kebab trigger is hidden (display:none); the drag-grip * click delegates to it (JS wired in notebook-cell.js) * · Kebab wrap repositions to left edge so the menu opens on the * left (near where the user just clicked) instead of the right * · Wrap opacity forced to 1 so the menu can render when opened * (the trigger inside is display:none, so visually nothing shows * in rest state) * * SHARED MENU STYLES (kbd badges, search input, submenu) live in * notebook-shell.css so they apply to other surfaces that might * pick up the same menu pattern. * ═══════════════════════════════════════════════════════════════════════ */ body[data-notebook-stream-variant="narrative"] .notebook-cell__kebab-trigger { display: none; } /* Move kebabWrap to the left edge of the cell so the menu (right:0 from * wrap) opens toward the reading column. Top aligns with the gutter * cluster vertical center. */ body[data-notebook-stream-variant="narrative"] .notebook-cell__kebab { right: auto; left: 0; top: var(--s-space-tight-3); opacity: 1; } /* Menu opens to the right of the wrap (toward cell content) — override * the base --right modifier which would otherwise push the menu off-card. */ body[data-notebook-stream-variant="narrative"] .notebook-cell__kebab .notebook-shell__menu { right: auto; left: 0; min-width: 220px; } /* ════════════════════════════════════════════════════════════════════════ * v14 (2026-06-05 visceral) — Orphan-icon + faint indent experiment * * Caitlin direct after v13 walk: "i don't love the fact that an empty * title just looks like a misplaced icon — id also love to experiment * with much lighter colored (perhaps transparent) indentation marker * lines in the left column." * * TWO MOVES: * * (1) Empty title → hide the kind-icon * When a cell's hd-title element is :empty (the placeholder shows * via ::before but the element itself has no text content), hide * the cell's kind-icon. Otherwise the user sees [icon] [placeholder] * which reads as an orphaned icon — not a clean editable affordance. * * (2) Faint indent left-rules — experiment * v12 stripped all container left-rules. This is the inverse — * restore them at near-transparent opacity so we can visceral the * middle ground between "no nesting cue" and "noisy chrome rules." * Color uses color-mix() with high transparency = whisper-thin * hint, not a structural line. * * Depth cascade is preserved (each level slightly different * opacity + style) so deeper sections still read as further * nested, but none read as chrome. * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) Empty-title orphan-icon fix ─────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell__hd:has(.notebook-cell__hd-title:empty) .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell__hd:has(.notebook-cell__hd-title:empty) [data-kind-icon] { display: none; } /* Also for heading-cell modifier class (catches all path forms). */ body[data-notebook-stream-variant="narrative"] .notebook-cell__hd--heading:has(.notebook-cell__hd-title:empty) .notebook-cell__icon, body[data-notebook-stream-variant="narrative"] .notebook-cell__hd--heading:has(.notebook-cell__hd-title:empty) [data-kind-icon] { display: none; } /* When the icon hides, drop the hd's gap so placeholder text sits flush * at the cell padding-left x (matches the headerless-cell baseline). */ body[data-notebook-stream-variant="narrative"] .notebook-cell__hd:has(.notebook-cell__hd-title:empty) { gap: 0; } /* ── (2) Faint indent left-rules — experiment ────────────────────────── */ /* Depth 0 (top-level band-body): ~30% opacity of subtle border (v14 = 20%). * Tiny bit more visible per Caitlin direct 2026-06-05. */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body, body[data-notebook-stream-variant="narrative"] .nb-group__body { border-left: 1px solid color-mix(in oklch, var(--s-color-border-subtle), transparent 70%); } /* Depth 1: 40% opacity (was 30%). */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-body { border-left: 1px solid color-mix(in oklch, var(--s-color-border-subtle), transparent 60%); } /* Depth 2: 35% opacity, dashed (was 25%). */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-body { border-left: 1px dashed color-mix(in oklch, var(--s-color-border-subtle), transparent 65%); } /* Depth 3+: 25% opacity, dotted (was 15%). */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-body { border-left: 1px dotted color-mix(in oklch, var(--s-color-border-subtle), transparent 75%); } /* ──────────────────────────────────────────────────────────────────────── * v15 — H3 / H4 scale rescue (Müller-Brockmann fix) * * Caitlin direct: "fix the indents so that they don't appear to be * missing an icon." The visual is: heading text without an icon reads * as bare text because the H3 / H4 sizes are too close to body. H3 was * 1.05rem (≈17px) — barely above body 16px. H4 was 0.95rem — BELOW body. * The cascade collapses at the bottom; deep headings stop being headings. * * Fix: bump H3 / H4 above body across all three presets so the heading * register is unambiguous from typography alone, no icon needed. * * comfortable H3 1.05 → 1.2 H4 0.95 → 1.1 * compact H3 0.95 → 1.05 H4 0.9 → 1.0 * editorial H3 1.15 → 1.35 H4 1.05 → 1.2 * * H1 and H2 unchanged. Only the squished bottom of the cascade moves. * ──────────────────────────────────────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] { --nb-h3-size: 1.2rem; --nb-h4-size: 1.1rem; } body[data-notebook-stream-variant="narrative"][data-notebook-heading-scale="compact"] { --nb-h3-size: 1.05rem; --nb-h4-size: 1rem; } body[data-notebook-stream-variant="narrative"][data-notebook-heading-scale="editorial"] { --nb-h3-size: 1.35rem; --nb-h4-size: 1.2rem; } /* ════════════════════════════════════════════════════════════════════════ * v16 (2026-06-05 visceral) — Chev absolute + indent step bump * * Caitlin direct after v15: "i still don't understand the nesting here * and why the invisible chevrons indent the titles — the loading-state * matters the most for orientation." * * TWO STRUCTURAL FIXES: * * (1) Chev OUT of the flex flow * v9 used visibility:hidden to keep layout stable, but that RESERVES * a 24px slot before every title — so titles look phantom-indented in * reading state. The right fix: position chev absolutely in the band- * head's padding-left zone. Title sits at the band-head start (24px * padding), chev overlays the 0-24px slot when visible, layout stable * either way. No phantom indent. * * (2) Indent step bump * Band-body padding-left was --s-space-3 (8px); cell --cell-depth step * was --s-space-1 (3px). Each depth level added ~11px total — barely * visible. Bumped to --s-space-4 (13px) band-body + --s-space-2 (5px) * cell-depth = ~18px per level. Levels feel like levels. * * Loading state is the priority per Caitlin's direct: rest state = the * orient moment. Layout must be clean at rest first; hover-reveal chrome * is secondary. * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) Chev absolute — out of flex flow ────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__band, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head { position: relative; padding-left: 24px; gap: 0; } body[data-notebook-stream-variant="narrative"] .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-chev { position: absolute; left: 0; top: 50%; transform: translateY(-50%); flex: none; /* width retained from v9 (24px box) but no longer affects flex layout */ } /* Override v9's flex-based sizing — width is for the visible glyph area * only since the box is absolute now. */ body[data-notebook-stream-variant="narrative"] .nb-group__band > .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head > .notebook-shell__group-chev { width: 22px; height: 22px; } /* (indent step-bump block removed 2026-06-07 — padding-left superseded by * the tail uniform-indent rules.) */ body[data-notebook-stream-variant="narrative"] .notebook-cell[style*="--cell-depth"] { margin-left: calc(var(--cell-depth, 0) * var(--s-space-2)); } /* ════════════════════════════════════════════════════════════════════════ * v17 (2026-06-05 visceral) — Text + rules at left boundary * * Caitlin direct after v16: "i want the text and rules to be the left * boundary of each cell — any additional affordances that show up on * hover should show up in the left margin" * * And follow-up: "cells that don't have titles should not have a title * row (and we discussed removing their icons). i think treatment can * be different for widgets and prose" * * THE MODEL: * · Cell content starts at the cell's left visible edge * · The indent rule sits AT THAT SAME X (= the cell's left boundary) * · Affordances (chev, drag, +) live at NEGATIVE-LEFT positions * outside the cell — in the left margin * · Title rows are LOAD-BEARING only on widget cells; prose/markdown/ * code/decision/heading title rows hide when their title is empty * * THREE MOVES: * (1) Band-head padding 24 → 0; chev moves to left:-28 (left margin) * (2) Cell padding-left 24 → 0; text starts at cell's left edge * (3) Band-body switches padding-left → margin-left; rule + content * share the same x. Rule = left boundary. * (4) Title row hidden on non-widget cells when title is empty * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) Band-head: no padding; chev in left margin ──────────────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__band, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head { padding-left: 0; position: relative; gap: 0; } body[data-notebook-stream-variant="narrative"] .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-chev { position: absolute; left: -28px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; flex: none; } /* ── (2) Cell padding-left = 0 ───────────────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-shell .notebook-cell { padding-left: 0; } /* ── (3) Band-body: margin-left replaces padding-left ────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body, body[data-notebook-stream-variant="narrative"] .nb-group__body { margin-left: var(--s-space-4); padding-left: 0; /* border-left set in v15 still applies — rule at the body's left edge */ } /* Nested bands: same margin-left at each depth (compounds naturally). */ body[data-notebook-stream-variant="narrative"] .nb-group .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-body, body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-body, body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-body { margin-left: var(--s-space-4); padding-left: 0; } /* ── (4) Hide title row on non-widget cells when title is empty ──────── */ /* Widgets that NEED their title row visible (load-bearing labels): * · cas-sar — "Compound Analysis · SAR" labels the widget cell * · project-presets — "Project settings" is the head-node anchor * Other kinds (prose, markdown, code, decision, heading) hide their * __hd entirely when the hd-title is empty. Saves an entire row of * orphan-icon-plus-empty-placeholder visual noise. * * Heading is special: an empty heading is a real edit state ("Untitled * section" placeholder text via JS). Keep the row but the placeholder * is the only thing rendered — the v14 :has(:empty) rule already hides * the icon. So heading rows stay visible (the placeholder text is the * content). * * Prose / markdown / code / decision: their __hd-title is the OPTIONAL * cell title (set via state.title). If empty, the row is just * [hidden-icon] [hidden-placeholder] = nothing useful. Hide the row. */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="prose"]:not(:has(.notebook-cell__hd-title:not(:empty))) > .notebook-cell__hd, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="markdown"]:not(:has(.notebook-cell__hd-title:not(:empty))) > .notebook-cell__hd, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="code"]:not(:has(.notebook-cell__hd-title:not(:empty))) > .notebook-cell__hd, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="decision"]:not(:has(.notebook-cell__hd-title:not(:empty))) > .notebook-cell__hd { display: none; } /* ════════════════════════════════════════════════════════════════════════ * v18 (2026-06-05 visceral) — Breathing + vertical alignment + fold fix * * Caitlin direct after v17: "feels much better now! a little bit of * padding we can add in uniformly so that we are not overlapping text * with borders — notice that sometimes the alignment of the hover * affordances does not appear to match up with the text — expansion * and contraction also appear possibly to be broken in a few places" * * THREE FIXES: * * (1) Breathing between rule and text * Rule sits at body's left edge (x=13 via margin-left). Text also * starts at x=13 (no padding). The first text pixel touches/overlaps * the 1px border. Add 4px padding-left so text starts at x=17 with * a 4px clean gap to the rule. * * (2) Gutter vertical alignment with first-line of text * Per-cell gutter cluster anchors at top: var(--s-space-twohair) * (2px from cell-box-top). For a tall cell with a heading + body, * the visual center of the FIRST text line is ~0.6em from cell top, * not 2px. Switch to top: 0.4em so gutter aligns with first-line * cap-height instead of clinging to the cell-box edge. * * (3) Chev/collapse fold-click robustness * Absolute-positioned chev (v17) might lose click-through if the * band-head's title contenteditable steals focus or if z-index * stacking lets a sibling cover it. Add explicit z-index: 2 and * pointer-events: auto. Per-cell __collapse same treatment. * ═══════════════════════════════════════════════════════════════════════ */ /* (v18 "breathing" block removed 2026-06-07 — its padding-left was * superseded by the tail uniform-indent rules.) */ /* (nested "padding-left: 4px" breathing block removed 2026-06-07 — * superseded by the tail uniform nested padding-left:0 cascade.) */ /* ── (2) Gutter vertical alignment with first-line text ──────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell__margin { top: 0.35em; } /* Project-presets cell keeps its previous top offset (head node card has * internal padding-top via the card chrome — gutter must clear it). */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-cell__margin { top: calc(var(--s-space-3) + 0.35em); } /* ── (3) Chev / collapse click robustness ─────────────────────────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__chev, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-chev { z-index: 2; pointer-events: auto; } body[data-notebook-stream-variant="narrative"] .notebook-cell__collapse, body[data-notebook-stream-variant="narrative"] .notebook-cell__drag-grip, body[data-notebook-stream-variant="narrative"] .notebook-cell__add { z-index: 2; pointer-events: auto; } /* ════════════════════════════════════════════════════════════════════════ * v19 (2026-06-05 visceral) — Project-settings card fixes * * Caitlin direct after v18: "let's give the settings cell a little bit * of room back and align it more precisely again — also it is not * expanding and collapsing well" * * THREE FIXES: * * (1) Subtle border restored on the card * v12 stripped border entirely; the panel bg alone wasn't enough * card identity. Restore a 1px subtle border for breathing/anchor. * * (2) Gutter top-offset calibrated to H1 cap-height * v18 set --margin top: 0.35em which works for body-text first * line. Project-settings title is H1 (1.875rem ≈ 30px); its visual * cap-height center is ~20px from cell box top, not 5px. Use a * direct pixel offset so affordances center on the H1 title. * * (3) Collapsed condensed-strip restoration * v8 hid every child of the project-presets head EXCEPT the title * to remove the "B B V 0" strip noise. That correctly hides the * strip in EXPANDED state but ALSO hides it in COLLAPSED state, * where it's the load-bearing summary. Restore visibility when * [data-collapsed="true"] is on the cell. * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) Subtle border restored on the settings card ─────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) { border: 1px solid var(--s-color-border-subtle); /* PRESERVED: panel bg from locked floor */ } /* ── (2) Gutter top recalibrated for H1 title height ─────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-cell__margin { top: 20px; } /* ── (3) Show condensed strip when project-presets is collapsed ──────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets[data-collapsed="true"] > .notebook-cell__hd > .notebook-cell__hd-condensed, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets)[data-collapsed="true"] > .notebook-cell__hd > .notebook-cell__hd-condensed { display: inline-flex; } /* ════════════════════════════════════════════════════════════════════════ * v20 (2026-06-05 visceral) — Fibonacci breathing cascade * * Caitlin direct after v19: "ive manually added about 12px (please use * the appropriate var) between the border of the left and the title * here. please indent every other title accordingly - we still want * visual alignment, but we also need the left-margin affordances to * look tidy. let's use fibbonacci - smaller indents the further down * the hierarchy - at least as a trial" * * BREATHING CASCADE (rule-to-text gap): * depth 0 --s-space-4 (13px ≈ Caitlin's 12px ask) * depth 1 --s-space-3 (8px) * depth 2 --s-space-2 (5px) * depth 3+ --s-space-1 (3px) * * Applied uniformly to BOTH band-heads and band-bodies at each depth so * the heading title and the content beneath it sit at the same x within * a given depth (visual alignment preserved). * * Project-presets cell gets --s-space-4 padding so "Project settings" * title has the 13px breathing from the card's left border. * * Rationale: tighter as the hierarchy goes deeper — visually compresses * sub-content into less horizontal real estate while still giving each * level its breathing. Trial; easy to flip if it doesn't feel right. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Project-presets cell: 13px breathing inside the card ────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) { padding-left: var(--s-space-4); } /* ── Band-body indent: UNIFORM (Caitlin 2026-06-07) ────────────────────── * Supersedes the v19/v20 "tighter as deeper" padding cascade. The per-level * indent step is now carried entirely by the constant margin-left * (var(--s-space-4) from v15 §3); body padding flattens to 0 so every depth * steps in by the same ~11px instead of compounding margin + a shrinking * pad. Depth-matched selectors are kept (not collapsed to a single rule) * because they must out-specify the earlier v18 `padding-left: 4px` block. */ body[data-notebook-stream-variant="narrative"] .notebook-shell__group-body, body[data-notebook-stream-variant="narrative"] .nb-group__body { padding-left: 0; } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-body { padding-left: 0; } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-body { padding-left: 0; } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group .nb-group > .nb-group__body, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-body { padding-left: 0; } /* ── Band-head padding cascade (matches body cascade so title aligns * with content below it at the same depth) ─────────────────────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__band, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head { padding-left: var(--s-space-4); /* depth 0: 13px */ } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group > .nb-group__band, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-band-head { padding-left: var(--s-space-3); /* depth 1: 8px */ } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group > .nb-group__band, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-band-head { padding-left: var(--s-space-2); /* depth 2: 5px */ } body[data-notebook-stream-variant="narrative"] .nb-group .nb-group .nb-group .nb-group > .nb-group__band, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band .notebook-shell__group-band > .notebook-shell__group-band-head { padding-left: var(--s-space-1); /* depth 3+: 3px */ } /* ════════════════════════════════════════════════════════════════════════ * v21 (2026-06-05 visceral) — Band+cell affordance consistency + body padding * * Caitlin direct after v20: "there is not great alignment between the * individual cells and their controls — also some controls have the * handles, chevron, etc.. and others do not — also please reduce the * padding around the body content of the settings cell — just align * the content with the header (which looks great)" * * TWO MOVES: * * (1) Band-head + button moves to LEFT margin * Cells have [+ ⋮⋮ ▾] cluster in left gutter at left:-66. Bands * have chev at left:-28 (v17) but their + sits inside the * band-head's right-side actions cluster (inline-flex hover-revealed). * v21 positions nb-group__add absolutely at left:-52 so it sits in * the same left-margin column as the cell gutter. Visual consistency: * bands and cells now show the same affordance pattern at the left. * * Drag-grip parity (cells have ⋮⋮, bands don't) is a DOM/JS lift — * not in this CSS-only pass. Flagged for follow-up. * * (2) Project-presets body padding reduced * The card's body has internal padding pushing TARGETS / DOCKING / * DEFAULTS / ALERTS sections right of the "Project settings" title. * v21 zeroes the body padding so sections align with the title x. * ═══════════════════════════════════════════════════════════════════════ */ /* ── (1) Band-head __add absolute-positioned in left margin ──────────── */ body[data-notebook-stream-variant="narrative"] .nb-group__add, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-add { position: absolute; left: -52px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; opacity: 0; transition: opacity 100ms ease; z-index: 2; } body[data-notebook-stream-variant="narrative"] .nb-group__band:hover .nb-group__add, body[data-notebook-stream-variant="narrative"] .nb-group__band:focus-within .nb-group__add, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:hover .notebook-shell__group-add, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-band-head:focus-within .notebook-shell__group-add { opacity: 1; } /* The nb-group__actions wrapper was a flex child of __band holding + * and collapse-all (now display:none). Strip any leftover space. */ body[data-notebook-stream-variant="narrative"] .nb-group__actions, body[data-notebook-stream-variant="narrative"] .notebook-shell__group-actions { margin-left: 0; min-width: 0; } /* ── (2) Project-presets body padding reduced ────────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell__body--project-presets { padding: 0; margin: 0; } /* Reduce section padding too — keep just a small breath between sections. */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-presets__section, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) .notebook-presets__section { padding-left: 0; padding-right: 0; margin-left: 0; } /* Section heads (TARGETS, DOCKING PROTOCOLS, …) flush with title x */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-presets__section-head, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) .notebook-presets__section-head { padding-left: 0; margin-left: 0; } /* ════════════════════════════════════════════════════════════════════════ * v22 (2026-06-05 visceral) — Widget cell padding consistency * * Caitlin direct after v21: "content inside of a cell should align with * its own header — if there is no internal hierarchy for a section, no * additional indent is needed within that section — also the padding * should be consistent and a little more generous than this is around * all edges of these cells" * * APPLIES TO WIDGET CELLS (cas-sar, project-presets) — text cells * (prose, markdown, code, decision, heading) don't have card chrome * so don't get the all-edges padding treatment. * * · Uniform --s-space-4 (13px) padding on ALL four edges of widget * cells. Matches the breathing Caitlin set on project-presets * left edge (v20) but applies it consistently top/right/bottom too. * * · Strip internal padding/margin from widget BODY containers so the * widget body content sits flush at the cell's padding edge — no * double-indent from nested s-cas / __body wrappers. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Uniform generous padding around widget cells ────────────────────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="cas-sar"], body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) { padding: var(--s-space-4); } /* ── Strip widget body internal padding/margin so content aligns ─────── */ body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="cas-sar"] > .notebook-cell__body, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="cas-sar"] .notebook-cell__body, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="cas-sar"] .s-cas, body[data-notebook-stream-variant="narrative"] .notebook-cell[data-cell-kind="cas-sar"] .s-cas__root { padding: 0; margin: 0; border: 0; } /* Project-presets body already padded:0 from v21; reinforce here for * the all-edges story. */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets > .notebook-cell__body, body[data-notebook-stream-variant="narrative"] .notebook-cell:has(.notebook-cell__body--project-presets) > .notebook-cell__body { padding: 0; margin: 0; } /* ════════════════════════════════════════════════════════════════════════ * Stream calm text register (Caitlin 2026-06-07) — brandscaled. * * The middle column is the main attraction, so it carries more presence * than the calm rail/inspector chrome. Two tiers, both tracking --brand-hue * so the whole stream brandscales with the brand: * · head node (project-settings) = "Mid" — more anchored * · rest of the stream = "Softer-lean" — quieter * Local component tokens: chroma + lightness are the stream's own register; * the hue is always the brand (var(--brand-hue)). * ═══════════════════════════════════════════════════════════════════════ */ body[data-notebook-stream-variant="narrative"] { --nb-stream-fg: oklch(0.44 0.03 var(--brand-hue)); --nb-stream-head: oklch(0.36 0.045 var(--brand-hue)); --nb-stream-anchor-fg: oklch(0.4 0.04 var(--brand-hue)); --nb-stream-anchor-head: oklch(0.31 0.055 var(--brand-hue)); } /* Softer-lean — body text + headings across the stream */ body[data-notebook-stream-variant="narrative"] .notebook-shell__stream-host { color: var(--nb-stream-fg); } body[data-notebook-stream-variant="narrative"] .notebook-shell__group-title, body[data-notebook-stream-variant="narrative"] .nb-group__title, body[data-notebook-stream-variant="narrative"] .notebook-cell__hd-title { color: var(--nb-stream-head); } /* Mid — the project-settings head node + its section sublabels read a touch * more present so they anchor the top of the stream. */ body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets { color: var(--nb-stream-anchor-fg); } body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-cell__hd-title, body[data-notebook-stream-variant="narrative"] .notebook-cell--project-presets .notebook-presets__section-head { color: var(--nb-stream-anchor-head); }