/* =========================================================================
   Intelligent Hotels page (hotels.html) · page-only rules.
   Loaded after home.css and built only from its tokens: no new colours,
   sizes, radii or timings. Shared components stay in home.css.
   ========================================================================= */

/* Viewer: the hotel each real screen comes from, named under the screen tabs.
   CSS only: the name follows the selected tab (home.js owns the tabs). */
.vw-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--ink); }
.vw-from__k { font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); }
.vw-from__n { display: none; }
.viewer:has(#vwScreens [data-screen="09"][aria-selected="true"]) .vw-from__n[data-for="09"],
.viewer:has(#vwScreens [data-screen="08"][aria-selected="true"]) .vw-from__n[data-for="08"],
.viewer:has(#vwScreens [data-screen="11"][aria-selected="true"]) .vw-from__n[data-for="11"],
.viewer:has(#vwScreens [data-screen="spa"][aria-selected="true"]) .vw-from__n[data-for="spa"] { display: inline; }

/* Screens that are not 16:9 (the spa plan) show whole inside the same 16:9 frame, on the app's dark surface.
   Their hotspot regions are measured on the letterboxed frame. */
.viewer__frame > img.fit, .day__screen > img.fit { object-fit: contain; background: var(--navy-900); }