/* ==========================================================================
   Prophetic Footsteps — /sahaba-timeline/ (timeline.css)
   Built from _reference/build/seerah_timeline.py; drawn by assets/js/timeline.js.
   Colours are the people cards' own: --pf-accent from pf-accent-oasis / rose / lapis.
   Cause colours (battle, strife, plague, other) are separate so the two never get confused.
   ========================================================================== */
.tl-hero{ padding-bottom:clamp(28px, 4vw, 48px); }
.tl-hero .pf-hero-copy{ max-width:52rem; }

/* ---- the slider bar: stays in view while the sections scroll ---- */
.tl-bar{
  position:sticky; top:0; z-index:40; background:rgba(255,253,247,.97); border-bottom:1px solid var(--pf-line-strong);
  box-shadow:0 10px 22px -18px rgba(16,22,47,.55);
}
@supports (backdrop-filter:blur(8px)){ .tl-bar{ background:rgba(255,253,247,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } }
.tl-bar-inner{ display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:6px 16px; padding-top:9px; padding-bottom:5px; }
.tl-play{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer; padding:0; color:var(--pf-star); background:var(--pf-night);
  border:0; border-radius:50%; transition:transform .15s ease, background-color .15s ease;
}
.tl-play:hover{ background:#232c58; transform:scale(1.06); }
.tl-play svg{ width:21px; height:21px; }
.tl-bar-year, .tl-bar-count{ margin:0; font-family:var(--pf-font-head); font-weight:700; color:var(--pf-gold-deep); white-space:nowrap; }
.tl-bar-year span{ font-size:.85rem; letter-spacing:.06em; }
.tl-bar-year b, .tl-bar-count b{ font-family:var(--pf-font-serif); font-weight:600; font-size:clamp(1.7rem, 4vw, 2.3rem); line-height:1; color:var(--pf-night); font-variant-numeric:lining-nums tabular-nums; }
.tl-bar-count{ display:flex; align-items:baseline; gap:6px; font-weight:600; font-size:.88rem; color:var(--pf-c-soft); }
.tl-bar-event{ margin:0; padding:0 var(--pf-gutter, 20px) 8px; max-width:var(--pf-max, 1180px); margin-inline:auto; font-size:.9rem; line-height:1.4; color:var(--pf-ink-body); min-height:1.45em; }
.tl-range{ -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; padding:0; background:transparent; cursor:pointer; --tl-thumb:30px; }
.tl-range::-webkit-slider-runnable-track{ height:8px; border-radius:6px; background:var(--pf-line-strong); }
.tl-range::-moz-range-track{ height:8px; border-radius:6px; background:var(--pf-line-strong); }
.tl-range::-moz-range-progress{ height:8px; border-radius:6px; background:var(--pf-gold); }
.tl-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:var(--tl-thumb); height:var(--tl-thumb); margin-top:-11px; border:0; border-radius:0; background:transparent no-repeat center / contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='%23FFD36E' stroke='%2310162F' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='18' height='18' rx='2'/%3E%3Crect x='6' y='6' width='18' height='18' rx='2' transform='rotate(45 15 15)'/%3E%3C/g%3E%3C/svg%3E");
  filter:drop-shadow(0 2px 3px rgba(16,22,47,.35));
}
.tl-range::-moz-range-thumb{
  width:var(--tl-thumb); height:var(--tl-thumb); border:0; border-radius:0; background:transparent no-repeat center / contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='%23FFD36E' stroke='%2310162F' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='18' height='18' rx='2'/%3E%3Crect x='6' y='6' width='18' height='18' rx='2' transform='rotate(45 15 15)'/%3E%3C/g%3E%3C/svg%3E");
}
.tl-play:focus-visible, .tl-chip:focus-visible, .tl-range:focus-visible, .tl-card:focus-visible, .tl-pin:focus-visible{ outline:3px solid var(--pf-gold); outline-offset:3px; }

/* ---- sections ---- */
.tl-sec{ scroll-margin-top:96px; border-top:1px solid var(--pf-line); }
.tl-sec:first-of-type{ border-top:0; }
.tl-head{ max-width:52rem; margin:0 0 clamp(18px, 2.4vw, 28px); }
.tl-head .pf-h2{ margin:.1em 0 .3em; }
.tl-head .pf-lead{ margin:0; }
.tl-sub{ margin:clamp(26px, 3vw, 38px) 0 12px; }
.tl-note{ margin:16px 0 0; font-size:.86rem; line-height:1.55; color:var(--pf-c-soft); max-width:54rem; }

/* ---- chips and legends ---- */
.tl-chips{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tl-chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:var(--pf-font-head); font-weight:700; font-size:.82rem; line-height:1.2;
  color:var(--pf-ink); background:var(--pf-card); border:1.5px solid var(--pf-line-strong); border-radius:999px; padding:8px 14px;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tl-chip b{ font-family:var(--pf-font-serif); font-weight:600; color:var(--pf-gold-deep); font-size:.92rem; }
.tl-chip:hover{ border-color:var(--pf-gold); }
.tl-chip[aria-pressed="true"]{ background:var(--pf-night); border-color:var(--pf-night); color:var(--pf-star); }
.tl-chip[aria-pressed="true"] b{ color:var(--pf-gold-glow); }
.tl-spot-label{ font-family:var(--pf-font-head); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pf-gold-deep); margin-right:4px; }
.tl-legend{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:.86rem; color:var(--pf-c-soft); }
.tl-legend li{ display:inline-flex; align-items:center; gap:8px; }
.tl-key{ --pf-s:20px; }
.tl-state{ position:relative; width:18px; height:18px; flex:none; display:inline-block; --s-bg:var(--pf-night); --s-ring:none; --s-op:1; }
.tl-state::before, .tl-state::after{ content:""; position:absolute; inset:14.65%; border-radius:2px; background:var(--s-bg); box-shadow:var(--s-ring); opacity:var(--s-op); }
.tl-state::after{ transform:rotate(45deg); }
.tl-state--unborn{ --s-bg:transparent; --s-ring:inset 0 0 0 1.5px var(--pf-night); --s-op:.4; }
.tl-state--gone{ --s-bg:#C9BFA9; --s-op:.55; }
.tl-sw{ width:14px; height:14px; border-radius:3px; display:inline-block; flex:none; }
.tl-sw--war, .tl-seg--war{ background:#A84F33; fill:#A84F33; }
.tl-sw--strife, .tl-seg--strife{ background:#1C2445; fill:#1C2445; }
.tl-sw--plague, .tl-seg--plague{ background:#E0A92E; fill:#E0A92E; }
.tl-sw--other, .tl-seg--other{ background:#A9B7C4; fill:#A9B7C4; }

/* ---- the stars ---- */
.tl-field{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:5px; }
.tl-field li{ display:block; scroll-margin-top:140px; }
.tl-star{ --pf-s:34px; margin:3px; text-decoration:none; cursor:pointer; border-radius:50%; transition:transform .18s ease, opacity .35s ease, filter .35s ease; }
.tl-star::before, .tl-star::after{ transition:background-color .35s ease, box-shadow .35s ease, opacity .35s ease; }
.tl-star > span{ transition:color .35s ease, opacity .35s ease; }
.tl-star[data-state="alive"]{ filter:drop-shadow(0 0 5px color-mix(in srgb, var(--pf-accent) 55%, transparent)); }
.tl-star[data-state="unborn"], .tl-field--static .tl-star{ color:var(--pf-accent); }
.tl-star[data-state="unborn"]::before, .tl-star[data-state="unborn"]::after,
.tl-field--static .tl-star::before, .tl-field--static .tl-star::after{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--pf-accent); opacity:.4; }
.tl-star[data-state="unborn"] > span, .tl-field--static .tl-star > span{ opacity:.5; }
.tl-star[data-state="gone"]::before, .tl-star[data-state="gone"]::after{ background:#C9BFA9; opacity:.5; }
.tl-star[data-state="gone"]{ color:#FFFDF7; }
.tl-star[data-state="gone"] > span{ opacity:.8; }
.tl-star:hover, .tl-star:focus-visible, .tl-star.is-picked{ transform:scale(1.3); z-index:3; position:relative; }
.tl-star:focus-visible{ outline:3px solid var(--pf-gold); outline-offset:2px; }
.tl-star.is-picked{ outline:2px solid var(--pf-night); outline-offset:2px; }
.tl-field[data-spot] .tl-star:not([data-spot-on]){ opacity:.18; }
.tl-field--static{ margin-top:12px; }
.tl-info{ margin:12px 0 0; min-height:1.5em; font-size:.95rem; color:var(--pf-ink-body); }
.tl-info a{ font-family:var(--pf-font-head); font-weight:700; color:var(--pf-night); border-bottom:2px solid var(--pf-gold); text-decoration:none; margin-left:6px; white-space:nowrap; }
.tl-unplaced{ margin-top:18px; border-top:1px dashed var(--pf-line-strong); padding-top:14px; }
.tl-unplaced summary{ cursor:pointer; font-family:var(--pf-font-head); font-weight:700; font-size:.9rem; color:var(--pf-night); }
.tl-unplaced p{ margin:8px 0 0; font-size:.9rem; color:var(--pf-c-soft); max-width:46rem; }

/* ---- charts ---- */
.tl-chart{ position:relative; height:clamp(150px, 24vw, 260px); margin:0; background:var(--pf-card); border:1.5px solid var(--pf-line-strong); border-radius:18px; padding:10px 10px 0; overflow:hidden; }
.tl-chart svg{ position:absolute; inset:10px 10px 0 10px; width:calc(100% - 20px); height:calc(100% - 10px); display:block; }
.tl-future{ position:absolute; top:0; bottom:0; right:0; left:0; background:rgba(255,253,247,.58); pointer-events:none; }
.tl-playhead{ position:absolute; top:0; bottom:0; width:2px; left:0; margin-left:-1px; background:var(--pf-night); pointer-events:none; }
.tl-tick{ position:absolute; top:0; bottom:0; width:0; border-left:1px dashed rgba(16,22,47,.3); pointer-events:none; }
.tl-tick span{ position:absolute; top:6px; left:5px; white-space:nowrap; font-family:var(--pf-font-head); font-weight:700; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--pf-c-soft); }
.tl-tick--l span{ left:auto; right:5px; }
.tl-axis{ position:relative; height:26px; margin:6px 10px 0; }
.tl-axis-tick{ position:absolute; top:0; transform:translateX(-50%); font-family:var(--pf-font-serif); font-size:.8rem; color:var(--pf-c-soft); font-variant-numeric:lining-nums; }
.tl-chart--bars svg{ inset:10px 10px 0 10px; }
.tl-chart--bars .tl-bin{ transition:opacity .25s ease; }
.tl-chart--bars .tl-bin.is-future{ opacity:.3; }
.tl-chart--bars .tl-bin.is-now .tl-seg{ stroke:var(--pf-night); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.tl-bin-hit{ fill:transparent; cursor:crosshair; }
.tl-ymax{ position:absolute; left:14px; top:8px; font-family:var(--pf-font-serif); font-size:.8rem; color:var(--pf-c-soft); pointer-events:none; }
.tl-legend--cause{ margin-top:0; margin-bottom:12px; }

/* ---- the milestone strip ---- */
.tl-strip{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.tl-card{
  width:100%; height:100%; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:12px 14px; font:inherit;
  background:var(--pf-card); border:1.5px solid var(--pf-line-strong); border-radius:16px; transition:border-color .15s ease, transform .15s ease;
}
.tl-card:hover{ border-color:var(--pf-gold); transform:translateY(-2px); }
.tl-card b{ font-family:var(--pf-font-serif); font-weight:600; font-size:1.9rem; line-height:1; color:var(--pf-night); font-variant-numeric:lining-nums; }
.tl-card span{ font-family:var(--pf-font-head); font-weight:700; font-size:.78rem; color:var(--pf-gold-deep); }
.tl-card i{ font-style:normal; font-size:.85rem; color:var(--pf-c-soft); line-height:1.3; }

/* ---- the sketch map ---- */
.tl-views{ margin-top:0; }
.tl-map{ position:relative; margin-top:14px; border:1.5px solid var(--pf-line-strong); border-radius:18px; overflow:hidden; background:#D8E7E0; }
.tl-map-svg{ display:block; width:100%; height:auto; }
.tl-map-svg[hidden]{ display:none; }
.tl-pin{ cursor:pointer; outline:none; }
.tl-pin.is-empty{ pointer-events:none; }
.tl-pin-dot{ fill:#1C2445; stroke:#FFFDF7; stroke-width:2.5; transition:r .35s ease; }
.tl-pin-ring{ fill:none; stroke:#B88A2B; stroke-width:1.6; stroke-dasharray:3 4; opacity:.85; transition:r .35s ease; }
.tl-pin[data-kind="cluster"] .tl-pin-dot{ fill:#2D4A97; }
.tl-pin:hover .tl-pin-dot, .tl-pin:focus-visible .tl-pin-dot{ fill:#A84F33; }
.tl-pin.is-new .tl-pin-ring{ stroke:#A84F33; stroke-width:2.6; stroke-dasharray:none; animation:tl-pulse 1.4s ease-out infinite; }
.tl-pin-n{ fill:#FFF4D2; font-family:Fraunces, serif; font-weight:700; pointer-events:none; stroke:none; }
.tl-pin-l{ fill:#262B44; font-family:Manrope, sans-serif; font-weight:700; font-size:15px; stroke:#FBF1DC; stroke-width:3.5px; paint-order:stroke; pointer-events:none; transition:opacity .3s ease; }
@keyframes tl-pulse{ 0%{ opacity:1; } 100%{ opacity:.15; } }
.tl-map-legend{ position:absolute; right:12px; top:12px; display:flex; align-items:center; gap:7px; background:rgba(255,253,247,.92); border:1px solid #C9A26A; border-radius:999px; padding:6px 12px; font-family:var(--pf-font-head); font-weight:700; font-size:.74rem; color:#3B3428; }
.tl-dot{ display:inline-block; border-radius:50%; background:#1C2445; }
.tl-dot--1{ width:9px; height:9px; } .tl-dot--5{ width:15px; height:15px; margin-left:6px; } .tl-dot--20{ width:24px; height:24px; margin-left:6px; }
.tl-panel{ margin-top:14px; background:var(--pf-card); border:1.5px solid var(--pf-line-strong); border-radius:18px; padding:16px 18px; }
.tl-panel[hidden]{ display:none; }
.tl-panel-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; font-family:var(--pf-font-head); color:var(--pf-night); }
.tl-panel-close{ cursor:pointer; font:inherit; font-weight:700; font-size:.82rem; color:var(--pf-night); background:none; border:0; border-bottom:2px solid var(--pf-gold); padding:2px 0; }
.tl-panel-list{ list-style:none; margin:0; padding:0; columns:2 260px; column-gap:28px; }
.tl-panel-list li{ break-inside:avoid; padding:4px 0; font-size:.92rem; }
.tl-panel-list li.is-later{ opacity:.55; }
.tl-panel-list a{ font-weight:700; color:var(--pf-night); text-decoration:none; border-bottom:1.5px solid var(--pf-gold); }
.tl-panel-list span{ color:var(--pf-c-soft); font-size:.86rem; }
.tl-places{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:10px; }
.tl-place{ background:var(--pf-card); border:1.5px solid var(--pf-line-strong); border-radius:14px; padding:0 16px; scroll-margin-top:110px; }
.tl-place summary{ cursor:pointer; display:flex; align-items:baseline; gap:10px; padding:12px 0; list-style:none; font-family:var(--pf-font-head); color:var(--pf-night); }
.tl-place summary::-webkit-details-marker{ display:none; }
.tl-place summary small{ font-weight:500; font-size:.8rem; color:var(--pf-c-soft); }
.tl-place-n{ margin-left:auto; font-family:var(--pf-font-serif); font-weight:600; font-size:1.1rem; color:var(--pf-gold-deep); }
.tl-place ul{ list-style:none; margin:0; padding:0 0 12px; }
.tl-place li{ padding:3px 0; font-size:.9rem; }
.tl-place li a{ font-weight:700; color:var(--pf-night); text-decoration:none; border-bottom:1.5px solid var(--pf-gold); }
.tl-place li span{ color:var(--pf-c-soft); font-size:.84rem; }

/* ---- the last ten, notes, next ---- */
.tl-last{ margin:0; padding:0; list-style:none; counter-reset:tl-last; display:grid; gap:8px; }
.tl-last li{ counter-increment:tl-last; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:10px 16px; background:var(--pf-card); border:1.5px solid var(--pf-line-strong); border-radius:14px; }
.tl-last li::before{ content:counter(tl-last); font-family:var(--pf-font-serif); font-weight:600; font-size:1.2rem; color:var(--pf-gold-deep); min-width:1.6ch; }
.tl-last a{ font-family:var(--pf-font-head); font-weight:700; color:var(--pf-night); text-decoration:none; border-bottom:2px solid var(--pf-gold); }
.tl-last span{ color:var(--pf-c-soft); font-size:.9rem; }
.tl-sec--notes .pf-prose p{ max-width:46rem; }
.tl-next{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }

/* ---- tooltip ---- */
.tl-tip{
  position:fixed; z-index:80; max-width:min(290px, 86vw); pointer-events:none; background:var(--pf-night); color:var(--pf-star);
  border-radius:12px; padding:10px 14px 11px; font-size:.82rem; line-height:1.38; box-shadow:0 12px 28px -10px rgba(16,22,47,.55);
}
.tl-tip[hidden]{ display:none; }
.tl-tip span{ display:block; }
.tl-tip-name{ font-family:var(--pf-font-head); font-weight:700; font-size:.94rem; color:#FFFDF7; margin-bottom:2px; }
.tl-tip-dates{ color:#D9D2BC; }
.tl-tip-state{ margin-top:4px; color:var(--pf-gold-glow); font-weight:600; }
.tl-tip-est{ margin-top:4px; color:#D9D2BC; font-style:italic; }
.tl-tip-row{ color:#EDE7D3; }
.tl-tip-cause{ padding-left:14px; position:relative; color:#EDE7D3; }
.tl-tip-cause::before{ content:""; position:absolute; left:0; top:.45em; width:8px; height:8px; border-radius:2px; background:#A9B7C4; }
.tl-tip-cause--war::before{ background:#E58A3F; } .tl-tip-cause--strife::before{ background:#8D97C6; } .tl-tip-cause--plague::before{ background:#E0A92E; }

@media (max-width:700px){
  .tl-bar-inner{ grid-template-columns:auto 1fr auto; grid-template-areas:"play year count" "range range range"; gap:2px 12px; padding-top:7px; }
  .tl-play{ grid-area:play; width:40px; height:40px; }
  .tl-bar-year{ grid-area:year; }
  .tl-bar-count{ grid-area:count; }
  .tl-range{ grid-area:range; height:36px; --tl-thumb:28px; }
  .tl-range::-webkit-slider-thumb{ margin-top:-10px; }
  .tl-bar-event{ font-size:.82rem; padding-bottom:6px; min-height:2.8em; }
  .tl-star{ --pf-s:30px; }
  .tl-field{ gap:3px; }
  .tl-tick span{ display:none; }
  .tl-chart{ border-radius:14px; }
  .tl-map{ border-radius:14px; }
  .tl-map-legend{ font-size:.68rem; padding:4px 9px; }
  .tl-sec{ scroll-margin-top:120px; }
}
@media (prefers-reduced-motion:reduce){
  .tl-star, .tl-star::before, .tl-star::after, .tl-star > span, .tl-play, .tl-pin-dot, .tl-pin-ring{ transition:none; }
  .tl-pin.is-new .tl-pin-ring{ animation:none; }
}