/* App and content pages, in the ARCHΣ language (arch.css loaded first): light grey ground, serif titles, mono text,
   Klein blue for state, dashed frames instead of shadows. Class names are the ones js/app.js renders. */
.app-root{min-height:100vh;padding:140px 0 100px}
.av-wrap{max-width:1335px;margin:0 auto;padding:0 30px}
.app-tabs{display:flex;flex-wrap:wrap;gap:0;margin-bottom:40px;border:1px dashed var(--dash);width:max-content;max-width:100%}
.app-tabs a{height:42px;padding:0 16px;display:inline-flex;align-items:center;font:500 13px/1 var(--mono);text-transform:uppercase;color:rgba(0,0,0,.55);transition:color .25s,background-color .25s}
.app-tabs a:hover{color:#000}
.app-tabs a.on{background:#000;color:#fff}
.app-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.app-h h1{font:400 75px/70px var(--serif);letter-spacing:-1px;margin:0}
.app-h p{margin:16px 0 0;font:400 16px/26px var(--mono);color:var(--mut);max-width:720px}
.app-h .acts{display:flex;gap:12px;flex-wrap:wrap}

/* buttons used by the app */
.av-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 18px;border:0;font:600 14px/1 var(--mono);cursor:pointer;white-space:nowrap;transition:background-color .3s var(--e),color .3s var(--e)}
.av-btn-primary{background:#000;color:#fff}.av-btn-primary:hover{background:var(--blue)}
.av-btn-secondary{background:transparent;color:#000;outline:1px dashed var(--dash);outline-offset:-1px}.av-btn-secondary:hover{color:var(--blue)}
.av-btn-ghost{background:transparent;color:#000;outline:1px dashed rgba(0,0,0,.25);outline-offset:-1px}.av-btn-ghost:hover{outline-color:var(--blue);color:var(--blue)}
.av-btn-sm{height:36px;padding:0 12px;font-size:12px}
.av-btn[disabled]{opacity:.4;pointer-events:none}

/* cards are dashed frames */
.card{position:relative;background:transparent;padding:26px;border:1px dashed var(--dash)}
.card h3{font:400 30px/32px var(--serif);margin:0 0 6px}
.card .sub{font:400 13px/20px var(--mono);color:var(--mut);margin:0 0 18px}
.grid{display:grid;gap:20px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 2fr}
.kpi small{display:block;font:500 12px/16px var(--mono);text-transform:uppercase;color:var(--mut)}
.kpi strong{display:block;margin-top:10px;font:400 46px/44px var(--serif);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:8px;font:400 13px/18px var(--mono);color:var(--mut)}
.pos{color:#0A8F4E}.neg{color:#D3261B}.mut{color:rgba(0,0,0,.5)}

.tbl{width:100%;border-collapse:collapse;font:400 14px/20px var(--mono)}
.tbl th{text-align:left;font:500 11px/16px var(--mono);text-transform:uppercase;color:var(--mut);padding:0 12px 12px;white-space:nowrap}
.tbl td{padding:15px 12px;border-top:1px dashed rgba(7,0,255,.25);font-variant-numeric:tabular-nums;vertical-align:middle}
.tbl tr.lnk{cursor:pointer;transition:background-color .2s}
.tbl tr.lnk:hover td{background:rgba(7,0,255,.04)}
.tbl .r{text-align:right}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who b{font:400 22px/24px var(--serif)}
.who small{display:block;font:400 12px/16px var(--mono);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.av{width:36px;height:36px;display:grid;place-items:center;flex:none;color:#fff;background:var(--blue)!important}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;font:500 11px/1 var(--mono);text-transform:uppercase;white-space:nowrap}
.chip.ok{background:var(--blue);color:#fff}.chip.bad{background:#000;color:#fff}.chip.wait{outline:1px dashed rgba(0,0,0,.3);outline-offset:-1px;color:var(--mut)}.chip.blue{outline:1px dashed var(--dash);outline-offset:-1px;color:var(--blue)}

.feed .it{display:grid;grid-template-columns:10px 1fr auto;gap:14px;padding:15px 0;border-top:1px dashed rgba(7,0,255,.25);align-items:start}
.feed .it:first-child{border-top:0}
.feed .dot{width:7px;height:7px;margin-top:7px}
.feed strong{font:500 13px/20px var(--mono);text-transform:uppercase}
.feed p{margin:4px 0 0;font:400 17px/24px var(--serif);color:rgba(0,0,0,.85)}
.feed time{font:400 12px/20px var(--mono);color:var(--mut);white-space:nowrap}
.feed a,.app-root a.u{color:var(--blue)}

.form{display:grid;gap:18px}
.field label{display:block;font:500 12px/16px var(--mono);text-transform:uppercase;margin-bottom:8px}
.field .hint{font:400 12px/18px var(--mono);color:var(--mut);margin-top:6px}
.inp,.ta{width:100%;box-sizing:border-box;border:1px dashed var(--dash);outline:0;background:#fff;padding:0 14px;height:46px;font:400 15px/1 var(--mono);color:#000;border-radius:0;transition:border-color .2s}
.ta{height:auto;min-height:150px;padding:12px 14px;line-height:1.55;resize:vertical}
.inp:focus,.ta:focus{border:1px solid var(--blue)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.assets{display:flex;flex-wrap:wrap;gap:8px}
.asset{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;outline:1px dashed var(--dash);outline-offset:-1px;font:500 13px/1 var(--mono);cursor:pointer;user-select:none}
.asset.on{background:var(--blue);color:#fff;outline-color:var(--blue)}
.asset small{opacity:.6;text-transform:uppercase;font-size:10px}
.rng{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}
.rng input{width:100%;accent-color:var(--blue)}
.rng b{font:400 26px/1 var(--serif);min-width:56px;text-align:right}
.note{font:400 12px/19px var(--mono);color:var(--mut)}
.msg{font:400 13px/20px var(--mono);padding:12px 14px;outline:1px dashed var(--dash);outline-offset:-1px}
.msg.err{outline-color:#D3261B;color:#D3261B}
.msg.ok{background:var(--blue);color:#fff;outline:0}.msg.ok a.u{color:#fff;text-decoration:underline}
.steps{display:grid;gap:10px;margin-top:6px}
.steps div{display:flex;align-items:center;gap:10px;font:400 13px/1.4 var(--mono);color:var(--mut)}
.steps div.on{color:#000}.steps div.done{color:var(--blue)}
.steps i{width:12px;height:12px;outline:1px solid currentColor;flex:none}
.steps div.done i{background:currentColor}
.strat{font:400 22px/30px var(--serif);white-space:pre-wrap;margin:0}
.dl{display:grid;grid-template-columns:1fr auto;gap:12px 16px;font:400 13px/18px var(--mono);margin:0}
.dl dt{color:var(--mut);text-transform:uppercase;font-size:11px}.dl dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:30px 0;text-align:center;font:400 20px/26px var(--serif);color:var(--mut)}
.chart{width:100%;height:220px;display:block}

/* the floor: a blue room of towers */
.floor{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:28px;height:440px;padding:0 24px 70px;overflow:hidden;background:var(--blue)}
.floor::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px);background-size:7px 7px;pointer-events:none}
.tower{position:relative;width:90px;background:rgba(255,255,255,.14);outline:1px dashed rgba(255,255,255,.6);outline-offset:-1px;transition:height 1s var(--e)}
.tower.up{background:rgba(255,255,255,.85)}
.tower.down{background:rgba(0,0,0,.55)}
.tower.dead{background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 4px,transparent 4px 9px);opacity:.7}
.tower .fuel{position:absolute;left:8px;right:8px;bottom:8px;height:4px;background:rgba(255,255,255,.25);overflow:hidden}
.tower .fuel i{display:block;height:100%;background:#fff}
.tower.up .fuel{background:rgba(7,0,255,.2)}.tower.up .fuel i{background:var(--blue)}
.tower .lbl{position:absolute;left:50%;bottom:-52px;transform:translateX(-50%);text-align:center;color:#fff;font:400 20px/22px var(--serif);white-space:nowrap;display:block;text-transform:none}
.tower .lbl::before{display:none}
.tower .lbl small{display:block;font:400 11px/16px var(--mono);color:rgba(255,255,255,.75)}
.tower .ping{position:absolute;left:50%;top:-12px;width:8px;height:8px;margin-left:-4px;background:#fff;opacity:0}
.tower .ping.go{animation:ping 1.6s ease-out}
@keyframes ping{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(3)}}

/* content pages */
.doc-grid{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start}
.doc-toc{position:sticky;top:30px;display:grid;border:1px dashed var(--dash)}
.doc-toc a{padding:10px 14px;font:500 12px/16px var(--mono);text-transform:uppercase;color:var(--mut);border-top:1px dashed rgba(7,0,255,.2)}
.doc-toc a:first-child{border-top:0}
.doc-toc a:hover{color:var(--blue)}
.doc-body{display:grid;gap:20px;min-width:0}
.doc-body section{scroll-margin-top:30px}
.doc-body h2{font:400 44px/44px var(--serif);letter-spacing:-.5px;margin:0 0 16px}
.doc-body p,.doc-body li{font:400 15px/25px var(--mono);color:rgba(0,0,0,.78)}
.doc-body p{margin:0 0 12px}
.doc-body ul{margin:0 0 12px;padding-left:18px;display:grid;gap:6px;list-style:square}
.doc-body b{color:#000;font-weight:600}
.doc-body code,.app-root code{font:400 13px/1.5 var(--mono);background:rgba(7,0,255,.07);padding:2px 6px;word-break:break-all}
.doc-body .dl dd{text-align:left;color:rgba(0,0,0,.78)}
.card,.doc-body section{min-width:0}
.card:has(> .tbl),.doc-body section:has(.tbl){overflow-x:auto}

/* app/content pages: the nav sits in the flow */
.page-nav{position:absolute}

@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g21,.g12{grid-template-columns:1fr}.tbl .hide-sm{display:none}.doc-grid{grid-template-columns:1fr}.doc-toc{position:static}}
@media (max-width:640px){.app-root{padding-top:110px}.av-wrap{padding:0 15px}.app-h h1{font-size:44px;line-height:44px}.g4,.g2{grid-template-columns:1fr}.tbl .hide-xs{display:none}.tbl td,.tbl th{padding-left:8px;padding-right:8px}.floor{gap:12px;padding:0 10px 70px}.tower{width:54px}.tower .lbl{font-size:15px}.doc-body .dl{grid-template-columns:1fr}.kpi strong{font-size:38px}}