/* Semitic tree — bespoke page, palette mirrored from fawaid quartz-overrides.
   Light/dark via prefers-color-scheme. Arabic-first (RTL); the SVG stays LTR. */

:root {
  --light: #faf8f8;
  --lightgray: #e5e5e5;
  --gray: #b8b8b8;
  --darkgray: #4e4e4e;
  --dark: #2b2b2b;
  --secondary: #284b63;   /* links / emphasis */
  --tertiary: #84a59d;    /* hover / highlight */
  --highlight: rgba(143, 159, 169, 0.15);
  --card: #ffffff;
  --contested: #e8590c;   /* orange — contested edges */
  --attested: #2ca25f;    /* green — attested-at-marker */
  --inferred: #e6b800;    /* gold — inferred-at-marker */
  --shadow: rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --light: #161618;
    --lightgray: #393639;
    --gray: #646464;
    --darkgray: #d4d4d4;
    --dark: #ebebec;
    --secondary: #7b97aa;
    --tertiary: #84a59d;
    --highlight: rgba(143, 159, 169, 0.15);
    --card: #1f1f22;
    --contested: #ff8c42;
    --attested: #4cc38a;
    --inferred: #ffd43b;
    --shadow: rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--light);
  color: var(--darkgray);
  font-family: Georgia, Cambria, "Times New Roman", serif;
  line-height: 1.6;
}
a { color: var(--secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header { border-bottom: 1px solid var(--lightgray); padding: 1.2rem 1rem 1rem; }
.header-inner { max-width: 1200px; margin: 0 auto; }
.home-link { font-size: 0.9rem; color: var(--gray); }
.home-link:hover { color: var(--secondary); }
#title { color: var(--dark); margin: 0.3rem 0 0.2rem; font-size: 1.7rem; }
.subtitle { margin: 0.1rem 0; color: var(--darkgray); font-size: 1.05rem; }
.principle { margin: 0.35rem 0 0.15rem; color: var(--dark); font-size: 0.92rem; font-style: italic; border-left: 3px solid var(--secondary); padding-left: 0.6rem; }
.source-note { margin: 0.2rem 0 0; color: var(--gray); font-size: 0.82rem; }

.layout {
  max-width: 1200px; margin: 0 auto; padding: 1rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* ---- controls ---- */
.controls {
  background: var(--card); border: 1px solid var(--lightgray);
  border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 0.8rem;
  box-shadow: 0 1px 3px var(--shadow);
}
.marker-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.marker-label { font-size: 0.95rem; white-space: nowrap; }
.marker-label strong { color: var(--secondary); }
#timeMarker { flex: 1; min-width: 200px; direction: ltr; accent-color: var(--secondary); }
.marker-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }
.pill-btn {
  font-family: inherit; font-size: 0.85rem; cursor: pointer;
  background: var(--secondary); color: #fff; border: none;
  border-radius: 999px; padding: 0.3rem 0.85rem;
}
.pill-btn:hover { background: var(--tertiary); }
.pill-btn.ghost { background: transparent; color: var(--secondary); border: 1px solid var(--lightgray); }
.marker-readout { font-size: 0.82rem; color: var(--darkgray); }

/* ---- svg ---- */
.svg-wrap {
  background: var(--card); border: 1px solid var(--lightgray);
  border-radius: 10px; overflow-x: auto; box-shadow: 0 1px 3px var(--shadow);
}
#tree { display: block; width: 100%; min-width: 760px; height: auto; direction: ltr; }

.axis-line { stroke: var(--gray); stroke-width: 1; }
.axis-tick { stroke: var(--gray); stroke-width: 1; }
.axis-label { fill: var(--gray); font-size: 12px; font-family: "IBM Plex Mono", monospace; }
.era-zone { fill: none; }
.era-zone-alt { fill: var(--highlight); }
.era-divide { stroke: var(--lightgray); stroke-width: 1; stroke-dasharray: 2 4; }
.node .connected-band { fill: var(--attested); opacity: 0.30; }
/* A SINGLE attested text (not a corpus): hollow marker + faint dashed dating
   bracket — deliberately NOT a filled band, so one inscription never reads as a
   long attested corpus. */
.node .single-point { fill: #fff; stroke: var(--darkgray); stroke-width: 2; }
.node .point-uncertain { stroke: var(--gray); stroke-width: 1.4; stroke-dasharray: 2 3; opacity: 0.7; }
.node .node-members { fill: var(--gray); font-size: 10px; font-family: system-ui, -apple-system, sans-serif; }
.era-label { fill: var(--darkgray); font-size: 11px; font-family: "IBM Plex Mono", monospace; letter-spacing: 0.02em; }

.edge { fill: none; stroke: var(--gray); stroke-width: 1.6; stroke-dasharray: 5 4; }
.edge.contested { stroke: var(--contested); stroke-width: 2.4; stroke-dasharray: 3 3; cursor: pointer; }
.edge.contested:hover { stroke-width: 3.4; }
/* member = a variety/register WITHIN a continuum (not a genealogical fork): a
   finer, tighter-dotted teal link, visually distinct from the gray descent edges
   and the red contested edges. */
.edge.member { stroke: #2a9d8f; stroke-width: 1.4; stroke-dasharray: 2 3; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 14px; cursor: pointer; }
.edge-q { fill: var(--contested); font-size: 13px; font-weight: 700; cursor: pointer; }

.node { cursor: pointer; }
.node .node-label { fill: var(--dark); font-size: 13px; font-family: Georgia, Cambria, "Times New Roman", serif; }
.node .node-date { fill: var(--gray); font-size: 10px; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
/* solid = attested span */
.node .life-attested { stroke: var(--darkgray); stroke-width: 2.6; }
.node .life-living { stroke: var(--gray); stroke-width: 1.6; stroke-dasharray: 2 4; opacity: 0.7; }
/* markers */
.node .attest-dot { fill: var(--darkgray); stroke: none; }              /* first attested */
.node .recon-dot { fill: var(--light); stroke: var(--secondary); stroke-width: 1.6; stroke-dasharray: 3 2; } /* dated root */
.node .open-dot { fill: var(--light); stroke: var(--gray); stroke-width: 1.6; } /* living, unattested */
.node .junction-tick { stroke: var(--secondary); stroke-width: 1.8; opacity: 0.7; } /* undated branch point */
/* onomastic tier: dashed lead-in + open diamond, drawn earlier than the connected span */
.node .life-onomastic { stroke: var(--gray); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: 0.75; }
.node .onomastic-mark { fill: var(--light); stroke: var(--darkgray); stroke-width: 1.6; }
.node .onomastic-date { fill: var(--gray); font-style: italic; opacity: 0.9; }
/* fading uncertainty bands: era band (Proto-Semitic) + undated-junction windows.
   Fill is an inline url(#fadeBand) gradient — do NOT set `fill` here (CSS would
   override the presentation attribute and kill the gradient). Colour lives in the
   gradient stops below. */
#fadeBand .fb-edge { stop-color: var(--secondary); stop-opacity: 0; }
#fadeBand .fb-mid { stop-color: var(--secondary); stop-opacity: 0.28; }
.node .junction-band { pointer-events: none; }
.node.outgroup .node-label { font-style: italic; fill: var(--darkgray); }
.node .hit { fill: transparent; }
.node:hover .node-label { fill: var(--secondary); }
.node:hover .attest-dot, .node:hover .recon-dot, .node:hover .open-dot, .node:hover .onomastic-mark { stroke: var(--tertiary); stroke-width: 2.4; }
.node:hover .junction-tick { stroke: var(--tertiary); stroke-width: 2.8; opacity: 1; }
.node.selected .node-label { fill: var(--secondary); font-weight: 700; }

/* time-marker highlight states */
.node.mk-attested .attest-dot { fill: var(--attested); filter: drop-shadow(0 0 5px var(--attested)); }
.node.mk-attested .life-attested { stroke: var(--attested); }
.node.mk-attested .onomastic-mark { stroke: var(--attested); }
/* onomastic-only reach: the name/feature exists but no connected corpus yet */
.node.mk-onomastic .onomastic-mark { stroke: var(--attested); fill: var(--attested); opacity: 0.55; }
.node.mk-onomastic .life-onomastic { stroke: var(--attested); opacity: 0.6; }
.node.mk-inferred .node-label { fill: var(--inferred); }
.node.mk-inferred .junction-tick, .node.mk-inferred .recon-dot, .node.mk-inferred .open-dot, .node.mk-inferred .era-tick { stroke: var(--inferred); stroke-width: 2.6; }
.node.mk-none { opacity: 0.3; }

.marker-line { stroke: var(--contested); stroke-width: 1.4; stroke-dasharray: 2 3; }
.marker-flag { fill: var(--contested); font-size: 11px; font-family: "IBM Plex Mono", monospace; }

/* ---- legend ---- */
.legend { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; font-size: 0.82rem; color: var(--darkgray); }
.lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.swatch { width: 22px; height: 12px; display: inline-block; border-radius: 3px; }
.swatch.recon-circle { width: 12px; height: 12px; border-radius: 50%; border: 1.6px dashed var(--secondary); background: var(--light); }
.swatch.junction-mark { width: 3px; height: 14px; border-radius: 1px; background: var(--secondary); opacity: 0.7; }
.swatch.attest-circle { width: 12px; height: 12px; border-radius: 50%; background: var(--darkgray); }
.swatch.onomastic-swatch { width: 11px; height: 11px; border-radius: 2px; transform: rotate(45deg); border: 1.6px solid var(--darkgray); background: var(--light); }
.swatch.era-swatch { width: 22px; height: 10px; background: var(--secondary); opacity: 0.32; border-radius: 2px; }
.swatch.edge-normal { height: 0; border-top: 2px dashed var(--gray); border-radius: 0; }
.swatch.life-solid { height: 0; border-top: 2.6px solid var(--darkgray); border-radius: 0; }
.swatch.edge-contested { height: 0; border-top: 2.6px dashed var(--contested); border-radius: 0; }
.swatch.marker-attested { background: var(--attested); }
.swatch.marker-inferred { background: var(--inferred); }

/* ---- side panels ---- */
.panel, .hypothesis {
  background: var(--card); border: 1px solid var(--lightgray);
  border-radius: 10px; padding: 0.9rem 1rem; box-shadow: 0 1px 3px var(--shadow);
}
.panel { margin-bottom: 0.9rem; min-height: 120px; }
.panel-hint { color: var(--gray); font-size: 0.9rem; margin: 0; }
.panel h2 { color: var(--dark); font-size: 1.15rem; margin: 0 0 0.1rem; }
.panel .en-name { color: var(--gray); font-size: 0.85rem; margin: 0 0 0.5rem; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.sources .sources-head { color: var(--gray); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; border-top: none; padding-bottom: 0.1rem; }
.badge { display: inline-block; font-size: 0.75rem; border-radius: 999px; padding: 0.1rem 0.6rem; margin-inline-end: 0.3rem; }
.badge.attested { background: var(--attested); color: #fff; }
.badge.reconstructed { background: var(--highlight); color: var(--darkgray); border: 1px dashed var(--secondary); }
.badge.contested { background: var(--contested); color: #fff; }
.badge.outgroup { background: var(--lightgray); color: var(--darkgray); }
.panel .row { margin: 0.4rem 0; font-size: 0.92rem; }
.panel .two-dates { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 0.85rem; color: var(--secondary); background: var(--highlight); border-radius: 6px; padding: 0.3rem 0.5rem; }
.panel .row .k { color: var(--gray); font-size: 0.82rem; display: block; }
.panel .innovation { background: var(--highlight); border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.9rem; margin: 0.4rem 0; }
/* evidence outside / postdating the cited library — visibly set apart from sourced rows */
.panel .external-update { border-left: 3px solid var(--contested); background: var(--highlight); border-radius: 0 6px 6px 0; padding: 0.4rem 0.6rem; font-size: 0.88rem; margin: 0.5rem 0; font-style: italic; }
.panel .external-update .k { font-style: normal; color: var(--contested); }
.sources { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.sources li { font-size: 0.82rem; color: var(--darkgray); border-top: 1px solid var(--lightgray); padding: 0.4rem 0; }
.sources .cite { color: var(--secondary); font-weight: 500; }
.sources .span { color: var(--gray); font-style: italic; display: block; margin-top: 0.15rem; }
.kid { font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; color: var(--gray); }

.view { border-top: 1px solid var(--lightgray); padding-top: 0.5rem; margin-top: 0.5rem; }
.view h3 { margin: 0 0 0.2rem; font-size: 0.98rem; color: var(--contested); }

.contact-note { background: var(--card); border: 1px solid var(--lightgray); border-left: 3px solid var(--tertiary); border-radius: 0 10px 10px 0; padding: 0.7rem 1rem; box-shadow: 0 1px 3px var(--shadow); margin-top: 0.9rem; }
.contact-note h2 { color: var(--dark); font-size: 1.05rem; margin: 0 0 0.3rem; }
.contact-note p { font-size: 0.9rem; margin: 0.3rem 0; color: var(--darkgray); }

/* ---- data table (rows = the JSON behind the figure) ---- */
.data-table { max-width: 1200px; margin: 1.6rem auto 0; padding: 0 1rem; }
.data-table h2 { color: var(--dark); font-size: 1.2rem; margin: 0 0 0.3rem; }
.data-table .dt-note { color: var(--gray); font-size: 0.82rem; margin: 0 0 0.7rem; max-width: 70ch; }
.data-table .dt-note .dt-q { position: static; }
.dt-scroll { overflow-x: auto; border: 1px solid var(--lightgray); border-radius: 8px; }
.data-table table { border-collapse: collapse; width: 100%; font-size: 0.84rem; }
.data-table thead th { text-align: left; background: var(--highlight); color: var(--darkgray); font-weight: 600; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--lightgray); white-space: nowrap; }
.data-table tbody td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--lightgray); color: var(--darkgray); vertical-align: top; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--highlight); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .dt-name { color: var(--secondary); font-weight: 600; white-space: nowrap; }
.data-table .dt-innov { min-width: 22ch; color: var(--darkgray); }
.data-table .dt-src { text-align: center; color: var(--gray); font-family: "IBM Plex Mono", monospace; }
.data-table .dt-dim { color: var(--gray); font-weight: 400; }
.data-table .dt-q { color: var(--contested); font-weight: 700; cursor: pointer; }
.hypothesis h2 { color: var(--dark); font-size: 1.1rem; margin: 0 0 0.3rem; }
.hypothesis .verdict { display: inline-block; background: var(--inferred); color: #3a2f00; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.7rem; font-size: 0.85rem; margin-bottom: 0.4rem; }
.hypothesis p { font-size: 0.9rem; margin: 0.3rem 0; }

.site-footer { max-width: 1200px; margin: 0 auto; padding: 1rem; color: var(--gray); font-size: 0.8rem; border-top: 1px solid var(--lightgray); }

/* ---- Y-DNA (J1-P58) overlay — default hidden, toggled by #btnYdna ---- */
:root { --ydna: #c0392b; }
@media (prefers-color-scheme: dark) { :root { --ydna: #ff6b5e; } }
.pill-btn.ydna-btn { background: transparent; color: var(--ydna); border: 1px solid var(--ydna); }
.pill-btn.ydna-btn:hover { background: var(--ydna); color: #fff; }
.pill-btn.ydna-btn.active { background: var(--ydna); color: #fff; }
.ydna-strip { fill: var(--highlight); stroke: var(--ydna); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.9; }
.ydna-strip-tag { fill: var(--ydna); font-size: 13px; font-weight: 700; }
.ydna-strip-legend { fill: var(--darkgray); font-size: 11px; }
.ydna-life { stroke: var(--ydna); stroke-width: 2.6; fill: none; }
.ydna-older { stroke-dasharray: 4 3; }
.ydna-arrow { fill: var(--ydna); }
.ydna-node { cursor: help; }
.ydna-recon { fill: var(--card); stroke: var(--ydna); stroke-width: 1.4; }
.ydna-recon.ydna-anchor { stroke-width: 2.2; }
.ydna-attest { fill: var(--ydna); stroke: none; }
.ydna-span { stroke: var(--ydna); stroke-width: 1; stroke-dasharray: 1 2.5; opacity: 0.5; }
.ydna-branch { stroke: var(--ydna); stroke-width: 1.1; opacity: 0.7; }
.ydna-drop { stroke: var(--ydna); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.45; }
.ydna-leader { stroke: var(--ydna); stroke-width: 0.6; opacity: 0.4; }
/* hover-to-trace: dim everything, light up the hovered node's lineage */
.ydna-hovering .ydna-node { opacity: 0.16; }
.ydna-hovering .ydna-node.hl { opacity: 1; }
.ydna-hovering .ydna-branch { opacity: 0.06; }
.ydna-branch.hl { opacity: 1; stroke-width: 2; }
.ydna-node.hl .ydna-recon { stroke-width: 2.6; }
.ydna-life.hl { stroke-width: 3.6; }
.ydna-hovering .ydna-drop, .ydna-hovering .ydna-leader { opacity: 0.06; }
.ydna-name { fill: var(--darkgray); font-size: 11.5px; }
.ydna-name-anchor { fill: var(--ydna); font-weight: 700; font-size: 12px; }
.ydna-cap { fill: var(--darkgray); font-size: 11.5px; }
.ydna-caption { fill: var(--gray); font-size: 11px; }