/* GENERATED FILE - DO NOT EDIT.
   Source: public/css/  |  Builder: scripts/build-public-compat.cjs
   Chrome 72 fallbacks applied (inset, clamp, min, max, dvh). flex `gap`
   and `aspect-ratio` are NOT repairable by this transform; the layout
   degrades gracefully (items touch / auto height) and the limitation is
   stated in docs/COMPAT_CHROME72.md, not silently claimed. */
/* =============================================================================
   MixFun Hub - Home display layout (structure policy revised 2026-10-28)
   =============================================================================
   The approved reference layout for #home-section is ONE structure on every
   landscape surface, from an 800x480 car/Pi panel to a 1920x1080 TV:

   +------------------+-----------------------------------------------+
   | RESTAURANT       |                                               |
   | Preparing | Ready|        MAIN PROGRAMME / ADVERTISEMENT         |
   |------------------|                PLAYER REGION                  |
   | LAUNDRY          |                                               |
   | Preparing | Ready|                                               |
   +------------------+-----------------------------------------------+
   | reStary Homestay | Available today: N | From RM X/night | contact |
   +---------------------------------------------------------------+

   BREAKPOINT POLICY (this is the fix)
   ------------------------------------
   The previous file used a single `@media (max-width: 900px)` rule that moved
   the media ABOVE the rail and put the two order panels side-by-side. An
   800x480 or 1024x600 landscape business screen therefore rendered the
   portrait-phone arrangement (reference photo 1). Structure is now decided by
   ORIENTATION / ASPECT RATIO, never by CSS width alone:

     aspect-ratio >= 5/4  →  LANDSCAPE: rail LEFT, media RIGHT, strip BOTTOM.
                            Applies at 800x480, 854x480, 1024x600 and above.
     aspect-ratio <  5/4  →  PORTRAIT: deliberate readable vertical stack
                            (media, then restaurant above laundry, then strip)
                            with normal page scrolling instead of clipping.

   Everything scales proportionally: ~26% business rail, clamp() typography,
   short-screen header/footer compaction, dvh viewport fit with a vh fallback,
   and min-width/min-height:0 plus explicit overflow containment so no panel
   can push the page sideways.

   - Slim top navigation stays visible (approved reference mode).
   - Static panels: no backdrop blur, no perpetual animation (1 GB profile).
   - Colour never carries meaning alone: every column has a text heading.

   Business colours are semantic tokens mapped to the verified reStaryHub
   source palette (D:\reStaryHub\src\styles\globals.css):
     restaurant #e07a5f · laundry #0ea5e9 (light variant #38bdf8)
     reStary green #00c39a
   Dark ink is used on the light blue / green surfaces for contrast.
   ============================================================================= */

:root {
  --biz-restaurant: #e07a5f;
  --biz-restaurant-tint: #f7e6df;
  --biz-restaurant-ink: #4a2118;
  --biz-laundry: #0ea5e9;
  --biz-laundry-tint: #dff1fb;
  --biz-laundry-ink: #0b3a55;
  --biz-homestay: #00c39a;
  --biz-homestay-ink: #04382c;
  --biz-panel-radius: 12px;
  --biz-gap: 10px;
  /* Real measured chrome heights (public/js/app.js → measureHomeChrome()).
     The fallbacks are only used before the first measurement. */
  --home-nav-h: 76px;
  --home-strip-h: 56px;
  --home-rail-w: 26%;
}

/* Custom properties accept unknown functions even on old browsers. A preceding
   variable declaration is therefore NOT a fallback for clamp(). Gate the modern
   token using a real property so Chrome 72 keeps a valid two-column grid. */
@supports (width: clamp(168px, 26%, 460px)) {
  :root { --home-rail-w: clamp(168px, 26%, 460px); }
}

/* ----- Section shell ------------------------------------------------------
   Home fills exactly the viewport under the real header, so the homestay
   strip is always on screen. vh first, dvh where supported (never the other
   way round: an unsupported parser drops the later declaration only). */

#home-section.home-tab-display {
  min-height: calc(100vh - var(--home-nav-h));
  min-height: calc(100dvh - var(--home-nav-h));
  overflow-x: hidden;
}

/* ----- Grid --------------------------------------------------------------- */

.home-display {
  display: grid;
  /* Landscape default: business rail LEFT, media takes every remaining pixel. */
  grid-template-columns: minmax(0, var(--home-rail-w)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--biz-gap);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 240px;

  min-height: clamp(240px, 46vh, 820px);
  min-width: 0;
}

.home-order-rail {
  display: flex;
  flex-direction: column;
  gap: var(--biz-gap);
  min-width: 0;
  min-height: 0;
}

.home-main {
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* The shared Home engine mounts here; keep it flush inside the grid cell. */
.home-main #signage-home-mount {
  position: absolute;
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
  min-height: 0;
  border-radius: var(--biz-panel-radius);
}
.home-main .signage-root,
.home-main .signage-waiting {
  height: 100%;
  min-height: 0;
}
.home-main .signage-waiting-full {
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
  position: relative;
  min-height: 100%;
}

/* ----- Business queue panels ---------------------------------------------- */

/* Older Android WebViews: avoid grid track/custom-property sizing entirely.
   Explicit flex widths keep the absolute video mount's containing block alive. */
@supports not (width: clamp(168px, 26%, 460px)) {
  @media (orientation: landscape) {
    .home-display { display: flex; flex-direction: row; }
    .home-order-rail { flex: 0 0 26%; width: 26%; margin-right: 10px; }
    .home-main { flex: 1 1 0%; width: 0; min-height: 240px; }
  }
}

.biz-panel {
  display: flex;
  flex-direction: column;
  border-radius: var(--biz-panel-radius);
  overflow: hidden;
  background: var(--biz-restaurant-tint);
  border: 1px solid rgba(0, 0, 0, 0.12);
  min-height: 0;
}
/* Two panels share the rail height; the second one never gets squeezed out. */
.home-order-rail .biz-panel { flex: 1 1 0; }
.biz-panel--restaurant { background: var(--biz-restaurant-tint); }
.biz-panel--restaurant .biz-panel-head { background: var(--biz-restaurant); }
.biz-panel--laundry { background: var(--biz-laundry-tint); }
.biz-panel--laundry .biz-panel-head { background: var(--biz-laundry); }

.biz-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  color: #fff;
}
/* Inline SVG icons (see index.html): the previous emoji glyphs rendered as
   tofu boxes on TV/Pi font stacks — visible in both reference photographs. */
.biz-panel-head .biz-panel-icon {
  flex: 0 0 auto;
  width: 15px;

  width: clamp(15px, 1.9vh, 22px);
  height: 15px;
  height: clamp(15px, 1.9vh, 22px);
}
.biz-panel-head h3 {
  margin: 0;
  font-size: 0.8rem;

  font-size: clamp(0.8rem, 1.5vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.biz-panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--biz-gap);
  padding: 0.5rem 0.7rem 0.6rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.biz-col { min-width: 0; }
.biz-col h4 {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;

  font-size: clamp(0.75rem, 1.3vw, 1.15rem);
  font-weight: 700;
  color: var(--biz-restaurant-ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  padding-bottom: 0.15rem;
}
.biz-panel--laundry .biz-col h4 { color: var(--biz-laundry-ink); }

.biz-tickets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.biz-ticket {
  font-size: 1.05rem;
  font-size: clamp(1.05rem, 2.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--biz-restaurant-ink);
  overflow-wrap: anywhere;
}
.biz-panel--laundry .biz-ticket { color: var(--biz-laundry-ink); }
/* Ready references read as boxed callouts; the column heading carries the
   meaning, so the box is reinforcement, not the only signal. */
.biz-col[data-col="ready"] .biz-ticket {
  display: inline-block;
  border: 3px solid currentColor;
  border-radius: 8px;
  padding: 0.05rem 0.45rem;
}
.biz-ticket--more {
  font-size: 0.85rem;
  font-size: clamp(0.85rem, 1.3vw, 1.15rem);
  font-weight: 700;
  opacity: 0.75;
  border: 0;
  padding: 0;
}

.biz-panel-status {
  margin: 0;
  padding: 0.35rem 0.7rem 0.5rem;
  font-size: 0.72rem;

  font-size: clamp(0.72rem, 1.1vw, 1rem);
  color: rgba(0, 0, 0, 0.62);
}

/* ----- Homestay strip (full width, bottom) -------------------------------- */

.homestay-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  gap: clamp(0.5rem, 2.4vw, 3rem);
  flex-wrap: wrap;
  flex: 0 0 auto;
  margin-top: var(--biz-gap);
  padding: 0.5rem clamp(0.7rem, 1.8vw, 1.6rem);
  border-radius: var(--biz-panel-radius);
  background: var(--biz-homestay);
  color: var(--biz-homestay-ink);
  min-width: 0;
}
.homestay-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.homestay-brand .homestay-icon {
  flex: 0 0 auto;
  width: 17px;

  width: clamp(17px, 2.4vh, 26px);
  height: 17px;
  height: clamp(17px, 2.4vh, 26px);
}
.homestay-brand strong {
  font-size: 0.9rem;
  font-size: clamp(0.9rem, 1.7vw, 1.7rem);
  font-weight: 800;
  display: block;
}
#homestay-availability {
  font-size: 0.78rem;
  font-size: clamp(0.78rem, 1.3vw, 1.25rem);
  font-weight: 600;
  display: block;
}
.homestay-price-block { min-width: 0; }
#homestay-price {
  font-size: 0.95rem;
  font-size: clamp(0.95rem, 1.9vw, 1.9rem);
  font-weight: 800;
}
#homestay-fees {
  font-size: 0.68rem;
  font-size: clamp(0.68rem, 1.05vw, 0.95rem);
  opacity: 0.85;
  margin: 0;
}
.homestay-contact {
  margin-left: auto;
  text-align: right;
  min-width: 0;
}
#homestay-tel {
  display: block;
  font-size: 0.95rem;

  font-size: clamp(0.95rem, 1.7vw, 1.7rem);
  font-weight: 800;
  color: var(--biz-homestay-ink);
  text-decoration: none;
}
#homestay-tel:focus-visible {
  outline: 3px solid var(--biz-homestay-ink);
  outline-offset: 2px;
}
#homestay-date {
  font-size: 0.68rem;
  font-size: clamp(0.68rem, 1.05vw, 0.95rem);
  opacity: 0.85;
}

/* ----- Small header clock + Home-only header controls ---------------------
   Approved reference: only a small digital clock in the header. The large
   analogue clock from the earlier inspiration photo is deliberately absent.
   home-header-controls is the compact language/account entry point that
   replaces the entertainment sidebar for a PERSONAL visitor on Home; it is
   hidden on every other tab and on a managed display (body.signage-mode). */

.nav-clock {
  margin-right: 24px;
  flex-shrink: 0;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;

  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  letter-spacing: 0.04em;
  padding: 0.15rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  white-space: nowrap;
}

.home-fullscreen-btn {
  min-height: 44px;
  padding: 6px 12px;
  margin-left: 12px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: #152732;
  color: #fff;
  cursor: pointer;
  font: inherit;
}
.home-fullscreen-btn:focus { outline: 3px solid #ffd54f; outline-offset: 2px; }
body:not(.tab-home) .home-fullscreen-btn { display: none; }

.home-header-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-width: 0;
}
.home-header-controls .home-lang-compact {
  display: flex;
  gap: 2px;
}
.home-header-controls .lang-btn {
  min-width: 34px;
  min-height: 30px;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;

  font-size: clamp(0.65rem, 1vw, 0.8rem);
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
}
.home-header-controls .lang-btn.active {
  background: var(--primary-color, #00f3ff);
  color: #04121a;
  border-color: transparent;
}
.home-account-btn {
  min-height: 30px;
  padding: 0.15rem 0.6rem;
  font-size: 0.65rem;

  font-size: clamp(0.65rem, 1vw, 0.8rem);
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.home-account-btn[hidden] { display: none; }

/* Only the Home tab shows these controls; every other tab keeps its own
   sidebar copy, so no functionality is removed from Music/Movie/Games/Live.
   A managed display (body.signage-mode, set by signage-bootstrap while a
   publication is live or kiosk) never exposes personal entry points. */
body:not(.tab-home) .home-header-controls { display: none; }
body.signage-mode .home-header-controls { display: none; }

/* The feed toggles panels with the `hidden` property; a class-level
   display:flex would otherwise beat the UA [hidden] rule and paint an empty
   panel/strip. Keep every dynamically hidden element truly hidden. */
.biz-panel[hidden],
.biz-panel-status[hidden],
.homestay-strip[hidden],
#homestay-tel[hidden],
#homestay-fees[hidden],
.home-account-btn[hidden] {
  display: none !important;
}

/* ----- Home presentation chrome ------------------------------------------
   The managed business display must not carry personal playback UI. These
   rules are scoped to body.tab-home, so Music/Movie controls are untouched. */

body.tab-home #mini-player,
body.tab-home #mini-player-sheet,
body.tab-home #left-sidebar,
body.tab-home #fab-quick-mix {
  display: none !important;
}

/* Home owns the full width once the sidebar is gone. */
body.tab-home #main-content {
  padding-left: env(safe-area-inset-left, 0px);
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
  padding-right: env(safe-area-inset-right, 0px);
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
}

/* Short landscape panels (800x480 / 854x480 / 1024x600, browser zoom): the
   auto-detected Android-Car/car-mode profile inflates root chrome by 20–50%
   for touch-in-the-car use. That is correct on Games/Movie, and it is what
   crushed the Home media region in reference photo 1 — so Home keeps its own
   1rem base while the rest of the app keeps the car profile. */
body.car-mode #home-section,
body.device-android-car #home-section {
  font-size: 1rem;
}
body.car-mode #home-section .biz-panel-status,
body.device-android-car #home-section .biz-panel-status {
  line-height: 1.3;
}
@media (orientation: landscape) and (max-height: 620px) {
  #main-nav {
    padding-top: env(safe-area-inset-top, 0px);
    padding-top: max(0.25rem, env(safe-area-inset-top, 0px));
    padding-bottom: 0.25rem;
  }
  .nav-tab {
    padding: 0.25rem 0.55rem;
    font-size: 0.7rem;

    font-size: clamp(0.7rem, 1.6vh, 1rem);
    min-height: 34px;
  }
  .nav-brand h2 { font-size: clamp(0.9rem, 2.2vh, 1.4rem); }
  .nav-clock { font-size: clamp(0.8rem, 1.8vh, 1.1rem); }
  :root { --biz-panel-radius: 10px; }
  .home-header-controls .lang-btn,
  .home-account-btn { min-height: 28px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .biz-panel-head { padding: 0.25rem 0.55rem; }
  .biz-panel-body { padding: 0.35rem 0.55rem 0.45rem; }
  .biz-panel-status { padding: 0.25rem 0.55rem 0.35rem; }
  .homestay-strip { padding: 0.35rem 0.7rem; }
  :root { --biz-gap: 7px; }
}

/* ----- Portrait adaptation (deliberate, not the old accidental fallback) --
   Media first and prominent, then restaurant ABOVE laundry, then the strip.
   The page scrolls normally instead of clipping orders or the footer. */

@supports not (min-height: 100dvh) {
  .home-order-rail { max-height: 55vh; overflow-y: auto; }
}

@media (orientation: portrait), (aspect-ratio: 4 / 5) {
  .home-display {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 0;
  }
  /* Media FIRST (row 1), business rail SECOND (row 2): the same information
     hierarchy as landscape, read top-to-bottom. DOM order is rail-then-media,
     so grid placement — not source order — carries the visual priority. */
  .home-main { grid-row: 1; }
  .home-order-rail { grid-row: 2; }
  .home-main {
    /* Width is the master on portrait: the region spans the column and the
       16:9 box derives its height from it. Without an explicit width a
       max-height clamp can feed back through aspect-ratio and inflate the
       box wider than the column (verified at 360x800, 2026-10-28). */
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 150px;
    max-height: 46vh;
  }
  /* Panels stay stacked (restaurant first) and each keeps its own height
     instead of collapsing into a 14px sliver. */
  .home-order-rail { flex: 0 0 auto; }
  .home-order-rail .biz-panel { flex: 0 0 auto; }
  .biz-panel-body { overflow-y: visible; }
  .homestay-strip { gap: 0.5rem 1.25rem; }
  .homestay-contact { margin-left: 0; text-align: left; }
}

/* Very narrow portrait: stack the two order columns as well, so a 360px phone
   reads ticket numbers instead of ellipsizing them. */
@media (orientation: portrait) and (max-width: 560px) {
  .biz-panel-body { grid-template-columns: minmax(0, 1fr); }
}

/* Restaurant stays ABOVE laundry on EVERY portrait surface, including tablets
     (requirement §3: "restaurant above laundry in the business area"). The
     earlier side-by-side tablet-portrait override was removed because placing
     them beside each other is not "above". With media in row 1 and the rail in
     row 2, the stacked panels simply continue down the scrolling page. */

/* ----- Overscan-safe area for TV boxes ------------------------------------ */

@media (min-width: 1280px) {
  #home-section.home-tab-display {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ----- High contrast / reduced motion --------------------------------------
   The layout is static by design; these rules keep it readable everywhere. */

@media (prefers-contrast: more) {
  .biz-panel { border: 2px solid currentColor; }
  .biz-ticket { font-weight: 900; }
}

@media (prefers-reduced-motion: reduce) {
  .home-display *,
  .homestay-strip { animation: none !important; transition: none !important; }
}