/* Public release download page (releases.js). Standalone: light and dark,
   the shared PixelPup look (see D:\Standards\PIXELPUP-THEME.md) - glass over
   a soft tie-dye field, Comfortaa display / Space Grotesk body. Readable at
   320px and 200% zoom. Text contrast checked: ink and ink-soft both clear
   4.5:1 on --bg in both themes (per the spec: ink 16.4:1 light / 17.4:1
   dark; ink-soft 9.0:1 / 10.4:1). Decorative dividers and the glass edge are
   not text, so they follow the spec's hairline look rather than a text
   contrast ratio; real controls (inputs) use an ink-based border instead so
   they still clear 3:1 as non-text UI. */
:root {
  --teal:   #2ed3b7;
  --violet: #9d6bea;
  --pink:   #ff5fa2;
  --sun:    #ffb24d;

  --bg: #fbf6ee; --ink: #1c1528; --ink-soft: #4a4058;
  --glass:       #ffffff85; /* rgba(255,255,255,.52) */
  --glass-hover: #ffffffb8; /* rgba(255,255,255,.72) */
  --glass-edge:  #ffffffd9; /* rgba(255,255,255,.85) */
  --glass-shadow: 0 1px 0 #ffffffe6 inset, 0 18px 40px -22px #3c1e5a59;
  --field-opacity: .55;
  --tag-bg: #1c152812; /* rgba(28,21,40,.07) */
  --focus:  #6a2bd9;
  --error:  #b3261e;
  --radius: 22px;
  --blur:   18px;
  --font-display: "Comfortaa", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0a17; --ink: #f4f0fa; --ink-soft: #c3b8d6;
    --glass:       #ffffff0f; /* rgba(255,255,255,.06) */
    --glass-hover: #ffffff1c; /* rgba(255,255,255,.11) */
    --glass-edge:  #ffffff24; /* rgba(255,255,255,.14) */
    --glass-shadow: 0 1px 0 #ffffff14 inset, 0 24px 48px -24px #000000b3;
    --field-opacity: .42;
    --tag-bg: #ffffff17;
    --focus:  #7df2de;
    --error:  #ffb4ab;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
}
.rl { max-width: 42rem; margin: 0 auto; padding: 0 1rem 2rem; }
.rl-skip { position: absolute; left: -9999px; top: 0; }
.rl-skip:focus { left: 1rem; top: 1rem; background: var(--bg); color: var(--ink); padding: .5rem 1rem; z-index: 10; }
.rl-top { padding: 1rem 0; border-bottom: 1px solid var(--glass-edge); margin-bottom: 1.5rem; }
.rl-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.rl-main:focus { outline: none; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 5vw, 1.9rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5rem; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 2rem 0 .5rem; }
.rl-summary { font-size: 1.125rem; margin: 0 0 1.25rem; color: var(--ink-soft); }
.rl-muted { color: var(--ink-soft); }
.rl-break, code { overflow-wrap: anywhere; word-break: break-word; }
.rl-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem 1.5rem;
  margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: var(--glass); border: 1px solid var(--glass-edge);
  border-radius: var(--radius); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
.rl-facts div { min-width: 0; }
.rl-facts dt { font-size: .9rem; color: var(--ink-soft); }
.rl-facts dd { margin: 0; font-weight: 600; }
.rl-cta { margin: 0 0 1rem; }
.rl-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .375rem;
  min-height: 3rem; padding: .75rem 1.25rem; border: 1px solid transparent; border-radius: 12px;
  background: var(--ink); color: var(--bg); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; text-align: center;
}
.rl-cta .rl-btn { width: 100%; font-size: 1.125rem; }
.rl-btn-sub { font-weight: 400; }
.rl-btn-quiet { background: var(--glass); color: var(--ink); border-color: var(--glass-edge); font-weight: 600; min-height: 2.75rem;
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.rl-btn:hover { background: color-mix(in srgb, var(--ink) 88%, var(--violet)); }
.rl-btn-quiet:hover { background: var(--glass-hover); }
a { color: var(--focus); text-underline-offset: .15em; }
a:focus-visible, button:focus-visible, input:focus-visible, .rl-skip:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px;
}
ul, ol { padding-left: 1.5rem; margin: .25rem 0 .75rem; }
li { margin: .3rem 0; }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .95em;
  background: var(--tag-bg); border: 1px solid var(--glass-edge); border-radius: .3rem; padding: .05rem .3rem;
}
.rl-sum code { display: block; padding: .6rem .75rem; font-size: 1rem; line-height: 1.5; }
.rl-status { color: var(--ink-soft); }
.rl-form { display: grid; gap: .5rem; max-width: 24rem; }
.rl-form label { font-weight: 600; }
.rl-form input {
  min-height: 3rem; padding: .5rem .75rem; font: inherit; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); border-radius: 12px;
}
.rl-form input[aria-invalid="true"] { border-color: var(--error); }
.rl-error { color: var(--error); font-weight: 600; margin: 0; }
.rl-foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--glass-edge); color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 30rem) {
  h1 { font-size: 1.6rem; }
  .rl-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}