/*
 * Date night picker — Offline B2B landing tokens.
 *
 * Token contract lifted from the Offline design system repo
 * (offline-event-form/app/_styles/tokens.css, the `.offline-b2b` scope).
 * Names are NOT renamed — same contract, self-hosted fonts instead of
 * next/font variables so this can ship as a static page.
 */

/* ─────────── Fonts (self-hosted from the design system repo) ─────────── */
@font-face{font-family:"Satoshi";src:url("/fonts/satoshi/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/satoshi/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/satoshi/Satoshi-Black.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("/fonts/cabinet-grotesk/CabinetGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("/fonts/cabinet-grotesk/CabinetGrotesk-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{ color-scheme: light; scroll-behavior: smooth; }

.offline-b2b{
  /* Foreground */
  --ink:           #000000;
  --ink-soft:      #0F0F0F;
  --ink-muted:     #495057;
  --ink-quiet:     #6B6B6B;

  /* Surface */
  --surface:        #FFFFFF;
  --surface-grey-1: #F7F8F8;
  --surface-grey-2: #F6F6F6;
  --surface-grey-3: #ECECEC;
  --surface-ink:    #000000;

  /* Accent */
  --accent:        #FFBD54;
  --accent-ink:    #C57900;

  /* Borders */
  --border-subtle: #DFDFDF;
  --border-faint:  #EEEEEE;

  /* Type families */
  --font-display: "Cabinet Grotesk", system-ui, sans-serif;
  --font-ui:      "Satoshi", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  /* Radius */
  --r-card:  8px;
  --r-pill:  20px;
  --r-image: 16px;

  /* Shadow */
  --shadow-sm: 0 2px 8px 0 rgba(0,0,0,0.10);
  --shadow-md: 0 8px 24px 0 rgba(0,0,0,0.08);

  font-family: var(--font-ui);
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.offline-b2b *,
.offline-b2b *::before,
.offline-b2b *::after{ box-sizing: border-box; }

html,body{ margin:0; padding:0; background:#FFFFFF; }

/* ─────────── Type ladder ─────────── */
.t-display-xl{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,7vw,62px); line-height:1.1; letter-spacing:-0.01em; }
.t-display-lg{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,4vw,38px); line-height:1.1; letter-spacing:-0.005em; }
.t-display-card{ font-family:var(--font-ui); font-weight:700; font-size:22px; line-height:27px; letter-spacing:0.4px; }
.t-body-lg{ font-family:var(--font-ui); font-weight:500; font-size:18px; line-height:1.35; }
.t-ui-bold{ font-family:var(--font-ui); font-weight:800; font-size:16px; line-height:1.2; }
.t-ui-medium{ font-family:var(--font-ui); font-weight:500; font-size:15px; line-height:1.4; }
.t-mono-stat{ font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; }

/* ─────────── Highlight ─────────── */
.hi{
  background:linear-gradient(transparent 55%, var(--accent) 55%, var(--accent) 92%, transparent 92%);
  padding:0 4px; color:var(--ink);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hi-block{
  background:var(--accent); color:var(--ink);
  padding:2px 8px; border-radius:4px; font-weight:700;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* ─────────── Buttons ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  white-space:nowrap;
  padding:14px 22px; border-radius:var(--r-card);
  font-family:var(--font-ui); font-weight:800; font-size:16px; line-height:1.2;
  border:1px solid var(--ink); cursor:pointer; text-decoration:none;
  transition:background 120ms ease-out;
}
.btn-primary{ background:var(--ink); color:var(--surface); }
.btn-primary:hover{ background:var(--ink-soft); }
.btn-secondary{ background:var(--surface); color:var(--ink); }
.btn-secondary:hover{ background:var(--surface-grey-1); }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

/* ─────────── Eyebrow / pill ─────────── */
.eyebrow{
  display:inline-block; padding:6px 12px; border-radius:var(--r-pill);
  background:var(--surface-grey-3); color:var(--ink-muted);
  font-family:var(--font-mono); font-weight:500; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--r-pill);
  border:1px solid var(--border-subtle); background:var(--surface);
  font-family:var(--font-ui); font-weight:500; font-size:13px; line-height:1.3;
  color:var(--ink-muted); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pill strong{ font-weight:700; color:var(--ink); }
.pill.accent{ background:var(--accent); border-color:var(--ink); color:var(--ink); font-weight:700; }
.pill.top{ border-color:var(--ink); color:var(--ink); }

/* ─────────── Page frame ─────────── */
.wrap{ max-width:760px; margin:0 auto; padding:0 20px; }
@media (min-width:768px){ .wrap{ padding:0 32px; } }

.masthead{ border-bottom:1px solid var(--border-faint); background:var(--surface); }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.logo{ height:20px; display:block; }
.masthead .t-mono-stat{ color:var(--ink-quiet); }
/* The date is the thing readers skip, so it gets the accent, not the grey. */
.masthead .mast-date{ color:var(--ink); font-weight:500; }
.eyebrow.date{ background:var(--accent); color:var(--ink); }

.hero{ background:var(--surface); padding:44px 0 32px; }
.hero h1{ margin:16px 0 0; text-wrap:balance; color:var(--ink); }
.hero .lede{ margin:18px 0 0; max-width:60ch; color:var(--ink-muted); }
.hero .lede strong{ color:var(--ink); font-weight:700; }
.hero .lede + .lede{ margin-top:10px; }

.tally{
  position:sticky; top:0; z-index:20;
  background:var(--surface-grey-1);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.tally .wrap{ display:flex; align-items:center; gap:12px; height:52px; }
.tally .count{ font-family:var(--font-ui); font-weight:800; font-size:15px; color:var(--ink); }
.tally .hint{ font-family:var(--font-ui); font-weight:500; font-size:13px; color:var(--ink-quiet); }

.board{ background:var(--surface-grey-1); padding:28px 0 40px; }
.grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:700px){ .grid{ grid-template-columns:repeat(2,1fr); } }

/* ─────────── Card ─────────── */
.card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.card:hover{ box-shadow:var(--shadow-sm); }
.card[data-picked="true"]{ border-color:var(--ink); border-width:2px; box-shadow:var(--shadow-md); }

/* The partner clips are vertical (9:16), so a wide slot crops them to a sliver.
 * 4:5 on phones, 1:1 once the grid goes two-up and cards would get too tall. */
.shot{ position:relative; aspect-ratio:4/5; background:var(--surface-grey-3); }
@media (min-width:700px){ .shot{ aspect-ratio:1/1; } }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot .tag,.shot .seal{ z-index:2; }
.shot .tag{
  position:absolute; left:12px; bottom:12px;
  background:var(--accent); color:var(--ink);
  font-family:var(--font-ui); font-weight:800; font-size:13px; line-height:1;
  padding:8px 12px; border-radius:4px;
}
.shot .seal{
  position:absolute; right:12px; top:12px;
  width:30px; height:30px; border-radius:50%;
  background:var(--ink); display:none; place-items:center;
}
.card[data-picked="true"] .shot .seal{ display:grid; }

.body{ padding:18px 18px 0; flex:1; }
.name{ color:var(--ink); margin:0; }
.hoodline{ margin:5px 0 0; color:var(--ink-quiet); }
.teaser{ margin:11px 0 0; color:var(--ink-muted); }
.stats{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; }

.foot{
  margin-top:16px; padding:12px 18px;
  border-top:1px solid var(--border-faint);
  display:flex; align-items:center; gap:10px;
}
.foot a{
  font-family:var(--font-ui); font-weight:700; font-size:13px;
  color:var(--ink-muted); text-decoration:none;
  border-bottom:1px solid var(--border-subtle); padding-bottom:1px;
}
.foot a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.pickbtn{
  margin-left:auto;
  font-family:var(--font-ui); font-weight:800; font-size:13px;
  padding:9px 16px; border-radius:var(--r-card);
  border:1px solid var(--ink); background:var(--surface); color:var(--ink);
  cursor:pointer;
}
.card[data-picked="true"] .pickbtn{ background:var(--ink); color:var(--surface); }
.pickbtn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

/* ─────────── Send bar ─────────── */
.sendbar{
  position:sticky; bottom:0; z-index:30;
  background:var(--surface);
  border-top:1px solid var(--border-subtle);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
}
.sendbar .wrap{ display:flex; align-items:center; gap:12px; }
/* The primary takes the leftover room; Copy sizes to its own label, otherwise an
 * even 50/50 split squeezes "Text me your picks" onto two lines on a phone. */
.sendbar .btn-primary{ flex:1 1 auto; min-width:0; }
.sendbar .btn-secondary{ flex:0 0 auto; padding-left:18px; padding-right:18px; }
.sendmsg{ font-family:var(--font-ui); font-weight:500; font-size:13px; color:var(--ink-quiet); }

/* ─────────── Method note ─────────── */
.method{ background:var(--surface); padding:36px 0 56px; }
.method h2{ margin:0 0 14px; color:var(--ink); }
.method p{ margin:0 0 12px; max-width:62ch; color:var(--ink-muted); font-size:15px; line-height:1.55; }
.method .eyebrow{ margin-bottom:14px; }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}

/* ─────────── Clips ─────────── */
/* The still sits underneath; the clip fades in once it is actually playing,
 * so a blocked or failed HLS stream just leaves the photo in place. */
.shot .still{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shot video.clip{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 300ms ease-out;
}
.shot video.clip.live{ opacity:1; }
.shot video.clip.dead{ display:none; }
@media (prefers-reduced-motion: reduce){
  .shot video.clip{ display:none; }
}