/* Attentional marketplace brand system, July 2026. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Lora:wght@500;600;700&display=swap");

:root {
  --brand-base: #09090b;
  --brand-primary: #ed2c2c;
  --brand-primary-hover: #cf2020;
  --brand-primary-soft: #fff0f0;
  --brand-surface: #ffffff;
  --brand-background: #f8f8f8;
  --brand-border: #dee2e6;
  --brand-muted: #697078;
  --font-ui: "Inter", Arial, sans-serif;
  --font-display: "Lora", Georgia, serif;

  /* Compatibility aliases used by the existing marketplace UI. */
  --purple: var(--brand-primary);
  --purple-mid: var(--brand-primary-hover);
  --purple-light: var(--brand-primary-soft);
  --bg: var(--brand-background);
  --white: var(--brand-surface);
  --text: var(--brand-base);
  --muted: var(--brand-muted);
  --border: var(--brand-border);
  --ink: var(--brand-base);
  --soft: var(--brand-background);
  --panel: var(--brand-surface);
  --line: var(--brand-border);
  --line-strong: #c9cfd5;
  --charcoal: var(--brand-base);
  --blue: var(--brand-primary);
  --red: var(--brand-primary);
}

html,
body,
button,
input,
select,
textarea,
code,
pre,
kbd,
samp {
  font-family: var(--font-ui);
}

body {
  color: var(--brand-base);
  background-color: var(--brand-background);
}

.nav-admin-badge {
  background: var(--brand-base);
}

.sidebar-link.active .sidebar-count {
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
}

.td-logo.purple {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
}

thead th {
  background: var(--brand-background);
}

tbody tr:hover td {
  background: var(--brand-primary-soft);
}

.advertiser-display-heading {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.login-sub,
.gate-subtitle,
.hero-subhead,
.section-sub,
.rec-sub,
.discover-results-sub,
.saved-empty-sub,
.confirm-sub,
.m-card-sub,
.ops-panel-sub,
.toggle-sub,
.trustsignal-form-sub,
.trustsignal-error-sub,
.trustsignal-loading-sub,
.trustsignal-research-sub,
.trustsignal-section-sub {
  font-weight: 500;
  line-height: 1.5;
}

.section-title,
.page-title {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
}

.drawer-name,
.rec-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
}

.cc-name,
.list-name,
.rec-card-name,
.dri-name,
.saved-card-name {
  font-weight: 700;
  line-height: 1.5;
}

.cat-name,
.rail-label,
.section-kicker,
.contact-kicker,
.rec-eyebrow,
.stat-label,
.drawer-section-label,
.cc-pub,
.fw-pub,
.drawer-pub,
.gate-field label,
.field label,
.sidebar-label,
.stat-card-label,
.form-label,
.ops-action-label,
.ops-log-label,
.ops-readiness-label,
.ops-step-kicker,
.ops-summary-label,
.test-result-label,
.trustsignal-decision-label,
.trustsignal-list-label,
.trustsignal-record-label,
.trustsignal-scope-label,
.trustsignal-score-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

button,
.btn,
.cat-tile,
.gate-submit {
  font-weight: 700;
}

@media (min-width: 640px) {
  body.advertiser-unlocked nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  body.advertiser-unlocked .nav-logo {
    justify-self: start;
  }

  body.advertiser-unlocked .nav-tabs {
    justify-self: center;
  }

  body.advertiser-unlocked .nav-right {
    justify-self: end;
  }
}

@media (min-width: 768px) {
  .drawer {
    max-height: calc(100vh - 32px);
  }

  .drawer-hero {
    height: 88px;
  }

  .drawer-logo {
    width: 60px;
    height: 60px;
    border-radius: 15px;
  }

  .drawer-body {
    padding: 16px 18px;
  }

  .drawer-tags {
    margin-bottom: 12px;
  }

  .drawer-section-label {
    margin-top: 12px;
    margin-bottom: 7px;
  }

  .drawer-handles-list {
    gap: 8px;
  }

  .drawer-handle-row {
    padding: 9px 12px;
  }

  .drawer-stats-grid {
    gap: 8px;
  }

  .drawer-stat {
    padding: 9px;
  }

  .drawer-geo {
    padding: 9px 12px;
  }

  .drawer-cta {
    margin: 10px -18px 0;
    padding: 9px 18px;
  }

  .drawer-cta .btn-save {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .page,
  .section,
  #savedContent,
  .saved-toolbar,
  .saved-card {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-tab-bar {
    width: 100%;
  }

  .mobile-tab-bar .nav-tab {
    flex: 1 1 0;
    min-width: 0;
  }

  .saved-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .saved-card {
    width: 100%;
  }

  .saved-card-name,
  .saved-card-pub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .drawer {
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .drawer::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

a,
button,
input,
select,
textarea {
  accent-color: var(--brand-primary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(237, 44, 44, 0.24);
  outline-offset: 2px;
}

.advertiser-gate,
.catalog-gate {
  background:
    radial-gradient(circle at 50% 0%, rgba(237, 44, 44, 0.14), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
}

.stats-bar {
  background:
    radial-gradient(circle at 88% 0%, rgba(237, 44, 44, 0.5), transparent 34%),
    linear-gradient(135deg, #09090b 0%, #242426 100%);
}

.recommend-panel,
.contact-band {
  background:
    radial-gradient(circle at 100% 0%, rgba(237, 44, 44, 0.24), transparent 36%),
    linear-gradient(135deg, #09090b 0%, #242426 100%);
}

.td-logo.purple,
.pub-logo,
.fw-cover.purple,
.cc-logo,
.list-logo {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
}

.login-card,
.gate-card,
.table-card,
.stat-card,
.catalog-card,
.featured-wide-card {
  border-color: var(--brand-border);
  box-shadow: 0 16px 42px rgba(9, 9, 11, 0.08);
}

.login-btn:hover,
.btn-primary:hover {
  background: var(--brand-primary-hover);
}

.nav-logo img,
.login-logo img,
.gate-logo img,
.brand-link img {
  width: auto;
  object-fit: contain;
}

::selection {
  color: #ffffff;
  background: var(--brand-primary);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}