/* The scene's parent stays #wagon-viewport in every home/study state. */
#view-wagon-home { max-width: 1480px; margin: 0 auto; padding: calc(var(--top-bar-h) + 22px) 28px 28px; }
.hth-home-active .main-content { width: 100%; padding-bottom: 0; }
.wagon-base-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 12px 16px; }
.wagon-base-heading p, .wagon-base-sheet-header p { color: #c29a5f; text-transform: uppercase; font: 14px/1.4 'VT323', monospace; letter-spacing: .17em; margin: 0; }
.wagon-base-heading h1 { margin: 0; color: #eed7a1; font: 30px/1.2 'IM Fell English', Georgia, serif; }
#wagon-base-time { text-transform: capitalize; color: #bba17c; font: 18px 'VT323', monospace; }
#wagon-base-scene { border: 3px solid #62452b; box-shadow: 0 5px 0 #19100c; background: #0d0d10; overflow: hidden; border-radius: 6px 6px 0 0; }
#view-wagon-home #wagon-viewport { position: relative; inset: auto; z-index: 0; padding: 0; width: 100%; height: auto; display: block; overflow: hidden; }
#view-wagon-home #wagon-viewport::before { display: none; }
#view-wagon-home #wagon-scene-host { width: 100%; height: auto; aspect-ratio: 593 / 187; }
#view-wagon-home #wagon-scene-host .widget-wrapper { height: auto; }
#view-wagon-home #wagon-scene-host .widget-footer { display: none; }
#wagon-base-table { position: relative; margin-top: -3px; }
#wagon-base-status { min-height: 20px; margin: 8px; color: #cbb086; text-align: center; font: 14px Georgia, serif; }
/* Reading keeps the original book geometry, with the same scene still mounted.
   The shell spans the viewport so outside bookmarks stay inside its clip. */
.hth-book-active .main-content { width:100%; }
.hth-book-active > #wagon-viewport { visibility: hidden; pointer-events: none; }
.wagon-base-sheet { color: #eee0ba; width: min(1500px, calc(100vw - 40px)); max-height: calc(100dvh - 52px); margin: auto; padding: 0; background: transparent; border: 0; overflow: auto; overscroll-behavior: contain; }
.wagon-base-sheet::backdrop { background: rgba(9,8,5,.8); backdrop-filter: blur(3px); }
.wagon-base-sheet-content { min-width: 0; background: #2b2117; border: 3px solid #93673a; box-shadow: inset 0 0 0 4px #17110d; padding: 4px; }
.wagon-base-sheet[data-lighting="night"] .wagon-base-sheet-content,
.wagon-base-sheet[data-lighting="aurora"] .wagon-base-sheet-content,
.wagon-base-sheet[data-lighting="fullmoon"] .wagon-base-sheet-content { background: #211b15; }
.wagon-base-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 8px 22px; }
.wagon-base-sheet-header h2 { font: 32px 'IM Fell English', Georgia, serif; color: #edcf94; margin: 2px 0; }
.wagon-base-sheet-header button { min-width: 44px; min-height: 44px; }
.wagon-base-sheet-footer { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin: 20px 8px 8px; }
.wagon-base-sheet button:focus-visible { outline: 3px solid #ffe099; outline-offset: 3px; }
@media (max-width: 860px) {
  #view-wagon-home { padding: calc(var(--top-bar-h) + 12px) 10px 18px; }
  .wagon-base-heading h1 { font-size: 25px; }
  .wagon-base-sheet { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
}
/* Keep camp and worktable together on the first desktop screen. Their
   original aspect ratios set their heights; fit the shared width rather than
   cropping either surface or stretching the book and props. 0.688 is the sum
   of the scene (187/593) and tabletop (765/2056) height-to-width ratios.
   Short windows still scroll; narrow screens retain their compact actions. */
@media (min-width: 861px) {
  #view-wagon-home {
    --hwh-banner-h: 0px;
    width: 100%;
    max-width: clamp(760px, calc((100svh - var(--top-bar-h) - var(--hwh-banner-h) - 132px) / .688 + 40px), 1280px);
    padding: calc(var(--top-bar-h) + 12px) 20px 16px;
  }
  body.env-local #view-wagon-home { --hwh-banner-h: var(--env-banner-h, 32px); }
  .wagon-base-heading { margin: 0 8px 10px; }
  #view-wagon-home .hwh { min-height: 0; }
}
/* Header layout is owned by top-bar.css in every app view. */
#wagon-home-btn[aria-current="page"], #clinic-btn[aria-current="page"] { border-color:#b78942; background:rgba(125,91,40,.25); color:#efcf94; }
