/* TasmoShelf website.
   Self-hosted, no third-party requests — the same promise the app makes.

   Two type registers carry the whole design: the sans speaks for the product,
   the monospace speaks wherever the machine does (commands, JSON keys, watt
   readings, section marks). Amber is reserved for live measurement and is
   never used decoratively, so it means the same thing here as in the app. */

:root {
  --teal: #0E9F9A;
  --teal-deep: #075B5C;
  --live: #B96A00;

  --ink: #0F1A19;
  --dim: #4B5C59;
  --faint: #6E807D;
  --ground: #FBFCFB;
  --panel: #F2F6F5;
  --rule: #DCE6E4;
  --tile: #FFFFFF;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --gutter: 9.5rem;
  --maxw: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8F0EE;
    --dim: #A3B7B3;
    --faint: #7E918E;
    --ground: #0B1211;
    --panel: #131D1C;
    --rule: #22302E;
    --tile: #182322;
    --live: #F0A93C;
    --teal: #2BBFB6;
  }
}
:root[data-theme="dark"] {
  --ink: #E8F0EE;
  --dim: #A3B7B3;
  --faint: #7E918E;
  --ground: #0B1211;
  --panel: #131D1C;
  --rule: #22302E;
  --tile: #182322;
  --live: #F0A93C;
  --teal: #2BBFB6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
}

a { color: var(--teal); text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* Two-column rhythm: a narrow mark in the gutter, content in the main column,
   mirroring the app's list rows. Collapses to one column on small screens. */
.row { display: grid; gap: 0 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .row { grid-template-columns: var(--gutter) minmax(0, 1fr); }
}

.mark {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: .5rem;
}

/* ---- header ---- */

header { border-bottom: 1px solid var(--rule); }
.bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 0; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.01em; }
.brand svg { width: 28px; height: 28px; border-radius: 7px; display: block; }
.bar nav { margin-left: auto; display: flex; gap: 1.1rem; align-items: center; }
.bar nav a {
  color: var(--dim); text-decoration: none;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
}
.bar nav a:hover { color: var(--ink); }
.lang { border: 1px solid var(--rule); border-radius: 999px; padding: .25rem .7rem; }

/* ---- hero ---- */

.hero { padding: 4.5rem 0 3.5rem; }
.hero h1 {
  font-size: clamp(2.2rem, 5.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 .8rem;
  text-wrap: balance;
  max-width: 18ch;
}
.lead {
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  color: var(--dim);
  max-width: 38rem;
  margin: 0 0 1.8rem;
}
.claims {
  color: var(--faint);
  max-width: 38rem;
  margin: 0 0 2rem;
  font-size: .95rem;
}

/* The hero object: a working device row, the most characteristic thing in the
   product's world. */
.demo {
  background: var(--tile);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: .9rem 1rem;
  display: flex; align-items: center; gap: .9rem;
  max-width: 30rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.demo .glyph {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  color: var(--teal);
}
.demo .who { min-width: 0; flex: 1; }
.demo .name { font-weight: 600; }
.demo .meta {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; color: var(--dim);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #17A34A; flex: none; }
.watt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--live);
  font-size: .82rem;
}
.sw {
  appearance: none; -webkit-appearance: none;
  width: 52px; height: 31px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel);
  position: relative; cursor: pointer; flex: none; margin: 0;
}
.sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 25px; height: 25px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25);
}
.sw:checked { background: var(--teal); border-color: var(--teal); }
.sw:checked::after { left: 23px; }
@media (prefers-reduced-motion: no-preference) {
  .sw, .sw::after { transition: background .18s ease, left .18s ease; }
}
.demo-hint {
  font-family: var(--mono); font-size: .72rem; color: var(--faint);
  margin: .6rem 0 0; max-width: 30rem;
}

.notice {
  border-left: 3px solid var(--teal);
  background: var(--panel);
  padding: .85rem 1.1rem;
  margin: 2.2rem 0 0;
  max-width: 38rem;
  border-radius: 0 10px 10px 0;
  color: var(--dim);
}
.notice strong { color: var(--ink); }

/* ---- sections ---- */

section { border-top: 1px solid var(--rule); padding: 3.2rem 0; }
section h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
  text-wrap: balance;
}
section p { max-width: 44rem; color: var(--dim); margin: 0 0 1rem; }
section p strong { color: var(--ink); }
section p:last-child { margin-bottom: 0; }

.cards { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); margin-top: 1.6rem; }
.cards > div { border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.1rem; background: var(--panel); }
.cards h3 { margin: 0 0 .3rem; font-size: 1rem; }
.cards p { margin: 0; font-size: .93rem; }

.tablewrap { overflow-x: auto; margin-top: 1.5rem; border: 1px solid var(--rule); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 33rem; font-size: .94rem; }
th, td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
thead th {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); font-weight: 500;
  background: var(--panel);
}
tbody td:first-child { font-weight: 600; white-space: nowrap; }
td code, p code, li code {
  font-family: var(--mono); font-size: .88em;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 5px; padding: .05em .35em;
}

details { border-top: 1px solid var(--rule); padding: .9rem 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; font-weight: 600; list-style-position: outside; }
details p { margin: .55rem 0 0; }

.count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: -.02em;
  color: var(--ink);
  display: block;
  line-height: 1.1;
  margin-bottom: .2rem;
}

/* Store/download actions. One visual weight for "go get it", a filled variant
   for the purchase itself. Both meet the 48px touch minimum. */
.cta {
  display: inline-block;
  margin-top: .75rem;
  padding: .7rem 1.15rem;
  border: 1.5px solid var(--teal);
  border-radius: 10px;
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  min-height: 48px;
  line-height: 1.9;
}
.cta.buy {
  background: var(--teal);
  color: var(--ground);
  margin-left: .5rem;
}
.cta:focus-visible { outline-offset: 4px; }
.soon { color: var(--faint); font-style: normal; margin: .75rem 0 0; }

footer { border-top: 1px solid var(--rule); padding: 2.2rem 0 3.5rem; }
footer p { color: var(--faint); font-size: .87rem; max-width: 44rem; margin: 0 0 .7rem; }
footer a { color: var(--dim); }