/* Welcome flow after sign-up (spec: docs/superpowers/specs/2026-10-10-welcome-flow-design.md). */
#first-use-overlay{position:fixed;inset:0;z-index:9200;display:none;justify-content:center;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif}
#first-use-overlay.fu-open{display:flex}
.wf-panel{display:flex;flex-direction:column;width:100%;max-width:880px;height:100%;min-height:0}
.wf-top{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:calc(10px + env(safe-area-inset-top)) 20px 0}
.co-step-label,.wf-step{display:block;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.wf-step{margin:0}
.wf-link{min-height:44px;padding:0 4px;border:0;background:none;color:var(--muted);font:600 14px 'Inter',sans-serif;cursor:pointer}
.wf-link:hover{color:var(--text)}
.wf-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 24px}
.wf-title{margin:4px 0 8px;font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-0.03em;color:var(--text);outline:none}
/* The heading only takes focus so screen readers start there; beat the site-wide [tabindex]:focus-visible ring. */
#first-use-overlay .wf-title:focus,#first-use-overlay .wf-title:focus-visible{outline:none!important}
.wf-sub{margin:0 0 20px;max-width:520px;font-size:15px;line-height:1.5;color:var(--muted)}
.wf-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wf-tile{position:relative;aspect-ratio:4/5;overflow:hidden;padding:0;border:2px solid transparent;border-radius:16px;background:var(--card);color:#fff;text-align:left;cursor:pointer;font-family:inherit}
.wf-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wf-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,0.85))}
.wf-tile-text{position:absolute;left:14px;right:14px;bottom:12px;z-index:1}
.wf-tile-text strong{display:block;font-size:18px;font-weight:800;letter-spacing:-0.02em}
.wf-tile-text small{display:block;margin-top:2px;font-size:12.5px;opacity:0.85}
.wf-tile.is-on{border-color:var(--accent)}
.wf-check{position:absolute;top:10px;right:10px;z-index:1;display:none;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#0a0a0f}
.wf-tile.is-on .wf-check{display:grid}
.wf-check svg{width:14px;height:14px}
.wf-genres{margin-top:18px}
.wf-genres[hidden]{display:none}
.wf-genres-label{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.wf-chip{height:36px;margin:0 8px 8px 0;padding:0 16px;border:1px solid var(--border2);border-radius:999px;background:transparent;color:var(--text);font:600 14px 'Inter',sans-serif;cursor:pointer}
.wf-chip.is-on{border-color:var(--accent);color:var(--accent)}
.wf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wf-grid > *{min-width:0;width:auto!important;max-width:none!important;margin:0!important}
.wf-foot{flex-shrink:0;padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--bg) 40%)}
.wf-btn{width:100%;height:52px;border:0;border-radius:999px;background:var(--btn-primary-bg,#fff);color:var(--btn-primary-fg,#0a0a0f);font:800 16px 'Inter',sans-serif;cursor:pointer}
.wf-tile:focus-visible,.wf-chip:focus-visible,.wf-btn:focus-visible,.wf-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:768px){
  #first-use-overlay{align-items:center;padding:24px;background:rgba(5,5,8,0.88)}
  .wf-panel{height:auto;max-height:92vh;background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden}
  .wf-top{padding:24px 32px 0}
  .wf-body{padding:12px 32px 8px}
  .wf-title{font-size:40px}
  .wf-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wf-tile{aspect-ratio:3/4}
  .wf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wf-foot{display:flex;justify-content:flex-end;padding:18px 32px 28px;background:none}
  .wf-btn{width:auto;padding:0 36px}
}
body.theme-light #first-use-overlay{color:var(--text)}
@media (min-width:768px){
  body.theme-light #first-use-overlay{background:rgba(20,20,28,0.45)}
}
body.theme-light .wf-tile.is-on,body.theme-light .wf-chip.is-on{border-color:var(--text)}
body.theme-light .wf-chip.is-on{color:var(--text)}
body.theme-light .wf-check{background:var(--text);color:var(--bg)}