/* ==========================================================================
   Sundeck — /demo and /thanks.

   Loaded AFTER /styles.css, and only ever adds what that file has no component
   for. Tokens (--paper, --ink, --clay, --rule, --serif …), .shell, .band, .btn,
   .eyebrow, .lede, .numeral, .two-col's 900px breakpoint, .panel/.panel-good,
   .ledger/.ledger-list/.defer, .note, .form-msg and .sr-only all come from
   there — including both colour schemes, which is why there is not a single raw
   hex below. Every colour here is a var(); no new tokens were needed.

   The site ships a strict CSP (style-src 'self'), so nothing on these pages may
   use a style="" attribute — styles.css:250 records the production-only
   collapse that taught us. Anything positional lives here.
   ========================================================================== */

/* Half the page is a live render: elements appear and disappear by attribute.
   Several of them are flex/grid children, whose display would otherwise beat
   the UA's [hidden] rule. */
[hidden] { display: none !important; }

/* ── Page header ─────────────────────────────────────────────────────────── */

.demo-head { padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.demo-head h1 { max-width: 16ch; margin-inline: auto; }
.demo-head .lede { margin-inline: auto; max-width: 46ch; }
.demo-permission { margin-top: 1.1rem; }

/* ── The instrument ──────────────────────────────────────────────────────── */

.instrument {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: start;
}
/* Same 900px hinge as .two-col — the page has one breakpoint, not two. */
@media (min-width: 900px) { .instrument { grid-template-columns: 1fr 1fr; } }

/* Mobile: the forecast follows you up the page with the keyboard open, so the
   number you are changing never scrolls out from under your thumb. Sits below
   the sticky nav (4rem) and paints its own paper so text cannot show through. */
.result-bar {
  position: sticky;
  top: 4rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0 0.5rem;
  margin-bottom: 0.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.result-bar .strip-cap { margin-left: auto; white-space: nowrap; }
.result-bar .sq { width: 0.6rem; height: 0.6rem; }
.result-bar .strip { gap: 0.22rem; }
@media (min-width: 900px) { .result-bar { display: none; } }

/* Desktop short viewports: the verdict stays put while the fields scroll. */
@media (min-width: 900px) { .result { position: sticky; top: 5.5rem; } }

/* ── Fields ──────────────────────────────────────────────────────────────── */

.fields { margin: 0; padding: 0; border: 0; }
.fields legend { padding: 0; }

.field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.field:first-of-type { border-top: 1px solid var(--rule-soft); }
.field label { color: var(--ink-soft); font-size: 0.95rem; max-width: 24ch; }

.field input {
  flex: none;
  width: 5rem;
  min-height: 2.75rem;          /* 44px: this is a touch target too */
  padding: 0.2rem 0.35rem;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.2;
  text-align: right;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}
.field input:focus { border-bottom-color: var(--accent); }

/* Spinners are a mouse affordance on a field people type two digits into, and
   they crowd a serif numeral. */
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input { -moz-appearance: textfield; appearance: textfield; }

/* The soft note that appears while an impossible number is being typed. Full
   width so it drops under the row instead of shoving the field around — the
   value is never rewritten mid-keystroke, so the layout must not move either. */
.field-note {
  flex: 1 0 100%;
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--clay);
  text-align: right;
}
.field-help { margin: 1.1rem 0 0; font-size: 0.86rem; color: var(--muted); }

/* ── The render ──────────────────────────────────────────────────────────── */

.result-caption {
  margin: 0 0 1.4rem;
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 34ch;
}

.result .eyebrow { margin-bottom: 0.8rem; }

/* One quiet fade between verdicts: the strip is live, the sentence is a
   decision. Reduced motion swaps instantly (below). */
.verdict { transition: opacity 0.18s ease; }
.verdict.is-fading { opacity: 0; }

.forecast {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem);
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 20ch;
  margin-bottom: 1.4rem;
}

/* .numeral's own 4.6rem is a display size for the phone mock; inline in a
   sentence it needs the same vocabulary at sentence scale — hence the compound
   selector rather than a second numeral class. */
.numeral.demo-numeral {
  font-size: 1.22em;
  line-height: inherit;
  letter-spacing: -0.035em;
  border-bottom: 2px solid var(--clay);
  padding-bottom: 0.04em;
  white-space: nowrap;
}
.result-bar .numeral.demo-numeral { font-size: 1.5rem; padding-bottom: 0.02em; }

.strip { display: flex; gap: 0.3rem; margin: 0 0 0.55rem; }
.sq {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
}
.sq-on { background: var(--ink); border-color: var(--ink); }

.strip-cap {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 8A: an observation on paper, not the .defer pill. */
.verdict-defer {
  margin: 1.5rem 0 0;
  color: var(--clay);
  max-width: 40ch;
}
.verdict-hedge { margin: 1rem 0 0; font-size: 0.9rem; color: var(--muted); }
.verdict-waiting { margin: 1rem 0 0; font-size: 0.86rem; color: var(--muted); }

.disclosure { margin-top: clamp(2rem, 4vw, 3rem); max-width: 54ch; }

/* ── The guest door ──────────────────────────────────────────────────────── */

.door { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.door .note { margin-top: 0.9rem; }

/* Both CTAs are 44px tall on the nose — .btn's padding lands near it, and
   "near" is not a touch target. */
.cta-guest,
.cta-preorder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  text-align: center;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */

.pricing h2 { margin-inline: auto; }
.tiers { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .tiers { grid-template-columns: 1fr 1fr; } }

.tier h3 { font-size: 1.25rem; margin-bottom: 0.2rem; }

/* The hairline that splits the tiers IS .panel-good's border colour: 7A asks
   for both a hairline split and a .panel-good Plus column, and one mark can be
   both. No border-color is set here on purpose — styles.css owns it. */
.tier-plus {
  border-style: solid;
  border-width: 1px 0 0 0;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
}
@media (min-width: 900px) {
  .tier-free { padding-right: clamp(1.5rem, 4vw, 3.5rem); }
  .tier-plus {
    border-width: 0 0 0 1px;
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(1.5rem, 4vw, 3.5rem);
  }
}

.price { display: flex; align-items: baseline; gap: 0.1rem; margin: 0.5rem 0 1.3rem; }
.numeral.price-n { font-size: 2.7rem; line-height: 1; }
.price-per { font-size: 0.95rem; color: var(--muted); }

.tier-list {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.tier-list li { position: relative; padding-left: 1.3rem; }
.tier-list li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }

.tier-after { font-size: 0.86rem; color: var(--muted); }

/* The Plus mock, built from .ledger / .ledger-list / .defer. */
.ledger-plus { margin-top: 1.8rem; }
.band-alt .ledger-plus { background: var(--paper); }
.rate { font-variant-numeric: tabular-nums; font-weight: 550; color: var(--ink-soft); font-size: 0.9rem; }

/* ── Pre-order ───────────────────────────────────────────────────────────── */

.preorder {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.founder { max-width: 44ch; margin-inline: auto; color: var(--ink); }
.preorder-sub { margin-top: 0.9rem; }
.preorder .form-msg { max-width: 44ch; margin-inline: auto; }
.trust-line { max-width: 52ch; margin-inline: auto; }

/* ── /thanks ─────────────────────────────────────────────────────────────── */

.thanks { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.thanks h1 { max-width: 18ch; margin-inline: auto; }
.thanks .prose { margin-inline: auto; }
/* The promise, restated. Left-aligned inside a centred page because a list of
   commitments should read like a list, not like a poster. */
.thanks-list { max-width: 34rem; margin: 2rem auto; text-align: left; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2.4rem; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* demo.js already swaps the verdict instantly here; this makes sure a stray
     class can never animate it anyway. */
  .verdict { transition: none; }
  .verdict.is-fading { opacity: 1; }
}

@media print {
  .result-bar { position: static; }
}