/* Owner rule §V(b) (MASTER-TODO §V; the audit in research/buttons/audit.md): one primary-button paint across the site,
   chosen states drawn as outlines so only a primary action is ever filled, and text that meets WCAG AA (4.5:1; an
   edge 3:1). Loaded only with OA_BUTTONS_V2=1, and every rule waits for html[data-buttons="v2"]: off, nothing moves. */

/* 1. The two primaries in use (.ed-btn on the editorial pages, .btn.primary in the app) take the primary tokens */
html[data-buttons="v2"] .ed-btn:not(.ghost),
html[data-buttons="v2"] .btn.primary {
  background: var(--oa-primary); border-color: var(--oa-primary); color: var(--oa-primary-text);
  border-radius: 8px; font-weight: 700; }
html[data-buttons="v2"] .ed-btn:not(.ghost):hover,
html[data-buttons="v2"] .btn.primary:hover { background: var(--oa-primary); filter: brightness(1.08); }
/* on a night section, the saffron variant (rust there was 1.97–2.66:1 against the night) */
html[data-buttons="v2"] :is(.ed-hero, .ed-final) .ed-btn:not(.ghost) {
  background: var(--oa-primary-night); border-color: var(--oa-primary-night); color: var(--oa-primary-night-text); }

/* 2. Primaries that had their own paint: on night heroes the saffron variant, on light sections kumkum */
html[data-buttons="v2"] :is(.h-btn-gold, .btn.kh-gold, .btn.sv-gold, .nz-go, .alm-invite-go) {
  background: var(--oa-primary-night); background-image: none; border-color: var(--oa-primary-night);
  color: var(--oa-primary-night-text); border-radius: 8px; font-weight: 700; }
html[data-buttons="v2"] :is(.v2-btn, .qz-primary, .btn.sv-gold.rq-send, .hs-ask-yes) {
  background: var(--oa-primary); background-image: none; border-color: var(--oa-primary);
  color: var(--oa-primary-text); border-radius: 8px; font-weight: 700; }

/* 3. Chosen states: an outline with a faint tint and bold text, never a solid fill (the rashifal day chip's pattern) */
html[data-buttons="v2"] .cal-grid button.sel {
  background: rgba(140, 47, 57, .10); color: var(--oa-kumkum); border: 2px solid var(--oa-kumkum); font-weight: 700; }
html[data-buttons="v2"] .toggle label:has(input:checked),
html[data-buttons="v2"] .g-chip[aria-selected="true"],
html[data-buttons="v2"] .person.active,
html[data-buttons="v2"] .qz-tile.sel {
  background: rgba(31, 42, 90, .08); color: var(--oa-ink); border: 2px solid var(--oa-ink); box-shadow: none; }
html[data-buttons="v2"] .person.active small { color: var(--oa-text-soft); }
html[data-buttons="v2"] .sv-chip input:checked + span {
  background: rgba(31, 42, 90, .08); color: var(--oa-ink); border: 2px solid var(--oa-ink); font-weight: 700; }
html[data-buttons="v2"] .sv-chip input:checked + span::before { content: "✓ "; }
html[data-buttons="v2"] .q-chip input:checked + span {               /* on the night .kh card */
  background: rgba(227, 155, 44, .16); color: #fff; border: 2px solid var(--oa-saffron); }

/* 4. Filled pills that are not the page's primary: outlines */
html[data-buttons="v2"] :is(.pj-suggest, .rf-suggest) {
  background: transparent; border: 1.5px solid var(--oa-gold); color: var(--oa-gold); }
html[data-buttons="v2"] .st-counted .gr-chip { background: #f0dfd4; color: var(--oa-rust); }
html[data-buttons="v2"] .sv-steps li.on { background: rgba(31, 42, 90, .08); color: var(--oa-ink);
  box-shadow: inset 0 0 0 2px var(--oa-ink); }

/* 5. Text contrast (each was under 4.5:1) */
html[data-buttons="v2"] .btn.vf-wa { background: #157a43; border-color: #157a43; }       /* white 5.5:1 (was 3.49) */
html[data-buttons="v2"] .steps li.now,
html[data-buttons="v2"] .sv-steps li.on b,
html[data-buttons="v2"] .alm-list .fy { color: var(--oa-night); }                         /* night on saffron 7.39 */
html[data-buttons="v2"] .pc-other { border-color: var(--oa-kumkum); }                    /* edge 8.1 (was 2.29) */

/* 6. The panchang date form's button, once the date applies on its own: a quiet fallback, not a second primary */
html[data-buttons="v2"] .pj-dateform[data-apply] button { opacity: .85; }

/* 7. Secondary (ghost) buttons (owner, 24 Oct 2026, §V point 5: "aaj ka panchnag same white txt… not noticable"): never
   the same colour and weight as the text near them. On a night hero a white 14% fill, a 2 px cream edge (11:1 on the
   night) and bold text; on a light section a 2 px ink edge and bold ink; a clear hover and keyboard focus on both. */
html[data-buttons="v2"] :is(.h-btn-ghost, .ed-btn.ghost, .pj-nav .pj-chip) {
  background: rgba(255, 255, 255, .14); border: 2px solid rgba(242, 236, 224, .85); color: #fff; font-weight: 700; }
html[data-buttons="v2"] :is(.h-btn-ghost, .ed-btn.ghost, .pj-nav .pj-chip):hover { background: rgba(255, 255, 255, .24); }
html[data-buttons="v2"] :is(.v3-btn-ghost, .pj-ask .pj-chip, .hs-ask-city) {
  background: rgba(31, 42, 90, .06); border: 2px solid var(--oa-ink); color: var(--oa-ink); font-weight: 700; }
html[data-buttons="v2"] :is(.v3-btn-ghost, .pj-ask .pj-chip, .hs-ask-city):hover { background: rgba(31, 42, 90, .12); }
html[data-buttons="v2"] :is(.h-btn-ghost, .ed-btn.ghost, .pj-chip, .v3-btn-ghost, .hs-ask-city):focus-visible {
  outline: 3px solid var(--oa-saffron); outline-offset: 2px; }
html[data-buttons="v2"] :is(.h-btn-ghost, .ed-btn.ghost, .v3-btn-ghost) { border-radius: 8px; }  /* as the primary beside it */