/* Mx2 Client Portal — base styles (shared by client + mx2 sides) */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* ── Typography scale ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { margin: 0; }
h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 34px;
}
h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

p { margin: 0 0 12px; }

.lead { font-size: 18px; max-width: 640px; }

/* Canonical eyebrow per SKILL.md: Josefin bold, 13px, 0.22em tracking, gold. */
.section-kicker,
.mx2-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mx2-gold);
  margin-bottom: var(--space-3);
}

.mono { font-family: var(--font-mono); }
.dim  { color: var(--ink-soft); }
.micro { font-size: 12px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-med), border-color var(--t-med), color var(--t-med), transform var(--t-fast);
  text-decoration: none;
  font-stretch: normal;
}
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--black);
  color: var(--cream-lt);
  border-color: var(--black);
}
.btn-primary:hover:not(:disabled) {
  background: var(--gold-lo);
  border-color: var(--gold-lo);
}
.btn-secondary {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--black);
  color: var(--cream-lt);
}
.btn-tertiary {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.btn-tertiary:hover:not(:disabled) {
  background: var(--gold-hi);
  border-color: var(--gold-hi);
}
.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn-danger:hover:not(:disabled) {
  background: var(--red);
  color: #fff;
}
.btn-ghost {
  background: transparent;
  color: var(--ink-mid);
  border: none;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--black); }

.btn-ghost-dark {
  background: transparent;
  color: var(--mx2-text);
  border: none;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.btn-ghost-dark:hover { color: var(--gold-hi); }

.btn-sm { padding: 8px 14px; font-size: 11px; }

.inline-form { display: inline; margin: 0; padding: 0; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
}
label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='url'],
textarea,
select {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  /* Form fields are the one place radius is allowed (2-4px per SKILL.md). */
  border-radius: var(--radius-2);
  background: #FFFFFF;
  color: var(--ink);
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(158, 125, 74, 0.12);
}

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

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.breadcrumbs {
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: '›';
  margin: 0 10px;
  opacity: 0.5;
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 400;
}

/* Mobile breadcrumbs: collapse to "‹ <parent>" — show only the second-
   to-last crumb as a tappable back-link. The current page is already the
   page title beneath, so listing the full chain wastes vertical space.
   We don't change desktop behavior. */
@media (max-width: 720px) {
  /* HARD STOP on horizontal page scroll. Any wide child (table, image,
     overflowing toolbar) gets clipped at the viewport edge instead of
     pushing the body out. clip > hidden because it doesn't break
     position:sticky / position:fixed inside the body. */
  body.mx2-side,
  body.client-side {
    overflow-x: clip;
  }
  .breadcrumbs { margin: 0 0 12px; font-size: 10px; letter-spacing: 0.14em; }
  .breadcrumbs ol { flex-wrap: nowrap; }
  /* Hide every crumb except the last-tappable parent (second-to-last). */
  .breadcrumbs li { display: none; }
  .breadcrumbs li:nth-last-child(2) {
    display: inline-flex;
  }
  .breadcrumbs li:nth-last-child(2)::before {
    content: '‹';
    margin: 0 6px 0 0;
    opacity: 0.7;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 400;
  }
  .breadcrumbs li:nth-last-child(2) a {
    /* Truncate long parent labels */
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  /* Single-crumb pages (just "Dashboard") still get one visible item */
  .breadcrumbs li:only-child { display: inline-flex; }
  .breadcrumbs li:only-child::before { content: ''; margin: 0; }
}
.breadcrumbs a {
  text-decoration: none;
  transition: color var(--t-fast);
}
.breadcrumbs [aria-current='page'] {
  font-weight: 700;
}

/* Mode-specific colors picked up via the body class. */
body.client-side .breadcrumbs { color: var(--ink-soft); }
body.client-side .breadcrumbs a { color: var(--ink-mid); }
body.client-side .breadcrumbs a:hover { color: var(--mx2-gold-deep); }
body.client-side .breadcrumbs [aria-current='page'] { color: var(--ink); }

body.mx2-side .breadcrumbs { color: var(--mx2-stone-300); }
body.mx2-side .breadcrumbs a { color: var(--mx2-stone-200); }
body.mx2-side .breadcrumbs a:hover { color: var(--mx2-gold); }
body.mx2-side .breadcrumbs [aria-current='page'] { color: var(--mx2-text-hi); }

/* ── Avatars / org logos ────────────────────────────────────────────────── */
.avatar-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--cream-lt);
  color: var(--mx2-gold-deep);
  border: none;
  overflow: hidden;
  flex: none;
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-fallback {
  position: absolute;
  inset: 0;
  /* Hidden by default — img onerror handler flips this to flex when the
     image is missing or fails to load. Otherwise the fallback would sit
     on top of a successfully-loaded image. */
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--cream-lt);
  color: var(--mx2-gold-deep);
}
.avatar-xs  { width: 24px; height: 24px; border-radius: 999px; font-size: 11px; }
.avatar-xs .avatar-fallback { font-size: 11px; border-radius: 999px; }
.avatar-sm  { width: 32px; height: 32px; border-radius: 999px; font-size: 14px; }
.avatar-sm .avatar-fallback { font-size: 14px; border-radius: 999px; }
.avatar-md  { width: 64px; height: 64px; border-radius: 999px; font-size: 24px; }
.avatar-md .avatar-fallback { font-size: 24px; border-radius: 999px; }
.avatar-lg  { width: 120px; height: 120px; border-radius: 999px; font-size: 48px; }
.avatar-lg .avatar-fallback { font-size: 48px; border-radius: 999px; }

/* Org-logo: square, transparent bg, no frame, contain (preserves wordmarks) */
.org-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  border: none;
  overflow: hidden;
  flex: none;
  vertical-align: middle;
}
.org-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 3px;
  display: block;
}
.org-logo .avatar-fallback {
  background: transparent;
  color: var(--mx2-gold-deep);
}
.org-logo-xs { width: 28px; height: 28px; }
.org-logo-xs .avatar-fallback { font-size: 12px; }
.org-logo-sm { width: 40px; height: 40px; }
.org-logo-sm .avatar-fallback { font-size: 16px; }
.org-logo-md { width: 64px; height: 64px; }
.org-logo-md .avatar-fallback { font-size: 22px; }

/* Inline logo + label, used in tables and breadcrumbs. */
.cell-with-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Hero with logo on the left */
.hero-with-logo {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero-with-logo > .org-logo {
  flex: none;
}

/* Org logos: white background (logos are designed for white), object-fit
   contain so wide / tall / square wordmarks all show fully without crop.
   Transparent PNGs render on white instead of cream. */
.org-logo-preview {
  width: 120px;
  height: 120px;
  border-radius: 0;
  background: transparent;
  border: none;
}
.org-logo-preview img { object-fit: contain; padding: 6px; }
.org-logo-preview .avatar-fallback { border-radius: 0; background: transparent; }

.avatar-edit,
.org-logo-edit {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}
@media (max-width: 720px) {
  .avatar-edit, .org-logo-edit { grid-template-columns: 1fr; }
}

/* ── Banners ────────────────────────────────────────────────────────────── */
.banner {
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: var(--cream-lt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-4);
  font-size: 14px;
  color: var(--ink);
}
.banner-warn    { border-left-color: var(--amber); background: #FDF5DC; }
.banner-danger  { border-left-color: var(--red);   background: #F8E0DB; }
.banner-success { border-left-color: var(--status-launched); background: #DEEAE2; }

/* ── Site footer (used on both client + Mx2 layouts) ────────────────────── */
.site-footer {
  border-top: 1px solid var(--rule-lt, #e6dfce);
  padding: 32px 32px calc(40px + env(safe-area-inset-bottom));
  margin-top: 56px;
  font-family: var(--font-body);
  color: var(--ink-soft, #5E5E5E);
  background: transparent;
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__mark {
  height: 38px;
  width: auto;
  align-self: flex-start;
}
/* The footer renders both light + dark variants of the mark. The
   layout's body class picks which to show. */
body:not(.mx2-side) .site-footer__mark--dark { display: none; }
body.mx2-side       .site-footer__mark--light { display: none; }
.site-footer__tag {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft, #5E5E5E);
  max-width: 380px;
}
.site-footer__tag a {
  color: var(--mx2-gold-deep, #876e51);
  text-decoration: underline;
}
.site-footer__legal p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft, #5E5E5E);
}
.site-footer__small {
  font-size: 11px !important;
  color: var(--ink-soft, #5E5E5E);
  opacity: 0.85;
}

/* Dark layouts (Mx2 admin) — invert the text colors. */
body.mx2-side .site-footer {
  border-top-color: var(--mx2-rule, #2a2a2a);
  background: transparent;
}
body.mx2-side .site-footer__tag,
body.mx2-side .site-footer__legal p {
  color: var(--mx2-text-mid, rgba(244, 234, 211, 0.6));
}
body.mx2-side .site-footer__tag a {
  color: var(--mx2-gold, #c9a86a);
}

@media (max-width: 720px) {
  .site-footer {
    padding: 24px 16px calc(28px + env(safe-area-inset-bottom));
    margin-top: 32px;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ── Centered toast (replaces top-of-page flash banners) ────────────────── */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 10001;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--mx2-gold, #c9a86a);
  border-radius: 6px;
  padding: 22px 56px 22px 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  min-width: 280px;
  max-width: min(480px, 90vw);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
}
.toast--visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.toast--success { border-left-color: var(--status-launched, #4a8c5e); }
.toast--danger  { border-left-color: var(--red, #b14b3a); }
.toast--warn    { border-left-color: var(--amber, #d4a755); }
.toast--info    { border-left-color: var(--mx2-gold, #c9a86a); }
.toast__message { margin: 0; }
.toast__close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 4px;
}
.toast__close:hover { color: var(--ink); background: rgba(0, 0, 0, 0.04); }

/* ── Loading overlay (form submit feedback) ─────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}
.loading-overlay[hidden] { display: none; }
.loading-overlay__spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--mx2-gold, #c9a86a);
  animation: loading-spin 800ms linear infinite;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* ── Status pills ───────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--black);
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill-brief-draft    { background: #E8E4D5; color: var(--status-brief-draft); }
.pill-brief-sub      { background: #DDE6F0; color: var(--status-brief-sub); }
.pill-plan-gen       { background: #F5E9CC; color: var(--status-plan-gen); }
.pill-plan-waiting   { background: #FDECC6; color: var(--status-plan-waiting); }
.pill-assets-wait    { background: #F0DCCB; color: var(--status-assets-wait); }
.pill-campaign-build { background: #E2E5D7; color: var(--status-campaign-build); }
.pill-launched       { background: #D5E8DC; color: var(--status-launched); }
.pill-ended          { background: #DFE0E4; color: var(--status-ended); }
.pill-cancelled      { background: #F2DAD4; color: var(--status-cancelled); }
/* Strong-urgency pill — creative needed within the 5-business-day
   window. Solid red so it stands out from the gold/cream brand
   palette around it. */
.pill-asap {
  background: #b14b3a;
  color: #FFFFFF;
}
.pill-asap::before { background: #FFFFFF; opacity: 0.85; }

/* PO tactic-status pills (Mx2-managed lifecycle).
   - requested (was pending): neutral cream
   - submitted: soft blue (ready for Mx2 review)
   - rejected_resubmit: solid red (loud — needs client action)
   - approved: solid dark green (matches po-check circle)
   - campaign_build: light blue (work-in-progress signal)
   - campaign_launched: solid gold (live!) */
.pill-requested      { background: #EDE6D6; color: #6B5C42; }
.pill-submitted      { background: #DDE6F0; color: #2c4a6b; }
.pill-rejected       { background: #b14b3a; color: #FFFFFF; }
.pill-rejected::before { background: #FFFFFF; opacity: 0.85; }
.pill-approved       { background: #4a8c5e; color: #FFFFFF; }
.pill-approved::before { background: #FFFFFF; opacity: 0.85; }
.pill-build          { background: #D9E5EE; color: #2c4a6b; }
.pill-launched-gold  { background: var(--mx2-gold, #9f886c); color: #1A1A1A; }
.pill-launched-gold::before { background: #1A1A1A; opacity: 0.7; }

/* Soft "Due Mon 5" indicator next to the status pill — same shape
   family but with a calendar icon and muted gold-deep type so it
   reads as info, not an alert. The actual urgency cue is the
   ASAP-red variant above. */
.po-due-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: rgba(159, 136, 108, 0.14);
  color: var(--mx2-gold-deep, #876e51);
  white-space: nowrap;
}
.po-due-pill svg { flex-shrink: 0; }

/* ── Spacing utilities ──────────────────────────────────────────────────── */
.mt-sm { margin-top: var(--space-3); }
.mt-md { margin-top: var(--space-5); }
.mt-lg { margin-top: var(--space-7); }

/* ── Modal (centered card with backdrop) ────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
  overflow-y: auto;
  animation: modal-fade-in 120ms ease-out;
}
.modal-overlay[hidden] { display: none; }

/* ── Avatar cropper modal ─────────────────────────────────────────────────── */
.avatar-crop-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 250;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: modal-fade-in 120ms ease-out;
}
.avatar-crop-card {
  width: min(420px, 100%);
  background: var(--bg-card, #FFFFFF);
  color: var(--ink, #1A1A1A);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px 22px 18px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.30);
  animation: modal-pop 140ms ease-out;
}
.avatar-crop-title { margin: 0 0 4px; font-size: 18px; }
.avatar-crop-hint  { margin: 0 0 14px; }
.avatar-crop-stage {
  position: relative;
  width: 320px; height: 320px;
  margin: 0 auto;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  touch-action: none; /* let pointer events handle pan, not the browser */
}
.avatar-crop-canvas { display: block; cursor: grab; }
.avatar-crop-canvas:active { cursor: grabbing; }
.avatar-crop-mask {
  position: absolute; inset: 0;
  pointer-events: none;
  /* Dark overlay everywhere except a circular cutout in the center */
  background:
    radial-gradient(circle at center, transparent 0 158px, rgba(0,0,0,0.55) 159px);
  border-radius: 6px;
}
.avatar-crop-mask::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 316px; height: 316px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--mx2-gold, #c9a86a);
  pointer-events: none;
}
.avatar-crop-controls {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 16px;
}
.avatar-crop-zoom { flex: 1; accent-color: var(--mx2-gold, #c9a86a); }
.avatar-crop-zoom-icon { font-size: 14px; color: var(--ink-soft, #5E5E5E); width: 14px; text-align: center; }
.avatar-crop-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
@media (max-width: 380px) {
  /* Tight phones — keep the 320 crop area and just trim card padding */
  .avatar-crop-card { padding: 14px 12px; }
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-card {
  position: relative;
  width: min(480px, 100%);
  background: var(--bg-card, #FFFFFF);
  color: var(--ink, #1A1A1A);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.30);
  animation: modal-pop 140ms ease-out;
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-card__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft, #5E5E5E);
  padding: 4px 8px;
}
.modal-card__close:hover { color: var(--ink, #1A1A1A); }
body.modal-open { overflow: hidden; }

/* Cosimo Plan Assistant trigger — small portrait icon next to the
   Media Plan heading. The supplied portrait already has its own circular
   frame; the button is just a transparent shell that crops the image to
   fill its bounds and a soft hover halo. */
.cosimo-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
  line-height: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.cosimo-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
.cosimo-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(232, 222, 201, 0.25);
}
.cosimo-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mx2-gold-light, #e8dec9);
}

/* Modal that holds the Cosimo panel — wider than the default .modal-card. */
.cosimo-modal__card {
  width: min(820px, 100%);
  padding: 28px 32px;
}

/* Cosimo modal toolbar (top-right): print + download + close. */
.cosimo-modal__toolbar {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cosimo-modal__toolbar .modal-card__close { position: static; }
.cosimo-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--bg-card, #FFFFFF);
  color: var(--ink-mid, #5E5E5E);
  cursor: pointer;
  padding: 0;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.cosimo-modal__icon:hover {
  border-color: var(--mx2-gold);
  color: var(--mx2-gold-deep, #876e51);
  background: rgba(159, 136, 108, 0.08);
}
.cosimo-modal__icon[hidden] { display: none; }

/* Reassign-planner icon piggy-backs on .editable-name__pencil for circle
   size + color, but pumps up the glyph so the ⟳ reads at a similar visual
   weight to the ✎ (the pencil glyph is denser at the same font-size). */
.editable-name__pencil.reassign-icon {
  font-size: 22px;
  font-family: inherit;
  font-weight: 400;
}

/* Trash / cancel-campaign icon — same chip as pencil, but rust-tinted on
   hover to telegraph the destructive action. */
.editable-name__pencil.trash-icon { padding: 0; }
.editable-name__pencil.trash-icon svg { display: block; }
.editable-name__pencil.trash-icon:hover {
  border-color: var(--mx2-rust, #b14b3a);
  color: var(--mx2-rust, #b14b3a);
  background: rgba(177, 75, 58, 0.10);
}
body.mx2-side .editable-name__pencil.trash-icon:hover {
  border-color: #ff8773;
  color: #ff8773;
  background: rgba(255, 135, 115, 0.12);
}

/* ── Campaign stages progress bar ────────────────────────────────────────── */
.campaign-stages {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 24px 0 0;
  padding: 4px 0;
  position: relative;
}
.campaign-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.campaign-stage__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--bg-card, #FFFFFF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.campaign-stage__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft, #5E5E5E);
  white-space: nowrap;
}
.campaign-stage__connector {
  flex: 1;
  height: 2px;
  background: var(--rule);
  margin: 0 4px 22px;       /* shift up to align with the dot row */
  min-width: 24px;
}

/* Done */
.campaign-stage--done .campaign-stage__dot {
  background: var(--mx2-gold);
  border-color: var(--mx2-gold);
  color: #FFFFFF;
}
.campaign-stage--done .campaign-stage__label { color: var(--ink, #1A1A1A); }
.campaign-stage__connector--done { background: var(--mx2-gold); }

/* Current */
.campaign-stage--current .campaign-stage__dot {
  background: var(--mx2-gold);
  border-color: var(--mx2-gold);
  box-shadow: 0 0 0 4px rgba(159, 136, 108, 0.18);
  transform: scale(1.1);
}
.campaign-stage--current .campaign-stage__label {
  color: var(--mx2-gold-deep, #876e51);
  font-weight: 700;
}

/* Future = default styles already applied (rule-grey dot, soft text) */

/* Cancelled override — entire bar reads as a struck-through state */
.campaign-stages--cancelled { opacity: 0.7; }
.campaign-stage--cancelled .campaign-stage__dot {
  background: var(--mx2-rust, #b14b3a);
  border-color: var(--mx2-rust, #b14b3a);
  color: #FFFFFF;
}
.campaign-stage--cancelled .campaign-stage__label { color: var(--mx2-rust, #b14b3a); }
.campaign-stage__connector--cancelled { background: var(--mx2-rust, #b14b3a); }
.campaign-stages__cancelled-label {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mx2-rust, #b14b3a);
  font-weight: 700;
}

/* Dark Mx2 layout — bump contrast against dark page bg */
body.mx2-side .campaign-stage__dot {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.20);
}
body.mx2-side .campaign-stage__label { color: var(--mx2-text, #C8C0AE); }
body.mx2-side .campaign-stage__connector { background: rgba(255, 255, 255, 0.20); }
body.mx2-side .campaign-stage--done .campaign-stage__dot,
body.mx2-side .campaign-stage--current .campaign-stage__dot {
  background: var(--mx2-gold);
  border-color: var(--mx2-gold);
}
body.mx2-side .campaign-stage--done .campaign-stage__label { color: var(--mx2-text-hi, #FFFFFF); }
body.mx2-side .campaign-stage--current .campaign-stage__label { color: var(--mx2-gold-light, #e8dec9); }
body.mx2-side .campaign-stage__connector--done { background: var(--mx2-gold); }

@media (max-width: 720px) {
  /* Stages bar — compact, tighter rhythm, all stages still visible.
     Margin pulls it up flush with the hero so the page top doesn't
     feel padded. */
  .campaign-stages { gap: 0; padding: 0; margin: 8px 0 14px; }
  .campaign-stage__label {
    font-size: 8px;
    letter-spacing: 0.04em;
    margin-top: 4px;
    max-width: 56px;
  }
  .campaign-stage__dot { width: 14px; height: 14px; }
  .campaign-stage__connector { margin: 0 1px 18px; min-width: 6px; height: 1px; }

  /* Campaign tabs: scroll affordance — fade on the right edge */
  .campaign-tabs {
    /* mask is already applied via mx2.css; add fade indicator */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .campaign-tab--active {
    /* Active tab gets a clearer underline indicator on mobile */
    box-shadow: inset 0 -2px 0 0 var(--mx2-gold);
  }
  .campaign-tab-panel {
    /* Tighter padding for thumb-comfortable read width */
    padding: 18px 14px !important;
    border-radius: 0 6px 6px 6px;
  }

  /* Hero with the campaign name + inline action icons. Tight line-height
     so a 3-word title doesn't blow out vertically. */
  .editable-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
  }
  .editable-name h1,
  .editable-name__display {
    font-size: 19px;
    line-height: 1.2;
    word-break: break-word;
    margin: 0;
  }
  .editable-name__display { padding: 0; }
  /* Action icons (pencil, reassign ⟳, trash) sit inline at the end of
     the title — they wrap below if there's no room. */
  .editable-name__pencil {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  /* Brief summary card: switch to single-column with hairline rules */
  .brief-section { padding: 14px 14px; }
  .brief-section h3 { font-size: 14px; }
}

/* Tabbed sections on the campaign show page — visual: file-folder tabs
   anchored to the top of a beige-paper card. Active tab and panel share
   the same paper background; inactive tabs are darker chips. */
.campaign-tabs {
  display: flex;
  gap: 4px;
  margin: 32px 0 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.campaign-tab {
  appearance: none;
  background: rgba(159, 136, 108, 0.20);
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft, #5E5E5E);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.campaign-tab:hover {
  background: rgba(159, 136, 108, 0.32);
  color: var(--ink, #1A1A1A);
}
.campaign-tab--active {
  background: var(--mx2-paper-2, #f3eee2);
  color: var(--mx2-gold-deep, #876e51);
  /* Pull down 1px so the active tab visually merges with the panel below */
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
}
.campaign-tab:focus-visible { outline: 2px solid var(--mx2-gold); outline-offset: -2px; }

.campaign-tab-panel[hidden] { display: none; }
.campaign-tab-panel {
  position: relative;
  background: var(--mx2-paper-2, #f3eee2);
  color: var(--ink, #1A1A1A);
  border: 1px solid var(--rule);
  border-radius: 0 8px 8px 8px;
  padding: 28px 32px;
  margin-bottom: 32px;
}
.campaign-tab-panel__action {
  position: absolute;
  top: 20px;
  right: 24px;
}

/* Brief-summary card was its own beige paper — now that the tab panel IS
   the paper, neutralize its frame so the section dividers between BASICS,
   OBJECTIVES, etc. still render as horizontal rules. */
.campaign-tab-panel .brief-summary-grid,
body.mx2-side .campaign-tab-panel .brief-summary-grid {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.campaign-tab-panel .brief-section { padding: 18px 0; }
.campaign-tab-panel .brief-section:first-child { padding-top: 0; }
.campaign-tab-panel .brief-section:last-child { padding-bottom: 0; border-bottom: 0; }

/* Banners + form fields render fine on beige; just kill any nested .mx2-section
   margins that get flattened into the panel. */
.campaign-tab-panel .mx2-section { margin: 0; }
.campaign-tab-panel .mx2-card-form {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--rule);
}

/* Dark Mx2 layout — keep the panel beige (it IS paper) but the inactive
   tabs need to read on the dark page background. */
body.mx2-side .campaign-tab {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--mx2-text, #C8C0AE);
}
body.mx2-side .campaign-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
body.mx2-side .campaign-tab--active {
  background: var(--mx2-paper-2, #f3eee2);
  color: var(--mx2-gold-deep, #876e51);
  border-color: rgba(0, 0, 0, 0.10);
}
body.mx2-side .campaign-tab-panel {
  background: var(--mx2-paper-2, #f3eee2);
  color: var(--ink, #1A1A1A);
  border-color: rgba(0, 0, 0, 0.10);
}
body.mx2-side .campaign-tab-panel .section-kicker { color: var(--mx2-gold-deep, #876e51); }
body.mx2-side .campaign-tab-panel .dim { color: var(--ink-soft, #5E5E5E); }
body.mx2-side .campaign-tab-panel label { color: var(--ink, #1A1A1A); }
body.mx2-side .campaign-tab-panel input[type='text'],
body.mx2-side .campaign-tab-panel input[type='email'],
body.mx2-side .campaign-tab-panel input[type='file'],
body.mx2-side .campaign-tab-panel select,
body.mx2-side .campaign-tab-panel textarea {
  background: #FFFFFF;
  color: var(--ink, #1A1A1A);
  border-color: var(--rule);
}

/* ── Brief summary (read-only) ──────────────────────────────────────────── */
.brief-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-card, #FFFFFF);
  overflow: hidden;
}
.brief-section {
  padding: 22px 28px;
  border-bottom: 1px solid var(--rule);
}
.brief-section:last-child { border-bottom: none; }
.brief-section h3 {
  margin: 0;
  color: var(--mx2-gold-deep, #876e51);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.brief-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-lt, var(--rule));
}
.brief-section:not(:has(.brief-section-head)) h3 {
  /* sections without the head wrapper still get the rule */
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-lt, var(--rule));
}
.brief-submitted {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #5E5E5E);
  font-weight: 500;
}
.brief-section-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px 24px;
  align-items: baseline;
}
.bsr {
  display: contents;
}
.bsr label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft, #5E5E5E);
  margin: 0;
  padding-top: 2px;
}
.bsr .val {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #1A1A1A);
  white-space: pre-wrap;
}
@media (max-width: 720px) {
  .brief-section-body { grid-template-columns: 1fr; gap: 4px 0; }
  .bsr label { padding-top: 8px; }
}

/* Dark Mx2 layout — render the brief on a brand-paper beige with dark text
   for readability instead of trying to compete with the dark page bg. */
body.mx2-side .brief-summary-grid {
  background: var(--mx2-paper-2, #f3eee2);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--ink, #1A1A1A);
}
body.mx2-side .brief-section { border-bottom-color: rgba(0, 0, 0, 0.10); }
body.mx2-side .brief-section h3 { color: var(--mx2-gold-deep, #876e51); }
body.mx2-side .brief-section-head { border-bottom-color: rgba(0, 0, 0, 0.10); }
body.mx2-side .brief-submitted { color: var(--ink-soft, #5E5E5E); }
body.mx2-side .bsr label { color: var(--ink-soft, #5E5E5E); opacity: 1; }
body.mx2-side .bsr .val { color: var(--ink, #1A1A1A); }

/* ── Rendered plan document (client-side review) ────────────────────────── */
.plan-document {
  margin: 16px 0;
  padding: 24px 28px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #FBF9F4;
  /* Force dark ink so the text reads cleanly when the plan is rendered
     inside the dark Mx2 admin layout (which sets a light body color) */
  color: var(--ink, #1A1A1A);
  line-height: 1.6;
}
.plan-document h1,
.plan-document h2,
.plan-document h3,
.plan-document h4,
.plan-document p,
.plan-document li,
.plan-document strong,
.plan-document em,
.plan-document th,
.plan-document td {
  color: var(--ink, #1A1A1A);
}
.plan-document h1 { font-size: 22px; margin: 0 0 12px; }
.plan-document h2 { font-size: 18px; margin: 22px 0 8px; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.plan-document h3 { font-size: 15px; margin: 18px 0 6px; }
.plan-document p { font-size: 14px; margin: 8px 0; }
.plan-document ul, .plan-document ol { margin: 8px 0 16px 24px; }
.plan-document li { font-size: 14px; line-height: 1.55; margin: 3px 0; }
.plan-document table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13px;
}
.plan-document th, .plan-document td {
  border: 1px solid var(--rule);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.plan-document th { background: rgba(159, 136, 108, 0.08); font-weight: 600; }
.plan-document strong { font-weight: 600; }
.plan-document code { font-size: 0.92em; background: rgba(0, 0, 0, 0.05); padding: 1px 4px; border-radius: 3px; }

/* ── AI Plan Assistant panel ────────────────────────────────────────────── */
.ai-plan-panel {
  border: 1px solid var(--rule);
  background: var(--bg-card, #FFFFFF);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.ai-plan-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.ai-plan-panel__body { margin-top: 16px; }

/* Optional steer textarea — collapsed by default below the head row */
.ai-plan-panel__steer {
  margin-top: 12px;
}
.ai-plan-panel__steer-toggle {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx2-gold-deep, #876e51);
  list-style: none;
  padding: 4px 0;
  user-select: none;
}
.ai-plan-panel__steer-toggle::-webkit-details-marker { display: none; }
.ai-plan-panel__steer-toggle::before {
  content: '+ ';
  font-weight: 700;
  color: var(--mx2-gold, #c9a86a);
}
.ai-plan-panel__steer details[open] .ai-plan-panel__steer-toggle::before,
.ai-plan-panel__steer details[open] > .ai-plan-panel__steer-toggle::before {
  content: '− ';
}
.ai-plan-panel__steer textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  resize: vertical;
  min-height: 70px;
  background: var(--bg-card, #FFFFFF);
}

/* ── Cosimo "outside the standard library" planner-only suggestions ─────
   Rendered below the main plan preview, only when Cosimo flagged 1-2
   ideas. Gold-bordered to distinguish from in-library tactic content. */
.cosimo-outside {
  margin-top: 18px;
  padding: 14px 16px 12px;
  border: 1px solid var(--mx2-gold, #c9a86a);
  border-radius: 6px;
  background: rgba(159, 136, 108, 0.06);
}
.cosimo-outside .section-kicker {
  color: var(--mx2-gold-deep, #876e51);
}
.cosimo-outside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.cosimo-outside__item {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 12px 14px;
}
.cosimo-outside__head strong {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
}
.cosimo-outside__rationale {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mid);
}
.cosimo-outside__gap {
  margin: 6px 0 0;
}
.cosimo-outside__actions {
  margin-top: 8px;
}
.ai-plan-panel__preview,
.ai-plan-panel__editor {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px 18px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg-card, #FFFFFF);
}
.ai-plan-panel__editor {
  width: 100%;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.ai-plan-panel__preview h2 { font-size: 18px; margin: 18px 0 8px; }
.ai-plan-panel__preview h3 { font-size: 15px; margin: 14px 0 6px; }
.ai-plan-panel__preview p  { font-size: 14px; line-height: 1.55; margin: 6px 0; }
.ai-plan-panel__preview ul { margin: 6px 0 12px 20px; }
.ai-plan-panel__preview li { font-size: 14px; line-height: 1.5; }
.ai-plan-panel__preview table.ai-plan-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}
.ai-plan-panel__preview .ai-plan-table th,
.ai-plan-panel__preview .ai-plan-table td {
  border: 1px solid var(--rule);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.ai-plan-panel__preview .ai-plan-table th { background: rgba(159, 136, 108, 0.08); }
.ai-plan-panel__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ai-plan-loading {
  font-style: italic;
  color: var(--ink-soft, #5E5E5E);
  padding: 12px 0;
}
.ai-plan-error {
  color: var(--mx2-rust, #b14b3a);
  padding: 12px 0;
}
.ai-plan-status--ok    { color: var(--status-launched, #5e8a6a); }
.ai-plan-status--error { color: var(--mx2-rust, #b14b3a); }

/* Dark Mx2 admin layout: lighten the panel surfaces */
body.mx2-side .ai-plan-panel {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
body.mx2-side .ai-plan-panel__preview,
body.mx2-side .ai-plan-panel__editor {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--mx2-text-hi, #FFFFFF);
}
body.mx2-side .ai-plan-panel__preview .ai-plan-table th { background: rgba(159, 136, 108, 0.18); }

/* When the panel is inside a modal (light surface), revert to light
   styling regardless of body.mx2-side — the modal card is a different
   context and the dark-mode rules above wash out against it. */
.modal-card .ai-plan-panel,
body.mx2-side .modal-card .ai-plan-panel {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.modal-card .ai-plan-panel__preview,
.modal-card .ai-plan-panel__editor,
body.mx2-side .modal-card .ai-plan-panel__preview,
body.mx2-side .modal-card .ai-plan-panel__editor {
  background: var(--mx2-paper, #fbf9f4);
  color: var(--ink, #1A1A1A);
  border: 1px solid var(--rule);
}
.modal-card .ai-plan-panel__preview h2,
body.mx2-side .modal-card .ai-plan-panel__preview h2 { color: var(--ink, #1A1A1A); border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.modal-card .ai-plan-panel__preview h3,
body.mx2-side .modal-card .ai-plan-panel__preview h3 { color: var(--mx2-gold-deep, #876e51); }
.modal-card .ai-plan-panel__preview p,
.modal-card .ai-plan-panel__preview li,
body.mx2-side .modal-card .ai-plan-panel__preview p,
body.mx2-side .modal-card .ai-plan-panel__preview li { color: var(--ink, #1A1A1A); }
.modal-card .ai-plan-panel__preview .ai-plan-table th,
body.mx2-side .modal-card .ai-plan-panel__preview .ai-plan-table th {
  background: rgba(159, 136, 108, 0.10);
  color: var(--ink, #1A1A1A);
}
.modal-card .ai-plan-panel__head h3,
body.mx2-side .modal-card .ai-plan-panel__head h3 { color: var(--ink, #1A1A1A); }
.modal-card .ai-plan-panel__head p,
body.mx2-side .modal-card .ai-plan-panel__head p { color: var(--ink-mid, #5E5E5E); }

/* ── Report bars ────────────────────────────────────────────────────────── */
.report-bar {
  width: 100%;
  height: 8px;
  background: rgba(159, 136, 108, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.report-bar__fill {
  height: 100%;
  background: var(--mx2-gold);
  transition: width 200ms ease;
}
body.mx2-side .report-bar { background: rgba(255, 255, 255, 0.08); }

/* ── List filter bar (search + dropdowns) ───────────────────────────────── */
.list-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.list-filter__search,
.list-filter__select {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-card, #FFFFFF);
  color: var(--ink, #1A1A1A);
}
.list-filter__search {
  flex: 0 1 320px;
  min-width: 200px;
}
.list-filter__select {
  flex: 0 0 auto;
  width: 200px;
  max-width: 200px;
}
.list-filter__search::placeholder { color: var(--ink-soft, #5E5E5E); }
.list-filter__search:focus,
.list-filter__select:focus {
  outline: none;
  border-color: var(--mx2-gold);
  box-shadow: 0 0 0 3px rgba(159, 136, 108, 0.18);
}
/* Mx2 dark layout: lighten the inputs so they read on the dark bg. */
body.mx2-side .list-filter__search,
body.mx2-side .list-filter__select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--mx2-text-hi, #FFFFFF);
}
body.mx2-side .list-filter__search::placeholder { color: var(--mx2-text, #C8C0AE); }

/* ── Inline editable name (h1 ↔ input) ──────────────────────────────────── */
.editable-name { position: relative; }
.editable-name__display {
  cursor: pointer;
  margin: 0;
}
.editable-name__text {
  border-bottom: 1px dashed transparent;
  transition: border-color 120ms ease;
}
.editable-name__display:hover .editable-name__text { border-bottom-color: var(--rule); }
.editable-name__pencil {
  margin-left: 10px;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft, #5E5E5E);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease, color 120ms ease;
}
.editable-name__pencil:hover {
  border-color: var(--mx2-gold);
  color: var(--mx2-gold-deep, #876e51);
}
/* Dark Mx2 admin layout: pencil + status need light-on-dark colors. */
body.mx2-side .editable-name__pencil {
  color: var(--mx2-gold-light, #e8dec9);
  border-color: rgba(232, 222, 201, 0.40);
}
body.mx2-side .editable-name__pencil:hover {
  color: #FFFFFF;
  border-color: var(--mx2-gold-light, #e8dec9);
  background: rgba(232, 222, 201, 0.12);
}
body.mx2-side .editable-name__status { color: var(--mx2-text, #C8C0AE); }
body.mx2-side .editable-name__display:hover .editable-name__text {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}
.editable-name__input {
  /* Inherits the h1 font scale from its container so the swap is visually
     stable. Caller pages have h1 sized via .page-hero / .mx2-page-hero. */
  width: 100%;
  max-width: 720px;
  font: inherit;
  font-size: 1em;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid var(--mx2-gold);
  border-radius: 4px;
  background: var(--bg-card, #FFFFFF);
  color: inherit;
  box-shadow: 0 0 0 3px rgba(159, 136, 108, 0.18);
  outline: none;
}
.editable-name__status {
  display: inline-block;
  margin-left: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft, #5E5E5E);
  vertical-align: middle;
}
.editable-name__status--ok    { color: var(--status-launched, #5e8a6a); }
.editable-name__status--error { color: var(--mx2-rust, #b14b3a); }

/* ── Brief-help: per-field "?" icon + popover ───────────────────────────── */
.field--has-help { position: relative; }
.field-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg-card, #FFFFFF);
  color: var(--mx2-text-mid, #5E5E5E);
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  transition: border-color 150ms ease, color 150ms ease;
}
.field-help-icon:hover,
.field-help-icon:focus-visible {
  border-color: var(--mx2-gold);
  color: var(--mx2-gold-deep, #876e51);
  outline: none;
}
.field-help-popover {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  right: 0;
  width: min(360px, 90vw);
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 12px 14px;
  animation: field-help-pop-in 120ms ease-out;
}
@keyframes field-help-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.field-help-popover__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft, #5E5E5E);
  margin-bottom: 8px;
}
.field-help-popover__close {
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft, #5E5E5E);
  padding: 0 4px;
}
.field-help-popover__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #1A1A1A);
  white-space: pre-wrap;
}
.field-help-popover__body--error { color: var(--mx2-rust, #b14b3a); }
.field-help-popover__body--loading {
  color: var(--ink-mid, #5E5E5E);
  font-style: italic;
}
.field-help-dots {
  display: inline-flex;
  gap: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.field-help-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mx2-gold);
  animation: field-help-dot-bounce 1.0s infinite ease-in-out;
}
.field-help-dots span:nth-child(2) { animation-delay: 0.15s; }
.field-help-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes field-help-dot-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1.0; transform: translateY(-3px); }
}
.brief-help-panel {
  margin-top: 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-card, #FFFFFF);
  padding: 14px 16px;
  text-align: left;
  max-width: 720px;
}
.brief-help-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx2-text-mid, #5E5E5E);
}
.brief-help-close {
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--mx2-text-mid, #5E5E5E);
  padding: 0 4px;
}
.brief-help-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.brief-help-quick .btn-ghost-dark { font-size: 12px; padding: 6px 10px; }
.brief-help-thread {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.brief-help-bubble {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.brief-help-bubble--user {
  background: var(--mx2-stone-100, #F2EFE3);
  align-self: flex-end;
  max-width: 80%;
}
.brief-help-bubble--assistant {
  background: rgba(159, 136, 108, 0.10);
  border-left: 3px solid var(--mx2-gold);
  align-self: flex-start;
  max-width: 90%;
}
.brief-help-bubble--pending { font-style: italic; opacity: 0.7; }
.brief-help-bubble--error {
  background: rgba(177, 75, 58, 0.08);
  border-left: 3px solid var(--mx2-rust, #b14b3a);
  color: var(--mx2-rust, #b14b3a);
}
.brief-help-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.brief-help-form textarea {
  flex: 1;
  resize: vertical;
  min-height: 50px;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
}

/* ── Pending-actions badge (nav + chip) ─────────────────────────────────── */
.nav-pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--mx2-gold);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.nav-pending { position: relative; }
.nav-pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--bg-card, #FFFFFF);
  text-decoration: none;
  color: var(--ink-soft, #5E5E5E);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-pending-chip:hover,
.nav-pending-chip[aria-expanded='true'] {
  border-color: var(--mx2-gold);
  color: var(--ink, #1A1A1A);
}
.nav-pending-chip .nav-pending-badge { margin-left: 0; }

.nav-pending-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  width: min(380px, 92vw);
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  padding: 14px 16px;
  animation: nav-pending-pop 120ms ease-out;
}
@keyframes nav-pending-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-pending-panel__head {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, #5E5E5E);
  margin-bottom: 10px;
}
.nav-pending-group { margin-bottom: 14px; }
.nav-pending-group:last-child { margin-bottom: 0; }
.nav-pending-group__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.nav-pending-group__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #1A1A1A);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.nav-pending-group__label:hover { color: var(--mx2-gold-deep, #876e51); }
.nav-pending-badge--ghost {
  background: transparent;
  border: 1px solid var(--mx2-gold);
  color: var(--mx2-gold-deep, #876e51);
}
.nav-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-pending-list li + li { margin-top: 2px; }
.nav-pending-item {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink, #1A1A1A);
  transition: background 100ms ease;
}
.nav-pending-item:hover { background: rgba(159, 136, 108, 0.08); }
.nav-pending-item__title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 1px;
}
.nav-pending-item__sub {
  display: block;
  font-size: 11px;
  color: var(--ink-soft, #5E5E5E);
  letter-spacing: 0.04em;
}
.nav-pending-more {
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--mx2-gold-deep, #876e51);
  text-decoration: none;
}
.nav-pending-more:hover { text-decoration: underline; }

/* ── Upload progress bar ────────────────────────────────────────────────── */
.upload-progress {
  display: none;
  margin-top: 12px;
  width: 100%;
}
.upload-progress--active { display: block; }
.upload-progress__track {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.upload-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--mx2-gold);
  transition: width 200ms ease-out;
}
.upload-progress__text {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mx2-text-mid, #5E5E5E);
}
.upload-progress--error .upload-progress__fill { background: var(--mx2-rust, #b14b3a); }
.upload-progress--error .upload-progress__text { color: var(--mx2-rust, #b14b3a); }
/* Dark backgrounds (Mx2 admin layout) want a lighter track + label. */
.mx2-side .upload-progress__track { background: rgba(255, 255, 255, 0.08); }
.mx2-side .upload-progress__text  { color: var(--mx2-text-mid, #C8C0AE); }

/* ── .desktop-only / .mobile-only visibility helpers ──────────────────────
   Use these to gate features that only make sense on one form factor.
   Defaults: desktop-only renders, mobile-only hides. The 720px breakpoint
   flips both. */
.mobile-only { display: none; }
@media (max-width: 720px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: block; }
}

/* The "use a desktop for this" upsell card. Friendly, gold-bordered.
   Used inside campaign-show panels so it inherits paper-beige bg. */
.desktop-only-card {
  background: rgba(159, 136, 108, 0.08);
  border: 1px solid var(--mx2-gold);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 12px 0;
}
.desktop-only-card strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mx2-gold-deep, #876e51);
  margin-bottom: 6px;
}
.desktop-only-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink, #1A1A1A);
}

/* ── MOBILE FOUNDATION ────────────────────────────────────────────────────
   Universal touch / no-zoom rules. Scoped to coarse pointers so DESKTOP
   STYLING IS UNCHANGED — these only kick in on phones, tablets, and any
   touch laptop a user might pick up.
   ──────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  /* iOS auto-zooms when an input has font-size < 16px. Bumping every
     interactive control to 16px on coarse pointers eliminates the zoom
     without affecting desktop typography. */
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='number'],
  input[type='tel'],
  input[type='url'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='month'],
  input[type='week'],
  input[type='time'],
  input[type='search'],
  select,
  textarea {
    font-size: 16px;
  }

  /* Apple HIG floor (44pt). Anything tappable hits at least 44px tall. */
  button,
  .btn, .btn-tertiary, .btn-secondary, .btn-primary,
  .btn-ghost, .btn-ghost-dark,
  .mx2-nav-link, .campaign-tab,
  .editable-name__pencil, .cosimo-icon,
  .nav-pending-chip, .mx2-table-link,
  a.auth-link {
    min-height: 44px;
  }
  /* Buttons that are .btn-sm intentionally stay smaller — keep them
     tappable but let them be 36 instead of 44 (badges, inline actions). */
  .btn-sm { min-height: 36px; }
  /* Same for the small icon buttons inside an h1 (pencil / reassign /
     trash). They live in a tight horizontal cluster — a 44px floor would
     break the cluster. */
  .editable-name__pencil { min-height: 28px; min-width: 28px; }
}

/* ── Plan document on small screens — markdown render must not push the
   page wider than the viewport. Constrain width, let inner tables and
   code blocks scroll inside themselves. ──────────────────────────────── */
@media (max-width: 720px) {
  .plan-document {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 14px 14px;
  }
  .plan-document table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .plan-document table th,
  .plan-document table td { white-space: normal; }
  .plan-document pre,
  .plan-document code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }
  /* Banners on plan-view page (revision/rejection notes) */
  .banner { word-break: break-word; }
}

/* ── Green checkmark badge for completed PO tactics + slots ─────────────
   Used by both the client PO cards and the Mx2 admin PO summary, so it
   lives in base.css (loaded by both layouts). */
.po-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--status-launched, #4a8c5e);
  color: #FFFFFF;
  flex-shrink: 0;
}
.po-check--inline {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
}
/* `display: inline-flex` above defeats the bare `hidden` attribute, so
   force it on for the toggle-via-JS slot check. */
.po-check[hidden] { display: none; }

/* ── Plan tactics list (client plan review + Mx2 plan preview) ──────────── */
.plan-tactics {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.plan-tactics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.plan-tactic {
  background: rgba(159, 136, 108, 0.05);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 14px;
}
.plan-tactic-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.plan-tactic-head .cell-with-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.plan-tactic-meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  white-space: nowrap;
}
.plan-tactic-rationale {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
}


/* ── Product hub tiles (client + Mx2) ───────────────────────────────────── */
.hub {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 64px) 20px;
}
.hub-head {
  text-align: center;
  margin-bottom: clamp(24px, 5vw, 48px);
}
.hub-head h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.hub-head p {
  margin: 0;
  font-size: 16px;
  opacity: 0.7;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.hub-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 24px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface, transparent);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  min-height: 200px;
}
.hub-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent, currentColor);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.hub-tile-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(159, 136, 108, 0.12);
  color: var(--accent, #9f886c);
}
.hub-tile-icon svg { width: 26px; height: 26px; }
.hub-tile-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.hub-tile-blurb {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.7;
  flex-grow: 1;
}
.hub-tile-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
/* Dark Mx2 surface override */
body.mx2-side .hub-tile {
  background: rgba(255, 255, 255, 0.02);
}
body.mx2-side .hub-tile:hover {
  background: rgba(255, 255, 255, 0.04);
}