/* /resources: free prompt and playbook library behind a short quiz.
   Built on site.css tokens and components (.tab cards, .form-card, .choice,
   .progress). Motion: Scroll Craft flow entrances (data-sc-in), quiz steps that
   slide in, and a staggered unblur when the library unlocks. Reduced motion
   shows every end state with no movement. */

/* ---- hero + quiz ---------------------------------------------------------- */
.res-hero{position:relative;overflow:hidden;overflow:clip;border-top:0;padding-block:72px 64px}
.res-hero__glow{position:absolute;right:-220px;top:-260px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(214,154,45,.20),rgba(15,76,71,.06) 45%,transparent 70%);pointer-events:none;animation:res-drift 22s ease-in-out infinite alternate}
@keyframes res-drift{to{transform:translate(-70px,50px)}}
.res-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.res-hero h1{font-size:clamp(38px,4.8vw,58px)}
.res-hero .lede{margin-top:20px}
.res-ticks{margin-top:26px}
@media (max-width:899px){.res-hero__grid{grid-template-columns:1fr;gap:36px}}

.res-quiz,.res-result{position:relative}
.res-quiz__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.res-quiz__kind{font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink)}
.res-quiz .progress span{transition:background-color .35s var(--ease)}
.res-quiz .progress{margin-bottom:22px}
.res-step{border:0;padding:0;margin:0;min-width:0}
.res-step[hidden]{display:none}
.res-step.is-in{animation:res-step-in .45s var(--ease) both}
.res-step.is-back{animation:res-step-back .45s var(--ease) both}
@keyframes res-step-in{from{opacity:0;transform:translateX(28px)}}
@keyframes res-step-back{from{opacity:0;transform:translateX(-28px)}}
.res-q{font-size:clamp(23px,2.4vw,28px)!important;margin:0 0 6px!important}
.res-step .help{margin:0 0 16px}
.res-step legend + .res-choices{margin-top:16px}
.res-choices{grid-template-columns:1fr}
.res-choices .choice{transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease)}
.res-choices .choice:hover{border-color:var(--evergreen);transform:translateX(3px)}
.res-choices .choice span{display:block}
.res-choices .choice small{display:block;font-size:14.5px;color:var(--sage);margin-top:2px}
.res-other{margin-top:16px}
.res-two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:559px){.res-two{grid-template-columns:1fr}}
.res-nav{margin-top:20px}
.res-nav [data-next],.res-nav [data-submit]{margin-left:auto}
.res-step .err{margin-top:12px}

.res-result{text-align:left}
.res-result.is-in{animation:res-step-in .5s var(--ease) both}
.res-result__ok{width:52px;height:52px;border-radius:50%;background:var(--evergreen);display:grid;place-items:center;margin-bottom:18px}
.res-result__ok svg{width:26px;height:26px}
.res-result__ok path{stroke-dasharray:30;stroke-dashoffset:30;animation:res-tick .55s .15s var(--ease) forwards}
@keyframes res-tick{to{stroke-dashoffset:0}}
.res-result h2{font-size:clamp(26px,3vw,32px)}
.res-result p{margin:12px 0 0}
.res-result .btn-row{margin-top:24px}

/* ---- library -------------------------------------------------------------- */
.res-lib{padding-top:64px}
.res-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px}
.res-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--stone);border-radius:999px;background:var(--white)}
.res-tabs button{font:600 16px/1 var(--sans);color:var(--sage);background:none;border:0;border-radius:999px;padding:11px 18px;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease)}
.res-tabs button span{font-weight:500;margin-left:6px;opacity:.8}
.res-tabs button[aria-selected="true"]{background:var(--evergreen);color:var(--white)}
.res-tabs button:focus-visible{outline-offset:2px}
.res-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.res-chip{font:600 15px/1 var(--sans);color:var(--ink);background:var(--white);border:1.5px solid var(--stone);border-radius:999px;padding:10px 15px;cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.res-chip span{color:var(--sage);font-weight:500;margin-left:6px}
.res-chip:hover{border-color:var(--brass)}
.res-chip[aria-pressed="true"]{background:var(--evergreen);border-color:var(--evergreen);color:var(--white)}
.res-chip[aria-pressed="true"] span{color:var(--on-ever-2)}

.res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px}
.res-grid--books{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:999px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.res-grid,.res-grid--books{grid-template-columns:1fr}}
.res-card{width:auto;min-height:0;gap:10px;padding:24px 22px 20px}
.res-card[hidden]{display:none}
.res-card h3{font-size:22px}
.res-card>p{font-size:16px;color:var(--sage)}
.res-pre{margin:4px 0 0;font:14px/1.6 ui-monospace,Menlo,Consolas,monospace;color:var(--ink);background:var(--note);border:1px solid var(--stone);border-radius:var(--r);padding:14px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:132px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);transition:filter .6s var(--ease),max-height .5s var(--ease)}
.res-pre.is-open{max-height:none;-webkit-mask-image:none;mask-image:none}
.res-steps ol{margin:4px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.res-steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:16px;line-height:1.5}
.res-steps li::before{content:counter(s);width:26px;height:26px;border-radius:6px;background:var(--evergreen);color:var(--white);display:grid;place-items:center;font:600 14px/1 var(--serif)}
.res-after{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--brass);background:var(--note);border-radius:0 var(--r) var(--r) 0;font-size:15.5px}
.res-steps{transition:filter .6s var(--ease)}
.res-card__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
.res-lock{width:16px;height:16px;flex:none;vertical-align:-2px}
.res-card .btn .res-lock{margin-right:2px}
.res-card .btn.is-copied{background:var(--success)}

/* locked state: titles readable, prompt text and steps blurred */
.res-lockwrap{position:relative;margin-top:22px}
.res-lockwrap.is-locked [data-gated]{filter:blur(5px);user-select:none;pointer-events:none}
.res-lockwrap.is-locked [data-when-open]{display:none}
.res-lockwrap:not(.is-locked) [data-when-locked],.res-picks [data-when-locked]{display:none}
.res-lockmsg{position:sticky;bottom:24px;display:flex;justify-content:center;margin-top:28px;z-index:5;pointer-events:none}
.res-lockmsg__card{pointer-events:auto;max-width:460px;text-align:center;background:var(--white);border:1px solid var(--badge-line);border-radius:var(--r-card);padding:24px 26px;box-shadow:0 24px 50px -24px rgba(15,76,71,.45)}
.res-lockmsg__card .res-lock{width:26px;height:26px;color:var(--brass-ink)}
.res-lockmsg__card h3{margin:10px 0 6px}
.res-lockmsg__card p{color:var(--sage);margin:0 0 16px}

/* unlock: each card unblurs in turn */
.res-lockwrap.is-unlocking .res-card{animation:res-unlock .7s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes res-unlock{from{opacity:.4;transform:translateY(10px)}}

.res-picks{margin-bottom:56px;padding:28px;border:1px solid var(--badge-line);border-radius:var(--r-card);background:linear-gradient(160deg,var(--badge-fill),var(--paper) 60%)}
.res-picks h2{margin-bottom:24px}
.res-picks.is-in{animation:res-step-in .5s var(--ease) both}
.res-note{margin:36px 0 0;color:var(--sage);font-size:15.5px;max-width:62ch}

@media (prefers-reduced-motion:reduce){
  .res-hero__glow,.res-step.is-in,.res-step.is-back,.res-result.is-in,.res-picks.is-in,.res-lockwrap.is-unlocking .res-card{animation:none}
  .res-result__ok path{animation:none;stroke-dashoffset:0}
  .res-pre,.res-steps,.res-choices .choice{transition:none}
  .res-choices .choice:hover{transform:none}
}
@media print{.res-hero__quiz,.res-lockmsg,.res-chips,.res-tabs,.res-card__row{display:none!important}.res-lockwrap.is-locked [data-gated]{filter:none}}

/* polish */
.res-card .btn [data-when-locked],.res-card .btn [data-when-open]{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.res-lockwrap:not(.is-locked) .res-card .btn [data-when-locked],.res-picks .btn [data-when-locked]{display:none}
.res-lockwrap.is-locked .res-card .btn [data-when-open]{display:none}
.res-chips{margin-bottom:20px}
@media (max-width:639px){
  .res-lockmsg{bottom:12px}
  .res-lockmsg__card{padding:16px 18px;display:grid;gap:10px}
  .res-lockmsg__card .res-lock,.res-lockmsg__card p{display:none}
  .res-lockmsg__card h3{font-size:19px;margin:0}
  .res-lockmsg__card .btn{padding:13px 18px;font-size:16px}
}