/* 6.0 · the employee's side, from the Company Map design (Turn 4, 5p, 5k).

   One stage, one orb, one thing to read at a time. The orb is Spren: it
   speaks, listens and thinks (spren-orb.js modes), and it replaces the
   portrait everywhere an employee looks. The question stays the largest type
   on the screen, because the moment the interface is the biggest thing there,
   people start filling in a form instead of describing their work. */

:root{
  --e-bg:#07070d; --e-glow:#14142c; --e-panel:#0e0e18; --e-chip:#161625;
  --e-ink:#f1f5f9; --e-ink2:#e2e8f0; --e-soft:#cbd5e1; --e-dim:#94a3b8; --e-faint:#8391a7;
  --e-accent:#818cf8; --e-accent2:#a5b4fc; --e-on:#07070d;
  --e-line:rgba(165,180,252,.14); --e-line2:rgba(165,180,252,.24);
  --e-bad:#ef4444; --e-bad-ink:#fca5a5; --e-gold:#E3B457;
}
*{box-sizing:border-box;margin:0;padding:0}
body.e6{
  min-height:100vh;color:var(--e-ink2);font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  background:radial-gradient(900px 620px at 50% 30%,var(--e-glow),var(--e-bg) 72%) fixed,var(--e-bg);
}
.e6 button{font-family:inherit;cursor:pointer}
.e6 a{color:inherit}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* the strip across the top: the mark, whose company, how far, and Stop */
.e6top{height:64px;display:flex;align-items:center;gap:18px;padding:0 28px}
.e6brand{display:flex;align-items:center}
.e6brand spren-orb{margin-right:-2px}
.e6word{font-size:24px;font-weight:200;letter-spacing:.25em;color:var(--e-ink2)}
.e6ctx{font-size:13px;color:var(--e-dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e6dots{margin-left:auto;display:flex;align-items:center;gap:6px}
.e6dots i{width:8px;height:8px;border-radius:50%;border:1px solid var(--e-line2)}
.e6dots i.on{background:var(--e-accent2);border-color:var(--e-accent2);box-shadow:0 0 8px var(--e-accent)}
.e6dots i.part{background:rgba(165,180,252,.35);border-color:var(--e-accent2)}
.e6stopb{font-size:13px;padding:8px 16px;border-radius:10px;background:transparent;
  border:1px solid rgba(239,68,68,.45);color:var(--e-bad-ink)}
.e6stopb:hover{background:rgba(239,68,68,.12)}

/* the stage: welcome, talk, done */
.e6main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;min-height:calc(100vh - 64px)}
.e6main.solo{grid-template-columns:minmax(0,1fr)}
.e6stage{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 28px 40px;min-width:0}
.e6stage>*{flex:none}
.e6in{animation:e6in .4s ease both}
@keyframes e6in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.e6hi{font-size:36px;font-weight:200;margin-top:10px;color:var(--e-ink)}
.e6lede{font-size:17px;font-weight:300;color:var(--e-soft);margin-top:10px;max-width:560px;line-height:1.55}
.e6promises{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:10px 28px;margin-top:26px;text-align:left}
.e6promises span{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--e-ink2)}
.e6promises span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--e-accent2);
  box-shadow:0 0 8px var(--e-accent);flex:none}
.e6row{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;justify-content:center}
.e6row[hidden]{display:none}
.e6btn{font-size:15px;font-weight:600;padding:13px 34px;border-radius:12px;border:0;background:var(--e-accent);
  color:var(--e-on);box-shadow:0 0 30px -8px rgba(129,140,248,.9);text-decoration:none;display:inline-block}
.e6btn:hover{background:var(--e-accent2)}
.e6btn:disabled{opacity:.5;cursor:default}
.e6ghost{font-size:14px;padding:12px 22px;border-radius:12px;border:1px solid var(--e-line2);background:transparent;color:var(--e-soft)}
.e6ghost:hover{color:#fff}
.e6link{font-size:13px;padding:6px;border:0;background:none;color:var(--e-faint)}

.e6state{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--e-accent2);min-height:14px}
.e6state.you{color:#e0e7ff}
.e6q{font-size:27px;font-weight:300;line-height:1.45;margin-top:14px;color:var(--e-ink);max-width:36ch}
.e6q.long{font-size:20px;max-width:52ch}

.e6answer{width:100%;max-width:640px;display:flex;flex-direction:column;gap:9px;margin-top:22px}
.e6answer textarea{background:var(--e-panel);border:1px solid var(--e-line2);border-radius:12px;padding:13px 15px;
  color:var(--e-ink);font:inherit;font-size:15px;line-height:1.5;min-height:92px;resize:vertical;outline:none}
.e6answer textarea:focus{border-color:var(--e-accent)}
.e6answer .e6btn{align-self:flex-end;padding:11px 26px;font-size:14px}
.e6ctrls{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.e6fine{font-size:12.5px;color:var(--e-faint);margin-top:16px;max-width:52ch;line-height:1.5}
.e6fine.bad{color:var(--e-bad-ink)}

/* what has been written down, and the promise nobody can switch off */
.e6rail{border-left:1px solid var(--e-line);padding:18px 20px;display:flex;flex-direction:column;gap:18px;min-width:0}
.e6kick{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--e-faint)}
.e6rail p{font-size:12.5px;color:var(--e-dim);line-height:1.5}
.e6rail p b{color:var(--e-accent2);font-weight:600}
.e6sec{display:flex;flex-direction:column;gap:8px}
.e6last{background:var(--e-panel);border:1px solid var(--e-line);border-radius:10px;padding:11px 13px;
  font-size:13px;color:var(--e-soft);line-height:1.5}
.e6w{display:flex;gap:9px;align-items:flex-start;border-radius:10px;padding:9px 11px;background:var(--e-panel);border:1px solid var(--e-line)}
.e6w .tk{color:var(--e-accent2);font-size:12px;line-height:1.5;flex:none}
.e6w .wt{flex:1;min-width:0;font-size:12.5px;color:var(--e-soft);line-height:1.45}
.e6w .wt b{display:block;color:var(--e-ink);font-weight:600}
.e6w .wt small{color:var(--e-dim);font-size:11.5px}
.e6w.todo,.e6w.none{background:none}
.e6w.clash{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.07)}
.e6w.clash .tk{color:var(--e-bad-ink)}
.e6chg{flex:none;background:none;border:0;color:var(--e-accent2);font-size:11.5px;padding:0;text-decoration:underline;text-underline-offset:3px}

/* the toast, carried by a small orb */
.e6toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;
  padding:5px 18px 5px 5px;border-radius:99px;background:var(--e-chip);border:1px solid rgba(129,140,248,.4);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.9);font-size:13.5px;color:var(--e-ink2);max-width:calc(100vw - 32px);
  animation:e6in .3s ease both}

/* the last word */
.e6points{width:100%;max-width:820px;display:flex;flex-direction:column;gap:10px;margin-top:26px;text-align:left}
.e6pt{display:flex;flex-direction:column;gap:10px;padding:15px 18px;border-radius:14px;background:var(--e-panel);border:1px solid var(--e-line)}
.e6pt.done{border-color:rgba(165,180,252,.28)}
.e6pt.held{border-color:rgba(227,180,87,.35)}
.e6pt .f{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--e-accent2)}
.e6pt .t{font-size:15px;line-height:1.55;color:var(--e-ink2)}
.e6pt .note{font-size:13px;color:var(--e-gold);line-height:1.5}
.e6pt textarea{background:var(--e-bg);border:1px solid var(--e-line2);border-radius:10px;padding:11px 13px;color:var(--e-ink);
  font:inherit;font-size:14.5px;min-height:80px;outline:none}
.e6acts{display:flex;gap:8px;flex-wrap:wrap}
.e6acts button{font-size:13px;padding:8px 14px;border-radius:10px;border:1px solid var(--e-line2);background:transparent;color:var(--e-soft)}
.e6acts button:hover{color:#fff}
.e6acts button[aria-pressed="true"]{background:var(--e-accent);border-color:var(--e-accent);color:var(--e-on);font-weight:600}
.e6acts button[data-act="confidential"][aria-pressed="true"]{background:var(--e-gold);border-color:var(--e-gold);color:#231704}
.e6kept{width:100%;max-width:520px;display:flex;flex-direction:column;gap:8px;margin-top:26px;text-align:left}
.e6kept div{padding:13px 15px;border-radius:12px;background:var(--e-panel);border:1px solid var(--e-line);font-size:13.5px;line-height:1.5}

/* the phone: one column, the orb smaller, the question still the largest thing */
@media (max-width:900px){
  .e6main{grid-template-columns:minmax(0,1fr)}
  .e6rail{border-left:0;border-top:1px solid var(--e-line)}
}
@media (max-width:520px){
  .e6top{padding:0 16px;gap:10px;height:56px}
  .e6word{font-size:18px}
  .e6ctx{display:none}
  .e6stage{padding:6px 16px 28px}
  .e6hi{font-size:28px}
  .e6lede{font-size:15px}
  .e6promises{grid-template-columns:minmax(0,1fr);align-self:stretch}
  .e6q{font-size:20px}
  .e6q.long{font-size:16px}
  .e6row{flex-direction:column-reverse;align-self:stretch}
  .e6row .e6btn,.e6row .e6ghost{width:100%}
}
@media (prefers-reduced-motion:reduce){.e6in,.e6toast{animation:none}}