/* ==========================================================================
   goodngrowth, Modules page
   Loaded only by features.html. Shared tokens, motion and shell live in
   site.css. Product illustrations use the shared rounded card and inset well.
   ========================================================================== */

.page-hero {
  background: var(--canvas);
  padding: 9.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
/* Offset left rather than centred, so it does not open the same way as the
   homepage hero or the section below it. */
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: var(--h1-size);
  margin-bottom: 1.25rem;
  max-width: 16ch;
}
.page-hero h1 span { color: var(--accent); font-weight: 400; }
.page-hero > .container > p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 52ch;
}

/* The approval gate. The constraint that governs every module below. */
.gate {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.25rem 0;
}
.gate-inner {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* Not a badge. A mono label with a rule under it, matching the data voice
   used everywhere else. */
.gate-k {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 0.2rem;
  white-space: nowrap;
}
.gate p { color: var(--muted); font-size: 1rem; margin: 0; max-width: 62ch; }
.gate strong { color: var(--text); }

/* ---- Module rows --------------------------------------------------------- */
.module {
  display: grid;
  /* min-width:0 on the tracks alone is not enough once a child sets its own
     width; the container has to be bounded too, or a flipped module pushes
     the document sideways. */
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  padding: 5rem 0;
  border-bottom: 1px solid var(--border);
}
.module:last-of-type { border-bottom: none; }
.module.flip .module-copy { order: 2; min-width: 0; }
.module.flip .module-visual { order: 1; min-width: 0; }

.module-copy h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1rem; }
.module-copy > p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 1.75rem;
  max-width: 52ch;
}

.module-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.module-list h3 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.module-list p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; margin: 0; }
.module-list li { position: relative; padding-left: 1.5rem; }
/* A square tick mark, not a round chip. */
.module-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

/* ---- Visual panels ------------------------------------------------------- */
.fpanel {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.fpanel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.fpanel-head h4 { font-size: 0.9rem; }
.fpanel-tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.fpanel-tag.live  { color: var(--text);  border-color: var(--border-strong); }
.fpanel-tag.watch { color: var(--warn);   border-color: var(--border-strong); }
.fpanel-tag.crit  { color: var(--alert);  border-color: var(--alert-line); }

.logline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 2;
  color: var(--muted);
}
.logline b { color: var(--text); font-weight: 600; }
/* The outcome lines read brighter than the steps above them, the same shape the
   thread panel uses: what happened is quiet, what it came to is not. */
.logline .ok { color: var(--text); }

.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.fstat {
  background: var(--input);
  border: 1px solid var(--border);
  padding: 0.95rem 1rem;
}
.fstat .k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.35rem;
}
.fstat .v {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fstat .v.good { color: var(--text); }
.fstat .v.warn { color: var(--warn); }

.bar-row { margin-bottom: 1rem; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { display: flex; justify-content: space-between; font-size: 0.78rem; margin-bottom: 0.4rem; color: var(--muted); }
.bar-label span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.bar { height: 4px; background: var(--input); overflow: hidden; }
.bar i { display: block; height: 100%; }

.queue-item {
  background: var(--input);
  border: 1px solid var(--border);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.queue-item:last-child { margin-bottom: 0; }
.queue-who { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.queue-who strong { font-size: 0.86rem; font-weight: 600; }
.queue-who span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }
.queue-msg { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

/* ---- Close --------------------------------------------------------------- */
.cta-band {
  background: var(--canvas);
  text-align: center;
  padding: 5.5rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(1.9rem, 3.5vw, 2.75rem); margin: 0 auto 1.15rem; max-width: 20ch; }
.cta-band p { color: var(--muted); font-size: 1.02rem; max-width: 52ch; margin: 0 auto 2.25rem; }
.cta-actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .module { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.25rem 0; }
  .module.flip .module-copy { order: 1; }
  .module.flip .module-visual { order: 2; }
  .page-hero { padding: 7.5rem 0 3.5rem; }
  .gate-inner { gap: 1rem; }
}
@media (max-width: 640px) {
  .cta-actions .btn { width: 100%; }
  .stat-row { grid-template-columns: 1fr; }
}

/* Which of the four surfaces a module belongs to. Two modules can share one
   surface (Roster covers import and the monthly read), so the label repeats
   rather than incrementing per section. Mirrors .eyebrow on the landing page. */
.module-k {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  color: var(--muted);
}
.module-k > i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--border);
  color: var(--muted-dim);
  font-size: 0.62rem;
  line-height: 1;
}

.fpanel.card { padding: var(--space-4); border-color: var(--card-border); }
.fpanel > .card-well { display: block; aspect-ratio: auto; padding: var(--space-4); }
.fpanel-tag { border-radius: var(--r-pill); background: var(--surface); }
.fstat, .queue-item { border: 0; background: var(--surface); border-radius: var(--r-sm); }
.cta-band { margin: var(--space-5); border-radius: var(--r-xl); background: var(--canvas-deep); }
@media(max-width: 600px) { .fpanel.card, .fpanel > .card-well { padding: var(--space-3); } }