/* CAIN-42 inner pages: one look for every page that is not a homepage.
   Loaded LAST in <head> (the gateway's page middleware and clawx-site/server.py add it), so it wins over each page's own
   <style>. The homepages never load it (they carry body.c42 and are left byte-for-byte alone).
   Palette and type are the homepages' (cain42.css :root). Keep this file byte-identical in platform-gateway/frontend/
   and clawx-site/ (tests/test_site_chrome.py checks).

   How it works: most pages were written against one of a handful of private palettes (--panel/--accent, --surface/--accent,
   --bg2, --cain-*). Redefining those variables here re-skins the page without touching its markup; the rules after that
   cover what the variables do not reach (gradient headlines, hard-coded blues, tables, forms, code). */

:root {
  /* the homepage tokens */
  --c42-bg: #060a17; --c42-raised: #0d1328; --c42-raised-2: #111a33; --c42-sunken: #040711;
  --c42-line: #1a2342; --c42-line-strong: #2b3760;
  --c42-text: #eef1f8; --c42-dim: #b4bdd6; --c42-faint: #7d87a6;
  --c42-red: #ff3b4a; --c42-red-hover: #ff5a67; --c42-red-dim: #3a0f18; --c42-red-soft: #ff3b4a24; --c42-accent-2: #ff8a80;
  --c42-ok: #3fb68b; --c42-warn: #d9a441; --c42-bad: #e5484d;
  --c42-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --c42-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* palette A: product pages (budget, governance, memory, guard, eval, context, skills, plans, trace, agent security) */
  --bg: var(--c42-bg); --panel: var(--c42-raised); --panel-2: var(--c42-raised-2); --border: var(--c42-line);
  --border-soft: var(--c42-line); --text: var(--c42-text); --text-dim: var(--c42-dim); --muted: var(--c42-faint);
  --muted-dim: #5d6787; --accent: var(--c42-red); --accent-soft: var(--c42-red-soft); --accent2: var(--c42-red);
  --accent2-soft: var(--c42-red-soft); --sans: var(--c42-sans); --mono: var(--c42-mono);
  /* palette B: impact, resilience */
  --bg2: var(--c42-raised);
  /* palette C: demo, EU AI Act, insurance, sandbox, verify gate, MCP scanner */
  --surface: var(--c42-raised); --surface-elevated: var(--c42-raised-2); --panel-elevated: var(--c42-raised-2);
  --border-accent: #ff3b4a66; --text-muted: var(--c42-dim); --blue: var(--c42-accent-2);
  /* palette D: observability */
  --cain-bg: var(--c42-bg); --cain-surface: var(--c42-raised); --cain-surface-2: var(--c42-raised-2);
  --cain-border: var(--c42-line); --cain-text: var(--c42-text); --cain-text-muted: var(--c42-dim); --cain-primary: var(--c42-red);
  /* palette E: lab, live cluster, evidence pages */
  --fg: var(--c42-text); --mut: var(--c42-dim); --card: var(--c42-raised); --bd: var(--c42-line); --acc: var(--c42-red);
  --ac: var(--c42-accent-2);
  color-scheme: dark;
}

/* ---- base ---- */
html { background: var(--c42-bg); -webkit-text-size-adjust: 100%; }
body { background: var(--c42-bg) !important; color: var(--c42-text) !important; font-family: var(--c42-sans) !important;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
::selection { background: #ff3b4a55; color: #fff; }
:focus-visible { outline: 2px solid var(--c42-red) !important; outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { color: var(--c42-text); letter-spacing: -.012em; }
h1 { font-weight: 700; }
a { color: var(--c42-accent-2); }
a:hover { color: #ffb3ad; }
code, pre, kbd, samp { font-family: var(--c42-mono) !important; }
:not(pre) > code { background: var(--c42-raised-2); border: 1px solid var(--c42-line); border-radius: 5px; padding: .08em .38em; font-size: .9em; }
pre { background: var(--c42-sunken) !important; border: 1px solid var(--c42-line) !important; border-radius: 10px; color: #dfe5f5; }
hr { border: 0; border-top: 1px solid var(--c42-line); }
img, svg, video { max-width: 100%; }

/* one headline accent, as on the homepages: red to coral, never blue or purple */
.hero h1 span, h1 .gradient, .gradient-text, .grad, .hero-title span, h1 span.accent {
  background: linear-gradient(90deg, var(--c42-red), var(--c42-accent-2)) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }

/* ---- tables ---- */
table { border-collapse: collapse; }
th { color: var(--c42-faint); font-family: var(--c42-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
th, td { border-color: var(--c42-line) !important; }
tbody tr:hover td { background: #0f1630; }

/* ---- forms ---- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea {
  background: var(--c42-sunken) !important; color: var(--c42-text) !important; border: 1px solid var(--c42-line-strong) !important;
  border-radius: 8px; font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--c42-red) !important; outline: none; box-shadow: 0 0 0 3px #ff3b4a26; }
input::placeholder, textarea::placeholder { color: #5d6787; }
input[type=range] { accent-color: var(--c42-red); }
input[type=checkbox], input[type=radio] { accent-color: var(--c42-red); }

/* ---- buttons: the homepage primary is solid CAIN red; secondary is a quiet outline ---- */
button, .btn, .button, a.btn, a.button { font-family: var(--c42-sans); border-radius: 8px; transition: background .15s, border-color .15s, color .15s; }
.btn-primary, .btn.primary, .button.primary, .btn-execute, .cta:not(.secondary), .cta-primary, button.primary, .primary-btn {
  background: var(--c42-red) !important; border-color: var(--c42-red) !important; color: #fff !important; }
.btn-primary:hover, .btn.primary:hover, .btn-execute:hover, .cta:not(.secondary):hover, button.primary:hover { background: var(--c42-red-hover) !important; }

/* pages that painted buttons with a hard-coded blue */
[style*="#3b82f6"], [style*="#2563eb"], [style*="#5b8cff"], [style*="#38bdf8"] { color: var(--c42-accent-2) !important; }

/* ---- chrome: the shared strip, header and footer run the full width even on pages whose <body> is a narrow column ---- */
#cain-site-nav, header.cs-top, .cain-footer { width: auto !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
.cs-top { margin-top: 0 !important; }
body > #cain-site-nav:first-child { margin-top: 0 !important; }

/* ---- page-family details the variables do not reach ---- */
/* product pages: status pills and the small "live" badges were blue */
.badge, .live-badge, .pill, .tag { border-color: #ff3b4a55 !important; }
.hero .badge { background: var(--c42-red-soft) !important; color: var(--c42-accent-2) !important; }
/* stat tiles: numbers in the accent colour read as CAIN red */
/* counters read white like the homepage stats; a page's own .stat-value.success / .danger etc. (more specific) still colour them */
.stat-value, .stat-number, .metric-value { font-variant-numeric: tabular-nums; }
.stat-value { color: var(--c42-text); }
/* cards everywhere get the homepage card */
.card, .panel, .demo-section, .stats-section, .tool-card, .feature-card, .section-card {
  background: var(--c42-raised) !important; border: 1px solid var(--c42-line) !important; border-radius: 12px; }

/* ---- leftovers the shared header replaces ---- */
.sitenav { display: none !important; }            /* clawx.click's old "CAIN family" bar */
/* the in-page link rows at the top of the Lab, Live cluster and evidence pages become a quiet sub-navigation */
main > nav:first-child, body > nav:first-of-type:not(.cs-nav):not(.cs-menu-panel) {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 18px; padding: 0; }
main > nav:first-child a, body > nav:first-of-type:not(.cs-nav):not(.cs-menu-panel) a {
  color: var(--c42-dim) !important; text-decoration: none !important; font-size: 13px; padding: 5px 11px; margin: 0 !important;
  border: 1px solid var(--c42-line); border-radius: 999px; background: var(--c42-raised); text-transform: none; }
main > nav:first-child a:hover, body > nav:first-of-type:not(.cs-nav):not(.cs-menu-panel) a:hover { color: var(--c42-text) !important; border-color: var(--c42-red); }

/* ---- small screens ---- */
/* nothing on a page may push it wider than the screen */
:not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
p a, li a, td a, dd a { overflow-wrap: anywhere; }
select, input, textarea { max-width: 100%; }
.tabs, .tab-bar, .tab-list, [role=tablist] { flex-wrap: wrap; max-width: 100%; }
/* grid / layout children may shrink below their longest code line (the default min-width:auto is what pushed phones sideways) */
[class*="grid"] > *, [class*="layout"] > *, [class*="container"] > *, .panel, .card { min-width: 0; }
.panel pre, .card pre, .panel textarea, .card textarea { max-width: 100%; }
@media (max-width: 640px) {
  table { display: block !important; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  pre { overflow-x: auto; max-width: 100%; }
  h1 { overflow-wrap: anywhere; }
  /* step / flow / lifecycle rows wrap instead of running off the edge */
  [class*="flow"], [class*="steps"], [class*="lifecycle"], [class*="pipeline"] { flex-wrap: wrap !important; }
}
