/* experience.css — FE-3 layer: rising tallies, the persistent event sidebar
   (with flagship prominence), the type legend, the year selector and the
   accessible chronological fallback list. Extends the Cartographic Nocturne
   tokens. The map is never covered by an overlay. */

/* Allow the page to scroll down to the fallback list (the visualisation still
   fills the first viewport; the FE-1 shell set overflow:hidden which would clip
   the appended fallback section). */
html, body { overflow-x: hidden; }
/* The visualisation fills the first viewport exactly; the fallback list lives
   below it (a sibling of #sss-app, appended to <body>) and the page scrolls to
   reveal it. Fixing the app to the viewport height keeps the absolutely-
   positioned map SVG from collapsing when the page grows past 100vh. */
.sss-app { overflow: hidden; height: 100vh; height: 100dvh; }
/* On narrow screens the app stacks (header, map, event panel, tallies, timeline)
   and may exceed one viewport — let it grow and the page scroll, so nothing is
   clipped and nothing overlays the map. */
@media (max-width: 760px) {
  .sss-app { overflow: visible; height: auto; min-height: 100vh; min-height: 100dvh; }
}

/* ---- Header row (eyebrow + year selector) ------------------------------- */
.sss-header__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* ---- Year selector ------------------------------------------------------ */
.sss-years {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.sss-years__label {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-sec);
  opacity: 0.7;
}
.sss-years__btn {
  border: 1px solid rgba(214, 157, 163, 0.24);
  background: rgba(0, 15, 31, 0.4);
  color: var(--accent-sec);
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.sss-years__btn:hover { color: var(--text); border-color: rgba(214, 157, 163, 0.5); }
.sss-years__btn[aria-pressed='true'] {
  color: var(--bg-deepest);
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-color: transparent;
  font-weight: 700;
}
.sss-years__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Static single-year label (shown in place of the filter for Year One). */
.sss-years__static {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

/* ---- Persistent event sidebar (left column) ----------------------------- */
/* The map is NEVER covered anymore — event detail lives here and updates as the
   timeline moves. Silver Sword events get elevated (flagship) treatment; Collab
   and Popup are understated. Colour-coding is driven by the sss-side--<type>
   modifier set in sidebar.js. */

/* Intro / empty panel (before the first event). */
.sss-side__intro {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: auto 0;
}
.sss-side__intro-kicker {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-sec);
  opacity: 0.85;
}
.sss-side__intro-lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--text);
}
.sss-side__intro-body {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--accent-sec);
  opacity: 0.9;
}

/* Active-event panel. A gold accent bar runs down the left edge; its intensity
   is dialled up for the flagship (Silver Sword) type. */
.sss-side__event {
  display: flex;
  gap: 0.9rem;
  align-items: stretch;
}
.sss-side__accent {
  flex: 0 0 3px;
  border-radius: 999px;
  background: var(--type-collab);
  opacity: 0.5;
  transition: background 260ms ease, opacity 260ms ease, flex-basis 260ms ease;
}
.sss-side__inner {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  min-width: 0;
}
.sss-side__kicker {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-sec);
}
.sss-side__chip {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg-deepest);
  background: var(--type-collab);
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
}
.sss-side__title {
  margin: 0.1rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--text);
}
.sss-side__venue {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--accent-sec);
}
.sss-side__date {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.92;
}
.sss-side__stats {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 0.15rem;
}
.sss-side__note {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text);
  opacity: 0.8;
  /* Understated types clamp the note; the flagship shows it in full (below). */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sss-side__link {
  align-self: flex-start;
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 197, 128, 0.35);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.sss-side__link:hover { color: var(--text); border-color: var(--text); }
.sss-side__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Type colour-coding: kicker + chip + accent bar. */
.sss-side--sword .sss-side__kicker { color: var(--type-sword); }
.sss-side--sword .sss-side__chip { background: var(--type-sword); }
.sss-side--sword .sss-side__accent { background: var(--type-sword); }
.sss-side--collab .sss-side__kicker { color: var(--type-collab); }
.sss-side--collab .sss-side__chip { background: var(--type-collab); }
.sss-side--collab .sss-side__accent { background: var(--type-collab); }
.sss-side--popup .sss-side__kicker { color: var(--type-popup); }
.sss-side--popup .sss-side__chip { background: var(--type-popup); }
.sss-side--popup .sss-side__accent { background: var(--type-popup); }

/* Flagship prominence — Silver Sword events are visibly ELEVATED: a bold gold
   accent bar, a larger title with a soft glow, and the note shown IN FULL. */
.sss-side--sword .sss-side__accent {
  flex-basis: 5px;
  opacity: 1;
  box-shadow: 0 0 12px rgba(228, 197, 128, 0.45);
}
.sss-side--sword .sss-side__title {
  font-size: 1.5rem;
  text-shadow: 0 0 22px rgba(228, 197, 128, 0.22);
}
.sss-side--sword .sss-side__note {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.sss-side--sword .sss-side__inner {
  gap: 0.5rem;
}

/* Understated types: muted accent, smaller title (the defaults above already
   render this way; kept explicit so the contrast with the flagship is clear). */
.sss-side--collab .sss-side__accent,
.sss-side--popup .sss-side__accent {
  flex-basis: 3px;
  opacity: 0.5;
  box-shadow: none;
}

/* Upcoming selection — the kicker already reads "UPCOMING · <date>"; tint the
   accent + date gold to match the timeline's ghosted-future styling. */
.sss-side--upcoming .sss-side__accent {
  background: var(--gold);
  opacity: 0.9;
  border-style: dashed;
}
.sss-side--upcoming .sss-side__kicker { color: var(--gold); }

/* ---- Type legend (bottom-left of the stage) ----------------------------- */
.sss-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  padding: 0.42rem 0.72rem;
  border-radius: 12px;
  background: rgba(0, 15, 31, 0.55);
  border: 1px solid rgba(214, 157, 163, 0.16);
  backdrop-filter: blur(4px);
}
.sss-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.sss-legend__sw {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
.sss-legend__sw--sword { background: var(--type-sword); box-shadow: 0 0 8px rgba(228, 197, 128, 0.6); }
.sss-legend__sw--collab { background: var(--type-collab); box-shadow: 0 0 8px rgba(214, 157, 163, 0.5); }
.sss-legend__sw--popup { background: var(--type-popup); box-shadow: 0 0 8px rgba(157, 184, 216, 0.5); }
.sss-legend__label {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.82;
}

/* ---- First-load discoverability hint ------------------------------------ */
.sss-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 6px);
  z-index: 18;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(0, 15, 31, 0.7);
  border: 1px solid rgba(228, 197, 128, 0.24);
  box-shadow: 0 4px 18px rgba(0, 9, 20, 0.5);
  backdrop-filter: blur(4px);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--accent-sec);
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease, transform 500ms ease;
  white-space: nowrap;
  max-width: 88vw;
}
.sss-hint--in { opacity: 1; transform: translate(-50%, 0); }
.sss-hint--no-anim { transition: none; }

/* ---- Tallies (right rail thermometers) ---------------------------------- */
.sss-tallies {
  gap: 0.9rem;
  justify-content: center;
}
/* "(estimated)" qualifier — shown on the rail when the head is beyond today and
   the totals include projected future events. A small gold pill so projections
   read clearly as not-yet-fact. */
.sss-tally__estimated {
  align-self: center;
  font-family: var(--font-ui);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(228, 197, 128, 0.5);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  margin-bottom: 0.2rem;
}
.sss-tally {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.15rem 0;
}
.sss-tally__num {
  font-family: var(--font-numeral);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-shadow: 0 0 18px rgba(228, 197, 128, 0.12);
}
.sss-tally__cap {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-sec);
  opacity: 0.85;
}
.sss-tally__sub {
  font-family: var(--font-ui);
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  color: var(--text);
  opacity: 0.5;
  margin-top: -0.06rem;
}
.sss-tally__bar {
  position: relative;
  display: block;
  height: 4px;
  margin-top: 0.28rem;
  border-radius: 999px;
  background: rgba(214, 157, 163, 0.16);
  overflow: hidden;
}
.sss-tally__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  box-shadow: 0 0 8px rgba(228, 197, 128, 0.35);
}

/* ---- Fallback chronological list ---------------------------------------- */
.sss-fallback {
  flex: 0 0 auto;
  padding: 0.9rem 1.4rem 1.6rem;
  border-top: 1px solid rgba(214, 157, 163, 0.10);
  background: rgba(0, 9, 20, 0.35);
}
.sss-fallback__empty {
  font-family: var(--font-display);
  color: var(--gold);
  letter-spacing: 0.06em;
  text-align: center;
  padding: 1rem;
}
.sss-fallback__summary {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-sec);
  cursor: pointer;
  padding: 0.3rem 0;
}
.sss-fallback__summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sss-fallback__list {
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.7rem;
  color: var(--text);
}
.sss-fallback__item::marker { color: var(--accent-sec); }
.sss-fallback__name {
  display: inline-block;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.sss-fallback__name:hover:not(:disabled) { color: var(--gold); }
.sss-fallback__name:disabled { cursor: default; }
.sss-fallback__name:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sss-fallback__meta {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--accent-sec);
  opacity: 0.9;
}
.sss-fallback__note {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-style: italic;
  color: var(--text);
  opacity: 0.72;
}
.sss-fallback__link {
  display: inline-block;
  margin-top: 0.15rem;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 197, 128, 0.35);
}
.sss-fallback__link:hover { color: var(--text); border-color: var(--text); }
.sss-fallback__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Hover / focus on pins (interactivity) ------------------------------ */
.sss-pin { cursor: pointer; }
.sss-pin__hit { cursor: pointer; } /* invisible >=24px touch target (A7) */
.sss-pin .sss-pin__node { transition: fill 300ms ease, r 200ms ease, fill-opacity 300ms ease; }
.sss-pin:hover .sss-pin__node,
.sss-pin:focus-visible .sss-pin__node { r: 5.4; fill: var(--gold); fill-opacity: 1; }
.sss-pin:hover .sss-pin__halo,
.sss-pin:focus-visible .sss-pin__halo { stroke: var(--gold); stroke-opacity: 0.75; }
.sss-pin:focus-visible { outline: none; }
.sss-pin:focus-visible .sss-pin__halo { stroke-width: 1.6; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
  /* Tallies become a compact horizontal scroll-row of smaller tiles. */
  .sss-tallies {
    flex-direction: row;
    gap: 1.1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.6rem 1rem;
    scrollbar-width: none;
  }
  .sss-tallies::-webkit-scrollbar { display: none; }
  .sss-tally {
    flex: 0 0 auto;
    min-width: 84px;
  }
  .sss-tally__num { font-size: 1.5rem; }
  .sss-tally__cap { font-size: 0.56rem; letter-spacing: 0.1em; }

  /* The event panel is a normal block below the map (see tokens.css) — nothing
     overlays the map on mobile. Give the note a touch more room here. */
  .sss-side--sword .sss-side__title { font-size: 1.35rem; }
  .sss-side__intro { margin: 0; }

  .sss-header__row { gap: 0.7rem; }

  /* Legend: compact, and lifted clear of the discoverability hint at the very
     bottom. Wraps rather than overflowing on the narrowest screens. */
  .sss-legend {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 0.25rem 0.7rem;
    padding: 0.36rem 0.6rem;
    justify-content: center;
  }
  .sss-legend__label { font-size: 0.56rem; letter-spacing: 0.05em; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sss-hint,
  .sss-side__accent,
  .sss-tally__bar-fill,
  .sss-pin .sss-pin__node { transition: none; }
}