/* ============================================================================
   04 · Atlas — layout
   Visual catalog: tools are objects, not rows. An editorial section header,
   then a calm card grid of token-bordered blueprint thumbnails. Lots of
   negative space; everything left-aligned. Layout only — all color/space/
   radius/type from --sds-* tokens. Shared vocabulary (.st, .num, .muted,
   review-bar) lives in ../_shared/base.css.
   ========================================================================== */

/* ---- App grid: rail | main ---------------------------------------------- */
.app { display: grid; grid-template-columns: 224px 1fr; min-height: calc(100vh - 34px); }

/* ---- Rail: brand over sidenav ------------------------------------------- */
.rail {
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  position: sticky; top: 34px; height: calc(100vh - 34px);
  display: flex; flex-direction: column;
  padding: var(--sds-space-400) var(--sds-space-300);
  gap: var(--sds-space-200);
  overflow: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: var(--sds-space-200) var(--sds-space-200) var(--sds-space-300); }
.brand sds-logo { --sds-logo-height: 22px; height: 22px; display: inline-flex; }
.brand .product { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-bold); font-size: 16px; letter-spacing: .01em; }
.brand .product .sub { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }
.rail sds-sidenav { width: 100%; }

/* ---- Main column -------------------------------------------------------- */
.main {
  min-width: 0;
  padding: var(--sds-space-700) var(--sds-space-700) var(--sds-space-800);
}

/* ---- Editorial section header (heading + eyebrow left | copy right) ------ */
.pagehead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sds-space-800);
  row-gap: var(--sds-space-400);
  align-items: end;
  margin-bottom: var(--sds-space-500);
}
.pagehead .eyebrow {
  display: flex; align-items: center; gap: var(--sds-space-200);
  font-size: var(--sds-type-body-regular-size);
  color: var(--sds-color-text-muted);
  margin: 0 0 var(--sds-space-200);
}
.pagehead .eyebrow::before {
  content: ""; inline-size: var(--sds-space-500); block-size: 2px;
  background: var(--sds-color-primary); flex: none;
}
.pagehead .title {
  font-family: var(--sds-font-family-headline);
  font-size: var(--sds-type-headline-3-size);
  line-height: var(--sds-type-headline-3-line);
  font-weight: var(--sds-type-headline-3-weight);
  margin: 0;
}
.pagehead .intro { max-inline-size: 56ch; }
.pagehead .intro p {
  margin: 0 0 var(--sds-space-400);
  color: var(--sds-color-text-muted);
}
.pagehead .intro p b { color: var(--sds-color-text); font-variant-numeric: tabular-nums; }
.pagehead .actions { display: flex; align-items: center; gap: var(--sds-space-300); }
.pagehead .actions sds-search { flex: 1; min-width: 0; }

.main > sds-divider { display: block; margin-bottom: var(--sds-space-600); }

/* ---- Card grid ---------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sds-space-500);
}

.tcard { --sds-card-corner-radius: var(--sds-radius-l); }

/* eyebrow / name / code */
.tcard .eb { color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size); }
.tcard .tname {
  font-family: var(--sds-font-family-text);
  font-weight: var(--sds-font-weight-bold);
  font-size: var(--sds-type-body-large-size);
  line-height: 1.25;
  margin-top: var(--sds-space-100);
}
.tcard .tcode {
  margin-top: var(--sds-space-100);
  font-size: var(--sds-type-footnote-size);
  color: var(--sds-color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Blueprint thumbnail (scaled-up .tn idea, token-bordered) ----------- */
.bp {
  position: relative;
  aspect-ratio: 8 / 5;
  border-radius: var(--sds-radius-m);
  border: 1px solid var(--sds-color-border);
  background:
    linear-gradient(var(--sds-color-surface-strong), var(--sds-color-surface-strong)) padding-box,
    repeating-linear-gradient(0deg, transparent 0 17px, var(--sds-color-border) 17px 18px),
    repeating-linear-gradient(90deg, transparent 0 17px, var(--sds-color-border) 17px 18px);
  overflow: hidden;
}
/* tool silhouette — neutral, drawn from token roles */
.bp .sil {
  position: absolute; left: 18%; right: 18%; top: 50%; height: 14%;
  transform: translateY(-50%); background: var(--sds-color-text);
  opacity: .82; border-radius: 2px;
  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
}
.bp .sil.mill { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.bp .sil.face { left: 24%; right: 24%; height: 26%; border-radius: 4px; clip-path: none; }
.bp .sil.hold { left: 16%; right: 30%; height: 11%; clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%); }
.bp .sil.tap  { clip-path: polygon(0 0, 72% 0, 90% 35%, 100% 50%, 90% 65%, 72% 100%, 0 100%); }
.bp .sil.end  { left: 22%; right: 22%; height: 12%; }
.bp .sil.bore { left: 20%; right: 26%; height: 18%; border-radius: 3px; clip-path: none; }
.bp .shank {
  position: absolute; left: 18%; width: 22%; top: 50%; height: 8%;
  transform: translateY(-50%); background: var(--sds-color-text);
  opacity: .42; border-radius: 1px;
}
.bp .shank.wide { width: 30%; height: 11%; }
/* dimension line + label — primary accent earns a single technical touch */
.bp .dim { position: absolute; left: 18%; right: 18%; bottom: 22%; height: 1px; background: var(--sds-color-primary); opacity: .7; }
.bp .dim::before, .bp .dim::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--sds-color-primary); opacity: .7; }
.bp .dim::before { left: 0; } .bp .dim::after { right: 0; }
.bp .dlbl {
  position: absolute; left: 50%; bottom: calc(22% - 9px); transform: translateX(-50%);
  padding: 0 var(--sds-space-100);
  background: var(--sds-color-surface-strong);
  font-size: var(--sds-type-footnote-size);
  font-variant-numeric: tabular-nums;
  color: var(--sds-color-text-muted);
}

/* ---- Key specs strip ---------------------------------------------------- */
.specs { display: flex; gap: var(--sds-space-200); margin-top: var(--sds-space-400); }
.spec {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--sds-space-100);
  padding: var(--sds-space-200) var(--sds-space-300);
  border-radius: var(--sds-radius-m);
  background: var(--sds-color-surface-strong);
}
.spec .k { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }
.spec .v { font-size: var(--sds-type-body-regular-size); font-weight: var(--sds-font-weight-bold); }

/* ---- Footer row: category tag (left) + stock status (right) ------------- */
.tfoot { display: flex; align-items: center; gap: var(--sds-space-300); width: 100%; }
.tfoot .st { margin-left: auto; }

/* ---- Page footer (pagination) ------------------------------------------- */
.pagefoot { display: flex; margin-top: var(--sds-space-600); }

/* ---- Responsive collapse ------------------------------------------------ */
@media (max-width: 900px) {
  .pagehead { grid-template-columns: 1fr; align-items: start; }
}