:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-subtle: #eff6ff;
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-light: #94a3b8;
  --border: #e2e8f0;
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --bg-muted: #f8fafc;
  --bg-dark: #0f172a;
  /* A bought ad: the green of .btn-success and .badge-success. The app has no dark theme for
     cards yet (only the impersonation banner changes), so there are no dark values. */
  --bought: #16a34a;
  --bought-strong: #15803d; /* white text on it: about 5:1 */
  --bought-bg: #f0fdf4;
  --bought-border: #86efac;
  /* Impersonation banner: amber with dark text, about 10.7:1 contrast. Dark-mode
     values below swap to a dark amber/brown with light text (about 13.5:1). */
  --impersonation-bg: #fbbf24;
  --impersonation-border: #d97706;
  --impersonation-text: #0f172a;
  --impersonation-button-bg: #0f172a;
  --impersonation-button-text: #ffffff;
  --impersonation-button-hover-bg: #1e293b;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark amber/brown banner with light text; button colors invert to match.
       #fef3c7 on #451a03 and #451a03 on #fef3c7 are both about 13.5:1.
       Note: the app has no data-theme toggle yet, so this only responds to
       the OS-level color-scheme preference. Add a `[data-theme="dark"]`
       selector alongside this block if/when the app gains one. */
    --impersonation-bg: #451a03;
    --impersonation-text: #fef3c7;
    --impersonation-button-bg: #fef3c7;
    --impersonation-button-text: #451a03;
    --impersonation-button-hover-bg: #fde68a;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  color: var(--text-main);
  background-color: var(--bg-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

/* The logo SVGs are pixel grids: 32 px high is 2 px per logo pixel. */
.nav-brand-logo {
  display: block;
  height: 32px;
  width: auto;
  image-rendering: pixelated;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.nav-left {
  flex: 1 1 auto;
}

.nav-container {
  gap: 0.75rem;
}

.nav-right {
  flex: 0 0 auto;
  gap: 0.75rem;
}

.nav-email {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.nav-link:hover {
  color: var(--primary);
}

.btn-signup {
  background-color: var(--primary);
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.btn-signup:hover {
  background-color: var(--primary-hover);
}

.btn-outline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.message-container {
  margin-top: 1rem;
}

.notice {
  padding: 0.75rem 1rem;
  background-color: #e6f4ea;
  color: #137333;
  border-radius: 6px;
  margin: 0;
}

.alert {
  padding: 0.75rem 1rem;
  background-color: #fce8e6;
  color: #c5221f;
  border-radius: 6px;
  margin: 0;
}

.site-main {
  flex: 1;
}

.account-status-card {
  background-color: var(--primary-subtle);
  border-bottom: 1px solid #bfdbfe;
  padding: 1rem 0;
}

.account-status-card p {
  margin: 0.25rem 0;
}

.status-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}

.hero-section {
  padding: 4.5rem 0 3.5rem;
  text-align: center;
  background: radial-gradient(circle at 50% 10%, #eff6ff 0%, #ffffff 75%);
}

.hero-container {
  max-width: 760px;
}

.hero-badge {
  display: inline-block;
  background-color: #dbeafe;
  color: #1e40af;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 1rem;
  color: var(--text-main);
}

/* The lockup is a pixel grid: 64 px high is 4 px per logo pixel. */
.hero-logo {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.hero-subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 2rem;
}

.cta-button {
  display: inline-block;
  background-color: var(--primary);
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 0.95rem 2.25rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  transition: background-color 0.15s, transform 0.15s;
}

.cta-button:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
}

.hero-secondary-links {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-light);
}

.hero-secondary-links a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.hero-secondary-links a:hover {
  text-decoration: underline;
}

.hero-cta-brief {
  margin-top: 1rem;
}

.hero-brief-link {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
}

.hero-brief-link:hover {
  color: var(--primary-hover);
}

.mission-vision-section {
  padding: 4.5rem 0;
  background-color: var(--bg-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .mission-vision-grid {
    grid-template-columns: 1fr;
  }
}

.mission-card,
.goal-card,
.vision-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.badge-tag {
  display: inline-block;
  background-color: var(--primary-subtle);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
}

.mission-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  margin: 0 0 0.5rem;
}

.card-desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.vision-text {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.principles-section {
  padding: 4.5rem 0;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border);
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 960px) {
  .principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.principle-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.principle-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.principle-desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.hero-alt-cta {
  margin-top: 0.5rem;
}

.cta-sublink {
  margin-top: 0.5rem;
}

.cta-sublink a {
  color: var(--primary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
}

.cta-callout-card {
  margin-top: 2rem;
  padding: 2rem;
  background: #ffffff;
  border: 1px dashed var(--primary);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cta-callout-card p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-main);
}

.bottom-cta-lead {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 1.5rem;
}

.process-section {
  padding: 4.5rem 0;
  background-color: #ffffff;
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0 0 0.5rem;
}

.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.0625rem;
  max-width: 560px;
  margin: 0 auto 3rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.step-badge {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--primary-subtle);
  color: var(--primary);
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.step-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--text-main);
  line-height: 1.4;
}

.step-desc {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.features-section {
  padding: 4.5rem 0;
  background-color: var(--bg-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem;
}

.feature-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text-main);
}

.feature-card p {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.bottom-cta-section {
  padding: 4.5rem 0;
  text-align: center;
  background-color: var(--bg-dark);
  color: #ffffff;
}

.bottom-cta-section h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
}

.bottom-cta-section p {
  color: #cbd5e1;
  font-size: 1.125rem;
  max-width: 580px;
  margin: 0 auto 2rem;
}

.site-footer {
  padding: 2rem 0;
  background-color: #ffffff;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-light);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-container p {
  margin: 0;
}

.footer-tagline {
  color: var(--text-muted);
}

form div {
  margin-bottom: 1rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  max-width: 480px;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="submit"],
button {
  cursor: pointer;
  padding: 0.5rem 1rem;
  background-color: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
}

input[type="submit"]:hover,
button:hover {
  background-color: var(--primary-hover);
}

@media (max-width: 768px) {
  .steps-grid,
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .nav-container {
    height: 56px;
    padding: 0 1rem;
  }

  .footer-container {
    flex-direction: column;
    text-align: center;
  }
}

.dashboard-page {
  padding: 2.5rem 0;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preview-card-media {
  background: #000000;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-card-media video,
.preview-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-card-placeholder {
  color: #94a3b8;
  font-size: 0.875rem;
  text-align: center;
  padding: 2rem;
}

.preview-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.preview-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text-main);
}

.preview-card-creator {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: -0.35rem 0 0.5rem;
}

.preview-card-headline {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.preview-card-text {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  flex: 1;
}

.preview-card-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-info {
  background: #e0f2fe;
  color: #0369a1;
}

.badge-success {
  background: #dcfce7;
  color: #15803d;
}

.badge-warning {
  background: #fef3c7;
  color: #b45309;
}

.preview-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* A card that opens the ad on a click anywhere (organization page). The title link is the
   only link to the ad: its ::after covers the card. The video, the rating and the buttons
   stay above it and keep their own clicks. */
.preview-card-clickable {
  position: relative;
  cursor: pointer;
  top: 0;
  transition: top 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.preview-card-clickable .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.preview-card-clickable .preview-card-media video,
.preview-card-clickable .rating,
.preview-card-clickable .icon-row > :not(.ai-notice-live), /* the toast stays fixed */
.preview-card-clickable :is(details, summary, input, select, textarea, label, .edit-video-form) {
  position: relative;
  z-index: 2;
}

/* The rating panel opens over the card body, so it stays above the buttons. */
.preview-card-clickable .rating {
  z-index: 3;
}

.preview-card-clickable:hover {
  top: -2px; /* not transform: a transform would move the fixed "Preparing…" toast into the card */
  border-color: #93c5fd; /* between --border and --primary */
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.preview-card-clickable:hover .preview-card-title a {
  color: var(--primary);
}

/* Keyboard: the focus ring is on the whole card, not only on the title. */
.preview-card-clickable:has(.stretched-link:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}

@supports selector(:has(*)) {
  .preview-card-clickable .stretched-link:focus-visible {
    outline: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-card-clickable {
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .preview-card-clickable:hover {
    top: 0;
  }
}

/* Small buttons: a link and a <button> get the same height and shape, and a label never breaks. */
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* .btn-sm comes after .btn-outline and set its border to transparent: an outline button then read as text
   ("Connect TikTok (direct)", "Check again", "Unlink"). Keep the outline. The border and color:
   input[type="submit"] ("Change budget") has no border and white text otherwise. */
.btn-outline.btn-sm {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
}

/* Secondary: an outline button beside a primary one. */
.btn-secondary {
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border);
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: var(--bg-muted);
  border-color: #cbd5e1;
}

.btn-success {
  background-color: #16a34a;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}

.btn-success:hover {
  background-color: #15803d;
}

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--bg-muted);
  border-radius: 8px;
  border: 1px dashed var(--border);
  margin-bottom: 2rem;
}

.purchases-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.purchases-table th,
.purchases-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.purchases-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.purchases-table td.nowrap {
  white-space: nowrap;
}

/* A wide table scrolls in its box on a phone; the page does not scroll sideways. */
.table-scroll {
  overflow-x: auto;
}

/* The buttons of a table row: one on top of the other, the same width. */
.table-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
}

.table-actions .button_to {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Onboarding Page & Layout */
.onboarding-page {
  padding: 3rem 0 4rem;
  background: radial-gradient(circle at 50% 0%, #eff6ff 0%, #ffffff 60%);
  min-height: calc(100vh - 140px);
}

.onboarding-container {
  max-width: 640px;
}

.onboarding-header {
  text-align: center;
  margin-bottom: 2rem;
}

.onboarding-badge {
  display: inline-block;
  background-color: var(--primary-subtle);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
  border: 1px solid #bfdbfe;
}

.onboarding-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
  color: var(--text-main);
}

.onboarding-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}

.onboarding-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.25rem;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
}

.auth-mark {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
}

/* Onboarding Form Elements & Alignment */
.onboarding-form {
  display: flex;
  flex-direction: column;
}

.onboarding-form div {
  margin-bottom: 0;
}

.onboarding-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.onboarding-form .form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.onboarding-form .form-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0;
}

.onboarding-form .form-required-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #dc2626;
  background-color: #fef2f2;
  border: 1px solid #fee2e2;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.onboarding-form .form-optional-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background-color: var(--bg-muted);
  border: 1px solid var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.onboarding-form input[type="text"],
.onboarding-form textarea,
.onboarding-form .form-input,
.onboarding-form .form-textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text-main);
  background-color: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.onboarding-form textarea,
.onboarding-form .form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.onboarding-form input[type="text"]:focus,
.onboarding-form textarea:focus,
.onboarding-form .form-input:focus,
.onboarding-form .form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.15);
}

.onboarding-form .form-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.onboarding-form .form-checkbox-group {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.onboarding-form .form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
}

.onboarding-form .form-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary);
}

.onboarding-form .form-checkbox-group .form-hint {
  flex-basis: 100%;
}

/* File Upload Box */
.file-upload-box {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  background-color: var(--bg-muted);
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.file-upload-box:hover {
  border-color: var(--primary);
  background-color: var(--primary-subtle);
}

.file-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.file-upload-icon {
  color: var(--primary);
  stroke: var(--primary);
}

.file-upload-text {
  width: 100%;
}

.form-file-input {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
}

.form-file-input::file-selector-button {
  padding: 0.45rem 0.95rem;
  margin-right: 0.75rem;
  background: #ffffff;
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.form-file-input::file-selector-button:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

/* Validation Alert */
.form-error-alert {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.form-error-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.form-error-icon {
  color: #dc2626;
  flex-shrink: 0;
}

.form-error-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #991b1b;
  margin: 0;
}

.form-error-list {
  margin: 0;
  padding-left: 1.25rem;
  color: #b91c1c;
  font-size: 0.875rem;
}

.form-error-list li {
  margin-bottom: 0.25rem;
}

/* Form Actions */
.onboarding-form .form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
}

.btn-primary.btn-submit {
  flex: 1;
  background-color: var(--primary);
  color: #ffffff;
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary.btn-submit:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-cancel {
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
}

/* Detail View (show.html.erb) */
.detail-section {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.detail-section:first-child {
  padding-top: 0;
}

.detail-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.detail-value {
  font-size: 1.05rem;
  color: var(--text-main);
  margin: 0;
  font-weight: 500;
}

.detail-text {
  background-color: var(--bg-muted);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  line-height: 1.6;
  font-size: 0.9375rem;
  font-weight: normal;
}

.asset-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.asset-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background-color: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9375rem;
}

.asset-icon {
  font-size: 1rem;
}

.asset-name {
  flex: 1;
}

.asset-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.asset-link:hover {
  text-decoration: underline;
}

.asset-size {
  font-size: 0.8125rem;
  color: var(--text-light);
}

.detail-muted {
  color: var(--text-light);
  margin: 0;
  font-style: italic;
  font-size: 0.9375rem;
}

.detail-cta-section {
  background-color: var(--primary-subtle);
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  margin-top: 1.5rem;
}

.detail-desc {
  color: var(--text-muted);
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

.onboarding-footer-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .onboarding-page {
    padding: 1.5rem 0;
  }

  .onboarding-card {
    padding: 1.5rem 1rem;
    border-radius: 10px;
  }

  .onboarding-form .form-actions {
    flex-direction: column;
  }

  .btn-primary.btn-submit,
  .btn-cancel {
    width: 100%;
  }

  .onboarding-footer-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* Sign in / sign up (Devise views use the onboarding card and form styles) */
.auth-container {
  max-width: 440px;
}

.onboarding-form .auth-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-main);
}

.auth-checkbox-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.auth-submit {
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: center;
}

.auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.auth-switch a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.onboarding-form .form-error-alert {
  margin-bottom: 1.25rem;
}

/* Onboarding steps and brand page */
.onboarding-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0.5rem 0 0.75rem;
}

.brand-asset-thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

/* New ad: idea cards and "More options" */
.new-ad-container {
  max-width: 880px;
}

.idea-section {
  margin-bottom: 1.5rem;
}

.idea-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.idea-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.idea-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.idea-card:hover,
.idea-card:focus {
  border-color: var(--primary);
  outline: none;
}

.idea-card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.idea-card.is-loading {
  opacity: 0.5;
}

.idea-card h3 {
  font-size: 0.95rem;
  margin: 0;
}

.idea-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}

.idea-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.idea-cta {
  color: var(--primary);
  font-weight: 600;
}

.idea-reroll {
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.more-options {
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.more-options summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* New ad, More options: the brand images of this ad (brand_asset_ids). */
.run-assets {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
  min-width: 0;
}

.run-assets legend {
  padding: 0;
  margin-bottom: 0.25rem;
}

.run-asset-list {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}

.run-asset {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.5rem 0.625rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  font-weight: 400;
  cursor: pointer;
}

.run-asset:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-subtle);
}

.run-asset:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.run-asset input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.run-asset-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-muted);
}

.run-asset-missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
}

.run-asset-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.run-asset-name {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-asset-kind {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.run-assets-error {
  color: #b91c1c;
  font-weight: 600;
}

/* Next steps for a finished preview */
.next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.next-actions form {
  display: inline;
}

.edit-video-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1rem;
}

/* Idea tiles while Gemini writes them: shimmer bars. */
@media (max-width: 720px) {
  .idea-grid {
    grid-template-columns: 1fr;
  }
}

.idea-card {
  height: 270px;
}

/* The full brief goes into the form; the tile shows the start of it. */
.idea-card p {
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.idea-reroll {
  white-space: nowrap;
  flex-shrink: 0;
}

.idea-card-footer {
  gap: 0.5rem;
}

.idea-card.is-skeleton {
  cursor: default;
  pointer-events: none;
}

.idea-card.is-skeleton h3,
.idea-card.is-skeleton p,
.idea-card.is-skeleton .idea-cta {
  color: transparent;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: idea-shimmer 1.4s ease-in-out infinite;
}

.idea-card.is-skeleton h3 {
  height: 1.1rem;
  width: 70%;
}

.idea-card.is-skeleton p {
  flex: 1;
  min-height: 5.5rem;
}

.idea-card.is-skeleton .idea-cta {
  display: inline-block;
  height: 0.8rem;
  width: 45%;
}

.idea-card.is-skeleton .idea-reroll {
  visibility: hidden;
}

.idea-card.is-skeleton.is-failed h3,
.idea-card.is-skeleton.is-failed p,
.idea-card.is-skeleton.is-failed .idea-cta {
  animation: none;
}

@keyframes idea-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .idea-card.is-skeleton h3,
  .idea-card.is-skeleton p,
  .idea-card.is-skeleton .idea-cta {
    animation: none;
  }
}

/* Generate button after a click: same size, other color and text. */
.btn-primary.btn-submit.is-busy,
.btn-primary.btn-submit.is-busy:hover {
  background-color: #16a34a;
  cursor: progress;
  transform: none;
}

/* Progress of a preview that is being made */
.gen-progress {
  width: 100%;
  max-width: 420px;
  margin-top: 0.75rem;
  text-align: left;
}

.gen-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #cbd5e1;
  margin-bottom: 0.35rem;
}

.gen-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.gen-progress-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  transition: width 0.5s linear;
}

.gen-progress.is-slow .gen-progress-track span {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.gen-progress-note {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0.45rem 0 0;
}

/* Sign in with Google */
.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  color: #1f1f1f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.google-button:hover {
  background: #f8f9fa;
}

.google-mark {
  width: 20px;
  height: 20px;
}

/* Onboarding: company suggestion from the website */
.lookup-row {
  display: flex;
  gap: 0.5rem;
}

.lookup-row .form-input {
  flex: 1;
  min-width: 0;
}

.suggestion-card {
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.suggestion-card.is-used {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.suggestion-head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.suggestion-logo-box {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
}

.suggestion-logo {
  width: 48px;
  height: 48px;
  display: block;
}

.suggestion-logo-box:has(.suggestion-logo[hidden]) {
  display: none;
}

.suggestion-text {
  flex: 1;
  min-width: 0;
}

.suggestion-card h3 {
  font-size: 1rem;
  margin: 0 0 0.2rem;
}

.suggestion-card p {
  margin: 0;
  font-size: 0.875rem;
}

.suggestion-description {
  color: var(--text-muted);
}

.suggestion-idea-label {
  margin-top: 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.suggestion-idea {
  margin-top: 0.25rem !important;
}

.suggestion-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
}

.suggestion-card.is-used [data-lookup-use] {
  background-color: #16a34a;
}

/* While the lookup runs: the same shimmer as the idea tiles. */
.suggestion-card.is-skeleton .suggestion-logo-box {
  display: block;
}

.suggestion-card.is-skeleton .suggestion-logo-box,
.suggestion-card.is-skeleton h3,
.suggestion-card.is-skeleton p:not(.suggestion-idea-label) {
  color: transparent;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: idea-shimmer 1.4s ease-in-out infinite;
}

.suggestion-card.is-skeleton h3 { height: 1.1rem; width: 40%; }
.suggestion-card.is-skeleton .suggestion-description { height: 0.9rem; width: 80%; }
.suggestion-card.is-skeleton .suggestion-idea { height: 3.5rem; }
.suggestion-card.is-skeleton .suggestion-actions,
.suggestion-card.is-skeleton .suggestion-logo { visibility: hidden; }
.suggestion-card.is-skeleton .suggestion-actions { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .suggestion-card.is-skeleton .suggestion-logo-box,
  .suggestion-card.is-skeleton h3,
  .suggestion-card.is-skeleton p { animation: none; }
}

/* Website address: fixed "https://" prefix and the host in one field */
.url-input {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  overflow: hidden;
}

.url-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.url-input-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.1rem 0 0.8rem;
  color: var(--text-muted);
  user-select: none;
}

.url-input .url-input-field,
.onboarding-form .url-input input[type="text"].url-input-field,
.onboarding-form .url-input input[type="text"].url-input-field:focus {
  flex: 1;
  width: auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  padding: 0.75rem 0.8rem;
  font: inherit;
  font-size: 0.9375rem;
  background: transparent;
}

.suggestion-url,
.url-link {
  font-size: 0.8125rem;
  color: var(--primary);
  text-decoration: none;
}

.suggestion-url:hover,
.url-link:hover {
  text-decoration: underline;
}

.suggestion-card.is-skeleton .suggestion-url { visibility: hidden; }

/* Logo step after "Use this": the adopted logo, nothing to upload */
.logo-adopted {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: #f0fdf4;
}

.logo-adopted[hidden],
[data-logo-upload][hidden] {
  display: none;
}

.logo-adopted-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}

.logo-adopted-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}

.logo-adopted-text span {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* Inline SVG icons (IconsHelper). */
.icon {
  flex-shrink: 0;
  vertical-align: -0.15em;
}

/* Top nav: admin icon, organization (picker), New ad, avatar menu. */
.nav-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--text-muted);
}

.nav-icon-link:hover {
  color: var(--primary);
  background: var(--primary-subtle);
}

.nav-sep {
  color: var(--text-light);
  font-size: 1.25rem;
  font-weight: 300;
}

.nav-org {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}

.nav-org:hover {
  background: var(--bg-muted);
}

.nav-org-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}

.nav-new-ad {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
}

.nav-menu {
  position: relative;
  min-width: 0;
}

.nav-menu > summary {
  list-style: none;
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

.nav-menu > summary:focus-visible,
.nav-menu-item:focus-visible,
.nav-icon-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.nav-avatar {
  display: block;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}

.avatar {
  display: inline-block;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--avatar-hue, 220) 60% 45%);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  min-width: 220px;
  max-width: min(300px, calc(100vw - 2rem));
  padding: 0.35rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.nav-menu-left .nav-menu-panel {
  left: 0;
}

.nav-menu-right .nav-menu-panel {
  right: 0;
}

.nav-menu-heading {
  margin: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.nav-menu-user {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.9rem 0.6rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.nav-menu-user span {
  color: var(--text-muted);
}

.nav-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.9rem;
  color: var(--text-main);
  font-size: 0.9rem;
  text-decoration: none;
  text-align: left;
}

.nav-menu-item:hover {
  background: var(--bg-muted);
  color: var(--primary);
}

.nav-menu-item .icon {
  color: var(--text-muted);
}

.nav-menu-check {
  display: inline-flex;
  width: 14px;
  color: var(--primary);
}

.nav-menu-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-menu-divider {
  height: 1px;
  margin: 0.35rem 0;
  background: var(--border);
}

.nav-menu-form {
  margin: 0;
}

.nav-menu-button {
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.nav-menu-button:hover {
  background: var(--bg-muted);
}

@media (max-width: 560px) {
  .nav-new-ad {
    padding: 0.45rem;
  }

  .nav-new-ad-label {
    display: none;
  }

  .nav-org-name {
    max-width: 7.5rem;
  }

  /* Phone: icons only for the secondary preview actions (the text stays in the tooltip and for screen readers). */
  .icon-row {
    gap: 0.3rem;
  }

  .icon-row .icon-btn:not(.icon-btn-primary) {
    padding: 0.4rem;
  }

  .icon-row-sep {
    display: none;
  }

  /* Phone: the purchase or download button on its own line, as on the cards. */
  .icon-row > .icon-btn-primary,
  .icon-row > .icon-btn-form:first-child {
    flex: 1 0 100%;
  }

  .icon-row > .icon-btn-form:first-child .icon-btn,
  .icon-row > .icon-btn-primary {
    width: 100%;
    justify-content: center;
  }

  .icon-row .icon-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Preview actions: one row of icon buttons; the purchase button stays primary. */
.preview-actions-stack {
  flex-direction: column;
  align-items: stretch;
}

.icon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.icon-btn-form {
  display: inline-flex;
  margin: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--bg-muted);
  color: var(--primary);
  border-color: #cbd5e1;
}

a.icon-btn:focus-visible,
button.icon-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.icon-btn.icon-btn-primary,
.icon-btn.btn-signup {
  border-color: transparent;
  font-weight: 600;
}

.icon-btn.btn-signup {
  background: var(--primary);
  color: #ffffff;
}

.icon-btn.btn-signup:hover {
  background: var(--primary-hover);
  color: #ffffff;
}

.icon-btn.btn-success {
  background: #16a34a;
  color: #ffffff;
}

.icon-btn.btn-success:hover {
  background: #15803d;
  color: #ffffff;
}

.icon-row-sep {
  width: 1px;
  height: 1.25rem;
  margin: 0 0.15rem;
  background: var(--border);
}

.icon-row-compact .icon-btn:not(.icon-btn-primary) {
  padding: 0.4rem;
}

/* Cards: the purchase or download button on its own line, the icons below. */
.icon-row-compact > .icon-btn-primary,
.icon-row-compact > .icon-btn-form:first-child {
  flex: 1 0 100%;
}

.icon-row-compact > .icon-btn-form:first-child .icon-btn,
.icon-row-compact > .icon-btn-primary {
  width: 100%;
  justify-content: center;
}

.icon-row-compact .icon-row-sep {
  display: none;
}

/* Cards: icons only; the text stays for screen readers and in the tooltip. */
.icon-row-compact .icon-btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Share box (a popover: in the top layer, so a card's overflow does not cut it). */
.share-popover {
  width: min(26rem, calc(100vw - 32px));
  margin: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.share-popover::backdrop,
.confirm-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.share-popover-title {
  margin: 0 0 0.2rem;
  font-weight: 600;
}

.share-popover-hint {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.share-popover-url {
  width: 100%;
  font-size: 0.8125rem;
}

.share-popover-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.share-popover-status {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* Confirmation dialog for the buttons that start a new video. */
.confirm-dialog {
  width: min(28rem, calc(100vw - 32px));
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.confirm-dialog form {
  margin: 0;
}

.confirm-dialog-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}

.confirm-dialog-body {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.confirm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0; /* not the 1rem of "form div" */
}

.confirm-dialog-actions button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.preview-card-title a {
  color: inherit;
  text-decoration: none;
}

.preview-card-title a:hover {
  color: var(--primary);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.edit-video-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.edit-video-row .form-input {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: none;
}

.edit-video-row input[type="submit"] {
  flex: 0 0 auto;
  width: auto;
}

/* Deployed commit in the footer */
.footer-build {
  margin-left: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Members page: invite form, members, pending invitations */
.members-container {
  max-width: 880px;
}

.members-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.members-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 1.125rem;
}

.members-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.5rem;
}

.invite-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.invite-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.invite-form div {
  margin-bottom: 0;
}

/* Rails wraps a field with errors in a div; keep the label and input in the column. */
.invite-form .field_with_errors {
  display: contents;
}

.invite-field-email {
  flex: 1 1 260px;
}

.invite-field-email .form-input {
  width: 100%;
  max-width: none;
}

.invite-form .field_with_errors .form-input {
  border-color: #dc2626;
}

.invite-form .form-label {
  font-size: 0.875rem;
  font-weight: 600;
}

.invite-form .form-input {
  padding: 0.6rem 0.8rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text-main);
  background-color: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  min-height: 42px;
}

.invite-form .form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-subtle);
}

.invite-submit {
  min-height: 42px;
  border: none;
  cursor: pointer;
}

.invite-form .form-hint {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.invite-form .form-error-alert {
  margin-bottom: 0.75rem;
}

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

.member-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}

.member-row:first-child {
  border-top: none;
  padding-top: 0;
}

.member-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.member-name,
.member-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-email {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.member-date {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.member-action {
  margin: 0;
}

.avatar-pending {
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 1px dashed var(--text-light);
}

@media (max-width: 600px) {
  .member-row {
    flex-wrap: wrap;
  }

  .member-main {
    flex-basis: calc(100% - 3rem);
  }

  .member-role {
    margin-left: 3rem;
  }
}

/* Invitation page (/invitations/<token>) */
.invitation-org {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.invitation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.invitation-actions form {
  margin: 0;
}

.invitation-actions .btn-signup {
  border: none;
  cursor: pointer;
}

/* /device: the one organization a CLI token acts in. Each organization is one
   full-width button; one click approves in it. */
.device-organizations {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.device-organization {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.device-organization:hover,
.device-organization:focus-visible {
  background-color: var(--primary-subtle);
  border-color: var(--primary);
}

.device-organization-slug {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.device-organization-action {
  flex: none;
  font-weight: 600;
  color: var(--primary);
}

/* API cost of a preview (superusers only). */
.api-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.375rem 0.5rem;
  border: 1px dashed var(--border);
  border-radius: 4px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Star rating under a preview video (feedbacks/_rating). The comment panel
   floats over the card body, so the page does not move when it opens. */
.rating {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem 0;
}

.rating-stars {
  display: inline-flex;
}

.rating-star {
  background: none;
  border: none;
  padding: 0 0.1rem;
  font-size: 1.125rem;
  line-height: 1;
  color: #cbd5e1;
  cursor: pointer;
  transition: color 0.1s ease-in-out;
}

.rating-star.is-on {
  color: #f59e0b;
}

/* Hover shows the rating the click would give. */
.rating-stars:hover .rating-star {
  color: #fbbf24;
}

.rating-stars .rating-star:hover ~ .rating-star {
  color: #cbd5e1;
}

.rating-star:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-radius: 3px;
}

.rating-status {
  font-size: 0.75rem;
  color: var(--text-light);
}

.rating-panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 1rem;
  right: 1rem;
  max-width: 340px;
  z-index: 20;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.rating-panel[hidden] {
  display: none;
}

.rating-panel-title {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-main);
}

.rating-panel-hint {
  display: block;
  font-weight: 400;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.rating-panel-comment {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

.rating-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.rating-panel-actions .btn-signup {
  border: none;
  cursor: pointer;
}

/* Impersonation banner: first row of the sticky site header (layouts/_impersonation_banner). */
.impersonation-banner {
  background: var(--impersonation-bg);
  border-bottom: 2px solid var(--impersonation-border);
  color: var(--impersonation-text);
  font-size: 0.9rem;
}

.impersonation-banner-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.impersonation-banner-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.impersonation-banner-text .icon {
  flex-shrink: 0;
}

.impersonation-banner-form {
  margin: 0;
}

.impersonation-banner-button {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--impersonation-button-bg);
  border-radius: 6px;
  background: var(--impersonation-button-bg);
  color: var(--impersonation-button-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.impersonation-banner-button:hover {
  background: var(--impersonation-button-hover-bg);
}

.impersonation-banner-button:focus-visible {
  outline: 2px solid var(--impersonation-text);
  outline-offset: 2px;
}

/* "Your team at <Company> is already on MadSlope" (shared/_domain_join_prompt). */
.join-prompt {
  border: 1px solid var(--primary);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--primary-subtle);
}

.join-prompt-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.join-prompt-logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--bg-card);
  flex-shrink: 0;
}

.join-prompt-title {
  font-size: 1.125rem;
  margin: 0 0 0.25rem;
}

.join-prompt-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.join-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.join-prompt-form {
  margin: 0;
}

.join-prompt-actions .btn-signup {
  border: none;
  cursor: pointer;
}

.join-prompt-actions a.btn-link {
  text-decoration: underline;
}

/* Under "Continue with Google" (users/sessions/new). */
.auth-hint {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: center;
}

/* Under "Join requests" (organizations/members/index). */
.members-hint {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Organization settings: the stored Google Workspace data (superusers only). */
.superuser-box {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.superuser-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
}

.superuser-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.superuser-table {
  width: 100%;
  border-collapse: collapse;
}

.superuser-table th,
.superuser-table td {
  text-align: left;
  padding: 0.25rem 0.5rem 0.25rem 0;
  overflow-wrap: anywhere;
}

/* Settings layout (shared/_settings_layout): organization and personal
   settings. A sidebar with the sections, and the page of the section in
   titled cards. On phones, the sidebar is a row of tabs above the page. */
.settings-page {
  padding: 1.5rem 0 3rem;
}

.settings-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: 5rem;
}

.settings-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.9375rem;
  position: relative;
}

.settings-nav-item .icon {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.settings-nav-item:hover {
  background: var(--bg-muted);
}

.settings-nav-item[aria-current="page"] {
  background: var(--primary-subtle);
  font-weight: 600;
}

.settings-nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: 3px;
  background: var(--primary);
}

.settings-nav-item[aria-current="page"] .icon {
  color: var(--primary);
}

.settings-content {
  min-width: 0;
}

.settings-readonly-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1.5rem;
}

.settings-card-header {
  padding: 1rem 1.5rem 0;
}

.settings-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.0625rem;
}

.settings-card-desc {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.settings-card-body,
.settings-content form .settings-card-body {
  padding: 1rem 1.5rem 1.25rem;
  margin: 0;
}

.settings-card-footer,
.settings-content form .settings-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  margin: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  border-radius: 0 0 10px 10px;
}

.settings-form .form-group:last-child {
  margin-bottom: 0;
}

.settings-hint {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.settings-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0;
  font-size: 0.9375rem;
}

.settings-facts dt {
  color: var(--text-muted);
}

.settings-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.settings-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.settings-profile-text {
  min-width: 0;
}

.settings-profile-name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.settings-profile-email {
  margin: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.settings-org-logo {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.settings-card.members-card {
  padding: 1.25rem 1.5rem;
}

.settings-content .member-name a {
  color: var(--text-main);
  text-decoration: none;
}

.settings-content .member-name a:hover {
  text-decoration: underline;
}

.settings-content a.btn-outline {
  text-decoration: none;
  color: var(--text-main);
}

.settings-content a.btn-outline:hover {
  background: var(--bg-muted);
}

.superuser-box.settings-card {
  margin-top: 0;
}

/* Brand assets: the saved images and the images chosen to add. */
.asset-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.asset-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}

.asset-card.is-new {
  border-style: dashed;
  border-color: var(--primary);
}

.asset-card-media,
.settings-content form .asset-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  margin: 0;
  padding: 0.75rem;
  background-color: var(--bg-muted);
  /* A light checkerboard, so that transparent logos show their edges. */
  background-image: linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%),
                    linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.asset-card-media .brand-asset-thumb {
  width: 96px;
  height: 96px;
  border: none;
  background: transparent;
}

.asset-card-missing {
  color: var(--text-light);
}

.asset-card-footer,
.settings-content form .asset-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  margin: 0;
  border-top: 1px solid var(--border);
  min-height: 2.75rem;
}

.asset-card-label {
  white-space: nowrap;
}

.asset-card-name {
  font-size: 0.8125rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-remove {
  margin: 0;
}

.asset-card-remove button {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  background: transparent;
  color: var(--text-muted);
}

.asset-card-remove button:hover {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

/* Named brand assets (BrandAsset): name, kind and "Include by default" on each card. */
.asset-grid.brand-asset-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.asset-card-media {
  position: relative;
}

.asset-card-logo-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}

.brand-asset-card.is-logo {
  border-color: #86efac;
}

.asset-edit,
.settings-content form.asset-edit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0.625rem;
  flex: 1;
}

.asset-edit div,
.settings-content form .asset-edit-field,
.upload-fields div {
  margin: 0;
}

.asset-edit-field,
.upload-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.asset-edit-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

input.asset-edit-input,
select.asset-edit-input {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  min-height: 36px;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 6px;
}

input.asset-edit-input:focus,
select.asset-edit-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-subtle);
}

.asset-edit-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.asset-edit-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

input[type="submit"].asset-edit-save {
  align-self: flex-start;
  padding: 0.3rem 0.9rem;
  font-size: 0.8125rem;
  background: #f1f5f9;
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 6px;
}

input[type="submit"].asset-edit-save:hover {
  background: #e2e8f0;
}

.asset-card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.625rem;
  flex: 1;
}

.asset-card-title {
  font-weight: 600;
  font-size: 0.9375rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-default,
.asset-card-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.asset-card-action {
  margin: 0;
}

.asset-card-action button {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  background: transparent;
  color: var(--primary);
  border-color: var(--border);
}

.asset-card-action button:hover {
  background: var(--primary-subtle);
  border-color: var(--primary);
}

.upload-fields,
.settings-content form .upload-fields {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 0.75rem;
  margin: 1rem 0 0;
}

.upload-kind-hint,
.settings-content form .upload-kind-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .asset-grid.brand-asset-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .upload-fields,
  .settings-content form .upload-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.upload-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-muted);
  text-align: center;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-drop:hover,
.upload-drop.is-over,
.upload-drop:focus-within {
  border-color: var(--primary);
  background: var(--primary-subtle);
}

.upload-drop-icon {
  color: var(--primary);
}

.upload-drop-text {
  font-size: 0.9375rem;
}

.upload-drop-text strong {
  color: var(--primary);
}

.upload-drop-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* The file input stays in the page (keyboard and screen readers) but is not seen. */
.upload-drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.upload-chosen,
.settings-content form .upload-chosen {
  margin: 1rem 0 0;
}

.upload-chosen[hidden] {
  display: none;
}

.upload-chosen-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.settings-card-footer input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-card-footer [hidden] {
  display: none;
}

/* Google Workspace: the domain as a chip. */
.domain-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.domain-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.domain-chip-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.domain-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #15803d;
}

/* An on/off setting as a switch row (shared/_toggle_row). */
.toggle-form {
  margin: 0;
}

.toggle-row,
.settings-content form .toggle-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.toggle-text,
.settings-content form .toggle-text {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.toggle-label {
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.toggle-hint {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.toggle-switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.toggle-switch input:disabled {
  cursor: default;
}

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background-color 0.15s ease;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}

.toggle-switch input:checked + .toggle-track {
  background: var(--primary);
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.toggle-switch input:disabled + .toggle-track {
  opacity: 0.6;
}

.toggle-state {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 1.75rem;
}

.toggle-form.is-saving .toggle-switch {
  opacity: 0.6;
}

.toggle-save,
.settings-content form .toggle-save {
  display: flex;
  justify-content: flex-end;
  margin: 0.75rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .toggle-track,
  .toggle-thumb {
    transition: none;
  }
}

@media (max-width: 768px) {
  .settings-page {
    padding: 1.25rem 0 2rem;
  }

  .settings-container {
    padding: 0 1rem;
  }


  .settings-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .settings-nav {
    position: static;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
  }

  .settings-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .settings-nav-item {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.875rem;
  }

  .settings-nav-item[aria-current="page"] {
    border-color: var(--primary);
  }

  .settings-nav-item[aria-current="page"]::before {
    content: none;
  }

  .settings-card-header {
    padding: 0.875rem 1rem 0;
  }

  .settings-card-body,
  .settings-content form .settings-card-body {
    padding: 0.875rem 1rem 1rem;
  }

  .settings-card-footer,
  .settings-content form .settings-card-footer {
    padding: 0.625rem 1rem;
  }

  .settings-card.members-card {
    padding: 1rem;
  }

  .settings-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }

  .settings-facts dd + dt {
    margin-top: 0.5rem;
  }

  .asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Page header (layouts/_page_header, ApplicationHelper#page_header): the
   light-blue gradient band under the top nav, with the breadcrumb, the title,
   a subtitle and actions. The same gradient as the onboarding pages had. */
.page-header {
  background: radial-gradient(ellipse 90% 140% at 50% 0%, #e6efff 0%, #f1f6ff 45%, #ffffff 100%);
  padding: 1.75rem 0 1.5rem;
}

.page-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.page-header-text {
  min-width: 0;
}

.page-title {
  margin: 0;
  font-size: clamp(1.625rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.page-subtitle {
  margin: 0.375rem 0 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.page-header-center {
  text-align: center;
  padding: 2.5rem 0 1.75rem;
}

.page-header-center .page-header-row {
  justify-content: center;
}

.page-header-center .page-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
}

.page-header .onboarding-badge {
  margin-bottom: 0.625rem;
}

/* Breadcrumb: "Settings › Members". Long items shrink with an ellipsis. */
.breadcrumb {
  margin-bottom: 0.375rem;
  min-width: 0;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  min-width: 0;
}

.page-header-center .breadcrumb-list {
  justify-content: center;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}

.breadcrumb-item > a,
.breadcrumb-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  flex: 0 0 auto;
  padding: 0 0.5rem;
  color: var(--text-light);
}

.breadcrumb-item > a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb-item > a:hover {
  text-decoration: underline;
}

.breadcrumb-item[aria-current="page"] {
  color: var(--text-main);
  flex-shrink: 10;
}

/* The page under the header: the band carries the gradient and the space. */
.page-header ~ .onboarding-page {
  background: none;
  padding-top: 1.5rem;
  min-height: 0;
}

.page-header ~ .dashboard-page {
  padding-top: 1.5rem;
}

.page-header ~ .settings-page {
  padding-top: 1.5rem;
}

.page-header ~ .message-container {
  margin-top: 0;
}

.preview-page-container {
  max-width: 720px;
}

.purchase-page-container {
  max-width: 600px;
}

.settings-org-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-subtle);
}

/* Top nav: the current area (ApplicationHelper#nav_area). */
.nav-org.is-current {
  background: var(--primary-subtle);
  color: var(--primary);
}

.nav-new-ad.is-current {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #93c5fd;
}

.nav-menu-item[aria-current="page"] {
  background: var(--primary-subtle);
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 768px) {
  /* 16 px side gutters on phones, as the top nav. */
  .container {
    padding: 0 1rem;
  }

  .page-header {
    padding: 1.25rem 0 1.125rem;
  }

  .page-header-center {
    padding: 1.75rem 0 1.25rem;
  }

  .page-header-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .page-subtitle {
    font-size: 0.9375rem;
  }
}

/* Ad placement (#281): the panel on the ad page, the placed-ad cards and the metrics. */
.placement-panel {
  margin-bottom: 1.25rem; /* at the top of the ad page, above the ad card (#363) */
}
.placement-panel > h2 {
  margin-bottom: 1rem;
}
.placement-card {
  margin-bottom: 1rem;
}
/* The landing page is not on the organization's domain: a warning only. */
.form-hint.placement-landing-warning {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  background: #fef3c7;
  color: #78350f;
}
.form-hint.placement-landing-warning[hidden] {
  display: none;
}
/* Audience targeting on "Place this ad" (Meta): job titles and interests as chips, the reach line. */
.placement-audience {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem;
  min-width: 0;
}
.placement-audience[hidden],
.placement-audience [hidden] {
  display: none;
}
.placement-audience legend {
  padding: 0 0.25rem;
}
.placement-audience-list {
  margin-top: 0.75rem;
}
.placement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  list-style: none;
}
.placement-chips:empty {
  display: none;
}
.placement-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary-subtle);
  color: var(--primary-hover);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: left;
  cursor: pointer;
}
.placement-chip:hover,
.placement-chip:focus-visible {
  background: var(--primary);
  color: #fff;
}
.placement-chip.placement-chip-add {
  border-color: var(--border);
  background: var(--bg-muted);
  color: var(--text-main);
}
.placement-chip.placement-chip-add:hover,
.placement-chip.placement-chip-add:focus-visible {
  border-color: var(--primary);
  background: var(--primary-subtle);
  color: var(--primary-hover);
}
.placement-audience-status:empty {
  display: none;
}
.placement-audience-match {
  margin-top: 0.75rem;
}
.placement-audience-placements {
  margin-top: 0.75rem;
}
.placement-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.placement-reach {
  margin: 0.75rem 0 0.25rem;
  font-weight: 600;
  color: var(--text-main);
}

/* The final URL (landing page + UTM tags) on the form and the card. */
.placement-final-url code,
.placement-facts .placement-link {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.placement-card .settings-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.placement-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}
.placement-metrics div {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.placement-metrics dt {
  font-size: 0.75rem;
  opacity: 0.75;
}
.placement-metrics dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.placement-actions,
.placement-connect-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
/* The Connect footer of Settings › Ad accounts: one row of the same buttons, then the hints. */
.placement-connect {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.placement-connect .placement-connect-buttons {
  justify-content: flex-end;
}
.placement-connect-form {
  margin: 0;
}
.placement-connect-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.placement-connect-hint {
  margin: 0;
  text-align: right;
}
@media (max-width: 640px) {
  .placement-connect {
    align-items: stretch;
  }
  .placement-connect .placement-connect-buttons {
    justify-content: flex-start;
  }
  .placement-connect-hint {
    text-align: left;
  }
}
.placement-budget-form {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}
.placement-budget-form .form-input {
  width: 7rem;
}
.placement-ad-meta {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.placement-ad-meta code {
  font-size: 0.75rem;
}
.placement-card-meta {
  flex-basis: 100%;
  margin-top: 0;
}
/* Why a create failed (Placement#error_summary), under the Error badge. */
.placement-error-reason {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.placement-error-details summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.placement-error-details p {
  margin: 0.25rem 0 0;
}
.placement-error p {
  margin: 0;
}
.placement-recovery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.placement-recovery .placement-recovery-form {
  margin: 0;
}

/* Paid files box under the download buttons on the ad page (#90). */
.paid-files {
  margin-top: 0.75rem;
}

.paid-files-hint {
  margin: 0;
}

.paid-files-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.paid-files-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: paid-files-spin 0.8s linear infinite;
}

@keyframes paid-files-spin {
  to { transform: rotate(360deg); }
}

/* "Download for paid ads" while the file is made (#90): the link is disabled and shows a spinner. */
.btn-spinner {
  display: none;
  flex: none;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.4rem;
  border: 2px solid var(--primary);
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: paid-files-spin 0.8s linear infinite;
}

.icon-btn .btn-spinner {
  margin-left: 0;
}

a[aria-busy="true"] .btn-spinner {
  display: inline-block;
}

a[aria-disabled="true"] {
  opacity: 0.75;
  cursor: progress;
  pointer-events: none;
}

.ai-notice-live {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 50;
  transform: translateX(-50%);
  max-width: min(32rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.ai-notice-live:empty {
  display: none;
}

/* No spinning for people who ask for less motion: a static broken ring, and the label says "Preparing…". */
@media (prefers-reduced-motion: reduce) {
  .btn-spinner,
  .paid-files-spinner {
    animation: none;
    border-style: dotted;
    border-right-color: currentColor;
  }

  .btn-spinner {
    border-color: var(--primary);
    border-right-color: var(--primary);
  }
}

/* Settings > Organizations: "New organization", or the disabled button when the user's domain has its organization. */
.settings-org-new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.settings-org-new .btn-signup {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.settings-org-new .btn-signup:disabled {
  background-color: var(--primary);
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-org-new-note {
  margin: 0;
  font-size: 0.875rem;
}

#new-organization + .join-prompt {
  margin-top: 1rem;
}

/* "All ads | Purchased" above the ads grid on the organization page (?filter=purchased). */
.ads-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--border);
}
.ads-filter-link {
  padding: 0.5rem 0.75rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.ads-filter-link:hover {
  color: var(--text-main);
}
.ads-filter-link[aria-current="page"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* "Place this ad" and the line next to it (the price, or "connect an ad account"). */
.place-ad-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.place-ad-row .button_to {
  margin: 0;
}
.place-ad-row .form-hint {
  margin: 0;
}

/* A bought ad (the ad page and the organization page cards): a light green card and "✓ Bought <date>". */
.preview-card-bought {
  background: var(--bought-bg);
  border-color: var(--bought-border);
}
.preview-card-bought .preview-card-actions {
  border-top-color: var(--bought-border);
}
.badge-bought {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--bought-strong);
  color: #ffffff;
  white-space: nowrap;
}

/* "Download clean" next to "Download for paid ads": the text stays on cards and on a phone. */
.icon-btn.icon-btn-download {
  color: var(--bought-strong);
  border-color: var(--bought-border);
  background: #ffffff;
  font-weight: 600;
}
.icon-btn.icon-btn-download:hover {
  color: var(--bought-strong);
  border-color: var(--bought);
  background: var(--bought-bg);
}
.btn-success .btn-spinner {
  border-color: #ffffff;
  border-right-color: transparent;
}

/* When to use each paid file, under the download buttons. */
ul.paid-files-hint {
  margin: 0;
  padding-left: 1.1rem;
}
ul.paid-files-hint li + li {
  margin-top: 0.25rem;
}

/* Notice position on the ad page: the frame is the control. The box and the shares come
   from PlacementNotice (--nx/--ny: the top left corner; --bw/--bh: the box size). */
.notice-position {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.notice-position-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}
.notice-frame,
.notice-strip-frame {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: var(--bg-dark);
}
.notice-frame {
  max-width: 100%;
  margin-top: 0.5rem;
  border-radius: 6px;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
}
.notice-position-tall .notice-frame { width: 240px; aspect-ratio: 9 / 16; }
.notice-position-wide .notice-frame { width: 480px; aspect-ratio: 16 / 9; }
.notice-strip-image {
  display: block;
  width: 500%;
  max-width: none;
  height: 100%;
  pointer-events: none;
}
/* The platform safe-zone guides (PlacementNotice::PLATFORMS): one tint per platform, a gradient
   from almost clear at the safe area to darker at the frame edge (more likely covered). No outlines:
   the guides are not the exact UI. --tint: "r, g, b". */
.notice-overlay {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
}
.notice-overlay[hidden] { display: none; }
.notice-band {
  position: absolute;
  --band-clear: rgba(var(--tint), 0.03);
  --band-dark: rgba(var(--tint), 0.62);
}
.notice-band-from-top { background: linear-gradient(to top, var(--band-clear), var(--band-dark)); }
.notice-band-from-bottom { background: linear-gradient(to bottom, var(--band-clear), var(--band-dark)); }
.notice-band-from-left { background: linear-gradient(to left, var(--band-clear), var(--band-dark)); }
.notice-band-from-right { background: linear-gradient(to right, var(--band-clear), var(--band-dark)); }
.notice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.notice-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border: 1.5px solid rgba(var(--tint), 0.95);
  border-radius: 999px;
  background: var(--bg-card, #ffffff);
  color: var(--text-main);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.notice-chip[aria-pressed="true"] { background: rgba(var(--tint), 0.22); font-weight: 600; }
.notice-chip[aria-pressed="false"] { opacity: 0.7; border-style: dashed; }
.notice-chip:focus-visible { outline: 3px solid #facc15; outline-offset: 1px; }
.notice-chip-swatch {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 2px;
  border: 1.5px solid rgba(var(--tint), 0.95);
  background: rgba(var(--tint), 0.45);
}
.notice-chip[aria-pressed="false"] .notice-chip-swatch { background: transparent; }
.notice-chip-note { font-weight: 400; color: var(--text-muted); }
.notice-status { margin-top: 0.5rem; font-size: 0.85rem; }
.notice-status-list { margin: 0; padding: 0; list-style: none; }
.notice-status-list li { padding-left: 1.1rem; position: relative; }
.notice-status-list li[hidden] { display: none; }
.notice-status-list li::before { position: absolute; left: 0; font-weight: 700; }
.notice-status-clear { color: var(--text-main); }
.notice-status-clear::before { content: "✓"; color: #16a34a; }
.notice-status-may { color: #92400e; }
.notice-status-may::before { content: "?"; color: #d97706; }
.notice-status-likely { color: #92400e; font-weight: 600; }
.notice-status-likely::before { content: "!"; color: #d97706; }
.notice-edge-warning {
  margin: 0.4rem 0 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  background: #fef3c7;
  color: #78350f;
}
.notice-edge-warning[hidden] { display: none; }
/* The notice as it is burned in: white bold text on a black box at 60%. Text height 4.5% of the short side. */
.notice-box {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--bw) * 100%);
  height: calc(var(--bh) * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: "DejaVu Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.notice-position-tall .notice-box { font-size: 4.5cqw; }
.notice-position-wide .notice-box { font-size: 2.53cqw; }
.notice-position .notice-box,
.notice-position .notice-box:hover,
.notice-position .notice-box:focus {
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  box-shadow: none;
  transform: none;
}
.notice-frame .notice-box { cursor: grab; outline: 2px solid var(--bought); outline-offset: 1px; }
.notice-frame .notice-box:focus-visible { outline: 3px solid #facc15; }
.notice-legend-swatch {
  display: inline-block;
  width: 2.2rem;
  height: 0.7rem;
  margin-right: 0.4rem;
  vertical-align: middle;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(100, 116, 139, 0.05), rgba(100, 116, 139, 0.85));
}
.notice-legend {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.notice-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 0.75rem;
}
.notice-position-tall .notice-strip { max-width: 360px; }
.notice-position-wide .notice-strip { max-width: 640px; }
.notice-position-tall .notice-strip-frame { aspect-ratio: 9 / 16; }
.notice-position-wide .notice-strip-frame { aspect-ratio: 16 / 9; }
.notice-strip-frame { border-radius: 3px; }
.notice-position-text { margin: 0.5rem 0 0; }
.notice-position-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.placement-old-notice {
  margin: 0.5rem 0 0;
  color: var(--text-main);
  font-weight: 600;
}

/* Ad account readiness (Placements::Readiness): Settings › Placement and the placement form. */
.badge-danger {
  background: #fee2e2;
  color: #b91c1c;
}
/* Paused and Ended placements (Placements::Status): grey, darker text than badge-info. */
.badge-muted {
  background: #e5e7eb;
  color: #374151;
}
.placement-account-list .member-row {
  flex-wrap: wrap;
}
/* The platform and the ad account name wrap; they are never cut off. */
.placement-account-list .placement-account-main {
  flex: 1 1 15rem;
}
.placement-account-list .placement-account-platform,
.placement-account-list .placement-account-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.placement-account-list .placement-account-date {
  white-space: normal;
}
/* One ad account (Placements::AccountCard): name, one status, the problems, one collapsed Details. */
.placement-account-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 0.8125rem;
}
.placement-account-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.placement-issues {
  flex-basis: 100%;
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.placement-issue + .placement-issue {
  margin-top: 0.375rem;
}
.placement-issue-error::marker {
  color: #b91c1c;
}
.placement-issue-warning::marker {
  color: #b45309;
}
.placement-issue-note {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-muted);
}
.placement-issue-links a {
  margin-right: 0.75rem;
}
.form-hint.placement-account-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.placement-account-details {
  flex-basis: 100%;
  min-width: 0;
  font-size: 0.875rem;
}
.placement-account-details > summary {
  cursor: pointer;
  color: var(--text-muted);
}
.placement-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.125rem 0.75rem;
  margin: 0.5rem 0;
  overflow-wrap: anywhere;
}
.placement-facts dd {
  margin: 0;
}
.placement-details-heading {
  margin: 0.5rem 0 0.25rem;
  font-weight: 600;
}
.placement-other-accounts {
  margin: 0;
  padding-left: 1.25rem;
  overflow-wrap: anywhere;
}
.placement-raw-fields {
  margin: 0.5rem 0;
}
.placement-raw-fields > summary {
  cursor: pointer;
  color: var(--text-muted);
}
.placement-diagnostics-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  max-height: 16rem;
  overflow: auto;
}
.placement-readiness {
  flex-basis: 100%;
  font-size: 0.875rem;
}
.placement-readiness-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}
.placement-readiness-reasons,
.placement-readiness-hints {
  margin: 0.375rem 0 0;
  padding-left: 1.25rem;
}
.placement-readiness-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.placement-readiness-list > li {
  padding: 0.375rem 0;
}

/* "Use an existing connection" (#304): the ad accounts that one of the user's logins reaches. */
.placement-connection-ad-accounts {
  flex-basis: 100%;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.placement-connection-ad-accounts li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
}
.placement-connection-ad-accounts .placement-account-name {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.notice-position-actions [disabled] {
  opacity: 0.55;
  cursor: default;
}

/* Footer links to the legal pages on www.madslope.com (#290, LegalDocument.url). */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-legal a {
  color: var(--text-muted);
}

/* The one-time Terms checkbox (TermsAcceptancesController). */
.terms-check {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.terms-check input[type="checkbox"] {
  margin-top: 0.3rem;
}

.terms-check label {
  font-weight: 400;
}

.inline-form {
  display: inline;
}

/* The organization rail (#363, layouts/_org_rail): a column at the left of the page, full height, with a border.
   Items use the control radius (6px); the current item is the one "you are here". On a settings page a
   "Settings" group with the sections follows Home and Ads. On a phone (<= 640px) the rail is a tab bar at the
   bottom of the screen. --rail-width is shared with the header (.nav-container-railed): one grid. */
:root {
  --rail-width: 15rem;
  --rail-inset: 1.5rem; /* the left edge of the rail items' icons, and of the brand above them */
}

.org-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 64px);
}

.org-rail {
  flex: 0 0 var(--rail-width);
  border-right: 1px solid var(--border);
  background: var(--bg-muted);
}

.org-rail-inner {
  position: sticky;
  top: 64px;
  padding: 1rem 0.75rem;
}

.org-rail-list,
.org-rail-sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-rail-item,
.org-rail-subitem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 40px;
  padding: 0 0.75rem;
  border-radius: 6px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.org-rail-subitem {
  min-height: 36px;
  font-size: 0.875rem;
  font-weight: 500;
}

.org-rail-item:hover,
.org-rail-subitem:hover {
  background: #eef2f7;
  color: var(--text-main);
}

.org-rail-item:focus-visible,
.org-rail-subitem:focus-visible,
.org-rail-heading a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.org-rail-item[aria-current="page"],
.org-rail-subitem[aria-current="page"] {
  background: var(--primary-subtle);
  color: var(--primary);
}

.org-rail-group {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.org-rail-heading {
  margin: 0 0 0.35rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.org-rail-heading a {
  color: var(--text-light);
  text-decoration: none;
}

.org-rail-heading a:hover,
.org-rail-heading a[aria-current="page"] {
  color: var(--primary);
}

.org-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* With the rail, the content starts at the rail edge and uses the full width (no centred column), so the cards'
   right edge is the header's right edge. Narrow pages (the ad page) keep their width, aligned left. */
.org-main .container {
  max-width: none;
  margin: 0;
}

.org-main .container.preview-page-container {
  max-width: 720px;
}

/* The header on a page with the rail: full width, the brand above the rail column (its left edge at the rail
   items' icons), the path from the rail edge, New ad and the avatar at the content's right inset. */
.nav-container.nav-container-railed {
  max-width: none;
  padding: 0 1.5rem 0 var(--rail-inset);
}

.nav-container-railed .nav-brand {
  flex: 0 0 calc(var(--rail-width) - var(--rail-inset));
}

/* With the rail, a settings page has no sidebar of its own: the sections are in the rail. */
.settings-content-railed {
  max-width: 760px;
}

/* The Settings list page (organizations/settings/sections). */
.settings-sections {
  max-width: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}

.settings-sections li + li {
  border-top: 1px solid var(--border);
}

.settings-section-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0 1rem;
  color: var(--text-main);
  font-weight: 600;
  text-decoration: none;
}

.settings-section-link:hover {
  background: var(--bg-muted);
}

.settings-section-chevron {
  margin-left: auto;
  color: var(--text-light);
  font-size: 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .org-shell {
    display: block;
    min-height: 0;
  }

  .org-main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .org-rail {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    border-top: 1px solid var(--border);
    border-right: 0;
    background: var(--bg-card);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .org-rail-inner {
    position: static;
    padding: 0.25rem 0.5rem;
  }

  .org-rail-list {
    display: flex;
  }

  .org-rail-list > li {
    flex: 1 1 0;
  }

  /* The settings sections are on the Settings list page on a phone. */
  .org-rail-group {
    display: none;
  }

  .org-rail-item {
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-height: 52px;
    padding: 0.25rem;
    font-size: 0.75rem;
  }

  .nav-container.nav-container-railed {
    padding: 0 1rem;
  }

  .nav-container-railed .nav-brand {
    flex: none;
  }

  /* The footer stays above the tab bar. */
  .site-main.has-org-rail + .site-footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* Home of an organization (#363, organizations/home/show). */
.home-periods {
  display: flex;
  gap: 0.25rem;
}

.home-period {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

.home-period[aria-current="page"] {
  border-color: var(--text-main);
  color: var(--text-main);
  font-weight: 600;
}

.home-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.home-kpi {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}

.home-kpi dt {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.home-kpi dd {
  margin: 0.15rem 0 0;
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.home-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}

.home-toolbar-period {
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
}

.home-chart-note {
  margin: 0.5rem 0 0;
}

.home-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.home-columns .settings-card,
.home-recent {
  margin: 0;
}

.home-recent {
  margin-top: 1rem;
}

.home-recent-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.home-count {
  margin-left: 0.35rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.8125rem;
}

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

.home-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.home-item:last-child {
  border-bottom: 0;
}

.home-item-text {
  flex: 1 1 auto;
  min-width: 0;
}

.home-item .btn-outline,
.home-item .btn-signup {
  flex: none;
}

.home-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-tile-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--text-main);
  text-decoration: none;
}

.home-tile-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #e2e8f0;
  color: var(--text-muted);
}

.home-tile-media img,
.home-tile-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-tile-title {
  font-weight: 600;
}

.home-tile-meta {
  font-size: 0.8125rem;
}

.home-empty {
  margin: 0;
}

@media (max-width: 760px) {
  .home-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .home-item {
    flex-wrap: wrap;
  }

  .home-item-text {
    flex-basis: 100%;
  }
}

/* "Create your next ad": the same tile as an ad, with a big "+" in the place of the picture. */
.home-tile-create {
  border: 1px dashed #cbd5e1;
  background: var(--bg-muted);
  color: var(--primary);
}

.home-tile-link:hover .home-tile-create {
  border-color: var(--primary);
  background: var(--primary-subtle);
}

/* The chart card with no numbers in the period: one short line. */
.home-chart-empty {
  margin: 0;
  padding: 0.9rem 1.25rem;
  color: var(--text-muted);
}

/* Phone: one tile per row, the picture at the left. */
@media (max-width: 560px) {
  .home-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-tile-link {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    align-items: center;
  }

  .home-tile-media {
    grid-row: 1 / 3;
  }

  .home-tile-title {
    align-self: end;
  }

  .home-tile-meta {
    align-self: start;
  }
}

/* FluidBarChart (Home, Campaigns; #363): the full width of its card. The bars stretch (an SVG with
   preserveAspectRatio="none"); the axis labels are HTML, so the text keeps its size. 240px high, 180px on a phone. */
.fchart {
  --fchart-grid: #e1e0d9;
  --fchart-axis: #c3c2b7;
  margin: 0;
  color: #52514e;
}
/* Series colours from the platforms' brand colours (PlatformIconsHelper): Meta #0467DF, TikTok #FE2C55 (its magenta:
   black would read as the axis), Google Ads #34A853 (its green: its blue is too close to Meta). */
.fchart .c1 { --c: #0467df; }
.fchart .c2 { --c: #fe2c55; }
.fchart .c3 { --c: #34a853; }
.fchart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 13px; }
.fchart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fchart-legend .platform-icon { vertical-align: middle; }
.fchart-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.fchart-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.fchart-y { position: relative; height: 240px; min-width: 2.5rem; font-size: 12px; font-variant-numeric: tabular-nums; }
.fchart-y span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.fchart-area { position: relative; min-width: 0; }
.fchart-area svg { display: block; width: 100%; height: 240px; overflow: visible; }
.fchart .grid { stroke: var(--fchart-grid); stroke-width: 1; }
.fchart .axis { stroke: var(--fchart-axis); stroke-width: 1; }
.fchart .bar { fill: var(--c); }
.fchart .hit { fill: transparent; }
.fchart .hit:hover { fill: rgba(11, 11, 11, 0.06); }
.fchart-x { position: relative; height: 22px; font-size: 12px; }
.fchart-x span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.fchart-table { margin-top: 6px; font-size: 13px; }
.fchart-table summary { cursor: pointer; width: max-content; }
.fchart-table table { margin-top: 6px; width: 100%; font-variant-numeric: tabular-nums; }
.fchart-table th, .fchart-table td { padding: 2px 8px 2px 0; text-align: right; }
.fchart-table th:first-child, .fchart-table td:first-child { text-align: left; }

@media (max-width: 640px) {
  .fchart-y,
  .fchart-area svg { height: 180px; }
}

/* The ad page: one line for the campaigns of the ad (#363, placements/_run_line). */
.run-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}

.run-line-text {
  flex: 1 1 18rem;
  min-width: 0;
}


.run-line-text a {
  white-space: nowrap;
}

/* One status per platform; each platform with its badge stays together (the line wraps between platforms). */
.run-line-platform,
.run-line-spend {
  white-space: nowrap;
}

.run-line-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.run-line-actions a {
  text-decoration: none;
}

/* Desktop: the status on one line, the actions under it. */
@media (min-width: 641px) {
  .run-line-text {
    flex-basis: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.run-line-actions form {
  margin: 0;
}

/* Campaigns (#363 step 3, organizations/campaigns/show). On a phone (<= 640px) each row is a card. */
.campaigns-segments {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 0.75rem;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-muted);
}

.campaigns-segment {
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.campaigns-segment[aria-current="page"] {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  color: var(--text-main);
}

.campaigns-chart-empty {
  margin: 0;
  color: var(--text-muted);
}

.campaigns-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0;
}

.campaigns-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.campaigns-chip {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.campaigns-chip:hover {
  color: var(--text-main);
}

.campaigns-chip[aria-current="page"] {
  border-color: var(--primary);
  background: var(--primary-subtle);
  color: var(--primary);
}

.campaigns-sort {
  margin-left: auto;
}

.campaigns-list {
  padding: 0.25rem 1rem;
}

.campaigns-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.campaigns-table th {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
}

.campaigns-table td {
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

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

.campaigns-table .numeric {
  text-align: right;
  white-space: nowrap;
}

.campaigns-table tr[data-status-word="needs_attention"] td:first-child {
  box-shadow: inset 3px 0 0 #b91c1c;
}

.campaigns-ad {
  min-width: 10rem;
}

.campaigns-ad-link {
  display: block;
  font-weight: 600;
}

.campaigns-actions {
  white-space: nowrap;
}

.campaigns-actions form,
.campaigns-more {
  display: inline-block;
  vertical-align: top;
}

.campaigns-more {
  position: relative;
}

.campaigns-more > summary {
  list-style: none;
  cursor: pointer;
}

.campaigns-more > summary::-webkit-details-marker {
  display: none;
}

.campaigns-more-panel {
  position: absolute;
  right: 0;
  z-index: 5;
  display: grid;
  gap: 0.75rem;
  width: 16rem;
  margin-top: 0.35rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  white-space: normal;
}

.campaigns-more-panel .placement-budget-form {
  flex-wrap: wrap;
}

.campaigns-clear {
  font-size: 0.875rem;
}

.campaigns-empty-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

@media (max-width: 760px) {
  .campaigns-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .campaigns-sort {
    margin-left: 0;
  }

  .campaigns-list {
    padding: 0;
    border: 0;
    background: none;
  }

  .campaigns-table thead {
    display: none;
  }

  .campaigns-table,
  .campaigns-table tbody,
  .campaigns-table tr,
  .campaigns-table td {
    display: block;
    width: 100%;
  }

  .campaigns-table tr {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
  }

  .campaigns-table tr[data-status-word="needs_attention"] {
    border-left: 3px solid #b91c1c;
  }

  .campaigns-table tr[data-status-word="needs_attention"] td:first-child {
    box-shadow: none;
  }

  .campaigns-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border: 0;
    text-align: right;
  }

  .campaigns-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: left;
  }

  .campaigns-table td.campaigns-ad {
    display: block;
    padding-bottom: 0.5rem;
    text-align: left;
  }

  .campaigns-table td.campaigns-ad::before,
  .campaigns-table td.campaigns-actions::before {
    content: none;
  }

  .campaigns-table td.campaigns-actions {
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.6rem;
  }

  .campaigns-more-panel {
    left: 0;
    right: auto;
  }
}

/* The platforms' marks (#363, PlatformIconsHelper#platform_icon): next to the name, on its baseline. */
.platform-icon {
  display: inline-block;
  flex: none;
  vertical-align: -0.2em;
}

.platform-icon .pi-ink {
  fill: #000000;
}

/* Campaigns: the platform under the ad name, with its 20px mark. */
.campaigns-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.campaigns-chip .platform-icon {
  margin-right: 0.15rem;
}

/* A mark on a filled (blue) button: on a small white tile, so the brand colours stay visible. */
.btn-signup .platform-icon {
  box-sizing: content-box;
  padding: 2px;
  border-radius: 4px;
  background: #ffffff;
  vertical-align: -0.3em;
}

/* In flex buttons the space between the mark and the name collapses: keep a gap. */
.btn-signup .platform-icon,
.btn-outline .platform-icon {
  margin-right: 0.35rem;
}