/* ═══════════════════════════════════════════════════════════════════════════
   Zawaya room screen — ONE LANGUAGE for every screen
   ═══════════════════════════════════════════════════════════════════════════
   Home set the grammar (rs-home-approved.css). This sheet states it once and
   holds every screen the index reaches to it: the food, room services and
   their requests, the guide (Riyadh, the hotel, its policies), the details,
   the channels, and the voice when it docks under them.

   • ONE MARGIN. 48u at the sides, 27u top and bottom; every band starts there.
   • ONE MASTHEAD. Home's own: a layer over home keeps home's ground (the
     atmosphere) and lets home's masthead through. Only the Wi-Fi chip steps
     out: it is home's action, and a chip the remote cannot reach is not shown.
   • ONE GRID. masthead 33–63u · a screen's title from 84u · the horizon at
     187u · the first row or the state at 201u · the lower horizon at 463u ·
     the hints, apps or band below it.
   • ONE TYPE SCALE (u = 1 dp of the 960 × 540 canvas). A role has one size and
     one weight on every screen, and every weight declared is one the bundled
     face has — Tajawal 400/500/700, Cairo 400/600/700/900, DM Sans 300–700 —
     so what is declared is what renders:
        display  48u   Cairo 400, emphasis 900   (English DM Sans 300 / 700)
        title    22u   700
        item     17u   700        a destination, a pane, a category, a row
        body     15u   400        a note, a description, a policy, a stage
        action   14.5u 700        the label of a framed action
        meta     12u   500        counts, times, hints, apps, the chip
        caption  11.5u 700        a section's name
     (the masthead keeps its own two: 12.5u, and the clock's 19u DM Sans 300).
     Digits are Latin on every screen, and they are DM Sans in both languages.
   • ONE SEPARATION GRAMMAR. Hairlines and space. No card, no panel with a
     border and a radius standing in for structure. Over a moving picture a
     band takes a matte ground (legibility needs one); it is full-bleed, square,
     and edged by a hairline, never a box.
   • TWO FOCUS SHAPES. A thing with a frame (the talk pill, a framed button,
     the chip) takes the ring: 3u mint, 3u off its frame. A thing without one
     (a destination, a pane, a category, a row, a channel) takes the 3u mint
     bar — on the horizon for a row of them, down the start side for a column.
     Selection, where a list has it, is a 1u cream rule where the bar would be.
   • ONE STATE BLOCK. Loading, empty and failed sit where the first row would
     be (201u, at the row text's inset): an icon, a line, a reason, an action.
   • COLOUR. Mint is what can be pressed (frames, focus, the arrow on the
     chip). Cream is what is read, at three strengths. Amber is a request in
     progress, and nothing else. A failure keeps the critical sign beside its
     words (the text stays cream).
   ═══════════════════════════════════════════════════════════════════════════ */

.rs {
    --rl-x: max(calc(48 * var(--u)), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --rl-y: max(calc(27 * var(--u)), env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
    --rl-head: calc(84 * var(--u));                 /* a screen's title */
    --rl-horizon-gap: calc(14 * var(--u));          /* the horizon to the first row */
    --rl-inset: calc(14 * var(--u));                /* a column's text sits this far in from its bar */
    --rl-bar: calc(3 * var(--u));
    --rl-band: calc(27 * var(--u) + 92 * var(--u)); /* a band along the bottom: the channel's, the docked voice's */

    --rl-cream: var(--zv-cream);
    --rl-soft: color-mix(in srgb, var(--zv-cream) 86%, var(--zv-navy));
    --rl-quiet: color-mix(in srgb, var(--zv-cream) 74%, var(--zv-navy));
    --rl-dim: color-mix(in srgb, var(--zv-cream) 62%, var(--zv-navy));
    --rl-line: var(--rs-line);
    --rl-ground: color-mix(in srgb, var(--zv-navy) 92%, transparent);

    --rl-t-display: calc(48 * var(--u));
    --rl-t-title: calc(22 * var(--u));
    --rl-t-item: calc(17 * var(--u));
    --rl-t-body: calc(15 * var(--u));
    --rl-t-action: calc(14.5 * var(--u));
    --rl-t-meta: calc(12 * var(--u));
    --rl-t-caption: calc(11.5 * var(--u));
    --rl-lh-body: 1.6;
}
/* Arabic body text carries marks above and below the line: it gets the pitch they need (measured, see the report). */
.rs:lang(ar) { --rl-lh-body: 1.85; }
/* Latin letters and digits inside Arabic: DM Sans, the face of the clock and the counts. Tajawal has neither. */

/* ═══════════════════════════════════════════════════════════════════════
   One masthead: a layer over home shows home's
   ═══════════════════════════════════════════════════════════════════════ */
.rs:has(> .rs-surface:not([hidden])) .rs-home > :not(.ra-top),
.rs:has(> .rs-tv:not([hidden])) .rs-home > :not(.ra-top),
.rs:has(> .rs-surface:not([hidden])) .rs-home .ra-wifi,
.rs:has(> .rs-tv:not([hidden])) .rs-home .ra-wifi { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   The roles
   ═══════════════════════════════════════════════════════════════════════ */
.rl-display, .rs .rs-sf-title, .rs .rs-detail-title, .rs .rs-tv-title {
    font-family: 'Cairo', var(--rs-face-ui); font-size: var(--rl-t-display); font-weight: 400; line-height: 1.12;
    color: var(--rl-cream); letter-spacing: 0;
}
.rs:lang(en) :is(.rl-display, .rs-sf-title, .rs-detail-title, .rs-tv-title) { font-family: 'DM Sans', var(--rs-face-ui); font-weight: 300; letter-spacing: -.02em; }
.rl-caption, .rs .rs-detail-eyebrow, .rs .rs-tv-list-t, .rs .rs-options-title, .rs .rs-dl-k {
    font-size: var(--rl-t-caption); font-weight: 700; line-height: 1.6; color: var(--rl-quiet); letter-spacing: 0;
}
.rs:lang(en) :is(.rl-caption, .rs-detail-eyebrow, .rs-tv-list-t, .rs-options-title, .rs-dl-k) { letter-spacing: .06em; }

/* ═══════════════════════════════════════════════════════════════════════
   The two focus shapes
   ═══════════════════════════════════════════════════════════════════════ */
/* The ring: framed things. Their frame drops away and the ground deepens, so the ring reads as the edge. */
.rs :is(.rs-sf-talk, .rs-tv-talk, .rs-ask, .rl-button):focus,
.rs :is(.rs-surface, .rs-tv) .rs-btn:focus,
.rs .rs-switch:focus {
    outline: var(--rs-focus) solid var(--zv-mint); outline-offset: calc(3 * var(--u));
    border-color: transparent; background: color-mix(in srgb, var(--zv-emerald) 24%, var(--zv-navy)); color: var(--zv-mist);
}
/* The bar: everything without a frame. No outline, no ground, no box. A row that can be ordered sits one level
   deeper, beside its «أضف» (`.rs-orow`, rs-basket.css); it is still a row, and «أضف» keeps the ring. */
.rs :is(.rs-tab, .rs-rail-item, .rs-tv-row, .rs-sf-grid > [data-focus="1"], .rs-orow > [data-card]):focus,
.rs :is(.rs-tab, .rs-rail-item, .rs-tv-row, .rs-sf-grid > [data-focus="1"], .rs-orow > [data-card]):focus-visible { outline: none; background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════
   Framed actions: the talk pill (home's), and the framed button (home's Back)
   ═══════════════════════════════════════════════════════════════════════ */
.rs :is(.rs-sf-talk, .rs-tv-talk, .rs-ask) {
    display: inline-flex; align-items: center; gap: calc(10 * var(--u)); box-sizing: border-box; flex: none;
    height: calc(38 * var(--u)); min-height: 0; padding: 0 calc(12 * var(--u)) 0 calc(10 * var(--u)); padding-inline: calc(10 * var(--u)) calc(12 * var(--u));
    border: calc(1 * var(--u)) solid var(--rs-mint-edge); border-radius: calc(11 * var(--u));
    background: var(--rs-mint-wash); color: var(--zv-mist);
    font-size: var(--rl-t-action); font-weight: 700; line-height: 1; white-space: nowrap;
    outline: var(--rs-focus) solid transparent; outline-offset: calc(3 * var(--u));
}
.rs :is(.rs-sf-talk-glyph, .rs-ask-glyph) { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; }
.rs :is(.rs-surface, .rs-tv) .rs-btn:not(.rs-ask), .rs .rs-switch, .rl-button {
    display: inline-flex; align-items: center; gap: calc(8 * var(--u)); box-sizing: border-box; flex: none;
    min-height: calc(32 * var(--u)); height: auto; padding: 0 calc(18 * var(--u));
    border: calc(1 * var(--u)) solid var(--rs-mint-edge); border-radius: calc(9 * var(--u));
    background: transparent; color: var(--zv-mist);
    font-size: var(--rl-t-action); font-weight: 700; line-height: 1; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   The state block: loading, empty, failed — one shape, one place
   ═══════════════════════════════════════════════════════════════════════ */
.rs :is(.rs-sf-state, .rs-tv-state) {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(12 * var(--u)); row-gap: calc(4 * var(--u));
    justify-items: start; align-items: center; align-content: start; text-align: start;
    padding: calc(10 * var(--u)) 0 0; padding-inline-start: var(--rl-inset);
    font-family: var(--rs-face-ui); color: var(--rl-cream);
}
.rs :is(.rs-sf-state, .rs-tv-state) > * { grid-column: 2; margin: 0; max-width: calc(560 * var(--u)); }
.rs :is(.rl-state-icon, .rs-tv-state-icon) { grid-column: 1; grid-row: 1; display: grid; place-items: center; color: var(--rl-quiet); }
.rs :is(.rl-state-icon, .rs-tv-state-icon) .rs-icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.rs [data-tone="risk"] > :is(.rl-state-icon, .rs-tv-state-icon) { color: var(--zv-critical); }
.rs :is(.rl-state-t, .rs-tv-state-t) { font-size: var(--rl-t-item); font-weight: 700; line-height: 1.5; color: var(--rl-cream); }
.rs :is(.rl-state-l, .rs-tv-state-l) { font-family: var(--rs-face-read); font-size: var(--rl-t-body); font-weight: 400; line-height: var(--rl-lh-body); color: var(--rl-soft); }
.rs .rs-tv-state[data-tone="risk"] .rs-tv-state-t { color: var(--rl-cream); }   /* the sign is critical; the words stay cream */
.rs .rs-tv-state-h { font-size: var(--rl-t-meta); font-weight: 500; line-height: 1.6; color: var(--rl-quiet); margin-top: 0; }
.rs :is(.rs-sf-state, .rs-tv-state) .rs-btn { margin-top: calc(10 * var(--u)); }

/* ═══════════════════════════════════════════════════════════════════════
   TELEVISION — a page while there is no picture; over the picture, two bands
   ═══════════════════════════════════════════════════════════════════════ */
.rs .rs-tv { background: transparent; }
/* With a picture the screen is the picture: nothing of home shows through its letterbox. */
.rs .rs-tv[data-picture="1"] { background: var(--zv-navy); }
.rs .rs-tv-head {
    position: absolute; inset-inline: 0; top: var(--rl-head); height: calc(102.5 * var(--u));
    padding-inline: var(--rl-x); box-sizing: border-box;
    border-bottom: calc(1 * var(--u)) solid var(--rl-line);
}
.rs .rs-tv[data-picture="1"] .rs-tv-head { display: none; }
.rs .rs-tv-state {
    position: absolute; inset: calc(var(--rl-head) + 103.5 * var(--u) + var(--rl-horizon-gap)) var(--rl-x) auto;
    place-content: start;
}
.rs .rs-tv[data-list="1"] .rs-tv-state { inset-inline-start: calc(var(--rl-x) + 330 * var(--u) + 32 * var(--u)); }

/* The channel's band along the bottom. */
.rs .rs-tv-bar {
    inset: auto 0 0 0; height: var(--rl-band); box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
    column-gap: calc(24 * var(--u)); row-gap: calc(2 * var(--u));
    padding: calc(14 * var(--u)) var(--rl-x) var(--rl-y);
    background: var(--rl-ground); border: 0; border-top: calc(1 * var(--u)) solid var(--rl-line); border-radius: 0;
}
.rs .rs-tv-card { column-gap: calc(14 * var(--u)); }
.rs .rs-tv-name { font-size: var(--rl-t-title); font-weight: 700; line-height: 1.45; color: var(--rl-cream); }
.rs .rs-tv-guide { font-size: var(--rl-t-body); font-weight: 400; color: var(--rl-soft); }
.rs .rs-tv-note { font-size: var(--rl-t-meta); font-weight: 500; color: var(--rl-cream); }
.rs .rs-tv-hints { font-size: var(--rl-t-meta); font-weight: 500; line-height: 1.6; color: var(--rl-quiet); }
.rs .rs-tv-actions { gap: calc(14 * var(--u)); }
/* A logo is the channel's own picture; without one there is only the name — no plate, no initial. */
.rs .rs-tv-logo { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border: 0; border-radius: calc(4 * var(--u)); background: transparent; }
.rs .rs-tv-logo[data-logo="0"] { display: none; }
.rs .rs-tv-logo-img { inset: 0; width: 100%; height: 100%; }

/* The list: a column on the start side, from the horizon to the band. */
.rs .rs-tv-list {
    top: calc(var(--rl-head) + 103.5 * var(--u)); bottom: var(--rl-band); inset-inline-start: 0;
    width: calc(var(--rl-x) + 330 * var(--u)); box-sizing: border-box;
    padding: calc(10 * var(--u)) 0 calc(8 * var(--u)); padding-inline-start: var(--rl-x);
    background: var(--rl-ground); border: 0; border-inline-end: calc(1 * var(--u)) solid var(--rl-line); border-radius: 0;
    row-gap: calc(4 * var(--u));
}
.rs .rs-tv-list-t { padding-inline: var(--rl-inset) 0; }
.rs .rs-tv-rows { padding: 0; gap: 0;  }
.rs .rs-tv-row {
    position: relative; min-height: 0; padding: calc(7 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u)) 0; padding-inline: var(--rl-inset) calc(12 * var(--u));
    border-radius: 0; background: transparent; column-gap: calc(12 * var(--u));
}
.rs .rs-tv-row .rs-tv-logo { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(3 * var(--u)); }
.rs .rs-tv-row .rs-tv-logo[data-logo="0"] { display: block; visibility: hidden; }
.rs .rs-tv-row-name { font-size: var(--rl-t-item); font-weight: 700; line-height: 1.5; color: var(--rl-soft); }
.rs .rs-tv-row-on { font-size: var(--rl-t-meta); font-weight: 500; line-height: 1.6; color: var(--rl-cream); }
.rs .rs-tv-row[aria-pressed="true"] .rs-tv-row-name { color: var(--rl-cream); }

/* The voice, docked under a surface or over the picture: the same band. */
.rs[data-voice="dock"] .rs-voice { inset: auto 0 0 0; height: var(--rl-band); }
.rs[data-voice="dock"] .rs-voice-scrim { border: 0; border-top: calc(1 * var(--u)) solid var(--rl-line); border-radius: 0; background: var(--rl-ground); }
.rs[data-voice="dock"] .rs-voice-panel { padding: calc(12 * var(--u)) var(--rl-x) var(--rl-y); }
.rs[data-voice="dock"] .rs-status { font-size: var(--rl-t-item); font-weight: 700; color: var(--rl-cream); }
.rs[data-voice="dock"] .rs-mic { font-size: var(--rl-t-meta); font-weight: 500; color: var(--rl-quiet); }
.rs[data-voice="dock"] .rs-words { font-size: var(--rl-t-body); color: var(--rl-quiet); }
.rs[data-voice="dock"] .rs-answer { font-size: var(--rl-t-body) !important; font-weight: 400; color: var(--rl-soft); line-height: var(--rl-lh-body); -webkit-line-clamp: 1 !important; }