/* ActivateDigital Knowledge. Wave 1 shared stylesheet.
   One :root, one flat k- namespace, no framework, no utility layer.
   Tokens inherited from the live estate rather than re-picked.
   Three inherited defects are fixed here and the fixes are recorded in BUILD_REPORT.md:
   the badge and timeline palette is inside the token system, the dead tokens are gone,
   and is-expected and is-indicative no longer share one appearance. */

:root{
  /* brand, inherited verbatim */
  --cobalt:#0B67D0; --cobalt-dark:#0757B8; --cobalt-400:#3B8EE8; --cobalt-100:#D6E8FB; --cobalt-050:#EBF4FD;
  --navy:#0A1A30;
  --ink:#1d1d1f; --ink-soft:#424247; --ink-faint:#6e6e73; --ink-subtle:#a1a1a6;
  --paper:#fff; --surface:#F4F8FD; --surface-2:#EEF1F5; --rule:#ECECF0; --rule-mid:#D2D2D7;

  /* type, inherited. Inter is named first and is never fetched. No third party request. */
  --sans:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(16,22,35,.05),0 18px 46px -30px rgba(16,22,35,.22);
  --rcard:13px; --rel:10px; --rsm:7px;

  /* status palette, tokenised */
  --st-force-bg:#E7F4EC;      --st-force-fg:#166B3C;
  --st-adopted-bg:#EAF2FC;    --st-adopted-fg:#0757B8;
  --st-expected-bg:#FBF2DE;   --st-expected-fg:#8A6516;
  --st-indicative-bg:#F6EFE3; --st-indicative-fg:#7A5A2E;
  --st-reading-bg:#EFEAFB;    --st-reading-fg:#5B3DC4;
  --st-conflict-bg:#FCE9EC;   --st-conflict-fg:#B02B50;
  --st-unknown-bg:#EEF1F5;    --st-unknown-fg:#5C6779;
  --st-stale-bg:#F3EFE8;      --st-stale-fg:#7A5C2E;

  /* The section rail slider. Lighter than a browser default thumb, because in a rail this
     quiet a default grey reads as a second border rather than a control. */
  --rail-thumb:#E4E4EA; --rail-thumb-hover:#D2D2D7;

  --k-read:68ch; --k-side:250px; --k-toc:196px; --k-head:58px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;letter-spacing:-.022em;line-height:1.15;font-weight:680;color:var(--navy)}
p{margin:0}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}
.k-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--rsm) 0;font-size:13.5px}
.k-skip:focus{left:0}

/* ---------- header ----------
   Geometry inherited from the current site's header rather than re-picked: a 1340px inner width,
   12px vertical padding on a clamped horizontal pad, a 28px mark, a 17px wordmark with the second
   word in cobalt, and a right aligned 13px navigation on a 26px gap. */
.k-hdr{position:sticky;top:0;z-index:2000;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule)}
.k-hdr-in{max-width:1340px;margin:0 auto;padding:12px clamp(20px,3.4vw,44px);
  display:flex;align-items:center;gap:18px}
.k-logo{display:flex;align-items:center;gap:9px;color:var(--navy);flex:none}
.k-mk{width:28px;height:28px;border-radius:50%;background:var(--cobalt);display:grid;place-items:center;flex:none}
.k-mk::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
.k-logo b{font-size:17px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.k-logo b span{color:var(--cobalt)}
.k-nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.k-nav-l,.k-res-t{font-size:13px;line-height:1;color:var(--ink-faint);font-weight:500;
  letter-spacing:.01em;white-space:nowrap;transition:color .15s}
.k-nav-l:hover,.k-res-t:hover{color:var(--navy)}

/* ---------- resources mega-menu ----------
   GENERATED. Everything between the two markers is written by build/chrome.py on every build, and
   the marketing pages take the same rules from the same generator with a hex token map. Two hand
   kept copies of one component in two files is the duplication that let the doorway and the
   sidebar state two different taxonomies, one layer down. Do not edit between the markers. */
/* @@RESOURCES_CSS_START@@ */
/* Resources mega-menu. Generated by build/chrome.py. Do not edit here.
   Two conceptual areas in one card: About us on the left, the Knowledge estate on the right.
   Opens from a click and from the keyboard with no JavaScript, because it is a details element
   and every destination is a real anchor in the raw HTML whether it is open or closed. It never
   opens on hover. */
.k-res{position:relative}
.k-res>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:13px;line-height:1;color:var(--ink-faint);font-weight:500;letter-spacing:.01em;
  white-space:nowrap;padding:2px 0;border-radius:4px;transition:color .15s}
.k-res>summary::-webkit-details-marker{display:none}
.k-res>summary::marker{content:""}
.k-res>summary:hover{color:var(--navy)}
.k-res>summary::after{content:"";width:5px;height:5px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s}
.k-res[open]>summary{color:var(--navy)}
.k-res[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.k-res.is-on>summary{color:var(--navy);font-weight:700;position:relative}
.k-res.is-on>summary::before{content:"";position:absolute;left:0;right:14px;bottom:-8px;height:2px;
  background:var(--cobalt);border-radius:2px}

/* the card. A pad of pointer tolerance sits above it so the menu does not close in the gap
   between the trigger and the panel, which is the classic way a mega-menu becomes unusable. */
/* The marketing header keeps its navigation on one line, and the panel lives inside that
   navigation, so without this the descriptors inherit nowrap and run straight out of the card. */
.k-res-p,.k-res-p *{box-sizing:border-box;white-space:normal}
.k-res-p{position:absolute;top:calc(100% + 16px);right:0;
  width:min(780px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--rcard);box-shadow:0 1px 2px rgba(16,22,35,.05),0 30px 74px -36px rgba(10,26,48,.42);
  padding:18px;z-index:2100}
.k-res-p::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
/* Between the drawer breakpoint and a comfortable desktop the trigger sits close enough to the
   left edge that a card anchored to it would hang off the viewport. Anchor it to the viewport
   instead, keep the right alignment, and cap the height so a longer estate can never grow the
   card past the fold. The stacked rules below win under their own breakpoints. */
@media (max-width:1040px){
  .k-res-p{position:fixed;top:58px;right:16px;left:auto;width:min(780px,calc(100vw - 32px));
    max-height:calc(100vh - 76px);overflow-y:auto}
}
.k-res-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
/* About us is a zone, not a column of links. Two things separate it from Knowledge: the rule down
   the middle, and the tint on the destination itself. The section labels sit on the same baseline
   on both sides, so the two areas read as peers rather than as a heading and its children. */
.k-res-about .k-res-feat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--rel)}
.k-res-know{border-left:1px solid var(--rule);padding-left:20px}
/* Section and group labels carry meaning, so they are readable rather than decorative. At this
   size ink-subtle sits near 2.5:1 on paper, which is a label a reader has to lean in for. */
.k-res-lbl{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin:2px 0 6px 10px}

/* the two featured destinations. The whole row is the link. */
.k-res-feat{display:flex;gap:12px;padding:10px;border-radius:var(--rel);text-decoration:none;
  transition:background .15s}
.k-res-feat:hover{background:var(--surface)}
.k-res-about .k-res-feat:hover{background:var(--paper);border-color:var(--cobalt-100);
  box-shadow:0 1px 2px rgba(16,22,35,.05),0 8px 20px -14px rgba(10,26,48,.5)}
.k-res-feat.on,.k-res-feat[aria-current="page"]{background:var(--cobalt-050)}
.k-res-feat:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.k-res-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--cobalt-050);border:1px solid var(--cobalt-100);color:var(--cobalt-dark)}
.k-res-icg{width:19px;height:19px;display:block}
.k-res-ft{min-width:0}
.k-res-fh{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:650;
  letter-spacing:-.012em;color:var(--navy);line-height:1.25}
.k-res-arw{width:13px;height:13px;flex:none;color:var(--cobalt);opacity:0;transform:translateX(-3px);
  transition:opacity .16s,transform .16s}
.k-res-feat:hover .k-res-arw,.k-res-feat:focus-visible .k-res-arw{opacity:1;
  transform:translateX(0)}
.k-res-fd{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--ink-faint);
  max-width:34ch}
.k-res-know .k-res-fd{max-width:60ch}

/* the estate. A two column flow rather than a fixed grid, so another accepted destination lands
   without anything being repositioned by hand. */
.k-res-cols{margin:12px 0 0;column-count:2;column-gap:24px}
.k-res-grp{break-inside:avoid;page-break-inside:avoid;margin:0 0 14px}
.k-res-cols dt{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 2px 10px}
.k-res-cols dd{margin:0}
.k-res-d{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:var(--rsm);
  font-size:13.5px;line-height:1.35;color:var(--ink-soft);text-decoration:none;
  transition:background .14s,color .14s}
.k-res-d:hover{background:var(--surface);color:var(--navy)}
.k-res-d[aria-current="page"]{background:var(--cobalt-050);color:var(--cobalt-dark);font-weight:560}
.k-res-d:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px}
.k-res-di{width:17px;height:17px;flex:none;color:var(--ink-subtle);transition:color .14s}
.k-res-d:hover .k-res-di,.k-res-d[aria-current="page"] .k-res-di{color:var(--cobalt)}
.k-res-d.is-hub{color:var(--navy);font-weight:560}
.k-res-d.is-hub .k-res-di{color:var(--cobalt)}
/* The reader job under a family's cornerstone. The label says what the family is for and the
   destination says where it starts, so the line between them is the only thing a reader needs. */
.k-res-j{margin:1px 0 0 36px;font-size:12px;line-height:1.5;color:var(--ink-faint);max-width:38ch}
.k-res-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);
  font-size:12px;line-height:1.6;color:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){
  .k-res *,.k-res-p *{transition:none!important}
}
/* @@RESOURCES_CSS_END@@ */

/* ---------- knowledge editorial components ----------
   GENERATED by build/editorial.py on every build. The components are declared as data in each
   page's front matter and every component that asserts something names a source the page already
   declares, so provenance is a build requirement rather than an editing habit.
   Do not edit between the markers. */
/* @@EDITORIAL_CSS_START@@ */
/* Knowledge editorial components. Generated by build/editorial.py. Do not edit here.
   Every rule below belongs to a component that explains, proves, helps decide or breaks rhythm.
   Nothing here is decoration for its own sake. */

.k-ic{width:17px;height:17px;flex:none;display:block}
.k-ic-s{width:14px;height:14px;color:var(--ink-subtle)}
.k-ic-x{width:12px;height:12px;display:inline-block;vertical-align:-1px;margin-left:4px;
  color:var(--ink-subtle)}
/* Visible at rest, not only on hover. A row that only looks clickable when a pointer is on it
   does not look clickable to a thumb. */
.k-ic-a{width:14px;height:14px;flex:none;color:var(--cobalt);opacity:.45;transition:opacity .16s,transform .16s}

/* provenance. The line every asserting component carries. It is deliberately plain: the evidence
   is the point, not the frame around it. */
.k-prov{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px;margin:0;
  font-size:12.5px;line-height:1.5;color:var(--ink-faint)}
.k-prov .k-ic-s{align-self:center}
.k-prov-l{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-subtle)}
.k-prov-s a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--rule-mid);
  text-underline-offset:2px}
.k-prov-s a:hover{color:var(--cobalt-dark);text-decoration-color:var(--cobalt)}
.k-prov-d{font-variant-numeric:tabular-nums;color:var(--ink-subtle)}

/* BIG FACT. A number the reader will remember, with the scope that keeps it honest attached to it
   rather than three paragraphs away. The scope line is not optional in the markup and it is not
   optional here: it sits directly under the claim, in the same block, at readable contrast. */
.k-fact{margin:34px 0;padding:26px 28px;border:1px solid var(--rule);border-left:3px solid var(--cobalt);
  border-radius:var(--rcard);background:var(--paper)}
.k-fact-v{margin:0;font-size:clamp(40px,6vw,56px);line-height:1;font-weight:700;
  letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.k-fact-c{margin:10px 0 0;font-size:18px;line-height:1.4;font-weight:560;letter-spacing:-.015em;
  color:var(--navy);max-width:40ch}
.k-fact-s{display:flex;gap:7px;margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-soft);
  max-width:56ch}
.k-fact-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule)}
.k-fact-sh{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;
  border:1px solid var(--rule-mid);background:var(--paper);font:inherit;font-size:12.5px;color:var(--ink-soft);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.k-fact-sh:hover{background:var(--cobalt-050);border-color:var(--cobalt-100);color:var(--cobalt-dark)}

/* IN PLAIN ENGLISH. Subordinate to the source material by design: it is set on a tint, it is
   narrower than the article, and it says what it kept. Simplification that drops a qualifier is
   reinterpretation, so the qualifiers travel with it. */
.k-plain{margin:30px 0;padding:20px 22px;border-radius:var(--rcard);background:var(--surface);
  border:1px solid var(--rule)}
.k-plain-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-family:var(--mono);font-size:10px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.k-plain-h .k-ic{color:var(--cobalt)}
.k-plain-t{margin:0;font-size:16.5px;line-height:1.6;letter-spacing:-.012em;color:var(--navy);
  max-width:62ch}
.k-plain-k{display:flex;gap:7px;margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.k-plain .k-prov{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-mid)}

/* TIMELINE. Chronology a reader should not have to rebuild from five paragraphs. An event with no
   date says so rather than borrowing one, because a timeline that implies a settled date for an
   unsettled event is worse than no timeline. */
.k-tlx{margin:30px 0}
.k-tlx-l{list-style:none;margin:0;padding:0}
.k-tlx-e{position:relative;padding:0 0 22px 26px;border-left:2px solid var(--rule)}
.k-tlx-e:last-child{padding-bottom:0;border-left-color:transparent}
.k-tlx-e::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--paper);border:2px solid var(--rule-mid)}
.k-tlx-e.is-force::before{border-color:var(--st-force-fg)}
.k-tlx-e.is-adopted::before{border-color:var(--st-adopted-fg)}
.k-tlx-e.is-expected::before{border-color:var(--st-expected-fg)}
.k-tlx-e.is-indicative::before{border-color:var(--st-indicative-fg)}
.k-tlx-e.is-unknown::before{border-color:var(--st-unknown-fg);border-style:dashed}
.k-tlx-m{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:5px}
.k-tlx-d{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.k-tlx-d.is-none{color:var(--ink-subtle);font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  font-size:10px}
.k-tlx-t{margin:0;font-size:15.5px;line-height:1.4;font-weight:560;letter-spacing:-.012em;
  color:var(--navy)}
.k-tlx-n{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:62ch}
.k-tlx-e .k-prov{margin-top:8px}

/* DECISION. Deterministic, evidence backed, and it stops where the evidence stops. Every step
   carries its own source and the whole thing carries what it cannot answer. */
.k-dec{margin:32px 0;border:1px solid var(--rule);border-radius:var(--rcard);overflow:hidden}
.k-dec-h{display:flex;align-items:center;gap:9px;margin:0;padding:15px 20px;background:var(--surface);
  border-bottom:1px solid var(--rule);font-size:16px;font-weight:620;letter-spacing:-.015em;color:var(--navy)}
.k-dec-h .k-ic{color:var(--cobalt)}
.k-dec-l{list-style:none;margin:0;padding:0}
.k-dec-s{padding:18px 20px;border-bottom:1px solid var(--rule)}
.k-dec-s:last-child{border-bottom:0}
.k-dec-q{display:flex;gap:11px;margin:0 0 10px;font-size:15.5px;line-height:1.45;font-weight:560;
  color:var(--navy)}
.k-dec-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--cobalt-050);
  border:1px solid var(--cobalt-100);color:var(--cobalt-dark);font-family:var(--mono);font-size:11px;font-weight:700;
  display:grid;place-items:center}
.k-dec-o{list-style:none;margin:0;padding:0 0 0 33px;display:grid;gap:6px}
.k-dec-o li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14px;
  line-height:1.55;color:var(--ink-soft)}
/* The branch label shrinks and wraps before the module clips it. It carried flex:none inside a
   .k-dec that has overflow:hidden, so a long label could neither shrink nor wrap and was simply
   cut off. With flex:0 1 auto it drops onto its own line when it will not sit beside the outcome,
   and it wraps inside that line if it is still too wide for one. Nothing scrolls sideways. */
.k-dec-a{flex:0 1 auto;min-width:52px;max-width:100%;overflow-wrap:break-word;
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-subtle)}
.k-dec-r{min-width:0}
.k-dec-o li.is-stop .k-dec-a{color:var(--ink-soft)}
.k-dec-o li.is-go .k-dec-a{color:var(--cobalt-dark)}
.k-dec-o li.is-unknown .k-dec-a{color:var(--st-unknown-fg)}
.k-dec-lim{display:flex;gap:8px;margin:0;padding:14px 20px;background:var(--surface-2);
  font-size:13.5px;line-height:1.6;color:var(--ink-soft)}

/* WHAT THIS MEANS FOR YOU. Four columns and one of them is Still unknown, which is a real answer
   and is styled as one rather than as an omission. */
.k-aud{margin:32px 0}
.k-aud-h{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:16px;font-weight:620;
  letter-spacing:-.015em;color:var(--navy)}
.k-aud-h .k-ic{color:var(--cobalt)}
.k-aud-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
/* A four card set is laid out two by two rather than left to auto-fit. The article column is at
   most 744px wide, so auto-fit at a 200px minimum yields three tracks at every width above the
   stacking breakpoint and drops the fourth card alone onto a second row. Two and three card sets
   keep auto-fit, which already gives each of them one full row. */
.k-aud-g.is-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-aud-c{padding:15px 16px;border:1px solid var(--rule);border-radius:var(--rel);background:var(--paper)}
.k-aud-c.is-need{border-top:2px solid var(--cobalt)}
.k-aud-c.is-not{border-top:2px solid var(--rule-mid)}
.k-aud-c.is-prep{border-top:2px solid var(--st-expected-fg)}
.k-aud-c.is-unknown{border-top:2px solid var(--st-unknown-fg);background:var(--surface)}
.k-aud-l{margin:0 0 9px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint)}
.k-aud-c ul{margin:0;padding-left:17px;display:grid;gap:7px}
.k-aud-c li{font-size:14px;line-height:1.55;color:var(--ink-soft)}
.k-aud .k-prov{margin-top:14px}

/* CROSS REFERENCE. One canonical page, more than one way in. */
/* Every auto-fit track minimum is wrapped in min(Npx,100%).

   repeat(auto-fit,minmax(248px,1fr)) reads as "columns at least 248px wide", and that is what it
   does, including when the container is 238px. The track cannot shrink, so the grid overflows its
   own box and the text inside it is cut off. It is invisible at every width anyone tests by hand
   and it appears at 320px, which is the width the reflow criterion is written at, and on a phone
   held at a larger text size. min(Npx,100%) says the same thing and also says "or the container,
   whichever is smaller", which is what was meant. This is a property of the value, so it belongs
   on every auto-fit grid rather than in a breakpoint that has to be remembered. */
.k-xref{margin:30px 0;padding:18px 20px;border:1px solid var(--rule);border-radius:var(--rcard);
  background:var(--surface)}
.k-xref-h{display:flex;align-items:center;gap:9px;margin:0;font-size:15px;font-weight:620;
  letter-spacing:-.014em;color:var(--navy)}
.k-xref-h .k-ic{color:var(--cobalt)}
.k-xref-n{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:62ch}
.k-xref-l{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr))}
.k-xref-l a{display:block;height:100%;padding:10px 11px;border-radius:var(--rsm);text-decoration:none;
  border:1px solid transparent;transition:background .15s,border-color .15s}
.k-xref-l a:hover{background:var(--paper);border-color:var(--rule)}
.k-xref-t{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:560;color:var(--navy)}
.k-xref-l a:hover .k-ic-a{opacity:1;transform:translateX(2px)}
.k-xref-d{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--ink-faint)}

/* FIGURE. First party diagrams, drawn as inline SVG in the page body so they are in the served
   HTML, need no script, no font file and no image request, and can be selected, zoomed and printed.
   There is no illustration library here and there is not going to be one: a visual earns its place
   by showing a mechanism a sentence cannot.

   The wrapper scrolls rather than shrinking. A diagram squeezed to 340px is a diagram nobody can
   read, so it keeps a legible minimum width and the container carries a focus stop, a region role
   and a name, exactly as the table wrappers do. */
.k-fig{margin:32px 0;padding:0}
.k-fig-w{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--rcard);background:var(--paper);
  padding:22px 24px}
.k-fig-w:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.k-dgm{display:block;width:100%;height:auto;min-width:520px;overflow:visible}
.k-fig-c{margin:11px 2px 0;font-size:13px;line-height:1.6;color:var(--ink-faint);max-width:68ch}
.k-fig-c b{color:var(--navy);font-weight:600}
/* One drawing vocabulary, so eighteen diagrams look like one system rather than eighteen. */
.k-dgm .d-box{fill:var(--surface);stroke:var(--rule-mid);stroke-width:1}
.k-dgm .d-box-a{fill:var(--cobalt-050);stroke:var(--cobalt-100);stroke-width:1}
.k-dgm .d-box-o{fill:none;stroke:var(--rule-mid);stroke-width:1;stroke-dasharray:4 4}
.k-dgm .d-gap{fill:none;stroke:var(--ink-subtle);stroke-width:1;stroke-dasharray:2 5}
.k-dgm .d-band{fill:var(--cobalt-050);stroke:none}
.k-dgm .d-band-o{fill:var(--surface-2);stroke:none}
.k-dgm .d-line{fill:none;stroke:var(--rule-mid);stroke-width:1.4;stroke-linecap:round}
.k-dgm .d-line-a{fill:none;stroke:var(--cobalt);stroke-width:1.6;stroke-linecap:round}
.k-dgm .d-rule{stroke:var(--rule);stroke-width:1}
.k-dgm .d-dot{fill:var(--cobalt)}
.k-dgm .d-dot-o{fill:var(--paper);stroke:var(--ink-subtle);stroke-width:1.4}
.k-dgm .d-t{font-family:var(--sans);font-size:13px;font-weight:560;fill:var(--navy);letter-spacing:-.01em}
.k-dgm .d-s{font-family:var(--sans);font-size:11.5px;font-weight:400;fill:var(--ink-faint)}
.k-dgm .d-k{font-family:var(--mono);font-size:9.5px;font-weight:600;fill:var(--ink-subtle);
  letter-spacing:.09em;text-transform:uppercase}
.k-dgm .d-n{font-family:var(--mono);font-size:12px;font-weight:600;fill:var(--navy);
  font-variant-numeric:tabular-nums}
.k-dgm .d-neg{fill:var(--ink-subtle)}
.k-dgm .d-mid{text-anchor:middle}
.k-dgm .d-end{text-anchor:end}

/* SHARE. Ours, on ordinary share URLs. The head control is a disclosure that never competes with
   the title. The end of article block is visible without being loud. */
.k-sh{position:relative;display:inline-block}
.k-sh-t{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  padding:4px 10px;border:1px solid var(--rule-mid);border-radius:99px;font-size:12.5px;color:var(--ink-soft);
  transition:background .15s,border-color .15s,color .15s}
.k-sh-t::-webkit-details-marker{display:none}
.k-sh-t::marker{content:""}
.k-sh-t:hover{background:var(--cobalt-050);border-color:var(--cobalt-100);color:var(--cobalt-dark)}
.k-sh[open] .k-sh-t{background:var(--cobalt-050);border-color:var(--cobalt-100);color:var(--cobalt-dark)}
.k-sh-p{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:186px;padding:6px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--rel);
  box-shadow:0 1px 2px rgba(16,22,35,.05),0 18px 44px -26px rgba(10,26,48,.45)}
.k-sh-a{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;
  border-radius:var(--rsm);background:none;font:inherit;font-size:14px;color:var(--ink-soft);text-align:left;
  text-decoration:none;cursor:pointer}
.k-sh-a:hover{background:var(--surface);color:var(--navy)}
.k-sh-a .k-ic{color:var(--ink-subtle)}
.k-sh-a:hover .k-ic{color:var(--cobalt)}
.k-shb{margin:44px 0 0;padding:22px 24px;border:1px solid var(--rule);border-radius:var(--rcard);
  background:var(--surface);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 24px}
.k-shb-h{margin:0;font-size:17px;font-weight:640;letter-spacing:-.018em;color:var(--navy)}
.k-shb-d{margin:5px 0 0;font-size:14px;line-height:1.55;color:var(--ink-faint);max-width:44ch}
.k-shb-r{display:flex;flex-wrap:wrap;gap:8px}
.k-shb-b{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;
  border:1px solid var(--rule-mid);background:var(--paper);font:inherit;font-size:13.5px;color:var(--ink-soft);
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.k-shb-b:hover{background:var(--cobalt-050);border-color:var(--cobalt-100);color:var(--cobalt-dark)}
.k-shb-b .k-ic{color:var(--ink-subtle)}
.k-shb-b:hover .k-ic{color:var(--cobalt)}
.k-shb-u{flex-basis:100%;margin:0;font-size:13px;color:var(--st-force-fg);min-height:1.2em}
/* The compact controls stay compact and their hit areas do not. A pill beside the article
   metadata should not grow to 44px and start competing with the title, so the target grows around
   it instead, vertically only, so two controls side by side never share a tap. */
.k-sh-t,.k-fact-sh{position:relative}
.k-sh-t::after,.k-fact-sh::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
.k-sh-a.is-done,.k-shb-b.is-done{color:var(--st-force-fg);border-color:var(--st-force-bg)}
.k-sh-a.is-done .k-ic,.k-shb-b.is-done .k-ic{color:var(--st-force-fg)}

@media (prefers-reduced-motion:reduce){
  .k-fact,.k-plain,.k-dec,.k-aud,.k-xref,.k-sh,.k-shb,.k-tlx{transition:none!important}
  .k-ic-a{transition:none!important}
}

/* A touch device gets comfortable targets whatever the viewport is. A tablet at 768 is not a
   desktop with a mouse, and the width alone does not say which one it is. */
@media (pointer:coarse){
  .k-shb-b,.k-xref-l a,.k-sh-a{min-height:44px}
  .k-shb-b,.k-sh-a{align-items:center}
}

@media (max-width:640px){
  .k-fig-w{padding:16px}
  .k-fact{padding:20px 18px}
  .k-fact-c{font-size:17px}
  .k-fact-f{align-items:flex-start;flex-direction:column;gap:12px}
  .k-plain{padding:17px 18px}
  .k-plain-t{font-size:16px}
  .k-dec-h,.k-dec-s,.k-dec-lim{padding-left:16px;padding-right:16px}
  .k-dec-o{padding-left:0}
  .k-aud-g,.k-aud-g.is-n4{grid-template-columns:minmax(0,1fr)}
  .k-shb{padding:18px;flex-direction:column;align-items:stretch}
  .k-shb-r{gap:8px}
  .k-shb-b{flex:1 1 auto;justify-content:center;min-height:44px}
  .k-sh-p{left:auto;right:0}
  .k-xref-l a{padding:11px;min-height:44px}

}
/* @@EDITORIAL_CSS_END@@ */

/* ---------- shell ---------- */
.k-shell{max-width:1320px;margin:0 auto;padding:0 28px;display:grid;
  grid-template-columns:var(--k-side) minmax(0,1fr) var(--k-toc);gap:44px;align-items:start}
.k-shell.is-wide{grid-template-columns:minmax(0,1fr);max-width:1120px}
.k-shell.is-notoc{grid-template-columns:var(--k-side) minmax(0,1fr);max-width:1160px}

/* ---------- the section rail ----------
   One definition, in one place. It is written here and reaches every destination in the estate
   through build/build.py, so a page added next month inherits it without being told to.

   Four rules hold it up and nothing later in this file may contradict them.

   1. Every family is a disclosure and says so before it is touched. The chevron points at a closed
      family and turns to point down into an open one. A reader should never have to click a thing
      to find out whether it had anything behind it.
   2. Nothing in the rail is ever filled with a colour. A filled block is a heavy signal, and using
      it for both the family and the page inside the family made two levels look like one level,
      which is the whole reason a reader could not tell where they were.
   3. Cobalt means one thing here: open, or here. An open family reads cobalt. The page you are on
      reads cobalt and carries an underline. That is the difference between the two levels, and it
      is carried by weight, size and a line rather than by a box.
   4. White space carries the hierarchy. The chevron has a gutter of its own, the family names sit
      on the rail's text edge, the pages sit under them behind a hairline, and the text never runs
      into the slider. */
.k-side{position:sticky;top:calc(var(--k-head) + 18px);max-height:calc(100vh - var(--k-head) - 36px);
  overflow-y:auto;overscroll-behavior:contain;font-size:13px;
  /* The left gutter holds the chevrons and hangs outside the column, so the text edge of the rail
     is exactly where it has always been. The right one is clear air between the last word and the
     slider. */
  margin-left:-26px;padding:28px 16px 40px 26px;
  scrollbar-width:thin;scrollbar-color:var(--rail-thumb) transparent}
.k-side::-webkit-scrollbar{width:11px}
.k-side::-webkit-scrollbar-track{background:transparent}
.k-side::-webkit-scrollbar-thumb{background:var(--rail-thumb);border-radius:11px;
  border:3.5px solid transparent;background-clip:content-box}
.k-side:hover::-webkit-scrollbar-thumb{background:var(--rail-thumb-hover)}

/* The one small label above the entrance. It is a label, so it stays a label. */
.k-side-h{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-subtle);margin:0 0 6px}
.k-side ul{list-style:none;margin:0;padding:0}
.k-side a{display:block;padding:2px 0;color:var(--ink-faint);line-height:1.4;font-size:12.5px;
  transition:color .14s var(--ease)}
.k-side a:hover{color:var(--ink)}
/* The page you are on. Weight and a line, no colour. Blue is spent once in this rail and it is
   spent on the open family, so the page a reader is standing on is marked by being the heaviest
   and darkest thing in its own list rather than by competing with its parent for the accent. */
.k-side a[aria-current="page"]{color:var(--ink);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}

/* ---------- a family, which is a disclosure ----------
   A details element, so it opens and closes with this site's JavaScript blocked and nothing here
   is waiting on a file to load. The native marker is removed and replaced by one chevron, because
   the marker is a different shape in every browser and this rail should look the same in all of
   them. */
.k-side-f{margin-top:26px}
.k-side-h.is-next{display:flex;align-items:flex-start;gap:2px;margin:0;cursor:pointer;
  list-style:none;
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:-.012em;
  text-transform:none;color:var(--ink-soft)}
.k-side-h.is-next::-webkit-details-marker{display:none}
.k-side-h.is-next::marker{content:""}
.k-side-tog{flex:none;width:24px;height:26px;margin-left:-26px;
  display:grid;place-items:center;color:var(--ink-subtle);
  transition:color .14s var(--ease)}
.k-side-h.is-next:hover .k-side-tog{color:var(--cobalt-dark)}
.k-side-cv{width:13px;height:13px;transition:transform .18s var(--ease)}
.k-side-f[open] .k-side-cv{transform:rotate(90deg)}
.k-side-h.is-next a{flex:1 1 auto;padding:4px 0;font-size:inherit;color:inherit}
.k-side-h.is-next:hover a{color:var(--ink)}
/* An open family reads cobalt, name and chevron together, so the cue and the label say the same
   thing. That is the whole of the highlight: no box, no fill. */
.k-side-f[open] > .k-side-h a,
.k-side-f[open] > .k-side-h:hover a{color:var(--cobalt-dark);font-weight:600}
.k-side-f[open] > .k-side-h .k-side-tog{color:var(--cobalt)}
/* The hairline runs under the chevron it belongs to, and the page names line up under the family
   name rather than being pushed off to one side of it. */
/* Three left edges, because indentation is the signal a reader sorts fastest and one shared edge
   for three ranks is no hierarchy at all. The family sits on the rail's text edge, the sub-section
   label steps in twelve, the pages step in twelve more. The rule is a bracket for the group and
   nothing more; it aligns with the family name it belongs to and it is not asked to carry the
   relationship on its own. */
.k-side-g{margin:6px 0 0;padding-left:11px;border-left:1px solid var(--rule)}
.k-side-g ul{padding-left:12px}
.k-side-s{margin:18px 0 4px;font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-subtle)}
.k-side-g > .k-side-s:first-child{margin-top:6px}

.k-side-note{margin-top:22px;font-size:11.5px;line-height:1.6;color:var(--ink-subtle)}

.k-main{min-width:0;padding:28px 0 96px}
.k-toc{position:sticky;top:calc(var(--k-head) + 18px);padding:30px 0 40px;font-size:12.5px}
.k-toc-h{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-subtle);margin:0 0 9px}
.k-toc ul{list-style:none;margin:0;padding:0}
.k-toc a{display:block;padding:4px 0 4px 11px;border-left:1.5px solid var(--rule);color:var(--ink-faint);line-height:1.45}
.k-toc a:hover{color:var(--ink)}
.k-toc a.on{border-left-color:var(--cobalt);color:var(--cobalt-dark);font-weight:540}

/* in-page list shown instead of the rail on narrower screens */
.k-toc-inline{display:none;border:1px solid var(--rule);border-radius:var(--rel);margin:0 0 30px;background:var(--surface)}
.k-toc-inline summary{cursor:pointer;padding:12px 16px;font-size:13px;font-weight:560;color:var(--navy)}
.k-toc-inline ul{list-style:none;margin:0;padding:0 16px 14px}
.k-toc-inline a{display:block;padding:5px 0;font-size:13.5px;color:var(--ink-soft);line-height:1.45}

/* ---------- breadcrumb ---------- */
.k-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:12px;color:var(--ink-faint);margin-bottom:18px}
.k-crumb ol{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.k-crumb li{display:flex;align-items:center;gap:7px}
.k-crumb a{border-bottom:1px solid transparent}
.k-crumb a:hover{color:var(--cobalt);border-bottom-color:var(--cobalt-100)}
.k-crumb i{font-style:normal;color:var(--rule-mid)}
.k-crumb [aria-current="page"]{color:var(--ink-soft)}

/* ---------- page head ---------- */
.k-ph{padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:34px}
.k-ph h1{font-size:clamp(29px,4vw,42px);letter-spacing:-.03em;line-height:1.07;font-weight:700}
.k-ph .k-def{margin-top:14px;font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:var(--k-read)}
.k-ph-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}

/* ---------- badges ---------- */
.k-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:5px;white-space:nowrap}
.k-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8;flex:none}
.k-badge.is-force{background:var(--st-force-bg);color:var(--st-force-fg)}
.k-badge.is-adopted{background:var(--st-adopted-bg);color:var(--st-adopted-fg)}
.k-badge.is-expected{background:var(--st-expected-bg);color:var(--st-expected-fg)}
.k-badge.is-indicative{background:var(--st-indicative-bg);color:var(--st-indicative-fg);border:1px dashed rgba(122,90,46,.45);padding:3px 7px}
.k-badge.is-reading{background:var(--st-reading-bg);color:var(--st-reading-fg)}
.k-badge.is-conflict{background:var(--st-conflict-bg);color:var(--st-conflict-fg)}
.k-badge.is-unknown{background:var(--st-unknown-bg);color:var(--st-unknown-fg)}
.k-badge.is-stale{background:var(--st-stale-bg);color:var(--st-stale-fg)}

/* ---------- dates ---------- */
.k-dates{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:11.5px;color:var(--ink-faint);line-height:1.7;margin:0}
.k-dates>div{display:flex;gap:6px}
.k-dates dt{color:var(--ink-subtle)}
.k-dates dd{margin:0;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}

/* ---------- sections ---------- */
.k-sec{margin-bottom:44px;scroll-margin-top:calc(var(--k-head) + 20px)}
.k-sec>h2{font-size:22px;letter-spacing:-.024em;margin-bottom:14px}
.k-sec>h3{font-size:16px;letter-spacing:-.02em;margin:26px 0 9px}
.k-sec p{font-size:15.5px;line-height:1.68;color:var(--ink-soft);max-width:var(--k-read);margin-bottom:13px}
.k-sec p:last-child{margin-bottom:0}
.k-sec ul,.k-sec ol{margin:0 0 14px;padding-left:20px;max-width:var(--k-read)}
/* Component lists are not prose. The reading measure applies to sentences, not to grids,
   evidence statements, passport rows, timeline entries or source entries. */
.k-sec .k-start,.k-sec .k-ev,.k-sec .k-pp,.k-sec .k-tl,.k-sec .k-src{max-width:none;padding-left:0}
.k-sec li{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin-bottom:7px}
.k-sec a.k-lnk,.k-panel a.k-lnk,.k-note a.k-lnk{color:var(--cobalt-dark);border-bottom:1px solid var(--cobalt-100)}
.k-sec a.k-lnk:hover,.k-panel a.k-lnk:hover,.k-note a.k-lnk:hover{border-bottom-color:var(--cobalt)}

/* An address outside this estate, cited inside the prose rather than only in the sources module.
   The first thirty four destinations reach every external address through the sources module, so
   there was no treatment for this until the registry cluster arrived carrying its citations inline.
   It is deliberately quieter than an internal link: the same underline, in the neutral rule colour
   rather than in cobalt, with a small mark after it so a reader knows before they click that this
   one leaves the site. The mark is drawn in CSS and carries aria-hidden by construction, because a
   screen reader announcing a bracket after every citation is worse than no mark at all. */
.k-sec a.k-ext,.k-panel a.k-ext,.k-note a.k-ext{color:var(--ink);border-bottom:1px solid var(--rule-mid)}
.k-sec a.k-ext:hover,.k-panel a.k-ext:hover,.k-note a.k-ext:hover{color:var(--cobalt-dark);
  border-bottom-color:var(--cobalt)}
.k-sec a.k-ext::after,.k-panel a.k-ext::after,.k-note a.k-ext::after{content:"";display:inline-block;
  width:.42em;height:.42em;margin:0 0 .32em .28em;vertical-align:baseline;
  border-top:1.4px solid var(--ink-subtle);border-right:1.4px solid var(--ink-subtle);
  transform:rotate(45deg);transition:border-color .14s var(--ease)}
.k-sec a.k-ext:hover::after{border-color:var(--cobalt)}
@media print{.k-sec a.k-ext::after{display:none}}
.k-lead{font-size:16.5px;line-height:1.62;color:var(--ink-soft)}


.k-law{border-left:2px solid var(--cobalt);background:var(--cobalt-050);border-radius:0 var(--rel) var(--rel) 0;
  padding:16px 20px;margin:0 0 16px;max-width:var(--k-read)}
.k-law p{font-size:15px;line-height:1.62;color:var(--navy);margin:0 0 9px}
.k-law cite{display:block;font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.02em;color:var(--cobalt-dark);line-height:1.6}

.k-note{border:1px solid #F0E2C4;background:#FDF9F1;border-radius:var(--rel);padding:15px 18px;margin:0 0 16px;
  max-width:var(--k-read)}
.k-note-h{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#8A6A3A;margin:0 0 7px}
.k-note p{font-size:14.5px;line-height:1.6;color:#5C4A2E;margin:0 0 9px}
.k-note p:last-child{margin-bottom:0}

.k-quote{font-size:19px;line-height:1.45;letter-spacing:-.02em;color:var(--navy);font-weight:620;
  border-left:2px solid var(--rule-mid);padding-left:18px;margin:26px 0;max-width:52ch}

/* ---------- tables ---------- */
.k-tw{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--rcard);margin:0 0 16px}
.k-tbl{border-collapse:collapse;width:100%;min-width:680px;font-size:13.5px}
.k-tbl caption{text-align:left;padding:14px 16px 0;font-size:12.5px;color:var(--ink-faint);line-height:1.6}
.k-tbl th,.k-tbl td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
.k-tbl thead th{font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;background:var(--surface-2);position:sticky;top:0}
.k-tbl tbody tr:last-child td,.k-tbl tbody tr:last-child th{border-bottom:none}
.k-tbl tbody th{font-weight:580;color:var(--navy);white-space:normal}
.k-tbl td.k-num{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:nowrap}
.k-tbl .k-mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.k-tbl.is-fixed{table-layout:fixed;min-width:720px}
.k-tbl.is-fixed th,.k-tbl.is-fixed td{padding:10px 12px;word-wrap:break-word}
.k-c1{width:17%}.k-c2{width:29%}.k-c3{width:15%}.k-c4{width:13%}.k-c5{width:16%}.k-c6{width:10%}

.k-lvl{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 7px;border-radius:5px;background:var(--surface-2);color:var(--ink-soft);white-space:nowrap}
.k-lvl.is-none{background:#F1F4F8;color:#7A8494}
.k-lvl.is-low{background:#E9F2E9;color:#41693F}
.k-lvl.is-med{background:#F5EEDE;color:#7A6428}
.k-lvl.is-high{background:#F8E9E4;color:#9A4B2C}
.k-lvl.is-block{background:#F1E6EC;color:#8A3560}
.k-lvl.is-unknown{background:#EEF1F5;color:#5C6779}

/* ---------- trust strip ---------- */
.k-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px;margin:0 0 16px}
.k-trust>div{border:1px solid var(--rule);border-radius:var(--rcard);padding:16px 18px;background:var(--surface)}
.k-trust-h{font-size:13.5px;font-weight:640;color:var(--navy);margin:0 0 6px}
.k-trust p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:none}

/* ---------- source list ---------- */
.k-src{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.k-src li{padding:14px 0;border-bottom:1px solid var(--rule)}
.k-src-t{font-size:14.5px;font-weight:560;color:var(--navy);line-height:1.5}
.k-src-m{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:5px;line-height:1.7;
  display:flex;flex-wrap:wrap;gap:4px 14px}
.k-src-n{font-size:13.5px;color:var(--ink-soft);margin-top:7px;line-height:1.6;max-width:var(--k-read)}
.k-src a{color:var(--cobalt-dark);border-bottom:1px solid var(--cobalt-100);word-break:break-word}
.k-src a:hover{border-bottom-color:var(--cobalt)}
.k-src-l{margin:9px 0 0}
.k-src-l a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:560;
  border-bottom:0;color:var(--cobalt-dark)}
.k-src-l a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.k-src-l a:hover{text-decoration:underline}

/* ---------- evidence statements ---------- */
.k-ev{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.k-ev li{border:1px solid var(--rule);border-radius:var(--rel);padding:14px 16px;background:#fff}
.k-ev-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.k-ev-h b{font-size:14px;font-weight:600;color:var(--navy)}
.k-ev p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:var(--k-read)}


.k-start{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:12px}
.k-start a{display:block;height:100%;border:1px solid var(--rule);border-radius:var(--rcard);padding:20px;background:#fff}
.k-start a:hover{border-color:var(--cobalt-400);background:var(--cobalt-050)}
.k-start-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-subtle);margin-bottom:9px}
.k-start-t{display:block;font-size:16px;font-weight:640;color:var(--navy);line-height:1.35}
.k-start-d{display:block;font-size:13.5px;color:var(--ink-faint);margin-top:8px;line-height:1.6}

/* ---------- timeline ---------- */
.k-tl{list-style:none;margin:0;padding:0}
.k-tl>li{position:relative;padding:0 0 26px 26px;border-left:1.5px solid var(--rule)}
.k-tl>li:last-child{border-left-color:transparent;padding-bottom:0}
.k-tl>li::before{content:"";position:absolute;left:-5.5px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:2px solid var(--rule-mid)}
.k-tl>li.is-force::before{border-color:var(--st-force-fg)}
.k-tl>li.is-adopted::before{border-color:var(--st-adopted-fg)}
.k-tl>li.is-expected::before{border-color:var(--st-expected-fg)}
.k-tl>li.is-indicative::before{border-color:var(--st-indicative-fg);border-style:dotted}
.k-tl>li.is-unknown::before{border-color:var(--st-unknown-fg)}
.k-tl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.k-tl-d{font-family:var(--mono);font-size:12px;color:var(--navy);font-weight:600}
.k-tl-d.is-none{color:var(--st-stale-fg);font-weight:500}
.k-tl-t{font-size:15px;font-weight:600;color:var(--navy);margin:0 0 5px;line-height:1.45}
.k-tl p{font-size:14px;line-height:1.62;color:var(--ink-soft);margin:0 0 6px;max-width:var(--k-read)}
.k-tl-m{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);letter-spacing:.02em;line-height:1.7;
  display:flex;flex-wrap:wrap;gap:2px 14px}

/* ---------- passport rows ---------- */
.k-pp{list-style:none;margin:0 0 20px;padding:0;border:1px solid var(--rule);border-radius:var(--rcard);overflow:hidden}
.k-pp>li{padding:16px 18px;border-bottom:1px solid var(--rule);background:#fff}
.k-pp>li:last-child{border-bottom:none}
.k-pp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.k-pp-f{font-size:14.5px;font-weight:620;color:var(--navy)}
.k-pp-v{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--surface-2);
  border-radius:5px;padding:3px 8px;display:inline-block;word-break:break-word}
.k-pp-v.is-empty{color:var(--st-stale-fg);background:#F7F3EC}
.k-pp-n{font-size:13.5px;line-height:1.62;color:var(--ink-soft);margin:6px 0 0;max-width:var(--k-read)}
.k-pp-grp{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-subtle);margin:26px 0 10px}

/* ---------- footer ---------- */
.k-ft{border-top:1px solid var(--rule);background:var(--surface);padding:38px 0 46px;margin-top:20px}
/* Three explicit columns. The old rule repeated an auto-fit track after the brand column, which
   was harmless while the footer had four children and collapsed the brand column to a word per
   line once it had three. Explicit tracks cannot do that. */
.k-ft-in{max-width:1320px;margin:0 auto;padding:0 28px;display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:30px 40px}
.k-ft p{font-size:13px;line-height:1.65;color:var(--ink-faint);max-width:46ch;margin:0 0 10px}
.k-ft h2{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-subtle);margin:0 0 9px}
.k-ft ul{list-style:none;margin:0;padding:0}
.k-ft li{margin-bottom:6px}
.k-ft a{font-size:13px;color:var(--ink-soft)}
.k-ft a:hover{color:var(--cobalt-dark)}
.k-ft-note{grid-column:1/-1;border-top:1px solid var(--rule-mid);padding-top:18px;font-size:12px;
  color:var(--ink-faint);line-height:1.65;max-width:80ch}
/* The page above the one you are on. Darker than its neighbours and no more than that: it is not
   where you are, so it does not get the mark for where you are, and it is not the open family, so
   it does not get the accent either. */
.k-side a.is-parent{color:var(--ink);font-weight:560}
.k-side a.is-parent::after{content:"";display:inline-block;width:4px;height:4px;margin-left:7px;
  border-radius:50%;background:var(--ink-subtle);vertical-align:middle}
.k-ft-hint{margin-top:10px;font-size:11.5px;line-height:1.55;color:var(--ink-subtle);max-width:30ch}


/* ---------- responsive ---------- */
@media (max-width:1160px){
  .k-shell{grid-template-columns:var(--k-side) minmax(0,1fr);gap:36px;max-width:1000px}
  .k-toc{display:none}
  .k-toc-inline{display:block}
}
@media (max-width:900px){
  /* The section navigation stays in the page and stays reachable with no JavaScript.
     It collapses to one compact band of links so a direct landing reaches its own h1
     without scrolling past a menu. Group labels drop because every link names itself. */
  .k-shell,.k-shell.is-notoc{grid-template-columns:minmax(0,1fr);max-width:760px;gap:0}
  .k-side{position:static;max-height:none;overflow:visible;
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;
    margin-left:0;padding:16px 0 14px;border-bottom:1px solid var(--rule);margin-bottom:6px}
  /* One band of links, so a direct landing reaches its own h1 without scrolling past a menu. The
     disclosure is a desktop idea: there is no rail to slide, the family names are gone, and a
     chevron with nothing to point at would be a control that lies. The family wrapper and its
     group flatten into the band, and a family that is closed stays closed here too, which is what
     this surface has always shown. */
  .k-side-h,.k-side-h.is-next{display:none}
  .k-side-tog,.k-side-s{display:none}
  .k-side-f,.k-side-g{display:contents}
  .k-side-f:not([open]) .k-side-g{display:none}
  .k-side ul{display:contents}
  .k-side li{display:block}
  .k-side a{margin-left:0;padding:5px 10px;font-size:12.5px;
    border:1px solid var(--rule);border-radius:var(--rsm)}
  .k-side-note{flex-basis:100%;margin:4px 0 0}
  .k-hdr-in{padding:10px 20px;flex-wrap:wrap;gap:10px 16px}
  .k-nav{margin-left:0;width:100%;gap:16px;flex-wrap:wrap;align-items:flex-start}
  .k-res{width:100%;order:3}
  /* @@RESOURCES_CSS_STACKED_START@@ */
  .k-res-p{position:static;width:auto;border:0;border-top:1px solid var(--rule);
    border-radius:0;box-shadow:none;padding:12px 0 2px}
  .k-res-p::before{display:none}
  .k-res-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .k-res-know{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:14px}
  .k-res-lbl{margin-left:10px}
  .k-res-cols{column-count:1}
  .k-res-fd{max-width:none}
  /* Comfortable tap targets. 44px is the smallest a thumb should have to hit, and the compact
     desktop row is 30. */
  .k-res-d{padding:11px 10px;font-size:15px;min-height:44px}
  .k-res-feat{padding:12px 10px}
  .k-res-foot{margin-top:12px}
  /* @@RESOURCES_CSS_STACKED_END@@ */
  .k-res.is-on>summary::before{right:auto;width:52px}
  .k-shell{padding:0 20px}
  .k-ft-in{padding:0 20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 26px}
}
@media (max-width:640px){
  .k-ph h1{font-size:28px}
  .k-hero{padding:34px 0 26px}
  .k-sec>h2{font-size:20px}
  .k-sec p,.k-sec li{font-size:15px}
  .k-panel{padding:16px 17px}
  .k-tbl{min-width:560px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media print{
  .k-hdr,.k-side,.k-toc,.k-toc-inline,.k-ft{display:none}
  .k-shell{display:block;max-width:none;padding:0}
  body{font-size:11pt}
  .k-tw{overflow:visible;border:none}
  .k-tbl{min-width:0}
}

/* ---------- small utilities used by the shell, no inline styles anywhere ---------- */
.k-ft-lead{margin-top:12px}

/* ================================================================================================
   UX PASS 01. Discovery, continuation, orientation and reading progress.
   Written once here and reaching every destination through build/build.py and build/chrome.py.
   Cobalt is reserved for one meaning across all of it: something is navigable, active or changing.
   ================================================================================================ */

/* --- Knowledge search ---------------------------------------------------------------------------
   The entrance is compact and stays compact. It is a link until script upgrades it, so a reader with
   JavaScript blocked still reaches a real destination that filters the estate without script. */
.k-find{margin:14px 0 4px}
.k-find-fb{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-faint);
  text-decoration:none;padding:7px 0}
.k-find-fb::before{content:"";width:13px;height:13px;flex:none;border:1.5px solid currentColor;
  border-radius:50%;box-shadow:2.5px 2.5px 0 -1px currentColor;transform:translateY(-1px)}
.k-find-fb:hover{color:var(--cobalt-dark)}
.k-find.is-on .k-find-fb{display:none}

.k-find-w{position:relative}
.k-find-in{width:100%;box-sizing:border-box;font-family:var(--sans);font-size:12.5px;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:8px;
  padding:8px 10px 8px 30px;transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
.k-find-in::placeholder{color:var(--ink-subtle)}
.k-find-in:hover{border-color:var(--rule-mid)}
.k-find-in:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-050)}
.k-find-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;
  border:1.5px solid var(--ink-subtle);border-radius:50%;box-shadow:2.5px 2.5px 0 -1px var(--ink-subtle);
  pointer-events:none}
.k-find-in:focus~.k-find-ic{border-color:var(--cobalt);box-shadow:2.5px 2.5px 0 -1px var(--cobalt)}
.k-find-hint{display:block;margin:6px 0 0;font-size:10.5px;color:var(--ink-subtle);letter-spacing:.02em}

/* The results surface. It grows out of the rail rather than covering the page, because the reader
   is orienting, not leaving. */
.k-find-p{position:absolute;z-index:60;top:calc(100% + 7px);left:0;width:min(430px,84vw);
  background:var(--paper);border:1px solid var(--rule);border-radius:11px;
  box-shadow:0 1px 2px rgba(16,22,35,.05),0 22px 48px -22px rgba(16,22,35,.35);
  padding:6px;max-height:min(64vh,520px);overflow-y:auto;overscroll-behavior:contain}
.k-find-p[hidden]{display:none}
.k-find-lbl{margin:8px 10px 4px;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-subtle)}
.k-find-r{display:block;padding:8px 10px;border-radius:7px;text-decoration:none;color:inherit}
.k-find-r:hover,.k-find-r.is-on{background:var(--cobalt-050)}
.k-find-r.is-on{outline:none}
.k-find-rt{display:block;font-size:13px;font-weight:560;color:var(--navy);line-height:1.35}
.k-find-rs{display:block;margin-top:1px;font-size:11.5px;color:var(--cobalt-dark)}
.k-find-rd{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-faint);line-height:1.45}
.k-find-r mark{background:var(--cobalt-100);color:inherit;border-radius:2px;padding:0 1px}
.k-find-none{padding:12px 10px;font-size:12.5px;color:var(--ink-faint)}
.k-find-none a{color:var(--cobalt-dark)}

/* --- On this page, as a navigation system -------------------------------------------------------
   The label is cobalt because it is the control. The section names stay quiet because they are the
   contents. The rail fills from the top of the article to wherever the reader is now, and contracts
   again when they scroll back: it answers where am I, not how far did I once get. */
.k-toc-h{margin:0 0 9px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cobalt)}
.k-toc ul{position:relative}
.k-toc-fill{position:absolute;left:0;top:0;width:1.5px;background:var(--cobalt);height:0;
  transition:height .22s var(--ease);pointer-events:none}
.k-toc a{transition:color .14s var(--ease),border-color .14s var(--ease)}
.k-toc a.is-read{color:var(--ink-faint)}
.k-toc a.on{border-left-color:transparent;color:var(--cobalt-dark);font-weight:560}

/* --- Page level reading progress ---------------------------------------------------------------
   One hairline under the header. It is the overall position, not the structure: the rail above is
   the structural system and this is deliberately quieter than it. */
.k-prog{position:fixed;top:var(--k-head);left:0;right:0;height:1.5px;z-index:45;pointer-events:none;opacity:.85}
.k-prog i{display:block;height:100%;width:0;background:var(--cobalt);transition:width .1s linear}

/* --- The continuation module -------------------------------------------------------------------
   The answer finished. The journey does not have to. It sits between the article and the sources
   and it reads as a continuation of the page rather than a widget bolted to the bottom of it. */
.k-next{margin:52px 0 0;padding:30px 0 0;border-top:1px solid var(--rule)}
.k-next-h{margin:0;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cobalt)}
.k-next-lead{margin:7px 0 20px;font-size:14px;color:var(--ink-faint);max-width:52ch}
.k-next-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.k-next-a{display:block;padding:13px 14px 13px 15px;margin-left:-15px;border-radius:9px;
  text-decoration:none;position:relative;transition:background .14s var(--ease)}
.k-next-a::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1.5px;
  background:var(--rule);transition:background .14s var(--ease)}
.k-next-a:hover{background:var(--surface)}
.k-next-a:hover::before{background:var(--cobalt)}
.k-next-a:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.k-next-t{display:block;font-size:15.5px;font-weight:560;color:var(--navy);line-height:1.35}
.k-next-a:hover .k-next-t{color:var(--cobalt-dark)}
.k-next-d{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-faint);line-height:1.5;
  max-width:60ch}

/* --- Back to the top ---------------------------------------------------------------------------
   It appears only once a reader has travelled far enough for it to be worth having, and it is a
   link in the flow of the page rather than a button floating over the text. */
.k-top{margin:34px 0 0;font-size:12.5px}
.k-top a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-faint);text-decoration:none;
  padding:8px 2px;transition:color .14s var(--ease)}
.k-top a:hover{color:var(--cobalt-dark)}
.k-top svg{width:13px;height:13px}

/* --- Typography. Interface labels are not data ---------------------------------------------------
   Monospace stays where the content is literally machine text: identifiers, numeric table columns
   and timeline dates. The metadata line under the article title and the panel tag were set in it to
   look technical, which made the interface read as a developer tool rather than as an editorial
   product. They move to the text face and keep tabular figures so the numbers still line up. */
.k-dates dd{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0}

@media(max-width:900px){
  .k-find-p{position:static;width:auto;max-height:none;box-shadow:none;margin-top:8px}
  .k-prog{display:none}
  .k-next{margin-top:40px;padding-top:26px}
}
@media(prefers-reduced-motion:reduce){
  .k-toc-fill,.k-prog i,.k-next-a,.k-next-a::before,.k-find-in,.k-toc a,.k-top a{transition:none}
}

/* The entrance page has no rail, so the search entrance sits under the standfirst instead. Same
   component, same behaviour, one place where it is wider because it has the room. */
.k-find-wide{max-width:430px;margin:0 0 34px}
.k-find-wide .k-find{margin:0}

/* --- UX pass 01, corrections found by looking at the render --------------------------------------
   Three defects the measurements could not see. */

/* 1. The rail scrolls its own overflow, which clipped the results panel at the column edge. The
   panel is anchored to the field in the viewport instead, so it escapes the scroll context
   entirely rather than the rail giving up the scrolling it needs on a long estate. */
.k-find-p{position:fixed;top:auto;left:auto}

/* 2. The live region announcing the result count was rendering as visible text under the field,
   because the class it used was never defined. It is for screen readers only. */
.k-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* 3. The keyboard hint sat under the field where the panel then covered it. It belongs to the
   resting state and goes away once the reader is actually searching. */
.k-find.is-open .k-find-hint{visibility:hidden}

/* The rail's own type, colour, disclosure and spacing are defined once, in the rail
   block near the top of this file. Nothing about it is set here. */


/* ================================================================================================
   THE KNOWLEDGE FOUNDATION. Batch A.

   Everything below is a component the estate did not have, or a defect in one it did. Nothing here
   replaces a pattern that already works: the callout, the plain English translation, the decision
   module, the timeline, the figure, the table, the source module, the provenance line, the
   cross reference and the continuation block all stay exactly as they are, because forty two pages
   already read well with them.

   Three rules govern every addition.

   1. A component earns a visual treatment only when the information has a shape that prose cannot
      carry. Everything else is typography. This file already had five component families nothing
      used, and this block is not going to add more.
   2. Cobalt means navigable, active or changing. It is not spent on decoration and it is never the
      only carrier of a meaning. Every state here is also stated in words.
   3. One idea, one component. Three of the patterns the brief asked for are the same shape with
      different labels, and they are built once, as the ladder, rather than three times.
   ================================================================================================ */

/* --- The defect ---------------------------------------------------------------------------------
   The authoring contract offers <code class="k-mono"> for an inline address or code fragment, and
   eleven of them exist across two destinations and the not found page. It was only ever styled
   inside a table, so every one of those rendered at the browser's default monospace size, which
   next to 17px body text is noticeably small and sits on the wrong baseline. */
.k-sec .k-mono,.k-note .k-mono,.k-disc-b .k-mono,p .k-mono,li .k-mono{
  font-family:var(--mono);font-size:.86em;letter-spacing:-.01em;
  background:var(--surface-2);border-radius:4px;padding:.1em .34em;color:var(--ink)}

/* --- Example ------------------------------------------------------------------------------------
   USE WHEN an abstract rule needs one concrete instance to become checkable.
   DO NOT USE for a hypothetical customer, a made up figure or an outcome nobody has observed.
   A rule and a marker, not a card. An example is part of the argument, not an aside from it. */
.k-ex{border-left:2px solid var(--rule-mid);padding:2px 0 2px 18px;margin:0 0 18px;
  max-width:var(--k-read)}
.k-ex p.k-ex-h{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.5;margin:0 0 6px}
.k-ex p{font-size:15.5px;line-height:1.62;color:var(--ink-soft);margin:0 0 10px}
.k-ex p:last-child{margin-bottom:0}
.k-ex b{color:var(--ink);font-weight:600}

/* --- Uncertainty ---------------------------------------------------------------------------------
   USE WHEN what is not settled changes what a reader should do next.
   DO NOT USE as a disclaimer, a hedge or a legal cushion. If the uncertainty does not change a
   decision it belongs in a sentence, or nowhere.
   The rule is dashed. That is the whole visual idea: this is the one thing on the page that is not
   yet drawn solid. It is not a colour, so it survives greyscale, print and colour blindness, and
   the label says the same thing in words. */
.k-watch{border-left:2px dashed var(--ink-subtle);padding:2px 0 2px 18px;margin:0 0 18px;
  max-width:var(--k-read)}
.k-watch p.k-watch-h{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.5;margin:0 0 6px}
.k-watch p{font-size:15.5px;line-height:1.62;color:var(--ink-soft);margin:0 0 10px}
.k-watch p:last-child{margin-bottom:0}
.k-watch-w{display:block;margin-top:8px;font-size:13px;color:var(--ink-faint)}

/* --- The ladder ----------------------------------------------------------------------------------
   One component, three jobs, because they are one shape.

     k-lad.is-fia   Fact, then Interpretation, then Action
     k-lad.is-rpo   The rule, then in plain English, then operationally
     k-lad.is-ev    An evidence ladder, strongest support at the top

   The shape is a sequence of labelled steps where the order carries meaning and the boundary
   between steps is the point. It is the estate's central editorial rule made visible: prose can
   slide from what an instrument says to what a business should do without anybody noticing, and a
   ladder cannot, because the step boundary is drawn.

   No fill, no card. A hairline between steps and a label on each. */
.k-lad{margin:0 0 20px;max-width:var(--k-read);border-top:1px solid var(--rule)}
.k-lad-s{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0 20px;
  padding:14px 0;border-bottom:1px solid var(--rule)}
.k-lad-l{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:3px}
.k-lad-b{min-width:0}
.k-lad-b p{font-size:15.5px;line-height:1.62;color:var(--ink-soft);margin:0 0 9px}
.k-lad-b p:last-child{margin-bottom:0}
.k-lad-b b{color:var(--ink);font-weight:600}
/* The last step of a fact ladder is the one a reader acts on, so it is the one that is not grey. */
.k-lad.is-fia .k-lad-s:last-child .k-lad-b p,
.k-lad.is-rpo .k-lad-s:last-child .k-lad-b p{color:var(--ink)}
.k-lad.is-fia .k-lad-s:last-child .k-lad-l,
.k-lad.is-rpo .k-lad-s:last-child .k-lad-l{color:var(--cobalt-dark)}
/* An evidence ladder ranks, so its steps are numbered and the strength is stated, never implied by
   position alone. */
.k-lad.is-ev .k-lad-l{color:var(--ink-faint)}
.k-lad-n{color:var(--ink-faint)}
.k-lad-n{display:block;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink-subtle);
  line-height:1}

/* --- Before and after ---------------------------------------------------------------------------
   USE WHEN the reader's problem is the difference between two states of the same thing.
   DO NOT USE for a comparison of two different things. That is a table.
   Two panels with a hairline between them, and the direction stated in words for a screen reader
   rather than drawn with an arrow a screen reader cannot see. */
.k-ba{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 20px;max-width:var(--k-read);
  border:1px solid var(--rule);border-radius:var(--rcard);overflow:hidden}
.k-ba-c{padding:16px 18px;min-width:0}
.k-ba-c + .k-ba-c{border-left:1px solid var(--rule);background:var(--surface)}
.k-ba-h{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px}
.k-ba-c + .k-ba-c .k-ba-h{color:var(--cobalt-dark)}
.k-ba p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 8px}
.k-ba p:last-child{margin-bottom:0}
.k-ba ul{margin:0;padding-left:17px}
.k-ba li{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-bottom:5px}

/* --- Disclosure, in the body ---------------------------------------------------------------------
   USE WHEN a reader who wants the method, the derivation or the edge cases should be able to get
   them without every other reader paying for them.
   DO NOT USE to hide anything the central answer depends on. Progressive disclosure is an
   information design tool. It is not a way to make a page look shorter.
   A details element, so it opens with this site's JavaScript blocked, answers Enter and Space, and
   is announced as expanded or collapsed without a line of script. The same chevron as the section
   rail, because a reader should only have to learn one open and close cue on this estate. */
.k-disc{border:1px solid var(--rule);border-radius:var(--rcard);margin:0 0 18px;
  max-width:var(--k-read);background:var(--paper)}
.k-disc-h{display:flex;align-items:flex-start;gap:10px;cursor:pointer;list-style:none;
  padding:13px 16px;font-size:14.5px;font-weight:560;color:var(--ink);letter-spacing:-.008em}
.k-disc-h::-webkit-details-marker{display:none}
.k-disc-h::marker{content:""}
.k-disc-h:hover{color:var(--cobalt-dark)}
.k-disc-cv{flex:none;width:13px;height:13px;margin-top:3px;color:var(--ink-subtle);
  transition:transform .18s var(--ease),color .14s var(--ease)}
.k-disc[open] .k-disc-cv{transform:rotate(90deg);color:var(--cobalt)}
.k-disc[open] .k-disc-h{border-bottom:1px solid var(--rule);color:var(--cobalt-dark)}
.k-disc-b{padding:14px 16px 4px}
.k-disc-b p{font-size:15px;line-height:1.62;color:var(--ink-soft);margin:0 0 11px}
.k-disc-b .k-tw,.k-disc-b .k-lad{margin-bottom:14px}

/* --- Definitions ---------------------------------------------------------------------------------
   No tooltip. A tooltip is a hover affordance on a product half of whose readers are on a phone,
   it hides the thing it is explaining behind an interaction, and it is the single most common way a
   documentation site makes itself harder to read while believing it has helped.
   So a term is glossed in place, the first time it is used, in the sentence itself. The mark is a
   dotted underline, which says this word has been given a meaning here, and the meaning is already
   on the screen. Where a page genuinely needs several, they collect into a terms list. */
.k-dfn{font-style:normal;border-bottom:1px dotted var(--ink-subtle)}
.k-dfn-g{color:var(--ink-faint)}
.k-terms{margin:0 0 20px;max-width:var(--k-read);border-top:1px solid var(--rule)}
.k-terms-r{display:grid;grid-template-columns:170px minmax(0,1fr);gap:0 20px;padding:12px 0;
  border-bottom:1px solid var(--rule)}
.k-terms dt{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.008em}
.k-terms dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* --- Responsive ----------------------------------------------------------------------------------
   Every one of the above is designed for the narrow column rather than left to a media query to
   rescue. The ladder and the terms list drop their label column above the content instead of
   squeezing it. Before and after stacks, and the hairline moves from the side to the top so the
   sequence still reads as a sequence. */
@media (max-width:900px){
  .k-lad-s,.k-terms-r{grid-template-columns:minmax(0,1fr);gap:6px 0}
  .k-lad-l,.k-terms dt{padding-top:0}
  .k-ba{grid-template-columns:minmax(0,1fr)}
  .k-ba-c + .k-ba-c{border-left:0;border-top:1px solid var(--rule)}
  .k-ex,.k-watch{padding-left:14px}
  .k-disc-h{padding:12px 14px}
  .k-disc-b{padding:12px 14px 2px}
}

/* --- Motion ---------------------------------------------------------------------------------------
   The only motion in this block is the chevron. A reader who has asked for less of it gets none. */
@media (prefers-reduced-motion:reduce){
  .k-disc-cv{transition:none}
}

/* --- Print -----------------------------------------------------------------------------------------
   A printed page has no interaction, so a disclosure that is closed on screen is open on paper: the
   alternative is handing somebody a document with a heading and nothing under it. Panels lose their
   fills, which cost ink and carry no meaning the labels do not already carry, and the ladder keeps
   its rules because the rules are the component. */
@media print{
  .k-disc-b{display:block !important}
  .k-disc-cv{display:none}
  .k-disc,.k-ba{border-color:#bbb;break-inside:avoid}
  .k-ba-c + .k-ba-c{background:none;border-color:#bbb}
  .k-lad-s,.k-ex,.k-watch,.k-terms-r{break-inside:avoid}
  .k-sec .k-mono,p .k-mono,li .k-mono{background:none;padding:0}
}

/* ================================================================================================
   KNOWLEDGE UX INFRASTRUCTURE. Batch B.

   Navigational and discovery machinery. Nothing here is a new component: Batch A settled what an
   article is made of and this is how a reader moves through it, finds it and leaves it for the
   right next thing. The article stays the protagonist, so every rule below is quiet by default and
   appears when it is useful.
   ================================================================================================ */

/* --- Deep linkable headings ---------------------------------------------------------------------
   Sections have carried an id and a scroll margin since Wave 1. Sub headings now carry both, so a
   reader can be sent to a point inside a long section rather than to the top of it.

   The affordance is a hash that appears on hover and on keyboard focus, and is permanently visible
   at low contrast on a device with no hover, because a touch reader cannot reveal it. It is never
   a chain icon sitting beside every heading on the page. */
.k-sec h3{scroll-margin-top:calc(var(--k-head) + 20px)}
/* The mark is small on purpose. The thing you click is not.

   Drawn at .62em the glyph is about thirteen pixels, which is right for a mark that sits beside a
   heading without competing with it and wrong for anything anyone has to hit. The first attempt at
   this made the anchor an inline-flex box with a 24px floor, and that box joins the heading's line
   box and grew every h2 in the estate from 25px to 26px. A pseudo-element does the same job and
   takes part in no layout at all: it is centred on the glyph, it is part of the anchor's hit
   region because it is the anchor's own box, and the heading is laid out to the pixel as it was
   before the anchor existed. */
.k-anch{position:relative;margin-left:.4em;font-family:var(--mono);font-size:.62em;font-weight:400;
  color:var(--ink-subtle);opacity:0;text-decoration:none;vertical-align:middle;
  transition:opacity .14s var(--ease),color .14s var(--ease);padding:0 .2em;border-radius:4px}
.k-anch::after{content:"";position:absolute;right:0;top:50%;width:24px;height:24px;
  transform:translateY(-50%)}
.k-sec h2:hover .k-anch,.k-sec h3:hover .k-anch,.k-anch:focus-visible{opacity:1}
.k-anch:hover{color:var(--cobalt-dark)}
.k-anch.is-done{opacity:1;color:var(--cobalt-dark)}
/* No hover to reveal it with, so it is always there and always quiet. Keyed to width as well as to
   pointer, because a narrow window on a laptop is the shape a reader is in even when the browser
   still reports a mouse, and a hidden affordance that only some phones reveal is worse than one
   that is always there. */
@media (hover:none),(max-width:900px){
  .k-anch{opacity:.45;padding:.2em .35em;margin-left:.25em}
  .k-anch::after{width:28px;height:28px}
}
@media print{.k-anch{display:none}}

/* --- The contents rail, on a phone ---------------------------------------------------------------
   Not the desktop rail with things hidden. A closed disclosure that says which section you are in,
   which is the one fact a reader on a phone actually wants from a table of contents, and which the
   desktop rail gives away for free by being visible. */
.k-toc-inline summary{list-style:none;display:flex;align-items:center;gap:10px}
.k-toc-inline summary::-webkit-details-marker{display:none}
.k-toc-inline summary::marker{content:""}
.k-toc-inline .k-toc-now{flex:1 1 auto;min-width:0;font-weight:400;color:var(--ink-faint);
  font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-toc-inline .k-toc-cv{flex:none;width:12px;height:12px;color:var(--ink-subtle);
  transition:transform .18s var(--ease)}
.k-toc-inline[open] .k-toc-cv{transform:rotate(90deg)}
.k-toc-inline a.on{color:var(--cobalt-dark);font-weight:560}
.k-toc-inline a.is-read{color:var(--ink-subtle)}
/* A wide page has no side column, so its contents disclosure is the only contents there is and
   stays visible at every width rather than only on a phone. It sits at the reading measure, not
   the full width of the page, because a list of five items stretched across 1120px is a worse
   thing to scan than the same list at 430px. */
.k-toc-inline.is-only{display:block;max-width:560px}

/* --- Search, on a touch device -------------------------------------------------------------------
   A keyboard hint on a device with no keyboard is noise, and the field has to be a real touch
   target rather than a rail sized input. */
@media (hover:none),(max-width:900px){
  /* A keyboard hint on a device with no keyboard is noise. 16px on the field is what stops iOS
     zooming the whole page when it is focused, and 44px is a real touch target. */
  .k-find-hint{display:none}
  .k-find-in{min-height:44px;font-size:16px}
  .k-find-r{padding-top:11px;padding-bottom:11px}
}
.k-find-p{max-width:calc(100vw - 24px)}
.k-find-sug{margin:0;padding:11px 12px 12px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.k-find-sug b{color:var(--ink);font-weight:600}
.k-find-sug button{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--cobalt-dark);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.k-find-why{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-subtle)}