/* === base.css === */
/* base.css
 * ============================================
 * Core foundation: Root variables, resets, and base typography.
 * This file loads first and establishes the design system foundation.
 *
 * Purpose: Define CSS custom properties (variables) used throughout
 * the application and minimal typography/reset rules.
 *
 * Last updated: 2025-12-25
 * See: docs/delivery/74-bootstrap-vanilla-css/74-4.md
 */

/* === ROOT VARIABLES ===
 * Centralized theme configuration
 * These variables are used across all CSS files
 */
:root {
    /* Primary Theme Colors */
    --bs-primary: #8B4513;     /* Saddle Brown */
    --bs-primary-rgb: 139, 69, 19;
    --bs-secondary: #2F4F4F;   /* Dark Slate Gray */
    --bs-secondary-rgb: 47, 79, 79;

    /* Background Colors */
    --bs-body-bg: #F5F5DC;     /* Beige background */
    --bs-body-bg-rgb: 245, 245, 220;

    /* Border Colors */
    --bs-border-color: #D2B48C; /* Tan */

    /* Accent Colors */
    --bs-warning: #FFD700;     /* Goldenrod - for collection star */
    --bs-card-bg: #ffffff;     /* White card background */

    /* Navigation and Layout */
    --navbar-height: 56px;
    --sticky-top-offset: var(--navbar-height);
    --sidebar-width: 280px;
    --bs-primary-dark: #704010; /* Darker shade of primary */

    /* Z-index hierarchy - centralized for consistency */
    --z-index-base: 1;
    --z-index-card: 2;
    --z-index-header: 3;
    --z-index-progress: 4;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-overlay: 1025;
    --z-index-sidebar: 1029;
    --z-index-fixed: 1030;
    --z-index-navbar: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-floating-button: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* Spacing scale (matches Bootstrap) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 3rem;

    /* Typography */
    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.5;
}

/* Larger navbar on large screens */
@media (min-width: 992px) {
    :root {
        --navbar-height: 60px;
        --sticky-top-offset: var(--navbar-height);
    }
}

/* === BASE TYPOGRAPHY ===
 * Minimal resets that complement Bootstrap's reboot
 */
html {
    /* Bug fix 038: Removed overflow-x:hidden that masked layout bugs.
     * Root cause fixes applied to individual components instead.
     * See: specs/038-mobile-style-refresh/spec.md FR-001 */
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: #212529;
    background-color: var(--bs-body-bg);
}

/* Heading defaults */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Paragraph spacing */
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Link defaults - inherit color, remove underline */
a {
    color: inherit;
    text-decoration: none;
}

/* Image defaults */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Navbar brand images - explicit dimensions prevent CLS */
.brand-quotewise .navbar-brand img {
    width: 144px;
    height: 32px;
    aspect-ratio: 144 / 32;
}
.brand-quotosaurus .navbar-brand img {
    width: 28px;
    height: 28px;
    aspect-ratio: 1;
}

/* Focus ring behavior: keyboard-only
 * Prevents persistent highlight after click/tap
 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn-link:focus:not(:focus-visible),
[data-bs-toggle]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* === BOOTSTRAP ICON ALIGNMENT FIX ===
 * Bootstrap icons default to vertical-align: -0.125em on ::before
 * This causes icons to sit low relative to adjacent text/elements.
 * Global override to middle alignment - no known use case for the default.
 */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    vertical-align: middle;
}

/* === ACCESSIBILITY: Color Contrast Fix ===
 * Bootstrap's disabled #6c757d is borderline WCAG AA, darken slightly
 */
.page-item.disabled .page-link {
    color: #595959; /* ~7:1 contrast vs white, still visually "muted" */
}

/* === colors.css === */
/* colors.css
 * ============================================
 * Color system with modern color-mix() for dynamic variants.
 * Centralizes all color-related styling and generates hover/active
 * states dynamically instead of hardcoding hex values.
 *
 * Browser support: Chrome 111+, Firefox 113+, Safari 16.2+
 * Fallback: Older browsers use the explicit --bs-* variables
 *
 * Last updated: 2025-12-25
 * See: docs/delivery/74-bootstrap-vanilla-css/74-4.md
 */

/* === DYNAMIC COLOR VARIANTS ===
 * Generate hover/active states using color-mix()
 * This replaces hardcoded hex values like #A0522D with computed blends
 */
:root {
    /* Primary color variants */
    --primary-hover: color-mix(in srgb, var(--bs-primary) 85%, black);
    --primary-active: color-mix(in srgb, var(--bs-primary) 70%, black);
    --primary-light: color-mix(in srgb, var(--bs-primary) 10%, white);
    --primary-subtle: color-mix(in srgb, var(--bs-primary) 5%, white);

    /* Secondary color variants */
    --secondary-hover: color-mix(in srgb, var(--bs-secondary) 85%, black);
    --secondary-active: color-mix(in srgb, var(--bs-secondary) 70%, black);
    --secondary-light: color-mix(in srgb, var(--bs-secondary) 10%, white);

    /* Warning (gold star) variants */
    --warning-subtle: color-mix(in srgb, var(--bs-warning) 20%, white);
    --warning-bg: color-mix(in srgb, var(--bs-warning) 5%, white);
}

/* === PRIMARY BUTTON ===
 * Brown theme button styling with color-mix() hover states
 */
.btn-primary {
    color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: rgba(var(--bs-primary-rgb), 0.65);
    --bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), 0.65);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-primary,
a.btn-primary {
    color: #fff !important;
}

/* === OUTLINE BUTTONS === */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
}

/* Explicit hover rule for outline-primary buttons (ensure white text) */
a.btn-outline-primary:hover,
.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Fix: btn-check + btn-outline-primary hover (Bootstrap resets to non-hover vars) */
.btn-check + .btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Checked btn-outline-primary hover: darken slightly for feedback */
.btn-check:checked + .btn-outline-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-border-color: rgba(var(--bs-secondary-rgb), 0.65);

    &:hover,
    &.active {
        color: var(--bs-white);
        background-color: var(--bs-secondary);
        border-color: var(--bs-secondary);
    }
}

a.btn-outline-secondary:hover {
    color: #fff !important;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

/* === DANGER BUTTON === */
.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: white;

    &:hover {
        background-color: #bb2d3b;
        border-color: #b02a37;
    }
}

/* === TEXT COLORS === */
.text-primary {
    color: var(--bs-primary) !important;
}

.text-warning,
.border-warning {
    color: var(--bs-warning) !important;
}

.bg-warning-subtle {
    background-color: var(--warning-bg) !important;
}

/* === FOCUS RING ===
 * Use primary color for focus states
 */
.btn:focus,
.btn:active,
a:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* === DISABLED BUTTON STATES === */
.btn.disabled,
.btn:disabled {
    pointer-events: auto !important;
    background-color: rgba(var(--bs-primary-rgb), 0.4) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.4) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    pointer-events: auto !important;
    color: rgba(var(--bs-primary-rgb), 0.5) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
    background-color: transparent !important;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    pointer-events: auto !important;
    color: rgba(var(--bs-secondary-rgb), 0.5) !important;
    border-color: rgba(var(--bs-secondary-rgb), 0.3) !important;
    background-color: transparent !important;
}

/* === ALERT COLORS ===
 * Themed to match vintage book aesthetic
 */
.alert {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.alert-success {
    color: #43683C;
    background-color: #E8F3E6;
    border-color: #C8E6C2;
}

.alert-danger {
    color: #7A2A27;
    background-color: #F8E7E6;
    border-color: #F0CCCA;
}

.alert-info {
    color: var(--bs-secondary);
    background-color: #E6F0F0;
    border-color: #C8DCDC;
}

.alert-warning {
    color: #856404;
    background-color: #FFF8E6;
    border-color: #FFEEBA;
}

/* === CARD LINKS ===
 * Primary color for card links with hover state
 */
.card a,
.card-title a,
.originator-name a {
    color: var(--bs-primary);
    text-decoration: none;

    &:hover {
        color: var(--primary-hover);
    }
}

/* === NAVBAR COLORS === */
.navbar-dark {
    --bs-navbar-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.9);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
}

.navbar.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

/* === FEATURE ICONS === */
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* === ALPHABET NAVIGATION ===
 * Letter buttons with primary color theme
 */
.alphabet-nav .btn {
    min-width: 2.5rem;
    font-weight: 500;
    border-color: var(--bs-primary);
    color: var(--bs-primary);

    &:hover {
        background-color: var(--primary-light);
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }
}

.alphabet-nav .btn-primary {
    font-size: 1.1em;
    color: white;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);

    &:hover {
        color: white;
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
    }
}

.alphabet-nav .nav-link {
    color: var(--bs-body-color);
    background-color: var(--bs-gray-100);
    border-radius: var(--bs-border-radius);
    margin: 0.25rem;
    transition: all 0.2s ease-in-out;

    &:hover {
        background-color: var(--bs-gray-200);
    }

    &.active {
        color: var(--bs-white);
        background-color: var(--bs-primary);
        font-weight: 500;
    }
}

/* === MOBILE ALPHABET SIDEBAR === */
.alphabet-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.2rem 0;
    color: var(--bs-primary);
    text-decoration: none;
    opacity: 0.7;
    transition: all 0.2s ease;

    &:hover {
        color: var(--bs-primary);
        background-color: var(--primary-light);
        opacity: 1;
    }

    &.active {
        color: white;
        background-color: var(--bs-primary);
        opacity: 1;
        border-radius: 0;
    }
}

.alphabet-link-clear {
    color: white;
    background-color: var(--bs-secondary);
    opacity: 1;
    margin: 0.5rem 1px 0.2rem;
    width: calc(100% - 2px);
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover,
    &:active {
        color: white;
        background-color: var(--bs-secondary);
    }
}

/* === layout.css === */
/* layout.css
 * ============================================
 * Grid extensions, spacing utilities, and layout patterns.
 * Contains main-content positioning, sidebar layout, and
 * responsive container adjustments.
 *
 * Last updated: 2025-12-25
 * See: docs/delivery/74-bootstrap-vanilla-css/74-4.md
 */

/* === ANCHOR SCROLL OFFSET === */
/* Offset scroll targets below fixed navbar for anchor navigation */
[id] {
    scroll-margin-top: calc(var(--navbar-height) + 1rem);
}

/* === CONTAINER OVERRIDES === */
/* Neutralize .row negative margins when no sidebar */
main.container-fluid > .row {
    --bs-gutter-x: 0;
}

/* Bug fix 038: Neutralize footer row gutters to prevent overflow */
footer.container-fluid .row {
    --bs-gutter-x: 0;
}

/* === MAIN CONTENT LAYOUT === */
.main-content {
    position: relative;
    left: 0 !important;
    margin-left: 0;
    width: 100%;
    min-height: calc(100vh - var(--navbar-height) - 80px);
    padding-top: calc(var(--navbar-height) + 14px);  /* Tracks navbar + breathing room */
    padding-bottom: 2rem;
    padding-left: 0;
    padding-right: 0;
    transition: none;
    /* Bug fix 038: Contain inline size to prevent child overflow from causing horizontal scroll.
     * Defense layer after removing overflow-x:hidden from html. */
    contain: inline-size;
    overflow-x: clip;
}

@media (min-width: 576px) {
    .main-content {
        padding-left: 0;
        padding-right: 0;
    }
}

/* === FOOTER === */
footer.container-fluid {
    margin-top: auto;
    background-color: var(--bs-light);
    padding: 1rem 0;
}

/* === NAVBAR LAYOUT === */
.navbar {
    transition: none !important;
    z-index: var(--z-index-navbar);
    flex-wrap: nowrap !important;

    & * {
        transition: none !important;
    }

    & .btn-link {
        --bs-btn-padding-y: 0.375rem;
        --bs-btn-padding-x: 1rem;
        --bs-btn-font-size: 0.875rem;
        border: none;
        outline: none;

        &:hover,
        &:focus,
        &:active {
            background-color: transparent;
            box-shadow: none;
            outline: none;
        }
    }

    & .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.5;
    }
}

.navbar-brand {
    margin-left: 1rem;
}

/* Mobile navbar adjustments */
@media (max-width: 767.98px) {
    .navbar-brand {
        margin-left: 0.5rem;
        font-size: 1rem;
        white-space: nowrap;
    }

    .mobile-nav-icons {
        gap: 0;
        flex-shrink: 1;
        flex-wrap: nowrap !important;
        min-width: 0;  /* Allow shrinking below content size */
        margin-right: 0.25rem;  /* Breathing room from edge */

        & .nav-link {
            padding: 0.375rem 0.5rem;
        }
    }

    .navbar .container-fluid {
        flex-wrap: nowrap !important;
    }
}

/* === CARD LAYOUT === */
.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-cap-bg: rgba(var(--bs-secondary-rgb), 0.03);
    transition: transform 0.2s ease-in-out;
    position: relative;
    z-index: var(--z-index-card);

    &:hover {
        transform: translateY(-5px);
    }

    & .stretched-link::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

/* === MODAL LAYOUT === */
.modal-content {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.modal-footer {
    gap: 0.5rem;
    padding: 0.75rem;
}

/* === DROPDOWN LAYOUT === */
.dropdown-menu {
    --bs-dropdown-min-width: 240px;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    --bs-dropdown-item-padding-y: 0.75rem;
    --bs-dropdown-item-padding-x: 1.25rem;
    display: flex;
    align-items: center;

    &:active {
        background-color: var(--bs-primary);
    }
}

.dropdown-header {
    --bs-dropdown-header-color: var(--bs-secondary);
    --bs-dropdown-header-padding-y: 0.5rem;
    --bs-dropdown-header-padding-x: 1.25rem;
    font-weight: 600;
}

/* === STICKY HEADER === */
/* Fix: Prevent navbar text wrapping in mid-desktop range instead of increasing height */
@media (min-width: 768px) and (max-width: 1050px) {
    .navbar-nav {
        flex-wrap: nowrap !important;  /* Prevent wrapping to second line */
    }
    .navbar-nav .nav-link {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
        font-size: 0.875rem;  /* Slightly smaller text to fit */
        white-space: nowrap;
    }
}

.sticky-top {
    position: sticky !important;
    top: var(--sticky-top-offset) !important;
    z-index: var(--z-index-sticky);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 -3px 0 0 white;
    padding-bottom: 1rem;
}

/* Cover gap when navbar height varies - use CSS var for consistency */
.sticky-top::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--navbar-height, 60px));
    left: 0;
    right: 0;
    height: var(--navbar-height, 60px);
    background: inherit;
}

@media (max-width: 767.98px) {
    .sticky-top {
        z-index: calc(var(--z-index-navbar) - 1);
    }
}

.sticky-top + .container {
    padding-top: 0.5rem;
}

#stickyHeader {
    --sticky-header-offset: 24px;
    background-color: white;
    border-bottom: 3px solid var(--bs-primary);
    margin-top: -7px;
    margin-left: calc(-1 * var(--sticky-header-offset));
    margin-right: calc(-1 * var(--sticky-header-offset));
    padding-left: var(--sticky-header-offset);
    padding-right: var(--sticky-header-offset);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    /* Bug fix 038: Prevent negative margins from causing horizontal overflow.
     * Clip content that extends beyond container bounds. */
    overflow-x: clip;

    & .btn-sm {
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
        font-size: 0.8rem;
    }

    & .sort-pill-toggle .btn {
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }
}

/* === SIDEBAR LAYOUT === */
.sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: calc(-1 * var(--sidebar-width));
    height: calc(100vh - var(--navbar-height));
    width: var(--sidebar-width);
    z-index: var(--z-index-sidebar);
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    padding: 1rem;
    transition: left 0.3s ease-in-out;
    overflow-y: auto;

    &.show {
        left: 0;
    }
}

/* Mobile: Narrower sidebar for better proportions */
@media (max-width: 767.98px) {
    .sidebar {
        --sidebar-width: 260px;
    }
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-overlay);

    &.show {
        display: block;
    }
}

/* === FLOATING ACTION BUTTONS === */
.floating-actions {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: var(--z-index-floating-button);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & .btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--bs-primary);
        color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;

        &:hover {
            transform: scale(1.1);
            background-color: var(--bs-primary-dark);
        }

        &:active {
            transform: scale(0.95);
        }
    }
}

#mobile-collection-floating-button,
#mobile-account-floating-button {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: var(--z-index-floating-button);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    line-height: 1;

    &:hover {
        background-color: var(--bs-primary-dark);
    }
}

/* Position floating buttons above mini-console on mobile */
@media (max-width: 767.98px) {
    .floating-actions,
    #mobile-collection-floating-button,
    #mobile-account-floating-button {
        bottom: calc(50px + 1rem + env(safe-area-inset-bottom, 0px));
    }

    /* Hide chat FAB on mobile - mini-console provides chat access */
    #chat-toggle-lazy {
        display: none;
    }
}

/* === MOBILE ALPHABET SIDEBAR === */
.alphabet-sidebar {
    position: fixed;
    top: calc(var(--navbar-height) + 1rem);
    right: 0;
    height: calc(100vh - var(--navbar-height) - 2rem);
    width: 30px;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: var(--z-index-sidebar);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

/* === DESKTOP OVERRIDES === */
@media (min-width: 768px) {
    .alphabet-sidebar {
        display: none;
    }

    .has-sidebar .sidebar {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        height: calc(100vh - var(--navbar-height));
        width: var(--sidebar-width);
        z-index: var(--z-index-sidebar);
        background-color: var(--bs-body-bg);
        border-right: 1px solid var(--bs-border-color);
        padding: 1rem;
        overflow-y: auto;
    }

    .has-sidebar .main-content {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    .has-sidebar .row {
        margin-left: 0;
        margin-right: 0;
    }

    .sidebar-overlay,
    .floating-actions {
        display: none;
    }

    .has-sidebar footer .container {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
    }
}

/* === MOBILE LAYOUT OVERRIDES === */
@media (max-width: 767.98px) {
    /* Let content flow naturally on mobile - don't force viewport height */
    .main-content {
        min-height: auto;
        padding-bottom: 0.5rem; /* Tighter on mobile (was 2rem) */
    }
}

@media (max-width: 575.98px) {
    /* Make bg-light transparent on mobile */
    .container-fluid.bg-light {
        background-color: transparent !important;
    }

    /* Bug fix 038: Tighter mobile edge padding for cards (0.25rem from 0.5rem).
     * BEFORE: 0.5rem (~18px total with card padding)
     * AFTER: 0.25rem (~14px total with card padding)
     * Footer excluded - keeps standard padding for readability.
     * See: specs/038-mobile-style-refresh/spec.md FR-005 */
    .container-fluid:not(footer) {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* Footer keeps standard padding on mobile */
    footer.container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Bug fix 038: Restore inner container padding for footer readability */
    footer.container-fluid > .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .container-fluid.py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .container-fluid > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Bug fix 038: Neutralize row gutters when container padding is zeroed.
     * Without this, .row negative margins (-12px) cause 4px overflow. */
    .container-fluid > .container .row {
        --bs-gutter-x: 0;
    }

    /* Bug fix 038: Eliminate negative margins on mobile to prevent overflow.
     * Desktop uses negative margins for full-bleed effect, mobile uses tight padding. */
    #stickyHeader {
        --sticky-header-offset: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .sticky-top {
        top: var(--sticky-top-offset) !important;
    }

    .row.mb-4 {
        margin-bottom: 0.75rem !important;
    }

    h2.text-center.mb-3 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem !important;
    }
}

/* === HERO SECTION LAYOUT === */
.display-4 {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.1rem;
}

/* === FILTER/SORT LAYOUT === */
.filter-sort-container-wrapper {
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
}

.filter-sort-flex {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1rem;
}

.filter-item {
    width: 100%;
}

@media (min-width: 768px) {
    .filter-sort-flex {
        flex-direction: row;
        align-items: center;
    }

    .filter-item {
        width: auto;
    }
}

/* === SORT PILL TOGGLE === */
.sort-pill-toggle {
    border-radius: 50rem;
    overflow: hidden;

    & .btn {
        border-radius: 0;
        padding: 0.25rem 0.5rem;

        &:first-child {
            border-top-left-radius: 50rem;
            border-bottom-left-radius: 50rem;
        }

        &:last-child {
            border-top-right-radius: 50rem;
            border-bottom-right-radius: 50rem;
        }
    }
}

/* === INFO TOGGLE CHEVRON === */
/* Rotates chevron based on aria-expanded state (originator/source detail pages) */
.info-toggle-icon {
    text-decoration: none;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: flex-start;
    margin-top: 0.2rem;

    &:hover {
        text-decoration: none;
    }
}

.info-chevron {
    display: inline-block;
    transition: transform 0.35s ease;
    font-size: 1.1rem;
    font-weight: bold;
}

/* Chevron points right when collapsed, down when expanded */
.info-toggle-icon[aria-expanded="false"] .info-chevron {
    transform: rotate(-90deg);
}

.info-toggle-icon[aria-expanded="true"] .info-chevron {
    transform: rotate(0deg);
}

/* Larger chevron on mobile for better touch targets */
@media (max-width: 768px) {
    .info-chevron {
        font-size: 1.3rem;
    }
}

/* === TOUCH DEVICE OPTIMIZATIONS === */
@media (hover: none) {
    .sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* === utilities.css === */
/* utilities.css
 * ============================================
 * Semantic wrapper classes that replace common Bootstrap utility combos.
 * These classes self-document intent and reduce template verbosity.
 *
 * MAPPING:
 * | Bootstrap Combo                                  | Semantic Class   |
 * |--------------------------------------------------|------------------|
 * | d-flex align-items-center justify-content-between| .flex-spread     |
 * | d-flex align-items-center                        | .flex-center     |
 * | d-flex flex-column                               | .flex-column     |
 * | d-flex d-md-none align-items-center              | .mobile-nav      |
 * | d-inline-block d-md-none                         | .mobile-only     |
 * | d-none d-md-inline-block                         | .desktop-only    |
 * | bi fs-5                                          | .nav-icon        |
 * | flex-shrink-0                                    | .flex-shrink-0   |
 * | min-width: 0                                     | .min-width-0     |
 *
 * Last updated: 2025-12-25
 * See: docs/delivery/74-bootstrap-vanilla-css/74-4.md
 */

/* === FLEXBOX UTILITIES === */

/* Flex with space-between - replaces 3 utility classes */
.flex-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Flex with center alignment - replaces 2 utility classes */
.flex-center {
    display: flex;
    align-items: center;
}

/* Flex column layout */
.flex-column {
    display: flex;
    flex-direction: column;
}

/* Prevent flex item from shrinking */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Allow shrinking below content width */
.min-width-0 {
    min-width: 0;
}

/* === RESPONSIVE VISIBILITY === */

/* Visible on mobile only - replaces d-inline-block d-md-none */
.mobile-only {
    display: inline-block;

    @media (min-width: 768px) {
        display: none;
    }
}

/* Visible on desktop only - replaces d-none d-md-inline-block */
.desktop-only {
    display: none;

    @media (min-width: 768px) {
        display: inline-block;
    }
}

/* Block version for desktop */
.desktop-only-block {
    display: none;

    @media (min-width: 768px) {
        display: block;
    }
}

/* Flex on desktop only */
.desktop-only-flex {
    display: none;

    @media (min-width: 768px) {
        display: flex;
    }
}

/* === NAVIGATION UTILITIES === */

/* Mobile navigation icons container - replaces 4+ utility classes */
.mobile-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    @media (min-width: 768px) {
        display: none;
    }
}

/* Icon sizing for nav items - replaces bi fs-5 */
.nav-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
}

/* === ICON UTILITIES === */

/* Base Bootstrap icon sizing */
.bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.125em;
    width: 1em;
    height: 1em;
    fill: currentcolor;
}

.bi.fs-5 {
    width: 1.25rem;
    height: 1.25rem;
}

/* Collect icon: fixed dimensions prevent CLS on font load */
.collect-icon {
    width: var(--qs-collect-icon-size, 1.25rem);
    height: var(--qs-collect-icon-size, 1.25rem);
}

/* Icon alignment with text that may wrap */
.icon-align {
    flex-shrink: 0;
}

/* Spacer for nav items without icons (maintains alignment) */
.nav-icon-spacer {
    display: inline-block;
    width: 1em;
}

/* === HTMX UTILITIES === */

/* HTMX loading indicator base */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: block;
}

.htmx-request.htmx-indicator {
    display: block;
}

/* Submit button loading state: show spinner, hide normal text */
.submit-with-loading.htmx-request .submit-btn-text,
#submit-quote-btn.htmx-request .submit-btn-text,
#submit-originator-btn.htmx-request .submit-btn-text {
    display: none;
}

.submit-with-loading.htmx-request .htmx-indicator,
#submit-quote-btn.htmx-request .htmx-indicator,
#submit-originator-btn.htmx-request .htmx-indicator {
    display: inline-flex;
    align-items: center;
}


/* Loading indicator - hidden by default, shown during HTMX requests */
#loading-indicator {
    display: none;
}

.htmx-request #loading-indicator {
    display: block;
}

/* === TOOLTIP STYLING === */
.tooltip {
    --bs-tooltip-bg: var(--bs-secondary);
    --bs-tooltip-color: var(--bs-white);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-arrow-height: 0.5rem;
}

/* === PAGINATION === */
.pagination {
    --bs-pagination-padding-x: 1rem;
    --bs-pagination-padding-y: 0.5rem;
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-bg: var(--bs-white);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-hover-bg: rgba(var(--bs-primary-rgb), 0.1);
    --bs-pagination-focus-color: var(--bs-primary);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-disabled-color: var(--bs-gray-400);
    --bs-pagination-disabled-bg: var(--bs-white);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    font-size: 0.875rem;
}

.page-link {
    transition: all 0.2s ease-in-out;
    min-width: 2.5rem;
    text-align: center;
}

.page-item.active .page-link {
    font-weight: 500;
}

/* === FORM UTILITIES === */
.form-control,
.form-select {
    background-color: var(--bs-white);
    border-color: var(--bs-border-color);

    &:focus {
        background-color: var(--bs-white);
    }
}

.form-control-lg {
    &::placeholder {
        color: var(--bs-gray-400);
    }

    &:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    }
}

/* === SEARCH UTILITIES === */
.search-container,
.search-originators-container {
    position: relative;
}

.search-container .htmx-indicator,
.search-originators-container .htmx-indicator {
    right: 36px !important;
}

.search-container {
    width: 300px;
}

.search-originators-container {
    width: 100%;
}

@media (min-width: 768px) {
    .search-originators-container {
        width: 400px;
    }
}

@media (min-width: 992px) {
    .search-originators-container {
        width: 500px;
    }
}

.search-results-dropdown {
    position: absolute;
    width: 100%;
    top: calc(100% + 0.25rem);
    left: 0;
    background: white;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    z-index: var(--z-index-dropdown);
    max-height: 400px;
}

.search-result-item {
    transition: background-color 0.2s ease;

    &:hover,
    &:focus {
        background-color: var(--bs-light);
    }
}

#originator-search-results,
#tag-search-results {
    z-index: var(--z-index-dropdown);
}


/* === PROGRESS INDICATOR === */
.similar-quotes-progress {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    z-index: var(--z-index-progress);
}

/* === ALPHABET BUTTON === */
.alphabet-btn {
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    min-width: 1.75rem;
    text-align: center;
    line-height: 1.2;
    height: auto;
}

.d-flex.flex-wrap.gap-2 {
    gap: 0.25rem !important;
}

/* === QUICKSTART === */
.quickstart-rate-limits {
    max-width: 300px;
}

/* === link-patterns.css === */
/**
 * Link Styling Patterns
 *
 * Philosophy: Global text-decoration:none (base.css) correct for standalone
 * links (nav, footer, cards). Add underlines for inline prose links where
 * context doesn't signal clickability.
 *
 * Research basis:
 * - Nielsen Norman Group: "To maximize the perceived affordance of clickability,
 *   color and underline the link text"
 * - Material UI: Inline links underlined always, standalone links underlined on hover
 * - Smart Interface Design Patterns: "An underline is the clearest indicator of a link"
 *
 * Last updated: 2026-01-08
 */

/* ===== INLINE PROSE LINKS ===== */
/* Always underlined - embedded in flowing text where context doesn't signal clickability */

/* Pricing page - FR-055, FR-056, FR-058 */
/* Brown (primary brand color) + underline for clear affordance */
.pricing-page .card-body p a:not(.btn),
.pricing-page .card-body li a:not(.btn),
.pricing-page .accordion-body a:not(.btn),
.pricing-page .docs-section p a:not(.btn),
.pricing-page .text-muted a:not(.btn) {
    color: var(--bs-primary) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* Developer portal - all documentation and prose */
/* Brown (primary brand color) + underline for clear affordance */
.developer-portal p a:not(.btn),
.developer-portal .text-muted a:not(.btn),
.developer-portal li a:not(.btn) {
    color: var(--bs-primary) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}


/* ===== STANDALONE LINKS ===== */
/* No underline by default (handled by base.css global rule) */
/* Optional: hover underline for footer/utility navigation */

footer a:hover {
    text-decoration: underline;
}

/* ===== ACCESSIBILITY ===== */
/* Ensure focus states remain visible for keyboard navigation */
a:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Visited link state for documentation/long-form content */
/* Slight opacity reduction to indicate visited, but keep base color */
.pricing-page a:visited:not(.btn),
.developer-portal a:visited:not(.btn) {
    opacity: 0.85;
}

/* === quote-card.css === */
/* components/quote-card.css
 * ============================================
 * Quote card component with modern CSS nesting.
 * Uses :has() for parent-state styling and container queries
 * for component-responsive layouts.
 *
 * Browser support: Chrome 112+, Firefox 117+, Safari 16.4+
 * Graceful degradation: Rules still apply in older browsers
 *
 * Last updated: 2026-01-16
 * See: docs/delivery/74-bootstrap-vanilla-css/74-4.md
 */

/* === COLLECTION ICON COLORS === */
:root {
    /* Card outline (existing gold) */
    --qs-collect-card-outline: #D4AF37;

    /* Bookmark fill colors */
    --qs-collect-fill: #654321;           /* Library Brown - collected state */
    --qs-collect-fill-hover: #7B5229;     /* 15% lighter for hover */
    --qs-collect-outline: #6c757d;        /* Neutral gray - uncollected */

    /* Icon size (single source of truth) */
    --qs-collect-icon-size: 1.25rem;      /* 20px at default font size */
}

/* === QUOTE CARD BASE === */
.quote-card {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    position: relative;
    margin-bottom: 0.5rem;
    overflow: visible !important;
    z-index: auto !important;
    /* Note: margin/padding transitions removed to prevent CLS on load.
     * The .removing class has its own transitions for exit animation. */
    transition: opacity 0.5s ease-in-out,
                box-shadow 0.3s ease;

    /* Subtle hover effect without transform (prevents stacking issues) */
    &:hover {
        transform: none !important;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }

    /* Collected state - gold highlight */
    &.quote-card-collected {
        background-color: rgba(var(--bs-warning-rgb), 0.05);
        border: 2px solid var(--bs-warning);
        box-shadow: 0 0 0 1px var(--bs-warning);
    }

    /* Card body padding */
    & .card-body {
        padding: 1rem;
    }

    /* Horizontal rule */
    & hr {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    /* Dropdown positioning */
    & .dropdown-menu {
        z-index: 1055;
    }

    /* Override Bootstrap mb-3 (16px) with 8px spacing.
     * Template uses .quote-card.mb-3 - this counters Bootstrap's !important. */
    &.mb-3 {
        margin-bottom: 0.5rem !important;
    }
}

/* === QUOTE TEXT === */
.quote-text {
    font-style: italic;
    color: var(--bs-secondary);
    font-size: 1.1rem;
    line-height: 1.5;
}

/* === COLLECTION ICON === */
.collect-icon {
    color: var(--qs-collect-outline);
    cursor: pointer;
    transition: color 150ms ease-out, transform 150ms ease-out;
    font-size: var(--qs-collect-icon-size);
    width: var(--qs-collect-icon-size);
    height: var(--qs-collect-icon-size);

    &:hover {
        transform: scale(1.1);
        color: var(--qs-collect-fill-hover);
    }

    &.collected {
        color: var(--qs-collect-fill);

        &:hover {
            transform: scale(1.1);
            color: var(--qs-collect-fill-hover);
        }
    }
}

/* === HTMX ANIMATIONS === */
.quote-card {
    /* Slide-in animation */
    &.htmx-added {
        opacity: 0;
        transform: translateX(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    &.htmx-added-settle {
        opacity: 1;
        transform: translateX(0);
    }

    /* Swap animation */
    &.htmx-swapping {
        opacity: 0;
        transform: translateX(10px);
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Removal animation */
    &.removing {
        transform: scaleY(0);
        opacity: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        transition: transform 0.5s ease-in-out,
                    opacity 0.5s ease-in-out,
                    margin 0.5s ease-in-out,
                    padding 0.5s ease-in-out;
    }
}

/* === METADATA === */
.metadata-content {
    font-size: 0.9rem;
}

.quote-metadata {
    overflow: hidden;

    & a {
        word-wrap: break-word;
        word-break: break-word;
    }
}

.quote-originator {
    max-width: 100%;
    display: inline-flex;
    font-size: 0.99rem;

    & a {
        line-height: 1.4;
        display: inline-block;
        max-width: 100%;
    }

    &.mb-2 {
        margin-bottom: 0 !important;
    }
}

.quote-card-source {
    max-width: 100%;
    display: inline-flex;

    & a {
        line-height: 1.4;
        display: inline-block;
        max-width: 100%;
    }
}

.quote-source-container {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
}

/* === TAGS === */
.quote-tags .badge {
    transition: background-color 0.2s ease;

    &:hover {
        background-color: var(--bs-gray-200) !important;
    }
}

.quote-tags-and-language {
    flex: 1 1 0;
    max-width: calc(100% - 360px);
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.125rem;

    & .badge {
        margin-bottom: 0.125rem;
        margin-top: 0.125rem;
        margin-right: 0.25rem;
    }

}

/* === ACTIONS === */
.quote-actions {
    margin-left: auto;
    margin-top: 0.25rem;
    white-space: nowrap;
}

/* Copy button: flex for icon centering, match star icon height */
.copy-quote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
}

/* Copy dropdown (T021): Format selection dropdown
 * Must align vertically with share button and collection star.
 * Margin via me-3 class in template (desktop only).
 */
.copy-quote-dropdown {
    align-self: center;
}

/* Reset copy-quote-btn fixed height when in dropdown */
.btn-group.copy-quote-dropdown .btn.copy-quote-btn {
    height: auto;
}

/* Tight spacing between clipboard icon and dropdown caret */
.copy-quote-dropdown .copy-quote-btn {
    padding: 0.25rem;
    padding-right: 0.0625rem;  /* 1px gap to caret */
}
.copy-quote-dropdown .dropdown-toggle-split {
    padding: 0.25rem;
    padding-left: 0.0625rem;   /* 1px gap from icon */
    border-left: 0;
}

/* Regular desktop + mobile: hide top-right buttons, show in bottom row
 * Only huge desktops (≥1400px) get split layout with top-right buttons
 */
@media (max-width: 1399.98px) {
    /* Hide top-right collect/copy/share area */
    .quote-card-collect {
        display: none !important;
    }

    /* Mobile action buttons join the bottom quote-actions flex */
    .mobile-action-buttons {
        display: contents !important;
    }

    /* Mobile bounded button style (outline buttons) */
    .mobile-action-btn {
        background: transparent;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 6px;
        padding: 6px 10px;
        color: var(--bs-secondary, #6c757d);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 38px;
        transition: all 0.15s ease;
    }

    .mobile-action-btn:hover {
        background: var(--bs-light, #f8f9fa);
        border-color: var(--bs-secondary, #6c757d);
    }

    /* Mobile copy dropdown split button */
    .mobile-copy-dropdown {
        display: inline-flex;
    }

    .mobile-copy-dropdown .copy-quote-btn {
        border-radius: 6px 0 0 6px;
        border-right: 0;
    }

    .mobile-copy-dropdown .dropdown-toggle-split {
        border-radius: 0 6px 6px 0;
        padding: 6px 6px;
        min-width: auto;
    }

    /* Copy button hover - primary blue */
    .mobile-action-btn.copy-quote-btn:hover,
    .mobile-copy-dropdown:hover .copy-quote-btn,
    .mobile-copy-dropdown:hover .dropdown-toggle-split {
        border-color: var(--bs-primary, #0d6efd);
        color: var(--bs-primary, #0d6efd);
    }

    /* Share button hover - primary blue */
    .mobile-action-btn.share-quote-btn:hover {
        border-color: var(--bs-primary, #0d6efd);
        color: var(--bs-primary, #0d6efd);
    }

    /* Collect button - library brown */
    .mobile-action-btn.collect-icon {
        color: var(--qs-collect-outline, #6c757d);
    }

    .mobile-action-btn.collect-icon:hover {
        border-color: var(--qs-collect-fill-hover, #7B5229);
        color: var(--qs-collect-fill-hover, #7B5229);
    }

    .mobile-action-btn.collect-icon.collected {
        border-color: var(--qs-collect-fill, #654321);
        color: var(--qs-collect-fill, #654321);
    }

    /* Find Similar - icon only on regular desktop + mobile */
    .quote-actions .similar-quotes-link {
        padding: 6px 10px;
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .quote-actions .similar-quotes-link .find-similar-text {
        display: none;
    }

    .quote-actions .similar-quotes-link .icon-search-heart {
        margin: 0;
        font-size: 1rem;
    }

    /* Full Quote - icon only, match other button sizes */
    .quote-actions .extended-version-link.btn {
        padding: 6px 10px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        min-height: 38px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box !important;
        font-size: 0 !important; /* Collapse whitespace text node */
        margin-right: 0 !important; /* Reset Bootstrap me-1, use gap instead */
    }

    .quote-actions .extended-version-link i {
        margin: 0 !important;
        font-size: 1rem !important; /* Restore icon size */
    }

    .quote-actions .extended-version-link small {
        display: none !important;
    }

    /* quote-actions layout for regular desktop + mobile */
    .quote-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem;
    }
}

/* === HUGE DESKTOP (≥1400px) ===
 * Split layout: copy/share/collect in top-right, Find Similar in bottom
 * Styled with outline borders to match mobile aesthetic
 */
@media (min-width: 1400px) {
    /* Show top-right buttons on huge desktops */
    .quote-card-collect {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
    }

    /* Hide mobile action buttons in bottom row */
    .mobile-action-buttons {
        display: none !important;
    }

    /* Style top-right buttons with outline aesthetic */
    .quote-card-collect .copy-quote-dropdown .btn,
    .quote-card-collect .share-quote-btn,
    .quote-card-collect .collect-icon {
        background: transparent;
        border: 1px solid var(--bs-border-color, #dee2e6) !important;
        border-radius: 6px;
        padding: 6px 10px !important;
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
        text-decoration: none !important;
    }

    .quote-card-collect .copy-quote-dropdown .btn:hover,
    .quote-card-collect .share-quote-btn:hover {
        background: var(--bs-light, #f8f9fa);
        border-color: var(--bs-primary, #0d6efd);
        color: var(--bs-primary, #0d6efd);
    }

    /* Copy dropdown special handling */
    .quote-card-collect .copy-quote-dropdown {
        display: inline-flex;
    }

    .quote-card-collect .copy-quote-dropdown .copy-quote-btn {
        border-radius: 6px 0 0 6px;
        border-right: 0;
    }

    .quote-card-collect .copy-quote-dropdown .dropdown-toggle-split {
        border-radius: 0 6px 6px 0;
        padding: 6px 6px;
        min-width: auto;
    }

    /* Collect icon hover */
    .quote-card-collect .collect-icon:hover {
        border-color: var(--qs-collect-fill-hover, #7B5229);
    }

    .quote-card-collect .collect-icon.collected {
        border-color: var(--qs-collect-fill, #654321);
    }

    /* Reset Bootstrap margins - use gap instead */
    .quote-card-collect .me-1,
    .quote-card-collect .me-2 {
        margin-right: 0 !important;
    }

    /* Quote detail: show top-right buttons, hide bottom mobile actions */
    .quote-detail-collect {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
    }

    .quote-detail-mobile-actions {
        display: none !important;
    }

    /* Style top-right quote-detail buttons with outline */
    .quote-detail-collect .copy-quote-dropdown .btn,
    .quote-detail-collect .share-quote-btn,
    .quote-detail-collect .collect-icon {
        background: transparent;
        border: 1px solid var(--bs-border-color, #dee2e6) !important;
        border-radius: 6px;
        padding: 6px 10px !important;
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
        text-decoration: none !important;
    }

    .quote-detail-collect .copy-quote-dropdown .btn:hover,
    .quote-detail-collect .share-quote-btn:hover {
        background: var(--bs-light, #f8f9fa);
        border-color: var(--bs-primary, #0d6efd);
        color: var(--bs-primary, #0d6efd);
    }

    .quote-detail-collect .copy-quote-dropdown {
        display: inline-flex;
    }

    .quote-detail-collect .copy-quote-dropdown .copy-quote-btn {
        border-radius: 6px 0 0 6px;
        border-right: 0;
    }

    .quote-detail-collect .copy-quote-dropdown .dropdown-toggle-split {
        border-radius: 0 6px 6px 0;
        padding: 6px 6px;
        min-width: auto;
    }

    .quote-detail-collect .collect-icon:hover {
        border-color: var(--qs-collect-fill-hover, #7B5229);
    }

    .quote-detail-collect .collect-icon.collected {
        border-color: var(--qs-collect-fill, #654321);
    }

    /* Reset Bootstrap margins - use gap instead */
    .quote-detail-collect .me-1,
    .quote-detail-collect .me-2 {
        margin-right: 0 !important;
    }

    .quote-detail-collect .collection-container {
        gap: 0.5rem;
    }
}

/* === QUOTE DETAIL PAGE STYLES === */

/* Social share buttons styling (always visible) */
.social-share-btn {
    background: transparent;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--bs-secondary, #6c757d);
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    text-decoration: none;
}

.social-share-btn:hover {
    background: var(--bs-light, #f8f9fa);
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
}

/* Regular desktop + mobile: hide top-right quote-detail buttons, show bottom mobile actions */
@media (max-width: 1399.98px) {
    .quote-detail-collect {
        display: none !important;
    }

    .quote-detail-mobile-actions {
        display: flex !important;
    }
}

.copy-format-menu {
    min-width: 10rem;
    font-size: 0.875rem;
}

.copy-format-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.copy-format-menu .dropdown-item i {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

/* Loading state */
.htmx-request .collection-star {
    opacity: 0.5;
    pointer-events: none;
}

/* === HIGHLIGHT === */
.highlight-match {
    background-color: rgba(var(--bs-warning-rgb), 0.2);
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
}

/* === SEARCH HEART ICON === */
.icon-search-heart {
    font-size: 1.2em;
    line-height: 1;
    vertical-align: middle;
    margin-bottom: 2px;
    display: inline-block;
}

/* === SOURCE ICONS === */
.source-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;

    & .bi {
        transform: translateY(0.2em);
    }
}

.wikiquote-icon {
    width: 16px;
    height: 16px;
    aspect-ratio: 1;
    vertical-align: top;
    opacity: 0.8;
    margin-top: 0.15rem;

    &:hover {
        opacity: 1;
    }
}

/* === ADSENSE === */
.adsbygoogle[data-adsbygoogle-status="done"] + .ad-placeholder {
    display: none;
}

.ad-placeholder {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    .quote-tags-and-language {
        max-width: calc(100% - 260px);
    }
}

/* === MOBILE-ONLY STYLES (<576px) ===
 * Smaller fonts/padding for phone screens
 * Button styles inherited from 1399.98px block above
 */
@media (max-width: 576px) {
    .quote-card {
        & .card-body {
            padding: 0.625rem;
        }

        & hr {
            margin-top: 0.375rem;
            margin-bottom: 0.375rem;
        }
    }

    .quote-text {
        font-size: 1rem;
        line-height: 1.4;
    }

    .quote-tags-row {
        display: block !important;
        margin-top: 0.375rem !important;
    }

    .quote-no-tags-row {
        display: block !important;
    }

    .quote-metadata {
        max-width: 100%;
        width: 100%;
        margin-bottom: 0;
        font-size: 0.8rem;
    }

    .quote-originator {
        font-size: 0.88rem;

        &.mb-2 {
            margin-bottom: 0.25rem !important;
        }
    }

    .quote-card-source {
        font-size: 0.8rem;
    }

    .quote-tags-and-language {
        flex: none;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        margin-bottom: 0;
        display: flex !important;
        flex-wrap: wrap !important;

        & .badge {
            display: inline-block !important;
            width: auto !important;
            margin-bottom: 0.125rem;
            padding: 0.2rem 0.4rem;
            font-size: 0.7rem;
        }
    }

    .quote-actions {
        margin-left: 0 !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0 !important;
        width: 100%;

        & .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;

            & small {
                font-size: 0.7rem;
            }
        }
    }

    .quote-admin-actions .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;

        & small {
            font-size: 0.7rem;
        }
    }
}

/* === :has() EXAMPLE ===
 * Hide quote card if text is empty (no JS needed)
 * Gracefully degrades: older browsers just show the card
 */
.quote-card:has(.quote-text:empty) {
    display: none;
}

/* === sticky-search.css === */
/**
 * Sticky Search: Compact bottom-sticky search bar
 * Feature: 038-mobile-style-refresh (US1)
 *
 * Appears when hero search scrolls out of view.
 * Positioned above mini-console (60px from viewport bottom).
 * Mobile only (<768px).
 *
 * Z-index: 1020 (--z-index-sticky) - below fixed elements like navbar
 */

/* ==========================================================================
   Sticky Search Container
   ========================================================================== */

.sticky-search {
    position: fixed;
    bottom: 60px; /* Above mini-console (44px content + safe-area) */
    left: 0;
    right: 0;
    z-index: var(--z-index-sticky, 1020);
    padding: 0 16px;
    /* Hidden by default - shown via JS when hero scrolls out */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Visible state - applied by JavaScript */
.sticky-search.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hidden attribute override for initial state */
.sticky-search[hidden] {
    display: block !important; /* Override hidden but keep invisible via opacity */
}

/* ==========================================================================
   Search Form
   ========================================================================== */

.sticky-search-form {
    max-width: 600px;
    margin: 0 auto;
}

.sticky-search-input-wrapper {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--bs-border-color, #D2B48C);
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.sticky-search-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 1rem;
    outline: none;
    min-width: 0; /* Allow flex shrink */
}

.sticky-search-input::placeholder {
    color: var(--bs-secondary, #6c757d);
}

.sticky-search-input:focus {
    outline: none;
}

/* Focus ring on wrapper instead */
.sticky-search-input-wrapper:focus-within {
    border-color: var(--bs-primary, #8B4513);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(139, 69, 19, 0.2);
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.sticky-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 44px; /* Touch target */
    min-height: 44px; /* Touch target */
    /* Fill wrapper height - let overflow:hidden clip to shape */
    align-self: stretch;
    background: var(--bs-primary, #8B4513);
    color: white;
    border: none;
    border-radius: 0; /* Let wrapper's overflow:hidden create the rounded edge */
    cursor: pointer;
    transition: background 0.15s ease;
}

.sticky-search-submit:hover {
    background: var(--bs-primary-dark, #704010);
}

.sticky-search-submit:active {
    transform: scale(0.95);
}

.sticky-search-submit .bi {
    font-size: 1.125rem;
    line-height: 1;
}

/* ==========================================================================
   Voice Input Button
   ========================================================================== */

.sticky-search-voice {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 44px; /* Touch target */
    min-height: 44px; /* Touch target */
    background: transparent;
    color: var(--bs-secondary, #6c757d);
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.sticky-search-voice:hover {
    color: var(--bs-primary, #8B4513);
}

.sticky-search-voice .bi {
    font-size: 1.125rem;
    line-height: 1;
}

/* Listening state */
.sticky-search-voice.voice-input-listening {
    color: var(--bs-danger, #dc3545);
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================================================
   Responsive: Hide on desktop (>=768px)
   ========================================================================== */

@media (min-width: 768px) {
    .sticky-search {
        display: none !important;
    }
}

/* ==========================================================================
   Safe Area Adjustment (notched devices)
   ========================================================================== */

@media (max-width: 767.98px) {
    .sticky-search {
        /* Adjust bottom position to account for mini-console + safe area */
        bottom: calc(60px + env(safe-area-inset-bottom, 0));
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus visible for keyboard navigation */
.sticky-search-submit:focus-visible {
    outline: 2px solid white;
    outline-offset: -4px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .sticky-search {
        transition: none;
    }

    .sticky-search-submit:active {
        transform: none;
    }
}

/* ==========================================================================
   No IntersectionObserver Fallback
   ========================================================================== */

/* If IntersectionObserver not supported, never show sticky search */
.no-intersection-observer .sticky-search {
    display: none !important;
}

/* ==========================================================================
   Chat Expanded: Hide sticky search when chat is open
   Chat takes priority for mobile bottom screen real estate.
   ========================================================================== */

body:has(.chat-sidebar.chat-expanded) .sticky-search {
    opacity: 0;
    pointer-events: none;
}