/* SunGlance site. Colors, type and radii follow the Android app's theme
   (android/app/src/main/java/com/enphasestatus/ui/theme/Theme.kt). */

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #F4F2EE;
  --card: #FFFFFF;
  --ink: #16171A;
  --muted: #5C5F66;
  --outline: #E4E1DA;
  --accent: #EDA100;
  --accent-ink: #7A4A00;
  --accent-bg: #FBEFD5;
  --solar: #C78700;
  --house: #C2457A;
  --grid: #2A78D6;
  --battery: #138A60;

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px;
  --radius-small: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --measure: 68ch;
  --page: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1012;
    --card: #1C1D21;
    --ink: #F2F0EC;
    --muted: #A3A19B;
    --outline: #2C2E33;
    --accent-ink: #F5C66B;
    --accent-bg: #3A2C0E;
    --solar: #F2B630;
    --house: #F08DB5;
    --grid: #6FA6EA;
    --battery: #3FD39A;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.0625rem; }
p { margin: 0; }

.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--space-6); }

/* Header */
.site-header { padding: var(--space-6) 0; }
.site-header .page { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 600; font-size: 1.125rem; text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.site-nav { display: flex; gap: var(--space-6); font-size: 0.9375rem; color: var(--muted); }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

/* Home */
.hero { padding: var(--space-12) 0 var(--space-12); display: grid; gap: var(--space-6); }
.hero .lede { font-size: 1.25rem; color: var(--muted); max-width: 40ch; }
.status { display: inline-flex; align-self: start; justify-self: start; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--accent-bg); color: var(--accent-ink);
  font-size: 0.875rem; font-weight: 600; }

/* Screenshots: real captures from the app, dark theme. The phone frame is the app's own ink. */
.shots { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); align-items: start; padding-bottom: var(--space-16); }
.shot { margin: 0; display: grid; gap: var(--space-3); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { font-size: 0.875rem; color: var(--muted); text-align: center; }
.shot-phone img { border-radius: 28px; border: 6px solid #16171A; background: #16171A; }
.shot-stack { display: grid; gap: var(--space-8); }
.shot-watch img { width: 72%; justify-self: center; margin: 0 auto; }

@media (max-width: 760px) {
  .shots { grid-template-columns: 1fr 1fr; }
  .shot-stack { grid-column: 1 / -1; grid-template-columns: 3fr 2fr; align-items: center; gap: var(--space-6); }
  .shot-watch img { width: 100%; }
}

@media (prefers-color-scheme: dark) {
  .shot-phone img { border-color: #26282D; }
  /* The tile's black edge would vanish into the dark page. */
  .shot-watch img { border-radius: 50%; box-shadow: 0 0 0 1px var(--outline); }
}

.section { padding: var(--space-12) 0; border-top: 1px solid var(--outline); display: grid; gap: var(--space-8); }
.section > header { display: grid; gap: var(--space-2); max-width: var(--measure); }
.section > header p { color: var(--muted); }

.features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.features li { display: grid; gap: var(--space-1); align-content: start; }
.features p { color: var(--muted); }

.flows { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 0.9375rem; color: var(--muted); }
.flows span { display: inline-flex; align-items: center; gap: var(--space-2); }
.flows span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.flow-solar { color: var(--solar); }
.flow-house { color: var(--house); }
.flow-grid { color: var(--grid); }
.flow-battery { color: var(--battery); }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--space-4); max-width: var(--measure); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); align-items: start; }
.steps li::before { content: counter(step); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--outline); font-weight: 600; font-size: 0.9375rem; }

.card { background: var(--card); border: 1px solid var(--outline); border-radius: var(--radius); padding: var(--space-6);
  display: grid; gap: var(--space-3); max-width: var(--measure); }
.card p { color: var(--muted); }

/* Policy pages */
.doc { padding: var(--space-8) 0 var(--space-16); max-width: var(--measure); display: grid; gap: var(--space-8); }
.doc > header { display: grid; gap: var(--space-2); }
.doc > header p { color: var(--muted); }
.doc h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }
.doc section { display: grid; gap: var(--space-3); }
.doc ul, .doc ol { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-2); }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-top: 1px solid var(--outline); }
.doc th { font-weight: 600; width: 34%; }
.doc td { color: var(--muted); }
.table-scroll { overflow-x: auto; }

/* Footer */
.site-footer { border-top: 1px solid var(--outline); padding: var(--space-8) 0 var(--space-12); color: var(--muted); font-size: 0.875rem; }
.site-footer .page { display: grid; gap: var(--space-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

@media (max-width: 560px) {
  .site-nav { gap: var(--space-4); }
  .hero { padding: var(--space-8) 0 var(--space-12); }
  .hero .lede { font-size: 1.125rem; }
}