/* DS03.4 view states — one region per status; shell (header, rail, filters) stays around it. */
.view-state{grid-column:1/-1;display:grid;justify-items:center;text-align:center;gap:8px;padding:56px 24px;margin:0;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);color:var(--muted)}
.view-state>svg{color:var(--muted);margin-bottom:6px}
.view-state h2{margin:0;font:600 19px/1.5 var(--font-body);color:var(--ink)}
.view-state p{margin:0;max-width:520px;font-size:14px;line-height:1.8}
.view-state-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.view-state-actions:empty{display:none}
.view-state.status-error{border-color:var(--danger);background:var(--dangerBg)}
.view-state.status-error>svg,.view-state.status-error h2{color:var(--danger)}
.view-state.status-unauthorized,.view-state.status-forbidden{border-color:var(--lineStrong);background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 9px,var(--subtle) 9px,var(--subtle) 10px)}
.view-state.status-offline{border-color:var(--offline);background:var(--offlineBg)}
.view-state.status-offline>svg,.view-state.status-offline h2{color:var(--offline)}
.view-state.status-not-found{border-style:dashed}
.view-state.compact{padding:22px 16px;gap:4px}
.view-state.compact h2{font-size:15px}
.view-state.compact p{font-size:12px;line-height:1.6}
.view-state.compact .view-state-actions{margin-top:4px}
.view-state.compact .button{min-height:var(--compact);font-size:12px;padding:6px 10px}
.view-state.surface-comments,.view-state.surface-recipe,.view-state.surface-save{padding:26px 16px}

.skeleton-document{display:grid;grid-template-columns:minmax(0,1fr) var(--inspector);gap:24px;align-items:start}
.skeleton-document-side{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface)}
.skeleton-inline{display:grid;gap:6px;padding:12px 0}
@media(max-width:1000px){.skeleton-document{grid-template-columns:1fr}}

/* Page-level banners (offline / fixture) sit under the review bar, above the product header. */
.page-banners{display:grid;gap:8px;padding:10px 28px 0}
.page-banners:empty{display:none}
@media(max-width:800px){.page-banners{padding:10px 18px 0}}
@media(max-width:600px){.page-banners{padding:8px 12px 0}}

/* State matrix page */
.state-matrix{display:grid;gap:28px}
.state-matrix-surface{display:grid;gap:10px}
.state-matrix-surface h2{margin:0;font:600 16px/1.4 var(--font-body);display:flex;align-items:baseline;gap:10px}
.state-matrix-surface h2 code{font:500 12px var(--font-number);color:var(--muted)}
.state-matrix-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-items:stretch}
.state-matrix-row>figure{margin:0;display:grid;grid-template-rows:auto 1fr;gap:6px}
.state-matrix-row>figure>figcaption{font:600 11px var(--font-number);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.state-matrix-row .skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface)}
.state-matrix-row .skeleton-document{grid-template-columns:1fr;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface)}
.state-matrix-row .skeleton-inline{padding:12px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface)}

/* Review bar controls added in DS03.4 */
.review-bar{gap:10px;flex-wrap:wrap}
.review-bar .review-menu{position:relative}
.review-bar .review-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border:1px solid var(--lineStrong);border-radius:4px;font:500 12px var(--font-body)}
.review-bar .review-menu summary::-webkit-details-marker{display:none}
.review-bar .review-menu[open] summary{background:var(--selected);color:var(--primary)}
.review-bar .review-menu nav{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-banner);display:grid;min-width:220px;padding:6px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px var(--scrim)}
.review-bar .review-menu nav a{padding:8px 10px;border-radius:4px;color:inherit;text-decoration:none;font-size:13px}
.review-bar .review-menu nav a:hover,.review-bar .review-menu nav a[aria-current=page]{background:var(--subtle);color:var(--primary)}
.review-bar .review-menu nav hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.review-bar .sim-control{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--font-body)}
.review-bar .sim-control select{min-height:32px;padding:4px 8px;border:1px solid var(--lineStrong);border-radius:4px;background:transparent;color:inherit;font:inherit}
.review-bar .sim-control select option{color:var(--ink);background:var(--surface)}
.review-bar .sim-control label{display:contents}
@media(max-width:600px){.review-bar{gap:8px}.review-bar .sim-control label span{display:none}.review-bar .sim-control select{max-width:96px;padding:4px 4px}.review-bar .review-menu summary{padding:4px 8px}.review-bar .theme-toggle{padding:6px 8px;margin-left:0}}

/* Catalog specimens for primitives */
.spec-row{display:grid;gap:6px;margin-bottom:14px}
.spec-row .demo-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.spec-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.spec-stack{display:grid;gap:12px}
.spec-toasts{display:grid;gap:8px;justify-items:start}
.spec-dialog{border:1px solid var(--line);border-radius:var(--radius-card);padding:16px;background:var(--surface);max-width:560px}
@media(max-width:600px){.review-caption{display:none}}