/* Moved from websites/templates/websites/_structure_gates_styles.html (redesign checklist: local CSS out of the
   templates). Loaded only by the pages that include that partial. */

.gates-page {
  --gk-ok: var(--mint-text); --gk-ok-ink: var(--mint-text); --gk-ok-bg: #dfeee4;
  --gk-warn: var(--amber-text); --gk-warn-ink: var(--amber-text); --gk-warn-bg: #f7ead2;
  --gk-bad: var(--coral-text); --gk-bad-ink: var(--coral-text); --gk-bad-bg: #f9dfd9;
}
.gates-page .tnum, .gates-page .seo-cell-num { font-variant-numeric: tabular-nums; }

/* A block's lead line: its one figure, beside the help note that says
   how to read the block (what the old masthead and section heads held). */
.gk-lead-line { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.gk-lead-line b { display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: 30px; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--color-text); font-variant-numeric: tabular-nums; }
/* The condition badge (§4.19) beside a number: the standing's, a section
   head's, a check point's. */
.gk-lead-line b .badge, .gk-sec-figure .badge { vertical-align: middle;
  margin-left: var(--space-2); letter-spacing: 0; }
.gk-check-head .badge { align-self: center; }
.gk-standing .seo-counts { margin-top: var(--space-3); }
.gk-ledger-lead { margin: 0; }

/* ── The ladder ─────────────────────────────────────────────────── */
/* Five columns of equal width: what was collected, then one per gate.
   The ribbon's height is the share of URLs still carried, at true
   scale; the drop-off rail below is magnified, and says so. */
.gk-ladder { display: flex; align-items: stretch; margin: var(--space-4) 0 0;
  overflow-x: auto; }
.gk-col { flex: 1 1 0; min-width: 132px; padding: 0 0 0 var(--space-3);
  border-left: 2px solid var(--color-text); }
.gk-col:first-child { border-left: 0; padding-left: 0; }
.gk-col-kicker { margin: 0; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 800; color: var(--color-accent); }
.gk-col:first-child .gk-col-kicker { color: var(--color-neutral-700); }
.gk-col-q { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.25;
  min-height: 2.5em; }
.gk-col-carry { margin: var(--space-1) 0 0; font-size: 12px;
  color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
/* The dashed edges are the level the collection started at: the green
   ribbon sits inside them, so a 2% loss is visible as a gap instead of
   being a difference nobody can see between two tall bars. */
.gk-ribbon { height: 104px; display: flex; align-items: center;
  margin-top: var(--space-2);
  border-top: 1px dashed var(--color-neutral-400);
  border-bottom: 1px dashed var(--color-neutral-400); }
.gk-flow { display: block; width: 100%; background: var(--gk-ok);
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.gk-drop { min-height: 76px; padding-top: var(--space-2); }
.gk-loss { display: block; height: 14px; background: var(--gk-bad);
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.gk-drop b { display: block; margin-top: 5px; font-size: 13px;
  color: var(--gk-bad-ink); font-variant-numeric: tabular-nums; }
.gk-drop span { display: block; font-size: 11.5px; color: var(--color-neutral-700); }
.gk-drop .gk-none { color: var(--gk-ok-ink); font-weight: 600; font-size: 12.5px; }
.gk-end { text-align: right; }
.gk-end .gk-col-kicker { color: var(--gk-ok-ink); }
.gk-legend { display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin: var(--space-3) 0 0; font-size: 12px; color: var(--color-neutral-700); }
.gk-legend i { width: 11px; height: 11px; display: inline-block;
  margin-right: 6px; vertical-align: -1px; }
.gk-legend .i-pass { background: var(--gk-ok); }
.gk-legend .i-lost { background: var(--gk-bad); }
.gk-legend .i-unknown { background: var(--color-neutral-400); }

/* ── One card per gate ──────────────────────────────────────────── */
.gk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--space-4); margin-top: var(--space-4); }
.gk-card { border: 1px solid var(--color-divider);
  border-left: 4px solid var(--gk-ok); background: var(--color-neutral-100);
  padding: var(--space-3); display: flex; flex-direction: column; }
.gk-card.is-lossy { border-left-color: var(--gk-bad); }
.gk-card h3 { font-size: 16px; margin: var(--space-1) 0 0; }
.gk-card-pass { display: flex; align-items: baseline; gap: var(--space-2);
  margin: var(--space-3) 0 0; }
.gk-card-pass b { font-family: var(--font-heading); font-weight: 800;
  font-size: 28px; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--gk-ok-ink); }
.gk-card.is-lossy .gk-card-pass b { color: var(--gk-bad-ink); }
.gk-card-pass span { font-size: 12px; color: var(--color-neutral-700); }
.gk-card-bar { height: 6px; background: var(--color-neutral-300);
  margin: var(--space-2) 0 var(--space-3); }
.gk-card-bar > span { display: block; height: 100%; background: var(--gk-ok);
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.gk-card.is-lossy .gk-card-bar > span { background: var(--gk-bad); }
.gk-lost { list-style: none; margin: 0 0 var(--space-3); padding: 0; font-size: 13px; }
.gk-lost li { display: flex; align-items: baseline; gap: var(--space-2);
  padding: 5px 0; border-bottom: 1px solid var(--color-neutral-300); }
.gk-lost code { flex: 1 1 auto; font-size: 12px; overflow-wrap: anywhere; }
.gk-lost .tnum { color: var(--color-neutral-700); white-space: nowrap; }
.gk-card-why { margin: auto 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--color-neutral-800); }
.gk-card-why strong { color: var(--color-text); }
.gk-clean { margin: 0 0 var(--space-3); font-size: 13px; color: var(--gk-ok-ink); }

/* ── The structures ledger ──────────────────────────────────────── */
/* Seven columns of verdicts became one strip of seven squares: the row
   is a path and a size, not a spreadsheet. Each square keeps its verdict
   as text (read by screen readers, by the click-to-sort script and by
   anyone copying the table) and its explanation as the tooltip. */
.gk-pips { display: inline-flex; gap: 3px; }
.gk-pip { display: inline-block; width: 12px; height: 12px; overflow: hidden;
  text-indent: -999px; background: var(--gk-ok); vertical-align: -1px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.gk-pip--warn { background: var(--gk-warn); }
.gk-pip--bad { background: var(--gk-bad); }
.gk-pip--none { background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-neutral-400); }
.gk-share { display: flex; align-items: center; gap: var(--space-2);
  min-width: 148px; }
.gk-share .gk-bar { flex: 1 1 auto; height: 8px;
  background: var(--color-neutral-300); }
.gk-share .gk-bar > span { display: block; height: 100%;
  background: var(--color-neutral-900);
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.gk-share.is-stopped .gk-bar > span { background: var(--gk-bad); }
.gk-share.is-unknown .gk-bar > span { background: var(--color-neutral-500); }
.gk-stop { display: inline-block; padding: 2px 8px; font-size: 11.5px;
  white-space: nowrap; background: var(--gk-ok-bg); color: var(--gk-ok-ink); }
.gk-stop--stopped { background: var(--gk-bad-bg); color: var(--gk-bad-ink); }
.gk-stop--stopped-canonical { background: var(--gk-warn-bg); color: var(--gk-warn-ink); }
.gk-stop--unknown { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.gk-ledger td { vertical-align: top; }
.gk-ledger .gk-cell-pattern code { overflow-wrap: anywhere; }
.gk-ledger .btn-compact { padding: 3px 10px; font-size: 12px; white-space: nowrap; }

/* ── Section heads ──────────────────────────────────────────────── */
/* Number in the margin, title and one-line summary, and the score as a
   POSITION on a three-band scale — a bar filling from the left answers
   "how full", which is not what a score is. */
.gk-sec-head { display: grid; grid-template-columns: 44px 1fr auto;
  gap: var(--space-3); align-items: start;
  border-bottom: 2px solid var(--color-text); padding-bottom: var(--space-3); }
.gk-sec-no { margin: 0; font-family: var(--font-heading); font-weight: 800;
  font-size: 26px; line-height: 1; letter-spacing: -0.03em;
  color: var(--color-neutral-400); font-variant-numeric: tabular-nums; }
.gk-sec-title h2 { font-size: 22px; }
.gk-sec-summary { margin: var(--space-1) 0 0; font-size: 13px;
  color: var(--color-neutral-700); }
.gk-sec-score { min-width: 168px; text-align: right; }
.gk-sec-figure { display: block; font-family: var(--font-heading);
  font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; }
.gk-sec-figure.is-good { color: var(--gk-ok-ink); }
.gk-sec-figure.is-warn { color: var(--gk-warn-ink); }
.gk-sec-figure.is-bad { color: var(--gk-bad-ink); }
.gk-scale { display: flex; position: relative; height: 6px;
  margin-top: var(--space-2); print-color-adjust: exact;
  -webkit-print-color-adjust: exact; }
.gk-scale i { display: block; height: 100%; }
.gk-scale-bad { width: 50%; background: color-mix(in srgb, var(--gk-bad) 45%, var(--ground)); }
.gk-scale-warn { width: 30%; background: color-mix(in srgb, var(--gk-warn) 45%, var(--ground)); }
.gk-scale-good { width: 20%; background: color-mix(in srgb, var(--gk-ok) 45%, var(--ground)); }
.gk-scale-mark { position: absolute; top: -4px; width: 2px; height: 14px;
  background: var(--color-text); transform: translateX(-1px); }
.gk-scale-legend { display: flex; justify-content: space-between;
  font-size: 9.5px; color: var(--color-neutral-600); margin-top: 2px; }
.gk-scale-legend i { font-style: normal; }

/* The gates a section owns: the tie between the ladder and the section. */
.gk-sec-gates { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); margin: var(--space-3) 0 0; }
.gk-sec-gates-label { font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 800; color: var(--color-neutral-700); }
.gk-sec-gate { display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--color-divider); border-left: 3px solid var(--gk-ok);
  padding: 4px 10px; font-size: 12.5px; text-decoration: none;
  color: var(--color-text); }
.gk-sec-gate:hover { background: var(--color-neutral-100); }
.gk-sec-gate.is-lossy { border-left-color: var(--gk-bad); }
.gk-sec-gate b { font-family: var(--font-heading); font-weight: 800; }
.gk-sec-gate span { color: var(--color-neutral-700); font-size: 11.5px; }
.gk-sec-gate.is-lossy span { color: var(--gk-bad-ink); }
.gk-sec-stamp { margin: var(--space-3) 0 0; font-size: 12px;
  color: var(--color-neutral-700); }
.gk-sec-intro { margin: var(--space-3) 0 0; max-width: 90ch; }

/* ── Check points ───────────────────────────────────────────────── */
/* One ruled block per check, full width: name and score on one line, what
   it verifies, what was found, and the advice as its own aside. */
.gk-checks { margin-top: var(--space-4); }
.gk-check { border-top: 1px solid var(--color-neutral-300);
  border-left: 3px solid var(--gk-ok); padding: var(--space-3);
  background: var(--color-neutral-100); margin-bottom: var(--space-3); }
.gk-check--warn { border-left-color: var(--gk-warn); }
.gk-check--bad { border-left-color: var(--gk-bad); }
.gk-check--info { border-left-color: var(--color-neutral-400); }
.gk-check-head { display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap; }
.gk-check-head h3 { margin: 0; font-size: 16px; flex: 1 1 auto; }
.gk-check-score { font-family: var(--font-heading); font-weight: 800;
  font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gk-check--good .gk-check-score { color: var(--gk-ok-ink); }
.gk-check--warn .gk-check-score { color: var(--gk-warn-ink); }
.gk-check--bad .gk-check-score { color: var(--gk-bad-ink); }
.gk-check-bar { height: 4px; background: var(--color-neutral-300);
  margin: var(--space-2) 0 0; }
.gk-check-bar > span { display: block; height: 100%; background: var(--gk-ok);
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.gk-check--warn .gk-check-bar > span { background: var(--gk-warn); }
.gk-check--bad .gk-check-bar > span { background: var(--gk-bad); }
.gk-check-what { margin: var(--space-3) 0 0; font-size: 13px;
  color: var(--color-neutral-700); max-width: 92ch; }
.gk-check-found { margin: var(--space-2) 0 0; max-width: 92ch; }
.gk-check-found strong, .gk-check-advice strong { font-weight: 600; }
.gk-check-advice { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-neutral-400);
  background: var(--color-bg); max-width: 92ch; font-size: 14px; }
.gk-check--bad .gk-check-advice { border-left-color: var(--gk-bad); }
.gk-check--warn .gk-check-advice { border-left-color: var(--gk-warn); }

/* ── Coverage: where the inventory came from ────────────────────── */
.gk-block { margin-top: var(--space-6); }
.gk-block-head { display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap; border-bottom: 1px solid var(--color-text);
  padding-bottom: 5px; margin-bottom: var(--space-3); }
.gk-block-head h3 { margin: 0; font-size: 17px; }
.gk-stack { display: flex; height: 34px; border: 1px solid var(--color-divider);
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.gk-stack > span { display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.gk-stack .is-sitemap { background: var(--color-text); color: var(--ground); }
.gk-stack .is-links { background: var(--color-accent-200); color: var(--color-accent-700); }
.gk-stack-key { display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin: var(--space-2) 0 0; font-size: 12.5px; color: var(--color-neutral-700); }
.gk-stack-key i { width: 11px; height: 11px; display: inline-block;
  margin-right: 6px; vertical-align: -1px; }
.gk-stack-key .k-sitemap { background: var(--color-text); }
.gk-stack-key .k-links { background: var(--color-accent-200);
  box-shadow: inset 0 0 0 1px var(--color-accent); }
.gk-stack-key .k-both { background: var(--color-neutral-300); }

/* The head/tail curve: how few shapes carry the site. */
.gk-conc { display: flex; height: 26px; margin-top: var(--space-1);
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.gk-conc > span { display: block; height: 100%;
  border-right: 1px solid var(--color-bg); }
.gk-conc .is-head { background: var(--color-neutral-900); }
.gk-conc .is-head:nth-child(2) { background: var(--color-neutral-800); }
.gk-conc .is-head:nth-child(3) { background: var(--color-neutral-700); }
.gk-conc .is-head:nth-child(4) { background: var(--color-neutral-600); }
.gk-conc .is-head:nth-child(5) { background: var(--color-neutral-500); }
.gk-conc .is-tail { background: var(--color-neutral-300); }
.gk-conc-list { list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 var(--space-4); }
.gk-conc-list li { display: flex; align-items: baseline; gap: var(--space-2);
  padding: 5px 0; border-bottom: 1px solid var(--color-neutral-300);
  font-size: 13px; }
.gk-conc-list code { flex: 1 1 auto; font-size: 12px; overflow-wrap: anywhere; }
.gk-conc-list .tnum { color: var(--color-neutral-700); white-space: nowrap; }

/* ── Crawlability: the log of what happened when we knocked ─────── */
.gk-log { margin-top: var(--space-4); }
.gk-log-group { margin-bottom: var(--space-4); }
.gk-log-head { display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap; border-bottom: 1px solid var(--color-neutral-400);
  padding-bottom: 4px; }
.gk-log-mark { width: 20px; height: 20px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px;
  font-weight: 800; color: var(--ground); background: var(--gk-ok); flex: none;
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.gk-log-group.is-bad .gk-log-mark { background: var(--gk-bad); }
.gk-log-group.is-info .gk-log-mark { background: var(--color-neutral-500); }
.gk-log-head h4 { margin: 0; font-size: 15px; font-family: var(--font-heading);
  font-weight: 800; }
.gk-log-count { margin-left: auto; font-size: 12.5px;
  color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.gk-log-why { margin: var(--space-2) 0 var(--space-2); font-size: 12.5px;
  color: var(--color-neutral-700); max-width: 88ch; }
.gk-log-rows { list-style: none; margin: 0; padding: 0; }
.gk-log-rows li { display: grid;
  grid-template-columns: minmax(0, 2.2fr) 88px minmax(0, 1.4fr) auto;
  gap: var(--space-3); align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--color-neutral-300); font-size: 13px; }
.gk-log-rows code { font-size: 12.5px; overflow-wrap: anywhere; }
.gk-log-rows .tnum { text-align: right; color: var(--color-neutral-700); }
.gk-log-rows .gk-log-say { color: var(--color-neutral-700); font-size: 12px; }
.gk-log-more { margin: var(--space-2) 0 0; font-size: 12.5px;
  color: var(--color-neutral-700); }

/* The one group nobody needs to read line by line folds; its counts stay
   on the fold, so the page never hides a number without saying so. */
.gk-log-group.is-folded > details > summary { cursor: pointer;
  list-style: none; }
.gk-log-group.is-folded > details > summary::-webkit-details-marker { display: none; }
.gk-log-group.is-folded > details > summary:hover .gk-log-count { color: var(--color-text); }
.gk-log-group.is-folded > details > summary .gk-log-count::after { content: " ▸"; }
.gk-log-group.is-folded > details[open] > summary .gk-log-count::after { content: " ▾"; }

/* ── Indexability: the four channels, side by side ──────────────── */
.gk-matrix { width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; }
.gk-matrix th { text-align: left; font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--color-neutral-700);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
  white-space: nowrap; }
.gk-matrix td { padding: 7px var(--space-2);
  border-bottom: 1px solid var(--color-neutral-300); vertical-align: top; }
.gk-matrix tbody tr:hover { background: var(--color-neutral-100); }
.gk-matrix code { font-size: 12.5px; overflow-wrap: anywhere; }
.gk-say { display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; }
.gk-say i { width: 9px; height: 9px; display: block; flex: none;
  background: var(--gk-ok); print-color-adjust: exact;
  -webkit-print-color-adjust: exact; }
.gk-say--warn i { background: var(--gk-warn); }
.gk-say--bad i { background: var(--gk-bad); }
.gk-say--none i { background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-neutral-400); }
.gk-say--none { color: var(--color-neutral-600); }
.gk-matrix tr.is-conflict td { background: color-mix(in srgb, var(--gk-warn) 8%, transparent); }
.gk-matrix tr.is-conflict td:first-child { box-shadow: inset 3px 0 0 var(--gk-warn); }
.gk-conflict-note { display: inline-block; font-size: 11.5px;
  color: var(--gk-warn-ink); margin: var(--space-1) 0 0;
  text-decoration: none; border-bottom: 1px solid currentColor; }
.gk-conflict-note:hover { color: var(--color-accent); }

/* The disagreements, spelled out one card each. */
.gk-findings { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--space-4); margin-top: var(--space-3); }
.gk-finding { border: 1px solid var(--color-divider);
  border-top: 3px solid var(--gk-warn); background: var(--color-neutral-100);
  padding: var(--space-3); }
.gk-finding h4 { margin: 0 0 var(--space-1); font-size: 14px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 600; overflow-wrap: anywhere; }
.gk-finding-meta { margin: 0 0 var(--space-2); font-size: 11.5px;
  color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.gk-finding ul { margin: 0; padding-left: 1.1em; font-size: 13px; }
.gk-finding li { margin-bottom: var(--space-2); }
.gk-finding li:last-child { margin-bottom: 0; }
.gk-allclear { display: flex; align-items: flex-start; gap: var(--space-3);
  border-left: 3px solid var(--gk-ok); background: var(--gk-ok-bg);
  padding: var(--space-3); }
/* The sign is the kit's done mark (akoore.css .mark-done), sized up. */
.gk-allclear b { font-size: 26px; line-height: 1; }
.gk-allclear b::before { background-color: var(--gk-ok-ink); }
.gk-allclear p { margin: 0; font-size: 13.5px; max-width: 78ch; }

/* ── Conclusion: the one thing here written in sentences ────────── */
.gk-concl { display: grid; grid-template-columns: minmax(0, 1fr) 216px;
  gap: clamp(20px, 3vw, 48px); align-items: start; }
.gk-concl-body { max-width: 72ch; }
.gk-concl-body .rich-text { font-size: 16px; line-height: 1.66; }
.gk-concl-body .rich-text > p:first-of-type::first-letter {
  float: left; font-family: var(--font-heading); font-weight: 800;
  font-size: 52px; line-height: 0.82; padding: 4px 10px 0 0;
  color: var(--color-accent); }
.gk-concl-side { border-top: 2px solid var(--color-text);
  padding-top: var(--space-3); font-size: 12.5px;
  color: var(--color-neutral-700); }
.gk-concl-side dl { margin: 0 0 var(--space-3); }
.gk-concl-side dt { font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--color-neutral-600);
  margin-top: var(--space-2); }
.gk-concl-side dd { margin: 2px 0 0; font-family: var(--font-heading);
  font-weight: 800; font-size: 17px; color: var(--color-text);
  font-variant-numeric: tabular-nums; }
.gk-concl-side p { margin: 0 0 var(--space-2); line-height: 1.55; }

/* A conclusion older than the data it describes is wrong, not old. */
.gk-stale { border-left: 3px solid var(--color-accent);
  background: var(--color-accent-100); padding: var(--space-3);
  margin: 0 0 var(--space-4); font-size: 13.5px; line-height: 1.6; }

/* ── Action plan: a worksheet, not a bulleted list ──────────────── */
.gk-plan-progress { display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; border-top: 2px solid var(--color-text);
  border-bottom: 1px solid var(--color-neutral-300);
  padding: var(--space-3) 0; margin-bottom: var(--space-4); }
.gk-plan-progress b { font-family: var(--font-heading); font-weight: 800;
  font-size: 26px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gk-plan-progress span { font-size: 13px; color: var(--color-neutral-700); }
.gk-plan-progress .gk-plan-bar { flex: 1 1 180px; height: 8px;
  background: var(--color-neutral-300); min-width: 120px; overflow: hidden; }
.gk-plan-progress .gk-plan-bar > span { display: block; height: 100%;
  background: var(--gk-ok); print-color-adjust: exact;
  -webkit-print-color-adjust: exact; }
/* The plan items are the shared partial (_seo_plan_item.html), re-dressed
   here and nowhere else: numbered rows with the priority in the left rule,
   the labelled parts kept, the marks pushed to the bottom edge. */
.gates-page .seo-plan { counter-reset: gk-task; padding-left: 0; list-style: none; }
.gates-page .seo-plan > li { counter-increment: gk-task; position: relative;
  border: 1px solid var(--color-divider); border-left: 4px solid var(--color-neutral-400);
  background: var(--color-neutral-100);
  padding: var(--space-3) var(--space-3) var(--space-3) 52px;
  margin-bottom: var(--space-3); }
.gates-page .seo-plan > li::before { content: counter(gk-task, decimal-leading-zero);
  position: absolute; left: var(--space-3); top: var(--space-3);
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.gates-page .gk-plan-critical .seo-plan > li { border-left-color: var(--gk-bad); }
.gates-page .gk-plan-improve .seo-plan > li { border-left-color: var(--gk-warn); }
.gates-page .gk-plan-opportunity .seo-plan > li { border-left-color: var(--color-neutral-400); }
.gates-page .seo-plan > li > strong { font-family: var(--font-heading);
  font-weight: 800; font-size: 16px; }
.gates-page .seo-plan-part { max-width: 92ch; }
.gates-page .seo-rec--done { opacity: 0.5; }
.gates-page .seo-plan-group h3 { font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-neutral-400); padding-bottom: 4px; }

/* ── FAQ as a glossary: definitions open, not hidden behind clicks ─ */
.gk-gloss { columns: 2; column-gap: clamp(24px, 4vw, 56px); }
.gk-gloss > div { break-inside: avoid; margin-bottom: var(--space-4);
  border-top: 1px solid var(--color-neutral-300); padding-top: var(--space-2); }
.gk-gloss h3 { margin: 0 0 var(--space-1); font-size: 15px; }
.gk-gloss p { margin: 0; font-size: 13.5px; color: var(--color-neutral-800);
  line-height: 1.6; }
.gk-gloss .gk-gloss-tag { display: inline-block; font-size: 9.5px;
  letter-spacing: 0.13em; text-transform: uppercase; font-weight: 800;
  color: var(--color-accent); margin-bottom: 2px; }

@media (max-width: 1100px) {
  .gk-concl { grid-template-columns: 1fr; }
  .gk-gloss { columns: 1; }
  .gk-sec-head { grid-template-columns: 36px 1fr; }
  .gk-sec-score { grid-column: 2; text-align: left; }
  .gk-log-rows li { grid-template-columns: 1fr auto; }
}
@media print {
  .gk-ladder { overflow: visible; break-inside: avoid; }
  .gk-card, .gk-ledger tr { break-inside: avoid; }
  .gk-check, .gk-finding, .gk-log-group, .gk-conc-list li,
  .gates-page .seo-plan > li { break-inside: avoid; }
  .gk-sec-head { break-after: avoid; }
  .gk-gloss { columns: 2; }
  .gk-concl { grid-template-columns: minmax(0, 1fr) 180px; }
}