/* ============================================================
   Madlanga Commission Files — v0.2
   Ink, brass and slate: the "Blueprint, restrained" design language.

   Two rules hold this together:
     · nothing saturated — every colour is mixed with grey, so the brass
       accent is the only thing on the page that is allowed to stand out;
     · one humanist sans, with tabular figures wherever numbers are compared.
   The eight entity colours sit about 30° apart on the hue wheel so they stay
   tellable apart in the graph, at low saturation rather than high.
   ============================================================ */

:root {
  --bg: #0e0f12;
  --bg-2: #14161b;
  --panel: #171a20;
  --panel-2: #1d2026;
  --border: #2a2d33;
  --border-soft: #212429;
  --text: #e8e4db;
  --text-dim: #b3ada1;
  --text-faint: #8b867c;    /* the quietest text that still meets WCAG AA on a panel */
  --accent: #c9a24b;        /* brass — the commission gold */
  --accent-2: #8fa4b6;      /* muted steel */
  --brass-rgb: 201, 162, 75;/* the accent as channels, for tints and rims */

  /* entity colours — quiet, but still distinguishable */
  --person: #7fa8bd;
  --organization: #a193c4;
  --document: #aab86e;
  --event: #c48aa4;
  --topic: #86b28f;
  --location: #8f8f8c;
  --case: #bf7f66;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  --font: -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must beat layout rules such as
   `.panel-empty { display: grid }` — otherwise the empty state never
   disappears and the node details are pushed below the fold. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2e3137; border-radius: 8px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: #3a3e45; }
::-webkit-scrollbar-track { background: transparent; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- Top bar ---------------- */
.topbar {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  background: rgba(14,15,18,0.96);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; }
.brand:hover { text-decoration: none; color: inherit; }
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.brand-text { min-width: 0; }
.brand-text h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: #ece7db;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text p {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 560px;
}

.topbar-actions { display: flex; align-items: center; gap: 12px; }

.search-wrap { position: relative; }
.search-wrap .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
}
#search {
  width: 300px;
  padding: 9px 12px 9px 34px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, width 0.2s;
}
#search:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(143,164,182,0.2); width: 360px; }
#search::placeholder { color: var(--text-faint); }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  max-height: 420px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 50;
}
.search-results .sr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.search-results .sr-item:hover { background: var(--panel-2); }
.search-results .sr-empty { padding: 14px; color: var(--text-faint); text-align: center; font-size: 13px; }
.sr-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.sr-label { font-weight: 600; font-size: 13px; }
.sr-role { color: var(--text-faint); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }

.stats {
  display: flex; gap: 8px;
  padding: 7px 11px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stats b { color: var(--text); font-weight: 700; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent-2); }

.nav-link {
  display: grid;
  place-items: center;
  height: 36px;
  padding: 0 13px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.nav-link:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* ---------------- Layout ---------------- */
.layout { display: flex; height: calc(100vh - 66px); }
.graph-stage { position: relative; flex: 1 1 auto; min-width: 0; }
#cy { position: absolute; inset: 0; }

/* ---------------- Legend ---------------- */
.legend {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(23,26,32,0.94);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 236px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  z-index: 15;
  box-shadow: var(--shadow);
}
.legend-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 7px;
}
.mini-btn {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.mini-btn:hover { color: var(--text); }
.legend-body { display: block; }
.legend-section + .legend-section { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-soft); }
.legend-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 5px;
}
.legend-row { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 2px 0; }
.legend-row input { display: none; }
.legend-row.sub { padding-left: 14px; }
.legend-row.layer .lname { color: var(--text); font-weight: 600; }
.legend-row.layer, .legend-row.edge { margin-top: 1px; }
.legend-row.partial .lname::after { content: ' ·'; color: var(--accent); font-weight: 700; }
.legend-row .swatch { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.legend-row .swatch.line { width: 15px; height: 3px; border-radius: 2px; }
.swatch-multi { display: flex; gap: 2px; flex: 0 0 auto; }
.swatch-multi i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.legend-row .lname { font-size: 12.5px; color: var(--text-dim); }
.legend-row .lcount { margin-left: auto; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.legend-row.off { opacity: 0.42; }
.legend-row.off .lname { text-decoration: line-through; }

/* ---------------- Layout controls ---------------- */
.layout-controls {
  position: absolute;
  bottom: 14px; left: 14px;
  display: flex; gap: 6px;
  background: rgba(23,26,32,0.94);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 6px;
  z-index: 15;
}
.chip {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { color: var(--text); }
.chip.active { background: var(--panel-2); color: var(--text); border-color: var(--border); }

.hint {
  position: absolute;
  bottom: 18px; right: 16px;
  font-size: 11.5px;
  color: var(--text-faint);
  background: rgba(11,13,17,0.72);
  padding: 6px 10px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 14;
}

/* ---------------- Side panel ---------------- */
.side-panel {
  width: 384px;
  flex: 0 0 auto;
  background: var(--panel);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  transition: width 0.22s ease, opacity 0.2s;
  z-index: 18;
}
.side-panel.collapsed { width: 0; border-left: none; overflow: hidden; }

.panel-empty { height: 100%; display: grid; place-items: center; padding: 32px; }
.panel-empty-inner { text-align: center; max-width: 260px; }
.empty-glyph { opacity: 0.85; margin-bottom: 10px; }
.panel-empty h2 { font-family: var(--serif); font-weight: 600; font-size: 19px; margin: 0 0 8px; }
.panel-empty p { color: var(--text-dim); font-size: 13px; margin: 0; }

.panel-content { padding: 0; animation: fadeIn 0.18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pc-hero {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.pc-badges { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
  border: 1px solid;
}
.badge.type { background: rgba(255,255,255,0.04); }
.badge.group { background: rgba(var(--brass-rgb),0.12); color: var(--accent); border-color: rgba(var(--brass-rgb),0.35); }
.pc-title { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0 0 6px; }
.pc-role { font-size: 13px; color: var(--accent); font-weight: 600; margin: 0 0 4px; }
.pc-aliases { font-size: 12.5px; color: var(--text-faint); font-style: italic; }

.pc-section { padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.pc-section:last-child { border-bottom: none; }
.pc-section h3 {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--text-faint);
}
/* Collapsible section headers (About / Details / Hearing record / ... ) */
.pc-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 0 0 10px; padding: 0;
  background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--font);
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--text-faint);
}
.pc-sec-head:hover { color: var(--text-dim); }
.pc-sec-head:hover .pc-sec-chev { color: var(--accent); }
.pc-sec-chev { transition: transform 0.15s; font-size: 10px; }
.pc-section.collapsed .pc-sec-head { margin-bottom: 0; }
.pc-section.collapsed .pc-sec-body { display: none; }
.pc-section.collapsed .pc-sec-chev { transform: rotate(-90deg); }
.pc-summary { font-size: 13.5px; color: var(--text-dim); margin: 0; line-height: 1.6; }

.kv { display: flex; flex-direction: column; gap: 6px; }
.kv-row { display: flex; gap: 12px; font-size: 12.5px; }
.kv-key { flex: 0 0 110px; color: var(--text-faint); text-transform: capitalize; }
.kv-val { color: var(--text-dim); word-break: break-word; }

.conn-list { display: flex; flex-direction: column; gap: 4px; }
.conn-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.conn-item:hover { background: var(--panel-2); }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.conn-label { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn-rel { margin-left: auto; font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }

.src-list { display: flex; flex-direction: column; gap: 7px; }
.src-item { font-size: 12.5px; }
.src-item a { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* ---------------- Profile: stat chips ---------------- */
.pc-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pc-stats .stat {
  font-size: 11.5px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.pc-stats .stat b { color: var(--text); font-weight: 700; }
.pc-stats .stat.hot {
  color: var(--accent);
  background: rgba(var(--brass-rgb),0.10);
  border-color: rgba(var(--brass-rgb),0.34);
}
.pc-stats .stat.hot b { color: var(--accent); }

/* ---------------- Profile: appearance timeline ---------------- */
.timeline { position: relative; display: flex; flex-direction: column; gap: 2px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 4px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border);
}
.tl-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 6px 8px 6px 0;
  border-radius: 8px;
  cursor: pointer;
}
.tl-item:hover { background: var(--panel-2); }
.tl-dot {
  position: relative; z-index: 1;
  width: 9px; height: 9px; flex: 0 0 auto;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 3px var(--panel);
}
.tl-item.adverse .tl-dot { background: #b8706a; }
.tl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tl-label { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-meta { font-size: 11px; color: var(--text-faint); }

/* ---------------- Profile: relationship items ---------------- */
.conn-item { align-items: flex-start; }
.conn-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.conn-item .conn-label { display: block; }
.ci-role { font-weight: 400; color: var(--text-faint); font-size: 11.5px; }
.conn-body .conn-rel { margin-left: 0; max-width: 100%; font-size: 10.5px; }
.conn-more { font-size: 11.5px; color: var(--text-faint); padding: 6px 9px; }


/* Node/edge type colors are injected by JS as inline styles,
   but define base helpers here. */

/* ---------------- Mobile layer chooser ---------------- */
.mobile-only { display: none; }
.layer-chooser {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(10, 11, 13, 0.93);
  padding: 20px;
}
.chooser-card {
  width: 100%; max-width: 430px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}
.chooser-mark { margin-bottom: 6px; }
.chooser-card h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: 22px; margin: 0 0 8px; color: #ece7db;
}
.chooser-sub { color: var(--text-dim); font-size: 13px; line-height: 1.55; margin: 0 0 16px; }
.chooser-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chooser-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; color: var(--text);
  font-family: var(--font); font-size: 13px; text-align: left;
  transition: border-color 0.15s, transform 0.15s;
}
.chooser-option:hover, .chooser-option:focus-visible { border-color: var(--accent); transform: translateY(-1px); outline: none; }
.co-swatches { display: flex; gap: 3px; }
.co-swatches i { width: 9px; height: 9px; border-radius: 3px; display: block; }
.co-name { font-weight: 600; }
.co-count { color: var(--text-faint); font-size: 11.5px; }
.chooser-all {
  margin-top: 12px; width: 100%; padding: 11px;
  background: transparent; border: 1px dashed var(--border);
  color: var(--text-dim); border-radius: 10px;
  font-family: var(--font); font-size: 12.5px; cursor: pointer;
}
.chooser-all:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------- Phone control sheet ----------------
   On a phone the graph is the screen. Everything that would otherwise float
   over the canvas — the section links, the layer picker, the arrangement chips
   and the legend — is collected into one sheet that slides up from the bottom
   behind the ☰ button, so the record itself is never covered. The sheet is
   inert on larger screens: its button is .mobile-only and nothing links to it
   from the desktop chrome. */
.mobile-sheet {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 11, 13, 0.72);
}
.mobile-sheet[hidden] { display: none; }
.sheet-card {
  width: 100%; max-width: 520px; max-height: 84vh; overflow-y: auto;
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head strong { font-size: 15px; color: var(--text); }
.sheet-group { margin-top: 16px; }
.sheet-group h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.sheet-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-links a {
  padding: 9px 14px; border-radius: 9px; font-size: 13.5px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
  text-decoration: none;
}
.sheet-links a:hover { border-color: var(--accent); color: var(--accent); }
.sheet-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* The legend keeps its desktop styling everywhere else; inside the sheet it
   stops being a floating card and simply fills the row. */
.sheet-legend .legend {
  display: block; position: static; width: auto; max-width: none;
  top: auto; left: auto; margin: 0;
  background: var(--bg-2); border: 1px solid var(--border);
}

/* ---------------- Small screens ---------------- */
@media (max-width: 860px) {
  .mobile-only { display: block; }
  html, body { overflow: auto; }
  .layout-controls { flex-wrap: wrap; max-width: calc(100vw - 24px); }
  .topbar { height: auto; min-height: 60px; flex-wrap: wrap; padding: 10px 12px; row-gap: 8px; }
  .topbar-actions { flex-wrap: wrap; gap: 8px; }
  .search-wrap { flex: 1 1 100%; }
  #search { width: 100%; }
  #search:focus { width: 100%; }
  .layout { flex-direction: column; height: auto; }
  .graph-stage { position: relative; height: 62vh; flex: 0 0 auto; }
  .side-panel { width: 100%; height: auto; border-left: none; border-top: 1px solid var(--border); }
  .panel-empty { min-height: 240px; }
}

/* On a phone the canvas matters more than the chrome. The figures chip goes (the
   same numbers are on the landing page, and in the legend), the long formal name
   under the title goes, and the bar tightens so the graph gets the screen. */
@media (max-width: 700px) {
  .stats { display: none; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-text h1 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-text p { display: none; }
  .chip { padding: 6px 9px; font-size: 12px; }
  .hint { display: none; }

  /* ONE row of chrome instead of three. The bar stops wrapping, and the row of
     section links moves into the ☰ sheet, so the graph keeps the difference. */
  .topbar { flex-wrap: nowrap; height: 52px; min-height: 0; padding: 6px 10px; row-gap: 0; gap: 8px; }
  .topbar-actions { flex-wrap: nowrap; gap: 6px; }
  .nav-link { display: none; }

  /* The search field costs a whole row on a phone, so it stays folded away
     behind the magnifier button and only takes a row while it is in use. */
  .search-wrap { display: none; flex: 1 1 100%; order: 10; margin-top: 8px; }
  body.search-open .search-wrap { display: block; }
  body.search-open .topbar { flex-wrap: wrap; height: auto; }
  body.search-open #search { width: 100%; }

  /* Nothing floats over the canvas: the legend and the arrangement chips are
     in the sheet now. */
  .legend, .layout-controls { display: none; }

  /* The graph gains the height the third row of chrome was using. */
  .graph-stage { height: 72vh; }
}