/* ===== THEME VARIABLES - Colors and Design Tokens ===== */ :root { /* Color Palette */ --app-background-color: #F2F2F2; --app-text-color: #000000; --app-page-header-text-color: var(--app-text-color); --app-accent-color: #7ed957; --focus-ring-color: var(--app-accent-color); --surface-emphasis-color: var(--app-accent-color); --brand-primary-color: var(--app-accent-color); --app-primary-action-surface-color: #7ed957; --app-primary-action-text-color: #000000; --learning-card-primary-action-surface-color: #7FC89E; --learning-card-primary-action-text-color: #000000; --app-secondary-surface-color: #d9d9d9; --app-secondary-text-color: #000000; --learning-card-audio-icon-disabled-color: #6c757d; --learning-card-audio-control-color: #7ed957; --feedback-correct-color: #00cc00; --feedback-error-color: #ff0000; --navigation-surface-color: #ffffff; --learning-card-surface-color: #ffffff; --border-color: color-mix(in srgb, var(--app-text-color) 12%, transparent); --learning-card-stimulus-surface-color: #ffffff; --media-video-overlay-surface-color: color-mix(in srgb, var(--learning-card-surface-color) 98%, transparent); --media-video-overlay-backdrop-color: color-mix(in srgb, var(--app-text-color) 60%, transparent); --app-surface-shadow: 0 4px 12px color-mix(in srgb, var(--app-text-color) 18%, transparent); --learning-card-performance-divider-color: color-mix(in srgb, var(--app-text-color) 15%, transparent); --app-loading-overlay-color: color-mix(in srgb, var(--app-background-color) 95%, transparent); --navigation-text-color: #000000; --app-subtle-surface-color: color-mix(in srgb, var(--app-text-color) 3%, var(--learning-card-surface-color)); --app-muted-surface-color: color-mix(in srgb, var(--app-text-color) 6%, var(--learning-card-surface-color)); --app-hover-surface-color: color-mix(in srgb, var(--app-text-color) 5%, var(--learning-card-surface-color)); --app-selected-surface-color: color-mix(in srgb, var(--app-accent-color) 12%, var(--learning-card-surface-color)); --app-info-color: var(--app-accent-color); --app-info-surface-color: var(--app-selected-surface-color); --app-success-color: var(--feedback-correct-color); --app-success-surface-color: color-mix(in srgb, var(--feedback-correct-color) 12%, var(--learning-card-surface-color)); --app-warning-color: color-mix(in srgb, var(--app-accent-color) 65%, var(--feedback-error-color) 35%); --app-warning-surface-color: color-mix(in srgb, var(--app-warning-color) 18%, var(--learning-card-surface-color)); --app-error-color: var(--feedback-error-color); --app-error-surface-color: color-mix(in srgb, var(--feedback-error-color) 10%, var(--learning-card-surface-color)); --app-state-hover-surface-color: var(--app-hover-surface-color); --app-state-selected-surface-color: var(--app-selected-surface-color); --app-state-disabled-surface-color: var(--app-muted-surface-color); --app-state-disabled-text-color: var(--app-secondary-text-color); --app-state-success-color: var(--app-success-color); --app-state-success-surface-color: var(--app-success-surface-color); --app-state-error-color: var(--app-error-color); --app-state-error-surface-color: var(--app-error-surface-color); --app-state-warning-color: var(--app-warning-color); --app-state-warning-surface-color: var(--app-warning-surface-color); --app-state-info-color: var(--app-info-color); --app-state-info-surface-color: var(--app-info-surface-color); --app-state-focus-ring-color: var(--focus-ring-color); --app-focus-shadow-color: color-mix(in srgb, var(--focus-ring-color) 25%, transparent); --app-error-shadow-color: color-mix(in srgb, var(--feedback-error-color) 25%, transparent); --app-warning-shadow-color: color-mix(in srgb, var(--app-warning-color) 30%, transparent); --app-shadow-soft: 0 4px 10px color-mix(in srgb, var(--app-text-color) 14%, transparent); --app-shadow-control: 0 4px 6px color-mix(in srgb, var(--app-text-color) 10%, transparent); --app-shadow-control-hover: 0 6px 12px color-mix(in srgb, var(--app-text-color) 15%, transparent); --app-shadow-panel-edge: -10px 0 18px color-mix(in srgb, var(--app-text-color) 8%, transparent); --app-shadow-floating-panel: 0 4px 14px color-mix(in srgb, var(--app-text-color) 12%, transparent); --app-shadow-modal: 0 16px 40px color-mix(in srgb, var(--app-text-color) 18%, transparent); --app-media-image-color: var(--app-success-color); --app-media-audio-color: var(--app-info-color); --app-media-video-color: color-mix(in srgb, var(--app-accent-color) 55%, var(--app-text-color) 45%); --app-media-mixed-color: color-mix(in srgb, var(--app-accent-color) 70%, var(--feedback-error-color) 30%); --bs-body-color: var(--app-text-color); --bs-body-bg: var(--app-background-color); --bs-secondary-color: var(--app-secondary-text-color); --bs-tertiary-color: var(--app-secondary-text-color); --bs-border-color: var(--border-color); --app-font-family: system-ui, -apple-system, "Segoe UI", sans-serif; --app-heading-font-family: var(--app-font-family); --app-font-size-base: 16px; --app-font-weight-normal: 400; --app-font-weight-medium: 500; --app-font-weight-semibold: 600; --app-font-weight-bold: 700; --app-font-weight-heavy: 800; --app-line-height-tight: 1.1; --app-line-height-normal: 1.4; --app-line-height-relaxed: 1.5; --app-label-letter-spacing: 0.08em; --app-label-text-transform: uppercase; --app-button-height: 44px; --app-button-line-height: 1; --app-text-input-height: 36px; --app-button-border-darkness: 20; --app-button-hover-darkness: 15; /* Density-aware spacing tokens - controlled by app_density_scale in the active theme */ --app-density-scale: 1; --app-space-0: 0; --app-space-1: calc(0.25rem * var(--app-density-scale)); --app-space-2: calc(0.5rem * var(--app-density-scale)); --app-space-3: calc(1rem * var(--app-density-scale)); --app-space-4: calc(1.5rem * var(--app-density-scale)); --app-space-5: calc(3rem * var(--app-density-scale)); --app-space-1-px: calc(4px * var(--app-density-scale)); --app-space-2-px: calc(8px * var(--app-density-scale)); --app-space-3-px: calc(12px * var(--app-density-scale)); --app-space-4-px: calc(16px * var(--app-density-scale)); --app-space-5-px: calc(24px * var(--app-density-scale)); /* Design Tokens - Border Radius for Semantic Consistency */ /* Admin configurable via Theme Settings (2 values) */ --app-border-radius-sm: 8px; /* Buttons, inputs, small UI elements */ --app-border-radius-lg: 12px; /* Modals, cards, large containers */ --app-border-width: 1px; /* Fixed semantic values - not customizable (3 values) */ --border-radius-pill: 999px; /* Fully rounded (toggles, badges) */ --border-radius-circle: 50%; /* Perfect circles */ --border-radius-none: 0px; /* Flat elements (stimulus boxes) */ /* Transition Durations - Admin Configurable via Theme Settings */ /* Default values (can be overridden in Admin Control Panel → Theme section) */ --app-transition-instant: 10ms; /* Instant - Accessibility fallback, near-instant transitions */ --app-transition-fast: 100ms; /* Fast - UI feedback, button hovers, quick transitions */ --app-transition-smooth: 200ms; /* Smooth - Trial transitions, main content fades */ /* Card Spacing System - Container-based spacing with CSS custom properties */ --card-stack-gap: var(--app-space-3); --card-stack-gap-small: calc(0.625rem * var(--app-density-scale)); --card-outer-padding: var(--app-space-4); --card-section-gap: calc(1.75rem * var(--app-density-scale)); --card-feedback-gap: calc(1.25rem * var(--app-density-scale)); --card-element-gap: calc(0.75rem * var(--app-density-scale)); --card-feedback-reserved-height: 200px; /* SPARC document layout theme tokens */ --app-sparc-multiple-choice-width: 66.666%; --app-sparc-answer-list-width: calc(var(--app-text-input-height) * 24); --app-sparc-feedback-width-min: calc(var(--app-text-input-height) * 12); --app-sparc-feedback-width-max: calc(var(--app-text-input-height) * 16); --app-sparc-term-table-min-width: calc(var(--app-text-input-height) * 26); --app-sparc-term-column-width-wide: calc(var(--app-text-input-height) * 5.25); --app-sparc-term-column-width-medium: calc(var(--app-text-input-height) * 4.75); --app-sparc-term-column-width-narrow: calc(var(--app-text-input-height) * 4.5); --app-sparc-term-value-width: calc(var(--app-text-input-height) * 1.75); --app-sparc-term-unit-width: calc(var(--app-text-input-height) * 1.35); --app-sparc-term-substance-width: calc(var(--app-text-input-height) * 2.15); --app-sparc-term-cancel-width: calc(var(--app-text-input-height) * 0.45); --app-sparc-hint-min-height: calc(var(--app-text-input-height) * 4); --app-sparc-hint-button-min-width: calc(var(--app-text-input-height) * 4); --app-sparc-table-column-min-width: calc(var(--app-text-input-height) * 2); --app-sparc-fraction-min-width: calc(var(--app-text-input-height) * 1.5); --app-sparc-operator-min-width: calc(var(--app-text-input-height) * 0.75); --app-sparc-message-min-width: calc(var(--app-text-input-height) * 6); --app-sparc-skill-track-min-width: calc(var(--app-text-input-height) * 5); --app-sparc-skill-track-max-width: calc(var(--app-text-input-height) * 10); --app-sparc-skill-bar-min-width: calc(var(--app-text-input-height) * 13); --app-sparc-skill-track-height: calc(var(--app-text-input-height) / 4); --app-sparc-feedback-glow-radius: var(--app-space-2); --app-sparc-primary-flex-grow: 999; --app-sparc-term-unit-flex-ratio: 0.72fr; /* Precomputed button colors - avoid repeated color-mix calculations */ --btn-border-color: color-mix(in srgb, var(--app-primary-action-surface-color) calc((100 - var(--app-button-border-darkness, 20)) * 1%), var(--app-text-color) calc(var(--app-button-border-darkness, 20) * 1%)); --btn-hover-bg: color-mix(in srgb, var(--app-primary-action-surface-color) calc((100 - var(--app-button-hover-darkness, 15)) * 1%), var(--app-text-color) calc(var(--app-button-hover-darkness, 15) * 1%)); --btn-hover-border: color-mix(in srgb, var(--app-primary-action-surface-color) calc((100 - var(--app-button-border-darkness, 20) - var(--app-button-hover-darkness, 15)) * 1%), var(--app-text-color) calc((var(--app-button-border-darkness, 20) + var(--app-button-hover-darkness, 15)) * 1%)); --btn-accent-border: color-mix(in srgb, var(--app-accent-color) calc((100 - var(--app-button-border-darkness, 20)) * 1%), var(--app-text-color) calc(var(--app-button-border-darkness, 20) * 1%)); --btn-secondary-border: color-mix(in srgb, var(--app-secondary-surface-color) calc((100 - var(--app-button-border-darkness, 20)) * 1%), var(--app-text-color) calc(var(--app-button-border-darkness, 20) * 1%)); --btn-secondary-hover-bg: color-mix(in srgb, var(--app-secondary-surface-color) calc((100 - var(--app-button-hover-darkness, 15)) * 1%), var(--app-text-color) calc(var(--app-button-hover-darkness, 15) * 1%)); } /* ===== ACCESSIBILITY ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: var(--app-space-0); margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } @media (max-width: 768px) { input[type=text]:focus, input[type=password]:focus, input:focus, textarea:focus { outline: none !important; outline-offset: 0 !important; } } /* Desktop: Full focus-visible accessibility features */ @media (min-width: 769px) { button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .multipleChoiceButton:focus-visible, .form-check-input:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; transition: outline-offset var(--app-transition-fast, 100ms) ease-in-out; } button:focus:not(:focus-visible), .btn:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; } } .multipleChoiceButton:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-ring-color, var(--app-accent-color)) 20%, transparent); } /* ===== DYNAMIC STYLES ===== */ .dynamic-font-size { font-size: var(--card-font-size); } /* Stimulus display box - primary styling (self-sufficient, no .alert dependency) */ #timerBar, #progressbar { width: 0%; } /* ===== BASE ELEMENTS ===== */ html { background-color: var(--app-background-color); overflow-x: hidden; overflow-y: scroll; max-width: 100%; margin: 0 !important; padding: var(--app-space-0) !important; border: none !important; } body { background-color: var(--app-background-color); color: var(--app-text-color); font-family: var(--app-font-family); font-size: var(--app-font-size-base); overflow-x: hidden; max-width: 100%; padding-right: var(--app-space-0) !important; margin: 0 !important; padding: var(--app-space-0) !important; border: none !important; } body.modal-open, body.offcanvas-open { overflow: visible !important; padding-right: var(--app-space-0) !important; } .page-loading { opacity: 0; will-change: opacity; } .page-loaded { opacity: 1; transition: opacity var(--app-transition-fast) ease-in; will-change: auto; } .app-loading-message, .app-ui-message-container { margin-top: var(--app-space-3); } .theme-settings-container { margin-top: var(--app-space-3); } .theme-name-row { margin-bottom: var(--app-space-3); } .theme-import-input { max-width: 280px; } .theme-name-input { width: 250px; } .currentThemePropColor { box-sizing: border-box; width: var(--app-button-height); height: var(--app-button-height); min-height: var(--app-button-height); padding: var(--app-space-1); border: 1px solid var(--border-color); border-radius: var(--app-border-radius-sm); background-color: var(--learning-card-surface-color); vertical-align: middle; cursor: pointer; } .currentThemePropColor::-webkit-color-swatch-wrapper { padding: var(--app-space-0); } .currentThemePropColor::-webkit-color-swatch { border: 1px solid var(--border-color); border-radius: calc(var(--app-border-radius-sm) / 2); } .currentThemePropColor::-moz-color-swatch { border: 1px solid var(--border-color); border-radius: calc(var(--app-border-radius-sm) / 2); } .theme-preview-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--app-space-2); margin-top: var(--app-space-2); } .theme-underlay-preview { max-width: min(420px, 100%); max-height: 160px; object-fit: cover; } .theme-logo-preview { max-width: 200px; } .theme-library-header { display: flex; flex-direction: column; gap: var(--app-space-3); margin-bottom: var(--app-space-3); } .theme-library-header h5 { margin: 0 0 var(--app-space-1); } .theme-action-row { display: flex; flex-wrap: wrap; gap: var(--app-space-2); } .theme-action-stack { gap: var(--app-space-2); } .theme-library-list { margin-bottom: var(--app-space-3); } .theme-pill { display: flex; flex-direction: column; justify-content: space-between; gap: var(--app-space-3); padding: var(--app-space-3); margin-bottom: var(--app-space-2); } .theme-origin-badge { margin-top: var(--app-space-1); } .theme-import-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-space-2); margin-top: var(--app-space-3); padding-top: var(--app-space-3); } @media (min-width: 992px) { .theme-library-header { flex-direction: row; align-items: center; justify-content: space-between; } } @media (min-width: 768px) { .theme-pill { flex-direction: row; } } .page-container { max-width: 1200px; margin: var(--app-space-3) auto; padding: var(--app-space-0) var(--app-space-3); width: 100%; } .page-container-wide { max-width: none; } h1{ font-family: var(--app-heading-font-family, var(--app-font-family)); font-weight: 800; font-size: clamp(calc(var(--app-font-size-base) * 2.5), 5vw, calc(var(--app-font-size-base) * 4.6)); } h2{ font-family: var(--app-heading-font-family, var(--app-font-family)); font-size: clamp(calc(var(--app-font-size-base) * 1.5), 3vw, calc(var(--app-font-size-base) * 2)); font-weight: 700; margin-top: calc(1.75rem * var(--app-density-scale)); margin-bottom: calc(1.25rem * var(--app-density-scale)); } h3{ font-size: clamp(calc(var(--app-font-size-base) * 1.25), 2.5vw, calc(var(--app-font-size-base) * 1.5)); font-weight: 800; margin-top: calc(1.5rem * var(--app-density-scale)); margin-bottom: var(--app-space-3); } .page-header-text, .page-header-title { color: var(--app-page-header-text-color, var(--app-text-color)); font-family: var(--app-heading-font-family, var(--app-font-family)); } .page-header-title { margin-top: 0; text-align: center; } .brand { font-family: var(--app-heading-font-family, var(--app-font-family)); } h4{ font-size: calc(var(--app-font-size-base) * 1.25); font-weight: 700; margin-top: calc(1.25rem * var(--app-density-scale)); margin-bottom: calc(0.75rem * var(--app-density-scale)); } h5{ font-size: var(--app-font-size-base); font-weight: 600; margin-top: var(--app-space-3); margin-bottom: calc(0.625rem * var(--app-density-scale)); } p{ font-size: var(--app-font-size-base); margin-top: calc(0.625rem * var(--app-density-scale)); margin-bottom: calc(0.625rem * var(--app-density-scale)); } /* Content links - use accent color for text links */ a.content-link { color: var(--app-accent-color); } /* ===== CONTAINERS ===== */ #feedbackOverrideContainer{ background-color: var(--app-background-color); border: none; margin: 0; padding: var(--app-space-0); } #cardContainer{ background-color: var(--app-background-color); /* Removed contain: layout style paint - was blocking scrollIntoView() */ margin-top: 0 !important; padding-top: var(--app-space-0) !important; border-top: none !important; } .videoOverlay{ /* make very faintly transparent */ background-color: color-mix(in srgb, var(--learning-card-surface-color) 50%, transparent); } /* ===== FORM ELEMENTS ===== */ input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week] { box-sizing: border-box; font-family: inherit; font-size: var(--app-font-size-base); height: var(--app-text-input-height); min-height: var(--app-text-input-height); border: 1px solid var(--border-color); border-radius: var(--app-border-radius-sm); padding: var(--app-space-0) var(--app-space-3-px); line-height: calc(var(--app-text-input-height) - 2px); } @media (max-width: 768px) { input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=date]:focus, input[type=time]:focus, input[type=datetime-local]:focus, input[type=month]:focus, input[type=week]:focus { border: 1px solid var(--border-color) !important; outline: none !important; } } /* Desktop: Focus state changes border color for visual feedback */ @media (min-width: 769px) { input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=date]:focus, input[type=time]:focus, input[type=datetime-local]:focus, input[type=month]:focus, input[type=week]:focus { border: 1px solid var(--app-accent-color); } input[type=text]:focus-visible, input[type=password]:focus-visible, input[type=search]:focus-visible, input[type=email]:focus-visible, input[type=url]:focus-visible, input[type=tel]:focus-visible, input[type=number]:focus-visible, input[type=date]:focus-visible, input[type=time]:focus-visible, input[type=datetime-local]:focus-visible, input[type=month]:focus-visible, input[type=week]:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; } } select { font-family: inherit; border-width: 1px; border-radius: var(--app-border-radius-sm); padding: calc(6px * var(--app-density-scale)); border-color: var(--app-accent-color); } .form-label, .form-check-label { color: var(--app-text-color); } .text-muted { color: var(--app-secondary-text-color) !important; } .form-control, .form-select { background-color: var(--learning-card-surface-color); border-color: var(--border-color); color: var(--app-text-color); font-family: var(--app-font-family); font-size: var(--app-font-size-base); } .form-control::placeholder { color: var(--app-secondary-text-color); font-family: inherit; font-size: inherit; opacity: 1; } /* File input styling - consistent with buttons */ input[type="file"], .form-control[type="file"] { box-sizing: border-box; font-family: inherit; font-size: var(--app-font-size-base); height: var(--app-button-height); min-height: var(--app-button-height); padding: var(--app-space-0) calc(0.75rem * var(--app-density-scale)) var(--app-space-0) var(--app-space-0); line-height: calc(var(--app-button-height) - 2px); overflow: hidden; border: 1px solid var(--btn-secondary-border); border-radius: var(--app-border-radius-sm); background-color: var(--app-secondary-surface-color); color: var(--app-secondary-text-color); cursor: pointer; } input[type="file"]::file-selector-button, .form-control[type="file"]::file-selector-button { appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: inherit; font-weight: 400; height: calc(var(--app-button-height) - 2px); min-height: calc(var(--app-button-height) - 2px); padding: var(--app-space-0) var(--app-space-3); margin: 0 0.75rem 0 0; border: none; border-radius: var(--app-border-radius-sm) 0 0 var(--app-border-radius-sm); background-color: var(--app-primary-action-surface-color); color: var(--app-primary-action-text-color); cursor: pointer; line-height: calc(var(--app-button-height) - 2px); transition: background-color var(--app-transition-fast) ease; vertical-align: middle; } input[type="file"]::file-selector-button:hover, .form-control[type="file"]::file-selector-button:hover { background-color: var(--btn-hover-bg); } .theme-settings-container input[type=text], .theme-settings-container input[type=password], .theme-settings-container input[type=search], .theme-settings-container input[type=email], .theme-settings-container input[type=url], .theme-settings-container input[type=tel], .theme-settings-container input[type=number], .theme-settings-container input[type=date], .theme-settings-container input[type=time], .theme-settings-container input[type=datetime-local], .theme-settings-container input[type=month], .theme-settings-container input[type=week], .theme-settings-container textarea, .theme-settings-container select { font-size: var(--app-font-size-base); } .sign-in-input { margin: 0 auto; } .auth-page { max-width: 100%; margin: clamp(var(--app-space-4), 5vw, calc(4rem * var(--app-density-scale))) auto 0; padding: var(--app-space-0) var(--app-space-3); } .auth-shell { max-width: 34rem; margin: 0 auto; } .auth-card { border: 1px solid color-mix(in srgb, var(--app-text-color) 12%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--app-text-color) 10%, transparent); } .auth-card-body { padding: clamp(var(--app-space-3), 3vw, calc(2.25rem * var(--app-density-scale))); display: flex; flex-direction: column; gap: calc(1.25rem * var(--app-density-scale)); } .auth-brand { display: flex; flex-direction: column; gap: calc(0.75rem * var(--app-density-scale)); font-family: var(--app-heading-font-family, var(--app-font-family)); } .auth-system-name { display: inline-flex; align-items: center; gap: calc(0.75rem * var(--app-density-scale)); color: var(--navigation-text-color); margin-top: var(--app-space-0); margin-bottom: var(--app-space-0); } .auth-system-name .navbar-brand-icon { width: calc(2.5rem * var(--app-density-scale)); height: calc(2.5rem * var(--app-density-scale)); flex: 0 0 auto; } .auth-title { font-size: clamp(calc(var(--app-font-size-base) * 1.8), 4vw, calc(var(--app-font-size-base) * 2.5)); line-height: 1.1; margin: 0; } .sign-in-title { font-size: clamp(calc(var(--app-font-size-base) * 1.45), 3vw, calc(var(--app-font-size-base) * 1.95)); } .experiment-portal-title { font-size: clamp(calc(var(--app-font-size-base) * 1.35), 2.6vw, calc(var(--app-font-size-base) * 1.75)); } #signInContainer.auth-page { min-height: 100svh; display: flex; flex-direction: column; margin: clamp(calc(0.75rem * var(--app-density-scale)), 3vw, calc(2rem * var(--app-density-scale))) auto 0; } #signInContainer .auth-shell { max-width: 33rem; flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; } #signInContainer .auth-card { width: 100%; } #signInContainer .auth-card-body { padding: clamp(calc(0.9rem * var(--app-density-scale)), 2.2vw, calc(1.4rem * var(--app-density-scale))); gap: calc(0.9rem * var(--app-density-scale)); } #signInContainer .auth-brand { gap: calc(0.45rem * var(--app-density-scale)); } #signInContainer .sign-in-title { font-size: clamp(calc(var(--app-font-size-base) * 1.05), 2.15vw, calc(var(--app-font-size-base) * 1.3)); line-height: 1.05; } #signInContainer .auth-description { line-height: 1.4; } #signInContainer .auth-form { gap: calc(0.85rem * var(--app-density-scale)); } #signInContainer .sign-in-form-grid { gap: calc(0.55rem * var(--app-density-scale)); } #signInContainer .auth-secondary-actions { gap: calc(0.6rem * var(--app-density-scale)); } #signInContainer .auth-divider { margin: calc(0.15rem * var(--app-density-scale)) 0; } #signInContainer .footer { flex: 0 0 auto; margin-top: var(--app-space-2) !important; padding-bottom: calc(0.75rem * var(--app-density-scale)); } .auth-description { color: color-mix(in srgb, var(--app-text-color) 82%, transparent); margin: var(--app-space-0); line-height: 1.5; } .auth-description-secondary { color: color-mix(in srgb, var(--app-text-color) 70%, transparent); } .auth-description-primary { margin-bottom: var(--app-space-2); } .auth-form { display: flex; flex-direction: column; gap: var(--app-space-3); } .auth-field { display: flex; flex-direction: column; gap: var(--app-space-2); text-align: left; } .auth-label { font-weight: 600; margin-bottom: 0; } .auth-helper-text { color: color-mix(in srgb, var(--app-text-color) 72%, transparent); font-size: calc(var(--app-font-size-base) * 0.95); } .auth-field-message { color: var(--feedback-error-color); font-size: calc(var(--app-font-size-base) * 0.95); } .auth-inline-actions { display: flex; justify-content: flex-end; } .sign-in-form-grid { display: grid; gap: calc(0.75rem * var(--app-density-scale)); } .sign-in-form-row { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: center; gap: calc(0.75rem * var(--app-density-scale)); } .sign-in-form-row .auth-label { margin: 0; } .sign-in-form-input-cell { min-width: 0; } .auth-primary-btn, .auth-provider-btn { min-height: calc(46px * var(--app-density-scale)); } .auth-provider-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--btn-secondary-border); } .auth-provider-icon { margin-right: var(--app-space-2); } .auth-secondary-actions { display: flex; flex-direction: column; gap: calc(0.75rem * var(--app-density-scale)); } .auth-divider { position: relative; text-align: center; color: color-mix(in srgb, var(--app-text-color) 65%, transparent); font-size: calc(var(--app-font-size-base) * 0.95); } .auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid color-mix(in srgb, var(--app-text-color) 14%, transparent); } .auth-divider span { position: relative; padding: var(--app-space-0) calc(0.75rem * var(--app-density-scale)); background-color: var(--learning-card-surface-color); } .auth-link { color: var(--app-accent-color); text-decoration: none; } .auth-link:hover, .auth-link:focus-visible { color: color-mix(in srgb, var(--app-accent-color) 75%, var(--app-text-color)); text-decoration: underline; } .auth-supporting-action { display: flex; justify-content: center; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: calc(var(--app-font-size-base) * 0.95); padding-top: var(--app-space-1); } .auth-message { margin-bottom: var(--app-space-0); border-radius: var(--app-border-radius-sm); padding: calc(0.875rem * var(--app-density-scale)) var(--app-space-3); background-color: color-mix(in srgb, var(--app-secondary-surface-color) 85%, transparent); color: var(--app-text-color); text-align: left; } .auth-message-error { background-color: color-mix(in srgb, var(--feedback-error-color) 12%, var(--learning-card-surface-color)); color: color-mix(in srgb, var(--feedback-error-color) 70%, var(--app-text-color)); } .auth-message-success { background-color: color-mix(in srgb, var(--feedback-correct-color) 12%, var(--learning-card-surface-color)); color: color-mix(in srgb, var(--feedback-correct-color) 70%, var(--app-text-color)); } @media (max-width: 576px) { .auth-page { padding: var(--app-space-0) calc(0.75rem * var(--app-density-scale)); } .auth-card-body { padding: var(--app-space-3); } #signInContainer.auth-page { min-height: 100dvh; margin-top: 0.5rem; padding: var(--app-space-0) calc(0.55rem * var(--app-density-scale)); } #signInContainer .auth-card-body { padding: calc(0.8rem * var(--app-density-scale)); gap: 0.75rem; } #signInContainer .auth-system-name { gap: 0.55rem; } #signInContainer .auth-system-name .navbar-brand-icon { width: 2rem; height: 2rem; } #signInContainer .auth-description { font-size: calc(var(--app-font-size-base) * 0.95); } #signInContainer .sign-in-form-row { gap: 0.55rem; } #signInContainer .footer { margin-top: 0.35rem !important; padding-bottom: var(--app-space-2); } } /* Form switches */ .form-check { margin-bottom: 1rem; } .form-switch .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-color: var(--app-accent-color); } .form-switch .form-check-input { width: 3em; height: 1.5em; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-color: var(--app-secondary-surface-color); background-position: left center; border-radius: var(--border-radius-pill); transition: background-position var(--app-transition-fast) ease-in-out; } .form-switch .form-check-label{ font-size: var(--app-font-size-base); margin-left: 0.5rem; } /* Range slider base styling */ input[type="range"], .form-range { -webkit-appearance: none; appearance: none; width: 100%; height: 0.5rem; border-radius: var(--app-border-radius-sm); background: var(--app-secondary-surface-color); outline: none; } /******** WebKit (Chrome, Safari, Edge) ********/ input[type="range"]::-webkit-slider-runnable-track, .form-range::-webkit-slider-runnable-track { -webkit-appearance: none; height: 0.5rem; border-radius: var(--app-border-radius-sm); background: transparent; /* Track background is handled by input background */ } input[type="range"]::-webkit-slider-thumb, .form-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.25rem; height: 1.25rem; border-radius: var(--border-radius-circle); background: var(--app-accent-color); cursor: pointer; margin-top: -0.375rem; /* (thumb height - track height) / 2 = (1.25 - 0.5) / 2 */ border: 2px solid var(--learning-card-surface-color); box-shadow: 0 1px 3px color-mix(in srgb, var(--app-text-color) 30%, transparent); } /******** Firefox ********/ input[type="range"]::-moz-range-track, .form-range::-moz-range-track { height: 0.5rem; border-radius: var(--app-border-radius-sm); background: var(--app-secondary-surface-color); } input[type="range"]::-moz-range-thumb, .form-range::-moz-range-thumb { border: 2px solid var(--learning-card-surface-color); appearance: none; width: 1.25rem; height: 1.25rem; border-radius: var(--border-radius-circle); background: var(--app-accent-color); cursor: pointer; box-shadow: 0 1px 3px color-mix(in srgb, var(--app-text-color) 30%, transparent); } input[type="range"]::-moz-range-progress, .form-range::-moz-range-progress { height: 0.5rem; border-radius: var(--app-border-radius-sm) 0 0 var(--app-border-radius-sm); background: var(--feedback-correct-color); } /* ===== BUTTONS ===== */ .btn, .btn-icon{ --bs-btn-font-family: var(--app-font-family); --bs-btn-font-size: inherit; --bs-btn-line-height: inherit; --bs-btn-padding-y: 0; display: inline-flex; align-items: center; justify-content: center; background-color: var(--app-primary-action-surface-color); border-color: var(--btn-border-color); color: var(--app-primary-action-text-color); font-family: var(--app-font-family); font-size: inherit; line-height: inherit; border-radius: var(--app-border-radius-sm); min-height: var(--app-button-height); } .btn-selected{ background-color: var(--app-accent-color); border-color: var(--btn-accent-border); color: var(--app-primary-action-text-color); } .btn-secondary{ background-color: var(--app-secondary-surface-color); border-color: var(--btn-secondary-border); color: var(--app-secondary-text-color); } .btn:hover, .btn-icon:hover{ background-color: var(--btn-hover-bg); border-color: var(--btn-hover-border); color: var(--app-text-color); } .btn-fixed{ max-width: 300px; } /* Responsive button grid - 2 cols mobile, 3 cols tablet, 4 cols desktop */ .button-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.5rem, 1.5vw, 1rem); width: 100%; } @media (min-width: 576px) { .button-menu { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .button-menu { grid-template-columns: repeat(4, 1fr); } } .button-menu .btn { width: 100%; min-height: var(--app-button-height); /* Touch target */ } /* Alternative button style - used for image choice buttons */ .btn-alt { background-color: var(--app-secondary-surface-color); border-color: var(--btn-secondary-border); color: var(--app-secondary-text-color); padding: calc(10px * var(--app-density-scale)); } .btn-alt:hover { background-color: var(--btn-secondary-hover-bg); } /* Padded button with minimum width - for consistent button sizing */ .btnPaddedAndMinWidth { padding: calc(10px * var(--app-density-scale)) clamp(var(--app-space-3-px), 3vw, calc(20px * var(--app-density-scale))); min-width: 120px; } /* Left and right margin utility */ .marginLeftAndRight { margin-left: clamp(0.5rem, 2vw, 1rem); margin-right: clamp(0.5rem, 2vw, 1rem); } /* Visible text - ensures text is visible against various backgrounds */ .visible-text { color: var(--app-text-color); } .btn-icon{ font-family: inherit; border-width: 1px; padding: var(--app-space-3-px); margin: 6px; text-align: center; justify-content: center; align-items: center; } /* Multiple choice image buttons - responsive sizing */ .btn-image { background-size: contain; background-position: center; background-repeat: no-repeat; min-height: 150px; width: 100%; max-width: 300px; } /* ===== INLINE AUDIO BUTTONS ===== */ /* Audio playback buttons embedded in instruction text */ .inline-audio { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; } .play-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--app-space-1) var(--app-space-2); background-color: var(--app-primary-action-surface-color); border: 1px solid var(--btn-border-color); border-radius: var(--app-border-radius-sm); color: var(--app-primary-action-text-color); font-size: var(--app-font-size-base); line-height: 1; cursor: pointer; transition: all var(--app-transition-fast) ease-in-out; min-width: 32px; min-height: var(--app-button-height); vertical-align: middle; } .play-btn:hover { background-color: var(--btn-hover-bg); border-color: var(--btn-hover-border); transform: scale(1.05); } .play-btn:active { transform: scale(0.95); } .play-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } /* Ensure audio elements are hidden */ .inline-audio audio { display: none; } /* Unit instructions */ .instructions-container { margin-top: 1rem; } body:has(.instructions-container) { min-height: 100vh; min-height: 100dvh; background-color: var(--app-background-color); } .instructions-card { color: var(--app-text-color); } .instructions-card img { max-width: 100%; height: auto; } .instructions-card #continueBar { margin-bottom: 0; } /* ===== CARD MULTIPLE-CHOICE PANEL ===== */ .c-card-choices { --choice-gap: clamp(0.75rem, 1.5vw, 1.25rem); --choice-max-width: 19rem; --choice-min-height: 3.25rem; --choice-button-columns: auto-fit; --uniform-button-width: var(--choice-max-width); display: flex; flex-direction: column; gap: var(--choice-gap); contain: layout style; } .c-card-choices:is(.trial-input-hidden, [data-state='hidden'], [hidden]) { opacity: 0; pointer-events: none; } .c-card-choices:is(.input-pending, [data-state='pending']) { opacity: 0.35; pointer-events: none; } .c-card-choices__prompt { text-align: center; font-weight: 600; margin: 0 auto; max-width: 40ch; } .c-card-choices__grid { display: grid; gap: var(--choice-gap); justify-items: center; grid-template-columns: repeat(var(--choice-button-columns, auto-fit), minmax(min(var(--choice-max-width), 100%), 1fr)); width: 100%; } .c-card-choices__cell { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .c-card-choices__cell label { margin-bottom: 0; font-weight: 600; } .c-card-choices__button { width: min(100%, var(--uniform-button-width)); max-width: var(--uniform-button-width); min-height: var(--choice-min-height); padding: var(--app-space-3); border: 1px solid var(--btn-border-color); border-radius: var(--app-border-radius-sm); background-color: var(--app-primary-action-surface-color); color: var(--app-primary-action-text-color); text-align: center; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--app-transition-fast) ease, border-color var(--app-transition-fast) ease, transform var(--app-transition-fast) ease; white-space: normal; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .c-card-choices__button:hover, .c-card-choices__button:focus-visible { background-color: var(--btn-hover-bg); border-color: var(--btn-hover-border); color: var(--app-text-color); transform: translateY(-1px); } .c-card-choices__button:is([aria-checked='true'], .is-selected) { background-color: var(--app-accent-color); border-color: var(--btn-accent-border); color: var(--app-primary-action-text-color); } .c-card-choices__button:is([disabled], [aria-disabled='true']) { opacity: 0.4; cursor: not-allowed; transform: none; } .c-card-choices__button--image { background-size: contain; background-position: center; background-repeat: no-repeat; min-height: clamp(9rem, 25vh, 14rem); color: transparent; } @media (max-width: 768px) { .c-card-choices { --choice-gap: clamp(0.5rem, 2vw, 0.75rem); --choice-max-width: 100%; } .c-card-choices__button { min-height: 3.5rem; } } /* Special button styles - outline buttons with background */ #signInButtonOAuth, #backkTosignInButton { border-color: var(--btn-accent-border); } #signInWithMicrosoftSSO, #signInWithMemphisSaml, #classSelectButton { border: 1px solid var(--app-text-color); } /* ===== MODALS ===== */ .modal-content{ background-color: var(--app-secondary-surface-color); color: var(--app-secondary-text-color); display: flex; border-radius: var(--app-border-radius-lg); /* Larger radius for prominent modals */ /* fade in and out */ animation: fadeIn var(--app-transition-smooth); -webkit-animation: fadeIn var(--app-transition-smooth); } .modal-dialog{ background-color: transparent; } .modal-title{ font-weight: 800; font-size: calc(var(--app-font-size-base) * 1.25); /* Standardized modal title size */ /* center text */ justify-content: center; display: inline-flex; margin-left: auto; } .modal-body{ padding: var(--app-space-0); } .modal-header{ border-radius: var(--app-border-radius-lg) var(--app-border-radius-lg) 0 0; } /* Login class-selection modal uses the small radius token */ #classSelectModal .modal-content { border-radius: var(--app-border-radius-sm); } #classSelectModal .modal-header { border-radius: var(--app-border-radius-sm) var(--app-border-radius-sm) 0 0; } /* ===== ALERTS ===== */ .alert, .header-box{ background-color: var(--app-secondary-surface-color); color: var(--app-secondary-text-color); /*vertical center text*/ display: flex; align-items: center; /*horizontal center text*/ justify-content: center; } .alert{ margin-top: 1rem; margin-bottom: 1rem; padding: calc(1.25rem * var(--app-density-scale)); border-radius: var(--border-radius-none); } .text-alert-danger{ color: var(--feedback-error-color); } .alert-bg{ background-color: var(--navigation-surface-color); color: var(--app-text-color); } .alert-icon{ /*display an icon on the top left of the alert*/ float: left; margin-left: 50px; margin-top: -10vh; width: 50px; height: 50px; /* font size should be 50px */ font-size: clamp(calc(var(--app-font-size-base) * 2), 4vw, calc(var(--app-font-size-base) * 3.13)); /* circle */ border-radius: var(--border-radius-circle); } /* Transparent alert for stimuli box when disabled */ .alert-transparent { background-color: transparent; border: none; color: inherit; } /* ===== CARDS & TABLES ===== */ .card { border-radius: var(--app-border-radius-lg); background-color: var(--learning-card-surface-color); color: var(--app-text-color); } .card-body{ padding: var(--app-space-3); } .card-header{ padding: calc(10px * var(--app-density-scale)); } .card-header .displaystats{ background-color: var(--app-secondary-surface-color); color: var(--app-text-color); font-size: calc(var(--app-font-size-base) * 0.94); margin-top: -10px; margin-bottom: -10px; text-align: center; } /* Admin page spacing utilities */ .admin-page { margin-top: var(--app-space-3); } .admin-message { margin-bottom: var(--app-space-3); } .admin-loading-text { margin-top: var(--app-space-3); margin-bottom: var(--app-space-0); } .admin-loading-block { padding-top: var(--app-space-4); padding-bottom: var(--app-space-4); } .admin-section { margin-top: calc(2.5rem * var(--app-density-scale)); margin-bottom: calc(1.75rem * var(--app-density-scale)); } .admin-section:first-child { margin-top: 0; /* No top margin for first section */ } .admin-subsection { margin-top: calc(1.75rem * var(--app-density-scale)); margin-bottom: calc(1.25rem * var(--app-density-scale)); } .admin-card { margin-bottom: var(--app-space-4); } .admin-section-heading { display: flex; align-items: center; gap: var(--app-space-2); margin-bottom: var(--app-space-3); } .admin-section-heading:is(h5, h6) { margin-top: 0; } .admin-section-heading h5, .admin-section-heading h6 { margin: 0; } .admin-section-heading-compact { margin-bottom: var(--app-space-2); } .admin-section-icon { width: 1.25rem; min-width: 1.25rem; color: var(--app-accent-color); font-size: calc(var(--app-font-size-base) * 1.25); line-height: 1; text-align: center; } .admin-section-top-border { padding-top: var(--app-space-3); } .admin-form-row { margin-bottom: var(--app-space-3); } .admin-action-row { margin-top: var(--app-space-4); } .admin-backups-page .backup-warning-card { border-color: #9a6a00; } .admin-backups-page .backup-warning-card .admin-section-icon { color: #8a5a00; } .backup-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--app-space-2) var(--app-space-4); margin-top: var(--app-space-3); } .backup-history-list { display: grid; gap: var(--app-space-3); } .backup-history-row { align-items: center; border: 1px solid var(--app-border-color); border-radius: 8px; display: flex; gap: var(--app-space-4); justify-content: space-between; padding: var(--app-space-3); } .backup-history-title { font-weight: 600; overflow-wrap: anywhere; } .backup-history-meta { color: var(--app-muted-text-color); font-size: calc(var(--app-font-size-base) * 0.9); } .backup-history-error { color: #9f1d1d; font-size: calc(var(--app-font-size-base) * 0.9); margin-top: var(--app-space-1); } .backup-history-actions { display: flex; flex-wrap: wrap; gap: var(--app-space-2); justify-content: flex-end; } .backup-manifest-view { background: var(--app-background-color); border: 1px solid var(--app-border-color); border-radius: 8px; max-height: 420px; overflow: auto; padding: var(--app-space-3); white-space: pre-wrap; } .backup-restore-controls { align-items: center; display: grid; gap: var(--app-space-2); grid-template-columns: minmax(12rem, 1fr) auto auto; } @media (max-width: 720px) { .backup-history-row { align-items: stretch; flex-direction: column; } .backup-history-actions { justify-content: flex-start; } .backup-restore-controls { grid-template-columns: 1fr; } } .admin-compact-action-row { margin-top: var(--app-space-2); } .admin-header-action-row { display: flex; flex-direction: column; justify-content: space-between; gap: var(--app-space-3); margin-bottom: var(--app-space-3); } .admin-inline-icon { margin-right: var(--app-space-2); } .admin-button-icon { margin-right: var(--app-space-1); } .admin-list-row { margin-bottom: var(--app-space-2); } .admin-empty-text { margin-bottom: var(--app-space-0); } .admin-table-status-cell { padding-top: var(--app-space-4) !important; padding-bottom: var(--app-space-4) !important; } .admin-output-region { margin-top: var(--app-space-3); } .admin-alert-flush { margin-bottom: var(--app-space-0); } .admin-modal-body-row { display: flex; align-items: center; gap: var(--app-space-3); } .help-content { margin-top: var(--app-space-4); } .access-denied-page { margin-top: var(--app-space-4); } .access-denied-title { margin-bottom: var(--app-space-3); } .access-denied-message { margin-bottom: var(--app-space-4); } .experiment-error-page { display: flex; align-items: center; justify-content: center; padding-right: var(--app-space-3); padding-left: var(--app-space-3); } .experiment-error-title, .experiment-error-message { margin-bottom: var(--app-space-3); } .experiment-error-note { margin-bottom: var(--app-space-0); } .instructions-card { margin-bottom: var(--app-space-4); } .instructions-lockout-time { margin-top: var(--app-space-4); } .instructions-action-button, .cur-page-number-card, .app-disabled-error-field { margin-right: auto; margin-left: auto; } @media (min-width: 992px) { .admin-header-action-row { flex-direction: row; align-items: center; } } .admin-form-row-sm { margin-bottom: var(--app-space-2); } .admin-form-row-xs { margin-bottom: var(--app-space-1); } .admin-form-row-top { margin-top: var(--app-space-3); } .admin-empty-state { padding-top: var(--app-space-4); padding-bottom: var(--app-space-4); } .admin-alert-compact { padding-top: var(--app-space-2); padding-bottom: var(--app-space-2); } .admin-alert-tiny { margin-top: var(--app-space-2); margin-bottom: 0; padding: var(--app-space-1) var(--app-space-2); } .admin-denied-alert { margin-top: var(--app-space-4); } .admin-inline-action { margin-left: var(--app-space-2); } .admin-api-key-grid { display: grid; gap: var(--app-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-api-key-group { align-content: start; display: grid; gap: var(--app-space-3); } .admin-api-key-fields { display: grid; gap: var(--app-space-3); } .admin-api-key-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--app-space-2); justify-content: center; } .admin-api-key-actions .btn { white-space: nowrap; } @media (max-width: 991.98px) { .admin-api-key-grid { grid-template-columns: 1fr; } } .admin-maintenance-card .card-body { padding: var(--app-space-3) var(--app-space-4); } .admin-maintenance-row { align-items: center; display: grid; gap: var(--app-space-4); grid-template-columns: minmax(0, 1fr) auto; } .admin-maintenance-copy { display: grid; gap: var(--app-space-1); } .admin-maintenance-description { color: var(--app-muted-text-color); font-size: calc(var(--app-font-size-base) * 0.92); line-height: 1.35; margin: 0; max-width: 62rem; } .admin-maintenance-action { align-items: center; display: flex; justify-content: flex-end; } .admin-maintenance-action .btn { white-space: nowrap; } @media (max-width: 767.98px) { .admin-maintenance-row { grid-template-columns: 1fr; } .admin-maintenance-action { justify-content: flex-start; } } .admin-verbosity-card .card-body { padding: var(--app-space-3) var(--app-space-4); } .admin-verbosity-heading { margin-bottom: var(--app-space-2); } .admin-verbosity-heading .admin-section-heading { margin-bottom: var(--app-space-1); } .admin-verbosity-intro { color: var(--app-muted-text-color); font-size: calc(var(--app-font-size-base) * 0.92); line-height: 1.35; margin: 0; } .admin-verbosity-options { align-items: start; display: grid; gap: var(--app-space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-verbosity-option { align-items: flex-start; background: var(--app-subtle-surface-color); border: 1px solid var(--app-border-color); border-radius: 8px; cursor: pointer; display: flex; gap: var(--app-space-2); padding: var(--app-space-3); transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .admin-verbosity-option:hover, .admin-verbosity-option:focus-within { background: color-mix(in srgb, var(--app-accent-color) 8%, var(--app-subtle-surface-color)); border-color: color-mix(in srgb, var(--app-accent-color) 48%, var(--app-border-color)); } .admin-verbosity-option:has(.form-check-input:checked) { background: color-mix(in srgb, var(--app-accent-color) 12%, var(--app-secondary-surface-color)); border-color: color-mix(in srgb, var(--app-accent-color) 68%, var(--app-border-color)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent-color) 28%, transparent); } .admin-verbosity-option-control { display: flex; flex: 0 0 auto; padding-top: 0.1rem; } .admin-verbosity-option .form-check-input { margin: 0; } .admin-verbosity-option-copy { display: grid; gap: var(--app-space-1); } .admin-verbosity-option-title { color: var(--app-text-color); font-weight: 700; line-height: 1.2; } .admin-verbosity-option-description { color: var(--app-muted-text-color); font-size: calc(var(--app-font-size-base) * 0.88); line-height: 1.35; } @media (max-width: 991.98px) { .admin-verbosity-options { grid-template-columns: 1fr; } } .admin-preformatted-output { width: 100%; max-height: 300px; overflow-y: auto; white-space: pre-wrap; background-color: var(--app-subtle-surface-color); border: 1px solid var(--border-color); color: var(--app-text-color); } .admin-scroll-output { max-height: 60vh; overflow-y: auto; white-space: pre-wrap; color: var(--app-text-color); } .admin-loading-image { max-width: 80px; } .editor-page-header { display: flex; align-items: center; gap: var(--app-space-3); margin-bottom: var(--app-space-3); } .editor-back-button { flex: 0 0 auto; } .editor-page-title { margin: 0; } .editor-loading-state { padding-top: var(--app-space-5); padding-bottom: var(--app-space-5); } .editor-inline-check { margin-bottom: 0; } .content-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--app-space-2); margin-top: var(--app-space-3); margin-bottom: var(--app-space-4); } .manual-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-space-2); margin-bottom: var(--app-space-3); } /* Theme section grouping - visually separates theme configuration groups */ .theme-section { background-color: var(--learning-card-surface-color); color: var(--app-text-color); border: 1px solid var(--border-color); border-radius: var(--app-border-radius-lg); padding: calc(1.25rem * var(--app-density-scale)); margin-top: calc(1.25rem * var(--app-density-scale)); margin-bottom: calc(1.25rem * var(--app-density-scale)); } .theme-section-header { margin-top: 0; margin-bottom: calc(0.875rem * var(--app-density-scale)); font-size: clamp(var(--app-font-size-base), 2.5vw, calc(var(--app-font-size-base) * 1.1)); font-weight: 600; color: var(--app-text-color); border-bottom: 2px solid var(--app-accent-color); padding-bottom: var(--app-space-2); } .theme-pill { background-color: var(--learning-card-surface-color); color: var(--app-text-color); border-color: color-mix(in srgb, var(--app-text-color) 22%, transparent) !important; transition: border-color var(--app-transition-fast) ease, box-shadow var(--app-transition-fast) ease; } .theme-pill-active { border-color: var(--app-accent-color) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent-color) 28%, transparent); } .theme-pill .btn-group .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 6rem; height: var(--app-button-height); min-height: var(--app-button-height); } .theme-pill .btn-group .btn[disabled], .theme-pill .btn-group .btn[aria-disabled='true'] { opacity: 1; cursor: default; } .theme-wizard-panel { margin-top: var(--app-space-3); padding-top: var(--app-space-3); } .theme-wizard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--app-space-3); margin-top: var(--app-space-3); } .theme-wizard-control-group { min-width: 0; } .theme-wizard-palette { display: grid; gap: var(--app-space-2); } .theme-wizard-palette-slot { display: grid; grid-template-columns: 44px minmax(96px, 1fr) minmax(84px, 1fr) auto; gap: var(--app-space-2); align-items: center; } .theme-wizard-palette-slot input[type=color] { width: var(--app-button-height); height: var(--app-text-input-height); padding: calc(2px * var(--app-density-scale)); } .theme-wizard-check { display: block; margin-bottom: calc(0.35rem * var(--app-density-scale)); } .theme-wizard-stats { display: flex; flex-wrap: wrap; gap: var(--app-space-2) var(--app-space-3); margin-top: var(--app-space-3); font-size: calc(var(--app-font-size-base) * 0.9); } .theme-wizard-preview { margin-top: var(--app-space-3); border: 1px solid color-mix(in srgb, var(--app-text-color) 18%, transparent); border-radius: var(--app-border-radius-sm); overflow: hidden; } .theme-wizard-preview-nav { padding: calc(0.6rem * var(--app-density-scale)) calc(0.8rem * var(--app-density-scale)); font-weight: 700; } .theme-wizard-preview-card { margin: var(--app-space-3); padding: var(--app-space-3); border-radius: var(--app-border-radius-sm); box-shadow: var(--app-surface-shadow); } .theme-wizard-preview-stimulus { padding: var(--app-space-3); border-radius: var(--app-border-radius-sm); margin-bottom: calc(0.75rem * var(--app-density-scale)); } .theme-wizard-preview-button { border: 0; min-width: 120px; } .theme-wizard-feedback-row { display: flex; gap: var(--app-space-3); margin-top: calc(0.75rem * var(--app-density-scale)); font-weight: 700; } .theme-wizard-accuracy { height: var(--app-space-3-px); margin-top: calc(0.75rem * var(--app-density-scale)); border-radius: 999px; overflow: hidden; } .theme-wizard-accuracy-fill { height: 100%; } .theme-wizard-explain { margin-top: calc(0.75rem * var(--app-density-scale)); } .theme-wizard-diagnostics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--app-space-3); margin-top: calc(0.75rem * var(--app-density-scale)); } .theme-wizard-diagnostic-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(0.75rem * var(--app-density-scale)); padding: var(--app-space-1) 0; border-bottom: 1px solid color-mix(in srgb, var(--app-text-color) 10%, transparent); font-size: calc(var(--app-font-size-base) * 0.82); } .theme-wizard-diagnostic-row span { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 720px) { .theme-wizard-palette-slot { grid-template-columns: 44px minmax(0, 1fr); } .theme-wizard-palette-slot .theme-wizard-slot-label, .theme-wizard-palette-slot .theme-wizard-remove-color { grid-column: 1 / -1; } } /* Admin table wrapper - provides consistent card styling */ .admin-table-wrapper { background-color: var(--learning-card-surface-color); color: var(--app-text-color); border-radius: var(--app-border-radius-lg); padding: var(--app-space-0); margin-bottom: calc(1.25rem * var(--app-density-scale)); margin-top: calc(1.25rem * var(--app-density-scale)); box-shadow: var(--app-surface-shadow); overflow: hidden; /* Ensures border radius is respected */ } /* Shared table shell - supports consistent loading and initial-paint behavior */ .table-display-shell { position: relative; min-height: 120px; } .table-display-shell.is-before-paint { min-height: 320px; } .table-shell-content { transition: opacity 240ms ease, filter 240ms ease; } .table-display-shell.is-before-paint .table-shell-content { opacity: 0; pointer-events: none; } .table-display-shell.has-painted.is-loading .table-shell-content, .table-display-shell.has-painted.is-not-ready .table-shell-content { opacity: 0.78; filter: saturate(0.96); pointer-events: none; } .table-shell-placeholder { position: absolute; inset: 0; background: var(--app-loading-overlay-color); border-radius: var(--app-border-radius-sm); } .table-shell-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--app-space-3); background: color-mix(in srgb, var(--learning-card-surface-color) 72%, transparent); backdrop-filter: blur(1.5px); color: var(--app-secondary-text-color); font-size: calc(var(--app-font-size-base) * 0.9); text-align: center; z-index: 1; opacity: 0; visibility: hidden; transition: opacity 200ms ease; } .table-display-shell.show-loading-overlay .table-shell-loading { opacity: 1; visibility: visible; } /* Table responsive container */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ } .table-responsive table{ min-width: 700px; /* Ensure table has minimum width before scrolling */ margin-bottom: 0; /* Remove default Bootstrap margin */ } /* Table styling */ .table { --bs-table-color: var(--app-text-color); --bs-table-bg: var(--learning-card-surface-color); --bs-table-border-color: var(--border-color); --bs-table-striped-color: var(--app-text-color); --bs-table-striped-bg: var(--app-subtle-surface-color); --bs-table-active-color: var(--app-text-color); --bs-table-active-bg: var(--app-selected-surface-color); --bs-table-hover-color: var(--app-text-color); --bs-table-hover-bg: var(--app-hover-surface-color); width: 100%; border-collapse: collapse; table-layout: auto; /* Allow columns to grow with content */ color: var(--app-text-color); } /* Table cell base styling - applies to all cells */ .table th, .table td { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; color: var(--app-text-color); background-color: transparent; } /* Table header styling */ thead { background-color: var(--app-accent-color); font-weight: 800; border: 1px solid var(--app-accent-color); color: var(--app-primary-action-text-color); } thead th { padding: var(--app-space-3-px) clamp(var(--app-space-3-px), 2vw, var(--app-space-4-px)); text-align: left; border-bottom: 2px solid var(--app-accent-color); font-size: var(--app-font-size-base); font-weight: 700; vertical-align: middle; color: var(--app-primary-action-text-color); } /* First header cell gets left radius */ thead th:first-child { border-top-left-radius: var(--app-border-radius-sm); } /* Last header cell gets right radius */ thead th:last-child { border-top-right-radius: var(--app-border-radius-sm); } /* Table body styling */ tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color var(--app-transition-fast) ease-in-out; } tbody tr:hover { background-color: var(--app-hover-surface-color); color: var(--app-text-color); } tbody td, tbody th { padding: calc(10px * var(--app-density-scale)) clamp(var(--app-space-3-px), 2vw, var(--app-space-4-px)); vertical-align: top; } /* Striped rows */ .table-striped tbody tr:nth-of-type(odd) { background-color: var(--app-subtle-surface-color); color: var(--app-text-color); } .table-striped tbody tr:nth-of-type(odd):hover { background-color: var(--app-hover-surface-color); color: var(--app-text-color); } /* Bordered tables */ .table-bordered { border: 1px solid var(--border-color); } .table-bordered th, .table-bordered td { border: 1px solid var(--border-color); } /* Table footer styling */ tfoot { background-color: color-mix(in srgb, var(--app-text-color) 5%, var(--learning-card-surface-color)); color: var(--app-text-color); font-weight: 600; border-top: 2px solid var(--app-accent-color); } tfoot td, tfoot th { padding: var(--app-space-3-px) clamp(var(--app-space-3-px), 2vw, var(--app-space-4-px)); } /* Light table header variant */ .table-light { background-color: color-mix(in srgb, var(--app-text-color) 5%, var(--learning-card-surface-color)); color: var(--app-text-color); } /* ===== TABLE UTILITY CLASSES ===== */ /* Column width utilities - use these classes on or elements */ .table-col-icon { width: 10%; min-width: 60px; } .table-col-narrow { width: 15%; min-width: 80px; } .table-col-small { width: 20%; min-width: 120px; } .table-col-medium { width: 30%; min-width: 200px; /* Increased to accommodate multiple action buttons */ } .table-col-large { width: 40%; min-width: 200px; } .table-col-auto { width: auto; } /* Action column utility - prevents button wrapping */ .table-col-actions { white-space: nowrap; vertical-align: middle; } /* User Admin has many compact usage columns. Keep row data on one line, while allowing multi-line headers so labels do not set huge minimums. */ .user-admin-table { width: max-content; min-width: 100%; table-layout: auto; } .user-admin-table .table-col-medium { width: auto; min-width: 80px; } .user-admin-table .table-col-large { width: auto; min-width: 120px; } .user-admin-table thead th { white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.12; padding: var(--app-space-2-px); vertical-align: middle; } .user-admin-header-label { display: inline-block; max-width: 80px; white-space: normal; } .user-admin-table tbody td, .user-admin-table tbody th { white-space: nowrap; overflow-wrap: normal; word-break: normal; padding: var(--app-space-2-px); vertical-align: middle; } /* Data download table - allow wrapping and compact action buttons */ .data-download-table-wrapper { overflow-x: visible; } .data-download-table { table-layout: fixed; width: 100%; } .data-download-table .table-col-large, .data-download-table .table-col-medium { width: auto; min-width: 0; word-break: break-word; } .data-download-table .table-col-icon { width: 56px; min-width: 56px; max-width: 56px; } .data-download-table td { word-break: break-word; overflow: hidden; } .data-download-table thead th { white-space: nowrap; overflow: hidden; } .data-download-table .btn-icon { width: 32px; height: 32px; padding: var(--app-space-0); margin: 0; display: inline-flex; align-items: center; justify-content: center; } .data-download-table .btn-icon .fa { margin: 0; font-size: calc(var(--app-font-size-base) * 0.9); } /* Text alignment utilities (Bootstrap 4 compatibility - BS5 uses text-start/text-end) */ .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } /* ===== NAVIGATION ASSETS & FOOTER ===== */ .fa-bars{ color: var(--navigation-text-color); font-size: calc(var(--app-font-size-base) * 1.25); } .toggle-buttons{ gap: 0.5rem; align-items: center; } .toggle-buttons .dropdown-item{ padding: var(--app-space-2) calc(0.75rem * var(--app-density-scale)); margin: 0; } .toggle-buttons .fa{ font-size: calc(var(--app-font-size-base) * 1.25); } .footer{ color: var(--app-secondary-text-color); } .app-footer { display: flex; justify-content: center; margin-top: var(--app-space-5); padding-top: var(--app-space-3); padding-bottom: var(--app-space-3); padding-left: var(--app-space-3); padding-right: var(--app-space-3); font-size: calc(var(--app-font-size-base) * 0.875); line-height: 1.5; } .app-footer span { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--app-space-2); } .app-footer a { color: var(--app-text-color); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .app-footer a:hover, .app-footer a:focus-visible { color: var(--app-accent-color); } .home-app .app-footer, .tool-app .app-footer { flex: 0 0 auto; margin-top: 0; background: var(--app-background-color); } .public-document-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--app-background-color); color: var(--app-text-color); } .public-document-shell { width: min(100%, 860px); margin: 0 auto; padding: clamp(var(--app-space-4), 6vw, var(--app-space-6)) var(--app-space-4) var(--app-space-3); } .public-document-shell h1 { margin: 0 0 var(--app-space-1); font-size: calc(var(--app-font-size-base) * 2); line-height: 1.15; } .public-document-shell h2 { margin: var(--app-space-4) 0 var(--app-space-2); font-size: calc(var(--app-font-size-base) * 1.25); line-height: 1.25; } .public-document-shell p { margin: 0 0 var(--app-space-2); line-height: 1.65; } .public-document-updated { color: var(--app-secondary-text-color); font-size: calc(var(--app-font-size-base) * 0.875); } .navbar-brand-icon { display: inline-block; width: calc(30px * var(--app-density-scale)); height: calc(30px * var(--app-density-scale)); margin-right: calc(10px * var(--app-density-scale)); flex: 0 0 auto; vertical-align: middle; background-color: var(--navigation-text-color); -webkit-mask-image: var(--navbar-brand-icon-image); mask-image: var(--navbar-brand-icon-image); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* ===== OFFCANVAS MENU ===== */ .offcanvas { background-color: var(--app-secondary-surface-color); width: auto; max-width: 300px; min-width: 250px; } .offcanvas-title { font-size: clamp(calc(var(--app-font-size-base) * 1.25), 2.5vw, calc(var(--app-font-size-base) * 1.5)); font-weight: 700; } .offcanvas-body { padding: var(--app-space-3); } /* ===== DROPDOWNS ===== */ .dropdown-item { padding: calc(0.75rem * var(--app-density-scale)) var(--app-space-3); font-size: var(--app-font-size-base); border-radius: var(--app-border-radius-sm); } .dropdown-item:hover { background-color: var(--accent-background-color, var(--app-accent-color)); cursor: pointer; } .offcanvas-body .dropdown-item { margin-bottom: 0.5rem; white-space: nowrap; } /* ===== HEADER BOX ===== */ .header-box{ width: 100%; margin: 0; padding: var(--app-space-0); border-radius: var(--border-radius-none); font-size: clamp(calc(var(--app-font-size-base) * 1.25), 3vw, calc(var(--app-font-size-base) * 1.75)); font-weight: bold; text-align: center; } /* ===== CARD TRIAL LAYOUT ===== */ .img-responsive{ max-width: 100%; height: auto; } .questionContainer{ height: auto; min-height: 20rem; border-radius: var(--app-border-radius-sm); padding: calc(10px * var(--app-density-scale)); background: var(--app-background-color); border: 1px solid var(--surface-emphasis-color, var(--app-accent-color)); box-shadow: 0 0 10px var(--surface-emphasis-color, var(--app-accent-color)); margin-top: 2rem; } /* Blaze card stimulus image (NOT for Svelte cards - they handle their own sizing) */ #questionImage.stimulus-image, #displayContainer .stimulus-image { display: block; margin: 0 auto; width: min(100%, calc(100vw - 1.75rem)); max-width: min(100%, 1040px); max-height: min(calc(100svh - 300px), 600px); /* Desktop: svh is fine */ min-height: clamp(160px, 32svh, 420px); height: auto; object-fit: contain; contain: layout style paint; /* Desktop performance - removed on mobile */ } #displayContainer { display: flex; justify-content: flex-start; align-items: center; margin: 0; padding: var(--app-space-0); border: none; } #displaySubContainer { transition: opacity var(--app-transition-fast) ease-in-out; contain: layout style paint; /* Desktop performance - removed on mobile */ } /* Stimuli/input split layout */ .card-main-row { row-gap: 1.5rem; column-gap: 1.25rem; } .card-layout--split { display: flex; flex-wrap: wrap; align-items: flex-start; } .card-layout--split .card-layout__stimulus, .card-layout--split .card-layout__response { flex: 1 1 50%; max-width: 50%; margin-left: 0; margin-right: 0; } @media (max-width: 991.98px) { .card-layout--split .card-layout__stimulus, .card-layout--split .card-layout__response { flex-basis: 100%; max-width: 100%; } } .card-layout__stimulus, .card-layout__response { display: flex; flex-direction: column; } .card-layout__response, .response-column { gap: 1rem; align-items: center; } .response-column > * { width: 100%; } .card-layout--split .response-column .c-card-choices { width: 100%; align-self: center; } /* Shared content box styling for stimulus and answer containers */ .content-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; margin: 0.875rem; padding: var(--app-space-3); text-align: center; border-radius: var(--app-border-radius-lg); border: none; } .dynamic-stimuli-box { background-color: var(--stimuli-box-bg-color, var(--learning-card-stimulus-surface-color)); contain: layout style paint; /* Desktop performance - removed on mobile */ } .dynamic-stimuli-box.alert, .dynamic-stimuli-box.alert-transparent { background-color: var(--learning-card-stimulus-surface-color); border: none; } .stimuli-box-hidden { opacity: 0; pointer-events: none; height: 0; margin: 0; padding: var(--app-space-0); border: 0; transition: opacity var(--app-transition-fast) ease-in-out, height var(--app-transition-fast) ease-in-out; } .scrollHistoryContainer { display: flex; flex-direction: column; gap: var(--card-element-gap); } .card-stack { display: flex; flex-direction: column; gap: var(--card-stack-gap); padding: var(--card-outer-padding); width: 100%; box-sizing: border-box; overflow-x: hidden; } .card-stack--flush { padding: var(--app-space-0); } .card-stack--compact { gap: var(--card-stack-gap-small); } .card-stack-section { width: 100%; display: flex; flex-direction: column; margin-top: var(--card-section-gap); } .card-stack-section:first-of-type { margin-top: 0; } .card-stack-section--video { align-items: stretch; } .card-stack-section--warning, .card-stack-section--profile-toggles, .card-stack-section--debug { width: 100%; } .card-feedback-area { margin-top: var(--card-feedback-gap); /* Removed fixed min-height reservation - let content size naturally */ } .card-element-spacing { margin-top: var(--card-element-gap); } .card-stats-bar { display: inline-flex; align-items: center; gap: clamp(var(--app-space-2), 1vw, calc(0.75rem * var(--app-density-scale))); padding: var(--app-space-0) clamp(var(--app-space-2), 2vw, calc(0.75rem * var(--app-density-scale))); height: var(--app-space-5-px); line-height: var(--app-button-line-height); border-radius: var(--border-radius-pill); border: none; background-color: var(--navigation-surface-color); font-size: calc(var(--app-font-size-base) * 0.8); font-weight: var(--app-font-weight-semibold); color: var(--app-text-color); margin: 0 auto calc(0.75rem * var(--app-density-scale)); width: fit-content; min-width: 220px; } .card-stats-bar__item { display: inline-flex; align-items: center; gap: var(--app-space-1); font-variant-numeric: tabular-nums; white-space: nowrap; } .card-stats-bar__label { font-size: calc(var(--app-font-size-base) * 0.7); letter-spacing: var(--app-label-letter-spacing); text-transform: var(--app-label-text-transform); color: var(--app-secondary-text-color); } .card-stats-bar__value { font-size: calc(var(--app-font-size-base) * 0.82); font-weight: var(--app-font-weight-bold); } .card-stats-bar__unit { font-weight: var(--app-font-weight-medium); font-size: calc(var(--app-font-size-base) * 0.7); color: var(--app-secondary-text-color); } .card-stats-bar__divider { display: inline-block; width: 1px; height: var(--app-space-4-px); background: var(--learning-card-performance-divider-color); } .card-stats-bar-wrapper { display: flex; justify-content: center; margin-top: calc(0.375rem * var(--app-density-scale)); margin-bottom: calc(0.625rem * var(--app-density-scale)); border: none; padding: var(--app-space-0); } #userInteractionContainer { padding: calc(6px * var(--app-density-scale)) var(--app-space-0); min-height: 2rem; border: none; margin: 0; } .video-button-bar { padding: calc(1.25rem * var(--app-density-scale)); } .voice-icon { height: 30px; width: auto; } .sr-status-container { display: flex; align-items: center; justify-content: center; gap: var(--app-space-2); margin-bottom: var(--app-space-2); min-height: calc(38px * var(--app-density-scale)); } .sr-status-container .fa-microphone { font-size: calc(var(--app-font-size-base) * 1.875); } .sr-status-container span { font-size: var(--app-font-size-base); } .sr-mic-icon.sr-mic-recording { color: var(--feedback-correct-color); } .sr-mic-icon.sr-mic-waiting { color: var(--feedback-error-color); } .icon-configured { color: var(--feedback-correct-color); } .icon-needs-config { color: var(--learning-card-audio-icon-disabled-color); } .no-bottom-margin { margin-bottom: 0; } .lower-interaction-spacing { margin-bottom: calc(1.75rem * var(--app-density-scale)); } .small-text { font-size: calc(var(--app-font-size-base) * 0.8125); } .overlearning-text { color: var(--app-text-color); opacity: 0.6; } .overlearning-button { width: auto; } .input-box { box-sizing: border-box; padding-bottom: max(env(keyboard-inset-height, 0px), var(--app-space-3)); border: none; margin: 0; padding-left: var(--app-space-0); padding-right: var(--app-space-0); padding-top: var(--app-space-0); } .input-box.input-pending { opacity: 0; pointer-events: none; border: none; margin: 0; padding: var(--app-space-0); } .input-box.trial-input-hidden { opacity: 0; max-height: 0; overflow: hidden; pointer-events: none; margin: 0; padding: var(--app-space-0); border: none; } /* Hide input field during feedback display without destroying template (prevents double-paint) */ .input-field-hidden { display: none; } .feedback-input-hidden { opacity: 0; pointer-events: none; height: 0; overflow: hidden; margin: 0; padding: var(--app-space-0); border: none; transition: opacity var(--app-transition-fast) ease-in-out, height var(--app-transition-fast) ease-in-out; } #trialContentWrapper { opacity: 1; transition: opacity var(--app-transition-smooth) ease-in-out; will-change: opacity; /* Removed contain: layout style - was blocking scrollIntoView() on mobile */ /* Removed fixed 100vh constraint - let content size naturally */ min-height: auto; max-height: none; overflow-y: visible; overflow-x: hidden; position: relative; margin: 0; padding: var(--app-space-0); } #trialContentWrapper.trial-hidden { opacity: 0; pointer-events: none; } #textEntryRow { transition: opacity var(--app-transition-fast) ease-in-out; border: none; margin: 0; padding: var(--app-space-0); } .smooth-transition { transition: opacity var(--app-transition-fast) ease-in-out, transform var(--app-transition-fast) ease-in-out; will-change: opacity; } .feedback-slot { opacity: 0; pointer-events: none; min-height: 1.5rem; border: none; margin: 0; padding: var(--app-space-0); } .feedback-slot--visible { opacity: 1; pointer-events: auto; } #postCardContainer { min-height: 1em; border: none; margin: 0; padding: var(--app-space-0); } #progressBarContainer { background-color: transparent; border: none; margin: 0; padding: var(--app-space-0); } #multipleChoiceContainer { border: none; margin: 0; padding: var(--app-space-0); } #userLowerInteractionContainer { border: none; margin: 0; padding: var(--app-space-0); } .vh-50 { height: 50dvh; } .vh-5 { height: 5dvh; } .width-100-percent { width: 100%; } .width-80-percent { width: 80%; margin-left: 10%; margin-right: 10%; } .align-center { text-align: center; margin-left: auto; margin-right: auto; } @media screen and (max-width: 768px) { #trialContentWrapper .fa { min-width: 44px; min-height: var(--app-button-height); display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--app-font-size-base) * 1.25); } } @media (prefers-reduced-motion: reduce) { #trialContentWrapper, .smooth-transition, .fade-in, .fade-out, #displayContainer, #displaySubContainer, .input-box, #progressbar, .c-card-choices { transition: none; animation-duration: 0s; animation-iteration-count: 1; scroll-behavior: auto; } } /* ===== ANIMATIONS ===== */ /* Height transitions for expanding/collapsing elements */ .height-transition { transition: max-height var(--app-transition-fast) ease-in-out, opacity var(--app-transition-fast) ease-in-out; overflow: hidden; } /* Prevent layout shift by reserving space */ .min-height-preserve { min-height: 2em; } /* Progress bar smooth width changes */ #progressbar { transition: width var(--app-transition-fast) linear; } /* Countdown timer smooth updates */ #CountdownTimerText { transition: opacity var(--app-transition-fast) ease-in-out; } /* Skeleton loader for initial render - theme-aware gradient */ .skeleton-loader { background: linear-gradient( 90deg, color-mix(in srgb, var(--app-background-color) 95%, var(--app-text-color) 5%) 25%, color-mix(in srgb, var(--app-background-color) 90%, var(--app-text-color) 10%) 50%, color-mix(in srgb, var(--app-background-color) 95%, var(--app-text-color) 5%) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: var(--app-border-radius-sm); } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Animation keyframes */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ===== MEDIA QUERIES ===== */ /* Mobile - full width offcanvas */ @media screen and (max-width: 576px) { .offcanvas { max-width: 80vw; } } /* Alert audio - base styles */ .alert-audio-100 { color: var(--feedback-error-color); background-color: var(--accent-background-color, var(--app-accent-color)); padding: calc(20px * var(--app-density-scale)); margin-top: 20px; } /* Desktop Screens */ @media screen and (min-width: 1024px) { .fixed-btm{ position: absolute; bottom: 5dvh; width: 75vw; max-width: 500px; } .input-box{ position: static; } .input-box input{ width: 50% !important; margin: 0px; } } /* Tablet & Mobile Screens */ @media screen and (max-width: 1024px) { .fixed-btm{ position: absolute; bottom: 5dvh; width: 90vw; max-width: 500px; } .modal-expanded{ height: 80dvh !important; top: 20% !important; } .modal-dialog{ height: 50dvh; position: fixed; top: 50%; width: 90vw; margin-left: 5vw; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .null-alert { /* remove width and height constraints */ width: auto !important; height: auto !important; } .alert-icon{ margin-left:5vw; } .table-responsive table{ min-width: 90vw; } .input-box{ position: relative; /* Normal document flow - appears after stimulus/SR icon */ width: 100%; margin-top: 1rem; /* Space between stimulus and input */ padding: var(--app-space-0) var(--app-space-3); /* Left/right padding for narrow screens */ } .input-box input{ width: 100%; margin: 0px; } } /* Tablet - narrower negative margins */ @media screen and (min-width: 768px) and (max-width: 1024px) { .alert-audio-100 { margin-left: -6vw; margin-right: -6vw; } } /* Mobile - wider negative margins */ @media screen and (max-width: 767px) { .alert-audio-100 { margin-left: -8vw; margin-right: -8vw; } } /* Mobile Optimizations & Touch Targets */ @media screen and (max-width: 768px) { /* Mobile spacing overrides - tighter spacing to reduce scrolling */ :root { --card-stack-gap: clamp(0.5rem, 1.5vh, 0.875rem); /* 8-14px */ --card-stack-gap-small: clamp(0.25rem, 0.75vh, 0.5rem); /* 4-8px */ --card-outer-padding: clamp(0.5rem, 2vw, 0.75rem); /* tighter to avoid horizontal scroll */ --card-section-gap: clamp(0.75rem, 2vh, 1.25rem); /* 12-20px */ --card-feedback-gap: clamp(0.35rem, 1vh, 0.6rem); /* 6-10px */ --card-element-gap: clamp(0.25rem, 0.8vh, 0.45rem); /* 4-7px */ --card-feedback-reserved-height: 140px; } /* Larger touch targets for mobile - iOS recommends 44x44px minimum */ .btn, button, input[type="file"] { min-height: var(--app-button-height); font-size: var(--app-font-size-base); line-height: var(--app-button-line-height); padding: calc(3px * var(--app-density-scale)) calc(0.75rem * var(--app-density-scale)); } input[type="text"], input[type="password"] { height: var(--app-text-input-height); min-height: var(--app-text-input-height); font-size: var(--app-font-size-base); line-height: calc(var(--app-text-input-height) - 2px); padding: var(--app-space-0) calc(0.75rem * var(--app-density-scale)); } button, .btn, a, input, select, textarea { touch-action: manipulation; } img { touch-action: pinch-zoom; } /* Blaze card stimulus image touch action */ #questionImage.stimulus-image, #displayContainer .stimulus-image { touch-action: pinch-zoom; } a.content-link { min-width: 44px; min-height: var(--app-button-height); display: inline-flex; align-items: center; justify-content: center; } .content-box { margin: 0.5rem 0; padding: calc(0.75rem * var(--app-density-scale)); } /* Blaze card stimulus image sizing (NOT for Svelte cards) */ #questionImage.stimulus-image, #displayContainer .stimulus-image { width: min(100%, calc(100vw - 1rem)); max-height: calc(100dvh - 250px); /* Reserve space for navbar + input + keyboard margins */ min-height: 50px; contain: none; } #displaySubContainer, .dynamic-stimuli-box { contain: none; /* Remove containment so children can resize with keyboard */ } .alert { margin-left: 0.5rem; margin-right: 0.5rem; padding: calc(0.875rem * var(--app-density-scale)); } .lower-interaction-spacing { margin-bottom: 0.5rem; } #stepBackButton, #removeQuestion, .instructModalDismiss, .btn-close { min-width: 44px; min-height: var(--app-button-height); display: inline-flex; align-items: center; justify-content: center; padding: var(--app-space-2); } /* Font Awesome icons inside buttons */ button .fa, a .fa { font-size: calc(var(--app-font-size-base) * 1.25); /* Ensure icon is visible */ } /* All text buttons */ .btn, button, a.content-link { min-height: var(--app-button-height); padding: calc(3px * var(--app-density-scale)) calc(0.75rem * var(--app-density-scale)); } /* Multiple choice buttons */ .multipleChoiceButton { min-height: var(--app-button-height); padding: var(--app-space-3); } } /* ===== CSS CONTAINMENT ===== */ /* Grouped by containment type for maintainability */ /* Layout only - allows text overflow */ .scrollHistoryContainer, #postCardContainer, #CountdownTimerText, #progressbar { contain: layout; } /* Layout + style - standard containment */ /* NOTE: .card-stack-section and .input-box removed - were blocking scrollIntoView() on mobile */ #multipleChoiceContainer, #userInteractionContainer, #feedbackOverrideContainer, #correctAnswerDisplayContainer, #userLowerInteractionContainer, .card-stack-section--video, .removalContainer, #continueBar { contain: layout style; } #continueBar { margin-bottom: 2rem; } /* Layout + style + paint - full containment (mobile overrides remove for keyboard resize) */ #displaySubContainer, #videoUnitContainer, .questionContainer { contain: layout style paint; } #correctAnswerDisplayContainer { background-color: var(--app-secondary-surface-color); color: var(--app-secondary-text-color); transition: opacity var(--app-transition-fast) ease-in-out; } .correct-answer-hidden { opacity: 0; visibility: hidden; pointer-events: none; margin: 0; padding: var(--app-space-0); border: none; } /* Study trial answer display - uses secondary color */ .study-answer-container { background-color: var(--app-secondary-surface-color); color: var(--app-secondary-text-color); } /* Trial content visibility - avoids DOM teardown/rebuild */ /* JavaScript in card.js reads this CSS variable dynamically to sync timing */ /* Using smooth transitions (200ms) for FADING_IN/FADING_OUT states */ .spinner-border, .fa-spinner { color: var(--app-text-color) !important; } /* Profile page role separators - labeled horizontal dividers */ .profile-separator { margin: 1.5rem 0; border: 0; border-top: 2px solid var(--app-text-color); opacity: 0.3; position: relative; overflow: visible; } .profile-separator[data-label]::after { content: attr(data-label); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--app-background-color); padding: var(--app-space-0) var(--app-space-3); color: var(--app-text-color); font-weight: 600; font-size: calc(var(--app-font-size-base) * 0.9); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; } /* ===== JSON EDITOR MODALS ===== */ /* Fix alignment and spacing for Edit Properties dropdown in TDF/Content editors */ .je-modal { padding: var(--app-space-2); } /* Property checkbox rows - Bootstrap form-check structure */ .je-modal .form-group { margin-bottom: 0 !important; padding: var(--app-space-0) !important; } .je-modal .form-check { display: flex; align-items: center; gap: 0.375rem; min-height: auto; padding-left: var(--app-space-0); margin-bottom: 0; } .je-modal .form-check-input { margin: 0; margin-top: 0; float: none; flex-shrink: 0; } .je-modal .form-check-label { margin: 0; padding: var(--app-space-0); line-height: 1.2; } /* Add property input row styling */ .je-modal input[type="text"] { padding: var(--app-space-1) var(--app-space-2); margin: 0; font-size: calc(var(--app-font-size-base) * 0.875); } .je-modal .btn { padding: var(--app-space-1) var(--app-space-2); min-height: auto; font-size: calc(var(--app-font-size-base) * 0.875); } /* ===== SVELTE CARD CONTAINER ===== */ /* When svelte card is present, use flex layout to fill remaining space after app chrome */ body:has(.svelte-card-container) { display: flex; flex-direction: column; height: 100vh; /* Fallback for older browsers */ height: 100dvh; /* Modern browsers use dynamic viewport height */ overflow: hidden; background-color: var(--app-background-color); } /* Container for Svelte CardScreen - fills remaining viewport after app chrome */ .svelte-card-container { display: flex; flex-direction: column; width: 100%; flex: 1; /* Fill remaining space after navbar */ min-height: 0; /* Allow shrinking in flex context */ height: 100%; overflow: hidden; position: relative; background-color: var(--app-background-color); }