/* ==========================================================================
   WineCellar — "Candlelight Cellar"

   A dark, warm design system: mahogany and oxblood ground, brass hairlines,
   candle-glow amber as the single sharp accent, and translucent "cabinet
   glass" surfaces.

   Loaded after Bootstrap, so the Bootstrap layer below re-skins every page
   this project does not style by hand — the Identity pages included.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    color-scheme: dark;

    /* Ground: the unlit depth of the cellar. */
    --cel-void: #0c0705;
    --cel-ink: #140c09;
    --cel-timber: #1e120e;
    --cel-timber-lit: #2a1a13;

    /* Wine: claret through oxblood. */
    --cel-claret: #8a2530;
    --cel-oxblood: #5c1620;
    --cel-claret-soft: rgba(138, 37, 48, 0.22);

    /* Light: the out-of-focus lamps behind the glass. */
    --cel-flame: #e8a13c;
    --cel-flame-warm: #f0bd74;
    --cel-glow: #ffe4b8;

    /* Brass: the cabinet knobs and hinges. */
    --cel-brass: #c9a15e;
    /* The dark stop of polished metal, for gradients. Too dark for type: use
       --cel-brass-quiet where brass has to be read rather than admired. */
    --cel-brass-dim: #8b6b39;
    --cel-brass-quiet: #a98a52;      /*  5.7:1  dim brass icons and figures   */
    --cel-brass-line: rgba(201, 161, 94, 0.22);
    --cel-brass-line-soft: rgba(201, 161, 94, 0.11);

    /* Type: candlelit paper, in five steps down from full strength.
       Ratios are against #1a100c, representative of the mid tones behind
       content; the nav rail is darker, so these are the pessimistic case.
       Nothing carrying words is allowed below 4.5:1, and the two steps that
       sit under it are reserved for large figures, decorative separators and
       disabled controls, which WCAG 1.4.3 does not cover. */
    --cel-parchment: #f5ece1;        /* 16.0:1  body text                     */
    --cel-parchment-dim: #cbb9a6;    /*  9.8:1  secondary prose               */
    --cel-parchment-faint: #b3a291;  /*  7.6:1  meta lines, notes, hints      */
    --cel-parchment-quiet: #a3907c;  /*  6.1:1  10px tracked micro labels     */
    --cel-parchment-hush: #8a7663;   /*  4.3:1  separators, zeros, disabled   */

    /* Glass surfaces. */
    --cel-glass: rgba(46, 27, 20, 0.55);
    --cel-glass-raised: rgba(60, 36, 26, 0.62);
    --cel-glass-sunk: rgba(12, 7, 5, 0.45);
    --cel-sheen: rgba(255, 226, 184, 0.09);

    /* Semantics. */
    --cel-good: #86b06e;
    --cel-warn: #d9a038;
    --cel-bad: #d5624f;

    /* Type stacks. Display is a didone; body a geometric sans. */
    --cel-display: "Bodoni Moda", "Bodoni MT", Didot, "Hoefler Text", Garamond, serif;
    --cel-sans: Jost, Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
    --cel-mono: "DM Mono", "Courier New", ui-monospace, monospace;

    /* Rhythm. */
    --cel-rail: 17.5rem;
    --cel-radius: 3px;
    --cel-radius-lg: 5px;

    --cel-shadow: 0 1px 0 var(--cel-sheen) inset, 0 18px 40px -18px rgba(0, 0, 0, 0.85);
    --cel-shadow-lift: 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);

    --cel-ease: cubic-bezier(0.22, 0.68, 0.24, 1);

    /* Bootstrap's own variables, so untouched pages inherit the theme. */
    --bs-body-bg: var(--cel-ink);
    --bs-body-color: var(--cel-parchment);
    --bs-body-font-family: var(--cel-sans);
    --bs-body-font-size: 0.9375rem;
    --bs-body-font-weight: 350;
    --bs-emphasis-color: var(--cel-glow);
    --bs-secondary-color: var(--cel-parchment-dim);
    --bs-secondary-bg: var(--cel-timber);
    --bs-tertiary-bg: var(--cel-timber-lit);
    --bs-border-color: var(--cel-brass-line);
    --bs-border-color-translucent: var(--cel-brass-line-soft);
    --bs-border-radius: var(--cel-radius);
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: var(--cel-radius-lg);
    --bs-link-color: var(--cel-flame-warm);
    --bs-link-hover-color: var(--cel-glow);
    --bs-heading-color: var(--cel-parchment);
    --bs-primary: #c9a15e;
    --bs-primary-rgb: 201, 161, 94;
    --bs-danger-rgb: 213, 98, 79;
    --bs-code-color: var(--cel-flame-warm);
    --bs-highlight-bg: var(--cel-claret-soft);
}

/* --------------------------------------------------------------------------
   2. Base and atmosphere

   The photograph's depth comes from bokeh lamps burning behind glass. Both
   layers here are painted rather than photographed: nothing to download,
   and it scales to any viewport.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--cel-sans);
    font-weight: 350;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--cel-parchment);
    background-color: var(--cel-void);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Bokeh: warm lamps thrown far out of focus, plus the vertical rhythm of
   cabinet mullions. Fixed, so content scrolls through the light. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(9rem 9rem at 12% 8%, rgba(255, 214, 150, 0.20), transparent 70%),
        radial-gradient(5rem 5rem at 26% 22%, rgba(255, 226, 178, 0.16), transparent 70%),
        radial-gradient(14rem 14rem at 82% 12%, rgba(232, 161, 60, 0.14), transparent 72%),
        radial-gradient(7rem 7rem at 68% 78%, rgba(255, 200, 130, 0.10), transparent 70%),
        radial-gradient(22rem 20rem at 4% 92%, rgba(138, 37, 48, 0.24), transparent 76%),
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.32) 0 1px,
            rgba(255, 255, 255, 0.014) 1px 3px,
            transparent 3px 8.5rem),
        linear-gradient(168deg, #2a1710 0%, #170d0a 42%, #0c0705 100%);
}

/* Grain: film texture over everything, so the gradients never read as flat. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection {
    background: rgba(232, 161, 60, 0.3);
    color: var(--cel-glow);
}

/* Scrollbars, cut from the same brass. */
* {
    scrollbar-color: var(--cel-brass-dim) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: var(--cel-brass-dim);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--cel-brass);
}

/* --------------------------------------------------------------------------
   3. Typography

   The didone carries every heading; it earns its high contrast at size.
   Small labels switch to the geometric sans, widely tracked — the voice of
   a wine list rather than of a dashboard.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cel-display);
    font-weight: 400;
    color: var(--cel-parchment);
    line-height: 1.1;
    letter-spacing: -0.012em;
    margin: 0 0 0.6em;
    text-wrap: balance;
}

h1, .h1 {
    font-size: clamp(2.15rem, 1.35rem + 2.6vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

h2, .h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.85rem); }
h3, .h3 { font-size: 1.4rem; }
h4, .h4 { font-size: 1.18rem; }
h5, .h5 { font-size: 1.02rem; letter-spacing: 0; }
h6, .h6 { font-size: 0.92rem; }

p {
    margin: 0 0 1rem;
    max-width: 68ch;
}

a {
    color: var(--cel-flame-warm);
    text-decoration-color: rgba(240, 189, 116, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    transition: color 0.18s var(--cel-ease), text-decoration-color 0.18s var(--cel-ease);
}

a:hover {
    color: var(--cel-glow);
    text-decoration-color: currentColor;
}

strong, b {
    font-weight: 500;
    color: var(--cel-glow);
}

small, .small {
    font-size: 0.8125rem;
}

code, kbd, samp, pre {
    font-family: var(--cel-mono);
    font-size: 0.875em;
}

.text-muted {
    color: var(--cel-parchment-dim) !important;
}

/* Bootstrap's semantic text colours are tuned for a white page; retune them so
   pages this project does not style by hand still sit in the palette. */
.text-danger  { color: #ef9584 !important; }
.text-success { color: #9cc182 !important; }
.text-warning { color: var(--cel-warn) !important; }
.text-primary { color: var(--cel-brass) !important; }

hr {
    border: 0;
    height: 1px;
    margin: 2rem 0;
    background: linear-gradient(90deg, var(--cel-brass-line), transparent);
    opacity: 1;
}

/* A tracked-out micro label: field labels, table heads, eyebrows. */
.cel-eyebrow {
    display: block;
    font-family: var(--cel-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cel-brass);
    margin: 0 0 0.75rem;
}

/* A brass rule, headed by the cabinet-knob motif. */
.cel-rule {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.cel-rule::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, var(--cel-glow), var(--cel-brass) 45%, var(--cel-brass-dim) 100%);
    box-shadow: 0 0 10px rgba(232, 161, 60, 0.55);
}

.cel-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--cel-brass-line), transparent);
}

/* Every page opens the same way: an optional tracked eyebrow, the title, and a
   line of lede. Shared so the pages cannot drift apart. */
.cel-head {
    margin-bottom: 2rem;
}

.cel-head h1 {
    margin-bottom: 0.4rem;
}

.cel-head h1:last-child {
    margin-bottom: 0;
}

.cel-lede {
    max-width: 60ch;
    margin: 0;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--cel-parchment-dim);
}

.cel-loading,
.cel-empty {
    padding: 2rem 0;
    color: var(--cel-parchment-dim);
}

.cel-empty {
    border-top: 1px solid var(--cel-brass-line);
}

.cel-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* A heading that names a thing rather than a page: capsule, name, vintage. */
.cel-subject {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.cel-subject-capsule {
    align-self: center;
}

.cel-subject-vintage {
    font-size: 0.52em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--cel-brass);
}

/* Capsule colours, one per wine type. Foil on the neck of a bottle is the
   oldest way of telling wines apart at a glance, so the interface borrows it:
   any element carrying one of these classes can paint itself with --capsule.
   Set alongside a layout class rather than replacing it. */
.cel-type-red        { --capsule: #c23a2c; --capsule-deep: #5e1215; }
.cel-type-white      { --capsule: #e0ca87; --capsule-deep: #857031; }
.cel-type-rose       { --capsule: #e79293; --capsule-deep: #8c3944; }
.cel-type-sparkling  { --capsule: #f0c96b; --capsule-deep: #8f6e28; }
.cel-type-dessert    { --capsule: #d9993f; --capsule-deep: #774d16; }
.cel-type-fortified  { --capsule: #a04f36; --capsule-deep: #451810; }
.cel-type-unknown    { --capsule: #8b7a68; --capsule-deep: #382f27; }

/* Numerals set in the didone, for counts that deserve the space. */
.cel-figure {
    font-family: var(--cel-display);
    font-weight: 400;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* The capsule dot itself, painted from whichever --capsule is in scope. */
.cel-capsule {
    display: block;
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    /* Flat colour first: a browser without color-mix() would otherwise drop the
       whole declaration and leave the dot invisible. */
    background: var(--capsule, #8b7a68);
    background: radial-gradient(circle at 34% 30%,
        color-mix(in srgb, var(--capsule, #8b7a68) 55%, #fff5e2),
        var(--capsule, #8b7a68) 48%,
        var(--capsule-deep, #382f27) 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.2s var(--cel-ease);
}

.cel-capsule-lg {
    width: 20px;
    height: 20px;
}

/* A figure with its label beneath, tracked out: bottles held, bottles drunk.
   Shared by the wine list, the scan result and the wine form. */
.cel-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 2.75rem;
}

.cel-count-value {
    font-size: 1.55rem;
    color: var(--cel-glow);
}

.cel-count-empty {
    color: var(--cel-parchment-hush);
}

.cel-count-quiet {
    color: var(--cel-parchment-dim);
}

.cel-count-label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cel-parchment-quiet);
    white-space: nowrap;
}

/* A bar or QR code, or any string meant to be read character by character. */
.cel-code {
    font-family: var(--cel-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--cel-brass);
}

/* --------------------------------------------------------------------------
   4. Surfaces

   Every panel is a pane of cabinet glass: translucent, blurred behind,
   with light caught along the top edge.
   -------------------------------------------------------------------------- */

.cel-panel {
    position: relative;
    padding: 1.75rem;
    border: 1px solid var(--cel-brass-line-soft);
    border-radius: var(--cel-radius-lg);
    background: linear-gradient(158deg, var(--cel-glass-raised), var(--cel-glass) 55%, var(--cel-glass-sunk));
    box-shadow: var(--cel-shadow);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
}

/* The highlight where light grazes the top of the pane. */
.cel-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    border-radius: var(--cel-radius-lg) var(--cel-radius-lg) 0 0;
    background: linear-gradient(90deg, transparent, var(--cel-sheen) 18%, rgba(255, 226, 184, 0.28) 50%, var(--cel-sheen) 82%, transparent);
}

.cel-panel-tight {
    padding: 1.25rem 1.35rem;
}

/* --------------------------------------------------------------------------
   5. Buttons

   Primary is polished brass with dark type on it — the only filled control
   on the page, so it always reads as the one thing to do. Everything else
   is glass and hairline.
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-border-radius: var(--cel-radius);

    /* Bootstrap paints the disabled state through these variables from a rule
       (.btn:disabled) that outranks a plain .btn-secondary override, so the
       disabled look has to be set here rather than fought later. A disabled
       control should not advertise its colour, so every variant but the brass
       primary falls back to quiet glass. */
    --bs-btn-disabled-color: var(--cel-parchment-hush);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(201, 161, 94, 0.12);
    --bs-btn-disabled-opacity: 1;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--cel-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.82rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--cel-radius);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s var(--cel-ease), background-color 0.2s var(--cel-ease),
                border-color 0.2s var(--cel-ease), box-shadow 0.2s var(--cel-ease),
                transform 0.2s var(--cel-ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn-sm {
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
    padding: 0.5rem 0.85rem;
}

.btn-lg {
    font-size: 0.85rem;
    padding: 1rem 1.9rem;
}

.btn-primary,
.btn-primary:visited {
    color: #1b0f08;
    background: linear-gradient(168deg, var(--cel-glow) 0%, var(--cel-brass) 52%, var(--cel-brass-dim) 100%);
    border-color: rgba(255, 228, 184, 0.5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 10px 26px -12px rgba(232, 161, 60, 0.7);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    color: #1b0f08;
    background: linear-gradient(168deg, #fff3df 0%, var(--cel-flame-warm) 52%, var(--cel-brass) 100%);
    border-color: var(--cel-glow);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 14px 34px -12px rgba(232, 161, 60, 0.9);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: rgba(27, 15, 8, 0.55);
    background: linear-gradient(168deg, #6b5535, #4a3a24);
    border-color: transparent;
    box-shadow: none;
    opacity: 1;
}

/* Secondary and every outline variant share one glass treatment; the accent
   colour only shifts on hover, which keeps toolbars calm. */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-light,
.btn-outline-dark,
.btn-light,
.btn-dark {
    color: var(--cel-parchment);
    background: rgba(255, 236, 210, 0.035);
    border-color: var(--cel-brass-line);
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover,
.btn-light:hover,
.btn-dark:hover,
.btn-secondary:focus-visible,
.btn-outline-secondary:focus-visible,
.btn-outline-primary:focus-visible,
.btn-outline-light:focus-visible {
    color: var(--cel-glow);
    background: rgba(232, 161, 60, 0.14);
    border-color: var(--cel-brass);
    box-shadow: 0 8px 26px -14px rgba(232, 161, 60, 0.7);
}

.btn-outline-primary {
    color: var(--cel-flame-warm);
}

.btn-success,
.btn-outline-success {
    color: #d7ecc9;
    background: rgba(134, 176, 110, 0.14);
    border-color: rgba(134, 176, 110, 0.4);
}

.btn-success:hover,
.btn-outline-success:hover,
.btn-success:focus-visible,
.btn-outline-success:focus-visible {
    color: #f0fae8;
    background: rgba(134, 176, 110, 0.28);
    border-color: var(--cel-good);
    box-shadow: 0 8px 26px -14px rgba(134, 176, 110, 0.8);
}

.btn-danger,
.btn-outline-danger {
    color: #f0bdb0;
    background: rgba(213, 98, 79, 0.1);
    border-color: rgba(213, 98, 79, 0.34);
}

.btn-danger:hover,
.btn-outline-danger:hover,
.btn-danger:focus-visible,
.btn-outline-danger:focus-visible {
    color: #ffe6df;
    background: rgba(213, 98, 79, 0.26);
    border-color: var(--cel-bad);
    box-shadow: 0 8px 26px -14px rgba(213, 98, 79, 0.8);
}

.btn-warning,
.btn-outline-warning {
    color: #f4d69c;
    background: rgba(217, 160, 56, 0.12);
    border-color: rgba(217, 160, 56, 0.38);
}

.btn-link {
    padding: 0;
    border: 0;
    color: var(--cel-flame-warm);
    text-transform: none;
    letter-spacing: 0;
    font-size: inherit;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: rgba(240, 189, 116, 0.35);
    text-underline-offset: 0.22em;
}

.btn-link:hover {
    color: var(--cel-glow);
    background: none;
    box-shadow: none;
    text-decoration-color: currentColor;
}

.btn-check:focus + .btn,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--cel-void), 0 0 0 3px rgba(201, 161, 94, 0.65);
}

/* --------------------------------------------------------------------------
   6. Forms

   Inputs are recessed rather than raised — cut into the timber, lit from
   above — so the brass buttons stay the brightest thing in a form.
   -------------------------------------------------------------------------- */

.form-label,
.col-form-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cel-brass);
    margin-bottom: 0.5rem;
}

.form-control,
.form-select {
    font-family: var(--cel-sans);
    font-size: 0.9375rem;
    font-weight: 350;
    color: var(--cel-parchment);
    padding: 0.68rem 0.9rem;
    background-color: rgba(6, 3, 2, 0.5);
    border: 1px solid var(--cel-brass-line-soft);
    border-radius: var(--cel-radius);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) inset;
    transition: border-color 0.18s var(--cel-ease), background-color 0.18s var(--cel-ease),
                box-shadow 0.18s var(--cel-ease);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--cel-brass-line);
}

.form-control:focus,
.form-select:focus {
    color: var(--cel-glow);
    background-color: rgba(10, 5, 3, 0.65);
    border-color: var(--cel-brass);
}

.form-control::placeholder {
    color: var(--cel-parchment-faint);
    opacity: 1;
}

.form-control-sm,
.form-select-sm {
    font-size: 0.8125rem;
    padding: 0.45rem 0.65rem;
}

textarea.form-control {
    line-height: 1.6;
    resize: vertical;
}

.form-select {
    /* Brass chevron in place of Bootstrap's grey one. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c9a15e'%3E%3Cpath d='M8 11.2 2.4 5.6 3.8 4.2 8 8.4l4.2-4.2 1.4 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 12px;
    padding-right: 2.4rem;
}

.form-select option {
    background-color: var(--cel-timber);
    color: var(--cel-parchment);
}

.form-text {
    font-size: 0.8125rem;
    color: var(--cel-parchment-faint);
    margin-top: 0.4rem;
}

/* A field holding a bar or QR code. Set in the monospace face and tracked out,
   because the value is read glyph by glyph off a label rather than as a word.

   Global rather than page-scoped: these sit on Blazor's InputText / InputFile
   components, whose rendered <input> is outside the calling component's CSS
   scope and so is never matched by a scoped selector. */
.cel-code-field {
    font-family: var(--cel-mono);
    letter-spacing: 0.09em;
}

.cel-file {
    padding: 0.45rem 0.5rem;
    font-size: 0.8125rem;
}

.cel-file::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.4rem 0.9rem;
    font-family: var(--cel-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cel-parchment);
    background: rgba(255, 236, 210, 0.05);
    border: 1px solid var(--cel-brass-line);
    border-radius: 2px;
    cursor: pointer;
    transition: color 0.18s var(--cel-ease), background-color 0.18s var(--cel-ease),
                border-color 0.18s var(--cel-ease);
}

.cel-file::file-selector-button:hover {
    color: var(--cel-glow);
    background: rgba(232, 161, 60, 0.14);
    border-color: var(--cel-brass);
}

.form-check {
    padding-left: 1.9rem;
    min-height: auto;
}

.form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin-left: -1.9rem;
    margin-top: 0.28rem;
    background-color: rgba(6, 3, 2, 0.6);
    border: 1px solid var(--cel-brass-line);
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    cursor: pointer;
    transition: background-color 0.18s var(--cel-ease), border-color 0.18s var(--cel-ease);
}

.form-check-input:checked {
    background-color: var(--cel-brass);
    border-color: var(--cel-glow);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b0f08'%3E%3Cpath d='M6.2 12.4 2.1 8.3l1.5-1.5 2.6 2.6 6-6L13.7 5z'/%3E%3C/svg%3E");
}

.form-check-input[type=radio] {
    border-radius: 50%;
}

.form-check-label {
    cursor: pointer;
    color: var(--cel-parchment);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--cel-brass-line);
}

/* The Identity pages wrap their checkbox inside a .form-label, which the block
   label rule above would push onto its own line. Lay that pairing out as a row. */
.checkbox .form-label,
.form-label:has(> .form-check-input) {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0;
    cursor: pointer;
}

.checkbox .form-check-input,
.form-label > .form-check-input {
    flex: none;
    margin: 0;
}

.input-group-text {
    color: var(--cel-brass);
    background: rgba(255, 236, 210, 0.04);
    border: 1px solid var(--cel-brass-line-soft);
    font-size: 0.8125rem;
}

/* Floating labels, used throughout the Identity pages. */
.form-floating > label {
    color: var(--cel-parchment-faint);
    padding: 0.7rem 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--cel-brass);
    opacity: 1;
    transform: scale(0.78) translateY(-0.6rem) translateX(0.15rem);
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background: none;
}

.form-floating > .form-control,
.form-floating > .form-select {
    padding-top: 1.4rem;
    padding-bottom: 0.45rem;
    min-height: 3.4rem;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: transparent;
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    color: var(--cel-parchment-faint);
    text-align: start;
}

/* Validation. Bootstrap's outline is replaced by a border and a glow, so
   the field itself carries the state. */
.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: rgba(134, 176, 110, 0.55);
}

.invalid {
    outline: none;
    border-color: var(--cel-bad);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) inset, 0 0 0 3px rgba(213, 98, 79, 0.18);
}

.validation-message {
    display: block;
    font-size: 0.8125rem;
    color: #f0a898;
    margin-top: 0.35rem;
}

.validation-errors {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem 0.9rem 1.35rem;
    list-style: none;
    font-size: 0.875rem;
    color: #f0bdb0;
    background: rgba(213, 98, 79, 0.1);
    border-left: 2px solid var(--cel-bad);
    border-radius: 0 var(--cel-radius) var(--cel-radius) 0;
}

.validation-errors li + li {
    margin-top: 0.3rem;
}

/* --------------------------------------------------------------------------
   7. Cards, list groups, badges, alerts
   -------------------------------------------------------------------------- */

.card {
    border: 1px solid var(--cel-brass-line-soft);
    border-radius: var(--cel-radius-lg);
    background: linear-gradient(158deg, var(--cel-glass-raised), var(--cel-glass) 55%, var(--cel-glass-sunk));
    box-shadow: var(--cel-shadow);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.card-body {
    padding: 1.6rem;
}

.card-title {
    font-family: var(--cel-display);
    color: var(--cel-parchment);
}

.card-header,
.card-footer {
    background: rgba(0, 0, 0, 0.22);
    border-color: var(--cel-brass-line-soft);
}

.list-group {
    --bs-list-group-border-color: var(--cel-brass-line-soft);
    border-radius: var(--cel-radius);
}

.list-group-item {
    color: var(--cel-parchment);
    background: rgba(255, 236, 210, 0.028);
    border-color: var(--cel-brass-line-soft);
    padding: 0.95rem 1.15rem;
    transition: background-color 0.18s var(--cel-ease);
}

.list-group-item:hover {
    background: rgba(232, 161, 60, 0.07);
}

.badge {
    font-family: var(--cel-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding: 0.32em 0.62em;
    border-radius: 2px;
    vertical-align: 0.08em;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
    color: var(--cel-glow) !important;
    background: rgba(232, 161, 60, 0.16) !important;
    box-shadow: 0 0 0 1px var(--cel-brass-line) inset;
}

.badge.bg-success,
.badge.text-bg-success {
    color: #d7ecc9 !important;
    background: rgba(134, 176, 110, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(134, 176, 110, 0.45) inset;
}

.badge.bg-warning,
.badge.text-bg-warning {
    color: #f4d69c !important;
    background: rgba(217, 160, 56, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(217, 160, 56, 0.45) inset;
}

.badge.bg-danger,
.badge.text-bg-danger {
    color: #f0bdb0 !important;
    background: rgba(213, 98, 79, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(213, 98, 79, 0.45) inset;
}

/* Bootstrap's .text-dark would drop near-black type onto those tints. The
   badge already carries a readable colour, so it keeps it. */
.badge.bg-success.text-dark { color: #d7ecc9 !important; }
.badge.bg-warning.text-dark { color: #f4d69c !important; }
.badge.bg-danger.text-dark  { color: #f0bdb0 !important; }

.alert {
    position: relative;
    padding: 1.05rem 1.25rem 1.05rem 1.4rem;
    border: 1px solid var(--cel-brass-line-soft);
    border-left-width: 2px;
    border-radius: 0 var(--cel-radius) var(--cel-radius) 0;
    background: rgba(255, 236, 210, 0.035);
    color: var(--cel-parchment);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.alert a,
.alert .btn-link {
    color: inherit;
    font-weight: 500;
}

.alert-info,
.alert-primary,
.alert-light,
.alert-secondary,
.alert-dark {
    border-left-color: var(--cel-brass);
    color: var(--cel-parchment);
}

.alert-success {
    border-left-color: var(--cel-good);
    background: rgba(134, 176, 110, 0.1);
    color: #d7ecc9;
}

.alert-warning {
    border-left-color: var(--cel-warn);
    background: rgba(217, 160, 56, 0.1);
    color: #f4d69c;
}

.alert-danger {
    border-left-color: var(--cel-bad);
    background: rgba(213, 98, 79, 0.1);
    color: #f0bdb0;
}

/* The account pages use pill navigation; give it the rail's brass indicator
   rather than Bootstrap's filled pill. */
.nav-pills {
    --bs-nav-pills-border-radius: var(--cel-radius);
    gap: 0.1rem;
}

.nav-pills .nav-link {
    position: relative;
    padding: 0.6rem 0.9rem;
    font-size: 0.875rem;
    color: var(--cel-parchment-dim);
    background: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--cel-radius) var(--cel-radius) 0;
    text-align: left;
    transition: color 0.2s var(--cel-ease), background-color 0.2s var(--cel-ease),
                border-color 0.2s var(--cel-ease);
}

.nav-pills .nav-link:hover {
    color: var(--cel-parchment);
    background: rgba(255, 236, 210, 0.045);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--cel-glow);
    background: linear-gradient(90deg, rgba(232, 161, 60, 0.16), rgba(232, 161, 60, 0.02) 78%, transparent);
    border-left-color: var(--cel-brass);
}

.img-thumbnail {
    padding: 0;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--cel-brass-line);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   8. Tables

   Zebra striping is dropped for hairlines and a tracked-out head: a ledger
   in a wine book rather than a spreadsheet.
   -------------------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cel-parchment);
    --bs-table-border-color: var(--cel-brass-line-soft);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--cel-parchment);
    --bs-table-hover-bg: rgba(232, 161, 60, 0.06);
    --bs-table-hover-color: var(--cel-glow);
    width: 100%;
    margin-bottom: 0;
    border-color: var(--cel-brass-line-soft);
}

.table > thead {
    border-bottom: 1px solid var(--cel-brass-line);
}

.table > thead th {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cel-brass);
    background: transparent;
    border-bottom: none;
    padding: 0 0.85rem 0.85rem;
    white-space: nowrap;
    vertical-align: bottom;
}

.table > tbody > tr > td {
    padding: 0.95rem 0.85rem;
    border-color: var(--cel-brass-line-soft);
    background: transparent;
}

.table > tbody > tr:last-child > td {
    border-bottom: none;
}

.table > thead th:first-child,
.table > tbody > tr > td:first-child {
    padding-left: 0;
}

.table > thead th:last-child,
.table > tbody > tr > td:last-child {
    padding-right: 0;
}

.table-sm > tbody > tr > td {
    padding: 0.6rem 0.85rem;
}

/* Rows are wide; a table needs to be able to scroll on its own. */
.cel-scroll {
    overflow-x: auto;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
}

/* Bootstrap gives a table width:100%, so inside a scroller it compresses to
   the viewport and squeezes its columns instead of overflowing — the scroller
   then has nothing to scroll. A floor on the width is what makes it work.
   The wine ledger is exempt: it restyles itself into stacked blocks on a
   narrow screen rather than scrolling, and sets its own width there. */
.cel-scroll > .table:not(.cel-ledger) {
    min-width: 38rem;
}

/* --------------------------------------------------------------------------
   9. Motion

   One orchestrated entrance rather than scattered micro-animations: the
   shell settles, then content rises in sequence.
   -------------------------------------------------------------------------- */

@keyframes cel-flicker {
    0%, 100% { opacity: 0.85; }
    42%      { opacity: 1; }
    58%      { opacity: 0.72; }
    72%      { opacity: 0.95; }
}

/* The entrance is a transition out of @starting-style rather than a keyframe
   animation, so that it fails OPEN.

   A keyframe animation running `from { opacity: 0 }` with fill-mode `both`
   holds the element invisible until the animation completes — and a document
   whose timeline never advances never completes it. A background tab being
   captured, a print render, or any throttled compositor would leave the page
   permanently blank. Here the resting state below is the visible one; the
   hidden state exists only as a starting value for the first style
   resolution, so anything that cannot run the transition simply shows the
   content immediately.

   Movement uses the independent `translate` property, never `transform`, so it
   cannot overwrite a transform the element sets for itself — which is how the
   hero artwork keeps its oblique angle. */
.cel-enter {
    opacity: 1;
    translate: none;
    transition: opacity 0.7s var(--cel-ease), translate 0.7s var(--cel-ease);
}

@starting-style {
    .cel-enter {
        opacity: 0;
        translate: 0 14px;
    }
}

.cel-enter-1 { transition-delay: 0.04s; }
.cel-enter-2 { transition-delay: 0.12s; }
.cel-enter-3 { transition-delay: 0.2s; }
.cel-enter-4 { transition-delay: 0.28s; }
.cel-enter-5 { transition-delay: 0.36s; }
.cel-enter-6 { transition-delay: 0.44s; }

/* Any reveal that starts from opacity 0 stays at 0 while the document timeline
   is stopped, because both transitions and animations are driven by that clock.
   A person never sees this — bringing a background tab to the front restarts
   the clock — but a print render has no clock to restart, so it is pinned to
   the finished state here. */
@media print {
    .cel-enter {
        transition: none;
        opacity: 1;
        translate: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   10. Blazor plumbing
   -------------------------------------------------------------------------- */

h1:focus {
    outline: none;
}

.content {
    padding-top: 0;
}

.blazor-error-boundary {
    padding: 1.1rem 1.25rem 1.1rem 1.4rem;
    color: #f0bdb0;
    background: rgba(213, 98, 79, 0.12);
    border-left: 2px solid var(--cel-bad);
    border-radius: 0 var(--cel-radius) var(--cel-radius) 0;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.loading-progress,
.loading-progress-text {
    color: var(--cel-brass);
}