/* First-run screens: log in -> Polymarket API key -> dashboard. Uses the
   dashboard's colour variables from lab.css, so it follows the same theme. */
body.onboarding>main{visibility:hidden}
#onboarding{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:auto;padding:32px 16px;
  background:var(--bg);color:var(--text);
  transition:opacity .45s ease}
#onboarding.leaving{opacity:0;pointer-events:none}
/* The slot spans the overlay and centres the card itself. Sized to its content, it would
   measure the card's unwrapped text and leave the card off to its left. */
#onboarding .ob-slot{width:100%;display:grid;justify-items:center}
#onboarding .ob-hive{position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23ffbe1a' stroke-width='1.5'/%3E%3C/svg%3E")}
.ob-card{position:relative;width:min(440px,100%);background:var(--panel);border:1px solid var(--border);border-radius:20px;
  padding:34px 34px 28px;box-shadow:0 30px 80px #000a;animation:ob-in .5s cubic-bezier(.2,.8,.2,1) both}
.ob-card.wide{width:min(520px,100%)}
.ob-card.out{animation:ob-out .35s ease-in both}
@keyframes ob-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ob-out{to{opacity:0;transform:translateX(-40px) scale(.98)}}
.ob-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:22px;text-align:center}
.ob-brand svg{color:var(--gold);filter:drop-shadow(0 0 18px #ffbe1a33)}
.ob-word{font-size:20px;font-weight:800;letter-spacing:4px}
.ob-tag{font-size:13px;color:var(--muted);margin:0}
.ob-steps{display:flex;justify-content:center;gap:8px;margin:0 0 20px}
.ob-steps i{width:28px;height:4px;border-radius:4px;background:var(--border)}
.ob-steps i.on{background:var(--accent)}
.ob-card h2{font-size:22px;font-weight:800;letter-spacing:-.3px;text-transform:none;color:var(--text);margin:0 0 6px;text-align:center}
.ob-card .ob-lead{color:var(--muted);text-align:center;margin:0 0 20px;font-size:13.5px}
.ob-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:600;
  padding:8px 12px;border-radius:999px;border:1px solid var(--border);margin:0 auto 18px;width:fit-content;color:var(--muted)}
.ob-status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--muted)}
.ob-status.ok{color:var(--green);border-color:var(--good-border)}.ob-status.ok::before{background:var(--green);box-shadow:0 0 8px var(--green)}
.ob-status.bad{color:var(--red);border-color:#5c2f2a}.ob-status.bad::before{background:var(--red)}
.ob-status.warn{color:var(--gold);border-color:#6b4f0f}.ob-status.warn::before{background:var(--gold)}
.ob-field{display:block;margin:0 0 14px;font-size:12px;font-weight:600;color:var(--muted)}
.ob-field input{display:block;width:100%;margin-top:6px;padding:12px 14px;font:inherit;font-size:14px;font-weight:400;color:var(--text);
  background:var(--inset);border:1px solid var(--border);border-radius:12px;outline:none;transition:border-color .15s}
.ob-field input:focus{border-color:var(--accent)}
.ob-field input::placeholder{color:#5d656e}
.ob-secret{position:relative}.ob-secret input{padding-right:64px}
.ob-secret button{position:absolute;right:8px;bottom:7px;padding:6px 10px;font-size:11px;border-radius:8px;background:var(--panel);border:1px solid var(--border);color:var(--muted)}
.ob-btn{display:block;width:100%;padding:13px 16px;border-radius:12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  border:1px solid var(--accent-border);background:var(--accent);color:#0c0e11;transition:filter .15s,opacity .15s}
.ob-btn:hover:not(:disabled){filter:brightness(1.08)}
.ob-btn:disabled{opacity:.4;cursor:default}
.ob-btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.ob-btn.ghost:hover:not(:disabled){border-color:var(--accent);filter:none}
.ob-btn .spin{display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid #0c0e1155;border-top-color:#0c0e11;border-radius:50%;animation:ob-spin .8s linear infinite;vertical-align:-1px}
@keyframes ob-spin{to{transform:rotate(360deg)}}
.ob-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px;letter-spacing:2px;margin:18px 0}
.ob-or::before,.ob-or::after{content:'';flex:1;height:1px;background:var(--border)}
.ob-note{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 0}
.ob-note a,.ob-link{color:var(--accent);text-decoration:none;font-weight:600;background:none;border:0;padding:0;font:inherit;font-size:12px;cursor:pointer}
.ob-note a:hover,.ob-link:hover{text-decoration:underline}
.ob-error{display:none;margin:0 0 14px;padding:10px 12px;border-radius:10px;font-size:12.5px;color:var(--red);background:#2a1513;border:1px solid #5c2f2a}
.ob-error.show{display:block}
.ob-safe{margin:4px 0 18px;padding:14px 16px;border-radius:14px;background:var(--accent-soft);border:1px solid var(--accent-border)}
.ob-safe strong{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:13px;margin-bottom:6px}
.ob-safe ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--text)}
.ob-safe li{margin:4px 0}
.ob-safe li.warn{color:var(--gold)}
.ob-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.ob-done{text-align:center;padding:10px 0}
.ob-check{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--good-soft);border:1px solid var(--good-border);animation:ob-pop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes ob-pop{from{transform:scale(.4);opacity:0}}
/* The hand-off from login to the API key: the wasp lifts off through a ring. */
.ob-flight{position:fixed;inset:0;z-index:51;display:grid;place-items:center;pointer-events:none}
.ob-flight .ring{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid var(--accent);animation:ob-ring 1s ease-out both}
.ob-flight .ring.two{animation-delay:.18s}
.ob-flight svg{color:var(--gold);animation:ob-lift 1.1s cubic-bezier(.5,0,.3,1) both;filter:drop-shadow(0 0 22px #ffbe1a66)}
@keyframes ob-ring{from{transform:scale(.4);opacity:.9}to{transform:scale(3.2);opacity:0}}
@keyframes ob-lift{0%{transform:scale(.6);opacity:0}25%{transform:scale(1.15);opacity:1}55%{transform:scale(1) rotate(-6deg)}100%{transform:translateY(-38vh) scale(.5) rotate(4deg);opacity:0}}
.ob-plan{display:inline-block;font-size:11px;font-weight:800;letter-spacing:2px;padding:6px 12px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);margin-bottom:8px}
#account-pill{cursor:pointer}
@media (prefers-reduced-motion:reduce){.ob-card,.ob-flight *,.ob-check{animation:none!important}}
#vscode-pill{cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--info);border-color:#25415a}
#vscode-pill:hover{border-color:var(--info)}
#vscode-pill:disabled{opacity:.5;cursor:default}
#vscode-notice{position:absolute;z-index:40;width:320px;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--border);box-shadow:0 18px 50px #000a;font-size:12.5px}
#vscode-notice strong{display:block;font-size:13.5px;margin-bottom:4px}
#vscode-notice p{color:var(--muted);margin:0 0 12px}
#vscode-notice .ob-btn{margin-bottom:8px;text-align:center;text-decoration:none;font-size:13px;padding:10px}

/* Welcome: preset strategies to start with */
.ob-welcome-head{text-align:center}.ob-welcome-head svg{color:var(--gold)}.ob-welcome-head svg{margin:0 auto 6px;display:block}
.ob-presets{max-height:min(46vh,420px);overflow:auto;display:flex;flex-direction:column;gap:8px;margin:0 0 16px;padding-right:4px}
.ob-preset{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--inset,#101317);border:1px solid var(--border);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.ob-preset:hover{border-color:var(--accent)}
.ob-preset:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.ob-preset input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--accent);flex:none}
.ob-preset span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ob-preset strong{color:var(--text);font-size:13.5px}
.ob-preset small{color:var(--muted);font-size:12px;line-height:1.4}
.ob-preset em{color:var(--muted);font-size:11px;font-style:normal;opacity:.8}
.ob-more{display:flex;flex-direction:column;gap:8px}
.ob-more summary{cursor:pointer;color:var(--accent);font-size:12px;font-weight:600;padding:6px 2px;list-style:none}
.ob-more[open]{display:flex}.ob-more[open] summary{margin-bottom:0}
.ob-more>.ob-preset{margin-top:8px}
.ob-added{list-style:none;margin:0;padding:0;color:var(--text);font-size:13px;line-height:1.7}

/* Welcome, two columns: the presets on the left, what the highlighted one does on the right. */
.ob-card.ob-welcome{width:min(1040px,100%)}
.ob-welcome-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;margin:0 0 16px}
.ob-welcome-body .ob-presets{margin:0;max-height:min(58vh,560px)}
.ob-preset.active{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
.ob-explain{max-height:min(58vh,560px);overflow:auto;padding:18px 20px;border-radius:14px;background:var(--inset,#101317);border:1px solid var(--border);text-align:left}
.ob-x-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.ob-x-head h3{flex-basis:100%;order:2;margin:0;font-size:18px;color:var(--text)}
.ob-x-group{order:1;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent)}
.ob-x-count{order:3;font-size:12px;color:var(--muted)}
.ob-x-idea{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--text)}
.ob-explain h4{margin:16px 0 8px;font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.ob-explain dl{margin:0;display:flex;flex-direction:column;gap:9px}
.ob-x-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;font-size:12.5px;line-height:1.5}
.ob-x-row dt{color:var(--muted);font-weight:600}
.ob-x-row dd{margin:0;color:var(--text)}
.ob-x-row dd ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.ob-x-row dd small{display:block;margin-top:4px;color:var(--muted);font-size:11.5px;line-height:1.45}
.ob-x-example,.ob-x-money{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.ob-x-fine{margin:16px 0 0;font-size:11px;color:var(--muted);opacity:.8}
.ob-x-empty{margin:0;color:var(--muted);font-size:13px}
@media (max-width:760px){
  .ob-welcome-body{grid-template-columns:1fr}
  .ob-welcome-body .ob-presets{max-height:40vh}
  .ob-explain{max-height:none}
}

.ob-word .wasp{color:var(--gold)}