/* PHP Upgrade Blockers Survey 2026: generated by build_html.py --web, do not edit by hand */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jost-latin-700-normal.woff2") format("woff2"); }
/* Layout: an ebook-style report. A title page on paper, chapters on light "paper" (navy pages in dark mode), mono chapter numbers, a sticky contents rail on wide screens, charts in hairline panels. Brand from Accesto's Docker Deep Dive ebook. */
:root {
  /* brand, the same in both themes: cover, bands */
  --navy: #1A1360; --navy-2: #222574; --navy-line: #34379A; --navy-tint: rgba(255, 255, 255, 0.05);
  --on-navy: #FFFFFF; --on-navy-2: #D3D2F2; --on-navy-muted: #A9AADB; --on-navy-label: #5FCEF0; --on-navy-accent: #F06830;
  /* light theme: paper pages */
  --bg: #F4F7FA; --surface: #FFFFFF; --ink: #1A1360; --ink-2: #46436F; --muted: #666487;
  --rule: #E2E6F0; --rule-strong: #C8CDE0; --grid: #E9EDF5; --hover: #EEF2F8;
  --accent: #EC6831; --accent-ink: #B84A18; --label: #086F99; --bar: #5F6396; --band: #1A1360;
  /* chart colours: validated for colour vision deficiency, all pairs, on the panel surface */
  --c-code: #5152C1; --c-deps: #2698C8; --c-biz: #EC6831; --c-infra: #BC3A83;
  --d1: #A2A5DF; --d2: #686BC1; --d3: #40449F; --d4: #211F6F;
  --d1-ink: #1A1360; --d2-ink: #FFFFFF; --d3-ink: #FFFFFF; --d4-ink: #FFFFFF;
  --eol: #C8321F; --soon: #995C00; --ok: #086F99;
  --shadow: rgba(26, 19, 96, 0.16);
  --f-display: "Sofia Pro", "sofia-pro", "Jost", "Futura", "Century Gothic", sans-serif;
  --f-body: "Sofia Pro", "sofia-pro", "Jost", "Futura", "Century Gothic", "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1360; --surface: #222574; --ink: #FFFFFF; --ink-2: #D3D2F2; --muted: #A9AADB;
    --rule: #2E3189; --rule-strong: #4348A6; --grid: #2A2D82; --hover: #282B7D;
    --accent: #F06830; --accent-ink: #FF8A5B; --label: #5FCEF0; --bar: #A4A8DB; --band: #222574;
    --c-code: #6F71FB; --c-deps: #2F9ECF; --c-biz: #E56022; --c-infra: #C74C8E;
    --d1: #5A5EBB; --d2: #7D80D9; --d3: #AAADEF; --d4: #DCDDFA;
    --d1-ink: #FFFFFF; --d2-ink: #1A1360; --d3-ink: #1A1360; --d4-ink: #1A1360;
    --eol: #FF7A66; --soon: #F2B056; --ok: #5FCEF0;
    --shadow: rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1360; --surface: #222574; --ink: #FFFFFF; --ink-2: #D3D2F2; --muted: #A9AADB;
  --rule: #2E3189; --rule-strong: #4348A6; --grid: #2A2D82; --hover: #282B7D;
  --accent: #F06830; --accent-ink: #FF8A5B; --label: #5FCEF0; --bar: #A4A8DB; --band: #222574;
  --c-code: #6F71FB; --c-deps: #2F9ECF; --c-biz: #E56022; --c-infra: #C74C8E;
  --d1: #5A5EBB; --d2: #7D80D9; --d3: #AAADEF; --d4: #DCDDFA;
  --d1-ink: #FFFFFF; --d2-ink: #1A1360; --d3-ink: #1A1360; --d4-ink: #1A1360;
  --eol: #FF7A66; --soon: #F2B056; --ok: #5FCEF0;
  --shadow: rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
code { font: 500 0.86em/1 var(--f-mono); background: var(--hover); color: var(--ink); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }

/* title page: a report's front matter on paper, not a hero */
.titlepage { background: var(--bg); border-top: 10px solid var(--navy); padding-inline: clamp(16px, 4vw, 44px); }
.tp-inner { max-width: 1200px; margin: 0 auto; padding-block: clamp(16px, 2.2vw, 24px) clamp(34px, 5vw, 54px); display: grid; gap: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--rule-strong); }
.tp-run { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); }
.logo { display: inline-flex; color: var(--ink); }
.logo svg { width: 104px; height: auto; display: block; }
.tp-run span { font: 500 12px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tp-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .tp-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 56px; } }
.tp-series { font: 500 13px/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }
.titlepage h1 { font: 700 clamp(38px, 5.4vw, 62px)/1.04 var(--f-display); color: var(--ink); margin-top: 14px; max-width: 17ch; letter-spacing: -0.005em; }
.titlepage h1 .php { color: var(--accent); }
.tp-abstract { margin-top: 26px; display: grid; gap: 8px; max-width: 62ch; padding-left: 16px; border-left: 3px solid var(--accent); }
.tp-abstract .lab { font: 500 11.5px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.tp-abstract p { font-size: clamp(17px, 1.9vw, 19px); line-height: 1.55; color: var(--ink-2); }
.tp-meta { margin: 30px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); column-gap: 24px; border-top: 1px solid var(--rule-strong); }
.tp-meta div { padding: 10px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 3px; align-content: start; }
.tp-meta dt { font: 500 11px/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tp-meta dd { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.tp-figure { margin: 0; padding: 6px 0 0; display: grid; gap: 12px; }
.tp-figure svg { width: 100%; height: auto; display: block; }
.tp-figure svg rect:not(.cl-key) { opacity: 0.7; }
.tp-figure .legend { font-size: 12.5px; gap: 4px 14px; }
.tp-figure .legend > span { color: var(--c); }
.tp-figure figcaption { font-size: 13px; line-height: 1.5; font-style: italic; color: var(--muted); }
.fig-label { display: block; font: 600 11.5px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }
.cl-key { fill: var(--rule-strong); }
.cl-code { fill: var(--c-code); } .cl-deps { fill: var(--c-deps); } .cl-biz { fill: var(--c-biz); } .cl-infra { fill: var(--c-infra); }

/* layout + contents rail */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 44px); padding-block: 0 72px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.toc { border-block: 1px solid var(--rule); padding-block: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.toc a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; display: inline-flex; gap: 8px; align-items: baseline; }
.toc a .no { font: 500 11.5px/1 var(--f-mono); color: var(--label); }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); font-weight: 600; }
.toc .toc-h { display: none; }
@media (min-width: 1080px) {
  .layout { grid-template-columns: 206px minmax(0, 1fr); gap: 52px; }
  .toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); align-self: start; border: 0; padding: 0; }
  .toc ol { flex-direction: column; gap: 1px; }
  .toc a { display: flex; padding: 6px 10px; border-left: 2px solid transparent; font-size: 14px; }
  .toc a.on { border-left-color: var(--accent); background: var(--hover); }
  .toc .toc-h { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 8px 0 12px 12px; }
}

/* chapters */
main { min-width: 0; }
section { padding-block: 60px 12px; border-top: 1px solid var(--rule); scroll-margin-top: 16px; display: grid; gap: 24px; }
section:first-child { border-top: 0; }
section > * { min-width: 0; }
section > header { display: grid; gap: 12px; max-width: 74ch; }
.kicker { display: flex; align-items: baseline; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.kicker .no { color: var(--accent-ink); }
section h2 { font: 700 clamp(28px, 3.6vw, 40px)/1.1 var(--f-display); letter-spacing: -0.005em; }
section .sub { font-size: 18px; color: var(--ink-2); line-height: 1.55; }
section .sub .hint { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); }  /* a control hint, not a takeaway */
.prose { display: grid; gap: 14px; max-width: 68ch; font-size: 17px; color: var(--ink-2); }
.prose strong { color: var(--ink); }

/* navy bands: key findings and the colophon, like the ebook's dark pages */
section.band { background: var(--band); color: var(--on-navy); border: 0; border-radius: 18px; padding: clamp(24px, 4vw, 44px); margin-top: 28px; }
section.band + section { border-top: 0; }
section.band .kicker { color: var(--on-navy-label); }
section.band .kicker .no { color: var(--on-navy-accent); }
section.band .fine { color: var(--on-navy-muted); }
section.band .fine.caveat { color: var(--on-navy-2); }
section.band a { color: var(--on-navy-accent); }
.findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); column-gap: 36px; }
.finding { display: grid; gap: 8px; align-content: start; padding-block: 20px 24px; border-top: 1px solid var(--navy-line); scroll-margin-top: 16px; }
.finding .fig { font: 700 36px/1.05 var(--f-display); color: var(--on-navy-accent); font-variant-numeric: tabular-nums; }
.finding .fig small { font: 500 15px/1 var(--f-mono); color: var(--on-navy-muted); }
.finding h3 { font: 700 19px/1.3 var(--f-display); color: var(--on-navy); }
.finding p { font-size: 15.5px; line-height: 1.55; color: var(--on-navy-2); }
section.band a.logo { color: var(--on-navy); }
section.band .anchor { font: 500 14px/1 var(--f-mono); color: var(--on-navy-muted); text-decoration: none; margin-left: 6px; }
section.band .anchor:hover, section.band .anchor:focus-visible { color: var(--on-navy-label); }
.copy { font: 500 11.5px/1 var(--f-mono); color: var(--on-navy-label); background: none; border: 1px solid var(--navy-line); border-radius: 6px; padding: 6px 8px; cursor: pointer; justify-self: start; }
.fine { font-size: 13px; color: var(--muted); line-height: 1.5; }
.fine.caveat { font-size: 14px; color: var(--ink-2); }  /* caveats that change how a chart should be read; sources and hover hints stay plain .fine */
.fine.caveat .hint { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.fine.caveat::before { content: "Analyst\2019s note"; display: inline-block; margin-right: 10px; padding: 3px 7px 2px; border-radius: 999px; vertical-align: 1px; font: 600 11px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); background: rgba(8, 111, 153, 0.09); }  /* a method note from the people behind the report: a soft teal tag, not a control */
section.band .fine.caveat::before { color: var(--on-navy-label); background: rgba(255, 255, 255, 0.1); }

/* panels */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.area-rows { display: grid; gap: 16px; }
.top { align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: clamp(16px, 2.6vw, 26px); display: grid; gap: 12px; align-content: start; min-width: 0; }
.panel > * { min-width: 0; }  /* an opened table scrolls inside the panel instead of widening it */
.panel h3 { font: 700 17px/1.3 var(--f-display); }
.panel .meta { font: 400 12px/1.45 var(--f-mono); color: var(--muted); }
.panel .meta:has(.warn) { font-size: 13px; }  /* a sample-size line that carries a small-group warning */
.panel-head { display: grid; gap: 4px; }
.note { font-size: 16px; color: var(--ink-2); line-height: 1.55; max-width: 72ch; }
.note strong { color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--bar)); flex: none; display: inline-block; }
.key-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); display: inline-block; flex: none; }
.key-ring { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-2); background: var(--surface); display: inline-block; flex: none; }
.key-tick { width: 2px; height: 14px; border-radius: 1px; background: var(--ink); display: inline-block; flex: none; }

/* controls */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.controls label { font: 500 11.5px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }
select { font: 500 15px/1.3 var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 8px; padding: 7px 9px; max-width: 100%; min-width: 0; cursor: pointer; }
.btns { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; }
.btns button { font: 500 12.5px/1 var(--f-mono); padding: 9px 12px; background: var(--surface); color: var(--ink-2); border: 0; cursor: pointer; }
.btns button + button { border-left: 1px solid var(--rule-strong); }
.btns button:hover { background: var(--hover); }
.btns button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.warn { color: var(--soon); }

/* horizontal bars */
.hbar { display: grid; gap: 2px; }
.hrow { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 28px; padding: 3px 6px; border-radius: 6px; cursor: default; }
.hrow:hover, .hrow:focus-visible { background: var(--hover); outline: none; }
.hrow:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.hlab { font-size: 15px; line-height: 1.3; display: flex; align-items: center; gap: 8px; min-width: 0; }
.htrack { position: relative; height: 14px; margin-right: 46px; }
.htrack::before { content: ""; position: absolute; left: 0; top: -6px; bottom: -6px; width: 1px; background: var(--rule-strong); }
.hfill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c, var(--bar)); border-radius: 0 4px 4px 0; min-width: 2px; }
.htick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.hval { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 7px; font: 500 13px/1 var(--f-mono); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.compact .hrow { min-height: 25px; }
.compact .hlab { font-size: 14.5px; }
.wide .hrow { grid-template-columns: minmax(0, 54%) minmax(0, 1fr); }
.hgroup { font: 500 11.5px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); padding: 14px 6px 4px; }
.hgroup:first-child { padding-top: 2px; }
@media (max-width: 520px) {
  .hrow, .wide .hrow { grid-template-columns: minmax(0, 1fr); gap: 5px; padding-block: 5px; }
}

/* dumbbells */
.dumb { display: grid; gap: 2px; }
.daxis, .drow { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr) 76px; gap: 12px; align-items: center; }
.daxis { padding: 0 6px 4px; }
.daxis .dticks { position: relative; height: 14px; }
.daxis .dticks span { position: absolute; transform: translateX(-50%); font: 500 11px/1 var(--f-mono); color: var(--label); }
.daxis .dticks span:first-child { transform: none; }
.daxis .dticks span:last-child { transform: translateX(-100%); }
.drow { min-height: 30px; padding: 3px 6px; border-radius: 6px; }
.drow:hover, .drow:focus-visible { background: var(--hover); outline: none; }
.drow:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.dlab { font-size: 15px; line-height: 1.3; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.dtrack { position: relative; height: 22px; background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px); background-size: 25% 100%; border-right: 1px solid var(--grid); }
.dline { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); background: var(--rule-strong); border-radius: 2px; }
.drow.sig .dline { background: var(--accent); height: 3px; }
.ddot { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); }
.ddot.a { background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.ddot.b { background: var(--surface); border: 2px solid var(--ink-2); }
.dval { font: 500 13px/1.2 var(--f-mono); color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dval b { color: var(--ink); font-weight: 600; }
.pill { display: inline-block; font: 600 10px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 6px 2px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent-ink); white-space: nowrap; }
.dgroup { font: 500 11.5px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); padding: 14px 6px 4px; }
@media (max-width: 560px) {
  .daxis, .drow { grid-template-columns: minmax(0, 1fr) 70px; row-gap: 4px; }
  .daxis > :first-child { display: none; }
  .dlab { grid-column: 1 / -1; }
}

/* columns */
.colchart { display: grid; gap: 6px; }
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; height: var(--h, 160px); border-bottom: 1px solid var(--rule-strong); }
.col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 6px 6px 0 0; cursor: default; }
.col:hover, .col:focus-visible { background: var(--hover); outline: none; }
.col:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.cbar { width: min(30px, 72%); background: var(--c, var(--bar)); border-radius: 4px 4px 0 0; min-height: 1px; }
.cval { font: 500 13px/1 var(--f-mono); color: var(--ink-2); margin-bottom: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clabels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.clab { font-size: 13px; line-height: 1.25; color: var(--ink-2); text-align: center; white-space: nowrap; overflow: visible; }
.clab small { display: block; font: 400 10.5px/1.3 var(--f-mono); color: var(--muted); }
.clab small.warn { color: var(--soon); }

/* stacked */
.stacks { display: grid; gap: 12px; }
.srow { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: center; }
.srow .slab { font-size: 15px; line-height: 1.3; }
.srow .slab small { display: block; font: 400 11.5px/1.3 var(--f-mono); color: var(--muted); }
.stack { display: flex; gap: 2px; height: 28px; }
.seg { display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--f-mono); min-width: 2px; cursor: default; }
.seg:first-child { border-radius: 4px 0 0 4px; }
.seg:last-child { border-radius: 0 4px 4px 0; }
.seg:hover, .seg:focus-visible { filter: brightness(1.08); outline: none; }
.seg:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

/* category strip */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.cat { padding: 14px 16px 14px 0; display: grid; gap: 6px; border-bottom: 1px solid var(--rule); }
.cat .cname { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.cat .cbig { font: 700 28px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cat .cmeter { height: 6px; background: var(--grid); border-radius: 3px; overflow: hidden; }
.cat .cmeter i { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.cat .fine { font-size: 12.5px; }

/* areas */
.area-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.area-name { display: flex; align-items: center; gap: 8px; font: 700 19px/1.3 var(--f-display); }
.area-name .sw { width: 12px; height: 12px; }
.area-big { font: 700 24px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.area-big small { font: 400 12px/1 var(--f-mono); color: var(--muted); margin-left: 6px; }
.area-text { display: grid; gap: 10px; border-top: 1px solid var(--rule); padding-top: 12px; }
.note-pair { display: grid; gap: 10px; }  /* as a side note, the comment stays level with the paragraph it answers */

/* callouts */
.callouts { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); column-gap: 24px; }
.callout { border-top: 3px solid var(--accent); padding-top: 12px; padding-bottom: 18px; display: grid; gap: 6px; align-content: start; }
.callout .big { font: 700 28px/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.callout p { font-size: 15px; color: var(--ink-2); }

/* tables */
details.tbl summary { cursor: pointer; font-size: 14px; color: var(--accent-ink); width: fit-content; }
.tablewrap { overflow-x: auto; margin-top: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 600 11.5px/1.3 var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--label); white-space: nowrap; }
td.n, th.n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: var(--hover); }

/* versions */
.vblock { display: grid; gap: 10px; }
.vhead { display: flex; align-items: last baseline; gap: 4px 10px; flex-wrap: wrap; }
.vhead h3 { font: 700 17px/1.3 var(--f-display); }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.vchip { display: inline-grid; gap: 4px; font: 500 13px/1 var(--f-mono); padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--rule-strong); background: var(--surface); }
.vchip small { font-size: 11px; color: var(--muted); font-weight: 400; }
.vchip.eol { border-color: var(--eol); }
.vchip.eol .v { text-decoration: line-through; text-decoration-color: var(--eol); text-decoration-thickness: 2px; }
.vchip.soon { border-color: var(--soon); }
.vchip.ok { border-color: var(--ok); }
.vkey { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.vkey span { display: inline-flex; gap: 6px; align-items: center; }
.vkey i { width: 14px; height: 10px; border-radius: 3px; border: 1.5px solid var(--c); display: inline-block; }

/* themes + quotes */
.themes { display: grid; gap: 0; }
.theme { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; align-items: baseline; }
.theme .n { font: 500 13px/1 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.themes.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); column-gap: 32px; }
.quotes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.quotes.one { grid-template-columns: minmax(0, 1fr); gap: 12px; }
blockquote { margin: 0; padding: 14px 18px; border-left: 3px solid var(--c-deps); background: var(--surface); border-radius: 0 10px 10px 0; display: grid; gap: 8px; align-content: start; }
blockquote p { font-size: 16px; line-height: 1.5; }
blockquote.lead { border-left-color: var(--accent); max-width: 80ch; padding: 20px 24px; }
blockquote.lead p { font: 700 clamp(19px, 2.3vw, 23px)/1.4 var(--f-display); }

/* They say: signed comments from the PHP community, set apart from the report's own voice */
.says { display: grid; gap: 12px; max-width: 600px; margin-top: 14px; }
.steps .says { grid-column: 2; margin-top: 2px; }  /* sits under the step's text, spaced by the row gap */
.say { --face: 44px; position: relative; display: grid; grid-template-columns: var(--face) minmax(0, 1fr); gap: 12px; align-items: start; scroll-margin-top: 16px; }
.say-face { position: relative; z-index: 1; width: var(--face); height: var(--face); border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 600 14px/1 var(--f-display); letter-spacing: 0.02em; color: var(--surface); background: var(--bar); box-shadow: 0 0 0 1px rgba(236, 104, 49, 0.45); }  /* the edge keeps a white-background photo round on a white panel */
.say-face img { width: 100%; height: 100%; object-fit: cover; }
.say-bubble { position: relative; z-index: 1; margin: 0; display: grid; gap: 6px; padding: 12px 14px 11px; border: 1px solid rgba(236, 104, 49, 0.45); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 20px -10px var(--shadow); }
.say-bubble::before { content: ""; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; border: solid rgba(236, 104, 49, 0.45); border-width: 0 0 1px 1px; border-radius: 0 0 0 3px; background: inherit; transform: rotate(45deg); }
.say figcaption { display: grid; gap: 1px; }
.say-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.say-name { font: 700 15px/1.3 var(--f-display); color: var(--ink); }
.says-lab { padding: 3px 7px 2px; border-radius: 999px; font: 600 10px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: rgba(236, 104, 49, 0.1); }
.say-who .says-lab { margin-left: auto; }
.say-role { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.say blockquote { position: relative; padding: 0; border: 0; border-radius: 0; background: none; gap: 4px; }
.say blockquote p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.say-text.is-clamped { max-height: 8.25em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.say-toggle { width: fit-content; padding: 0; border: 0; background: none; font: 500 13px/1.6 var(--f-body); color: var(--accent-ink); cursor: pointer; }
.say-toggle:hover { text-decoration: underline; text-underline-offset: 2px; }
.say-toggle::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); }
.say-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.say-toggle[aria-expanded="false"]::before { content: ""; position: absolute; inset: 0; }  /* the whole faded quote opens it */
@keyframes say-breathe { from { transform: scale(1.1); } to { transform: scale(1.3); } }
@media (prefers-reduced-motion: no-preference) {  /* a slow, constant halo that draws the eye to the face */
  .says { transition: transform 0.22s ease-out; }  /* a side note glides aside as the one above it opens */
  .say::before { content: ""; position: absolute; left: 0; top: 0; width: var(--face); height: var(--face); border-radius: 50%; background: rgba(236, 104, 49, 0.28); pointer-events: none; animation: say-breathe 2.4s ease-in-out infinite alternate; }
}
@media (max-width: 400px) {  /* a smaller face keeps the name and the tag on one line on phones */
  .say { --face: 36px; gap: 10px; }
  .say-face { font-size: 12px; }
  .say-bubble::before { top: 12px; }
}
.says-index { font-size: 14px; line-height: 1.5; color: var(--on-navy-2); }
.says-index .says-lab { display: inline-block; margin-right: 10px; vertical-align: 1px; font-size: 11px; background: rgba(255, 255, 255, 0.1); }
@media screen and (min-width: 1420px) {  /* room for a comment column: comments step into the right margin, level with what they answer */
  .wrap, .tp-inner { margin-left: max(-20px, min(calc((100vw - 1200px) / 2), calc(100vw - 1438px))); }  /* below about 1,680 px the page slides left to keep that column, as Google Docs does */
  main { position: relative; }
  .says { position: absolute; left: calc(100% - 22px); z-index: 1; width: clamp(280px, calc(50vw - 558px), 356px); max-width: none; margin-top: 96px; }
  .steps .says { margin-top: 0; }  /* level with the start of its step, however long the text */
  .steps li:nth-child(5) .says { margin-top: 52px; }  /* clears the comment two steps up, and stays beside its own step */
  .steps .say-text.is-clamped { max-height: 8.25em; }
  .area-text .says { margin-top: 0; }  /* level with the paragraph it answers */
  .say-text.is-clamped { max-height: 10.5em; }
}
@media screen and (min-width: 1420px) and (max-width: 1755px) {  /* narrow side notes: the label becomes a tab on the bubble's top edge, so a long name keeps its line */
  .says .say-who .says-lab { position: absolute; top: -9px; right: 12px; background: linear-gradient(rgba(236, 104, 49, 0.1), rgba(236, 104, 49, 0.1)), var(--surface); box-shadow: 0 0 0 1px rgba(236, 104, 49, 0.45); }
}
section.band .says-index a, .says-index .says-lab { color: #FFA27E; }  /* the band's orange is too dark for small text on navy */

/* recommendations */
.steps { list-style: none; margin: 0; padding: 0; display: grid; max-width: 78ch; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-block: 16px; border-top: 1px solid var(--rule); font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.steps li::before { content: counter(step, decimal-leading-zero); font: 600 14px/1.75 var(--f-mono); color: var(--accent-ink); }
.steps strong { color: var(--ink); }

/* colophon */
.colophon-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 820px) { .colophon-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; } }
section.band .logo { color: var(--on-navy); }
#colophon > header { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
#colophon > header .logo { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: start; margin-top: 2px; }
/* phones: the heading keeps one line and the logo takes the width that is left (64px at 390px wide); narrower than 390px it stacks under the heading */
@media (max-width: 560px) {
  #colophon > header { grid-template-columns: max-content minmax(0, 1fr); }
  #colophon > header .kicker, #colophon > header h2 { grid-column: 1; }
  #colophon > header h2 { white-space: nowrap; }
  #colophon > header .logo { width: 100%; max-width: 104px; }
  #colophon > header .logo svg { width: 100%; }
}
@media (max-width: 389px) {
  #colophon > header { grid-template-columns: minmax(0, 1fr); }
  #colophon > header h2 { white-space: normal; }
  #colophon > header .logo { grid-column: 1; grid-row: auto; justify-self: start; width: auto; margin-top: 4px; }
  #colophon > header .logo svg { width: 104px; }
}
.colophon-text { display: grid; gap: 14px; }
.colophon-text p { color: var(--on-navy-2); font-size: 16.5px; line-height: 1.6; max-width: 62ch; }
.colophon-side { display: grid; gap: 14px; }
.cite { display: grid; gap: 6px; border: 1px solid var(--navy-line); border-radius: 12px; padding: 14px 16px; background: var(--navy-tint); }
.cite .lab { font: 500 11.5px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-label); }
.cite p { font: 400 13px/1.55 var(--f-mono); color: var(--on-navy-2); }
.cite p { overflow-wrap: anywhere; }  /* the long citation URL wraps on the narrowest phones */
.cite .cite-note { font: 400 13.5px/1.5 var(--f-body); }  /* guidance, not something to copy: body font */
.foot { border-top: 1px solid var(--navy-line); padding-top: 16px; font: 400 12px/1.5 var(--f-mono); color: var(--on-navy-muted); display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.foot .site { color: var(--on-navy-accent); }
.foot .legal a { color: var(--on-navy); text-decoration: none; }  /* copyright and licence: quiet white links */
.foot .legal a:hover { text-decoration: underline; }

/* lists */
.plain { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 76ch; font-size: 16px; color: var(--ink-2); }
.plain li::marker { color: var(--accent); }
.plain strong { color: var(--ink); }

/* tooltip */
#tip { position: fixed; z-index: 40; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 9px 12px; font-size: 14px; line-height: 1.4; max-width: 300px; box-shadow: 0 10px 30px var(--shadow); display: grid; gap: 2px; }
#tip .t-main { font: 700 16px/1.3 var(--f-display); }
#tip .t-sub { color: var(--ink-2); }
#tip .t-fine { color: var(--muted); font: 400 12px/1.4 var(--f-mono); }

@media (prefers-reduced-motion: no-preference) {
  .hfill, .htick, .hval, .cbar, .cmeter i { transition: width 0.25s ease, left 0.25s ease, height 0.25s ease; }
}
.print-only { display: none !important; }
.fig-note { font-size: 13.5px; color: var(--ink-2); }
@media print {
  .toc, .controls, .btns, .copy, #tip, .hint, .anchor, .say-toggle, .say::before, details.tbl:not(.keep-print) { display: none !important; }
  .say-text.is-clamped { max-height: none; -webkit-mask-image: none; mask-image: none; }
  :root { --bg: #FFFFFF; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }  /* chart marks are backgrounds: print them */
  span.print-only { display: inline !important; }
  details.keep-print > summary { list-style: none; break-after: avoid; color: var(--ink); font-weight: 700; }
  details.keep-print > summary::-webkit-details-marker { display: none; }
  p.print-only { display: block !important; }
  .layout { display: block; }
  .titlepage, section.band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* at print scale every panel fits on a page: keep each one whole */
  .panel { break-inside: avoid; }
  /* quotes print in full, so a two-column panel with a comment can outgrow the page: stack them at full width */
  .says { transform: none !important; }  /* clears the on-screen push of a side note */
  .area-rows { display: block; }
  .area-rows > .panel + .panel { margin-top: 16px; }
  .finding, blockquote, .say, .steps li, .callout, .cat, .hbar, .dumb, .colchart, .stacks, .panel-head, .area-head,
  .legend, .tp-figure, .theme, tr { break-inside: avoid; }
  /* the title page keeps its two columns on paper, so Figure 1 stays on page 1 */
  .tp-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 32px; }
  .titlepage h1 { font-size: 40px; }
  #findings { break-before: page; }  /* the title page stands on its own */
  .dlab { flex-wrap: nowrap; }  /* keep each swatch next to its label on the narrower page */
  .dlab > span:not(.sw) { min-width: 0; }
  h2, h3, .panel-head, section > header, .legend, .meta { break-after: avoid; }
  section > header { break-inside: avoid; }  /* keep the kicker with its heading */
  .plain { display: block; }  .plain > li + li { margin-top: 8px; }  /* a grid list that breaks across pages can overlap in Chrome */
  .hbar, .dumb, .colchart, .stacks, .cats { break-before: avoid; }  /* keep a chart with its panel heading */
  section { break-before: auto; padding-block: 24px 4px; gap: 18px; }
  .drow { min-height: 25px; padding-block: 1px; }  /* tighter dot-chart rows so each chart fits on one page */
  .wrap { padding-bottom: 0; }
  body { zoom: 0.8; }  /* a denser page on paper: about a fifth fewer pages */
}
@page { size: A4; margin: 12mm 10mm; }