/* Theme shared with mabiweather / mabitimers. */
:root {
  --darkest: #1a1a2e;
  --darker: #16213e;
  --dark: #0f3460;
  --highlight: #fbbf24;
  --light: #213555;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(148, 163, 184, 0.2);

  /* Creature-specific accents. */
  --ice: #38bdf8;
  --fire: #f87171;
  --lightning: #facc15;
  --pos: #34d399; /* mult > 1, you do more damage */
  --neg: #f87171; /* mult < 1, you do less damage */
  --prot: #c084fc; /* protection / cap-crit emphasis */
  --offense: #fb923c; /* orange, used for the Offense group accent ,
                         kept distinct from --fire so the fire-element value
                         and the offense-group label don't share a hue. */

  /* ===== V3b design tokens (filter section + mob cards) =====
     Colors and spacing pulled verbatim from design_handoff_filters/README.md
     and design_handoff_creature_stats_card/README.md so both surfaces share
     one source of truth. The mob card may override a few of these locally. */
  --body: #e6ecf5;            /* default card text */
  --muted-1: #9fb0c6;         /* chip value suffix, count pill text */
  --muted-2: #7a8aa3;         /* eyebrow / field labels, inactive chip label */
  --muted-3: #6b7d96;         /* value modifiers */
  --gutter: #5d7290;          /* dim , help text, Remove button */
  --on-accent: #1a1505;       /* text on gold/colored fills */
  --gold: #e3c247;
  --magic: #c79df0;
  --el-ice: #4aa3d6;
  --el-fire: #e25c5c;
  --el-lightning: #e3c247;

  --filter-card-bg: #131e36;
  --card-border: rgba(255, 255, 255, 0.06);
  --card-divider: rgba(255, 255, 255, 0.05);
  --input-bg: #1c2742;
  --input-border: rgba(255, 255, 255, 0.08);
  --input-border-focus: rgba(255, 255, 255, 0.18);
  --chip-border: rgba(255, 255, 255, 0.10);
  --chip-active-bg: rgba(255, 255, 255, 0.04);

  /* Tier colors for the Combat Power filter. */
  --tier-very-weak: #5d7290;
  --tier-weak: #4ab87a;
  --tier-strong: #e3c247;
  --tier-awful: #e07a3b;
  --tier-boss: #c14b6b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[x-cloak] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--darkest);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

#app {
  min-height: 100vh;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
}

/* ===== Header ===== */

header h1 {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 2.25rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f9fafb;
}

/* ===== Filter section =====
   Two-column search row (Name + Drops), a chip rail for personal filters
   (Elemental, Combat Power), and a unified detail card that appears below
   the rail whenever ≥1 chip is active. Specs:
   design_handoff_filters/README.md. */

.search-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 14px;
}

/* Shared field wrapper used in the search row, filter panels, etc. */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.field-label.is-ice { color: var(--el-ice); }
.field-label.is-fire { color: var(--el-fire); }
.field-label.is-lightning { color: var(--el-lightning); }

/* The TextInput component from the design spec. Replaces the old global
   input[type=search/number] rules. */
.text-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--body);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color 120ms ease;
}

.text-input:focus {
  border-color: var(--input-border-focus);
}

.text-input::-webkit-search-cancel-button {
  filter: invert(0.9);
  cursor: pointer;
}

/* Keep number-input steppers visible on WebKit (default for Firefox via
   -moz-appearance: textfield + opting back in is overkill here , the spec
   explicitly notes steppers are present in the reference design). */
.text-input[type="number"]::-webkit-outer-spin-button,
.text-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
}

/* ===== Chip rail ===== */

.filter-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.filter-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-right: 4px;
}

/* Chip is a container of two buttons: the main "header" (caret + label +
   value summary) toggles the panel; the trailing × clears the entered data.
   The caret intentionally reads as "expand/collapse" rather than "on/off"
   so it's clear that the data persists across collapse. for example, the
   creature cards keep showing their power-tier badge even when the CP
   panel is collapsed, as long as a CP value is set. */
.filter-chip {
  --accent: var(--muted-2);

  display: inline-flex;
  align-items: stretch;
  background: transparent;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  color: var(--body);
  font-family: inherit;
  transition: border-color 120ms ease, background 120ms ease;
  overflow: hidden; /* clip the clear button's hover bg to the rounded corners */
}

.filter-chip[data-kind="elem"] {
  --accent: var(--el-ice);
}

.filter-chip[data-kind="cp"] {
  --accent: var(--gold);
}

.filter-chip.is-active {
  background: var(--chip-active-bg);
  border-color: var(--accent);
}

/* Slight emphasis on chips that have data even when not expanded, makes it
   visible at a glance that "this filter has values configured" without
   needing to expand the panel. */
.filter-chip.has-data {
  border-color: var(--accent);
}

.filter-chip-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease;
}

.filter-chip-main:hover {
  background: rgba(255, 255, 255, 0.03);
}

.filter-chip-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1;
  transition: transform 120ms ease, color 120ms ease;
}

.filter-chip-caret::before {
  content: "\25B8"; /* ▸ */
}

.filter-chip.is-active .filter-chip-caret {
  transform: rotate(90deg);
  color: var(--accent);
}

.filter-chip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color 120ms ease;
}

.filter-chip.is-active .filter-chip-label,
.filter-chip.has-data .filter-chip-label {
  color: var(--accent);
}

.filter-chip-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-1);
  letter-spacing: 0;
}

/* × button on the trailing edge of the chip. Has its own border-left to
   read as a separate action from the main toggle. Only rendered while
   the chip has data (the rail uses x-show on .has-data). */
.filter-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  padding: 0;
  background: transparent;
  border: none;
  border-left: 1px solid var(--chip-border);
  color: var(--muted-2);
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.filter-chip-clear:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--body);
}

.filter-chip-clear::before {
  content: "\00D7"; /* × */
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

/* ===== Unified filter detail card ===== */

.filter-card {
  background: var(--filter-card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 18px;
}

.filter-panel {
  display: flex;
  flex-direction: column;
}

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}

.filter-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
}

.filter-panel[data-kind="elem"] {
  --accent: var(--el-ice);
}

.filter-panel[data-kind="cp"] {
  --accent: var(--gold);
}

.filter-panel-remove {
  background: transparent;
  border: none;
  color: var(--gutter);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 0;
}

.filter-panel-remove:hover {
  color: var(--muted-1);
}

.filter-divider {
  height: 1px;
  background: var(--card-divider);
}

/* ===== Elemental panel body ===== */

.elem-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.mult-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

/* ===== Combat Power panel body ===== */

.cp-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  align-items: end;
  margin-bottom: 16px;
}

/* "Show all matching" , one-shot action that clears name/drops and lists
   every mob whose difficulty falls in the selected tiers. Outlined gold
   when inactive, filled when the page is currently in cpAll mode (same
   visual pattern as the page-level "Highest Prot enemies" toggle). */
.cp-actions {
  display: flex;
  margin-bottom: 16px;
}

.cp-show-all {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 120ms ease;
}

.cp-show-all:hover {
  background: rgba(227, 194, 71, 0.10);
}

.cp-show-all.is-active {
  background: var(--gold);
  color: var(--on-accent);
}

/* ===== Filter help text ===== */

.filter-help {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--gutter);
  line-height: 1.45;
}

/* ===== Shared pills (Multiplier, Difficulty tiers) ===== */

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  /* Default accent for the Multiplier group is gold. Tier pills override
     via [data-tier]. */
  --accent: var(--gold);

  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  color: var(--body);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 120ms ease;
}

.pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.pill--dot {
  /* Tier pills have a leading 6px color dot. */
}

.pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  margin-right: 7px;
  vertical-align: middle;
}

.pill.is-active .pill-dot {
  background: var(--on-accent);
}

.pill[data-tier="veryWeak"] { --accent: var(--tier-very-weak); }
.pill[data-tier="weak"]     { --accent: var(--tier-weak); }
.pill[data-tier="strong"]   { --accent: var(--tier-strong); }
.pill[data-tier="awful"]    { --accent: var(--tier-awful); }
.pill[data-tier="boss"]     { --accent: var(--tier-boss); }

/* ===== Results header ===== */

.results-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.mode-toggle {
  padding: 0.5rem 1.1rem;
  background: var(--darker);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mode-toggle:hover {
  border-color: var(--prot);
  background: var(--light);
}

.mode-toggle.is-active {
  background: var(--prot);
  color: var(--darkest);
  border-color: var(--prot);
}

.count {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.empty {
  text-align: center;
  font-weight: bold;
  color: var(--highlight);
  font-size: 0.95rem;
  margin: 2rem 0;
}

/* ===== Pagination =====
   Prev / Page X of Y / Next, shown only when totalPages > 1. The page
   counter and result-range counter (in .count) update independently
   both are useful, and dropping either was confusing during testing. */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 24px 0 8px;
}

/* Top pagination sits between the empty hint / results-header and the first
   card. Reverse the margins so it pulls away from the cards below rather
   than from the controls above. */
.pagination--top {
  margin: 8px 0 18px;
}

.page-btn {
  padding: 8px 18px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 999px;
  color: var(--body);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.page-status-num {
  color: var(--body);
  font-weight: 700;
}

/* ===== Mob cards =====
   Card styling follows the V3b design spec (design/design_handoff_…/README.md)
   pixel-for-pixel: card shell, typography, spacing, section rails/labels,
   dual-stacked P/M cells, and footer rows. Page chrome (page bg, controls,
   header) keeps the sibling-shared theme tokens above; the card defines its
   own local design-token scope. */

.results {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mob {
  /* Local design tokens scoped to the card. */
  --card-bg: #0f1a2e;
  --card-border: rgba(255, 255, 255, 0.06);
  --card-divider: rgba(255, 255, 255, 0.05);

  --val: #f1f5fb;        /* stat value, physical */
  --body: #e6ecf5;       /* card default text */
  --muted-1: #9fb0c6;    /* CP label, footer row labels */
  --muted-2: #7a8aa3;    /* stat label */
  --muted-3: #6b7d96;    /* value modifiers */
  --gutter: #5d7290;     /* chevrons, P/M tag color */
  --chip: #c5d0df;       /* count pill text */

  --gold: #e3c247;       /* CP value */
  --magic: #c79df0;      /* magic value, defense section label */

  /* Element values */
  --el-ice: #4aa3d6;
  --el-fire: #e25c5c;
  --el-lightning: #e3c247;

  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  color: var(--body);
}

.mob-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: var(--dark);
  border-bottom: 1px solid var(--card-divider);
}

.mob-name {
  color: var(--body);
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.mob-name:hover {
  color: var(--gold);
  text-decoration: underline;
}

.mob-header-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mob-cp {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-variant-numeric: tabular-nums;
}

.mob-cp-label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--muted-1);
  text-transform: none;
}

.mob-cp-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
}

/* Power-rating badge. Shown whenever the player has entered a CP value
   (regardless of whether the CP filter chip is active). Tier color drives
   the border, label, and dot; the title attribute carries the raw CP ratio
   for users who want the exact number. */
.mob-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--tier-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--tier-color);
  cursor: help;
}

.mob-tier-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tier-color);
  flex-shrink: 0;
}

.mob-tier[data-tier="veryWeak"] { --tier-color: var(--tier-very-weak); }
.mob-tier[data-tier="weak"]     { --tier-color: var(--tier-weak); }
.mob-tier[data-tier="normal"]   { --tier-color: var(--muted-1); }
.mob-tier[data-tier="strong"]   { --tier-color: var(--tier-strong); }
.mob-tier[data-tier="awful"]    { --tier-color: var(--tier-awful); }
.mob-tier[data-tier="boss"]     { --tier-color: var(--tier-boss); }

/* ===== Stat rows =====
   Each row is a CSS grid: a section-pill on the left, a fixed 6-column stat
   grid on the right. The 6-column grid is fixed regardless of how many stats
   a row has , sections with fewer entries leave trailing cells empty rather
   than stretching, so a stat in column N always lines up across rows. */

.stat-groups {
  display: flex;
  flex-direction: column;
}

.stat-group {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  align-items: center;
  padding: 12px 22px;
  border-top: 1px solid var(--card-divider);
  gap: 16px;
}

/* Per-kind section colors: rail = the 8×8 swatch, lbl = the uppercase text. */
.stat-group[data-kind="offense"] {
  --rail: #e07a3b;
  --lbl: #f0a574;
}
.stat-group[data-kind="defense"] {
  --rail: #a86bd6;
  --lbl: #c79df0;
}
.stat-group[data-kind="stats"] {
  --rail: #e3c247;
  --lbl: #f0d97a;
}
.stat-group[data-kind="rewards"] {
  --rail: #4ab87a;
  --lbl: #7fd3a0;
}
.stat-group[data-kind="elements"] {
  --rail: #4aa3d6;
  --lbl: #7fc4ea;
}

.group-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* No padding-top , the row is align-items: center now. */
}

.group-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--rail);
  flex-shrink: 0;
}

.group-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--lbl);
}

.stat-cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 18px;
  align-items: center;
  min-width: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.stat-value {
  display: flex;
  align-items: baseline;
  font-size: 14px;
  font-weight: 700;
  color: var(--val);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.stat-value .sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted-3);
  margin-left: 4px;
}

/* ===== Dual phys/magic stacked cell (V3b signature) =====
   Used in Defense for Defense / Protection / Cap Crit Req. Both rows are
   the same font size; the only difference is the magic value's purple tint.
   User opted for SVG icons instead of "P" / "M" letters , sword for
   physical, gem for magic. Both occupy the same 10px gutter width as the
   spec's letter tags. */

.pm-rows {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.pm-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pm-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.pm-icon.icon-phys {
  color: var(--gutter);
}

.pm-icon.icon-magic {
  color: var(--el-ice);
}

.pm-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--val);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

/* Spec: magic values render purple to tie back to the Defense section label
   color. Applies to all dual-stacked cells, not just protection. */
.pm-row:nth-child(2) .pm-value {
  color: var(--magic);
}

/* Elements group: per-element value coloring overrides the default. */
.stat.is-ice .stat-value {
  color: var(--el-ice);
}
.stat.is-fire .stat-value {
  color: var(--el-fire);
}
.stat.is-lightning .stat-value {
  color: var(--el-lightning);
}
.stat.is-mult.is-pos .stat-value {
  color: var(--pos);
}
.stat.is-mult.is-neg .stat-value {
  color: var(--neg);
}

/* ===== Card sub-sections (titles / drops / skills) =====
   Footer rows match the stat-row rhythm: same 12×22 padding and divider.
   Drops/Skills are collapsible (▸ chevron rotates on open); Titles is
   always-visible (no toggle). */

.card-section {
  /* Border-top on each row gives a divider between sections; no extra
     border on the wrapper. The last row's bottom edge is the card's. */
}

.section-title,
.section-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--card-divider);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted-1);
}

.section-toggle {
  width: 100%;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.section-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}

.section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  color: var(--chip);
  letter-spacing: 0; /* reset , parent row tracks tight */
}

.caret {
  display: inline-block;
  font-size: 10px;
  color: var(--gutter);
  line-height: 1;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.caret::before {
  content: "\25B8"; /* ▸ U+25B8 BLACK RIGHT-POINTING SMALL TRIANGLE */
}

.section-toggle.is-open .caret {
  transform: rotate(90deg);
}

/* ===== Title / Drop / Skill row tables =====
   Spec leaves expanded content "out of scope", so the V3b tokens (8/22 row
   padding, 9px label, 12px value, --card-divider hairlines) are extended
   here rather than redrawn from scratch. */

.title-list,
.drop-list,
.skill-list {
  font-variant-numeric: tabular-nums;
}

.title-row,
.drop-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  padding: 8px 22px;
  font-size: 12px;
  color: var(--body);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.title-row--header,
.drop-row--header {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted-2);
  background: rgba(0, 0, 0, 0.15);
  border-top: none;
}

.title-prot {
  color: var(--magic);
  font-weight: 700;
}

.title-crit {
  color: var(--gold);
  font-weight: 700;
}

.drop-chance {
  color: var(--gold);
}

.skill-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  padding: 8px 22px;
  font-size: 12px;
  color: var(--body);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.skill-rank {
  color: var(--gold);
  font-weight: 700;
  text-align: right;
}

/* ===== Small screens ===== */

/* Spec: the card targets desktop widths 760–880px. Below ~640px, drop the
   pill onto its own line above the 6-col grid and reduce to 3 columns. */
@media (max-width: 720px) {
  #app {
    padding: 1.25rem 0.75rem 2rem;
  }

  header h1 {
    font-size: 1.6rem;
  }

  .stat-group {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 12px 16px;
    gap: 10px;
  }

  .stat-cells {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
  }

  .section-title,
  .section-toggle,
  .title-row,
  .drop-row,
  .skill-row {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mob-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
  }

  /* Search row collapses to single column. */
  .search-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Combat Power's 200px+1fr layout cramps badly below ~600px (spec calls
     this out). Drop to a single column on mobile. */
  .cp-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .filter-card {
    padding: 14px 16px;
  }

  .elem-inputs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}