/* Mainspring Guides — layered on /blog/style.css, which owns the palette,
   type, nav, article, .ms card, .related and footer. Only guide-specific
   pieces live here. Source: scripts/guides/guides.css (build.py copies it). */

nav .gl{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
nav .gl:hover{color:var(--accent2);text-decoration:none}
nav .gl + .cta{margin-left:0}
@media(max-width:520px){nav .gl{display:none} nav .gl + .cta{margin-left:auto}}

/* "In the app" — where the control lives */
.where{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 28px;padding:11px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:2px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink)}
.where .k{font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-right:4px}
.where .sep{color:var(--muted)}

/* an in-app label or button, and the app's small chips */
.ui{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.85em;line-height:1.35;
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:0 9px;white-space:nowrap}
.chip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.68em;font-weight:600;letter-spacing:.06em;
  color:var(--accent);background:rgba(14,123,174,.12);border-radius:999px;padding:1px 7px;vertical-align:.12em;white-space:nowrap}
h2 .chip{font-size:.5em}

.guide .note{border:1px solid var(--line2);border-left:2px solid var(--accent);background:var(--card);
  padding:13px 18px;margin:0 0 22px;font-size:15.5px}
.guide .note.warn{border-left-color:#B45309}
.guide .note p:last-child{margin-bottom:0}
.guide .summary{font-size:17px;color:var(--ink)}
.guide ul.items li{margin-bottom:7px}
.guide dl{margin:0 0 22px}
.guide dt{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink);margin-top:14px}
.guide dd{margin:2px 0 0}

/* power-up reference */
.toc{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 10px;font-size:13px}
.toc .k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);align-self:center;margin-right:4px}
.toc a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--ink)}
.toc a:hover{text-decoration:none;border-color:var(--ink)}
h2 .count{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;color:var(--muted);margin-left:4px}
.article table.ref{font-size:14px}
.article table.ref td:first-child{min-width:170px}
.article table.ref td:last-child{min-width:190px}
.article table.ref code{font-size:.8em;display:inline-block;margin:1px 0;word-break:normal;overflow-wrap:anywhere}
/* long paths in prose must wrap on a phone rather than widen the page */
.guide p code,.guide li code,.guide dd code{overflow-wrap:anywhere}
.article table.ref .sub{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.article table.ref tr:target td{background:#F6FBFE}

/* hub */
.hub{max-width:980px;margin:0 auto;padding:46px 24px 24px}
.hub h1{margin-bottom:16px}
.hub .lead{max-width:680px}
.finder{position:sticky;top:58px;z-index:10;background:rgba(234,244,251,.94);backdrop-filter:blur(6px);
  padding:12px 0;margin:0 0 8px;border-bottom:1px solid var(--line2)}
.finder input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:2px;padding:11px 14px;outline:none}
.finder input:focus{border-color:var(--accent)}
.jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.jump a{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink2);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:3px 10px}
.jump a:hover{text-decoration:none;border-color:var(--ink)}
.hub .empty{margin:22px 0;color:var(--muted)}
.grp{padding-top:26px;scroll-margin-top:150px}
.grp h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:23px;color:var(--ink);letter-spacing:-.01em}
.grp .gd{color:var(--muted);margin:2px 0 14px;font-size:15px}
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:860px){.blocks{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.blocks{grid-template-columns:1fr}}
.block{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:2px;padding:16px 17px 15px;color:var(--ink2);transition:.15s;min-width:0}
.block:hover{text-decoration:none;border-color:var(--ink);transform:translateY(-1px);background:#F6FBFE}
.block[hidden]{display:none}
.block .t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16.5px;line-height:1.3;color:var(--ink)}
.block .d{font-size:14px;line-height:1.5}
.block .w{margin-top:auto;padding-top:6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent2)}
.hub .ms{margin-top:44px}