/* ===========================================================================
   Turek family history — stylesheet
   =========================================================================*/

:root{
  --paper:#f7f6f3;
  --card:#ffffff;
  --card-2:#fbfaf8;
  --ink:#171d24;
  --ink-soft:#586471;
  --ink-faint:#8a95a0;
  --rule:#dcdfd9;
  --rule-soft:#e9ebe6;

  --pat:#2f6f66;          /* paternal — Turek / Macura   */
  --pat-tint:#e2efec;
  --mat:#8a6717;          /* maternal — Kramer / Lenz    */
  --mat-tint:#f3ecdb;
  --direct:#a8324a;       /* the line of descent to Chris */
  --direct-tint:#fbe9ec;

  --d:#2f6f66; --r:#5b6874; --i:#3a5f9e; --f:#6b4d97; --h:#a8631f; --n:#93424a;

  --shadow:0 1px 2px rgba(23,29,36,.05), 0 8px 22px -14px rgba(23,29,36,.30);
  --shadow-lg:0 2px 6px rgba(23,29,36,.08), 0 24px 60px -24px rgba(23,29,36,.45);
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#10141a; --card:#171d25; --card-2:#1c232c;
    --ink:#e8edf2; --ink-soft:#9caab7; --ink-faint:#6e7c89;
    --rule:#29323b; --rule-soft:#212932;
    --pat:#6fbcae; --pat-tint:#182b28;
    --mat:#d5ad5b; --mat-tint:#2a2417;
    --direct:#f0899e; --direct-tint:#2e1a20;
    --d:#6fbcae; --r:#9caab7; --i:#7fa6e8; --f:#b5a0e0; --h:#e0a468; --n:#e08b96;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 22px -14px rgba(0,0,0,.85);
    --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 28px 64px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#10141a; --card:#171d25; --card-2:#1c232c;
  --ink:#e8edf2; --ink-soft:#9caab7; --ink-faint:#6e7c89;
  --rule:#29323b; --rule-soft:#212932;
  --pat:#6fbcae; --pat-tint:#182b28;
  --mat:#d5ad5b; --mat-tint:#2a2417;
  --direct:#f0899e; --direct-tint:#2e1a20;
  --d:#6fbcae; --r:#9caab7; --i:#7fa6e8; --f:#b5a0e0; --h:#e0a468; --n:#e08b96;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 22px -14px rgba(0,0,0,.85);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 28px 64px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:-.012em; text-wrap:balance}

/* ---------- site chrome ---------- */
.topbar{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--rule);
}
.topbar-in{max-width:1240px; margin:0 auto; padding:11px clamp(16px,3vw,32px);
  display:flex; align-items:center; gap:clamp(10px,2vw,26px); flex-wrap:wrap}
.brand{font-family:var(--serif); font-weight:600; font-size:17px; text-decoration:none; white-space:nowrap}
.brand span{color:var(--ink-faint); font-weight:400}
.nav{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
.nav a{
  text-decoration:none; font-size:14px; padding:6px 11px; border-radius:7px;
  color:var(--ink-soft); white-space:nowrap;
}
.nav a:hover{background:var(--rule-soft); color:var(--ink)}
.nav a[aria-current="page"]{background:var(--ink); color:var(--paper)}
.theme-btn{
  border:1px solid var(--rule); background:var(--card); color:var(--ink-soft);
  border-radius:7px; width:32px; height:32px; cursor:pointer; font-size:14px; line-height:1;
}
.theme-btn:hover{color:var(--ink); border-color:var(--ink-faint)}

.wrap{max-width:1240px; margin:0 auto; padding:clamp(26px,4vw,56px) clamp(16px,3vw,32px) 110px}
.narrow{max-width:820px}

/* ---------- masthead ---------- */
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 14px}
h1{font-size:clamp(34px,6vw,62px); line-height:1.03; margin:0 0 18px}
h1 em{font-style:italic; color:var(--ink-soft)}
.standfirst{font-family:var(--serif); font-size:clamp(17px,2vw,21px); line-height:1.5;
  color:var(--ink-soft); max-width:62ch; margin:0}
h2{font-size:clamp(23px,3vw,31px); line-height:1.15; margin:56px 0 6px}
h2:first-of-type{margin-top:40px}
h3{font-size:clamp(18px,2vw,21px); margin:34px 0 6px}
h4{font-size:16.5px; margin:22px 0 4px}
.dek{color:var(--ink-soft); margin:0 0 20px; max-width:64ch; font-size:15.5px}
p{max-width:70ch}
hr.rule{border:0; border-top:1px solid var(--rule); margin:52px 0}

/* ---------- stat strip ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:11px; overflow:hidden; margin:34px 0 12px}
.stat{background:var(--card); padding:15px 16px}
.stat b{display:block; font-family:var(--serif); font-size:29px; line-height:1.05; font-weight:600}
.stat span{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.35}

/* ---------- generic cards ---------- */
.card{background:var(--card); border:1px solid var(--rule); border-radius:12px;
  padding:18px 20px; box-shadow:var(--shadow)}
.grid{display:grid; gap:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.linehead{display:flex; align-items:center; gap:10px; margin:0 0 4px}
.linedot{width:11px; height:11px; border-radius:50%; flex:none}
.pat .linedot{background:var(--pat)} .mat .linedot{background:var(--mat)}
.pat h2,.pat h3{color:var(--pat)} .mat h2,.mat h3{color:var(--mat)}

/* ---------- person chips / buttons ---------- */
.p-link{
  display:inline-flex; align-items:baseline; gap:6px; cursor:pointer; text-align:left;
  background:none; border:0; padding:1px 3px; margin:0 -3px; font:inherit; color:inherit;
  border-bottom:1.5px solid color-mix(in srgb, var(--ink-faint) 55%, transparent);
  border-radius:2px;
}
.p-link:hover{background:var(--rule-soft); border-bottom-color:var(--ink)}
.p-link.is-direct{border-bottom-color:var(--direct); color:var(--direct); font-weight:600}
.p-link .yr{font-size:.86em; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.p-link.is-direct .yr{color:color-mix(in srgb, var(--direct) 75%, var(--ink-faint))}

/* ---------- tags & confidence chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 0}
.chip{
  font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:3px 8px; border-radius:20px;
  border:1px solid var(--rule); color:var(--ink-soft); background:var(--card-2); white-space:nowrap;
}
.chip.tag{border-color:color-mix(in srgb,var(--ink-faint) 40%,transparent)}
.chip.direct{background:var(--direct-tint); border-color:var(--direct); color:var(--direct)}
.chip.line-pat{background:var(--pat-tint); border-color:var(--pat); color:var(--pat)}
.chip.line-mat{background:var(--mat-tint); border-color:var(--mat); color:var(--mat)}
.conf{
  font-family:var(--mono); font-size:10.5px; font-weight:500; padding:1px 5px; border-radius:4px;
  border:1px solid currentColor; white-space:nowrap; vertical-align:2px; cursor:help;
}
.conf-D{color:var(--d)} .conf-R{color:var(--r)} .conf-I{color:var(--i)}
.conf-F{color:var(--f)} .conf-H{color:var(--h)} .conf-N{color:var(--n)}

.access{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 6px; border-radius:4px; border:1px solid var(--rule); color:var(--ink-faint)}
.access-free{color:var(--d); border-color:currentColor}
.access-account{color:var(--i); border-color:currentColor}
.access-subscription{color:var(--h); border-color:currentColor}
.access-offline{color:var(--n); border-color:currentColor}

/* ---------- callouts ---------- */
.note{border-left:3px solid var(--rule); padding:2px 0 2px 15px; margin:16px 0;
  color:var(--ink-soft); font-size:15px}
.note.warn{border-left-color:var(--h)}
.note.open{border-left-color:var(--n)}
.note.key{border-left-color:var(--direct)}
.note b{color:var(--ink)}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px}
th,td{text-align:left; padding:8px 11px; border-bottom:1px solid var(--rule-soft); vertical-align:top}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint);
  border-bottom:1px solid var(--rule); font-weight:600}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ===========================================================================
   THE TREE
   =========================================================================*/
.tree-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 18px;
  padding:12px 14px; background:var(--card); border:1px solid var(--rule); border-radius:11px;
}
.tbtn{
  font:inherit; font-size:13.5px; padding:6px 12px; border-radius:7px; cursor:pointer;
  border:1px solid var(--rule); background:var(--card-2); color:var(--ink-soft);
}
.tbtn:hover{color:var(--ink); border-color:var(--ink-faint)}
.tbtn[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.tbtn.direct[aria-pressed="true"]{background:var(--direct); border-color:var(--direct); color:#fff}
.tb-sep{width:1px; align-self:stretch; background:var(--rule); margin:0 4px}
.tb-label{font-size:12px; color:var(--ink-faint); font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.08em}

.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); margin:0 0 20px}
.legend i{display:inline-block; width:22px; height:3px; border-radius:2px; vertical-align:3px; margin-right:6px}

.tree-viewport{
  overflow:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule); border-radius:12px; background:var(--card-2);
  padding:26px; height:clamp(420px,72vh,820px); height:clamp(420px,72dvh,820px); resize:vertical;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--ink-faint) 22%,transparent) 1px, transparent 0);
  background-size:22px 22px;
}
.tree-zoom{transform-origin:0 0; transition:transform .18s ease; width:max-content}

/* recursive pedigree */
.branch{display:flex; align-items:center}
.parents{display:flex; flex-direction:column; justify-content:center; position:relative}
.parents > .branch{position:relative; padding-left:34px; margin:3px 0}
/* elbow into each parent */
.parents > .branch::before{
  content:""; position:absolute; left:0; top:50%; width:34px; height:2px;
  background:var(--rule); 
}
/* vertical spine linking the parents: half a segment from each outer node */
.parents > .branch::after{content:""; position:absolute; left:0; width:2px; background:var(--rule)}
.parents > .branch:first-child::after{top:50%; bottom:-3px}
.parents > .branch:last-child::after{top:-3px; bottom:50%}
.parents > .branch:not(:first-child):not(:last-child)::after{top:-3px; bottom:-3px}
.parents > .branch:only-child::after{display:none}
/* stub from child out to the spine */
.branch > .connector{width:26px; height:2px; background:var(--rule); flex:none}
.branch > .connector.hidden{background:transparent}

.pnode{
  position:relative; width:212px; flex:none;
  background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--ink-faint);
  border-radius:10px; padding:10px 12px; cursor:pointer; text-align:left; font:inherit; color:inherit;
  box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.pnode:hover{transform:translateY(-1px); box-shadow:var(--shadow-lg); border-color:var(--ink-faint)}
.pnode.pat{border-left-color:var(--pat)}
.pnode.mat{border-left-color:var(--mat)}
.pnode.is-direct{border-left-color:var(--direct); background:
  linear-gradient(90deg, var(--direct-tint), var(--card) 62%)}
.pnode.is-self{border-left-color:var(--direct); border-color:var(--direct); border-width:1px 1px 1px 4px}
.pnode.is-unknown{border-style:dashed; background:var(--card-2)}
.pnode.is-hyp{border-style:dashed}
.pnode .nm{display:block; font-weight:600; font-size:14.5px; line-height:1.25}
.pnode .dt{display:block; font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-top:2px}
.pnode .pl{display:block; font-size:11.5px; color:var(--ink-soft); margin-top:3px; line-height:1.3}
.pnode.compact{padding:7px 11px}
.pnode.compact .pl{margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pnode .mini{display:flex; gap:4px; flex-wrap:wrap; margin-top:6px}
.pnode .mini em{font-style:normal; font-size:10px; font-weight:600; letter-spacing:.02em;
  padding:1px 5px; border-radius:9px; background:var(--rule-soft); color:var(--ink-soft)}
.pnode .mini em.dir{background:var(--direct-tint); color:var(--direct)}

.toggle{
  position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; border:1px solid var(--rule);
  background:var(--card); color:var(--ink-soft); cursor:pointer; font:600 13px/1 var(--sans);
  display:flex; align-items:center; justify-content:center; z-index:2; padding:0;
}
.toggle:hover{border-color:var(--ink); color:var(--ink)}
.dim .pnode:not(.is-direct):not(.is-self){opacity:.24; filter:saturate(.3)}
.dim .parents > .branch::before, .dim .parents > .branch::after, .dim .connector{opacity:.3}

/* households view */
.house{background:var(--card); border:1px solid var(--rule); border-radius:12px;
  padding:16px 18px; box-shadow:var(--shadow); border-top:3px solid var(--ink-faint)}
.house.pat{border-top-color:var(--pat)} .house.mat{border-top-color:var(--mat)}
.house h4{margin:0 0 2px; font-size:16px}
.house .where{font-size:12.5px; color:var(--ink-faint); margin:0 0 10px}
.kids{list-style:none; margin:8px 0 0; padding:0; border-top:1px solid var(--rule-soft)}
.kids li{padding:5px 0 5px 16px; border-bottom:1px solid var(--rule-soft); font-size:14px; position:relative}
.kids li:last-child{border-bottom:0}
.kids li::before{content:""; position:absolute; left:2px; top:13px; width:6px; height:6px;
  border-radius:50%; background:var(--rule)}
.kids li.dir::before{background:var(--direct); box-shadow:0 0 0 3px var(--direct-tint)}
.kids li .arrow{font-size:11px; font-weight:700; color:var(--direct); letter-spacing:.04em;
  text-transform:uppercase; margin-left:6px; white-space:nowrap}
.kids li .lifespan{color:var(--ink-faint); font-size:12.5px; font-variant-numeric:tabular-nums}

/* the two crimson toolbar buttons filter this view: the pedigree is ancestors
   only, so the brothers and sisters they act on live here */
#households.dim .kids li:not(.dir){opacity:.32; filter:saturate(.3)}
#households.dim .house:not(.has-direct){opacity:.32; filter:saturate(.3)}
#households .hidden-note{display:none; font-size:12.5px; color:var(--ink-faint);
  font-style:italic; padding:8px 0 2px}
#households.directonly .kids li:not(.dir){display:none}
#households.directonly .house:not(.has-direct){display:none}
#households.directonly .hidden-note{display:block}

/* ===========================================================================
   DRAWER — level 1 person card, level 2 evidence log
   =========================================================================*/
.scrim{position:fixed; inset:0; background:rgba(10,14,20,.42); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .2s; z-index:90}
.scrim.on{opacity:1; pointer-events:auto}
/* while the drawer is open, the page behind it stays put */
body.drawer-open{overflow:hidden}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(680px,100%); z-index:100;
  background:var(--paper); border-left:1px solid var(--rule); box-shadow:var(--shadow-lg);
  transform:translateX(102%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer.on{transform:none}
.drawer-head{
  padding:16px clamp(18px,3vw,30px) 12px; border-bottom:1px solid var(--rule);
  display:flex; align-items:flex-start; gap:12px; background:var(--card);
}
.drawer-head .ht{flex:1; min-width:0}
.drawer-head h3{margin:0; font-size:clamp(20px,3vw,25px); line-height:1.15}
.drawer-head .sub{font-size:13px; color:var(--ink-faint); margin-top:3px; font-variant-numeric:tabular-nums}
.x{border:1px solid var(--rule); background:var(--card-2); color:var(--ink-soft); cursor:pointer;
  width:32px; height:32px; border-radius:8px; font-size:17px; line-height:1; flex:none}
.x:hover{color:var(--ink); border-color:var(--ink-faint)}
.drawer-body{overflow-y:auto; padding:20px clamp(18px,3vw,30px) 70px; flex:1}
.drawer-body h4{margin:26px 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-faint); font-family:var(--sans); font-weight:700}
.drawer-body h4:first-child{margin-top:0}
.drawer-body p{max-width:none}
.headline{font-family:var(--serif); font-size:18.5px; line-height:1.4; color:var(--ink); margin:0 0 14px}

.factlist{list-style:none; margin:0; padding:0}
.factlist li{padding:9px 0; border-bottom:1px solid var(--rule-soft)}
.factlist .fl{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);
  font-weight:700; margin-bottom:1px}
.factlist .fv{font-size:15px}
.factlist .fn{font-size:13.5px; color:var(--ink-soft); margin-top:5px; padding-left:11px;
  border-left:2px solid var(--rule)}

.rel{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14.5px; margin:0 0 4px}
.rel .lab{color:var(--ink-faint); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; width:100%; margin-top:8px}

.big-btn{
  display:block; width:100%; margin:26px 0 6px; padding:13px 16px; cursor:pointer; font:inherit;
  text-align:left; border-radius:10px; border:1px solid var(--direct); color:var(--direct);
  background:var(--direct-tint); font-weight:600; font-size:15px;
}
.big-btn:hover{filter:brightness(.97)}
.big-btn small{display:block; font-weight:400; font-size:13px; opacity:.85; margin-top:2px}

/* evidence log */
.ev{margin:0 0 18px; border:1px solid var(--rule); border-radius:11px; overflow:hidden; background:var(--card)}
.ev-h{padding:11px 14px; background:var(--card-2); border-bottom:1px solid var(--rule)}
.ev-h .fl{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-weight:700}
.ev-h .fv{font-size:15px; margin-top:2px}
.src{padding:12px 14px; border-top:1px solid var(--rule-soft)}
.src:first-of-type{border-top:0}
.src .st{font-weight:600; font-size:14.5px; line-height:1.35}
.src .meta{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin:6px 0}
.src .cite{font-family:var(--mono); font-size:12px; color:var(--ink-soft); line-height:1.5;
  background:var(--card-2); border-radius:7px; padding:8px 10px; margin:7px 0}
.src a.go{display:inline-block; font-size:13px; font-weight:600; color:var(--pat); text-decoration:none;
  border-bottom:1.5px solid currentColor; margin-top:2px}
.src a.go:hover{opacity:.75}
.src .sn{font-size:13.5px; color:var(--ink-soft); margin-top:7px}
.src .sc{font-size:13.5px; color:var(--h); margin-top:7px}
.src .sc::before{content:"⚠ "; font-size:12px}

.neg{width:100%; font-size:13px}
.neg td{padding:6px 9px}
.neg .res{color:var(--n); font-family:var(--mono); font-size:12px}

/* search */
.search-wrap{position:relative; margin:0 0 22px}
.search-wrap input{
  /* 16px minimum: anything smaller makes mobile Safari zoom the page on focus
     and leave it zoomed */
  width:100%; font:inherit; font-size:16px; padding:11px 14px 11px 38px; border-radius:10px;
  border:1px solid var(--rule); background:var(--card); color:var(--ink);
}
.search-wrap input:focus{outline:2px solid color-mix(in srgb,var(--pat) 50%,transparent); outline-offset:1px}
.search-wrap::before{content:"⌕"; position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:19px; pointer-events:none}
.results{list-style:none; margin:10px 0 0; padding:0}
.results li{border-bottom:1px solid var(--rule-soft)}
.results button{width:100%; text-align:left; background:none; border:0; font:inherit; color:inherit;
  padding:9px 6px; cursor:pointer; border-radius:6px}
.results button:hover{background:var(--rule-soft)}
.results .nm{font-weight:600}
.results .mt{font-size:12.5px; color:var(--ink-faint)}
.empty{color:var(--ink-faint); font-style:italic; padding:14px 0}

footer.site{border-top:1px solid var(--rule); margin-top:70px; padding:26px 0 0;
  color:var(--ink-faint); font-size:13.5px}
footer.site a{color:var(--ink-soft)}

@media (max-width:640px){
  body{font-size:16px}
  .tree-viewport{padding:16px}
  .stat b{font-size:25px}
}
/* a phone-width topbar: one row for the brand and theme button, one swipeable
   row for the nav, instead of the four rows the full-width layout wraps into */
@media (max-width:480px){
  .brand span{display:none}
  .topbar-in{gap:2px 6px; padding-top:8px; padding-bottom:8px}
  .theme-btn{order:1; margin-left:auto}
  .nav{order:2; width:100%; margin-left:0; gap:0; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:9px 8px; font-size:13px; flex:none}
}
/* fingers need bigger targets than pointers */
@media (pointer:coarse){
  .tbtn{min-height:44px}
  .nav a{padding-top:10px; padding-bottom:10px}
  .theme-btn{width:40px; height:40px}
  .x{width:40px; height:40px; font-size:19px}
  /* .jmapwrap prefix: the base .jz rule is declared later in this file, so the
     override needs the extra specificity to win regardless of order */
  .jmapwrap .jz{width:44px; height:44px; font-size:21px}
}
@media print{
  .topbar,.tree-toolbar,.drawer,.scrim,.toggle,.jzoom,.jhint,#jcontrols{display:none !important}
  body{background:#fff}
  /* Paper is white whatever the screen theme was. Without this, printing from
     dark mode produces near-white text on a white page — an unreadable page.
     The selector list must outweigh both dark-mode paths above. */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"]{
    --paper:#ffffff; --card:#ffffff; --card-2:#fbfaf8;
    --ink:#171d24; --ink-soft:#586471; --ink-faint:#8a95a0;
    --rule:#dcdfd9; --rule-soft:#e9ebe6;
    --pat:#2f6f66; --pat-tint:#e2efec;
    --mat:#8a6717; --mat-tint:#f3ecdb;
    --direct:#a8324a; --direct-tint:#fbe9ec;
    --d:#2f6f66; --r:#5b6874; --i:#3a5f9e; --f:#6b4d97; --h:#a8631f; --n:#93424a;
    --shadow:none; --shadow-lg:none;
    --map-sea:#dbe6ea; --map-land:#f1efe8; --map-line:#c6ccc4; --map-water:#c4d5dc;
  }
}

/* ===========================================================================
   THE JOURNEY MAP
   =========================================================================*/
:root{
  --map-sea:#dbe6ea; --map-land:#f1efe8; --map-line:#c6ccc4; --map-water:#c4d5dc;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --map-sea:#0d151b; --map-land:#1b232b; --map-line:#2f3a44; --map-water:#16242c;
  }
}
:root[data-theme="dark"]{
  --map-sea:#0d151b; --map-land:#1b232b; --map-line:#2f3a44; --map-water:#16242c;
}

.jlayout{display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,400px); gap:16px; align-items:start}
@media (max-width:900px){ .jlayout{grid-template-columns:minmax(0,1fr)} }

.jmapwrap{position:relative; border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  background:var(--map-sea); box-shadow:var(--shadow)}
#mapcanvas{display:block; width:100%; height:clamp(400px,62vh,700px); height:clamp(400px,62dvh,700px); touch-action:none}
.jhint{position:absolute; left:12px; bottom:10px; font-size:11.5px; color:var(--ink-faint);
  background:color-mix(in srgb, var(--card) 82%, transparent); padding:4px 9px; border-radius:6px;
  pointer-events:none; font-family:var(--mono)}
/* the hint tells the truth for the device: mice scroll, fingers pinch */
.jhint .hint-touch{display:none}
@media (pointer:coarse){
  .jhint .hint-mouse{display:none}
  .jhint .hint-touch{display:inline}
}

/* on-map zoom — on a phone these buttons are the only zoom there is */
.jzoom{position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:6px}
.jz{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--rule);
  background:color-mix(in srgb, var(--card) 92%, transparent); color:var(--ink);
  font-size:19px; line-height:1; cursor:pointer; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.jz:hover{background:var(--card)}
.jz:active{transform:scale(.94)}
.jattrib{position:absolute; right:10px; bottom:10px; font-size:10.5px; color:var(--ink-faint);
  background:color-mix(in srgb, var(--card) 82%, transparent); padding:3px 7px; border-radius:5px}

#jcontrols{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:12px 0 0;
  padding:11px 13px; background:var(--card); border:1px solid var(--rule); border-radius:11px}
#jcontrols .tbtn[disabled]{opacity:.35; cursor:default}
.jplay[data-jplay]{background:var(--direct); border-color:var(--direct); color:#fff; font-weight:600}
.jprogress{flex:1; min-width:80px; height:4px; border-radius:3px; background:var(--rule-soft); overflow:hidden}
.jprogress i{display:block; height:100%; background:var(--direct); transition:width .4s ease}

/* the panel beside the map */
#jpanel{display:flex; flex-direction:column; gap:14px}
.jcrumb{display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-faint)}
.jcrumb-b{background:none; border:0; font:inherit; color:var(--ink-soft); cursor:pointer; padding:2px 4px;
  border-radius:5px; text-decoration:underline; text-underline-offset:2px}
.jcrumb-b:hover{background:var(--rule-soft); color:var(--ink)}
.jcrumb b{color:var(--ink)}

.jwho{background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--ink-faint);
  border-radius:11px; padding:14px 16px; box-shadow:var(--shadow)}
.jwho.pat{border-left-color:var(--pat)} .jwho.mat{border-left-color:var(--mat)}
.jwho h3{margin:0; font-size:20px; line-height:1.2}
.jsub{font-size:12.5px; color:var(--ink-faint); margin-top:2px; font-variant-numeric:tabular-nums}
.jhead{font-family:var(--serif); font-size:15.5px; line-height:1.42; margin:10px 0 0; color:var(--ink-soft)}
.jfull{margin-top:12px; background:none; border:0; padding:0; font:inherit; font-size:13.5px; font-weight:600;
  color:var(--pat); cursor:pointer; border-bottom:1.5px solid currentColor}
.jfull:hover{opacity:.75}

.jstop{background:var(--card); border:1px solid var(--rule); border-radius:11px; padding:14px 16px;
  box-shadow:var(--shadow)}
.jstop-h{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.jdot{width:10px; height:10px; border-radius:50%; flex:none}
.jkind{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint)}
.jwhen{font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-left:auto}
.jplace{font-family:var(--serif); font-size:21px; font-weight:600; line-height:1.15; margin-top:8px}
.jplace-d{font-size:13px; color:var(--ink-faint); margin-top:2px}
.jprec{font-size:12.5px; color:var(--h); margin-top:6px}
.jwhat{font-size:15px; line-height:1.55; margin:11px 0 0}
.jcount{font-size:11.5px; color:var(--ink-faint); font-family:var(--mono); margin-top:12px;
  padding-top:10px; border-top:1px solid var(--rule-soft)}
.jsrc{margin-top:12px}
.jsrc summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-soft); padding:5px 0}
.jsrc summary:hover{color:var(--ink)}
.jsrc .src{border:1px solid var(--rule); border-radius:9px; margin-top:8px; background:var(--card-2)}

.jnext{background:var(--direct-tint); border:1px solid var(--direct); border-radius:11px; padding:14px 16px}
.jnext-h{font-family:var(--serif); font-size:16.5px; line-height:1.35; color:var(--direct); font-weight:600;
  margin-bottom:12px}
.jnext.jend{background:var(--card-2); border-color:var(--rule)}
.jnext.jend .jnext-h{color:var(--ink)}
.jnext p{font-size:14.5px; color:var(--ink-soft); margin:0 0 12px}
.jparent{display:block; width:100%; text-align:left; margin:0 0 8px; padding:11px 13px; cursor:pointer;
  font:inherit; background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--ink-faint);
  border-radius:9px; color:inherit}
.jparent:hover{border-color:var(--ink-faint); transform:translateX(2px)}
.jparent.pat{border-left-color:var(--pat)} .jparent.mat{border-left-color:var(--mat)}
.jparent.is-direct{border-left-color:var(--direct)}
.jp-rel{display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-faint)}
.jp-name{display:block; font-weight:600; font-size:15.5px; line-height:1.25; margin-top:2px}
.jp-meta{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px}
.jp-stops{display:block; font-size:11.5px; color:var(--ink-faint); font-family:var(--mono); margin-top:4px}

.jlegend{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft); margin:14px 0 0}
.jlegend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:0}

.jstart{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:24px}
.jstart-l{font-size:12px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-faint)}
.jstart-b{flex:1 1 240px; text-align:left; cursor:pointer; font:inherit; color:inherit;
  background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--ink-faint);
  border-radius:10px; padding:11px 14px; box-shadow:var(--shadow)}
.jstart-b:hover{border-color:var(--ink-faint); transform:translateY(-1px)}
.jstart-b.pat{border-left-color:var(--pat)} .jstart-b.mat{border-left-color:var(--mat)}
.jstart-b b{display:block; font-size:15.5px}
.jstart-b span{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px}