/* v6.0 theme override — flip the compiled Tailwind dark theme to the
 * AEO Agent enterprise palette (white canvas, warm ink, teal primary).
 * Loaded AFTER the compiled Tailwind CSS so var values win by cascade. */
/* fonts loaded by index.html */

:root, :host {
  /* Surface */
  --color-white: #FFFFFF;
  --color-base: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-elevated: #F4F2EE;
  --color-muted: #F4F2EE;

  /* Ink (warm near-black) */
  --color-fg: #2D2A26;
  --color-fg-secondary: #4A4743;
  --color-fg-muted: #67635E;
  --color-fg-faint: #9A9693;
  --color-fg-ghost: #B9B5B0;

  /* Hairlines — v6.2: stronger tokens matching the parent shared skin */
  --color-line: #DCD8D1;
  --color-line-strong: #C6C1B8;
  --color-line-hover: #B5B0A7;

  /* Primary (teal) */
  --color-accent: #0F766E;
  --color-accent-hover: #0B5D56;
  --color-accent-muted: rgba(15, 118, 110, 0.12);
  --color-accent-subtle: rgba(15, 118, 110, 0.06);

  /* Status colors (semantic spec) */
  --color-teal: #0F766E;
  --color-teal-muted: rgba(15, 118, 110, 0.12);
  --color-emerald: #0F8A5B;
  --color-emerald-muted: rgba(15, 138, 91, 0.12);
  --color-amber: #B4651B;
  --color-amber-muted: rgba(180, 101, 27, 0.12);
  --color-red: #B3371D;
  --color-red-muted: rgba(179, 55, 29, 0.12);
  --color-blue: #0F766E;

  /* Typography — Inter everywhere (serif var pinned to Inter so the bundle's
     font-serif wordmark/headings normalize to the parent app) */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* Override the hard-coded Tailwind arbitrary classes at body level
 * (Tailwind v4 inlines arbitrary hex values, so vars don't help here) */
body.bg-\[\#09090b\] { background: #FFFFFF !important; }
body.text-\[\#fafafa\] { color: #2D2A26 !important; }

/* Headings — Inter/ink to match the parent app (was Fraunces serif pre-v6.0) */
h1, h2, h3, h4, .font-semibold:is(h1,h2,h3,h4) {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* White page background as fallback */
html { background: #FFFFFF; }


/* ─── Blog Writer final-output view: dark ink + readable headings ─────────────
 * The compiled content HTML (h1..h6, p, strong, a, ul, ol, blockquote, code)
 * is rendered inside the bundle's output panel. Without explicit overrides,
 * the bundle's Tailwind `text-text` / `text-white` utilities and default prose
 * colors render near-white on white → invisible. Force warm-ink ink on every
 * prose-adjacent element so the preview reads cleanly. */
.prose, .prose *,
article.prose, article.prose *,
[class*="prose"] h1,
[class*="prose"] h2,
[class*="prose"] h3,
[class*="prose"] h4,
[class*="prose"] h5,
[class*="prose"] h6,
[class*="prose"] p,
[class*="prose"] li,
[class*="prose"] strong,
[class*="prose"] em,
[class*="prose"] blockquote {
  color: #2D2A26 !important;
}
[class*="prose"] a,
[class*="prose"] a:visited { color: #0F766E !important; text-decoration: underline; text-underline-offset: 3px; }
[class*="prose"] a:hover { color: #0B5D56 !important; }
[class*="prose"] code,
[class*="prose"] pre code { color: #2D2A26 !important; background: #F4F2EE !important; }
[class*="prose"] hr { border-color: #DCD8D1 !important; }

/* Content-preview panel fallbacks — when the output wrapper isn't using .prose
 * but is a plain div holding dangerouslySetInnerHTML of generated blog HTML. */
[class*="content-view"] h1, [class*="content-view"] h2, [class*="content-view"] h3,
[class*="output"]   h1, [class*="output"]   h2, [class*="output"]   h3,
[class*="preview"]  h1, [class*="preview"]  h2, [class*="preview"]  h3,
[class*="final"]    h1, [class*="final"]    h2, [class*="final"]    h3,
article h1, article h2, article h3, article h4, article h5, article h6,
article p, article li, article strong, article em, article blockquote {
  color: #2D2A26 !important;
}
article a, [class*="preview"] a, [class*="output"] a { color: #0F766E !important; }

/* Content headings — Inter to match the parent app (was Fraunces pre-v6.0) — only in
 * the output wrapper so form labels stay Inter */
[class*="prose"] h1, [class*="prose"] h2, [class*="prose"] h3,
article h1, article h2, article h3,
[class*="preview"] h1, [class*="preview"] h2, [class*="preview"] h3 {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* SEO Meta card — explicit dark colors so the meta title + description that
 * the bundle already renders conditionally (r.metaTitle && r.metaDescription)
 * stay visible instead of white-on-white. */
[class*="meta"] h2, [class*="meta"] h3,
[class*="meta-title"], [class*="metaTitle"],
[class*="meta-description"], [class*="metaDescription"] {
  color: #2D2A26 !important;
}

/* ── v5.32.0 polish — tighter density, friendlier hierarchy ───────────────── */
button { transition: background-color .15s, border-color .15s, color .15s; }
input, select, textarea { transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(15,118,110,.24) !important; }

/* Section spacing rhythm — more air between cards on the page */
[class*="space-y-6"] > * + * { margin-top: 1.5rem !important; }

/* Heading scale: tighter, more editorial */
h1 { letter-spacing: -.018em !important; }
h2 { letter-spacing: -.012em !important; }

/* Card surfaces — v6.2: rgba(45,42,38,.08) was near-invisible (the "everything
 * is white" complaint); cards now use the parent skin's border token and form
 * fields get the strong token at higher specificity below. */
[class*="rounded-lg"], [class*="rounded-xl"] {
  border-color: #DCD8D1 !important;
}
input, select, textarea { border-color: #C6C1B8 !important; }
input[class*="rounded"], select[class*="rounded"], textarea[class*="rounded"] {
  border-color: #C6C1B8 !important;
}
/* Focus: keep the teal border visible despite the !important rules above
 * (teal ring comes from the input:focus box-shadow rule above). */
input:focus, select:focus, textarea:focus { border-color: #0F766E !important; }

/* Pill/badge polish */
[class*="badge"], [class*="pill"], [class*="chip"] {
  font-weight: 500 !important;
  letter-spacing: .01em;
}

/* ── v6.0 (2026-06-10) enterprise re-skin ─────────────────────────────────────
 * Buttons — parent app spec: radius 10px, 13px/500 Inter, teal primary fill.
 * Element-level (lowest specificity) so the bundle's utility classes still win
 * where they declare these properties explicitly. */
button { border-radius: 10px; font-weight: 500; }

/* v6.1 embedded mode */
/* ──────────────────────────────────────────────────────────────────────────
 * html.aeo-embedded is set by assets/embed-shim.js (loaded before the bundle)
 * ONLY when the app runs inside the AEO Agent iframe (window.self !== top).
 * Standalone visits keep the full UI (they SSO-gate to AEO Agent anyway).
 * Goal: Quick-Blog only — the New Content card + results/history, nothing
 * that duplicates parent chrome.                                            */

/* 1) Inner product header — wordmark ("Content Writer" + pen icon), the
      CLIENT · chip duplication, the Writer | Admin tabs, and the header
      "Today 0/20" quota chip. Structural anchor: the app's single <header>. */
html.aeo-embedded .writer-app > div > header { display: none !important; }

/* 2) Second "Today 0/20" quota chip on the New Content card header row
      (the only 30px-tall bg-elevated chip in main).                        */
html.aeo-embedded .writer-app main div.justify-between > div.h-\[30px\].bg-elevated { display: none !important; }

/* 3) "Pipeline" info banner — "4-step pipeline · Gemini drafts + reviews ·
      Claude polishes + finalises". Anchor: the stable aria-label on its
      info button. (embed-shim.js carries a text-anchored fallback rule.)   */
html.aeo-embedded .writer-app main div:has(> label [aria-label="How the 4-step pipeline works"]) { display: none !important; }

/* 4) "Pipeline Model" field (label + select, stale "Opus 4.7" copy) — the
      default value keeps applying server-side, it's just not user-facing.
      Anchor: the only select with openrouter:* option values.              */
html.aeo-embedded .writer-app main div:has(> div > select option[value^="openrouter:"]) { display: none !important; }

/* 5) Brown "Legacy 6-step writer" maintenance tooltip injected by
      index.html when iframed.                                              */
html.aeo-embedded #cw-maintenance-banner { display: none !important; }

/* 6) Pull the New Content card up near the top of the iframe. */
html.aeo-embedded .writer-app main { padding-top: 16px !important; }