/* ==========================================================================
   Generated by reinstallos/build.py — do not edit dist/ directly.
   Part 1/2: InstallShelf base stylesheet (shared design tokens).
   Part 2/2: ReinstallOS additions (see assets/guide.css).
   ========================================================================== */

/* ==========================================================================
   InstallShelf — stylesheet
   Single-page software directory. Light theme, system fonts, no frameworks.
   ========================================================================== */

:root {
  --bg:            #f6f7f9;
  --surface:       #ffffff;
  --surface-alt:   #eef1f5;
  --text:          #0f1620;
  --text-muted:    #5a6673;
  --text-faint:    #8b95a1;
  --border:        #e2e6ec;
  --border-strong: #ccd3dc;
  --accent:        #2f5cff;
  --accent-ink:    #1d3fd1;
  --accent-wash:   #eef2ff;
  --sponsored:     #a45c00;
  --sponsored-wash:#fff6e6;
  --pick:          #0b7a5a;
  --pick-wash:     #e8f7f1;
  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     18px;
  --shadow-sm:     0 1px 2px rgba(15, 22, 32, .05);
  --shadow:        0 4px 16px -4px rgba(15, 22, 32, .10), 0 1px 3px rgba(15, 22, 32, .05);
  --shadow-lg:     0 18px 40px -16px rgba(15, 22, 32, .22);
  --maxw:          1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header -------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 24px;
  min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; color: var(--text);
  letter-spacing: -.01em; text-decoration: none; flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(140deg, #2f5cff, #6b8cff);
  display: grid; place-items: center;
  color: #fff; font-size: 15px; font-weight: 800; line-height: 1;
}
.brand small {
  display: block; font-weight: 500; font-size: 11px;
  color: var(--text-faint); letter-spacing: .04em; text-transform: uppercase;
  margin-top: -2px;
}

.header-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.header-nav a {
  padding: 7px 12px; border-radius: 999px; font-size: 14px;
  color: var(--text-muted); font-weight: 500; white-space: nowrap;
}
.header-nav a:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }

/* A link to the sister site, which answers on its own hostname. Tinted so it
   reads as "this one leaves the directory" rather than as another section of
   it — and so a reader who lands on the reinstall guide still knows how they
   got there. */
.header-nav a.nav-alt { color: var(--accent-ink); background: var(--accent-wash); }
.header-nav a.nav-alt:hover { background: #e3e9ff; color: var(--accent-ink); }

/* ---------- Search -------------------------------------------------------- */

.search-bar { padding: 18px 0 0; }
.search-field { position: relative; max-width: 560px; margin: 0 auto; }
.search-field input {
  width: 100%; padding: 14px 16px 14px 46px;
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.search-field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.search-field svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: var(--text-faint); pointer-events: none;
}
.search-hint {
  text-align: center; font-size: 13px; color: var(--text-faint);
  margin: 8px 0 0; min-height: 20px;
}

/* ---------- Hero ---------------------------------------------------------- */

.hero { padding: 40px 0 8px; text-align: center; }
.hero h1 {
  font-size: clamp(28px, 4.6vw, 44px); line-height: 1.16;
  letter-spacing: -.025em; margin: 0 0 16px; font-weight: 800;
}
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero p.lede {
  font-size: clamp(15px, 1.7vw, 18px); color: var(--text-muted);
  max-width: 640px; margin: 0 auto 26px;
}

.promises {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin: 0 auto 8px; padding: 0; list-style: none;
}
.promises li {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px 7px 11px;
  font-size: 13.5px; font-weight: 500; color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.promises li b { color: var(--text); font-weight: 650; }
.promises svg { width: 15px; height: 15px; flex: 0 0 auto; }

.disclaimer-note {
  max-width: 620px; margin: 22px auto 0; padding: 12px 16px;
  font-size: 13px; line-height: 1.55; color: var(--text-muted);
  background: var(--surface-alt); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.disclaimer-note strong { color: var(--text); }

/* ---------- Sections ------------------------------------------------------ */

section { padding: 46px 0 6px; }
.section-head { margin-bottom: 22px; }
.section-head h2 {
  font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -.02em;
  margin: 0 0 6px; font-weight: 750;
}
.section-head p { margin: 0; color: var(--text-muted); font-size: 15px; max-width: 720px; }
.eyebrow {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 9px;
}

/* ---------- Ad slots ------------------------------------------------------ */

.ad-slot {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(45deg, #fbfcfd, #fbfcfd 10px, #f4f6f9 10px, #f4f6f9 20px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-faint); font-size: 12px; line-height: 1.5;
  margin: 34px auto; padding: 10px;
}
.ad-slot span { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.ad-leaderboard { min-height: 96px; max-width: 970px; }
.ad-rectangle   { min-height: 254px; max-width: 336px; }
.ad-inline      { min-height: 96px; max-width: 728px; }
.ad-slot em { font-style: normal; display: block; opacity: .75; margin-top: 3px; }

/* ---------- Scenario cards ------------------------------------------------ */

.scenario-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
@media (max-width: 900px) {
  .scenario-grid { grid-template-columns: 1fr; }
}
.scenario {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.scenario:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-strong); }
.scenario h3 {
  margin: 0 0 8px; font-size: 18px; letter-spacing: -.015em; font-weight: 700;
}
.scenario .lede { margin: 0 0 14px; font-size: 14.5px; color: var(--text-muted); }
.scenario .order {
  margin: 0 0 18px; padding: 11px 13px; font-size: 13px; line-height: 1.5;
  background: var(--accent-wash); border-radius: var(--radius-sm);
  color: var(--text-muted); border-left: 3px solid var(--accent);
}
.scenario .order b { color: var(--text); font-weight: 650; }
.scenario-list {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  counter-reset: step;
}
.scenario-list li { counter-increment: step; }
.scenario-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 550; color: var(--text);
}
.scenario-list a:hover { background: var(--surface-alt); text-decoration: none; }
.scenario-list a::before {
  content: counter(step);
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-family: var(--mono);
  background: var(--surface-alt); color: var(--text-faint);
}
.scenario-list .mini-tile {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
}
.scenario-list .mini-tile img { width: 15px; height: 15px; object-fit: contain; }
.scenario-list .mono-mini {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.scenario-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-faint);
}

/* ---------- Category navigation ------------------------------------------- */

.cat-nav {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 20px 0 4px; margin-bottom: 4px;
}
.cat-nav a {
  font-size: 13.5px; font-weight: 550; padding: 6px 13px;
  border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.cat-nav a:hover, .cat-nav a.is-active {
  background: var(--text); border-color: var(--text); color: #fff; text-decoration: none;
}

/* ---------- Category blocks ----------------------------------------------- */

.category { padding: 30px 0 4px; scroll-margin-top: 90px; }
.category-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.category-head h3 {
  margin: 0; font-size: 20px; letter-spacing: -.018em; font-weight: 750;
}
.category-head .count {
  font-size: 12px; font-weight: 650; color: var(--text-faint);
  background: var(--surface-alt); padding: 2px 9px; border-radius: 999px;
  font-family: var(--mono);
}
.category-head p {
  flex: 1 1 100%; margin: 0; font-size: 14.5px; color: var(--text-muted);
  max-width: 760px;
}

.card-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

/* ---------- Software card ------------------------------------------------- */

.card {
  position: relative;
  display: flex; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.card:hover {
  box-shadow: var(--shadow); border-color: var(--border-strong); transform: translateY(-1px);
}
.card.is-filtered { display: none; }

.card-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 11px;
  background: #fff; border: 1px solid var(--border);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.card-icon img { width: 27px; height: 27px; object-fit: contain; }
.card-icon .mono {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; letter-spacing: -.03em; color: #fff;
}

.card-body { min-width: 0; flex: 1 1 auto; }
.card-title-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 3px;
}
.card-title-row h4 {
  margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.012em;
}
.card-note {
  margin: 7px 0 11px; font-size: 13.8px; line-height: 1.58; color: var(--text-muted);
}
.card-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.card-meta {
  font-size: 11.5px; color: var(--text-faint); font-family: var(--mono);
  letter-spacing: -.01em;
}
.card-plat { display: flex; gap: 5px; margin-left: auto; }
.card-plat span {
  font-size: 10.5px; font-weight: 650; letter-spacing: .03em;
  color: var(--text-faint); background: var(--surface-alt);
  border-radius: 4px; padding: 2px 6px; text-transform: uppercase;
}
.card-cta {
  flex: 1 1 100%; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--accent-ink);
  margin-top: 2px;
}
.card-cta svg { width: 13px; height: 13px; fill: currentColor; }
.card-cta:hover { text-decoration: underline; }

.badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  text-transform: uppercase;
}
.badge-pick { background: var(--pick-wash); color: var(--pick); }
.badge-sponsored { background: var(--sponsored-wash); color: var(--sponsored); }

.sponsored-flag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sponsored);
  border: 1px solid #f0d9a8; background: var(--sponsored-wash);
  padding: 1px 6px; border-radius: 4px;
}

/* ---------- Empty state --------------------------------------------------- */

#no-results {
  display: none; text-align: center; padding: 60px 20px;
  color: var(--text-muted); font-size: 15px;
}
#no-results.is-visible { display: block; }

/* ---------- Footer -------------------------------------------------------- */

.site-footer {
  margin-top: 60px; padding: 44px 0 56px;
  background: var(--surface); border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid; gap: 30px;
  grid-template-columns: minmax(240px, 1.6fr) repeat(auto-fit, minmax(140px, 1fr));
}
.site-footer h5 {
  margin: 0 0 11px; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 700;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { font-size: 14px; color: var(--text-muted); }
.site-footer a:hover { color: var(--text); }
.footer-about p { font-size: 13.8px; color: var(--text-muted); margin: 0 0 12px; max-width: 380px; }
.footer-legal {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-faint); line-height: 1.65;
}
.footer-legal p { margin: 0 0 9px; }
.footer-legal strong { color: var(--text-muted); }

/* ---------- Legal / content pages ----------------------------------------- */

.doc { max-width: 780px; margin: 0 auto; padding: 46px 20px 80px; }
.doc h1 { font-size: clamp(26px, 3.6vw, 34px); letter-spacing: -.022em; margin: 0 0 10px; }
.doc .doc-meta { color: var(--text-faint); font-size: 13.5px; margin: 0 0 30px; }
.doc h2 {
  font-size: 19px; margin: 34px 0 10px; letter-spacing: -.012em; font-weight: 700;
}
.doc h3 { font-size: 16px; margin: 24px 0 8px; font-weight: 650; }
.doc p, .doc li { font-size: 15px; color: #26313d; line-height: 1.72; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc .callout {
  background: var(--accent-wash); border-left: 3px solid var(--accent);
  padding: 14px 18px; border-radius: var(--radius-sm); margin: 22px 0;
}
.doc .callout p { margin: 0; font-size: 14.5px; }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.doc th, .doc td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.doc th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; margin-bottom: 24px;
}

/* ---------- Responsive ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 760px) {
  /* Four nav links plus the wordmark need ~410px. Collapse in two stages so a
     phone-width header never pushes the document into a horizontal scroll. */
  .header-nav a.hide-md { display: none; }
  .hero { padding-top: 28px; }
  .card-grid { grid-template-columns: 1fr; }
  .card { flex-direction: row; }
  section { padding: 36px 0 6px; }
  .site-footer { padding-bottom: 40px; }

  /* minmax(240px, …) plus a 140px column cannot fit a phone: the row would be
     at least 380px wide and push the whole document sideways. */
  .footer-grid { grid-template-columns: 1fr; }

  /* Stack legal tables so wide comparison rows never force a horizontal scroll. */
  .doc table, .doc tbody, .doc tr, .doc th, .doc td { display: block; width: 100%; }
  .doc tr {
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px; padding-bottom: 10px;
  }
  .doc tr:last-child { border-bottom: 0; }
  .doc th { border: 0; padding: 0 0 3px; }
  .doc td { border: 0; padding: 3px 0; }
}

@media (max-width: 420px) {
  .card-plat { display: none; }
}

@media (max-width: 520px) {
  .header-nav a.hide-sm { display: none; }
  .brand small { display: none; }
  .site-header .wrap { gap: 12px; }
}


/* ==========================================================================
   ReinstallOS — additions to the InstallShelf stylesheet

   Concatenated after the parent stylesheet at build time, so every design token
   (--accent, --surface, --radius, --shadow …) is already defined. Nothing in
   here overrides the parent's components; it only adds the pieces a step-by-step
   guide needs that a card directory does not.
   ========================================================================== */

/* ---------- Page-intro (replaces the parent's centred hero) --------------- */

.page-intro { padding: 42px 0 0; max-width: 860px; }
.page-intro h1 {
  font-size: clamp(27px, 4.2vw, 40px); line-height: 1.16;
  letter-spacing: -.026em; margin: 0 0 14px; font-weight: 800;
}
.page-intro p.lede {
  font-size: clamp(15px, 1.7vw, 17.5px); color: var(--text-muted);
  margin: 0 0 18px; max-width: 700px;
}

.crumb {
  font-size: 13px; font-weight: 600; color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
}
.crumb a { color: var(--text-faint); }
.crumb a:hover { color: var(--accent-ink); }

.meta-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 4px;
}
.meta-row span {
  font-size: 12.5px; color: var(--text-faint);
  background: var(--surface-alt); border-radius: 999px; padding: 4px 11px;
  font-weight: 550;
}
.meta-row span b { color: var(--text-muted); font-weight: 700; }

/* ---------- Guide layout: body + sticky contents -------------------------- */

/* max-width is var(--maxw), the same as .wrap, so the guide's left edge lines
   up with the page intro above it. The text column is capped at 780px on
   purpose: a 860px measure of 15px text is about 110 characters, well past the
   point where the eye loses the start of the next line. */
.guide-layout {
  display: grid; grid-template-columns: minmax(0, 780px) 236px;
  gap: 44px; justify-content: space-between; align-items: start;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 44px 20px 90px;
}
.guide-body { min-width: 0; }

.toc { position: sticky; top: 86px; }
.toc h2 {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 11px; font-weight: 700;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: 9px; padding: 5px 8px; border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.42; color: var(--text-muted); font-weight: 500;
}
.toc a::before {
  content: counter(toc); flex: 0 0 auto;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--text-faint); min-width: 15px; padding-top: 1px;
}
.toc a:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.toc a.is-active { background: var(--accent-wash); color: var(--accent-ink); }
.toc a.is-active::before { color: var(--accent-ink); }

/* ---------- Steps --------------------------------------------------------- */

.step { padding-top: 34px; scroll-margin-top: 88px; }
.step:first-child { padding-top: 0; }
.step > h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -.02em; font-weight: 750;
  margin: 0 0 4px; padding-bottom: 13px; border-bottom: 1px solid var(--border);
}
.step > h2 .num {
  flex: 0 0 auto; font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: #fff; background: var(--text); border-radius: 7px;
  padding: 3px 8px; letter-spacing: -.02em;
}
.step > h2 + p { margin-top: 14px; }
.step h3 {
  font-size: 16px; margin: 26px 0 8px; font-weight: 680;
  letter-spacing: -.012em;
}
.step h3:first-of-type { margin-top: 18px; }
.step p { font-size: 15px; line-height: 1.72; color: #26313d; margin: 0 0 13px; }
.step > p:last-child, .step li:last-child { margin-bottom: 0; }

.step ul, .step ol.plain { padding-left: 22px; margin: 0 0 14px; }
.step li { font-size: 15px; line-height: 1.7; color: #26313d; margin-bottom: 7px; }
.step ul ul { margin: 7px 0 0; }

.choices { padding-left: 0; list-style: none; margin: 0 0 14px; }
.choices > li {
  padding: 13px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 9px; box-shadow: var(--shadow-sm);
}
.choices > li > b { display: block; font-size: 14.8px; margin-bottom: 3px; }
.choices > li p { margin: 0; font-size: 14.3px; }
.choices > li p + p { margin-top: 7px; }

/* ---------- UI labels, keycaps, commands ---------------------------------- */

/* A menu path such as Settings > System > Recovery. The chain may wrap between
   chips; each chip and the chevron that introduces it sit in one .ui-part, so
   the break always happens *before* a chevron and never leaves a ">" orphaned
   at the start of a line.
   .ui-part is shrink-to-fit, so a normal-length chip stays whole and only the
   genuinely long ones wrap: "Change settings that are currently unavailable" is
   a real Windows button and measures 302px at 14px, which is wider than a
   phone's text column. nowrap here would put it straight back over the edge. */
.ui {
  display: inline; font-size: .93em; line-height: 1.5;
}
.ui-part { display: inline-block; white-space: normal; vertical-align: baseline; }
.ui b {
  font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px;
}
.ui-sep { color: var(--text-faint); padding: 0 3px; font-weight: 700; }

.keys { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.keys-sep { color: var(--text-faint); font-size: 12px; font-weight: 700; }
kbd {
  font-family: var(--font); font-size: 12.5px; font-weight: 650; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px;
  white-space: nowrap;
}

code.cmd {
  display: block; font-family: var(--mono); font-size: 12.8px; line-height: 1.6;
  background: #10161f; color: #e8edf5; border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 0 0 13px; overflow-x: auto;
  white-space: pre; -webkit-overflow-scrolling: touch;
}
code.cmd.inline {
  display: inline; padding: 2px 6px; font-size: 12.6px; white-space: normal;
  word-break: break-word;
}

/* ---------- Callouts ------------------------------------------------------ */

.callout {
  border-radius: var(--radius-sm); padding: 13px 17px; margin: 18px 0;
  border-left: 3px solid var(--accent); background: var(--accent-wash);
}
.callout p { font-size: 14.5px; margin: 0 0 8px; }
.callout p:last-child { margin-bottom: 0; }
.callout ul { margin: 8px 0 0; padding-left: 20px; }
.callout li { font-size: 14.3px; line-height: 1.65; margin-bottom: 5px; }
.callout-title {
  font-size: 12px !important; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 5px !important;
}
.callout-warn { border-color: #c98a00; background: #fff8e8; }
.callout-warn .callout-title { color: #9a6a00; }
.callout-danger { border-color: #c0392b; background: #fdf1ef; }
.callout-danger .callout-title { color: #a82f22; }
.callout-good { border-color: var(--pick); background: var(--pick-wash); }
.callout-good .callout-title { color: var(--pick); }
.callout-note .callout-title { color: var(--accent-ink); }

/* ---------- Tables -------------------------------------------------------- */

.tbl { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.tbl th, .tbl td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.6;
}
.tbl th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); white-space: nowrap;
}
.tbl td:first-child { white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }

/* ---------- Resource cards ------------------------------------------------ */

.res-group { padding: 34px 0 0; scroll-margin-top: 88px; }
.res-group:first-child { padding-top: 0; }
.res-group > h2 {
  font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -.02em; font-weight: 750;
  margin: 0 0 6px; padding-bottom: 13px; border-bottom: 1px solid var(--border);
}
.res-group > .group-lede { font-size: 15px; color: var(--text-muted); margin: 12px 0 20px; }

.res-list { display: flex; flex-direction: column; gap: 10px; }

.res {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, border-color .18s, transform .18s;
  color: inherit;
}
.res:hover {
  box-shadow: var(--shadow); border-color: var(--border-strong);
  transform: translateY(-1px); text-decoration: none;
}
.res-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.res-top strong { font-size: 15.5px; font-weight: 700; letter-spacing: -.012em; }
.res-host {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-faint);
  margin-left: auto;
}
.res p { margin: 0; font-size: 14.2px; line-height: 1.6; color: var(--text-muted); }
.res-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.res-tags span {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-alt); border-radius: 4px; padding: 2px 7px;
}

.badge-official { background: var(--pick-wash); color: var(--pick); }
.badge-vendor { background: var(--accent-wash); color: var(--accent-ink); }
.badge-tool { background: var(--surface-alt); color: var(--text-muted); }

/* ---------- Method / decision cards on the overview ----------------------- */

.method-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}
.method {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 19px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.method h3 {
  margin: 0 0 4px; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em;
}
.method .method-where {
  font-size: 12.5px; color: var(--text-faint); margin: 0 0 11px;
  font-family: var(--mono);
}
.method p { margin: 0 0 11px; font-size: 14.3px; line-height: 1.62; color: var(--text-muted); }
.method ul { margin: 0 0 12px; padding-left: 19px; }
.method li { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-bottom: 4px; }
.method .level {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; border-radius: 4px; padding: 2px 7px; margin-bottom: 9px;
}
.level-1 { background: var(--pick-wash); color: var(--pick); }
.level-2 { background: var(--sponsored-wash); color: var(--sponsored); }
.level-3 { background: #fdf1ef; color: #a82f22; }
.method-go {
  margin-top: auto; font-size: 13.8px; font-weight: 650; color: var(--accent-ink);
}

/* ---------- Home: two big route cards ------------------------------------- */

.route-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.route {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
  color: inherit; transition: box-shadow .18s, transform .18s, border-color .18s;
}
.route:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-2px);
  border-color: var(--border-strong); text-decoration: none;
}
.route .os {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 10px;
}
.route h3 { margin: 0 0 7px; font-size: 21px; letter-spacing: -.02em; font-weight: 750; }
.route p { margin: 0 0 15px; font-size: 14.6px; line-height: 1.62; color: var(--text-muted); }
.route .route-go { font-size: 14px; font-weight: 650; color: var(--accent-ink); }
.route-steps {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 15px; padding: 0; list-style: none;
}
.route-steps li {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-alt); border-radius: 999px; padding: 3px 10px;
}

/* ---------- Checklist ----------------------------------------------------- */

.checklist { list-style: none; padding: 0; margin: 0 0 14px; }
.checklist li {
  position: relative; padding-left: 27px; margin-bottom: 9px;
  font-size: 14.8px; line-height: 1.65; color: #26313d;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
}
.checklist li b { font-weight: 650; }

/* ---------- Tabs-ish anchor strips on the downloads page ------------------ */

.jump {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 20px 0 0; margin-bottom: 4px;
}
.jump a {
  font-size: 13.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.jump a:hover {
  background: var(--text); border-color: var(--text); color: #fff; text-decoration: none;
}

/* ---------- 404 ----------------------------------------------------------- */

.nf-list { list-style: none; padding: 0; margin: 18px 0 0; }
.nf-list li { margin-bottom: 9px; }
.nf-list a { font-weight: 650; }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1000px) {
  .guide-layout { grid-template-columns: 1fr; gap: 8px; padding-top: 32px; }
  /* Contents move above the body and stop being sticky: on a phone a sticky
     sidebar would eat the viewport and cover the text it indexes. order:-1 puts
     them after the page intro and before the first step, which is where a
     reader wants them. */
  .toc {
    order: -1; position: static; background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; margin-bottom: 12px;
  }
  .toc ol { column-count: 2; column-gap: 22px; }
}

@media (max-width: 760px) {
  .page-intro { padding-top: 30px; }
  .step > h2 { flex-wrap: wrap; gap: 9px; }
  .res-host { margin-left: 0; flex: 1 1 100%; }
  .route-grid, .method-grid { grid-template-columns: 1fr; }

  /* The parent only drops this tagline below 520px. It is the widest part of
     the wordmark (uppercase, letter-spaced) and this site's nav is one item
     longer than the parent's, so it has to go a stage earlier or the header
     pushes the document into a horizontal scroll. */
  .brand small { display: none; }
}

@media (max-width: 620px) {
  .toc ol { column-count: 1; }
  code.cmd { font-size: 12px; }
}

@media (max-width: 760px) {
  /* Stack wide resource tables the way the parent stacks legal tables. */
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; width: 100%; }
  .tbl tr { border-bottom: 1px solid var(--border); margin-bottom: 12px; padding-bottom: 9px; }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl th { border: 0; padding: 0 0 3px; }
  .tbl td { border: 0; padding: 3px 0; }
  .tbl td:first-child { white-space: normal; font-weight: 650; }
}

@media (prefers-reduced-motion: reduce) {
  .res, .route, .method { transition: none; }
  .res:hover, .route:hover { transform: none; }
}

/* ---------- Compact header, smallest phones ------------------------------- */

/* The parent collapses to a single nav link below 520px, which it can afford
   because its remaining links are decorative. Here Windows, macOS and Downloads
   ARE the site, so hiding them is not on the table; the header goes compact
   instead — wordmark off (the RO mark still identifies the site and still links
   home), tighter chips, less side padding. Measured at 305px viewport the whole
   header then needs ~285px of a 290px content box. */
@media (max-width: 520px) {
  .site-header .wrap { gap: 10px; padding: 0 14px; }
  .brand-name { display: none; }
  .header-nav { gap: 2px; }
  .header-nav a { padding: 7px 8px; font-size: 13px; }
}

@media (max-width: 400px) {
  .header-nav a { padding: 6px 7px; font-size: 12.5px; }
}