/* Blue Folder — install-guide accents. Built on the tokens in /tools/tools.css.
   Link both, in order:
   <link rel="stylesheet" href="/tools/tools.css">
   <link rel="stylesheet" href="/guides/guide.css">
   No web fonts — inherits the system font stack from tools.css. */

/* inline mono pill for env vars, ports, commands */
.pill{display:inline-block;font-family:var(--mono);font-size:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:6px;padding:1px 7px;color:var(--soft)}
.pill b{color:var(--ink);font-weight:600}

/* numbered steps */
.steps{list-style:none;counter-reset:s;margin:4px 0 0;padding:0}
.steps>li{counter-increment:s;position:relative;padding:12px 0 14px 44px;border-top:1px solid var(--line)}
.steps>li:first-child{border-top:0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:11px;width:28px;height:28px;border-radius:50%;
  background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center}
.steps>li b{display:block;font-size:15px;margin-bottom:2px}
.steps>li span{font-size:14px;color:var(--soft)}
.steps>li pre{margin:9px 0 0}
.steps>li p{margin:7px 0 0;font-size:14px;color:var(--soft)}

/* honest "fit" banner at the top of each guide */
.fit{display:flex;gap:11px;align-items:flex-start;border-radius:12px;padding:12px 14px;margin:0 0 6px;
  font-size:14px;border:1px solid var(--line);line-height:1.5}
.fit .tag{flex:none;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  border-radius:999px;padding:3px 9px;margin-top:1px}
.fit.good{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.fit.good .tag{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.fit.ok{background:color-mix(in srgb,var(--blue) 8%,transparent);border-color:color-mix(in srgb,var(--blue) 26%,transparent)}
.fit.ok .tag{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.fit.poor{background:color-mix(in srgb,var(--warn) 10%,transparent);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.fit.poor .tag{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}

/* a warning variant of the shared .note */
.note.warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent)}

/* plain lists used throughout the guides */
ul.plain{margin:6px 0 0;padding-left:20px}
ul.plain li{font-size:14.5px;color:var(--soft);margin:6px 0}
ul.plain li b{color:var(--ink);font-weight:600}

/* key-facts list (bulleted dots, tight) */
.facts{list-style:none;margin:2px 0 0;padding:0}
.facts>li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--line);font-size:14px;color:var(--soft)}
.facts>li:first-child{border-top:0}
.facts>li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.facts>li b{color:var(--ink);font-weight:600}

/* sub-headings inside a .tool card */
.tool h3{font-size:15px;margin:18px 0 5px;letter-spacing:-.01em}
.tool h3:first-child{margin-top:4px}

/* group heading on the hub */
.group-h{font-size:16px;margin:28px 0 2px;letter-spacing:-.01em}
.group-h .n{color:var(--faint);font-weight:400;font-size:13px;margin-left:6px}