/* New product (onboard.js). Uses the app's tokens and components; only the flow's own layout is here. */
.onb{display:grid;gap:18px;padding-bottom:80px}
.onb-steps{list-style:none;margin:0;padding:0;display:flex;gap:0;border-bottom:1px solid var(--line-strong);overflow-x:auto}
.onb-steps li{flex:1 0 auto}
.onb-steps button{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;border:0;background:transparent;color:var(--muted);font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.onb-steps button .n{font-family:var(--mono);font-size:11px;width:22px;height:22px;display:inline-grid;place-items:center;border:1px solid currentColor}
.onb-steps button.done{color:var(--ink)}
.onb-steps button.done .n{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.onb-steps button[aria-current="step"]{color:var(--ink);border-bottom-color:var(--accent)}
.onb-body{display:grid;gap:16px}
.onb-card{background:var(--surface);border:1px solid var(--line);padding:18px;display:grid;gap:12px}
.onb-card h2{margin:0;font-size:18px;font-weight:400;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.onb-card .formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.onb-card label.f{display:grid;gap:6px}
.onb-card label.f.inline{grid-template-columns:1fr auto;align-items:center}
.onb-card input[type=text],.onb-card input[type=number],.onb-card input[type=search],.onb-card select,.onb-card textarea{width:100%;padding:10px;border:1px solid var(--line-strong);background:var(--surface);min-height:44px}
.onb-card input[type=color]{width:56px;height:36px;padding:0;border:1px solid var(--line-strong);background:none}
.onb-card textarea{resize:vertical}
.onb-card .sku{text-transform:none;color:var(--ink)}
.onb-ref{display:grid;gap:6px}
.onb-foot{position:sticky;bottom:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line-strong)}
.onb-foot .btn{min-height:48px}

/* pictures */
.onb-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.onb-tile{display:grid;gap:6px;padding:0;border:1px solid var(--line);background:var(--bg);text-align:left;font-size:12px;color:var(--muted)}
.onb-tile img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--bg)}
.onb-tile span{padding:0 8px 8px}
.onb-tile.on{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--accent)}
.onb-picked{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.onb-picked li{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);padding:8px}
.onb-picked img{width:72px;aspect-ratio:4/5;object-fit:cover;background:var(--bg)}
.onb-picked .meta{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:center}
.onb-picked .meta b{grid-column:1/-1;font-weight:400}
.onb-picked .meta select{min-height:36px;padding:6px}
.onb-picked .acts{display:flex;gap:4px}
.onb-picked .x{min-width:40px;min-height:40px;border:1px solid var(--line);background:var(--surface)}

/* words */
.onb-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.onb-opt{display:grid;gap:4px;text-align:left;padding:12px;border:1px solid var(--line);background:var(--bg);min-height:56px}
.onb-opt b{font-weight:400;font-size:18px}
.onb-opt span{font-size:13px;color:var(--muted)}
.onb-opt[aria-pressed="true"]{border-color:var(--ink);background:var(--surface);box-shadow:inset 3px 0 0 var(--accent)}
.onb-story{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}

/* review */
.onb-flags{border-color:var(--warn);background:var(--warn-bg)}
.onb-flags ul{margin:0;padding-left:18px;display:grid;gap:4px}
.onb-flags .link{border:0;background:none;padding:0;text-align:left;color:var(--warn);text-decoration:underline}
.onb-ok{border-color:var(--ok)}
.onb-preview{grid-template-columns:minmax(0,280px) 1fr;align-items:start}
.onb-preview .hero{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--bg)}
.onb-preview .hero.empty{display:grid;place-items:center;color:var(--muted)}
.onb-preview .title{font-size:28px}
.onb-preview .desc{margin:0;font-size:16px}
.onb-preview .strip{display:flex;gap:6px;overflow-x:auto}
.onb-preview .strip img{width:64px;aspect-ratio:4/5;object-fit:cover}
.onb-dl{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:8px 16px;margin:0}
.onb-dl dt{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.onb-dl dd{margin:0}

/* send */
.onb-send{list-style:none;margin:0;padding:0;display:grid;gap:0}
.onb-send li{display:grid;grid-template-columns:14px minmax(160px,auto) 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.onb-send .dot{width:10px;height:10px;border:1px solid var(--muted)}
.onb-send li.ok .dot{background:var(--ok);border-color:var(--ok)}
.onb-send li.bad .dot{background:var(--warn);border-color:var(--warn)}
.onb-send li.bad .note{color:var(--warn)}
.onb-send li.run .dot{background:var(--accent);border-color:var(--accent);animation:onbpulse 1s ease-in-out infinite alternate}
@keyframes onbpulse{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.onb-send li.run .dot{animation:none}}

@media (max-width:700px){
  .onb-preview{grid-template-columns:1fr}
  .onb-dl{grid-template-columns:1fr}
  .onb-dl dt{padding-top:6px}
  .onb-send li{grid-template-columns:14px 1fr;grid-auto-flow:row}
  .onb-send li .note,.onb-send li .btn{grid-column:2}
  .onb-steps button{padding:0 10px;font-size:13px}
}