/* coiep — per-tenant stylesheet (see lib/cms/tenant-css.ts).
 *
 * STELDRIS-365 fidelity pass — values transcribed from the SOURCE design
 * (fruition/coiep-frontend, Chakra theme in app/providers.tsx): UW Blue
 * #0a3161 / UW Brown #a67c52, Georgia serif headings, Arial body, 6px button
 * radius, 8px card radius, gray.50 bands, white bordered cards.
 *
 * Conventions (CLAUDE.md layer 4): selectors use stable st-* platform hooks
 * or the `coiep-*` namespace; colors come from var(--tenant-*) tokens —
 * the few Chakra-palette values that have no token (bubble grays, brand.200
 * header band, the "Complete" green) are named `--coiep-*` with a comment
 * pointing at their source scale step.
 */

:root {
  /* Source-extracted neutrals (Chakra gray.* from app/providers.tsx) */
  --coiep-gray-100: #edf2f7;  /* gray.100 — chat bubbles, progress tracks */
  --coiep-gray-50: #f7fafc;   /* gray.50 bands */
  --coiep-brand-200: #9ab3d3; /* chat card header band (brand.200) */
  --coiep-brand-50: #e6ebf2;  /* brand.50 — "me" bubbles, hero subtext */
  --coiep-green: #38a169;     /* Chakra green.500 — Online badge / Complete icons */
  --coiep-badge-done-bg: #c6f6d5; /* green.100 badge fill */
  --coiep-badge-done-fg: #276749; /* green.800 badge text */

  /* Type scale — exact breakpoints from the source (60px display, 48px h2,
   * 20px card titles at the 1440 cap). */
  --type-display: clamp(2.5rem, 1.5rem + 3.6vw, 3.75rem);
  --type-h1: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --type-h2: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  --type-h3: 1.25rem;
}

/* Headings render bold Georgia in the source (Chakra fontWeight 700). */
.st-display, .st-h1, .st-h2, .st-h3, .st-h4 { font-weight: 700; }

/* Card titles + body copy at the source's sizes. */
.st-h3 { font-size: var(--type-h3); }

/* Icon service cards (About / Usage grids) — source cards have NO icon chip
 * and NO top accent strip: a bare 32px brand icon above a Georgia title. */
[class*="group/svc"] { border-radius: 8px; }
[class*="group/svc"] > span:first-child {
  background: transparent !important;
  height: auto;
  width: auto;
}
[class*="group/svc"] > span:first-child svg { width: 32px; height: 32px; }
[class*="group/svc"] > span:last-child { display: none; }
/* Multi-line descriptions (the Usage cards) render one line per bullet. */
[class*="group/svc"] p { white-space: pre-line; font-size: 1rem; }

/* Header CTA — the source's header button: brand.500, 16px/600, radius 6. */
.st-nav-cta {
  font-family: var(--tenant-font-body);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
}

/* CTA buttons ride theme tokens inline; set the anatomy the shared renderer
   leaves to tokens. (Never repaint colour-only — see docs/fidelity-pass.md.) */
.st-cta {
  font-family: var(--tenant-font-body);
  font-weight: 600;
  border-radius: 6px;
}

/* ── Hero (tenant override: components/blocks/tenants/coiep/hero.tsx) ────── */
.coiep-hero {
  background: var(--tenant-brand);
  color: var(--tenant-on-brand);
  padding: 5rem 1.5rem;
}
.coiep-hero-inner {
  max-width: 1200px;
}
.coiep-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .coiep-hero-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.coiep-hero--centered { text-align: center; }
.coiep-hero--centered .coiep-hero-sub { margin-inline: auto; }
.coiep-hero--centered .coiep-hero-actions { justify-content: center; }
.coiep-hero-heading {
  color: var(--tenant-on-brand);
  font-weight: 700;
  line-height: 1.2;
  max-width: 48rem;
  text-wrap: balance;
}
.coiep-hero-sub {
  margin-top: 1.5rem;
  color: #e6ebf2; /* brand.50 — the source's hero subtext colour */
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 36rem;
}
.coiep-hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
/* The source's hero primary CTA is brand.500 ON the brand.500 band (Chakra
   renders the fill edge-to-edge) with white text; the secondary is outline
   white. Restyle the on-dark variants here rather than letting the platform's
   on-brand inversion show a white fill the source doesn't have. */
.coiep-hero .st-cta--solid {
  background: var(--tenant-brand);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%);
}
.coiep-hero .st-cta--solid:hover { background: var(--tenant-brand-dark); color: #fff; }
.coiep-hero--centered .st-cta--solid { background: #fff; color: var(--tenant-brand); box-shadow: none; }
.coiep-hero--centered .st-cta--solid:hover { background: var(--coiep-gray-100); }
.coiep-hero-chip {
  display: inline-block;
  width: fit-content;
  margin-bottom: 1.5rem;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  background: #38a169;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}

/* ── Signature chat-preview card (hero right column + step-3 mini chat) ──── */
.coiep-chat {
  background: var(--tenant-surface);
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  overflow: hidden;
  text-align: left;
}
.coiep-chat-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--coiep-brand-200, #9ab3d3); /* source brand.200 (Chakra theme) */
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.coiep-badge-online {
  margin-left: auto;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--coiep-green, #38a169);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.coiep-chat-body { display: grid; gap: 0.75rem; padding: 1rem; }
.coiep-bubble {
  padding: 0.75rem;
  border-radius: 6px;
  background: var(--coiep-gray-100, #edf2f7);
  color: var(--tenant-ink);
  font-size: 0.875rem;
  line-height: 1.5;
}
.coiep-bubble-me {
  background: var(--coiep-brand-50, #e6ebf2);
  margin-left: auto;
  max-width: 85%;
}
.coiep-bubble-draft {
  max-width: 92%;
  background: var(--coiep-brand-50, #e6ebf2);
}
.coiep-chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--tenant-line);
  border-radius: 6px;
  color: var(--tenant-slate);
  font-size: 0.875rem;
  background: var(--tenant-surface);
}
.coiep-chat-input svg { color: var(--tenant-red); flex-shrink: 0; }

/* ── How CoIEP Works — alternating steps + mock panels ───────────────────── */
/* The html block renders inside .prose-tenant (70ch measure) — widen the
   prose container when it hosts the steps composition, then break out of the
   shell for the full-bleed gray.50 band. */
.prose-tenant:has(section.coiep-steps) { max-width: none; }
.coiep-steps {
  /* Full-bleed gray.50 band (the html block renders inside a white Section —
     break out of the shell to own the band). */
  margin-inline: calc(50% - 50vw);
  padding: 5rem 1.5rem;
  background: var(--tenant-mist);
}
.coiep-steps > * {
  max-width: 1200px;
  margin-inline: auto;
}
.coiep-steps-head { text-align: center; margin-bottom: 3rem; }
.coiep-steps-head p { margin-top: 1rem; font-size: 1.125rem; color: var(--tenant-slate); }
.coiep-step {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-block: 4rem;
}
@media (min-width: 768px) {
  .coiep-step { grid-template-columns: 1fr 1fr; }
  .coiep-step--flip .coiep-step-copy { order: 2; }
  .coiep-step--flip .coiep-panel { order: 1; }
}
.coiep-step-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.coiep-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--tenant-brand);
  color: var(--tenant-on-brand);
  font-weight: 700;
}
.coiep-step-copy h3 {
  font-size: 1.875rem;
  line-height: 1.3;
  color: var(--tenant-ink);
  font-weight: 700;
  margin: 0;
}
.coiep-step-copy > p { color: var(--tenant-slate); margin-top: 0.5rem; }
.coiep-panel {
  background: var(--tenant-surface);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  border: 1px solid var(--tenant-line);
}
.coiep-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--tenant-ink);
  font-size: 1rem;
}
.coiep-panel-head svg { color: var(--tenant-red); flex-shrink: 0; }
.coiep-panel-head--green svg { color: var(--coiep-green, #38a169); }
.coiep-panel-rows { display: grid; gap: 0.5rem; margin: 0; }
.coiep-panel-rows > div { display: flex; justify-content: space-between; gap: 1rem; }
.coiep-panel-rows > div.coiep-row-stacked { display: block; }
.coiep-panel-rows dt { font-weight: 500; font-size: 0.875rem; color: var(--tenant-ink); }
.coiep-panel-rows dd { margin: 0; font-size: 0.875rem; color: var(--tenant-slate); }
.coiep-progress-row { display: grid; gap: 0.25rem; }
.coiep-progress-row > span:first-child { font-size: 0.875rem; margin-bottom: 0.25rem; }
.coiep-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--coiep-gray-100, #edf2f7);
  overflow: hidden;
}
.coiep-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tenant-red);
}
.coiep-mini-chat { display: grid; gap: 0.5rem; }
.coiep-mini-chat .coiep-bubble-me { max-width: 85%; }
.coiep-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.coiep-checklist li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tenant-ink);
}
.coiep-badge-done {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--coiep-badge-done-bg, #c6f6d5);
  color: var(--coiep-badge-done-fg, #276749);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── CTA banner — the source's brand.500→brand.600 horizontal gradient ───── */
section[data-tone="brand"].st-cta-band,
section[data-tone="brand"] {
  background: linear-gradient(to right, var(--tenant-brand), var(--tenant-brand-dark));
}

/* ── Doc-style pages (security / terms / privacy) ────────────────────────── */
.coiep-doc { max-width: 46rem; }
.coiep-doc-updated {
  color: var(--tenant-slate);
  font-size: 0.875rem;
  border-bottom: 1px solid var(--tenant-line);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}
.coiep-doc-tagline {
  color: var(--tenant-accent);
  font-family: var(--tenant-font-heading);
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
.coiep-doc-intro { font-size: 1.0625rem; line-height: 1.7; color: var(--tenant-ink); }

/* Emphasis callout (contrast note on the security page) */
.coiep-callout {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--tenant-accent);
  border-radius: var(--tenant-radius, 6px);
  background: color-mix(in srgb, var(--tenant-accent) 8%, var(--tenant-surface));
}
.coiep-callout p { margin: 0; }

/* ── Quick Start / developer docs ────────────────────────────────────────── */
.coiep-code-section { max-width: 46rem; }
.coiep-code-section pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  background: #1a202c; /* the source's CodeBlock bg (Chakra gray.900) */
  color: #68d391;      /* the source's green.300 code text */
  font-size: 0.875rem;
  line-height: 1.6;
}
.coiep-code-section code { color: inherit; }

/* ── CTA button (security page download) ─────────────────────────────────── */
.coiep-btn-green {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  background: #38a169;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.coiep-btn-green:hover { background: #276749; color: #fff; text-decoration: none; }