/* ══════════════════════════════════════════════════════════════════════════
   Competitions hub — V3 Step 35 redesign.
   Token-driven (light/dark automatic), logical properties (RTL automatic).
   Foreground gold = var(--accent); fill gold = var(--accent-surface).
   ══════════════════════════════════════════════════════════════════════════ */

.comp-wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  padding-block: 8px 64px;
  min-height: auto;                 /* undo the global .container min-height */
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.comp-hero {
  position: relative;
  padding-block: clamp(28px, 5vw, 52px) clamp(20px, 3vw, 32px);
  overflow: hidden;
}
.comp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px;
}
.comp-hero__eyebrow i { font-size: var(--fs-xs); }
.comp-hero__title {
  font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05; margin: 0 0 12px;
  /* FND-073 decision 1 — one heading colour. Was gradient-clipped text
     (gold -> periwinkle #818cf8 dark, rust -> indigo #4338ca light), which is a third and fourth heading
     mechanism on top of var(--text-primary) and the inline-styled auth
     headings. It also degraded badly: in dark mode the gradient ran to a
     periwinkle the brand does not contain, and the last word faded out. */
  color: var(--text-primary);
  width: fit-content;
}
.comp-hero__tag {
  color: var(--text-muted); font-size: clamp(.95rem, 1.4vw, 1.08rem);
  line-height: 1.6; max-width: 62ch; margin: 0;
}
.comp-hero__stats {
  display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px;
}
.comp-hero__stat { display: flex; align-items: baseline; gap: 7px; }
.comp-hero__stat b { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.comp-hero__stat span { font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

/* ── Filter bar (sticky, glassy) ───────────────────────────────────────── */
.comp-filters {
  position: sticky; top: 8px; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  margin-bottom: 28px;
}
.comp-search {
  flex: 1 1 200px; position: relative; display: flex; align-items: center;
}
.comp-search i {
  position: absolute; inset-inline-start: 14px; color: var(--text-muted); font-size: var(--fs-sm); pointer-events: none;
}
.comp-search input {
  width: 100%; height: 42px;
  padding-inline: 38px 14px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: var(--fs-md); font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.comp-search input::placeholder { color: var(--text-muted); }
.comp-search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Segmented status tabs */
.comp-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.comp-seg label {
  display: inline-flex; align-items: center; cursor: pointer;
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-muted);
  white-space: nowrap; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.comp-seg label:hover { color: var(--text-secondary); }
.comp-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
/* a11y (Wave 4): the radios are visually hidden (0×0, opacity 0), so the
   browser's native focus ring had nothing to draw around — a keyboard user
   arrowing through the status tabs saw NO focus at all (WCAG 2.4.7). Lift the
   ring onto the label that owns the focused input. */
.comp-seg label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* `input:checked + span` never matched — the label's text is a bare text node,
   not a <span>. Select the label itself so the checked state actually paints
   client-side too (the server still re-renders .is-active after autosubmit). */
.comp-seg label:has(input:checked),
.comp-seg label.is-active {
  color: var(--bg-deep); background: var(--accent-surface);
}
.comp-seg label.is-active { box-shadow: 0 1px 6px rgba(205,161,44,.28); }

/* Styled select + free toggle */
.comp-select {
  height: 42px; padding-inline: 14px 34px; appearance: none;
  background: var(--bg-surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a99af' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: var(--fs-md); font-family: inherit; cursor: pointer;
}
[dir="rtl"] .comp-select { background-position: left 12px center; }
.comp-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.comp-free {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-secondary);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer; user-select: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.comp-free input { accent-color: var(--accent-surface); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.comp-free:has(input:checked) { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ── Card grid ─────────────────────────────────────────────────────────── */
.comp-grid {
  display: grid; gap: 20px;
  /* min(100%,320px) so the single track can shrink below 320px instead of
   * overflowing a ~360px viewport (Wave 7 · FR-4). */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.comp-card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(0deg, var(--accent-dim) 0%, var(--bg-card) 62%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .comp-card { border-color: rgba(205,161,44,.18); }
.comp-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.comp-card.is-closed { opacity: .82; }

/* Cover — image or a premium generated "blueprint + gold halo" cover */
.comp-cover {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--bg-surface);
}
.comp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-cover--gen { display: grid; place-items: center; }
.comp-cover--gen::before {                 /* blueprint grid */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--comp-grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--comp-grid-ink) 1px, transparent 1px);
  background-size: 16px 16px;
  --comp-grid-ink: rgba(255,255,255,.05);
}
[data-theme="light"] .comp-cover--gen::before { --comp-grid-ink: rgba(0,0,0,.05); }
.comp-cover--gen::after {                   /* type-tinted radial halo */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, var(--comp-halo, rgba(205,161,44,.22)), transparent 62%);
}
.comp-cover__icon {
  position: relative; z-index: 1;
  font-size: clamp(38px, 6vw, 52px);
  color: var(--comp-ink, var(--accent));
  filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--comp-ink, var(--accent)) 45%, transparent));
}

/* Per-type accent (variety + a subtle information cue) */
.comp-cover[data-type="open"]         { --comp-ink: var(--accent);  --comp-halo: rgba(205,161,44,.24); }
.comp-cover[data-type="student"]      { --comp-ink: #5a9eed;        --comp-halo: rgba(90,158,237,.22); }
.comp-cover[data-type="professional"] { --comp-ink: var(--success); --comp-halo: rgba(29,158,117,.20); }
.comp-cover[data-type="research"]     { --comp-ink: #a78bfa;        --comp-halo: rgba(167,139,250,.22); }
.comp-cover[data-type="realized"]     { --comp-ink: #f07850;        --comp-halo: rgba(240,120,80,.22); }

/* Cover overlays */
.comp-badge {                               /* type badge, frosted gold, top-start */
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  /* gold on a gold tint measured 4.29 in dark — see --accent-ink */
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
}
.comp-deadline {                            /* days-left pill, top-end, urgency-colored */
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: rgba(10,12,16,.62); color: var(--text-secondary);
  border: 1px solid var(--border-hover);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .02em;
}
[data-theme="light"] .comp-deadline { background: rgba(255,255,255,.72); }
.comp-deadline.is-soon   { color: var(--accent-ink); /* --accent-hover is #d6a13a in light, on a rgba(255,255,255,.72) scrim: 2.25 */ border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.comp-deadline.is-urgent { color: #ff8a6b; border-color: rgba(255,138,107,.5); }
[data-theme="light"] .comp-deadline.is-urgent { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.comp-deadline.is-closed { color: var(--text-muted); }

.comp-cover__veil {                         /* closed/results scrim */
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px;
  background: linear-gradient(0deg, rgba(9,11,14,.66) 0%, transparent 55%);
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase;
}

/* Card body */
.comp-card__body { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 16px; flex: 1; }
.comp-card__type {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent);
}
.comp-card__title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary);
  line-height: 1.28; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.comp-card__title:hover { color: var(--accent); }
.comp-card__org { font-size: var(--fs-sm); color: var(--text-muted); }
.comp-card__meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px;
}
.comp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.comp-chip i { font-size: var(--fs-2xs); color: var(--text-muted); }
.comp-chip--free { color: var(--success); border-color: color-mix(in srgb, var(--success) 38%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); }
.comp-chip--free i { color: var(--success); }

/* Save button (card) */
.comp-save {
  margin-top: auto; padding-top: 12px;
}
.comp-save button, .comp-save--wide {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border-hover); color: var(--text-secondary);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); font-family: inherit; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.comp-save button:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-dim); }
.comp-save button.is-saved {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-dim);
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.comp-empty {
  grid-column: 1 / -1; text-align: center; padding: 72px 20px; color: var(--text-muted);
}
.comp-empty__mark {
  width: 76px; height: 76px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: var(--radius-xl); font-size: 30px; color: var(--accent);
  background: var(--accent-dim); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.comp-empty h2 { font-size: 1.3rem; font-weight: var(--fw-bold); color: var(--text-primary); margin: 0 0 8px; }
.comp-empty p { font-size: var(--fs-md); margin: 0 auto; max-width: 48ch; line-height: 1.55; }

.comp-pagination { margin-top: 32px; }

/* ══════════════════════════════════════════════════════════════════════════
   Detail page
   ══════════════════════════════════════════════════════════════════════════ */
.comp-detail { max-width: 900px; }
.comp-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  color: var(--text-muted); font-size: var(--fs-sm); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.comp-back:hover { color: var(--accent); }
.comp-back i { font-size: var(--fs-xs); }
[dir="rtl"] .comp-back i { transform: scaleX(-1); }

.comp-banner {
  width: 100%; max-height: 340px; object-fit: cover;
  border-radius: var(--radius-lg); margin-bottom: 22px; border: 1px solid var(--border);
}

.comp-head {
  position: relative; padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 34px);
  background: linear-gradient(0deg, var(--accent-dim) 0%, var(--bg-card) 58%);
  border: 1px solid var(--border-hover); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden; margin-bottom: 22px;
}
[data-theme="dark"] .comp-head { border-color: rgba(205,161,44,.20); }
.comp-head::after {                         /* faint gold corner glow */
  content: ""; position: absolute; top: -40%; inset-inline-end: -10%; width: 320px; height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%);
  pointer-events: none;
}
.comp-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase;
}
.comp-detail__title {
  position: relative; margin: 0 0 8px; font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 800; color: var(--text-primary); line-height: 1.15; letter-spacing: -.015em;
}
.comp-detail__org { position: relative; color: var(--text-muted); font-size: var(--fs-lg); margin: 0; }
.comp-detail__org strong { color: var(--text-secondary); font-weight: var(--fw-semi); }
.comp-detail__closed {
  position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--overlay-hover); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
}
.comp-detail__lede { position: relative; margin: 16px 0 0; font-size: var(--fs-xl); color: var(--text-secondary); line-height: 1.5; }

/* Facts grid */
.comp-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 24px;
}
.comp-fact { padding: 16px 18px; background: var(--bg-card); display: flex; flex-direction: column; gap: 5px; }
.comp-fact__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
.comp-fact__label i { color: var(--accent); font-size: var(--fs-xs); }
.comp-fact__value { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); }
.comp-fact__sub { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--accent); }
.comp-fact__sub.is-urgent { color: #ff8a6b; }
[data-theme="light"] .comp-fact__sub.is-urgent { color: var(--danger); }

/* Action row */
.comp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.comp-enter {
  flex: 1 1 240px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding-inline: 22px; border-radius: var(--radius-md);
  /* FND-073 d6: was a solid-gold fill with dark text — a second primary
     treatment. Now the one canonical primary (dim fill, gold text + border);
     prominence comes from its 50px size and full-width placement, not a
     louder fill. */
  background: var(--accent-dim); color: var(--accent) !important;
  border: 1px solid rgba(205,161,44,.45);
  font-size: var(--fs-lg); font-weight: var(--fw-bold); text-decoration: none;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 20%, transparent);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-fast) var(--ease);
}
/* FND-073 d6: hover deepens the dim fill and the border rather than flipping to
   a solid gold — the primary stays one treatment. The old light override forced
   white text (for the solid-gold fill that no longer exists), which on the dim
   fill would be illegible; removed. */
.comp-enter:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 24%, transparent); }
/* Secondary actions — the save toggle (a <button>) and the Wave-3
   add-to-calendar link (an <a>) share one look. */
.comp-save-lg, .comp-cal {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding-inline: 22px; border-radius: var(--radius-md);
  background: transparent; border: 1px solid var(--border-hover); color: var(--text-secondary);
  font-size: var(--fs-md); font-weight: var(--fw-semi); font-family: inherit; cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.comp-save-lg:hover, .comp-save-lg.is-saved, .comp-cal:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-dim); text-decoration: none; }

/* ── Paid placement (Wave 5) ───────────────────────────────────────────────
   The disclosure label. It must READ as a disclosure — muted and factual, not
   a reward badge — so a paid slot is never mistaken for an editorial pick.
   Rendered only from `is_promoted`, so an expired term stops claiming it. */
.comp-sponsored {
  display: inline-block; margin-inline-start: 6px; padding: 1px 7px;
  border: 1px solid var(--border-hover); border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--text-muted);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
}

/* ── Related + cross-link (Wave 5) ─────────────────────────────────────── */
.comp-related { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.comp-related__item {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.comp-related__item:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); text-decoration: none; }
.comp-related__type { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.comp-related__title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text-primary); }
.comp-related__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.comp-crosslink {
  margin-top: 26px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--bg-surface); border: 1px solid var(--border);
  font-size: var(--fs-md); color: var(--text-secondary);
}
.comp-crosslink p { margin: 0; }

/* Content sections */
.comp-section { margin-bottom: 26px; }
.comp-section__label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.comp-section__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to var(--_dir, right), color-mix(in srgb, var(--accent) 32%, transparent), transparent); }
[dir="rtl"] .comp-section__label::after { --_dir: left; }
.comp-section__body { font-size: var(--fs-lg); line-height: 1.7; color: var(--text-secondary); white-space: pre-line; }

/* Results panel */
.comp-results {
  padding: 20px 22px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-dim), transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.comp-results .comp-section__label { margin-bottom: 10px; }
.comp-results .comp-section__label::after { display: none; }
.comp-results__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--accent); font-weight: var(--fw-semi); text-decoration: none; }
.comp-results__link:hover { color: var(--accent-hover); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .comp-grid { grid-template-columns: 1fr; }
  .comp-filters { position: static; }
  .comp-seg { width: 100%; overflow-x: auto; }
  .comp-actions { flex-direction: column; }
  .comp-enter, .comp-save-lg, .comp-cal { width: 100%; }
}

/* (Wave 7 · FR-4) explicit ≤480 tier — key facts stack one-up (cleaner than a
 * cramped 2-up), grid gap tightens. */
@media (max-width: 480px) {
  .comp-grid { gap: 14px; }
  .comp-facts { grid-template-columns: 1fr; }
}