/* ============================================================
   ARODUM ENGINE UI
   Core tokens and the machined control set.
   Palette: the aro spectrum (warm archival stone, rare burnt
   gold reserved for controls). Linked by index.html and
   components.html so the system cannot drift between pages.

   Buttons:   .btn-thermo .btn-secondary .btn-pill .btn-orb .btn-glass
   Sizes:     .btn-xs .btn-sm (default) .btn-lg .btn-xl
   States:    :hover/.is-hover  :active/.is-pressed
              .is-loading  :disabled/.is-disabled  .inverse
   Feedback:  .thermo-progress (+.indeterminate)  .loader-orb
   Forms:     .arodum-field .arodum-input .arodum-toggle
              .arodum-check (+.radio)
   Surfaces:  .glass .glass-card .chip .chip-metal
   ============================================================ */

:root {
    /* The aro spectrum (warm archival stone) */
    --c-light: #f0ede7;
    --c-mid: #8a8070;
    --c-dark: #29261e;
    --c-deep: #191712;

    /* Ink on light ground, paper on dark ground */
    --ink: #29261e;
    --ink-soft: rgba(41, 38, 30, 0.66);
    --paper: #faf9f7;
    --paper-soft: rgba(250, 249, 247, 0.62);

    /* Liquid glass */
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
    --edge-bright: rgba(255, 255, 255, 0.4);
    --edge-soft: rgba(255, 255, 255, 0.25);
    --edge-shade: rgba(0, 0, 0, 0.2);
    --edge-shade-soft: rgba(0, 0, 0, 0.05);
    --blur: blur(40px);
    --shadow-float: 0 32px 64px rgba(0, 0, 0, 0.15);
    --shadow-float-deep: 0 40px 80px rgba(0, 0, 0, 0.4);

    /* Machined metal - the rare burnt gold accent */
    --metallic-bg: linear-gradient(135deg, #d4cfbf 0%, #a6987b 100%);
    --metallic-muted: linear-gradient(135deg, #dcd8cd 0%, #beb9ac 100%);
    --metallic-shadow:
        inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.9),
        inset -2px -2px 6px rgba(0, 0, 0, 0.2),
        0 12px 24px rgba(0, 0, 0, 0.2);
    --metallic-shadow-hover:
        inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.9),
        inset -2px -2px 6px rgba(0, 0, 0, 0.2),
        0 16px 32px rgba(0, 0, 0, 0.25);
    --metallic-shadow-active:
        inset 2px 2px 6px rgba(0, 0, 0, 0.2),
        inset -1px -1px 2px rgba(255, 255, 255, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.1);

    /* The liquid - deepened burnt gold that fills controls */
    --liquid: linear-gradient(90deg, #bfb191 0%, #a6987b 55%, #96876a 100%);
    --liquid-bulb: radial-gradient(circle at 32% 30%, #cbbd9d 0%, #a6987b 55%, #96876a 100%);
    --focus-ring: 0 0 0 3px rgba(166, 152, 123, 0.25);

    /* Geometry */
    --r-huge: 56px;
    --r-large: 32px;
    --r-node: 20px;
    --r-pill: 999px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   GLASS SURFACES
   ============================================================ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-top: 1px solid var(--edge-soft);
    border-left: 1px solid var(--edge-soft);
    border-bottom: 1px solid var(--edge-shade);
    border-right: 1px solid var(--edge-shade);
    box-shadow: var(--shadow-float);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-top: 1px solid var(--edge-soft);
    border-left: 1px solid var(--edge-soft);
    border-bottom: 1px solid var(--edge-shade);
    border-right: 1px solid var(--edge-shade);
    box-shadow: var(--shadow-float);
    border-radius: var(--r-large);
    padding: 28px;
}

/* ============================================================
   BUTTONS - shared anatomy
   Sizes are driven by four custom properties. Default = normal.
   ============================================================ */
.btn-thermo,
.btn-secondary,
.btn-pill,
.btn-orb,
.btn-glass {
    --bulb: 64px;
    --stem-h: 44px;
    --fs: 13px;
    --icon: 24px;

    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-xs { --bulb: 40px; --stem-h: 28px; --fs: 10px; --icon: 16px; }
.btn-sm { --bulb: 52px; --stem-h: 36px; --fs: 11px; --icon: 20px; }
.btn-lg { --bulb: 80px; --stem-h: 54px; --fs: 15px; --icon: 30px; }
.btn-xl { --bulb: 96px; --stem-h: 64px; --fs: 17px; --icon: 36px; }

.btn-thermo:hover, .btn-thermo.is-hover,
.btn-secondary:hover, .btn-secondary.is-hover,
.btn-pill:hover, .btn-pill.is-hover,
.btn-orb:hover, .btn-orb.is-hover,
.btn-glass:hover, .btn-glass.is-hover { transform: scale(1.02); }

.btn-thermo:active, .btn-thermo.is-pressed,
.btn-secondary:active, .btn-secondary.is-pressed,
.btn-pill:active, .btn-pill.is-pressed,
.btn-orb:active, .btn-orb.is-pressed,
.btn-glass:active, .btn-glass.is-pressed { transform: scale(0.97); }

/* Label */
.btn-label {
    position: relative;
    z-index: 1;
    font-size: var(--fs);
    font-weight: 600;
    color: #29261e;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease;
}

/* ============================================================
   THE BULB - shared by thermo, secondary, and orb
   Raised burnt-gold sphere carrying the icon. On hover the
   liquid wells up inside it first; on press it floods at once.
   Its ::before is the loading dial.
   ============================================================ */
.thermo-bulb {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bulb);
    height: var(--bulb);
    border-radius: 50%;
    background: var(--metallic-bg);
    box-shadow: var(--metallic-shadow);
    transition: box-shadow 0.2s ease;
    flex-shrink: 0;
}

.thermo-bulb::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--liquid-bulb);
    box-shadow:
        inset 1.5px 1.5px 3px rgba(255, 252, 245, 0.5),
        inset -2px -2px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.45s ease;
}

/* Loading dial (hidden until .is-loading) */
.thermo-bulb::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: calc(var(--bulb) * 0.24);
    border-radius: 50%;
    border: 2px solid rgba(41, 38, 30, 0.18);
    border-top-color: #29261e;
    opacity: 0;
}

.btn-thermo:hover .thermo-bulb, .btn-thermo.is-hover .thermo-bulb,
.btn-secondary:hover .thermo-bulb, .btn-secondary.is-hover .thermo-bulb,
.btn-orb:hover .thermo-bulb, .btn-orb.is-hover .thermo-bulb { box-shadow: var(--metallic-shadow-hover); }

.btn-thermo:active .thermo-bulb, .btn-thermo.is-pressed .thermo-bulb,
.btn-secondary:active .thermo-bulb, .btn-secondary.is-pressed .thermo-bulb,
.btn-orb:active .thermo-bulb, .btn-orb.is-pressed .thermo-bulb { box-shadow: var(--metallic-shadow-active); }

.btn-thermo:hover .thermo-bulb::after, .btn-thermo.is-hover .thermo-bulb::after,
.btn-secondary:hover .thermo-bulb::after, .btn-secondary.is-hover .thermo-bulb::after,
.btn-orb:hover .thermo-bulb::after, .btn-orb.is-hover .thermo-bulb::after { opacity: 1; }

/* Click feedback: pressing floods the bulb instantly */
.btn-thermo:active .thermo-bulb::after, .btn-thermo.is-pressed .thermo-bulb::after,
.btn-secondary:active .thermo-bulb::after, .btn-secondary.is-pressed .thermo-bulb::after,
.btn-orb:active .thermo-bulb::after, .btn-orb.is-pressed .thermo-bulb::after {
    opacity: 1;
    transition-duration: 0.08s;
}

.thermo-bulb svg {
    position: relative;
    z-index: 1;
    width: var(--icon);
    height: var(--icon);
    stroke: #29261e;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform 0.3s ease 0.05s, opacity 0.25s ease;
}

.btn-thermo:hover .thermo-bulb svg, .btn-thermo.is-hover .thermo-bulb svg,
.btn-secondary:hover .thermo-bulb svg, .btn-secondary.is-hover .thermo-bulb svg,
.btn-orb:hover .thermo-bulb svg, .btn-orb.is-hover .thermo-bulb svg { transform: translateX(2px); }

/* ============================================================
   PRIMARY: THE THERMO BUTTON
   Bulb + recessed stem channel. On hover the liquid flows out
   of the bulb and gently fills the stem, left to right.
   ============================================================ */
.thermo-stem {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: var(--stem-h);
    margin-left: calc(var(--bulb) / -2);
    padding: 0 calc(var(--stem-h) * 0.62) 0 calc(var(--bulb) * 0.72);
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
    background: var(--metallic-bg);
    box-shadow:
        inset 0 2px 5px rgba(41, 38, 30, 0.28),
        inset 0 -1px 2px rgba(255, 252, 245, 0.55),
        0 10px 20px rgba(0, 0, 0, 0.18);
}

.thermo-stem::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--liquid);
    box-shadow:
        inset 0 2px 5px rgba(41, 38, 30, 0.3),
        inset 0 -1px 2px rgba(255, 252, 245, 0.35);
    transform: translateX(-102%);
    transition: transform 0.8s cubic-bezier(0.33, 1, 0.45, 1) 0.08s;
}

.btn-thermo:hover .thermo-stem::before,
.btn-thermo.is-hover .thermo-stem::before { transform: translateX(0); }

/* ============================================================
   SECONDARY: BULB + BARE LABEL
   The quiet variant. Liquid wells up in the bulb only; the
   label leans in. Use .inverse on dark ground.
   ============================================================ */
.btn-secondary { gap: calc(var(--bulb) * 0.28); }

.btn-secondary .btn-label { color: var(--ink); }
.btn-secondary.inverse .btn-label { color: var(--paper); }

.btn-secondary:hover .btn-label,
.btn-secondary.is-hover .btn-label { transform: translateX(3px); }

/* ============================================================
   PILL: STANDALONE CAPSULE
   For dense Arodum Engine surfaces. Raised metal, same liquid
   fill; pressing floods it at once.
   ============================================================ */
.btn-pill {
    overflow: hidden;
    height: calc(var(--stem-h) + 6px);
    padding: 0 calc(var(--stem-h) * 0.75);
    border-radius: var(--r-pill);
    background: var(--metallic-bg);
    box-shadow: var(--metallic-shadow);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.btn-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--liquid);
    box-shadow:
        inset 1.5px 1.5px 3px rgba(255, 252, 245, 0.55),
        inset -2px -2px 6px rgba(0, 0, 0, 0.2);
    transform: translateX(-102%);
    transition: transform 0.7s cubic-bezier(0.33, 1, 0.45, 1);
}

.btn-pill:hover, .btn-pill.is-hover { box-shadow: var(--metallic-shadow-hover); }
.btn-pill:hover::before, .btn-pill.is-hover::before { transform: translateX(0); }
.btn-pill:active, .btn-pill.is-pressed { box-shadow: var(--metallic-shadow-active); }

.btn-pill:active::before, .btn-pill.is-pressed::before {
    transform: translateX(0);
    transition-duration: 0.12s;
    transition-delay: 0s;
}

.btn-pill svg {
    position: relative;
    z-index: 1;
    width: calc(var(--fs) + 6px);
    height: calc(var(--fs) + 6px);
    margin-left: calc(var(--fs) * 0.7);
    stroke: #29261e;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ============================================================
   ORB: ICON-ONLY BULB
   Compact icon action. Markup: button.btn-orb > span.thermo-bulb
   ============================================================ */
/* Anatomy fully inherited from the shared bulb rules above. */

/* ============================================================
   GLASS BUTTON: THE QUIET ONE
   For surfaces where gold would shout. Doctrine: burnt gold is
   rare, so most in-Engine actions wear glass. Gold only rims
   it on hover.
   ============================================================ */
.btn-glass {
    height: calc(var(--stem-h) + 6px);
    padding: 0 calc(var(--stem-h) * 0.72);
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.65);
    border-left: 1px solid rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid var(--edge-shade-soft);
    border-right: 1px solid var(--edge-shade-soft);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.25s ease;
}

.btn-glass .btn-label { color: var(--ink); }

.btn-glass.inverse {
    background: var(--glass-bg);
    border-top-color: var(--edge-soft);
    border-left-color: var(--edge-soft);
}
.btn-glass.inverse .btn-label { color: var(--paper); }

.btn-glass:hover, .btn-glass.is-hover {
    border-top-color: rgba(166, 152, 123, 0.65);
    border-left-color: rgba(166, 152, 123, 0.65);
    border-bottom-color: rgba(166, 152, 123, 0.35);
    border-right-color: rgba(166, 152, 123, 0.35);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

.btn-glass svg {
    position: relative;
    z-index: 1;
    width: calc(var(--fs) + 6px);
    height: calc(var(--fs) + 6px);
    margin-left: calc(var(--fs) * 0.7);
    stroke: currentColor;
    color: var(--ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.btn-glass.inverse svg { color: var(--paper); }

/* ============================================================
   LOADING STATE (.is-loading)
   The instrument works: the dial spins in the bulb, the liquid
   stays up, and the stem sloshes until the work is done.
   ============================================================ */
.btn-thermo.is-loading,
.btn-secondary.is-loading,
.btn-pill.is-loading,
.btn-orb.is-loading,
.btn-glass.is-loading { pointer-events: none; }

.is-loading .btn-label { opacity: 0.55; }

.is-loading .thermo-bulb::after { opacity: 1; }

.is-loading .thermo-bulb::before {
    opacity: 1;
    animation: ar-spin 0.9s linear infinite;
}

.is-loading .thermo-bulb svg {
    opacity: 0;
    transform: scale(0.5);
}

.btn-thermo.is-loading .thermo-stem::before {
    transform: none;
    animation: ar-slosh 1.7s ease-in-out infinite;
}

.btn-pill.is-loading::before {
    transform: none;
    animation: ar-slosh 1.7s ease-in-out infinite;
}

.btn-glass.is-loading {
    border-top-color: rgba(166, 152, 123, 0.65);
    border-left-color: rgba(166, 152, 123, 0.65);
}

@keyframes ar-spin {
    to { transform: rotate(360deg); }
}

@keyframes ar-slosh {
    0%, 100% { transform: translateX(-88%); }
    50% { transform: translateX(-12%); }
}

/* ============================================================
   DISABLED STATE (:disabled or .is-disabled)
   The instrument at rest: muted metal, no liquid, no lift.
   ============================================================ */
.btn-thermo:disabled, .btn-thermo.is-disabled,
.btn-secondary:disabled, .btn-secondary.is-disabled,
.btn-pill:disabled, .btn-pill.is-disabled,
.btn-orb:disabled, .btn-orb.is-disabled,
.btn-glass:disabled, .btn-glass.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.btn-thermo:disabled .thermo-bulb, .btn-thermo.is-disabled .thermo-bulb,
.btn-secondary:disabled .thermo-bulb, .btn-secondary.is-disabled .thermo-bulb,
.btn-orb:disabled .thermo-bulb, .btn-orb.is-disabled .thermo-bulb,
.btn-thermo:disabled .thermo-stem, .btn-thermo.is-disabled .thermo-stem,
.btn-pill:disabled, .btn-pill.is-disabled {
    background: var(--metallic-muted);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.08);
}

.btn-thermo:disabled .thermo-stem::before, .btn-thermo.is-disabled .thermo-stem::before,
.btn-pill:disabled::before, .btn-pill.is-disabled::before,
.btn-thermo:disabled .thermo-bulb::after, .btn-thermo.is-disabled .thermo-bulb::after,
.btn-secondary:disabled .thermo-bulb::after, .btn-secondary.is-disabled .thermo-bulb::after,
.btn-orb:disabled .thermo-bulb::after, .btn-orb.is-disabled .thermo-bulb::after { display: none; }

.btn-thermo:disabled .btn-label, .btn-thermo.is-disabled .btn-label,
.btn-secondary:disabled .btn-label, .btn-secondary.is-disabled .btn-label,
.btn-pill:disabled .btn-label, .btn-pill.is-disabled .btn-label,
.btn-glass:disabled .btn-label, .btn-glass.is-disabled .btn-label { color: rgba(41, 38, 30, 0.38); }

.btn-thermo:disabled .thermo-bulb svg, .btn-thermo.is-disabled .thermo-bulb svg,
.btn-secondary:disabled .thermo-bulb svg, .btn-secondary.is-disabled .thermo-bulb svg,
.btn-orb:disabled .thermo-bulb svg, .btn-orb.is-disabled .thermo-bulb svg { stroke: rgba(41, 38, 30, 0.4); }

.btn-glass:disabled, .btn-glass.is-disabled { opacity: 0.55; }

/* ============================================================
   THERMO PROGRESS
   The thermometer as a literal instrument: liquid-filled bulb
   and a channel that reads the value. Set --value inline.
   Add .indeterminate while the amount is unknown.
   ============================================================ */
.thermo-progress {
    --value: 50%;
    --bulb: 40px;
    --track-h: 18px;
    display: inline-flex;
    align-items: center;
    width: var(--w, 320px);
}

.tp-bulb {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: var(--bulb);
    height: var(--bulb);
    border-radius: 50%;
    background: var(--liquid-bulb);
    box-shadow: var(--metallic-shadow);
}

.tp-track {
    position: relative;
    overflow: hidden;
    flex: 1;
    height: var(--track-h);
    margin-left: calc(var(--bulb) / -2);
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
    background: rgba(41, 38, 30, 0.16);
    box-shadow:
        inset 0 2px 4px rgba(41, 38, 30, 0.28),
        inset 0 -1px 2px rgba(255, 252, 245, 0.25);
}

.tp-fill {
    display: block;
    height: 100%;
    width: var(--value);
    min-width: calc(var(--bulb) / 2);
    background: var(--liquid);
    border-radius: inherit;
    box-shadow:
        inset 0 1px 2px rgba(255, 252, 245, 0.5),
        inset 0 -2px 4px rgba(41, 38, 30, 0.2);
    transition: width 0.6s cubic-bezier(0.33, 1, 0.45, 1);
}

.thermo-progress.indeterminate .tp-fill {
    width: 40%;
    animation: ar-flow 1.8s ease-in-out infinite;
}

@keyframes ar-flow {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(285%); }
}

.thermo-progress.tp-sm { --bulb: 30px; --track-h: 12px; }
.thermo-progress.tp-lg { --bulb: 52px; --track-h: 26px; }

/* ============================================================
   LOADER ORB
   Standalone wait state: a liquid-filled bulb radiating
   ripple rings. Sizes via .sz-sm / (default) / .sz-lg.
   ============================================================ */
.loader-orb {
    --size: 48px;
    position: relative;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--liquid-bulb);
    box-shadow: var(--metallic-shadow);
}

.loader-orb::before,
.loader-orb::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(166, 152, 123, 0.75);
    animation: ar-ripple 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.loader-orb::after { animation-delay: 1.1s; }

.loader-orb.sz-sm { --size: 32px; }
.loader-orb.sz-lg { --size: 72px; }

@keyframes ar-ripple {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ============================================================
   FORM CONTROLS
   Recessed channels for input, the pour for state changes.
   Add .inverse to the field/control on dark ground.
   ============================================================ */
.arodum-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
    font-family: var(--font-sans);
}

.arodum-field > label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.arodum-field.inverse > label { color: var(--paper-soft); }

.arodum-input {
    height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid rgba(41, 38, 30, 0.1);
    background: rgba(250, 249, 247, 0.55);
    box-shadow:
        inset 0 2px 5px rgba(41, 38, 30, 0.14),
        inset 0 -1px 2px rgba(255, 252, 245, 0.7);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink);
    caret-color: #a6987b;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.arodum-input::placeholder { color: rgba(41, 38, 30, 0.35); }

.arodum-input:focus {
    border-color: rgba(166, 152, 123, 0.8);
    box-shadow:
        inset 0 2px 5px rgba(41, 38, 30, 0.12),
        var(--focus-ring);
}

.arodum-field.inverse .arodum-input {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.28);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.35),
        inset 0 -1px 2px rgba(255, 255, 255, 0.08);
    color: var(--paper);
}

.arodum-field.inverse .arodum-input::placeholder { color: rgba(250, 249, 247, 0.35); }

.arodum-field.inverse .arodum-input:focus {
    border-color: rgba(166, 152, 123, 0.7);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.3),
        var(--focus-ring);
}

textarea.arodum-input {
    height: auto;
    min-height: 96px;
    padding: 14px 18px;
    resize: vertical;
}

/* Toggle: recessed track, metal knob, liquid pours in when on */
.arodum-toggle {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 32px;
    cursor: pointer;
    flex-shrink: 0;
}

.arodum-toggle input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.arodum-toggle .track {
    position: absolute;
    inset: 0;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: rgba(41, 38, 30, 0.14);
    box-shadow:
        inset 0 2px 4px rgba(41, 38, 30, 0.28),
        inset 0 -1px 2px rgba(255, 252, 245, 0.35);
    pointer-events: none;
    transition: box-shadow 0.25s ease;
}

.arodum-toggle .track::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--liquid);
    box-shadow:
        inset 0 1px 2px rgba(255, 252, 245, 0.4),
        inset 0 -2px 4px rgba(41, 38, 30, 0.25);
    transform: translateX(-100%);
    transition: transform 0.45s cubic-bezier(0.33, 1, 0.45, 1);
}

.arodum-toggle input:checked ~ .track::before { transform: translateX(0); }

.arodum-toggle .knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--metallic-bg);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.9),
        inset -1px -1px 3px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.arodum-toggle input:checked ~ .knob { left: 29px; }

.arodum-toggle input:focus-visible ~ .track {
    box-shadow:
        inset 0 2px 4px rgba(41, 38, 30, 0.28),
        var(--focus-ring);
}

/* Checkbox and radio: small recessed vessels the liquid fills */
.arodum-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--ink);
    user-select: none;
}

.arodum-check.inverse { color: var(--paper); }

.arodum-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.arodum-check .box {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    flex-shrink: 0;
    background: rgba(41, 38, 30, 0.12);
    box-shadow:
        inset 0 2px 4px rgba(41, 38, 30, 0.25),
        inset 0 -1px 2px rgba(255, 252, 245, 0.35);
    transition: box-shadow 0.25s ease;
}

.arodum-check .box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--liquid);
    box-shadow: inset 0 1px 2px rgba(255, 252, 245, 0.45);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.arodum-check .box svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 13px;
    height: 13px;
    stroke: #29261e;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease 0.08s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
}

.arodum-check input:checked ~ .box::before { opacity: 1; transform: scale(1); }
.arodum-check input:checked ~ .box svg { opacity: 1; transform: scale(1); }

.arodum-check input:focus-visible ~ .box {
    box-shadow:
        inset 0 2px 4px rgba(41, 38, 30, 0.25),
        var(--focus-ring);
}

.arodum-check.radio .box { border-radius: 50%; }

.arodum-check.radio .box::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #29261e;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease 0.08s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
}

.arodum-check.radio input:checked ~ .box::after { opacity: 1; transform: scale(1); }

/* ============================================================
   CHIPS
   Archival tags. Glass by default, .inverse on dark ground,
   .chip-metal for the rare gold-stamped tag.
   ============================================================ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    border-left: 1px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid var(--edge-shade-soft);
    border-right: 1px solid var(--edge-shade-soft);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

.chip.inverse {
    background: var(--glass-bg);
    border-top-color: var(--edge-soft);
    border-left-color: var(--edge-soft);
    color: var(--paper-soft);
}

.chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a6987b;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.chip .dot.ink { background: #29261e; }
.chip .dot.mid { background: #8a8070; }
.chip .dot.paper { background: #faf9f7; }

.chip-metal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--metallic-bg);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.8),
        inset -1px -1px 2px rgba(0, 0, 0, 0.15),
        0 6px 14px rgba(0, 0, 0, 0.15);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #29261e;
    white-space: nowrap;
}

/* ============================================================
   GLASS CARD FAMILY
   The standard vessels for content. Default assumes gradient or
   dark ground (paper text); add .on-light for parchment grounds.
   ============================================================ */
.glass-card { color: var(--paper); }

.glass-card.on-light {
    color: var(--ink);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 100%);
    border-top-color: rgba(255, 255, 255, 0.75);
    border-left-color: rgba(255, 255, 255, 0.75);
    border-bottom-color: var(--edge-shade-soft);
    border-right-color: var(--edge-shade-soft);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
}

.card-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-soft);
    margin-bottom: 12px;
}
.glass-card.on-light .card-kicker { color: var(--ink-soft); }

.card-title {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.card-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--paper-soft);
}
.glass-card.on-light .card-body { color: var(--ink-soft); }

.card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* Interactive card: lifts, and gold rims it */
.glass-card.interactive {
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.glass-card.interactive:hover {
    transform: translateY(-6px);
    box-shadow: 0 44px 72px rgba(0, 0, 0, 0.28);
    border-top-color: rgba(166, 152, 123, 0.6);
    border-left-color: rgba(166, 152, 123, 0.6);
}

/* Stat card: one number, read like a gauge */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.stat-value {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    background: linear-gradient(180deg, #faf9f7 0%, #d4cfbf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glass-card.on-light .stat-value {
    background: linear-gradient(135deg, #29261e 0%, #6b6556 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-soft);
}
.glass-card.on-light .stat-label { color: var(--ink-soft); }

.stat-delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #a6987b;
}

.stat-delta::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a6987b;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Source card: a saved clip in the registry */
.source-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--r-node);
}

.source-card .source-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.source-card .source-thumb svg {
    width: 16px;
    height: 16px;
    fill: rgba(255, 255, 255, 0.85);
}

.glass-card.on-light .source-thumb {
    background: linear-gradient(135deg, rgba(41, 38, 30, 0.1), rgba(41, 38, 30, 0.04));
    border-color: rgba(41, 38, 30, 0.1);
}
.glass-card.on-light .source-thumb svg { fill: rgba(41, 38, 30, 0.7); }

.source-card h4 {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
}

.source-card p {
    font-size: 11px;
    margin: 0;
    color: var(--paper-soft);
}
.glass-card.on-light .source-card p,
.source-card.on-light p { color: var(--ink-soft); }

/* ============================================================
   ARODUM SELECT (requires arodum.js)
   A recessed trigger opening a frosted panel. The liquid stamps
   the chosen option. Add data-searchable for the filter box.
   Markup:
   div.arodum-select[data-searchable]
     > input[type=hidden]
     > button.select-trigger > span.select-value + svg
     > div.select-panel[hidden]
         > div.select-search > input.arodum-input   (searchable)
         > ul.select-options > li[role=option][data-value]
   ============================================================ */
.arodum-select {
    position: relative;
    min-width: 240px;
    font-family: var(--font-sans);
}

.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 46px;
    padding: 0 16px 0 18px;
    border-radius: 14px;
    border: 1px solid rgba(41, 38, 30, 0.1);
    background: rgba(250, 249, 247, 0.55);
    box-shadow:
        inset 0 2px 5px rgba(41, 38, 30, 0.14),
        inset 0 -1px 2px rgba(255, 252, 245, 0.7);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.select-trigger:focus-visible,
.arodum-select.open .select-trigger {
    border-color: rgba(166, 152, 123, 0.8);
    box-shadow:
        inset 0 2px 5px rgba(41, 38, 30, 0.12),
        var(--focus-ring);
}

.select-trigger .select-value.placeholder { color: rgba(41, 38, 30, 0.4); }

.select-trigger svg {
    width: 16px;
    height: 16px;
    stroke: var(--c-mid);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.arodum-select.open .select-trigger svg { transform: rotate(180deg); }

.arodum-select.inverse .select-trigger {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.28);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.35),
        inset 0 -1px 2px rgba(255, 255, 255, 0.08);
    color: var(--paper);
}
.arodum-select.inverse .select-trigger .select-value.placeholder { color: rgba(250, 249, 247, 0.4); }
.arodum-select.inverse.open .select-trigger,
.arodum-select.inverse .select-trigger:focus-visible {
    border-color: rgba(166, 152, 123, 0.7);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.3),
        var(--focus-ring);
}

.select-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    padding: 8px;
    border-radius: 16px;
    background: rgba(250, 249, 247, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(41, 38, 30, 0.08);
    border-right: 1px solid rgba(41, 38, 30, 0.08);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    animation: ar-panel-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arodum-select.inverse .select-panel {
    background: rgba(25, 23, 18, 0.94);
    border-top-color: var(--edge-soft);
    border-left-color: var(--edge-soft);
    border-bottom-color: rgba(0, 0, 0, 0.4);
    border-right-color: rgba(0, 0, 0, 0.4);
}

@keyframes ar-panel-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

.select-search { padding: 2px 2px 8px; }

.select-search .arodum-input {
    width: 100%;
    height: 36px;
    border-radius: 10px;
    font-size: 13px;
}

.select-options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 224px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.select-options li {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.arodum-select.inverse .select-options li { color: var(--paper); }

.select-options li:hover,
.select-options li.is-active {
    background: rgba(166, 152, 123, 0.2);
}

.select-options li[aria-selected="true"] {
    background: var(--liquid);
    color: #29261e;
    font-weight: 600;
    box-shadow: inset 0 1px 2px rgba(255, 252, 245, 0.45);
}

.select-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--c-mid);
}

/* ------------------------------------------------------------
   MULTISELECT (.arodum-select.multi) and TAGGING (data-tagging)
   Chosen options collect as liquid tags inside the trigger.
   Tagging mints new options from the search query on Enter.
   ------------------------------------------------------------ */
.arodum-select.multi .select-trigger {
    height: auto;
    min-height: 46px;
    padding: 6px 16px 6px 8px;
}

.select-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.tags-placeholder {
    color: rgba(41, 38, 30, 0.4);
    font-size: 14px;
    padding-left: 10px;
}

.arodum-select.inverse .tags-placeholder { color: rgba(250, 249, 247, 0.4); }

.select-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px 5px 12px;
    border-radius: var(--r-pill);
    background: var(--liquid);
    box-shadow:
        inset 0 1px 2px rgba(255, 252, 245, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.12);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #29261e;
    white-space: nowrap;
    animation: ar-tag-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ar-tag-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: none; }
}

.select-tag .tag-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(41, 38, 30, 0.14);
    color: #29261e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.select-tag .tag-x:hover {
    background: rgba(41, 38, 30, 0.3);
    transform: scale(1.1);
}

.select-create {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 2px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s ease;
}

.arodum-select.inverse .select-create { color: var(--paper); }

.select-create:hover,
.select-create.is-active { background: rgba(166, 152, 123, 0.2); }

.select-create .plus-orb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--metallic-bg);
    box-shadow:
        inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.9),
        inset -1px -1px 2px rgba(0, 0, 0, 0.18),
        0 2px 5px rgba(0, 0, 0, 0.18);
    color: #29261e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

/* ============================================================
   ARODUM TABS (requires arodum.js)
   A recessed rail; the liquid slug slides beneath the active
   tab. Markup:
   div.arodum-tabs > div.tab-rail[role=tablist]
     > span.tab-ink + button.tab[data-tab=id]...
   Panels: [data-tab-panel=id]
   ============================================================ */
.arodum-tabs { font-family: var(--font-sans); }

.tab-rail {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border-radius: var(--r-pill);
    background: rgba(41, 38, 30, 0.1);
    box-shadow:
        inset 0 2px 4px rgba(41, 38, 30, 0.22),
        inset 0 -1px 2px rgba(255, 252, 245, 0.35);
    max-width: 100%;
    overflow-x: auto;
}

.arodum-tabs.inverse .tab-rail {
    background: rgba(255, 255, 255, 0.07);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.08);
}

.tab-ink {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 0;
    border-radius: var(--r-pill);
    background: var(--liquid);
    box-shadow:
        inset 0 1px 2px rgba(255, 252, 245, 0.45),
        inset 0 -2px 4px rgba(41, 38, 30, 0.2);
    transition: left 0.4s cubic-bezier(0.33, 1, 0.45, 1), width 0.4s cubic-bezier(0.33, 1, 0.45, 1);
    pointer-events: none;
}

.tab {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 9px 18px;
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease;
    outline: none;
}

.arodum-tabs.inverse .tab { color: var(--paper-soft); }

.tab.is-active { color: #29261e; }

.tab:focus-visible { box-shadow: var(--focus-ring); }

[data-tab-panel][hidden] { display: none; }

/* ============================================================
   TOOLTIP (CSS only)
   <anything data-tip="Label">. Dark archival bubble.
   ============================================================ */
[data-tip] { position: relative; }

[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(25, 23, 18, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    z-index: 60;
}

[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(25, 23, 18, 0.94);
    opacity: 0;
    pointer-events: none;
    z-index: 60;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::before {
    animation: ar-tip-in 0.25s ease 0.15s forwards;
}

@keyframes ar-tip-in {
    to { opacity: 1; }
}

/* ============================================================
   MODAL (requires arodum.js)
   Frosted scrim, parchment panel. Open with
   [data-modal-open="#id"], close with [data-modal-close] or Esc.
   ============================================================ */
.arodum-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s ease, visibility 0.35s;
}

.arodum-modal.open {
    visibility: visible;
    opacity: 1;
}

.modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(25, 23, 18, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.modal-panel {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    padding: 32px;
    border-radius: var(--r-large);
    background: rgba(250, 249, 247, 0.92);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-top: 1px solid rgba(255, 255, 255, 0.85);
    border-left: 1px solid rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(41, 38, 30, 0.08);
    border-right: 1px solid rgba(41, 38, 30, 0.08);
    box-shadow: var(--shadow-float-deep);
    color: var(--ink);
    transform: translateY(24px) scale(0.97);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arodum-modal.open .modal-panel { transform: none; }

.modal-title {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 14px 0 10px;
}

.modal-body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
}

.modal-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

/* ============================================================
   TOASTS (requires arodum.js)
   arodumToast('message', { kind: 'gold'|'paper'|'mid',
   duration: 3800 }). The liquid drain reads the time left.
   ============================================================ */
.toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.arodum-toast {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 360px;
    padding: 14px 16px 16px;
    border-radius: 16px;
    background: rgba(25, 23, 18, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    font-family: var(--font-sans);
    animation: ar-toast-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arodum-toast.leaving { animation: ar-toast-out 0.3s ease forwards; }

.arodum-toast .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a6987b;
    flex-shrink: 0;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.arodum-toast .dot.paper { background: #faf9f7; }
.arodum-toast .dot.mid { background: #8a8070; }

.toast-msg {
    font-size: 13px;
    color: var(--paper);
    line-height: 1.45;
}

.toast-drain {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--liquid);
    transform-origin: left;
    animation: ar-drain linear forwards;
}

@keyframes ar-toast-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes ar-toast-out {
    to { opacity: 0; transform: translateY(10px) scale(0.98); }
}

@keyframes ar-drain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ============================================================
   REGISTRY TABLE
   Archival lines, calm rows, gold wash on hover.
   Add .inverse on dark ground.
   ============================================================ */
.arodum-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--ink);
}

.arodum-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-mid);
    border-bottom: 1px solid rgba(41, 38, 30, 0.18);
}

.arodum-table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(41, 38, 30, 0.08);
}

.arodum-table tbody tr { transition: background 0.2s ease; }

.arodum-table tbody tr:hover { background: rgba(166, 152, 123, 0.12); }

.arodum-table td.num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
}

.arodum-table.inverse { color: var(--paper); }
.arodum-table.inverse thead th {
    color: rgba(250, 249, 247, 0.45);
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
.arodum-table.inverse tbody td { border-bottom-color: rgba(255, 255, 255, 0.07); }
.arodum-table.inverse tbody tr:hover { background: rgba(166, 152, 123, 0.14); }

/* ============================================================
   MEDIA PLAYING (requires arodum.js)
   The playback instruments. The scrubber is the thermometer:
   liquid fills the channel as time passes, the metal knob
   seeks. Set data-duration for simulated time on specs, or
   data-media="#videoId" to drive a real <video>/<audio>.
   ============================================================ */

/* Small round metal transport button */
.media-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--metallic-bg);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.85),
        inset -1px -1px 3px rgba(0, 0, 0, 0.18),
        0 6px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.media-btn:hover { transform: scale(1.06); }
.media-btn:active {
    transform: scale(0.94);
    box-shadow:
        inset 1.5px 1.5px 4px rgba(0, 0, 0, 0.2),
        inset -1px -1px 2px rgba(255, 255, 255, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.12);
}

.media-btn.big { width: 46px; height: 46px; }

.media-btn svg {
    width: 15px;
    height: 15px;
    fill: #29261e;
    stroke: none;
}
.media-btn svg.stroked {
    fill: none;
    stroke: #29261e;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.media-btn.big svg { width: 18px; height: 18px; }

/* Playback-rate pill: cycles 1x / 1.25x / 1.5x / 2x / 0.5x */
.media-btn.rate-btn {
    width: auto;
    min-width: 42px;
    padding: 0 11px;
    border-radius: var(--r-pill);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #29261e;
}

/* Play/pause and mute icon swaps */
.ic-pause { display: none; }
.is-playing .play-toggle .ic-play { display: none; }
.is-playing .play-toggle .ic-pause { display: block; }
.ic-unmuted { display: block; }
.ic-muted { display: none; }
.is-muted .muted-toggle .ic-unmuted { display: none; }
.is-muted .muted-toggle .ic-muted { display: block; }

/* The seek channel */
.arodum-scrub {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: var(--r-pill);
    background: rgba(41, 38, 30, 0.28);
    box-shadow:
        inset 0 1px 3px rgba(41, 38, 30, 0.35),
        inset 0 -1px 1px rgba(255, 252, 245, 0.2);
    cursor: pointer;
    touch-action: none;
}

.scrub-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: inherit;
    background: var(--liquid);
    box-shadow: inset 0 1px 1px rgba(255, 252, 245, 0.45);
    pointer-events: none;
}

.scrub-knob {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--metallic-bg);
    box-shadow:
        inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.9),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2),
        0 3px 8px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease;
    pointer-events: none;
}

.arodum-scrub:hover .scrub-knob,
.arodum-scrub.dragging .scrub-knob { transform: translate(-50%, -50%) scale(1.18); }

.arodum-scrub.slim { height: 6px; }
.arodum-scrub.slim .scrub-knob { width: 12px; height: 12px; }

/* Buffered ranges: a fainter pre-pour beneath the liquid */
.scrub-buffer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: inherit;
    background: rgba(166, 152, 123, 0.3);
    pointer-events: none;
}

/* Insight markers pinned on the timeline; click seeks to them */
.scrub-marker {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f0ede7;
    box-shadow: 0 0 0 2px rgba(41, 38, 30, 0.4);
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s ease;
}

.scrub-marker:hover { transform: translate(-50%, -50%) scale(1.5); }

/* Hover time bubble */
.scrub-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    transform: translateX(-50%);
    padding: 5px 9px;
    border-radius: 8px;
    background: rgba(25, 23, 18, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--paper);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.arodum-scrub:hover .scrub-tip,
.arodum-scrub.dragging .scrub-tip { opacity: 1; }

/* Volume mini channel */
.volume-scrub {
    position: relative;
    width: 64px;
    height: 6px;
    flex: none;
    border-radius: var(--r-pill);
    background: rgba(41, 38, 30, 0.28);
    box-shadow: inset 0 1px 2px rgba(41, 38, 30, 0.3);
    cursor: pointer;
    touch-action: none;
}

.volume-scrub .scrub-fill { box-shadow: none; }

.media-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------------- Full player vessel ---------------- */
.arodum-player {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--r-large);
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-top: 1px solid var(--edge-soft);
    border-left: 1px solid var(--edge-soft);
    border-bottom: 1px solid var(--edge-shade);
    border-right: 1px solid var(--edge-shade);
    box-shadow: var(--shadow-float);
}

.player-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: radial-gradient(120% 140% at 20% 0%, #3a352a 0%, var(--c-dark) 55%, var(--c-deep) 100%);
    overflow: hidden;
}

.player-stage video,
.player-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* faint instrument ring behind the big play */
.player-stage::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.arodum-player.is-playing .player-stage::after { opacity: 0; }

.stage-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
}

.stage-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: none;
    background: var(--metallic-bg);
    box-shadow: var(--metallic-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, box-shadow 0.2s ease;
}

.stage-play:hover {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: var(--metallic-shadow-hover);
}

.stage-play svg {
    width: 26px;
    height: 26px;
    fill: #29261e;
    margin-left: 4px;
}

.arodum-player.is-playing .stage-play {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.8);
}

.player-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.25) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* Tap the stage to toggle; a brief orb flash confirms it */
.player-stage { cursor: pointer; }

.stage-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--metallic-bg);
    box-shadow: var(--metallic-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
}

.stage-flash svg {
    width: 26px;
    height: 26px;
    fill: #29261e;
}

.stage-flash.go { animation: ar-flash 0.55s ease forwards; }

@keyframes ar-flash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

.arodum-player:focus-visible { outline: none; box-shadow: var(--shadow-float), var(--focus-ring); }

.arodum-player:fullscreen {
    border-radius: 0;
    background: var(--c-deep);
}
.arodum-player:fullscreen .player-stage { aspect-ratio: auto; flex: 1; }

/* ---------------- Video registry tiles ---------------- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    width: 100%;
}

.video-tile {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: var(--glass-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-top: 1px solid var(--edge-soft);
    border-left: 1px solid var(--edge-soft);
    border-bottom: 1px solid var(--edge-shade);
    border-right: 1px solid var(--edge-shade);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
    color: var(--paper);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.video-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 52px rgba(0, 0, 0, 0.3);
    border-top-color: rgba(166, 152, 123, 0.6);
    border-left-color: rgba(166, 152, 123, 0.6);
}

.tile-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: radial-gradient(120% 140% at var(--art-x, 25%) 0%, #4a4436 0%, var(--c-dark) 60%, var(--c-deep) 100%);
}

.tile-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--metallic-bg);
    box-shadow: var(--metallic-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tile-orb svg {
    width: 15px;
    height: 15px;
    fill: #29261e;
    margin-left: 2px;
}

.video-tile:hover .tile-orb {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.tile-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: rgba(25, 23, 18, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--paper);
}

.tile-body { padding: 12px 14px 15px; }

.tile-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-meta {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--paper-soft);
}

/* ---------------- Audio clip row ---------------- */
.arodum-audio {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 20px;
    color: var(--paper);
    width: 100%;
    min-width: 320px;
}

.audio-body { flex: 1; min-width: 0; }

.audio-title {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    cursor: pointer;
}

.audio-wave i {
    flex: 1;
    min-width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.2s ease;
}

.arodum-audio.on-light { color: var(--ink); }
.arodum-audio.on-light .audio-wave i { background: rgba(41, 38, 30, 0.16); }

.audio-wave i.played { background: #a6987b; }

.arodum-audio .media-time { color: rgba(250, 249, 247, 0.55); }
.arodum-audio.on-light .media-time { color: var(--ink-soft); }

/* ---------------- Now playing bar ---------------- */
.arodum-nowplaying {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 10px;
    border-radius: 22px;
    color: var(--paper);
    width: 100%;
    min-width: 420px;
}

.np-thumb {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex-shrink: 0;
    background:
        radial-gradient(100% 100% at 25% 20%, #4a4436 0%, var(--c-dark) 60%, var(--c-deep) 100%);
    border-top: 1px solid var(--edge-soft);
    border-left: 1px solid var(--edge-soft);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.np-info { min-width: 0; max-width: 150px; }

.np-title {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.np-meta {
    font-family: var(--font-sans);
    font-size: 10px;
    color: rgba(250, 249, 247, 0.5);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.np-transport {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.arodum-nowplaying .media-time { color: rgba(250, 249, 247, 0.55); }

@media (max-width: 640px) {
    .arodum-nowplaying { min-width: 0; flex-wrap: wrap; }
    .arodum-audio { min-width: 0; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .btn-thermo, .btn-secondary, .btn-pill, .btn-orb, .btn-glass,
    .thermo-bulb, .thermo-bulb::before, .thermo-bulb::after, .thermo-bulb svg,
    .thermo-stem::before, .btn-pill::before, .btn-label,
    .tp-fill, .loader-orb::before, .loader-orb::after,
    .arodum-toggle .track, .arodum-toggle .track::before, .arodum-toggle .knob,
    .arodum-check .box, .arodum-check .box::before, .arodum-check .box::after, .arodum-check .box svg,
    .arodum-input,
    .glass-card.interactive, .select-panel, .select-trigger, .select-trigger svg,
    .select-options li, .tab-ink, .tab,
    [data-tip]::after, [data-tip]::before,
    .arodum-modal, .modal-panel, .arodum-toast, .toast-drain,
    .arodum-table tbody tr {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}