/* =====================================================================
   STG Raffle — design system
   Brand: Shenandoah Tumblers, Inc.  Primary #2e2c65.
   One stylesheet for the public storefront and the back office so the
   two read as one product.
   ===================================================================== */

:root{
  --brand-900:#1b1a3f;
  --brand-800:#242252;
  --brand:#2e2c65;
  --brand-600:#3d3a80;
  --brand-500:#524fb0;
  --brand-300:#8b88e0;
  --brand-100:#e7e6f8;
  --brand-50:#f4f4fb;

  --accent:#f5b301;
  --accent-600:#d99a00;
  --accent-100:#fff3d1;

  --ink:#1a1a2e;
  --ink-2:#4a4a68;
  --ink-3:#767690;
  --line:#e3e3ee;
  --line-2:#eeeef5;
  --canvas:#f5f6fb;
  --surface:#ffffff;

  --ok:#0f9d58; --ok-bg:#e7f6ee;
  --warn:#c77700; --warn-bg:#fff4e0;
  --bad:#d13438; --bad-bg:#fdeaea;
  --info:#2563eb; --info-bg:#e8effd;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --shadow-1:0 1px 2px rgba(26,26,46,.06), 0 2px 8px rgba(26,26,46,.05);
  --shadow-2:0 4px 12px rgba(26,26,46,.08), 0 14px 40px rgba(26,26,46,.10);
  --shadow-3:0 20px 60px rgba(46,44,101,.28);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--canvas);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800}
h2{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:750}
h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 1em}
small{font-size:.85em}
code,kbd{font-family:var(--mono);font-size:.9em;background:var(--brand-50);padding:.1em .35em;border-radius:5px}
hr{border:0;border-top:1px solid var(--line);margin:1.75rem 0}

.r-wrap{width:min(1220px,100% - 2rem);margin-inline:auto}
.r-wrap-narrow{width:min(760px,100% - 2rem);margin-inline:auto}
.r-skip{position:absolute;left:-9999px}
.r-skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.6rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid var(--brand-500);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- top */
.r-top{background:linear-gradient(120deg,var(--brand-900),var(--brand) 55%,var(--brand-600));color:#fff;position:relative;z-index:20}
.r-top-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px}
.r-brand{display:flex;align-items:center;gap:.65rem;color:#fff;text-decoration:none}
.r-brand:hover{text-decoration:none}
.r-brand-mark{display:grid;place-items:center;width:38px;height:38px;background:rgba(255,255,255,.1);border-radius:11px}
/* A supplied logo sets its own width from its aspect ratio, and needs no
   plate behind it — the club's mark is light artwork on transparency and
   reads directly on the dark header. */
.r-brand-mark.is-img{width:auto;height:auto;background:none;border-radius:0;place-items:center}
.r-brand-mark.is-img img{display:block;width:auto;max-height:42px;max-width:130px}
.r-top-admin .r-brand-mark.is-img img{max-height:36px;max-width:112px}
.r-brand-txt{display:flex;flex-direction:column;line-height:1.05}
.r-brand-txt strong{font-size:1.02rem;letter-spacing:-.01em}
.r-brand-txt small{font-size:.72rem;color:var(--brand-300);text-transform:uppercase;letter-spacing:.13em}
.r-top-nav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.r-top-nav a{color:rgba(255,255,255,.85);padding:.45rem .75rem;border-radius:9px;font-size:.93rem;font-weight:500}
.r-top-nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.r-chip-admin{background:var(--accent)!important;color:var(--brand-900)!important;font-weight:700!important}
.r-top-right{display:flex;align-items:center;gap:1rem}
.r-ghost{color:rgba(255,255,255,.7);font-size:.85rem}
.r-ghost:hover{color:#fff}
.r-who{display:flex;flex-direction:column;line-height:1.15;font-size:.88rem;text-align:right}
.r-who em{font-style:normal;font-size:.7rem;color:var(--brand-300);text-transform:uppercase;letter-spacing:.1em}

.r-subnav{background:rgba(0,0,0,.18);backdrop-filter:blur(6px)}
.r-subnav-in{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none}
.r-subnav-in::-webkit-scrollbar{display:none}
.r-subnav a{color:rgba(255,255,255,.72);padding:.7rem .85rem;font-size:.88rem;white-space:nowrap;border-bottom:3px solid transparent;font-weight:500}
.r-subnav a:hover{color:#fff;text-decoration:none}
.r-subnav a.on{color:#fff;border-bottom-color:var(--accent);font-weight:650}

.r-ctx{background:var(--surface);border-bottom:1px solid var(--line)}
.r-ctx-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;flex-wrap:wrap}
.r-ctx-name{display:flex;align-items:center;gap:.55rem;font-size:1.02rem}
.r-ctx-stats{display:flex;gap:1.35rem;font-size:.85rem;color:var(--ink-3)}
.r-ctx-stats b{color:var(--ink);font-size:1rem;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- public */
.r-hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1200px 500px at 15% -10%,rgba(139,136,224,.55),transparent 60%),
             radial-gradient(900px 500px at 90% 0%,rgba(245,179,1,.28),transparent 55%),
             linear-gradient(150deg,var(--brand-900),var(--brand) 60%,var(--brand-600));
}
.r-hero::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:70px;
  background:linear-gradient(to bottom,transparent,var(--canvas));pointer-events:none
}
.r-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;padding:3rem 0 3.5rem;align-items:center}
.r-hero h1{color:#fff;margin-bottom:.35rem;text-wrap:balance}
.r-hero .r-kicker{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);padding:.3rem .8rem;border-radius:99px;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.13em;font-weight:650;margin-bottom:1rem}
.r-hero .r-lede{font-size:1.08rem;color:rgba(255,255,255,.86);max-width:52ch}
.r-hero-media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-3);aspect-ratio:4/3;background:rgba(255,255,255,.08)}
.r-hero-media img{width:100%;height:100%;object-fit:cover}
.r-hero-media.placeholder{display:grid;place-items:center;color:rgba(255,255,255,.35);font-size:4rem}

.r-countdown{display:flex;gap:.6rem;margin:1.4rem 0}
.r-cd-cell{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  padding:.55rem .8rem;min-width:66px;text-align:center;backdrop-filter:blur(8px)}
.r-cd-cell b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums;line-height:1.1}
.r-cd-cell span{font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.7)}

.r-hero .r-prog{background:rgba(255,255,255,.16)}
.r-hero .r-prog-lbl{color:rgba(255,255,255,.8)}

/* ------------------------------------------------------------- cards */
.r-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.r-card-p{padding:1.4rem 1.5rem}
.r-card-h{padding:1.05rem 1.5rem;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.r-card-h h2,.r-card-h h3{margin:0}
.r-grid{display:grid;gap:1.25rem}
/* A grid track of `1fr` is `minmax(auto,1fr)`, and `auto` refuses to go
   below the item's min-content width — so one wide table inside a card
   stretched the whole column past the screen edge and took the buttons
   with it. Letting the children shrink is the cure, and it has to be on
   every grid and flex row, not just the one that was noticed. */
.r-grid > *,.r-split > *,.r-fgrid > *,.r-fgrid-3 > *,.r-card-h > *{min-width:0}
.r-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.r-sec{padding:2.25rem 0}
.r-split{display:grid;grid-template-columns:1.35fr .65fr;gap:1.6rem;align-items:start}
.r-sticky{position:sticky;top:1rem}

/* raffle tile on the index */
.r-tile{display:flex;flex-direction:column;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.r-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);text-decoration:none}
.r-tile-img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--brand-100),var(--brand-50));overflow:hidden;position:relative}
.r-tile-img img{width:100%;height:100%;object-fit:cover}
.r-tile-body{padding:1.1rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.r-tile h3{margin:0;color:var(--ink)}
.r-tile .r-muted{flex:1}
.r-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.35rem}
.r-price{font-size:1.35rem;font-weight:800;color:var(--brand)}
.r-price small{font-size:.72rem;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}

/* -------------------------------------------------------------- bits */
.r-muted{color:var(--ink-3)}
.r-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.r-center{text-align:center}
.r-right{text-align:right}
.r-nowrap{white-space:nowrap}
.r-mt{margin-top:1rem}.r-mt2{margin-top:1.75rem}.r-mb{margin-bottom:1rem}
.r-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.r-row-end{display:flex;gap:.6rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.r-spread{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}

.r-pill{display:inline-block;padding:.2rem .6rem;border-radius:99px;font-size:.7rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.07em;background:var(--brand-100);color:var(--brand-600);white-space:nowrap}
.r-pill-open,.r-pill-paid,.r-pill-completed,.r-pill-verified{background:var(--ok-bg);color:var(--ok)}
.r-pill-paused,.r-pill-scheduled,.r-pill-pending,.r-pill-potential,.r-pill-processing{background:var(--warn-bg);color:var(--warn)}
.r-pill-canceled,.r-pill-failed,.r-pill-refunded,.r-pill-void,.r-pill-disputed,.r-pill-disqualified,.r-pill-returned_check{background:var(--bad-bg);color:var(--bad)}
.r-pill-locked,.r-pill-drawn,.r-pill-sold_out{background:var(--brand);color:#fff}
.r-pill-test{background:#111;color:var(--accent)}
/* notification states — 'sent' means the mail server accepted it, not that anyone read it */
.r-pill-sent{background:var(--ok-bg);color:var(--ok)}
.r-pill-queued{background:var(--warn-bg);color:var(--warn)}
.r-pill-suppressed{background:var(--line-2);color:var(--ink-3)}
.r-pill-lg{font-size:.78rem;padding:.3rem .8rem}

.r-prog{height:10px;border-radius:99px;background:var(--brand-100);overflow:hidden}
.r-prog-bar{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-500),var(--accent));
  transition:width .6s cubic-bezier(.2,.7,.2,1)}
.r-prog-lbl{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-3);margin-top:.35rem}
/* raffle chooser cards on the back-office dashboard */
/* accent color: a swatch and a text box that mirror each other */
.r-colorpick{display:flex;align-items:stretch;gap:.5rem}
.r-colorpick input[type=color]{flex:0 0 46px;width:46px;padding:2px;border:1px solid var(--line);
  border-radius:9px;background:#fff;cursor:pointer;min-height:0}
.r-colorpick input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.r-colorpick input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
.r-colorpick input[type=color]::-moz-color-swatch{border:0;border-radius:6px}
.r-colorpick input[type=text]{flex:1 1 auto;min-width:0;font-family:var(--mono)}
.r-colorpick input[type=color]:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
.r-pick{transition:border-color .12s,box-shadow .12s,transform .12s}
.r-pick:hover,.r-pick:focus-visible{border-color:var(--brand-500);box-shadow:0 6px 20px rgba(20,18,60,.10);transform:translateY(-1px)}
.r-pick:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}

.r-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.05rem;display:flex;flex-direction:column;gap:.15rem}
.r-stat-l{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:650}
.r-stat-v{font-size:1.55rem;font-weight:780;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.r-stat-s{font-size:.8rem;color:var(--ink-3)}
.r-stat.good .r-stat-v{color:var(--ok)}
.r-stat.bad .r-stat-v{color:var(--bad)}
.r-stat.warn .r-stat-v{color:var(--warn)}
.r-stat.accent{background:linear-gradient(140deg,var(--brand),var(--brand-600));border-color:transparent;color:#fff}
.r-stat.accent .r-stat-l,.r-stat.accent .r-stat-s{color:rgba(255,255,255,.72)}

/* ------------------------------------------------------------ buttons */
.r-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.25rem;border-radius:12px;border:1px solid transparent;
  background:var(--brand);color:#fff;font:inherit;font-weight:650;font-size:.95rem;
  cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,background .15s ease;
  text-decoration:none;line-height:1.2
}
.r-btn:hover{background:var(--brand-600);text-decoration:none;box-shadow:var(--shadow-1);transform:translateY(-1px)}
.r-btn:active{transform:translateY(0)}
.r-btn[disabled],.r-btn.is-disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.r-btn-lg{padding:.95rem 1.7rem;font-size:1.05rem;border-radius:14px;width:100%}
.r-btn-accent{background:var(--accent);color:var(--brand-900)}
.r-btn-accent:hover{background:var(--accent-600);color:var(--brand-900)}
.r-btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.r-btn-ghost:hover{background:var(--brand-50);border-color:var(--brand-300);color:var(--brand-600)}
.r-btn-danger{background:var(--bad)}
.r-btn-danger:hover{background:#b32a2e}
.r-btn-sm{padding:.4rem .75rem;font-size:.84rem;border-radius:9px}

/* ------------------------------------------------------------- forms */
.r-field{margin-bottom:1rem}
.r-field label,.r-lbl{display:block;font-size:.82rem;font-weight:650;color:var(--ink-2);margin-bottom:.3rem}
.r-field .r-hint{font-size:.79rem;color:var(--ink-3);margin-top:.3rem}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
input[type=datetime-local],input[type=search],input[type=password],select,textarea{
  width:100%;padding:.62rem .8rem;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s
}
input:focus,select:focus,textarea:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(82,79,176,.14);outline:none}
textarea{min-height:96px;resize:vertical}
input[type=checkbox],input[type=radio]{width:1.05rem;height:1.05rem;accent-color:var(--brand);margin:0}
.r-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;margin-bottom:.7rem;cursor:pointer}
.r-check input{margin-top:.22rem;flex:none}
.r-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.r-fgrid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 1rem}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;margin:0 0 1.25rem}
legend{font-size:.78rem;font-weight:750;text-transform:uppercase;letter-spacing:.09em;color:var(--brand-600);padding:0 .4rem}

/* qty stepper + package picker */
.r-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.r-qty button{width:44px;height:46px;border:0;background:var(--brand-50);color:var(--brand);font-size:1.3rem;cursor:pointer;line-height:1}
.r-qty button:hover{background:var(--brand-100)}
.r-qty input{width:74px;height:46px;border:0;border-inline:1px solid var(--line);text-align:center;font-size:1.1rem;font-weight:700;border-radius:0}
.r-qty input:focus{box-shadow:none}

.r-packs{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.r-pack{position:relative;border:2px solid var(--line);border-radius:var(--r);padding:.95rem 1rem;cursor:pointer;background:#fff;transition:.15s;text-align:center}
.r-pack:hover{border-color:var(--brand-300)}
.r-pack input{position:absolute;opacity:0;pointer-events:none}
.r-pack-in{display:flex;flex-direction:column;gap:.1rem;align-items:center;line-height:1.25}
.r-pack input:checked + .r-pack-in{color:var(--brand)}
.r-pack:has(input:checked){border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 3px rgba(82,79,176,.1)}
.r-pack-q{font-size:1.5rem;font-weight:800;line-height:1.1}
.r-pack-p{font-weight:700;color:var(--brand)}
.r-pack-s{font-size:.76rem;color:var(--ink-3)}
.r-pack-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--brand-900);
  font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.13rem .5rem;border-radius:99px;white-space:nowrap}

/* ------------------------------------------------------------- alerts */
.r-flash,.r-note{border-radius:var(--r);padding:.85rem 1.1rem;margin:1rem 0;font-size:.93rem;border:1px solid transparent}
.r-flash-ok,.r-note-ok{background:var(--ok-bg);border-color:#bfe4cf;color:#0b6c3d}
.r-flash-err,.r-note-err{background:var(--bad-bg);border-color:#f4c4c5;color:#8f2226}
.r-flash-warn,.r-note-warn{background:var(--warn-bg);border-color:#f2dcb2;color:#8a5400}
.r-flash-info,.r-note-info{background:var(--info-bg);border-color:#c6d6fa;color:#1d4ed8}
.r-note strong{display:block;margin-bottom:.2rem}
.r-empty{text-align:center;padding:2.6rem 1rem;color:var(--ink-3)}
.r-empty p{font-size:1.05rem;margin-bottom:.25rem;color:var(--ink-2)}
.r-deny{max-width:520px;margin:12vh auto;background:#fff;padding:2rem;border-radius:var(--r-lg);box-shadow:var(--shadow-2);font-family:var(--font)}

/* hold timer */
.r-hold{display:flex;align-items:center;gap:.65rem;background:var(--warn-bg);border:1px solid #f2dcb2;
  border-radius:var(--r);padding:.7rem 1rem;font-size:.9rem;color:#8a5400}
.r-hold b{font-variant-numeric:tabular-nums;font-size:1.1rem}
.r-hold.is-low{background:var(--bad-bg);border-color:#f4c4c5;color:#8f2226;animation:rpulse 1.1s ease-in-out infinite}
@keyframes rpulse{50%{opacity:.62}}

/* ------------------------------------------------------------- tables */
.r-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.r-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.r-tbl th{text-align:left;font-size:.71rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  font-weight:700;padding:.6rem .75rem;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--brand-50)}
.r-tbl td{padding:.65rem .75rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
.r-tbl tbody tr:hover{background:var(--brand-50)}
.r-tbl tbody tr:last-child td{border-bottom:0}
.r-tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.r-tbl-compact td,.r-tbl-compact th{padding:.42rem .6rem}
.r-tbl tfoot td{font-weight:700;border-top:2px solid var(--line);background:var(--brand-50)}

/* ticket chips */
.r-tks{display:flex;flex-wrap:wrap;gap:.4rem}
.r-tk{font-family:var(--mono);font-size:.85rem;font-weight:700;background:var(--brand-50);border:1px dashed var(--brand-300);
  color:var(--brand-600);padding:.28rem .6rem;border-radius:8px;letter-spacing:.02em}
.r-tk.win{background:var(--accent-100);border-color:var(--accent);color:#7a5600;border-style:solid}
.r-tk.dead{background:#f4f4f6;border-color:var(--line);color:var(--ink-3);text-decoration:line-through}

/* ------------------------------------------------------------ drawing */
.r-draw-stage{background:linear-gradient(150deg,var(--brand-900),var(--brand));border-radius:var(--r-xl);
  padding:2.5rem 1.5rem;color:#fff;text-align:center;position:relative;overflow:hidden}
.r-reel{height:120px;overflow:hidden;position:relative;margin:1.5rem auto;max-width:460px;
  border-radius:var(--r);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14)}
.r-reel-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;will-change:transform}
.r-reel-item{height:120px;display:grid;place-items:center;font-family:var(--mono);font-size:2.4rem;font-weight:800;
  letter-spacing:.06em;color:#fff;flex:none}
.r-reel::before,.r-reel::after{content:"";position:absolute;left:0;right:0;height:34px;z-index:2;pointer-events:none}
.r-reel::before{top:0;background:linear-gradient(to bottom,rgba(27,26,63,.95),transparent)}
.r-reel::after{bottom:0;background:linear-gradient(to top,rgba(27,26,63,.95),transparent)}
.r-reel-mark{position:absolute;inset:43px 0 auto 0;height:34px;border-block:2px solid var(--accent);z-index:3;pointer-events:none}
.r-winner-card{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:1.75rem;box-shadow:var(--shadow-3);max-width:520px;margin:1.5rem auto 0;text-align:center}
.r-winner-num{font-family:var(--mono);font-size:2.6rem;font-weight:850;color:var(--brand);letter-spacing:.05em;line-height:1.1}
.r-confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

/* ------------------------------------------------------------ receipt */
.r-receipt{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden}
.r-receipt-h{background:linear-gradient(135deg,var(--brand),var(--brand-600));color:#fff;padding:1.75rem 1.75rem 1.5rem}
.r-receipt-b{padding:1.5rem 1.75rem 1.75rem}
.r-kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.25rem;font-size:.93rem}
.r-kv dt{color:var(--ink-3);font-weight:600}
.r-kv dd{margin:0;font-weight:600}

/* --------------------------------------------------------------- misc */
.r-qr{background:#fff;padding:.75rem;border-radius:var(--r);border:1px solid var(--line);display:inline-block}
.r-qr svg,.r-qr img{display:block;width:170px;height:170px;image-rendering:pixelated}
.r-copy{display:flex;gap:.4rem;align-items:center}
.r-copy input{font-family:var(--mono);font-size:.82rem}
.r-lead-board{counter-reset:lb}
.r-lb-row{display:flex;align-items:center;gap:.85rem;padding:.6rem 0;border-bottom:1px solid var(--line-2)}
.r-lb-row:last-child{border-bottom:0}
.r-lb-rank{width:30px;height:30px;border-radius:50%;background:var(--brand-100);color:var(--brand-600);
  display:grid;place-items:center;font-weight:800;font-size:.86rem;flex:none}
.r-lb-row:nth-child(1) .r-lb-rank{background:var(--accent);color:var(--brand-900)}
.r-lb-row:nth-child(2) .r-lb-rank{background:#d8d8e4}
.r-lb-row:nth-child(3) .r-lb-rank{background:#e8cfae}
.r-lb-name{flex:1;font-weight:600}
.r-lb-n{font-variant-numeric:tabular-nums;font-weight:750}

.r-foot{background:var(--brand-900);color:rgba(255,255,255,.7);padding:2.25rem 0 1.5rem;margin-top:3rem;font-size:.88rem}
.r-admin .r-foot{margin-top:2rem}
.r-foot-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.r-foot strong{color:#fff}
.r-foot a{color:var(--brand-300)}
.r-foot-links{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.r-ver{font-family:var(--mono);font-size:.74rem;opacity:.5}
.r-legal{margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;opacity:.65;max-width:80ch}

.r-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin-bottom:1.25rem;overflow-x:auto}
.r-tabs a{padding:.6rem .9rem;font-size:.9rem;font-weight:600;color:var(--ink-3);border-bottom:3px solid transparent;white-space:nowrap}
.r-tabs a:hover{color:var(--brand-600);text-decoration:none}
.r-tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}

details.r-acc{border:1px solid var(--line);border-radius:var(--r);margin-bottom:.6rem;background:#fff}
details.r-acc summary{padding:.8rem 1.1rem;cursor:pointer;font-weight:650;list-style:none}
details.r-acc summary::-webkit-details-marker{display:none}
details.r-acc summary::before{content:"▸";display:inline-block;margin-right:.55rem;transition:transform .15s;color:var(--brand-500)}
details.r-acc[open] summary::before{transform:rotate(90deg)}
details.r-acc .r-acc-b{padding:0 1.1rem 1.1rem}

/* ------------------------------------------------------- responsive */
@media (max-width:960px){
  .r-hero-in{grid-template-columns:1fr;padding:2.25rem 0 2.75rem}
  .r-hero-media{order:-1;aspect-ratio:16/9}
  .r-split{grid-template-columns:1fr}
  .r-sticky{position:static}
  .r-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .r-grid-2,.r-grid-3,.r-grid-4,.r-fgrid,.r-fgrid-3{grid-template-columns:minmax(0,1fr)}
  .r-top-in{min-height:58px;flex-wrap:wrap;padding-block:.5rem}
  .r-ctx-stats{gap:.9rem;font-size:.8rem}
  .r-card-p{padding:1.1rem}
  .r-who{display:none}
  .r-reel,.r-reel-item{height:92px}
  .r-reel-item{font-size:1.8rem}
  .r-reel-mark{inset:29px 0 auto 0}
}

/* sticky buy bar — phones only, where the buy box sits below the content */
.r-buybar{display:none}
@media (max-width:960px){
  .r-buybar{
    display:flex;position:fixed;inset:auto 0 0 0;z-index:40;
    align-items:center;justify-content:space-between;gap:1rem;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(26,26,46,.10)
  }
  .r-buybar .r-buybar-p{display:flex;flex-direction:column;line-height:1.15}
  .r-buybar .r-buybar-p b{font-size:1.15rem;color:var(--brand)}
  .r-buybar .r-buybar-p small{font-size:.74rem;color:var(--ink-3)}
  .r-buybar .r-btn{padding:.6rem 1.15rem}
  body.has-buybar{padding-bottom:76px}
}

/* ------------------------------------------------- row action menu */
/* Was two copies of an inline `position:absolute` block with no positioned
   ancestor, so the panel escaped its cell, landed against the page box and
   pushed 200px of horizontal scroll onto the whole admin — buttons ended up
   off the right of the screen. It is a component now, anchored to the right
   edge of its own cell so it opens inwards and can never widen the page. */
details.r-rowmenu{position:relative;display:inline-block;border:0;background:none;margin:0}
details.r-rowmenu > summary{
  padding:.35rem .6rem;cursor:pointer;list-style:none;border-radius:8px;
  font-weight:700;line-height:1.1;color:var(--ink-2);user-select:none}
details.r-rowmenu > summary::-webkit-details-marker{display:none}
details.r-rowmenu > summary::before{content:none}
details.r-rowmenu > summary:hover{background:var(--brand-50);color:var(--brand-600)}
details.r-rowmenu[open] > summary{background:var(--brand-100);color:var(--brand-600)}
.r-rowmenu-panel{
  position:absolute;top:calc(100% + .35rem);right:0;left:auto;
  z-index:60;min-width:230px;max-width:min(300px,calc(100vw - 2rem));
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:.75rem;box-shadow:var(--shadow-2);text-align:left;white-space:normal}
.r-rowmenu-panel form{margin:0 0 .4rem}
.r-rowmenu-panel form:last-child{margin-bottom:0}
.r-rowmenu-panel .r-btn{width:100%}
.r-rowmenu-panel input[type=text]{width:100%;margin-bottom:.4rem;font-size:.85rem}

/* A scrolling table would otherwise clip the open panel, so the wrapper
   lets it out for as long as one is open. Only above the phone breakpoint —
   on a narrow screen the table is genuinely wider than the viewport, and
   letting it out would push the whole page sideways. There the panel
   becomes a sheet instead (below). */
@media (min-width:1025px){
  .r-tbl-wrap.has-menu-open{overflow:visible}
}

/* Phones and tablets: the panel leaves the table entirely rather than
   fighting it for room. */
@media (max-width:1024px){
  .r-rowmenu-panel{
    position:fixed;left:1rem;right:1rem;bottom:1rem;top:auto;
    max-width:none;min-width:0;z-index:200;
    box-shadow:0 -8px 40px rgba(26,26,46,.28);max-height:70vh;overflow-y:auto}
  details.r-rowmenu[open] > summary::after{
    content:"";position:fixed;inset:0;background:rgba(12,10,30,.35);z-index:199}
}

/* Any table can be scrolled on its own, wrapper or not. Eighteen of them
   had no .r-tbl-wrap around them, and on a phone each one pushed the page
   wider than the screen — which is what put the buttons off the edge. */
@media (max-width:1024px){
  table.r-tbl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.r-tbl > thead,table.r-tbl > tbody,table.r-tbl > tfoot{display:table;width:100%;min-width:max-content}
}

/* ------------------------------------------- photos and documents */
/* back office ------------------------------------------------------ */
.r-media-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:.9rem 0}
.r-media-tile{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.r-media-solo{max-width:340px;margin:.9rem 0}
.r-media-shot{display:block;position:relative;aspect-ratio:16/10;background:var(--brand-50);overflow:hidden}
.r-media-shot img{width:100%;height:100%;object-fit:cover;display:block}
.r-media-flag{position:absolute;left:.5rem;top:.5rem;background:var(--accent);color:#241f00;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.15rem .45rem;border-radius:99px}
.r-media-body{padding:.6rem .7rem .7rem;display:flex;flex-direction:column;gap:.4rem}
.r-media-name{margin:0;font-weight:600;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-media-meta{margin:0;font-size:.74rem;color:var(--ink-3,#777)}
.r-media-body input[type=text],.r-media-body input[type=number]{width:100%;font-size:.8rem;padding:.32rem .45rem}
.r-media-acts{gap:.35rem;flex-wrap:wrap}
.r-drop{border:2px dashed var(--line-2);border-radius:12px;padding:.9rem 1rem;display:flex;
  gap:.7rem;align-items:center;flex-wrap:wrap;transition:border-color .15s,background .15s}
.r-drop input[type=file]{flex:1;min-width:200px;font-size:.86rem}
.r-drop.is-over{border-color:var(--brand-500);background:var(--brand-50)}
.r-drop.is-busy{border-color:var(--accent);background:var(--accent-100);opacity:.85}

/* public ----------------------------------------------------------- */
.r-gal{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.r-gal a{display:block;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--brand-50);
  border:1px solid var(--line-2)}
.r-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.r-gal a:hover img{transform:scale(1.05)}
.r-gal figure{margin:0}
.r-gal figcaption{font-size:.78rem;color:var(--ink-3,#777);padding:.3rem .1rem 0}
.r-prize-shot{width:112px;height:78px;object-fit:cover;border-radius:10px;border:1px solid var(--line-2);flex:0 0 auto}
.r-dl{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;border-top:1px solid var(--line-2)}
.r-dl:first-child{border-top:0}
.r-dl-ico{flex:0 0 auto;width:34px;height:42px;border-radius:5px;background:#e8324b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;letter-spacing:.03em}
.r-dl-name{font-weight:600}
.r-dl-meta{font-size:.78rem;color:var(--ink-3,#777)}

/* lightbox --------------------------------------------------------- */
.r-lb{position:fixed;inset:0;z-index:900;background:rgba(12,10,30,.92);display:flex;align-items:center;
  justify-content:center;padding:1.2rem}
.r-lb img{max-width:96vw;max-height:84vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.r-lb-cap{position:absolute;left:0;right:0;bottom:1.1rem;text-align:center;color:#fff;font-size:.9rem;padding:0 1.2rem}
.r-lb-x{position:absolute;top:.8rem;right:1rem;background:none;border:0;color:#fff;font-size:2rem;
  line-height:1;cursor:pointer;padding:.2rem .6rem}
.r-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:0;
  color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;padding:.5rem .8rem;border-radius:10px}
.r-lb-nav.prev{left:1rem} .r-lb-nav.next{right:1rem}
.r-lb-nav:hover{background:rgba(255,255,255,.28)}

@media (max-width:640px){
  .r-media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .r-gal{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .r-prize-shot{width:84px;height:60px}
}

/* ---------------------------------------------------------- printing */
@media print{
  .r-top,.r-subnav,.r-ctx,.r-foot,.r-btn,.r-tabs,.no-print{display:none!important}
  body{background:#fff;font-size:11pt}
  .r-card{border:1px solid #999;box-shadow:none;break-inside:avoid}
  a{color:#000;text-decoration:none}
}

/* print sheets for the physical drawing --------------------------- */
.slip-sheet{background:#fff}
@page{margin:.4in}
.slips{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.slips.compact{grid-template-columns:repeat(4,1fr)}
.slips.labels{grid-template-columns:repeat(3,1fr)}
.slip{border:1px dashed #666;padding:.28in .3in;break-inside:avoid;min-height:1.55in;
  display:flex;flex-direction:column;justify-content:space-between;font-size:9.5pt;line-height:1.3}
.slips.compact .slip{min-height:1.05in;padding:.16in .18in;font-size:8pt}
.slips.labels .slip{min-height:1in;padding:.12in .16in;font-size:8pt;border-style:solid;border-color:#ccc}
.slip .num{font-family:var(--mono);font-size:15pt;font-weight:800;letter-spacing:.04em}
.slips.compact .slip .num{font-size:12pt}
.slip .who{font-weight:700}
.slip .meta{font-size:7.5pt;color:#444}
.slip-hdr{display:flex;justify-content:space-between;font-size:8pt;color:#333;border-bottom:1px solid #000;
  padding-bottom:.06in;margin-bottom:.1in;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.cert{max-width:7.4in;margin:0 auto;padding:.5in;border:4px double var(--brand);font-size:11pt}
.cert h1{text-align:center;font-size:20pt;color:var(--brand);margin-bottom:.1in}
.cert .cert-num{text-align:center;font-family:var(--mono);font-size:30pt;font-weight:850;
  letter-spacing:.08em;color:var(--brand);margin:.25in 0}
.cert dl{display:grid;grid-template-columns:auto 1fr;gap:.06in .25in;font-size:10pt}
.cert dt{font-weight:700;color:#444}
.cert dd{margin:0}
.cert .hashline{font-family:var(--mono);font-size:7.5pt;word-break:break-all;background:#f4f4f8;padding:.1in;border-radius:4px}
.cert .sigs{display:grid;grid-template-columns:1fr 1fr;gap:.4in;margin-top:.5in}
.cert .sig{border-top:1px solid #000;padding-top:.06in;font-size:8.5pt;color:#444}

/* The chooser card is itself a link, so its preview link sits below it
   rather than inside it — nested anchors are invalid and browsers
   silently unnest them, which loses the click. */
.r-pick-wrap{display:flex;flex-direction:column}
.r-pick-preview{align-self:flex-start;margin-top:.4rem;padding:.2rem .1rem;
  font-size:.82rem;font-weight:600;color:var(--ink-3);text-decoration:none}
.r-pick-preview:hover,.r-pick-preview:focus-visible{color:var(--ink);text-decoration:underline}

/* -------------------------------------------------------- preview --- */
/* Deliberately unmissable. The failure this guards against is somebody
   believing a draft is live, or sending the preview link to a parent. */
.r-prev{position:sticky;top:0;z-index:60;background:#2e2c65;color:#fff;
  border-bottom:3px solid var(--accent,#f5b301);font-size:.86rem;line-height:1.35}
.r-prev-in{max-width:1180px;margin:0 auto;padding:.55rem 1.25rem;
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.r-prev-tag{flex:none;background:var(--accent,#f5b301);color:#1a1a2e;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;font-size:.7rem;
  padding:.2rem .5rem;border-radius:4px}
.r-prev-what{font-weight:600}
.r-prev-status{opacity:.72;font-weight:400}
.r-prev-status::before{content:"· "}
.r-prev-mode{flex:1 1 22rem;opacity:.9}
.r-prev-mode strong{font-weight:700}
.r-prev-acts{display:flex;gap:.9rem;flex:none;margin-left:auto}
.r-prev-acts a{color:#fff;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.r-prev-acts a:hover{color:var(--accent,#f5b301)}
@media print{.r-prev{display:none}}

/* ---------------------------------------------------------- share --- */
.r-share{display:flex;flex-wrap:wrap;gap:.45rem;margin:.15rem 0 .55rem}
.r-share-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.44rem .78rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font:inherit;font-size:.84rem;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.r-share-btn svg{flex:0 0 auto}
/* display:inline-flex above beats the browser's own [hidden] rule, which
   left the native Share button showing on every desktop it does not work
   on. It has to be said again, louder. */
.r-share-btn[hidden]{display:none !important}
.r-share-btn:hover,.r-share-btn:focus-visible{border-color:currentColor}
.r-share-native{background:var(--brand);border-color:var(--brand);color:#fff}
.r-share-native:hover,.r-share-native:focus-visible{filter:brightness(1.08);color:#fff}
.r-share-sms:hover,.r-share-sms:focus-visible{color:#127a3d;background:#f1faf4}
.r-share-fb:hover,.r-share-fb:focus-visible{color:#1877f2;background:#f2f7ff}
.r-share-x:hover,.r-share-x:focus-visible{color:#000;background:#f5f5f5}
.r-share-ig:hover,.r-share-ig:focus-visible{color:#c1348b;background:#fdf2f9}
.r-share-btn.is-done{color:#127a3d;border-color:#127a3d;background:#f1faf4}
@media print{.r-share{display:none}}

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