/*
 * Pokeca Chart — market terminal styling.
 *
 * 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.
 *
 * Numbers are set in the utility monospace face with tabular figures so a
 * column of values lines up digit for digit and can be compared by eye.
 */

.pc {
  /* Dark is the working default; the toggle stores the reader's choice. */
  --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;

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

  background: var(--pc-bg);
  color: var(--pc-ink);
  border-radius: var(--pc-radius);
  padding: clamp(1rem, 3vw, 1.75rem);
  container-type: inline-size;
}

.pc[data-pc-theme="light"] {
  --pc-bg: #ffffff;
  --pc-surface: #f7f8f9;
  --pc-surface-2: #f1f3f5;
  --pc-line: #e3e8ec;
  --pc-line-strong: #cfd7dd;
  --pc-ink: #131a1f;
  --pc-muted: #5d6970;
  --pc-up: #0f7b5f;
  --pc-down: #c62b48;
  --pc-flat: #5d6970;
  --pc-brand: #ac004d;
  --pc-focus: #ac004d;
}

.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-family: var(--pc-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  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-family: var(--pc-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-band__meta dd {
  margin: 0.125rem 0 0;
  font-family: var(--pc-mono);
  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-family: var(--pc-mono);
  font-size: 0.6875rem;
  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-family: var(--pc-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.pc-tile__change {
  grid-column: 1;
  grid-row: 3;
  font-family: var(--pc-mono);
  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-family: var(--pc-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  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: var(--pc-mono);
  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: var(--pc-mono);
  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: var(--pc-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 600;
}

.pc-slab__asof {
  font-family: var(--pc-mono);
  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: 4px;
  color: var(--pc-muted);
  font-family: var(--pc-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  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: var(--pc-mono);
  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: var(--pc-mono);
  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: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  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: var(--pc-mono);
  font-size: 0.75rem;
  color: var(--pc-muted);
}

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

.pc-search span {
  display: block;
  font-family: var(--pc-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  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: 4px;
  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-family: var(--pc-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-facts dd {
  margin: 0.25rem 0 0;
  font-family: var(--pc-mono);
  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: var(--pc-mono);
  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-family: var(--pc-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
  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-family: var(--pc-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  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-family: var(--pc-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--pc-muted);
}

.pc-return__value {
  font-family: var(--pc-mono);
  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) minmax(15rem, 22rem);
  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-family: var(--pc-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  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: 4px;
  color: var(--pc-ink);
  font: inherit;
  font-family: var(--pc-mono);
  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: var(--pc-mono);
  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: var(--pc-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  text-align: right;
}

.pc-constituent__change {
  grid-column: 3;
  grid-row: 2;
  font-family: var(--pc-mono);
  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-family: var(--pc-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  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: var(--pc-mono);
  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: var(--pc-mono);
  font-size: 0.75rem;
}

.pc-compare-toggle button {
  background: var(--pc-surface);
  border: 1px solid var(--pc-line-strong);
  border-radius: 4px;
  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;
}