/* ==================================================================================================
   Request Manager 2.0 - the public availability page. The only app on the estate whose user is not yet
   a customer (DESIGN decision 14), so this sheet may do what the backoffice sheets may not: be warm.

   Typography follows the platform (Segoe UI Light; weight is never the structural device). The matrix
   colours are the four the customer already knows from the 1.0 board - green free, orange option or
   shared, red occupied - softened. The app's own accent is cobalt, deliberately outside those three so
   "the building we would pick" never reads as a fifth availability state.
   ================================================================================================== */

:root {
    --rq-ink: #1f2d32;
    --rq-ink-soft: #4a5b60;
    --rq-ink-muted: #7a8c90;
    --rq-paper: #faf8f4;          /* warm paper, not office grey */
    --rq-card: #ffffff;
    --rq-line: #e6e1d8;
    --rq-accent: #3b6fc1;         /* cobalt - the app's tint (favicon-system.md) */
    --rq-accent-deep: #1b3a68;
    --rq-accent-soft: #e9effb;
    --rq-gold: #f6d488;           /* the brand's golden dot */

    
    
    
    
    
    
}

html, body {
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    font-weight: 300;
    color: var(--rq-ink);
    background: var(--rq-paper);
    line-height: 1.45;
}

a { color: var(--rq-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1:focus { outline: none; }
strong { font-weight: 500; }   /* an accent, never bold */

/* ==================================================================================================
   APP-BAR - the shared shell contract (platformburger). Metrics copied from relation-manager /
   ArrivalDepartureList so the apps really are identical; the colour is this app's own: cobalt-deep,
   the bottom stop of the favicon tint (#1b3a68 on white = 11.6:1, well past AAA for the white text).
   ================================================================================================== */
.app-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem .75rem;
    background: var(--rq-accent-deep);
    color: #fff;
    font-size: .8rem;
    min-height: 2.1rem;
}
.app-bar__brand { font-size: 1.05rem; font-weight: 300; letter-spacing: .01em; }
.app-bar__right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.app-bar__slogan { font-style: italic; opacity: .75; }
/* the way back to RQM 1.0 during the transition: present, never louder than the language menu */
.rq-previous { color: inherit; opacity: .8; text-decoration: none; border: 1px solid rgba(255,255,255,.35);
    border-radius: 4px; padding: .1rem .45rem; white-space: nowrap; }
.rq-previous:hover { opacity: 1; border-color: currentColor; text-decoration: none; }
/* 390 px measured 2026-10-13: with "Vorige versie" the bar ran 83 px wide and pushed the language menu off
   screen. On a phone the slogan goes and the Frontdoor link keeps its icon (its title still names it). */
@media (max-width: 480px) {
    .app-bar { gap: .35rem; padding: .4rem .5rem; }
    .app-bar__right { gap: .35rem; }
    .app-bar__slogan, .mg-frontdoor span { display: none; }
}

/* the Frontdoor link, same shape as <FrontdoorLink/> in MeninGate.Identity.Web (copied: no Identity here yet) */
.mg-frontdoor { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none;
    border: 1px solid transparent; border-radius: 4px; padding: .2rem .5rem; font-size: .85rem; line-height: 1.4; opacity: .9; }
.mg-frontdoor:hover { background: rgba(255,255,255,.12); border-color: currentColor; opacity: 1; text-decoration: none; }
.mg-frontdoor svg { flex: 0 0 auto; }

/* ---- page ------------------------------------------------------------------------------------- */
.rq-main { padding: 0 clamp(.75rem, 2.5vw, 2rem) 2rem; max-width: 1900px; width: 100%; margin: 0 auto; }

.rq-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .8rem clamp(1rem, 4vw, 3rem); border-top: 1px solid var(--rq-line); margin-top: 1rem;
    color: var(--rq-ink-muted); font-size: .8rem;
}

.rq-notfound, .rq-status { padding: 2rem 0; color: var(--rq-ink-soft); }
.rq-error { padding: 3rem 0; max-width: 40rem; }
.rq-error h1 { font-weight: 300; font-size: 1.8rem; }
.rq-error__id { color: var(--rq-ink-muted); font-size: .85rem; }

/* ---- the three questions: an always-visible calendar and two fields beside it --------------------- */
/* Stefaan 2026-09-18: "de landingspagina is nog niet sexy genoeg; de kalender moet standaard zichtbaar
   zijn - één klik gespaard; jaar én maand direct instelbaar zoals RM 2.0". */
.rq-top { padding: .6rem 0 .7rem; }
.rq-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the panel: calendar + fields on the left (open) or one bar (closed); the voice of the system on the right, always */
.rq-panel {   /* half the size it was - Stefaan 2026-09-18: "veels te groot" */
    display: grid; gap: 1.25rem; align-items: start;
    background: var(--rq-card); border: 1px solid var(--rq-line); border-radius: var(--rq-r, 1rem);
    padding: .7rem .9rem; box-shadow: 0 2px 12px rgba(27,58,104,.06);
}
/* One column (Stefaan 2026-09-19: "de begeleider hoort thuis op de rij boven de kalender"): the voice as a full-width
   row on top, the questions under it at their own width (year + month + group size on one row), and the room to
   the right of the calendar left free on purpose - "dan hebben we rechts van de kalender plaats voor andere zaken". */
.rq-panel--open, .rq-panel--closed { grid-template-columns: 1fr; align-items: start; }
.rq-panel--open .rq-ask__cal { max-width: 31rem; }
.rq-panel--closed .rq-bar { max-width: 28rem; }

/* the folded calendar: one bar, unmistakably "here is the calendar" */
.rq-bar {
    display: flex; align-items: center; gap: .9rem; text-align: left; font: inherit; cursor: pointer;
    padding: .5rem .8rem; border: 1px solid var(--rq-line); border-radius: .9rem; background: var(--rq-paper); color: var(--rq-ink);
    transition: border-color .15s, box-shadow .15s;
}
.rq-bar:hover { border-color: var(--rq-accent); box-shadow: 0 0 0 3px var(--rq-accent-soft); }
.rq-bar__text { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.rq-bar__when { font-size: .95rem; color: var(--rq-accent-deep); }
.rq-bar__meta { font-size: .78rem; color: var(--rq-ink-soft); }
.rq-bar__change { font-size: .85rem; color: var(--rq-accent); white-space: nowrap; padding: .35rem .7rem; border-radius: 1rem; border: 1px solid var(--rq-accent-soft); background: #fff; }
.rq-ask__summary { display: flex; flex-direction: column; gap: .15rem; padding-top: .3rem; border-top: 1px dashed var(--rq-line); margin-top: .2rem; }
/* the summary: the three legs in the RM 2.0 colours (chips and search button gone 2026-09-19) */
.rq-ask__leg { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--rq-ink); }
.rq-ask__leg i { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.rq-ask__leg--arrival i { background: var(--rq-leg-arrival); }
.rq-ask__leg--stay i { background: var(--rq-leg-stay); }
.rq-ask__leg--stay { color: var(--rq-ink-soft); font-size: .8rem; }
.rq-ask__leg--departure i { background: var(--rq-leg-departure); }
.rq-ask__hint { color: var(--rq-ink-muted); font-size: .9rem; font-style: italic; }

.rq-field { display: flex; flex-direction: column; gap: .3rem; }
.rq-field__label { font-size: .66rem; color: var(--rq-ink-muted); }
.rq-field__input {
    font: inherit; font-size: 1.15rem; padding: .55rem .8rem;
    border: 1px solid var(--rq-line); border-radius: .75rem; background: var(--rq-card); color: var(--rq-ink);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.rq-field__input:focus { border-color: var(--rq-accent); box-shadow: 0 0 0 3px var(--rq-accent-soft); }
.rq-field__input::placeholder { color: #b9c2c5; }


.rq-field--people .rq-field__input { max-width: 6.6rem; font-size: .98rem; padding: .32rem .6rem; }


/* the calendar */
.rq-cal { user-select: none; }
.rq-cal__nav { display: flex; justify-content: flex-start; gap: .3rem 1rem; margin-bottom: .45rem; flex-wrap: wrap; }
.rq-cal__group { display: inline-flex; align-items: center; gap: .15rem; }
.rq-cal__step { border: 1px solid var(--rq-line); background: var(--rq-card); color: var(--rq-accent); width: 1.45rem; height: 1.45rem; border-radius: 50%; font-size: .9rem; line-height: 1; cursor: pointer; }
.rq-cal__step:hover:not(:disabled) { background: var(--rq-accent-soft); }
.rq-cal__step:disabled { color: #c9d0d3; cursor: default; }
.rq-cal__select {
    font: inherit; font-size: .82rem; padding: .15rem 1.4rem .15rem .55rem; border: 1px solid var(--rq-line); border-radius: 1rem;
    background: var(--rq-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%237a8c90'/></svg>") no-repeat right .6rem center;
    color: var(--rq-ink); appearance: none; -webkit-appearance: none; cursor: pointer; text-transform: capitalize;
}
.rq-cal__select:focus { outline: none; border-color: var(--rq-accent); box-shadow: 0 0 0 3px var(--rq-accent-soft); }
.rq-cal__select--year { padding-left: .75rem; }

.rq-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .1rem; }
.rq-cal__dow { text-align: center; font-size: .62rem; letter-spacing: .05em; color: var(--rq-ink-muted); padding: .05rem 0 .15rem; }
.rq-cal__day {
    font: inherit; font-size: .84rem; height: 1.75rem; border: 0; border-radius: .5rem; background: transparent; color: var(--rq-ink);
    cursor: pointer; transition: background .12s, transform .08s;
}
.rq-cal__day:hover:not(:disabled) { background: var(--rq-accent-soft); }
.rq-cal__day--out { color: #c3cacd; }
.rq-cal__day--past { color: #d3d8da; cursor: default; }
.rq-cal__day--today { box-shadow: inset 0 0 0 1px var(--rq-accent); }
.rq-cal__day--stay { border-radius: 0; }
.rq-cal__day--arrival { color: #fff; font-weight: 500; border-radius: .6rem 0 0 .6rem; }
.rq-cal__day--stay + .rq-cal__day:not(.rq-cal__day--stay) { }

@media (max-width: 720px) {
    .rq-panel--open, .rq-panel--closed { grid-template-columns: 1fr; }
}


/* ---- the result ------------------------------------------------------------------------------- */
/* Round 3 (Stefaan 2026-09-18): "alles ziet er zo vierkant en saai strak uit, het mag ronder; de kolomkoppen
   komen Internet Explorer 4.0 over". So: no colour blocks. Heads are light cards with the facade on top and
   a small coloured verdict pill; cells are rounded tiles with a gap between them; rows outside the visitor's
   own period are dimmed so the eye lands on the stay that was asked for. */
:root {
    --rq-free:   #1e7a43; --rq-free-bg:   #cdeed6; --rq-free-bg-strong:   #8fd8a6;
    --rq-maybe:  #4f9a68; --rq-maybe-bg:  #e6f5ea;
    --rq-shared: #a86a0e; --rq-shared-bg: #ffe1a6;
    --rq-option: #b8600f; --rq-option-bg: #ffd2a3;
    --rq-busy:   #9b2a24; --rq-busy-bg:   #f6c4c0;
    --rq-off:    #7a878b; --rq-off-bg:    #e9e9e5;
    --rq-r: 1rem;
}

.rq-result { animation: rq-in .3s ease; }
@keyframes rq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the voice of the system - "een duidelijk communicatiekader" */
.rq-voice {
    display: flex; gap: 1rem; align-items: flex-start;
    margin: 0; padding: .65rem .9rem;
    background: var(--rq-paper); border: 1px solid var(--rq-line); border-left: 6px solid var(--rq-free);
    border-radius: var(--rq-r);
}
.rq-voice--ask { border-left-color: var(--rq-accent); }
.rq-voice--ask .rq-voice__icon { color: var(--rq-accent); animation: rq-nudge-bounce 1.4s ease-in-out infinite; }
@keyframes rq-nudge-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.rq-voice--soft { border-left-color: var(--rq-shared); }
.rq-voice__icon { font-size: 1.1rem; line-height: 1; color: var(--rq-free); padding-top: .15rem; }
.rq-voice--soft .rq-voice__icon { color: var(--rq-shared); }
.rq-voice__body { display: flex; flex-direction: column; gap: .15rem; }
.rq-voice__main { margin: 0; font-size: .98rem; line-height: 1.4; color: var(--rq-ink); }
.rq-voice__fav { color: var(--rq-accent-deep); font-weight: 500; }
.rq-voice__why { color: var(--rq-ink-soft); font-size: .88rem; }
.rq-voice__sub { margin: 0; color: var(--rq-ink-muted); font-size: .78rem; }

/* the grid: no box around it, no lines - the tiles carry the shape */
/* the viewport: about fifteen rows tall; the rest is there to glide to. Heads stay put while rows scroll. */
.rq-matrix-wrap { position: relative; overflow-x: auto; overflow-y: hidden; padding: .2rem .1rem .6rem; }
.rq-matrix-wrap--window { max-height: calc(15 * 1.95rem + 16rem); }   /* the week-before/after viewport; JS sets the exact height */
.rq-matrix-wrap--stay { max-height: none; }

/* "bekijk ook andere datums" - the first impression is the stay alone (Stefaan 2026-09-18) */
/* Pillar 7: the control shows its own state. On = the accent fills it, so "have I opened this?" is
   answered by looking, not by finding a tick (Stefaan 2026-10-06). */
.rq-others {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .5rem .2rem;
    font-size: .88rem; color: var(--rq-ink-soft); cursor: pointer;
    border: 1px solid var(--rq-line); background: var(--rq-card); border-radius: 2rem;
    padding: .3rem .85rem .3rem .7rem; font-weight: 300; transition: background .14s, color .14s, border-color .14s;
}
.rq-others:hover { border-color: var(--rq-accent); color: var(--rq-accent-deep); }
.rq-others--on { background: var(--rq-accent); border-color: var(--rq-accent); color: #fff; }
.rq-others--on:hover { color: #fff; }
.rq-others__icon { color: var(--rq-accent); flex: 0 0 auto; }
.rq-others--on .rq-others__icon { color: #fff; }
.rq-matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--rq-paper); }
.rq-matrix thead tr.rq-places th { top: 0; }
.rq-matrix thead tr:nth-child(2) th { top: 2.3rem; }
.rq-matrix__corner, .rq-places__corner { z-index: 4; }
.rq-matrix { border-collapse: separate; border-spacing: .3rem .28rem; width: 100%; font-size: .9rem; table-layout: fixed; }   /* fixed: eight buildings share the width, none falls off the screen */
.rq-matrix th, .rq-matrix td { padding: 0; }

.rq-matrix__corner { position: sticky; left: 0; background: var(--rq-paper); z-index: 2; padding: 0 .4rem .5rem 0; white-space: nowrap; vertical-align: bottom; }
.rq-corner__hint { display: block; margin-top: .5rem; font-size: .72rem; color: var(--rq-ink-muted); }
.rq-nav { border: 1px solid var(--rq-line); background: var(--rq-card); color: var(--rq-accent); width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; margin-right: .3rem; }
.rq-nav:hover { background: var(--rq-accent-soft); }

/* the location row: country + place above the buildings (2026-09-18) */
.rq-places th { padding: 0 0 .1rem; }
.rq-place { text-align: left; padding: .3rem .8rem .35rem !important; border-radius: .7rem; font-weight: 300; }
.rq-place--be { background: #e9eef7; color: var(--rq-accent-deep); }
.rq-place--fr { background: #f2e9f7; color: #4a2a6a; }
/* The drawn national flag (Domain/CountryFlags.cs). A hairline border, because France's middle band is
   white and would otherwise bleed into any light background; the radius keeps it from reading as a photo. */
.rq-flag { display: inline-block; border-radius: .12rem; box-shadow: 0 0 0 1px rgba(31,45,50,.28); vertical-align: -.1rem; }
.rq-flag--band { height: 1.15rem; width: 1.72rem; margin-right: .5rem; }
.rq-flag--card { height: .72rem; width: 1.08rem; margin-right: .3rem; }
.rq-pool__map .rq-flag { flex: 0 0 auto; margin-right: 0; }   /* the link is a flex row with its own gap */
.rq-place__country { font-size: .78rem; margin-left: .35rem; }

/* column heads: a light card, facade on top, verdict as a pill */
.rq-head { text-align: left; padding: 0; vertical-align: top; font-weight: 300; }
.rq-head__card {
    background: var(--rq-card); border: 1px solid var(--rq-line); border-radius: var(--rq-r); overflow: hidden;
    box-shadow: 0 1px 4px rgba(31,45,50,.05); transition: box-shadow .2s, transform .2s;
}
.rq-head--fav .rq-head__card { box-shadow: 0 1px 4px rgba(31,45,50,.05); }   /* no frame around the favourite for now (Stefaan 2026-09-18) - the star and the sentence carry it */
.rq-head__photo { position: relative; height: 5.8rem; background: #e6e2da; }
.rq-head__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-head__nophoto { display: grid; place-items: center; height: 100%; color: var(--rq-ink-muted); font-size: .8rem; }
.rq-head__count { position: absolute; left: .45rem; bottom: .4rem; font-size: .66rem; background: rgba(0,0,0,.45); color: #fff; padding: .05rem .4rem; border-radius: 1rem; }
.rq-head__site {
    position: absolute; right: .45rem; bottom: .4rem; font-size: .7rem; letter-spacing: .02em;
    background: rgba(255,255,255,.92); color: var(--rq-accent-deep); padding: .2rem .6rem; border-radius: 1rem;
    text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); opacity: .92;
}
.rq-head__site:hover { opacity: 1; text-decoration: none; background: #fff; }
.rq-head__star { position: absolute; top: .4rem; left: .5rem; color: var(--rq-gold); font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.rq-head__text { padding: .55rem .75rem .65rem; }
.rq-pool__name { display: block; font-size: .98rem; line-height: 1.2; color: var(--rq-ink); overflow-wrap: anywhere; }
.rq-pool__meta { display: block; font-size: .74rem; color: var(--rq-ink-muted); margin-top: .1rem; }
.rq-pool__map { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; font-size: .74rem; color: var(--rq-accent); text-decoration: none; }
.rq-pool__map:hover { text-decoration: underline; }
.rq-pool__map svg { flex: 0 0 auto; }
.rq-verdict { display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem; font-size: .74rem; padding: .18rem .6rem .18rem .45rem; border-radius: 1rem; }
.rq-verdict i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; display: inline-block; }
.rq-verdict--go    { background: var(--rq-free-bg);   color: var(--rq-free); }
.rq-verdict--maybe { background: var(--rq-shared-bg); color: var(--rq-shared); }
.rq-verdict--no    { background: var(--rq-busy-bg);   color: var(--rq-busy); }

/* row heads: the dates */
.rq-matrix__date { position: sticky; left: 0; background: var(--rq-paper); z-index: 1; text-align: left; padding: .1rem .4rem .1rem .1rem; white-space: nowrap; font-weight: 300; vertical-align: middle; width: 10.4rem; }
.rq-matrix__corner, .rq-places__corner { width: 10.4rem; }
.rq-date__dow { display: inline-block; width: 2.1rem; color: var(--rq-ink-muted); font-size: .76rem; text-transform: lowercase; }
.rq-date__day { color: var(--rq-ink); }
/* 🔴 Inline, not a line of its own. A merged block divides its height into equal day-targets, so EVERY row
   in the window must be the same height - and this marker, on one row only, made that row 50 px against
   everyone else's 34. A fifteen-day block then drifted up to 12 px off its own dates and the hover line
   pointed at the wrong day (measured 2026-10-06). It sits beside the date now; the row stays two lines. */
.rq-date__you { display: inline; padding-left: .4rem; font-size: .62rem; color: var(--rq-accent-deep); }
/* What this date is worth, in words. Lives in the sticky date column: no width cost, and it stays put
   while the grid scrolls sideways (Stefaan 2026-10-06, "minder nummers ... andere manier van weergeven"). */
.rq-date__sum { display: block; padding-left: 2.1rem; font-size: .68rem; color: var(--rq-ink-muted); line-height: 1.25; }

/* The widest days in the window: named once above the grid, marked once in the date column. Nothing is
   painted into the grid itself - the colours there already mean something (2026-10-06). */
.rq-best { margin: .1rem .2rem .5rem; font-size: .84rem; color: var(--rq-accent-deep); }
.rq-row--best .rq-matrix__date { background: var(--rq-accent-soft); border-radius: .5rem; }
.rq-row--best .rq-date__sum { color: var(--rq-accent); }
.rq-row--best .rq-date__day { color: var(--rq-accent-deep); }
.rq-row--requested .rq-date__sum { color: var(--rq-accent-deep); opacity: .85; }
.rq-row--requested .rq-matrix__date { color: var(--rq-accent-deep); }

/* the window head is a name plate, not a card - the photo and the verdict belong to the asked-for stay */
/* In the window only the name plates stay pinned; the country band scrolls away with the grid. Both rows
   sticking means the second one needs a hard-coded offset for the height of the first, and the first wraps
   to two lines as soon as a place is called Haringe-Poperinge - which swallowed "Poperinge" behind the
   plates (seen 2026-10-06). Nothing is lost: every plate carries its own flag. */
.rq-matrix-wrap--window thead tr.rq-places th { position: static; }
.rq-matrix-wrap--window thead tr:nth-child(2) th { top: 0; }
.rq-head__plate { padding: .15rem .5rem .45rem; text-align: left; }
.rq-head__plate .rq-pool__name { display: block; }
.rq-head__plate .rq-pool__meta { display: flex; align-items: center; }

/* the visitor's own period is full colour; everything else steps back */
/* Outside the asked-for period the row steps back - but only a step. It used to drop to .42, which was
   fine while every cell shouted a number; now that colour is the ONLY signal in the window, that much
   fading made whole weeks unreadable (measured on the screenshot, 2026-10-06). */
.rq-row--dim .rq-cell { opacity: .8; filter: saturate(.85); }
.rq-row--dim .rq-matrix__date { opacity: .72; }
.rq-row--dim .rq-cell--click:hover { opacity: 1; filter: none; }
.rq-row--period .rq-cell { box-shadow: 0 1px 3px rgba(31,45,50,.08); }

/* cells. In the folded stay view a cell is still a tile with its number (.rq-cell--big, further down);
   in the +-7 window it is a bar of colour and nothing else - see the Razor for why the numbers left. */
.rq-cellwrap { }
.rq-cell {
    border-radius: .55rem; height: 1.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity .15s, filter .15s, transform .1s;
}
/* A run in the window: one block over however many days it lasts, with a click target per day inside it.
   Free is the only thing that gets a fill; a day that can still be ASKED for (shared, or someone else holds
   an option) keeps a hairline so it is visible and clickable without competing with green; a day that is
   taken draws nothing at all. */
/* 🔴 height:1px is load-bearing, not a typo. A percentage height on a child of a table cell only resolves
   when the cell itself has a DEFINITE height; with `auto` the block fell back to the height of its own
   content and a run of seven days ended three rows short of its last date - the hover line then pointed at
   the wrong day (seen 2026-10-06). Table layout stretches the cell past this 1px to whatever its row span
   needs, and .rq-run's 100% finally has something to be 100% OF. */
.rq-cellwrap--window { vertical-align: top; height: 1px; padding: 2px 0 !important; }

/* 🔴 No vertical gap BETWEEN rows in the window. A block spanning seven rows also spans the six gaps
   between them, so its seven equal day-targets each came out a fraction taller than a row - and that
   fraction accumulated to 11 px by the end of a long run, which is enough for the hover line to point at
   the wrong day (measured 2026-10-06). The gap moves inside the cell as padding, where it is a constant
   4 px for the whole block instead of a per-row error: the drift drops to +-2 px and stops growing. */
.rq-matrix-wrap--window .rq-matrix { border-spacing: .3rem 0; }
.rq-run {
    height: 100%; min-height: 1.6rem; display: flex; flex-direction: column; border-radius: .55rem; overflow: hidden;
    /* The dates of the block, on hover. Absolute so it never changes the block's height, and pointer-events
       off so it cannot steal the click from the day underneath it. */
    position: relative;
}
.rq-run--free { background: var(--rq-free-bg); }
.rq-run--askable { background: rgba(31,45,50,.055); }   /* a presence, not a frame: an outline read as an empty placeholder */
.rq-run__day { flex: 1 1 0; min-height: 1.5rem; border: 0; background: none; padding: 0; cursor: pointer; }
.rq-run__day:hover { background: rgba(31,45,50,.09); }
.rq-run__day:focus-visible { outline: 2px solid var(--rq-accent); outline-offset: -2px; }

.rq-run__label {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: .72rem; color: var(--rq-ink); opacity: 0; transition: opacity .12s; pointer-events: none;
    text-shadow: 0 0 .35rem var(--rq-card), 0 0 .35rem var(--rq-card); white-space: nowrap;
}
.rq-run:hover .rq-run__label { opacity: .95; }

/* The line that says which date the pointer is on (RM 2.0's board, 2026-10-06). Positioned by the script
   in App.razor; it starts hidden and stays hidden on a device without a pointer. */
.rq-hairline {
    display: none; position: absolute; left: 0; height: 0; z-index: 4; pointer-events: none;
    border-top: 1px dashed var(--rq-accent); opacity: .55;
}
.rq-row--hover .rq-matrix__date { box-shadow: inset 0 0 0 1px var(--rq-accent); border-radius: .5rem; }
.rq-row--hover .rq-date__day { color: var(--rq-accent-deep); }
.rq-cell--click { cursor: pointer; }
.rq-cell--click:hover { transform: translateY(-1px); filter: brightness(.96); }
.rq-cell__beds { font-size: 1.2rem; line-height: 1.05; font-weight: 500; }
.rq-cell__off { color: inherit; opacity: .5; font-size: .9rem; }

.rq-cell--exclusive      { background: var(--rq-free-bg);   color: var(--rq-free); }
.rq-cell--maybe          { background: var(--rq-maybe-bg);  color: var(--rq-maybe); }
.rq-cell--shared         { background: var(--rq-shared-bg); color: var(--rq-shared); }
.rq-cell--shared-unknown { background: var(--rq-shared-bg); color: var(--rq-shared); }
.rq-cell--option         { background: var(--rq-option-bg); color: var(--rq-option); }
.rq-cell--occupied       { background: var(--rq-busy-bg);   color: var(--rq-busy); }
.rq-cell--closed         { background: var(--rq-off-bg);    color: var(--rq-off); }
.rq-cell--toosmall       { background: #ecebe7;             color: #b3b8ba; }

/* the accent: the office's own pick, marked without moving anything (decision 21/22) */
.rq-cell--accent.rq-cell--exclusive { }   /* accent frame and tint withdrawn 2026-09-18 - kept as a hook */
.rq-cell--accent { }
.rq-cell--chosen { box-shadow: 0 0 0 3px var(--rq-accent); }
.rq-row--requested .rq-cell { transition: opacity .35s ease, filter .35s ease; }
.rq-row--dim .rq-cell { transition: opacity .35s ease, filter .35s ease; }

/* legend */
.rq-hidden { margin: .5rem .3rem 0; font-size: .8rem; color: var(--rq-ink-soft); }
.rq-hidden__item { margin-left: .35rem; }
.rq-hidden__item strong { font-weight: 400; color: var(--rq-ink); }
.rq-hidden__item em { font-style: normal; opacity: .75; }
.rq-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .4rem .3rem 0; margin: 0; font-size: .8rem; color: var(--rq-ink-soft); }
.rq-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.rq-legend em { color: var(--rq-ink-muted); font-style: normal; }
.rq-swatch { display: inline-block; width: .95rem; height: .95rem; border-radius: .3rem; }

/* the choice dialog: a click asks, the button acts */
.rq-scrim { position: fixed; inset: 0; background: rgba(31,45,50,.38); z-index: 50; animation: rq-fade .2s ease; }
.rq-dialog { position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(34rem, calc(100vw - 2rem));
    background: var(--rq-card); border-radius: 1.1rem; overflow: hidden; box-shadow: 0 18px 50px rgba(27,58,104,.28); animation: rq-pop .22s ease; }
@keyframes rq-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rq-pop { from { opacity: 0; transform: translate(-50%,-48%) scale(.98); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.rq-dialog__photo { height: 11rem; background: #e6e2da; }
.rq-dialog__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-dialog__body { padding: 1.1rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; }
.rq-dialog__title { margin: 0; font-weight: 300; font-size: 1.45rem; color: var(--rq-ink); }
.rq-dialog__when { margin: 0; color: var(--rq-ink-soft); font-size: 1rem; }
.rq-dialog__verdict { margin: .3rem 0 .2rem; display: flex; gap: .55rem; align-items: flex-start; font-size: 1rem; line-height: 1.45; padding: .6rem .8rem; border-radius: .7rem; }
.rq-dialog__verdict i { flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; margin-top: .45rem; }
.rq-dialog__verdict--ok { background: var(--rq-free-bg); color: var(--rq-free); }
.rq-dialog__verdict--no { background: var(--rq-busy-bg); color: var(--rq-busy); }
.rq-dialog__actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.rq-dialog__back { font: inherit; background: transparent; border: 0; color: var(--rq-accent); cursor: pointer; padding: .5rem .4rem; }
.rq-dialog__back:hover { text-decoration: underline; }
.rq-dialog__note { margin: .2rem 0 0; color: var(--rq-ink-muted); font-size: .85rem; }
.rq-book {
    font: inherit; font-size: 1.05rem; padding: .7rem 1.5rem; border-radius: 2rem; border: 0; cursor: pointer;
    background: linear-gradient(var(--rq-accent), var(--rq-accent-deep)); color: #fff; letter-spacing: .01em;
}
.rq-book:disabled { opacity: .45; cursor: not-allowed; }

/* ---- small screens: the grid keeps its truth, the chrome shrinks (Blok 7 does the real work) -------- */
@media (max-width: 720px) {
    .rq-top { padding-top: .8rem; }
    
    
    
    /* eight houses do not fit 390 px: keep every column readable and let the grid scroll sideways instead of
       squeezing names to one letter per line (Stefaan 2026-09-21 screenshot). Blok 7 designs the real phone view. */
    .rq-matrix { font-size: .82rem; table-layout: auto; width: max-content; min-width: 100%; }
    .rq-cell, .rq-head { min-width: 7.2rem; }
    .rq-head { width: 7.6rem; }
    .rq-head__photo { height: 4.2rem; }
    .rq-voice__main { font-size: 1.05rem; }
}

#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---- the three legs of a stay: arrival red, stay orange, departure green - the RM 2.0 colours
   (AvailabilityBoard.razor.css k-arrival/k-stay/k-departure), so office and visitor read the same picture
   (Stefaan 2026-09-18: "naar analogie met RM 2.0"). ---------------------------------------------- */
:root { --rq-leg-arrival: #c0392b; --rq-leg-stay: #e08a1e; --rq-leg-departure: #2e9e54; }

/* the period tile: one block per house for the whole stay */
.rq-row--stay .rq-cell--big {
    height: auto; min-height: 5.6rem; padding: .7rem .6rem .65rem; gap: .1rem;
}
.rq-cell--big .rq-cell__beds { font-size: 1.55rem; }
/* "76 bedden vrij" on ONE line (Stefaan 2026-09-18) */
.rq-cell__top { display: flex; align-items: baseline; gap: .35rem; }
.rq-cell__unit { font-size: .92rem; font-weight: 300; opacity: .9; }
.rq-cell__line { font-size: .78rem; line-height: 1.25; text-align: center; font-weight: 300; opacity: .92; margin-top: .3rem; }
.rq-cell--big .rq-cell__off { font-size: 1.4rem; line-height: 1; }

.rq-matrix__date--period { width: 10.4rem; padding-right: .6rem; }

/* the rows of alternative arrivals: a colour bar and tinted day in the date column */
.rq-matrix__date--arrival, .rq-matrix__date--stay, .rq-matrix__date--departure { border-left: 3px solid transparent; padding-left: .35rem !important; }
.rq-matrix__date--arrival { border-left-color: var(--rq-leg-arrival); }
.rq-matrix__date--arrival .rq-date__day, .rq-row--requested .rq-matrix__date--arrival { color: var(--rq-leg-arrival); }
.rq-matrix__date--arrival .rq-date__you { color: var(--rq-leg-arrival); }
.rq-matrix__date--stay { border-left-color: var(--rq-leg-stay); }
.rq-matrix__date--stay .rq-date__day { color: var(--rq-leg-stay); }
.rq-matrix__date--departure { border-left-color: var(--rq-leg-departure); }
.rq-matrix__date--departure .rq-date__day { color: var(--rq-leg-departure); }

/* the calendar draws the same three legs */
.rq-cal__day--arrival { background: var(--rq-leg-arrival); }
.rq-cal__day--arrival:hover { background: #a33224 !important; }
.rq-cal__day--stay { background: #fbe9d2; color: #8a5410; }
.rq-cal__day--departure { background: var(--rq-leg-departure); color: #fff; font-weight: 500; border-radius: 0 .6rem .6rem 0; }
.rq-cal__day--departure:hover { background: #257f43 !important; }


/* ---- the guide wave: the next field to answer breathes orange - swells, fades, swells (Stefaan 2026-09-19:
   "een oranje kleur die opkomt en weer weggaat in een golvende beweging"). One class, moved by the host from
   year to month to people to the calendar grid; the wave itself is the RM 2.0 stay-orange so it belongs to
   the same palette as the three legs. Reduced-motion users get a steady soft ring instead. ---------------- */
.rq-guide {
    position: relative; border-radius: 1rem;
    animation: rq-wave 2.1s ease-in-out infinite;
}
.rq-guide::before {
    content: ""; position: absolute; inset: -.3rem; border-radius: inherit; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(224,138,30,.38), rgba(224,138,30,0) 72%);   /* .22 -> .38: "iets zichtbaarder" (Stefaan 2026-09-19) */
    animation: rq-wave-fill 2.1s ease-in-out infinite;
}
.rq-guide--grid { border-radius: .8rem; }
.rq-guide--grid::before { inset: -.45rem; }
.rq-cal__group.rq-guide { padding: .1rem .2rem; margin: -.1rem -.2rem; }
.rq-field--people.rq-guide { padding: .2rem .4rem; margin: -.2rem -.4rem; }
/* the group size as the third item of the calendar navigator: label and field on one row, the house-rule note below */
.rq-cal__nav .rq-field--people { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.rq-cal__nav .rq-combo .rq-field__input--people { max-width: 4.4rem; padding: .22rem .5rem; font-size: .9rem; }
.rq-cal__nav .rq-field--people .rq-field__label { font-size: .62rem; margin: 0; }
.rq-cal__nav .rq-field--people .rq-field__note { flex-basis: 100%; margin-top: .25rem; }
.rq-cal__nav .rq-field--people.rq-guide { padding: .1rem .3rem; margin: -.1rem -.3rem; }
.rq-cal__nav { row-gap: .45rem; }

@keyframes rq-wave {
    0%   { box-shadow: 0 0 0 0 rgba(224,138,30,.75); }
    55%  { box-shadow: 0 0 0 .8rem rgba(224,138,30,0); }
    100% { box-shadow: 0 0 0 0 rgba(224,138,30,0); }
}
@keyframes rq-wave-fill {
    0%, 100% { opacity: .3; transform: scale(.98); }
    50%      { opacity: 1;   transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
    .rq-guide, .rq-guide::before { animation: none; }
    .rq-guide { box-shadow: 0 0 0 .2rem rgba(224,138,30,.45); }
}


/* ---- countries and places, grouped for the eye (Stefaan 2026-09-19: "een duidelijke verticale lijn tussen
   de landen, en boven de locaties en landen duidelijker gegroepeerd") ------------------------------------ */
/* the location band: a filled, rounded head over its columns with a firm underline in the country colour.
   Specificity note: `.rq-matrix thead th` paints paper on every head, so the band colour must outrank it. */
:root { --rq-be: #2f5fae; --rq-be-bg: #dfe8f7; --rq-fr: #7a4ea6; --rq-fr-bg: #ece2f6; }
.rq-matrix thead th.rq-place { text-align: center; padding: .35rem .8rem .4rem !important; border-radius: .7rem .7rem .25rem .25rem; }
.rq-matrix thead th.rq-place--be { background: var(--rq-be-bg); color: var(--rq-be-ink); border-bottom: 3px solid var(--rq-be); }
.rq-matrix thead th.rq-place--fr { background: var(--rq-fr-bg); color: var(--rq-fr-ink); border-bottom: 3px solid var(--rq-fr); }
.rq-place__name { font-size: 1.02rem; font-weight: 400; }
.rq-place__country { opacity: .95; }

/* The country band keeps its flat tint. A washed full-bleed flag was tried here first (2026-10-04,
   "achtergrondgewijs met een transparantielens") and taken out again a day later: stretched over four
   columns the three bands lose every flag proportion, and veiled enough for text to sit on them they lose
   their colour too - Stefaan read the result as three pastel blocks, not as Belgium. The emphasis he was
   after now comes from a crisp drawn flag at its own 3:2 (.rq-flag), which is legible at 17 px and works
   the same on a phone and on the office desktop. Keep the band flat; put the country in the flag. */
:root { --rq-be-ink: #1b3a68; --rq-fr-ink: #4a2a6a; }

/* the seams: one unbroken vertical line where the country changes, a faint one where only the place changes.
   Drawn as a pseudo-element that overshoots the row gap (border-spacing .28rem), so the line does not stipple. */
.rq-col--country, .rq-col--region { position: relative; }
.rq-col--country::before, .rq-col--region::before {
    content: ""; position: absolute; top: -.16rem; bottom: -.16rem; left: -.17rem; width: 2px; pointer-events: none; z-index: 2;
}
.rq-col--country::before { background: var(--rq-fr); opacity: .55; }
.rq-col--region::before { width: 1px; background: var(--rq-be); opacity: .28; }
.rq-matrix thead th.rq-col--country::before, .rq-matrix thead th.rq-col--region::before { top: -.1rem; bottom: -.16rem; }
.rq-matrix thead th.rq-place.rq-col--country::before, .rq-matrix thead th.rq-place.rq-col--region::before { display: none; }   /* the band itself is the border up there */

/* ---- the language menu (2026-09-19): four codes, the current one lit; a plain link each, because the
   language lives in the URL and switching is navigating (Texts.cs). --------------------------------------- */
.rq-lang { display: inline-flex; gap: .15rem; margin-right: 1rem; }
.rq-lang__item { color: rgba(255,255,255,.72); text-decoration: none; font-size: .72rem; letter-spacing: .08em; padding: .15rem .45rem; border-radius: 1rem; transition: background .12s, color .12s; }
.rq-lang__item:hover { color: #fff; background: rgba(255,255,255,.14); }
.rq-lang__item--on { color: #fff; background: rgba(255,255,255,.22); }

/* group size: one field, one number; the ▾ opens the 30-150 list that fills it; the house-rule note under it */
.rq-combo { position: relative; display: inline-flex; align-items: stretch; }
.rq-combo .rq-field__input--people { border-radius: .6rem 0 0 .6rem; border-right: 0; }
.rq-combo__toggle { font: inherit; font-size: .8rem; padding: 0 .55rem; border: 1px solid var(--rq-line); border-radius: 0 .6rem .6rem 0; background: var(--rq-card); color: var(--rq-ink-soft); cursor: pointer; }
.rq-combo__toggle:hover { background: var(--rq-accent-soft); color: var(--rq-accent-deep); }
.rq-combo__scrim { position: fixed; inset: 0; z-index: 20; }
.rq-combo__list { position: absolute; top: calc(100% + .25rem); left: 0; z-index: 21; margin: 0; padding: .3rem; list-style: none; width: 9.4rem; max-height: 13rem; overflow-y: auto; background: var(--rq-card); border: 1px solid var(--rq-line); border-radius: .7rem; box-shadow: 0 8px 24px rgba(31,45,50,.14); display: grid; grid-template-columns: repeat(3, 1fr); gap: .15rem; }
.rq-combo__item { text-align: center; padding: .3rem .2rem; border-radius: .45rem; cursor: pointer; font-size: .9rem; }
.rq-combo__item:hover { background: var(--rq-accent-soft); }
.rq-combo__item--on { background: var(--rq-accent); color: #fff; }
.rq-field__note { margin: .35rem 0 0; font-size: .78rem; line-height: 1.35; color: #8a5410; background: #fbe9d2; border-radius: .6rem; padding: .4rem .6rem; }
.rq-voice__sub--warn { color: #8a5410; }


/* ============================================================================================
   The request form (Blok 4, 2026-09-30) - two cards side by side on a browser, stacked on a
   phone. Same ink, same paper, same cobalt as the matrix: the visitor never leaves the page
   they were on, they only stop searching and start asking.
   ============================================================================================ */

.rq-loading { padding: 2rem 0; color: var(--rq-ink-soft); }

/* ---- what was chosen, carried over from the matrix; the only thing above the questions ---- */
.rq-choice {
    display: flex; align-items: center; gap: .9rem; margin: .8rem 0 1rem;
    background: var(--rq-card); border: 1px solid var(--rq-line); border-radius: 1rem; padding: .6rem .9rem;
}
.rq-choice__photo { width: 5.2rem; height: 3.4rem; flex: 0 0 auto; border-radius: .6rem; overflow: hidden; background: var(--rq-paper); }
.rq-choice__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-choice__body { min-width: 0; flex: 1 1 auto; }
.rq-choice__name { margin: 0; font-size: 1.05rem; color: var(--rq-accent-deep); }
.rq-choice__place { color: var(--rq-ink-muted); font-size: .85rem; }
.rq-choice__when { margin: .15rem 0 0; font-size: .88rem; color: var(--rq-ink-soft); display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.rq-choice__change { font-size: .85rem; white-space: nowrap; padding: .35rem .7rem; border-radius: 1rem; border: 1px solid var(--rq-accent-soft); background: #fff; }

/* the three legs, same colours as the calendar and the matrix (decision 29) */
.rq-leg { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.rq-leg--arrival { background: var(--rq-leg-arrival); }
.rq-leg--departure { background: var(--rq-leg-departure); }

/* ---- the questions ------------------------------------------------------------------------ */
.rq-req { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: start; }
/* One card instead of two: auto-fit would leave it hugging the left edge in a third of the page.
   The registration door has only the "who are you" card, so it gets a column of its own, centred. */
.rq-req--one { grid-template-columns: minmax(0, 42rem); justify-content: center; }
.rq-card { background: var(--rq-card); border: 1px solid var(--rq-line); border-radius: 1rem; padding: .9rem 1rem 1.1rem; margin: 0; min-width: 0; }
.rq-card__legend { font-size: .95rem; color: var(--rq-accent-deep); padding: 0 .35rem; }
.rq-card__hint { margin: .1rem 0 .9rem; font-size: .85rem; color: var(--rq-ink-soft); }

.rq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .8rem; }
.rq-field--wide { grid-column: 1 / -1; }
.rq-grid .rq-field__input { font-size: .98rem; padding: .4rem .65rem; }
.rq-field__area { resize: vertical; min-height: 3.4rem; font-family: inherit; }
.rq-field__label em { font-style: normal; color: var(--rq-accent); text-transform: none; letter-spacing: 0; }

/* the running total under the two counts - a fact, not a warning, so no orange */
.rq-req__sum { margin: -.2rem 0 .1rem; font-size: .82rem; color: var(--rq-ink-muted); }
.rq-req__ok { margin: -.2rem 0 .1rem; font-size: .84rem; color: var(--rq-free); background: var(--rq-free-bg); border-radius: .6rem; padding: .35rem .6rem; }
.rq-field__error { margin: .3rem 0; font-size: .88rem; color: var(--rq-busy); background: var(--rq-busy-bg); border-radius: .6rem; padding: .45rem .7rem; }

.rq-req__send { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .4rem 0 1.2rem; }
.rq-book--big { font-size: 1.05rem; padding: .7rem 1.6rem; }
.rq-req__note { margin: 0; font-size: .8rem; color: var(--rq-ink-muted); }

/* ---- the gate: six digits ----------------------------------------------------------------- */
.rq-code { background: var(--rq-card); border: 1px solid var(--rq-line); border-radius: 1rem; padding: 1.1rem; max-width: 26rem; }
.rq-code__input { font-size: 1.6rem; letter-spacing: .5rem; text-align: center; width: 9rem; }
.rq-code__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

/* ---- the receipt -------------------------------------------------------------------------- */
.rq-done { background: var(--rq-card); border: 1px solid var(--rq-line); border-radius: 1rem; padding: 1.1rem 1.2rem; max-width: 34rem; }
.rq-done__nr { margin: 0 0 .8rem; font-size: 1.15rem; color: var(--rq-ink-soft); }
.rq-done__nr strong { font-size: 1.6rem; color: var(--rq-accent-deep); letter-spacing: .02em; }
.rq-done__list { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: 0 0 .9rem; font-size: .92rem; }
.rq-done__list dt { color: var(--rq-ink-muted); font-size: .72rem; align-self: center; }
.rq-done__list dd { margin: 0; }
.rq-done__next { margin: 0 0 .9rem; color: var(--rq-ink-soft); font-size: .92rem; }
.rq-done__back { font-size: .9rem; }

@media (max-width: 640px) {
    .rq-grid { grid-template-columns: 1fr; }
    .rq-choice { flex-wrap: wrap; }
    .rq-choice__change { order: 3; }
}

/* ---- the intake in two parts (Stefaan 2026-09-30) -------------------------------------------------
   All twenty slots belong on the page, but not all at once. Part one is four fields; this button opens
   the other sixteen. It reads as a link-with-affordance rather than a second submit button, so it can
   never be mistaken for the one that sends the request. */
.rq-more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: .5rem .9rem;
    border: 1px solid var(--rq-line);
    border-radius: 999px;
    background: transparent;
    color: var(--rq-ink);
    font: inherit;
    cursor: pointer;
}

.rq-more:hover,
.rq-more:focus-visible {
    border-color: var(--rq-accent);
    background: var(--rq-accent-soft);
}

.rq-more__chev {
    display: inline-grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--rq-accent);
    color: #fff;
    font-size: .8rem;
    line-height: 1;
}

.rq-more__hint {
    margin: .75rem 0 0;
    color: var(--rq-ink-muted);
    font-size: .9rem;
}

/* A quiet rule-and-label, so the three groups of part two read as sections without shouting. */
.rq-more__head {
    margin: 1.4rem 0 .6rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--rq-line);
    color: var(--rq-ink-muted);
    font-size: .85rem;
    font-weight: 400;
}

/* ---- Blok 2: the building detail page ------------------------------------------------------------- */
.rq-bld__name { margin: .4rem 0 .2rem; font-size: 1.6rem; font-weight: 400; color: var(--rq-ink); }
.rq-bld__place { margin-left: .5rem; font-size: 1rem; color: var(--rq-ink-muted); }
.rq-bld__when { margin: 0 0 1rem; color: var(--rq-ink-soft); }

/* One row that scrolls sideways on a phone and wraps on a desk: the pictures are the originals
   (710 KB average), so they are never all decoded at once - see loading="lazy" in the markup. */
.rq-bld__gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 46%);
    gap: .6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .4rem;
}
.rq-bld__photo {
    width: 100%; height: 220px; object-fit: cover;
    border-radius: var(--rq-r, 1rem);
    scroll-snap-align: start;
    background: var(--rq-off-bg);
}
.rq-bld__nophoto { color: var(--rq-ink-muted); font-style: italic; }

.rq-bld__block { margin: 1.4rem 0; }
.rq-bld__h2 {
    margin: 0 0 .4rem; font-size: .85rem; font-weight: 400; color: var(--rq-ink-muted);
}
.rq-bld__rooms { margin: 0; font-size: 1.1rem; color: var(--rq-ink); }
.rq-bld__sum { margin: .25rem 0 0; color: var(--rq-ink-soft); }
/* A sentence, never a zero - a house with "0 rooms" reads as a house without beds. */
.rq-bld__soon { margin: 0; color: var(--rq-ink-muted); font-style: italic; }

.rq-bld__links { margin: 1rem 0; }
.rq-bld__sep { margin: 0 .4rem; color: var(--rq-ink-muted); }

.rq-bld__go {
    margin: 1.6rem 0 2rem; padding-top: 1rem;
    border-top: 1px solid var(--rq-line);
}
.rq-bld__verdict { margin: 0 0 .8rem; }
.rq-bld__verdict--ok { color: var(--rq-free); }
.rq-bld__verdict--no { color: var(--rq-ink-muted); }
.rq-bld__back { display: inline-block; margin-left: 1rem; }

/* The link out of the dialog to the whole house. A link, not a button: the button is the way on. */
.rq-dialog__more { display: inline-block; margin-top: .6rem; font-size: .95rem; }

@media (max-width: 640px) {
    .rq-bld__gallery { grid-auto-columns: 86%; }
    .rq-bld__photo { height: 180px; }
    .rq-bld__back { margin-left: 0; margin-top: .8rem; }
}

/* A warning under a field: the request is never refused, it is only commented on. Amber, not red -
   red would read as "you cannot send this", which is exactly what we do not mean. */
.rq-field__note--warn {
    color: var(--rq-shared);
    background: var(--rq-shared-bg);
    border-radius: .6rem;
    padding: .5rem .7rem;
    margin-top: .4rem;
}

/* ==================================================================================================
   DE POORT BIJ HET E-MAILADRES (Stefaan 2026-10-06). Een bekende klant bevestigt zijn mailbox hier,
   boven aan het blok, en niet achteraan na een heel ingevuld formulier. Het codeveld en de knop staan
   naast elkaar zodat de stap in één oogopslag te vatten is; het veld wacht uitgegrijsd tot er een code
   onderweg is.
   ================================================================================================== */
.rq-gate {
    border: 1px solid #cfe3d6; border-left: 4px solid #2f855a; background: #f3faf6;
    border-radius: 8px; padding: .7rem .9rem .8rem; margin: .2rem 0 .4rem;
}
.rq-gate__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .5rem 1rem; }
.rq-gate__field { margin: 0; }
.rq-gate .rq-code__actions { margin-top: 0; }
/* Het codeveld staat nooit meer uitgegrijsd: dicht = niet op het scherm. */
.rq-gate .rq-code__input { letter-spacing: .35rem; }
/* De uitweg wanneer de code niet aankomt - stil, maar altijd leesbaar. */
.rq-gate__help { margin: .5rem 0 0; font-size: .86rem; color: #5d6f74; }
/* Uitgegrijsd moet er ook uitgegrijsd UITZIEN. Gemeten op een schermafbeelding (06/10): met `disabled`
   alleen zagen de zeven adresvelden er precies zo uit als gewone velden - de bezoeker zag dus niet dat
   wij ze invullen, en probeerde te tikken. `:read-only` staat vóór `:disabled`, want een disabled input
   matcht allebei en de tweede moet winnen. */
.rq-field__input:read-only { background: #f7f9f9; color: #42555a; border-color: #e2e9e8; }
.rq-field__input:disabled {
    background: #eef2f1; color: #9aa7a2; border-color: #e2e9e8; cursor: not-allowed;
}

/* Framed on a public site (App.razor sets .rq-embedded): the host page carries the header, language switch and
   the way back. Our bar would duplicate that and its Frontdoor link leads to the staff sign-in. */
.rq-embedded .app-bar, .rq-embedded .rq-foot { display: none; }