/* ==========================================================================
   md-public.css -- Material 3 look for the pages without the navigation rail
   Sign in, sign up, password pages, e-mail check, plans, the guest page of a
   reservation and the first set-up. Loaded after md-pages.css.
   The booking widget is left out on purpose: it is embedded in the
   restaurants' own sites and takes its colours from its URL.
   Created: 2026-09-20
   ========================================================================== */

html:has(body.md-ui.md-public) {
    background: var(--md-surface) !important;
}
body.md-ui.md-public {
    background: transparent !important;
    color: var(--md-on-surface);
    font-family: var(--md-font-sans);
}

/* Two soft tonal discs behind the card, as on the mockups. */
body.md-ui.md-public::before,
body.md-ui.md-public::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
body.md-ui.md-public::before {
    left: -220px;
    top: -260px;
    width: 760px;
    height: 760px;
    background: var(--md-primary-container);
    opacity: .35;
}
body.md-ui.md-public::after {
    right: -180px;
    bottom: -320px;
    width: 700px;
    height: 700px;
    background: var(--md-tertiary-container);
    opacity: .35;
}

/* ---------- Logos with the rounded die ----------
   On a dark ground the gold has its sheen (the -or files, 01.10.2026); on
   ivory the logo stays flat ink, except on the sign-in pages, always at
   night. */
body.md-ui .auth-brand-logo {
    content: url("../img/logo/md/logo-dark-01-r-or.svg");
}
[data-theme="ivory"] body.md-ui:not(:has(.auth-page)) .auth-brand-logo {
    content: url("../img/logo/md/logo-ivory-01-r.svg");
}
body.md-ui .mr-logo-dark {
    content: url("../img/logo/md/logo-dark-02-r-or.svg");
}

/* ---------- The night of the brand (01.10.2026) ----------
   Greg, after his wallpaper: whatever the theme (the dark values of the
   tokens win on these pages, md-tokens.css), the sign-in and the account
   pages (every page with .auth-page, so the tablet lock screen of
   login.html too) sit on near-black, with a warm glow behind the logo and a
   brushed texture fine enough to be felt rather than seen. The tonal discs
   go; the card becomes a dark glass with a gold hairline, so the glow shows
   through it; the plain line under the logo becomes a short gold rule that
   fades out at both ends. Text and fields keep the colours of the dark
   theme, whose contrasts this ground only deepens. */
html:has(body.md-ui.md-public .auth-page) {
    background:
        radial-gradient(ellipse 900px 520px at 50% 21%, var(--md-brand-glow), transparent 70%),
        var(--md-brand-texture),
        var(--md-brand-vignette),
        var(--md-brand-night) !important;
    background-attachment: fixed !important;
}
body.md-ui.md-public:has(.auth-page)::before,
body.md-ui.md-public:has(.auth-page)::after {
    display: none;
}
html body.md-ui.md-public .auth-card {
    background: var(--md-brand-glass) !important;
    box-shadow: inset 0 0 0 1px var(--md-brand-hairline), var(--md-brand-shadow) !important;
}
html body.md-ui.md-public .auth-divider {
    width: 160px;
    height: 1px;
    margin: 22px auto !important;
    border: 0 !important;
    background: var(--md-brand-rule-line) !important;
}
html body.md-ui.md-public .auth-lang-bar {
    border-top-color: var(--md-brand-hairline) !important;
}
/* One light sweeps across the logo when the page opens, then stops (Greg,
   01.10.2026). A band of light masked by the logo itself, so it lights the
   gold and nothing around it; laid over the picture at its exact size (the
   brand becomes a centred flex box as tall as the logo). Once per page
   load; nothing at all when the reader asks for less motion. */
body.md-ui.md-public .auth-brand {
    position: relative;
    display: flex;
    justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
    body.md-ui.md-public .auth-brand::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        aspect-ratio: 716 / 225;
        transform: translateX(-50%);
        pointer-events: none;
        -webkit-mask: url("../img/logo/md/logo-dark-01-r-or.svg") 0 0 / 100% 100% no-repeat;
        mask: url("../img/logo/md/logo-dark-01-r-or.svg") 0 0 / 100% 100% no-repeat;
        background: linear-gradient(105deg, transparent 0 40%, var(--md-logo-glint) 50%, transparent 60% 100%) 0 0 / 300% 100% no-repeat;
        background-position: 100% 0;
        animation: auth-logo-sweep 1.8s cubic-bezier(.45, .05, .35, 1) .7s 1 both;
    }
}
@keyframes auth-logo-sweep {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}
body.md-ui .mr-logo-ivory {
    content: url("../img/logo/md/logo-ivory-02-r.svg");
}

/* ---------- Authentication card ---------- */
body.md-ui .auth-card {
    background: var(--md-surface-container-lowest) !important;
    color: var(--md-on-surface) !important;
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: var(--md-elevation-1) !important;
    backdrop-filter: none !important;
}
body.md-ui .auth-divider {
    background: var(--md-outline-variant) !important;
    border-color: var(--md-outline-variant) !important;
}
body.md-ui .auth-heading {
    font-family: var(--md-font-sans) !important;
    font-size: 24px !important;
    line-height: 32px;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--md-on-surface) !important;
}
body.md-ui .auth-sub,
body.md-ui .auth-brand-sub {
    color: var(--md-on-surface-variant) !important;
    font-family: var(--md-font-sans);
}
body.md-ui .auth-info {
    background: var(--md-free-container) !important;
    color: var(--md-on-free-container) !important;
    border: 0 !important;
    border-radius: 12px !important;
}
body.md-ui .auth-field label {
    font-family: var(--md-font-sans);
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    color: var(--md-on-surface-variant) !important;
}
body.md-ui .auth-field input {
    min-height: 52px;
    padding: 0 16px !important;
    border-radius: 4px !important;
    border: 1px solid var(--md-outline) !important;
    background: transparent !important;
    color: var(--md-on-surface) !important;
    font-family: var(--md-font-sans);
    font-size: 16px !important;
    box-shadow: none !important;
}
body.md-ui .auth-field input:focus {
    outline: none !important;
    border: 2px solid var(--md-primary) !important;
    padding: 0 15px !important;
}
body.md-ui .auth-field input::placeholder {
    color: var(--md-on-surface-variant) !important;
    opacity: .7;
}
/* The terms box of the sign-up (27.09.2026, Greg: "probleme d'affichage").
   The text-field rules above, and the full width of auth.css, turned the
   checkbox into a 52 px square in the middle of the line, and pushed the
   sentence to the far right. A checkbox is a checkbox again. */
body.md-ui .auth-field.auth-terms label {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.45;
    color: var(--md-on-surface) !important;
}
body.md-ui .auth-field input[type="checkbox"],
body.md-ui .auth-field input[type="checkbox"]:focus {
    flex: none;
    width: 18px !important;
    min-width: 18px;
    height: 18px !important;
    min-height: 0;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 2px !important;
    accent-color: var(--md-primary);
}
body.md-ui .auth-field input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--md-primary) !important;
    outline-offset: 2px;
}
body.md-ui .auth-submit {
    height: 48px !important;
    border-radius: 24px !important;
    border: 0 !important;
    background: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
    font-family: var(--md-font-sans);
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    box-shadow: none !important;
    transform: none !important;
}
body.md-ui .auth-submit:hover:not(:disabled) {
    box-shadow: var(--md-elevation-1) !important;
    background: color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary)) !important;
}
body.md-ui .auth-footer,
body.md-ui .auth-footer a {
    font-family: var(--md-font-sans);
    color: var(--md-primary) !important;
}
body.md-ui .auth-error {
    color: var(--md-error) !important;
}
body.md-ui .auth-lang-bar {
    border-top-color: var(--md-outline-variant) !important;
}
body.md-ui .lang-btn {
    min-width: 44px;
    height: 32px;
    padding: 0 10px !important;
    border-radius: 16px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--md-primary) !important;
    font-family: var(--md-font-sans);
    font-size: 13px !important;
    font-weight: 500 !important;
}
body.md-ui .lang-btn.active {
    background: var(--md-secondary-container) !important;
    color: var(--md-on-secondary-container) !important;
}
body.md-ui .auth-lang-bar #themeToggleBtn {
    width: 40px;
    height: 40px;
    border-radius: 20px !important;
    border: 0 !important;
    background: transparent !important;
}
body.md-ui .pwd-requirements li,
body.md-ui .pwd-hint {
    color: var(--md-on-surface-variant) !important;
}
body.md-ui .pwd-requirements li.met,
body.md-ui .pwd-hint.valid {
    color: var(--md-free) !important;
}

/* ---------- Footer of the pages without a rail (js/md-footer.js) ---------- */
body.md-ui .md-footer.md-footer-public {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--md-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--md-on-surface-variant);
    background: transparent;
    pointer-events: none;
}
/* The legal notice beside "Swiss made" (27.09.2026): the only part of the
   band that takes a click. */
body.md-ui .md-footer .md-footer-sep { opacity: .6; }
body.md-ui .md-footer .md-footer-legal {
    pointer-events: auto;
    color: inherit;
    letter-spacing: .02em;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.md-ui .md-footer .md-footer-legal:hover { color: var(--md-on-surface); }
body.md-ui .md-footer-version {
    position: fixed;
    left: 16px;
    bottom: 0;
    height: 28px;
    display: flex;
    align-items: center;
    z-index: 40;
    font-family: var(--md-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--md-on-surface-variant);
    pointer-events: none;
}
body.md-ui.md-public {
    padding-bottom: 28px;
}
/* Once the page scrolls, the footer follows the content instead of lying
   over it (js/md-footer.js sets the class, 25.09.2026). */
body.md-ui.md-public.md-footer-inflow {
    padding-bottom: 0;
}
body.md-ui.md-footer-inflow .md-footer.md-footer-public {
    position: static;
}
/* The full-window wrappers leave the footer's band free: a sign-in card
   centred in the window no longer makes the page scroll by 28px. */
body.md-ui.md-public .auth-page,
body.md-ui.md-public .pricing-page,
body.md-ui.md-public.no-sidebar .app {
    min-height: calc(100vh - 28px);
}

/* ---------- First set-up (onboarding) ---------- */
body.md-ui .search-bar .input,
body.md-ui .search-bar input {
    background: transparent !important;
    border: 1px solid var(--md-outline) !important;
    color: var(--md-on-surface) !important;
    border-radius: 28px !important;
    padding-left: 44px !important;
}
body.md-ui .search-bar .input:focus,
body.md-ui .search-bar input:focus {
    border: 2px solid var(--md-primary) !important;
    padding-left: 43px !important;
}

/* The theme button of theme.js writes an emoji; a Material Symbol replaces it. */
body.md-ui .auth-lang-bar #themeToggleBtn {
    font-size: 0 !important;
    color: var(--md-on-surface-variant) !important;
}
body.md-ui .auth-lang-bar #themeToggleBtn::before {
    content: "light_mode";
    font-family: var(--md-font-icons);
    font-size: 22px;
    line-height: 1;
}
[data-theme="ivory"] body.md-ui .auth-lang-bar #themeToggleBtn::before {
    content: "dark_mode";
}

/* ---------- Browser autofill ----------
   Chrome paints autofilled fields light blue with dark text and ignores
   background-color. An inset shadow as large as the field repaints it in the
   card colour, and text-fill-color keeps the text readable. */
body.md-ui .auth-field input:-webkit-autofill,
body.md-ui .auth-field input:-webkit-autofill:hover,
body.md-ui .auth-field input:-webkit-autofill:focus,
body.md-ui .auth-field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--md-surface-container-lowest) inset !important;
    box-shadow: 0 0 0 1000px var(--md-surface-container-lowest) inset !important;
    -webkit-text-fill-color: var(--md-on-surface) !important;
    caret-color: var(--md-on-surface);
    transition: background-color 99999s ease-out 0s;
}