/* ==========================================================================
   GV Mediatech — creator network
   The join dialog on the home page, the creator dashboard and the admin
   roster. Loaded on top of styles.css, which owns the palette, the buttons
   and the header — nothing here redefines any of those.
   ========================================================================== */

/* ---------- the account entry points in the header ---------- */
.nav-network{display:inline-flex;align-items:center;font-weight:700;font-size:.92rem;
  color:var(--green-text);text-decoration:none;white-space:nowrap;padding:10px 4px;
  background:none;border:0;cursor:pointer;font-family:inherit}
.nav-network:hover{text-decoration:underline}

/* ---------- account-page header ----------
   /creator and /creators-admin have no burger menu, so their header controls
   must NOT carry .nav-cta: that class means "hide me below 1180px, I live in
   the menu" — and with no menu to live in, it left the admin page with no way
   to log out on a phone at all. These stay visible and wrap instead. */
.ac-header .nav-in{flex-wrap:wrap;row-gap:10px}
.ac-nav-item{white-space:nowrap}
@media (max-width:520px){
  .ac-header .nav-in{gap:12px}
  /* Repeated as a full-width button in the page body, so the header can drop
     it on the narrowest screens rather than wrap to a third row. */
  .ac-nav-item.is-secondary{display:none}
}

/* ---------- the creator line in the hero ----------
   Sits under the brand CTAs. Deliberately not a button: three buttons in a
   hero makes none of them primary, and the brands' "Start a launch" has to
   stay the loudest thing on the page. */
.hero-creator-note{margin:14px 0 0;font-size:.94rem;color:var(--muted)}
.hero-creator-note a{color:var(--green-text);font-weight:700;
  text-decoration:underline;text-underline-offset:3px}
.hero-creator-note a:hover{color:var(--rust)}

/* Green rather than the brand orange, so the creator route is visibly a
   different door and never competes with "Start a launch". */
.btn--creator{background:transparent;color:var(--green-text);
  border-color:var(--green)}
.btn--creator:hover{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- the roster band on the home page ----------
   Sits directly under the cream tool band, so it takes the dark treatment to
   keep the two from reading as one long section. */
.network-band{background:var(--forest);color:#fff;border-top:1px solid var(--line)}
.network-band .kicker{color:var(--green-lt)}
.network-band .lead{color:rgba(255,255,255,.88);max-width:66ch}
.network-band .band-note{color:var(--muted-d);max-width:70ch;margin-top:24px}
.network-band .band-note strong{color:#fff}
.network-band .hero-cta{margin-top:28px}
.network-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.network-band .btn--ghost:hover{background:#fff;color:var(--forest);border-color:#fff}

/* ---------- shared form furniture ---------- */
.ac-f{margin:0 0 16px}
.ac-f > label,.ac-legend{display:block;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.ac-f input,.ac-f select,.ac-f textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:11px}
.ac-f textarea{resize:vertical;min-height:96px;line-height:1.55}
.ac-f input:focus,.ac-f select:focus,.ac-f textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(12,144,108,.16)}
.ac-f input[aria-invalid="true"]{border-color:var(--red)}
.ac-f input::placeholder,.ac-f textarea::placeholder{color:#A9B4AD}
.ac-hint{margin:7px 0 0;font-size:.84rem;color:var(--muted);line-height:1.5}
.ac-opt{font-weight:400;letter-spacing:0;text-transform:none;color:#98A69D}
.ac-err{margin:0 0 16px;padding:11px 15px;border-radius:11px;font-size:.92rem;
  background:#FDEDEB;color:#8E241A;border:1px solid #F3C9C3}
.ac-ok{margin:0 0 16px;padding:11px 15px;border-radius:11px;font-size:.92rem;
  background:#E8F6F0;color:#0A5B45;border:1px solid #BFE4D6}
.ac-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.ac-row{grid-template-columns:1fr}}

/* A text button that reads as a link but is a real <button>, so it is
   keyboard-reachable and never pretends to be a destination. */
.linkish{background:none;border:0;padding:0;font:inherit;font-size:.94rem;
  color:var(--green-text);font-weight:700;cursor:pointer;text-decoration:underline}
.linkish:hover{color:var(--rust)}

.is-busy{opacity:.6;pointer-events:none}

/* ---------- the join / log in dialog ---------- */
/* The join step is five fields tall and lands on phones in landscape and on
   short laptop windows, so the dialog scrolls inside itself rather than
   running off the bottom of the screen with the button on it. */
.acct{border:0;padding:0;border-radius:20px;width:min(460px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(6,43,26,.28)}
.acct::backdrop{background:rgba(6,43,26,.55)}
.acct-in{padding:34px 32px 30px}
@media (max-width:480px){.acct-in{padding:28px 22px 24px}}
.acct-h{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.9rem;line-height:1.05;letter-spacing:.01em;margin:.1em 0 .45em}
.acct-sub{font-size:.98rem;color:var(--muted);margin:0 0 22px;line-height:1.55}
.acct-go{width:100%;margin-top:4px}
.acct-alt{margin:16px 0 0;text-align:center;font-size:.92rem;color:var(--muted)}
.acct-fine{margin:18px 0 0;font-size:.8rem;color:var(--muted);line-height:1.5}
.acct-close{position:absolute;top:12px;right:12px;width:38px;height:38px;
  border:0;border-radius:50%;background:none;color:var(--muted);font-size:1.5rem;
  line-height:1;cursor:pointer}
.acct-close:hover{background:var(--cream);color:var(--ink)}
.acct form{margin:0}
#jCode{letter-spacing:.42em;font-size:1.5rem;text-align:center;font-weight:700}

/* ---------- account pages (dashboard, admin) ---------- */
.ac-page{background:var(--cream);min-height:70vh;padding:44px 0 72px}
.ac-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px;margin:0 0 28px}
.ac-head .h2{margin:.1em 0 .1em}
.ac-you{font-size:.94rem;color:var(--muted);margin:0}
.ac-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 22px;margin:0 0 20px}
.ac-card > h3{font-size:1.12rem;font-weight:700;margin:0 0 4px}
.ac-card > .ac-why{font-size:.9rem;color:var(--muted);margin:0 0 20px;line-height:1.55;
  max-width:62ch}
.ac-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.ac-saved{font-size:.88rem;color:var(--green-text);font-weight:700}

/* ---------- profile completeness ---------- */
.ac-meter{margin:0 0 26px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 24px}
.ac-meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.92rem;font-weight:700}
.ac-meter-pct{font-family:var(--display);font-size:1.5rem;color:var(--green-text)}
.ac-bar{height:9px;border-radius:99px;background:var(--line);overflow:hidden;margin:12px 0 10px}
.ac-bar > i{display:block;height:100%;border-radius:99px;background:var(--green);
  transition:width .5s ease}
@media (prefers-reduced-motion:reduce){.ac-bar > i{transition:none}}
.ac-meter-note{margin:0;font-size:.88rem;color:var(--muted)}

/* ---------- platform rows ---------- */
.ac-plat{display:grid;grid-template-columns:132px 1fr 130px 40px;gap:10px;
  align-items:center;margin:0 0 10px}
@media (max-width:640px){
  .ac-plat{grid-template-columns:1fr 1fr;gap:8px}
  .ac-plat .ac-plat-handle{grid-column:1/-1}
}
.ac-plat select,.ac-plat input{width:100%;padding:11px 13px;font:inherit;font-size:.96rem;
  border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.ac-plat select:focus,.ac-plat input:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(12,144,108,.16)}
.ac-drop{border:0;background:none;color:var(--muted);font-size:1.35rem;line-height:1;
  cursor:pointer;border-radius:8px;padding:6px}
.ac-drop:hover{color:var(--red);background:#FDEDEB}
.ac-total{margin:14px 0 0;font-size:.94rem;font-weight:700}
.ac-total span{color:var(--green-text)}

/* ---------- chips ---------- */
.ac-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 12px}
.ac-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink);
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.ac-chip:hover{border-color:var(--green)}
.ac-chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}

/* ---------- admin roster ---------- */
.ad-filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin:0 0 18px;align-items:end}
@media (max-width:900px){.ad-filters{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ad-filters{grid-template-columns:1fr}}
.ad-filters .ac-f{margin:0}
.ad-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin:0 0 14px;font-size:.94rem;color:var(--muted)}
.ad-wrap{overflow-x:auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r)}
.ad-table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:940px}
.ad-table th,.ad-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);
  vertical-align:top}
.ad-table th{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);background:var(--cream);position:sticky;top:0;z-index:1}
.ad-table tbody tr:last-child td{border-bottom:0}
.ad-table tbody tr:hover{background:var(--cream)}
.ad-name{font-weight:700}
.ad-sub{display:block;font-size:.84rem;color:var(--muted);font-weight:400}
.ad-reach{font-weight:700;white-space:nowrap}
.ad-tags{font-size:.86rem;color:var(--muted)}
.ad-pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.76rem;
  font-weight:700;background:#E8F6F0;color:#0A5B45}
.ad-pill.is-off{background:#F1EFEA;color:var(--muted)}
.ad-pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:22px 0 0}
.ad-empty{padding:44px 20px;text-align:center;color:var(--muted)}

/* ---------- gate shown while a page checks for a session ---------- */
.ac-gate{max-width:460px;margin:0 auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:34px 30px;text-align:center}
.ac-gate .h2{font-size:1.9rem}

/* ==========================================================================
   Campaign desk (/campaigns)
   A dense internal screen, so the craft here is information design rather
   than typography: state reads as shape and colour before it reads as a word,
   and everything editable looks editable.
   ========================================================================== */
.cd-bar{display:grid;gap:14px;grid-template-columns:2fr 2fr 1fr 1fr;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin:0 0 16px;align-items:end}
@media (max-width:900px){.cd-bar{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cd-bar{grid-template-columns:1fr}}
.cd-bar .ac-f{margin:0}
.cd-pick select{font-weight:700}

.cd-stats{display:grid;gap:12px;margin:0 0 18px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cd-stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.cd-stat-n{font-family:var(--display);font-size:1.6rem;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.cd-stat-l{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
/* Semantic, and separate from the brand accent: these mean "look at me". */
.cd-stat--warn{border-color:#F0C98A;background:#FEF8EE}
.cd-stat--warn .cd-stat-n{color:#8A5200}
.cd-stat--stop{border-color:#F3C9C3;background:#FDEDEB}
.cd-stat--stop .cd-stat-n{color:#8E241A}

.cd-table{min-width:1040px}
.cd-table td{vertical-align:middle}
.cd-link{color:var(--green-text);text-decoration:none}
.cd-link:hover{text-decoration:underline}
.cd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* Inline editors. Bordered but quiet — they should read as fields without
   turning a 200-row table into a wall of boxes. */
.cd-inline{width:100%;min-width:96px;padding:7px 9px;font:inherit;font-size:.88rem;
  color:var(--ink);background:var(--paper);border:1.5px solid var(--line);
  border-radius:8px}
.cd-inline:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(12,144,108,.16)}
.cd-num{max-width:110px;font-variant-numeric:tabular-nums}

/* Stage carries the most information in the row, so it is the one control
   that changes colour with its value. */
.cd-stage{font-weight:700}
.cd-stage[data-value="Invited"]{border-color:#E8B15F;background:#FEF8EE}
.cd-stage[data-value="Confirmed"],
.cd-stage[data-value="Briefed"],
.cd-stage[data-value="Visited"]{border-color:var(--green-lt);background:#F0FAF6}
.cd-stage[data-value="Posted"],
.cd-stage[data-value="Reported"]{border-color:var(--green);background:#E8F6F0}
.cd-stage[data-value="Paid"]{border-color:var(--green);background:var(--green);color:#fff}
.cd-stage[data-value="Dropped"]{border-color:var(--line);background:#F5F3EF;
  color:var(--muted)}
.cd-pay[data-value="Paid"]{border-color:var(--green-lt);background:#F0FAF6}

.cd-send{padding:7px 14px;font-size:.82rem;min-height:0;white-space:nowrap}

/* ---------- lock + roster ---------- */
.cd-lock{max-width:440px;text-align:left}
.cd-lock .h2{font-size:1.9rem;text-align:center}
.cd-lock > p{text-align:center}
.cd-lock form{margin:22px 0 0}
.cd-lock .btn{width:100%}
.cd-lock .ac-hint{text-align:center;margin-top:14px}

.cd-tabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--line)}
.cd-tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;
  padding:11px 18px;font:inherit;font-size:.96rem;font-weight:700;color:var(--muted);
  cursor:pointer;margin-bottom:-1px}
.cd-tab:hover{color:var(--ink)}
.cd-tab.is-on{color:var(--green-text);border-bottom-color:var(--green)}

.cd-bar--roster{grid-template-columns:2fr 1fr 2fr}
@media (max-width:900px){.cd-bar--roster{grid-template-columns:1fr}}
.cd-bar-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.cd-roster-table{min-width:860px}

/* ---------- roster selection + bulk bar ---------- */
.cd-tick{width:38px;text-align:center}
.cd-tick input{width:17px;height:17px;accent-color:var(--green);cursor:pointer}
.cd-bulk{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  background:var(--forest);color:#fff;border-radius:12px;
  padding:12px 18px;margin:0 0 14px}
.cd-bulk span{font-weight:700;font-size:.94rem}
.cd-bulk .cd-inline{width:auto;min-width:200px;background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.28);color:#fff}
.cd-bulk .cd-inline option{color:var(--ink)}
.cd-bulk .linkish{color:rgba(255,255,255,.8)}
.cd-bulk .linkish:hover{color:#fff}
.cd-roster-table{min-width:1000px}
.cd-roster-table .ad-sub{margin-top:2px}

/* ---------- add-influencer dialog: progressive detail ---------- */
.cd-more{margin:0 0 16px;border-top:1px solid var(--line);padding-top:14px}
.cd-more > summary{cursor:pointer;font-weight:700;font-size:.9rem;
  color:var(--green-text);list-style:none;padding:4px 0}
.cd-more > summary::-webkit-details-marker{display:none}
.cd-more > summary::before{content:"+ ";font-weight:700}
.cd-more[open] > summary::before{content:"– "}
.cd-more > summary:hover{color:var(--rust)}
.cd-more .ac-legend{margin:18px 0 8px}
.cd-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;
  font-size:.92rem;line-height:1.45;cursor:pointer}
.cd-check input{width:17px;height:17px;margin-top:2px;accent-color:var(--green);
  flex:none;cursor:pointer}

/* The duplicate warning is information, not an error — amber, not red. */
.cd-dupe{margin:0 0 16px;padding:11px 15px;border-radius:11px;font-size:.9rem;
  line-height:1.5;background:#FEF8EE;color:#6B4200;border:1px solid #F0C98A}

/* ---------- payments ---------- */
.cd-pay-table{min-width:1080px}
.cd-method{min-width:130px}
/* A row that cannot be paid yet reads as blocked before anyone reads the
   invoice column — the tick is small and the money is what draws the eye. */
.cd-row-blocked td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.cd-missing{color:#A32E20;font-weight:600}

/* ---------- notes + negotiation drawer ---------- */
.cd-notes{appearance:none;background:none;border:1.5px solid var(--line);
  border-radius:8px;padding:6px 11px;font:inherit;font-size:.8rem;font-weight:700;
  color:var(--muted);cursor:pointer;white-space:nowrap}
.cd-notes:hover{border-color:var(--green);color:var(--green-text)}
.cd-notes.has-notes{border-color:var(--green);color:var(--green-text);
  background:#F0FAF6}

.cd-drawer-row td{background:var(--cream);padding:0}
.cd-drawer{padding:18px 20px;display:flex;flex-direction:column;gap:14px;
  border-left:3px solid var(--green)}

.cd-log{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
.cd-log-none{margin:0;font-size:.88rem;color:var(--muted)}
.cd-log-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:9px 13px;font-size:.9rem}
/* A fee change is a different kind of event from a note, so it reads as one. */
.cd-log-item--fee{border-left:3px solid var(--orange);font-weight:600}
.cd-log-body{flex:1 1 260px;line-height:1.5}
.cd-log-meta{font-size:.76rem;color:var(--muted);white-space:nowrap}
.cd-log-del{appearance:none;background:none;border:0;color:var(--muted);
  font-size:1.1rem;line-height:1;cursor:pointer;padding:0 2px}
.cd-log-del:hover{color:var(--red)}

.cd-deal,.cd-say{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cd-deal .cd-num{flex:0 0 120px}
.cd-deal .cd-inline:not(.cd-num){flex:1 1 240px}
.cd-say .cd-inline{flex:1 1 320px}

/* ---------- send queue ---------- */
.cd-queue{width:min(560px,calc(100vw - 32px))}
.cd-queue textarea{min-height:150px;font-size:.95rem;line-height:1.6}
.cd-queue-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:4px 0 0}
.cd-queue-actions .btn--lg{flex:1 1 auto;min-width:180px}
.cd-queue-advance{margin:16px 0 0;font-size:.88rem;color:var(--muted)}
.cd-pick-actions{display:flex;gap:8px;margin-top:8px}