/* Luxwork guide and meter pages. Loaded after /styles.css, and uses its
   tokens only. No web fonts, no script, no third-party requests. */

/* Visible breadcrumb, matching the BreadcrumbList JSON-LD on each page. */
.crumbs {
  margin: 0 0 var(--s-4);
  font-size: 13.5px;
  color: var(--color-text-subtle);
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
}
.crumbs li { margin: 0; color: var(--color-text-subtle); }
.crumbs li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--color-border);
}
.crumbs a { color: var(--color-text-muted); }
.crumbs [aria-current="page"] { color: var(--color-text-subtle); }

/* Long-form guide text. */
.guide p, .guide li { font-size: 16px; }
.guide h3 { margin-top: var(--s-5); color: var(--color-text); }
.guide ol.steps { padding-left: 22px; }
.guide ol.steps li { margin-bottom: var(--s-3); }

/* The specimen callouts: a numbered list whose numbers match the markers
   in the text, not drawn over the image, so they survive any crop. */
ol.callouts {
  list-style: none;
  counter-reset: callout;
  padding: 0;
  margin: var(--s-4) 0 var(--s-5);
}
ol.callouts > li {
  counter-increment: callout;
  position: relative;
  margin: 0 0 var(--s-3);
  padding: 0 0 0 40px;
}
ol.callouts > li::before {
  content: counter(callout);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font: 700 13px var(--font-mono);
  color: var(--color-on-primary);
  background: var(--color-primary);
}
ol.callouts > li strong { color: var(--color-text); }

/* A phone screen beside its explanation. Stacks on narrow screens. */
.screen-pair {
  display: grid;
  grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  margin: var(--s-5) 0;
}
.screen-pair .screen {
  border: 1px solid var(--color-border);
  border-radius: 26px;
  padding: 6px;
  background: var(--color-surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.screen-pair .screen img { border-radius: 21px; }

/* Spec tables: two columns that wrap rather than scroll. */
table.plain.spec th { width: 38%; }
table.plain td, table.plain th { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .screen-pair { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .screen-pair .screen { max-width: 236px; }
  table.plain.spec th { width: 42%; }
  table.plain th, table.plain td { padding: var(--s-2) var(--s-2); font-size: 14.5px; }
}