/* Glov Content Accelerator (GCA) — internal AI feature page.
   Built on the platform design tokens so it inherits the shared type, colour and
   geometry system. policy.css supplies an editorial light theme, so this page
   opts into an explicit dark surface for the pipeline diagrams while keeping the
   platform header, footer and consent chrome untouched. */

.gca-page {
  color: var(--glov-text-soft);
  /* Set an explicit background-color as well as the gradient so the area below
     the gradient cannot fall through to the light policy.css body background. */
  background-color: var(--glov-surface);
  background-image:
    radial-gradient(circle at 84% 8%, rgba(168, 85, 247, .22), transparent 30rem),
    linear-gradient(118deg, var(--glov-surface), #241246 58%, #3b1160);
  background-attachment: fixed;
}

.gca-main {
  max-width: 78ch;
}

/* policy.css colours headings for a light surface; restate them for the dark one. */
.gca-page .policy-main h1,
.gca-page .policy-main h2,
.gca-page .policy-main h3 {
  color: var(--glov-text);
}

.gca-page .policy-main h2 {
  font-family: var(--glov-font-display);
}

.gca-page .policy-main p,
.gca-page .policy-main li {
  color: var(--glov-text-muted);
}

.gca-page .policy-main a {
  color: var(--glov-text-lavender);
}

.gca-page .updated {
  color: var(--glov-text-muted);
  border-bottom-color: var(--glov-border);
}

.gca-eyebrow,
.gca-page .policy-main .gca-eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border: 1px solid var(--glov-border);
  border-radius: var(--glov-radius-pill);
  color: var(--glov-text-lavender);
  background: rgba(79, 70, 229, 0.22);
  font-family: var(--glov-font-meta);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gca-main abbr {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* Summary figures ------------------------------------------------------- */
.gca-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 22px 0 30px;
}

.gca-stat {
  padding: 14px 16px;
  border: 1px solid var(--glov-border);
  border-radius: var(--glov-radius);
  background: var(--glov-surface-raised);
  box-shadow: var(--glov-shadow-card);
}

.gca-stat-value {
  display: block;
  font-family: var(--glov-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--glov-text);
}

.gca-stat-label {
  display: block;
  margin-top: 4px;
  font-family: var(--glov-font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glov-text-muted);
}

/* Pipeline stages ------------------------------------------------------- */
.gca-flow {
  display: grid;
  gap: 12px;
  margin: 18px 0 30px;
  padding: 0;
  list-style: none;
  counter-reset: gca-step;
}

.gca-flow li {
  position: relative;
  padding: 14px 16px 14px 54px;
  border: 1px solid var(--glov-border);
  border-radius: var(--glov-radius);
  background: var(--glov-surface-raised);
  counter-increment: gca-step;
}

.gca-flow li::before {
  content: counter(gca-step);
  position: absolute;
  left: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--glov-radius-pill);
  background: var(--glov-gradient-action);
  color: #fff;
  font-family: var(--glov-font-meta);
  font-size: 12px;
  font-weight: 700;
}

.gca-flow b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--glov-font-ui);
  color: var(--glov-text);
}

.gca-flow span {
  color: var(--glov-text-muted);
  line-height: 1.5;
}

/* Agent cards ----------------------------------------------------------- */
.gca-agents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin: 18px 0 30px;
}

.gca-agent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--glov-border);
  border-radius: var(--glov-radius);
  background: var(--glov-surface-raised);
  box-shadow: var(--glov-shadow-card);
}

.gca-agent h3 {
  margin: 0;
  font-family: var(--glov-font-display);
  font-size: 18px;
  color: var(--glov-text);
}

.gca-agent p {
  margin: 0;
  color: var(--glov-text-muted);
  line-height: 1.5;
}

.gca-model {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--glov-border);
  font-family: var(--glov-font-meta);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--glov-text-lavender);
}

.gca-pill {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--glov-radius-pill);
  font-family: var(--glov-font-meta);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gca-pill-generate { color: #0b1020; background: #7dd3fc; }
.gca-pill-judge { color: #2a0b36; background: #f0abfc; }
.gca-pill-reconcile { color: #0b2a1c; background: #86efac; }
.gca-pill-publish { color: #2b1a06; background: #fcd34d; }

/* Skills ---------------------------------------------------------------- */
.gca-skills {
  display: grid;
  gap: 12px;
  margin: 18px 0 30px;
  padding: 0;
  list-style: none;
}

.gca-skills li {
  padding: 14px 16px;
  border: 1px solid var(--glov-border);
  border-left: 3px solid var(--glov-text-lavender);
  border-radius: var(--glov-radius-sm);
  background: var(--glov-surface-raised);
}

.gca-skills h3 {
  margin: 0 0 4px;
  font-family: var(--glov-font-ui);
  font-size: 15px;
  color: var(--glov-text);
}

.gca-skills p {
  margin: 0;
  color: var(--glov-text-muted);
  line-height: 1.5;
}

/* Quality gates --------------------------------------------------------- */
.gca-gates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  margin: 18px 0 30px;
}

.gca-gate {
  padding: 14px 16px;
  border: 1px solid var(--glov-border);
  border-radius: var(--glov-radius-sm);
  background: var(--glov-surface-raised);
}

.gca-gate h3 {
  margin: 0 0 4px;
  font-family: var(--glov-font-ui);
  font-size: 14px;
  color: var(--glov-text);
}

.gca-gate p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--glov-text-muted);
}

.gca-note {
  margin-top: 26px;
  padding: 12px 14px;
  border: 1px dashed var(--glov-border);
  border-radius: var(--glov-radius-sm);
  font-size: 14px;
  color: var(--glov-text-muted);
}

/* Narrow screens -------------------------------------------------------- */
@media (max-width: 640px) {
  .gca-stat-value { font-size: 24px; }
  .gca-flow li { padding: 12px 12px 12px 46px; }
  .gca-flow li::before { left: 12px; top: 12px; width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .gca-page * { transition: none !important; animation: none !important; }
}