/* assets/bje-clip-economy.css
   Shared styling for the two clip-economy front ends:
     /campaigns/  — the clipping-campaign marketplace (brands + clippers)
     /store/      — creator storefronts

   Kept as a real stylesheet rather than duplicated <style> blocks because the
   two pages are one product with two faces and their honesty components (the
   money-warning banner, the verification badges, the empty states) must look
   identical everywhere. A visual difference between "accrued" on one page and
   "accrued" on the other reads as two different things to a user, and here
   they are the same thing: money we owe and have not sent.

   ⚠ NO PRICE LITERALS IN THIS FILE. ops/qa/full_gate.py's PRICE_CANON detector
   only reads .html, but a `content: "$99"` in CSS would still be a fabricated
   price on a live page. Money is rendered from real API cents by app.js. */

:root {
  --bg:        #050506;
  --bg1:       #0a0a0c;
  --bg2:       #111116;
  --bg3:       #18181f;
  --gold:      #c9a84c;
  --gold-lt:   #e8c97a;
  --gold-dim:  rgba(201,168,76,.12);
  --border:    rgba(255,255,255,.08);
  --border-g:  rgba(201,168,76,.22);
  --text:      #f0ebe0;
  --text-dim:  #9a9490;
  --text-mute: #5c5850;
  --green:     #52c97a;
  --amber:     #e8a83c;
  --red:       #e05252;
  --blue:      #5c9ce0;
  --font:      'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:     'Cormorant Garamond',serif;
  --radius:    10px;
  --radius-lg: 16px;
  --trans:     .18s ease;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { overflow-x: hidden; scroll-behavior: smooth; background: var(--bg) }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 }
a { color: var(--gold); text-decoration: none }
a:hover { text-decoration: underline }
img { max-width: 100%; display: block }

/* ── a11y ── */
.skip-link {
  position: absolute; top: -40px; left: 16px;
  background: var(--gold); color: #050506;
  font-size: .8rem; font-weight: 700; padding: 8px 14px;
  border-radius: 6px; transition: top .2s; z-index: 9999;
}
.skip-link:focus { top: 8px }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px }
.narrow { max-width: 760px }

/* ── typography ── */
h1,h2,h3 { font-weight: 400; line-height: 1.18; letter-spacing: -.01em }
h1 { font-family: var(--serif); font-size: clamp(2.1rem,5.4vw,3.5rem) }
h2 { font-family: var(--serif); font-size: clamp(1.5rem,3.2vw,2.1rem); margin-bottom: 8px }
h3 { font-size: 1.05rem; font-weight: 600 }
p  { color: var(--text-dim) }
.lede { font-size: clamp(.98rem,1.9vw,1.12rem); color: var(--text-dim); max-width: 62ch }

/* ── hero ── */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(64px,9vh,104px) 24px clamp(48px,6vh,72px);
  border-bottom: 1px solid var(--border);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 65% at 50% -5%, rgba(201,168,76,.09), transparent 68%);
}
.hero > * { position: relative }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .64rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--border-g); border-radius: 999px;
  padding: 7px 15px; margin-bottom: 20px; background: var(--gold-dim);
}

/* ── the honesty banner ──
   This is the single most load-bearing component on both pages. It says, in
   the user's first screenful, that no money is sent from here. It is not
   decoration: the backends accrue and never pay, and a creator or clipper who
   reads a balance without reading this would be misled by a true number. */
.honest-bar {
  border: 1px solid rgba(232,168,60,.34);
  background: rgba(232,168,60,.07);
  border-radius: var(--radius);
  padding: 15px 18px;
  margin: 22px auto 0;
  max-width: 720px;
  text-align: left;
  font-size: .85rem;
  color: var(--text-dim);
  line-height: 1.62;
}
.honest-bar strong { color: var(--amber); font-weight: 600 }
.honest-bar + .honest-bar { margin-top: 12px }

/* ── sections ── */
section { padding: clamp(44px,6vh,68px) 0 }
section + section { border-top: 1px solid var(--border) }
.section-head { margin-bottom: 26px }

/* ── audience switch (clipper / brand) ── */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px }
.tab {
  min-height: 44px; padding: 10px 20px;
  background: var(--bg2); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font); font-size: .85rem; font-weight: 500;
  cursor: pointer; transition: var(--trans);
  display: inline-flex; align-items: center;
}
.tab:hover { border-color: var(--border-g); color: var(--text) }
.tab[aria-selected="true"] {
  background: var(--gold-dim); border-color: var(--gold); color: var(--gold-lt);
}
.panel[hidden] { display: none }

/* ── cards ── */
.card {
  background: var(--bg1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
}
.card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.card-title { font-size: 1.08rem; font-weight: 600; color: var(--text) }
.card-sub { font-size: .78rem; color: var(--text-mute) }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)) }

/* ── metric rows ── */
.metrics {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); overflow: hidden;
}
.metric { background: var(--bg2); padding: 13px 15px }
.metric-label {
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 5px;
}
.metric-val { font-size: 1.16rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums }
.metric-val.gold { color: var(--gold-lt) }
.metric-note { font-size: .68rem; color: var(--text-mute); margin-top: 4px; line-height: 1.4 }

/* ── badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 5px;
  border: 1px solid currentColor; white-space: nowrap;
}
.badge-ok      { color: var(--green) }
.badge-pending { color: var(--amber) }
.badge-off     { color: var(--text-mute) }
.badge-bad     { color: var(--red) }
.badge-info    { color: var(--blue) }

/* ── verification strip: shown on every submission, always ── */
.verify-strip {
  border: 1px dashed var(--border-g); border-radius: 8px;
  padding: 10px 12px; margin-top: 10px;
  font-size: .74rem; color: var(--text-dim); line-height: 1.5;
}
.verify-strip .vkey { color: var(--text-mute); text-transform: uppercase; letter-spacing: .1em; font-size: .6rem }

/* ── forms ── */
.field { margin-bottom: 15px }
.field label {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
}
.field .hint { font-size: .72rem; color: var(--text-mute); margin-top: 5px; line-height: 1.5 }
input[type=text], input[type=url], input[type=email], input[type=number],
input[type=date], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 13px;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font); font-size: .92rem; font-weight: 300;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.55 }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold) }
.row2 { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)) }
fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px }
legend {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); padding: 0 6px;
}
.checkline { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: .88rem; color: var(--text-dim) }
.checkline input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--gold) }

/* ── buttons: 44px minimum, 48px for primary. Not gate-enforced; project standard. ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 11px 20px;
  border-radius: 8px; border: 1px solid var(--border-g);
  background: var(--bg2); color: var(--text);
  font-family: var(--font); font-size: .87rem; font-weight: 500;
  cursor: pointer; transition: var(--trans); text-align: center;
}
.btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-lt); text-decoration: none }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn-primary {
  min-height: 48px; background: var(--gold); border-color: var(--gold);
  color: #050506; font-weight: 700;
}
.btn-primary:hover:not(:disabled) { background: var(--gold-lt); color: #050506 }
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: .8rem }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px }

/* ── status / error output ──
   role="status" nodes. Errors here are REAL API error strings, never a
   generic "something went wrong" — the whole point is that the user sees the
   server's actual verdict. */
.status { font-size: .85rem; margin-top: 12px; line-height: 1.55; min-height: 1.2em }
.status.err { color: var(--red) }
.status.ok  { color: var(--green) }
.status.info{ color: var(--text-dim) }
.status pre {
  white-space: pre-wrap; word-break: break-word; font-size: .76rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 11px; margin-top: 7px; color: var(--text-dim);
}

/* ── empty states: an empty marketplace that says so ── */
.empty {
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  padding: 34px 22px; text-align: center; color: var(--text-mute);
  font-size: .9rem; line-height: 1.6;
}
.empty strong { display: block; color: var(--text-dim); font-weight: 600; margin-bottom: 6px }

/* ── key reveal box (shown exactly once, like the API says) ── */
.keybox {
  border: 1px solid var(--red); background: rgba(224,82,82,.06);
  border-radius: 8px; padding: 13px 15px; margin-top: 12px;
}
.keybox code {
  display: block; word-break: break-all; font-size: .8rem; color: var(--gold-lt);
  background: var(--bg); padding: 9px 11px; border-radius: 6px; margin: 8px 0;
}
.keybox p { font-size: .78rem; color: var(--text-dim); margin: 0 }

/* ── tables (ledger / sales) ── */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius) }
table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 560px }
th, td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--border) }
th {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600; background: var(--bg2);
}
td { color: var(--text-dim) }
td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text) }
tr:last-child td { border-bottom: none }

/* ── fee disclosure block: both sides see this before committing ── */
.fee-box {
  border: 1px solid var(--border-g); background: var(--gold-dim);
  border-radius: 8px; padding: 13px 15px; margin-top: 12px; font-size: .82rem;
}
.fee-box dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; margin-bottom: 8px }
.fee-box dt { color: var(--text-dim) }
.fee-box dd { color: var(--text); font-variant-numeric: tabular-nums; text-align: right }
.fee-box .fee-note { font-size: .73rem; color: var(--text-mute); line-height: 1.5 }

/* ── "what does not work" grid ── */
.truth { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) }
.truth-col { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--bg1) }
.truth-col h3 { margin-bottom: 12px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase }
.truth-col.live h3 { color: var(--green) }
.truth-col.not  h3 { color: var(--amber) }
.truth-col ul { list-style: none }
.truth-col li { font-size: .84rem; color: var(--text-dim); padding: 6px 0 6px 20px; position: relative; line-height: 1.5 }
.truth-col.live li::before { content: '✓'; position: absolute; left: 0; color: var(--green) }
.truth-col.not  li::before { content: '×'; position: absolute; left: 0; color: var(--amber) }

/* ── misc ── */
.mono { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .8rem }
.muted { color: var(--text-mute); font-size: .78rem; line-height: 1.55 }
.stack > * + * { margin-top: 14px }
.pill-list { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px }
.pill {
  font-size: .68rem; padding: 3px 9px; border-radius: 999px;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim);
}
hr.rule { border: none; border-top: 1px solid var(--border); margin: 22px 0 }

@media (max-width: 640px) {
  .container { padding: 0 18px }
  .card { padding: 16px }
}