/* SECTIONS IN THIS FILE
quiz
quiz context discovery modal
category
recent progress
search
metacat
ubercat
my content
HTML page
embed page
API content page
goals
home
my content (home page)
chart
account
about
showcase
HTML page main content layout
lesson page
activity page
hydrate settings page
*/

/* ================================
   SECTION - QUIZ PAGE STYLES
   ================================ */

.quiz-scope-options {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin-bottom: var(--spacing-lg);
}

.quiz-scope-option .radio-pair label {
    font-weight: bold;
}

.quiz-topics-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    max-height: none;
    overflow-y: visible;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* CSS class replacing inline styles for improved separation of concerns */
.quiz-list-expanded {
    max-height: none;
    overflow-y: visible;
}

/* Enhanced with mystyle.css form element patterns */
.quiz-selector-item {
    /* Enhanced layout patterns */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--spacing-sm);

    /* Form element styling similar to mystyle.css input standards */
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                box-shadow var(--transition-speed) ease;
    color: var(--text-color);
    cursor: pointer;
}

/* Enhanced hover state with mystyle.css standards */
.quiz-selector-item:hover {
    background-color: var(--light-bg);
    border-color: var(--color-neutral);
}

/* Enhanced with mystyle.css patterns */
.quiz-scope-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.quiz-scope-summary > strong {
    white-space: nowrap;
    flex-shrink: 0;
}

#quiz-scope-summary-content {
    overflow-wrap: break-word;
    min-width: 0;
}

/* View all questions toggle alignment in summary */
.quiz-view-all-questions-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--spacing-xs);
}

.quiz-toggle-row {
    display: flex;
    align-items: center;
    margin-left: var(--spacing-sm);
}

.quiz-view-all-questions-toggle input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

/* Enhanced with mystyle.css .btn-link pattern */
.quiz-change-link {
    /* Base styling leverages .btn-link patterns */
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
}

/* Quiz configuration title container */
.quiz-scope-title-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.quiz-scope-title {
    font-size: 1.1rem;
    margin: 0;
}


/* Quiz scope description */
.quiz-scope-description {
    font-size: 0.875rem;
    opacity: 0.8;
}

.quiz-scope-description.disabled {
    opacity: 0.8;
}

/* Selected topics container */
.quiz-selected-topics-flex-container {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Selected topic tags */
.quiz-selected-topic-tag {
    /* CSS variables for theming — inherit from mystyle.css tag tokens */
    --quiz-selected-topic-bg: var(--tag-public-bg);
    --quiz-selected-topic-text: var(--tag-public-text);
    --quiz-selected-topic-border: var(--tag-public-border);
    --quiz-remove-button-color: var(--color-danger);
    --quiz-remove-button-hover-bg: rgb(220 53 69 / 10%);

    background-color: var(--quiz-selected-topic-bg);
    color: var(--quiz-selected-topic-text);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-xl);
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--quiz-selected-topic-border);
}

/* Remove button for selected topics */
.quiz-selected-topic-remove {
    background: none;
    border: none;
    color: var(--quiz-remove-button-color);
    font-size: 1.125rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    transition: background-color 0.2s;
}

.quiz-selected-topic-remove:hover {
    background-color: var(--quiz-remove-button-hover-bg);
}

.quiz-scope-guidance {
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
    color: var(--text-color);
}

/* Question display area */
.quiz-question-container {
    width: 100%;
    flex-direction: column;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    margin-bottom: var(--spacing-lg);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.quiz-question-container.active {
    display: flex;
}

/* Flashcard-specific quiz container styling - removes container padding/border to let flashcard styles handle it */
.quiz-question-container.quiz-flashcard-container {
    padding: 0;
    border: none;
    background-color: transparent;
    border-radius: 0;
    max-width: 100%; /* Allow full width for flashcard centering */
}

.quiz-question-text {
    font-size: clamp(var(--font-size-md), 3vw, 1.2rem);
    font-weight: 500;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color);
}

.quiz-image-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.quiz-image-container img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin-bottom: var(--spacing-lg);
}

.quiz-answer {
    display: flex;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    border-radius: var(--border-radius-sm);
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.3s ease;
    color: var(--text-color);
}

.quiz-answer:hover {
    background-color: rgb(0 0 0 / 5%);
}

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

.quiz-answer.selected {
    background-color: rgb(77 144 254 / 10%);
    border-color: var(--focus-color);
}

[data-theme="dark"] .quiz-answer.selected {
    background-color: rgb(93 159 255 / 20%);
}

.quiz-answer[data-answer-locked] {
    pointer-events: none;
    cursor: default;
}

.quiz-answer.correct {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
}

.quiz-answer.incorrect {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger);
}

.quiz-answer-radio {
    margin: 0;
    accent-color: var(--focus-color);
}

.quiz-answer-text {
    flex: 1;
    color: var(--text-color);
}

.quiz-feedback {
    margin-top: var(--spacing-lg);
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.quiz-feedback.correct {
    display: block;
    background-color: var(--color-success-light);
    border: 1px solid var(--color-success);
}

.quiz-feedback.incorrect {
    display: block;
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
}

/* Breadcrumb styles */
.quiz-breadcrumb {
    margin-bottom: var(--spacing-lg);
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--text-color);
    opacity: 0.9;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Empty and error states */
.quiz-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxl);
    color: var(--text-color);
    opacity: 0.9;
    text-align: center;
}

.quiz-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}

.quiz-error-message {
    padding: var(--spacing-lg);
    margin: var(--spacing-lg);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}

.quiz-error-container {
    padding: var(--spacing-xl);
    color: var(--color-danger);
    text-align: center;
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-md);
    margin: var(--spacing-lg);
}

.quiz-error-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-danger);
}

.quiz-selector-info {
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    color: var(--text-color);
    font-style: italic;
    opacity: 0.8;
}

/* Quiz selector container - visibility controlled via data attributes only */
.quiz-selector-container {
    margin: var(--spacing-sm) 0 var(--spacing-lg) var(--spacing-xl);
}

/* Topics layout */
.quiz-topics-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    width: 100%;
    margin-top: var(--spacing-sm);
}

.quiz-topics-column {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}



.quiz-topics-heading {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin: 0 0 clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
    color: var(--text-color);
}

.quiz-topics-helper {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
    margin-top: var(--spacing-sm);
    font-style: italic;
    width: 100%;
}

.quiz-topics-helper.warning {
    color: var(--color-danger);
    font-weight: 500;
}

.quiz-selector-item.selected {
    background-color: rgb(77 144 254 / 10%);
}

[data-theme="dark"] .quiz-selector-item.selected {
    background-color: rgb(93 159 255 / 20%);
}

/* Invalid selection animation */
.invalid-selection {
    border: 2px solid var(--color-danger);
    background-color: var(--color-danger-light);
    box-shadow: 0 0 0 4px rgb(220 53 69 / 25%);
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Disabled topic styles */
.quiz-selector-item.disabled-topic {
    opacity: 0.9;
    cursor: not-allowed;
    position: relative;
    border-color: var(--light-border);
    background-color: var(--light-bg);
}

.quiz-selector-item.disabled-topic:hover {
    background-color: var(--light-bg);
    box-shadow: none;
}

.quiz-selector-item.disabled-topic label {
    cursor: not-allowed;
}

/* Tooltip styles for disabled topics */
.quiz-selector-item.disabled-topic::before {
    content: attr(title);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: rgb(0 0 0 / 80%);
    color: var(--color-text-inverse);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 10;
    pointer-events: none;
}

.quiz-selector-item.disabled-topic::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgb(0 0 0 / 80%) transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 10;
    pointer-events: none;
}

.quiz-selector-item.disabled-topic:hover::before,
.quiz-selector-item.disabled-topic:hover::after {
    opacity: 1;
    visibility: visible;
}

[data-theme="dark"] .quiz-selector-item.disabled-topic {
    background-color: var(--bg-color);
}

[data-theme="dark"] .quiz-selector-item.disabled-topic:hover {
    background-color: var(--bg-color);
}

[data-theme="dark"] .quiz-selector-item.disabled-topic::before {
    background-color: rgb(50 50 50 / 90%);
    color: var(--text-color);
}

[data-theme="dark"] .quiz-selector-item.disabled-topic::after {
    border-color: rgb(50 50 50 / 90%) transparent transparent;
}

/* Quiz completion styles */
.quiz-completion-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxl);
    color: var(--text-color);
    text-align: center;
    background-color: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-lg) 0;
}

.quiz-completion-state h3 {
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--color-success);
    font-size: clamp(var(--font-size-lg), 4vw, 1.5rem);
}

.quiz-completion-stats {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

.quiz-completion-stats p {
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
}

/* Assessment specific styles */
.assessment-question-container {
    position: relative;
}

.assessment-progress {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.assessment-end-link {
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-lg);
    transition: color 0.2s ease;
}

/* View All Questions progress indicator styles (similar to assessment progress) */
.view-all-questions-progress {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.assessment-prev-button:disabled,
.assessment-prev-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--button-disabled);
    color: var(--color-neutral);
    border-color: var(--light-border);
}

.assessment-prev-button:disabled:hover,
.assessment-prev-button.disabled:hover {
    background-color: var(--button-disabled);
    color: var(--color-neutral);
    border-color: var(--light-border);
    transform: none;
}

/* Knowledge limit and challenging question buttons - keep custom colors but use .btn base */
.knowledge-limit-button {
    /* Base styling inherited from .btn */
    font-size: var(--font-size-xs);
    flex: 1 1 auto;
    min-width: 140px;
    background-color: var(--color-warning);
    color: var(--color-text-inverse);
}

.knowledge-limit-button:hover {
    background-color: color-mix(in srgb, var(--color-warning) 85%, var(--color-warning-dark));
}

.challenging-question-button {
    /* Base styling inherited from .btn */
    font-size: var(--font-size-xs);
    flex: 1 1 auto;
    min-width: 140px;
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
}

.challenging-question-button:hover {
    background-color: color-mix(in srgb, var(--color-danger) 90%, var(--color-surface-darkest));
}

/* Assessment recommendation overlay */

/* Enhanced with .modal-system-overlay pattern */
.assessment-recommendation-overlay {
    /* Base overlay functionality leverages .modal-system-overlay patterns */
    position: fixed;
    inset: 0;
    background-color: var(--modal-backdrop-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--modal-z-index);
    padding: var(--modal-padding);
    transition: opacity var(--modal-animation-duration) ease;
    box-sizing: border-box;
}

/* Assessment recommendation overlay visibility via data attributes */

/* Enhanced with .modal-system-container pattern */
.assessment-recommendation-card {
    /* Base container functionality leverages .modal-system-container patterns */
    background: var(--bg-color);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--modal-shadow);
    max-width: 500px;
    text-align: center;
    transform: scale(1);
    transition: transform var(--modal-animation-duration) ease,
                background-color 0.3s ease,
                border-color 0.3s ease;
    pointer-events: auto;

    /* Assessment-specific styling */
    border: 2px solid var(--focus-color);
    padding: var(--spacing-xxl);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.assessment-recommendation-card h3 {
    color: var(--focus-color);
    margin: 0 0 var(--spacing-lg) 0;
}

.recommendation-details {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    text-align: left;
}

.recommendation-details h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
}

.recommendation-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-xl);
}

.assessment-results {
    border: 2px solid var(--focus-color);
}

.assessment-results h3 {
    color: var(--focus-color);
}

.assessment-recommendation {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
    text-align: left;
}

.assessment-recommendation h4 {
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--focus-color);
}

/* .assessment-actions uses .prompt-button-container from mystyle.css */
.assessment-actions {
    flex-wrap: wrap;

    /* Base flex layout handled by .prompt-button-container */
}

.knowledge-limit-results {
    border-color: var(--color-warning);
}

.knowledge-limit-results h3 {
    color: var(--color-warning);
}

/* Quiz section header - inherits full-width from .section-header, adds flex layout */
.section-header.quiz-section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Quiz header inner container for layout */
.quiz-header-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    width: 100%;
}

/* Quiz header title styling */
.quiz-header-inner h3 {
    margin: 0;
    flex-shrink: 0;
}

.quiz-mode-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
}

.quiz-mode-container span {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
}

.quiz-mode-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-xs);
    min-width: 140px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

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

.topic-list {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin: var(--spacing-lg) 0;
}

.topic-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-color);
}

.topic-item.show-more {
    margin-top: var(--spacing-sm);
    padding-left: 1.6rem;
}

.topic-item input[type="checkbox"],
.topic-item input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--focus-color);
}

.topic-item label {
    color: var(--text-color);
    cursor: pointer;
}

/* Disabled scope option styles */
.quiz-scope-option-disabled {
    opacity: 0.9;
    cursor: not-allowed;
}

.quiz-scope-option-disabled input[type="radio"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.quiz-scope-option-disabled label {
    cursor: not-allowed;
    color: var(--text-color);
    opacity: 0.6;
}

.quiz-scope-option-disabled input[type="radio"]:disabled {
    accent-color: var(--light-border);
    background-color: var(--light-bg);
}

.quiz-scope-option-disabled a {
    color: var(--focus-color);
    opacity: 1;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

.quiz-scope-option-disabled a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Responsive Design */
@media (width <= 700px) {
    .quiz-button {
        width: 100%;
    }
    
    .quiz-topics-container {
        flex-direction: column;
    }
    
    .quiz-topics-column {
        width: 100%;
    }
    
    /* Assessment buttons always remain in single row with equal sizing */
    
    .recommendation-actions {
        flex-direction: column;
    }

    .assessment-actions {
        flex-direction: column;
    }

    .assessment-recommendation-card {
        padding: var(--spacing-xl);
        margin: var(--spacing-sm);
    }
}

@media (width <= 576px) {
    .quiz-question-text {
        font-size: var(--font-size-md);
    }
    
    .quiz-answer {
        padding: calc(var(--spacing-sm) * 0.75) var(--spacing-sm);
    }
    
    .quiz-selector-item {
        padding: 0.4rem;
    }
    
    .quiz-selector-item label {
        font-size: var(--font-size-xs);
    }
    
    .assessment-progress {
        padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    }
    
    .view-all-questions-progress {
        padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    }

    .assessment-buttons {
        margin-top: var(--spacing-lg);
    }
}

/* Assessment buttons font size and padding adjustment for narrow screens to prevent overflow */
@media (width <= 420px) {
    .assessment-buttons .btn {
        font-size: var(--font-size-xs); /* Shrink from default to prevent text overflow */
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

@media (width <= 350px), (height <= 450px) {
    .quiz-page-container {
        padding: calc(var(--spacing-xs) * 0.5);
    }
    
    .quiz-answer {
        padding: var(--spacing-xs);
    }
    
    .quiz-button {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: calc(var(--font-size-sm) * 0.9);
    }
}

/* ===== Quiz Topics Tabs (Mobile-Friendly Quiz Configuration) ===== */
.quiz-topics-tabs-container {
    margin-top: 0.75rem;
}

.quiz-topics-tab-headers {
    display: flex;
    border-bottom: 2px solid var(--light-border, #ddd);
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.quiz-topics-tab-headers::-webkit-scrollbar {
    display: none;
}

.quiz-topics-tab-header {
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color, #666);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
}

.quiz-topics-tab-header:hover {
    color: var(--focus-color, #4D90FE);
    background-color: var(--light-bg, #f5f5f5);
}

.quiz-topics-tab-header.active {
    color: var(--focus-color, #4D90FE);
    border-bottom-color: var(--focus-color, #4D90FE);
    font-weight: 600;
}

.quiz-topics-tab-content {
    position: relative;
}

/* All quiz topics tabs - visibility controlled via data attributes only in JavaScript */

.quiz-topics-tab .quiz-topics-list {
    max-height: none;
    overflow-y: visible;
}

/* Metacat group container */
.quiz-metacat-group {
    margin-bottom: var(--spacing-xs);
}

/* Metacat header row with expand toggle */
.quiz-metacat-header {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Expand/collapse caret */
.quiz-metacat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-height: 44px;
    cursor: pointer;
    transition: transform var(--transition-speed) ease;
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    user-select: none;
}

.quiz-metacat-toggle[aria-expanded="true"] {
    transform: rotate(90deg);
}

/* Direct categories aligned with metacat items using padding */
.quiz-direct-category-item {
    /* Account for toggle width + gap between toggle and selector-item + selector-item's own left padding */
    padding-left: calc(24px + var(--spacing-xs) + var(--spacing-sm));
}

/* Nested categories container */
.quiz-metacat-children {
    /* Indent children to show hierarchy: toggle width + gap + extra spacing for visual nesting */
    padding-left: calc(24px + var(--spacing-xs) + var(--spacing-lg));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Metacat with no categories — grayed out, non-interactive */
.quiz-metacat-group--empty .quiz-metacat-toggle {
    visibility: hidden;
    cursor: default;
}

.quiz-metacat-group--empty .quiz-metacat-item {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Mobile optimizations for tabs */
@media (width <= 768px) {
    .quiz-topics-tab-headers {
        justify-content: flex-start;
        gap: 0;

        /* Add scroll indicators */
        background: linear-gradient(to right, var(--bg-color) 10px, transparent 10px, transparent calc(100% - 10px), var(--bg-color) calc(100% - 10px));
        padding: 0 10px;
    }
    
    .quiz-topics-tab-header {
        flex: 1;
        text-align: center;
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
        min-height: 44px; /* Touch target size */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Add mobile-specific tab indicators */
    .quiz-topics-tab-headers::before,
    .quiz-topics-tab-headers::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 10px;
        pointer-events: none;
        z-index: 1;
    }
    
    .quiz-topics-tab-headers::before {
        left: 0;
        background: linear-gradient(to right, var(--bg-color), transparent);
    }
    
    .quiz-topics-tab-headers::after {
        right: 0;
        background: linear-gradient(to left, var(--bg-color), transparent);
    }
}

/* Very small screen optimizations */
@media (width <= 480px) {
    .quiz-topics-tab-header {
        font-size: 0.8rem;
        padding: 0.75rem 0.25rem;
        min-width: 80px;
    }
    
    /* Consider dropdown for very small screens if many tabs */
    .quiz-topics-tab-headers.many-tabs {
        flex-direction: column;
        overflow: visible auto;
        max-height: 200px;
    }
    
    .quiz-topics-tab-headers.many-tabs .quiz-topics-tab-header {
        width: 100%;
        text-align: left;
        border-bottom: 1px solid var(--light-border);
        border-right: none;
    }
}

/* Selected topics display */
.quiz-selected-topics-display {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    font-size: var(--font-size-xs);
    color: var(--text-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.quiz-selected-topics-container {
    margin-top: var(--spacing-xs);
}

/* Dark mode: bg/text/border auto-inherit from --tag-public-* dark overrides in mystyle.css */
[data-theme="dark"] .quiz-selected-topic-tag {
    --quiz-remove-button-color: #ef5350;
    --quiz-remove-button-hover-bg: rgb(239 83 80 / 10%);
}

/* Quiz context notification toast — CSS-driven animation (PAT-029 compliant) */
@keyframes quiz-notification-enter {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes quiz-notification-exit {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.quiz-context-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--quiz-notification-bg, var(--color-success));
    color: var(--quiz-notification-text, var(--color-text-inverse));
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    z-index: 10000;
    font-size: 14px;
    max-width: 300px;
    pointer-events: none;
    animation: quiz-notification-enter 0.3s ease forwards;
}

.quiz-context-notification--dismissing {
    animation: quiz-notification-exit 0.3s ease forwards;
}

/* ===== QUIZ CONFIGURATION STYLES ===== */

/* Standardized quiz configuration replacing inline styles */
.quiz-info-text {
    margin-top: var(--spacing-md);
    font-style: italic;
    opacity: 0.9;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
}

.quiz-disabled-option {
    opacity: 0.6;
    font-style: italic;
}

.quiz-disabled-option .radio-label {
    opacity: 0.6;
    font-style: italic;
}

.quiz-toggle-label {
    margin-left: var(--spacing-xxs);
    font-size: var(--font-size-sm);
    line-height: 1;
}

.quiz-toggle-label.summary-view {
    font-size: var(--font-size-xs);
}

.quiz-toggle-row.expanded-view {
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
    margin-left: var(--spacing-sm);
}

.quiz-ratio-container {
    margin-top: var(--spacing-md);
}

.quiz-ratio-radio-container {
    margin-bottom: var(--spacing-sm);
}

.quiz-auto-ratio-container {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.quiz-custom-ratio-container {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-sm);
}

.quiz-custom-ratio-container.disabled {
    opacity: 0.5;
}

.quiz-custom-radio-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.quiz-slider-container {
    display: flex;
    align-items: center;
    margin-left: var(--spacing-lg);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.quiz-ratio-value {
    min-width: 3rem;
    text-align: center;
    font-weight: bold;
}

.quiz-ratio-slider {
    flex: 1;
    margin: 0 var(--spacing-sm);
}

.quiz-ratio-description {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin-left: var(--spacing-lg);
}

.quiz-column-full-width {
    width: 100%;
}

/* ================================
   SECTION - QUIZ CONTEXT DISCOVERY MODAL
   ================================ */

.context-discovery-modal {
    max-width: 500px;
    margin: 0 auto;
}

.context-discovery-subtitle {
    color: var(--text-color-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.context-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.context-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--surface-color, var(--bg-color));
}

.context-option:hover {
    border-color: var(--accent-color);
    background: var(--surface-hover-color, var(--button-secondary-bg));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}

.context-option:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
}

.context-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.context-details {
    flex: 1;
    min-width: 0;
}

.context-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 var(--spacing-xs) 0;
}

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

/* Dark mode support for context discovery modal */
[data-theme="dark"] .context-option {
    --surface-color: var(--bg-color-secondary);
    --surface-hover-color: rgb(255 255 255 / 5%);
    --border-color: rgb(255 255 255 / 10%);
}

[data-theme="dark"] .context-option:hover {
    --border-color: var(--accent-color);

    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}

/* ================================
   SECTION - CATEGORY PAGE STYLES
   ================================ */

.category-page-container {
    /* Base layout styles provided by .page-container from mystyle.css */

    /* These are category-specific additions */
    padding: var(--spacing-sm);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    width: 100%;
    box-sizing: border-box;
    
    /* For layout structure */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.category-page-content-wrapper {
    /* Base layout styles provided by .page-content-wrapper from mystyle.css */

    /* These are category-specific additions */
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.category-page-overall-row {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);

    /* Use consistent background pattern */
    background-color: var(--light-bg);
    transition: background-color var(--transition-speed) ease;
}

.category-page-score-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    margin-right: var(--spacing-sm);
    min-width: 200px;
}

.category-page-description {
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.category-page-description .expandable-text-content {
    font-style: normal;
}

/* Category page wall container - ensure proper spacing and prevent overlaps */
.category-page-category-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: var(--spacing-lg) 0;

    /* Increased margin for better separation */
    padding: var(--spacing-xs);

    /* Add padding to prevent edge clipping */
    overflow: visible;

    /* Allow recent indicators to show */
    position: relative;

    /* Proper positioning context */
}

@media (width <= 768px) {
    .category-page-category-container {
        margin: var(--spacing-md) var(--spacing-xs);

        /* Reduce horizontal margin on mobile */
        padding: var(--spacing-xs);

        /* Ensure adequate padding */
    }
}

.category-page-continue-button-container {
    display: flex;
    margin: var(--spacing-md) var(--spacing-xs);
}

/* Disabled link styling */
.disabled-link {
    pointer-events: none;
    color: var(--color-neutral);
    text-decoration: none;
    opacity: 0.5;
}

/* Progress bar minimum width for category pages */
.category-progress-bar-min-width {
    min-width: 150px;
}

/* Responsive adjustments - basically disabled because so narrow */
@media (width <= 300px) {
    .category-page-overall-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-page-score-group {
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }

    .category-page-continue-button-container {
        margin: var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
    }
}

/* ================================
   SECTION - RECENT PROGRESS PAGE STYLES
   ================================ */

/* Date controls */
.recent-progress-date-controls {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .recent-progress-date-controls {
    background-color: rgb(255 255 255 / 5%);
}

.recent-progress-date-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.recent-progress-date-label {
    font-weight: bold;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

/* Test-Out Mode controls */
.recent-progress-testout-controls {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    display: flex;
    justify-content: center;
}

[data-theme="dark"] .recent-progress-testout-controls {
    background-color: rgb(255 255 255 / 5%);
}

.recent-progress-testout-checkbox-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.recent-progress-testout-checkbox {
    margin: 0;
    cursor: pointer;
}

.recent-progress-testout-label {
    font-weight: bold;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

.recent-progress-testout-link {
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-xs);
}

/* Test-Out Mode component integration */
.recent-progress-testout-controls .testout-toggle-component {
    background: none;
    padding: 0;
    border-radius: 0;
    margin: 0;
}

.recent-progress-testout-controls .testout-toggle-checkbox-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.recent-progress-testout-controls .testout-toggle-checkbox {
    margin: 0;
    cursor: pointer;
}

.recent-progress-testout-controls .testout-toggle-label {
    font-weight: bold;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

.recent-progress-testout-controls .help-link-component {
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-xs);
}

/* Comparison layout */
.recent-progress-comparison-container {
    margin: calc(var(--spacing-lg) * 1.25) 0;
}

.recent-progress-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-lg) * 1.25);
    margin: var(--spacing-md) 0;
    align-items: start;
}

.recent-progress-comparison-grid.single-column {
    grid-template-columns: 1fr;
}

.recent-progress-comparison-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 100%;
}

.recent-progress-comparison-header {
    text-align: center;
    font-weight: bold;
    font-size: clamp(var(--font-size-md), 2.5vw, 1.1rem);
    color: var(--text-color);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .recent-progress-comparison-header {
    background-color: rgb(255 255 255 / 10%);
    color: var(--text-color);
}

/* Wall items */
.recent-progress-category-item {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    height: var(--card-height, auto);
}

.recent-progress-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    min-height: 2rem;
}

.recent-progress-category-title {
    font-weight: bold;
    font-size: var(--font-size-md);
    color: var(--text-color);
    word-wrap: break-word;
    line-height: 1.3;
}

.recent-progress-category-item-with-label .recent-progress-category-title {
    padding-right: 80px; /* Make room for the timeframe label */
}

.recent-progress-category-link {
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    white-space: nowrap;
}

.recent-progress-category-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-sm) 0;
    flex: 1;
    min-height: 120px;
}

/* No change message */
.recent-progress-category-container .no-change-message {
    text-align: center;
    font-style: italic;
    color: var(--color-neutral);
    padding: calc(var(--spacing-lg) * 1.25) var(--spacing-md);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .recent-progress-category-container .no-change-message {
    color: var(--color-neutral-light);
}

.recent-progress-no-changes {
    text-align: center;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background-color: var(--color-bg-tertiary);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
}

.recent-progress-no-changes h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.recent-progress-no-changes p {
    margin: var(--spacing-xs) 0;
}

.recent-progress-no-changes p:last-child {
    margin-bottom: 0;
}

[data-theme="dark"] .recent-progress-no-changes {
    background-color: var(--color-bg-secondary);
}

.recent-progress-separator {
    margin: var(--spacing-lg) 0;
    height: 1px;
    background-color: var(--light-border);
    opacity: 0.5;
    flex-shrink: 0;
}

/* Progress indicators */
.recent-progress-category-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding: var(--spacing-sm);
    flex-shrink: 0;
}

/* Mobile layout styles */
.recent-progress-mobile-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.recent-progress-pair-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    background-color: var(--bg-color);
}

[data-theme="dark"] .recent-progress-pair-container {
    border-color: var(--color-neutral-dark);
}

.recent-progress-pair-separator {
    height: 1px;
    background-color: var(--light-border);
    margin: var(--spacing-sm) 0;
    opacity: 0.3;
}

.recent-progress-category-item-with-label {
    position: relative;
}

.recent-progress-timeframe-label {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background-color: var(--focus-color);
    color: var(--color-text-inverse);
    padding: calc(var(--spacing-xs) * 0.75) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-weight: bold;
    z-index: var(--z-dropdown);
    max-width: 60px;
    text-align: center;
}

/* Responsive adjustments */
@media (width <= 600px) {
    .recent-progress-comparison-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .recent-progress-category-item {
        min-height: auto;
    }
    
    .recent-progress-category-container {
        min-height: 100px;
    }
    
    .recent-progress-date-controls {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .recent-progress-category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        min-height: auto;
    }
}

/* Filter interface styles */
.recent-progress-button-container {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.recent-progress-filter-icon {
    background: none;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-width: 40px;
    height: 40px;
}

.recent-progress-filter-icon:hover {
    color: var(--text-color);
    border-color: var(--color-primary);
    background-color: var(--light-bg);
}

[data-theme="dark"] .recent-progress-filter-icon {
    border-color: var(--color-neutral);
    background-color: var(--header-bg);
}

[data-theme="dark"] .recent-progress-filter-icon:hover {
    border-color: var(--color-primary);
    background-color: rgb(255 255 255 / 10%);
}

.recent-progress-filter-container {
    margin: var(--spacing-md) 0 0 0;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    transition: all 0.3s ease;
    overflow: hidden;
}

[data-theme="dark"] .recent-progress-filter-container {
    background-color: rgb(255 255 255 / 5%);
    border-color: var(--color-neutral);
}

.recent-progress-filter-hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-10px);
    border-width: 0;
}

.recent-progress-filter-visible {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
}

.recent-progress-filter-search .search-component-wrapper {
    width: 100%;
}

.recent-progress-filter-search .search-component-input {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .recent-progress-filter-search .search-component-input {
    border-color: var(--color-neutral);
    background-color: var(--header-bg);
    color: var(--text-color);
}

.recent-progress-no-results {
    text-align: center;
    padding: calc(var(--spacing-lg) * 1.5);
    margin: var(--spacing-lg) 0;
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .recent-progress-no-results {
    background-color: rgb(255 255 255 / 5%);
    border-color: var(--color-neutral);
}

.recent-progress-no-results h3 {
    color: var(--text-color);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-md);
}

.recent-progress-no-results p {
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
}

/* Mobile responsive filter styles */
@media (width <= 768px) {
    .recent-progress-button-container {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
    }
    
    .recent-progress-filter-icon {
        align-self: center;
        min-width: 36px;
        height: 36px;
    }
    
    .recent-progress-filter-container {
        margin: var(--spacing-sm) 0 0 0;
        padding: var(--spacing-sm);
    }
    
    .recent-progress-filter-search .search-component-input {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
    
    .recent-progress-no-results {
        padding: var(--spacing-md);
        margin: var(--spacing-md) 0;
    }
    
    .recent-progress-no-results h3 {
        font-size: var(--font-size-sm);
    }
    
    .recent-progress-no-results p {
        font-size: var(--font-size-xs);
    }
}

/* ================================
   SECTION - SEARCH PAGE STYLES
   ================================ */

/* 
 * Search Page Standardization Integration
 * 
 * This section demonstrates best-in-class integration with mystyle.css patterns:
 * 
 * STANDARDIZED PATTERNS USED:
 * - .btn .btn-secondary → All pagination buttons (conformant button system)
 * - #core-page-container
 * - #content-container → Enhanced by .search-page-content-wrapper
 * - CSS custom properties → Full semantic color and typography variables
 * - Layout patterns → Documented for reuse
 *
 * PATTERN ENHANCEMENTS:
 * - Container patterns provide base functionality + search-specific layouts
 * - Button patterns (.btn .btn-secondary) provide navigation behavior + search pagination styles
 * - Typography patterns provide responsive scaling + search content hierarchy
 * - Color patterns provide theme support + search result type differentiation
 * 
 * CROSS-FILE COMPATIBILITY:
 * - Works harmoniously with mystyle.css base patterns
 * - No conflicts with other page-styles.css sections
 * - Leverages shared design tokens for consistency
 * - Provides model for pattern integration in other sections
 */

.search-page-separator {
    margin: calc(var(--spacing-xs) * 1.25) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--text-color);
    opacity: 0.3;
}

/* Search container */
.search-page-search-container {
    margin: var(--spacing-lg) 0;
    width: 100%;
    max-width: 600px;
}

.search-page-hint {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

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

.search-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}

.search-page-button {
    /* All base button styles provided by .btn from mystyle.css */

    /* These are specific responsive adjustments */
    margin-top: var(--spacing-md);
    padding: clamp(8px, 2vw, 10px) clamp(16px, 4vw, 20px);
    font-size: clamp(14px, 3vw, 16px);
}

/* Results */
.search-results-count {
    margin: var(--spacing-md) 0;
    font-size: var(--font-size-md);
    color: var(--text-color);
}

.search-results-container {
    width: 100%;
    max-width: 800px;
    margin-top: var(--spacing-md);
}

/* Search result items */
.search-page-content-wrapper .search-result-item {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-speed);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--light-border);
}

[data-theme="light"] .search-page-content-wrapper .search-result-item {
    background-color: var(--hover-bg);
}

[data-theme="dark"] .search-page-content-wrapper .search-result-item {
    background-color: var(--color-neutral-dark);
    border-color: var(--color-neutral-dark);
}

.search-page-content-wrapper .search-result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}

[data-theme="dark"] .search-page-content-wrapper .search-result-item:hover {
    background-color: var(--hover-bg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}

.search-page-content-wrapper .search-result-title {
    font-size: var(--font-size-md);
    margin-bottom: calc(var(--spacing-xs) * 0.75);
    font-weight: bold;
    transition: color var(--transition-speed);
    color: var(--focus-color);
}

.search-page-content-wrapper .search-result-item:hover .search-result-title {
    text-decoration: underline;
}

/* Result type badges */
.search-page-content-wrapper .search-result-type {
    display: inline-block;
    font-size: var(--font-size-xs);
    padding: calc(var(--spacing-xs) * 0.5) var(--spacing-sm);
    border-radius: calc(var(--border-radius) * 0.75);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.search-page-content-wrapper .search-result-type.type-metacat {
    background-color: var(--color-info-light);
    color: var(--color-info);
}

.search-page-content-wrapper .search-result-type.type-category {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.search-page-content-wrapper .search-result-type.type-lesson {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.search-page-content-wrapper .search-result-type.type-activity {
    background-color: var(--color-secondary-light);
    color: var(--color-secondary);
}

.search-page-content-wrapper .search-result-type.type-page {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.search-page-content-wrapper .search-result-content {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
    line-height: 1.5;
    color: var(--text-color);
    opacity: 0.85;
}

/* Path indicator */
.search-page-content-wrapper .search-result-path {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin-top: calc(var(--spacing-xs) * 0.75);
    opacity: 0.8;
}

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

/* Highlight matches */
.search-page-content-wrapper .search-highlight {
    background-color: var(--color-warning);
    color: var(--color-surface-darkest);
    padding: 0 2px;
    border-radius: var(--border-radius-xs);
    display: inline;
}

[data-theme="dark"] .search-page-content-wrapper .search-highlight {
    background-color: color-mix(in srgb, var(--color-warning) 85%, var(--color-warning-dark));
}

/* Loading spinner */
.search-spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: calc(var(--spacing-lg) * 1.25);
}

.search-page-content-wrapper .search-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgb(0 123 255 / 20%);
    border-radius: 50%;
    border-top-color: var(--focus-color);
    animation: search-spin 1s linear infinite;
}

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

/* No results message */
.search-page-content-wrapper .search-no-results {
    padding: calc(var(--spacing-lg) * 1.25);
    text-align: center;
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-md);
    color: var(--text-color);
}

[data-theme="dark"] .search-page-content-wrapper .search-no-results {
    background-color: var(--color-neutral-dark);
    border-color: var(--color-neutral-dark);
}

/* Pagination */
.search-pagination {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--spacing-lg) * 1.25);
    margin-bottom: calc(var(--spacing-lg) * 1.25);
    gap: var(--spacing-sm);
}

.search-pagination-active {
    background-color: var(--focus-color);
    color: var(--color-text-inverse);
    border-color: var(--focus-color);
}

.search-pagination-active:hover {
    background-color: var(--focus-color);
    transform: none; /* Override nav-button hover transform when active */
}

/* Pagination ellipsis */
.pagination-ellipsis {
    margin: 0 var(--spacing-xs);
    color: var(--text-color);
    opacity: 0.6;
}

/* Mobile responsiveness */
@media (width <= 600px) {
    .search-page-content-wrapper .search-result-item {
        padding: calc(var(--spacing-sm) * 1.25);
    }
    
    .search-pagination-button {
        /* Mobile responsive styles handled by .btn .btn-secondary patterns in mystyle.css */
        padding: calc(var(--spacing-xs) * 1.5) clamp(8px, 3vw, 12px);
    }
}

/* ===== SECTION - METACAT PAGE STYLES ===== */

.metacat-page-separator {
    margin: clamp(0.375rem, 1vw, 0.5rem) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--text-color);
    opacity: 0.3;
}

.metacat-page-overall-row {
    margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-lg);
    max-width: 90%;
    max-height: 100px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.metacat-page-score-text {
    margin-right: var(--spacing-md);
}

.metacat-page-link {
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
}

/* New CSS classes replacing inline styles for improved separation of concerns */
.no-content-message {
    margin: var(--spacing-lg);
}

.metacat-page-category-row {
    margin: var(--spacing-sm) var(--spacing-xs) 2px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.metacat-page-category-left {
    float: left;
    width: clamp(80px, 15vw, 120px);
    height: clamp(80px, 15vw, 120px);
    flex-shrink: 0;
}

.metacat-page-category-right {
    flex: 1;
    min-width: 0;
    vertical-align: top;
    margin-left: var(--spacing-xs);
    overflow: hidden;
    word-wrap: break-word;
}

.metacat-page-category-title {
    margin: 0 var(--spacing-md) 0 0;
    display: block;
}

.metacat-page-progress {
    height: 100%;
    background-color: var(--color-success);
    transition: width 0.5s ease-in-out;
    width: var(--progress-value, 0%);
}

.metacat-page-footer {
    margin-top: auto;
    padding: var(--spacing-md) 0;
    width: 100%;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
}

.metacat-page-description {
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.metacat-page-description-toggle {
    cursor: pointer;
    color: var(--focus-color);
    text-decoration: underline;
}

.metacat-page-description-content {
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs);
    background-color: rgb(0 0 0 / 3%);
    border-radius: var(--border-radius-sm);
}

[data-theme="dark"] .metacat-page-description-content {
    background-color: rgb(255 255 255 / 5%);
}

/* Metacat page component styles */
.metacat-video-row {
    margin-bottom: var(--spacing-xs);
}

.metacat-actions-row {
    margin-top: calc(-1 * var(--spacing-xs));
}

.metacat-description-row {
    margin-bottom: var(--spacing-xs);
}

.metacat-video-link {
    margin: 0 var(--spacing-sm) 0 0;
}

.metacat-music-ideas-link {
    white-space: nowrap;
}

.metacat-clear-link {
    margin: 0 var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
}

.metacat-goals-link {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    display: block;
}

/* ============================================
   Ubercat Page Styles
   ============================================ */

/* Ubercat page link styling - used for breadcrumb and chart links */
.ubercat-page-link {
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
}

/* Ubercat page description - displayed below header */
.ubercat-page-description {
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

/* Ubercat child title links in table */
.ubercat-child-title {
    /* Uses default link styles with base link color and hover behavior */
    font-weight: 500;
}

/* Ubercat page error message */
.ubercat-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-error-text);
}

[data-theme="dark"] .ubercat-page-error {
    background-color: rgb(255 100 100 / 10%);
    border-color: rgb(255 100 100 / 30%);
}

/* Responsive layout adjustments */
@media (width <= 576px) {
    .metacat-page-category-row {
        flex-direction: column;
    }
    
    .metacat-page-category-left {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        margin-bottom: var(--spacing-sm);
    }
    
    .metacat-page-category-right {
        margin-left: 0;
    }
    
    .metacat-page-overall-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== SECTION - MY CONTENT PAGE STYLES ===== */

.my-content-page-separator {
    margin: clamp(0.375rem, 1vw, 0.5rem) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--text-color);
    opacity: 0.3;
}

.my-content-page-link {
    margin-right: var(--spacing-sm);
}

/* Ubercat collapsible sections */
.ubercat-section {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    overflow: hidden; /* Ensure border-radius clips content */
}

.ubercat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    cursor: pointer;
    user-select: none;
    margin: 0; /* Reset default h3 margin */

    /* No border - section has the border */
}

.ubercat-header:hover {
    background-color: var(--hover-bg, rgb(0 0 0 / 5%));
}

[data-theme="dark"] .ubercat-header:hover {
    background-color: rgb(255 255 255 / 5%);
}

.ubercat-header:focus {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

[data-theme="dark"] .ubercat-section {
    border-color: var(--light-border);
}

.ubercat-title {
    font-size: var(--font-size-md);
    font-weight: 600;

    /* Use default anchor styles - no custom styling needed */
}

.section-toggle-caret {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    transition: transform 0.2s ease;
    min-width: 44px; /* Touch target */
    min-height: 44px; /* Touch target */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ubercat-content {
    /* No margin-top - connect directly to header */
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    border-top: 1px solid var(--light-border);
}

[data-theme="dark"] .ubercat-content {
    background-color: var(--bg-color-deeper);
    border-top-color: var(--light-border);
}

/* Mobile responsiveness for ubercat sections */
@media (width <= 768px) {
    .ubercat-header {
        padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
        min-height: 44px; /* Touch target */
    }

    .ubercat-title {
        font-size: var(--font-size-sm);
    }

    .section-toggle-caret {
        font-size: var(--font-size-md);
    }

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

/* Table styling - see also `.my-content-table` rules below for additional styles */
[data-theme="dark"] .my-content-table th {
    background-color: var(--header-bg);
    border-bottom-color: var(--light-border);
}

.my-content-table th:hover {
    background-color: var(--toggle-bg);
}

[data-theme="dark"] .my-content-table th:hover {
    background-color: var(--color-neutral-dark);
}

[data-theme="dark"] .my-content-table td {
    border-bottom-color: var(--light-border);
}

/* Progress bar */
.my-content-progress-bar {
    /* Uses .progress-bar base class from mystyle.css */
    height: 20px;
    margin: 0;
}

.my-content-progress-bar-fill {
    height: 20px;
    background-color: var(--color-success);
    transition: width 0.5s ease-in-out;
    width: var(--progress-value, 0%);
}

/* Progress text */
.my-content-progress-text {
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

/* Goal star */
.my-content-goal-star {
    /* Uses .goal-star-base from mystyle.css */
    justify-content: left;
    margin-left: var(--spacing-md);
}

/* Mobile styles - Changed from 600px to 480px to keep table layout at 500px */
@media (width <= 480px) {
    /* Hide the table header in mobile view */
    .my-content-table thead {
        display: none;
    }

    /* Change table display from table to block */
    .my-content-table,
    .my-content-table tbody {
        display: block;
        width: 100%;
    }

    /* Transform rows into cards with two rows - uses .mobile-card-base */
    .my-content-table tr {
        /* Card styling provided by .mobile-card-base */
        margin-bottom: var(--spacing-md); /* Unique spacing for my-content */
        padding: var(--spacing-sm); /* Unique padding for my-content */
    }
    
    [data-theme="dark"] .my-content-table tr {
        box-shadow: 0 2px 4px rgb(255 255 255 / 10%);
    }
    
    /* Reset table cell styling */
    .my-content-table td {
        border: none;
        padding: 0;
    }
    
    /* First row - Content title and goal star */
    .my-content-table td:nth-child(2) {
        width: calc(100% - 50px);
        order: 1;
        font-size: var(--font-size-lg);
        font-weight: bold;
        margin-bottom: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .my-content-table td:nth-child(5) {
        order: 2;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .my-content-table td:nth-child(5) .my-content-goal-star {
        font-size: clamp(1.5rem, 4vw, 1.75rem);
    }

    /* Second row - Progress bar and chart link */
    .my-content-table td:nth-child(1) {
        order: 3;
        width: 65%;
        display: flex;
        align-items: center;
    }

    .my-content-table td:nth-child(1) .my-content-progress-bar {
        width: calc(100% - 40px);
        min-width: 100px;
    }

    .my-content-table td:nth-child(1) .my-content-progress-text {
        margin-left: var(--spacing-xs);
        min-width: 30px;
        text-align: right;
    }

    .my-content-table td:nth-child(4) {
        order: 4;
        width: 35%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .my-content-table td:nth-child(4) .my-content-page-link {
        margin: 0;
        font-size: var(--font-size-sm);
    }

    /* Third row - Path breadcrumb (full width) */
    .my-content-table td:nth-child(3) {
        order: 5;
        width: 100%;
        font-size: var(--font-size-sm);
        margin-top: var(--spacing-xs);
    }
}

/* Empty State */
.my-content-empty-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-color);
}

.my-content-empty-state h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
    color: var(--text-color);
}

.my-content-empty-state p {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-md);
}

/* ===== Local Walls Section Styles ===== */

.local-categories-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--light-border);
}

.section-header-base {
    margin-bottom: var(--spacing-md);
}

.section-title-base {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-color);
}

.section-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.9;
    margin: 0;
}

/* Local walls table */
.local-categories-table {
    /* Base table styling provided by .table-base */
    width: 100%;
    margin-top: var(--spacing-md);
}

.local-categories-table th {
    /* Base header styling provided by .table-header-base */
    padding: var(--spacing-sm);
}

.local-categories-table td {
    /* Base cell styling provided by .table-cell-base */
    padding: var(--spacing-sm);
    vertical-align: middle;
}

/* Local wall badge */
.local-category-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

[data-theme="dark"] .local-category-badge {
    background-color: var(--dark-warning-bg);
    color: var(--dark-warning-text);
}

/* Actions cell with multiple buttons */
.actions-cell {
    white-space: normal;
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.actions-cell .btn {
    margin-right: var(--spacing-xs);
}

.actions-cell .btn:last-child {
    margin-right: 0;
}

/* Empty state for local walls */
.empty-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-color);
    opacity: 0.9;
}

.empty-state p {
    margin: var(--spacing-xs) 0;
    font-size: var(--font-size-md);
}

/* Mobile styles for local walls table */
@media (width <= 600px) {
    /* Hide the table header in mobile view */
    .local-categories-table thead {
        display: none;
    }

    /* Change table display from table to block */
    .local-categories-table,
    .local-categories-table tbody {
        display: block;
        width: 100%;
    }

    /* Transform rows into cards - uses .mobile-card-base */
    .local-categories-table tr {
        margin-bottom: var(--spacing-md);
        padding: var(--spacing-sm);
    }

    /* Reset table cell styling */
    .local-categories-table td {
        border: none;
        padding: var(--spacing-xs) 0;
        display: block;
        width: 100%;
    }

    /* Badge cell */
    .local-categories-table td:nth-child(1) {
        margin-bottom: var(--spacing-xs);
    }

    /* Title cell */
    .local-categories-table td:nth-child(2) {
        font-size: var(--font-size-lg);
        font-weight: bold;
        margin-bottom: var(--spacing-xs);
    }

    /* Stats cell */
    .local-categories-table td:nth-child(3) {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-sm);
        opacity: 0.8;
    }

    /* Actions cell - stack buttons vertically on mobile */
    .local-categories-table td:nth-child(4) {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .local-categories-table .actions-cell .btn {
        width: 100%;
        margin-right: 0;
        justify-content: center;
    }
}

/* ===== SECTION - HTML PAGE STYLES ===== */
.html-page-content-wrapper {
    /* Base layout styles provided by .page-content-wrapper from mystyle.css */

    /* These are specific additions */
    min-height: 0;
    overflow: visible;
    align-items: left;
    min-width: var(--content-min-width);
}

.html-page-header {
    text-align: center;
    margin-bottom: clamp(var(--spacing-sm), 4vw, var(--spacing-md));
    color: var(--primary-color);
    font-size: clamp(1rem, 5vw, 2rem);
    padding: var(--spacing-sm);
    background-color: var(--header-bg);
    border-radius: var(--border-radius-sm);
    width: 100%;
    transition: background-color 0.3s ease;
}

.html-page-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--spacing-sm), 3vw, var(--spacing-md));
    width: 100%;
}

.html-page-image-container {
    width: 100%;
    display: flex;
    min-width: var(--content-min-width);
    min-height: var(--image-min-height);
}

.html-page-image {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    aspect-ratio: auto;
    content-visibility: auto;
    contain-intrinsic-size: auto var(--image-min-height);
}

.html-page-content-text {
    width: 100%;
    min-width: var(--content-min-width);
}

.html-page-content-text ul, 
.html-page-content-text ol {
    list-style-position: outside;
    padding-inline-start: 1.5em;
    font-size: clamp(0.5rem, 3vw, 1rem);
}

.html-page-content-text li {
    margin-bottom: clamp(0.25rem, 2vw, 0.5rem);
    width: 100%;
}

.html-page-content-text li::marker {
    color: var(--list-marker-color);
}

.html-page-buttons {
    display: flex;
    justify-content: left;
    width: 100%;
}

.html-page-audio-container {
    margin: var(--spacing-md) 0;
    width: 100%;
}

.html-page-video-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    width: 100%;
}

/* Loading state should be handled via data attributes in JavaScript instead of CSS classes */

.html-page-continue-button.btn-loading {
    opacity: 0.9;
    pointer-events: none;
}

.html-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}

.html-page-text-section {
    margin-bottom: var(--spacing-xs);
}

/* Responsive layout - wide and short screens */
@media (width >= 48rem) and (height <= 37.5rem) {
    .html-page-content {
        grid-template-columns: auto minmax(var(--content-min-width), 1fr);
        justify-items: start;
    }

    .html-page-image-container {
        margin-inline-end: var(--spacing-md);
        justify-content: flex-start;
    }

    .html-page-content-text {
        /* CSS Grid handles sizing - text takes remaining space after image */
        max-width: 100%;
    }
}

/* ===== SECTION - EMBED PAGE STYLES ===== */

.embed-page-content-wrapper {
    /* Base layout styles provided by .page-content-wrapper from mystyle.css */

    /* These are specific additions */
    min-height: 0;
    overflow: visible;
    align-items: left;
    min-width: var(--content-min-width);
}

.embed-page-header {
    text-align: center;
    margin-bottom: clamp(var(--spacing-sm), 4vw, var(--spacing-md));
    color: var(--primary-color);
    font-size: clamp(1rem, 5vw, 2rem);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    width: 100%;
    transition: background-color 0.3s ease;
}

.embed-page-attribution {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    background-color: var(--light-bg);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
}

.embed-page-source-link {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: bold;
}

.embed-page-source-link:hover {
    color: var(--primary-color-dark);
}

.embed-page-iframe-container {
    position: relative;
    width: 100%;
    min-height: 70vh;
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.embed-page-iframe {
    width: 100%;
    height: 70vh;
    min-height: 500px;
    border: none;
    display: block;
}

.embed-page-blocked {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-color);
}

.embed-page-blocked h3 {
    color: var(--color-warning);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1rem, 4vw, 1.5rem);
}

.embed-page-blocked p {
    margin-bottom: var(--spacing-sm);
    font-size: clamp(0.9rem, 3vw, 1rem);
}

.embed-page-direct-link {
    margin-top: var(--spacing-sm);
}

.embed-page-buttons {
    display: flex;
    justify-content: left;
    width: 100%;
}

.embed-page-continue-button.btn-loading {
    opacity: 0.9;
    pointer-events: none;
}

.embed-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}


/* ===== SECTION - API CONTENT PAGE STYLES ===== */

.api-content-page-wrapper {
    /* Base layout styles provided by .page-content-wrapper from mystyle.css */

    /* These are specific additions */
    min-height: 0;
    overflow: visible;
    align-items: left;
    min-width: var(--content-min-width);
}

.api-content-page-header {
    text-align: center;
    margin-bottom: clamp(var(--spacing-sm), 4vw, var(--spacing-md));
    color: var(--primary-color);
    font-size: clamp(1rem, 5vw, 2rem);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    width: 100%;
    transition: background-color 0.3s ease;
}

.api-content-page-attribution {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    background-color: var(--light-bg);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
}

.api-content-page-source-link {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: bold;
}

.api-content-page-source-link:hover {
    color: var(--primary-color-dark);
}

/* Container for the fetched external content */
.api-content-page-body {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    line-height: 1.6;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
}

/* Normalize headings from external content */
.api-content-page-body h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
    color: var(--text-color);
}

.api-content-page-body h2 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    margin: var(--spacing-md) 0 var(--spacing-sm);
    color: var(--text-color);
}

.api-content-page-body h3 {
    font-size: clamp(1.1rem, 3.5vw, 1.5rem);
    margin: var(--spacing-md) 0 var(--spacing-xs);
    color: var(--text-color);
}

.api-content-page-body h4 {
    font-size: var(--font-size-lg);
    margin: var(--spacing-sm) 0 var(--spacing-xs);
    color: var(--text-color);
}

/* Ensure links are styled consistently */
.api-content-page-body a {
    color: var(--color-link);
    text-decoration: underline;
}

.api-content-page-body a:hover {
    color: var(--primary-color-dark);
}

/* Code blocks from external content */
.api-content-page-body pre,
.api-content-page-body code {
    font-family: var(--font-family-mono, 'Courier New', monospace);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
}

.api-content-page-body pre {
    padding: var(--spacing-sm);
    overflow-x: auto;
    border: 1px solid var(--light-border);
}

.api-content-page-body code {
    padding: 2px 4px;
}

.api-content-page-body pre code {
    padding: 0;
    background-color: transparent;
}

/* Lists from external content */
.api-content-page-body ul,
.api-content-page-body ol {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.api-content-page-body li {
    margin: var(--spacing-xs) 0;
}

/* Tables from external content */
.api-content-page-body table {
    width: 100%;
    margin: var(--spacing-md) 0;
    border-collapse: collapse;
}

.api-content-page-body th,
.api-content-page-body td {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--light-border);
    text-align: left;
}

.api-content-page-body th {
    background-color: var(--light-bg);
    font-weight: bold;
}

/* Error state */
.api-content-page-error {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-color);
}

.api-content-page-error h3 {
    color: var(--color-warning);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1rem, 4vw, 1.5rem);
}

.api-content-page-error p {
    margin-bottom: var(--spacing-sm);
    font-size: clamp(0.9rem, 3vw, 1rem);
}

.api-content-page-fallback-link {
    margin-top: var(--spacing-sm);
}

/* Button container */
.api-content-page-buttons {
    display: flex;
    justify-content: left;
    width: 100%;
    margin-top: var(--spacing-md);
}

.api-content-page-continue-button.btn-loading {
    opacity: 0.9;
    pointer-events: none;
}


/* ===== GOALS PAGE STYLES ===== */

.goals-separator {
    margin: var(--spacing-sm) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--text-color);
    opacity: 0.3;
}


.goals-clear-button {
    position: absolute;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color);
    opacity: 0.5;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: opacity var(--transition-speed) ease;
}

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


/* Action buttons area */
.goals-action-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.goals-refresh-button {
    background: var(--focus-color);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-speed) ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.goals-refresh-button:hover {
    background: var(--button-primary-hover);
    transform: translateY(-1px);
}

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

/* Summary section */
.goals-summary {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border: 1px solid var(--light-border);
}

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

.goals-summary-title {
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
}

.goals-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.goals-stat-item {
    text-align: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .goals-stat-item {
    background-color: rgb(0 0 0 / 20%);
}

.goals-stat-number {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--focus-color);
    display: block;
}

.goals-stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.8;
    margin-top: var(--spacing-xs);
}

/* Goals list */
.goals-list-container {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    margin-top: var(--spacing-md);
}

.goals-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
}

.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-sm);
}

.goal-priority {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.goal-priority.high {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
}

.goal-priority.medium {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.goal-priority.low {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.goal-description {
    color: var(--text-color);
    opacity: 0.8;
    margin: var(--spacing-sm) 0;
    line-height: 1.5;
}

.goal-progress {
    margin: var(--spacing-md) 0;
}

.goal-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.goal-progress-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
}

.goal-progress-percentage {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--focus-color);
}

.goal-metadata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--light-border);
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
}

.goal-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.goal-actions .goal-action-button {
    background: none;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
}

.goal-actions .goal-action-button:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
    color: var(--focus-color);
}

.goal-actions .goal-action-button.delete {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.goal-actions .goal-action-button.delete:hover {
    background-color: var(--color-danger-light);
}

/* Empty state */
.goals-empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-color);
    opacity: 0.9;
}

.goals-empty-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.goals-empty-description {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
}

.goals-empty-action {
    background: var(--focus-color);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-speed) ease;
}

.goals-empty-action:hover {
    background: var(--button-primary-hover);
    transform: translateY(-1px);
}

/* Loading state */
.goals-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-color);
    opacity: 0.6;
}

.goals-loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--light-border);
    border-top: 2px solid var(--focus-color);
    border-radius: var(--border-radius-full);
    animation: goals-spin 1s linear infinite;
    margin-right: var(--spacing-sm);
}

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

/* Responsive design */
@media (width <= 768px) {
    .search-controls {
        gap: var(--spacing-xs);
    }
    
    .goals-action-buttons {
        width: 100%;
        justify-content: stretch;
    }
    
    .goals-refresh-button {
        flex: 1;
        justify-content: center;
    }
    
    .goals-summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .goal-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .goal-priority {
        align-self: flex-end;
    }
}

@media (width <= 480px) {
    .goals-summary-stats {
        grid-template-columns: 1fr;
    }
    
    .goal-metadata {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }
    
    .goal-actions {
        align-self: flex-end;
    }
}

/* Additional Goals page UI styles */
.goals-description {
    margin: var(--spacing-sm) 0;
    color: var(--text-color);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.goals-more-wrapper {
    text-align: center;
    margin: var(--spacing-lg) 0;
}

.goals-more-link {
    min-height: 44px;
    min-width: 160px;
    font-size: var(--font-size-sm);
    padding: var(--spacing-md) var(--spacing-lg);
}

.goals-more-link:active {
    transform: scale(0.98);
}

.goals-page-error {
    padding: var(--spacing-lg);
    margin: var(--spacing-lg);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-md);
    color: var(--color-danger);
    text-align: center;
}

/* Goals main content - two column layout */
.goals-main-content {
    display: flex;
    gap: var(--spacing-xl);
    flex: 1;
    min-height: 0;
}

/* Goals columns */
.goals-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--light-border);
    box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
}

/* Goals column headers */
.goals-column-header {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--light-border);
    padding-bottom: var(--spacing-sm);
}

/* Goals section header */
.goals-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}

/* Goals view list links */
.goals-view-list-link {
    font-size: var(--font-size-sm);
}

/* Goals list view container */
.goals-list-view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Goals list items */
.goals-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    transition: all var(--transition-speed) ease;
    cursor: pointer;
}

.goals-list-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

/* Goals list item icon */
.goals-list-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-weight: 600;
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

/* Goals list item content */
.goals-list-content {
    flex: 1;
    min-width: 0;
}

.goals-list-title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
}

.goals-list-item-description,
.goals-list-description {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.9;
    line-height: 1.5;
    margin-top: var(--spacing-xs);
    word-wrap: break-word;
    hyphens: auto;
}

/* Ensure links in descriptions have full opacity */
.goals-list-description a,
.goals-list-item-description a {
    opacity: 1;
}

/* Text truncation for goal descriptions in the "My Goals" column */
#goals-column .goals-list-description {
    /* Multi-line text truncation for actual goal descriptions */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 2); /* 2 lines with line-height 1.5 */
}

/* Goals list item actions */
.goals-list-item-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Goals delete icon (hidden by default, shown via data attributes) */
.goals-delete-icon {
    position: absolute;
    top: var(--spacing-xxs);
    right: var(--spacing-xxs);
    width: 24px;
    height: 24px;
    background-color: var(--color-danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    z-index: 2;
}

.goals-delete-icon svg {
    width: 12px;
    height: 12px;
    stroke: var(--color-text-inverse);
    stroke-width: 2;
    fill: none;
}

.goals-delete-icon:hover {
    background-color: var(--color-danger);
    transform: scale(1.1);
}


/* Ensure goal items have relative positioning for absolute delete icon */
#goals-column .goals-list-item {
    position: relative;
}

/* Goals toggle buttons */
.goals-toggle-button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    white-space: nowrap;
}

.goals-toggle-button:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
}

.goals-toggle-button.remove {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
    border-color: var(--color-danger);
}

.goals-toggle-button.remove:hover {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.goals-toggle-button.add {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    border-color: var(--color-success);
}

.goals-toggle-button.add:hover {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

/* Dark theme support for goals components */
[data-theme="dark"] .goals-list-item {
    background-color: var(--bg-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .goals-list-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
}

[data-theme="dark"] .goals-toggle-button {
    background-color: var(--bg-color);
    border-color: var(--light-border);
    color: var(--text-color);
}

[data-theme="dark"] .goals-toggle-button:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .goals-column {
    background-color: var(--bg-color);
    border-color: var(--light-border);
    box-shadow: 0 2px 4px rgb(255 255 255 / 5%);
}

/* Responsive design for goals layout */
@media (width <= 768px) {
    .goals-main-content {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .goals-column {
        flex: none;
    }
    
    .goals-list-item {
        padding: var(--spacing-sm);
    }
    
    .goals-list-item-icon {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
    }
    
    .goals-section-header {
        font-size: var(--font-size-md);
    }
    
    .goals-column-header {
        font-size: var(--font-size-md);
    }
}

@media (width <= 576px) {
    .goals-list-item-actions {
        align-self: stretch;
        justify-content: flex-end;
    }
    
    .goals-toggle-button {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}

/* Goals search highlight */
.goals-highlight {
    background-color: var(--color-warning);
    color: var(--text-color);
    padding: 0 2px;
    border-radius: var(--border-radius-xs);
    font-weight: 500;
}

[data-theme="dark"] .goals-highlight {
    background-color: var(--color-warning);
    color: var(--color-surface-darkest);
}

/* Goals list action links */
.goals-view-link,
.goals-add-link {
    font-size: var(--font-size-sm);
}

.goals-link-separator {
    color: var(--text-color);
    opacity: 0.5;
    margin: 0 var(--spacing-xs);
}

/* ===== HOME PAGE STYLES ===== */

.home-page-container {
    /* Base layout styles provided by .page-container from mystyle.css */

    /* These are specific additions */
    line-height: 1.4;
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-lg));
    transition: background-color 0.3s ease, color 0.3s ease;
}

.home-page-content-wrapper {
    /* Base layout styles provided by .page-content-wrapper from mystyle.css */

    /* These are specific additions */
    align-items: flex-start;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.home-page-container .activity-title {
    line-height: 1.3;
    margin-bottom: var(--spacing-xs);
}

.home-page-section {
    width: 100%;
    margin-bottom: calc(var(--spacing-lg) * 2); /* Double spacing for better section separation */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: background-color 0.3s ease;
    border: 1px solid var(--light-border);
    background-color: var(--bg-color);
}

.section-header {
    font-size: clamp(var(--font-size-md), 3vw, 1.25rem);
    font-weight: 600;
    margin: 0;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--light-border);
    background-color: rgb(0 0 0 / 3%);
    color: var(--text-color);
}

[data-theme="dark"] .section-header {
    background-color: rgb(255 255 255 / 5%);
}

.section-content {
    padding: var(--spacing-lg);
}

/* Card styles */
.welcome-card {
    padding: var(--spacing-xl);
}

/* Enhanced with mystyle.css container patterns */
.welcome-card,
.whats-new-card,
.quiz-card,
.learn-card {
    /* Base styling leverages .modal-system-content patterns */
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    overflow: hidden;
    transition: all var(--transition-speed) ease;
    color: var(--text-color);
}

/* Enhanced with mystyle.css .modal-system-content spacing patterns */
.card-content {
    /* Uses same responsive padding approach as .modal-system-content */
    padding: var(--spacing-lg);
    overflow: auto;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.welcome-card .card-content {
    padding: 0;
}

.card-content h4 {
    margin-top: 0;
    margin-bottom: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    font-size: clamp(var(--font-size-md), 3vw, 1.2rem);
    font-weight: 600;
    color: var(--text-color);
}

.card-content p {
    color: var(--text-color);
}

/* Enhanced with mystyle.css .button-link-row patterns */
.card-actions {
    /* Base layout uses .button-link-row patterns from mystyle.css */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

/* Learn more link styles */
.learn-more-link {
    font-size: var(--font-size-sm);
}

/* Expandable section styles */
.expandable-section {
    margin-top: var(--spacing-lg);
}

.expandable-section .learn-more-link {
    display: block;
    margin-bottom: var(--spacing-sm);
}

.expandable-content {
    margin-top: var(--spacing-sm);
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    background-color: rgb(0 0 0 / 2%);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .expandable-content {
    background-color: rgb(255 255 255 / 5%);
}

.welcome-card #learn-more-site-link {
    display: block;
    width: 100%;
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    text-align: left;
}

/* Quiz actions container */
.quiz-actions-container {
    /* Base layout leverages .button-link-row patterns from mystyle.css */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Learn section styles */
.continue-card {
    margin-bottom: var(--spacing-lg);
}

.activity-item,
.goal-item {
    display: flex;
    align-items: center;
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md)) 0;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
}

/* Hierarchy indentation for child categories */
.goal-item-child {
    margin-left: var(--spacing-lg);
}

/* Goal item enhancements */
.goal-recency {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
    margin-top: var(--spacing-xs);
}

.goal-last-activity {
    font-style: italic;
}

.goal-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--color-text-inverse);
    flex-shrink: 0;
    font-size: clamp(var(--font-size-md), 3vw, 1.25rem);
    background-color: var(--icon-bg);
}

.activity-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--color-text-inverse);
    flex-shrink: 0;
    font-size: clamp(var(--font-size-md), 3vw, 1.25rem);
    background-color: var(--icon-bg);
}

.activity-details,
.goal-details {
    flex: 1;
    min-width: 0;
}

.goal-title {
    font-weight: 500;
    font-size: var(--font-size-md);
    flex: 1;
    margin: 0;
    margin-bottom: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
}

.activity-path {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
    line-height: 1.2;
}

.more-goals {
    padding-top: var(--spacing-sm);
    text-align: center;
}

/* Category grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg) var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--light-border);
    background-color: var(--bg-color);
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgb(0 0 0 / 10%);
}

[data-theme="dark"] .category-card:hover {
    box-shadow: 0 3px 8px rgb(0 0 0 / 30%);
}

.category-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--color-text-inverse);
    margin-bottom: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    background-color: var(--icon-bg);
}

.category-icon span {
    font-size: 1.5rem;
}

.category-title {
    font-weight: 500;
    text-align: center;
    color: var(--text-color);
}

/* Video link container */
.video-link-container {
    margin: var(--spacing-lg) 0;
}

/* Quiz section header responsive behavior - merged into main rule above */

.learn-quizzes-container {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    margin-left: var(--spacing-sm);
    min-width: fit-content;
}

.quiz-mode-select option:disabled {
    color: var(--color-neutral);
    font-style: italic;
}

/* Quiz info section */
.quiz-info-section {
    margin-bottom: var(--spacing-lg);
}

.quiz-info-section #learn-about-quizzes-content {
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin-top: var(--spacing-xs);
    background-color: rgb(0 0 0 / 2%);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .quiz-info-section #learn-about-quizzes-content {
    background-color: rgb(255 255 255 / 5%);
}

/* Dark theme specific overrides */
[data-theme="dark"] .card-content p,
[data-theme="dark"] .topic-item label,
[data-theme="dark"] .activity-path {
    color: var(--text-color);
    opacity: 0.8;
}

/* Dark theme progress text styling handled by base classes in mystyle.css */

/* Button overrides for specific sections */
.songs-card #view-all-songs-btn,
.skills-card #view-all-skills-btn,
.goals-card #view-all-goals-btn {
    width: auto;
    min-width: 140px;
    max-width: fit-content;
}

/* Responsive Design */
@media (width >= 768px) {
    .home-page-button {
        min-width: 7rem;
    }
    
    .goal-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }
}

@media (width <= 768px) {
    .card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .home-page-button {
        width: 100%;
    }
    
    .activity-item,
    .goal-item {
        flex-wrap: wrap;
    }
    
    .activity-item .btn,
    .goal-item .btn {
        margin-left: 3.25rem;
        margin-top: var(--spacing-sm);
    }

    /* Mobile: reduce indentation for child items */
    .goal-item-child {
        margin-left: var(--spacing-md);
    }

    .learn-card .card-actions {
        flex-direction: row;
        justify-content: flex-start;
    }

    /* Enhanced quiz actions container - leverages .button-link-row responsive patterns */
    .quiz-actions-container {
        flex-flow: row wrap;
        gap: var(--spacing-sm);
    }
    
}

@media (width <= 480px) {
    .page-title-base {
        font-size: clamp(var(--font-size-md), 4vw, 1.5rem);
    }
    
    .section-header {
        font-size: clamp(var(--font-size-sm), 3vw, 1.1rem);
    }
    
    .card-content h4 {
        font-size: clamp(var(--font-size-sm), 3vw, 1.1rem);
    }
    
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
        
    .welcome-card .expandable-section {
        margin-top: 0;
        padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
    }

    .welcome-card .expandable-section.free-account-section {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top: none;
    }

    .welcome-card .expandable-section:not(.free-account-section) {
        margin-top: var(--spacing-xl);
        padding-top: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
        border-top: 1px solid var(--light-border);
    }

    .welcome-card .expandable-section .learn-more-link {
        display: block;
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-sm);
        text-align: left;
    }

    .welcome-card .expandable-section + .expandable-section {
        margin-top: var(--spacing-lg);
    }

    .welcome-card #free-account-content,
    .welcome-card #learn-more-content {
        padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
        background-color: rgb(0 0 0 / 2%);
        border-radius: var(--border-radius-sm);
        margin-top: var(--spacing-sm);
    }

    [data-theme="dark"] .welcome-card #free-account-content,
    [data-theme="dark"] .welcome-card #learn-more-content {
        background-color: rgb(255 255 255 / 5%);
    }

    .welcome-card {
        padding: 0;
        overflow: visible;
    }

    .welcome-card .card-content {
        padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg) var(--spacing-xl);
    }

    .welcome-card .expandable-section:last-child {
        padding-bottom: var(--spacing-xl);
    }
}

@media (width <= 350px), (height <= 450px) {
    .welcome-card .expandable-section {
        padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
    }
    
    .welcome-card .card-content {
        padding: var(--spacing-xl) var(--spacing-lg) clamp(var(--spacing-sm), 2vw, var(--spacing-md)) var(--spacing-lg);
    }

    .quiz-actions-container {
        flex-wrap: wrap;
    }

    .songs-card #view-all-songs-btn,
    .skills-card #view-all-skills-btn,
    .goals-card #view-all-goals-btn {
        min-width: 120px;
        font-size: var(--font-size-sm);
    }
}

/* Home Page Expandable Content Management - Replaces inline styles */
.home-page-expandable-content {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: rgb(0 0 0 / 2%);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .home-page-expandable-content {
    background-color: rgb(255 255 255 / 5%);
    border-color: var(--light-border);
}

/* Home Page Expandable Trigger Styling - Replaces inline styles */
.home-page-expandable-trigger {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Home Page Error Display - Replaces inline cssText */
.home-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger-light);
    border-radius: var(--border-radius);
    color: var(--color-danger);
    text-align: center;
}

[data-theme="dark"] .home-page-error {
    background-color: rgb(204 51 51 / 10%);
    border-color: rgb(204 51 51 / 30%);
    color: var(--color-danger-on-dark);
}

/* Home Page Dropdown Option States - Replaces inline styles */
.dropdown-option-disabled {
    color: var(--color-neutral);
    font-style: italic;
}

/* ================================
   My Content Section (Home Page)
   ================================ */

/* Section uses existing .home-page-section base */

.my-content-header {
    margin-bottom: var(--spacing-md);
}

/* Table Base Styling */
.my-content-table {
    width: 100%;
    margin-top: var(--spacing-md);
    border-collapse: collapse;
    background-color: var(--card-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: border-color var(--transition-speed) ease;
}

.my-content-table thead {
    background-color: var(--light-bg);
    border-bottom: 2px solid var(--light-border);
}

.my-content-table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.my-content-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--light-border);
    color: var(--text-color);
    vertical-align: middle;
}

.my-content-table tbody tr {
    transition: background-color var(--transition-speed) ease;
}

.my-content-table tbody tr:hover {
    background-color: var(--light-bg);
}

/* Wall Title Links */
.category-title-link {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-speed) ease;
}

.category-title-link:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Location Badges */
.location-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.location-private {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

.location-local {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

[data-theme="dark"] .location-private {
    background-color: rgb(59 130 246 / 20%);
    color: var(--color-info);
}

[data-theme="dark"] .location-local {
    background-color: rgb(245 158 11 / 20%);
    color: var(--color-warning);
}

/* Footer with View All link */
.my-content-footer {
    margin-top: var(--spacing-md);
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--light-border);
}

/* Empty State */
.my-content-section .empty-state {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--text-muted);
}

.my-content-section .empty-state p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-md);
}

/* Responsive Design */
@media (width <= 768px) {
    .my-content-table th,
    .my-content-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .my-content-table th {
        font-size: var(--font-size-xs);
    }

    .actions-cell {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-cell .btn-small {
        width: 100%;
    }
}

/* Accessibility: Focus states */
.category-title-link:focus,
.view-category-btn:focus,
.edit-category-btn:focus {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

/* ================================
   SECTION - CHART PAGE STYLES
   ================================ */

/* Chart Background - Dynamic background color support */
.chart-background {
    background-color: var(--chart-bg-color, var(--bg-color));
}

/* Chart Table Styles */
.chart-table-container {
    margin-top: var(--spacing-md);
    width: 100%;
    clear: both;
    display: block;
}

.chart-table-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.chart-data-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--light-border);
}

.chart-bpm-title {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
}


/* Goal Progress Specific Styles */
.goal-login-button {
    margin: 0 auto;
    display: block;
}

.goal-add-current-link {
    margin: 0 0 1rem;
}

.goal-progress-wrapper {
    min-height: 250px;
}

.goal-progress-title {
    margin: 0.5rem 0;
    color: var(--text-color);
}

.goal-progress-display {
    height: 200px;
    overflow-y: auto;
}


/* Goals Content Renderer Styles */
.goal-placeholder-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--color-text-inverse);
    background-color: var(--goal-thumb-bg, var(--color-secondary));
}

/* ================================
   SECTION - ACCOUNT PAGE STYLES
   ================================ */

.account-page-container {
    /* Base layout styles provided by .page-container from mystyle.css */

    /* These are account-specific additions */
    margin: var(--spacing-lg) auto;
    max-width: 800px;
    padding: var(--spacing-lg);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

[data-theme="dark"] .account-page-container {
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
}

/* Account page content wrapper */
.account-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Account sections */
.account-section {
    padding: var(--spacing-lg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-color);
}

.account-section-title {
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: 500;
}

/* User info details */
.account-details {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
}

.account-detail-row {
    display: flex;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--light-border);
}

.account-detail-row:last-child {
    border-bottom: none;
}

.account-detail-label {
    font-weight: 600;
    min-width: 120px;
    color: var(--text-color);
}

.account-detail-value {
    flex: 1;
    color: var(--text-color);
}

/* Teams list */
.account-teams-list-row {
    align-items: flex-start;
}

.account-teams-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.account-team-entry {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .account-team-entry {
    background-color: rgb(255 255 255 / 5%);
    border-color: rgb(255 255 255 / 10%);
}

.account-team-name {
    font-weight: 500;
    color: var(--text-color);
}

.account-team-role {
    color: var(--text-color);
    opacity: 0.9;
    font-size: var(--font-size-sm);
}

/* Action buttons */
.account-action-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.account-action-button {
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

.account-action-button:hover {
    background-color: var(--button-secondary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}

[data-theme="dark"] .account-action-button:hover {
    background-color: rgb(255 255 255 / 10%);
    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
}

.account-action-title {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
    font-weight: 600;
}

.account-action-description {
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* Error message */
.account-page-error {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-danger);
    margin: var(--spacing-lg) auto;
    max-width: 800px;
}

/* Email Notifications Settings */
.email-notifications {
    margin-top: var(--spacing-lg);
}

.email-notifications .settings-section-title {
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: 500;
}

.email-notifications .setting-item {
    margin: var(--spacing-md) 0;
}

.email-notifications .checkbox-label {
    display: flex;
    align-items: center;
    font-size: var(--font-size-md);
    cursor: pointer;
    color: var(--text-color);
}

.email-notifications .checkbox-label input {
    margin-right: var(--spacing-sm);
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--focus-color);
}

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

.email-notifications .radio-group {
    margin-left: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.email-notifications .radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-color);
}

.email-notifications .radio-label input {
    margin-right: var(--spacing-xs);
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--focus-color);
}

.email-notifications .setting-description {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .email-notifications .setting-description {
    background: rgb(255 255 255 / 5%);
}

.email-notifications .setting-description p {
    margin: var(--spacing-xs) 0;
    color: var(--text-color);
}

.email-notifications .setting-description ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    color: var(--text-color);
}

.email-notifications .setting-description li {
    margin: var(--spacing-xs) 0;
}

.email-notifications .next-email-time {
    margin-top: var(--spacing-sm);
    font-style: italic;
    color: var(--text-color);
    opacity: 0.9;
    font-size: var(--font-size-sm);
}

.email-notifications .send-now-container {
    margin-top: var(--spacing-xs);
}

.email-notifications .save-feedback,
.email-notifications .send-now-feedback {
    margin-top: var(--spacing-sm);
}

.email-notifications .save-feedback .success,
.email-notifications .send-now-feedback .success {
    color: var(--color-success);
    font-weight: 500;
}

.email-notifications .save-feedback .error,
.email-notifications .send-now-feedback .error {
    color: var(--color-danger);
    font-weight: 500;
}

.email-notifications .send-now-feedback .info {
    color: var(--text-color);
    opacity: 0.9;
    font-weight: 500;
}

/* Responsive adjustments */
@media (width <= 600px) {
    .account-page-container {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
    }

    .account-action-buttons {
        grid-template-columns: 1fr;
    }

    .account-detail-row {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .account-detail-label {
        min-width: auto;
    }

    .email-notifications .radio-group {
        margin-left: var(--spacing-md);
    }
}

/* ================================
   SECTION - ABOUT PAGE STYLES
   ================================ */

/* About page main container */
.about-page-container {
    margin: var(--spacing-lg) auto;
    max-width: 800px;
    padding: var(--spacing-lg);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

[data-theme="dark"] .about-page-container {
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
}

/* About page content area */
.about-page-content {
    margin-top: var(--spacing-md);
}

/* About page title */
.about-page-title {
    color: var(--text-color);
    font-size: var(--font-size-xxl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    transition: color var(--transition-speed) ease;
}

/* About version section */
.about-version-section {
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-color-secondary);
    border-bottom: 1px solid var(--light-border);
    transition: color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
}

.about-version-label {
    font-weight: 600;
    color: var(--text-color);
    transition: color var(--transition-speed) ease;
}

.about-version-value {
    color: var(--text-color-secondary);
    font-family: monospace;
    transition: color var(--transition-speed) ease;
}

/* About content section */
.about-content-section {
    padding: var(--spacing-md) 0;
}

/* About content body */
.about-content-body {
    color: var(--text-color);
    font-size: var(--font-size-md);
    line-height: 1.6;
    transition: color var(--transition-speed) ease;
}

.about-content-body p {
    margin-bottom: var(--spacing-md);
}

.about-content-body h2 {
    color: var(--text-color);
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    transition: color var(--transition-speed) ease;
}

.about-content-body h3 {
    color: var(--text-color);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    transition: color var(--transition-speed) ease;
}

.about-content-body ul,
.about-content-body ol {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.about-content-body li {
    margin-bottom: var(--spacing-xs);
}

/* About page error state */
.about-page-error {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--error-color);
}

.about-page-error h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
}

/* Responsive design for mobile */
@media (width <= 768px) {
    .about-page-container {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
        border-radius: var(--border-radius-md);
    }

    .about-page-title {
        font-size: var(--font-size-xl);
    }

    .about-content-body {
        font-size: var(--font-size-base);
    }

    .about-content-body h2 {
        font-size: var(--font-size-lg);
    }

    .about-content-body h3 {
        font-size: var(--font-size-md);
    }
}


/* ===== INLINE STYLE REPLACEMENTS (PAGE-SPECIFIC) ===== */

/* Recent Progress Page */
.recent-progress-loading {
    text-align: center;
    padding: 2rem;
}

/* Goals Page - Sorting tip */
.sorting-tip {
    text-align: center;
    font-style: italic;
    margin-top: 1rem;
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

/* Goals Page - Remove animation */
.item-removing {
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

/* Admin Pages - Filters and controls sections */
.admin-filters-section,
.admin-controls-section {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

/* Admin Analytics - Success value color */
.analytics-success-value {
    color: var(--color-success);
}

/* Chart Page - Theme data attribute support */
[data-theme="dark"] .chart-container {
    background-color: var(--light-bg);
    color: var(--text-color);
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}

[data-theme="light"] .chart-container {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* ==========================================
   Goal Details Expander
   ========================================== */

/* Parent list item: allow expander to wrap below content */
.goals-list-item:has(.goal-details-expander) {
    flex-wrap: wrap;
}

.goal-details-toggle {                                                                                              
    margin-right: var(--spacing-sm); 
}  

/* Outer container — takes full width of flex row */
.goal-details-expander {
    flex-basis: 100%;
    margin-block-start: var(--spacing-xs);
    padding-inline-start: var(--spacing-sm);
}

/* Collapsible content — uses data-display="false" pattern for visibility */
.goal-details-content {
    padding-block-start: var(--spacing-xs);
}

/* Count indicator */
.goal-details-count {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
    margin-block-end: var(--spacing-xs);
    padding-inline-start: var(--spacing-xs);
}

/* Children list */
.goal-details-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Individual child item */
.goal-details-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius, 4px);
    transition: opacity var(--transition-speed, 0.2s) ease;
}

/* Dimmed styling for ignored items */
.goal-details-item[data-ignored="true"] {
    opacity: 0.5;
}

.goal-details-item[data-ignored="true"] label {
    text-decoration: line-through;
}

/* Checkbox pair styling within expander */
.goal-details-item .checkbox-pair {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.goal-details-item .checkbox-pair label {
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.goal-details-item .checkbox-pair input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* Mobile: 44x44px touch targets */
@media (pointer: coarse) {
    .goal-details-item {
        min-height: 44px;
        padding: var(--spacing-sm);
    }

    .goal-details-item .checkbox-pair input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 44px;
        min-height: 44px;
    }

}

/* Dark theme support */
[data-theme="dark"] .goal-details-count {
    color: var(--text-color);
}

/* ===== CHART COMPONENTS ===== */

/* Chart styles using design tokens and responsive patterns */
.chart-page-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Modal container */
.chart-modal-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    max-height: 80vh;
    max-width: 800px;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

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

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

.chart-link {
    color: var(--focus-color);
    text-decoration: none;
    margin-inline: var(--spacing-xs) var(--spacing-xs);
}

.chart-link:hover {
    text-decoration: underline;
}

.chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.chart-display {
    position: relative;
    min-height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chart-info {
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
}

[data-theme="dark"] .chart-info {
    background-color: var(--light-bg);
}

.chart-canvas {
    max-height: 50vh;
}

.chart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
}

.chart-table th,
.chart-table td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--light-border);
}

[data-theme="dark"] .chart-table th,
[data-theme="dark"] .chart-table td {
    border-color: var(--light-border);
}

.chart-table th {
    background-color: var(--light-bg);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

[data-theme="dark"] .chart-table th {
    background-color: var(--light-bg);
    color: var(--text-color);
}

.chart-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.chart-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
}

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

.chart-tab.active {
    background-color: var(--focus-color);
    color: var(--color-text-inverse);
    border-color: var(--focus-color);
}

.chart-loading {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-color);
    font-size: var(--font-size-md);
}

/* Footer */
.chart-footer {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    margin-top: auto;
}

/* Close button for modal view */
.chart-close-button {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: transparent;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius-full);
    transition: background-color var(--transition-speed) ease;
    min-height: 44px;
    min-width: 44px;
}

.chart-close-button:hover {
    background-color: rgb(0 0 0 / 10%);
}

[data-theme="dark"] .chart-close-button:hover {
    background-color: rgb(255 255 255 / 10%);
}

/* Status indicators — base .status-sphere definition is in mystyle.css */

/* Size variants */
.status-sphere-small {
    --sphere-size: 16px;

    width: var(--sphere-size);
    height: var(--sphere-size);
    font-size: var(--font-size-xs);
}

.status-sphere-medium {
    --sphere-size: 24px;

    width: var(--sphere-size);
    height: var(--sphere-size);
    font-size: var(--font-size-sm);
}

.status-sphere-large {
    --sphere-size: 32px;

    width: var(--sphere-size);
    height: var(--sphere-size);
    font-size: var(--font-size-md);
}

.status-sphere-custom {
    width: var(--sphere-size, 24px);
    height: var(--sphere-size, 24px);
    font-size: calc(var(--sphere-size, 24px) * 0.4);
}

/* Data table styles */
.data-table-container {
    width: 100%;
    overflow-x: auto;
}

/* BPM chart container */
.bpm-chart-container {
    margin-top: var(--spacing-lg);
}

/* Responsive adjustments */
@media (width <= 768px) {
    .chart-display {
        min-height: 250px;
    }

    .chart-modal-container {
        max-width: 95%;
        max-height: 85vh;
    }
}

@media (width <= 576px) {
    .chart-display {
        min-height: 200px;
    }

    .chart-tabs {
        flex-direction: column;
    }

    .chart-tab {
        border-radius: var(--border-radius-sm);
    }
}

.chart-generic-container {
    margin: 0;
    position: relative;

    /* PAT-029: Ensure container has dimensions for proper chart sizing */

    /* This prevents fallback to window dimensions in JavaScript */
    min-width: 300px;
    min-height: 250px;
    width: 100%;
}

.chart-title-no-margin {
    margin-top: 0;
}

.chart-show-more-link {
    margin-top: var(--spacing-md);
    display: block;
}

/* Color variants */
.status-sphere-red {
    --sphere-color-light: #ff6b6b;
    --sphere-color-dark: #c23616;
    --sphere-text-color: var(--color-text-inverse);
}

.status-sphere-yellow {
    --sphere-color-light: #ffeb3b;
    --sphere-color-dark: #fbc02d;
    --sphere-text-color: var(--color-surface-darkest);
}

.status-sphere-green {
    --sphere-color-light: #5adfb0;
    --sphere-color-dark: #26ae60;
    --sphere-text-color: var(--color-surface-darkest);
}

.status-sphere-white {
    --sphere-color-light: #fff;
    --sphere-color-dark: #f0f0f0;
    --sphere-text-color: var(--color-surface-darkest);

    border: 1px solid var(--light-border);
}

/* ================================
   SECTION - SHOWCASE PAGE STYLES
   ================================ */

/* Page wrapper */
.showcase-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

/* --- Skeleton loading --- */
.skeleton-block {
    background: var(--light-border);
    border-radius: var(--border-radius-sm);
    animation: showcase-skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-block--avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-full);
}

.skeleton-block--title {
    height: 28px;
    width: 60%;
    margin-bottom: var(--spacing-sm);
}

.skeleton-block--heading {
    height: 22px;
    width: 40%;
    margin-bottom: var(--spacing-md);
}

.skeleton-block--card {
    height: 120px;
    border-radius: var(--border-radius-md);
}

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

/* --- Header --- */
.showcase-header {
    margin-bottom: var(--spacing-xl);
}

.showcase-header--skeleton {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.showcase-header__owner-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.showcase-header__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-full);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-lg);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.showcase-header__avatar--team {
    background: var(--color-info);
}

.showcase-header__owner-meta {
    flex: 1;
    min-width: 0;
}

.showcase-header__title {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-xs) 0;
}

.showcase-header__byline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
}

.showcase-header__owner-name {
    font-weight: 600;
}

.showcase-header__badge {
    display: inline-block;
    padding: 2px var(--spacing-xs);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.showcase-header__badge--public {
    background: var(--color-success-light);
    color: var(--color-success);
}

.showcase-header__badge--unlisted {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.showcase-header__badge--private {
    background: var(--color-secondary-light);
    color: var(--color-secondary);
}

.showcase-header__desc {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    line-height: 1.5;
}

.showcase-header__cta-row {
    margin-top: var(--spacing-md);
}

.showcase-header__cta {
    font-size: var(--font-size-md);
}

/* --- Sections --- */
.showcase-section {
    margin-bottom: var(--spacing-xxl);
}

.showcase-section__heading {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--spacing-md) 0;
    border-bottom: 1px solid var(--light-border);
    padding-bottom: var(--spacing-xs);
}

/* --- Grid --- */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md);
}

/* --- Cards --- */
.showcase-card {
    background: var(--color-secondary-light);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.showcase-card:hover,
.showcase-card:focus {
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
    transform: translateY(-1px);
    outline: none;
    border-color: var(--color-primary);
}

.showcase-card__type-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-info);
    margin-bottom: var(--spacing-xs);
}
.showcase-card__type-badge--lesson   { color: var(--color-success); }
.showcase-card__type-badge--category { color: var(--color-primary); }

.showcase-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
}

.showcase-card__desc {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Progress indicator */
.showcase-card__progress {
    margin-top: auto;
    padding-top: var(--spacing-xs);
}

.showcase-card__progress-bar {
    height: 4px;
    background: var(--light-border);
    border-radius: var(--border-radius-full);
    overflow: hidden;
    margin-bottom: 2px;
}

.showcase-card__progress-fill {
    height: 100%;
    background: var(--color-info);
    border-radius: var(--border-radius-full);
    transition: width 0.3s ease;
    width: var(--progress-width, 0%);
}
.showcase-card__progress-fill--complete { background: var(--color-success); }

.showcase-card__progress-label {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
}

/* --- State pages --- */
.showcase-page-not-found,
.showcase-page-private,
.showcase-page-error {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-md);
}

.showcase-not-found__home-btn {
    margin-top: var(--spacing-md);
}

/* --- Sign-up banner --- */
.showcase-signup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
}

.showcase-signup-banner__text {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* --- Warning banner --- */
.showcase-warning {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-md);
}

/* --- Empty page message --- */
.showcase-page__empty {
    text-align: center;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xxl);
}

/* =====================================================================
   Showcase Management
   Slug input component, manage modal, My Showcases section, Team Showcases
   ===================================================================== */

/* --- Slug Input Component --- */
.slug-input-component {
    margin-bottom: var(--spacing-md);
}

.slug-input__label {
    display: block;
    margin-bottom: var(--spacing-xs);
}

.slug-input__row {
    display: flex;
    align-items: center;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--bg-color);
    transition: border-color 0.15s;
}

.slug-input__row:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.slug-input__prefix {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-secondary-light);
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    border-right: 1px solid var(--light-border);
    flex-shrink: 0;
}

.slug-input__field {
    flex: 1;
    border: none;
    outline: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    background: transparent;
    min-width: 0;
}
.slug-input__field--valid  { background: var(--color-success-light); }
.slug-input__field--invalid { background: var(--color-error-light); }

.slug-input__icon {
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}
.slug-input__icon--ok    { color: var(--color-success); }
.slug-input__icon--error { color: var(--color-danger); }

.slug-input__message {
    font-size: var(--font-size-xs);
    margin-top: 4px;
    min-height: 1.2em;
}
.slug-input__message--ok       { color: var(--color-success); }
.slug-input__message--error    { color: var(--color-danger); }
.slug-input__message--checking { color: var(--color-neutral); }

.slug-input__preview {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin-top: 2px;
    word-break: break-all;
}
.slug-input__preview--hidden { display: none; }

/* --- Showcase Manage Modal --- */
.showcase-modal__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.showcase-modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.showcase-modal__form .form-row {
    margin-bottom: 0;
}

.showcase-modal__input,
.showcase-modal__select {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
}

.showcase-modal__textarea {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}

.showcase-modal__input:focus,
.showcase-modal__select:focus,
.showcase-modal__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.showcase-modal__radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
}

.showcase-modal__radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: background 0.1s;
}

.showcase-modal__radio-option:hover {
    background: var(--color-secondary-light);
}
.showcase-modal__radio-text { font-size: var(--font-size-sm); }
.showcase-modal__radio-desc { color: var(--color-neutral); }

/* PAT-028 exempt: gap 2px is vertical spacing between the interactive toggle label and its non-interactive hint text — not between two touch targets */
.showcase-modal__toggle-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.showcase-modal__toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
    cursor: pointer;
}

.showcase-modal__hint {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin: 0;
}

.showcase-modal__items-section {
    border-top: 1px solid var(--light-border);
    padding-top: var(--spacing-md);
}

.showcase-modal__items-heading {
    font-size: var(--font-size-md);
    margin: 0 0 var(--spacing-xs) 0;
}

.showcase-modal__items-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-sm) 0;
}

.showcase-modal__items-empty {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    padding: var(--spacing-xs) 0;
}

.showcase-modal__item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--light-border);
    gap: var(--spacing-sm);
}

.showcase-modal__item-info {
    font-size: var(--font-size-xs);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showcase-modal__item-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.showcase-modal__item-btn {
    font-size: var(--font-size-xs);
    padding: 0 2px;
}

.showcase-modal__item-btn--remove {
    color: var(--color-danger);
}

.showcase-modal__add-item-row {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-xs);
}

.showcase-modal__add-type {
    width: auto;
    flex-shrink: 0;
}

.showcase-modal__add-id {
    flex: 1;
    min-width: 140px;
}

.showcase-modal__items-save-status {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    min-height: 1.2em;
}
.showcase-modal__items-save-status--ok    { color: var(--color-success); }
.showcase-modal__items-save-status--error { color: var(--color-danger); }

.showcase-modal__danger-zone {
    border-top: 1px solid var(--color-danger);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.showcase-modal__danger-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    margin-bottom: var(--spacing-xs);
}

.showcase-modal__delete-btn {
    background: var(--color-danger);
    color: #fff;
    border: none;
}
.showcase-modal__delete-btn:hover { opacity: 0.85; }

.showcase-modal__banner {
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.showcase-modal__banner--error {
    background: var(--color-error-light);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

.showcase-modal__banner--info {
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.showcase-modal__owner-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* --- My Showcases section (my-content page) --- */
.my-showcases-section {
    margin-top: var(--spacing-xxl);
    border-top: 1px solid var(--light-border);
    padding-top: var(--spacing-lg);
}

.my-showcases-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.my-showcases-section__title {
    font-size: var(--font-size-lg);
    margin: 0;
}

.my-showcases-table__slug {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    font-family: monospace;
}

/* --- Team Showcases subsection (admin team panel) --- */
.admin-team-showcases {
    border-top: 1px solid var(--light-border);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.admin-team-showcases__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.admin-team-showcases__title {
    font-size: var(--font-size-md);
    margin: 0;
}

.admin-team-showcases__table {
    width: 100%;
    margin-top: var(--spacing-xs);
}

/* --- Showcase header: title row with copy-link button --- */
.showcase-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.showcase-header__copy-btn {
    font-size: var(--font-size-base);
    padding: 0;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-speed);
    flex-shrink: 0;
}
.showcase-header__copy-btn:hover { opacity: 1; }

/* --- Modal share banner (success state) --- */
.showcase-modal__banner--success {
    background: var(--color-success-light);
    color: var(--color-success);
    border-left: 3px solid var(--color-success);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
}

.showcase-modal__share-msg {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.showcase-modal__share-path {
    background: var(--hover-bg);
    padding: 1px var(--spacing-xs);
    border-radius: var(--border-radius-xs);
}

.showcase-modal__share-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Question page typography and option padding — migrated from ResponsiveLayoutManagerMod.
   [data-responsive-container] and JS-set [data-screen-size] qualifiers removed; breakpoint
   768px retained (was RLM's internal breakpoint). font-weight omitted intentionally so inline
   bold markup in question text renders as emphasis rather than redundant bold-on-bold.
   Literal rem values kept for visual parity; design-token substitution deferred
   (--font-size-lg resolves to clamp(16px,3vw,24px) which would be visibly larger than 1.2rem
   at wide viewports). */
[data-page-type="question"] [data-question-element="text"] {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

[data-page-type="question"] .answer-option {
    padding: 1rem 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

@media (max-width: 767px) {
    [data-page-type="question"] [data-question-element="text"] {
        font-size: 1rem;
    }

    [data-page-type="question"] .answer-option {
        padding: 0.75rem 0.5rem;
    }
}

/* --- My Showcases dedicated page (/my-showcases) --- */
.my-showcases-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

.my-showcases-table__actions {
    white-space: nowrap;
}

/* ===== HTML PAGE MAIN CONTENT LAYOUT ===== */

/* HTML Page Main Content Layout */
.html-page-main-content {
    display: flex;
    flex-direction: column;
}

.html-page-main-content .html-page-images {
    order: -1; /* Always keep images at top */
}

.html-page-main-content .html-page-content {
    order: 0;
}

/* Prevent reordering during resize */
@media (width <= 768px) {
    .html-page-main-content {
        flex-direction: column;
    }

    .html-page-main-content .html-page-images {
        order: -1;
    }
}

/* ===== LESSON PAGE STYLES ===== */

/* Lesson page wrapper */
.lesson-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* Lesson page header */
.lesson-page-header {
    margin-bottom: var(--spacing-xl);
}

.lesson-page-title {
    font-size: var(--font-size-xxl);
    color: var(--text-color);
    margin: 0 0 var(--spacing-sm) 0;
}

.lesson-page-breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    margin-top: var(--spacing-sm);
}

.lesson-page-breadcrumb .breadcrumb-link {
    color: var(--link-color);
    text-decoration: none;
}

.lesson-page-breadcrumb .breadcrumb-link:hover {
    text-decoration: underline;
}

.lesson-page-breadcrumb .breadcrumb-separator {
    margin: 0 var(--spacing-xs);
    color: var(--color-muted);
}

/* Lesson page info */
.lesson-page-info {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xl);
}

.info-item {
    display: flex;
    gap: var(--spacing-sm);
}

.info-label {
    font-weight: 600;
    color: var(--text-color);
}

.info-value {
    color: var(--color-muted);
}

/* Activities section */
.lesson-page-activities {
    margin-top: var(--spacing-xl);
}

.lesson-page-section-heading {
    font-size: var(--font-size-xl);
    color: var(--text-color);
    margin: 0 0 var(--spacing-lg) 0;
    border-bottom: 2px solid var(--light-border);
    padding-bottom: var(--spacing-sm);
}

.lesson-activities-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.lesson-activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    min-height: 44px;
}

.lesson-activity-item:hover {
    background-color: var(--bg-color);
    border-color: var(--focus-color);
}

.lesson-activity-link {
    color: var(--link-color);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: 500;
}

.lesson-activity-link:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

.lesson-activity-pages {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

/* Empty state */
.lesson-page-empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

/* Error page */
.lesson-page-error {
    max-width: 600px;
    margin: var(--spacing-xxl) auto;
    padding: var(--spacing-xl);
    text-align: center;
    background-color: var(--color-danger-light);
    border-radius: var(--border-radius);
}

.lesson-page-error h2 {
    color: var(--color-danger);
    margin-bottom: var(--spacing-md);
}

.lesson-page-error p {
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
}

/* Responsive adjustments */
@media (width <= 768px) {
    .lesson-page-wrapper {
        padding: var(--spacing-md);
    }

    .lesson-page-title {
        font-size: var(--font-size-xl);
    }

    .lesson-page-info {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .lesson-activity-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}

/* ===== ACTIVITY PAGE STYLES ===== */

/* Activity Page Wrapper - Main container for activity display */
.activity-page-wrapper {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* Activity Page Header */
.activity-page-header {
    margin-bottom: var(--spacing-lg);
}

.activity-page-title {
    font-size: var(--font-size-xxl);
    color: var(--text-color);
    margin: 0 0 var(--spacing-sm) 0;
}

.activity-page-breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    margin-bottom: var(--spacing-md);
}

.activity-page-breadcrumb a {
    color: var(--link-color);
    text-decoration: none;
}

.activity-page-breadcrumb .breadcrumb-separator {
    margin: 0 var(--spacing-xs);
    color: var(--color-muted);
}

.activity-page-breadcrumb .breadcrumb-current {
    color: var(--text-color);
    font-weight: 500;
}

/* Activity Page Info Section */
.activity-page-info {
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.activity-page-info p {
    margin: var(--spacing-sm) 0;
    color: var(--color-neutral);
}

/* Activity Pages Section */
.activity-page-pages {
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.activity-page-section-heading {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    margin: 0 0 var(--spacing-md) 0;
}

.activity-pages-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.activity-page-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.activity-page-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
}

.activity-page-link {
    color: var(--link-color);
    text-decoration: none;
    flex: 1;
}

.activity-page-link:hover {
    text-decoration: underline;
}

.activity-page-empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
}

.activity-page-error {
    padding: var(--spacing-lg);
    background-color: var(--color-error-light);
    border-radius: var(--border-radius);
    color: var(--color-danger);
}

/* ===== HYDRATE SETTINGS PAGE ===== */

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

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

.hydrate-settings-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
    min-width: 130px;
    flex-shrink: 0;
}

.hydrate-settings-message {
    font-size: var(--font-size-sm);
}

/* Overrides table */
.hydrate-overrides-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.hydrate-overrides-table th,
.hydrate-overrides-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--light-border);
}

.hydrate-overrides-table th {
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.9;
}

[data-theme="dark"] .hydrate-overrides-table th,
[data-theme="dark"] .hydrate-overrides-table td {
    border-color: var(--color-neutral);
}

/* Content search input and results dropdown */
.hydrate-override-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 320px;
}

.hydrate-override-search-input {
    width: 100%;
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .hydrate-override-search-input {
    border-color: var(--color-neutral);
}

.hydrate-override-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    box-shadow: 0 4px 8px rgb(0 0 0 / 12%);
    max-height: 240px;
    overflow-y: auto;
}

[data-theme="dark"] .hydrate-override-search-results {
    border-color: var(--color-neutral);
    box-shadow: 0 4px 8px rgb(0 0 0 / 40%);
}

.hydrate-override-search-result-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.hydrate-override-search-result-item:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .hydrate-override-search-result-item:hover {
    background-color: var(--color-neutral);
}

/* Hydrate refresh message (shown after correct quiz answer or green flashcard) */
.hydrate-refresh-message {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
    border-top: 1px solid var(--light-border);
}

[data-theme="dark"] .hydrate-refresh-message {
    border-color: var(--color-neutral);
}

.hydrate-refresh-message .hydrate-refresh-change-link {
    font-size: inherit;
    padding: 0;
    vertical-align: baseline;
}

/* Browse content tree (modal picker) */
.hydrate-browse-tree {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    padding: var(--spacing-xs) 0;
}

.hydrate-browse-empty {
    color: var(--text-color);
    opacity: 0.9;
    padding: var(--spacing-sm);
}

.hydrate-browse-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    padding-left: calc(var(--spacing-sm) + var(--browse-depth, 0) * var(--spacing-md));
    min-height: 44px;
    border-radius: var(--border-radius-xs);
    cursor: default;
}

.hydrate-browse-row:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .hydrate-browse-row:hover {
    background-color: var(--color-neutral);
}

.hydrate-browse-arrow {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.55;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hydrate-browse-arrow:hover {
    opacity: 1;
}

.hydrate-browse-arrow-spacer {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-block;
}

.hydrate-browse-title {
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    color: var(--text-color);
    text-align: left;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.hydrate-browse-title:hover {
    text-decoration: underline;
}

.hydrate-browse-title-leaf {
    cursor: default;
}

.hydrate-browse-title-leaf:hover {
    text-decoration: none;
}

.hydrate-browse-change-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.6;
    padding: 2px var(--spacing-xs);
    flex-shrink: 0;
    white-space: nowrap;
}

.hydrate-browse-change-btn:hover {
    opacity: 1;
    text-decoration: underline;
}

.hydrate-browse-level {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.45;
    flex-shrink: 0;
    white-space: nowrap;
}

.hydrate-browse-override-badge {
    font-size: var(--font-size-xs);
    color: #6c6;
    background-color: rgb(102 204 102 / 12%);
    border: 1px solid rgb(102 204 102 / 35%);
    border-radius: 10px;
    padding: 1px 6px;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: default;
}

[data-theme="dark"] .hydrate-browse-override-badge {
    color: #8d8;
    background-color: rgb(136 221 136 / 12%);
    border-color: rgb(136 221 136 / 30%);
}

/* ===== TARGET PROGRESS PAGE ===== */

.targets-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}

/* ===== TARGET DETAILS PAGE ===== */

.target-details-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}