/* Guide-specific styling for the site-machine docs. Loaded after shared.css.
   No colour or font literals — tokens only. Sizes in rem on the shell's 20px base. */

/* Glossary terms: dotted underline, title tooltip via data-term registry page. */
.content [data-term] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--grey-500);
}

/* Checklist label (READ-DO / DO-CONFIRM) */
.check-label {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--blue-text);
  background: var(--blue-bg);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}

/* "You'll know it worked when" block */
.verify {
  border-left: 4px solid var(--success);
  background: var(--green-bg);
  padding: 0.85rem 1.1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1rem 0 1.75rem;
}
.verify > strong:first-child { display: block; color: var(--green-text); margin-bottom: 0.3rem; }
.verify p:last-child { margin-bottom: 0; }

/* Pipeline diagram (inline SVG) */
.diagram { margin: 1.5rem 0 2rem; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .d-box { fill: var(--surface-alt); stroke: var(--grey-500); stroke-width: 1.5; }
.diagram .d-box--accent { fill: var(--blue-bg); stroke: var(--accent); }
.diagram .d-box--warn { fill: var(--yellow-bg); stroke: var(--warning); }
.diagram .d-box--ok { fill: var(--green-bg); stroke: var(--success); }
.diagram .d-text { fill: var(--grey-900); font-family: var(--font-body); font-size: 16px; }
.diagram .d-text--dag { font-size: 19px; }
.diagram .d-text--small { fill: var(--grey-700); font-size: 14px; }
.diagram .d-arrow { stroke: var(--grey-700); stroke-width: 1.5; fill: none; marker-end: url(#arrow); }
.diagram .d-arrowhead { fill: var(--grey-700); }
.diagram-caption { font-size: 0.875rem; color: var(--grey-700); margin-top: 0.5rem; }

/* Architecture diagrams: standalone SVGs with their own white ground, so they
   get a bordered panel that reads the same in both colour schemes. */
.figure { margin: 1.5rem 0 2rem; }
.figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
}
.figure--narrow img { max-width: 36rem; }
.figure figcaption { font-size: 0.875rem; color: var(--grey-700); margin-top: 0.5rem; }

/* Self-check blocks: scoped to .content so the rail's <details> is untouched */
.content details.self-check {
  background: var(--surface-alt);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  margin: 1.5rem 0;
}
.content details.self-check summary { cursor: pointer; font-weight: 500; }
.content details.self-check > :not(summary) { margin-top: 0.6rem; }

/* Good / bad pair */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0 1.75rem; }
.pair > div { padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--grey-200); }
.pair .pair-good { background: var(--green-bg); border-color: var(--success); }
.pair .pair-bad { background: var(--red-bg); border-color: var(--danger); }
.pair strong:first-child { display: block; margin-bottom: 0.3rem; }
.pair .pair-good strong:first-child { color: var(--green-text); }
.pair .pair-bad strong:first-child { color: var(--red-text); }
.pair p:last-child { margin-bottom: 0; }

/* Four-card grids render 2x2, never 3+1 */
.cards:has(> .card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }

/* Mobile: tables become cards, pairs stack */
@media (max-width: 720px) {
  .pair { grid-template-columns: 1fr; }
  .cards:has(> .card:nth-child(4):last-child) { grid-template-columns: 1fr; }
  .table-wrap table thead { display: none; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap tr {
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-sm);
    margin-bottom: 0.9rem;
    padding: 0.4rem 0;
    background: var(--surface);
  }
  .table-wrap td { border: none; padding: 0.4rem 0.9rem; }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--grey-700);
    font-weight: 500;
    margin-bottom: 0.15rem;
  }
}