/* ═══════════════════════════════════════════════════════════════════════════
   Zawaya room screen — the surfaces (js/room-screen/rs-surfaces.js)
   ═══════════════════════════════════════════════════════════════════════════
   One frame for the food, room services and the guide (which holds the
   hotel's facilities and policies too):

     ┌ hotel · Food ─────────────── [Restaurant] [Café] ───── (◉ Talk) ┐
     │ Starters │ ┌──────┐ ┌──────┐ ┌──────┐                           │
     │ Mains    │ │photo │ │photo │ │photo │   a square grid, three    │
     │ Drinks   │ │name  │ │name  │ │name  │   across: ▲▼◀▶ only       │
     │ Desserts │ └──────┘ └──────┘ └──────┘                           │
     └ Arrows to move · OK for details · Back to leave ─ Pay on delivery ┘

   A card with focus takes the lifted surface and the mint ring; it does not
   grow, so the ring never needs room it does not have. Matte throughout.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-surface {
    position: absolute; inset: 0; z-index: 10;
    padding: var(--rs-safe-y) var(--rs-safe-x);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: calc(68 * var(--u)) minmax(0, 1fr) calc(30 * var(--u));
    row-gap: calc(14 * var(--u));
    background: var(--zv-navy);
}
.rs[data-voice="dock"] .rs-surface { padding-bottom: calc(27 * var(--u) + 118 * var(--u)); grid-template-rows: calc(68 * var(--u)) minmax(0, 1fr) 0; }
.rs[data-voice="dock"] .rs-sf-foot { visibility: hidden; }

/* ── Header ───────────────────────────────────────────────────────────── */
.rs-sf-head { display: flex; align-items: center; gap: calc(24 * var(--u)); min-width: 0; padding: var(--rs-ring-room) var(--rs-ring-room) 0; }
.rs-sf-titles { display: grid; min-width: 0; flex: none; }
.rs-sf-eyebrow { font-size: calc(16 * var(--u)); color: var(--zv-quiet); letter-spacing: 0.04em; white-space: nowrap; }
.rs-sf-title { font-size: calc(30 * var(--u)); font-weight: 700; line-height: 1.15; white-space: nowrap; }
.rs-sf-tabs { display: flex; gap: calc(8 * var(--u)); flex: 1; min-width: 0; }
.rs-tab {
    height: calc(42 * var(--u)); padding: 0 calc(20 * var(--u));
    border-radius: 999px; font-size: calc(18 * var(--u)); font-weight: 600; color: var(--zv-quiet);
    border: calc(1.5 * var(--u)) solid var(--rs-line);
    white-space: nowrap;
}
.rs-tab[aria-pressed="true"] { color: var(--zv-navy); background: var(--zv-mint); border-color: var(--zv-mint); }
.rs-tab:focus { color: var(--zv-mist); background: var(--rs-card-focus); border-color: var(--rs-card-focus); }
.rs-tab[aria-pressed="true"]:focus { color: var(--zv-navy); background: var(--zv-mint); }
/* A setting in the tab row (hotel offers on this screen): a plain switch, said in words. */
.rs-switch {
    display: inline-flex; align-items: center; gap: calc(10 * var(--u));
    height: calc(42 * var(--u)); padding: 0 calc(16 * var(--u));
    margin-inline-start: auto;
    border-radius: 999px; font-size: calc(17 * var(--u)); font-weight: 600; color: var(--zv-quiet);
    border: calc(1.5 * var(--u)) solid var(--rs-line);
    white-space: nowrap;
}
.rs-switch-v { color: var(--zv-mist); }
.rs-switch:focus { color: var(--zv-mist); background: var(--rs-card-focus); border-color: var(--rs-card-focus); }
.rs-sf-talk {
    margin-inline-start: auto; flex: none;
    display: flex; align-items: center; gap: calc(10 * var(--u));
    height: calc(46 * var(--u)); padding-inline: calc(8 * var(--u)) calc(18 * var(--u));
    border-radius: 999px; font-size: calc(17 * var(--u)); font-weight: 600; color: var(--zv-quiet);
    border: calc(1.5 * var(--u)) solid var(--rs-mint-edge);
}
.rs-sf-talk:focus { color: var(--zv-mist); background: var(--rs-card-focus); }
.rs-sf-talk-glyph { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.rs[data-voice="dock"] .rs-sf-talk { visibility: hidden; }

/* ── Body: rail and grid ──────────────────────────────────────────────── */
.rs-sf-body { display: grid; grid-template-columns: calc(196 * var(--u)) minmax(0, 1fr); column-gap: calc(28 * var(--u)); min-height: 0; }
.rs-surface[data-rail="0"] .rs-sf-body { grid-template-columns: minmax(0, 1fr); }
.rs-sf-rail {
    display: flex; flex-direction: column; gap: calc(6 * var(--u));
    overflow: hidden; min-height: 0; padding: calc(10 * var(--u));   /* the focus ring stays inside the clip, and the clip inside the overscan */
    
}
.rs-rail-item {
    flex: none;
    min-height: calc(46 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u));
    border-radius: calc(12 * var(--u));
    font-size: calc(19 * var(--u)); font-weight: 500; color: var(--zv-quiet);
    line-height: 1.3;
    position: relative;
}
.rs-rail-item[aria-pressed="true"] { color: var(--zv-mist); background: var(--rs-mint-wash); font-weight: 700; }
.rs-rail-item[aria-pressed="true"]::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%;
    width: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--zv-mint);
}
.rs-rail-item:focus { background: var(--rs-card-focus); color: var(--zv-mist); }
.rs-sf-main {
    position: relative; overflow: hidden; min-height: 0;
    padding: calc(12 * var(--u));
    
}
/* A square grid: equal columns, equal rows, so ▲▼◀▶ always land in line. */
.rs-sf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(20 * var(--u)); align-content: start; }
.rs-sf-grid[data-layout="list"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: calc(12 * var(--u)); max-width: calc(720 * var(--u)); }
.rs-sf-state { font-size: calc(20 * var(--u)); color: var(--zv-quiet); padding: calc(20 * var(--u)) 0; font-family: var(--rs-face-read); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.rs-card {
    display: flex; flex-direction: column;
    border-radius: var(--rs-radius); overflow: hidden;
    background: var(--rs-card);
    border: calc(1 * var(--u)) solid var(--rs-line-soft);
    min-width: 0;
}
.rs-card:focus { background: var(--rs-card-focus); border-color: transparent; position: relative; z-index: 1; }
.rs-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zv-sunken); }
.rs-card-body { display: grid; gap: calc(4 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); align-content: start; flex: 1; }
.rs-card-title { font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.rs-card-desc { font-size: calc(16 * var(--u)); color: var(--zv-quiet); line-height: 1.4; font-family: var(--rs-face-read); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.8em; }
.rs-card-line { font-size: calc(16 * var(--u)); color: var(--zv-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-card-hours { font-variant-numeric: tabular-nums; }
.rs-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); min-height: calc(28 * var(--u)); }
.rs-card-eta { font-size: calc(16 * var(--u)); color: var(--zv-quiet); }
.rs-card-label { font-size: calc(16 * var(--u)); color: var(--zv-quiet); }
.rs-card-place .rs-card-title { -webkit-line-clamp: 2; }
.rs-card-place .rs-card-desc { -webkit-line-clamp: 2; }
.rs-card-service, .rs-card-facility { flex-direction: row; align-items: center; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u)); min-height: calc(112 * var(--u)); }
.rs[dir="rtl"] .rs-card-service, .rs[dir="rtl"] .rs-card-facility { padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); }
.rs-card-service .rs-card-body, .rs-card-facility .rs-card-body { padding: calc(4 * var(--u)) calc(10 * var(--u)); }
.rs-card-service .rs-card-desc { min-height: 0; -webkit-line-clamp: 1; }
.rs-card-service .rs-glyph-disc, .rs-card-facility .rs-glyph-disc { width: calc(56 * var(--u)); height: calc(56 * var(--u)); font-size: calc(26 * var(--u)); }

/* ── Prices: the server's number and the riyal sign ───────────────────── */
.rs-price { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-weight: 700; font-size: calc(20 * var(--u)); color: var(--zv-cream); font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.rs[dir="rtl"] .rs-price { flex-direction: row-reverse; }
.rs-sar {
    display: inline-block; width: 0.82em; height: 0.92em; flex: none;
    background: currentColor;
    -webkit-mask: url(../saudi-riyal-icon.svg) center / contain no-repeat;
    mask: url(../saudi-riyal-icon.svg) center / contain no-repeat;
}
.rs-price-c { font-size: 0.75em; font-weight: 600; }
.rs-price-lg { font-size: var(--rl-t-title, calc(22 * var(--u))); }

.rs-chip {
    display: inline-flex; align-items: center; height: calc(26 * var(--u)); padding: 0 calc(10 * var(--u));
    border-radius: 999px; font-size: calc(16 * var(--u)); font-weight: 500;
    color: var(--zv-quiet); background: var(--rs-wash);
    white-space: nowrap;
}
.rs-chip-free { color: var(--zv-mint); background: var(--rs-mint-wash); font-weight: 700; }
.rs-chip-lg { height: calc(36 * var(--u)); font-size: calc(20 * var(--u)); padding: 0 calc(16 * var(--u)); justify-self: start; }
.rs-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
/* "Required" and "Sponsored" are words: the same quiet chip, no colour of their own. */
.rs-chip-word { margin-inline-start: calc(8 * var(--u)); }

/* ── A dish with no photo: a drawn plate, its initial ─────────────────── */
.rs-plate { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--zv-surface-2); }
.rs-plate[data-tone="1"] { background: var(--zv-sunken); }
.rs-plate[data-tone="2"] { background: var(--zv-surface); }
.rs-plate::before {
    content: ''; position: absolute; height: 76%; aspect-ratio: 1; border-radius: 50%;
    border: calc(1.5 * var(--u)) solid var(--rs-cream-edge);
}
.rs-plate-initial { position: relative; font-size: calc(46 * var(--u)); font-weight: 300; color: var(--rs-cream-soft); line-height: 1; }
.rs-plate[data-glyph="1"] .rs-plate-initial { font-size: calc(40 * var(--u)); color: inherit; }
.rs-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.rs-glyph-disc {
    flex: none; display: grid; place-items: center;
    width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%;
    font-size: calc(30 * var(--u)); line-height: 1;
    background: var(--rs-wash);
    border: calc(1.5 * var(--u)) solid var(--rs-cream-edge);
}

/* ── The stay's requests ──────────────────────────────────────────────── */
.rs-ticket, .rs-policy {
    display: grid; gap: calc(6 * var(--u));
    padding: calc(14 * var(--u)) calc(20 * var(--u));
    border-radius: var(--rs-radius); background: var(--rs-card);
    border: calc(1 * var(--u)) solid var(--rs-line-soft);
}
.rs-ticket:focus, .rs-policy:focus { background: var(--rs-card-focus); border-color: transparent; }
.rs-ticket-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(16 * var(--u)); }
.rs-ticket-title { font-size: calc(20 * var(--u)); font-weight: 700; }
.rs-ticket-time { font-size: calc(16 * var(--u)); color: var(--zv-quiet); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-ticket-state { font-size: calc(18 * var(--u)); font-weight: 600; }
.rs-ticket-msg { font-size: calc(17 * var(--u)); color: var(--zv-quiet); font-family: var(--rs-face-read); }
.rs-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(6 * var(--u)); margin: calc(4 * var(--u)) 0; max-width: calc(360 * var(--u)); }
.rs-track-step { height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--rs-line); }
.rs-track-step[data-done="1"] { background: var(--zv-quiet); }
.rs-policy-title { font-size: calc(20 * var(--u)); font-weight: 700; }
.rs-policy-line { font-size: calc(18 * var(--u)); color: var(--zv-quiet); font-family: var(--rs-face-read); line-height: 1.55; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.rs-sf-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); font-size: calc(16 * var(--u)); color: var(--zv-quiet); white-space: nowrap; min-width: 0; }
.rs-sf-note { overflow: hidden; text-overflow: ellipsis; }

/* ── Detail ───────────────────────────────────────────────────────────── */
.rs-detail {
    position: absolute; inset: 0; z-index: 2;
    padding: var(--rs-safe-y) var(--rs-safe-x);
    box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); column-gap: calc(40 * var(--u));
    background: var(--zv-navy);
}
/* No photo: the drawn plate needs less of the width than a photograph does. */
.rs-detail[data-photo="0"] { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
.rs[data-voice="dock"] .rs-detail { padding-bottom: calc(27 * var(--u) + 118 * var(--u)); }
.rs-detail-media { min-height: 0; display: grid; }
.rs-detail-photo { position: relative; border-radius: calc(20 * var(--u)); overflow: hidden; background: var(--zv-sunken); min-height: 0; }
.rs-detail-photo .rs-plate-initial { font-size: calc(120 * var(--u)); }
.rs-detail-glyph { display: grid; place-items: center; background: var(--zv-surface); }
.rs-detail-glyph .rs-glyph-disc { width: calc(180 * var(--u)); height: calc(180 * var(--u)); font-size: calc(84 * var(--u)); }
.rs-detail-text { min-height: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u)); justify-content: center; }
.rs-detail-body {
    min-height: 0; overflow: hidden; flex: 0 1 auto;
    display: flex; flex-direction: column; gap: calc(14 * var(--u));
    padding-inline: calc(8 * var(--u));
    
}
/* More words than room: said in a line of its own, not by fading the text. */
.rs-detail-more { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); padding-inline: calc(8 * var(--u));
    font-size: calc(16 * var(--u)); color: var(--zv-quiet); border-top: calc(1 * var(--u)) solid var(--rs-line-soft); padding-top: calc(6 * var(--u)); }
.rs-detail-actions { flex: none; padding: calc(8 * var(--u)); }
.rs-detail-eyebrow { font-size: calc(17 * var(--u)); color: var(--zv-quiet); letter-spacing: 0.03em; }
.rs-detail-title { font-size: calc(38 * var(--u)); font-weight: 700; line-height: 1.2; }
.rs-detail-lede { font-size: calc(22 * var(--u)); color: var(--zv-mist); font-family: var(--rs-face-read); }
.rs-detail-desc { font-size: calc(19 * var(--u)); color: var(--zv-quiet); line-height: 1.6; font-family: var(--rs-face-read); }
.rs-dl { display: grid; gap: calc(2 * var(--u)); }
.rs-dl-k { font-size: calc(16 * var(--u)); color: var(--zv-quiet); }
.rs-dl-v, .rs-dl-solo { font-size: calc(19 * var(--u)); color: var(--zv-mist); }
.rs-options { display: grid; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: var(--rs-radius); background: var(--zv-surface); }
.rs-options-title { font-size: calc(17 * var(--u)); color: var(--zv-quiet); font-weight: 600; }
.rs-option-head { display: flex; align-items: center; font-size: calc(18 * var(--u)); font-weight: 600; }
.rs-option-list { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); }
.rs-option { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(17 * var(--u)); color: var(--zv-quiet); padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: 999px; border: calc(1 * var(--u)) solid var(--rs-line); }
.rs-option .rs-price { font-size: calc(17 * var(--u)); }
.rs-detail-how { display: grid; gap: calc(4 * var(--u)); padding-top: calc(12 * var(--u)); border-top: calc(1 * var(--u)) solid var(--rs-line); }
/* How to order is reading: the body role (15u/400), the instruction in cream, its facts softer. */
.rs-how { font-size: var(--rl-t-body, calc(15 * var(--u))); color: var(--zv-mist); font-family: var(--rs-face-read); }
.rs-how-sub { font-size: var(--rl-t-body, calc(15 * var(--u))); color: var(--zv-quiet); }
.rs-how-off { font-size: var(--rl-t-body, calc(15 * var(--u))); color: var(--zv-quiet); }
.rs-credit { font-size: calc(16 * var(--u)); color: var(--zv-quiet); }
.rs-ask { align-self: flex-start; border-color: var(--rs-mint-edge); padding-inline-start: calc(8 * var(--u)); }
.rs-ask-glyph { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; }