:root {
  --lime: #a6e22e; --cyan: #7ad2ff; --ink: #161f26; --dock: #11181d; --line: rgba(255,255,255,.075);
  --text: #e8eef1; --muted: #9aaab4; --dim: #7f909a; --maxw: 860px;
  --contentw: 720px; --night: #10181d; --fresh: #a6e22e; --sky: #9edcff;
  --rail-line: rgba(122,210,255,.14); --rail-line-strong: rgba(122,210,255,.28);
  --snap: 110ms; --settle: 220ms; --spring-t: 320ms;
  --e-std: cubic-bezier(.4, 0, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-enter: cubic-bezier(.2, .8, .2, 1); --e-exit: cubic-bezier(.4, 0, 1, 1);
  font-synthesis: none; color-scheme: dark;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-padding-bottom: calc(var(--dock-h, 130px) + var(--kb-offset, 0px) + 12px); }
body { margin: 0; overflow-x: hidden; background: #293138 !important; color: var(--text); }
button, textarea, input { font: inherit; }
::selection { background: rgba(166,226,46,.32); color: #fff; }
button:focus-visible, .MuiButton-root:focus-visible, .MuiIconButton-root:focus-visible, summary:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Masthead: Lantern Rail. Small left logo (refreshes on public entry), gradient
   tagline, compact How it works + Refresh actions over a lime/cyan hairline.
   Phone ~70px (tagline below logo, S 10px from logo left), desktop ~65px. */
.masthead { position: relative; max-width: var(--maxw); margin: 0 auto;
  background:
    radial-gradient(55% 160% at 0% 0%, rgba(166,226,46,.10), transparent 70%),
    radial-gradient(55% 160% at 100% 0%, rgba(122,210,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(22,31,38,.94), rgba(16,24,29,.97));
  border-inline: 1px solid var(--line); border-bottom: 1px solid var(--rail-line); }
.masthead::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 1px; pointer-events: none; opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(166,226,46,.55) 25%, rgba(122,210,255,.55) 75%, transparent); }
.masthead-inner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.masthead-brand { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.brand { display: block; box-sizing: content-box; width: 140px; max-width: none; height: auto; aspect-ratio: 324 / 66; margin: 0; padding-block: 8px; }
.brand-button.MuiButton-root { min-width: 44px; min-height: 44px; margin-left: -4px; padding: 0 4px; border-radius: 10px; justify-content: flex-start; }
.brand-button.MuiButton-root:hover { background: transparent; }
.brand-button .brand { padding-block: 0; transition: filter var(--settle) var(--e-std); }
.brand-button.MuiButton-root:hover .brand { filter: drop-shadow(0 0 8px rgba(166,226,46,.35)); }
.brand-button.MuiButton-root[aria-disabled="true"] { cursor: default; }
.say.MuiTypography-root { margin: -7px 0 0 10px; font-size: 13px; line-height: 16px; font-weight: 600; font-style: normal; letter-spacing: .01em; white-space: nowrap;
  background: linear-gradient(90deg, var(--lime), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.masthead-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.guide-toggle.MuiButton-root { flex: none; gap: 6px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--rail-line-strong); border-radius: 999px;
  background: rgba(122,210,255,.07); color: #d6efff; font-size: 14px; font-weight: 600; line-height: 1; text-transform: none; white-space: nowrap;
  transition: background-color var(--settle) var(--e-std), border-color var(--settle) var(--e-std); }
.guide-toggle.MuiButton-root:hover { background: rgba(122,210,255,.14); border-color: rgba(122,210,255,.45); color: #fff; }
.guide-toggle.MuiButton-root[aria-expanded="true"] { background: rgba(122,210,255,.16); border-color: var(--cyan); }
.guide-q { display: grid; place-items: center; font-size: 20px; font-weight: 700; line-height: 1; }
.guide-label, .guide-chev { display: none; }
.guide-chev { flex: none; width: 12px; height: 12px; transition: transform var(--settle) var(--e-std); }
.guide-toggle[aria-expanded="true"] .guide-chev { transform: rotate(180deg); }
.header-refresh.MuiButton-root { flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(166,226,46,.38); border-radius: 50%;
  background: rgba(166,226,46,.08); color: var(--lime); transition: background-color var(--settle) var(--e-std), border-color var(--settle) var(--e-std); }
.header-refresh.MuiButton-root:hover { background: rgba(166,226,46,.16); border-color: rgba(166,226,46,.6); }
.header-refresh.MuiButton-root[aria-disabled="true"] { opacity: .45; cursor: default; }
.header-refresh-icon { display: block; width: 20px; height: 20px; }
@media (forced-colors: active) { .say.MuiTypography-root { background: none; color: CanvasText; } }

/* Board: one continuous dark ink surface */
/* Board: 860px night canvas; cards and dock content capped at 720px on desktop */
.board { max-width: var(--maxw); margin: 0 auto; background: rgba(16,24,29,.94); border-inline: 1px solid var(--line); padding: 8px 10px calc(var(--dock-h, 120px) + 22px); min-height: calc(100vh - 70px); }
.guide-content { margin: 6px 0 10px; padding: 12px 14px; border: 1px solid var(--rail-line); border-radius: 14px; background: linear-gradient(180deg, rgba(122,210,255,.07), rgba(22,31,38,.6)); font-size: 13.5px; line-height: 1.6; color: #c3ced4; }
.guide-content ul { margin: 0; padding-left: 18px; }
.guide-content li + li { margin-top: 4px; }
/* Native topic disclosures keep focus and open state across board reads. */
.guide-topics { margin-top: 10px; }
.guide-topic { border-top: 1px solid var(--line); }
.guide-topic summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--cyan); font-size: 13px; list-style: none; }
.guide-topic summary::-webkit-details-marker { display: none; }
.guide-topic summary::before { content: '›'; display: inline-block; font-size: 20px; line-height: 1; margin-right: 7px; }
.guide-topic[open] summary::before { transform: rotate(90deg); }
.guide-topic summary:hover { color: #fff; }
.guide-topic ul { padding-bottom: 12px; }
.guide-note { margin: 4px 0 0; font-size: 12px; color: var(--dim); }

/* Restrained local-preview notice and developer-only ranking control */
.preview-notice { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dev-reorder { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; border-bottom: 1px dashed rgba(122,210,255,.3); font-size: 12px; color: var(--dim); }
.dev-reorder .text-action.MuiButton-root { color: var(--cyan); }

/* Section dividers: Fresh lime, Top sky; matching dot, title and hairline.
   The card margin above the ranked label equals the label's own bottom
   margin (8px phone, 10px desktop); no extra top padding stacks on it. */
.section-label { --section-color: var(--fresh); --section-glow: rgba(166,226,46,.7); --section-hair: rgba(166,226,46,.38);
  display: flex; gap: 10px; align-items: center; margin: 4px 2px 8px; padding: 0; }
.section-label h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; color: var(--section-color); }
.section-label h2::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--section-color); box-shadow: 0 0 8px var(--section-glow); }
.section-rule { height: 1px; flex: 1; background: linear-gradient(90deg, var(--section-hair), transparent); }
.ranked-label { --section-color: var(--sky); --section-glow: rgba(158,220,255,.4); --section-hair: rgba(158,220,255,.38); margin-top: 0; }

/* Message cards with the real 44px vote rail on the left */
.post { list-style: none; margin: 0 0 8px; padding: 6px 10px 0 2px; background: var(--ink); border: 1px solid rgba(255,255,255,.05); border-radius: 14px; }
.leading-post { border-color: rgba(166,226,46,.16); }

/* Rank Slide: finite non-layout static rising outline on genuinely rising visible posts */
.post[data-rank-rise] {
  outline: 1px solid rgba(166, 226, 46, 0.55);
  outline-offset: -1px;
  box-shadow: inset 0 0 10px -2px rgba(166, 226, 46, 0.25);
}

/* Transient surface background during translation prevents text overlapping on crossing rows */
.post[data-translating] {
  background: rgba(22, 31, 38, 0.95);
}

/* Item vote bounce and directional edge echo (completed <=320ms, returns to identity) */
.post.vote-cue-up,
.reply-row.vote-cue-up {
  animation: item-bounce-up var(--spring-t) var(--spring), edge-echo-up var(--spring-t) var(--e-std);
  will-change: transform, box-shadow;
}
.post.vote-cue-down,
.reply-row.vote-cue-down {
  animation: item-bounce-down var(--spring-t) var(--spring), edge-echo-down var(--spring-t) var(--e-std);
  will-change: transform, box-shadow;
}

@keyframes item-bounce-up {
  0% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
  70% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

@keyframes item-bounce-down {
  0% { transform: translateY(0); }
  30% { transform: translateY(3px); }
  70% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

@keyframes edge-echo-up {
  0% { box-shadow: inset 3px 0 0 0 var(--lime), 0 0 16px -2px rgba(166,226,46,.45); }
  50% { box-shadow: inset 2px 0 0 0 rgba(166,226,46,.6), 0 0 8px -2px rgba(166,226,46,.25); }
  100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; }
}

@keyframes edge-echo-down {
  0% { box-shadow: inset 3px 0 0 0 var(--cyan), 0 0 16px -2px rgba(122,210,255,.45); }
  50% { box-shadow: inset 2px 0 0 0 rgba(122,210,255,.6), 0 0 8px -2px rgba(122,210,255,.25); }
  100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; }
}

/* Real vote lighting: 3.2s diminishing stationary rim + soft tint.
   Rendered on a dedicated ::after overlay layer, never on the host
   .post/.reply-row element itself: an equally-specific `animation`
   shorthand there would otherwise replace (not combine with) the existing
   .vote-cue-up/down bounce animation above whenever both apply at once.
   The overlay is non-interactive and never clips the host's own controls
   or animations. */
.post[data-vote-lighting],
.reply-row[data-vote-lighting] {
  position: relative;
}

.post[data-vote-lighting]::after,
.reply-row[data-vote-lighting]::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  pointer-events: none;
  --lighting-surface-max: 0.16;
  --lighting-rim-max: 0.9;
  --lighting-halo-max: 0.3;
  outline: 1.5px solid transparent;
  outline-offset: -1px;
  animation: vote-lighting-decay 3200ms linear both;
  animation-delay: var(--lighting-delay, 0ms);
}

.post[data-vote-lighting="positive"]::after,
.reply-row[data-vote-lighting="positive"]::after {
  --lighting-rgb: 166 226 46;
}

.post[data-vote-lighting="negative"]::after,
.reply-row[data-vote-lighting="negative"]::after {
  --lighting-rgb: 255 107 74;
}

.post[data-vote-lighting][data-lighting-phase="b"]::after,
.reply-row[data-vote-lighting][data-lighting-phase="b"]::after {
  animation-name: vote-lighting-decay-alt;
}

@keyframes vote-lighting-decay {
  0% {
    background-color: rgb(var(--lighting-rgb) / 0);
    outline-color: rgb(var(--lighting-rgb) / 0);
    box-shadow: inset 0 0 0 rgb(var(--lighting-rgb) / 0);
  }
  7% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity)));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity)));
    box-shadow: inset 0 0 18px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity)));
  }
  20% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity) * 0.8));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity) * 0.8));
    box-shadow: inset 0 0 14px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity) * 0.75));
  }
  55% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity) * 0.3));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity) * 0.3));
    box-shadow: inset 0 0 7px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity) * 0.25));
  }
  85% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity) * 0.05));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity) * 0.05));
    box-shadow: inset 0 0 2px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity) * 0.03));
  }
  100% {
    background-color: rgb(var(--lighting-rgb) / 0);
    outline-color: rgb(var(--lighting-rgb) / 0);
    box-shadow: inset 0 0 0 rgb(var(--lighting-rgb) / 0);
  }
}

@keyframes vote-lighting-decay-alt {
  0% {
    background-color: rgb(var(--lighting-rgb) / 0);
    outline-color: rgb(var(--lighting-rgb) / 0);
    box-shadow: inset 0 0 0 rgb(var(--lighting-rgb) / 0);
  }
  7% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity)));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity)));
    box-shadow: inset 0 0 18px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity)));
  }
  20% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity) * 0.8));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity) * 0.8));
    box-shadow: inset 0 0 14px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity) * 0.75));
  }
  55% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity) * 0.3));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity) * 0.3));
    box-shadow: inset 0 0 7px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity) * 0.25));
  }
  85% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity) * 0.05));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity) * 0.05));
    box-shadow: inset 0 0 2px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity) * 0.03));
  }
  100% {
    background-color: rgb(var(--lighting-rgb) / 0);
    outline-color: rgb(var(--lighting-rgb) / 0);
    box-shadow: inset 0 0 0 rgb(var(--lighting-rgb) / 0);
  }
}

/* Reduced motion / motion off: quiet stationary static rim for remaining lifetime, no animated fade/loop */
html[data-motion="off"] .post[data-vote-lighting]::after,
html[data-motion="off"] .reply-row[data-vote-lighting]::after,
.motion-off .post[data-vote-lighting]::after,
.motion-off .reply-row[data-vote-lighting]::after,
.post[data-lighting-motion="reduced"]::after,
.reply-row[data-lighting-motion="reduced"]::after {
  transition: none !important;
  animation: none !important;
  background-color: transparent !important;
  outline: 1.5px solid rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity))) !important;
  outline-offset: -1px !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .post[data-vote-lighting]::after,
  .reply-row[data-vote-lighting]::after {
    transition: none !important;
    animation: none !important;
    background-color: transparent !important;
    outline: 1.5px solid rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity))) !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
  }
}

/* Successor V2 vote lighting: 3.2s diminishing stationary rim + soft tint.
   Rendered on a dedicated non-interactive <span class="current-ordinary-vote-rim">
   overlay inside stable host element .current-ordinary-vote-host, never on the host
   element itself to preserve item bounce animations (.vote-cue-up/down).
   The span inherits/receives --lighting-intensity, --lighting-rgb, and --lighting-delay;
   no local declaration shadows inherited intensity. Same-causal change alters only
   custom properties on the existing span, preserving animation name and deadline. */
.current-ordinary-vote-host {
  position: relative;
}

.current-ordinary-vote-rim {
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  pointer-events: none;
  --lighting-surface-max: 0.16;
  --lighting-rim-max: 0.9;
  --lighting-halo-max: 0.3;
  outline: 1.5px solid transparent;
  outline-offset: -1px;
  animation: current-ordinary-vote-rim-fade 3200ms linear both;
  animation-delay: var(--lighting-delay, 0ms);
}

.current-ordinary-vote-host[data-current-ordinary-vote-lighting="positive"] > .current-ordinary-vote-rim,
.current-ordinary-vote-rim[data-current-ordinary-vote-lighting="positive"] {
  --lighting-rgb: 166 226 46;
}

.current-ordinary-vote-host[data-current-ordinary-vote-lighting="negative"] > .current-ordinary-vote-rim,
.current-ordinary-vote-rim[data-current-ordinary-vote-lighting="negative"] {
  --lighting-rgb: 255 107 74;
}

@keyframes current-ordinary-vote-rim-fade {
  0% {
    background-color: rgb(var(--lighting-rgb) / 0);
    outline-color: rgb(var(--lighting-rgb) / 0);
    box-shadow: inset 0 0 0 rgb(var(--lighting-rgb) / 0);
  }
  7% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity)));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity)));
    box-shadow: inset 0 0 18px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity)));
  }
  20% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity) * 0.8));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity) * 0.8));
    box-shadow: inset 0 0 14px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity) * 0.75));
  }
  55% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity) * 0.3));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity) * 0.3));
    box-shadow: inset 0 0 7px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity) * 0.25));
  }
  85% {
    background-color: rgb(var(--lighting-rgb) / calc(var(--lighting-surface-max) * var(--lighting-intensity) * 0.05));
    outline-color: rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity) * 0.05));
    box-shadow: inset 0 0 2px rgb(var(--lighting-rgb) / calc(var(--lighting-halo-max) * var(--lighting-intensity) * 0.03));
  }
  100% {
    background-color: rgb(var(--lighting-rgb) / 0);
    outline-color: rgb(var(--lighting-rgb) / 0);
    box-shadow: inset 0 0 0 rgb(var(--lighting-rgb) / 0);
  }
}

/* Reduced motion / motion off: quiet stationary static rim for remaining lifetime, no animated fade/loop */
html[data-motion="off"] .current-ordinary-vote-rim,
.motion-off .current-ordinary-vote-rim,
.current-ordinary-vote-host[data-lighting-motion="reduced"] > .current-ordinary-vote-rim,
.current-ordinary-vote-rim[data-lighting-motion="reduced"] {
  transition: none !important;
  animation: none !important;
  background-color: transparent !important;
  outline: 1.5px solid rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity))) !important;
  outline-offset: -1px !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .current-ordinary-vote-rim {
    transition: none !important;
    animation: none !important;
    background-color: transparent !important;
    outline: 1.5px solid rgb(var(--lighting-rgb) / calc(var(--lighting-rim-max) * var(--lighting-intensity))) !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
  }
}

/* ThresholdFlare finite card effect (R7, binding Fable values): a 4000ms
   chip for both promotion and new-leader (visually distinct by modifier
   class), a 500ms numeral-pop-style label entrance, a 720ms trace and a
   900ms/<=20 spark burst on genuinely fresh attachment only. A mid-lifetime
   catch-up render (--flare-delay already elapsed) never replays
   trace/sparks; the parent only adds .threshold-flare-entering on a fresh
   mount. Reduced motion / motion off keep finite truthful text only. */
.threshold-flare {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.4em;
  padding: 0.05em 0.5em;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  animation: threshold-flare-chip-fade 4000ms linear both;
  animation-delay: var(--flare-delay, 0ms);
}

.threshold-flare-promotion {
  background-color: rgb(166 226 46 / 0.22);
  color: #3f6b12;
  outline: 1px solid rgb(166 226 46 / 0.55);
}

.threshold-flare-new-leader {
  background-color: rgb(255 196 0 / 0.22);
  color: #7a5600;
  outline: 1px solid rgb(255 196 0 / 0.6);
}

.threshold-flare-label {
  position: relative;
  z-index: 1;
}

.threshold-flare-entering .threshold-flare-label {
  animation: threshold-flare-numeral-pop 500ms ease-out both;
}

.threshold-flare-trace {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  outline: 1.5px solid currentColor;
  opacity: 0;
  animation: threshold-flare-trace 720ms ease-out both;
}

.threshold-flare-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.threshold-flare-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  animation: threshold-flare-spark 900ms ease-out both;
  animation-delay: calc(var(--spark-index, 0) * 6ms);
  transform: rotate(calc(var(--spark-index, 0) * 30deg)) translateX(0);
}

@keyframes threshold-flare-chip-fade {
  0% { opacity: 0; transform: translateY(1px); }
  8% { opacity: 1; transform: translateY(0); }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes threshold-flare-numeral-pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes threshold-flare-trace {
  0% { opacity: 0.9; outline-offset: -1px; }
  100% { opacity: 0; outline-offset: 6px; }
}

@keyframes threshold-flare-spark {
  0% { opacity: 1; transform: rotate(calc(var(--spark-index, 0) * 30deg)) translateX(0) scale(1); }
  100% { opacity: 0; transform: rotate(calc(var(--spark-index, 0) * 30deg)) translateX(16px) scale(0.4); }
}

/* Reduced motion / motion off: finite truthful text only, no entrance. */
html[data-motion="off"] .threshold-flare,
.motion-off .threshold-flare,
.threshold-flare-reduced {
  animation: none !important;
}
html[data-motion="off"] .threshold-flare-label,
.motion-off .threshold-flare-label,
.threshold-flare-reduced .threshold-flare-label {
  animation: none !important;
}
html[data-motion="off"] .threshold-flare-trace,
html[data-motion="off"] .threshold-flare-spark,
.motion-off .threshold-flare-trace,
.motion-off .threshold-flare-spark,
.threshold-flare-reduced .threshold-flare-trace,
.threshold-flare-reduced .threshold-flare-spark {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .threshold-flare,
  .threshold-flare-label {
    animation: none !important;
  }
  .threshold-flare-trace,
  .threshold-flare-spark {
    display: none !important;
  }
}


.message-area { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 0; cursor: pointer; }
.message-area:hover .post-text { color: #fff; }
.post-content { min-width: 0; padding-top: 6px; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; font-size: 12px; line-height: 18px; color: var(--dim); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.rank { font-weight: 700; color: #b9c6cd; letter-spacing: .02em; }
.fresh-post .time { color: #9fcde6; }
.time-suffix { font-size: 0.85em; }
.swipe-vote-surface {
  touch-action: pan-y pinch-zoom;
}
.post-text.MuiTypography-root { font-size: 16px; line-height: 1.48; letter-spacing: -.004em; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.leading-post .rank { color: var(--lime); font-size: 14px; }
.leading-post .post-text.MuiTypography-root { font-size: 18px; line-height: 1.42; letter-spacing: -.012em; font-weight: 500; color: #f4f8f9; }
.clamped { display: -webkit-box; -webkit-line-clamp: var(--preview-lines, 3); line-clamp: var(--preview-lines, 3); -webkit-box-orient: vertical; overflow: hidden; }

.metadata { display: flex; align-items: center; flex-wrap: wrap; column-gap: 16px; min-height: 44px; font-size: 12px; color: var(--dim); }
.post-actions { column-gap: 20px; margin-left: -2px; }
.text-action.MuiButton-root { min-width: 0; min-height: 44px; padding: 0 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.text-action.MuiButton-root:hover { background: transparent; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.disclosure.MuiButton-root { color: var(--cyan); }
.disclosure-mark { display: inline-block; font-size: 20px; line-height: 1; margin-right: 7px; transition: transform var(--settle) var(--e-std); }
.disclosure-mark.open { transform: rotate(90deg); }

.vote-rail { width: 44px; display: flex; flex-direction: column; align-items: center; align-self: start; }
.vote.MuiIconButton-root { width: 44px; height: 44px; border-radius: 8px; color: #8a9ba5; transition: color var(--settle) var(--e-std), background-color var(--settle) var(--e-std); }
.vote.MuiIconButton-root svg { width: 22px; height: 22px; }
.vote.MuiIconButton-root:hover { color: var(--text); background: rgba(255,255,255,.06); }
.vote.MuiIconButton-root[aria-disabled="true"] { color: #4f5f68; background: transparent; cursor: default; }
.vote.up.selected.MuiIconButton-root[aria-disabled="true"] { color: var(--lime); background: rgba(166,226,46,.13); }
.vote.down.selected.MuiIconButton-root[aria-disabled="true"] { color: var(--cyan); background: rgba(122,210,255,.13); }
.vote.pending.MuiIconButton-root { outline: 1.5px dashed var(--dim); outline-offset: -2px; color: var(--text); cursor: wait; }
.vote.pending.up.MuiIconButton-root { outline-color: var(--lime); color: var(--lime); }
.vote.pending.down.MuiIconButton-root { outline-color: var(--cyan); color: var(--cyan); }
.vote-state { font-size: 10px; line-height: 14px; color: var(--muted); }
.vote-rail:has(.vote-snap-up, .vote-snap-down) .vote-state { animation: vote-state-in var(--settle) var(--e-std); }

/* Admin special votes: separate native controls, never widening the
   44px ordinary vote-rail column so narrow (375px) viewports never gain
   horizontal overflow. */
.admin-vote-rail { width: 44px; display: flex; flex-direction: column; align-items: center; align-self: start; margin-top: 6px; row-gap: 2px; }
.admin-vote.MuiIconButton-root { width: 44px; height: 32px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #8a9ba5; background: transparent; }
.admin-vote.MuiIconButton-root:hover { color: var(--text); background: rgba(255,255,255,.06); }
.admin-vote.MuiIconButton-root[aria-disabled="true"] { color: #4f5f68; cursor: wait; outline: 1.5px dashed var(--dim); outline-offset: -2px; }
.admin-vote.up.MuiIconButton-root { color: var(--lime); }
.admin-vote.down.MuiIconButton-root { color: var(--cyan); }
.admin-vote-status { display: block; max-width: 44px; font-size: 9.5px; line-height: 12px; color: var(--muted); overflow-wrap: break-word; text-align: center; }
.admin-vote-counts { font-size: 11px; line-height: 14px; color: var(--muted); }
.admin-vote-controls { display: flex; align-items: center; column-gap: 8px; flex-wrap: wrap; }

/* Directional arrow snap/spring on first vote */
.vote.vote-snap-up { animation: arrow-snap-up var(--spring-t) var(--spring); }
.vote.vote-snap-down { animation: arrow-snap-down var(--spring-t) var(--spring); }

@keyframes arrow-snap-up {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-4px) scale(1.18); }
  70% { transform: translateY(1px) scale(0.97); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes arrow-snap-down {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(4px) scale(1.18); }
  70% { transform: translateY(-1px) scale(0.97); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes vote-state-in {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Thread: inline under the parent text, hairline cyan rule */
.thread { margin: 0 0 10px 6px; padding-left: 10px; border-left: 1px solid rgba(122,210,255,.3); }
.thread.thread-entering { animation: thread-enter var(--settle) var(--e-enter); }
@keyframes thread-enter {
  0% { opacity: 0.5; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.reply-row { list-style: none; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding-top: 10px; }
.reply-row + .reply-row { border-top: 1px solid var(--line); }
.reply-content { min-width: 0; }
.reply-text.MuiTypography-root { font-size: 15px; line-height: 1.52; color: #cdd8de; overflow-wrap: anywhere; }
.reply-composer { display: flex; align-items: flex-end; gap: 10px; margin-top: 6px; border-bottom: 1px solid rgba(255,255,255,.2); }
.reply-composer:has(textarea:focus) { border-bottom-color: var(--cyan); box-shadow: 0 1px 0 var(--cyan); animation: reply-line-shimmer 500ms var(--e-std) forwards; }
@keyframes reply-line-shimmer {
  0% { border-bottom-color: var(--cyan); box-shadow: 0 1px 0 var(--cyan), 0 2px 0 0 rgba(122,210,255,0); }
  35% { border-bottom-color: #dff6ff; box-shadow: 0 1px 0 #dff6ff, 0 2px 8px 1px rgba(122,210,255,0.5); }
  100% { border-bottom-color: var(--cyan); box-shadow: 0 1px 0 var(--cyan), 0 2px 0 0 rgba(122,210,255,0); }
}
.reply-list { margin: 0; padding: 0; list-style: none; }
.reported-tag { color: var(--muted); }
.yours-cue { color: var(--cyan); }
.reply-composer .MuiInputBase-root { flex: 1; min-width: 0; padding: 10px 0; font-size: 16px; color: var(--text); }
.reply-composer textarea::placeholder { color: #8d9ea8; opacity: 1; }
.reply-send.MuiButton-root { min-width: 64px; min-height: 44px; font-size: 14px; font-weight: 600; }
.reply-send.Mui-disabled { color: #8fb3c6 !important; }

.concealed { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; min-height: 52px; }
.concealed p { font-size: 16px; font-style: italic; color: var(--muted); }
.concealed p.warning-body { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.concealed strong { font-style: normal; color: var(--text); font-weight: 600; }
.reveal-action.MuiButton-root { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* Report Veil: neutral bounded decorative paint on replacement warning or revealed text */
.concealed[data-veil-cue="conceal"] {
  outline: 1.5px solid rgba(255, 107, 74, 0.55);
  outline-offset: 2px;
  background-color: rgba(255, 107, 74, 0.08);
  border-radius: 4px;
  animation: veil-conceal-settle var(--veil-duration, 200ms) var(--e-std) both;
  animation-delay: var(--veil-delay, 0ms);
}

/* Background-only: this is also the item's existing focus target
   ([tabindex="-1"]:focus-visible, line 14) once revealed, and an outline
   here would collide with — and, at equal selector specificity plus later
   source order, defeat — that focus ring. */
.swipe-vote-surface[data-veil-cue="reveal"] {
  border-radius: 4px;
  background-color: rgba(122, 210, 255, 0.06);
  animation: veil-reveal-settle var(--veil-duration, 260ms) var(--e-std) both;
  animation-delay: var(--veil-delay, 0ms);
}

@keyframes veil-conceal-settle {
  0% {
    outline-color: rgba(255, 107, 74, 0.55);
    background-color: rgba(255, 107, 74, 0.08);
  }
  100% {
    outline-color: transparent;
    background-color: transparent;
  }
}

@keyframes veil-reveal-settle {
  0% {
    background-color: rgba(122, 210, 255, 0.06);
  }
  100% {
    background-color: transparent;
  }
}

/* Reduced motion / motion off: pure static state swap, no animated paint.
   No outline:none here: the reveal rule above never sets an outline (so
   there is nothing to clear on the item's own focus-visible target), and
   forcing outline:none on *any* element carrying data-veil-cue would risk
   erasing an unrelated focus-visible ring if this ever matched a focused
   node. The conceal rule's outline (above) targets only the non-focusable
   warning Box and is unaffected by omitting outline here. */
html[data-motion="off"] [data-veil-cue],
.motion-off [data-veil-cue],
[data-veil-cue="static"] {
  animation: none !important;
  background-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-veil-cue] {
    animation: none !important;
    background-color: transparent !important;
  }
}

.board-footnote.MuiTypography-root { margin-top: 26px; text-align: center; font-size: 12px; color: var(--dim); }
.empty-board { padding: 90px 0 110px; text-align: center; }
.empty-board h1 { font-size: 26px; font-weight: 500; margin-bottom: 10px; color: var(--text); }
.empty-board p { color: var(--muted); }

/* Fixed bottom module: rating/credits bar above message text box at desktop and phone */
.compose-dock { position: fixed; left: 0; right: 0; bottom: var(--kb-offset, 0px); z-index: 10; background: linear-gradient(180deg, rgba(16,24,29,.94), var(--night) 30%); border-top: 1px solid var(--rail-line); box-shadow: 0 -10px 28px rgba(0,0,0,.35); }
.dock-inner { max-width: calc(var(--contentw) + 44px); margin: 0 auto; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 7px; }
/* Real rate/credit copy on the left; the real tally becomes a compact credit pill on the right. */
.creditbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 0 4px; }
.tally { order: 2; display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 4px 9px; border-radius: 999px; background: rgba(166,226,46,.1); border: 1px solid rgba(166,226,46,.3); }
.tally i { display: block; width: 6px; height: 12px; border: 1.5px solid var(--lime); border-radius: 2px; }
.tally i.full { background: var(--lime); }
.credit-copy { flex: 1 1 auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; min-width: 0; }
.credit-primary { font-size: 13px; line-height: 1.35; color: var(--text); }
.credit-primary strong { color: var(--lime); font-weight: 700; }
.credit-primary .timer { font-variant-numeric: tabular-nums; }
/* Connected prototype notice and session banner */
.connected-notice { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--cyan); }
.session-banner { margin: 12px 0; padding: 10px 14px; background: rgba(26,36,43,.9); border: 1px solid rgba(122,210,255,.25); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--text); }
.session-banner.expired { border-color: rgba(255,123,114,.4); background: rgba(43,26,26,.9); }
.start-session-btn.MuiButton-root { background: var(--lime); color: #11180a; font-weight: 700; font-size: 13px; padding: 4px 14px; min-height: 36px; border-radius: 6px; }
.start-session-btn.MuiButton-root:hover { background: #bbf045; }
.session-status-copy { display: flex; flex-direction: column; gap: 2px; }
.session-status-copy strong { color: var(--text); }
.session-status-copy span { color: var(--muted); font-size: 12px; }

/* Own saved receipts */
.saved-receipts-section { margin: 18px 0 24px; padding: 14px 16px; background: rgba(17,24,29,.75); border: 1px solid rgba(122,210,255,.25); border-radius: 6px; }
.saved-receipts-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.saved-receipts-list { margin: 0; padding: 0; list-style: none; }
.saved-receipt { padding: 10px 0; border-top: 1px solid var(--line); }
.saved-receipt:first-of-type { border-top: 0; }
.receipt-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lime); background: rgba(166,226,46,.13); padding: 2px 7px; border-radius: 4px; display: inline-block; margin-bottom: 6px; }
.receipt-meta { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.receipt-text.MuiTypography-root { font-size: 17px; line-height: 1.48; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.receipt-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 12px; }
.withdraw-button.MuiButton-root { min-height: 32px; padding: 0 10px; font-size: 12px; color: #ff7b72; border: 1px solid rgba(255,123,114,.35); border-radius: 4px; }
.withdraw-button.MuiButton-root:hover { background: rgba(255,123,114,.1); border-color: #ff7b72; }
.withdrawn-badge { font-size: 12px; color: #ff7b72; font-style: italic; }
.withdrawal-expired { font-size: 12px; color: var(--dim); }
.own-receipt-row { grid-template-columns: minmax(0, 1fr); border-left: 2px solid var(--lime); padding-left: 10px; margin-top: 8px; }

/* Errors and retry controls */
.compose-column { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; flex: 1; }
.command-error-banner { padding: 6px 10px; background: rgba(43,20,20,.9); border-left: 3px solid #ff7b72; color: #ffdcd7; font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 4px; }
.command-error-banner .retry-btn.MuiButton-root { color: var(--cyan); min-height: 28px; padding: 0 4px; font-size: 12px; font-weight: 600; }
.command-error-banner .discard-btn.MuiButton-root { color: #ff7b72; min-height: 28px; padding: 0 4px; font-size: 12px; font-weight: 600; }
.command-error-banner .discard-btn.MuiButton-root:hover { background: rgba(255,123,114,.1); }
.reply-error { margin-top: 6px; padding: 4px 8px; font-size: 12px; color: #ff7b72; background: rgba(43,20,20,.6); border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.credit-secondary { font-size: 12px; line-height: 1.4; color: var(--muted); }
/* Integrated rounded composer pill: paperclip, message input, SEND */
.compose-field { position: relative; display: flex; align-items: flex-end; gap: 6px; min-width: 0; width: 100%; padding: 4px; background: var(--ink); border: 1px solid var(--rail-line-strong); border-radius: 24px;
  transition: border-color var(--settle) var(--e-std), box-shadow var(--settle) var(--e-std); }
.compose-field .MuiInputBase-root {
  flex: 1; min-width: 0; min-height: 44px; padding: 12px 4px; font-size: 16px; line-height: 20px;
  color: var(--text); background: transparent; border: 0; border-radius: 0;
}
.compose-field > label + .MuiInputBase-root { padding-left: 14px; }
.compose-field .MuiInputBase-root textarea {
  min-width: 0;
}
.compose-field::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
}
.compose-field:focus-within { border-color: rgba(122,210,255,.55); box-shadow: 0 0 0 3px rgba(122,210,255,.08); }
.compose-field:has(.MuiInputBase-root.Mui-focused) {
  border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan);
  animation: composer-shimmer 600ms var(--e-std) forwards;
}
.compose-field:has(.MuiInputBase-root.Mui-focused)::after {
  animation: composer-border-glint 600ms var(--e-std) forwards;
}

@keyframes composer-shimmer {
  0% { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 0 0 rgba(122,210,255,0); }
  30% { border-color: #dff6ff; box-shadow: 0 0 0 1.5px #dff6ff, 0 0 16px 2px rgba(122,210,255,0.45); }
  65% { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 8px 1px rgba(122,210,255,0.2); }
  100% { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 0 0 rgba(122,210,255,0); }
}

@keyframes composer-border-glint {
  0% { opacity: 0; box-shadow: inset 0 0 0 1px rgba(223, 246, 255, 0); }
  30% { opacity: 1; box-shadow: inset 0 0 0 1.5px rgba(223, 246, 255, 0.85), 0 0 12px rgba(122, 210, 255, 0.35); }
  100% { opacity: 0; box-shadow: inset 0 0 0 1px rgba(223, 246, 255, 0); }
}
.compose-field textarea::placeholder { color: #93a4ae; opacity: 1; }
.send-button.MuiButton-root { flex: none; min-width: 84px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--lime); color: #11200a; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.send-button.MuiButton-root:hover { background: #bbf045; }
.send-button.Mui-disabled { color: #a3b88a !important; background: #2a3a1c !important; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Desktop Lantern Rail (>=600px): logo beside tagline, full How it works,
   860px canvas with 720px card/dock content, 10px section rhythm. */
@media (min-width: 600px) {
  .masthead-inner { padding: 10px 22px; gap: 14px; }
  .masthead::after { left: 22px; right: 22px; }
  .masthead-brand { flex-direction: row; align-items: center; gap: 14px; }
  .brand { width: 172px; padding-block: 4px; }
  .say.MuiTypography-root { margin: 0; padding-left: 14px; border-left: 1px solid var(--rail-line-strong); font-size: 15px; line-height: 20px; }
  .masthead-actions { gap: 8px; }
  .guide-toggle.MuiButton-root { width: auto; padding: 0 14px; }
  .guide-q { display: none; }
  .guide-label, .guide-chev { display: inline-block; }
  .board { padding: 10px max(22px, calc((min(100%, var(--maxw)) - var(--contentw)) / 2)) calc(var(--dock-h, 130px) + 28px); }
  .section-label { margin-bottom: 10px; }
  .ranked-label { margin-top: 0; }
  .post { margin-bottom: 10px; padding: 8px 12px 2px 4px; }
  .message-area { column-gap: 10px; }
  .post-text.MuiTypography-root { font-size: 17px; }
  .leading-post .post-text.MuiTypography-root { font-size: 20px; }
  .thread { margin-left: 54px; padding-left: 12px; }
  .reply-text.MuiTypography-root { font-size: 15.5px; }
  .dock-inner { padding: 10px 22px calc(12px + env(safe-area-inset-bottom)); }
  .credit-primary { font-size: 13.5px; }
}
@media (max-width: 720px) {
  .masthead, .board { border-inline: 0; }
  .post-actions { column-gap: 16px; }
  .empty-board { padding: 64px 0 80px; }
  .empty-board h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after,
.motion-off *,
.motion-off *::before,
.motion-off *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
/* Connected failures retain their action and exact retry beside the control. */
.vote-error { align-self: stretch; font-size: 10.5px; line-height: 1.35; color: #ff7b72; max-width: 44px; text-align: center; overflow-wrap: anywhere; }
.vote-error .MuiButton-root { font-size: 11px; line-height: 1.3; min-width: 0; padding: 4px 0; }
.command-error-banner .MuiButton-root { flex-shrink: 0; }
@media (max-width: 480px) { .command-error-banner { flex-wrap: wrap; } }

/* Keep keyboard focus on guarded refresh controls while a read is pending. */
.text-action[aria-disabled="true"] { opacity: .45; cursor: default; }

/* Categorized report dialog native controls */
.report-form-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.report-field-label { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 4px; }
.required-mark { color: #ff7b72; font-weight: 700; }
.optional-mark { font-weight: 400; color: var(--dim); font-size: 12px; }
.report-native-select {
  width: 100%; min-height: 44px; padding: 10px 12px; font-size: 14.5px; line-height: 1.4;
  color: var(--text); background: #0b1014; border: 1px solid #34444e; border-radius: 6px;
  cursor: pointer; transition: border-color var(--settle) var(--e-std);
}
.report-native-select:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 2px; border-color: var(--lime);
}
.report-native-select:disabled {
  opacity: .5; cursor: not-allowed;
}
.report-native-textarea {
  width: 100%; min-height: 72px; padding: 10px 12px; font-size: 14px; line-height: 1.45;
  color: var(--text); background: #0b1014; border: 1px solid #34444e; border-radius: 6px;
  resize: vertical; transition: border-color var(--settle) var(--e-std);
}
.report-native-textarea:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 2px; border-color: var(--lime);
}
.report-native-textarea:disabled {
  opacity: .5; cursor: not-allowed;
}
.report-native-textarea::placeholder {
  color: #7f909a; opacity: 1;
}
.report-field-meta {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.report-field-help {
  font-size: 11.5px; color: var(--dim);
}
.report-char-counter {
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--dim); margin-left: auto;
}
.report-char-counter.limit-exceeded {
  color: #ff7b72; font-weight: 700;
}

/* Media display: subordinate to text, separate from swipe-vote surface */
.post-media {
  margin: 10px 0 6px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.post-media.collapsed {
  max-width: 480px;
}
.post-media.expanded {
  max-width: 100%;
}
.post-media-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.2);
}
.thumbnail-media {
  max-height: 320px;
}
.expanded-media {
  max-height: 75vh;
}

/* Multi-image profile: an ordered vertical stack below the text, never a
   gallery/carousel. Each entry is independently collapsed-thumbnail/open-full. */
.post-media-multi {
  margin: 10px 0 6px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.post-media-item {
  display: block;
}
.post-media-item.collapsed {
  max-width: 480px;
}
.post-media-item.expanded {
  max-width: 100%;
}
.post-media-item-toggle {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}

/* Media attachments: previews above, icon-only attach in compose row */
.media-picker-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.media-picker-slot:not(:has(.media-preview-pill)) {
  display: contents;
}
.media-attach-btn.MuiButton-root {
  flex: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  color: #8fa3ad;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--settle) var(--e-std), border-color var(--settle) var(--e-std), background-color var(--settle) var(--e-std);
}
.media-attach-btn.MuiButton-root:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(122, 210, 255, 0.08);
}
.media-attach-btn.MuiButton-root:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: #26333b;
  color: #586974;
  background: transparent;
}
.media-attach-btn svg,
.media-attach-icon {
  width: 22px;
  height: 22px;
  display: block;
}
.media-picker-guidance {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.media-preview-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(26, 36, 43, 0.9);
  border: 1px solid #34444e;
  border-radius: 12px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  height: 50px;
}
.media-preview-thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.media-filename {
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.media-remove-btn {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}
.media-remove-btn:hover {
  color: #ff7b72;
}

/* Multi-image draft list: the composer's own ordered pill list wraps onto
   additional rows rather than compressing into one unreadable row. */
.media-multi-picker-slot {
  flex-wrap: wrap;
}
.media-multi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.media-multi-list .media-preview-pill {
  max-width: 220px;
}

@media (max-width: 720px) {
  .media-attach-btn.MuiButton-root { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .media-preview-pill { height: 48px; max-width: none; }
  .media-preview-thumb { width: 34px; height: 34px; }
  .thumbnail-media { max-height: 240px; }
  .media-multi-list .media-preview-pill { max-width: none; flex: 1 1 100%; }
}

/* Dock Outcome Cues: Landing (post-accepted), Bounce (post-refused), Ready Once (cooldown-ready) */
.dock-outcome-layer {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

/* Landing (post-accepted): lime sparks + settle glow */
.dock-outcome-post-accepted .dock-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.dock-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0;
  pointer-events: none;
}
.dock-spark.spark-1 { top: -4px; left: 20%; animation: dock-spark-up-left var(--dock-outcome-duration) var(--e-std) forwards; }
.dock-spark.spark-2 { top: -6px; left: 50%; animation: dock-spark-up var(--dock-outcome-duration) var(--e-std) forwards; }
.dock-spark.spark-3 { top: -4px; left: 80%; animation: dock-spark-up-right var(--dock-outcome-duration) var(--e-std) forwards; }
.dock-spark.spark-4 { bottom: -4px; left: 25%; animation: dock-spark-down-left var(--dock-outcome-duration) var(--e-std) forwards; }
.dock-spark.spark-5 { bottom: -6px; left: 50%; animation: dock-spark-down var(--dock-outcome-duration) var(--e-std) forwards; }
.dock-spark.spark-6 { bottom: -4px; left: 75%; animation: dock-spark-down-right var(--dock-outcome-duration) var(--e-std) forwards; }

@keyframes dock-spark-up-left {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-8px, -12px) scale(0); opacity: 0; }
}
@keyframes dock-spark-up {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(0, -14px) scale(0); opacity: 0; }
}
@keyframes dock-spark-up-right {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(8px, -12px) scale(0); opacity: 0; }
}
@keyframes dock-spark-down-left {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-6px, 10px) scale(0); opacity: 0; }
}
@keyframes dock-spark-down {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(0, 12px) scale(0); opacity: 0; }
}
@keyframes dock-spark-down-right {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(6px, 10px) scale(0); opacity: 0; }
}

.dock-outcome-layer.dock-outcome-post-accepted:not(.dock-outcome-static) {
  box-shadow: 0 0 12px rgba(182, 255, 100, 0.6), inset 0 0 0 1.5px var(--lime);
  animation: dock-settle-glow var(--dock-outcome-duration) var(--e-std) forwards;
  animation-delay: var(--dock-outcome-delay, 0ms);
}
@keyframes dock-settle-glow {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Bounce (post-refused): orange edge echo / shake */
.dock-outcome-post-refused:not(.dock-outcome-static) .dock-bounce-echo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px #f0883e, 0 0 8px rgba(240, 136, 62, 0.5);
  animation: dock-edge-shake var(--dock-outcome-duration) var(--e-std) forwards;
}
@keyframes dock-edge-shake {
  0% { transform: translateX(0); opacity: 1; }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); opacity: 0; }
}

/* Ready Once (cooldown-ready): lime finite rim */
.dock-outcome-cooldown-ready:not(.dock-outcome-static) .dock-ready-rim {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--lime), 0 0 12px rgba(182, 255, 100, 0.4);
  animation: dock-rim-fade var(--dock-outcome-duration) var(--e-std) forwards;
}
@keyframes dock-rim-fade {
  0% { opacity: 0.3; transform: scale(0.98); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Reduced motion / static: calm finite decorations, NO transforms, NO animations, NO particles */
.dock-outcome-layer.dock-outcome-static,
html[data-motion="off"] .dock-outcome-layer,
.motion-off .dock-outcome-layer {
  animation: none !important;
  transition: none !important;
}
.dock-outcome-layer.dock-outcome-static .dock-sparks,
html[data-motion="off"] .dock-outcome-layer .dock-sparks,
.motion-off .dock-outcome-layer .dock-sparks,
.dock-outcome-layer.dock-outcome-static .dock-bounce-echo,
html[data-motion="off"] .dock-outcome-layer .dock-bounce-echo,
.motion-off .dock-outcome-layer .dock-bounce-echo,
.dock-outcome-layer.dock-outcome-static .dock-ready-rim,
html[data-motion="off"] .dock-outcome-layer .dock-ready-rim,
.motion-off .dock-outcome-layer .dock-ready-rim {
  display: none !important;
}
.dock-outcome-layer.dock-outcome-static.dock-outcome-post-accepted,
html[data-motion="off"] .dock-outcome-layer.dock-outcome-post-accepted,
.motion-off .dock-outcome-layer.dock-outcome-post-accepted {
  box-shadow: inset 0 0 0 1.5px var(--lime);
  opacity: 0.85;
}
.dock-outcome-layer.dock-outcome-static.dock-outcome-post-refused,
html[data-motion="off"] .dock-outcome-layer.dock-outcome-post-refused,
.motion-off .dock-outcome-layer.dock-outcome-post-refused {
  box-shadow: inset 0 0 0 1.5px #f0883e;
  opacity: 0.85;
}
.dock-outcome-layer.dock-outcome-static.dock-outcome-cooldown-ready,
html[data-motion="off"] .dock-outcome-layer.dock-outcome-cooldown-ready,
.motion-off .dock-outcome-layer.dock-outcome-cooldown-ready {
  box-shadow: inset 0 0 0 1.5px var(--lime);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .dock-outcome-layer, .dock-outcome-layer * { animation: none !important; transform: none !important; transition: none !important; }
  .dock-outcome-layer .dock-sparks, .dock-outcome-layer .dock-bounce-echo, .dock-outcome-layer .dock-ready-rim { display: none !important; }
  .dock-outcome-layer { box-shadow: inset 0 0 0 1.5px var(--lime); opacity: .85; }
  .dock-outcome-layer.dock-outcome-post-refused { box-shadow: inset 0 0 0 1.5px #f0883e; }
}

.dock-outcome-layer:not(.dock-outcome-static),
.dock-outcome-layer:not(.dock-outcome-static) .dock-spark,
.dock-outcome-layer:not(.dock-outcome-static) .dock-bounce-echo,
.dock-outcome-layer:not(.dock-outcome-static) .dock-ready-rim {
  animation-delay: var(--dock-outcome-delay, 0ms);
}

/* One private credit episode; viewport-space host is an App sibling of Dock. */
.credit-spark-host { position: fixed; inset: 0; z-index: 11; pointer-events: none; visibility: hidden; }
.credit-spark-mark { position: absolute; left: var(--credit-start-x); top: var(--credit-start-y); width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--lime); animation: credit-spark-flight 480ms var(--e-std) both; animation-delay: var(--credit-delay, 0ms); }
.credit-spark-confirmation { position: absolute; left: var(--credit-target-x); top: var(--credit-target-y); width: var(--credit-target-width); height: var(--credit-target-height); border-radius: 3px; outline: 1px solid var(--lime); opacity: 0; animation: credit-spark-confirm 700ms linear both; animation-delay: var(--credit-delay, 0ms); }
@keyframes credit-spark-flight { 0% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(var(--credit-mid-x), var(--credit-mid-y)); opacity: 1; } 100% { transform: translate(var(--credit-end-x), var(--credit-end-y)); opacity: 0; } }
@keyframes credit-spark-confirm { 0%, 68% { opacity: 0; } 69%, 100% { opacity: .65; } }
.credit-spark-static .credit-spark-mark { display: none; }
.credit-spark-static .credit-spark-confirmation { animation: none; opacity: .65; }
html[data-motion="off"] .credit-spark-host *, .motion-off .credit-spark-host * { animation: none !important; transform: none !important; }
html[data-motion="off"] .credit-spark-mark, .motion-off .credit-spark-mark { display: none; }
html[data-motion="off"] .credit-spark-confirmation, .motion-off .credit-spark-confirmation { opacity: .65; }
@media (prefers-reduced-motion: reduce) { .credit-spark-host * { animation: none !important; transform: none !important; } .credit-spark-mark { display: none; } .credit-spark-confirmation { opacity: .65; } }

/* Local owner-requested background preview options. */
/* #root establishes its own stacking context (without a transform, so the
   fixed SEND/Spark affordances keep the viewport as their containing
   block) so the backdrop's negative z-index only reaches behind #root's
   own children instead of the unlayered root stacking context, where it
   would otherwise cover the unpositioned header/board. */
#root {
  position: relative;
  isolation: isolate;
}

/* Fixed, non-interactive decorative backdrop. Sits behind all app content
   within #root's isolated stacking context so it never competes with or
   shifts the fixed SEND/Spark affordances above it. */
.bg-preview {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: #0b0e11;
}

.bg-preview-layer {
  position: absolute;
  inset: -20%;
  opacity: 0;
  background-repeat: no-repeat;
}

.bg-preview-layer-a {
  background-image:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(122, 210, 255, 0.20), transparent 70%),
    radial-gradient(ellipse 50% 35% at 75% 60%, rgba(122, 210, 255, 0.14), transparent 70%);
}

.bg-preview-layer-b {
  background-image:
    radial-gradient(ellipse 45% 30% at 60% 20%, rgba(166, 226, 46, 0.10), transparent 70%),
    radial-gradient(ellipse 55% 40% at 30% 80%, rgba(122, 210, 255, 0.12), transparent 70%);
}

.bg-preview-style-glow .bg-preview-layer-a { filter: blur(2px); opacity: 1; animation: bg-preview-drift-a 20s ease-in-out infinite alternate; }
.bg-preview-style-glow .bg-preview-layer-b { filter: blur(1px); opacity: 1; mix-blend-mode: screen; animation: bg-preview-drift-b 20s ease-in-out infinite alternate; }

.bg-preview[data-bg-hidden] .bg-preview-layer {
  animation-play-state: paused;
}

.bg-preview-motion-off .bg-preview-layer {
  animation: none;
}

@keyframes bg-preview-drift-a {
  from { transform: translate(-2%, -1%) scale(1); }
  to { transform: translate(2%, 1.5%) scale(1.04); }
}

@keyframes bg-preview-drift-b {
  from { transform: translate(1.5%, 1%) scale(1.03); }
  to { transform: translate(-1.5%, -1.5%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-preview-layer { animation: none !important; }
}

/* Retire only the noninteractive warning rim, preserving text focus outlines. */
html[data-motion="off"] .concealed[data-veil-cue="conceal"],
.motion-off .concealed[data-veil-cue="conceal"] { outline: none !important; }
@media (prefers-reduced-motion: reduce) {
  .concealed[data-veil-cue="conceal"] { outline: none !important; }
}

/* Static informational legal pages */
.legal-page {
  padding-bottom: 40px;
}
.legal-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 12px 0 8px;
}
.legal-title:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.legal-back-link {
  display: inline-block;
  color: var(--cyan);
  text-decoration: none;
  font-size: 13.5px;
  margin-bottom: 12px;
}
.legal-back-link:hover {
  text-decoration: underline;
  color: #fff;
}
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 14px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.legal-nav-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color var(--snap) var(--e-std), background-color var(--snap) var(--e-std);
}
.legal-nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.05);
}
.legal-nav-link.active,
.legal-nav-link[aria-current="page"] {
  color: var(--cyan);
  background-color: rgba(122, 210, 255, 0.12);
  font-weight: 600;
}
.legal-draft-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 20px;
  background-color: rgba(122, 210, 255, 0.08);
  border: 1px solid rgba(122, 210, 255, 0.25);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #c3ced4;
}
.legal-draft-notice strong {
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.legal-content {
  font-size: 14px;
  line-height: 1.65;
  color: #c3ced4;
}
.legal-section {
  margin-bottom: 24px;
}
.legal-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 8px;
}
.legal-content p {
  margin: 0 0 10px;
}
.legal-content ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.legal-content li + li {
  margin-top: 6px;
}
.legal-content a {
  color: var(--cyan);
  text-decoration: none;
}
.legal-content a:hover {
  text-decoration: underline;
}
.legal-unavailable-view {
  margin: 12px 0;
}
.legal-unavailable-notice {
  padding: 14px 16px;
  margin: 16px 0;
  background-color: rgba(255, 100, 100, 0.08);
  border: 1px solid rgba(255, 100, 100, 0.25);
  border-radius: 6px;
  color: #f0a0a0;
  font-size: 13.5px;
  line-height: 1.5;
}