/* Bruce Works Join — Field Manual skin (1.0), from Secure Intake's portal. Self-hosted fonts only (CSP font-src 'self');
   no inline styles anywhere (CSP style-src 'self'). */
@font-face { font-family: "Big Shoulders"; src: url(/static/fonts/big-shoulders-display-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/static/fonts/barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/static/fonts/barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/static/fonts/barlow-condensed-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/static/fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --night: #15181c; --night-2: #1c2023; --night-3: #23282d; --olive: #3a4139; --olive-2: #4a5249;
  --bone: #e8e4da; --mist: #b9bdc2; --steel: #8a8f94; --signal: #feb019; --alert: #c7392b;
  --display: "Big Shoulders", Impact, "Arial Narrow", sans-serif;
  --body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 5vw, 72px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* the scripts show and hide with the hidden attribute; no display rule may beat it */
html { background: var(--night); color: var(--bone); font-family: var(--body); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  background: repeating-linear-gradient(45deg, transparent 0 88px, rgba(254, 176, 25, 0.022) 88px 176px), var(--night);
}
a { color: inherit; }
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ── header ── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 0 var(--gutter); border-bottom: 1px solid var(--olive); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { height: 38px; width: auto; display: block; }
.brand span { font: 800 25px/1 var(--display); letter-spacing: 2px; text-transform: uppercase; }
.tag { font: 500 11px/1.3 var(--mono); letter-spacing: 3px; text-transform: uppercase; color: var(--steel); text-align: right; }
.tag b { color: var(--bone); font-weight: 500; }

/* ── layout: the class on the left (it stays in view while the form scrolls), the form panel on the right ── */
.shell {
  width: min(1240px, 100%); margin: 0 auto; flex: 1;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr); grid-template-areas: "head panel" "body panel";
  column-gap: clamp(36px, 5vw, 88px); padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(56px, 7vw, 96px);
}
.head { grid-area: head; align-self: start; }
.body { grid-area: body; align-self: start; min-width: 0; }
.panel { grid-area: panel; align-self: start; min-width: 0; }
.join { grid-template-areas: "head panel"; }
.join .head { position: sticky; top: 32px; }

.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 500 12px/1.3 var(--mono); letter-spacing: 3px; text-transform: uppercase; color: var(--steel); }
.kicker .num { color: var(--alert); }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--olive); max-width: 160px; }
.kicker.eyebrow { color: var(--signal); }
h1 { margin: 0; font: 800 clamp(52px, 6.4vw, 92px)/0.92 var(--display); letter-spacing: 1px; text-transform: uppercase; max-width: 12ch; overflow-wrap: break-word; }
h2 { margin: 18px 0 6px; font: 800 clamp(34px, 3.4vw, 44px)/0.95 var(--display); letter-spacing: 1px; text-transform: uppercase; }
.lede { margin: 26px 0 0; max-width: 560px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--mist); }
.lede strong { color: var(--bone); font-weight: 600; }

/* ── the class: topics and the fine print ── */
.topics { margin: 30px 0 0; max-width: 560px; padding: 18px 20px; background: var(--night-2); border: 2px solid var(--olive); border-left: 4px solid var(--signal); }
.topics .l, .payouts .l, .balance .l { font: 500 11px/1 var(--mono); letter-spacing: 3px; text-transform: uppercase; color: var(--steel); }
.topics ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.topics li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; line-height: 1.4; font-size: 16.5px; }
.topics li::before { content: "☑"; color: var(--signal); font-size: 17px; line-height: 1.2; }
.topics p { margin: 14px 0 0; color: var(--mist); font-size: 14.5px; line-height: 1.5; }
.next { margin: 24px 0 0; max-width: 560px; line-height: 1.55; color: var(--bone); }
.fine { margin: 14px 0 0; max-width: 560px; font: 500 11.5px/1.6 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel); }

/* ── the panel ── */
.panel { background: var(--night-2); border: 2px solid var(--olive); padding: clamp(20px, 3vw, 38px); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--olive); }
.chip { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.3 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--bone); border: 1px solid var(--olive-2); padding: 7px 10px; }
.chip::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--steel); }
.chip.ok { border-color: var(--signal); }
.chip.ok::before { background: var(--signal); }
.chip.warn::before { background: var(--alert); }
.panel-head .meta { flex: none; font: 500 10px/1.3 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--steel); text-align: right; }
.req-note { margin: 4px 0 0; font: 500 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--steel); }
.req { color: var(--signal); }
.opt-tag { font: 500 10px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--steel); }

form { display: grid; gap: 0; margin-top: 8px; }
fieldset.step { margin: 0; padding: 24px 0 26px; border: 0; border-bottom: 1px solid var(--olive); min-width: 0; display: grid; gap: 14px; }
fieldset.step.invalid legend { color: var(--signal); }
fieldset.step.invalid .opt, fieldset.step.invalid input:not([type]), fieldset.step.invalid input[type=email] { border-color: var(--alert); }
legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font: 600 20px/1.15 var(--cond); letter-spacing: 1.2px; text-transform: uppercase; color: var(--bone); }
legend .n { font: 500 12px/1 var(--mono); color: var(--alert); letter-spacing: 2px; margin-right: 6px; vertical-align: 2px; }
legend + * { clear: both; }
.hint { margin: -6px 0 0; color: var(--mist); font-size: 14.5px; line-height: 1.5; }
.sub { margin: 6px 0 0; font: 600 16px/1.2 var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--bone); }
.count { white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: 1px; color: var(--steel); margin-left: 6px; }
.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

label { display: grid; gap: 8px; font: 500 11px/1.2 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--steel); }
input, select, textarea {
  width: 100%; height: 52px; padding: 0 14px; border: 2px solid var(--olive); border-radius: 0; background: var(--night);
  color: var(--bone); font: 400 17px/1 var(--body); letter-spacing: 0; text-transform: none; outline: none; -webkit-appearance: none; appearance: none;
}
textarea { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: #6b7076; }
input:focus, select:focus, textarea:focus { border-color: var(--bone); }
select {
  padding-right: 42px; cursor: pointer;
  background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23b9bdc2' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
input[type=checkbox], input[type=radio] {
  width: 20px; height: 20px; padding: 0; margin: 1px 0 0; border: 0; background: none; flex: none;
  -webkit-appearance: auto; appearance: auto; accent-color: var(--signal); cursor: pointer;
}

/* option tiles: the real input stays visible (keyboard and screen readers get the native control) */
.opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.opts.two { grid-template-columns: 1fr 1fr; }
.opts.wins { grid-template-columns: 1fr; }
.opt {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 13px 14px;
  border: 2px solid var(--olive); background: var(--night); cursor: pointer;
  font: 400 16px/1.35 var(--body); letter-spacing: 0; text-transform: none; color: var(--bone);
}
.opt:hover { border-color: var(--olive-2); }
.opt:has(input:checked) { border-color: var(--bone); background: var(--night-3); }
.opt:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.opt b { font: 600 17px/1.2 var(--cond); letter-spacing: 1.2px; text-transform: uppercase; margin-right: 4px; }
.opt .local { display: block; margin-top: 4px; font: 500 11px/1.3 var(--mono); letter-spacing: 1px; color: var(--signal); }
.opt.wide { grid-template-columns: 20px 1fr; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.opt.day { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 10px 2px; text-align: center; font: 600 15px/1 var(--cond); letter-spacing: 1px; text-transform: uppercase; }

.consent { grid-template-columns: 20px 1fr; align-items: start; gap: 12px; font: 400 16px/1.45 var(--body); letter-spacing: 0; text-transform: none; color: var(--bone); cursor: pointer; }
.invite-note { margin: 4px 0 0; padding: 14px 16px; border-left: 4px solid var(--signal); background: var(--night); color: var(--bone); line-height: 1.5; font-size: 15.5px; }
.privacy-link { margin: 0; color: var(--mist); font-size: 14.5px; }
.privacy-link a { color: var(--bone); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 60px; border: 0; border-radius: 0; margin-top: 24px;
  background: var(--signal); color: var(--night); font: 600 20px/1 var(--cond); letter-spacing: 3px; text-transform: uppercase; cursor: pointer; text-decoration: none;
}
button:hover, .btn:hover { filter: brightness(1.06); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
button:disabled { opacity: 0.5; cursor: progress; filter: none; }
button.secondary, .btn.ghost { background: transparent; color: var(--bone); border: 2px solid var(--olive-2); height: 52px; font-size: 17px; }
.btn { width: auto; padding: 0 28px; }

.error { margin: 18px 0 0; padding: 12px 14px; border-left: 4px solid var(--alert); background: var(--night-3); color: var(--bone); line-height: 1.5; }
.warning { margin: 24px 0 0; padding: 14px 16px; border-left: 4px solid var(--alert); background: var(--night-2); max-width: 560px; }
.warning strong { display: block; font: 600 17px/1.2 var(--cond); letter-spacing: 1.5px; text-transform: uppercase; }
.warning span { display: block; margin-top: 6px; color: var(--mist); line-height: 1.5; }
.muted { margin: 16px 0 0; color: var(--mist); font-size: 14.5px; line-height: 1.55; }

/* the success ticket */
.receipt { margin-top: 24px; background: var(--bone); color: var(--night); padding: 24px; display: grid; gap: 10px; outline: none; }
.receipt .l { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 3px; text-transform: uppercase; color: #3d4147; }
.receipt .l::before { content: "☑ "; color: var(--night); }
.receipt strong { font: 800 clamp(34px, 4vw, 46px)/0.95 var(--display); letter-spacing: 1px; text-transform: uppercase; }
.receipt p { margin: 0; color: #2d3136; line-height: 1.5; font-size: 17px; }
.receipt #done-list { padding-top: 10px; border-top: 1px solid #c9c4b8; font-weight: 600; }

/* ── partner page ── */
.partner .head h1 { max-width: 14ch; }
.side { grid-area: panel; align-self: start; min-width: 0; display: grid; gap: 24px; }
.side > .panel { grid-area: auto; }
.share { background: var(--night-2); border: 2px solid var(--olive); padding: clamp(20px, 3vw, 38px); min-width: 0; }
.share h3.sect { margin-top: 0; }
.share .keep { margin-top: 22px; }
.balance { margin: 22px 0 0; padding: 18px; background: var(--bone); color: var(--night); display: grid; gap: 8px; }
.balance .l { color: #3d4147; }
.balance strong { font: 800 clamp(44px, 5vw, 60px)/0.9 var(--display); letter-spacing: 1px; }
.ledger { margin: 18px 0 0; display: grid; }
.ledger div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--olive); }
.ledger dt { color: var(--mist); }
.ledger dd { margin: 0; font: 600 18px/1.2 var(--cond); letter-spacing: 1px; white-space: nowrap; }
.ledger .total dt { color: var(--bone); font-weight: 600; }
.ledger .total dd { color: var(--signal); font-size: 21px; }
.payouts { margin: 22px 0 0; }
.payouts ul { list-style: none; margin: 10px 0 0; padding: 0; }
.payouts li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--olive); color: var(--mist); }
.payouts b { color: var(--bone); font: 600 16px/1.2 var(--cond); letter-spacing: 1px; }
.stats { margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--olive); background: var(--night-2); }
.stats div { padding: 16px 14px; border-right: 1px solid var(--olive); display: grid; gap: 6px; }
.stats div:last-child { border-right: 0; }
.stats strong { font: 800 40px/1 var(--display); }
.stats span { font: 500 10px/1.3 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--steel); }
h3.sect { margin: 40px 0 14px; font: 600 22px/1.1 var(--cond); letter-spacing: 1.5px; text-transform: uppercase; }
h3.sect .n { font: 500 12px/1 var(--mono); color: var(--alert); letter-spacing: 2px; margin-right: 6px; vertical-align: 3px; }
.table-wrap { overflow-x: auto; border: 2px solid var(--olive); }
table.refs { width: 100%; border-collapse: collapse; font-size: 16px; }
.refs th { text-align: left; padding: 12px 14px; font: 500 10.5px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--steel); background: var(--night-2); border-bottom: 1px solid var(--olive); }
.refs td { padding: 12px 14px; border-bottom: 1px solid var(--olive); white-space: nowrap; }
.refs tr:last-child td { border-bottom: 0; }
.st { font: 600 15px/1 var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--mist); }
.st-attended { color: var(--bone); }
.st-invited { color: var(--signal); }
.yes { color: var(--signal); font-weight: 600; }
.no { color: var(--steel); }
.empty { margin: 0; padding: 20px; border: 2px dashed var(--olive-2); color: var(--mist); }
.linkrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.linkrow code { display: flex; align-items: center; min-width: 0; padding: 0 14px; min-height: 52px; border: 2px solid var(--olive); background: var(--night); font: 500 15px/1.3 var(--mono); overflow-wrap: anywhere; }
.linkrow button { margin: 0; width: auto; padding: 0 22px; }
.qr-row { margin-top: 18px; display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: start; }
.qr { margin: 0; padding: 0; background: var(--bone); }
.qr svg { display: block; width: 100%; height: auto; }
.qr-help p { margin: 0 0 12px; color: var(--mist); line-height: 1.55; }
.dl { display: grid; gap: 8px; }
.dl a { color: var(--bone); font: 600 16px/1.3 var(--cond); letter-spacing: 1px; text-transform: uppercase; }
.keep { margin: 36px 0 0; padding-top: 16px; border-top: 1px solid var(--olive); color: var(--steel); font-size: 14px; line-height: 1.5; }

/* message pages and the privacy notice */
.center { flex: 1; width: min(760px, 100%); margin: 0 auto; padding: clamp(56px, 10vw, 120px) var(--gutter); }
.center h1 { max-width: none; font-size: clamp(48px, 7vw, 84px); }
.center > p { color: var(--mist); font-size: 19px; line-height: 1.55; max-width: 600px; }
.inline-form { display: block; margin: 0; }
.inline-form button { max-width: 340px; }
.prose h2 { margin: 36px 0 8px; font: 600 22px/1.2 var(--cond); letter-spacing: 1.5px; text-transform: uppercase; }
.prose > p { font-size: 17px; }
.prose .small { margin-top: 40px; font: 500 11px/1.6 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--steel); }

/* ── footer + hazard strip ── */
footer { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 20px var(--gutter); border-top: 1px solid var(--olive); font: 500 10.5px/1.5 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--steel); }
footer a { color: var(--mist); }
.hazard { height: 10px; background: repeating-linear-gradient(-45deg, var(--signal) 0 14px, var(--night) 14px 28px); }

@media (max-width: 959px) {
  .shell, .join { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "panel" "body"; padding-top: 36px; }
  .join .head { position: static; }
  .partner { grid-template-areas: "head" "panel" "body" "share"; }
  .partner .side { display: contents; }
  .partner .side > .panel { grid-area: panel; }
  .partner .share { grid-area: share; margin-top: 36px; }
  .head { margin-bottom: 30px; }
  .lede { margin-top: 18px; }
  .tag span { display: none; }
}
@media (max-width: 560px) {
  .top { min-height: 64px; }
  .brand img { height: 32px; }
  .brand span { font-size: 21px; }
  .tag { font-size: 10px; letter-spacing: 2px; }
  h1 { font-size: 50px; }
  .topics { padding: 16px; }
  .panel { padding: 18px 16px 22px; }
  .row2, .opts.two { grid-template-columns: 1fr; }
  .opts { grid-template-columns: 1fr; }
  .days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  legend { font-size: 19px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--olive); }
  .refs td, .refs th { padding: 11px 10px; }
  .qr-row { grid-template-columns: 1fr; }
  .qr { max-width: 240px; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }