/* Production-version detail owns its panels without changing the app shell. */
.variant-detail {font-size: var(--text-body); min-width: 0;}
.vd-header {display: grid; grid-template-columns: 132px minmax(0, 1fr) 228px; align-items: start; gap: 24px; margin: 24px 0;}
.vd-image, .vd-image-state {width: 132px; min-height: 132px; border: 1px solid var(--color-line); background: var(--color-surface); border-radius: var(--radius-lg);}
.vd-image {padding: 10px; height: 132px;}
.vd-image img {width: 100%; height: 100%; object-fit: contain;}
.vd-image-state {padding: 16px; display: flex; flex-direction: column; align-items: start; gap: 8px; font-size: var(--text-small);}
.vd-image-state small {color: var(--color-text-secondary);}
.vd-identity h1 { margin: 0 0 8px; overflow-wrap: anywhere;}
.vd-model {display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 0 0 8px;}
.vd-product {margin: 0 0 10px; overflow-wrap: anywhere;}
.vd-statuses {display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
.vd-header-actions {display: flex; flex-direction: column; gap: 8px;}
.vd-header-actions p {margin: 0;}
.vd-header-actions .sub {font-size: var(--text-caption);}
.vd-tabs {flex-wrap: nowrap; max-width: 100%; overflow-x: auto;}
.vd-tabs button {flex: none; white-space: nowrap;}
.vd-overview {display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); grid-template-areas: "facts aside"; gap: 24px; align-items: start;}
.vd-facts, .vd-aside {display: flex; flex-direction: column; gap: 20px; min-width: 0;}
.vd-facts {grid-area: facts;}
.vd-aside {grid-area: aside;}
.vd-panel { min-width: 0; overflow-wrap: anywhere;}
.vd-panel h2 {margin: 0 0 20px;}
.vd-description {color: var(--color-text-secondary); margin: -4px 0 20px; white-space: pre-wrap;}
.vd-fields {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0;}
.vd-field {min-width: 0;}
.vd-field dt {color: var(--color-text-secondary); font-size: var(--text-caption); margin-bottom: 6px;}
.vd-field dd {font-weight: 500; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;}
.vd-field small {display: block; margin-top: 6px; font-weight: 400;}
.vd-wide {grid-column: 1 / -1;}
.vd-capacity {margin: 0 0 24px; padding: 16px; background: var(--color-surface-subtle); border-radius: var(--radius-xs);}
.vd-capacity dd {font-size: var(--text-h1); font-weight: 700; line-height: 1.4;}
.vd-group-links {margin-top: 24px;}
.vd-group-links > div {margin-top: 6px;}
.vd-electronics {padding: 16px;}
.vd-icon {width: 18px; height: 18px; flex-shrink: 0;}
.vd-electronics summary {display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; list-style: none;}
.vd-electronics summary::-webkit-details-marker {display: none;}
.vd-electronics[open] .vd-chevron {transform: rotate(90deg);}
.vd-electronics summary .sub {margin-left: auto; font-weight: 400;}
.vd-electronics .vd-fields {margin-top: 24px; padding: 8px;}
.vd-file-count {display: flex; gap: 8px; align-items: center; color: var(--color-text-secondary); margin: 0 0 20px; font-size: var(--text-caption);}
.vd-file-summary {padding: 0; margin: 0; list-style: none;}
.vd-file-summary li {display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 16px;}
.vd-file-summary strong {font-size: var(--text-body); font-weight: 500; overflow-wrap: anywhere;}
.vd-file-summary p {margin: 2px 0 0; font-size: var(--text-caption);}
.vd-file-summary .file-icon {font-size: var(--text-caption); width: 44px; height: 40px; min-width: 0; white-space: nowrap; background: var(--color-surface-subtle); border: 1px solid var(--color-line); color: var(--color-text-secondary); border-radius: var(--radius-xs);}
.vd-file-summary button {display: inline-flex; align-items: center; justify-content: center; border-color: transparent;}
.vd-all-files {width: 100%; color: var(--color-accent); border-color: transparent; margin-top: 4px;}
.vd-relation {display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; gap: 12px; border: 0; padding: 4px 0; min-height: 34px; font-size: var(--text-small);}
.vd-relation span:last-child {display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-secondary); flex-shrink: 0;}
.vd-business-actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px;}
.vd-business-actions button {flex: 1; white-space: nowrap;}
.vd-load-error p {margin: 0 0 12px; color: var(--color-danger);}
.variant-detail time {text-decoration: underline dotted; text-underline-offset: 3px; cursor: help;}
@media (max-width: 1200px) {
  .vd-overview {grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "facts";}
  .vd-header {grid-template-columns: 112px minmax(0, 1fr) 180px; gap: 20px;}
  .vd-image, .vd-image-state {width: 112px; min-height: 112px;}
  .vd-image {height: 112px;}
  .vd-aside {display: flex;}
}
@media (max-width: 767px) {
  .vd-header {grid-template-columns: 88px minmax(0, 1fr); gap: 16px;}
  .vd-image, .vd-image-state {width: 88px; min-height: 88px;}
  .vd-image {height: 88px;}
  .vd-header-actions {grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: wrap;}
  .vd-header-actions p {width: 100%;}  .vd-overview {gap: 16px;}
  .vd-aside {display: flex;}  .vd-fields {grid-template-columns: 1fr; gap: 20px;}
  .vd-wide {grid-column: auto;}
  .vd-electronics summary {flex-wrap: wrap;}
  .vd-electronics summary .sub {margin-left: 30px; flex-basis: 100%;}
  .vd-file-summary li {gap: 8px;}
}
/* Five task tabs, with explicit document subnavigation. */
.vd-tabs button {display: inline-flex; align-items: center;}
.vd-count {display: inline-block; margin-left: 8px; min-width: 20px; padding: 1px 5px; border-radius: var(--radius-xs); background: var(--color-surface-muted); text-align: center; font-size: var(--text-caption);}
.vd-tabs .active .vd-count {background: var(--color-surface-selected); color: var(--color-accent);}
.vd-subtabs { flex-wrap: wrap; margin-bottom: 16px;}.vd-count-note {margin: 0 0 20px;}
.vd-section-heading { margin-bottom: 20px;}
.vd-section-heading h2 {margin: 0;}
.vd-related-section {margin-bottom: 20px; scroll-margin-top: 20px;}
.vd-related-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
.vd-related-card { min-width: 0;}
.vd-related-card h3 { margin: 0;}
.vd-related-card .card-head {margin-bottom: 20px;}
.vd-related-card .record-link {overflow-wrap: anywhere;}
.vd-related-card .vd-fields {gap: 16px;}
.vd-provenance {margin-bottom: 20px;}
.vd-provenance > p {margin: 0 0 20px;}
.vd-trace-link {display: flex; align-items: center; gap: 12px; padding: 16px; font-size: var(--text-small); text-align: left;}
.vd-trace-link .vd-icon:last-child {margin-left: auto;}.variant-detail .source-file-current .file-cell {align-items: center;}
.variant-detail .source-file-current .file-cell > div {min-width: 0; overflow-wrap: anywhere;}
.vd-file-actions {display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
@media (max-width: 1200px) {
  .vd-related-list {grid-template-columns: 1fr;}
}
@media (max-width: 767px) {
  .variant-detail .source-file-current table {min-width: 760px;}
}