/* v4: implementation storyboards. Existing A4 skin remains authoritative.
   Figures are intentionally static and are not an operational application. */
.spec-page .sheet__body { gap: 4mm; }
.spec-page .section-heading { gap: 10px; }
.spec-table th:first-child { width: 28%; }
.spec-table th, .spec-table td { padding: 9px 11px; }
.spec-fields { display: grid; font-size: 12px; line-height: 1.6; }
.spec-fields > div { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.spec-fields > div:last-child { border-bottom: 0; }
.spec-fields dt { color: var(--muted); }
.spec-fields dd { overflow-wrap: anywhere; word-break: keep-all; }
.spec-pin { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 5px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 10px; color: var(--accent); }
.spec-screen .mockup__pane { gap: 8px; padding: 14px 16px; }
.spec-screen .mockup__table, .spec-screen table { table-layout: fixed; }
.spec-screen table th:first-child { width: auto; }
.spec-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.spec-filter > span { border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.spec-check { display: grid; gap: 7px; border-left: 2px solid var(--accent); padding: 12px 16px; background: var(--soft); }
.spec-check > span { font-size: 11px; font-weight: 500; color: var(--accent); }
.spec-check p { font-size: 13px; line-height: 1.7; color: var(--muted); word-break: keep-all; }
.spec-ref { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.7; color: var(--muted); word-break: keep-all; }
.spec-ref a { color: var(--accent); }
.spec-page .note { padding-top: 10px; }
.spec-diagram { padding-block: 2px; }
@media screen and (max-width: 860px) {
  .spec-page .sheet__body { gap: 22px; }
  .spec-fields > div { grid-template-columns: 112px minmax(0, 1fr); }
  .spec-table { min-width: 560px; }
  .spec-ref { margin-top: 8px; }
}
@media print {
  .spec-screen, .spec-check { break-inside: avoid; }
  .spec-ref { text-decoration: none; }
}