/* useacta.net shared base: tokens, chrome, the record line, type scale, buttons, panels, code,
   ruled rows, callouts, and the footer. Every page links this; page-specific rules stay inline. */
:root {
  --bg: #0B0E15;
  --panel: #10151F;
  --panel-2: #151B28;
  --text: #E8EDF5;
  --muted: #9BA7BA;
  --faint: #7A899F;
  --verdi: #2FD6A8;
  --verdi-deep: #06231A;
  --oxide: #D08A45;
  --bad: #E8837B;
  --sky: #7CB8F2;
  --leaf: #93D9AE;
  --code: #D3DCEA;
  --code-inline: #CBD6E5;
  --hair: rgba(232, 237, 245, 0.10);
  --hair-soft: rgba(232, 237, 245, 0.06);
  --verdi-wash: rgba(47, 214, 168, 0.07);
  --verdi-tint: rgba(47, 214, 168, 0.035);
  --sky-wash: rgba(124, 184, 242, 0.10);
  --oxide-wash: rgba(208, 138, 69, 0.08);
  --bad-wash: rgba(232, 131, 123, 0.08);
  --serif: "Fraunces", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --r-panel: 12px;
  --r-card: 6px;
  --r-pill: 999px;
  --label: 0.7rem;
  --section: clamp(3.4rem, 8vh, 5.6rem);
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 4rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(47, 214, 168, 0.3); color: #fff; }
:focus-visible { outline: 2px solid var(--verdi); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; }
img { max-width: 100%; display: block; }
figure { margin: 0; }
code { font-family: var(--mono); font-size: 0.92em; color: var(--code-inline); }
pre { margin: 0; padding: 1.3rem 1.4rem; overflow-x: auto; font-family: var(--mono); font-size: 0.88rem; line-height: 1.7; color: var(--code); tab-size: 4; }
pre code { font-size: inherit; color: inherit; }
.k { color: var(--sky); } .s { color: var(--leaf); } .a { color: var(--verdi); } .c { color: var(--faint); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; top: 0.7rem; left: 0.7rem; z-index: 100;
  padding: 0.55rem 0.9rem; border-radius: var(--r-card); background: var(--verdi); color: var(--verdi-deep);
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600; text-decoration: none;
  transform: translateY(-180%); transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); }

.wrap { max-width: 1560px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 64px); }

/* chrome: the sticky top line, identical on every page */
.chrome {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: 0.6rem clamp(20px, 2.5vw, 40px);
  background: rgba(11, 14, 21, 0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}
.chrome .brand { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--text); text-decoration: none; letter-spacing: 0; text-transform: none; }
.chrome .brand .dot { color: var(--verdi); }
.chrome nav { margin-left: auto; display: flex; gap: 1.6rem; }
.chrome nav a { text-decoration: none; }
.chrome nav a:hover { color: var(--verdi); }
@media (max-width: 700px) {
  .chrome .meta { display: none; }
  .chrome nav { gap: 1rem; }
  .chrome nav .nav-more { display: none; }
}

/* the record line: a ledger stamp that opens every section */
.record {
  display: flex; align-items: center; gap: 1.1rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 1.6rem;
}
.record::after { content: ""; flex: 1; border-top: 1px solid var(--hair); }
.record.centered { justify-content: center; }
.record.centered::before { content: ""; flex: 1; border-top: 1px solid var(--hair); }
.record.centered::before, .record.centered::after { max-width: 12rem; }
.record b { color: var(--verdi); font-weight: 400; }

/* sections and the type scale */
section { padding: var(--section) 0; scroll-margin-top: 4rem; }
.page-head { padding-top: clamp(2.4rem, 6vh, 4rem); }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.06; margin: 0 0 1rem; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); max-width: 26ch; }
h2 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); max-width: 24ch; }
.center { text-align: center; }
.center h2, .center .lede { margin-inline: auto; }
.lede { color: var(--muted); max-width: 66ch; font-size: 1.04rem; margin: 0; }
.lede b { color: var(--text); font-weight: 600; }
.hint { color: var(--muted); font-size: 0.95rem; max-width: 72ch; margin: 1.1rem 0 0; }
.hint a { color: var(--verdi); text-underline-offset: 3px; }

/* buttons: pill, mono, one primary per group */
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.button {
  display: inline-flex; align-items: center; min-height: 2.7rem; padding: 0.6rem 1.3rem;
  border: 1px solid var(--hair); border-radius: var(--r-pill); background: transparent; color: var(--text);
  text-decoration: none; cursor: pointer; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.button.primary { background: var(--verdi); border-color: var(--verdi); color: var(--verdi-deep); font-weight: 500; }
.button.primary:hover { background: #43E4BA; }
.button:not(.primary):hover { border-color: var(--verdi); color: var(--verdi); }
.button:disabled { opacity: 0.35; cursor: default; }
.copy {
  flex: none; min-height: 2.2rem; padding: 0.35rem 0.95rem; border: 1px solid var(--hair); border-radius: var(--r-pill);
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.copy:hover, .copy[data-copied] { border-color: var(--verdi); color: var(--verdi); }

/* go-links: a link at the end of a block has to look like one */
.golink {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.85rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verdi); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid rgba(47, 214, 168, 0.35); padding-bottom: 3px;
  transition: border-color 0.15s ease;
}
.golink::after { content: "→"; transition: transform 0.15s ease; }
.golink:hover { border-bottom-color: var(--verdi); }
.golink:hover::after { transform: translateX(3px); }
.why .golink, .lede .golink, .fold li .golink, .facts .golink { display: flex; width: fit-content; }

/* panels: the one container for code and figures */
.panel { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-panel); overflow: hidden; }
.panel.solo { margin-top: 2.4rem; }
.panel-tab {
  display: flex; align-items: center; gap: 0.7rem; min-height: 2.6rem;
  padding: 0.45rem 1.2rem; border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: var(--label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
}
.panel-tab::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--verdi); opacity: 0.8; }
.panel-tab.output::before { background: var(--oxide); }
.panel-tab .copy { margin-left: auto; }
.pair { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.8rem; margin-top: 2.4rem; align-items: start; }
.pair.lead-right { grid-template-columns: 1fr 1.15fr; }
.pair > * { min-width: 0; }
.pair-note { color: var(--muted); font-size: 0.95rem; margin: 1.1rem 0.2rem 0; }
@media (max-width: 900px) { .pair, .pair.lead-right { grid-template-columns: 1fr; } }

/* the execution model in one ruled band */
.hiw { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem 1.5rem; margin: 0; }
.hiw b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.3rem); white-space: nowrap; }
.hiw i { font-family: var(--mono); font-style: normal; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verdi); white-space: nowrap; }
.hiw i::after { content: " ->"; }
.hiw-note { margin: 1.1rem 0 0; font-family: var(--mono); font-size: 0.78rem; color: var(--faint); max-width: 100ch; }

/* ruled rows: the list form for comparisons and references */
.vs { margin-top: 2.4rem; border-top: 1px solid var(--hair); }
.vs-row { display: grid; grid-template-columns: minmax(15rem, 24rem) 1fr; gap: 1rem 3rem; padding: 1.6rem 0; border-bottom: 1px solid var(--hair); }
.vs-row .who b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.7rem); display: block; line-height: 1.15; }
.vs-row .who span { font-family: var(--mono); font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.vs-row .why { color: var(--muted); font-size: 1.02rem; align-self: center; max-width: 78ch; }
.vs-row .why b { color: var(--text); font-weight: 600; }
@media (max-width: 860px) { .vs-row { grid-template-columns: 1fr; gap: 0.4rem; } }
.ref { margin-top: 2.4rem; }
.ref-group { display: flex; align-items: center; gap: 1.1rem; margin: 2.6rem 0 0.4rem; font-family: var(--serif); font-weight: 500; font-size: 1.45rem; }
.ref-group::after { content: ""; flex: 1; border-top: 1px solid var(--hair); }
.ref-row { display: grid; grid-template-columns: minmax(14rem, 20rem) 1fr; gap: 0.6rem 3rem; padding: 1rem 0; border-bottom: 1px solid var(--hair-soft); scroll-margin-top: 4.5rem; }
.ref-row dt { margin: 0; font-weight: 600; color: var(--text); font-size: 1rem; }
.ref-row dt code { color: var(--verdi); font-size: 0.9em; }
.ref-row dd { margin: 0; color: var(--muted); font-size: 0.97rem; max-width: 88ch; }
.ref-row:target dt { color: var(--verdi); }
@media (max-width: 860px) { .ref-row { grid-template-columns: 1fr; gap: 0.25rem; } }
.changes { margin: 2.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.changes li { color: var(--muted); font-size: 0.98rem; line-height: 1.55; max-width: 88ch; padding-left: 1.1em; position: relative; }
.changes li::before { content: "·"; position: absolute; left: 0; color: var(--verdi); }
.changes li b { color: var(--text); font-weight: 600; }

/* data table: ruled rows, mono numerals, scrolls inside its wrapper on narrow screens */
.table-scroll { overflow-x: auto; margin-top: 1.6rem; }
.data-table { width: 100%; min-width: 40rem; border-collapse: collapse; border-top: 1px solid var(--hair); }
.data-table th, .data-table td { padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--hair-soft); text-align: left; vertical-align: baseline; white-space: nowrap; }
.data-table thead th { font: 400 var(--label) var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding-block: 0.6rem; }
.data-table tbody th { font-weight: 600; color: var(--text); font-size: 0.97rem; }
.data-table tbody th small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--faint); }
.data-table td { font-family: var(--mono); font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.data-table td.lead { color: var(--verdi); font-weight: 500; }
.data-table td small { display: block; font: 0.72rem var(--sans); color: var(--faint); }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }

/* facts: short titled paragraphs on a rule, three across */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 3rem; margin-top: 2.3rem; }
.facts.two { grid-template-columns: 1fr 1fr; }
.facts > div { padding-top: 1rem; border-top: 1px solid var(--hair); color: var(--muted); font-size: 0.95rem; }
.facts b { display: block; margin-bottom: 0.3rem; color: var(--text); font-weight: 600; }
.facts p { margin: 0; }
.facts em { font-style: normal; color: var(--text); }
@media (max-width: 980px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .facts, .facts.two { grid-template-columns: 1fr; } }

/* callout: a note set off by one verdi rule */
.callout { padding: 1rem 0 0 1.3rem; border-left: 2px solid var(--verdi); color: var(--muted); }
.callout b, .callout h3 { display: block; margin: 0 0 0.35rem; }
.callout b { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--verdi); }
.callout h3 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--text); }
.callout p { margin: 0 0 0.7rem; }
.callout p:last-child { margin-bottom: 0; }

/* cross-links at the end of a section */
.also { margin: 2.4rem 0 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.also a { text-decoration: none; }
.also a:hover { color: var(--verdi); }
.also .sep { margin: 0 0.9em; opacity: 0.5; }

footer {
  padding: 2.4rem 0 3rem; color: var(--faint); text-align: center;
  font-family: var(--mono); font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase;
}
footer a { text-decoration: none; }
footer a:hover { color: var(--verdi); }
footer .sep { margin: 0 0.9em; opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip-link, .button, .copy, .golink, .golink::after { transition: none; }
}
@media print {
  :root { --text: #111; --muted: #333; --faint: #555; --panel: #fff; --panel-2: #f4f4f4; --hair: #ccc; --hair-soft: #ddd; --verdi: #0a6b52; --code: #111; --code-inline: #111; }
  html, body { background: #fff; color: #111; }
  .chrome, .skip-link, .copy, footer { display: none; }
  pre { white-space: pre-wrap; }
}