/* The ONE stylesheet for the bag work pages (2026-08-10, the /account
   split). /bagwork and /account share it — visual rules living in two page
   files is the same two-surfaces disease as duplicated logic, and a cached
   asset beats 20KB of inline CSS re-downloaded on every load anyway.
   Page-specific rules still live HERE, sectioned, not inline in the pages:
   one file to search, one file to edit. */
:root {
  --bg: #0a0a0a;
  --panel: #141210;
  --fg: #f5f2ea;
  --muted: #b7b1a6;
  --gold: #f0c04a;
  --gold-deep: #b8860b;
  --line: rgba(240, 192, 74, 0.28);
  --red: #e2503c;
  --green: #3fae6b;
  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;
  /* Measured height of .topbar. The fold calcs below subtract it, so if the
     topbar's padding or contents change, re-measure and update this. */
  --topbar: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(240, 192, 74, 0.12);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.brand span { color: var(--fg); }
.nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Padded so every nav item is a real touch target, not a 10px-wide word. */
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.2rem;
}
.nav a:hover { color: var(--gold); }
/* On phones the in-page jobs beat the social links, which are in the footer
   anyway: Submit and Status stay, the rest collapse. */
.nav .nav__link, .nav .nav__social { display: none; }
.nav .nav__link--key { display: inline-flex; }
/* The signed-in chip survives the phone collapse — knowing WHICH account
   you are signed in as matters more on a phone, not less, and it is the
   one nav item that carries state rather than navigation. */
.nav .nav__link--auth[hidden] { display: none; }
.nav .nav__link--auth {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  color: var(--gold);
  border: 1px solid rgba(240, 192, 74, 0.35);
  border-radius: 999px;
  padding: 0 0.7rem;
  max-width: 11rem;
}
.nav .nav__link--auth b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav .nav__link--auth:hover { border-color: var(--gold); }
@media (min-width: 620px) {
  .nav { gap: 1.5rem; }
  .nav .nav__link, .nav .nav__social { display: inline-flex; }
  .nav .nav__link--auth { max-width: none; }
}

/* Mobile menu. Below 620px the .nav__link and .nav__social items collapse,
   which left the rest of the site unreachable from here on a phone — the
   socials that survive both LEAVE the site. The burger carries everything the
   breakpoint hides. Shared by bagwork.html and account.html; behaviour lives
   in /assets/navmenu.js. */
.navmenu { position: relative; display: flex; align-items: center; }
@media (min-width: 620px) { .navmenu { display: none; } }
.navmenu__btn {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; min-height: 0; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); cursor: pointer;
}
.navmenu__btn svg { width: 1.05rem; height: 1.05rem; }
.navmenu__btn:hover, .navmenu__btn[aria-expanded="true"] { color: var(--gold); border-color: rgba(240, 192, 74, 0.45); }
.navmenu__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.navmenu__panel {
  position: absolute; top: calc(100% + 0.5rem); right: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
  min-width: 10.5rem; padding: 0.4rem;
  background: var(--panel);
  border: 1px solid rgba(240, 192, 74, 0.28);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  z-index: 20;
}
.navmenu__panel[hidden] { display: none; }
/* Overrides .nav a's 44px touch target: inside the panel the padding below
   already makes each row a comfortable target, and min-height would double it. */
.navmenu__panel a {
  min-height: 0;
  padding: 0.55rem 0.7rem; border-radius: 6px;
  font-size: 0.8rem; color: var(--fg); white-space: nowrap;
  letter-spacing: 0; text-transform: none; font-weight: 500;
}
.navmenu__panel a:hover { background: rgba(240, 192, 74, 0.1); color: var(--gold); }
.navmenu__panel a[aria-current="page"] { color: var(--gold); }

/* .eyebrow / .eyebrow .dot were removed 2026-09-12 when the Bag Work mark
   replaced the hero's text eyebrow — neither of this sheet's two pages
   (/bagwork, /account) uses the class any more. index.html and projectq.html
   still have an .eyebrow, but they carry their own styles and never load this
   file, so nothing here was serving them. */

/* First screen = hero + the "how it works" heading, ending cleanly at the
   fold; the step cards start below it. Desktop only — mobile flows naturally. */
.fold { display: flex; flex-direction: column; min-height: calc(100svh - var(--topbar)); }
.fold .bw-hero { flex: 1 1 auto; width: 100%; align-content: center; }
.fold__cue {
  text-align: center;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem);
}
.fold__cue .section__head { margin-bottom: 0; }
@media (max-width: 860px) {
  .fold { display: block; min-height: 0; }
  .fold__cue { padding-top: 1.5rem; }
}

/* Split hero: pitch left, duck right, CTAs above the fold on any screen. */
.bw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2.25rem, 4.5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 1.25rem;
}
/* The Bag Work program mark, standing where the text eyebrow used to (see the
   note in bagwork.html). Sized by HEIGHT with width auto so the intrinsic
   565x156 ratio drives the box; the width/height attrs on the img reserve the
   space before the SVG lands, so this must not shift layout on load. */
.bw-hero__mark {
  display: block;
  width: auto;
  height: clamp(44px, 5vw, 62px);
  margin-bottom: 1.5rem;
}
.bw-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  line-height: 0.98;
  margin-bottom: 1.1rem;
}
.bw-hero h1 .gold { color: var(--gold); }
.bw-hero .subhead {
  font-size: clamp(1.02rem, 1.9vw, 1.22rem);
  max-width: 48ch;
  margin: 0 0 1.4rem;
}
.bw-hero__duck {
  display: block;
  width: clamp(230px, 24vw, 330px);
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.bw-hero .cta { justify-content: flex-start; margin: 0 0 0.9rem; }
.bw-hero .microcopy { margin-top: 0.4rem; }
@media (max-width: 860px) {
  .bw-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.6rem;
    padding-top: 1.5rem;
  }
  /* Mobile fold: the pitch fills the first screen; the duck starts below
     it, so the landing view ends cleanly at the top of the image. */
  .bw-hero > div:first-child {
    min-height: calc(100svh - var(--topbar) - 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .bw-hero h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .bw-hero .subhead { margin-left: auto; margin-right: auto; }
  .bw-hero .cta { justify-content: center; }
  .bw-hero__duck { width: min(250px, 58vw); margin: 0 auto; }
}
/* short desktop viewports (laptops at 125% scaling): tighten so CTAs stay on screen */
@media (min-width: 861px) and (max-height: 800px) {
  .bw-hero { padding-top: 1.75rem; }
  .bw-hero__mark { height: clamp(38px, 3.8vw, 50px); margin-bottom: 1rem; }
  .bw-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
  .bw-hero__duck { width: clamp(200px, 20vw, 270px); }
}
.cta { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin: 1.6rem 0 0.4rem; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  border-radius: 10px;
  padding: 0.85rem 1.5rem;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--gold); color: var(--bg); }
.btn--primary:hover { background: #f7cf6a; }
.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--fg); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.section { padding: clamp(1.4rem, 2.8vw, 2.2rem) clamp(1.25rem, 4vw, 3rem); }
.section__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.section__head {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.02;
  margin-bottom: 1.1rem;
}
.section__head .gold { color: var(--gold); }
.section__sub {
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  font-style: italic;
  max-width: 46ch;
  margin: 0 auto;
}

/* creator journey map (inline SVG); step cards carry the story on mobile */
.jmap { width: 100%; max-width: 940px; margin: 1.9rem auto 0.4rem; display: block; }
.jmap .box { fill: rgba(20, 18, 16, 0.6); stroke: rgba(240, 192, 74, 0.28); }
.jmap .box--paid { fill: #f0c04a; stroke: #f0c04a; }
.jmap .t { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; fill: #f5f2ea; }
.jmap .t--paid { fill: #0a0a0a; }
.jmap .cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; fill: #b7b1a6; }
.jmap .num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; fill: #f0c04a; }
.jmap .arr { stroke: rgba(240, 192, 74, 0.55); stroke-width: 1.5; fill: none; }
.jmap .loop { stroke: rgba(226, 80, 60, 0.6); stroke-width: 1.3; stroke-dasharray: 5 4; fill: none; }
.jmap .loopcap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; fill: #e2503c; }
.copylink { color: var(--gold); }
.copylink:hover { text-decoration: underline; }

.jmap-hint { display: none; }
@media (max-width: 640px) {
  .jmap-wrap { cursor: pointer; }
  .jmap-hint {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 0.2rem;
  }
}
.jexp {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--fg);
  padding: 0;
  width: calc(100vw - 1.5rem);
  max-width: 980px;
  margin: auto;
}
.jexp::backdrop { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(3px); }
.jexp__inner { padding: 2.4rem 1rem 1.2rem; position: relative; }
.jexp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jexp__scroll svg { width: 880px; max-width: none; display: block; margin: 0; }
.jexp__close {
  position: absolute;
  top: 0.55rem; right: 0.9rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.jexp__close:hover { color: var(--gold); }
.jexp__cap {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-top: 0.6rem;
}

/* Clearance-application confirmation modal. */
.clr {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--fg);
  padding: 0;
  width: calc(100vw - 1.5rem);
  max-width: 520px;
  margin: auto;
  overflow: hidden;
}
.clr::backdrop { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(3px); }
.clr__img { display: block; width: 100%; height: auto; }
.clr__inner { padding: 1.4rem 1.6rem 1.6rem; position: relative; text-align: center; }
.clr__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.1;
}
.clr__body { color: var(--muted); font-size: 0.95rem; margin-top: 0.6rem; }
.clr__actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.clr__actions .btn { min-width: 11rem; }
.clr__close {
  position: absolute;
  top: 0.55rem; right: 0.9rem;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.4rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); /* sits over the image */
}
.clr__close:hover { color: var(--gold); }
/* CA-reply prompt: same dialog family, no hero image, so give it a top
   border instead of arriving as a bare box. */
.clr--ca { border-top: 3px solid var(--gold); }
.ca-paste {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--fg);
  background: rgba(240, 192, 74, 0.08); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.85rem 1rem; margin-top: 0.9rem;
  text-align: left; white-space: pre-wrap; word-break: break-all;
}
/* Inline twin of the modal prompt, on the apply + submit forms. Gold left
   border so it reads as "act on this", not another paragraph of rules. */
.ca-callout {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 1rem 1.2rem 1.2rem; margin: 1.1rem 0 1.4rem;
}
.ca-callout__lead { font-size: 0.92rem; color: var(--muted); }
.ca-callout__lead strong { color: var(--fg); }
.ca-callout__btn { margin-top: 0.8rem; }
@media (max-width: 480px) {
  .clr__actions { flex-direction: column; }
  .clr__actions .btn { min-width: 0; width: 100%; }
}

.verify {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 720px;
  margin: 1.75rem auto 0.25rem;
  text-align: left;
}
.verify__card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.3rem 1.35rem;
  background: rgba(20, 18, 16, 0.5);
}
/* Handles and tickers must never wrap mid-token: "@FawkQCo / in" broke
   across two lines in a step card and a tag someone can't read is a tag
   they don't use (Andrew, 2026-08-07). */
.nowrap { white-space: nowrap; }

/* §01 step list (2026-08-07). One column deliberately: these are ordered
   steps, and a 2-up grid invites reading across the rows in the wrong
   order. The number sits in its own gutter so the titles align. */
.steps { list-style: none; counter-reset: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.steps__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.5rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 1rem 1.15rem;
}
.steps__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--gold); padding-top: 0.22rem; }
.steps__title { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.35rem; color: var(--fg); }
.steps__desc { color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
.steps__desc + .steps__desc { margin-top: 0.5rem; }
/* The block shrinks to its longest row and is centred by `margin-inline:
   auto` (NOT by text-align, which the section sets and which would centre
   each row independently and stagger every tick). Inside it everything is
   left-aligned, so the five ticks form one clean column. */
.steps__check {
  list-style: none;
  margin: 0.95rem auto 1.05rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  text-align: left;
}
/* 🔴 HANGING INDENT, NOT grid/flex on the li. A grid or flex container
   turns EVERY child into an item, including each bare text run around an
   inline element — so the one row containing <span class="nowrap"> tags
   ("Tagged @FawkQCoin with $FAWKQ") exploded into five cells and wrapped
   five times, while the four plain-text rows looked perfect. The negative
   text-indent pulls the tick into the padding and leaves the row as one
   inline flow, so wrapped lines align under the text and inline spans
   stay inline. */
.steps__check li {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
  padding-left: 1.5rem;
  text-indent: -1.5rem;
}
.steps__check li::before {
  content: "✓";
  color: var(--gold);
  font-weight: 700;
  display: inline-block;
  width: 1.5rem;
  text-indent: 0;
}
@media (max-width: 520px) {
  .steps__item { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.95rem 1rem; }
  .steps__num { padding-top: 0; }
}

.verify__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--muted); display: block; margin-bottom: 0.7rem; }
.verify__title { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--fg); }
.verify__desc { color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
@media (max-width: 560px) { .verify { grid-template-columns: 1fr; } }

.rates {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  max-width: 640px;
  margin: 1.75rem auto 0.9rem;
}
.rate {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.3rem 1rem 1.2rem;
  background: rgba(20, 18, 16, 0.5);
}
.rate__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.rate__sol {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--gold);
  line-height: 1;
}
.rate__per { color: var(--muted); font-size: 0.82rem; margin-top: 0.4rem; }
@media (max-width: 560px) { .rates { grid-template-columns: 1fr; } }

.wallets { max-width: 640px; margin: 1.75rem auto 0.4rem; display: flex; flex-direction: column; gap: 0.8rem; text-align: left; }
.walletrow {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
  background: rgba(20, 18, 16, 0.5);
  font-family: var(--font-mono);
}
.walletrow__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem; }
.walletrow__addr { font-size: 0.88rem; color: var(--fg); word-break: break-all; }
.walletrow__note { font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); margin-top: 0.35rem; }
.walletrow__addr a { color: var(--gold); }
.walletrow__addr a:hover { text-decoration: underline; }

.kit {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.4rem;
  align-items: center;
  max-width: 720px;
  margin: 1.75rem auto 0.25rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  background: rgba(20, 18, 16, 0.5);
}
.kit__img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.kit__list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.8rem 0 1.1rem; }
.kit__list li { color: var(--muted); font-size: 0.95rem; line-height: 1.55; padding-left: 1rem; position: relative; }
.kit__list li::before { content: "·"; position: absolute; left: 0; color: var(--gold); }
.kit__lead { color: var(--fg); font-weight: 500; }
.kit__size { color: var(--muted); font-size: 0.82rem; margin-top: 0.6rem; }
@media (max-width: 620px) {
  .kit { grid-template-columns: 1fr; }
  .kit__img { max-width: 220px; margin: 0 auto; }
}

.rules { max-width: 620px; margin: 1.6rem auto 0; text-align: left; border-left: 3px solid var(--gold); padding: 0.4rem 0 0.4rem 1.1rem; }
.rules__lead { color: var(--fg); font-weight: 500; margin-bottom: 0.6rem; }
.rules ul { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.rules li { color: var(--muted); font-size: 0.95rem; padding-left: 1rem; position: relative; }
.rules li::before { content: "·"; position: absolute; left: 0; color: var(--gold); }
.rules li strong { color: var(--fg); font-weight: 500; }

.form[hidden] { display: none; }
.form {
  max-width: 560px;
  margin: 1.75rem auto 0;
  text-align: left;
  display: grid;
  gap: 0.9rem;
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
/* 1rem is load-bearing, not taste: mobile Safari zooms the whole viewport
   when you focus any control under 16px, and six of seven beta testers are
   phone-only. Anything smaller makes both forms jump on first tap. */
.field input, .field select, .field textarea {
  width: 100%;
  background: rgba(20, 18, 16, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 1px solid var(--gold); }
.field textarea { resize: vertical; min-height: 70px; }
/* Native arrow removed for consistency, so draw one back — without it the
   format picker reads as a dead text box, especially on iOS. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b7b1a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  padding-right: 2.4rem;
  cursor: pointer;
}
.form__msg { font-size: 0.92rem; min-height: 1.4em; }
/* Sits under an optional input to explain what earns the bonus. Muted so it
   reads as guidance, not as another thing you have to do. */
.field__hint { margin-top: 0.35rem; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.form__msg.ok { color: var(--green); }
.form__msg.err { color: var(--red); }
/* Attestations. Grouped in a bordered block so they read as one gate you
   pass rather than three more fields you fill in, and left-aligned with a
   generous tap target — the crew is phone-first and a 14px checkbox with
   text wrapped under it is how you get people ticking without reading. */
.checks { margin: 0.2rem 0 0.4rem; padding: 0.95rem 1.05rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.checks__head { font-size: 0.86rem; color: var(--muted); margin-bottom: 0.7rem; }
.check { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.42rem 0; cursor: pointer; }
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; accent-color: var(--gold); cursor: pointer; }
.check span { font-size: 0.9rem; line-height: 1.5; }
.check a { color: var(--gold); }
/* The verdict a creator has to confirm reading before submitting again.
   Gold border because it is a blocker, not a notice. */
.ack { margin: 0.9rem 0 0.2rem; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--gold); border-radius: 10px; }
.ack__head { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 0.5rem; }
.ack__quote { white-space: pre-line; font-size: 0.94rem; line-height: 1.6; margin-bottom: 0.85rem; }
.ack__btn { width: 100%; }
.ack__done { color: var(--green); font-size: 0.9rem; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.status { max-width: 640px; margin: 1.5rem auto 0; text-align: left; }
.status__lookup { display: flex; gap: 0.7rem; margin-bottom: 1.2rem; }
.status__lookup input {
  flex: 1;
  background: rgba(20, 18, 16, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem; /* see the note on .field inputs: under 16px iOS zooms */
  padding: 0.7rem 0.85rem;
}
.status__lookup input:focus { outline: 1px solid var(--gold); }
.subrow {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: rgba(20, 18, 16, 0.5);
  margin-bottom: 0.7rem;
  font-size: 0.9rem;
}
.subrow__top { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.subrow__link { font-family: var(--font-mono); font-size: 0.82rem; color: var(--fg); word-break: break-all; }
.subrow__link:hover { color: var(--gold); }
.pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
  flex: none;
}
.pill--review { color: var(--muted); border: 1px solid rgba(255,255,255,0.2); }
.pill--paid { color: var(--green); border: 1px solid rgba(63,174,107,0.5); }
.pill--needs { color: var(--gold); border: 1px solid var(--line); }
.pill--rejected { color: var(--red); border: 1px solid rgba(226,80,60,0.5); }
.pill--accepted { color: var(--fg); border: 1px solid rgba(255,255,255,0.3); }
.subrow__meta { color: var(--muted); font-size: 0.82rem; margin-top: 0.4rem; }
.subrow__feedback { color: var(--gold); font-size: 0.88rem; margin-top: 0.4rem; white-space: pre-line; }
.subrow__tx a { color: var(--green); font-family: var(--font-mono); font-size: 0.8rem; }
.subrow__tx a:hover { text-decoration: underline; }
.dash { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 0.9rem 0 0.6rem; }
.dash__stat b { font-family: var(--font-display); font-size: 1.55rem; color: var(--gold); display: block; line-height: 1; }
.dash__stat span { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.dash__links { font-size: 0.9rem; color: var(--fg); margin-bottom: 0.35rem; }
.dash__links b { color: var(--gold); font-weight: 500; }
.dash__links .off { color: var(--muted); }

/* Public payout feed: the piece and the payment, side by side. */
.feed[hidden] { display: none; }
.feed { max-width: 640px; margin: 2rem auto 0; text-align: left; }
.feed__head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.feedrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  border-bottom: 1px solid rgba(240, 192, 74, 0.12);
  padding: 0.75rem 0.2rem;
}
.feedrow:last-of-type { border-bottom: none; }
.feedrow__who { font-family: var(--font-mono); font-size: 0.92rem; color: var(--fg); }
.feedrow__what { color: var(--muted); font-size: 0.85rem; }
.feedrow__sol { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); letter-spacing: 0.02em; }
.feedrow__links { margin-left: auto; display: flex; gap: 0.9rem; white-space: nowrap; }
.feedrow__links a { font-family: var(--font-mono); font-size: 0.78rem; color: var(--green); }
.feedrow__links a.post { color: var(--muted); }
.feedrow__links a:hover { text-decoration: underline; }
.feedrow__links span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); opacity: 0.7; }
.feed__note { color: var(--muted); font-style: italic; font-size: 0.85rem; margin-top: 1rem; }
@media (max-width: 560px) {
  /* Links drop to their own line and become real touch targets — the
     receipt is the whole point of this section, it has to be tappable. */
  .feedrow__links { margin-left: 0; width: 100%; gap: 1.4rem; }
  .feedrow__links a, .feedrow__links span { display: inline-flex; align-items: center; min-height: 44px; }
}

.stats[hidden] { display: none; }
.stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin: 1.6rem auto 0.4rem;
  font-family: var(--font-mono);
}
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--gold); line-height: 1; }
.stat__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; }

.pool[hidden] { display: none; }
.pool { max-width: 640px; margin: 1.6rem auto 0; text-align: left; }
.pool__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.pool__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pool__label span { text-transform: none; letter-spacing: 0; margin-left: 0.5em; }
.pool__nums { font-family: var(--font-mono); font-size: 0.85rem; color: var(--fg); }
.pool__track { height: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.pool__fill { height: 100%; width: 0%; background: var(--gold); border-radius: 4px; transition: width 0.4s ease; }
.pool__notice { margin-top: 0.7rem; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.pool__notice[hidden] { display: none; }
.pool__notice--low { color: var(--gold); }

.microcopy { margin-top: 1.4rem; color: var(--muted); font-style: italic; font-size: 0.9rem; }
/* A ghost ban is invisible from the affected account, so a creator can make
   something good, submit it, and never understand why it didn't pay. This
   has to be impossible to scroll past. Gold not red: it's a condition to
   check before posting, not an error state. */
.notice { margin: 1.6rem 0; padding: 1.1rem 1.2rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; }
.notice__head { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 0.55rem; }
.notice p { font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin-bottom: 0.6rem; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--fg); }
/* Top-of-page pause strip (2026-08-05). Deliberately louder than .notice:
   it is the first thing on the page and its whole job is to be read before
   the hero's "Get cleared" button is. */
.pausebar {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.85rem;
  margin: 1rem clamp(1.25rem, 4vw, 3rem) 0;
  padding: 0.85rem 1.1rem;
  background: rgba(240, 192, 74, 0.07);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pausebar__tag {
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.12em;
  color: var(--bg); background: var(--gold);
  padding: 0.16rem 0.5rem; border-radius: 4px; white-space: nowrap;
}
.pausebar p { flex: 1 1 18rem; font-size: 0.95rem; line-height: 1.55; color: var(--fg); margin: 0; }

/* Creator sign-in (v2, 2026-08-03). */
.auth { margin: 1.6rem 0; }
.auth__lead { font-size: 0.95rem; line-height: 1.65; color: var(--muted); margin-bottom: 1rem; }
.auth__lead strong { color: var(--gold); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 0.9rem; text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--gold); }
.verified { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.9rem; }
.verified::before { content: "✓"; color: var(--gold); font-weight: 700; }
.acct { margin-top: 1.2rem; }
.acct__row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.8rem; margin-bottom: 1.2rem; }
.acct__stat { min-width: 7rem; }
.acct__stat b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--gold); letter-spacing: 0.03em; }
.acct__stat span { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
/* `pre-line` is load-bearing here for the same reason it is on .subrow__feedback:
   reasons are typed into a textarea and newlines must survive to the reader. */
.acct__note { white-space: pre-line; font-size: 0.92rem; line-height: 1.6; }
.acct__private { margin: 1rem 0; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; }
.acct__private .acct__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 0.5rem; }
.acct__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.acct__item { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.acct__item a { color: var(--fg); word-break: break-all; }
.acct__meta { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }
.auth-diag-wrap[hidden] { display: none; }
.auth-diag__label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.auth-diag { margin-top: 1rem; padding: 0.8rem 0.9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 0.78rem; line-height: 1.5; color: var(--muted); white-space: pre-wrap; word-break: break-word; text-align: left; }

.faq { max-width: 720px; margin: 1.75rem auto 0; text-align: left; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0.2rem;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--fg);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { color: var(--gold); }
.faq__answer { padding: 0 0.2rem 1.25rem; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }

/* Feedback widget: a floating speech bubble, a small dialog. Same family
   as the other dialogs on this page.
   The tail is two stacked triangles (a border-coloured one behind a
   panel-coloured one, offset by 1px) so the 1px border appears to wrap the
   whole bubble. Cheaper and sharper than a clip-path, and it keeps the
   button a plain rounded rect for hit-testing. */
.fbw-open {
  position: fixed;
  right: 1.15rem;
  bottom: 1.35rem;
  z-index: 60;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fbw-open::before,
.fbw-open::after {
  content: "";
  position: absolute;
  right: 1.35rem;
  width: 0;
  height: 0;
  border-style: solid;
}
/* Border layer. */
.fbw-open::before {
  bottom: -10px;
  border-width: 10px 10px 0 0;
  border-color: var(--line) transparent transparent transparent;
}
/* Fill layer, 1px up so the layer behind shows as an edge. */
.fbw-open::after {
  bottom: -9px;
  border-width: 9px 9px 0 0;
  border-color: var(--panel) transparent transparent transparent;
}
.fbw-open:hover { border-color: var(--gold); color: var(--gold); }
.fbw-open:hover::before { border-top-color: var(--gold); }
/* The three dots inside the bubble. */
.fbw-open__dots { display: flex; gap: 3px; }
.fbw-open__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  display: block;
}
.fbw {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--fg);
  padding: 0;
  width: calc(100vw - 1.5rem);
  max-width: 480px;
  margin: auto;
}
.fbw::backdrop { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(3px); }
.fbw__inner { padding: 1.4rem 1.5rem 1.5rem; position: relative; }
.fbw__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.fbw__sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }
.fbw__close {
  position: absolute;
  top: 0.55rem; right: 0.9rem;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.4rem;
}
.fbw__close:hover { color: var(--gold); }
.fbw .btn { width: 100%; margin-top: 0.4rem; }
.fbw__msg { margin-top: 0.7rem; font-size: 0.9rem; min-height: 1.3em; }
.fbw__msg.ok { color: var(--gold); }
.fbw__msg.err { color: #e2604a; }

.footer {
  background: #060606;
  border-top: 1px solid rgba(240, 192, 74, 0.12);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  margin-top: 2rem;
}
.footer__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.footer__brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 1.4rem; }
.footer__brand span { color: var(--fg); }
.footer__risk { color: var(--muted); font-size: 0.82rem; line-height: 1.6; max-width: 620px; margin: 0 auto 0.9rem; opacity: 0.82; }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.5rem 0 1.1rem;
}
.footer__links a { color: var(--gold); }
.footer__links a:hover { text-decoration: underline; }
.footer__sign { font-style: italic; color: var(--muted); font-size: 0.85rem; }

/* ── The reply channel (0020, task 79) — the /account thread ──────────────
   One thread per creator: their messages right, ours left. white-space
   pre-line for the same reason as .acct__note — a textarea invites Enter,
   and collapsing newlines is silent loss in a new costume. */
.msgs { margin: 1.4rem 0 0; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.msgs__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 0.6rem; }
.msgs__thread { display: flex; flex-direction: column; gap: 0.55rem; max-height: 22rem; overflow-y: auto; }
.msgs__empty { color: var(--muted); font-size: 0.9rem; margin: 0; }
.msg { max-width: 88%; padding: 0.55rem 0.8rem; border-radius: 10px; font-size: 0.92rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.msg--admin { align-self: flex-start; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.msg--creator { align-self: flex-end; background: rgba(240, 192, 74, 0.08); border: 1px solid rgba(240, 192, 74, 0.4); }
.msg__when { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.3rem; }
.msgs__form { display: flex; gap: 0.6rem; align-items: flex-end; margin-top: 0.9rem; }
.msgs__form .field { flex: 1; margin: 0; }
.msgs__form textarea { min-height: 3rem; }
/* Visually hidden, present for screen readers — the send box's label. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ≥44px tap target under 640px, same rule as the admin mobile pass. */
@media (max-width: 640px) { .msgs__form .btn { min-height: 44px; } }