:root {
  --white: #ffffff;
  --off-white: #fafafa;
  --ink: #111111;
  --ink-soft: #2b2b2b;
  --grey-1: #444444;
  --grey-2: #6b6b6b;
  --grey-3: #9a9a9a;
  --grey-4: #c4c4c4;
  --grey-5: #e4e4e4;
  --line: #e0e0e0;
  --font-display: 'Switzer', 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Switzer', 'Helvetica Neue', sans-serif;
  --radius: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Width of the credit end-cap on the bottom bar in the timeline and location
     views. The legend's `right` and the credit's `width` MUST come from this
     one value — when they disagreed (218 vs 190) the longest legend label,
     "Statistics & Probability", printed underneath "NerdFarm™". */
  --credit-w: 264px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--white);
}

#graph {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#graph canvas { outline: none; }
#graph[hidden], #timeline[hidden] { display: none; }

/* ---------- View toggle ---------- */
#view-toggle {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.vt-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 7px 15px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--grey-2);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
  white-space: nowrap;
}
.vt-btn:hover { color: var(--ink); }
.vt-btn.is-active { background: var(--ink); color: var(--white); }
.vt-btn svg { opacity: 0.85; }

/* ---------- Header ---------- */
#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  pointer-events: none;
}
#header > * { pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; }
.brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-sub {
  font-size: 11px;
  color: var(--grey-3);
  letter-spacing: 0.02em;
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  width: 220px;
  color: var(--grey-2);
  transition: border-color 180ms var(--ease), width 180ms var(--ease);
}
.search-wrap:focus-within {
  border-color: var(--ink);
  width: 260px;
}
.search-wrap svg { flex-shrink: 0; }
.search-wrap input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--ink);
  width: 100%;
}
.search-wrap input::placeholder { color: var(--grey-3); }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--grey-5);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--off-white); }
.search-result-item .swatch {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.search-result-item .sr-cat {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--grey-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.icon-btn:hover { border-color: var(--ink); transform: rotate(-45deg); }

/* ---------- Legend ---------- */
/* ---------- Bottom credit ---------- */
#site-credit {
  position: absolute;
  right: 28px;
  bottom: 26px;
  z-index: 11;
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
#site-credit .sc-mark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--grey-2);
  text-decoration: none;
  transition: color .18s ease;
}
#site-credit .sc-url {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--grey-3);
  transition: color .18s ease;
}
/* Build stamp. Tabular figures keep the string a fixed width as the version
   changes, so the footer never reflows between builds. */
#site-credit .sc-ver {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--grey-3);
  padding-left: 10px;
  border-left: 1px solid var(--line);
  transition: color .18s ease;
}
#site-credit:hover .sc-ver { color: var(--grey-3); }
#site-credit .sc-mark:hover { color: var(--ink); }
#site-credit .sc-mark:hover .sc-url { color: var(--grey-1); }
#site-credit .sc-mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 3px; }

/* The timeline and location views both hand the bottom edge to a full-width
   legend bar, so the credit sits inside that bar rather than floating over it. */
/* The credit becomes the right end-cap of that bar: the legend stops
   --credit-w short of the edge and scrolls within it, and the credit fills the
   gap with the same background and top border so the bar still reads as one
   strip. */
body.view-aggregate #legend,
body.view-chrono #legend { right: var(--credit-w); padding-right: 12px; }
body.view-aggregate #site-credit .sc-url,
body.view-chrono #site-credit .sc-url { display: none; }
body.view-aggregate #site-credit,
body.view-chrono #site-credit {
  bottom: 0;
  right: 0;
  width: var(--credit-w);
  height: 47px;
  padding: 0 24px 0 0;
  justify-content: flex-end;
  align-items: center;
  background: var(--white);
  border-top: 1px solid var(--line);
  z-index: 12;
}
body.view-field #site-credit { display: none !important; }

#legend {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
#legend > * { pointer-events: auto; }

/* --- accordion --- */
/* The list is a separate block from its toggle so it can be collapsed with an
   animated max-height while the button stays pinned to the bottom-left. */
.legend-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: max-height 340ms var(--ease), max-width 340ms var(--ease), opacity 200ms var(--ease);
}
#legend.collapsed .legend-body {
  opacity: 0;
  pointer-events: none;
}
.legend-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey-1);
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.legend-toggle:hover { border-color: var(--grey-3); color: var(--ink); }
.legend-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lt-chev {
  flex-shrink: 0;
  transition: transform 260ms var(--ease);
}
/* the list opens upward out of the button, so the chevron points that way */
#legend.collapsed .lt-chev { transform: rotate(180deg); }
.lt-count {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--grey-3);
}
/* the swatch strip only appears when collapsed, so the button still shows which
   disciplines are visible while the list is hidden */
.lt-dots { display: none; }
#legend.collapsed .lt-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lt-dots .swatch {
  width: 7px; height: 7px; border-radius: 50%;
  transition: opacity 180ms var(--ease);
}
.lt-dots .swatch.dim { opacity: 0.2; }

.legend-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  font-size: 12px;
  color: var(--grey-1);
  cursor: pointer;
  transition: opacity 180ms var(--ease), border-color 180ms var(--ease);
  user-select: none;
}
.legend-item:hover { border-color: var(--grey-4); }
.legend-item.dim { opacity: 0.35; }
.legend-item .swatch {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.legend-item .count {
  color: var(--grey-3);
  font-size: 10.5px;
}

/* ---------- Hint ---------- */
#hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 11.5px;
  color: var(--grey-3);
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: opacity 600ms var(--ease);
  white-space: nowrap;
}
#hint.hidden { opacity: 0; pointer-events: none; }

/* ---------- Node scale (orders of relational magnitude) ---------- */
#node-scale {
  position: absolute;
  bottom: 66px;
  transform: translateX(-50%) translateY(6px);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Centred on the canvas, not the window: the detail panel is always open
     while this is showing, so half its width has to come off the centre or the
     pill slides under it. */
  /* Centred on the free canvas rather than the window: the detail panel is
     always open while this is showing, and the discipline legend holds the
     bottom-left corner, so the pill is centred between the two. */
  left: calc(50vw - 90px);
  max-width: min(calc(100vw - 640px), 720px);
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(6px);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
#node-scale.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#node-scale .node-root {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}
#node-scale .node-step { display: inline-flex; align-items: center; gap: 6px; }
/* On a narrower desktop the row would wrap; the repeated word is what goes. */
@media (max-width: 1200px) {
  #node-scale .node-ord { display: none; }
  #node-scale { gap: 9px; font-size: 10.5px; padding: 7px 13px; }
}
#node-scale .node-step b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  margin-left: 3px;
}
#node-scale .node-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); display: inline-block;
}
#node-scale .node-out { color: var(--grey-3); }
#node-scale .node-out b { color: var(--grey-2); }

@media (max-width: 720px) {
  #node-scale {
    bottom: auto;
    top: 62px;
    gap: 10px;
    padding: 7px 12px;
    font-size: 10.5px;
  }
}

/* On a phone the credit hides its URL and drops to the mark alone, so the
   end-cap can give most of its width back to the legend. */
@media (max-width: 720px) {
  :root { --credit-w: 132px; }
  body.view-chrono #site-credit { padding-right: 14px; }
}

/* ---------- Detail Panel ---------- */
#panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 92vw);
  background: var(--white);
  border-left: 1px solid var(--line);
  z-index: 15;
  transform: translateX(100%);
  transition: transform 420ms var(--ease);
  overflow-y: auto;
  box-shadow: -24px 0 64px rgba(0,0,0,0.06);
}
#panel.open { transform: translateX(0); }

#panel-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
#panel-close:hover { transform: rotate(90deg); border-color: var(--ink); }

#panel-content { padding: 84px 32px 48px; }

.panel-portrait-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grey-5);
  margin-bottom: 22px;
}
.panel-portrait-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  display: block;
}

.panel-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-2);
  margin-bottom: 10px;
}
.panel-category .swatch { width: 7px; height: 7px; border-radius: 50%; }

.panel-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 6px;
}

.panel-meta {
  font-size: 13px;
  color: var(--grey-2);
  margin-bottom: 22px;
}

.panel-divider {
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}

.panel-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-3);
  margin-bottom: 12px;
}

.panel-facts { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.panel-facts li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 16px;
  position: relative;
}
.panel-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

.panel-connections { display: flex; flex-direction: column; gap: 4px; }
.connection-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--grey-5);
  cursor: pointer;
  min-width: 0;
}
.connection-item:last-child { border-bottom: none; }
/* The one edge kept permanently drawn in the network view. Marked so the
   panel and the map agree about which relationship is the persistent one. */
.connection-item.is-primary {
  margin-left: -10px;
  padding-left: 8px;
  border-left: 2px solid var(--ink);
}
.connection-item.is-primary .connection-name { color: var(--ink); }
.connection-item.is-primary .connection-type { color: var(--grey-2); }
.connection-item:hover .connection-name { color: var(--ink); text-decoration: underline; }
.connection-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grey-1);
  transition: color 150ms var(--ease);
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.connection-type {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey-3);
  flex-shrink: 0;
}
.connection-desc {
  font-size: 12.5px;
  color: var(--grey-2);
  line-height: 1.4;
  margin-top: 2px;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.panel-wiki {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 12.5px;
  color: var(--grey-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.panel-wiki:hover { border-color: var(--ink); color: var(--ink); }

.panel-empty {
  font-size: 13px;
  color: var(--grey-3);
}

/* ---------- Timeline: chrome adjustments ---------- */
/* No backdrop-filter here: it would make the header a containing block for the
   position:fixed mobile view toggle. */
body.view-aggregate #header,
body.view-chrono #header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
body.view-aggregate #legend,
body.view-chrono #legend {
  left: 0;
  /* stops where the credit end-cap begins, so the row scrolls inside the bar
     instead of sliding underneath the credit */
  right: var(--credit-w);
  bottom: 0;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  padding: 8px 24px;
  background: var(--white);
  border-top: 1px solid var(--line);
  scrollbar-width: none;
}
body.view-aggregate #legend::-webkit-scrollbar,
body.view-chrono #legend::-webkit-scrollbar { display: none; }
body.view-aggregate .legend-item,
body.view-chrono .legend-item { flex: 0 0 auto; background: transparent; backdrop-filter: none; }
/* The accordion works here too, but the list lies along the bar instead of
   stacking, so the toggle leads the row and the chevron points sideways. */
body.view-aggregate .legend-toggle,
body.view-chrono .legend-toggle { display: flex; order: -1; margin-right: 4px; }
body.view-aggregate .legend-body,
body.view-chrono .legend-body {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}
body.view-aggregate .lt-chev,
body.view-chrono .lt-chev { transform: rotate(90deg); }
body.view-aggregate #legend.collapsed .lt-chev,
body.view-chrono #legend.collapsed .lt-chev { transform: rotate(-90deg); }

/* Collapsed, the bar stops being a bar: it sheds its background and end-cap and
   becomes a floating pill, handing the whole 53px strip back to the timeline. */
body.view-aggregate #legend.collapsed,
body.view-chrono #legend.collapsed {
  left: 22px;
  right: auto;
  bottom: 14px;
  padding: 0;
  background: transparent;
  border-top: none;
  overflow: visible;
}
body.view-aggregate #legend.collapsed ~ #site-credit,
body.view-chrono #legend.collapsed ~ #site-credit {
  bottom: 14px;
  right: 24px;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  border-top: none;
}
body.view-chrono.legend-collapsed .tl-scroll { bottom: 8px; }
body.view-chrono.legend-collapsed #hint { bottom: 52px; }
body.view-chrono #hint { bottom: 68px; }

/* The map is a pane inside Time & Place now, not a view of its own, so the
   old location-only chrome is gone with the scrubber it was making room for. */

/* ---------- Timeline ---------- */
#timeline {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--white);
}
.tl-scroll {
  position: absolute;
  inset: 67px 0 53px 0;
  transition: bottom 340ms var(--ease);
  overflow: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.tl-inner { position: relative; }

/* --- head: axis + stacked event labels --- */
.tl-head {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.tl-corner {
  position: sticky;
  left: 0;
  z-index: 8;
  height: 100%;
  float: left;
  background: var(--white);
  display: flex;
  align-items: flex-end;
  padding-bottom: 8px;
  padding-left: 28px;
}
.tl-corner-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grey-3);
}
.tl-axis { position: absolute; height: 24px; }
.tl-tick {
  position: absolute;
  top: 12px;
  width: 1px;
  height: 5px;
  background: var(--grey-4);
}
.tl-tick.major { top: 8px; height: 9px; background: var(--grey-2); }
.tl-tick-label {
  position: absolute;
  bottom: 12px;
  left: 0;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--grey-2);
  white-space: nowrap;
}
.tl-evlayer { position: absolute; top: 0; }
.tl-ev {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 15px;
  padding-right: 8px;
  cursor: pointer;
  transition: opacity 180ms var(--ease);
}
.tl-ev-dot {
  width: 6px; height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--grey-2);
  background: var(--white);
}
.tl-ev.world .tl-ev-dot { border-radius: 1px; background: var(--ink); border-color: var(--ink); }
.tl-ev-label {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--grey-2);
  white-space: nowrap;
}
.tl-ev.world .tl-ev-label { color: var(--ink); }
.tl-ev:hover .tl-ev-label, .tl-ev.hot .tl-ev-label { color: var(--ink); text-decoration: underline; }
.tl-ev.muted { opacity: 0.22; }
.tl-ev.flip { flex-direction: row-reverse; padding-right: 0; padding-left: 8px; }
.tl-ev.dot-only { padding-right: 0; width: 12px; justify-content: center; }
.tl-ev.dot-only:hover .tl-ev-dot { transform: scale(1.5); }
.tl-ev-dot { transition: transform 160ms var(--ease); }

/* --- body --- */
.tl-body { position: relative; padding-top: 6px; }
.tl-lines { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
.tl-gline { position: absolute; top: 0; bottom: 0; width: 1px; background: #f2f2f2; }
.tl-gline.major { background: var(--grey-5); }
.tl-eline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(17,17,17,0.16) 0 3px, transparent 3px 7px);
}
.tl-eline.world { background: repeating-linear-gradient(to bottom, rgba(17,17,17,0.34) 0 4px, transparent 4px 8px); }
.tl-eline.span { background: rgba(17,17,17,0.045); }
.tl-eline.hot { background: rgba(17,17,17,0.55); }
.tl-eline.muted { opacity: 0.2; }
.tl-break {
  position: absolute;
  top: 0; bottom: 0;
  background: repeating-linear-gradient(115deg, #f4f4f4 0 4px, var(--white) 4px 9px);
  border-left: 1px solid var(--grey-5);
  border-right: 1px solid var(--grey-5);
}

.tl-group { position: relative; }
.tl-group[hidden] { display: none; }
.tl-group-head { position: relative; display: flex; align-items: flex-end; }
.tl-group-name {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 14px 6px 28px;
  background: var(--white);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink);
  align-items: flex-end;
  padding-bottom: 7px;
}
.tl-group-name .swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-bottom: 1px; }
.tl-group-count { font-size: 10px; color: var(--grey-3); letter-spacing: 0.04em; }

.tl-row { position: relative; display: flex; align-items: center; cursor: pointer; }
.tl-row:hover { background: rgba(0,0,0,0.014); }
.tl-name {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  padding: 0 14px 0 28px;
  background: var(--white);
  transition: opacity 160ms var(--ease);
}
.tl-row:hover .tl-name { background: #fbfbfb; }
.tl-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  filter: grayscale(1);
  background: var(--grey-5);
  object-fit: cover;
}
.tl-thumb.placeholder { display: block; }
.tl-name-text {
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-row:hover .tl-name-text { color: var(--ink); }

.tl-bar {
  position: absolute;
  top: 50%;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 6px;
  background: var(--bar, var(--grey-2));
  z-index: 1;
  transition: opacity 160ms var(--ease), height 160ms var(--ease), margin-top 160ms var(--ease);
}
.tl-row:hover .tl-bar { height: 15px; margin-top: -7.5px; }
.tl-bar.living {
  -webkit-mask-image: linear-gradient(to right, #000 0 78%, rgba(0,0,0,0.25) 100%);
  mask-image: linear-gradient(to right, #000 0 78%, rgba(0,0,0,0.25) 100%);
}
.tl-bar.approx {
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.55) 0 3px, transparent 3px 7px);
}
.tl-bar-years {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--grey-3);
  white-space: nowrap;
  pointer-events: none;
  transition: color 160ms var(--ease);
}
.tl-row:hover .tl-bar-years { color: var(--grey-1); }

.tl-row.cold .tl-bar { opacity: 0.16; }
.tl-row.cold .tl-name, .tl-row.cold .tl-bar-years { opacity: 0.34; }
.tl-row.flash .tl-bar { animation: barflash 1.6s var(--ease); }
@keyframes barflash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(17,17,17,0); }
  25% { box-shadow: 0 0 0 4px rgba(17,17,17,0.16); }
  60% { box-shadow: 0 0 0 4px rgba(17,17,17,0.16); }
}

.tl-cursor {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(17,17,17,0.45);
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms var(--ease);
}
.tl-cursor.on { opacity: 1; }
.tl-cursor-year {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- event panel extras --- */
.panel-year {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--grey-2);
  margin-bottom: 4px;
}
#panel-content.is-event { padding-top: 84px; }
.panel-body-text { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.panel-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-tag {
  font-size: 11px;
  color: var(--grey-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}
.panel-category .swatch.sq { border-radius: 1px; }

/* ---------- Loading ---------- */
#loading {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
}
#loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-mark {
  width: 34px; height: 34px;
  border: 2px solid var(--grey-5);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading span {
  font-size: 12.5px;
  color: var(--grey-3);
  letter-spacing: 0.04em;
}

/* ---------- Node tooltip (3d-force-graph default) ---------- */
.scene-tooltip {
  font-family: var(--font-body) !important;
  background: var(--ink) !important;
  color: var(--white) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  #header { padding: 16px 18px; align-items: flex-start; }
  .search-wrap { width: 150px; }
  .search-wrap:focus-within { width: 170px; }
  .brand-sub { display: none; }
  #legend { left: 18px; bottom: 24px; }
  /* the view toggle is a rail on the middle-left here, so the whole bottom
     edge belongs to the legend and the credit shrinks to the wordmark alone */
  #site-credit { right: 18px; bottom: 20px; }
  #site-credit .sc-mark { font-size: 10px; }
  /* no room for the domain or the build stamp beside the mark on a phone */
  #site-credit .sc-url { display: none; }
  #site-credit .sc-ver { display: none; }
  body.view-aggregate #legend,
body.view-chrono #legend { right: 104px; padding-right: 10px; }
  body.view-chrono #site-credit { width: 104px; padding-right: 18px; }
  #hint { display: none; }
  /* an icon-only vertical rail pinned to the middle-left, so the bottom edge
     stays free for each view's own bar */
  #view-toggle {
    position: fixed;
    top: 50%;
    bottom: auto;
    left: 12px;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 3px;
    z-index: 14;
    box-shadow: 0 4px 20px rgba(0,0,0,0.09);
  }
  .vt-label { display: none; }
  .vt-btn { width: 38px; height: 38px; padding: 0; justify-content: center; gap: 0; }
  .vt-btn svg { width: 17px; height: 17px; }
  /* the rail would be clipped by the near-full-width detail sheet */
  body:has(#panel.open) #view-toggle { opacity: 0; pointer-events: none; }
  .tl-scroll { inset: 59px 0 52px 0; }
  /* the name gutter starts clear of the rail */
  .tl-corner, .tl-group-name, .tl-name { padding-left: 54px; }
  body.view-aggregate #legend,
body.view-chrono #legend { right: 104px; bottom: 0; padding: 8px 10px 8px 18px; }
  body.view-chrono #site-credit { bottom: 0; height: 47px; }
  body.view-chrono #legend.collapsed { left: 18px; bottom: 10px; padding: 0; }
  body.view-chrono #legend.collapsed ~ #site-credit {
    bottom: 10px; right: 18px; width: auto; height: auto; padding: 0;
  }
  body.view-chrono.legend-collapsed .tl-scroll { bottom: 8px; }
  body.view-chrono #hint { display: none; }

  #panel-content { padding: 72px 22px 40px; }
  .panel-name { font-size: 22px; }
}

.connection-source {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--grey-3);
  text-decoration: none;
  border-bottom: 1px solid var(--grey-5);
}
.connection-source:hover {
  color: var(--ink);
  border-bottom-color: var(--grey-3);
}

/* ==================== Location view ==================== */

#location {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--white);
}
#location[hidden] { display: none; }

.loc-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.loc-map {
  position: absolute;
  inset: 0;
  display: block;
  cursor: grab;
  touch-action: none;
}
.loc-map.is-grabbing { cursor: grabbing; }

/* --- geography --- */
.loc-sphere { fill: var(--white); stroke: var(--grey-5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.loc-graticule { fill: none; stroke: #f0f0f0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.loc-landmass {
  fill: #f4f4f4;
  stroke: var(--grey-4);
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
}

/* --- trajectory legs --- */
.loc-leg {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
  opacity: 0.55;
}

/* --- place rings --- */
.loc-place { transition: opacity 0.25s var(--ease); }
.loc-place.is-dim { opacity: 0.16; }
.loc-hit { fill: transparent; cursor: pointer; }
.loc-core { fill: var(--ink); pointer-events: none; }
.loc-seg {
  fill: none;
  stroke-linecap: butt;
  cursor: pointer;
  transition: stroke-width 0.15s var(--ease), opacity 0.15s var(--ease);
}
.loc-seg:hover { stroke-width: 8 !important; }
.loc-seg.is-sel { filter: none; }

.loc-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
}

.loc-badge circle { fill: var(--ink); }
.loc-badge text {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  fill: var(--white);
}
.loc-badge { pointer-events: none; }

/* --- continent quick jumps --- */
/* --- globe ---
   It has the top-left corner the seven region buttons used to occupy, and it
   is no longer a "minimap": at 188px it is the region control for this pane,
   so it is sized to be pointed at rather than glanced at. Top-left, because
   the map's own centre of mass is Europe and the Atlantic — the upper left of
   the projection is the emptiest quarter of nearly every window, which is
   exactly why the buttons were put there in the first place. */
.loc-mini {
  position: absolute;
  left: 22px;
  top: 84px;
  width: 208px;
  padding: 10px 10px 8px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  z-index: 5;
}
.loc-mini-label {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-3);
  margin-bottom: 4px;
}
.loc-globe {
  width: 188px;
  height: 188px;
  margin: 0 auto;
}
.loc-globe canvas { display: block; touch-action: none; }
.loc-mini-hint {
  margin-top: 7px;
  font-size: 9.5px;
  letter-spacing: 0.01em;
  color: var(--grey-3);
  text-align: center;
}

/* --- tooltip --- */
.loc-tip {
  position: absolute;
  z-index: 8;
  min-width: 190px;
  max-width: 290px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--grey-4);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.09);
  pointer-events: none;
}
.tip-place {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tip-place span {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--grey-3);
  text-transform: uppercase;
}
.tip-total {
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--grey-2);
  letter-spacing: 0.01em;
}
.tip-rows { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.tip-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.tip-sw { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.tip-name { color: var(--ink-soft); flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tip-yrs { color: var(--grey-3); font-size: 10px; flex: 0 0 auto; }
.tip-more { font-size: 10px; color: var(--grey-3); padding-left: 13px; }
.tip-note { margin-top: 6px; font-size: 10.5px; line-height: 1.4; color: var(--grey-2); }
.tip-cta { margin-top: 7px; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-3); }

/* --- time scrubber --- */
.loc-year {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  min-width: 190px;
}
.loc-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.loc-btn:hover { border-color: var(--grey-3); }
.loc-spans { display: flex; gap: 2px; padding: 2px; background: var(--off-white); border: 1px solid var(--line); border-radius: 999px; }
.loc-span {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border: none;
  background: transparent;
  border-radius: 999px;
  color: var(--grey-2);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.loc-span:hover { color: var(--ink); }
.loc-span.is-active { background: var(--ink); color: var(--white); }

.loc-track {
  position: relative;
  height: 40px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.loc-track:focus-visible { box-shadow: 0 0 0 2px var(--grey-4); border-radius: 4px; }
.loc-axis { position: absolute; inset: 0; border-bottom: 1px solid var(--line); }
.loc-tick {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 6px;
  border-left: 1px solid var(--grey-5);
}
.loc-tick span {
  position: absolute;
  bottom: 8px;
  left: 0;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--grey-3);
  white-space: nowrap;
}
.loc-break {
  position: absolute;
  bottom: 0;
  height: 12px;
  width: 7px;
  transform: translateX(-50%);
  background: var(--white);
  border-left: 1px solid var(--grey-4);
  border-right: 1px solid var(--grey-4);
}
.loc-band {
  position: absolute;
  bottom: 0;
  height: 12px;
  background: rgba(17,17,17,0.09);
  border-left: 1px solid var(--grey-3);
  border-right: 1px solid var(--grey-3);
  pointer-events: none;
  transition: left 0.1s linear, width 0.1s linear;
}
.loc-handle {
  position: absolute;
  bottom: -3px;
  width: 2px;
  height: 18px;
  background: var(--ink);
  transform: translateX(-50%);
  pointer-events: none;
}
.loc-handle::after {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%);
  width: 9px; height: 9px;
  background: var(--ink);
  border-radius: 50%;
}

/* --- panel: places list --- */
.panel-places { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.panel-places li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
  padding-bottom: 6px;
  border-bottom: 1px solid #f2f2f2;
}
.pp-city { color: var(--ink); font-weight: 500; flex: 1 1 auto; }
.pp-yrs { color: var(--grey-2); font-size: 11px; flex: 0 0 auto; }
.pp-src { color: var(--grey-3); font-size: 10px; text-decoration: none; flex: 0 0 auto; }
.pp-src:hover { color: var(--ink); }
.panel-places-total {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-3);
}

/* --- responsive --- */
@media (max-width: 720px) {
  .loc-mini { width: 116px; left: 10px; top: 74px; padding: 7px 7px 5px; }
  .loc-globe { width: 100px; height: 100px; }
  .loc-mini-hint { display: none; }
  .loc-year { font-size: 13px; min-width: 0; }
  .loc-span { font-size: 9.5px; padding: 4px 7px; }
}

/* =========================================================
   THE FIELD — hidden fourth view (the only view with hue)
   ========================================================= */

#brand-mark {
  background: none; border: 0; padding: 0; margin: 0;
  display: flex; align-items: center; cursor: pointer;
  border-radius: 6px; transition: opacity .18s ease, transform .18s ease;
}
#brand-mark:hover { opacity: .55; transform: scale(1.06); }
#brand-mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

body.view-field #legend,
body.view-field #view-toggle,
body.view-field .header-actions,
body.view-field #reset-view,
body.view-field #hint,
body.view-field #panel { display: none !important; }
body.view-field #header { border-bottom-color: transparent; background: transparent; }
body.view-field .brand-sub { color: var(--grey-3); }

#field.fd-root {
  position: absolute; inset: 0; overflow: hidden; background: var(--white);
}
#fd-canvas { position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; }
#fd-canvas:active { cursor: grabbing; }

.fd-fail {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); color: var(--grey-1); font-size: 13px;
}

/* --- top bar --- */
#fd-top {
  position: absolute; left: 22px; right: 22px; top: 74px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; pointer-events: none; z-index: 6;
}
#fd-top > * { pointer-events: auto; }
.fd-kicker {
  font-family: var(--font-body); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey-3); display: block; margin-bottom: 3px;
}
.fd-title h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 25px;
  letter-spacing: -.02em; margin: 0; color: var(--ink); line-height: 1;
}
.fd-title p {
  font-family: var(--font-body); font-size: 11.5px; color: var(--grey-2);
  margin: 6px 0 0; max-width: 33ch; line-height: 1.45;
}

.fd-btn {
  font-family: var(--font-body); font-size: 11px; color: var(--ink);
  background: rgba(255,255,255,.9); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
  backdrop-filter: blur(8px); white-space: nowrap;
}
.fd-btn:hover { background: var(--off-white); border-color: var(--grey-4); }
.fd-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fd-exit { letter-spacing: .02em; }

/* --- readout --- */
#fd-readout {
  position: absolute; right: 22px; top: 132px; z-index: 6;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 14px 12px; min-width: 172px;
}
.fd-rd-year {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  letter-spacing: -.02em; color: var(--ink); line-height: 1; margin-bottom: 9px;
}
.fd-rd-grid { margin: 0; display: grid; gap: 5px; }
.fd-rd-grid > div { display: flex; justify-content: space-between; gap: 12px; }
.fd-rd-grid dt {
  font-family: var(--font-body); font-size: 10px; color: var(--grey-3);
  letter-spacing: .02em; margin: 0;
}
.fd-rd-grid dd {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 500;
  color: var(--ink); margin: 0; text-align: right;
}

/* --- controls --- */
#fd-controls {
  position: absolute; left: 22px; bottom: 108px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.fd-seg {
  display: flex; background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px;
}
.fd-sb {
  font-family: var(--font-body); font-size: 10.5px; color: var(--grey-2);
  background: none; border: 0; border-radius: 999px; padding: 5px 11px;
  cursor: pointer; transition: background .16s ease, color .16s ease;
}
.fd-sb:hover { color: var(--ink); }
.fd-sb.is-on { background: var(--ink); color: #fff; }
.fd-chk {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-body); font-size: 10.5px; color: var(--grey-1);
  background: rgba(255,255,255,.86); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px 4px 9px; backdrop-filter: blur(8px);
}
.fd-chk input { accent-color: #111; width: 12px; height: 12px; margin: 0; }

/* --- colour legend --- */
#fd-legend {
  position: absolute; right: 22px; bottom: 108px; z-index: 6; width: 216px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px 8px;
}
.fd-lg-bar {
  height: 8px; border-radius: 3px; margin-bottom: 6px;
  background: linear-gradient(to right,
    rgb(252,252,252) 0%, rgb(219,235,243) 10%, rgb(125,186,208) 26%,
    rgb(74,158,143) 44%, rgb(214,176,58) 60%, rgb(226,106,45) 76%,
    rgb(193,42,82) 90%, rgb(92,26,108) 100%);
  border: 1px solid var(--grey-5);
}
.fd-lg-lab {
  display: flex; justify-content: space-between; gap: 6px;
  font-family: var(--font-body); font-size: 8.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grey-3);
}
/* The caption sits on its own line beneath the two end labels: once the high
   end started carrying real numbers, three items no longer fit on one 208px
   row without wrapping mid-word. */
.fd-lg-cap {
  margin-top: 3px; font-family: var(--font-body); font-size: 8.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--grey-2);
}
#field .fd-lg-lab span { white-space: nowrap; }
#field #fd-lg-hi { font-variant-numeric: tabular-nums; }

/* --- time scrubber --- */
#fd-scrub {
  position: absolute; left: 22px; right: 22px; bottom: 26px; z-index: 6;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px 12px;
}
.fd-play { width: 28px; height: 28px; padding: 0; font-size: 9px; flex: none; line-height: 1; }
.fd-play.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
#fd-track { position: relative; flex: 1; height: 30px; cursor: pointer; outline: none; }
#fd-track:focus-visible .fd-tk-line { background: var(--ink); }
.fd-tk-line {
  position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--grey-4);
}
.fd-tk-marks { position: absolute; inset: 0; }
.fd-tk-marks i {
  position: absolute; top: 8px; width: 1px; height: 5px;
  background: var(--grey-4); transform: translateX(-.5px);
}
.fd-tk-marks i span {
  position: absolute; top: 8px; left: 0; transform: translateX(-50%);
  font-family: var(--font-body); font-size: 8.5px; color: var(--grey-3);
  white-space: nowrap; letter-spacing: .02em;
}
.fd-tk-cursor {
  position: absolute; top: 0; width: 1px; height: 16px; background: var(--ink);
  transform: translateX(-.5px); pointer-events: none;
}
.fd-tk-cursor b {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.fd-win { display: flex; align-items: center; gap: 4px; flex: none; }
.fd-win > span {
  font-family: var(--font-body); font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey-3); margin-right: 3px;
}
.fd-wb {
  font-family: var(--font-body); font-size: 10px; color: var(--grey-2);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 8px; cursor: pointer;
}
.fd-wb.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- panel --- */
#fd-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: 372px; max-width: 88vw;
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
  border-left: 1px solid var(--line); z-index: 8;
  transform: translateX(101%); transition: transform .34s cubic-bezier(.22,1,.36,1);
  overflow-y: auto; padding: 74px 24px 30px;
}
#fd-panel.is-open { transform: translateX(0); }
#fd-panel-close {
  position: absolute; right: 18px; top: 78px; width: 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 50%; background: #fff;
  cursor: pointer; font-size: 10px; color: var(--grey-1); line-height: 1;
}
#fd-panel-close:hover { background: var(--off-white); color: var(--ink); }
.fd-p-head { margin-bottom: 16px; padding-right: 34px; }
.fd-p-title {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  letter-spacing: -.02em; color: var(--ink); line-height: 1.15;
}
.fd-p-sub {
  font-family: var(--font-body); font-size: 10.5px; color: var(--grey-3);
  margin-top: 4px; letter-spacing: .02em;
}
.fd-p-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; margin-bottom: 18px;
}
.fd-p-metrics > div { background: #fff; padding: 8px 10px; }
.fd-p-metrics span {
  display: block; font-family: var(--font-body); font-size: 8.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--grey-3);
}
.fd-p-metrics b {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.fd-p-h {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2);
  margin: 20px 0 9px; padding-bottom: 5px; border-bottom: 1px solid var(--grey-5);
}
.fd-p-list { list-style: none; margin: 0; padding: 0; }
.fd-p-list li {
  display: flex; gap: 9px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--off-white);
}
.fd-yr {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  color: var(--grey-1); flex: none; width: 52px; font-variant-numeric: tabular-nums;
}
.fd-yr i { color: var(--grey-3); font-style: normal; }
.fd-bl { flex: 1; font-family: var(--font-body); font-size: 11.5px; color: var(--ink); line-height: 1.4; }
.fd-bl em {
  display: block; font-style: normal; font-size: 10px; color: var(--grey-3); margin-top: 2px;
}
.fd-p-list a { color: var(--grey-3); text-decoration: none; font-size: 11px; flex: none; }
.fd-p-list a:hover { color: var(--ink); }

.fd-p-terms { list-style: none; margin: 0; padding: 0; }
.fd-p-terms li { padding: 7px 0; border-bottom: 1px solid var(--off-white); }
.fd-t-bar { height: 3px; background: var(--grey-5); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.fd-t-bar i { display: block; height: 100%; border-radius: 2px; }
.fd-t-txt b {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500; color: var(--ink);
}
.fd-t-txt span {
  font-family: var(--font-body); font-size: 9.5px; color: var(--grey-3);
  margin-left: 7px; letter-spacing: .02em;
}
.fd-t-txt em {
  display: block; font-style: normal; font-family: var(--font-body);
  font-size: 10px; color: var(--grey-2); margin-top: 3px; line-height: 1.4;
}
.fd-p-note {
  font-family: var(--font-body); font-size: 10px; color: var(--grey-3);
  line-height: 1.55; margin: 10px 0 0;
}

/* --- method drawer --- */
.fd-m-p {
  font-family: var(--font-body); font-size: 11.5px; color: var(--ink-soft);
  line-height: 1.62; margin: 0 0 10px;
}
.fd-m-p b { font-weight: 500; }
.fd-m-list { margin: 0; padding-left: 16px; }
.fd-m-list li {
  font-family: var(--font-body); font-size: 11px; color: var(--ink-soft);
  line-height: 1.58; margin-bottom: 8px;
}
.fd-m-list li b { font-weight: 500; color: var(--ink); }
.fd-m-warn li::marker { color: var(--grey-3); }
.fd-m-tab {
  width: 100%; border-collapse: collapse; margin: 4px 0 12px;
  font-family: var(--font-body); font-size: 10.5px;
}
.fd-m-tab th {
  text-align: left; font-weight: 500; font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey-3);
  border-bottom: 1px solid var(--grey-4); padding: 0 6px 5px 0;
}
.fd-m-tab td {
  padding: 6px 6px 6px 0; border-bottom: 1px solid var(--off-white);
  color: var(--ink-soft); vertical-align: top;
}
.fd-m-tab td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.fd-m-hi td { background: var(--off-white); }
.fd-m-fine { font-size: 10px; color: var(--grey-3); margin-top: 14px; }
.fd-m-fine code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; }

@media (max-width: 720px) {
  #fd-top { top: 66px; left: 14px; right: 14px; }
  .fd-title h2 { font-size: 20px; }
  .fd-title p { display: none; }
  #fd-readout { top: 112px; right: 14px; min-width: 0; padding: 8px 11px 9px; }
  .fd-rd-year { font-size: 17px; margin-bottom: 6px; }
  #fd-legend { display: none; }
  #fd-controls { left: 14px; bottom: 128px; gap: 6px; }
  #fd-scrub { left: 14px; right: 14px; bottom: 16px; flex-wrap: wrap; gap: 9px; padding: 9px 12px 11px; }
  #fd-track { min-width: 100%; order: 3; }
  #fd-panel { width: 100%; padding: 66px 18px 26px; }
}

/* =============================================================
   Field view — dark instrument theme.

   The rest of the site is white-on-greyscale by design. This view is
   the single exception: it is the only one that carries hue, and a
   displaced wireframe surface in a viridis ramp is only legible over
   a dark ground. Tokens are redefined locally on #field.fd-root so
   every descendant re-themes by inheritance.
   ============================================================= */
body.view-field { background: #05080b; }
body.view-field #header .brand-name,
body.view-field #brand-mark { color: #e8f0f4; }
body.view-field .brand-sub { color: #7b8f9c; }

#field.fd-root {
  --white: #0f171d;
  --off-white: #17222b;
  --ink: #e8f0f4;
  --ink-soft: #cddae1;
  --grey-1: #b3c3cc;
  --grey-2: #90a4af;
  --grey-3: #6f8592;
  --grey-4: #4a5c68;
  --grey-5: #26333d;
  --line: #24323c;
  background: #05080b;
}

#fd-stage { position: absolute; inset: 0; overflow: hidden; }
.fd-canvas {
  width: 100%;
  height: 100%; position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; }
.fd-canvas:active { cursor: grabbing; }

/* place labels: DOM overlay so type stays crisp at any zoom */
#fd-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fd-lab {
  position: absolute; top: 0; left: 0; white-space: nowrap;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: .01em; color: #cfe0e8;
  text-shadow: 0 0 6px rgba(4,8,11,.95), 0 0 2px rgba(4,8,11,1);
  transform-origin: 0 0; margin: 6px 0 0 8px;
}
.fd-lab.is-plate {
  background: rgba(7, 12, 16, .82); border: 1px solid rgba(127, 212, 193, .22);
  border-radius: 4px; padding: 2px 6px; color: #dcecf2;
  backdrop-filter: blur(3px); text-shadow: none;
}
.fd-lab.is-plate.is-sel { border-color: rgba(127, 212, 193, .7); color: #fff; }
.fd-lab.is-bk { color: #fdf0b8; }
.fd-lab.is-sel { color: #fff; font-weight: 700; }

.fd-loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-body); font-size: 12px; color: #7b8f9c;
}

/* translucent chrome, inverted */
#fd-readout,
#fd-legend,
#fd-controls .fd-seg,
#fd-controls .fd-chk,
#fd-scrub,
.fd-btn { background: rgba(13, 20, 26, .78) !important; backdrop-filter: blur(9px); }
#fd-panel { background: rgba(11, 17, 22, .97) !important; }
.fd-btn { border-color: var(--line); color: var(--ink-soft); }
.fd-btn:hover { background: rgba(24, 36, 45, .92) !important; border-color: var(--grey-4); }
.fd-btn:focus-visible { outline-color: #7fd4c1; }

/* filled states need dark text on the now-light "ink" fill */
#field .fd-sb.is-on,
#field .fd-wb.is-on,
#field .fd-play.is-on { background: #e8f0f4; color: #0b1116; border-color: #e8f0f4; }
#field .fd-chk input { accent-color: #7fd4c1; }
#field #fd-panel-close { background: rgba(24, 36, 45, .9); }
#field #fd-panel-close:hover { background: rgba(36, 52, 64, .95); }
#field .fd-p-metrics > div { background: rgba(24, 36, 45, .85); }
#field .fd-tk-line { background: var(--grey-4); }
#field .fd-tk-cursor b { background: #e8f0f4; }
#field #fd-track:focus-visible .fd-tk-line { background: #7fd4c1; }
#field a { color: #8fd8c6; }

/* the legend bar is a real gradient, so keep its border subtle */
#field .fd-lg-bar { border-color: var(--grey-4); }

/* --- unfurled temporal domain: axis ticks + domain switch --- */
#fd-axis {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity .28s ease;
}
#fd-axis.is-on { opacity: 1; }
.fd-tick.is-axis {
  color: #9fb6c2; font-weight: 600; letter-spacing: .13em; font-size: 8.5px;
}
.fd-tick {
  position: absolute; top: 0; left: 0; white-space: nowrap;
  font-family: var(--font-mono, var(--font-body)); font-size: 9.5px;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  color: #7e97a5; text-shadow: 0 0 5px rgba(4,8,11,.95);
  transform-origin: 0 0; margin: -6px 0 0 -12px;
}
#field .fd-seg-dom { border-color: var(--grey-4); }

/* --- the Method card is a short paper, so it gets a reading column --- */
#fd-panel.is-paper { width: 560px; }
.fd-m-eyebrow {
  font-family: var(--font-mono, var(--font-body)); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grey-3);
  margin: -6px 0 14px;
}
.fd-m-eyebrow code { font-size: 9px; }
.fd-eq {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 13px; line-height: 1.75; text-align: center;
  color: #e2eef3; margin: 12px 0 14px; padding: 11px 14px;
  background: rgba(24, 36, 45, .62); border-left: 2px solid #7fd4c1;
  border-radius: 0 4px 4px 0; overflow-x: auto;
}
.fd-eq sub, .fd-eq sup { font-size: 9px; }
.fd-pf {
  border-left: 1px solid var(--grey-4); padding-left: 11px;
  color: var(--grey-2); font-size: 11px;
}
.fd-m-num { color: #8fd8c6; font-variant-numeric: tabular-nums; }
.fd-m-warn-inline { color: var(--grey-3); }
.fd-m-p sub, .fd-m-p sup { font-size: 9px; }
.fd-m-tab td:nth-child(3) { font-variant-numeric: tabular-nums; }
#field .fd-m-p a, #field .fd-m-list a {
  color: #8fd8c6; text-decoration: none;
  border-bottom: 1px solid rgba(143, 216, 198, .3);
}
#field .fd-m-p a:hover, #field .fd-m-list a:hover { border-bottom-color: #8fd8c6; }

/* --- paper: numeric cells, highlighted row, citations, reference list --- */
.fd-m-tab td.fd-num, .fd-m-tab th.fd-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--font-display); white-space: nowrap;
}
.fd-m-tab tr.fd-m-hl td { color: #b8ece0; background: rgba(127, 212, 193, .07); }
.fd-m-tab tr.fd-m-hl td:first-child { box-shadow: inset 2px 0 0 #7fd4c1; }
.fd-m-tab td .fd-m-fine { display: block; margin-top: 2px; }
a.fd-cite {
  font-family: var(--font-display); font-size: 8.5px; font-variant-numeric: tabular-nums;
  vertical-align: super; line-height: 0; padding: 0 .5px;
  color: #8fd8c6; text-decoration: none; border-bottom: none !important;
}
a.fd-cite:hover { color: #d4f5ec; }
.fd-m-refs {
  margin: 4px 0 12px; padding-left: 22px;
  font-family: var(--font-body); font-size: 10px; color: var(--grey-2); line-height: 1.5;
}
.fd-m-refs li { margin-bottom: 7px; scroll-margin-top: 14px; }
.fd-m-refs li:target { color: #d4f5ec; }
.fd-m-refs i { color: var(--ink-soft); }
#field .fd-m-refs a {
  color: #8fd8c6; text-decoration: none; border-bottom: 1px solid rgba(143, 216, 198, .3);
}
#field .fd-m-refs a:hover { border-bottom-color: #8fd8c6; }

@media (max-width: 720px) {
  #fd-panel.is-paper { width: 100%; }
  .fd-eq { font-size: 11.5px; padding: 9px 10px; }
}
#field .fd-seg-dom .fd-sb.is-on { background: #7fd4c1; color: #071013; border-color: #7fd4c1; }

/* The sub-view toggle now carries the function each view draws, not a noun.
   Set in the serif at a slightly larger size so the Greek reads as notation
   rather than as a mis-encoded character, and widen the tap target back out
   since the labels themselves got much shorter. */
#field .fd-seg-dom .fd-sb {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 12.5px; letter-spacing: .01em; padding: 5px 13px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .fd-lab { font-size: 10px; margin: 5px 0 0 6px; }
  .fd-tick.is-axis {
  color: #9fb6c2; font-weight: 600; letter-spacing: .13em; font-size: 8.5px;
}
.fd-tick { font-size: 8.5px; margin: -5px 0 0 -10px; }
}

/* logo mark inherits colour so it can invert in the Field view */
#brand-mark { color: var(--ink); }
body.view-field #header .brand-title { color: #e8f0f4; }

/* =============================================================
   Under the hood → Breakthroughs
   A 2D layer that sits over the WebGL stage. It is hidden rather
   than unmounted so switching domains stays instant.
   ============================================================= */
#bk-layer {
  position: absolute; inset: 0; z-index: 3; display: none;
  background: #05080b;
}
#bk-layer.is-on { display: block; }
#bk-cv { position: absolute; left: 0; top: 0; display: block; cursor: crosshair; }

#bk-controls {
  position: absolute; left: 18px; bottom: 16px; z-index: 6;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
#bk-controls .fd-seg { background: rgba(13, 20, 26, .82); backdrop-filter: blur(9px); }

/* --- the rail --- */
#bk-rail {
  position: absolute; right: 0; top: 0; bottom: 0; width: 268px; z-index: 5;
  border-left: 1px solid var(--line); background: rgba(8, 13, 17, .96);
  display: flex; flex-direction: column;
}
.bk-rail-hd {
  padding: 66px 12px 10px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 7px; flex: none;
}
#bk-q, #bk-sort {
  width: 100%; font-family: var(--font-body); font-size: 11.5px;
  color: var(--ink); background: rgba(24, 36, 45, .8);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px;
}
#bk-q::placeholder { color: var(--grey-3); }
#bk-q:focus-visible, #bk-sort:focus-visible { outline: 2px solid #7fd4c1; outline-offset: 1px; }
#bk-sort { cursor: pointer; }
#bk-sort option { background: #0f171d; color: var(--ink); }

#bk-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.bk-row {
  width: 100%; text-align: left; background: none; cursor: pointer;
  border: 0; border-bottom: 1px solid rgba(36, 50, 60, .55);
  padding: 8px 12px 8px 10px; display: grid;
  grid-template-columns: 4px 1fr auto; grid-row-gap: 2px; gap: 8px;
  align-items: baseline; font-family: var(--font-body);
}
.bk-row:hover { background: rgba(24, 36, 45, .7); }
.bk-row.is-on { background: rgba(127, 212, 193, .13); }
.bk-row.is-on .bk-row-n { color: #a9e6d8; }
.bk-row > i { grid-row: 1 / span 2; width: 4px; height: 26px; border-radius: 2px; }
.bk-row-n {
  font-size: 12px; font-weight: 500; color: var(--ink-soft); line-height: 1.25;
}
.bk-row-y {
  font-size: 10px; color: var(--grey-3); font-variant-numeric: tabular-nums;
}
.bk-row-m {
  grid-column: 2 / span 2; font-size: 9.5px; color: var(--grey-3);
  letter-spacing: .02em;
}
.bk-rail-ft {
  flex: none; padding: 8px 12px; border-top: 1px solid var(--line);
  font-family: var(--font-body); font-size: 9.5px; color: var(--grey-3);
  letter-spacing: .03em;
}

/* --- hover tooltip --- */
#bk-tip {
  position: absolute; z-index: 7; pointer-events: none; max-width: 250px;
  background: rgba(11, 17, 22, .96); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-family: var(--font-body);
  font-size: 11px; color: var(--ink-soft); line-height: 1.45;
}
#bk-tip[hidden] { display: none; }
#bk-tip b { color: var(--ink); font-weight: 600; }
#bk-tip span { color: var(--grey-2); }
#bk-tip i { color: var(--grey-3); font-style: normal; font-size: 9.5px; }

/* --- detail card additions --- */
.bk-labels li { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.bk-stats li { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.bk-stats .bk-k { font-size: 11px; color: var(--grey-2); }
.bk-stats .bk-v {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.bk-stats em {
  grid-column: 1 / span 2; font-size: 9.5px; color: var(--grey-3);
  font-style: normal; line-height: 1.4;
}
.bk-note, .bk-p {
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.62;
  color: var(--grey-1); margin: 12px 0 0;
}
.bk-note { font-size: 10.5px; color: var(--grey-2); }
.bk-note b, .bk-p b { color: var(--ink); font-weight: 600; }
.bk-src { margin: 14px 0 0; font-size: 11px; }
.bk-fine {
  font-family: var(--font-body); font-size: 9.5px; line-height: 1.55;
  color: var(--grey-3); margin: 9px 0 0;
}

/* --- indicator table --- */
.bk-itab {
  width: 100%; border-collapse: collapse; margin-top: 14px;
  font-family: var(--font-body);
}
.bk-itab th {
  text-align: right; font-size: 8.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grey-3); font-weight: 500;
  padding: 0 0 5px; border-bottom: 1px solid var(--grey-5);
}
.bk-itab th:first-child { text-align: left; }
.bk-itab td {
  font-size: 10.5px; color: var(--ink-soft); padding: 5px 0;
  border-bottom: 1px solid rgba(36, 50, 60, .5); line-height: 1.3;
}
.bk-itab td.bk-n {
  text-align: right; font-variant-numeric: tabular-nums;
  padding-left: 8px; white-space: nowrap; color: var(--grey-2);
}
.bk-itab td.bk-n b { font-size: 11.5px; color: var(--ink); font-weight: 600; }
.bk-itab td.bk-n i {
  display: block; font-style: normal; font-size: 8.5px; color: var(--grey-3);
}
/* these must out-specify `.bk-itab td.bk-n b`, which also sets colour */
.bk-itab td.bk-up b { color: #8fd8c6; }
.bk-itab td.bk-down b { color: #e0a08c; }
.bk-itab tr.is-flat td { color: var(--grey-3); }
.bk-itab tr.is-flat td.bk-n b { color: var(--grey-3); }

@media (max-width: 860px) {
  /* the rail becomes a bottom sheet; resize() measures its height so the
     plot stops above it instead of continuing underneath */
  #bk-rail {
    top: auto; bottom: 0; left: 0; width: 100%; height: 42%;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .bk-rail-hd { padding: 10px 12px; flex-direction: row; }
  /* both control rows stack under the title rather than floating over the
     rail, which is where the domain switch used to land */
  #field.bk-on #fd-controls { top: 104px; bottom: auto; left: 12px; }
  #bk-controls { bottom: auto; top: 146px; left: 12px; right: 12px; }
  #bk-controls .fd-seg, #bk-controls .fd-btn { font-size: 10px; }
  #field.bk-on .fd-title p { display: none; }
}

/* §7 indicator table: five numeric columns, so every column after the first
   is tabular and right-aligned rather than just column 2 (`.fd-m-tab`'s
   default, which was written for two-column tables). */
.fd-m-ind td, .fd-m-ind th { font-size: 10.5px; }
.fd-m-ind td:not(:first-child), .fd-m-ind th:not(:first-child) {
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.fd-m-ind td:last-child, .fd-m-ind th:last-child { color: var(--grey-3); }

/* ==================== Era (chrono) ====================
   Timeline and Location were two views asking the same question with a
   different axis held fixed. They are two panes of one view now, sharing one
   time window. Each pane keeps its own internal layout untouched — #timeline
   and #location still fill their box exactly as before — so all this section
   does is divide the stage and dress the shared control. */

#chrono {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  /* Time gets the larger share: it carries 292 rows and the events band, while
     the map is legible at half the width. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--white);
}
#chrono[hidden] { display: none; }

.ch-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.ch-pane-map {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  /* Clears the floating header. The map used to run full-bleed underneath it,
     which was fine when nothing up there was clickable; the shared window
     control is, so this pane starts below it. Same 67px the timeline's own
     scroll container has always used. */
  padding-top: 67px;
}
.ch-pane-map #location { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
/* The legend flattens into a full-width bar along the bottom of the whole
   view, so both panes have to keep their last rows clear of it. */
body.view-chrono .ch-pane-map #location { padding-bottom: 48px; }
body.view-chrono.legend-collapsed .ch-pane-map #location { padding-bottom: 12px; }
.ch-pane-time {
  display: flex;
  flex-direction: column;
  /* Same 67px clearance under the floating header the map pane uses. The
     controls now live at the head of THIS pane — the axis they drive — so this
     pane needs the header clearance too. */
  padding-top: 67px;
}
.ch-pane-time #timeline { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
/* The control head and the map's readout head are the same height, so the two
   panes' content still starts on the same line. */
.ch-head-time, .ch-head-map { min-height: 47px; box-sizing: border-box; }

/* ---------- shared window control ---------- */

.ch-control { flex: 0 0 auto; }
.ch-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.ch-title {
  font-family: var(--font-display, 'Switzer', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.ch-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.ch-ctrl { display: flex; align-items: center; gap: 10px; }
.ch-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.ch-play:hover { background: #f4f5f6; }
.ch-play[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.ch-spans { display: flex; gap: 4px; }
.ch-span {
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.ch-span:hover { color: var(--ink); background: #f4f5f6; }
.ch-span.is-active { color: var(--ink); border-color: var(--line); background: #f4f5f6; }

/* ---------- the brush on the year axis ---------- */

.tl-brush { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.tl-brush-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(20, 24, 29, 0.045);
  border-left: 1px solid rgba(20, 24, 29, 0.18);
  border-right: 1px solid rgba(20, 24, 29, 0.18);
}
.tl-brush-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  opacity: 0.55;
}
.tl-head { cursor: ew-resize; }
.tl-head .tl-ev { cursor: pointer; }

/* Out of the window: dimmed, never removed. Seeing who the window excludes,
   and where they were, is the reason the two panes sit side by side. This is a
   separate class from `.cold`, which the hover crosshair sets and clears. */
.tl-row.out { opacity: 0.42; }
.tl-row.out .tl-bar { filter: saturate(0.2); }
.tl-ev.out, .tl-eline.out { opacity: 0.13; }
.tl-row, .tl-ev, .tl-eline { transition: opacity 180ms ease; }

@media (max-width: 1100px) {
  /* Below this the two panes are both too narrow to read, so they stack and the
     map takes the smaller half. */
  #chrono { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 0.85fr); }
  .ch-pane-map { border-left: none; border-top: 1px solid var(--line); padding-top: 0; }
  .ch-head { padding: 9px 14px 8px; }
  .ch-span { padding: 3px 6px; }
}

/* ==================== Aggregate view ====================
   All 292 node layouts laid over each other. The disc is WebGL; the rings,
   sector dividers and every label are SVG on top of it, because type in a
   WebGL scene costs more and looks worse than letting the browser set it. */

#aggregate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  background: var(--white);
  /* The whole view sits below the floating header rather than under it: the
     upper half-label rides near the top of the disc and would otherwise land
     behind the brand mark. */
  padding-top: 67px;
  /* and above the flattened legend bar along the bottom edge */
  padding-bottom: 53px;
}
body.view-aggregate.legend-collapsed #aggregate { padding-bottom: 8px; }
#aggregate[hidden] { display: none; }

.agg-stage { position: relative; min-width: 0; overflow: hidden; }
.agg-canvas { position: absolute; inset: 0; }
.agg-canvas canvas { display: block; width: 100%; height: 100%; }
.agg-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.agg-ring { fill: none; stroke: rgba(20,24,29,0.13); stroke-width: 1; }
.agg-div { stroke: rgba(20,24,29,0.07); stroke-width: 1; }
.agg-mirror { stroke: rgba(20,24,29,0.24); stroke-width: 1; stroke-dasharray: 3 4; }
.agg-origin { fill: var(--ink); opacity: 0.5; }
/* Type on the overlay is sized in WORLD units, not pixels: the SVG shares the
   orthographic camera's viewBox so the rings line up with the GL spokes, which
   means roughly 0.44 screen px per unit at 1440x900. A 13px-looking label has
   to be written as ~30. */
/* Every overlay label is knocked out of the spoke mass with a white halo.
   41,000 lines accumulate under the rings, and a label with no halo simply
   disappears into whichever region happens to be dense. */
.agg-overlay text {
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 9px;
  stroke-linejoin: round;
}
/* .agg-ring-label / .agg-origin-label / .agg-half-label were removed with the
   standing captions they styled. The wheel now carries no permanent type: the
   panel prose states the mirror, the rings and the empty centre once, in one
   place, and the readout names whatever is under the cursor. */
/* Only ever the sector under the cursor, so it can be set at full strength
   instead of the 0.6 that kept eighteen permanent captions bearable. */
.agg-sect-text {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 29px;
  font-weight: 600;
  fill: var(--ink);
  opacity: 1;
}
.agg-sect-label { pointer-events: none; }

/* ---------- numeric readout ---------- */

.agg-readout {
  border-left: 1px solid var(--line);
  padding: 22px 22px 28px;
  overflow-y: auto;
  background: var(--white);
}
.agg-r-title {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.agg-r-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.agg-r-note,
.agg-r-foot {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted, #6b7280);
}
.agg-r-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.agg-r-section {
  margin: 22px 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.agg-r-row {
  display: grid;
  grid-template-columns: 1fr 76px 34px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-radius: 3px;
  transition: background 140ms ease;
}
.agg-r-row.is-hot { background: #f4f5f6; }
.agg-r-cat { font-size: 12px; color: var(--ink); }
.agg-r-bars { display: flex; flex-direction: column; gap: 2px; }
.agg-r-bar { height: 4px; border-radius: 1px; min-width: 1px; }
.agg-r-bar.fwd { background: #14181d; }
.agg-r-bar.back { background: rgba(20,24,29,0.28); }
.agg-r-num {
  font-size: 11.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #6b7280);
}
.agg-r-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
  font-size: 11px;
  color: var(--muted, #6b7280);
}
.agg-r-key span { display: inline-flex; align-items: center; gap: 5px; }
.agg-r-key .sw { width: 10px; height: 4px; border-radius: 1px; }
.agg-r-key .sw.fwd { background: #14181d; }
.agg-r-key .sw.back { background: rgba(20,24,29,0.28); }
.agg-r-key-num { opacity: 0.75; }
.agg-r-orders { display: flex; gap: 18px; }
.agg-r-orow { font-size: 11.5px; color: var(--muted, #6b7280); }
.agg-r-orow b {
  display: block;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  #aggregate { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding-top: 60px; }
  .agg-readout { border-left: none; border-top: 1px solid var(--line); padding: 16px 16px 60px; max-height: 44vh; }
}


/* ---------- Era: window emphasis ---------- */

/* Out-of-window rows collapse rather than merely dimming. 292 rows at full
   height is ~9,000 px of gutter to scroll past to reach the ones you asked
   for; at 6 px the excluded rows still show their shape and position (so you
   can see how much of the roster you cut) without owning the viewport.
   The height comes from a custom property because the row sets --rh inline
   and an inline `height` would beat any class. */
.tl-row { height: var(--rh, 30px); transition: height 180ms ease, opacity 180ms ease; }
.tl-row.out {
  height: 6px;
  overflow: hidden;
}
.tl-row.out .tl-name,
.tl-row.out .tl-bar-years,
.tl-row.out .tl-bk { opacity: 0; }
.tl-row.out .tl-bar { top: 2px; height: 2px; opacity: 0.3; }

/* Events outside the window keep their dot and drop their label. The lane
   assignment is computed once for all 113 events, so hiding the text declutters
   the band without reflowing anything that stayed. */
.tl-ev.out .tl-ev-label { display: none; }

/* ---------- Era: breakthrough ticks ---------- */

/* A lifespan bar on its own says only "was alive", which the name beside it
   already implies. These are the 1,832 dated person-years from the model, so a
   bar now shows WHEN the work happened inside the life. */
.tl-bk {
  position: absolute;
  top: 50%;
  /* Taller than the 11px bar so the mark reads as a notch through it and as a
     free-standing tick where it falls outside a bar. White core with a hairline
     outline, because a tick has to be legible on BOTH grounds: an ink tick
     vanishes into a dark bar, and a white tick vanishes into the page. */
  width: 2px;
  height: 17px;
  margin-top: -8.5px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  z-index: 2;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.tl-bk.out { opacity: 0.2; }
.tl-row.cold .tl-bk { opacity: 0.12; }

/* ---------- Era: the panel docks left ---------- */

/* Everywhere else the panel slides in from the right and covers the graph,
   which is fine because the graph is one continuous field — whatever it hides
   you can orbit back into view. Era is different: the right pane IS the map,
   and the map is exactly what you want to keep looking at while you read a
   person's stays and dates. A right-docked panel covered the whole map. So in
   this view it comes from the left, over the name column, and the map stays
   whole. */
body.view-chrono #panel {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  box-shadow: 24px 0 64px rgba(0,0,0,0.06);
}
body.view-chrono #panel.open { transform: translateX(0); }
body.view-chrono #panel-close { right: 20px; }
/* The globe used to be hidden in Era — it was a small inset in the far corner
   of a pane that already showed the map, so it was redundant there. It is not
   redundant now: it is this pane's region control, standing where the region
   buttons stood, and it is the only surface that shows a selected person's
   part of the world as a place on a sphere rather than a rectangle. */

/* ---------- Era: clustered map rings ---------- */

/* A merged ring stands for several places within 24 screen px. It is neutral
   grey rather than tinted, because the colours on an unmerged ring encode the
   disciplines of the people who stayed there and a cluster has no single
   honest division. The number is how many places it stands for. */
/* Merged arcs are the same weight as unmerged ones; what marks a cluster is
   the count at its centre, not a different colour treatment. */
.loc-cluster-n {
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--ink, #111);
  pointer-events: none;
}
.loc-place.is-cluster .loc-core { display: none; }
.loc-cluster-n {
  paint-order: stroke;
  stroke: var(--white, #fff);
  stroke-width: 3px;
}
.ch-sub-window { margin-top: 0; margin-left: 10px; white-space: nowrap; }

/* ---- Reach: order / sector filter controls ---- */
.agg-r-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 14px 0 2px;
}
.agg-r-ctl { display: flex; align-items: center; gap: 4px; }
.agg-r-ctl-lab {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-2, #9aa0a6); margin-right: 4px;
}
.agg-ord, .agg-clear {
  font: inherit; font-size: 10.5px; line-height: 1;
  padding: 5px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule, #e3e3e3); background: transparent;
  color: var(--grey-1, #666); transition: background .15s, color .15s, border-color .15s;
}
.agg-ord:hover, .agg-clear:hover { border-color: var(--ink, #111); color: var(--ink, #111); }
.agg-ord.is-on { background: var(--ink, #111); border-color: var(--ink, #111); color: #fff; }
.agg-clear.is-off { opacity: .5; }
.agg-r-row { cursor: pointer; }
.agg-r-row.is-picked { background: rgba(0, 0, 0, .05); }
/* The ratio cell now carries a value and its interval, stacked. */
.agg-r-num { text-align: right; line-height: 1.15; }
.agg-r-num b { font-weight: 400; font-variant-numeric: tabular-nums; }
.agg-r-num b.is-sig { font-weight: 600; color: var(--ink, #111); }
.agg-r-num b.is-ns { color: var(--grey-2, #9aa0a6); }
.agg-r-ci {
  display: block; font-style: normal; font-size: 8.5px;
  color: var(--grey-2, #9aa0a6); font-variant-numeric: tabular-nums;
}
.agg-r-null { margin-top: 10px; }

/* Γ rail, grouped by person: the group head is a label, not a target, so it
   must not read as a clickable row. */
.bk-grp {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 10px 4px; margin-top: 4px;
  font: 600 11px/1.2 Satoshi, Helvetica Neue, sans-serif;
  color: #cfe0e8; letter-spacing: .01em;
  border-top: 1px solid rgba(140, 170, 190, .13);
}
.bk-grp:first-child { border-top: 0; margin-top: 0; }
.bk-grp i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.bk-grp-n { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-grp-m { color: #7f96a4; font-weight: 400; font-size: 10px; flex: 0 0 auto; }
.bk-row-in { padding-left: 24px; }
.bk-row-in .bk-row-y { min-width: 58px; color: #9fb6c2; }
.bk-row-in .bk-row-n { color: #7f96a4; }

/* The verdict strip: the model's summary of itself, beside the picture.

   It began as a full-width band under the title and printed straight through
   the title and blurb, which sit at top:74px and wrap to three lines. The left
   column below them is empty in every domain, so the strip lives there as a
   narrow card instead -- and a card that never overlaps is worth more than a
   band that spans the frame. */
#fd-verdict {
  position: absolute; left: 22px; top: 214px; width: 232px; z-index: 6;
  background: rgba(10, 16, 21, .74); backdrop-filter: blur(9px);
  border: 1px solid rgba(140, 170, 190, .2); border-radius: 8px;
  padding: 12px 13px 11px; pointer-events: auto;
}
#fd-verdict[hidden] { display: none; }
.fd-v-head {
  font: 600 12px/1.4 Satoshi, Helvetica Neue, sans-serif;
  color: #e8f0f4; letter-spacing: -.004em; margin-bottom: 10px;
}
.fd-v-head.is-null { color: #e6c8a8; }
.fd-v-row { display: grid; gap: 7px; }
.fd-v-c { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 8px; }
.fd-v-l {
  font: 400 9px/1.25 Satoshi, Helvetica Neue, sans-serif;
  color: #8ca2ae; letter-spacing: .05em; text-transform: uppercase;
  grid-column: 1; min-width: 0;
}
.fd-v-v {
  font: 600 12px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e2edf2; grid-column: 2; text-align: right; white-space: nowrap;
}
.fd-v-s {
  font: 400 9px/1.25 Satoshi, Helvetica Neue, sans-serif; color: #74899a;
  grid-column: 1 / -1; text-align: right; margin-top: -3px;
}
.fd-v-more {
  margin-top: 11px; width: 100%;
  background: rgba(140, 170, 190, .1); border: 1px solid rgba(140, 170, 190, .28);
  color: #b7cbd6; border-radius: 5px; padding: 5px 9px; cursor: pointer;
  font: 500 10.5px/1.3 Satoshi, Helvetica Neue, sans-serif;
}
.fd-v-more:hover { color: #eef5f8; border-color: rgba(140, 170, 190, .55); }
@media (max-width: 1180px) { #fd-verdict { display: none; } }

/* A blockquote for the note's own corrections and negative results: it must
   read as the model speaking about its own limits, not as a pull-quote.
   Note the explicit colour -- an unstyled blockquote inherits nothing from
   .fd-m-p and renders as dark text on the dark panel, i.e. invisibly. */
.fd-m-note {
  margin: 12px 0; padding: 11px 14px;
  border-left: 2px solid rgba(205, 182, 160, .55);
  background: rgba(205, 182, 160, .06);
  border-radius: 0 5px 5px 0;
}
.fd-m-note p {
  margin: 0; font-family: var(--font-body);
  font-size: 12.5px; line-height: 1.6; color: #d6dfe4;
}
.fd-m-note b { color: #edd9c2; }
.fd-m-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: #cfe0e8;
}

/* ---------- Era: lower-third selection card ---------- */

/* Positioned on the LOWER THIRD, not centred: dead centre of the viewport is
   where the map draws Europe and where the timeline draws its densest rows, so
   a card there covers the two things the reader just selected between. The
   lower third is the quiet band in both panes at once — south of the roster's
   geography, below the rows — which is why the hint strip already lives there.
   It is offset above that strip rather than replacing it. */
#era-card {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 14px);
  z-index: 60;
  display: none;
  align-items: center;
  gap: 18px;
  width: min(560px, calc(100vw - 40px));
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease);
}
#era-card.open { display: flex; opacity: 1; transform: translate(-50%, 0); }

.era-card-portrait {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--off-white);
  border: 1px solid var(--line);
}
.era-card-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.era-card-body { flex: 1 1 auto; min-width: 0; }
.era-card-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.era-card-cat .swatch { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.era-card-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 3px;
  /* One line. Long names shorten rather than reflowing the card's height,
     which would make the card jump as you click between people. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.era-card-meta {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--grey-2);
  margin-top: 1px;
}
.era-card-where {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--grey-1);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.era-card-where i { font-style: normal; color: var(--grey-3); padding: 0 3px; }
.era-card-mid { color: var(--grey-3); }

.era-card-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-right: 14px;
}
.era-card-count {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--grey-3);
}
.era-card-more {
  font-family: var(--font-body);
  font-size: 11px;
  padding: 5px 11px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.18s var(--ease);
}
.era-card-more:hover { opacity: 0.82; }

.era-card-close {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 17px;
  background: none;
  border: none;
  color: var(--grey-3);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.era-card-close:hover { color: var(--ink); background: var(--off-white); }

@media (max-width: 720px) {
  #era-card {
    bottom: 78px;
    gap: 12px;
    padding: 12px 13px;
  }
  .era-card-portrait { width: 42px; height: 42px; }
  .era-card-name { font-size: 16px; }
  /* The link count is the first thing to go: the button it labels still says
     what it does, and at this width the name needs the room more. */
  .era-card-count { display: none; }
  .era-card-actions { padding-right: 10px; }
  .era-card-more { font-size: 10px; padding: 5px 9px; }
}