/* app.css — the prototype's visitor pages. Self-contained: system font stacks only. */
:root{
  --navy:#163c63; --navydk:#0f2b49; --ink:#16233A; --soft:#5A6675; --faint:#8B94A1;
  --goldl:#f5daa3; --goldd:#936b37; --line:#E3E0D8; --warm:#FAF8F4; --card:#FFFFFF;
  --green:#1E7A4C; --greenbg:#EAF5EE; --red:#B23127; --redbg:#FBEEEC; --amber:#91660A;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--warm);color:var(--ink);font-family:var(--sans);line-height:1.55;min-height:100vh;position:relative;overflow-x:hidden}
a{color:var(--navy);text-underline-offset:3px} a:hover{color:var(--goldd)}
.ghost{position:fixed;right:-140px;bottom:-160px;width:680px;opacity:.05;pointer-events:none;z-index:0}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 56px;border-bottom:1px solid var(--line);position:relative;z-index:1;background:var(--warm)}
header img{width:210px;max-width:46vw}
.kicker{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.hright{display:flex;align-items:center;gap:18px}
main{position:relative;z-index:1;display:flex;flex-direction:column;min-height:calc(100vh - 90px)}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px}
.rule{width:64px;height:3px;background:linear-gradient(90deg,var(--goldl),var(--goldd));border-radius:2px;margin:0 auto 24px}
h1{font-family:var(--serif);font-weight:600;color:var(--navy);letter-spacing:-.01em;margin:0;text-align:center}
.btn{display:inline-block;font:650 16px var(--sans);padding:15px 34px;border-radius:999px;border:0;background:var(--navy);color:#fff;cursor:pointer;text-decoration:none}
.btn.small{font-size:14.5px;padding:12px 26px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--goldd);outline-offset:2px}
.note{font-size:13px;color:var(--faint)}
footer{font-size:12px;color:var(--faint);padding:14px 56px 22px;text-align:center;position:relative;z-index:1}
[hidden]{display:none !important}
/* welcome */
.signin{width:420px;max-width:92vw;background:var(--card);border-radius:16px;padding:28px 30px;box-shadow:0 8px 32px rgba(22,60,99,.10);display:flex;flex-direction:column;gap:16px}
.signin label{font-size:13px;color:var(--soft)}
.signin input{width:100%;font:15px var(--sans);border:1.5px solid var(--line);border-radius:10px;background:var(--warm);height:46px;padding:0 14px;color:var(--ink)}
/* wake */
.wake-sub{font-size:17.5px;line-height:1.65;color:var(--soft);margin:16px auto 30px;max-width:62ch;text-align:center}
/* loading */
.panel{width:640px;max-width:94vw;background:var(--card);border-radius:18px;padding:34px 38px;box-shadow:0 8px 32px rgba(22,60,99,.10)}
.phase{display:flex;gap:16px;align-items:flex-start;margin-top:16px;text-align:left}
.phase .dot{flex:none;width:26px;height:26px;border-radius:50%}
.dot.todo{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line)}
.dot.done{background:var(--line);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.dot.now{background:var(--navy);display:flex;align-items:center;justify-content:center}
.dot.now::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--goldl)}
.phase .pn{font-weight:500;font-size:15.5px;color:var(--faint)} .phase.on .pn{font-weight:650;color:var(--navy)} .phase.past .pn{color:var(--soft)}
.phase .pd{font-size:13px;line-height:1.5;color:var(--faint);margin-top:2px}
.bar{width:100%;height:8px;border-radius:999px;background:var(--line);overflow:hidden;position:relative;margin:26px 0 8px}
.bar>div{position:absolute;left:0;top:0;height:100%;width:30%;border-radius:999px;background:linear-gradient(90deg,var(--navy),var(--goldd));animation:shimmer 2.2s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}
@media (prefers-reduced-motion:reduce){.bar>div{animation:none;width:100%;opacity:.4}}
.meta{font:11.5px var(--mono);color:var(--faint);margin-top:8px}
/* chat */
.chat{width:820px;max-width:94vw;margin:0 auto;flex:1;display:flex;flex-direction:column;gap:18px;padding:32px 0 8px}
.u{align-self:flex-end;max-width:70%;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:16px 16px 4px 16px;padding:13px 18px;font-size:15px;white-space:pre-wrap}
.aWrap{align-self:flex-start;max-width:88%;display:flex;flex-direction:column}
.a{background:var(--card);border-radius:16px 16px 16px 4px;padding:18px 22px;box-shadow:0 4px 20px rgba(22,60,99,.07);font-size:15px;line-height:1.65;white-space:pre-wrap}
.mark{display:flex;gap:10px;align-items:center;border-radius:999px;padding:8px 16px 8px 8px;margin-top:12px;align-self:flex-start;font-weight:650;font-size:13.5px}
.mark.ok{background:var(--greenbg);color:var(--green)}
.mark.none{background:var(--warm);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--soft);font-weight:500}
.mark .glyph{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.mark.ok .glyph{background:var(--green)}
.spec{font-size:13.5px;line-height:1.6;color:var(--soft);text-align:center;max-width:940px;margin:0 auto 14px}
.spec b{color:var(--ink)}
.inputrow{background:var(--card);border-radius:999px;box-shadow:0 8px 32px rgba(22,60,99,.12);display:flex;align-items:center;gap:12px;padding:8px 8px 8px 24px}
.inputrow textarea{flex:1;font:15px var(--sans);border:0;background:transparent;resize:none;height:24px;max-height:120px;color:var(--ink)}
.inputrow textarea::placeholder{color:var(--faint)}
.footnote{font-size:12px;line-height:1.6;color:var(--soft);text-align:left;padding:14px 0 0;max-width:940px;margin:0 auto;border-top:1px solid var(--line)}
.msgbox{margin:12px auto;max-width:820px;padding:12px 16px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);font-size:13.5px;color:var(--ink)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.chat{flex:0 1 auto}
.chat.grow{flex:1 1 auto}