/* ===========================================
   COMPONENTS.CSS - Shared UI Components
   ===========================================
   
   TABLE OF CONTENTS
   -----------------
   1. Page Header
   2. Cards
   3. Buttons - Base
   4. Buttons - Variants
   5. Buttons - Grids
   6. Sliding Pill Indicator
   7. Labels & Badges
   8. Selection Buttons
   9. QR Section
   10. Action Buttons
   11. Mode Banner
   12. Patient Info Card
   13. Contact Components
   14. Schedule Dropdown
   15. Empty States
   16. Sticky Footer
   17. Shared Calculator Header (Desktop)
   18. Shared Calculator Footer (Mobile)
   19. Patient Preview Drawer (Desktop)
   20. PWA Navigation
   21. Mobile Score Strip
   22. Print Styles
   
   =========================================== */

/* -------------------------------------------
   PAGE HEADER
   ------------------------------------------- */
.page-header {
    margin-bottom: 2rem;
}

.page-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0;
}

/* -------------------------------------------
   CARDS
   ------------------------------------------- */
.card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: 1.75rem;                    /* Was 1.5rem - more breathing room */
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.75rem;              /* Was 1.5rem */
    border: 1px solid var(--border-subtle);  /* Added subtle border */
    position: relative;
}

@media (min-width: 768px) {
    .card {
        padding: 2rem;                   /* Was 1.75rem */
    }
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--border-color) 20%,
        var(--border-color) 80%,
        transparent
    );
    opacity: 0.4;                        /* Was 0.6 - more subtle */
}

.card:first-child::before {
    display: none;
}

/* Card Header */
.card-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;                       /* Was 0.75rem */
    margin-bottom: 1.5rem;               /* Was 1.25rem */
    padding-bottom: 1.25rem;             /* Was 1rem */
    border-bottom: 1px solid var(--border-subtle);  /* Use subtle border */
}

.card-header h2 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);   /* Was bold - slightly lighter */
    letter-spacing: var(--tracking-normal);  /* Was tight */
    color: var(--text-primary);
}

.card-header .icon {
    width: 24px;                         /* Was 22px - slightly larger */
    height: 24px;
    color: var(--theme-primary);
    flex-shrink: 0;
}

/* First card accent */
.page-content > .card:first-child,
.page-content > .step-section:first-child .card,
.summary-bar + .card {
    border-top: 2px solid var(--theme-primary);  /* Was 3px - subtler */
    border-radius: var(--radius-lg);
}

.page-content > .step-section:first-child .card::before {
    display: none;
}

/* -------------------------------------------
   BUTTONS - Base
   ------------------------------------------- */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}

button:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9375rem;                /* Was 0.925rem - slightly larger */
    font-weight: var(--font-semibold);
    padding: 0.75rem 1.5rem;             /* Was 1.25rem horizontal - wider */
    border-radius: var(--radius-md);
    border: 1px solid transparent;       /* For consistent sizing */
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

/* Positioned ripple effect */
.btn::after {
    content: '';
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
    background: radial-gradient(circle at center, currentColor 0%, transparent 60%);
    opacity: 0;
    transform: scale(0);
    left: var(--ripple-x, 50%);
    top: var(--ripple-y, 50%);
    translate: -50% -50%;
    pointer-events: none;
}

/* -------------------------------------------
   BUTTONS - Variants
   ------------------------------------------- */
.btn-primary {
    background: var(--theme-primary);
    color: var(--text-on-theme);
    border-color: var(--theme-primary);
}

@media (any-hover: hover) {
    .btn-primary:hover {
        background: var(--theme-dark);
        border-color: var(--theme-dark);
        transform: translateY(-2px);     /* Was -1px - more pronounced */
        box-shadow:
            var(--shadow-md),
            0 4px 12px rgba(0, 0, 0, 0.15);  /* Glow effect */
    }
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
}

@media (any-hover: hover) {
    .btn-secondary:hover {
        background: var(--bg-surface, var(--bg-primary));
        border-color: var(--theme-primary);
        color: var(--theme-primary);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }
}

.reset-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem auto 0;
    padding: 0.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    background: none;
    border: none;
    cursor: pointer;
}

@media (any-hover: hover) {
    .reset-link:hover {
        background: var(--theme-light);
        color: var(--theme-primary);
    }
}

/* -------------------------------------------
   BUTTONS - Grids
   ------------------------------------------- */
.btn-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .btn-grid.two-col,
    .btn-grid.medications {
        grid-template-columns: 1fr 1fr;
    }
}

/* -------------------------------------------
   SLIDING PILL INDICATOR
   Shared segmented control with animated indicator
   ------------------------------------------- */
.sliding-pill-group {
    display: flex;
    position: relative;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: 3px;
    border: 1px solid var(--border-color);
}

.sliding-pill-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition:
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        width 280ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 200ms ease,
        box-shadow 200ms ease;
    will-change: transform, width;
    z-index: 0;
    pointer-events: none;
}

/* State-based indicator colors */
.sliding-pill-indicator[data-state="1"] {
    background: var(--bvas-persistent);
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.3);
}

.sliding-pill-indicator[data-state="2"] {
    background: var(--bvas-new-worse);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

.sliding-pill-btn {
    position: relative;
    z-index: 1;
    padding: 0.375rem 0.5rem;
    font-size: var(--text-sm);  /* Accessibility: 14px for interactive elements */
    font-weight: var(--font-semibold);
    font-family: inherit;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-width: 28px;
    transition: color var(--transition-base);
    text-align: center;
}

/* Active states - text color changes */
.sliding-pill-btn.active[data-state="0"] {
    color: var(--text-primary);
}

.sliding-pill-btn.active[data-state="1"],
.sliding-pill-btn.active[data-state="2"] {
    color: var(--text-on-theme);
}

/* Disabled state */
.sliding-pill-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Hover states */
@media (any-hover: hover) {
    .sliding-pill-btn:not(.active):not(.disabled):hover {
        color: var(--text-secondary);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sliding-pill-indicator {
        transition: none;
    }
    
    .sliding-pill-btn {
        transition: none;
    }
}

/* -------------------------------------------
   LABELS & BADGES
   ------------------------------------------- */
.label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
    margin-bottom: 0.625rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--bg-primary);
    color: var(--text-secondary);
}

/* -------------------------------------------
   SELECTION BUTTONS
   ------------------------------------------- */
.select-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 1rem 1.5rem;                /* Was 1.25rem - wider */
    font-size: 0.9375rem;                /* Was 0.95rem - standardized */
    font-weight: var(--font-semibold);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 72px;                    /* Was 76px - slightly smaller */
    transition:
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        border-color var(--transition-fast);
    font-family: inherit;
    border: 1px solid var(--border-color);
    position: relative;
    box-shadow: var(--shadow-xs);
}

@media (any-hover: hover) {
    .select-btn:hover {
        background: var(--theme-light);
        border-color: var(--theme-primary);
        box-shadow: var(--shadow-sm);
        transform: translateY(-2px);
    }
}

.select-btn:active {
    transform: translateY(0) scale(0.98);
}

.select-btn.selected {
    background: var(--theme-primary);
    color: var(--text-on-theme);
    border-color: var(--theme-dark);
    box-shadow:
        var(--shadow-md),
        0 0 0 3px var(--theme-light);    /* Keep ring effect */
    transform: scale(1);                 /* Remove scale, use shadow instead */
}

.select-btn.selected::before {
    display: none;
}

@media (any-hover: hover) {
    .select-btn.selected:hover {
        transform: translateY(-1px);
        box-shadow:
            var(--shadow-lg),
            0 0 0 3px var(--theme-light);
    }
}

/* Dark mode: inset style for unselected buttons */
[data-theme="dark"] .select-btn:not(.selected) {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-inset);
}

@media (any-hover: hover) {
    [data-theme="dark"] .select-btn:not(.selected):hover {
        background: var(--bg-elevated);
        border-color: var(--theme-primary);
        box-shadow: var(--shadow-inset);
    }
}

.schedule-btn {
    flex-direction: column;
    min-height: 76px;
    padding: 1rem;
}

.schedule-btn .desc {
    font-size: 0.85rem;  /* Was 0.8rem - increased for readability */
    font-weight: 500;
    opacity: 0.7;
    margin-top: 0.125rem;
}

.schedule-btn.selected .desc {
    opacity: 0.85;
}

/* -------------------------------------------
   QR SECTION
   ------------------------------------------- */
.qr-section {
    text-align: center;
    padding: 1rem;
}

.qr-container {
    display: inline-block;
    background: #FFFFFF;             /* QR codes need white bg for scanning */
    padding: 1rem;
    border-radius: var(--radius-lg);
    box-shadow:
        var(--shadow-md),
        inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}

/* Ensure QR stays white in dark mode for scannability */
[data-theme="dark"] .qr-container {
    background: #FFFFFF;
    box-shadow:
        var(--shadow-md),
        0 0 0 1px var(--border-color);
}

.qr-container img,
.qr-container canvas {
    display: block;
    image-rendering: pixelated;
}

/* -------------------------------------------
   QR PANEL HEADER (Option E)
   Row with scan label left, reset icon right
   ------------------------------------------- */
.qr-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.qr-panel-header .qr-scan-label {
    margin: 0;
}

/* Reset icon button - ghost style */
.qr-reset-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: 
        color var(--transition-fast),
        background var(--transition-fast);
}

.qr-reset-icon-btn svg {
    width: 16px;
    height: 16px;
}

@media (any-hover: hover) {
    .qr-reset-icon-btn:hover {
        color: var(--text-primary);
        background: var(--bg-primary);
    }
}

.qr-reset-icon-btn:active {
    transform: scale(0.95);
}

/* -------------------------------------------
   CLICKABLE QR CONTAINER (Option E)
   QR becomes a button that copies link
   ------------------------------------------- */
.qr-container-wrapper {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.25rem;
}

.qr-container-clickable {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

@media (any-hover: hover) {
    .qr-container-clickable:hover {
        border-color: var(--theme-primary);
        box-shadow: 
            var(--shadow-md),
            0 0 0 3px var(--theme-light);
    }
    
    .qr-container-wrapper:hover .qr-click-hint {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.qr-container-clickable:focus-visible {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow:
        var(--shadow-md),
        0 0 0 3px var(--theme-light);
}

/* Active/pressed state - immediate tactile depression */
.qr-container-clickable:active,
.qr-container-clickable.pressing {
    transform: scale(0.97);
    opacity: 0.8;
    border-color: var(--theme-primary);
}

/* Click hint text - below the QR, absolutely positioned to not affect layout */
.qr-click-hint {
    position: absolute;
    bottom: -0.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transition: 
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

/* Copied state styling */
.qr-container-wrapper.copied .qr-container-clickable {
    border-color: var(--nhs-green);
    box-shadow:
        var(--shadow-md),
        var(--focus-ring-nhs-green);
    animation: qrPress var(--duration-fast) ease-out;
}

/* Spring bounce animation for tactile feedback */
@keyframes qrPress {
    0% { transform: scale(1); }
    40% { transform: scale(0.96); }
    100% { transform: scale(1); }
}

/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .qr-container-wrapper.copied .qr-container-clickable {
        animation: none;
    }
    .qr-container-clickable:active,
    .qr-container-clickable.pressing {
        transform: none;
        opacity: 0.8;
        border-color: var(--theme-primary);
    }
}

/* Copied overlay - created dynamically inside QR container */
.qr-copied-overlay-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-white);
    border-radius: var(--radius-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 1;
}

.qr-copied-overlay-inner span {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nhs-green);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.qr-container-wrapper.copied .qr-copied-overlay-inner {
    opacity: 1;
}

.qr-container-wrapper.copied .qr-click-hint {
    opacity: 0 !important;
}

/* -------------------------------------------
   QR ACTIONS GRID (Option E)
   Desktop: stacked vertically with expanded text
   Mobile: two-column layout with compact text
   ------------------------------------------- */
.qr-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.qr-actions-grid .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    min-height: 48px;  /* WCAG touch target for older users */
    font-size: 0.875rem;
    border-radius: var(--radius-lg);
}

.qr-actions-grid .btn svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Desktop: stack vertically */
@media (min-width: 900px) {
    .qr-actions-grid {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
    
    .qr-actions-grid .btn {
        padding: 0.75rem 1.25rem;
    }
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .qr-actions-grid .btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
        min-height: 48px;  /* Maintain touch target on mobile */
    }
}

/* Button text variants - show/hide based on viewport */
.qr-actions-grid .btn-text-desktop {
    display: none;
}

.qr-actions-grid .btn-text-mobile {
    display: inline;
}

@media (min-width: 900px) {
    .qr-actions-grid .btn-text-desktop {
        display: inline;
    }

    .qr-actions-grid .btn-text-mobile {
        display: none;
    }
}

/* Travel Letter Button - tertiary styling */
.travel-letter-btn {
    background: transparent;
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    transition: border-color var(--transition-fast), color var(--transition-fast), border-style var(--transition-fast);
    grid-column: 1 / -1;  /* Span full width on mobile */
}

@media (hover: hover) {
    .travel-letter-btn:hover {
        border-style: solid;
        border-color: var(--active-color, var(--theme-primary));
        color: var(--active-color, var(--theme-primary));
    }
}

.travel-letter-btn.hidden {
    display: none;
}

/* Travel Letter Preview in drawer */
.travel-letter-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.travel-letter-text {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: var(--radius-md);
    font-family: var(--font-mono, monospace);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.travel-letter-copy-btn {
    margin-left: auto;
    margin-right: 0.5rem;
    min-width: 120px;
}

.qr-link {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* -------------------------------------------
   QR OUTPUT PANEL (Desktop)
   Shared container for QR code generation UI
   Used by: DMARD, Biologics
   ------------------------------------------- */
@media (min-width: 901px) {
    .qr-output-panel {
        position: relative;
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        padding: 1rem;
        box-shadow: var(--shadow-md);
        text-align: center;
        border: 1px solid var(--border-color);
    }

    /* QR Placeholder breathing animation */
    .qr-output-panel .qr-placeholder {
        background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
        border: 2px dashed var(--border-color);
        border-radius: var(--radius-lg);
        padding: 2.5rem 1.5rem;
        color: var(--text-muted);
        font-size: 0.875rem;
        line-height: 1.5;
        animation: breathe var(--duration-breathing) ease-in-out infinite;
    }

    .qr-output-panel .qr-placeholder-icon {
        margin-bottom: 0.75rem;
        opacity: 0.35;
        animation: breatheIcon var(--duration-breathing) ease-in-out infinite;
    }

    .qr-output-panel .qr-placeholder-icon svg {
        width: 48px;
        height: 48px;
    }

    /* Vertical layout for QR + content */
    .qr-output-panel .qr-content-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .qr-output-panel .qr-content-body .qr-container-wrapper {
        flex-shrink: 0;
    }

    /* QR Panel State Management */
    .qr-output-panel .qr-placeholder {
        opacity: 1;
        transform: scale(1);
        transition: opacity 200ms ease-out, transform 200ms ease-out;
    }

    .qr-output-panel.qr-ready .qr-placeholder {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.95);
        position: absolute;
        pointer-events: none;
    }

    .qr-output-panel .qr-content {
        display: none;
    }

    .qr-output-panel.qr-ready .qr-content {
        display: block;
        animation: qrContentReveal 250ms ease-out;
    }

    @keyframes qrContentReveal {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Prevent refresh icon from inheriting parent animation on reveal */
    .qr-output-panel .qr-content .qr-reset-icon-btn svg {
        animation: none;
    }
    .qr-output-panel .qr-content .qr-reset-icon-btn svg.icon-spin {
        animation: iconSpinOnce var(--duration-entrance) cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* QR content scales/fades out during reset */
    .qr-output-panel.resetting .qr-content {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity var(--duration-base) ease-out,
                    transform var(--duration-base) ease-out;
    }

    /* After reset complete - placeholder animates back in */
    .qr-output-panel.reset-complete .qr-placeholder {
        animation: placeholderReturn var(--transition-entrance);
    }

    @keyframes placeholderReturn {
        from {
            transform: scale(0.95);
        }
        to {
            transform: scale(1);
        }
    }
}

/* -------------------------------------------
   CONTACT COMPONENTS
   ------------------------------------------- */
.contact-box h3 {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    margin: 0 0 0.75rem;
    color: var(--text-primary);
}

.contact-box .contact-row:last-of-type {
    margin-bottom: 0;
}

.contact-box .note-box {
    margin-top: 1rem;
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--theme-primary);
}

.contact-icon svg {
    width: 18px;
    height: 18px;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.contact-row:last-child {
    margin-bottom: 0;
}

.contact-row svg {
    flex-shrink: 0;
    color: var(--theme-primary);
}

.note-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding: 0.75rem;
    background: var(--accent-warning);
    border-left: 3px solid var(--accent-warning-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.note-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--accent-warning-border);
    margin-top: 0.125rem;
}

.note-icon svg {
    width: 18px;
    height: 18px;
}

.contact-row a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-muted);
    transition: 
        color var(--transition-fast),
        border-color var(--transition-fast);
}

@media (any-hover: hover) {
    .contact-row a:hover {
        color: var(--theme-primary);
        border-color: var(--theme-primary);
    }
    
    [data-theme="dark"] .contact-row a:hover {
        color: var(--nhs-light-blue);
        border-color: var(--nhs-light-blue);
    }
}

/* -------------------------------------------
   SCHEDULE DROPDOWN
   ------------------------------------------- */
details.schedule-dropdown {
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    overflow: hidden;
}

details.schedule-dropdown summary {
    padding: 1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (any-hover: hover) {
    details.schedule-dropdown summary:hover {
        background: var(--accent-info);
    }
}

details.schedule-dropdown summary::after {
    content: '+';
    font-weight: bold;
    font-size: 1.2rem;
}

details.schedule-dropdown[open] summary::after {
    content: '\2212';
}

.print-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--text-secondary);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

/* -------------------------------------------
   SHARED CALCULATOR HEADER (Desktop)
   ------------------------------------------- */
.calc-sticky-header {
    display: none;
}

@media (min-width: 900px) {
    .calc-sticky-header {
        display: flex;
        position: sticky;
        top: var(--header-height);       /* Must clear fixed header overlay */
        z-index: 100;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem 1.25rem;
        background: var(--bg-elevated);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        margin-bottom: 1.5rem;
    }
    
    .calc-header-title {
        font-size: var(--text-base);
        font-weight: var(--font-semibold);
        color: var(--text-primary);
        margin: 0;
    }
    
    .calc-header-scores {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .calc-header-copy {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 1rem;
        justify-content: center;
        min-width: 100px;
        background: var(--theme-primary);
        border: none;
        border-radius: var(--radius-sm);
        color: var(--text-on-theme);
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        cursor: pointer;
        transition: background var(--transition-fast);
    }

    @media (any-hover: hover) {
        .calc-header-copy:hover {
            background: var(--theme-dark);
        }
    }

    .calc-header-copy svg {
        width: 14px;
        height: 14px;
    }
}

/* -------------------------------------------
   SHARED CALCULATOR FOOTER (Mobile)
   ------------------------------------------- */
.calc-mobile-footer {
    display: none;
}

@media (max-width: 899px) {
    .calc-mobile-footer {
        position: fixed;
        bottom: 1.5rem;
        right: 1rem;
        z-index: 100;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: var(--bg-elevated);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        /* 500ms for prominent entrance animation */
        animation: floatUpDesktop 500ms var(--ease-out-expo);
        cursor: pointer;
        overflow: hidden;
        transition:
            width var(--transition-slow),
            padding var(--transition-slow);
    }
    
    [data-theme="dark"] .calc-mobile-footer {
        background: var(--bg-floating);
    }
    
    .calc-footer-actions {
        display: none;
    }
    
    .calc-mobile-footer.expanded .calc-footer-actions {
        display: flex;
    }
    
    .calc-footer-copy {
        padding: 0.5rem 1rem;
        background: var(--theme-primary);
        border: none;
        border-radius: var(--radius-md);
        color: var(--text-on-theme);
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        cursor: pointer;
        white-space: nowrap;
        min-width: 5.5rem;
        transition: background var(--transition-fast);
    }
    
    @media (any-hover: hover) {
        .calc-footer-copy:hover {
            background: var(--theme-dark);
        }
    }
}

@media (max-width: 899px) and (display-mode: standalone) {
    .calc-mobile-footer {
        bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Expanded state */
@media (max-width: 899px) {
    .calc-mobile-footer.expanded {
        padding: 0.625rem 1rem;
        gap: 0.75rem;
    }
    
    [data-theme="dark"] .calc-mobile-footer.expanded {
        background: var(--bg-floating);
    }
}

/* Hide mobile footer on desktop */
@media (min-width: 900px) {
    .calc-mobile-footer {
        display: none !important;
    }
}

/* -------------------------------------------
   SHARED SCORE DISPLAY PATTERNS
   ------------------------------------------- */

/* Score value - the large number display */
.calc-score-value {
    font-weight: var(--font-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.calc-score-value.has-value {
    color: var(--text-primary);
}

.calc-score-value.updating {
    animation: scorePop var(--duration-base) var(--ease-out-back);
}

/* Size variants */
.calc-score-value--sm { font-size: var(--text-base); }
.calc-score-value--md { font-size: 1.25rem; }
.calc-score-value--lg { font-size: 1.5rem; }
.calc-score-value--xl { font-size: 1.75rem; }

/* Score label - small caps above/beside score */
.calc-score-label {
    font-size: 0.75rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

/* Score box - compact score display for footers/headers */
.calc-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.0625rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    min-width: 50px;
}

/* Header score pill - for desktop sticky headers */
@media (min-width: 900px) {
    .calc-header-score {
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
        padding: 0.5rem 0.875rem;
        border-radius: var(--radius-md);
        background: var(--bg-primary);
    }
    
    .calc-header-score-label {
        font-size: 0.8125rem;
        font-weight: var(--font-medium);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }
    
    .calc-header-score-value {
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        font-variant-numeric: tabular-nums;
        color: var(--text-secondary);
        transition: color var(--transition-fast);
    }
    
    .calc-header-score-value.has-value {
        color: var(--text-primary);
    }
    
    .calc-header-score-max {
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }
}

/* -------------------------------------------
   SHARED RESET BUTTON PATTERNS
   Applies to: .calc-reset-btn, .bvas-desktop-reset
   ------------------------------------------- */

/* Desktop reset button - outlined style with red hover */
.calc-reset-btn,
.bvas-desktop-reset {
    margin: 1rem auto 2rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    box-shadow: 
        0 0 0 1px var(--border-color),
        var(--shadow-xs);
    transition: 
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast);
}

@media (any-hover: hover) {
    .calc-reset-btn:hover,
    .bvas-desktop-reset:hover {
        background: rgba(220, 38, 38, 0.1);
        box-shadow: 
            0 0 0 1px rgba(220, 38, 38, 0.4),
            var(--shadow-sm);
        color: #DC2626;
    }
}

.calc-reset-btn:active,
.bvas-desktop-reset:active {
    transform: scale(0.98);
}

[data-theme="dark"] .calc-reset-btn,
[data-theme="dark"] .bvas-desktop-reset {
    background: var(--bg-primary);
}

@media (any-hover: hover) {
    [data-theme="dark"] .calc-reset-btn:hover,
    [data-theme="dark"] .bvas-desktop-reset:hover {
        background: rgba(220, 38, 38, 0.15);
        box-shadow: 
            0 0 0 1px rgba(239, 68, 68, 0.5),
            var(--shadow-sm);
        color: #F87171;
    }
}

/* -------------------------------------------
   SHARED CALCULATOR ACTIONS ROW
   Applies to: .calc-actions, .gcaps-actions, .axspa-actions
   ------------------------------------------- */
.calc-actions,
.gcaps-actions,
.axspa-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}

.gcaps-actions {
    margin: 1.5rem 0 2rem;
}

.calc-actions .btn,
.axspa-actions .btn {
    flex: 1;
    max-width: 160px;
}

.calc-actions .btn-secondary,
.gcaps-actions .btn-secondary,
.axspa-actions .btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: 
        0 0 0 1px var(--border-color),
        var(--shadow-xs);
}

@media (any-hover: hover) {
    .calc-actions .btn-secondary:hover,
    .gcaps-actions .btn-secondary:hover,
    .axspa-actions .btn-secondary:hover {
        background: var(--bg-primary);
        box-shadow: 
            0 0 0 1px var(--theme-primary),
            var(--shadow-sm);
    }
}

[data-theme="dark"] .calc-actions .btn-secondary,
[data-theme="dark"] .gcaps-actions .btn-secondary,
[data-theme="dark"] .axspa-actions .btn-secondary {
    background: var(--bg-primary);
}

@media (any-hover: hover) {
    [data-theme="dark"] .calc-actions .btn-secondary:hover,
    [data-theme="dark"] .gcaps-actions .btn-secondary:hover,
    [data-theme="dark"] .axspa-actions .btn-secondary:hover {
        background: var(--bg-elevated);
    }
}

/* -------------------------------------------
   PATIENT PREVIEW DRAWER (Desktop)
   ------------------------------------------- */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1000;
    transition: background var(--transition-drawer);
    will-change: background;
}

.drawer-backdrop.open {
    background: var(--overlay-dark);
}

.patient-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 600px;
    max-width: 100%;
    background: var(--bg-primary);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform var(--transition-drawer);
    will-change: transform;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

.patient-drawer.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.drawer-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.drawer-close-btn {
    background: var(--bg-secondary);
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (any-hover: hover) {
    .drawer-close-btn:hover {
        background: var(--bg-tertiary, var(--border-color));
        color: var(--text-primary);
    }
}

.drawer-close-btn:focus {
    background: var(--bg-tertiary, var(--border-color));
    color: var(--text-primary);
    outline: none;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Cards inside drawer */
.drawer-body .card {
    margin-bottom: 1.5rem;
}

/* First card accent - matches patient mode styling */
.drawer-body .schedule-card {
    border-top: 3px solid var(--theme-primary);
}

.drawer-body .card-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
}

/* Action buttons in drawer */
.drawer-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.drawer-actions .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.drawer-actions .btn-primary {
    border-radius: var(--radius-lg);
}

.drawer-actions .btn-secondary {
    border-radius: var(--radius-md);
}

/* Contact card in drawer */
.drawer-body .contact-card-section {
    margin-bottom: 0;
}

/* Summary bar in drawer - pull flush to header, minimal padding */
.drawer-body .summary-bar {
    margin: -1.5rem -1.5rem 0.75rem -1.5rem;
    padding: 0.5rem 1.5rem;
}

/* Mini drawer variant (for travel letter, etc.) */
.patient-drawer.mini {
    width: 450px;
    max-height: 70vh;
    top: auto;
    bottom: 2rem;
    right: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.patient-drawer.mini .drawer-body {
    padding: 1rem 1.25rem;
}

/* Ensure drawer works well at narrower desktop widths */
@media (min-width: 900px) and (max-width: 1100px) {
    .patient-drawer {
        width: 550px;
    }

    .patient-drawer.mini {
        width: 400px;
    }
}

/* Hide drawer elements on mobile (drawer shouldn't appear) */
@media (max-width: 899px) {
    .drawer-backdrop,
    .patient-drawer {
        display: none !important;
    }
}

/* Note: scroll-lock for drawer removed as overflow:hidden breaks sticky header */

/* -------------------------------------------
   PWA NAVIGATION
   ------------------------------------------- */
.pwa-back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--overlay-white-subtle);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: var(--text-on-theme);
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

@media (any-hover: hover) {
    .pwa-back-btn:hover {
        background: var(--overlay-white-subtle);
        opacity: 0.9;
    }
}

.pwa-back-btn svg {
    width: 20px;
    height: 20px;
}

.is-pwa .pwa-back-btn {
    display: flex;
}

:root:not([data-theme="dark"]) .pwa-back-btn {
    color: var(--text-primary);
    background: var(--overlay-dark-subtle);
}

@media (any-hover: hover) {
    :root:not([data-theme="dark"]) .pwa-back-btn:hover {
        background: var(--overlay-dark-subtle);
        opacity: 0.9;
    }
}

.is-pwa .header-brand {
    justify-content: flex-start;
}

/* -------------------------------------------
   HEADER SETTINGS CLUSTER
   ------------------------------------------- */
.header-settings {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.footer-settings {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* -------------------------------------------
   HOSPITAL TOGGLE (Footer)
   Ghost/border-only style - always visible
   Height matches theme toggle (36px outer)
   ------------------------------------------- */
.hospital-toggle {
    display: flex;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    padding: 0.25rem;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    transition: border-color var(--transition-base);
}

/* Sliding indicator - subtle, not theme-colored */
.hospital-toggle::before {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: var(--hospital-option-width, 42px);
    height: 28px;
    background: var(--bg-elevated);
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-pill);
    transition: transform var(--duration-entrance) var(--ease-out-back),
                border-color var(--transition-base);
    will-change: transform;
    z-index: 0;
}

[data-theme="dark"] .hospital-toggle::before {
    background: var(--bg-tertiary);
}

/* Whipps selected - slide right */
.hospital-toggle[data-selected="whipps"]::before {
    transform: translateX(var(--hospital-option-width, 42px));
}

.hospital-option {
    display: flex;
    height: 28px;
    width: var(--hospital-option-width, 42px);
    border-radius: var(--radius-pill);
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: none;
    border: none;
    transition: color var(--transition-base);
    position: relative;
    z-index: 1;
    white-space: nowrap;
    user-select: none;
}

.hospital-option.active {
    color: var(--text-primary);
    font-weight: 600;
}

/* Desktop: hide mobile footer-settings hospital toggle (use footer-desktop-row) */
@media (min-width: 601px) {
    .footer-settings .hospital-toggle {
        display: none;
    }
}

/* Hover effects */
@media (any-hover: hover) {
    .hospital-toggle:hover {
        border-color: var(--text-muted);
    }
    
    .hospital-toggle:hover::before {
        border-color: var(--text-secondary);
    }
}

/* Print: hide toggle */
@media print {
    .hospital-toggle {
        display: none !important;
    }
}

/* Patient mode: hide toggle (QR scan view) */
.patient-mode .hospital-toggle {
    display: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hospital-toggle::before {
        transition: none;
    }
}

/* -------------------------------------------
   MOBILE SCORE STRIP
   Thin sticky strip below header showing
   calculator scores on mobile devices.
   ------------------------------------------- */
.score-strip {
    display: none;
    background: var(--bg-elevated);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Show on mobile calculator pages */
@media (max-width: 899px) {
    [data-page="gcaps"] .score-strip.visible,
    [data-page="bvas"] .score-strip.visible,
    [data-page="axspa"] .score-strip.visible {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;                    /* Was 0.5rem - more breathing room */
        padding: 0.9rem 1rem 0.6rem;     /* Asymmetric: more top to visually center uppercase text */
        min-height: 40px;                /* Was 32px - better tap target */
        animation: fadeIn var(--duration-fast) var(--ease-out-expo);
    }
}

/* Hide on desktop */
@media (min-width: 900px) {
    .score-strip {
        display: none !important;
    }
}

/* Score strip content layout */
.score-strip-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;                       /* Was 0.5rem */
}

.score-strip-label {
    font-size: 0.75rem;                  /* 12px */
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    line-height: 1;
}

.score-strip-value {
    font-size: 1.125rem;                 /* Was 1rem - larger */
    font-weight: var(--font-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1;
}

.score-strip-separator {
    color: var(--text-muted);
    opacity: 0.5;
    line-height: 1;
}

.score-strip-category {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    line-height: 1;
}

/* Dual scores (BVAS, AxSpA) */
.score-strip-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    margin: 0 0.25rem;
}

.score-strip-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* GCAPS risk colors */
[data-page="gcaps"] .score-strip.risk-high .score-strip-value {
    color: var(--risk-high-text);
}

[data-page="gcaps"] .score-strip.risk-medium .score-strip-value {
    color: var(--risk-med-text);
}

[data-page="gcaps"] .score-strip.risk-low .score-strip-value {
    color: var(--risk-low-text);
}

[data-page="gcaps"] .score-strip.risk-none .score-strip-value {
    color: var(--text-muted);
}

/* BVAS - Persistent (amber) / New-Worse (red) */
[data-page="bvas"] .score-strip .score-strip-value.persistent {
    color: var(--risk-med-text);
}

[data-page="bvas"] .score-strip .score-strip-value.new-worse {
    color: var(--risk-high-text);
}

/* AxSpA - ASDAS/BASDAI category colors */
[data-page="axspa"] .score-strip .score-strip-value.inactive {
    color: var(--risk-low-text);
}

[data-page="axspa"] .score-strip .score-strip-value.low {
    color: var(--risk-low-text);
}

[data-page="axspa"] .score-strip .score-strip-value.high {
    color: var(--risk-med-text);
}

[data-page="axspa"] .score-strip .score-strip-value.very-high,
[data-page="axspa"] .score-strip .score-strip-value.active {
    color: var(--risk-high-text);
}

/* Tap feedback */
.score-strip:active {
    background: var(--accent-info);
}

/* Discoverability: subtle copy icon (swaps to checkmark on copy) */
.score-strip-copy-hint {
    display: flex;
    align-items: center;
    margin-left: 0.375rem;
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.score-strip-copy-hint svg {
    width: 16px;
    height: 16px;
}

.score-strip-copy-hint.copied {
    opacity: 1;
    color: var(--theme-primary);
}

/* Invisible spacer to balance copy icon for centering */
.score-strip-spacer {
    width: 16px;
    flex-shrink: 0;
}

/* Score strip dark mode */
[data-theme="dark"] .score-strip {
    background: var(--bg-secondary);
}

[data-theme="dark"] .score-strip:active {
    background: var(--accent-info);
}

/* Score strip animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Celebrate animation (result calculated) */
@keyframes scoreStripPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Mobile: score strip celebrate */
@media (max-width: 899px) {
    [data-page="gcaps"] .score-strip.visible.celebrate,
    [data-page="bvas"] .score-strip.visible.celebrate,
    [data-page="axspa"] .score-strip.visible.celebrate {
        animation: scoreStripPop var(--duration-base) var(--ease-out-back);
    }
}

/* Desktop: header celebrate (GCAPS and AxSpA only) */
@media (min-width: 900px) {
    .gcaps-desktop-header.celebrate,
    .axspa-desktop-header.celebrate {
        animation: scoreStripPop var(--duration-base) var(--ease-out-back);
    }
}

/* Celebrate animation accessibility */
@media (prefers-reduced-motion: reduce) {
    .score-strip,
    .score-strip.celebrate,
    .score-strip.visible.celebrate,
    .gcaps-desktop-header.celebrate,
    .axspa-desktop-header.celebrate {
        animation: none;
    }
}

.score-strip:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: -2px;
}

/* -------------------------------------------
   PRINT STYLES
   ------------------------------------------- */
@media print {
    body {
        background: white;
        color: black;
        font-size: 11pt;
    }
    
    body::before {
        display: none;
    }
    
    header,
    footer,
    .nav-pills,
    .theme-toggle,
    .action-btn,
    .btn-secondary,
    .reset-link,
    .sticky-footer {
        display: none !important;
    }
    
    main {
        max-width: 100%;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
    
    .card::before {
        display: none;
    }
    
    .qr-container {
        box-shadow: none;
        border: 2px solid #000;
    }
    
    a {
        color: inherit;
        text-decoration: underline;
    }
    
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}