/* =================================================================
   HV Tech Stack — Site styles
   -----------------------------------------------------------------
   Scoped additions on top of design-system/typography/typography.css.
   Only what typography.css does not cover lives here.
   ================================================================= */


/* -----------------------------------------------------------------
   1. Active tab state (missing from typography.css)
   ----------------------------------------------------------------- */
.chaptermarks a[aria-current="page"] {
  color: var(--accent-warm);
  border-bottom-color: var(--accent-warm);
}


/* -----------------------------------------------------------------
   2. Callout — key rule or invariant, quieter than a pullquote
   ----------------------------------------------------------------- */
.callout {
  max-width: var(--measure);
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
  background: var(--paper-deep);
  border-left: 3px solid var(--accent-warm);
  font-family: var(--font-serif);
  font-size: var(--step-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout .callout__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--accent-warm);
  margin-bottom: var(--space-sm);
}


/* -----------------------------------------------------------------
   3. Diagram grid and card
   ----------------------------------------------------------------- */
.diagram-grid {
  max-width: var(--frame-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.diagram-card {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms;
}
.diagram-card:hover,
.diagram-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgba(42,37,34,0.35);
}
.diagram-card a { display: block; }
.diagram-card img {
  width: 100%;
  height: auto;
  background: var(--paper-deep);
}
.diagram-card figcaption {
  font-family: var(--font-sans);
  font-size: var(--step-caption);
  color: var(--ink-muted);
  line-height: 1.55;
}
.diagram-card figcaption strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 2px;
}
.diagram-card details {
  font-family: var(--font-sans);
  font-size: var(--step-small);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-sm);
}
.diagram-card summary {
  cursor: pointer;
  color: var(--accent-cool);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-size: var(--step-overline);
  list-style: none;
}
.diagram-card summary::-webkit-details-marker { display: none; }
.diagram-card summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--accent-warm);
}
.diagram-card details[open] summary::before { content: "−"; }
.diagram-card details pre {
  margin-top: var(--space-sm);
  max-height: 280px;
  overflow: auto;
}


/* -----------------------------------------------------------------
   4. Lightbox dialog
   ----------------------------------------------------------------- */
.diagram-dialog {
  border: none;
  padding: 0;
  background: var(--paper);
  max-width: min(95vw, 1400px);
  max-height: 95vh;
  position: relative;
}
.diagram-dialog::backdrop {
  background: rgba(30, 27, 25, 0.82);
}
.diagram-dialog img {
  width: 100%;
  height: auto;
  display: block;
}
.diagram-dialog__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--step-caption);
}


/* -----------------------------------------------------------------
   5. Print — one tab = one printable handout
   ----------------------------------------------------------------- */
@media print {
  .masthead .chaptermarks { display: none; }
  .spread { page-break-inside: avoid; }
  .spread + .spread { page-break-before: always; }
  .diagram-dialog { display: none !important; }
  .diagram-card details { display: none; }
  a { color: var(--ink) !important; background: none !important; }
}