/* ================================================================
   Tell the Story of Our Schools — Master Stylesheet

   Direction: warm editorial. A community newsletter set with care,
   not a campaign flyer. Lora (serif) display over Source Sans Pro
   body — the same faces as citizensforlps.org — on warm paper.
   The brand green (#90CA65, sampled from the Citizens for LPS logo)
   is used the way a person uses a highlighter: sparingly, on the
   words that matter. Slate (#323F49) is the ink. Star bullets echo
   the logo's star. Hairline rules, generous whitespace, no drop
   shadows, restrained motion.

   The logo green fails WCAG AA for white text, so buttons are slate
   and links are a darkened green; the bright green appears only as
   highlight, accent, and fills.
================================================================ */

:root {
  /* Brand — chrome only */
  --green: #90CA65;             /* logo green: highlighter, accents */
  --green-deep: #4E7B2C;        /* accessible green: links */
  --ink: #323F49;               /* logo slate: text, buttons */
  --ink-soft: #5A6772;
  --paper: #FBFAF7;             /* warm paper, not white */
  --paper-raised: #FFFFFF;
  --hairline: #E3E2DC;
  --hl-wash: rgba(144, 202, 101, 0.32);

  /* Semantic — content meaning only */
  --estimate: #8A6D1A;          /* unverified-figure labels (Decision 054) */

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans Pro', 'Source Sans 3', system-ui, -apple-system, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --green: #90CA65;
    --green-deep: #A8D584;
    --ink: #E7EAEC;
    --ink-soft: #A9B2B9;
    --paper: #191D20;
    --paper-raised: #22272B;
    --hairline: #394147;
    --hl-wash: rgba(144, 202, 101, 0.22);
    --estimate: #D9B44A;
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/*
 * Body flex-column — keeps content out of Safari's Dynamic Island.
 * NO viewport-fit=cover, NO position:fixed overlays. <main> is the
 * scroll container (IntersectionObserver root must be #main-content).
 */
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--green-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

/* ---- Accessibility ---- */
.skip-link {
  position: absolute; top: -100%; left: 0;
  padding: 8px 16px; background: var(--ink); color: var(--paper);
  z-index: 9999; font-weight: 700;
}
.skip-link:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* ---- Header ---- */
.site-header {
  flex-shrink: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s4) var(--s4) 0;
}
.header-inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
}
/* The lockup carries a tagline, so it needs more height than a bare
   wordmark before "INVEST FOR A STRONG LPS" turns into a grey smear. */
.wordmark img { height: 52px; width: auto; }
@media (min-width: 720px) { .wordmark img { height: 60px; } }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .logo-light { display: none; }
  .logo-dark { display: block; }
}
.header-tag {
  font-family: var(--serif); font-style: italic; font-size: 0.95rem;
  color: var(--ink-soft); text-align: right;
}

/* Five tabs no longer fit a 375px phone, and the nav was already
   overflow-x:auto with the scrollbar hidden — so it scrolled with no
   hint that it could. The mask is applied by JS only when it actually
   overflows, otherwise it would clip the last tab on a desktop. */
.site-nav.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.site-nav {
  max-width: 720px; margin: var(--s3) auto 0;
  display: flex; gap: var(--s2); overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar { display: none; }
.nav-item {
  flex-shrink: 0; padding: 8px 2px 12px; margin-right: var(--s4);
  border: none; background: none; cursor: pointer;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  color: var(--ink-soft);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.nav-item.active { color: var(--ink); border-bottom-color: var(--green); }
.nav-item:hover:not(.active) { color: var(--ink); }

/* ---- Main / views ---- */
#main-content { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: none; }
.view { display: none; padding: var(--s8) var(--s4) var(--s12); }
.view:not([hidden]) { display: block; }
.view-inner { max-width: 720px; margin: 0 auto; }

/* Staggered arrival — one quiet reveal per view, CSS only.
   Wizard steps (.wstep) are excluded: they animate on their own with
   NO delay, so switching steps never flashes blank. */
.view:not([hidden]) .view-inner > :not(.wstep) { animation: rise 0.45s ease both; }
.view:not([hidden]) .view-inner > :not(.wstep):nth-child(2) { animation-delay: 0.05s; }
.view:not([hidden]) .view-inner > :not(.wstep):nth-child(3) { animation-delay: 0.10s; }
.view:not([hidden]) .view-inner > :not(.wstep):nth-child(4) { animation-delay: 0.15s; }
.view:not([hidden]) .view-inner > :not(.wstep):nth-child(n+5) { animation-delay: 0.2s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Type ---- */
.eyebrow {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--green-deep); margin-bottom: var(--s3);
}
.hero { padding-top: var(--s6); }
.hero-title, .view-heading {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; text-wrap: balance;
}
.hero-title { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; margin-bottom: var(--s6); }
.view-heading { font-size: clamp(1.6rem, 4.5vw, 2.1rem); line-height: 1.2; margin-bottom: var(--s4); }
.hero-lede, .lede {
  font-size: 1.15rem; line-height: 1.65; color: var(--ink);
  max-width: var(--measure); margin-bottom: var(--s8);
}
.section-title {
  font-family: var(--serif); font-weight: 600; font-size: 1.3rem;
  color: var(--ink); margin: var(--s12) 0 var(--s4);
}
.body { margin-bottom: var(--s3); max-width: var(--measure); }
.fine { font-size: 0.88rem; color: var(--ink-soft); max-width: var(--measure); margin-bottom: var(--s3); }
.fine a { color: var(--green-deep); }

/* Highlighter stroke — the one decorative signature */
.hl {
  background: linear-gradient(to top, var(--hl-wash) 0 42%, transparent 42%);
  padding: 0 2px;
}

.rule { border-top: 1px solid var(--hairline); margin: var(--s12) 0; }

/* ---- Star list (echoes the logo star) ---- */
.star-list { list-style: none; max-width: var(--measure); margin-bottom: var(--s6); }
.star-list li { padding-left: 1.6em; position: relative; margin-bottom: var(--s3); }
.star-list li::before {
  content: "\2605"; position: absolute; left: 0; top: 0.05em;
  color: var(--green); font-size: 0.9em;
}

/* ---- Steps (home) ---- */
.steps { display: grid; gap: var(--s6); margin-bottom: var(--s6); }
.step { display: flex; gap: var(--s4); align-items: flex-start; }
.step-num {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: var(--green); flex-shrink: 0; min-width: 1.2em;
}
.step-title { font-weight: 700; margin-bottom: var(--s1); }
.step-body { color: var(--ink-soft); margin-bottom: var(--s2); max-width: 52ch; }

/* ---- Buttons & links ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; font-weight: 700; font-size: 0.98rem;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 6px; cursor: pointer;
  box-shadow: inset 0 -3px 0 var(--green);
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-quiet {
  background: transparent; color: var(--ink);
  border: 1px solid var(--hairline); box-shadow: none;
}
.btn-quiet:hover { border-color: var(--ink-soft); }
.link-btn {
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--green-deep); font-weight: 700; font-size: 0.95rem;
}
.link-btn:hover { text-decoration: underline; }
.link-btn-inline {
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--green-deep); text-decoration: underline;
  text-underline-offset: 2px; font-size: inherit;
}
.cta-row { margin: var(--s6) 0; }

/* ---- Ballot summary (home) ---- */
.ballot-item { max-width: var(--measure); margin-bottom: var(--s4); }
.ballot-item p { margin-bottom: var(--s1); }
.src-link { font-size: 0.82rem; color: var(--ink-soft); }
.src-link a { color: var(--ink-soft); }
.src-link a:hover { color: var(--green-deep); }

/* ---- Story prompts ---- */
.prompt-card {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  border-left: 3px solid var(--green);
  padding: var(--s2) var(--s4); margin-bottom: var(--s3);
  max-width: var(--measure); cursor: pointer;
  color: var(--ink);
}
.prompt-card:hover { background: var(--hl-wash); }
.prompt-hint { font-size: 0.8rem; font-style: normal; font-family: var(--sans); color: var(--ink-soft); display: block; margin-top: 2px; }

/* ---- Studio ---- */
.field-label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: var(--s2); }
.draft-box {
  width: 100%; padding: var(--s4);
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: 6px; font-size: 1.02rem; line-height: 1.55;
  resize: vertical;
}
.draft-box:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.draft-meta { font-size: 0.82rem; color: var(--ink-soft); margin-top: var(--s2); }

.fact-row {
  display: flex; gap: var(--s4); align-items: baseline;
  padding: var(--s4) 0; border-bottom: 1px solid var(--hairline);
  max-width: var(--measure);
}
.fact-text { flex: 1; }
.fact-text .src-link { display: block; margin-top: 2px; }
.fact-add {
  flex-shrink: 0; border: 1px solid var(--hairline); background: none;
  border-radius: 6px; padding: 6px 14px; font-weight: 700;
  font-size: 0.85rem; cursor: pointer; color: var(--green-deep);
}
.fact-add:hover { border-color: var(--green); background: var(--hl-wash); }

/* ---- Card maker ---- */
.card-maker { max-width: var(--measure); }
.card-controls {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end;
  margin: var(--s4) 0;
}
.select {
  padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 6px;
  background: var(--paper-raised); font-size: 0.95rem;
}
.card-preview {
  border: 1px solid var(--hairline); border-radius: 6px;
  width: 100%; max-width: 380px; height: auto; background: #fff;
}


/* ---- Calculator ---- */
.calc-card {
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-top: 3px solid var(--green);
  border-radius: 8px; padding: var(--s6); margin-bottom: var(--s4);
  max-width: var(--measure);
}
.field-group { margin-bottom: var(--s4); }
.field-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--hairline);
  border-radius: 6px; background: var(--paper); font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.field-input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.calc-steps { margin-bottom: var(--s3); }
.calc-step {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4); padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline); font-size: 0.98rem;
}
.calc-step:last-child { border-bottom: none; }
.calc-step-label { color: var(--ink-soft); }
.calc-step-math { font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.calc-step-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-result { padding-top: var(--s4); }
.calc-result .calc-step-value {
  font-family: var(--serif); font-size: 1.6rem; color: var(--ink);
  background: linear-gradient(to top, var(--hl-wash) 0 40%, transparent 40%);
  padding: 0 4px;
}
.estimate-note { font-size: 0.88rem; color: var(--estimate); font-weight: 600; margin-bottom: var(--s3); max-width: var(--measure); }
.calc-details summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--green-deep); margin-bottom: var(--s3); }

/* ---- Playbook ---- */
.play-item { padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); max-width: var(--measure); }
.play-name { font-weight: 700; margin-bottom: var(--s1); }
.play-name .play-role {
  font-weight: 600; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--green-deep); margin-left: var(--s2);
}
.play-how { color: var(--ink-soft); font-size: 0.95rem; }

.sources-list { font-size: 0.9rem; max-width: var(--measure); }
.sources-list li { margin-bottom: var(--s2); margin-left: 1.2em; }

/* ---- Footer ---- */
.site-footer {
  flex-shrink: 0; padding: var(--s4);
  border-top: 1px solid var(--hairline); background: var(--paper);
}
.footer-line {
  max-width: 720px; margin: 0 auto var(--s1);
  font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5;
}
.footer-line a { color: var(--ink-soft); }
.footer-line a:hover { color: var(--green-deep); }

/* ================================================================
   Share studio wizard — one step at a time, always a next move
================================================================ */

/* Stepper */
.stepper {
  display: flex; gap: 0; margin: var(--s6) 0 var(--s8);
  border-bottom: 1px solid var(--hairline);
}
.stepper-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 0 4px 12px; border: none; background: none;
  cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px;
  color: var(--ink-soft);
}
.stepper-num {
  font-family: var(--serif); font-weight: 700; font-size: 1.3rem;
  line-height: 1.2; color: inherit;
}
.stepper-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.stepper-item.current { color: var(--ink); border-bottom-color: var(--green); }
.stepper-item.done { color: var(--green-deep); }
.stepper-item.done .stepper-num::after { content: " \2713"; font-size: 0.8em; }
.stepper-item:hover:not(.current) { color: var(--ink); }

.wstep[hidden] { display: none; }
.wstep { animation: rise 0.35s ease both; }
.wstep-title {
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem;
  color: var(--ink); margin-bottom: var(--s3);
}
.wstep-optional { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.wstep-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s8); padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}

/* Step 1: voice tiles */
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s4); }
@media (min-width: 560px) { .voice-grid { grid-template-columns: repeat(3, 1fr); } }
.voice-tile {
  padding: var(--s4); border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--paper-raised); cursor: pointer; text-align: left;
  font-weight: 600; font-size: 0.92rem; line-height: 1.35; color: var(--ink);
}
.voice-tile:hover { border-color: var(--green); }
.voice-tile.selected { border-color: var(--green); background: var(--hl-wash); }
.voice-prompts { margin-top: var(--s2); }

/* Step 2: helper accordions */
.helper-details {
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: var(--s3) var(--s4); margin-top: var(--s4);
  background: var(--paper-raised);
}
.helper-details summary { cursor: pointer; font-weight: 700; font-size: 0.92rem; color: var(--green-deep); }
.helper-details[open] summary { margin-bottom: var(--s3); }

/* Step 4: draft review + target tiles */
.draft-review {
  border-left: 3px solid var(--green); background: var(--paper-raised);
  border-radius: 0 8px 8px 0; padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.draft-review-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: var(--s1); }
.draft-review-text { font-family: var(--serif); font-style: italic; margin-bottom: var(--s1); }

.target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s4); }
@media (min-width: 560px) { .target-grid { grid-template-columns: repeat(3, 1fr); } }
.target-tile {
  padding: var(--s4); border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--paper-raised); cursor: pointer; text-align: left;
}
.target-tile:hover { border-color: var(--green); }
.target-tile.selected { border-color: var(--green); background: var(--hl-wash); }
.target-tile.sent { border-color: var(--green); }
.target-tile-name { display: block; font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.target-tile-role { font-size: 0.78rem; color: var(--ink-soft); }
.target-tile.sent .target-tile-name::after { content: " \2713"; color: var(--green-deep); }

.target-detail {
  border: 1px solid var(--green); border-radius: 10px;
  background: var(--paper-raised); padding: var(--s6);
  margin-bottom: var(--s4); animation: rise 0.3s ease both;
}
.target-detail-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin-bottom: var(--s3); }
.micro-steps { list-style: none; counter-reset: micro; margin-bottom: var(--s4); }
.micro-steps li {
  counter-increment: micro; position: relative;
  padding-left: 2em; margin-bottom: var(--s2); font-size: 0.95rem;
}
.micro-steps li::before {
  content: counter(micro); position: absolute; left: 0; top: 0.1em;
  width: 1.4em; height: 1.4em; border-radius: 50%;
  background: var(--hl-wash); color: var(--green-deep);
  font-weight: 700; font-size: 0.85em; display: flex;
  align-items: center; justify-content: center;
}
.target-detail-extra { margin-top: var(--s3); }
.sent-tally { font-weight: 600; color: var(--green-deep); margin-bottom: var(--s3); }

/* ---- Forums (home) — the "come with me" list ---- */
.forum-list { list-style: none; max-width: var(--measure); margin-bottom: var(--s3); }
.forum-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4);
  align-items: baseline; padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
}
.forum-when { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.forum-day { font-weight: 700; }
.forum-time { font-size: 0.88rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.forum-place { color: var(--ink-soft); grid-column: 1; }
.forum-invite { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.voice-forum { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hairline); }

/* ---- Story checklist (step 2) — teaches, never blocks ---- */
.story-checks {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border-left: 3px solid var(--hairline); max-width: var(--measure);
}
.checks-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: var(--s2); }
.checks { list-style: none; }
.check { display: flex; gap: var(--s2); align-items: baseline; font-size: 0.92rem; margin-bottom: var(--s1); color: var(--ink-soft); }
.check-mark { flex-shrink: 0; width: 1.2em; font-weight: 700; color: var(--ink-soft); }
.check.ok { color: var(--ink); }
.check.ok .check-mark { color: var(--green-deep); }
.check-label { font-weight: 600; }
.check-hint { font-size: 0.85rem; }
.check.ok .check-hint { color: var(--ink-soft); }
.draft-notice {
  font-size: 0.9rem; padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  background: var(--hl-wash); border-radius: 6px; max-width: var(--measure);
}

/* ---- Step 4: honest fit + the always-there fallback ---- */
.target-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.target-actions .btn { text-decoration: none; }
.fit-line { font-size: 0.88rem; margin-bottom: var(--s3); color: var(--ink-soft); }
.fit-ok { color: var(--green-deep); }
.fit-over { color: var(--estimate); font-weight: 600; }
.fallback-line {
  font-size: 0.88rem; color: var(--ink-soft); margin-top: var(--s3);
  padding-top: var(--s3); border-top: 1px dashed var(--hairline);
}
.target-tile-handoff { border-style: dashed; }
.handoff-link { font-size: 0.85rem; margin-bottom: var(--s3); color: var(--ink-soft); }

/* ---- Step 3: the card maker — segmented choices, live preview ---- */
.seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--paper-raised); cursor: pointer;
  font-size: 0.86rem; font-weight: 600; color: var(--ink-soft);
}
.seg-btn:hover { border-color: var(--green); color: var(--ink); }
.seg-btn.selected { border-color: var(--ink); color: var(--ink); background: var(--hl-wash); }
.swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(0,0,0,0.15); }
.seg-source { margin-bottom: var(--s4); }
.seg-source .seg-btn { padding: 10px 16px; font-size: 0.95rem; }
.photo-picker { margin-bottom: var(--s4); }
.photo-picker .btn { margin-bottom: var(--s2); }
.card-sign-label { margin-top: var(--s3); }
.card-layout { display: grid; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 640px) { .card-layout { grid-template-columns: 1fr 300px; align-items: start; } }
.card-controls { display: grid; gap: var(--s3); }
.card-control .field-label { margin-bottom: var(--s1); }
.card-preview-col { display: grid; gap: var(--s2); justify-items: start; }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

/* ---- Step 4: the picture travels with the words ---- */
.draft-review { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .draft-review { grid-template-columns: 1fr auto; align-items: start; } }
.draft-review-card { display: grid; gap: var(--s2); justify-items: start; }
.review-card-img { width: 120px; height: auto; border: 1px solid var(--hairline); border-radius: 4px; }
.review-card-toggle { font-size: 0.85rem; font-weight: 600; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.card-send-row { margin-top: var(--s3); }
.card-send-row .fine { margin-top: var(--s2); margin-bottom: 0; }

/* ================================================================
   Profile photo frame

   The canvas is square because platforms crop to a circle inscribed
   in it; the preview is rounded so a writer sees what Facebook will
   actually show, while the exported PNG keeps its corners for the
   platforms that don't crop.
================================================================ */
.frame-picker {
  border: 2px dashed var(--hairline); border-radius: 16px;
  padding: var(--s8) var(--s6); text-align: center; margin-top: var(--s6);
  background: var(--surface, transparent);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.frame-picker.drag { border-color: var(--green); background: var(--hl-wash); }
/* .fine caps at 68ch. Without auto margins that block sits flush left
   inside a centred parent, so its centred text lands off-centre. */
.frame-picker .fine { margin-inline: auto; }
.frame-picker.has-photo { padding: var(--s4); }
.frame-picker .fine { margin-top: var(--s3); }
.frame-picker kbd {
  font: inherit; background: var(--surface, var(--paper-raised));
  border: 1px solid var(--hairline); border-radius: 4px; padding: 0 4px;
}

/* `display` here would override the hidden attribute, exactly as
   .view and .wstep already guard against elsewhere in this file. */
.frame-studio { margin-top: var(--s6); display: grid; gap: var(--s6); }
.frame-studio[hidden], #frame-next[hidden] { display: none; }
@media (min-width: 720px) {
  .frame-studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.frame-canvas {
  width: 100%; height: auto; max-width: 340px; display: block;
  margin: 0 auto; border-radius: 50%; touch-action: none; cursor: grab;
  background: var(--surface, var(--paper-raised));
  box-shadow: 0 10px 30px rgba(20, 26, 30, 0.16);
}
.frame-canvas:active { cursor: grabbing; }
.frame-nudge { text-align: center; margin-top: var(--s4); }

/* Real-size proof strip — the badge has to survive 48px. */
.frame-sizes {
  display: flex; align-items: flex-end; justify-content: center;
  gap: var(--s6); margin-top: var(--s5, var(--s4));
  padding-top: var(--s4); border-top: 1px solid var(--hairline);
}
.frame-sizes figure { margin: 0; text-align: center; }
.frame-sizes canvas { display: block; margin: 0 auto var(--s2); border-radius: 50%; }
.frame-sizes figcaption { font-size: 0.72rem; color: var(--ink-soft); }
.frame-sizes-note { text-align: center; margin-top: var(--s3); }

.frame-controls { display: flex; flex-direction: column; gap: var(--s5, var(--s4)); }
.frame-controls .field-label { margin-bottom: var(--s2); }
.frame-group { display: flex; flex-direction: column; gap: var(--s2); }

/* Range needs explicit track/thumb rules; accent-color alone leaves a
   default-looking control next to the custom segmented buttons. */
.frame-range { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; }
.frame-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--hairline);
}
.frame-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--hairline); }
.frame-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: var(--green-deep); border: 3px solid var(--paper);
  box-shadow: 0 1px 4px rgba(20, 26, 30, 0.3); margin-top: -8px;
}
.frame-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--green-deep);
  border: 3px solid var(--paper); box-shadow: 0 1px 4px rgba(20, 26, 30, 0.3);
}
.frame-range:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 4px; }

.check-row { display: flex; align-items: center; gap: var(--s2); font-size: 0.95rem; }
.check-row input { accent-color: var(--green-deep); width: 18px; height: 18px; }
.frame-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.seg-wrap { flex-wrap: wrap; }
.btn-small { padding: var(--s2) var(--s4); font-size: 0.88rem; }
.frame-photo-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }
.frame-controls .helper-details { margin-top: var(--s2); }
.frame-controls .helper-details .check-row { margin-top: var(--s2); }