/* The demo site. Dark first, like most Home Assistant dashboards; light when the device or the
   switch asks for it. The Home Assistant theme variables the cards read are set here too.
   Layout: a slim bar with the pages, then the page's sections in a grid that becomes one column on a phone. */
:root {
  --page: #111113; --bar: rgb(17 17 19 / 0.78); --fg: #ececee; --fg2: #9a9aa0; --fg3: #5e5e64;
  --hair: rgb(255 255 255 / 0.08); --well: rgb(255 255 255 / 0.05); --accent: #f5b83d; --brand: #f5b83d;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --page: #f2f1ee; --bar: rgb(242 241 238 / 0.82); --fg: #1b1b1d; --fg2: #67676d; --fg3: #a3a3a8;
  --hair: rgb(24 24 28 / 0.09); --well: rgb(24 24 28 / 0.05); --accent: #b07a12; --brand: #c97f0b;
  color-scheme: light;
}
/* what Home Assistant's theme gives every card */
body {
  --primary-text-color: #e8e8ea; --secondary-text-color: #9a9aa0; --disabled-text-color: #6b6b70;
  --card-background-color: #1c1c1f; --ha-card-background: #1c1c1f; --divider-color: rgb(232 232 234 / 0.12); --primary-color: #7aa2f7;
  --ha-card-border-radius: 18px; --ha-card-border-color: rgb(255 255 255 / 0.06);
}
body.light {
  --primary-text-color: #1b1b1d; --secondary-text-color: #67676d; --disabled-text-color: #b0b0b5;
  --card-background-color: #ffffff; --ha-card-background: #ffffff; --divider-color: rgb(0 0 0 / 0.1); --primary-color: #3c6bd6;
  --ha-card-border-color: rgb(24 24 28 / 0.06); --ha-card-box-shadow: 0 1px 2px rgb(40 36 30 / 0.04), 0 10px 28px -18px rgb(40 36 30 / 0.22);
}

* { box-sizing: border-box; }
html { background: var(--page); }
/* a dashboard, not a document: no double-tap zoom and no pinch zoom, anywhere (scrolling stays). touch-action does
   not reach into a card's shadow root, so ha-shim.js gives every shadow root the same rule */
html, body, * { touch-action: pan-x pan-y; }
body { margin: 0; background: var(--page); color: var(--fg); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ---- the bar: brand, pages, theme */
.bar { position: sticky; top: 0; z-index: 50; background: var(--bar); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--hair); padding-top: env(safe-area-inset-top, 0px); }
.bar-in { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 680; letter-spacing: -0.02em; font-size: 16px; flex: none; }
.brand .logo { height: 22px; width: auto; display: block; flex: none; }
.logo .word, .logo .dot { fill: var(--fg); }
.logo .mark { fill: var(--brand); }
.brand-ui { font-weight: 600; font-size: 11.5px; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 6px; color: var(--fg2); background: var(--well); margin-inline-start: 2px; }
.brand small { font-weight: 500; font-size: 12px; color: var(--fg3); letter-spacing: 0; }
#nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
#nav:dir(rtl) { mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
#nav::-webkit-scrollbar { display: none; }
.nav-group { display: flex; gap: 2px; flex: none; }
.nav-sep { width: 1px; height: 18px; background: var(--hair); margin: 0 8px; flex: none; }
#nav a { position: relative; padding: 7px 11px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 560; color: var(--fg2); white-space: nowrap; letter-spacing: -0.006em; }
#nav a:hover { color: var(--fg); background: var(--well); }
#nav a[aria-current] { color: var(--fg); }
#nav a[aria-current]::after { content: ""; position: absolute; inset-inline-start: 50%; bottom: 1px; width: 4px; height: 4px; margin-inline-start: -2px; border-radius: 50%; background: var(--accent); }
.theme { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--well); flex: none; }
.theme button { padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 560; color: var(--fg2); }
.theme button[aria-pressed="true"] { background: var(--page); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.18); }
@media (max-width: 720px) {
  .bar-in { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px 6px; }
  #nav { order: 3; flex-basis: 100%; margin: 0 -16px; padding: 0 12px; }
  .brand { flex: 1; }
}

/* ---- a page */
main { max-width: 1440px; margin: 0 auto; padding: 20px 20px 32px; }
@media (max-width: 720px) { main { padding: 14px 12px 28px; } }
.theme.lang button { min-width: 34px; font-weight: 640; }
/* the pitch at the top of the home page */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: start; margin: 4px 2px 26px; }
.hero-copy h1 { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 720; max-width: 22ch; text-wrap: balance; }
.hero-copy p { margin: 0 0 16px; max-width: 64ch; color: var(--fg2); font-size: 15.5px; line-height: 1.55; }
.hero .btn { height: 42px; padding: 0 20px; border-radius: 13px; background: var(--brand); color: #1a1408; font-size: 15px; }
.hero-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hero-try > span { font-size: 12.5px; font-weight: 620; color: var(--fg3); margin-inline-end: 4px; }
.chipbtn { height: 34px; padding: 0 14px; border-radius: 99px; background: var(--well); box-shadow: inset 0 0 0 1px var(--hair); font-size: 13.5px; font-weight: 580; color: var(--fg); }
.chipbtn:hover { background: color-mix(in oklab, var(--brand) 16%, transparent); }
.chipbtn:active { transform: scale(0.97); }
.promises { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.promises li { padding: 14px 16px; border-radius: 16px; background: var(--well); box-shadow: inset 0 0 0 1px var(--hair); display: grid; gap: 4px; }
.promises b { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.promises span { font-size: 13px; line-height: 1.5; color: var(--fg2); }
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero .btn { justify-self: start; order: 3; }
  .promises { grid-template-columns: 1fr; }
}
:lang(he) body, :lang(he) button { letter-spacing: 0; }
:lang(he) .hero-copy h1 { letter-spacing: -0.01em; line-height: 1.2; }
.intro { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin: 0 2px 18px; color: var(--fg2); font-size: 14.5px; }
.intro p { margin: 0; flex: 1 1 420px; max-width: 78ch; }
.intro b { color: var(--fg); font-weight: 620; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 12px; background: var(--fg); color: var(--page);
  font-weight: 620; font-size: 14px; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.btn:hover { opacity: 0.88; }
.btn.wide { width: 100%; }

/* Home Assistant's sections view: equal columns, a section spans some of them, and inside a section a grid
   of 12 cells per column, cards as wide as their grid options say, packed densely like Home Assistant packs them */
.sections { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 24px; align-items: start; }
.section { --row-height: 56px; --row-gap: 8px; display: grid; grid-template-columns: repeat(var(--cells, 12), minmax(0, 1fr)); gap: 8px; min-width: 0; align-content: start; grid-auto-flow: row dense; }
.section > * { min-width: 0; grid-column: span 12; }
.card-error { padding: 14px 16px; border-radius: 16px; background: rgb(224 102 102 / 0.12); color: #e06666; font-size: 13px; }

/* ---- the details panel: a sheet from the bottom on a phone, a dialog in the middle on a wide screen */
.info { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.info[hidden], [hidden] { display: none !important; }
.info-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); opacity: 0; transition: opacity 0.22s ease; }
.info-sheet { position: relative; width: min(440px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); overflow: auto; border-radius: 26px; padding: 22px;
  background: var(--card-background-color); color: var(--primary-text-color); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6);
  transform: translateY(16px) scale(0.97); opacity: 0; transition: transform 0.34s cubic-bezier(0.2, 1.2, 0.4, 1), opacity 0.2s ease; }
.info[data-open] .info-scrim { opacity: 1; }
.info[data-open] .info-sheet { transform: none; opacity: 1; }
@media (max-width: 600px) {
  .info { place-items: end stretch; }
  .info-sheet { width: auto; border-radius: 26px 26px 0 0; max-height: 85vh; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) { .info-sheet, .info-scrim { transition: none; } }
.info-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--well); color: var(--fg2); }
.info-close svg { width: 18px; height: 18px; }
.info-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; margin-inline-end: 40px; }
.info-ic { --mdc-icon-size: 28px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--primary-color); }
.info-head h2 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 650; }
.info-head p { margin: 2px 0 0; color: var(--secondary-text-color); font-size: 14px; }
.info-pic { display: block; width: 100%; border-radius: 16px; margin-bottom: 14px; }
.info .btn { margin-bottom: 14px; }
.kvs { display: grid; gap: 0; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px; border-top: 1px solid var(--divider-color); font-size: 14px; }
.kv span { color: var(--secondary-text-color); text-transform: capitalize; }
.kv b { font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.muted { color: var(--secondary-text-color); }
.small { font-size: 12.5px; margin: 14px 0 0; }

/* ---- footer */
.foot { max-width: 1440px; margin: 0 auto; padding: 8px 22px 40px; color: var(--fg3); font-size: 13px; }
.foot p { margin: 0 0 6px; max-width: 90ch; }
.foot a { color: var(--fg2); }
.foot .legal { margin-top: 14px; font-size: 12px; color: var(--fg3); }
.foot .legal a { color: inherit; }