/* Promptline's site: what every page shares. The tokens, the base, the
   header with its phone menu, the footer, and after them the document
   pages' column (posts, the code signing policy). Each page links this
   file and keeps only its own rules inline, after it, so a page's rule
   still wins over a shared one of the same weight. */

/* Tokens from design/tokens.json ("Promptline Tool UI"), light and dark.
   The page follows the system theme; the header's switch can pin one
   (data-theme on <html>, not remembered), and the screenshots follow. */
:root {
  --surface-0: #ffffff;
  --surface-sunk: #f5f6f8;
  --surface-raised: #ffffff;
  --control: #f5f6f8;
  --ink: #1a1d21;
  --ink-2: #586270;
  --ink-3: #636d79;
  --line: #e3e6e9;
  --line-strong: #c9cfd6;
  --accent: #0a76a6;
  --accent-glow: rgba(10, 118, 166, 0.10);
  --focus: #0b7fb4;
  --btn-primary: #1a1d21;
  --on-btn-primary: #ffffff;
  --selection: #e3f2fb;
  --param-builtin: #0b6f9e;
  --param-builtin-soft: #e3f2fb;
  --param-field: #8a5a05;
  --param-field-soft: #fbf1dc;
  --param-config: #9a2a8c;
  --param-config-soft: #f9e6f5;
  --warn: #b4530a;
  --titlebar: #f3f4f6;
  --shadow-pop: 0 8px 24px rgba(16, 24, 40, 0.16);
  --shadow-menu: 0 4px 12px rgba(16, 24, 40, 0.10);
  --shadow-shot: 0 24px 60px -12px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.08);
  --sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Cascadia Code', 'JetBrains Mono', Consolas, ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #15181b;
    --surface-sunk: #101214;
    --surface-raised: #1c2024;
    --control: #22272c;
    --ink: #e8ebee;
    --ink-2: #a3abb5;
    --ink-3: #8a929c;
    --line: #2a2f35;
    --line-strong: #3a4048;
    --accent: #4cc2f5;
    --accent-glow: rgba(76, 194, 245, 0.10);
    --focus: #4cc2f5;
    --btn-primary: #f2f4f6;
    --on-btn-primary: #15181b;
    --selection: #1c2f3b;
    --param-builtin: #63c8f2;
    --param-builtin-soft: #173040;
    --param-field: #f0c25a;
    --param-field-soft: #3a2e12;
    --param-config: #ea8fdc;
    --param-config-soft: #3b1e37;
    --warn: #f5a54b;
    --titlebar: #1f2327;
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-shot: 0 28px 70px -12px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface-0: #15181b;
  --surface-sunk: #101214;
  --surface-raised: #1c2024;
  --control: #22272c;
  --ink: #e8ebee;
  --ink-2: #a3abb5;
  --ink-3: #8a929c;
  --line: #2a2f35;
  --line-strong: #3a4048;
  --accent: #4cc2f5;
  --accent-glow: rgba(76, 194, 245, 0.10);
  --focus: #4cc2f5;
  --btn-primary: #f2f4f6;
  --on-btn-primary: #15181b;
  --selection: #1c2f3b;
  --param-builtin: #63c8f2;
  --param-builtin-soft: #173040;
  --param-field: #f0c25a;
  --param-field-soft: #3a2e12;
  --param-config: #ea8fdc;
  --param-config-soft: #3b1e37;
  --warn: #f5a54b;
  --titlebar: #1f2327;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-shot: 0 28px 70px -12px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
code, kbd { font-family: var(--mono); font-size: 0.92em; }
kbd {
  display: inline-block;
  padding: 0 6px;
  line-height: 22px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--control);
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }

/* Header */
header {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-0) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 17px; }
.brand:hover { text-decoration: none; }
.brand svg { width: 26px; height: 26px; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav nav { display: flex; gap: 20px; font-size: 14px; }
.nav nav a { color: var(--ink-2); }
.nav nav a:hover { color: var(--ink); text-decoration: none; }
.theme {
  display: inline-flex; padding: 2px; gap: 2px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-sunk);
}
.theme button {
  display: grid; place-items: center; width: 30px; height: 26px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer;
}
.theme button:hover { color: var(--ink); }
.theme button[aria-checked="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-menu); }
.theme svg { width: 16px; height: 16px; }

footer { border-top: 1px solid var(--line); padding: 22px 0 32px; font-size: 13px; color: var(--ink-3); }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
footer a { color: var(--ink-2); }
footer .privacy { margin: 14px 0 0; max-width: 72ch; line-height: 1.55; }

/* Phones: the links and the theme switch fold into one menu under the
   header, opened by a button. Without the script a <noscript> style wraps the
   links under the brand instead */
.menu-toggle {
  display: none; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .x, .menu-open .menu-toggle .bars { display: none; }
.menu-open .menu-toggle .x { display: block; }
.theme[hidden] { display: none; }
@media (max-width: 640px) {
  .menu-toggle { display: grid; }
  .menu-open { background: var(--surface-0); }
  .nav-right {
    position: absolute; inset: 100% 0 auto; display: block;
    padding: 4px 16px 16px; max-height: calc(100dvh - 57px); overflow-y: auto;
    background: var(--surface-0); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-pop); clip-path: inset(0 0 -48px);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 160ms, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 200ms;
  }
  .menu-open .nav-right { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav nav { display: grid; gap: 0; font-size: 16px; }
  .nav nav a { display: flex; align-items: center; min-height: 48px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .theme { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
  .theme button { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: 44px; font: 500 14px var(--sans); }
  .theme button::after { content: attr(title); }
}
/* Fingers: every control in the header and footer is at least 44px tall */
@media (pointer: coarse), (max-width: 640px) {
  .brand { min-height: 44px; }
  footer nav { gap: 0 20px; }
  footer nav a { display: flex; align-items: center; min-height: 44px; }
}
@media (pointer: coarse) and (min-width: 641px) {
  .nav nav a { display: flex; align-items: center; min-height: 44px; }
  .theme button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-right { transition: none; transform: none; }
}

/* Document pages: one readable column */

.doc { padding: 48px 16px 64px; max-width: 760px; }
.doc h1 { font-family: var(--display); font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; }
.doc h2 { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; margin: 40px 0 10px; }
.doc p, .doc li, .doc dd { color: var(--ink-2); }
.doc p { margin: 0 0 14px; }
.doc .lead { font-size: 18px; color: var(--ink); }
.doc .status { padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-sunk); border-radius: 0 4px 4px 0; font-size: 15px; }
.doc ol, .doc ul { padding-left: 22px; margin: 0 0 14px; }
.doc li { margin: 4px 0; }
.doc dl { margin: 0 0 14px; }
.doc dt { font-weight: 600; color: var(--ink); margin-top: 10px; }
.doc dd { margin: 2px 0 0; }