/* =========================================================================
   Hamsho Estate Register

   An analyst's workbench, not a news site. The neutrals are slate — cool, and
   biased blue rather than a default mid-grey — with a single oxblood accent
   used only on chrome: rules, eyebrows, active states, the wordmark. Oxblood
   because it reads as archival, like a classification stamp, and because it
   leaves the whole green/blue/amber range free for the thing that actually
   matters on this site: how strong a claim is.

   Confidence is a semantic colour system, deliberately separate from the
   accent. Nothing else on the page is allowed to use those four hues.

   No webfonts. The three roles — serif for argument, sans for prose, mono for
   records — come from system stacks, so there are no binary assets to ship and
   no silent fallback if a font file fails to load. Mono is not decorative
   here: most of this register is domains, IPs and timestamps.
   ========================================================================= */

:root {
  --bg:         #E8EBEF;
  --surface:    #FFFFFF;
  --surface-2:  #F2F5F8;
  --surface-3:  #E4E9EF;
  --line:       #D2D9E1;
  --line-strong:#B7C1CC;

  --text:       #141E29;
  --text-2:     #3D4B59;
  --muted:      #66727F;

  --accent:     #8E3B46;
  --accent-bg:  #F3E3E5;
  --on-accent:  #FFFFFF;

  --ok:      #1A6349;  --ok-bg:      #DCEBE4;  --ok-line:      #9BC7B4;
  --strong:  #215C86;  --strong-bg:  #DAE7F0;  --strong-line:  #9BBCD5;
  --soft:    #825C11;  --soft-bg:    #F1E8D3;  --soft-line:    #D3BE8C;
  --struck:  #616C79;  --struck-bg:  #E2E6EA;  --struck-line:  #BCC4CC;

  --shadow: 0 1px 2px rgba(20,30,41,.05), 0 14px 32px -16px rgba(20,30,41,.16);

  --serif: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --measure: 74rem;
  --radius: 10px;
  --radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0C131A;
    --surface:    #121B24;
    --surface-2:  #17212C;
    --surface-3:  #1E2933;
    --line:       #26323E;
    --line-strong:#36444F;

    --text:       #E3E9EF;
    --text-2:     #B6C1CC;
    --muted:      #8B98A6;

    --accent:     #CE7C85;
    --accent-bg:  #2C171A;
    --on-accent:  #1A0C0E;

    --ok:      #6ACFA4;  --ok-bg:      #103026;  --ok-line:      #2C5C4A;
    --strong:  #7CBEE8;  --strong-bg:  #0F2735;  --strong-line:  #2A4C63;
    --soft:    #DDB25C;  --soft-bg:    #2F250F;  --soft-line:    #5A4823;
    --struck:  #98A3B0;  --struck-bg:  #1D242C;  --struck-line:  #333D47;

    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 16px 36px -18px rgba(0,0,0,.65);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Several filterable items (.card, .node) set their own `display`, which
   otherwise ties the UA stylesheet's [hidden] on specificity and loses —
   author styles beat the UA stylesheet regardless of selector order. app.js
   toggles the hidden attribute to filter; this keeps it authoritative. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
a:hover { border-bottom-color: var(--accent); }

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

.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus {
  inset-inline-start: 1rem; top: 1rem; z-index: 60;
  background: var(--text); color: var(--bg);
  padding: .5rem .9rem; border-radius: var(--radius); border: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- top bar ------------------------------------------------------------ */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  padding: 1rem 1.5rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__mark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  color: var(--text); border: 0;
}
.topbar__glyph {
  width: 14px; height: 14px; flex: none;
  background:
    linear-gradient(var(--accent) 0 0) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--text) 0 0) 0 6px / 66% 3px no-repeat,
    linear-gradient(var(--text) 0 0) 0 12px / 85% 3px no-repeat;
}
.topbar__nav { display: flex; gap: .15rem; flex-wrap: wrap; }
.topbar__nav a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: .42rem .8rem; border-radius: 20px; border: 0;
}
.topbar__nav a:hover { background: var(--surface-3); color: var(--text); }
.topbar__nav a[aria-current="page"] { color: var(--accent); background: var(--accent-bg); }

/* --- page scaffolding --------------------------------------------------- */

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }

.pagehead {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.pagehead__inner {
  max-width: var(--measure); margin: 0 auto; padding: 3.4rem 1.5rem 2.8rem;
  display: flex; flex-direction: column; gap: 1.15rem;
}
.pagehead h1 { font-size: clamp(2.1rem, 5.2vw, 3.3rem); letter-spacing: -.025em; }
.pagehead .standfirst { font-size: 1.1rem; line-height: 1.65; color: var(--text-2); max-width: 66ch; }

.rulerow { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; align-items: baseline; }
.rulerow .rule { flex: 1; height: 1px; background: var(--line); min-width: 2rem; }

section { padding: 4rem 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }

.sechead { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2.1rem; max-width: 72ch; }
.sechead h2 { font-size: clamp(1.5rem, 2.9vw, 2rem); letter-spacing: -.018em; }
.sechead p { color: var(--text-2); font-size: .99rem; line-height: 1.6; }

.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 1rem; color: var(--text-2); }
.prose h2 { font-size: 1.4rem; margin-top: .9rem; color: var(--text); }
.prose h3 { font-size: 1.13rem; margin-top: .6rem; color: var(--text); }
.prose ul, .prose ol { margin: 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.prose code { font-family: var(--mono); font-size: .87em; background: var(--surface-3); padding: .1em .35em; border-radius: 2px; }
.prose blockquote {
  margin: 0; padding: .15rem 0 .15rem 1rem;
  border-inline-start: 2px solid var(--accent);
  font-family: var(--serif); font-style: italic; color: var(--text);
}

/* --- stats -------------------------------------------------------------- */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--surface); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.stat b {
  font-family: var(--mono); font-size: 1.4rem; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text);
}
.stat span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* --- confidence chips --------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 20px; border: 1px solid; white-space: nowrap;
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.chip--plain::before { display: none; }
.chip a, a .chip { border: 0; }

.c-confirmed  { color: var(--ok);     background: var(--ok-bg);     border-color: var(--ok-line); }
.c-strong     { color: var(--strong); background: var(--strong-bg); border-color: var(--strong-line); }
.c-suggestive { color: var(--soft);   background: var(--soft-bg);   border-color: var(--soft-line); }
.c-struck     { color: var(--struck); background: var(--struck-bg); border-color: var(--struck-line); }
.c-neutral    { color: var(--muted);  background: var(--surface-3); border-color: var(--line); }

/* --- cards -------------------------------------------------------------- */

/* align-items:start rather than the default stretch: a card with a long pull
   quote would otherwise force every card beside it to the same height, and a
   short finding next to a long one reads as missing content. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; align-items: start; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .75rem;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cards .card:hover, .grid2 .card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.card h3 { font-size: 1.15rem; }
.card h3 a { color: inherit; border: 0; }
.card h3 a:hover { color: var(--accent); }
.card p { font-size: .93rem; color: var(--text-2); }
.card__meta { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.5; }
.card__tags { display: flex; flex-wrap: wrap; gap: .3rem; }

.quote {
  font-family: var(--serif); font-size: .99rem; font-style: italic; color: var(--text);
  border-inline-start: 2px solid var(--accent); padding: .1rem 0 .1rem .85rem;
}
.quote cite {
  display: block; font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .45rem;
}

/* A scanned/photographed primary document, linked to the quote above it. */
.evidence {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2);
}
.evidence img { display: block; width: 100%; height: auto; max-height: 26rem; object-fit: contain; background: var(--surface-3); }
.evidence__cap {
  display: block; padding: .55rem .8rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid var(--line);
}
.evidence:hover .evidence__cap { color: var(--accent); }

/* A finding with more than one supporting image (a multi-page memo) gets a
   grid of smaller thumbnails instead of one full-width scan. */
.evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.evidence-grid .evidence img { max-height: 14rem; }

/* --- key/value blocks --------------------------------------------------- */

.kv { display: grid; grid-template-columns: 8.5rem 1fr; gap: .35rem 1rem; margin: 0; }
.kv dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding-top: .22rem;
}
.kv dd { margin: 0; color: var(--text); font-size: .93rem; word-break: break-word; }
.kv dd.mono { font-family: var(--mono); font-size: .82rem; }

/* --- tables ------------------------------------------------------------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .87rem; }
th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: left; white-space: nowrap;
  padding: .7rem .9rem; border-bottom: 1px solid var(--line-strong); background: var(--surface-2);
  position: sticky; top: 0;
}
td { padding: .6rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.mono, .mono { font-family: var(--mono); font-size: .8rem; }
td.dom { font-family: var(--mono); font-size: .8rem; color: var(--text); white-space: nowrap; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .8rem; }
.empty { padding: 1.6rem .9rem; text-align: center; color: var(--muted); font-family: var(--mono); font-size: .8rem; }

/* --- per-domain research disclosure --------------------------------------
   A collapsed detail row under a domain, opened by a button in its own
   column. Kept out of the filter system's [data-item] set on purpose; this
   rule instead forces a still-open detail row shut the moment its parent
   row is filtered out, so the two can't show contradictory states. */
tr[data-item][hidden] + tr.domain-detail { display: none !important; }
.domain-toggle {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line);
  padding: .3rem .6rem; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
}
.domain-toggle:hover { background: var(--surface-3); color: var(--text); }
.domain-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.domain-detail td { background: var(--surface-2); padding: 1rem 1.2rem 1.2rem; }
.domain-research__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; gap: 1rem; flex-wrap: wrap; }
.domain-research__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }

/* --- controls ----------------------------------------------------------- */

.controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.search {
  flex: 1 1 16rem; min-width: 12rem; display: flex; align-items: center; gap: .55rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; padding: .5rem .9rem;
}
.search svg { flex: none; color: var(--muted); }
.search input {
  border: 0; background: transparent; color: var(--text);
  font-family: var(--mono); font-size: .82rem; width: 100%; outline: none;
}
.filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.filters button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
  padding: .4rem .75rem; border-radius: 20px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.filters button:hover { color: var(--text); border-color: var(--line-strong); }
.filters button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.count { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .05em; margin-top: .6rem; }

/* --- relations graph ------------------------------------------------------
   The landing page's signature element. Colour marks sanctions status (the
   same convention macros.njk's sanctionChip already uses); line style is the
   whole point — solid means documented corporate control, dashed means a
   family relation the record does not claim as control. */

.graph {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem 1.25rem .5rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
}
.graph svg { display: block; width: 100%; min-width: 42rem; height: auto; touch-action: pan-x pan-y; }

/* Below the SVG's min-width, the diagram is wider than the card and pans
   sideways — a fingertip on a touchscreen can't tell that from a static
   screenshot, so a pinned hint makes the pan discoverable. It sits absolute
   within the scroll container itself (not the scrolled content), so it stays
   put at the visible edge as someone scrolls, and disappears once they have
   scrolled somewhere close to the end. JS toggles `graph--scrollable`. */
@media (max-width: 44rem) {
  .graph--scrollable::after {
    content: "swipe to see the full diagram \2192";
    position: absolute; top: 1.6rem; inset-inline-end: 1.4rem;
    font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
    color: var(--muted); background: var(--surface);
    padding: .3rem .65rem; border-radius: 20px; border: 1px solid var(--line);
    box-shadow: var(--shadow); pointer-events: none;
  }
}

/* Shape encodes what a node *is* — circle: company, diamond: person, square:
   server — while colour keeps encoding sanctions status across all of them. */
.graph__node circle, .graph__node--person rect { fill: var(--surface-3); stroke: var(--surface); stroke-width: 2px; cursor: pointer; }
.graph__node--designated :is(circle, rect) { fill: var(--ok); }
.graph__node--named :is(circle, rect) { fill: var(--strong); }
.graph__node--other :is(circle, rect) { fill: var(--surface-3); stroke: var(--line-strong); }
.graph__node text {
  font-family: var(--mono); font-size: 9.5px; fill: var(--text-2); cursor: pointer;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
  opacity: 0;
}
.graph__node, .graph__edge, .graph__node text { transition: opacity .15s ease; }

/* At rest, only hub nodes (the entities with the most links) carry a visible
   label — labelling all ~40 nodes at once is unreadable. Every other label
   appears on demand: hover/focus that node, or focus a neighbour of it. */
.graph__node--hub text,
.graph__node--show-label text,
.graph__node:hover text,
.graph__node:focus-visible text { opacity: 1; }

.graph__node:hover :is(circle, rect), .graph__node:focus-visible :is(circle, rect) { stroke: var(--accent); stroke-width: 2.5px; }
.graph__node:hover text, .graph__node:focus-visible text { fill: var(--text); font-weight: 600; }
.graph__node--dim { opacity: .16; }

.graph__edge { stroke: var(--line-strong); stroke-width: 1.4; }
.graph__edge--family { stroke-dasharray: 5 4; }
.graph__edge--dim { opacity: .1; }

.graph__legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center;
  padding: .9rem .1rem 1rem; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; color: var(--muted);
}
.graph__legenditem { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.graph__swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.graph__swatch--designated { background: var(--ok); }
.graph__swatch--named { background: var(--strong); }
.graph__swatch--other { background: var(--surface-3); border: 1px solid var(--line-strong); }
.graph__line { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--line-strong); flex: none; }
.graph__line--family { border-top-style: dashed; }
.graph__line--infra { border-top-style: dotted; }
.graph__fallback { font-size: .82rem; color: var(--muted); padding: 0 .1rem 1rem; }

/* Pinned-node relations panel — filled by graph.js when a node is clicked.
   Sticky on the inline axis so it stays in view while the (wider-than-screen)
   diagram above it is panned sideways. */
.graph__panel {
  position: sticky; inset-inline-start: 0;
  margin: .35rem 0 .9rem; padding: .75rem .9rem .8rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.graph__panelhead { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.graph__paneltitle { font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--text); }
.graph__paneltitle:hover { color: var(--accent); text-decoration: underline; }
.graph__panelstatus { font-family: var(--mono); font-size: .68rem; letter-spacing: .03em; color: var(--muted); }
.graph__panelclose {
  margin-inline-start: auto; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 .15rem;
}
.graph__panelclose:hover { color: var(--text); }
.graph__panellist {
  list-style: none; margin: .55rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .2rem .9rem;
  font-size: .84rem;
}
.graph__panellist a { color: var(--text); }
.graph__panelkind { font-family: var(--mono); font-size: .66rem; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.graph__panelopen { display: inline-block; margin-top: .6rem; font-size: .8rem; font-weight: 600; }

/* Infrastructure hubs (the shared servers) and their fan-in edges — the third
   line style, and the register's actual thesis: many entities, one machine.
   Hubs are squares and always labelled; the dotted edges are drawn faint so
   the control/family structure still reads on top of them. */
.graph__node--infra rect { fill: var(--text-2); stroke: var(--surface); stroke-width: 2px; cursor: pointer; }
.graph__node--infra text { opacity: 1; fill: var(--text); font-weight: 700; }
.graph__node--infra:hover rect, .graph__node--infra:focus-visible rect { stroke: var(--accent); stroke-width: 2.5px; }
.graph__edge--infra { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 1.5 4; opacity: .4; }
.graph__swatch--infra { border-radius: 2px; background: var(--text-2); }
.graph__swatch--person { width: 8px; height: 8px; border-radius: 1px; background: var(--surface-3); border: 1px solid var(--line-strong); transform: rotate(45deg); }

/* Faint cluster labels, painted behind the nodes so grouped blobs read as
   named neighbourhoods rather than an undifferentiated cloud. */
.graph__clusterlabel {
  font-family: var(--mono); font-size: 12px; letter-spacing: .07em;
  fill: var(--muted); text-transform: uppercase; opacity: .55;
}

/* --- ownership & family trees (landing page, section 02) ------------------ */
.subhead { margin: 2.6rem 0 1.1rem; max-width: 72ch; display: flex; flex-direction: column; gap: .5rem; }
.subhead h3 { font-size: 1.22rem; letter-spacing: -.01em; }
.subhead p { color: var(--text-2); font-size: .95rem; line-height: 1.55; }
.trees .card { align-self: start; }

/* Indented tree: a holding at the root, subsidiaries nested beneath with a
   guide line. Scales to many children and wraps cleanly on narrow screens. */
.tree, .tree__children { list-style: none; }
.tree__children { margin-left: .55rem; padding-left: .95rem; border-left: 1px solid var(--line); }
.tree__node { position: relative; margin: .3rem 0; }
.tree__children > .tree__node::before {
  content: ""; position: absolute; left: -.95rem; top: .72em; width: .75rem; height: 1px; background: var(--line);
}
.tree__label { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .5rem; border: 0; }
.tree__label:hover .tree__name { text-decoration: underline; }
.tree__name { color: var(--text); font-weight: 500; }
.tree__node--holding > .tree__label .tree__name { font-weight: 700; }
.tree__type { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }

/* Family: one principal, relatives as a wrapped row of chips — related_to is
   flat and symmetric, so there is nothing deeper to nest. */
.famtree { display: flex; flex-direction: column; gap: .9rem; }
.famtree__root {
  align-self: start; display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.12rem; font-weight: 700; color: var(--text); border: 0;
  padding-bottom: .85rem; border-bottom: 1px solid var(--line);
}
.famtree__members { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.famtree__member a {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .4rem .65rem;
}
.famtree__member a:hover { border-color: var(--line-strong); }
.famtree__member .tree__name { font-weight: 500; }

/* A handful of entities carry a decorative alternate name (data: hover_alt).
   Both spans occupy the same grid cell so the swap has nothing to reflow —
   only opacity moves. The real name (.alt-name__a) is what gets selected,
   copied and read by a screen reader; .alt-name__b is aria-hidden. */
.alt-name { display: inline-grid; }
.alt-name__a, .alt-name__b { grid-area: 1 / 1; transition: opacity .18s ease; }
.alt-name__b { opacity: 0; font-family: var(--serif); text-align: start; }
.alt-name:hover .alt-name__a, .alt-name:focus-within .alt-name__a { opacity: 0; }
.alt-name:hover .alt-name__b, .alt-name:focus-within .alt-name__b { opacity: 1; }

/* --- timeline ----------------------------------------------------------- */

.tl__row { display: grid; grid-template-columns: 7rem 1fr; gap: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.tl__row:first-child { border-top: 0; }
.tl__date { font-family: var(--mono); font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.tl__body { display: flex; flex-direction: column; gap: .45rem; }
.tl__body h3 { font-size: 1.02rem; }
.tl__body p { font-size: .9rem; color: var(--text-2); }
.doms { display: flex; flex-wrap: wrap; gap: .35rem; }
.doms code, code.tag {
  font-family: var(--mono); font-size: 11.5px; background: var(--surface-3);
  border: 1px solid var(--line); padding: .12rem .38rem; border-radius: 2px; color: var(--text);
}
.doms a { border: 0; }
.flag {
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--soft-bg); border: 1px solid var(--soft-line); color: var(--soft);
  padding: .18rem .45rem; border-radius: 2px;
}

/* --- callouts ----------------------------------------------------------- */

.caution {
  background: var(--soft-bg); border: 1px solid var(--soft-line); border-radius: var(--radius);
  padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem;
}
.caution h3 { font-size: 1.05rem; color: var(--soft); }
.caution p { font-size: .92rem; color: var(--text-2); }

.lead {
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent); border-radius: 3px;
  padding: .95rem 1.1rem; display: flex; flex-direction: column; gap: .4rem;
}
.lead h3 { font-size: 1rem; }
.lead p { font-size: .9rem; color: var(--text-2); }

/* --- source list -------------------------------------------------------- */

.sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.sources li { display: flex; flex-direction: column; gap: .12rem; font-size: .92rem; }
.sources .src__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--muted); }

/* --- Arabic shadow toggle ------------------------------------------------
   A single global control (topbar button, see layout.njk/app.js) flips
   html[data-lang="ar"]; every bilingual field on the page — built with the
   `bi()` macro, plain [data-lang="en"]/[data-lang="ar"] siblings — switches
   at once. A field with no Arabic in data/ar/ is emitted untagged by `bi()`
   and simply ignores the toggle, staying in English. */

html:not([data-lang="ar"]) [data-lang="ar"] { display: none; }
html[data-lang="ar"] [data-lang="en"] { display: none; }
/* Scoped to content, not html[data-lang="ar"] itself — the page chrome
   (topbar, nav) stays LTR regardless of the toggle. */
span[data-lang="ar"], blockquote[data-lang="ar"] { direction: rtl; }

.lang-toggle {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  padding: .42rem .8rem; border-radius: 20px; cursor: pointer;
}
.lang-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.lang-toggle[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.i18n__quote {
  margin: .4rem 0 0; padding: .5rem .8rem;
  border-inline-end: 2px solid var(--accent);
  background: var(--surface-2); border-radius: var(--radius-sm);
  font-style: normal; color: var(--text);
}

/* --- entity logo(s) ------------------------------------------------------
   Old corporate marks, mostly transparent PNGs designed for a light page —
   given a fixed white card regardless of theme so they stay legible in dark
   mode rather than washing out against it. */
.entity-logos { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.entity-logo {
  display: inline-flex; align-items: center; padding: .7rem 1.1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.entity-logo img { display: block; height: 4rem; width: auto; max-width: 16rem; object-fit: contain; }

/* Small badge on an entity's card in the index grid — first logo only. */
.card__logo {
  display: inline-flex; align-items: center; padding: .4rem .65rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  align-self: flex-start;
}
.card__logo img { display: block; height: 2rem; width: auto; max-width: 8rem; object-fit: contain; }

/* A person's photo (data: photo) — round portrait, unlike the rectangular
   logo treatment above, so the two read as distinct kinds of image at a
   glance rather than a company mark and a face sharing one visual language. */
.person-photo {
  display: block; width: 5.5rem; height: 5.5rem; border-radius: 50%;
  overflow: hidden; border: 1px solid var(--line); margin-bottom: .2rem;
}
.person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.card__photo {
  display: block; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  overflow: hidden; border: 1px solid var(--line); align-self: flex-start;
}
.card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- record header ------------------------------------------------------ */

.rec__back { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.rec__aka { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.rec__tags { display: flex; flex-wrap: wrap; gap: .35rem; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack--tight { gap: .6rem; }

.linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; font-size: .93rem; }
.linklist li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }

/* --- footer ------------------------------------------------------------- */

.foot {
  max-width: var(--measure); margin: 0 auto;
  padding: 2.2rem 1.5rem 3.5rem;
  display: flex; flex-direction: column; gap: .6rem;
  color: var(--muted); font-size: .84rem;
  border-top: 1px solid var(--line);
}
.foot__note { color: var(--muted); }

/* --- responsive & motion ------------------------------------------------ */

@media (max-width: 44rem) {
  .tier, .tl__row { grid-template-columns: 1fr; gap: .5rem; }
  .kv { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .kv dt { padding-top: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}