/*
  Secfoo website — page-level additions
  --------------------------------------
  Everything reusable already lives in assets/design-system/. This file only
  adds the marketing/docs-shell layout that the shared component library
  doesn't cover (hero, docs top bar + sidebar shell, CLI reference blocks).
*/

.section { padding: var(--space-20) 0; }

/* data-theme repoints the --color-* custom properties but doesn't paint
   anything itself — this is what actually applies them as a background,
   for any themed section that isn't already using .hero or a card class
   that sets its own background-color. */
.theme-surface { background-color: var(--color-bg); }

/* ---------- Contact form honeypot ---------- */
/* deployment-plan.md 7.3: hidden via CSS, not type="hidden" -- bots that
   skip type="hidden" fields still fill this in. Off-screen, not
   display:none/visibility:hidden, since some crawlers check those too;
   also unreachable by keyboard and invisible to screen readers so real
   visitors never stumble into it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__status {
  margin-top: var(--space-4);
}

/* ---------- Hero terminal: cycling --agent value ---------- */
/* Real secfoo CLI values (see the AgentId enum): claude, agent (Cursor's
   id), agy (Antigravity), gemini — never invented flag values. */
/* All four words share one grid cell (grid-row/column: 1) instead of being
   absolutely positioned — that lets the browser align the stack's own text
   baseline with the surrounding line normally, rather than guessing at a
   height/vertical-align that drifted the animated word below the line. */
.agent-cycle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 6.2ch;
}
.agent-cycle__item {
  grid-row: 1;
  grid-column: 1;
  white-space: nowrap;
  color: var(--surface-terminal-prompt);
  font-weight: var(--font-weight-medium);
  opacity: 0;
  transform: translateY(3px);
  animation: agent-cycle-fade 8s cubic-bezier(.4,0,.2,1) infinite;
}
.agent-cycle__item:nth-child(1) { animation-delay: 0s; }
.agent-cycle__item:nth-child(2) { animation-delay: 2s; }
.agent-cycle__item:nth-child(3) { animation-delay: 4s; }
.agent-cycle__item:nth-child(4) { animation-delay: 6s; }
@keyframes agent-cycle-fade {
  0%, 100% { opacity: 0; transform: translateY(3px); }
  4%, 21% { opacity: 1; transform: translateY(0); }
  25% { opacity: 0; transform: translateY(-3px); }
}
.agent-cycle__caret {
  display: inline-block;
  margin-left: 1px;
  color: var(--surface-terminal-prompt);
  animation: agent-cycle-blink 1s steps(1) infinite;
}
@keyframes agent-cycle-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .agent-cycle__item { animation: none; opacity: 0; }
  .agent-cycle__item:first-child { opacity: 1; }
  .agent-cycle__caret { animation: none; opacity: 1; }
}

.icon { width: 24px; height: 24px; flex-shrink: 0; }
.icon-tile {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/* Carries data-theme="petrol" in markup — background/text tokens repoint
   to the brand-saturated dark ground per the Secfoo brand guide's own
   prescribed hero treatment. */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-24) 0 var(--space-16);
  background-color: var(--color-bg);
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}
/* Content sits above the decorative glow/mark below it. */
.hero > .ds-container { position: relative; z-index: 1; }

/* Soft brand-signal glow, upper right. */
.hero__glow {
  position: absolute;
  z-index: 0;
  top: -12rem;
  right: -8rem;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 168, 156, 0.22) 0%, rgba(20, 168, 156, 0) 70%);
  pointer-events: none;
}
.hero__glow--left {
  top: auto;
  right: auto;
  bottom: -14rem;
  left: -10rem;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, rgba(44, 118, 144, 0.28) 0%, rgba(44, 118, 144, 0) 70%);
}

/* Two-column hero: copy left, a floating report-preview card right — the
   card is what actually fills the void the grid/glow alone didn't, and it
   doubles as a "here's what a run looks like" preview. */
.hero__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.hero__copy { flex: 1 1 34rem; min-width: 0; }
.hero__preview { flex: 0 0 22rem; }
.hero__preview-card {
  /* Re-declare the light-mode role tokens: this card sits inside
     data-theme="petrol", and custom properties inherit down through the
     DOM, so without this it would silently pick up the dark theme's
     tokens (white text, dark surface) instead of looking like the real
     (light) dashboard. */
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-gray-50);
  --color-surface: var(--color-white);
  --color-border: var(--color-gray-200);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-link: var(--color-primary-700);
  --color-link-hover: var(--color-primary-800);
  transform: rotate(1.5deg);
  box-shadow: var(--shadow-lg), 0 2rem 4rem rgba(0, 0, 0, 0.35);
}
@media (max-width: 72rem) {
  .hero__preview { display: none; }
}

.site-footer {
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-subtle);
  padding: var(--space-16) 0 var(--space-8);
}

/* ---------- Docs top bar (separate chrome from the marketing .nav) ---------- */
.docs-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.docs-topbar__inner {
  width: 100%;
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.docs-pill {
  font: var(--text-caption);
  font-weight: var(--font-weight-bold);
  color: var(--color-teal-700);
  background: var(--color-teal-100);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: .03em;
}
.docs-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font: var(--text-body-sm);
  width: 16rem;
  max-width: 40vw;
  background: none;
  cursor: default;
}
.docs-topbar__right { display: flex; align-items: center; gap: var(--space-5); }
.docs-topbar__link {
  font: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.docs-topbar__link:hover { color: var(--color-primary-700); }

/* ---------- Docs shell layout (sidebar.css supplies .app-shell / .sidebar) ---------- */
.sidebar {
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}
.sidebar__link--sub {
  padding-inline-start: var(--space-6);
  font-family: var(--font-family-mono);
  font-size: .8125rem;
}
.app-shell__main { display: flex; justify-content: center; }
.doc-content { flex: 1; max-width: 46rem; padding: var(--space-10); }
.doc-content--wide { max-width: 48rem; }
.doc-content h2 { padding-top: var(--space-8); border-top: 1px solid var(--color-border); margin-top: var(--space-10); }
.doc-content h2:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.doc-content h3 { font: var(--text-h4); font-family: var(--font-family-mono); font-weight: 700; color: var(--color-primary-800); }
.doc-toc {
  width: 14rem;
  flex-shrink: 0;
  padding: var(--space-10) var(--space-6);
  position: sticky;
  top: var(--nav-height);
  height: fit-content;
}
.doc-toc__label {
  font: var(--text-overline);
  letter-spacing: var(--overline-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: block;
}
.doc-toc__link { display: block; font: var(--text-body-sm); color: var(--color-text-muted); text-decoration: none; padding-block: var(--space-1); }
.doc-toc__link:hover { color: var(--color-primary-700); }
.breadcrumb { font: var(--text-body-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-text-muted); }

/* ---------- CLI reference command blocks ---------- */
.cmd { margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.cmd:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cmd__desc { color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-3); }
.flag-table { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.flag-row { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-3); font: var(--text-body-sm); border-bottom: 1px solid var(--color-border); }
.flag-row:last-child { border-bottom: none; }
.flag-row:nth-child(odd) { background: var(--color-bg-subtle); }
.flag-name { font-family: var(--font-family-mono); color: var(--color-primary-700); flex: 0 0 11rem; }
.flag-desc { color: var(--color-text-muted); flex: 1; }

@media (max-width: 64rem) {
  .sidebar { display: none; }
  .doc-toc { display: none; }
  .docs-search { display: none; }
}

/* ---------- Editions stack (community → cloud → enterprise) ---------- */
.edition-stack { display: flex; flex-direction: column; align-items: stretch; max-width: 46rem; margin-inline: auto; }
.edition-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.edition-card--cloud { border-color: var(--color-teal-500); border-width: 2px; }
/* Enterprise card carries data-theme="petrol" in markup — role tokens (bg,
   surface, text, text-muted) repoint automatically, so only what the theme
   doesn't cover (border, and the softer body/list copy) is set here. */
.edition-card--enterprise { background-color: var(--color-bg); border-color: var(--color-bg); color: var(--color-text); }
.edition-card--enterprise .card__body,
.edition-card--enterprise p,
.edition-card--enterprise li { color: var(--color-text-muted); }
.edition-card--enterprise h3 { color: var(--color-text); }
.edition-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.edition-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.edition-features li { display: flex; align-items: flex-start; gap: var(--space-3); }
.edition-features svg { flex-shrink: 0; margin-top: 2px; }
.edition-connector { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) 0; color: var(--color-text-muted); font: var(--text-caption); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .05em; }