/* Voynich 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); }
}

/* App Previews: one landscape (Mac) beside one portrait (iPhone). The grid
   gives the wide clip the room it needs and caps the tall one so a portrait
   video never dominates the row. */
.demo-grid {
  display: grid; gap: clamp(16px, 3vw, 28px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .demo-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
}
.demo { margin: 0; }
.demo video {
  inline-size: 100%; block-size: auto; display: block;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.demo--tall { justify-self: center; max-inline-size: 320px; }
.demo figcaption {
  margin-block-start: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft);
}

/* screenshots: one large stage + a thumbnail carousel to switch.
   Pure CSS (radio + sibling combinator), no JS. */
.shot-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.shot-stage {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 16 / 10;   /* the Mac captures are 2880×1800 */
}
.shot-main {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  display: none; object-fit: contain; background: var(--surface);
  padding: 20px;
}
#shot-1:checked ~ .shot-stage img[data-shot="shot-1"],
#shot-2:checked ~ .shot-stage img[data-shot="shot-2"],
#shot-3:checked ~ .shot-stage img[data-shot="shot-3"],
#shot-4:checked ~ .shot-stage img[data-shot="shot-4"],
#shot-5:checked ~ .shot-stage img[data-shot="shot-5"] { display: block; }

/* carousel of thumbnails */
.shot-track {
  display: flex; gap: 12px; margin-block-start: 16px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-block-end: 4px; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.shot-thumb {
  flex: 0 0 auto; inline-size: clamp(150px, 24vw, 220px);
  scroll-snap-align: start; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
}
.shot-thumb img {
  inline-size: 100%; block-size: auto; object-fit: cover; display: block;
  border: 1px solid var(--line); border-radius: 8px; opacity: 0.55;
  aspect-ratio: 16 / 10;
  transition: opacity 0.15s ease-out, border-color 0.15s ease-out, transform 0.18s ease-out;
}
.shot-thumb:hover img { opacity: 0.85; transform: translateY(-2px); }
.shot-thumb-label {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft);
  transition: color 0.15s ease-out;
}
/* active item — full opacity, ink hairline, ink label */
#shot-1:checked ~ .shot-track label[for="shot-1"] img,
#shot-2:checked ~ .shot-track label[for="shot-2"] img,
#shot-3:checked ~ .shot-track label[for="shot-3"] img,
#shot-4:checked ~ .shot-track label[for="shot-4"] img,
#shot-5:checked ~ .shot-track label[for="shot-5"] img { opacity: 1; border-color: var(--ink); }
#shot-1:checked ~ .shot-track label[for="shot-1"] .shot-thumb-label,
#shot-2:checked ~ .shot-track label[for="shot-2"] .shot-thumb-label,
#shot-3:checked ~ .shot-track label[for="shot-3"] .shot-thumb-label,
#shot-4:checked ~ .shot-track label[for="shot-4"] .shot-thumb-label,
#shot-5:checked ~ .shot-track label[for="shot-5"] .shot-thumb-label { color: var(--ink); }
/* keyboard focus on the (hidden) radio → ring on its thumb */
#shot-1:focus-visible ~ .shot-track label[for="shot-1"] img,
#shot-2:focus-visible ~ .shot-track label[for="shot-2"] img,
#shot-3:focus-visible ~ .shot-track label[for="shot-3"] img,
#shot-4:focus-visible ~ .shot-track label[for="shot-4"] img,
#shot-5:focus-visible ~ .shot-track label[for="shot-5"] img { outline: 2px solid var(--accent); outline-offset: 2px; }

/* getting started: numbered editorial 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; }

/* Pricing line under the hero badges. Same muted ink and measure as
   .lede/.step p so it reads as a footnote to the actions, not a second lede. */
.hero-note {
  margin-block-start: 14px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-inline-size: 56ch;
}

/* ---------- recovery guide (recovery/) ---------- */
/* 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. The markup
   carries dir="ltr"; this styles it. */
.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; }

.guide-list {
  margin: 0; padding: 0; list-style: none;
  border-block-start: 1px solid var(--line);
  max-inline-size: 68ch;
}
.guide-list li {
  padding-block: 16px;
  border-block-end: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.97rem;
}
.guide-list li strong { color: var(--ink); }

.guide-para {
  color: var(--ink-soft);
  font-size: 0.97rem;
  max-inline-size: 68ch;
}
.guide-para + .cmd { margin-block-start: 16px; }

/* the recovery steps carry commands, so they need more room than the home page's */
.step .cmd { max-inline-size: 68ch; }
.step p + .cmd + p { margin-block-start: 12px; }

/* an inline "read more" link under a feature card */
.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;
}

/* Inline code inside generated guide copy (the strings carry
   <code class="inline"> from the shared source) and the note paragraph that
   introduces the .mdvault command. */
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;   /* a path or flag never mirrors */
}
.guide-note { margin-block-start: 28px; color: var(--ink); }