/* Sizes use dvh (the visible height): plain vh includes the browser's address and button bars on phones and
   tablets, which pushed the bottom row off screen. */
/* Kruze Digital passenger screen (DEMO). Zones follow KAN-405: Z1 brand bar, Z2 main display, Z3/Z4 featured,
   Z5 category panel, Z6 tile grid. Large touch targets, restrained motion, readable at arm's length. */
:root {
  --bg: #030c18;
  --panel: #0b1f35;
  --panel-2: #0f2a46;
  --edge: rgba(63, 208, 232, 0.38);
  --accent: #3fd0e8;
  --text: #f2f7fb;
  --muted: #a9bccd;
  --radius: 14px;
  --gap: 1.4dvh;
  --sans: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--sans);
  -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.screen {
  height: 100dvh; width: 100vw; padding: 1.6dvh 1.8vw; display: grid; gap: var(--gap);
  grid-template-rows: 7dvh minmax(0, 1fr) minmax(0, 0.62fr);
  background: radial-gradient(120% 90% at 50% 0%, #0d2846 0%, var(--bg) 70%);
}

/* Z1 brand bar */
.z1 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.home-btn { justify-self: start; display: inline-flex; align-items: center; gap: .6vw; min-height: 6dvh; padding: 0 1.4vw;
  border: 1px solid var(--edge); border-radius: 999px; font-size: 2.1dvh; font-weight: 600; color: var(--text); background: var(--panel); }
.home-btn svg { width: 2.6dvh; height: 2.6dvh; }
.brand { display: flex; align-items: center; gap: .8vw; }
.brand svg { height: 5dvh; width: 5dvh; }
.brand-mark { color: var(--accent); }
/* A Customer's own logo replaces the built-in mark (KAN-454). */
.brand img { height: 5.6dvh; max-width: 14vw; object-fit: contain; display: block; }
.brand.has-logo .brand-mark { display: none; }
.brand-name { font-size: 2.6dvh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.brand-tag { font-size: 1.35dvh; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.status { justify-self: end; display: flex; align-items: center; gap: 1vw; font-size: 1.8dvh; color: var(--muted); }
.status .dot { width: 1.1dvh; height: 1.1dvh; border-radius: 50%; background: #3ddc84; display: inline-block; margin-right: .4vw; }
.status.offline .dot { background: #f2a65a; }
.demo-btn { border: 1px dashed #f2a65a; color: #f2a65a; border-radius: 8px; padding: .6dvh .8vw; font-size: 1.6dvh; }

/* Shared card look */
.card { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--edge); background: var(--panel); }
.card .art, .card .art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge { display: inline-block; white-space: nowrap; align-self: flex-start; font-size: 1.6dvh; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .5dvh .8vw; border-radius: 6px; background: rgba(3, 12, 24, .72); border: 1px solid var(--edge); color: var(--accent); }

/* Top row: Z2 + Z3/Z4 */
.top { display: grid; grid-template-columns: 1.62fr 1fr; gap: var(--gap); min-height: 0; }
.side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap); min-height: 0; }

/* Z2 main display */
.z2 { min-height: 0; }
.z2 .slide { position: absolute; inset: 0; transition: opacity .6s ease; }
.z2 .slide.out { opacity: 0; }
.caption { position: absolute; left: 1.2vw; right: 1.2vw; bottom: 1.6dvh; display: flex; gap: 1vw; align-items: center;
  padding: 1.4dvh 1.2vw; border-radius: 12px; background: rgba(3, 12, 24, .72); backdrop-filter: blur(6px); }
.caption .title { font-size: 2.9dvh; font-weight: 800; }
.caption .text { font-size: 2.2dvh; color: #dce7f0; }
.caption .chip { margin-left: auto; white-space: nowrap; font-size: 1.8dvh; font-weight: 700; color: var(--bg); background: var(--accent); padding: .8dvh 1vw; border-radius: 999px; }

/* Z2 detail view (after a tap) */
.detail { position: absolute; inset: 0; display: grid; grid-template-columns: 1.35fr 1fr; background: var(--panel); }
.detail .info { position: relative; padding: 2.4dvh 1.8vw 2.4dvh 1.8vw; display: flex; flex-direction: column; gap: 1.2dvh; overflow: hidden; }
.detail .info .bgart { position: absolute; inset: 0; opacity: .22; }
.detail .info .bgart svg { width: 100%; height: 100%; }
.detail .info > *:not(.bgart) { position: relative; }
.back-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: .5vw; min-height: 6dvh; padding: 0 1.4vw;
  border-radius: 999px; background: var(--accent); color: var(--bg); font-weight: 800; font-size: 2.1dvh; }
.back-btn svg { width: 2.4dvh; height: 2.4dvh; }
.detail .name { font-size: 2.2dvh; color: var(--accent); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.detail .offer { font-size: 3.6dvh; font-weight: 800; line-height: 1.15; }
.detail .desc { font-size: 2.2dvh; color: #dce7f0; line-height: 1.35; }
.detail .facts { margin-top: auto; display: grid; gap: .8dvh; font-size: 2dvh; color: var(--muted); }
.detail .facts b { color: var(--text); font-weight: 600; }
.qr-panel { background: #ffffff; color: #0b1f35; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2dvh; padding: 2dvh 1.5vw; text-align: center; }
.qr-panel .qr { width: min(30dvh, 90%); aspect-ratio: 1; }
.qr-panel .qr svg { width: 100%; height: 100%; display: block; }
.qr-panel .scan { font-size: 2.6dvh; font-weight: 800; }
.qr-panel .hint { font-size: 1.7dvh; color: #415466; }
.qr-panel .code { font-size: 1.9dvh; font-weight: 700; letter-spacing: .08em; }

/* Z3 / Z4 featured */
.feature { cursor: pointer; }
.feature .art { transition: opacity .6s ease; }
.feature .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 1.6dvh 1.2vw;
  background: linear-gradient(180deg, rgba(3,12,24,.15) 30%, rgba(3,12,24,.78) 100%); }
.feature .headline { font-size: 2.9dvh; font-weight: 800; line-height: 1.12; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.feature .headline em { font-style: normal; color: var(--accent); }

/* Bottom row: Z5 + Z6 */
.bottom { display: grid; grid-template-columns: 0.82fr 5fr; gap: var(--gap); min-height: 0; }
.z5 { display: flex; flex-direction: column; gap: .8dvh; padding: 1dvh .5vw; background: var(--panel-2); min-height: 0; }
.z5 .tab { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: .7vw; padding: 0 .7vw; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: background .3s ease, color .3s ease; }
.z5 .tab .icon { flex: none; width: 4.4dvh; height: 4.4dvh; }
.z5 .tab .icon svg { width: 100%; height: 100%; display: block; }
.z5 .tab .cat-name { min-width: 0; font-size: 1.5dvh; font-weight: 800; text-transform: uppercase; line-height: 1.15; letter-spacing: .01em; }
.z5 .tab.on { background: rgba(63,208,232,.14); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.z5 .tab.on .icon { filter: drop-shadow(0 0 8px rgba(63,208,232,.55)); }

.z6 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--gap); transition: opacity .45s ease; min-height: 0; }
.z6.fade { opacity: 0; }
.tile { display: grid; grid-template-rows: 1fr auto; border-radius: 12px; overflow: hidden; border: 1px solid var(--edge); background: var(--panel); min-height: 0; }
.tile.empty { visibility: hidden; }
.tile.house { border-style: dashed; background: transparent; }
.tile.house .logo { flex-direction: column; gap: .6dvh; color: var(--accent); }
.tile.house .house-brand { font-size: 1.5dvh; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.tile.house .house-line { font-size: 2dvh; font-weight: 800; line-height: 1.15; color: #f2f7fb; max-width: 12em; }
.tile.house .label { background: rgba(63, 208, 232, .15); color: var(--accent); }
.tile .logo { display: flex; align-items: center; justify-content: center; text-align: center; padding: .6dvh .5vw; font-size: 2.1dvh; line-height: 1.05; font-weight: 800; letter-spacing: .02em; min-height: 0; }
.tile .label { background: #d7e3ec; color: #12293f; font-size: 1.85dvh; font-weight: 600; padding: .55dvh .3vw; text-align: center; }
.tile:active { transform: scale(.97); }
.f-serif { font-family: Georgia, 'Times New Roman', serif; letter-spacing: .06em; font-weight: 700; }
.f-sans { font-family: var(--sans); letter-spacing: .1em; }
.f-display { font-family: 'Arial Black', Impact, var(--sans); text-transform: uppercase; }
.f-script { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-weight: 400; font-size: 2.6dvh !important; }
.f-round { font-family: 'Trebuchet MS', var(--sans); }
.f-kruze { font-family: var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* Demo panel: only with ?demo=1, never on passenger tablets */
.demo-panel { position: fixed; right: 1vw; bottom: 1dvh; width: min(460px, 42vw); max-height: 70dvh; overflow: auto; z-index: 50;
  background: #fffaf2; color: #1c2a36; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5); padding: 14px; font-size: 13px; -webkit-user-select: text; user-select: text; }
.demo-panel h3 { margin: 0 0 6px; font-size: 14px; }
.demo-panel .row { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.demo-panel select, .demo-panel button { font-size: 13px; padding: 4px 8px; border: 1px solid #c9b79c; border-radius: 6px; background: #fff; color: #1c2a36; }
.demo-panel .log { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; border-top: 1px solid #eadfcd; margin-top: 8px; padding-top: 6px; }
.demo-panel .log div { padding: 2px 0; border-bottom: 1px dotted #eadfcd; }
.demo-panel .note { color: #6b5b45; font-size: 12px; }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Optional portrait layout */
@media (orientation: portrait) {
  .screen { grid-template-rows: 6dvh minmax(0, 1.2fr) minmax(0, 1fr); }
  .top { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr; }
  .side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .bottom { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .z5 { flex-direction: row; padding: 1dvh 1vw; }
  .z5 .tab { flex-direction: column; justify-content: center; gap: .5dvh; padding: .6dvh .4vw; text-align: center; }
  .z5 .tab.on { box-shadow: inset 0 -3px 0 var(--accent); }
  .z5 .tab .cat-name { font-size: 1.5dvh; }
  .feature .headline { font-size: 2.2dvh; }
  .detail { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .qr-panel .qr { width: min(22dvh, 60%); }
  /* Narrow columns: scale tile text by width too, so names aren't clipped. */
  .tile .logo { font-size: min(2.1dvh, 2.7vw); padding: .6dvh 1vw; overflow-wrap: anywhere; }
  .tile .label { font-size: min(1.85dvh, 2.6vw); }
  .tile.house .house-brand { display: none; }
  .tile.house .house-line { font-size: min(1.8dvh, 2.4vw); }
  .f-script { font-size: min(2.6dvh, 3.2vw) !important; }
}

/* Pairing screen (platform.js): shown once, when an installer pairs the tablet with the signage platform. */
.pairing { min-height: 100dvh; display: grid; place-content: center; gap: 2dvh; padding: 6vw; text-align: center; color: #e8f6fb; font-family: system-ui, sans-serif; }
.pairing h1 { font-size: clamp(28px, 4vw, 48px); margin: 0; }
.pairing p { font-size: clamp(16px, 2vw, 22px); margin: 0; opacity: .85; max-width: 40ch; }
.pairing form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Wide enough for the whole code (XXXX-XXXX) on a phone too: 9 characters + spacing + padding. */
.pairing input { font: 600 clamp(24px, 6vw, 40px) ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; width: 13ch; max-width: 100%; flex: 0 0 auto; text-align: center; padding: 10px 12px; border-radius: 10px; border: 2px solid #3fd0e8; background: #0b1f35; color: #fff; }
.pairing button { font-size: clamp(18px, 2.5vw, 28px); padding: 10px 24px; border-radius: 10px; border: 0; background: #3fd0e8; color: #030c18; font-weight: 700; }
.pairing .pair-msg { min-height: 1.5em; }
.pairing input { -webkit-user-select: text; user-select: text; }

/* Pictures and videos from the media library (KAN-434); .media-fallback is the built-in art if a file fails. */
.media, .media-fallback, .media-fallback svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .logo.has-media { position: relative; padding: 0; overflow: hidden; background: #0b1f35; }

/* Photo-first customer showcase: quiet chrome, legible type and a single clear QR action. */
.media { width:100%; height:100%; object-fit:cover; }
.logo.has-media { position:relative; padding:0; overflow:hidden; }
.logo.has-media .media { position:absolute; top:0; right:0; bottom:0; left:0; inset:0; }
.distance-chip { display:inline-block; align-self:flex-start; border-radius:999px; padding:.5dvh .7vw; background:#fff; color:#0b1f35; font-size:1.7dvh; font-weight:700; }
.logo .distance-chip { position:absolute; bottom:.6dvh; left:.5vw; font-size:1.4dvh; }
.caption { background:linear-gradient(0deg,rgba(3,12,24,.92),rgba(3,12,24,.68)); }
.caption .title { font-size:3.7dvh; letter-spacing:-.025em; line-height:1.1; }
.caption .text { margin-top:.6dvh; }
.own-qr { flex-shrink:0; margin-left:auto; display:flex; flex-direction:column; align-items:center; gap:.4dvh; color:#fff; font-size:1.4dvh; }
.own-qr svg { width:10dvh; height:10dvh; border:.7dvh solid #fff; border-radius:8px; }
.feature .own-qr { position:absolute; top:1.2dvh; right:1vw; }
.feature .own-qr svg { width:8dvh; height:8dvh; }
.feature .headline { max-width:90%; }
.customer-showcase { display:flex; width:100%; height:100%; align-items:center; padding:2.5dvh 2.5vw; border:1px solid var(--edge); border-radius:var(--radius); background:var(--panel); }
.customer-showcase h2 { margin:1dvh 0; font-size:4.4dvh; letter-spacing:-.025em; }
.customer-showcase p { margin:.7dvh 0; font-size:2.5dvh; color:var(--muted); max-width:60vw; }
.customer-showcase .own-qr svg { width:18dvh; height:18dvh; }
.bottom.showcase-only { grid-template-columns:1fr; }
.bottom.showcase-only > .z5 { display:none; }
.bottom.showcase-only > .z6 { display:flex; }
.tile.house { border-style:solid; }
.tile:disabled { cursor:default; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }