/*
  Shared components — rules identical, or common-property subsets,
  across two or more of the three pages. Page-specific sizing (font-size,
  margin, max-width, etc.) is set in each page's own CSS file, which loads
  after this one and overrides just the differing declarations.

  Deliberately NOT unified here: .node (index) vs .netnode (network) vs
  .anode (phoenix). These look like naming variants of one "node" concept
  but are not — .node is an HTML <button> card component, while .netnode
  and .anode are selectors scoped to inline SVG diagrams (.netnode rect,
  .netnode text, etc.). Different markup, different technology. Same
  reasoning applies to .wl-chip (network), which is also SVG-scoped and
  stays in network.css rather than joining the .chip component below.
*/

/* ---- typography ---- */

h1.title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
  /* page CSS sets: font-size, line-height, margin */
}

.dek {
  color: var(--ink-soft);
  /* page CSS sets: font-size, max-width, text-wrap */
}

.closing {
  /* defaults match network/phoenix (identical to each other); index.css overrides */
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-faint);
  max-width: 62ch;
}

/* ---- sub-page header (network, phoenix) ---- */

.top {
  padding: 32px 0 28px;
  border-bottom: 1px solid var(--rule);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.back:hover { color: var(--accent); border-color: var(--accent); }

/* ---- flow steps (index, phoenix) ---- */

.flow {
  display: flex;
  flex-direction: column;
  /* page CSS sets: margin-top; index.css also sets gap: 0 */
}

.flow-step {
  display: grid;
  border-top: 1px solid var(--rule);
  /* page CSS sets: grid-template-columns, gap, padding */
}

.flow-step:first-child { border-top: 1px solid var(--rule); }

.flow-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  padding-top: 2px;
}

.flow-body h3 {
  font-weight: 650;
  /* page CSS sets: font-family (index only), font-size, margin */
}

.flow-body p {
  margin: 0;
  color: var(--ink-soft);
  /* page CSS sets: font-size, max-width */
}

/* ---- chip component (index, phoenix) ---- */
/* Unifies .chip + .stack-chip into one component with a size modifier.
   .wl-chip (network) is NOT part of this — it's an SVG legend selector,
   not an HTML chip. */

.chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--mono-bg);
  color: var(--ink-soft);
  border: 1px solid var(--card-border);
}

.chip--stack {
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 3px;
  border: 1px solid var(--card-border);
  background: var(--bg-elevated);
  color: var(--ink);
}

.stack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* page CSS sets: margin-top */
}

/* ---- theme toggle (all pages, fixed top-right) ---- */

.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 560px) {
  .theme-toggle { top: 10px; right: 10px; font-size: 10px; padding: 4px 8px; }
}