/* The drawing of the evidence tree: the colour tokens of the two themes and every rule for what tree.js draws inside
   the svg (.ft-svg). The tree page loads it before tree.css; the home page loads it with its preview of the tree.
   It styles nothing outside .ft-svg, so a page that loads it keeps its own layout. */
:root {
  --color-gold: #d4af37; --color-paper: #fdfbf7;
  --ft-gold: var(--color-gold);
  --ft-hair: color-mix(in srgb, var(--color-gold) 45%, transparent);
  --ft-f-name: 'Amiri', serif;
  --ft-f-ui: 'Noto Kufi Arabic', sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ft-bg: #121614; --ft-sheet: #1a1f1c; --ft-ink: #e8e4da; --ft-ink2: #c6c2b7; --ft-muted: #a7aba2;
  --ft-line: #323a35; --ft-trunk: #5f6b63; --ft-trunk-hi: #76857b; --ft-trunk-lo: #353e38; --ft-branch: #8d9990; --ft-leaf: #6f8f76; --ft-plaque: #1a1f1c;
  --ft-fruit0: #3b4b3a; --ft-fruit1: #1c2520; --ft-quote: #202622; --ft-gold-ink: #d4af37; --ft-on-trunk: #121614;
  --ft-shadow: 0 8px 24px rgb(0 0 0 / .45);
  --ft-page: radial-gradient(ellipse 120% 80% at 50% 18%, #1a211c 0%, #121614 55%, #0d100e 100%);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ft-bg: var(--color-paper); --ft-sheet: #ffffff; --ft-ink: #1d1a16; --ft-ink2: #4a4339; --ft-muted: #665f54;
  --ft-line: #e4dccb; --ft-trunk: #6f6550; --ft-trunk-hi: #8a7f67; --ft-trunk-lo: #3f382b; --ft-branch: #3d382f; --ft-leaf: #5d7a62; --ft-plaque: #fffdf8;
  --ft-fruit0: #fffefa; --ft-fruit1: #efe6cf; --ft-quote: #f5f0e3; --ft-gold-ink: #77590a; --ft-on-trunk: #fdfbf7;
  --ft-shadow: 0 6px 18px rgb(60 45 10 / .12);
  /* paper with a very light grain: layered gradients, no image files */
  --ft-page: radial-gradient(circle at 20% 15%, rgb(212 175 55 / .05) 0 1px, transparent 2px) 0 0 / 22px 22px,
             radial-gradient(circle at 70% 60%, rgb(80 60 20 / .035) 0 1px, transparent 2px) 0 0 / 31px 31px,
             var(--color-paper);
}
.ft-svg text { direction: rtl; unicode-bidi: plaintext; }
.ft-svg .fs0 { stop-color: var(--ft-fruit0); }
.ft-svg .fs1 { stop-color: var(--ft-fruit1); }
.ft-svg .edge { fill: none; stroke: var(--ft-branch); stroke-linecap: round; }
.ft-svg .edge.src-author, .ft-svg .edge.src-ph { stroke-linecap: round !important; }
.ft-svg .node { cursor: pointer; }
.ft-svg .node circle.c { fill: url(#ft-fruit); stroke: var(--ft-gold); stroke-width: 1; }
.ft-svg .node .stem { stroke: var(--ft-leaf); stroke-width: 3; stroke-linecap: round; fill: none; transition: opacity .2s ease-out; }
.ft-svg .node text { font-family: var(--ft-f-name); font-weight: 700; fill: var(--ft-ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ft-svg .node:hover circle.c { stroke-width: 2.2; }
.ft-svg .node.sel circle.c { stroke: var(--ft-gold); stroke-width: 3.5; }
.ft-svg .node .halo { fill: none; stroke: var(--ft-gold); stroke-width: 3; opacity: 0; }
.ft-svg .node.sel .halo { opacity: .35; }
.ft-svg .node.hit .halo { opacity: 1; animation: ft-pulse 1.6s ease-out 2; }
.ft-svg .node.ph circle.c { fill: var(--ft-bg); stroke: var(--ft-branch); stroke-width: 1.4; }   /* hollow, same ink as the branches */
.ft-svg .node:focus, .ft-svg .spine-item:focus, .ft-svg .chip:focus { outline: none; }
.ft-svg .spine-item:focus-visible .plaque, .ft-svg .node:focus-visible circle.c, .ft-svg .chip:focus-visible rect { stroke: var(--ft-gold); stroke-width: 4; }
.ft-svg .node.ext .nl { display: none; }
.ft-svg .nl .bm { font-weight: 400; fill: var(--ft-ink2); }
.ft-svg .klab .bm { font-weight: 500; font-size: 10px; fill: var(--ft-ink2); }
.ft-svg .klab { font: 700 12px var(--ft-f-name); fill: var(--ft-ink); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--ft-bg); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.ft-svg .phpill rect { fill: var(--ft-bg); stroke: var(--ft-branch); }
.ft-svg .phpill text { font: 600 12px var(--ft-f-ui); fill: var(--ft-ink2); direction: inherit; unicode-bidi: plaintext; }
.ft-svg .node.ph text { font-family: var(--ft-f-name); }
.ft-svg .chip { cursor: pointer; }
.ft-svg .chip rect { fill: var(--ft-sheet); stroke: var(--ft-hair); stroke-width: 1.2; }
.ft-svg .chip text { font: 700 13px var(--ft-f-ui); fill: var(--ft-ink); text-anchor: middle; dominant-baseline: central; direction: ltr; }
.ft-svg .chip:hover rect { stroke: var(--ft-gold); stroke-width: 2; }
.ft-svg .trunk { fill: var(--ft-trunk); stroke: var(--ft-trunk-lo); stroke-width: 2.4; stroke-linejoin: round; }
.ft-svg .strand { fill: var(--ft-trunk-hi); fill: color-mix(in srgb, var(--ft-trunk) 38%, var(--ft-trunk-hi)); }
.ft-svg .strand-shade { opacity: .6; }
.ft-svg .shade-stop { stop-color: var(--ft-trunk-lo); }
.ft-svg .strand-edge { fill: none; stroke: var(--ft-trunk-lo); stroke-width: 2.2; stroke-linecap: round; }
.ft-svg .strand-edge.back { opacity: .55; stroke-width: 1.4; }
.ft-svg .ridge { fill: none; stroke: var(--ft-trunk-hi); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.ft-svg .bark { fill: none; stroke: var(--ft-trunk-lo); stroke-width: 1.5; stroke-linecap: round; opacity: .7; }
.ft-svg .knot { fill: var(--ft-trunk-lo); fill: color-mix(in srgb, var(--ft-trunk-lo) 60%, #000); }
.ft-svg .knot-ring { fill: var(--ft-trunk); stroke: var(--ft-trunk-lo); stroke-width: 1.6; }
.ft-svg .knot-ring.in { fill: none; stroke: var(--ft-trunk-hi); stroke-width: 1.4; opacity: .8; }
.ft-svg .root-line { fill: none; stroke: var(--ft-trunk); stroke-linecap: round; }
.ft-svg .leaf { fill: var(--ft-leaf); }
.ft-svg .leaf-vein { fill: none; stroke: var(--ft-bg); stroke-width: 1; opacity: .55; }
.ft-svg .L-leaves { transition: opacity .2s ease-out; }
.ft-svg.lod-low .L-leaves, .ft-svg.lod-low .node .stem { opacity: 0; }
.ft-svg .plaque { fill: var(--ft-plaque); stroke: var(--ft-ink); stroke-width: 2.5; }
.ft-svg .plaque-in { fill: none; stroke: var(--ft-gold); stroke-width: 1; }
.ft-svg .spine-item { cursor: pointer; }
.ft-svg .spine-item[data-id="abdallah"] .plaque { stroke: var(--ft-gold); stroke-width: 3.5; }
.ft-svg .spine-item:hover .plaque { stroke-width: 4; }
.ft-svg .spine-item.sel .plaque { stroke: var(--ft-gold); stroke-width: 5; }
.ft-svg .ptxt { font-family: var(--ft-f-name); fill: var(--ft-ink); text-anchor: middle; dominant-baseline: central; }
.ft-svg .pdate { font-family: var(--ft-f-name); fill: var(--ft-ink2); text-anchor: middle; dominant-baseline: central; }
.ft-svg .psub { font: 400 12px var(--ft-f-ui); fill: var(--ft-muted); text-anchor: middle; dominant-baseline: central; }
.ft-svg .verse { font-family: var(--ft-f-name); fill: var(--ft-ink); text-anchor: middle; dominant-baseline: central; }
.ft-svg .conn { fill: none; stroke: var(--ft-on-trunk); stroke-width: 2.5; }
.ft-svg .pill rect { fill: var(--ft-sheet); stroke: var(--ft-branch); stroke-width: 1.4; }
.ft-svg .pill text { font: 600 15px var(--ft-f-ui); fill: var(--ft-ink); text-anchor: middle; dominant-baseline: central; }
.ft-svg .base-line { font: 600 15px var(--ft-f-ui); fill: var(--ft-ink2); text-anchor: middle; }
.ft-svg .void-note { font: 500 13px var(--ft-f-ui); fill: var(--ft-muted); text-anchor: middle; paint-order: stroke; stroke: var(--ft-bg); stroke-width: 4px; stroke-linejoin: round; }
.ft-svg .void-line { fill: none; stroke: var(--ft-muted); stroke-width: 1.4; }
.ft-svg .r87 { display: none; }
.ft-svg.show87 .r87 { display: inline; }
.ft-svg .r87 .plaque { stroke: var(--ft-branch); fill: var(--ft-bg); }
.ft-svg .r87 .ptxt { fill: var(--ft-ink2); }
.ft-svg .r87 .callout { fill: var(--ft-sheet); stroke: var(--ft-branch); }
.ft-svg .r87 .ctxt { font: 500 12.5px var(--ft-f-ui); fill: var(--ft-ink); text-anchor: middle; }
.ft-svg .r87 .lead { fill: none; stroke: var(--ft-branch); stroke-width: 1.2; }
.ft-svg.lod-far .node circle.c, .ft-svg.moving .node circle.c { fill: var(--ft-fruit0); stroke: none; }
.ft-svg.lod-far .edge, .ft-svg.moving .edge { stroke-linecap: butt; shape-rendering: optimizeSpeed; }
.ft-svg.lod-far .L-leaves, .ft-svg.lod-far .node .stem, .ft-svg.lod-far .node .nl, .ft-svg.moving .L-leaves, .ft-svg.moving .node .stem, .ft-svg.moving .node .nl, .ft-svg.moving .L-klabs, .ft-svg.moving .L-chips { display: none; }
.ft-svg.grow .edge:not(.src-author):not(.src-ph) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ft-grow 1.1s ease-out forwards; }
.ft-svg.grow .edge.src-author, .ft-svg.grow .edge.src-ph { animation: ft-fade 1.1s ease-out both; }   /* dotted links keep their dots: they fade in */
.ft-svg.grow .L-nodes, .ft-svg.grow .L-leaves, .ft-svg.grow .L-chips { animation: ft-fade 1.1s ease-out both; }
.ft-svg.sway .L-trunk .leaf { transform-box: fill-box; transform-origin: center; animation: ft-sway 5.5s ease-in-out infinite alternate; }
.ft-svg.sway .L-trunk .leaf:nth-of-type(4n) { animation-duration: 7s; animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) {
.ft-svg .L-leaves { transition: none; }
.ft-svg .node.hit .halo, .ft-svg.sway .L-trunk .leaf, .ft-svg.grow * { animation: none !important; }
}
@keyframes ft-pulse { 0% { stroke-width: 14; opacity: 0; } 30% { opacity: .7; } 100% { stroke-width: 3; opacity: 1; } }
@keyframes ft-grow { to { stroke-dashoffset: 0; } }
@keyframes ft-fade { 0%, 35% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ft-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
/* preview mode (the home page): a name is a link; a gold ring on hover and on keyboard focus */
.ft-svg a.pv { cursor: pointer; outline: none; }
.ft-svg a.pv:hover circle.c, .ft-svg a.pv:focus-visible circle.c, .ft-svg a.pv:hover .plaque, .ft-svg a.pv:focus-visible .plaque, .ft-svg a.pv:hover rect, .ft-svg a.pv:focus-visible rect { stroke: var(--ft-gold); stroke-width: 4; }