/* The how-to page. Tokens come from /style.css; this only lays it out. */
body {
  display: block; padding: 0; place-items: initial;
  font: 16px/1.6 "Segoe UI", system-ui, sans-serif;
}
.skip { position: absolute; left: -999px; top: 0; padding: .6rem 1rem; background: var(--brand); color: var(--on-brand); }
.skip:focus { left: 0; z-index: 10; }
.bar { background: var(--brand-dark); padding: .6rem 1.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem; color: var(--on-topbar);
  text-decoration: none; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem;
}
.brand:focus-visible, .guide a:focus-visible, .guide button:focus-visible, pre:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px;
}
.brand:focus-visible { outline-color: var(--on-topbar); }
.guide { max-width: 46rem; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
.guide h1 { font: 700 clamp(1.7rem, 4vw, 2.2rem)/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: 0; margin: 0 0 .75rem; }
.guide h2 { font: 700 1.3rem/1.3 "Segoe UI", system-ui, sans-serif; margin: 2.25rem 0 .6rem; }
.guide h3 { font: 700 1.05rem/1.3 "Segoe UI", system-ui, sans-serif; margin: 0 0 .25rem; }
.lead { font-size: 1.1rem; color: var(--text-muted); }
.guide a { color: var(--brand); }
.guide code { font: .9em "Cascadia Mono", Consolas, monospace; background: var(--brand-tint); padding: .05rem .3rem; border-radius: 4px; }
.steps { padding: 0; list-style: none; counter-reset: step; display: grid; gap: .9rem; }
.steps > li {
  counter-increment: step; position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.2rem 1rem 3.4rem;
  box-shadow: var(--shadow);
}
.steps > li::before {
  content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 700;
}
.steps p { margin: .25rem 0 0; }
.primary {
  min-height: 44px; padding: 0 1.2rem; border-radius: 8px; border: 1px solid var(--brand);
  background: var(--brand); color: var(--on-brand); font: 600 .95rem "Segoe UI", system-ui, sans-serif; cursor: pointer;
}
#copy-status { margin-left: .75rem; color: var(--success); font-weight: 600; font-size: .9rem; }
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); font-size: .92rem; }
th, td { text-align: left; padding: .6rem .75rem; border-top: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--brand-tint); color: var(--slate); border-top: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
pre {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem;
  overflow-x: auto; font: .85rem/1.5 "Cascadia Mono", Consolas, monospace;
}
.foot { margin-top: 2.5rem; }
@media (max-width: 30rem) { .steps > li { padding-left: 3rem; } }