/* Luna: the member-home panel. Loaded last; overrides the older sheets only
   where needed. One typeface throughout: the page's own mono. */
:root{--gold:#f2c46d;--good:#6fe3a1;--ink:#f3eee6;--well:#0b1214;--well-2:#101b1e;--rule:#1f3033;--sans:'SFMono-Regular',Menlo,Consolas,monospace}

/* ---------- page frame ---------- */
#rotate-surface:focus{outline:none}
#app main{grid-template-columns:minmax(0,1fr) var(--panel-w,clamp(560px,44vw,900px))}
#app .chat-panel{border:1px solid var(--cyan);box-shadow:6px 6px 0 var(--pink);background:var(--well)}
#app .chat-panel{transition:opacity .2s ease,transform .5s cubic-bezier(.34,1.42,.64,1),visibility 0s}
#app .chat-panel[data-open=false]{transform:translateX(calc(var(--dir,1) * 48px)) scale(.97);transition:opacity .16s ease,transform .22s ease,visibility 0s .22s}
/* the four blocks stay at the bottom whether the panel is open or closed */
#app .workspace{display:flex;flex-direction:column;justify-content:flex-end}
.avatar-caption #avatar-note{display:none}
#app .enter-world{align-items:center}
#app .enter-world b{grid-row:auto}
.panel-grip{position:absolute;left:-11px;top:0;width:14px;cursor:ew-resize;z-index:5;display:grid;place-items:center;touch-action:none}
.panel-grip::after{content:"";width:6px;height:56px;border:1px solid #3d5a5e;border-radius:3px;background:radial-gradient(circle at 50% 41%,#cfd8d6 1px,transparent 1.6px),radial-gradient(circle at 50% 50%,#cfd8d6 1px,transparent 1.6px),radial-gradient(circle at 50% 59%,#cfd8d6 1px,transparent 1.6px),#0e1a1c;transition:border-color .2s,box-shadow .2s}
.panel-grip:hover::after,.panel-grip:focus-visible::after{border-color:var(--cyan);box-shadow:0 0 0 3px #21ddde33}
.panel-grip::before{content:attr(data-label);position:absolute;top:50%;right:18px;transform:translateY(-50%);white-space:nowrap;font-size:10px;color:var(--cyan);background:var(--black);border:1px solid #2a4246;padding:2px 6px;opacity:0;transition:opacity .2s;pointer-events:none}
.panel-grip:hover::before,.panel-grip:focus-visible::before{opacity:1}

/* ---------- her header: portrait, name, quests ---------- */
.host-head{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--rule);background:linear-gradient(180deg,#0f1c30,var(--well))}
.host-main{flex:1;min-width:0;display:grid;gap:8px}
.host-line{display:flex;align-items:baseline;gap:10px;min-width:0}
.host-line h2{margin:0;font-size:16px;letter-spacing:.1em;color:var(--ink)}
.host-line small{font-size:11px;color:var(--good)}
.host-line small::before{content:"● "}
.head-btn{border:0;background:none;color:var(--muted);font-size:11px;padding:2px 6px;letter-spacing:.04em}
#clear-chat,#move-panel{border:1px solid var(--rule);padding:3px 8px}
#move-panel{margin-left:auto}
#move-panel:hover,#move-panel:focus-visible{border-color:var(--cyan);color:var(--cyan)}
#clear-chat:hover,#clear-chat[data-confirm=yes]{border-color:var(--pink);color:var(--pink)}
#close-panel{font-size:18px;line-height:1}

/* Sprites: an inner 4×4 sheet animated on the compositor (sprite.js) */
[data-sprite]{position:relative;overflow:hidden}
[data-sprite] .anim{position:absolute;left:0;top:0;width:400%;height:400%;background:0 0/100% 100% no-repeat;display:none;will-change:transform}
[data-sprite].anim-ready[data-still=false] .anim{display:block}
/* Luna: expression faces underneath, animated frames on top */
.host-sprite{position:relative;overflow:hidden;width:96px;height:96px;flex:none;border:1px solid var(--cyan);background:#101a28 url('./assets/host-sheet.jpg') 0 0/400% 200% no-repeat;cursor:pointer}
.host-sprite[data-mood=hello]{background-position:0 0}.host-sprite[data-mood=thinking]{background-position:33.333% 0}.host-sprite[data-mood=amused]{background-position:66.666% 0}.host-sprite[data-mood=surprised]{background-position:100% 0}
.host-sprite[data-mood=concerned]{background-position:0 100%}.host-sprite[data-mood=encouraging]{background-position:33.333% 100%}.host-sprite[data-mood=celebrating]{background-position:66.666% 100%}.host-sprite[data-mood=resting]{background-position:100% 100%}
.host-sprite.anim-ready[data-still=false]{background-image:none}
/* the member's own sprite: animated beside the message box, a still face beside their bubbles */
.player-sprite{width:64px;height:64px;flex:none;align-self:center;border:1px solid #6a2a50;background:#1d1320;cursor:pointer}
#app .message.user > .player-face{width:44px;height:44px;flex:none;border:1px solid #6a2a50;background:#1d1320 0 0/400% 400% no-repeat}
@keyframes host-breathe{50%{transform:translateY(-2px) scaleY(1.015)}}

/* quests: five steps, the current one outlined (no moving stripes) */
.quest-log{display:grid;gap:6px}
.quest-top{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.08em;color:var(--muted);min-width:0}
.quest-top b{color:var(--ink)}
.quest-top .host-hook{margin-left:auto;border:0;background:none;padding:0;font:inherit;letter-spacing:.02em;color:var(--muted);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quest-top .host-hook b{color:var(--gold);font-weight:600}
.quest-top .host-hook:disabled{cursor:default}
.hud-lessons{border:1px solid var(--rule);background:none;color:var(--muted);font:inherit;padding:2px 7px;white-space:nowrap}
.hud-lessons:hover{border-color:var(--cyan);color:var(--cyan)}
.quest-log .life-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.quest-node{display:grid;gap:4px;border:0;background:none;padding:0;text-align:left;min-width:0}
.quest-node i{display:block;height:6px;background:var(--rule);position:relative;overflow:hidden}
.quest-node i::after{content:"";position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.quest-node[data-state=done] i::after{transform:scaleX(1)}
.quest-node[data-state=attention] i{background:var(--pink)}
.quest-node[data-now] i{box-shadow:inset 0 0 0 1px var(--cyan)}
.quest-node span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quest-node[data-state=done] span{color:var(--ink)}
.quest-node[data-now] span{color:var(--cyan)}

.context-bar{padding:6px 14px!important;font-size:10px}
#member-panel:has(#chat-scroll:not([hidden])) .context-bar{display:none}

/* quest-complete toast */
/* shown over the quest bar itself, so it never covers the conversation */
.quest-log{position:relative}
.quest-toast{position:absolute;inset:-4px -2px;display:grid;place-items:center;opacity:0;transform:translateY(4px);pointer-events:none;z-index:6;background:var(--black);border:1px solid var(--gold);color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.08em;white-space:nowrap;overflow:hidden;transition:opacity .25s ease,transform .25s ease}
.quest-toast.on{opacity:1;transform:none}

/* ---------- chat: compact speech bubbles ---------- */
#app .chat-scroll{padding:14px 16px 8px}
#app .message{display:flex;gap:10px;align-items:flex-end;border:0;padding:0;margin:0 0 12px;max-width:none}
#app .message:first-child{margin-top:0}
#app .message .speaker{display:none}
#app .message > .chat-face{width:44px;height:44px;flex:none;box-shadow:none;border:1px solid var(--rule);animation:none}
#app .message .bubbles{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:min(80%,580px)}
#app .message .bubble{background:var(--well-2);border:1px solid #2a4246;border-radius:12px 12px 12px 4px;padding:7px 11px;font:14px/1.6 var(--sans);color:var(--ink);overflow-wrap:anywhere}
#app .message .bubble strong{color:#fff}
#app .message .bubble code{font:13px var(--sans);color:var(--cyan);background:#07100f;border:1px solid var(--rule);border-radius:4px;padding:0 4px}
#app .message .bubble ul,#app .message .bubble ol{margin:0;padding-left:18px}
#app .message .bubble li+li{margin-top:2px}
#app .message time{font-size:10px;color:#6f8488;padding:0 4px}
#app .message.user{flex-direction:row-reverse}
#app .message.user .bubbles{align-items:flex-end}
#app .message.user .bubble{background:#1d1320;border-color:#6a2a50;border-radius:12px 12px 4px 12px}
#app .message.fresh .bubble{animation:bubble-in .18s ease-out both}
#app .message.fresh .bubble:nth-child(2){animation-delay:.06s}#app .message.fresh .bubble:nth-child(3){animation-delay:.12s}
@keyframes bubble-in{from{opacity:0;transform:translateY(4px) scale(.98)}}
#app .message.streaming .bubble{border-color:#2f6a70}
#app .message .caret{display:inline-block;width:7px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--cyan);animation:caret .8s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
#app .bubble.typing{display:flex;gap:5px;align-items:center;padding:11px 13px}
#app .bubble.typing i{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:typing-dot 1s ease-in-out infinite}
#app .bubble.typing i:nth-child(2){animation-delay:.15s}#app .bubble.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
#app .message .live-stage{font-size:10px;color:var(--muted);padding:0 4px}
#app .welcome{padding:0}
#app .choices{display:flex;flex-wrap:wrap;gap:8px}
#app .choices button{border:1px solid var(--cyan);background:none;color:var(--cyan);padding:7px 12px;font:12px var(--sans);box-shadow:none;border-radius:14px}
#app .choices button:hover{background:var(--cyan);color:var(--black)}
#app .chat-bottom{padding:10px 14px}
#app .composer-label{display:none}
#app #chat-form textarea{font:14px/1.6 var(--sans);min-height:44px}
#app .chat-foot{font-size:10px;margin-top:6px}
#app .next-action{padding:6px 14px 0}

/* ---------- quests, record, settings ---------- */
#app .task-scroll,#app .settings-view{padding:16px}
#app .setup-map{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 14px 0;border:0}
#app .setup-map button{display:grid;gap:2px;text-align:left;border:1px solid var(--rule);background:#0d1719;padding:10px 12px;font:600 13px var(--sans);color:var(--ink)}
#app .setup-map button small{font:10px var(--sans);letter-spacing:.06em;color:var(--muted);font-weight:400}
#app .setup-map button small b{color:var(--gold);font-weight:600}
#app .setup-map button[aria-current]{border-color:var(--cyan);box-shadow:inset 3px 0 0 var(--cyan)}
#app .settings-row{padding:12px 14px;border:1px solid var(--rule);background:#0d1719;margin-bottom:8px}

/* frame-rate readout beside the avatar */
.fps-meter{position:absolute;z-index:4;pointer-events:none;font-size:11px;letter-spacing:.06em;padding:3px 7px;border:1px solid var(--rule);background:#050505cc;color:var(--good);font-variant-numeric:tabular-nums;white-space:nowrap}
.fps-meter[data-level=fair]{color:var(--gold)}.fps-meter[data-level=poor]{color:var(--pink)}

/* ---------- first sign-in: one screen per step ---------- */
#pact .pact-card{width:min(580px,100%);max-height:none;gap:14px;padding:22px 24px}
#pact .pact-head{display:flex;align-items:center;gap:14px}
#pact .pact-head .host-sprite,#profile-dialog .pact-head .host-sprite{width:72px;height:72px;cursor:default;animation:host-breathe 3.2s ease-in-out infinite}
.pact-kicker{font-size:10px;letter-spacing:.12em;color:var(--muted)}
#pact h2,#profile-dialog .pact-head h2{margin:0;font:700 22px/1.2 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.pact-pips{display:flex;gap:6px;margin-left:auto}.pact-pips i{width:22px;height:5px;background:var(--rule)}.pact-pips i.on{background:var(--cyan)}
#pact .pact-lede{font:14px/1.6 var(--sans);margin:0}
.pact-terms{display:grid;gap:8px}
.pact-terms label{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:start;border:1px solid var(--rule);padding:10px 12px;cursor:pointer;font:13px/1.55 var(--sans)}
.pact-terms label:has(input:checked){border-color:var(--cyan);background:#0c1c1f}
.pact-terms input{margin-top:3px;accent-color:var(--pink)}
.pact-terms small{grid-column:2;color:var(--muted);font:12px/1.5 var(--sans)}
.pact-terms a{color:var(--cyan)}
.pact-fine{margin:0;font-size:10px;color:var(--muted);letter-spacing:.02em}
#pact .pact-options{display:grid;gap:8px}
#pact .pact-options button{text-align:left;padding:11px 13px}
#pact .pact-options button.picked[data-pact-answer="1"]{border-color:var(--good);background:#10251b;color:var(--ink)}
#pact .pact-feedback{margin:0;font:13px/1.5 var(--sans);min-height:1.5em}
#pact .pact-actions{display:flex;align-items:center;gap:12px}
#pact .pact-actions .primary{margin-left:auto;min-width:160px}
.pact-back{border:0;background:none;color:var(--muted);font-size:12px}
#profile-dialog .pact-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}

@media(max-width:1000px){#app main{grid-template-columns:minmax(0,1fr) minmax(430px,58%)}.panel-grip{display:none}}
@media(max-width:740px){#app main{display:block}.host-sprite{width:72px;height:72px}}
@media(prefers-reduced-motion:reduce){.host-sprite,.host-sprite .anim,.quest-node i::after,.quest-toast,#app .message .bubble,#app .bubble.typing i{animation:none!important;transition:none!important}}

/* rulebook acceptance (rails.js) */
.rails-status{display:grid;gap:6px;border:1px solid var(--rule);background:#0d1719;padding:12px 14px;margin:8px 0 12px}
.rails-status[data-state=ok]{border-color:#2f6a4a}.rails-status[data-state=gate],.rails-status[data-state=stale]{border-color:var(--gold)}
.rails-status strong{font-size:13px;color:var(--ink)}.rails-status p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.rails-status small{font-size:10px;color:var(--muted);letter-spacing:.04em}.rails-status ul{margin:0;padding-left:18px;font-size:12px;color:var(--ink)}

/* ---------- Setup: one route of five stops (journey.js) ---------- */
.j-journey{display:grid;gap:14px}
.j-luna{display:flex;gap:10px;align-items:flex-start}
.j-luna > .chat-face{width:44px;height:44px;flex:none;box-shadow:none;border:1px solid var(--rule);animation:none}
.j-say{margin:0;background:var(--well-2);border:1px solid #2a4246;border-radius:12px 12px 12px 4px;padding:8px 11px;font:13px/1.6 var(--sans);color:var(--ink)}
.j-say b{color:var(--gold);font-weight:600}
.j-say-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.j-chip{border:1px solid var(--cyan);color:var(--cyan);border-radius:14px;padding:4px 11px;font:12px var(--sans)}
.j-chip:hover{background:var(--cyan);color:var(--black)}
.j-title{margin:4px 0 0;font-size:20px;letter-spacing:-.03em}
.j-route{position:relative;display:grid;grid-template-columns:repeat(5,1fr);padding-top:26px}
.j-route::before{content:"";position:absolute;left:10%;right:10%;top:44px;height:2px;background:#2a4246}
.j-fill{position:absolute;left:10%;top:44px;height:2px;background:var(--cyan);transition:width .6s ease}
.j-stop{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;padding:0 2px;background:none;border:0;color:inherit}
.j-dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px solid #2a4246;background:var(--well);font-weight:700;font-size:13px;position:relative;z-index:1;color:#5d6f72}
.j-stop[data-state=done] .j-dot{background:var(--cyan);border-color:var(--cyan);color:var(--black)}
.j-stop[data-state=next] .j-dot{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 5px rgba(242,196,109,.14)}
.j-stop[data-state=wait] .j-dot{border-color:var(--gold);color:var(--gold);border-style:dashed}
.j-stop[data-state=attention] .j-dot{border-color:var(--pink);color:var(--pink)}
.j-name{font-size:11px;line-height:1.3;color:var(--muted)}
.j-stop[data-state=done] .j-name{color:var(--ink)}.j-stop[data-state=next] .j-name,.j-stop[data-state=wait] .j-name{color:var(--gold)}.j-stop[data-state=attention] .j-name{color:var(--pink)}
.j-here{position:absolute;top:-28px;width:26px!important;height:26px!important;border-radius:50%;border:1px solid var(--gold)!important;box-shadow:none!important;animation:none!important}
.j-where{display:flex;gap:3px;justify-content:center;flex-wrap:wrap}
.where-chip{font-size:9px;letter-spacing:.08em;padding:1px 5px;border:1px solid #2a4246;color:var(--muted);white-space:nowrap}
.where-chip.web{border-color:#2f6a70;color:var(--cyan)}.where-chip.app{border-color:#6a2a50;color:#ff8cc7}.where-chip.ibkr{border-color:#5b4a24;color:var(--gold)}
details.j-fit{border:1px solid var(--rule);background:var(--well-2)}
details.j-fit summary{cursor:pointer;padding:9px 12px;font-size:12px;color:var(--muted)}
.j-fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 12px 12px}
.j-fit-grid div{border:1px solid var(--rule);padding:10px;display:grid;gap:4px;align-content:start}
.j-fit-grid b{font-size:12px}.j-fit-grid p{margin:0;font-size:12px;color:var(--muted)}
.j-cards{display:grid;gap:10px}
.j-card{border:1px solid var(--rule);background:#0d1719}
.j-card[data-state=next],.j-card[data-state=wait]{border-color:var(--gold)}.j-card[data-state=attention]{border-color:var(--pink)}
.j-card[data-state=done]{opacity:.8}
.j-card-head{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:12px 14px;width:100%;text-align:left;background:none;border:0;color:inherit}
.j-pill{font-size:10px;letter-spacing:.1em;padding:3px 7px;border:1px solid #2a4246;color:var(--muted);white-space:nowrap}
.j-card[data-state=done] .j-pill{background:var(--cyan);border-color:var(--cyan);color:var(--black)}
.j-card[data-state=next] .j-pill{border-color:var(--gold);color:var(--gold)}
.j-card[data-state=wait] .j-pill{border-color:var(--gold);color:var(--gold);border-style:dashed}
.j-card[data-state=attention] .j-pill{border-color:var(--pink);color:var(--pink)}
.j-card-title{font-size:14px;font-weight:700}
.j-xp{font-size:11px;color:var(--gold)}
.j-meta{grid-column:2/4;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--muted)}
.j-card-body{padding:0 14px 14px;display:grid;gap:10px}
.j-card-body .card,.j-embed .card{margin-top:0}
.j-get{margin:0;font-size:12px;color:var(--ink)}.j-safe{margin:0;font-size:11px;color:var(--good)}.j-risk{margin:0;font-size:11px;color:#ffb3d6}
.j-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.j-step{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;border-top:1px dashed var(--rule);padding-top:8px}
.j-tick{width:20px;height:20px;border:1px solid #2a4246;display:grid;place-items:center;font-size:11px;color:#5d6f72;background:none;padding:0}
button.j-tick{cursor:pointer}
.j-step[data-done=true] .j-tick{background:var(--good);border-color:var(--good);color:var(--black)}
.j-t{font-size:13px}.j-s{grid-column:2;font-size:12px;color:var(--muted);margin:0}.j-s b{color:var(--ink);font-weight:600}
.j-auto{margin-left:6px;font-size:10px;letter-spacing:.06em;color:#5d6f72}.j-step[data-done=true] .j-auto{color:var(--good)}
.j-code{grid-column:2;display:flex;align-items:center;gap:8px;background:#060b0c;border:1px solid var(--rule);padding:6px 8px}
.j-code code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;color:var(--cyan);font:12px var(--sans)}
.j-code button{font-size:11px;color:var(--muted);border:1px solid #2a4246;padding:2px 7px;background:none}
.j-link{color:var(--cyan);border:1px solid #2f6a70;padding:3px 9px;font-size:12px;background:none;display:inline-block}
.j-embed{grid-column:2}
.j-card-body > .j-embed{grid-column:auto}
.j-foot{margin:0;font-size:11px;color:var(--muted);border-top:1px solid var(--rule);padding-top:10px}
@media(max-width:740px){.j-fit-grid{grid-template-columns:1fr}.j-name{font-size:10px}}

/* ---------- ApeTrack: your verified record (apetrack.js) ---------- */
.at{display:grid;gap:14px;container-type:inline-size;--up:#21ddde;--down:#ff3ea5}
.at .pos{color:var(--up)}.at .neg{color:var(--down)}
.at-hero{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:end}
.at-big{margin-top:6px;font-size:52px;line-height:1;letter-spacing:-.04em;font-weight:700;font-variant-numeric:tabular-nums}
.at-sub{margin-top:6px;font-size:12px;color:var(--muted)}.at-sub b{font-weight:600}
.at-tabs{display:flex;gap:4px;align-self:start}
.at-tabs button{border:1px solid #2a4246;padding:4px 10px;font-size:11px;letter-spacing:.06em;color:var(--muted)}
.at-tabs button[aria-pressed=true]{border-color:var(--cyan);background:var(--cyan);color:var(--black)}
.at-proof{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--muted)}
.at-badge{font-size:10px;letter-spacing:.1em;padding:2px 7px;background:var(--cyan);color:var(--black);font-weight:700}
.at-chart{position:relative;border:1px solid var(--rule);background:#081012;padding:10px 12px 6px;min-height:228px}
.at-chart svg{display:block;max-width:100%;height:auto;overflow:visible;touch-action:pan-y;cursor:crosshair}
.at-chart text{font-size:10px;fill:var(--muted)}.at-chart .at-end{font-size:11px;fill:var(--ink)}
.at-tip{position:absolute;top:30px;transform:translateX(-50%);pointer-events:none;background:var(--black);border:1px solid #2a4246;padding:5px 8px;font-size:11px;white-space:nowrap;z-index:1}
.at-tip b{font-variant-numeric:tabular-nums}.at-gold{color:var(--gold)}
.at-note{margin:0;font-size:11px;color:var(--muted)}
.at-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.at-stat{border:1px solid var(--rule);padding:9px 10px;display:grid;gap:2px;min-width:0}
.at-stat small{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.at-stat b{font-size:17px;font-variant-numeric:tabular-nums}
.at-stat span{font-size:11px;color:var(--muted)}
.at-months{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.at-month{border:1px solid var(--rule);padding:8px 6px;display:grid;gap:2px;text-align:left;min-width:0}
.at-month small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-month b{font-size:13px;font-variant-numeric:tabular-nums}
.at-month:hover{border-color:#2a4246}.at-month[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.at-days{display:grid;gap:4px}
.at-day{border:1px solid var(--rule);background:#0d1719}
.at-dayrow{width:100%;display:grid;grid-template-columns:96px minmax(40px,1fr) 118px 78px 150px;gap:10px;align-items:center;padding:8px 12px;text-align:left;font-size:13px}
.at-dayrow:hover{background:#101d20}
.at-d{font-variant-numeric:tabular-nums;white-space:nowrap}.at-d small{margin-left:6px;color:var(--muted);font-size:11px}
.at-bar{position:relative;height:6px;background:var(--rule)}
.at-bar i{position:absolute;top:0;bottom:0}.at-bar i.pos{left:50%;background:var(--up)}.at-bar i.neg{right:50%;background:var(--down)}
.at-p,.at-r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.at-tags{display:flex;gap:4px;justify-content:flex-end}
.at-tag{font-size:9px;letter-spacing:.08em;padding:1px 5px;border:1px solid #2a4246;color:var(--muted)}
.at-tag.flow{border-color:#5b4a24;color:var(--gold)}
.at-entries{padding:0 12px 10px;display:grid;gap:2px}
.at-entry{display:grid;grid-template-columns:1fr auto 150px;gap:10px;font-size:12px;padding:4px 0;border-top:1px dashed var(--rule)}
.at-entry span:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.at-entry small{display:block;font-size:11px;color:var(--muted)}
.at-entry.snap{color:var(--muted)}.at-entry.flow>span:first-child{color:var(--gold)}
.at-entry.ev span:first-child{grid-column:1/-1}.at-entry.ev span:nth-child(n+2){display:none}
.at-entries>.at-note{padding-top:6px}
.at-hold{border:1px solid var(--rule)}.at-hold summary{cursor:pointer;padding:8px 12px;font-size:12px;color:var(--muted)}.at-hold>.at-note{padding:0 12px 10px}.at-hold .at-entry{grid-template-columns:1fr auto}
.at-more{justify-self:start;border:1px solid #2a4246;padding:5px 12px;font-size:12px;color:var(--muted)}
.at-more:hover{color:var(--ink)}
.at-empty{border:1px dashed #2a4246;padding:18px;display:grid;gap:8px;justify-items:start}
.at-empty h3{margin:0;font-size:18px}.at-empty .primary{margin-top:4px}
.at-wait{justify-items:stretch}.at-ghost{height:12px;background:#101b1e;animation:at-pulse 1.2s ease-in-out infinite alternate}
.at-ghost.big{height:48px;width:40%}.at-ghost.chart{height:150px}
@keyframes at-pulse{to{opacity:.45}}
@container (max-width:540px){
  .at-big{font-size:40px}.at-stats{grid-template-columns:repeat(2,1fr)}
  .at-dayrow{grid-template-columns:1fr auto auto;gap:4px 10px}.at-bar{display:none}.at-tags{grid-column:1/-1;justify-content:flex-start}.at-tags:empty{display:none}
  .at-entry{grid-template-columns:1fr auto}.at-entry:not(.snap) span:nth-child(3),.at-entry.snap span:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){.at-ghost{animation:none}}

/* ---------- the panel docks left or right; you stand in the middle of the space it leaves ---------- */
#app main[data-side=left]{grid-template-columns:var(--panel-w,clamp(560px,44vw,900px)) minmax(0,1fr)}
#app main[data-side=left] .workspace{order:-1}
#app main[data-side=left] .chat-panel{--dir:-1}
#app main[data-side=left] .panel-grip{left:auto;right:-11px}
#app main[data-side=left] .panel-grip::before{right:auto;left:18px}
#app .enter-world{transition:transform .75s cubic-bezier(.34,1.3,.64,1),box-shadow .2s}
@media(min-width:1001px){.host-head{cursor:grab;touch-action:none}.host-head button,.host-head #host-sprite{cursor:pointer}}
body.panel-moving,body.panel-moving *{cursor:grabbing!important;user-select:none}
.dock-zone{position:fixed;z-index:2;border:1px dashed #2a4246;background:#21ddde08;opacity:0;pointer-events:none;transition:opacity .2s,border-color .2s,background .2s}
.dock-zone.on{opacity:1}
.dock-zone.hot{border-color:var(--cyan);background:#21ddde14}
.dock-zone span{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:11px;letter-spacing:.1em;color:var(--cyan)}
@media(max-width:1000px){#move-panel{display:none}#clear-chat{margin-left:auto}}
@media(prefers-reduced-motion:reduce){#app .chat-panel,#app .enter-world,.dock-zone{transition:none!important}}

/* ---------- chat: day markers, your next step first, lessons as a card ---------- */
#app .daymark{display:flex;align-items:center;gap:10px;margin:6px 0 12px;font-size:10px;letter-spacing:.14em;color:#5d6f72}
#app .daymark::before,#app .daymark::after{content:"";flex:1;height:1px;background:var(--rule)}
#app .choices .next-step{border-color:var(--gold);color:var(--gold)}
#app .choices .next-step:hover{background:var(--gold);color:var(--black)}
.lessons-card{position:absolute;z-index:6;right:14px;top:118px;width:min(380px,calc(100% - 28px));max-height:min(430px,calc(100% - 170px));overflow:auto;background:#0a1113;border:1px solid var(--cyan);box-shadow:4px 4px 0 var(--pink);padding:12px;display:grid;gap:2px;align-content:start}
.lessons-card header{display:flex;gap:10px;align-items:baseline;margin-bottom:4px}
.lessons-card header span:nth-child(2){flex:1;font-size:11px;color:var(--muted)}
.lessons-close{font-size:16px;line-height:1;color:var(--muted)}
.lessons-close:hover{color:var(--ink)}
.lesson{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;text-align:left;padding:8px 4px;border-top:1px dashed var(--rule)}
.lesson i{width:16px;height:16px;border:1px solid #2a4246;font-style:normal;font-size:10px;display:grid;place-items:center;color:var(--black)}
.lesson.done i{background:var(--good);border-color:var(--good)}
.lesson span{display:grid;font-size:12px}
.lesson small{font-size:9px;letter-spacing:.1em;color:#ffb3d6;text-transform:uppercase}
.lesson em{font-style:normal;font-size:11px;color:var(--cyan)}
.lesson:hover{background:#101d20}
.hud-lessons[aria-expanded=true]{border-color:var(--cyan)!important;color:var(--cyan)!important}

/* ---------- settings: grouped rows that show where you stand ---------- */
#app .settings-view h3{margin:6px 0 4px}
.settings-group{display:grid;margin-top:14px}
.settings-group>.eyebrow{margin-bottom:2px}
#app .settings-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px}
#app .settings-row b{display:block;font-size:13px;font-weight:600}
#app .settings-row small{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5}
#app .settings-row .go{display:flex;gap:8px;align-items:center}
#app .settings-row:hover b{color:var(--cyan)}
.settings-row .state{font-style:normal;font-size:9px;letter-spacing:.1em;padding:2px 6px;border:1px solid #2a4246;color:var(--muted)}
.settings-row .state:empty{display:none}
.settings-row .state.ok{border-color:#2f6a70;color:var(--cyan)}
.settings-row .state.gold{border-color:#5b4a24;color:var(--gold)}
.settings-row .state.pub{border-color:#6a2a50;color:#ff8cc7}
.settings-signout{display:inline-block;margin-top:18px;border:1px solid var(--rule);padding:6px 12px;font-size:12px;color:var(--muted)}
.settings-signout:hover{border-color:var(--pink);color:var(--pink)}


/* Float the brand over the world; give Luna the page height back. */
#app > .masthead {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: max(28px, env(safe-area-inset-left));
  width: max-content;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#app:has(main[data-side=left]) > .masthead {
  left: auto;
  right: max(28px, env(safe-area-inset-right));
}
#app > main { padding-block: 12px; }
#app > footer { display: none; }
/* Local fictional-data reviews keep their label without reserving a page row. */
#app > footer:has(#demo-controls:not([hidden])) {
  display: flex;
  position: absolute;
  left: 12px;
  bottom: 8px;
  max-width: calc(100% - 24px);
  min-height: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--well);
}
#app > footer > span:last-child { display: none; }
@media (max-width: 740px) {
  #app > .masthead,
  #app:has(main[data-side=left]) > .masthead {
    top: max(10px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    right: auto;
  }
  #app > main { padding-top: max(46px, calc(env(safe-area-inset-top) + 38px)); }
  #app #world { inset: 0; }
}