/* Bitstrom product site — page-specific components.
   The design system itself lives in style.css (synced from the repo root). */

/* header: app icon next to the product wordmark */
.product-mark { display: inline-flex; align-items: center; gap: 10px; }
.product-mark-icon { inline-size: 28px; block-size: 28px; border-radius: 22.5%; }
/* narrow phones: icon-only wordmark so the nav never collides */
@media (max-width: 519px) {
  .product-mark-name { display: none; }
}

/* language menu — current code highlighted like selected text (a tight
   light-gray rectangle behind it, in the site's neutral palette); click
   stacks the other codes below, text starts aligned. Pure <details>, no JS. */
.lang-menu { position: relative; display: inline-block; }
.lang-chip {
  display: inline-block;
  background: var(--line); color: var(--ink);
  font-family: var(--font-mono); font-size: 0.82rem;
  padding: 2px 6px; border-radius: 3px;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.lang-menu summary {
  list-style: none; cursor: pointer; padding-block: 8px;
  display: inline-block;   /* shrink-wrap so the chip starts on the menu's edge */
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover .lang-chip { background: var(--ink); color: var(--accent-ink); }
/* open list: stacked, each chip's text start aligned with the summary's */
.lang-menu ul {
  position: absolute; inset-inline-start: 0; inset-block-start: 100%;
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 60;
}
.lang-menu ul a.lang-chip { text-decoration: none; color: var(--ink); }
.lang-menu ul a.lang-chip:hover { background: var(--ink); color: var(--accent-ink); }

/* hero: large app icon above the overline */
.product-hero-icon {
  inline-size: clamp(72px, 10vw, 96px); block-size: auto;
  border-radius: 22.5%; margin-block-end: 24px;
  outline: 1px solid rgba(29, 29, 31, 0.1); outline-offset: -1px;
}

/* official App Store badges; unlinked until the listing is live, so the
   coming-soon chip sits on the same baseline as the badge art. */
.store-badge { display: inline-flex; align-items: center; }
.store-badge img { block-size: 52px; inline-size: auto; display: block; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }

/* features: six caps sit better on three columns */
@media (min-width: 1080px) {
  .cap-grid--three { grid-template-columns: repeat(3, 1fr); }
}

/* hero buttons: direct downloads now, store badges behind flags */
.store-badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.store-badge img { block-size: 52px; inline-size: auto; display: block; }
.store-badge img.play-badge { block-size: 77px; }
a.store-badge { transition: opacity 0.2s ease; }
a.store-badge:hover { opacity: 0.82; }

/* where a store listing is not live yet: a chip, never a dead badge */
.store-pending { margin-block-start: 14px; }

/* the line under the hero buttons — price and signing, not marketing */
.hero-fineprint {
  margin-block-start: 18px; max-inline-size: 56ch;
  font-size: 0.9rem; color: var(--ink-soft);
}

/* screenshots: a grid of buttons opening a lightbox (inline script) — copied
   from apps/app-page.css, the tier-2 family, so both tiers look alike */
/* screenshots */
.shot-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .shot-grid { grid-template-columns: repeat(2, 1fr); } }
/* phone captures: two across on a phone, all of them in one row from 900px */
.shot-grid--phone { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .shot-grid--phone { grid-template-columns: repeat(4, 1fr); } }
.shot {
  inline-size: 100%; block-size: auto;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); display: block;
}

/* each screenshot is a button that opens the lightbox (see the inline
   script in app-page-template.html). Reset button chrome WITHOUT touching
   opacity/transform, so the .reveal animation on the same element survives. */
.shot-btn {
  display: block; inline-size: 100%; padding: 0; border: 0;
  background: none; font: inherit; color: inherit; cursor: zoom-in;
  -webkit-appearance: none; appearance: none;
}
.shot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-card); }

/* lightbox overlay (one per page, built by the inline script) */
.shot-modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(15, 15, 17, 0.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.shot-modal.is-open { display: flex; }
.shot-modal-img {
  max-inline-size: min(2560px, 92vw); max-block-size: 90vh;
  inline-size: auto; block-size: auto;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  background: var(--surface);
}
.shot-modal-close {
  position: absolute;
  inset-block-start: clamp(10px, 2vw, 20px); inset-inline-end: clamp(10px, 2vw, 20px);
  inline-size: 44px; block-size: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1; color: #fff;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%; cursor: pointer;
  transition: background 0.15s ease-out;
}
.shot-modal-close:hover { background: rgba(255, 255, 255, 0.24); }
.shot-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .shot-modal.is-open { animation: shot-modal-in 0.18s ease-out; }
  @keyframes shot-modal-in { from { opacity: 0; } to { opacity: 1; } }
}

/* The numbers strip — one figure per claim, sitting between the problem and the
   screenshots. Cells are page-coloured and the 1px grid gap draws the hairlines,
   so the strip reads as a rule across the page rather than as a row of boxes. */
.stats-section { padding-block: clamp(24px, 4vw, 40px); }
.stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden;
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: clamp(22px, 3vw, 30px) 12px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft);
}
:lang(he) .stat-label { letter-spacing: 0.04em; }


/* Player and source logos — each vendor's own published mark (its App Store
   icon, or its site's logo where it has no app). The one place on this site
   where colour other than the app icon appears; see sites/bitstrom/DESIGN.md. */
.brand-logo {
  display: block; inline-size: 48px; block-size: 48px;
  border-radius: 22.5%; object-fit: cover;
  outline: 1px solid rgba(29, 29, 31, 0.1); outline-offset: -1px;
  margin-block-end: 14px;
}
/* marks drawn on transparency sit on a white tile with a margin */
.brand-logo--white { object-fit: contain; background: #fff; padding: 6px; }
.brand-logo--small { inline-size: 32px; block-size: 32px; margin: 0; }
.brand-logo--small.brand-logo--white { padding: 3px; }
.brand-row {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* ---------- the server section ---------- */
/* numbered install steps */
.steps { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: clamp(14px, 3vw, 28px); padding-block: clamp(18px, 3vw, 26px);
  border-block-end: 1px solid var(--line);
}
.step-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); padding-block-start: 4px; }
.step h3 { margin-block-end: 6px; }
.step p { color: var(--ink-soft); font-size: 0.97rem; max-inline-size: 64ch; }

/* The numbers strip — one figure per claim, sitting between the problem and the
   screenshots. Cells are page-coloured and the 1px grid gap draws the hairlines,

/* Commands are always LTR and monospaced, including on the Hebrew page — a
   shell line reversed by the bidi algorithm is not a command any more. */
.cmd {
  margin-block: 12px 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;                 /* long lines scroll, the page never does */
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.6;
  text-align: start;
}
.cmd code { white-space: pre; }
.step .cmd { max-inline-size: 68ch; }
/* a grid item grows to its longest line unless told otherwise; this keeps the
   command box scrolling inside itself instead of widening the page */
.step > div { min-inline-size: 0; }
code.inline {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px;
  unicode-bidi: isolate; direction: ltr;   /* an address or a path never mirrors */
}
/* a sub-heading inside one section: what it adds, how to install */
.track-head {
  margin: 2.5rem 0 1rem;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
}
/* "reachable from other devices" — the one fact that tells the forms apart */
.reach { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); margin-block-start: 8px; }
.cap-link {
  display: inline-block; margin-block-start: 10px;
  font-size: 0.92rem; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.step-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 14px 4px; }
.step p + .cmd { margin-block-start: 12px; }
.step .cmd + p { margin-block-start: 14px; }
.hero-fineprint a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* the hero badges jump to an install step: leave room for the sticky header */
.step[id] { scroll-margin-block-start: 88px; }
/* The official My Home Assistant badges, as Home Assistant publishes them
   (my.home-assistant.io/badges), served from this site. */
.step-actions { align-items: center; }
.my-ha-badge { display: inline-flex; transition: opacity 0.2s ease; }
.my-ha-badge:hover { opacity: 0.85; }
/* 44px tall from the width/height attributes; on a narrow screen the badge
   scales down whole rather than squeezing its type */
.my-ha-badge { max-inline-size: 100%; }
.my-ha-badge img { block-size: 44px; inline-size: auto; max-inline-size: 100%; object-fit: contain; display: block; }