/* BrainTrellis design system — dense dark "engineering notebook" (mindchuk-grade, refined).
   Hairline cards, monospace metadata, a clean grotesk for prose, one accent, full-bleed dense
   feed. Every surface references --bt-* RGB-channel theme vars (set inline per active theme,
   §6.1), so a theme switch (including imported VSCode themes) re-skins everything. */

/* ---- Vendored type (self-hosted; CSP font-src 'self') ------------------- */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/hanken-400.78c2be80e151.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/hanken-500.8d6eb9d4c9c2.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/hanken-700.f3223a1e6b4c.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/jbmono-400.caf0dfde4e44.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/jbmono-500.a21e038a03f7.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/plexsans-400.77bc02670657.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/plexsans-500.f7016cd446d2.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/plexsans-600.196e3cbc5fee.woff2") format("woff2"); }

:root {
  --bt-font: var(--bt-font-family, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif);
  --bt-mono: var(--bt-font-mono, "JetBrains Mono", ui-monospace, monospace);
  --bt-radius: var(--bt-card-radius, 0.55rem);
  --bt-r-sm: 0.4rem;
  /* Hairline but visible — like the reference. */
  --bt-line: rgb(var(--bt-border) / 0.8);
  --bt-line-strong: rgb(var(--bt-border) / 1);
  /* Pinned-card accent (warm gold), as RGB channels like every other token. */
  --bt-pin: 235 178 72;
  /* Legible secondary text: muted lifted toward the foreground. Several presets ship a very
     low-contrast muted token, so metadata/placeholders/chips read as barely-there. Blending
     toward --bt-text raises contrast uniformly across every theme from one knob. */
  --bt-text-soft: color-mix(in srgb, rgb(var(--bt-text-muted) / 1) 58%, rgb(var(--bt-text) / 1));
}

* { box-sizing: border-box; }
/* compact base, scaled by the --bt-zoom percent (font-size slider) — rem-based UI scales whole */
html { color-scheme: dark; font-size: calc(18px * var(--bt-zoom, 100) / 100); overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--bt-font);
  font-size: 0.92rem;
  line-height: 1.46;
  background: rgb(var(--bt-bg) / 1);
  color: rgb(var(--bt-text) / 1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Mobile guardrail: never allow horizontal page overflow ("wobble"). `clip` above is the
   final backstop; these keep long content (URLs, tokens, code, media) wrapping/contained so
   nothing is hidden by the clip. */
img, video { max-width: 100%; }
code { overflow-wrap: anywhere; }

/* Atmosphere: soft accent glow + faint dot grid behind everything (CSS-only). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(56rem 38rem at 84% -14%, rgb(var(--bt-accent) / 0.06), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(rgb(var(--bt-text) / 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

/* Base link color is the lowest-priority default. Wrapping the selectors in
   :where() drops their specificity to zero, so ANY component class on an anchor
   (.bt-cta, .bt-cta-lg, future button pills) wins in EVERY state — crucially
   :hover/:focus. Without this, bare a:hover (0,1,1) outranks a single class
   (0,1,0) and repaints button labels accent-on-accent (invisible) on rollover —
   a bug we kept re-patching per button. This fixes it project-wide, once. */
:where(a) { color: rgb(var(--bt-accent) / 1); text-decoration: none; }
:where(a:hover) { color: rgb(var(--bt-accent) / 0.82); }
::selection { background: rgb(var(--bt-accent) / 0.28); }
:focus-visible { outline: 2px solid rgb(var(--bt-accent) / 0.7); outline-offset: 2px; border-radius: 4px; }

/* ---- Header ------------------------------------------------------------- */
.bt-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
  background: rgb(var(--bt-bg) / 0.72);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--bt-line);
}
.bt-wordmark { display: inline-flex; align-items: center; }
.bt-wordmark-text { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: currentColor; }
.bt-logo { display: block; height: 40px; width: auto; }
.bt-nav { display: flex; gap: 0.5rem; align-items: center; font-size: 0.88rem; }
.bt-nav > a { padding: 0.32rem 0.6rem; border-radius: var(--bt-r-sm); color: rgb(var(--bt-text-muted) / 1); }
.bt-nav > a:hover { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 1); }
/* The CTA pill must keep its on-accent text color — .bt-nav>a (0,1,1) would otherwise
   win over .bt-cta (0,1,0) and paint the label muted, killing contrast in every theme. */
.bt-nav > a.bt-cta, .bt-nav > a.bt-cta:hover { color: rgb(var(--bt-bg) / 1); background: rgb(var(--bt-accent) / 1); }

/* Light/dark/system segmented switch — logged-out header (landing + allauth). */
.bt-themeseg { display: inline-flex; gap: 0.1rem; padding: 0.18rem; border-radius: 999px;
  background: rgb(var(--bt-surface) / 1); border: 1px solid var(--bt-line); }
.bt-themeseg button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 0.82rem; line-height: 1; min-width: 1.7rem; height: 1.55rem; padding: 0 0.35rem;
  color: rgb(var(--bt-text-muted) / 1); background: none; border: 0; border-radius: 999px;
  transition: color 0.12s ease, background 0.12s ease; }
.bt-themeseg button:hover { color: rgb(var(--bt-text) / 1); }
.bt-themeseg button[aria-pressed="true"] { background: rgb(var(--bt-accent) / 1); color: rgb(var(--bt-bg) / 1); }
/* Mobile: collapse text-size / theme / connections / profile into one hamburger menu. */
.bt-mobile-only { display: none; }
.bt-burger { position: relative; }
.bt-burger > summary { list-style: none; }
.bt-burger > summary::-webkit-details-marker { display: none; }
.bt-burger-menu { width: 15rem; max-height: 80vh; overflow-y: auto; }
/* Sticky header inside the (scrollable) menu so the ✕ close is always reachable. */
.bt-burger-head { position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  margin: -0.4rem -0.4rem 0.3rem; padding: 0.5rem 0.45rem 0.5rem 0.7rem;
  border-bottom: 1px solid var(--bt-line); border-radius: 0.7rem 0.7rem 0 0;
  background: rgb(var(--bt-surface-raised) / 1); }
.bt-burger-title { font-family: var(--bt-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgb(var(--bt-text-muted) / 0.9); }
.bt-burger-head .bt-burger-close { padding: 0.25rem 0.35rem; }
.bt-burger-close .bt-ico { width: 1.05rem; height: 1.05rem; }
.bt-burger-zoom { padding: 0.15rem 0.65rem 0.6rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--bt-line); }
@media (max-width: 640px) {
  .bt-desktop-only { display: none !important; }
  .bt-mobile-only { display: inline-flex; }
  /* Logged in, the door tabs fill the header; the wordmark would crowd them, so drop it.
     Logged out (landing/allauth) there are no tabs, so keep the wordmark. */
  .bt-header.is-authed .bt-wordmark { display: none; }
}
@media (max-width: 480px) {
  .bt-header { padding: 0.6rem 0.8rem; }
  .bt-nav { gap: 0.3rem; font-size: 0.84rem; }
  .bt-themeseg button { min-width: 1.5rem; padding: 0 0.22rem; }
}

/* ---- Buttons ------------------------------------------------------------ */
.bt-cta, .bt-cta-lg {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font: 500 0.88rem/1 var(--bt-font);
  background: rgb(var(--bt-accent) / 1); color: rgb(var(--bt-bg) / 1);
  border: 0; padding: 0.55rem 0.95rem; border-radius: var(--bt-r-sm);
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.bt-cta:hover, .bt-cta-lg:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgb(var(--bt-accent) / 0.28); }
/* Press feedback: darken + nudge on the down state, and drop the default mobile
   tap-highlight that flashed the button toward the page colour (making it look
   like it disappeared on tap). Applied to every brand button site-wide. */
.bt-cta, .bt-cta-lg, .bt-auth button, .bt-auth [type=submit], .bt-auth .bt-social-btn,
.bt-trialbar-cta { -webkit-tap-highlight-color: transparent; }
.bt-cta:active, .bt-cta-lg:active,
.bt-auth button:active, .bt-auth [type=submit]:active {
  transform: translateY(1px); filter: brightness(0.9); box-shadow: none; }
.bt-cta-lg { font-size: 1.02rem; padding: 0.75rem 1.4rem; border-radius: 0.6rem; }
.bt-danger { background: rgb(var(--bt-danger) / 1); }

/* Catchup — a tonal accent pill: accent text on a faint accent tint with a thin accent
   border. Deliberately one tier below the solid-accent Add button (the single primary
   "do" verb), so the two no longer read as competing co-primaries. Color/background/border
   are scoped under `.bt-nav > a` to beat the muted link defaults (same trick as `.bt-cta`);
   `display` rides the visibility variant so the mobile copy never leaks onto desktop. */
.bt-catchup {
  align-items: center; gap: 0.45rem; cursor: pointer;
  font: 600 0.9rem/1 var(--bt-font); border-radius: 999px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.bt-catchup .bt-ico { width: 1.05rem; height: 1.05rem; }
.bt-nav > a.bt-catchup, .bt-nav > a.bt-catchup:hover {
  color: rgb(var(--bt-accent) / 1);
  background: rgb(var(--bt-accent) / 0.12);
  border: 1px solid rgb(var(--bt-accent) / 0.45);
  padding: 0.42rem 0.9rem;
}
.bt-nav > a.bt-catchup.bt-desktop-only { display: inline-flex; }
.bt-nav > a.bt-catchup:hover { background: rgb(var(--bt-accent) / 0.2); border-color: rgb(var(--bt-accent) / 0.7); }
.bt-nav > a.bt-catchup:active { transform: translateY(1px); background: rgb(var(--bt-accent) / 0.26); }

/* ---- Account dropdown --------------------------------------------------- */
.bt-account { position: relative; }
.bt-account > summary { cursor: pointer; list-style: none; padding: 0.32rem 0.7rem;
  border: 1px solid var(--bt-line); border-radius: 999px; font-size: 0.84rem; color: rgb(var(--bt-text) / 1); }
.bt-account > summary::-webkit-details-marker { display: none; }
.bt-account[open] > summary { border-color: rgb(var(--bt-accent) / 0.6); }
.bt-menu {
  position: absolute; right: 0; margin-top: 0.5rem; min-width: 13rem; z-index: 50;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: 0.7rem; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}
.bt-menu a, .bt-menu button {
  padding: 0.5rem 0.65rem; border-radius: var(--bt-r-sm); text-align: left; font: inherit;
  background: none; border: 0; color: rgb(var(--bt-text) / 1); cursor: pointer;
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
}
.bt-menu a .bt-ico, .bt-menu button .bt-ico {
  width: 1.05rem; height: 1.05rem; color: rgb(var(--bt-text-muted) / 1); vertical-align: baseline;
}
.bt-menu a:hover, .bt-menu button:hover { background: rgb(var(--bt-bg) / 1); }

/* ---- Layout: wide + dense ---------------------------------------------- */
.bt-main { flex: 1 0 auto; width: 100%; max-width: 100rem; margin: 0 auto; padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2rem) 5rem; }
.bt-messages { list-style: none; padding: 0; margin: 0.75rem auto; max-width: 100rem; }
.bt-msg { padding: 0.6rem 0.9rem; border-radius: var(--bt-r-sm); margin-bottom: 0.4rem;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line); font-size: 0.9rem; }
.bt-msg.error { border-color: rgb(var(--bt-danger) / 0.5); color: rgb(var(--bt-danger) / 1); }

/* ---- Trial bar (persistent, sits under the sticky header) --------------- */
.bt-trialbar {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem 1rem;
  flex-wrap: wrap; padding: 0.4rem 1rem;
  font-size: 0.86rem; color: rgb(var(--bt-text) / 1);
  background: rgb(var(--bt-accent) / 0.12);
  border-bottom: 1px solid rgb(var(--bt-accent) / 0.28);
}
.bt-trialbar-expired {
  background: rgb(var(--bt-danger) / 0.12);
  border-bottom-color: rgb(var(--bt-danger) / 0.3);
}
.bt-trialbar-msg { font-weight: 500; }
.bt-trialbar-msg strong { font-variant-numeric: tabular-nums; font-weight: 700; }
.bt-trialbar-form { margin: 0; }
.bt-trialbar-cta {
  border: 0; cursor: pointer; white-space: nowrap;
  padding: 0.28rem 0.85rem; border-radius: 999px;
  font: 600 0.82rem var(--bt-font);
  background: rgb(var(--bt-accent) / 1); color: rgb(var(--bt-bg) / 1);
}
.bt-trialbar-cta:hover { filter: brightness(1.06); }
.bt-trialbar-cta:active { transform: translateY(1px); }

/* Entitlement status badge (Profile card header): trial / lifetime / expired */
.bt-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bt-badge {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
  margin-top: 0.2rem; padding: 0.28rem 0.7rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.bt-badge .bt-ico { width: 0.95rem; height: 0.95rem; }
.bt-badge-lifetime {
  color: rgb(var(--bt-accent) / 1);
  background: rgb(var(--bt-accent) / 0.12);
  border-color: rgb(var(--bt-accent) / 0.35);
}
.bt-badge-trial {
  color: rgb(var(--bt-text-muted) / 1);
  background: rgb(var(--bt-text-muted) / 0.1);
  border-color: var(--bt-line);
}
.bt-badge-expired {
  color: rgb(var(--bt-danger) / 1);
  background: rgb(var(--bt-danger) / 0.12);
  border-color: rgb(var(--bt-danger) / 0.3);
}

/* Unlock celebration modal (shown once after a successful purchase) */
.bt-celebrate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  background: rgb(0 0 0 / 0.5); backdrop-filter: blur(3px);
  animation: bt-celebrate-fade 0.2s ease-out;
}
.bt-celebrate-card {
  position: relative; width: min(30rem, 100%); text-align: center;
  padding: 2.4rem 2rem 2rem; border-radius: 1rem;
  background: rgb(var(--bt-surface) / 1); border: 1px solid var(--bt-line);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.4);
  animation: bt-celebrate-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.bt-celebrate-close { position: absolute; top: 0.7rem; right: 0.7rem; }
.bt-celebrate-logo {
  width: 96px; height: 96px; object-fit: contain; margin: 0 auto 0.4rem;
  filter: drop-shadow(0 8px 24px rgb(var(--bt-accent) / 0.35));
}
.bt-celebrate-title { margin: 0.4rem 0 0.6rem; font-size: 1.5rem; }
.bt-celebrate-lead { margin: 0 0 0.7rem; color: rgb(var(--bt-text) / 1); }
.bt-celebrate-sub { margin: 0 0 1.4rem; font-size: 0.92rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-celebrate .bt-cta-lg { width: 100%; }
@keyframes bt-celebrate-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bt-celebrate-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ---- Search + toolbar --------------------------------------------------- */
.bt-search-row { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; }
.bt-search {
  flex: 1; min-width: 0; padding: 0.8rem 1rem 0.8rem 2.6rem; font: 400 0.98rem var(--bt-font); color: rgb(var(--bt-text) / 1);
  background: rgb(var(--bt-surface) / 0.7)
    no-repeat 0.95rem center / 1rem
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23889" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>');
  border: 1px solid var(--bt-line); border-radius: 0.6rem; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.bt-search::placeholder { color: var(--bt-text-soft); opacity: 1; }
.bt-search:focus { outline: none; border-color: rgb(var(--bt-accent) / 0.7); background-color: rgb(var(--bt-surface) / 1); }
.bt-add { width: 3rem; flex: none; font-size: 1.3rem; cursor: pointer; color: rgb(var(--bt-bg) / 1);
  background: rgb(var(--bt-accent) / 1); border: 0; border-radius: 0.6rem; transition: filter 0.15s ease, box-shadow 0.15s ease; }
.bt-add:hover { filter: brightness(1.07); box-shadow: 0 6px 20px rgb(var(--bt-accent) / 0.3); }

.bt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
/* The interest ribbon pins under the sticky header on the Kept page so the current
   interest is always reachable while the feed scrolls. --bt-header-h is measured live
   in site.js (header height shifts with the font-size slider + the mobile breakpoint).
   The fill is page-bg at 0.85 — invisible at rest (same colour as the body behind it),
   a frosted occluder once cards scroll under it. The negative inline margin bleeds the
   fill to the content-column edges so nothing peeks past the tabs. */
.bt-tagfilter {
  position: sticky; top: calc(var(--bt-header-h, 4rem) - 1px); z-index: 30;
  margin: 0 calc(-1 * clamp(1rem, 3vw, 2rem)) 0.8rem;
  padding: 0.55rem clamp(1rem, 3vw, 2rem) 0;
  background: rgb(var(--bt-bg) / 0.85);
  backdrop-filter: saturate(140%) blur(12px);
}
/* The interest ribbon carries the active door's color (matching the tab button), so the selected
   interest + its sticky underline read in the same hue as the tab you're on. */
.bt-tagfilter-inbox { --bt-door-c: var(--bt-accent); }
.bt-tagfilter-todo  { --bt-door-c: var(--bt-type-checklist); }
.bt-tagfilter-keep  { --bt-door-c: var(--bt-type-link); }
.bt-theme-picker select { background: rgb(var(--bt-surface) / 1); color: rgb(var(--bt-text) / 1); font: inherit;
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); padding: 0.4rem 0.7rem; }

/* ---- Filter controls (scope row, active strip, tag disclosure, meta row) ---- */
.bt-ask-launch { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font: inherit;
  font-size: 0.85rem; color: rgb(var(--bt-accent) / 1); background: rgb(var(--bt-accent) / 0.1);
  border: 1px solid rgb(var(--bt-accent) / 0.4); border-radius: 0.6rem; padding: 0 0.95rem;
  transition: background-color 0.15s ease, border-color 0.15s ease; }
.bt-ask-launch:hover { background: rgb(var(--bt-accent) / 0.18); border-color: rgb(var(--bt-accent) / 0.7); }
.bt-ask-launch .bt-ico { width: 1rem; height: 1rem; }
/* On phones, collapse Ask AI to a square icon button (like +) so the search row fits. */
@media (max-width: 640px) {
  .bt-ask-launch-label { display: none; }
  .bt-ask-launch { width: 3rem; justify-content: center; padding: 0; gap: 0; }
  .bt-ask-launch .bt-ico { width: 1.25rem; height: 1.25rem; }
}

.bt-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.bt-active-label { font-family: var(--bt-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bt-text-soft); }
.bt-clear-filters { font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 1); text-decoration: underline; text-underline-offset: 2px; }
.bt-clear-filters:hover { color: rgb(var(--bt-danger) / 1); }

.bt-scope-interests { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

/* Interest TABS (single-home): a row of pseudo-tabs. The active tab is solid/emphasised; the rest
   are dimmed so the current home reads at a glance. Each tints to its interest palette when active. */
.bt-interest-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
  border-bottom: 3px solid rgb(var(--bt-door-c, var(--bt-accent)) / 0.6); padding-bottom: 0.5rem; }
.bt-interest-tab { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem;
  font-weight: 500; padding: 0.3rem 0.6rem; border-radius: 0.5rem; text-decoration: none;
  border: 1px solid transparent; color: rgb(var(--bt-text-muted) / 1); opacity: 0.6;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s; white-space: nowrap; }
.bt-interest-tab .bt-ico { width: 0.78rem; height: 0.78rem; }
.bt-interest-tab:hover { opacity: 1; color: rgb(var(--bt-text) / 1); }
.bt-interest-tab.is-active { opacity: 1; font-weight: 600;
  color: rgb(var(--bt-door-c, var(--bt-accent)) / 1);
  background: rgb(var(--bt-door-c, var(--bt-accent)) / 0.12);
  border-color: rgb(var(--bt-door-c, var(--bt-accent)) / 0.45); }
/* Non-desktop (any touch device — phones AND tablets, regardless of width — plus narrow
   windows): the ribbon is one nowrap row that scrolls left-right, scrollbar hidden. Desktop
   (hover + room) keeps the wrapping rows. (hover: none) matches the app's touch convention. */
@media (max-width: 720px), (hover: none) {
  .bt-interest-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .bt-interest-tabs::-webkit-scrollbar { display: none; }
  .bt-interest-tab { flex: none; }
}
/* Drag a card onto a tab to re-home it (single-home, desktop). */
.bt-card-dragging { opacity: 0.5; }
.bt-interest-tab.bt-tab-drop { opacity: 1; outline: 2px dashed rgb(var(--bt-accent) / 0.8);
  outline-offset: 1px; background: rgb(var(--bt-accent) / 0.16); }
/* The Unfiled pseudo-tab + its count badge (triage inbox for floaters). */
.bt-interest-tab-unfiled { border-style: dashed; }
.bt-tab-count { font-weight: 600; font-size: 0.68rem; padding: 0 0.3rem; border-radius: 999px;
  background: rgb(var(--bt-text) / 0.12); }
/* An empty interest still shows its tab — the count just reads dimmer so it doesn't draw the eye. */
.bt-tab-count-zero { background: rgb(var(--bt-text) / 0.06); color: rgb(var(--bt-text) / 0.4); }
.bt-interest-tab.is-active .bt-tab-count { background: rgb(var(--bt-door-c, var(--bt-accent)) / 0.22); }
.bt-interest-tab-unfiled.is-active .bt-tab-count { background: rgb(var(--bt-accent) / 0.22); }
/* Per-interest description editor in the manage panel. A drafted-but-unembedded interest is opened
   for review (needs_activation → <details open>) and tinted so it reads as "do this next". */
.bt-interest-edit > summary { cursor: pointer; list-style: none; }
.bt-interest-edit > summary::-webkit-details-marker { display: none; }
.bt-interest-desc-form { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 0.2rem;
  max-width: 30rem; }
.bt-interest-desc-form textarea { resize: vertical; min-height: 3.4rem; }
.bt-interest-manage-list > li.is-pending { background: rgb(var(--bt-accent) / 0.07);
  border-radius: 0.5rem; padding: 0.3rem 0.4rem; }

/* Detail panel: the home-interest dropdown. */
.bt-detail-home { display: flex; align-items: center; gap: 0.4rem; margin: 0.9rem 0 0.3rem;
  color: rgb(var(--bt-text-muted) / 1); }
.bt-detail-home .bt-ico { width: 0.9rem; height: 0.9rem; color: rgb(var(--bt-accent) / 1); }
.bt-detail-home-select { flex: 1; font: inherit; font-size: 0.85rem; padding: 0.4rem 0.55rem;
  border: 1px solid rgb(var(--bt-border) / 1); border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-surface) / 1); color: rgb(var(--bt-text) / 0.95); cursor: pointer; }
.bt-detail-home-select:hover { border-color: rgb(var(--bt-accent) / 0.6); }

.bt-tags-hash { font-family: var(--bt-mono); opacity: 0.7; }
.bt-tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

/* Toolbar controls row: the "# Tags" reveal toggle, the view picker, and the show/hide-tended toggle
   all sit on one line. The buttons share a quiet pill look (.bt-controls-btn); the active "# Tags"
   toggle lights up so it's clear the panel below belongs to it. */
.bt-feed-controls { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.bt-controls-btn { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; font: inherit;
  font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1); background: none;
  border: 1px solid var(--bt-line); border-radius: 0.5rem; padding: 0.3rem 0.6rem; white-space: nowrap; }
.bt-controls-btn:hover { color: rgb(var(--bt-text) / 1); border-color: var(--bt-line-strong); }
.bt-controls-btn .bt-ico { width: 0.85rem; height: 0.85rem; }
.bt-tags-toggle.is-on { color: rgb(var(--bt-accent) / 1); border-color: rgb(var(--bt-accent) / 0.6);
  background: rgb(var(--bt-accent) / 0.12); }
.bt-tags-toggle.is-on .bt-tags-hash { opacity: 1; }

/* The revealed tags panel — manage buttons row, then the tag cloud. */
.bt-tags-panel { margin: -0.4rem 0 1.1rem; padding: 0.7rem 0.8rem; border: 1px solid var(--bt-line);
  border-radius: 0.6rem; background: rgb(var(--bt-surface) / 0.6); }
.bt-tags-panel[hidden] { display: none; }
.bt-tags-panel .bt-tag-cloud { margin-top: 0.6rem; }
.bt-tagcloud-empty { font-size: 0.8rem; color: rgb(var(--bt-text-muted) / 1); margin: 0.6rem 0 0; }
.bt-manage-tags { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }

.bt-toolbar-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bt-manage-btn { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; font: inherit; font-size: 0.78rem;
  color: rgb(var(--bt-text-muted) / 1); background: none; border: 1px solid var(--bt-line); border-radius: 0.5rem; padding: 0.3rem 0.6rem; }
.bt-manage-btn:hover { color: rgb(var(--bt-text) / 1); border-color: var(--bt-line-strong); }
.bt-manage-btn .bt-ico { width: 0.8rem; height: 0.8rem; }

@media (max-width: 640px) {
  .bt-toolbar-meta .bt-legend { display: none; }
  .bt-scope-interests { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem; scrollbar-width: none; }
  .bt-scope-interests::-webkit-scrollbar { display: none; }
  .bt-scope-interests .bt-interest-chip { flex: none; }
}

/* ---- Tags --------------------------------------------------------------- */
.bt-tag { font-family: var(--bt-mono); font-size: 0.68rem; letter-spacing: 0.02em; text-transform: lowercase;
  padding: 0.16rem 0.5rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgb(var(--bt-text-muted) / 0.4); color: var(--bt-text-soft); background: rgb(var(--bt-surface) / 0.5); }
.bt-tag:hover { color: rgb(var(--bt-text) / 1); }
.bt-tag-clear { color: rgb(var(--bt-danger) / 1); border-color: rgb(var(--bt-danger) / 0.5); }
/* active filter: the selected tag glows gold and becomes the click-to-clear toggle. */
.bt-tag-active { color: rgb(var(--bt-text) / 1); font-weight: 600;
  border-color: rgb(var(--bt-pin) / 0.95);
  box-shadow: 0 0 0 1px rgb(var(--bt-pin) / 0.85), 0 0 12px 2px rgb(var(--bt-pin) / 0.55); }
.bt-pal-0{color:rgb(var(--bt-palette-0)/1);border-color:rgb(var(--bt-palette-0)/.35);background:rgb(var(--bt-palette-0)/.09)}
.bt-pal-1{color:rgb(var(--bt-palette-1)/1);border-color:rgb(var(--bt-palette-1)/.35);background:rgb(var(--bt-palette-1)/.09)}
.bt-pal-2{color:rgb(var(--bt-palette-2)/1);border-color:rgb(var(--bt-palette-2)/.35);background:rgb(var(--bt-palette-2)/.09)}
.bt-pal-3{color:rgb(var(--bt-palette-3)/1);border-color:rgb(var(--bt-palette-3)/.35);background:rgb(var(--bt-palette-3)/.09)}
.bt-pal-4{color:rgb(var(--bt-palette-4)/1);border-color:rgb(var(--bt-palette-4)/.35);background:rgb(var(--bt-palette-4)/.09)}
.bt-pal-5{color:rgb(var(--bt-palette-5)/1);border-color:rgb(var(--bt-palette-5)/.35);background:rgb(var(--bt-palette-5)/.09)}
.bt-pal-6{color:rgb(var(--bt-palette-6)/1);border-color:rgb(var(--bt-palette-6)/.35);background:rgb(var(--bt-palette-6)/.09)}
.bt-pal-7{color:rgb(var(--bt-palette-7)/1);border-color:rgb(var(--bt-palette-7)/.35);background:rgb(var(--bt-palette-7)/.09)}
.bt-pal-8{color:rgb(var(--bt-palette-8)/1);border-color:rgb(var(--bt-palette-8)/.35);background:rgb(var(--bt-palette-8)/.09)}
.bt-pal-9{color:rgb(var(--bt-palette-9)/1);border-color:rgb(var(--bt-palette-9)/.35);background:rgb(var(--bt-palette-9)/.09)}
.bt-pal-10{color:rgb(var(--bt-palette-10)/1);border-color:rgb(var(--bt-palette-10)/.35);background:rgb(var(--bt-palette-10)/.09)}
.bt-pal-11{color:rgb(var(--bt-palette-11)/1);border-color:rgb(var(--bt-palette-11)/.35);background:rgb(var(--bt-palette-11)/.09)}
.bt-pal-12{color:rgb(var(--bt-palette-12)/1);border-color:rgb(var(--bt-palette-12)/.35);background:rgb(var(--bt-palette-12)/.09)}
.bt-pal-13{color:rgb(var(--bt-palette-13)/1);border-color:rgb(var(--bt-palette-13)/.35);background:rgb(var(--bt-palette-13)/.09)}
.bt-pal-14{color:rgb(var(--bt-palette-14)/1);border-color:rgb(var(--bt-palette-14)/.35);background:rgb(var(--bt-palette-14)/.09)}
.bt-pal-15{color:rgb(var(--bt-palette-15)/1);border-color:rgb(var(--bt-palette-15)/.35);background:rgb(var(--bt-palette-15)/.09)}

/* ---- Feed: dense columns, masonry-ish via CSS columns ------------------- */
/* Cards flow side-by-side, packed top-aligned across many columns; pinned cards
   lead the same stream (amber edge + flag distinguish them, no separate section). */
.bt-feed { columns: 16rem; column-gap: 0.7rem; }
.bt-feed > .bt-loadmore, .bt-feed > .bt-loadmore-sentinel, .bt-feed > .bt-empty { column-span: all; }

/* ============================================================================
   Decorative flower boxes — fill the gaps between Keep-board cards.
   Scoped to the main feed board only via the .bt-feed--flowerbed modifier
   (added in _feed_area.html when card_chrome && !trash_mode && show_flowers) so
   it never touches the search / interest / constellation / tend reuses of
   .bt-feed. The board becomes a row-major grid (newest top-left → oldest
   bottom-right) whose cells STRETCH to the row height; each card sits in a
   .bt-cell beside a .bt-flowerbox that flex-grows to eat the leftover row space.
   flowerbed.js then reveals the whole planter units that fit each gap.
   ============================================================================ */
.bt-feed--flowerbed { columns: unset; column-gap: normal;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem 0.7rem; align-items: stretch; }
.bt-feed--flowerbed > .bt-loadmore,
.bt-feed--flowerbed > .bt-loadmore-sentinel,
.bt-feed--flowerbed > .bt-empty { grid-column: 1 / -1; }
.bt-feed--flowerbed .bt-cell { display: flex; flex-direction: column; min-width: 0; }
.bt-feed--flowerbed .bt-card { margin-bottom: 0; }
/* Live SSE-inserted cards land as bare .bt-card grid items (no wrapper); keep them
   natural height so they don't stretch into an empty slab until the next refresh. */
.bt-feed--flowerbed > .bt-card { align-self: start; }
/* The flowerbox eats the leftover row space; a bottom-anchored stack of FIXED-size
   planter units rides inside it (absolute, so it never inflates the row). flowerbed.js
   reveals only the whole units that fit — and nothing when even one won't (no slivers).
   Units default hidden so there's no pre-JS flash of clipped planters. */
/* Faded a touch so the beds recede behind the (deliberately subtle) cards. */
.bt-flowerbox { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; opacity: 0.82; }
.bt-planter-stack { position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column-reverse; }
.bt-planter { flex: 0 0 auto; height: 6.5rem; display: none; }
.bt-planter.is-on { display: block; }
.bt-planter-svg { display: block; width: 100%; height: 100%; }
/* Shared flower-symbol defs — present once, renders nothing itself. */
.bt-fb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Phone: single column has no gaps — hide the beds except the ~1-in-8 flagged .is-m,
   shown as a single strip between cards (JS reveals its one unit). */
@media (max-width: 640px) {
  .bt-flowerbox { display: none; }
  .bt-flowerbox:has(.is-m) { display: block; flex: 0 0 auto; height: 6.5rem; }
}
.bt-card {
  /* Padding lives in vars so the edge-to-edge card foot can cancel it with negative margins
     and stay flush whatever the density (the compact view overrides these below). */
  --bt-pad-x: 0.95rem; --bt-pad-y: 0.85rem;
  break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 1.05rem;
  position: relative; display: block; padding: var(--bt-pad-y) var(--bt-pad-x);
  background: rgb(var(--bt-surface) / 0.85);
  /* Border color is driven by --bt-edge (a tag's palette slot or the pin gold), falling
     back to the neutral hairline; --bt-edge-a is the alpha, bumped on hover. */
  border: 1px solid rgb(var(--bt-edge, var(--bt-border)) / var(--bt-edge-a, 1));
  border-radius: var(--bt-radius);
  box-shadow: inset 0 1px 0 rgb(var(--bt-text) / 0.04);
  transition: border-color 0.16s ease, transform 0.12s ease, box-shadow 0.2s ease, background-color 0.16s ease;
}
.bt-card:hover {
  --bt-edge-a: 0.95;
  transform: translateY(-1px);
  background: rgb(var(--bt-surface) / 1);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.26), inset 0 1px 0 rgb(var(--bt-text) / 0.06);
}
/* Tag-tinted edges: a card's border picks up its primary tag's palette color. */
.bt-edge-0  { --bt-edge: var(--bt-palette-0);  --bt-edge-a: 0.5; }
.bt-edge-1  { --bt-edge: var(--bt-palette-1);  --bt-edge-a: 0.5; }
.bt-edge-2  { --bt-edge: var(--bt-palette-2);  --bt-edge-a: 0.5; }
.bt-edge-3  { --bt-edge: var(--bt-palette-3);  --bt-edge-a: 0.5; }
.bt-edge-4  { --bt-edge: var(--bt-palette-4);  --bt-edge-a: 0.5; }
.bt-edge-5  { --bt-edge: var(--bt-palette-5);  --bt-edge-a: 0.5; }
.bt-edge-6  { --bt-edge: var(--bt-palette-6);  --bt-edge-a: 0.5; }
.bt-edge-7  { --bt-edge: var(--bt-palette-7);  --bt-edge-a: 0.5; }
.bt-edge-8  { --bt-edge: var(--bt-palette-8);  --bt-edge-a: 0.5; }
.bt-edge-9  { --bt-edge: var(--bt-palette-9);  --bt-edge-a: 0.5; }
.bt-edge-10 { --bt-edge: var(--bt-palette-10); --bt-edge-a: 0.5; }
.bt-edge-11 { --bt-edge: var(--bt-palette-11); --bt-edge-a: 0.5; }
.bt-edge-12 { --bt-edge: var(--bt-palette-12); --bt-edge-a: 0.5; }
.bt-edge-13 { --bt-edge: var(--bt-palette-13); --bt-edge-a: 0.5; }
.bt-edge-14 { --bt-edge: var(--bt-palette-14); --bt-edge-a: 0.5; }
.bt-edge-15 { --bt-edge: var(--bt-palette-15); --bt-edge-a: 0.5; }
/* Pinned cards win a warm gold border; the pinned state itself is shown by the gold-filled,
   always-visible Pin button in the head (see .bt-card-act.is-active), not a separate badge. */
.bt-card-pinned { --bt-edge: var(--bt-pin); --bt-edge-a: 0.75; }
/* type cue: a small colored dot at the header's far left (before the timestamp). Persistent now —
   the share/edit/pin actions own the right side. Decode it via the feed legend.
   NOTE: top-edge layout is pending a polish pass (single-note-share plan §4 styling debt). */
.bt-kind-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.45rem;
  background: rgb(var(--bt-text-muted) / 0.6); }
.bt-kind-text .bt-kind-dot { background: rgb(var(--bt-type-text) / 0.95); }
.bt-kind-checklist .bt-kind-dot { background: rgb(var(--bt-type-checklist) / 0.95); }
.bt-kind-link .bt-kind-dot { background: rgb(var(--bt-type-link) / 0.95); }
.bt-kind-image .bt-kind-dot, .bt-kind-video .bt-kind-dot { background: rgb(var(--bt-type-image) / 0.95); }
.bt-kind-chat .bt-kind-dot { background: rgb(var(--bt-type-chat) / 0.95); }
.bt-is-book .bt-kind-dot { background: rgb(var(--bt-type-book) / 0.95); }
.bt-is-social .bt-kind-dot { background: rgb(var(--bt-type-social) / 0.95); }

/* feed legend: decodes the type dots; mirrors the same --bt-type-* theme colors. */
.bt-legend { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
  font-family: var(--bt-mono); font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--bt-text-soft); }
.bt-legend-item { display: inline-flex; align-items: center; gap: 0.32rem; }
.bt-typedot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none;
  background: rgb(var(--bt-text-muted) / 0.6); }
.bt-typedot.t-text { background: rgb(var(--bt-type-text) / 0.95); }
.bt-typedot.t-todo { background: rgb(var(--bt-type-checklist) / 0.95); }
.bt-typedot.t-link { background: rgb(var(--bt-type-link) / 0.95); }
.bt-typedot.t-media { background: rgb(var(--bt-type-image) / 0.95); }
.bt-typedot.t-book { background: rgb(var(--bt-type-book) / 0.95); }
.bt-typedot.t-chat { background: rgb(var(--bt-type-chat) / 0.95); }
.bt-typedot.t-social { background: rgb(var(--bt-type-social) / 0.95); }
/* Legend type items double as filter toggles — a hidden type dims + strikes through. */
a.bt-legend-item { cursor: pointer; text-decoration: none; color: inherit; }
a.bt-legend-item:hover { color: rgb(var(--bt-text) / 1); }
a.bt-legend-item.is-off { opacity: 0.4; }
a.bt-legend-item.is-off .bt-typedot { background: rgb(var(--bt-text-muted) / 0.5); }

.bt-card-head { position: relative; display: flex; align-items: center; font-family: var(--bt-mono);
  font-size: 0.64rem; letter-spacing: 0.03em; color: var(--bt-text-soft);
  margin-top: -0.12rem; margin-bottom: 0.5rem; }
/* Right edge sits at the card's content padding edge, lining up with the bottom-right
   constellation button (both flush to --bt-pad-x). */
.bt-card-actions { display: flex; gap: 0.3rem; margin-left: auto; margin-right: 0; }
/* Each action fades individually (not the group as one) so a pinned card can keep its Pin button
   shown at rest while Edit and the contextual icons stay hover-only. Share behaves the same. */
.bt-card-actions > * { opacity: 0; transition: opacity 0.12s ease; }
.bt-card:hover .bt-card-actions > *, .bt-card:focus-within .bt-card-actions > * { opacity: 1; }
/* Touch devices have no hover, so the reveal-on-hover trick strands the actions out of reach.
   Keep pin/edit/delete always visible and right-justified, with the type dot to their right. */
@media (hover: none) {
  .bt-card-actions > * { opacity: 1; }
}
/* Phone: the card is a clean, tappable doorway, so Edit / Pin collapse off it — both live in the
   tap→detail panel, matching the one-central-button + swipe model of the card foot. Share ALWAYS
   stays (a kept note is shareable from anywhere); the just-mine lock and remove-from-folder are
   .bt-icon and stay too. (The ephemeral Brief Expand source cards carry no Share button at all.) */
@media (max-width: 640px) {
  .bt-card-actions .bt-card-act:not(.bt-card-share) { display: none; }
}
.bt-icon { background: none; border: 0; cursor: pointer; color: rgb(var(--bt-text-muted) / 1); font-size: 0.85rem;
  padding: 0.1rem 0.26rem; border-radius: 4px; }
.bt-icon:hover { background: rgb(var(--bt-bg) / 1); color: rgb(var(--bt-text) / 1); }
/* Compact labeled card actions (Pin / Edit): icon + word in a small rectangular button. */
.bt-card-act { display: inline-flex; align-items: center; gap: 0.28rem; cursor: pointer;
  font: 600 0.72rem var(--bt-font); color: rgb(var(--bt-text-muted) / 1); background: none;
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); padding: 0.16rem 0.42rem; }
.bt-card-act:hover { background: rgb(var(--bt-bg) / 1); color: rgb(var(--bt-text) / 1);
  border-color: var(--bt-line-strong); }
.bt-card-act .bt-ico { width: 0.82rem; height: 0.82rem; }
/* Pinned: the button is its own badge now — gold-filled, and held visible at rest (overriding the
   hover-only fade above) so the pin state reads without hovering the card. */
.bt-card-act.is-active { opacity: 1; color: rgb(var(--bt-pin) / 1);
  background: rgb(var(--bt-pin) / 0.12); border-color: rgb(var(--bt-pin) / 0.5); }
.bt-card-act.is-active:hover { color: rgb(var(--bt-pin) / 1);
  background: rgb(var(--bt-pin) / 0.2); border-color: rgb(var(--bt-pin) / 0.7); }
.bt-card-title { margin: 0 0 0.3rem; font-size: 0.96rem; font-weight: 600; letter-spacing: -0.01em; }
/* Link cards: the title opens the source URL in a new tab, with a small trailing open-out icon. */
.bt-title-link { color: inherit; text-decoration: none; }
.bt-title-link:hover { color: rgb(var(--bt-accent) / 1); }
.bt-title-open { display: inline-flex; vertical-align: baseline; margin-left: 0.28rem;
  color: rgb(var(--bt-text-muted) / 0.7); }
.bt-title-link:hover .bt-title-open { color: rgb(var(--bt-accent) / 1); }
.bt-title-open .bt-ico { width: 0.78rem; height: 0.78rem; vertical-align: -0.06em; }
.bt-card-body { white-space: pre-wrap; word-break: break-word; font-size: 0.88rem; color: rgb(var(--bt-text) / 0.92); }
/* Tags sit at the foot of the card — compact and slightly smaller than filter chips. */
.bt-card-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0.55rem 0 0; }
.bt-card-tags .bt-tag { font-size: 0.58rem; padding: 0.1rem 0.42rem; }

/* Collection badge — a "folder" marker, deliberately UNLIKE a tag: bordered/outlined pill,
   normal-case name, folder glyph. Sits in the card header (a place a note lives), never the
   #lowercase tag footer. Palette tint comes from .bt-pal-* (shared with interests/tags). */
.bt-collection-badge { display: inline-flex; align-items: center; gap: 0.28rem; margin-left: 0.55rem;
  font-family: var(--bt-font); font-size: 0.62rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; white-space: nowrap; padding: 0.1rem 0.5rem; border-radius: var(--bt-r-sm);
  border: 1px solid rgb(var(--bt-text-muted) / 0.5); border-style: solid; }
.bt-collection-badge .bt-ico { width: 0.72rem; height: 0.72rem; }
.bt-collection-badge:hover { filter: brightness(1.08); }
/* 🔒 just-mine flag — a note held private inside a shared place. */
.bt-lock-flag { display: inline-flex; margin-left: 0.45rem; color: rgb(var(--bt-text-muted) / 0.9); }
.bt-lock-flag .bt-ico { width: 0.78rem; height: 0.78rem; }
/* Toolbar scope chips (interest/collection) when active — same gold glow as an active tag. */
.bt-scope-active { font-weight: 600; color: rgb(var(--bt-text) / 1);
  box-shadow: 0 0 0 1px rgb(var(--bt-pin) / 0.85), 0 0 12px 2px rgb(var(--bt-pin) / 0.55); }
/* Phone: keep one organizing axis legible — the interest chip + collection badge lead; trim the
   tag footer to its first three pills so a card never becomes a wall of signals. */
@media (max-width: 640px) {
  .bt-card-tags .bt-tag:nth-child(n+4) { display: none; }
}

/* AI-suggested tags: faded + dashed until confirmed. Clicking the pill opens a small
   accept/dismiss popover (native <details>, so it's CSP-safe with no inline JS). */
.bt-tag-suggest { position: relative; display: inline-flex; }
.bt-tag-ai { display: inline-flex; align-items: center; cursor: pointer;
  list-style: none; opacity: 0.5; border-style: dashed; }
.bt-tag-ai::-webkit-details-marker, .bt-tag-ai::marker { display: none; content: ""; }
.bt-tag-ai:hover, .bt-tag-suggest[open] > .bt-tag-ai { opacity: 1; }
.bt-tag-pop { position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 0.5rem; min-width: max-content; padding: 0.6rem 0.65rem;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: var(--bt-r-sm); box-shadow: 0 12px 30px rgb(0 0 0 / 0.38); }
/* Lift the whole card above siblings while a popover (suggestion or delete-confirm) is open,
   so it is never painted under the next card in the column flow. */
.bt-card:has(.bt-tag-suggest[open]), .bt-card:has(.bt-confirm[open]) { z-index: 50; }

/* Delete confirmation popover — same native-<details> pattern as the tag suggestion popover. */
.bt-confirm { position: relative; display: inline-flex; }
.bt-confirm > summary { list-style: none; cursor: pointer; }
.bt-confirm > summary::-webkit-details-marker, .bt-confirm > summary::marker { display: none; content: ""; }
/* keep the (hover-revealed) action row visible while the confirm is open */
.bt-card-actions:has(.bt-confirm[open]) > * { opacity: 1; }
.bt-confirm-pop { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 0.5rem; min-width: max-content; padding: 0.6rem 0.65rem;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: var(--bt-r-sm); box-shadow: 0 12px 30px rgb(0 0 0 / 0.38); }
.bt-confirm-title { display: inline-flex; align-items: center; gap: 0.32rem;
  font-family: var(--bt-mono); font-size: 0.6rem; letter-spacing: 0.02em; color: rgb(var(--bt-text) / 1); }
.bt-confirm-title .bt-ico { width: 0.82rem; height: 0.82rem; color: rgb(var(--bt-danger) / 1); }
.bt-confirm-row { display: flex; gap: 0.4rem; }
.bt-confirm-note { margin: 0; font-size: 0.72rem; line-height: 1.4; white-space: normal;
  max-width: 16rem; color: rgb(var(--bt-text-muted) / 1); }
/* left-anchored variant for inline buttons (e.g. Reset address) vs the card's top-right corner */
.bt-confirm-start .bt-confirm-pop { left: 0; right: auto; }
/* email-in block (Connections + Profile) */
.bt-email-in-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.5rem; }
.bt-email-in-foot .bt-conn-note { margin: 0; flex: 1 1 16rem; }
.bt-email-reset { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; }
.bt-email-reset .bt-ico { width: 0.85rem; height: 0.85rem; }
.bt-chip-danger { color: rgb(var(--bt-danger) / 1); border-color: rgb(var(--bt-danger) / 0.5); }
.bt-chip-danger:hover { color: rgb(var(--bt-danger) / 1);
  background: rgb(var(--bt-danger) / 0.12); border-color: rgb(var(--bt-danger) / 0.8); }
.bt-tag-pop-title { display: inline-flex; align-items: center; gap: 0.32rem;
  font-family: var(--bt-mono); font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgb(var(--bt-text-muted) / 0.9); }
.bt-tag-pop-title .bt-ico { width: 0.8rem; height: 0.8rem; color: rgb(var(--bt-accent) / 1); }
.bt-tag-pop-row { display: flex; gap: 0.4rem; }

/* Keep Done / Let go / Block time on a single row in narrow cards: no wrapping, and a
   slightly tighter chip so all three fit the column width. */
.bt-card-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; margin-top: 0.6rem; }
.bt-card-chips .bt-chip { font-size: 0.6rem; padding: 0.2rem 0.42rem; gap: 0.22rem; min-width: 0; }
.bt-card-chips .bt-chip .bt-ico { width: 0.72rem; height: 0.72rem; }

.bt-ref-toggle { margin-left: auto; flex: none; display: inline-flex; align-items: center; cursor: pointer;
  background: none; border: 0; padding: 0.2rem; border-radius: var(--bt-r-sm);
  color: rgb(var(--bt-text-muted) / 0.55); }
.bt-ref-toggle:hover { color: rgb(var(--bt-accent) / 1); background: rgb(var(--bt-accent) / 0.1); }
.bt-ref-toggle .bt-ico { width: 0.82rem; height: 0.82rem; }
.bt-ref-flag { display: inline-flex; align-items: center; gap: 0.28rem; cursor: pointer;
  font: 600 0.62rem var(--bt-mono); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  color: rgb(var(--bt-accent) / 1); background: rgb(var(--bt-accent) / 0.12);
  border: 1px solid rgb(var(--bt-accent) / 0.3); }
.bt-ref-flag:hover { background: rgb(var(--bt-accent) / 0.2); }
.bt-ref-flag .bt-ico { width: 0.78rem; height: 0.78rem; }
.bt-chip { display: inline-flex; align-items: center; gap: 0.28rem; cursor: pointer; white-space: nowrap;
  font-family: var(--bt-mono); font-size: 0.66rem; letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  background: rgb(var(--bt-bg) / 1); color: rgb(var(--bt-text-muted) / 1);
  border: 1px solid rgb(var(--bt-border) / 1); }
.bt-chip:hover { color: rgb(var(--bt-text) / 1); border-color: rgb(var(--bt-accent) / 0.6); }
.bt-chip .bt-ico { width: 0.8rem; height: 0.8rem; }

/* Kept-card engage row: Summarize / Summary toggle (grows to fill) + a square Constellation
   button in a distinct subtle tint. Both quiet; only Summarize swaps state (handled in site.js). */
.bt-engage { display: flex; gap: 0.35rem; margin-top: 0.6rem; }
/* Overlay/related cards show only the Constellation button (no Summarize) — keep it on the right. */
.bt-engage-bare { justify-content: flex-end; }
.bt-engage-summarize { flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.34rem;
  cursor: pointer; font-family: var(--bt-mono); font-size: 0.62rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.32rem 0.5rem; border-radius: var(--bt-r-sm);
  color: rgb(var(--bt-text-muted) / 0.95); background: rgb(var(--bt-bg) / 0.5);
  border: 1px solid rgb(var(--bt-border) / 0.9);
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease; }
.bt-engage-summarize:hover { color: rgb(var(--bt-text) / 1); border-color: rgb(var(--bt-accent) / 0.5); }
.bt-engage-summarize .bt-ico { width: 0.82rem; height: 0.82rem; }
/* summarized: a still-subtle accent-tinted state */
.bt-engage-summarize.is-summarized { color: rgb(var(--bt-accent) / 1);
  background: rgb(var(--bt-accent) / 0.12); border-color: rgb(var(--bt-accent) / 0.4); }
.bt-engage-summarize.is-summarized:hover { background: rgb(var(--bt-accent) / 0.18); }
/* The htmx wrapper is layout-transparent so the button stays the engage row's flex child. */
.bt-summarize-wrap { display: contents; }
/* Busy state while the summary generates — a small spinner + "Summarizing…". */
.bt-engage-summarize.is-summarizing { cursor: default; color: rgb(var(--bt-text-muted) / 0.95); }
.bt-summarize-spin { width: 0.78rem; height: 0.78rem; flex: none; border-radius: 50%;
  border: 1.5px solid rgb(var(--bt-text-muted) / 0.3); border-top-color: rgb(var(--bt-accent) / 1);
  animation: bt-spin 0.7s linear infinite; }
.bt-engage-constellation { flex: none; width: 1.95rem;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 0; border-radius: var(--bt-r-sm);
  color: rgb(var(--bt-type-chat) / 1); background: rgb(var(--bt-type-chat) / 0.1);
  border: 1px solid rgb(var(--bt-type-chat) / 0.32);
  transition: background 0.14s ease, border-color 0.14s ease; }
.bt-engage-constellation:hover { background: rgb(var(--bt-type-chat) / 0.18); border-color: rgb(var(--bt-type-chat) / 0.55); }
.bt-engage-constellation .bt-ico { width: 0.95rem; height: 0.95rem; }
/* Edit heads the engage row on the pinboard — same height/treatment as Summarize but sized to its
   own label, so Summarize grows to fill the gap between Edit and Constellation. Permanently visible
   (no hover fade), unlike the header actions it replaces there. */
.bt-engage-edit { flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  cursor: pointer; font-family: var(--bt-mono); font-size: 0.62rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.32rem 0.6rem; border-radius: var(--bt-r-sm);
  color: rgb(var(--bt-text-muted) / 0.95); background: rgb(var(--bt-bg) / 0.5);
  border: 1px solid rgb(var(--bt-border) / 0.9);
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease; }
.bt-engage-edit:hover { color: rgb(var(--bt-text) / 1); border-color: rgb(var(--bt-accent) / 0.5); }
.bt-engage-edit .bt-ico { width: 0.82rem; height: 0.82rem; }
/* Phone keeps the card a clean tappable doorway — Edit lives in the tap→detail panel there (same as
   the header actions it replaced), so it drops off the engage row too. */
@media (max-width: 640px) { .bt-engage-edit { display: none; } }

/* Card foot: edge-to-edge Trash / To-do / Keep bar. Negative margins cancel the card's padding
   (the --bt-pad-* vars) so it meets the borders; bottom corners round to match the card. Faint
   until a button is hovered (desktop), where each lights in its own hue. */
.bt-card-foot { display: flex; margin: 0.7rem calc(-1 * var(--bt-pad-x)) calc(-1 * var(--bt-pad-y));
  border-top: 1px solid rgb(var(--bt-border) / 0.9);
  border-radius: 0 0 calc(var(--bt-radius) - 1px) calc(var(--bt-radius) - 1px); overflow: hidden; }
.bt-foot-act { flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.32rem;
  cursor: pointer; font-family: var(--bt-mono); font-size: 0.6rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.5rem 0.4rem; background: none; border: 0;
  color: rgb(var(--bt-text-muted) / 0.55);
  transition: color 0.14s ease, background 0.14s ease; }
.bt-foot-act + .bt-foot-act { border-left: 1px solid rgb(var(--bt-border) / 0.9); }
.bt-foot-act .bt-ico { width: 0.8rem; height: 0.8rem; }
.bt-foot-trash:hover { color: rgb(var(--bt-danger) / 1); background: rgb(var(--bt-danger) / 0.1); }
.bt-foot-center:hover { color: rgb(var(--bt-type-checklist) / 1); background: rgb(var(--bt-type-checklist) / 0.1); }
.bt-foot-keep:hover { color: rgb(var(--bt-type-link) / 1); background: rgb(var(--bt-type-link) / 0.12); }
/* The Keep board's right slot is intentionally empty (no Keep on a card that's already kept). */
.bt-foot-blank { cursor: default; }
/* Phone: the foot collapses to just the centre button (Add Todo / Done), full width and clearly
   visible (no hover to reveal it). Trash + the right slot move to the swipe overlay below. */
@media (max-width: 640px) {
  .bt-card-foot .bt-foot-trash, .bt-card-foot .bt-foot-keep, .bt-card-foot .bt-foot-blank { display: none; }
  .bt-card-foot .bt-foot-center { border-left: 0; padding: 0.62rem 0.4rem;
    color: rgb(var(--bt-text) / 0.92); }
  .bt-foot-done { color: rgb(var(--bt-type-checklist) / 1); }
}

/* Mobile swipe-instructions overlay — a thin translucent rounded bar floating above the phone's
   bottom URL bar, showing what a left/right card swipe does on this tab. Desktop has no swipe
   mechanic, so it's hidden there. Affordance only (functionality lands later). */
.bt-swipebar { display: none; }
@media (max-width: 640px) {
  .bt-swipebar {
    position: fixed; left: 0.5rem; right: 0.5rem; z-index: 45;
    bottom: max(0.55rem, env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center;
    min-height: 2.9rem; padding: 0.5rem 0.85rem;
    border-radius: 0.85rem; border: 1px solid rgb(var(--bt-border) / 0.85);
    background: rgb(var(--bt-surface-raised) / 0.94); backdrop-filter: saturate(150%) blur(12px);
    font-family: var(--bt-mono); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase; color: rgb(var(--bt-text) / 0.96);
    box-shadow: 0 8px 28px rgb(0 0 0 / 0.5); }
  /* Each side takes half the bar and hugs its outer edge, so the space stays in the middle and the
     triangles sit hard against the left/right (no squishing back together). */
  .bt-swipe-side { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; gap: 0.45rem; }
  /* Tinted to the action — Trash red, Keep blue — so direction reads by colour too. */
  .bt-swipe-left { justify-content: flex-start; color: rgb(var(--bt-danger) / 0.92); }
  .bt-swipe-right { justify-content: flex-end; color: rgb(var(--bt-type-link) / 0.95); }
  .bt-swipe-side .bt-ico { width: 1rem; height: 1rem; flex: none; }
  /* Centre swipe hand — demonstrates the gesture by sliding left↔right (no arrows) for ~3s on each
     page load, then fades away entirely, leaving the Trash/Keep labels. Two 1.5s slide loops = 3s,
     then a fade that holds (forwards). */
  .bt-swipe-hand { flex: none; display: inline-flex; align-items: center; color: rgb(var(--bt-text) / 0.8); }
  .bt-swipe-hand svg { width: 1.5rem; height: 1.5rem;
    animation: bt-swipehand 1.5s ease-in-out 2, bt-swipehand-hide 0.5s ease-in 3s forwards; }
  .bt-swipebar-keeponly .bt-swipe-hand svg { animation-name: bt-swipehand-left, bt-swipehand-hide; }
  /* Keep the last card clear of the pinned bar. */
  .bt-main { padding-bottom: 6.5rem; }
}
@keyframes bt-swipehand { 0%, 100% { transform: translateX(-8px) rotate(-5deg); } 50% { transform: translateX(8px) rotate(5deg); } }
@keyframes bt-swipehand-left { 0%, 100% { transform: translateX(3px) rotate(3deg); } 55% { transform: translateX(-10px) rotate(-6deg); } }
@keyframes bt-swipehand-hide { to { opacity: 0; visibility: hidden; } }
/* Reduced motion: no gesture demo at all — just the Trash/Keep labels. */
@media (prefers-reduced-motion: reduce) { .bt-swipe-hand { display: none; } }

/* ── Trash (per-tab) ──────────────────────────────────────────────────────
   The trash pill (next to the view picker), the Trash-mode header, the on-card deletion countdown,
   the Delete/Restore foot, and the touch swipe-to-act feedback. */
.bt-trash-pill { display: inline-flex; align-items: center; gap: 0.32rem;
  color: rgb(var(--bt-danger) / 0.95); border-color: rgb(var(--bt-danger) / 0.45);
  background: rgb(var(--bt-danger) / 0.08); }
.bt-trash-pill:hover { color: rgb(var(--bt-danger) / 1); border-color: rgb(var(--bt-danger) / 0.7);
  background: rgb(var(--bt-danger) / 0.14); }
.bt-trash-pill .bt-ico { width: 0.85rem; height: 0.85rem; }
.bt-trash-pill-n { font-family: var(--bt-mono); font-weight: 700; }

.bt-trash-head { margin: 0 0 1rem; }
.bt-trash-back { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem;
  color: rgb(var(--bt-text-muted) / 1); }
.bt-trash-back:hover { color: rgb(var(--bt-accent) / 1); }
.bt-trash-back .bt-ico { width: 0.9rem; height: 0.9rem; }
.bt-trash-title { display: flex; align-items: center; gap: 0.5rem; margin: 0.45rem 0 0; font-size: 1.25rem; }
.bt-trash-title .bt-ico { width: 1.25rem; height: 1.25rem; color: rgb(var(--bt-danger) / 0.95); }
.bt-trash-title-count { font: 600 0.8rem var(--bt-mono); padding: 0.1rem 0.5rem; border-radius: 999px;
  background: rgb(var(--bt-danger) / 0.14); color: rgb(var(--bt-danger) / 1); }
.bt-trash-sub { margin: 0.35rem 0 0; max-width: 42rem; font-size: 0.88rem; color: rgb(var(--bt-text-muted) / 1); }
/* In Trash, the cards read as on-their-way-out: a touch desaturated + dimmed. */
.bt-trash-board .bt-card { filter: saturate(0.8); opacity: 0.92; }

/* On-card permanent-deletion countdown — a quiet warning line above the Delete/Restore foot. */
.bt-trash-countdown { display: flex; align-items: center; gap: 0.34rem; margin: 0.6rem 0 0;
  font-family: var(--bt-mono); font-size: 0.62rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: rgb(var(--bt-pin) / 0.95); }
.bt-trash-countdown .bt-ico { width: 0.8rem; height: 0.8rem; }

/* Delete / Restore foot — two columns; Delete lights red, Restore blue. */
.bt-foot-delete:hover { color: rgb(var(--bt-danger) / 1); background: rgb(var(--bt-danger) / 0.12); }
.bt-foot-restore:hover { color: rgb(var(--bt-type-link) / 1); background: rgb(var(--bt-type-link) / 0.12); }
/* Phone: hide the Delete/Restore buttons — they're the two swipe actions instead. The countdown
   line stays so the deletion clock is still visible. */
@media (max-width: 640px) { .bt-card-foot-2 { display: none; } }

/* Touch swipe-to-act: the card follows the finger; a coloured inset edge confirms once past the
   commit threshold (red = Trash/Delete on the left, blue = Keep/Restore on the right). */
.bt-card-swiping { transition: none !important; will-change: transform; user-select: none; touch-action: pan-y; }
.bt-swipe-arm-left { box-shadow: inset 5px 0 0 rgb(var(--bt-danger) / 0.95), 0 8px 24px rgb(0 0 0 / 0.26); }
.bt-swipe-arm-right { box-shadow: inset -5px 0 0 rgb(var(--bt-type-link) / 0.95), 0 8px 24px rgb(0 0 0 / 0.26); }

.bt-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.28rem; font-size: 0.88rem; line-height: 1.4; }
/* flex-start keeps the box pinned to the first line when the label wraps; the box itself is
   one line tall with the icon centered, so it lines up with that first line's optical center. */
.bt-checklist li { display: flex; gap: 0.45rem; align-items: flex-start; }
.bt-checklist li.checked span { text-decoration: line-through; color: rgb(var(--bt-text-muted) / 1); }
.bt-check { display: inline-flex; align-items: center; height: 1.4em; flex: none;
  background: none; border: 0; cursor: pointer; color: rgb(var(--bt-type-checklist) / 1); line-height: 1; padding: 0; }

.bt-linkcard { display: flex; flex-direction: column; gap: 0.3rem; }
.bt-link-domain { display: flex; align-items: center; gap: 0.4rem; font-family: var(--bt-mono); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--bt-text-muted) / 1); }
.bt-favicon { border-radius: 3px; }
.bt-link-title { color: rgb(var(--bt-text) / 1); font-weight: 600; font-size: 0.9rem; }
.bt-link-desc { font-size: 0.8rem; color: rgb(var(--bt-text-muted) / 1); line-height: 1.35; }

/* Social post card (X/TikTok/IG/FB) — static rich preview; images re-hosted on our S3. */
.bt-social { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.45rem 0 0;
  padding: 0.7rem 0.8rem; border: 1px solid var(--bt-line); border-left: 3px solid rgb(var(--bt-type-social) / 1);
  border-radius: var(--bt-r-sm); background: rgb(var(--bt-bg) / 0.55); }
/* On a kept card the whole social card is a link to the post. */
.bt-social-linkwrap { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.bt-social-linkwrap:hover .bt-social { border-color: var(--bt-line-strong); }
.bt-social-head { display: flex; align-items: center; gap: 0.45rem; }
.bt-social-head .bt-provider-logo { width: 1.05rem; height: 1.05rem; flex: none; }
.bt-social-avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; flex: none; }
.bt-social-author { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600;
  font-size: 0.85rem; color: rgb(var(--bt-text) / 1); }
.bt-social-verified .bt-ico { width: 0.8rem; height: 0.8rem; color: rgb(var(--bt-type-social) / 1); }
.bt-social-thumb { display: block; width: 100%; max-height: 22rem; object-fit: cover;
  border-radius: var(--bt-r-sm); }
.bt-social-caption { font-size: 0.82rem; color: rgb(var(--bt-text-muted) / 1); line-height: 1.4; }
.bt-social-stats { display: flex; flex-wrap: wrap; gap: 0.8rem; font-family: var(--bt-mono);
  font-size: 0.66rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-social-stats span { display: inline-flex; align-items: center; gap: 0.25rem; }
.bt-social-stats .bt-ico { width: 0.8rem; height: 0.8rem; }

/* Shared AI-chat card (Phase 20). */
.bt-chatcard { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.45rem 0 0;
  padding: 0.7rem 0.8rem; border: 1px solid var(--bt-line); border-left: 3px solid rgb(var(--bt-accent) / 1);
  border-radius: var(--bt-r-sm); background: rgb(var(--bt-bg) / 0.55); }
.bt-chat-head { display: flex; align-items: center; gap: 0.35rem; font-family: var(--bt-mono);
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--bt-text-muted) / 1); }
.bt-chat-head .bt-ico { width: 0.85rem; height: 0.85rem; color: rgb(var(--bt-accent) / 1); }
.bt-chat-provider { font-weight: 600; color: rgb(var(--bt-text) / 1); }
.bt-chat-title { color: rgb(var(--bt-text) / 1); font-weight: 600; font-size: 0.9rem; }
.bt-chat-summary { font-size: 0.8rem; color: rgb(var(--bt-text-muted) / 1); line-height: 1.4; }
.bt-chat-open { font-size: 0.72rem; color: rgb(var(--bt-accent) / 1); margin-top: 0.1rem; }
/* Per-provider brand accent (left rail + glyph) so a chat card reads at a glance. */
.bt-chat-chatgpt { border-left-color: #10a37f; }
.bt-chat-chatgpt .bt-chat-head .bt-ico { color: #10a37f; }
.bt-chat-claude { border-left-color: #d97757; }
.bt-chat-claude .bt-chat-head .bt-ico { color: #d97757; }
.bt-chat-gemini { border-left-color: #4285f4; }
.bt-chat-gemini .bt-chat-head .bt-ico { color: #4285f4; }

/* ---- Rich link/media previews (Phase 18) — full width, click-to-load embeds ---- */
.bt-preview { position: relative; display: block; width: 100%; margin: 0.45rem 0 0;
  border-radius: var(--bt-r-sm); overflow: hidden; border: 1px solid var(--bt-line);
  background: rgb(var(--bt-bg) / 0.55); }
.bt-preview-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bt-preview-frame { display: block; width: 100%; height: 100%; border: 0; }
.bt-preview-video { aspect-ratio: 16 / 9; cursor: pointer; }
.bt-preview-pdf { aspect-ratio: 16 / 9; cursor: pointer; }
.bt-preview-map { aspect-ratio: 2 / 1; cursor: pointer; }
.bt-preview-video .bt-preview-img, .bt-preview-map .bt-preview-img { position: absolute; inset: 0; }
.bt-preview-pdf.is-loaded { aspect-ratio: auto; }
.bt-preview-pdf .bt-preview-frame { height: 75vh; }
/* play / view overlay button */
.bt-preview-play { position: absolute; inset: 0; margin: auto; width: 3.1rem; height: 3.1rem;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 0;
  border-radius: 50%; color: #fff; background: rgb(0 0 0 / 0.55); box-shadow: 0 4px 16px rgb(0 0 0 / 0.4);
  transition: background 0.15s ease, transform 0.12s ease; }
.bt-preview-play:hover { background: rgb(var(--bt-accent) / 0.95); transform: scale(1.06); }
.bt-preview-play .bt-ico { width: 1.4rem; height: 1.4rem; }
/* caption strip (map, pdf poster) */
.bt-preview-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  gap: 0.4rem; padding: 0.4rem 0.6rem; font-size: 0.78rem; color: #fff;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.72)); }
.bt-preview-cap .bt-ico { width: 0.95rem; height: 0.95rem; flex: none; }
/* video meta line under the player */
.bt-preview-meta { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem;
  font-size: 0.8rem; color: rgb(var(--bt-text) / 0.9); text-decoration: none; }
.bt-preview-meta:hover .bt-preview-title { color: rgb(var(--bt-accent) / 1); }
/* Video title sits ABOVE the preview; let it wrap so the full title shows. */
.bt-preview-meta-top { margin-top: 0; margin-bottom: 0.4rem; font-weight: 600; align-items: flex-start; }
.bt-preview-meta-top .bt-preview-title { white-space: normal; }
/* User's commentary rendered below the link/video preview. */
.bt-card-comment { margin-top: 0.5rem; }
.bt-preview-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* audio (Spotify) — compact, no 16:9 */
.bt-preview-audio { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.85rem; cursor: pointer; }
.bt-preview-audio .bt-preview-play { position: static; inset: auto; margin: 0; width: 2.4rem; height: 2.4rem; flex: none; }
.bt-preview-audio.is-loaded { padding: 0; }
.bt-preview-audio .bt-preview-frame { height: 152px; }
/* direct-image link → full width, lightboxable */
.bt-preview-photo { width: 100%; max-height: 24rem; object-fit: contain; border-radius: var(--bt-r-sm);
  border: 1px solid var(--bt-line); cursor: zoom-in; margin: 0.45rem 0 0; background: rgb(var(--bt-bg) / 0.6); }
/* single image attachment → full width instead of a tiny grid cell */
/* Compound selector so a single attachment beats .bt-media-grid's multi-column rule
   (declared later with equal specificity) — otherwise one image/PDF lands in a tiny cell. */
.bt-media-grid.bt-media-single { grid-template-columns: 1fr; }
.bt-media-single .bt-media-thumb { width: 100%; height: auto; object-fit: contain; background: rgb(var(--bt-bg) / 0.6); }
.bt-media-grid .bt-preview-pdf, .bt-media-grid .bt-preview-doc { grid-column: 1 / -1; margin: 0; }

/* Book card (Book Links): title → canonical cover → notes → link icons. */
.bt-book { display: flex; flex-direction: column; gap: 0.4rem; }
.bt-book-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
.bt-book-authors { margin: 0; font-size: 0.78rem; color: rgb(var(--bt-text) / 0.6); }
.bt-book-cover { align-self: center; max-height: 16rem; max-width: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: var(--bt-r-sm); margin: 0.25rem 0;
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.18); background: rgb(var(--bt-bg) / 0.6); }
.bt-book-cover-snapshot { cursor: zoom-in; }
.bt-book-synopsis { margin: 0.1rem 0 0; }
.bt-book-synopsis-text { font-style: italic; font-size: 0.82rem;
  color: rgb(var(--bt-text) / 0.62); white-space: pre-wrap; }
.bt-book-synopsis.is-clamped .bt-book-synopsis-text { display: -webkit-box; -webkit-line-clamp: 3;
  line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bt-book-more { display: inline-block; margin-top: 0.2rem; padding: 0; background: none; border: none;
  cursor: pointer; font: inherit; font-style: normal; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: rgb(var(--bt-accent) / 1); }
.bt-book-notes { margin-top: 0.15rem; }
.bt-book-links { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.bt-book-links .bt-icon { color: rgb(var(--bt-text) / 0.7); }

.bt-reminder { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.7rem;
  padding: 0.16rem 0.5rem; border-radius: 999px; color: rgb(var(--bt-accent) / 1);
  background: rgb(var(--bt-accent) / 0.1); border: 1px solid rgb(var(--bt-accent) / 0.25); }

.bt-loadmore { display: block; margin: 1.5rem auto; cursor: pointer; font: 500 0.82rem var(--bt-mono);
  letter-spacing: 0.04em; padding: 0.55rem 1.5rem; background: rgb(var(--bt-surface) / 1); color: rgb(var(--bt-text) / 1);
  border: 1px solid var(--bt-line); border-radius: 999px; }
.bt-loadmore:hover { border-color: rgb(var(--bt-accent) / 0.6); }
.bt-loadmore-sentinel { display: block; text-align: center; margin: 1.5rem auto; padding: 0.55rem 1rem;
  font: 500 0.82rem var(--bt-mono); letter-spacing: 0.04em; color: rgb(var(--bt-text-muted) / 1); }
.bt-result-count { font-family: var(--bt-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgb(var(--bt-text-muted) / 1); margin: 0 0 1rem; }

.bt-empty { text-align: center; padding: 5rem 1rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-empty-title { font-size: 1.2rem; color: rgb(var(--bt-text) / 1); margin: 0 0 0.35rem; font-weight: 600; }
.bt-empty-sub { color: rgb(var(--bt-text-muted) / 1); font-size: 0.9rem; }

/* ---- Interests ---------------------------------------------------------- */
.bt-interests-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bt-backlink { display: inline-block; margin: 0 0 1rem; color: rgb(var(--bt-text-muted) / 1); font-size: 0.85rem; }
.bt-backlink:hover { color: rgb(var(--bt-text) / 1); }
.bt-interest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem; margin-top: 1.25rem; }
.bt-interest-card { position: relative; display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.95rem 1.05rem; border: 1px solid rgb(var(--bt-border) / 1); border-left-width: 4px;
  border-left-color: currentColor; border-radius: 0.6rem; background: rgb(var(--bt-surface) / 1);
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s; }
.bt-interest-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.bt-interest-card:hover { transform: translateY(-2px);
  box-shadow: 0 8px 22px rgb(var(--bt-bg) / 0.55); border-color: currentColor; }
.bt-interest-card:hover::after { opacity: 0.05; }
.bt-interest-card > * { position: relative; z-index: 1; }
.bt-interest-name { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600;
  font-size: 1rem; color: rgb(var(--bt-text) / 1); }
.bt-interest-name .bt-ico { width: 1rem; height: 1rem; color: currentColor; }
.bt-interest-desc { color: rgb(var(--bt-text-muted) / 1); font-size: 0.82rem; }
.bt-interest-momentum { color: rgb(var(--bt-text-muted) / 1); font-size: 0.78rem; margin-top: 0.15rem; }
.bt-interest-momentum strong { color: rgb(var(--bt-text) / 1); }

.bt-interest-header { padding: 1.1rem 1.25rem; border: 1px solid rgb(var(--bt-border) / 1);
  border-left: 4px solid currentColor; border-radius: 0.7rem; margin-bottom: 1.5rem;
  background: rgb(var(--bt-surface) / 1); }
.bt-interest-title { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: rgb(var(--bt-text) / 1); }
.bt-interest-title .bt-ico { width: 1.3rem; height: 1.3rem; color: currentColor; }
.bt-interest-sub { color: rgb(var(--bt-text-muted) / 1); margin: 0.4rem 0 0; }
.bt-interest-strip { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 0.7rem;
  color: rgb(var(--bt-text-muted) / 1); font-size: 0.82rem; }
.bt-interest-strip strong { color: rgb(var(--bt-text) / 1); font-size: 1rem; }

/* Tend your Trellis (Phase 26) — cover-led interest cards; "tend everything" is a corner card. */
.bt-trellis-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.bt-trellis-head-text { flex: 1 1 24rem; }
.bt-trellis-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem; }
.bt-trellis-title .bt-ico { width: 1.4rem; height: 1.4rem; color: rgb(var(--bt-accent) / 1); }
.bt-trellis-sub { color: rgb(var(--bt-text-muted) / 1); max-width: 46rem; margin: 0; }

/* Tend-everything: a compact card pinned top-right, across from the title. */
.bt-trellis-everything { flex: 0 1 21rem; position: relative; overflow: hidden; margin: 0;
  border: 1px solid rgb(var(--bt-border) / 1); border-radius: 0.8rem; padding: 0.85rem 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  background:
    radial-gradient(90% 140% at 100% 0%, rgb(var(--bt-accent) / 0.22), transparent 62%),
    linear-gradient(120deg, rgb(var(--bt-accent) / 0.08), rgb(var(--bt-surface) / 1) 62%); }
.bt-trellis-everything-lattice { position: absolute; inset: 0; width: 100%; height: 100%;
  color: rgb(var(--bt-accent) / 1); opacity: 0.12; pointer-events: none; }
.bt-trellis-everything-link { position: relative; display: flex; align-items: center; gap: 0.7rem;
  width: 100%; color: inherit; text-decoration: none; cursor: pointer;
  border: 0; padding: 0; margin: 0; font: inherit; text-align: left; background: none;
  appearance: none; -webkit-appearance: none; }
.bt-trellis-everything-link:hover .bt-trellis-everything-kicker { color: rgb(var(--bt-accent) / 1); }
.bt-trellis-everything-logo { flex: 0 0 auto; border-radius: 0.5rem; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); }
.bt-trellis-everything-text { display: block; min-width: 0; }
.bt-trellis-everything-kicker { display: block; font-weight: 700; font-size: 0.98rem;
  color: rgb(var(--bt-text) / 1); }
.bt-trellis-everything-meta { display: block; font-family: var(--bt-mono); font-size: 0.75rem;
  color: rgb(var(--bt-text-muted) / 1); margin-top: 0.12rem; }
.bt-trellis-everything-actions { position: relative; display: flex; justify-content: flex-end; }
.bt-trellis-everything-actions form { margin: 0; }

.bt-trellis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.9rem; margin: 0 0 1.5rem; }
.bt-trellis-card { display: flex; flex-direction: column; overflow: hidden; margin: 0;
  border: 1px solid rgb(var(--bt-border) / 1); border-radius: 0.8rem; background: rgb(var(--bt-surface) / 1);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.bt-trellis-card:hover { transform: translateY(-2px);
  border-color: color-mix(in srgb, currentColor 45%, rgb(var(--bt-border) / 1));
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.24); }

.bt-trellis-cover { display: block; width: 100%; position: relative; aspect-ratio: 16 / 10;
  overflow: hidden; color: inherit; text-decoration: none; cursor: pointer;
  border: 0; padding: 0; margin: 0; font: inherit; text-align: left; appearance: none; -webkit-appearance: none;
  background:
    radial-gradient(120% 130% at 78% 8%, color-mix(in srgb, currentColor 60%, transparent), transparent 62%),
    linear-gradient(158deg, color-mix(in srgb, currentColor 82%, #0b0b12), color-mix(in srgb, currentColor 42%, #0b0b12)); }
.bt-trellis-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dark bottom scrim (theme-independent, keeps the white title legible on any photo) plus a
   palette tint so a motley mosaic still reads as one themed cover. */
.bt-trellis-cover-wash { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 36%, rgb(0 0 0 / 0.72)),
    linear-gradient(0deg, color-mix(in srgb, currentColor 24%, transparent), transparent 64%); }
.bt-trellis-cover-glyph { position: absolute; top: 0.55rem; left: 0.7rem; display: inline-flex;
  color: rgb(255 255 255 / 0.92); }
.bt-trellis-cover-glyph .bt-ico { width: 1.05rem; height: 1.05rem;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.55)); }
.is-coverless .bt-trellis-cover-glyph { inset: 0; top: auto; left: auto; align-items: center;
  justify-content: center; opacity: 0.55; }
.is-coverless .bt-trellis-cover-glyph .bt-ico { width: 2.6rem; height: 2.6rem; }
.bt-trellis-name { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.6rem; margin: 0;
  font-weight: 700; font-size: 1.02rem; line-height: 1.2; color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }

.bt-trellis-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.85rem 0.85rem; }
.bt-trellis-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.bt-trellis-count { font-weight: 600; color: rgb(var(--bt-text) / 1); }
.bt-trellis-min { font-family: var(--bt-mono); font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-trellis-growth { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.72rem; align-items: center; }
.bt-grow-done { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600;
  color: rgb(var(--bt-accent) / 1); }
.bt-grow-done .bt-ico { width: 0.8rem; height: 0.8rem; }
.bt-grow-new { color: rgb(var(--bt-text-muted) / 1); font-family: var(--bt-mono); }
.bt-trellis-actions { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end;
  margin-top: 0.15rem; }
.bt-trellis-actions form { margin: 0; }
/* Subtle zoom on the cover image when you hover the card — reinforces "this is clickable". */
.bt-trellis-card:hover .bt-trellis-cover-img { transform: scale(1.04); }
.bt-trellis-cover-img { transition: transform .25s ease; }
.bt-trellis-cover:focus-visible { outline: 2px solid rgb(var(--bt-accent) / 1); outline-offset: -2px; }

.bt-trellis-empty { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bt-trellis-empty-logo { opacity: 0.85; margin-bottom: 0.5rem; border-radius: 0.6rem; }

.bt-interest-catchup { margin-top: 0.7rem; }
.bt-brief-section { padding: 0.5rem 0 1rem; border-bottom: 1px solid rgb(var(--bt-border) / 1); }
.bt-brief-cites { font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 1); font-family: var(--bt-mono); }

/* Secondary chip + compact CTA — the View all / Start review pairing on catchup cards (Phase 25). */
.bt-chip-ghost { color: rgb(var(--bt-text-muted) / 1); border-color: transparent;
  background: transparent; }
.bt-chip-ghost:hover { color: rgb(var(--bt-text) / 1); border-color: rgb(var(--bt-border) / 1); }
.bt-cta-sm { padding: 0.42rem 0.85rem; font-size: 0.84rem; border-radius: 0.5rem; }

/* --- Catchup review: per-card stepper (Phase 25) --- */
.bt-review { display: flex; flex-direction: column; gap: 0.9rem; }
.bt-review-topbar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.bt-review-leave { margin: 0; }
.bt-review-leave .bt-backlink { background: none; border: none; cursor: pointer; padding: 0; font: inherit; }
.bt-review-scope { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600;
  margin-left: auto; }
.bt-review-scope .bt-ico { width: 1rem; height: 1rem; }
.bt-review-count { font-family: var(--bt-mono); font-size: 0.8rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-review-progress { height: 4px; border-radius: 999px; background: rgb(var(--bt-border) / 1); overflow: hidden; }
.bt-review-progress-fill { display: block; height: 100%; background: rgb(var(--bt-accent) / 1);
  transition: width 0.25s ease; }

.bt-review-body { display: flex; align-items: stretch; gap: 0.6rem; }
.bt-review-arrow { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center;
  justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; font-size: 1.2rem;
  text-decoration: none; color: rgb(var(--bt-text) / 1); border: 1px solid rgb(var(--bt-border) / 1);
  background: rgb(var(--bt-surface) / 1); }
.bt-review-arrow:hover { border-color: rgb(var(--bt-accent) / 0.6); }
.bt-review-arrow.is-disabled { opacity: 0.3; pointer-events: none; }
.bt-review-grid { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.9rem; align-items: start; }
.bt-review-card { min-width: 0; }

.bt-summary-card { border: 1px solid rgb(var(--bt-border) / 1); border-radius: 0.6rem;
  background: rgb(var(--bt-surface) / 1); padding: 0.9rem 1rem; max-height: 62vh; overflow: auto; }
.bt-summary-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: rgb(var(--bt-text-muted) / 1);
  margin: 0 0 0.6rem; }
.bt-summary-head .bt-ico { width: 0.9rem; height: 0.9rem; color: rgb(var(--bt-accent) / 1); }
.bt-summary-body { line-height: 1.55; }
.bt-summary-fallback { color: rgb(var(--bt-text-muted) / 1); font-style: italic; }
.bt-summary-paywalled { margin: 0; color: rgb(var(--bt-text-muted) / 1); font-style: italic;
  display: inline-flex; align-items: center; gap: 0.4rem; }
.bt-summary-paywalled .bt-ico { width: 0.9rem; height: 0.9rem; }

.bt-loader { display: flex; align-items: center; gap: 0.55rem; color: rgb(var(--bt-text-muted) / 1);
  padding: 0.4rem 0; }
.bt-loader-spin { display: inline-flex; color: rgb(var(--bt-accent) / 1);
  animation: bt-spin 1.4s linear infinite; }
.bt-loader-spin .bt-ico { width: 1rem; height: 1rem; }
.bt-loader-phrase { font-style: italic; }
@keyframes bt-spin { to { transform: rotate(360deg); } }

.bt-review-status { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.4rem;
  font-size: 0.85rem; padding: 0.32rem 0.7rem; border-radius: 999px; border: 1px solid rgb(var(--bt-border) / 1);
  color: rgb(var(--bt-text-muted) / 1); background: rgb(var(--bt-surface) / 1); }
.bt-review-status .bt-ico { width: 0.9rem; height: 0.9rem; }
.bt-review-status.is-reviewed { color: rgb(var(--bt-accent) / 1); border-color: rgb(var(--bt-accent) / 0.6); }
.bt-review-status.is-reference { color: rgb(var(--bt-text) / 1); border-color: rgb(var(--bt-accent) / 0.4); }
.bt-review-status.is-later { color: rgb(var(--bt-text) / 1); }

/* Summary column: a 'Tend later' checkbox above & right of the AI summary (Phase 26 review). */
.bt-review-summary-col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.bt-tend-later { display: inline-flex; align-self: flex-end; align-items: center; gap: 0.5rem;
  font-size: 0.95rem; color: rgb(var(--bt-text-muted) / 1); cursor: pointer; user-select: none; }
.bt-tend-later:hover { color: rgb(var(--bt-text) / 1); }
/* A real checkbox — empty box reads as a surface tile with a border, not a solid black button. */
.bt-tend-later input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative;
  width: 1.2rem; height: 1.2rem; border-radius: 0.3rem; cursor: pointer;
  border: 1.5px solid rgb(var(--bt-border) / 1); background: rgb(var(--bt-surface-raised) / 1); }
.bt-tend-later input:hover { border-color: rgb(var(--bt-accent) / 0.6); }
.bt-tend-later input:checked { background: rgb(var(--bt-accent) / 1); border-color: rgb(var(--bt-accent) / 1); }
.bt-tend-later input:checked::after { content: ""; position: absolute; left: 0.4rem; top: 0.16rem;
  width: 0.3rem; height: 0.58rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bt-tend-later input:focus-visible { outline: 2px solid rgb(var(--bt-accent) / 1); outline-offset: 2px; }

/* Back / Next: identical size + shape, centered as a group with breathing room; on phones the
   group sticks to the bottom of the screen (item 6). */
.bt-review-nav { display: flex; align-items: center; justify-content: center; gap: 2.75rem;
  padding: 0.9rem 0 0.3rem; }
.bt-review-nav form { margin: 0; }
.bt-review-navbtn { box-sizing: border-box; display: inline-flex; align-items: center;
  justify-content: center; gap: 0.4rem; min-width: 9rem; padding: 0.55rem 0.95rem;
  font: 500 0.88rem/1 var(--bt-font); border-radius: var(--bt-r-sm); border: 1.5px solid transparent; }
/* Back is a secondary, outlined button — clearly clickable when enabled… */
.bt-review-back { background: transparent; color: rgb(var(--bt-accent) / 1);
  border-color: rgb(var(--bt-accent) / 0.7); cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.bt-review-back:hover { background: rgb(var(--bt-accent) / 0.12); border-color: rgb(var(--bt-accent) / 1); }
/* …and unmistakably inert when disabled (faded text + hairline border, no-go cursor). */
.bt-review-back.is-disabled { color: rgb(var(--bt-text-muted) / 0.4);
  border-color: rgb(var(--bt-border) / 0.7); background: transparent; cursor: not-allowed; pointer-events: none; }

@media (max-width: 640px) {
  .bt-review-grid { grid-template-columns: 1fr; }
  .bt-review-nav { position: sticky; bottom: 0; z-index: 10; gap: 1rem; padding: 0.7rem 0;
    background: rgb(var(--bt-bg) / 0.97); border-top: 1px solid rgb(var(--bt-border) / 1); }
  .bt-review-navbtn { flex: 1 1 0; min-width: 0; }
}

.bt-brief-overview.is-loading { padding: 1rem 0; }
.bt-review-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.bt-review-actions-overview { margin-top: 1rem; }

/* Session preview (Phase 26) — concrete "here's what you're about to tend". */
.bt-preview-head { margin: 0.4rem 0 1rem; }
.bt-preview-lead { color: rgb(var(--bt-text-muted) / 1); margin: 0.35rem 0 0; font-size: 1.02rem; }
.bt-preview-lead strong { color: rgb(var(--bt-text) / 1); }
.bt-preview-types { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem; }
.bt-preview-type { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem;
  font-family: var(--bt-mono); color: rgb(var(--bt-text-muted) / 1);
  border: 1px solid rgb(var(--bt-border) / 1); border-radius: 999px; padding: 0.28rem 0.7rem; }
.bt-preview-type .bt-ico { width: 0.85rem; height: 0.85rem; color: rgb(var(--bt-accent) / 1); }

/* A responsive grid of small cards (≈3-4 across on wide, 1 on phones). Thumb is vertically
   centred against a word-wrapping title. */
.bt-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.7rem; margin: 0 0 1rem; }
.bt-preview-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem;
  border: 1px solid rgb(var(--bt-border) / 1); border-radius: 0.6rem; background: rgb(var(--bt-surface) / 1); }
.bt-preview-card[class*="bt-pal-"] { border-left: 3px solid currentColor; }
.bt-preview-thumb { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 0.45rem;
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--bt-surface-raised) / 1); color: rgb(var(--bt-text-muted) / 1); }
.bt-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bt-preview-thumb .bt-ico { width: 1.1rem; height: 1.1rem; }
.bt-preview-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.bt-preview-title { color: rgb(var(--bt-text) / 1); line-height: 1.35; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bt-preview-interest { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem;
  font-weight: 600; color: currentColor; }
.bt-preview-interest .bt-ico { width: 0.7rem; height: 0.7rem; }
.bt-preview-more { margin: 0 0 1.25rem; font-size: 0.8rem; font-family: var(--bt-mono);
  color: rgb(var(--bt-text-muted) / 1); }
.bt-preview-actions { display: flex; gap: 0.7rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; }
.bt-preview-actions form { margin: 0; }
.bt-review-actions-overview form { margin: 0; }

@media (max-width: 640px) {
  .bt-review-grid { grid-template-columns: 1fr; }
  .bt-review-arrow { width: 1.9rem; height: 1.9rem; font-size: 1.05rem; }
  .bt-summary-card { max-height: none; }
}

/* Emergent clusters on the interest screen (Phase 21). */
.bt-clusters { margin: 0 0 1.5rem; }
.bt-clusters-head { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1rem; margin: 0 0 0.6rem; }
.bt-clusters-head .bt-ico { width: 0.95rem; height: 0.95rem; color: rgb(var(--bt-accent) / 1); }
.bt-cluster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; }
.bt-cluster-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.75rem 0.9rem;
  border: 1px solid rgb(var(--bt-border) / 1); border-radius: 0.6rem; background: rgb(var(--bt-surface) / 1); }
.bt-cluster-nascent { border-style: dashed; }
.bt-cluster-label { font-weight: 600; color: rgb(var(--bt-text) / 1); font-size: 0.92rem; }
.bt-cluster-summary { font-size: 0.8rem; color: rgb(var(--bt-text-muted) / 1); line-height: 1.4; }
.bt-cluster-meta { font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 1); font-family: var(--bt-mono); }

/* ---- Collections (folders inside an interest, Phase 24c) ----------------- */
.bt-folders { margin-bottom: 1.5rem; }
.bt-folders-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  flex-wrap: wrap; margin-bottom: 0.6rem; }
.bt-folders-head .bt-clusters-head { margin: 0; }
.bt-folders-head .bt-clusters-head .bt-ico { color: rgb(var(--bt-accent) / 1); }
.bt-folder-new { display: inline-flex; align-items: center; gap: 0.4rem; }
.bt-folder-new .bt-input { width: auto; min-width: 11rem; }
.bt-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.6rem; }
.bt-folder-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.7rem 0.85rem;
  border: 1px solid currentColor; border-radius: 0.6rem; background: rgb(var(--bt-surface) / 1);
  transition: transform 0.1s; }
.bt-folder-card:hover { transform: translateY(-1px); filter: brightness(1.05); }
.bt-folder-name { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600;
  color: rgb(var(--bt-text) / 1); font-size: 0.9rem; }
.bt-folder-name .bt-ico { width: 0.9rem; height: 0.9rem; color: currentColor; }
.bt-folder-desc { font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-folder-count { font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 1); font-family: var(--bt-mono); }
.bt-folder-controls { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }
.bt-breadcrumb { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem;
  font-size: 0.82rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-addnotes { margin-bottom: 1rem; }
.bt-addnotes-list { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem;
  max-height: 18rem; overflow-y: auto; }
.bt-addnotes-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.4rem 0.6rem; border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-surface) / 0.5); }
.bt-addnotes-text { font-size: 0.84rem; color: rgb(var(--bt-text) / 0.92); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bt-seg { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---- Sharing (Phase 24e) ------------------------------------------------- */
.bt-people { margin-top: 1.25rem; }
.bt-people-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bt-person-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0.7rem; border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-surface) / 0.5); }
.bt-person-email { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.86rem;
  color: rgb(var(--bt-text) / 1); margin-right: auto; }
.bt-person-role { width: auto; min-width: 8rem; }
.bt-chip.is-active { border-color: rgb(var(--bt-accent) / 0.7); color: rgb(var(--bt-text) / 1);
  background: rgb(var(--bt-accent) / 0.14); }
.bt-pending-body { display: flex; flex-direction: column; gap: 0.2rem; margin-right: auto; min-width: 0; }
.bt-pending-actions { display: inline-flex; gap: 0.4rem; }
/* "added by …" attribution on a contributed card — a third signal, distinct from chips/tags. */
.bt-attrib { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 0 0.4rem;
  font-size: 0.68rem; color: rgb(var(--bt-text-muted) / 1); font-family: var(--bt-mono); }
.bt-attrib .bt-ico { width: 0.72rem; height: 0.72rem; }
/* Contributor compose box on a shared place. */
.bt-contribute { display: flex; gap: 0.4rem; align-items: flex-start; margin-bottom: 1rem; }
.bt-contribute textarea { flex: 1; resize: vertical; }

/* Interest membership chips on a note card (board marker — distinct from #tags). */
.bt-card-interests { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
/* Interests read as boards, #tags as pills: squared corners + a fuller palette-tinted fill set
   the leaf chips apart from the round, faintly-tinted tag chips. The fill mixes the chip's own
   palette colour (currentColor) over the surface, so each interest keeps its hue. */
.bt-interest-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6rem;
  padding: 0.12rem 0.45rem; border: 1px solid; border-radius: 0.22rem; font-weight: 600; line-height: 1.5;
  background: color-mix(in srgb, currentColor 18%, rgb(var(--bt-surface) / 1)); }
.bt-interest-chip .bt-ico { width: 0.7rem; height: 0.7rem; }
.bt-interest-chip-link { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; }
.bt-interest-chip-x { position: relative; display: inline-flex; opacity: 0.55; }
.bt-interest-chip-x:hover, .bt-interest-chip-x[open] { opacity: 1; }
.bt-interest-chip-x > summary { list-style: none; cursor: pointer; }
.bt-interest-chip-x > summary::-webkit-details-marker { display: none; }
.bt-interest-chip-pop { position: absolute; top: calc(100% + 0.3rem); left: 0; z-index: 40;
  background: rgb(var(--bt-surface) / 1); border: 1px solid rgb(var(--bt-border) / 1);
  border-radius: 0.5rem; padding: 0.5rem; box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); white-space: nowrap; }
.bt-card:has(.bt-interest-chip-x[open]) { z-index: 50; }

/* Interests management — a first-class section on the interests page (Phase 24 follow-up). */
.bt-interests-rule { border: 0; border-top: 1px solid var(--bt-line); margin: 1.75rem 0 1.25rem; }
.bt-interests-manage { padding: 1.15rem 1.3rem; border: 1px solid var(--bt-line);
  border-radius: 0.7rem; background: rgb(var(--bt-surface) / 0.55); }
.bt-interests-manage h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.bt-interest-manage-list { list-style: none; padding: 0; margin: 0.85rem 0; display: flex;
  flex-direction: column; gap: 0.45rem; }
/* each entry is a tidy row-card: chip on the left, meta + actions flush right. */
.bt-interest-manage-list li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.45rem 0.65rem; border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-surface) / 1); }
.bt-interest-manage-list li.bt-empty-sub { border: 0; background: none; padding: 0.2rem 0; }
.bt-interest-manage-list li > .bt-empty-sub { margin-left: auto; font-family: var(--bt-mono);
  font-size: 0.72rem; }
.bt-interest-manage-list li > .bt-empty-sub ~ .bt-chip,
.bt-interest-manage-list li > .bt-empty-sub ~ .bt-icon { margin-left: 0; }
.bt-interest-rm { opacity: 0.55; }
.bt-interest-rm:hover { opacity: 1; color: rgb(var(--bt-danger) / 1); }
.bt-interest-add { display: flex; gap: 0.5rem; align-items: center; margin: 0.85rem 0 0; }
.bt-interest-add .bt-input { flex: 1; min-width: 0; }
.bt-interest-discovered { margin-top: 1.35rem; padding-top: 1.1rem;
  border-top: 1px dashed rgb(var(--bt-border) / 1); }
.bt-interest-discovered h3 { display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.15rem; font-size: 0.95rem; }
.bt-interest-discovered h3 .bt-ico { width: 0.9rem; height: 0.9rem; color: rgb(var(--bt-accent) / 1); }

/* ---- Media -------------------------------------------------------------- */
.bt-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0.35rem; margin: 0.55rem 0; }
.bt-media-thumb { width: 100%; height: 5rem; object-fit: cover; border-radius: var(--bt-r-sm); cursor: zoom-in; border: 1px solid var(--bt-line); }
/* Static media on a card — same look as the interactive thumb/preview, but inert: clicking the card
   opens the modal (where it plays / zooms), so no zoom-in cursor and the play badge is decorative. */
.bt-media-still { width: 100%; height: 5rem; object-fit: cover; border-radius: var(--bt-r-sm); border: 1px solid var(--bt-line); display: block; }
.bt-media-single .bt-media-still { width: 100%; height: auto; object-fit: contain; background: rgb(var(--bt-bg) / 0.6); }
.bt-preview-still { cursor: pointer; }
.bt-preview-play-still { pointer-events: none; }
.bt-media-file-still { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.6rem; border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-bg) / 0.5); color: rgb(var(--bt-text) / 0.92); font-size: 0.82rem; min-width: 0; }
.bt-media-video { width: 100%; border-radius: var(--bt-r-sm); }
/* document/file attachment: a download chip (spans the grid so the name has room) */
.bt-media-file { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.6rem; border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-bg) / 0.5); color: rgb(var(--bt-text) / 0.92); font-size: 0.82rem;
  text-decoration: none; min-width: 0; }
.bt-media-file:hover { border-color: var(--bt-line-strong); color: rgb(var(--bt-accent) / 1); }
/* Audio attachment rendered as a button (opens the modal player) — reset native button chrome. */
.bt-media-file-btn { font: inherit; cursor: pointer; text-align: left; width: 100%; }
.bt-media-file .bt-ico { width: 0.95rem; height: 0.95rem; flex: none; }
.bt-media-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-media-label { display: inline-block; cursor: pointer; font-size: 0.85rem; color: rgb(var(--bt-accent) / 1); }

/* ---- Feed view modes (Cards / Compact / List / Timeline / Oldest) ------- */
/* Cards + Oldest use the default .bt-feed masonry above; only order differs. */

/* View picker control in the toolbar. */
.bt-viewpicker { display: inline-flex; align-items: center; gap: 0.3rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-viewpicker .bt-ico { width: 0.95rem; height: 0.95rem; }
.bt-viewpicker select { font: inherit; font-size: 0.8rem; color: rgb(var(--bt-text) / 1);
  background: rgb(var(--bt-surface) / 1); border: 1px solid var(--bt-line);
  border-radius: var(--bt-r-sm); padding: 0.24rem 0.5rem; cursor: pointer; }

/* Compact: denser, narrower columns; clamp body; small floated thumb. */
.bt-feed--compact { columns: 12rem; column-gap: 0.55rem; }
.bt-feed--compact .bt-card { --bt-pad-x: 0.65rem; --bt-pad-y: 0.55rem; margin-bottom: 0.55rem; }
.bt-feed--compact .bt-card-body { font-size: 0.78rem; display: -webkit-box;
  -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bt-feed--compact .bt-card-tags { display: none; }

/* List: single readable column of rows. */
.bt-feed--list { columns: unset; max-width: 48rem; margin: 0 auto; }
.bt-feed--list .bt-card { margin-bottom: 0.6rem; }
.bt-feed--list .bt-card-body { display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6;
  -webkit-box-orient: vertical; overflow: hidden; }

/* Compact + List share a thumbnail-left treatment: media floats ~1/3 width, text wraps. */
.bt-feed--compact .bt-preview, .bt-feed--list .bt-preview,
.bt-feed--compact .bt-media-grid, .bt-feed--list .bt-media-grid {
  float: left; width: 34%; max-width: 11rem; margin: 0.1rem 0.6rem 0.3rem 0; }
.bt-feed--compact .bt-media-single .bt-media-thumb, .bt-feed--list .bt-media-single .bt-media-thumb {
  max-height: 8rem; }
.bt-feed--compact .bt-card-chips, .bt-feed--list .bt-card-chips { clear: both; }

/* Timeline: stacked date sections, each its own masonry. */
.bt-feed--timeline { columns: unset; }
.bt-feed-bucket { font-family: var(--bt-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgb(var(--bt-text-muted) / 1); margin: 1.2rem 0 0.55rem;
  padding-bottom: 0.3rem; border-bottom: 1px solid var(--bt-line); }
.bt-feed-bucket:first-child { margin-top: 0; }
.bt-feed-section { columns: 16rem; column-gap: 0.7rem; }

/* PDF first-page preview (rendered at intake) + eye-icon affordance. */
.bt-preview-doc { position: relative; cursor: pointer; }
.bt-doc-page { display: block; width: 100%; height: auto; }
.bt-preview-eye { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgb(0 0 0 / 0.55); color: #fff; opacity: 0; transition: opacity 0.12s ease; }
.bt-preview-doc:hover .bt-preview-eye { opacity: 1; }
.bt-preview-eye .bt-ico { width: 1.4rem; height: 1.4rem; }

/* Audio file player — full card width. */
.bt-media-audio { width: 100%; margin: 0.5rem 0 0; height: 2.4rem; }

/* Media modal — one pop-over for video (YouTube)/PDF/audio embeds and full-size images. */
.bt-mediamodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: 3rem 1.5rem; cursor: zoom-out;
  background: rgb(0 0 0 / 0.86); backdrop-filter: blur(6px); animation: bt-fade 0.15s ease; }
.bt-mediamodal-dialog { position: relative; max-width: 96vw; max-height: 92vh; cursor: default; }
.bt-mediamodal-close { position: absolute; top: -2.6rem; right: -0.25rem; width: 2.1rem; height: 2.1rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1;
  color: #fff; background: rgb(255 255 255 / 0.14); border: 0; border-radius: 999px; cursor: pointer; }
.bt-mediamodal-close:hover { background: rgb(255 255 255 / 0.28); }
.bt-mediamodal-frame { display: block; border: 0; border-radius: 0.6rem; background: #000;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); }
.bt-mediamodal-video { width: min(94vw, 1180px); }
.bt-mediamodal-video .bt-mediamodal-frame { width: 100%; aspect-ratio: 16 / 9; }
.bt-mediamodal-pdf { width: min(94vw, 1100px); height: 90vh; }
.bt-mediamodal-pdf .bt-mediamodal-frame { width: 100%; height: 100%; }
.bt-mediamodal-audio { width: min(92vw, 560px); }
.bt-mediamodal-audio .bt-mediamodal-frame { width: 100%; height: 152px; }
/* Direct-file players (uploaded video/audio attachments opened in the viewer). */
.bt-mediamodal-vid { display: block; max-width: 94vw; max-height: 88vh; border-radius: 0.6rem;
  background: #000; box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); }
.bt-mediamodal-aud { display: block; width: min(92vw, 560px); }
.bt-mediamodal-map { width: min(94vw, 1100px); }
.bt-mediamodal-mapwrap { display: flex; flex-direction: column; gap: 0.6rem; }
.bt-mediamodal-map .bt-mediamodal-frame { width: 100%; height: 76vh; }
.bt-mediamodal-maplink { align-self: flex-start; color: #fff; text-decoration: none;
  background: rgb(var(--bt-accent) / 0.9); padding: 0.42rem 0.85rem; border-radius: var(--bt-r-sm); font-size: 0.85rem; }
.bt-mediamodal-maplink:hover { background: rgb(var(--bt-accent) / 1); }
.bt-mediamodal-img { display: block; max-width: 94vw; max-height: 92vh; border-radius: 0.6rem;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); }

/* ---- Modal -------------------------------------------------------------- */
.bt-modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding-top: 9vh;
  background: rgb(0 0 0 / 0.55); backdrop-filter: blur(5px); animation: bt-fade 0.15s ease;
  overscroll-behavior: contain; }
/* While an overlay modal is open the pinboard behind it must not scroll — the wheel scrolls only the
   modal, and only when its own content overflows (the modal is overflow-y:auto). overscroll-behavior
   stops scroll-chaining from the modal's edges back to the page. The body is pinned with
   position:fixed (top offset set inline by site.js) so iOS Safari holds the viewport in place and
   keeps the fixed backdrop pinned to it instead of opening the panel scrolled off the top. */
body.bt-modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.bt-modal { width: min(40rem, 92vw); background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: 0.85rem; padding: 1.25rem; box-shadow: 0 30px 70px rgb(0 0 0 / 0.5); animation: bt-rise 0.16s ease; }
.bt-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.6rem; }
/* Roomy variant for compose + tag managers — most of the screen, scrolls if content overflows. */
.bt-modal-lg { width: min(56rem, 94vw); max-height: 86vh; overflow-y: auto; position: relative; }
/* The panel sections supply their own chrome as inline drawers; inside a modal the modal owns it. */
.bt-modal .bt-compose, .bt-modal .bt-tagform { background: none; border: 0; border-radius: 0;
  padding: 0; margin: 0; box-shadow: none; animation: none; }
.bt-modal .bt-compose-body { min-height: 9rem; }
.bt-checklist-toggle { margin-bottom: 0.7rem; }
.bt-checklist-toggle summary, .bt-import-export summary { cursor: pointer; color: rgb(var(--bt-text-muted) / 1); font-size: 0.85rem; margin-bottom: 0.5rem; }
.bt-media-upload { margin-bottom: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@keyframes bt-fade { from { opacity: 0; } }
@keyframes bt-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---- Ask AI modal ------------------------------------------------------- */
.bt-ask-modal { position: relative; }
.bt-modal-x { position: absolute; top: 0.7rem; right: 0.7rem; display: inline-flex; padding: 0.3rem;
  background: none; border: none; cursor: pointer; color: rgb(var(--bt-text-muted) / 1); border-radius: 0.4rem; }
.bt-modal-x:hover { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-line) / 0.6); }
.bt-modal-x .bt-ico { width: 1.05rem; height: 1.05rem; }

/* ---- Notification center modal (reusable in-app notification system) ----- */
.bt-notify { position: relative; width: min(34rem, 92vw); border-top: 3px solid rgb(var(--bt-accent) / 1); }
.bt-notify-error { border-top-color: rgb(var(--bt-danger) / 1); }
.bt-notify-head { display: flex; align-items: center; gap: 0.55rem; margin: 0 2rem 0.55rem 0; }
.bt-notify-head h2 { margin: 0; font-size: 1.1rem; }
.bt-notify-ico { display: inline-flex; color: rgb(var(--bt-accent) / 1); }
.bt-notify-error .bt-notify-ico { color: rgb(var(--bt-danger) / 1); }
.bt-notify-ico .bt-ico { width: 1.3rem; height: 1.3rem; }
.bt-notify-body { color: rgb(var(--bt-text-muted) / 1); font-size: 0.95rem; line-height: 1.5; margin: 0 0 1rem; }
.bt-notify-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.bt-ask-title { display: flex; align-items: center; gap: 0.45rem; margin: 0 2rem 0.4rem 0; }
.bt-ask-title .bt-ico { width: 1.2rem; height: 1.2rem; color: rgb(var(--bt-accent) / 1); }
.bt-ask-form { margin-top: 0.9rem; }
.bt-ask-answer-area { max-height: 52vh; overflow-y: auto; }
.bt-ask-ai .bt-ico { color: rgb(var(--bt-accent) / 1); }

/* ---- Inputs / forms ----------------------------------------------------- */
.bt-input, .bt-form input, .bt-form select, .bt-form textarea, .bt-modal textarea, .bt-modal input[type=text] {
  width: 100%; padding: 0.6rem 0.8rem; font: 400 0.95rem var(--bt-font); margin-bottom: 0.7rem;
  background: rgb(var(--bt-bg) / 0.6); color: rgb(var(--bt-text) / 1); border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); }
.bt-input:focus, .bt-form input:focus, .bt-modal textarea:focus { outline: none; border-color: rgb(var(--bt-accent) / 0.7); }
.bt-field-help { display: block; font-size: 0.8rem; color: rgb(var(--bt-text-muted) / 1); margin: -0.4rem 0 0.5rem; }
.bt-tz-detect { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.85rem;
  color: rgb(var(--bt-accent) / 1); text-decoration: underline; }

/* ---- Panels ------------------------------------------------------------- */
.bt-panel, .bt-panel-wide { background: rgb(var(--bt-surface) / 0.7); border: 1px solid var(--bt-line);
  border-radius: 0.9rem; padding: 1.5rem; max-width: 34rem; margin: 1.5rem auto; }
.bt-panel-wide { max-width: 100rem; }
.bt-panel h1 { margin-top: 0; letter-spacing: -0.02em; }
.bt-data-rights { font-size: 0.85rem; color: rgb(var(--bt-text-muted) / 1); margin: 0; }

/* Profile — grouped sections with clear dividers so settings don't run together. */
.bt-profile .bt-form { margin-bottom: 0.5rem; }
.bt-prof-section { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--bt-line); }
.bt-prof-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgb(var(--bt-text-muted) / 1); margin: 0 0 1rem; }
.bt-prof-toggles { display: flex; flex-direction: column; gap: 1.3rem; }
.bt-prof-toggles .bt-empty-sub { margin: 0.35rem 0 0; }
.bt-prof-footer { margin-top: 1.4rem; padding-top: 1.1rem; }

.bt-ai-toggle label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.bt-ai-toggle input[type=checkbox] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0;
  accent-color: rgb(var(--bt-accent) / 1); cursor: pointer; }
.bt-join { font-family: var(--bt-mono); font-size: 1.05rem; padding: 0.8rem 1rem; border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-bg) / 0.6); border: 1px dashed rgb(var(--bt-accent) / 0.4); }
.bt-price { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; margin: 1rem 0; }
.bt-price span { font-size: 0.85rem; font-weight: 400; color: rgb(var(--bt-text-muted) / 1); }

/* ---- Landing (lp-*) ----------------------------------------------------- */
.lp { max-width: 72rem; margin: 0 auto; }
.lp section { scroll-margin-top: 5rem; }

.lp-eyebrow { display: inline-block; font-family: var(--bt-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgb(var(--bt-accent) / 1); padding: 0.3rem 0.7rem; margin-bottom: 1.1rem;
  border: 1px solid rgb(var(--bt-accent) / 0.3); border-radius: 999px; background: rgb(var(--bt-accent) / 0.06); }

/* Hero */
.lp-hero { text-align: center; padding: clamp(2rem, 6vw, 4.5rem) 1rem 2rem; }
.lp-title { font-size: clamp(2.3rem, 6.4vw, 4.1rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700;
  margin: 0 0 1.2rem; background: linear-gradient(180deg, rgb(var(--bt-text) / 1), rgb(var(--bt-text) / 0.6));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-grad { background: linear-gradient(110deg, rgb(var(--bt-accent) / 1), rgb(var(--bt-palette-5, 244 114 182) / 1));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-sub { color: rgb(var(--bt-text-muted) / 1); max-width: 40rem; margin: 0 auto 1.9rem; font-size: 1.1rem; line-height: 1.6; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; align-items: center; }
.lp-cta-ghost { font: 500 0.92rem var(--bt-font); color: rgb(var(--bt-text-muted) / 1); padding: 0.6rem 0.4rem; }
.lp-cta-ghost:hover { color: rgb(var(--bt-text) / 1); }
.lp-price-note { color: rgb(var(--bt-text-muted) / 1); font-size: 0.88rem; margin-top: 1.1rem; }
.lp-price-note strong { color: rgb(var(--bt-text) / 1); }
.lp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center;
  padding: 0; margin: 2rem 0 0; font-size: 0.82rem; color: rgb(var(--bt-text-muted) / 1); }
.lp-trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.lp-trust .bt-ico { width: 1rem; height: 1rem; color: rgb(var(--bt-accent) / 1); }

/* Capture channels */
.lp-channels { text-align: center; padding: 1.5rem 1rem 2.5rem; }
.lp-channels-lead { color: rgb(var(--bt-text-muted) / 1); font-size: 1rem; margin: 0 0 1.2rem; }
.lp-channels-lead em { color: rgb(var(--bt-text) / 1); font-style: italic; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; }
.lp-chip { display: inline-flex; align-items: center; gap: 0.42rem; font-size: 0.85rem; font-weight: 500;
  color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 0.8); border: 1px solid var(--bt-line);
  border-radius: 999px; padding: 0.42rem 0.85rem; }
.lp-chip .bt-ico { width: 1rem; height: 1rem; color: rgb(var(--bt-accent) / 1); }
.lp-chip small { color: rgb(var(--bt-text-muted) / 1); font-size: 0.72rem; }

/* Card-type showcase — a masonry gallery of real captures, echoing the live feed */
.lp-showcase { padding: 2rem 1rem 1rem; }
.lp-shots { columns: 3 19rem; column-gap: 1.1rem; max-width: 66rem; margin: 0 auto; }
.lp-shot { break-inside: avoid; margin: 0 0 1.1rem; }
.lp-shot img { display: block; width: 100%; height: auto; border-radius: 0.9rem;
  border: 1px solid var(--bt-line); }
.lp-shot figcaption { font-family: var(--bt-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgb(var(--bt-text-muted) / 1); text-align: center;
  margin-top: 0.55rem; }
@media (max-width: 640px) { .lp-shots { columns: 1; } }

/* Section heads */
.lp-sec-head { text-align: center; max-width: 40rem; margin: 0 auto 2rem; }
.lp-sec-head h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -0.03em; margin: 0 0 0.7rem; line-height: 1.1; }
.lp-sec-head p { color: rgb(var(--bt-text-muted) / 1); font-size: 1.02rem; margin: 0; }

/* Feature grid */
.lp-features { padding: 2.5rem 1rem; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 1rem; }
.lp-card { position: relative; background: rgb(var(--bt-surface) / 0.55); border: 1px solid var(--bt-line);
  border-radius: 0.9rem; padding: 1.5rem; transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; }
.lp-card:hover { border-color: rgb(var(--bt-accent) / 0.5); transform: translateY(-2px);
  background: rgb(var(--bt-surface) / 0.85); }
.lp-card h3 { margin: 0.9rem 0 0.45rem; font-size: 1.05rem; letter-spacing: -0.01em; }
.lp-card h3 code, .lp-card p code { font-family: var(--bt-mono); font-size: 0.92em; color: rgb(var(--bt-accent) / 1);
  background: rgb(var(--bt-accent) / 0.1); padding: 0.05em 0.35em; border-radius: 0.3rem; }
.lp-card p { margin: 0; color: rgb(var(--bt-text-muted) / 1); font-size: 0.92rem; line-height: 1.55; }
.lp-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
  border-radius: 0.65rem; background: rgb(var(--bt-accent) / 0.12); color: rgb(var(--bt-accent) / 1); }
.lp-ico .bt-ico { width: 1.35rem; height: 1.35rem; }
.lp-card-accent { background: rgb(var(--bt-accent) / 0.08); border-color: rgb(var(--bt-accent) / 0.35); }
.lp-card-soon { border-style: dashed; }
.lp-soon { font-family: var(--bt-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  vertical-align: middle; color: rgb(var(--bt-bg) / 1); background: rgb(var(--bt-accent) / 0.85);
  padding: 0.12rem 0.4rem; border-radius: 999px; margin-left: 0.35rem; }

/* Comparison table */
.lp-compare { padding: 3rem 1rem; }
.lp-table-wrap { overflow-x: auto; border: 1px solid var(--bt-line); border-radius: 0.9rem; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 34rem; }
.lp-table th, .lp-table td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--bt-line); }
.lp-table thead th { font-family: var(--bt-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgb(var(--bt-text-muted) / 1); background: rgb(var(--bt-surface) / 0.6); }
.lp-table thead th:last-child { color: rgb(var(--bt-accent) / 1); }
.lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table td:first-child { font-weight: 500; }
.lp-table .lp-no { color: rgb(var(--bt-text-muted) / 1); }
.lp-table .lp-yes { color: rgb(var(--bt-text) / 1); }
.lp-table .lp-yes code { font-family: var(--bt-mono); font-size: 0.86em; color: rgb(var(--bt-accent) / 1); }
.lp-table tbody td:last-child { background: rgb(var(--bt-accent) / 0.05); }

/* Developer section */
.lp-dev { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; padding: 3rem 1rem; }
.lp-dev-copy h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -0.03em; margin: 0.4rem 0 0.9rem; line-height: 1.08; }
.lp-dev-copy > p { color: rgb(var(--bt-text-muted) / 1); font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.3rem; }
.lp-dev-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.lp-dev-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.lp-dev-list .bt-ico { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; color: rgb(var(--bt-accent) / 1); }
.lp-dev-list code { font-family: var(--bt-mono); font-size: 0.86em; color: rgb(var(--bt-accent) / 1); }
.lp-term { border: 1px solid var(--bt-line-strong); border-radius: 0.7rem; overflow: hidden;
  background: rgb(var(--bt-bg) / 0.85); box-shadow: 0 20px 50px rgb(0 0 0 / 0.35); }
.lp-term-bar { display: flex; gap: 0.4rem; padding: 0.7rem 0.85rem; background: rgb(var(--bt-surface) / 1);
  border-bottom: 1px solid var(--bt-line); }
.lp-term-bar span { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: rgb(var(--bt-text-muted) / 0.4); }
.lp-term-body { margin: 0; padding: 1.1rem 1.2rem; font-family: var(--bt-mono); font-size: 0.82rem; line-height: 1.7;
  color: rgb(var(--bt-text) / 1); white-space: pre-wrap; word-break: break-word; }
.lp-c-dim { color: rgb(var(--bt-text-muted) / 1); }
.lp-c-acc { color: rgb(var(--bt-accent) / 1); }
.lp-c-str { color: rgb(var(--bt-palette-1, 52 211 153) / 1); }
.lp-c-ok { color: rgb(var(--bt-palette-1, 52 211 153) / 1); }

/* How it works */
.lp-how { padding: 3rem 1rem; }
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; }
.lp-step { background: rgb(var(--bt-surface) / 0.5); border: 1px solid var(--bt-line); border-radius: 0.9rem; padding: 1.6rem; }
.lp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  font-family: var(--bt-mono); font-weight: 500; border-radius: 0.5rem; color: rgb(var(--bt-accent) / 1);
  background: rgb(var(--bt-accent) / 0.12); }
.lp-step h3 { margin: 0.9rem 0 0.4rem; letter-spacing: -0.01em; }
.lp-step p { margin: 0; color: rgb(var(--bt-text-muted) / 1); font-size: 0.94rem; line-height: 1.55; }

/* Final CTA */
.lp-final { text-align: center; padding: 4rem 1rem 3.5rem; margin: 1rem 0 0; border-top: 1px solid var(--bt-line); }
.lp-final h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); letter-spacing: -0.03em; margin: 0 0 0.7rem; }
.lp-final > p { color: rgb(var(--bt-text-muted) / 1); font-size: 1.05rem; max-width: 34rem; margin: 0 auto 1.8rem; }

@media (max-width: 760px) {
  .lp-dev { grid-template-columns: 1fr; }
}

/* ---- Theme Studio ------------------------------------------------------- */
.bt-studio { display: grid; grid-template-columns: 23rem 1fr; gap: 2rem; align-items: start; }
.bt-studio-controls h1 { margin-top: 0; }
.bt-studio-controls h3 { margin: 1.3rem 0 0.5rem; font-family: var(--bt-mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--bt-text-muted) / 1); }
.bt-swatch-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; font-size: 0.85rem; }
.bt-swatch-row input[type=color], .bt-palette-grid input[type=color] { width: 2.4rem; height: 1.8rem; padding: 0;
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); background: none; cursor: pointer; }
.bt-palette-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.3rem; }
.bt-palette-grid input[type=color] { width: 100%; }
.bt-save { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.bt-import-export { margin-top: 1.25rem; font-size: 0.85rem; }
.bt-studio-preview { position: sticky; top: 5rem; }
.bt-studio-preview .bt-feed { columns: auto; }
@media (max-width: 52rem) { .bt-studio { grid-template-columns: 1fr; } }

/* ---- allauth auth pages ------------------------------------------------- */
.bt-auth { max-width: 27rem; }
.bt-auth h1 { margin: 0 0 0.5rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.bt-auth p { color: rgb(var(--bt-text-muted) / 1); font-size: 0.92rem; }
.bt-auth form { margin: 1.25rem 0; }
.bt-auth label { display: block; font-family: var(--bt-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0.7rem 0 0.25rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-auth input[type=text], .bt-auth input[type=email], .bt-auth input[type=password], .bt-auth input:not([type]) {
  width: 100%; padding: 0.65rem 0.8rem; font: 400 0.95rem var(--bt-font);
  background: rgb(var(--bt-bg) / 0.6); color: rgb(var(--bt-text) / 1); border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); }
.bt-auth input:focus { outline: none; border-color: rgb(var(--bt-accent) / 0.7); }
.bt-auth input[type=checkbox] { margin-right: 0.4rem; }
/* allauth emits bare <button>/<a> with no classes — style them into real BrainTrellis
   buttons here so every entrance page (login, signup, reset, reauth…) matches the brand. */
.bt-auth button, .bt-auth [type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; cursor: pointer;
  width: 100%; margin-top: 1.1rem; font: 500 0.95rem/1 var(--bt-font);
  background: rgb(var(--bt-accent) / 1); color: rgb(var(--bt-bg) / 1);
  border: 0; padding: 0.7rem 1rem; border-radius: var(--bt-r-sm);
  transition: filter 0.15s ease, box-shadow 0.15s ease; }
.bt-auth button:hover, .bt-auth [type=submit]:hover {
  filter: brightness(1.06); box-shadow: 0 6px 20px rgb(var(--bt-accent) / 0.28); }
/* Lead-with-Google button — sits above the email/password form on login + signup. */
.bt-auth .bt-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%;
  margin-top: 1.25rem; padding: 0.7rem 1rem; cursor: pointer;
  font: 500 0.95rem/1 var(--bt-font); color: rgb(var(--bt-text) / 1);
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: var(--bt-r-sm); transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease; }
.bt-auth .bt-social-btn:hover { border-color: rgb(var(--bt-accent) / 0.6); background: rgb(var(--bt-surface) / 1); }
.bt-auth .bt-social-btn:active { transform: translateY(1px); background: rgb(var(--bt-surface) / 1); }
.bt-auth .bt-social-btn .bt-provider-logo { flex: 0 0 auto; }
/* "or" divider with a rule on each side of the word. */
.bt-or { display: flex; align-items: center; gap: 0.8rem; margin: 1.25rem 0;
  color: rgb(var(--bt-text-muted) / 1); font-family: var(--bt-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.1em; }
.bt-or::before, .bt-or::after { content: ""; flex: 1; height: 1px; background: var(--bt-line); }
/* "Already have an account? Log In" / "Don't have an account? Sign up". */
.bt-auth-alt { margin-top: 1.4rem; font-size: 0.92rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-auth-alt a { color: rgb(var(--bt-accent) / 1); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; }
.bt-auth-alt a:hover { filter: brightness(1.12); }
.bt-auth ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Third-party provider links (e.g. "Google") render as <li><a>; make them outline buttons. */
.bt-auth ul a {
  display: inline-flex; align-items: center; gap: 0.45rem; font: 500 0.9rem var(--bt-font);
  color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-bg) / 0.5);
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); padding: 0.55rem 0.95rem; }
.bt-auth ul a:hover { border-color: rgb(var(--bt-accent) / 0.6); color: rgb(var(--bt-text) / 1); }
.bt-auth hr { border: 0; border-top: 1px solid var(--bt-line); margin: 1.5rem 0; }
.bt-auth h2 { font-family: var(--bt-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.5rem 0 0.6rem; color: rgb(var(--bt-text-muted) / 1); }

/* ---- OAuth authorize (CLI / third-party app consent) -------------------- */
.bt-oauth { text-align: center; }
.bt-oauth h1 { margin: 0.25rem 0 0.4rem; }
.bt-oauth > p { margin: 0 0 0.5rem; }
.bt-oauth form { text-align: left; }
.bt-oauth-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: 0.5rem; border-radius: 0.85rem;
  background: rgb(var(--bt-accent) / 0.12); color: rgb(var(--bt-accent) / 1); }
.bt-oauth-ico .bt-ico { width: 1.5rem; height: 1.5rem; }
.bt-oauth-ico-warn { background: rgb(var(--bt-danger) / 0.12); color: rgb(var(--bt-danger) / 1); }
.bt-oauth-label { margin: 1.25rem 0 0; font-family: var(--bt-mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--bt-text-muted) / 1); }
.bt-oauth-scopes { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.5rem; }
.bt-oauth-scopes li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.bt-oauth-scopes .bt-ico { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: rgb(var(--bt-accent) / 1); }
.bt-oauth-actions { display: flex; gap: 0.7rem; margin-top: 1.5rem; }
.bt-oauth-actions [type=submit], .bt-oauth-actions a { margin-top: 0; flex: 1; }
.bt-auth .bt-oauth-cancel { background: rgb(var(--bt-surface-raised) / 1); color: rgb(var(--bt-text) / 1);
  border: 1px solid var(--bt-line-strong); text-decoration: none; }
.bt-auth .bt-oauth-cancel:hover { border-color: rgb(var(--bt-accent) / 0.6); box-shadow: none; filter: none;
  background: rgb(var(--bt-surface) / 1); }
.bt-oauth-err-code { font-family: var(--bt-mono); font-size: 0.85rem; color: rgb(var(--bt-danger) / 1); margin: 0 0 0.3rem; }

/* ---- Error pages -------------------------------------------------------- */
.bt-error-body { display: grid; place-items: center; min-height: 100vh; }
.bt-error { text-align: center; }
.bt-error-code { font-family: var(--bt-mono); font-size: 3.5rem; margin: 0; color: rgb(var(--bt-accent, 129 140 248) / 1); }
.bt-error-title { margin: 0.5rem 0; letter-spacing: -0.02em; }
.bt-error-msg { color: rgb(var(--bt-text-muted, 148 148 165) / 1); }

/* ---- Light theme override (landing light/dark switch + Paper) ----------- */
html[data-theme="paper"] {
  color-scheme: light;
  --bt-bg: 244 242 237; --bt-surface: 255 255 255; --bt-surface-raised: 250 249 246;
  --bt-text: 26 26 31; --bt-text-muted: 92 94 107; --bt-border: 210 206 196;
  --bt-accent: 79 70 229; --bt-danger: 220 38 38;
  --bt-palette-0: 79 70 229; --bt-palette-1: 5 150 105; --bt-palette-2: 217 119 6; --bt-palette-3: 220 38 38;
  --bt-palette-4: 37 99 235; --bt-palette-5: 219 39 119; --bt-palette-6: 13 148 136; --bt-palette-7: 101 163 13;
  --bt-palette-8: 192 38 211; --bt-palette-9: 234 88 12; --bt-palette-10: 2 132 199; --bt-palette-11: 124 58 237;
  --bt-palette-12: 22 163 74; --bt-palette-13: 202 138 4; --bt-palette-14: 190 24 93; --bt-palette-15: 100 116 139;
  --bt-type-text: 79 70 229; --bt-type-checklist: 5 150 105; --bt-type-link: 37 99 235; --bt-type-image: 217 119 6;
  --bt-type-book: 219 39 119; --bt-type-chat: 8 145 178; --bt-type-social: 168 85 247;
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- Extra vendored fonts (Theme Studio picker) ------------------------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/fraunces-400.15ccd91d7a8f.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/fraunces-600.b8dca52ca5f9.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plexmono-400.79936b18df9f.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/spacemono-400.049dfc5919c2.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/spacemono-700.e5e908997a45.woff2") format("woff2"); }

/* ---- Theme gallery (swatch cards; per-theme --sw-* set via nonce'd <style>) */
.bt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.7rem; margin: 1rem 0 1.5rem; }
.bt-sw { display: block; width: 100%; text-align: left; cursor: pointer; padding: 0; border-radius: 0.6rem; overflow: hidden;
  border: 1px solid var(--bt-line); background: rgb(var(--sw-bg) / 1); transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.18s ease; }
.bt-sw:hover { transform: translateY(-2px); border-color: rgb(var(--sw-accent) / 0.7); box-shadow: 0 10px 26px rgb(0 0 0 / 0.32); }
.bt-sw[aria-current="true"] { border-color: rgb(var(--sw-accent) / 1); box-shadow: 0 0 0 1px rgb(var(--sw-accent) / 0.6); }
.bt-sw-card { margin: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 0.45rem; background: rgb(var(--sw-surface) / 1);
  border: 1px solid rgb(var(--sw-border) / 1); }
.bt-sw-line { height: 0.4rem; border-radius: 3px; background: rgb(var(--sw-text) / 0.85); margin-bottom: 0.3rem; }
.bt-sw-line.short { width: 55%; background: rgb(var(--sw-text) / 0.4); }
.bt-sw-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: rgb(var(--sw-accent) / 1); margin-top: 0.2rem; }
.bt-sw-strip { display: flex; height: 0.35rem; }
.bt-sw-strip span { flex: 1; }
.bt-sw-label { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.7rem;
  font-family: var(--bt-mono); font-size: 0.72rem; color: rgb(var(--sw-text) / 1); background: rgb(var(--sw-surface) / 1);
  border-top: 1px solid rgb(var(--sw-border) / 1); }
.bt-sw-label .tag { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--sw-text) / 0.5); }

.bt-fontpicker { display: grid; gap: 0.6rem; }
.bt-fontpicker label { font-family: var(--bt-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgb(var(--bt-text-muted) / 1); }
.bt-fontpicker select { width: 100%; }
.bt-sw-strip span:nth-child(1){background:rgb(var(--sw-p0)/1)}
.bt-sw-strip span:nth-child(2){background:rgb(var(--sw-p1)/1)}
.bt-sw-strip span:nth-child(3){background:rgb(var(--sw-p2)/1)}
.bt-sw-strip span:nth-child(4){background:rgb(var(--sw-p3)/1)}
.bt-sw-strip span:nth-child(5){background:rgb(var(--sw-p4)/1)}
.bt-sw-strip span:nth-child(6){background:rgb(var(--sw-p5)/1)}

/* ---- Font-size slider (toolbar) ---------------------------------------- */
.bt-toolbar-right { display: flex; align-items: center; gap: 0.4rem; }
.bt-zoom { position: relative; }
.bt-zoom > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.bt-zoom > summary::-webkit-details-marker { display: none; }
.bt-zoom-aa { font-family: var(--bt-font); line-height: 1; }
.bt-zoom-aa strong { font-size: 1.15em; }
.bt-zoom-pop { position: absolute; right: 0; margin-top: 0.5rem; z-index: 50; width: 16rem;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: 0.7rem; padding: 0.85rem; box-shadow: 0 18px 40px rgb(0 0 0 / 0.45); }
.bt-zoom-pophead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem;
  font-family: var(--bt-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgb(var(--bt-text-muted) / 1); }
.bt-zoom-reset { background: none; border: 0; cursor: pointer; font: inherit; color: rgb(var(--bt-accent) / 1);
  text-transform: none; letter-spacing: 0; }
.bt-zoom-slide { display: flex; align-items: center; gap: 0.6rem; }
.bt-zoom-sm { font-size: 0.8rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-zoom-lg { font-size: 1.3rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-zoom-slide input[type=range] { flex: 1; accent-color: rgb(var(--bt-accent) / 1); }

/* ---- Tabler icons ------------------------------------------------------- */
.bt-ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.15em; flex: none; }
.bt-tag-icon { display: inline-flex; align-items: center; gap: 0.3rem; }
.bt-tag-icon .bt-ico { width: 0.85rem; height: 0.85rem; }

/* header switcher buttons (text-size + themes) */
.bt-navbtn { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none;
  padding: 0.34rem 0.55rem; border-radius: var(--bt-r-sm); color: rgb(var(--bt-text-muted) / 1);
  border: 1px solid transparent; }
.bt-navbtn:hover { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 1); text-decoration: none; }
.bt-navbtn::-webkit-details-marker { display: none; }
.bt-navbtn .bt-ico { width: 1.1rem; height: 1.1rem; }
.bt-navbtn-sub { font-family: var(--bt-mono); font-size: 0.68rem; opacity: 0.8; }
.bt-zoom[open] > .bt-navbtn { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 1); }

/* icon sizing in context */
.bt-add { display: inline-flex; align-items: center; justify-content: center; }
.bt-add .bt-ico { width: 1.25rem; height: 1.25rem; }
.bt-icon .bt-ico { width: 0.95rem; height: 0.95rem; }
.bt-icon.is-active { color: rgb(var(--bt-accent) / 1); }
.bt-check .bt-ico { width: 1rem; height: 1rem; }
.bt-reminder .bt-ico { width: 0.9rem; height: 0.9rem; }
.bt-media-label { display: inline-flex; align-items: center; gap: 0.3rem; }
.bt-media-label .bt-ico { width: 1rem; height: 1rem; }
.bt-cta .bt-ico, .bt-cta-lg .bt-ico { width: 1rem; height: 1rem; }

/* ---- Link preview image (og:image) ------------------------------------- */
.bt-link-img { width: 100%; max-height: 9rem; object-fit: cover; border-radius: var(--bt-r-sm);
  margin-bottom: 0.5rem; border: 1px solid rgb(var(--bt-border) / 1); display: block; background: rgb(var(--bt-bg) / 0.5); }
/* A clickable preview image (opens the image viewer) keeps the link-card sizing, not the small
   square-thumb height of .bt-media-thumb; it just gains the zoom affordance. */
.bt-link-img.bt-media-thumb { height: auto; max-height: 9rem; cursor: zoom-in; }

/* ---- Footer ------------------------------------------------------------- */
.bt-footer { flex: none; border-top: 1px solid var(--bt-line);
  background: rgb(var(--bt-surface) / 0.4); margin-top: 2rem; }
.bt-footer-inner { max-width: 100rem; margin: 0 auto; padding: 1.1rem clamp(1rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center; justify-content: space-between;
  font-size: 0.74rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-footer-brand a { color: rgb(var(--bt-text) / 0.9); }
.bt-footer-brand a:hover { color: rgb(var(--bt-accent) / 1); }
.bt-footer-nav { display: flex; align-items: center; gap: 1.1rem; }
.bt-footer-nav a { color: rgb(var(--bt-text-muted) / 1); }
.bt-footer-nav a:hover { color: rgb(var(--bt-accent) / 1); }
.bt-footer-copy { font-family: var(--bt-mono); font-size: 0.68rem; opacity: 0.8; }

/* ---- Legal / prose pages ------------------------------------------------ */
.bt-legal { max-width: 46rem; margin: 0 auto; }
.bt-legal-head { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bt-line); }
.bt-legal-head h1 { font-size: 1.7rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.bt-legal-meta { color: rgb(var(--bt-text-muted) / 1); font-size: 0.84rem; margin: 0 0 0.6rem; }
.bt-legal-draft { font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1);
  background: rgb(var(--bt-accent) / 0.08); border: 1px solid rgb(var(--bt-accent) / 0.22);
  border-radius: var(--bt-r-sm); padding: 0.5rem 0.75rem; margin: 0; }
.bt-legal-body { font-size: 0.92rem; line-height: 1.62; color: rgb(var(--bt-text) / 0.92); }
.bt-legal-body h2 { font-size: 1.04rem; letter-spacing: -0.01em; margin: 1.9rem 0 0.5rem;
  color: rgb(var(--bt-text) / 1); }
.bt-legal-body p { margin: 0 0 0.85rem; }
.bt-legal-body ul { margin: 0 0 0.95rem; padding-left: 1.2rem; }
.bt-legal-body li { margin: 0 0 0.4rem; }

/* ---- In-page compose / tag panels -------------------------------------- */
.bt-compose, .bt-tagform { background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: 0.85rem; padding: 1rem 1.1rem; margin: 0 0 0.9rem; box-shadow: 0 12px 30px rgb(0 0 0 / 0.22);
  animation: bt-rise 0.16s ease; }
.bt-seg-group { display: inline-flex; gap: 0.2rem; padding: 0.2rem; margin-bottom: 0.8rem;
  background: rgb(var(--bt-bg) / 0.55); border: 1px solid var(--bt-line); border-radius: 999px; }
.bt-seg { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font: 500 0.82rem var(--bt-font);
  color: rgb(var(--bt-text-muted) / 1); background: none; border: 0; padding: 0.36rem 0.85rem; border-radius: 999px; }
.bt-seg:hover { color: rgb(var(--bt-text) / 1); }
.bt-seg.is-active { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 1);
  box-shadow: inset 0 0 0 1px var(--bt-line-strong); }
.bt-seg .bt-ico { width: 0.95rem; height: 0.95rem; }
.bt-compose-body { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
/* The shortcut hint is its own full-width line above the foot, so it never wraps and never shares
   a row with the buttons — which leaves Close / Save alone on the foot row, right-aligned. */
.bt-compose-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: 0.2rem; }
.bt-compose-hint { display: block; font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 0.8);
  white-space: nowrap; margin: 0; }
.bt-compose-hint kbd { font-family: var(--bt-mono); font-size: 0.68rem; padding: 0.05rem 0.3rem; margin: 0 0.05rem;
  border: 1px solid var(--bt-line); border-radius: 4px; background: rgb(var(--bt-bg) / 0.6); }
.bt-btn-ghost { cursor: pointer; font: 500 0.85rem var(--bt-font); color: rgb(var(--bt-text-muted) / 1);
  background: none; border: 1px solid var(--bt-line); padding: 0.5rem 0.85rem; border-radius: var(--bt-r-sm); }
.bt-btn-ghost:hover { color: rgb(var(--bt-text) / 1); border-color: var(--bt-line-strong); }
button.bt-tag { font: inherit; cursor: pointer; }

/* checklist editor (edit mode): one row per item, native checkbox shows checked state */
.bt-todo-editor { display: flex; flex-direction: column; gap: 0.35rem; }
.bt-todo-edit-row { display: flex; align-items: center; gap: 0.5rem; }
.bt-todo-edit-row input[type="checkbox"] { flex: none; width: 1.05rem; height: 1.05rem; cursor: pointer;
  accent-color: rgb(var(--bt-accent) / 1); }
.bt-todo-edit-row .bt-input { flex: 1; min-width: 0; padding: 0.35rem 0.5rem; font-size: 0.88rem; }
.bt-todo-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.bt-todo-add .bt-ico { width: 0.85rem; height: 0.85rem; }

/* Filing row (edit mode): home interest + the sub-folder that lives inside it, side by side. */
.bt-compose-filing { display: flex; gap: 0.6rem; }
.bt-compose-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.28rem; }
.bt-compose-field-label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem;
  font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: rgb(var(--bt-text-muted) / 1); }
.bt-compose-field-label .bt-ico { width: 0.82rem; height: 0.82rem; }
.bt-compose-select { cursor: pointer; padding: 0.5rem 0.6rem; font-size: 0.88rem; }
@media (max-width: 480px) { .bt-compose-filing { flex-direction: column; } }

/* ---- Tag manager -------------------------------------------------------- */
.bt-tagform-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.bt-tagform-head h3 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; }
.bt-field-label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgb(var(--bt-text-muted) / 1); margin: 0.2rem 0 0.35rem; }
.bt-field-hint { font-size: 0.74rem; color: rgb(var(--bt-text-muted) / 0.85); margin: -0.4rem 0 0.7rem; }
.bt-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
.bt-swatch { width: 1.4rem; height: 1.4rem; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgb(var(--bt-text) / 0.12); }
.bt-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.bt-swatch.is-active { border-color: rgb(var(--bt-text) / 0.85); }
/* Tag list: one column on narrow screens, packing 2–4 across as the modal widens
   so the action buttons sit beside each tag instead of way off to the right. */
.bt-taglist { display: grid; grid-template-columns: 1fr; gap: 0.4rem; margin-top: 0.4rem; }
@media (min-width: 680px) { .bt-taglist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bt-taglist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1320px) { .bt-taglist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bt-taglist-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); }
.bt-taglist-row .bt-tagdot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.bt-taglist-row .bt-tagname { flex: 1; min-width: 0; font-size: 0.88rem; }
.bt-taglist-actions { display: inline-flex; align-items: center; gap: 0.1rem; flex: none; }
.bt-confirm-note { margin: 0; max-width: 15rem; font-size: 0.74rem; line-height: 1.3; color: rgb(var(--bt-text-muted) / 1); }
/* click-to-rename: the tag name reads as plain text but invites a click */
.bt-tagname-btn { background: none; border: 0; padding: 0; cursor: text; font: inherit;
  color: rgb(var(--bt-text) / 1); border-radius: 3px; }
.bt-tagname-btn:hover { background: rgb(var(--bt-accent) / 0.12); box-shadow: 0 0 0 3px rgb(var(--bt-accent) / 0.12); }
/* inline edit field */
.bt-tagedit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.3rem; }
.bt-tagedit-hash { color: rgb(var(--bt-text-muted) / 0.8); font-family: var(--bt-mono); flex: none; }
.bt-tagedit-input { flex: 1 1 auto; min-width: 0; padding: 0.25rem 0.5rem; font-size: 0.88rem; }
.bt-tagedit-saving { font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 0.9); white-space: nowrap; }
.bt-tagedit-err { color: rgb(var(--bt-danger) / 1); }
/* Aging Policy: per-tag fuse + the backstop explainer */
.bt-input-sm { width: 4.5rem; flex: none; text-align: right; }
.bt-tagform-aging { margin: 0; max-width: 22rem; text-align: right; }
.bt-tagexpire { margin-left: 0.35rem; font-size: 0.78rem; font-family: var(--bt-mono);
  color: rgb(var(--bt-text-muted) / 0.95); }
.bt-tagexpire-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem;
  font-size: 0.82rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-tagedit-expire { display: inline-flex; align-items: center; gap: 0.25rem; flex: none;
  font-size: 0.74rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-tagedit-expire .bt-input-sm { width: 3.2rem; padding: 0.25rem 0.4rem; font-size: 0.82rem; }
.bt-aging-label { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
  font-size: 0.92rem; margin-bottom: 0.5rem; }
/* htmx request indicator: hidden until the request is in flight */
.htmx-indicator { opacity: 0; transition: opacity 0.12s ease; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Solid palette fills for tag-color swatches (CSP-safe, no inline style). */
.bt-swfill-0 { background: rgb(var(--bt-palette-0) / 1); }
.bt-swfill-1 { background: rgb(var(--bt-palette-1) / 1); }
.bt-swfill-2 { background: rgb(var(--bt-palette-2) / 1); }
.bt-swfill-3 { background: rgb(var(--bt-palette-3) / 1); }
.bt-swfill-4 { background: rgb(var(--bt-palette-4) / 1); }
.bt-swfill-5 { background: rgb(var(--bt-palette-5) / 1); }
.bt-swfill-6 { background: rgb(var(--bt-palette-6) / 1); }
.bt-swfill-7 { background: rgb(var(--bt-palette-7) / 1); }
.bt-swfill-8 { background: rgb(var(--bt-palette-8) / 1); }
.bt-swfill-9 { background: rgb(var(--bt-palette-9) / 1); }
.bt-swfill-10 { background: rgb(var(--bt-palette-10) / 1); }
.bt-swfill-11 { background: rgb(var(--bt-palette-11) / 1); }
.bt-swfill-12 { background: rgb(var(--bt-palette-12) / 1); }
.bt-swfill-13 { background: rgb(var(--bt-palette-13) / 1); }
.bt-swfill-14 { background: rgb(var(--bt-palette-14) / 1); }
.bt-swfill-15 { background: rgb(var(--bt-palette-15) / 1); }

/* --- Connected accounts (social connections) --- */
.bt-connect-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgb(var(--bt-text-muted) / 1); margin: 1.4rem 0 0.5rem; }
.bt-connect-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bt-line);
  border-radius: var(--bt-r-sm); overflow: hidden; }
.bt-connect-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.9rem; }
.bt-connect-row + .bt-connect-row { border-top: 1px solid var(--bt-line); }
.bt-connect-logo { display: inline-flex; flex: 0 0 auto; }
.bt-connect-logo .bt-ico { width: 1.2rem; height: 1.2rem; }
.bt-connect-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bt-connect-name { font-weight: 600; }
.bt-connect-sub { font-size: 0.82rem; color: rgb(var(--bt-text-muted) / 1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-connect-row form { margin: 0; }

/* --- Connected calendar events --- */
.bt-cal-events { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.bt-cal-event { display: flex; gap: 0.7rem; padding: 0.3rem 0; font-size: 0.86rem;
  border-top: 1px solid var(--bt-line); }
.bt-cal-event:first-child { border-top: 0; }
.bt-cal-when { color: rgb(var(--bt-text-muted) / 1); flex: 0 0 auto; min-width: 9rem; }
.bt-cal-title { color: rgb(var(--bt-text) / 1); }

/* ---- Connections page --------------------------------------------------- */
.bt-conn { max-width: 52rem; }
.bt-conn-card {
  border: 1px solid var(--bt-line); border-radius: var(--bt-radius);
  background: rgb(var(--bt-surface) / 0.5); padding: 1.1rem 1.2rem; margin: 1rem 0;
}
.bt-conn-head { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.6rem; }
.bt-conn-head h2 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.bt-conn-ico { flex: 0 0 auto; color: rgb(var(--bt-accent) / 1); margin-top: 0.15rem; }
.bt-conn-ico .bt-ico { width: 1.4rem; height: 1.4rem; }
.bt-conn-sub, .bt-conn-note { color: rgb(var(--bt-text-muted) / 1); font-size: 0.88rem; margin: 0.2rem 0; }
.bt-conn-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: rgb(var(--bt-text-muted) / 1); margin: 0.9rem 0 0.3rem; }

/* NEWS-2 Newsletters: expandable per-provider setup walkthrough. */
.bt-setup-step { border: 1px solid var(--bt-line); border-radius: var(--bt-radius);
  background: rgb(var(--bt-surface) / 0.5); margin: 0.5rem 0; padding: 0 0.9rem; }
.bt-setup-step > summary { cursor: pointer; padding: 0.7rem 0; font-weight: 600; list-style: none; }
.bt-setup-step > summary::-webkit-details-marker { display: none; }
.bt-setup-step > summary::before { content: "▸"; display: inline-block; width: 1.1em;
  color: rgb(var(--bt-accent) / 1); transition: transform 0.15s ease; }
.bt-setup-step[open] > summary::before { transform: rotate(90deg); }
.bt-setup-list { margin: 0 0 0.9rem; padding-left: 1.4rem; }
.bt-setup-list li { margin: 0.35rem 0; font-size: 0.9rem; line-height: 1.5;
  color: rgb(var(--bt-text) / 1); }

/* NEWS-2 forwarding-verification: main-page prompt, dropdown dot, in-page approve panel. */
.bt-verifybar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.55rem 1rem; background: rgb(var(--bt-accent) / 0.12);
  border-bottom: 1px solid rgb(var(--bt-accent) / 0.3); font-size: 0.9rem; }
.bt-verifybar-msg { flex: 1 1 16rem; }
.bt-verifybar-cta { font-weight: 600; color: rgb(var(--bt-accent) / 1); white-space: nowrap; }
.bt-alert-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: rgb(var(--bt-accent) / 1); vertical-align: middle; }
.bt-verify-panel { margin: 0.8rem 0; }
.bt-verify-card { border: 1px solid rgb(var(--bt-accent) / 0.4); border-radius: var(--bt-radius);
  background: rgb(var(--bt-accent) / 0.08); padding: 0.9rem 1.1rem; margin: 0.5rem 0; }
.bt-verify-lead { margin: 0 0 0.3rem; font-weight: 500; display: flex; align-items: center; gap: 0.4rem; }
.bt-verify-steps { margin: 0.6rem 0 0.7rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; }
.bt-verify-steps li { line-height: 1.5; }
.bt-verify-code { font-size: 0.95rem; padding: 0.1rem 0.4rem; background: rgb(var(--bt-line) / 0.5);
  border-radius: 0.3rem; letter-spacing: 0.04em; }
.bt-verify-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.bt-intake-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  flex-wrap: wrap; padding: 0.5rem 0; border-bottom: 1px solid var(--bt-line); }
.bt-intake-row:last-child { border-bottom: none; }
.bt-intake-name { font-weight: 600; }
.bt-intake-meta { font-size: 0.82rem; }
.bt-intake-error .bt-intake-name { color: rgb(var(--bt-danger, 220 50 50) / 1); }
/* Needs-attention: a genuine failure with a remedy — flagged, but not alarm-red. */
.bt-intake-fail { padding: 0.7rem 0.9rem; margin: 0.55rem 0; border-radius: var(--bt-radius);
  background: rgb(var(--bt-danger) / 0.06); border-left: 3px solid rgb(var(--bt-danger) / 0.55); }
.bt-intake-fail-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.8rem; flex-wrap: wrap; }
.bt-intake-remedy { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.5;
  color: rgb(var(--bt-text-muted) / 1); }
/* Benign skips: collapsed + muted, never red — "nothing new", not a problem. */
.bt-skip-details > summary { cursor: pointer; color: rgb(var(--bt-text-muted) / 1); font-size: 0.9rem; }
.bt-skip-details[open] > summary { margin-bottom: 0.5rem; }
/* Small spacing utilities (CSP-clean replacements for inline style="margin-top:…"). */
.bt-mt-1 { margin-top: 1rem; }
.bt-mt-sm { margin-top: 0.75rem; }

/* Feeds list — one row per Source: logo, then name over a meta line. */
.bt-feed-list { margin: 0.4rem 0 0; }
.bt-feed-row { flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.bt-feed-logo { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bt-surface-2, #eee);
  font-weight: 600; font-size: 0.85rem; text-transform: uppercase; color: var(--bt-ink-2, #666); }
.bt-feed-logo img { width: 100%; height: 100%; object-fit: contain; }
.bt-feed-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bt-feed-body .bt-intake-name { line-height: 1.2; }
/* "Show every day" pin — pushed to the row's right edge; filled when on. */
.bt-feed-pin { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.6rem; border: 1px solid var(--bt-line); border-radius: 999px; background: transparent;
  cursor: pointer; font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1); white-space: nowrap; }
.bt-feed-pin:hover { border-color: rgb(var(--bt-accent) / 0.5); color: rgb(var(--bt-accent) / 1); }
.bt-feed-pin .bt-ico { width: 0.95rem; height: 0.95rem; }
.bt-feed-pin.is-on { border-color: rgb(var(--bt-accent) / 0.7); background: rgb(var(--bt-accent) / 0.1);
  color: rgb(var(--bt-accent) / 1); font-weight: 600; }
.bt-conn-detail { border-top: 1px solid var(--bt-line); padding: 0.5rem 0; }
.bt-conn-detail > summary { cursor: pointer; font-weight: 500; padding: 0.25rem 0; }
.bt-conn-links { margin: 0.3rem 0 0; padding-left: 1.1rem; line-height: 1.7; }

/* Connections hub — one tall card per way to connect, button pinned to the bottom. */
.bt-conn-hub { display: grid; gap: 1rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.bt-hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  border: 1px solid var(--bt-line); border-radius: var(--bt-radius); background: rgb(var(--bt-surface) / 0.5);
  padding: 1.4rem 1.3rem; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.bt-hub-card:hover { border-color: rgb(var(--bt-accent) / 0.6); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.07); }
.bt-hub-ico { display: inline-flex; color: rgb(var(--bt-accent) / 1); }
.bt-hub-ico .bt-ico { width: 1.8rem; height: 1.8rem; }
.bt-hub-name { margin: 0.4rem 0 0; font-size: 1.1rem; letter-spacing: -0.01em; }
.bt-hub-desc { color: rgb(var(--bt-text-muted) / 1); font-size: 0.88rem; line-height: 1.5;
  margin: 0; flex: 1 1 auto; }
.bt-hub-go { margin-top: 0.7rem; font-weight: 600; font-size: 0.9rem; color: rgb(var(--bt-accent) / 1); }
.bt-hub-go span { display: inline-block; transition: transform .15s; }
.bt-hub-card:hover .bt-hub-go span { transform: translateX(3px); }

/* Detail-page header: bigger title alongside the accent icon. */
.bt-conn-detail-head { align-items: flex-start; margin-bottom: 1rem; }
.bt-conn-detail-head h1 { margin: 0 0 0.25rem; font-size: 1.4rem; }
.bt-conn-detail-head .bt-conn-ico { margin-top: 0.35rem; }
.bt-conn-detail-head .bt-conn-ico .bt-ico { width: 1.7rem; height: 1.7rem; }

.bt-code {
  position: relative; display: flex; align-items: flex-start; gap: 0.5rem;
  background: rgb(var(--bt-bg) / 0.7); border: 1px solid var(--bt-line);
  border-radius: var(--bt-r-sm); padding: 0.55rem 0.7rem; margin: 0.35rem 0;
  font-family: var(--bt-mono); font-size: 0.82rem;
}
/* Wrap long commands/URLs/tokens instead of overflowing the page on mobile. */
.bt-code code, .bt-code pre { font-family: var(--bt-mono); color: rgb(var(--bt-text) / 1);
  background: none; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.bt-code pre { flex: 1; }
.bt-code > code:first-child { flex: 1; }
.bt-copy {
  flex: 0 0 auto; cursor: pointer; font: 500 0.74rem var(--bt-font);
  color: rgb(var(--bt-text-muted) / 1); background: rgb(var(--bt-surface) / 1);
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); padding: 0.25rem 0.5rem;
}
.bt-copy:hover { color: rgb(var(--bt-text) / 1); }

.bt-token-form { display: flex; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.bt-token-form .bt-input { flex: 1; }
.bt-token-list { list-style: none; padding: 0; margin: 0.3rem 0; }
.bt-token-row { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  padding: 0.5rem 0; border-top: 1px solid var(--bt-line); }
.bt-token-name { font-weight: 500; }
.bt-token-sub { display: block; color: rgb(var(--bt-text-muted) / 1); font-size: 0.8rem; }
.bt-token-new { border: 1px solid rgb(var(--bt-accent) / 0.5); border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-accent) / 0.08); padding: 0.6rem 0.8rem; margin: 0.5rem 0; }
.bt-recipe { margin: 0.3rem 0; padding-left: 1.2rem; line-height: 1.7; font-size: 0.9rem; }
.bt-recipe ul { margin: 0.2rem 0; }
.bt-conn-qr { display: flex; align-items: center; gap: 0.9rem; margin: 0.5rem 0; }
.bt-conn-qr img { border-radius: 0.4rem; border: 1px solid var(--bt-line); }

/* one-tap shortcut install card (Add to iPhone + QR) */
.bt-shortcut-card { display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 0.8rem; margin: 0.5rem 0;
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); background: rgb(var(--bt-bg) / 0.4); }
.bt-shortcut-info { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start;
  min-width: 0; flex: 1 1 14rem; }
.bt-shortcut-name { font-weight: 600; font-size: 0.95rem; }
.bt-shortcut-siri { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--bt-mono);
  font-size: 0.74rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-shortcut-siri .bt-ico { width: 0.85rem; height: 0.85rem; }
.bt-shortcut-info .bt-cta { margin-top: 0.2rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.bt-shortcut-qr { display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  flex: none; max-width: 8rem; text-align: center; }
.bt-shortcut-qr img { border-radius: 0.4rem; border: 1px solid var(--bt-line); background: #fff; }
.bt-shortcut-qr .bt-conn-note { font-size: 0.68rem; }

/* "Save as a contact" card (per-user vCard QR for the email-in address) */
.bt-contact-card { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: 0.8rem; margin: 0.6rem 0; border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-bg) / 0.4); }
.bt-contact-qr { flex: none; border-radius: 0.4rem; border: 1px solid var(--bt-line); background: #fff; }
.bt-contact-info { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start;
  min-width: 0; flex: 1 1 14rem; }
.bt-contact-info .bt-btn-ghost { margin-top: 0.2rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.bt-contact-info .bt-btn-ghost .bt-ico { width: 0.9rem; height: 0.9rem; }

/* Onboarding modal: hidden until JS opts the user in (avoids FOUC). */
.bt-onboard-modal[hidden] { display: none; }
.bt-onboard-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem;
  color: rgb(var(--bt-text-muted) / 1); margin-right: auto; }

/* --- Block time (calendar scheduling on cards) --- */
.bt-scheduled a { color: inherit; text-decoration: underline; }
.bt-schedule-form { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 0.2rem; }
.bt-schedule-form .bt-input { width: auto; font-size: 0.82rem; padding: 0.28rem 0.4rem; }
.bt-schedule-err { color: rgb(var(--bt-danger) / 1); margin: 0.3rem 0 0; }

/* --- Keyboard shortcuts guide --- */
.bt-keysguide h1 { display: flex; align-items: center; gap: 0.5rem; }
.bt-keysguide h1 .bt-ico { width: 1.4rem; height: 1.4rem; }
.bt-keys-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 2rem; margin-top: 1.25rem; }
.bt-keys-head { font-size: 0.95rem; letter-spacing: -0.01em; margin: 0 0 0.4rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--bt-line); }
.bt-keys-lead { font-size: 0.8rem; color: rgb(var(--bt-text-muted) / 0.9); margin: 0 0 0.5rem; }
.bt-keys { display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 0.85rem;
  align-items: baseline; margin: 0; }
.bt-keys dt { white-space: nowrap; }
.bt-keys dd { margin: 0; font-size: 0.85rem; color: rgb(var(--bt-text) / 1); }
.bt-keys-note { color: rgb(var(--bt-text-muted) / 0.85); }
.bt-keys kbd, .bt-keysguide kbd { font-family: var(--bt-mono); font-size: 0.72rem;
  padding: 0.1rem 0.4rem; border: 1px solid var(--bt-line); border-bottom-width: 2px;
  border-radius: 5px; background: rgb(var(--bt-bg) / 0.6); color: rgb(var(--bt-text) / 1);
  white-space: nowrap; }

/* FEED-1 — tended (done/let-go) cards stay in the pinboard but recede. */
.bt-card-tended { opacity: 0.5; transition: opacity 0.15s; }
.bt-card-tended:hover { opacity: 0.85; }
.bt-tended-flag { display: inline-flex; align-items: center; color: rgb(var(--bt-text-muted) / 1); }

/* Compost-soon fade — an Inbox/To-do card within 5 days of composting recedes one step per day
   (composting-resurfacing §C). Hover restores it so it stays readable; opening/editing it (touch)
   resets the clock and the fade clears on the next render. */
.bt-card[data-compost] { transition: opacity 0.2s; }
.bt-card[data-compost="5"] { opacity: 0.85; }
.bt-card[data-compost="4"] { opacity: 0.70; }
.bt-card[data-compost="3"] { opacity: 0.55; }
.bt-card[data-compost="2"] { opacity: 0.40; }
.bt-card[data-compost="1"] { opacity: 0.22; }
.bt-card[data-compost="0"] { opacity: 0.15; }
.bt-card[data-compost]:hover { opacity: 0.95; }
.bt-compost-hint {
  display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.4rem;
  font-size: 0.7rem; color: rgb(var(--bt-accent) / 0.9); white-space: nowrap;
}
.bt-compost-hint .bt-ico { width: 0.8rem; height: 0.8rem; }
/* Its own line under the interest chips (moved off the header so it stops wrapping the timestamp). */
.bt-compost-line { margin: -0.15rem 0 0.5rem; }
.bt-compost-line .bt-compost-hint { margin-left: 0; }

/* READER-1 — the in-app reader (extracted article/PDF text). */
.bt-reader { max-width: 680px; margin: 0 auto; padding: 1rem 0 4rem; }
.bt-reader-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; }
.bt-reader-prog > span { display: block; height: 100%; width: 0; background: rgb(var(--bt-accent) / 1); transition: width 0.08s linear; }
.bt-reader-title { font-size: 1.6rem; line-height: 1.2; margin: 0.5rem 0; }
/* "Open original" — a proper button (was a small muted text link), sitting under "Back to feed". */
.bt-reader-src { display: flex; width: fit-content; align-items: center; gap: 0.4rem; font-size: 0.92rem;
  color: rgb(var(--bt-text) / 0.92); margin: 0 0 1.2rem; padding: 0.5rem 0.85rem;
  border: 1px solid rgb(var(--bt-border) / 1); border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-surface) / 1); text-decoration: none; }
.bt-reader-src:hover { border-color: rgb(var(--bt-accent) / 0.6); color: rgb(var(--bt-text) / 1);
  background: rgb(var(--bt-surface-raised) / 1); }
.bt-reader-src .bt-ico { width: 1rem; height: 1rem; color: rgb(var(--bt-accent) / 1); }
.bt-reader-body { font-size: 1.05rem; line-height: 1.75; color: rgb(var(--bt-text) / 0.95); word-break: break-word; }
.bt-reader-foot { position: sticky; bottom: 1rem; justify-content: center; margin-top: 2rem; }

/* The structured reader-view facsimile (content_html) — give the allowlisted tags reader styling so
   it reads like a clean article: spaced headings/paragraphs, inset blockquotes, linked images. */
.bt-reader-article > :first-child { margin-top: 0; }
.bt-reader-article h2 { font-size: 1.35rem; line-height: 1.25; margin: 1.8rem 0 0.6rem; }
.bt-reader-article h3 { font-size: 1.12rem; line-height: 1.3; margin: 1.5rem 0 0.5rem; }
.bt-reader-article h4 { font-size: 1rem; margin: 1.3rem 0 0.4rem; color: rgb(var(--bt-text) / 0.9); }
.bt-reader-article p { margin: 0 0 1.1rem; }
.bt-reader-article ul, .bt-reader-article ol { margin: 0 0 1.1rem; padding-left: 1.5rem; }
.bt-reader-article li { margin: 0.25rem 0; }
.bt-reader-article a { color: rgb(var(--bt-accent) / 1); text-decoration: underline; text-underline-offset: 2px; }
.bt-reader-article blockquote { margin: 0 0 1.1rem; padding: 0.3rem 0 0.3rem 1rem;
  border-left: 3px solid rgb(var(--bt-accent) / 0.5); color: rgb(var(--bt-text) / 0.85); font-style: italic; }
.bt-reader-article pre { background: rgb(var(--bt-bg) / 1); border: 1px solid rgb(var(--bt-border) / 1);
  border-radius: var(--bt-r-sm); padding: 0.8rem 1rem; overflow-x: auto; font-family: var(--bt-mono);
  font-size: 0.85rem; line-height: 1.5; margin: 0 0 1.1rem; }
.bt-reader-article code { font-family: var(--bt-mono); font-size: 0.88em; }
.bt-reader-article hr { border: 0; border-top: 1px solid rgb(var(--bt-border) / 1); margin: 1.8rem 0; }
/* Images stay in the flow (reader feel) but are clickable links to the original. */
.bt-reader-fig { margin: 1.2rem 0; text-align: center; }
.bt-reader-fig a { display: inline-block; text-decoration: none; }
.bt-reader-fig img { max-width: 100%; height: auto; border-radius: var(--bt-r-sm);
  border: 1px solid rgb(var(--bt-border) / 0.6); }

/* CHAT-4 — rich chat card: distilled takeaways + a code-artifact preview. */
.bt-chat-takeaways { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.bt-chat-takeaways li { font-size: 0.85rem; margin-bottom: 0.2rem; line-height: 1.4; }
.bt-chat-artifact { background: rgb(var(--bt-bg) / 1); border: 1px solid rgb(var(--bt-border) / 1);
  border-radius: var(--bt-r-sm); font-family: var(--bt-mono); font-size: 0.72rem; padding: 0.5rem 0.6rem;
  margin-top: 0.5rem; overflow: hidden; white-space: pre-wrap; max-height: 6rem; }
.bt-detail-distill { margin-top: 0.8rem; }
.bt-detail-h { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgb(var(--bt-text-muted) / 1); margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.3rem; }
.bt-detail-artifact { margin-top: 0.6rem; font-size: 0.82rem; }
.bt-detail-art-label { font-family: var(--bt-mono); font-size: 0.66rem; color: rgb(var(--bt-text-muted) / 1); display: block; margin-bottom: 0.2rem; }

/* CHAT-2 — the in-app chat reader: role-styled transcript turns. */
.bt-reader-chat .bt-reader-turn { padding: 0.65rem 0; border-bottom: 1px solid rgb(var(--bt-border) / 0.5); }
.bt-reader-turn .bt-turn-role { font-family: var(--bt-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--bt-text-muted) / 1); }
.bt-reader-turn.bt-turn-user .bt-turn-role { color: rgb(var(--bt-accent) / 1); }
.bt-turn-text { margin-top: 0.25rem; }

/* Phase 2 polish — the signal control: coloured, centred; tap-card-to-expand; detail panel. */
:root {
  --bt-sig-later: 96 141 250;   /* blue  */
  --bt-sig-down: 120 124 140;   /* slate — calm, not alarming */
  --bt-sig-ok: 52 211 153;      /* green */
  --bt-sig-up: 235 178 72;      /* gold (matches --bt-pin) */
}
.bt-reader-foot { justify-content: center; gap: 0.5rem; flex-wrap: wrap;
  border-top: 1px solid rgb(var(--bt-border) / 1); padding-top: 0.9rem; margin-top: 1rem; }
/* Triage bar — three zones: Later (left corner) · Block·Nah·Done·Loved (center gradient) · Reference
   (right corner). The center group stays centered while the corners pin to the edges. */
.bt-detail-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  border-top: 1px solid rgb(var(--bt-border) / 1); padding-top: 0.9rem; margin-top: 1rem; }
.bt-foot-verdicts { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
.bt-foot-side { flex: none; }
/* Self-contained verdict pill (no longer leans on .bt-chip) — icon + label, label hidden on mobile.
   Higher-contrast treatment: each verdict is a SOLID coloured chip with a white icon/label so the
   triage bar reads clearly (especially on a phone, where only the icons show). */
.bt-sig { display: inline-flex; align-items: center; gap: 0.32rem; cursor: pointer; white-space: nowrap;
  font-weight: 600; font-size: 0.72rem; padding: 0.32rem 0.6rem; border-radius: 999px;
  border: 1px solid transparent; color: #fff; transition: filter 0.12s ease, transform 0.08s ease; }
.bt-sig .bt-ico { width: 0.92rem; height: 0.92rem; }
.bt-sig:hover { filter: brightness(1.08); }
.bt-sig:active { transform: scale(0.96); }
.bt-sig-stop  { background: rgb(var(--bt-danger)); }
.bt-sig-later { background: rgb(var(--bt-sig-later)); }
.bt-sig-down  { background: rgb(var(--bt-sig-down)); }
.bt-sig-ok    { background: rgb(var(--bt-sig-up)); }   /* Done — gold */
.bt-sig-up    { background: rgb(var(--bt-sig-ok)); }   /* Loved — green */

/* Tap anywhere on a feed card (except its interactive bits) to expand it into the detail panel. */
.bt-card[data-detail-url] { cursor: pointer; }

/* Detail panel — give it some shape. Cap height so tall transcripts/distillations scroll
   inside the panel instead of running off the bottom of the viewport (the backdrop pads 9vh).
   padding-bottom:0 so the sticky signal footer sits flush at the bottom edge. */
.bt-detail-modal { max-height: 86vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; position: relative; padding-bottom: 0; }
.bt-detail-modal .bt-detail-title { font-size: 1.2rem; margin: 0 0 0.8rem; }
/* When the note has a source, the title is the link to the original — accent-coloured with a
   trailing external-link glyph so it's obviously clickable (replaces the old "Open original" chip). */
.bt-detail-titlelink { color: rgb(var(--bt-accent) / 1); text-decoration: underline;
  text-underline-offset: 2px; display: inline; align-items: baseline; }
.bt-detail-titlelink:hover { text-decoration-thickness: 2px; }
.bt-detail-titlelink .bt-ico { width: 0.82em; height: 0.82em; margin-left: 0.3rem;
  vertical-align: -0.05em; color: rgb(var(--bt-accent) / 0.85); }
/* Breathing room under the "Read here" chip before the preview/body. */
.bt-detail-chips { margin-bottom: 1rem; }

/* The Later / Not-for-me / Done / Loved footer stays pinned to the bottom of the scrolling panel
   so it's always reachable, no matter how long the content is. */
.bt-detail-modal .bt-detail-foot {
  position: sticky; bottom: 0; z-index: 1;
  background: rgb(var(--bt-surface-raised) / 1);
  margin: 1rem -1.25rem 0; padding: 0.85rem 1.25rem 1.1rem;
  border-top: 1px solid rgb(var(--bt-border) / 1);
}

/* On a phone the detail panel goes full-screen — easier to read and to reach the footer than a
   floating modal. Scoped to the detail panel so compose/tag modals keep their centered shape. */
@media (max-width: 640px) {
  .bt-modal-backdrop:has(.bt-detail-modal) { padding: 0; place-items: stretch; overflow-x: hidden; }
  /* Full-screen on a phone: 100% of the stretched backdrop (NOT 100vw, which overshoots past the
     viewport when a scrollbar exists and causes a side-to-side wobble) + overflow-x clipped. */
  .bt-detail-modal {
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0; overflow-x: hidden;
  }
}
.bt-detail-summary { background: rgb(var(--bt-surface) / 1); border: 1px solid rgb(var(--bt-border) / 1);
  border-radius: var(--bt-r); padding: 0.7rem 0.8rem; font-size: 0.92rem; line-height: 1.5; margin: 0 0 0.9rem; }
.bt-detail-summary-loading { color: rgb(var(--bt-text-muted) / 1); }
/* AI summary layout: a lead line + flat (single-level) bullets. One indent level only — every bullet
   shares the same left edge so it scans cleanly on a narrow phone. Shared by the detail modal and the
   catchup card. */
.bt-summary-lead { margin: 0; font-weight: 600; }
.bt-summary-points { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.bt-summary-points li { position: relative; padding-left: 0.95rem; margin: 0.3rem 0; }
.bt-summary-points li::before { content: ""; position: absolute; left: 0.05rem; top: 0.62em;
  width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--bt-accent) / 1); }
.bt-summary-label { font-weight: 600; }
.bt-summary-dots { animation: bt-summary-pulse 1.3s ease-in-out infinite; }
@keyframes bt-summary-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Top action row in the detail modal — pin / edit / folder / delete. Left-aligned; the right margin
   clears the absolutely-positioned ✕ close button. Buttons reuse the card's .bt-icon / .bt-confirm. */
/* Modal header row: "← My Trellis" (close) on the left, the pin/edit/folder/trash actions on the
   right — one flex row so they stay aligned and the body owns both (re-rendered on in-panel swaps). */
.bt-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.7rem; }
.bt-detail-back { background: none; border: 0; cursor: pointer; padding: 0; margin: 0; font: inherit;
  font-size: 0.85rem; color: rgb(var(--bt-text-muted) / 1); white-space: nowrap; }
.bt-detail-back:hover { color: rgb(var(--bt-text) / 1); }
.bt-detail-actions { display: flex; gap: 0.15rem; align-items: center; margin: 0; }
.bt-detail-actions .bt-confirm { position: relative; }
/* Anchor the popover to the RIGHT of its icon (the actions now sit in the top-right corner) so it
   opens inward toward the modal and never overflows the (often full-width on mobile) edge — clamped
   to the viewport, with the new-folder form wrapping instead of forcing a wide row. */
/* min-width:0 overrides the base .bt-confirm-pop min-width:max-content (which would otherwise beat
   width and force the popover wider than a phone screen); the width then fits within any viewport. */
.bt-detail-actions .bt-confirm-pop { right: 0; left: auto; min-width: 0; width: min(15rem, calc(100vw - 4rem)); }
.bt-detail-actions .bt-folder-new { flex-wrap: wrap; }
.bt-detail-actions .bt-folder-new .bt-input { min-width: 0; flex: 1 1 7rem; }
.bt-detail-actions .bt-icon.is-active { color: rgb(var(--bt-pin)); }

/* Rich link/media preview embedded in the detail panel — same component as the card, a touch taller. */
.bt-detail-preview { margin: 0 0 0.9rem; }
.bt-detail-preview .bt-link-img { max-height: 13rem; }
/* The preview is a link to the original — show it as a clickable tile (hover lift) and reset the
   anchor's inherited link colour so the card content keeps its own styling. */
a.bt-detail-preview-link { display: block; text-decoration: none; color: inherit; border-radius: var(--bt-r);
  transition: transform 0.12s ease, box-shadow 0.12s ease; cursor: pointer; }
/* Hover lift only on real pointers — on touch, :hover sticks after you tap through to the link and
   come back, leaving the tile stuck in a raised/shadowed state that doesn't match the normal look. */
@media (hover: hover) and (pointer: fine) {
  a.bt-detail-preview-link:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgb(0 0 0 / 0.18); }
}
/* Attachments live in the modal now (the card is a doorway) — play / lightbox / open happen here. */
.bt-detail-media { margin: 0.2rem 0 0.9rem; }
.bt-detail-media:empty { display: none; }

/* The note's own contents in the detail panel. */
.bt-detail-body { font-size: 0.95rem; line-height: 1.55; color: rgb(var(--bt-text) / 0.95);
  margin: 0 0 0.9rem; overflow-wrap: anywhere; }
.bt-detail-checklist { margin: 0 0 0.9rem; }   /* reuses .bt-checklist; tickable, synced to the card */
/* Give the interest/tag row breathing room below the content above it. */
.bt-detail-modal .bt-card-interests { margin-top: 1rem; }
/* Triage state: the chosen verdict stays lit; the rest dim so the choice reads at a glance. */
.bt-detail-foot.has-active .bt-sig:not(.is-active) { opacity: 0.4; }
/* Reference on: hide the verdict buttons (Later + the verdict group) and center the lone Reference
   flag — a referenced note is out of the triage flow until you toggle Reference back off. */
.bt-detail-foot.is-reference { justify-content: center; }
.bt-detail-foot.is-reference .bt-foot-verdicts,
.bt-detail-foot.is-reference .bt-sig-later { display: none; }
.bt-detail-kept { font-family: var(--bt-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgb(var(--bt-text-muted) / 1); padding: 0.4rem 0; }

/* Reference — the keep-aside flag in the bar's right corner. A solid neutral chip (distinct from the
   coloured verdicts); when on it fills gold with a white icon to match the higher-contrast bar. */
.bt-detail-foot .bt-ref-flag { display: inline-flex; align-items: center; gap: 0.32rem; cursor: pointer;
  white-space: nowrap; font-weight: 600; font-size: 0.72rem; padding: 0.32rem 0.6rem; border-radius: 999px;
  border: 1px solid transparent; background: rgb(var(--bt-text-muted) / 0.85);
  color: #fff; transition: filter 0.12s ease, background 0.12s ease; }
.bt-detail-foot .bt-ref-flag:hover { filter: brightness(1.08); }
.bt-detail-foot .bt-ref-flag.is-on { color: #fff; background: rgb(var(--bt-pin)); }
.bt-detail-foot .bt-ref-flag .bt-ico { width: 0.92rem; height: 0.92rem; }
/* The dimming applies to the keep-aside flag too (it's not a verdict, so never dim it for has-active). */
.bt-detail-foot.has-active .bt-ref-flag { opacity: 1; }
/* Mobile: drop the labels, leave the icon gradient. */
@media (max-width: 640px) {
  .bt-detail-foot .bt-sig-label { display: none; }
  .bt-detail-foot .bt-sig, .bt-detail-foot .bt-ref-flag { padding: 0.42rem; }
}
.bt-peek-link { display: block; width: 100%; text-align: left; background: rgb(var(--bt-surface) / 1);
  border: 1px solid rgb(var(--bt-border) / 0.6); border-radius: var(--bt-r-sm); cursor: pointer; }
.bt-peek-link:hover { border-color: rgb(var(--bt-accent) / 0.6); }

/* Detail panel fixes — readable "Appears with", a never-dimmed panel, and the tended pick shown. */
.bt-detail-section .peek, .bt-peek-link { display: block; width: 100%; text-align: left;
  background: rgb(var(--bt-surface) / 1); border: 1px solid rgb(var(--bt-border) / 1);
  border-radius: var(--bt-r-sm); padding: 0.5rem 0.65rem; margin-top: 0.4rem;
  font-size: 0.85rem; color: rgb(var(--bt-text) / 0.92); cursor: pointer; }
.bt-detail-section .peek:hover, .bt-peek-link:hover { border-color: rgb(var(--bt-accent) / 0.6); }
.peek .pu, .peek .pa { font-family: var(--bt-mono); font-size: 0.7rem; }
.peek .pu { color: rgb(var(--bt-accent) / 1); }
.peek .pa { color: rgb(var(--bt-text-muted) / 1); }
/* The detail panel is the focus — never dimmed, even when the underlying card is tended. */
.bt-modal, .bt-detail-modal { opacity: 1; }
.bt-detail-tended { text-align: center; font-size: 0.74rem; color: rgb(var(--bt-text-muted) / 1); margin: 0.9rem 0 0; }
/* Active verdict: keep the solid fill, add a dark ring so the chosen one pops above the dimmed
   others (the .has-active dimming above fades the rest to 0.4). */
.bt-sig.is-active { font-weight: 700; outline: 2px solid rgb(var(--bt-text) / 0.85); outline-offset: 2px; }

/* "You're suppressing" rules strip atop the Blocked view — the legible block list (remove with ×). */
.bt-block-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.9rem; }
.bt-block-rules-title { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--bt-mono);
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--bt-text-muted) / 1); }
.bt-block-rules-title .bt-ico { width: 0.85rem; height: 0.85rem; color: rgb(var(--bt-danger)); }
.bt-block-rule { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem;
  padding: 0.22rem 0.3rem 0.22rem 0.5rem; border: 1px solid var(--bt-line); border-radius: 999px;
  background: rgb(var(--bt-bg) / 0.5); color: rgb(var(--bt-text) / 0.9); }
.bt-block-rule-kind { font-family: var(--bt-mono); font-size: 0.6rem; text-transform: uppercase;
  color: rgb(var(--bt-text-muted) / 1); }
.bt-block-rule-x { display: inline-flex; border: 0; background: none; cursor: pointer; padding: 0.1rem;
  border-radius: 50%; color: rgb(var(--bt-text-muted) / 0.7); }
.bt-block-rule-x:hover { color: rgb(var(--bt-danger)); background: rgb(var(--bt-danger) / 0.14); }
.bt-block-rule-x .bt-ico { width: 0.72rem; height: 0.72rem; }

/* ---- Tend tunnel (the same detail modal, stepped with edge arrows over a dim backdrop) ---- */
.bt-tend { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: rgb(0 0 0 / 0.55); backdrop-filter: blur(6px); animation: bt-fade 0.15s ease; }
.bt-tend-topbar { display: flex; align-items: center; gap: 1rem; flex: none;
  padding: 0.6rem 1rem; background: rgb(var(--bt-surface-raised) / 0.96);
  border-bottom: 1px solid var(--bt-line); }
.bt-tend-exit { display: inline-flex; align-items: center; gap: 0.35rem; color: rgb(var(--bt-text-muted) / 1);
  text-decoration: none; font-size: 0.85rem; }
.bt-tend-exit:hover { color: rgb(var(--bt-text) / 1); }
.bt-tend-exit .bt-ico { width: 1rem; height: 1rem; }
.bt-tend-scope { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700;
  color: rgb(var(--bt-text) / 1); }
.bt-tend-scope .bt-ico { width: 1rem; height: 1rem; color: rgb(var(--bt-accent) / 1); }
.bt-tend-count { font-family: var(--bt-mono); font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-tend-blocked { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1); text-decoration: none;
  padding: 0.25rem 0.55rem; border: 1px solid var(--bt-line); border-radius: 999px; }
.bt-tend-blocked:hover { color: rgb(var(--bt-danger)); border-color: rgb(var(--bt-danger) / 0.5); }
.bt-tend-blocked .bt-ico { width: 0.85rem; height: 0.85rem; }
.bt-tend-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.2rem; }
.bt-tend-arrow { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  color: rgb(var(--bt-text) / 0.92); box-shadow: 0 8px 22px rgb(0 0 0 / 0.4);
  transition: transform 0.12s ease, background 0.12s ease; }
.bt-tend-arrow:hover { transform: scale(1.06); background: rgb(var(--bt-accent) / 0.95); color: #fff; }
.bt-tend-arrow.is-disabled { opacity: 0.25; pointer-events: none; box-shadow: none; }
.bt-tend-finish { background: rgb(var(--bt-sig-ok) / 0.95); color: #fff; border-color: transparent; }
.bt-tend-arrow .bt-ico { width: 1.5rem; height: 1.5rem; }
/* The tend modal reuses .bt-detail-modal's shape; cap it to the stage so the sticky triage foot stays
   reachable and long content scrolls inside. */
.bt-tend-modal { width: min(40rem, 92vw); padding: 1.25rem; background: rgb(var(--bt-surface-raised) / 1);
  border: 1px solid var(--bt-line-strong); border-radius: 0.85rem; box-shadow: 0 30px 70px rgb(0 0 0 / 0.5); }
.bt-tend-modal.bt-detail-modal { max-height: calc(100dvh - 7rem); }

@media (max-width: 640px) {
  .bt-tend-stage { padding: 0; }
  .bt-tend-modal.bt-detail-modal { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%;
    border: 0; border-radius: 0; padding: 1rem; }
  .bt-tend-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 2.6rem; height: 2.6rem; background: rgb(var(--bt-surface-raised) / 0.82); }
  .bt-tend-prev { left: 0.4rem; }
  .bt-tend-next { right: 0.4rem; }
}

/* === Constellation (Phase 11 map, note-centred) ===================================== */
/* Detail-panel doorway card — replaces the old raw-URL "Appears with" list. Always shown
   for consistency; .is-empty dims it at zero so the count stays honest, never hidden. */
.bt-constellation-card { display: flex; align-items: center; gap: 0.7rem; width: 100%;
  margin-top: 1.1rem; padding: 0.7rem 0.8rem; text-decoration: none;
  background: rgb(var(--bt-surface) / 1); border: 1px solid rgb(var(--bt-border) / 1);
  border-radius: var(--bt-r); color: rgb(var(--bt-text) / 0.92);
  transition: border-color 0.15s, background 0.15s; }
.bt-constellation-card:hover { border-color: rgb(var(--bt-accent) / 0.6);
  background: rgb(var(--bt-surface-raised) / 1); }
.bt-constellation-card.is-empty { opacity: 0.5; }
.bt-constellation-card.is-empty:hover { border-color: rgb(var(--bt-border) / 1);
  background: rgb(var(--bt-surface) / 1); }
.bt-constellation-ic { color: rgb(var(--bt-accent) / 1); display: inline-flex; flex: 0 0 auto; }
.bt-constellation-ic .bt-ico { width: 1.4rem; height: 1.4rem; }
.bt-constellation-text { display: flex; flex-direction: column; line-height: 1.2; }
.bt-constellation-title { font-weight: 600; font-size: 0.92rem; }
.bt-constellation-count { font-size: 0.74rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-constellation-kinds { margin-left: auto; display: inline-flex; gap: 0.3rem; align-items: center; }
.bt-ckind { display: inline-flex; }
.bt-ckind .bt-ico { width: 0.95rem; height: 0.95rem; }
.bt-constellation-card > .bt-ico { color: rgb(var(--bt-text-muted) / 1); width: 1rem; height: 1rem; flex: 0 0 auto; }

/* Source-kind colours — reuse the feed's per-type tokens across card, graph, outline, preview. */
.bt-ckind[data-k="chat"], .bt-cn-node[data-k="chat"], .bt-cn-oic[data-k="chat"], .bt-cn-pv-kind[data-k="chat"] { color: rgb(var(--bt-type-chat) / 1); }
.bt-ckind[data-k="link"], .bt-cn-node[data-k="link"], .bt-cn-oic[data-k="link"], .bt-cn-pv-kind[data-k="link"] { color: rgb(var(--bt-type-link) / 1); }
.bt-ckind[data-k="image"], .bt-cn-node[data-k="image"], .bt-cn-oic[data-k="image"], .bt-cn-pv-kind[data-k="image"],
.bt-ckind[data-k="video"], .bt-cn-node[data-k="video"], .bt-cn-oic[data-k="video"], .bt-cn-pv-kind[data-k="video"] { color: rgb(var(--bt-type-image) / 1); }
.bt-ckind[data-k="checklist"], .bt-cn-node[data-k="checklist"], .bt-cn-oic[data-k="checklist"], .bt-cn-pv-kind[data-k="checklist"] { color: rgb(var(--bt-type-checklist) / 1); }
.bt-ckind[data-k="text"], .bt-cn-node[data-k="text"], .bt-cn-oic[data-k="text"], .bt-cn-pv-kind[data-k="text"] { color: rgb(var(--bt-type-text) / 1); }
.bt-ckind[data-k="social"], .bt-cn-node[data-k="social"], .bt-cn-oic[data-k="social"], .bt-cn-pv-kind[data-k="social"] { color: rgb(var(--bt-type-social) / 1); }

/* Constellation board — hierarchical, sectioned view of the pinboard's ACTUAL compact cards (not a
   mindmap). Sections are native <details> (collapse w/o JS); each section header has a closeness bar;
   each card gets a "kind · N% similar" overlay near its bottom edge. */
.bt-cn-board { display: flex; flex-direction: column; gap: 0.8rem; }
.bt-cn-section { border: 1px solid rgb(var(--bt-border) / 1); border-radius: var(--bt-r);
  background: rgb(var(--bt-surface) / 0.5); }
.bt-cn-sec-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem;
  cursor: pointer; color: rgb(var(--bt-text) / 1); list-style: none; }
.bt-cn-sec-head::-webkit-details-marker { display: none; }
.bt-cn-chev { width: 0.95rem; height: 0.95rem; color: rgb(var(--bt-text-muted) / 1); flex: 0 0 auto;
  transition: transform 0.15s; }
.bt-cn-section[open] > .bt-cn-sec-head .bt-cn-chev { transform: rotate(90deg); }
.bt-cn-sec-name { font-weight: 600; font-size: 0.95rem; flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bt-cn-sec-count { font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 1);
  background: rgb(var(--bt-surface-raised) / 1); border-radius: 999px; padding: 0.05rem 0.5rem; flex: 0 0 auto; }
.bt-cn-cardgrid { padding: 0 0.7rem 0.7rem; }

/* 5-segment closeness bar (equal height, class-toggled — CSP-safe, no inline width/height). */
.bt-cn-bars { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.bt-cn-bars i { width: 3px; height: 11px; border-radius: 2px; background: rgb(var(--bt-accent) / 0.28); }
.bt-cn-bars i.on { background: rgb(var(--bt-accent) / 1); }

/* Each related note = a real compact card framed by the wrap, with the "kind · N% similar" band as a
   real footer (normal flow, never overlapping). The inner card is display:flow-root so its FLOATED
   compact media is contained (the overlap bug); the wrap carries the border/radius/hover. */
.bt-cn-cardwrap { break-inside: avoid; margin: 0 0 0.55rem; overflow: hidden;
  border: 1px solid rgb(var(--bt-border) / 1); border-radius: var(--bt-radius);
  background: rgb(var(--bt-surface) / 1); transition: border-color 0.12s; }
.bt-cn-cardwrap:hover { border-color: rgb(var(--bt-accent) / 0.6); }
.bt-cn-cardwrap > .bt-card { display: flow-root; border: 0; border-radius: 0; margin: 0;
  box-shadow: none; background: transparent; cursor: pointer; }
.bt-cn-simbadge { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em; text-transform: capitalize;
  color: #fff; background: rgb(var(--bt-accent) / 0.92); border-top: 1px solid rgb(var(--bt-accent) / 1);
  padding: 0.34rem 0.7rem; }

/* Constellation full page */
.bt-constellation-page { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.bt-cn-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem 0.35rem;
  font-size: 0.82rem; margin: 0 0 1rem; }
.bt-cn-crumb { color: rgb(var(--bt-text-muted) / 1); text-decoration: none; display: inline-flex;
  align-items: center; gap: 0.2rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bt-cn-crumb .bt-ico { width: 0.85rem; height: 0.85rem; }
a.bt-cn-crumb:hover { color: rgb(var(--bt-accent) / 1); }
.bt-cn-crumb-current { color: rgb(var(--bt-text) / 1); font-weight: 600; }
.bt-cn-sep { color: rgb(var(--bt-text-soft) / 0.7); }
/* Constellation overlay (launched from a card's Constellation button, swapped into #modal). Wide,
   scrollable modal over the pinboard; reuses .bt-modal / .bt-modal-backdrop. */
.bt-cn-modal { width: min(64rem, 94vw); max-height: 86vh; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; position: relative; }
.bt-cn-modal-head { margin-bottom: 0.9rem; }
.bt-cn-modal-head .bt-detail-home { margin-top: 0; }
.bt-cn-modal-title { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0; font-size: 1.15rem; }
.bt-cn-modal-title .bt-ico { color: rgb(var(--bt-accent) / 1); width: 1.2rem; height: 1.2rem; }
.bt-cn-modal-count { font-weight: 400; font-size: 0.85rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-cn-modal-hub { margin: 0.2rem 0 0; font-size: 0.88rem; color: rgb(var(--bt-text-muted) / 1); }

/* Summary overlay — the AI summary shown over the pinboard (OOB-swapped into #modal). */
.bt-summary-modal { width: min(38rem, 92vw); max-height: 82vh; overflow-y: auto;
  overscroll-behavior: contain; position: relative; }
.bt-summary-modal-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.7rem; }
.bt-summary-modal-title { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 1.05rem; }
.bt-summary-modal-title .bt-ico { width: 1.05rem; height: 1.05rem; color: rgb(var(--bt-accent) / 1); }
.bt-summary-close { flex: none; }
.bt-summary-modal-body .bt-summary-lead { font-size: 0.95rem; }
.bt-summary-empty { color: rgb(var(--bt-text-muted) / 1); font-size: 0.9rem; margin: 0; }
.bt-cn-head { margin-bottom: 1rem; }
.bt-cn-h1 { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.3rem; }
.bt-cn-h1 .bt-ico { color: rgb(var(--bt-accent) / 1); width: 1.4rem; height: 1.4rem; align-self: center; }
.bt-cn-h1-count { font-weight: 400; font-size: 0.92rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-cn-sub { color: rgb(var(--bt-text-muted) / 1); font-size: 0.92rem; margin: 0.3rem 0 0; }
.bt-cn-hublink { color: rgb(var(--bt-text) / 1); text-decoration: none;
  border-bottom: 1px solid rgb(var(--bt-accent) / 0.5); }
.bt-cn-hublink:hover { border-bottom-color: rgb(var(--bt-accent) / 1); }
.bt-cn-count { color: rgb(var(--bt-text-muted) / 1); }

.bt-cn-graph { position: relative; border: 1px solid rgb(var(--bt-border) / 1);
  border-radius: var(--bt-r); overflow: hidden;
  background: radial-gradient(700px 420px at 50% 42%, rgb(var(--bt-accent) / 0.05), transparent 70%),
    rgb(var(--bt-surface) / 0.5); }
.bt-cn-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 680; }
.bt-cn-edge { stroke: rgb(var(--bt-edge) / 1); }
.bt-cn-edge.is-hub { stroke: rgb(var(--bt-accent) / 1); }
.bt-cn-node { cursor: pointer; color: rgb(var(--bt-type-text) / 1); }
.bt-cn-node:focus { outline: none; }
.bt-cn-circle { fill: currentColor; fill-opacity: 0.16; stroke: currentColor; stroke-width: 1.6;
  transition: fill-opacity 0.12s; }
.bt-cn-node:hover .bt-cn-circle, .bt-cn-node:focus .bt-cn-circle { fill-opacity: 0.32; }
.bt-cn-glyph { color: currentColor; }
.bt-cn-nlabel { fill: rgb(var(--bt-text-muted) / 1); font-size: 11px; font-family: var(--bt-font-family, sans-serif); }
.bt-cn-hub-circle { fill: rgb(var(--bt-accent) / 0.18); stroke: rgb(var(--bt-accent) / 1); stroke-width: 1.6; }
.bt-cn-hub-label { fill: rgb(var(--bt-text) / 1); font-size: 13px; font-weight: 600; font-family: var(--bt-font-family, sans-serif); }
.bt-cn-hint { text-align: center; color: rgb(var(--bt-text-muted) / 1); font-size: 0.74rem; padding: 0.5rem; margin: 0; }

.bt-cn-preview { position: absolute; z-index: 5; width: 250px; pointer-events: none; opacity: 0;
  transform: translateY(4px); transition: opacity 0.12s, transform 0.12s;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid rgb(var(--bt-border) / 1);
  border-radius: var(--bt-r-sm); padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.2rem;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.6); }
.bt-cn-preview.on { opacity: 1; transform: translateY(0); }
.bt-cn-pv-kind { font-size: 0.66rem; font-weight: 600; text-transform: capitalize; color: rgb(var(--bt-type-text) / 1); }
.bt-cn-pv-title { font-size: 0.86rem; line-height: 1.25; color: rgb(var(--bt-text) / 1); }
.bt-cn-pv-sim { font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 1); }

.bt-cn-outline { display: none; }
.bt-cn-osec { margin-bottom: 1.2rem; }
.bt-cn-oh { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; margin: 0 0 0.5rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid rgb(var(--bt-border) / 1); }
.bt-cn-ocount { margin-left: auto; font-size: 0.7rem; color: rgb(var(--bt-text-muted) / 1);
  background: rgb(var(--bt-surface-raised) / 1); border-radius: 999px; padding: 0.05rem 0.45rem; }
.bt-cn-orow { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.5rem; text-decoration: none;
  border-bottom: 1px solid rgb(var(--bt-border) / 0.5); color: rgb(var(--bt-text) / 0.92); }
.bt-cn-orow:active { background: rgb(var(--bt-surface) / 1); }
.bt-cn-oic { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: 0.5rem; display: flex;
  align-items: center; justify-content: center; color: rgb(var(--bt-type-text) / 1);
  background: rgb(var(--bt-surface-raised) / 1); }
.bt-cn-oic svg { width: 1rem; height: 1rem; }
.bt-cn-otext { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bt-cn-otitle { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; }
.bt-cn-osub { font-size: 0.68rem; color: rgb(var(--bt-text-muted) / 1); text-transform: capitalize; }
.bt-cn-oarrow { color: rgb(var(--bt-text-muted) / 1); flex: 0 0 auto; }
.bt-cn-empty { padding: 2rem 1rem; }

/* One artifact, two renderings: nodes+edges on wide screens, the ordered outline on narrow. */
@media (max-width: 720px) {
  .bt-cn-graph { display: none; }
  .bt-cn-outline { display: block; }
}

/* Admin Panel + Cost Management (superuser ops). Mirrors the panel/card system; theme-driven. */
.bt-admin-sub { color: rgb(var(--bt-text-muted) / 1); font-size: 0.9rem; margin: 0 0 1.25rem; }
.bt-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.bt-admin-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--bt-line); border-radius: 0.8rem; background: rgb(var(--bt-surface) / 0.6);
  text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.bt-admin-card:hover { border-color: rgb(var(--bt-accent) / 0.6); transform: translateY(-1px); }
.bt-admin-card-ico { color: rgb(var(--bt-accent) / 1); }
.bt-admin-card-ico .bt-ico { width: 1.4rem; height: 1.4rem; }
.bt-admin-card-title { font-weight: 600; letter-spacing: -0.01em; }
.bt-admin-card-desc { font-size: 0.85rem; color: rgb(var(--bt-text-muted) / 1); }

.bt-cost-monthpick { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;
  color: rgb(var(--bt-text-muted) / 1); }
.bt-cost-monthpick select { font: inherit; padding: 0.3rem 0.5rem; border-radius: 0.5rem;
  border: 1px solid var(--bt-line); background: rgb(var(--bt-surface) / 0.8); color: rgb(var(--bt-text) / 1); }

.bt-cost-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem; margin: 1.25rem 0; }
.bt-cost-stat { padding: 0.85rem 1rem; border: 1px solid var(--bt-line); border-radius: 0.7rem;
  background: rgb(var(--bt-surface) / 0.5); display: flex; flex-direction: column; gap: 0.25rem; }
.bt-cost-stat-lead { grid-column: span 2; border-color: rgb(var(--bt-accent) / 0.4); }
.bt-cost-stat-k { font-family: var(--bt-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgb(var(--bt-text-muted) / 1); }
.bt-cost-stat-v { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.bt-cost-stat-sub { font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-cost-up { color: rgb(var(--bt-sig-up) / 1); }
.bt-cost-down { color: rgb(var(--bt-sig-down) / 1); }

.bt-cost-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.bt-cost-card { padding: 1.1rem 1.2rem; border: 1px solid var(--bt-line); border-radius: 0.8rem;
  background: rgb(var(--bt-surface) / 0.5); }
.bt-cost-card h2 { margin: 0 0 0.8rem; font-size: 0.95rem; }
.bt-cost-card-wide { grid-column: 1 / -1; }
.bt-cost-row .bt-cost-card-wide:only-child { grid-column: 1 / -1; }
.bt-cost-chartbox { position: relative; height: 12rem; }
.bt-cost-legend { list-style: none; margin: 0.8rem 0 0; padding: 0; font-size: 0.85rem; }
.bt-cost-legend li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0;
  border-top: 1px solid var(--bt-line); }
.bt-cost-legend li:first-child { border-top: 0; }
.bt-cost-mono { font-family: var(--bt-mono); font-variant-numeric: tabular-nums; }
.bt-cost-h { margin: 1.5rem 0 0.5rem; font-size: 1.05rem; }

.bt-cost-tablewrap { overflow-x: auto; border: 1px solid var(--bt-line); border-radius: 0.8rem; }
.bt-cost-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 40rem; }
.bt-cost-table th, .bt-cost-table td { text-align: left; padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--bt-line); }
.bt-cost-table thead th { font-family: var(--bt-mono); font-size: 0.7rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgb(var(--bt-text-muted) / 1); }
.bt-cost-table th:not(:first-child), .bt-cost-table td:not(:first-child) { text-align: right; }
.bt-cost-table tbody tr:last-child td { border-bottom: 0; }
.bt-cost-empty { color: rgb(var(--bt-text-muted) / 1); font-style: italic; }
.bt-cost-note { display: flex; align-items: center; gap: 0.45rem; margin-top: 1rem;
  font-size: 0.82rem; color: rgb(var(--bt-text-muted) / 1); }

@media (max-width: 720px) {
  .bt-cost-row { grid-template-columns: 1fr; }
  .bt-cost-stat-lead { grid-column: span 1; }
}

/* Standing reminder banner (e.g. Supadata not yet priced) — accent-edged callout. */
.bt-cost-banner { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1rem 0 0;
  padding: 0.8rem 1rem; border: 1px solid rgb(var(--bt-accent) / 0.4);
  border-left: 3px solid rgb(var(--bt-accent) / 1); border-radius: 0.6rem;
  background: rgb(var(--bt-accent) / 0.07); font-size: 0.85rem; color: rgb(var(--bt-text) / 1); }
.bt-cost-banner .bt-ico { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.1rem;
  color: rgb(var(--bt-accent) / 1); }
.bt-cost-banner code { font-family: var(--bt-mono); font-size: 0.82em;
  padding: 0.05rem 0.3rem; border-radius: 0.3rem; background: rgb(var(--bt-text) / 0.08); }

/* ===== Three doors: Triage / Tend / Kept (TRIAGE-TEND-KEPT) ============== */
.bt-doors { display: flex; gap: 0.4rem; align-items: center; }
.bt-door { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.9rem;
  border-radius: 0.6rem; font: 600 0.9rem/1 var(--bt-font); text-decoration: none;
  color: rgb(var(--bt-text-muted) / 0.7); border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s; }
.bt-door .bt-ico { width: 1.05rem; height: 1.05rem; }
.bt-door:hover { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 1); }
.bt-door-count { font-family: var(--bt-mono); font-size: 0.7rem; font-weight: 700;
  padding: 0.05rem 0.42rem; border-radius: 999px; background: rgb(var(--bt-text) / 0.1); color: rgb(var(--bt-text-muted) / 1); }
/* The Brief: every door always shows its count, even at zero (plan §2 — a permanent fixture);
   zero is dimmed, never hidden, so quiet days still read "Brief 0 · Inbox 0". */
.bt-door-count.is-empty { opacity: 0.45; }
.bt-door-sync { display: none; }
.door-brief .bt-door-count { background: rgb(var(--bt-accent) / 0.16); color: rgb(var(--bt-accent) / 1); }
.door-brief.is-active { color: rgb(var(--bt-accent) / 1); background: rgb(var(--bt-accent) / 0.12); border-color: rgb(var(--bt-accent) / 0.45); }
.door-triage .bt-door-count { background: rgb(var(--bt-accent) / 0.16); color: rgb(var(--bt-accent) / 1); }
.door-tend .bt-door-count { background: rgb(var(--bt-type-checklist) / 0.16); color: rgb(var(--bt-type-checklist) / 1); }
.door-kept .bt-door-count { background: rgb(var(--bt-type-link) / 0.16); color: rgb(var(--bt-type-link) / 1); }
.door-triage.is-active { color: rgb(var(--bt-accent) / 1); background: rgb(var(--bt-accent) / 0.12); border-color: rgb(var(--bt-accent) / 0.45); }
.door-tend.is-active { color: rgb(var(--bt-type-checklist) / 1); background: rgb(var(--bt-type-checklist) / 0.12); border-color: rgb(var(--bt-type-checklist) / 0.45); }
.door-kept.is-active { color: rgb(var(--bt-type-link) / 1); background: rgb(var(--bt-type-link) / 0.12); border-color: rgb(var(--bt-type-link) / 0.45); }
@media (max-width: 700px) { .bt-door { padding: 0.36rem 0.55rem; }
  .bt-door .bt-door-name { display: none; } }

/* ----- Triage (the fast door) ------------------------------------------- */
.bt-triage { max-width: 1120px; margin: 0 auto; padding: 0.4rem 1rem 3rem; }
.bt-triage-head { text-align: center; margin: 0.3rem 0 1rem; }
.bt-triage-count { font-family: var(--bt-mono); color: rgb(var(--bt-text) / 0.65); font-size: 0.9rem; }
.bt-triage-count b { color: rgb(var(--bt-text)); }
.bt-progress { height: 6px; border-radius: 999px; background: rgb(var(--bt-text) / 0.1);
  overflow: hidden; max-width: 520px; margin: 0.55rem auto 0; }
.bt-progress-fill { height: 100%; width: 0; background: rgb(var(--bt-accent)); transition: width 0.35s ease; }
.bt-triage .bt-interest-tabs { margin-bottom: 1rem; }
.bt-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; min-height: 320px; }
@media (max-width: 820px) { .bt-stage { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.bt-triage-hint { text-align: center; color: rgb(var(--bt-text) / 0.45); font-size: 0.78rem; margin-top: 1rem; }
.bt-triage-hint b { font-family: var(--bt-mono); color: rgb(var(--bt-text) / 0.7); }
.bt-tcard { background: rgb(var(--bt-surface)); border: 1px solid rgb(var(--bt-border));
  border-left: 3px solid rgb(var(--bt-accent)); border-radius: 0.7rem; padding: 1rem 1.05rem;
  display: flex; flex-direction: column; gap: 0.55rem; min-height: 200px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06); transition: transform 0.28s ease, opacity 0.28s ease; }
.bt-tcard.kind-link { border-left-color: rgb(var(--bt-type-link)); }
.bt-tcard.kind-chat { border-left-color: rgb(var(--bt-type-chat)); }
.bt-tcard.kind-image { border-left-color: rgb(var(--bt-type-image)); }
.bt-tcard.kind-todo { border-left-color: rgb(var(--bt-type-checklist)); }
.bt-tcard-meta { font-family: var(--bt-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: rgb(var(--bt-text) / 0.55); display: flex; align-items: center; gap: 0.4rem; }
.bt-tcard-meta .dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--bt-accent)); flex: none; }
.bt-tcard-title { font-size: 1.02rem; font-weight: 600; line-height: 1.35; margin: 0; }
.bt-tcard-acts { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.bt-tcard-acts button { flex: 1; padding: 0.6rem; border-radius: 0.5rem; font-weight: 700;
  font-size: 0.92rem; cursor: pointer; border: 1px solid rgb(var(--bt-border)); }
.bt-skip { background: rgb(var(--bt-surface-raised)); color: rgb(var(--bt-text) / 0.6); }
.bt-skip:hover { border-color: rgb(var(--bt-danger) / 0.5); color: rgb(var(--bt-danger)); }
.bt-later { background: rgb(var(--bt-type-checklist)); color: #fff; border-color: transparent; }
.bt-tcard.go-left { transform: translateX(-44px) rotate(-4deg); opacity: 0; }
.bt-tcard.go-right { transform: translateX(44px) rotate(4deg); opacity: 0; }
.bt-tcard.enter { opacity: 0; transform: translateY(12px); }
/* Rich-card conveyor — full _card.html dealt into the 3-up stage */
.bt-stage > .bt-card { margin: 0; transition: transform .3s ease, opacity .3s ease;
  touch-action: pan-y; }  /* JS owns horizontal swipe; vertical still scrolls the page */
.bt-stage > .bt-card.go-left { transform: translateX(-48px) rotate(-3deg); opacity: 0; }
.bt-stage > .bt-card.go-right { transform: translateX(48px) rotate(3deg); opacity: 0; }
.bt-stage > .bt-card.bt-deal { animation: bt-deal-in .24s ease both; }
@keyframes bt-deal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bt-triage-acts { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.bt-triage-acts .bt-skip, .bt-triage-acts .bt-later { flex: 1; padding: 0.55rem; border-radius: 0.5rem;
  font-weight: 700; font-size: 0.9rem; cursor: pointer; border: 1px solid rgb(var(--bt-border)); }
.bt-triage-done { text-align: center; padding: 3rem 1rem; }
.bt-triage-done .big { font-size: 3rem; margin-bottom: 0.5rem; }
.bt-burst { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 70; }
.bt-burst span { position: absolute; top: 38%; left: 50%; width: 9px; height: 9px; border-radius: 2px;
  animation: bt-pop 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes bt-pop { 0% { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; } }

/* ----- Tend (the slow door) — note: .bt-tend* is a legacy catchup-tunnel namespace, so this
   door view uses .bt-tendview* to avoid the full-screen scrim collision. -------------------- */
.bt-tendview { max-width: 1120px; margin: 0 auto; padding: 0.4rem 1rem 3rem; }
.bt-tendview-head { margin: 0.3rem 0 0.8rem; text-align: center; }
.bt-tendview-title { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.bt-tendview-sub { color: rgb(var(--bt-text) / 0.6); margin: 0.2rem 0 0; font-size: 0.92rem; }
.bt-tendview .bt-interest-tabs { margin-bottom: 1rem; }
.bt-tend-acts { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.bt-tend-keep { background: rgb(var(--bt-type-book) / 0.12); color: rgb(var(--bt-type-book)); border-color: rgb(var(--bt-type-book) / 0.4); }
.bt-tend-done:hover { border-color: rgb(var(--bt-accent) / 0.5); color: rgb(var(--bt-accent)); }
/* Tend detail-modal footer: only Done / Keep (no verdict bar) */
.bt-tend-foot { justify-content: center; gap: 0.6rem; }
.bt-tend-foot .bt-sig { padding: 0.5rem 1.5rem; }
.bt-sig-keep { background: rgb(var(--bt-type-book)); color: #fff; }
/* The note detail panel goes full-screen on phones (read it / open the link, then Done/Keep). */
@media (max-width: 640px) {
  .bt-modal-backdrop:has(.bt-detail-modal) { padding: 0; place-items: stretch; }
  .bt-detail-modal { width: 100vw; max-width: 100vw; min-height: 100dvh; max-height: 100dvh;
    border-radius: 0; border-width: 0; overflow-y: auto; }
}
/* Mobile (≤640px): symbol-only logo, interest dropdown, swipe-only triage */
.bt-logo-mark { height: 38px; width: auto; }
.bt-interest-dd { width: 100%; max-width: 22rem; padding: 0.6rem 2.2rem 0.6rem 0.85rem;
  border-radius: 0.6rem; border: 1px solid rgb(var(--bt-border)); cursor: pointer;
  background-color: rgb(var(--bt-surface) / 1); color: rgb(var(--bt-text) / 1);
  font: 600 0.9rem var(--bt-font); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; }
.bt-swipe-hint { text-align: center; color: rgb(var(--bt-text) / 0.5); font-size: 0.82rem; margin-top: 1.1rem; }
@media (max-width: 640px) {
  .bt-interest-dd { display: block; margin: 0 auto 1.1rem; }
  .bt-swipe-hint { display: block; }
  .bt-triage-acts { display: none; }   /* mobile triage = swipe only */
}
@media (prefers-reduced-motion: reduce) { .bt-tcard, .bt-progress-fill { transition: none; } .bt-burst span { animation: none; } }

/* ===== Manage-interests cards (header row + full-width description) + busy spinner ====== */
.bt-interest-manage-list li.bt-im-item { position: relative; display: flex; flex-direction: column;
  align-items: stretch; gap: 0.55rem; padding: 0.7rem 0.8rem; overflow: hidden; }
.bt-im-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bt-im-count { font-family: var(--bt-mono); font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-im-rm-wrap { margin-left: auto; }
.bt-im-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; }
.bt-im-edit-toggle { align-self: flex-start; }
.bt-interest-edit { width: 100%; }
.bt-im-item .bt-interest-desc-form { max-width: none; width: 100%; }
.bt-im-prompt { margin: 0 0 0.1rem; }
.bt-im-textarea { width: 100%; box-sizing: border-box; min-height: 5.5rem; line-height: 1.5; }
.bt-im-form-actions { display: flex; justify-content: flex-end; }
.bt-chip-primary { background: rgb(var(--bt-accent) / 1); color: rgb(var(--bt-bg) / 1); border-color: transparent; }
.bt-chip-primary:hover { filter: brightness(1.07); }
/* Busy overlay: htmx adds .htmx-request to the item (hx-indicator="closest .bt-im-item") during the
   embed+sort, and to the add-form (its own trigger) on create. */
.bt-interest-add { position: relative; }
.bt-im-spin { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center;
  background: rgb(var(--bt-surface) / 0.66); border-radius: inherit; }
.bt-im-item.htmx-request > .bt-im-spin, .bt-interest-add.htmx-request > .bt-im-spin { display: flex; }
.bt-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid rgb(var(--bt-text) / 0.2);
  border-top-color: rgb(var(--bt-accent) / 1); border-radius: 50%; animation: bt-spin 0.7s linear infinite; }
@keyframes bt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bt-spinner { animation-duration: 1.6s; } }
/* Interest chip colour picker (theme palette swatches) */
.bt-im-colors { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.1rem 0 0.55rem; }
.bt-im-swatch { width: 1.3rem; height: 1.3rem; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 0 0 1px rgb(var(--bt-border) / 0.6); transition: transform .1s ease; }
.bt-im-swatch:hover { transform: scale(1.12); }
.bt-im-swatch.is-active { border-color: rgb(var(--bt-text) / 0.85); box-shadow: none; }
.bt-im-swatch.bt-pal-0{background:rgb(var(--bt-palette-0)/1)} .bt-im-swatch.bt-pal-1{background:rgb(var(--bt-palette-1)/1)}
.bt-im-swatch.bt-pal-2{background:rgb(var(--bt-palette-2)/1)} .bt-im-swatch.bt-pal-3{background:rgb(var(--bt-palette-3)/1)}
.bt-im-swatch.bt-pal-4{background:rgb(var(--bt-palette-4)/1)} .bt-im-swatch.bt-pal-5{background:rgb(var(--bt-palette-5)/1)}
.bt-im-swatch.bt-pal-6{background:rgb(var(--bt-palette-6)/1)} .bt-im-swatch.bt-pal-7{background:rgb(var(--bt-palette-7)/1)}
.bt-im-swatch.bt-pal-8{background:rgb(var(--bt-palette-8)/1)} .bt-im-swatch.bt-pal-9{background:rgb(var(--bt-palette-9)/1)}
.bt-im-swatch.bt-pal-10{background:rgb(var(--bt-palette-10)/1)} .bt-im-swatch.bt-pal-11{background:rgb(var(--bt-palette-11)/1)}
.bt-im-swatch.bt-pal-12{background:rgb(var(--bt-palette-12)/1)} .bt-im-swatch.bt-pal-13{background:rgb(var(--bt-palette-13)/1)}
.bt-im-swatch.bt-pal-14{background:rgb(var(--bt-palette-14)/1)} .bt-im-swatch.bt-pal-15{background:rgb(var(--bt-palette-15)/1)}

/* ----- pricing tiers (paywall + pricing page, Part C) ----------------------- */
.bt-pricing-panel { max-width: 1000px; }
.bt-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.6rem 0; }
.bt-tier { position: relative; background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius); padding: 1.3rem 1.2rem; display: flex; flex-direction: column; }
.bt-tier-hero { border-color: rgb(var(--bt-accent) / 0.5); box-shadow: 0 8px 30px rgb(var(--bt-accent) / 0.1); }
.bt-tier-founder { border-color: rgb(var(--bt-pin) / 0.55); }
.bt-tier-flag { position: absolute; top: -0.7rem; left: 1.1rem; font-family: var(--bt-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.04em; background: rgb(var(--bt-accent) / 1); color: rgb(var(--bt-bg) / 1);
  padding: 0.18rem 0.55rem; border-radius: 999px; }
.bt-tier-flag-scarce { background: rgb(var(--bt-pin) / 1); }
.bt-tier-name { font-family: var(--bt-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgb(var(--bt-text-muted) / 1); }
.bt-tier-price { display: flex; align-items: baseline; gap: 0.3rem; margin: 0.6rem 0 0.1rem; }
.bt-tier-price .amt { font-size: 2.3rem; font-weight: 800; line-height: 1; }
.bt-tier-price .per { font-size: 0.9rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-tier-sub { font-size: 0.84rem; color: rgb(var(--bt-text-muted) / 1); margin: 0 0 0.9rem; min-height: 1.1rem; }
.bt-tier-feat { list-style: none; padding: 0; margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.bt-tier-feat li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; }
.bt-tier-feat .bt-ico { width: 0.95rem; height: 0.95rem; color: rgb(var(--bt-type-checklist) / 1); flex: none; }
.bt-tier .bt-cta-lg { width: 100%; }
.bt-cta-founder { background: rgb(var(--bt-pin) / 1); }
.bt-tier-alt { margin-top: 0.5rem; }
.bt-tier-altbtn { width: 100%; background: none; border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm);
  padding: 0.5rem; cursor: pointer; font-family: var(--bt-mono); font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-tier-altbtn:hover { border-color: rgb(var(--bt-accent) / 0.5); color: rgb(var(--bt-accent) / 1); }
.bt-tier-current { font-family: var(--bt-mono); font-size: 0.8rem; color: rgb(var(--bt-type-checklist) / 1);
  border: 1px solid rgb(var(--bt-type-checklist) / 0.4); border-radius: var(--bt-r-sm); padding: 0.5rem; text-align: center; }

/* ============================================================================================
   Single-note share — the centered compose modal + the public /s/<token> page (note-share plan).
   Content is the hero; the brand is a thin frame (D4/D16). Baseline styling — a polish pass on the
   public page is expected once the flow is exercised end-to-end.
   ============================================================================================ */

/* --- centered share modal (authed app; swapped into #modal) --- */
.bt-share-modal { width: min(30rem, 92vw); }
.bt-share-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid rgb(var(--bt-text) / 0.08); }
.bt-share-modal-title { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 1rem; margin: 0; }
.bt-share-modal-body { padding: 1rem 1.1rem; display: grid; gap: 0.75rem; }
.bt-share-thought { width: 100%; resize: vertical; min-height: 3rem; }
.bt-share-linkrow { display: flex; align-items: stretch; gap: 0.4rem; cursor: pointer; }
.bt-share-linkrow:focus-visible { outline: 2px solid rgb(var(--bt-accent) / 0.6); outline-offset: 2px; border-radius: var(--bt-r-sm); }
.bt-share-urlfield { flex: 1 1 auto; min-width: 0; font-family: var(--bt-mono);
  font-size: 0.72rem; cursor: pointer; pointer-events: none; }
/* The shared `.bt-modal input[type=text]` rule (0,2,1) forces margin-bottom; beat it with three
   classes so the field isn't padded taller than its box and the copy button can stretch to match. */
.bt-share-modal .bt-share-linkrow .bt-share-urlfield { margin: 0; }
.bt-share-copybtn { flex: none; align-self: stretch; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 0.5rem; border: 1px solid rgb(var(--bt-text) / 0.12);
  border-radius: var(--bt-r-sm); }
.bt-share-copybtn .bt-copy-default, .bt-share-copybtn .bt-copy-done { display: inline-flex; align-items: center; }
.bt-share-copybtn .bt-copy-done { display: none; }
.bt-share-copybtn.is-copied .bt-copy-default { display: none; }
.bt-share-copybtn.is-copied .bt-copy-done { display: inline-flex; color: rgb(var(--bt-type-checklist) / 1); }
.bt-share-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.85rem 1.1rem; border-top: 1px solid rgb(var(--bt-text) / 0.08); }

/* --- public page chrome (slim frame, no app nav) --- */
.bt-public { display: flex; flex-direction: column; min-height: 100vh; background: rgb(var(--bt-bg) / 1); }
.bt-public-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.25rem; border-bottom: 1px solid rgb(var(--bt-text) / 0.07); }
.bt-public-nav { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; }
.bt-public-what { color: var(--bt-text-soft); text-decoration: none; }
.bt-public-what:hover { color: rgb(var(--bt-text) / 1); }
.bt-public-main { flex: 1 1 auto; width: 100%; max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.bt-public-foot { text-align: center; font-size: 0.82rem; color: var(--bt-text-soft);
  padding: 1.5rem 1.25rem 2.5rem; border-top: 1px solid rgb(var(--bt-text) / 0.07); }
.bt-public-foot a { color: rgb(var(--bt-accent) / 1); text-decoration: none; margin-left: 0.35rem; }

/* --- the shared content --- */
.bt-share-quote { margin: 0 0 1.5rem; }
.bt-share-quote blockquote { margin: 0; font-size: 1.3rem; line-height: 1.4; font-weight: 600; }
.bt-share-quote figcaption { margin-top: 0.5rem; color: var(--bt-text-soft); font-size: 0.9rem; }
.bt-share-byline { color: var(--bt-text-soft); margin: 0 0 1.25rem; }

.bt-share-card { border: 1px solid rgb(var(--bt-text) / 0.1); border-radius: var(--bt-r-md);
  overflow: hidden; background: rgb(var(--bt-surface) / 1); }

/* Figure shows the WHOLE image (contain) — books are portrait, articles landscape; never hard-crop. */
.bt-share-figure { display: flex; align-items: center; justify-content: center;
  background: rgb(var(--bt-text) / 0.05); padding: 1rem; }
.bt-share-figure img { max-width: 100%; max-height: 58vh; width: auto; height: auto;
  object-fit: contain; border-radius: 6px; display: block; }
a.bt-share-figure { cursor: pointer; }
.bt-share-card--book .bt-share-figure { background: none; padding: 1.6rem 1rem 0.4rem; }
.bt-share-card--book .bt-share-figure img { max-height: 340px; border-radius: 4px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); }

.bt-share-meta { padding: 1.1rem 1.2rem 1.3rem; }
.bt-share-card--book .bt-share-meta { text-align: center; }
.bt-share-eyebrow { font-family: var(--bt-mono); font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgb(var(--bt-accent) / 1); margin: 0 0 0.45rem; }
.bt-share-title { font-size: 1.35rem; line-height: 1.25; margin: 0; }
.bt-share-title a { color: inherit; text-decoration: none; }
.bt-share-title a:hover { text-decoration: underline; }
.bt-share-source { color: var(--bt-text-soft); font-size: 0.85rem; margin: 0.3rem 0 0; }
.bt-share-body { line-height: 1.6; margin-top: 0.75rem; color: rgb(var(--bt-text) / 0.92); }

/* The obvious link — a filled CTA so it's never buried (D4). */
.bt-share-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; }
.bt-share-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem;
  padding: 0.6rem 1.1rem; border-radius: var(--bt-r-sm); font-weight: 600; text-decoration: none;
  background: rgb(var(--bt-accent) / 1); color: rgb(var(--bt-accent-ink, 255 255 255) / 1); }
.bt-share-links .bt-share-cta { margin-top: 0; }
.bt-share-cta:hover { filter: brightness(1.05); }
.bt-share-cta--ghost { background: none; border: 1px solid rgb(var(--bt-text) / 0.2);
  color: rgb(var(--bt-text) / 1); }

.bt-share-checklist { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.bt-share-checklist li { display: flex; align-items: flex-start; gap: 0.5rem; }
.bt-share-checklist li.is-checked span { text-decoration: line-through; color: var(--bt-text-soft); }
.bt-share-chat { margin-top: 0.75rem; display: grid; gap: 0.7rem; }
.bt-share-msg { display: grid; gap: 0.2rem; }
.bt-share-role { font-family: var(--bt-mono); font-size: 0.62rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--bt-text-soft); }
.bt-share-msg-text { line-height: 1.5; }

/* --- the Save gate (calm, not the loudest thing) --- */
.bt-share-save { margin-top: 1.5rem; text-align: center; }
.bt-share-save form { margin: 0; }
.bt-share-saved { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.6rem;
  color: rgb(var(--bt-type-checklist) / 1); font-weight: 600; }
.bt-share-gone { text-align: center; padding: 3rem 1rem; }
.bt-share-gone h1 { font-size: 1.4rem; margin: 0 0 0.6rem; }
.bt-share-gone p { color: var(--bt-text-soft); margin: 0 0 1.5rem; }
.bt-btn-primary { display: inline-block; padding: 0.7rem 1.4rem; border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-accent) / 1); color: rgb(var(--bt-accent-ink, 255 255 255) / 1);
  font-weight: 600; text-decoration: none; }
.bt-btn-primary:hover { filter: brightness(1.05); }

/* --- "My shares" management page --- */
.bt-mine { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1rem; }
.bt-mine-title { margin: 0 0 0.25rem; }
.bt-mine-sub { color: var(--bt-text-soft); margin: 0 0 1.5rem; }
.bt-mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.bt-mine-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem;
  border: 1px solid rgb(var(--bt-text) / 0.09); border-radius: var(--bt-r-sm); background: rgb(var(--bt-surface) / 0.6); }
.bt-mine-row.is-revoked { opacity: 0.55; }
.bt-mine-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.15rem; }
.bt-mine-name { font-weight: 600; text-decoration: none; color: rgb(var(--bt-text) / 1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-mine-name:hover { text-decoration: underline; }
.bt-mine-meta { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
  font-family: var(--bt-mono); font-size: 0.7rem; color: var(--bt-text-soft); }
.bt-mine-revoked-tag { color: rgb(var(--bt-type-link) / 1); }
.bt-mine-actions { display: flex; align-items: center; gap: 0.4rem; }
.bt-mine-actions form { margin: 0; }
.bt-mine-empty { color: var(--bt-text-soft); }
.bt-chip-danger:hover { color: rgb(var(--bt-type-link) / 1); border-color: rgb(var(--bt-type-link) / 0.4); }