/* Shared by every page. Extracted from inline <style> so the Content-Security-Policy can be
   `style-src 'self'` -- with an inline stylesheet the only ways to allow it are 'unsafe-inline',
   which defeats the point, or a hash that silently breaks the site on the next edit. */

/* Dark by default: the palette every visitor gets, regardless of OS appearance. The light
   palette lives on in git history if the site ever grows a toggle. */
:root {
  color-scheme: dark;
  --fg: #e6e8ee; --dim: #9aa0b0; --bg: #14161c; --card: #1e2129; --link: #5e9eff; --rule: #2c303a;
  --ok: #48c07a;
}

* { box-sizing: border-box }

body {
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  max-width: 46rem; margin: 0 auto; padding: 5vh 1.5rem 6rem;
  color: var(--fg); background: var(--bg);
}

h1 { font-size: 2.1rem; letter-spacing: -.022em; margin: 0 0 .3rem }
h2 { font-size: 1.05rem; letter-spacing: -.01em; margin: 2.4rem 0 .6rem }
p { margin: 0 0 1rem }
ul { padding-left: 1.1rem; margin: 0 0 1rem }
li { margin-bottom: .35rem }

.tag { color: var(--dim); font-size: 1.05rem; margin-bottom: 1.8rem }

a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px }

code, pre { font: 13.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace }
code { background: var(--card); padding: .15em .4em; border-radius: 4px }
pre { background: var(--card); padding: .9rem 1rem; border-radius: 8px; overflow-x: auto; margin: 0 }
pre code { background: none; padding: 0 }

footer {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  color: var(--dim); font-size: .9rem;
}

/* Header: the app icon beside the page title, primary links pushed to the right edge.
   flex-wrap drops the links onto their own row when a phone can't fit both. */
.head { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: .3rem }
.head img { width: 56px; height: 56px; flex: none; border-radius: 12px }
.head h1 { margin: 0 }

.links { display: flex; flex-wrap: wrap; gap: .15rem; margin-left: auto }
.links .btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .7rem; border-radius: 7px;
  color: var(--dim); font-weight: 500; font-size: .95rem;
  transition: color .12s, background .12s;
}
.links .btn svg { width: 15px; height: 15px; flex: none }
.links .btn .glyph {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.links .btn .glyph circle { fill: currentColor; stroke: none }
.links .btn:hover { text-decoration: none; color: var(--fg); background: var(--card) }
.links .btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px }

/* A command with a copy button parked inside it */
.cmd { position: relative; margin: 0 0 1rem }
.cmd pre { padding-right: 3.1rem }

.copy {
  position: absolute; top: 50%; right: .5rem; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 6px; background: none;
  color: var(--dim); cursor: pointer; padding: 0;
  transition: color .12s, background .12s, border-color .12s;
}
.copy:hover { color: var(--fg); background: var(--bg); border-color: var(--rule) }
.copy:focus-visible { outline: 2px solid var(--link); outline-offset: 1px }
.copy svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.copy .tick { display: none }
.copy.ok { color: var(--ok) }
.copy.ok .sheets { display: none }
.copy.ok .tick { display: block }

/* Respect a reduced-motion preference: the tick still swaps, it just stops fading. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important }
}