/* Atlas Kit: dark navy, thin rules, serif display type, square corners. */
:root {
  --bg: #060913; --panel: #0b1122; --panel2: #0f172d; --inset: #070c19; --hover: #141d38;
  --line: #1e2744; --line2: #2c3860;
  --text: #dde5f5; --muted: #7d8bb0; --dim: #56627f;
  --accent: #a9c4ff; --accent-dim: #6f86c4; --gold: #e2b85e; --gold-dim: #a8873f;
  --up: #45d483; --down: #ef4f58; --blue: #6fa8ff;
  --head: #eef2fb; --bright: #ffffff; --header-bg: #060913f0; --overlay: #070b16e0;
  --stage-bg: radial-gradient(ellipse at 50% 40%, #0c1430 0%, #060913 70%);
  --edge: #1d2644; --edge-on: var(--accent); --node-off: #0a1022; --sublabel: #c8d2ea; --banner-bg: #120f06;
  --glass: #090d18e6; --frame-in: #02040a; --frame-out: #a4bfee28;
  --display: "Marcellus", Georgia, "Times New Roman", serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--body); font-size: 14px; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--bright); }
button, select, input {
  font: inherit; font-size: 13px; color: var(--text); background: var(--inset);
  border: 1px solid var(--line2); padding: 6px 10px;
}
button { cursor: pointer; background: transparent; }
button:hover { border-color: var(--accent-dim); background: var(--hover); }
button.primary { border-color: var(--gold-dim); color: var(--gold); }
button.primary:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
/* gray like any button, gold under the pointer: color is kept for the one action that matters */
button.lift:hover { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
button.ghost { border-color: transparent; }
button.small { padding: 2px 8px; font-size: 12px; }
a.button { display: inline-block; border: 1px solid var(--line2); color: var(--text); }
a.button.small { padding: 2px 8px; font-size: 12px; }
a.button.primary { border-color: var(--gold-dim); color: var(--gold); }
a.button.primary:hover { border-color: var(--gold); }
#who { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.who-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(340px, calc(100vw - 24px)); padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 0 0 1px var(--frame-in); border-radius: var(--r); }
.who-pop[hidden] { display: none; }
.who-pop .fld input { width: 100%; }
.pf-first { border: 1px solid var(--gold); color: var(--head); padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.who .caret { font-size: 9px; opacity: .7; }
.who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.who img { width: 20px; height: 20px; border-radius: 50%; }
input[type=number] { width: 7em; }
input:focus, select:focus { outline: none; border-color: var(--accent-dim); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.up { color: var(--up); } .down { color: var(--down); }
.caps { font-size: 12px; color: var(--muted); }

header.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 9px 18px; background: var(--header-bg); border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--head); display: flex; align-items: center; gap: 10px; }
.brand { user-select: none; -webkit-user-select: none; text-decoration: none; }
.brand:hover { color: var(--head); }
.mark { width: 28px; height: 28px; color: var(--gold); flex: none; }
.spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line2); }
.seg button { border: 0; border-radius: 0; padding: 5px 14px; color: var(--muted); }
.seg button.on { color: var(--text); background: var(--hover); box-shadow: inset 0 -2px 0 var(--gold); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); display: inline-block; }
.dot.ok { background: var(--up); } .dot.run { background: var(--gold); animation: pulse 1s infinite; } .dot.err { background: var(--down); }
@keyframes pulse { 50% { opacity: .3; } }

nav.tabs { display: flex; gap: 0; padding: 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; background: var(--bg); }
nav.tabs a { padding: 11px 14px 10px; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 1px solid transparent; font-size: 13px; letter-spacing: .02em; }
nav.tabs a:hover { color: var(--text); }
nav.tabs a.on { color: var(--text); border-bottom-color: var(--gold); }
.badge { border: 1px solid var(--down); color: var(--down); padding: 0 5px; font-size: 11px; margin-left: 4px; }

main { padding: 18px; max-width: 1500px; margin: 0 auto; }
main.wide { max-width: none; padding: 0; }
/* one quiet line under every view, also what search engines read; the atlas leaves room for it */
.site-foot { height: 32px; box-sizing: border-box; padding: 0 18px; line-height: 31px; font-size: 12px; color: var(--dim); border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
h2 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 0 0 10px; color: var(--head); letter-spacing: .01em; }
h3 { font-size: 13px; margin: 0 0 8px; color: var(--head); font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grid { display: grid; gap: 0; padding: 0 1px 1px 0; }
.grid > * { background: var(--panel); border: 1px solid var(--line); margin: 0 -1px -1px 0; }
.gap { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 16px; }
.cols { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); padding: 16px; min-width: 0; }
.kpi .label { font-size: 12px; color: var(--muted); }
.kpi .value { font-family: var(--display); font-size: 30px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; color: var(--head); }
.kpi .sub { color: var(--muted); font-size: 12px; }
.banner { border: 1px solid var(--gold-dim); border-left: 3px solid var(--gold); background: var(--banner-bg); padding: 11px 14px; margin-bottom: 16px; }
.note { color: var(--muted); font-size: 12px; margin: 6px 0 12px; line-height: 1.6; max-width: 110ch; }

.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: 12px; cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--panel); }
th.num, td.num { text-align: right; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--hover); }
td.name { display: flex; align-items: center; gap: 10px; white-space: normal; min-width: 180px; }
td.name img, .ico { width: 26px; height: 26px; object-fit: contain; flex: none; }
.lbl { color: var(--muted); font-size: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.chip { padding: 6px 12px; cursor: pointer; font-size: 12px; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.chip:hover { color: var(--text); }
.chip.on { color: var(--text); border-bottom-color: var(--gold); }
.tag { display: inline-block; border: 1px solid var(--line2); padding: 1px 7px; font-size: 11px; color: var(--muted); margin: 0 4px 4px 0; }
.tag.gold { border-color: var(--gold-dim); color: var(--gold); }
.mini { list-style: none; margin: 0; padding: 0; }
.mini li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.mini li:hover .n { color: #fff; }
.mini li:last-child { border-bottom: 0; }
.mini .n { flex: 1; min-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .v { font-variant-numeric: tabular-nums; color: var(--muted); }
.mini .p { min-width: 64px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.path { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.path img { width: 22px; height: 22px; }
.path .arrow { color: var(--dim); }
.bar { height: 3px; background: var(--line); overflow: hidden; }
.bar > div { height: 100%; background: var(--gold); }

.modal { position: fixed; inset: 0; background: #02040acc; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.modal-body { background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 20px 60px #000c; padding: 20px; width: min(900px, 100%); }
.tip { position: fixed; z-index: 60; background: var(--panel2); border: 1px solid var(--line2); box-shadow: 0 10px 30px #000a; padding: 8px 10px; font-size: 12px; pointer-events: none; max-width: 340px; line-height: 1.5; }
.tip b { color: var(--bright); font-family: var(--display); font-weight: 400; font-size: 15px; color: #fff; }
svg text { fill: var(--muted); font-size: 11px; }
.empty { color: var(--muted); padding: 28px; text-align: center; }
form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.suggest { position: relative; }
.suggest ul { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none; background: var(--panel2); border: 1px solid var(--line2); max-height: 280px; overflow-y: auto; min-width: 280px; }
.suggest li { padding: 6px 8px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.suggest li:hover, .suggest li.on { background: var(--hover); }
.suggest img { width: 20px; height: 20px; }

/* ------------------------------------------------------------- atlas */
/* Full-bleed tree with framed panels floating over it. */
.atlas { position: relative; height: calc(100vh - 92px - 32px - var(--notice-h, 0px)); overflow: hidden; }
.site-notice { display: flex; align-items: center; gap: 12px; padding: 7px 20px; background: var(--panel2); border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--text); }
.site-notice span { flex: 1; }
.site-notice button { padding: 0 6px; font-size: 16px; line-height: 1.2; color: var(--dim); }
.stage { position: absolute; inset: 0; overflow: hidden; background: var(--stage-bg); cursor: grab; touch-action: none; }
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--stars, .5);
  background-image: radial-gradient(1px 1px at 20px 30px, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 140px 90px, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 260px 190px, #fff5 50%, transparent 51%), radial-gradient(1.5px 1.5px at 330px 50px, #fff7 50%, transparent 51%);
  background-size: 360px 240px; }
.stage.drag { cursor: grabbing; }
.stage svg { position: relative; width: 100%; height: 100%; display: block; }
.frame-panel, .atlas > aside, .stage .counters, .stage .mbox, .choice-pop, .masters-pop {
  background: var(--glass);
  box-shadow: 0 0 0 1px var(--frame-in), 0 0 0 2px var(--frame-out); }
.atlas > aside { position: absolute; top: 12px; bottom: 12px; overflow-y: auto; z-index: 3; }
/* --L / --R: how much of the stage each side panel covers (see bindResizers) */
.atlas { --lib-w: 260px; --det-w: 440px; --L: calc(var(--lib-w) + 24px); --R: calc(var(--det-w) + 24px); }
.atlas.hide-lib { --L: 12px; } .atlas.hide-det { --R: 12px; }
.atlas .strats { left: 12px; width: var(--lib-w); }
.atlas .detail { right: 12px; width: var(--det-w); padding: 0 0 40px; }
.rsz { position: absolute; top: 12px; bottom: 12px; width: 9px; z-index: 5; cursor: ew-resize; }
.rsz::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background .15s; }
.rsz:hover::after, .rsz.on::after { background: var(--gold-dim); }
.rsz-l { left: calc(var(--lib-w) + 8px); } .rsz-r { right: calc(var(--det-w) + 8px); }
.atlas.hide-lib .rsz-l, .atlas.hide-det .rsz-r { display: none; }
.atlas.hide-lib .strats, .atlas.hide-det .detail { display: none; }
/* no text carets or selection on UI chrome; form fields stay selectable */
.atlas { user-select: none; -webkit-user-select: none; }
.atlas input, .atlas textarea { user-select: text; -webkit-user-select: text; }
.topbar { position: absolute; top: 12px; left: var(--L); right: var(--R); margin: 0 auto; width: fit-content; max-width: calc(100% - var(--L) - var(--R)); overflow-x: auto; display: flex; gap: 10px; z-index: 2; padding: 2px; }
.stage .counters { display: flex; }
.stage .mbox { padding: 7px 14px; cursor: pointer; min-width: 96px; }
.stage .mbox:hover, .stage .mbox.on { background: var(--hover); }
.mbox .caps { font-size: 11px; }
.mbox .cv { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mbox .cv b { color: var(--text); font-weight: 500; }
.counters .ctr { padding: 7px 12px; cursor: pointer; border-right: 1px solid var(--line); min-width: 74px; }
.counters .ctr:last-child { border-right: 0; }
.counters .ctr:hover { background: var(--hover); }
.counters .ctr .caps { font-size: 11px; }
.counters .ctr .cv { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.counters .ctr .cv b { color: var(--text); font-weight: 500; }
.counters .ctr.has .cv b { color: var(--gold); }
.stage .tools { position: absolute; bottom: 36px; left: var(--L); right: var(--R); margin: 0 auto; width: fit-content; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; z-index: 3; }      /* its menu opens over the steps bar */
.stage .tools button, .stage .tools select { background: var(--glass); }
.stage .tools button.icon { padding: 3px 6px; line-height: 0; }
.stage .tools button.icon svg { width: 17px; height: 17px; }
.stage .tools button.on { border-color: var(--gold-dim); color: var(--gold); }
.stage .legend { position: absolute; bottom: 0; left: var(--L); right: var(--R); padding: 7px 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 14px; font-size: 11px; color: var(--muted); pointer-events: none; z-index: 1;
  background: linear-gradient(transparent, var(--bg)); }
.strat { padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 2px solid transparent; }
.strat:hover { background: var(--hover); }
.strat.on { background: var(--panel2); border-left-color: var(--gold); }
.strat .t { font-family: var(--display); font-size: 16px; color: var(--head); }
.strat .m { margin-top: 4px; font-size: 12px; color: var(--dim); }
.edge { stroke: var(--edge); stroke-width: 10; fill: none; }
.edge.on { stroke: var(--edge-on); stroke-width: 16; }
.glow { stroke: var(--edge-on); stroke-width: 46; stroke-opacity: var(--glow, .16); fill: none; stroke-linecap: round; }
.node { cursor: pointer; }
.node circle.body { fill: var(--node-off); stroke: none; }
.node circle.frame { fill: none; stroke-width: 6; stroke-opacity: .45; }
.node circle.halo { fill: none; stroke-width: 5; stroke-opacity: .25; }
.node image { opacity: .26; transition: opacity .15s; }
.node.on image { opacity: 1; }
.node.on circle.frame { stroke-opacity: 1; stroke-width: 9; }
.node.on.k-notable circle.frame, .node.on.k-keystone circle.frame { stroke: var(--gold) !important; }
.node.on.k-keystone circle.halo { stroke-opacity: .7; }
.node:hover image { opacity: .9; }
.node:hover circle.frame { stroke: var(--bright) !important; stroke-opacity: 1; }
.node.avoid circle.ring { stroke: var(--down); stroke-width: 8; stroke-dasharray: 18 12; }
.node.focus circle.frame { stroke: var(--bright) !important; stroke-width: 14; stroke-opacity: 1; }
/* an allocated choice node with no option picked: a quiet "?" where the number goes, once asked for */
.showmiss .node.unpicked .cnum { display: inline; }
.node.unpicked .cnum circle { stroke: var(--dim); fill-opacity: .8; }
.node.unpicked .cnum text { fill: var(--dim); }
.topen { position: absolute; top: 78px; left: var(--L); right: var(--R); margin: 0 auto; width: fit-content; z-index: 2; background: var(--glass); border: 1px solid var(--line2); color: var(--dim); font-size: 12px; padding: 4px 12px; cursor: pointer; }
.topen b { font-weight: 600; }
.topen .x { margin-left: 6px; padding: 0 2px; }
.topen .x:hover { color: var(--bright); }
.topen:hover { background: var(--hover); }
.choice-lbl { fill: var(--gold); font-size: 56px; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 14px; pointer-events: none; font-weight: 600; }
.sublabel { fill: var(--sublabel); font-family: var(--display); font-size: 150px; text-anchor: middle; pointer-events: none; opacity: .85; }
.sublabel.cnt { font-family: var(--body); font-size: 90px; fill: var(--muted); }
.choice-pop { position: absolute; z-index: 5; width: 330px; padding: 12px; }
.cp-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.cp-h b { font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--head); }
.cp-o { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border: 1px solid var(--line); margin-bottom: 4px; cursor: pointer; font-size: 13px; line-height: 1.4; }
.cp-o:hover { border-color: var(--accent-dim); }
.cp-o.on { border-color: var(--gold); color: var(--gold); }
.cp-o.ro { cursor: default; }
.cp-r { width: 9px; height: 9px; border: 1px solid currentColor; transform: rotate(45deg); flex: none; margin-top: 4px; }
.cp-o.on .cp-r { background: var(--gold); }
/* game keywords: dotted like a link in game; Alt pins a hover tip so they can be hovered */
.kw { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); cursor: help; }
.tip.reach { pointer-events: auto; }      /* pinned by Alt */
.kwd, .kwtip { color: var(--text); font-size: 11.5px; line-height: 1.45; }
.kwd { margin-top: 6px; }
.kwt { color: var(--gold); font-family: var(--display); font-size: 13px; margin-bottom: 1px; }
.kwtip { max-width: 360px; z-index: 70; }
.kwtip .kwd { margin-top: 0; }
.tipopts { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line2); }
.tipopts .on { color: var(--gold); }
.tipreq { margin-top: 6px; color: var(--dim); font-size: 11px; }
/* detail panel pieces */
.detail h2 { font-size: 26px; margin-bottom: 4px; }
.detail ol, .detail ul.plain { margin: 0; padding-left: 20px; line-height: 1.6; }
.tablet { border: 1px solid var(--line); padding: 10px 12px; margin-bottom: 8px; background: var(--inset); }
.tablet .h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tablet .b { font-family: var(--display); font-size: 15px; }
.tablet .b.Rare { color: #f0dc6c; } .tablet .b.Magic { color: #8fa2ff; } .tablet .b.Unique { color: #d9884a; }
:root[data-theme="light"] .tablet .b.Rare { color: #8a6d00; } :root[data-theme="light"] .tablet .b.Magic { color: #3346b8; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: 13px; line-height: 1.5; align-items: baseline; }
.kv > div:nth-child(odd) { color: var(--muted); font-size: 12px; padding-top: 1px; }

/* masters of the atlas */
/* centred in the space the side panels leave free */
.masters-pop { position: absolute; top: 76px; left: var(--L); right: var(--R); margin: 0 auto; width: fit-content; z-index: 4; padding: 12px 14px 14px; max-height: calc(100% - 150px); overflow: auto; }

.mp-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.mp-h button { margin-left: auto; }
.mp-cols { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.mp-col { border: 1px solid var(--line); padding: 8px 10px 10px; background: var(--inset); }
.mp-col.on { border-color: var(--gold-dim); }
.mp-name { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; cursor: pointer; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.mp-name b { font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--head); }
.mp-col.on .mp-name b { color: var(--gold); }
.mp-radio { width: 10px; height: 10px; border: 1px solid var(--line2); transform: rotate(45deg); }
.mp-col.on .mp-radio { background: var(--gold); border-color: var(--gold); }
.mp-cnt { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.mp-t { width: 22px; font-size: 10px; color: var(--dim); letter-spacing: .08em; }
.mp-node.ro { cursor: default; }
.dv-master { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 10px; cursor: pointer; }
.dv-mt { display: flex; justify-content: center; gap: 6px; }
/* map device */
.device { position: relative; border: 1px solid var(--line2); background: radial-gradient(ellipse at 50% 30%, var(--panel2), var(--inset)); padding: 14px 14px 12px; text-align: center; }
.dv-title { position: absolute; top: 8px; left: 12px; }
.dv-way { margin: 12px auto 12px; width: 76px; height: 76px; }
.dv-tier { position: absolute; bottom: 2px; right: 4px; font-size: 11px; color: var(--muted); }
.dv-8 { position: absolute; top: 2px; left: 4px; font-size: 10px; color: var(--gold); letter-spacing: .04em; }
.slot.corrupt { border-color: #7a2424; box-shadow: inset 0 0 14px #d2202033; }
.itip .it-cor { color: #d20000; margin-top: 6px; }
.dv-tabs { display: flex; justify-content: center; gap: 10px; }
.slot { position: relative; width: 64px; height: 64px; border: 1px solid var(--line2); background: var(--inset); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot img { width: 86%; height: 86%; object-fit: contain; }
.slot.empty { border-style: dashed; cursor: default; }
.slot.empty span { font-size: 12px; color: var(--dim); }
.slot.filled:hover { border-color: var(--bright); }
.slot.Rare { box-shadow: inset 0 0 14px #f0dc6c33; border-color: #8f7f3a; }
.slot.Magic { box-shadow: inset 0 0 14px #8fa2ff33; border-color: #4f5c9a; }
.slot.Unique { box-shadow: inset 0 0 14px #d9884a44; border-color: #8a5a32; }
.slot.over { outline: 1px solid var(--down); }
.dv-meta { margin-top: 10px; }
.dv-alt { margin-top: 6px; }
.slot-mini { border-bottom: 1px dotted var(--dim); cursor: pointer; }
/* PoE-style item tooltip */
.tip.item { padding: 0; background: #000e; border: 0; max-width: 380px; }
.itip { min-width: 280px; text-align: center; font-family: var(--display); }
.itip .it-h { padding: 6px 14px; font-size: 16px; line-height: 1.25; }
.itip.Normal .it-h { background: #2a2a2a; color: #c8c8c8; border: 1px solid #555; }
.itip.Magic .it-h { background: #141a3a; color: #8888ff; border: 1px solid #3c4a9a; }
.itip.Rare .it-h { background: #2c2610; color: #ffff77; border: 1px solid #7a6a2a; }
.itip.Unique .it-h { background: #2e1a0c; color: #af6025; border: 1px solid #7a4a22; }
.itip .it-b { padding: 8px 14px 10px; font-family: var(--body); font-size: 12.5px; line-height: 1.55; border: 1px solid #333; border-top: 0; }
.itip .it-imp { color: #8888ff; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid #3a3a3a; }
.itip .it-mod { color: #8888ff; }
.itip.Unique .it-mod { color: #af6025; }
.itip .it-none { color: #777; font-style: italic; }
.itip .it-note { color: #b0a070; margin-top: 6px; padding-top: 6px; border-top: 1px solid #3a3a3a; font-style: italic; }
.chs img.ico { width: 22px; height: 22px; border-radius: 50%; }

/* ------------------------------------------------ atlas workbench parts */
.atlas .detail { padding: 0 0 40px; }
.libhead { padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.strat .variants { margin: 8px 0 2px; border-left: 1px solid var(--line2); }
.strat .var { padding: 3px 10px; font-size: 12px; color: var(--muted); cursor: pointer; }
.strat .var:hover { color: var(--text); }
.strat .var.on { color: var(--gold); }
.var-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.var-tools #delStrat { color: var(--dim); }
.var-tools #delStrat:hover { color: var(--down); }
.strat.dirty .t::after { content: " · unsaved"; font-family: var(--body); font-size: 11px; color: var(--gold); letter-spacing: .04em; }
.gold { color: var(--gold); }
button:disabled { opacity: .45; cursor: default; }
.dhead { padding: 14px 18px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 4; }
.title-in { width: 100%; font-family: var(--display); font-size: 24px; background: transparent; border: 1px solid transparent; padding: 4px 6px; margin: 6px 0 6px -6px; color: var(--head); }
.title-in:hover, .title-in:focus { border-color: var(--line2); }
.dtabs { display: flex; flex-wrap: wrap; margin: 10px -18px 0; padding: 0 12px; border-top: 1px solid var(--line); }
.dtabs a { padding: 9px 9px; font-size: 12px; color: var(--muted); cursor: pointer; border-bottom: 1px solid transparent; white-space: nowrap; }
.dtabs a.on { color: var(--text); border-bottom-color: var(--gold); }
#dbody { padding: 16px 18px; }
#dbody section { margin-top: 20px; }
textarea { font: inherit; font-size: 13px; color: var(--text); background: var(--inset); border: 1px solid var(--line2); padding: 6px 8px; resize: vertical; line-height: 1.5; }
textarea:focus { outline: none; border-color: var(--accent-dim); }
.ro textarea, .ro input { border-color: transparent; background: transparent; resize: none; }
.pick { display: flex; flex-wrap: wrap; gap: 5px; }
.pchip { border: 1px solid var(--line2); padding: 3px 9px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; }
.pchip:hover { color: var(--text); }
.pchip.on { border-color: var(--gold-dim); color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.pchip-in { font-size: 12px; padding: 3px 8px; width: 12em; }
.ro .pchip:not(.on) { display: none; }
ul.lined, ol.lined { margin: 0 0 6px; padding-left: 20px; }
ul.lined li, ol.lined li { display: flex; gap: 4px; align-items: flex-start; margin-bottom: 4px; }
ol.lined { list-style: decimal; } ol.lined li { display: list-item; }
ol.lined li textarea, ul.lined li textarea { width: calc(100% - 62px); vertical-align: top; overflow: hidden; resize: none; }
.li-tools { display: inline-flex; vertical-align: top; }
.tablet.opt { opacity: .7; border-style: dashed; }
.tablet ul.mods, .tablet ul.umods { list-style: none; padding: 0; margin: 8px 0 6px; }
.tablet ul.mods li { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; color: var(--text); border-bottom: 1px dotted var(--line); }
.tablet ul.umods li { font-size: 12px; color: #d9884a; padding: 2px 0; }
.tablet .aff { font-size: 10px; color: var(--dim); border: 1px solid var(--line2); width: 16px; text-align: center; flex: none; }
.tablet .mt { flex: 1; line-height: 1.4; }
.tablet .mmin { width: 4.5em; padding: 2px 5px; font-size: 12px; }
.tablet .tnote { width: 100%; margin-top: 6px; font-size: 12px; padding: 4px 6px; background: transparent; border-color: var(--line); }
.keynodes { display: flex; flex-wrap: wrap; gap: 5px; }
.kn { border: 1px solid; border-left-width: 3px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.kn:hover { color: var(--bright); }
.catdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.notedot { fill: var(--gold); display: none; }
.node.noted .notedot { display: inline; }
.tipnote { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line2); color: var(--gold); white-space: pre-wrap; }
button.danger { border-color: var(--down); color: var(--down); }
select.small { padding: 2px 6px; font-size: 12px; }

/* ---------------------------------------------------------------- themes */
:root[data-theme="vesper"] {
  --bg: #0e0a12; --panel: #16101c; --panel2: #1c1524; --inset: #110c16; --hover: #241a2e; --line: #2a2033; --line2: #3b2e48;
  --text: #ece3f1; --muted: #a391b2; --dim: #6d5c7c; --accent: #d6b3ff; --accent-dim: #9a78c2; --gold: #f0b870; --gold-dim: #b0834a;
  --head: #f6eefb; --header-bg: #0e0a12f0; --overlay: #0e0a12e0;
  --stage-bg: radial-gradient(ellipse at 50% 40%, #241634 0%, #0e0a12 70%); --glass: #120d18e6; --frame-out: #d6b3ff26; --edge: #2c2138; --node-off: #140e1a; --sublabel: #e4d4f0; --banner-bg: #1a1208;
}
:root[data-theme="moss"] {
  --bg: #060d0c; --panel: #0b1614; --panel2: #0f1d1a; --inset: #081110; --hover: #13241f; --line: #1a2c28; --line2: #274039;
  --text: #dcece6; --muted: #7fa197; --dim: #557068; --accent: #8fe3cb; --accent-dim: #5aa892; --gold: #d8c27a; --gold-dim: #9e8c52;
  --head: #eef8f4; --header-bg: #060d0cf0; --overlay: #060d0ce0;
  --stage-bg: radial-gradient(ellipse at 50% 40%, #0f2622 0%, #060d0c 70%); --glass: #08110fe6; --frame-out: #8fe3cb24; --edge: #1b302b; --node-off: #091412; --sublabel: #cfe8df; --banner-bg: #11110a;
}
:root[data-theme="dracula"] {
  --bg: #1e1f29; --panel: #282a36; --panel2: #2f3241; --inset: #21222c; --hover: #383a4c; --line: #3a3d52; --line2: #4b4f6a;
  --text: #f8f8f2; --muted: #a4acd4; --dim: #6272a4; --accent: #bd93f9; --accent-dim: #8a6cc0; --gold: #f1fa8c; --gold-dim: #b3ba66;
  --up: #50fa7b; --down: #ff5555; --blue: #8be9fd; --head: #ffffff; --bright: #ffffff; --header-bg: #1e1f29f0; --overlay: #1e1f29e8;
  --stage-bg: radial-gradient(ellipse at 50% 40%, #33294a 0%, #1e1f29 70%); --glass: #282a36eb; --frame-in: #191a21; --frame-out: #bd93f930;
  --edge: #3a3d52; --edge-on: #ff79c6; --node-off: #21222c; --sublabel: #f8f8f2; --banner-bg: #2b2a1e;
}
:root[data-theme="dark"] {
  --bg: #070808; --panel: #0f1012; --panel2: #141518; --inset: #0a0b0c; --hover: #18191d; --line: #222428; --line2: #3a3c42;
  --text: #f3f3f5; --muted: #a6a6b0; --dim: #6f6f7a; --accent: #73bcf7; --accent-dim: #2b8fd6; --gold: #f5c451; --gold-dim: #a9852c;
  --up: #3ee07f; --down: #ff5f5f; --head: #ffffff; --bright: #ffffff; --header-bg: #000000f2; --overlay: #000000e8;
  --stage-bg: radial-gradient(ellipse at 50% 40%, #0f1113 0%, #040505 70%); --glass: #0f1012f2; --frame-in: #000000; --frame-out: #ffffff26; --stars: 0; --edge: #25272c; --edge-on: #9ab4e0; --glow: .07; --node-off: #09090b; --cnum-bg: #0a0b0c; --sublabel: #ececf0; --banner-bg: #15110a;
}

/* Dark OLED: the previous Dark, near-black */
:root[data-theme="oled"] {
  --bg: #000000; --panel: #0b0b0d; --panel2: #121215; --inset: #050506; --hover: #1b1b20; --line: #26262c; --line2: #3b3b44;
  --text: #f3f3f5; --muted: #a6a6b0; --dim: #6f6f7a; --accent: #82b4ff; --accent-dim: #4f80d0; --gold: #f5c451; --gold-dim: #a9852c;
  --up: #3ee07f; --down: #ff5f5f; --head: #ffffff; --bright: #ffffff; --header-bg: #000000f2; --overlay: #000000e8;
  --stage-bg: radial-gradient(ellipse at 50% 40%, #121216 0%, #050506 70%); --glass: #0b0b0df2; --frame-in: #000000; --frame-out: #ffffff30; --stars: 0; --edge: #2a2a31; --edge-on: #9ab4e0; --glow: .07; --node-off: #09090b; --cnum-bg: #050506; --sublabel: #ececf0; --banner-bg: #15110a;
}

/* Console themes (from Aion Kit, after Keycloak / PatternFly): the header and
   the tab bar can carry their own tokens, since custom properties cascade.
   Gold stays the one highlight in every theme, as in the ones above; a
   theme's own colour goes to links. */
[data-theme="dark"] header.top { background: #000000; }
[data-theme="dark"] th, [data-theme="oled"] th, [data-theme="console"] th { color: var(--text); font-weight: 600; }

/* Console: light page under a black masthead and a charcoal tab bar */
:root[data-theme="console"] {
  color-scheme: light;
  --bg: #f0f0f0; --panel: #ffffff; --panel2: #f5f5f5; --inset: #ffffff; --hover: #f0f0f0; --line: #d2d2d2; --line2: #b8bbbe;
  --text: #151515; --muted: #6a6e73; --dim: #8a8d90; --accent: #0066cc; --accent-dim: #73bcf7; --gold: #8f6200; --gold-dim: #b88a2e;
  --up: #3e8635; --down: #c9190b; --head: #151515; --bright: #000000; --header-bg: #151515; --overlay: #fffffff0;
  --stage-bg: radial-gradient(ellipse at 50% 40%, #fafafa 0%, #e9e9e9 75%); --glass: #ffffffeb; --frame-in: #d2d2d2; --frame-out: #ffffff; --stars: 0; --edge: #d2d2d2; --edge-on: #0066cc; --glow: .1; --node-off: #f5f5f5; --cnum-bg: #ffffff; --sublabel: #3c3f42; --banner-bg: #fdf7e7;
}
[data-theme="console"] header.top {
  --text: #ffffff; --muted: #d2d2d2; --dim: #8a8d90; --line: #3c3f42; --line2: #4f5255; --inset: #151515; --head: #ffffff; --hover: #292929; --gold: #f5c451; --gold-dim: #a9852c; --accent: #73bcf7;
  color-scheme: dark; background: #151515; border-bottom: 0;
}
[data-theme="console"] nav.tabs {
  --text: #ffffff; --muted: #e0e0e0; --dim: #b8bbbe; --hover: #3c3f42; --head: #ffffff; --gold: #f5c451; --gold-dim: #a9852c; --line: #212427;
  background: #212427;
}

/* Ninja: poe.ninja's cool greys, sky-blue links, striped rows */
:root[data-theme="ninja"] {
  --bg: #111318; --panel: #181b22; --panel2: #1e222b; --inset: #0e1014; --hover: #232834; --line: #262b36; --line2: #353b49;
  --text: #d7dbe3; --muted: #8b93a5; --dim: #5f6778; --accent: #5aa9ff; --accent-dim: #3a78c0; --gold: #e8b54a; --gold-dim: #a8843a;
  --up: #52c07a; --down: #f0605d; --head: #f1f3f7; --bright: #ffffff; --header-bg: #1a1d24; --overlay: #111318e8; --zebra: #15181e;
  --stage-bg: radial-gradient(ellipse at 50% 40%, #1b2029 0%, #0e1014 70%); --glass: #181b22eb; --frame-in: #0e1014; --frame-out: #5aa9ff24; --stars: 0; --edge: #262b36; --edge-on: #5aa9ff; --glow: .08; --node-off: #13161c; --cnum-bg: #0e1014; --sublabel: #d7dbe3; --banner-bg: #16202e;
}
[data-theme="ninja"] nav.tabs { background: var(--bg); }
[data-theme="ninja"] tr:nth-child(even) > td { background: var(--zebra); }

/* Light: cool daylight, azure links, a gold line over the header */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f7; --panel: #ffffff; --panel2: #f6f8fb; --inset: #ffffff; --hover: #e8eef6; --line: #d6dde8; --line2: #b9c4d4;
  --text: #14213d; --muted: #56627a; --dim: #8c96a8; --accent: #1d5fa8; --accent-dim: #7ea6d4; --gold: #94650f; --gold-dim: #b8913f;
  --up: #1f7a4a; --down: #b42b36; --head: #0c1830; --bright: #000000; --header-bg: #fffffff2; --overlay: #fffffff0;
  --stage-bg: radial-gradient(ellipse at 50% 40%, #fbfcfe 0%, #e3e9f2 75%); --glass: #ffffffeb; --frame-in: #d6dde8; --frame-out: #ffffff; --stars: 0; --edge: #d6dde8; --edge-on: #1d5fa8; --glow: .1; --node-off: #f6f8fb; --cnum-bg: #ffffff; --sublabel: #2a3752; --banner-bg: #fbf5e8;
}
[data-theme="light"] header.top { border-top: 3px solid var(--gold); }

@media (max-width: 1200px) {
  .atlas { height: auto; overflow: visible; }
  .atlas .stage { position: relative; height: 70vh; height: 70svh; }
  .atlas > aside { position: static; width: auto !important; max-height: none; box-shadow: none; border-top: 1px solid var(--line); }
  .atlas.hide-lib .strats, .atlas.hide-det .detail { display: block; }
  #tLib, #tDet { display: none; }
  .atlas, .atlas.hide-lib, .atlas.hide-det { --L: 8px; --R: 8px; }
  .rsz { display: none; }
}
@media (max-width: 700px) {
  main { padding: 10px; }
  .kpi .value { font-size: 22px; }
  header.top { gap: 8px; padding: 8px 12px; position: static; }      /* three rows tall here: it would cover half the screen */
  .atlas { grid-template-columns: 1fr; }
  .atlas .strats { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .atlas .strats > .libhead, .atlas .strats > .inspire, .atlas .strats > .empty { flex: none; width: 240px; position: static; margin: 0; border: 0; border-right: 1px solid var(--line); }
  .strat { min-width: 200px; border-bottom: 0; border-right: 1px solid var(--line); }
  .atlas .stage { height: 60vh; height: 60svh; }
}

details.fold { margin-top: 20px; }
details.fold summary { cursor: pointer; list-style: none; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary h3 { display: inline; }
details.fold summary::before { content: "▸"; color: var(--dim); margin-right: 6px; font-size: 11px; }
details.fold[open] summary::before { content: "▾"; }
#toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(720px, calc(100% - 32px)); padding: 9px 16px; font-size: 13px;
  background: var(--panel2); color: var(--text); border: 1px solid var(--gold-dim); box-shadow: 0 10px 30px #000a; }
.wstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.wstats label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.wstats label span { flex: 1; }
.wstats input { width: 4.6em; padding: 2px 6px; font-size: 12px; }
.wstats i { font-style: normal; font-size: 11px; color: var(--dim); }
.pchip.bad { border-color: color-mix(in srgb, var(--down) 60%, transparent); color: var(--down); background: color-mix(in srgb, var(--down) 8%, transparent); }
.libview { display: flex; gap: 10px; font-size: 12px; }
.libview a { color: var(--dim); cursor: pointer; } .libview a.on { color: var(--gold); }
.byline { margin-top: 6px; color: var(--muted); } .byline a { cursor: pointer; margin-left: 6px; }
img.av, span.av { width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; display: inline-block; background: var(--line); }
.savebox { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line2); color: var(--muted); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* header selectors with a visible label */
.hsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); user-select: none; }
.hsel select { font-size: 13px; }

/* weight on the buttons that matter */
button.primary, a.button.primary { font-weight: 600; }

/* no text caret outside form fields (shows with caret browsing, F7) */
body { caret-color: transparent; }
input, textarea, select, [contenteditable] { caret-color: auto; }
header.top, nav.tabs, .dtabs, button, label, h3, .caps, .lbl, .tag, .pchip, .device, .ov-facts, #saveState { user-select: none; -webkit-user-select: none; }

/* fill atlas asks to be pressed while the atlas is empty */
#tTree.cta { border-color: var(--gold); color: var(--gold); font-size: 14px; padding: 7px 18px; }
.stage .mbox.cta { border-color: var(--gold-dim); padding: 9px 20px; }
.stage .mbox.cta .cv { font-size: 14px; font-weight: 600; }

/* overview: the strat's front page */
.ov-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.ov-top .tag { margin: 0; }
.ov-desc { margin: 4px 0 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.ov-add { display: inline-block; color: var(--muted); border-bottom: 1px dashed var(--line2); cursor: pointer; margin: 2px 0 12px; }
.ov-add:hover { color: var(--gold); border-bottom-color: var(--gold-dim); }
.ov-edit { float: right; font-size: 12px; color: var(--dim); cursor: pointer; }
.ov-edit:hover { color: var(--gold); }
#dbody section.ov { margin-top: 22px; }
#dbody section.ov .ov-add { margin: 0; }
.ov-facts { text-align: center; margin-top: 8px; }
.ov-l { font-size: 11px; color: var(--muted); margin: 10px 0 5px; }
.ov-steps { margin: 0; padding-left: 20px; line-height: 1.6; }
.ov-steps li { margin-bottom: 6px; }
.ov-text { white-space: pre-wrap; line-height: 1.6; font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.drops li .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drops .qty { width: 5em; padding: 2px 6px; font-size: 12px; }
.drops .v { min-width: 5.5em; text-align: right; }
.ev { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line2); text-align: right; }
.ev b { color: var(--gold); font-weight: 600; }

/* type and corners. Default: IBM Plex Sans with slightly rounded corners.
   Settings offers "classic" (Marcellus headings, system text); the admin
   style beta can try others, per browser. */
:root { --r: 4px; --plex: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --body: var(--plex); --display: var(--plex); }
:root[data-radius="square"] { --r: 2px; }
:root[data-radius="round"] { --r: 8px; }
:where(button, select, input, textarea, a.button, .card, .grid > *, .modal-body, .tip, .suggest ul, .tablet, .mp-col, .mp-node, .cp-o, .dr-item,
  .device, .slot, .seg, .banner, .savebox, #toast, .kn, .frame-panel, .stage .counters, .stage .mbox, .stage .tools > *, .choice-pop, .masters-pop, .mp-list) { border-radius: var(--r); }
.pchip, .tag { border-radius: var(--r); }
:root[data-font="system"] { --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:root[data-font="inter"] { --body: "Inter", ui-sans-serif, system-ui, sans-serif; }
:root[data-font="figtree"] { --body: "Figtree", ui-sans-serif, system-ui, sans-serif; }
:root[data-font="source"] { --body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; font-size: 14.5px; }
:root[data-head="marcellus"] { --display: "Marcellus", Georgia, "Times New Roman", serif; }
:root[data-head="marcellus"] .brand, :root[data-head="marcellus"] h2 { font-weight: 400; }      /* one weight only: no faux bold */
:root[data-head="cinzel"] { --display: "Cinzel", Georgia, serif; }
:root[data-head="cormorant"] { --display: "Cormorant Garamond", Georgia, serif; }
:root[data-head="sans"] { --display: var(--body); }

header.top .brand + .hsel { margin-left: 10px; }

/* variants live in the strat panel; the library only hints at them */
.vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 2px 0 8px; }
.vbar .caps { font-size: 11px; margin-right: 4px; }
.vchip { color: var(--muted); }
.vchip.on { border-color: var(--gold); color: var(--bright); }
input.vchip { width: auto; min-width: 0; height: 26px; padding: 0 8px; font-size: 12px; background: transparent; cursor: text; }
input.vchip:focus { background: var(--inset); outline: none; box-shadow: 0 0 0 1px var(--gold-dim); }
.vbar .vb-end { margin-left: auto; display: inline-flex; gap: 4px; }
.vbar .vb-end button { color: var(--dim); }
.dmore .tm-pop { bottom: auto; top: calc(100% + 6px); left: auto; right: 0; transform: none; }
.strat .variants { margin: 6px 0 0; border-left: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.strat .var { padding: 0; font-size: 11px; color: var(--dim); }
.strat .var.on { color: var(--gold-dim); }

/* searchable mod picker under a tablet */
.mpick { position: relative; }
.mp-open { width: 100%; text-align: left; }
.mp-list { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 3px); background: var(--panel2); border: 1px solid var(--line2); box-shadow: 0 12px 34px #000b; padding: 6px; }
.mp-q { width: 100%; margin-bottom: 6px; }
.mp-items { max-height: 300px; overflow-y: auto; }
.mp-g { font-size: 10px; padding: 6px 4px 3px; }
.mp-o { display: flex; gap: 8px; align-items: baseline; padding: 5px 8px; margin: 2px 0; font-size: 12.5px; color: var(--muted); cursor: pointer; border: 1px solid transparent; border-radius: var(--r); }
.mp-o:hover, .mp-o.hl { background: var(--hover); color: var(--text); }
.mp-o.on { border-color: var(--gold); color: var(--bright); }
.mp-o mark { background: none; color: var(--gold); font-weight: 600; }
.mp-x { margin-left: auto; font-size: 11px; color: var(--dim); flex: none; }
.tablet ul.mods li { border-left: 2px solid var(--gold-dim); padding-left: 6px; }

/* who sees a strat, and the follow button, in the strat panel header */
select.vis { max-width: 210px; }

/* browse: public strats as cards */
.browse { max-width: 1280px; margin: 0 auto; }
.bhead { margin-bottom: 16px; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.bcard { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; cursor: pointer; }
.bcard:hover { border-color: var(--line2); background: var(--panel2); }
.bc-t { font-family: var(--display); font-size: 18px; color: var(--head); display: flex; align-items: center; }
.bc-by { display: flex; align-items: center; gap: 6px; }
.bc-by a { color: var(--text); cursor: pointer; }
.bc-by a:hover { color: var(--gold); }
.bc-d { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-f { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.join { max-width: 520px; margin: 40px auto; }

/* groups in settings */
.grp { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; background: var(--inset); }
.gmem { margin-top: 6px; }

/* tour: the page dims (and blurs for the first question) around one part */
.tour-veil { position: fixed; inset: 0; z-index: 90; background: #04060dcc; display: flex; align-items: center; justify-content: center; }
.tour-veil.blur { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tour-spot { position: fixed; z-index: 90; border: 1px solid var(--gold); border-radius: var(--r); pointer-events: none;
  box-shadow: 0 0 0 9999px #04060dc4; }
.tour-spot .tour-card { position: absolute; pointer-events: auto; }
.tour-card { width: 300px; background: var(--panel2); border: 1px solid var(--gold-dim); border-radius: var(--r); padding: 14px 16px; box-shadow: 0 16px 40px #000c; }
.tour-card.center { width: min(420px, calc(100% - 32px)); }
.tour-card p { font-size: 13px; line-height: 1.55; margin: 6px 0 12px; }
.tour-h { font-family: var(--display); font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--head); font-weight: 500; margin: 4px 0 0; }
.tour-card::before { content: ""; position: absolute; width: 12px; height: 12px; background: var(--panel2); border: 1px solid var(--gold-dim); transform: rotate(45deg); }
.tour-card[data-side="left"]::before { left: -7px; top: 22px; border-top: 0; border-right: 0; }
.tour-card[data-side="right"]::before { right: -7px; top: 22px; border-bottom: 0; border-left: 0; }
.tour-card[data-side="top"]::before { top: -7px; left: 26px; border-bottom: 0; border-right: 0; }
.tour-card[data-side="bottom"]::before { bottom: -7px; left: 26px; border-top: 0; border-left: 0; }
.tour-card.center::before { display: none; }
.tour-card[data-side="inside"]::before { display: none; }

/* browse preview: a strat's overview in a window */
.modal-body.wide { width: min(720px, 100%); }
.pv .device { margin-top: 4px; }
.pv section.ov { margin-top: 22px; } .pv details.fold { margin-top: 22px; }

#pvOpen.cta { font-size: 13px; padding: 6px 16px; border-color: var(--gold); }

/* ------------------------------------------------------- codex layout */
/* The tree fills the page like in the tree layout; the library and the
   strat (up to --cdx-w wide) float over its left side, and the tree's bars
   centre on what's left. map-big hides the strat. --cw is resolved against
   .atlas. */
.atlas.lay-codex { --x0: calc(var(--lib-w) + 24px); --cw: min(var(--cdx-w), calc((100% - var(--x0)) * .56));
  --L: calc(var(--x0) + var(--cw) + 12px); --R: 12px; }
.atlas.lay-codex.hide-lib { --x0: 12px; }
.atlas.lay-codex .detail { left: var(--x0); right: auto; width: var(--cw); }
.atlas.lay-codex.hide-det .detail, .atlas.lay-codex.hide-det .rsz-r { display: block; }
.atlas.lay-codex .rsz-r { right: auto; left: calc(var(--x0) + var(--cw) + 2px); }
.atlas.lay-codex.map-big { --L: var(--x0); }
.atlas.lay-codex.map-big .detail, .atlas.lay-codex.map-big .rsz-r { display: none; }
.atlas.lay-codex > .masters-pop { background: var(--panel); top: 12px; left: var(--x0); right: auto; width: var(--cw); max-height: calc(100% - 24px); margin: 0; z-index: 5; }
.atlas.lay-codex #tDet, .atlas.lay-atlas #tBig { display: none; }
@media (max-width: 1200px) {
  .atlas.lay-codex { display: flex; flex-direction: column; }
  .atlas.lay-codex .strats { order: 1; } .atlas.lay-codex .detail { order: 2; } .atlas.lay-codex .stage { order: 3; }
  .atlas.lay-codex .detail { width: auto; }
  .atlas.lay-codex .stage { position: relative; inset: auto; width: auto; height: 60vh; margin: 12px 0; --L: 8px; }
  .atlas.lay-codex.map-big .detail { display: block; }
  .atlas.lay-codex.map-big .stage { position: fixed; inset: 8px; height: auto; margin: 0; z-index: 40; }
  .atlas.lay-codex .rsz { display: none; }
}

/* layout picker (first visit) */
.tour-card.center.wide { width: min(560px, calc(100% - 32px)); }
.welcome-theme { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lay-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.lay-pick { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 12px; height: auto; white-space: normal; line-height: 1.4; }
.lay-pick b { color: var(--head); font-weight: 600; }
.lay-pick.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim); }
.lay-pick.on b { color: var(--gold); }
.lay-mini { position: relative; display: block; width: 100%; height: 120px; background: var(--stage-bg); border: 1px solid var(--line2); margin-bottom: 4px; overflow: hidden; }
.lay-mini .mini-atlas { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.lay-mini.atlas .mini-atlas { right: 30%; width: calc(70% - 8px); }
.lay-mini i { position: absolute; top: 6px; bottom: 6px; right: 6px; width: 28%; border: 1px solid var(--line2); background: var(--panel2);
  background-image: linear-gradient(var(--line2), var(--line2)), linear-gradient(var(--line2), var(--line2)), linear-gradient(var(--line2), var(--line2));
  background-size: 70% 1px, 50% 1px, 60% 1px; background-position: 8px 12px, 8px 22px, 8px 32px; background-repeat: no-repeat; }
.mini-atlas .mn circle { fill: var(--sublabel); opacity: .32; }
.mini-atlas .me line { stroke: var(--sublabel); opacity: .14; }
.mini-atlas :is(circle, line).s1 { fill: var(--gold); stroke: var(--gold); opacity: 1; }
.mini-atlas :is(circle, line).s2 { fill: var(--gold-dim); stroke: var(--gold-dim); opacity: 1; }
.mini-atlas :is(circle, line).s3 { fill: color-mix(in srgb, var(--gold-dim) 55%, var(--edge)); stroke: color-mix(in srgb, var(--gold-dim) 55%, var(--edge)); opacity: 1; }
.lay-pick:hover .mini-atlas .mn circle:not([class^="s"]) { fill: var(--sublabel); }
@media (max-width: 560px) { .lay-picks { grid-template-columns: 1fr; } }
.atlas.lay-codex:not(.map-big) .counters .ctr { min-width: 0; padding: 6px 9px; }
.atlas.lay-codex:not(.map-big) .stage .mbox { min-width: 0; padding: 6px 10px; }
.atlas.lay-codex .counters .ctr .cv { white-space: nowrap; }

/* strat symbols */
img.sym { width: 20px; height: 20px; object-fit: contain; border-radius: 50%; vertical-align: -4px; margin-right: 7px; }
img.sym.big { width: 30px; height: 30px; margin: 0; }
.symf { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.symc { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; }
.symc img.sym { margin: 0; width: 18px; height: 18px; }
.symc span { font-size: 11px; color: var(--muted); }
.symc.on { border-color: var(--gold); } .symc.on span { color: var(--gold); }
.symsel { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.symsel button { padding: 3px 5px; line-height: 0; }
.symsel button img.sym { margin: 0; width: 24px; height: 24px; }
.symsel button.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim); }
.symsel button:disabled:not(.on) { opacity: .35; }
.symsel button.on:disabled { opacity: 1; }
.atlas.lay-codex .stage .mbox .cv { white-space: nowrap; }
.atlas.lay-codex:not(.map-big) .topbar { flex-wrap: wrap; justify-content: center; overflow: visible; }
.atlas.lay-codex .stage .mbox { flex: none; }
.atlas.lay-codex:not(.map-big) .counters { flex-wrap: wrap; }

/* tree: bigger notables, a gold halo when taken, fat choice numbers */
.node.k-notable circle.halo { stroke-opacity: 0; stroke-width: 10; }
.node.on.k-notable circle.halo { stroke: var(--gold) !important; stroke-opacity: .55; }
.node.on.k-notable circle.frame { stroke-width: 12; }
.cp-n, .tip-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid currentColor; font-weight: 800; font-size: 12px; }
.tip-n { width: 16px; height: 16px; font-size: 10px; margin-right: 2px; }
.cp-o.on .cp-n { background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* map device: trade corner on tablets and the waystone */
.device .slot { position: relative; }
.dv-trade { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--panel2); border: 1px solid var(--gold-dim); border-radius: 50%; color: var(--gold); z-index: 2; opacity: .85; }
.dv-trade:hover { opacity: 1; border-color: var(--gold); background: var(--hover); }
.dv-trade svg { width: 11px; height: 11px; }
.share-b svg, #libShare svg { width: 13px; height: 13px; vertical-align: -2px; }
.share-b svg { margin-right: 5px; }
#libShare { padding: 3px 6px; line-height: 0; }
.ov-text a, .ov-desc a, .ov-steps a { color: var(--accent); word-break: break-all; }
.dim { color: var(--dim); }
#shareBox section { margin-top: 22px; }
#shareBox .sh-who { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); }
#shareBox .sh-who h3 { color: var(--gold); }
.dv-way .dv-tier { right: auto; left: 5px; }

/* tree: taken nodes (and their lines) grow as you zoom out; --as/--cs/--ew come from zoomScale() */
.node.on > .nb { transform: scale(var(--as, 1)); }
.node.on.k-small > .nb { transform: scale(var(--as-s, 1)); }
.edge.on { stroke-width: var(--ew, 16px); }
.glow { stroke-width: calc(var(--ew, 16px) * 2.8); }
.node.on.k-small circle.frame { stroke: var(--gold) !important; stroke-opacity: .8; }
.cnum { display: none; pointer-events: none; }
.node.picked .cnum { display: inline; }
/* just off the node, on its emptiest side (--ux/--uy from atlas.js), whatever the zoom: the offset grows with the badge */
.cnum .cb { --s: var(--cs, 1); --d: calc(var(--r, 30px) + 40px * var(--s)); transform: translate(calc(var(--d) * var(--ux, .707)), calc(var(--d) * var(--uy, -.707))) scale(var(--s)); }
/* the picked option: a small badge on the node's upper right, so the icon stays visible */
.cnum circle { fill: var(--cnum-bg, #120c02); fill-opacity: .92; stroke: var(--gold); stroke-width: 7; }
.cnum text { fill: var(--gold); font-size: 96px; font-weight: 700; text-anchor: middle; font-family: var(--body); }

/* masters: the game's 4x3 tiles, dark when free, lit in the master's colour when taken */
.mp-col { --mc: var(--gold); }
.mp-col.m-jado, .dv-master.m-jado { --mc: #ff9f1c; --mf: sepia(1) saturate(7) hue-rotate(-12deg) brightness(1.35) contrast(1.1); }
.mp-col.m-doryani, .dv-master.m-doryani { --mc: #ff2a2a; --mf: sepia(1) saturate(9) hue-rotate(-45deg) brightness(1.05) contrast(1.15); }
.mp-col.m-hilda, .dv-master.m-hilda { --mc: #3fa4ff; --mf: sepia(1) saturate(6) hue-rotate(175deg) brightness(1.3) contrast(1.1); }
.mp-col.on { border-color: var(--mc); }
.mp-col.on .mp-name b { color: var(--mc); }
.mp-col.on .mp-radio { background: var(--mc); border-color: var(--mc); }
.mp-name b { font-size: 16px; }
.mp-pts { font-size: 12px; color: var(--muted); margin: 0 2px 8px; font-variant-numeric: tabular-nums; }
.mp-pts b { color: var(--text); }
.mp-grid { display: grid; grid-template-columns: repeat(3, 58px); gap: 10px 12px; justify-content: center; padding: 4px 6px 2px; }
.mp-node { width: 58px; height: 58px; padding: 0; cursor: pointer; border: 1px solid #0008; box-shadow: 0 0 0 1px #6a5a4050; background: #0006; }
.mp-node img { width: 100%; height: 100%; display: block; filter: grayscale(.35) brightness(.62); transition: filter .12s; }
.mp-node:hover img { filter: grayscale(.1) brightness(.9); }
.mp-node.on { box-shadow: 0 0 0 2px var(--mc); }
.mp-node.on img { filter: var(--mf); }
.mp-node.ro { cursor: default; }
.dv-master img { width: 28px; height: 28px; filter: var(--mf, none); box-shadow: 0 0 0 1px var(--mc, var(--gold-dim)); }
.dv-master .caps { color: var(--mc, var(--gold)); }

/* info popup */
.symsel.named button { line-height: 1.2; padding: 4px 9px 4px 5px; display: inline-flex; align-items: center; gap: 6px; }
.symsel.named button img.sym { width: 22px; height: 22px; }
.tagsel { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tagsel a { cursor: pointer; color: var(--muted); margin-left: 2px; }
.tagsel a:hover { color: var(--down); }
#infoBody section { margin-top: 16px; }
.info-b { padding: 3px 6px; line-height: 0; }
.info-b svg { width: 15px; height: 15px; }

/* delete is always red */

/* slim scrollbars in the theme's colours */
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }
::-webkit-scrollbar-button { display: none; }

/* drops tab */
.dr-ev { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: 14px; }
.dr-ev .caps { margin-right: 4px; }
.dr-ev b { font-size: 20px; color: var(--gold); font-weight: 600; }
.dr-ev input { width: 80px; font-size: 15px; }
.dr-div .ico, .dr-item .ico { width: 22px; height: 22px; object-fit: contain; }
.dr-h { margin: 18px 0 8px; font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--head); }
.dr-h .muted { font-family: var(--body); font-size: 12px; }
.dr-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border: 1px solid var(--line2); background: var(--inset); font-size: 13px; }
.dr-item.mk { cursor: pointer; } .dr-item.mk:hover { border-color: var(--gold-dim); }
.dr-item.kind { border-color: var(--gold-dim); }
.dr-item.k-unique span, ul.drops li.k-unique .n { color: #d0803b; }
.dr-item button { padding: 0 4px; line-height: 1; border: 0; }
.dr-add { margin-top: 8px; }
.dr-kinds { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.dr-add .suggest input { width: 100%; }
.bc-hr { margin-left: auto; padding-left: 10px; font-family: var(--body); font-size: 12px; color: var(--gold); white-space: nowrap; }

/* settings: even cards, labels above their fields */
.grid.settings { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); max-width: 1500px; }
.grid.settings > .card { padding: 18px 20px 20px; }
.fld { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; }
.fld .caps { font-size: 11px; }
.fld select, .fld input { width: 100%; }

/* tree menu (fill / clear whole trees) */
.tmenu { position: relative; display: inline-flex; }
#tTree .caret { font-size: 9px; margin-left: 3px; opacity: .7; }
.tm-pop { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 170px; padding: 6px; z-index: 30;
  background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 0 0 1px var(--frame-in); display: flex; flex-direction: column; border-radius: var(--r); }
.tm-pop[hidden] { display: none; }
.tm-h { font-size: 11px; color: var(--dim); padding: 6px 8px 3px; }
.tm-pop button { background: none; border: 0; text-align: left; padding: 5px 10px; font-size: 13px; color: var(--text); border-radius: var(--r); }
.tm-pop button:hover { background: var(--hover); color: var(--head); }
.tm-pop .tm-main { color: var(--gold); font-weight: 600; }
.tm-pop .tm-danger { color: var(--down); }

/* a narrow tree area (codex, small screens; see narrowCheck): empty subtree
   counters and the hint line step aside */
.stage.narrow .counters .ctr:not(.has):not(:first-child) { display: none; }
.stage.narrow .legend { visibility: hidden; }
.edit-b { border-color: var(--gold); color: var(--gold); font-weight: 600; padding-left: 14px; padding-right: 14px; }
.edit-b:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }

/* edit mode: the way out is a green Save & Done */
.done-b { border-color: var(--up); color: var(--up); font-weight: 600; padding-left: 14px; padding-right: 14px; }
.done-b:hover { background: color-mix(in srgb, var(--up) 14%, transparent); }

/* maps tab: blocks with faint lines */
.mblk { border-top: 1px solid var(--line); padding: 18px 0 20px; }
.mh { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--head); }
.mh.gold { color: var(--gold); } .mh.down { color: var(--down); }
.mh-d { font-family: var(--body); font-size: 12px; color: var(--dim); margin-left: 6px; }
.mblk .wstats { margin-top: 2px; }

/* strat pages: text can be selected and copied */
.atlas #dbody { user-select: text; -webkit-user-select: text; }
.atlas #dbody button, .atlas #dbody .slot, .atlas #dbody .mp-node { user-select: none; -webkit-user-select: none; }

/* map device: master not picked yet */
.dv-nomaster { display: inline-block; margin-top: 12px; padding: 5px 14px; border: 1px solid var(--gold); color: var(--gold); cursor: pointer;
  font-size: 12px; border-radius: var(--r); }
.slot.empty[data-empty] { cursor: pointer; }
.slot.empty[data-empty]:hover { border-color: var(--gold-dim); }

/* strat header: Share in gold; the i button glows (accent) while info is missing */
.req { color: var(--down); font-weight: 700; }
.info-nudge { color: var(--gold); margin: 8px 0 0; }

/* tree only: the atlas full screen, the planner offered in a box */
.atlas.tree-only > aside, .atlas.tree-only .rsz { display: none !important; }
.try-box { position: absolute; left: 16px; bottom: 56px; z-index: 4; width: 290px; padding: 16px 18px; background: var(--glass);
  border: 1px solid var(--gold-dim); box-shadow: 0 0 0 1px var(--frame-in); }
.try-box h3 { font-family: var(--display); font-size: 20px; color: var(--head); margin: 4px 0 6px; letter-spacing: 0; text-transform: none; }
.try-box p { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0 0 12px; }
.try-box button { width: 100%; font-size: 14px; padding: 9px 12px; }
@media (max-width: 1200px) { .try-box { position: static; width: auto; margin: 12px; } .atlas.tree-only .stage { height: 80vh; height: max(320px, calc(100svh - var(--stage-y, 200px) - 8px)); } }

/* library: the example strat waits behind Need inspiration */
.inspire { position: sticky; bottom: 0; margin: 14px 0 0; padding: 12px 22px; cursor: pointer; background: var(--panel); border-top: 1px solid var(--line); }
.inspire .t { color: var(--text); font-weight: 600; }
.inspire:hover .t { color: var(--gold); }
.inspire:hover .m { color: var(--text); }
.inspire .m { color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 3px; }
.first-strat { padding: 28px 24px; }
.first-strat h3 { font-family: var(--display); font-size: 22px; color: var(--head); margin: 0 0 8px; letter-spacing: 0; text-transform: none; }
.first-strat button { font-size: 14px; padding: 9px 18px; margin-top: 6px; }
@media (min-width: 1201px) {
  .atlas .strats { display: flex; flex-direction: column; }
  .atlas .strats > * { flex-shrink: 0; }
  .atlas .strats > .inspire { margin-top: auto; }
}
.try-box .try-2 { margin-top: 6px; font-size: 13px; padding: 7px 12px; }
.tools .share-b { display: inline-flex; align-items: center; }
.tools .share-b svg { display: inline-block; margin: 0 5px 0 0; }

/* read mode: a label, and a note when a click would change something */
.ro-chip { display: inline-block; padding: 1px 7px; border: 1px solid var(--line2); color: var(--muted); font-size: 12px;
  border-radius: var(--r); margin-right: 2px; }
#roHint { position: fixed; z-index: 60; pointer-events: none; padding: 6px 10px; background: var(--panel); color: var(--text);
  border: 1px solid var(--gold); font-size: 12.5px; box-shadow: 0 6px 20px #000a; opacity: 0; }
#roHint b { color: var(--gold); }
#roHint.on { animation: roHint 1.8s ease forwards; }
@keyframes roHint { 0% { opacity: 0; transform: translateY(4px); } 10%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.edit-b.nudge { animation: nudge .7s ease; }
@keyframes nudge { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

/* nav: Report and About on the right */
nav.tabs .nav-r { margin-left: auto; color: var(--gold-dim); }
nav.tabs .nav-r:hover { color: var(--gold); }

/* about, contact, privacy */
.about { max-width: 860px; margin: 24px auto 60px; padding: 0 16px; display: grid; gap: 16px; }
.about .card { padding: 20px 24px; }
.about h2 { font-family: var(--display); font-size: 28px; margin: 0 0 10px; color: var(--head); }
.about p { line-height: 1.65; margin: 8px 0; }
.about h4 { margin: 18px 0 6px; font-size: 13px; color: var(--head); letter-spacing: .04em; }
.about ul { margin: 0; padding-left: 20px; line-height: 1.65; }
.about li { margin: 4px 0; }
.about a:not(.button) { color: var(--accent); }

/* report modal and the admin's list */
.rp-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-kind { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var(--line2); cursor: pointer; font-size: 13px; }
.rp-kind:has(input:checked) { border-color: var(--gold); color: var(--gold); }
.rep { border-top: 1px solid var(--line); padding: 10px 0; }
.rep.done { opacity: .55; }
.rep-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rep-t { white-space: pre-wrap; margin: 6px 0; line-height: 1.5; user-select: text; }
.rep-c { word-break: break-all; user-select: text; }
.about a.button { display: inline-block; text-decoration: none; padding: 7px 18px; margin-top: 4px; }
.edit-b svg, .done-b svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }
.about .row > .button, .about .row > button { padding: 7px 16px; margin: 0; font-size: 13px; }
.about .ab-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.about .ab-row > span { min-width: 110px; }
.about .ab-row > .button, .about .ab-row > button { padding: 7px 16px; margin: 0; font-size: 13px; }
.dhead .d-close { font-size: 17px; line-height: 1; padding: 1px 7px 3px; color: var(--muted); }
.dhead .d-close:hover { color: var(--text); border-color: var(--line2); }

/* find a node: matches light up, the rest dims */
.tfind { display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--glass); border: 1px solid var(--line); flex: none; }
.tfind input { width: 120px; border: 0; background: transparent; padding: 6px 0; font-size: 12.5px; }
.tfind input:focus { outline: none; width: 160px; }
.tfind span { font-size: 11px; color: var(--gold); min-width: 0; }
#atlasSvg.searching .node:not(.hit) { opacity: .13; }
#atlasSvg.searching .edge { opacity: .3; }
#atlasSvg.searching .node.hit circle.frame { stroke: var(--gold) !important; stroke-width: 12; stroke-opacity: 1; }
/* the close button stays in the corner however the header wraps */
.dhead .d-close { position: absolute; top: 12px; right: 12px; }
.dhead > .row:first-child { padding-right: 34px; }
/* hints for whoever fills a strat in; readers don't need them */
#dbody.ro .mh-d, #dbody.ro .ed-hint { display: none; }

/* My Atlas: steps like PoB's leveling trees */
.steps { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px); padding: 6px 10px; background: var(--glass); border: 1px solid var(--line); }
.steps .st-list { display: flex; gap: 4px; flex-wrap: wrap; }
.steps .st { min-width: 44px; }
.steps .st i { font-style: normal; color: var(--dim); margin-left: 6px; font-size: 11px; }
.steps .st.on { border-color: var(--gold-dim); color: var(--gold); }
.steps .st.on i { color: var(--gold-dim); }
.steps .st-cur { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.steps .st-cur label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.steps #stPts { width: 64px; padding: 3px 6px; }
.node.later image { opacity: .5; }
.node.later circle.frame { stroke-opacity: .85; stroke-dasharray: 10 8; }
.edge.later { stroke: var(--edge-on); stroke-opacity: .55; stroke-width: 12; stroke-dasharray: 26 18; }
.node.fresh circle.ring { stroke: var(--gold); stroke-width: 10; stroke-opacity: 1; }
@media (max-width: 1200px) { .steps { left: 8px; right: 8px; transform: none; width: fit-content; max-width: calc(100% - 16px); margin: 0 auto; } }

/* first visit: a pointer at the tour button instead of a modal */
.tour-wrap { position: relative; display: inline-flex; }
#tTour.nudge { border-color: var(--gold); color: var(--gold); }
.tour-nudge { position: absolute; bottom: calc(100% + 8px); right: 0; white-space: nowrap; padding: 6px 8px 6px 10px; font-size: 12px; color: var(--text);
  background: var(--panel); border: 1px solid var(--gold-dim); box-shadow: 0 8px 24px #000a; border-radius: var(--r); display: flex; gap: 8px; align-items: center; z-index: 20; }
.tour-nudge::after { content: ""; position: absolute; right: 9px; bottom: -5px; width: 8px; height: 8px; background: var(--panel); border: solid var(--gold-dim); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.tour-nudge a { color: var(--gold); cursor: pointer; }
.tour-nudge .x { color: var(--dim); cursor: pointer; padding: 0 2px; }
.tour-nudge .x:hover { color: var(--head); }
/* header: the mark goes to the Workbench, the name to this tool's start */
.brand .brand-mark, .brand .brand-name { color: inherit; text-decoration: none; display: flex; }
.brand .brand-mark .mark { transition: opacity .15s; }
.brand .brand-mark:hover .mark { opacity: .75; }

/* admin lists: a toolbar (search, filters, pager) over a paged table */
.adm-h { justify-content: space-between; margin-bottom: 10px; }
.adm-h h3 { margin: 0; }
.adm-tb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.adm-tb input[type="search"] { width: 18em; }
.adm-pg { margin-left: auto; }
.pager { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; margin-top: 8px; }
.adm-pg .pager { margin-top: 0; }
.adm-rows > .pager { display: flex; }
.pp { position: relative; }
.pp-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; min-width: 9em;
  background: var(--panel2); border: 1px solid var(--line2); padding: 4px; }
.pp-menu[hidden] { display: none; }
.pp-menu button { border: 0; text-align: left; }
.pp-menu button.on { color: var(--gold); }
td a[data-us] { cursor: pointer; }
.mcharts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; }
@media (max-width: 900px) { .mcharts { grid-template-columns: 1fr; } }
.mc svg { display: block; width: 100%; }
.mc-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.mc-h b { color: var(--text); font-weight: 600; }
.mc-b { fill: var(--gold-dim); }
.mc-b.on { fill: var(--gold); }
.mc-hit { fill: transparent; }
.mc-base { stroke: var(--line2); stroke-width: 1; }
.mc-top { margin: 0; padding-left: 20px; font-size: 13px; }
.mc-top li { padding: 2px 0; }
.mc-top li span { float: right; margin-left: 8px; }
.mc-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin-top: 4px; }