:root {
  color: #1d1811;
  background: #f7f0df;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 32px, 960px); margin: 0 auto; padding: 32px 0 64px; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; line-height: 1.12; }
h1 { margin: 0 0 12px; font-size: clamp(2rem, 7vw, 3.5rem); }
h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 5vw, 2rem); }
p { line-height: 1.6; }
.lede { max-width: 74ch; color: #5f5547; }
.inventory { overflow-x: auto; margin: 28px 0 36px; border: 1px solid #cabd9f; background: rgba(255, 255, 255, 0.48); }
table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.9rem; }
.inventory-component { width: 32%; }
.inventory-version { width: 23%; }
.inventory-licence { width: 19%; }
.inventory-targets { width: 26%; }
th, td { padding: 10px 12px; border-bottom: 1px solid #d8ccb2; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
thead th { background: #ead9a5; }
.inventory-field-label { display: none; overflow-wrap: normal; word-break: normal; }
.inventory-field-value { min-width: 0; overflow-wrap: anywhere; }
section { margin-top: 28px; padding-top: 24px; border-top: 1px solid #cabd9f; }
.components { color: #5f5547; }
pre { max-height: 34rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; border: 1px solid #d8ccb2; background: rgba(255, 255, 255, 0.62); font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (max-width: 520px) {
  main { width: min(100% - 20px, 960px); padding-top: 20px; }
  .inventory { overflow: visible; border: 0; background: transparent; }
  table { display: block; table-layout: auto; font-size: 0.84rem; }
  colgroup { display: none; }
  thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  tbody { display: grid; gap: 12px; }
  tbody tr { display: block; border: 1px solid #cabd9f; background: rgba(255, 255, 255, 0.48); }
  tbody th, tbody td { display: grid; grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr); gap: 12px; width: 100%; padding: 10px 12px; }
  tbody tr > :last-child { border-bottom: 0; }
  .inventory-field-label { display: block; color: #5f5547; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; }
}