/* ============================================================================
   DOSSIER — one scrollable document + sticky table of contents
   Replaces the original's horizontal tabs and six collapsed sections with a
   single calm, complete document; a sticky "on this page" TOC (with scroll-spy)
   navigates it. Nothing is hidden. Editorial section rhythm, 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, 64px) clamp(56px, 8vw, 96px); }

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); }

.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); }

/* ---- Document + TOC grid ------------------------------------------------ */
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: clamp(32px, 5vw, 72px); align-items: start; }

/* ---- Sections ----------------------------------------------------------- */
.ds { padding-block: clamp(40px, 6vw, 72px); scroll-margin-top: 60px; }
.ds:first-child { padding-top: var(--sds-space-400); }
.ds--alt { background: var(--sds-color-surface); border-radius: var(--sds-radius-l); padding-inline: clamp(20px, 3vw, 40px); }

.ds-head {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 5vw, 80px); align-items: end;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.ds-h-l { display: flex; align-items: baseline; gap: var(--sds-space-400); }
.ds-no {
  flex: none;
  font-family: var(--sds-font-family-headline); font-weight: 300;
  font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.02em;
  color: var(--sds-color-text-disabled); font-variant-numeric: tabular-nums;
}
.ds-head h2 { margin: var(--sds-space-200) 0 0; font-size: var(--sds-type-headline-4-size); line-height: var(--sds-type-headline-4-line); }
.ds-intro { margin: 0; align-self: end; max-width: 48ch; color: var(--sds-color-text-muted); }

/* ---- Overview ----------------------------------------------------------- */
.ov { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.ov-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sds-space-500); }
.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.6vw, 38px); 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; }
.ov-side { display: flex; flex-direction: column; gap: var(--sds-space-400); padding-left: clamp(0px, 2vw, 32px); }
.ov-stock { display: flex; flex-direction: column; gap: 2px; }
.ov-stock .st { font-size: var(--sds-type-body-large-size); }
.badges { display: flex; gap: var(--sds-space-200); }

/* ---- Spec lists --------------------------------------------------------- */
.pl { margin: 0; }
.pl--wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.pr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sds-space-400); padding: var(--sds-space-300) 0; border-bottom: 1px solid var(--sds-color-border); }
.pr dt { display: flex; align-items: baseline; gap: var(--sds-space-300); min-width: 0; }
.pr .ty { flex: none; width: 38px; color: var(--sds-color-text-muted); font-size: var(--sds-type-footnote-size); }
.pr .nm { overflow: hidden; text-overflow: ellipsis; }
.pr dd { margin: 0; text-align: right; font-weight: var(--sds-font-weight-bold); }

/* ---- Geometry figure ---------------------------------------------------- */
.geo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.geo-fig { margin: 0; }
.geo-fig figcaption { margin-top: var(--sds-space-300); font-size: var(--sds-type-footnote-size); }
.drill { width: 100%; height: auto; display: block; padding: var(--sds-space-400);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-m); background: var(--sds-color-bg);
  background-image: 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);
}
.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; }

/* ---- Connections -------------------------------------------------------- */
.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; }

/* ---- Files -------------------------------------------------------------- */
.files { margin: 0; padding: 0; list-style: none; }
.files li { display: flex; align-items: center; gap: var(--sds-space-400); padding: var(--sds-space-400) 0; border-bottom: 1px solid var(--sds-color-border); }
.files sds-icon { color: var(--sds-color-text-muted); flex: none; }
.files .f-sz { margin-left: auto; font-size: var(--sds-type-body-small-size); }

/* ---- Sticky TOC --------------------------------------------------------- */
.toc { position: sticky; top: calc(34px + var(--sds-space-500)); }
.toc-h { margin-bottom: var(--sds-space-400); font-size: var(--sds-type-footnote-size); text-transform: uppercase; letter-spacing: .08em; color: var(--sds-color-text-muted); }
.toc-l { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--sds-color-border); }
.toc-l a {
  display: flex; align-items: baseline; gap: var(--sds-space-300);
  padding: var(--sds-space-200) var(--sds-space-400);
  margin-left: -1px; border-left: 2px solid transparent;
  color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size);
  transition: color var(--sds-motion-duration-fast) var(--sds-motion-ease-standard);
}
.toc-l a:hover { color: var(--sds-color-text); }
.toc-l a.active { color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); border-left-color: var(--sds-color-primary); }
.toc-l .t-no { flex: none; font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-disabled); font-variant-numeric: tabular-nums; }
.toc-l a.active .t-no { color: var(--sds-color-primary); }

@media (prefers-reduced-motion: reduce) { .toc-l a { transition: none; } }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1040px) {
  .doc-grid { grid-template-columns: 1fr; }
  .toc { display: 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; }
  .ds-head, .ov, .geo, .conn { grid-template-columns: 1fr; row-gap: var(--sds-space-400); }
  .ov-glance { grid-template-columns: repeat(2, 1fr); }
  .ds-intro { max-width: none; }
}