/* ===========================================================================
   BELLA TRATTORIA - NOTTE D'ORO
   The design theme of the whole application - website and administration.
   One file, no other dependencies.
   ---------------------------------------------------------------------------
   Holds the shared architecture (rhythm, type hierarchy, materials, motion)
   and the colours of Notte d'Oro. The theme needs no new web font: it builds
   on Marcellus and Inter, which both layouts already load.

   It is the only theme. There is no second one to switch to and no light
   variant - the palette below simply replaces the tokens site.css declares at
   :root (site.css itself is a finished Tailwind build and is never edited).

   HOW IT IS WIRED IN - the last stylesheet in both layouts, so it wins over
   site.css, components.css and admin.css:

        Pages/Shared/_Layout.cshtml       (website, renders #top)
        Pages/Shared/_AdminLayout.cshtml  (administration, renders .admin-shell)

            <link asp-append-version="true" href="~/css/themes/notte-doro.css" rel="stylesheet" />

   A <link> rather than an @import in components.css, so the file keeps the
   `asp-append-version` cache busting the rest of the project uses.

   The file has three parts:
     1. the shared architecture, in tokens only (section 1 to 16),
     2. the Notte d'Oro values for those tokens plus the website's lighting,
     3. the administration (section 17), which applies the same materials to
        the admin classes.

   Documentation: BellaTrattoria-dokumentace.md, chapter 5.5 (Vzhled - téma Notte d'Oro).
   =========================================================================== */

/* ===========================================================================
   THEME CORE - shared styling architecture for the public website
   ---------------------------------------------------------------------------
   This file contains no colours of its own. It defines the architecture -
   spacing rhythm, type hierarchy, materials, motion - entirely in terms of
   tokens, and every theme file only re-declares those tokens.

   Rules of this layer (they are the reason nothing in the app can break):

   1. NO MARKUP. Nothing here needs a class, an id or an attribute that the
      Razor pages do not already render.
   2. THE SCOPE IS THE LAYOUT. The tokens are declared on `body`, so both
      layouts share one palette. Everything that follows is scoped to `#top`
      (website, Pages/Shared/_Layout.cshtml) or to `.admin-shell`
      (administration, section 17) - the two never reach into each other.
   3. NOTHING IS EVER HIDDEN. No `display:none`, no `visibility:hidden`, no
      zero opacity that a browser could get stuck on. Scroll reveals live
      inside `@supports (animation-timeline: view())`, so a browser without
      scroll-driven animations simply shows the finished state.
   4. NO TRANSFORM / FILTER / PERSPECTIVE / CONTAIN ON #top, body OR main.
      Those properties create a containing block for fixed positioning and
      would break both the fixed header and the table picker panel
      (`.picker-panel`, position:fixed, rendered inside <main>).
   5. THE FORM GEOMETRY IS LEFT ALONE. `.form-box` display/grid-template-rows,
      `.form-column` subgrid and `.form-actions-note { min-height }` carry the
      "both forms end at the same height and nothing jumps on submit" logic
      from components.css. This layer never sets those properties.
   =========================================================================== */

/* ── 1. Token contract ────────────────────────────────────────────────────
   Defaults are the quiet end of every scale; part 2 of this file overrides
   them. Declared on `body` so the website, the administration and every shared
   component (table plan, picker panel, forms) read the same values.
   The `--color-*` aliases must be re-declared alongside the raw tokens because
   Tailwind v4 resolves `--color-x: var(--x)` at :root, before this scope. */
body {
    /* motion */
    --t-dur-fast: 160ms;
    --t-dur-base: 300ms;
    --t-dur-slow: 620ms;
    --t-dur-cinematic: 1100ms;
    --t-ease-out: cubic-bezier(.22, .72, .26, 1);
    --t-ease-emph: cubic-bezier(.62, .04, .2, 1);
    --t-ease-spring: cubic-bezier(.34, 1.32, .48, 1);

    /* rhythm - one scale, used everywhere instead of ad hoc padding */
    --t-section-pad: clamp(5rem, 2.6rem + 7vw, 9.5rem);
    --t-block-gap: clamp(2.75rem, 1.5rem + 3.4vw, 4.5rem);
    --t-card-pad: clamp(1.75rem, 1.1rem + 1.8vw, 2.6rem);

    /* geometry */
    --t-radius-sm: 0px;
    --t-radius-md: 0px;
    --t-radius-lg: 0px;

    /* materials */
    --t-hairline: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
    --t-card-edge: inset 0 1px 0 oklch(100% 0 0 / .045);
    --t-shadow-card: 0 1px 2px oklch(0% 0 0 / .18);
    --t-shadow-lift: 0 18px 44px -28px oklch(0% 0 0 / .75);
    --t-shadow-float: 0 32px 80px -40px oklch(0% 0 0 / .85);
    --t-glow: 0 0 0 1px var(--brass-soft);
    --t-grain-opacity: .028;
    --t-grain-blend: soft-light;

    /* typography */
    --t-display-tracking: -.018em;
    --t-display-leading: 1.02;
    --t-eyebrow-tracking: .24em;
    --t-body-leading: 1.72;
    --t-foil: none;

    /* hero grade */
    --t-hero-img-filter: none;
    --t-hero-shaft: none;
    --t-hero-shaft-blend: screen;
    --t-hero-vignette: radial-gradient(120% 90% at 50% 42%, transparent 42%, oklch(0% 0 0 / .42) 100%);
    --t-hero-vignette-blend: multiply;
    --t-hero-min-h: min(100svh, 980px);
}

/* ── 2. Typography hierarchy ──────────────────────────────────────────────
   The markup carries Tailwind size utilities. They stay; this refines the
   optical side of them - tracking, leading, balance - which is most of the
   difference between "a website" and "a designed page". */

#top {
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
}

/* Every heading gets the optical refinements and keeps the size the markup
   gives it ... */
#top main :is(h1, h2, h3) {
    letter-spacing: -.012em;
    line-height: 1.14;
    text-wrap: balance;
}

/* ... a page title is set as display type ... */
#top main h1 {
    letter-spacing: var(--t-display-tracking);
    line-height: 1.04;
}

/* ... and the heading of a section of the home page is the only thing that is
   also enlarged. Written as `section[id]` on purpose: those five sections are
   the ones the scale was designed for. A loose `#top main h2` also catches the
   headings on the Kariéra page (the empty-state notice and every job title,
   sized text-2xl in the markup) and blows them up over the page's own h1. */
#top main > section[id] h2 {
    font-size: clamp(2.3rem, 1.15rem + 3.5vw, 4rem);
    line-height: var(--t-display-leading);
    letter-spacing: var(--t-display-tracking);
}

/* Body copy: a comfortable measure and no orphans. */
#top main p {
    text-wrap: pretty;
}

#top main .leading-relaxed {
    line-height: var(--t-body-leading);
}

/* The eyebrow is the smallest thing on the page and does the most work -
   it labels every section. A hairline tick in front of it turns it from a
   line of small caps into a typographic device. */
#top .eyebrow {
    letter-spacing: var(--t-eyebrow-tracking);
    font-size: .6875rem;
}

#top main > section > div > div > .eyebrow,
#top .hero-copy .eyebrow {
    display: flex;
    align-items: center;
    gap: .85rem;
}

#top main > section > div > div > .eyebrow::before,
#top .hero-copy .eyebrow::before {
    content: "";
    width: clamp(1.5rem, 3vw, 2.75rem);
    height: 1px;
    flex: none;
    background: currentColor;
    opacity: .55;
}

/* Prices, stat figures and the menu leaders. */
#top .tabular-nums {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

#top .rule-dots {
    background-image: radial-gradient(circle, color-mix(in oklab, var(--brass) 42%, transparent) .9px, transparent .9px);
    background-size: 5px 1px;
    opacity: .9;
}

/* ── 3. Rhythm ────────────────────────────────────────────────────────────
   One vertical scale for the five content sections. The hero keeps its own
   padding and the decorative image band keeps none, so both are excluded by
   the `[id]` part of the selector. */
#top main > section[id] {
    padding-block: var(--t-section-pad);
}

#top main > section[id] > div > .max-w-2xl {
    max-width: 44rem;
}

/* ── 4. Materials ─────────────────────────────────────────────────────────
   The page is built from hairline-separated panels. Instead of a flat 1px
   border everywhere, edges fade at their ends and panels get a top highlight,
   which is what makes a dark surface read as a physical material. */

#top main > section[id] {
    position: relative;
}

#top main > section[id].border-y::before,
#top main > section[id].border-y::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--t-hairline);
    pointer-events: none;
}

#top main > section[id].border-y::before { top: -1px; }
#top main > section[id].border-y::after { bottom: -1px; }

/* Cards in "Soukromé akce" and "Zábava" (the gap-px hairline grid). */
#top #events article,
#top #games article {
    position: relative;
    border-radius: var(--t-radius-md);
    box-shadow: var(--t-card-edge);
    padding: var(--t-card-pad);
    transition:
        background-color var(--t-dur-base) var(--t-ease-out),
        box-shadow var(--t-dur-base) var(--t-ease-out),
        transform var(--t-dur-base) var(--t-ease-out);
}

/* Film grain over the whole page: fixed, inert, and below both the header
   (z-50) and the picker panel (z-80). It must stay `pointer-events:none` and
   it must never be given a transform - #top is an ancestor of the fixed
   header, and this pseudo-element is the only thing allowed to be fixed here. */
#top::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--t-grain-opacity);
    mix-blend-mode: var(--t-grain-blend);
    background-image: var(--t-grain, none);
    background-size: 220px 220px;
}

@media (hover: hover) and (pointer: fine) {
    #top #games article:hover {
        transform: translateY(-3px);
        box-shadow: var(--t-card-edge), var(--t-shadow-lift);
    }

    #top #events article:hover {
        box-shadow: var(--t-card-edge), var(--t-shadow-card);
    }
}

/* A quiet brass tick that grows in the top-left corner of an events card. */
#top #events article::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 0;
    height: 2px;
    background: var(--brass);
    transition: width var(--t-dur-slow) var(--t-ease-out);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    #top #events article:hover::before { width: clamp(2.5rem, 18%, 5rem); }
}

/* The bullet dots in the events lists. */
#top #events li > span:first-child {
    box-shadow: 0 0 0 3px var(--brass-soft);
    transition: box-shadow var(--t-dur-base) var(--t-ease-out);
}

#top #events li:hover > span:first-child {
    box-shadow: 0 0 0 5px var(--brass-soft);
}

/* The footnote under the entertainment cards. */
#top #games > div > p.border-l-2 {
    border-left-width: 2px;
    padding-block: .35rem;
    font-style: normal;
}

/* Header: glass, with a hairline that only appears once the page is scrolled
   behind it (the header is translucent, so the seam matters). */
#top > header {
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 0 var(--border), var(--t-shadow-card);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
    transition: box-shadow var(--t-dur-base) var(--t-ease-out);
}

#top > header nav a {
    position: relative;
}

#top > header .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.55rem;
    height: 1px;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-dur-base) var(--t-ease-out);
}

#top > header .site-nav a:hover::after,
#top > header .site-nav a:focus-visible::after {
    transform: scaleX(1);
}

/* Footer. */
#top > footer {
    padding-block: clamp(2.5rem, 1.8rem + 2vw, 3.5rem);
}

/* ── 5. The hero ──────────────────────────────────────────────────────────
   Everything here is grading and lighting on top of the existing photo and
   the existing three blocks of copy. No element moves in the DOM. */

#top .hero-full {
    min-height: var(--t-hero-min-h);
    padding-block: clamp(9.5rem, 7rem + 8vw, 13.5rem) clamp(3.5rem, 2rem + 3vw, 5.5rem);
    isolation: isolate;
}

#top .hero-bg img {
    filter: var(--t-hero-img-filter);
    transform: scale(1.06);
    transform-origin: 68% 50%;
}

/* A shaft of light raked across the frame, blended into the photo rather than
   laid on top of it - this is what reads as "lit", not "overlaid". */
#top .hero-bg::before {
    content: "";
    position: absolute;
    inset: -10% -20%;
    background: var(--t-hero-shaft);
    mix-blend-mode: var(--t-hero-shaft-blend);
    pointer-events: none;
    z-index: 1;
}

#top .hero-bg::after {
    z-index: 2;
}

/* Vignette above the scrim, below the copy. */
#top .hero-full::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--t-hero-vignette);
    mix-blend-mode: var(--t-hero-vignette-blend);
    pointer-events: none;
}

#top .hero-inner {
    display: grid;
    align-content: center;
    z-index: 2;
}

#top .hero-copy {
    max-width: 60ch;
}

/* The headline. It carries `whitespace-nowrap` from the markup and is sized in
   vw, so it is wider than the column it sits in - by design. `width:max-content`
   makes its box match the text, which is what lets it be masked, clipped or
   painted with a gradient without losing the last word. Never give it a
   max-width: that would put the clipping back. */
#top .hero-copy h1 {
    font-size: clamp(1.5rem, 9.3vw, 84px) !important;
    letter-spacing: var(--t-display-tracking);
    line-height: 1.06;
    width: max-content;
    padding-block: .06em;
}

#top .hero-copy .max-w-\[46ch\] {
    max-width: 48ch;
    line-height: var(--t-body-leading);
}

/* The four figures under the hero. */
#top .hero-stats > div {
    border-top-color: transparent;
    background-image: var(--t-hairline);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 0;
}

#top .hero-stats b {
    font-size: clamp(2.5rem, 1.4rem + 3.2vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: lining-nums tabular-nums;
}

#top .hero-stats > div > div {
    transition: background-color var(--t-dur-base) var(--t-ease-out);
}

#top .hero-stats > div > div:hover {
    background-color: color-mix(in oklab, var(--surface) 45%, transparent);
}

/* ── 6. Controls: buttons, chips, fields ─────────────────────────────────
   Selectors are shape-based on purpose. `:is(a,button)` keeps the bullet
   `<span class="bg-brass">` dots and the table-plan buttons out of it. */

#top :is(a, button).bg-brass {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--t-radius-sm);
    transition:
        color var(--t-dur-fast) var(--t-ease-out),
        box-shadow var(--t-dur-base) var(--t-ease-out),
        transform var(--t-dur-fast) var(--t-ease-out);
}

/* The sweep is a pseudo-element, so the button's own background colour - and
   with it every `hover:bg-brass/90` utility - is left untouched. */
#top :is(a, button).bg-brass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        transparent 0%,
        oklch(100% 0 0 / .28) 45%,
        transparent 70%);
    transform: translateX(-110%);
    transition: transform var(--t-dur-slow) var(--t-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    #top :is(a, button).bg-brass:hover {
        box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--brass) 70%, transparent);
    }

    #top :is(a, button).bg-brass:hover::after {
        transform: translateX(110%);
    }
}

#top :is(a, button).bg-brass:active {
    transform: translateY(1px);
}

/* Outline buttons and the enquiry chips. */
#top :is(a, button).border-border-strong,
#top :is(a, button)[data-chip] {
    border-radius: var(--t-radius-sm);
    transition:
        border-color var(--t-dur-base) var(--t-ease-out),
        color var(--t-dur-base) var(--t-ease-out),
        background-color var(--t-dur-base) var(--t-ease-out),
        transform var(--t-dur-fast) var(--t-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    #top :is(a, button).border-border-strong:hover {
        background-color: color-mix(in oklab, var(--brass) 8%, transparent);
    }
}

#top :is(a, button)[data-chip]:active {
    transform: translateY(1px);
}

/* Form fields. The focus state is the single most-used interaction on this
   page (two forms, sixteen fields), so it gets a real treatment: a brass
   edge, a soft ring and a surface lift - none of which move anything. */
#top .form-box :is(input, select, textarea) {
    border-radius: var(--t-radius-sm);
    transition:
        border-color var(--t-dur-fast) var(--t-ease-out),
        box-shadow var(--t-dur-base) var(--t-ease-out),
        background-color var(--t-dur-base) var(--t-ease-out);
}

#top .form-box :is(input, select, textarea):hover:not(:disabled) {
    border-color: color-mix(in oklab, var(--brass) 45%, var(--border-strong));
}

#top .form-box :is(input, select, textarea):focus {
    border-color: var(--brass);
    box-shadow: 0 0 0 3px var(--brass-soft);
    background-color: color-mix(in oklab, var(--surface-2) 55%, var(--input));
}

/* The label above a focused field lights up with it. */
#top .form-box label:focus-within > span:first-child {
    color: var(--brass);
    transition: color var(--t-dur-fast) var(--t-ease-out);
}

#top .form-box :is(input, select, textarea):disabled {
    opacity: .55;
}

/* Reservation type radios and the selected-table chips. */
#top .res-type-option {
    border-radius: var(--t-radius-sm);
    transition:
        border-color var(--t-dur-base) var(--t-ease-out),
        background-color var(--t-dur-base) var(--t-ease-out);
}

#top .res-type-option:has(input:checked) {
    background-color: color-mix(in oklab, var(--brass) 9%, transparent);
}

#top .selected-tables-chip {
    border-radius: var(--t-radius-sm);
    animation: t-chip-in var(--t-dur-base) var(--t-ease-spring) both;
}

/* The forms themselves: a panel, not a box. */
#top .form-box {
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-card-edge), var(--t-shadow-card);
}

/* Status line after submitting. It replaces the standing sentence in a fixed
   slot (components.css), so a fade is safe - nothing reflows. */
#top .form-status:not([hidden]) {
    animation: t-status-in var(--t-dur-base) var(--t-ease-out) both;
}

/* ── 7. Menu accordion ───────────────────────────────────────────────────
   site.js toggles `aria-expanded` and the `hidden` attribute. Both are
   styleable, so the whole interaction can be dressed without a line of JS. */

#top #menu [data-acc] {
    border-bottom-color: transparent;
    background-image: var(--t-hairline);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
}

#top #menu [data-acc-trigger] {
    position: relative;
    padding-inline: .25rem;
    transition:
        background-color var(--t-dur-base) var(--t-ease-out),
        padding-inline var(--t-dur-base) var(--t-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    #top #menu [data-acc-trigger]:hover {
        background-color: color-mix(in oklab, var(--surface) 60%, transparent);
        padding-inline: .75rem .5rem;
    }
}

#top #menu [data-acc-trigger] > span:first-child > span:first-child {
    transition: color var(--t-dur-base) var(--t-ease-out);
}

#top #menu [data-acc-trigger]:hover > span:first-child > span:first-child {
    color: var(--brass);
}

/* The count badge. */
#top #menu [data-acc-trigger] > span:nth-child(2) {
    border-radius: var(--t-radius-sm);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--t-dur-base) var(--t-ease-out), color var(--t-dur-base) var(--t-ease-out);
}

#top #menu [data-acc-trigger]:hover > span:nth-child(2) {
    border-color: color-mix(in oklab, var(--brass) 55%, transparent);
    color: var(--brass);
}

/* The plus turns into a close cross when the category is open. */
#top #menu [data-acc-icon] {
    transition: transform var(--t-dur-base) var(--t-ease-emph);
}

#top #menu [aria-expanded="true"] [data-acc-icon] {
    transform: rotate(135deg);
}

/* The list appears with the `hidden` attribute coming off, so the items can
   be staggered in without touching display. */
#top #menu [data-acc-panel]:not([hidden]) > li {
    animation: t-item-in 420ms var(--t-ease-out) both;
}

#top #menu [data-acc-panel]:not([hidden]) > li:nth-child(1) { animation-delay: 0ms; }
#top #menu [data-acc-panel]:not([hidden]) > li:nth-child(2) { animation-delay: 22ms; }
#top #menu [data-acc-panel]:not([hidden]) > li:nth-child(3) { animation-delay: 44ms; }
#top #menu [data-acc-panel]:not([hidden]) > li:nth-child(4) { animation-delay: 66ms; }
#top #menu [data-acc-panel]:not([hidden]) > li:nth-child(5) { animation-delay: 88ms; }
#top #menu [data-acc-panel]:not([hidden]) > li:nth-child(n+6) { animation-delay: 110ms; }

#top #menu [data-acc-panel] > li {
    transition: color var(--t-dur-fast) var(--t-ease-out);
}

/* ── 8. Table picker panel ───────────────────────────────────────────────
   Position and z-index come from components.css and are left exactly as they
   are; only the surface is dressed. */
#top .picker-panel-content {
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-float);
    animation: t-panel-in 420ms var(--t-ease-out) both;
}

#top .picker-panel:not([hidden]) {
    animation: t-fade-in var(--t-dur-base) var(--t-ease-out) both;
}

#top .plan-table {
    border-radius: var(--t-radius-sm);
    transition:
        border-color var(--t-dur-fast) var(--t-ease-out),
        background-color var(--t-dur-fast) var(--t-ease-out),
        color var(--t-dur-fast) var(--t-ease-out),
        transform var(--t-dur-fast) var(--t-ease-spring),
        opacity var(--t-dur-fast) linear;
}

#top .plan-table:hover:not(:disabled):not(.is-taken):not(.is-wrong-type) {
    transform: translateY(-2px);
}

#top .plan-table[aria-pressed="true"] {
    box-shadow: 0 8px 22px -12px color-mix(in oklab, var(--brass) 75%, transparent);
}

#top .plan-btn {
    border-radius: var(--t-radius-sm);
}

/* ── 9. Contact block and map ────────────────────────────────────────────- */
/* The rows of the opening hours. They sit two grids deep, so the selector is
   written from what they are, not from where they are. */
#top #contact .flex.justify-between.border-b {
    border-bottom-color: transparent;
    background-image: var(--t-hairline);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    transition: background-size var(--t-dur-base) var(--t-ease-out);
}

#top #contact .group {
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-card-edge), var(--t-shadow-card);
    transition: box-shadow var(--t-dur-base) var(--t-ease-out), border-color var(--t-dur-base) var(--t-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    #top #contact .group:hover {
        box-shadow: var(--t-card-edge), var(--t-shadow-lift);
    }
}

/* ── 10. Language switch ─────────────────────────────────────────────────- */
#top .lang-switch {
    border-radius: var(--t-radius-sm);
    overflow: hidden;
}

#top .lang-switch-item.is-active {
    background-color: color-mix(in oklab, var(--brass) 12%, transparent);
}

/* ── 11. Focus, always ───────────────────────────────────────────────────
   site.css sets a `:where()` focus ring, which has zero specificity and is
   therefore easy to lose by accident. This restates it at real specificity so
   no theme can ever style it away. */
#top :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: var(--t-radius-sm);
}

.skip-link {
    border-radius: var(--t-radius-sm);
}

/* ── 12. Motion: keyframes ───────────────────────────────────────────────- */
@keyframes t-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes t-panel-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes t-item-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes t-chip-in {
    from { opacity: 0; transform: scale(.82); }
    to   { opacity: 1; transform: none; }
}

@keyframes t-status-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes t-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

@keyframes t-rise-soft {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes t-wipe {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes t-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.13) translate3d(-1.2%, -1%, 0); }
}

/* ── 13. Hero entrance ───────────────────────────────────────────────────
   Only under `no-preference`, and only on the hero - the part of the page the
   visitor is already looking at. */
@media (prefers-reduced-motion: no-preference) {
    #top .hero-bg img {
        animation: t-drift 34s var(--t-ease-out) both alternate infinite;
    }

    #top .hero-copy .eyebrow { animation: t-rise-soft 700ms var(--t-ease-out) 60ms both; }
    #top .hero-copy h1 { animation: t-wipe var(--t-dur-cinematic) var(--t-ease-emph) 140ms both; }
    #top .hero-copy p { animation: t-rise-soft 760ms var(--t-ease-out) 420ms both; }
    #top .hero-copy .mt-9 { animation: t-rise-soft 760ms var(--t-ease-out) 560ms both; }
    #top .hero-stats { animation: t-rise-soft 820ms var(--t-ease-out) 700ms both; }
}

/* ── 14. Scroll reveals ──────────────────────────────────────────────────
   Pure CSS, via scroll-driven animations. Wrapped in @supports so that a
   browser without them renders the finished state - there is no code path
   in which content stays invisible. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* In Kontakt the reveal is put on the two OUTER columns only. A loose
           `#contact .grid > div` also matches every row of the opening hours
           (that block is a grid too), so the rows faded in one by one and a
           half-revealed row sat next to fully lit text beside it. The child
           chain from #contact is what keeps the block together. */
        #top main > section[id] > div > div:first-child,
        #top #events article,
        #top #games article,
        #top #menu [data-acc] ,
        #top .form-column,
        #top #contact > div > .grid > div,
        #top #events > div > .mt-10 {
            animation: t-rise linear both;
            animation-timeline: view();
            animation-range: entry 6% cover 22%;
        }

        /* Cards stagger by position in their row rather than all at once. */
        #top #events article:nth-child(2n),
        #top #games article:nth-child(2n) {
            animation-range: entry 10% cover 26%;
        }

        #top #games article:nth-child(3),
        #top #games article:nth-child(4) {
            animation-range: entry 13% cover 29%;
        }

        /* The image band gets a slow parallax-ish reveal. */
        #top main > section[aria-hidden="true"] img {
            animation: t-fade-in linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
    }
}

/* ── 15. Reduced motion ──────────────────────────────────────────────────
   site.css already flattens transitions. This removes the animations too, so
   the page renders completely still - including the hero drift. */
@media (prefers-reduced-motion: reduce) {
    #top *,
    #top *::before,
    #top *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    #top .hero-bg img {
        transform: scale(1.02);
    }
}

/* ── 16. Print ───────────────────────────────────────────────────────────
   The decorative layers are screen-only. site.css already hides the header. */
@media print {
    #top .hero-full::after,
    #top .hero-bg::before,
    #top::after {
        display: none !important;
    }

    /* A gradient-filled headline has no ink of its own - on paper it is given
       its colour back, whatever the theme did to it. */
    #top .hero-copy h1 {
        background-image: none !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }

    #top main > section[id] {
        padding-block: 1.5rem;
    }
}



/* ===========================================================================
   NOTTE D'ORO - colour, type and lighting
   ---------------------------------------------------------------------------
   Espresso black, brass with real luminance, cut edges. One light source in
   the room: a raked shaft blended into the lane photo, a vignette and film
   grain over the page.

   Everything below is values for the tokens declared above - which is why
   this part is short, and why the colour can be changed without going
   anywhere near the layout.
   =========================================================================== */

body {
    /* ── palette ───────────────────────────────────────────────────────── */
    --background: oklch(13.2% .008 62);
    --foreground: oklch(96.5% .006 85);
    --surface: oklch(17.4% .010 62);
    --surface-2: oklch(22% .013 64);
    --card: oklch(17.4% .010 62);
    --card-foreground: oklch(96.5% .006 85);
    --popover: oklch(18.6% .011 62);
    --popover-foreground: oklch(96.5% .006 85);
    --input: oklch(16.2% .010 62);

    --brass: oklch(79% .115 80);
    --brass-soft: oklch(79% .115 80 / .17);
    --primary: oklch(79% .115 80);
    --primary-foreground: oklch(13.2% .008 62);
    --accent: oklch(79% .115 80);
    --accent-foreground: oklch(13.2% .008 62);
    --ring: oklch(79% .115 80);

    --secondary: oklch(22% .013 64);
    --secondary-foreground: oklch(96.5% .006 85);
    --muted: oklch(22% .013 64);
    --muted-foreground: oklch(74% .013 85);

    --border: oklch(100% 0 0 / .085);
    --border-strong: oklch(100% 0 0 / .19);
    --destructive: oklch(62% .18 25);

    /* Tailwind v4 resolves `--color-x: var(--x)` at :root, so the aliases are
       restated here or the utilities would keep the old values. */
    --color-background: oklch(13.2% .008 62);
    --color-foreground: oklch(96.5% .006 85);
    --color-border: oklch(100% 0 0 / .085);
    --color-border-strong: oklch(100% 0 0 / .19);
    --color-brass: oklch(79% .115 80);

    /* ── type ──────────────────────────────────────────────────────────── */
    --font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
    --font-sans: "Inter", system-ui, sans-serif;
    --t-display-tracking: -.022em;
    --t-display-leading: 1.0;
    --t-eyebrow-tracking: .26em;
    --t-body-leading: 1.74;

    /* ── geometry: no radius at all. Every edge is cut, not moulded. ──── */
    --t-radius-sm: 0px;
    --t-radius-md: 0px;
    --t-radius-lg: 0px;

    /* ── materials ─────────────────────────────────────────────────────── */
    --t-card-edge: inset 0 1px 0 oklch(100% 0 0 / .055);
    --t-shadow-card: 0 1px 2px oklch(0% 0 0 / .3);
    --t-shadow-lift: 0 22px 50px -30px oklch(0% 0 0 / .85);
    --t-shadow-float: 0 40px 90px -44px oklch(0% 0 0 / .9);
    --t-hairline: linear-gradient(90deg,
        transparent,
        color-mix(in oklab, var(--brass) 26%, var(--border-strong)) 14%,
        var(--border-strong) 50%,
        color-mix(in oklab, var(--brass) 26%, var(--border-strong)) 86%,
        transparent);
    --t-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    --t-grain-opacity: .03;
    --t-grain-blend: soft-light;

    /* Brass leaf for the headline - light catches it left of centre. */
    --t-foil: linear-gradient(96deg,
        oklch(86% .09 84) 0%,
        oklch(79% .115 80) 26%,
        oklch(95% .055 90) 44%,
        oklch(79% .115 80) 62%,
        oklch(68% .10 74) 100%);

    /* ── hero grade ────────────────────────────────────────────────────── */
    --t-hero-img-filter: contrast(1.09) saturate(.86) brightness(.84);
    --t-hero-shaft: linear-gradient(106deg,
        transparent 28%,
        oklch(90% .07 84 / .16) 43%,
        oklch(97% .045 88 / .26) 50%,
        oklch(90% .07 84 / .12) 57%,
        transparent 68%);
    --t-hero-shaft-blend: screen;
    --t-hero-vignette: radial-gradient(118% 88% at 64% 44%, transparent 36%, oklch(0% 0 0 / .55) 100%);
    --t-hero-vignette-blend: multiply;
    --t-hero-min-h: min(100svh, 980px);
}

/* The scrim from site.css is kept, with one more step so the copy side of the
   frame is darker and the lane at the right keeps its glow. */
#top .hero-bg::after {
    background:
        linear-gradient(90deg,
            var(--background) 2%,
            color-mix(in oklab, var(--background) 94%, transparent) 26%,
            color-mix(in oklab, var(--background) 62%, transparent) 52%,
            color-mix(in oklab, var(--background) 20%, transparent) 78%,
            color-mix(in oklab, var(--background) 6%, transparent) 100%),
        linear-gradient(180deg,
            var(--background) 0%,
            color-mix(in oklab, var(--background) 0%, transparent) 24%,
            color-mix(in oklab, var(--background) 0%, transparent) 56%,
            var(--background) 100%);
}

/* Brass leaf on the headline. It lives in the theme, not in the core, because
   the text loses its own ink when it is painted this way - a theme without a
   foil must never inherit the rule. @media print in the core puts the ink back. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    #top .hero-copy h1 {
        background-image: var(--t-foil);
        background-size: 180% 100%;
        background-position: 22% 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* A brass rule that the eye picks up before the headline. */
#top .hero-copy > div {
    position: relative;
    padding-left: clamp(0px, 1.2vw, 1.5rem);
}

/* Panels: a barely-there warm lift so surfaces separate from the ground. */
#top #events article,
#top #games article,
#top .form-box,
#top .picker-panel-content {
    background-image: linear-gradient(180deg,
        color-mix(in oklab, var(--brass) 3.5%, transparent) 0%,
        transparent 42%);
}

/* Section headings sit on the brass side of white. */
#top main > section[id] > div > div:first-child > h2 {
    color: color-mix(in oklab, var(--brass) 10%, var(--foreground));
}


/* ===========================================================================
   17. ADMINISTRATION
   ---------------------------------------------------------------------------
   The same theme, one register quieter. The administration renders
   `.admin-shell` instead of `#top`, so nothing above reaches it; this section
   applies the same materials, focus states and motion to the classes from
   admin.css and shares the palette through the tokens on `body`.

   The rules of the layer above hold here too:
     - NO MARKUP. Everything below uses classes the Razor pages already render.
     - NOTHING IS EVER HIDDEN, and no layout property from admin.css is
       touched - only surfaces, edges, focus and motion.
     - NO TRANSFORM / FILTER / CONTAIN on `.admin-shell` or `.admin-main`. The
       table picker (`.picker-panel`, position:fixed) is rendered inside the
       administration as well, and any of those would turn its fixed
       positioning into "fixed inside the page", i.e. break it.
     - The print preview (`/print`) is a page with `Layout = null` and its own
       styles - this file never reaches it, and must not.
   =========================================================================== */

.admin-shell {
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
}

/* The same film grain as the website, so the two read as one application.
   Below the header (z-20) and far below the picker panel (z-80), inert. */
.admin-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--t-grain-opacity);
    mix-blend-mode: var(--t-grain-blend);
    background-image: var(--t-grain, none);
    background-size: 220px 220px;
}

/* ── 17.1 Typography ─────────────────────────────────────────────────────-
   Tailwind sizes from the markup stay; only the optical side is refined. The
   administration is a working tool, so the headings are not enlarged the way
   the website's are. */
.admin-main h1 {
    letter-spacing: var(--t-display-tracking);
    line-height: 1.06;
    text-wrap: balance;
}

.admin-main :is(h2, h3) {
    letter-spacing: -.012em;
    line-height: 1.16;
    text-wrap: balance;
}

.admin-main p {
    text-wrap: pretty;
}

.admin-main .leading-relaxed {
    line-height: var(--t-body-leading);
}

.admin-shell .eyebrow {
    letter-spacing: var(--t-eyebrow-tracking);
    font-size: .6875rem;
}

/* The hairline tick in front of a section label - the same device as on the
   website. Only section headings get it; the centred one on the login page
   (`.text-center`) is left alone. */
.admin-main section > .eyebrow,
.ed-toolbar > div > .eyebrow {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.admin-main section > .eyebrow::before,
.ed-toolbar > div > .eyebrow::before {
    content: "";
    width: clamp(1.5rem, 3vw, 2.75rem);
    height: 1px;
    flex: none;
    background: currentColor;
    opacity: .55;
}

/* ── 17.2 Header ─────────────────────────────────────────────────────────-
   Glass, with the seam drawn as a shadow instead of a border, so it does not
   double up with the blur. */
.admin-header {
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 0 var(--border), var(--t-shadow-card);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
}

.admin-header .admin-link {
    position: relative;
}

.admin-header .admin-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.45rem;
    height: 1px;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-dur-base) var(--t-ease-out);
}

.admin-header .admin-link:hover::after,
.admin-header .admin-link:focus-visible::after {
    transform: scaleX(1);
}

/* ── 17.3 Dashboard tiles ────────────────────────────────────────────────-
   The counterpart of the cards in "Soukromé akce" and "Zábava": a warm lift
   off the ground, a top highlight and a brass tick that grows on hover. */
.admin-window {
    border-radius: var(--t-radius-md);
    box-shadow: var(--t-card-edge);
    background-image: linear-gradient(180deg,
        color-mix(in oklab, var(--brass) 3.5%, transparent) 0%,
        transparent 42%);
    transition:
        border-color var(--t-dur-base) var(--t-ease-out),
        background-color var(--t-dur-base) var(--t-ease-out),
        box-shadow var(--t-dur-base) var(--t-ease-out),
        transform var(--t-dur-base) var(--t-ease-out);
}

.admin-window::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 0;
    height: 2px;
    background: var(--brass);
    transition: width var(--t-dur-slow) var(--t-ease-out);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .admin-window:hover {
        transform: translateY(-3px);
        box-shadow: var(--t-card-edge), var(--t-shadow-lift);
    }

    .admin-window:hover::before {
        width: clamp(2.5rem, 18%, 5rem);
    }
}

.admin-window-title {
    letter-spacing: -.01em;
}

/* The notice above the dashboard ("3 reservations are waiting"). */
.admin-notice {
    box-shadow: var(--t-card-edge);
    transition:
        background-color var(--t-dur-base) var(--t-ease-out),
        border-color var(--t-dur-base) var(--t-ease-out);
}

/* ── 17.4 Panels: login box, tables, alerts ──────────────────────────────- */
.admin-login-box {
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-card-edge), var(--t-shadow-float);
    background-image: linear-gradient(180deg,
        color-mix(in oklab, var(--brass) 4%, transparent) 0%,
        transparent 46%);
}

.res-table {
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-card-edge), var(--t-shadow-card);
}

/* The row background is set with the `background` shorthand in admin.css, so
   the separator stays a border here - a background-image hairline would be
   wiped on hover. The colour comes from the palette. */
.res-row {
    transition: background-color var(--t-dur-fast) var(--t-ease-out);
}

.admin-alert {
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-card-edge);
    animation: t-status-in var(--t-dur-base) var(--t-ease-out) both;
}

.ed-group,
.ed-category {
    border-radius: var(--t-radius-md);
}

/* ── 17.5 Fields ─────────────────────────────────────────────────────────-
   The same focus treatment as the website's forms: a brass edge, a soft ring
   and a lifted surface. Nothing moves, so a long form does not twitch. */
.admin-input,
.ed-input {
    border-radius: var(--t-radius-sm);
    transition:
        border-color var(--t-dur-fast) var(--t-ease-out),
        box-shadow var(--t-dur-base) var(--t-ease-out),
        background-color var(--t-dur-base) var(--t-ease-out),
        color var(--t-dur-base) var(--t-ease-out);
}

.admin-input:hover:not(:disabled),
.ed-input:hover:not(:disabled) {
    border-color: color-mix(in oklab, var(--brass) 45%, var(--border-strong));
}

.admin-input:focus,
.ed-input:focus {
    border-color: var(--brass);
    box-shadow: 0 0 0 3px var(--brass-soft);
    background-color: color-mix(in oklab, var(--surface-2) 55%, var(--input));
}

/* The optional English field keeps its dashed edge - that is what says "this
   may stay empty" - it only gains the ring. */
.ed-input-en:focus {
    border-style: dashed;
}

.admin-field:focus-within > .admin-label,
label:focus-within > .admin-label {
    color: var(--brass);
    transition: color var(--t-dur-fast) var(--t-ease-out);
}

/* ── 17.6 Buttons ────────────────────────────────────────────────────────-
   The brass button gets the same sweep as on the website; the ghost ones only
   get the timing. */
.admin-btn {
    border-radius: var(--t-radius-sm);
    transition:
        background-color var(--t-dur-fast) var(--t-ease-out),
        border-color var(--t-dur-base) var(--t-ease-out),
        color var(--t-dur-fast) var(--t-ease-out),
        box-shadow var(--t-dur-base) var(--t-ease-out),
        transform var(--t-dur-fast) var(--t-ease-out);
}

.admin-btn:not(.admin-btn-ghost) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.admin-btn:not(.admin-btn-ghost)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        transparent 0%,
        oklch(100% 0 0 / .28) 45%,
        transparent 70%);
    transform: translateX(-110%);
    transition: transform var(--t-dur-slow) var(--t-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .admin-btn:not(.admin-btn-ghost):hover {
        box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--brass) 70%, transparent);
    }

    .admin-btn:not(.admin-btn-ghost):hover::after {
        transform: translateX(110%);
    }
}

.admin-btn:active,
.ed-btn:active {
    transform: translateY(1px);
}

.ed-btn,
.res-filter {
    border-radius: var(--t-radius-sm);
    transition:
        border-color var(--t-dur-base) var(--t-ease-out),
        color var(--t-dur-base) var(--t-ease-out),
        background-color var(--t-dur-base) var(--t-ease-out),
        transform var(--t-dur-fast) var(--t-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .ed-btn:hover {
        background-color: color-mix(in oklab, var(--brass) 8%, transparent);
    }
}

.status-badge,
.log-action {
    border-radius: var(--t-radius-sm);
}

/* ── 17.7 Focus, always ──────────────────────────────────────────────────-
   Restated at real specificity, exactly as for the website. */
.admin-shell :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: var(--t-radius-sm);
}

/* ── 17.8 Motion ─────────────────────────────────────────────────────────-
   One quiet fade when a page opens. No scroll reveals here: in a working tool
   a list that fades in row by row is in the way, not a pleasure.
   Fill mode "backwards", not "both": an opacity animation that stays in effect
   after it ends keeps <main> a stacking context of its own, and the table picker
   inside it (z-index 80) then ended up underneath the sticky header (z-index 20). */
@media (prefers-reduced-motion: no-preference) {
    .admin-main {
        animation: t-fade-in var(--t-dur-base) var(--t-ease-out) backwards;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-shell *,
    .admin-shell *::before,
    .admin-shell *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ── 17.9 Print ──────────────────────────────────────────────────────────-
   Printing a page of the administration (a reservation, a list) should put ink
   on paper, not grain. */
@media print {
    .admin-shell::after {
        display: none !important;
    }
}


/* ===========================================================================
   18. SATISFACTION SURVEY (Pages/Survey.cshtml)
   ---------------------------------------------------------------------------
   The survey renders #top, so everything above already applies to it - the
   palette, the grain, the form fields and their focus ring, the panel material
   of .form-box. This section only adds what the survey has of its own: the
   brass leaf on its title (the same as the hero headline) and a glow on the
   stars that are lit. The structure is in components.css.
   =========================================================================== */

#top {
    --star-glow: drop-shadow(0 0 .5rem color-mix(in oklab, var(--brass) 50%, transparent));
}

#top .survey-title {
    letter-spacing: var(--t-display-tracking);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    #top .survey-title {
        background-image: var(--t-foil);
        background-size: 180% 100%;
        background-position: 22% 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

#top .rating-star svg {
    transition:
        fill var(--t-dur-fast) var(--t-ease-out),
        stroke var(--t-dur-fast) var(--t-ease-out),
        filter var(--t-dur-base) var(--t-ease-out),
        transform var(--t-dur-fast) var(--t-ease-spring);
}

#top .rating-star:active svg {
    transform: scale(.9);
}

#top .survey-thanks {
    box-shadow: var(--t-card-edge), var(--t-shadow-card);
    background-image: linear-gradient(180deg, color-mix(in oklab, var(--brass) 3.5%, transparent) 0%, transparent 42%);
    animation: t-rise-soft 520ms var(--t-ease-out) both;
}

@media print {
    #top .survey-title {
        background-image: none !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }
}