/* A white document, deliberately single-theme: it should look the same on a
     screen, in an email, and on paper. Hierarchy comes from weight, size and
     hairline rules, not from colour. */
  :root {
    --paper: #ffffff;
    --ink: #111111;
    --ink-soft: #4a4a4a;
    --ink-faint: #8b8b8b;
    --rule: #d8d8d8;
    --rule-strong: #111111;
    --wash: #f3f3f3;

    --sans: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  }

  * { box-sizing: border-box; }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }

  .sheet {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.25rem 1.75rem 4rem;
  }

  /* ---------- language switch: plain text, no chrome ---------- */
  .langbar {
    display: flex; justify-content: flex-end; align-items: baseline;
    gap: 0.5rem; margin-bottom: 2.25rem;
  }
  .langbar button {
    font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-faint); background: none; border: 0; padding: 0;
    cursor: pointer;
  }
  .langbar button[aria-pressed="true"] {
    color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
  }
  .langbar button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
  .langbar .sep { color: var(--rule); font-size: 0.78rem; }

  /* ---------- masthead ---------- */
  .masthead { border-bottom: 2px solid var(--rule-strong); padding-bottom: 1.4rem; }
  .eyebrow {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.7rem;
  }
  h1 {
    font-size: clamp(1.75rem, 4.2vw, 2.3rem); font-weight: 700;
    line-height: 1.14; letter-spacing: -0.017em; margin: 0 0 0.75rem;
    text-wrap: balance;
  }
  .lede { font-size: 1.06rem; color: var(--ink-soft); margin: 0; max-width: 34rem; }

  /* ---------- sections ---------- */
  h2 {
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--ink-faint);
    margin: 2.5rem 0 0; padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--rule);
  }
  h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 0.35rem; letter-spacing: -0.004em; }
  p { margin: 0 0 0.7rem; }
  p:last-child { margin-bottom: 0; }
  .soft { color: var(--ink-soft); }

  /* ---------- inline devices ---------- */
  .cmd {
    font-family: var(--mono); font-weight: 600; font-size: 0.86em;
    border: 1px solid var(--ink); padding: 0.06em 0.36em;
    white-space: nowrap; letter-spacing: 0.01em;
  }
  .fn {
    font-family: var(--mono); font-size: 0.86em; color: var(--ink-soft);
    white-space: nowrap;
  }

  /* ---------- numbered steps ---------- */
  .steps { margin-top: 0.4rem; }
  .step {
    display: grid; grid-template-columns: 2.9rem 1fr;
    gap: 0 0.9rem; align-items: start;
    padding: 1.3rem 0; border-bottom: 1px solid var(--rule);
  }
  .num {
    font-size: 1.7rem; font-weight: 300; line-height: 1;
    color: var(--ink-faint); font-variant-numeric: tabular-nums;
    padding-top: 0.1rem;
  }
  .step p { font-size: 0.985rem; color: var(--ink-soft); }

  .filelist { margin: 0.55rem 0 0.7rem; }
  .filelist div {
    display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem;
    padding: 0.32rem 0; border-top: 1px solid var(--rule);
    font-size: 0.93rem;
  }
  .filelist div:last-child { border-bottom: 1px solid var(--rule); }
  .filelist em { font-style: normal; color: var(--ink-faint); }

  /* ---------- tables ---------- */
  .scroll { overflow-x: auto; margin-top: 1.1rem; }
  table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
  th {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--ink-faint); text-align: left;
    padding: 0 1rem 0.5rem 0; border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
  }
  td {
    padding: 0.68rem 1rem 0.68rem 0; border-bottom: 1px solid var(--rule);
    vertical-align: top; color: var(--ink-soft);
  }
  td:first-child { color: var(--ink); }
  td:last-child, th:last-child { padding-right: 0; }
  .act { font-weight: 600; color: var(--ink); white-space: nowrap; }
  .ro { color: var(--ink-faint); white-space: nowrap; font-size: 0.9rem; }
  .caption { font-size: 0.9rem; color: var(--ink-faint); margin-top: 0.8rem; }

  /* ---------- two rule columns ---------- */
  .rules {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.2rem;
    margin-top: 1.15rem;
  }
  .rules > div:first-child { border-right: 1px solid var(--rule); padding-right: 2.2rem; }
  .rules h3 {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink); margin-bottom: 0.6rem;
  }
  .rules ul { margin: 0; padding-left: 1.05rem; }
  .rules li { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 0.45rem; }
  .rules li:last-child { margin-bottom: 0; }
  @media (max-width: 34rem) {
    .rules { grid-template-columns: 1fr; gap: 1.4rem; }
    .rules > div:first-child {
      border-right: 0; padding-right: 0;
      border-bottom: 1px solid var(--rule); padding-bottom: 1.4rem;
    }
  }

  /* ---------- trailing matter ---------- */
  .colophon {
    margin-top: 2.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
    font-size: 0.9rem; color: var(--ink-faint);
  }
  .draftnote { font-size: 0.87rem; color: var(--ink-faint); margin-top: 0.7rem; }
  .sig {
    margin-top: 2.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
    font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ink-faint); text-align: center;
  }

  /* ---------- print, which is the same document ---------- */
  @page { margin: 18mm; }
  @media print {
    body { font-size: 10pt; }
    .sheet { max-width: none; padding: 0; }
    .langbar { display: none; }
    h1 { font-size: 18pt; }
    .num { color: #777; }
    .step, .rules, table, .filelist { break-inside: avoid; page-break-inside: avoid; }
  }

  /* ---------- additions: contact card, scenario rows, paths ---------- */
  .contact {
    margin-top: 1.2rem; border: 1.5px solid var(--rule-strong); padding: 1rem 1.2rem;
  }
  .contact .label {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 0.45rem;
  }
  .contact .who { font-weight: 600; font-size: 1.02rem; margin-bottom: 0.2rem; }
  .contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .contact a:hover { border-bottom-color: var(--ink); }
  .contact .lines { display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; font-size: 0.97rem; }
  .contact .when { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.55rem; }
  .path {
    font-family: var(--mono); font-size: 0.84em; color: var(--ink);
    background: var(--wash); padding: 0.05em 0.35em; word-break: break-all;
  }
  .case { padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
  .case h3 { margin-bottom: 0.25rem; }
  .case .why { font-size: 0.93rem; color: var(--ink-faint); margin-bottom: 0.45rem; }
  .case ol, .case ul { margin: 0.2rem 0 0; padding-left: 1.2rem; }
  .case li { font-size: 0.96rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
  .case li:last-child { margin-bottom: 0; }
  .toc { margin: 1.1rem 0 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
  .toc li { font-size: 0.94rem; padding: 0.18rem 0; break-inside: avoid; }
  .toc a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .toc a:hover { color: var(--ink); border-bottom-color: var(--ink); }
  .note {
    margin-top: 1rem; padding: 0.75rem 1rem; background: var(--wash);
    font-size: 0.93rem; color: var(--ink-soft);
  }
  .crosslink { margin-top: 0.4rem; font-size: 0.92rem; }
  .crosslink a { color: var(--ink); }
  @media (max-width: 34rem) { .toc { columns: 1; } }
  @media print { .contact, .case { break-inside: avoid; page-break-inside: avoid; } .toc { display: none; } }

:root{--ink:#142c43;--ink-soft:#354d63;--ink-faint:#556b7d;--rule:#d6e0e8;--wash:#f0f5f9;--font:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--mono:Consolas,monospace}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7}a{color:#005c91;text-underline-offset:3px}a:focus-visible{outline:3px solid #0079b8;outline-offset:5px}h1{font-size:clamp(2rem,4vw,3rem);line-height:1.2;letter-spacing:-.035em;margin:.5rem 0 1rem}h2{font-size:1.45rem;margin-top:2.6rem;scroll-margin-top:6rem}h3{font-size:1.08rem}.skip{position:absolute;top:-80px;background:white;padding:12px;z-index:10}.skip:focus{top:8px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4vw;border-bottom:1px solid var(--rule);background:#fff}.brand{display:flex;align-items:center;gap:14px;color:var(--ink);font-weight:650;text-decoration:none}.brand-mark{display:grid;place-items:center;background:#123b59;color:#fff;letter-spacing:.04em;font-size:14px;width:49px;height:43px;border-radius:5px}.header-actions{display:flex;align-items:center;gap:20px}.version{font-family:var(--mono);background:#eaf3f9;border:1px solid #cddfea;padding:3px 10px;border-radius:4px;text-decoration:none;font-size:14px}.language{font-size:14px}.layout{display:grid;grid-template-columns:260px minmax(0,900px);max-width:1320px;margin:auto;gap:54px;padding:38px 4vw}.sidebar{align-self:start;position:sticky;top:24px}.nav-label{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ink-faint);margin:0 0 18px}.sidebar nav{display:grid;gap:5px}.sidebar a{padding:10px 14px;font-size:15px;line-height:1.5;text-decoration:none;border-left:3px solid transparent;color:var(--ink-soft)}.sidebar a:hover{background:#f0f5f9}.sidebar a[aria-current]{background:#eaf3f9;border-color:#0075aa;color:#004b75;font-weight:650}main{min-width:0}.page-heading{border-bottom:1px solid var(--rule);padding:0 0 20px;margin-bottom:26px}.eyebrow{color:#476578;font-size:12px;letter-spacing:.14em}.lede{font-size:1.12rem;max-width:720px}.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}.topic-card{display:flex;align-items:baseline;gap:18px;padding:22px 18px;border:1px solid var(--rule);border-radius:6px;text-decoration:none;line-height:1.5}.topic-card:hover{border-color:#0075aa;background:#f4f9fc}.chapter{font-family:var(--mono);font-size:13px;color:#58788f}.releases{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:6px;margin-top:30px;background:#f4f8fb}.releases>div{display:grid;gap:7px;padding:22px}.releases>div+div{border-left:1px solid var(--rule)}.release-label{font-size:14px;color:var(--ink-soft)}.releases strong{font-size:1.35rem;font-family:var(--mono)}.releases a{font-size:14px}.caption,.note,.soft,.case li{font-size:1rem}.scroll{overflow-x:auto}table{width:100%;font-size:.95rem}.contact{margin-top:40px}.contact .when{font-size:1rem}.site-footer{border-top:1px solid var(--rule);padding:24px 0;margin-top:48px;font-size:14px;color:var(--ink-faint)}.site-footer a{display:block;margin-top:8px}.colophon{font-size:1rem}.path,.fn,.cmd{overflow-wrap:anywhere}body .toc{columns:2}p,li{overflow-wrap:anywhere}
@media(max-width:850px){.layout{grid-template-columns:1fr;gap:28px;padding:24px 5vw}.sidebar{position:static}.sidebar nav{grid-template-columns:1fr 1fr;gap:4px}.nav-label{margin-bottom:10px}.site-header{padding:14px 5vw}.brand>span:last-child{font-size:14px}.header-actions{gap:12px}.version{font-size:12px}.topic-card{padding:17px 12px;gap:10px}}
@media(max-width:430px){.topic-grid,.releases{grid-template-columns:1fr}.releases>div+div{border-left:0;border-top:1px solid var(--rule)}.brand>span:last-child{max-width:90px;line-height:1.3}.sidebar a{font-size:14px;padding:8px}body .toc{columns:1}}
@media print{.sidebar,.site-header,.skip{display:none}.layout{display:block;padding:0}main{max-width:none}.site-footer{display:none}h2,h3{break-after:avoid}.case{break-inside:avoid}}