/* kaamos product page. Everything general comes from brand/tokens.css and brand/components.css (Valo).
   This file holds only what belongs to kaamos: its accent, the hero arrangement and the sun-year chart. */
:root {
  --product: #e0691f;       /* the setup button's orange: dots and marks only */
  --product-text: #a3480b;  /* 5.7:1 on snow, 5.2:1 on stage */
  /* sun-year chart: night is graphite, day is a tint of the accent (day on night 7.8:1) */
  --chart-night: #262b31;
  --chart-day: #f2b282;
  --chart-grid: rgba(255, 255, 255, .22);
  --chart-now: var(--ink);
  --chart-halo: var(--snow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --product: #f07a32; --product-text: #f39a5e;
    --chart-night: #23282d; --chart-day: #e2834a; --chart-grid: rgba(255, 255, 255, .14);
  }
}
:root[data-theme="dark"] {
  --product: #f07a32; --product-text: #f39a5e;
  --chart-night: #23282d; --chart-day: #e2834a; --chart-grid: rgba(255, 255, 255, .14);
}

/* hero: headline and lede side by side, then the device alone on its stage, then four numbers */
.hero { padding-top: var(--s7); }
.hero h1 { margin-top: var(--s4); max-width: 15ch; }
.hero h1 .muted { display: block; }
.hero-side { display: grid; gap: var(--s5); }
.hero-stage { margin-top: var(--s7); }
.hero-figures { margin-top: var(--s6); }
@media (min-width: 900px) {
  .hero { padding-top: var(--s9); }
  .hero .split { grid-template-columns: 8fr 4fr; }
  .hero-stage { margin-top: var(--s8); }
  .hero-figures { margin-top: var(--s7); }
}

/* the sun-year chart */
.year .section-head { margin-bottom: var(--s6); }
.places { display: flex; flex-wrap: wrap; gap: var(--s2); }
.place { min-height: 36px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent;
  color: var(--text); font: var(--w-medium) 14px/1 var(--font-sans); cursor: pointer; transition: border-color var(--dur) var(--ease); }
.place:hover { border-color: var(--text-muted); }
.place[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chart { display: grid; gap: var(--s3); margin-top: var(--s5); }
#sunyear { display: block; width: 100%; height: clamp(220px, 32vw, 380px); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.legend > span { display: inline-flex; align-items: center; gap: var(--s2); }
.lg { display: inline-block; width: 14px; height: 10px; }
.lg.day { background: var(--chart-day); }
.lg.nite { background: var(--chart-night); }
.lg.now { width: 2px; height: 12px; background: var(--chart-now); }
.readout { margin-top: var(--s5); font-size: 17px; font-variant-numeric: tabular-nums; }
.year .util:last-child { margin-top: var(--s2); }

/* what's inside: features beside the three-quarter render */
@media (min-width: 900px) { .inside { grid-template-columns: 7fr 5fr; gap: var(--s5) var(--s7); } }
.inside .stage { margin: 0; }