/* The "How it works" panel.
 *
 * It is rendered in two places and the card is the same object in both: inline on the landing gate
 * beside the sign-in box, and in an overlay when someone re-opens it from the menu afterwards. So
 * the card and its contents are styled by class, and .hiw-overlay styles only the backdrop that the
 * second of those two puts behind it.
 *
 * Everything is prefixed hiw- so this sheet can share a document with Tailwind, the landing gate and
 * the results explorer without any of them reaching into the others. */

/* --- the card ---------------------------------------------------------------------------------- */
.hiw-card{width:100%;background:#fdfcfa;border-radius:16px;box-shadow:0 18px 50px rgba(8,15,26,.45);
    display:flex;flex-direction:column;overflow:hidden;text-align:left}

.hiw-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    padding:16px 22px 11px;border-bottom:1px solid #ece7e0}
.hiw-head h2{margin:0;font-size:18px;font-weight:800;color:#1f2937;letter-spacing:-.01em}
.hiw-kicker{font-size:12px;font-weight:600;color:#9a8f83;text-transform:uppercase;letter-spacing:.08em}
.hiw-close{margin-left:auto;border:none;background:transparent;color:#8a8077;font-size:22px;
    line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.hiw-close:hover{background:#f0ebe4;color:#3f3a34}

/* --- stage ------------------------------------------------------------------------------------- */
/* The scene is one viewBox scaled to the card width, rather than a fixed height, so it stays
   composed at every size instead of the characters drifting off the bottom on a phone. */
.hiw-stage{position:relative;background:#f6f2ec;border-bottom:1px solid #ece7e0}
.hiw-stage svg{display:block;width:100%;height:auto}

/* --- copy -------------------------------------------------------------------------------------- */
.hiw-copy{padding:16px 22px 4px;min-height:104px}
.hiw-copy h3{margin:0 0 7px;font-size:16.5px;font-weight:700;color:#1f2937}
.hiw-copy p{margin:0;font-size:14px;line-height:1.55;color:#4b5563}
.hiw-copy a{color:#1d4ed8}
/* Each step's copy fades in on arrival so the panel reads as one thing moving, not six screens. */
.hiw-copy.hiw-enter{animation:hiw-copy-in .34s ease-out both}
@keyframes hiw-copy-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* --- controls ---------------------------------------------------------------------------------- */
.hiw-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 22px 16px}
.hiw-dots{display:flex;gap:7px;margin-right:auto}
.hiw-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
    background:#dcd4ca;transition:background .2s,transform .2s}
.hiw-dot:hover{background:#c3b8ab}
.hiw-dot[aria-current="true"]{background:#2563eb;transform:scale(1.25)}
.hiw-btn{border:1px solid #d8d0c6;background:#ffffff;color:#3f3a34;border-radius:8px;
    padding:8px 15px;font-size:14px;font-weight:600;cursor:pointer}
.hiw-btn:hover{background:#f2ece4}
.hiw-btn:disabled{opacity:.45;cursor:default}
.hiw-btn-primary{background:#2563eb;border-color:#2563eb;color:#ffffff}
.hiw-btn-primary:hover{background:#1d4ed8}
.hiw-skip{border:none;background:none;color:#8a8077;font-size:13px;cursor:pointer;padding:8px 4px}
.hiw-skip:hover{text-decoration:underline;color:#4b5563}

/* --- the overlay it appears in when re-opened from the menu ------------------------------------- */
.hiw-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
    padding:20px 14px;background:rgba(8,15,26,.66);backdrop-filter:blur(3px);overflow-y:auto}
.hiw-overlay[hidden]{display:none}
.hiw-overlay .hiw-card{max-width:760px;margin:auto}

@media(max-width:560px){
  .hiw-overlay{padding:0}
  .hiw-overlay .hiw-card{border-radius:0;min-height:100%}
  .hiw-copy{min-height:124px}
  .hiw-foot{padding-bottom:20px}
}


.hiw-card button{min-height:0}.hiw-card .hiw-dot{width:9px;height:9px;min-width:9px;padding:0}
.hiw-card .hiw-pause{font-size:12px;padding:6px 9px}.hiw-status{display:block;color:#64748b;font-size:11px;margin-top:8px}
.hiw-overlay{border:0;width:100%;max-width:none;max-height:none;height:100%;margin:0;box-sizing:border-box}
.hiw-overlay:not([open]){display:none}.hiw-overlay::backdrop{background:rgba(8,15,26,.66)}
@media(prefers-reduced-motion:reduce){.hiw-card *{animation:none!important;transition:none!important}}