/* The vendor pages (T-141) — the portal and the sign-up form.
   Self-contained, like every hub module here (no site dependencies), so the pair can be
   dropped into another brand or sold on its own. The sign-up page links this same file. */
:root{
  --bg:#faf7f2; --panel:#fff; --line:#e8e0d4; --ink:#2b2622; --dim:#6b6259;
  --teal:#1f6f5c; --teal-d:#175646; --gold:#c79350; --warn:#8a6f2e;
  --radius:12px; --shadow:0 1px 2px rgba(43,38,34,.05),0 8px 24px rgba(43,38,34,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--teal-d)}
.vh-top{display:flex;align-items:center;gap:16px;padding:14px 20px;background:#fff;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.vh-brand{font-weight:800;letter-spacing:.02em}
.vh-back{color:var(--dim);text-decoration:none;font-size:.9rem}
.vh-back:hover{color:var(--ink)}
main{max-width:720px;margin:0 auto;padding:28px 20px 64px}
h1{font-size:1.7rem;line-height:1.25;margin:0 0 6px}
h2{font-size:1.1rem;margin:26px 0 8px}
.lede{color:var(--dim);margin:0 0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
label{display:block;font-size:.86rem;font-weight:600;margin:14px 0 4px}
label .opt{font-weight:400;color:var(--dim)}
input,select,textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
.btn{background:var(--teal);color:#fff;border:0;border-radius:9px;padding:11px 18px;
  font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:var(--teal-d)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:default}
.msg{font-size:.9rem;color:var(--dim);margin-left:10px}
.msg.bad{color:#a33}
.msg.good{color:var(--teal-d)}
.pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.76rem;font-weight:700;
  border:1px solid var(--line);color:var(--dim);background:#fff;vertical-align:middle}
.pill.live{color:var(--teal-d);border-color:var(--teal)}
.pill.pending{color:var(--warn);border-color:var(--gold)}
.note{background:#fdf8ee;border-left:3px solid var(--gold);padding:12px 16px;
  border-radius:0 var(--radius) var(--radius) 0;margin:16px 0;font-size:.94rem}
.note p{margin:0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 0}
.tabs button{background:transparent;border:1px solid var(--line);border-radius:20px;
  padding:7px 15px;font:inherit;font-size:.9rem;cursor:pointer;color:var(--dim)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.tabs button[disabled]{opacity:.45;cursor:default}
.fine{font-size:.85rem;color:var(--dim)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }

/* ── The mention-ad format ────────────────────────────────────────────────────
   COPIED VERBATIM from app/lib/mentions.js MENTION_CSS, so the preview a sponsor sees
   while buying is the format a reader gets. test:mentions fails if the two drift —
   a preview that flatters the real thing is a promise we did not keep.
   ── begin MENTION_CSS ── */
.mention{margin:22px 0;padding:0 0 0 14px;border-left:3px solid var(--gold,#c79350);}
.mention-label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:#7a7168;margin-bottom:4px;}
.mention-copy{display:block;font-size:1.05rem;line-height:1.55;color:inherit;}
.mention-copy strong{font-weight:800;}
.mention-a{text-decoration:none;color:inherit;display:block;}
.mention-a:hover .mention-copy strong{text-decoration:underline;text-underline-offset:3px;}
/* ── end MENTION_CSS ── */

/* ── Banner + box preview (A-119 / T-241) ────────────────────────────────────
   COPIED VERBATIM from app/lib/sponsorAds.js BANNER_CSS / BOX_CSS.
   ── begin BANNER_CSS ── */
.sponsor-banner{margin:0 0 18px;padding:0;}
.sponsor-banner-label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:#7a7168;margin-bottom:6px;}
.sponsor-banner-img{display:block;width:100%;height:auto;max-height:220px;object-fit:contain;
  background:#f6f1ea;border-radius:6px;}
.sponsor-banner-a{text-decoration:none;color:inherit;display:block;}
.sponsor-banner-slot:empty{display:none;}
/* ── end BANNER_CSS ── */
/* ── begin BOX_CSS ── */
.sponsor-box-slot{position:fixed;right:14px;bottom:14px;z-index:40;display:flex;flex-direction:column;
  gap:8px;pointer-events:none;}
.sponsor-box-slot:empty{display:none;}
.sponsor-box{pointer-events:auto;width:112px;background:#fff;border:1px solid #e6dfd4;border-radius:10px;
  padding:6px;box-shadow:0 8px 24px rgba(40,32,24,.12);}
.sponsor-box-img{display:block;width:100px;height:100px;object-fit:cover;border-radius:6px;margin:0 auto;}
.sponsor-box-label{display:block;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:#7a7168;margin-top:5px;line-height:1.3;text-align:center;}
.sponsor-box-a{text-decoration:none;color:inherit;display:block;}
@media(max-width:600px){.sponsor-box-slot{right:8px;bottom:8px;}
  .sponsor-box{width:92px;padding:5px;}
  .sponsor-box-img{width:80px;height:80px;}}
/* ── end BOX_CSS ── */