secondbrain-py 0.2.1__py3-none-any.whl

brain/quartz_overrides/quartz/styles/brain/_sidebar.scss

@@ -0,0 +1,468 @@
+// Brain sidebar polish — Lane C of the 2026 commonplace-book redesign.
+//
+// This file is installed at
+// `<vault>/.quartz/quartz/styles/brain/_sidebar.scss` by `brain vault
+// render --overlay` and pulled into the global SCSS via `custom.scss`'s
+// `@use "./brain/sidebar"` line.
+//
+// Scope of this file:
+//
+//   * Compact icon row in the LEFT sidebar — `Search`, `Darkmode`,
+//     `ReaderMode` rendered side-by-side as 32px square buttons with a
+//     consistent stroke / hover treatment. Stock Quartz draws each
+//     button with its own component CSS (different sizes, different
+//     hover behavior); this file levels them out without rewriting
+//     the components.
+//   * Sticky search header — `position: sticky; top: 0;` on the Flex
+//     row that holds the icon trio, so the search affordance stays in
+//     view as the explorer scrolls. Background `--surface-1` so the
+//     sticky header reads as a chrome band rather than running text.
+//   * Explorer tree indent guides — `border-left: 1px solid var(--rule)`
+//     on nested `<ul>` so the folder hierarchy reads at a glance,
+//     plus a smoother rotation transition on the fold caret.
+//   * RIGHT sidebar elevation — matching `--surface-1` background +
+//     `8px` border-radius on the ToC and Backlinks panels so they
+//     read as a pair with the graph component (which already styles
+//     itself in `graph.scss`). Padding follows the `0.6rem` plan spec.
+//
+// Scope NOT covered here:
+//
+//   * Surface tier baseline — `_surface.scss` (Lane A) already paints
+//     `.sidebar { background: var(--surface-1); }`. This file only
+//     refines the children.
+//   * Graph component visuals — owned by `graph.scss` and `Graph.tsx`.
+//     We don't restyle the graph itself; we only add card chrome to
+//     its sibling panels (ToC + Backlinks).
+//   * Cmd-K palette — owned by `_cmdk.scss` (Lane C, separate file)
+//     because its visual language (modal + backdrop) is large enough
+//     to warrant its own partial.
+//
+// Tokens consumed (all from `_tokens.scss`):
+//
+//   * `--surface-1`     — sticky header band + ToC/Backlinks card bg
+//   * `--rule`          — explorer indent guides + sticky header bottom rule
+//   * `--ink-0`/`--ink-2` — icon stroke + label colors
+//   * `--accent-soft`   — icon hover background
+//   * `--motion-fast`/`--motion-easing` — transitions
+
+// ---------------------------------------------------------------------------
+// 1. Compact icon row + sticky search header (LEFT sidebar)
+// ---------------------------------------------------------------------------
+//
+// Stock Quartz gives both sidebars a large top/bottom gutter via
+// `.page > #quartz-body .sidebar { padding: 6rem 2rem 2rem; }`.
+// Brain's denser wiki chrome needs the sidebar to start closer to the
+// viewport edge, while keeping the same horizontal rhythm.
+.page > #quartz-body .sidebar {
+  padding: 2rem;
+}
+
+// Stock Quartz renders the Search/Darkmode/ReaderMode trio inside a
+// `<div class="flex-component">` (rendered by `Component.Flex`). Each
+// child wraps a single button. We flatten visual sizing across the
+// three so they read as a single icon strip.
+//
+// The Flex container itself becomes the sticky band. `.sidebar.left`
+// already has `position: sticky` from base.scss; we layer this on top.
+
+.sidebar.left {
+  // brain: the Flex row that holds Search/Darkmode/ReaderMode is the
+  // first non-title flex-component child of the left sidebar. Pin it
+  // to the top so search remains reachable as the explorer scrolls.
+  // `top: 0` works because `.sidebar.left` is itself sticky to the
+  // viewport top — both elements share the same scrolling context.
+  > .flex-component {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    background: var(--surface-1);
+    // Subtle bottom hairline so the sticky band reads as a header rule
+    // rather than melting into the explorer below.
+    border-bottom: 1px solid var(--rule);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.4rem;
+  }
+}
+
+// Icon trio normalization. Quartz emits each control as a `<button>`
+// with a class that names the control (`.search-button`, `.darkmode`,
+// `.readermode`). We unify their box, hover, and focus treatment so
+// the row reads as a single component instead of three loose buttons.
+.sidebar.left {
+  // Search button — looks like an inline search input so the affordance
+  // is obvious (Linear variant feedback: icon-only button hid the
+  // search functionality from sight). Grows to fill its flex slot;
+  // the darkmode + readermode buttons stay icon-squares to its right.
+  .search-button {
+    box-sizing: border-box;
+    width: 100%;
+    height: 32px;
+    padding: 0 0.6rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.5rem;
+    background: var(--surface-2);
+    border: 1px solid var(--rule);
+    border-radius: 6px;
+    color: var(--ink-2);
+    cursor: pointer;
+    font-family: var(--bodyFont);
+    font-size: 0.875rem;
+    transition:
+      background var(--motion-fast) var(--motion-easing),
+      border-color var(--motion-fast) var(--motion-easing),
+      color var(--motion-fast) var(--motion-easing);
+
+    > svg {
+      width: 14px;
+      height: 14px;
+      stroke-width: 2;
+      flex-shrink: 0;
+      // Stock CSS sets `margin: 0 0.5rem` on the svg — kill it so the
+      // 0.5rem gap on the parent flex is the only spacing between
+      // icon and text (otherwise we get 0.5rem + 0.5rem stacked and
+      // the text gets pushed off the right edge of narrow sidebars).
+      margin: 0;
+    }
+
+    // Stock emits `<p>Search</p>` next to the magnifier. Stock CSS
+    // sets `display: inline; color: var(--gray); text-wrap: unset` on
+    // it; that's fine until we wrap the row in a flex container with a
+    // `gap`. In flex context, `display: inline` is treated as block,
+    // and an unconstrained text node CAN squeeze to its content width.
+    // Force the `<p>` visible by:
+    //   * explicit `display: block` so flex-layout treats it predictably,
+    //   * `flex: 1 1 auto` so it fills the remaining space after the icon,
+    //   * `min-width: 0` so it can shrink without overflowing,
+    //   * `text-wrap: unset` (preserve stock) so "Search" stays one line.
+    > p {
+      display: block;
+      flex: 1 1 auto;
+      min-width: 0;
+      margin: 0;
+      color: var(--ink-2);
+      font-weight: 400;
+      font-size: 0.875rem;
+      line-height: 1;
+      text-wrap: unset;
+    }
+
+    &:hover {
+      border-color: var(--ink-2);
+      color: var(--ink-1);
+
+      > p {
+        color: var(--ink-1);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-strong);
+      outline-offset: 2px;
+    }
+  }
+
+  // Darkmode + readermode stay as 32px icon squares — they're toggles,
+  // not search affordances, so the icon-only treatment is correct.
+  button.darkmode,
+  button.readermode {
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    color: var(--ink-1);
+    cursor: pointer;
+    transition:
+      background var(--motion-fast) var(--motion-easing),
+      border-color var(--motion-fast) var(--motion-easing),
+      color var(--motion-fast) var(--motion-easing);
+
+    > svg {
+      width: 18px;
+      height: 18px;
+      stroke-width: 2;
+    }
+
+    &:hover {
+      background: var(--accent-soft);
+      border-color: var(--rule);
+      color: var(--ink-0);
+    }
+
+    // Keyboard-only focus ring (mouse focus reads as click).
+    &:focus-visible {
+      outline: 2px solid var(--accent-strong);
+      outline-offset: 1px;
+    }
+  }
+}
+
+// Stock Quartz's search panel positioning recipe (`width: 65%` +
+// `margin-left/right: auto` inside an `inline-block` parent + the
+// container's own `position: fixed`) is unreliable in our cascade —
+// previous attempts via `display: flex; justify-content: center` and
+// then `position: absolute; left: 50%` both failed to center the panel
+// in practice. The robust path is to bypass stock's positioning
+// entirely on BOTH the wrapper and the inner space, and use explicit
+// fixed-position values.
+//
+// brain (Linear-variant feedback round 3):
+//   1. `display: block` on `.search-container.active` kills stock's
+//      `display: inline-block` (which can collapse the container to
+//      content-width despite its `width: 100vw` declaration).
+//   2. `.search-space` becomes its own `position: fixed` element
+//      anchored directly to the viewport via `left: 50%` + a
+//      `translateX(-50%)` offset — no parent cascade involvement.
+//      Width capped at 800px or 90vw so it reads as a focused modal
+//      on wide viewports, not a stretched bar.
+.search > .search-container.active {
+  display: block;
+}
+
+.search > .search-container > .search-space {
+  position: fixed;
+  left: 50%;
+  top: 12vh;
+  transform: translateX(-50%);
+  // brain (Linear-variant feedback round 4): bumped from min(800px, 90vw)
+  // to min(1100px, 90vw). On a 1440 viewport the previous 800px modal
+  // had 320px margin on each side — exactly matching the left sidebar
+  // width — which made the modal read as left-anchored against the
+  // sidebar even though it was geometrically centered on the viewport.
+  // 1100px wide × 1440 viewport leaves 170px margin per side, which
+  // visually presents as a properly-centered focused modal.
+  width: min(1100px, 90vw);
+  margin: 0;
+}
+
+// Linear-variant retint of the search panel inner card. Stock paints
+// `.search-space > *` with `var(--light)` (page bg) + a warm shadow
+// recipe; against our charcoal `--surface-0` the panel reads as a
+// flat extension of the page. Lift to `--surface-1` and trade the
+// shadow for an outline-style hairline so the panel actually looks
+// like an elevated modal in dark mode.
+.search > .search-container > .search-space > * {
+  background: var(--surface-1);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--rule);
+}
+
+.search > .search-container > .search-space > input {
+  background: var(--surface-1);
+  color: var(--ink-0);
+  border: 1px solid var(--rule);
+}
+
+// ---------------------------------------------------------------------------
+// 2. Explorer tree polish — indent guides + smoother fold transition
+// ---------------------------------------------------------------------------
+//
+// Stock Quartz already paints a `border-left: 1px solid var(--lightgray)`
+// on `.folder-outer > ul` (see upstream `explorer.scss`). We re-pin
+// the rule color to `--rule` so it tracks the redesign tokens, lift
+// the indent slightly so deep trees read clearly, and smooth the
+// fold-icon rotation.
+
+.explorer-content {
+  .folder-outer > ul {
+    border-left: 1px solid var(--rule);
+    margin-left: 8px;
+    padding-left: 0.8rem;
+  }
+}
+
+.folder-icon {
+  // brain: stock sets a 0.3s linear-ease transition; bump easing to
+  // the shared smooth-out-quint so the rotation feels paper-like
+  // rather than mechanical.
+  transition: transform var(--motion-mid) var(--motion-easing);
+}
+
+// brain: folder file-count badge — appended after `.folder-title` by
+// `quartz_overrides/quartz/components/scripts/explorer.inline.ts`. Reads
+// as a dim subscript next to the folder name (e.g. "company-id  5"), so it
+// recedes against the title until you scan for it. Recursive count of
+// leaf descendants — what's actually visible under the folder, not the
+// raw contentIndex.
+.folder-count {
+  margin-left: 0.4em;
+  font-size: 0.8em;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-2);
+  // The badge sits inside `.folder-container > div`, alongside the
+  // title button/anchor. `vertical-align: baseline` is the default but
+  // explicit-align here so the count stays aligned even if a parent
+  // sets a different vertical-align rule.
+  vertical-align: baseline;
+}
+
+// Active note highlight — stock Quartz colors `.explorer-content li > a.active`
+// with `--tertiary`. Repaint to `--accent-strong` so the active
+// affordance tracks the link palette.
+.explorer-content ul li > a.active {
+  color: var(--accent-strong);
+}
+
+// brain: hover treatment parity for file links. Upstream paints
+// `.folder-container div > a:hover` and `.folder-icon:hover` with
+// `--tertiary`, but file `<li><a>` rows get no hover affordance — the
+// only way to tell what you're about to click is to follow the cursor.
+// Match the folder hover (repainted to `--accent-strong` for token
+// consistency) so every clickable thing in the explorer reacts the
+// same way to a hover.
+.explorer-content ul li > a {
+  transition: color var(--motion-fast) var(--motion-easing);
+
+  &:hover {
+    color: var(--accent-strong);
+    opacity: 1;
+  }
+}
+
+// Repaint the upstream `--tertiary` folder-link + folder-icon hovers
+// to `--accent-strong` so every explorer hover reads the same.
+.folder-container div > a:hover,
+.folder-icon:hover {
+  color: var(--accent-strong);
+}
+
+// ---------------------------------------------------------------------------
+// 3. RIGHT sidebar — card chrome + scroll + flex-shrink contract
+// ---------------------------------------------------------------------------
+//
+// The graph component already styles itself with the matching surface
+// + radius via `graph.scss`. ToC and Backlinks need the same
+// treatment so the right sidebar reads as a stack of four coordinated
+// panels rather than two flat rivers around a card.
+//
+// Stock markup: `<div class="toc">…</div>` + `<div class="backlinks">…</div>`,
+// plus the brain-overlay `<div class="brain-related-docs">…</div>` (Phase 5.2)
+// sandwiched between them. We paint each as a `--surface-1` card with
+// `8px` radius and `0.6rem` padding (per the plan spec). The shadow is
+// subtle (`--shadow-sm`) so panels don't compete with the article column.
+//
+// brain (2026-05-08): three coordinated additions to the right-sidebar
+// section close the long-standing "TOC swallows the whole sidebar" bug
+// reported on `/company-id/ai-adoption-complete-playbook` (22 ToC entries):
+//
+//   1. `.sidebar.right { overflow-y: auto; }` — upstream `base.scss`
+//      paints `.sidebar { height: 100vh; position: sticky; display: flex }`
+//      with NO `overflow-y` declared, so the fixed viewport-tall box
+//      silently CLIPS anything past the bottom edge. The TOC's own
+//      `<ul.toc-content.overflow>` only self-scrolls inside the TOC's
+//      flex slice — never the whole right-sidebar column. Declaring
+//      `overflow-y: auto` here gives the entire panel column a single,
+//      themed scrollbar that reaches every child (graph, ToC, related,
+//      backlinks). `overscroll-behavior: contain` keeps the page
+//      underneath from scrolling when the user rubber-bands inside the
+//      sidebar; `scrollbar-width: thin` + `--lightgray` thumb keeps the
+//      scrollbar reading as part of the sidebar chrome rather than the
+//      OS default.
+//
+//   2. `.sidebar.right > {graph,toc,brain-related-docs,backlinks} { flex: 0 0 auto }`
+//      — stops the flex-shrink fight. Stock `.toc { flex: 0 0.5 auto }`
+//      shrinks 0.5x; default `flex: 0 1 auto` on siblings shrinks 1x;
+//      `.brain-related-docs` deliberately takes `min-height: 0` so a
+//      packed related list can shrink inside its OWN section box —
+//      which, combined with the upstream sticky `.sidebar { height:
+//      100vh }` ceiling, made `.brain-related-docs` collapse all the
+//      way down to ~19px (DevTools-confirmed: `256 × 19px` rendering,
+//      header-only). Pinning all four direct children to `flex: 0 0
+//      auto` removes the fight: each child holds its natural size, and
+//      overflow lives on the sidebar itself (rule 1 above) instead of
+//      stealing height from siblings.
+//
+//   3. `.sidebar.right > .toc { max-height: 40vh }` — caps the TOC at
+//      ~40% viewport height so a 22-entry table of contents can't fill
+//      the sidebar even before the sidebar scroll kicks in. The
+//      upstream `.toc { overflow-y: hidden }` already clips, and the
+//      inner `<ul.toc-content.overflow>` already has `max-height:
+//      calc(100% - 2rem)` self-scrolling — bounded by our 40vh cap,
+//      that just works: an over-tall TOC scrolls inside the cap, not
+//      by stealing space from RelatedDocs / Backlinks. Pairs with the
+//      32vh cap on `.brain-related-docs-list` so on a typical viewport
+//      the entire right-sidebar stack fits at a glance.
+
+.sidebar.right {
+  // brain: rule 1 — make the sidebar scroll. Without this declaration
+  // the upstream `.sidebar { height: 100vh; position: sticky }` silently
+  // clips anything past the viewport edge, and TOC self-scroll only
+  // covers the TOC's own slice.
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--lightgray) transparent;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--lightgray);
+    border-radius: 2px;
+  }
+
+  .toc,
+  .backlinks {
+    background: var(--surface-1);
+    border-radius: 8px;
+    padding: 0.6rem 0.8rem;
+    box-shadow: var(--shadow-sm);
+    box-sizing: border-box;
+
+    // Section heading inside each card — Quartz emits `<h3>` for both
+    // ToC and Backlinks. Tighten the top margin so the heading sits
+    // close to the card edge rather than floating mid-air.
+    > h3 {
+      margin-top: 0;
+      margin-bottom: 0.4rem;
+      // brain (Linear): uppercase + tracking instead of small-caps.
+      // Cleaner tech feel; reads as a section label without the
+      // editorial small-caps voice.
+      font-weight: 600;
+      font-size: 0.7rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--ink-1);
+    }
+  }
+
+  // Backlinks list items — tighten leading so multiple backlinks
+  // stack as a compact reference list rather than running prose.
+  .backlinks ul li {
+    line-height: 1.4;
+    margin: 0.2rem 0;
+  }
+}
+
+// brain: rule 2 — stop the flex-shrink fight. The child-combinator `>`
+// is intentional so we only target direct children of the right
+// sidebar (avoids accidentally hitting nested ToC widgets if any).
+// Pinning all four to `flex: 0 0 auto` keeps each at its natural
+// height; the sidebar's `overflow-y: auto` above handles overflow.
+.sidebar.right > .graph,
+.sidebar.right > .toc,
+.sidebar.right > .brain-related-docs,
+.sidebar.right > .backlinks {
+  flex: 0 0 auto;
+}
+
+// brain: rule 3 — cap the TOC at 40vh. Note: the existing
+// `.sidebar.right { .toc, .backlinks { ... } }` block above already
+// paints the card chrome (background, border-radius, padding,
+// box-shadow) on `.sidebar.right .toc`. This rule is additive — keep
+// both. The child-combinator `>` scopes the cap to only the top-level
+// TOC inside the right sidebar.
+.sidebar.right > .toc {
+  // The upstream `.toc { overflow-y: hidden }` clips at this max-height,
+  // and the inner `<ul.toc-content.overflow>` (`max-height:
+  // calc(100% - 2rem)`) provides the user-facing scroll inside the cap.
+  max-height: 40vh;
+}

brain/quartz_overrides/quartz/styles/brain/_summary_lede.scss

@@ -0,0 +1,56 @@
+// Brain summary-lede styles — wave Q2-SUMMARY-WIKI.
+//
+// This file is installed at `<vault>/.quartz/quartz/styles/brain/_summary_lede.scss`
+// by `brain vault render --overlay` and loaded globally via
+// `custom.scss`'s `@use "./brain/summary_lede"` line.
+//
+// Renders the `<aside class="brain-summary-lede">` block (emitted by
+// `SummaryLede.tsx` when `frontmatter.summary` is a non-empty string)
+// as a soft TL;DR card above the article body. Visual weight stays
+// LOW so the lede doesn't compete with the page title for first
+// fixation — the eyebrow ("AI summary") uses the ink-2 muted tier,
+// and the body copy reads at the regular body type scale.
+//
+// The selector is anchored on the dedicated class so the rules only
+// fire on pages where `SummaryLede.tsx` renders. No `[data-*]` hooks
+// are needed — the component returns `null` when no summary is
+// present, so we never paint an empty aside.
+
+.brain-summary-lede {
+  // Surface card matching the related-docs panel — soft accent tint
+  // pulled from the design tokens, so a dark-mode swap inherits the
+  // right contrast for free.
+  background: var(--surface-1);
+  border-left: 3px solid var(--accent-strong);
+  border-radius: 6px;
+  padding: 0.65rem 0.9rem 0.75rem;
+  margin: 1rem 0 1.5rem;
+  // Same shadow tier as the related-docs section so the two cards
+  // read as siblings.
+  box-shadow: var(--shadow-sm);
+
+  // The eyebrow is a low-emphasis label — small caps + ink-2 muted
+  // tier so the title of the lede doesn't shout louder than the
+  // body. Display-block so it sits on its own line above the
+  // summary paragraph.
+  .brain-summary-lede-eyebrow {
+    display: block;
+    font-family: var(--displayFont);
+    font-weight: 600;
+    font-size: var(--fs-xs);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ink-2);
+    margin-bottom: 0.3rem;
+  }
+
+  // Body copy at the regular body type scale (no italic, no smaller-
+  // than-body shrinkage — the lede is a first-class read, not an
+  // afterthought).
+  .brain-summary-lede-body {
+    margin: 0;
+    color: var(--ink-1);
+    font-size: var(--fs-sm);
+    line-height: 1.55;
+  }
+}

brain/quartz_overrides/quartz/styles/brain/_surface.scss

@@ -0,0 +1,43 @@
+// Brain surface system — applies the three-tier surface scale defined
+// in `_tokens.scss` to the page chrome.
+//
+// Tier semantics:
+//   --surface-0 → page bg               (matches Quartz `--light`)
+//   --surface-1 → cards, sidebars       (one notch warmer)
+//   --surface-2 → inline code, popovers (one more notch warmer)
+//
+// Quartz's stock `body { background-color: var(--light); }` already
+// covers `--surface-0`. We re-pin it explicitly so the tier name
+// reads in any future audit and so swapping `--surface-0` in dark
+// mode propagates without relying on `--light` alignment.
+
+body {
+  background-color: var(--surface-0);
+}
+
+// Sidebars (left + right) sit on `--surface-1` so the article column
+// reads as the focal "page" against a slightly warmer chrome. The
+// shadow elevates the card without aggressive contrast.
+//
+// Quartz's stock markup is `<div class="sidebar left">` /
+// `<div class="sidebar right">` — selecting on `.sidebar` covers both.
+// Lane C (`sidebar.scss`) refines layout / spacing; this file owns
+// only the surface tier + elevation.
+.sidebar {
+  background-color: var(--surface-1);
+}
+
+// Inline code pops against the page bg with a one-step-warmer surface.
+// `code:not(pre code)` excludes code inside `<pre>` blocks (those get
+// their own surface treatment in Lane C `code.scss`).
+code:not(pre code) {
+  background-color: var(--surface-2);
+}
+
+// Popover bodies (footnotes, link previews) ride the same `--surface-2`
+// so the depth scale stays consistent across hover surfaces.
+// Quartz emits `.popover .popover-inner` for hover previews.
+.popover .popover-inner {
+  background-color: var(--surface-2);
+  box-shadow: var(--shadow-md);
+}

brain/quartz_overrides/quartz/styles/brain/_tag_content.scss

@@ -0,0 +1,118 @@
+// Brain tag-content styles — Phase 3.3 of the Wiki UX Overhaul.
+//
+// Layout for the per-tag listing rows produced by
+// `quartz_overrides/quartz/components/pages/TagContent.tsx`. The
+// component renders an `<ul class="brain-tag-results">` of
+// `<li class="brain-tag-row">` items, each containing:
+//   * an icon glyph,
+//   * a title,
+//   * a date column,
+//   * a 1-line snippet around the tag occurrence,
+//   * a `tagged: #...` footer.
+//
+// The grid below lays the icon / title / date in a single row across
+// the page width with the snippet wrapping on its own row underneath
+// (where a `&-snippet` slot is allocated). The footer floats a tiny
+// label + chip strip beneath each row.
+//
+// All class hooks are documented in the component file. Keep the two
+// in lock-step — a class rename here that's not mirrored there
+// silently degrades to unstyled markup.
+
+.brain-tag-results {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.brain-tag-row {
+  margin: 0 0 1.1rem 0;
+  padding: 0;
+  border-bottom: 1px dashed var(--lightgray);
+  padding-bottom: 0.6rem;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.brain-tag-row-link {
+  display: grid;
+  // brain: icon · title (flex) · date (auto) on the first row, snippet
+  // spans the full width on a second row. `auto-flow: row dense` lets
+  // the snippet drop cleanly underneath the title column without
+  // needing an explicit grid-area name.
+  grid-template-columns: auto 1fr auto;
+  column-gap: 0.6rem;
+  row-gap: 0.25rem;
+  align-items: baseline;
+  text-decoration: none;
+  color: inherit;
+
+  &:hover .brain-tag-title {
+    text-decoration: underline;
+  }
+}
+
+.brain-tag-icon {
+  font-size: 1.05rem;
+  line-height: 1;
+  // brain: nudge down a hair so the emoji baseline aligns with the
+  // title's text baseline (emoji glyphs sit slightly higher than Latin).
+  transform: translateY(0.05em);
+}
+
+.brain-tag-title {
+  font-weight: 600;
+  // brain: clamp the title to a single line — long thread titles
+  // ("Re: Re: Re: VP of Engineering — eve…") would otherwise wrap and
+  // shove the date column down.
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.brain-tag-date {
+  font-family: var(--codeFont, monospace);
+  font-size: 0.78rem;
+  color: var(--gray);
+  white-space: nowrap;
+}
+
+.brain-tag-snippet {
+  grid-column: 1 / -1;
+  font-size: 0.85rem;
+  color: var(--darkgray);
+  // brain: 1-line clamp — the snippet is meant to be a glance-sized
+  // peek, not a full description. The component already chunks the
+  // window down to ~200 chars, but on narrow viewports that can still
+  // overflow, so the clamp is the belt-and-suspenders guard.
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.brain-tag-footer {
+  margin: 0.3rem 0 0 0;
+  font-size: 0.78rem;
+  color: var(--gray);
+}
+
+.brain-tag-footer-label {
+  font-style: italic;
+  margin-right: 0.25rem;
+}
+
+.brain-tag-footer-link {
+  // brain: chip-style tag link — softens the underline `_links.scss`
+  // applies to internal anchors so the "tagged: #a #b #c" line reads
+  // as a meta strip rather than three competing CTAs.
+  text-decoration: none;
+  margin-right: 0.4rem;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}