/* Jump HQ: the board's cream single theme. One stylesheet, no inline styles, no dark mode. */
:root {
  --bg: #F2ECDD; --card: #FBF7EC; --ink: #2A2118; --line: #D8CEB8; --field: #FFFDF6; --field-line: #C2B698;
  --muted: #6F6252;
  --navy: #1F2E4D; --emerald: #1E6B4A; --rust: #9A3F2A; --orange: #C9722B; --gold: #B8860B; --lime: #6B8E23; --teal: #1F6F78;
  --plum: #4c2b4a; --link: #98552e;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --shadow-sm: 0 1px 2px rgba(42,33,24,.05);
  --shadow-md: 0 1px 2px rgba(42,33,24,.05), 0 6px 16px -8px rgba(42,33,24,.22);
  --shadow-lg: 0 2px 4px rgba(42,33,24,.06), 0 16px 32px -12px rgba(42,33,24,.28);
  --radius: 14px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--serif); color: var(--navy); font-weight: 600; margin: 0 0 12px; letter-spacing: -0.01em; }
h1 { font-size: 27px; margin-bottom: 18px; }
h2 { font-size: 18px; margin-top: 30px; }
h3 { font-size: 15px; margin-top: 18px; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* Auth card */
body.auth { display: flex; justify-content: center; padding: 9vh 20px; }
body.auth .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 28px 30px; max-width: 460px; width: 100%; }
body.auth h1 { font-size: 21px; }

/* App shell */
header.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 13px 24px; background: var(--card); box-shadow: var(--shadow-sm); }
header.top .brand { font-family: var(--serif); font-size: 19px; color: var(--navy); text-decoration: none; font-weight: 700; }
header.top nav { display: flex; gap: 2px; flex-wrap: wrap; }
header.top nav a { color: var(--ink); text-decoration: none; padding: 7px 12px; border-radius: 8px; font-size: 13.5px; transition: background-color .12s ease; }
header.top nav a.on { background: var(--navy); color: #F2EAD8; }
header.top nav a:hover { background: var(--bg); }
header.top .who { margin-left: auto; display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 13px; }
main { max-width: 1280px; margin: 0 auto; padding: 26px 24px 60px; }
main.wide { max-width: none; padding: 26px 32px 88px; }

/* Forms */
label { display: block; font-size: 13px; margin: 8px 0; color: var(--ink); }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--field); color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,111,120,.14); outline: none; }
textarea { resize: vertical; }
button, .btn { display: inline-block; margin-top: 10px; padding: 9px 18px; border: 1px solid var(--plum); background: var(--plum); color: #F2EAD8; border-radius: 9px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; line-height: 1.3; box-shadow: var(--shadow-sm); transition: transform .1s ease, box-shadow .12s ease, filter .12s ease; }
button:hover, .btn:hover { filter: brightness(1.1); box-shadow: var(--shadow-md); transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.secondary, button.secondary { background: transparent; color: var(--plum); box-shadow: none; }
.btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
button.danger { background: var(--rust); border-color: var(--rust); }
form.stack { max-width: 520px; }
form.stack.narrow { max-width: 380px; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 4px 0; }
form.inline label { margin: 0; }
form.inline input, form.inline select { width: auto; min-width: 140px; }
form.inline button { margin: 0; }
form.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 16px; box-shadow: var(--shadow-sm); }
form.filters label { margin: 0; }
form.filters input, form.filters select { width: auto; min-width: 120px; max-width: 180px; }
form.filters label.check { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 8px; }
form.filters label.check input { width: auto; margin: 0; }
form.filters button, form.filters .btn { margin: 0; }
p.note { background: #F3E7C6; color: #7A5A14; padding: 9px 14px; border-radius: 9px; font-size: 13px; }
p.warn { background: #F5D9CF; color: var(--rust); padding: 9px 14px; border-radius: 9px; font-size: 13px; }

/* Tables */
.tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 10px 0 18px; box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-family: var(--serif); color: var(--navy); font-weight: 600; white-space: nowrap; }
th a { color: var(--navy); text-decoration: none; }
tbody tr { transition: background-color .1s ease; }
tbody tr:hover { background: var(--bg); }
tr:last-child td { border-bottom: 0; }
td.empty { color: var(--muted); text-align: center; padding: 24px; }
/* Real pager buttons, not bare text links (Scott, 2026-09-24: "the pagination... it's garbage") --
   shown above and below the table so paging never requires a scroll round-trip. */
p.pager { display: flex; gap: 16px; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 18px; margin: 12px 0; box-shadow: var(--shadow-sm); }
p.pager .btn { margin-top: 0; }
p.pager span { color: var(--muted); font-size: 13px; font-weight: 600; min-width: 100px; text-align: center; }

/* Key/value blocks and grids */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-sm); }
dl.kv dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 3px; }
dl.kv dd { margin: 0; }
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
section.member { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 16px; margin: 10px 0; box-shadow: var(--shadow-sm); }
section.member dl.kv { border: 0; padding: 0; background: transparent; box-shadow: none; }
section.member h3 { margin-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
ul.plain { padding-left: 18px; }

/* Dashboard */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.tile { display: block; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--navy); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tile .n { display: block; font-family: var(--serif); font-size: 30px; color: var(--navy); }
.tile .label { display: block; font-size: 12px; color: var(--muted); }
.tile.emerald { border-left-color: var(--emerald); } .tile.rust { border-left-color: var(--rust); } .tile.orange { border-left-color: var(--orange); }
.tile.gold { border-left-color: var(--gold); } .tile.lime { border-left-color: var(--lime); } .tile.teal { border-left-color: var(--teal); }
ul.board { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
ul.board li a { display: block; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: 10px; padding: 8px 10px; text-decoration: none; color: var(--ink); min-height: 74px; }
ul.board li.zero a { opacity: .55; }
ul.board .n { display: block; font-family: var(--serif); font-size: 22px; color: var(--navy); }
ul.board .label { display: block; font-size: 12px; }
ul.board .sub { display: block; font-size: 11px; color: var(--muted); }
ul.board li.stage-discovered a, ul.board li.stage-provisional a, ul.board li.stage-demographics_requested a { border-top-color: var(--teal); }
ul.board li.stage-verified a, ul.board li.stage-internally_approved a, ul.board li.stage-outreach_ready a { border-top-color: var(--gold); }
ul.board li.stage-contacted a, ul.board li.stage-responded a, ul.board li.stage-interested a { border-top-color: var(--orange); }
ul.board li.stage-negotiating a, ul.board li.stage-contract_pending a { border-top-color: var(--lime); }
ul.board li.stage-recruited a, ul.board li.stage-active a { border-top-color: var(--emerald); }
ul.board li.stage-declined a, ul.board li.stage-disqualified a, ul.board li.stage-inactive a, ul.board li.stage-ghosted a { border-top-color: var(--rust); }
ul.board li.legacy a { border-top-color: var(--muted); }

/* Pills and flags */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #E8E0CC; color: var(--ink); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.cat { background: #E1E9E0; color: var(--emerald); }
.pill.stage-discovered, .pill.stage-provisional, .pill.stage-demographics_requested { background: #D9E8EA; color: var(--teal); }
.pill.stage-verified, .pill.stage-internally_approved, .pill.stage-outreach_ready { background: #F1E5C2; color: #7A5A14; }
.pill.stage-contacted, .pill.stage-responded, .pill.stage-interested { background: #F6E0CA; color: var(--orange); }
.pill.stage-negotiating, .pill.stage-contract_pending { background: #E6EDD2; color: var(--lime); }
.pill.stage-recruited, .pill.stage-active { background: #D6E8DD; color: var(--emerald); }
.pill.stage-declined, .pill.stage-disqualified, .pill.stage-inactive, .pill.stage-ghosted { background: #F0D6CD; color: var(--rust); }
.flag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.flag.rust { background: #F0D6CD; color: var(--rust); } .flag.orange { background: #F6E0CA; color: var(--orange); } .flag.emerald { background: #D6E8DD; color: var(--emerald); }
.score { display: inline-block; min-width: 28px; text-align: center; padding: 2px 6px; border-radius: 6px; font-weight: 600; background: #E8E0CC; }
.score.s5, .score.s4 { background: #D6E8DD; color: var(--emerald); } .score.s3 { background: #F1E5C2; color: #7A5A14; } .score.s2, .score.s1 { background: #F0D6CD; color: var(--rust); }
.pill.complete { background: #D6E8DD; color: var(--emerald); }
.pill.incomplete { background: #F6E0CA; color: var(--orange); cursor: help; }
.pill.clear { background: #D6E8DD; color: var(--emerald); }
.pill.affiliation { background: #F0D6CD; color: var(--rust); }
a.pill.affiliation { text-decoration: none; cursor: pointer; }
a.pill.affiliation:hover { filter: brightness(0.95); }
span.pill.affiliation { cursor: help; }

/* Punch list (data completeness) */
.punchlist { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 16px; margin: 4px 0 18px; box-shadow: var(--shadow-sm); }
.punchlist h2 { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.punchlist ul.plain { margin: 6px 0; }
.punchlist li { margin: 2px 0; }

/* Creator profile "file folder" tabs: a horizontal row of colorful cabinet-style tabs; click one
   and its drawer opens full-width beneath the whole row. Pure <details>/<summary> (html.js
   folder()) -- no script.
   This used to lift each <details>'s children into the flex row with `display: contents` and
   reorder them with flex `order` (summary order 1, body order 2). That does not work: Chromium
   (and, per longstanding bug reports, other engines) does not honor `order` on children flattened
   through a `display: contents` parent, so it painted in raw DOM order instead -- the open
   drawer's content first, every tab label pushed below it. Confirmed by rendering this exact page
   with Playwright and reading the tabs' actual bounding boxes (2026-09-24): the "file folders"
   really were at the bottom, on every browser, no caching or deploy issue involved.
   Fixed without any order/display:contents trick: each <details> stays a normal flex item sized
   to its (in-flow) summary, and the open folder-body is pulled out of flow with
   `position: absolute` and pinned below the whole tab row -- so it can span full width beneath
   every tab without needing the browser to reorder anything. Log Info is always the last folder in
   the DOM (see creators.js) so it's always the rightmost tab, however many folders sit before it. */
.folders { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 4px; align-items: flex-end; }
.folders details { margin: 0; }
.folders summary {
  list-style: none; cursor: pointer; user-select: none; position: relative; top: 2px;
  display: flex; align-items: center; gap: 7px; padding: 9px 18px 8px; border-radius: 9px 9px 0 0;
  font-weight: 700; font-size: 13px; letter-spacing: .01em;
  /* A glass tab, not a paint chip: a faint tint (14% color) plus a soft outer glow does the
     "colorful" job that a near-opaque fill used to -- white text disappears at that alpha against
     this light a page, so the tab's own color carries the label instead, with the tint and glow
     doing the rest of the work. */
  color: color-mix(in srgb, var(--folder-color, var(--navy)) 80%, black);
  background: color-mix(in srgb, var(--folder-color, var(--navy)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--folder-color, var(--navy)) 38%, transparent); border-bottom: none;
  box-shadow: 0 0 8px -2px var(--folder-glow, rgba(31,46,77,.14));
  transition: box-shadow .18s ease, transform .18s ease, top .18s ease, background .18s ease, color .18s ease;
}
.folders summary::-webkit-details-marker { display: none; }
.folders summary::marker { content: ""; }
.folders summary::before { content: "📁"; font-size: 12px; opacity: .85; }
.folders summary:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--folder-color, var(--navy)) 22%, transparent); box-shadow: 0 0 12px -2px var(--folder-glow, rgba(31,46,77,.20)); }
.folders summary:focus-visible { outline: 2px solid var(--folder-color, var(--navy)); outline-offset: 2px; }
.folders details[open] summary {
  top: 0; color: color-mix(in srgb, var(--folder-color, var(--navy)) 92%, black);
  background: color-mix(in srgb, var(--folder-color, var(--navy)) 26%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--folder-color, var(--navy)) 45%, transparent), 0 0 14px 0px var(--folder-glow, rgba(31,46,77,.25));
}
.folders details[open] summary::before { content: "📂"; opacity: 1; }
.folder-badge {
  background: color-mix(in srgb, var(--folder-color, var(--navy)) 20%, white);
  color: color-mix(in srgb, var(--folder-color, var(--navy)) 85%, black);
  border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600;
}
/* A tab whose feature isn't built yet still gets a real tab -- Scott, 2026-09-24 wanted the team
   to see it coming -- with a small label stacked under the title instead of a pill beside it. */
.folder-label-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; gap: 1px; }
.folder-sub { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.folder-body {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
  background: var(--card); border: 1px solid var(--line);
  border-top: 4px solid var(--folder-color, var(--navy)); border-radius: 0 12px 12px 12px;
  padding: 18px 20px 20px; margin-top: 4px; box-shadow: var(--shadow-md), 0 0 20px -12px var(--folder-glow, transparent);
}
details[open] > .folder-body { display: block; animation: folder-open .16s ease-out; }
@keyframes folder-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.folder-body h3 { margin-top: 0; }
.folder-body h3:not(:first-child) { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }

.folder-emerald { --folder-color: var(--emerald); --folder-glow: rgba(30,107,74,.18); }
.folder-rust { --folder-color: var(--rust); --folder-glow: rgba(154,63,42,.18); }
.folder-teal { --folder-color: var(--teal); --folder-glow: rgba(31,111,120,.18); }
.folder-gold { --folder-color: var(--gold); --folder-glow: rgba(184,134,11,.18); }
.folder-lime { --folder-color: var(--lime); --folder-glow: rgba(107,142,35,.18); }
.folder-plum { --folder-color: var(--plum); --folder-glow: rgba(76,43,74,.18); }

/* Timeline */
ol.timeline { list-style: none; padding: 0; margin: 12px 0; border-left: 2px solid var(--line); }
ol.timeline li { position: relative; padding: 6px 0 10px 18px; }
ol.timeline li::before { content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); }
ol.timeline li.kind-note::before { background: var(--gold); } ol.timeline li.kind-stage_change::before { background: var(--emerald); }
ol.timeline li.kind-task::before { background: var(--teal); } ol.timeline li.kind-system::before { background: var(--muted); }
ol.timeline .when { color: var(--muted); font-size: 12px; margin-right: 8px; }
ol.timeline .kind { font-family: var(--serif); color: var(--navy); margin-right: 8px; }
ol.timeline .who { color: var(--muted); font-size: 12px; margin-left: 8px; }
ol.timeline .body { white-space: pre-wrap; margin: 4px 0 0; }
span.kind { font-family: var(--serif); color: var(--navy); }

/* Avatars */
.creator-cell { display: flex; align-items: center; gap: 10px; }
/* Compact record header: photo + handle/platform/niche + at-a-glance pills, above everything else. */
.rechead { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; box-shadow: var(--shadow-sm); margin: 4px 0 18px; flex-wrap: wrap; }
.rechead-avatar .avatar { width: 56px; height: 56px; font-size: 18px; }
.rechead-who { flex: 1; min-width: 0; }
.rechead-handle { color: var(--muted); font-size: 13px; }
.rechead-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pill.score { background: #D6E8DD; color: var(--emerald); }
/* The pencil badge sits on the photo's own corner -- the standard SaaS pattern (Slack, LinkedIn,
   GitHub, ...) -- not a separate link floating below it. */
.avatar-wrap { position: relative; width: 56px; height: 56px; }
.avatar-edit-badge {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card); cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.avatar-edit-badge:hover { transform: scale(1.08); background: var(--emerald); }
.avatar-upload-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.avatar-upload-btn { font-size: 11px; padding: 2px 10px; }
.avatar-upload-hint { font-size: 11px; margin: 0; }

/* Relationship status pill (Overview) -- one color per status, same visual language as stagePill(). */
.pill.rel-prospect { background: #F1E5C2; color: #7A5A14; }
.pill.rel-applicant { background: #D9E8EA; color: var(--teal); }
.pill.rel-active { background: #D6E8DD; color: var(--emerald); }
.pill.rel-inactive { background: #E8E0CC; color: var(--muted); }
.pill.rel-disqualified, .pill.rel-do_not_contact { background: #F0D6CD; color: var(--rust); }

/* Overview split: Contact & Primary Account on the left, Identity & Status on the right. */
.overview-split { align-items: start; }
.ovcol > section + section { margin-top: 22px; }
.bio-link { margin: 0; font-size: 13px; word-break: break-all; }

/* Click-to-edit boxes (Scott, 2026-09-24): closed/read-only until the box's own Edit link is
   clicked, so nobody changes a field by accident -- and each box's Edit link is one `write` check
   away from becoming an independent per-role or per-tenant permission gate later. No script: the
   toggle is a plain link to this same page with ?edit=contact / ?edit=identity, read server-side
   (see editBox() in creators.js) -- a full page round trip, same as every other action here. */
.editbox { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 16px; margin-bottom: 16px; }
.editbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.editbox-head h3 { margin: 0; display: flex; align-items: center; gap: 7px; }
.editbox-head h3 .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.editbox-head h3 .dot.navy { background: var(--navy); } .editbox-head h3 .dot.teal { background: var(--teal); }
.editbox .btn.small { padding: 5px 12px; margin-top: 0; font-size: 12px; }
.editbox .stack button { margin-top: 10px; }
.locked-hint { font-size: 12px; font-style: italic; }
.emphasis-field { display: block; margin: 10px 0; }
/* Audience Female % is the #1 qualifying signal for this campaign (Scott, 2026-09-24) -- a
   highlighted row instead of one more line buried in the metrics list. */
.highlight-row { background: color-mix(in srgb, var(--emerald) 8%, transparent); border-radius: 8px; padding: 6px 8px; margin-top: 8px; }
dl.kv dd.emphasis { font-size: 15px; font-weight: 700; }

/* Spec-driven metric pills (contract/QUALIFIED_150_SPEC.md) -- same red/amber/green language the
   rest of the app already uses (.pill.affiliation/.clear, .pill.incomplete/.complete). */
.pill.good { background: #D6E8DD; color: var(--emerald); }
.pill.warn { background: #F6E0CA; color: var(--orange); }
.pill.bad { background: #F0D6CD; color: var(--rust); }
.pill.neutral { background: #E8E0CC; color: var(--muted); }

/* Campaign Requirements (contract/JUMP_HQ_PLATFORM_ROADMAP.md §1a): one card per field, grouped by
   section. Required/Preferred sub-groups borrow the exact bad/good pill colors so the connection
   to the Overview pills they control is immediate, not just described in prose. */
.reqgroup { margin: 28px 0; }
.reqgroup:first-of-type { margin-top: 18px; }
.reqfield { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 16px; margin: 0 0 12px; box-shadow: var(--shadow-sm); }
.reqfield-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.reqfield-head label.check { margin: 0; font-size: 14px; }
.reqfield-bounds { display: flex; flex-wrap: wrap; gap: 14px; }
.bound-group { flex: 1 1 220px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 4px; background: var(--field); }
.bound-group label { display: inline-block; width: 47%; margin: 0 0 8px; font-size: 12.5px; }
.bound-group input { margin-top: 3px; }
.bound-label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.bound-label.bad { background: #F0D6CD; color: var(--rust); }
.bound-label.good { background: #D6E8DD; color: var(--emerald); }
.reqfield-desc { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* Campaign detail's entry point into Campaign Requirements: a full-width callout, not a small link
   buried at the bottom of the stats block (Scott, 2026-09-24: "I don't see it ... I want to make
   sure that I can find it") -- the first thing on the page, above the campaign's own stats. */
.callout {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--gold);
  border-radius: var(--radius); padding: 16px 20px; margin: 0 0 18px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease;
}
.callout:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.callout strong { display: block; font-family: var(--serif); font-size: 17px; color: var(--navy); }
.callout p { margin: 4px 0 0; }
.callout .btn { margin-top: 0; flex: none; }

/* Deal Offer tab (contract/JUMP_HQ_PLATFORM_ROADMAP.md §1b): the campaign detail page's new
   accordion/folder-tab row, added below the existing content rather than replacing it. Uses the
   same .folders/.folder-body pattern as the creator profile (html.js's folder()); the pill/card
   language here matches the rest of the app (.pill, .reqfield's card look) rather than inventing
   new visual vocabulary. */
.dealgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 26px; }
.dealcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 16px; }
.dealcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dealcard-head strong { font-family: var(--serif); font-size: 14.5px; color: var(--navy); }
.dealcard .components { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dealcard .details { font-size: 12.5px; color: var(--muted); margin: 0; }
.dealcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }

/* Search Results (Scott, 2026-09-24: "those are search results... put each one of those into a
   card with an explanation of what that dataset is"): one card per dataset, the same visual
   language as a deal-structure card, but built around dl.kv's existing key/value block instead of
   pills, since a dataset's "pertinent information" is mostly labeled stats. */
.resultgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0 26px; }
.resultcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px; box-shadow: var(--shadow-sm); }
.resultcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.resultcard-head strong { font-family: var(--serif); font-size: 16px; color: var(--navy); }
.resultcard-head p { margin: 4px 0 0; font-size: 12.5px; }
.resultcard dl.kv { box-shadow: none; border: none; background: var(--field); padding: 10px 14px; }
.resultcard-foot { display: flex; gap: 10px; margin-top: 12px; }
a.small-link { font-size: 12.5px; color: var(--plum); text-decoration: none; font-weight: 600; }
.pill.cash { background: #D6E8DD; color: var(--emerald); }
.pill.affiliate { background: #D9E8EA; color: var(--teal); }
.pill.product { background: #F1E5C2; color: #7A5A14; }
.pill.status-sent { background: #D9E8EA; color: var(--teal); }
.pill.status-accepted { background: #D6E8DD; color: var(--emerald); }
.pill.status-declined { background: #F0D6CD; color: var(--rust); }

.builder { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px 20px; margin-bottom: 30px; }
.builder .field { margin-bottom: 12px; }
.name-hint { font-size: 12px; color: var(--muted); font-style: italic; margin: 4px 0 0; }
.component-toggle { background: var(--field); border: 1px solid var(--field-line); border-radius: 10px; padding: 10px 14px 14px; margin-bottom: 10px; transition: opacity .12s ease; }
.component-toggle.off { opacity: .55; }
.component-toggle-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--navy); margin-bottom: 4px; }
.component-toggle-head input { width: auto; }
.component-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 16px; margin-top: 10px; }
.assign-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.btn.small { padding: 5px 12px; margin-top: 0; font-size: 12px; }

.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 700; letter-spacing: .01em; flex: none; }
img.avatar { object-fit: cover; }
.avatar-c0 { background: #D9E8EA; color: var(--teal); } .avatar-c1 { background: #F1E5C2; color: #7A5A14; }
.avatar-c2 { background: #F6E0CA; color: var(--orange); } .avatar-c3 { background: #E6EDD2; color: var(--lime); }
.avatar-c4 { background: #D6E8DD; color: var(--emerald); } .avatar-c5 { background: #F0D6CD; color: var(--rust); }
.avatar-c6 { background: #E5DCE4; color: var(--plum); } .avatar-c7 { background: #DCE3EF; color: var(--navy); }

/* Batch outreach */
.batchbar { position: sticky; bottom: 18px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 18px 0 0; padding: 14px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.batchbar .count { font-weight: 700; color: var(--navy); }
.batchbar .spacer { flex-grow: 1; }
.batchbar label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }
.batchbar label.check input { width: auto; margin: 0; }
td.check { width: 24px; text-align: center; }
th.check { width: 24px; }
.msgcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 14px; box-shadow: var(--shadow-sm); }
.msgcard .to { color: var(--muted); font-size: 12px; margin-top: 2px; }
.msgcard .creator-cell { margin-bottom: 8px; }
.msgcard .subject { font-weight: 700; margin: 4px 0 10px; color: var(--navy); }
.msgcard textarea.body { min-height: 120px; }
p.notice { background: #F1E5C2; color: #7A5A14; padding: 10px 14px; border-radius: 9px; font-size: 13px; }

@media (max-width: 820px) {
  .grid.two { grid-template-columns: 1fr; }
  main { padding: 16px; }
  header.top { padding: 10px 16px; }
  header.top .who { margin-left: 0; }
  dl.kv { grid-template-columns: 1fr; }
  dl.kv dt { padding-top: 8px; }
  .dealgrid { grid-template-columns: 1fr; }
  .resultgrid { grid-template-columns: 1fr; }
  .assign-grid { grid-template-columns: 1fr; }
  .component-fields { grid-template-columns: 1fr; }
}