/* Activity Trends + Live Activity context panels.
 * Page layout/content only; surfaces come from ds_patterns.css (.ps-panel,
 * .ps-panel--engraved, .ps-band, .ps-facts, .ps-rule-head, .ps-phero-tab).
 * Values mirror the frozen Activity Trends mockup's inline styles. */

.at-stack {
  display: grid;
  gap: clamp(1.4rem, 2.4vw, 2.2rem);
  width: min(100%, var(--content-width, 1420px));
  margin-inline: auto;
}

/* The mockup's shared carved-edge depth on basic and engraved panels. */
.at-panel,
.at-card,
.at-tile,
.at-omen,
.at-comp-card {
  border-radius: 12px;
  box-shadow:
    0 30px 70px -22px rgba(0, 0, 0, .85),
    0 2px 0 rgba(255, 244, 214, .10),
    inset 0 1px 0 rgba(255, 244, 214, .22),
    inset 0 -18px 34px -18px rgba(0, 0, 0, .7),
    inset 0 0 0 1px rgba(232, 196, 111, .5),
    inset 0 0 0 6px rgba(6, 11, 21, .55),
    inset 0 0 0 7px rgba(213, 177, 101, .28);
}

/* Component display rules must never defeat the hidden attribute. */
.at-stack [hidden], .at-trends-panel[hidden] { display: none !important; }

.at-panel-body { padding: 1rem 1.15rem 1.2rem; display: grid; gap: .6rem; }
.at-band-meta {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--parchment-soft);
}
.at-kicker {
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.at-lede,
.at-note {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--parchment-muted);
  text-wrap: pretty;
}
.at-lede { font-size: .95rem; max-width: 70ch; }
.at-section > .at-lede { margin: -.2rem 0 .2rem; }
.at-section { display: grid; gap: .9rem; }
.at-note { font-size: .92rem; line-height: 1.45; }
.at-muted { margin: 0; font-family: var(--font-body); font-size: .9rem; color: var(--parchment-soft); }
.at-axis-note {
  font-family: var(--font-body);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--parchment-soft);
}
.at-status {
  padding: .7rem 1rem;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: rgba(10, 17, 32, .7);
  font-family: var(--font-body);
  color: var(--parchment-muted);
}

/* ---- verdict cards ---- */
.at-verdicts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.2rem);
}
.at-card { padding: 1.15rem 1.25rem 1.25rem; display: grid; gap: .5rem; align-content: start; }
.at-verdict {
  font-family: var(--font-title);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: .02em;
  color: #fff6dd;
  font-weight: 400;
}
.at-verdict.is-withheld { font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--parchment-muted); }
.at-close-note { display: block; margin-top: .25rem; font-size: .8rem; color: var(--gold-200); }
.at-hour-bars {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  align-items: end;
  height: 46px;
  margin-top: .35rem;
}
.at-hour-bars > i { display: block; border-radius: 2px 2px 0 0; background: rgba(232, 196, 111, .3); min-height: 8px; }
.at-hour-bars > i.is-best { background: linear-gradient(180deg, #fff0bc, #d7b268); }
.at-window-track {
  position: relative;
  height: 46px;
  margin-top: .35rem;
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(10, 17, 32, .9), rgba(20, 34, 58, .9));
  overflow: hidden;
}
.at-window-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 240, 188, .85), rgba(215, 178, 104, .5));
  box-shadow: 0 0 24px rgba(232, 196, 111, .45);
}
.at-window-ticks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); }
.at-window-ticks > i { border-right: 1px solid rgba(213, 177, 101, .18); }
.at-window-ticks > i:last-child { border-right: 0; }
.at-day-bars { display: grid; gap: 4px; margin-top: .35rem; }
.at-day-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: .5rem; }
.at-day-bar span {
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--parchment-soft);
}
.at-day-bar i { display: block; height: 12px; border-radius: 2px; background: rgba(232, 196, 111, .28); }
.at-day-bar i.is-best { background: linear-gradient(90deg, #d7b268, #fff0bc); }
.at-day-bar i.is-missing, .at-hour-bars > i.is-missing { background: repeating-linear-gradient(135deg, rgba(157, 188, 214, .22) 0 3px, transparent 3px 6px); }

/* ---- Week in Ember ---- */
.at-ember-body {
  padding: 1.1rem 1.2rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: flex-start;
}
.at-ember-main { flex: 1 1 600px; min-width: 0; display: grid; gap: .7rem; }
.at-ember-main > .at-lede { max-width: 62ch; }
.at-heat-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 4px .3rem 0; border-radius: 4px; }
.at-heat-scroll:focus-visible { outline: 2px solid #78a9ff; outline-offset: 3px; }
.at-heat-grid { min-width: 600px; display: grid; gap: 3px; }
.at-heat-row { display: grid; grid-template-columns: 44px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.at-heat-day {
  position: sticky;
  left: 0;
  z-index: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  background: #0e1626;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--parchment-soft);
}
.at-heat-cell {
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .05);
  transition: box-shadow 170ms ease;
}
.at-heat-cell.is-missing {
  background: repeating-linear-gradient(135deg, rgba(157, 188, 214, .20) 0 3px, rgba(10, 17, 32, .9) 3px 6px);
  box-shadow: inset 0 0 0 1px rgba(157, 188, 214, .25);
}
.at-heat-cell.is-selected {
  z-index: 1;
  box-shadow: 0 0 0 2px #0a1120, 0 0 0 4px #fff0bc, 0 0 18px rgba(232, 196, 111, .55);
}
.at-heat-tick { font-family: var(--font-body); font-size: .6rem; letter-spacing: .04em; color: var(--parchment-soft); text-align: center; }
.at-legend { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.at-legend > span {
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--parchment-soft);
}
.at-legend > .at-legend-hi { color: var(--gold-200); }
.at-legend-steps { display: flex; gap: 3px; }
.at-legend-steps > i { width: 22px; height: 10px; border-radius: 2px; }
.at-legend-missing { display: inline-flex; align-items: center; gap: .35rem; margin-left: .6rem; }
.at-legend-missing > i {
  width: 22px;
  height: 10px;
  border-radius: 2px;
  background: repeating-linear-gradient(135deg, rgba(157, 188, 214, .35) 0 3px, rgba(10, 17, 32, .9) 3px 6px);
}
.at-readout { flex: 1 1 236px; min-width: 236px; overflow: hidden; }
.at-readout-body {
  padding: .95rem 1rem 1.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: .6rem 1.2rem;
  align-items: start;
}
.at-readout-title { font-family: var(--font-title); font-size: 1.5rem; line-height: 1.05; color: #fff6dd; font-weight: 400; }
.at-readout-value { display: flex; align-items: baseline; gap: .5rem; }
.at-readout-value > span { font-family: var(--font-title); font-size: 2rem; line-height: 1; color: var(--gold-200); }
.at-readout-value > small {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--parchment-soft);
}

/* ---- Activity Over Time ---- */
.at-trend-body { padding: 1.1rem 1.2rem 1.3rem; gap: .85rem; }
.at-trend-controls { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.at-range-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.at-range-buttons .ps-phero-tab { background: transparent; cursor: pointer; white-space: nowrap; text-align: center; padding: .5rem .6rem; }
.at-range-buttons .ps-phero-tab.is-loading { cursor: progress; }
.at-range-buttons .ps-phero-tab.is-loading::after {
  content: "";
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-left: .42rem;
  border: 1px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.05em;
  animation: at-spin .75s linear infinite;
}
.at-range-meta { margin-left: auto; font-family: var(--font-body); font-size: .76rem; color: var(--parchment-soft); }
.at-compare-toggle {
  margin-left: auto;
  padding: .28rem .7rem;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid rgba(120, 169, 255, .6);
  border-radius: 999px;
  background: rgba(120, 169, 255, .14);
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #cfe0ff;
}
.at-compare-toggle[aria-pressed="false"] { border-color: var(--border-hairline); background: rgba(10, 17, 32, .6); color: var(--parchment-soft); }
.at-compare-toggle:focus-visible, .at-range-buttons .ps-phero-tab:focus-visible { outline: 2px solid #78a9ff; outline-offset: 2px; }
.at-trend-stats { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: baseline; }
.at-trend-stats > div { display: grid; gap: .1rem; }
.at-stat-label {
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--parchment-soft);
}
.at-stat { font-family: var(--font-title); font-size: 1.7rem; line-height: 1; color: #fff6dd; font-weight: 400; }
.at-stat--gold { color: var(--gold-200); }
.at-stat.is-up { color: var(--status-win); }
.at-stat.is-down { color: var(--status-loss); }
.at-stat.is-muted { font-size: 1rem; color: var(--parchment-soft); font-family: var(--font-body); }
.at-legend-row { display: flex; flex-wrap: wrap; gap: 1.2rem; font-family: var(--font-body); font-size: .8rem; color: var(--parchment-muted); }
.at-legend-row i { display: inline-block; width: 26px; height: 0; margin-right: .4rem; vertical-align: middle; border-top: 2.4px solid #f0cf86; }
.at-legend-row i.is-dashed { border-top-style: dashed; border-top-color: rgba(240, 207, 134, .75); }
.at-legend-row i.is-landmark { width: 8px; height: 8px; border: 0; transform: rotate(45deg); background: #cfe0ff; }
.at-chart-stage { position: relative; min-height: 8rem; }
.at-chart { position: relative; transition: opacity 170ms ease; }
.at-chart-stage.is-loading .at-chart { opacity: .58; pointer-events: none; }
.at-chart-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  min-height: 8rem;
  background: rgba(5, 8, 18, .28);
  color: var(--gold-100, #fff0bc);
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .05em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
  cursor: progress;
}
.at-chart-loading[hidden] { display: none; }
.at-chart-status {
  margin: 0;
  padding: .58rem .7rem;
  border: 1px solid rgba(207, 224, 255, .32);
  border-radius: 6px;
  background: rgba(18, 34, 58, .72);
  color: #cfe0ff;
  font-family: var(--font-body);
  font-size: .78rem;
}
.at-chart-status[hidden] { display: none; }
.at-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.at-chart-empty { padding: 3rem 1rem; text-align: center; font-family: var(--font-body); color: var(--parchment-soft); }
.at-xlabels { position: absolute; inset: auto 0 -1.4rem 0; display: flex; justify-content: space-between; pointer-events: none; }
.at-xlabels > span { font-family: var(--font-body); font-size: .68rem; letter-spacing: .06em; color: var(--parchment-soft); }
.at-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  padding: .5rem .7rem;
  min-width: 150px;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  background: rgba(10, 17, 32, .94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  pointer-events: none;
  z-index: 5;
}

@keyframes at-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .at-range-buttons .ps-phero-tab.is-loading::after { animation: none; border-right-color: currentColor; opacity: .55; }
  .at-chart { transition: none; }
}
.at-tooltip strong { display: block; font-family: var(--font-title); font-size: .92rem; font-weight: 400; color: #fff6dd; letter-spacing: .02em; }
.at-tooltip span { display: block; font-family: var(--font-body); font-size: .78rem; color: var(--parchment-muted); }
.at-tooltip .is-up { color: var(--status-win); font-weight: 700; font-size: .72rem; }
.at-tooltip .is-down { color: var(--status-loss); font-weight: 700; font-size: .72rem; }
.at-caption { margin: 1.5rem 0 0; font-family: var(--font-body); font-size: .88rem; line-height: 1.5; color: var(--parchment-soft); text-wrap: pretty; }

/* ---- Omens ---- */
.at-omen-grid, .at-comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.2rem);
}
.at-omen { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .5rem; align-content: start; }
.at-omen-head { display: flex; align-items: center; gap: .5rem; }
.at-omen-when { font-family: var(--font-body); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--parchment-soft); }
.at-omen strong { font-family: var(--font-title); font-size: 1.12rem; line-height: 1.2; letter-spacing: .03em; color: #fff6dd; font-weight: 400; }
.at-tag {
  padding: .16rem .5rem;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid rgba(213, 177, 101, .5);
  background: rgba(232, 196, 111, .16);
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.at-tag--blue { border-color: rgba(157, 188, 214, .45); background: rgba(120, 169, 255, .14); color: #cfe0ff; }
.at-attribution a { color: inherit; }

/* ---- Live: Steam activity + gauges ---- */
.at-steam-body {
  padding: 1.2rem clamp(1.2rem, 2.4vw, 1.8rem) 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.4rem clamp(1.4rem, 3vw, 2.6rem);
  background: radial-gradient(55% 90% at 0% 100%, rgba(232, 196, 111, .09), transparent 65%);
}
.at-steam-primary { display: grid; gap: .55rem; }
.at-kicker-row { display: flex; align-items: center; gap: .6rem; }
.at-kicker-row .at-kicker { font-size: .7rem; letter-spacing: .16em; }
.at-pulse {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #fff0bc;
  box-shadow: 0 0 10px rgba(232, 196, 111, .9);
  animation: atPulse 1.8s ease-in-out infinite;
}
@keyframes atPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .at-pulse { animation: none; } }
.at-steam-number { display: grid; gap: .55rem; }
.at-steam-number > strong {
  font-family: var(--font-title);
  font-size: clamp(3.8rem, 7.4vw, 6.2rem);
  line-height: .88;
  letter-spacing: .01em;
  color: #fff6dd;
  font-weight: 400;
  text-shadow: 0 0 42px rgba(232, 196, 111, .38), 0 12px 30px rgba(0, 0, 0, .6);
}
.at-steam-number > span { font-family: var(--font-body); font-size: .95rem; color: var(--parchment-muted); }
.at-live-figures { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1.1rem clamp(1.4rem, 3vw, 2.6rem); }
.at-figure { display: grid; gap: .35rem; justify-items: end; align-content: start; text-align: right; max-width: 210px; }
.at-figure > strong {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: .95;
  color: var(--gold-100);
  font-weight: 400;
  text-shadow: 0 0 28px rgba(232, 196, 111, .28);
}
.at-gauge { width: min(100%, 190px); display: grid; gap: .35rem; margin-top: .15rem; }
.at-gauge-track { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(213, 177, 101, .14); }
.at-gauge-band { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: rgba(232, 196, 111, .3); }
.at-gauge-mark {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--gold-200);
  box-shadow: 0 0 0 2px #0a1120, 0 0 10px rgba(232, 196, 111, .7);
}
.at-gauge-mark.is-low { background: #cfe0ff; box-shadow: 0 0 0 2px #0a1120, 0 0 10px rgba(120, 169, 255, .6); }
.at-gauge-status {
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.at-gauge-status.is-low { color: #cfe0ff; }
.at-gauge-status.is-na { color: var(--parchment-soft); }
.at-figure-note { font-family: var(--font-body); font-size: .8rem; line-height: 1.4; color: var(--parchment-muted); text-wrap: pretty; }
.at-overall { display: grid; gap: .2rem; margin-top: .3rem; padding-top: .45rem; border-top: 1px solid var(--border-hairline); font-family: var(--font-body); color: var(--parchment-soft); }
.at-overall > span { font-weight: 900; font-size: .75rem; }
.at-overall small { font-size: .72rem; line-height: 1.4; }
.at-overall.is-busy > span { color: var(--gold-200); }

/* ---- Live: scoreboard ---- */
.at-scoreboard { padding: 1.1rem 1.2rem 1.3rem; gap: clamp(.9rem, 1.6vw, 1.2rem); }
.at-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(.9rem, 1.6vw, 1.2rem); }
.at-tile { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .5rem; align-content: start; }
.at-tile-label { font-family: var(--font-body); font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--parchment-soft); }
.at-tile-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; }
.at-tile-row > strong { font-family: var(--font-title); font-size: 2rem; line-height: 1; color: #fff6dd; font-weight: 400; }
.at-delta { font-family: var(--font-body); font-size: .86rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.at-delta.is-up { color: var(--status-win); }
.at-delta.is-down { color: var(--status-loss); }
.at-delta.is-na { color: var(--parchment-soft); font-weight: 400; font-size: .78rem; }
.at-delta.is-up::before, .at-delta.is-down::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.at-delta.is-up::before { border-bottom: 10px solid currentColor; }
.at-delta.is-down::before { border-top: 10px solid currentColor; }
.at-tile-unit { font-family: var(--font-body); font-size: .72rem; letter-spacing: .06em; color: var(--parchment-soft); }
.at-ledger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(.9rem, 1.6vw, 1.2rem); }

/* Server region shares: full-width labels above proportional horizontal bars. */
#liveRegionsList { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.live-region-chart { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
#liveRegionsList .live-region-row { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; grid-template-areas: "rank name percent" "bar bar bar"; align-items: baseline; gap: .35rem .5rem; min-width: 0; }
#liveRegionsList .live-region-rank { grid-area: rank; font-family: var(--font-body); font-size: .7rem; color: var(--parchment-muted); font-variant-numeric: tabular-nums; }
#liveRegionsList .live-region-name { grid-area: name; min-width: 0; font-family: var(--font-body); font-size: .9rem; font-weight: 700; line-height: 1.35; color: var(--parchment-soft); overflow-wrap: anywhere; }
#liveRegionsList .live-region-percent { grid-area: percent; font-family: var(--font-body); font-size: .9rem; color: var(--gold-100); white-space: nowrap; font-variant-numeric: tabular-nums; }
#liveRegionsList .live-region-meter { grid-area: bar; width: 100%; }
.live-region-chart-note { margin: 0; font-family: var(--font-body); font-size: .72rem; line-height: 1.4; color: var(--parchment-muted); }

/* ---- Live: match composition ---- */
.at-comp-card { display: grid; grid-template-rows: auto 1fr; }
.at-comp-body { padding: 1rem 1.15rem 1.2rem; display: grid; gap: .75rem; align-content: start; }
.at-comp-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; }
.at-comp-value > strong { font-family: var(--font-title); font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: .02em; color: #fff6dd; font-weight: 400; }
.at-comp-value > strong.is-withheld { font-size: 1.4rem; color: var(--parchment-muted); }
.at-comp-value > span { font-family: var(--font-body); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--parchment-soft); }
.at-comp-delta { font-family: var(--font-body); font-size: .86rem; font-weight: 700; color: var(--gold-200); }
.at-comp-delta.is-na { font-weight: 400; color: var(--parchment-soft); }
.at-spark { display: block; width: 100%; height: 34px; overflow: visible; }
.at-spark-empty { font-family: var(--font-body); font-size: .78rem; color: var(--parchment-soft); border-top: 1px dashed rgba(213, 177, 101, .2); padding-top: .4rem; }
.at-dist-title { font-family: var(--font-body); font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); margin-top: .2rem; }
.at-dist { display: grid; gap: .45rem; }
.at-dist-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 42px; align-items: center; gap: .55rem; }
.at-dist-row > span:first-child { font-family: var(--font-body); font-size: .8rem; white-space: nowrap; color: var(--parchment-muted); }
.at-dist-row > span:first-child.is-top { color: #fff6dd; font-weight: 700; }
.at-dist-row > span:last-child { font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--gold-200); text-align: right; }
.at-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.at-bar > i { display: block; height: 100%; border-radius: 4px; background: rgba(232, 196, 111, .32); }
.at-bar > i.is-top { background: linear-gradient(90deg, #d7b268, #fff0bc); }

@media (max-width: 640px) {
  .at-range-meta { margin-left: 0; width: 100%; }
  .at-live-figures, .at-figure { justify-content: flex-start; justify-items: start; text-align: left; }
  .at-legend-missing { margin-left: 0; }
}