/* a11y-contrast.css — centralized color-contrast fixes for selectors flagged
 * by Lighthouse (color-contrast audit). Loaded after page styles in Base.astro;
 * !important is deliberate: these override embedded per-page <style> blocks.
 *
 * Light backgrounds (#FAF9F7 / #fff): text darkened to #57534E (>= 7:1).
 * Dark tiles (#131110 / #1C1917): muted text lightened to #A8A29E (>= 6:1).
 */

/* ---------- Light-background muted text ---------- */
.section-head p,
.pc-head p,
.pr-cmp-head p,
.pr-calc-note,
.pr-inc-note,
.pr-ticks .tk,
.pr-feat td.rep .none,
.sp-cta-in p,
.sp-cta-micro,
.agency-head .subhead,
.rail-top .rail-hint,
.uc-caption .uc-lbl,
.uc-col-hd .uc-works,
.uc-col-label,
.uc-frag .fk .fk-label,
.uc-frag .fk .fk-stars .fk-who,
.uc-frag .fk-quote span,
.uc-d-side .uc-d-brandname,
.uc-d-side .uc-d-navitem,
.uc-d-filter .uc-d-search2,
.uc-d-rows .uc-d-tag,
.ac-sidebar .ac-apps-hd,
.fq-aside p,
.an-ctrls #anSeg button,
.an-kpi .t-label,
#anYax span,
#anXax span,
.ab2-foot,
.ab2-legend span,
#ab2-tl-cap,
.ab2-brands span,
.ab2-hire .pp-container p,
.wte-rail,
#wtePlan button small,
#wteTier button small,
.wte-growth-row i {
  color: #57534E !important;
}
.pr-card .pr-card-per .pr-per-note a {
  color: #44403C !important;
  text-decoration: underline;
}

/* ---------- Dark-tile muted text (agent grid, mock dashboards) ---------- */
.ag .ag-tile__desc,
.ag .ag-sub,
.ag .ag-src,
.ag .ag-count,
.ag .ag-rating,
.ag .ag-pack__n,
.ag .ag-srcbar,
.ag .ag-dest,
.ag .ag-dest .bm,
.ag .ag-dir--pend,
.ag .ag-step--todo .ag-name,
.ag .ag-eyebrow,
.ag .ag-eng,
.ag .ag-also,
.ag-tierlabel,
.ag-bubble .ag-dest {
  color: #A8A29E !important;
}
.ag .ag-srcbar__alt {
  color: #A8A29E !important;
  opacity: 1 !important;
}
/* sp-switch-label: real fix is in sol-page.css (removed opacity:.8 that
   was multiplying down any color); no override needed here anymore. */

/* ---------- Tap targets: review-generation slider dots ---------- */
/* Buttons are generated empty by JS; give them a 24px hit area and draw
   the visual dot via ::after (same treatment as the stories-hub carousel). */
#wgDots .wg-dot {
  position: relative;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
}
#wgDots .wg-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D6D0C8;
  transition: width .15s, border-radius .15s, background .15s;
}
#wgDots .wg-dot.on::after {
  background: #C2410C;
  width: 20px;
  border-radius: 999px;
}