/* Shared styles for the "-how" (how it works) pages.
   Light values on :root, dark values under body.dark-mode (the site's toggle). */
:root {
  --hw-ink: #1f2328;
  --hw-muted: #6b7280;
  --hw-line: #d0d5dc;
  --hw-fig: #fafbfc;
  --hw-card: #ffffff;
  --hw-a: #1565c0;      /* build / offline */
  --hw-a-bg: #e3f2fd;
  --hw-b: #ef6c00;      /* browser / runtime */
  --hw-b-bg: #fff3e0;
  --hw-c: #2e7d32;      /* data / output */
  --hw-c-bg: #e8f5e9;
  --hw-d: #6a1b9a;      /* external services */
  --hw-d-bg: #f3e5f5;
  --hw-bad: #c62828;
  --hw-hl: #f9a825;
  --hw-code-bg: #f3f4f6;
}
body.dark-mode {
  --hw-ink: #e8e8e8;
  --hw-muted: #a0a6ad;
  --hw-line: #4a4f55;
  --hw-fig: #262626;
  --hw-card: #2d2d2d;
  --hw-a: #64b5f6;
  --hw-a-bg: #1a2b3d;
  --hw-b: #ffa04d;
  --hw-b-bg: #3a2a18;
  --hw-c: #66bb6a;
  --hw-c-bg: #1f3322;
  --hw-d: #ce93d8;
  --hw-d-bg: #33213a;
  --hw-bad: #ef5350;
  --hw-hl: #ffd54f;
  --hw-code-bg: #1e1e1e;
}

.hw-fig { background: var(--hw-fig); color: var(--hw-ink); }
.hw-fig svg { display: block; width: 100%; height: auto; }
.hw-fig svg text { font-family: inherit; fill: var(--hw-ink); font-size: 14px; }
.hw-fig figcaption { font-size: 12.5px; color: var(--hw-muted); padding: 6px 12px 10px; }
.hw-pad { padding: 12px; }

/* SVG building blocks */
.hw-boxa { fill: var(--hw-a-bg); stroke: var(--hw-a); stroke-width: 2; }
.hw-boxb { fill: var(--hw-b-bg); stroke: var(--hw-b); stroke-width: 2; }
.hw-boxc { fill: var(--hw-c-bg); stroke: var(--hw-c); stroke-width: 2; }
.hw-boxd { fill: var(--hw-d-bg); stroke: var(--hw-d); stroke-width: 2; }
.hw-boxn { fill: var(--hw-card); stroke: var(--hw-line); stroke-width: 1.5; }
.hw-zone { fill: none; stroke: var(--hw-line); stroke-width: 1.5; stroke-dasharray: 6 5; }
.hw-arrow { stroke: var(--hw-muted); stroke-width: 2; fill: none; marker-end: url(#hwArrow); }
.hw-arrowhead { fill: var(--hw-muted); }
.hw-line { stroke: var(--hw-line); stroke-width: 1.5; fill: none; }
.hw-ink-line { stroke: var(--hw-ink); stroke-width: 1.5; fill: none; }
.hw-fig svg text.hw-ta { fill: var(--hw-a); font-weight: bold; }
.hw-fig svg text.hw-tb { fill: var(--hw-b); font-weight: bold; }
.hw-fig svg text.hw-tc { fill: var(--hw-c); font-weight: bold; }
.hw-fig svg text.hw-td { fill: var(--hw-d); font-weight: bold; }
.hw-fig svg text.hw-small { font-size: 12px; fill: var(--hw-muted); }
.hw-fig svg text.hw-mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; }

/* Inline text */
.hw-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.hw-badge-a { background: var(--hw-a-bg); color: var(--hw-a); border: 1px solid var(--hw-a); }
.hw-badge-b { background: var(--hw-b-bg); color: var(--hw-b); border: 1px solid var(--hw-b); }
.hw-badge-c { background: var(--hw-c-bg); color: var(--hw-c); border: 1px solid var(--hw-c); }
.hw-badge-d { background: var(--hw-d-bg); color: var(--hw-d); border: 1px solid var(--hw-d); }
.hw-mono, .hw-prose code { font-family: Consolas, "Courier New", monospace; font-size: 0.92em; }
.hw-prose code { background: var(--hw-code-bg); padding: 1px 5px; border-radius: 4px; }
.hw-prose { max-width: 72rem; line-height: 1.6; }
.hw-prose p { margin: 0 0 10px; }
.hw-prose ul, .hw-prose ol { margin: 0 0 10px; padding-left: 22px; }
.hw-prose li { margin-bottom: 4px; }
.hw-pre { background: var(--hw-code-bg); color: var(--hw-ink); font-family: Consolas, "Courier New", monospace; font-size: 12.5px;
  padding: 10px 12px; border-radius: 6px; overflow-x: auto; white-space: pre; margin: 0 0 12px; border: 1px solid var(--hw-line); }
.hw-formula { font-family: "Cambria Math", Cambria, Georgia, serif; font-size: 1.05em; background: var(--hw-code-bg);
  border-left: 4px solid var(--hw-a); padding: 8px 12px; border-radius: 4px; margin: 0 0 12px; overflow-x: auto; }
.hw-note { font-size: 12.5px; color: var(--hw-muted); }

/* Tables */
.hw-table { border-collapse: collapse; width: 100%; font-size: 13.5px; margin-bottom: 12px; }
.hw-table th, .hw-table td { border: 1px solid var(--hw-line); padding: 5px 8px; text-align: left; vertical-align: top; }
.hw-table th { background: var(--hw-code-bg); font-weight: 600; }
.hw-table td.hw-num, .hw-table th.hw-num { text-align: right; font-variant-numeric: tabular-nums; }
.hw-scroll { overflow-x: auto; }

/* Table of contents chips */
.hw-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.hw-toc a { display: inline-block; font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--hw-line); border-radius: 14px; text-decoration: none; color: inherit; }
.hw-toc a:hover { background: var(--hw-code-bg); }

/* Numbered priority list */
.hw-steps { counter-reset: hwstep; list-style: none; padding-left: 0 !important; }
.hw-steps li { counter-increment: hwstep; display: flex; gap: 8px; margin-bottom: 8px; }
.hw-steps li::before { content: counter(hwstep); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--hw-a); color: #fff;
  font-size: 12px; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
body.dark-mode .hw-steps li::before { color: #1e1e1e; }

section[id] { scroll-margin-top: 56px; }