/*
 * c3.css - the look of c³: dark only, Seamware magenta on near-black
 *
 * Copyright 2026 Seamware
 * SPDX-License-Identifier: Apache-2.0
 */

@font-face { font-family: 'Outfit';        src: url(../fonts/outfit.woff2) format('woff2');         font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url(../fonts/source-sans-3.woff2) format('woff2');  font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono.woff2) format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: dark;

  --bg:          #0E1014;
  --bg-deep:     #0A0C0F;
  --panel:       #161920;
  --panel-2:     #1D212A;
  --line:        #2B303B;
  --line-soft:   #232833;
  --line-box:    #333A47;
  --text:        #ECEEF2;
  --text-2:      #CDD2DB;
  --muted:       #A6ADBA;
  --dim:         #7A8190;
  --faint:       #5A616E;

  --accent:      #A72E60;
  --accent-2:    #D0558A;
  --accent-text: #E58AB1;
  --accent-soft: #F3B3CE;

  --ok:          #6FDCA0;
  --warn:        #F2B84B;
  --bad:         #FF8A9A;

  --sans:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --title: 'Outfit', 'Source Sans 3', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
}

a { color: var(--accent-text); }
a:hover { color: var(--accent-soft); }

button, input { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

[hidden] { display: none !important; }

.mono { font-family: var(--mono); }

h2.section {
  margin: 0;
  font-family: var(--title);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}


/* ------------------------------------------------------------------ splash */

#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 48px 16px;
  background: radial-gradient(ellipse at 50% 38%, #2A1420 0%, #14111A 38%, var(--bg) 70%);
  transition: opacity 0.35s ease;
}

#splash.leaving { opacity: 0; pointer-events: none; }

.splash-brand { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.splash-brand img { width: 168px; height: auto; animation: c3glow 3.2s ease-in-out infinite; }
.splash-word { font-family: var(--title); font-size: 72px; line-height: 72px; font-weight: 200; letter-spacing: 0.02em; }
.splash-word .cube { color: var(--accent-text); font-weight: 300; }
.splash-sub { font-family: var(--title); font-size: 14px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); text-align: center; }

.splash-steps { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 4px; }
.step { display: flex; align-items: center; gap: 14px; min-height: 34px; font-size: 15px; color: var(--faint); }
.step .mark {
  flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border-radius: 50%; border: 2px solid var(--line);
}
.step.now { color: var(--text-2); }
.step.now .mark { border-color: #3A3F4B; border-top-color: var(--accent-text); animation: c3spin 0.8s linear infinite; }
.step.ok  { color: var(--text); }
.step.ok .mark   { border: 0; background: var(--accent); color: #fff; }
.step.warn       { color: var(--text); }
.step.warn .mark { border: 0; background: #5A4416; color: var(--warn); }
.step.fail       { color: var(--text); }
.step.fail .mark { border: 0; background: #5A1E28; color: var(--bad); }
.step .detail { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--dim); text-align: right; }

.splash-bar { margin-top: 14px; height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.splash-bar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-text)); transition: width 0.4s ease; }

.splash-error { margin-top: 16px; color: var(--bad); font-size: 14px; text-align: center; }

.splash-foot {
  position: absolute; bottom: 28px; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  color: var(--dim); font-size: 13px;
}
.splash-foot img { height: 16px; width: auto; opacity: 0.8; }
.splash-foot .mono { margin-left: 14px; }

@keyframes c3glow { 0%, 100% { filter: drop-shadow(0 0 18px #A72E6055); } 50% { filter: drop-shadow(0 0 42px #D0558A88); } }
@keyframes c3spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .splash-brand img, .step.now .mark { animation: none; }
  #splash { transition: none; }
}


/* ------------------------------------------------------------------ shell */

#app { min-height: 100%; display: flex; flex-direction: column; }

header.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  padding: 0 32px; min-height: 64px;
  background: var(--bg-deep); border-bottom: 1px solid var(--line);
}
header.top .mark { height: 56px; width: auto; margin-right: 24px; }
.brand { display: flex; align-items: baseline; gap: 0.4em; }
.brand .sep { letter-spacing: 0; }
.word { font-family: var(--title); font-size: 44px; font-weight: 400; color: var(--text); }
.word .cube { color: var(--accent-2); }
.brand .tag { font-family: var(--title); font-size: 36px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

nav.pages { display: flex; gap: 4px; margin-left: auto; }
nav.pages a, nav.pages span {
  padding: 18px 16px 20px; color: var(--muted); text-decoration: none;
}
nav.pages a.active { padding-bottom: 17px; color: var(--text); font-weight: 600; border-bottom: 3px solid var(--accent-2); }

.top-right { margin-left: 24px; display: flex; align-items: center; gap: 16px; }
.chip {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-right .sw { height: 18px; width: auto; opacity: 0.85; }

/* Minimise and close - full-screen only, where the window has no title bar (window.js) */
.winctl { display: flex; gap: 4px; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--line); }
.winctl[hidden] { display: none; }
.winctl button {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.winctl button:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.winctl button.close:hover { background: var(--accent); border-color: var(--accent-2); color: #fff; }
.winctl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* AI Assist - the button, and its popup (coming soon) */
header.top { position: relative; }
.aibtn {
  min-height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--accent-text); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.aibtn:hover, .aibtn[aria-expanded="true"] { border-color: var(--accent-2); }
.aipop {
  position: absolute; right: 16px; top: calc(100% + 6px); z-index: 40; width: min(440px, calc(100vw - 32px));
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  box-shadow: 0 16px 48px #000C; font-size: 14px; line-height: 1.45; color: var(--text-2);
}
.aipop .ai-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aipop h2 { margin: 0; font-size: 16px; color: var(--text); }
.aipop .soon { margin-left: 6px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--warn); vertical-align: 2px; }
.aipop p { margin: 10px 0; }
.aipop ul { margin: 6px 0 10px; padding-left: 20px; }
.aipop li { margin: 4px 0; }
.aipop .mono { font-family: var(--mono); font-size: 12px; }

@media (max-width: 720px) {
  header.top { padding: 0 16px; }
  .brand .tag { display: none; }
  nav.pages { margin-left: 0; }
  nav.pages { margin-left: 0; }
  nav.pages a, nav.pages span { padding-left: 8px; padding-right: 8px; }
  .top-right .chip { display: none; }
}


/* ------------------------------------------------------------------ connect */

.page { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; min-height: 0; }

@media (max-width: 720px) { .page { padding: 16px; } }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }

.connbar { padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 14px; }

.state { display: flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.state.ok   .dot { background: var(--ok);   box-shadow: 0 0 8px var(--ok); }
.state.busy .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.state.bad  .dot { background: var(--bad);  box-shadow: 0 0 8px var(--bad); }
.state .label { font-weight: 600; }

.connform { display: flex; gap: 8px; flex: 1 1 360px; min-width: 0; }
.connform input {
  flex: 1; min-width: 0; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-deep);
  font-family: var(--mono); font-size: 13px; color: var(--text-2);
}
.connform input:focus { border-color: var(--accent-2); outline: none; }
.connform input.tenant { flex: 0 1 170px; }
.connform .localbox { display: flex; align-items: center; gap: 6px; flex: none; font-size: 13px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.connform .localbox input { flex: none; min-height: 0; width: 15px; height: 15px; margin: 0; accent-color: var(--accent-2); }

.connbar { position: relative; }
.tokenbtn { display: inline-flex; align-items: center; gap: 7px; }
.tokenbtn .tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tokenbtn.set .tdot { background: var(--ok, #3FB27F); }
.tokenpop {
  position: absolute; right: 14px; top: calc(100% + 6px); z-index: 30; width: min(460px, calc(100vw - 32px));
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-size: 13px; max-height: calc(100vh - 120px); overflow-y: auto;
}
.tokenpop .tp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.tokenpop .tp-head .mono { font-family: var(--mono); font-weight: 400; }
.tokenpop .tp-state { margin: 8px 0; color: var(--text-2); }
.tokenpop input[type="password"] {
  width: 100%; box-sizing: border-box; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-deep); font-family: var(--mono); font-size: 13px; color: var(--text-2);
}
.tokenpop .tp-remember { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.tokenpop .tp-sub { margin: 12px 0 6px; font-weight: 600; }
.tokenpop .tp-login { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tokenpop .tp-row { display: flex; gap: 8px; margin: 8px 0; }
.tokenpop .tp-field {
  width: 100%; box-sizing: border-box; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-deep); font-family: var(--mono); font-size: 13px; color: var(--text-2);
}
.tokenpop .tp-row .tp-field { flex: 1; min-width: 0; }
.tokenpop .tp-vc { margin: 0 0 8px; }
.tokenpop .tp-hint { margin: -4px 0 8px 22px; font-size: 12px; }
.askpop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45); padding: 16px;
}
.askpop .askbox {
  width: min(440px, 100%); padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-size: 14px;
}
.askpop .askbox p { margin: 0 0 14px; color: var(--text-2); }
.askpop .actions { display: flex; gap: 8px; justify-content: flex-end; }
.tokenpop .actions { display: flex; gap: 8px; }
.tokenpop .tp-hdrs { margin-top: 10px; padding-top: 2px; border-top: 1px solid var(--line); }
.tokenpop .tp-hdr { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.tokenpop .tp-hdr .tp-field { flex: 1; min-width: 0; }
.tokenpop .tp-hdr .tp-hdr-name { flex: 0 0 34%; }
.tokenpop .tp-hdr label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.tokenpop .tp-hdrs .tp-hint { margin: 6px 0 0; }
.tokenpop .tp-note { margin: 10px 0 0; color: var(--muted); }
.tokenpop .tp-note code { font-family: var(--mono); font-size: 12px; }
.tokenpop .muted { color: var(--muted); }
.iconbtn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px; }
.iconbtn:hover { color: var(--text); }

.btn {
  min-height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-size: 14px; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: #3A4150; }
.btn.primary { border: 0; background: linear-gradient(135deg, #C2407A, var(--accent)); color: #fff; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: default; }

.counts { color: var(--muted); }

/* Live values: the chip, a box or a row that just changed, a box just created */
.live { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); cursor: default; }
.live .dot { width: 8px; height: 8px; }
.live.ok   .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: c3pulse 2s ease-in-out infinite; }
.live.busy .dot { background: var(--warn); }
.live.bad  .dot { background: var(--bad); }
.live.bad  .label { color: var(--bad); }
@keyframes c3pulse { 50% { opacity: 0.35; } }
.box.flash { animation: c3flash 1.1s ease-out; }
.box.born  { animation: c3born 1.6s ease-out; }
.box .a.chg .v { animation: c3value 1.4s ease-out; }
@keyframes c3flash { 0% { box-shadow: 0 0 0 3px #F2B84B, 0 0 26px #F2B84B99; } 100% { box-shadow: 0 0 0 0 #F2B84B00, 0 6px 18px #0006; } }
@keyframes c3born  { 0% { box-shadow: 0 0 0 4px #6FDCA0, 0 0 30px #6FDCA0AA; opacity: 0.2; } 30% { opacity: 1; } 100% { box-shadow: 0 0 0 0 #6FDCA000, 0 6px 18px #0006; } }
@keyframes c3value { 0% { color: #F2B84B; background: #F2B84B22; } 100% { color: var(--text-2); background: transparent; } }
@media (prefers-reduced-motion: reduce) { .live.ok .dot, .box.flash, .box.born, .box .a.chg .v { animation: none; } }
.notice { color: var(--warn); }

.cols { flex: 1; display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; min-height: 0; }

.types {
  flex: 1 1 260px; max-width: 300px; min-width: 240px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; overflow: auto;
}
.disc-sum { margin-top: -6px; font-size: 13px; color: var(--muted); }
.typelist { display: flex; flex-direction: column; gap: 6px; }
.trow { display: flex; align-items: center; gap: 6px; }
.trow input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0 2px; accent-color: var(--accent-2); cursor: pointer; }
.trow .type { flex: 1; min-width: 0; }
.trow .more {
  flex: 0 0 auto; width: 32px; min-height: 40px; padding: 0; border: 0; border-radius: 8px; background: none;
  color: var(--muted); font-size: 13px; cursor: pointer; transition: transform 0.15s;
}
.trow .more:hover { color: var(--text); background: var(--panel-2); }
.trow .more[aria-expanded="true"] { transform: rotate(90deg); }
.type {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); font-size: 14px; cursor: pointer; text-align: left;
}
.type.unloaded { border-color: transparent; background: transparent; color: var(--muted); cursor: default; }
.type.unloaded .swatch { opacity: 0.45; }
.tattrs { margin: -2px 0 4px 30px; padding: 4px 0 4px 10px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.tattr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; line-height: 19px; }
.tattr .an { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.tattr .ak { margin-left: auto; font-size: 12px; color: var(--muted); }
.tattr .ak.rel { color: var(--accent-text); }
.tattr .also { flex-basis: 100%; font-size: 11px; color: var(--dim); }
.dim { color: var(--dim); }
.rels { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 19px; }
.rels p, .disc-notes p { margin: 0; font-size: 13px; line-height: 19px; }
.disc-notes p { color: var(--warn); }
.trel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.trel .tf, .trel .tt { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.trel .tn { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.trel .n { margin-left: auto; color: var(--dim); font-size: 12px; }
#load-btn { align-self: stretch; }
.type .swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }
.type .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type .n { color: var(--muted); font-size: 13px; }
.type[aria-pressed="false"] { border-color: transparent; background: transparent; color: var(--dim); }
.type[aria-pressed="false"] .swatch { background: transparent !important; border: 2px solid currentColor; }
.typeall { display: flex; gap: 12px; font-size: 13px; color: var(--muted); }
.typeall button { padding: 0; border: 0; background: none; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.help { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--muted); }

.graphwrap {
  flex: 999 1 560px; min-width: 0; min-height: 480px; position: relative;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-deep);
}

.viewport {
  position: absolute; inset: 0; overflow: hidden; touch-action: none; outline: none; cursor: grab;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
}
.viewport.grabbing { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; }
.edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

.edges line { stroke: var(--faint); stroke-width: 2; }
.edges g.hot line { stroke: var(--accent-2); }
.edges rect { fill: var(--bg-deep); stroke: var(--line); stroke-width: 1; }
.edges text { font-family: var(--mono); font-size: 12px; fill: var(--muted); dominant-baseline: central; text-anchor: middle; }
.edges g.hot rect { stroke: var(--accent-2); }
.edges g.hot text { fill: var(--accent-soft); }
.edges .lbl { display: none; }
.world.near .edges .lbl, .edges g.hot .lbl { display: inline; }
.edges g.off { display: none; }

.box {
  position: absolute; width: 210px; height: 96px; overflow: hidden;
  border-radius: 10px; cursor: grab; user-select: none;
  background: var(--panel); border: 1px solid var(--line-box); box-shadow: 0 6px 18px #0006;
}
.box.sel { border: 2px solid var(--accent-2); box-shadow: 0 0 0 4px #D0558A33, 0 8px 24px #0008; }
.box.off, .xbox.off { display: none; }
.box.under { visibility: hidden; }
.box:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.box .stripe { height: 4px; }
.box .head { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 4px; min-width: 0; }
.box .t { flex: 0 1 auto; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.box .id { flex: 1 1 auto; font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box .a { display: flex; gap: 8px; padding: 1px 12px; font-size: 13px; line-height: 19px; }
.box .a .k { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box .a .v { margin-left: auto; font-family: var(--mono); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.world.far .box .a { visibility: hidden; }

/* an entity with its linked entities embedded (join=inline): one box, level inside level */
.xbox {
  position: absolute; z-index: 5; min-width: 210px; max-width: 560px; width: max-content;
  border-radius: 10px; background: var(--panel); border: 2px solid var(--accent-2);
  box-shadow: 0 0 0 4px #D0558A33, 0 14px 40px #000A; cursor: grab;
}
.xbox:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.lcard { border-left: 3px solid var(--c, var(--line-box)); }
.lcard.root { border-left: 0; border-top: 4px solid var(--c, var(--line-box)); border-radius: 8px; }
.lcard .lhead { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px 4px; min-width: 0; }
.lcard .lhead .t { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.lcard .lhead .id { font-family: var(--mono); font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcard.root > .lhead .id { font-size: 15px; font-weight: 500; }
.lcard .lhead .lv { margin-left: auto; padding-left: 12px; font-size: 11px; color: var(--accent-text); white-space: nowrap; }
.lcard .lclose {
  flex: 0 0 auto; width: 28px; height: 28px; margin: -4px -6px 0 4px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer;
}
.lcard .body { padding: 0 12px 10px; cursor: auto; user-select: text; }
.lcard .a { display: flex; gap: 10px; font-size: 13px; line-height: 19px; }
.lcard .a .k { color: var(--muted); white-space: nowrap; }
.lcard .a .v { margin-left: auto; font-family: var(--mono); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.lcard .lrel { margin-top: 6px; }
.lcard .lrel .rn { font-family: var(--mono); font-size: 12px; color: var(--accent-text); margin-bottom: 4px; }
.lcard .lrel > .lcard { margin: 0 0 6px 6px; background: var(--panel-2); border-radius: 0 8px 8px 0; }
.lcard .lrel > .lcard .lcard { background: var(--panel); }
.lcard .lrel > .lcard .lcard .lcard { background: var(--panel-2); }
.lcard .miss { margin-left: 6px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.lcard .miss .mono { color: var(--text-2); }
.lcard .miss .why { color: var(--dim); }

.modebar {
  position: absolute; left: 172px; top: 12px; right: 260px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 8px 8px 8px 14px; border-radius: 10px; background: #161920F0; border: 1px solid var(--accent);
  font-size: 14px; color: var(--text-2); width: max-content; max-width: calc(100% - 440px);
}

.jsonpanel {
  position: absolute; right: 12px; top: 72px; bottom: 12px; z-index: 7; width: min(520px, calc(100% - 24px));
  display: flex; flex-direction: column; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 16px 48px #000C;
}
.jsonpanel .jhead { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line-soft); }
.jsonpanel .jtitle { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsonpanel pre {
  flex: 1; margin: 0; padding: 12px 16px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 17px; color: var(--text-2);
}

/* The entity editor - over the graph's right side, the graph left usable (a target is picked in it) */
.editor {
  position: absolute; right: 12px; top: 72px; bottom: 12px; z-index: 8; width: min(600px, calc(100% - 24px));
  display: flex; flex-direction: column; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 16px 48px #000C; font-size: 13px;
}
.editor.picking { opacity: 0.55; }
.editor .ehead { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line-soft); }
.editor .etitle { flex: 1; min-width: 0; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor .emode { color: var(--muted); font-size: 12px; white-space: nowrap; }
.editor .eidrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); }
.editor .eidrow .k { color: var(--muted); font-size: 12px; }
.editor .eidrow input { flex: 1 1 160px; }
.editor .ebody { flex: 1; overflow: auto; padding: 8px 10px 12px; }
.editor .enone { color: var(--muted); margin: 8px 6px; }
.editor .erow { border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 8px; margin: 6px 0; background: var(--panel-2); }
.editor .erow.changed { border-color: var(--accent-2); }
.editor .erow.gone, .editor .esub.gone { opacity: 0.55; }
.editor .erow.gone .ename, .editor .esub.gone .ename { text-decoration: line-through; }
.editor .eline { display: flex; align-items: center; gap: 8px; }
.editor .ecaret { border: 0; background: none; color: var(--muted); cursor: pointer; width: 20px; padding: 0; font-size: 12px; }
.editor .ecaret[data-n]::after { content: attr(data-n); font-size: 10px; color: var(--dim); margin-left: 1px; }
.editor .ename { font-weight: 600; overflow-wrap: anywhere; }
.editor .ekind { color: var(--muted); font-size: 12px; }
.editor .eds { font-family: var(--mono); font-size: 11px; color: var(--accent-soft); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; overflow-wrap: anywhere; }
.editor .ebin { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; font-size: 13px; }
.editor .ebin:hover { color: var(--bad); }
.editor .ecell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px 28px; }
.editor .esubs { margin: 6px 0 0 28px; border-left: 2px solid var(--line); padding-left: 8px; }
.editor .esub { display: grid; grid-template-columns: minmax(90px, auto) auto 1fr auto; align-items: center; gap: 6px; margin: 4px 0; }
.editor .esub .ecell { margin: 0; }
.editor input, .editor select, .editor textarea {
  min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-deep);
  font-size: 13px; color: var(--text-2); box-sizing: border-box;
}
.editor input { flex: 1 1 180px; min-width: 0; }
.editor input.short { flex: 0 1 110px; }
.editor textarea { flex: 1 1 100%; width: 100%; padding: 6px 8px; resize: vertical; line-height: 17px; }
.editor .mono { font-family: var(--mono); }
.editor .bad { border-color: var(--bad) !important; }
.editor .eholder { display: flex; flex: 1 1 200px; min-width: 0; }
.editor .eholder > * { flex: 1; }
.editor .elab { color: var(--muted); font-size: 12px; }
.editor .elist { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.editor .eitem { display: flex; gap: 6px; align-items: center; }
.editor .eitem .ebin { margin-left: 0; }
.editor .eplus { align-self: flex-start; border: 1px dashed var(--line); background: none; color: var(--accent-text); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 12px; }
.editor .eplus:hover { border-color: var(--accent-2); }
.editor .eadd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; }
.editor .eadd.sub { margin: 6px 0 2px; }
.editor .efoot { border-top: 1px solid var(--line-soft); padding: 8px 16px 10px; max-height: 40%; overflow: auto; }
.editor .eas { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.editor .eas select { flex: 1; min-width: 0; min-height: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-deep); color: var(--text-2); font-size: 12px; }
.editor .ereq summary { cursor: pointer; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.editor .ereq pre { margin: 6px 0 0; font-family: var(--mono); font-size: 12px; line-height: 17px; color: var(--text-2); white-space: pre-wrap; }
.editor .eerr { color: var(--bad); margin-bottom: 8px; overflow-wrap: anywhere; }
.editor .eerr .muted { color: var(--muted); }
.btn.small { min-height: 28px; padding: 0 10px; font-size: 12px; }
.eidrow { display: flex; align-items: center; gap: 8px; }
.eidrow .eid { flex: 1; min-width: 0; }

.toast {
  position: absolute; left: 50%; bottom: 16px; z-index: 8; transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 8px 14px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: 14px; color: var(--text-2);
  box-shadow: 0 8px 24px #0008;
}

.menu {
  position: fixed; z-index: 50; min-width: 220px; max-width: 420px; padding: 6px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid #3A4150; box-shadow: 0 16px 40px #000C; font-size: 14px;
}
.menu .item {
  display: flex; align-items: center; gap: 12px; min-height: 34px; padding: 0 10px; border-radius: 6px;
  color: var(--text); cursor: pointer; outline: none; white-space: nowrap;
}
.menu .item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.menu .item .hint { font-size: 12px; color: var(--dim); }
.menu .item .more { color: var(--muted); }
.menu .item:focus, .menu .item[aria-expanded="true"] { background: var(--accent); color: #fff; }
.menu .item:focus .hint, .menu .item[aria-expanded="true"] .hint, .menu .item:focus .more { color: #F3D3E1; }
.menu .item[aria-disabled="true"] { color: var(--faint); cursor: default; }
.menu .sep { height: 1px; margin: 5px 4px; background: var(--line); }

.zoombar {
  position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; align-items: center;
  padding: 6px; border-radius: 10px; background: #161920E6; border: 1px solid var(--line);
}
.zoombar button {
  min-width: 40px; min-height: 40px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 18px; cursor: pointer;
}
.zoombar button.fit { font-size: 14px; }
.zoombar .pct { min-width: 52px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--text-2); }

.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: #0A0C0FCC;
}
.card {
  max-width: 520px; padding: 24px; display: flex; flex-direction: column; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.card h3 { margin: 0; font-family: var(--title); font-size: 22px; font-weight: 400; }
.card.bad h3 { color: var(--bad); }
.card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 21px; }
.card .mono { font-size: 13px; color: var(--text-2); word-break: break-all; }
.card .actions { display: flex; gap: 8px; margin-top: 4px; }
.progress { height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.progress div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-text)); transition: width 0.2s; }

.entity {
  flex: 1 1 320px; max-width: 380px; min-width: 280px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; overflow: auto;
}
.entity .eid { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.entity .etypes { display: flex; flex-wrap: wrap; gap: 6px; }
.entity .etype { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.entity .empty { color: var(--dim); font-size: 14px; }
.attr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
  padding: 8px 0; border-top: 1px solid var(--line-soft);
}
.attr .k { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.attr .kind { font-size: 12px; color: var(--muted); }
.attr .v { grid-column: 1 / -1; font-family: var(--mono); font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.attr .sub { grid-column: 1 / -1; font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.attr .sub .mono { color: var(--muted); }
.attr .rel {
  grid-column: 1 / -1; justify-self: start; padding: 0; border: 0; background: none; text-align: left;
  color: var(--accent-text); font-family: var(--mono); font-size: 13px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.attr .rel:hover { color: var(--accent-soft); }
.attr .rel.missing { color: var(--muted); }
.attr .rel.missing::after { content: "  not loaded"; font-family: var(--sans); color: var(--dim); }
details.raw summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details.raw pre {
  margin: 8px 0 0; padding: 10px; border-radius: 8px; background: var(--bg-deep); border: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 12px; line-height: 17px; color: var(--text-2); overflow: auto; max-height: 360px;
}

/* the Graph / Map switch, the map and its controls */
.viewswitch {
  position: absolute; left: 12px; top: 12px; z-index: 6; display: flex; padding: 4px; gap: 2px;
  border-radius: 10px; background: #161920E6; border: 1px solid var(--line);
}
.viewswitch button {
  min-height: 40px; min-width: 64px; padding: 0 14px; border: 0; border-radius: 7px; background: none;
  color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer;
}
.viewswitch button:hover { color: var(--text); }
.viewswitch button[aria-pressed="true"] { background: var(--accent); color: #fff; }

.mapview, .mapview.maplibregl-map { position: absolute; inset: 0; background: #0B1620; outline: none; }
.zoombar .colourby { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 6px; font-size: 13px; color: var(--muted); }
.zoombar select, .dlbody select, .dlbody input {
  min-height: 36px; max-width: 220px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px;
}
.zoombar select:focus, .dlbody select:focus, .dlbody input:focus { border-color: var(--accent-2); outline: none; }
.zoombar { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 196px); }

.mapfoot { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: min(360px, calc(100% - 24px)); pointer-events: none; }
.mapfoot > * { pointer-events: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip2 { padding: 4px 10px; border-radius: 8px; background: #161920E6; border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.chip2:empty { display: none; }
.chip2.warn { color: var(--warn); border-color: #5A4416; }
.legend {
  max-height: 260px; overflow: auto; padding: 8px 12px; border-radius: 10px; background: #161920F0; border: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; font-size: 13px; line-height: 19px;
}
.legend .lt { grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 2px; }
.legend .sw { width: 10px; height: 10px; border-radius: 50%; }
.legend .ln { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend .lc { color: var(--dim); font-size: 12px; text-align: right; }

.dlpanel {
  position: absolute; right: 12px; top: 72px; bottom: 12px; z-index: 7; width: min(440px, calc(100% - 24px));
  display: flex; flex-direction: column; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 16px 48px #000C;
}
.dlpanel .jhead { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line-soft); }
.dlpanel .jtitle { flex: 1; font-family: var(--title); font-size: 16px; }
.dlbody { flex: 1; overflow: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.dlbody h3 { margin: 6px 0 0; font-family: var(--title); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); }
.dlrow { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; font-size: 14px; }
.dlrow .k { color: var(--muted); font-size: 13px; }
.dlrow .v { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.dlrow select, .dlrow input { max-width: none; width: 100%; }
.dlest { min-height: 42px; font-size: 14px; color: var(--text-2); }
.dlest .big { font-family: var(--title); font-size: 22px; color: var(--text); }
.dlest .dim { font-size: 13px; }
.dlest.bad { color: var(--bad); }
.dlnote { margin: 0; font-size: 12px; line-height: 18px; color: var(--dim); }
.dlnote .mono { color: var(--muted); overflow-wrap: anywhere; }
.dlbody .actions { display: flex; gap: 8px; }
.dlareas { display: flex; flex-direction: column; gap: 6px; }
.dlarea { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.dlarea .an { grid-column: 1; grid-row: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlarea .ai { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--dim); }
.dlarea .btn { min-height: 32px; padding: 0 10px; font-size: 13px; grid-row: 1 / span 2; }
.dlarea .btn.show { grid-column: 2; }
.dlarea .btn.danger { grid-column: 3; }
.dlarea .btn.danger { color: var(--bad); }

/* MapLibre's controls, in c³'s colours */
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact { background: #0E1014CC !important; color: var(--muted); font-family: var(--sans); font-size: 11px; }
.maplibregl-ctrl-attrib a { color: var(--accent-text) !important; }
.maplibregl-ctrl-scale { background: #0E1014AA !important; color: var(--muted) !important; border-color: var(--faint) !important; font-family: var(--mono); font-size: 10px !important; }
.maplibregl-canvas:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }

@media (max-width: 1100px) {
  .types, .entity { max-width: none; }
}

/* a wide window: the application is the window's height, the side panels scroll on their own */
@media (min-width: 1101px) {
  #app { height: 100%; }
  .page, .cols { min-height: 0; }
  .cols { flex-wrap: nowrap; }
  .types, .entity { max-height: 100%; }
}

/* Documentation: the components */
/* The Documentation page: the list of everything, and a guide (docs.js) */
#page-docs { overflow: auto; }
.docs { width: 100%; max-width: 980px; margin: 8px auto 24px; }
.docs-reader { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 20px; align-items: start; width: 100%; max-width: 1480px; margin: 8px auto 24px; }
.docs-body { padding: 24px 40px 32px; }
.docs-side, .docs-toc { position: sticky; top: 0; max-height: calc(100vh - 120px); overflow: auto; font-size: 14px; }
.docs-side ul, .docs-toc ul { list-style: none; margin: 4px 0 14px; padding: 0; }
.docs-side a:not(.docs-back), .docs-toc a { display: block; padding: 4px 10px; border-left: 2px solid transparent; color: var(--text-2); text-decoration: none; line-height: 1.35; }
.docs-side a:not(.docs-back):hover, .docs-toc a:hover { color: var(--text); background: var(--panel); }
.docs-side a.active { border-left-color: var(--accent-2); color: var(--text); background: var(--panel); }
.dn-group { margin: 10px 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.docs-toc:empty { display: none; }
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.docs-pager a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); }
.docs-pager a:hover { border-color: var(--accent-2); }
.docs-pager .next { grid-column: 2; text-align: right; }
.docs-pager .muted { font-size: 12px; }
.docs-search { position: relative; margin: 4px 0 8px; }
.docs-search input { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-deep); color: var(--text); font: inherit; }
.docs-search input:focus { border-color: var(--accent-2); outline: none; }
.ds-results { position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); width: min(640px, 90vw); max-height: 70vh; overflow: auto; padding: 6px; border: 1px solid var(--line-box); border-radius: 10px; background: var(--panel-2); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.ds-hit { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.ds-hit:hover, .ds-hit:focus { background: var(--panel); }
.ds-title { font-weight: 600; }
.ds-where { font-size: 12px; color: var(--dim); }
.ds-snip { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ds-none { padding: 8px 10px; color: var(--muted); font-size: 14px; }
.c3only { color: var(--text); }
.c3only sup { color: var(--accent-text); font-size: 10px; }
.guide h2, .guide h3 { scroll-margin-top: 16px; }
@media (max-width: 1280px) { .docs-reader { grid-template-columns: 220px minmax(0, 1fr); } .docs-toc { display: none; } }
@media (max-width: 900px) { .docs-reader { grid-template-columns: minmax(0, 1fr); } .docs-side { position: static; max-height: none; } #docs-nav { display: none; } }
.docs h1, .guide h1 { font-family: var(--title); font-size: 34px; line-height: 1.15; font-weight: 300; margin: 0 0 10px; }
.docgroup { margin: 18px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.doclist .dpriv { margin-left: 8px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; color: var(--warn); vertical-align: 1px; }
.docs-back { display: inline-block; margin-bottom: 14px; color: var(--muted); text-decoration: none; font-size: 14px; }
.docs-back:hover { color: var(--text); }
@media (max-width: 860px) { .docs-body { padding: 16px; } }
.doclist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.doclist li { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: baseline; padding: 10px 12px; border-radius: 8px; background: var(--bg-deep); }
.doclist .dname { font-family: var(--mono); white-space: nowrap; }
.doclist .ddesc { color: var(--text-2); }
@media (max-width: 600px) { .doclist li { grid-template-columns: 1fr; gap: 2px; } }

/* Entity panel: the attribute shown on the map */
.attr .maplabel { width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--accent-2); cursor: pointer; }

/* Connect, left: the filter sections, each folding */
.fsec > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.fsec > summary::-webkit-details-marker { display: none; }
.fsec > summary h2::before { content: '▸ '; color: var(--muted); }
.fsec[open] > summary h2::before { content: '▾ '; }
.fsec-on { font-family: var(--mono, monospace); font-size: 12px; color: var(--accent-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.idform { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.idform .row { display: flex; gap: 8px; }
#label-zoom { width: 90px; vertical-align: middle; accent-color: var(--accent-2); }
#label-zoom-v { display: inline-block; min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ alerts */
.alarmbtn { display: inline-flex; align-items: center; gap: 7px; }
.alarmbtn .badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #FF4D5E; color: #0E1014; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.alarmbtn .badge.acked { background: var(--line) !important; color: var(--text-2); }
.alarmpop { width: min(520px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow: auto; }
.alarmpop .al-actions { display: flex; align-items: center; gap: 6px; }
.al-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.al-list .dim, .al-rules .rnote { color: var(--dim); }
.arow { display: flex; align-items: center; gap: 6px; border-left: 3px solid var(--sev); border-radius: 6px; background: var(--panel-2); }
.arow.acked { opacity: 0.6; }
.arow .amain { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 8px; align-items: center; padding: 7px 8px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; }
.arow .amain .at { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .amain .ae { grid-column: 2; color: var(--muted); font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .amain .atime { grid-row: 1; grid-column: 3; color: var(--dim); font-size: 12px; }
.arow .btn.small { margin-right: 6px; }
.adot { width: 10px; height: 10px; border-radius: 50%; background: var(--sev); box-shadow: 0 0 8px var(--sev); }
.arow:not(.acked) .adot { animation: c3pulse 1.4s ease-in-out infinite; }
.al-rules { margin-top: 10px; border-top: 1px solid var(--line); }
.rrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.rrow .rwhat { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rrow .rhow { grid-column: 1; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.rrow .btn { grid-column: 2; grid-row: 1 / span 3; }
.rrow .rfail { grid-column: 1; font-size: 12px; color: var(--bad); }
.rrow .rnote { grid-column: 1; font-size: 12px; }
.al-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.al-form input, .al-form select { min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-deep); color: var(--text-2); font-size: 13px; min-width: 0; }
.al-form #al-q { grid-column: 1 / -1; font-family: var(--mono); }
.al-form input:focus, .al-form select:focus { border-color: var(--accent-2); outline: none; }
.al-err { margin: 6px 0 0; color: var(--warn); font-size: 12px; }
.al-err:empty { display: none; }

.alarm-toasts { position: absolute; left: 50%; bottom: 58px; z-index: 9; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 6px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.atoast {
  pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 9px 14px;
  border: 1px solid var(--sev); border-left-width: 5px; border-radius: 10px; background: #161920F2; color: var(--text); text-align: left; cursor: pointer;
  box-shadow: 0 10px 30px #000A, 0 0 22px color-mix(in srgb, var(--sev) 35%, transparent); animation: c3toast 0.35s ease-out;
}
.atoast .sev { grid-row: 1 / span 2; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sev); }
.atoast .at { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atoast .ae { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes c3toast { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .atoast, .arow:not(.acked) .adot { animation: none; } }

/* ------------------------------------------------------------------ history */
details.history { border-top: 1px solid var(--line-soft); padding-top: 8px; }
details.history summary { cursor: pointer; font-size: 13px; color: var(--muted); }
details.history .hnote { margin-left: 8px; color: var(--dim); font-size: 12px; }
details.history .hwhy { margin: 6px 0; color: var(--dim); font-size: 12px; }
.hrow { padding: 6px 0; }
.hhead { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.hhead .k { font-weight: 600; }
.hhead .hv { font-family: var(--mono); color: var(--text-2); }
.spark { display: block; width: 100%; height: 44px; margin-top: 3px; }
.spark .sl { fill: none; stroke: var(--accent-text); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark .sa { fill: color-mix(in srgb, var(--accent-2) 16%, transparent); stroke: none; }
.spark .sd { fill: var(--accent-soft); }
.hrange { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.guide h2 { font-size: 1.05rem; margin: 22px 0 6px; }
.guide p, .guide li { line-height: 1.55; }
.guide pre { font-family: var(--mono); background: var(--bg-deep); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.guide code { font-family: var(--mono); }
.guide h3 { font-size: 15px; margin: 20px 0 6px; color: var(--text); }
.guide code { font-size: 0.9em; color: var(--accent-soft); }
.guide pre code, .guide pre { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.guide pre .c { color: var(--dim); }

/* Extreme performance - docs/extreme-performance.html */
.xp .lead { font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 760px; }
.xp h2 { display: flex; align-items: center; gap: 12px; margin: 40px 0 10px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-family: var(--title); font-size: 24px; font-weight: 400; scroll-margin-top: 16px; }
.xp-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; flex: none; }
.xp-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 6px; }
.xp-stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--bg-deep)), var(--bg-deep) 70%); }
.xp-x { font-family: var(--title); font-size: 44px; line-height: 1; font-weight: 500; color: var(--accent-soft); }
.xp-what { margin-top: 6px; font-weight: 600; color: var(--text); }
.xp-how { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.xp-note { font-size: 13px; margin: 0; }
.xp-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.xp-toc a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.xp-toc a:hover { border-color: var(--accent-2); color: var(--text); }
.xp-toc a span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); font-size: 12px; font-weight: 600; color: var(--accent-text); }

.xp-chart { margin: 18px 0; padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-deep); }
.xp-axis { display: flex; justify-content: space-between; margin: 0 84px 0 150px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11px; color: var(--dim); }
.xp-group { display: grid; grid-template-columns: 150px minmax(0, 1fr) 84px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.xp-group:last-of-type { border-bottom: 0; }
.xp-label { font-weight: 600; font-size: 14px; line-height: 1.3; }
.xp-label .muted { font-weight: 400; font-size: 12px; }
.xp-bars { display: flex; flex-direction: column; gap: 5px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 6 - 1px), var(--line-soft) calc(100% / 6 - 1px), var(--line-soft) calc(100% / 6)); }
.xp-bar { position: relative; width: var(--w); min-width: 4px; height: 22px; border-radius: 4px; }
.xp-bar span { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.xp-bar.off { background: var(--line-box); }
.xp-bar.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.xp-chart figcaption { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.xp-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: -1px; }
.xp-key:first-child { margin-left: 0; }
.xp-key.off { background: var(--line-box); }
.xp-key.on { background: var(--accent-2); }

.xp-scroll { overflow-x: auto; }
.xp-table td, .xp-table th { white-space: nowrap; }
.xp-table td:first-child { color: var(--text-2); }
.xp-table tr.gain b { color: var(--ok); }
.xp-table tr.cost td:not(:first-child) { color: var(--warn); }

.xp-callout { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent-2); border-radius: 8px; background: var(--panel-2); line-height: 1.55; }
.xp-callout.warn { border-left-color: var(--warn); }
.xp-out { white-space: pre-wrap; color: var(--ok) !important; }

.xp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 12px 0; }
.xp-wl { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-deep); }
.xp-wl h3 { margin-top: 0; }
.xp-wl .muted { font-size: 13px; line-height: 1.45; margin: 0 0 12px; }
.xp-run { display: grid; grid-template-columns: 112px minmax(0, 1fr) 96px; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.xp-run .xp-bar { height: 26px; }
.xp-run .xp-bar span { left: 8px; transform: translateY(-50%); color: var(--text); }
.xp-run .xp-p { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }
.xp-run.best > span:first-child { color: var(--text); font-weight: 600; }
.xp-wl p:last-child { font-size: 14px; color: var(--text-2); margin-bottom: 0; }

@media (max-width: 860px) {
  .xp-hero, .xp-pair { grid-template-columns: 1fr; }
  .xp-axis { margin-left: 96px; }
  .xp-group { grid-template-columns: 96px minmax(0, 1fr) 84px; }
  .xp-run { grid-template-columns: 90px minmax(0, 1fr); }
  .xp-run .xp-p { grid-column: 2; text-align: left; }
}
.gtable { border-collapse: collapse; width: 100%; margin: 8px 0; }
.gtable th, .gtable td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.gtable td:first-child { white-space: nowrap; }
@media (max-width: 600px) { .gtable td:first-child { white-space: normal; } }

/* Guides - the parts every guide shares (docs/*.html): a lead, numbered sections, callouts, link cards, options */
.guide .lead { font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 760px; }
.guide.steps h2 { display: flex; align-items: center; gap: 12px; margin: 36px 0 10px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-family: var(--title); font-size: 22px; font-weight: 400; }
.g-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 600; flex: none; }
.g-callout { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent-2); border-radius: 8px; background: var(--panel-2); line-height: 1.55; }
.g-callout.warn { border-left-color: var(--warn); }
.g-callout > :first-child { margin-top: 0; }
.g-callout > :last-child { margin-bottom: 0; }
.g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 14px 0; padding: 0; list-style: none; }
.g-cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-deep); text-decoration: none; color: var(--text); }
.g-cards a:hover { border-color: var(--accent-2); }
.g-cards a span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.g-opts { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.g-opts th, .g-opts td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); line-height: 1.45; }
.g-opts td:first-child { white-space: nowrap; font-family: var(--mono); font-size: 13px; color: var(--accent-soft); }
.g-opts .env { display: block; color: var(--dim); font-size: 12px; }
.g-scroll { overflow-x: auto; }
.guide pre .o { color: var(--ok); }
.guide figure.g-fig { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-deep); }
.guide figure.g-fig svg { display: block; width: 100%; height: auto; }
.guide figure.g-fig figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--dim); }
@media (max-width: 600px) { .g-opts td:first-child { white-space: normal; } }

/* API reference pages (docs/api-*.html, tools/apiRef.py): a header per h2, an entry per h3 - its summary, its
   declarations as written, its comment */
.guide.api h2 { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 19px; }
.guide.api h3 { margin: 26px 0 4px; font-size: 15px; }
.guide.api h3 code { color: var(--text); font-size: 15px; }
.guide.api .api-src { font-size: 13px; color: var(--dim); }
.guide.api .api-summary { margin: 0 0 8px; color: var(--text-2); }
.guide.api pre.api-decl { margin: 6px 0 10px; color: var(--text); }
.guide.api pre.api-note { background: none; border: none; border-left: 2px solid var(--line); border-radius: 0; padding: 2px 12px; color: var(--muted); }
.doclist .dmore { display: inline-flex; gap: 14px; margin-left: 14px; font-size: 13px; white-space: nowrap; }