/* Model reference pages extend the shared design documentation shell. */
.km-page { --ds-accent: #59364a; --ds-soft: #f3ebef; --ds-focus: #75475f; }
.km-page .ds-index { max-width: 1160px; }
.km-page .ds-h1 { max-width: 20ch; }
.km-page .ds-btn { min-height: 44px; }
.km-page .ds-btn--outline { color: var(--ds-accent); background: transparent; }
.km-status { color: var(--ds-muted); font-size: 12px; }
.km-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.km-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.km-section-heading .ds-h2 { margin-bottom: 0; }
.km-text-link { font-size: 13px; white-space: nowrap; }
.km-matrix { margin: 24px 0 12px; }
.km-matrix img { display: block; width: 100%; border: 1px solid var(--ds-line); border-radius: 6px; }
.km-page figcaption { margin-top: 10px; font-size: 12px; color: var(--ds-muted); }
.km-angle-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 20px 0; }
.km-angle { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--ds-line); }
.km-angle strong { font: 600 12px var(--ds-font-mono); }
.km-angle span { font-size: 12px; color: var(--ds-muted); }
.km-details { border: 1px solid var(--ds-line); padding: 14px 18px; border-radius: 6px; margin-top: 20px; background: var(--ds-surface); }
.km-details summary { cursor: pointer; font-weight: 600; }
.km-details p:last-child { margin-bottom: 0; }
.km-identity { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 30px; align-items: start; }
.km-source { margin: 14px 0 0; }
.km-source img { width: 100%; height: auto; display: block; border-radius: 6px; }
.km-anchor { width: min(100%, 330px); margin: 28px 0 0; }
.km-anchor > a, .km-body-image { display: block; background: #f4edf0; border: 1px solid var(--ds-line); border-radius: 6px; }
.km-anchor img { display: block; width: 100%; max-height: 650px; object-fit: contain; }
.km-body-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px 14px; margin-top: 24px; }
.km-body-view { margin: 0; min-width: 0; }
.km-body-image { padding: 8px; }
.km-body-image:hover { border-color: var(--ds-accent); }
.km-body-image img { display: block; width: 100%; height: 370px; object-fit: contain; }
.km-body-view figcaption { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.km-body-view figcaption strong { font: 600 12px var(--ds-font-mono); }
.km-body-view figcaption a { display: block; flex-basis: 100%; min-height: 30px; padding-top: 5px; }
.km-page .ds-table { width: 100%; }
.km-page .ds-table th[scope="row"] { text-align: left; font-weight: 600; }
.km-prompt { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 6px; padding: 22px; font-size: 13px; line-height: 1.8; }
.km-copy-status { min-height: 20px; font-size: 12px; color: var(--ds-accent); }
.km-checks { padding-left: 20px; }
.km-checks li { margin: 8px 0; }
.km-downloads { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.km-downloads a { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--ds-line); border-radius: 6px; background: var(--ds-surface); text-decoration: none; }
.km-downloads a:hover { border-color: var(--ds-accent); }
.km-downloads a span { font-size: 12px; color: var(--ds-muted); }
.km-downloads a span:last-child { color: var(--ds-accent); margin-top: 8px; }
.km-version { display: flex; gap: 20px; align-items: baseline; border-bottom: 1px solid var(--ds-line); padding: 15px 0; }
.km-version .ds-h3 { margin-top: 0; }
.km-toc-file { margin-top: 20px; }
.km-model-cards { grid-template-columns: repeat(auto-fit,minmax(280px,420px)); }
.km-card-image { height: 320px; overflow: hidden; background: #e8d5dd; }
.km-card-image img { width: 100%; height: 100% !important; object-fit: contain; display: block; }
.km-card-version { font-size: 12px; color: var(--ds-muted); }
@media (max-width: 1000px) {
  .km-page .ds-layout { grid-template-columns: 170px minmax(0,1fr); gap: 24px; }
  .km-identity { grid-template-columns: minmax(0,1fr) 180px; gap: 20px; }
  .km-body-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .km-page .ds-top { gap: 12px; padding: 0 16px; }
  .km-page .ds-layout { display: block; padding: 24px 16px 50px; }
  .km-page .ds-toc { position: static; max-height: none; margin: 0 0 26px; padding-left: 0; padding-right: 0; overflow: visible; }
  .km-page .ds-toc nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .km-page .ds-toc a { padding: 8px; }
  .km-toc-file { display: none !important; }
  .km-page .ds-h1 { font-size: 36px; }
  .km-identity { grid-template-columns: minmax(0,1fr); }
  .km-source { max-width: 230px; }
  .km-body-image img { height: 320px; }
  .km-angle-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .km-downloads { grid-template-columns: minmax(0,1fr); }
  .km-section-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .km-version { flex-wrap: wrap; gap: 8px 18px; }
  .km-page .ds-table th, .km-page .ds-table td { overflow-wrap: anywhere; padding: 10px 8px; }
}


/* Production references keep details and actual test status together. */
.km-face-grid .km-body-image img { height: 220px; }
.km-production-facts, .km-motion-grid { display: grid; gap: 14px; margin: 24px 0; }
.km-production-facts { grid-template-columns: repeat(3,minmax(0,1fr)); }
.km-production-facts p { margin: 0; }
.km-production-facts strong, .km-production-facts span { display: block; }
.km-production-facts span { color: var(--ds-muted); font-size: 12px; }
.km-motion-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.km-motion-test { border: 1px solid var(--ds-line); border-radius: 6px; padding: 18px; min-width: 0; }
.km-motion-test video { display: block; width: 100%; max-height: 400px; margin: 12px 0; }
@media (max-width: 760px) {
  .km-production-facts, .km-motion-grid { grid-template-columns: minmax(0,1fr); }
  .km-face-grid .km-body-image img { height: 190px; }
}

.km-scene-image { display: block; width: 100%; max-height: 450px; object-fit: contain; background: var(--ds-soft); }

/* m/003: real-photo references on a dark studio backdrop; pending angle slots */
.km-anchor-pair { display: flex; flex-wrap: wrap; gap: 16px; }
.km-anchor-pair .km-anchor { width: min(100%, 300px); }
[data-design="model-003"] .km-body-image { background: #2a2a2c; }
.km-pending { display: flex; align-items: center; justify-content: center; height: 370px; border-style: dashed; background: transparent !important; color: var(--ds-muted, #777); font: 600 12px var(--ds-font-mono); text-transform: uppercase; letter-spacing: .08em; }
.km-face-grid .km-pending { height: 220px; }
@media (max-width: 720px) { .km-pending { height: 320px; } .km-face-grid .km-pending { height: 190px; } }