/* -----------------------------------------------------------------------------
 * File: css/chapters/04.css
 * Purpose: Chapter 04 (Automation Core) — a four-use-case gallery: the AFE
 *          cascade (overview + 3 branch cards), Well Data Master read (D1), Well Data Master
 *          write-back (D2), and Well File System push for Daily Events Viewer. Diagrams use the glyph
 *          kit (assets/glyphs) as node visuals. Scoped classes only, tokens
 *          only — no hardcoded hex/px. See ../../STYLE-GUIDE.md and
 *          ../assets/glyphs/USAGE.md.
 * -------------------------------------------------------------------------- */

/* ---- Use-case overview strip (4 glyph chips, top of chapter) ---- */
.usecase-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-block: var(--sp-8) var(--sp-12);
}

.usecase-overview-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  color: var(--c-text-primary);
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

.usecase-overview-item:hover,
.usecase-overview-item:focus-visible {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  color: var(--c-text-primary);
}

.usecase-overview-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  line-height: 1.35;
}

.usecase-overview-text strong {
  color: var(--c-text-primary);
  font-size: var(--fs-sm);
}

@media (max-width: 1000px) {
  .usecase-overview { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .usecase-overview { grid-template-columns: 1fr; }
}

/* ---- Diagram nodes: glyph + label, sized generously so nothing overlaps
   at 1440px chapter width. .glyph-diagram-node wraps a .node-source /
   .node-transform / .node-destination rect plus an inline glyph <svg> and
   <text> labels, all positioned by hand per-diagram (see index.html). ---- */
.glyph-diagram-node .node-label {
  font-family: var(--font-body);
  font-size: 13px;
  fill: var(--c-text-primary);
}

.glyph-diagram-node .node-label-strong {
  font-weight: 600;
  font-size: 14px;
}

.glyph-diagram-node .node-label-muted {
  fill: var(--c-text-secondary);
  font-size: 11px;
}

.node-danger .node-label-danger {
  fill: var(--c-danger);
}

.node-danger .node-label-muted {
  fill: var(--c-text-secondary);
  font-size: 10.5px;
}

.node-danger rect,
.node-danger {
  fill: rgba(248, 113, 113, 0.08);
  stroke: var(--c-danger);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.diagram-label.fanout-label {
  fill: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-anchor: middle;
}

.fanout-bracket {
  fill: none;
  stroke: var(--c-text-muted);
  stroke-width: 1.5;
}

/* Connectors/labels never intercept pointer events aimed at a node
   (there are no clickable nodes in this chapter's new diagrams, but this
   keeps hover/selection sane on any future interactive addition). */
.uc-overview-svg .diagram-edge,
.uc-overview-svg .fanout-bracket,
.uc-overview-svg .diagram-label {
  pointer-events: none;
}

/* ---- Pill text embedded inside SVG nodes (HTTP 201 / status callouts) ----
   No mono weight ≥ 500: on machines without IBM Plex Mono installed (e.g.
   macOS falling back to Menlo, which ships only regular + bold, no 500/600),
   the browser synthesizes the missing weight by double-striking each glyph
   at a slight offset — that's the literal cause of the "double printing"
   report, not an antialiasing/blur artifact. Weight 400 + the accent-color
   fill (already applied via .pill-in-svg-live/-warning) carries the
   emphasis instead of a bolded weight the font may not actually have.
   +0.5px size to compensate for the lighter weight's lower visual weight.
   Sentence case, no letter-spacing: uppercase+tracked micro-text is a
   "generated slide" tell — the markup already reads correctly in sentence
   case (e.g. "every path reads & writes here"). Reserved uppercase+tracking
   for genuine band labels/eyebrows (.stage-tag, .diagram-panel-title) only. */
.pill-in-svg {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
}

.pill-in-svg-live { fill: var(--c-accent); }
.pill-in-svg-warning { fill: var(--c-warning); }

/* ---- Overview diagram: full chapter width, no horizontal scroll at 1440px.
   viewBox is authored to fit inside the ~1312px usable panel width, so
   width:100% scales it down slightly rather than triggering the panel's
   overflow-x scrollbar. ---- */
.uc-overview-svg {
  width: 100%;
  height: auto;
}

/* ---- Branch card grid (3 sub-diagrams under the AFE cascade overview) ---- */
.branch-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-block: var(--sp-6) var(--sp-12);
}

.branch-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5, var(--sp-4));
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.branch-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.branch-card-head h5 {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-primary);
}

.branch-diagram-panel {
  background: var(--c-depth-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  overflow-x: visible;
}

.branch-diagram-panel svg {
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.branch-card p {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  max-width: none;
}

@media (max-width: 1000px) {
  .branch-card-grid { grid-template-columns: 1fr; }
}

/* ---- Use-case B/C/D stat grids and tables: tighter vertical rhythm than
   the chapter-01 hero stat-grid, reused here between diagram and callout ---- */
.uc-stat-grid {
  margin-block: var(--sp-6) var(--sp-6);
}

.uc-attr-table {
  margin-block: var(--sp-4) var(--sp-6);
}

/* ---- Cost-of-errors callout row (AFE use case) ---- */
.afe-cost-row {
  padding-block: var(--sp-8);
}

.afe-cost-callout {
  border-left-color: var(--c-accent);
}

/* ---- Roadmap tie-in callout at chapter close ---- */
.uc-roadmap-tie {
  margin-top: var(--sp-8);
}

/* ---- Print: every use case fully visible, light palette, no clipped
   diagrams. .diagram-panel/.branch-diagram-panel already break-inside:
   avoid via main.css/print.css conventions on .diagram-panel; reinforce
   for the branch cards specifically since they're a chapter-scoped class. ---- */
@media print {
  .usecase-overview {
    grid-template-columns: repeat(4, 1fr);
  }

  .usecase-overview-item {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }

  .branch-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .branch-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .branch-diagram-panel {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .uc-overview-svg,
  .branch-diagram-panel svg {
    min-width: 0;
  }
}

/* Band labels above diagram groups (used by the Architecture diagram) —
   was undefined, which made SVG text default to black on the dark theme.
   No mono weight ≥ 500 (see .pill-in-svg comment — synthetic-bold double-
   strike on fonts lacking a real 500/600, e.g. macOS Menlo fallback);
   emphasis now carried by letter-spacing + uppercase alone, which is the
   correct register for a genuine band label anyway. */
.stage-tag {
  fill: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
}