/* Paid placements and the advertiser/owner pages. Uses each site's own tokens (--card, --rule,
   --ink, --quiet, --accent) so ads follow the site's theme but always look distinct from stories:
   dashed frame, tinted background and a disclosure label that is never hidden. */

.ad-slot[hidden] { display: none; }
.ad-slot { margin: 18px 0; }
.ad {
  position: relative; border: 1px dashed var(--ad-rule, var(--rule)); border-radius: 10px;
  background: var(--ad-bg, color-mix(in srgb, var(--card) 88%, var(--accent) 12%)); padding: 26px 12px 12px;
}
.ad-label {
  position: absolute; top: 6px; left: 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--quiet);
}
.ad-link { display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.ad-link:hover .ad-headline { text-decoration: underline; }
.ad-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.ad-img { width: 200px; max-width: 40%; height: auto; border-radius: 6px; flex: none; background: var(--chip); }
.ad-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-headline { font-size: 15.5px; }
.ad-body { color: var(--quiet); font-size: 13.5px; }
.ad-by { color: var(--quiet); font-size: 12px; }

/* Sponsor line: one quiet line under the masthead. */
.ad-sponsor-line { padding: 6px 12px 6px 92px; border-radius: 8px; }
.ad-sponsor-line .ad-label { top: 50%; transform: translateY(-50%); }
.ad-sponsor-line .ad-link { flex-wrap: wrap; gap: 4px 10px; }
.ad-sponsor-line .ad-text { flex-direction: row; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.ad-sponsor-line .ad-headline { font-size: 13.5px; }
.ad-sponsor-line .ad-body, .ad-sponsor-line .ad-by { font-size: 12.5px; }

/* Supporters strip: small logos in the footer. */
.ad-slot[data-ad-slot=supporters] { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ad-supporters { padding: 22px 8px 8px; }
.ad-supporters .ad-link { flex-direction: column; align-items: flex-start; gap: 6px; }
.ad-supporters .ad-img { width: 150px; max-width: 100%; }
.ad-supporters .ad-body { display: none; }
.ad-supporters .ad-label { left: 8px; }

@media (max-width: 560px) {
  .ad-link { flex-direction: column; align-items: flex-start; }
  .ad-img { width: 100%; max-width: 100%; }
  .ad-sponsor-line { padding: 24px 12px 8px; }
  .ad-sponsor-line .ad-label { top: 6px; transform: none; }
}

/* ---------- Advertise With Us / status / owner pages ---------- */
.adv [hidden] { display: none !important; }
.adv main { max-width: 860px; margin: 0 auto; padding: 24px 16px 40px; }
.adv > footer { max-width: 860px; margin: 0 auto; padding: 0 16px 32px; color: var(--quiet); font-size: 12.5px; }
.adv h1 { margin-top: 4px; }
.adv .back { color: var(--accent); text-decoration: none; font-size: 13.5px; }
.adv .lede { color: var(--quiet); max-width: 680px; }
.adv form { display: grid; gap: 14px; }
.adv fieldset { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px 14px; margin: 0; background: var(--card); }
.adv legend { font-weight: 700; padding: 0 6px; }
.adv label { display: grid; gap: 4px; font-size: 13.5px; }
.adv .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.adv input, .adv select, .adv textarea {
  font: inherit; font-size: 14.5px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rule);
  background: var(--bg); color: var(--ink); width: 100%;
}
.adv input:focus-visible, .adv select:focus-visible, .adv textarea:focus-visible, .adv button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.adv .hint { color: var(--quiet); font-size: 12.5px; }
.adv .count { color: var(--quiet); font-size: 12px; justify-self: end; }
.adv .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.adv button.primary, .adv a.primary {
  background: var(--accent); color: var(--bg); border: 0; border-radius: 8px; padding: 10px 18px; font: inherit;
  font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block;
}
.adv button.secondary {
  background: var(--btn); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 14px;
  font: inherit; cursor: pointer;
}
.adv button:disabled { opacity: .55; cursor: not-allowed; }
.adv .msg { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); }
.adv .msg.err { border-color: var(--d); color: var(--ink); }
.adv .msg.ok { border-color: var(--a); }
.adv .rates { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adv .rates th, .adv .rates td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.adv .rates td.num, .adv .rates th.num { text-align: right; font-variant-numeric: tabular-nums; }
.adv .tag { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: var(--chip); color: var(--quiet); }
.adv .preview-wrap { border: 1px solid var(--rule); border-radius: 10px; padding: 10px; background: var(--bg); }
.adv .terms li { margin: 4px 0; }
.adv .kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 14px; }
.adv .kv dt { color: var(--quiet); }
.adv .kv dd { margin: 0; }
.adv .steps { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; font-size: 12.5px; }
.adv .steps li { padding: 3px 10px; border-radius: 12px; border: 1px solid var(--rule); color: var(--quiet); }
.adv .steps li.done { border-color: var(--a); color: var(--ink); }
.adv .steps li.now { border-color: var(--accent); color: var(--ink); font-weight: 700; }

/* owner console */
.owner .bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.owner .camp { border: 1px solid var(--rule); border-radius: 10px; background: var(--card); padding: 12px; margin: 10px 0; }
.owner .camp h3 { margin: 0 0 4px; font-size: 15px; }
.owner .camp .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.owner .st { font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; padding: 2px 8px; border-radius: 10px; background: var(--chip); }
.owner .st-submitted, .owner .st-payment_review { background: color-mix(in srgb, var(--c) 30%, var(--chip)); }
.owner .st-approved { background: color-mix(in srgb, var(--b) 30%, var(--chip)); }
.owner .st-active, .owner .st-scheduled { background: color-mix(in srgb, var(--a) 30%, var(--chip)); }
.owner .st-rejected, .owner .st-canceled, .owner .st-expired { opacity: .75; }
.owner .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.owner .ledger { font-size: 12px; color: var(--quiet); margin: 6px 0 0; padding-left: 18px; }
.owner table.cal { border-collapse: collapse; font-size: 12px; }
.owner table.cal td, .owner table.cal th { border: 1px solid var(--rule); padding: 3px 6px; text-align: center; }
.owner td.full { background: color-mix(in srgb, var(--d) 30%, transparent); }
.owner td.some { background: color-mix(in srgb, var(--c) 25%, transparent); }
@media (max-width: 640px) { .owner .camp .grid { grid-template-columns: 1fr; } }