/* /Components/Layout/CameraView.razor.rz.scp.css */
/* The camera is framed like the photographs: a brass hairline around a dark mat,
   so the live picture reads as one more thing hung in the cellar. */

.cel-camera[b-p510r4x2jz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cel-camera-frame[b-p510r4x2jz] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--cel-brass-line);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.9);
}

.cel-camera-frame[hidden][b-p510r4x2jz] {
    display: none;
}

.cel-camera-video[b-p510r4x2jz] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Brass corner brackets marking where the code should sit, echoing the scan icon. */
.cel-camera-sight[b-p510r4x2jz] {
    position: absolute;
    inset: 22% 12%;
    pointer-events: none;
    background:
        linear-gradient(var(--cel-flame), var(--cel-flame)) top left / 1.6rem 2px,
        linear-gradient(var(--cel-flame), var(--cel-flame)) top left / 2px 1.6rem,
        linear-gradient(var(--cel-flame), var(--cel-flame)) top right / 1.6rem 2px,
        linear-gradient(var(--cel-flame), var(--cel-flame)) top right / 2px 1.6rem,
        linear-gradient(var(--cel-flame), var(--cel-flame)) bottom left / 1.6rem 2px,
        linear-gradient(var(--cel-flame), var(--cel-flame)) bottom left / 2px 1.6rem,
        linear-gradient(var(--cel-flame), var(--cel-flame)) bottom right / 1.6rem 2px,
        linear-gradient(var(--cel-flame), var(--cel-flame)) bottom right / 2px 1.6rem;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 4px rgba(232, 161, 60, 0.55));
}

.cel-camera-status[b-p510r4x2jz] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--cel-parchment-dim);
}

.cel-camera-throb[b-p510r4x2jz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: cel-camera-beat-b-p510r4x2jz 1.1s ease-in-out infinite;
}

@keyframes cel-camera-beat-b-p510r4x2jz {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .cel-camera-throb[b-p510r4x2jz] {
        animation: none;
    }
}

.cel-camera-hint[b-p510r4x2jz] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cel-parchment-faint);
}

.cel-camera-note[b-p510r4x2jz] {
    margin: 0;
}

.cel-camera-actions[b-p510r4x2jz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cel-camera-actions .btn[b-p510r4x2jz] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.cel-camera-pick[b-p510r4x2jz] {
    font-size: 0.875rem;
}
/* /Components/Layout/CellarArtwork.razor.rz.scp.css */
/* The artwork breathes: the halo swells, the lamps flicker, the brass holds
   steady. Slow enough to be felt rather than watched. */

.cel-art[b-4dn21ccqiu] {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.75));
}

.cel-art-halo[b-4dn21ccqiu] {
    transform-origin: 379px 400px;
    animation: cel-art-swell-b-4dn21ccqiu 9s ease-in-out infinite;
}

.cel-art-lamps[b-4dn21ccqiu] {
    animation: cel-art-flicker-b-4dn21ccqiu 6.5s ease-in-out infinite;
}

.cel-art-knobs[b-4dn21ccqiu] {
    filter: drop-shadow(0 0 6px rgba(232, 161, 60, 0.55));
}

@keyframes cel-art-swell-b-4dn21ccqiu {
    0%, 100% { opacity: 0.82; transform: scale(0.97); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

@keyframes cel-art-flicker-b-4dn21ccqiu {
    0%, 100% { opacity: 0.9; }
    38%      { opacity: 1; }
    54%      { opacity: 0.76; }
    71%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
    .cel-art-halo[b-4dn21ccqiu],
    .cel-art-lamps[b-4dn21ccqiu] {
        animation: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The shell: a cabinet rail on the left, content in the lit space beside it. */

.page[b-ctave5mzy2] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-ctave5mzy2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The rail. Dark glass with a brass hairline down its outer edge, the way
   light catches the frame of the cabinet door. */
.sidebar[b-ctave5mzy2] {
    position: relative;
    background:
        linear-gradient(180deg, rgba(42, 26, 19, 0.92) 0%, rgba(20, 12, 9, 0.94) 55%, rgba(12, 7, 5, 0.96) 100%);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    box-shadow: 22px 0 48px -32px rgba(0, 0, 0, 0.95);
}

.sidebar[b-ctave5mzy2]::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        rgba(201, 161, 94, 0.34) 12%,
        rgba(201, 161, 94, 0.16) 60%,
        transparent);
    pointer-events: none;
}

/* Content sits in a measured column. Wide enough for the wine ledger,
   narrow enough that prose never runs long. */
article.content[b-ctave5mzy2] {
    flex: 1;
    width: 100%;
    max-width: 74rem;
    padding-top: 3.75rem;
    padding-bottom: 5rem;
}

@media (max-width: 640.98px) {
    article.content[b-ctave5mzy2] {
        padding-top: 2rem;
    }
}

@media (min-width: 641px) {
    .page[b-ctave5mzy2] {
        flex-direction: row;
    }

    .sidebar[b-ctave5mzy2] {
        width: 17.5rem;
        flex: none;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    article[b-ctave5mzy2] {
        padding-left: 3.25rem !important;
        padding-right: 3rem !important;
    }
}

@media (min-width: 1400px) {
    article[b-ctave5mzy2] {
        padding-left: 4.5rem !important;
    }
}

/* The error bar keeps the cellar palette rather than the browser's yellow. */
#blazor-error-ui[b-ctave5mzy2] {
    color-scheme: dark only;
    color: #f0bdb0;
    background: rgba(32, 12, 9, 0.97);
    border-top: 1px solid rgba(213, 98, 79, 0.5);
    bottom: 0;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    display: none;
    left: 0;
    font-size: 0.875rem;
    padding: 0.75rem 1.25rem 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    #blazor-error-ui .reload[b-ctave5mzy2] {
        color: #f0bd74;
    }

    #blazor-error-ui .dismiss[b-ctave5mzy2] {
        cursor: pointer;
        position: absolute;
        right: 0.9rem;
        top: 0.6rem;
        opacity: 0.7;
    }

    #blazor-error-ui .dismiss:hover[b-ctave5mzy2] {
        opacity: 1;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* The rail's contents: masthead, grouped navigation, language.

   Child components (NavLink, CelIcon, LanguagePicker) render outside this
   component's scope, so anything they emit is reached through ::deep. */

/* --- Masthead ------------------------------------------------------------ */

.cel-brand[b-sslqtw3d8p] {
    display: flex;
    align-items: center;
    padding: 1.9rem 1.5rem 1.5rem;
}

.cel-brand-mark[b-sslqtw3d8p] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    text-decoration: none;
}

/* The cabinet knob, catching the light — and flickering like the lamps
   behind the glass in the cellar. */
.cel-brand-knob[b-sslqtw3d8p] {
    flex: none;
    width: 11px;
    height: 11px;
    margin-top: 0.55rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ffe4b8, #c9a15e 46%, #6d5228 100%);
    box-shadow: 0 0 12px rgba(232, 161, 60, 0.65), 0 0 26px rgba(232, 161, 60, 0.3);
    animation: cel-flicker 5.5s ease-in-out infinite;
}

.cel-brand-word[b-sslqtw3d8p] {
    display: flex;
    flex-direction: column;
    line-height: 0.92;
}

/* A stacked didone masthead: the two halves of the name set as a wine
   label would set them, the second in brass. */
.cel-brand-line[b-sslqtw3d8p] {
    font-family: "Bodoni Moda", "Bodoni MT", Didot, "Hoefler Text", Garamond, serif;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #f5ece1;
}

.cel-brand-line-alt[b-sslqtw3d8p] {
    padding-left: 0.9em;
    font-style: italic;
    color: #c9a15e;
}

.cel-brand-mark:hover .cel-brand-line[b-sslqtw3d8p] {
    color: #ffe4b8;
}

.cel-brand-mark:hover .cel-brand-line-alt[b-sslqtw3d8p] {
    color: #f0bd74;
}

/* --- Mobile toggle ------------------------------------------------------- */

.navbar-toggler[b-sslqtw3d8p] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    position: absolute;
    top: 1.5rem;
    right: 1.1rem;
    border: 1px solid rgba(201, 161, 94, 0.22);
    border-radius: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23c9a15e' stroke-linecap='round' stroke-width='1.6' d='M6 9.5h18M6 15h18M6 20.5h18'/%3E%3C/svg%3E") no-repeat center/1.6rem rgba(255, 236, 210, 0.04);
    transition: background-color 0.2s cubic-bezier(0.22, 0.68, 0.24, 1),
                border-color 0.2s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.navbar-toggler:hover[b-sslqtw3d8p],
.navbar-toggler:checked[b-sslqtw3d8p] {
    background-color: rgba(232, 161, 60, 0.16);
    border-color: rgba(201, 161, 94, 0.5);
}

.navbar-toggler:focus-visible[b-sslqtw3d8p] {
    outline: none;
    box-shadow: 0 0 0 1px #0c0705, 0 0 0 3px rgba(201, 161, 94, 0.65);
}

/* --- Section labels ------------------------------------------------------ */

.cel-nav-section[b-sslqtw3d8p] {
    margin: 1.5rem 0 0.55rem;
    padding: 0 1.5rem;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cel-parchment-quiet);
}

/* --- Navigation items ---------------------------------------------------- */

.nav-item[b-sslqtw3d8p] {
    font-size: 0.9rem;
    padding-bottom: 0.1rem;
}

    .nav-item:first-of-type[b-sslqtw3d8p] {
        padding-top: 0.25rem;
    }

    .nav-item:last-of-type[b-sslqtw3d8p] {
        padding-bottom: 0.5rem;
    }

    /* One rule for both the anchors NavLink renders and the logout button. */
    .nav-item[b-sslqtw3d8p]  .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
        height: auto;
        min-height: 2.6rem;
        padding: 0.5rem 0.85rem 0.5rem 0.9rem;
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: 350;
        line-height: 1.35;
        text-align: left;
        color: #cbb9a6;
        background: none;
        border: none;
        border-radius: 3px;
        text-decoration: none;
        overflow-wrap: anywhere;
        transition: color 0.2s cubic-bezier(0.22, 0.68, 0.24, 1),
                    background-color 0.2s cubic-bezier(0.22, 0.68, 0.24, 1);
    }

    /* The brass indicator: a hairline that grows into a bar when active. */
    .nav-item[b-sslqtw3d8p]  .nav-link::before {
        content: "";
        position: absolute;
        left: -0.55rem;
        top: 50%;
        width: 2px;
        height: 0;
        border-radius: 2px;
        background: linear-gradient(180deg, #ffe4b8, #c9a15e);
        box-shadow: 0 0 9px rgba(232, 161, 60, 0.7);
        transform: translateY(-50%);
        transition: height 0.25s cubic-bezier(0.22, 0.68, 0.24, 1);
    }

    .nav-item[b-sslqtw3d8p]  .nav-link:hover {
        color: #f5ece1;
        background-color: rgba(255, 236, 210, 0.045);
    }

    .nav-item[b-sslqtw3d8p]  .nav-link:hover::before {
        height: 42%;
    }

    .nav-item[b-sslqtw3d8p]  .nav-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 1px #0c0705, 0 0 0 3px rgba(201, 161, 94, 0.6);
    }

    .nav-item[b-sslqtw3d8p]  a.active {
        color: #ffe4b8;
        background: linear-gradient(90deg, rgba(232, 161, 60, 0.16), rgba(232, 161, 60, 0.02) 78%, transparent);
    }

    .nav-item[b-sslqtw3d8p]  a.active::before {
        height: 68%;
    }

    /* Icons sit a shade quieter than their label until the row lights up. */
    .nav-item[b-sslqtw3d8p]  .cel-ico {
        flex: none;
        opacity: 0.62;
        transition: opacity 0.2s cubic-bezier(0.22, 0.68, 0.24, 1);
    }

    .nav-item[b-sslqtw3d8p]  .nav-link:hover .cel-ico {
        opacity: 0.9;
    }

    .nav-item[b-sslqtw3d8p]  a.active .cel-ico {
        opacity: 1;
        color: #e8a13c;
    }

    .nav-item form[b-sslqtw3d8p] {
        margin: 0;
    }

/* --- Language picker ----------------------------------------------------- */

.nav-scrollable[b-sslqtw3d8p]  .language-picker {
    margin-top: 1.75rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(201, 161, 94, 0.11);
}

.nav-scrollable[b-sslqtw3d8p]  .language-picker .form-label {
    font-size: 0.625rem;
    letter-spacing: 0.24em;
    color: var(--cel-parchment-quiet);
}

/* --- Collapse behaviour -------------------------------------------------- */

.nav-scrollable[b-sslqtw3d8p] {
    display: none;
    padding-bottom: 1.5rem;
}

.navbar-toggler:checked ~ .nav-scrollable[b-sslqtw3d8p] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-sslqtw3d8p] {
        display: none;
    }

    .nav-scrollable[b-sslqtw3d8p] {
        /* Never collapse the rail on wide screens. */
        display: block;

        /* Let a tall menu scroll on its own. */
        height: calc(100vh - 7.25rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/PhotoViewer.razor.rz.scp.css */
/* The viewer dims the whole cellar and hangs the photo in the middle of it, with the controls in
   brass along the top and at the sides. */

.cel-viewer[b-ozv4q01rin] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    background: #080403;
    outline: none;
}

.cel-viewer-bar[b-ozv4q01rin] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    padding-top: max(0.6rem, env(safe-area-inset-top));
}

.cel-viewer-count[b-ozv4q01rin] {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--cel-parchment-dim);
}

.cel-viewer-tools[b-ozv4q01rin] {
    display: flex;
    gap: 0.4rem;
}

.cel-viewer-tool[b-ozv4q01rin],
.cel-viewer-nav[b-ozv4q01rin] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--cel-parchment);
    border: 1px solid var(--cel-brass-line);
    border-radius: 50%;
    background: rgba(20, 12, 9, 0.8);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.cel-viewer-tool[b-ozv4q01rin] {
    width: 2.6rem;
    height: 2.6rem;
}

.cel-viewer-tool:hover[b-ozv4q01rin],
.cel-viewer-nav:hover:not(:disabled)[b-ozv4q01rin] {
    color: var(--cel-glow);
    border-color: var(--cel-brass);
    background: rgba(232, 161, 60, 0.14);
}

.cel-viewer-tool:focus-visible[b-ozv4q01rin],
.cel-viewer-nav:focus-visible[b-ozv4q01rin] {
    outline: 2px solid var(--cel-flame);
    outline-offset: 2px;
}

/* The photo fills the space left under the bar; gestures are ours, not the browser's. */
.cel-viewer-stage[b-ozv4q01rin] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 0.75rem 0.75rem;
    touch-action: none;
}

.cel-viewer-img[b-ozv4q01rin] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.95);
}

.cel-viewer-img.cel-viewer-zoomed[b-ozv4q01rin] {
    cursor: grab;
}

.cel-viewer-nav[b-ozv4q01rin] {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
}

.cel-viewer-nav:disabled[b-ozv4q01rin] {
    opacity: 0.3;
    cursor: default;
}

.cel-viewer-prev[b-ozv4q01rin] {
    left: 1rem;
}

.cel-viewer-next[b-ozv4q01rin] {
    right: 1rem;
}

/* On a phone the photo gets the width; the arrows sit low, clear of the label, and swiping
   does the same job. */
@media (max-width: 40rem) {
    .cel-viewer-nav[b-ozv4q01rin] {
        top: auto;
        bottom: max(1rem, env(safe-area-inset-bottom));
        transform: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* --- Hero ---------------------------------------------------------------- */

.cel-hero[b-qfjyf1ag2x] {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 4rem;
}

.cel-hero-copy[b-qfjyf1ag2x] {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.cel-hero-title[b-qfjyf1ag2x] {
    font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.6rem);
    line-height: 0.96;
    letter-spacing: -0.028em;
    margin: 0 0 1.1rem;
    /* The lit bottle in the artwork throws a little of its warmth onto the
       heading, which keeps the two halves of the hero related. */
    text-shadow: 0 0 60px rgba(232, 161, 60, 0.22);
}

.cel-lede[b-qfjyf1ag2x] {
    max-width: 34ch;
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.6;
    color: #cbb9a6;
    margin-bottom: 2rem;
}

.cel-hero-actions[b-qfjyf1ag2x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* The cabinet is seen obliquely, the way the eye meets it walking past —
   the same angle the photograph takes. */
.cel-hero-art[b-qfjyf1ag2x] {
    min-width: 0;
    transform: perspective(1400px) rotateY(-9deg) rotateZ(0.5deg);
    transform-origin: left center;
}

.cel-hero-art[b-qfjyf1ag2x]  .cel-art {
    max-height: 30rem;
    margin-inline: auto;
}

@media (min-width: 62rem) {
    .cel-hero[b-qfjyf1ag2x] {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 3.5rem;
        min-height: 32rem;
        margin-bottom: 5.5rem;
    }

    /* Let the cabinet run off the right edge of the measure, as though the
       row of them continues past the frame. */
    .cel-hero-art[b-qfjyf1ag2x] {
        margin-right: -3rem;
    }

    .cel-hero-art[b-qfjyf1ag2x]  .cel-art {
        max-height: 34rem;
    }
}

@media (max-width: 40rem) {
    .cel-hero-art[b-qfjyf1ag2x] {
        transform: none;
    }

    .cel-hero-art[b-qfjyf1ag2x]  .cel-art {
        max-height: 20rem;
    }
}

/* --- Cellar figures ------------------------------------------------------ */

/* The 1px grid gap shows through as the hairline between figures, which only
   works while every row is full: auto-fit left three figures in a 2 + 1 grid,
   and the empty cell showed the hairline colour as a block. The column count
   is therefore explicit — one or three, never two. */
.cel-stats[b-qfjyf1ag2x] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-bottom: 3.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid rgba(201, 161, 94, 0.22);
    border-bottom: 1px solid rgba(201, 161, 94, 0.11);
    background: rgba(201, 161, 94, 0.11);
}

.cel-stat[b-qfjyf1ag2x] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 1.75rem;
    background: #140c09;
}

.cel-stat:first-child[b-qfjyf1ag2x] {
    padding-left: 0;
}

/* Stacked, each figure reads better as a line of a ledger: number on the
   left, what it counts on the right. */
@media (max-width: 33.99rem) {
    .cel-stats[b-qfjyf1ag2x] {
        padding: 0.5rem 0;
    }

    .cel-stat[b-qfjyf1ag2x] {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 0;
    }
}

@media (min-width: 34rem) {
    .cel-stats[b-qfjyf1ag2x] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cel-stat-value[b-qfjyf1ag2x] {
    font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
    color: #ffe4b8;
    text-shadow: 0 0 40px rgba(232, 161, 60, 0.3);
}

/* Bottles drunk is history rather than inventory, so it sits back a little. */
.cel-stat-value-quiet[b-qfjyf1ag2x] {
    color: #cbb9a6;
    text-shadow: none;
}

.cel-stat-label[b-qfjyf1ag2x] {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cel-parchment-faint);
}

/* --- Feature deck -------------------------------------------------------- */

/* Two by two rather than auto-fit: four features divide evenly, and each card
   keeps enough measure for its sentence. */
.cel-deck[b-qfjyf1ag2x] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 48rem) {
    .cel-deck[b-qfjyf1ag2x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem;
    }
}

.cel-card[b-qfjyf1ag2x] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid rgba(201, 161, 94, 0.11);
    border-radius: 5px;
    background: linear-gradient(158deg, rgba(60, 36, 26, 0.62), rgba(46, 27, 20, 0.55) 55%, rgba(12, 7, 5, 0.45));
    box-shadow: 0 1px 0 rgba(255, 226, 184, 0.09) inset, 0 18px 40px -18px rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.68, 0.24, 1),
                border-color 0.28s cubic-bezier(0.22, 0.68, 0.24, 1),
                box-shadow 0.28s cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* Light gathers at the top edge of the pane, and warms on hover. */
.cel-card[b-qfjyf1ag2x]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 226, 184, 0.28) 50%, transparent);
    opacity: 0.6;
    transition: opacity 0.28s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.cel-card:hover[b-qfjyf1ag2x],
.cel-card:focus-visible[b-qfjyf1ag2x] {
    transform: translateY(-3px);
    border-color: rgba(201, 161, 94, 0.4);
    box-shadow: 0 1px 0 rgba(255, 226, 184, 0.16) inset,
                0 26px 56px -20px rgba(0, 0, 0, 0.9),
                0 0 34px -14px rgba(232, 161, 60, 0.35);
    outline: none;
}

.cel-card:hover[b-qfjyf1ag2x]::before,
.cel-card:focus-visible[b-qfjyf1ag2x]::before {
    opacity: 1;
}

.cel-card:focus-visible[b-qfjyf1ag2x] {
    border-color: #c9a15e;
}

/* The icon sits in a brass ring: the cabinet knob, once more. */
.cel-card-ico[b-qfjyf1ag2x] {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    color: #c9a15e;
    border: 1px solid rgba(201, 161, 94, 0.28);
    background: radial-gradient(circle at 34% 28%, rgba(255, 226, 184, 0.14), rgba(0, 0, 0, 0.28));
    transition: color 0.28s cubic-bezier(0.22, 0.68, 0.24, 1),
                border-color 0.28s cubic-bezier(0.22, 0.68, 0.24, 1),
                box-shadow 0.28s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.cel-card:hover .cel-card-ico[b-qfjyf1ag2x] {
    color: #ffe4b8;
    border-color: rgba(201, 161, 94, 0.6);
    box-shadow: 0 0 22px -6px rgba(232, 161, 60, 0.6);
}

.cel-card-body[b-qfjyf1ag2x] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.cel-card-title[b-qfjyf1ag2x] {
    font-family: "Bodoni Moda", "Bodoni MT", Didot, "Hoefler Text", Garamond, serif;
    font-size: 1.2rem;
    line-height: 1.2;
    color: #f5ece1;
    transition: color 0.28s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.cel-card:hover .cel-card-title[b-qfjyf1ag2x] {
    color: #ffe4b8;
}

.cel-card-text[b-qfjyf1ag2x] {
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.55;
    color: var(--cel-parchment-faint);
}

.cel-card-arrow[b-qfjyf1ag2x] {
    flex: none;
    align-self: center;
    color: var(--cel-brass-quiet);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.28s cubic-bezier(0.22, 0.68, 0.24, 1),
                transform 0.28s cubic-bezier(0.22, 0.68, 0.24, 1),
                color 0.28s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.cel-card:hover .cel-card-arrow[b-qfjyf1ag2x],
.cel-card:focus-visible .cel-card-arrow[b-qfjyf1ag2x] {
    color: #f0bd74;
    opacity: 1;
    transform: none;
}

@media (max-width: 30rem) {
    .cel-card[b-qfjyf1ag2x] {
        padding: 1.25rem 1.3rem;
    }
}
/* /Components/Pages/Wines/BottleScan.razor.rz.scp.css */
/* The scan page is one task, so it keeps a narrow measure and puts the code
   field where the eye lands first. */

.cel-scan[b-16376g0od4] {
    max-width: 48rem;
}

/* --- The code field ------------------------------------------------------ */

.cel-scan-panel[b-16376g0od4] {
    margin-bottom: 2rem;
}

.cel-scan-field[b-16376g0od4] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}

.cel-scan-ico[b-16376g0od4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3rem;
    color: #c9a15e;
    border: 1px solid rgba(201, 161, 94, 0.11);
    border-radius: 3px;
    background: rgba(6, 3, 2, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) inset;
}

/* Typography comes from the global .cel-code-field; this is only the sizing. */
.cel-scan-input[b-16376g0od4] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
}

/* The other ways in: the camera, or a photo already taken. */
.cel-scan-sources[b-16376g0od4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.cel-scan-sources .btn[b-16376g0od4] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

/* A keyboard user tabs to the hidden file input, so its label shows the focus. */
.cel-scan-sources input:focus-visible + label[b-16376g0od4] {
    outline: 2px solid var(--cel-flame);
    outline-offset: 2px;
}

.cel-scan-camera[b-16376g0od4] {
    margin-top: 1rem;
}

.cel-scan-message[b-16376g0od4] {
    margin: 1rem 0 0;
}

@media (max-width: 34rem) {
    .cel-scan-sources .btn[b-16376g0od4] {
        flex: 1 1 10rem;
        justify-content: center;
    }

    .cel-scan-field[b-16376g0od4] {
        flex-wrap: wrap;
    }

    .cel-scan-input[b-16376g0od4] {
        flex: 1 1 8rem;
    }
}

/* --- The result ---------------------------------------------------------- */

.cel-dossier-head[b-16376g0od4] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
    padding-bottom: 1.4rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid rgba(201, 161, 94, 0.11);
}

.cel-dossier-head[b-16376g0od4]  .cel-dossier-capsule {
    margin-top: 0.5rem;
}

.cel-dossier-head .cel-eyebrow[b-16376g0od4] {
    margin-bottom: 0.35rem;
}

.cel-dossier-name[b-16376g0od4] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 1.9rem;
    line-height: 1.1;
    margin: 0;
}

.cel-dossier-vintage[b-16376g0od4] {
    font-size: 1.15rem;
    font-variant-numeric: lining-nums tabular-nums;
    color: #c9a15e;
}

.cel-dossier-producer[b-16376g0od4] {
    margin: 0.4rem 0 0;
    font-size: 0.9375rem;
    font-weight: 300;
    color: #cbb9a6;
}

.cel-dossier-figures[b-16376g0od4] {
    display: flex;
    gap: 1.75rem;
}

.cel-dossier-undo[b-16376g0od4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.4rem;
}

.cel-dossier-empty[b-16376g0od4] {
    margin: 0;
    color: var(--cel-parchment-faint);
}

.cel-dossier-notes[b-16376g0od4] {
    margin-bottom: 1rem;
}

.cel-dossier-foot[b-16376g0od4] {
    margin-top: 1.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(201, 161, 94, 0.11);
}

/* --- Storage places ------------------------------------------------------ */

.cel-places[b-16376g0od4] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(201, 161, 94, 0.11);
}

.cel-place[b-16376g0od4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.1rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid rgba(201, 161, 94, 0.11);
    transition: background-color 0.2s cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* On a phone the button's own text ("Mark as consumed") is wider than the
   space left over, which starved the place name down to 26px and broke
   "Under the stairs" into five lines. The button drops to its own row so
   nothing has to compete with its label. */
@media (max-width: 34rem) {
    .cel-place[b-16376g0od4] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.7rem 1rem;
    }

    .cel-place button[b-16376g0od4] {
        grid-column: 1 / -1;
    }
}

.cel-place:hover[b-16376g0od4] {
    background: rgba(232, 161, 60, 0.05);
}

.cel-place-name[b-16376g0od4] {
    min-width: 0;
    font-size: 0.9375rem;
    color: #f5ece1;
    overflow-wrap: anywhere;
}

/* The count of bottles here, boxed like a shelf tag. */
.cel-place-qty[b-16376g0od4] {
    flex: none;
    min-width: 2.4rem;
    padding: 0.15rem 0.5rem;
    text-align: center;
    font-size: 1.05rem;
    color: #ffe4b8;
    border: 1px solid rgba(201, 161, 94, 0.22);
    border-radius: 2px;
    background: rgba(232, 161, 60, 0.08);
}

@media (max-width: 40rem) {
    .cel-dossier-head[b-16376g0od4] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cel-dossier-figures[b-16376g0od4] {
        grid-column: 2;
    }

    .cel-dossier-figures .cel-count[b-16376g0od4] {
        align-items: flex-start;
    }

    .cel-dossier-name[b-16376g0od4] {
        font-size: 1.55rem;
    }
}
/* /Components/Pages/Wines/NewWine/CameraScreen.razor.rz.scp.css */
/* The camera over the whole screen, like a phone's camera app. The controls float straight on
   the picture, with a soft shadow under the text and icons to keep them readable on a light
   label. */

.cel-cam[b-7wrso9h2lw] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    height: 100dvh;
    overflow: hidden;
    background: #080403;
    color: var(--cel-parchment);
    font-family: var(--cel-sans);
}

.cel-cam-video[b-7wrso9h2lw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cel-cam-video[hidden][b-7wrso9h2lw] {
    display: none;
}

.cel-cam-center[b-7wrso9h2lw] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0 2rem;
    text-align: center;
    color: var(--cel-parchment-dim);
}

/* --- Along the top ---------------------------------------------------------- */

.cel-cam-top[b-7wrso9h2lw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem 0.5rem;
}

.cel-cam-step[b-7wrso9h2lw] {
    flex: 1;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cel-parchment);
}

.cel-cam-tool[b-7wrso9h2lw],
.cel-cam[b-7wrso9h2lw]  .cel-cam-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cel-parchment);
}

.cel-cam-tool[aria-pressed="true"][b-7wrso9h2lw],
.cel-cam[b-7wrso9h2lw]  .cel-cam-tool[aria-pressed="true"] {
    color: var(--cel-glow);
}

/* --- Notes under the top bar ------------------------------------------------- */

.cel-cam-notices[b-7wrso9h2lw] {
    position: absolute;
    top: calc(max(0.5rem, env(safe-area-inset-top)) + 3.5rem);
    left: 1rem;
    right: 1rem;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
}

.cel-cam-pill[b-7wrso9h2lw],
.cel-cam[b-7wrso9h2lw]  .cel-cam-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    margin: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(12, 7, 5, 0.82);
    font-size: 0.8125rem;
    color: var(--cel-parchment);
}

.cel-cam-pill-warn[b-7wrso9h2lw],
.cel-cam[b-7wrso9h2lw]  .cel-cam-pill-warn {
    border-radius: var(--cel-radius);
    color: #f0bdb0;
}

.cel-cam[b-7wrso9h2lw]  .alert {
    margin: 0;
}

/* --- Along the bottom -------------------------------------------------------- */

.cel-cam-bottom[b-7wrso9h2lw] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1rem max(0.75rem, env(safe-area-inset-bottom));
}

/* Without a veil, the text and icons need their own shadow to stand out on a light label. */
.cel-cam-top[b-7wrso9h2lw],
.cel-cam-bottom[b-7wrso9h2lw] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.cel-cam-tool[b-7wrso9h2lw],
.cel-cam[b-7wrso9h2lw]  .cel-cam-tool {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.cel-cam-hint[b-7wrso9h2lw] {
    margin: 0;
    font-size: 0.875rem;
    text-align: center;
    color: var(--cel-parchment);
}

.cel-cam-lenses[b-7wrso9h2lw] {
    display: flex;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.25rem;
    overflow-x: auto;
    border-radius: 999px;
    background: rgba(30, 18, 14, 0.85);
}

.cel-cam-lens[b-7wrso9h2lw] {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cel-parchment);
    font-size: 0.875rem;
    font-weight: 500;
}

.cel-cam-lens[aria-pressed="true"][b-7wrso9h2lw] {
    background: #3b2a20;
    color: var(--cel-glow);
}

/* Photos left, shutter in the middle, the way on right: the camera app's own row. */
.cel-cam-row[b-7wrso9h2lw] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding: 0 0.75rem;
}

.cel-cam-start[b-7wrso9h2lw] {
    justify-self: start;
}

.cel-cam-end[b-7wrso9h2lw] {
    justify-self: end;
}

.cel-cam-shutter[b-7wrso9h2lw] {
    display: flex;
    width: 4.9rem;
    height: 4.9rem;
    padding: 0.25rem;
    border: 4px solid var(--cel-parchment);
    border-radius: 50%;
    background: transparent;
}

.cel-cam-shutter > span[b-7wrso9h2lw] {
    flex: 1;
    border-radius: 50%;
    background: var(--cel-parchment);
    transition: transform 0.15s var(--cel-ease);
}

.cel-cam-shutter:active:not(:disabled) > span[b-7wrso9h2lw] {
    transform: scale(0.88);
}

.cel-cam-shutter:disabled[b-7wrso9h2lw] {
    opacity: 0.5;
}

.cel-cam-shutter:focus-visible[b-7wrso9h2lw] {
    outline: 2px solid var(--cel-flame);
    outline-offset: 3px;
}

/* The page's round buttons beside the shutter: the photos, and the way on. */
.cel-cam[b-7wrso9h2lw]  .cel-cam-round {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: 2px solid var(--cel-parchment);
    border-radius: 50%;
    background: rgba(30, 18, 14, 0.85);
    color: var(--cel-parchment);
}

.cel-cam[b-7wrso9h2lw]  .cel-cam-round img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cel-cam[b-7wrso9h2lw]  .cel-cam-badge {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.3rem;
    border-radius: 0.7rem;
    background: var(--cel-brass);
    color: #1a0f0b;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4rem;
    text-align: center;
}

.cel-cam[b-7wrso9h2lw]  .cel-cam-next {
    border: 0;
    background: var(--cel-brass);
    color: #1a0f0b;
}

.cel-cam[b-7wrso9h2lw]  .cel-cam-round:disabled {
    opacity: 0.6;
}

/* Upload, photo and typing it in, as the camera app lists its modes. */
.cel-cam[b-7wrso9h2lw]  .cel-cam-tabs {
    display: flex;
    gap: 1.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cel-cam[b-7wrso9h2lw]  .cel-cam-tab {
    margin: 0;
    padding: 0.6rem 0;
    border: 0;
    background: transparent;
    color: var(--cel-parchment-dim);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.cel-cam[b-7wrso9h2lw]  .cel-cam-tab[aria-current="true"] {
    color: var(--cel-parchment);
    font-weight: 500;
    cursor: default;
}

.cel-cam[b-7wrso9h2lw]  .cel-cam-tab:disabled {
    opacity: 0.5;
}

/* A pulse while something is working. */
.cel-throb[b-7wrso9h2lw],
.cel-cam[b-7wrso9h2lw]  .cel-throb {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    animation: cel-throb-beat-b-7wrso9h2lw 1.1s ease-in-out infinite;
}

@keyframes cel-throb-beat-b-7wrso9h2lw {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .cel-throb[b-7wrso9h2lw],
    .cel-cam[b-7wrso9h2lw]  .cel-throb {
        animation: none;
    }
}
/* /Components/Pages/Wines/NewWine/NewWineSteps.razor.rz.scp.css */
/* Layout B: one step per screen, with the way on pinned to the bottom. */

.cel-steps-head[b-we4by38dr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.cel-steps-head h1[b-we4by38dr1] {
    margin: 0;
}

.cel-steps-back[b-we4by38dr1] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--cel-parchment);
}

.cel-steps[b-we4by38dr1] {
    display: grid;
    gap: 1.25rem;
    max-width: 40rem;
}

.cel-steps-thumbs[b-we4by38dr1] {
    display: flex;
    gap: 0.5rem;
}

.cel-steps-thumb[b-we4by38dr1] {
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    object-fit: cover;
    border: 1px solid var(--cel-brass-line);
    border-radius: 2px;
}

.cel-steps-summary[b-we4by38dr1] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.cel-steps-name[b-we4by38dr1] {
    margin: 0;
    font-family: var(--cel-display);
    font-size: 1.2rem;
}

.cel-steps-vintage[b-we4by38dr1] {
    color: var(--cel-parchment-faint);
}

.cel-steps-meta[b-we4by38dr1] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cel-parchment-faint);
}

/* The way on stays in reach at the bottom of the screen. */
.cel-steps-bar[b-we4by38dr1] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid;
    gap: 0.5rem;
    justify-items: center;
    padding: 0.75rem 0 1rem;
    background: linear-gradient(transparent, var(--cel-ink) 35%);
}

.cel-steps-bar > .btn-primary[b-we4by38dr1] {
    width: 100%;
    min-height: 3rem;
}

.cel-steps-skip[b-we4by38dr1] {
    font-size: 0.875rem;
}
/* /Components/Pages/Wines/NewWine/WineBottles.razor.rz.scp.css */
/* Where the bottles of a new wine are kept: one row per place with a count. */

.cel-bottles[b-tebzqsoi2p] {
    display: grid;
    gap: 0.6rem;
}

.cel-bottle-row[b-tebzqsoi2p] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.cel-bottle-row > .form-control[b-tebzqsoi2p] {
    flex: 1 1 auto;
    min-width: 0;
}

.cel-bottle-remove[b-tebzqsoi2p] {
    flex: none;
    width: 2.75rem;
    padding: 0;
    color: var(--cel-parchment-faint);
    border: 1px solid var(--cel-brass-line);
    border-radius: var(--cel-radius);
    background: none;
}

.cel-bottle-remove:hover[b-tebzqsoi2p],
.cel-bottle-remove:focus-visible[b-tebzqsoi2p] {
    color: var(--cel-glow);
    border-color: var(--cel-bad);
}

.cel-bottle-add[b-tebzqsoi2p] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
}

.cel-bottles-total[b-tebzqsoi2p] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--cel-parchment-faint);
}

/* A stepper cut from one piece of brass-edged glass. */
.cel-stepper[b-tebzqsoi2p] {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    border: 1px solid rgba(201, 161, 94, 0.22);
    border-radius: 3px;
    background: rgba(6, 3, 2, 0.5);
    overflow: hidden;
}

.cel-step[b-tebzqsoi2p] {
    width: 2.75rem;
    padding: 0;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    color: #c9a15e;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s cubic-bezier(0.22, 0.68, 0.24, 1),
                background-color 0.15s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.cel-step:hover:not(:disabled)[b-tebzqsoi2p] {
    color: #ffe4b8;
    background: rgba(232, 161, 60, 0.18);
}

.cel-step:disabled[b-tebzqsoi2p] {
    color: var(--cel-parchment-hush);
    cursor: default;
}

.cel-step:focus-visible[b-tebzqsoi2p] {
    outline: none;
    color: #ffe4b8;
    background: rgba(232, 161, 60, 0.24);
    box-shadow: 0 0 0 2px rgba(201, 161, 94, 0.6) inset;
}

.cel-step-count[b-tebzqsoi2p] {
    display: grid;
    place-items: center;
    min-width: 2.1rem;
    padding: 0.35rem 0.35rem;
    font-size: 1.05rem;
    color: #ffe4b8;
    border-inline: 1px solid rgba(201, 161, 94, 0.16);
}
/* /Components/Pages/Wines/NewWine/WineDetails.razor.rz.scp.css */
/* The fields of a new wine, laid out as on the edit page. */

.cel-fields[b-5z0vjd143k] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.15rem 1rem;
}

.cel-f[b-5z0vjd143k] {
    min-width: 0;
}

.cel-f-full[b-5z0vjd143k]  { grid-column: span 6; }
.cel-f-half[b-5z0vjd143k]  { grid-column: span 3; }
.cel-f-third[b-5z0vjd143k] { grid-column: span 2; }

@media (max-width: 34rem) {
    .cel-f-half[b-5z0vjd143k],
    .cel-f-third[b-5z0vjd143k] {
        grid-column: span 6;
    }
}

/* A value the AI filled in and the user should check. */
.cel-ai-filled[b-5z0vjd143k] {
    border-color: var(--cel-brass);
    background-color: rgba(201, 161, 94, 0.08);
}

.cel-scanned-mark[b-5z0vjd143k] {
    font-size: 0.8125rem;
    color: var(--cel-good);
}
/* /Components/Pages/Wines/Pairing.razor.rz.scp.css */
/* A consultation: one question, one considered answer. Narrow measure, and the
   answer set in the display face so it reads as a recommendation rather than
   as output. */

.cel-pairing[b-l02p9gaj7s] {
    max-width: 46rem;
}

.cel-hint[b-l02p9gaj7s] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.8rem 0 0;
    font-size: 0.8125rem;
    color: var(--cel-parchment-faint);
}

.cel-hint[b-l02p9gaj7s]  .cel-ico {
    flex: none;
    color: var(--cel-brass-quiet);
}

/* --- The question -------------------------------------------------------- */

.cel-ask[b-l02p9gaj7s] {
    margin-bottom: 2.25rem;
}

/* InputTextArea renders the <textarea> itself, outside this component's CSS
   scope, so the rule has to reach through with ::deep. */
.cel-ask[b-l02p9gaj7s]  .cel-ask-input {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.cel-ask-foot[b-l02p9gaj7s] {
    display: flex;
    justify-content: flex-end;
}

/* A pulse in place of the icon while the model is thinking. */
.cel-ask-pulse[b-l02p9gaj7s] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: cel-ask-throb-b-l02p9gaj7s 1.1s ease-in-out infinite;
}

@keyframes cel-ask-throb-b-l02p9gaj7s {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* --- The answer ---------------------------------------------------------- */

.cel-result[b-l02p9gaj7s] {
    margin-top: 0;
}

/* The sommelier's verdict, set large in the didone and lit from the left. */
.cel-verdict[b-l02p9gaj7s] {
    max-width: none;
    margin: 0 0 2rem;
    padding: 0 0 0 1.5rem;
    border-left: 2px solid #c9a15e;
    font-family: "Bodoni Moda", "Bodoni MT", Didot, "Hoefler Text", Garamond, serif;
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.45;
    color: #ffe4b8;
    text-wrap: pretty;
}

.cel-picks[b-l02p9gaj7s] {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.cel-pick[b-l02p9gaj7s] {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    padding: 1.35rem 0;
    border-top: 1px solid rgba(201, 161, 94, 0.11);
}

.cel-pick:first-child[b-l02p9gaj7s] {
    border-top-color: rgba(201, 161, 94, 0.22);
}

/* The rank, taken from the list counter so it is always right. */
.cel-pick[b-l02p9gaj7s]::before {
    content: counter(list-item);
    font-family: "Bodoni Moda", "Bodoni MT", Didot, "Hoefler Text", Garamond, serif;
    font-size: 1.85rem;
    font-variant-numeric: lining-nums;
    line-height: 1;
    color: var(--cel-brass-quiet);
}

.cel-pick:first-child[b-l02p9gaj7s]::before {
    color: #c9a15e;
    text-shadow: 0 0 22px rgba(232, 161, 60, 0.5);
}

.cel-pick-body[b-l02p9gaj7s] {
    min-width: 0;
}

.cel-pick-name[b-l02p9gaj7s] {
    display: inline-block;
    font-family: "Bodoni Moda", "Bodoni MT", Didot, "Hoefler Text", Garamond, serif;
    font-size: 1.3rem;
    line-height: 1.2;
    color: #f5ece1;
    text-decoration: none;
}

.cel-pick-name:hover[b-l02p9gaj7s],
.cel-pick-name:focus-visible[b-l02p9gaj7s] {
    color: #ffe4b8;
    outline: none;
    box-shadow: 0 2px 0 #c9a15e;
}

.cel-pick-reason[b-l02p9gaj7s] {
    max-width: none;
    margin: 0.45rem 0 0;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.6;
    color: #cbb9a6;
    text-wrap: pretty;
}

@media (max-width: 34rem) {
    .cel-verdict[b-l02p9gaj7s] {
        font-size: 1.15rem;
        padding-left: 1.1rem;
    }

    .cel-pick[b-l02p9gaj7s] {
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    .cel-pick[b-l02p9gaj7s]::before {
        font-size: 1.45rem;
    }
}
/* /Components/Pages/Wines/WineEdit.razor.rz.scp.css */
/* The wine form: the record on the left, the physical things — photographs and
   bottles — on the right. */

.cel-notice[b-t0x68rk9eo] {
    margin-bottom: 1.75rem;
}

.cel-edit[b-t0x68rk9eo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 64rem) {
    .cel-edit[b-t0x68rk9eo] {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 1.75rem;
    }
}

/* --- The record ---------------------------------------------------------- */

.cel-fields[b-t0x68rk9eo] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.15rem 1rem;
}

.cel-f[b-t0x68rk9eo] {
    min-width: 0;
}

.cel-f-full[b-t0x68rk9eo]  { grid-column: span 6; }
.cel-f-half[b-t0x68rk9eo]  { grid-column: span 3; }
.cel-f-third[b-t0x68rk9eo] { grid-column: span 2; }

@media (max-width: 34rem) {
    .cel-f-half[b-t0x68rk9eo],
    .cel-f-third[b-t0x68rk9eo] {
        grid-column: span 6;
    }
}

.cel-edit-actions[b-t0x68rk9eo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.cel-edit-history[b-t0x68rk9eo] {
    margin-left: auto;
}

@media (max-width: 34rem) {
    .cel-edit-history[b-t0x68rk9eo] {
        margin-left: 0;
    }
}

/* --- The side panels ----------------------------------------------------- */

.cel-edit-side[b-t0x68rk9eo] {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

.cel-side-title[b-t0x68rk9eo] {
    margin-bottom: 0.4rem;
}

.cel-side-note[b-t0x68rk9eo] {
    max-width: none;
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--cel-parchment-faint);
}

.cel-side-note-tight[b-t0x68rk9eo] {
    margin: 0.85rem 0 0;
}

.cel-side-action[b-t0x68rk9eo] {
    width: 100%;
    margin-top: 0.75rem;
}

.cel-side-camera-open[b-t0x68rk9eo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-bottom: 0.75rem;
}

.cel-side-camera[b-t0x68rk9eo] {
    margin-bottom: 0.75rem;
}

/* A pulse while the model reads the label. */
.cel-throb[b-t0x68rk9eo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: cel-throb-beat-b-t0x68rk9eo 1.1s ease-in-out infinite;
}

@keyframes cel-throb-beat-b-t0x68rk9eo {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* --- Photographs --------------------------------------------------------- */

.cel-gallery[b-t0x68rk9eo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.55rem;
    margin-top: 1.1rem;
}

/* Each photograph carries its own remove button in the corner. It is always shown,
   since a phone has no hover to reveal it. */
.cel-shot-frame[b-t0x68rk9eo] {
    position: relative;
}

.cel-shot-remove[b-t0x68rk9eo] {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: var(--cel-parchment);
    border: 1px solid var(--cel-brass-line);
    border-radius: 50%;
    background: rgba(12, 7, 5, 0.78);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.cel-shot-remove:hover[b-t0x68rk9eo],
.cel-shot-remove:focus-visible[b-t0x68rk9eo] {
    color: var(--cel-glow);
    border-color: var(--cel-bad);
    background: rgba(92, 22, 32, 0.92);
}

.cel-shot-remove:focus-visible[b-t0x68rk9eo] {
    outline: 2px solid var(--cel-flame);
    outline-offset: 2px;
}

/* The photograph itself is the button that opens the viewer. */
.cel-shot-open[b-t0x68rk9eo] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.cel-shot-open:focus-visible[b-t0x68rk9eo] {
    outline: 2px solid var(--cel-flame);
    outline-offset: 2px;
}

/* Photographs are framed the way the bottles are: a thin brass edge, dark mat. */
.cel-shot[b-t0x68rk9eo] {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid rgba(201, 161, 94, 0.22);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.9);
    transition: transform 0.25s cubic-bezier(0.22, 0.68, 0.24, 1),
                border-color 0.25s cubic-bezier(0.22, 0.68, 0.24, 1),
                box-shadow 0.25s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.cel-shot:hover[b-t0x68rk9eo] {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(201, 161, 94, 0.55);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.95), 0 0 26px -12px rgba(232, 161, 60, 0.5);
}

/* --- Bottles ------------------------------------------------------------- */

/* Place and count share a row; the button takes its own. Sizing the button by
   its content collapsed the place field to a couple of characters as soon as
   the label grew — "Lägg till flaskor" is half again the width of "Add
   bottles" — so its width is no longer allowed to depend on its text. */
.cel-add[b-t0x68rk9eo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.25rem;
    gap: 0.5rem;
}

.cel-add > .btn[b-t0x68rk9eo] {
    grid-column: 1 / -1;
}

.cel-add-qty[b-t0x68rk9eo] {
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
}

.cel-stock[b-t0x68rk9eo] {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    border-top: 1px solid rgba(201, 161, 94, 0.11);
}

.cel-stock-row[b-t0x68rk9eo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(201, 161, 94, 0.11);
}

.cel-stock-place[b-t0x68rk9eo] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    color: #f5ece1;
    overflow-wrap: anywhere;
}

/* A stepper cut from one piece of brass-edged glass. */
.cel-stepper[b-t0x68rk9eo] {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    border: 1px solid rgba(201, 161, 94, 0.22);
    border-radius: 3px;
    background: rgba(6, 3, 2, 0.5);
    overflow: hidden;
}

.cel-step[b-t0x68rk9eo] {
    width: 1.9rem;
    padding: 0;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    color: #c9a15e;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s cubic-bezier(0.22, 0.68, 0.24, 1),
                background-color 0.15s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.cel-step:hover:not(:disabled)[b-t0x68rk9eo] {
    color: #ffe4b8;
    background: rgba(232, 161, 60, 0.18);
}

.cel-step:disabled[b-t0x68rk9eo] {
    color: var(--cel-parchment-hush);
    cursor: default;
}

.cel-step:focus-visible[b-t0x68rk9eo] {
    outline: none;
    color: #ffe4b8;
    background: rgba(232, 161, 60, 0.24);
    box-shadow: 0 0 0 2px rgba(201, 161, 94, 0.6) inset;
}

.cel-step-count[b-t0x68rk9eo] {
    display: grid;
    place-items: center;
    min-width: 2.1rem;
    padding: 0.35rem 0.35rem;
    font-size: 1.05rem;
    color: #ffe4b8;
    border-inline: 1px solid rgba(201, 161, 94, 0.16);
}

.cel-enhance[b-t0x68rk9eo] {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--cel-parchment-dim);
}
/* /Components/Pages/Wines/WineEnrichmentFields.razor.rz.scp.css */
/* The extended information about a wine. The grid and the AI tint match the main fields,
   which are styled in their own components, since scoped styles do not reach in here. */

.cel-enrich[b-7yopv749dw] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cel-brass-line-soft);
}

.cel-enrich-head[b-7yopv749dw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cel-enrich-title[b-7yopv749dw] {
    margin: 0;
}

.cel-enrich-action[b-7yopv749dw] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.cel-enrich-note[b-7yopv749dw] {
    margin: 0.5rem 0 1.15rem;
    font-size: 0.875rem;
    opacity: 0.8;
}

.cel-enrich-when[b-7yopv749dw] {
    white-space: nowrap;
}

.cel-fields[b-7yopv749dw] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.15rem 1rem;
}

.cel-f[b-7yopv749dw] {
    min-width: 0;
}

.cel-f-full[b-7yopv749dw]  { grid-column: span 6; }
.cel-f-half[b-7yopv749dw]  { grid-column: span 3; }
.cel-f-third[b-7yopv749dw] { grid-column: span 2; }

@media (max-width: 34rem) {
    .cel-f-half[b-7yopv749dw],
    .cel-f-third[b-7yopv749dw] {
        grid-column: span 6;
    }

    .cel-enrich-action[b-7yopv749dw] {
        width: 100%;
        justify-content: center;
    }
}

/* A value the AI filled in and the user should check. The inputs are rendered by the Input*
   components rather than by this markup, so they do not carry this component's scope
   attribute and need ::deep to be reached. */
.cel-enrich[b-7yopv749dw]  .cel-ai-filled {
    border-color: var(--cel-brass);
    background-color: rgba(201, 161, 94, 0.08);
}

.cel-throb[b-7yopv749dw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: cel-enrich-throb-b-7yopv749dw 1.1s ease-in-out infinite;
}

@keyframes cel-enrich-throb-b-7yopv749dw {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* The descriptions grow with their text, so all of it shows without scrolling inside the box.
   Browsers without field-sizing keep the height the rows give. */
.cel-enrich[b-7yopv749dw]  textarea {
    field-sizing: content;
    min-height: 4.5rem;
}
/* /Components/Pages/Wines/WineHistoryTable.razor.rz.scp.css */
/* The ledger. Timestamps in mono so the column reads as a single edge, and the
   action as a tag whose colour says what happened to the cellar. */

.cel-none[b-xykwkt5thq] {
    padding: 2rem 0;
    color: var(--cel-parchment-faint);
    border-top: 1px solid rgba(201, 161, 94, 0.22);
}

.cel-ledger[b-xykwkt5thq] {
    min-width: 44rem;
}

.cel-when[b-xykwkt5thq] {
    font-family: "DM Mono", "Courier New", ui-monospace, monospace;
    font-size: 0.8125rem;
    color: var(--cel-parchment-faint);
    white-space: nowrap;
}

/* An email has no sensible break point, and letting the browser break anywhere
   both mangled it ("...outlo / ok.com") and let table auto-layout squeeze the
   column to nothing. Keep it on one line; the ledger already scrolls. */
.cel-who[b-xykwkt5thq] {
    font-size: 0.875rem;
    color: #cbb9a6;
    white-space: nowrap;
}

.cel-what[b-xykwkt5thq] {
    color: #f5ece1;
}

.cel-why[b-xykwkt5thq] {
    font-size: 0.875rem;
    font-weight: 300;
    color: #cbb9a6;
}

.cel-tag[b-xykwkt5thq] {
    display: inline-block;
    padding: 0.24rem 0.6rem;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid currentColor;
    /* The tint comes from the text colour, so each tone needs one declaration. */
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.cel-tag-gain[b-xykwkt5thq]   { color: #86b06e; }
.cel-tag-loss[b-xykwkt5thq]   { color: #d5624f; }
.cel-tag-drunk[b-xykwkt5thq]  { color: #e8a13c; }
.cel-tag-change[b-xykwkt5thq] { color: #a98c5c; }

/* On a narrow screen the ledger's own scrollbar was a poor deal: the two least
   interesting columns, timestamp and user, are exactly the ones that fit, and
   what happened had to be scrolled to. Each entry becomes a block instead —
   when and who on the first line, then the action, the wine and the details.
   Column count varies (the cellar feed adds a wine column), so the rule keys
   off "third cell onwards" rather than off a fixed position. */
@media (max-width: 48rem) {
    .cel-scroll[b-xykwkt5thq] {
        overflow-x: visible;
    }

    .cel-ledger[b-xykwkt5thq] {
        display: block;
        min-width: 0;
    }

    .cel-ledger thead[b-xykwkt5thq] {
        display: none;
    }

    .cel-ledger tbody[b-xykwkt5thq],
    .cel-ledger td[b-xykwkt5thq] {
        display: block;
    }

    .cel-ledger tr[b-xykwkt5thq] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.35rem 0.7rem;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(201, 161, 94, 0.11);
    }

    .cel-ledger tr:last-child[b-xykwkt5thq] {
        border-bottom: none;
    }

    .cel-ledger td[b-xykwkt5thq] {
        padding: 0;
        border: 0;
    }

    .cel-ledger td:first-child[b-xykwkt5thq] {
        flex: none;
    }

    /* Truncate a long address rather than let it wrap mid-word. */
    .cel-ledger .cel-who[b-xykwkt5thq] {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cel-ledger td:nth-child(n + 3)[b-xykwkt5thq] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Wines/WineList.razor.rz.scp.css */
/* --- Toolbar ------------------------------------------------------------- */

.cel-toolbar[b-qxlqdfrh9a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.25rem;
    margin-bottom: 2.25rem;
}

.cel-search[b-qxlqdfrh9a] {
    position: relative;
    flex: 1 1 18rem;
    min-width: 0;
}

.cel-search-ico[b-qxlqdfrh9a] {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--cel-brass-quiet);
    pointer-events: none;
    transition: color 0.18s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.cel-search:focus-within .cel-search-ico[b-qxlqdfrh9a] {
    color: #e8a13c;
}

.cel-search .form-control[b-qxlqdfrh9a] {
    padding-left: 2.7rem;
}

/* Clear the search field's native decoration, which sits badly on dark glass. */
.cel-search .form-control[b-qxlqdfrh9a]::-webkit-search-cancel-button {
    filter: invert(1) sepia(1) saturate(3) hue-rotate(340deg);
    cursor: pointer;
}

.cel-toggle[b-qxlqdfrh9a] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
    font-size: 0.8125rem;
    color: #cbb9a6;
    cursor: pointer;
    user-select: none;
}

.cel-toggle .form-check-input[b-qxlqdfrh9a] {
    margin: 0;
    flex: none;
}

.cel-toolbar-add[b-qxlqdfrh9a] {
    flex: none;
    margin-left: auto;
}

/* --- The shelf ----------------------------------------------------------- */

.cel-shelf[b-qxlqdfrh9a] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(201, 161, 94, 0.22);
}

.cel-row[b-qxlqdfrh9a] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "capsule main counts actions";
    align-items: center;
    gap: 1.25rem;
    padding: 1.15rem 0.9rem 1.15rem 1.35rem;
    border-bottom: 1px solid rgba(201, 161, 94, 0.11);
    transition: background-color 0.2s cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* A brass bar lights along the row under the cursor, as the nav rail does. */
.cel-row[b-qxlqdfrh9a]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffe4b8, #c9a15e);
    box-shadow: 0 0 9px rgba(232, 161, 60, 0.7);
    transform: translateY(-50%);
    transition: height 0.25s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.cel-row:hover[b-qxlqdfrh9a] {
    background: rgba(232, 161, 60, 0.05);
}

.cel-row:hover[b-qxlqdfrh9a]::before {
    height: 58%;
}

/* Waiting on a confirmed removal: the row turns the colour of the warning. */
.cel-row-pending[b-qxlqdfrh9a] {
    background: rgba(213, 98, 79, 0.09);
}

.cel-row-pending[b-qxlqdfrh9a]::before {
    height: 74%;
    background: linear-gradient(180deg, #f0a898, #d5624f);
    box-shadow: 0 0 9px rgba(213, 98, 79, 0.7);
}

/* --- Capsule ------------------------------------------------------------- */

/* CapsuleDot paints itself; the row only places it and lights it on hover. */
.cel-row[b-qxlqdfrh9a]  .cel-row-capsule {
    grid-area: capsule;
}

.cel-row:hover[b-qxlqdfrh9a]  .cel-row-capsule {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35),
                0 0 14px -1px color-mix(in srgb, var(--capsule, #8b7a68) 70%, transparent);
}

/* --- Identity ------------------------------------------------------------ */

.cel-row-main[b-qxlqdfrh9a] {
    grid-area: main;
    min-width: 0;
}

.cel-row-name[b-qxlqdfrh9a] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-family: "Bodoni Moda", "Bodoni MT", Didot, "Hoefler Text", Garamond, serif;
    font-size: 1.3rem;
    line-height: 1.2;
}

.cel-row-name a[b-qxlqdfrh9a] {
    color: #f5ece1;
    text-decoration: none;
}

.cel-row:hover .cel-row-name a[b-qxlqdfrh9a],
.cel-row-name a:hover[b-qxlqdfrh9a] {
    color: #ffe4b8;
}

.cel-row-name a:focus-visible[b-qxlqdfrh9a] {
    outline: none;
    color: #ffe4b8;
    box-shadow: 0 2px 0 #c9a15e;
}

.cel-row-vintage[b-qxlqdfrh9a] {
    font-size: 0.95rem;
    font-variant-numeric: lining-nums tabular-nums;
    color: #c9a15e;
}

.cel-row-meta[b-qxlqdfrh9a] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    max-width: none;
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--cel-parchment-faint);
}

.cel-row-type[b-qxlqdfrh9a] {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a98c5c;
}

.cel-row-sep[b-qxlqdfrh9a] {
    color: var(--cel-parchment-hush);
}

/* --- Counts -------------------------------------------------------------- */

/* The .cel-count stack itself is global; the row only arranges the pair. */
.cel-row-counts[b-qxlqdfrh9a] {
    grid-area: counts;
    display: flex;
    gap: 1.75rem;
}

/* --- Actions ------------------------------------------------------------- */

.cel-row-actions[b-qxlqdfrh9a] {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

/* Actions stay out of the way until the row is touched, on pointers that hover. */
@media (hover: hover) and (min-width: 62rem) {
    .cel-row-actions[b-qxlqdfrh9a] {
        opacity: 0.28;
        transition: opacity 0.2s cubic-bezier(0.22, 0.68, 0.24, 1);
    }

    .cel-row:hover .cel-row-actions[b-qxlqdfrh9a],
    .cel-row:focus-within .cel-row-actions[b-qxlqdfrh9a],
    .cel-row-pending .cel-row-actions[b-qxlqdfrh9a] {
        opacity: 1;
    }
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 62rem) {
    .cel-row[b-qxlqdfrh9a] {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "capsule main"
            ".       counts"
            ".       actions";
        align-items: start;
        gap: 0.85rem 1rem;
        padding-block: 1.35rem;
    }

    .cel-row[b-qxlqdfrh9a]  .cel-row-capsule {
        margin-top: 0.45rem;
    }

    .cel-row-counts[b-qxlqdfrh9a] {
        gap: 2.25rem;
    }

    .cel-row-counts .cel-count[b-qxlqdfrh9a] {
        align-items: flex-start;
    }

    .cel-row-actions[b-qxlqdfrh9a] {
        justify-content: flex-start;
    }
}

@media (max-width: 34rem) {
    .cel-toolbar-add[b-qxlqdfrh9a] {
        margin-left: 0;
        width: 100%;
    }

    .cel-row-counts .cel-count-value[b-qxlqdfrh9a] {
        font-size: 1.35rem;
    }
}

/* --- Page head ----------------------------------------------------------- */

/* The rest of .cel-head is global; only the drunk-so-far note is local. */
.cel-head-note[b-qxlqdfrh9a] {
    margin: 0;
    font-size: 0.875rem;
}