/* ============================================================
   base.css — reset, typography, buttons, shared atoms, boot
   ============================================================ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none !important}
::selection{background:var(--accent-tint-2);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)}

.app{min-height:100vh;display:flex;flex-direction:column}
.stage{flex:1;display:flex;min-height:0}

/* ---------- typography ---------- */
.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin:0;
}
.display{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-weight:700;letter-spacing:-0.02em;line-height:1.04;text-wrap:balance;
}
.lead{color:var(--ink-2);font-size:1.06rem;max-width:46ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.2em;border-radius:var(--r-pill);
  border:1px solid transparent;background:transparent;font-weight:600;font-size:.95rem;line-height:1;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ink);color:var(--bg);box-shadow:var(--shadow-1)}
.btn--primary:hover{box-shadow:var(--shadow-2)}
.btn--ghost{color:var(--ink-2);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface);border-color:var(--ink-2);color:var(--ink)}
.btn--accent{background:var(--accent);color:#1B1A17}
.btn--accent:hover{filter:brightness(1.04);box-shadow:var(--shadow-2)}
.btn--danger{color:var(--bad);border-color:var(--line-2)}
.btn--danger:hover{background:var(--bad-tint);border-color:var(--bad)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn--sm{padding:.5em .85em;font-size:.86rem}
.btn--icon{padding:.5em;border-radius:var(--radius-xs);color:var(--muted)}
.btn--icon:hover{background:var(--sink);color:var(--ink)}

/* ---------- shared atoms ---------- */
.avatar{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:"Bricolage Grotesque", sans-serif;font-weight:700;font-size:1rem;
  background:var(--accent-tint);color:var(--accent-ink);border:1px solid var(--accent-tint-2);
}
.empty{color:var(--muted);font-size:.86rem;text-align:center;padding:14px 6px;border:1px dashed var(--line-2);border-radius:var(--radius-sm)}
.inline-add{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--accent);box-shadow:var(--shadow-pop);border-radius:var(--radius-sm);padding:8px}
.inline-add input{border:none;background:var(--sink);border-radius:var(--radius-xs);padding:7px 10px;font-size:.9rem;width:180px}
.inline-add input:focus{outline:none;background:var(--accent-tint)}
.inline-add select{border:1px solid var(--line-2);border-radius:var(--radius-xs);padding:7px 8px;background:var(--surface);font-size:.84rem}
.icon{display:inline-block;vertical-align:middle;flex:none}

/* ---------- boot splash (painted before Vue + fonts) ---------- */
#boot{
  position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .4s ease, visibility .4s ease;
}
#boot.boot--out{opacity:0;visibility:hidden}
.boot__mark{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff 45%));
  box-shadow:var(--shadow-2), inset 0 0 0 1px color-mix(in srgb,var(--accent-ink) 25%, transparent);
  animation:bootpop 1.7s ease-in-out infinite;
}
.boot__mark svg{width:27px;height:27px;display:block}
.boot__row{display:flex;align-items:center;gap:11px;color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.boot__cells{display:flex;gap:5px}
.boot__cell{width:8px;height:8px;border-radius:2px;background:var(--accent-tint-2);transform:rotate(45deg);animation:bootcell 1.15s ease-in-out infinite}
.boot__cell:nth-child(2){animation-delay:.14s}
.boot__cell:nth-child(3){animation-delay:.28s}
@keyframes bootpop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bootcell{0%,100%{opacity:.3;background:var(--accent-tint-2)}50%{opacity:1;background:var(--accent)}}

/* ---------- assembling screen ---------- */
.building{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:40px;text-align:center}
.building__grid{display:grid;grid-template-columns:repeat(2,42px);gap:9px}
.building__cell{width:42px;height:42px;border-radius:12px;background:var(--accent-tint);border:1px solid var(--accent-tint-2);animation:bcell 1.5s ease-in-out infinite}
.building__cell:nth-child(2){animation-delay:.14s}
.building__cell:nth-child(3){animation-delay:.28s}
.building__cell:nth-child(4){animation-delay:.42s}
@keyframes bcell{0%{transform:scale(.42);opacity:.25}42%{transform:scale(1);opacity:1;background:var(--accent);border-color:var(--accent)}100%{transform:scale(.42);opacity:.25}}
.building__text h2{font-size:1.55rem}
.building__text p{color:var(--muted);margin-top:7px;font-size:.95rem}

/* ---------- transitions ---------- */
.pop-enter-active{transition:opacity .2s ease, transform .2s cubic-bezier(.2,.9,.3,1.4)}
.pop-enter-from{opacity:0;transform:scale(.9) translateY(6px)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .boot__mark,.boot__cell,.building__cell{animation:none}
}

/* ---------- responsive base (desktop-first, graceful down) ---------- */
@media (max-width:900px){
  .welcome{grid-template-columns:1fr !important}
  .welcome__preview{display:none}
  .wizard{grid-template-columns:1fr !important}
  .wizard__preview{display:none}
  .tracks{grid-template-columns:1fr !important}
  .ws{grid-template-columns:1fr !important}
  .ws__side{flex-direction:row;overflow:auto;border-right:none;border-bottom:1px solid var(--line);padding:10px}
  .ws__group,.ws__wsname{display:none}
  .navitem{width:auto;white-space:nowrap}
  .slideover__panel{width:100% !important}
}