/*
 * Pokeca Chart — market data styling, set in the storefront's own language.
 *
 * The structural motif is the label band on a graded card slab: identity and
 * provenance set small on the left, the number that matters set large in its
 * own boxed field on the right. Every reader of this page has handled a slab,
 * so the shape is already familiar and it maps exactly onto the data.
 *
 * Colors, radii and type inherit the theme's --sst-* tokens (with literal
 * fallbacks) so the page reads as one more section of the shop rather than an
 * embedded terminal. Numbers keep tabular figures — Figtree carries them — so
 * a column of values lines up digit for digit and can be compared by eye.
 */

/* The theme caps this page's content column for prose. The market screen is
   the page's only content, so it uses the full article column instead and
   lines up exactly with the page title and breadcrumb above it. */
.sst-page-content:has(.pc) { max-width: none; }

.pc {
  /* Light is the working default and matches the storefront; the toggle
     stores the reader's choice. */
  --pc-bg: var(--sst-paper, #ffffff);
  --pc-surface: var(--sst-surface, #ffffff);
  --pc-surface-2: var(--sst-gray, #f7f7f7);
  --pc-line: var(--sst-line, #ececec);
  --pc-line-strong: #d8d8d8;
  --pc-ink: var(--sst-ink, #121212);
  --pc-muted: var(--sst-muted, #5f5f5f);
  --pc-up: #0f7b5f;
  --pc-down: #c62b48;
  --pc-flat: var(--sst-muted, #5f5f5f);
  --pc-brand: var(--sst-accent, #9e2c5f);
  --pc-focus: var(--sst-focus, #1f6feb);

  --pc-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pc-radius: var(--sst-radius, 6px);
  --pc-gap: clamp(0.75rem, 2vw, 1.25rem);

  background: var(--pc-bg);
  color: var(--pc-ink);
  container-type: inline-size;
  width: 100%;
}

/* The reader-selectable dark view keeps the original terminal palette and
   wraps itself in a padded panel so the dark field has an edge. */
.pc[data-pc-theme="dark"] {
  --pc-bg: #0e1114;
  --pc-surface: #161b20;
  --pc-surface-2: #1b2228;
  --pc-line: #232b33;
  --pc-line-strong: #303a44;
  --pc-ink: #e7edf2;
  --pc-muted: #8b98a5;
  --pc-up: #2ecc8f;
  --pc-down: #ff5d73;
  --pc-flat: #8b98a5;
  --pc-brand: #ff2d78;
  --pc-focus: #ff2d78;

  border-radius: var(--pc-radius);
  padding: clamp(1rem, 2vw, 1.5rem);
}

.pc :focus-visible {
  outline: 2px solid var(--pc-focus);
  outline-offset: 2px;
}

.pc h2,
.pc h3 {
  color: var(--pc-ink);
  margin: 0;
}

.pc a {
  color: var(--pc-ink);
  text-decoration-color: var(--pc-line-strong);
  text-underline-offset: 3px;
}

.pc a:hover,
.pc a:focus-visible {
  text-decoration-color: var(--pc-brand);
}

/* Semantic direction. Only ever applied to a number, never to chrome. */
.pc-up { color: var(--pc-up); }
.pc-down { color: var(--pc-down); }
.pc-flat { color: var(--pc-flat); }

/* ---------------------------------------------------------------- the band */

.pc-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pc-gap);
  padding-bottom: 0.75rem;
  /* The brand hairline is the one place the marque appears. */
  border-bottom: 2px solid var(--pc-brand);
}

.pc-band__id { margin-right: auto; min-width: 0; }

.pc-band__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-band__title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.pc-band__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0.75rem 0 0;
}

.pc-band__meta div { min-width: 0; }

.pc-band__meta dt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-band__meta dd {
  margin: 0.125rem 0 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.pc-band__meta code {
  font-family: var(--pc-mono);
  font-size: 0.6875rem;
  color: var(--pc-muted);
  background: none;
  padding: 0;
  word-break: break-all;
}

.pc-theme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pc-surface);
  color: var(--pc-muted);
  border: 1px solid var(--pc-line);
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.pc-theme:hover { color: var(--pc-ink); border-color: var(--pc-line-strong); }

.pc-theme__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--pc-ink);
  box-shadow: inset -3px 0 0 var(--pc-surface);
}

/* ------------------------------------------------------------- index tiles */

.pc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  margin: 1.25rem 0 0;
  background: var(--pc-line);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius) var(--pc-radius) 0 0;
  overflow: hidden;
}

/* Value and change on the left, the shape of the series on the right: the
   sparkline earns half the tile instead of a 30px sliver under it. */
.pc-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 42%);
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.875rem;
  background: var(--pc-surface);
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 120ms ease;
}

.pc-tile:hover { background: var(--pc-surface-2); }
.pc-tile[aria-pressed="true"] { background: var(--pc-surface-2); }

/* The active tile is marked on its bottom edge, joining it to the panel it
   controls rather than floating above it. */
.pc-tile[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--pc-brand);
}

.pc-tile__name {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--pc-muted);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-tile__value {
  grid-column: 1;
  grid-row: 2;
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.pc-tile__change {
  grid-column: 1;
  grid-row: 3;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  line-height: 1.4;
}

.pc-spark {
  grid-column: 2;
  grid-row: 2 / span 2;
  width: 100%;
  height: 42px;
  display: block;
  opacity: 0.9;
}

.pc-spark--up { color: var(--pc-up); }
.pc-spark--down { color: var(--pc-down); }

/* ------------------------------------------------------------- index panel */

.pc-panel { margin: 0; }

.pc-panel[hidden] { display: none; }

/* The slab label: identity left, graded value boxed on the right. */
.pc-slab {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem 1.125rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-top: 0;
  border-bottom: 0;
}

.pc-slab__id {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}

.pc-slab__code {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-slab__name {
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.pc-slab__facts {
  margin: 0;
  font-family: inherit;
  font-size: 0.6875rem;
  color: var(--pc-muted);
  font-variant-numeric: tabular-nums;
}

.pc-slab__grade {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 0.125rem;
  padding: 0.5rem 0 0.5rem 1.125rem;
  border-left: 1px solid var(--pc-line-strong);
}

.pc-slab__value {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.pc-slab__change {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 600;
}

.pc-slab__asof {
  font-family: inherit;
  font-size: 0.6875rem;
  color: var(--pc-muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- chart */

.pc-chart {
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-bottom: 0;
  min-height: 430px;
  padding: 0.5rem;
}

.pc-chart__fallback {
  margin: 0;
  padding: 8rem 1rem;
  text-align: center;
  color: var(--pc-muted);
  font-size: 0.875rem;
}

.pc-chart--failed .pc-chart__fallback { color: var(--pc-down); }

.pc-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.625rem 1.125rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-bottom: 0;
}

.pc-ranges button {
  background: var(--pc-bg);
  border: 1px solid var(--pc-line-strong);
  border-radius: 999px;
  color: var(--pc-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 3rem;
  padding: 0.4375rem 0.75rem;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.pc-ranges button:hover { color: var(--pc-ink); background: var(--pc-surface-2); }

.pc-ranges button[aria-pressed="true"] {
  color: var(--pc-bg);
  background: var(--pc-ink);
  border-color: var(--pc-ink);
}

/* ------------------------------------------------ collapsible value tables */

.pc-details {
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-radius: 0 0 var(--pc-radius) var(--pc-radius);
}

.pc-details > summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  cursor: pointer;
  list-style: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pc-ink);
  background: var(--pc-surface-2);
  transition: background 120ms ease;
}

.pc-details > summary::-webkit-details-marker { display: none; }

/* A filled chevron chip, so the row is unmistakably something you can open. */
.pc-details > summary::before {
  content: "";
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--pc-line-strong);
  border-radius: 4px;
  background:
    linear-gradient(45deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%) no-repeat 0.3rem 0.42rem / 0.42rem 0.42rem,
    linear-gradient(-45deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%) no-repeat 0.62rem 0.42rem / 0.42rem 0.42rem;
  transition: transform 150ms ease;
}

.pc-details[open] > summary::before { transform: rotate(180deg); }

.pc-details > summary:hover { background: var(--pc-line); }

.pc-details__label { color: inherit; }

.pc-details__hint {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--pc-muted);
  font-variant-numeric: tabular-nums;
}

.pc-tablewrap {
  overflow-x: auto;
  border-top: 1px solid var(--pc-line);
}

.pc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
}

.pc-table caption {
  text-align: left;
  padding: 0.75rem 1.125rem 0.25rem;
  color: var(--pc-muted);
  font-size: 0.75rem;
}

.pc-table th,
.pc-table td {
  padding: 0.4375rem 1.125rem;
  text-align: right;
  border-bottom: 1px solid var(--pc-line);
  white-space: nowrap;
}

.pc-table thead th {
  position: sticky;
  top: 0;
  background: var(--pc-surface-2);
  color: var(--pc-muted);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pc-table th[scope="row"],
.pc-table thead th:first-child {
  text-align: left;
  font-weight: 400;
  color: var(--pc-muted);
}

.pc-table tbody tr:last-child th,
.pc-table tbody tr:last-child td { border-bottom: 0; }

.pc-table tbody tr:hover { background: var(--pc-surface-2); }

.pc-note {
  margin: 0;
  padding: 0.75rem 1.125rem 1rem;
  color: var(--pc-muted);
  font-size: 0.75rem;
  line-height: 1.55;
  max-width: 78ch;
}

/* -------------------------------------------------------- directory / card */

.pc-section { margin: 0 0 1.5rem; }

.pc-lead {
  max-width: 68ch;
  color: var(--pc-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pc-crumb {
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--pc-muted);
}

.pc-search { display: block; margin-top: 1rem; }

.pc-search span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin-bottom: 0.375rem;
}

.pc-search input {
  width: 100%;
  max-width: 30rem;
  padding: 0.5rem 0.75rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line-strong);
  border-radius: var(--pc-radius);
  color: var(--pc-ink);
  font: inherit;
  font-size: 0.9375rem;
}

.pc-search input::placeholder { color: var(--pc-muted); }

.pc-details--directory {
  border-radius: var(--pc-radius);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.pc-details--directory > summary { font-size: 0.875rem; }

.pc-table--directory th[scope="row"] { color: var(--pc-ink); }

.pc-table--directory th[scope="row"] a { text-decoration: none; }

.pc-table--directory th[scope="row"] a:hover { text-decoration: underline; }

.pc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.875rem;
  margin: 1rem 0 0;
  padding: 1rem 1.125rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
}

.pc-facts div { min-width: 0; }

.pc-facts dt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-facts dd {
  margin: 0.25rem 0 0;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}

.pc-facts dd strong { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }

.pc-cards-link {
  margin: 1.5rem 0 0;
  font-family: inherit;
  font-size: 0.8125rem;
}

/* ------------------------------------------------------- footer / messages */

.pc-meta-section,
.pc-history,
.pc-related {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pc-line);
}

.pc-meta-section h2,
.pc-history h2 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin-bottom: 0.875rem;
}

.pc-meta-section p,
.pc-history p {
  color: var(--pc-ink);
  font-size: 0.875rem;
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 0 0.875rem;
}

.pc-meta-section p:last-of-type { margin-bottom: 0; }

/* Prose runs down the left column; the provenance block sits beside it.
   Both columns are placed explicitly, otherwise the paragraphs alternate
   sides and tear ragged holes between the rows. */
.pc-meta-section {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: 2.5rem;
  row-gap: 0;
  align-content: start;
}

.pc-meta-section > h2 { grid-column: 1 / -1; margin-bottom: 0.875rem; }
.pc-meta-section > p { grid-column: 1; }
.pc-meta-section > dl {
  grid-column: 2;
  grid-row: 2 / span 99;
  /* Spanning the prose rows must not stretch the box or space its items out. */
  align-self: start;
}

.pc-meta-section dl {
  display: grid;
  align-content: start;
  gap: 0.875rem;
  margin: 0;
  padding: 1rem 1.125rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
}

.pc-meta-section dt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-meta-section dd {
  margin: 0.25rem 0 0;
  font-family: var(--pc-mono);
  font-size: 0.75rem;
  word-break: break-all;
}

@media (max-width: 48rem) {
  .pc-meta-section { grid-template-columns: 1fr; }
}

.pc-attribution { color: var(--pc-muted); font-size: 0.75rem; }

.pc-related ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }

.pc-related li { margin: 0.375rem 0; font-size: 0.875rem; }

.pc-alert {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--pc-brand);
  background: var(--pc-surface);
  color: var(--pc-ink);
  font-size: 0.875rem;
}

.pc-alert--disabled { border-left-color: var(--pc-line-strong); color: var(--pc-muted); }

.pc-unavailable {
  padding: 2rem 1.25rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
  color: var(--pc-muted);
}

/* --------------------------------------------------------------- narrow up */

@container (max-width: 34rem) {
  .pc-slab__grade {
    border-left: 0;
    border-top: 1px solid var(--pc-line-strong);
    padding: 0.75rem 0 0;
    justify-items: start;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-tile,
  .pc-details > summary::before {
    transition: none;
  }
}

/* The distinctive part of a long, prefix-heavy item name. */
.pc-table--directory th[scope="row"] { color: var(--pc-muted); font-weight: 400; }
.pc-table--directory th[scope="row"] b { color: var(--pc-ink); font-weight: 600; }

/* ------------------------------------------------- returns and split view */

.pc-returns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 1px;
  background: var(--pc-line);
  border: 1px solid var(--pc-line);
  border-top: 0;
}

.pc-return {
  display: grid;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  background: var(--pc-surface);
}

.pc-return__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pc-muted);
}

.pc-return__value {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Chart on the left, what the index is made of on the right. */
.pc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(17rem, 24%, 26rem);
  border: 1px solid var(--pc-line);
  border-top: 0;
}

.pc-split__chart { min-width: 0; display: flex; flex-direction: column; }
.pc-split__chart .pc-chart { flex: 1; border-left: 0; border-top: 0; }
.pc-split__chart .pc-ranges { border-left: 0; border-bottom: 0; }

.pc-split__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--pc-line);
  background: var(--pc-surface);
}

.pc-listhead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--pc-line);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-listfilter { margin-left: auto; }

.pc-listfilter input {
  width: 7rem;
  padding: 0.25rem 0.5rem;
  background: var(--pc-bg);
  border: 1px solid var(--pc-line-strong);
  border-radius: var(--pc-radius);
  color: var(--pc-ink);
  font: inherit;
  font-family: inherit;
  font-size: 0.75rem;
}

.pc-constituents {
  list-style: none;
  margin: 0;
  padding: 0;
  /* The list scrolls inside the panel so the chart stays put while a reader
     walks down the basket. */
  overflow-y: auto;
  /* Sized so the list column ends level with the chart and its range buttons
     rather than leaving a black shelf under one of them. */
  max-height: 23rem;
  flex: 1;
}

.pc-constituents li + li { border-top: 1px solid var(--pc-line); }

.pc-constituent {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pc-constituent:hover { background: var(--pc-surface-2); }

.pc-constituent[aria-pressed="true"] {
  background: var(--pc-surface-2);
  box-shadow: inset 2px 0 0 var(--pc-brand);
}

.pc-constituent__weight {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--pc-muted);
  text-align: right;
}

.pc-constituent__name {
  grid-column: 2;
  font-size: 0.8125rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-constituent__price {
  grid-column: 3;
  grid-row: 1;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  text-align: right;
}

.pc-constituent__change {
  grid-column: 3;
  grid-row: 2;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  text-align: right;
}

.pc-listfoot {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--pc-line);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--pc-muted);
}

.pc-ranges__reset { margin-left: auto; }

.pc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 60rem) {
  .pc-split { grid-template-columns: 1fr; }
  .pc-split__list { border-left: 0; border-top: 1px solid var(--pc-line); }
  .pc-constituents { max-height: 20rem; }
}

/* ---------------------------------------------------------------- movers */

.pc-movers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--pc-line);
  border: 1px solid var(--pc-line);
  border-top: 0;
}

.pc-movers__col { background: var(--pc-surface); padding: 0.75rem 1rem 0.875rem; }

.pc-movers__col h3 {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-movers__col h3 span { opacity: 0.7; letter-spacing: 0.06em; }

.pc-movers__col ol { list-style: none; margin: 0; padding: 0; }

.pc-movers__col li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
}

.pc-movers__col a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.pc-movers__col a:hover { text-decoration: underline; }

.pc-movers__price,
.pc-movers__col li > span:last-child {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}

.pc-movers__price { color: var(--pc-muted); }

/* Sortable column headers */
.pc-table thead th button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.pc-table thead th button:hover { color: var(--pc-ink); }

.pc-table thead th[aria-sort] button { color: var(--pc-ink); }

.pc-table thead th[aria-sort="descending"] button::after { content: " ↓"; }
.pc-table thead th[aria-sort="ascending"] button::after { content: " ↑"; }

/* Comparison */
.pc-compare-toggle {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0.875rem 0 0;
  font-family: inherit;
  font-size: 0.75rem;
}

.pc-compare-toggle button {
  background: var(--pc-surface);
  border: 1px solid var(--pc-line-strong);
  border-radius: 999px;
  color: var(--pc-ink);
  font: inherit;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
}

.pc-compare-toggle button:hover { background: var(--pc-surface-2); }
.pc-compare-toggle button[aria-expanded="true"] { background: var(--pc-ink); color: var(--pc-bg); border-color: var(--pc-ink); }
.pc-compare-toggle span { color: var(--pc-muted); }

.pc-chart--compare {
  margin-top: 0.625rem;
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-line);
  min-height: 300px;
}

/* -------------------------------------------------- directory controls */

.pc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
}

.pc-search--select select {
  padding: 0.5rem 0.625rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line-strong);
  border-radius: var(--pc-radius);
  color: var(--pc-ink);
  font: inherit;
  font-family: inherit;
  font-size: 0.8125rem;
}

.pc-count {
  margin: 0.75rem 0 0;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--pc-muted);
}

/* ---------------------------------------------------------- index switcher */

.pc-indextabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 1rem;
  border-bottom: 1px solid var(--pc-line);
}

.pc-indextab {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--pc-muted);
  text-decoration: none;
  font-size: 0.8125rem;
}

.pc-indextab:hover { color: var(--pc-ink); }

.pc-indextab.is-active {
  color: var(--pc-ink);
  border-bottom-color: var(--pc-brand);
  font-weight: 600;
}

.pc-indextab__count {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--pc-muted);
}

/* Still reachable — a filter matching nothing here is worth seeing, not hiding. */
.pc-indextab.is-empty { opacity: 0.45; }

/* A graded card's full name runs to about eighty characters, which pushed
   every price and change column off the right edge and behind a horizontal
   scrollbar — the columns readers came for. Bounding the name and letting it
   wrap keeps the whole row visible without abbreviating anything away. */
.pc-table--directory th[scope="row"] {
  max-width: 34ch;
  white-space: normal;
}

.pc-table--directory th[scope="row"] a {
  overflow-wrap: anywhere;
}

.pc-apply,
.pc-reset {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--pc-line-strong);
  border-radius: 999px;
  background: var(--pc-surface);
  color: var(--pc-ink);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
}

.pc-reset { border-color: transparent; color: var(--pc-muted); }
.pc-reset:hover { color: var(--pc-ink); }

/* ------------------------------------------------------------ sort headers */

.pc-sortlink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.pc-sortlink:hover { color: var(--pc-ink); text-decoration: underline; }
.pc-sortlink.is-active { color: var(--pc-ink); }
.pc-sortlink__dir { font-size: 0.6875rem; color: var(--pc-brand); }

/* ------------------------------------------------------------- pagination */

.pc-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 1.25rem 0 0;
}

.pc-pager__page {
  min-width: 2.25rem;
  padding: 0.4375rem 0.5rem;
  border: 1px solid var(--pc-line);
  border-radius: 999px;
  color: var(--pc-muted);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  text-align: center;
  text-decoration: none;
}

.pc-pager__page:hover { color: var(--pc-ink); border-color: var(--pc-line-strong); }

.pc-pager__page.is-current {
  background: var(--pc-brand);
  border-color: var(--pc-brand);
  color: #fff;
  font-weight: 600;
}

.pc-comparebar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding: 0.625rem 0.875rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-brand);
  border-radius: var(--pc-radius);
  font-family: inherit;
  font-size: 0.8125rem;
}

.pc-comparebar button {
  background: var(--pc-bg);
  border: 1px solid var(--pc-line-strong);
  border-radius: 999px;
  color: var(--pc-ink);
  font: inherit;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
}

.pc-comparebar button[data-pc-compare-run] {
  background: var(--pc-ink);
  color: var(--pc-bg);
  border-color: var(--pc-ink);
}

.pc-comparebar button:hover { border-color: var(--pc-brand); }

.pc-comparebar span { margin-right: auto; color: var(--pc-muted); }

/* The checkbox sits inline with the name so the row keeps one line. */
.pc-pick {
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.pc-pick input { accent-color: var(--pc-brand); cursor: pointer; }

.pc-table--directory td { white-space: nowrap; }