/* HALO — the two surfaces that face outward.
 *
 * The console is the bench: dense, ruled, keyboard-first, built for an operator
 * who will be at it for four hours. This is the opposite posture on the same
 * materials. A creator opens it once, on a phone, probably standing up, to
 * answer one question — what do I do next, and what will I be paid. So: one
 * column, one action visible at a time, generous type, and money set large
 * enough to read at arm's length.
 *
 * The palette is the console's, unchanged. Same ink ground, same sodium, same
 * three semantic colours that mean pass, fail and waiting and never anything
 * else. A creator and an operator looking at the same submission should be
 * looking at the same object.
 */

:root{
  --ink:#0B0B0C;
  --bone:#F2F1EC;
  --sodium:#E4A548;
  --filament:#83827A;

  --bench:#0E0E10;
  --panel:#131316;
  --raised:#1A1A1F;
  --sunk:#0A0A0C;

  --ok:#6FA98A;
  --no:#C95F52;
  --wait:#7E8CA0;

  --line:rgba(242,241,236,.13);
  --hair:rgba(242,241,236,.06);
  --glow:rgba(228,165,72,.14);

  --arch:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --plex:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;

  --pad:20px;
  --round:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bench);color:var(--bone);
  font-family:var(--arch);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:64px;
}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sodium);outline-offset:2px}
::selection{background:var(--sodium);color:var(--ink)}
a{color:var(--sodium)}

.wrap{max-width:560px;margin:0 auto;padding:0 var(--pad)}
.wide{max-width:1080px}

/* ── Type ────────────────────────────────────────────────────────────────── */

.mono{font-family:var(--plex)}
.num{font-family:var(--plex);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lbl{
  font-family:var(--plex);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--filament);display:block;margin-bottom:6px;
}
h1{font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:19px;line-height:1.25;letter-spacing:-.01em;margin:0 0 10px}
h3{font-size:15px;margin:0 0 8px}
p{margin:0 0 12px}
.mut{color:var(--filament)}
.small{font-size:13px}
.tiny{font-size:12px}

/* ── The masthead ────────────────────────────────────────────────────────── */

.top{
  border-bottom:1px solid var(--line);background:var(--sunk);
  padding:14px 0;margin-bottom:22px;position:sticky;top:0;z-index:5;
}
.top .wrap{display:flex;align-items:center;gap:12px}
.mark{
  font-family:var(--plex);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bone);
}
.mark b{color:var(--sodium);font-weight:400}
.who{margin-left:auto;font-size:12px;color:var(--filament);font-family:var(--plex)}

/* ── Panels ──────────────────────────────────────────────────────────────── */

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--round);
  padding:18px;margin-bottom:16px;
}
.card.lit{border-color:rgba(228,165,72,.4);box-shadow:0 0 0 1px rgba(228,165,72,.1), 0 18px 40px -28px var(--sodium)}
.card.bad{border-color:rgba(194,86,74,.45)}
.card.good{border-color:rgba(111,169,138,.4)}
.card > :last-child{margin-bottom:0}
.rule{height:1px;background:var(--hair);margin:16px -18px}

/* ── The money figure ────────────────────────────────────────────────────── */

.figure{
  font-family:var(--plex);font-variant-numeric:tabular-nums;
  font-size:44px;line-height:1;letter-spacing:-.04em;color:var(--bone);
  display:block;margin:2px 0 4px;
}
.figure.sm{font-size:30px}
.figure.sodium{color:var(--sodium)}
.under{font-size:13px;color:var(--filament)}

/* A provisional number is never allowed to look settled. */
.provisional{
  position:relative;color:var(--wait);
  background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(126,140,160,.10) 6px 12px);
  padding:2px 8px;border-radius:6px;
}

/* ── Meters ──────────────────────────────────────────────────────────────── */

.meter{height:10px;border-radius:6px;background:var(--sunk);border:1px solid var(--hair);overflow:hidden;display:flex}
.meter i{display:block;height:100%}
.meter .settled{background:var(--sodium)}
.meter .held{background:rgba(228,165,72,.35)}
.meter .pending{background:repeating-linear-gradient(-45deg,rgba(126,140,160,.5) 0 4px,transparent 4px 8px)}
.key{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:10px;font-size:12px;color:var(--filament)}
.key span{display:flex;align-items:center;gap:6px}
.key i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ── Chips ───────────────────────────────────────────────────────────────── */

.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--plex);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--filament);
}
.chip.ok{color:var(--ok);border-color:rgba(111,169,138,.4)}
.chip.no{color:var(--no);border-color:rgba(194,86,74,.45)}
.chip.wait{color:var(--wait);border-color:rgba(126,140,160,.4)}
.chip.sod{color:var(--sodium);border-color:rgba(228,165,72,.45)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ── The gate list ───────────────────────────────────────────────────────── */

.gates{list-style:none;margin:0;padding:0;counter-reset:g}
.gates li{
  display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--hair);
  align-items:flex-start;
}
.gates li:first-child{border-top:0}
.gates b{
  counter-increment:g;flex:none;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--plex);font-size:11px;font-weight:400;color:var(--filament);
}
.gates li.hit b{border-color:var(--no);color:var(--no)}
.gates li.hit{color:var(--bone)}
.gates b::before{content:counter(g)}

/* ── Forms ───────────────────────────────────────────────────────────────── */

label.f{display:block;margin-bottom:14px}
input[type=text],input[type=url],input[type=number],input[type=email],input[type=tel],textarea,select{
  width:100%;background:var(--sunk);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;color:var(--bone);font-size:16px;
}
input:focus,textarea:focus{border-color:var(--sodium);outline:none}
textarea{min-height:84px;resize:vertical;font-family:var(--plex);font-size:14px}
.hint{font-size:12px;color:var(--filament);margin-top:6px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:15px 18px;border-radius:12px;border:1px solid var(--sodium);
  background:var(--sodium);color:var(--ink);font-weight:600;font-size:16px;
  cursor:pointer;text-decoration:none;
}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line);font-weight:400}
.btn + .btn{margin-top:10px}

/* ── Notices ─────────────────────────────────────────────────────────────── */

.note{
  border-left:2px solid var(--line);padding:2px 0 2px 14px;margin:14px 0;
  font-size:14px;color:var(--filament);
}
.note.sod{border-color:var(--sodium);color:var(--bone)}
.note.no{border-color:var(--no);color:var(--bone)}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:40;
  background:var(--raised);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;font-size:14px;max-width:520px;box-shadow:0 20px 50px -20px #000;
}
.toast.bad{border-color:var(--no)}

/* ── The recording code ──────────────────────────────────────────────────── */

.code{
  font-family:var(--plex);font-size:34px;letter-spacing:.22em;color:var(--sodium);
  background:var(--sunk);border:1px dashed rgba(228,165,72,.45);border-radius:12px;
  padding:16px;text-align:center;margin:10px 0;
}

/* ── The capture flow ────────────────────────────────────────────────────── */
/*
 * The code and the file picker are the two controls the payment rests on, so
 * they are given the weight. Everything on this screen is thumb-sized: the
 * creator is standing up, holding a phone, halfway through a protocol.
 */

.note.good{border-color:var(--sodium);color:var(--bone)}

.steps{margin:12px 0 4px;padding-left:20px;font-size:14px;color:var(--filament)}
.steps li{margin-bottom:7px;line-height:1.45}
.steps li::marker{color:var(--sodium);font-family:var(--plex);font-size:12px}

.urgent{color:var(--sodium)}

/* A file input is the least persuasive control in HTML and this one is asking
   for the most important artefact in the system, so it is dressed as a target
   rather than left as a grey button with a filename beside it. */
input[type=file]{
  width:100%;background:var(--sunk);border:1px dashed var(--line);border-radius:12px;
  padding:18px 14px;color:var(--filament);font-size:14px;cursor:pointer;
}
input[type=file]:hover{border-color:var(--sodium)}
input[type=file]::file-selector-button{
  background:var(--raised);border:1px solid var(--line);border-radius:9px;
  padding:10px 14px;color:var(--bone);font-size:14px;margin-right:12px;cursor:pointer;
}

/* ── Message threads ────────────────────────────────────────────────────── */
/* Deliberately not a chat bubble UI. This is a short, occasional, consequential
   exchange between two people who are not friends — a record more than a
   conversation — and styling it like a messenger would set the wrong
   expectation about how fast a reply comes. */
.thread{display:flex;flex-direction:column;gap:2px;margin:12px 0 4px}
.msg{background:var(--sunk);border:1px solid var(--hair);border-radius:10px;padding:12px 14px}
.msg.mine{border-color:rgba(228,165,72,.28)}
.mhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px}

/* ── Picking a post ─────────────────────────────────────────────────────── */
/* A row is a whole tap target. The creator is choosing which of their own posts
   this campaign is paying for, on a phone, and a small link inside a row is how
   somebody submits the wrong one. */
.postrow{
  display:flex;width:100%;text-align:left;gap:14px;align-items:center;justify-content:space-between;
  background:var(--sunk);border:1px solid var(--line);border-radius:11px;
  padding:14px;margin-bottom:9px;cursor:pointer;font-family:inherit;color:var(--bone);
}
.postrow:hover{border-color:var(--sodium)}
.pmeta{min-width:0}
.pmeta .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── The notification feed ──────────────────────────────────────────────── */
.feedrow{padding:13px 0;border-bottom:1px solid var(--hair)}
.feedrow:last-child{border-bottom:0}
.frow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.frow .figure{font-size:15px}

/* ── The five credit states ──────────────────────────────────────────────── */
/*
 * The two provisional states are visually demoted — lighter weight, hatched
 * ground, muted figure — because the single most damaging thing this product
 * could do is let a creator read an unsettled number as settled money. This is
 * not decoration; it is the Meta Reels lesson expressed in CSS.
 */
.states{display:flex;flex-direction:column;gap:2px;margin:14px 0 4px}
.state{
  background:var(--sunk);border:1px solid var(--hair);padding:13px 15px;
}
.state:first-child{border-radius:10px 10px 0 0}
.state:last-child{border-radius:0 0 10px 10px}
.state.prov{
  background:repeating-linear-gradient(-45deg,rgba(126,140,160,.07) 0 6px,transparent 6px 12px);
}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:4px}
.figure.prov{color:var(--filament);font-weight:400}
.state.has .figure:not(.prov){color:var(--sodium)}

.row-link{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;
}
.row-link:last-of-type{border-bottom:0}
a.row-link:hover .figure{color:var(--sodium)}

.rej{padding:11px 0;border-bottom:1px solid var(--hair)}
.rej:last-child{border-bottom:0}

/* ── Niche chips ─────────────────────────────────────────────────────────── */
/* Tappable, obviously selectable, and sized for a thumb. A creator picks these
   standing up, on a phone, having never seen HALO before. */
.niches{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.niche{
  font-family:inherit;font-size:14px;padding:10px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--filament);
}
.niche:hover{border-color:var(--sodium);color:var(--bone)}
.niche.on{border-color:var(--sodium);background:var(--sodium);color:var(--ink);font-weight:600}

/* ── Operator tabs ───────────────────────────────────────────────────────── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.tab{
  display:inline-flex;align-items:center;padding:10px 15px;border-radius:10px;
  border:1px solid var(--line);background:transparent;color:var(--filament);
  font-size:14px;font-family:inherit;cursor:pointer;text-decoration:none;
}
.tab:hover{border-color:var(--sodium);color:var(--bone)}
.tab.on{border-color:var(--sodium);color:var(--sodium);background:rgba(228,165,72,.08)}

.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){ .grid.three{grid-template-columns:1fr} }
.note.good{border-color:var(--ok);color:var(--bone)}
.wrap.wide{max-width:960px}

/* ── A checkbox that is actually tappable ────────────────────────────────── */
label.check{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:13px;
  font-size:14px;color:var(--bone);
}
label.check input{width:24px;height:24px;flex:0 0 auto;margin:0;accent-color:var(--sodium)}
label.check:hover{border-color:var(--sodium)}

.card.good{border-color:rgba(111,169,138,.4)}

/* ── The upload in flight ────────────────────────────────────────────────── */

.upbox{
  background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:14px;
}
.uprow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.uprow .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upbox .meter{height:8px}
.upbox .tiny{margin-top:8px}

/* ── The link box ────────────────────────────────────────────────────────── */
/*
 * A credential, shown as something a person can actually get hold of. It reads
 * as a display panel and behaves as a text field, because the two things an
 * operator does with it are look at it and copy it, and the anchor this
 * replaced was bad at both.
 */
.linkbox{
  display:block;width:100%;resize:vertical;
  background:var(--sunk);border:1px solid var(--line);border-radius:10px;
  padding:12px;font-family:var(--plex);font-size:12px;line-height:1.5;
  color:var(--sodium);word-break:break-all;cursor:text;
}
.linkbox:focus{border-color:var(--sodium);outline:none}
.linkbox::selection{background:rgba(228,165,72,.3)}

/* ── Tables (filmmaker) ──────────────────────────────────────────────────── */

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{
  text-align:left;font-family:var(--plex);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--filament);font-weight:400;
  padding:0 18px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:11px 18px 11px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
/* Figures are right-aligned and tabular so a column of money reads as a column
   of money. The gap stays on the left so the heading can never touch its
   neighbour, which is what a zeroed right padding did. */
.tbl td.n{font-family:var(--plex);font-variant-numeric:tabular-nums;text-align:right;padding-left:18px}
.tbl th.n{text-align:right;padding-left:18px}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.grid{display:grid;gap:16px}
@media (min-width:760px){
  .grid.three{grid-template-columns:repeat(3,1fr)}
  .grid.two{grid-template-columns:repeat(2,1fr)}
}

.stack{display:flex;flex-direction:column;gap:2px}
.row{display:flex;align-items:center;gap:10px}
.spring{flex:1}

/* The skeleton state, so a slow network never shows an empty page. */
.loading{padding:60px 0;text-align:center;color:var(--filament);font-family:var(--plex);font-size:13px}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION, PROFILES AND BROWSE — 2 Sep 2026
   
   Added when the product stopped being one screen per audience. Until now each
   surface was a single scrolling column, which was honest when there was only
   one thing to look at and became the reason the whole thing read as thin the
   moment there were four.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The bar ─────────────────────────────────────────────────────────────── */
/* Sticky, because on a phone the way back is the thing you want most and
   scrolling to the top to find it is the oldest bad pattern there is. */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(14,14,16,.86);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1080px;margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:22px;height:58px;
}
.nav .mark{flex:none;text-decoration:none}
.nav-links{display:flex;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none;flex:1}
.nav-links::-webkit-scrollbar{display:none}
.nav a.tab{
  position:relative;padding:8px 13px;border-radius:9px;text-decoration:none;white-space:nowrap;
  color:var(--filament);font-size:14px;font-weight:500;transition:color .14s,background .14s;
}
.nav a.tab:hover{color:var(--bone);background:rgba(242,241,236,.05)}
.nav a.tab.on{color:var(--ink);background:var(--sodium);font-weight:600}
.nav .count{
  display:inline-block;min-width:18px;padding:1px 5px;margin-left:6px;border-radius:9px;
  background:var(--sodium);color:var(--ink);font:600 11px/1.5 var(--plex);text-align:center;
}
.nav a.tab.on .count{background:rgba(11,11,12,.28);color:var(--ink)}
.nav-me{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none;color:var(--filament);font-size:13px}
.nav-me:hover{color:var(--bone)}

/* ── Avatars ─────────────────────────────────────────────────────────────── */
/* A monogram when there is no image, coloured from the handle so the same
   person is the same colour everywhere. Better than a grey silhouette, which
   makes an empty marketplace look abandoned rather than new. */
.av{
  width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--raised);border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  font:600 15px/1 var(--arch);color:var(--ink);overflow:hidden;
}
.av.sm{width:30px;height:30px;font-size:12px}
.av.lg{width:84px;height:84px;font-size:30px;border-width:2px}
.av.xl{width:112px;height:112px;font-size:40px;border-width:2px}
.av img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Page furniture ──────────────────────────────────────────────────────── */
.page-head{margin:26px 0 20px}
.page-head h1{font-size:27px;letter-spacing:-.025em;margin:0 0 5px}
.page-head p{color:var(--filament);font-size:14px;margin:0;max-width:62ch}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--round);overflow:hidden}
.stat{background:var(--panel);padding:15px 16px}
.stat .k{font-family:var(--plex);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--filament);display:block;margin-bottom:7px}
.stat .v{font-family:var(--plex);font-size:23px;letter-spacing:-.03em;display:block;line-height:1}
.stat .v.gold{color:var(--sodium)}
.stat .v.dim{color:var(--filament)}
.stat .n{font-size:11.5px;color:var(--filament);margin-top:6px;display:block;line-height:1.35}

/* ── Creator cards, in a grid ────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:14px}
.ccard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--round);
  padding:17px;display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s;
}
.ccard:hover{border-color:rgba(228,165,72,.42);transform:translateY(-2px);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.9)}
.ccard-top{display:flex;gap:12px;align-items:center}
.ccard h3{margin:0;font-size:15.5px;letter-spacing:-.01em}
.ccard .sub{font-size:12px;color:var(--filament);margin-top:2px}
.ccard .bio{font-size:13px;color:var(--filament);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard-stats{display:flex;gap:16px;border-top:1px solid var(--hair);padding-top:11px;margin-top:auto}
.ccard-stats div{font-family:var(--plex);font-size:13px}
.ccard-stats span{display:block;font-family:var(--arch);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--filament);margin-bottom:3px}

/* ── Tags ────────────────────────────────────────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font-size:11.5px;padding:4px 10px;border-radius:99px;
  background:rgba(242,241,236,.06);border:1px solid var(--line);color:var(--bone);
}
.tag.gold{background:rgba(228,165,72,.14);border-color:rgba(228,165,72,.4);color:var(--sodium)}
.tag.ok{background:rgba(111,169,138,.13);border-color:rgba(111,169,138,.36);color:var(--ok)}
.tag.wait{background:rgba(126,140,160,.13);border-color:rgba(126,140,160,.36);color:var(--wait)}

/* ── Filters ─────────────────────────────────────────────────────────────── */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filters .fld{width:auto;min-width:140px;padding:9px 12px;font-size:14px}
.filters .fld.grow{flex:1;min-width:200px}

/* ── The profile header ──────────────────────────────────────────────────── */
.phead{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.phead .who h1{margin:0 0 4px;font-size:25px;letter-spacing:-.025em}
.phead .who .handle{font-family:var(--plex);font-size:14px;color:var(--filament)}

/* ── Editable fields ─────────────────────────────────────────────────────── */
.pickers{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.pick{
  font-size:13px;padding:7px 13px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--filament);
  transition:all .13s;
}
.pick:hover{border-color:var(--sodium);color:var(--bone)}
.pick.on{background:var(--sodium);border-color:var(--sodium);color:var(--ink);font-weight:600}

.avatar-edit{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.avatar-edit .btn{width:auto;padding:10px 16px}

/* ── Empty states that do not look broken ────────────────────────────────── */
.blank{
  border:1px dashed var(--line);border-radius:var(--round);
  padding:44px 26px;text-align:center;background:var(--sunk);
}
.blank h3{margin:0 0 7px;font-size:16px}
.blank p{color:var(--filament);font-size:13.5px;margin:0 auto;max-width:44ch}

@media (max-width:620px){
  .nav-in{height:54px;gap:14px}
  .page-head h1{font-size:22px}
  .cards{grid-template-columns:1fr}
  .av.xl{width:84px;height:84px;font-size:30px}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE TALENT LISTING — rebuilt 2 Sep against the actual references
   
   The first version was a grid of small cards, which is what you design when
   you have not looked at how anybody does this. Upwork, Impact and every
   creator marketplace that works use a ROW: full width, avatar left, a headline
   that is the biggest thing on the line, a metric strip, and the actions on the
   right. The reason is scanning — a client reads thirty headlines and two
   descriptions, and a grid makes every card equally weighted so none of them
   read first.
   ═══════════════════════════════════════════════════════════════════════════ */

.listing{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);
  border-radius:var(--round);overflow:hidden;background:var(--panel)}
.trow{
  display:grid;grid-template-columns:64px 1fr auto;gap:18px;
  padding:20px 22px;border-bottom:1px solid var(--hair);
  transition:background .13s;position:relative;
}
.trow:last-child{border-bottom:0}
.trow:hover{background:rgba(242,241,236,.028)}
.trow .tmain{min-width:0}
/* The whole row is the link; the buttons on the right sit above it. */
.trow .tlink{position:absolute;inset:0;z-index:1}
.trow .tside{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;justify-content:center}

.trow .headline{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0 0 3px;
  display:block;color:var(--bone)}
.trow .who2{font-size:13px;color:var(--filament);margin-bottom:9px}
.trow .who2 b{color:var(--bone);font-weight:500}
.trow .tdesc{font-size:13.5px;color:var(--filament);line-height:1.5;margin:9px 0 0;max-width:74ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* The metric strip. Pipe-separated, monospaced, tabular — the shape every
   marketplace converged on because it lines up down a column when you scan. */
.metrics{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;font-size:13px}
.metrics .m{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.metrics .m + .m::before{content:'';width:1px;height:11px;background:var(--line);
  margin-right:14px;display:inline-block}
.metrics b{font-family:var(--plex);font-size:14px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metrics b.gold{color:var(--sodium)}
.metrics span{color:var(--filament);font-size:11.5px}

/* Tier badges. Earned from delivery, never bought, and no tier is a bad one. */
.tier{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:99px;letter-spacing:.02em;white-space:nowrap}
.tier::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.tier.top{background:rgba(228,165,72,.16);color:var(--sodium);border:1px solid rgba(228,165,72,.42)}
.tier.proven{background:rgba(111,169,138,.14);color:var(--ok);border:1px solid rgba(111,169,138,.38)}
.tier.rising{background:rgba(126,140,160,.14);color:#9fb0c4;border:1px solid rgba(126,140,160,.38)}
.tier.fresh{background:rgba(242,241,236,.055);color:var(--filament);border:1px solid var(--line)}
.tier.watch{background:rgba(201,95,82,.13);color:var(--no);border:1px solid rgba(201,95,82,.36)}

.save{background:transparent;border:1px solid var(--line);color:var(--filament);
  border-radius:99px;padding:7px 14px;font-size:12.5px;cursor:pointer;transition:all .13s;white-space:nowrap}
.save:hover{border-color:var(--sodium);color:var(--bone)}
.save.on{background:rgba(228,165,72,.14);border-color:var(--sodium);color:var(--sodium);font-weight:600}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:14px 0 16px;border-bottom:1px solid var(--hair);margin-bottom:18px}
.toolbar .spacer{flex:1}
.chipbtn{background:transparent;border:1px solid var(--line);color:var(--filament);
  border-radius:99px;padding:8px 15px;font-size:13px;cursor:pointer;transition:all .13s;white-space:nowrap}
.chipbtn:hover{border-color:var(--sodium);color:var(--bone)}
.chipbtn.on{background:var(--sodium);border-color:var(--sodium);color:var(--ink);font-weight:600}

/* The portfolio strip on a profile — work samples, which is what a description
   is a claim about. */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.work{background:var(--sunk);border:1px solid var(--line);border-radius:11px;padding:14px;
  display:block;text-decoration:none;color:inherit;transition:border-color .13s}
.work:hover{border-color:rgba(228,165,72,.4)}
.work .wq{font-size:13px;line-height:1.45;color:var(--bone);margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.work .wm{display:flex;gap:12px;font-family:var(--plex);font-size:12px;color:var(--filament)}

@media (max-width:720px){
  .trow{grid-template-columns:48px 1fr;gap:14px;padding:16px}
  .trow .tside{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;margin-top:4px}
  .trow .headline{font-size:15.5px}
  .metrics{gap:0 10px}
  .metrics .m + .m::before{margin-right:10px}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE SHELL — bottom tab bar and the notification bell, 2 Sep
   
   The IA map of 18 August specified both and the first build shipped neither.
   The tab bar matters most: creators are the phone audience, and the top of a
   phone screen is the part a thumb cannot reach.
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-sp{flex:1}
.desk-only{display:flex}
.mob-only{display:none}

/* ── The bell ────────────────────────────────────────────────────────────── */
.bell{
  position:relative;flex:none;width:38px;height:38px;border-radius:10px;
  background:transparent;border:1px solid transparent;color:var(--filament);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .13s,background .13s;
}
.bell:hover{color:var(--bone);background:rgba(242,241,236,.05)}
.bell svg{width:19px;height:19px}
.bell .dot{
  position:absolute;top:4px;right:3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--sodium);color:var(--ink);
  font:600 10px/16px var(--plex);font-style:normal;text-align:center;
  border:2px solid var(--bench);box-sizing:content-box;
}

.panel-wrap{position:absolute;top:56px;right:max(var(--pad),calc((100% - 1080px)/2));z-index:60}
.npanel{
  width:min(380px,calc(100vw - 28px));max-height:min(70vh,520px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--round);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.92);
}
.nrow{padding:14px 16px;border-bottom:1px solid var(--hair)}
.nrow:last-child{border-bottom:0}
.nrow.new{border-left:2px solid var(--sodium);padding-left:14px}
.nrow .nt{font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:4px}
.nrow .nb{font-size:12.5px;color:var(--filament);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nrow .nw{font-size:11px;color:var(--filament);margin-top:6px;font-family:var(--plex)}
.nempty{padding:30px 22px;text-align:center}
.nempty b{display:block;font-size:14px;margin-bottom:6px}
.nempty div{font-size:12.5px;color:var(--filament);line-height:1.5}

/* ── The tab bar ─────────────────────────────────────────────────────────── */
/* Four items, thumb-height, and it respects the home indicator — a tab bar a
   phone's own chrome sits on top of is worse than no tab bar. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;background:rgba(14,14,16,.94);backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.tb{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 4px 7px;text-decoration:none;color:var(--filament);
  min-height:52px;transition:color .13s;
}
.tb.on{color:var(--sodium)}
.tb:active{background:rgba(242,241,236,.05)}
.tbi{position:relative;display:block;line-height:0}
.tb svg{width:22px;height:22px}
.tbn{
  position:absolute;top:-5px;right:-9px;min-width:15px;height:15px;padding:0 4px;
  border-radius:99px;background:var(--sodium);color:var(--ink);
  font:600 9.5px/15px var(--plex);font-style:normal;text-align:center;
  border:2px solid var(--bench);box-sizing:content-box;
}
.tbl{font-size:10.5px;letter-spacing:.01em;font-weight:500}

@media (max-width:720px){
  .desk-only{display:none}
  .mob-only{display:flex}
  .tabbar{display:flex}
  /* Room for the bar, plus the home indicator underneath it. */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0))}
  .panel-wrap{top:52px;right:12px;left:12px}
  .npanel{width:auto}
}

/* ── Hierarchy in the five states ────────────────────────────────────────── */
/* Honest and scannable are not the same thing. All five states are true and all
   five stay, but a wall of five identical rows makes a reader work out which
   one matters — and the one that matters is whichever has money in it. */
.state{opacity:.55;transition:opacity .15s}
.state.has{opacity:1}
.state.has .figure{font-size:26px}
.state.prov .figure{color:var(--filament)}
.nextup{border-color:rgba(228,165,72,.5)}
.nextup h2{font-size:20px;letter-spacing:-.02em;margin-bottom:6px}

/* ── Empty states that offer a path ──────────────────────────────────────── */
.blank .btn{width:auto;padding:11px 18px;margin-top:16px;display:inline-block}

/* ── Unsaved changes ─────────────────────────────────────────────────────── */
/* A Save button that looks the same whether or not there is anything to save
   teaches people to press it constantly, or never. */
.savebar{
  position:sticky;bottom:0;z-index:30;margin:18px calc(var(--pad) * -1) 0;
  padding:13px var(--pad) calc(13px + env(safe-area-inset-bottom,0));
  background:rgba(14,14,16,.95);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.savebar .msg{font-size:12.5px;color:var(--filament);flex:1}
.savebar .btn{width:auto;padding:11px 20px}
.savebar.clean{opacity:.55}
@media (max-width:720px){ .savebar{bottom:calc(66px + env(safe-area-inset-bottom,0))} }

/* ══════════════════════════════════════════════════════════════════════════
   THE CAMPAIGN PAGE — where you are, and what to do now
   
   This page was 3,400px of scroll in which everything weighed the same, across
   a process that takes days and several visits. The strip answers "where am I",
   which is the thing a creator cannot hold in their head between opening a link
   on Tuesday and posting on Thursday.
   ═══════════════════════════════════════════════════════════════════════════ */

.stages{
  display:flex;list-style:none;margin:0 0 16px;padding:0;
  gap:0;counter-reset:none;overflow-x:auto;scrollbar-width:none;
}
.stages::-webkit-scrollbar{display:none}
.stage-step{
  flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;
  position:relative;color:var(--filament);font-size:11px;text-align:center;
}
/* The connecting rule, drawn behind the dots rather than between them, so it
   never breaks when a label wraps. */
.stage-step::before{
  content:'';position:absolute;top:11px;left:-50%;width:100%;height:1px;
  background:var(--line);z-index:0;
}
.stage-step:first-child::before{display:none}
.stage-step.done::before,.stage-step.now::before{background:var(--sodium)}
.stage-step .dot{
  position:relative;z-index:1;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bench);border:1px solid var(--line);
  font:600 10px/1 var(--plex);color:var(--filament);
}
.stage-step.done .dot{background:var(--sodium);border-color:var(--sodium);color:var(--ink)}
.stage-step.now .dot{
  border-color:var(--sodium);color:var(--sodium);
  box-shadow:0 0 0 3px rgba(228,165,72,.16);
}
.stage-step.now .sl{color:var(--bone);font-weight:600}
.stage-step .sl{line-height:1.25}

.card.lead{border-color:rgba(228,165,72,.45)}
.card.lead h2{font-size:19px;letter-spacing:-.02em;margin-bottom:6px}

/* ── Folded reference ────────────────────────────────────────────────────── */
/* Six rules a creator has already read is a wall on every later visit. Folded
   when nothing has failed; never folded when something has. */
.card.fold{padding:0}
.card.fold > summary{
  padding:18px;cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
}
.card.fold > summary::-webkit-details-marker{display:none}
.card.fold > summary .lbl{margin:0}
.card.fold .foldhint{font-size:12px;color:var(--sodium);flex:none}
.card.fold[open] > summary .foldhint::after{content:' ▴'}
.card.fold:not([open]) > summary .foldhint::after{content:' ▾'}
.card.fold > .gates{padding:0 18px 18px}