/* Tool pages (W41.1 redesign) — the quiz-shaped components Design C does not have.
 *
 * LOAD ORDER CONTRACT: this file comes AFTER seo-landing.css in the shell and assumes its
 * :root variables (--plum/--pink/--gold/--ink/--cream/--paper/--blush/--shadow…), its body
 * typography and its shared components (.brand, .hero, .polaroid, .rv, .squiggle, h2 underline,
 * .seo-steps, .faq-*, .offer, .seo-links, footer). seo-landing.css itself is READ-ONLY for this
 * page: it is shared with the money pages on its own ?v=seo* axis, and any class this file needs
 * differently is defined here under tool-scoped names instead of edited there.
 *
 * The chip/step markup mirrors the wizard's (`.choice`/`.lab`/`.other-row` — the brief-passing
 * contract tools-love-song.js reads), but the wizard's styles.css is NOT linked: those class
 * names are restyled here in the Design C language. */

/* ---------- quiz card ---------- */
.tq-lede{max-width:520px;margin:18px auto 10px;text-align:center;color:var(--ink-soft)}
.tq-reassure{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  font-size:.92rem;font-weight:600;color:var(--plum);margin:0 0 6px;
}
.tq-reassure .dot{color:var(--gold)}

.tq{margin-top:26px}
.tq-card{
  position:relative;background:var(--paper);
  border:2px solid var(--gold-soft);border-radius:18px;
  box-shadow:var(--shadow);
  padding:26px 22px 22px;
}
.tq-card::before{ /* the gold ribbon .sample wears — same gift-wrap language */
  content:"";position:absolute;top:-8px;left:26px;right:26px;height:14px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft) 50%,var(--gold));
  border-radius:3px;box-shadow:0 3px 6px rgba(107,59,90,.18);
}

/* progress pips + step counter */
.pips{display:flex;gap:7px;margin:4px 0 6px}
.pip{height:5px;flex:1;border-radius:4px;background:var(--blush-deep);transition:background .25s}
.pip.done{background:var(--gold)}
.pip.active{background:var(--pink)}
.tq-count{
  font-size:.78rem;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--pink);font-weight:700;margin:0 0 14px;
}

/* step panels — hidden until the controller lights one; the no-JS crawler view is handled by
   the shell's <noscript> (all panels visible, note shown) so content never depends on JS. */
.tq-step{display:none;animation:tq-rise .3s ease both}
.tq-step.active{display:block}
@keyframes tq-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tq-step{animation:none}}

.tq-step fieldset{border:none}
.tq-q{ /* the step's question — a legend, deliberately NOT h2 (no squiggle per step) */
  display:block;font-size:1.28rem;font-weight:700;line-height:1.25;color:var(--plum);
  font-variation-settings:"SOFT" 60,"WONK" 1;margin:0 0 4px;padding:0;
}
.tq-hint{font-size:.92rem;color:var(--ink-soft);margin:0 0 14px}

/* choice chips — the wizard's markup in Design C clothes */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice{
  font:inherit;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--blush-deep);color:var(--ink);
  border-radius:12px;padding:10px 12px;min-height:48px;display:flex;align-items:center;
  transition:transform .12s,border-color .15s,box-shadow .15s;
}
.choice:hover{transform:translateY(-2px);border-color:var(--pink);box-shadow:0 10px 22px -16px rgba(152,40,79,.6)}
.choice.sel{border-color:var(--pink);box-shadow:0 0 0 3px rgba(178,58,100,.16)}
.choice .ico-emoji{font-size:17px;line-height:1;margin-right:9px;flex:none}
.choice .lab{font-weight:600;font-size:.92rem;line-height:1.25}
.choice.wide{grid-column:1/-1}
.choice.surprise{border-style:dashed;color:var(--plum)}
@media (min-width:560px){
  .choices{grid-template-columns:repeat(3,1fr)}
}
/* freeform row (the "Someone else" reveal). [hidden] wins globally via seo-landing.css. */
.choices .other-row{grid-column:1/-1;display:flex;gap:8px}
.choices .other-row input{flex:1;min-width:0}
.choices .other-row .btn{flex:none;padding:10px 18px;white-space:nowrap}

/* text fields */
label.field{display:block;margin:0 0 12px}
label.field .cap{display:block;font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:6px}
label.field .opt{color:var(--ink-soft);font-weight:400}
.tq-card input[type="text"],.tq-card textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid var(--blush-deep);border-radius:12px;padding:11px 12px;resize:vertical;
}
.tq-card input:focus,.tq-card textarea:focus{
  outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(178,58,100,.14);
}
.tq-card ::placeholder{color:var(--ink-soft);opacity:.6}
.tq-card textarea{min-height:110px;line-height:1.5}
.tq-sub{font-size:.88rem;color:var(--ink-soft);margin:6px 0 0}

/* buttons — Design C pills (the .offer-btn / .idea-cta family) */
.btn{
  font:inherit;font-weight:700;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  border:none;border-radius:999px;padding:12px 26px;min-height:48px;letter-spacing:.2px;
  box-shadow:0 10px 22px -10px rgba(152,40,79,.65);
  transition:transform .15s,opacity .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.55;cursor:progress;transform:none}
.btn.wide{display:block;width:100%}
.tq-actions{margin-top:4px}

/* validation + navigation */
.tool-group.invalid .tq-q,.tool-group.invalid .cap{color:var(--pink-deep)}
.tool-group.invalid .choices .choice{box-shadow:0 0 0 1px rgba(152,40,79,.25)}
.tool-group.invalid textarea{border-color:var(--pink-deep)}
.err{color:var(--pink-deep);font-size:.92rem;margin:10px 0 0;min-height:18px}
.tq-nav{display:flex;align-items:center;margin-top:8px}
.tq-back{
  background:none;border:none;font:inherit;font-size:.95rem;cursor:pointer;
  color:var(--ink-soft);padding:8px 6px;min-height:44px;display:inline-flex;align-items:center;
}
.tq-back:hover{color:var(--ink)}
.tq-foot{font-size:.85rem;color:var(--ink-soft);margin:10px 0 0;text-align:center}

/* ---------- JS-death contract (ported from the wizard shells, W35) ----------
   Two mutually exclusive layers: .nojs-note lives in <noscript> and renders only with scripting
   off; .js-fallback is the CSS-delayed banner for JS that loaded but never finished — a healthy
   tools-love-song.js adds .js-alive on <html> as its LAST line. Base is collapsed (no CLS). */
.nojs-note{
  font-size:.9rem;line-height:1.55;color:var(--ink);max-width:420px;
  margin:0 auto 14px;padding:10px 14px;
  background:#fff;border:1.5px solid var(--gold-soft);border-radius:12px;
}
.js-fallback{
  max-height:0;opacity:0;overflow:hidden;
  font-size:.9rem;line-height:1.55;color:var(--ink);max-width:420px;
  margin:0 auto;padding:0 14px;
  background:#fff;border:1.5px solid var(--gold-soft);border-radius:12px;
  animation:js-fallback-reveal .3s ease 10s forwards;
}
.js-alive .js-fallback{display:none!important;animation:none}
@keyframes js-fallback-reveal{
  to{max-height:200px;opacity:1;margin-bottom:14px;padding-top:10px;padding-bottom:10px}
}
/* With JS off every panel is content: the noscript style in the shell reveals .tq-step,
   hides the pips and disables the controls (the form cannot submit anywhere without JS). */

/* ---------- sample players (full state-machine port of styles.css `.samples`, W38) ----------
   sample-cards.js only toggles .playing/.loading/.err/.active — every visibility rule lives
   here. Visual values are Design C; the state selectors are copied 1:1 and must stay complete:
   dropping one shows play+pause at once, an eternal spinner, or a permanent error line. */
.examples-intro{max-width:560px}
.samples-feed{display:grid;gap:26px;margin-top:22px}
@media (min-width:640px){.samples-feed{grid-template-columns:1fr 1fr;gap:22px;align-items:start}}
.example{margin:0}
.sample-card{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;padding:14px 15px 28px;min-width:0;
  background:#fff;border-radius:14px;box-shadow:var(--shadow);
  transform:rotate(-.6deg);
}
.example:nth-child(even) .sample-card{transform:rotate(.6deg)}
.smp-play{
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  flex:none;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 28%,#cf5480,var(--pink) 60%,var(--pink-deep));
  color:#fff;box-shadow:0 8px 16px -6px rgba(152,40,79,.55);
  transition:transform .15s;
}
.smp-play:hover{transform:scale(1.06)}
.smp-play svg{width:20px;height:20px}
.smp-play .ic-play{margin-left:2px}
.smp-play .ic-pause{display:none}
.sample-card.playing .ic-play{display:none}
.sample-card.playing .ic-pause{display:block}
.sample-card.loading .ic-play,
.sample-card.loading .ic-pause{display:none}
.smp-spin{display:none;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:smp-spin .8s linear infinite}
.sample-card.loading .smp-spin{display:block}
@keyframes smp-spin{to{transform:rotate(360deg)}}
.smp-meta{min-width:0}
.smp-name{font-weight:700;font-size:1.02rem;color:var(--plum-deep);line-height:1.25;
  font-variation-settings:"SOFT" 50;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.smp-for{font-size:.88rem;font-style:italic;color:var(--pink);margin-top:2px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* seek ribbon along the card's bottom edge — 26px hit zone, 5px visible lane on the active card */
.smp-bar{position:absolute;left:0;right:0;bottom:0;height:26px;cursor:pointer;touch-action:none}
.smp-bar::before{content:"";position:absolute;left:10px;right:10px;bottom:7px;
  height:5px;border-radius:3px;background:var(--blush);opacity:0;transition:opacity .2s}
.sample-card.active .smp-bar::before{opacity:1}
.smp-fill{position:absolute;left:10px;bottom:7px;height:5px;
  max-width:calc(100% - 20px);border-radius:3px;width:0%;
  background:linear-gradient(90deg,var(--pink),var(--gold))}
.sample-card.active .smp-fill::after{content:"";position:absolute;
  right:-8px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid var(--pink-deep);
  box-shadow:0 1px 5px rgba(64,24,44,.35);box-sizing:border-box}
.sample-card.err .smp-fill::after{display:none}
.smp-err{display:none;font-size:.85rem;color:var(--pink-deep);margin:2px 0 0}
.sample-card.err .smp-play{opacity:.4;pointer-events:none}
.sample-card.err .smp-for{display:none}
.sample-card.err .smp-err{display:block}
@media (prefers-reduced-motion:reduce){
  .smp-spin{animation:none}
  .smp-play{transition:none}
}
/* the paired lyric excerpt reuses .lyrics-note from seo-landing.css; just pull it closer */
.example .lyrics-note{margin-top:20px}

/* ---------- benefits grid ---------- */
.why-grid{display:grid;gap:14px;margin-top:20px}
@media (min-width:560px){.why-grid{grid-template-columns:1fr 1fr;gap:16px}}
.why-card{
  background:var(--paper);border:2px dashed var(--gold-soft);border-radius:14px;
  padding:18px 18px 16px;box-shadow:var(--shadow);transform:rotate(-.5deg);
}
.why-grid .why-card:nth-child(even){transform:rotate(.5deg)}
.why-card h3{
  font-size:1.05rem;font-weight:700;color:var(--plum-deep);
  font-variation-settings:"SOFT" 50;margin:0 0 6px;
}
.why-card p{font-size:.92rem;line-height:1.55;color:var(--ink-soft)}

/* ---------- shelf nav lead-in ---------- */
.links-lead{margin:44px 0 -30px;font-style:italic;color:var(--ink-soft)}