.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.wrap{padding:1rem 0;font-size:14px;color:var(--color-text-primary)}
.card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:1.25rem 1.5rem}
.field-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.field-row label{font-size:13px;color:var(--color-text-secondary);min-width:160px}
.field-row select,.field-row input[type=number]{font-size:13px}
.field-row select{flex:1}
.field-row input[type=number]{width:150px}
.sec-label{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--color-text-tertiary);text-transform:uppercase;margin:1.25rem 0 .6rem}
.kvals{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:.5rem}
.kv{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--color-text-secondary)}
.kv input{width:38px;font-size:12px;padding:2px 5px}
.divider{border:none;border-top:0.5px solid var(--color-border-tertiary);margin:1.25rem 0}
.result-card{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:14px 16px;margin-top:1.25rem}
.result-card.rib{border-color:var(--color-border-success)}
.result-card.wide{border-color:var(--color-border-info)}
.result-card.classic{border-color:var(--color-border-info)}
.rc-name{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:6px}
.rc-metric{font-size:32px;font-weight:500;color:var(--color-text-primary);line-height:1.1;margin-bottom:14px}
.rc-breakdown{font-size:12px;color:var(--color-text-secondary);margin-top:8px;font-family:var(--font-mono);line-height:1.8}
.components{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.component-row{display:flex;align-items:center;gap:10px;font-size:12px}
.component-label{color:var(--color-text-secondary);min-width:180px}
.component-value{font-family:var(--font-mono);font-weight:500;color:var(--color-text-primary);min-width:80px;text-align:right}
.component-bar-wrap{flex:1;background:#ddd;border-radius:2px;height:6px;min-width:60px}
.component-bar{height:6px;border-radius:2px;background:#4a90d9;transition:width .2s}
.component-bar.delay{background:#3aaa6e}
.component-bar.load{background:#e6a817}
.component-note{font-size:11px;color:var(--color-text-tertiary);margin-top:-2px;margin-bottom:4px;font-family:var(--font-mono)}
.hint{font-size:11px;color:var(--color-text-tertiary);margin-left:4px}
.linked{font-size:11px;color:var(--color-text-tertiary);margin-left:4px}

/* Mobile prev/next buttons moved above the content (index.hbs); chrome.css's
   50px margin-block-start was sized for sitting below the article. */
.nav-wrapper{ margin-block-start: 0; margin-block-end: 1em }

/* mdbook-svgbob wraps every diagram in an unscoped <style>svg{width:100%!important}</style>.
   An HTML <style> is document-global, so that rule leaks onto every inline icon SVG
   on any page with a bob diagram — stretching the menu-bar icons (GitHub wraps to a
   second row) and blockquote note/tip icons. Re-assert mdbook's icon size; .fa-svg
   is mdbook's own icon selector, so the .svgbob diagram (which should be 100%) is
   untouched. */
.fa-svg svg{ width: 1em !important; height: 1em !important }

/* While pinch-zoomed (html.pinch-zoomed, set by theme/zoom-unstick.js):
   unstick the menu bar so it doesn't ride along magnified over the content
   being zoomed. Unzoomed, stock behavior stays — the hover placeholder must
   remain in flow, since its 50px height is what makes the bar visible at the
   top of the page (the .page container starts at -50px and counts on it).
   Overrides the .sticky/:hover/sidebar-visible rules in chrome.css. */
html.pinch-zoomed #mdbook-menu-bar.sticky,
html.pinch-zoomed #mdbook-menu-bar:hover,
html.pinch-zoomed.sidebar-visible #mdbook-menu-bar{ position: relative; top: auto !important; }
html.pinch-zoomed #mdbook-menu-bar-hover-placeholder{ position: relative; pointer-events: none; }

/* Correctness tier list (src/how-to-make-a-blog-like-this.md): source-authority
   ranking S (top) → F (bottom). Markup is just .tier rows of a .tier-label letter
   tile plus a .tier-items strip of chips. */
/* The chips/strip pull from mdbook's own theme variables so they track whatever
   theme is active (light, rust, coal, navy, ayu) instead of hardcoding one
   light + one dark value. Scoped to .tierlist so nothing leaks. */
.tierlist{
  --surface-1: var(--quote-bg);            /* strip behind the chips */
  --surface-2: var(--table-header-bg);     /* chip fill (reads raised on the strip) */
  --border: var(--table-border-color);
  --text-primary: var(--fg);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display:flex; flex-direction:column; gap:4px; padding:1rem 0; font-family:var(--font-sans) }
.tier{ display:flex; gap:4px; align-items:stretch }
.tier-label{ flex:0 0 64px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:500; border-radius:8px }
.tier-items{ flex:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:var(--surface-1); border-radius:8px; padding:10px 12px }
.tier-items span{ background:var(--surface-2); border:0.5px solid var(--border); border-radius:6px; padding:6px 12px; font-size:14px; color:var(--text-primary) }
.tier-s{ background:#E24B4A; color:#fff }
.tier-a{ background:#EF9F27; color:#412402 }
.tier-b{ background:#FAC775; color:#412402 }
.tier-c{ background:#97C459; color:#173404 }
.tier-d{ background:#5DCAA5; color:#04342C }
.tier-e{ background:#85B7EB; color:#042C53 }
.tier-f{ background:#AFA9EC; color:#26215C }