/* forest.css — the look the two views of the Forest share (the map, forest/index.html, and the walk,
   forest/walk/index.html): the site's colours (legends/legend.tpl.html) and a night forest for a dark screen,
   the bar, the search, the strand switches, the panel. Each view keeps only its own drawing rules. */
/* ── the site's own colours (legends/legend.tpl.html), and a night forest for a dark screen ── */
:root{
  --navy:#041E42; --navy-2:#0B2A5B; --orange:#FF9228; --cream:#F6F1E7; --paper:#FFFDF8; --ink:#1B1B1B;
  --mute:#5E626A; --rule:#D9D2C3; --orange-ink:#9A4414; --gold-ink:#8A6A22;
  --serif:"Rockwell","Roboto Slab","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Poppins","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bg:#F3EEE3; --bg-2:#FBF8F1; --panel:#FFFDF8; --halo:#FBF8F1; --text:#1B1B1B; --sub:#5E626A; --line:#D9D2C3;
  --snow:#FFFFFF; --trunk:#6B4A2F;
  --era-SC:#2E5E73; --era-EH:#556B2F; --era-GW:#1F5A3D; --era-KB:#2F7F57;
  --band-SC:rgba(46,94,115,.07); --band-EH:rgba(85,107,47,.07); --band-GW:rgba(31,90,61,.045); --band-KB:rgba(47,127,87,.08);
  --s-family:#B4471A; --s-tie:#8A6A22; --s-named:#0B2A5B; --s-photos:#1C7480; --s-papers:#6B4E9B; --s-tape:#B0306A; --s-years:#8C8F96;
  --chip:#FFFFFF; --focus-ring:#FF9228; --btn:#041E42; --btn-hover:#0B2A5B; --btn-ink:#FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1624; --bg-2:#111D2F; --panel:#121E31; --halo:#0D1624; --text:#EEF1F6; --sub:#A9B1BE; --line:#26354D;
    --snow:#E8EEF7; --trunk:#8A6A4E;
    --era-SC:#5EA3BF; --era-EH:#9DB66A; --era-GW:#4FAE7B; --era-KB:#7FD3A2;
    --band-SC:rgba(94,163,191,.08); --band-EH:rgba(157,182,106,.07); --band-GW:rgba(79,174,123,.05); --band-KB:rgba(127,211,162,.08);
    --s-family:#FF9A5C; --s-tie:#E2C16B; --s-named:#9CC2FF; --s-photos:#4FD1D9; --s-papers:#C3A6F2; --s-tape:#FF7EB6; --s-years:#7D8796;
    --chip:#17253B; --navy-2:#9CC2FF; --orange-ink:#FFB27A; --btn:#9CC2FF; --btn-hover:#B9D4FF; --btn-ink:#0D1624;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1624; --bg-2:#111D2F; --panel:#121E31; --halo:#0D1624; --text:#EEF1F6; --sub:#A9B1BE; --line:#26354D;
  --snow:#E8EEF7; --trunk:#8A6A4E;
  --era-SC:#5EA3BF; --era-EH:#9DB66A; --era-GW:#4FAE7B; --era-KB:#7FD3A2;
  --band-SC:rgba(94,163,191,.08); --band-EH:rgba(157,182,106,.07); --band-GW:rgba(79,174,123,.05); --band-KB:rgba(127,211,162,.08);
  --s-family:#FF9A5C; --s-tie:#E2C16B; --s-named:#9CC2FF; --s-photos:#4FD1D9; --s-papers:#C3A6F2; --s-tape:#FF7EB6; --s-years:#7D8796;
  --chip:#17253B; --navy-2:#9CC2FF; --orange-ink:#FFB27A; --btn:#9CC2FF; --btn-hover:#B9D4FF; --btn-ink:#0D1624;
  color-scheme: dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:inherit}

/* ── the bar ── */
.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;
  padding:12px 18px;background:linear-gradient(var(--bg) 70%,transparent);pointer-events:none}
.bar>*{pointer-events:auto}
@media (min-width:761px){ .panel-open .bar{right:380px} }
.title{display:flex;flex-direction:column;gap:2px;min-width:0}
.title a{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sub);text-decoration:none}
.title a:hover{color:var(--text)}
.title h1{font:700 26px/1.05 var(--serif);color:var(--navy-2);letter-spacing:.01em}
.search{position:relative;margin-left:auto}
.walk-link{margin-left:auto;display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;background:var(--btn);color:var(--btn-ink);
  font:600 13.5px/1 var(--sans);text-decoration:none;white-space:nowrap}
.walk-link:hover{background:var(--btn-hover)}
.walk-link+.search{margin-left:0}

.search input{width:250px;max-width:52vw;height:38px;border:1px solid var(--line);border-radius:999px;background:var(--chip);
  padding:0 14px 0 34px;font-size:14px;outline:none}
.search input:focus{border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(255,146,40,.25)}
.search svg{position:absolute;left:12px;top:11px;width:16px;height:16px;color:var(--sub)}
.sugg{position:absolute;top:44px;right:0;width:300px;max-width:80vw;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(4,30,66,.18);overflow:hidden;display:none}
.sugg.open{display:block}
.sugg button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 14px;font-size:14px;cursor:pointer}
.sugg button small{color:var(--sub);margin-left:6px}
.sugg button[aria-selected="true"],.sugg button:hover{background:var(--bg-2)}

.strands{position:fixed;left:18px;bottom:16px;z-index:5;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 36px - 380px)}
.strand{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--chip);font-size:12.5px;cursor:pointer;user-select:none;white-space:nowrap}
.strand i{width:16px;height:4px;border-radius:2px;background:var(--c)}
.strand b{font-weight:600;color:var(--sub);font-size:11.5px}
.strand[aria-pressed="false"]{opacity:.45}
.strand[aria-pressed="false"] i{background:transparent;outline:1px dashed var(--c)}

.zoom{position:fixed;right:18px;bottom:16px;z-index:5;display:flex;flex-direction:column;gap:6px}
.panel-open .zoom{right:398px}
.zoom button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--chip);cursor:pointer;font-size:18px;line-height:1}
.zoom button:hover,.strand:hover{border-color:var(--navy-2)}

.crumbs{position:fixed;top:72px;left:18px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;max-width:calc(100% - 420px)}
.crumbs button{border:0;background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:4px 11px;cursor:pointer}
.crumbs button:last-child{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.crumbs span{color:var(--sub)}

#tip{position:fixed;z-index:9;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 11px;
  font-size:13px;line-height:1.4;max-width:300px;box-shadow:0 8px 24px rgba(4,30,66,.16);opacity:0;transition:opacity .12s}
#tip b{display:block;font-size:14px}
#tip small{color:var(--sub)}

/* ── the panel ── */
#panel{position:fixed;top:0;right:0;bottom:0;width:380px;z-index:6;background:var(--panel);border-left:1px solid var(--line);
  overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 28px;box-shadow:-10px 0 30px rgba(4,30,66,.08)}
#panel[hidden]{display:none}
.x{position:sticky;top:0;float:right;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--chip);cursor:pointer;font-size:18px;z-index:2}
.who{display:flex;gap:14px;align-items:center;margin:4px 0 12px;clear:none}
.face{flex:0 0 84px;width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--bg-2);border:3px solid var(--c, var(--line))}
.face img{width:100%;height:100%;object-fit:cover}
.face.tree-face{display:grid;place-items:center}
.who h2{font:700 23px/1.12 var(--serif);color:var(--navy-2)}
.who p{font-size:13px;color:var(--sub);margin-top:4px}
.short{font:400 16px/1.45 var(--serif);margin:2px 0 10px}
.members{font-size:13px;color:var(--sub);margin-bottom:10px}
.open{display:inline-flex;align-items:center;gap:6px;font:600 13.5px/1 var(--sans);color:var(--btn-ink);background:var(--btn);border-radius:999px;padding:10px 15px;text-decoration:none}
.open:hover{background:var(--btn-hover)}
.facts{display:flex;gap:16px;margin:14px 0 4px;font-size:12px;color:var(--sub)}
.facts b{display:block;font:700 18px/1.1 var(--serif);color:var(--text)}
h3.sec{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin:22px 0 10px;display:flex;align-items:center;gap:10px}
h3.sec::after{content:"";flex:1;border-top:1px solid var(--line)}
.near{list-style:none;display:flex;flex-direction:column;gap:2px}
.near li{border-radius:10px}
.near li>button{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;text-align:left;border:0;background:none;
  padding:9px 8px;cursor:pointer;border-radius:10px}
.near li>button:hover,.near li.on>button{background:var(--bg-2)}
.near .nm{font:600 14.5px/1.25 var(--sans)}
.near .bar-w{grid-row:span 2;width:46px;height:6px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.near .bar-w i{position:absolute;left:0;top:0;bottom:0;background:var(--navy-2);border-radius:3px}
.near .why{font-size:12.5px;color:var(--sub);line-height:1.35}
.braid{display:inline-flex;gap:2px;vertical-align:middle;margin-right:5px}
.braid i{width:9px;height:4px;border-radius:2px;background:var(--c)}
.detail{padding:2px 8px 12px 8px;font-size:13px;line-height:1.45}
.detail p{margin:5px 0}
.detail .k{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:7px}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.thumbs a{display:block;width:64px;height:64px;border-radius:6px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.detail ul{list-style:none;margin:4px 0}
.detail li a{color:var(--navy-2)}
.intro p{font:400 15.5px/1.5 var(--serif);margin:0 0 10px}
.intro .try{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.intro .try button{border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.intro .try button:hover{border-color:var(--navy-2)}
.key{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;font-size:13px;align-items:center;margin-top:6px}
.key i{width:22px;height:4px;border-radius:2px;background:var(--c)}
.key svg{width:20px;height:24px}
.small,.intro p.small{font:400 12px/1.5 var(--sans);color:var(--sub);margin-top:14px}

@media (max-width:760px){
  .bar{padding:10px 12px}
  .title h1{font-size:21px}
  .bar{flex-wrap:nowrap}
  .search input{width:150px}
  .title a{font-size:9.5px;letter-spacing:.1em;white-space:nowrap}
  .title h1{white-space:nowrap}
  .walk-link{height:32px;padding:0 11px;font-size:12px}
  .crumbs{top:70px;left:12px;max-width:calc(100% - 24px);font-size:12px}
  .crumbs:not(:empty)~.strands{top:104px}
  .strands{left:12px;bottom:auto;top:70px;max-width:calc(100% - 24px);gap:5px}
  .strand{height:26px;font-size:11.5px;padding:0 9px 0 7px}
  .strand b{display:none}
  .panel-open .strands{display:none}
  #panel{top:auto;left:0;width:auto;height:min(58vh,560px);border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    box-shadow:0 -10px 30px rgba(4,30,66,.14)}
  .zoom{right:12px;bottom:14px}
  .panel-open .zoom{right:12px;bottom:calc(min(58vh,560px) + 12px)}
}
@media (prefers-reduced-motion: reduce){ .tree use.main{transition:none} }
@media (max-width:420px){ .title a{display:none} }