/* The five industry pages. Layout only: where things sit, the frames around them and the grids
   they fall into. Type, weight, colour and section rhythm come from the shared system through
   `page-hero`, `lead`, `story-section`, `story-heading`, `mono` and `overview-boundary`, so these
   pages look like the rest of the site rather than a landing page beside it. */

/* ---- S1 hero: copy left, environment right, proof strip across the bottom ---- */
.ind-hero {
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: var(--space-xl);
  align-items: center;
}
/* Each half of the two-line title breaks evenly when it needs a second line of its own. */
.ind-hero h1 {
  text-wrap: balance;
}
body.page-inner main .ind-hero .lead {
  max-width: 46ch;
}
.ind-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
}
/* Every proof item carries its dot in the gap before it, and the strip clips whichever dot falls
   before the first item on a line. So dots sit only between items on one line, at any width, and
   a hidden placeholder leaves none. The dot is never read aloud. */
.ind-proof {
  grid-column: 1 / -1;
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  color: var(--lp-faint);
  overflow: hidden;
}
.ind-proof-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
  margin-left: -24px;
}
.ind-proof-list > span {
  position: relative;
  margin-left: 24px;
}
.ind-proof-list > span::before {
  content: '·';
  content: '·' / '';
  position: absolute;
  left: -15px;
  opacity: 0.6;
}

/* The environment slot: a square page surface, like every other plane, holding the drawn scene
   (later the photograph) with the product card over its lower-left corner. */
.ind-scene {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ind-scene-ground {
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-surface);
}
.ind-scene-art {
  display: block;
  width: 100%;
  height: 100%;
}
/* A generated photograph takes the slot in its own daylight colours (public/images/CREDITS.md),
   only slightly dimmed so it sits on the dark page. */
.ind-scene.has-photo .ind-scene-ground {
  position: relative;
}
.ind-scene-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94) saturate(0.95);
}

/* ---- the shared three-column row: S2, S8 and S9 all use it ---- */
.ind-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ind-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
.ind-control-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
body main .ind-columns h3 {
  margin: 0;
}
body main .ind-columns p {
  margin: 10px 0 0;
  color: var(--color-muted);
}
.ind-step-number {
  display: block;
  margin-bottom: 10px;
  color: var(--color-accent);
}

/* ---- What Matrix does: ruled rows, name | how | result ---- */
.ind-does-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-rule);
}
.ind-does-row {
  display: grid;
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 5fr) minmax(0, 3.6fr);
  gap: var(--space-xl);
  align-items: start;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-rule);
}
.ind-layer {
  display: block;
  color: var(--lp-faint);
}
body main .ind-does-name h3 {
  margin: 8px 0 0;
}
body main .ind-does-row p {
  margin: 0;
}
body main .ind-does-how {
  color: var(--color-muted);
}
body main .ind-does-result {
  color: var(--color-ink);
}
.ind-result-label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-accent);
}

/* ---- S5 cases ---- */
.ind-case {
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.ind-case + .ind-case {
  margin-top: var(--space-md);
}
.ind-case.is-small {
  background: transparent;
}
.ind-case-top {
  display: block;
  color: var(--color-accent);
}
.ind-case-top i {
  font-style: normal;
  opacity: 0.55;
}
body main .ind-case h3 {
  margin: 14px 0 0;
}
.ind-case-grid {
  display: grid;
  /* One column per fact, so a case still waiting for a figure closes up instead of leaving a gap. */
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
.ind-case-label {
  display: block;
  margin-bottom: 12px;
  color: var(--lp-faint);
}
body main .ind-case-grid p {
  margin: 0;
  color: var(--color-muted);
}
.ind-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
/* The result reads as a figure, at the system's section-heading weight rather than a size of
   its own. */
.ind-results strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: var(--color-ink);
}
.ind-case.is-small:not(.has-view) .ind-results strong {
  font-size: inherit;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.ind-results span {
  display: block;
  margin-top: 8px;
  color: var(--color-muted);
}
.ind-case.is-small:not(.has-view) .ind-results {
  flex-direction: row;
  gap: var(--space-2xl);
}

/* A case with a picture: the picture on the left, the challenge, the build and the results on the
   right, as in the homepage's "Built around your work". */
.ind-case-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-lg);
}
.ind-case-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ind-case-steps > li {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-rule);
}
.ind-case-steps > li:first-child {
  padding-top: 0;
  border-top: 0;
}
body main .ind-case-steps p {
  margin: 0;
  color: var(--color-muted);
}
/* Beside a picture the figures are rows: the number, then what it measures. The rows share one
   number column as wide as the widest figure (a subgrid), so the captions line up and keep the
   rest of the width; a fixed 250 px column squeezed them until words split at 1024 px. */
.has-view .ind-results {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px var(--space-sm);
}
.has-view .ind-results > div {
  display: grid;
  grid-column: 1 / -1;
  /* The first value is for browsers without subgrid: each row sizes its own figure, with the same
     gap as the list's, so with subgrid nothing changes. */
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-columns: subgrid;
  column-gap: var(--space-sm);
  align-items: baseline;
}
.has-view .ind-results strong {
  font-size: 28px;
  line-height: 1.1;
  white-space: nowrap;
}
.has-view .ind-results span {
  margin-top: 0;
}

/* The case picture: a small product window in the site's glass. It is a container, so what it
   holds lays itself out by the window's own width. */
.ind-window {
  container: ind-window / inline-size;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(160, 188, 240, 0.18);
  border-radius: 16px;
  background: linear-gradient(
    165deg,
    rgba(22, 27, 38, 0.94) 0%,
    rgba(15, 19, 27, 0.95) 55%,
    rgba(12, 15, 22, 0.96) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.ind-window-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 12px 18px;
  border-bottom: 1px solid var(--lp-glass-rule);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}
.ind-window-bar .mono {
  font-size: 11px;
  color: var(--lp-faint);
}
/* ---- Documents on paper ----
   A document is shown as it reaches the person who checks it (test plan, Packet PAPER): a CAD sheet
   or a draft is a crisp light page, as a viewer shows it; a paper original is a scan. The paper and
   its ink are fixed colours, because a page is light in a dark window. Printed ink is 7:1 or better
   on its paper; the amber markup ink is 4.5:1 or better, and its text is darker still. */

/* ---- The drawing review: a CAD sheet ----
   Lines are SVG in a 600 x 390 field that sets the plan's height; the words are HTML placed over it
   by percentage (x / 600, y / 390) and centred on their point. Strokes keep their width at any
   size, as a PDF viewer's do. A narrow sheet drops the grid, the dimensions and the project cell,
   then the room names, and keeps the numbered issues. */
.ind-sheet {
  container: ind-sheet / inline-size;
  display: grid;
  gap: 12px;
  padding: var(--space-sm);
}
.ind-sheet-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--lp-faint);
}
.ind-sheet-head .is-count {
  flex: none;
  color: var(--color-warning);
}
.ind-sheet-paper {
  padding: 7px;
  border-radius: 2px;
  /* The same paper as the plan's window openings (industry-page.mjs, sheetPaper). */
  background: #f6f5f0;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 10px 26px rgba(0, 0, 0, 0.35);
}
.ind-sheet-frame {
  border: 1.5px solid #2f333b;
}
.ind-sheet-plan {
  position: relative;
}
.ind-sheet-plan svg {
  display: block;
  width: 100%;
  height: auto;
}
.ind-sheet-plan svg :is(path, rect, circle) {
  vector-effect: non-scaling-stroke;
}
/* The title block along the foot of the sheet, as on any drawing. Its rules are the 1 px gaps
   between cells over the ink colour, so they stay single lines however the cells wrap. */
.ind-sheet-title {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  gap: 1px;
  border-top: 1.5px solid #2f333b;
  background: #2f333b;
}
.ind-sheet-title > span {
  display: grid;
  align-content: start;
  gap: 1px;
  padding: 5px 8px;
  background: #f6f5f0;
  font-size: 11px;
  line-height: 1.3;
  color: #1f2329;
}
.ind-sheet-title small {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #4b5058;
}
.ind-sheet-plan > :is(span, b) {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 400 11px/1 var(--font-mono);
  white-space: nowrap;
}
.ind-sheet-room {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3a3f47;
}
.ind-sheet-grid {
  color: #4b5058;
}
.ind-sheet-dim {
  padding: 1px 3px;
  background: #f6f5f0;
  color: #3a3f47;
}
.ind-sheet-plan > .ind-sheet-marker {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #b45309;
  font-weight: 500;
  color: #fff;
}
.at-office-101 {
  left: 20.67%;
  top: 26.67%;
}
.at-office-102 {
  left: 51.33%;
  top: 26.67%;
}
.at-meeting-103 {
  left: 81%;
  top: 26.67%;
}
.at-corridor {
  left: 18.33%;
  top: 51.28%;
}
.at-lobby {
  left: 44.67%;
  top: 73.85%;
}
.at-wc {
  left: 73.67%;
  top: 73.85%;
}
.at-store {
  left: 88.33%;
  top: 73.85%;
}
.at-grid-1 {
  left: 6.67%;
  top: 4.1%;
}
.at-grid-2 {
  left: 36.67%;
  top: 4.1%;
}
.at-grid-3 {
  left: 66.67%;
  top: 4.1%;
}
.at-grid-4 {
  left: 96.67%;
  top: 4.1%;
}
.at-grid-a {
  left: 2.67%;
  top: 10.26%;
}
.at-grid-b {
  left: 2.67%;
  top: 51.28%;
}
.at-grid-c {
  left: 2.67%;
  top: 89.74%;
}
.at-north {
  left: 89.67%;
  top: 95.38%;
}
.at-dim-stair {
  left: 11.42%;
  top: 96.67%;
}
.at-dim-corridor {
  left: 46.33%;
  top: 52.31%;
}
.at-issue-1 {
  left: 7.67%;
  top: 58.46%;
}
.at-issue-2 {
  left: 89.67%;
  top: 47.18%;
}
.at-issue-3 {
  left: 33.67%;
  top: 43.08%;
}
.ind-issues {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ind-issues li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 10px 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  background: rgba(150, 170, 210, 0.05);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-muted);
}
.ind-issues li > :not(b) {
  grid-column: 2;
}
.ind-issues li > span:first-of-type {
  color: var(--color-ink);
}
.ind-issues b {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-warning);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-paper);
}
.ind-issues span.mono {
  font-size: 11px;
  color: var(--color-accent);
}
@container ind-sheet (min-width: 560px) {
  .ind-issues {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container ind-sheet (max-width: 419px) {
  .ind-sheet-plan > :is(.ind-sheet-grid, .ind-sheet-dim),
  .ind-sheet-gridlines,
  .ind-sheet-title > .is-project {
    display: none;
  }
  /* The drawing's name across the top, then scale and sheet side by side. */
  .ind-sheet-title {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ind-sheet-title > :nth-child(2) {
    grid-column: 1 / -1;
  }
}
@container ind-sheet (max-width: 339px) {
  .ind-sheet-plan > .ind-sheet-room {
    display: none;
  }
}

/* ---- A document beside what was checked or read from it ---- */
.ind-doc {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
}
.ind-paper {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 18px 18px;
  border-radius: 2px;
  background: #f8f7f3;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 10px 26px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  line-height: 1.5;
  color: #24282f;
}

/* The memo: the department's letterhead and fields, two numbered paragraphs and an approval block
   left empty, because a draft is not signed. */
.ind-memo-org {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid #24282f;
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  color: #3a3f47;
}
.ind-memo-org b {
  padding: 0 5px;
  border: 1px solid #3a3f47;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.ind-memo-kind {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #1f2329;
}
.ind-memo-meta {
  display: grid;
  gap: 2px;
  margin: 0;
}
.ind-memo-meta > div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
}
.ind-memo-meta dt {
  color: #4b5058;
}
.ind-memo-meta dd {
  margin: 0;
}
.ind-memo-body {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 0 0 18px;
  border-top: 1px solid #d3d0c7;
}
.ind-memo-attach {
  font-size: 11px;
  color: #4b5058;
}
.ind-memo-approval {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #d3d0c7;
}
.ind-memo-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-size: 11px;
  color: #4b5058;
}
.ind-memo-line i {
  flex: 1;
  height: 1px;
  margin-bottom: 3px;
  background: #8a8f97;
}
/* Where the approver's title belongs: outlined in the reviewer's amber, not written on the page. */
.ind-memo-missing {
  padding: 4px 8px;
  border: 1px dashed #b45309;
  border-radius: 3px;
  background: rgba(180, 83, 9, 0.06);
  font-size: 11px;
  color: #8a3d06;
}

/* The scan: an off-white paper original turned about a degree on the scanner's grey, with grain,
   one fold and the uneven light of a scanner lid. The grain sits over the ink, as it does on a scan;
   a scan has no stain or tear here, because the certificate is a clean original. */
.ind-scan {
  position: relative;
  padding: 12px;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(160deg, #dbd8d0, #cbc7be);
}
.ind-paper.is-scan {
  gap: 8px;
  padding: 14px 14px 12px;
  background: #ece7db;
  box-shadow: 0 1px 3px rgba(40, 30, 10, 0.35);
  color: #2a2d33;
  transform: rotate(-1.2deg);
}
.ind-paper.is-scan::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 41%,
      rgba(70, 55, 30, 0.1) 41.6%,
      rgba(70, 55, 30, 0.16) 42%,
      rgba(255, 255, 255, 0.55) 42.4%,
      rgba(255, 255, 255, 0) 43.6%
    ),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(90, 70, 40, 0.16) 100%);
}
.ind-scan-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.ind-cert-title {
  font: 600 12px/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-align: center;
}
.ind-cert-no {
  justify-self: end;
  font: 400 11px/1.3 var(--font-mono);
  color: #2f333b;
}
/* A printed form: ruled boxes, each with its number and label, filled in by machine. */
.ind-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid #5d616a;
  background: #5d616a;
}
.ind-cert-box {
  display: grid;
  gap: 2px;
  padding: 5px 7px;
  background: #ece7db;
  font: 400 12px/1.35 var(--font-mono);
}
.ind-cert-box.is-wide {
  grid-column: 1 / -1;
}
.ind-cert-box small {
  font: 400 11px/1.3 var(--font-body);
  color: #2f333b;
}
.ind-cert-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 6px 4px 0;
}
.ind-cert-sign small {
  flex-basis: 100%;
  padding-top: 3px;
  border-top: 1px solid #5d616a;
  font-size: 11px;
  color: #2f333b;
}
.ind-stamp,
.ind-pen {
  display: block;
  flex: none;
  mix-blend-mode: multiply;
}
/* A rubber stamp pressed at an angle, its ink worn in places (the filter in industry-page.mjs). */
.ind-stamp {
  width: 116px;
  height: 44px;
  opacity: 0.9;
  transform: rotate(-7deg);
}
.ind-pen {
  width: 112px;
  height: 40px;
}
/* What Matrix found on the scan is outlined in the app's blue, deep enough to read on paper. */
.ind-cert-sign > svg {
  outline: 1px dashed #2563eb;
  outline-offset: 4px;
}
.ind-fields {
  display: grid;
  align-content: start;
  margin: 0;
}
.ind-fields > div {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-rule);
}
.ind-fields > div:first-child {
  padding-top: 0;
}
.ind-fields dt {
  font: 400 11px/1.4 var(--font-mono);
  color: var(--lp-faint);
}
.ind-fields dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-ink);
}

/* ---- Checks with their state ---- */
.ind-checks {
  display: grid;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ind-checks li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-rule);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-body);
}
.ind-checks li.is-flag {
  border-left: 2px solid var(--color-warning);
  background: rgba(223, 189, 135, 0.06);
  color: var(--color-ink);
}
.ind-checks small {
  display: block;
  font-size: 12px;
  color: var(--color-warning);
}
.ind-pill {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.ind-pill.is-met {
  background: rgb(153 207 177 / 0.12);
  color: var(--color-positive);
}
.ind-pill.is-fix {
  background: rgb(223 189 135 / 0.14);
  color: var(--color-warning);
}
/* Under a photo the checks are chips, side by side when there is room. */
.ind-checks.is-row {
  gap: 8px;
  padding: var(--space-sm);
}
.ind-checks.is-row li {
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  background: rgba(150, 170, 210, 0.05);
}
.ind-checks.is-row li.is-flag {
  border-color: rgba(223, 189, 135, 0.55);
  background: rgba(223, 189, 135, 0.06);
}
@container ind-window (min-width: 520px) {
  .ind-doc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@container ind-window (min-width: 560px) {
  .ind-checks.is-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The approval path the draft follows after its check: people review and approve. */
.ind-route {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 12px var(--space-sm) var(--space-sm);
  border-top: 1px solid var(--lp-glass-rule);
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.ind-route li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ind-route li::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.ind-route .is-done {
  color: var(--color-accent);
}
.ind-route .is-done::before {
  background: currentColor;
}
.ind-route .is-now {
  color: var(--color-warning);
}

/* ---- The law firm's search of its earlier matters ---- */
.ind-search {
  display: grid;
  gap: 12px;
  padding: var(--space-sm);
}
.ind-search-query {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 999px;
  background: rgba(150, 170, 210, 0.05);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-ink);
}
.ind-search-query svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--lp-faint);
}
.ind-matters {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ind-matters li {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--color-rule);
}
.ind-matters li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ind-matter-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-ink);
}
.ind-matter-head b {
  font-weight: 500;
}
.ind-matter-head .mono {
  font-size: 11px;
  color: var(--lp-faint);
}
body main .ind-matters p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
}
.ind-matters mark {
  padding: 0 2px;
  border-radius: 2px;
  background: rgb(74 163 255 / 0.2);
  color: var(--color-ink);
}
.ind-source span {
  white-space: nowrap;
}
.ind-source {
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-body);
  overflow-wrap: anywhere;
}
.ind-window-scroll {
  container: ind-table / inline-size;
  overflow-x: auto;
  padding: var(--space-sm);
}
.ind-photo {
  position: relative;
  aspect-ratio: 16 / 9;
}
.ind-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ind-box {
  position: absolute;
  display: block;
  border: 1.5px solid var(--color-warning);
  border-radius: 3px;
}
.ind-box i {
  position: absolute;
  top: -22px;
  left: -1px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--color-warning);
  font-style: normal;
  font-size: 11px;
  color: var(--color-paper);
  white-space: nowrap;
}
/* The same place as the walkthrough's first outline (product-mockups.css, .pm-box-a). */
.ind-box-erosion {
  top: 49.5%;
  left: 42.5%;
  width: 14%;
  height: 12.5%;
}
/* What passed is outlined in blue, what needs fixing in amber. */
.ind-box.is-ok {
  border-color: var(--color-accent);
}
.ind-box.is-ok i {
  background: var(--color-accent);
}
/* Measured on the delivered 1280 x 720 photo (tracker-installation.provenance.json). */
.ind-box-tracker {
  top: 31%;
  left: 40.5%;
  width: 16%;
  height: 18.5%;
}
.ind-box-cable {
  top: 58%;
  left: 33%;
  width: 32%;
  height: 33%;
}
/* Its label sits inside the bottom corner, so on a small photo it never covers the tracker's box. */
.ind-box-cable i {
  top: auto;
  bottom: -1px;
  border-radius: 0 3px 0 0;
}

/* ---- The field-service call ----
   The machine as the camera sees it, with the brew unit and its two release tabs outlined (placed on
   the delivered 1290 x 1220 photo, coffee-service.provenance.json), the steps of the fix under it and
   the AI's instruction beside it once the window is wide enough. */
.ind-photo-call {
  aspect-ratio: 1290 / 1220;
}
.ind-live {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(10, 13, 20, 0.72);
  font-size: 11px;
  line-height: 1.5;
  color: #fff;
}
.ind-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-error);
}
.ind-box-brew {
  top: 44.7%;
  left: 31.4%;
  width: 53.5%;
  height: 45.5%;
}
.ind-box-tab {
  top: 52.5%;
  width: 9.5%;
  height: 11.5%;
}
.ind-box-tab-left {
  left: 31.8%;
}
.ind-box-tab-right {
  left: 76%;
}
/* The right tab's label ends at the tab, so it never runs past the photo's edge; the brew unit's
   label sits inside its bottom corner, away from the tabs' label. */
.ind-box-tab-right i {
  right: -1px;
  left: auto;
}
.ind-box-brew i {
  top: auto;
  bottom: -1px;
  border-radius: 0 3px 0 0;
}
.ind-call {
  display: grid;
}
.ind-call-guide {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: var(--space-sm);
}
.ind-call-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
}
.ind-call-say {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
}
@container ind-window (min-width: 460px) {
  .ind-call {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
  .ind-call-guide {
    border-left: 1px solid var(--lp-glass-rule);
  }
}

/* ---- A labelled group inside a window: a small heading over a list ---- */
.ind-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}
.ind-group-label {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
/* The line of detail under a check that needs no action. */
.ind-checks small.is-note {
  color: var(--color-muted);
}

/* A quote closes the case it belongs to. */
.ind-quote {
  margin: var(--space-lg) 0 0;
  padding: 4px 0 4px var(--space-md);
  border-left: 2px solid var(--color-accent);
}
body main .ind-quote p {
  margin: 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-ink);
}
.ind-quote footer {
  margin-top: 12px;
  color: var(--lp-faint);
}

.ind-mock-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-rule);
}
.ind-mock-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 12px;
  color: var(--lp-faint);
}
.ind-mock-table :is(th, td) {
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-rule);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}
.ind-mock-table th {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--lp-faint);
  background: var(--color-paper);
}
.ind-mock-table td {
  color: var(--color-muted);
}
.ind-mock-table td.is-flag {
  color: var(--color-error);
}
.ind-mock-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}
/* When the window is too narrow for five columns, each document becomes a short card: its name,
   then the field and page, then what was expected beside what was found. The column names move
   beside the values, so the picture still reads without its header row. */
@container ind-table (max-width: 599px) {
  .ind-mock-table,
  .ind-mock-table tbody {
    display: block;
    border: 0;
  }
  .ind-mock-table thead {
    display: none;
  }
  /* The same chip as the drawing review's issue list: this is the product's own interface. */
  .ind-mock-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 12px 14px;
    border: 1px solid var(--lp-glass-rule);
    border-radius: 8px;
    background: rgba(150, 170, 210, 0.05);
  }
  .ind-mock-table tr + tr {
    margin-top: 8px;
  }
  .ind-mock-table td,
  .ind-mock-table tbody tr:last-child td {
    padding: 0;
    border: 0;
  }
  .ind-mock-table td:first-child {
    grid-column: 1 / -1;
    color: var(--color-ink);
  }
  .ind-mock-table td:nth-child(2) {
    grid-area: 2 / 1;
  }
  .ind-mock-table td:nth-child(5) {
    grid-area: 2 / 2;
  }
  .ind-mock-table td:nth-child(3) {
    grid-area: 3 / 1;
  }
  .ind-mock-table td:nth-child(4) {
    grid-area: 3 / 2;
  }
  .ind-mock-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font: 400 11px/1.4 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lp-faint);
  }
}

/* ---- S6 why Matrix ---- */
.ind-why-table {
  overflow-x: auto;
}
.ind-why-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-rule);
  table-layout: fixed;
}
.ind-why-table :is(th, td) {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  border-right: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  color: var(--color-muted);
}
.ind-why-table tr > :last-child {
  border-right: 0;
}
.ind-why-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}
.ind-why-table thead :is(th, td) {
  font-family: var(--font-mono);
  color: var(--lp-faint);
  background: var(--color-surface);
}
.ind-why-table tbody th {
  color: var(--color-body);
  background: var(--color-surface);
}
/* The Matrix column is the claim the section is making, so it is the one that is lit. */
.ind-why-table .is-matrix {
  background: rgba(74, 163, 255, 0.07);
  border-left: 2px solid rgba(74, 163, 255, 0.45);
  border-right: 2px solid rgba(74, 163, 255, 0.45);
  color: var(--color-ink);
}
.ind-why-table thead .is-matrix {
  border-top: 3px solid var(--color-accent);
  background: rgba(74, 163, 255, 0.12);
  color: var(--color-ink);
}
.ind-why-table tbody tr:last-child .is-matrix {
  border-bottom: 2px solid rgba(74, 163, 255, 0.45);
}
/* Each answer is named by the column header on wide screens, and by its own label once the rows
   stack. It is said once either way. */
.ind-why-label {
  display: none;
}
body main .ind-why .overview-boundary {
  margin-top: var(--space-md);
}

/* ---- the bands: accuracy, the legal model note and the control section ---- */
.ind-band {
  background: var(--color-surface);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.ind-band-quiet {
  background: transparent;
  border-bottom: 0;
}
.ind-accountability {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-paper);
}
.ind-accountability strong {
  display: block;
  color: var(--color-ink);
}
body main .ind-accountability p {
  margin: 12px 0 0;
  max-width: 76ch;
  color: var(--color-muted);
}
/* A link longer than the card's line wraps before its arrow instead of running past the card. */
.ind-accountability .text-link {
  margin-top: var(--space-md);
  white-space: normal;
}
/* With a guide beside it, the two links share one row and the row carries the spacing. */
.ind-accountability .ui-actions .text-link {
  margin-top: 0;
}

/* ---- review mode ---- */
/* Off unless `?review=1` set it, so a normal visit never sees any of this. */
:root[data-review='on'] [data-tbd] {
  outline: 2px dashed #f59e0b;
  outline-offset: 3px;
}
:root[data-review='on'] [data-verify] {
  outline: 2px dashed #3b82f6;
  outline-offset: 3px;
}
:root[data-review='on'] :is([data-tbd], [data-verify]) {
  cursor: help;
}

@media (max-width: 1023px) {
  .ind-does-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 12px var(--space-lg);
  }
  .ind-does-result {
    grid-column: 2;
  }
  .ind-case-split {
    grid-template-columns: 1fr;
  }
  .ind-hero {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .ind-columns,
  .ind-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
  .ind-case-grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 767px) {
  body.page-inner main .ind-hero-actions .lp-button {
    max-width: 100%;
    min-height: 55px;
    height: auto;
    padding-block: 14px;
    line-height: 1.35;
    white-space: normal;
  }
  .ind-columns,
  .ind-control-grid,
  .ind-does-row {
    grid-template-columns: 1fr;
  }
  .ind-does-result {
    grid-column: auto;
  }
  .ind-case {
    padding: var(--space-md);
  }
  .has-view .ind-results > div {
    display: block;
  }
  .has-view .ind-results span {
    margin-top: 6px;
  }
  .ind-case.is-small:not(.has-view) .ind-results {
    flex-direction: column;
    gap: var(--space-md);
  }
  /* The comparison becomes one block per question, each answer labelled, as on the homepage. */
  .ind-why-table :is(table, tbody, tr, th, td) {
    display: block;
    width: auto;
  }
  .ind-why-table table {
    border: 0;
  }
  .ind-why-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ind-why-table tbody tr {
    border: 1px solid var(--color-rule);
    overflow: hidden;
  }
  .ind-why-table tbody tr + tr {
    margin-top: var(--space-sm);
  }
  .ind-why-table :is(th, td) {
    border-right: 0;
  }
  .ind-why-table tbody tr > :last-child {
    border-bottom: 0;
  }
  .ind-why-table .is-matrix {
    border-left: 2px solid rgba(74, 163, 255, 0.45);
    border-right: 0;
  }
  .ind-why-label {
    display: block;
    margin-bottom: 8px;
    color: var(--lp-faint);
  }
}

/* A case closes with its evidence tag and, when it has a page of its own, the way to it. */
.ind-case-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}