/* ══════════════════════════════════════════════════════════════════════
   skin: mythic — the Astral Gate treatment
   Plates instead of panels: hairline gold rules, inscribed headings, diamond
   marks where the checkboxes were, and dependency rows that read as lines in
   a ledger rather than tiles.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#07060e; --panel:rgba(19,15,32,.90);
  --ink:#f2e9d7; --dim:#bcab8c; --faint:#7d7160;
  --rule:rgba(224,196,132,.26); --rule2:rgba(224,196,132,.11);
  --app:#d9c08a; --vm:#8fd5c0; --ext:#e0c484; --edge:#b98cff;
  --svc:#9fd6a0; --bad:#e2735f;
  --gold:#e0c484; --gold-dim:#9c8759;
  --field:#171224;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'EB Garamond',Georgia,serif;
  --display:'Cinzel',Georgia,serif;
}
body{background:var(--bg)}

/* ── masthead: an inscription ──────────────────────────────────────── */
header{background:linear-gradient(180deg,rgba(7,6,14,.95) 35%,rgba(7,6,14,0));padding:16px 20px 24px}
h1{
  font-family:var(--display);font-weight:600;letter-spacing:.28em;font-size:17px;
  color:var(--gold);text-shadow:0 0 18px rgba(224,196,132,.25);
}
h1 b{color:var(--gold-dim);font-weight:500}
h1::after{
  content:"";display:block;margin-top:7px;height:1px;width:210px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.meta{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.08em}
.meta b{color:var(--dim);font-weight:400}

/* ── plates: square, double-ruled, with corner ornaments ───────────── */
#side,#detail{
  border-radius:2px;border:1px solid var(--rule);padding:16px;
  background:
    linear-gradient(180deg,rgba(26,20,44,.94),rgba(11,9,20,.94));
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.55);
}
#side::before,#detail::before{
  content:"";position:absolute;inset:6px;border:1px solid var(--rule2);
  border-radius:1px;pointer-events:none;
}
/* gold corner brackets, the gate's frame motif */
#side::after,#detail::after{
  content:"";position:absolute;inset:6px;pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) left top/12px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left top/1px 12px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/12px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/1px 12px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/12px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/1px 12px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/12px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/1px 12px no-repeat;
  opacity:.55;
}
#detail .kind{
  font-family:var(--mono);color:var(--faint);letter-spacing:.26em;font-size:9.5px;
}
#detail h3{
  font-family:var(--display);font-weight:600;letter-spacing:.04em;color:var(--gold);
  font-size:21px;margin-top:6px;
}
#detail h3+.sub{color:var(--dim);font-style:italic;font-family:var(--sans);font-size:13px}
#detail dl{
  border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2);
  padding:10px 0;margin-top:14px;font-family:var(--mono);font-size:11px;
}
#detail h4{
  font-family:var(--display);color:var(--gold);letter-spacing:.22em;font-weight:600;
  border-top:0;display:flex;align-items:center;gap:10px;font-size:9.5px;
}
#detail h4::before{content:"✦";color:var(--gold-dim);font-size:8px}
#detail h4::after{content:"";flex:1;height:1px;background:var(--rule2)}

/* ── dependency rows: ledger lines, not cards ──────────────────────── */
.dep{
  border-radius:0;border:0;border-bottom:1px solid var(--rule2);
  background:none;padding:8px 4px 8px 2px;margin-bottom:0;
}
.dep:hover{background:rgba(224,196,132,.07)}
.dep .r1{font-family:var(--sans);font-size:14px;letter-spacing:.01em;gap:9px}
.dep .r1 .t{
  font-family:var(--display);color:var(--gold-dim);font-size:8.5px;letter-spacing:.18em;
}
.dep .r2{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.02em}
.dep .r1 .sw{width:6px;height:6px;border-radius:50%;box-shadow:0 0 0 1px rgba(224,196,132,.35)}

/* ── filters: diamonds struck through when off ─────────────────────── */
.group h2{font-family:var(--display);color:var(--gold);letter-spacing:.24em;font-size:9.5px}
.chk{font-family:var(--sans);font-size:13.5px;color:var(--dim);padding:2px 0;gap:10px}
.chk:hover{color:var(--ink)}
.chk input{
  appearance:none;width:11px;height:11px;flex:none;cursor:pointer;
  border:1px solid var(--gold-dim);transform:rotate(45deg);background:transparent;
  transition:background .16s ease, box-shadow .16s ease;
}
.chk input:checked{background:var(--gold);box-shadow:0 0 8px rgba(224,196,132,.6)}
.chk .n{font-family:var(--mono);font-size:10px;color:var(--faint)}
#q{
  border-radius:0;border:0;border-bottom:1px solid var(--rule);background:transparent;
  font-family:var(--mono);font-size:11.5px;padding:7px 2px;letter-spacing:.04em;
}
#q:focus{border-bottom-color:var(--gold);box-shadow:none}

/* the bootstrap namespaces sit below a rule, as an appendix */
.grp{margin-top:10px;border-top:1px solid var(--rule2);padding-top:8px}
.grphead{font-family:var(--display);font-size:10px;letter-spacing:.18em;color:var(--gold)}
.grphead .sw-boot{
  width:7px;height:7px;flex:none;transform:rotate(45deg);
  border:1px solid var(--gold);background:transparent;
}
.grptoggle{
  margin:3px 0 0 21px;border:0;background:none;color:var(--faint);cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
}
.grptoggle::before{content:"✧ "}
.grptoggle[aria-expanded="true"]::before{content:"✦ "}
.grptoggle:hover{color:var(--gold)}
.grpbody{margin-left:10px;border-left:1px solid var(--rule2);padding-left:10px}
.chk.sub{font-size:12px}

/* ── map furniture ─────────────────────────────────────────────────── */
.node .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
.node.star .tag{
  font-family:var(--display);font-weight:600;letter-spacing:.24em;
  color:var(--gold);font-size:12.5px;
}
.node.star .dot{
  box-shadow:0 0 0 1px rgba(224,196,132,.6) inset, 0 0 36px hsl(var(--h) 65% 58% / .6);
}
.node.peer .ico{color:hsl(var(--h) 48% 72%)}
.node.sel .dot,.node.sel .ico{filter:drop-shadow(0 0 10px var(--gold))}

/* ── footer ────────────────────────────────────────────────────────── */
footer{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
footer .k{color:var(--gold-dim)}
#reset{
  border-radius:0;border:1px solid var(--rule);color:var(--dim);
  letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;padding:4px 12px;
}
#reset:hover{border-color:var(--gold);color:var(--gold)}
.skins a{letter-spacing:.14em}
.skins a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

/* ── variants: struck marks in the ledger ──────────────────────────── */
.var{border-bottom:1px solid var(--rule2);padding:8px 2px}
.var .v1{font-family:var(--sans);font-size:13.5px;color:var(--ink)}
.var .v1 .t{font-family:var(--display);color:var(--gold-dim);font-size:8.5px;letter-spacing:.18em}
.var .v2,.var .v3{font-family:var(--mono);font-size:9.5px;letter-spacing:.02em}
.vico{color:var(--gold)}
.node.mv .dot::after{border-color:rgba(224,196,132,.42)}

/* ── the index drawer: a plate, ruled like the others ──────────────── */
#ixToggle{
  border-radius:2px;border:1px solid var(--rule);background:var(--panel);
  font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-size:9.5px;
}
.ix-title{font-family:var(--display);letter-spacing:.26em;color:var(--gold)}
.ix-caret{border-bottom-color:var(--gold)}
#ixBody{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.55)}
.ix-tools{border-bottom:1px solid var(--rule)}
.ix-tab{
  border-radius:0;font-family:var(--display);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;border-bottom:1px solid transparent;
}
.ix-tab.on{background:none;border:0;border-bottom:1px solid var(--gold);color:var(--gold)}
#ixQ{border-radius:0;background:transparent;border:0;border-bottom:1px solid var(--rule)}
/* the select keeps an opaque ground: a transparent one makes Chrome draw the
   option list white on grey */
.ix-f select{border-radius:0;border:0;border-bottom:1px solid var(--rule)}
.ix-f select,.ix-f select option{background:var(--field);color:var(--ink)}
#ixQ:focus,.ix-f select:focus{border-bottom-color:var(--gold)}
.ix-f > span{font-family:var(--display);font-size:9px;letter-spacing:.18em;text-transform:uppercase}
#ixFocus,#ixClear{
  border-radius:0;border:1px solid var(--rule);background:none;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
}
#ixFocus:hover,#ixClear:hover{border-color:var(--gold);color:var(--gold)}
#ixTable th{
  font-family:var(--display);letter-spacing:.2em;color:var(--gold-dim);
  border-bottom:1px solid var(--rule);
}
#ixTable td{border-bottom:1px solid var(--rule2)}
#ixTable tr[data-go]:hover td{background:rgba(224,196,132,.07)}
#ixTable tr.on td{background:rgba(224,196,132,.11)}