/* Timeline renderer. One screen: header + saved views, zoomable canvas with a detail panel, whole-range minimap. */
:root{
  --bg:#F2F3F6; --surface:#FFFFFF; --ink:#1A2132; --muted:#5A6377; --line:#D8DCE5; --line-soft:#E8EAF0;
  --accent:#2C4FA3; --accent-soft:#E3E9F7; --gold:#A8761C; --danger:#B3261E; --warn-bg:#FBF1DC; --warn:#8A5A00;
  --era-a:#E6EAF3; --era-b:#EDE8DE; --era-text:#3B4458; --power:#4B5568;
  --c-blue:#2C4FA3; --c-rose:#8C3A47; --c-teal:#24786A; --c-violet:#6A4C9C; --c-amber:#946512; --c-slate:#4F5B70; --c-green:#3D7A2E; --c-orange:#B2541B;
  --f-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0F131C; --surface:#161B26; --ink:#E5E8EF; --muted:#9AA3B5; --line:#2A3143; --line-soft:#212838;
  --accent:#8EA7EC; --accent-soft:#1F2A46; --gold:#E2B75C; --danger:#F2867E; --warn-bg:#3A2E14; --warn:#F0C66B;
  --era-a:#1A2131; --era-b:#221F1B; --era-text:#C2C9D8; --power:#A9B3C7;
  --c-blue:#7F9BE6; --c-rose:#D98593; --c-teal:#5FC1AE; --c-violet:#B49AE6; --c-amber:#E0B25A; --c-slate:#A3AEC2; --c-green:#8CCB72; --c-orange:#EE9A62;
  color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--f-body);display:flex;flex-direction:column;overflow:hidden}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;padding-block:calc(14px + env(safe-area-inset-top,0px)) 10px;border-bottom:1px solid var(--line)}
.brand{min-width:0;flex:1 1 260px}
.eyebrow{font:500 11px var(--f-mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase;text-decoration:none}
.eyebrow:hover{color:var(--accent)}
h1{font:400 30px/1.05 var(--f-display);margin:2px 0 0;text-wrap:balance}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search{position:relative}
.search input{font:inherit;height:34px;width:260px;max-width:70vw;padding:0 10px 0 30px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.search svg{position:absolute;left:9px;top:10px;width:14px;height:14px;stroke:var(--muted)}
.results{position:absolute;top:38px;left:0;right:0;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.results button{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;background:none;color:var(--ink);font:inherit;padding:8px 10px;cursor:pointer}
.results button:hover,.results button:focus-visible{background:var(--accent-soft);outline:none}
.results small{font:11px var(--f-mono);color:var(--muted);white-space:nowrap}
.btn{font:inherit;font-weight:500;height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn:hover{border-color:var(--muted)}
.btn:focus-visible,.chip:focus-visible,.icon:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
nav.presets{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:thin}
.chip{flex:none;font:inherit;font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--ink);border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.stage{flex:1;min-height:0;display:flex;position:relative;border-top:1px solid var(--line)}
.view{position:relative;flex:1;min-width:0;background:var(--surface)}
.view canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.view canvas.dragging{cursor:grabbing}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:var(--surface)}
.scale{position:absolute;left:12px;bottom:10px;font:11px var(--f-mono);color:var(--muted);background:var(--surface);border:1px solid var(--line-soft);border-radius:6px;padding:4px 8px;pointer-events:none}
.scale b{color:var(--ink);font-weight:500}
.zoomctl{position:absolute;right:12px;bottom:10px;display:flex;flex-direction:column;gap:4px}
.icon{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 16px var(--f-body);cursor:pointer;display:grid;place-items:center}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;padding:6px 8px;border-radius:6px;white-space:nowrap;z-index:5;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.tip small{display:block;font:11px var(--f-mono);opacity:.8}
aside.panel{width:360px;flex:none;border-left:1px solid var(--line);background:var(--bg);overflow-y:auto;padding:18px 18px 24px;position:relative}
.panel .kind{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.panel .kind i{width:10px;height:10px;border-radius:3px;display:inline-block}
.panel h2{font:400 30px/1.1 var(--f-display);margin:6px 0 4px;text-wrap:balance}
.dates{font:13px var(--f-mono);color:var(--ink)}
.sub{color:var(--muted);margin-top:4px}
.flag{display:inline-block;font:500 11px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--warn-bg);color:var(--warn)}
.status{display:inline-block;font:500 11px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--accent-soft);color:var(--accent)}
.panel section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.panel h3{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.panel p{line-height:1.55;margin:0}
.links{display:flex;flex-wrap:wrap;gap:6px}
.links a,.links button{font:inherit;font-size:13px;color:var(--accent);background:var(--accent-soft);border:0;border-radius:6px;padding:3px 8px;text-decoration:none;cursor:pointer}
.links a:hover,.links button:hover{text-decoration:underline}
ol.fulfil{margin:0;padding:0;list-style:none;display:grid;gap:8px}
ol.fulfil li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline}
ol.fulfil .yr{font:12px var(--f-mono);color:var(--muted);grid-row:span 2}
ol.fulfil button{all:unset;color:var(--accent);cursor:pointer;font-weight:500}
ol.fulfil button:hover{text-decoration:underline}
ol.fulfil small{color:var(--muted)}
ul.src{margin:0;padding:0;list-style:none;display:grid;gap:6px}
ul.src a{color:var(--accent);text-decoration:none}
ul.src a:hover{text-decoration:underline}
ul.src small{display:block;color:var(--muted)}
.close{position:absolute;right:10px;top:10px;display:none}
.legend{display:grid;gap:8px;margin-top:6px}
.legend div{display:flex;align-items:center;gap:8px;color:var(--muted)}
.legend i{width:22px;height:8px;border-radius:3px;display:inline-block;flex:none}
.hint{font-size:13px;color:var(--muted);line-height:1.55}
kbd{font:11px var(--f-mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--surface)}
.mini{border-top:1px solid var(--line);padding-block:8px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg)}
.mini .lbl{display:flex;justify-content:space-between;gap:8px;font:11px var(--f-mono);color:var(--muted);margin-bottom:4px}
.mini canvas{display:block;width:100%;height:38px;border-radius:6px;cursor:pointer;touch-action:none}
@media (max-width:820px){
  h1{font-size:24px}
  aside.panel{position:absolute;left:0;right:0;bottom:0;width:auto;max-height:60%;border-left:0;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.15);border-radius:14px 14px 0 0;z-index:10;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  aside.panel.idle{display:none}
  .close{display:grid}
  .search input{width:200px}
  .scale .rng{display:none}
  .mini .lbl span:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}