@import url('./components/scene.css');
@import url('./components/inspection.css?v=wp114-b114-corrective-r27');

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

html[data-vault-shell="desktop"] body { grid-template-rows: 1fr; overflow: hidden; }
.desktop-app { min-width: 0; min-height: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0,1fr); background: var(--vault-color-surface-canvas); }
.desktop-context { display: grid; grid-template-columns: minmax(17rem,1fr) auto; gap: var(--vault-space-4); align-items: center; min-height: 4.75rem; padding: var(--vault-space-3) var(--vault-space-4); border-bottom: 1px solid var(--vault-color-border-accent); background: linear-gradient(180deg,rgba(43,27,20,.98),rgba(23,15,11,.98)); box-shadow: var(--vault-shadow-medium); z-index: var(--vault-z-content); }
.desktop-context__identity { min-width: 0; display: flex; align-items: center; gap: var(--vault-space-3); }
.desktop-context__mark { flex: 0 0 auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--vault-color-material-brass-500); border-radius: 50%; font-family: var(--vault-font-family-display); font-size: 1.5rem; color: var(--vault-color-material-brass-350); }
.desktop-context h1 { margin: 0; max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1.1rem,2vw,1.55rem); }
.desktop-context h1[data-search-results="true"] { max-width: 72ch; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: clamp(.95rem,1.6vw,1.3rem); }
.desktop-context .vault-eyebrow { margin-bottom: .15rem; }
.desktop-context__actions { display: flex; flex-wrap: nowrap; gap: var(--vault-space-2); }
.desktop-context__actions .vault-button { white-space: nowrap; }
.desktop-workspace { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); overflow: hidden; }
.desktop-stage { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: minmax(0,1fr) auto; background: #0d1013; }
.desktop-scene-frame { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: clamp(.5rem,1.2vw,1rem); }
.desktop-scene-frame > .vault-scene, .desktop-scene-frame > .vault-navigation-stage { width: min(100%,calc((100vh - 9.5rem) * 16 / 9)); max-height: 100%; aspect-ratio: 16/9; }
.desktop-scene-frame .vault-navigation-stage { position: relative; display: grid; place-items: center; }
.desktop-scene-frame .vault-navigation-stage > .vault-scene { width: 100%; }
.desktop-scene-frame .vault-navigation-hotspot { z-index: 30; }
.desktop-scene-status { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); max-width: 32rem; padding: var(--vault-space-5); border: 1px solid var(--vault-color-border-accent); border-radius: var(--vault-radius-medium); background: rgba(16,18,20,.94); text-align: center; box-shadow: var(--vault-shadow-high); z-index: var(--vault-z-controls); }
.desktop-scene-status[hidden] { display: none; }
.desktop-scene-status h2 { margin-top: 0; }
.desktop-command-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--vault-space-3); padding: var(--vault-space-3) var(--vault-space-4); border-top: 1px solid rgba(216,172,79,.35); background: rgba(25,28,33,.98); }
.desktop-command-bar__movement { grid-column: 2; display: flex; gap: var(--vault-space-2); }
.desktop-command-bar__hints { grid-column: 3; justify-self: end; margin: 0; color: var(--vault-color-text-muted); font-size: var(--vault-font-size-caption); }
kbd { padding: .1rem .35rem; border: 1px solid var(--vault-color-border-strong); border-bottom-width: 2px; border-radius: var(--vault-radius-small); background: var(--vault-color-surface-inset); font-family: var(--vault-font-family-mono); }
.desktop-drawer { position: absolute; inset: 0 0 0 auto; width: min(28rem,42vw); display: grid; grid-template-rows: auto minmax(0,1fr); border-left: 1px solid var(--vault-color-border-accent); background: var(--vault-color-overlay-panel); box-shadow: var(--vault-shadow-high); z-index: var(--vault-z-drawer); transform: translateX(0); transition: transform var(--vault-motion-duration-standard) var(--vault-motion-easing-standard); }
.desktop-drawer[hidden] { display: none; }
.desktop-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vault-space-3); padding: var(--vault-space-4); border-bottom: 1px solid var(--vault-color-border-subtle); }
.desktop-drawer__header h2 { margin: .15rem 0 0; font-family: var(--vault-font-family-display); }
.desktop-drawer__body { min-height: 0; overflow: auto; padding: var(--vault-space-4); }
.desktop-category-list { display: grid; gap: var(--vault-space-2); }
.vault-category-jump { display: grid; gap: .4rem; margin-bottom: var(--vault-space-2); font-weight: 700; }
.vault-category-jump input { width: 100%; min-height: var(--vault-size-control-default); padding: .65rem .75rem; border: 2px solid var(--vault-color-border-strong); border-radius: var(--vault-radius-small); background: var(--vault-color-surface-input); color: var(--vault-color-text-primary); font: inherit; }
.vault-category-jump__status { min-height: 1.4em; margin: 0 0 var(--vault-space-3); color: var(--vault-color-text-muted); font-size: var(--vault-font-size-caption); }
.desktop-category-list .vault-button { width: 100%; display: flex; justify-content: space-between; gap: var(--vault-space-3); text-align: left; }
.desktop-map-placeholder { min-height: 18rem; display: grid; place-items: center; padding: var(--vault-space-5); border: 1px dashed var(--vault-color-border-strong); background: radial-gradient(circle,rgba(111,196,214,.13),transparent 65%); text-align: center; }
.desktop-context-details dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--vault-space-2) var(--vault-space-4); }
.desktop-context-details dt { font-weight: 700; }
.desktop-context-details dd { margin: 0; overflow-wrap: anywhere; }
.desktop-overlay-root { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--vault-space-5); background: var(--vault-color-overlay-scrim); z-index: var(--vault-z-modal); }
.desktop-overlay-root[hidden] { display: none; }
.desktop-overlay-panel { box-sizing:border-box; width: min(62rem,calc(100vw - 3rem)); max-width:100%; min-width:0; max-height: calc(100vh - 3rem); overflow: auto; overflow-x:hidden; }
.desktop-overlay-panel .vault-guide { width: 100%; }
.desktop-tutorial { width: min(42rem,calc(100vw - 3rem)); }
.desktop-collection { box-sizing:border-box; width:100%; max-width:100%; max-height:100%; overflow:auto; padding:var(--vault-space-5); border:1px solid var(--vault-color-border-accent); border-radius:var(--vault-radius-large); background:var(--vault-color-overlay-panel); box-shadow:var(--vault-shadow-high); }
.desktop-collection__header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--vault-space-4); align-items:flex-start; margin-bottom:var(--vault-space-4); }
.desktop-collection__header > :first-child { min-width:0; flex:1 1 20rem; }
.desktop-collection__header > .vault-actions { flex:0 1 auto; justify-content:flex-end; }
.desktop-collection__header h2 { margin: .2rem 0 0; font-family: var(--vault-font-family-display); }
.desktop-collection__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--vault-space-4); }
.desktop-overlay-panel form,.desktop-overlay-panel input,.desktop-overlay-panel select,.desktop-overlay-panel textarea,.desktop-collection__surface{box-sizing:border-box;max-width:100%;min-width:0}.desktop-overlay-panel input,.desktop-overlay-panel select,.desktop-overlay-panel textarea{width:100%}
.desktop-collection__surface { min-height: 18rem; padding: var(--vault-space-4); border: 1px solid var(--vault-color-border-strong); border-radius: var(--vault-radius-medium); background: var(--vault-color-surface-panel); }
.desktop-collection__controls { display: flex; flex-wrap: wrap; gap: var(--vault-space-2); margin-top: var(--vault-space-4); }
.desktop-search-form:not(.vault-search-terminal) { display: flex; gap: var(--vault-space-2); align-items: end; }
.desktop-search-form:not(.vault-search-terminal) label { flex: 1; display: grid; gap: var(--vault-space-2); }
.desktop-search-form:not(.vault-search-terminal) input { min-height: var(--vault-size-control-default); padding: .65rem .75rem; border: 2px solid var(--vault-color-border-strong); border-radius: var(--vault-radius-small); background: var(--vault-color-surface-input); color: var(--vault-color-text-primary); font: inherit; }
.desktop-share-output { display: grid; gap: var(--vault-space-2); padding: var(--vault-space-3); border: 1px solid var(--vault-color-state-information); border-radius: var(--vault-radius-medium); background: var(--vault-color-surface-info); overflow-wrap: anywhere; }
.desktop-update-notice { margin-top: var(--vault-space-4); }
.desktop-noscript { max-width: 46rem; margin: 4rem auto; padding: var(--vault-space-5); border: 1px solid var(--vault-color-border-accent); background: var(--vault-color-surface-panel); }
[data-vault-large-text="true"] { font-size: 125%; }
[data-vault-large-text="true"] .desktop-context__actions .vault-button span[data-optional] { display: none; }
/* WP-102: keep the expanding global action set inside common desktop widths. */
@media (max-width:95rem) {
  .desktop-context { grid-template-columns: minmax(0,1fr); }
  .desktop-context__actions { min-width: 0; flex-wrap: wrap; }
}
@media (max-width:74.9375rem), (max-height:37.4375rem) {
  .desktop-app { min-width: 0; min-height: 0; }
  .desktop-context { grid-template-columns: minmax(0,1fr); min-height: 0; align-items: stretch; padding-block: var(--vault-space-2); }
  .desktop-context__actions { min-width: 0; overflow-x: auto; padding-bottom: .15rem; }
  .desktop-context__actions .vault-button { flex: 0 0 auto; padding-inline: .65rem; }
  .desktop-command-bar { grid-template-columns: minmax(0,1fr); }
  .desktop-command-bar__movement { grid-column: 1; justify-self: center; }
  .desktop-command-bar__hints { display: none; }
  .desktop-drawer { width: min(24rem,calc(100vw - 2rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-drawer { transition: none; }
}

/* B082 desktop map overlay/drawer */
.desktop-map-toggle { min-width: 5.75rem; border-radius: 999px; gap: .45rem; }
.desktop-map-toggle__icon { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid currentColor; border-radius: 50%; font-size: 1rem; line-height: 1; }
.desktop-map-drawer { width: min(34rem,48vw); z-index: var(--vault-z-drawer); background: color-mix(in srgb,var(--vault-color-overlay-panel) 98%,transparent); }
.desktop-workspace[data-vault-map-open="true"] .desktop-command-bar { margin-inline-end:min(34rem,48vw); }
.desktop-workspace[data-vault-map-open="true"] .desktop-command-bar__movement { max-width:100%; flex-wrap:wrap; justify-content:center; }
.desktop-map-drawer__body { display: grid; align-content: start; gap: var(--vault-space-3); }
.desktop-map-edge-close { position: absolute; top: 50%; left: -1.55rem; z-index: 1; width: 3.1rem; height: 4.75rem; transform: translateY(-50%); border: 1px solid var(--vault-color-border-accent); border-right: 0; border-radius: 999px 0 0 999px; background: var(--vault-color-overlay-panel); color: var(--vault-color-text-primary); font: 700 1.8rem/1 var(--vault-font-family-body); cursor: pointer; box-shadow: var(--vault-shadow-medium); }
.desktop-map-edge-close:hover { background: var(--vault-color-surface-hover); }
.desktop-map-edge-close:focus-visible { outline: var(--vault-border-width-focus) solid var(--vault-color-state-focus); outline-offset: var(--vault-border-offset-focus); }
.desktop-map-context { margin: 0; }
.desktop-map-context { font-weight: 700; color: var(--vault-color-material-brass-350); }
.desktop-map-canvas { min-height: 20rem; container-type: inline-size; padding: var(--vault-space-2); border: 1px solid var(--vault-color-border-strong); border-radius: var(--vault-radius-medium); background: radial-gradient(circle,rgba(111,196,214,.11),transparent 70%),var(--vault-color-surface-inset); overflow: auto; }
.desktop-map-canvas > p { text-align: center; }
.desktop-map-canvas .vault-map { margin: 0; }
.desktop-map-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vault-space-3); }
.desktop-map-actions p { margin: 0; color: var(--vault-color-text-muted); font-size: var(--vault-font-size-caption); }
.desktop-map-drawer[data-vault-map-scope="collection"] { border-left-color: var(--vault-color-state-information); }
.desktop-map-drawer[hidden] + * { min-width: 0; }
@media (max-width:74.9375rem), (max-height:37.4375rem) {
  .desktop-map-drawer { width: min(30rem,calc(100vw - 2rem)); }
  .desktop-workspace[data-vault-map-open="true"] .desktop-command-bar { margin-inline-end:min(30rem,calc(100vw - 2rem)); }
  .desktop-map-canvas { min-height: 15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-map-edge-close { transition: none; }
}

/* WP-085 200% zoom / large-text reflow. */
@media (max-width: 50rem), (max-height: 30rem) {
  html[data-vault-shell="desktop"] body { overflow: auto; }
  .desktop-app { height: auto; min-height: 100vh; min-height: 100dvh; }
  .desktop-context { position: static; grid-template-columns: minmax(0,1fr); }
  .desktop-context h1 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .desktop-context__actions { flex-wrap: wrap; overflow: visible; }
  .desktop-workspace, .desktop-stage { overflow: visible; min-height: 0; }
  .desktop-stage { grid-template-rows: minmax(18rem, 56dvh) auto; }
  .desktop-command-bar__movement { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .desktop-command-bar__movement .vault-button { min-width: 0; white-space: normal; }
  .desktop-drawer { position: fixed; width: min(100%, 30rem); }
  .desktop-workspace[data-vault-map-open="true"] .desktop-command-bar { position:relative; z-index:calc(var(--vault-z-drawer) + 1); margin-inline-end:0; background:var(--vault-color-overlay-panel); }
  .desktop-overlay-root { align-items: start; padding: .5rem; overflow: auto; }
  .desktop-overlay-panel, .desktop-tutorial, .desktop-collection { width: 100%; max-height: none; }
  .desktop-collection__grid { grid-template-columns: 1fr; }
  .vault-guide--desktop { grid-template-columns: 1fr; }
  .vault-guide--desktop > header, .vault-guide--desktop > footer { grid-column: auto; }
}
[data-vault-large-text="true"] .desktop-command-bar__movement { flex-wrap: wrap; }
@media (forced-colors: active) {
  .desktop-context, .desktop-command-bar, .desktop-drawer, .desktop-collection { background: Canvas; color: CanvasText; }
}

/* WP-095 global context, breadcrumbs, and About This Room. */
.vault-context-breadcrumbs { margin-top: .25rem; color: var(--vault-color-text-muted); font-size: var(--vault-font-size-caption); }
.vault-context-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .2rem .45rem; margin: 0; padding: 0; list-style: none; }
.vault-context-breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.vault-context-breadcrumbs li:not(:last-child)::after { content: '›'; margin-left: .45rem; color: var(--vault-color-material-brass-350); }
.vault-context-breadcrumbs li:last-child { color: var(--vault-color-text-primary); font-weight: 700; }
.vault-about-room { margin-bottom: var(--vault-space-4); padding-bottom: var(--vault-space-3); border-bottom: 1px solid var(--vault-color-border-subtle); }
.vault-about-room h2 { margin: 0 0 var(--vault-space-2); font-size: 1.2rem; }
.vault-about-room p { margin: 0; line-height: 1.55; }

/* B114 visitor-corrective overlay readability and tutorial balance. */
.desktop-tutorial { width:min(52rem,calc(100vw - 3rem)); padding:var(--vault-space-5); border:1px solid var(--vault-color-border-accent); border-radius:var(--vault-radius-large); background:#191c21; box-shadow:var(--vault-shadow-high); }
.desktop-tutorial > section { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--vault-space-4); }
.desktop-tutorial .vault-legend-panel { max-height:min(44vh,24rem); overflow:auto; }
.desktop-overlay-panel--share { width:min(42rem,calc(100vw - 3rem)); padding:0; border-radius:var(--vault-radius-large); background:#191c21; box-shadow:var(--vault-shadow-high); }