/* ---------------------------------------------------------------------------
   /collaborate/ — "Send me an idea".
   Loaded only by templates/collaborate.html, so the rest of the site pays
   nothing for it and styles.css keeps its ?v= cache key.

   Every colour here is a token from styles.css. The source design hardcoded
   the dark-theme hex values (#080a0d, #2ea8ff, ...) which are exactly our
   dark tokens — but hardcoding them would strand this page in dark mode when
   the reader flips the theme, and would wreck the print stylesheet. var() or
   nothing.
   --------------------------------------------------------------------------- */

/* ---- jump row -----------------------------------------------------------
   The design had its own sticky brand bar. The site already has one; two
   stacked sticky headers eat a phone screen. This is the same set of links,
   not sticky, sitting under the hero. */
.cb-jump { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }
.cb-jump a {
  font-size:14.5px; font-weight:500; padding:8px 12px; border-radius:9px;
  color:var(--ink); border:1px solid var(--line); background:var(--bg-2);
}
.cb-jump a:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.cb-jump a.is-cta { background:var(--cta-plate); color:var(--bg-0); font-weight:800;
  border-color:transparent; box-shadow:var(--cta-plate-shadow); }
.cb-jump a.is-cta:hover { background:var(--cta-plate-hover); color:var(--bg-0); }

/* ---- hero ---------------------------------------------------------------- */
.cb-hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:40px; align-items:center; }
.cb-kicker {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:12px; text-transform:uppercase; letter-spacing:.18em;
  color:var(--accent-2); margin-bottom:14px;
}
.cb-kicker::before {
  content:""; width:26px; height:2px; display:inline-block;
  background:repeating-linear-gradient(90deg,var(--accent-2) 0 6px,transparent 6px 10px);
}
.cb-hero h1 {
  font-family:var(--display); font-size:clamp(34px,5.4vw,54px); line-height:1.05;
  margin:0 0 16px; letter-spacing:-.02em; text-wrap:balance;
}
.cb-hero h1 .glow { color:var(--accent); text-shadow:0 0 18px var(--glow-accent); }
.cb-hero .lede { font-size:clamp(16px,2.3vw,19px); color:var(--muted); max-width:640px; margin:0 0 26px; }
.cb-hero-actions { display:flex; flex-wrap:wrap; gap:12px; }

/* ---- canvas stage -------------------------------------------------------- */
.cb-stage {
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  background:radial-gradient(120% 90% at 50% 30%, var(--bg-4) 0%, var(--bg-1) 70%);
}
.cb-stage canvas { display:block; width:100%; aspect-ratio:4/3; touch-action:pan-y; cursor:pointer; }
.cb-stage .frame { position:absolute; inset:10px; border:1px dashed var(--glow-accent);
  border-radius:8px; pointer-events:none; }
.cb-stage .caption {
  position:absolute; left:0; right:0; bottom:0; padding:8px 14px;
  display:flex; justify-content:space-between; gap:12px; pointer-events:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:linear-gradient(180deg,transparent,var(--caption-fade) 45%);
}
.cb-stage .caption em { color:var(--accent-2); font-style:normal; }

/* ---- dashed rule --------------------------------------------------------- */
.cb-rule { height:14px; position:relative; }
.cb-rule::before {
  content:""; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:min(92%,var(--maxw)); height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px);
}

/* ---- "ways in" cards ----------------------------------------------------- */
.cb-ways { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:18px; }
.cb-way {
  display:flex; flex-direction:column; gap:12px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cb-way:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
@media (prefers-reduced-motion: reduce) { .cb-way, .cb-way:hover { transition:none; transform:none; } }
.cb-way-top { display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px 16px; flex-wrap:wrap; }
/* When the card is narrow, the price pill drops to its own line rather
   than squeezing the heading into 'Sponsor / an idea'. */
.cb-way-id { flex:1 1 auto; }
.cb-way-id { display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 auto; }
.cb-way-abbr {
  flex:none; width:46px; height:46px; display:grid; place-items:center;
  border-radius:12px; background:var(--bg-3); border:1px solid var(--line);
  font-family:var(--display); font-weight:700; font-size:14px;
}
.cb-way h3 { margin:0; font-family:var(--display); font-size:19px; color:var(--ink); }
.cb-way-price {
  flex:none; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap; padding:5px 10px; border-radius:999px;
  border:1px solid var(--line);
}
.cb-way p { margin:0; color:var(--muted); font-size:14.5px; text-wrap:pretty; }
.cb-way ul { margin:0; padding-left:18px; color:var(--muted-2); font-size:13.5px; }
.cb-way ul li { margin:3px 0; }
.cb-way .btn { align-self:flex-start; margin-top:auto; }
/* Per-card accent. Colour is carried by a modifier class, not inline style,
   so the light theme's darkened tokens follow automatically. */
.cb-way.t-free   { border-color:color-mix(in srgb, var(--accent-2) 40%, var(--line)); }
.cb-way.t-free   .cb-way-abbr, .cb-way.t-free   .cb-way-price { color:var(--accent-2); }
.cb-way.t-free   .cb-way-price { background:var(--accent2-soft); }
.cb-way.t-accent { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cb-way.t-accent .cb-way-abbr, .cb-way.t-accent .cb-way-price { color:var(--accent); }
.cb-way.t-accent .cb-way-price { background:var(--accent-soft); }
.cb-way.t-amber  { border-color:color-mix(in srgb, var(--amber) 45%, var(--line)); }
.cb-way.t-amber  .cb-way-abbr, .cb-way.t-amber  .cb-way-price { color:var(--amber); }
.cb-way.t-amber  .cb-way-price { background:var(--amber-soft); }
.cb-way.t-plain  .cb-way-abbr, .cb-way.t-plain  .cb-way-price { color:var(--prose-body); }

/* ---- forms --------------------------------------------------------------- */
.cb-form {
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow); position:relative;
}
/* Corner cross-hair — a registration mark, the same language as the stage frame. */
.cb-form::before {
  content:""; position:absolute; top:12px; right:12px; width:14px; height:14px; opacity:.5;
  background:
    linear-gradient(var(--muted-2),var(--muted-2)) 50% 0/2px 5px no-repeat,
    linear-gradient(var(--muted-2),var(--muted-2)) 50% 100%/2px 5px no-repeat,
    linear-gradient(var(--muted-2),var(--muted-2)) 0 50%/5px 2px no-repeat,
    linear-gradient(var(--muted-2),var(--muted-2)) 100% 50%/5px 2px no-repeat;
}
.cb-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:18px; margin-bottom:20px; }
.cb-field { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.cb-row .cb-field { margin-bottom:0; }
.cb-field > label, .cb-legend {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);
}
.cb-field input, .cb-field textarea {
  padding:11px 13px; background:var(--bg-1); border:1px solid var(--line);
  border-radius:10px; color:var(--ink); font-size:15px; font-family:inherit;
  width:100%; line-height:1.6;
}
.cb-field textarea { resize:vertical; min-height:120px; }
.cb-field input::placeholder, .cb-field textarea::placeholder { color:var(--muted-2); }
.cb-field input:focus-visible, .cb-field textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent);
}
.cb-field.mono input { font-family:var(--mono); }

/* Radio groups rendered as cards. The input itself stays in the DOM (visually
   hidden, not display:none) so keyboard and screen-reader users get a real
   radio group and the form still submits with JS off. */
.cb-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:12px; }
.cb-choices.wide { grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); }
.cb-chips { display:flex; gap:10px; flex-wrap:wrap; }
.cb-choice { position:relative; }
.cb-choice input {
  position:absolute; opacity:0; width:100%; height:100%; margin:0; inset:0; cursor:pointer;
}
.cb-choice > span {
  display:flex; align-items:center; gap:14px; background:var(--bg-1);
  border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  cursor:pointer; height:100%;
}
.cb-choice .abbr {
  flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
  background:var(--bg-3); border:1px solid var(--line);
  font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink);
}
.cb-choice .txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cb-choice .lbl { font-family:var(--display); font-size:16px; color:var(--ink); }
.cb-choice .hint { font-size:13px; color:var(--muted); line-height:1.35; }
.cb-choice .from {
  margin-left:auto; flex:none; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--amber); white-space:nowrap;
}
.cb-choice input:checked + span { border-color:var(--accent); background:var(--accent-soft); }
.cb-choice input:checked + span .lbl, .cb-choice input:checked + span .abbr { color:var(--accent); }
.cb-choice input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
/* pill variant (timeline, sponsorship, coffee) */
.cb-chips .cb-choice > span {
  padding:10px 16px; border-radius:11px; font-size:14.5px; font-weight:500;
  color:var(--ink); justify-content:center;
}
.cb-chips .cb-choice input:checked + span { color:var(--accent); }

.cb-actions {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; padding-top:22px;
  border-top:2px solid transparent;
  border-image:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px) 1;
}
.cb-actions .note { color:var(--muted-2); font-size:13.5px; }
.cb-note { color:var(--muted-2); font-size:13.5px; margin:10px 0 0; }

/* ---- status banners ------------------------------------------------------ */
/* Author `display:flex` beats the UA stylesheet's `[hidden]{display:none}`,
   so without this rule both "Sent"/"Received" banners render on page load,
   above the untouched forms (caught in review 2026-09-10). */
.cb-sent[hidden] { display:none; }
.cb-sent {
  background:var(--bg-2); border:1px solid var(--accent); border-radius:var(--radius);
  padding:34px 28px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.cb-sent .tag { font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2); }
.cb-sent h3 { font-family:var(--display); font-size:24px; margin:0; }
.cb-sent p { margin:0; color:var(--muted); max-width:60ch; }
.cb-error {
  border:1px solid var(--danger); background:var(--danger-soft); border-radius:var(--radius);
  padding:16px 20px; margin:0 0 18px; color:var(--prose-body); font-size:14.5px;
}

/* ---- disclosures --------------------------------------------------------- */
.cb-disclosure {
  margin:0 0 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-2); padding:0 18px;
}
.cb-disclosure > summary {
  cursor:pointer; padding:14px 4px; font-weight:600; color:var(--ink); list-style:none;
}
.cb-disclosure > summary::-webkit-details-marker { display:none; }
.cb-disclosure > summary::before { content:"▸ "; color:var(--muted-2); }
.cb-disclosure[open] > summary::before { content:"▾ "; }
.cb-disclosure > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.cb-disclosure .inner { padding:0 0 16px; }
.cb-disclosure p { color:var(--prose-body); font-size:14.5px; text-wrap:pretty; }
.cb-disclosure ul { margin:0 0 10px; padding-left:22px; color:var(--muted); font-size:14px; }
.cb-disclosure ul li { margin:5px 0; }
.cb-disclosure ul li b { color:var(--prose-body); }
.cb-disclosure .fine { color:var(--muted-2); font-size:13.5px; }
.cb-disclosure h4 {
  margin:0 0 8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber);
}

/* ---- donate strip -------------------------------------------------------- */
.cb-donate {
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; box-shadow:var(--shadow);
}
.cb-donate .copy { min-width:260px; flex:1; }
.cb-donate h2 { font-family:var(--display); margin:0 0 6px; font-size:22px; }
.cb-donate p { margin:0 0 8px; color:var(--muted); font-size:14.5px; }
.cb-donate .fine { margin:0; color:var(--muted-2); font-size:13px; }
.cb-donate .act { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ---- print --------------------------------------------------------------- */
@media print {
  .cb-jump, .cb-stage, .cb-actions, .cb-donate .act { display:none !important; }
  .cb-form, .cb-way, .cb-donate { box-shadow:none; border-color:#c8c8c8; }
  .cb-disclosure { border-color:#c8c8c8; }
  .cb-disclosure .inner { display:block !important; }
}