/* MIRROR-SCALE console. Identity carried over from the owner's TradeMirror console: celadon paper, hairline rules
   instead of cards, Bricolage Grotesque for status sentences and numbers, Figtree for reading text.
   Gold (--aurum) = mirror axis, current nav item, focus ring. Indigo (--agent) = an interpreter run is RUNNING. Nothing else. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.5 var(--body);min-height:100vh;
  display:grid;grid-template:"strip strip" auto "nav main" 1fr / var(--rail) minmax(0,1fr)}
h1,h2,h3,p,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}
a{color:inherit;text-decoration-color:var(--aurum);text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--aurum);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;z-index:50;top:.5rem;left:.5rem;background:var(--surface);padding:.5rem .75rem}
.fine{font-size:.8125rem;color:var(--muted)}
.count{font:500 .8125rem var(--body);color:var(--muted);margin-left:.25rem}

/* strip: line 1 says what the platform can do; line 2 says what you are looking at */
.strip{grid-area:strip;position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.strip-top,.strip-scope{display:flex;align-items:center;gap:1rem;padding:.625rem 1.5rem}
.strip-scope{border-top:1px solid var(--line);padding-block:.5rem;flex-wrap:wrap}
.brand{font:700 1.0625rem/1 var(--display);letter-spacing:.01em;text-decoration:none}
.phase{font:500 .9375rem/1.3 var(--display);margin-right:auto}
.strip-fresh{white-space:nowrap}
.scope-label{font-size:.8125rem;color:var(--muted)}
.scope-picker{position:relative;flex:0 1 22rem;min-width:12rem}
.scope-input,.scope-select,.ledger-find{width:100%;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:.4375rem .625rem;min-height:2.25rem}
.scope-select{width:auto}
.scope-input::placeholder{color:var(--text);opacity:1}
.scope-list{position:absolute;inset:calc(100% + .25rem) 0 auto 0;z-index:30;max-height:20rem;overflow:auto;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow)}
.scope-option{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .625rem;cursor:pointer;border-bottom:1px solid var(--line)}
.scope-option:last-child{border-bottom:0}.scope-option[aria-selected="true"],.scope-option:hover{background:var(--raised)}
.scope-option small{color:var(--muted)}

.agent-banner{display:flex;align-items:center;gap:.5rem;color:var(--agent);background:var(--agent-soft);padding:.25rem .625rem;border-radius:999px;font-size:.875rem}
.pulse{width:.5rem;height:.5rem;border-radius:50%;background:var(--agent);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

.nav{grid-area:nav;position:sticky;top:6.5rem;align-self:start;display:flex;flex-direction:column;padding:1.25rem .75rem;gap:.125rem}
.nav-item{display:block;padding:.5rem .75rem;border-left:2px solid transparent;text-decoration:none;color:var(--muted);
  font:500 .9375rem var(--body);background:none;border-top:0;border-right:0;border-bottom:0;text-align:left;cursor:pointer}
.nav-item:hover{color:var(--text)}
.nav-item[aria-current="page"]{color:var(--text);border-left-color:var(--aurum)}
.nav-more-toggle{display:none}

main{grid-area:main;padding:2rem clamp(1rem,4vw,3.5rem) 4rem;max-width:78rem;min-width:0}
.hero{padding-bottom:1.75rem;border-bottom:1px solid var(--line);margin-bottom:1.75rem}
.hero-line{font:600 clamp(1.625rem,1.1rem + 1.9vw,2.5rem)/1.12 var(--display);letter-spacing:-.015em;max-width:26ch}
.hero-sub{margin-top:.625rem;color:var(--muted);max-width:68ch}
.page-head{padding-bottom:1.25rem;border-bottom:1px solid var(--line);margin-bottom:1.25rem}
.page-head h1{font:600 1.75rem/1.15 var(--display);letter-spacing:-.01em}
.page-sub,.section-sub{color:var(--muted);max-width:72ch;margin-top:.375rem}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-top:2.25rem}
.section-title{font:600 1.125rem/1.2 var(--display);margin-top:2.25rem}.section-head .section-title{margin-top:0}
.ledger-find{width:16rem}
.notice{padding:.625rem .875rem;margin-bottom:1.25rem;background:var(--warn-soft);color:var(--warn);border-radius:var(--radius)}
.empty-line{color:var(--muted);padding:1rem 0;border-top:1px solid var(--line);margin-top:.75rem;max-width:72ch}

/* attention + ledger: hairline rows, never cards */
.attention-list{margin-top:.5rem;border-top:1px solid var(--line)}
.attention-item{display:flex;justify-content:space-between;align-items:start;gap:1rem;padding:.625rem 0;border-bottom:1px solid var(--line)}
.ledger{margin-top:.75rem;border-top:1px solid var(--line-strong)}
.ledger-row{display:grid;grid-template-columns:minmax(12rem,1.1fr) minmax(0,2fr) minmax(10rem,1fr) auto;gap:.25rem 1.5rem;
  align-items:start;padding:1rem 0;border-bottom:1px solid var(--line)}
.ledger-name{font:600 1.0625rem/1.25 var(--display)}
.tag{display:inline-block;font:500 .75rem/1 var(--body);color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:.1875rem .5rem;margin-left:.375rem;vertical-align:.1em}
.tag--sim{border-style:dashed;color:var(--text)}
.ledger-state{max-width:60ch}.ledger-state .fine{display:block;margin-top:.125rem}
.ledger-acct{font-variant-numeric:tabular-nums}
.btn{font:500 .875rem var(--body);color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:.4375rem .75rem;min-height:2.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;flex:none}
.btn:hover{border-color:var(--text)}.btn--quiet{background:none;border-color:transparent;color:var(--muted)}
.btn--primary{background:var(--text);color:var(--bg);border-color:var(--text)}

/* capital: accounts side by side, no total */
.capital-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));margin-top:.75rem;border-top:1px solid var(--line-strong)}
.acct{padding:1rem 1.5rem 1rem 0;border-bottom:1px solid var(--line)}
.acct + .acct{padding-left:1.5rem;border-left:1px solid var(--line)}
.acct-title{font:600 1rem/1.25 var(--display)}
.acct-kind{display:block;font:500 .8125rem var(--body);color:var(--muted)}
.acct-kind--sim{color:var(--text);text-decoration:underline dashed var(--line-strong);text-underline-offset:.25em}
.kv-grid{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.375rem 1.25rem;margin-top:.75rem}
.kv-grid dt{color:var(--muted)}.kv-grid dd{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.num{font:500 1rem var(--display)}

/* the mirror row: the message as written | gold axis | what became of it */
.feed-list{border-top:1px solid var(--line-strong)}
.mirror{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.mirror-scope{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;margin-bottom:.625rem;font-size:.8125rem;color:var(--muted)}
.mirror-scope strong{color:var(--text);font-weight:600}
.mirror-body{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.15fr);gap:0 1.5rem}
.mirror-axis{background:var(--aurum)}
.msg-text{white-space:pre-wrap;overflow-wrap:anywhere;max-width:62ch}
.outcome{font:600 1.0625rem/1.3 var(--display);max-width:48ch}
.chain{margin-top:.625rem;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.25rem 1rem;font-size:.9375rem}
.chain dt{color:var(--muted)}
.outcome.is-running{color:var(--agent)}
details.tech{margin-top:.625rem}details.tech summary{cursor:pointer;color:var(--muted);font-size:.875rem}
.mono{font:400 .8125rem/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--inset);padding:.625rem;border-radius:var(--radius);margin-top:.375rem}
.feed-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1rem}

/* set-up */
.add-copier{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1rem;align-items:center;margin:1rem 0 1.5rem}
.add-copier label{grid-column:1/-1;font:600 1rem var(--display)}.add-copier input{font:inherit;padding:.5rem .625rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:inherit;min-height:2.25rem}
.add-copier .fine{grid-column:1/-1}
/* set-up steps: a real sequence, so it is numbered */
.steps{counter-reset:step;border-top:1px solid var(--line-strong);margin-bottom:1rem}
.step{counter-increment:step;display:grid;grid-template-columns:2.5rem minmax(0,1fr);padding:1rem 0;border-bottom:1px solid var(--line)}
.step::before{content:counter(step);font:600 1.25rem/1.2 var(--display);color:var(--muted)}
.step-title{font:600 1rem/1.3 var(--display)}.step-body{color:var(--muted);max-width:68ch;margin-top:.125rem}
.step-state{display:block;margin-top:.375rem;color:var(--text)}

.page-footer{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}

/* sign-in */
.gate{display:grid;place-items:center;grid-template:none}
.gate-box{width:min(26rem,100% - 2rem);padding:2rem 0}
.gate-title{font:600 1.75rem/1.15 var(--display);margin-bottom:1rem}.gate-box p{margin-top:.75rem;color:var(--muted)}
.gate-form{display:grid;gap:.5rem;margin-top:1rem}.gate-form input{font:inherit;padding:.625rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:inherit}
.gate-error{color:var(--bad)}

@media (max-width:1280px){:root{--rail:168px}.ledger-row{grid-template-columns:minmax(10rem,1fr) minmax(0,2fr) auto}.ledger-acct{grid-column:2}}
@media (max-width:1000px){
  body{grid-template:"strip" auto "main" 1fr / minmax(0,1fr);padding-bottom:calc(3.75rem + env(safe-area-inset-bottom))}
  .nav{position:fixed;inset:auto 0 0 0;top:auto;z-index:25;flex-direction:row;justify-content:space-around;padding:.25rem .5rem calc(.25rem + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--line)}
  .nav-item{border-left:0;border-top:2px solid transparent;text-align:center;flex:1;padding:.75rem .25rem}
  .nav-item[aria-current="page"]{border-top-color:var(--aurum)}
  .nav-item--more{display:none}.nav-more-toggle{display:block}
  .nav.is-open{flex-wrap:wrap}.nav.is-open .nav-item--more{display:block;flex-basis:33%}
  .strip-top{flex-wrap:wrap;gap:.375rem 1rem;padding-inline:1rem}.strip-scope{padding-inline:1rem}
  .btn,.nav-item,.scope-input,.scope-select,.scope-option,.ledger-find,.add-copier input,details.tech summary{min-height:2.75rem}
  .phase{flex-basis:100%;order:3;margin:0}.acct + .acct{border-left:0;padding-left:0}
}
@media (max-width:820px){
  .mirror-body{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .mirror-axis{display:none}.mirror-result{border-left:2px solid var(--aurum);padding-left:.875rem} /* gold stays the mirror, even stacked */
  .ledger-row{grid-template-columns:minmax(0,1fr)}.ledger-acct{grid-column:auto}
}
@media (max-width:700px){.attention-item{flex-direction:column}main{padding-top:1.25rem}.scope-picker{flex-basis:100%}.ledger-find{width:100%}.section-head{flex-direction:column;align-items:stretch}}
@media (pointer:coarse){.btn,.nav-item,.scope-input,.scope-select,.scope-option,details.tech summary{min-height:2.75rem}.scope-option{align-items:center}}

/* Functional onboarding and agent cards; retain existing typography and colors. */
.wizard { max-width: 52rem; margin-block: 1rem 2rem; }
.wizard .gate-form { margin-block: 1.5rem; padding-block: 1rem; }
.wizard textarea { min-height: 6rem; width: 100%; font: inherit; padding: .7rem; }
.wizard input,.wizard select { min-height: 44px; max-width: 100%; width: 100%; }
.wizard button,.wizard-item { min-height: 44px; white-space: normal; text-align: left; }
.wizard-item { display: block; margin-block: .5rem; width: 100%; }
.wizard-card { padding: 1rem; margin-block: 1rem; border: 1px solid var(--line, #7775); border-radius: .6rem; overflow-wrap: anywhere; }
.wizard details { margin-block: 1rem; }
.wizard summary { min-height: 44px; cursor: pointer; }
[hidden] { display: none !important; }