/* WanderPane — Pale Birch.
   Same tokens as the device controller and TV UI (see CLAUDE.md "UI Design System"),
   so the site and the product feel like one thing. Glow is used sparingly and on
   purpose: the primary CTA and the active pane mark, nothing else. */

:root {
  --bg:          #0c0906;
  --card:        #16110c;
  --card-2:      #1e1b16;
  --birch:       #D4C5B0;
  --birch-mid:   #B8A99A;
  --red-stop:    #C87060;
  --text:        #f5e8d0;
  --muted:       rgba(255, 220, 180, 0.42);
  --faint:       rgba(255, 220, 180, 0.22);
  --line:        rgba(212, 197, 176, 0.12);
  --line-strong: rgba(212, 197, 176, 0.22);
  --radius:      16px;
  --radius-sm:   10px;
  --measure:     46rem;
  --font: Inter, "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Keyboard users must be able to jump past the header. */
.skip {
  position: absolute; left: -9999px;
  background: var(--birch); color: #16110c;
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; z-index: 10;
}
.skip:focus { left: 0; top: 0; }

/* ── Header / footer ─────────────────────────────────────── */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
}
.mark { width: 30px; height: 30px; flex: none; }
.pane-fill  { fill: var(--card); }
.pane-sun   { fill: var(--birch); }
.pane-hill-a{ fill: var(--birch-mid); opacity: .55; }
.pane-hill-b{ fill: #8a7c6c; opacity: .7; }
.pane-frame { stroke: var(--birch); }

.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav a { color: var(--birch); text-decoration: none; font-size: 14px; }
.site-nav a:hover { color: var(--text); }
.site-nav a.btn:hover { color: #16110c; }

.site-footer {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 32px 24px; color: var(--faint); font-size: 13px;
  border-top: 1px solid var(--line);
}
.site-footer .dot { opacity: .5; }

/* ── Layout ──────────────────────────────────────────────── */
main { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 40px 24px 64px; }
main.wide { max-width: 64rem; }

h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 14px; }
h2 { font-size: 20px; letter-spacing: -0.01em; margin: 40px 0 12px; }
h3 { font-size: 15px; margin: 0 0 6px; }
p  { margin: 0 0 14px; color: rgba(245, 232, 208, 0.82); }
.lede { font-size: 18px; color: rgba(245, 232, 208, 0.7); max-width: 34rem; }
.muted { color: var(--muted); font-size: 14px; }
a { color: var(--birch); }
a:hover { color: var(--text); }

/* Section label — 9px caps, matching the controller's section headers. */
.eyebrow {
  font-size: 9px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--faint); margin: 0 0 10px;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card + .card { margin-top: 16px; }
.card-narrow { max-width: 26rem; margin-inline: auto; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 0; border-radius: var(--radius-sm);
  background: var(--birch); color: #16110c;
  font: inherit; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.07); color: #16110c; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }
/* Glow #1 of the sparing set: the primary call to action. */
.btn-primary { box-shadow: 0 0 14px 4px rgba(212,197,176,.14), 0 0 30px 8px rgba(212,197,176,.06); }
.btn-ghost {
  background: transparent; color: var(--birch);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: rgba(212,197,176,.06); color: var(--text); }
.btn-danger { background: transparent; color: var(--red-stop); border: 1px solid rgba(200,112,96,.35); }
.btn-danger:hover { background: rgba(200,112,96,.1); color: var(--red-stop); }

/* ── Forms ───────────────────────────────────────────────── */
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
input, select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 15px;
}
input::placeholder { color: rgba(255,220,180,.25); }
input:hover, select:hover { border-color: rgba(212,197,176,.34); }

/* One visible focus treatment everywhere, keyboard-first. */
:where(a, button, input, select, .btn):focus-visible {
  outline: 2px solid var(--birch);
  outline-offset: 2px;
}

[role="alert"] {
  color: var(--red-stop); font-size: 14px;
  background: rgba(200,112,96,.08);
  border: 1px solid rgba(200,112,96,.25);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0;
}
.notice {
  color: var(--birch); font-size: 14px;
  background: rgba(212,197,176,.07);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0;
}

/* Pairing code: monospace and wide-tracked so it is easy to transcribe from a TV. */
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; letter-spacing: 5px; text-transform: uppercase; text-align: center;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero { padding: 24px 0 8px; }
.hero .mark {
  width: 76px; height: 76px; margin-bottom: 20px;
  /* Glow #2: the lit pane, echoing the product's own splash. */
  filter: drop-shadow(0 0 18px rgba(212,197,176,.22));
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ── Steps ───────────────────────────────────────────────── */
.steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: 0; margin: 0; list-style: none; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--card-2); color: var(--birch);
  font-size: 12px; font-weight: 600; margin-bottom: 10px;
}
.step p { font-size: 14px; color: var(--muted); margin: 0; }

/* ── Lists (devices, scenes) ─────────────────────────────── */
.rows { list-style: none; padding: 0; margin: 0; }
.row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; }
.row-main { flex: 1 1 12rem; min-width: 0; }
.row-title { font-weight: 500; }
.row form { display: flex; gap: 8px; align-items: center; margin: 0; }
.row select { width: auto; min-width: 9rem; padding: 9px 12px; font-size: 14px; }
.tag {
  display: inline-block; font-size: 11px; color: var(--faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; margin-right: 6px;
}
.empty { color: var(--muted); font-size: 15px; }

.stack { display: grid; gap: 10px; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

@media (max-width: 520px) {
  .site-header { padding: 14px 16px; }
  main { padding: 28px 16px 48px; }
  .row form { width: 100%; }
  .row select { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}