/* Sloty — what every page shares (the tokens, the header) and the widget (the month, the day's grid, a
   resource's panel, the forms). admin.css and home.css add their own page. Every colour is a qry token, so an
   organisation's knobs (accent, corners, font, mode: lib/theme.php) restyle all of it, light and dark. */

:root {
    --qry-theme-accent: #2b5fa6;
    --qry-theme-chroma: .006;               /* greys barely tinted: the organisation's accent carries the colour */
    --qry-radius: 10px;
    /* « to confirm »: stripes of the warning tone — fainter in the dark, where they would shout over the text */
    --sl-hatch: repeating-linear-gradient(135deg, light-dark(color-mix(in oklab, var(--qry-warn) 26%, var(--qry-surface)),
        color-mix(in oklab, var(--qry-warn) 13%, var(--qry-surface))) 0 5px, var(--qry-surface) 5px 10px);
    --sl-device: light-dark(#16181d, #3a3f48);   /* a phone's frame: dark on a light page, lighter than a dark one */
}

.sl-page {
    max-width: 90rem; margin: 0 auto; padding: 1rem clamp(.75rem, 3vw, 2rem) 1.25rem;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 2.5rem;
}
@media (min-width: 52rem) {
    /* a page of its own: the month on the left, staying in sight while the day scrolls; the day takes the rest */
    .sl-page:has(> .sl-side) { grid-template: "head head" "side day" 1fr "foot foot" / 18rem minmax(0, 1fr); }
    .sl-head { grid-area: head; } .sl-side { grid-area: side; position: sticky; top: 1rem; align-self: start; }
    .sl-day { grid-area: day; } .sl-foot { grid-area: foot; }
    .sl-page > .qry-callout { grid-column: 1 / -1; }   /* an unknown address: only the message, in the free row */
}

/* ---- header: the organisation's name, the language, the account */
.sl-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; position: relative; padding-block: 1rem; }
.sl-title { display: flex; align-items: center; gap: .65rem; margin: 0 auto 0 0; padding-block: .1rem; font: 700 clamp(1.4rem, 3.2vw, 1.8rem)/1.15 var(--qry-font-display, var(--qry-font)); letter-spacing: -.015em; }
.sl-lang-menu > button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sl-lang-menu > button:not([aria-current]) .qry-icon { visibility: hidden; }
.sl-lang-menu > [aria-current] { font-weight: 600; }
#lang { gap: .2rem; }
#lang-code { font-size: .8rem; font-weight: 600; letter-spacing: .04em; }
#lang .qry-icon { inline-size: .9em; block-size: .9em; opacity: .7; }

/* on a phone the day comes first: the month is folded behind the calendar button of the day's title */
.sl-month-toggle { display: none; }
@media (max-width: 51.99rem) {
    .sl-month-toggle { display: inline-flex; }
    .sl-side:not(.is-open) { display: none; }
}

/* ---- the side: the month, its legend, the organisation's text */
.sl-side { display: grid; gap: .9rem; align-content: start; }
/* the month, a widget of its own: its bounds seen, apart from the page and the day beside it */
.sl-month-card { display: grid; gap: .8rem; padding: .9rem .8rem .85rem; border: 1px solid var(--qry-line); border-radius: var(--qry-radius);
    background: var(--qry-surface); box-shadow: var(--qry-shadow); }
.sl-month-card .sl-legend { padding-top: .7rem; border-top: 1px solid var(--qry-line); }
/* the month: each day to come a soft tile (one can choose it, a finger too); the days gone by bare and quieter */
.qry-calendar-grid td { padding: 3px; }
.qry-calendar-grid [data-day] { background: color-mix(in oklab, var(--qry-text) 4%, transparent); }
.qry-calendar-grid [data-day]:hover { background: var(--qry-tint); }
.qry-calendar-grid [data-day].is-past:not([aria-pressed="true"]) { background: transparent; color: var(--qry-text-muted); font-weight: 400; }
.qry-calendar-grid [data-day][aria-pressed="true"] { background: var(--qry-accent); }
.sl-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; margin: 0; font-size: .8rem; color: var(--qry-text-muted); }
.sl-key-pending::before {
    content: ''; display: inline-block; width: 1.1em; height: .7em; margin-right: .4em; vertical-align: -.05em;
    border-radius: 3px; background: var(--sl-hatch); box-shadow: inset 0 0 0 1px var(--qry-warn);
}
/* the organisation's own words, under its name: its lines as written */
.sl-intro { flex-basis: 100%; padding-inline-end: max(0px, 100% - 72ch); margin: 0; white-space: pre-line; overflow-wrap: anywhere;
    font-size: .95rem; line-height: 1.6; color: var(--qry-text-muted); }
/* a box with a bar on its inner edge — round outside with the box, straight inside: --sl-bar its colour,
   --sl-tint how much of it tints the box (the platform's jobs, the home page's agenda and demo) */
.sl-barred { --sl-bar: var(--qry-accent); --sl-tint: 8%;
    background: linear-gradient(var(--sl-bar) 0 0) left / 3px 100% no-repeat, color-mix(in oklab, var(--sl-bar) var(--sl-tint), var(--qry-surface)); }

/* ---- the day: its title and arrows, then the grid */
.sl-day { min-width: 0; }
.sl-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.sl-day-head h2 { margin: 0 auto 0 0; font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; }
.sl-day-nav { display: flex; gap: .15rem; }
.sl-day-hint { margin: .6rem 0 0; font-size: .85rem; color: var(--qry-text-muted); }
/* a sentence that acts: a link's look on a button */
.sl-link { padding: 0; border: 0; background: none; font: inherit; color: var(--qry-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* the grid: one row per resource, one column per half hour; the names stay while the hours scroll */
/* the day's half hours share the width (a whole opening day at a glance on a screen); below their
   least width — a phone — the grid scrolls, the names staying at the left */
.sl-grid-wrap { --sl-col: 1.1rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; border: 1px solid var(--qry-line); border-radius: var(--qry-radius); background: var(--qry-surface); box-shadow: var(--qry-shadow); }
.sl-grid {
    --sl-names: clamp(7.5rem, 34vw, 11rem);   /* a phone keeps whole words: « polyvalente », not « polyva-lente » */
    /* the width given, never the content's (a long holder would widen every column); at least the
       half hours' least width, beyond which the wrap scrolls */
    position: relative; display: grid; width: 100%; min-width: calc(var(--sl-names) + var(--sl-cols) * var(--sl-col)); user-select: none;
    grid-template-columns: var(--sl-names) repeat(var(--sl-cols), minmax(var(--sl-col), 1fr)); grid-template-rows: var(--sl-rows);
}
.sl-grid > * { min-width: 0; }
.sl-corner, .sl-hour { grid-row: 1; background: var(--qry-surface-grey); border-bottom: 1px solid var(--qry-line); }
.sl-corner { position: sticky; left: 0; z-index: 3; grid-column: 1; border-right: 1px solid var(--qry-line); }
/* the names' column, opaque from top to bottom: the now-line, scrolled under it, never shows through a seam */
.sl-names-ground { position: sticky; left: 0; z-index: 2; grid-column: 1; grid-row: 1 / -1; background: var(--qry-surface); pointer-events: none; }
.sl-hour { padding: .45rem 0 0 .3rem; border-left: 1px solid var(--qry-line); font-size: .72rem; font-weight: 600; color: var(--qry-text-muted); font-variant-numeric: tabular-nums; }
.sl-band { grid-column: 1 / -1; display: flex; border-bottom: 1px solid var(--qry-line); }
/* the group's name holds the names' column, opaque, over the now-line (which would cross it there) */
.sl-band span { position: sticky; left: 0; z-index: 2; box-sizing: border-box; inline-size: var(--sl-names); display: flex; align-items: end;
    margin-block-end: -1px; padding: 0 .75rem .25rem; border-bottom: 1px solid var(--qry-line); background: var(--qry-surface); font-size: .78rem; font-weight: 600; color: var(--qry-text-muted); }
.sl-name {
    position: sticky; left: 0; z-index: 2; grid-column: 1; padding: .35rem .75rem;
    border: 0; border-right: 1px solid var(--qry-line); border-bottom: 1px solid var(--qry-line); background: var(--qry-surface);
    font: 600 .9rem/1.2 var(--qry-font); text-align: left; color: var(--qry-text); hyphens: manual; overflow-wrap: break-word; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: .25rem;
}
@media (max-width: 30rem) { .sl-name { padding-inline: .6rem .4rem; font-size: .84rem; } }
.sl-name .qry-icon { flex: none; inline-size: .95em; block-size: .95em; color: var(--qry-text-subtle); }
@media (hover: hover) { .sl-name:hover .qry-icon { color: var(--qry-accent); } }
@media (hover: hover) { .sl-name:hover { color: var(--qry-accent); text-decoration: underline; text-underline-offset: 3px; } }
.sl-cell { padding: 0; border: 0; border-bottom: 1px solid var(--qry-line); border-left: 1px solid color-mix(in oklab, var(--qry-line) 40%, transparent); background: none; }
.sl-cell.is-hour { border-left-color: var(--qry-line); }
.sl-cell.is-past { background: color-mix(in oklab, var(--qry-line) 35%, transparent); }
/* outside the resource's hours: shut, a quiet hatch (the past is a flat grey) */
.sl-cell.is-shut { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--qry-line) 55%, transparent) 0 1px, transparent 1px 6px); }
/* a resource of several places: each stretch where some are taken, a tint over its half hours saying how many are
   left (none: full) — the half hours under it stay to pick */
.sl-places {
    z-index: 1; display: flex; align-items: center; margin: .35rem 2px; padding: 0 .4rem; overflow: hidden; pointer-events: none;
    border-radius: var(--qry-radius-sm); background: color-mix(in oklab, var(--qry-accent) 14%, transparent);
    font: 600 .72rem/1 var(--qry-font); color: var(--qry-text-muted); white-space: nowrap;
}
.sl-places span { overflow: hidden; text-overflow: ellipsis; }
.sl-places.is-full { background: color-mix(in oklab, var(--qry-danger) 14%, transparent); color: var(--qry-danger); }
.sl-capacity { display: block; font-size: .72rem; font-weight: 400; color: var(--qry-text-muted); }
/* a resource booked by slots: each slot a button over its hours, with the places it has left */
.sl-slot {
    z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: .3rem 2px; padding: .1rem .2rem;
    border: 1px solid var(--qry-accent); border-radius: var(--qry-radius-sm); background: color-mix(in oklab, var(--qry-accent) 8%, var(--qry-surface));
    font: 400 .78rem/1 var(--qry-font); color: var(--qry-text); white-space: nowrap; overflow: hidden;
}
.sl-slot small { font-size: .68rem; color: var(--qry-text-muted); }
/* a narrow slot (an hour on a fine grid): its time alone, smaller — what it has left is in its label */
.sl-grid .sl-slot { container-type: inline-size; }
@container (max-width: 2.9rem) { .sl-slot b { font-size: .66rem; } .sl-slot small { display: none; } }
button.sl-slot { cursor: pointer; }
@media (hover: hover) { button.sl-slot:not(.is-picked):hover { background: var(--qry-tint); } }
.sl-slot.is-picked { background: var(--qry-accent); color: var(--qry-on-accent); }
.sl-slot.is-picked small { color: inherit; }
.sl-slot.is-full { border-color: var(--qry-line); background: var(--qry-surface-grey); color: var(--qry-text-muted); }
/* a free cell one may pick: a + on hover and on focus */
button.sl-cell { position: relative; cursor: pointer; }
button.sl-cell:not(.is-picked, .sl-slot):focus-visible::after {
    content: '+'; position: absolute; inset: 0; display: grid; place-items: center;
    font: 600 1rem/1 var(--qry-font); color: var(--qry-accent);
}
@media (hover: hover) {
    button.sl-cell:not(.is-picked):hover { background: var(--qry-tint); }
    button.sl-cell:not(.is-picked, .sl-slot):hover::after {
        content: '+'; position: absolute; inset: 0; display: grid; place-items: center; font: 600 1rem/1 var(--qry-font); color: var(--qry-accent);
    }
}
/* a finger needs room: wider columns where the pointer is coarse */
@media (pointer: coarse) { .sl-grid-wrap { --sl-col: 2.75rem; } }
.sl-block, .sl-pick { z-index: 1; margin: .35rem 2px; border-radius: var(--qry-radius-sm); }
.sl-block {
    padding: 0 .45rem; border: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left;
    font: 600 .78rem/1 var(--qry-font); cursor: pointer;
    /* taken: a soft fill in the accent — one's own (signed in) the full accent, set apart at a glance */
    position: relative; color: var(--qry-text); background: color-mix(in oklab, var(--qry-accent) 22%, var(--qry-surface));
}
/* its accent bar: a ::before the rounded box clips (round outside, straight inside) */
.sl-block:not(.is-pending, .is-mine)::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--qry-accent); }
.sl-block.is-mine { color: var(--qry-on-accent); background: var(--qry-accent); }
.sl-block-time { font-weight: 400; opacity: .8; }
@media (hover: hover) { .sl-block:hover { background: color-mix(in oklab, var(--qry-accent) 32%, var(--qry-surface)); } .sl-block.is-mine:hover { background: var(--qry-accent-strong); } }
.sl-block.is-pending { color: var(--qry-text); background: var(--sl-hatch); box-shadow: inset 0 0 0 1px var(--qry-warn); }
/* « what is free? »: the range on each row free all along it, to book in one click; the others step back */
.sl-day-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .6rem; }
.sl-day-tools > .qry-input { width: auto; min-height: var(--qry-control-sm); padding-block: 0; font-size: .85rem; }
/* the views: two buttons joined, the one shown pressed */
.sl-views { display: inline-flex; padding: 2px; border: 1px solid var(--qry-line); border-radius: var(--qry-radius); }
.sl-views .qry-btn { border-radius: calc(var(--qry-radius) - 3px); }
.sl-views .qry-btn[aria-pressed="true"] { background: var(--qry-accent); color: var(--qry-on-accent); }
.sl-find { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; font-size: .85rem; color: var(--qry-text-muted); }
.sl-find .qry-input { width: auto; min-height: var(--qry-control-sm); padding-block: 0; font-size: .85rem; }
.sl-find-result { font-weight: 600; color: var(--qry-text); }
.sl-fit {
    z-index: 1; margin: .35rem 2px; padding: 0 .45rem; border: 2px dashed var(--qry-accent); border-radius: var(--qry-radius-sm);
    background: color-mix(in oklab, var(--qry-accent) 8%, var(--qry-surface)); color: var(--qry-accent-strong);
    font: 600 .78rem/1 var(--qry-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
@media (hover: hover) { .sl-fit:hover { border-style: solid; background: var(--qry-tint); } }
.sl-unfit { z-index: 1; pointer-events: none; background: color-mix(in oklab, var(--qry-surface) 65%, transparent); }
.sl-name.is-unfit { color: var(--qry-text-muted); }
.sl-pick { pointer-events: none; background: var(--qry-tint); box-shadow: inset 0 0 0 2px var(--qry-accent); }
/* a resource closed that day: a grey hatch over its row, its reason kept in sight while the hours scroll */
.sl-closed {
    display: flex; align-items: center; margin: .35rem 2px; border-radius: var(--qry-radius-sm); pointer-events: none;
    background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--qry-line) 70%, var(--qry-surface)) 0 6px, var(--qry-surface) 6px 12px);
}
.sl-closed span { position: sticky; left: clamp(6.5rem, 26vw, 11rem); padding: 0 .6rem; font: 600 .78rem/1.2 var(--qry-font); color: var(--qry-text-muted); }
/* today: the present time, a line across the rows with a dot on the hours' ruler */
.sl-now { position: relative; z-index: 1; grid-row: 1 / -1; grid-column: 2 / -1; pointer-events: none; }   /* over the hours; the line at --at of them */
.sl-now::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 100%); width: 2px; translate: -1px 0; background: var(--qry-danger); }
.sl-now::before { content: ''; position: absolute; top: calc(1.75rem - 4px); left: calc(var(--at) * 100% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--qry-danger); }
.sl-empty { margin: 0; padding: 1.5rem; text-align: center; color: var(--qry-text-muted); }
/* what is picked, and the way to book it: stays in sight under the grid */
.sl-pickbar {
    position: sticky; bottom: .75rem; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-top: .6rem; padding: .55rem .6rem .55rem .9rem; border: 1px solid var(--qry-line); border-radius: var(--qry-radius);
    background: var(--qry-surface); box-shadow: var(--qry-shadow-lg);
}
.sl-pickbar > span { flex: 1 1 10rem; }
.sl-nowrap { white-space: nowrap; }

.sl-text { white-space: pre-line; }
.sl-note { white-space: pre-line; color: var(--qry-text-muted); font-size: .9rem; }
/* a box that scrolls fades on the side that has more (common.js fadeEdges) */
.sl-fade-y { mask-image: linear-gradient(to bottom, transparent, #000 var(--sl-fade-before, 0px), #000 calc(100% - var(--sl-fade-after, 0px)), transparent); }
.sl-fade-x { mask-image: linear-gradient(to right, transparent, #000 var(--sl-fade-before, 0px), #000 calc(100% - var(--sl-fade-after, 0px)), transparent); }
.sl-fade-y.is-more-before, .sl-fade-x.is-more-before { --sl-fade-before: 2rem; }
.sl-fade-y.is-more-after, .sl-fade-x.is-more-after { --sl-fade-after: 2.5rem; }
/* in a stack, its gap spaces the paragraphs: their own margin (qry-ui's p) would double it */
.qry-stack > p { margin-block: 0; }
.sl-foot { padding-top: .5rem; text-align: center; font-size: .78rem; }
.sl-foot a { color: var(--qry-text-subtle); text-decoration: none; }
.sl-foot a:hover { color: var(--qry-text-muted); text-decoration: underline; }

/* ---- a resource's panel and the forms */
.sl-panel { width: min(36rem, calc(100vw - 1.5rem)); }
.sl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sl-panel-head h2 { margin: 0; font-size: 1.15rem; }
.sl-panel h3 { margin: .25rem 0 0; font-size: .95rem; }
/* a resource's photos: the first across the panel, the others as small squares under it */
.sl-photos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.sl-photos a:first-child { grid-column: 1 / -1; }
.sl-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--qry-radius-sm); }
.sl-photos a:first-child img { aspect-ratio: 16 / 9; }
/* a resource's facts in its panel: its hours, its rules */
.sl-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem; margin: 0; font-size: .92rem; }
.sl-facts dt { font-weight: 600; }
.sl-facts dd { margin: 0; color: var(--qry-text-muted); }
.sl-bookings { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
/* a booking in a list: its lines on the left, its pencil on the right of the first one */
.sl-bookings li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .5rem; padding: .6rem 0; border-top: 1px solid var(--qry-line); }
.sl-bookings li > :not([data-action]) { grid-column: 1; }
.sl-bookings li > [data-action] { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin: -.3rem -.3rem 0 0; }
.sl-when { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }

/* a form in a dialog (forms.js askForm): the title and the buttons stay, the form scrolls between them;
   a long one (.is-wide) sets its parts side by side where there is room; « Supprimer » on the left */
.qry-dialog.sl-form-dialog { width: min(calc(100vw - 1.5rem), 32rem); }
.qry-dialog.sl-form-dialog.is-wide { width: min(calc(100vw - 1.5rem), 50rem); }
.qry-dialog.sl-form-dialog[open] { display: flex; flex-direction: column; max-height: min(58rem, calc(100dvh - 1.5rem)); padding: 0; overflow: hidden; }
.sl-form-dialog .qry-dialog-title { margin: 0; padding: 1.1rem 1.4rem 1rem; border-bottom: 1px solid var(--qry-line); }
.sl-form-dialog .qry-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.15rem 1.4rem 1.3rem; }
.sl-form-dialog .qry-dialog-error { margin: 0 1.4rem .8rem; }
.sl-form-dialog .qry-dialog-error:empty { display: none; }
.sl-form-dialog .qry-dialog-actions { margin: 0; padding: .8rem 1.4rem; border-top: 1px solid var(--qry-line); background: var(--qry-surface-grey); }
.sl-form-dialog .sl-remove { margin-inline-end: auto; }
@media (max-width: 36rem) {
    .sl-form-dialog .qry-dialog-title, .sl-form-dialog .qry-dialog-body, .sl-form-dialog .qry-dialog-actions { padding-inline: 1rem; }
    .sl-form-dialog .sl-remove { flex-basis: 100%; max-width: none; order: 1; margin: 0; }   /* under the two others */
}
.sl-form { display: grid; gap: .85rem; align-content: start; }
.is-wide .sl-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem 1.75rem; }
.sl-part { display: grid; gap: .85rem; align-content: start; min-width: 0; }
.sl-part > h3 { margin: 0; padding-bottom: .35rem; border-bottom: 1px solid var(--qry-line); font-size: .76rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--qry-text-muted); }
.sl-part.is-whole { grid-column: 1 / -1; }
.sl-check { display: flex; gap: .5rem; align-items: center; }
.sl-pair > * { flex: 1 1 8rem; }
/* a day's name as a heading: « lundi » → « Lundi » (the locale writes it small) */
:is(.sl-day-head h2, .sl-panel h3, .sl-day-label, .sl-paper-head h2, .sl-paper-weekday, .sl-table .sl-group th)::first-letter { text-transform: uppercase; }
.sl-hint { margin: -.5rem 0 0; font-size: .8rem; }

/* shared pieces: icon buttons, places and answers as chips, a form's checkboxes */
.qry-btn:has(> .qry-icon) { gap: .4rem; }
.sl-chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: .35rem; vertical-align: middle; }
.sl-checks { display: grid; gap: .35rem; margin: 0; padding: .6rem .75rem; border: 1px solid var(--qry-line); border-radius: var(--qry-radius-sm); }
.sl-checks legend { padding: 0 .3rem; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* asking for an account: the link under the sign-in, a field only robots fill */
.sl-ask { margin: .25rem 0 0; font-size: .9rem; color: var(--qry-text-muted); }
.sl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* a select's arrow, drawn: the browser's own sits against the edge (Windows); this one keeps its room and
   follows the text's colour (two gradients, no image) */
select.qry-input, .qry-field select {
    appearance: none; padding-inline-end: 2.2rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.05rem center, right .75rem center; background-size: .32rem .32rem; background-repeat: no-repeat;
}
select.qry-input[multiple], .qry-field select[multiple] { background-image: none; padding-inline-end: .75rem; }

/* every page of an organisation (its calendar, its administration, the platform) on a soft grey ground, its
   header a white bar across the window, what is a widget white on top: the month, the day, « À savoir »,
   the boxes. The bar: a shadow spread far and clipped to the header's height — it paints the width, adds none. */
body:has(> .sl-page) { --sl-ground: light-dark(color-mix(in oklab, var(--qry-surface-grey), var(--qry-text) 2.5%), var(--qry-bg)); background: var(--sl-ground); }
.sl-page > .sl-head::before, .sl-page > .sl-head::after { content: ''; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.sl-page > .sl-head::before { top: -2rem; bottom: 0; background: var(--qry-surface); box-shadow: 0 0 0 100vmax var(--qry-surface); clip-path: inset(0 -100vmax); }
.sl-page > .sl-head::after { bottom: 0; block-size: 1px; background: var(--qry-line); box-shadow: 0 0 0 100vmax var(--qry-line); clip-path: inset(0 -100vmax); }
@media print { .sl-page > .sl-head::before, .sl-page > .sl-head::after { display: none; } }

/* where nothing may be booked, a tap says why */
[data-off] { cursor: help; }
/* the grid's key, under it: free, not bookable (past, notice), closed */
.sl-grid-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .5rem 0 0; font-size: .78rem; color: var(--qry-text-muted); }
.sl-grid-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.sl-grid-legend i { inline-size: 1.1rem; block-size: .8rem; border: 1px solid var(--qry-line); border-radius: 3px; }
.sl-grid-legend .is-free { background: var(--qry-surface); }
.sl-grid-legend .is-past { background: color-mix(in oklab, var(--qry-line) 35%, var(--qry-surface)); }
.sl-grid-legend .is-shut { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--qry-line) 55%, transparent) 0 1px, transparent 1px 4px); }
#grid.is-list ~ .sl-grid-legend { display: none; }
/* a phone, every resource by slots: a list of times per resource */
.sl-grid-wrap.is-list { overflow: visible; padding: .25rem .75rem .75rem; }
.sl-slotlist { display: grid; gap: .25rem; }
.sl-slotlist-row { display: grid; gap: .45rem; padding-block: .5rem; border-bottom: 1px solid var(--qry-line); }
.sl-slotlist-row:last-child { border-bottom: 0; }
.sl-slotlist-row .sl-name { position: static; padding: .25rem 0; border: 0; font-size: 1rem; }
.sl-slotlist-row p { margin: 0; font-size: .85rem; }
.sl-chiprow { display: flex; flex-wrap: wrap; gap: .4rem; }
.sl-chiprow .sl-slot { margin: 0; min-inline-size: 4.25rem; min-block-size: 2.75rem; padding: .25rem .5rem; font-size: .9rem; }
/* the form: a slot picked, shown as it is; the total, live */
.sl-summary { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .6rem .8rem; border-radius: var(--qry-radius-sm); }
.sl-total { margin: 0; text-align: end; font-size: 1rem; }
.sl-total:empty { display: none; }
/* the organisation's own face: its logo before its name, a way back to its site */
.sl-logo { flex: none; block-size: 2.4rem; max-inline-size: 7rem; object-fit: contain; }
.sl-site { margin-block-start: -.25rem; font-size: .9rem; }
.sl-site a { display: inline-flex; align-items: center; gap: .3rem; }
/* a row booked by days: the whole day, one gesture */
.sl-wholeday { display: flex; align-items: center; justify-content: center; margin: .35rem 2px; border: 1px dashed var(--qry-line);
    border-radius: var(--qry-radius-sm); font-size: .8rem; color: var(--qry-text-muted); }
@media (hover: hover) { .sl-wholeday:hover { color: var(--qry-accent); border-color: var(--qry-accent); } }
.sl-wholeday.is-picked { background: var(--qry-accent); border-color: var(--qry-accent); color: var(--qry-on-accent); }
/* a slot not bookable: past or not yet (its notice) — quiet, as the past is; full — said, and struck */
.sl-slot.is-off { border: 1px dashed var(--qry-line); background: color-mix(in oklab, var(--qry-line) 35%, var(--qry-surface)); color: var(--qry-text-muted); }
.sl-slot.is-full b { text-decoration: line-through; }
/* a whole day's label stays in view while the hours scroll */
.sl-wholeday > span { position: sticky; inset-inline-start: calc(var(--sl-names, 9rem) + .5rem); }
/* a resource booked with an account only, said under its name to whoever is signed out */
.sl-accounts { display: block; font-size: .72rem; font-weight: 400; color: var(--qry-text-muted); }

/* motion, a little and quiet (qry-ui.css stills it all under reduced motion): the bar of a pick rises into place,
   the present's dot breathes, another day slides in (daygrid.js, from the side it comes from) */
.sl-pickbar { transition: opacity var(--qry-speed) var(--qry-ease), translate var(--qry-speed) var(--qry-ease), display var(--qry-speed) allow-discrete; }
@starting-style { .sl-pickbar { opacity: 0; translate: 0 10px; } }
.sl-now::before { animation: sl-breathe 2.8s ease-out infinite; }
@keyframes sl-breathe {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--qry-danger) 45%, transparent); }
    70%, 100% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--qry-danger) 0%, transparent); }
}

/* only where motion says something: a button gives under the finger (it was pressed), a booking made ticks
   itself (done) — nothing for decoration */
.qry-btn { transition: background var(--qry-speed), border-color var(--qry-speed), color var(--qry-speed), scale var(--qry-speed-fast) var(--qry-ease); }
.qry-btn:active:not(:disabled) { scale: .97; }
/* a booking made: its mark pops in, its tick draws itself (booking.js booked) */
.sl-done { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
    animation: qry-pop var(--qry-speed-slow) var(--qry-ease) both; }
.sl-done svg { inline-size: 1.4rem; block-size: 1.4rem; }
.sl-done.ok svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: sl-tick .45s var(--qry-ease) .2s forwards; }
@keyframes sl-tick { to { stroke-dashoffset: 0; } }