/* Design language follows the Library's "How the Library Works" viewer and Alice Wynd's first Public Lands Map:
   58px masthead, map viewer with floating pill tabs, 390px white panel with eyebrow, ruled headline and stat tiles.
   Single light theme by design, matching that family of Labs tools. */
:root{
  color-scheme:light;
  --dark-gray:#25282A; --forest:#1B4633; --forest-dark:#163728; --sand:#D1CCBD; --paper:#FBFAF6;
  --orange-dark:#C9653F; --muted:#5d625f; --line:#e2ddd0; --tile:#f5f2eb; --ground:#eef0ea;
  --layer:#1B4633;
  --display:"Dharma Gothic E","Oswald","Archivo Narrow","Helvetica Neue",sans-serif;
  --body:"Clearface","Source Serif 4",Georgia,serif;
  --ui:"Frutiger","Inter",system-ui,-apple-system,sans-serif;
  --mh:58px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--dark-gray);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;cursor:pointer}

.masthead{height:var(--mh);background:var(--dark-gray);color:#fff;display:flex;align-items:center;gap:18px;padding:0 20px}
.masthead a.logo{color:#fff;display:block;line-height:0}
.masthead a.logo svg{height:30px;width:auto;display:block}
.masthead .title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:26px;letter-spacing:.02em;padding-left:18px;border-left:1px solid rgba(255,255,255,.25);white-space:nowrap}
.masthead .visit{margin-left:auto;color:#fff;font-family:var(--ui);font-size:14px;text-decoration:none;opacity:.85;white-space:nowrap}
.masthead .visit:hover{opacity:1}

.app{position:relative;height:calc(100% - var(--mh));display:flex}
.viewer{position:relative;flex:1 1 0%;min-width:0;overflow:hidden;background:var(--ground)}
#map{position:absolute;inset:0}
.maplibregl-ctrl-bottom-right{bottom:80px}

.tabs{position:absolute;z-index:5;top:14px;left:14px;max-width:calc(100% - 28px);overflow-x:auto;display:flex;background:rgba(255,255,255,.94);border-radius:999px;padding:4px;box-shadow:0 2px 12px rgba(22,55,40,.14);scrollbar-width:none}
.tabs button{border:0;background:none;padding:8px 14px;border-radius:999px;font-family:var(--ui);font-weight:700;font-size:14px;color:var(--dark-gray);white-space:nowrap}
.tabs button[aria-pressed="true"]{background:var(--c,var(--forest));color:#fff}

.yearbox{position:absolute;z-index:3;left:20px;bottom:86px;pointer-events:none;text-shadow:0 0 12px var(--paper),0 0 4px var(--paper)}
.yearstamp{font:700 84px/0.9 var(--display);color:var(--forest-dark);font-variant-numeric:tabular-nums}
.yearsub{font:700 13px/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-dark);margin-top:4px}

.timebar{position:absolute;z-index:5;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.95);border-radius:14px;padding:10px 16px 6px 10px;box-shadow:0 2px 12px rgba(22,55,40,.14)}
.playbtn{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;background:var(--forest);color:#fff;font-size:15px;display:grid;place-items:center}
.playbtn[aria-pressed="true"]{background:var(--orange-dark)}
.slider{flex:1;min-width:0}
.slider input{width:100%;margin:0;accent-color:var(--forest);height:22px}
.ticks{display:flex;justify-content:space-between;font-family:var(--ui);font-size:11px;color:var(--muted);padding:0 2px;font-variant-numeric:tabular-nums}
.ticks button{border:0;background:none;padding:2px 0;font:inherit;color:inherit;min-width:28px;text-align:center}
.ticks button.on{color:var(--forest-dark);font-weight:700}
.ticks button small{display:block;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--orange-dark)}

.jump{position:absolute;z-index:5;top:62px;left:14px;display:flex;gap:6px;flex-wrap:wrap}
.jump button{border:1px solid rgba(37,40,42,.15);background:rgba(255,255,255,.94);border-radius:999px;padding:5px 11px;font-family:var(--ui);font-size:12px;color:var(--dark-gray)}
.jump button:hover{background:#fff;border-color:var(--forest)}

.legend{position:absolute;z-index:4;right:14px;top:14px;background:rgba(255,255,255,.94);border-radius:10px;padding:8px 10px;font-family:var(--ui);font-size:11.5px;color:var(--dark-gray);box-shadow:0 2px 12px rgba(22,55,40,.12);display:grid;gap:4px}
.legend div{display:flex;align-items:center;gap:7px;white-space:nowrap}
.legend i{width:14px;height:10px;border-radius:2px;display:inline-block;flex:0 0 auto}
.legend i.new{background:none;border:2px solid var(--orange-dark);height:12px}
.legend i.enl{background:none;border:2px dashed #2e7d4f;height:12px}

.place{position:absolute;z-index:6;pointer-events:none;font-family:var(--ui);font-size:12px;font-weight:700;color:var(--dark-gray);background:rgba(255,255,255,.97);padding:5px 9px;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.18);max-width:260px}
.place span{display:block;font-weight:400;color:var(--muted);font-size:11px}
:is(.tabs,.jump,.timebar,.panel,.masthead) :is(button,a,input):focus-visible{outline:3px solid var(--orange-dark);outline-offset:2px}

.panel{position:relative;width:400px;flex:0 0 auto;background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column}
.panel-body{flex:1 1 0%;overflow-y:auto;padding:22px 24px 8px}
.eyebrow{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dark)}
.panel h2{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--forest-dark);font-size:54px;line-height:.95;margin:6px 0 10px;border-bottom:5px solid var(--layer);padding-bottom:6px;text-wrap:balance}
#record h2{font-size:42px;overflow-wrap:anywhere}
.intro{font-size:17px;line-height:1.5;margin:0 0 16px}

.yearhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
#yh-new{color:var(--orange-dark);letter-spacing:0;text-transform:none;font-weight:600}
.tally{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tally button{border:0;text-align:left;background:var(--tile);border-radius:8px;padding:9px 10px 8px;min-width:0;border-left:5px solid var(--c);position:relative}
.tally button[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 2px var(--c)}
.tally b{display:block;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;color:var(--forest-dark);font-variant-numeric:tabular-nums}
.tally b small{font-size:16px;color:var(--muted);font-weight:500}
.tally span{font-family:var(--ui);font-size:12px;color:var(--muted);line-height:1.25;display:block;margin-top:3px}
.tally .bar{height:4px;background:#e4dfd3;border-radius:2px;margin-top:6px;overflow:hidden}
.tally .bar i{display:block;height:100%;background:var(--c);transition:width .35s}
.tally .plus{position:absolute;top:8px;right:9px;font-family:var(--ui);font-size:11px;font-weight:700;color:var(--orange-dark)}

.sec{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:24px 0 8px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--ui)}
.chartnote{font-family:var(--ui);font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.4}

.pick{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.pick button{text-align:left;border:0;border-left:5px solid var(--c);background:var(--tile);border-radius:6px;padding:8px 10px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--dark-gray);display:flex;align-items:center;gap:8px}
.pick button img{width:16px;height:16px}
.pick button[aria-pressed="false"]{opacity:.45;border-left-color:#ccc}
.check{display:flex;gap:8px;align-items:center;font-family:var(--ui);font-size:13px;margin-top:10px;color:var(--dark-gray)}
.check input{accent-color:var(--forest);width:16px;height:16px}

.search{width:100%;font-family:var(--ui);font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--dark-gray)}
.stops{list-style:none;margin:12px 0 0;padding:0}
.stops li{border-top:1px solid var(--line)}
.stops li>button{width:100%;text-align:left;border:0;background:none;padding:9px 0;display:flex;align-items:center;gap:12px;font-family:var(--ui);font-weight:700;font-size:14px;color:var(--dark-gray)}
.stops li>button:hover{color:var(--forest-dark)}
.stops li>button i{font-style:normal;flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-size:11px;font-variant-numeric:tabular-nums}
.stops li>button span{margin-left:auto;font-weight:400;font-size:12px;color:var(--muted);white-space:nowrap}
.stops .none,.stops .more{padding:12px 0;font-family:var(--ui);font-size:13px;color:var(--muted)}
.stops .more button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 12px;font-family:var(--ui);font-size:13px}

.nav{display:flex;justify-content:space-between;gap:8px;margin-bottom:14px}
.nav button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 12px;font-family:var(--ui);font-size:13px;color:var(--dark-gray)}
.nav button.next{background:var(--forest);border-color:var(--forest);color:#fff}
.nav button:disabled{opacity:.4;cursor:default}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 6px}
.stats div{background:var(--tile);border-radius:8px;padding:8px 10px;min-width:0}
.stats b{display:block;font-family:var(--display);font-weight:700;font-size:28px;line-height:1;color:var(--forest-dark);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats span{font-family:var(--ui);font-size:12px;color:var(--muted);line-height:1.2;display:block;margin-top:3px}
.detail p{margin:14px 0;font-size:16px;line-height:1.55}
.detail dl{margin:0;font-family:var(--ui);font-size:13px;line-height:1.45}
.detail dt{font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.detail dd{margin:2px 0 0}
.note{margin:18px 0 16px;padding-top:10px;font-family:var(--ui);font-size:11.5px;line-height:1.45;color:var(--muted);border-top:1px solid var(--line)}
.note p{margin:0 0 8px}
.note a{color:inherit}
.note b{color:var(--dark-gray)}

@media (max-width:760px){
  :root{--mh:50px}
  body{overflow:auto}
  html,body{height:auto}
  .masthead{padding:0 16px;gap:14px}
  .masthead a.logo svg{height:24px}
  .masthead .title{font-size:20px;padding-left:14px}
  .masthead .visit{display:none}
  .app{flex-direction:column;height:auto}
  .viewer{flex:none;height:72vh;min-height:460px}
  .panel{width:100%;border-left:0;border-top:1px solid var(--line)}
  .panel-body{overflow:visible;padding:20px 16px 8px}
  .panel h2{font-size:44px}
  .legend{display:none}
  .yearbox{bottom:84px;left:16px}
  .yearstamp{font-size:56px}
  .ticks button small{display:none}
  .ticks{font-size:10px}
  .jump{top:60px}
  .maplibregl-ctrl-group{display:none}
  .maplibregl-ctrl-bottom-right{bottom:84px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}