/* ── Or Am I High?, phosphor lab instrument ────────────────────────────
   Deliberately NOT the warm cream/terracotta palette: this is old
   oscilloscope territory, green-black glass, phosphor traces, and a
   gold→coral warning scale borrowed from real gauge faces.

   abyss   #080f0c  page background
   panel   #101a15  card surface
   moss    #1e2f26  edges and rules
   bone    #e4efe6  primary text (cool, faintly green)
   phos    #58e08c  phosphor green, primary accent, "REAL" end
   gold    #e8c15c  mid-scale
   coral   #f2664a  "HIGH" end, needle warnings, emergency
──────────────────────────────────────────────────────────────────────── */

:root {
  --abyss: #080f0c;
  --panel: #101a15;
  --panel-edge: #1e2f26;
  --bone: #e4efe6;
  --bone-dim: #9ab0a2;
  --phos: #58e08c;
  --phos-dim: #3d8f61;   /* rules, labels: phosphor knocked back a tone */
  --gold: #e8c15c;
  --coral: #f2664a;
  /* One column for the verdict card's headline, body and callout. Must be an
     absolute unit: `ch` resolves per font, so the display face and the body
     face would produce different widths from the same number. */
  --measure: 33.75rem;
  /* Chosen against the generative-default set, no Inter/Roboto/Karla, and
     explicitly not Space Mono, which is the giveaway mono in AI-made UI.
     Syne is wide and slightly odd; Martian Mono reads as instrumentation. */
  --display: "Syne", sans-serif;
  --body: "Schibsted Grotesk", sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--abyss);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  padding-bottom: 140px;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ambient smoke glow */
.haze {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% -5%, rgba(88, 224, 140, 0.14), transparent 70%),
    radial-gradient(45% 35% at 15% 110%, rgba(88, 224, 140, 0.08), transparent 70%),
    radial-gradient(45% 35% at 90% 100%, rgba(242, 102, 74, 0.06), transparent 70%);
  z-index: 0;
  animation: haze-drift 26s ease-in-out infinite;
}

@keyframes haze-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -2%, 0) scale(1.07); }
}

/* ── motion kill switch ───────────────────────────────────────────────
   Fixed and always on screen. Styled to sit inside the palette (mono, pill,
   phosphor) but worded plainly, someone reaching for this is not in the mood
   to decode a clever label. */
.motion-toggle {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(88, 224, 140, 0.3);
  border-radius: 999px;
  background: rgba(8, 15, 12, 0.72);
  color: var(--bone-dim);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.motion-toggle:hover,
.motion-toggle:focus-visible {
  color: var(--bone);
  border-color: rgba(88, 224, 140, 0.6);
  background: rgba(12, 24, 18, 0.9);
}

.motion-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--phos);
  box-shadow: 0 0 8px rgba(88, 224, 140, 0.8);
}

/* pressed = motion is off; the dot goes dark and stops glowing */
.motion-toggle[aria-pressed="true"] .motion-dot {
  background: #33463c;
  box-shadow: none;
}

/* ── everything below is what "off" actually turns off ───────────────── */
html[data-motion="off"] .wash { display: none; }
html[data-motion="off"] .haze { animation: none; }
html[data-motion="off"] .wm-dot { animation: none; }
html[data-motion="off"] .wm-q { animation: none; }
html[data-motion="off"] .thinking-dots::after { animation: none; content: "..."; }
html[data-motion="off"] .needle-group,
html[data-motion="off"] .meter-fill { transition: none; }
html[data-motion="off"] { scroll-behavior: auto; }
/* the title stops reacting to the pointer too, a colour shift under the
   cursor is exactly the kind of thing this button exists to rule out */
html[data-motion="off"] .wm-main { fill: var(--phos); }
html[data-motion="off"] .oil-s0,
html[data-motion="off"] .oil-s1,
html[data-motion="off"] .oil-s2,
html[data-motion="off"] .oil-s3 { transition: none; }

/* ── global wash ──────────────────────────────────────────────────────
   Slow amorphous light above everything, blended with `screen` so it only
   ever *adds* light on this dark palette (never muddies text). One layer
   means one shared coordinate space, so the light reads as belonging to the
   room rather than each element pulsing on its own clock. */
.wash {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

/* Amorphous drifting light. Three independent blobs rather than a swept band:
   a linear band always reads as a straight bar crossing the page, however soft
   you make it. Elliptical, heavily blurred, and re-randomised every cycle in
   app.js (size, tint, path, duration) so no repeat is ever visible. */
.wash-blob {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(95px);
}

/* oil-slick title fill. Stops sit near the base green at rest, so the
   wordmark looks untouched until you actually hover it. */
/* Symmetric: the colour takes the same slow 2.2s to arrive as it does to
   drain away. No :hover transition override, or the enter would outrun it. */
.oil-s0, .oil-s1, .oil-s2, .oil-s3 {
  transition: stop-color 2.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  stop-color: #58e08c;
}

.wordmark:hover .oil-s0 { stop-color: #46d8f0; }
.wordmark:hover .oil-s1 { stop-color: #e8c15c; }
.wordmark:hover .oil-s2 { stop-color: #f2664a; }
.wordmark:hover .oil-s3 { stop-color: #9b6bf2; }

/* film grain, keeps the large flat dark areas from looking like dead pixels */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* gradient defs container, must be in the DOM but never take up space */
.svg-defs { position: absolute; width: 0; height: 0; }

/* No z-index here on purpose: .masthead must NOT create a stacking context,
   or the intro card could never slide between the title and the tagline. */
.masthead {
  position: relative;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  /* clears the fixed .motion-toggle at every width; the title's glyphs
     overflow above their layout box, so this needs more room than it looks */
  padding: 76px 24px 6px;
}

/* Layering, root stacking context:
     1  .tagline, the card slides OVER this
     2  .intro-card, the card itself
     3  .wordmark, the card slides UNDER this (the "mask")
     4  .wash  5 .ask-bar  6 .motion-toggle          */
.wordmark {
  margin: 0;
  position: relative;
  z-index: 3;
}

/* overflow visible so the tilting "?" never clips at the viewBox edge */
.wordmark-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* font-size is in SVG user units. 93 against the 1000-unit word block yields
   a ~1.58x horizontal stretch once textLength is applied, wide enough to
   distort the letterforms (and elongate the g tail) while staying legible.
   Lower it to stretch further; raise it to relax. */
.wm-main, .wm-q {
  font-family: var(--display);
  font-weight: 700;
  font-size: 93px;
}

.wm-main {
  fill: url(#oilGrad);
  filter: drop-shadow(0 0 16px rgba(88, 224, 140, 0.4));
}

.wm-q {
  fill: var(--coral);
  filter: drop-shadow(0 0 16px rgba(242, 102, 74, 0.35));
  transform-box: fill-box;
  transform-origin: center;
  animation: q-tilt 5s ease-in-out infinite;
}

/* translate BEFORE rotate so the bob stays truly vertical rather than tilting
   along with the glyph. Same 5s period as the spin, deliberately tiny. */
@keyframes q-tilt {
  0%, 100% { transform: translateY(3px) rotate(-6deg); }
  50%      { transform: translateY(-4px) rotate(10deg); }
}

/* Gold, and waving. Different colour from both the words and the "?" so the
   three marks read as three separate voices. */
.wm-dot {
  fill: var(--gold);
  filter: drop-shadow(0 0 12px rgba(232, 193, 92, 0.45));
  transform-box: fill-box;
  transform-origin: center;
  /* The wave itself is driven from app.js (dotWave) so the gap between waves
     can be randomised per cycle; a CSS animation only holds one fixed value. */
}

}

/* viewBox layout: dots occupy -120–0, the words 0–1000, the "?" 1000–1092.

   At width:100% the whole 1212 fits inside the card, so nothing hangs.

   Past 1100px there is enough page margin outside the 880px container to let
   the dots and the "?" hang *outside* the measure. Scaling to 121.2% maps the
   1000-unit word block onto exactly the card width; the -12% margin then slides
   viewBox x=0 onto the card's left edge, so "Or Am I High" aligns edge-to-edge
   and only the dots and "?" spill past.

   1100 is a real floor, not a taste call: the left overhang is ~100px at full
   width and the page margin only reaches that at ~1080px viewport. Below it the
   dots would be clipped by `overflow-x: hidden` on <body>. */
@media (min-width: 1100px) {
  .wordmark-svg {
    width: 121.2%;
    margin-left: -12%;
  }
}

.tagline {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: clamp(0.6rem, 2vw, 0.76rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 10px 0 0;
}

/* [hidden] must win over the display below, or an empty stub renders */
.mode-pill[hidden] { display: none; }

.mode-pill {
  display: inline-block;
  margin: 12px auto 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--bone-dim);
  background: rgba(16, 26, 21, 0.7);
}

/* ── feed ── */

/* Likewise no z-index, see .masthead. */
.feed {
  position: relative;
  max-width: 880px;
  margin: 22px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card {
  background: linear-gradient(180deg, #16241d, var(--panel));
  border: 1px solid var(--panel-edge);
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow:
    inset 0 1px 0 rgba(214, 240, 222, 0.07),
    0 12px 30px rgba(0, 0, 0, 0.45);
}

/* the verdict is the payload: heavier frame, warm rim-light, engraved top rule */
.verdict-card {
  position: relative;
  padding-top: 26px;
  border-color: #2c4436;
  box-shadow:
    inset 0 1px 0 rgba(214, 240, 222, 0.12),
    0 0 0 1px rgba(88, 224, 140, 0.06),
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(88, 224, 140, 0.05);
}

.verdict-card::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 240, 222, 0.18), transparent);
}

/* z-index 2 puts it above the tagline and below the title, so the dismissal
   genuinely passes behind the wordmark rather than fading in front of it. */
.intro-card {
  /* centred at every width: the lede and the paragraph both */
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Height/margin collapse together with the lift so the feed closes the gap in
   the same motion, animating only transform would leave a hole behind it. */
.intro-card.dismissing {
  transition:
    height 0.78s cubic-bezier(0.62, 0.03, 0.3, 1),
    margin-bottom 0.78s cubic-bezier(0.62, 0.03, 0.3, 1),
    padding-top 0.78s cubic-bezier(0.62, 0.03, 0.3, 1),
    padding-bottom 0.78s cubic-bezier(0.62, 0.03, 0.3, 1),
    transform 0.78s cubic-bezier(0.62, 0.03, 0.3, 1),
    opacity 0.6s ease-in;
  height: 0 !important;
  margin-bottom: -18px; /* absorbs .feed's row gap */
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-110px);
  opacity: 0;
}

html[data-motion="off"] .intro-card.dismissing { transition: none; }

.intro-card .intro-lede {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 0;
}

.intro-card em { color: var(--phos); font-style: italic; }

.starter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* row gap deliberately looser than column gap, the chips wrap to their
     own lines on narrow widths and read as cramped at a uniform 8px */
  gap: 12px 8px;
  margin-top: 26px;
}

.starter {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--bone);
  background: rgba(88, 224, 140, 0.08);
  border: 1px solid rgba(88, 224, 140, 0.35);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.starter:hover, .starter:focus-visible {
  background: rgba(88, 224, 140, 0.2);
  transform: translateY(-1px);
}

/* user message */
.card.user-card {
  align-self: flex-end;
  max-width: 85%;
  background: linear-gradient(180deg, #1b3328, #16281f);
  border-color: #2f5240;
  padding: 14px 18px;
}

.user-card p { margin: 0; }

/* thinking state */
.card.thinking-card {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--phos);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}

/* Fixed width: the dots go "" -> "..." and without a reserved box that width
   change re-wraps the line on mobile, making the card jump height. */
.thinking-dots {
  display: inline-block;
  width: 3ch;
  text-align: left;
}

.thinking-dots::after {
  content: "";
  animation: dots 1.4s steps(4, end) infinite;
}

@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

/* A probing question: quiet on purpose. No gauge, no glow, the instrument
   is the reward for answering, so this must not compete with it. */
.question-card {
  border-color: #2a4033;
  border-left: 3px solid var(--phos-dim);
}

.question-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--phos-dim);
  margin: 0 0 8px;
}

.question-text {
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.question-why {
  font-size: 0.88rem;
  color: var(--bone-dim);
  margin: 8px 0 0;
}

/* ── verdict card + meter ── */

.verdict-card { text-align: center; }

/* zone colour, set per-card by JS; everything in the gauge reads it */
.verdict-card.zone-real { --needle-color: var(--phos); }
.verdict-card.zone-mid { --needle-color: var(--gold); }
.verdict-card.zone-high { --needle-color: var(--coral); }

/* the housing: a machined bezel with the dial recessed inside it */
.gauge { margin: 2px auto 24px; max-width: 410px; }

/* Domed bezel: the top corners are rounded hard enough that the housing
   follows the arc of the dial instead of boxing it in. Bottom stays softly
   rounded so the LCD sits on a level shelf. */
.gauge-housing {
  position: relative;
  padding: 18px 20px 20px;
  border-radius: 200px 200px 34px 34px;
  background:
    radial-gradient(120% 92% at 50% 4%, rgba(88, 224, 140, 0.07), transparent 62%),
    linear-gradient(180deg, #16281f 0%, #0d1811 58%, #070f0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(214, 240, 222, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    0 16px 34px rgba(0, 0, 0, 0.5),
    0 0 44px rgba(88, 224, 140, 0.05);
}

.meter { width: 100%; height: auto; display: block; }

.dial-face {
  fill: url(#faceGrad);
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1;
}

.meter-track {
  fill: none;
  stroke: url(#trackGrad);
  stroke-width: 13;
  stroke-linecap: round;
}

/* the swept portion, drawn in the verdict's zone colour */
.meter-fill {
  fill: none;
  stroke: var(--needle-color, var(--phos));
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0.92;
  filter: drop-shadow(0 0 7px var(--needle-color, var(--phos)));
  transition: stroke-dashoffset 1.6s cubic-bezier(0.34, 1.25, 0.4, 1);
}

.ticks line {
  stroke: rgba(228, 239, 230, 0.28);
  stroke-width: 1.5;
}

.ticks line.major {
  stroke: rgba(214, 240, 222, 0.75);
  stroke-width: 2.5;
}

.scale-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.label-real { fill: rgba(88, 224, 140, 0.85); }
.label-high { fill: rgba(242, 102, 74, 0.9); }

.needle-group {
  transform: rotate(-90deg);
  transform-origin: 160px 155px;
  transition: transform 1.6s cubic-bezier(0.34, 1.25, 0.4, 1);
}

.needle {
  stroke: var(--bone);
  stroke-width: 3.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(214, 240, 222, 0.5));
}

/* short counterweight on the far side of the pivot, like a real movement */
.needle-tail {
  stroke: var(--bone);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.55;
}

.hub-ring {
  fill: none;
  stroke: rgba(214, 240, 222, 0.22);
  stroke-width: 1.5;
}

.needle-hub {
  fill: radial-gradient(#fff, #000);
  fill: #dcebe0;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 2;
}

/* specular sweep across the top-left of the glass */
.dial-glass { fill: url(#glassGrad); pointer-events: none; }

/* inset LCD window under the dial */
.readout {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin: 6px 0 0;
  padding: 6px 18px 7px;
  border-radius: 999px;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--needle-color, var(--phos));
  background: rgba(0, 0, 0, 0.42);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(214, 240, 222, 0.08);
  text-shadow: 0 0 9px currentColor;
}

.readout .pct {
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.readout .pct-unit { font-size: 1rem; }

.readout-caption {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-shadow: none;
  margin-left: 9px;
  align-self: center;
}

.verdict-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.6vw, 1.75rem);
  letter-spacing: -0.015em;
  max-width: var(--measure);
  color: var(--bone);
  /* shorthand must come before the auto margins, or it resets them to 0 */
  margin: 14px auto 8px;
  line-height: 1.2;
}

.verdict-explanation {
  text-align: left;
  margin: 22px auto 0;   /* breaks it away from the centred headline */
  max-width: var(--measure);
  color: var(--bone);
}

.grounding {
  display: block;
  text-align: left;
  margin: 24px auto 0;
  max-width: var(--measure);
  padding: 15px 18px 16px;
  border: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(214, 240, 222, 0.05),
    inset 0 0 0 1px rgba(214, 240, 222, 0.04);
}

.grounding-tag {
  display: block;
  margin-bottom: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--phos-dim);
  white-space: normal;
}

.grounding-text { font-size: 0.95rem; }

.emergency-note {
  margin: 18px auto 0;
  max-width: var(--measure);
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--coral);
  border-radius: 16px;
  background: rgba(242, 102, 74, 0.12);
  font-weight: 700;
}

/* ── ask bar ── */

.ask-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 24px calc(16px + env(safe-area-inset-bottom));
  background: none;
}

/* Full-bleed backdrop. It cannot live on .ask-bar itself: that box is capped
   at 880px and centred, so its background ended in two hard vertical edges
   mid-screen. Spanning the viewport lets it fade out with no visible sides. */
.ask-bar::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 165px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 15, 12, 0) 0%,
    rgba(8, 15, 12, 0.5) 38%,
    rgba(8, 15, 12, 0.85) 70%,
    rgba(8, 15, 12, 0.95) 100%
  );
}

#askInput {
  flex: 1;
  resize: none;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--bone);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 18px;
  padding: 13px 16px;
  outline: none;
  max-height: 140px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#askInput::placeholder { color: rgba(154, 176, 162, 0.55); font-style: italic; }

#askInput:focus-visible {
  border-color: var(--phos);
  box-shadow: 0 0 0 3px rgba(88, 224, 140, 0.18);
}

#askBtn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--abyss);
  background: var(--phos);
  border: none;
  border-radius: 18px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(88, 224, 140, 0.24);
  transition: transform 0.12s, box-shadow 0.12s;
}

#askBtn:hover:not(:disabled), #askBtn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(88, 224, 140, 0.4);
}

#askBtn:disabled { opacity: 0.5; cursor: wait; }

/* ── footer ── */

.legal {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 22px auto 0;
  padding: 0 24px;
  font-size: 0.82rem;
  color: var(--bone-dim);
}

.legal summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.legal p {
  border: 1px dashed var(--panel-edge);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 8px;
}

/* motion respect */
@media (prefers-reduced-motion: reduce) {
  .needle-group, .meter-fill { transition: none; }
  .wm-dot { animation: none; }
  .wash { display: none; }
  .haze { animation: none; }
  .wm-q { animation: none; }
  .thinking-dots::after { animation: none; content: "..."; }
  html { scroll-behavior: auto; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .card { padding: 18px 16px; }
  /* .masthead included so the title keeps matching the card width exactly */
  .masthead, .feed, .ask-bar, .legal { padding-left: 14px; padding-right: 14px; }
  .starter { font-size: 0.62rem; padding: 7px 11px; }
  .legal summary { font-size: 0.66rem; }
}