/* ============================================================================
   SHOWCASE — viewer hub + persistent specs rail
   Keeps strong visual identification (one focused viewer) but fixes the
   imbalance of the original: the spec data lives in a sticky rail that's always
   on screen, so image and numbers are co-equal and nothing is buried.
   Token-driven; shared vocabulary in ../_shared/base.css.
   ========================================================================== */

/* ---- App shell ---------------------------------------------------------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 34px); }
.rail {
  position: sticky; top: 34px; align-self: start; height: calc(100vh - 34px);
  display: flex; flex-direction: column; gap: var(--sds-space-700);
  padding: var(--sds-space-600) var(--sds-space-400);
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
}
.brand { display: flex; align-items: center; gap: var(--sds-space-300); --sds-logo-height: 22px; }
.product { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-bold); font-size: 16px; letter-spacing: .01em; }
.product .sub { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }

.main { padding: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 56px) clamp(64px, 9vw, 104px); }

h1, h2, h3 { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-regular); color: var(--sds-color-text); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); }
.eyebrow::before { content: ""; flex: none; inline-size: var(--sds-space-500); block-size: 2px; background: var(--sds-color-primary); }

/* ---- Header ------------------------------------------------------------- */
.topline { display: flex; align-items: center; justify-content: space-between; gap: var(--sds-space-400); margin-bottom: clamp(20px, 3vw, 32px); }
.topline-acts { display: flex; align-items: center; gap: var(--sds-space-300); }
.idhead { margin-bottom: clamp(28px, 4vw, 44px); }
.idhead h1 { margin: var(--sds-space-300) 0 var(--sds-space-300); font-size: var(--sds-type-headline-2-size); line-height: var(--sds-type-headline-2-line); letter-spacing: -.015em; }
.idmeta { margin: 0; color: var(--sds-color-text-muted); font-size: var(--sds-type-body-large-size); }

/* ---- Stage: viewer + sticky specs rail ---------------------------------- */
.stage {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 88px);
}

/* viewer */
.viewer-card { display: block; padding: 0; overflow: hidden; }
.viewer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sds-space-200) var(--sds-space-400);
  border-bottom: 1px solid var(--sds-color-border);
}
.viewer {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  padding: var(--sds-space-600);
  background:
    linear-gradient(var(--sds-color-bg), var(--sds-color-bg)) padding-box,
    repeating-linear-gradient(0deg, var(--sds-color-border) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--sds-color-border) 0 1px, transparent 1px 28px);
  background-blend-mode: normal;
}
.drill { width: min(100%, 560px); height: auto; }
.drill .axis { stroke: var(--sds-color-border-strong); stroke-width: 1; stroke-dasharray: 6 5; }
.drill .body { stroke: var(--sds-color-text); stroke-width: 1.75; fill: var(--sds-color-surface); }
.drill .flute { stroke: var(--sds-color-text-muted); stroke-width: 1; }
.drill .dim { stroke: var(--sds-color-primary); stroke-width: 1; }
.drill .dimtext { fill: var(--sds-color-text-muted); font-family: var(--sds-font-family-text); font-size: 15px; }
.viewer-tag { position: absolute; left: var(--sds-space-400); bottom: var(--sds-space-300); font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }

.facts {
  margin: var(--sds-space-500) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sds-space-400) var(--sds-space-500);
}
.facts div { display: flex; flex-direction: column; gap: 2px; }
.facts dt { font-size: var(--sds-type-footnote-size); }
.facts dd { margin: 0; }
.fact-badges { display: flex; gap: var(--sds-space-200); }

/* sticky specs rail */
.rail-specs { position: sticky; top: calc(34px + var(--sds-space-400)); display: flex; flex-direction: column; gap: var(--sds-space-400); }

.glance { display: block; padding: var(--sds-space-500); }
.glance-stock { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sds-space-400); padding-bottom: var(--sds-space-400); border-bottom: 1px solid var(--sds-color-border); }
.glance-stock .st { font-size: var(--sds-type-body-large-size); }
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sds-space-400); }
.g { display: flex; flex-direction: column; gap: 4px; }
.g-num { font-family: var(--sds-font-family-headline); font-weight: 300; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.g-u { font-size: .5em; color: var(--sds-color-text-muted); margin-left: 2px; }
.g-lbl { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }
.g-lbl .num { color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); margin-right: 4px; }

.specs {
  padding: var(--sds-space-500);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-l);
  background: var(--sds-color-surface);
  max-height: 60vh; overflow: auto;
}
.specs-head { margin-bottom: var(--sds-space-300); font-weight: var(--sds-font-weight-bold); }
.sgroup {
  margin: var(--sds-space-400) 0 var(--sds-space-200);
  font-size: var(--sds-type-footnote-size); text-transform: uppercase; letter-spacing: .08em;
  color: var(--sds-color-text-muted);
}
.sgroup:first-of-type { margin-top: var(--sds-space-200); }
.pl { margin: 0; }
.pr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sds-space-300); padding: var(--sds-space-200) 0; border-bottom: 1px solid var(--sds-color-border); font-size: var(--sds-type-body-small-size); }
.pr dt { display: flex; align-items: baseline; gap: var(--sds-space-200); min-width: 0; }
.pr .ty { flex: none; width: 34px; color: var(--sds-color-text-muted); font-size: var(--sds-type-footnote-size); }
.pr .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr dd { margin: 0; text-align: right; font-weight: var(--sds-font-weight-bold); }

/* ---- Below: where used + details ---------------------------------------- */
.below { padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--sds-color-border); }
.below + .below { margin-top: clamp(8px, 1vw, 16px); }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 88px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.sec-head h2 { margin: var(--sds-space-300) 0 0; font-size: var(--sds-type-headline-5-size); line-height: var(--sds-type-headline-5-line); }
.sec-intro { margin: 0; align-self: end; max-width: 44ch; color: var(--sds-color-text-muted); }

.used-table { margin-bottom: var(--sds-space-600); }
.conn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); }
.conn-h { margin-bottom: var(--sds-space-300); font-weight: var(--sds-font-weight-bold); font-size: var(--sds-type-body-small-size); }
.conn-l { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sds-space-200); }
.conn-l li { padding: var(--sds-space-200) 0; border-bottom: 1px solid var(--sds-color-border); }
.conn p { margin: 0; }

.acc-l { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sds-space-400); }
.acc-l div { display: flex; flex-direction: column; gap: 2px; }
.acc-l dt { font-size: var(--sds-type-footnote-size); }
.acc-l dd { margin: 0; }
.acc-files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sds-space-300); }
.acc-files li { display: flex; align-items: center; gap: var(--sds-space-300); }
.acc-files sds-icon { color: var(--sds-color-text-muted); flex: none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1040px) {
  .stage { grid-template-columns: 1fr; }
  .rail-specs { position: static; }
  .specs { max-height: none; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--sds-space-600); overflow-x: auto; }
  .sec-head, .conn { grid-template-columns: 1fr; row-gap: var(--sds-space-400); }
  .facts { grid-template-columns: 1fr 1fr; }
  .sec-intro { max-width: none; }
}