/*
 * Nestwatch website layout, on top of design/nestwatch.css (tokens and
 * components). Only page layout lives here; colours, radii, spacing and type
 * come from the design system.
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

/* Day theme: small text on these long-form pages must reach WCAG AA (4.5:1,
   NFR-A11Y-1). The day accents of the app are tuned for large controls, so
   the website darkens them slightly; the hues stay the same. */
:root[data-theme="day"] {
  --text-3: #6e6982;
  --honey: #9e5812;
  --honey-soft: rgba(158, 88, 18, 0.12);
  --sage: #26704f;
  --coral: #b8402f;
  --amber: #85590a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --text-3: #6e6982;
    --honey: #9e5812;
    --honey-soft: rgba(158, 88, 18, 0.12);
    --sage: #26704f;
    --coral: #b8402f;
    --amber: #85590a;
  }
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
main { flex: 1; }
main:focus { outline: none; }
img { max-width: 100%; height: auto; }

a { color: var(--lavender); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a.btn { text-decoration: none; }
.btn.primary { color: var(--honey-ink); }
.btn.big { min-height: 48px; padding: 12px 22px; font-size: var(--text-m); }
.small { font-size: var(--text-s); }
.center { text-align: center; }
.lead { font-size: var(--text-l); line-height: 1.5; max-width: 62ch; }
.caption-strong { color: var(--text-3); font-size: var(--text-s); }
.caption { color: var(--text-3); }
code, pre { font-family: var(--font-mono); }
:not(pre) > code { font-size: 0.9em; background: var(--ink-2); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }

.page { padding-left: var(--space-4); padding-right: var(--space-4); }
@media (min-width: 720px) { .page { padding-left: var(--space-5); padding-right: var(--space-5); } }

.skip { position: absolute; left: var(--space-4); top: -80px; z-index: 20; }
.skip:focus { top: var(--space-3); }

/* ---------- Header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ink-0) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--ink-3);
}
.head-row { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.site-head .brand { color: var(--text-1); text-decoration: none; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); color: var(--text-2); text-decoration: none; font-weight: 600; font-size: var(--text-s);
}
.site-nav a:hover { background: var(--ink-2); color: var(--text-1); }
.site-nav a[aria-current="page"] { background: var(--ink-2); color: var(--text-1); }
.head-tools { gap: var(--space-2); flex: none; }
.open-app { white-space: nowrap; }
@media (max-width: 440px) { .head-row .brand span { display: none; } }
.lang { padding: 0 14px; font-size: var(--text-s); }
.theme-toggle .sun { display: none; }
:root[data-theme="day"] .theme-toggle .sun { display: block; }
:root[data-theme="day"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .sun { display: block; }
  :root:not([data-theme]) .theme-toggle .moon { display: none; }
}
.menu-toggle { display: none; }

@media (max-width: 860px) {
  .head-row { flex-wrap: wrap; }
  .head-tools { margin-left: auto; }
  .js .menu-toggle { display: inline-flex; }
  .site-nav { order: 3; width: 100%; margin: 0; }
  .site-nav ul { flex-wrap: wrap; }
  .js .site-nav { display: none; }
  .js .site-nav.open { display: block; }
  .js .site-nav ul { flex-direction: column; padding-bottom: var(--space-2); }
  .js .site-nav a { width: 100%; }
}

/* ---------- Bands and hero ---------- */

.hero { padding: var(--space-7) 0 var(--space-6); }
.hero-grid { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero h1 { font-size: clamp(34px, 5vw, var(--text-xxl)); line-height: 1.1; letter-spacing: -0.02em; }
.hero-text { gap: var(--space-5); }
.hero-shot { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero { padding-top: var(--space-6); } }

.band { padding: var(--space-6) 0; }
.band-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); max-width: 760px; }
.band-head h2 { font-size: var(--text-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.band + .band { border-top: 1px solid var(--ink-3); }

.page-head { padding: var(--space-7) 0 var(--space-5); }
.page-head h1 { font-size: clamp(30px, 4.4vw, 40px); line-height: 1.15; }

/* ---------- Screenshots (design previews) ---------- */

.shot { display: block; }
.shot img { display: block; border-radius: var(--radius-l); }
.shot .day { display: none; }
:root[data-theme="day"] .shot .night { display: none; }
:root[data-theme="day"] .shot .day { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .shot .night { display: none; }
  :root:not([data-theme]) .shot .day { display: block; }
}
.hero-shot .shot img { box-shadow: var(--shadow); border: 1px solid var(--ink-3); border-radius: 18px; }

.shots { display: grid; gap: var(--space-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shots { grid-template-columns: minmax(0, 1fr); justify-items: center; } .phone-shot { max-width: 320px; } }
.phone-shot { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.phone-shot img { border-radius: 40px; }
.phone-shot figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-s); }
.shots + .caption-strong { margin-top: var(--space-5); }

/* ---------- Cards ---------- */

.cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-bottom: var(--space-5); }
.card h3 { font-size: var(--text-m); }
.feature { display: flex; flex-direction: column; gap: var(--space-3); }
.icon-dot {
  width: 44px; height: 44px; border-radius: var(--radius-m); display: grid; place-items: center;
  font-size: 20px; font-weight: 700; flex: none;
}
.icon-dot.honey { background: var(--honey-soft); color: var(--honey); }
.icon-dot.lavender { background: var(--lavender-soft); color: var(--lavender); }
.icon-dot.sage { background: var(--sage-soft); color: var(--sage); }
.icon-dot.coral { background: var(--coral-soft); color: var(--coral); }
.icon-dot.amber { background: var(--amber-soft); color: var(--amber); }
.icon-dot svg { width: 22px; height: 22px; }

.prose { display: flex; flex-direction: column; gap: var(--space-3); line-height: 1.6; }
.prose > * { max-width: 72ch; }
.prose ul, .plain-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-2); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.step { display: flex; flex-direction: column; gap: var(--space-3); }
.step-n {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--honey); color: var(--honey-ink); font-weight: 700;
}

.ticks { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ticks li { position: relative; padding-left: 26px; color: var(--text-2); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; }
.ticks.warn li::before { background: var(--amber); }
.ticks.calm li::before { background: var(--sage); }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.cta img { flex: none; }

.note { border-color: color-mix(in srgb, var(--amber) 45%, var(--ink-3)); }

/* ---------- Downloads ---------- */

.wide-gap { gap: var(--space-5); padding-bottom: var(--space-6); }
.platforms { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.platform { display: flex; flex-direction: column; gap: var(--space-3); }
.platform h3 { margin-top: var(--space-2); font-size: var(--text-s); color: var(--text-2); }
.dl-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn.dl { flex-direction: column; gap: 0; line-height: 1.2; padding: 8px 16px; border: 1px solid var(--ink-3); border-radius: var(--radius-m); align-items: flex-start; }
.dl-kind { font-weight: 700; color: var(--honey); }
.dl-arch { font-size: var(--text-xs); font-weight: 600; color: var(--text-2); }

.code {
  margin: 0; padding: var(--space-4); border-radius: var(--radius-m);
  background: var(--ink-2); border: 1px solid var(--ink-3);
  font-size: 13px; line-height: 1.55; overflow-x: auto; color: var(--text-1); tab-size: 4;
  max-width: 100%;
}

/* ---------- Prose pages ---------- */

.with-toc { display: grid; gap: var(--space-5); grid-template-columns: 240px minmax(0, 1fr); align-items: start; padding-bottom: var(--space-6); }
.toc { position: sticky; top: 92px; padding: var(--space-4); }
.toc ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc a { display: block; padding: 6px 10px; border-radius: var(--radius-s); color: var(--text-2); text-decoration: none; font-size: var(--text-s); }
.toc a:hover { background: var(--ink-2); color: var(--text-1); }
@media (max-width: 860px) { .with-toc { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }
.prose-card { display: flex; flex-direction: column; gap: var(--space-4); }
.prose-card .prose { color: var(--text-2); }
.prose-card .prose strong { color: var(--text-1); }

.table-wrap { overflow-x: auto; border: 1px solid var(--ink-3); border-radius: var(--radius-m); }
table { border-collapse: collapse; width: 100%; font-size: var(--text-s); }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--ink-3); }
thead th { background: var(--ink-2); color: var(--text-1); }
tbody th { color: var(--text-1); font-weight: 600; }
tr:last-child th, tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */

.faq { padding-bottom: var(--space-6); max-width: 860px; }
.faq-item { padding: 0; }
.faq-item summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-radius: var(--radius-l); min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--honey); flex: none; transition: transform var(--fast) var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary h2 { font-size: var(--text-m); }
.faq-item .prose { padding: 0 var(--space-5) var(--space-5); }

/* ---------- Footer ---------- */

.site-foot { border-top: 1px solid var(--ink-3); padding: var(--space-6) 0; background: var(--ink-0); }
.disclaimer { border-color: color-mix(in srgb, var(--coral) 40%, var(--ink-3)); color: var(--text-1); padding: var(--space-4) var(--space-5); }
.disclaimer strong { color: var(--coral); }
.foot-grid { display: grid; gap: var(--space-5); grid-template-columns: 2fr 2fr 3fr; margin-top: var(--space-4); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
.foot-links a { display: inline-flex; min-height: 32px; align-items: center; color: var(--text-2); }
.site-foot .brand { font-size: var(--text-m); }
.site-foot .brand img { width: 24px; height: 24px; }

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
  .lead { font-size: 18px; }
  .card { padding: var(--space-4); }
  .band { padding: var(--space-5) 0; }
  .hero { padding: var(--space-5) 0; }
  .page-head { padding: var(--space-6) 0 var(--space-4); }
  .brand { font-size: 18px; }
  .brand img { width: 28px; height: 28px; }
  .faq-item summary { padding: var(--space-4); }
  .faq-item .prose { padding: 0 var(--space-4) var(--space-4); }
}