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

html[data-vault-shell="pending"] .desktop-app,
html[data-vault-shell="pending"] .mobile-app { visibility: hidden; }
html[data-vault-shell="mobile"] body { display: block; overflow: hidden; }
html[data-vault-shell="mobile"] .desktop-app { display: none !important; }
html[data-vault-shell="desktop"] .mobile-app { display: none !important; }

.mobile-app { min-width: 0; min-height: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr); background: var(--vault-color-surface-canvas); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.mobile-app[hidden] { display: none; }
.mobile-header { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--vault-space-2); align-items: center; padding: .55rem .65rem; border-bottom: 1px solid var(--vault-color-border-accent); background: linear-gradient(180deg,rgba(43,27,20,.99),rgba(23,15,11,.99)); box-shadow: var(--vault-shadow-medium); z-index: var(--vault-z-content); }
.mobile-context { min-width: 0; }
.mobile-context .vault-eyebrow { margin-bottom: .15rem; }
.mobile-context h1 { margin: 0; font-size: clamp(1rem,4.6vw,1.35rem); line-height: 1.2; overflow-wrap: anywhere; }
.mobile-orientation { margin: .18rem 0 0; color: var(--vault-color-text-muted); font-size: var(--vault-font-size-caption); }
.mobile-header__actions { display: flex; gap: .25rem; }
.mobile-icon-action { min-width: 3rem; min-height: 3rem; display: grid; place-items: center; gap: .05rem; padding: .25rem; border: 1px solid var(--vault-color-border-strong); border-radius: var(--vault-radius-small); background: var(--vault-color-surface-control); color: var(--vault-color-text-primary); font: inherit; font-size: .72rem; }
.mobile-icon-action > span:first-child { font-size: 1rem; font-weight: 800; }
.mobile-workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto auto; overflow: hidden; }
.mobile-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0d1013; }
.mobile-scene-frame { position: relative; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: .35rem; }
.mobile-scene-frame > .vault-navigation-stage { position: relative; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.mobile-scene-frame .vault-scene { width: min(100%,calc((100dvh - 13rem) * 3 / 4)); max-height: 100%; }
.mobile-app[data-orientation="landscape"] .mobile-scene-frame .vault-scene { width: min(100%,calc((100dvh - 1rem) * 8 / 5)); }
.mobile-scene-status { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: min(90%,28rem); padding: var(--vault-space-4); border: 1px solid var(--vault-color-border-accent); border-radius: var(--vault-radius-medium); background: rgba(16,18,20,.96); text-align: center; box-shadow: var(--vault-shadow-high); z-index: var(--vault-z-controls); }
.mobile-scene-status[hidden] { display: none; }
.mobile-scene-status h2 { margin-top: 0; }
.mobile-tap-zone { position: absolute; inset-block: 20% 20%; width: 18%; z-index: 45; display: grid; place-content: center; gap: .15rem; border: 0; background: transparent; color: var(--vault-color-text-primary); text-shadow: 0 1px 3px #000; font: inherit; }
.mobile-tap-zone--left { left: 0; }
.mobile-tap-zone--right { right: 0; }
.mobile-tap-zone > span { font-size: clamp(2rem,10vw,4rem); }
.mobile-tap-zone:disabled { opacity: .25; }
.mobile-doorway-action { position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); z-index: 46; min-width: 9.5rem; min-height: 3rem; display: grid; padding: .4rem .75rem; border: 2px solid var(--vault-color-border-accent); border-radius: var(--vault-radius-medium); background: rgba(16,18,20,.9); color: var(--vault-color-text-primary); font: inherit; text-align: center; }
.mobile-doorway-action small { color: var(--vault-color-text-muted); }
.mobile-doorway-action:disabled { display: none; }
.mobile-quick-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; padding: .4rem .55rem; border-top: 1px solid rgba(216,172,79,.25); background: rgba(22,25,29,.98); }
.mobile-quick-actions button,
.mobile-thumb-dock button { min-width: 0; min-height: 3.25rem; display: grid; place-items: center; align-content: center; gap: .1rem; padding: .35rem .2rem; border: 1px solid var(--vault-color-border-strong); border-radius: var(--vault-radius-small); background: var(--vault-color-surface-control); color: var(--vault-color-text-primary); font: inherit; font-size: .78rem; }
.mobile-quick-actions button > span:first-child,
.mobile-thumb-dock button > span:first-child { font-size: 1.05rem; font-weight: 800; }
.mobile-thumb-dock { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; padding: .4rem .55rem calc(.45rem + env(safe-area-inset-bottom)); background: rgba(18,20,24,.99); box-shadow: 0 -.35rem 1rem rgba(0,0,0,.28); }
.mobile-thumb-dock .mobile-forward-control { border-width: 2px; border-color: var(--vault-color-border-accent); background: var(--vault-color-material-brass-500); color: var(--vault-color-text-on-accent); font-weight: 800; }
.mobile-thumb-dock button:disabled { opacity: .42; cursor: not-allowed; }
.mobile-surface-root { position: fixed; inset: 0; z-index: var(--vault-z-modal); display: grid; align-items: stretch; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--vault-color-overlay-scrim); }
.mobile-surface-root[hidden] { display: none; }
.mobile-surface { min-width: 0; min-height: 0; display: grid; overflow: hidden; background: var(--vault-color-overlay-panel); }
.mobile-surface--screen,
.mobile-surface--guide,
.mobile-surface--tutorial,
.mobile-surface--collection { width: 100%; height: 100%; }
.mobile-surface--sheet { align-self: end; width: 100%; max-height: min(86dvh,48rem); border-top: 1px solid var(--vault-color-border-accent); border-radius: var(--vault-radius-large) var(--vault-radius-large) 0 0; box-shadow: var(--vault-shadow-high); }
.mobile-surface > section,
.mobile-surface > .vault-guide { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; }
.mobile-surface__header { min-width: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--vault-space-3); padding: .8rem .85rem; border-bottom: 1px solid var(--vault-color-border-subtle); background: rgba(23,15,11,.96); }
.mobile-surface__header h2 { margin: .1rem 0 0; font-family: var(--vault-font-family-display); font-size: clamp(1.25rem,6vw,1.8rem); overflow-wrap: anywhere; }
.mobile-surface__header .vault-eyebrow { margin-bottom: .15rem; }
.mobile-surface__body { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--vault-space-4); padding-bottom: calc(var(--vault-space-5) + env(safe-area-inset-bottom)); }
.mobile-surface__footer { display: flex; flex-wrap: wrap; gap: var(--vault-space-2); padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--vault-color-border-subtle); background: rgba(23,15,11,.97); }
.mobile-reading { max-width: 46rem; margin-inline: auto; line-height: 1.65; }
.mobile-guide.vault-guide { border: 0; border-radius: 0; box-shadow: none; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0,1fr) auto; padding: .8rem; overflow: auto; }
.mobile-guide .vault-guide-nav { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .35rem; }
.mobile-guide .vault-guide-nav .vault-button { flex: 0 0 auto; scroll-snap-align: start; }
.mobile-guide article { max-width: 46rem; }
.mobile-category-list,
.mobile-action-list,
.mobile-collection-actions { display: grid; gap: var(--vault-space-2); }
.mobile-category-list .vault-button,
.mobile-action-list .vault-button,
.mobile-collection-actions .vault-button { width: 100%; text-align: left; }
.mobile-surface .vault-category-jump { margin-bottom: var(--vault-space-2); }
.mobile-surface .vault-category-jump input { min-height: 3rem; }
.mobile-map { display: grid; gap: var(--vault-space-4); }
.mobile-map__visual { min-height: 10rem; display: grid; place-items: center; align-content: center; gap: .5rem; border: 1px dashed var(--vault-color-border-strong); background: radial-gradient(circle,rgba(111,196,214,.13),transparent 65%); text-align: center; }
.mobile-map__current { font-size: 2rem; }
.mobile-search-form { display: grid; gap: var(--vault-space-3); }
.mobile-search-form label { display: grid; gap: var(--vault-space-2); font-weight: 700; }
.mobile-search-form input { width: 100%; min-height: 3rem; padding: .7rem .8rem; 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; }
.mobile-search-results,
.mobile-share-output { display: grid; gap: var(--vault-space-3); margin-top: var(--vault-space-4); overflow-wrap: anywhere; }
.mobile-search-result { display: grid; gap: .35rem; padding: var(--vault-space-3); border: 1px solid var(--vault-color-border-strong); border-radius: var(--vault-radius-medium); background: var(--vault-color-surface-panel); }
.mobile-scope-banner { 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); font-weight: 700; }
.mobile-collection-body,
.mobile-collection-hub { display: grid; gap: var(--vault-space-4); }
.mobile-update-note { color: var(--vault-color-text-muted); }
.mobile-surface .vault-category-hub--mobile { grid-template-columns: repeat(2,minmax(0,1fr)); }
.mobile-surface .vault-category-hub--mobile .vault-button { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 22.5rem) {
  .mobile-header { grid-template-columns: minmax(0,1fr); }
  .mobile-header__actions { justify-content: stretch; }
  .mobile-icon-action { flex: 1; }
  .mobile-surface .vault-category-hub--mobile { grid-template-columns: 1fr; }
}

@media (orientation: landscape), (max-height: 37.4375rem) {
  .mobile-app { grid-template-columns: minmax(0,1fr) minmax(16rem,42vw); grid-template-rows: auto minmax(0,1fr); }
  .mobile-header { grid-column: 1 / -1; padding-block: .35rem; }
  .mobile-context .vault-eyebrow,
  .mobile-orientation { display: none; }
  .mobile-workspace { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0,1fr) minmax(16rem,42vw); grid-template-rows: minmax(0,1fr) auto; }
  .mobile-stage { grid-column: 1; grid-row: 1 / 3; }
  .mobile-quick-actions { grid-column: 2; grid-row: 1; align-content: end; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px 6px; border-top: 0; border-left: 1px solid rgba(216,172,79,.25); }
  .mobile-thumb-dock { grid-column: 2; grid-row: 2; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-left: 1px solid rgba(216,172,79,.25); }
  .mobile-quick-actions button,
  .mobile-thumb-dock button { min-height: 44px; padding: 3px; }
  .mobile-scene-frame .vault-scene { height: 100%; width: auto; max-width: 100%; }
  .mobile-surface--sheet { width: min(32rem,50vw); height: 100%; max-height: none; justify-self: end; border-top: 0; border-left: 1px solid var(--vault-color-border-accent); border-radius: var(--vault-radius-large) 0 0 var(--vault-radius-large); }
}

/* WP-102: preserve 44px touch targets without allowing short-landscape docks to intrude into the header. */
@media (orientation: landscape) and (max-height: 22rem) {
  .mobile-quick-actions { gap: .2rem; padding: .2rem .35rem; }
  .mobile-thumb-dock { gap: .2rem; padding: .2rem .35rem calc(.2rem + env(safe-area-inset-bottom)); }
  .mobile-quick-actions button,
  .mobile-thumb-dock button { min-height: 2.75rem; padding: .15rem; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (min-resolution: 2dppx) and (max-width: 56.1875rem) {
  .mobile-icon-action,
  .mobile-quick-actions button,
  .mobile-thumb-dock button { min-height: 3rem; }
}

/* WP-083 mobile map bottom sheet / compact full overlay. */
.mobile-surface-root[data-map-open="true"] {
  align-items: end;
  touch-action: none;
}
.mobile-surface--map-sheet {
  align-self: end;
  width: 100%;
  max-height: min(94dvh, 56rem);
  border: 1px solid var(--vault-color-border-accent);
  border-bottom: 0;
  border-radius: var(--vault-radius-large) var(--vault-radius-large) 0 0;
  box-shadow: var(--vault-shadow-high);
  background: var(--vault-color-overlay-panel);
}
.mobile-map-sheet {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.mobile-map-sheet__drag-handle {
  width: 4rem;
  height: .35rem;
  margin: .45rem auto .2rem;
  border-radius: 999px;
  background: var(--vault-color-border-strong);
  touch-action: none;
}
.mobile-map-sheet__header {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--vault-space-3);
  padding: .55rem max(.85rem, env(safe-area-inset-right)) .75rem max(.85rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--vault-color-border-subtle);
  background: rgba(23,15,11,.98);
}
.mobile-map-sheet__heading { min-width: 0; }
.mobile-map-sheet__header h2 {
  margin: .1rem 0 0;
  font-family: var(--vault-font-family-display);
  font-size: clamp(1.35rem, 6vw, 2rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.mobile-map-sheet__header .vault-button { flex: 0 0 auto; min-width: 6.5rem; min-height: 3rem; font-weight: 800; }
.mobile-map-sheet__body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  padding: var(--vault-space-3) max(var(--vault-space-3), env(safe-area-inset-right)) var(--vault-space-5) max(var(--vault-space-3), env(safe-area-inset-left));
  scrollbar-gutter: stable;
}
.mobile-map-sheet__context,
.mobile-map-sheet__summary { margin: 0 0 var(--vault-space-3); font-size: 1rem; line-height: 1.55; }
.mobile-map-sheet__context { font-weight: 800; }
.mobile-map-sheet__zoom {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: .35rem;
  align-items: center;
  margin: 0 0 var(--vault-space-3);
  padding: .4rem;
  border: 1px solid var(--vault-color-border-subtle);
  border-radius: var(--vault-radius-medium);
  background: rgba(23,15,11,.98);
}
.mobile-map-sheet__zoom .vault-button { min-width: 0; min-height: 2.75rem; padding-inline: .45rem; }
.mobile-map-sheet__zoom-value { min-width: 3.5rem; text-align: center; font-weight: 800; }
.mobile-map-sheet__canvas { min-width: 0; }
.mobile-map-sheet__canvas .vault-map__viewport {
  min-block-size: clamp(16rem, 48dvh, 34rem);
  max-block-size: none;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
  background: var(--vault-color-surface-panel);
}
.mobile-map-sheet__canvas .vault-map__svg { min-block-size: clamp(16rem, 48dvh, 34rem); }
.mobile-map-sheet__canvas .vault-map-legend { font-size: .95rem; line-height: 1.45; }
.mobile-map-sheet__body h3 { margin: var(--vault-space-5) 0 var(--vault-space-2); font-size: 1.1rem; }
.mobile-map-sheet__location-key {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding-left: 1.35rem;
  font-size: .95rem;
  line-height: 1.45;
}
.mobile-map-sheet__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vault-space-2);
  padding: .7rem max(.85rem, env(safe-area-inset-right)) max(.7rem, env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-left));
  border-top: 1px solid var(--vault-color-border-subtle);
  background: rgba(23,15,11,.98);
}
.mobile-map-sheet__footer .vault-button { flex: 1 1 11rem; min-height: 3rem; }

@media (orientation: landscape), (max-height: 29.9375rem) {
  .mobile-surface-root[data-map-open="true"] { align-items: stretch; }
  .mobile-surface--map-sheet,
  .mobile-surface--full-overlay {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .mobile-map-sheet__drag-handle { display: none; }
  .mobile-map-sheet__header { padding-top: max(.45rem, env(safe-area-inset-top)); }
  .mobile-map-sheet__body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(15rem, .8fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 0 var(--vault-space-4);
  }
  .mobile-map-sheet__context,
  .mobile-map-sheet__summary { grid-column: 2; }
  .mobile-map-sheet__zoom { grid-column: 2; grid-row: 4; align-self: start; position: static; }
  .mobile-map-sheet__canvas { grid-column: 1; grid-row: 1 / 5; }
  .mobile-map-sheet__body h3,
  .mobile-map-sheet__location-key { display: none; }
  .mobile-map-sheet__canvas .vault-map__viewport,
  .mobile-map-sheet__canvas .vault-map__svg { min-block-size: calc(100dvh - 9.5rem); }
}

@media (max-width: 22.5rem) {
  .mobile-map-sheet__zoom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-map-sheet__zoom-value { grid-column: 1 / -1; }
}

/* WP-085 large text, orientation, and high-contrast resilience. */
[data-vault-large-text="true"] .mobile-header { align-items: start; }
[data-vault-large-text="true"] .mobile-header__actions { flex-wrap: wrap; }
[data-vault-large-text="true"] .mobile-thumb-dock { grid-template-columns: repeat(2,minmax(0,1fr)); }
[data-vault-large-text="true"] .mobile-surface .vault-category-hub--mobile { grid-template-columns: 1fr; }
@media (max-width: 20rem), (max-height: 24rem) {
  .mobile-header { grid-template-columns: 1fr; }
  .mobile-header__actions { justify-content: stretch; flex-wrap: wrap; }
  .mobile-icon-action { flex: 1 1 6rem; }
  .mobile-quick-actions, .mobile-thumb-dock { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mobile-surface--screen, .mobile-surface--guide, .mobile-surface--tutorial { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}
@media (forced-colors: active) {
  .mobile-header, .mobile-quick-actions, .mobile-thumb-dock, .mobile-surface { background: Canvas; color: CanvasText; }
  .mobile-tap-zone, .mobile-doorway-action { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
}

/* WP-095 mobile global context. */
.vault-context-breadcrumbs--mobile { margin-top: .2rem; color: var(--vault-color-text-muted); font-size: .72rem; line-height: 1.25; }
.vault-context-breadcrumbs--mobile ol { display: flex; flex-wrap: wrap; gap: .15rem .35rem; margin: 0; padding: 0; list-style: none; }
.vault-context-breadcrumbs--mobile li { display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.vault-context-breadcrumbs--mobile li:not(:last-child)::after { content: '›'; margin-left: .35rem; color: var(--vault-color-material-brass-350); }
.vault-context-breadcrumbs--mobile li:last-child { color: var(--vault-color-text-primary); font-weight: 800; }
@media (orientation: landscape), (max-height: 37.4375rem) { .vault-context-breadcrumbs--mobile { display: none; } }

/* WP-112 corrective: the map is a non-modal navigation companion. */
.mobile-surface-root[data-live-navigation="true"] {
  z-index: var(--vault-z-drawer);
  align-items: start;
  justify-items: start;
  padding-top: max(4.5rem, env(safe-area-inset-top));
  background: transparent;
  pointer-events: none;
  touch-action: auto;
}
.mobile-surface-root[data-live-navigation="true"] > .mobile-surface--map-sheet {
  width: min(100%, 42rem);
  height: auto;
  max-height: min(52dvh, 32rem);
  align-self: start;
  overflow: auto;
  pointer-events: auto;
  border: 1px solid var(--vault-color-border-accent);
  border-radius: 0 0 var(--vault-radius-large) 0;
  box-shadow: var(--vault-shadow-high);
}
.mobile-surface-root[data-live-navigation="true"] .mobile-map-sheet__canvas .vault-map__viewport,
.mobile-surface-root[data-live-navigation="true"] .mobile-map-sheet__canvas .vault-map__svg {
  min-block-size: min(16rem, 30dvh);
}
@media (orientation: landscape), (max-height: 29.9375rem) {
  .mobile-surface-root[data-live-navigation="true"] {
    align-items: start;
    padding-top: max(3.5rem, env(safe-area-inset-top));
  }
  .mobile-surface-root[data-live-navigation="true"] > .mobile-surface--map-sheet,
  .mobile-surface-root[data-live-navigation="true"] > .mobile-surface--full-overlay {
    width: min(58vw, 44rem);
    height: auto;
    max-height: calc(100dvh - 3.5rem);
    border-right: 1px solid var(--vault-color-border-accent);
    border-bottom: 1px solid var(--vault-color-border-accent);
    border-radius: 0 0 var(--vault-radius-large) 0;
  }
}