/*
 * THE "VIEW FULL SPECIFICATIONS" POP-UP (W184, Ryan 2026-09-04).
 *
 * Served as a static asset and pulled in by `<PdpSpecsStyles>` rather than
 * `import`ed, for the reason given at the top of chrome.css.
 *
 * Class prefix `sf-fsp-` (full spec pop-up).
 *
 * THE FRAME IS NOT HERE. `modal.css` owns the dialog, scrim, panel, rise,
 * well-gray header row, close cross and scrolling content row; a copy in this
 * sheet would RACE it on whichever `<link>` React hoisted last. The one frame
 * number that is this board's is the panel width — 780, the measure every
 * shade pop-up on this storefront uses.
 *
 * NO FOCUS-RING SECTION: unlike the shade pop-ups, this one holds no control
 * of its own — every specification is plain text, and the only interactive
 * element in the whole panel is the shell's own close cross, already ringed
 * by `modal.css`.
 */

.sf-fsp__panel {
  width: 780px;
}

/*
 * THE SYSTEM'S OWN NAME, so a spec sheet opened after scrolling past several
 * cards on the rail still says which system it is describing — the header
 * band says "Full Specifications", not the product's own name.
 */
.sf-fsp__name {
  color: var(--brand-color-ink, #17181a);
  font-family: var(--brand-font-heading, system-ui, sans-serif);
  font-size: var(--text-section);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  padding: 30px 36px 0;
}

/*
 * THE LIST. One row per `COMPARISON.specs` entry (`content.ts`'s
 * `fullSpecsFor`) — fifteen on every THOR system today, more than the rail's
 * own four-row highlight ever draws, which is the entire point of this
 * pop-up existing.
 */
.sf-fsp__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 20px 36px 36px;
}

.sf-fsp__row {
  border-bottom: 1px solid var(--brand-color-line, #e8e7e3);
  display: flex;
  gap: 20px;
  padding-bottom: 16px;
}

/* THE LAST ROW DOES NOT DRAW THE HAIRLINE the others use to separate
 * themselves from the row below — there is no row below it, and a line above
 * empty space reads as an accident rather than a rule. */
.sf-fsp__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sf-fsp__label {
  color: var(--brand-color-ink, #17181a);
  flex: none;
  font-weight: 700;
  width: 160px;
}

.sf-fsp__value {
  color: var(--brand-color-ink, #17181a);
  flex: 1;
  margin: 0;
}

.sf-fsp__note {
  color: var(--brand-color-muted, #6c6a62);
}

/* -------------------------------------------------------------- a phone -- */

@media (max-width: 767.98px) {
  .sf-fsp__name {
    padding: 26px 20px 0;
  }

  .sf-fsp__list {
    padding: 16px 20px 28px;
  }

  /* THE LABEL STOPS BEING A FIXED COLUMN below the rung the rail itself
   * stacks at — 160px of label plus a real value at 15px body size is a
   * collision on a 360px panel the same way the rail's own featured-spec
   * column never has to face, because that block never carries a label this
   * wide ("Lightning Adjust™" and "Board Material" both are). */
  .sf-fsp__row {
    flex-direction: column;
    gap: 4px;
  }

  .sf-fsp__label {
    width: auto;
  }
}