/* =========================================================================
   AmazonGold — gold on Amazon, coupon and card offer stacked.

   Amazon's own colours, because that is where every Buy button lands: the
   navy header they have worn for twenty years (#131921 over #232f3e), the
   smile orange (#ff9900) on the mark and on fills that carry white text
   over a darker gradient, and Amazon's price-orange (#c45500) wherever the
   orange has to carry small text on white - #ff9900 is 2.1:1 there and
   fails AA by a mile. Page grey #eaeded, ink #0f1111, in-stock green
   #007600, link teal #007185.

   Two discounts, two colours. The coupon is TEAL - the colour of "clip this
   coupon" on Amazon's own page - and the card offer is ORANGE. A row reads
   listed, minus teal, minus orange, equals what you pay; the two never blur
   into one number. Green keeps the buyer's meaning it has on every
   YourCardJourney board: money in your pocket.
   ========================================================================= */

:root {
  --navy:              #131921;   /* Amazon's header */
  --navy-2:            #232f3e;   /* Amazon's sub-header */
  --m3-primary:        #c45500;
  --m3-primary-soft:   #ff9900;
  --m3-on-primary:     #ffffff;
  --m3-primary-container:#fff1dc;
  --m3-surface:        #eaeded;
  --m3-surface-1:      #ffffff;
  --m3-surface-2:      #f3f4f4;
  --m3-surface-3:      #e3e6e6;
  --m3-surface-variant:#d5d9d9;
  --m3-on-surface:     #0f1111;
  --m3-on-surface-var: #565959;
  --m3-outline:        #888c8c;
  --m3-outline-var:    #d5d9d9;
  --m3-error:          #c40000;
  --m3-warn:           #b45309;
  --m3-read:           #007185;
  --m3-read-soft:      #e1f2f5;
  --m3-ok:             #15803d;   /* a clean leaf green, 4.9:1 on white */
  --m3-ok-soft:        #e8f5ec;
  --brand-grad:        linear-gradient(140deg, #ffc266 0%, #ff9900 52%, #e47911 100%);
  --fill-grad:         linear-gradient(135deg, #e47911 0%, #c45500 100%);
  --foil-grad:         linear-gradient(100deg, #ffad33 0%, #ff9900 40%, #ffd699 52%, #ff9900 64%, #ffad33 100%);
  --brand-glow:        rgba(255,153,0,.40);
  --bg-grad:           radial-gradient(1100px 560px at 86% -12%, #fff1dc 0%, #eaeded 58%);
  --hero-grad:         radial-gradient(900px 420px at 12% 0%, #fff3e0 0%, transparent 60%),
                       radial-gradient(700px 380px at 92% 100%, #e1f2f5 0%, transparent 60%);
  --shadow-1: 0 1px 2px rgba(15,17,17,.10), 0 1px 3px rgba(15,17,17,.06);
  --shadow-2: 0 2px 6px rgba(15,17,17,.10), 0 8px 20px rgba(15,17,17,.10);
  --shadow-3: 0 12px 34px rgba(15,17,17,.18);
  --r-lg: 24px; --r-md: 16px; --r-sm: 12px;
  --topbar-h: 68px;
  --font: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
  --m3-primary:        #ffad33;
  --m3-primary-soft:   #ff9900;
  --m3-on-primary:     #3a2000;
  --m3-primary-container:#3d2a10;
  --m3-surface:        #131921;
  --m3-surface-1:      #1b2430;
  --m3-surface-2:      #232f3e;
  --m3-surface-3:      #2e3b4c;
  --m3-surface-variant:#37485c;
  --m3-on-surface:     #f0f2f4;
  --m3-on-surface-var: #a2aab5;
  --m3-outline:        #7b8794;
  --m3-outline-var:    #2b3746;
  --m3-error:          #ff8a8a;
  --m3-warn:           #e0a44a;
  --m3-read:           #4fc3dc;
  --m3-read-soft:      #10333c;
  --m3-ok:             #4ade80;
  --m3-ok-soft:        #12301d;
  --fill-grad:         linear-gradient(135deg, #ff9900 0%, #e47911 100%);
  --brand-glow:        rgba(255,153,0,.42);
  --bg-grad:           radial-gradient(1100px 560px at 86% -12%, #2a2216 0%, #131921 60%);
  --hero-grad:         radial-gradient(900px 420px at 12% 0%, #2f2414 0%, transparent 60%),
                       radial-gradient(700px 380px at 92% 100%, #10333c 0%, transparent 60%);
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 4px 14px rgba(0,0,0,.55);
  --shadow-3: 0 10px 30px rgba(0,0,0,.65);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg-grad);
  background-color: var(--m3-surface);
  color: var(--m3-on-surface);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Topbar — light, warm, the same shape as BlinkDeal's.
   ========================================================================= */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--m3-surface-1) 90%, var(--m3-primary) 5%);
  backdrop-filter: saturate(1.35) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--m3-primary) 18%, var(--m3-outline-var));
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 6px 18px -12px var(--brand-glow);
}
html[data-theme="dark"] .topbar { box-shadow: 0 6px 20px -14px #000; }
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; text-decoration: none; color: inherit; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--brand-grad);
  box-shadow: 0 7px 16px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  position: relative; overflow: hidden;
}
.brand:hover .brand-mark {
  transform: translateY(-1px) scale(1.03); filter: brightness(1.06);
  box-shadow: 0 12px 24px -6px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.5);
}
/* The mark: a gold coin over the smile. On hover the coin flips once and
   the smile draws itself left to right, the way the arrow on the box does. */
.mk-coin { transform-box: fill-box; transform-origin: center; }
.mk-smile, .mk-tip { stroke-dasharray: 40; stroke-dashoffset: 0; }
.brand:hover .mk-coin  { animation: mk-flip .7s cubic-bezier(.22,1,.36,1) both; }
.brand:hover .mk-smile { animation: mk-draw .55s cubic-bezier(.3,.7,.3,1) .12s both; }
.brand:hover .mk-tip   { animation: mk-draw .3s ease .5s both; }
.brand-mark::after {
  content: ""; position: absolute; inset: -40%;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform: translateX(-120%); opacity: 0;
}
.brand:hover .brand-mark::after { animation: an-foil .62s cubic-bezier(.3,.7,.3,1) .1s both; }
@keyframes mk-flip { 0% { transform: scaleX(1); } 45% { transform: scaleX(-.12); } 100% { transform: scaleX(1); } }
@keyframes mk-draw { 0% { stroke-dashoffset: 40; opacity: .3; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes an-foil { 0% { transform: translateX(-120%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }

.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; color: var(--m3-on-surface-var); text-transform: uppercase; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--m3-on-surface); }
.brand-name em {
  font-style: normal;
  background: var(--foil-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.status {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 13px 4px 5px; border-radius: 999px;
  background: var(--m3-surface-2); border: 1px solid var(--m3-outline-var);
  white-space: nowrap;
}
.status-ring { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.status-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.status-ring .sr-bg { fill: none; stroke: var(--m3-outline-var); stroke-width: 3; }
.status-ring .sr-fg { fill: none; stroke: var(--m3-primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .95s linear; }
.status-ring b { position: relative; font-size: 11px; font-weight: 800; line-height: 1; color: var(--m3-on-surface-var); font-variant-numeric: tabular-nums; }
.status-text { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--m3-on-surface-var); }
.status-text .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m3-ok); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m3-ok) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.nav-link {
  height: 38px; padding: 0 14px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-2);
  color: var(--m3-on-surface-var); font-size: 13px; font-weight: 700; text-decoration: none;
  transition: transform .12s, background .15s, color .15s, box-shadow .15s;
}
.nav-link:hover, .nav-link.is-current { background: var(--m3-primary-container); color: var(--m3-primary); }
.nav-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.icon-btn {
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-2);
  color: var(--m3-on-surface-var); display: grid; place-items: center;
  transition: transform .12s, background .15s, color .15s, box-shadow .15s;
}
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); background: var(--m3-primary-container); color: var(--m3-primary); }
.bc-btn { color: var(--m3-primary); border-color: color-mix(in srgb, var(--m3-primary) 35%, var(--m3-outline-var)); }

/* =========================================================================
   Locked state. Outside a deal the header stays and everything below it
   becomes one slowly turning wheel - honest (nothing is happening) and
   better to look at than a paragraph.

   The hub is the way in. It carries no label - the only person who needs it
   already knows where it is.
   ========================================================================= */
.locked {
  min-height: calc(100vh - var(--topbar-h));
  display: grid; place-items: center; align-content: center;
  gap: 8px; padding: 20px; overflow: hidden;
}

.wheel-stage {
  position: relative;
  width: min(58vh, 78vw); height: min(58vh, 78vw);
  display: grid; place-items: center;
}
.wheel { position: relative; width: 100%; height: 100%; }
.wheel svg { width: 100%; height: 100%; display: block; }

.wheel .rim {
  fill: none; stroke: var(--m3-outline-var); stroke-width: 2;
}
.wheel .inner {
  fill: var(--m3-surface); stroke: var(--m3-outline-var); stroke-width: 1.5;
}
.wheel .seg { fill: url(#seg); opacity: .16; }
.wheel .seg:nth-child(odd) { opacity: .30; }
.wheel .tick { stroke: var(--m3-primary); stroke-width: 2; opacity: .35; }

/* Slow while it waits; the whole point is that it is idling, not working. */
.wheel-spin { transform-origin: 200px 200px; animation: turn 26s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

.hub {
  position: absolute; inset: 0; margin: auto;
  width: 27%; height: 27%; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--m3-outline-var);
  background: var(--m3-surface-1);
  color: var(--m3-on-surface-var);
  box-shadow: var(--shadow-2);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s, color .2s;
}
.hub svg { width: 34%; height: 34%; }
.hub:hover { transform: scale(1.05); color: var(--m3-primary); box-shadow: var(--shadow-3); }
.hub:active { transform: scale(.97); }
.hub:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 4px; }
.hub .shackle { transform-box: fill-box; transform-origin: bottom center; transition: transform .25s; }
.hub:hover .shackle { transform: translateY(-1px) rotate(-8deg); }

.locked-words { text-align: center; max-width: 40ch; }
/* A <p>, not an <h1>: "BlinkDeal is OFF" was the page's headline as far as
   Google could tell. The real headline is in .about below. */
.locked-words .lock-title {
  margin: 0; font-size: clamp(30px, 6vw, 54px); font-weight: 800;
  letter-spacing: -1.2px; line-height: 1.05;
}
.locked-words .lock-title b {
  background: var(--foil-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.locked-words p {
  margin: 10px 0 0; font-size: 14.5px; color: var(--m3-on-surface-var);
}
.locked-words .resting-meta { font-size: 12px !important; opacity: .8; }

/* Working: the wheel stops idling and starts turning like it means it. */
.locked.working .wheel-spin { animation-duration: 1.1s; }
.locked.working .hub { color: var(--m3-primary); border-color: var(--m3-primary); }
.locked.working .hub .shackle { transform: translateY(-4px) rotate(-100deg); opacity: .5; }

/* =========================================================================
   The key
   ========================================================================= */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--m3-on-surface) 45%, transparent);
  backdrop-filter: blur(4px);
  animation: fade .18s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.keycard {
  width: min(360px, 100%);
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: 26px 24px 20px; text-align: center;
  animation: rise .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; } }
.keycard h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.keycard p { margin: 0 0 16px; font-size: 13px; color: var(--m3-on-surface-var); }
/* Buyers kept asking for the key. This is the answer, and it has to be
   read by someone who has already decided the dialog is not for them - so
   it is a tinted callout with the bolt, not a footnote. */
.keycard .key-buyer {
  margin: 18px 0 0; padding: 12px 14px; text-align: left;
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--m3-primary-container);
  border: 1px solid color-mix(in srgb, var(--m3-primary) 30%, var(--m3-outline-var));
  border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.45; color: var(--m3-on-surface-var);
}
.keycard .key-buyer-bolt { font-size: 20px; line-height: 1; flex: none; margin-top: 1px; }
.keycard .key-buyer b { display: block; color: var(--m3-primary); font-size: 13.5px; margin-bottom: 2px; }

.key-in {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-2);
  color: var(--m3-on-surface); font: 700 16px var(--font);
  letter-spacing: 2px; text-align: center;
}
.key-in:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 1px; }
.keycard.wrong { animation: shake .32s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.key-err { margin: 8px 0 0 !important; color: var(--m3-error) !important; font-weight: 700; }

.key-row { display: flex; gap: 8px; margin-top: 16px; }
.key-row button {
  flex: 1; padding: 11px 14px; border-radius: 999px;
  font: 700 13.5px var(--font); border: 1px solid var(--m3-outline-var);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.key-cancel { background: var(--m3-surface-2); color: var(--m3-on-surface-var); }
.key-go {
  border-color: transparent; color: #fff; background: var(--fill-grad);
  box-shadow: 0 5px 13px -4px var(--brand-glow);
}
.key-row button:hover { transform: translateY(-1px); }
.key-go:hover { filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .wheel-spin { animation: none; }
}

/* Live banner — the one moment the page is allowed to be loud. */
.live-bar {
  display: flex; align-items: center; gap: 10px;
  max-width: 1240px; margin: 0 auto; padding: 9px 24px;
  font-size: 13px; font-weight: 700; color: var(--m3-on-surface);
}
.live-bar b { font-size: 15px; color: var(--m3-primary); font-variant-numeric: tabular-nums; }
.live-left {
  margin-left: auto; font-weight: 800; font-size: 12.5px;
  color: var(--m3-primary);
  background: var(--m3-primary-container);
  border-radius: 999px; padding: 4px 12px;
}
.changed {
  font-size: 11.5px; font-weight: 800; letter-spacing: .2px;
  color: var(--m3-warn); background: color-mix(in srgb, var(--m3-warn) 12%, transparent);
  border-radius: 999px; padding: 4px 11px;
  animation: fadein .25s ease both;
}
@keyframes fadein { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; } }

.live-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--m3-ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--m3-ok) 60%, transparent);
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m3-ok) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}


/* =========================================================================
   Deal bar — the stack. Two controls that add, and re-price every row.
   ========================================================================= */
.dealbar {
  position: sticky; top: var(--topbar-h); z-index: 20;
  background: color-mix(in srgb, var(--m3-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--m3-outline-var);
}
.dealbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cta-primary, .cta-secondary {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px;
  font: 700 12.5px var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s, filter .15s;
}
.cta-primary { color: #fff; background: var(--fill-grad); box-shadow: 0 5px 13px -4px var(--brand-glow); }
.cta-secondary { color: var(--m3-on-surface); background: var(--m3-surface-2); border-color: var(--m3-outline-var); }
.cta-primary:hover, .cta-secondary:hover { transform: translateY(-1px); }

.filter-label {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--m3-on-surface-var);
}

.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--m3-surface-2); border: 1px solid var(--m3-outline-var);
}
.seg button {
  border: 0; background: transparent; color: var(--m3-on-surface-var);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 6px 11px; border-radius: 999px; line-height: 1;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg button:disabled { cursor: default; opacity: .7; }
.seg button:hover:not(:disabled) { color: var(--m3-on-surface); background: var(--m3-surface-3); }
.seg button[aria-pressed="true"] {
  color: #fff; background: var(--fill-grad);
  box-shadow: 0 4px 10px -3px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.seg button .sub { font-size: 10.5px; font-weight: 700; opacity: .72; margin-left: 3px; }
.seg button[aria-pressed="true"] .sub { opacity: .9; }
.seg.tiny button { padding: 5px 11px; font-size: 12px; font-weight: 700; }
.seg.tiny button[aria-pressed="true"] { background: var(--m3-primary-container); color: var(--m3-primary); box-shadow: none; }

/* The coupon pill is teal throughout: a selected rung, a read coupon, the
   custom one - all teal, never orange, so the two halves of the stack keep
   their colours all the way from the chip to the column. */
#couponSeg button[aria-pressed="true"] { background: var(--m3-read); box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--m3-read) 45%, transparent); }
#couponSeg button.detected[aria-pressed="false"] {
  color: var(--m3-read); background: var(--m3-read-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m3-read) 45%, transparent);
}
.seg button.detected .lbl::before { content: "✂ "; font-size: 11px; opacity: .9; }
#couponSeg button.custom-btn { color: var(--m3-read); }
#couponSeg button.custom-btn[aria-pressed="true"] { color: #fff; }

.ref { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.mini {
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-1);
  color: var(--m3-on-surface); border-radius: 999px;
  font: 600 12.5px var(--font); padding: 7px 13px;
}
.mini:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 1px; }
select.mini { cursor: pointer; max-width: 240px; }
input.mini { width: 64px; font-variant-numeric: tabular-nums; }

/* The custom coupon form: a row under the bar, teal-edged like its chip. */
.custom { border-top: 1px dashed color-mix(in srgb, var(--m3-read) 40%, var(--m3-outline-var)); background: color-mix(in srgb, var(--m3-read-soft) 60%, var(--m3-surface-1)); }
.custom-inner {
  max-width: 1240px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--m3-on-surface-var);
}
.custom-inner label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.custom-inner input.mini { width: 84px; }
.custom-or { font-weight: 800; color: var(--m3-read); }

.dealbar-terms {
  max-width: 1240px; margin: 0 auto; padding: 0 24px 9px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--m3-on-surface-var);
}
.dealbar-terms .t {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var);
}
.dealbar-terms .t b { font-weight: 800; }
.dealbar-terms .t.cpn { color: var(--m3-read); border-color: color-mix(in srgb, var(--m3-read) 35%, var(--m3-outline-var)); }
.dealbar-terms .t.card { color: var(--m3-primary); border-color: color-mix(in srgb, var(--m3-primary) 35%, var(--m3-outline-var)); }
.dealbar-terms .t-plus { font-weight: 800; letter-spacing: .6px; text-transform: uppercase; font-size: 10px; }

/* =========================================================================
   Filters
   ========================================================================= */
.filterbar { max-width: 1240px; margin: 0 auto; padding: 12px 24px 0; }
.chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; }
.chiprow + .chiprow { border-top: 1px solid var(--m3-outline-var); padding-top: 10px; }

.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 7px; border-radius: 999px;
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var);
  color: var(--m3-on-surface); font-size: 13px; font-weight: 600;
  transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.chip.is-active {
  background: var(--m3-primary-container);
  border-color: color-mix(in srgb, var(--m3-primary) 30%, var(--m3-outline-var));
  color: var(--m3-primary); box-shadow: none;
}
.chip.is-active:hover { box-shadow: var(--shadow-1); }
.chip .glyph {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .2px;
  background: var(--m3-surface-2); color: var(--m3-primary);
}
.chip .glyph svg { width: 19px; height: 19px; display: block; }
.chip.is-active .glyph { background: color-mix(in srgb, var(--m3-primary) 14%, transparent); color: var(--m3-primary); }
.chip .count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--m3-surface-2); color: var(--m3-on-surface-var);
  font-variant-numeric: tabular-nums;
}
.chip.is-active .count { background: color-mix(in srgb, var(--m3-primary) 16%, transparent); color: var(--m3-primary); }
.chip.sm { padding: 5px 12px; font-size: 12.5px; gap: 6px; }
.chip.sm .count { min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }
.chip.sm.is-active::before { content: "✓"; font-size: 11px; font-weight: 800; line-height: 1; }
.chip.sm.eq.is-active::before { content: "="; }
.seg.rule button { padding: 5px 10px; min-width: 32px; font-size: 13px; }
.chip.pick.is-active > span:not(.glyph):not(.count)::before { content: "✓ "; font-weight: 800; }

/* =========================================================================
/* =========================================================================
   Board
   ========================================================================= */
main { max-width: 1240px; margin: 0 auto; padding: 14px 24px 64px; }

.board-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 2px 12px; }
.tally { font-size: 13.5px; color: var(--m3-on-surface-var); }
.tally b { color: var(--m3-on-surface); font-weight: 800; }
.tally .hit { color: var(--m3-ok); font-weight: 800; }
.tally-near { color: var(--m3-warn); font-weight: 700; }
.mini-toggles { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sortbar { display: none; }
.switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--m3-on-surface-var); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 36px; height: 21px; border-radius: 999px; flex: none; background: var(--m3-surface-3); position: relative; transition: background .16s; }
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .16s;
}
.switch input:checked + .track { background: var(--m3-primary); }
.switch input:checked + .track::after { transform: translateX(15px); }
.switch input:focus-visible + .track { outline: 2px solid var(--m3-primary); outline-offset: 2px; }

.sheet {
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden;
}
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }

thead th { background: var(--m3-surface-2); border-bottom: 1px solid var(--m3-outline-var); padding: 0; text-align: right; white-space: nowrap; }
thead th:first-child { text-align: left; }
thead th button {
  width: 100%; border: 0; background: transparent; color: var(--m3-on-surface-var);
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 12px 14px; display: inline-flex; align-items: center; gap: 5px;
  justify-content: flex-end; transition: color .15s, background .15s;
}
thead th:first-child button { justify-content: flex-start; }
thead th button:hover { color: var(--m3-primary); background: var(--m3-surface-3); }
thead th button .arrow { opacity: 0; font-size: 9px; transition: opacity .15s; }
thead th.sorted button { color: var(--m3-primary); }
thead th.sorted button .arrow { opacity: 1; }
thead th.plain { padding: 12px 14px; }

tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--m3-outline-var);
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}
tbody td.left { text-align: left; white-space: normal; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .13s; }
tbody tr:hover td { background: var(--m3-surface-2); }

/* The stack, read across the row: listed struck through, the coupon in
   teal, the card in orange, what you pay in bold with the total off
   underneath. Each deduction is its own column so it can be sorted on, and
   its own colour so it cannot be mistaken for the other. */
tbody td.struck { color: var(--m3-on-surface-var); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--m3-on-surface-var) 55%, transparent); }
tbody td.stack { font-weight: 700; }
tbody td.stack.cpn { color: var(--m3-read); }
tbody td.stack.card { color: var(--m3-primary); }
tbody td.stack.off { color: var(--m3-outline); font-weight: 500; }
tbody td.stack .why { font-size: 10.5px; font-weight: 600; color: var(--m3-warn); }
tbody td.pay b { font-weight: 800; font-size: 14px; }
tbody td.pay .off {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--m3-on-surface-var);
  margin-top: 1px;
}

tbody tr.hit td { background: color-mix(in srgb, var(--m3-ok) 6%, var(--m3-surface-1)); }
tbody tr.hit:hover td { background: color-mix(in srgb, var(--m3-ok) 11%, var(--m3-surface-1)); }
tbody tr.hit td:first-child { box-shadow: inset 3px 0 0 var(--m3-ok); }

.coin { display: flex; align-items: center; gap: 11px; min-width: 250px; }
.coin img {
  width: 38px; height: 38px; border-radius: 10px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--m3-outline-var);
}
.coin-name { font-weight: 600; line-height: 1.3; font-size: 13.5px; }
.coin-sub { font-size: 11.5px; color: var(--m3-on-surface-var); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: var(--m3-surface-2); color: var(--m3-on-surface-var); }
.tag.warn { background: color-mix(in srgb, var(--m3-warn) 16%, var(--m3-surface-1)); color: var(--m3-warn); }
.tag.type { background: var(--m3-primary-container); color: var(--m3-primary); }
tbody td.stack .why.na { color: var(--m3-outline); font-weight: 700; letter-spacing: .3px; }
.tally-c { color: var(--m3-read); font-weight: 700; }

.gain { color: var(--m3-ok); font-weight: 800; }
.loss { color: var(--m3-on-surface-var); }

.buy {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font-size: 12.5px; font-weight: 700;
  background: var(--m3-surface-2); border: 1px solid var(--m3-outline-var);
  color: var(--m3-on-surface);
  transition: transform .12s, box-shadow .15s, background .15s, color .15s;
}
.buy:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
tr.hit .buy {
  border-color: transparent; color: #fff; background: var(--fill-grad);
  box-shadow: 0 5px 13px -4px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.32);
}
tr.hit .buy:hover { filter: brightness(1.07); }
.buy svg { width: 12px; height: 12px; }

.empty { padding: 48px 20px; text-align: center; color: var(--m3-on-surface-var); font-size: 14px; font-weight: 700; }

.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 2px 0; }
.pg-range { font-size: 12px; font-weight: 700; color: var(--m3-on-surface-var); margin-right: auto; }
.pg {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-1);
  color: var(--m3-on-surface); font: 700 12.5px var(--font); font-variant-numeric: tabular-nums;
  transition: transform .12s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.pg:hover:not(:disabled):not(.is-current) {
  transform: translateY(-1px); box-shadow: var(--shadow-1);
  border-color: color-mix(in srgb, var(--m3-primary) 40%, var(--m3-outline-var)); color: var(--m3-primary);
}
.pg:disabled { opacity: .4; cursor: default; }
.pg.wide { padding: 0 14px; }
.pg.is-current { cursor: default; color: var(--m3-primary); background: var(--m3-primary-container); border-color: color-mix(in srgb, var(--m3-primary) 30%, var(--m3-outline-var)); }
.pg-gap { color: var(--m3-on-surface-var); padding: 0 2px; font-weight: 700; }

/* =========================================================================
/* =========================================================================
   Foot
   ========================================================================= */
details.note { margin-top: 16px; border: 1px solid var(--m3-outline-var); border-radius: var(--r-md); background: var(--m3-surface-1); padding: 0 18px; }
details.note > summary { cursor: pointer; padding: 13px 0; font-size: 12.5px; font-weight: 700; color: var(--m3-on-surface-var); }
details.note .body { padding: 0 0 14px; font-size: 12.5px; line-height: 1.65; color: var(--m3-on-surface-var); }
details.note dl { margin: 0 0 10px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
details.note dt { font-weight: 800; color: var(--m3-on-surface); }
details.note dd { margin: 0; }
details.note a { color: var(--m3-primary); font-weight: 700; text-decoration: none; }
details.note a:hover { text-decoration: underline; }

footer {
  max-width: 1240px; margin: 22px auto 0; padding: 16px 24px 36px;
  border-top: 1px solid var(--m3-outline-var);
  font-size: 12px; color: var(--m3-on-surface-var);
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
footer a { color: var(--m3-primary); text-decoration: none; font-weight: 700; }
footer a:hover { text-decoration: underline; }
footer .right { margin-left: auto; }
footer .disclosure {
  position: relative; border: 1px solid var(--m3-outline-var);
  background: var(--m3-surface-2); color: var(--m3-on-surface-var);
  font: inherit; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  cursor: help; line-height: 1.2;
}
footer .disclosure:hover, footer .disclosure:focus-visible { color: var(--m3-on-surface); }
footer .disclosure::after {
  content: attr(data-note);
  position: absolute; bottom: calc(100% + 8px); left: 0;
  width: max-content; max-width: min(320px, 78vw);
  padding: 8px 11px; border-radius: var(--r-md);
  background: var(--m3-surface-1); color: var(--m3-on-surface);
  border: 1px solid var(--m3-outline-var); box-shadow: var(--shadow-1);
  font-weight: 500; line-height: 1.45; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; z-index: 5;
}
footer .disclosure:hover::after, footer .disclosure:focus-visible::after, footer .disclosure.open::after { opacity: 1; visibility: visible; }
.stale { color: var(--m3-warn); font-weight: 800; }

/* =========================================================================
/* =========================================================================
   About
   ========================================================================= */
.page-about { background: var(--m3-surface-1); }
.about { min-height: calc(100vh - var(--topbar-h) - 90px); }
.about-inner { max-width: 1240px; margin: 0 auto; padding: 56px 24px 40px; }
.about-head { max-width: 62ch; margin-bottom: 36px; }
.about-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--m3-primary); margin: 0 0 10px; }
.about h1 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.6px; font-weight: 800; }
.about-lede { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--m3-on-surface-var); }
.about-lede b { color: var(--m3-on-surface); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }
.about h2 { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--m3-on-surface-var); margin: 0 0 16px; }
.about-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.about-steps li { position: relative; padding: 0 0 18px 42px; font-size: 14px; line-height: 1.6; color: var(--m3-on-surface-var); counter-increment: step; }
.about-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--fill-grad);
}
.about-steps b, .about-faq dt { color: var(--m3-on-surface); }
.about-faq { margin: 0; }
.about-faq dt { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.about-faq dd { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--m3-on-surface-var); }
.about a { color: var(--m3-primary); font-weight: 700; text-decoration: none; }
.about a:hover { text-decoration: underline; }
.about .stack-demo {
  margin: 8px 0 18px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--m3-surface-2); border: 1px solid var(--m3-outline-var);
  font: 600 13px/1.9 ui-monospace, Consolas, monospace; color: var(--m3-on-surface);
  white-space: pre; overflow-x: auto;
}
.about .stack-demo .c { color: var(--m3-read); }
.about .stack-demo .k { color: var(--m3-primary); }
.about .stack-demo .g { color: var(--m3-ok); font-weight: 800; }

/* =========================================================================

/* =========================================================================
   Scrim + the broadcast drawer (unlisted page only).
   ========================================================================= */
.icon-btn.dark { border-color: var(--m3-outline-var); background: var(--m3-surface-2); color: var(--m3-on-surface-var); }
.bc-scrim { align-items: start; overflow: auto; padding: 24px 20px; }

.bc {
  width: min(1180px, 100%); margin: 0 auto;
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  animation: rise .28s cubic-bezier(.22,1,.36,1) both;
  display: flex; flex-direction: column;
}
.bc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--m3-outline-var);
}
.bc-title h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.bc-title p  { margin: 3px 0 0; font-size: 13px; color: var(--m3-on-surface-var); }

.bc-body {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr);
  gap: 22px; padding: 18px 24px 8px;
}
.bc-pane { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.bc-toolrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px; }
.bc-hint { font-size: 12px; color: var(--m3-outline); }
.bc-hint b { color: var(--m3-on-surface-var); }
.bc-count { font-size: 12px; font-weight: 700; color: var(--m3-on-surface-var); font-variant-numeric: tabular-nums; }
.bc-count.over { color: var(--m3-error); }
.bc-link {
  margin-left: auto; font: 700 12.5px var(--font); color: var(--m3-primary);
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
}
.bc-link:hover { text-decoration: underline; }

/* The snippet is drawn at 1200 wide and scaled to fit; aspect-ratio is set
   from the script so the box is the right height before the paint lands. */
.bc-snap {
  border: 1px solid var(--m3-outline-var); border-radius: var(--r-md);
  overflow: hidden; background: #fff; box-shadow: var(--shadow-1);
}
.bc-snap canvas { display: block; width: 100%; height: auto; }

.bc-text {
  width: 100%; min-height: 150px; resize: vertical;
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-2);
  color: var(--m3-on-surface); font: 500 13px/1.5 var(--font);
}
.bc-text:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 1px; }
.bc-out { min-height: 380px; flex: 1; background: var(--m3-surface-1); }
.bc-tplwrap { display: flex; flex-direction: column; gap: 10px; }

.bc-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-token {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-2);
  color: var(--m3-on-surface-var); font: 500 11px var(--font);
}
.bc-token code { font: 700 11px ui-monospace, Consolas, monospace; color: var(--m3-primary); }
.bc-token:hover { background: var(--m3-primary-container); }

.bc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bc-primary, .bc-secondary {
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font: 700 13px var(--font); border: 1px solid var(--m3-outline-var);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.bc-primary {
  border-color: transparent; color: #fff; background: var(--fill-grad);
  box-shadow: 0 5px 13px -4px var(--brand-glow);
}
.bc-secondary { background: var(--m3-surface-2); color: var(--m3-on-surface); }
.bc-primary:hover, .bc-secondary:hover { transform: translateY(-1px); }
.bc-primary:hover { filter: brightness(1.06); }
.bc-note { font-size: 12px; font-weight: 600; color: var(--m3-outline); }
.bc-note.ok { color: var(--m3-ok); }
.bc-note.warn { color: var(--m3-warn); }

.bc-foot {
  padding: 12px 24px 16px; font-size: 12.5px; color: var(--m3-on-surface-var);
  border-top: 1px solid var(--m3-outline-var); margin-top: 10px;
}
.bc-foot b { color: var(--m3-on-surface); }

@media (max-width: 860px) {
  .bc-body { grid-template-columns: 1fr; }
  .bc-out { min-height: 260px; }
}

/* =========================================================================
   Small screens
   ========================================================================= */
@media (max-width: 1120px) {
  .stack-label { margin: 0 0 6px; }
  .stack-join { margin: -8px 0 -8px 40px; box-shadow: 0 3px 8px -2px var(--brand-glow), 0 0 0 3px var(--m3-surface); }
  .ref { margin-left: 0; }
}

@media (max-width: 860px) {
  .topbar-inner, .dealbar-inner, .dealbar-terms, .filterbar, main, footer { padding-left: 16px; padding-right: 16px; }
  footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  footer .right, footer .disclosure { margin-left: 0; flex: none; }
  .ref { margin-left: 0; width: 100%; }
  select.mini { flex: 1; max-width: none; min-width: 0; }
  .status { display: none; }
  /* On a phone the two controls and the rate row stand a screen tall, so
     the bar scrolls with the page instead of pinning over it. Each control
     takes a full row and scrolls sideways if its chips overflow; the "+"
     sits under the first as a small mark, not a divider on its own line. */
  .dealbar { position: static; }
  .dealbar-inner .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .dealbar-inner .seg::-webkit-scrollbar { display: none; }

  thead { display: none; }
  .sortbar { display: flex; align-items: center; gap: 8px; width: 100%; }
  .sortbar label { font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--m3-on-surface-var); white-space: nowrap; }
  .sortbar select.mini { flex: 1; }
  #sortDir { min-width: 36px; font-size: 11px; }
  table, tbody, tr, td { display: block; width: 100%; }
  .sheet { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  tbody tr {
    background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var);
    border-radius: var(--r-md); margin-bottom: 10px; box-shadow: var(--shadow-1); overflow: hidden;
  }
  tbody tr.hit { border-color: color-mix(in srgb, var(--m3-ok) 45%, var(--m3-outline-var)); }
  tbody tr.hit td:first-child { box-shadow: none; }
  tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    border-bottom: 1px solid var(--m3-outline-var); padding: 9px 14px;
  }
  tbody td::before {
    content: attr(data-label);
    font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
    color: var(--m3-on-surface-var);
  }
  tbody td.left { display: block; }
  tbody td.left::before { content: none; }
  tbody td.act { justify-content: flex-end; }
  tbody td.act::before { content: none; }
  /* The stack reads as a receipt on a phone: the three deductions tighter,
     what you pay set apart. */
  tbody td.stack, tbody td.struck { padding-top: 6px; padding-bottom: 6px; }
  tbody td.pay { background: var(--m3-surface-2); }
  tbody td.pay .paywrap { display: inline-flex; align-items: baseline; gap: 8px; }
  tbody td.pay .off { display: inline; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}