/* Ценовые возможности (2026-09-25). The same neutral surfaces as the rest of the product:
   a flat below the median of its peers is not a discount, and a price drop is an observation.
   Dark mode rides on the same tokens. */

.opp-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.opp-subtitle { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.45;
  color: var(--ink-2); }
.opp-note { margin: 0; max-width: 70ch; font-size: 13px; line-height: 1.5;
  color: var(--ink-muted, var(--ink-2)); }

/* ---- summary ---------------------------------------------------------------------------------- */

.opp-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 2px; }
.opp-summary-item { display: grid; gap: 2px; min-width: 140px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.opp-summary-value { font-size: 26px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink); min-height: 30px; }
.opp-summary-label { font-size: 12.5px; color: var(--ink-2); }
.opp-summary-caption { margin: 0; max-width: 70ch; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-muted, var(--ink-2)); }

/* ---- tabs, days ------------------------------------------------------------------------------- */

.opp-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; }
.opp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.opp-tab:hover { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); }
.opp-tab.is-active { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); font-weight: 600; }
.opp-tab-count { min-width: 26px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; }

.opp-days-block { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.opp-days { display: flex; gap: 8px; }
.opp-day { padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.opp-day:hover { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); }
.opp-day.is-active { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); font-weight: 600; }
.opp-days-note { margin: 0; color: var(--ink-muted, var(--ink-2)); font-size: 12.5px;
  line-height: 1.5; }

/* ---- filters ----------------------------------------------------------------------------------- */

.opp-drawer-toggle { display: none; align-items: center; gap: 6px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.opp-drawer-toggle:hover { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); }

.opp-filters { display: grid; gap: 12px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.opp-filters-basic { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.opp-filters-extra { display: none; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.opp-filters.is-extra-open .opp-filters-extra { display: grid; }

.opp-field { display: grid; gap: 5px; min-width: 0; }
.opp-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); }
.opp-input { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit;
  font-size: 14px; }
.opp-input:focus { border-color: var(--brand-primary, #1f4d3a); outline: none; }

.opp-more-toggle { justify-self: start; padding: 8px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--ink-2); font: inherit;
  font-size: 13px; cursor: pointer; }
.opp-more-toggle:hover { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); }
.opp-reset { justify-self: start; padding: 8px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer; }
.opp-reset:hover { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); }

/* ---- the cards --------------------------------------------------------------------------------- */

.opp-results { display: grid; gap: 14px; min-width: 0; }
.opp-cards { display: grid; gap: 14px; min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.opp-card { display: grid; gap: 8px; align-content: start; padding: 16px; min-width: 0;
  overflow-wrap: anywhere; }
.opp-card-project { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink);
  text-decoration: none; }
.opp-card-project:hover { color: var(--brand-primary, #1f4d3a); }
.opp-card-location { margin: 0; font-size: 13px; color: var(--ink-2); }
.opp-card-meta { margin: 0; font-size: 13px; color: var(--ink-2); }
.opp-card-price { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.opp-card-price strong { font-size: 17px; font-weight: 700; color: var(--ink); }
.opp-card-unit { color: var(--ink-2); }

.opp-badge { justify-self: start; padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12px;
  font-weight: 600; line-height: 1.3; }
.opp-badge-both { border-color: color-mix(in srgb, var(--brand-primary, #1f4d3a) 45%, var(--border));
  color: var(--brand-primary, #1f4d3a);
  background: color-mix(in srgb, var(--brand-primary, #1f4d3a) 8%, transparent); }

.opp-signal { display: grid; gap: 4px; min-width: 0; }
.opp-signal-line { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.opp-signal-date { margin: 0; font-size: 12.5px; color: var(--ink-2); }

.opp-flags { display: grid; gap: 8px; min-width: 0; }
.opp-flag { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px;
  line-height: 1.5; }
.opp-flag-title { margin: 0; font-weight: 600; color: var(--ink); }
.opp-flag-detail { margin: 0; }

.opp-card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 2px; }
.opp-card-link { font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.opp-card-link:hover { color: var(--brand-primary, #1f4d3a); }
.opp-card-secondary { font-size: 13px; color: var(--ink-2); text-decoration: none; }
.opp-card-secondary:hover { color: var(--brand-primary, #1f4d3a); }

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

.opp-pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: center; padding: 14px 0; min-width: 0; }
.opp-page-button,
.opp-page-number { min-width: 36px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit;
  font-size: 13.5px; cursor: pointer; text-align: center; }
.opp-page-button:hover,
.opp-page-number:hover { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); }
.opp-page-button.is-disabled { opacity: .5; cursor: default; }
.opp-page-number.is-active { border-color: var(--brand-primary, #1f4d3a);
  color: var(--brand-primary, #1f4d3a); font-weight: 600; }
.opp-page-ellipsis { padding: 8px 4px; color: var(--ink-2); }

/* ---- skeleton, empty, error ------------------------------------------------------------------- */

.opp-skeleton-card { min-height: 280px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--surface-2);
  animation: opp-pulse 1.2s ease-in-out infinite; }
@keyframes opp-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

.opp-skeleton { display: inline-block; min-width: 60px; border-radius: 8px;
  background: var(--surface-2); animation: opp-pulse 1.2s ease-in-out infinite; }
.opp-skeleton-figure { width: 90px; height: 26px; }
.opp-skeleton-count { width: 26px; height: 16px; }

.opp-empty { display: grid; justify-items: center; gap: 10px; padding: 34px 16px;
  text-align: center; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.opp-empty p { margin: 0; }

.opp-error { display: grid; justify-items: center; gap: 10px; padding: 20px;
  text-align: center; color: #b42318; font-size: 14px; line-height: 1.5; }
:root[data-theme="dark"] .opp-error { color: #ff6b6b; }
.opp-error p { margin: 0; }
.opp-retry { padding: 10px 18px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; }
.opp-retry:hover { border-color: var(--brand-primary, #1f4d3a); color: var(--brand-primary, #1f4d3a); }

/* ---- «Как считается?» ------------------------------------------------------------------------ */

.opp-method { max-width: 70ch; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--surface); color: var(--ink-2);
  font-size: 13px; line-height: 1.6; }
.opp-method summary { font-weight: 700; color: var(--ink); cursor: pointer; }
.opp-method p { margin: 8px 0 0; }

/* ---- phones ------------------------------------------------------------------------------------ */

@media (max-width: 640px) {
  .opp-summary-item { flex: 1 1 140px; min-width: 0; padding: 10px 14px; }
  .opp-summary-value { font-size: 22px; min-height: 26px; }
  .opp-filters { display: none; padding: 14px; }
  .opp-filters.is-open { display: grid; }
  .opp-filters-basic,
  .opp-filters-extra { grid-template-columns: minmax(0, 1fr); }
  .opp-drawer-toggle { display: inline-flex; justify-self: start; }
  .opp-input { padding: 11px 12px; font-size: 16px; }   /* 16px stops iOS zooming on focus */
  .opp-day { padding: 9px 14px; }
  .opp-tab { padding: 9px 14px; }
  .opp-cards { grid-template-columns: minmax(0, 1fr); }
  .opp-card { min-width: 0; }
  .opp-more-toggle,
  .opp-reset { min-height: 44px; }
  .opp-pagination { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}

/* =====================================================================================
   ЦЕНОВЫЕ ВОЗМОЖНОСТИ V2 (2026-09-26) — the page reads as an instrument, not a catalogue.
   The numbers, the words and every calculation are untouched; what changes is how much room
   the page spends before the first flat and how loud it is while it does.
   ===================================================================================== */

/* ---- the top: one compact block ---------------------------------------------------------------- */

#opportunities .opp-page{gap:12px;}
#opportunities .opp-subtitle{margin:0; max-width:62ch; font-size:14.5px; line-height:1.45;
  color:var(--ink-2);}
/* The method stays in full - it is what makes the number trustworthy - but it reads as a footnote
   to the page rather than a paragraph of it. */
#opportunities .opp-note{margin:0; max-width:74ch; padding:8px 12px; border-radius:10px;
  border:1px solid var(--border-neutral, var(--border)); background:var(--surface-2);
  font-size:12.5px; line-height:1.4; color:var(--ink-muted, var(--ink-2));}

/* ---- summary: one strip, four segments --------------------------------------------------------- */

#opportunities .opp-summary{display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0; margin:0; padding:0; overflow:hidden;
  border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:none;}
#opportunities .opp-summary-item{display:grid; gap:1px; align-content:center; padding:10px 16px;
  border:0; border-left:1px solid var(--border); border-radius:0; background:transparent;
  box-shadow:none;}
#opportunities .opp-summary-item:first-child{border-left:0;}
#opportunities .opp-summary-value{font-size:24px; font-weight:700; line-height:1.1;
  letter-spacing:-.02em; color:var(--ink);}
#opportunities .opp-summary-label{font-size:12px; line-height:1.3; color:var(--ink-muted, var(--ink-2));}
#opportunities .opp-summary-caption{margin:0; font-size:12px; line-height:1.35;
  color:var(--ink-muted, var(--ink-2));}

/* ---- kind and period: two segmented controls on one line --------------------------------------- */

#opportunities .opp-controls-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
#opportunities .opp-tabs,
#opportunities .opp-days{display:inline-flex; align-items:center; gap:4px; padding:4px; margin:0;
  border:0; border-radius:12px; background:var(--tabs-track, #EEF2F0);
  overflow-x:auto; scrollbar-width:none;}
#opportunities .opp-tabs::-webkit-scrollbar,
#opportunities .opp-days::-webkit-scrollbar{display:none;}
#opportunities .opp-tab,
#opportunities .opp-day{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border:0; border-radius:9px; background:transparent; color:var(--ink-2); font:inherit;
  font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
  transition:background .15s ease, color .15s ease;}
#opportunities .opp-tab:hover,
#opportunities .opp-day:hover{color:var(--brand-primary);}
/* One accent, and only on what is chosen. */
#opportunities .opp-tab.is-active,
#opportunities .opp-day.is-active{background:var(--brand-primary);
  color:#fff; box-shadow:0 4px 12px rgba(31,77,58,.18);}
#opportunities .opp-tab:focus-visible,
#opportunities .opp-day:focus-visible{outline:2px solid var(--brand-primary); outline-offset:2px;}
#opportunities .opp-tab-count{font-weight:600; color:var(--ink-muted, var(--ink-2));}
#opportunities .opp-tab.is-active .opp-tab-count{color:inherit;}
#opportunities .opp-days-note{margin:0; font-size:12px; line-height:1.35;
  color:var(--ink-muted, var(--ink-2));}
@media (prefers-reduced-motion:reduce){
  #opportunities .opp-tab,
  #opportunities .opp-day{transition:none;}
}

/* ---- filters: a toolbar, not a panel ------------------------------------------------------------ */

#opportunities .opp-filters{padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); box-shadow:none; gap:8px 10px;}
#opportunities .opp-field{gap:3px; min-width:0;}
#opportunities .opp-field > label,
#opportunities .opp-field-label{font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-muted, var(--ink-2));}
#opportunities .opp-filters select,
#opportunities .opp-filters input{height:34px; padding:0 10px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:13.5px;}
#opportunities .opp-filters select:focus-visible,
#opportunities .opp-filters input:focus-visible{outline:2px solid var(--brand-primary); outline-offset:1px;}
/* «Ещё фильтры» and «Сбросить» are text actions, not buttons competing with the data. */
#opportunities .opp-more,
#opportunities .opp-reset{height:30px; padding:0 8px; border:0; border-radius:8px;
  background:none; color:var(--ink-2); font-size:13px; font-weight:600; cursor:pointer;}
#opportunities .opp-more:hover,
#opportunities .opp-reset:hover{color:var(--brand-primary); background:var(--surface-2);}

/* ---- cards: a cover, then the reason -------------------------------------------------------------- */

#opportunities .opp-cards{gap:14px;}
#opportunities .opp-card{padding:0 0 14px; overflow:hidden; border-radius:14px; gap:6px;
  border:1px solid var(--border); background:var(--surface); box-shadow:none;}
#opportunities .opp-card > *:not(.opp-card-cover){margin-inline:14px;}
.opp-card-cover{display:block; width:100%; height:132px; object-fit:cover; margin:0 0 10px;
  background:var(--surface-2);}
.opp-card-cover--empty{position:relative;}
/* A shape where a photo would be, not an apology for its absence. */
.opp-card-cover--empty::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--ink) 6%, transparent), transparent 62%),
    repeating-linear-gradient(135deg, transparent 0 14px,
      color-mix(in srgb, var(--ink) 3%, transparent) 14px 28px);}
#opportunities .opp-card.is-coverless::before{content:""; display:block; width:100%; height:132px;
  margin-bottom:10px; background:var(--surface-2);}
#opportunities .opp-card-project{font-size:15.5px; font-weight:700; color:var(--ink);
  text-decoration:none;}
#opportunities .opp-card-project:hover{color:var(--brand-primary);}
#opportunities .opp-card-location{margin:1px 0 0; font-size:12.5px;
  color:var(--ink-muted, var(--ink-2));}
#opportunities .opp-card-meta{margin:4px 0 0; font-size:12.5px; color:var(--ink-2);}
/* The price is the one heavy number; the ₽/м² beside it is not. */
#opportunities .opp-card-price{margin:4px 0 0; font-size:13px; color:var(--ink-2);}
#opportunities .opp-card-price strong{font-size:18px; font-weight:700; color:var(--ink);}
#opportunities .opp-card-unit{font-size:12.5px; font-weight:500; color:var(--ink-muted, var(--ink-2));}
/* The difference from the benchmark is why the flat is on this page, so it is the loudest line
   after the price. */
#opportunities .opp-signal-line b{font-size:15px;}
#opportunities .opp-signal-quiet{font-size:12px;}
#opportunities .opp-card-actions{margin-top:8px; display:flex; gap:12px;}
#opportunities .opp-card-link{font-size:13px; font-weight:600; color:var(--brand-primary);}
#opportunities .opp-card-secondary{font-size:13px; color:var(--ink-2);}

/* ---- badges: three quiet, distinguishable colours ----------------------------------------------- */

#opportunities .opp-badge{height:22px; padding:0 9px; border-radius:7px; font-size:11.5px;
  font-weight:700; letter-spacing:.01em; border:1px solid transparent;}
#opportunities .opp-badge-below{background:color-mix(in srgb, var(--good) 10%, var(--surface));
  border-color:color-mix(in srgb, var(--good) 32%, transparent); color:var(--good);}
#opportunities .opp-badge-drop{background:color-mix(in srgb, #2563eb 9%, var(--surface));
  border-color:color-mix(in srgb, #2563eb 28%, transparent); color:#1d4ed8;}
#opportunities .opp-badge-both{background:color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
  border-color:color-mix(in srgb, var(--brand-primary) 30%, transparent); color:var(--brand-primary);}
:root[data-theme="dark"] #opportunities .opp-badge-drop{color:#93b4fb;}

/* ---- flags stay context, never alarm ------------------------------------------------------------ */

#opportunities .opp-flag{margin-top:6px;}
#opportunities .opp-flag-title{font-size:12px; color:var(--ink-muted, var(--ink-2));}
#opportunities .opp-flag-detail{font-size:12px; line-height:1.4;}

/* ---- widths -------------------------------------------------------------------------------------- */

@media (max-width:1023.98px){
  #opportunities .opp-summary{grid-template-columns:repeat(2, minmax(0,1fr));}
  #opportunities .opp-summary-item:nth-child(odd){border-left:0;}
  #opportunities .opp-summary-item:nth-child(n+3){border-top:1px solid var(--border);}
}
@media (max-width:767.98px){
  #opportunities .opp-page{gap:10px;}
  #opportunities .opp-controls-row{gap:8px;}
  #opportunities .opp-tabs,
  #opportunities .opp-days{max-width:100%;}
  .opp-card-cover{height:150px;}
  #opportunities .opp-card.is-coverless::before{height:150px;}
}

/* «Ещё фильтры» and «Сбросить» sit on one line at the end of the toolbar; the reset is absent
   until a filter is actually set, so the default state does not pay for it. */
#opportunities .opp-filters-actions{display:flex; align-items:center; gap:4px; flex:0 0 auto;}
#opportunities .opp-reset[hidden]{display:none;}

/* ---- readability pass (2026-09-27): plain-language labels are longer, so phones get a 2x2 grid of kinds
   instead of a sideways-scrolling strip that hid two of the four; links stay graphite until hovered. ---- */
#opportunities .opp-card-link{color:var(--text-link, var(--ink));}
#opportunities .opp-card-link:hover{color:var(--text-link-hover, var(--brand-primary));}
#opportunities .opp-note b{color:var(--ink); font-weight:600;}
@media (max-width:767.98px){
  #opportunities .opp-controls-row > .opp-tabs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; overflow:visible;}
  #opportunities .opp-tabs .opp-tab{height:auto; min-height:34px; padding:6px 10px; white-space:normal; justify-content:space-between; text-align:left; line-height:1.25;}
  #opportunities .opp-summary-label{font-size:12.5px;}
  #opportunities .opp-summary-caption{font-size:12.5px; line-height:1.45;}
  #opportunities .opp-note{line-height:1.5;}
}
#opportunities .opp-tab-count{white-space:nowrap; flex:0 0 auto;}

/* ---- cover chain: skeleton while loading, photo fades in, designed placeholder when there is none ------ */
.opp-card-media{position:relative; width:100%; height:132px; margin:0 0 10px; overflow:hidden; background:var(--surface-2);}
#opportunities .opp-card-media > .opp-card-cover{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; transition:opacity .25s ease;}
#opportunities .opp-card-media.is-loaded > .opp-card-cover{opacity:1;}
.opp-card-media.is-loading::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--ink) 6%, transparent) 50%, transparent 80%);
  background-size:200% 100%; animation:opp-cover-shimmer 1.4s ease-in-out infinite;}
@keyframes opp-cover-shimmer{from{background-position:120% 0} to{background-position:-120% 0}}
.opp-cover-fallback{position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:flex-end; padding:9px 12px;
  background:linear-gradient(165deg, color-mix(in srgb, var(--ink) 12%, var(--surface-2)) 0%, color-mix(in srgb, var(--ink) 5%, var(--surface-2)) 70%);}
.opp-cover-fallback svg{position:absolute; left:0; right:0; bottom:0; width:100%; height:78%;
  fill:color-mix(in srgb, var(--ink) 14%, transparent);}
.opp-cover-fallback-label{position:relative; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 45%, transparent);}
@media (prefers-reduced-motion:reduce){
  .opp-card-media.is-loading::after{animation:none;}
  #opportunities .opp-card-media > .opp-card-cover{transition:none;}
}
@media (max-width:767.98px){
  .opp-card-media{height:150px;}
}
#opportunities .opp-card > .opp-card-media{margin-inline:0;}
.opp-card-media{background:color-mix(in srgb, var(--ink) 7%, var(--surface-2));}
.opp-card-media.is-loading::after{background:linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--ink) 9%, transparent) 50%, transparent 80%); background-size:200% 100%;}
#opportunities .opp-method{margin:4px 0 0; font-size:11.5px; line-height:1.4; color:var(--ink-muted, var(--ink-2));}

/* V4: inside the filled active tab the count sits on a translucent white pill, not an opaque one. */
#opportunities .opp-tab.is-active .opp-tab-count{background:rgba(255,255,255,.18); color:#fff;}