/* The canvas of the XNA core (Meshware). A dense tool page in the night look of meshware.one. No inline styles: the content policy allows only files of the canvas. */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F}
:root{color-scheme:dark;--bg:#0a0b0f;--bg2:#10121a;--bg3:#161924;--ink:#ece7dc;--muted:#aaa598;--faint:#8c877c;--rule:rgba(236,231,220,.14);--accent:#f0b25a;
  --ok:#7fd6a4;--bad:#ff8f7d;--ask:#f0b25a;--note:#9db7e8;--serif:'EB Garamond',Georgia,serif;--sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
a{color:inherit}
.boot{padding:40px;color:var(--muted)}
.btn{background:var(--bg3);border:1px solid var(--rule);border-radius:6px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.go{background:var(--accent);color:#17130a;border-color:var(--accent);font-weight:600}
.btn.small{padding:3px 8px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{background:var(--bg);border:1px solid var(--rule);border-radius:6px;padding:6px 8px;width:100%}
textarea{min-height:64px;resize:vertical;font-size:13px}
textarea.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;min-height:140px}
label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:10px 0 4px}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;gap:8px;align-items:center}
.badge{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;border:1px solid var(--rule);color:var(--muted)}
.badge.pass{color:var(--ok);border-color:var(--ok)} .badge.fail,.badge.block{color:var(--bad);border-color:var(--bad)}
.badge.question,.badge.underspecified,.badge.blocked{color:var(--ask);border-color:var(--ask)} .badge.note{color:var(--note);border-color:var(--note)}
.msg{border:1px solid var(--rule);border-left:3px solid var(--note);background:var(--bg2);padding:8px 10px;border-radius:6px;margin:8px 0}
.msg.bad{border-left-color:var(--bad)} .msg.ok{border-left-color:var(--ok)} .msg.ask{border-left-color:var(--ask)}
#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;max-width:min(92vw,720px)}
#toast .msg{margin:6px 0;box-shadow:0 8px 30px rgba(0,0,0,.5)}

/* sign-in and home */
.center{min-height:100%;display:grid;place-items:center;padding:24px}
.card{background:var(--bg2);border:1px solid var(--rule);border-radius:10px;padding:26px;max-width:460px;width:100%}
.card h1{font-size:34px;line-height:1.05} .card p{color:var(--muted)}
.motto{font:400 15px var(--serif);color:var(--faint);letter-spacing:.04em;margin:4px 0 18px}
.home{max-width:1000px;margin:0 auto;padding:28px 20px}
.home h1{font-size:34px} .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:16px 0 28px}
.tile{background:var(--bg2);border:1px solid var(--rule);border-radius:10px;padding:16px;cursor:pointer;text-align:left}
.tile:hover{border-color:var(--accent)} .tile h3{font-size:22px;margin-bottom:6px}

/* shell */
.top{display:flex;align-items:center;gap:14px;padding:8px 14px;border-bottom:1px solid var(--rule);background:var(--bg2)}
.top .mark{font:500 14px var(--sans);letter-spacing:.03em;cursor:pointer;background:none;border:0;padding:0}
.top .mark i{font-style:normal;color:var(--faint)} .top .grow{flex:1} .top h2{font-size:20px}
.work{display:grid;grid-template-columns:230px minmax(0,1fr) 400px;height:calc(100vh - 45px)}
.side,.panel{overflow:auto;padding:12px;background:var(--bg2)} .side{border-right:1px solid var(--rule)} .panel{border-left:1px solid var(--rule)}
.board{overflow:auto;padding:12px 14px}
@media (max-width:1100px){.work{grid-template-columns:1fr;height:auto}.side,.panel{border:0;border-bottom:1px solid var(--rule)}}
.stream{display:block;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:6px 8px;cursor:pointer;margin:2px 0}
.stream:hover{border-color:var(--rule)} .stream.on{border-color:var(--accent);background:var(--bg3)} .stream .small{display:block}
.stream.child{margin-left:14px;width:calc(100% - 14px)}

/* the six bands */
.band{display:grid;grid-template-columns:92px minmax(0,1fr);border-top:1px solid var(--rule);min-height:74px}
.band:first-child{border-top:0}
.band>h3{font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:12px 6px 0 0}
.cards{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
.node{background:var(--bg2);border:1px solid var(--rule);border-radius:8px;padding:8px 10px;width:210px;text-align:left;cursor:pointer;position:relative}
.node:hover{border-color:var(--faint)} .node.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .node.kin{border-color:var(--note)}
.node.goal{width:190px;border-style:dashed} .node b{display:block;font:500 14px/1.25 var(--sans)}
.node .id{font-size:11px;color:var(--faint)} .node .chips{margin-top:5px;display:flex;gap:4px;flex-wrap:wrap}
.chip{font-size:10.5px;border:1px solid var(--rule);border-radius:999px;padding:0 6px;color:var(--muted)}
.chip.new{color:var(--ok);border-color:var(--ok)} .chip.changed{color:var(--ask);border-color:var(--ask)} .chip.block{color:var(--bad);border-color:var(--bad)}
.chip.question{color:var(--ask);border-color:var(--ask)} .chip.primary{color:var(--accent);border-color:var(--accent)}
.empty{color:var(--faint);padding:14px 0}

/* panel */
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin:-4px -4px 10px} .tab{background:none;border:0;border-bottom:2px solid transparent;padding:6px 8px;cursor:pointer;color:var(--muted)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.panel h3{font-size:22px;line-height:1.15;margin:4px 0 2px} .panel h4{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:16px 0 6px}
.field{margin:0 0 6px} .field .row{margin-top:4px}
.list{list-style:none;margin:0;padding:0} .list li{padding:6px 0;border-bottom:1px solid var(--rule)} .list li:last-child{border-bottom:0}
.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);cursor:pointer;text-align:left}
.trace{margin:6px 0 0 0;padding-left:18px;color:var(--muted);font-size:12.5px} .trace li.now{color:var(--ink);font-weight:600}
.states{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0} .state{border:1px solid var(--rule);border-radius:6px;padding:2px 8px;font-size:12px;color:var(--muted)}
.state.now{border-color:var(--accent);color:var(--ink)} .state.bad{border-color:var(--bad);color:var(--bad)}
table{border-collapse:collapse;width:100%;font-size:12.5px} th,td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--rule);vertical-align:top} th{color:var(--faint);font-weight:500}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;overflow-wrap:anywhere}
.key{font-family:ui-monospace,monospace;background:var(--bg);border:1px dashed var(--accent);padding:8px;border-radius:6px;overflow-wrap:anywhere;user-select:all}
.steps{counter-reset:s;list-style:none;padding:0;margin:0} .steps li{counter-increment:s;padding:10px 0 10px 34px;border-bottom:1px solid var(--rule);position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:10px;width:24px;height:24px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;font-size:12px;color:var(--muted)}
.steps li.done::before{content:"✓";color:var(--ok);border-color:var(--ok)}
.steps p{margin:0 0 6px}
.row label{margin:0;text-transform:none;letter-spacing:0;font-size:12px}
