/* Shared AHA widget styles (widgets/aha-kit/kit.js): palette, icons, hover tips, eyebrow line.
   Teal is the project colour; orange, sticky-note blue, pink and green come from the team's research boards. */
.aha {
  --a-teal: #3fb1bd; --a-deep: #1d6f78; --a-orange: #f7931e; --a-coral: #f15a24;
  --a-blue: #46b3e6; --a-pink: #ff5c9d; --a-green: #8cc63f; --a-yellow: #ffd54a; --a-grey: #9aa3a8;
  --a-surface: var(--tile-bg); --a-card: #fff; --a-line: color-mix(in srgb, var(--ink) 16%, transparent);
  position: relative; container-type: size; background: var(--a-surface); color: var(--ink); font-size: 13px; line-height: 1.35;
}
[data-theme=dark] .aha { --a-deep: #7fd3dc; --a-card: #26272c; --a-line: rgba(255,255,255,.16); }
.aha button { font: inherit; color: inherit; }
.aha-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aha-eye { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aha-eye b { color: var(--ink); font-weight: 600; letter-spacing: .02em; }
.aha-tip { position: absolute; top: 0; left: 0; z-index: 20; max-width: min(300px, 70%); padding: 7px 10px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.35; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.aha-tip[hidden] { display: none; }
.aha-tip b { display: block; margin-bottom: 2px; font-weight: 600; }
.aha-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 100px; background: transparent; box-shadow: inset 0 0 0 1px var(--a-line); color: var(--ink-2); font-size: 12px; white-space: nowrap; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.aha-chip:hover, .aha-chip:focus-visible { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); outline: none; }
.aha-chip.is-on { background: var(--ink); color: var(--bg); box-shadow: none; }
/* "Tap to reveal": touch screens only, read bottom to top along the left edge. */
.aha-tap { display: none; position: absolute; left: 3px; top: 50%; z-index: 5; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #000; pointer-events: none; }
[data-theme=dark] .aha-tap { color: #fff; }
@media (hover: none) {
  .aha-tap { display: block; }
  .aha:has(> .aha-tap) { padding-left: 22px !important; }
  .tb:not(.tb--pins):has(> .aha-tap) { padding-left: 12px !important; }
}
@media (prefers-reduced-motion: reduce) { .aha *, .aha *::before, .aha *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }
/* Stacked page, one column: diagrams stop growing at a readable size, so the widget stays as short as it can. */
.is-vertical .aha--w640 :is(.eco__svg, .in__svg, .lp__svg, .cy__svg, .rd__chart svg, .mx__plot) { max-width: 440px; justify-self: center; margin-inline: auto; width: 100%; }