/* ── Meterwise (ACT edition) theme tokens ──────────────────────────────────────────────────
   Loaded ONLY on the ACT edition, and scoped under html[data-instance="act"], so it can never
   reach the main site: the attribute is emitted only when the running instance carries a
   brandMark (lib/instance-config.ts), and this sheet is injected only then (app/layout.tsx).
   The main site's globals.css is untouched, byte for byte.

   It re-tints the one action colour from Fix Your Bill blue to Meterwise teal, and the savings
   figure from the main site's savings green to the same teal. There is no red/green pairing on
   any of these surfaces (a caution is amber #b8801f, never red; a saving is always a positive
   amount), so collapsing green into the brand teal loses no meaning. White on #0e6e66 is 6.1:1,
   teal on white 6.1:1, teal on the #e6f2f1 tint 5.33:1 (tint labels use the darker #0b5a53 at
   7.05:1): every pair clears 4.5:1.

   The attribute selector (0,2,1) out-ranks the bare class it overrides (0,1,0), so order does
   not matter and nothing here depends on load timing. */

html[data-instance="act"] {
  --color-primary: #0e6e66;
  --color-primary-dark: #0b5a53;
  --color-savings: #0e6e66;
  --color-savings-soft: #e6f2f1;
}

/* ── The one action colour ─────────────────────────────────────────────────────────────── */
html[data-instance="act"] .fyb-pill {
  background: #0e6e66;
}
html[data-instance="act"] .fyb-pill:hover {
  background: #0b5a53;
}
html[data-instance="act"] .fyb-pill-tint {
  background: #e6f2f1;
  border-color: #0e6e66;
  color: #0b5a53;
}
html[data-instance="act"] .fyb-pill-tint:hover {
  background: #d8ebe9;
}
html[data-instance="act"] .fyb-link {
  color: #0e6e66;
}

/* ── Focus ring, everywhere ────────────────────────────────────────────────────────────── */
html[data-instance="act"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #0e6e66;
}
html[data-instance="act"] .fyb-input:focus-visible,
html[data-instance="act"] .fyb-picker-option:focus-visible,
html[data-instance="act"] .fyb-picked:focus-visible {
  outline-color: #0e6e66;
}

/* ── Selected / accent states on controls ──────────────────────────────────────────────── */
html[data-instance="act"] .fyb-picker-option[aria-selected="true"] {
  color: #0b5a53;
}
html[data-instance="act"] .fyb-picked-change,
html[data-instance="act"] .fyb-note-quoted a,
html[data-instance="act"] .fyb-note-more > summary,
html[data-instance="act"] .fyb-stayput-button {
  color: #0e6e66;
}

/* ── Small accents (the read animation, the "you are here" rung) ────────────────────────── */
html[data-instance="act"] .fyb-read-token {
  background: #0e6e66;
}
html[data-instance="act"] .fyb-rung-here .fyb-rung-dot {
  background: #0e6e66;
  border-color: #0e6e66;
}

/* ── The step wizard (clarify, typed entry): its whole palette is two tokens ────────────── */
html[data-instance="act"] .meq {
  --blue: #0e6e66;
  --green: #0e6e66;
}

/* ── Saving figures: teal, not the main site's savings green ────────────────────────────── */
html[data-instance="act"] .fyb-hero-figure,
html[data-instance="act"] .fyb-ref-figure,
html[data-instance="act"] .fyb-money-save,
html[data-instance="act"] .fyb-card-rank,
html[data-instance="act"] .fyb-track-state,
html[data-instance="act"] .fyb-rung-done .fyb-rung-value,
html[data-instance="act"] .fyb-travels-verified,
html[data-instance="act"] .fyb-travels-mark,
html[data-instance="act"] .fyb-measured > svg,
html[data-instance="act"] .fyb-tick svg,
html[data-instance="act"] .fyb-card-measured svg,
html[data-instance="act"] .fyb-data-pct-done {
  color: #0e6e66;
}
html[data-instance="act"] .fyb-note-measured {
  box-shadow: inset 3px 0 0 0 #0e6e66;
}
html[data-instance="act"] .fyb-card-lead {
  border-color: #0e6e66;
}
html[data-instance="act"] .fyb-rung-done .fyb-rung-dot {
  background: #0e6e66;
  border-color: #0e6e66;
}
html[data-instance="act"] .fyb-switch-progress {
  background: #0e6e66;
}
html[data-instance="act"] .fyb-hero-saving,
html[data-instance="act"] .fyb-ref,
html[data-instance="act"] .fyb-data-pct-done,
html[data-instance="act"] .fyb-report-badge {
  background: #e6f2f1;
}