/* =============================================================================
   OpenMFDA Foundry — products.css
   Product pages: /library/products/<slug>/

   Nothing here hides content. The variant panels are visible by default and
   only assets/js/products.js sets `hidden` on the ones you are not looking at,
   so a reader with scripting off sees every variant. A rule like
   `.pv { display: none }` with JS to reveal would put the catalogue's contents
   behind a script, which is the one thing these pages must not do.
   ========================================================================== */

.pd { padding: 2.5rem 0 4rem; max-width: 62rem; }

.pd-crumbs { font-size: .875rem; margin-bottom: 1.25rem; color: var(--color-slate, #4a5568); }
.pd-crumbs span[aria-hidden] { opacity: .5; margin: 0 .35rem; }

.pd-head { border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 1rem; margin-bottom: 1.75rem; }
.pd-title { margin: 0 0 .35rem; line-height: 1.15; }
.pd-count { margin: 0; font-size: .9rem; color: var(--color-slate, #4a5568); }

.pd-plain { margin-bottom: 1.75rem; }
.pd-summary { font-size: 1.125rem; line-height: 1.65; margin: 0 0 1rem; }
.pd-for { margin: 0 0 1rem; line-height: 1.65; }
.pd-axes { margin: 0; font-size: .95rem; color: var(--color-slate, #4a5568); }

/* A claim the reader needs before they trust the numbers below it, so it sits
   in the summary layer rather than inside a <details>. */
.pd-warn {
  border-left: 4px solid #b45309;
  background: rgba(180, 83, 9, .07);
  padding: .85rem 1rem;
  margin: 1rem 0;
  line-height: 1.6;
  font-size: .95rem;
  border-radius: 0 4px 4px 0;
}

.pd-details { margin: 0 0 .75rem; }
.pd-details > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
.pd-details > summary:hover { color: var(--color-teal, #1C7293); }
.pd-details > p { line-height: 1.65; margin: .5rem 0 .75rem; }

.pd-tech { margin-bottom: 2.25rem; }

.pd-variants > h2 { margin: 0 0 1rem; }

.pd-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .9rem 1rem; margin-bottom: 1.5rem;
  background: rgba(28, 114, 147, .07);
  border-radius: 6px;
}
.pd-picker label { font-weight: 600; }
.pd-picker select {
  font: inherit; padding: .4rem .6rem; border-radius: 4px;
  border: 1px solid rgba(0,0,0,.25); background: #fff; max-width: 100%;
}
.pd-picker__note { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--color-slate, #4a5568); }

.pv {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
}
.pv__name { margin: 0 0 .5rem; font-size: 1.05rem; }
.pv__name code { font-size: inherit; }
.pv__status { margin: 0 0 .9rem; }
.pv-status {
  display: inline-block; font-size: .8rem; padding: .18rem .5rem;
  border-radius: 3px; background: rgba(0,0,0,.06);
}

.pv-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pv-table th, .pv-table td { text-align: left; padding: .4rem .6rem .4rem 0; vertical-align: top; }
.pv-table th { font-weight: 600; width: 16rem; }
.pv-table tr + tr th, .pv-table tr + tr td { border-top: 1px solid rgba(0,0,0,.07); }
.pv-table--legend th { width: 22rem; }

.pv__fileshead { margin: 1.1rem 0 .5rem; font-size: .95rem; }
.pv-files { list-style: none; margin: 0; padding: 0; }
.pv-file {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .45rem 0; border-top: 1px solid rgba(0,0,0,.07);
}
.pv-file__type {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .15rem .4rem; border-radius: 3px; background: rgba(28,114,147,.12);
}
.pv-file__name { flex: 1 1 14rem; word-break: break-all; }
.pv-file__size { font-size: .82rem; color: var(--color-slate, #4a5568); }
.pv-file__note {
  flex-basis: 100%; font-size: .85rem; color: var(--color-accent-ink);
}
.pv-file__btn {
  font-size: .85rem; padding: .3rem .7rem; border-radius: 4px;
  border: 1px solid currentColor; text-decoration: none;
}
.pv-nofiles { margin: 0; font-size: .9rem; color: var(--color-slate, #4a5568); }

.pd-back { margin-top: 2rem; }

/* Wide parameter tables scroll inside themselves rather than pushing the page
   sideways on a phone. */
@media (max-width: 40rem) {
  .pv-table th { width: auto; }
  .pv-table { display: block; overflow-x: auto; }
}

/* The design-grid statement. Sits in the summary layer, above the variant
   tables it applies to — `px` means the printer's pixel on /design/*, and the
   design grid here, and a reader arriving from one must not carry the other
   assumption into these numbers. */
.pd-grid {
  border-left: 4px solid var(--color-teal, #1C7293);
  background: rgba(28, 114, 147, .07);
  padding: .8rem 1rem;
  margin: 0 0 1.25rem;
  font-size: .95rem;
  line-height: 1.6;
  border-radius: 0 4px 4px 0;
}

/* --------------------------------------------------------------------------
   Design review 2026-10-03, item 3 (with main.css): the same title scale and
   prose measure on the product pages.
   -------------------------------------------------------------------------- */
.pd-title {
  font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}

.pd-summary, .pd-for { max-width: 68ch; }

/* --------------------------------------------------------------------------
   Design review 2026-10-03, item 6: product pages read like specifications.
   The summary and its purpose, then the variants, with the credit, what
   changes between variants and the technical details in a panel beside them
   on a wide screen (.pd-context), below them on a narrow one. .pv is never
   made a grid or flex box: that would undo the native hiding of the
   variants not selected.
   -------------------------------------------------------------------------- */
.pd { max-width: 72rem; }
.pd-plain { margin-bottom: 2rem; }
.pd-summary { font-size: 1.125rem; line-height: 1.6; }
.pd-for { margin-top: 1rem; }
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.pd-context { align-self: start; padding: 1.25rem; background: var(--bg-soft); border-radius: var(--radius); }
.pd-context > * + * { margin-top: 1rem; }
.pd-context .pd-tech { margin-bottom: 0; }
.pd-credit, .pv__credit { font-size: .875rem; line-height: 1.55; margin-bottom: 1rem; }
.pd-picker select { width: 100%; min-height: 44px; font-size: 1rem; }
.pv { padding: 1.25rem; }
.pv__name { font-size: 1.125rem; }
.pv-table { font-size: 1rem; }
.pv-table th, .pv-table td { padding-block: .625rem; }
.pv-file__btn { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 64em) {
  .pd-layout { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); }
}

@media (max-width: 40rem) {
  .pv { padding: 1rem; }
  .pv-file__name { flex-basis: 100%; overflow-wrap: anywhere; word-break: normal; }
}

/* Design review 2026-10-03, item 10 (with main.css): the control's outline. */
.pd-picker select { border-color: var(--color-control-border); }