/* ═══════════════════════════════════════════════════════════════════════════
   Zawaya room screen — the surfaces, spoken in the one language
   ═══════════════════════════════════════════════════════════════════════════
   rs-language.css is the authority; this sheet only brings the surfaces
   (rs-surfaces.js: the food, room services and their requests, the guide,
   the hotel, its policies) to it, where rs-surfaces.css still draws cards.
   It adds rules after both; neither is edited.

     masthead 33–63u     home's own, let through: the surface is a layer over home
     title    84u        the display line, on the grid
     index    …187u      the panes, home's hairline index: a bar on the horizon
     horizon  187u       full bleed
     rows     201u       a column: the text 14u in from a 3u bar, a hairline between
                         (with categories: their index on 201u, the rows 14u under its hairline)
     lower    463u       full bleed; the hints below it, 483–513u

   • No card. A row is its words on the ground; the hairline separates, space
     groups. No panel, no radius, no border box. A picture keeps its own frame
     (the row's thumbnail, the detail's photo) at a radius under 10px.
   • Focus is the bar the language defines: down the start side of a row, on
     the horizon under a pane or a category. Selection is the 1u cream rule
     where the bar would be. Framed actions (the talk pill, the offers switch,
     Ask) keep the ring rs-language.css gives them.
   • The panes are home's index, not pills: the same 17u words, the same 30u
     gap, the same bar on the same kind of horizon.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The layer: home's ground and masthead show through ─────────────────── */
.rs .rs-surface { display: block; padding: 0; background: transparent; }
.rs .rs-sf-eyebrow { display: none; }                         /* the masthead names the hotel */

/* ── The head: the title on 84u, the index on the horizon ─────────────── */
.rs .rs-sf-head {
    position: absolute; inset-inline: var(--rl-x); top: var(--rl-head); height: calc(103 * var(--u));
    box-sizing: border-box; padding: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0 calc(24 * var(--u)); align-items: end;                 /* no row gap: rs-surfaces.css's 24u would push the index off the horizon */
}
/* The horizon: one hairline, full bleed, under the index (as home's). */
.rs .rs-sf-head::after {
    content: ''; position: absolute; top: 100%; height: calc(1 * var(--u));
    inset-inline: calc(-1 * var(--rl-x)); background: var(--rl-line);
}
.rs .rs-sf-titles { grid-column: 1 / -1; grid-row: 1; align-self: start; display: block; }
.rs .rs-sf-title { display: block; white-space: nowrap; }
.rs .rs-sf-tabs {
    grid-column: 1; grid-row: 3; align-self: end;
    display: flex; align-items: flex-end; gap: calc(30 * var(--u)); min-width: 0;
}
.rs .rs-sf-talk { grid-column: 2; grid-row: 3; align-self: end; margin: 0 0 calc(6 * var(--u)); }   /* its ring stops on the horizon */

/* The panes: home's index words. */
.rs .rs-tab {
    position: relative; flex: none; height: auto; min-height: 0;
    padding: calc(8 * var(--u)) 0 calc(11 * var(--u));
    border: 0; border-radius: 0; background: transparent;
    font-size: var(--rl-t-item); font-weight: 700; line-height: 1.5; color: var(--rl-soft); white-space: nowrap;
}
.rs .rs-tab::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: var(--rl-bar); background: transparent; }
.rs .rs-tab[aria-pressed="true"] { color: var(--rl-cream); background: transparent; border: 0; }
.rs .rs-tab[aria-pressed="true"]::after { height: calc(1 * var(--u)); background: var(--rl-cream); }
.rs .rs-tab:focus, .rs .rs-tab[aria-pressed="true"]:focus { color: var(--zv-mint); background: transparent; outline: none; }
.rs .rs-tab:focus::after { height: var(--rl-bar); background: var(--zv-mint); }
/* The offers switch is a framed action: it stays framed, at the end of the index, level with the words. */
.rs .rs-sf-tabs .rs-switch { margin-inline-start: auto; margin-bottom: calc(8 * var(--u)); }

/* ── The body: from the first-row line to the lower horizon ───────────── */
/* Where a surface has categories they are a second index on the first-row line, and the rows follow under
   its own hairline. A column beside the rows would put the category focus returns to out of line with the
   row it leaves (rs-focus.js lands a group on its remembered item): a diagonal. Above the rows it never is. */
.rs .rs-sf-body {
    position: absolute; inset-inline: var(--rl-x);
    top: calc(var(--rl-head) + 103 * var(--u) + var(--rl-horizon-gap));
    bottom: calc(var(--rl-y) + 50 * var(--u));
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    gap: var(--rl-horizon-gap) 0;
}
.rs .rs-sf-rail { grid-row: 1; }
.rs .rs-sf-main { grid-row: 2; }
.rs .rs-surface[data-rail="0"] .rs-sf-body { grid-template-rows: 0 minmax(0, 1fr); row-gap: 0; }
.rs[data-voice="dock"] .rs-sf-body { bottom: calc(var(--rl-band) + var(--rl-horizon-gap)); }

/* The categories: home's index again, a size down in rank only by where it sits — under the panes, inside the margin. */
.rs .rs-sf-rail {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0 calc(30 * var(--u));
    padding: 0; box-sizing: border-box; overflow: visible;
    border-bottom: calc(1 * var(--u)) solid var(--rl-line);
}
.rs .rs-rail-item {
    position: relative; flex: none; min-height: 0; box-sizing: border-box;
    padding: calc(8 * var(--u)) 0 calc(11 * var(--u));
    border-radius: 0; background: transparent;
    font-size: var(--rl-t-item); font-weight: 700; line-height: 1.5; color: var(--rl-soft); white-space: nowrap;
}
.rs .rs-rail-item::before, .rs .rs-rail-item[aria-pressed="true"]::before {
    content: ''; position: absolute; inset-inline: 0; top: auto; bottom: 0;
    width: auto; height: var(--rl-bar); border-radius: 0; background: transparent;
}
.rs .rs-rail-item[aria-pressed="true"] { color: var(--rl-cream); background: transparent; font-weight: 700; }
.rs .rs-rail-item[aria-pressed="true"]::before { height: calc(1 * var(--u)); background: var(--rl-cream); }
.rs .rs-rail-item:focus { color: var(--zv-mint); background: transparent; }
.rs .rs-rail-item:focus::before { height: var(--rl-bar); background: var(--zv-mint); }

/* The rows. A row that can go into the basket is held with its «أضف» in one line (`.rs-orow`, rs-basket.css):
   the row inside it keeps every rule here. */
.rs .rs-sf-main { padding: 0;  }
.rs .rs-sf-grid, .rs .rs-sf-grid[data-layout] {
    display: flex; flex-direction: column; gap: 0; max-width: none;
    grid-template-columns: none; grid-auto-rows: auto;
}
.rs :is(.rs-sf-grid, .rs-orow) > [data-card] {
    position: relative; flex: none; box-sizing: border-box; min-width: 0; min-height: 0;
    padding: calc(10 * var(--u)) 0; padding-inline: var(--rl-inset) 0;
    border: 0; border-top: calc(1 * var(--u)) solid var(--rl-line); border-radius: 0;
    background: transparent; color: var(--rl-cream); text-align: start;
}
.rs :is(.rs-sf-grid, .rs-orow) > [data-card]:first-child { border-top-color: transparent; }
.rs :is(.rs-sf-grid, .rs-orow) > [data-card]::before {
    content: ''; position: absolute; inset-inline-start: 0; top: calc(10 * var(--u)); bottom: calc(10 * var(--u));
    width: var(--rl-bar); background: transparent;
}
.rs :is(.rs-sf-grid, .rs-orow) > [data-card]:focus { background: transparent; border-color: var(--rl-line); }
.rs :is(.rs-sf-grid, .rs-orow) > [data-card]:first-child:focus { border-top-color: transparent; }
.rs :is(.rs-sf-grid, .rs-orow) > [data-card]:focus::before { background: var(--zv-mint); }
.rs :is(.rs-sf-grid, .rs-orow) > [data-card]:focus :is(.rs-card-title, .rs-ticket-title, .rs-policy-title) { color: var(--zv-mint); }

/* A card's parts, laid out as a row: the words, and the meta at the end. */
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-rows: auto;
    column-gap: calc(24 * var(--u)); align-items: baseline; overflow: visible;
}
.rs :is(.rs-sf-grid, .rs-orow) > :is(.rs-card-dish, .rs-card-place) { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: calc(16 * var(--u)); }
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card .rs-card-body { display: contents; }
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card .rs-glyph-disc { display: none; }
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card .rs-card-title {
    grid-column: -3; grid-row: 1;
    font-size: var(--rl-t-item); font-weight: 700; line-height: 1.5; color: var(--rl-cream);
    -webkit-line-clamp: 1;
}
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card :is(.rs-card-desc, .rs-card-line:not(.rs-card-hours)) {
    grid-column: -3; grid-row: 2; min-height: 0;
    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);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; white-space: normal;
}
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card :is(.rs-card-meta, .rs-card-hours) {
    grid-column: -2; grid-row: 1; justify-self: end;
    display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin: 0; min-height: 0;
    font-size: var(--rl-t-meta); font-weight: 500; line-height: 1.6; color: var(--rl-quiet); white-space: nowrap;
}
.rs .rs-card-meta > * + *::before { content: '·'; margin-inline-end: calc(10 * var(--u)); color: var(--rl-quiet); }
.rs .rs-card-meta :is(.rs-card-eta, .rs-price) { font-size: var(--rl-t-meta); font-weight: 500; color: var(--rl-quiet); }
/* A row's picture: its own small frame, at the start, beside the words. */
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card .rs-card-media {
    grid-column: 1; grid-row: 1 / span 2; align-self: center;
    width: calc(96 * var(--u)); aspect-ratio: 16 / 9; border-radius: calc(3 * var(--u));
}
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card .rs-card-media[data-photo="1"] .rs-plate { visibility: hidden; }   /* under a photo the plate is not seen */
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card .rs-plate::before { border-width: calc(1 * var(--u)); }
.rs :is(.rs-sf-grid, .rs-orow) > .rs-card .rs-plate-initial { font-size: calc(22 * var(--u)); }

/* A chip is a word: no ground, no frame, no colour of its own. */
.rs .rs-chip, .rs .rs-chip-free {
    height: auto; padding: 0; border-radius: 0; background: transparent;
    font-weight: 500; color: inherit;
}
.rs .rs-card-meta .rs-chip { font-size: inherit; }
.rs .rs-chip-word { margin-inline-start: 0; }
.rs .rs-chips > * + *::before { content: '·'; margin-inline-end: calc(8 * var(--u)); }

/* The stay's requests and the hotel's policies: the same row, their own parts. */
.rs :is(.rs-sf-grid, .rs-orow) > :is(.rs-ticket, .rs-policy) { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: calc(4 * var(--u)); }
.rs .rs-ticket-head { align-items: baseline; }
.rs .rs-ticket-title, .rs .rs-policy-title { font-size: var(--rl-t-item); font-weight: 700; line-height: 1.5; color: var(--rl-cream); }
.rs .rs-ticket-time { font-size: var(--rl-t-meta); font-weight: 500; line-height: 1.6; color: var(--rl-quiet); }
.rs .rs-ticket-state { font-size: var(--rl-t-body); font-weight: 700; line-height: 1.5; }
.rs .rs-ticket-msg, .rs .rs-policy-line { 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-track { margin: calc(2 * var(--u)) 0; }
.rs .rs-track-step { height: calc(3 * var(--u)); border-radius: 0; }

/* ── The lower horizon, and the hints under it ────────────────────────── */
.rs .rs-sf-foot {
    position: absolute; inset-inline: var(--rl-x); bottom: var(--rl-y); height: calc(30 * var(--u));
    font-size: var(--rl-t-meta); font-weight: 500; line-height: 1.6; color: var(--rl-quiet);
}
.rs .rs-sf-foot::before {
    content: ''; position: absolute; top: calc(-20 * var(--u)); height: calc(1 * var(--u));
    inset-inline: calc(-1 * var(--rl-x)); background: var(--rl-line);
}

/* ── The detail: no panel inside it either ────────────────────────────── */
.rs .rs-detail-photo { border-radius: calc(4 * var(--u)); }
.rs .rs-detail-glyph, .rs .rs-detail-glyph .rs-glyph-disc { background: transparent; }
.rs .rs-options {
    padding: calc(12 * var(--u)) 0 0; border-radius: 0; background: transparent;
    border-top: calc(1 * var(--u)) solid var(--rl-line);
}
.rs .rs-option { padding: 0; border: 0; border-radius: 0; }
.rs .rs-option + .rs-option::before { content: '·'; margin-inline-end: calc(4 * var(--u)); }