/* DOORWAYS — dark, gallery-first. The artwork is the only thing that should
   carry colour; everything around it stays out of the way. */

:root{
  --ink:#0c0d11;
  --panel:#14161c;
  --panel-2:#1b1e26;
  --line:#282c37;
  --text:#eceef4;
  --text-2:#9aa1b2;
  --text-3:#666d7e;
  /* The cyan is lifted from the doorway in DOOR's own mark, so the interface
     and the logo are the same colour rather than two brand stories. */
  --accent:#1eccfe;
  --accent-dim:#0d3543;
  --on-accent:#04222c;
  /* Purple stays, but only on the model tag — the storyboard uses it for the
     generated side, and it should mean that one thing. */
  --generated:#a78bfa;
  --generated-dim:#2a2342;
  --live:#4ade80;
  --warm:#fbbf24;
  --bad:#f87171;
}

*{box-sizing:border-box}
/* The class rules below set display, which outranks the user-agent [hidden]
   rule — without this the "result" figure renders on top of the empty state. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.mono,.mono *{font-family:'IBM Plex Mono',ui-monospace,monospace}

.view{display:none; min-height:100%}
.view.is-active{display:block}

.lockup{display:flex; align-items:center; gap:11px}
.lockup.small{gap:8px}
.logo{display:block; border-radius:6px; flex:none}
.lockup.small .logo{border-radius:4px}
.mark{font-weight:700; letter-spacing:.24em; font-size:15px}
.mark.small{font-size:12px; letter-spacing:.2em; color:var(--text-2)}

button{font:inherit; cursor:pointer}
.link{background:none; border:none; color:var(--text-3); padding:0; font-size:13px}
.link:hover{color:var(--text)}
.error{color:var(--bad); font-size:13.5px; margin:10px 0 0}
.hint{color:var(--text-3); font-size:12.5px; margin:6px 0 0; min-height:1.2em}

/* ───────────────────────────────── sign in ───────────────────────────── */
.signin{
  max-width:360px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:40px 24px;
}
.tagline{color:var(--text-2); margin:4px 0 28px; font-size:14.5px}
#signin-form{display:flex; flex-direction:column; gap:6px}
label{font-size:12px; color:var(--text-2); letter-spacing:.04em; margin-top:10px}
input,textarea{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:11px 13px; font:inherit; width:100%;
}
input:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
button.primary,button.secondary,#signin-button{
  border-radius:8px; padding:12px 16px; border:1px solid transparent; font-weight:600; margin-top:18px;
}
#signin-button,button.primary{background:var(--accent); color:var(--on-accent)}
#signin-button:hover,button.primary:hover:not(:disabled){filter:brightness(1.08)}
button.primary:disabled{background:var(--panel-2); color:var(--text-3); cursor:not-allowed}
button.secondary{background:transparent; border-color:var(--accent); color:var(--accent); margin-top:10px; width:100%}
button.secondary:hover{background:var(--accent-dim)}
.fineprint{color:var(--text-3); font-size:12px; margin-top:22px}

/* ────────────────────────────────── bar ──────────────────────────────── */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px; border-bottom:1px solid var(--line); position:sticky; top:0;
  background:var(--ink); z-index:5;
}
.bar .back{justify-self:start}
.who{display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--text-3)}

/* ──────────────────────────────── artists ────────────────────────────── */
.artists{max-width:860px; margin:0 auto; padding:56px 24px}
.artists h1{font-size:28px; margin:0 0 6px; letter-spacing:-.01em}
.lede{color:var(--text-2); margin:0 0 32px; max-width:60ch; font-size:14.5px}
.artist-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.artist{
  text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px; color:var(--text); display:flex; flex-direction:column; gap:6px; min-height:150px;
}
.artist.is-live{border-color:var(--accent)}
.artist.is-live:hover{background:var(--panel-2); transform:translateY(-1px)}
.artist.is-empty{opacity:.4; cursor:default}
.artist-name{font-size:18px; font-weight:600}
.artist-meta{font-size:12.5px; color:var(--text-2)}
.artist-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  color:var(--generated); border:1px solid var(--generated-dim); background:var(--generated-dim);
  padding:3px 8px; border-radius:4px; align-self:flex-start; margin-top:4px;
}
.artist-go{margin-top:auto; color:var(--accent); font-size:13px; font-weight:600}

/* ──────────────────────────────── studio ─────────────────────────────── */
.studio{display:grid; grid-template-columns:340px 1fr; gap:0; min-height:calc(100vh - 53px)}
@media (max-width:860px){
  /* On a phone the stage would otherwise start below the fold, so pressing
     Generate looks like nothing happened. Controls collapse to a compact
     block, the stage follows immediately, and app.js scrolls it into view. */
  .studio{grid-template-columns:1fr; min-height:0}
  .panel{border-right:none; border-bottom:1px solid var(--line); padding:16px 16px 20px}
  .artist-card{margin-bottom:14px}
  .stage{padding:16px; min-height:52vh}
  /* One scrollable row rather than three stacked lines of chips. */
  .examples{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
  .chip{flex:none}
  #prompt{min-height:64px}
  .stage-result{max-width:100%}
  .bar{padding:10px 14px}
  .who{gap:10px; font-size:11.5px}
  .who span{max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .artists{padding:32px 18px}
  .artists h1{font-size:24px}
  .signin{padding:32px 20px}
}
@media (max-width:420px){
  /* Below this the three-part header cannot hold an email as well, so the
     address goes and Sign out stays — the part you actually need to tap. */
  .who span{display:none}
  .chip{font-size:11px; padding:5px 9px}
}

.panel{
  border-right:1px solid var(--line); padding:24px 22px; display:flex; flex-direction:column;
  background:var(--panel);
}
.artist-card{margin-bottom:20px}
.gpu{
  display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-2);
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--text-3); flex:none}
.dot.live{background:var(--live); box-shadow:0 0 0 3px rgba(74,222,128,.16)}
.dot.warm{background:var(--warm); box-shadow:0 0 0 3px rgba(251,191,36,.16)}
.dot.cold{background:var(--text-3)}

.examples{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.chip::before{content:'↳ '; color:var(--text-3)}
.chip{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text-2);
  border-radius:999px; padding:5px 11px; font-size:11.5px; text-align:left;
}
.chip:hover{border-color:var(--accent); color:var(--text)}

/* ───────────────────────────────── stage ─────────────────────────────── */
.stage{display:flex; align-items:center; justify-content:center; padding:32px; position:relative}
.stage-empty{color:var(--text-3); font-size:14px}

.stage-result{margin:0; max-width:min(720px,100%); display:flex; flex-direction:column; gap:0}
.stage-result img{
  display:block; width:100%; height:auto; border-radius:10px 10px 0 0;
  background:var(--panel); border:1px solid var(--line); border-bottom:none;
}
figcaption{
  border:1px solid var(--line); border-radius:0 0 10px 10px; background:var(--panel);
  padding:12px 16px; display:flex; flex-direction:column; gap:5px;
}
.caption-main{display:flex; align-items:center; justify-content:space-between; gap:12px}
#caption-title{font-weight:600; font-size:15px}
.tag{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  color:var(--generated); background:var(--generated-dim); padding:3px 8px; border-radius:4px; white-space:nowrap;
}
.caption-meta{display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:11.5px; color:var(--text-3); flex-wrap:wrap}

.stage-busy{width:min(420px,100%); text-align:center; color:var(--text-2)}
.bar-track{height:3px; background:var(--panel-2); border-radius:2px; overflow:hidden; margin-bottom:14px}
.bar-fill{height:100%; width:0%; background:var(--accent); transition:width .9s linear}
@media (prefers-reduced-motion:reduce){ .bar-fill{transition:none} .artist.is-live:hover{transform:none} }