/* sections-a.css — Meta Snapshot, Usage Leaderboard, Type Landscape, Quadrant.
   Owned by the sections-a agent. Uses only tokens/classes from app.css. */

/* Grid-item blowout fix, scoped to our sections only (app.css's
   `main.grid .section` leaves the default min-width:auto, so a nested
   nowrap table's min-content forces the whole grid track wider than the
   viewport). min-width:0 lets the track shrink to the actual column size
   so .table-wrap's own overflow-x:auto can do its job. */
main.grid .section[data-section="snapshot"],
main.grid .section[data-section="usage"],
main.grid .section[data-section="types"],
main.grid .section[data-section="quadrant"] {
  min-width: 0;
}

/* ---------- snapshot (hero) ---------- */
.snapshot-card .card__head { border-bottom-width: 2px; }
[data-skin="pro"] .snapshot-card .card__head { border-bottom-width: 1px; }

.snapshot__hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.snapshot__mon {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface-2);
  border: 2px solid var(--frame);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
[data-skin="pro"] .snapshot__mon { border: 1px solid var(--border); }
.snapshot__mon:hover, .snapshot__mon:focus-visible, .snapshot__mon.is-hovered {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}
.snapshot__mon-sprite { width: 56px; height: 56px; margin-bottom: 2px; }
.snapshot__mon-name {
  font-family: var(--font-label); font-size: var(--fs-small); text-transform: uppercase;
  color: var(--ink); overflow-wrap: anywhere;
}
.snapshot__mon-stats {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-head); font-size: 17px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
[data-skin="retro"] .snapshot__mon-stats { font-family: var(--font-body); font-size: 22px; }
.snapshot__mon-win { color: var(--muted); font-size: .8em; }
.snapshot__mon .kpi__delta {
  font-size: 11px; font-family: var(--font-label); white-space: normal; line-height: 1.3;
}
[data-skin="retro"] .snapshot__mon .kpi__delta { font-family: var(--font-body); font-size: 13px; }
.snapshot__mon .kpi__delta--low { color: var(--muted) !important; opacity: .7; }

.snapshot__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  border-top: 2px solid var(--border);
  padding-top: var(--space-3);
}
[data-skin="pro"] .snapshot__kpis { border-top: 1px solid var(--border); }
.snapshot__kpis .kpi { padding: var(--space-2) var(--space-2); }
.snapshot__kpis .kpi__value { display: flex; align-items: center; gap: 6px; }
.snapshot__kpis .kpi__value img.sprite { width: 20px; height: 20px; }

/* ---------- usage leaderboard ---------- */
[data-section="usage"] .card__head { flex-wrap: wrap; row-gap: var(--space-2); }
[data-section="usage"] .card__head > span.meta-line { margin-left: auto; }

/* Tight, explicit column widths so the table doesn't stretch to fill a wide
   card with dead whitespace: rank/sprite/n stay small, name gets whatever's
   left, usage/win get a fixed comfortable width for their bar+label. */
[data-section="usage"] table.data-table { table-layout: auto; }
[data-section="usage"] .col-rank { width: 28px; }
[data-section="usage"] .col-sprite { width: 44px; }
[data-section="usage"] .col-name { width: auto; }
[data-section="usage"] .col-usage { width: 190px; }
[data-section="usage"] .col-win { width: 190px; }
[data-section="usage"] .col-n { width: 60px; }
[data-section="usage"] .col-name__mon { line-height: 1.2; }
.item-link--sub { font-size: 0.86em; color: var(--ink-2); padding: 0; }

/* item link: shared by the leaderboard "Top item" column and the Items section */
.item-link {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--ink);
  font: inherit; text-align: left;
}
.item-link__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px dotted var(--muted); }
.item-link:hover .item-link__name { color: var(--accent); border-bottom-color: var(--accent); }
.item-link__pct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.92em; }
.item-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Merged bar+% cell: a track with a coloured fill, and the % label sits
   right after it (not two separate columns). */
.usage-bar { display: flex; align-items: center; gap: 8px; }
.usage-bar__track {
  flex: 1 1 auto; min-width: 48px; height: 10px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden;
}
.usage-bar__fill { height: 100%; border-radius: 5px; }
.usage-bar__label { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: var(--fs-small); }

.ci-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 130px; }
.ci-cell span { font-variant-numeric: tabular-nums; }
.ci-bar { position: relative; width: 110px; height: 6px; background: var(--surface-2); border-radius: 3px; }
.ci-bar__range { position: absolute; top: 0; height: 100%; background: var(--seq-4); border-radius: 3px; opacity: .6; }
.ci-bar__dot {
  position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--surface-1);
  transform: translate(-50%, -50%);
}
[data-section="usage"] table.data-table tbody tr.is-hovered { background: var(--surface-2); }
[data-section="usage"] table.data-table tbody tr:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }

/* ---------- type landscape ---------- */
.types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
/* Tall enough that all 18 category labels get their own row without
   ECharts thinning them out to every other one. */
.types-panel__chart { height: 460px; width: 100%; }
@media (max-width: 700px) { .types-panel__chart { height: 400px; } }

/* ---------- usage x win quadrant ---------- */
.quadrant__chart { height: 440px; width: 100%; }
@media (max-width: 700px) { .quadrant__chart { height: 360px; } }
.sprite-btn { background: none; border: 0; padding: 0; cursor: zoom-in; line-height: 0; }
.sprite-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* long names (e.g. "Rillaboom", Mega forms) must wrap inside KPI tiles at 390px */
.snapshot__kpis .kpi { min-width: 0; }
.snapshot__kpis .kpi__value { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
.snapshot__kpis .kpi__value img.sprite { flex-shrink: 0; }

/* ---------- item usage ---------- */
.items-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4); }
@media (max-width: 1000px) { .items-grid { grid-template-columns: minmax(0, 1fr); } }
.items-panel { min-width: 0; }
.items-panel .card__head { flex-wrap: wrap; row-gap: var(--space-2); }
.items-panel .card__head > .meta-line { flex-basis: 100%; }
.items-panel__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.items-chart { width: 100%; height: 520px; }
.items-search {
  background: var(--surface-1); color: var(--ink); border: 2px solid var(--frame); border-radius: var(--radius);
  padding: 4px 8px; font-family: var(--font-body); font-size: var(--fs-small); width: 170px; max-width: 100%;
}
[data-skin="pro"] .items-search { border: 1px solid var(--border); }
.items-note { color: var(--muted); font-size: var(--fs-small); margin-bottom: var(--space-2); }
.items-note:empty { display: none; }
.items-table .col-sprite { width: 40px; }
.items-table td.items-cell { min-width: 110px; max-width: 190px; }
.items-table tbody tr.is-hovered { background: var(--surface-2); }
.items-table tbody tr:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.items-share { height: 3px; background: var(--grid); border-radius: 2px; margin-top: 2px; overflow: hidden; }
.items-share__fill { height: 100%; background: var(--accent); }
.muted { color: var(--muted); }
/* phones: each Pokémon becomes a two-line card (name + N, then its three items) */
@media (max-width: 700px) {
  .items-table thead { display: none; }
  .items-table, .items-table tbody { display: block; }
  .items-table tbody tr {
    display: grid; grid-template-columns: 40px repeat(3, minmax(0, 1fr)); column-gap: var(--space-2);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--grid);
  }
  table.items-table td { border: 0; padding: 2px 0; white-space: normal; }
  .items-table td.col-sprite { grid-row: 1 / 3; grid-column: 1; align-self: center; }
  .items-table td.col-name { grid-row: 1; grid-column: 2 / 4; font-weight: 600; }
  .items-table td.col-n { grid-row: 1; grid-column: 4; }
  .items-table td.items-cell { grid-row: 2; min-width: 0; max-width: none; }
  .items-table td.items-cell:nth-child(3) { grid-column: 2; }
  .items-table td.items-cell:nth-child(4) { grid-column: 3; }
  .items-table td.items-cell:nth-child(5) { grid-column: 4; }
  .items-table .item-link { flex-wrap: wrap; row-gap: 0; }
  .items-table .item-link__name { white-space: normal; }
}