/* ShopFSI — Firmware page
 * Tabbed UI driven by firmware_series + firmware_releases + firmware_release_files.
 * Click a model to expand its release notes/downloads. Download links with
 * warning_html intercept and pop the .fw-modal. */

.firmware-page {
  padding: 2rem 0 4rem;
}
.firmware-page__title {
  font-size: 2rem;
  margin: 0.5rem 0 0.25rem;
}
.firmware-page__subtitle {
  color: var(--text-muted);
  margin: 0 0 2rem;
  max-width: 70ch;
}

/* ── Tabs (top-level group switcher) ───────────────────────────────── */
.fw-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  border-bottom: 2px solid #000;
}
.fw-tabs__btn {
  flex: 1;
  background: var(--bg-surface, #f5f5f5);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-bottom: 0;
  padding: 1rem 1rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background var(--duration, 0.15s) var(--ease, ease);
}
.fw-tabs__btn:hover { background: var(--bg-elevated, #ebebeb); }
.fw-tabs__btn.is-active {
  background: #fff;
  color: var(--text-primary);
  border-color: #000;
  border-width: 2px;
  border-bottom: 0;
  position: relative;
  z-index: 1;
  margin-bottom: -2px;
}
.fw-tabs__label { display: block; font-weight: 600; font-size: 1.05rem; }
.fw-tabs__sub   { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 0.15rem; }

.fw-tab-panel { display: none; }
.fw-tab-panel.is-active { display: block; }

/* ── Series selector row (within a tab) ────────────────────────────── */
.fw-series-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}
.fw-series-tabs__btn {
  flex: 0 0 auto;
  padding: 0.6rem 1.1rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background var(--duration, 0.15s) var(--ease, ease),
              color var(--duration, 0.15s) var(--ease, ease);
}
.fw-series-tabs__btn:hover {
  background: var(--bg-elevated, #ebebeb);
}
.fw-series-tabs__btn.is-active {
  background: #0a0a0a;
  color: #fff;
  border-color: #0a0a0a;
}

/* ── Series block (one per series within a tab; only one shown at once) */
.fw-series {
  display: none;
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card, transparent);
}
.fw-series.is-active { display: block; }
.fw-series__head { margin: 0 0 1rem; }
.fw-series__name { margin: 0 0 0.25rem; font-size: 1.25rem; }
.fw-series__desc { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.fw-series__release-meta {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}
.fw-series__release-date {
  color: var(--text-muted);
  margin-left: 0.75rem;
  font-size: 0.88rem;
}
.fw-series__notes {
  background: var(--bg-surface);
  border-left: 3px solid var(--border);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
}
.fw-series__notes p { margin: 0 0 0.5rem; }
.fw-series__notes p:last-child { margin-bottom: 0; }
.fw-series__notes li { padding-left: 2em; margin-bottom: 0.5rem; }
.fw-series__empty { color: var(--text-muted); font-style: italic; margin: 0; }

/* ── Models list (vertical full-width rows, expand inline on click) ── */
.fw-models {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fw-model {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.fw-model[data-fw-open] { background: #fff; }
.fw-model__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.fw-model__head:hover { background: rgba(0, 0, 0, 0.025); }
.fw-model__name { font-weight: 600; font-size: 1rem; }
.fw-model__meta {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  color: var(--text-muted);
  font-size: 0.88rem;
  white-space: nowrap;
}
.fw-model__version { color: var(--text-primary); font-family: var(--font-mono, ui-monospace, monospace); }
.fw-model__body {
  padding: 0 1rem 1rem;
  text-align: center;
}
.fw-model__body[hidden] { display: none; }
.fw-model__body .cb-rich-text,
.fw-model__body p,
.fw-model__body ul,
.fw-model__body ol { text-align: left; }
@media (max-width: 600px) {
  .fw-model__head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* Downloads laid out as side-by-side icon "columns" (no divider) so it's
   obvious when a model needs more than one file (e.g. Firmware + CFE). */
.fw-files {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem 3rem;
  margin-top: 1.25rem;
}
.fw-file {
  flex: 1 1 0;
  max-width: 520px;
  text-align: center;
}
/* A lone download (no CFE/MHD sibling) gets more horizontal room so long
   warnings don't wrap into a tall, narrow column. */
.fw-file:only-child {
  max-width: 1020px;
}
/* 3+ downloads (e.g. Firmware + CFE + MHD) lay out in a 2-column grid instead
   of squeezing 3-wide, so each gets ~half-width room. */
.fw-files--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 3rem;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.fw-files--grid .fw-file { max-width: none; }

/* Alternates (AutoCal vs Pre-AutoCal): stacked options, each with a heading +
   explanation above its download, so it's clear they're a choose-one based on
   the unit's current firmware — not a both-needed pair. */
.fw-files--stacked {
  display: block;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.fw-files--stacked .fw-file { max-width: none; padding: 1.5rem 0; }
.fw-files--stacked .fw-file:first-child { padding-top: 0; }
.fw-files--stacked .fw-file + .fw-file { border-top: 1px solid var(--border); }
.fw-files--stacked .fw-file__notes { margin: 0 0 1rem; }
.fw-file__heading {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}
.fw-file__download {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #0a0a0a;
}
.fw-file__icon {
  width: 72px;
  height: 72px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.fw-file__download:hover .fw-file__icon { transform: translateY(-2px); opacity: 0.85; }
.fw-file__caption { font-weight: 600; font-size: 0.95rem; }
.fw-file__download:hover .fw-file__caption { text-decoration: underline; }
.fw-file__notes {
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
}
.fw-file__notes p { margin: 0 0 0.6rem; text-align: center; }
.fw-file__notes p:last-child { margin-bottom: 0; }

/* ── Warning modal ─────────────────────────────────────────────────── */
.fw-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fw-modal[hidden] { display: none; }
/* XM gate stacks above the standard confirm modal and fully obscures it.
   Extra padding makes its dialog tall enough to cover the modal behind, and
   the wider width keeps the top warning on a single line. */
.fw-modal--xm { z-index: 10000; }
.fw-modal--xm .fw-modal__backdrop { background: rgba(0, 0, 0, 0.92); }
.fw-modal--xm .fw-modal__dialog {
  width: min(740px, calc(100% - 2rem));
  padding: 5rem 1.5rem;
}
.fw-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.fw-modal__dialog {
  position: relative;
  background: #fff;
  color: #0a0a0a;
  border-radius: var(--radius);
  padding: 1.5rem;
  width: min(560px, calc(100% - 2rem));
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.fw-modal__title {
  margin: 0 0 1rem;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
}
.fw-modal__body {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
}
.fw-modal__body p { margin: 0 0 0.85rem; }
.fw-modal__body p:last-child { margin-bottom: 0; }
.fw-modal__lead { font-size: 1.02rem; }
.fw-modal__version { color: var(--text-muted); }
.fw-modal__footer {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

/* ── Page-level view switch (Firmware / Release Notes) ─────────── */
.fw-page-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1rem;
}
.fw-page-nav__switch {
  display: flex;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  background: var(--bg-surface);
}
.fw-page-nav__btn {
  padding: 0.5rem 1rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
}
.fw-page-nav__btn.is-active {
  background: #0a0a0a;
  color: #fff;
}
[data-fw-view][hidden] { display: none; }

/* ── Release-notes archive (separate view, toggled from .fw-page-nav) */
.fw-archive__title { margin: 0 0 0.25rem; font-size: 1.5rem; }
.fw-archive__back { margin: 0 0 1rem; }
.fw-archive__back-btn {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
}
.fw-archive__back-btn:hover { color: var(--text-primary); }
.fw-archive__sub { color: var(--text-muted); margin: 0 0 1.25rem; font-size: 0.9rem; }
.fw-archive__title { margin-top: 0; }
.fw-archive__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fw-archive__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.fw-archive__table th,
.fw-archive__table td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.fw-archive__table thead th {
  background: var(--bg-surface);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.fw-archive__table tbody tr:last-child td { border-bottom: 0; }
.fw-archive__date    { white-space: nowrap; color: var(--text-muted); }
.fw-archive__version { white-space: nowrap; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.88rem; }
.fw-archive__series  {
  /* Each target sits on its own line (via <br>); keep the column compact —
     ~170px but viewport-responsive, not a hard pixel lock. Long prose values
     wrap within the cap instead of stretching the whole table. */
  width: clamp(140px, 13vw, 180px);
  white-space: normal;
  overflow-wrap: break-word;
}
.fw-archive__notes   { line-height: 1.55; }
.fw-archive__notes p { margin: 0 0 0.5rem; }
.fw-archive__notes p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .fw-archive__table { font-size: 0.85rem; }
  .fw-archive__table th,
  .fw-archive__table td { padding: 0.5rem 0.6rem; }
}

/* "Easy To Update" guide PDFs — all six side by side, wrapping responsively.
   Each links an icon over a caption; the caption's "Update Instructions PDF"
   sits on its own line via a <br> in the content. */
.fw-pdf-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem 1.75rem;
  margin: 1.5rem 0;
}
.fw-pdf-row > p {
  flex: 1 1 150px;
  max-width: 200px;
  margin: 0;
  line-height: 1.4;
  text-align: center;
}