/* ===== CSS CUSTOM PROPERTIES (DESIGN TOKENS) ===== */

/* 
 * Comprehensive design token system for consistent styling
 * - Responsive scaling with clamp() functions
 * - Semantic color tokens for better maintainability
 * - Logical property support for internationalization
 * - Dark mode theme variants
 */
:root {
    /* Base Colors */
    --bg-color: #fff;
    --light-bg: #f5f5f5;
    --light-border: #ddd;
    --text-color: #333;
    --primary-color: #333;
    --focus-color: #4D90FE;
    --link-color: #1a0dab;
    --list-marker-color: #555;
    --header-bg: #333;
    --toggle-bg: #e0e0e0;
    --toggle-thumb: #555;
    --button-primary: #007bff;
    --button-primary-hover: #0056b3;
    --button-disabled: #ccc;
    --button-secondary-bg: #f8f9fa;
    --button-secondary-hover: #e2e6ea;
    --spacing-xxs: 2px;
    --spacing-xs: clamp(4px, 1vw, 8px);
    --spacing-sm: clamp(6px, 1.5vw, 10px);
    --spacing-md: clamp(8px, 2vw, 16px);
    --spacing-lg: clamp(16px, 3vw, 24px);
    --spacing-xl: clamp(24px, 4vw, 32px);
    --spacing-xxl: clamp(32px, 5vw, 48px);
    --font-size-xs: clamp(12px, 1.8vw, 13px);

    /* Increased minimum from 10px to 12px */
    --font-size-sm: clamp(14px, 2.5vw, 16px);

    /* Increased minimum from 12px to 14px */
    --font-size-md: clamp(14px, 3vw, 16px);
    --font-size-lg: clamp(16px, 3vw, 24px);
    --font-size-xl: clamp(18px, 4vw, 28px);
    --font-size-xxl: clamp(24px, 5vw, 32px);
    --border-radius: 8px;
    --transition-speed: 0.2s;

    /* Semantic Colors - Use these for consistent theming */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #4D90FE;
    --color-primary: #6f42c1;
    --color-secondary: #6c757d;
    --color-success-light: #d4edda;
    --color-warning-light: #fff3cd;
    --color-danger-light: #f8d7da;
    --color-info-light: #cce7ff;
    --color-primary-light: #e2d9f3;
    --color-secondary-light: #e2e3e5;
    --color-neutral: #666;
    --color-neutral-light: #ccc;
    --color-neutral-dark: #333;
    --color-accent: #ff8c00;
    --color-accent-light: #ffa54f;

    /* Ownership/content tag color tokens */
    --tag-public-bg: #e3f2fd;
    --tag-public-text: #1976d2;
    --tag-team-bg: #f3e5f5;
    --tag-team-text: #7b1fa2;
    --tag-personal-bg: #fff3e0;
    --tag-personal-text: #f57c00;
    --tag-system-bg: #e8f5e9;
    --tag-system-text: #388e3c;
    --tag-pink-bg: #fce4ec;
    --tag-pink-text: #c2185b;
    --tag-subject-bg: #e3f2fd;
    --tag-subject-text: #1976d2;
    --tag-type-bg: #f3e5f5;
    --tag-type-text: #7b1fa2;
    --tag-level-bg: #fff3e0;
    --tag-level-text: #f57c00;
    --tag-mode-bg: #e8f5e8;
    --tag-mode-text: #388e3c;

    /* Border Radius Scale */
    --border-radius-xs: 3px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-full: 50%;
    --border-radius-pill: 1.5rem;
    --border-radius-xl: 12px;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 1000;
    --z-modal: 1001;
    --z-toast: 1002;
    --z-popover: 110;
    --z-supreme: 9999;

    /* Content Layout Variables */
    --content-min-width: 300px;
    --image-min-height: 6.25rem;

    /* Hover States */
    --hover-bg: #f5f5f5;
    --color-text-inverse: #fff;
    --color-surface-darkest: #000;
    --color-border-divider: #808080;
    --color-star: #ffd700;
    --video-bg: var(--color-surface-darkest);
    --video-overlay-bg: #111;

    /* Clerk authentication primary accent */
    --clerk-primary-color: #4A90E2;

    /* Semantic aliases and derived tokens */
    --color-error: var(--color-danger);
    --color-error-light: var(--color-danger-light);
    --focus-ring-color: var(--focus-color);
    --tag-public-border: #bbdefb;
    --color-warning-dark: #d35400;
    --warning-bg: var(--color-warning-light);
    --warning-text: #856404;

    /* Question Component Variables */
    --question-spacing-xs: 0.3125rem; /* 5px */
    --question-spacing-sm: 0.625rem;  /* 10px */
    --question-spacing-md: 1.25rem;   /* 20px */
    --question-font-size-sm: clamp(0.875rem, 2.5vw, 1rem);
    --question-font-size-md: clamp(1rem, 3vw, 1.25rem);
    --question-border-radius: 0.25rem;
    --question-content-width: min(100%, 800px);
    --question-response-min-height: 3rem;
    --question-option-hover: rgb(0 0 0 / 5%);
    --question-option-selected: rgb(0 123 255 / 10%);

    /* Modal System Variables */
    --modal-z-index: 1000;
    --modal-backdrop-color: rgb(0 0 0 / 50%);
    --modal-border-radius: 8px;
    --modal-padding: var(--spacing-lg);
    --modal-shadow: 0 4px 20px rgb(0 0 0 / 30%);
    --modal-max-width-small: 450px;
    --modal-max-width-medium: 600px;
    --modal-max-width-large: 800px;
    --modal-animation-duration: 0.3s;
    --modal-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --modal-android-nav-offset: 48px;
    --modal-android-nav-offset-landscape: 60px;
    --modal-fullscreen-height-mobile: calc(100dvh - var(--modal-android-nav-offset) - var(--modal-safe-area-bottom));
    --modal-fullscreen-height-mobile-landscape: calc(100dvh - var(--modal-android-nav-offset-landscape) - var(--modal-safe-area-bottom));
}

[data-theme="dark"] {
    --light-border: #444;
    --text-muted: #999;
    --color-neutral: #999;
    --success-bg: #1e4620;
    --success-text: #d4edda;
    --success-border: #2a6e2d;
    --error-bg: #721c24;
    --error-text: #f8d7da;
    --error-border: #9e2631;
    --warning-bg: #856404;
    --warning-text: #fff3cd;
    --warning-border: #ffeaa7;
    --hover-bg: #444;
    --accent-color: var(--focus-color);
    --accent-light: #2d5a87;
    --bg-color: #222;
    --light-bg: #2d2d2d;
    --text-color: #e0e0e0;
    --primary-color: #f0f0f0;
    --focus-color: #5D9FFF;
    --link-color: #5D9FFF;
    --list-marker-color: #aaa;
    --header-bg: #333;
    --toggle-bg: #555;
    --toggle-thumb: #e0e0e0;

    /* Dark mode semantic colors */
    --color-info-light: rgb(93 159 255 / 20%);
    --color-success-light: rgb(40 167 69 / 20%);
    --color-warning-light: rgb(255 193 7 / 20%);
    --color-danger-light: rgb(220 53 69 / 20%);
    --color-primary-light: rgb(111 66 193 / 20%);
    --color-secondary-light: rgb(108 117 125 / 20%);

    /* Dark mode modal variables */
    --modal-backdrop-color: rgb(0 0 0 / 70%);
    --modal-shadow: 0 4px 20px rgb(0 0 0 / 60%);

    /* Dark mode question variables */
    --question-option-hover: rgb(255 255 255 / 10%);
    --question-option-selected: rgb(66 153 225 / 20%);

    /* Dark mode tag colors */
    --tag-public-bg: rgb(25 118 210 / 20%);
    --tag-public-text: #90caf9;
    --tag-public-border: rgb(66 165 245 / 30%);
    --tag-team-bg: rgb(123 31 162 / 20%);
    --tag-team-text: #ce93d8;
    --tag-personal-bg: rgb(245 124 0 / 20%);
    --tag-personal-text: #ffb74d;
    --tag-system-bg: rgb(56 142 60 / 20%);
    --tag-system-text: #81c784;
    --tag-pink-bg: rgb(194 24 91 / 20%);
    --tag-pink-text: #f48fb1;
    --tag-subject-bg: rgb(25 118 210 / 20%);
    --tag-subject-text: #90caf9;
    --tag-type-bg: rgb(123 31 162 / 20%);
    --tag-type-text: #ce93d8;
    --tag-level-bg: rgb(245 124 0 / 20%);
    --tag-level-text: #ffb74d;
    --tag-mode-bg: rgb(56 142 60 / 20%);
    --tag-mode-text: #81c784;
    --color-success-on-dark: #4caf50;
    --bg-color-deeper: #1a1a1a;
    --color-warning-dark: #8b7500;
    --dark-warning-bg: #3a3a2a;
    --dark-warning-text: var(--color-warning);

    /* Dark-mode conversion indicator & validation colors */
    --color-info-bg-dark: #0d47a1;
    --color-info-text-dark: #90caf9;
    --color-success-bg-dark: #1b5e20;
    --color-success-text-dark: #a5d6a7;
    --color-danger-bg-dark: #b71c1c;
    --color-danger-text-dark: #ef9a9a;
    --color-danger-border-dark: #e57373;
    --color-danger-muted-dark: #ffcdd2;
    --color-danger-faint-dark: #ffebee;
    --color-danger-on-dark: #ff6b6b;
}

* {
    box-sizing: border-box !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.65;
    margin: 0 auto;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    max-width: 100%
}

p {
    margin-bottom: 0.9em;
}

a {
    color: var(--link-color);
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
    width: auto;

    /* so it doesn't take the width of a flex container */
}

a:hover {
    text-decoration: underline;
    color: var(--button-primary-hover);
}

/*
BUTTON SYSTEM:
- .btn (primary button - blue)
- .btn .btn-secondary (secondary button - blue)
- .btn .btn-link (link-style button)
*/

/* Unified button base class */
.btn {
    padding: .75rem 1rem;
    min-height: 2.5rem;
    background: var(--button-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: var(--spacing-sm);
    white-space: normal;
    font-size: var(--font-size-sm);
    justify-content: center;
    transition: background-color var(--transition-speed) ease;
    text-decoration: none;
}

.btn:hover,
.btn:focus {
    background: var(--button-primary-hover);
    transform: translateY(-1px);
}

.btn:active,
.btn:focus:active {
    background: var(--button-primary-hover);
    transform: translateY(1px);
}

/* Touch device support */
@media (hover: none) and (pointer: coarse) {
    .btn:active {
        background: var(--button-primary-hover);
        transform: scale(0.98);
    }

    /* Add touch feedback to all interactive elements */
    button:active,
    .btn:active,
    a:active,
    [role="button"]:active,
    .clickable:active {
        transform: scale(0.98);
        opacity: 0.8;
        transition: transform 0.1s ease, opacity 0.1s ease;
    }

    /* List items and cards touch feedback */
    .category-block-item:active,
    .goal-item:active {
        background-color: var(--light-bg);
        transform: scale(0.98);
    }

    /* Add ripple effect for better touch feedback */
    .btn,
    button {
        position: relative;
        overflow: hidden;
    }

    .btn::after,
    button::after {
        content: '';
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        width: 0;
        height: 0;
        border-radius: var(--border-radius-full);
        background: rgb(255 255 255 / 30%);
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease;
        pointer-events: none;
    }

    .btn:active::after,
    button:active::after {
        width: 120px;
        height: 120px;
    }
}

.btn:disabled {
    background: var(--button-disabled);
    cursor: not-allowed;
    transform: none;
}

/* SVG icons within buttons */
.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
}

.btn-danger:hover {
    background-color: var(--color-danger);
    filter: brightness(90%);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);

    /* Increased padding for better touch targets */
    font-size: var(--font-size-sm);

    /* Increased from 12px for accessibility */
    min-width: auto;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--link-color);
    font-weight: normal;
    text-decoration: none;
    margin: 0;
    cursor: pointer;
}

.btn-link:hover {
    background: none;
    text-decoration: underline;
    color: var(--button-primary-hover);
    transform: none;
}

.button-container {
    margin-bottom: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* Reusable button row class - prevents buttons from stretching in flex containers */
.button-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--button-row-gap, var(--spacing-sm));
    margin-top: 1rem;
}

/* .button-row  buttons with equal width and height enhancement */
.button-row .btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: fit-content;
    align-self: stretch; /* Override .button-row .btn's flex-start to stretch to full height */
    display: flex;
    font-size: var(--button-font-size, var(--font-size-sm));
}

/* Reusable button-link row class - handles mixed buttons and links with consistent alignment */
.button-link-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Ensure buttons and links in button-link rows maintain consistent styling */
.button-link-row .btn {
    flex: 0 0 auto;
    width: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
}

/* Icon button component - used by iconButtonComponent.mjs */
.icon-button-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Mobile touch target: minimum 44x44px */
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease;
}

.icon-button-container:hover,
.icon-button-container:active {
    background-color: var(--light-bg);
}

.icon-button-container button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

/* Icon link and text utilities (PAT-009 compliant) */
.icon-link {
    color: var(--color-neutral);
    cursor: pointer;
}

.icon-text {
    color: var(--color-neutral);

    /* PAT-029: CSS-driven responsive font sizing instead of JavaScript */
    font-size: var(--font-size-xs);
    margin: 0 var(--spacing-xs) 0 var(--spacing-xxs);
}

/* Empty message utility (PAT-009 compliant) */
.empty-message {
    color: var(--color-neutral);
    font-style: italic;
}

/* Page description — intro paragraph below a page heading */
.page-desc {
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
}

/* Secondary/muted text — use instead of inline style.color = var(--text-secondary) */
.text-secondary {
    color: var(--text-secondary);
}

/* Error/danger text — use instead of inline style.color = var(--color-error) */
.text-error {
    color: var(--color-error);
}

/* Section empty/loading state — muted helper text inside a section */
.section-empty {
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) 0;
}

/* Message component type variants (PAT-009 compliant) */
.message-component[data-message-type="success"] {
    background-color: rgb(76 175 80 / 90%);
    color: var(--color-text-inverse);
}

.message-component[data-message-type="warning"] {
    background-color: rgb(255 152 0 / 90%);
    color: var(--color-text-inverse);
}

.message-component[data-message-type="error"] {
    background-color: rgb(244 67 54 / 90%);
    color: var(--color-text-inverse);
}

.message-component[data-message-type="info"] {
    background-color: rgb(33 150 243 / 90%);
    color: var(--color-text-inverse);
}

/* Brief message div (messageComponent.show) - same styling as .message-component */
#briefMessageDiv[data-message-type="success"] {
    background-color: rgb(76 175 80 / 90%);
    color: var(--color-text-inverse);
}

#briefMessageDiv[data-message-type="warning"] {
    background-color: rgb(255 152 0 / 90%);
    color: var(--color-text-inverse);
}

#briefMessageDiv[data-message-type="error"] {
    background-color: rgb(244 67 54 / 90%);
    color: var(--color-text-inverse);
}

#briefMessageDiv[data-message-type="info"] {
    background-color: rgb(33 150 243 / 90%);
    color: var(--color-text-inverse);
}

.message-component[data-message-type="default"],
#briefMessageDiv[data-message-type="default"] {
    background-color: rgb(0 0 0 / 80%);
    color: var(--color-text-inverse);
}

/* briefMessageDiv base — opacity and transition declared in CSS (PAT-029 compliant) */
#briefMessageDiv {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* briefMessageDiv position variants — set via data-message-position (PAT-009 compliant) */
#briefMessageDiv[data-message-position="top"] {
    top: 20px;
    bottom: auto;
}

#briefMessageDiv[data-message-position="bottom"] {
    top: auto;
    bottom: 20px;
}

#briefMessageDiv[data-message-position="center"] {
    top: 50%;
    bottom: auto;
}

/* Collapsible section toggle icon — transition and rotation in CSS (PAT-029 compliant) */
[data-collapsible-icon] {
    transition: transform 0.2s ease;
}

[aria-expanded="true"] [data-collapsible-icon] {
    transform: rotate(180deg);
}

/* Modal message variants (PAT-009 compliant) */
.message-success {
    color: var(--color-success, #28a745);
}

.message-error {
    color: var(--color-error);
}

.render-error-container {
    padding: var(--spacing-lg);
    color: var(--color-error);
    text-align: center;
}

/* Required field indicator (PAT-009 compliant) */
.required-indicator {
    color: var(--color-error);
}

/* Component-specific visibility classes */
.loading-overlay {
    position: absolute;
    background-color: var(--bg-color);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    text-align: center;
    z-index: var(--z-popover);
    cursor: pointer;

    /* Don't apply dark mode filter to loading overlay */
    filter: none;
}

.image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: var(--color-neutral);
}

/* Image error placeholder - consolidated with enhanced definition at line ~5749 */

/* Input components */
.input-with-margin {
    margin: var(--spacing-xs);
}

/* Form pair components - input-pair, checkbox-pair, select-pair */
.input-pair,
.select-pair {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.input-pair label,
.select-pair label {
    font-weight: 500;
}

.input-pair input,
.select-pair select {
    flex: 1;
}

.checkbox-pair {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.clickable {
    cursor: pointer;
}

/* Alignment */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

/* Spacing */
.gap-xs {
    gap: var(--spacing-xs);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.margin-0 {
    margin: 0;
}

.padding-0 {
    padding: 0;
}

.padding-sm {
    padding: var(--spacing-sm);
}

.padding-md {
    padding: var(--spacing-md);
}

/* Text */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.font-bold {
    font-weight: bold;
}

.font-normal {
    font-weight: normal;
}

/* Sizing */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.max-w-full {
    max-width: 100%;
}

/* ===== PAGE CONTAINER PATTERNS ===== */

/* Base page container for consistent page layout */
.page-container {
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.page-container li {
    margin-bottom: 0.6em;
}

.page-content-wrapper {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ===== EXTENDED BUTTON SYSTEM ===== */

/* Additional semantic button variants */
.btn-success {
    background: var(--color-success);
    color: var(--color-text-inverse);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--color-text-inverse);
}

.btn-success:hover,
.btn-success:focus {
    background: color-mix(in srgb, var(--color-success) 85%, var(--color-surface-darkest));
}

.btn-warning:hover,
.btn-warning:focus {
    background: color-mix(in srgb, var(--color-warning) 85%, var(--color-surface-darkest));
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, red, blue)) {
    .btn-success:hover,
    .btn-success:focus {
        filter: brightness(0.85);
    }

    .btn-warning:hover,
    .btn-warning:focus {
        filter: brightness(0.85);
    }
}

/* ===== TABLE SYSTEM ===== */

/* Standardized table components */
.table-container {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    overflow: hidden;
    margin: var(--spacing-md) 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.table-standard {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table-standard th {
    background-color: var(--header-bg);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm);
    text-align: left;
    font-weight: 600;
}

.table-standard td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
    transition: border-color 0.3s ease;
}

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

.table-standard tr:hover {
    background-color: var(--color-info-light);
}

/* ===== FORM SYSTEM ===== */

/* Standardized form components */
.form-section {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.form-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

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

/* Generic form section layouts */
.input-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.button-section {
    display: flex;
    justify-content: flex-start;
}

.form-label {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-color);
    display: block;
}

/* Inline control label - for labels that sit beside controls (e.g., "Sort by:", "Filters:") */
.control-label {
    font-weight: 600;
    color: var(--text-color);
    margin-right: var(--spacing-md);
    white-space: nowrap;
}

/* Control group - horizontal layout for label + controls */
.control-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

/* Radio button pairs - standardized form component */
.radio-pair {
    display: block;
    line-height: 1.4;
}

.radio-pair input[type="radio"] {
    margin: 0;
    margin-right: var(--spacing-xs);
    vertical-align: middle;
}

.radio-pair label {
    font-weight: normal;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    line-height: 1.2;
}

/* Inline radio pair for use within flex containers */
.radio-pair.inline {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.radio-pair.inline input[type="radio"] {
    margin-right: var(--spacing-xs);
}

.radio-pair.inline label {
    margin-bottom: 0;
}

.form-group:last-child {
    margin-bottom: 0;
}

ul {
    padding-inline-start: 1em;
}

/* styling for top header */
#top-header-container {
    background-color: var(--header-bg);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#left-header,
#right-header {
    display: flex;
    align-items: center;
}

#menu-icon,
#user-icon {
    font-size: var(--font-size-lg);
    cursor: pointer;
    margin: 0 var(--spacing-sm);
}

#user-icon {
    margin-top: 6px;
}

#company-logo {
    font-size: var(--font-size-lg);
    font-weight: bold;
    margin-inline-start: var(--spacing-sm);
    padding-top: var(--spacing-xs);
    cursor: pointer;
}

#goals-icon {
    width: 44px;
    height: 44px;
    cursor: pointer;
    margin: 0 var(--spacing-sm);
    padding: var(--spacing-sm);
    box-sizing: border-box;
}

#goals-icon svg {
    fill: none;
    stroke: var(--color-text-inverse);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#search-icon {
    /* Mobile touch target: minimum 44x44px with visual icon centered */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    color: var(--color-text-inverse);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease;
}

#search-icon:hover,
#search-icon:active {
    background-color: rgb(255 255 255 / 10%);
}

#search-icon svg {
    width: 24px;
    height: 24px;
}

.header-dark-mode-toggle {
    margin: 0 var(--spacing-sm);
}

.goal-star-base {
    cursor: pointer;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--color-star);
    transition: transform var(--transition-speed);
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    justify-content: center;
}

.goal-star-base:hover,
.goal-star-base:active {
    transform: scale(1.2);
}

.goal-star-base-empty {
    opacity: 0.5;
}

.goal-star-base-empty:hover,
.goal-star-base-empty:active {
    opacity: 0.8;
}

/* Light theme text shadow for goal stars */
[data-theme="light"] .goal-star-base {
    text-shadow: -1px 0 var(--color-surface-darkest), 0 1px var(--color-surface-darkest), 1px 0 var(--color-surface-darkest), 0 -1px var(--color-surface-darkest);
}

/* styling for sidebar */
#sidebar {
    position: fixed;
    inset-inline-start: -250px;
    top: 0;
    width: 250px;
    max-width: 100%;
    height: 100vh;
    background-color: var(--light-bg);
    transition: inset-inline-start 0.3s ease-in-out;
    z-index: var(--z-overlay);
    display: block;
}

#sidebar.open {
    inset-inline-start: 0;
    display: block;
}

#sidebar-close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font: inherit;
    font-weight: 400;
    color: inherit;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:active {
    color: inherit;
    text-decoration: none;
    background-color: var(--color-neutral-light);
}

/* Disable hover effect for sidebar menu items - use keyboard-selected instead */
#sidebar .dropdown-item:hover,
#sidebar .dropdown-item:active {
    background-color: transparent;
}

.dropdown-item.keyboard-selected {
    background-color: var(--color-neutral-light);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

#action-list {
    list-style-type: none;
    padding: var(--spacing-lg);
    margin: 0;
    margin-top: var(--spacing-md);
}

.divider {
    height: 1px;
    background-color: var(--light-border);
    margin: var(--spacing-md) 0;
}

/* General input styling - can be overridden by components */
input {
    /* Design system integration */
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 12px 16px;
    line-height: 1.4;
    
    /* Enhanced behavior */
    transition: border-color var(--transition-speed) ease;
    font-family: inherit;
}

input:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 20%);
}

/* Critical mobile conformance rules - excludes radio/checkbox/range */
input:not([type="radio"], [type="checkbox"], [type="range"]) {
    /* iPad-compatible foundation - cannot be overridden */
    min-height: 44px !important;           /* Apple touch target minimum */
    font-size: 16px !important;            /* Prevents iOS zoom */
    box-sizing: border-box !important;     /* Consistent sizing behavior */
    
    /* Remove browser defaults - cannot be overridden */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Platform-specific touch optimizations */
@media (pointer: coarse) {
    input:not([type="radio"], [type="checkbox"], [type="range"]) {
        min-height: 48px !important;       /* Slightly larger for touch */
    }
}

/* Specific input width overrides */
.message-input {
    width: 180px;
}

.inline-submit-input {
    display: inline;
    margin: 5px;
}

.checkbox-input {
    margin-top: 5px;
}

/* Dark mode calendar icon fix for datetime-local and date inputs */
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

select {
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    color: var(--text-color);
    background-color: var(--bg-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

select:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 20%);
}

.numberCircle {
    font: 12px Arial, sans-serif;

    /* change font-size to scale */
    width: 1.6em;
    height: 1.6em;
    background: var(--bg-color);
    border: 0.1em solid var(--color-neutral);
    color: var(--color-neutral);
    text-align: center;
    border-radius: var(--border-radius-full);
    line-height: 1.6em;
    box-sizing: content-box;
}

/* ===== BASE PATTERN SYSTEM ===== */

.section-base {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    transition: background-color var(--transition-speed) ease, 
                border-color var(--transition-speed) ease;
}

.page-header-base {
    margin: var(--spacing-sm) 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);

    /* Prevent items from being pushed off-screen */
    min-width: 0;
}

.page-title-base {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--text-color);
    margin: 0;

    /* Allow text to shrink and truncate if needed */
    min-width: 0;
    flex-shrink: 1;
}

.page-separator {
    margin: calc(var(--spacing-xs) * 1.25) 0;
    height: 1px;
    width: 100%;
    background-color: var(--light-border);
}

.table-base {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: var(--spacing-lg);
}

.table-header-base {
    background-color: var(--light-bg);
    color: var(--text-color);
    font-weight: bold;
    padding: clamp(10px, 2.5vw, 12px);
    text-align: left;
    border-bottom: 2px solid var(--light-border);
    cursor: pointer;
    position: relative;
    transition: background-color var(--transition-speed) ease;
}

.table-cell-base {
    padding: clamp(8px, 2vw, 10px);
    border-bottom: 1px solid var(--light-border);
    text-align: left;
}

/* Note: These styles only apply in mobile breakpoints to preserve desktop table layout */
@media (width <= 480px) {
    .mobile-card-base {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: var(--spacing-lg);
        border-radius: var(--border-radius-lg);
        box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
        background-color: var(--bg-color);
        padding: clamp(10px, 2.5vw, 12px);
        position: relative;
        border: 1px solid var(--light-border);
        transition: box-shadow var(--transition-speed) ease;
        min-width: 0;
    }

    .mobile-card-base:hover {
        box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
    }
}

@media (width <= 500px) {
    /* Hide company logo on very small screens */
    #company-logo {
        font-size: var(--font-size-sm);

        /* Increased from 12px for accessibility */
        margin-inline-start: var(--spacing-xs);
    }

    /* Make header elements smaller */
    #menu-icon,
    #user-icon {
        font-size: var(--font-size-xl);
        margin: 0 var(--spacing-xs);
    }

    #goals-icon {
        width: 20px;
        height: 20px;
        margin: -7px 5px 0;
    }

    /* Adjust dark mode toggle */
    #top-header-container .theme-switch {
        width: 2.5rem !important;
        height: 1.2rem !important;
    }

    #top-header-container .theme-switch .slider::before {
        height: 0.8rem;
        width: 0.8rem;
    }

    #top-header-container input:checked+.slider::before {
        transform: translateX(1.2rem);
    }

    /* Hide toggle label on very small screens */
    #top-header-container .toggle-label {
        display: none;
    }

    /* Ensure header doesn't overflow */
    #top-header-container {
        padding: var(--spacing-xs);
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    #youtube-player-container {
        width: fit-content;
    }

    /* Activity title responsive styles */
    .activity-title {
        width: 100%;
        margin: var(--spacing-xs) 0;
        order: -1;
    }
}

@media (width <= 250px) {
    #company-logo {
        display: none;
    }
}

/* Add a mid-size breakpoint for smoother transition */
@media (width >= 501px) and (width <= 768px) {
    #company-logo {
        font-size: var(--font-size-lg);
    }

    #top-header-container .toggle-label {
        font-size: var(--font-size-xs);
    }
}

@media (width >= 1000px) {
    body {
        width: 1000px;
    }
}

/* Allow scrolling only on outer-container */
#outer-container {
    overflow: auto;
    flex: 1;
    width: 100%;
    margin: auto;
    text-align: left;
    max-width: 1000px;
    position: relative;
    display: flex;
    flex-direction: column;
}

#content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: var(--spacing-md);
}

#core-page-container {
    color: var(--text-color);
    position: relative;
    min-height: 300px;
}

.horSeparator {
    margin: var(--spacing-xs) 0 var(--spacing-xs) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--color-border-divider);
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.progress-bar {
    width: 100%;
    max-width: 300px;
    height: 20px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: var(--spacing-sm) 0;
    flex: 1;
}

[data-theme="dark"] .progress-bar {
    background-color: var(--light-border);
    border-color: rgb(255 255 255 / 20%);
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-success);
    transition: width 0.3s ease-in-out;
    width: var(--progress-width, 0%);
}

/* Disable transition for instant (non-animated) progress updates (PAT-029 compliant) */
.progress-bar-fill--instant {
    transition: none;
}

/* Progress text */
.progress-text {
    margin-left: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
    white-space: nowrap;
    font-weight: 500;
}

/* Progress bar variants for different use cases */
.progress-group-container {
    display: flex;
    align-items: center;
    min-width: 200px;
    gap: var(--spacing-xs, 4px);
}

.progress-bar-min-width {
    min-width: 150px;
}

/* Shell component styles */

.shell-footer-copyright {
    display: block;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 75%;
    color: var(--color-neutral, #999);
}

/* Small progress bar variant (used in recent progress, skills table) */
.progress-bar-small {
    width: 60px;
    height: 12px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    margin: 2px 0;
}

[data-theme="dark"] .progress-bar-small {
    background-color: var(--color-neutral);
    border-color: rgb(255 255 255 / 20%);
}

/* Compact progress bar variant (used in metacat, goals) */
.progress-bar-compact {
    width: 100%;
    height: 8px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: 2px 0;
}

[data-theme="dark"] .progress-bar-compact {
    background-color: rgb(255 255 255 / 10%);
    border-color: rgb(255 255 255 / 20%);
}

/* Assessment progress bar variant (display flex with text layout) */
.progress-bar-info {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

/* Flexible progress bar variant (used in goals, constrained layouts) */
.progress-bar-flexible {
    width: 100%;
    min-width: 80px;  /* Much smaller min-width for constrained spaces */
    max-width: 100%;
    height: 12px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: 2px 0;
    flex: 1;
}

[data-theme="dark"] .progress-bar-flexible {
    background-color: var(--toggle-bg);
    border-color: rgb(255 255 255 / 20%);
}

/* Responsive progress bar (used in metacat page) */
.progress-bar-responsive {
    width: clamp(2.5rem, 5vw, 3rem);
    height: clamp(0.75rem, 1.5vw, 1rem);
    margin: 2px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

[data-theme="dark"] .progress-bar-responsive {
    background-color: var(--light-border);
    border-color: rgb(255 255 255 / 20%);
}

/* Mobile responsive adjustments for progress bar */
@media (width <= 480px) {
    .progress-bar {
        max-width: 100%;
        min-width: 30px;
    }
}

/* ===== TEST-OUT MODE INDICATORS ===== */

/* Visual indicators for testOutMode adjusted progress */

.testout-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-xs);
}

.testout-badge {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;

    /* TODO(PAT-028): Gap too small - 2px below 8px minimum spacing for touch targets */
    gap: 2px;
}

[data-theme="dark"] .testout-badge {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
}

.testout-tooltip {
    /* Leverages existing modal-system-content patterns */
    padding: var(--spacing-sm);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    font-size: var(--font-size-sm);
    max-width: 250px;
    z-index: var(--z-overlay);
    position: absolute;
}

[data-theme="dark"] .testout-tooltip {
    background-color: var(--bg-color);
    border-color: var(--color-neutral);
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}

.testout-icon {
    font-size: var(--font-size-xs);
    color: var(--color-success);
}

/* Small variant for compact displays */
.testout-badge-small {
    font-size: calc(var(--font-size-xs) - 1px);
    padding: 2px 6px;
    border-radius: var(--border-radius-xs);
}

/* Progress bar with testout indicator integration */
.progress-bar-container.has-testout {
    position: relative;
}

.progress-bar-container .testout-indicator {
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
}

/* ===== USER PREFERENCES STYLES ===== */

/* Styles for user preferences modal and settings */

.preference-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .preference-section {
    background-color: var(--bg-color);
    border-color: var(--color-neutral);
}

.preference-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.preference-label {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

.preference-description {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
    margin: 0;
    line-height: 1.4;
}

.account-preferences-save-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.account-preferences-message {
    font-size: var(--font-size-sm);
}

/* Enhanced checkbox styling */
.preference-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-color);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.preference-checkbox:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.preference-checkbox:checked::after {
    content: "✓";
    position: absolute;
    top: -1px;
    left: 2px;
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: bold;
}

[data-theme="dark"] .preference-checkbox {
    border-color: var(--color-neutral);
    background-color: var(--bg-color);
}

[data-theme="dark"] .preference-checkbox:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.preference-frequency-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.preference-frequency-text {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
}

.preference-frequency-edit {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.preference-frequency-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.preference-frequency-number {
    width: 4rem;
    font-size: var(--font-size-sm);
    padding: 2px var(--spacing-xs);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .preference-frequency-number {
    border-color: var(--color-neutral);
}

.preference-frequency-select {
    font-size: var(--font-size-sm);
    padding: 2px var(--spacing-xs);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .preference-frequency-select {
    border-color: var(--color-neutral);
}

.preference-hydrate-details-link {
    display: block;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;

    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== VIDEO MODAL SYSTEM ===== */

/* Video container for modal video display */
.video-container {
    position: relative;
    padding: 0;
    overflow: hidden;
    background-color: var(--video-bg);
}

/* Video placeholder shown while YouTube API loads */
.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--video-overlay-bg);
    color: var(--color-text-inverse);
}

/* Loading spinner and text */
.video-loading {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: var(--font-size-sm);
    color: rgb(255 255 255 / 80%);
}

.video-loading::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: var(--spacing-sm) auto;
    border-radius: var(--border-radius-full);
    border: 4px solid rgb(255 255 255 / 20%);
    border-color: rgb(255 255 255 / 20%) rgb(255 255 255 / 20%) rgb(255 255 255 / 20%) rgb(255 255 255 / 80%);
    animation: video-loading 1.2s linear infinite;
}

@keyframes video-loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Video error state */
.video-error {
    padding: var(--spacing-lg);
    text-align: center;
    background-color: var(--color-neutral-dark);
    color: var(--color-text-inverse);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

[data-theme="dark"] .video-error {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.video-error p {
    margin: var(--spacing-xs) 0;
}

/* Responsive video modal adjustments */
@media (width <= 480px) {
    .modal-system-container.size-large {
        width: 95vw;
    }
    
    .modal-system-footer {
        flex-direction: column;
    }
    
    .modal-system-footer .btn {
        width: 100%;
        margin: var(--spacing-xs) 0;
    }
}

.modal-content {
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: auto;
    padding: var(--spacing-sm);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Text content */
.modal-text-content {
    margin: var(--spacing-md) var(--spacing-sm);
    line-height: 1.65;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.modal-text-content p {
    margin-bottom: 0.9em;
}

.modal-text-content li {
    margin-bottom: 0.6em;
}

/* Force text color in all nested elements for dark mode */
[data-theme="dark"] .modal-text-content p,
[data-theme="dark"] .modal-text-content div,
[data-theme="dark"] .modal-text-content span,
[data-theme="dark"] .modal-text-content h1,
[data-theme="dark"] .modal-text-content h2,
[data-theme="dark"] .modal-text-content h3,
[data-theme="dark"] .modal-text-content h4,
[data-theme="dark"] .modal-text-content h5,
[data-theme="dark"] .modal-text-content h6,
[data-theme="dark"] .modal-text-content li {
    color: var(--text-color);
}

/* Image container */
.modal-image-container {
    margin: var(--spacing-sm);
    text-align: center;
    background-color: var(--bg-color);
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    display: inline-block;
    transition: border-color 0.3s ease;
}

[data-theme="dark"] .modal-image-container {
    border-color: var(--header-bg);

    /* Keep white background for images in dark mode */
}

/* Images */
.modal-image {
    max-width: 100%;
    margin: 0;
    filter: none;

    /* Never apply any filter to images */
}

/* Links inside modal content */
.modal-text-content a {
    font-weight: bold;
}

[data-theme="dark"] .modal-text-content a {
    color: var(--focus-color);
}

[data-theme="dark"] .modal-text-content a:hover {
    color: var(--focus-color);
}

/* styling for prompts/messages */
.prompt-dialog {
    background-color: var(--bg-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
    color: var(--text-color);
}

[data-theme="dark"] .prompt-dialog {
    box-shadow: 0 4px 20px rgb(0 0 0 / 50%);
}

.prompt-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: var(--font-size-xl);
    color: var(--text-color);
}

.prompt-message {
    margin-bottom: 20px;
    color: var(--color-neutral);
    line-height: 1.4;
}

[data-theme="dark"] .prompt-message {
    color: var(--color-neutral-light);
}

.prompt-button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-overlay);
}

/* ================================================
   UNIFIED MODAL SYSTEM STYLES
   Component-based modal system with consistent design
   ================================================ */


/* ===== UNIFIED MODAL SYSTEM ===== */

/* ================================================
   MODAL SYSTEM - SCROLL ARCHITECTURE

   Understanding Modal Scrolling Behavior:

   The modal system uses different scroll containers depending on modal type and size.
   This layered approach prevents scroll conflicts and ensures proper mobile behavior.

   FULLSCREEN MODALS (size-fullscreen):
   -----------------------------------
   Scroll Container: .content-modal-wrapper
   - This is the ONLY scrollable element in fullscreen modals
   - .modal-system-container has overflow: hidden (prevents container scroll)
   - .modal-system-content has overflow: hidden (prevents content area scroll)
   - .content-modal-wrapper has overflow-y: auto (handles ALL scrolling)

   Why this matters:
   - Prevents double-scrolling issues on mobile devices
   - Ensures proper scroll behavior with Android navigation bars
   - Maintains header/footer visibility while content scrolls

   STANDARD MODALS (small, medium, large):
   ---------------------------------------
   Scroll Container: .modal-system-content
   - .modal-system-container has overflow: auto (handles modal scroll)
   - .modal-system-content has overflow: auto (content area can scroll)
   - .content-modal-wrapper inherits overflow behavior

   DOM Structure (Fullscreen):
   .modal-system-overlay (fixed positioning, centers modal)
     └── .modal-system-container.size-fullscreen (flex column, overflow: hidden)
           ├── .modal-system-header (flex-shrink: 0, never scrolls)
           └── .modal-system-content (flex: 1, overflow: hidden)
                 └── .content-modal-wrapper (height: 100%, overflow-y: auto) ← SCROLLS HERE
                       └── actual content (forms, text, images, etc.)

   DOM Structure (Standard Sizes):
   .modal-system-overlay (fixed positioning, centers modal)
     └── .modal-system-container (flex column, overflow: auto) ← SCROLLS HERE
           ├── .modal-system-header (flex-shrink: 0)
           └── .modal-system-content (flex: 1, overflow: auto)
                 └── .content-modal-wrapper (inherits overflow)
                       └── actual content

   Mobile Considerations:
   - 100dvh (dynamic viewport height) adjusts for mobile keyboards
   - Safe area insets prevent content from being hidden behind notches
   - Android navigation bar offset (48px portrait, 60px landscape)
   - Touch targets meet 44px minimum for accessibility

   ================================================ */

/*
 * Modern modal system with the following features:
 * - Size variants: small, medium, large, fullscreen
 * - Accessibility: focus management, ARIA labels, keyboard navigation
 * - Animations: fade in/out with proper state management
 * - Responsive: adapts to different screen sizes
 */

/* Modal System Overlay - Full screen backdrop */
.modal-system-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--modal-backdrop-color);
    z-index: var(--modal-z-index);
    display: flex;
    align-items: center;
    justify-content: center;

    /* Default state: invisible - JavaScript will control visibility via modal-visible class */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--modal-animation-duration) ease,
        visibility var(--modal-animation-duration) ease;
}

.modal-system-overlay.modal-visible {
    opacity: 1;
    visibility: visible;
}

/* Mobile keyboard fix: position modal from top instead of center */
@media (width <= 768px) {
    .modal-system-overlay {
        align-items: flex-start;
        padding-top: 5vh;
        height: 100dvh; /* Dynamic viewport height adjusts for mobile keyboard */
    }
}

/* Modal System Container - The actual modal */
.modal-system-container {
    background: var(--bg-color);
    border-radius: var(--modal-border-radius);
    border: 1px solid var(--light-border);
    box-shadow: var(--modal-shadow);
    max-height: 90vh;
    overflow: auto; /* Standard modals: container handles scrolling when content exceeds viewport */
    display: flex;
    flex-direction: column;
    position: relative;
    transform: scale(0.9);
    transition: transform var(--modal-animation-duration) ease,
        background-color 0.3s ease,
        border-color 0.3s ease;

    /* Fix for pointer-events inheritance issues */
    pointer-events: auto;

    /* Support for custom properties from JavaScript */
    width: var(--modal-width, 100%);
    max-width: var(--modal-max-width, var(--modal-max-width-medium));
}

/* NEW: Data-attribute based state management for modal containers */
.modal-system-overlay[data-modal-state="visible"] .modal-system-container {
    transform: scale(1);
}

.modal-system-overlay[data-modal-state="hiding"] .modal-system-container {
    transform: scale(0.9);
}

/* Modal Size Variants */
.modal-system-container.size-small {
    max-width: var(--modal-max-width-small);
    width: 100%;
}

.modal-system-container.size-medium {
    max-width: var(--modal-max-width-medium);
    width: 100%;
}

.modal-system-container.size-large {
    max-width: var(--modal-max-width-large);
    width: 100%;
}

.modal-system-container.size-fullscreen {
    width: 95vw;
    height: 95vh;
    max-width: none;
    max-height: 95vh;
    overflow: hidden; /* Fullscreen: container NEVER scrolls - .content-modal-wrapper handles all scrolling */
}

/* Ensure fullscreen modal content area fills available space */
.modal-system-container.size-fullscreen .modal-system-content {
    flex: 1 1 auto;
    min-height: 0; /* Critical for flex child to shrink */
    overflow: hidden; /* Fullscreen: content area NEVER scrolls - .content-modal-wrapper handles scrolling */
}

/* Content wrapper inside modal - this is the actual scrollable container for fullscreen modals */
.modal-system-container.size-fullscreen .content-modal-wrapper {
    height: 100%;
    overflow-y: auto; /* Fullscreen: wrapper is the ONLY scroll container - prevents mobile scroll conflicts */
    overscroll-behavior: contain; /* Prevents scroll chaining to parent elements */
}

/* Modal Header */
.modal-system-header {
    flex-shrink: 0; /* Prevent header from being compressed on mobile */
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    border-bottom: 1px solid var(--light-border);
    background-color: var(--light-bg);
    border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.modal-system-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-align: center;
    color: var(--text-color);
    padding-inline: 2rem;
    transition: color 0.3s ease;
}

/* Modal Content Area */
.modal-system-content {
    flex: 1 1 auto;
    padding: var(--spacing-lg);
    overflow: auto; /* Standard modals: content area can scroll. Fullscreen: overridden to 'hidden' */
    color: var(--text-color);
    transition: color 0.3s ease;
    text-align: center;
    line-height: 1.5;
}

/*
 * Content Modal Wrapper
 *
 * IMPORTANT: This wrapper is created by ContentModalComponent.mjs and sits between
 * .modal-system-content and the actual modal content (forms, text, etc.).
 *
 * Purpose:
 * - Provides a scrollable container for modal content
 * - Allows fine-grained control over padding and overflow behavior
 * - Enables different scroll behavior for different modal sizes
 *
 * DOM Structure:
 * .modal-system-overlay
 *   └── .modal-system-container
 *         ├── .modal-system-header (flex-shrink: 0)
 *         └── .modal-system-content (flex: 1, may have overflow)
 *               └── .content-modal-wrapper ← THIS ELEMENT
 *                     └── actual content (HTML string or elements)
 *
 * Note: This wrapper can be configured via ContentModalComponent options:
 * - scrollable: true/false - controls overflow behavior
 * - padding: true/false - controls default padding
 */
.content-modal-wrapper {
    /* Default: inherit overflow from parent .modal-system-content */

    /* Can be overridden to 'hidden' via JavaScript for specific use cases */
    width: 100%;
    height: 100%;
}

.content-modal-wrapper--no-scroll {
    overflow: hidden;
}

.content-modal-wrapper--no-padding {
    padding: 0;
}

.content-modal-wrapper li {
    margin-bottom: 0.6em;
}

/* Modal Footer */
.modal-system-footer {
    flex-shrink: 0; /* Prevent footer from being compressed on mobile */
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--light-border);
    background-color: var(--light-bg);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Modal Close Button */
.modal-system-close {
    position: absolute;
    top: var(--spacing-sm);
    inset-inline-end: var(--spacing-sm);
    background: none;
    border: 1px solid transparent;
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;

    /* PAT-010 exempt: z-index: 1 is a relative stacking value, not a named layer */
    z-index: 1;

    /* Mobile touch target: minimum 44x44px */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-system-close:hover,
.modal-system-close:active {
    color: var(--color-neutral);
    background-color: rgb(0 0 0 / 10%);
    border-color: var(--light-border);
}

.modal-system-close:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

[data-theme="dark"] .modal-system-close:hover,
[data-theme="dark"] .modal-system-close:active {
    color: var(--color-neutral-light);
    background-color: rgb(255 255 255 / 10%);
}

/* Body class when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Mobile Responsive Styles */
@media (width <= 768px) {
    .modal-system-overlay {
        padding: var(--spacing-sm);

        /* Use more screen space on mobile */
        align-items: flex-start;
        padding-top: 5vh;
    }

    .modal-system-container:not(.size-fullscreen) {
        width: calc(100vw - 16px);
        max-width: none;
        margin: 0;

        /* Better mobile positioning */
        max-height: 90vh;
        position: relative;
        top: auto;
        inset-inline-start: auto;
        transform: none;
    }

    .modal-system-container.size-fullscreen {
        width: 100vw;

        /* Use custom property for device-specific viewport adjustments */
        height: var(--modal-fullscreen-height-mobile);
        border-radius: 0;
        max-height: var(--modal-fullscreen-height-mobile);
        overflow: hidden; /* Prevent modal container scroll, content area handles scrolling */

        /* Safe area padding is included in the custom property calculation */
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-sizing: border-box;
    }

    /* Fix positioning for fullscreen modals - align to top to maximize space */
    .modal-system-overlay:has(.modal-system-container.size-fullscreen) {
        padding-top: 0;
        align-items: flex-start; /* Start at top to avoid wasting space */
    }

    .modal-system-header,
    .modal-system-content,
    .modal-system-footer {
        padding: var(--spacing-md);
    }

    .modal-system-title {
        font-size: var(--font-size-md);
    }
}

/* Small screen adjustments */
@media (width <= 480px) {
    .modal-system-overlay {
        padding: var(--spacing-xs);
        padding-top: 2vh;
    }

    .modal-system-container:not(.size-fullscreen) {
        width: calc(100vw - 8px);
        max-height: 95vh;
    }

    .modal-system-header,
    .modal-system-content,
    .modal-system-footer {
        padding: var(--spacing-sm);
    }

    .modal-system-footer {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .modal-system-footer .btn {
        width: 100%;
        min-height: 44px;

        /* Ensure touch targets */
    }
}

/* Mobile landscape - browser chrome takes more vertical space proportionally */
@media (width <= 915px) and (orientation: landscape) {
    .modal-system-container.size-fullscreen {
        /* Landscape uses different offset for nav bar + browser chrome */
        height: var(--modal-fullscreen-height-mobile-landscape);
        max-height: var(--modal-fullscreen-height-mobile-landscape);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modal-system-container {
        border: 2px solid var(--text-color);
    }

    .modal-system-header,
    .modal-system-footer {
        border-color: var(--text-color);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .modal-system-overlay,
    .modal-system-container {
        transition: none;
    }
}

/* Focus management for accessibility */

/* Modal is announced to screen readers via aria-modal="true" attribute */

/* Dialog-specific styles */
.modal-system-container.modal-dialog {
    max-width: var(--modal-max-width-small);
}

.modal-system-container.modal-dialog .modal-system-content {
    flex: 0 0 auto;
}

.modal-system-container.modal-dialog .modal-system-content .dialog-message {
    color: var(--color-neutral);
    line-height: 1.6;
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .modal-system-container.modal-dialog .modal-system-content .dialog-message {
    color: var(--color-neutral-light);
}

.modal-system-container.modal-dialog .modal-system-footer {
    /* Match original prompt-button-container styling */
    justify-content: center;
    background-color: transparent;
    border-top: none;
    padding: var(--spacing-md);
    border-radius: 0;
    display: flex;
    gap: var(--spacing-md);
}

/* Ensure dialog buttons have consistent minimum width */
.modal-system-container.modal-dialog .modal-system-footer .btn {
    min-width: 120px;
}

/* Success dialog variant - visual indicator for success states */
.modal-system-container.modal-dialog.dialog-success .modal-system-header {
    background-color: var(--color-success-light);
    border-bottom-color: var(--color-success);
}

.modal-system-container.modal-dialog.dialog-success .modal-system-title::before {
    content: '✓ ';
    color: var(--color-success);
    font-weight: 700;
    margin-inline-end: var(--spacing-xs);
}

/* Dark mode support for success variant */
[data-theme="dark"] .modal-system-container.modal-dialog.dialog-success .modal-system-header {
    background-color: var(--success-bg);
    border-bottom-color: var(--success-border);
}

[data-theme="dark"] .modal-system-container.modal-dialog.dialog-success .modal-system-title::before {
    color: var(--success-text);
}

/* Modal Dialog Content Wrapper - Extracted from modalSystemAPI.mjs */

/* These styles support dialog content layout with icons and messages */
.dialog-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.dialog-icon {
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--border-radius-full);
    margin-bottom: 0.5rem;
}

/* Dialog icon color variants (PAT-009 compliant) */
.dialog-icon[data-icon-type="success"] {
    color: var(--color-success, #28a745);
}

.dialog-icon[data-icon-type="warning"] {
    color: var(--color-warning, #ffc107);
}

.dialog-icon[data-icon-type="error"] {
    color: var(--color-error, #dc3545);
}

.dialog-icon[data-icon-type="question"],
.dialog-icon[data-icon-type="info"] {
    color: var(--color-info, #17a2b8);
}

.dialog-message {
    line-height: 1.5;
    color: var(--text-color);
    text-align: start;
}

/* ================================================
   END UNIFIED MODAL SYSTEM STYLES
   ================================================ */

/* NOTE: Assessment recommendation overlay styles are in page-styles.css */

/* Screen reader only utility - hides content visually but keeps it accessible */
.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Generic form input field spacing */
.form-input-field {
    margin: var(--spacing-xs);
}

/* Breadcrumb separator */
.breadcrumb-separator {
    color: var(--secondary-text-color, #888);
}

/* Question response styling */
.correct-answer {
    color: var(--color-success);
}

.incorrect-answer {
    color: var(--color-danger);
}

/* ================================================
   STANDARDIZED DATA-ATTRIBUTE STATE MANAGEMENT
   ================================================ */

/*
 * Modern CSS state management using data attributes instead of CSS classes.
 * This approach separates concerns: CSS owns display values, JavaScript controls state.
 * Follows CSS conformance standards for maintainable, scalable UI state management.
 *
 * Usage:
 * JavaScript: element.dataset.display = 'false'; // Hide element
 * JavaScript: delete element.dataset.display;    // Show element (uses natural CSS display)
 * JavaScript: element.dataset.visible = 'false'; // Hide with visibility
 * JavaScript: delete element.dataset.visible;    // Show with visibility
 */

 /* Modern data-attribute state management */
[data-visible='false'] {
    visibility: hidden !important;
}

[data-display='false'] {
    display: none !important;
}

/* Use data-visible='false' for visibility: hidden */

/* Use data-display='false' for display: none */

/* Opacity state management - for fade effects */
[data-opacity="false"] {
    opacity: 0 !important;
}

/* Combined visibility and pointer events - for interactive hiding */
[data-interactive="false"] {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Modal-specific data-attribute state management */
[data-modal-state="hidden"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

[data-modal-state="visible"] {
    opacity: 1 !important;
    visibility: visible !important;
}

[data-modal-state="hiding"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Transform-based hiding for animations */
[data-transform-state="hidden"] {
    transform: scale(0.9) !important;
}

[data-transform-state="visible"] {
    transform: scale(1) !important;
}

/* ================================================
   END STANDARDIZED DATA-ATTRIBUTE STATE MANAGEMENT
   ================================================ */

.confetti-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: var(--border-radius-full);
    pointer-events: none;
    z-index: var(--z-supreme);
    opacity: 0;

    /* Dynamic properties set via CSS custom properties */
    background-color: var(--confetti-color, #f00);
    left: var(--confetti-x, 0);
    top: var(--confetti-y, 0);
    animation-name: var(--confetti-animation-name, confettiAnimation);
    animation-duration: var(--confetti-duration, 1000ms);
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes confettiAnimation {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(var(--x), var(--y)) rotate(720deg);
        opacity: 0;
    }
}

.hotspot {
    cursor: pointer;
    position: absolute;
    border: 2px solid var(--color-danger);
    background-color: var(--color-danger);
    box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
}

/* ================================================
   QUESTION COMPONENT STYLES
   ================================================ */

/* Question Container */
.question-main-container {
    width: 100%;
    max-width: var(--question-content-width);
    margin: 0 auto;
    padding: clamp(var(--question-spacing-xs), 2vw, var(--question-spacing-md));
    color: var(--text-color);
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* Question Section */
.question-section {
    margin-top: var(--question-spacing-md);
    margin-bottom: var(--question-spacing-md);
}

.question-text {
    font-size: var(--question-font-size-md);
    margin-bottom: var(--question-spacing-md);
    transition: font-size 0.3s ease;
}

/* Answer Section */
.answer-section {
    display: flex;
    flex-direction: column;
    gap: var(--question-spacing-sm);
    margin-bottom: var(--question-spacing-md);
    width: 100%;
}

.answer-option {
    display: flex;
    align-items: center;
    padding: var(--question-spacing-sm) var(--question-spacing-md);
    border-radius: var(--question-border-radius);
    transition: background-color 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--light-border);
}

/* Ensure radio-pair container displays inline to keep radio and label on same line */
.answer-option .radio-pair {
    display: inline-flex;
    align-items: center;
    width: 100%;
    gap: var(--question-spacing-md);
}

.answer-option:hover {
    background-color: var(--question-option-hover);
}

.answer-option[selected="selected"] {
    background-color: var(--question-option-selected);
    border-color: var(--button-primary);
}

.answer-option .radio-pair input[type="radio"] {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.answer-option .radio-pair label {
    cursor: pointer;
    font-size: var(--question-font-size-sm);
    flex: 1;
    margin: 0;
}

/* Response Section */
.response-section {
    min-height: var(--question-response-min-height);
    margin-bottom: var(--question-spacing-md);
    width: 100%;
}

.response-text {
    padding: var(--question-spacing-sm) 0;
    font-size: var(--question-font-size-sm);
    font-weight: bold;
}

/* Image Handling */
.question-image-wrapper {
    margin-bottom: var(--question-spacing-md);
    display: flex;
    justify-content: center;
    width: 100%;
}

.question-image-wrapper img {
    max-width: 100%;
    max-height: 50vh;
    object-fit: contain;
    border-radius: var(--question-border-radius);
    aspect-ratio: auto;
    content-visibility: auto;
    contain-intrinsic-size: auto 6.25rem;
}

/* Scaled question page specific styling */
[data-scaled="true"] .answer-option {
    padding: 0.75rem 0.5rem;
}

[data-scaled="true"] .answer-option input[type="radio"] {
    transform: scale(1.2);
    margin-inline-end: 1rem;
}

[data-scale-factor] .question-text {
    font-size: calc(1rem / var(--scale-factor, 1));
    margin-bottom: calc(1.5rem / var(--scale-factor, 1));
}

[data-scale-factor] .answer-option {
    padding: calc(0.5rem / var(--scale-factor, 1));
}

[data-scale-factor] .answer-option input[type="radio"] {
    transform: scale(calc(1.2 / var(--scale-factor, 1)));
    margin-inline-end: calc(0.75rem / var(--scale-factor, 1));
}

/* Question error message */
.question-error-message {
    padding: var(--question-spacing-md);
    margin: var(--question-spacing-md) 0;
    background-color: rgb(220 53 69 / 10%);
    border: 1px solid var(--color-danger);
    border-radius: var(--question-border-radius);
    color: var(--color-danger);
}

/* Responsive Adjustments */
@media (width <= 576px) {
    .question-text {
        font-size: var(--question-font-size-sm);
    }

    .answer-option {
        padding: calc(var(--question-spacing-sm) * 0.75) var(--question-spacing-sm);
    }
}

/* Very small screens */
@media (width <= 350px), (height <= 450px) {
    .question-main-container {
        padding: calc(var(--question-spacing-xs) * 0.5);
    }

    .answer-option {
        padding: var(--question-spacing-xs);
    }
}

/* Media query for wide but short screens */
@media (width >= 768px) and (height <= 600px) {
    .question-image-wrapper {
        float: left;
        width: 40%;
        margin-right: var(--question-spacing-md);
    }

    .question-section,
    .answer-section,
    .response-section {
        width: calc(60% - var(--question-spacing-md));
        float: right;
        clear: right;
    }
}

/* Dark mode image handling */
[data-theme="dark"] .question-image-wrapper img:not([data-native-dark="true"], [data-no-invert="true"]) {
    filter: invert(1) hue-rotate(180deg);
}

[data-theme="light"] .question-image-wrapper img[data-native-dark="true"],
:root:not([data-theme]) .question-image-wrapper img[data-native-dark="true"] {
    filter: invert(1) hue-rotate(180deg);
}

/* Images with data-no-invert should never be inverted in any theme */

/* The dark mode invert rule already excludes these via :not([data-no-invert="true"]) */
.question-image-wrapper img[data-no-invert="true"] {
    filter: none;
}

/* ================================================
   END QUESTION COMPONENT STYLES
   ================================================ */

/* Make sure the buttons remain clickable at all scales */
.viewport-scaler-wrapper .answer-option {
    position: relative;

    /* PAT-010 exempt: z-index: 5 is a relative stacking value, not a named layer */
    z-index: 5;
}

/* ViewportScaler styles */
.viewport-scaler-wrapper {
    transform-origin: top left;
    width: 100%;
    position: relative;
    overflow: visible;
}

.viewport-scaler-wrapper * {
    max-height: none !important;
}

/* Prevent unnecessary whitespace */
.viewport-scaler-wrapper #main-container {
    margin-bottom: 0;
}

.viewport-scaler-wrapper #main-container button {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Make sure continue button doesn't add extra height */
.viewport-scaler-wrapper .btn {
    margin-bottom: 5px;
}

/* Dark Mode Toggle in Header Styles */
#top-header-container .theme-switch-wrapper {
    margin: 0;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

#top-header-container .toggle-label {
    margin-inline-start: 0.625rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-inverse);

    /* Always white for visibility against dark header */
    white-space: nowrap;
}

#top-header-container .theme-switch {
    display: inline-block;
    height: 1.5rem;
    position: relative;
    width: 3rem;
    margin: 0 var(--spacing-sm);
    vertical-align: middle;
}

#top-header-container .theme-switch input {
    display: none;
}

#top-header-container .slider {
    background-color: var(--color-neutral);
    inset: 0;
    cursor: pointer;
    position: absolute;
    transition: .4s;
    border-radius: var(--border-radius-pill);
}

#top-header-container .slider::before {
    background-color: var(--color-text-inverse);
    bottom: 0.25rem;
    content: "";
    height: 1rem;
    inset-inline-start: 0.25rem;
    position: absolute;
    transition: .4s;
    width: 1rem;
    border-radius: var(--border-radius-full);
}

#top-header-container input:checked+.slider::before {
    transform: translateX(1.5rem);
}

/* Apply theme colors to main content areas */
[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] #content-container {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] #sidebar {
    background-color: var(--color-neutral-dark);
}

/* hover color for sidebar item */
[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--color-surface-darkest);
}

/* Disable hover effect for sidebar menu items in dark mode - use keyboard-selected instead */
[data-theme="dark"] #sidebar .dropdown-item:hover {
    background-color: transparent;
}

/* keyboard selection for sidebar item in dark mode */
[data-theme="dark"] .dropdown-item.keyboard-selected {
    background-color: var(--color-surface-darkest);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Make sure images display correctly in dark mode */
[data-theme="dark"] img:not([data-native-dark="true"], [data-no-invert="true"]) {
    filter: invert(1) hue-rotate(180deg);
}

/* Images with data-no-invert should never be inverted in any theme */

/* The dark mode invert rule already excludes these via :not([data-no-invert="true"]) */
img[data-no-invert="true"] {
    filter: none;
}

/* Override dark mode image inversion for modal images (specificity matches invert rule, wins by source order) */
[data-theme="dark"] .modal-image-container img.modal-image {
    filter: none;
}

/* Ensure theme colors are applied to rendered content */
[data-theme="dark"] #core-page-container {
    color: var(--text-color, #e0e0e0);
    background-color: var(--bg-color, #222);
}

/* Make sure all text in the rendered content gets proper colors,
   EXCEPT elements that are explicitly exempted */
[data-theme="dark"] #core-page-container *:not([data-dark-mode-exempt="true"]) {
    color: var(--text-color, #e0e0e0);
}

/* For specific elements that need explicit styling,
   also excluding exempted elements */
[data-theme="dark"] #core-page-container h1:not([data-dark-mode-exempt="true"]),
[data-theme="dark"] #core-page-container p:not([data-dark-mode-exempt="true"]),
[data-theme="dark"] #core-page-container li:not([data-dark-mode-exempt="true"]) {
    color: var(--text-color, #e0e0e0);
}

/* Ensure links and link-styled buttons maintain proper color in dark mode */
[data-theme="dark"] #core-page-container a:not([data-dark-mode-exempt="true"]),
[data-theme="dark"] #core-page-container .btn-link:not([data-dark-mode-exempt="true"]) {
    color: var(--link-color);
}

[data-theme="dark"] #core-page-container a:hover,
[data-theme="dark"] #core-page-container .btn-link:hover {
    color: var(--button-primary-hover);
}

[data-theme="light"] img[data-native-dark="true"],
:root:not([data-theme]) img[data-native-dark="true"] {
    filter: invert(1) hue-rotate(180deg);
}

/* Wall UI Specific Styles */

/* Wall container styles */
.wall {
    box-sizing: border-box;
}

.category-instructions {
    margin: var(--spacing-xs);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--text-color-secondary, var(--text-color));
    text-align: left;
}

/* Wall sphere styling improvements */
.category-sphere-interactive {
    cursor: pointer;
    pointer-events: auto;
    margin: 0;
}

.category-sphere-icon-mode {
    border: none;
}

.category-block-overflow-visible {
    overflow: visible !important;
}

.category-full-mode {
    width: fit-content;
    max-width: min(500px, calc(100vw - 2 * var(--spacing-lg)));

    /* Ensure category fits within viewport */
    text-align: center;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-md) auto;

    /* Add vertical margin and center horizontally */
    padding: var(--spacing-sm);
    position: relative;

    /* Ensure proper positioning context */
    overflow: visible;
}

/* Sphere color classes - using background colors from original inline styles */
.sphere-red {
    background-color: var(--color-danger-light);
}

.sphere-green {
    background-color: var(--color-success-light);
}

.sphere-yellow {
    background-color: var(--color-warning-light);
}

/* Wall items hover behavior */
.category-item-hover {
    color: var(--color-accent);

    /* Orange color for hover state */
}

/* Status sphere — base definition (consolidated from page-styles.css) */
.status-sphere {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-full);
    margin: 0 var(--spacing-xs);
    font-weight: bold;
    font-family: system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at 30% 30%, var(--sphere-color-light, #f0f0f0), var(--sphere-color-dark, #e0e0e0));
    box-shadow: 0 calc(var(--sphere-size, 24px) / 12) calc(var(--sphere-size, 24px) / 6) rgb(0 0 0 / 20%);
    color: var(--sphere-text-color, var(--text-color));
    transition: all var(--transition-speed) ease;
}

/* Prevent spheres and blocks from inheriting hover color */
.list-sphere.category-item-hover,
.list-block-item.category-item-hover,
.status-sphere.category-item-hover {
    color: var(--sphere-text-color, var(--text-color));
}

/* Recent item indicators */
.recent-item {
    color: var(--color-danger);
}

/* Dark mode: match specificity of broad [data-theme="dark"] #core-page-container * rule */
[data-theme="dark"] #core-page-container .recent-item {
    color: var(--color-danger);
}

.recent-indicator {
    font-size: var(--font-size-xs);
    color: var(--focus-color);
    font-style: italic;
    margin: 0 var(--spacing-xs) var(--spacing-xs) var(--spacing-xs);
}

/* Recent sphere indicator */
.recent-sphere {
    position: relative;
}

.recent-sphere::after {
    content: '';
    position: absolute;
    top: -2px;

    /* Reduced from -4px to prevent header overlap */
    right: -2px;

    /* Reduced from -4px to stay within bounds */
    width: 6px;

    /* Slightly smaller to fit better */
    height: 6px;

    /* Slightly smaller to fit better */
    background-color: var(--color-danger);
    border-radius: var(--border-radius-full);
    border: 1px solid var(--bg-color);

    /* Add white border for better visibility */

    /* PAT-010 exempt: z-index: 10 is a relative stacking value, not a named layer */
    z-index: 10;

    /* Ensure it appears above other elements */

    /*  animation: pulse 2s infinite; */
}

/* Pulse animation for recent indicator */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(255 0 0 / 70%);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgb(255 0 0 / 0%);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(255 0 0 / 0%);
    }
}

/* Dark mode support for recent sphere indicator */
[data-theme="dark"] .recent-sphere::after {
    background-color: var(--color-danger);
    box-shadow: 0 0 0 0 rgb(255 85 85 / 70%);
}

/* Activity rows styling */
.act-row {
    margin: var(--spacing-xs) var(--spacing-xs) 0 0;
    display: flex;
}

.act-row-left {
    display: inline-block;
    width: 45px;
    height: 19px;
}

.act-row-right {
    display: inline-block;
    max-width: 75%;
    vertical-align: top;
}

/* List block items - consolidated with modern definition at line ~4297 */

/* List sphere container */
.list-sphere-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* List title styling */
.list-title {
    margin-inline-end: var(--spacing-sm);
}

/* Wall block items */
.category-block-item {
    overflow: visible; /* Allow recent sphere indicators to show */
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    transition: color 0.2s ease;
}

.category-block-item.small-text {
    font-size: var(--font-size-xs);

    /* Increased from 8px for accessibility */
}

.category-block-item.medium-text {
    font-size: var(--font-size-sm);

    /* Increased from 10px for accessibility */
}

/* Wall sphere items */
.category-sphere {
    transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Highlight category sphere when hovering over associated actRow item */
[data-category-element='item'].category-item-hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--focus-color);

    /* PAT-010 exempt: z-index: 10 is a relative stacking value, not a named layer */
    z-index: 10;
}

/* Wall row styling to prevent overflow */
.wall [row-id] {
    overflow: visible;

    /* Allow recent indicators to show */
    width: 100%;
    max-width: 100%;

    /* Prevent row overflow */
}

/* Wall block row styling */
.wall [block-row] {
    overflow: visible;

    /* Allow recent indicators to show */
    flex-wrap: wrap;

    /* Allow wrapping for many activities */
    gap: var(--spacing-xs);

    /* Add consistent spacing between activities */
}

/* Mini mode category styling */
.category-mini-mode {
    overflow: visible; /* Always allow indicators to show in mini modes */
    max-width: 100%; /* Prevent container overflow */
    margin: var(--spacing-xs) auto; /* Ensure proper centering and spacing */
}

/* Icon mode category styling */
.category-icon-mode {
    overflow: visible; /* Always allow indicators to show in mini modes */
    max-width: 100%; /* Prevent container overflow */
    margin: var(--spacing-xs) auto var(--spacing-sm) auto; /* Extra bottom margin for touch hints */
}

/* Remove gap spacing for mini and icon modes to restore original tight layout */
.category-mini-mode [block-row],
.category-icon-mode [block-row] {
    gap: 0;

    /* Remove gap to match original layout */
}

/* Mobile adjustments for category components */
@media (width <= 768px) {
    .category-full-mode {
        max-width: calc(100vw - 2 * var(--spacing-md));

        /* More conservative width on mobile */
        margin: var(--spacing-sm) auto;

        /* Smaller vertical margins on mobile */
    }
}

/* Connected items hover behavior using data attributes */
[data-category-item-id]:hover,
[data-category-item-id]:hover~[data-category-item-id],
[data-category-item-id]:hover+[data-category-item-id] {
    color: var(--color-accent);
}

/* Support for dark mode */
[data-theme="dark"] .category-full-mode {
    border-color: var(--header-bg);
}

/* Scoped to #core-page-container to match specificity of broad [data-theme="dark"] #core-page-container * rule */
[data-theme="dark"] #core-page-container .category-item-hover {
    color: var(--color-accent);

    /* Brighter orange for dark mode */
}

/* Prevent spheres and blocks from inheriting hover color in dark mode */
[data-theme="dark"] #core-page-container .list-sphere.category-item-hover,
[data-theme="dark"] #core-page-container .list-block-item.category-item-hover,
[data-theme="dark"] #core-page-container .status-sphere.category-item-hover {
    color: var(--sphere-text-color, var(--text-color));
}

[data-theme="dark"] .list-block-item {
    border-color: var(--header-bg);
}

/* Ensure active state is distinguishable in dark mode */
[data-theme="dark"] .sphere-red {
    background-color: var(--color-danger);
}

[data-theme="dark"] .sphere-green {
    background-color: var(--color-success);
}

[data-theme="dark"] .sphere-yellow {
    background-color: var(--color-warning);
}

/* Accessibility improvements */
:focus {
    outline: 0.125rem solid var(--focus-color);
    outline-offset: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Activity title styles */
.activity-title {
    cursor: pointer;
    transition: color 0.2s ease;
    margin: 0 var(--spacing-xs);
    font-weight: normal;
    flex-grow: 1;
}

.activity-title:hover,
.activity-title.category-item-hover {
    color: var(--color-accent);

    /* Orange color for hover state */
    text-decoration: underline;
}

/* Ensure dark mode compatibility */
[data-theme="dark"] .activity-title:hover,
[data-theme="dark"] .activity-title.category-item-hover {
    color: var(--color-accent-light);

    /* Lighter orange for dark mode */
}

/* Account modal content - remove positioning conflicts */
.account-modal-content {
    position: static !important;
    transform: none !important;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* Hotspot modal content - enable proper scrolling */
.hotspot-modal-content {
    width: 100%;
    max-height: 70vh;
    overflow: hidden auto;
    padding: var(--spacing-lg);

    /* Remove positioning conflicts */
    position: static !important;
    transform: none !important;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Ensure hotspot images don't break layout */
.hotspot-modal-content .hotspot-image-container {
    margin-bottom: 1rem;
    text-align: center;
}

.hotspot-modal-content .hotspot-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Hotspot text content styling */
.hotspot-modal-content .hotspot-text-content {
    margin-top: 1rem;
    line-height: 1.5;
}

/* Custom scrollbar for hotspot modal content */
.hotspot-modal-content::-webkit-scrollbar {
    width: 8px;
}

.hotspot-modal-content::-webkit-scrollbar-track {
    background: var(--light-bg);
    border-radius: var(--border-radius-sm);
}

.hotspot-modal-content::-webkit-scrollbar-thumb {
    background: var(--list-marker-color);
    border-radius: var(--border-radius-sm);
}

.hotspot-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-color);
}

/* BREADCRUMB COMPONENT STYLES */
.breadcrumb-container {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--light-border);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--text-color);
}

.breadcrumb-item:not(:last-child)::after {
    content: "›";
    margin-inline: var(--spacing-xs) var(--spacing-xs);
    color: var(--text-color);
    opacity: 0.6;
    font-size: var(--font-size-md);
}

.breadcrumb-link {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.breadcrumb-current {
    font-weight: bold;
    color: var(--text-color);
    padding: var(--spacing-xs) var(--spacing-xs);
}

/* Dark theme adjustments */
[data-theme="dark"] .breadcrumb-container {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .breadcrumb-item {
    color: var(--text-color);
}

/* Responsive design */
@media (width <= 768px) {
    .breadcrumb-container {
        padding: var(--spacing-sm);
    }

    .breadcrumb-list {
        font-size: var(--font-size-xs);
    }

    .breadcrumb-link,
    .breadcrumb-current {
        padding: var(--spacing-xs);
    }
}

/* ===== CONTEXT MENU COMPONENT ===== */

/* Used by contextMenuComponentMod — general component, not admin-only */
.breadcrumb-context-menu,
.context-menu {
    position: absolute;
    left: var(--context-menu-left, 0);
    top: var(--context-menu-top, 0);
    background: var(--bg-color, #fff);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    overflow: hidden;
    min-width: 200px;
    z-index: 10000;
}

.context-menu-content {
    padding: 4px 0;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color var(--transition-speed, 0.2s);
    color: var(--text-color, #333);
    font-size: var(--font-size-sm, 14px);
}

.context-menu-item:hover {
    background-color: var(--button-secondary-hover, #e2e6ea);
}

.context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background-color: transparent;
}

.menu-icon {
    width: 16px;
    text-align: center;
    font-size: var(--font-size-sm);
    line-height: 1;
}

.menu-text {
    flex: 1;
}

[data-theme="dark"] .context-menu,
[data-theme="dark"] .breadcrumb-context-menu {
    background: var(--bg-color);
    border-color: var(--light-border);
    box-shadow: 0 4px 12px rgb(0 0 0 / 50%);
}

[data-theme="dark"] .context-menu-item {
    color: var(--text-color);
}

[data-theme="dark"] .context-menu-item:hover {
    background-color: rgb(255 255 255 / 10%);
}

/* ===== HIDDEN OBJECT VISUAL INDICATORS ===== */

/* Visual styling for content objects marked as hidden from standard users */

/* Hidden status tooltips */
.hidden-status-tooltip {
    position: relative;
    cursor: help;
}

.hidden-status-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-color);
    color: var(--bg-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed), visibility var(--transition-speed);
    z-index: var(--z-overlay);
}

.hidden-status-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ===== NAVIGATION HISTORY STYLES ===== */

/* Base styles for history button */
.nav-history-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2rem, 32px);
    height: clamp(28px, 2rem, 32px);
    border-radius: var(--border-radius-full);
    background: transparent;
    padding: 0;
    color: var(--color-text-inverse);
    cursor: pointer;
    margin: 0 var(--spacing-sm);
    transition: background-color var(--transition-speed) ease;
    position: relative;
}

.nav-history-button:hover {
    background-color: rgb(255 255 255 / 10%);
}

.nav-history-button svg {
    width: clamp(18px, 1.5rem, 22px);
    height: clamp(18px, 1.5rem, 22px);
    fill: var(--color-text-inverse);

    /* White for dark header */
}

/* Tooltip styling */
.nav-tooltip {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(0 0 0 / 80%);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    z-index: var(--z-toast);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed), visibility var(--transition-speed);
    pointer-events: none;
}

.nav-tooltip.tooltip-visible {
    opacity: 1;
    visibility: visible;
}

.nav-history-button:hover .nav-tooltip {
    opacity: 1;
    visibility: visible;
}

/* History popup (triggered by back button hover) */
.nav-history-popup {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--spacing-sm);
    width: clamp(220px, 30vw, 250px);
    max-height: clamp(250px, 40vh, 300px);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    z-index: var(--z-dropdown);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .nav-history-popup {
    background-color: var(--light-bg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}

.nav-history-popup-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
    border-bottom: 1px solid var(--light-border);
}

.nav-history-empty {
    padding: var(--spacing-lg) var(--spacing-lg);
    text-align: center;
    font-style: italic;
    color: var(--text-color);
    opacity: 0.6;
}

/* History panel (full screen) */
.nav-history-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(280px, 40vw, 350px);
    background-color: var(--bg-color);
    box-shadow: -2px 0 10px rgb(0 0 0 / 15%);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-inline-start: 1px solid var(--light-border);
}

.nav-history-panel.panel-visible {
    transform: translateX(0);
}

/* Navigation history panel visibility via data attributes */

/* Panel sliding is controlled by adding/removing 'panel-visible' class */

[data-theme="dark"] .nav-history-panel {
    background-color: var(--light-bg);
    box-shadow: -2px 0 10px rgb(0 0 0 / 30%);
}

.nav-history-panel-overlay {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 50%);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-history-panel-overlay.overlay-visible {
    opacity: 1;
    visibility: visible;
}

/* Navigation history panel overlay visibility via data attributes */

.nav-history-panel-header {
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--light-border);
}

.nav-history-panel-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-history-panel-title {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--text-color);
}

.nav-history-panel-close {
    background: none;
    border: none;
    font-size: clamp(18px, 1.5rem, 22px);
    color: var(--text-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed);
    width: 44px;
    height: 44px;
}

.nav-history-panel-close:hover {
    background-color: var(--light-bg);
}

.nav-history-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* History panel items */
.nav-history-panel-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    transition: background-color var(--transition-speed);
    text-decoration: none;
    color: inherit;
}

.nav-history-panel-item:hover {
    background-color: var(--light-bg);
}

.nav-history-panel-item:last-child {
    border-bottom: none;
}

.nav-history-panel-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    flex-shrink: 0;
}

.nav-history-panel-item-icon.activity {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-icon.lesson {
    background-color: var(--color-warning);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-icon.category {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-icon.metacat {
    background-color: var(--primary-color);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-icon.quiz,
.nav-history-panel-item-icon.quiz-item {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-details {
    flex: 1;
    min-width: 0;
}

/* Make history panel titles look like standard links */
.nav-history-panel-item-title {
    font-size: var(--font-size-md);
    color: var(--link-color);
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-decoration: none;
    transition: color var(--transition-speed), text-decoration var(--transition-speed);
}

.nav-history-panel-item-time {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.6;
}

.nav-history-panel-item:hover .nav-history-panel-item-title {
    color: var(--focus-hover);
    text-decoration: underline;
}

/* Responsive adjustments */
@media (width <= 768px) {
    .nav-history-panel {
        width: calc(100vw - 16px);
        max-width: 280px;
    }
}

/* ===== PAGE SUBHEADER STYLES ===== */

/* Page Subheader */
.page-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: clamp(65px, 8vh, 75px);
    flex-wrap: nowrap;
    font-size: clamp(0.5rem, 3vw, 1rem);
    position: relative;

    /* Ensure proper positioning context */
}

/* Context group (left side) */
.context-group {
    display: flex;
    align-items: center;
    margin-inline-end: var(--spacing-md);
    min-width: 0;
    flex: 1;
    overflow: hidden;
    position: relative;

    /* Proper positioning context for absolute children */

    /* Ensure path doesn't get pushed off-screen */
    flex-shrink: 1;
}

/* Current activity highlight */
.current-activity {
    position: relative;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;

    /* PAT-010 exempt: z-index: 10 is a relative stacking value, not a named layer */
    z-index: 10;
}

/* Path display */
.path-display {
    display: flex;
    align-items: center;
    margin-inline-start: var(--spacing-sm);

    /* Allow content to use available space without hiding */
    min-width: 0;
    flex: 1;
    flex-shrink: 1;
}

.path-separator {
    /* Reduced margin at narrow widths via responsive rules */
    margin: 0 var(--spacing-sm);
    color: var(--text-color);
    opacity: 0.6;
    flex-shrink: 0;
}

.title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    max-width: clamp(300px, 50vw, 500px);
    min-width: 0;
    flex: 1;
}

/* Navigation group (right side) */
.navigation-group {
    display: flex;
    align-items: center;
    margin-inline-start: auto;

    /* margin-inline-start: 0; Remove auto margin since actions-button-container handles it */
    flex-shrink: 0;
    white-space: nowrap;
}

.page-indicator {
    margin: 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
    white-space: nowrap;
}

/* Context title clickable */
.context-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(80px, 15vw, 120px);
    flex-shrink: 0;
}

/* Enhanced category interaction styles */
.category-container-icon-mode {
    position: relative;
    display: inline-flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    transform-origin: left top;
    overflow: visible;
}

/* Wall container flexbox layout */
.category-with-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);

    /* Reduce padding when expanded */
}

/* Reduced spacing when expanded */
.category-container-icon-mode.expanded .category-with-button,
.category-container-icon-mode:hover .category-with-button {
    gap: 0;
}

/* Counter-scale the category margins to eliminate gap when expanded */
.category-container-icon-mode.expanded .wall,
.category-container-icon-mode:hover .wall {
    margin-bottom: 0;

    /* Counter the scaled bottom margin that creates the gap */
}

/* Back to Wall button styles */
.back-to-category-button {
    background: var(--focus-color);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease,
        visibility var(--transition-speed) ease,
        background-color var(--transition-speed) ease;
}

.back-to-category-button.button-visible {
    opacity: 1;
    visibility: visible;
}

.back-to-category-button:hover {
    background: var(--button-primary-hover);
}

/* Desktop hover behavior */
@media (hover: hover) {
    .category-container-icon-mode:hover {
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(3.0);

        /* Scale from top-left origin */
        box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
        z-index: var(--z-dropdown);
        background-color: var(--bg-color);
        border-radius: var(--border-radius-sm);
        padding: calc(var(--spacing-xs) * 0.5);
    }

    .category-container-icon-mode:hover .back-to-category-button {
        display: block;
        opacity: 1;
        visibility: visible;

        /* Counter-scale the button to maintain original size but make it wider */
        transform: scale(0.5);
        min-width: 80%;
    }
}

/* Mobile/touch expanded state */
.category-container-icon-mode.expanded {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(3.0);

    /* Scale from top-left origin */
    box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
    z-index: var(--z-dropdown);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    padding: calc(var(--spacing-xs) * 0.5);
}

.category-container-icon-mode.expanded .back-to-category-button {
    display: block;
    opacity: 1;
    visibility: visible;

    /* Counter-scale the button to maintain original size but make it wider */
    transform: scale(0.5);
    min-width: 80%;
}

/* Touch interaction hint */
.category-touch-hint {
    position: absolute;
    bottom: -20px;
    left: 0;
    transform: none;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    background-color: var(--light-bg);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
    pointer-events: none;
    border: 1px solid var(--light-border);
}

.category-container-icon-mode.show-hint .category-touch-hint {
    opacity: 1;
}

/* Wall component row and structure styles */
.category-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: var(--row-height, auto); /* Dynamic height via CSS custom property */
}

.category-row-title {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
}

.category-block-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: auto;
    overflow: visible;
}

.category-block-row.small-mode {
    height: 100%;
}

/* Wall block item layout styles */
.category-block-item.sphere-mode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 2px;
    overflow: visible;
}

.category-block-item.block-mode {
    cursor: pointer;
    border-left: 1px solid var(--color-text-inverse);
    border-bottom: 1px solid var(--color-text-inverse);
    border-right: 0;
    border-top: 0;
    width: var(--block-width, auto); /* Dynamic width via CSS custom property */
    display: inline-block;
}

.category-block-item.float-left {
    float: left;
    min-width: var(--block-min-width, auto);
}

.category-block-item.float-right {
    float: right;
    min-width: var(--block-min-width, auto);
}

/* Border overrides for edge items — set via data attributes (PAT-009 compliant) */
.category-block-item[data-no-bottom-border] {
    border-bottom: none;
}

.category-block-item[data-no-left-border] {
    border-left: none;
}

/* Wall sphere size controls */
.category-sphere.fixed-size {
    min-width: var(--sphere-size);
    min-height: var(--sphere-size);
    max-width: var(--sphere-size);
    max-height: var(--sphere-size);
    width: var(--sphere-size);
    height: var(--sphere-size);
}

/* List sphere styles */

/* TODO(PAT-028): Touch target too small - 24px below 44px minimum for touch devices */
.list-sphere {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* TODO(PAT-028): Touch target too small - 24px below 44px minimum for touch devices */
.list-block-item {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    font-weight: bold;
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease;
}

.list-block-item:hover {
    background-color: var(--focus-color);
    color: var(--color-text-inverse);
}

/* Current activity sphere highlight styles */

/* background-color wins by source order over .status-sphere and .sphere-* rules defined earlier */
.current-activity-sphere {
    position: relative;

    /* PAT-010 exempt: z-index: 2 is a relative stacking value, not a named layer */
    z-index: 2;
    box-shadow: 0 0 6px rgb(77 144 254 / 50%);
    background-color: rgb(0 0 0 / 10%);
}

.current-activity-sphere::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--border-radius-full);
    border: 2px solid var(--focus-color);
    z-index: -1;
    box-sizing: content-box;
}

[data-theme="dark"] .current-activity-sphere::before {
    border-color: var(--focus-color);
}

[data-theme="dark"] .current-activity-sphere {
    box-shadow: 0 0 6px rgb(93 159 255 / 50%);
    background-color: rgb(255 255 255 / 10%);
}

.category-container-icon-mode .category-sphere {
    cursor: pointer;
}

.category-container-icon-mode .category-sphere:hover {
    transform: scale(1.2);
    z-index: var(--z-sticky);
}

.category-container-icon-mode .current-activity-sphere {
    /* PAT-010 exempt: z-index: 20 is a relative stacking value, not a named layer */
    z-index: 20;
}

/* Responsive design */
@media (width <= 768px) {
    .page-subheader {
        justify-content: space-between;
        gap: var(--spacing-sm);
    }

    .context-group,
    .navigation-group {
        margin: 0;
    }

    .title-text {
        max-width: clamp(200px, 40vw, 300px);
    }

    .page-indicator {
        margin: 0 var(--spacing-sm);
    }
}

@media (width <= 576px) {
    .prev-next-text {
        display: none;
    }

    .category-text {
        display: none;
    }

    .context-link {
        /* Increased from clamp(60px, 12vw, 100px) to allow more horizontal space */
        max-width: clamp(80px, 20vw, 150px);
    }

    .title-text {
        /* Increased from clamp(150px, 30vw, 200px) to use available space */
        max-width: clamp(180px, 45vw, 300px);
    }

    .page-indicator {
        margin: 0 var(--spacing-xs);
        font-size: var(--font-size-xs);
    }

    /* Reduce margins to maximize path space */
    .context-group {
        margin-inline-end: var(--spacing-xs);
    }

    .path-display {
        margin-inline-start: var(--spacing-xs);
    }

    .path-separator {
        margin: 0 var(--spacing-xs);
    }

    .page-header-base {
        gap: var(--spacing-xs);
        margin: var(--spacing-xs) 0;
    }
}

/* Extra small screens */
@media (width <= 400px) {
    .page-indicator {
        font-size: var(--font-size-xs);
        margin: 0 var(--spacing-xs);
    }

    .context-link {
        /* Increased from clamp(50px, 10vw, 80px) for better readability */
        max-width: clamp(70px, 18vw, 120px);
    }

    .title-text {
        /* Increased from clamp(100px, 25vw, 150px) to use more space */
        max-width: clamp(140px, 40vw, 220px);
    }

    /* Hide "Page" text on very small screens to save space */
    .page-text {
        display: none;
    }
}

/* ===== SEARCH COMPONENT STYLES ===== */

.search-controls {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-md) 0;
    gap: var(--spacing-sm);
    width: 100%;
    border: none;
    background: none;
    outline: none;
}

.search-wrapper {
    position: relative;
    max-width: 500px;
}

/* Search component wrapper */
.search-component-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    outline: none;
}

/* Search component input - more specific selector to override general input styles */
.search-component-wrapper .search-component-input {
    width: 100%;
    padding-left: 3rem;        /* Space for search icon */
    border: none;              /* Wrapper provides border */
    background-color: transparent;

    /* All other styling inherited from base input {} rule */
}

.search-component-wrapper:focus-within {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 20%);
}

.search-component-wrapper .search-component-input:focus {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search-component-wrapper .search-component-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

/* Search component icon */
.search-component-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.6;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;

    /* PAT-010 exempt: z-index: 1 is a relative stacking value, not a named layer */
    z-index: 1;
}

.search-component-icon svg {
    width: 16px;
    height: 16px;
}

/* Search component clear button */
.search-component-clear {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color);
    opacity: 0.6;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.search-component-clear:hover {
    opacity: 1;
    background-color: var(--light-bg);
}

.search-component-clear svg {
    width: 16px;
    height: 16px;
}

/* Search component loading spinner */
.search-component-loading {
    position: absolute;
    right: var(--spacing-md);

    /* Position on the right side */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    animation: search-loading-spin 1s linear infinite;
}

.search-component-loading svg {
    width: 16px;
    height: 16px;
}

@keyframes search-loading-spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

[data-theme="dark"] .search-component-wrapper {
    background-color: var(--bg-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .search-component-wrapper .search-component-input {
    background-color: transparent;
    color: var(--text-color);
}

[data-theme="dark"] .search-component-wrapper:focus-within {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(93 159 255 / 20%);
}

[data-theme="dark"] .search-component-wrapper .search-component-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

[data-theme="dark"] .search-component-icon {
    color: var(--text-color);
}

[data-theme="dark"] .search-component-clear {
    color: var(--text-color);
}

[data-theme="dark"] .search-component-clear:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .search-component-loading {
    color: var(--text-color);
}

/* ===== Search Input Component Styles ===== */

/* Search input container and components */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-md, 1rem);
}

.search-input {
    flex: 1;
    padding-right: 40px;    /* Space for search icon */

    /* All other styling inherited from base input {} rule */
}

.search-icon {
    position: absolute;
    right: var(--spacing-sm, 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color-muted, #6c757d);
    font-size: var(--font-size-md, 1rem);
    padding: var(--spacing-xs, 0.25rem);
    border-radius: var(--border-radius-sm, 4px);
    transition: color 0.2s, background-color 0.2s;
}

.search-icon:hover {
    color: var(--text-color, #333);
    background-color: var(--hover-color, #f8f9fa);
}

.search-spinner {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color, #e9ecef);
    border-top: 2px solid var(--primary-color, #007bff);
    border-radius: var(--border-radius-full);
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.2s;
}

.search-spinner.active {
    opacity: 1;
}

@keyframes spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes popup-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -55%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes overlay-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Dark theme support for search input */
[data-theme="dark"] .search-input {
    background-color: var(--input-background, #2d3748);
    border-color: var(--border-color, #4a5568);
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-input:focus {
    border-color: var(--focus-color, #4299e1);
    box-shadow: 0 0 0 2px rgb(66 153 225 / 25%);
}

[data-theme="dark"] .search-icon {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-icon:hover {
    color: var(--text-color, #e2e8f0);
    background-color: var(--hover-color, #4a5568);
}

[data-theme="dark"] .search-spinner {
    border-color: var(--border-color, #4a5568);
    border-top-color: var(--primary-color, #4299e1);
}

/* ===== Search Modal Base Styles ===== */

/* Base search modal styles for overlay and popup */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    z-index: var(--z-overlay);
    backdrop-filter: blur(2px);
    animation: overlay-fade 0.2s ease-out;
    touch-action: none;
}

.search-results-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    background-color: var(--background-color, #fff);
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: var(--z-overlay);
    animation: popup-fade-in 0.25s ease-out;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.search-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md, 1rem);
    border-bottom: 1px solid var(--border-color, #e9ecef);
    background-color: var(--background-color, #fff);
    position: sticky;
    top: 0;

    /* PAT-010 exempt: z-index: 2 is a relative stacking value, not a named layer */
    z-index: 2;
    margin-bottom: var(--spacing-md, 1rem);
    margin-top: calc(-1 * var(--spacing-md, 1rem));
    padding-top: var(--spacing-md, 1rem);
}

.search-popup-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: 600;
    color: var(--text-color, #333);
}

.search-close-button {
    background: none;
    border: none;
    font-size: var(--font-size-xl, 1.5rem);
    cursor: pointer;
    color: var(--text-color-muted, #6c757d);
    padding: var(--spacing-xs, 0.25rem);
    line-height: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm, 4px);
}

.search-close-button:hover {
    background-color: var(--hover-color, #f8f9fa);
    color: var(--text-color, #333);
}

.search-results-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md, 1rem);
}

.search-result-item {
    padding: var(--spacing-md, 1rem);
    border-bottom: 1px solid var(--border-color, #e9ecef);
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: var(--hover-color, #f8f9fa);
}

.search-result-item:focus {
    outline: 2px solid var(--focus-color, #007bff);
    outline-offset: -2px;
    background-color: var(--focus-background, #e3f2fd);
}

.search-result-item[aria-selected="true"] {
    background-color: var(--selected-color, #e3f2fd);
    border-left: 3px solid var(--primary-color, #007bff);
}

.search-result-type {
    display: inline-block;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    border-radius: var(--border-radius-sm, 4px);
    margin-bottom: var(--spacing-xs, 0.25rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-result-type.type-page {
    background-color: var(--tag-subject-bg);
    color: var(--tag-subject-text);
}

.search-result-type.type-activity {
    background-color: var(--tag-type-bg);
    color: var(--tag-type-text);
}

.search-result-type.type-lesson {
    background-color: var(--tag-mode-bg);
    color: var(--tag-mode-text);
}

.search-result-type.type-category {
    background-color: var(--tag-level-bg);
    color: var(--tag-level-text);
}

.search-result-type.type-metacat {
    background-color: var(--tag-pink-bg);
    color: var(--tag-pink-text);
}

.search-result-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: 600;
    margin-bottom: var(--spacing-xs, 0.25rem);
    color: var(--text-color, #333);
}

.search-result-path {
    font-size: var(--font-size-sm);
    color: var(--color-neutral, #666);
    margin-bottom: var(--spacing-xs);
    font-style: italic;
}

[data-theme="dark"] .search-result-path {
    color: var(--color-neutral-light);
}

.search-result-content {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-color-secondary, #555);
    line-height: 1.4;
}

.search-highlight {
    background-color: var(--highlight-color, #fff3cd);
    color: var(--highlight-text-color, #856404);
    padding: 0 2px;
    border-radius: var(--border-radius-xs);
}

.search-no-results {
    text-align: center;
    padding: var(--spacing-lg, 2rem);
    color: var(--text-color-muted, #6c757d);
}

.search-no-results h3 {
    margin-bottom: var(--spacing-md, 1rem);
    color: var(--text-color, #333);
}

.search-results-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg, 2rem);
    color: var(--text-color-muted, #6c757d);
}

.search-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #e9ecef);
    border-top: 3px solid var(--primary-color, #007bff);
    border-radius: var(--border-radius-full);
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md, 1rem);
}

.search-loading-text {
    font-size: var(--font-size-md, 1rem);
    text-align: center;
}

.search-load-more {
    width: 100%;
    padding: var(--spacing-md, 1rem);
    background-color: var(--surface-color, #f8f9fa);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: var(--border-radius-sm, 4px);
    color: var(--text-color, #333);
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: var(--spacing-md, 1rem);
}

.search-load-more:hover {
    background-color: var(--hover-color, #e9ecef);
}

.search-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark theme support for search modal */
[data-theme="dark"] .search-overlay {
    background-color: rgb(0 0 0 / 70%);
}

[data-theme="dark"] .search-results-popup {
    background-color: var(--background-color, #2d3748);
}

[data-theme="dark"] .search-popup-header {
    background-color: var(--background-color, #2d3748);
    border-bottom-color: var(--border-color, #4a5568);
}

[data-theme="dark"] .search-popup-title {
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-close-button {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-close-button:hover {
    background-color: var(--hover-color, #4a5568);
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-result-item {
    border-bottom-color: var(--border-color, #4a5568);
}

[data-theme="dark"] .search-result-item:hover {
    background-color: var(--hover-color, #4a5568);
}

[data-theme="dark"] .search-result-item:focus {
    background-color: var(--focus-background, #2d3748);
}

[data-theme="dark"] .search-result-item[aria-selected="true"] {
    background-color: var(--selected-color, #2d3748);
}

[data-theme="dark"] .search-result-title {
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-result-content {
    color: var(--text-color-secondary, #cbd5e0);
}

[data-theme="dark"] .search-highlight {
    background-color: var(--highlight-color, #744210);
    color: var(--highlight-text-color, #faf089);
}

[data-theme="dark"] .search-no-results {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-no-results h3 {
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-load-more {
    background-color: var(--surface-color, #1a202c);
    border-color: var(--border-color, #4a5568);
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-load-more:hover {
    background-color: var(--hover-color, #4a5568);
}

[data-theme="dark"] .search-results-loading {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-loading-spinner {
    border-color: var(--border-color, #4a5568);
    border-top-color: var(--primary-color, #4299e1);
}

[data-theme="dark"] .search-loading-text {
    color: var(--text-color-muted, #a0aec0);
}

/* Cursor styles for search processing */
html.searching,
html.searching * {
    cursor: wait !important;
}

html.searching body,
html.searching div,
html.searching a,
html.searching button,
html.searching input,
html.searching select,
html.searching textarea {
    cursor: wait !important;
}

html.searching ::selection {
    background: transparent;
}

html.searching input,
html.searching textarea {
    caret-color: transparent;
}

html.searching .search-container *,
html.searching .skills-table * {
    cursor: wait !important;
}

#search-cursor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-supreme);
    cursor: wait;
    background-color: transparent;
}

/* ===== Goals Search Modal Styles ===== */

.search-result-item-with-goal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
}

.search-result-content-goals {
    flex: 1;
    min-width: 0;

    /* Allow text to truncate */
}

.goals-search-button-area {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    min-width: clamp(120px, 15vw, 160px);
}

.goal-status-indicator {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.goal-status-indicator.is-goal {
    background-color: var(--color-success-light, #d4edda);
    color: var(--color-success, #28a745);
    border: 1px solid var(--color-success, #28a745);
}

.goal-status-indicator.not-goal {
    background-color: var(--color-secondary-light, #e2e3e5);
    color: var(--color-secondary, #6c757d);
    border: 1px solid var(--color-secondary, #6c757d);
}

[data-theme="dark"] .goal-status-indicator.is-goal {
    background-color: rgb(40 167 69 / 20%);
    color: var(--color-success-on-dark);
    border-color: var(--color-success-on-dark);
}

[data-theme="dark"] .goal-status-indicator.not-goal {
    background-color: rgb(108 117 125 / 20%);
    color: var(--list-marker-color);
    border-color: var(--color-neutral);
}

/* Goal action buttons - enhanced from standardized button patterns */
.goal-action-button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-speed, 0.2s) ease;
    text-align: center;
    white-space: nowrap;

    /* Enhanced from .btn patterns */
}

.goal-action-button.add-goal {
    background-color: var(--color-success, #28a745);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-success, #28a745);
}

.goal-action-button.add-goal:hover {
    background-color: var(--color-success-hover, #218838);
    border-color: var(--color-success-dark, #1e7e34);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.goal-action-button.remove-goal {
    background-color: var(--color-danger, #dc3545);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-danger, #dc3545);
}

.goal-action-button.remove-goal:hover {
    background-color: var(--color-danger-hover, #c82333);
    border-color: var(--color-danger-dark, #bd2130);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

/* :hover added to match specificity of .goal-action-button.remove-goal:hover (0,3,0) */
.goal-action-button:disabled,
.goal-action-button:disabled:hover {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Goal Progress Page specific styles - CSS conformance fixes */
.goal-path-info {
    margin-bottom: var(--spacing-md);
    opacity: 0.8;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.goal-delete-button {
    margin-top: var(--spacing-md);
    margin-right: auto; /* Push to left */
}

.goal-settings-link {
    margin-left: var(--spacing-sm);
}

.goal-progress-segment {
    width: var(--segment-width, 0%);
}

.goal-progress-legend {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.goal-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.goal-color-indicator {
    width: 1rem;
    height: 1rem;
    border-radius: var(--border-radius-full);
    background-color: var(--indicator-color, #ccc);
}

.goal-notification-info {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
    color: var(--text-color);
}

.goal-notification-actions {
    margin-top: var(--spacing-md);
}

.content-type-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    background-color: var(--color-info-light, #cce7ff);
    color: var(--color-info, #06c);
    border: 1px solid var(--color-info, #06c);
}

[data-theme="dark"] .content-type-badge {
    background-color: rgb(93 159 255 / 20%);
    color: var(--focus-color);
    border-color: var(--focus-color);
}

/* Responsive adjustments for goals search modal using clamp() */
@media (width <= 768px) {
    .search-result-item-with-goal {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .goals-search-button-area {
        flex-direction: row;
        justify-content: space-between;
        min-width: auto;
    }

    .goal-action-button {
        flex: 1;
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ================================
   SECTION - HELP LINK COMPONENT
   ================================ */

.help-link-small {
    font-size: var(--font-size-xs);
}

.help-link-inline {
    font-size: inherit;
    font-weight: normal;
}

.help-link-form {
    font-size: var(--font-size-xs);
    color: var(--text-color-muted);
}

.help-link-form:hover {
    color: var(--link-hover-color);
}

/* ================================
   SECTION - TEST-OUT MODE TOGGLE COMPONENT
   ================================ */

.testout-toggle-component {
    display: flex;
    justify-content: center;
    align-items: center;
}

.testout-toggle-checkbox-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.testout-toggle-checkbox {
    margin: 0;
    cursor: pointer;
}

.testout-toggle-label {
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.testout-toggle-help-link {
    margin-left: var(--spacing-xs);
}

/* Page header variant */
.testout-toggle-page-header {
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-md) 0;
}

[data-theme="dark"] .testout-toggle-page-header {
    background-color: rgb(255 255 255 / 5%);
}

/* Form variant */
.testout-toggle-form {
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--light-border);
    margin-top: var(--spacing-md);
}

.testout-toggle-form .testout-toggle-label {
    font-size: var(--font-size-sm);
}

/* Compact variant */
.testout-toggle-compact {
    padding: var(--spacing-xs);
}

.testout-toggle-compact .testout-toggle-label {
    font-size: var(--font-size-xs);
    font-weight: normal;
}

.testout-toggle-compact .testout-toggle-checkbox-container {
    gap: var(--spacing-xs);
}

/* ===== ASSESSMENT RESULTS STYLING ===== */

/* Enhanced styling for Assessment UI */

/* Assessment completion stats with enhanced structure */
.assessment-completion-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

/* Primary score display - "X out of Y correct" messaging */
.assessment-score-display {
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--color-info);
    color: var(--color-text-inverse);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.assessment-primary-score {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.assessment-primary-score strong {
    font-weight: 700;
}

/* Detail stats section */
.assessment-detail-stats {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.assessment-detail-stats p {
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.assessment-detail-stats p:first-child {
    margin-top: 0;
}

.assessment-detail-stats p:last-child {
    margin-bottom: 0;
}

/* Dark theme support for assessment results */
[data-theme="dark"] .assessment-score-display {
    background-color: var(--focus-color);
    color: var(--color-text-inverse);
}

[data-theme="dark"] .assessment-detail-stats {
    background-color: var(--header-bg);
    border-color: var(--primary-color);
    color: var(--text-color);
}

[data-theme="dark"] .assessment-detail-stats p {
    color: var(--text-color);
}

/* ===== LOADING COMPONENT STYLES ===== */

/* Standardized loading component replacing inline styles */
.loading-container {
    position: fixed;
    top: var(--loading-top, 50%);
    left: var(--loading-left, 50%);
    transform: translate(-50%, -50%);
    z-index: var(--loading-z-index, 110);
    cursor: pointer;
    background-color: var(--bg-color);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    text-align: center;
    filter: none; /* Prevent dark mode filter */
    transition: opacity var(--transition-speed) ease,
                visibility var(--transition-speed) ease;
}

/* Loading container visibility via data attributes */

.loading-container.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-gif {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.loading-text {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    font-weight: 600;
}

/* Dark theme support for loading component */
[data-theme="dark"] .loading-container {
    background-color: var(--light-bg);
    box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
}

/* ===== IMAGE COMPONENT STYLES ===== */

/* Standardized image component replacing inline styles */
.image-wrapper {
    display: flex;
    justify-content: var(--justify-content, flex-start);
    align-items: flex-start;
    width: var(--wrapper-width, 100%);
    padding: var(--wrapper-padding, 0);
    box-sizing: border-box;
}

.image-wrapper img {
    background-color: var(--image-bg-color, transparent);
    opacity: var(--image-opacity, 1);
    max-width: var(--image-max-width, 100%);
    height: var(--image-height, auto);
    object-fit: var(--image-object-fit, contain);
    transition: opacity var(--transition-speed) ease;
}

.image-loading-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    transition: opacity var(--transition-speed) ease,
                visibility var(--transition-speed) ease;
}

/* Image loading placeholder visibility via data attributes */

.image-loading-placeholder.hidden {
    opacity: 0;
    visibility: hidden;
}

.image-error-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: var(--color-danger);
    background-color: var(--color-danger-light);
    border: 1px dashed var(--color-danger);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    text-align: center;
}

.image-gallery {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    transition: transform var(--transition-speed) ease;
}

.gallery-item:hover {
    transform: translateY(-2px);
}

.gallery-item.gallery-item-flex {
    flex: 1 1 auto;
}

.gallery-item.gallery-item-clickable {
    cursor: pointer;
}

/* Dark theme support for image components */
[data-theme="dark"] .image-error-placeholder {
    background-color: rgb(220 53 69 / 20%);
    border-color: var(--color-danger);
}

/* ===== PROGRESS COMPONENT STYLES ===== */

/* Standardized progress display replacing inline styles */

/* PAT-029: CSS-driven responsive layout instead of JavaScript class toggling */
.confidence-container {
    margin: var(--spacing-sm);

    /* Default to narrow mode (block layout) for mobile */
    display: block;
}

/* Wide mode for larger screens (matching previous window.innerWidth / 1.2 < 401 logic) */
@media (width >= 482px) {
    .confidence-container {
        display: inline;
    }
}

.progress-sphere {
    cursor: pointer;
    transition: outline var(--transition-speed) ease;
}

.progress-sphere.selected {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    cursor: default;
    pointer-events: none;
}

/* Progress bar state management */
.progress-bar-fill.empty {
    width: 0%;
}

.progress-bar-fill.full {
    width: 100%;
}

/* ===== CLERK UI STYLES ===== */

/* Standardized Clerk authentication UI replacing inline styles */
.clerk-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Clerk sign-up full-page wrapper — used by authUIMod.showClerkSignUp() */
.clerk-sign-up-wrapper {
    margin: auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
}

/* Clerk sign-in container — used by authUIMod.showClerkLogin() */
.clerk-sign-in-container {
    margin: auto;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
}

/* Clerk verification code container — used by authUIMod.showClerkLogin() */
.clerk-verification-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100%;
    max-width: 400px;
    margin: auto;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-color);
}

/* Clerk verification code input field */
.clerk-verification-input {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Clerk verification submit button */
.clerk-verify-button {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
    width: 100%;
}

.clerk-verify-button:hover {
    opacity: 0.88;
}

/* Mobile keyboard fix for Clerk modals */
@media (width <= 768px) {
    .clerk-modal-overlay {
        align-items: flex-start;
        padding-top: 5vh;
        height: 100dvh;
    }

    .clerk-sign-in-container,
    .clerk-verification-container {
        align-items: flex-start;
        padding-top: 5vh;
    }
}

.clerk-container {
    position: relative;
    background: var(--bg-color);
    border-radius: var(--border-radius);
    margin: var(--spacing-md);
    box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
    max-width: 480px;
    width: 100%;
}

.clerk-close-button {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--text-color);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease;

    /* PAT-010 exempt: z-index: 20 is a relative stacking value, not a named layer */
    z-index: 20;
}

.clerk-close-button:hover {
    background-color: var(--light-bg) !important;
}

[data-theme="dark"] .clerk-container {
    box-shadow: 0 4px 20px rgb(0 0 0 / 60%);
}

/* Ensure consistent dark mode backgrounds for Clerk internal elements */
[data-theme="dark"] .cl-rootBox,
[data-theme="dark"] .cl-card,
[data-theme="dark"] .cl-cardBox,
[data-theme="dark"] .cl-modalContent {
    background-color: var(--light-bg) !important;
}

[data-theme="dark"] .cl-internal-b3fm6y {
    background-color: var(--bg-color-deeper) !important;
}

/* ===== FLASHCARD PAGE STYLES ===== */

/* Flashcard-specific styles following design token standards */

.flashcard-main-container {
    padding: var(--spacing-md);
    color: var(--text-color);
    line-height: 1.5;
}

.flashcard-title {
    font-size: var(--font-size-xl);
    font-weight: bold;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color);
}

.flashcard-question {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.flashcard-question p {
    margin-top: 0;
}

.flashcard-image-container {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.flashcard-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.flashcard-answer {
    background-color: var(--bg-color);
    border: 2px solid var(--color-info);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.flashcard-answer p {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.flashcard-answer p:last-child {
    margin-bottom: 0;
}

.flashcard-show-answer {
    display: block;
    margin: var(--spacing-lg) auto;
    min-height: 44px; /* Mobile touch target */
    min-width: 120px;
    font-size: var(--font-size-md);
    font-weight: bold;
}

.flashcard-self-reporting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.flashcard-progress-label {
    font-size: var(--font-size-md);
    color: var(--text-color);
    margin-right: var(--spacing-sm);
    cursor: pointer;
}

.flashcard-buttons {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.flashcard-continue-button {
    min-height: 44px; /* Mobile touch target */
    min-width: 120px;
}

/* Responsive design for smaller screens */
@media (width <= 600px) {
    .flashcard-main-container {
        padding: var(--spacing-sm);
    }

    .flashcard-question {
        font-size: var(--font-size-md);
        padding: var(--spacing-sm);
    }

    .flashcard-title {
        font-size: var(--font-size-lg);
    }

    .flashcard-self-reporting {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .flashcard-progress-label {
        width: 100%;
        text-align: center;
        margin-right: 0;
    }
}

/* Utility classes */
.flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.flex-row {
  display: flex;
  flex-flow: row wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-grow {
  flex: 1 1 auto;
}

.flex-shrink {
  flex: 0 1 auto;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.responsive-width {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.responsive-height {
  height: auto;
  max-height: 100vh;
}

/* Page-specific styles */

[data-page-type="question"] .answer-option {
  cursor: pointer;
  transition: background-color 0.2s;
}

[data-page-type="question"] .answer-option:hover {
  background-color: rgb(0 0 0 / 5%);
}

/* Media queries */
@media (width <= 768px) {
  .sm-stack {
    flex-direction: column !important;
  }

  .sm-hide {
    display: none !important;
  }

  .sm-full-width {
    width: 100% !important;
  }
}

/* ===== CONTENT IMAGE STYLES ===== */

/* Content images - embedded in HTML content via WYSIWYG or Markdown */
.content-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

/* Inline images - smaller images within text */
.content-image.inline {
    display: inline-block;
    margin: 0 var(--spacing-xs);
    vertical-align: middle;
    max-height: 2em;
}

/* ===== GENERIC ERROR AND VALIDATION PATTERNS ===== */

/* Reusable error and validation components for all pages */

/* Error container - for general error displays */
.error-container {
    text-align: center;
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) auto;
    max-width: 600px;
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.error-container h2 {
    color: var(--color-danger);
    margin-bottom: var(--spacing-md);
}

.error-details {
    font-family: 'Courier New', monospace;
    background-color: var(--light-bg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin: var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Validation errors - for form validation displays */
.validation-errors {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
}

.validation-errors h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-danger);
    font-size: var(--font-size-md);
    font-weight: 600;
}

.validation-errors ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.validation-errors li {
    color: var(--color-danger);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.validation-errors li:last-child {
    margin-bottom: 0;
}

/* ==============================================
 * Expandable Text Component (PAT-032 compliant)
 * ============================================== */
.expandable-text {
    max-width: 550px;
}

.expandable-text-content {
    margin: 0 0 var(--spacing-xs) 0;
    font-style: italic;
}

.expandable-text-toggle {
    white-space: nowrap;
    margin: 0 var(--spacing-xs) var(--spacing-xs) 0;
}

/* General reusable data table component */
.data-table {
    width: 100%;
}

/* Sort indicators - general reusable component */
.sort-indicator {
    margin-left: var(--spacing-sm);
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-style: solid;
    transition: opacity var(--transition-speed);
    opacity: 0.3;
}

.sort-indicator.asc {
    border-width: 0 4px 4px;
    border-color: transparent transparent var(--text-color) transparent;
}

.sort-indicator.desc {
    border-width: 4px 4px 0;
    border-color: var(--text-color) transparent transparent transparent;
}

[data-theme="dark"] .sort-indicator.asc {
    border-color: transparent transparent var(--text-color) transparent;
}

[data-theme="dark"] .sort-indicator.desc {
    border-color: var(--text-color) transparent transparent transparent;
}

.sort-indicator.active {
    opacity: 1;
}

/* Radio form components - general reusable components */
.radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.radio-input {
    margin-top: 0.25rem;
    cursor: pointer;
}

.radio-label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex: 1;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease;
}

.radio-label:hover {
    background-color: var(--toggle-bg);
}

[data-theme="dark"] .radio-label:hover {
    background-color: rgb(255 255 255 / 5%);
}

.radio-label-text {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.125rem;
}

.radio-label-description {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.9;
}

/* Input validation error state - general form validation component */
.input-error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px rgb(204 51 51 / 20%);
}

/* ===== OWNERSHIP TAG COMPONENT ===== */

/* Used in both viewing (my-content) and editing contexts */

.ownership-tag {
    display: inline-block;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    margin-left: var(--spacing-sm);
    vertical-align: middle;
}

/* Size variants */
.ownership-tag-small {
    padding: var(--spacing-xxs) var(--spacing-xs);
    font-size: var(--font-size-xs);
}

.ownership-tag-medium {
    padding: var(--spacing-xxs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.ownership-tag-large {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

/* Ownership type colors */
.ownership-tag-public {
    background-color: var(--tag-public-bg);
    color: var(--tag-public-text);
}

.ownership-tag-team {
    background-color: var(--tag-team-bg);
    color: var(--tag-team-text);
}

.ownership-tag-personal {
    background-color: var(--tag-personal-bg);
    color: var(--tag-personal-text);
}

.ownership-tag-system {
    background-color: var(--tag-system-bg);
    color: var(--tag-system-text);
}

/* Icon styling */
.ownership-tag-icon {
    display: inline;
    font-size: 0.9em;
}

/* Dark mode support for ownership tags */
[data-theme="dark"] .ownership-tag-public {
    background-color: var(--tag-public-bg);
    color: var(--tag-public-text);
}

[data-theme="dark"] .ownership-tag-team {
    background-color: var(--tag-team-bg);
    color: var(--tag-team-text);
}

[data-theme="dark"] .ownership-tag-personal {
    background-color: var(--tag-personal-bg);
    color: var(--tag-personal-text);
}

[data-theme="dark"] .ownership-tag-system {
    background-color: var(--tag-system-bg);
    color: var(--tag-system-text);
}

/* ===== GENERAL FORM COMPONENTS ===== */

.form-control {
    width: 100%;
    padding: var(--spacing-xs) 12px;
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm, 14px);
    background: var(--bg-color, #fff);
    color: var(--text-color, #333);
}

.form-control:focus {
    outline: none;
    border-color: var(--focus-color, #4D90FE);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);
}

.form-hint {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs, 12px);
    color: var(--text-color, #333);
    opacity: 0.9;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.input-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
}

.input-group input {
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 25%);
}

.input-help {
    line-height: 1.3;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
}

/* ===== ADD TO MY CATEGORY MODAL (adhoc) ===== */

.adhoc-modal-step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
}

/* Small "Adding: …" / "Category: …" header above lists */
.adhoc-modal-context {
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    margin: 0;
}

/* Section headings like "Choose a category:" */
.adhoc-modal-section-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

/* Scrollable list of category / lesson choices */
.adhoc-item-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
}

/* Individual category / lesson choice button */
.adhoc-item-btn {
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.adhoc-item-btn:hover {
    background: var(--button-secondary-hover);
    border-color: var(--light-border);
}

/* Thin separator between existing-item list and create-new section */
.adhoc-modal-divider {
    height: 1px;
    background: var(--light-border);
    margin: 0;
}

/* Full-width input wrapper */
.adhoc-input-row {
    display: flex;
    gap: var(--spacing-sm);
}

.adhoc-name-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 44px;
    box-sizing: border-box;
}

.adhoc-name-input:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 25%);
}

/* Step 3 confirmation heading */
.adhoc-confirm-heading {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

/* Step 3 confirmation summary */
.adhoc-modal-summary {
    background: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Labeled row inside confirmation summary */
.adhoc-summary-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.adhoc-summary-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    min-width: 5.5em;
    flex-shrink: 0;
}

.adhoc-summary-value {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
}

/* "new" badge for items being created */
.adhoc-new-badge {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary, #3498db);
    background: rgb(52 152 219 / 12%);
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* Inline error text */
.adhoc-modal-error {
    font-size: var(--font-size-sm);
    color: var(--color-error, #c0392b);
    margin: 0;
}

/* Navigation button row: Back (left) / Cancel + Next (right) */
.adhoc-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.adhoc-nav-left {
    display: flex;
    gap: var(--spacing-sm);
}

.adhoc-nav-right {
    display: flex;
    gap: var(--spacing-sm);
}

/* Dark mode adjustments */
[data-theme="dark"] .adhoc-name-input {
    background: var(--color-neutral-dark);
    border-color: var(--color-neutral);
    color: var(--text-color);
}

[data-theme="dark"] .adhoc-item-btn:hover {
    background: rgb(255 255 255 / 8%);
}

[data-theme="dark"] .adhoc-modal-summary {
    background: var(--color-neutral-dark);
    border-color: var(--color-neutral);
}

[data-theme="dark"] .adhoc-new-badge {
    color: var(--color-text-inverse);
    background: rgb(93 173 226 / 30%);
}

[data-theme="dark"] .adhoc-modal-error {
    color: var(--color-error);
}

/* ===== QUICK-CREATE ACTIVITY MODAL additions (adhoc) ===== */

/* Wrapper for label + input/textarea pairs in the quick-create form */
.adhoc-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Multiline text input — mirrors adhoc-name-input but allows vertical resize */
.adhoc-textarea {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: 1.5;
    background: var(--bg-color);
    color: var(--text-color);
    resize: vertical;
    box-sizing: border-box;
}

.adhoc-textarea:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 25%);
}

/* Answer cards container for multiple choice quick-create */
.adhoc-answers-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.adhoc-answer-card {
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.adhoc-answer-card.adhoc-answer-correct {
    border-color: var(--color-success, #27ae60);
    background: rgb(39 174 96 / 5%);
}

.adhoc-answer-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.adhoc-correct-label {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    cursor: pointer;
    user-select: none;
}

.adhoc-correct-label input[type="radio"] {
    cursor: pointer;
    accent-color: var(--color-success, #27ae60);
}

.adhoc-response-input {
    font-size: var(--font-size-xs);
    min-height: 36px;
}

[data-theme="dark"] .adhoc-answer-card.adhoc-answer-correct {
    background: rgb(39 174 96 / 10%);
}

/* Container for flashcard / multiple-choice radio buttons */
.adhoc-type-options {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Individual radio button + label */
.adhoc-type-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
}

.adhoc-type-option input[type="radio"] {
    cursor: pointer;
    accent-color: var(--focus-color, #4d90fe);
}

/* Dark mode */
[data-theme="dark"] .adhoc-textarea {
    background: var(--color-neutral-dark);
    border-color: var(--color-neutral);
    color: var(--text-color);
}

.adhoc-name-input.adhoc-input-error,
.adhoc-textarea.adhoc-input-error {
    border-color: var(--color-error, #c0392b);
    box-shadow: 0 0 0 2px rgb(192 57 43 / 20%);
}

.adhoc-name-input.adhoc-input-error:focus,
.adhoc-textarea.adhoc-input-error:focus {
    border-color: var(--color-error, #c0392b);
    box-shadow: 0 0 0 2px rgb(192 57 43 / 30%);
}

/* PAT-044 replacements: classes that replace inline styles */

.metacat-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-error-light);
    border: 1px solid var(--color-error);
    border-radius: var(--border-radius-sm);
    color: var(--color-error);
}

.debug-window {
    margin: 15px 5px 5px;
    width: 90%;
    height: auto;
}

.browser-not-supported-message {
    margin: 5px;
    text-shadow: none;
}

.label-normal {
    font-weight: normal;
}

.link-loading {
    pointer-events: none;
    opacity: 0.5;
}

.js-position-relative {
    position: relative;
}

/* Shared error box for page renderer displayErrorMessage methods */
.page-error-box {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-error-light);
    border: 1px solid var(--color-error);
    border-radius: var(--border-radius-sm);
    color: var(--color-error);
}

/* Offscreen hidden container for invisible element/iframe testing */
.offscreen-test-container {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.borderless-iframe {
    border: none;
}

/* Row variant of .input-section — horizontal layout */
.input-section-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
}

.hidden-content-filter-container {
    margin-bottom: 15px;
    padding-left: 5px;
}

/* Ripple click effect — positioned via CSS custom properties set in JS */
.ripple {
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 40%);
    transform: scale(0);
    animation: ripple-expand 0.6s ease-out forwards;
    pointer-events: none;
    left: var(--ripple-left, 50%);
    top: var(--ripple-top, 50%);
}

@keyframes ripple-expand {
    to {
        transform: scale(30);
        opacity: 0;
    }
}