/* Self-sort — quiz-specific delta on top of ti.css (loaded first, see index.html).
   ti.css already supplies :root tokens, reset, body, masthead, footer, .band/.wrap,
   .form-panel, .panel-over/.panel-h/.panel-lead, .field/label/input, button.primary,
   .progress-track/.progress-fill, .heritage-figure, .fineprint, .form-error, and the
   .seq entrance-motion keyframe (gated behind prefers-reduced-motion, same as the rest
   of the brand). This file adds ONLY what the quiz needs that ti.css does not already
   define: the answer-option list, the intro figure crop, the reveal's family index
   (ledger), and the tie-note / host-banner sizing. No new colors, no new type, no
   rounded corners, no shadows, no gradients — same gates as every other TI surface. */

.ss-band{padding-top:var(--sp-xl);padding-bottom:var(--sp-2xl);min-height:calc(100vh - 220px);}
.ss-wrap{max-width:36rem;}

/* The shared masthead is a translucent frosted bar; on these tall single-column result
   screens the scrolling copy shows THROUGH it, so text appears above the logo line. Make
   it solid on this page so the header is opaque and nothing bleeds up past it. */
.masthead{background:var(--ground-light);backdrop-filter:none;-webkit-backdrop-filter:none;}

/* ===== INTRO — the opt-in front door =====
   Rebuilt 2026-07-19 per Liz's design review: the headline leads the page (the old top
   heritage image was wasting the whole above-the-fold and is gone), it is centered and big
   enough to read at a glance instead of crammed left into a narrow ragged column, and the
   eyebrow is sized to actually be read rather than a tiny red line. This block gives the
   intro its OWN wider measure (44rem), overriding .ss-wrap's 36rem question column. */
.ss-band:has(.ss-hero){min-height:calc(100vh - 180px);}
.ss-hero{
  max-width:40rem;margin:0 auto;text-align:center;padding-top:var(--sp-md);
}
.ss-eyebrow{
  font-family:var(--font-mono);font-size:13px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--oxide);line-height:1.55;margin:0 auto var(--sp-md);max-width:44ch;
}
.ss-hero-h{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.2rem,1.5rem + 2.8vw,3.2rem);line-height:1.08;letter-spacing:-0.015em;
  color:var(--ink);margin:0 auto var(--sp-sm);max-width:19ch;
}
.ss-hero-deck{
  font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:clamp(1.3rem,1.05rem + 0.95vw,1.72rem);line-height:1.25;
  color:var(--oxide);margin:0 auto var(--sp-lg);max-width:28ch;
}
.ss-hero-lead{
  font-family:var(--font-body);font-size:clamp(1.02rem,0.98rem + 0.32vw,1.16rem);
  line-height:1.62;color:var(--slate);margin:0 auto var(--sp-lg);max-width:46ch;
}
.ss-hero-cred{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;line-height:1.55;
  color:var(--stone);margin:0 auto var(--sp-lg);max-width:42ch;
  padding-top:var(--sp-sm);border-top:1px solid var(--bone-mid);width:fit-content;
}
.ss-hero-cta{width:auto;min-width:min(24rem,100%);}
@media (max-width:640px){
  .ss-hero{padding-top:var(--sp-2xs);}
  .ss-hero-h{font-size:2rem;max-width:16ch;}
  .ss-hero-cta{min-width:100%;}
}

/* ===== ANSWER OPTIONS ===== */
.opt-list{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-sm);}
.opt-btn{
  text-align:left;
  font-family:var(--font-body);font-size:16px;line-height:1.42;
  color:var(--ink);background:var(--bone);
  border:1px solid var(--bone-mid);border-radius:0;
  padding:14px 16px;cursor:pointer;
  transition:border-color 160ms ease,background 160ms ease,transform 160ms ease;
}
.opt-btn:hover{border-color:var(--oxide);background:var(--input-ground);}
.opt-btn:active{background:var(--bone-light);transform:translateX(1px);}
.opt-btn:focus-visible{outline:2px solid var(--oxide);outline-offset:2px;}

.q-panel .panel-h{margin-bottom:var(--sp-md);}

/* Finite-arc progress bar, sits directly above the question panel. The numeric
   readout ("Question 3 of 10") lives once, in the panel's own overline — no
   duplicate caption above the bar. */
.ss-progress-track{margin-bottom:var(--sp-md);}

/* ===== REVEAL — the conversion hinge. Dramatized with the same "specimen index"
   device the report page uses for its contents ledger: the 5 families laid out as a
   numbered ledger, with the reader's own family singled out. Nothing per-family is
   invented here — the five names come straight off FAMILIES[k].name in data.js. ===== */
.reveal-p{margin-bottom:16px;font-size:16.5px;line-height:1.62;color:var(--slate);}
.reveal-p:first-of-type{color:var(--ink);}
.tie-note{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.03em;
  color:var(--stone);margin-bottom:var(--sp-md);border-left:2px solid var(--bone-mid);
  padding-left:12px;
}

.reveal-panel .panel-h{
  font-size:clamp(1.9rem,1.5rem + 1.6vw,2.45rem);
  color:var(--oxide);
}

.family-index{margin:var(--sp-md) 0 var(--sp-lg);border-top:1px solid var(--bone-mid);}
.family-index-row{
  display:grid;grid-template-columns:2rem 1fr auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--bone-mid);
}
.family-index-row .n{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--bone-mid);
}
.family-index-row .term{
  font-family:var(--font-body);font-size:14.5px;color:var(--stone);line-height:1.3;
}
.family-index-row .tag{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--oxide);opacity:0;
}
.family-index-row.is-current{border-bottom-color:var(--oxide);padding-left:10px;margin-left:-10px;border-left:2px solid var(--oxide);}
.family-index-row.is-current .n{color:var(--oxide);}
.family-index-row.is-current .term{color:var(--ink);font-weight:600;}
.family-index-row.is-current .tag{opacity:1;}

/* The email ask, in place on the result screen (merged out of a separate gate screen
   2026-07-19 so there is no extra click). A firm ink rule sets it off from the result
   copy above so it reads as "now, where should the rest go" without a page change. */
.reveal-gate{margin-top:var(--sp-lg);padding-top:var(--sp-lg);border-top:2px solid var(--ink);}
.reveal-gate .panel-over{display:block;margin-bottom:var(--sp-2xs);}
.reveal-gate .gate-body{margin-bottom:var(--sp-md);}
.reveal-gate .field{margin-bottom:var(--sp-sm);}
/* Make the email a clearly fillable box, not a bare underline that reads as a divider on
   a screen already full of hairline rules (same fix already applied on the deeper-read
   intake page). Field name/id/required are untouched. */
.reveal-gate .input-wrap{background:var(--input-ground);border:1px solid var(--bone-mid);}
.reveal-gate .input-wrap::after{display:none;}
.reveal-gate input[type=email]{border:none;background:transparent;padding:14px 16px;font-size:16px;}
.reveal-gate .input-wrap:focus-within{border-color:var(--oxide);}

/* Closing ornament before the deeper-read CTA on the delivered state — reuses ti.css's
   .rule-star device (already defined there), just re-anchored to a narrower column. */
.ss-close-rule{margin:var(--sp-lg) auto var(--sp-md);}

/* The delivered-state CTA is an <a> (ti.css styles .cta-button as inline-block, so it sits
   left at content width). On this flow it should match the other full-width buttons: a
   centered block that fills the column. */
.reveal-panel .cta-button{display:block;width:100%;box-sizing:border-box;text-align:center;margin-top:12px;}

@media (max-width:640px){
  .ss-band{padding-top:var(--sp-lg);}
  .reveal-panel .panel-h{font-size:1.7rem;}
  .family-index-row{grid-template-columns:1.6rem 1fr auto;}
}