/* Self-hosted IBM Plex. Served from this domain so no visitor data reaches a
   third party -- loading fonts from Google transmits the visitor's IP address,
   which a German court has found can breach the GDPR without consent.
   Subset to the characters this site actually uses: 57KB for four faces. */
/* Metric-matched fallback. Measured from the real font files: IBM Plex Sans
   has a 0.516 x-height against Arial's 0.519, and 78/22 ascent/descent. With
   these overrides the fallback occupies near-identical space, so the swap to
   the web font causes no layout shift on a slow connection. */
@font-face{
  font-family:"Plex Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:99.4%;ascent-override:78%;descent-override:22%;line-gap-override:0%;
}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500.woff2) format("woff2")}

:root{
  --rail:13.5rem;
  --railgap:4rem;
  --page:#ffffff;
  --surface:#fafafb;      /* barely-there fill for tables and keys */
  --hair:#e6e7eb;         /* hairline */
  --hair-soft:#eff0f3;
  --ink:#15181f;
  --ink-2:#5b6271;        /* secondary text, 5.5:1 on white */
  --ink-3:#6b7280;      /* labels only. 4.83:1 on white, 4.63:1 on the footer fill -- clears WCAG AA at both */
  --accent:#1b4dbe;       /* deep blue, 7:1 on white */
  --accent-tint:#f4f7fe;
  --amber:#8a5300;
  --amber-tint:#fdf8f0;
  --col:43rem;            /* reading measure, used by main AND breadcrumbs */
  --gut:clamp(18px,5vw,60px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font:400 clamp(1rem,.35vw + .944rem,1.047rem)/1.7 "IBM Plex Sans","Plex Fallback",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3{letter-spacing:-.02em;font-weight:600}
h1,h2,h3,[id]{scroll-margin-top:78px}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:#b9c7ea}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--ink);color:#fff;padding:10px 14px;z-index:30;border-radius:4px}

/* ---------- header ---------- */
.top{
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  padding:15px max(var(--gut),env(safe-area-inset-left)) 15px max(var(--gut),env(safe-area-inset-right));
  border-bottom:1px solid var(--hair);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);
  position:sticky;top:0;z-index:20;
}
.brand{
  font-weight:600;font-size:1.0312rem;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:8px;letter-spacing:-.02em;
}
.brand .thin{font-weight:400;color:var(--ink-3)}
.brand .dot{
  width:11px;height:11px;border:1px dashed var(--accent);
  border-radius:1px;display:inline-block;flex:0 0 auto;
}
.topnav{display:flex;gap:22px;flex-wrap:wrap;font-size:0.9062rem}
.topnav a{color:var(--ink-2);text-decoration:none}
.topnav a:hover{color:var(--accent)}

/* ---------- breadcrumbs ---------- */
.crumbs{
  max-width:calc(var(--col) + 2*var(--gut));margin:0 auto;
  padding:18px var(--gut) 0;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
  font-size:0.8125rem;color:var(--ink-3);
}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs a::after{content:"/";color:#d6d8de;padding:0 7px;display:inline-block}

/* ---------- shell ---------- */
main{
  max-width:calc(var(--col) + 2*var(--gut));margin:0 auto;padding:0 var(--gut) 88px;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
}
article{max-width:none}
h1{font-size:clamp(1.8125rem,4vw,2.625rem);line-height:1.14;margin:22px 0 16px}
.lede{font-size:1.1875rem;line-height:1.6;color:var(--ink-2);margin:0 0 34px;max-width:58ch}
h2{font-size:clamp(1.25rem,2.2vw,1.5rem);margin:52px 0 14px;line-height:1.25;padding-top:2px}
h3{font-size:1.0625rem;margin:32px 0 6px;line-height:1.35}
p{margin:0 0 18px}
ul,ol{margin:0 0 20px;padding-left:20px}
li{margin-bottom:9px}
li::marker{color:var(--ink-3)}
strong{font-weight:600}
code{
  font:500 .88em/1.5 "IBM Plex Mono",ui-monospace,monospace;
  background:var(--surface);border:1px solid var(--hair);
  padding:1px 5px;border-radius:3px;
  overflow-wrap:break-word;word-break:break-word;
}
/* long shell commands and registry paths must never widen the page */
p code,li code{display:inline-block;max-width:100%}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
figure{margin:0 0 26px}

/* ---------- keycaps: the one piece of ornament ---------- */
kbd{
  font:500 0.8125rem/1 "IBM Plex Mono",ui-monospace,monospace;
  display:inline-block;padding:5px 7px 6px;min-width:12px;text-align:center;
  background:var(--page);
  border:1px solid #d5d8e0;
  border-bottom:2px solid #c3c7d2;
  border-radius:4px;color:var(--ink);white-space:nowrap;vertical-align:1px;
}

/* ---------- inline code: registry paths, terminal commands ---------- */
code{
  font:500 .88em/1.5 "IBM Plex Mono",ui-monospace,monospace;
  background:var(--surface);border:1px solid var(--hair);border-radius:3px;
  padding:.1em .35em;color:var(--ink);
  overflow-wrap:anywhere;word-break:break-word;
}
ol.steps code,ul code,p code{hyphens:none}

.pagemeta{
  margin:-18px 0 30px;font-size:0.8438rem;color:var(--ink-3);
}

/* ---------- answer panel ---------- */
.marquee{
  border:1px dashed #c6d2ee;border-left:3px solid var(--accent);
  border-radius:0 4px 4px 0;
  background:#fafbfe;
  padding:18px 22px 4px;margin:0 0 38px;
}
.marquee-label{margin:0 0 12px;font-size:0.8125rem;font-weight:500;color:var(--accent)}
.combos{list-style:none;margin:0;padding:0}
.combos li{
  display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
  padding:11px 0;margin:0;border-top:1px solid #dfe6f7;
}
.combos li:first-child{border-top:0;padding-top:0}
.combo{flex:0 0 auto;min-width:184px}
.what{color:var(--ink-2);font-size:0.9375rem;flex:1 1 240px}

/* ---------- callouts ---------- */
.note,.warn{
  border-left:2px solid var(--accent);background:var(--accent-tint);
  padding:14px 20px;margin:0 0 24px;font-size:0.9688rem;color:var(--ink-2);
}
.note :last-child,.warn :last-child{margin-bottom:0}
.warn{border-left-color:#c98a1e;background:var(--amber-tint)}
.warn strong{color:var(--amber)}

/* ---------- numbered walkthrough ---------- */
.walklist{list-style:none;padding:0;counter-reset:s;margin:0}
.walklist li{
  counter-increment:s;position:relative;padding:0 0 26px 42px;margin:0;
  border-left:1px solid var(--hair);
}
.walklist li:last-child{border-left-color:transparent;padding-bottom:0}
.walklist li::before{
  content:counter(s);position:absolute;left:-13px;top:-1px;
  width:25px;height:25px;border-radius:50%;
  background:var(--page);border:1px solid var(--hair);color:var(--accent);
  font:500 0.7812rem/23px "IBM Plex Mono",monospace;text-align:center;
}
.walklist h3{margin:0 0 4px}
.walklist p{margin:0;color:var(--ink-2);font-size:0.9688rem}

/* ---------- tables ---------- */
.scroll{overflow-x:auto;margin:0 0 28px;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair)}
table{border-collapse:collapse;width:100%;font-size:0.9375rem;min-width:min(440px,100%)}
th,td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--hair-soft);vertical-align:top}
th{font-weight:500;font-size:0.8125rem;color:var(--ink-3);padding-top:11px;padding-bottom:11px}
td:last-child,th:last-child{padding-right:0}
tbody tr:last-child td{border-bottom:0}

/* ---------- faq ---------- */
.faq{max-width:none}
details{border-bottom:1px solid var(--hair)}
details:first-of-type{border-top:1px solid var(--hair)}
summary{
  cursor:pointer;font-weight:500;padding:17px 32px 17px 0;font-size:1.0rem;
  list-style:none;position:relative;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:6px;top:26px;
  width:8px;height:8px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg);
}
details[open] summary::after{transform:rotate(-135deg);top:28px}
summary:hover{color:var(--accent)}
summary:hover::after{border-color:var(--accent)}
details>div{padding:0 0 18px;color:var(--ink-2);font-size:0.9688rem;max-width:60ch}
details p:last-child{margin-bottom:0}

/* ---------- link lists: hairline rows, not cards ---------- */
.cardlist,.hub{
  list-style:none;padding:0;margin:0 0 8px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  column-gap:40px;
}
.cardlist li,.hub li{margin:0;border-top:1px solid var(--hair)}
.cardlist a,.hub a{
  display:block;padding:14px 0;color:var(--accent);
  font-size:0.9688rem;font-weight:500;
  text-decoration:none;
}
.cardlist a:hover,.hub a:hover{text-decoration:underline;text-underline-offset:3px}
.hub{margin-bottom:30px}

.related{margin-top:68px;max-width:none}
.related h2{
  font-size:0.8125rem;font-weight:500;color:var(--ink-3);letter-spacing:0;
  margin:0 0 4px;
}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--hair);background:var(--surface);
  padding:46px var(--gut) calc(40px + env(safe-area-inset-bottom));
}
.footgrid{
  max-width:1080px;margin:0 auto;display:grid;gap:36px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.fhead{font-weight:500;font-size:0.8125rem;margin:0 0 12px;color:var(--ink-3)}
.foot ul{list-style:none;padding:0;margin:0;font-size:0.9062rem}
.foot li{margin-bottom:9px}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--accent)}
.fine a{
  /* underlined, not colour-only: WCAG 1.4.1 requires links inside a block of
     text to be distinguishable without relying on colour */
  color:var(--accent);text-decoration:underline;text-underline-offset:2px;
}
.fine{
  max-width:calc(var(--col) + 2*var(--gut));margin:38px auto 0;font-size:0.8125rem;color:var(--ink-3);
  border-top:1px solid var(--hair);padding-top:20px;
}

/* ============ tablet: 1024px and below ============ */
@media (max-width:1024px){
  :root{--col:40rem}
  .top{gap:24px}
  .topnav{gap:18px;font-size:0.875rem}
}

/* ============ small tablet / large phone: 760px and below ============ */
@media (max-width:760px){
  :root{--col:100%;--gut:clamp(18px,5vw,32px)}
  body{font-size:1.0312rem}
  h1{font-size:clamp(1.6875rem,7vw,2.125rem)}
  h2{font-size:clamp(1.1875rem,4.6vw,1.375rem);margin-top:44px}
  .lede{font-size:1.0938rem;max-width:none}
  /* one-row scrollable nav keeps the answer near the top of the screen */
  .top{gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:nowrap;overflow:hidden}
  .brand{flex:0 0 auto}
  .topnav{
    flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;gap:20px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{white-space:nowrap;padding:10px 0}    /* ~44px tap target with line-height */
  .crumbs{padding-top:14px;font-size:0.8438rem}
  /* single-column link lists, comfortable tap height */
  .cardlist,.hub{grid-template-columns:1fr;column-gap:0}
  .cardlist a,.hub a{padding:15px 0}
  .foot li{margin-bottom:4px}
  .foot a{display:inline-block;padding:7px 0}
  summary{padding:18px 34px 18px 0}
}

/* ============ phone: 560px and below ============ */
@media (max-width:560px){
  body{font-size:1.0rem}
  main{padding-bottom:64px}
  h1{margin-top:16px;line-height:1.16}
  .lede{margin-bottom:26px}
  /* answer panel: keys on one line, meaning beneath */
  .marquee{padding:16px 18px 4px;border-radius:0 3px 3px 0}
  .combo{min-width:0;flex:1 1 100%}
  .combos li{gap:4px;padding:12px 0}
  .what{flex:1 1 100%;font-size:0.9375rem}
  /* tables become stacked records — no sideways scrolling on a phone */
  .scroll{overflow:visible;border:0;border-top:1px solid var(--ink)}
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tr{border-bottom:1px solid var(--hair);padding:12px 0}
  tbody tr:last-child{border-bottom:0}
  /* label sits in a left gutter; cell content stays in normal inline flow
     so multi-key combinations keep their keycaps on one line */
  td{
    display:block;position:relative;border:0;
    padding:4px 0 4px 7.4em;width:auto;min-height:1.6em;
  }
  td[data-label]::before{
    content:attr(data-label);
    position:absolute;left:0;top:7px;width:6.6em;
    font-size:0.7188rem;line-height:1.4;font-weight:500;color:var(--ink-3);
  }
  td:not([data-label]){padding-left:0}
  /* steps: reclaim the indent */
  .walklist li{padding-left:34px;padding-bottom:22px}
  .walklist li::before{left:-12px;width:23px;height:23px;line-height:21px;font-size:0.75rem}
  .note,.warn{padding:13px 16px}
  .related{margin-top:52px}
}

/* ============ very small phones: 360px and below ============ */
@media (max-width:360px){
  :root{--gut:16px}
  td{padding-left:6.3em}
  td[data-label]::before{width:5.7em}
  body{font-size:0.9688rem}
  h1{font-size:1.5625rem}
  kbd{padding:4px 5px 5px;font-size:0.75rem}
  code{font-size:.84em}
  .topnav{gap:16px}
}

/* ============ touch input, at ANY width ============ */
/* Tablets are 768-1024px wide but finger-driven, so tap sizing keys off the
   pointer rather than the viewport. Inline prose links are left alone --
   padding them would wreck the line rhythm. */
@media (pointer:coarse){
  .topnav a{padding:11px 0}
  .crumbs{font-size:0.875rem}
  .crumbs a{display:inline-block;padding:7px 0}
  .cardlist a,.hub a{padding:15px 0;min-height:44px}
  .foot li{margin-bottom:2px}
  .foot a{display:inline-block;padding:10px 0;min-height:42px}
  summary{padding-top:19px;padding-bottom:19px}
  .fine a{
  /* underlined, not colour-only: WCAG 1.4.1 requires links inside a block of
     text to be distinguishable without relying on colour */
  color:var(--accent);text-decoration:underline;text-underline-offset:2px;
}
.fine{font-size:0.8438rem}
}

/* ============ short viewports (phone landscape) ============ */
@media (max-height:480px) and (orientation:landscape){
  .top{position:static}   /* don't spend scarce vertical space on a sticky bar */
}

@media print{
  .top,.topnav,.related,.foot,.crumbs{display:none}
  body{font-size:11pt}
  .marquee{border:1px solid #999;background:none}
  details{border:0}details>div{display:block!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ================= CONTENTS RAIL =================
   A two-column documentation layout on wide screens. Below 1100px the rail is
   removed entirely rather than stacked -- a contents list above the article
   pushes the answer off the screen, which defeats the point of the site. */
.rail{display:none}
.rail-h{
  margin:0 0 12px;font-size:0.7812rem;font-weight:500;color:var(--ink-3);
  padding-bottom:10px;border-bottom:1px solid var(--hair);
}
.rail nav ul{list-style:none;margin:0;padding:0}
.rail nav li{margin:0}
.rail nav a{
  display:block;padding:6px 0;font-size:0.875rem;line-height:1.4;
  color:var(--ink-2);text-decoration:none;
  border-left:2px solid transparent;padding-left:12px;margin-left:-14px;
}
.rail nav a:hover{color:var(--accent);border-left-color:var(--accent)}

@media (min-width:1100px){
  main{
    max-width:calc(var(--col) + var(--rail) + var(--railgap) + 2*var(--gut));
    display:grid;
    grid-template-columns:minmax(0,var(--col)) var(--rail);
    column-gap:var(--railgap);
    align-items:start;
  }
  .crumbs{max-width:calc(var(--col) + var(--rail) + var(--railgap) + 2*var(--gut))}
  article{grid-column:1;max-width:none}
  .faq{max-width:none}
  .related,.pager{grid-column:1}   /* not 1/-1: the sticky rail would overlap it */
  .rail{
    display:block;grid-column:2;grid-row:1;
    position:sticky;top:94px;
    max-height:calc(100vh - 130px);overflow-y:auto;
    scrollbar-width:thin;
  }
}

@media print{
  .rail{display:none}
}


/* ================= TOUCH REFINEMENTS =================
   Everything below is keyed off pointer:coarse rather than viewport width,
   because a 1024px iPad is finger-driven while a 1024px laptop window is not. */
@media (pointer:coarse){
  /* the three controls that fell short of the 44px minimum */
  .brand{padding:8px 0}
  .crumbs{line-height:2.1}
  .crumbs a{display:inline-block;padding:9px 0}
  .skip:focus{padding:13px 18px}

  /* replace the default blue flash with something that matches the palette */
  a,summary{-webkit-tap-highlight-color:rgba(27,77,190,.12)}

  /* a touch more room between stacked link rows so neighbours aren't mis-tapped */
  .cardlist a,.hub a{padding-top:16px;padding-bottom:16px}
}


/* ---------- shareable section anchors ---------- */
h2{position:relative}
.anchor{
  position:absolute;left:-1.1em;top:0;
  color:var(--ink-3);text-decoration:none;font-weight:400;
  opacity:0;transition:opacity .12s;
}
h2:hover .anchor,.anchor:focus-visible{opacity:1}
.anchor:hover{color:var(--accent)}
@media (max-width:1099px){
  /* no hover on touch, and no room in the gutter */
  .anchor{display:none}
}

/* ---------- prev / next within a silo ---------- */
.pager{
  display:flex;gap:1rem;flex-wrap:wrap;
  margin:3.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--hair);
}
.pager a{
  flex:1 1 15rem;display:block;padding:.9rem 1.1rem;
  border:1px solid var(--hair);border-radius:4px;
  text-decoration:none;color:var(--ink);font-weight:450;font-size:.97rem;
}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager span{
  display:block;font-size:.78rem;color:var(--ink-3);
  font-weight:500;margin-bottom:.15rem;
}
.pg-next{text-align:right}

/* ---------- footer: legal links as one inline row ---------- */
.footlegal{
  max-width:calc(var(--col) + var(--rail) + var(--railgap) + 2*var(--gut));
  margin:2.25rem auto 0;padding-top:1.25rem;
  border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.35rem 1.35rem;font-size:.9rem;
}
.footlegal a{color:var(--ink-2);text-decoration:none}
.footlegal a:hover{color:var(--accent);text-decoration:underline}
@media (pointer:coarse){.footlegal a{padding:.45rem 0}}