/* Agent Engine — "Beyond the horizon v1" teaser pages: shared frame.
   These four _workzone/horizon-*.html pages are not workzone topics (no design
   decisions, no data model) — they are deliberately muted teasers of the v2
   shape: a grey ground that reads "next iteration", one signature diagram, and
   a short intrigue line. The frame here is shared by all four; each page's own
   signature diagram lives in its per-page sheet (horizon-<topic>.css).
   Loaded by the horizon-*.html pages on top of module.css.
   Placement convention: docs/architecture/README.md §Styling. */

/* ═══════════════════════════════════════════
   Grey ground — the "future / deferred" tone
   ═══════════════════════════════════════════
   A neutral, desaturated palette scoped to the page: shared chrome (.section,
   notes) cools down with it, set apart from the warm accent of v1 pages. One
   warm spark (--hz-spark) is kept so the teaser entices rather than reads dead. */
.page--horizon {
  --hz-ink: #5d574f; /* cooled text-dim */
  --hz-dim: #8f877c; /* cooled text-muted */
  --hz-line: #d9d3ca; /* neutral border */
  --hz-panel: #f4f1ec; /* neutral surface */
  --hz-panel-2: #ece8e1; /* recessed neutral */
  --hz-spark: var(--accent); /* the single warm accent kept alive */
  --hz-spark-pale: rgba(184, 96, 48, 0.1);
}

/* Eyebrow over the page title — names the band the page belongs to. */
.hz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hz-dim);
  margin-bottom: 0.6rem;
}
.hz-eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--hz-dim);
}

/* ═══════════════════════════════════════════
   Hero — the one-glance intrigue
   ═══════════════════════════════════════════ */
.hz-hero {
  margin: 0 0 1.6rem;
}
.hz-hero__lead {
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hz-hero__lead b {
  color: var(--hz-spark);
}
.hz-hero__sub {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--hz-ink);
  margin-top: 0.6rem;
}

/* ═══════════════════════════════════════════
   Stage — framed canvas for the signature diagram
   ═══════════════════════════════════════════ */
.hz-stage {
  position: relative;
  padding: 1.6rem 1.4rem;
  background: var(--paper);
  border: 1.5px solid var(--hz-line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
/* Caption riding the stage's top edge, like the poster's loop cap. */
.hz-stage__cap {
  position: absolute;
  top: -0.62rem;
  left: 1.4rem;
  background: var(--paper);
  padding: 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hz-dim);
}

/* ═══════════════════════════════════════════
   Teaser card grid — reused by analytics & identity galleries
   ═══════════════════════════════════════════
   The card is built like a workzone diagram block (.ae-rail / .gv-row): a paper
   surface, a solid hairline, a left rail and a soft shadow — only the rail is
   grey, not the warm accent, so the family reads the same but desaturated. */
.hz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
.hz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem;
  background: var(--surface);
  border: 1.5px solid var(--hz-line);
  border-left: 3px solid var(--hz-dim);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}
.hz-card__glyph {
  font-size: 1.3rem;
  line-height: 1;
}
.hz-card__name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.hz-card__role {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hz-dim);
}
.hz-card__desc {
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--hz-ink);
}
/* "What it finds" — the agent's catch, set off by a faint top rule. */
.hz-card__find {
  margin-top: 0.15rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--hz-line);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--hz-ink);
}
.hz-card__find b {
  color: var(--hz-spark);
  font-weight: 700;
}
/* Ghost card — hints the catalogue keeps growing past the named few. The one
   place a dashed, fill-less tile belongs: it reads as an open slot, not a built
   block. Drops the solid card's rail and shadow. */
.hz-card--ghost {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  border: 1.5px dashed var(--hz-line);
  box-shadow: none;
  color: var(--hz-dim);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   Chips & sparks — shared small parts
   ═══════════════════════════════════════════ */
/* Scope/visibility chip on a card (e.g. "company · visible to all"). */
.hz-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: var(--pill-radius);
  color: var(--hz-dim);
  background: var(--hz-panel-2);
  border: 1px solid var(--hz-line);
}
/* The single accent spark — a small lit chip that keeps the grey alive. */
.hz-chip--spark {
  color: var(--hz-spark);
  background: var(--hz-spark-pale);
  border-color: var(--hz-spark-pale);
}

/* ═══════════════════════════════════════════
   Foot — closing intrigue + return to v1 ground
   ═══════════════════════════════════════════ */
.hz-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hz-line);
  font-size: 0.82rem;
  color: var(--hz-ink);
}
.hz-foot b {
  color: var(--text);
}

@media (max-width: 640px) {
  .hz-grid {
    grid-template-columns: 1fr;
  }
}