/* Blueprint Pass gift headers (2026-10-08): the "vintage treasury vault" headers ported 1:1 from
   /askclaude/askclaude.css (no gold rectangle lines, owner 2026-10-08), with one line-art object per Blueprint gift.
   Loaded ONLY by /blueprint-pass. */
.control-room #gifts .row-09, .control-room #gifts .row-12 {
  position: relative;
  /* owner 2026-10-08: no gold rectangle lines on the gift headers; the rule layers stay but paint nothing */
  --vault-gold: transparent;
  --vault-gold-faint: transparent;
  isolation: isolate;
  background-color: rgb(16, 13, 30);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(100% - 14px), rgba(0, 0, 0, 0.75) calc(100% - 14px), rgba(0, 0, 0, 0.75) calc(100% - 11px), rgba(255, 255, 255, 0.06) calc(100% - 11px), rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(var(--vault-gold), var(--vault-gold)), linear-gradient(var(--vault-gold), var(--vault-gold)),
    linear-gradient(var(--vault-gold), var(--vault-gold)), linear-gradient(var(--vault-gold), var(--vault-gold)),
    linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)), linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)),
    linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)), linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)),
    radial-gradient(52% 78% at 50% 48%, rgba(10, 8, 22, 0.82) 0, rgba(10, 8, 22, 0.55) 55%, rgba(10, 8, 22, 0) 100%),
    url("/askclaude/img/vault-guilloche.svg"),
    linear-gradient(90deg, rgb(20, 22, 28) 0%, rgb(26, 19, 52) 48%, rgb(52, 26, 118) 100%);
  /* outer rule inset 14px, inner hairline inset 18px (top, bottom, left, right) */
  background-size:
    100% 100%,
    calc(100% - 28px) 1px, calc(100% - 28px) 1px, 1px calc(100% - 40px), 1px calc(100% - 40px),
    calc(100% - 36px) 1px, calc(100% - 36px) 1px, 1px calc(100% - 48px), 1px calc(100% - 48px),
    100% 100%, 180px 90px, 100% 100%;
  background-position:
    center bottom,
    14px 14px, 14px calc(100% - 26px), 14px 14px, calc(100% - 14px) 14px,
    18px 18px, 18px calc(100% - 30px), 18px 18px, calc(100% - 18px) 18px,
    center, 0 0, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}
.control-room #gifts .row-09::before, .control-room #gifts .row-12::before,
.control-room #gifts .row-09::after, .control-room #gifts .row-12::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
}
/* the per-gift watermark: right side, below the corner badge, ~8% */
.control-room #gifts .row-09::before, .control-room #gifts .row-12::before {
  inset: auto 46px 34px auto; width: 120px; height: 120px; border-radius: 0;
  background: var(--vault-obj) center / contain no-repeat; opacity: 0.09;
}
.control-room #gifts .row-09::after, .control-room #gifts .row-12::after {
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 236, 190, 0.09) 50%, rgba(255, 255, 255, 0) 60%),
    url("/askclaude/img/vault-grain.svg"),
    radial-gradient(120% 110% at 50% 40%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%);
  background-size: 260% 100%, 160px 160px, 100% 100%;
  background-position: 160% 0, 0 0, center;
  background-repeat: no-repeat, repeat, no-repeat;
}
.control-room #gifts .cr-row:has([data-slot="s06.gift1.h1"]) { --vault-obj: url("/blueprint-pass/img/vault-obj-pass.svg"); }
.control-room #gifts .cr-row:has([data-slot="s06.gift2.h1"]) { --vault-obj: url("/blueprint-pass/img/vault-obj-radar.svg"); }
.control-room #gifts .cr-row:has([data-slot="s06.gift3.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-brain.svg"); }
.control-room #gifts .cr-row:has([data-slot="s06.gift4.h1"]) { --vault-obj: url("/blueprint-pass/img/vault-obj-blueprint.svg"); }
.control-room #gifts .cr-row:has([data-slot="s06.gift5.h1"]) { --vault-obj: url("/blueprint-pass/img/vault-obj-apps.svg"); }
.control-room #gifts .cr-row:has([data-slot="s06.gift6.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-vault.svg"); }
.control-room #gifts .cr-row:has([data-slot="s06.gift7.h1"]) { --vault-obj: url("/askclaude/img/vault-obj-reel.svg"); }
.control-room #gifts .cr-row:has([data-slot="s06.gift8.h1"]) { --vault-obj: url("/blueprint-pass/img/vault-obj-gears.svg"); }
/* gold-foil hairline around the "Free Gift #N" pill (masked ring, the pill's own violet shine untouched) */
.control-room #gifts .cr-flex.fx-bluebg { position: relative; }
.control-room #gifts .cr-flex.fx-bluebg::after {
  content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgb(150, 112, 40), rgb(246, 222, 150) 30%, rgb(190, 146, 60) 55%, rgb(255, 236, 178) 78%, rgb(150, 112, 40));
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
}
/* one slow light sweep across the header on hover: desktop pointers only, never under reduced motion */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .control-room #gifts .row-09:hover::after, .control-room #gifts .row-12:hover::after { animation: vault-sweep 1.8s ease-out 1; }
}
@keyframes vault-sweep { from { background-position: 160% 0, 0 0, center; } to { background-position: -60% 0, 0 0, center; } }
@media (max-width: 770px) {
  /* phones: the title spans the full width, so the watermark shrinks into the bottom-right corner beside the value pill */
  .control-room #gifts .row-09::before, .control-room #gifts .row-12::before { inset: auto 16px 30px auto; width: 58px; height: 58px; opacity: 0.07; }
  .control-room #gifts .row-09, .control-room #gifts .row-12 { background-size:
    100% 100%,
    calc(100% - 16px) 1px, calc(100% - 16px) 1px, 1px calc(100% - 28px), 1px calc(100% - 28px),
    calc(100% - 24px) 1px, calc(100% - 24px) 1px, 1px calc(100% - 36px), 1px calc(100% - 36px),
    100% 100%, 180px 90px, 100% 100%;
    /* phones: the title fills the width, so the scrim widens to cover all of it */
    background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(100% - 14px), rgba(0, 0, 0, 0.75) calc(100% - 14px), rgba(0, 0, 0, 0.75) calc(100% - 11px), rgba(255, 255, 255, 0.06) calc(100% - 11px), rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(var(--vault-gold), var(--vault-gold)), linear-gradient(var(--vault-gold), var(--vault-gold)),
    linear-gradient(var(--vault-gold), var(--vault-gold)), linear-gradient(var(--vault-gold), var(--vault-gold)),
    linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)), linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)),
    linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)), linear-gradient(var(--vault-gold-faint), var(--vault-gold-faint)),
    radial-gradient(85% 70% at 50% 50%, rgba(10, 8, 22, 0.8) 0, rgba(10, 8, 22, 0.6) 60%, rgba(10, 8, 22, 0.2) 100%),
    url("/askclaude/img/vault-guilloche.svg"),
    linear-gradient(90deg, rgb(20, 22, 28) 0%, rgb(26, 19, 52) 48%, rgb(52, 26, 118) 100%);
    background-position:
    center bottom,
    8px 8px, 8px calc(100% - 20px), 8px 8px, calc(100% - 8px) 8px,
    12px 12px, 12px calc(100% - 24px), 12px 12px, calc(100% - 12px) 12px,
    center, 0 0, center; }
}
.control-room #gifts .cr-row:has([data-slot="s06.gift9.h1"]) { --vault-obj: url("/blueprint-pass/img/vault-obj-bowl.svg"); }