/* sponsormypin. Light page mixing the NoPlanB layout (centered hero, one
   input, one blue button, clean table) with the TrustMRR data language
   (monospace numbers, small caps labels, dense rows). Warm ground, ink text,
   hairlines, one blue accent. No gradients, no shadows. */

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-Regular.f3f6e717.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-Bold.c2befb59.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #F5F5F7;
  --surface: #FFFFFF;
  --ink: #111111;
  --muted: #66666E;
  --hairline: #E3E3E8;
  --row-hover: #EDEDF1;
  --accent: #3048C8;
  --on-accent: #FFFFFF;
  --error: #B42318;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.mono { font-family: var(--mono); }
.center { text-align: center; }

/* ---------------------------------------------------------------- header */

header.top {
  max-width: 960px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
}

body.wide header.top { max-width: 1100px; }

.wordmark {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.wordmark img { width: 20px; height: 20px; flex: none; }

header.top nav { display: flex; gap: 20px; }

header.top nav a {
  font-family: var(--mono);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

header.top nav a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ main */

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px 24px;
}

body.home main { max-width: 860px; }
body.wide main { max-width: 1100px; }

footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 48px;
  color: var(--muted);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--hairline);
  margin-top: 40px;
}

footer a { color: var(--muted); }
footer a:hover { color: var(--accent); }

h1 {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  margin: 48px 0 14px;
  letter-spacing: -0.01em;
}

p { margin: 0 0 16px; }

.sub {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 28px;
}

.rule {
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
}

a { color: var(--accent); }

a.btn, button.btn, input[type="submit"] {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 15px;
  font-family: var(--mono);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

a.btn:hover, button.btn:hover, input[type="submit"]:hover { opacity: 0.92; }

/* ------------------------------------------------------------------ hero */

.hero {
  text-align: center;
  padding: 40px 0 8px;
}

.hero h1 { font-size: 40px; }

.hero .sub { margin-bottom: 32px; }

.pill {
  display: inline-block;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 20px;
}

.addrow {
  display: flex;
  gap: 10px;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}

body:not(.home) .addrow { margin: 0; justify-content: flex-start; }

.addrow input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 17px;
  font-family: var(--mono);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.hero .rule { margin-top: 14px; }

@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .addrow { flex-direction: column; }
}

/* ----------------------------------------------------- marketplace cards */

.found {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 12px;
}

.sortbar {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  margin: -6px 0 14px;
}

.sortbar a {
  color: var(--muted);
  text-decoration: none;
}

.sortbar a:hover { color: var(--ink); }

.sortbar .on { color: var(--accent); }

.mgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .mgrid { grid-template-columns: 1fr; }
}

.mcard {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mcard:hover { border-color: var(--accent); }

.mcard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mcard-stats {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  gap: 18px;
  /* after the gap shorthand, which would otherwise reset it */
  row-gap: 10px;
}

.mcard-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mcard-stats .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.mcard-stats .val { font-size: 16px; white-space: nowrap; }

.mcard-foot { display: flex; justify-content: flex-end; }

a.btn.small { padding: 8px 16px; font-size: 15px; }

.rowmain {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.rowname { display: flex; flex-direction: column; min-width: 0; }

.rowhandle { font-weight: 700; }

.rowblurb {
  color: var(--muted);
  font-size: 13px;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--ground);
  flex: none;
}

.avatar.big { width: 64px; height: 64px; }
.mcard .avatar { width: 44px; height: 44px; }

.avatarhead { margin-bottom: 16px; }

.badge {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  color: var(--muted);
}

.badge.open { border-color: var(--accent); color: var(--accent); }

.recent {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.recent li { margin-bottom: 4px; }

.steps { margin: 0 0 16px; padding-left: 22px; max-width: 640px; }
body.home .steps { margin: 0 auto 16px; }
.steps li { margin-bottom: 10px; }

/* ----------------------------------------------------------------- forms */

label {
  display: block;
  margin: 18px 0 6px;
  font-size: 15px;
}

label .hint {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

label.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 24px 0 6px;
  color: var(--muted);
}

label.check input { width: auto; margin-top: 4px; accent-color: var(--accent); }

input[type="text"], input[type="email"], input[type="number"], textarea, select {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

textarea { min-height: 80px; resize: vertical; }

form .actions { margin-top: 28px; }

.error {
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 15px;
  background: var(--surface);
}

.code {
  font-family: var(--mono);
  font-size: 22px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px 16px;
  display: inline-block;
  margin-bottom: 20px;
}

.facts { border-top: 1px solid var(--hairline); margin: 24px 0; }

.facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--hairline);
  padding: 10px 0;
}

.facts span:first-child { color: var(--muted); }

.price { font-family: var(--mono); font-size: 28px; margin: 0 0 16px; }

.blurb { color: var(--muted); }

/* ----------------------------------------------------------------- admin */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tile-num { font-size: 24px; font-weight: 400; }

.tile-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Admin tables are wider than a phone. The wrapper scrolls, so the page does
   not. Nothing inside a .table-wrap is sticky, so the scroll container costs
   nothing. */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  white-space: nowrap;
}

td.wrapcell { white-space: normal; min-width: 220px; max-width: 340px; overflow-wrap: anywhere; }

th { color: var(--muted); font-weight: 700; }

td form { display: inline; }

td button {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 8px;
  margin-right: 4px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

td button:hover { border-color: var(--accent); color: var(--accent); }

.empty { color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------------- dashboard */

.stepline { font-size: 12px; margin: 0 0 8px; }

.step.done { color: var(--accent); }
.step.todo { color: var(--muted); }
.step.off { color: var(--muted); }
.steparrow { color: var(--muted); padding: 0 8px; }

.dealpost {
  border-left: 3px solid var(--hairline);
  padding-left: 12px;
  margin: 10px 0;
  font-size: 15px;
}

.dealpost.empty { color: var(--muted); }

/* Holds a long private deal link without pushing the page sideways. */
.linkbox { overflow-wrap: anywhere; }

input[type="file"] { font-size: 14px; font-family: inherit; }

/* --------------------------------------------------- admin compact cells */

.cellsub {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--sans);
  font-weight: 400;
}

td.actions-cell form { display: block; margin-bottom: 4px; }

.verifiedhandle { font-size: 18px; margin: 4px 0 0; }

/* ---------------------------------------------------------- agreement */

.agrline { font-size: 12px; margin: 0 0 8px; color: var(--muted); }
.agrline a { color: var(--accent); }

.agrlist { margin: 12px 0 24px; padding-left: 20px; }
.agrlist li { margin-bottom: 8px; font-size: 15px; }

.unsigned { color: var(--muted); }

.signdate {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--sans);
}

/* ------------------------------------------------------------ footer credit */

.builtby {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.byavatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--ground);
  flex: none;
}

/* ------------------------------------------------------- dashboard tabs */

.tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 8px;
}

.tabs { display: flex; gap: 20px; }

.tab {
  display: inline-block;
  padding: 6px 0 10px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

a.tab:hover { color: var(--accent); }

.tab.on {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.tablogout button {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
}

.tablogout button:hover { color: var(--accent); }

.tabbar + h2 { margin-top: 28px; }

/* ------------------------------------------------- needs your attention */

.attention {
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 16px;
}

.attention ul { margin: 0; padding-left: 20px; }
.attention li { margin: 5px 0; font-size: 15px; }
.attention p { margin: 0; }

/* ------------------------------------------------------------ deal rows */

.rowlist {
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
}

.dealrow + .dealrow { border-top: 1px solid var(--hairline); }

.dealrow > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.dealrow > summary::-webkit-details-marker { display: none; }
.dealrow > summary:hover { background: var(--row-hover); }

.dealrow .rowmain { min-width: 0; }
.dealrow .rowhandle { font-size: 16px; }
.dealrow .rowsub { color: var(--muted); font-size: 13px; }

.rowright {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.rowamt { font-size: 15px; }

.rowright::after {
  content: "\25B8";
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.dealrow[open] .rowright::after { content: "\25BE"; }

.dealbody {
  border-top: 1px solid var(--hairline);
  padding: 14px 16px 16px;
}

.dealbody .stepline { margin-top: 0; }
.dealbody .dealpost { margin-bottom: 0; }
.dealform { margin-top: 16px; }

@media (max-width: 560px) {
  .dealrow > summary { flex-wrap: wrap; }
  .rowright { width: 100%; justify-content: flex-start; }
  .rowright::after { margin-left: auto; }
}

/* -------------------------------------------------------------- feedback */

.sentnote {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  color: var(--muted);
  font-size: 15px;
}

/* ------------------------------------------------------- mobile header */

@media (max-width: 600px) {
  header.top { flex-wrap: wrap; row-gap: 6px; padding: 12px 16px; }
  header.top nav { width: 100%; justify-content: flex-start; gap: 16px; }
  header.top nav a { font-size: 13px; white-space: nowrap; }
}

/* ------------------------------------------------------------- x button */

a.btn.xbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #000;
  color: #fff;
}

a.btn.xbtn:hover { background: #1a1a1a; color: #fff; opacity: 1; }

.xglyph { display: block; flex: none; }

/* ------------------------------------------------- verified X metrics */

.vtag {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 0 5px;
  margin-left: 5px;
  vertical-align: 1px;
}

.facts .vtag { font-size: 10px; padding: 1px 6px; }

/* X's own check, next to the handle on a card. */
.xcheck {
  display: inline-block;
  color: var(--accent);
  margin-left: 3px;
  vertical-align: -2px;
}

.vfacts {
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--muted);
}

/* ------------------------------------------------- sponsor request picker */

/* One checkbox row per creator, borrowing the directory card's hairline box,
   avatar size and monospace numbers so the list reads as the same object. */
.picklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 0;
}

.pickrow {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0;
  color: var(--ink);
  cursor: pointer;
}

.pickrow:hover { border-color: var(--accent); }

.pickrow input { width: auto; margin: 0; flex: none; accent-color: var(--accent); }

.pickrow .avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; }

.pickrow .pickname { flex: 1 1 auto; min-width: 0; font-size: 15px; }

.pickrow .picknums {
  display: flex;
  gap: 16px;
  flex: none;
  text-align: right;
}

.pickrow .picknums span {
  font-family: var(--mono);
  font-size: 14px;
  white-space: nowrap;
}

.pickrow .picknums .flw { color: var(--muted); }

@media (max-width: 560px) {
  .pickrow { flex-wrap: wrap; }
  .pickrow .picknums { width: 100%; justify-content: flex-start; padding-left: 48px; }
}

/* Most sponsors tell us what they sell and let us pick, so the list is
   folded away. Open by default only when a creator was picked already. */
.pickmore { margin: 24px 0 0; }

.pickmore > summary { font-size: 15px; cursor: pointer; }

/* The picker's group box carries the name "Creators" for a screen reader.
   Stripped back to a plain block so it looks exactly like a form label. */
.pickgroup { border: 0; padding: 0; margin: 0; min-width: 0; }

.pickgroup legend { padding: 0; margin: 18px 0 6px; font-size: 15px; }

/* ------------------------------------------------------ sponsors listing */

/* Sponsor cards reuse the creator card wholesale. Two rules cover the only
   two differences: the company's @handle sits beside its name, and a budget
   range is a phrase rather than a number, so that one stat may wrap. */
.scard-handle { font-weight: 400; font-size: 13px; color: var(--muted); text-decoration: none; }

.scard-handle:hover { text-decoration: underline; }

.mcard-stats .val.wrapval { white-space: normal; }

/* ------------------------------------------------- creators/sponsors seg */

/* The toggle and the sort bar share one row above the card grid. Under
   640px the sort bar drops to its own line and the toggle keeps its size. */
.dir-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.dir-bar .sortbar { margin: 0; }

.seg {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
}

.seg-item {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 999px;
  transition: none;
}

.seg-item:hover { color: var(--ink); }

.seg-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.seg-active,
.seg-active:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.seg-count { font-weight: 400; color: var(--muted); }

.seg-active .seg-count { color: inherit; opacity: 0.8; }

/* ------------------------------------------------------- card tightening */

/* The badge slot is emitted even when there is nothing to say, and the head
   keeps a floor height, so cards in a row line up whatever their state. */
.mcard-badge { flex: none; }

.mcard-creator .mcard-head { min-height: 64px; }

/* Exactly two lines of bio, cut with an ellipsis past that. Fixing the height
   rather than capping it keeps every creator card head the same size, so the
   stats rows of two cards side by side sit on the same line. Sponsor cards
   are not in this grid and keep their natural tagline height. */
.mcard-creator .rowblurb {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: 2.8em;
}

/* ---------------------------------------------------- listing page layout */

/* The listing page runs two columns on a wide screen: the account on the
   left, the buy card on the right. Its width sits between the reading column
   and the full-width directory. */
body.profile main { max-width: 980px; }

/* The header rule and the footer rule line up with the column they sit over,
   so the wordmark starts where the heading does. */
body.profile header.top,
body.profile footer { max-width: 980px; }

.buycard {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 24px;
  margin-top: 8px;
}

.buycard .price { margin: 0 0 2px; }
.buycard .rule { margin: 0 0 10px; }
.buycard form { margin: 0 0 14px; }
.buycard label.check { margin: 0 0 12px; }
.buycard .error { margin-bottom: 12px; }

/* The card is a narrow column, so its one field stacks over its button
   instead of sitting beside it. */
.buycard .addrow {
  flex-direction: column;
  align-items: stretch;
  max-width: none;
}

.buycard .addrow .btn { width: 100%; text-align: center; }

.buycard .buynote { margin: 0; }
.buycard .buylink { margin: 0 0 6px; }
.buycard > :last-child { margin-bottom: 0; }

.pcol-facts { margin-top: 20px; }
.pcol-facts .facts { margin-top: 0; }

/* Two columns from 900px up. The three blocks are placed by hand, so the
   markup keeps the order a phone reads: account, buy card, facts. */
@media (min-width: 900px) {
  .pgrid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .pgrid > .pcol-head { grid-column: 1; grid-row: 1; }
  .pgrid > .pcol-facts { grid-column: 1; grid-row: 2; margin-top: 0; }
  .pgrid > .buycard {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 24px;
    margin-top: 0;
  }
}

/* The handle in the heading runs to 15 characters, which at the full 30px
   takes a phone three lines. */
@media (max-width: 560px) {
  .pcol-head h1 { font-size: 23px; }
}

/* --------------------------------------------- sponsors-wanted banner */

/* The poster above the toggle, in place of the old muted notice line: the
   one thing the directory itself cannot say is that it wants sponsors. */
.sw {
  margin: 0 0 16px;
  border-radius: 8px;
}

.sw-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
}

.sw-text { min-width: 0; }

.sw-head {
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.sw-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.sw-line + .sw-line { margin-top: 6px; }

.sw-btn {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.sw-btn:hover { opacity: 0.92; }

.sw-b { background: var(--surface); border: 3px solid var(--accent); }
.sw-b .sw-head { font-size: 44px; color: var(--accent); }
.sw-b .sw-line { color: var(--ink); }
.sw-b .sw-btn { background: var(--accent); color: var(--on-accent); }

/* Phone: the button drops under the text and takes the full width. */
@media (max-width: 640px) {
  .sw-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px 18px;
  }

  .sw-btn { width: 100%; text-align: center; }
  .sw-b .sw-head { font-size: 30px; }
}

/* ------------------------------------------- home directory: three per row */

/* The directory keeps the wide card shape, so three per row needs a wider
   band than the 860px reading column. From 1320px up the home page (and
   /sponsors, which is the same shell) runs a 1240px band, which leaves each
   card about 389px: the same rectangle, three across. Below 1320px nothing
   changes and the grid stays two across. The header rule and the footer rule
   move with it so the wordmark starts where the first card does. */
@media (min-width: 1320px) {
  body.home main,
  body.home header.top,
  body.home footer { max-width: 1240px; }

  body.home .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------- admin: nav and a deal */

body.wide h2[id] { scroll-margin-top: 64px; }

/* The whole creator cell is the link to the deal, so the month under it keeps
   the muted colour instead of taking the link colour. */
td a .cellsub { color: var(--muted); }
a.rowopen { display: block; margin-bottom: 4px; font-size: 13px; }

/* The two sides of one deal, side by side on a desktop and stacked below. */
.parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin: 24px 0;
}

.party {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 18px;
  min-width: 0;
}

.party h2 { margin-top: 0; }
.party .facts { margin: 12px 0 0; }
.party .facts div:last-child { border-bottom: 0; }
.party .rule { margin-bottom: 0; }

.partyhead { display: flex; align-items: center; gap: 12px; }
.partyname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.partyx { font-size: 12px; color: var(--muted); }

.parties .facts span:last-child { text-align: right; overflow-wrap: anywhere; }

.dealactions { margin: 12px 0 8px; }
.dealactions form { display: inline; }

.dealactions button {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 8px;
  margin: 0 4px 4px 0;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.dealactions button:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 700px) {
  .parties { grid-template-columns: 1fr; }
}

/* ============================================= admin shell (owner pages) */

/* The admin runs wider than any public page: eight columns of deals plus a
   section list. The header and footer follow so the page reads as one column
   of content, not a narrow bar over a wide table. */
body.admin main { max-width: 1240px; padding-top: 28px; }
body.admin header.top,
body.admin footer { max-width: 1240px; }

.adminlayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.adminmain { min-width: 0; }

/* Below 1000px the section list is a wrapping row of the same links above the
   page head. No sidebar, no horizontal scroll. */
.adminside {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.adminmark {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.adminnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.anav {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 2px 0;
  border-left: 2px solid transparent;
}

a.anav:hover { color: var(--accent); }

/* How many rows in that section are waiting on the owner. Left off entirely
   when the count is zero, so a badge always means "there is something here". */
.navcount {
  font-size: 11px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}

.anav.on .navcount { background: var(--ink); }

.anav.on { color: var(--ink); font-weight: 700; }

@media (min-width: 1000px) {
  .adminlayout { grid-template-columns: 172px 1fr; gap: 32px; }

  .adminside {
    display: block;
    position: sticky;
    top: 20px;
    padding-bottom: 0;
    border-bottom: 0;
    border-right: 1px solid var(--hairline);
    padding-right: 20px;
  }

  .adminmark { display: block; margin-bottom: 14px; }
  .adminnav { display: block; }

  .anav {
    display: block;
    padding: 5px 0 5px 12px;
    margin-left: -2px;
  }

  /* The active section keeps its accent bar on the sidebar's own hairline. */
  .anav.on { border-left-color: var(--accent); }
}

/* ------------------------------------------------------ admin page head */

.pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.pageheadtext { min-width: 0; }
.pagehead h1 { margin: 0; font-size: 26px; overflow-wrap: anywhere; }

.pagesub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* The one blue thing on a page that has one next step. */
.pageaction {
  flex: none;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}

.pageaction:hover { opacity: 0.9; }

body.admin .tiles { margin: 20px 0 4px; }
body.admin .tile { padding: 11px 13px; }
body.admin .tile-num { font-size: 19px; }

/* -------------------------------------------------- admin: deal filters */

.filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 18px 0 12px;
}

.fchips { display: flex; flex-wrap: wrap; gap: 6px; }

.fchip {
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

a.fchip:hover { border-color: var(--accent); color: var(--accent); }

.fchip.on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.fchipnum { opacity: 0.7; }

.dealsearch { display: flex; align-items: center; gap: 8px; }

.dealsearch input[type="search"] {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 10px;
  min-width: 258px;
  max-width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.dealsearch button {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.dealsearch button:hover { border-color: var(--accent); color: var(--accent); }
.clearq { font-size: 13px; color: var(--muted); }

/* --------------------------------------------------- admin: status chips */

.statuschip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.chip-pending, .chip-listed { background: #E7E7EC; color: #45454D; }
.chip-paid { background: #E4E8FA; color: #22348F; }
.chip-pinned, .chip-approved { background: #DFF1E3; color: #1D6B33; }
.chip-paidout { background: #1D6B33; color: #FFFFFF; }
.chip-refunded, .chip-rejected { background: #FBE3E1; color: #8C1E17; }
.chip-expired, .chip-paused, .chip-hidden {
  background: transparent;
  border-color: var(--hairline);
  color: var(--muted);
}

/* Waiting to be looked at is not the same as waiting for a decision we have
   already taken, so the waitlist gets its own colour. */
.chip-waitlist { background: #FBEED7; color: #7A4E05; }

/* ----------------------------------------------------- admin: deal rows */

.cellage { color: var(--muted); font-size: 13px; }

/* A cell with a second, muted line keeps both lines together. Without the
   wrapper the two would become separate flex items in the phone layout and
   land at opposite ends of the row. */
.cellval { display: block; min-width: 0; }

/* Avatar and the handle under it are one thing, so they stay together when
   the row folds into a card. */
.cellwho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar.sm { width: 28px; height: 28px; }

/* The live profile page is the main link, so the second one to X beside it
   stays small and quiet. */
.xlink {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* A yes/no fact, not a status: no chip, just the word. */
.vmark { color: #1D6B33; font-size: 13px; }
.vno { color: var(--muted); font-size: 13px; }

.rowact form { display: block; margin-bottom: 4px; }

td button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

td button.primary:hover { border-color: var(--accent); color: var(--on-accent); opacity: 0.9; }

/* The step this row is waiting on is not something the owner can do, so it
   reads as a note rather than a button that would be refused. */
.waiting {
  display: block;
  color: var(--muted);
  font-size: 13px;
  white-space: normal;
}

/* Everything that is not the next expected step. Closed by default, so a row
   shows one action. */
details.more { margin-top: 2px; }

details.more summary {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

details.more summary:hover { color: var(--accent); }
details.more form { display: block; margin-top: 4px; }

/* A form on an admin page would otherwise stretch the full 1240px column. */
.formcol { max-width: 560px; }

/* ------------------------------------------- admin: request and note cards */

/* Requests and feedback are things to read, not rows to compare, so they are
   a stack of cards instead of a table. */
.adminlist { display: grid; gap: 12px; margin: 18px 0 4px; }

.acard {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 16px;
}

.acardhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.acardwho { font-size: 15px; overflow-wrap: anywhere; }
.acardmail { color: var(--muted); font-size: 13px; }

.acardlabel {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 10px 0 2px;
}

.acardtext { margin: 0 0 8px; font-size: 15px; overflow-wrap: anywhere; }

.acardfacts { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }

.acardfacts li {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  border-top: 1px solid var(--hairline);
}

.acardfacts li:first-child { border-top: 0; }

.factlabel {
  flex: none;
  width: 140px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.9;
}

.factval { min-width: 0; overflow-wrap: anywhere; }

/* Copy and paste into a reply, so the line breaks are the point. */
.replytpl {
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--ground);
}

/* On a phone every admin row is a card of label-and-value lines, so the table
   never pushes the page sideways. Any table marked .stack gets it. */
@media (max-width: 700px) {
  table.stack,
  table.stack tbody,
  table.stack tr,
  table.stack td { display: block; width: 100%; }

  table.stack thead { display: none; }

  table.stack { border-left: 0; border-right: 0; }

  table.stack tr {
    padding: 10px 12px;
    border-bottom: 1px solid var(--hairline);
  }

  table.stack tr:last-child { border-bottom: 0; }

  table.stack td {
    border: 0;
    padding: 2px 0;
    white-space: normal;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }

  table.stack td::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
  }

  table.stack td .cellval { text-align: right; overflow-wrap: anywhere; }

  /* A wrapping cell has a desktop width that would fight the card layout. */
  table.stack td.wrapcell { min-width: 0; max-width: none; }

  /* Avatar and text keep their pair and move to the value side together. */
  table.stack td .cellwho { justify-content: flex-end; }

  table.stack td.rowact { display: block; margin-top: 8px; }
  table.stack td.rowact::before { display: block; margin-bottom: 4px; }

  /* A finished deal has no next step, so the card does not carry a bare
     "NEXT" label with nothing under it. */
  table.stack td.noact { display: none; }

  .dealsearch { width: 100%; }
  .dealsearch input[type="search"] { min-width: 0; flex: 1; }

  /* A 140px label column leaves nothing for the value on a phone. */
  .acardfacts li { display: block; padding: 5px 0; }
  .factlabel { display: block; width: auto; line-height: 1.6; }
}

/* ================================== admin: one deal, two columns (phase 3) */

/* The deal reads down the left (what happened, who is on each side, what is
   being pinned) and is acted on from the right (the buttons, the money, the
   mail log). Below 1100px the right column comes first, so the Actions card
   is the first thing on a phone, and the reading column follows it. */

.backlink { font-size: 13px; margin: 0 0 10px; }

.deallayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

/* Below 1100px only: the sidecards (Actions first) come before the reading
   column. The DOM order is unchanged; above 1100px the columns sit in their
   written order, left then right. */
.dealmain { min-width: 0; order: 2; }

/* The left column is already narrow, so the two party cards go under one
   another rather than side by side. */
.dealmain .parties { grid-template-columns: 1fr; margin: 20px 0; }

.dealside { display: grid; gap: 16px; min-width: 0; order: 1; }

.sidecard {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
  min-width: 0;
}

.sidecard h2 { margin: 0; font-size: 15px; }
.sidecard .facts { margin: 8px 0 0; }
.sidecard .facts div:last-child { border-bottom: 0; }
.sidecard .facts span:last-child { text-align: right; overflow-wrap: anywhere; }
.sidecard .rule { margin-bottom: 0; font-size: 13px; }
.sidecard .empty { margin: 8px 0 0; }
.sidecard .table-wrap { margin-top: 8px; }
.sidecard table { font-size: 12px; }
.sidecard label { display: block; font-size: 13px; margin-top: 8px; }
.sidecard select { max-width: 100%; }
.sidecard .dealactions { margin: 10px 0 0; }
.sidecard .dealactions form { display: block; }
.sidecard details.more { margin-top: 10px; }
.sidecard details.more select { font-size: 13px; padding: 5px 8px; width: 100%; }

/* Only the primary action is blue. The month form's submit sits inside More,
   so it drops the site-wide blue and takes the plain look every other
   secondary action in the card has. */
.sidecard details.more input[type="submit"] {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.sidecard details.more input[type="submit"]:hover {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

/* The one blue thing in the Actions card: the step this deal is expected to
   take next. Everything else in there is a plain button inside More. */
.dealactions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  padding: 7px 12px;
}

.dealactions button.primary:hover {
  border-color: var(--accent);
  color: var(--on-accent);
  opacity: 0.9;
}

@media (min-width: 1100px) {
  .deallayout { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
  .dealmain { order: 1; }

  /* A tall Actions or Mail log card must not push its own bottom past the
     viewport where sticky would strand it: the card scrolls inside itself. */
  .dealside {
    position: sticky;
    top: 20px;
    order: 2;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
}

/* ==================================== admin: needs attention (deals page) */

.dealsgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.dealsmain { min-width: 0; }

/* The panel is in the page twice and shown once: a closed details block above
   the list below 1200px, a right column from 1200px up. The hidden one is
   display:none, so it is out of the reading order and out of the
   accessibility tree at whichever width applies. */
.attside { display: none; }

.attnarrow {
  margin: 16px 0 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 14px;
}

.attnarrow summary {
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
}

.attnarrow summary:hover { color: var(--accent); }

.atthead { margin: 0 0 6px; font-size: 15px; }

.attrow {
  display: block;
  padding: 7px 0;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
}

.attrows .attrow:first-child { border-top: 0; }
.attrow:hover .attwho { color: var(--accent); }
.attwho { display: block; font-size: 13px; overflow-wrap: anywhere; }
.attwhy { display: block; font-size: 12px; color: var(--muted); }

.attlinks {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.attlink { font-size: 13px; }

@media (min-width: 1200px) {
  .dealsgrid { grid-template-columns: minmax(0, 1fr) 320px; }
  .attnarrow { display: none; }

  /* The panel takes 320px off the table's column, so the table gives it back:
     a size smaller, tighter cell padding, and the two widest columns allowed
     to wrap. Without this the Next column, the one with the button, is pushed
     out of sight inside the wrapper's own scroll. Nothing here applies to any
     other admin table: every rule is inside .dealsgrid. */
  .dealsgrid table.stack { font-size: 13px; }

  .dealsgrid table.stack th,
  .dealsgrid table.stack td { padding: 8px 7px; }

  .dealsgrid table.stack td[data-label="Sponsor"],
  .dealsgrid table.stack td.rowact { white-space: normal; }

  /* A long sponsor email is one unbreakable word, so without this the column
     keeps its full width and the table still overflows. */
  .dealsgrid table.stack td[data-label="Sponsor"] { overflow-wrap: anywhere; }

  /* A long waiting list must not run past the viewport: the sticky card
     scrolls inside itself so the count links stay reachable. */
  .attside {
    display: block;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface);
    padding: 12px 14px;
  }
}

/* ======================================== admin: settings (read only) */

.setlist { margin: 18px 0 4px; }
.setgroup { font-size: 15px; margin: 24px 0 6px; }
.setgroup:first-child { margin-top: 0; }

.setrows { list-style: none; margin: 0; padding: 0; }

.setrows li {
  display: grid;
  grid-template-columns: 250px 150px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--hairline);
}

.setrows li:first-child { border-top: 0; }

.setname { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.setval { font-size: 14px; overflow-wrap: anywhere; }
.setwhy { font-size: 13px; color: var(--muted); }

@media (max-width: 700px) {
  .setrows li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; }
  .setwhy { grid-column: 1 / -1; }
}