/* Outlier — deep forest glassmorphism.
   Visual thesis: a field of ordinary posts, and the one that broke away. */

:root {
  --bg-deep:    #050b07;
  --bg-mid:     #08160f;
  --forest-900: #0b1d13;
  --forest-700: #10301f;

  --emerald:        #34d399;
  --emerald-bright: #6ee7b7;
  --emerald-dim:    #10b981;
  --gold:           #d9b45f;
  --ember:          #e07a5f;

  --text:       #eafff3;
  --text-muted: #7fa693;
  --text-faint: #567a67;

  --glass:        rgba(16, 40, 27, 0.42);
  --glass-solid:  rgba(11, 29, 19, 0.88);
  --border:       rgba(110, 231, 183, 0.13);
  --border-lit:   rgba(110, 231, 183, 0.32);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Light through a canopy: warm breaks up top, deeper green pooling toward the
   forest floor where the meadow canvas sits. Drifts like sun through leaves. */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px circle at 18% -8%, rgba(163, 230, 130, 0.07), transparent 62%),
    radial-gradient(620px circle at 82% 6%,  rgba(52, 211, 153, 0.06), transparent 58%),
    radial-gradient(900px circle at 50% 108%, rgba(16, 185, 129, 0.10), transparent 64%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--forest-900) 62%, #071c11 100%);
  animation: canopy 30s ease-in-out infinite alternate;
}
@keyframes canopy {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.92; }
  to   { transform: translate3d(-2.5%, 1%, 0) scale(1.05); opacity: 1; }
}

/* ---------------------------------------------------------------- topbar */

/* Canvas scatter field. Sits above the ambient wash, below all content. */
.field {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.85;
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 30px;
  background: rgba(6, 17, 11, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, var(--forest-700), #06120c);
  border: 1px solid var(--border-lit);
  display: grid; place-items: center;
}
.brand-mark svg { width: 22px; height: 22px; fill: var(--text-faint); }
.brand-mark .mark-outlier {
  fill: var(--emerald-bright);
  animation: markPulse 3s var(--ease) infinite;
}
@keyframes markPulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50%      { opacity: 0.65; transform: translateY(-1.5px); }
}
/* Product name over umbrella brand — the same lockup MacRandle Acres uses, so
   the two read as one family rather than two unrelated tools. */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.2px; }
.brand-parent {
  font-weight: 500; font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 2px;
}
@media (max-width: 620px) { .brand-parent { display: none; } }

.topnav { display: flex; gap: 26px; }
.topnav a {
  position: relative;
  color: var(--text-muted); text-decoration: none;
  font-size: 14px; font-weight: 500; padding: 4px 0;
  transition: color 0.18s var(--ease);
}
.topnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--emerald); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.26s var(--ease);
}
.topnav a:hover { color: var(--text); }
.topnav a:hover::after { transform: scaleX(1); }
.topnav a.active { color: var(--emerald-bright); }
.topnav a.active::after { transform: scaleX(1); }

.topbar-right { display: flex; align-items: center; gap: 12px; }
.version-pill {
  font-size: 11px; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}

/* ---------------------------------------------------------------- layout */

.page {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  padding: 32px 30px 80px;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 10px 34px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.035);
}

h1 { font-size: 27px; margin: 0; letter-spacing: -0.5px; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 650; }
.sub { color: var(--text-muted); font-size: 14px; margin: 6px 0 0; }
.mt { margin-top: 26px; }

.back-link {
  display: inline-block; margin-bottom: 18px;
  color: var(--text-muted); text-decoration: none; font-size: 13.5px;
  transition: color 0.18s var(--ease), transform 0.18s var(--ease);
}
.back-link:hover { color: var(--emerald-bright); transform: translateX(-3px); }

.feed-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--emerald), var(--emerald-dim));
  color: #04150c;
  box-shadow: 0 4px 18px rgba(52,211,153,0.28);
}
.btn-primary:hover { box-shadow: 0 6px 26px rgba(52,211,153,0.44); transform: translateY(-1px); }

.btn-ghost {
  background: rgba(110,231,183,0.06);
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--border-lit); background: rgba(110,231,183,0.11); }
.btn-ghost.danger:hover { border-color: rgba(224,122,95,0.5); color: var(--ember); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter {
  font-size: 12.5px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
  text-decoration: none; transition: all 0.18s var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--border-lit); }
.filter.active {
  background: rgba(52,211,153,0.14); color: var(--emerald-bright);
  border-color: var(--border-lit);
}

/* ---------------------------------------------------------------- reveal */

.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .ambient, .brand-mark .mark-outlier { animation: none; }
  .spotlight::before { transition: none !important; }
}

/* ---------------------------------------------------------------- hover FX */

/* Spotlight — a soft light that tracks the cursor across glass surfaces.
   Pseudo-element so it layers under content without affecting hit-testing. */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(52, 211, 153, 0.13), transparent 62%
  );
  transition: opacity 0.32s var(--ease);
}
.spotlight.fx-on::before { opacity: 1; }


.btn-primary { transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease); }

/* ---------------------------------------------------------------- stats */

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 30px;
}
.stat { padding: 18px 20px; display: flex; flex-direction: column; }
.stat-value {
  font-size: 30px; font-weight: 750; letter-spacing: -1px;
  color: var(--emerald-bright);
  font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: 19px; color: var(--emerald); font-weight: 700; margin-left: 1px; }
.stat-label { font-size: 12.5px; color: var(--text-faint); margin-top: 5px; }

/* ---------------------------------------------------------------- post card */

.post-list { display: flex; flex-direction: column; gap: 14px; }

/* Marks where the ordering stops meaning "beat its baseline by this much" and
   starts meaning "has the most raw engagement" — two different claims, so the
   list says where one ends. */
.list-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 12px 2px 2px; color: var(--text-muted);
  font-size: 12.5px; letter-spacing: 0.02em;
}
.list-divider::before,
.list-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127,166,147,0.28), transparent);
}
.list-divider span { white-space: nowrap; }

/* A post with no baseline behind it. Deliberately quieter than the scored
   badge — it is a raw count, not a judgement. */
.post-badge.is-unscored {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
}
.post-badge.is-unscored .raw-count {
  font-size: 19px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rank-basis, .from-image {
  margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted);
}
.from-image::before { content: "🖼 "; opacity: 0.75; }
.post-body.is-empty { color: var(--text-muted); font-style: italic; }
.stats-unread { color: var(--gold); font-size: 12.5px; }

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 26px; flex-wrap: wrap;
}
.pager-count { color: var(--text-muted); font-size: 13px; }
.pager .is-off { opacity: 0.35; pointer-events: none; }

/* A comment and the post it replied to, linked in both directions. */
.reply-context {
  margin: 0 0 14px; padding: 10px 13px; border-radius: 10px;
  background: rgba(110,231,183,0.05);
  border-left: 2px solid var(--border-lit);
  font-size: 13px;
}
.reply-lab { color: var(--text-muted); margin-right: 6px; }
.reply-link { color: var(--text); text-decoration: none; }
.reply-link:hover { color: var(--emerald-bright); }
.replies { margin-top: 22px; }
.replies-head { font-size: 13.5px; color: var(--text-muted); margin: 0 0 10px; font-weight: 600; }
.replies-note { font-weight: 400; color: var(--text-faint); }
.reply-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reply-list a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 12px; border-radius: 9px; text-decoration: none;
  border: 1px solid var(--border); color: var(--text);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.reply-list a:hover { border-color: var(--border-lit); background: rgba(110,231,183,0.06); }
.reply-count {
  flex: none; min-width: 46px; text-align: right;
  color: var(--emerald-bright); font-weight: 700; font-variant-numeric: tabular-nums;
}
.reply-body { color: var(--text-muted); font-size: 13px; }
.author.is-missing, .detail-author.is-missing {
  color: var(--text-faint); font-style: italic; font-weight: 400;
}
.detail-body.is-empty { color: var(--text-muted); font-style: italic; }

/* A figure the app declines to state, rather than one it estimated. */
.stat-value.stat-none, .s-val.stat-none {
  color: var(--text-muted); opacity: 0.55; font-weight: 500;
}

.post-card {
  display: grid; grid-template-columns: 92px 1fr 44px;
  gap: 18px; align-items: start;
  padding: 20px 22px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.32);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease),
              box-shadow 0.22s var(--ease);
}
.post-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-lit);
  box-shadow: 0 16px 40px rgba(0,0,0,0.42);
}


/* The badge. The ring encodes the same fact as the number — how far past its
   group's median this landed — so magnitude reads before the digits do. */
.post-badge {
  position: relative;
  width: 92px; height: 92px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(6,22,14,0.9), rgba(6,18,12,0.55));
}

.badge-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);          /* start the arc at 12 o'clock */
  overflow: visible;
}
.badge-ring circle {
  fill: none; stroke-width: 3; stroke-linecap: round;
}
.ring-track { stroke: rgba(110,231,183,0.12); }
.ring-fill {
  stroke: var(--emerald);
  /* r=22 -> circumference 138.2. The arc is drawn by shrinking the offset. */
  stroke-dasharray: 138.2;
  stroke-dashoffset: 138.2;
  transition: stroke-dashoffset 1.1s var(--ease), stroke 0.3s var(--ease);
}
.reveal.in .ring-fill { stroke-dashoffset: var(--arc, 138.2); }

.badge-num { display: flex; align-items: baseline; line-height: 1; }
.post-badge .multiple {
  font-size: 24px; font-weight: 780; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.post-badge .times { font-size: 13px; font-weight: 700; opacity: 0.55; margin-left: 1px; }
.badge-label {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-faint); margin-top: 5px; text-align: center;
  line-height: 1.25; max-width: 76px;
}

/* Glow is a property of the score, not just the band. */
.tier-breakout .post-badge { box-shadow: 0 0 34px rgba(52,211,153,0.26); }
.tier-breakout .ring-fill  { stroke: var(--emerald-bright); filter: drop-shadow(0 0 5px rgba(52,211,153,0.8)); }
.tier-strong   .post-badge { box-shadow: 0 0 18px rgba(52,211,153,0.14); }
.tier-strong   .ring-fill  { stroke: var(--emerald); }
.tier-above    .ring-fill  { stroke: #9ae6c4; }
.tier-typical  .ring-fill  { stroke: var(--text-faint); }
.tier-flop     .ring-fill  { stroke: rgba(224,122,95,0.5); }

.tier-breakout .post-badge,
.post-badge.big.tier-breakout {
  border-color: rgba(110,231,183,0.5);
  box-shadow: 0 0 26px rgba(52,211,153,0.3), inset 0 0 18px rgba(52,211,153,0.09);
}
.tier-breakout .post-badge .multiple { color: var(--emerald-bright); }
.tier-strong  .post-badge { border-color: rgba(52,211,153,0.32); box-shadow: 0 0 14px rgba(52,211,153,0.16); }
.tier-strong  .post-badge .multiple { color: var(--emerald); }
.tier-above   .post-badge .multiple { color: #9ae6c4; }
.tier-typical .post-badge .multiple { color: var(--text-muted); }
.tier-flop    .post-badge .multiple { color: var(--text-faint); }

.post-main { min-width: 0; }
.post-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-faint); margin-bottom: 9px;
}
.post-meta .author { color: var(--text-muted); font-weight: 600; }
.post-meta .source { color: var(--text-muted); text-decoration: none; }
.post-meta .source:hover { color: var(--emerald-bright); }
.dot-sep { opacity: 0.4; }
.type-chip, .kind-chip {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(110,231,183,0.08); border: 1px solid var(--border);
  color: var(--text-muted);
}
/* The editable profile/Page chip: a <select> dressed as the chip, with a small
   caret so it reads as changeable. */
select.kind-select {
  cursor: pointer; padding-right: 18px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 7px center, right 4px center;
  background-size: 3px 3px, 3px 3px; background-repeat: no-repeat;
}
select.kind-select:hover { border-color: var(--accent, #6ee7b7); color: var(--text); }
select.kind-select option { color: initial; }
.age-chip {
  font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--border); color: var(--text-faint);
}
.age-chip.is-recent {
  background: rgba(217,180,95,0.12); border-color: rgba(217,180,95,0.3);
  color: var(--gold);
}

.post-body {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px; line-height: 1.58; color: var(--text);
  text-decoration: none; white-space: pre-wrap;
  transition: color 0.18s var(--ease);
}
.post-body:hover { color: var(--emerald-bright); }


.post-stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-faint); flex-wrap: wrap; }
.post-stats b { color: var(--text-muted); font-weight: 650; }

.post-actions { display: flex; flex-direction: column; gap: 8px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(110,231,183,0.05); border: 1px solid var(--border);
  color: var(--text-faint); cursor: pointer;
  transition: all 0.18s var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.icon-btn:hover { color: var(--emerald-bright); border-color: var(--border-lit); transform: translateY(-1px); }
.save-btn.is-saved { color: var(--emerald-bright); background: rgba(52,211,153,0.14); border-color: var(--border-lit); }

/* ---------------------------------------------------------------- empty state */

.empty-hero { text-align: center; padding: 60px 20px; max-width: 620px; margin: 0 auto; }
.empty-lead { color: var(--text-muted); font-size: 15px; line-height: 1.65; margin: 14px 0 26px; }
.empty-note { color: var(--text-faint); font-size: 12.5px; margin-top: 14px; }
.empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* The scatter: ordinary dots settle onto the baseline, one breaks away. */
.scatter { width: 100%; max-width: 400px; height: auto; margin-bottom: 22px; }
.scatter-baseline {
  stroke: rgba(110,231,183,0.18); stroke-width: 1; stroke-dasharray: 3 5;
}
.scatter-dot {
  fill: var(--text-faint); opacity: 0;
  animation: dotIn 0.5s var(--ease) forwards; animation-delay: var(--d);
}
@keyframes dotIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 0.55; transform: none; } }
.scatter-outlier {
  fill: var(--emerald-bright); opacity: 0;
  animation: outlierIn 0.9s var(--ease) 1.3s forwards, outlierGlow 2.6s ease-in-out 2.2s infinite;
}
@keyframes outlierIn { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@keyframes outlierGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(52,211,153,0.55)); }
  50%      { filter: drop-shadow(0 0 16px rgba(52,211,153,0.95)); }
}

.empty-panel { padding: 40px; text-align: center; color: var(--text-muted); }
.empty-panel p { margin: 0 0 18px; }

.notice {
  padding: 15px 18px; margin-bottom: 20px;
  border-left: 2px solid var(--gold);
  font-size: 13.5px; color: var(--text-muted); line-height: 1.6;
}
.notice.inline { margin: 14px 0; border-radius: 10px; background: rgba(217,180,95,0.06); }
.notice code { color: var(--gold); font-size: 12.5px; }

/* ---------------------------------------------------------------- sources */

.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.source-card {
  padding: 22px; text-decoration: none; color: var(--text); display: block;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}
.source-card:hover { transform: translateY(-3px); border-color: var(--border-lit); }
.source-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.member-count { font-size: 11.5px; color: var(--text-faint); }
.source-card h2 { font-size: 16px; margin: 0 0 16px; }
.source-stats { display: flex; gap: 22px; }
.source-stats > div { display: flex; flex-direction: column; }
.s-val { font-size: 20px; font-weight: 720; font-variant-numeric: tabular-nums; }
.s-val.accent { color: var(--emerald-bright); }
.s-unit { font-size: 13px; color: var(--emerald); }
.s-lab { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.needs-data { font-size: 13px; color: var(--text-faint); margin: 0; }

/* ---------------------------------------------------------------- detail */

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.detail-post, .remix-panel { padding: 26px; }
.detail-head { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.post-badge.big { padding: 14px 14px; }
.post-badge.big .multiple { font-size: 32px; }
.detail-author { font-size: 15.5px; font-weight: 650; }
.detail-source { font-size: 13px; color: var(--text-muted); text-decoration: none; }
.detail-source:hover { color: var(--emerald-bright); }
.detail-body {
  font-size: 15px; line-height: 1.7; white-space: pre-wrap;
  padding: 18px; border-radius: 12px;
  background: rgba(6,20,13,0.42); border: 1px solid var(--border);
  margin: 0 0 20px;
}
.detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.detail-stats > div { display: flex; flex-direction: column; }
.d-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.d-lab { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.angle-picker { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 18px; }
.angle {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  padding: 11px 13px; border-radius: 10px;
  background: rgba(6,20,13,0.4); border: 1px solid var(--border);
  cursor: pointer; transition: border-color 0.18s var(--ease);
}
.angle:hover { border-color: var(--border-lit); }
.angle input { accent-color: var(--emerald); margin-top: 2px; }
.angle-name { font-size: 13.5px; font-weight: 620; text-transform: capitalize; }
.angle-desc { grid-column: 2; font-size: 12px; color: var(--text-faint); line-height: 1.5; }

.remix-status { font-size: 13px; color: var(--text-muted); margin-top: 12px; min-height: 18px; }
.remix-status.error { color: var(--ember); }

.remix-result { margin-top: 22px; }
.why {
  font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
  padding: 13px 15px; border-radius: 10px;
  background: rgba(52,211,153,0.06); border: 1px solid var(--border);
}
.variant {
  margin-top: 12px; padding: 15px 17px; border-radius: 12px;
  background: rgba(6,20,13,0.45); border: 1px solid var(--border);
  animation: variantIn 0.45s var(--ease) backwards;
}
@keyframes variantIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.variant-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.variant-angle {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--emerald-bright);
}
.variant-body { font-size: 14px; line-height: 1.65; white-space: pre-wrap; margin: 0; }

.copy-btn {
  font-size: 11.5px; padding: 4px 11px; border-radius: 7px;
  background: rgba(110,231,183,0.07); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; transition: all 0.18s var(--ease);
}
.copy-btn:hover { color: var(--emerald-bright); border-color: var(--border-lit); }

/* ---------------------------------------------------------------- capture */

.capture-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.install-panel, .side-panel { padding: 26px; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.step-n {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(52,211,153,0.14); border: 1px solid var(--border-lit);
  color: var(--emerald-bright); font-size: 12.5px; font-weight: 700;
}
.steps b { font-size: 14px; }
.steps p { font-size: 13px; color: var(--text-muted); margin: 5px 0 9px; line-height: 1.6; }
.steps code, .endpoint-box code {
  font-size: 12.5px; padding: 2px 6px; border-radius: 5px;
  background: rgba(6,20,13,0.7); border: 1px solid var(--border); color: var(--emerald-bright);
}

.endpoint-box {
  margin-top: 22px; padding: 14px 16px; border-radius: 11px;
  background: rgba(6,20,13,0.55); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.endpoint-label { font-size: 11px; color: var(--text-faint); width: 100%; }
.endpoint-box code { flex: 1; overflow-x: auto; }

.scoring-list { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.scoring-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.tier-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tier-dot.tier-breakout { background: var(--emerald-bright); box-shadow: 0 0 10px rgba(52,211,153,0.7); }
.tier-dot.tier-strong   { background: var(--emerald); }
.tier-dot.tier-above    { background: #9ae6c4; }
.tier-dot.tier-typical  { background: var(--text-faint); }

.side-panel p { font-size: 13.5px; line-height: 1.65; color: var(--text-muted); }
.fine { font-size: 12.5px; color: var(--text-faint); line-height: 1.65; }
.demo-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.capture-log { margin-top: 18px; padding: 24px 26px; }
.capture-log table { width: 100%; border-collapse: collapse; font-size: 13px; }
.capture-log th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-faint); font-weight: 600; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.capture-log td { padding: 10px 0; border-bottom: 1px solid rgba(110,231,183,0.05); color: var(--text-muted); }
.capture-log .accent { color: var(--emerald-bright); font-weight: 650; }

/* ---------------------------------------------------------------- settings */

.settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px;
}
.settings-grid .panel, .page > .panel { padding: 24px 26px; }
.page > section.panel { margin-top: 18px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-faint); font-weight: 600;
  padding-bottom: 11px; border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 13px 0; border-bottom: 1px solid rgba(110,231,183,0.06);
  color: var(--text-muted); vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }

.src-name-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.src-name { color: var(--text); font-weight: 600; }
.src-meta { font-size: 11px; color: var(--text-faint); margin-top: 3px; }

/* Sample data must be unmistakable. Mixing generated posts into the same
   feed as real captures with only a name prefix reads as real research. */
.demo-badge, .real-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 2px 7px; border-radius: 5px; font-weight: 700;
}
.demo-badge {
  background: rgba(217,180,95,0.16); color: var(--gold);
  border: 1px solid rgba(217,180,95,0.4);
}
.real-badge {
  background: rgba(52,211,153,0.13); color: var(--emerald-bright);
  border: 1px solid var(--border-lit);
}
.demo-tone { color: var(--gold) !important; }
.ok-tone { color: var(--emerald-bright); }
.warn-tone { color: var(--gold); }
.muted { color: var(--text-faint); }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.mini-btn {
  font-size: 11.5px; padding: 5px 11px; border-radius: 7px;
  background: rgba(110,231,183,0.07); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: all 0.18s var(--ease);
}
.mini-btn:hover { color: var(--emerald-bright); border-color: var(--border-lit); }
.mini-btn.danger:hover { color: var(--ember); border-color: rgba(224,122,95,0.5); }

/* Demo flag on cards in the feed and groups list. */
.demo-chip {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 5px; font-weight: 700;
  background: rgba(217,180,95,0.14); color: var(--gold);
  border: 1px solid rgba(217,180,95,0.35);
}
.post-card.is-demo { border-left: 2px solid rgba(217,180,95,0.45); }
.source-card.is-demo { border-left: 2px solid rgba(217,180,95,0.45); }

/* ------------------------------------------------------- install / update */

.install-lead { margin: 0 0 22px; }

/* States which install route you're on, so hosted-vs-local isn't a guess. */
.route-note {
  padding: 13px 16px; margin-bottom: 20px; border-radius: 10px;
  font-size: 13px; line-height: 1.6; color: var(--text-muted);
  background: rgba(217,180,95,0.08);
  border: 1px solid rgba(217,180,95,0.28);
}

/* The download is the whole first step on a hosted dashboard — make it read
   like one, not like an afterthought. */
.big-dl {
  font-size: 15px; padding: 13px 24px;
  align-self: flex-start;
}

.update-note.warn {
  background: rgba(217,180,95,0.08);
  border-color: rgba(217,180,95,0.3);
}
.update-note.warn b { color: var(--gold); }
.update-note code {
  font-size: 12px; padding: 1px 5px; border-radius: 4px;
  background: rgba(4,14,9,0.6); color: var(--gold);
}

.install-flow { display: flex; flex-direction: column; gap: 22px; }

.istep { display: flex; flex-direction: column; gap: 12px; }
.istep-head { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.istep-head b { font-size: 14.5px; }
.istep-head p { font-size: 13px; color: var(--text-muted); margin: 5px 0 0; line-height: 1.6; }
.istep-head code {
  font-size: 12px; padding: 1px 5px; border-radius: 4px;
  background: rgba(6,20,13,0.7); color: var(--emerald-bright);
}
.istep-body { padding-left: 44px; display: flex; flex-direction: column; gap: 11px; }

.path-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px; border-radius: 9px;
  background: rgba(4,14,9,0.66); border: 1px solid var(--border);
}
.path-line code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-size: 12.5px; color: var(--emerald-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.istep-msg { font-size: 12.5px; min-height: 16px; color: var(--text-muted); }
.istep-msg.ok { color: var(--emerald-bright); }
.istep-msg.error { color: var(--ember); }

.alt-route {
  font-size: 12.5px; color: var(--text-faint); line-height: 1.6; margin: 0;
  padding-left: 12px; border-left: 2px solid var(--border);
}
.alt-route b { color: var(--text-muted); }

/* Diagrams of the real Chrome screens — the folder picker is where people
   get lost, so showing it beats describing it. */
.diagram { width: 100%; height: auto; max-width: 420px; }
.diagram .dg-text { fill: var(--text); font-size: 11px;
                    font-family: -apple-system, "Segoe UI", sans-serif; }
.diagram .dg-muted { fill: var(--text-faint); font-size: 10px;
                     font-family: -apple-system, "Segoe UI", sans-serif; }
.diagram .dg-label { fill: var(--text-muted); font-size: 10px;
                     font-family: -apple-system, "Segoe UI", sans-serif; }
.diagram .sm { font-size: 10px; }

.diagram .dg-toggle { fill: rgba(52,211,153,0.45); }
.diagram .dg-knob { fill: var(--emerald-bright); }
.diagram .dg-ping {
  fill: none; stroke: rgba(110,231,183,0.5); stroke-width: 1;
  transform-origin: 377px 19.5px;
  animation: dgPing 2.4s ease-out infinite;
}
@keyframes dgPing {
  0%   { transform: scale(0.4); opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}

.diagram .dg-folder { animation: dgDrag 3.4s ease-in-out infinite; }
@keyframes dgDrag {
  0%, 62%, 100% { transform: translate(0, 0); opacity: 1; }
  30%           { transform: translate(150px, -8px); opacity: 0.55; }
}
.diagram .dg-arrow {
  stroke-dashoffset: 0;
  animation: dgFlow 1.1s linear infinite;
}
@keyframes dgFlow { to { stroke-dashoffset: -16; } }

@media (prefers-reduced-motion: reduce) {
  .diagram .dg-ping, .diagram .dg-folder, .diagram .dg-arrow { animation: none; }
}

.update-note {
  margin-top: 20px; padding: 14px 16px; border-radius: 11px;
  font-size: 13px; line-height: 1.65; color: var(--text-muted);
  background: rgba(52,211,153,0.07);
  border: 1px solid var(--border-lit);
}
.update-note b { color: var(--emerald-bright); }

.share-details {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.share-details summary {
  cursor: pointer; font-size: 13px; color: var(--text-muted);
  list-style: none; transition: color 0.18s var(--ease);
}
.share-details summary::-webkit-details-marker { display: none; }
.share-details summary::before {
  content: "▸ "; color: var(--text-faint);
  display: inline-block; transition: transform 0.2s var(--ease);
}
.share-details[open] summary::before { content: "▾ "; }
.share-details summary:hover { color: var(--emerald-bright); }
.share-details p { margin: 11px 0 13px; }

/* ---------------------------------------------------------------- Sage */

.sage-title { display: flex; align-items: center; gap: 14px; }

/* Breathing orb — Sage's mark. Rings drift outward while the core pulses. */
.sage-orb {
  position: relative; width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
}
.sage-orb::before, .sage-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(52,211,153,0.45);
  animation: orbRing 3.4s var(--ease) infinite;
}
.sage-orb::after { animation-delay: 1.7s; }
@keyframes orbRing {
  0%   { transform: scale(0.45); opacity: 0.9; }
  100% { transform: scale(1.15); opacity: 0; }
}
.orb-core {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--emerald-bright), var(--emerald-dim));
  box-shadow: 0 0 16px rgba(52,211,153,0.7);
  animation: orbPulse 3.4s ease-in-out infinite;
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

.provider-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 5px;
  background: rgba(52,211,153,0.13); color: var(--emerald-bright);
  border: 1px solid var(--border-lit); margin-left: 4px;
}

.sage-panel { padding: 0; display: flex; flex-direction: column; min-height: 62vh; }

.chat {
  flex: 1; overflow-y: auto; padding: 24px 26px;
  display: flex; flex-direction: column; gap: 16px; min-height: 260px;
}
.chat-empty { margin: auto; text-align: center; color: var(--text-faint); font-size: 14px; }

.msg { max-width: 82%; display: flex; flex-direction: column; gap: 5px; }
.msg-user { align-self: flex-end; align-items: flex-end; }
.msg-assistant { align-self: flex-start; }

.msg-who {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--emerald-bright);
}
.msg-body {
  padding: 13px 16px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.65; white-space: pre-wrap;
  animation: msgIn 0.34s var(--ease) backwards;
}
.msg-user .msg-body {
  background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(16,185,129,0.13));
  border: 1px solid var(--border-lit); border-bottom-right-radius: 5px;
}
.msg-assistant .msg-body {
  background: rgba(6,20,13,0.6); border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.thinking { display: flex; gap: 5px; padding: 16px 18px; }
.thinking span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--emerald);
  animation: thinkBounce 1.3s ease-in-out infinite;
}
.thinking span:nth-child(2) { animation-delay: 0.18s; }
.thinking span:nth-child(3) { animation-delay: 0.36s; }
@keyframes thinkBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

.suggested {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 26px 14px; flex-shrink: 0;
}
.chip-btn {
  font-size: 12.5px; padding: 7px 13px; border-radius: 999px;
  background: rgba(110,231,183,0.06); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  transition: all 0.18s var(--ease);
}
.chip-btn:hover {
  color: var(--emerald-bright); border-color: var(--border-lit);
  transform: translateY(-1px);
}

.chat-form {
  display: flex; gap: 10px; padding: 16px 26px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.chat-form input {
  flex: 1; padding: 12px 15px; border-radius: 11px;
  background: rgba(6,20,13,0.62); border: 1px solid var(--border);
  color: var(--text); font-size: 14.5px;
  transition: border-color 0.18s var(--ease);
}
.chat-form input:focus { outline: none; border-color: var(--border-lit); }
.chat-form input:disabled { opacity: 0.5; }
.chat-status { padding: 0 26px 14px; font-size: 12.5px; color: var(--text-muted); }
.chat-status.error { color: var(--ember); }

/* AI provider picker on Settings */
.provider-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 14px; }
.provider {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  padding: 13px 15px; border-radius: 11px; cursor: pointer;
  background: rgba(6,20,13,0.42); border: 1px solid var(--border);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.provider:hover { border-color: var(--border-lit); }
.provider.selected { border-color: var(--border-lit); background: rgba(52,211,153,0.08); }
.provider input { accent-color: var(--emerald); margin-top: 2px; }
.provider-name { font-size: 14px; font-weight: 650; }
.provider-desc { grid-column: 2; font-size: 11.5px; color: var(--text-faint); }

.key-row { display: flex; gap: 9px; flex-wrap: wrap; }
.key-row input {
  padding: 10px 13px; border-radius: 9px;
  background: rgba(6,20,13,0.62); border: 1px solid var(--border);
  color: var(--text); font-size: 13px;
}
#ai-key { flex: 2; min-width: 190px; }
#ai-model { flex: 1; min-width: 130px; }

.msg-line { font-size: 12.5px; margin-top: 9px; min-height: 16px; color: var(--text-muted); }
.msg-line.ok { color: var(--emerald-bright); }
.msg-line.error { color: var(--ember); }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translate(-50%, 26px);
  padding: 12px 22px; border-radius: 11px;
  background: var(--glass-solid); border: 1px solid var(--border-lit);
  backdrop-filter: blur(16px);
  color: var(--text); font-size: 13.5px; font-weight: 550;
  opacity: 0; pointer-events: none; z-index: 200;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: rgba(224,122,95,0.5); color: var(--ember); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .detail-grid, .capture-grid { grid-template-columns: 1fr; }
  .topnav { gap: 16px; }
  .topbar { padding: 12px 18px; flex-wrap: wrap; gap: 12px; }
  .page { padding: 24px 18px 60px; }
}
@media (max-width: 620px) {
  .post-card { grid-template-columns: 72px 1fr; }
  .post-actions { grid-column: 2; flex-direction: row; }
  .detail-stats { grid-template-columns: repeat(2, 1fr); }
  .topbar-right .btn-ghost { display: none; }
}

/* ---------------------------------------------------------------- ideas */

.ephemeral-warning {
  padding: 14px 18px; margin-bottom: 22px; border-radius: 11px;
  font-size: 13.5px; line-height: 1.65; color: #f0c274;
  background: rgba(224,122,95,0.1);
  border: 1px solid rgba(224,122,95,0.42);
}
.ephemeral-warning b { color: var(--ember); display: block; margin-bottom: 3px; }
.ephemeral-warning a { color: var(--emerald-bright); }

.group-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 9px; margin: 14px 0 18px;
}
.group-chip {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px 14px; border-radius: 11px; cursor: pointer;
  background: rgba(6,20,13,0.45); border: 1px solid var(--border);
  color: var(--text); transition: all 0.18s var(--ease);
}
.group-chip:hover { border-color: var(--border-lit); transform: translateY(-1px); }
.group-chip.selected {
  border-color: var(--border-lit); background: rgba(52,211,153,0.1);
}
.gc-name { font-size: 13.5px; font-weight: 650; }
.gc-meta { font-size: 11.5px; color: var(--text-faint); display: flex; gap: 7px; align-items: center; }

.basis-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.basis-list li { display: flex; gap: 12px; align-items: baseline; font-size: 13px; }
.basis-mult { font-weight: 750; font-variant-numeric: tabular-nums; min-width: 46px; }
.basis-mult.tier-breakout { color: var(--emerald-bright); }
.basis-mult.tier-strong { color: var(--emerald); }
.basis-mult.tier-above { color: #9ae6c4; }
.basis-body { color: var(--text-muted); line-height: 1.55; }

.idea-hook {
  font-size: 14.5px; font-weight: 650; color: var(--emerald-bright);
  margin: 4px 0 9px; line-height: 1.45;
}
.idea-why {
  font-size: 12px; color: var(--text-faint); line-height: 1.55;
  margin: 11px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(110,231,183,0.09);
}

/* ------------------------------------------------------- group card actions */

.source-card { display: flex; flex-direction: column; }
.source-title {
  font-size: 16px; font-weight: 650; color: var(--text);
  text-decoration: none; margin-bottom: 14px; line-height: 1.35;
  transition: color 0.18s var(--ease);
}
.source-title:hover { color: var(--emerald-bright); }

.source-when {
  font-size: 11px; color: var(--text-faint); margin-top: 12px;
}
.source-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(110,231,183,0.08);
}
.source-actions .mini-btn { text-decoration: none; }
.mini-btn.accent-btn {
  color: var(--emerald-bright);
  border-color: rgba(110,231,183,0.3);
  background: rgba(52,211,153,0.09);
}
.mini-btn.accent-btn:hover { background: rgba(52,211,153,0.16); }

/* ------------------------------------------------------- posts vs comments */

.kind-switch {
  display: inline-flex; gap: 4px; margin-bottom: 20px;
  padding: 4px; border-radius: 12px;
  background: rgba(6,20,13,0.5); border: 1px solid var(--border);
}
.kind-tab {
  padding: 8px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.18s var(--ease);
}
.kind-tab:hover { color: var(--text); }
.kind-tab.active {
  background: rgba(52,211,153,0.15); color: var(--emerald-bright);
  box-shadow: inset 0 0 0 1px var(--border-lit);
}
.kind-count {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: rgba(110,231,183,0.12); color: var(--text-muted);
}
.kind-tab.active .kind-count { color: var(--emerald-bright); }

/* A captured comment, shown in the feed as a reply rather than a post. */
.post-card.is-comment { border-left: 2px solid rgba(110,231,183,0.3); }
.comment-chip {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(110,231,183,0.1); color: var(--emerald);
  border: 1px solid var(--border);
}

/* ---------------------------------------------------------------- the scale */

/* The score, drawn. The notch is the group's median; the glowing stretch past
   it is exactly what the multiple measures. Log-scaled server-side, so the
   median always sits at the same place on every card and groups stay
   comparable at a glance. */
.scale { margin: 14px 0 12px; }

.scale-track {
  position: relative;
  height: 12px; border-radius: 7px;
  background: rgba(6,20,13,0.72);
  border: 1px solid rgba(110,231,183,0.1);
  overflow: visible;
}

.scale-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; border-radius: 7px;
  background: linear-gradient(90deg, rgba(52,211,153,0.32), rgba(52,211,153,0.5));
  transition: width 1.05s var(--ease);
}

/* Only the overshoot glows — that stretch IS the score. */
.scale-over {
  position: absolute; left: 25%; top: 0; bottom: 0;
  width: 0; border-radius: 0 7px 7px 0;
  background: linear-gradient(90deg, var(--emerald-dim), var(--emerald-bright));
  box-shadow: 0 0 16px rgba(52,211,153,0.5);
  transition: width 1.05s var(--ease) 0.12s;
}

.scale-median {
  position: absolute; left: 25%; top: -4px; bottom: -4px;
  width: 2px; border-radius: 2px;
  background: rgba(234,255,243,0.55);
}
.scale-median-label {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-faint); white-space: nowrap;
}

.scale-caption {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 9px; font-size: 11.5px; color: var(--text-faint);
}
.scale-caption b { color: var(--text-muted); font-weight: 650; }
.scale-vs { opacity: 0.8; }

.tier-flop .scale-fill {
  background: linear-gradient(90deg, rgba(224,122,95,0.2), rgba(224,122,95,0.34));
}

@media (prefers-reduced-motion: reduce) {
  .scale-fill, .scale-over, .ring-fill { transition: none; }
}

/* ---------------------------------------------------------------- auth */

.auth-body { display: grid; place-items: center; min-height: 100vh; }
.auth-shell { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 24px; }
.auth-card { padding: 34px 32px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-card h1 { font-size: 23px; margin: 0 0 6px; }
.auth-sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 22px; }

.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label > span { font-size: 12.5px; color: var(--text-muted); font-weight: 550; }
.auth-form input {
  padding: 11px 14px; border-radius: 10px;
  background: rgba(6,20,13,0.62); border: 1px solid var(--border);
  color: var(--text); font-size: 14.5px;
  transition: border-color 0.18s var(--ease);
}
.auth-form input:focus { outline: none; border-color: var(--border-lit); }
.auth-form small { font-size: 11.5px; color: var(--text-faint); }
.auth-submit { justify-content: center; margin-top: 6px; padding: 12px; }

.auth-error {
  padding: 11px 14px; border-radius: 9px; margin-bottom: 18px;
  font-size: 13px; color: var(--ember);
  background: rgba(224,122,95,0.1); border: 1px solid rgba(224,122,95,0.35);
}
.auth-alt { text-align: center; margin: 20px 0 0; font-size: 13px; color: var(--text-muted); }
.auth-alt a { color: var(--emerald-bright); text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

.auth-legal {
  text-align: center; margin: 22px 0 0; font-size: 11.5px;
  line-height: 1.6; color: var(--text-faint);
}
.auth-legal a { color: var(--text-muted); text-decoration: none; }
.auth-legal a:hover { color: var(--emerald); }

/* ------------------------------------------------------------- account */

.account-link {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--emerald), var(--forest-700));
  color: #06140d; font-size: 13px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; transition: border-color 0.18s var(--ease);
}
.account-link:hover, .account-link.active { border-color: var(--emerald-bright); }
.upgrade-pill { padding: 6px 13px; font-size: 12.5px; }

.plan-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.plan-badge {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.plan-free { background: rgba(110,231,183,0.1); color: var(--text-muted); border: 1px solid var(--border); }
.plan-pro  { background: rgba(52,211,153,0.16); color: var(--emerald-bright); border: 1px solid var(--border-lit); }

/* ------------------------------------------------------------- pricing */

.pricing-head { text-align: center; max-width: 620px; margin: 0 auto 26px; }
.pricing-head h1 { font-size: 31px; }
.pricing-head .sub { margin-top: 10px; }

.interval-switch {
  display: flex; gap: 4px; justify-content: center; margin: 0 auto 26px;
  padding: 4px; border-radius: 12px; width: fit-content;
  background: rgba(6,20,13,0.5); border: 1px solid var(--border);
}
.interval-tab {
  padding: 9px 20px; border-radius: 9px; border: none; cursor: pointer;
  background: transparent; color: var(--text-muted);
  font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px;
  transition: all 0.18s var(--ease);
}
.interval-tab:hover { color: var(--text); }
.interval-tab.active {
  background: rgba(52,211,153,0.15); color: var(--emerald-bright);
  box-shadow: inset 0 0 0 1px var(--border-lit);
}
.save-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700;
  background: rgba(52,211,153,0.2); color: var(--emerald-bright);
}

.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; max-width: 780px; margin: 0 auto;
}
.price-card { padding: 30px 28px; display: flex; flex-direction: column; position: relative; }
.price-card.featured { border-color: var(--border-lit); box-shadow: 0 0 40px rgba(52,211,153,0.1); }
.price-flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--emerald), var(--emerald-dim)); color: #04150c;
}
.price-name { font-size: 14px; font-weight: 650; color: var(--text-muted); margin-bottom: 12px; }
.price-figure { display: flex; align-items: baseline; gap: 4px; }
.price-amount { font-size: 40px; font-weight: 780; letter-spacing: -1.5px; }
.price-period { font-size: 13px; color: var(--text-faint); margin-top: 2px; }
.price-note { font-size: 12px; color: var(--emerald-bright); margin-top: 7px; }
.price-blurb { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 18px 0 16px; }

.price-features { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.price-features li {
  font-size: 13.5px; color: var(--text-muted); padding-left: 24px; position: relative; line-height: 1.45;
}
.price-features li::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 7px; height: 4px; border-left: 2px solid var(--emerald); border-bottom: 2px solid var(--emerald);
  transform: rotate(-45deg);
}
.price-cta { justify-content: center; margin-top: auto; padding: 12px; }
.price-current {
  margin-top: auto; text-align: center; padding: 11px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--emerald-bright);
  background: rgba(52,211,153,0.1); border: 1px solid var(--border-lit);
}
.price-usage { text-align: center; font-size: 11.5px; color: var(--text-faint); margin-top: 9px; }
.pricing-faq { max-width: 780px; margin: 24px auto 0; padding: 26px 28px; }
.pricing-faq .fine { margin: 0 0 13px; }
.pricing-faq .fine:last-child { margin-bottom: 0; }
.plan-admin {
  background: rgba(217,180,95,0.16); color: var(--gold);
  border: 1px solid rgba(217,180,95,0.4);
}

/* ---------------------------------------------------------------- media */

.post-content { display: flex; gap: 14px; align-items: flex-start; }

.post-thumb {
  position: relative; flex-shrink: 0;
  width: 92px; height: 92px; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--border); background: rgba(6,20,13,0.6);
  display: block; transition: border-color 0.18s var(--ease);
}
.post-thumb:hover { border-color: var(--border-lit); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb-count, .thumb-play {
  position: absolute; border-radius: 6px;
  background: rgba(4,14,9,0.82); color: var(--text);
  font-size: 10.5px; font-weight: 700; padding: 2px 6px;
}
.thumb-count { top: 5px; right: 5px; }
.thumb-play {
  bottom: 5px; left: 5px; padding: 2px 7px; color: var(--emerald-bright);
}

@media (max-width: 620px) {
  .post-thumb { width: 64px; height: 64px; }
}
/* The whole graphic, never a crop of it.
 *
 * The frame carried max-height: 320px with overflow hidden, so a tall image —
 * which most meme and quote posts are — was scaled to the full width and then
 * had its bottom cut off. On a page whose job is showing you what a post
 * looked like, cropping the post is the one thing it must not do.
 *
 * The limit now sits on the image, so it scales down to fit whole instead of
 * being clipped, and the frame takes whatever size that leaves.
 */
.detail-media {
  display: flex; justify-content: center;
  margin-bottom: 16px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
}
.detail-media img {
  max-width: 100%;
  max-height: 78vh;      /* tall enough to read, short enough to scroll past */
  width: auto; height: auto;
  display: block; object-fit: contain;
}
.stat-hint {
  display: block; font-size: 10.5px; color: var(--text-faint);
  margin-top: 3px; line-height: 1.35;
}

/* ------------------------------------------------------------------ legal */

/* Prose pages — privacy and terms. Narrow measure, because a policy set at
   the full width of the dashboard is a policy nobody finishes reading. */

.legal { max-width: 720px; margin: 0 auto 40px; }
.legal h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.02em; }
.legal h2 {
  font-size: 18px; margin: 38px 0 12px; color: var(--emerald-bright);
  letter-spacing: -0.01em;
}
.legal h3 { font-size: 14.5px; margin: 24px 0 8px; color: var(--text); }
.legal p, .legal li { color: var(--text-muted); line-height: 1.75; font-size: 14.5px; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal b { color: var(--text); font-weight: 600; }
.legal a { color: var(--emerald); }
.legal code { color: var(--gold); font-size: 12.5px; }

.legal-date { font-size: 12.5px; color: var(--text-faint); margin-bottom: 26px; }
.legal-lede { font-size: 16px; color: var(--text); line-height: 1.65; }
.legal-foot {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-faint);
}

/* The AI disclosure. It is the only place captured data leaves our servers,
   so it gets a box rather than being lost in the middle of a list. */
.legal-callout {
  background: rgba(217, 180, 95, 0.06);
  border: 1px solid rgba(217, 180, 95, 0.22);
  border-left: 2px solid var(--gold);
  border-radius: 12px; padding: 18px 20px 6px; margin: 0 0 16px;
}
.legal-callout p:last-child { margin-bottom: 14px; }

/* ----------------------------------------------------------- site footer */

.sitefoot {
  max-width: 1180px; margin: 60px auto 0; padding: 22px 28px 30px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  font-size: 12.5px; color: var(--text-faint);
}
.sitefoot-brand { font-weight: 600; color: var(--text-muted); }
.sitefoot-brand span { font-weight: 400; color: var(--text-faint); }
.sitefoot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.sitefoot a {
  color: var(--text-muted); text-decoration: none;
  transition: color 0.18s var(--ease);
}
.sitefoot a:hover { color: var(--emerald); }
.sitefoot-note { margin-left: auto; }

@media (max-width: 640px) {
  .sitefoot { flex-direction: column; align-items: flex-start; }
  .sitefoot-note { margin-left: 0; }
}

/* ----------------------------------------------------------- diagnostics */

.diag-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin: 22px 0 18px;
}

.diag-list { list-style: none; margin: 0; padding: 0; }

.diag-item {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.diag-item:last-child { border-bottom: 0; padding-bottom: 0; }

/* A pass is quiet and a failure is loud, because only one of them is asking
   for attention. */
.diag-mark {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-top: 1px;
}
.diag-item.good .diag-mark { background: rgba(52,211,153,0.16); color: var(--emerald-bright); }
.diag-item.bad  .diag-mark { background: rgba(224,122,95,0.18); color: #ffb59d; }

.diag-body { display: flex; flex-direction: column; gap: 3px; }
.diag-body b { font-size: 14px; color: var(--text); font-weight: 600; }
.diag-detail { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.diag-item.bad .diag-detail { color: #ffb59d; }

/* --------------------------------------------------------------- meadow */

/* The group drawn as a field: one blade per scored post, standing on the
   median. Height is the multiple, so the outliers are literally the tall
   grass — which is the whole product in one picture. */

.meadow-panel { margin-top: 18px; }
.meadow-head h2 { margin-bottom: 4px; }
.meadow-head .fine { margin: 0 0 14px; }

/* Wide groups scroll sideways rather than squashing every blade together;
   a field of 300 posts compressed to panel width is a smear. */
.meadow-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.meadow { display: block; height: 150px; min-width: 100%; }

/* The bar sits directly beneath the field, so it is drawn as ground rather
   than as browser furniture: dark soil, with a thumb filled from the same
   emerald ramp as the blades standing above it. The default grey slab read
   as a piece of the browser that had wandered into the picture.

   Both syntaxes are here on purpose — Firefox only understands the two
   standard properties, and WebKit only repaints through the pseudo-elements,
   so each engine needs its own. */
.meadow-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--emerald-dim) rgba(5, 11, 7, 0.55);
}

.meadow-scroll::-webkit-scrollbar { height: 10px; }

.meadow-scroll::-webkit-scrollbar-track {
  background: rgba(5, 11, 7, 0.55);
  border-radius: 6px;
  /* A lit hairline along the top edge, echoing the dashed median the blades
     are rooted in, so the bar reads as the floor of the same drawing. */
  box-shadow: inset 0 1px 0 rgba(110, 231, 183, 0.12);
}

.meadow-scroll::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: linear-gradient(to right, #10b981, #6ee7b7);
  /* Transparent border plus padding-box clipping insets the thumb, leaving a
     margin of track visible around it instead of a bar wedged edge to edge. */
  border: 2px solid transparent;
  background-clip: padding-box;
}

.meadow-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, var(--emerald), #a7f3d0);
  background-clip: padding-box;
}

.meadow-ground {
  stroke: rgba(110, 231, 183, 0.34);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.blade {
  fill: url(#bladeGrad);
  transform-box: fill-box;
  transform-origin: bottom center;
  /* Grown from nothing on reveal, then left alone. The stagger is by index
     so the field fills in like wind crossing it rather than all at once. */
  transform: scaleY(0);
  animation: blade-grow 0.75s var(--ease) forwards;
  animation-delay: calc(var(--i) * 9ms);
}
.blade.is-breakout { fill: url(#bladeBreak); }

@keyframes blade-grow { to { transform: scaleY(1); } }

/* The sway is deliberately tiny and slow. Anything more turns a chart into a
   screensaver, and this one is meant to be read. */
.blade-link:hover .blade {
  fill: #eafff3;
  transition: fill 0.15s var(--ease);
}
.blade-link { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  /* Both of these drive `transform`, and the later one wins outright — so the
     sway has to start AFTER the growth has finished, or it overrides it and
     the blades simply appear at full height. The delay is the grow duration
     plus that blade's own stagger. */
  .blade {
    animation: blade-grow 0.75s var(--ease) forwards,
               blade-sway 6.5s ease-in-out calc(800ms + var(--i) * 60ms) infinite;
    animation-delay: calc(var(--i) * 9ms), calc(800ms + var(--i) * 60ms);
  }
  @keyframes blade-sway {
    0%, 100% { transform: scaleY(1) skewX(0deg); }
    50%      { transform: scaleY(1) skewX(1.6deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .blade { transform: scaleY(1); animation: none; }
}

.meadow-key {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px;
  font-size: 12px; color: var(--text-faint);
}
.meadow-key span { display: inline-flex; align-items: center; gap: 7px; }
.key-line {
  width: 16px; height: 0; border-top: 1px dashed rgba(110, 231, 183, 0.5);
}
.key-blade {
  width: 4px; height: 13px; border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, #10b981, #6ee7b7);
}
.key-blade.is-breakout { background: linear-gradient(to top, #b8933f, #f5d98a); }

/* ---------------------------------------------------- score explainer */

/* The little "?" that opens the plain-language score popup. Kept subtle so it
   reads as a hint, not a control competing with the score itself. */
.score-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; padding: 0;
  border: 1px solid rgba(110, 231, 183, 0.45); border-radius: 50%;
  background: rgba(16, 185, 129, 0.12); color: #6ee7b7;
  font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
  vertical-align: middle; transition: background 0.15s, border-color 0.15s;
}
.score-info:hover { background: rgba(16, 185, 129, 0.28); border-color: #6ee7b7; }
.score-info:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 1px; }

.score-help[hidden] { display: none; }
.score-help {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.score-help-scrim { position: absolute; inset: 0; background: rgba(4, 12, 8, 0.66); }
body.score-help-open { overflow: hidden; }

.score-help-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto;
  padding: 22px 22px 20px; border-radius: 18px;
  animation: sh-pop 0.16s ease-out;
}
@keyframes sh-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .score-help-card { animation: none; } }

.score-help-card h3 { margin: 0 26px 12px 0; font-size: 1.05rem; color: #e6f5ec; }
.score-help-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.06);
  color: #9fb7ab; font-size: 20px; line-height: 1; cursor: pointer;
}
.score-help-x:hover { background: rgba(255, 255, 255, 0.12); color: #e6f5ec; }

.score-help-body p { margin: 0 0 11px; font-size: 0.9rem; line-height: 1.5; color: #c7d8ce; }
.score-help-body b { color: #e6f5ec; }
.score-help-body .sh-formula {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-radius: 10px; background: rgba(16, 185, 129, 0.1);
  font-weight: 600; color: #d8efe4;
}
.score-help-body .sh-formula span { font-weight: 400; font-size: 0.78rem; color: #90a89c; }
.score-help-body .sh-math { font-variant-numeric: tabular-nums; }
.score-help-body .sh-multiple {
  padding: 9px 11px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(184, 147, 63, 0.16), rgba(245, 217, 138, 0.06));
  font-size: 1rem;
}
.score-help-body .sh-multiple b { color: #f5d98a; }

/* A miniature of the card's own bar, so the words map onto the picture. */
.score-help-body .sh-bar {
  position: relative; height: 12px; margin: 4px 0 6px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.score-help-body .sh-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 72%;
  background: linear-gradient(90deg, #10b981, #6ee7b7);
}
.score-help-body .sh-bar-notch {
  position: absolute; left: 28%; top: -3px; bottom: -3px; width: 2px;
  background: #f5d98a;
}
.score-help-body .sh-bar-notch span {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-size: 0.6rem; color: #f5d98a; white-space: nowrap;
}
.score-help-body .sh-note { font-size: 0.8rem; color: #90a89c; margin-top: 8px; }

/* Generate-graphic button on each remix variant, and the image it produces. */
.graphic-btn {
  font-size: 11px; padding: 3px 9px; border-radius: 5px; cursor: pointer;
  background: rgba(217, 180, 95, 0.14); border: 1px solid rgba(217, 180, 95, 0.35);
  color: var(--text-muted);
}
.graphic-btn:hover:not(:disabled) { border-color: #d9b45f; color: var(--text); }
.graphic-btn:disabled { opacity: 0.6; cursor: default; }
.variant-graphic { margin-top: 10px; }
.variant-graphic img {
  max-width: 100%; border-radius: 10px; display: block; border: 1px solid var(--border);
}
.graphic-dl {
  display: inline-block; margin-top: 6px; font-size: 12px;
  color: #d9b45f; text-decoration: none;
}
.graphic-dl:hover { text-decoration: underline; }

/* The operator's art direction, opened by the Generate graphic button.
   Gold rather than emerald, because everything to do with generating an
   image already reads in gold and the box belongs to that button. */
.graphic-direction {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 10px; padding: 10px;
  border-radius: 10px;
  background: rgba(217, 180, 95, 0.06);
  border: 1px solid rgba(217, 180, 95, 0.22);
}
.graphic-direction[hidden] { display: none; }

.graphic-brief {
  flex: 1; min-width: 0; resize: vertical;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text); font-size: 13px; line-height: 1.5;
  font-family: inherit;
}
.graphic-brief::placeholder { color: var(--text-faint); }
.graphic-brief:focus {
  outline: none;
  border-color: rgba(217, 180, 95, 0.55);
}

.graphic-go { flex-shrink: 0; font-size: 12px; padding: 8px 14px; }

@media (max-width: 560px) {
  /* Side by side leaves the box too narrow to write a brief in. */
  .graphic-direction { flex-direction: column; }
  .graphic-go { width: 100%; }
}

/* Operator brand profile form. */
.brand-form { display: grid; gap: 12px; margin: 14px 0; }
.brand-field { display: flex; flex-direction: column; gap: 4px; }
.brand-field > span { font-size: 12px; color: var(--text-muted); }
.brand-field input, .brand-field textarea {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  color: var(--text); font: inherit; resize: vertical;
}
.brand-field input:focus, .brand-field textarea:focus {
  outline: none; border-color: #6ee7b7;
}