membrane.css

/* Membrane mode — scoped palette + layout.
   Palette tokens are defined on BOTH the .membrane-host (the alchemy-canvas
   div once mounted) AND the alchemy-view container while membrane mode is
   active, so cascading rules that target the outer view can resolve them. */

.membrane-host,
.alchemy-view[data-alch-mode-current="membrane"] {
  /* Vanta cosmic — true black with a sparse star field. The blobs read as
     small warm celestial bodies against deep space. Reading surfaces are
     translucent panels with ember neon trim — Vision Pro × Tron Legacy. */
  --membrane-void: #000000;
  --membrane-void-warm: #060509;
  --membrane-void-deep: #000000;
  --membrane-mist: #f1ece7;
  --membrane-mist-mid: #b8b3ad;
  --membrane-mist-dim: #6f6a64;
  /* Cream ink as an --ink-rgb-style triple — every body-text / hairline site
     reads rgba(var(--mem-ink-rgb), α). Dark mode = cream; the light-mode block
     below flips this one value to dark ink, swinging all of them at once. */
  --mem-ink-rgb: 247, 242, 236;
  --membrane-ember: #ff7a3d;          /* brighter neon ember */
  --membrane-ember-deep: #c75a2a;
  --membrane-ember-soft: rgba(255, 122, 61, 0.55);
  --membrane-star: rgba(255, 255, 255, 0.85);
  --membrane-slate: #3a4a5e;
  /* Card is translucent so atmosphere reads through — not a black slab. */
  --membrane-card-bg: rgba(22, 20, 25, 0.52);
  --membrane-card-top: rgba(36, 30, 36, 0.62);
  --membrane-rule: rgba(var(--ink-rgb), 0.08);
  /* Lifted feed card surface: near-opaque so a hover/focus-expanded card (which
     z-lifts and overflows its row to float over the cards below) OCCLUDES them
     cleanly, rather than letting their text bleed through. Light mode flips it. */
  --mfeed-lift-bg: rgba(20, 18, 23, 0.97);
}

/* ── Light mode ──────────────────────────────────────────────────────────
   The membrane was built dark-only. In light mode we flip the host to paper,
   swing the ink triple to dark, turn the glass panels light, and lighten the
   scrims. The WebGL scene (starfield / cube / bloom) reacts separately via the
   theme read in scene.js. Dark mode is untouched. */
html[data-theme="light"] .membrane-host,
html[data-theme="light"] .alchemy-view[data-alch-mode-current="membrane"] {
  --membrane-void: #f6f6f6;
  --membrane-void-warm: #faf8f5;
  --membrane-void-deep: #eaeaea;
  --membrane-mist: #1a1a1a;          /* primary text → near-black ink */
  --membrane-mist-mid: #4a4a4a;
  --membrane-mist-dim: #7a7a7a;
  --mem-ink-rgb: 26, 26, 26;          /* flip the cream triple to dark ink */
  --membrane-star: rgba(20, 20, 24, 0.85);
  /* Light translucent glass for the reading panels. */
  --membrane-card-bg: rgba(255, 255, 255, 0.62);
  --membrane-card-top: rgba(248, 248, 248, 0.74);
  --mfeed-lift-bg: rgba(255, 255, 255, 0.97);
}

/* Paper background — what the transparent WebGL canvas composites over, so the
   star field reads on white. The field is kept a touch DARKER than the feed /
   agenda cards so they read as cards (white-on-grey), not a flat wash. Needs the
   .alchemy-view…​.alchemy-canvas selector to out-specify the generic membrane-mode
   bg rule (`.alchemy-view[…="membrane"] .alchemy-canvas { background: var(--membrane-void) }`). */
html[data-theme="light"] .membrane-host { color: var(--membrane-mist); }
html[data-theme="light"] .alchemy-view[data-alch-mode-current="membrane"] .alchemy-canvas,
html[data-theme="light"] .membrane-host.alchemy-canvas {
  background: radial-gradient(ellipse 110% 70% at 50% -10%, #efefef 0%, #e8e8e8 55%, #e2e2e2 100%);
}

/* Reading-gutter scrim: the dark version paints a black band over the left of a
   white page. Flip to a faint paper veil. */
html[data-theme="light"] .membrane-stage::before {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.00) 100%);
}

/* Warm "throne" glow uses screen blend — invisible on white. Switch to a soft
   normal-blended warm tint so the cube still feels anchored. */
html[data-theme="light"] .ma-throne-presence {
  mix-blend-mode: normal;
  background: radial-gradient(circle at center,
    rgba(255, 140, 80, 0.07) 0%,
    rgba(255, 120, 60, 0.035) 30%,
    transparent 68%);
}

/* "enter the field" pill: dark fill → faint ink fill on paper. */
html[data-theme="light"] .membrane-enter-field {
  background: rgba(0, 0, 0, 0.04);
}

/* ── Light mode: feed + agenda read as proper light-mode cards ────────────
   The dark-mode pastels (cream text, low-blend tints) wash out on white. Here
   the cards go near-white on the darker field, text is dark ink, and the kind /
   category accents are darkened to saturated, readable hues (the pale sage /
   lapis / amber pastels vanish on paper). */
html[data-theme="light"] .mfeed-item {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(26, 26, 26, 0.10);
}
/* hover/focus lift bg now comes from --mfeed-lift-bg (see the shared
   .mfeed-row:hover/.focus-within rule), so both themes + keyboard focus occlude. */
html[data-theme="light"] .mfeed-age { color: rgba(26, 26, 26, 0.5); }
/* Chip: faint kind tint over white, kind-colored (darkened) text. */
html[data-theme="light"] .mfeed-meta {
  background: color-mix(in srgb, var(--mfeed-color) 16%, #ffffff);
}
html[data-theme="light"] .mfeed-release    { --mfeed-color: #4f8a64; }  /* sage */
html[data-theme="light"] .mfeed-commit     { --mfeed-color: #7a6aa6; }  /* violet */
html[data-theme="light"] .mfeed-transcript { --mfeed-color: #4d6bb0; }  /* lapis */
html[data-theme="light"] .mfeed-ask        { --mfeed-color: #b9821f; }  /* amber */
html[data-theme="light"] .mfeed-event      { --mfeed-color: #3f8a72; }  /* teal */
/* Incoming-watch kinds — darkened so they read on white (V3 Crisp Heavy). */
html[data-theme="light"] .mfeed-event-soon    { --mfeed-color: #c2562a; }  /* ember */
html[data-theme="light"] .mfeed-person-soon   { --mfeed-color: #b04a6a; }  /* rose */
html[data-theme="light"] .mfeed-event-new     { --mfeed-color: #3f8a72; }  /* teal */
html[data-theme="light"] .mfeed-event-changed { --mfeed-color: #b9821f; }  /* amber */

/* Agenda cards: lift tint + darken category hues so events read on white.
   The default --c2-acc tier sits on the element that carries data-cat: the
   card itself for timed events, the .magenda-up wrapper for up-event cards
   (so a [data-cat] override wins and the card inherits it). */
html[data-theme="light"] .magenda-event { --c2-acc: #6f655e; }
html[data-theme="light"] .magenda-up    { --c2-acc: #6f655e; }
html[data-theme="light"] .magenda-event,
html[data-theme="light"] .magenda-up-event {
  background: color-mix(in srgb, var(--c2-acc) 28%, #ffffff);
  border-color: color-mix(in srgb, var(--c2-acc) 55%, transparent);
}
html[data-theme="light"] .magenda-up-event:hover {
  background: color-mix(in srgb, var(--c2-acc) 42%, #ffffff);
}
/* Dismiss disc on paper: a real white chip with dark ink, not the dark-ink
   wash the dark-mode rule would invert to (which reads as a smudge on white). */
html[data-theme="light"] .mfeed-dismiss,
html[data-theme="light"] .membrane-agenda .magenda-dismiss {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(26, 26, 26, 0.14);
  color: rgba(26, 26, 26, 0.55);
}
html[data-theme="light"] .mfeed-dismiss:hover,
html[data-theme="light"] .membrane-agenda .magenda-dismiss:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(26, 26, 26, 0.24);
  color: rgba(26, 26, 26, 0.86);
}
html[data-theme="light"] .membrane-agenda [data-cat="oh"]      { --c2-acc: #c4763f; }
html[data-theme="light"] .membrane-agenda [data-cat="salon"]   { --c2-acc: #a87fc0; }
html[data-theme="light"] .membrane-agenda [data-cat="weekly"]  { --c2-acc: #79a06a; }
html[data-theme="light"] .membrane-agenda [data-cat="coord"]   { --c2-acc: #c9a338; }
html[data-theme="light"] .membrane-agenda [data-cat="review"]  { --c2-acc: #d9883f; }
html[data-theme="light"] .membrane-agenda [data-cat="hack"]    { --c2-acc: #6f90c4; }
html[data-theme="light"] .membrane-agenda [data-cat="demo"]    { --c2-acc: #c75f34; }
html[data-theme="light"] .membrane-agenda [data-cat="anarchy"] { --c2-acc: #79a06a; }

.membrane-host {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: #000000;
  color: var(--membrane-mist);
  overflow: hidden;
  font-family: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'ss01' on, 'cv11' on;
  letter-spacing: 0.005em;
}

/* Atmosphere = distant stars + a single soft warm presence around the
   cube anchor. Stars are the cosmic field; throne-presence is the lit
   anchor. */
.membrane-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Stars are now a 3D point cloud rendered by Three.js (starfield.js).
   The old CSS-based stars are gone — full-screen box-shadow approach was
   broken (each shadow rendered as a screen-sized box). The 3D approach
   gives real perspective + seamless wrap-around as stars stream past. */

/* Throne presence — barely-there warm radial glow that anchors the
   cube in the void. The only atmosphere besides the stars. */
.ma-throne-presence {
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at center,
    rgba(255, 140, 80, 0.10) 0%,
    rgba(255, 120, 60, 0.05) 22%,
    rgba(200, 90, 40, 0.02) 45%,
    transparent 70%
  );
  filter: blur(60px);
  mix-blend-mode: screen;
}

.membrane-host * {
  box-sizing: border-box;
}

/* Shape name — pinned to the right edge, vertically centred. Names the
   current die so shapes can be referenced by name. */
/* Shape-name label hidden — no longer surfaced. */
.membrane-shape-name {
  display: none;
}
.membrane-shape-name .msn-name {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(var(--mem-ink-rgb), 0.96);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95);
}
.membrane-shape-name .msn-meta {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--mem-ink-rgb), 0.5);
}

/* Today's agenda — an ambient day-timeline pinned to the right edge, sitting
   BEHIND the canvas (z-index 0) so the cube + stars render over it. Just
   today; a glowing line marks the current time. */
.membrane-agenda {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 196px;
  /* left pad gives the inner-edge dismiss control room to sit without being
     clipped by overflow:hidden (mirror of the left feed's right gutter). */
  padding: 56px 26px 52px 12px;
  z-index: 2;            /* above the canvas so the cards are clickable */
  pointer-events: none;  /* container passes through; cards opt back in */
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.membrane-agenda .magenda-head {
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--mem-ink-rgb), 0.3);
  margin-bottom: 6px;
}
.membrane-agenda .magenda-allday {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(var(--mem-ink-rgb), 0.32);
  margin-bottom: 10px;
}
.membrane-agenda .magenda-track {
  position: relative;
  flex: 1 1 auto;        /* fills the column when there's no look-ahead… */
  min-height: 150px;     /* …but yields room (keeping a defined height for
                            the now-line/ticks) when upcoming events flow below */
}
.magenda-tick {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  border-top: 1px solid rgba(var(--mem-ink-rgb), 0.05);
}
.magenda-tick-label {
  position: absolute;
  right: 0;
  top: -7px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(var(--mem-ink-rgb), 0.2);
}
/* Today axis events — positioned on the time ruler; compact cards with the
   calendar category tint. Clickable (opens the calendar). */
.membrane-agenda .magenda-event {
  --c2-acc: #8f817a;
  box-sizing: border-box;
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  gap: 6px;
  max-width: 164px;
  padding: 3px 8px 3px 9px;
  background: color-mix(in srgb, var(--c2-acc) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--c2-acc) 40%, transparent);
  border-radius: 7px;
  /* category accent — a crisp inner edge-tick, echoing the calendar's
     left-bar marker so the two surfaces share a grammar. */
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--c2-acc) 85%, transparent);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  transition: background 200ms cubic-bezier(0.19, 1, 0.22, 1),
              border-color 200ms cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 200ms cubic-bezier(0.19, 1, 0.22, 1),
              transform 120ms cubic-bezier(0.19, 1, 0.22, 1);
}
.membrane-agenda .magenda-event:hover {
  background: color-mix(in srgb, var(--c2-acc) 34%, transparent);
  border-color: color-mix(in srgb, var(--c2-acc) 58%, transparent);
  box-shadow: inset 3px 0 0 0 var(--c2-acc),
              0 4px 14px -7px color-mix(in srgb, var(--c2-acc) 65%, transparent);
  z-index: 5;
}
.membrane-agenda .magenda-event:active { transform: translateY(-50%) scale(0.97); }
.magenda-event-time {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(var(--mem-ink-rgb), 0.42);
}
.magenda-event-title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(var(--mem-ink-rgb), 0.72);
}

/* The current-time line — a glowing warm rule across the agenda. */
.magenda-now {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  border-top: 1px solid rgba(255, 150, 90, 0.8);
  box-shadow: 0 0 6px rgba(255, 140, 80, 0.45);
}
.magenda-now-label {
  position: absolute;
  right: 0;
  top: -14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 178, 130, 0.95);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

/* Look-ahead: upcoming days rolled forward below the today axis. A static
   right-aligned list (no minute positioning) with terse day headers. */
.membrane-agenda .magenda-upcoming {
  flex: 0 0 auto;
  margin-top: 14px;
}
.magenda-quiet {
  text-align: right;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--mem-ink-rgb), 0.22);
}
.magenda-day-head {
  text-align: right;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--mem-ink-rgb), 0.44);  /* ~30% brighter than 0.34 */
  margin-top: 3px;
}
.magenda-day-head:first-child {
  margin-top: 0;
}
/* Upcoming + today's all-day items — full cards, same chrome as the left
   feed item (1px border, 9px corners, ~53px tall) but with the calendar
   category tint for more contrast against the dark stage. Each card is
   wrapped in .magenda-up (the dismiss anchor + collapse host); the wrapper
   owns --c2-acc so a [data-cat] on it tints the inheriting card. */
.membrane-agenda .magenda-up {
  --c2-acc: #8f817a;          /* default tier; [data-cat] overrides on wrapper */
  position: relative;
  width: 100%;
  max-height: 220px;
  transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1);
}
/* Close = recede into the field — mirror of the feed's membrane fold, folding
   away toward its own (right) screen edge. */
.membrane-agenda .magenda-up.is-dismissing {
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: perspective(1100px) translateX(10px) rotateY(-20deg) scale(0.9);
  transform-origin: right center;
  filter: blur(6px);
  max-height: 0;
  margin-top: -7px;
  /* Mirror of the feed exit — quicker out (240ms) than the arrival (280ms). */
  transition: transform 240ms cubic-bezier(0.65, 0, 0.05, 1),
              opacity 220ms cubic-bezier(0.65, 0, 0.05, 1),
              filter 220ms ease,
              max-height 260ms cubic-bezier(0.4, 0, 0.2, 1) 130ms,
              margin-top 260ms cubic-bezier(0.4, 0, 0.2, 1) 130ms;
}
/* Mirror of the feed enter — a new agenda card slides in from the right edge
   (this rail's own edge) as it fades up. Added in JS only to new cards. */
.membrane-agenda .magenda-up.is-entering { animation: magenda-enter 280ms cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes magenda-enter {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.membrane-agenda .magenda-up-event {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;     /* title over time, like the left feed's 2-line cards */
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 100%;
  /* extra left pad reserves the gutter for the add-to-calendar control (text is
     right-aligned, so this only bounds how far left a long title may run). */
  padding: 8px 11px 8px 36px;
  min-height: 53px;           /* match the left feed item height */
  background: color-mix(in srgb, var(--c2-acc) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--c2-acc) 38%, transparent);
  border-radius: 9px;
  /* category accent — crisp inner edge-tick on the screen-edge (right) side,
     a mirror of the calendar's left-bar marker. */
  box-shadow: inset -3px 0 0 0 color-mix(in srgb, var(--c2-acc) 82%, transparent);
  white-space: normal;        /* let long titles wrap instead of truncating */
  text-align: right;
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  transition: background 220ms cubic-bezier(0.19, 1, 0.22, 1),
              border-color 220ms cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 220ms cubic-bezier(0.19, 1, 0.22, 1),
              transform 220ms cubic-bezier(0.19, 1, 0.22, 1);
}
.membrane-agenda .magenda-up-event:hover {
  background: color-mix(in srgb, var(--c2-acc) 30%, transparent);
  border-color: color-mix(in srgb, var(--c2-acc) 55%, transparent);
  box-shadow: inset -3px 0 0 0 var(--c2-acc),
              0 6px 18px -8px color-mix(in srgb, var(--c2-acc) 60%, transparent);
  transform: translateX(-2px);
}
.membrane-agenda .magenda-up-event:active {
  transform: translateX(-2px) scale(0.985);
}
/* Quiet dismiss control — mirror of the feed's, pinned to the inner-top
   (left) corner so the two rails read as one symmetric system. */
.membrane-agenda .magenda-dismiss {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--mem-ink-rgb), 0.16);
  border-radius: 50%;
  background: rgba(var(--mem-ink-rgb), 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(var(--mem-ink-rgb), 0.62);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition: opacity 130ms ease,
              transform 150ms cubic-bezier(0.65, 0, 0.05, 1),
              background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.membrane-agenda .magenda-up:hover .magenda-dismiss,
.membrane-agenda .magenda-up:focus-within .magenda-dismiss {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition: opacity 200ms ease,
              transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.membrane-agenda .magenda-dismiss:hover {
  background: rgba(var(--mem-ink-rgb), 0.24);
  border-color: rgba(var(--mem-ink-rgb), 0.30);
  color: rgba(var(--mem-ink-rgb), 0.98);
}
.membrane-agenda .magenda-up:hover .magenda-dismiss:active,
.membrane-agenda .magenda-up:focus-within .magenda-dismiss:active { transform: scale(0.84); }
.membrane-agenda .magenda-dismiss:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--membrane-ember) 45%, transparent);
  outline-offset: 2px;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.membrane-agenda .magenda-dismiss svg { width: 9px; height: 9px; display: block; }

/* Add-to-calendar — a HELPER, not housekeeping, so unlike the dismiss it stays
   faintly visible at rest (discoverable) in the card's empty left gutter and
   brightens on hover/focus. Click opens a prefilled Google Calendar event. Its
   square-rounded geometry distinguishes it from the round dismiss; the opposite
   roles (add vs. remove) read apart at a glance. Tinted by the card's --c2-acc. */
.membrane-agenda .magenda-add {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%) scale(0.92);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c2-acc) 34%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--c2-acc) 14%, transparent);
  color: color-mix(in srgb, var(--c2-acc) 85%, rgba(var(--mem-ink-rgb), 0.6));
  cursor: pointer;
  opacity: 0.42;
  pointer-events: auto;
  transition: opacity 180ms ease,
              transform 200ms cubic-bezier(0.19, 1, 0.22, 1),
              background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.membrane-agenda .magenda-up:hover .magenda-add,
.membrane-agenda .magenda-up:focus-within .magenda-add {
  opacity: 0.95;
  transform: translateY(-50%) scale(1);
}
.membrane-agenda .magenda-add:hover {
  background: color-mix(in srgb, var(--c2-acc) 28%, transparent);
  border-color: color-mix(in srgb, var(--c2-acc) 60%, transparent);
  color: color-mix(in srgb, var(--c2-acc) 96%, #ffffff);
}
.membrane-agenda .magenda-add:active { transform: translateY(-50%) scale(0.86); }
.membrane-agenda .magenda-add:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--c2-acc) 55%, transparent);
  outline-offset: 2px;
  opacity: 1;
}
.membrane-agenda .magenda-add svg { width: 13px; height: 13px; display: block; }

.magenda-up-event .magenda-event-title {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;        /* full title, wraps over multiple lines */
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  color: rgba(var(--mem-ink-rgb), 0.85);
}
/* Category colours — same hexes as calendar.css so the two surfaces match.
   'default' is the inherited --c2-acc above. */
.membrane-agenda [data-cat="oh"]      { --c2-acc: #d98a5c; }
.membrane-agenda [data-cat="salon"]   { --c2-acc: #c9a8d8; }
.membrane-agenda [data-cat="weekly"]  { --c2-acc: #a8c79f; }
.membrane-agenda [data-cat="coord"]   { --c2-acc: #e3c77f; }
.membrane-agenda [data-cat="review"]  { --c2-acc: #f3b174; }
.membrane-agenda [data-cat="hack"]    { --c2-acc: #9fb8d8; }
.membrane-agenda [data-cat="demo"]    { --c2-acc: #e07a4e; }
.membrane-agenda [data-cat="anarchy"] { --c2-acc: #a8c79f; }

/* "What's new" feed — left-edge stream of cohort activity. Above the canvas
   (so items are clickable), scrollable, color-coded by kind. Each item is a
   small two-line card; clicking it opens that thing in a new OS tab. */
.membrane-feed {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 264px;
  padding: 54px 14px 52px 24px;
  z-index: 2;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 40px), transparent 100%);
}
.membrane-feed::-webkit-scrollbar { width: 0; height: 0; }

/* Each feed item lives in a positioned row so the dismiss control can pin to
   the card's inner-top corner. The row also owns the tail-taper opacity (so a
   hovered tail card lifts back to full) and the collapse-out on dismiss. */
.mfeed-row {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-height: 160px;
  z-index: 1;
  transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1);
}
/* Taper the tail of the feed: the last three rows fade progressively,
   strongest at the very bottom, so the list dissolves into the field rather
   than ending on a hard edge. Hover/focus lifts the hovered card back to full
   so it stays legible and its dismiss control is usable. */
.mfeed-row:nth-last-child(3) { opacity: 0.6; }
.mfeed-row:nth-last-child(2) { opacity: 0.4; }
.mfeed-row:nth-last-child(1) { opacity: 0.2; }
.mfeed-row:hover,
.mfeed-row:focus-within { opacity: 1; z-index: 10; }
/* Close = recede into the field, the membrane's own exit. The card folds away
   like the membrane panel does (perspective + rotateY toward its left screen
   edge, signature easing cubic-bezier(0.65,0,0.05,1)) with a blur-dissolve;
   the height then folds (delayed ~130ms) so siblings close AFTER the card has
   gone, not while it's mid-fold. Negative top-margin eats the 7px flex gap. */
.mfeed-row.is-dismissing {
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: perspective(1100px) translateX(-10px) rotateY(20deg) scale(0.9);
  transform-origin: left center;
  filter: blur(6px);
  max-height: 0;
  margin-top: -7px;
  /* Recede a touch quicker than a card arrives (240ms out vs 280ms in) so the
     dismissal reads decisive and the arrival reads considered — the house
     asymmetric-timing law. The signature fold curve is preserved; only the
     duration tightens. Height/margin still collapse after a 130ms beat so
     siblings close once the card is gone. */
  transition: transform 240ms cubic-bezier(0.65, 0, 0.05, 1),
              opacity 220ms cubic-bezier(0.65, 0, 0.05, 1),
              filter 220ms ease,
              max-height 260ms cubic-bezier(0.4, 0, 0.2, 1) 130ms,
              margin-top 260ms cubic-bezier(0.4, 0, 0.2, 1) 130ms;
}
/* A new card arrives by sliding in from the rail's left edge as it fades up —
   the headline "alive" moment on a notification surface. Calmer than the exit
   (no rotateY/blur), slightly slower (280ms) per the asymmetric-timing law.
   The class is added in JS only to genuinely-new rows (keyed diff), so the
   stream does NOT re-animate on the once-a-minute rebuild. New cards always
   enter at the top (incoming sorts first), never in the faded tail, so the
   0→1 fade never fights the tail-taper opacity. */
.mfeed-row.is-entering { animation: mfeed-enter 280ms cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes mfeed-enter {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.mfeed-item {
  display: flex;
  align-items: stretch;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid rgba(var(--mem-ink-rgb), 0.06);
  border-radius: 9px;
  background: rgba(var(--mem-ink-rgb), 0.08);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 200ms cubic-bezier(0.19, 1, 0.22, 1),
              transform 200ms cubic-bezier(0.19, 1, 0.22, 1),
              border-color 200ms cubic-bezier(0.19, 1, 0.22, 1);
}
.mfeed-item:hover {
  background: rgba(var(--mem-ink-rgb), 0.14);
  border-color: rgba(var(--mem-ink-rgb), 0.12);
  transform: translateX(2px);
}
.mfeed-item:active { transform: translateX(2px) scale(0.985); }

/* Quiet dismiss control — the "subtle hidden feature". Invisible at rest, it
   fades + scales in on the inner-top corner only when the row is hovered or
   keyboard-focused. Neutral ink (not alarm-red): closing a glanceable feed
   item is housekeeping, not a destructive act. */
.mfeed-dismiss {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--mem-ink-rgb), 0.16);
  border-radius: 50%;
  background: rgba(var(--mem-ink-rgb), 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(var(--mem-ink-rgb), 0.62);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  /* resting transition = the HIDE timing (fast); the reveal rule below
     overrides it with a slower, softly-settling enter. */
  transition: opacity 130ms ease,
              transform 150ms cubic-bezier(0.65, 0, 0.05, 1),
              background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.mfeed-row:hover .mfeed-dismiss,
.mfeed-row:focus-within .mfeed-dismiss {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  /* enter slower than exit, with a small settle (punctuation overshoot). */
  transition: opacity 200ms ease,
              transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.mfeed-dismiss:hover {
  background: rgba(var(--mem-ink-rgb), 0.24);
  border-color: rgba(var(--mem-ink-rgb), 0.30);
  color: rgba(var(--mem-ink-rgb), 0.98);
}
/* press — scoped under the revealed state so it out-specifies scale(1). */
.mfeed-row:hover .mfeed-dismiss:active,
.mfeed-row:focus-within .mfeed-dismiss:active { transform: scale(0.84); }
.mfeed-dismiss:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--membrane-ember) 45%, transparent);
  outline-offset: 2px;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.mfeed-dismiss svg { width: 9px; height: 9px; display: block; }
.mfeed-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mfeed-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(var(--mem-ink-rgb), 0.82);
}
.mfeed-meta {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  /* Muted kind tint — softer than the original loud green, but not the dull
     0-saturation grey it briefly became. */
  color: var(--mfeed-color, rgba(var(--mem-ink-rgb), 0.7));
  background: color-mix(in srgb, var(--mfeed-color, #f7f2ec) 18%, transparent);
  padding: 2px 7px;
  border-radius: 5px;
}
/* Per-kind Lucide icon at the start of each feed item, tinted (muted) by
   the kind color so the type is clear without being loud. */
.mfeed-icon {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 1px;
  width: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mfeed-color, rgba(var(--mem-ink-rgb), 0.6));
}
.mfeed-icon svg { width: 13px; height: 13px; display: block; }
.mfeed-age {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(var(--mem-ink-rgb), 0.32);
}
/* Stacked card — iOS-style grouped-notification pile. When same-day items from
   one source collapse into a card, the most-recent one is OPAQUE (so the deck
   never bleeds through — translucent show-through looked cheap) and sits on two
   cards offset down + scaled narrower, peeking at the bottom like a tidy pile.
   The front card carries NO transform/backdrop at rest, hover, OR active: any of
   those spawns a stacking context and pops the negative-z deck in front of its
   own background. Offsets stay within the row gap so the deck never reaches the
   card below. */
.mfeed-stacked {
  position: relative;
  background: color-mix(in srgb, var(--membrane-void-warm) 92%, var(--membrane-mist) 8%);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.20);
}
.mfeed-item.mfeed-stacked:hover,
.mfeed-item.mfeed-stacked:active { transform: none; }
.mfeed-item.mfeed-stacked:hover {
  background: color-mix(in srgb, var(--membrane-void-warm) 88%, var(--membrane-mist) 12%);
}
.mfeed-stacked::before,
.mfeed-stacked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
  border: 1px solid rgba(var(--mem-ink-rgb), 0.07);
  z-index: -1;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.19, 1, 0.22, 1);
}
/* ::before is the DEEPER card (further down + narrower); ::after the nearer. */
.mfeed-stacked::before {
  background: color-mix(in srgb, var(--membrane-void-warm) 96%, var(--membrane-mist) 4%);
  transform: translateY(6px) scaleX(0.87);
}
.mfeed-stacked::after {
  background: color-mix(in srgb, var(--membrane-void-warm) 94%, var(--membrane-mist) 6%);
  transform: translateY(3px) scaleX(0.93);
}
.mfeed-item.mfeed-stacked:hover::before { transform: translateY(7px) scaleX(0.88); }
.mfeed-item.mfeed-stacked:hover::after  { transform: translateY(4px) scaleX(0.94); }
/* Count sits ABSOLUTELY in the card's bottom-right corner — out of the top flex
   row entirely — so adding it never shifts the age/date indicator (which stays
   pinned top-right whether or not a card is a stack). */
.mfeed-count {
  position: absolute;
  right: 10px;
  bottom: 8px;
  min-width: 16px;
  height: 15px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: 8px;
  color: rgba(var(--mem-ink-rgb), 0.5);
  background: rgba(var(--mem-ink-rgb), 0.08);
  border: 1px solid rgba(var(--mem-ink-rgb), 0.1);
}

/* ── hover layer ─────────────────────────────────────────────────────────
   The third interaction layer. At rest a card is a one-line glance; on
   hover/focus it LIFTS toward the viewer (kind-tinted shadow, raised z-index
   so it floats over the rows below — no neighbour reflow above it), the label
   + meta un-truncate, and a quiet line reveals the exact date/time and where a
   click will go. You read the whole item — and learn its destination — without
   clicking. The card itself stays the single click target. */
.mfeed-row:hover .mfeed-item,
.mfeed-row:focus-within .mfeed-item {
  /* Near-opaque lift surface: the expanded card z-lifts (z-index 10) and can
     overflow its row's max-height to float over the cards below, so it must
     OCCLUDE them — the old translucent 0.16 ink film let the lower card's text
     bleed through (the garbled overlap). Frost-blur the residual + the field
     behind. Theme-aware via --mfeed-lift-bg. */
  background: var(--mfeed-lift-bg);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-color: color-mix(in srgb, var(--mfeed-color, rgba(var(--mem-ink-rgb), 0.4)) 40%, transparent);
  box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--mfeed-color, #000) 70%, transparent),
              0 2px 8px -5px rgba(0, 0, 0, 0.45);
}
.mfeed-row:hover .mfeed-label,
.mfeed-row:focus-within .mfeed-label,
.mfeed-row:hover .mfeed-meta,
.mfeed-row:focus-within .mfeed-meta {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* The revealed line: a CSS-grid 0fr→1fr accordion (height animates, no JS).
   Resting transition is the fast collapse; the reveal rule below slows the
   enter, per the house asymmetric-timing law. */
.mfeed-cta {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 170ms cubic-bezier(0.65, 0, 0.05, 1),
              opacity 120ms ease;
}
.mfeed-cta-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  padding-top: 3px;   /* clipped to 0 while collapsed; breathes once open */
}
.mfeed-row:hover .mfeed-cta,
.mfeed-row:focus-within .mfeed-cta {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 260ms cubic-bezier(0.19, 1, 0.22, 1),
              opacity 200ms ease 60ms;
}
.mfeed-cta-when {
  font-size: 9px;
  letter-spacing: 0.05em;
  color: rgba(var(--mem-ink-rgb), 0.55);
}
.mfeed-cta-go {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--mfeed-color, rgba(var(--mem-ink-rgb), 0.72));
}

/* Kind tints — clearly colored but softer than the original loud palette;
   shared by the icon and the project chip. */
.mfeed-release    { --mfeed-color: rgba(136, 208, 161, 0.95); }  /* github / releases — sage green */
.mfeed-commit     { --mfeed-color: rgba(186, 170, 222, 0.95); }  /* commit activity — violet */
.mfeed-transcript { --mfeed-color: rgba(153, 180, 235, 0.95); }  /* transcripts — lapis */
.mfeed-ask        { --mfeed-color: rgba(238, 196, 126, 0.95); }  /* asks — amber */
.mfeed-event      { --mfeed-color: rgba(140, 204, 183, 0.95); }  /* events — teal */
/* Incoming-watch kinds — the forward-looking band atop the rail. */
.mfeed-event-soon    { --mfeed-color: rgba(255, 142,  92, 0.95); }  /* event imminent (tea) — warm ember */
.mfeed-person-soon   { --mfeed-color: rgba(232, 156, 178, 0.95); }  /* person arriving/returning — rose */
.mfeed-event-new     { --mfeed-color: rgba(140, 204, 183, 0.95); }  /* new event — teal */
.mfeed-event-changed { --mfeed-color: rgba(238, 196, 126, 0.95); }  /* time changed — amber */

.membrane-stage {
  position: absolute;
  inset: 0;
  display: block;
}

.membrane-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  z-index: 1;
}

/* Easter-egg Rubik's cube — its own transparent canvas overlaid on the die.
   Hidden (and not rendering) until the die has cycled through every shape;
   then it fades in, becomes interactive, and the psy-die fades out under it. */
.membrane-rubiks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.membrane-rubiks-active .membrane-rubiks-canvas {
  opacity: 1;
  pointer-events: auto;
}
/* Keep this canvas visible while the cube shows — the die MESH is hidden in the
   scene (scene.js), but the starfield keeps rendering here and shows through
   behind the Rubik's overlay. Just stop it catching pointers. */
.membrane-rubiks-active .membrane-canvas {
  pointer-events: none;
}

.membrane-rubiks-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  display: flex;
  justify-content: center;
  gap: 16px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.membrane-rubiks-active .membrane-rubiks-controls {
  opacity: 0.4;
}
.membrane-rubiks-active .membrane-rubiks-controls button {
  pointer-events: auto;
}

/* Bright bloom flash that masks the die<->Rubik's swap — a real light source:
   a hot opaque-white core easing through a long, smooth tail to zero alpha
   (closest-side so the falloff completes inside the box → no disc, no ring, no
   cap, no hard border), plus a twinkling glimmer so it feels magical. Fired
   ONLY by revealRubiks()/hideRubiks() — the normal shape morphs never touch it.
   Self-contained: only .membrane-flash, its ::before glimmer, and the two
   membrane-flash-* keyframes. Centered child of .membrane-stage; only
   opacity/transform animate → GPU compositor. */
.membrane-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92vmin;
  height: 92vmin;
  transform: translate(-50%, -50%) scale(0.86);
  transform-origin: center;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  will-change: opacity, transform;
  background: radial-gradient(circle closest-side at 50% 50%,
    #ffffff 0%,
    #ffffff 30%,
    rgba(255, 255, 255, 0.82) 40%,
    rgba(255, 255, 255, 0.52) 52%,
    rgba(255, 255, 255, 0.28) 64%,
    rgba(255, 255, 255, 0.12) 77%,
    rgba(255, 255, 255, 0.04) 88%,
    rgba(255, 255, 255, 0.01) 95%,
    rgba(255, 255, 255, 0) 100%);
}
/* Magical glimmer — scattered soft glints suspended in the glow that twinkle as
   it blooms. Points (never lines), placed in the mid-halo so they read against
   the softer glow rather than getting lost in the white core. */
.membrane-flash::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle 2.5px at 50% 22%, #fff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle 3.5px at 69% 32%, #fff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle 2px   at 31% 37%, #fff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle 3px   at 73% 61%, #fff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle 2px   at 29% 63%, #fff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle 2.5px at 55% 73%, #fff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle 1.5px at 43% 28%, #fff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle 1.5px at 64% 48%, #fff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle 2px   at 24% 50%, #fff 0%, rgba(255,255,255,0) 62%);
  filter: blur(0.5px);
}
.membrane-flash.is-bursting { animation: membrane-flash 680ms ease-out forwards; }
.membrane-flash.is-bursting::before { animation: membrane-flash-glimmer 680ms ease-out forwards; }
/* Snap to bright + opaque by ~8% (~55ms) to cover the swap, hold, then bloom
   out and fade — a real light flaring up, no hard cut. */
@keyframes membrane-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(0.94); }
  32%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.24); }
}
/* Glints twinkle in/out a couple of times with a slow drift so they sparkle. */
@keyframes membrane-flash-glimmer {
  0%   { opacity: 0;    transform: scale(0.8) rotate(0deg); }
  16%  { opacity: 0.95; transform: scale(0.98) rotate(2deg); }
  40%  { opacity: 0.4;  transform: scale(1.08) rotate(4deg); }
  62%  { opacity: 0.9;  transform: scale(1.16) rotate(7deg); }
  100% { opacity: 0;    transform: scale(1.32) rotate(11deg); }
}

.membrane-rubiks-controls button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e7e9ee;
  backdrop-filter: blur(8px);
  transition: background 0.15s, border-color 0.15s, transform 0.06s, opacity 0.15s;
}
.membrane-rubiks-controls button svg { width: 16px; height: 16px; display: block; }
.membrane-rubiks-controls button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.membrane-rubiks-controls button:active { transform: translateY(1px) scale(0.96); }
.membrane-rubiks-controls button.primary {
  border-color: rgba(245, 208, 32, 0.45);
  color: #f5d020;
}
.membrane-rubiks-controls button.primary:hover {
  background: rgba(245, 208, 32, 0.12);
  border-color: rgba(245, 208, 32, 0.7);
}
.membrane-rubiks-controls button:disabled { opacity: 0.4; cursor: default; }

/* Left-side panel — sits over the canvas in the negative space.
   Calm typography, no chrome borders, no glassmorphism. */
/* Reading gutter — softer now, since the panel itself does the heavy
   contrast lifting via its translucent card chrome. */
.membrane-stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.30) 50%,
    rgba(0, 0, 0, 0.00) 100%);
  pointer-events: none;
  z-index: 1;
}

.membrane-panel {
  position: absolute;
  top: 6%;
  left: 5%;
  bottom: 4%;
  right: 38%;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 3;
  pointer-events: auto;
  /* Luxury neon-piped surface. Translucent body + ember bezel + outer bloom.
     Vision Pro × Tron Legacy. Three stacked shadows: inset top highlight,
     ember stroke, outer ember bloom. Plus a soft drop. */
  background:
    linear-gradient(180deg, var(--membrane-card-top) 0%, var(--membrane-card-bg) 28%, var(--membrane-card-bg) 100%);
  border: 1px solid rgba(255, 122, 61, 0.32);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 60px rgba(255, 122, 61, 0.045),
    0 0 0 1px rgba(255, 122, 61, 0.08),
    0 0 24px rgba(255, 122, 61, 0.18),
    0 0 80px -10px rgba(255, 122, 61, 0.10),
    0 28px 70px -22px rgba(0, 0, 0, 0.75);
}

/* Corner brackets — small L-shaped marks that say "this was designed."
   Subtle but tactile, matches the ember neon. Top-left and bottom-right
   for asymmetry (less corporate than 4-corner symmetry). */
.membrane-panel::before,
.membrane-panel::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 4;
}
.membrane-panel::before {
  top: 10px;
  left: 10px;
  border-top: 1.5px solid rgba(255, 122, 61, 0.55);
  border-left: 1.5px solid rgba(255, 122, 61, 0.55);
  border-top-left-radius: 6px;
  box-shadow: 0 0 8px rgba(255, 122, 61, 0.28);
}
.membrane-panel::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 1.5px solid rgba(255, 122, 61, 0.55);
  border-right: 1.5px solid rgba(255, 122, 61, 0.55);
  border-bottom-right-radius: 6px;
  box-shadow: 0 0 8px rgba(255, 122, 61, 0.28);
}

.membrane-panel-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 40px 44px 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink-rgb), 0.10) transparent;
}

.membrane-panel-content::-webkit-scrollbar {
  width: 6px;
}
.membrane-panel-content::-webkit-scrollbar-thumb {
  background: rgba(var(--ink-rgb), 0.10);
  border-radius: 3px;
}

.membrane-panel-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

/* When the head has an accessory (e.g. the self panel's avatar), lay it
   out as a row: text on the left, accessory pinned top-right. */
.membrane-panel-head--with-accessory {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.membrane-panel-head-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.membrane-panel-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--membrane-mist-mid);
}

.membrane-panel-title {
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 500;
  line-height: 1.0;
  margin: 0;
  color: var(--membrane-mist);
  letter-spacing: -0.02em;
}

.membrane-panel-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.membrane-panel-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--membrane-mist-mid);
  max-width: 44ch;
}

.membrane-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.membrane-panel-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--membrane-rule);
}

.membrane-panel-list li.membrane-panel-list-action {
  border-bottom: 0;
  display: block;
  padding: 0;
}

.membrane-panel-list li.membrane-panel-list-details {
  align-items: stretch;
  border-bottom: 0;
  display: block;
  padding: 0;
}

.mpl-details {
  border-bottom: 1px solid var(--membrane-rule);
}

.mpl-details-summary {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  outline: none;
  padding: 11px 0;
  -webkit-app-region: no-drag;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.mpl-details-summary::-webkit-details-marker {
  display: none;
}

.mpl-details-summary:hover,
.mpl-details-summary:focus-visible {
  background: rgba(255, 122, 61, 0.035);
  outline: none;
  transform: translateX(3px);
}

.mpl-detail-meta {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.mpl-caret::before {
  color: var(--membrane-mist-mid);
  content: "›";
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  opacity: 0.62;
  transform-origin: center;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.mpl-details[open] .mpl-caret::before {
  color: var(--membrane-ember);
  opacity: 0.82;
  transform: rotate(90deg);
}

.mpl-action {
  appearance: none;
  align-items: baseline;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--membrane-rule);
  color: inherit;
  cursor: pointer;
  display: flex;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  justify-content: space-between;
  letter-spacing: 0.08em;
  padding: 11px 0;
  text-align: left;
  width: 100%;
  -webkit-app-region: no-drag;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.mpl-action:hover,
.mpl-action:focus-visible {
  background: rgba(255, 122, 61, 0.035);
  outline: none;
  transform: translateX(3px);
}

.mpl-action .mpl-key {
  color: var(--membrane-ember);
}

.mpl-action .mpl-val {
  color: var(--membrane-ember);
}

.mpl-action .mpl-val::after {
  content: " ›";
  opacity: 0.62;
}

.mpl-key {
  color: var(--membrane-mist-mid);
  text-transform: uppercase;
}

.mpl-val {
  color: var(--membrane-mist);
  font-weight: 500;
}

/* Per-blob rim accent on the title — picked up via data-active-blob */
.membrane-panel[data-active-blob="self"] .membrane-panel-title,
.membrane-panel[data-active-blob="asks"] .membrane-panel-title {
  color: var(--membrane-mist);
}
.membrane-panel[data-active-blob="self"] .mpl-val,
.membrane-panel[data-active-blob="asks"] .mpl-val {
  color: var(--membrane-mist);
}

/* ─── Inline per-blob content blocks ─── */

.membrane-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.membrane-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--membrane-rule);
  margin-bottom: 4px;
}

.membrane-section-title {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--membrane-mist-mid);
  margin: 0;
}

.membrane-section-count {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--membrane-ember);
  letter-spacing: 0.14em;
  font-weight: 500;
}

/* TODAY section gets visual prominence — bigger, ember-tinted title,
   slight inset glow so it reads as the moment-of-now. */
.membrane-section-today .membrane-section-title {
  color: var(--membrane-ember);
  font-size: 12px;
  letter-spacing: 0.22em;
}
.membrane-section-today .membrane-section-count {
  font-size: 12px;
}
.membrane-section-today {
  padding: 14px 18px 18px;
  margin: -4px -18px 4px;
  border-radius: 8px;
  background: rgba(255, 122, 61, 0.025);
  border: 1px solid rgba(255, 122, 61, 0.10);
}
.membrane-section-today .membrane-event-title {
  font-weight: 500;
}

/* Event row — calendar inline */
.membrane-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.membrane-event-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--membrane-rule);
}

.membrane-event-row:hover {
  background: rgba(var(--ink-rgb), 0.02);
}

.membrane-event-date {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--membrane-mist-mid);
}

.membrane-event-title {
  font-size: 15px;
  font-weight: 400;
  color: var(--membrane-mist);
  line-height: 1.4;
}

.membrane-event-meta {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--membrane-mist-mid);
  text-align: right;
  white-space: nowrap;
  letter-spacing: 0.08em;
}

.membrane-event-now .membrane-event-date {
  color: var(--membrane-ember);
}

/* Ask row */
.membrane-ask-list {
  list-style: none;
  margin: 0;
  padding: 0 0 2px;
  display: flex;
  flex-direction: column;
}

.membrane-open-asks {
  padding: 0 0 7px;
}

.membrane-ask-item {
  list-style: none;
}

.membrane-ask-item[data-expired="1"] {
  opacity: 0.56;
}

.membrane-ask-item[data-expired="1"]:has(.membrane-ask-row[open]) {
  opacity: 0.78;
}

.membrane-ask-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--membrane-rule);
}

.membrane-ask-summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  gap: 5px 10px;
  align-items: start;
  list-style: none;
  outline: none;
}

.membrane-ask-summary::-webkit-details-marker {
  display: none;
}

.membrane-ask-summary::after {
  align-self: center;
  color: var(--membrane-mist-mid);
  content: "›";
  font-size: 17px;
  grid-column: 3;
  grid-row: 1 / span 2;
  opacity: 0.46;
  transform-origin: center;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.membrane-ask-row[open] .membrane-ask-summary::after {
  color: var(--membrane-ember);
  opacity: 0.82;
  transform: rotate(90deg);
}

.membrane-ask-summary:hover .membrane-ask-title,
.membrane-ask-summary:focus-visible .membrane-ask-title {
  color: var(--membrane-ember);
}

.membrane-ask-summary:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--membrane-ember) 34%, transparent);
  outline-offset: 5px;
}

.membrane-ask-verb {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--membrane-mist-mid) 26%, transparent);
  border-radius: 999px;
  color: var(--membrane-mist);
  display: inline-flex;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  height: 20px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
  opacity: 0.72;
  width: 20px;
}

.membrane-ask-body {
  display: block;
  min-width: 0;
}

.membrane-ask-title {
  display: block;
  font-size: 15px;
  color: var(--membrane-mist);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  transition: color 180ms ease;
}

.membrane-ask-row[open] .membrane-ask-title {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.membrane-ask-meta {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--membrane-mist-mid);
  letter-spacing: 0.10em;
  line-height: 1.35;
  min-width: 0;
}

.membrane-ask-meta .ask-status-mine {
  color: var(--membrane-ember);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.membrane-ask-status {
  color: var(--membrane-mist-mid);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.membrane-ask-status-fading {
  color: color-mix(in srgb, var(--membrane-ember) 70%, var(--membrane-mist-mid));
}

.membrane-ask-detail {
  padding: 10px 22px 1px 34px;
}

.membrane-ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.membrane-ask-chip {
  border: 1px solid color-mix(in srgb, var(--membrane-mist-mid) 28%, transparent);
  border-radius: 999px;
  color: var(--membrane-mist-mid);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 7px;
}

.membrane-empty {
  font-size: 14px;
  color: var(--membrane-mist-mid);
  font-style: italic;
  padding: 18px 0;
}

/* Identity bio — sits below the identity hero. Italic, slightly muted,
   max-width capped so long bios stay readable. */
.membrane-bio-line {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--membrane-mist-mid);
  font-style: italic;
  max-width: 52ch;
}

.membrane-section-system {
  padding-top: 2px;
}

.membrane-system-line {
  margin: 0;
  max-width: none;
  width: 100%;
  color: var(--membrane-mist);
  font-size: 14.5px;
  line-height: 1.65;
}

.membrane-system-line.is-uncalibrated {
  color: var(--membrane-mist-mid);
}

.membrane-system-line.is-uncalibrated .membrane-entity-link {
  color: color-mix(in srgb, var(--membrane-ember) 62%, var(--membrane-mist-mid));
  border-bottom-color: rgba(255, 122, 61, 0.22);
}

.membrane-system-line.is-uncalibrated .membrane-entity-link:hover,
.membrane-system-line.is-uncalibrated .membrane-entity-link:focus-visible {
  color: var(--membrane-mist);
  border-bottom-color: rgba(255, 122, 61, 0.58);
}

.membrane-entity-link {
  color: var(--membrane-ember);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 122, 61, 0.36);
  -webkit-app-region: no-drag;
  transition: color 180ms ease, border-color 180ms ease, text-shadow 180ms ease;
}

.membrane-entity-link:hover,
.membrane-entity-link:focus-visible {
  color: var(--membrane-mist);
  border-color: rgba(255, 122, 61, 0.72);
  outline: none;
  text-shadow: 0 0 12px rgba(255, 122, 61, 0.24);
}

.membrane-network {
  border-top: 0;
  border-bottom: 1px solid var(--membrane-rule);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  -webkit-app-region: no-drag;
}

.membrane-network-summary {
  align-items: baseline;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  list-style: none;
  outline: none;
  padding: 11px 0;
}

.membrane-network-summary::-webkit-details-marker {
  display: none;
}

.membrane-network-summary:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--membrane-ember) 34%, transparent);
  outline-offset: 5px;
}

.membrane-network-title {
  color: var(--membrane-mist-mid);
  text-transform: uppercase;
}

.membrane-network-count {
  color: var(--membrane-ember);
  position: relative;
  text-align: right;
  white-space: nowrap;
}

.membrane-network-count::after {
  background:
    linear-gradient(180deg, rgba(25, 18, 20, 0.98), rgba(10, 8, 10, 0.98));
  border: 1px solid rgba(255, 122, 61, 0.34);
  border-radius: 8px;
  bottom: calc(100% + 10px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.44), 0 0 18px rgba(255, 122, 61, 0.14);
  color: var(--membrane-mist-mid);
  content: attr(data-tip);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  left: auto;
  letter-spacing: 0.01em;
  line-height: 1.45;
  opacity: 0;
  padding: 10px 12px;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: left;
  text-transform: none;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: normal;
  width: min(310px, 72vw);
  z-index: 8;
}

.membrane-network-summary:hover .membrane-network-count::after,
.membrane-network-summary:focus-visible .membrane-network-count::after {
  opacity: 1;
  transform: translateY(0);
}

.membrane-network-detail {
  padding: 0 0 14px;
}

.membrane-network-empty {
  color: var(--membrane-mist-mid);
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}

/* Identity hero — big avatar on left, name/handle/team stack on right.
   The avatar is the visual anchor of the self panel. */
.membrane-section-identity {
  padding-top: 4px;
}

.membrane-identity-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--membrane-rule);
}

.membrane-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 200, 140, 0.30), transparent 65%),
    linear-gradient(155deg, #2a2026 0%, #1a1418 100%);
  border: 1px solid rgba(255, 122, 61, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(255, 122, 61, 0.08),
    0 0 22px rgba(255, 122, 61, 0.18),
    0 12px 28px -8px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Smaller variant for the panel-head accessory slot — pinned top-right
   beside the title, sized so it sits on the same baseline weight. */
.membrane-avatar--head {
  width: 64px;
  height: 64px;
  min-width: 64px;
  margin-top: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(255, 122, 61, 0.08),
    0 0 16px rgba(255, 122, 61, 0.18),
    0 8px 18px -6px rgba(0, 0, 0, 0.6);
}
.membrane-avatar--head .membrane-avatar-initials {
  font-size: 22px;
}

.membrane-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.membrane-avatar-initials {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--membrane-mist);
  letter-spacing: -0.02em;
  opacity: 0.85;
}

/* When the img loads successfully, the initials sit behind it as a
   fallback only — img covers them. When the img fails / removes itself,
   the parent loses data-has-img and the initials become visible. */
.membrane-avatar[data-has-img] .membrane-avatar-initials {
  opacity: 0;
}

.membrane-identity-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.membrane-identity-name {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  color: var(--membrane-mist);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.membrane-identity-handle {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--membrane-ember);
}

.membrane-identity-team {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--membrane-mist-mid);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Connection row — clickable peer entry in the self panel's connections
   section. Hairline border, ember on hover/focus, slight slide right. */
.membrane-connection-row {
  cursor: pointer;
  outline: none;
  transition: background 200ms cubic-bezier(0.65, 0, 0.05, 1),
              transform 200ms cubic-bezier(0.65, 0, 0.05, 1);
}
.membrane-connection-row:hover,
.membrane-connection-row:focus-visible {
  background: rgba(255, 122, 61, 0.05);
  transform: translateX(3px);
}
.membrane-connection-row:hover .membrane-event-title,
.membrane-connection-row:focus-visible .membrane-event-title {
  color: var(--membrane-ember);
}
.membrane-connection-row .membrane-event-date {
  /* Mono edge-type label — keep it tight and dim so the name dominates */
  color: var(--membrane-mist-dim);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.membrane-panel-actions {
  list-style: none;
  margin: 14px 0 0 0;
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--membrane-rule);
}

.mpa-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--membrane-mist);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 10px 0;
  text-align: left;
  cursor: pointer;
  transition: color 240ms cubic-bezier(0.65, 0, 0.05, 1),
              transform 240ms cubic-bezier(0.65, 0, 0.05, 1);
}

.mpa-btn:hover {
  color: var(--membrane-ember);
  transform: translateX(4px);
}

/* ── cohort lens cards ──────────────────────────────────────────────────
   The cohort panel's body: one real, clickable tile per constellation lens
   + the full roster. Fills the space the old hair-thin links left blank. */
.cohort-view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}

.cohort-view-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
  min-height: 124px;
  padding: 18px 18px 16px;
  border: 1px solid var(--membrane-rule);
  border-radius: 14px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.008));
  color: var(--membrane-mist);
  cursor: pointer;
  overflow: hidden;
  -webkit-app-region: no-drag;
  transition: border-color 280ms cubic-bezier(0.65, 0, 0.05, 1),
              transform 280ms cubic-bezier(0.65, 0, 0.05, 1),
              background 280ms cubic-bezier(0.65, 0, 0.05, 1);
}

.cohort-view-card::after {
  /* a faint ember wash that blooms from the glyph corner on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 16% 0%, rgba(255, 122, 61, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.65, 0, 0.05, 1);
  pointer-events: none;
}

.cohort-view-card:hover,
.cohort-view-card:focus-visible {
  border-color: var(--membrane-ember-soft);
  transform: translateY(-3px);
  outline: none;
}

.cohort-view-card:hover::after,
.cohort-view-card:focus-visible::after {
  opacity: 1;
}

.cvc-glyph {
  position: relative;
  width: 26px;
  height: 26px;
  color: var(--membrane-ember);
  opacity: 0.82;
  transition: opacity 280ms ease, transform 280ms cubic-bezier(0.65, 0, 0.05, 1);
}

.cohort-view-card:hover .cvc-glyph {
  opacity: 1;
  transform: scale(1.06);
}

.cvc-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cvc-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cvc-title {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--membrane-mist);
}

.cvc-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--membrane-mist-dim);
}

.cvc-arrow {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 13px;
  color: var(--membrane-ember);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(0.65, 0, 0.05, 1);
}

.cohort-view-card:hover .cvc-arrow,
.cohort-view-card:focus-visible .cvc-arrow {
  opacity: 1;
  transform: translateX(0);
}

.membrane-panel-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px 18px;
  padding: 20px 44px 24px;
  border-top: 1px solid rgba(255, 122, 61, 0.14);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.35) 100%);
  /* faint inner-top ember rule echoing the bezel */
  box-shadow: inset 0 1px 0 rgba(255, 122, 61, 0.08);
}

.membrane-foot-left {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}

.membrane-blob-dots {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.membrane-blob-dot {
  appearance: none;
  background: transparent;
  border: none;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--membrane-mist-dim);
  padding: 4px 0;
  cursor: pointer;
  position: relative;
  transition: color 240ms cubic-bezier(0.65, 0, 0.05, 1);
}

.membrane-blob-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(200, 203, 214, 0.18);
  margin-right: 7px;
  vertical-align: middle;
  transition: background 240ms cubic-bezier(0.65, 0, 0.05, 1);
}

.membrane-blob-dot:hover {
  color: var(--membrane-mist);
}

.membrane-blob-dot[aria-pressed="true"] {
  color: var(--membrane-mist);
}

.membrane-blob-dot[aria-pressed="true"]::before {
  background: var(--membrane-ember);
}

.membrane-footer-dot {
  color: color-mix(in srgb, var(--membrane-mist-dim) 82%, transparent);
}

.membrane-footer-dot::before {
  background: rgba(200, 203, 214, 0.1);
}

.membrane-footer-dot:hover::before,
.membrane-footer-dot:focus-visible::before {
  background: rgba(255, 122, 61, 0.42);
}

.membrane-field-row {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.membrane-sound-toggle {
  grid-column: 2;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 122, 61, 0.18);
  color: var(--membrane-mist-mid);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 240ms cubic-bezier(0.65, 0, 0.05, 1),
              border-color 240ms cubic-bezier(0.65, 0, 0.05, 1),
              box-shadow 240ms cubic-bezier(0.65, 0, 0.05, 1);
}

.membrane-sound-toggle:hover {
  color: var(--membrane-mist);
  border-color: rgba(255, 122, 61, 0.35);
  box-shadow: 0 0 16px rgba(255, 122, 61, 0.15);
}

.membrane-sound-toggle[aria-pressed="true"] {
  color: var(--membrane-ember);
  border-color: rgba(255, 122, 61, 0.55);
  box-shadow: 0 0 18px rgba(255, 122, 61, 0.30);
}

.mst-glyph {
  font-size: 13px;
  line-height: 1;
}

.mst-state {
  opacity: 0.65;
}

/* When membrane mode is active, hide the alchemy header + grain + decorative
   chrome so the void breathes. The legacy rail becomes a hidden shell menu
   summoned from the active "operating system" tab. */
.alchemy-view[data-alch-mode-current="membrane"] .alchemy-header {
  display: none;
}
.alchemy-view[data-alch-mode-current="membrane"] .alchemy-grain {
  display: none;
}
.alchemy-view[data-alch-mode-current="membrane"] .alchemy-stage {
  --membrane-shell-menu-width: min(320px, calc(100% - 48px));
  --membrane-shell-menu-gap: clamp(18px, 2.4vw, 40px);
  display: block;
  isolation: isolate;
  background: var(--membrane-void);
}
.alchemy-view[data-alch-mode-current="membrane"] .alchemy-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--membrane-void);
}

/* In membrane mode the rail becomes a temporary shell menu. Re-click the
   active "operating system" top tab to summon it; choose a route or click
   the void/Escape to dismiss it. */
.alchemy-view[data-alch-mode-current="membrane"] .alchemy-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.22) 38%, rgba(0, 0, 0, 0.00) 72%);
  transition: opacity 220ms cubic-bezier(0.65, 0, 0.05, 1);
}
.alchemy-view[data-alch-mode-current="membrane"][data-alch-menu="open"] .alchemy-stage::after {
  opacity: 1;
  pointer-events: auto;
}
.alchemy-view[data-alch-mode-current="membrane"] .alchemy-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: var(--membrane-shell-menu-width) !important;
  flex: none !important;
  padding: 34px 20px 30px 28px !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-104%);
  background:
    linear-gradient(180deg, rgba(8, 8, 10, 0.90) 0%, rgba(0, 0, 0, 0.76) 100%);
  border-right: 1px solid rgba(255, 122, 61, 0.18);
  box-shadow:
    inset -1px 0 0 rgba(var(--ink-rgb), 0.04),
    22px 0 70px -22px rgba(255, 122, 61, 0.42),
    36px 0 90px -30px rgba(0, 0, 0, 0.90);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  transition:
    visibility 0s linear 260ms,
    transform 260ms cubic-bezier(0.65, 0, 0.05, 1),
    opacity 180ms ease;
}
.alchemy-view[data-alch-mode-current="membrane"][data-alch-menu="open"] .alchemy-rail {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s, 0s, 0s;
}
.alchemy-view[data-alch-mode-current="membrane"][data-alch-menu="open"] .membrane-host:not(.membrane-folded) .membrane-panel {
  left: calc(var(--membrane-shell-menu-width) + var(--membrane-shell-menu-gap));
  right: clamp(330px, 31vw, 480px);
}
.alchemy-view[data-alch-mode-current="membrane"] .alchemy-rail-btn {
  color: rgba(var(--ink-rgb), 0.58);
}
.alchemy-view[data-alch-mode-current="membrane"] .alchemy-rail-btn[aria-selected="true"] {
  color: var(--membrane-mist);
}
.alchemy-view[data-alch-mode-current="membrane"] .alchemy-rail-btn .ar-num {
  color: rgba(255, 122, 61, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .alchemy-view[data-alch-mode-current="membrane"] .alchemy-stage::after,
  .alchemy-view[data-alch-mode-current="membrane"] .alchemy-rail,
  .alchemy-view[data-alch-mode-current="membrane"] .membrane-panel {
    transition: none;
  }
  /* Ambient-notification interactions: keep the final informative state
     (dismiss control visible on hover/focus; cards present) but drop the
     transforms, blur, and easing so nothing animates. */
  .mfeed-row, .mfeed-item, .mfeed-dismiss, .mfeed-cta,
  .membrane-agenda .magenda-up,
  .membrane-agenda .magenda-up-event,
  .membrane-agenda .magenda-event,
  .membrane-agenda .magenda-dismiss,
  .membrane-agenda .magenda-add {
    transition: none !important;
  }
  /* The hover layer still REVEALS (un-truncate + CTA visible) — just without
     the grid-row accordion. Force the revealed track open instantly. */
  .mfeed-row:hover .mfeed-cta,
  .mfeed-row:focus-within .mfeed-cta { grid-template-rows: 1fr; }
  /* Keep the add control centred; drop only its scale punctuation. */
  .membrane-agenda .magenda-add,
  .membrane-agenda .magenda-up:hover .magenda-add,
  .membrane-agenda .magenda-up:focus-within .magenda-add,
  .membrane-agenda .magenda-add:active { transform: translateY(-50%); }
  .mfeed-item:hover, .mfeed-item:active,
  .membrane-agenda .magenda-up-event:hover,
  .membrane-agenda .magenda-up-event:active,
  .membrane-agenda .magenda-event:active {
    transform: none;
  }
  .membrane-agenda .magenda-event:active { transform: translateY(-50%); }
  .mfeed-dismiss, .membrane-agenda .magenda-dismiss { transform: scale(1); }
  .mfeed-row:hover .mfeed-dismiss,
  .mfeed-row:focus-within .mfeed-dismiss,
  .membrane-agenda .magenda-up:hover .magenda-dismiss,
  .membrane-agenda .magenda-up:focus-within .magenda-dismiss { transform: scale(1); }
  .mfeed-row.is-dismissing,
  .membrane-agenda .magenda-up.is-dismissing { filter: none; transform: none; }
  /* New-card entrance is neutralized too (the JS gate also skips adding the
     class under reduced-motion; this is the belt-and-suspenders CSS guard). */
  .mfeed-row.is-entering,
  .membrane-agenda .magenda-up.is-entering { animation: none !important; }
}

/* Small floating mode pill — lets the user toggle back to legacy view
   without committing to the membrane forever. */
.membrane-mode-pill {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 14, 20, 0.6);
  border: 1px solid rgba(200, 203, 214, 0.1);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--membrane-mist-dim);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 240ms cubic-bezier(0.65, 0, 0.05, 1);
}

.membrane-mode-pill:hover {
  color: var(--membrane-mist);
}

.membrane-mode-pill .mmp-glyph {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--membrane-ember);
  display: inline-block;
}

/* ─── CREW CREDENTIAL — self profile as a space-mission ID card ──────── */
/* The credential IS the panel content — NOT a card inside the card. The
   membrane panel's ember border + corner brackets are the frame; this just
   lays the credential out and fills the full height. */
.crewid {
  position: relative;
  flex: 1 1 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  isolation: isolate;
}

.crewid-foil {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity 320ms cubic-bezier(0.65,0,0.05,1);
  background:
    radial-gradient(240px 200px at var(--mx,50%) var(--my,0%), rgba(255,210,180,0.12), transparent 60%),
    linear-gradient(115deg, transparent 43%, rgba(255,122,61,0.12) 50%, transparent 57%);
  mix-blend-mode: screen;
}
.crewid.is-foil .crewid-foil { opacity: 1; }
.crewid-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 38%; z-index: 5;
  pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255,122,61,0.16), transparent);
  animation: crewid-sweep 760ms cubic-bezier(0.65,0,0.05,1) 1;
}
@keyframes crewid-sweep {
  0% { opacity: 0; transform: translateY(-100%); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(280%); }
}

.crewid-band {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 9px; border-bottom: 1px solid var(--membrane-rule);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
}
.crewid-issuer { color: var(--membrane-ember); }
.crewid-doc { color: var(--membrane-mist-dim); }

.crewid-hero { position: relative; z-index: 2; display: flex; gap: 16px; align-items: center; }
.crewid-patch { flex: 0 0 auto; position: relative; }
.crewid-patch .membrane-avatar {
  width: 60px; height: 60px;
  box-shadow: 0 0 0 1px rgba(255,122,61,0.5), 0 0 18px rgba(255,122,61,0.22);
}
.crewid-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crewid-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--membrane-mist-dim);
}
.crewid-name {
  margin: 0; font-family: 'Inter Display','Inter',sans-serif; font-style: italic;
  font-weight: 500; font-size: 34px; line-height: 1; color: var(--membrane-mist);
  letter-spacing: -0.01em;
}
.crewid-callsign { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.crewid-call, .crewid-clearance {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--membrane-mist-mid);
}
.crewid-clearance { color: var(--membrane-ember); }

.crewid-readouts {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 22px;
  padding: 12px 0; border-top: 1px solid var(--membrane-rule); border-bottom: 1px solid var(--membrane-rule);
}
.crewid-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.crewid-k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--membrane-mist-dim);
}
.crewid-v {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--membrane-mist); text-align: right;
}

/* Comms section grows to fill the panel's vertical space, pushing the
   registry strip + actions to the bottom of the credential. */
.crewid-comms { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.crewid-comms-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.crewid-comms-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--membrane-mist-mid);
}
.crewid-comms-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--membrane-ember);
}
/* Empty state — a centred mission-status block that gives the void a
   purposeful "awaiting uplink" presence instead of dead space. */
.crewid-empty {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; margin: 0; padding: 24px 0;
  position: relative;
}
.crewid-empty::before {
  content: ""; width: 88px; height: 88px; border-radius: 50%;
  border: 1px solid rgba(255,122,61,0.22);
  box-shadow: 0 0 0 8px rgba(255,122,61,0.04), inset 0 0 22px rgba(255,122,61,0.06);
  animation: crewid-pulse 3.6s ease-in-out infinite;
}
@keyframes crewid-pulse {
  0%, 100% { transform: scale(0.96); opacity: 0.7; }
  50% { transform: scale(1.04); opacity: 1; }
}
.crewid-empty .ce-status {
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--membrane-ember);
}
.crewid-empty .ce-msg {
  font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.6; font-style: italic;
  color: var(--membrane-mist-dim); max-width: 34ch;
}
.crewid-comm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.crewid-comm {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: baseline;
  padding: 6px 8px; border-radius: 5px; cursor: pointer;
  transition: background 160ms ease;
}
.crewid-comm:hover { background: rgba(255,122,61,0.08); }
.crewid-comm-rel { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--membrane-mist-dim); }
.crewid-comm-name { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--membrane-mist); }
.crewid-comm-meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--membrane-mist-dim); text-align: right; }

/* registry strip — a faux barcode + reg number, ID-card flavour */
.crewid-registry { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.crewid-barcode {
  flex: 1 1 auto; height: 22px; border-radius: 2px; opacity: 0.55;
  background-image: repeating-linear-gradient(90deg,
    var(--membrane-mist-mid) 0 1px, transparent 1px 3px,
    var(--membrane-mist-mid) 3px 5px, transparent 5px 6px,
    var(--membrane-mist-mid) 6px 7px, transparent 7px 11px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.crewid-reg-no {
  flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 8px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--membrane-mist-dim);
}

.crewid-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.crewid-action {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: lowercase; cursor: pointer;
  padding: 7px 13px; border-radius: 6px;
  color: var(--membrane-mist); background: rgba(var(--ink-rgb),0.04);
  border: 1px solid rgba(255,122,61,0.3);
  transition: background 160ms ease, border-color 160ms ease;
}
.crewid-action:hover { background: rgba(255,122,61,0.12); border-color: var(--membrane-ember); }

/* In-card claim CTA — the prominent "identify yourself" move for an
   unclaimed credential, so you claim from the big display itself. */
.crewid-claim {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 10px;
  color: var(--membrane-mist);
  border: 1px solid rgba(255,122,61,0.5);
  background: linear-gradient(180deg, rgba(255,122,61,0.16), rgba(255,122,61,0.07));
  box-shadow: 0 0 22px rgba(255,122,61,0.16), inset 0 0 0 1px rgba(255,122,61,0.12);
  transition: background 200ms ease, box-shadow 200ms ease, transform 160ms ease;
  animation: crewid-claim-pulse 3s ease-in-out infinite;
}
.crewid-claim:hover {
  background: linear-gradient(180deg, rgba(255,122,61,0.26), rgba(255,122,61,0.12));
  box-shadow: 0 0 32px rgba(255,122,61,0.3), inset 0 0 0 1px rgba(255,122,61,0.22);
  transform: translateY(-1px);
}
@keyframes crewid-claim-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255,122,61,0.12), inset 0 0 0 1px rgba(255,122,61,0.1); }
  50% { box-shadow: 0 0 30px rgba(255,122,61,0.26), inset 0 0 0 1px rgba(255,122,61,0.18); }
}
.crewid-claim .cc-glyph {
  font-size: 22px; color: #ff7a3d; line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255,122,61,0.5));
}
.crewid-claim .cc-text { display: flex; flex-direction: column; gap: 3px; }
.crewid-claim .cc-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--membrane-mist);
}
.crewid-claim .cc-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.14em; text-transform: lowercase; color: rgba(255,154,106,0.9);
}

/* ─── THE SEAL — self profile reframed (shape-as-sigil in a vesica) ───── */
.seal-hero {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; padding-top: 4px;
}
.seal { position: relative; width: 96px; height: 122px; margin-bottom: 6px; }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal-vesica-path {
  fill: rgba(255,122,61,0.04);
  stroke: rgba(255,122,61,0.5); stroke-width: 1;
  filter: drop-shadow(0 0 10px rgba(255,122,61,0.18));
}
.seal-sigil-line {
  fill: none; stroke: var(--membrane-mist); stroke-width: 1.1;
  stroke-linejoin: round; stroke-linecap: round;
  /* construct-itself rite on mount */
  stroke-dasharray: 240; stroke-dashoffset: 240;
  animation: seal-draw 1100ms cubic-bezier(0.65,0,0.05,1) 120ms forwards;
}
.seal-sigil-dots circle { fill: var(--membrane-ember); opacity: 0; animation: seal-dot 500ms ease 900ms forwards; }
@keyframes seal-draw { to { stroke-dashoffset: 0; } }
@keyframes seal-dot { to { opacity: 0.9; } }
/* slight hand-touched tilt so it reads drawn, not CAD */
.seal-sigil { transform: rotate(-2.5deg); transform-origin: center; }
.seal.has-face .seal-sigil { display: none; }
.seal-face {
  position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: cover; opacity: 0.96;
}
.seal.no-face .seal-face { display: none; }

.seal-hero .crewid-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--membrane-mist-dim);
}
.seal-hero .crewid-name {
  margin: 2px 0 0; font-family: 'Inter Display','Inter',sans-serif; font-style: italic;
  font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: -0.01em; color: var(--membrane-mist);
}
.seal-tagline {
  font-family: 'Inter','sans-serif'; font-style: italic; font-size: 12px;
  color: var(--membrane-mist-dim); letter-spacing: 0.01em;
}
.seal-handle {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; color: rgba(255,154,106,0.85);
}

/* readouts centered as a quiet row under the seal */
.seal-readouts { grid-template-columns: 1fr 1fr 1fr; gap: 6px 18px; }
.seal-readouts .crewid-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.seal-readouts .crewid-v { text-align: left; }

.seal-sovereign {
  position: relative; z-index: 2; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--membrane-mist-dim); opacity: 0.7;
}

/* the strike CTA reuses .crewid-claim; just center its text block */
.seal-strike { justify-content: center; text-align: center; }
.seal-strike .cc-text { align-items: center; }
/* stamp icon replaces the old ◇ diamond — a stamp has a fixed orientation,
   so the 360° spin is dropped (it read as broken). Button keeps its pulse. */
.seal-strike .cc-glyph { animation: none; }
@keyframes seal-glyph-spin { to { transform: rotate(360deg); } }

/* ─── THE FIELD — folded full-bleed world ────────────────────────────── */
/* The panel folds away like a wall of the ship receding; the orbs become
   the full-bleed world. Click an orb to summon a panel back as an overlay;
   click empty space (or ↩) to fold it away again. */
.membrane-panel {
  transition:
    left 420ms cubic-bezier(0.65, 0, 0.05, 1),
    right 420ms cubic-bezier(0.65, 0, 0.05, 1),
    transform 760ms cubic-bezier(0.7, 0, 0.2, 1),
    opacity 480ms ease;
  transform-origin: left center;
}
.membrane-folded .membrane-panel {
  transform: perspective(1500px) translateX(-14%) rotateY(-34deg) scale(0.95);
  opacity: 0;
  pointer-events: none;
}
.membrane-stage::before { transition: opacity 620ms ease; }
.membrane-folded .membrane-stage::before { opacity: 0; }  /* drop the reading gutter → full bleed */

/* "enter the field" — explicit fold control in the panel footer. Folds
   the panel away so the orbs become the full-bleed world. Hidden with the
   panel once folded; you return by tapping an orb. Never auto-folds. */
.membrane-enter-field {
  display: inline-flex; align-items: center; gap: 7px;
  -webkit-app-region: no-drag; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px;
  letter-spacing: 0.16em; text-transform: lowercase;
  color: var(--membrane-mist-mid);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 122, 61, 0.3);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.membrane-enter-field:hover { color: var(--membrane-ember); border-color: var(--membrane-ember); background: rgba(255,122,61,0.08); }

/* ── membrane · Lucide icon sizing (2026-06) ─────────────────────────
   The membrane panels were on emoji/ascii glyphs; they now use the same
   inline Lucide set as the rest of the app. Verb icons sit on a deep,
   saturated verb-color chip, so they stay white in BOTH themes (a black icon
   would vanish on the deep verb color) — independent of the page being light. */
.membrane-ask-verb .alch-asks-verb-svg { width: 12px; height: 12px; }
.membrane-ask-verb.has-verb-color {
  background: var(--verb-color);
  border-color: var(--verb-color);
  opacity: 1;
}
html[data-theme="light"] .membrane-ask-verb .alch-asks-verb-svg { color: #fff; }

.crewid-claim .cc-glyph svg { width: 22px; height: 22px; display: block; }
.mst-glyph svg { width: 14px; height: 14px; display: block; }
.mef-glyph { display: inline-flex; align-items: center; }
.mef-glyph svg { width: 13px; height: 13px; display: block; }

/* ── OS feedback + idea box (2026-06) ────────────────────────────────────────
   Anonymous feedback pill pinned to the bottom-center window edge. Collapsed =
   a slim tab flush at the edge; on open the whole card lifts a few px and the
   textarea + send bloom in beneath the label. The card is bottom-anchored, so
   growing the body pushes the label UP rather than off the bottom edge. Wiring:
   setupFeedbackBox() in membrane/index.js; write path in ../supabase-feedback.mjs. */
.membrane-feedback {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;            /* only the card inside takes pointer hits */
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.membrane-feedback.is-open {
  transform: translateX(-50%) translateY(-10px);   /* the "go up a few pixels" */
}
/* Step aside for the Rubik's easter-egg controls (also bottom-centered). */
.membrane-rubiks-active .membrane-feedback {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.membrane-feedback-card {
  pointer-events: auto;
  overflow: hidden;
  width: fit-content;              /* collapsed → hug the pill label, not the full width */
  max-width: 78vw;
  opacity: 0.3;                    /* quiet at rest; full on hover or when open */
  border: 1px solid var(--membrane-ember-soft);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--membrane-card-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.28);
  transition: opacity 200ms ease, width 280ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 180ms ease;
}
.membrane-feedback-card:hover { opacity: 1; }
.membrane-feedback.is-open .membrane-feedback-card {
  width: min(420px, 78vw);         /* room for the textarea once open */
  opacity: 1;
  border-color: var(--membrane-ember);
}

.membrane-feedback-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 18px;
  border: none;
  background: transparent;
  color: rgba(var(--mem-ink-rgb), 0.9);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 160ms ease;
}
.membrane-feedback-pill:hover,
.membrane-feedback.is-open .membrane-feedback-pill { color: var(--membrane-ember); }
.membrane-feedback-pill .mfb-spark { color: var(--membrane-ember); opacity: 0.9; font-size: 11px; }

.membrane-feedback-body {
  max-height: 0;
  opacity: 0;
  padding: 0 12px;
  transition: max-height 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 200ms ease, padding 200ms ease;
}
.membrane-feedback.is-open .membrane-feedback-body {
  max-height: 200px;
  opacity: 1;
  padding: 0 12px 12px;
}

.membrane-feedback-input {
  width: 100%;
  min-width: 0;                    /* don't let the textarea's intrinsic width inflate the collapsed card */
  box-sizing: border-box;
  resize: none;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid rgba(var(--mem-ink-rgb), 0.16);
  border-radius: 8px;
  background: rgba(var(--mem-ink-rgb), 0.04);
  color: var(--membrane-mist);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.membrane-feedback-input::placeholder { color: rgba(var(--mem-ink-rgb), 0.4); }
.membrane-feedback-input:focus {
  border-color: var(--membrane-ember-soft);
  background: rgba(var(--mem-ink-rgb), 0.06);
}

.membrane-feedback-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.membrane-feedback-status {
  font-size: 11px;
  min-height: 1em;
  color: rgba(var(--mem-ink-rgb), 0.55);
}
.membrane-feedback-status[data-tone="ok"] { color: var(--membrane-ember); }
.membrane-feedback-status[data-tone="err"] { color: #ff6b5e; }

.membrane-feedback-send {
  flex: none;
  padding: 6px 16px;
  border: 1px solid var(--membrane-ember-soft);
  border-radius: 999px;
  background: rgba(255, 122, 61, 0.1);
  color: var(--membrane-ember);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease, transform 80ms ease;
}
.membrane-feedback-send:hover:not(:disabled) {
  background: rgba(255, 122, 61, 0.18);
  border-color: var(--membrane-ember);
}
.membrane-feedback-send:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.membrane-feedback-send:disabled { opacity: 0.4; cursor: default; }