/*
Theme Name: Trail Assembly
Theme URI: https://trailassembly.com
Author: Trail Assembly
Description: Publication theme for Trail Assembly — an independent Salesforce community publication. Tabbed topic navigation, a search palette over the REST API, error codes set in mono, and a light/dark palette that the reader controls.
Version: 3.3.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trailassembly
*/

/* ========================================================================
   0. Fonts

   Archivo is self-hosted. The Google Fonts stylesheet it used to come from was
   render-blocking on a third-party origin, and the file behind it needed a
   second handshake to fonts.gstatic.com before a headline could paint. One
   variable file covering 500-800, served from the connection already open.
   ======================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(assets/fonts/archivo-v25-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(assets/fonts/archivo-v25-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ========================================================================
   1. Tokens
   ======================================================================== */

:root {
  --paper:       #ffffff;
  --surface:     #f6f7f9;
  --surface-2:   #eef0f4;
  --ink:         #0f1216;
  --ink-soft:    #454e59;
  --ink-faint:   #6d7683;
  --line:        #e3e6ec;
  --line-strong: #cdd3dc;
  --accent:      #d93a00;
  --accent-ink:  #b02f00;
  --accent-wash: #fff1eb;
  --code-bg:     #f3f4f7;
  --shadow-sm:   0 1px 2px rgba(15, 18, 22, .05);
  --shadow-md:   0 6px 20px -8px rgba(15, 18, 22, .18);
  --shadow-lg:   0 24px 60px -24px rgba(15, 18, 22, .35);

  --c-apex:    #d0400b;
  --c-flow:    #1f5fd0;
  --c-admin:   #0d7a58;
  --c-arch:    #6b3fc4;
  --c-ai:      #b8006e;
  --c-data:    #96650a;
  --c-release: #00636f;
  --c-career:  #6f5300;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wide: 1240px;
  --measure: 39rem;
  --rail: 19rem;
  --r-sm: 3px;
  --r: 5px;
  --r-lg: 6px;
  --header-h: 4.25rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #0b0d11;
    --surface:     #12161d;
    --surface-2:   #1a1f28;
    --ink:         #eef1f5;
    --ink-soft:    #b0b9c5;
    --ink-faint:   #808b99;
    --line:        #222933;
    --line-strong: #333c49;
    --accent:      #ff6a34;
    --accent-ink:  #ff8b5e;
    --accent-wash: #24140d;
    --code-bg:     #11151b;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md:   0 8px 24px -10px rgba(0, 0, 0, .7);
    --shadow-lg:   0 28px 64px -28px rgba(0, 0, 0, .85);

    --c-apex:    #ff7a45;
    --c-flow:    #5b9bff;
    --c-admin:   #2fc493;
    --c-arch:    #ab88ff;
    --c-ai:      #ff5bb0;
    --c-data:    #dfae3b;
    --c-release: #38bccd;
    --c-career:  #cdac41;
  }
}

:root[data-theme="dark"] {
  --paper:       #0b0d11;
  --surface:     #12161d;
  --surface-2:   #1a1f28;
  --ink:         #eef1f5;
  --ink-soft:    #b0b9c5;
  --ink-faint:   #808b99;
  --line:        #222933;
  --line-strong: #333c49;
  --accent:      #ff6a34;
  --accent-ink:  #ff8b5e;
  --accent-wash: #24140d;
  --code-bg:     #11151b;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md:   0 8px 24px -10px rgba(0, 0, 0, .7);
  --shadow-lg:   0 28px 64px -28px rgba(0, 0, 0, .85);

  --c-apex:    #ff7a45;
  --c-flow:    #5b9bff;
  --c-admin:   #2fc493;
  --c-arch:    #ab88ff;
  --c-ai:      #ff5bb0;
  --c-data:    #dfae3b;
  --c-release: #38bccd;
  --c-career:  #cdac41;
}

/* Topic colour, inherited by anything inside a coloured block. */
.cat-apex    { --cat: var(--c-apex); }
.cat-flow    { --cat: var(--c-flow); }
.cat-admin   { --cat: var(--c-admin); }
.cat-arch    { --cat: var(--c-arch); }
.cat-ai      { --cat: var(--c-ai); }
.cat-data    { --cat: var(--c-data); }
.cat-release { --cat: var(--c-release); }
.cat-career  { --cat: var(--c-career); }

/* ========================================================================
   2. Reset and base
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Any component with an explicit display value would otherwise beat the user
   agent's [hidden] rule, which showed the wizard's empty result frame. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.021em;
  line-height: 1.14;
  color: var(--ink);
  font-synthesis: none;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

code, kbd, pre, samp { font-family: var(--mono); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: #fff; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1rem; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; color: var(--paper); }

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 1.5rem; }
.measure { max-width: var(--measure); margin-inline: auto; }

.eyebrow {
  font-family: var(--display);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}

.dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 auto; }

/* ========================================================================
   3. Buttons and chips
   ======================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .875rem; font-weight: 650;
  padding: .68rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--paper); color: var(--ink);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover { border-color: var(--ink); color: var(--ink); }

.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.btn-ghost { background: transparent; }

.btn-block {
  display: flex; width: 100%; margin-top: 1.5rem;
  background: var(--surface); border-color: var(--line);
  font-size: .88rem;
}
.btn-block:hover { background: var(--surface-2); }

.chip {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 700;
  padding: .2rem .5rem;
  border-radius: var(--r-sm);
  background: var(--cat, var(--ink)); color: #fff;
}
.chip:hover { color: #fff; filter: brightness(1.08); }

.code-chip {
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  padding: .34rem .55rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink-soft);
  white-space: nowrap;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.code-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

.chip-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ========================================================================
   4. Header
   ======================================================================== */

.read-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
}

.site-header { position: sticky; top: 0; z-index: 100; }

.header-main {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled .header-main { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.brand:hover { color: inherit; }

/* The mark is inlined into the page rather than loaded as <img>, which is
   what lets these two custom properties repaint it. Light mode keeps the
   brand ink exactly; dark mode lifts the mountains off the page, while the
   trail holds the brand orange in both so the mark stays recognisable. */
.brand-logo { --mark-ink: #12151a; --mark-trail: #f84515; display: flex; flex: 0 0 auto; }
.brand-logo svg { display: block; height: 1.9rem; width: auto; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo { --mark-ink: var(--ink); }
}
:root[data-theme="dark"] .brand-logo { --mark-ink: var(--ink); }

/* A logo set in the customizer replaces the markup above entirely. */
.custom-logo-link { display: flex; flex: 0 0 auto; }
.custom-logo-link img { display: block; height: 1.9rem; width: auto; }
.brand-words { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--display); font-size: 1.04rem; font-weight: 800; letter-spacing: -.035em; }
.brand-mark { color: var(--accent); }

.header-search {
  display: flex; align-items: center; gap: .6rem;
  flex: 1 1 auto; max-width: 30rem; margin-inline: auto;
  font: inherit; font-size: .85rem; color: var(--ink-faint);
  text-align: left;
  padding: .55rem .7rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.header-search:hover { border-color: var(--line-strong); background: var(--surface-2); }
.header-search svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.header-search-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.header-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.theme-toggle {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; grid-area: 1 / 1; }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
}

.nav-toggle {
  display: none;
  width: 2.25rem; height: 2.25rem; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink); cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 3px; justify-items: center; }
.nav-toggle-bars span { display: block; width: 15px; height: 1.5px; background: currentColor; }

/* Topic bar */

.topic-bar { background: var(--ink); }
:root[data-theme="dark"] .topic-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topic-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
}

.topic-bar-inner { overflow-x: auto; scrollbar-width: none; }
.topic-bar-inner::-webkit-scrollbar { display: none; }

.topic-list {
  display: flex; align-items: stretch; gap: 0;
  list-style: none; min-height: 2.9rem;
}
.topic-list a {
  display: inline-flex; align-items: center; gap: .4rem; height: 100%;
  padding: .7rem .85rem;
  font-size: .82rem; font-weight: 650; letter-spacing: .01em;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.topic-list a:hover { color: #fff; border-bottom-color: var(--cat, var(--accent)); background: rgba(255, 255, 255, .06); }
.topic-list .current-cat > a,
.topic-list .current-menu-item > a,
.topic-list .current-menu-parent > a {
  color: #fff;
  border-bottom-color: var(--cat, var(--accent));
  background: rgba(255, 255, 255, .07);
}
.topic-all a { color: rgba(255, 255, 255, .6); }
.topic-all + .topic-all a { border-left: 0; }

/* ========================================================================
   5. Search palette
   ======================================================================== */

.palette {
  position: fixed; inset: 0; z-index: 150;
  display: grid; align-items: start; justify-items: center;
  padding: 8vh 1.25rem 1.25rem;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(3px);
}
.palette[hidden] { display: none; }
.palette-open, .palette-open body { overflow: hidden; }

.palette-panel {
  width: 100%; max-width: 40rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.palette-form {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
}
.palette-form svg { width: 1.15rem; height: 1.15rem; color: var(--ink-faint); flex: 0 0 auto; }

.palette-input {
  flex: 1 1 auto;
  font: inherit; font-size: 1.02rem;
  background: transparent; border: 0; color: var(--ink);
  padding: .2rem 0;
}
.palette-input::placeholder { color: var(--ink-faint); }
.palette-input:focus { outline: none; }

.palette-close {
  font-family: var(--mono); font-size: .7rem;
  padding: .25rem .45rem;
  background: var(--surface); color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 5px;
  cursor: pointer;
}

.palette-results { max-height: min(26rem, 50vh); overflow-y: auto; }
.palette-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.palette-row:last-child { border-bottom: 0; }
.palette-row.is-active, .palette-row:hover { background: var(--surface); color: var(--ink); }
.palette-row.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.palette-row-title { font-weight: 600; }
.palette-row-kind {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); flex: 0 0 auto;
}
.palette-hint {
  padding: .6rem 1rem;
  font-size: .76rem; color: var(--ink-faint);
  border-top: 1px solid var(--line);
  background: var(--surface);
  min-height: 2.2rem;
}

.palette-suggest { padding: .9rem 1rem; border-top: 1px solid var(--line); }
.palette-suggest[hidden] { display: none; }
.palette-suggest-label {
  font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .6rem;
}

/* ========================================================================
   6. Masthead
   ======================================================================== */

/* A plain band: what the site is, and the search box most visitors came for.
   The grid texture, the corner glow and the three feature cards beside the
   headline went on 6 Oct 2026, because together they are the stock landing
   page that every generated site ships with. */
.masthead { border-bottom: 1px solid var(--line); }

.masthead-inner { padding-block: 2.25rem 2rem; }

.masthead h1 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -.02em;
}
.masthead-sub {
  margin-top: .75rem; max-width: 62ch;
  font-size: 1.02rem; color: var(--ink-soft);
}
.masthead-search { margin-top: 1.25rem; max-width: 34rem; }

/* ========================================================================
   7. Layout
   ======================================================================== */

.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: 3rem; align-items: start;
  padding-block: 2.75rem 4rem;
}
.layout-main { min-width: 0; }
.layout-rail { position: sticky; top: calc(var(--header-h) + 3.6rem); display: grid; gap: 1.5rem; }

.panel-group + .panel-group, .panel-group + .subscribe, .subscribe + .panel-group { margin-top: 3.25rem; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--ink);
}
.section-head h2 { font-size: 1.25rem; letter-spacing: -.01em; }
.section-head a { font-size: .88rem; font-weight: 650; color: var(--accent); }

/* Tabs */

.tabset {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.tabset-link {
  font-size: .88rem; font-weight: 650; white-space: nowrap;
  color: var(--ink-faint); padding-bottom: .6rem;
}
.tabset-link:hover { color: var(--accent); }

.tablist { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  font: inherit; font-size: .88rem; font-weight: 650;
  padding: .55rem .8rem .7rem;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-faint); cursor: pointer; white-space: nowrap;
  transition: color .16s ease, border-color .16s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--cat, var(--accent)); }

.tablist-pills { gap: .45rem; border-bottom: 0; margin-bottom: 1.6rem; }
.tablist-pills .tab {
  padding: .45rem .85rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper);
}
.tablist-pills .tab.is-active {
  background: var(--cat, var(--accent)); border-color: var(--cat, var(--accent)); color: #fff;
}

.panel[hidden] { display: none; }
.panel-note {
  margin-bottom: 1.5rem; max-width: 62ch;
  font-size: .95rem; color: var(--ink-soft);
}

/* ========================================================================
   8. Cards, lead, rows
   ======================================================================== */

.grid { display: grid; gap: 1.75rem 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem; align-items: center;
  padding-bottom: 2rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.lead-text { display: grid; gap: .9rem; justify-items: start; }
.lead-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.lead-title a:hover { color: var(--cat, var(--accent)); }
.lead-excerpt { color: var(--ink-soft); font-size: 1rem; }
.lead-media { overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); }
.lead-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.card { display: grid; gap: .85rem; align-content: start; min-width: 0; }

.card-media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .2s ease;
}
.card:hover .card-media { border-color: var(--cat, var(--line-strong)); }
/* The topic colour arrives on hover as a rule under the image, so the grid
   stays calm at rest and still tells you what you are pointing at. */
.card-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--cat, var(--accent));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .25s ease;
}
.card:hover .card-media::after { transform: scaleX(1); }
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.card-body { display: grid; gap: .5rem; }
.card-title { font-size: 1.05rem; line-height: 1.28; }
.card-wide .card-title, .card-2 .card-title { font-size: 1.2rem; }
.card-title a:hover { color: var(--cat, var(--accent)); }
.card-excerpt {
  font-size: .92rem; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  font-size: .76rem; color: var(--ink-faint);
}
.card-author { font-weight: 650; color: var(--ink-soft); }
.card-meta .row-cat { font-weight: 700; color: var(--cat, var(--ink-soft)); }

.card-compact { grid-template-columns: 7rem minmax(0, 1fr); gap: .9rem; align-items: start; }

/* Rows */

.row-list { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--line); }
.row-list-split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.row-list-numbered { margin-top: 0; }

.row-item {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center;
  padding: 1rem .5rem 1rem 0;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 0 0 0 var(--cat, var(--accent));
  transition: box-shadow .18s ease, padding-left .18s ease;
}
.row-item:hover {
  box-shadow: inset 3px 0 0 0 var(--cat, var(--accent));
  padding-left: .7rem;
}
.row-item-bare { grid-template-columns: minmax(0, 1fr); }
.row-list-numbered .row-item { grid-template-columns: 2.25rem minmax(0, 1fr); }

.row-index {
  font-family: var(--mono); font-size: 1rem; font-weight: 600;
  color: var(--ink-faint);
}
.row-media { overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line); }
.row-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.row-body { display: grid; gap: .35rem; min-width: 0; }
.row-title { font-size: .98rem; line-height: 1.3; font-weight: 700; }
.row-title a:hover { color: var(--cat, var(--accent)); }
.row-cat { font-weight: 700; color: var(--cat, var(--ink-soft)); }

/* Error-code list */

.code-list {
  list-style: none; display: grid; gap: 0 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .code-list { grid-template-columns: minmax(0, 1fr); } }
.code-list li { border-bottom: 1px solid var(--line); }
/* Code above its description, not beside it: at two columns a 37-character
   code like CANNOT_INSERT_UPDATE_ACTIVATE_ENTITY ran straight into the next
   column's text. */
.code-list a {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem;
  padding: .7rem .5rem .7rem .25rem;
}
.code-list a:hover { background: var(--surface); }
.code-list code {
  font-size: .78rem; font-weight: 600; color: var(--accent);
  overflow-wrap: anywhere;
}
.code-list span { font-size: .88rem; line-height: 1.35; color: var(--ink-soft); }

.code-index { list-style: none; display: grid; gap: .1rem; }
.code-index a {
  display: grid; gap: .1rem;
  padding: .5rem .35rem;
  border-radius: var(--r-sm);
}
.code-index a:hover { background: var(--surface); }
.code-index code {
  font-size: .78rem; font-weight: 600; line-height: 1.35;
  color: var(--ink);
}
.code-index a:hover code { color: var(--accent); }
.code-index span {
  font-family: var(--mono); font-size: .66rem;
  color: var(--ink-faint);
}

/* Title with an error code in it */

.t-code { font-size: .92em; font-weight: 700; letter-spacing: -.01em; }
.card-title .t-code, .row-title .t-code, .lead-title .t-code { color: var(--cat, var(--ink)); }
.t-rest { display: block; margin-top: .2rem; font-weight: 650; color: var(--ink-soft); font-size: .95em; }
.index-list .t-rest, .rail-list .t-rest, .palette-row .t-rest { display: inline; margin-left: .35rem; }

/* ========================================================================
   9. Subscribe
   ======================================================================== */

.subscribe {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 1.75rem; align-items: center;
  padding: 1.5rem 1.6rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--r-sm);
}
:root[data-theme="dark"] .subscribe { background: var(--surface); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .subscribe { background: var(--surface); border: 1px solid var(--line); }
}
.subscribe h2 { color: inherit; font-size: 1.35rem; }
.subscribe p { margin-top: .5rem; font-size: .92rem; color: var(--ink-soft); }
.subscribe-form { display: flex; gap: .5rem; }
.subscribe-form input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: .92rem;
  padding: .68rem .8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
}
.subscribe-form input::placeholder { color: var(--ink-faint); }
.subscribe-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ========================================================================
   10. Right rail
   ======================================================================== */

.rail-block { padding-top: .9rem; border-top: 2px solid var(--ink); }
.rail-title { font-size: 1.02rem; margin-bottom: .75rem; }
.rail-note { font-size: .84rem; color: var(--ink-soft); margin-bottom: .9rem; }

.rail-list { list-style: none; counter-reset: rail; display: grid; gap: .85rem; }
.rail-list li {
  counter-increment: rail;
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .6rem;
  font-size: .9rem; line-height: 1.35;
}
.rail-list li::before {
  content: counter(rail);
  font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--accent);
}
.rail-list a { font-weight: 650; }
.rail-meta { grid-column: 2; font-size: .74rem; color: var(--ink-faint); }

.rail-note-block p { font-size: .88rem; color: var(--ink-soft); }
.rail-link {
  display: inline-block; margin-top: .8rem;
  font-size: .88rem; font-weight: 650;
  color: var(--accent);
}

/* ========================================================================
   11. Page heads, archives, pagination
   ======================================================================== */

.page-head {
  position: relative;
  padding-block: 2.5rem 2.25rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.page-head > .wrap { position: relative; }
.page-head::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--cat, var(--accent));
  opacity: .9;
}
.page-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: .3rem; }
.page-head-sub { margin-top: .9rem; max-width: 60ch; font-size: 1rem; color: var(--ink-soft); }
.page-head-form { margin-top: 1.4rem; max-width: 28rem; }
.page-head .breadcrumbs { margin-bottom: .6rem; }
.page-head.cat-apex h1, .page-head.cat-flow h1, .page-head.cat-admin h1,
.page-head.cat-arch h1, .page-head.cat-ai h1, .page-head.cat-data h1,
.page-head.cat-release h1, .page-head.cat-career h1 { color: var(--cat); }

.search-form { display: flex; gap: .5rem; }
.search-form input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: .95rem;
  padding: .65rem .8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
}

.breadcrumbs {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  font-size: .82rem; font-weight: 500;
  color: var(--ink-faint);
  padding-top: 1.5rem;
}
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .separator { opacity: .5; }

.pagination {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  margin-top: 3rem;
}
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 2.4rem; height: 2.4rem; padding-inline: .6rem;
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: .88rem; font-weight: 650;
  background: var(--paper);
}
.pagination .page-numbers:hover { border-color: var(--ink); transform: translateY(-1px); }
.pagination .current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.empty-state {
  padding: 3rem 0; max-width: 46ch;
  color: var(--ink-soft);
  display: grid; gap: 1.25rem;
}

/* ========================================================================
   12. Article
   ======================================================================== */

.article-header { padding-block: 1.75rem 2rem; }
.article-header .opener-text::before,
.article-header > .measure::before {
  content: ""; display: block;
  width: 3.5rem; height: 4px;
  background: var(--cat, var(--accent));
  margin-bottom: 1.3rem;
}
.article-header .chip { margin-bottom: 1.1rem; }
.article-header h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -.032em;
}
.article-header h1 .t-code { display: block; font-size: .82em; color: var(--cat, var(--ink)); }
.article-header h1 .t-rest { display: block; margin-top: .5rem; font-size: .88em; }

.article-standfirst {
  margin-top: 1.1rem;
  font-size: 1.16rem; line-height: 1.55; color: var(--ink-soft);
}

.byline {
  display: flex; align-items: center; gap: .8rem;
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.byline-avatar { width: 40px; height: 40px; border-radius: 50%; }
.byline-text { display: grid; gap: .15rem; }
.byline-names { font-size: .92rem; font-weight: 700; }
.byline-meta {
  display: flex; align-items: center; gap: .45rem;
  font-size: .78rem; color: var(--ink-faint);
}

.hero-media {
  margin: 0 0 2.5rem;
  max-width: calc(var(--measure) + 7rem);
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.hero-media img { width: 100%; max-height: 26rem; object-fit: cover; }

.article-layout {
  display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  gap: 2.75rem; align-items: start;
  justify-content: start;
  padding-bottom: 3rem;
}
.article-body { min-width: 0; width: 100%; max-width: min(var(--measure), 100%); margin-inline: 0; }

/* The article opener: headline column, hero beside it.
   Left-aligning the page left the entire right half empty above the fold. The
   front page already pairs a headline with an image this way, so the article
   opener now does the same — and the hero gets to be an image rather than a
   band. Below 1080px it stacks, text first. */

.article-opener {
  display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  gap: 2.75rem; align-items: center;
}
.article-opener .opener-text { min-width: 0; max-width: var(--measure); }
.article-opener .hero-media { margin: 0; max-width: none; }
.article-opener .hero-media img { max-height: 24rem; }

@media (max-width: 1080px) {
  .article-opener { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .article-opener .hero-media { max-width: calc(var(--measure) + 7rem); }
}

/* One left edge for the whole article.
   The header and the comment form inherit .measure, which centres them, while
   the reading column sat at the left of the grid — so the page read as two
   layouts stacked on each other.
   Zeroing the margin was the wrong fix: it aligned them to the viewport rather
   than to the wrap, putting the headline left of its own breadcrumb. Instead the
   container keeps the wrap's centring and the content inside it is what gets
   constrained, so header, hero, body and comments share the wrap's left edge.
   Pages had the same split — breadcrumb at the wrap edge, title and body
   centred — so the rule covers them too and the whole site shares one edge. */
.article-header > .measure,
.article-comments,
.article > .wrap.measure { max-width: var(--wide); }
.article-header > .measure > *,
.article-comments > *,
.article > .wrap.measure > * { max-width: var(--measure); }
.article-rail { position: sticky; top: calc(var(--header-h) + 2.5rem); min-width: 0; }
.article-rail[hidden] { display: none; }

.toc { padding-left: 0; border-left: 0; }
.toc-list li { padding-left: .75rem; border-left: 2px solid var(--line); transition: border-color .15s ease; }
.toc-list li.is-current { border-left-color: var(--cat, var(--accent)); }
.toc-title {
  font-size: .9rem; font-weight: 700;
  color: var(--ink); margin-bottom: .8rem;
}
.toc-list { list-style: none; display: grid; gap: .55rem; counter-reset: toc; }
.toc-list li { font-size: .84rem; line-height: 1.35; }
.toc-list a { color: var(--ink-faint); }
.toc-list a:hover { color: var(--ink); }
.toc-list li.is-current a { color: var(--accent); font-weight: 700; }

.tested-badge {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .9rem 1.1rem; margin-bottom: 2rem;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r);
  font-size: .88rem; color: var(--ink-soft);
}
.tested-badge > span:first-child { color: var(--accent); font-weight: 800; }
.tested-badge strong { color: var(--ink); }

/* The absence of a tested badge is itself a claim, so it gets stated rather
   than left blank. Neutral rather than alarming: an article written from the
   documentation is still worth reading, it is just not the same claim. */
.tested-badge-none {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-color: var(--line);
}
.tested-badge-none > span:first-child { color: var(--ink-soft); }

/* <picture> wraps every uploaded image for the WebP source. display:contents
   keeps the img itself as the flex/grid item, so no existing layout rule has to
   know the wrapper is there. */
picture { display: contents; }

/* Article body typography */

.entry-content { font-size: 1.08rem; line-height: 1.72; color: var(--ink); }
.entry-content > * + * { margin-top: 1.35rem; }
.entry-content p { color: var(--ink-soft); }
.entry-content strong { color: var(--ink); font-weight: 700; }

.entry-content h2 {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 1.55rem;
}
.entry-content h3 { margin-top: 2.25rem; font-size: 1.2rem; }
.entry-content h4 { margin-top: 1.75rem; font-size: 1.02rem; }

.entry-content a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.entry-content a:hover { text-decoration-thickness: 2px; }

.entry-content ul, .entry-content ol { padding-left: 1.35rem; color: var(--ink-soft); }
.entry-content li + li { margin-top: .5rem; }
.entry-content li::marker { color: var(--ink-faint); }

.entry-content blockquote {
  margin: 2rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--accent);
  font-size: 1.1rem; color: var(--ink);
}

.entry-content figure { margin: 2rem 0; }
.entry-content img { border-radius: var(--r); border: 1px solid var(--line); }
.entry-content figcaption { margin-top: .6rem; font-size: .82rem; color: var(--ink-faint); }

.entry-content table {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  display: block; overflow-x: auto;
}
.entry-content th, .entry-content td {
  padding: .7rem .8rem; text-align: left;
  border-bottom: 1px solid var(--line);
}
.entry-content th {
  font-size: .88rem; font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--line-strong);
}

.entry-content :not(pre) > code {
  font-size: .88em;
  padding: .12em .35em;
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 5px;
  color: var(--accent-ink);
}
:root[data-theme="dark"] .entry-content :not(pre) > code { color: var(--accent); }

.entry-content pre {
  position: relative;
  max-width: 100%;
  margin: 2rem 0; padding: 1.1rem 1.15rem;
  background: var(--code-bg);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow-x: auto;
  font-size: .86rem; line-height: 1.6;
  tab-size: 2;
}
.entry-content pre code { background: none; border: 0; padding: 0; color: var(--ink); }

.code-copy {
  position: absolute; top: .55rem; right: .55rem;
  font: inherit; font-size: .7rem; font-weight: 650;
  padding: .25rem .5rem;
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 5px;
  cursor: pointer; opacity: 0;
  transition: opacity .16s ease;
}
.entry-content pre:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
@media (hover: none) { .code-copy { opacity: 1; } }

/* Plugin table of contents inside the body.
   Redundant next to the sticky rail, so it only appears at the widths where the
   rail is hidden. */

@media (min-width: 1181px) {
  .single-post #ez-toc-container { display: none; }
}


#ez-toc-container {
  max-width: 100% !important;
  box-sizing: border-box;
  padding: 1.1rem 1.25rem !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  font-size: .92rem;
}
#ez-toc-container a { color: var(--ink-soft) !important; text-decoration: none !important; }
#ez-toc-container a:hover { color: var(--accent) !important; }
#ez-toc-container .ez-toc-title {
  font-size: .74rem !important; font-weight: 750 !important;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint) !important;
}

/* Screenshots. Bordered and captioned so they read as evidence rather than
   decoration, and never full-bleed: a cropped UI shot at column width is more
   readable than a wide one. */

.screenshot { margin: 2.25rem 0; }
.screenshot .screenshot-img {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.screenshot figcaption {
  margin-top: .6rem;
  font-size: .82rem; color: var(--ink-faint);
  padding-left: .1rem;
  border-left: 0;
}

/* Diagrams.
   The SVGs carry no colours of their own; everything resolves here, so a
   diagram follows the reader's theme. */

.diagram { margin: 2.5rem 0; }
.diagram-frame {
  padding: 1.5rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow-x: auto;
}
.diagram figcaption { margin-top: .7rem; font-size: .82rem; color: var(--ink-faint); }

.ta-diagram { width: 100%; min-width: 26rem; height: auto; overflow: visible; }

.ta-diagram .d-box { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1; }
.ta-diagram .d-panel { fill: color-mix(in srgb, var(--paper) 65%, transparent); stroke: var(--line-strong); stroke-width: 1; }
.ta-diagram .d-bad { stroke: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
.ta-diagram .d-good { stroke: color-mix(in srgb, var(--c-admin) 55%, var(--line-strong)); }
.ta-diagram .d-mark { stroke: var(--ink-soft); }

.ta-diagram .d-label { font: 650 13px var(--sans); fill: var(--ink); }
.ta-diagram .d-head { font: 750 13px var(--sans); fill: var(--ink); letter-spacing: .01em; }
.ta-diagram .d-sub { font: 500 11.5px var(--sans); fill: var(--ink-faint); }
.ta-diagram .d-mono { font: 500 11.5px var(--mono); fill: var(--ink-soft); }
.ta-diagram .d-mono-lg { font: 600 15px var(--mono); fill: var(--ink); }
.ta-diagram .d-num { font: 600 11px var(--mono); fill: var(--ink-faint); }
.ta-diagram .d-verdict { font: 500 11.5px var(--sans); fill: var(--ink-soft); font-style: italic; }

.ta-diagram .d-arrow { stroke: var(--line-strong); stroke-width: 1.4; fill: none; }
.ta-diagram .d-arrow-head { fill: var(--line-strong); stroke: none; }
.ta-diagram .d-accent { stroke: var(--accent); }
.ta-diagram .d-accent-fill { fill: var(--accent); }
.ta-diagram .d-dot { fill: var(--ink-faint); }

.ta-diagram .d-track { fill: var(--surface-2); }
.ta-diagram .d-bar-a { fill: var(--ink-soft); }
.ta-diagram .d-bar-b { fill: var(--accent); }

/* Section anchors: a reader who wants to send someone a specific section
   should not have to hunt for the link. */

.entry-content h2, .entry-content h3 { position: relative; }
.head-anchor {
  position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .9rem; font-weight: 500;
  color: var(--ink-faint); opacity: 0;
  text-decoration: none;
  transition: opacity .15s ease, color .15s ease;
}
.entry-content h2:hover .head-anchor,
.entry-content h3:hover .head-anchor,
.head-anchor:focus-visible { opacity: 1; }
.head-anchor:hover { color: var(--accent); }
@media (max-width: 860px) { .head-anchor { display: none; } }

/* Checklists that remember where you were. The state is per browser, which is
   the right scope: a runbook is followed by one person at a time. */

.entry-content ul.checklist,
.entry-content ol.checklist { list-style: none; padding-left: 0; counter-reset: none; }
.entry-content ul.checklist li,
.entry-content ol.checklist li {
  /* The checkbox is positioned rather than laid out as a grid or flex child:
     as a child it made the item's text nodes into separate items, which broke
     the prose into one word per line. */
  position: relative;
  padding: .65rem .8rem .65rem 2.35rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.entry-content ul.checklist li + li,
.entry-content ol.checklist li + li { margin-top: .5rem; }
.entry-content ul.checklist li.is-done,
.entry-content ol.checklist li.is-done {
  background: var(--surface); border-color: var(--line);
  opacity: .62;
}
.entry-content ul.checklist li.is-done,
.entry-content ol.checklist li.is-done { text-decoration: line-through; text-decoration-thickness: 1px; }
.entry-content ul.checklist li.is-done .checklist-box,
.entry-content ol.checklist li.is-done .checklist-box { text-decoration: none; }
.checklist-box {
  position: absolute; left: .8rem; top: .95rem;
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--accent); cursor: pointer;
}

.checklist-bar {
  display: flex; align-items: center; gap: .8rem;
  margin-top: .75rem;
}
.checklist-status { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); }
.checklist-reset {
  font: inherit; font-size: .74rem; font-weight: 650;
  padding: .2rem .5rem;
  background: none; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.checklist-reset:hover { color: var(--accent); border-color: var(--accent); }

/* Interactive blocks: the calculator and the decision wizard. */

.widget {
  margin: 2.75rem 0;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}
.widget-title {
  font-size: 1.15rem !important;
  margin: 0 0 .5rem !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.widget-note { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.25rem; }

.widget-controls { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.widget-field { display: grid; gap: .35rem; }
.widget-field > span {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint);
}
.widget-field input, .widget-field select {
  font: inherit; font-size: .95rem;
  padding: .55rem .65rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
}
.widget-field:last-child { grid-column: 1 / -1; }

.widget-result {
  display: grid; gap: .6rem;
  margin-top: 1.25rem; padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--r);
  font-size: .95rem;
}
.widget-result strong { font-family: var(--display); font-size: 1.02rem; }
.widget-result.is-good { border-left-color: var(--c-admin); }
.widget-result.is-bad { border-left-color: var(--accent); }
.widget-figures { display: grid; gap: .35rem; font-size: .88rem; color: var(--ink-soft); }
.widget-figures b { color: var(--ink); font-variant-numeric: tabular-nums; }

.wizard-question { font-size: 1.02rem; font-weight: 650; margin-bottom: .9rem; }
.wizard-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.wizard-options .btn { font-size: .88rem; }
.wizard-result {
  display: grid; gap: .5rem;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line); border-left-width: 4px; border-left-color: var(--ink-faint);
  border-radius: var(--r);
  font-size: .95rem; color: var(--ink-soft);
}
.wizard-result strong { font-family: var(--display); font-size: 1.08rem; color: var(--ink); }
.wizard-result.is-good { border-left-color: var(--c-admin); }
.wizard-result.is-bad { border-left-color: var(--accent); }
.wizard-reset {
  margin-top: .9rem;
  font: inherit; font-size: .78rem; font-weight: 650;
  padding: .3rem .6rem;
  background: none; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.wizard-reset:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 620px) {
  .widget-controls { grid-template-columns: minmax(0, 1fr); }
}

/* A dated "checked on" notice, for articles that go stale on a schedule. */

.entry-content .checked-note {
  padding: .7rem .9rem;
  background: var(--surface-2);
  border-left: 3px solid var(--ink-faint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .88rem; color: var(--ink-soft);
}

/* End matter */

.article-end { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 1rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-row a {
  font-size: .76rem; font-weight: 650;
  padding: .3rem .6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft);
}
.tag-row a:hover { border-color: var(--accent); color: var(--accent); }
.photo-credit { font-size: .74rem; color: var(--ink-faint); }
.photo-credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); }

.author-box {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-top: 2.5rem; padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.author-box img { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.author-box h2 { font-size: 1rem; }
.author-box p { margin-top: .35rem; font-size: .9rem; color: var(--ink-soft); }

/* Move through a topic in reading order. */

.post-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.post-nav-inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  padding: 0;
}
.post-nav-link {
  display: grid; gap: .4rem; align-content: center;
  padding: 1.5rem;
  background: var(--surface);
  transition: background .18s ease;
}
.post-nav-link:hover { background: var(--paper); color: var(--ink); }
.post-nav-next { text-align: right; }
.post-nav-label {
  font-size: .82rem; font-weight: 650;
  color: var(--cat, var(--accent));
}
.post-nav-title {
  font-family: var(--display);
  font-size: 1.02rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em;
}
.post-nav-title .t-code { font-family: var(--mono); font-size: .9em; }
.post-nav-title .t-rest { display: inline; margin-left: .35rem; font-weight: 600; }

.related { padding-block: 3rem; border-top: 1px solid var(--line); }
.article-comments { padding-bottom: 4rem; border-top: 1px solid var(--line); padding-top: 2.5rem; }

/* Comments */

.comment-list { list-style: none; display: grid; gap: 1.5rem; }
.comment-body { padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.comment-author { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 700; }
.comment-author img { border-radius: 50%; }
.comment-metadata { margin-top: .2rem; font-size: .76rem; color: var(--ink-faint); }
.comment-content { margin-top: .7rem; font-size: .95rem; color: var(--ink-soft); }
.comment-respond { margin-top: 2.5rem; }
.comment-reply-title { font-size: 1.2rem; font-weight: 800; }
.comment-form { display: grid; gap: .9rem; margin-top: 1rem; }
.comment-form label { display: block; font-size: .8rem; font-weight: 650; color: var(--ink-soft); margin-bottom: .3rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .6rem .75rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
}
.comment-form textarea { min-height: 8rem; resize: vertical; }
.comment-form .submit {
  justify-self: start;
  font: inherit; font-size: .875rem; font-weight: 650;
  padding: .68rem 1.15rem;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: var(--r);
  cursor: pointer;
}

/* ========================================================================
   13. All-articles index
   ======================================================================== */

.index-filter { margin-top: 1.5rem; max-width: 30rem; }
.index-filter input {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .7rem .85rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
}
.index-count { margin-top: .5rem; font-family: var(--mono); font-size: .76rem; color: var(--ink-faint); }

.index-intro { margin-bottom: 2.5rem; }

.index-groups { display: grid; gap: 2.5rem; padding-bottom: 4rem; }
.index-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .6rem; margin-bottom: .5rem;
  border-bottom: 2px solid var(--cat, var(--ink));
}
.index-group-head h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.index-group-count { font-family: var(--mono); font-size: .8rem; color: var(--ink-faint); }

.index-list { list-style: none; columns: 2; column-gap: 2.5rem; }
.index-list li {
  break-inside: avoid;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.index-list a { font-weight: 600; }
.index-list a:hover { color: var(--cat, var(--accent)); }
.index-meta { font-family: var(--mono); font-size: .74rem; color: var(--ink-faint); flex: 0 0 auto; }

/* ========================================================================
   14. About page
   ======================================================================== */

.about-masthead .breadcrumbs { padding-top: 1.5rem; margin-bottom: 0; }
.about-masthead-inner { padding-block: 1rem 2rem; }

.about-layout { padding-block: 3rem 4rem; }
/* The rail leaves the main column wider than anything anyone wants to read a
   paragraph across, so the body keeps the article measure and the whitespace. */
.about-layout .entry-content { max-width: 44rem; }
.about-masthead .masthead-sub { max-width: 46ch; }

/* Rail */

.about-topics { list-style: none; display: grid; gap: .1rem; }
.about-topics li {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .5rem .55rem;
  border-radius: var(--r-sm);
  font-size: .9rem;
  border-left: 2px solid var(--cat, var(--line-strong));
}
.about-topics li:hover { background: var(--surface); }
.about-topics a { font-weight: 650; }
.about-topics a:hover { color: var(--cat, var(--accent)); }

.about-badge-sample { margin-bottom: .9rem; font-size: .82rem; }
.about-badge-note { margin-bottom: 0; }

/* The two content lists the page body supplies its own classes for. */

.entry-content ul.standards { list-style: none; padding-left: 0; display: grid; gap: .75rem; }
.entry-content ul.standards li {
  margin-top: 0;
  padding: .95rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  font-size: .98rem; line-height: 1.6;
}
.entry-content ul.standards li strong { display: block; margin-bottom: .2rem; }

.entry-content ol.about-steps { list-style: none; padding-left: 0; counter-reset: step; }
/* The number is positioned rather than gridded: a grid li would split the
   bold lead-in and the sentence after it into two separate cells. */
.entry-content ol.about-steps li {
  counter-increment: step;
  position: relative;
  margin-top: 0;
  padding: 1.05rem 0 1.05rem 2.9rem;
  border-top: 1px solid var(--line);
  font-size: .98rem; line-height: 1.62;
}
.entry-content ol.about-steps li:last-child { border-bottom: 1px solid var(--line); }
.entry-content ol.about-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1.2rem;
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  color: var(--accent);
}
.entry-content ol.about-steps li strong { display: block; margin-bottom: .2rem; }


/* ========================================================================
   15. Footer
   ======================================================================== */

.site-footer {
  margin-top: auto;
  padding-block: 3rem 2rem;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
}
.footer-brand p { margin-top: 1rem; max-width: 44ch; font-size: .92rem; color: var(--ink-soft); }
.footer-col h2 {
  font-size: .95rem; font-weight: 700;
  color: var(--ink); margin-bottom: .9rem;
}
.footer-col ul { list-style: none; display: grid; gap: .55rem; }
.footer-col li { font-size: .92rem; }

.disclaimer {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .74rem; line-height: 1.6; color: var(--ink-faint);
}

/* ========================================================================
   16. Prism tokens
   ======================================================================== */

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--ink-faint); font-style: italic; }
.token.punctuation { color: var(--ink-soft); }
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: var(--c-ai); }
.token.boolean, .token.number { color: var(--c-arch); }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--c-admin); }
.token.operator, .token.entity, .token.url { color: var(--ink-soft); }
.token.atrule, .token.attr-value, .token.keyword { color: var(--c-flow); }
.token.function, .token.class-name { color: var(--accent); }
.token.regex, .token.important, .token.variable { color: var(--c-data); }

/* ========================================================================
   17. Responsive
   ======================================================================== */

@media (max-width: 1180px) {
  /* justify-items: center would let an item with a wide min-content bleed off
     both edges; stretch plus auto margins keeps the overflow contained. */
  .article-layout { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .article-rail { display: none; }
}

@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .layout-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-layout { padding-block: 2.5rem 3.5rem; }
}

@media (max-width: 900px) {
  .header-search-label { display: none; }
  .header-search { flex: 0 0 auto; max-width: none; margin-left: auto; margin-right: 0; }
  .header-cta { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .topic-bar { display: none; border-bottom: 1px solid var(--line); }
  .topic-bar.is-open { display: block; }
  .topic-list { flex-direction: column; padding-block: .5rem; }
  .topic-list a { padding: .7rem 0; border-bottom: 0; }
  .lead { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .lead-media { order: -1; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-list-split { grid-template-columns: minmax(0, 1fr); }
  .subscribe { grid-template-columns: minmax(0, 1fr); }
  .post-nav-inner { grid-template-columns: minmax(0, 1fr); }
  .post-nav-next { text-align: left; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .index-list { columns: 1; }
}

@media (max-width: 620px) {
  :root { --header-h: 3.75rem; }
  .brand-logo svg, .custom-logo-link img { height: 1.6rem; }
  .masthead-inner { padding-block: 1.75rem; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .layout-rail { grid-template-columns: minmax(0, 1fr); }
  /* :not() keeps this from re-adding the thumbnail column on bare rows, which
     would otherwise win over .row-item-bare on source order alone. */
  .row-item:not(.row-item-bare) { grid-template-columns: 5rem minmax(0, 1fr); }
  .row-item { gap: .75rem; }
  .entry-content { font-size: 1.02rem; }
  .subscribe-form { flex-direction: column; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .entry-content ol.about-steps li { padding-left: 2.4rem; }
}

/* ========================================================================
   18. Marketing surfaces
   ======================================================================== */

/* ---- subscribe ---- */

/* The status line is a third child of a two-column flex form, so the form has
   to wrap and the line has to claim a full row of its own. */
.subscribe-form { flex-wrap: wrap; }
.subscribe-status {
  flex: 1 0 100%;
  margin: 0; font-size: .85rem; line-height: 1.4;
  opacity: .85;
}
.subscribe-status:empty { display: none; }
.subscribe-form.is-error .subscribe-status { color: var(--accent-ink); opacity: 1; }
.subscribe-form.is-done  .subscribe-status { color: var(--c-admin); opacity: 1; }

/* Honeypot. Off-screen rather than display:none — some bots skip fields that
   are explicitly hidden, which defeats the point of having one. */
.subscribe-hp {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* The in-article variant sits inside the reading column, so it reads as part of
   the page rather than as a band bolted onto the end of it. */
.subscribe-article {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 3rem auto 0;
  max-width: var(--measure, 44rem);
  padding: 1.6rem;
}
.subscribe-article h2 { font-size: 1.15rem; }
.subscribe-article p  { font-size: .88rem; }

/* ---- share ---- */

.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.share-label {
  font-size: .88rem; font-weight: 650;
  color: var(--ink-soft); margin-right: .25rem;
}
.share-link {
  font: inherit; font-size: .82rem; line-height: 1;
  padding: .44rem .7rem;
  color: var(--ink-soft); text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.share-link:hover, .share-link:focus-visible {
  color: var(--ink); border-color: var(--line-strong);
}
.share-copy.is-copied { color: var(--accent); border-color: var(--accent); }

/* ---- consent ---- */

.consent-bar {
  position: fixed; z-index: 60;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 42rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .9rem;
  padding: .9rem 1.1rem;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 40px rgb(0 0 0 / .28);
}
:root[data-theme="dark"] .consent-bar { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .consent-bar { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
}
.consent-text { margin: 0; flex: 1 1 18rem; font-size: .84rem; line-height: 1.45; }
.consent-text a { color: inherit; text-decoration: underline; }
.consent-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.consent-bar .btn { padding: .48rem .9rem; font-size: .82rem; }
.consent-bar .btn-ghost { color: inherit; border-color: currentColor; background: transparent; }

@media (max-width: 640px) {
  .share { gap: .4rem; }
  .consent-bar { left: .6rem; right: .6rem; bottom: .6rem; }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; }
}