/* ========================================================================== A) THEME & RESET - Define tokens (light/dark) - Minimal reset & base typography ========================================================================== */ /* === THEME TOKENS === */ :root { --surface-0: #ffffff; --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #fff8f2; --surface-4: #e2e8f0; --surface-5: #cbd5e1; --text-muted: #64748b; --text-on-dark: #f8fafc; --fs-2xs: 0.82rem; --fs-xs: 0.9rem; --fs-sm: 1rem; --fs-md: 1.08rem; --fs-lg: 1.25rem; --fs-xl: 1.65rem; --fs-2xl: 2.25rem; --bg: var(--surface-0); /* page background */ --text: #2F2A25; /* primary text */ --card: var(--surface-1); /* card/panel surfaces */ --panel: var(--surface-2); /* side panels, lists */ --muted: var(--text-muted); /* subtle text */ --border: var(--surface-4); /* dividers */ --border-strong: var(--surface-5); --input-bg: var(--surface-1); --input-bg-alt: var(--surface-2); --disabled-bg: var(--surface-3); --disabled-border: var(--surface-4); --disabled-text: var(--text-muted); --neutral-400: color-mix(in oklab, var(--muted) 65%, var(--border) 35%); --accent: #D01C1F; --accent-secondary: #FFB56B; --accent-secondary-soft: #FFF3E8; --accent-contrast: #FFFFFF; --accent-readable: #A91518; --accent-soft-contrast: #A91518; --accent-soft: #FCEDED; /* brand accent (links/buttons) */ --program-outline: color-mix(in oklab, var(--accent) 70%, var(--surface-0) 30%); --program-outline-glow: color-mix(in oklab, var(--accent) 35%, transparent); --shadow: rgba(0, 0, 0, 0.1); --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.12); --shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.08); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --target-size: 48px; --focus-ring: 0 0 0 4px rgba(15, 23, 42, 0.28); --page-title-size: var(--fs-xl); --settings-section-title-size: var(--fs-lg); --page-header-padding: 18px; --page-top-padding: 0px; --page-header-height: clamp(46px, 6vh, 56px); --page-header-pad-y: 0px; --page-header-gap: clamp(0.75rem, 1.4vw, 1.2rem); --page-header-content-gap: clamp(10px, 1.6vw, 18px); --profile-panel-margin: clamp(10px, 1.6vw, 20px); --progress-bar-height: 10px; } /* === DARK THEME OVERRIDES (scoped to .theme-dark on ) === */ body.theme-dark { --surface-0: #2f3135; --surface-1: #3a3f46; --surface-2: #424850; --surface-3: #4f5660; --surface-4: #5f6773; --surface-5: #727b88; --text-muted: #cfd6de; --text-on-dark: #f8fafc; --bg: var(--surface-0); --text: #f1f1f1; --card: var(--surface-1); --panel: var(--surface-2); --muted: var(--text-muted); --border: var(--surface-4); --border-strong: var(--surface-5); --input-bg: var(--surface-1); --input-bg-alt: var(--surface-2); --disabled-bg: var(--surface-3); --disabled-border: var(--surface-4); --disabled-text: var(--text-muted); --neutral-400: color-mix(in oklab, var(--muted) 60%, var(--border) 40%); --accent: #D01C1F; --accent-secondary: #FFB56B; --accent-secondary-soft: #FFF3E8; --accent-contrast: #FFFFFF; --accent-readable: #A91518; --accent-soft-contrast: #FFE1D6; --accent-soft: #5A1718; --program-outline: color-mix(in oklab, #D01C1F 70%, #ffffff 30%); --program-outline-glow: color-mix(in oklab, #D01C1F 40%, transparent); --shadow: rgba(0, 0, 0, 0.35); --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.35); --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.32); --focus-ring: 0 0 0 4px rgba(15, 23, 42, 0.34); } /* === MINIMAL RESET === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* === BASE TYPOGRAPHY (no layout rules here) === */ html, body { height: 100%; } body { font-family: 'Montserrat', Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; font-size: var(--fs-md); } /* ========================================================================== B) APP SHELL & LAYOUT - Overall container and primary regions ========================================================================== */ .container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; } /* Main area */ .main-content { position: relative; width: 100%; height: 100%; min-height: 100vh; min-height: 100svh; min-height: 100dvh; max-width: 100vw; box-sizing: border-box; overflow: hidden; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: transform 0.3s ease; padding-top: 0; /* avoids overlap with fixed UI */ padding-bottom: 0; } /* Page loader for slow navigations */ .page-loader { --loader-track: color-mix(in oklab, var(--text) 25%, #ffffff 75%); --loader-accent: var(--accent); --loader-size: 96px; --loader-border: 7px; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 9999; } html.page-loader-active body, body.page-loader-active { overflow: hidden; } html.page-loader-active body > :not(.page-loader), body.page-loader-active > :not(.page-loader) { visibility: hidden; } .page-loader.is-visible { opacity: 1; pointer-events: auto; } .page-loader .loader { width: var(--loader-size); height: var(--loader-size); border-radius: 50%; position: relative; animation: pageLoaderRotate 1s linear infinite; } .page-loader .loader::before, .page-loader .loader::after { content: ""; box-sizing: border-box; position: absolute; inset: 0; border-radius: 50%; border: var(--loader-border) solid var(--loader-track); animation: pageLoaderClip 2s linear infinite; } .page-loader .loader::after { transform: rotate3d(90, 90, 0, 180deg); border-color: var(--loader-accent); } @keyframes pageLoaderRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pageLoaderClip { 0% { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); } 50% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); } 75%, 100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); } } /* When the fixed instruction panel is open */ .main-content.instructions-active { transform: none; } /* When settings/sidebar shifts content */ .main-content.shifted { transform: translateX(-21vw); } /* Main action buttons (settings + instructions) */ .main-actions { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 1vh auto; flex-wrap: wrap; } .author-text { font-size: var(--fs-xs); } .profile-status-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.5rem; margin: 0.5rem auto 0; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; font-size: var(--fs-lg); cursor: pointer; box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1)); transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .profile-status-btn.has-profile { outline: 3px solid var(--profile-color, #FFB56B); outline-offset: 2px; } .profile-status-btn:hover { transform: translateY(-1px); border-color: var(--accent); } .profile-status-btn.has-profile:hover { border-color: var(--profile-color, #FFB56B); } .profile-status-btn.is-disabled, .profile-status-btn.is-disabled:hover { opacity: 0.7; cursor: default; pointer-events: none; transform: none; border-color: var(--border); } .profile-status-icon { width: 26px; height: 26px; object-fit: contain; pointer-events: none; } .profile-status-color { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); background: transparent; display: none; } .profile-status-btn.has-profile .profile-status-color { display: inline-block; } /* ========================================================================== HOME + TRAINING PAGES (big tiles) ========================================================================== */ .home-page, .training-page, .screening-page { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(1rem, 2.4vw, 2rem); padding: 18px; overflow-y: auto; z-index: 2; } .home-page { justify-content: center; padding: var(--page-top-padding) var(--page-header-padding); } .home-page.is-hidden, .training-page.is-hidden, .screening-page.is-hidden { display: none; } .home-header { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(0.5rem, 1.2vw, 1rem); flex-wrap: wrap; } .home-header .logo { order: 2; margin: 0; } .home-header .home-title { order: 1; } .home-title { font-size: var(--fs-2xl); letter-spacing: 0.02em; line-height: 1.1; } .home-grid, .training-programs-grid { width: min(1100px, 100%); display: grid; gap: clamp(0.8rem, 1.6vw, 1.3rem); } .home-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .home-grid.home-grid--has-profile { grid-template-columns: repeat(3, minmax(180px, 1fr)); } @media (max-width: 570px) { .home-grid, .home-grid.home-grid--has-profile { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } @media (max-width: 380px) { .home-grid, .home-grid.home-grid--has-profile { grid-template-columns: 1fr; } } .home-grid.home-grid--no-profile { grid-template-columns: repeat(4, minmax(180px, 1fr)); } .training-programs-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); } @media (max-width: 1100px) { .home-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); } .home-grid.home-grid--has-profile { grid-template-columns: repeat(3, minmax(170px, 1fr)); } .home-grid.home-grid--no-profile { grid-template-columns: repeat(4, minmax(170px, 1fr)); } .training-programs-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); } } @media (max-width: 860px) { .home-grid, .training-programs-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); } } @media (max-width: 540px) { .home-grid, .training-programs-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) and (orientation: portrait) { .home-page { justify-content: flex-start; padding-top: calc(var(--page-header-padding) + env(safe-area-inset-top)); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); } } @media (max-height: 820px) and (orientation: landscape) { .home-page { justify-content: flex-start; padding-top: calc(var(--page-header-padding) + env(safe-area-inset-top)); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); } } @media (max-width: 820px) { .main-content { justify-content: flex-start; } .home-page { justify-content: flex-start; padding-top: calc(var(--page-header-padding) + env(safe-area-inset-top)); } } .home-toggle-row { width: min(1100px, 100%); display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .home-tile { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: clamp(1.1rem, 2vw, 1.5rem); min-height: 150px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); color: var(--text); text-align: center; cursor: pointer; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .home-tile--compact { flex-direction: row; min-height: auto; padding: 0.6rem 1.4rem; border-radius: 999px; gap: 0.5rem; width: auto; } .home-tile--compact .home-icon { width: 22px; height: 22px; } .home-tile--compact .home-label { font-size: var(--fs-sm); } .home-tile:active { transform: none; } .home-tile:focus-visible { outline: none; } .home-tile:focus:not(:focus-visible) { outline: none; } @media (hover: hover) and (pointer: fine) { .home-tile:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); } } .home-icon { width: clamp(36px, 4vw, 46px); height: clamp(36px, 4vw, 46px); object-fit: contain; pointer-events: none; } .home-label { font-weight: 700; font-size: var(--fs-md); } .home-sub { font-size: var(--fs-sm); color: var(--muted); } .home-tile--primary { background: var(--card); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 28%, var(--border)); } .home-tile--primary .home-label, .home-tile--primary .home-sub { color: var(--accent); } .home-tile--primary:hover { filter: brightness(1.04); } .home-tile--danger { background: #fff5f5; border-color: rgba(229, 72, 77, 0.35); color: #a72f36; } .home-tile--danger .home-label { color: #a72f36; } .home-tile--danger:hover { background: #ffe9ea; border-color: #e5484d; } body.theme-dark .home-tile { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); } body.theme-dark .home-tile--danger { background: rgba(229, 72, 77, 0.18); border-color: rgba(229, 72, 77, 0.5); color: #ffd2d4; } body.theme-dark .home-tile--danger .home-label { color: #ffd2d4; } .home-footer { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; color: var(--muted); } .home-page .profile-status-btn { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: 20px; border: 1px solid var(--border); background: var(--card); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); font-size: inherit; } .home-page .profile-status-text { font-size: var(--fs-sm); color: var(--muted); } .home-page .profile-status-color { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--card); display: none; } .home-page .profile-status-btn.has-profile .profile-status-color { display: inline-block; } .home-page .profile-status-btn:hover { transform: translateY(-3px); } .training-page { background: var(--bg); } .screening-page { background: var(--bg); } .training-page, .screening-page { --page-top-padding: var(--page-header-padding, 18px); } .training-page { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; justify-content: center; justify-items: stretch; align-items: stretch; padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); } .screening-page { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; justify-content: center; justify-items: stretch; align-items: stretch; padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); } .training-header.page-header { padding: var(--page-header-pad-y) var(--page-header-padding); width: 100%; } .page-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--page-header-gap); padding: var(--page-header-pad-y) var(--page-header-padding); min-height: var(--page-header-height); } .page-header .page-back { justify-self: start; } .page-header .page-title { justify-self: center; text-align: center; font-size: var(--page-title-size); font-weight: 800; } .page-header .page-spacer { justify-self: end; } .instructions-back-button, .programs-back-button { text-decoration: none; } .training-header { width: 100%; max-width: none; margin: 0; align-self: start; justify-self: stretch; } #trainingBackBtn { justify-self: start; } .training-title { font-weight: 800; font-size: var(--page-title-size); color: var(--text); text-align: center; justify-self: center; } .training-body { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; margin: 0; align-self: stretch; } .training-layout { width: 100%; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; } .training-layout.no-programs { grid-template-columns: 1fr; } .training-deck { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: clamp(1rem, 2vw, 1.6rem); overflow: auto; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; } .training-deck #modeButtonBar { flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .training-deck .training-modes { width: 100%; grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); justify-content: center; align-items: start; } .training-programs-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: clamp(0.9rem, 1.6vw, 1.3rem); display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .training-programs-panel.is-hidden { display: none; } .screening-body { width: 100%; max-width: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; flex: 1; min-height: 0; } .screening-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(1rem, 2vw, 1.6rem); flex: 1; min-height: 0; } .screening-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 14px; overflow: auto; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } @media (max-width: 980px) { .screening-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .screening-grid { grid-template-columns: 1fr; grid-auto-flow: row; } } .screening-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: clamp(1.2rem, 2.2vw, 1.8rem); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); text-align: left; } .screening-grid .screening-card { background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); padding: clamp(1rem, 2vw, 1.6rem); overflow: visible; } .screening-grid > .screening-card { min-width: 0; max-width: 100%; width: 100%; justify-self: stretch; } #screeningSetup.is-hidden + .screening-actions, #screeningSummary.is-hidden + .screening-actions { display: none; } .screening-section-title { font-size: var(--fs-md); font-weight: 800; margin-bottom: 0.6rem; } .screening-note { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 0.2rem; } .screening-mode-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin-top: 0.6rem; } .screening-toggle-block { margin-top: 0.6rem; margin-bottom: 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .screening-toggle-label { font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; } .screening-toggle-badge { width: 18px; height: 18px; object-fit: contain; } .screening-toggle { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; } .screening-toggle-btn { padding: 0.45rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .screening-toggle-btn.is-selected { background: var(--accent); color: var(--accent-contrast, #fff); border-color: transparent; } .screening-mode-btn { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 0.85rem; padding: 0.65rem 1rem; min-height: clamp(64px, 7vw, 86px); border-radius: 12px; border: 1px solid color-mix(in oklab, var(--border) 65%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 35%, transparent); background: transparent; color: var(--text); text-align: left; cursor: pointer; position: relative; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .screening-mode-badges { display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; } .screening-mode-badge { width: 20px; height: 20px; object-fit: contain; } .screening-mode-btn.is-screened::after { content: "\2713"; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 26px; height: 26px; border-radius: 999px; background: #e7f6ee; border: 2px solid #22c55e; color: #15803d; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 800; } .screening-mode-btn.is-selected.is-screened::after { background: var(--text-on-dark); } .screening-mode-btn .mode-icon { width: clamp(32px, 3vw, 46px); height: clamp(32px, 3vw, 46px); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .screening-mode-btn .mode-icon-img { width: 100%; height: 100%; object-fit: contain; } .screening-mode-btn:hover { border-color: color-mix(in oklab, var(--accent) 25%, var(--border)); background: color-mix(in oklab, var(--card) 90%, var(--accent) 10%); } .screening-mode-btn.is-selected { background: var(--accent); border-color: color-mix(in oklab, var(--accent) 65%, #000000 35%); color: var(--text-on-dark); } .screening-mode-btn.is-selected .mode-dot--blue { background: var(--text-on-dark); } .screening-mode-btn.is-selected .mode-dot--empty { border-color: var(--text-on-dark); } .screening-mode-btn.is-selected .screening-mode-meta { color: color-mix(in oklab, var(--text-on-dark) 80%, var(--accent) 20%); } .screening-mode-btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 2px; } .screening-mode-name { font-weight: 700; font-size: var(--fs-lg); line-height: 1.1; } .screening-mode-meta { color: var(--muted); font-size: var(--fs-sm); } .screening-total-estimate { font-size: var(--fs-xl); font-weight: 800; margin: 0.4rem 0 0.8rem; } .screening-mode-breakdown { display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--fs-sm); } .screening-breakdown-row { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px dashed var(--border); padding-bottom: 0.35rem; } .screening-breakdown-row:last-child { border-bottom: none; } .screening-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; } #screeningStartBtn { --btn-h: clamp(50px, 6vh, 62px); padding: 0 2.4rem; font-size: var(--fs-lg); font-weight: 700; } #screeningSaveBtn { --btn-h: clamp(50px, 6vh, 62px); padding: 0 2.4rem; font-size: var(--fs-lg); font-weight: 700; } .screening-feedback { color: var(--muted); text-align: center; margin-top: 0; margin-bottom: 0.2rem; } .screening-feedback:empty { display: none; margin: 0; } .screening-summary-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.8rem; } .screening-summary { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .screening-summary-card { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .screening-summary-card .screening-summary-list { flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; } .screening-summary-card .screening-actions { margin-top: auto; padding-top: var(--page-actions-pad, 1rem); padding-bottom: var(--page-actions-pad, 1rem); } .screening-panel.is-hidden, .screening-summary.is-hidden { display: none; } .screening-summary-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.7rem; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); } .screening-summary-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: color-mix(in oklab, var(--accent) 15%, var(--card)); font-weight: 700; font-size: var(--fs-sm); } .screening-summary-pill.preset-easy, .screening-preset-btn.preset-easy { background: #22c55e; color: var(--text-on-dark); border-color: transparent; } .screening-summary-pill.preset-medium, .screening-preset-btn.preset-medium { background: #f59e0b; color: var(--text-on-dark); border-color: transparent; } .screening-summary-pill.preset-hard, .screening-preset-btn.preset-hard { background: #ef4444; color: var(--text-on-dark); border-color: transparent; } .screening-summary-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } .screening-summary-details { grid-column: 1 / -1; display: grid; gap: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); } .screening-summary-details.is-hidden { display: none; } .screening-detail-level { border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem; background: var(--card); display: grid; gap: 0.35rem; } .screening-detail-title { font-weight: 700; font-size: var(--fs-sm); } .screening-detail-meta { font-size: var(--fs-xs); color: var(--muted); } .screening-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.3rem 1rem; } .screening-detail-row { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-sm); } .screening-detail-label { color: var(--muted); } .screening-detail-value { font-weight: 600; } .screening-detail-empty { color: var(--muted); font-size: var(--fs-sm); } .screening-selection-status { margin-top: 0.35rem; font-size: var(--fs-sm); font-weight: 700; color: color-mix(in oklab, var(--accent) 75%, var(--text) 25%); } .screening-summary-actions .btn.is-selected { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent); } .screening-summary-actions .btn.btn--ghost.is-selected { background: color-mix(in oklab, var(--accent) 12%, var(--card)); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); } .screening-summary-actions .btn[data-action="apply-adaptive"].is-selected { border-color: #FFD4A8; box-shadow: 0 0 0 2px color-mix(in oklab, #FFD4A8 70%, transparent); } .screening-preset-btn.preset-easy.is-selected, .screening-preset-btn.preset-medium.is-selected, .screening-preset-btn.preset-hard.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 65%, transparent); } .screening-preset-btn.preset-easy.is-selected { background: #22c55e; color: var(--text-on-dark); } .screening-preset-btn.preset-medium.is-selected { background: #f59e0b; color: var(--text-on-dark); } .screening-preset-btn.preset-hard.is-selected { background: #ef4444; color: var(--text-on-dark); } .screening-level-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: var(--bg); z-index: 1200; pointer-events: none; } .screening-level-overlay.active { display: flex; } .screening-level-button { min-width: min(90vw, 420px); padding: 1rem 2rem; border-radius: 999px; font-weight: 800; font-size: var(--fs-xl); text-align: center; background: var(--neutral-400); color: var(--text-on-dark); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); border: 3px solid rgba(255, 255, 255, 0.6); appearance: none; -webkit-appearance: none; cursor: default; transition: opacity 0.2s ease; } .screening-level-button.is-hidden { opacity: 0; } body.screening-level-active #mainContent, body.screening-level-active #gameArea, body.screening-level-active #trialProgressBar, body.screening-level-active .game-action-buttons { visibility: hidden; } .screening-level-button.preset-easy { background: #22c55e; } .screening-level-button.preset-medium { background: #f59e0b; } .screening-level-button.preset-hard { background: #ef4444; } @media (max-width: 720px) { .screening-mode-list { grid-template-columns: 1fr; } .screening-summary-row { grid-template-columns: 1fr; justify-items: start; } .screening-summary-actions { width: 100%; justify-content: flex-start; } } .training-modes { --training-column-width: clamp(170px, 17vw, 260px); width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); align-items: start; justify-content: center; overflow-x: hidden; overflow-y: visible; scrollbar-gutter: stable; } .training-modes.is-hidden { display: none; } .training-modes.is-scrollable { overflow-x: auto; padding-bottom: 0.5rem; } .training-modes--empty { display: block; } .empty-state { width: min(560px, 100%); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.4rem); border: 1px solid color-mix(in oklab, var(--accent-secondary) 55%, var(--border)); border-radius: var(--radius-lg); background: var(--accent-secondary-soft); color: var(--text); text-align: center; box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08); } .empty-state h3 { margin: 0 0 0.45rem; font-size: var(--fs-lg); } .empty-state p { margin: 0; color: var(--muted); } body.no-training-modes .settings-mode-tabs, body.no-training-modes .settings-column-right, body.no-training-modes .screening-toggle-block { display: none; } body.no-training-modes .settings-layout { grid-template-columns: minmax(0, 1fr); } body.no-training-modes .screening-mode-list { display: block; } body.no-training-modes .screening-grid { grid-template-columns: minmax(0, 1fr); } body.no-training-modes .screening-grid .screening-card:nth-child(2), body.no-training-modes .screening-actions--setup { display: none; } .training-column { width: 100%; display: flex; flex-direction: column; gap: clamp(0.7rem, 1.2vw, 1rem); } .training-page .training-mode-btn { width: 100%; appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: clamp(1.05rem, 1.9vw, 1.5rem); min-height: clamp(126px, 16.8vw, 158px); border-radius: 20px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; text-align: center; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .training-page .training-mode-btn .mode-gear-btn { position: absolute; top: clamp(8px, 1vw, 12px); right: clamp(8px, 1vw, 12px); width: clamp(36px, 3.6vw, 45px); height: clamp(36px, 3.6vw, 45px); border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.92); color: var(--text); display: grid; place-items: center; font-size: calc(var(--fs-md) * 1.5); line-height: 1; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12); cursor: pointer; user-select: none; } body.theme-dark .training-page .training-mode-btn .mode-gear-btn { background: color-mix(in oklab, var(--card) 35%, #000000 65%); border-color: color-mix(in oklab, var(--border) 70%, #000000 30%); color: var(--text); } .training-page .training-mode-btn .mode-gear-btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 2px; } .training-page .training-mode-btn .mode-icon { width: clamp(30px, 3.2vw, 50px); height: clamp(30px, 3.2vw, 50px); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .training-page .training-mode-btn .mode-icon-img { width: 100%; height: 100%; object-fit: contain; } .mode-dot { width: clamp(12px, 1.2vw, 18px); height: clamp(12px, 1.2vw, 18px); border-radius: 999px; background: #FFB56B; } .mode-dot--blue { background: var(--accent); } .mode-dot--green { background: #22c55e; } .mode-dot--red { background: #ef4444; } .mode-dot--empty { background: transparent; border: 2px dashed var(--accent); } .training-page .training-mode-btn:active { transform: none; } .training-page .training-mode-btn:focus-visible { outline: none; } .training-page .training-mode-btn:focus:not(:focus-visible) { outline: none; } .training-programs { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.2vw, 1rem); align-items: stretch; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow-y: auto; scrollbar-gutter: stable; } .training-programs.is-hidden { display: none; } .training-programs .program-btn { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: clamp(1.05rem, 1.9vw, 1.5rem); min-height: clamp(126px, 16.8vw, 158px); border-radius: 20px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; text-align: center; width: 100%; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .training-programs .program-btn .program-btn-icon { width: clamp(30px, 3.2vw, 50px); height: clamp(30px, 3.2vw, 50px); object-fit: contain; pointer-events: none; } .training-programs .program-btn:active { transform: none; } .training-programs .program-btn:focus:not(:focus-visible) { outline: none; } @media (hover: hover) and (pointer: fine) { .training-page .training-mode-btn:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); } .training-programs .program-btn:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); } } .training-programs .program-btn:focus-visible { outline: none; } .training-programs .program-btn.is-selected { box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); } .training-programs .program-btn-actions { position: absolute; top: 10px; right: 10px; display: inline-flex; gap: 0.35rem; } @media (max-width: 1000px) { .training-layout { grid-template-columns: 1fr; } .training-programs-panel { order: 2; } } @media (max-width: 1366px) and (orientation: landscape) { .training-layout:not(.no-programs) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .training-programs-panel { order: 0; } } @media (max-width: 900px) { .training-modes { grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); } .training-deck .training-modes { grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); } } @media (max-width: 620px) { .training-modes { grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); } } @media (max-height: 820px) { .training-page { gap: clamp(0.6rem, 1.4vh, 1rem); padding-bottom: var(--page-bottom-padding, 18px); grid-template-rows: auto auto; } .training-body { align-self: stretch; justify-content: flex-start; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .screening-page { gap: clamp(0.6rem, 1.4vh, 1rem); padding-bottom: var(--page-bottom-padding, 18px); grid-template-rows: auto auto; } .screening-body { min-height: 0; } } .training-start { margin-top: 0.5rem; } .training-page .mode-button-bar { position: static; top: auto; left: auto; transform: none; width: 100%; max-width: none; padding: 0; gap: 1rem; } .training-page .mode-group-row, .training-page .mode-group-panels { width: 100%; } body.profile-single #openProfilePanel { display: none; } body.game-active .home-page, body.game-active .training-page, body.game-active .screening-page { display: none; } /* Shared layout for right pane */ .main-content, .tabs-right { position: relative; width: 100%; max-width: 100vw; overflow-wrap: break-word; box-sizing: border-box; } /* Two-column shell for docs/infos */ .vertical-tabs-wrapper { display: flex; width: 100%; height: 100%; } .tabs-left { width: 200px; min-width: 200px; background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; padding-right: 0.5rem; } .tabs-right { position: relative; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; overflow-x: auto; } /* Nav stacks inside the left column */ .vertical-tabs { display: flex; height: 100%; } .main-topic-list, .sub-tab-list { list-style: none; padding: 0; margin: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--border); } /* Content area on the right */ .info-content-area { flex-grow: 1; padding: 1rem; overflow-y: auto; } /* Small-screen padding tweak for right pane */ @media (max-width: 768px) { .tabs-right { padding: 0.5rem; } } /* ========================================================================== C) NAVIGATION & TABS - Tabs, active/hover states ========================================================================== */ /* Wrapper that holds the two nav lists (topics + subtabs) */ .vertical-tabs { display: flex; height: 100%; } /* Left-side nav lists */ .main-topic-list, .sub-tab-list { overflow-x: hidden; overflow-y: auto; max-width: 100%; list-style: none; padding: 0; margin: 0; background: var(--panel); border-right: 1px solid var(--border); } /* Individual tab items */ .main-tab, .sub-tab-list li { padding: 10px; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: background 0.2s; } /* Hover state */ .main-tab:hover, .sub-tab-list li:hover { background-color: var(--surface-3); /* tokenized hover */ } /* Active state */ .main-tab.active, .sub-tab-list li.active { background-color: var(--text); color: white; } /* ========================================================================== D) MEDIA & TYPOGRAPHY UTILITIES - Generic text and image helpers ========================================================================== */ /* --- Typography utilities --- */ .bold { font-weight: 700; } /* --- Image helpers --- */ .tabs-right img, .page-section img { max-width: 100%; height: auto; border-radius: 1vw; box-shadow: 0 2px 8px var(--shadow); display: block; margin: 1rem auto; } img[src*="portrait.jpg"] { max-height: 300px; width: auto; display: block; margin: 0 auto; margin-bottom: 2rem; } /* --- Text sizing in right content pane --- */ .tabs-right p, .tabs-right li, .tabs-right span { font-size: var(--fs-sm); line-height: 1.6; } /* Branding: logo sizing (added) */ /* Make logos smaller */ .login-logo { /* login page logo */ width: auto; max-width: clamp(80px, 11vw, 130px); /* make it small; change to 32px if you want even smaller */ height: auto; display: block; margin: 0 auto 0.5rem; } #logoMain, /* app (main_content.html) logo */ #mainContent .logo { width: clamp(96px, 12vw, 150px); max-width: clamp(96px, 12vw, 150px); height: auto; display: block; margin: 0 auto 0.5rem; } /* ========================================================================== E) GLOBAL BUTTONS - One system with variants; prefer classes over IDs for styling ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h, 40px); padding: 0 1rem; border-radius: var(--radius, 8px); border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: var(--fs-sm); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1)); transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; font-family: 'Montserrat', sans-serif; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0); text-decoration: none; } /* Variants */ .btn--primary { background: var(--accent); color: var(--accent-contrast, #fff); border-color: transparent; } .btn--ghost { background: transparent; border: 1px solid var(--border); } .btn--back { --btn-h: 46px; padding: 0 1.25rem; border-radius: 999px; font-weight: 700; background: color-mix(in oklab, var(--accent) 12%, var(--card) 88%); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); color: var(--text); } .btn--back:hover { background: color-mix(in oklab, var(--accent) 18%, var(--card) 82%); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); } .btn--back .btn-icon { width: 20px; height: 20px; } body.theme-dark .btn--back { background: color-mix(in oklab, var(--accent) 35%, var(--panel) 65%); border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); color: var(--text); } body.theme-dark .btn--back:hover { background: color-mix(in oklab, var(--accent) 45%, var(--panel) 55%); border-color: color-mix(in oklab, var(--accent) 65%, var(--border)); } .btn--danger { background: #e5484d; color: var(--text-on-dark); border-color: transparent; } .btn--icon { display: inline-flex; align-items: center; gap: 0.5rem; } .btn--icon .btn-icon { width: 18px; height: 18px; object-fit: contain; pointer-events: none; } #logoutBtn.icon-btn { top: 1vh; left: 1vw; } #dataBtn.icon-btn { bottom: 1vh; left: 1vw; } #openProfilePanel.icon-btn { bottom: 1vh; right: 1vw; } #settingsBtn.icon-btn { top: 1vh; right: 1vw; } /* Special layout variants */ .btn--bar { width: 100%; height: 50px; border-radius: 0; justify-content: center; } .btn--fab { width: 60px; height: 60px; border-radius: 50%; box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.2)); position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; } .close-button { background: none; border: none; color: var(--text); cursor: pointer; font-size: var(--fs-lg); line-height: 1; padding: .25rem .4rem; border-radius: .4rem; transition: background .2s, color .2s, transform .08s; } .close-button:hover { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); } .close-button:active { transform: scale(0.98); } /* Pin the close button inside these cards (top-right) */ .settings-panel-centered .close-button { position: absolute; top: 10px; right: 10px; } /* === Button sizing helper for a larger Start button === */ .btn--xl { --btn-h: 64px; padding: 0 3rem; font-size: var(--fs-xl); } /* === Game action buttons (skip + exit) === */ .game-action-buttons { position: fixed; top: calc(var(--progress-bar-height) + 1vh); right: 1vw; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: clamp(0.4rem, 1vw, 0.9rem); z-index: 2002; max-width: calc(100vw - 2vw); } #exitGameBtn { font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-md); /* smaller than Start */ padding: 1vh 1.7vw; /* slim padding */ background: #D01C1F; color: white; border: none; border-radius: 0.7vw; cursor: pointer; z-index: 2002; transition: background 0.3s ease; } #exitGameBtn:hover { background: #2a5674; } #skipStepBtn { font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-md); padding: 1vh 1.7vw; background: var(--neutral-400); color: var(--text-on-dark); border: none; border-radius: 0.7vw; cursor: pointer; z-index: 2002; transition: background 0.3s ease; } #skipStepBtn:hover { background: color-mix(in oklab, var(--neutral-400) 85%, #000000 15%); } /* ========================================================================== F) FORMS - Login form, generic inputs, selects, groups, messages ========================================================================== */ /* Shared form wrapper */ .form { display: flex; flex-direction: column; gap: 1rem; } .form .field { display: flex; flex-direction: column; margin-bottom: 1rem; } .form label { font-size: var(--fs-sm); margin-bottom: 0.3rem; font-weight: 600; color: var(--text); } .form input, .form select, .form textarea { padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius, 6px); background: var(--card); color: var(--text); font-size: var(--fs-sm); } .form .help { font-size: var(--fs-2xs); color: var(--muted); margin-top: 0.25rem; } /* Login form box */ .login-form { display: flex; flex-direction: column; width: 100%; max-width: 440px; gap: 1.15rem; background: var(--card); padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: 18px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14); border: 1px solid rgba(15, 23, 42, 0.12); transition: box-shadow 0.2s ease, transform 0.2s ease; } /* Center the primary login form inside the left card */ .login-left-card .login-form, .login-left .login-form { margin-left: auto; margin-right: auto; width: min(100%, 520px); } .login-form label { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 0.35rem; letter-spacing: 0.01em; } .login-form input, .login-form select, .login-form textarea { padding: clamp(0.75rem, 1.3vw, 0.95rem); font-size: var(--fs-md); border: 1px solid rgba(15, 23, 42, 0.16); border-radius: 12px; background: var(--input-bg-alt); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.2s ease; } .login-form input:focus, .login-form select:focus, .login-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.16); background: var(--input-bg); } .login-form:focus-within { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18); } /* Compact variant used inside register/reset/delete panels */ .login-form.small-form { width: min(90vw, 560px); background: var(--card); padding: clamp(1.1rem, 2.2vw, 1.6rem); border-radius: 14px; box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.1)); } .login-form.small-form h2 { font-weight: 700; font-size: var(--fs-lg); color: var(--text); margin-bottom: 0.75rem; text-align: center; } .register-grid { display: grid; grid-template-columns: 1fr 2fr; column-gap: 0.75rem; row-gap: 0.85rem; align-items: center; } .register-row { display: contents; } .register-grid label { margin-bottom: 0; } .register-input-wrap { position: relative; width: 100%; } .register-input-wrap input, .register-input-wrap select { width: 100%; box-sizing: border-box; } .register-secondary-label { display: block; margin-top: 0.75rem; } .register-progress { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.35rem 0 1rem; } .register-progress__bar { height: 6px; background: rgba(0, 0, 0, 0.08); border-radius: 999px; overflow: hidden; } .register-progress__fill { height: 100%; width: 20%; background: var(--accent); transition: width 0.2s ease; } .register-progress__label { font-size: var(--fs-xs); color: var(--muted); text-align: right; } .register-steps { display: block; } .register-step { display: none; } .register-step.active { display: block; } .register-help { font-size: var(--fs-xs); color: var(--muted); margin: 0.35rem 0 0.9rem; } .register-actions { display: flex; gap: 0.75rem; justify-content: space-between; margin-top: 0.5rem; flex-wrap: wrap; } .register-actions .login-btn { flex: 1 1 auto; } .register-submit { display: none; } .pending-container { display: block; } .pending-msg { display: flex; align-items: center; gap: 0.6rem; line-height: 1.35; } .hourglass-img { width: 42px; height: auto; } .pending-text { display: inline-block; } .pending-actions { margin-top: 1rem; display: flex; justify-content: center; } /* Row of login buttons */ .login-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; } /* Tighter spacing for the main login form */ #loginForm { gap: 0.9rem; padding: clamp(1.4rem, 2.5vw, 2rem); } #loginForm #loginError { margin-top: 0.25rem; } #loginForm #loginError:empty { display: none; } #loginForm .login-actions { margin-top: 0.25rem; justify-content: center; flex-wrap: wrap; gap: 0.75rem; } #loginForm .login-actions .login-btn { display: inline-flex; margin: 0; } .login-divider { display: flex; align-items: center; gap: 0.75rem; margin: 0.8rem 0 0.4rem; color: var(--muted); font-weight: 600; font-size: var(--fs-sm); } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .login-actions--oauth { justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; } .login-actions--oauth .login-btn { width: 52px; height: 52px; padding: 0; border-radius: 16px; } .oauth-icon { width: 24px; height: 24px; display: block; } .oauth-icon svg { width: 100%; height: 100%; display: block; } .login-btn--apple .oauth-icon svg { overflow: visible; transform: translateX(1px); } .login-btn--oauth { border-color: color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--card) 92%, #ffffff 8%); } .login-btn--google { border-color: #ea4335; } .login-btn--apple { border-color: #111827; color: #111827; } .login-btn--microsoft { border-color: #D01C1F; } .login-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: var(--fs-md); padding: 0.75rem 1.25rem; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.1)); transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16); } .login-btn:active { transform: translateY(0); } .login-btn:disabled, .login-btn.is-disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); cursor: not-allowed; box-shadow: none; transform: none; } /* Primary action (Login, Submit) */ .login-btn--primary, #loginBtn { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; display: block; margin: 0.5vh auto 0 auto; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.3); } .login-btn--primary:hover, #loginBtn:hover { filter: brightness(1.03); } /* Light orange action (e.g., Register) */ .login-btn--lightblue { background: var(--panel); color: #D01C1F; border-color: rgba(15, 23, 42, 0.18); display: block; margin: 0.5vh auto 0 auto; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12); } .login-btn--lightblue:hover { filter: brightness(1.03); } /* Ghost / neutral (Zurück, etc.) */ .login-btn--ghost { background: var(--panel); border: 1px solid rgba(15, 23, 42, 0.15); } .login-btn.danger { background: #e5484d; color: var(--text-on-dark); border-color: transparent; } .login-btn.danger:hover { filter: brightness(0.95); } /* Password visibility toggle (positioned within input wrapper) */ .toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; } /* Feedback / error messages */ .feedback-msg, #loginError, #resetMessage { font-size: var(--fs-sm); margin-top: 0.5rem; } .feedback-msg { color: green; } #loginError { color: red; } #resetMessage { color: orange; } /* Layout helpers */ .input-item { display: flex; flex-direction: column; margin-bottom: 1rem; border-radius: 8px; } .input-select { width: 100%; max-width: 200px; } .grid-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; } /* ========================================================= Checkbox + Radio Coloring (use brand accent) ========================================================= */ /* Default border + background */ input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px; background: var(--card); cursor: pointer; position: relative; transition: all 0.15s ease; } /* Hover border tint */ input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); } /* Focus ring */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); } input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--accent); border-color: var(--accent); } /* Checkmark for checkboxes */ input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 0; /* fill the parent */ margin: auto; /* centers inside */ width: 5px; /* proportionate stroke size */ height: 9px; border: solid var(--text-on-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); box-sizing: border-box; } /* Radio dot */ input[type="radio"]:checked::after { content: ""; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-on-dark); } /* Dark mode consistency */ body.theme-dark input[type="checkbox"], body.theme-dark input[type="radio"] { border-color: var(--border); background: var(--card); } body.theme-dark input[type="checkbox"]:checked, body.theme-dark input[type="radio"]:checked { background-color: var(--accent); border-color: var(--accent); } /* Number input tweaks */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; /* Firefox */ } /* === Login panels (compat with index.php toggling) === */ .form-panel { position: absolute; inset: 0; /* top/right/bottom/left = 0 */ background: rgba(248, 250, 252, 0.96); display: none; /* hidden by default */ align-items: center; justify-content: center; z-index: 100; /* above the base login form */ backdrop-filter: blur(6px); } .form-panel.active { display: flex; } /* The panels live inside the left column, anchor them there */ .login-left { position: relative; } /* === Welcome panel layout === */ #welcomePanel { align-items: stretch; justify-content: flex-start; flex-direction: column; padding: clamp(8px, 2vw, 18px) 0 0; gap: clamp(0.75rem, 1.6vw, 1.2rem); overflow: visible; } #welcomePanel #welcomeTitle { margin: 0; font-size: var(--fs-sm); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); } #welcomePanel #welcomeSubtitle { margin: 0; color: var(--text); font-size: var(--fs-lg); font-weight: 600; text-align: center; } #welcomePanel #welcomeFields { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.1rem); width: 100%; flex: 0 0 auto; margin-top: 4px; align-items: start; padding: clamp(14px, 2.2vw, 20px); border-radius: 18px; background: color-mix(in oklab, var(--panel) 80%, transparent); border: 1px solid color-mix(in oklab, var(--border) 85%, transparent); width: min(100%, 760px); margin-left: auto; margin-right: auto; text-align: left; } #section-account #welcomePanel { align-items: center; } #section-account #welcomePanel #welcomeTitle, #section-account #welcomePanel #welcomeSubtitle { align-self: center; text-align: center; } #welcomePanel #welcomeFields .welcome-credential { grid-column: 1 / -1; } #welcomePanel #welcomeFields .field { margin-bottom: 0; min-width: 0; } #welcomePanel .welcome-span { grid-column: 1 / -1; } #welcomePanel .welcome-security-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.2rem; margin-bottom: 0.75rem; } #welcomePanel .welcome-security.is-hidden { display: none; } #welcomePanel .welcome-security-actions .login-btn { flex: 1 1 240px; max-width: 320px; } #welcomePanel .welcome-security-form { display: none; margin-top: clamp(0.7rem, 1.4vw, 1rem); padding: clamp(0.8rem, 1.6vw, 1.1rem); border-radius: 14px; border: 1px dashed color-mix(in oklab, var(--border) 70%, transparent); background: var(--card); } #welcomePanel .welcome-security-form.is-open { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } #welcomePanel .welcome-security-form .login-actions { justify-content: flex-start !important; padding: 0; margin-top: 0.4rem; width: 100%; } #welcomePanel .welcome-security-form .login-actions .login-btn { flex: 0 0 auto; max-width: none; } #welcomePanel label { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 0.35rem; letter-spacing: 0.01em; } #welcomePanel input, #welcomePanel select, #welcomePanel textarea { padding: clamp(0.75rem, 1.3vw, 0.95rem); font-size: var(--fs-md); border: 1px solid rgba(15, 23, 42, 0.16); border-radius: 12px; background: var(--input-bg-alt); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.2s ease; } #welcomePanel input:focus, #welcomePanel select:focus, #welcomePanel textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.16); background: var(--input-bg); } #welcomePanel .help { font-size: var(--fs-xs); line-height: 1.5; } #welcomePanel .welcome-progress { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; align-items: start; } #welcomePanel .welcome-progress > div { width: 100%; } /* Keep 'Passwort' label, input, and toggle inline, never overlapping */ #welcomePanel .pw-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; align-items: center; } #welcomePanel .pw-inline label { margin-bottom: 0; white-space: nowrap; grid-column: 1 / -1; } #welcomePanel .pw-inline input[type="password"], #welcomePanel .pw-inline input[type="text"] { flex: 1 1 auto; min-width: 0; grid-column: 1 / 2; } #welcomePanel #toggleWelcomePw { position: static !important; right: auto !important; top: auto !important; transform: none !important; display: inline-flex; align-items: center; justify-content: center; height: 38px; width: 38px; padding: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; flex: 0 0 auto; grid-column: 2 / 3; } #welcomePanel #toggleWelcomePw .eye-icon { width: 18px; height: 18px; stroke: currentColor; } #welcomePanel #toggleWelcomePw .eye-icon--hide { display: none; } #welcomePanel #toggleWelcomePw.is-visible .eye-icon--show { display: none; } #welcomePanel #toggleWelcomePw.is-visible .eye-icon--hide { display: block; } /* Make the welcome progress canvas behave like a thin bar */ #welcomeProgress { display: block; width: 100%; height: 18px; /* compact */ flex: 1 1 auto; min-width: 0; } #welcomeActiveUntilRow { margin-top: 0; font-size: var(--fs-md); display: flex; flex-direction: row; align-items: center; gap: 0.4rem 0.6rem; flex-wrap: wrap; } #welcomeActiveUntilRow strong { margin-right: 0; } /* Force center alignment of buttons in welcome panel */ #welcomePanel .login-actions { display: flex; justify-content: center !important; /* override space-between */ align-items: center; flex-wrap: wrap; gap: 0.75rem !important; margin-top: clamp(0.9rem, 1.8vw, 1.4rem); padding-top: 1.25rem; padding-bottom: clamp(12px, 2vw, 18px); width: 100%; } #welcomePanel .login-actions .login-btn { margin: 0 !important; /* remove auto margins */ flex: 1 1 160px; max-width: 220px; } @media (max-width: 900px) { #welcomePanel #welcomeFields { grid-template-columns: 1fr; } #welcomeActiveUntilRow { flex-direction: column; align-items: flex-start; } } .scroll-indicator { position: fixed; right: calc((100vw - min(1200px, 94vw)) / 2); bottom: clamp(14px, 2.8vw, 26px); margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; padding: 10px 14px; border-radius: 999px; background: #D01C1F; border: 1px solid #D01C1F; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.28); font-weight: 700; color: var(--accent-contrast); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; z-index: 10; } .scroll-indicator svg { width: 18px; height: 18px; } @media (max-width: 900px) { .scroll-indicator { right: 12px; bottom: 12px; font-size: var(--fs-xs); } } #welcomeExtendBtn { background: #D01C1F; color: var(--text-on-dark); border-color: transparent; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.3); } #welcomeExtendBtn:hover { filter: brightness(1.03); } #welcomeExtendBtn:disabled, #welcomeExtendBtn.is-disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); box-shadow: none; } #welcomePanel { display: none; } #welcomePanel.active { display: flex; } /* ========================================================================== G) PANELS & OVERLAYS - Settings, Profile, Data (modal/slide panels) ========================================================================== */ :root { /* Panel sizing (center piece) */ --settings-panel-width: clamp(980px, 90vw, 1800px); /* Split it: tabs get 100% of inner height; columns get 60% of the tabs */ --settings-tabs-max-h: var(--settings-inner-max-h); --settings-cols-max-h: calc(var(--settings-tabs-max-h) * 0.6); /* Left tabs rail width (kept smaller than content) */ --settings-tabs-w: clamp(150px, 18vw, 180px); /* Inside the content area: 2-column proportions */ --settings-col-left: 1.25fr; --settings-col-right: 1.25fr; --settings-col-min: 280px; /* min width for each column */ --settings-gap: 16px; /* gap between panel and drawer */ } /* ---------------- Shared overlay (Settings + Profile) ---------------- */ .settings-overlay { position: fixed; inset: 0; display: none; /* hidden by default */ justify-content: center; align-items: center; flex-direction: column; gap: var(--page-actions-gap, clamp(0.7rem, 1.4vw, 1.2rem)); padding: clamp(12px, 2vw, 24px); box-sizing: border-box; z-index: 2000; /* above main content */ backdrop-filter: blur(2px); /* optional soft blur */ transition: background 0.2s ease; } .settings-overlay.active { display: flex; } /* ---------------- Shared card (Settings + Profile) ---------------- */ .settings-panel-centered { position: relative; width: min(var(--settings-panel-width), 100%); height: calc(100vh - 8rem); max-height: calc(100vh - 8rem); background: var(--panel); border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; } /* ---------------- Settings inner layout ---------------- */ .settings-content{ flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 1rem; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } /* LEFT tabs + RIGHT content area */ .settings-layout{ display: grid; grid-template-columns: var(--settings-tabs-w) 1fr; column-gap: clamp(12px, 2vw, 24px); min-height: 0; width: 100%; max-width: 100%; align-self: stretch; margin-top: 2vh; flex: 1 1 auto; align-items: stretch; overflow: hidden; } /* Settings page header (hidden in overlay mode) */ .settings-page-header { display: none; } .settings-page-header .settings-back-button { justify-self: start; text-decoration: none; } .settings-page-header .settings-page-title { justify-self: center; text-align: center; font-size: var(--page-title-size); font-weight: 800; } .settings-page-header .settings-page-spacer { justify-self: end; } /* LEFT: tabs rail uses the full inner height */ .settings-mode-tabs { width: var(--settings-tabs-w); min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem; max-height: none; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; align-self: flex-start; display: flex; flex-direction: column; gap: 0.6rem; } .settings-mode-tabs button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: clamp(7px, 1vw, 14px) clamp(10px, 1.5vw, 18px); font-weight: 600; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .settings-mode-tabs button.active { background: var(--accent); color: var(--accent-contrast, #fff); border-color: transparent; } /* RIGHT: two wider columns limited to 60% of tabs height */ .settings-columns{ display: grid; grid-template-columns: minmax(var(--settings-col-min), var(--settings-col-left)) minmax(var(--settings-col-min), var(--settings-col-right)); grid-template-rows: auto minmax(0, 1fr); gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-sizing: border-box; max-height: none; overflow: auto; /* scroll inside the columns */ min-height: 0; width: 100%; max-width: 100%; align-self: stretch; align-self: flex-start; height: 100%; overflow: hidden; align-items: stretch; align-self: stretch; } .settings-column-left, .settings-column-right { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 16px 0; height: 100%; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .settings-column-left .setting-group, .settings-column-right .setting-group { padding-left: clamp(8px, 1.2vw, 16px); } .settings-help-content .settings-help-list { margin: 0.5rem 0 0 1.1rem; padding: 0; } .settings-help-content .settings-help-list li { margin: 0.25rem 0; } .settings-col { flex: 1; } .setting-group { font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; } .setting { margin-bottom: 0.75rem; } /* Make settings checkboxes align left */ .settings-column-left .checkbox-item, .settings-column-right .checkbox-item { justify-content: flex-start; text-align: left; } .settings-column-left .checkbox-item span, .settings-column-right .checkbox-item span { flex: unset; } /* Sticky section titles (optional) */ .settings-column-left > h3, .settings-column-right > h3{ position: static; top: auto; background: transparent; z-index: auto; padding: .25rem 0 0.2rem clamp(8px, 1.2vw, 16px); margin-top: 0; font-size: var(--settings-section-title-size); } .settings-column-right > h3.settings-section-heading-secondary { display: none; } #alternateModeHeader { margin-top: clamp(1.2rem, 2vw, 2.4rem); } .save-settings-wrapper { border-top: none; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.4rem; flex-wrap: wrap; background: transparent; flex-shrink: 0; width: min(var(--settings-panel-width), 100%); max-width: 100%; box-sizing: border-box; } .save-settings-wrapper .save-feedback { flex-basis: 100%; text-align: center; } body.settings-page .save-settings-wrapper { width: 100%; padding: var(--page-actions-pad, 1rem) var(--page-header-padding) var(--page-actions-pad, 1rem); align-self: stretch; } /* Little "?" badge next to labels (inline with label) */ .setting .input-item .bold { display: inline-flex; align-items: center; gap: 0.4em;} /* Make non-.input-item labels behave like inline containers too */ .setting > .bold, .setting .checkbox-item .bold { display: inline-flex; align-items: center; gap: 0.4em; } .help-badge { display: inline-block; font-size: var(--fs-sm); font-weight: 600; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 50%; width: 1.4em; height: 1.4em; line-height: 1.2em; text-align: center; cursor: pointer; margin-left: 0.4em; vertical-align: middle; transition: background 0.2s, color 0.2s; } .help-badge:hover { background: var(--accent); color: var(--text-on-dark); } /* Right help drawer (separate window to the right of centered panel) */ .settings-help-drawer { position: fixed; top: 50%; left: calc(50% + (var(--settings-panel-width) / 2) + var(--settings-gap)); transform: translateY(-50%); width: 320px; max-height: 84vh; background: var(--card); border: 1px solid var(--border); box-shadow: -8px 0 24px var(--shadow); border-radius: 12px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; } .settings-help-drawer.open { opacity: 1; transform: translateY(-50%); pointer-events: auto; } body:not(.settings-page) .settings-help-drawer { left: auto; right: clamp(12px, 2vw, 24px); } /* If screen is too narrow to fit beside the panel, fall back to right overlay */ @media (max-width: 1200px) { .settings-help-drawer { left: auto; right: 2vw; width: min(340px, 96vw); } } /* Drawer header/content */ .settings-help-header { display:flex; align-items:center; justify-content:space-between; position: sticky; top: 0; z-index: 2; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--card); } .settings-help-content { padding: 12px; font-size: var(--fs-sm); line-height: 1.6; max-height: calc(84vh - 56px); overflow:auto; } /* === Settings page mode (no overlay scrim) ============================ */ body.settings-page { overflow: hidden; font-size: var(--fs-lg); --settings-tabs-w: clamp(170px, 20vw, 250px); --page-top-padding: var(--page-header-padding, 18px); } body.settings-page #mainContent { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; } .page-shell { position: static; } body.settings-page .page-shell--settings, body.profile-page .page-shell--profile, body.programs-page .page-shell--programs, body.instructions-page .page-shell--instructions { position: static; inset: auto; display: block; padding: 0; margin: 0; box-sizing: border-box; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: auto; overflow: visible; } body.settings-page .settings-overlay { position: static; inset: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--page-actions-gap, clamp(0.7rem, 1.4vw, 1.2rem)); background: var(--bg); padding: var(--page-top-padding) var(--page-header-padding) var(--page-bottom-padding, 18px); box-sizing: border-box; min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; backdrop-filter: none; } body.settings-page .settings-panel-centered { position: static; transform: none; width: 100%; max-width: none; flex: 1 1 auto; min-height: 0; height: auto; max-height: none; background: var(--bg); border-radius: 0; box-shadow: none; overflow: hidden; gap: clamp(10px, 1.6vw, 18px); } body.settings-page .settings-panel-centered .close-button { display: none; } body.settings-page .settings-page-header { display: grid; padding: var(--page-header-pad-y) var(--page-header-padding); } body.settings-page .settings-content { display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; padding: 0 var(--page-header-padding) var(--page-header-padding); overflow: hidden; } body.settings-page #settingsOverlay.help-open .settings-content { padding-right: calc(var(--page-header-padding) + 340px); } body.settings-page .settings-page-header, body.settings-page .settings-content { width: 100%; max-width: none; } body.settings-page .settings-layout { margin-top: 0; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; align-items: stretch; overflow: hidden; } body.settings-page .settings-mode-tabs { height: 100%; max-height: none; align-self: stretch; } body.settings-page .settings-columns { height: 100%; max-height: none; overflow: hidden; align-items: stretch; } body.settings-page .settings-column-left, body.settings-page .settings-column-right { height: 100%; overflow: auto; } body.settings-page #settingsModeTabs button { padding: clamp(7px, 1vw, 14px) clamp(10px, 1.5vw, 18px); font-size: var(--fs-sm); } body.settings-page #saveSettings { --btn-h: 52px; padding: 0 2.75rem; font-size: var(--fs-lg); } #saveSettings { --btn-h: 52px; padding: 0 2rem; font-size: var(--fs-lg); } #saveSettingsAndBack { --btn-h: 52px; padding: 0 2.4rem; font-size: var(--fs-lg); } body.settings-page #saveSettingsAndBack { --btn-h: 52px; padding: 0 2.4rem; font-size: var(--fs-lg); } body.settings-page .settings-help-drawer { left: auto; right: clamp(12px, 2vw, 24px); top: clamp(84px, 10vh, 120px); transform: none; max-height: calc(100vh - 140px); } @media (max-width: 1200px) { body.settings-page #settingsOverlay.help-open .settings-content { padding-right: var(--page-header-padding); } } /* ========================================================= ========================================================= */ #settingsModeTabs { background: var(--panel); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; border-radius: 12px; overflow: auto; } #settingsModeTabs button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: clamp(7px, 1vw, 14px) clamp(10px, 1.5vw, 18px); font-weight: 600; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } #settingsModeTabs button.active { background: var(--accent); color: var(--accent-contrast, #fff); border-color: transparent; } /* Dark mode fine-tuning */ /* === Profile overlay: two columns (list + right drawer) === */ .profile-page-header { display: none; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--page-header-gap); padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); } .profile-page-header .profile-back-button { justify-self: start; text-decoration: none; } .profile-page-header .profile-page-title { justify-self: center; text-align: center; font-size: var(--page-title-size); font-weight: 800; } .profile-page-header .profile-page-spacer { justify-self: end; } .profile-overlay { position: fixed; inset: 0; display: none; /* toggled by JS */ grid-template-columns: 1fr 340px; justify-content: center; /* center the two-column grid horizontally */ align-items: center; column-gap: 12px; /* adjust spacing between list and drawer */ background: rgba(0, 0, 0, 0.6); z-index: 1000; } .profile-overlay.active { display: grid; } body.profile-single .profile-overlay { grid-template-columns: 1fr; } body.profile-single .profile-left { display: none; } /* === Profile page mode (no overlay scrim) ============================ */ body.profile-page { overflow: hidden; font-size: var(--fs-lg); --page-top-padding: var(--page-header-padding, 18px); } body.profile-page #mainContent { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; } body.profile-page .profile-overlay { position: static; inset: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(12px, 2vw, 24px); row-gap: clamp(8px, 1.4vw, 16px); align-items: stretch; justify-content: center; background: var(--bg); padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); box-sizing: border-box; min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; } body.profile-page .profile-overlay.active { display: grid; } body.profile-page.profile-single .profile-overlay { grid-template-columns: 1fr; } body.profile-page.profile-drawer-open .profile-overlay { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } body.profile-page.profile-single .profile-drawer { grid-column: 1; grid-row: 2; } body.profile-page .profile-page-header { display: grid; grid-column: 1 / -1; } body.profile-page .profile-page-header.page-header { padding: var(--page-header-pad-y) var(--page-header-padding); } body.profile-page .profile-left { grid-column: 1 / -1; grid-row: 2; width: calc(100% - (var(--profile-panel-margin) * 2)); max-width: none; max-height: none; height: calc(100% - (var(--profile-panel-margin) * 2)); min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; margin: var(--profile-panel-margin); } body.profile-page .profile-drawer { grid-column: 2; grid-row: 2; width: calc(100% - (var(--profile-panel-margin) * 2)); max-width: none; max-height: none; height: calc(100% - (var(--profile-panel-margin) * 2)); min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; margin: var(--profile-panel-margin); } body.profile-page.profile-drawer-open .profile-left { grid-column: 1; } body.profile-page.profile-drawer-open .profile-drawer { display: block; } body.profile-page #closeProfileOverlay { display: none; } /* Left card (list) */ .profile-left { background: var(--panel); border-radius: 12px; /* rounded like other panels */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border: 1px solid var(--border); margin: var(--profile-panel-margin) auto; /* center vertically in grid cell */ width: min(600px, 95vw); max-height: calc(100vh - (var(--profile-panel-margin) * 2)); padding: 1rem; overflow: hidden; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .profile-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .profile-toolbar { margin-bottom: 8px; flex: 1 1 clamp(260px, 40vw, 560px); min-width: clamp(220px, 28vw, 360px); display: flex; align-items: center; gap: 8px; } .profile-toolbar input { width: 100%; flex: 1 1 auto; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-size: var(--fs-md); min-height: clamp(44px, 4vw, 56px); } .profile-toolbar .btn { --btn-h: clamp(44px, 4vw, 56px); padding: 0 1.1rem; font-size: var(--fs-sm); white-space: nowrap; } .profile-actions .btn { --btn-h: clamp(44px, 4vw, 54px); padding: 0 1.35rem; font-size: var(--fs-md); } /* List + rows */ .profile-list { display: grid; gap: 8px; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; align-content: start; } body.profile-page .profile-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.profile-page .profile-row { grid-template-columns: 28px 1fr auto; grid-template-areas: "color name actions" "color date actions"; } body.theme-light.profile-page .profile-row:not(.is-selected) { background: var(--card); } body.theme-light.profile-page .profile-row.is-selected { background: var(--accent); } body.profile-page .profile-color { grid-area: color; } body.profile-page .profile-name { grid-area: name; } body.profile-page .profile-date { grid-area: date; } body.profile-page .profile-actions-row { grid-area: actions; justify-content: flex-end; } .profile-row { display: grid; grid-template-columns: 28px minmax(120px, 220px) 140px 120px; align-items: center; gap: 8px; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; } .profile-row:hover { background: color-mix(in oklab, var(--panel) 40%, transparent); } .profile-row.is-selected { background: var(--accent); border-color: color-mix(in oklab, var(--accent) 85%, #000 15%); color: var(--text-on-dark); } .profile-row.is-selected:hover { background: var(--accent); } .profile-row.is-selected .profile-date { color: rgba(255, 255, 255, 0.85); } .profile-row.is-selected .profile-icon { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); color: var(--text-on-dark); } .profile-row.is-selected .profile-icon:hover { background: rgba(255, 255, 255, 0.18); } .profile-row.is-selected .profile-color { border-color: rgba(255, 255, 255, 0.4); } .profile-color { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .1); } .profile-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-date { color: var(--muted); font-size: var(--fs-xs); } .profile-actions-row { display: flex; gap: 6px; justify-content: flex-end; } .profile-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--card); cursor: pointer; color: var(--text); } .profile-icon:hover { background: var(--panel); } /* Right drawer (small panel) */ .profile-drawer { background: var(--panel); border-left: 1px solid var(--border); border-radius: 12px; /* rounded corners */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); margin: auto; /* center vertically */ padding: 1rem; width: 320px; max-height: 80vh; overflow-y: auto; display: none; /* show only when editing/adding */ } .drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } /* Color grid */ .color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; } .color-swatch { width: 100%; padding-top: 100%; border-radius: 10px; border: 2px solid transparent; cursor: pointer; position: relative; } .color-swatch[aria-checked="true"] { outline: 3px solid var(--text); } .color-swatch::after { content: "\2713"; color: var(--text-on-dark); font-weight: 800; position: absolute; right: 6px; bottom: 4px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); display: none; } .color-swatch[aria-checked="true"]::after { display: block; } /* Responsive narrow screens: stack (overlay becomes vertical) */ @media (max-width: 720px) { .profile-overlay { grid-template-columns: 1fr; } .profile-drawer { border-left: none; } body.profile-page .profile-overlay { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 0.6fr) minmax(0, 0.4fr); } body.profile-page .profile-list { grid-template-columns: 1fr; } body.profile-page .profile-left { grid-column: 1; grid-row: 2; } body.profile-page .profile-drawer { grid-column: 1; grid-row: 3; } } .profile-left, .profile-drawer { margin: var(--profile-panel-margin) auto; align-self: center; } /* ========================================================================== PROGRAM OVERLAY ========================================================================== */ .program-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); z-index: 1200; padding: 1rem; } .program-overlay.active { display: flex; } .programs-page-header, .programs-sidebar { display: none; } body.programs-page { overflow: hidden; font-size: var(--fs-lg); --page-top-padding: var(--page-header-padding, 18px); } body.programs-page #mainContent { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; } body.programs-page.game-active #mainContent { position: relative; left: 0; width: 100%; height: 100%; overflow: visible; visibility: visible; } body.programs-page.game-active #programOverlay { display: none; } body.programs-page.game-active .page-shell--programs { display: none; } body.programs-page .programs-page-header { display: grid; grid-column: 1 / -1; } body.programs-page .programs-page-header.page-header { padding: var(--page-header-pad-y) var(--page-header-padding); } body.programs-page .program-overlay { position: static; inset: auto; display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(12px, 2vw, 24px); align-items: stretch; justify-content: center; background: var(--bg); padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: 100vh; height: 100svh; height: 100dvh; box-sizing: border-box; overflow: hidden; } body.programs-page .program-overlay.active { display: grid; } body.programs-page .programs-sidebar { display: flex; flex-direction: column; grid-column: 1; grid-row: 2; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: 100%; max-height: 100%; } body.programs-page .programs-sidebar-header { padding: 0.9rem 1rem 0.6rem; border-bottom: 1px solid var(--border); } body.programs-page .programs-sidebar-title { font-weight: 700; font-size: var(--fs-lg); } body.programs-page .programs-sidebar-body { padding: 0.9rem; overflow: auto; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } body.programs-page .program-panel { grid-column: 2; grid-row: 2; width: 100%; max-height: none; height: 100%; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } body.programs-page .program-body { max-height: none; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; } body.programs-page #closeProgramOverlay { display: none; } body.programs-page .program-header { display: none; } body.programs-page #homePage, body.programs-page #trainingPage { display: none; } body.programs-page #gameArea { display: none; } body.programs-page.game-active #gameArea { display: block; } .program-panel { width: min(1100px, 96vw); max-height: 90vh; background: var(--card); border-radius: 16px; border: 1px solid var(--border); box-shadow: none; display: flex; flex-direction: column; overflow: hidden; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; position: relative; } .program-panel.is-mode-overlay-active { overflow: visible; } .program-header { display: flex; align-items: center; justify-content: flex-end; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--border); } #programTitle { font-size: var(--fs-lg); font-weight: 700; } .program-body { padding: 1rem 1.2rem; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .program-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 1rem 1.6rem; } .program-field label { font-weight: 600; margin-bottom: 0.3rem; display: block; } .program-meta .program-field { flex: 1 1 0; min-width: 0; } .program-field input, .program-field select, .program-estimate { width: 100%; padding: 0.6rem 0.75rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; } #programScope.has-profile { --profile-color: #FFB56B; padding-left: 2rem; border-left: 12px solid var(--profile-color); } .program-estimate { margin-left: 0; display: flex; align-items: center; white-space: nowrap; } .program-builder { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .program-sequence { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; } .program-sequence h3 { margin: 0; font-size: var(--fs-md); } .program-sequence-grid { --program-sequence-columns-max: 3; --program-sequence-columns: var(--program-sequence-columns-max); --program-node-width-base: clamp(260px, 22vw, 360px); --program-node-width: calc(var(--program-node-width-base) * 0.91); --program-gap-x-min: clamp(28px, 5.5vw, 140px); --program-gap-x: var(--program-gap-x-min); --program-gap-y: clamp(3.2rem, 7vw, 6rem); --program-connector-length-x: var(--program-gap-x); --program-connector-length-y: var(--program-gap-y); --program-connector-thickness: clamp(3px, 0.45vw, 6px); --program-connector-overlap: clamp(10px, 1vw, 16px); --program-sequence-edge: clamp(12px, 1.6vw, 20px); display: grid; position: relative; grid-template-columns: repeat(var(--program-sequence-columns), var(--program-node-width)); column-gap: var(--program-gap-x); row-gap: var(--program-gap-y); align-content: start; justify-content: center; justify-items: center; padding: 0.4rem var(--program-sequence-edge); flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; scrollbar-gutter: stable; } .program-node { position: relative; border-radius: 20px; border: 1px solid var(--border); background: var(--card); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08); padding: clamp(0.85rem, 1.4vw, 1.2rem); min-height: clamp(118px, 14vw, 150px); display: flex; flex-direction: column; justify-content: space-between; gap: 0.6rem; overflow: visible; width: 100%; } .program-add-slot { border-style: dashed; border-width: 2px; background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; text-align: center; align-items: center; justify-content: center; } body.theme-dark .program-add-slot { background: var(--card); color: var(--text); border-color: var(--border); } .program-add-slot:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12); } .program-step-card--pause { background: var(--card); border-style: dashed; color: var(--text-muted); } body.theme-dark .program-step-card--pause { color: var(--text); } .program-step-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding-right: clamp(2rem, 3vw, 2.6rem); } .program-step-title { font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; } .program-step-header-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .program-step-action-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(15, 23, 42, 0.2); background: rgba(255, 255, 255, 0.9); color: #D01C1F; display: grid; place-items: center; cursor: pointer; font-weight: 700; } .program-step-header-actions .program-step-action-btn { width: 34px; height: 34px; font-size: var(--fs-md); } .program-step-header-actions .preset-badge { width: 28px; height: 28px; font-size: var(--fs-xs); } .program-step-action-btn:hover { filter: brightness(0.96); } .program-step-remove { background: #ef4444; border-color: #dc2626; color: var(--text-on-dark); position: absolute; top: clamp(0.45rem, 0.7vw, 0.7rem); right: clamp(0.45rem, 0.7vw, 0.7rem); z-index: 3; } .program-step-remove:hover { filter: brightness(0.95); } .program-step-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: var(--fs-md); font-weight: 600; } .program-step-summary { font-weight: 600; color: var(--text); font-size: var(--fs-md); } .program-step-meta input[type="number"] { width: 70px; padding: 0.25rem 0.4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); } .program-connector { position: absolute; display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-2xs); color: var(--muted); pointer-events: none; white-space: nowrap; z-index: 2; --program-connector-outline: var(--text-on-dark); } .program-connector::before { content: ""; position: absolute; background: var(--accent); border-radius: 999px; box-shadow: 0 0 0 2px var(--program-connector-outline); } .program-connector::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; filter: drop-shadow(1px 0 0 var(--program-connector-outline)) drop-shadow(-1px 0 0 var(--program-connector-outline)) drop-shadow(0 1px 0 var(--program-connector-outline)) drop-shadow(0 -1px 0 var(--program-connector-outline)) drop-shadow(1px 1px 0 var(--program-connector-outline)) drop-shadow(-1px -1px 0 var(--program-connector-outline)) drop-shadow(1px -1px 0 var(--program-connector-outline)) drop-shadow(-1px 1px 0 var(--program-connector-outline)); } .program-connector-btn { pointer-events: auto; border: 1px solid rgba(15, 23, 42, 0.2); background: var(--panel); color: var(--text-muted); font-weight: 600; font-size: var(--fs-2xs); padding: 0.2rem 0.45rem; border-radius: 999px; cursor: pointer; } .program-connector-btn:hover { color: var(--text); background: var(--border); } .program-connector-btn--insert { border-style: solid; border-color: #16a34a; background: #22c55e; color: var(--text-on-dark); width: 34px; height: 34px; font-size: var(--fs-lg); padding: 0; display: inline-flex; align-items: center; justify-content: center; } .program-connector-actions { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.35rem; pointer-events: auto; } .program-connector-actions .program-connector-btn { pointer-events: auto; } .program-connector-arrow { display: none; } .program-connector--right { top: 50%; right: calc(-1 * var(--program-gap-x)); width: var(--program-gap-x); height: var(--program-connector-thickness); transform: translateY(-50%); } .program-connector--left { top: 50%; left: calc(-1 * var(--program-gap-x)); width: var(--program-gap-x); height: var(--program-connector-thickness); transform: translateY(-50%); } .program-connector--down { left: 50%; bottom: calc(-1 * var(--program-gap-y)); width: var(--program-connector-thickness); height: var(--program-gap-y); transform: translateX(-50%); } .program-connector--right::before { left: calc(-1 * var(--program-connector-overlap)); top: 0; width: calc(var(--program-connector-length-x) + (var(--program-connector-overlap) * 2)); height: var(--program-connector-thickness); } .program-connector--right::after { right: calc(-1 * var(--program-connector-overlap)); top: 50%; transform: translateY(-50%); border-width: calc(var(--program-connector-thickness) * 1.2) 0 calc(var(--program-connector-thickness) * 1.2) calc(var(--program-connector-thickness) * 1.6); border-color: transparent transparent transparent var(--accent); } .program-connector--left::before { right: calc(-1 * var(--program-connector-overlap)); top: 0; width: calc(var(--program-connector-length-x) + (var(--program-connector-overlap) * 2)); height: var(--program-connector-thickness); } .program-connector--left::after { left: calc(-1 * var(--program-connector-overlap)); top: 50%; transform: translateY(-50%); border-width: calc(var(--program-connector-thickness) * 1.2) calc(var(--program-connector-thickness) * 1.6) calc(var(--program-connector-thickness) * 1.2) 0; border-color: transparent var(--accent) transparent transparent; } .program-connector--down::before { top: calc(-1 * var(--program-connector-overlap)); left: 0; width: var(--program-connector-thickness); height: calc(var(--program-connector-length-y) + (var(--program-connector-overlap) * 2)); } .program-connector--down::after { left: 50%; bottom: calc(-1 * var(--program-connector-overlap)); transform: translateX(-50%); border-width: calc(var(--program-connector-thickness) * 1.6) calc(var(--program-connector-thickness) * 1.2) 0 calc(var(--program-connector-thickness) * 1.2); border-color: var(--accent) transparent transparent transparent; } .program-mode-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); z-index: 20; pointer-events: none; } .program-mode-overlay.active { display: flex; pointer-events: auto; } .program-mode-panel { width: calc(100% - 2rem); max-width: none; max-height: min(84vh, calc(100% - 2rem)); max-height: min(84dvh, calc(100% - 2rem)); background: var(--card); border-radius: 18px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); padding: clamp(0.9rem, 2vw, 1.4rem); display: flex; flex-direction: column; gap: 0.8rem; overflow: hidden; } .program-mode-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .program-mode-title { font-weight: 700; font-size: var(--fs-lg); } .program-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(0.55rem, 0.9vw, 0.85rem); align-items: stretch; padding: 0; overflow: auto; } .program-mode-overlay .training-mode-btn { width: 100%; appearance: none; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; align-content: center; justify-items: start; column-gap: 0.7rem; row-gap: 0.32rem; padding: 1.15rem 2.8rem 1.15rem 0.95rem; min-height: clamp(150px, 14vw, 172px); height: 100%; border-radius: 8px; border: 1px solid var(--border); border-color: color-mix(in oklab, var(--border) 88%, var(--text) 12%); background: color-mix(in oklab, var(--card) 94%, var(--accent-secondary-soft) 6%); color: var(--text); font-weight: 700; cursor: pointer; text-align: left; box-shadow: var(--shadow-subtle); transform: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .program-mode-overlay .training-mode-btn .mode-icon { grid-column: 1; grid-row: 1 / span 2; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .program-mode-overlay .training-mode-btn .mode-icon--registry { border-radius: 8px; background: color-mix(in oklab, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); color: var(--accent-readable); font-size: 0.82rem; font-weight: 850; } .program-mode-overlay .training-mode-btn .mode-icon-img { max-width: 42px; max-height: 42px; object-fit: contain; } .program-mode-overlay .training-mode-btn .home-label { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; width: 100%; font-size: clamp(0.92rem, 0.98vw, 1.02rem); line-height: 1.15; color: var(--text); overflow-wrap: anywhere; } .program-mode-overlay .training-mode-btn .mode-description { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; width: 100%; color: var(--muted); font-size: clamp(0.74rem, 0.78vw, 0.84rem); line-height: 1.24; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .program-mode-overlay .training-mode-btn .preset-badge { position: absolute; top: 8px; right: 8px; } .program-mode-overlay .training-mode-btn:hover { transform: none; border-color: color-mix(in oklab, var(--mode-accent, var(--accent)) 50%, var(--border)); box-shadow: 0 8px 18px color-mix(in oklab, var(--mode-accent, var(--accent)) 18%, transparent); } .program-mode-overlay .training-mode-btn:active { transform: none; } .program-mode-overlay .training-mode-btn:focus-visible { outline: none; } .program-mode-item { appearance: none; border: 1px solid var(--border); background: var(--card); border-radius: 18px; padding: clamp(0.9rem, 1.6vw, 1.2rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; color: var(--text); cursor: pointer; text-align: center; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .program-mode-item:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14); } .program-mode-overlay .program-mode-item--pause { border-style: dashed; background: var(--card); color: var(--text-muted); } .program-mode-item--pause .mode-icon--pause { display: inline-flex; align-items: center; gap: 6px; } .program-mode-item--pause .mode-icon--pause .pause-bar { width: clamp(6px, 0.7vw, 10px); height: clamp(20px, 2.2vw, 30px); border-radius: 999px; background: var(--neutral-400); } .program-mode-label { font-size: var(--fs-md); } .program-palette-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } .program-palette-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.38rem 0.57rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-weight: 600; font-size: var(--fs-sm); width: 100%; } .program-arrow-btn { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font-weight: 700; font-size: var(--fs-sm); } .program-palette-item .program-arrow-btn { margin-left: auto; width: 28px; height: 28px; font-size: var(--fs-sm); } .program-sequence-list { display: flex; flex-direction: column; gap: 0.6rem; min-height: 64px; padding: 0.2rem; } .program-sequence-empty { color: var(--muted); font-weight: 600; padding: 0.4rem; } .program-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-weight: 600; font-size: var(--fs-sm); width: 100%; position: relative; } .program-step.pause { border-style: dashed; background: var(--card); color: var(--text-muted); } .program-palette-item[data-type="pause"] { background: var(--card); } .program-step-trials { position: static; transform: none; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em; opacity: 0.95; pointer-events: none; color: #D01C1F; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(15, 23, 42, 0.2); border-radius: 999px; padding: 0.12rem 0.5rem; white-space: nowrap; } body.theme-dark .program-step.pause { color: var(--text); } body.theme-dark .program-overlay .preset-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); } .program-step.is-dragging { opacity: 0.6; } .program-step.is-drop-target { outline: 3px dashed color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 2px; } .program-drop-indicator { width: 100%; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); margin: 2px 0; } .program-step .drag-handle { cursor: grab; font-size: var(--fs-md); line-height: 1; } .program-step-actions { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; } .program-step-duration { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(15, 23, 42, 0.22); border-radius: 999px; padding: 0.1rem 0.45rem; line-height: 1; white-space: nowrap; } body.theme-dark .program-step-duration { background: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.35); } .program-step input[type="number"] { width: 64px; padding: 0.25rem 0.35rem; border-radius: 6px; border: 1px solid var(--border); background: var(--card); } .program-footer { border-top: 1px solid var(--border); padding: 0.9rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; } .program-footer .save-feedback { text-align: center; } .program-warning { min-height: 0; width: 100%; max-width: 100%; align-self: stretch; color: #b45309; font-weight: 600; } .program-warning:empty { display: none; } .save-feedback { min-height: 0; width: 100%; max-width: 100%; align-self: stretch; font-weight: 700; color: #16a34a; margin-bottom: 0.2rem; } .save-feedback.is-error { color: #dc2626; } .save-feedback:empty { display: none; } .program-footer-actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .program-footer-actions .btn { --btn-h: clamp(42px, 4vw, 54px); padding: 0 clamp(1.6rem, 2.2vw, 2.6rem); font-size: var(--fs-md); font-weight: 700; } .program-color-grey { background: var(--panel); color: var(--text); border-color: transparent; } .program-color-lightblue { background: #FFD4A8; color: #D01C1F; border-color: transparent; } .program-color-blue { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; } .program-color-blue .program-step-meta, .program-color-blue .program-step-summary { color: var(--text-on-dark); } .preset-badge { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; color: var(--text-on-dark); } .preset-badge.preset-none { background: var(--neutral-400); } .preset-badge.preset-easy { background: #22c55e; } .preset-badge.preset-medium { background: #f59e0b; } .preset-badge.preset-hard { background: #ef4444; } .preset-badge.preset-adaptive { background: var(--accent); } @media (max-width: 1200px) { .program-sequence-grid { --program-sequence-columns-max: 2; --program-sequence-columns: var(--program-sequence-columns-max); --program-node-width-base: clamp(240px, 40vw, 320px); --program-node-width: calc(var(--program-node-width-base) * 0.91); --program-gap-x-min: clamp(20px, 5vw, 120px); --program-gap-x: var(--program-gap-x-min); --program-gap-y: clamp(2.8rem, 7vw, 4.8rem); } } @media (max-width: 900px) { .program-sequence-grid { --program-sequence-columns-max: 1; --program-sequence-columns: var(--program-sequence-columns-max); --program-node-width-base: 100%; --program-node-width: calc(var(--program-node-width-base) * 0.91); --program-gap-x-min: 0; --program-gap-x: 0; --program-gap-y: 2rem; justify-content: center; } } /* ========================================================================== H) GAME STAGE & HUD - Canvas layers, targets, metrics, mode toolbar ========================================================================== */ #gameArea { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg); z-index: 1; } #gameArea.active { cursor: crosshair; /* example state when running */ } .pause-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); z-index: 30; } body.theme-dark .pause-overlay { background: rgba(58, 58, 58, 0.92); } .pause-card { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 1.2rem 1.6rem; border-radius: 16px; border: 1px solid var(--border); background: var(--card); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } .pause-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .pause-note { margin: 0; max-width: 340px; text-align: center; font-size: var(--fs-sm); line-height: 1.4; color: var(--text); } .pause-skip-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem 0.55rem; margin: 0 0.15rem; border-radius: 0.4rem; background: var(--neutral-400); color: var(--text-on-dark); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; } .pause-donut { position: relative; width: 160px; height: 160px; display: grid; place-items: center; } .pause-ring { width: 160px; height: 160px; transform: rotate(-90deg); } .pause-ring-bg { fill: none; stroke: color-mix(in oklab, var(--border) 80%, transparent); stroke-width: 10; } .pause-ring-fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s linear; } .pause-time { position: absolute; font-size: var(--fs-2xl); font-weight: 700; color: var(--text); } /* Fixation & target elements */ #fixationDot { position: absolute; width: clamp(36px, 5.2vw, 60px); height: clamp(36px, 5.2vw, 60px); background-color: red; border-radius: 50%; border: 2px solid white; z-index: 10; opacity: 1; transition: opacity 0.3s ease; } #target { position: absolute; width: 2vw; height: 2vw; background-color: #D97833; border-radius: 50%; border: 2px solid white; z-index: 10; display: none; align-items: center; justify-content: center; color: white; font-size: var(--fs-2xs); } /* HUD text panel */ .metrics { position: absolute; top: 1rem; left: 1rem; background: rgba(0, 0, 0, 0.5); color: var(--text); padding: 0.5rem 0.75rem; border-radius: var(--radius, 6px); font-size: var(--fs-sm); z-index: 20; } .blue-dot { display: inline-block; width: 10px; height: 10px; background: #D97833; border-radius: 50%; margin-right: 0.25rem; } /* Mode toolbar (top-centered, fixed) */ .mode-button-bar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; width: calc(100% - 180px); /* leave breathing room near edges/corner buttons */ max-width: 1120px; z-index: 1050; background: transparent; padding: .2rem 0; border: none; border-radius: 0; box-shadow: none; } @media (min-width: 1400px) { .mode-button-bar { width: auto; max-width: none; } } .mode-group-row { display: inline-flex; flex-wrap: wrap; gap: .5rem .65rem; justify-content: center; width: fit-content; max-width: 100%; align-self: center; background: var(--card); backdrop-filter: blur(6px); padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 4px 10px var(--shadow); } .mode-group-row.is-wrapped { border-radius: 12px; } .mode-group-row .mode-btn { padding: .6rem 1.2rem; font-size: var(--fs-md); } .mode-group-panels { display: flex; flex-direction: column; gap: .4rem; width: 100%; align-items: center; } .mode-group-panel { display: none; flex-wrap: wrap; gap: .5rem .65rem; justify-content: center; background: var(--card); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 999px; padding: .45rem .6rem; max-width: 100%; align-self: center; box-shadow: 0 4px 10px var(--shadow); } .mode-group-panel.is-wrapped { border-radius: 12px; } .mode-group-panel.is-open { display: inline-flex; } #modeGroupPrograms { width: fit-content; margin: 0 auto; border-radius: 16px; } .program-button-list { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); align-items: stretch; justify-content: center; margin: 0; } body.programs-page .program-button-list { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.1vw, 0.9rem); align-items: stretch; } @media (max-width: 1100px) { .program-button-list { grid-template-columns: repeat(3, minmax(170px, 1fr)); } } @media (max-width: 860px) { .program-button-list { grid-template-columns: repeat(2, minmax(160px, 1fr)); } } @media (max-width: 540px) { .program-button-list { grid-template-columns: 1fr; } } .program-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; font-size: var(--fs-md); line-height: 1.1; cursor: pointer; transition: background .2s, color .2s, transform .1s, border-color .2s; } body.programs-page .program-btn { width: 100%; justify-content: flex-start; flex-wrap: nowrap; border-radius: 14px; padding: clamp(0.75rem, 1.3vw, 1rem) clamp(1rem, 1.6vw, 1.3rem); min-height: clamp(64px, 7.5vw, 90px); gap: clamp(0.6rem, 1.1vw, 0.95rem); font-size: var(--fs-md); } body.programs-page .program-btn .program-btn-icon { width: clamp(20px, 2.2vw, 30px); height: clamp(20px, 2.2vw, 30px); object-fit: contain; } body.programs-page .program-icon { width: clamp(26px, 2.4vw, 34px); height: clamp(26px, 2.4vw, 34px); font-size: var(--fs-sm); } body.programs-page .program-btn .home-label { flex: 1 1 auto; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.programs-page .program-btn.program-add-btn { justify-content: center; } .program-btn:hover { transform: translateY(-1px); } .program-btn:focus-visible { outline: none; } .program-btn.is-selected { outline: none; box-shadow: none; } .program-btn.is-global { background: #3f3f3f; color: var(--text-on-dark); border-color: transparent; } .program-btn.is-profile { color: var(--text-on-dark); border-color: transparent; } .program-btn-actions { display: inline-flex; gap: 0.4rem; } body.programs-page .program-btn-actions { margin-left: auto; flex: 0 0 auto; align-self: center; } .program-icon { width: 40px; height: 40px; font-size: var(--fs-lg); display: grid; place-items: center; border: 1px solid #dc2626; border-radius: 6px; background: #ef4444; color: var(--text-on-dark); cursor: pointer; } .program-icon:hover { background: #dc2626; } .mode-group-toggle { display: inline-flex; align-items: center; gap: 0.35rem; line-height: 1; } .mode-group-arrow { display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.8; pointer-events: none; } /* defaults */ .mode-btn { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; cursor: pointer; transition: background .2s, color .2s, transform .1s, outline-color .2s; } .mode-btn:not(.training-mode-btn):hover { background: var(--accent); color: var(--accent-contrast, #fff); } /* legacy colors */ .mode-btn.grey { background: var(--panel); color: var(--text); } .mode-btn.lightblue { background: #FFD4A8; color: #D01C1F; } .mode-btn.blue { background: #D01C1F; color: var(--text-on-dark); border-color: transparent; } .mode-btn.charcoal { background: #3f3f3f; color: var(--text-on-dark); border-color: transparent; } /* active: no selection outline */ .mode-btn.active { outline: none; } .mode-btn.blue.active { outline: none; } .mode-btn.charcoal.active { outline: none; box-shadow: none; } .training-page .mode-btn.active { outline: none; box-shadow: none; } .game-active .mode-button-bar, .game-active .title, .game-active .metrics, .game-active .author-text, .game-active .main-actions, .game-active #openProfilePanel, .game-active #settingsBtn, .game-active #hilfeBtn, .game-active #dataBtn, .game-active #instructionsBtn, .game-active #mainLogo { display: none; } /* Hide fixation marker while a game is running */ .game-active /* Hide the theme toggle pill while a game is active */ body.game-active .theme-toggle-bar { display: none !important; } html.app-root, body.app-root, html.game-active, body.game-active { overflow: hidden; height: 100%; overscroll-behavior: none; } /* ========================================================================== I) INSTRUCTION PANEL / WALKTHROUGH - Slide-in instructions, pagination dots, progress bars, arrows ========================================================================== */ /* Panel container */ .instruction-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(2px); display: none; z-index: 1000; } #instructionsPage { display: none; } body.instructions-page { overflow: hidden; font-size: var(--fs-lg); --instructions-tabs-w: clamp(180px, 22vw, 260px); --page-top-padding: var(--page-header-padding, 18px); } body.instructions-page #mainContent { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; } body.instructions-page #instructionsPage { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(10px, 1.6vw, 18px); background: var(--bg); padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: 100vh; height: 100svh; height: 100dvh; box-sizing: border-box; overflow: hidden; } body.instructions-page .instructions-page-header { display: grid; } body.instructions-page .instructions-page-header.page-header { padding: var(--page-header-pad-y) var(--page-header-padding); } .instructions-layout { display: grid; grid-template-columns: var(--instructions-tabs-w) minmax(0, 1fr); gap: clamp(12px, 2vw, 24px); min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: 100%; overflow: hidden; align-items: stretch; } .instructions-mode-tabs { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: 100%; } .instructions-mode-tabs button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: clamp(7px, 1vw, 14px) clamp(10px, 1.5vw, 18px); font-weight: 600; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .instructions-mode-tabs button.active { background: var(--accent); color: var(--accent-contrast, #fff); border-color: transparent; } #settingsModeTabs button.red, #settingsModeTabs button.blue, #settingsModeTabs button.yellow, #settingsModeTabs button.green, .instructions-mode-tabs button.red, .instructions-mode-tabs button.blue, .instructions-mode-tabs button.yellow, .instructions-mode-tabs button.green { --mode-accent: var(--accent); --mode-soft: color-mix(in oklab, var(--mode-accent) 10%, var(--card)); --mode-border: color-mix(in oklab, var(--mode-accent) 38%, var(--border)); background: var(--mode-soft); border-color: var(--mode-border); color: var(--text); box-shadow: var(--shadow-subtle); } #settingsModeTabs button.red, .instructions-mode-tabs button.red { --mode-accent: #D01C1F; } #settingsModeTabs button.blue, .instructions-mode-tabs button.blue { --mode-accent: #2563EB; } #settingsModeTabs button.yellow, .instructions-mode-tabs button.yellow { --mode-accent: #FBBF24; } #settingsModeTabs button.green, .instructions-mode-tabs button.green { --mode-accent: #16A34A; } #settingsModeTabs button.red.active, #settingsModeTabs button.blue.active, #settingsModeTabs button.yellow.active, #settingsModeTabs button.green.active, .instructions-mode-tabs button.red.active, .instructions-mode-tabs button.blue.active, .instructions-mode-tabs button.yellow.active, .instructions-mode-tabs button.green.active { background: color-mix(in oklab, var(--mode-accent) 24%, var(--card)); border-color: color-mix(in oklab, var(--mode-accent) 78%, var(--border)); color: var(--text); font-weight: 800; box-shadow: inset 4px 0 0 var(--mode-accent), 0 0 0 3px color-mix(in oklab, var(--mode-accent) 26%, transparent); } @media (hover: hover) and (pointer: fine) { #settingsModeTabs button.red:hover, #settingsModeTabs button.blue:hover, #settingsModeTabs button.yellow:hover, #settingsModeTabs button.green:hover, .instructions-mode-tabs button.red:hover, .instructions-mode-tabs button.blue:hover, .instructions-mode-tabs button.yellow:hover, .instructions-mode-tabs button.green:hover { border-color: color-mix(in oklab, var(--mode-accent) 50%, var(--border)); box-shadow: 0 8px 18px color-mix(in oklab, var(--mode-accent) 18%, transparent); } } .instructions-content-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: clamp(12px, 2vw, 20px); display: flex; flex-direction: column; gap: 1rem; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; height: 100%; } .instructions-mode-heading { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .instructions-mode-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .instructions-mode-badge { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; background: color-mix(in oklab, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); color: var(--accent-readable); font-size: 0.82rem; font-weight: 850; } .instructions-mode-badge.red, .instructions-mode-badge.blue, .instructions-mode-badge.yellow, .instructions-mode-badge.green { background: var(--mode-accent); border-color: transparent; color: var(--text-on-dark); } .instructions-mode-badge.red { --mode-accent: #D01C1F; } .instructions-mode-badge.blue { --mode-accent: #2563EB; } .instructions-mode-badge.yellow { --mode-accent: #FBBF24; color: #2F2A25; } .instructions-mode-badge.green { --mode-accent: #16A34A; } @media (max-width: 620px) { .instructions-mode-badge { width: 38px; height: 38px; flex-basis: 38px; } } .instructions-visual.mockup-screen { position: relative; width: min(840px, 100%); aspect-ratio: 16 / 9; min-height: 220px; max-height: 46vh; border: 5px solid var(--border); border-radius: 12px; background: var(--card); display: flex; align-items: center; justify-content: center; overflow: hidden; } .instructions-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(0.5rem, 1vw, 0.9rem); margin: clamp(0.25rem, 0.6vw, 0.6rem) 0 0.8rem; } .instructions-controls.is-hidden { display: none; } .instructions-control { width: clamp(44px, 4vw, 56px); height: clamp(44px, 4vw, 56px); display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08)); } .instructions-control img { width: 70%; height: 70%; object-fit: contain; } #instructionsVisual { grid-row: 2; flex: 0 0 auto; align-self: center; } .instructions-guide-details { display: grid; gap: clamp(0.8rem, 1.5vw, 1.1rem); } .instructions-guide-details[hidden] { display: none; } .instructions-guide-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.65rem, 1.2vw, 1rem); } .instructions-guide-card { min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: clamp(0.75rem, 1.3vw, 1rem); display: grid; gap: 0.35rem; align-content: start; } .instructions-guide-card-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .instructions-guide-card strong { font-size: var(--fs-sm); line-height: 1.45; font-weight: 700; color: var(--text); } .instructions-guide-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: clamp(0.85rem, 1.5vw, 1.2rem); } .instructions-guide-section h3 { margin: 0 0 0.7rem; font-size: var(--fs-lg); font-weight: 800; } .instructions-guide-steps, .cognitive-start-steps { margin: 0; padding: 0; list-style: none; counter-reset: guide-step; display: grid; gap: 0.55rem; } .instructions-guide-steps li, .cognitive-start-steps li { counter-increment: guide-step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.65rem; align-items: start; line-height: 1.45; color: var(--text); } .instructions-guide-steps li::before, .cognitive-start-steps li::before { content: counter(guide-step); width: 1.75rem; height: 1.75rem; border-radius: 999px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 900; font-size: var(--fs-xs); } .instructions-difficulty-section { display: grid; gap: 0.75rem; } .instructions-difficulty-note, .instructions-difficulty-adaptive { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; } .instructions-difficulty-list { display: grid; gap: 0.5rem; } .instructions-difficulty-item { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.65rem 0.75rem; border: 1px solid color-mix(in srgb, var(--border) 74%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--panel) 62%, transparent); } .instructions-difficulty-level { display: inline-flex; align-items: center; justify-content: center; min-height: 1.7rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: var(--fs-xs); font-weight: 900; white-space: nowrap; } .instructions-difficulty-text { color: var(--text); font-size: var(--fs-sm); line-height: 1.45; } .instructions-difficulty-adaptive { padding-top: 0.35rem; border-top: 1px solid var(--border); } .instructions-settings { display: flex; flex-direction: column; gap: 0.6rem; } .instructions-settings-title { margin: 0; font-size: var(--fs-lg); } .instructions-settings-list { margin: 0; background: transparent; border: 0; border-radius: 0; padding: 0; display: grid; gap: clamp(0.9rem, 1.6vw, 1.4rem); } .instructions-settings-group { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: clamp(0.8rem, 1.6vw, 1.2rem); display: grid; gap: 0.6rem; } body.theme-dark .instructions-settings-group { background: var(--panel); } .instructions-settings-group-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; } .instructions-settings-items { display: grid; gap: 0.4rem; } .instructions-setting-item { padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .instructions-setting-item:last-child { border-bottom: none; } .instructions-settings-list .setting-title { font-weight: 700; margin-bottom: 0.2rem; font-size: var(--fs-sm); } .instructions-settings-list .setting-body { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; } @media (max-width: 900px) { body.programs-page .program-overlay { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 0.65fr) minmax(0, 1fr); } body.programs-page .programs-sidebar { grid-column: 1; grid-row: 2; } body.programs-page .program-panel { grid-column: 1; grid-row: 3; } .instructions-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .instructions-mode-tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; height: auto; align-items: center; } .instructions-mode-tabs button { flex: 0 0 auto; white-space: nowrap; text-align: center; } .instructions-guide-facts { grid-template-columns: 1fr; } .instructions-difficulty-item { grid-template-columns: 1fr; gap: 0.45rem; } } @media (max-width: 1000px) { body.settings-page { overflow: auto; } body.settings-page .settings-overlay { padding: calc(var(--page-top-padding) + env(safe-area-inset-top)) 12px calc(var(--page-bottom-padding, 18px) + env(safe-area-inset-bottom)); height: auto; min-height: 100dvh; overflow: visible; } body.settings-page .settings-panel-centered { height: auto; min-height: 0; overflow: visible; } body.settings-page .settings-content { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); overflow: visible; } body.settings-page .save-settings-wrapper { padding: var(--page-actions-pad, 1rem) 12px calc(var(--page-actions-pad, 1rem) + env(safe-area-inset-bottom)); } body.settings-page .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 12px; overflow: visible; } body.settings-page .settings-mode-tabs, body.settings-page #settingsModeTabs { width: 100%; height: auto; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; } body.settings-page #settingsModeTabs button { flex: 0 0 auto; white-space: nowrap; } body.settings-page .settings-columns { grid-template-columns: 1fr; height: auto; overflow: visible; } body.settings-page .settings-column-left, body.settings-page .settings-column-right { height: auto; overflow: visible; } body.settings-page #settingsOverlay.help-open .settings-content { padding-right: 12px; } body.settings-page .settings-help-drawer { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); max-height: 45vh; width: auto; } } @media (max-width: 520px) { body.programs-page { overflow: auto; } body.programs-page .program-overlay { height: auto; min-height: 100dvh; overflow: visible; padding: calc(var(--page-top-padding) + env(safe-area-inset-top)) 12px calc(var(--page-bottom-padding, 18px) + env(safe-area-inset-bottom)); grid-template-rows: auto auto auto; } body.programs-page .programs-sidebar { height: auto; max-height: min(38vh, 320px); } body.programs-page .program-panel { height: auto; overflow: visible; } body.programs-page .program-body { overflow: visible; } body.programs-page .program-sequence, body.programs-page .program-sequence-grid { overflow: visible; } } .instruction-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 92vw); height: auto; max-height: calc(100vh - 12vh); background: var(--panel); z-index: 1200; display: none; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: auto auto; grid-template-areas: "prev content next" "dots dots dots"; gap: 1rem 1.25rem; padding: 1.5rem 1.75rem; border-radius: 16px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28); align-items: center; justify-items: center; overflow: hidden; } /* Instruction overlay mockup container */ #instructionPanel .mockup-screen { position: relative; width: 85%; max-width: 860px; aspect-ratio: 16 / 9; min-height: 280px; max-height: 44vh; border: 5px solid var(--border); border-radius: 12px; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; } .instruction-panel.active { display: grid; } /* Inner content */ .instruction-content { grid-area: content; width: 100%; height: 100%; text-align: center; font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-lg); color: var(--text); display: grid; grid-template-rows: auto auto auto; gap: 1rem; justify-items: center; align-content: start; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .instruction-text { margin: 0; font-size: var(--fs-xl); line-height: 1.5; color: var(--text); max-height: none; overflow: visible; } #screeningInstructionText { font-size: var(--fs-md); } .instruction-mode-label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); } .nav-arrow { width: 42px; height: 42px; cursor: pointer; position: static; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)); } .left-arrow { grid-area: prev; justify-self: end; } .right-arrow { grid-area: next; justify-self: start; } .instruction-close { position: absolute; top: 10px; right: 10px; background: transparent; border: none; font-size: var(--fs-2xl); line-height: 1; color: var(--muted); cursor: pointer; padding: 6px; } .instruction-close:hover { color: var(--text); } /* Pagination dots */ .pagination-dots { grid-area: dots; position: static; bottom: auto; left: auto; transform: none; display: flex; gap: 0.5rem; z-index: auto; } .pagination-dots .dot { width: 10px; height: 10px; background: var(--border-strong); border-radius: 50%; transition: background 0.3s ease; } .pagination-dots .dot.is-active, .pagination-dots .dot.active { /* keep .active for backward compat */ background: var(--accent); } /* Progress bars */ .progress-bar { position: fixed; /* relative to viewport */ width: 100vw; height: var(--progress-bar-height); background: var(--disabled-bg); z-index: 1001; overflow: hidden; display: none; /* shown by JS */ } .progress-bar.top-bar { top: 0; left: 0; } .progress-bar.bottom-bar { bottom: 0; left: 0; } .progress-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; } /* optional variant used by JS for duration animation */ .progress-fill.duration-fill { transition: width linear; } .progress-fill.grey { background: var(--text-muted); } /* Tick marks for trials under the bar */ .trial-increments { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; } .trial-increments .increment { flex: 1; border-right: 1px solid rgba(0, 0, 0, 0.2); } .trial-increments .increment:last-child { border-right: none; } /* ========================================================================== J) LOGIN SCREEN & SLIDER - Split layout, carousel pages, fixed nav bars and dots ========================================================================== */ /* Tabs above login/info panels */ .login-tabs { width: min(1200px, 94vw); margin: clamp(12px, 2.2vw, 22px) auto clamp(10px, 1.6vw, 18px); display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: center; } .login-pages { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vw, 22px); padding: clamp(16px, 2.2vw, 26px) 0 clamp(24px, 3vw, 36px); } .login-pages .info-panel { margin: 0; } .panel-separator { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; padding: clamp(6px, 1.2vw, 10px) 0; } .panel-separator span { width: 10px; height: 10px; border-radius: 999px; background: #D01C1F; } .login-tab { appearance: none; border: 1px solid rgba(15, 23, 42, 0.2); background: var(--card); color: var(--text); border-radius: 999px; padding: 0.55rem 1rem; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .login-tab:hover { transform: translateY(-1px); border-color: rgba(15, 23, 42, 0.35); } .login-tab.is-active { background: #D01C1F; color: var(--text-on-dark); border-color: #D01C1F; } .login-tab:focus-visible { outline: 3px solid rgba(15, 23, 42, 0.25); outline-offset: 2px; } .info-panel { width: min(1200px, 94vw); margin: 0 auto clamp(18px, 2.6vw, 28px); } .info-panel .info-card { width: 100%; } .info-panel .hero-pill, .info-panel .page-pill { font-size: var(--fs-sm); padding: 6px 12px; letter-spacing: 0.04em; } .info-card--login { padding: 0; background: var(--card); box-shadow: none; backdrop-filter: none; } .info-card--login .login-wrapper { width: 100%; margin: 0; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: auto; } .info-card--login .login-wrapper.welcome-open { min-height: clamp(560px, 80vh, 920px); } .info-card--login .login-wrapper.welcome-open .login-left { min-height: inherit; } .info-card--login .login-left { justify-content: flex-start; --login-center-top: clamp(8px, 2vh, 18px); --login-center-bottom: clamp(24px, 4vh, 48px); } .login-wrapper.welcome-open .login-center { visibility: hidden; pointer-events: none; } /* Full viewport split layout */ .login-wrapper { display: flex; flex-direction: row; align-items: stretch; gap: clamp(14px, 2vw, 28px); width: min(1200px, 94vw); min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: auto; margin: 0 auto; padding: clamp(16px, 2.5vw, 32px); font-size: var(--fs-md); font-family: 'Montserrat', sans-serif; border-radius: 28px; background: var(--card); box-shadow: none; overflow: hidden; position: relative; isolation: isolate; } /* Tab panel visibility */ .tab-panel { display: none; } .tab-panel.is-active { display: block; } .tab-panel--flex.is-active { display: flex; } .login-left { flex: 1 1 40%; background: transparent; padding: clamp(24px, 3vw, 42px); --login-center-top: clamp(16px, 6vh, 48px); --login-center-bottom: clamp(96px, 16vh, 160px); display: flex; flex-direction: column; align-items: stretch; justify-content: center; position: relative; /* anchors .form-panel in your CSS */ isolation: isolate; overflow: visible; border: none; border-radius: 0; box-shadow: none; outline: none; align-self: stretch; } .login-center { position: relative; margin: var(--login-center-top) 0 var(--login-center-bottom); flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; z-index: 2; overflow: visible; padding-bottom: clamp(8px, 2vh, 16px); } .login-left::before { display: none; } .login-left::after { display: none; } .login-left-card { display: contents; } .login-left-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .login-subtitle { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: 0.25rem; } .hero-note { margin-top: auto; padding: 14px 16px; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 16px; background: var(--card); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); display: flex; align-items: center; gap: 12px; } .hero-note h2 { color: #D01C1F; font-size: var(--fs-md); margin: 6px 0; } .hero-note p { color: var(--text-muted); margin: 0; line-height: 1.45; font-size: var(--fs-sm); } .hero-note .hero-pill { margin: 0; flex: 0 0 auto; max-width: 100%; white-space: nowrap; line-height: 1.3; text-align: left; word-break: normal; } .login-right { width: 100%; flex: 1 1 60%; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; display: flex; flex-direction: column; background: #D01C1F; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: clamp(8px, 1.5vw, 18px); position: relative; overflow: hidden; min-width: 0; padding: clamp(18px, 2.6vw, 32px); color: #f1f6ff; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); align-self: stretch; } .login-right::before, .login-right::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(1px); opacity: 0.6; } .login-right::before { width: 260px; height: 260px; background: none; top: -60px; right: -60px; } .login-right::after { width: 320px; height: 320px; background: none; bottom: -90px; left: -80px; } .right-hero { display: none; } .right-hero::after { content: ""; position: absolute; inset: 0; background: none; pointer-events: none; } .hero-copy h2 { color: #f7fbff; font-size: var(--fs-xl); line-height: 1.2; margin-bottom: 0.35rem; } .hero-copy p { color: rgba(241, 246, 255, 0.9); margin: 0.35rem 0 0.5rem; font-size: var(--fs-md); } .hero-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.12); color: #D01C1F; font-weight: 700; font-size: var(--fs-xl); letter-spacing: 0.02em; } .hero-visual { text-align: center; } .hero-visual img { width: min(440px, 100%); height: auto; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .nav-wrapper { display: none; } .info-card { width: 100%; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: 100%; max-height: 100%; flex: 1; display: flex; flex-direction: column; overflow: hidden; background: rgba(255, 255, 255, 0.92); color: var(--text); border-radius: 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(6px); overflow: hidden; padding: clamp(22px, 3vw, 32px); position: relative; transition: box-shadow 0.2s ease, transform 0.2s ease; display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; font-size: var(--fs-xl); } .info-card--stacked { max-width: none; } .info-card-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .info-card-header h2 { margin: 0; color: var(--text); } /* Branding title under logo */ .branding { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(0.4rem, 1.2vw, 0.85rem); flex-wrap: wrap; margin-bottom: 0.8rem; } .branding .login-logo { order: 2; margin: 0; } .branding .login-title { order: 1; } .login-title { font-weight: 700; font-size: var(--fs-2xl); color: var(--text); margin-top: 0; text-align: center; letter-spacing: 0.02em; } .login-page-title { margin: 0 0 1rem; font-size: var(--fs-xl); font-weight: 700; color: var(--text); text-align: center; } .login-test-notice { width: min(100%, 520px); margin: -0.45rem auto 0; padding: 0.8rem 0.95rem; border: 1px solid color-mix(in oklab, var(--accent) 44%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--accent) 10%, var(--card)); color: var(--accent-readable); font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; text-align: center; } .login-wrapper .login-logo { max-width: clamp(80px, 11vw, 130px); } .login-wrapper .hero-pill, .login-wrapper .page-pill { font-size: var(--fs-sm); padding: 6px 12px; letter-spacing: 0.04em; } /* Action links under the form */ .login-links { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; margin-top: 0.8rem; } #loginForm + .login-links { margin-top: 0.2rem; margin-bottom: 0.75rem; } .login-link-text { color: var(--accent); text-decoration: underline; font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-size: var(--fs-sm); } .login-link-text:hover { filter: brightness(0.9); } .login-link-text:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 35%, transparent); outline-offset: 2px; } .login-link-text--danger { color: #b63b41; } .link-btn { appearance: none; border: 1px solid rgba(15, 23, 42, 0.18); background: var(--panel); color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; padding: 0.4rem 0.95rem; border-radius: 999px; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .link-btn:hover { transform: translateY(-1px); background: var(--card); border-color: rgba(15, 23, 42, 0.35); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14); } .link-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.2), 0 10px 20px rgba(15, 23, 42, 0.12); } .link-btn--primary { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.28); } .link-btn--primary:hover { filter: brightness(1.05); } .link-btn--ghost { background: var(--card); } .link-btn--ghost:hover { background: var(--panel); } .link-btn--danger { background: #fff5f5; color: #b63b41; border-color: rgba(229, 72, 77, 0.35); } .link-btn--danger:hover { background: #ffe9ea; border-color: #e5484d; color: #a72f36; } body.theme-dark .link-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: var(--text); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); } body.theme-dark .link-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); } body.theme-dark .link-btn--primary { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; } body.theme-dark .link-btn--ghost { background: rgba(255, 255, 255, 0.06); } body.theme-dark .link-btn--danger { background: rgba(229, 72, 77, 0.16); color: #ffd2d4; border-color: rgba(229, 72, 77, 0.5); } .inline-links { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; justify-content: center; margin-top: 0.25rem; } .login-text.centered-text { text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; color: var(--muted); } /* Carousel wrapper & pages */ .page-container { position: relative; width: 100%; padding: clamp(14px, 2vw, 22px); overflow-y: auto; overflow-x: hidden; z-index: 1; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; padding-bottom: 36px; max-height: 100%; height: 100%; } .page-section p { margin-bottom: 0.95rem; line-height: 1.65; } .page-section p:last-child { margin-bottom: 0; } .page-section a { color: var(--accent); font-weight: 700; text-decoration: none; } .page-section a:hover { text-decoration: underline; } .page-section { display: none; } /* inactive */ .page-section.active { display: block; } /* active page */ .login-highlight-word { padding: 0.1rem 0.15rem; border-radius: 6px; transition: background .2s, color .2s; } .login-highlight-word.is-active { background: var(--accent); color: var(--text-on-dark); } /* Dots row (fixed at bottom of right half) */ .dots { position: static; transform: none; display: flex; gap: 10px; z-index: 2; } .dots span { width: 10px; height: 10px; background: var(--border-strong); border-radius: 50%; display: inline-block; transition: background 0.3s; } /* Active dot (supports both .is-active and legacy .active) */ .dots span.is-active, .dots span.active { background: var(--accent); } .page-pill { margin-bottom: 10px; font-size: var(--fs-xl); line-height: 1.05; } /* Force page-pill size on info pages (prevent inheriting larger hero-pill styles) */ .info-card .page-pill { font-size: var(--fs-lg) !important; line-height: 1.05; } .info-exercise-catalog { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: 1.2rem; } .info-exercise-loading { color: var(--muted); font-weight: 700; } .info-exercise-group { display: grid; gap: 0.85rem; } .info-exercise-group-title { margin: 0; color: var(--text); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.2; } .info-exercise-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; } .info-exercise-card { --mode-accent: var(--accent); display: grid; grid-template-columns: minmax(220px, 0.78fr) minmax(520px, 1.45fr); grid-template-rows: auto auto 1fr; align-items: start; gap: 0.85rem 1rem; min-width: 0; padding: clamp(0.8rem, 1.5vw, 1rem); border: 1px solid color-mix(in oklab, var(--mode-accent) 24%, var(--border)); border-left: 5px solid var(--mode-accent); border-radius: 0; background: transparent; } .info-exercise-card.red { --mode-accent: #D01C1F; } .info-exercise-card.blue { --mode-accent: #2563EB; } .info-exercise-card.yellow { --mode-accent: #FBBF24; } .info-exercise-card.green { --mode-accent: #16A34A; } .info-exercise-card-header { display: flex; align-items: center; gap: 0.65rem; min-width: 0; } .info-exercise-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: 8px; background: var(--mode-accent); color: var(--text-on-dark); font-size: 0.82rem; font-weight: 900; } .info-exercise-card.yellow .info-exercise-icon { color: #2F2A25; } .info-exercise-title-wrap { min-width: 0; } .info-exercise-title { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.15; } .info-exercise-focus { display: block; margin-top: 0.14rem; color: var(--muted); font-size: 0.82rem; font-weight: 800; line-height: 1.25; } .info-exercise-text { margin: 0; color: var(--text); font-size: 0.9rem; line-height: 1.45; } .info-exercise-guide-section { grid-column: 1; display: grid; gap: 0.55rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .info-exercise-guide-section h5 { margin: 0; color: var(--text); font-size: 0.8rem; font-weight: 900; } .info-exercise-guide-steps { gap: 0.42rem; } .info-exercise-guide-steps li { grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.48rem; font-size: 0.82rem; line-height: 1.35; } .info-exercise-guide-steps li::before { width: 1.35rem; height: 1.35rem; font-size: 0.68rem; } .info-exercise-demo { grid-column: 2; grid-row: 1 / span 3; min-height: clamp(300px, 30vw, 430px); aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 0; background: transparent; } .info-exercise-demo .cognitive-instruction-demo-container, .info-exercise-demo .cognitive-demo-screen { min-height: clamp(300px, 30vw, 430px); } .info-exercise-demo .cognitive-demo-screen, .info-exercise-demo .cognitive-demo-gamearea, .info-exercise-demo .cognitive-demo-screen .cognitive-stage { background: transparent; border-radius: 0; } .info-exercise-demo .cognitive-demo-screen .cognitive-asset-shell, .info-exercise-demo .cognitive-demo-screen .cognitive-rotation-figure { background: transparent; border-radius: 0; box-shadow: none; } .info-exercise-demo .cognitive-demo-actions { display: none; } .info-exercise-demo-loading, .info-exercise-demo-fallback { display: grid; place-items: center; width: 100%; height: 100%; min-height: clamp(300px, 30vw, 430px); color: var(--muted); font-weight: 800; } @media (max-width: 960px) { .info-exercise-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; } .info-exercise-guide-section { grid-column: auto; } .info-exercise-demo { grid-column: auto; grid-row: auto; width: 100%; max-width: 100%; min-width: 0; min-height: clamp(220px, 56vw, 300px); } .info-exercise-demo .cognitive-instruction-demo-container, .info-exercise-demo .cognitive-demo-screen, .info-exercise-demo-loading, .info-exercise-demo-fallback { min-height: clamp(220px, 56vw, 300px); } } .portrait-wrap { text-align: center; margin: 8px 0 12px; } .portrait-img { width: min(240px, 60%); height: auto; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); } .pager-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px 8px; flex-wrap: wrap; flex: 0 0 auto; } .pager-btn { border: 1px solid rgba(15, 23, 42, 0.18); background: var(--panel); color: var(--text); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; transition: background 0.2s ease, transform 0.1s ease; } .pager-btn:hover { background: var(--border); transform: translateY(-1px); } .pager-btn:active { transform: translateY(0); } /* Responsive tweaks */ @media (max-width: 1024px) { .login-wrapper { flex-direction: column; padding: clamp(14px, 2vw, 24px); gap: clamp(12px, 2vw, 20px); width: min(960px, 94vw); height: auto; font-size: var(--fs-md); } .login-left, .login-right { border-radius: 20px; min-height: auto; height: auto; } .login-left { z-index: 2; justify-content: flex-start; } .login-wrapper .login-center { position: static; transform: none; margin-bottom: 1rem; } .login-right { z-index: 1; padding: clamp(16px, 3vw, 28px); min-height: auto; max-height: none; } .info-card { border-radius: 20px; max-height: none; height: auto; font-size: var(--fs-lg); } } @media (max-width: 1024px) and (min-width: 769px) { .login-left.panel-open { justify-content: flex-start; } .login-left.panel-open #loginForm, .login-left.panel-open .login-links, .login-left.panel-open .hero-note { display: none; } .login-left.panel-open .form-panel { position: static; inset: auto; width: 100%; height: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; margin-top: clamp(12px, 2vw, 18px); } .login-left.panel-open .form-panel .login-form { width: min(600px, 100%); margin: 0 auto; } } @media (max-width: 1400px) { .login-wrapper { font-size: var(--fs-lg); } .hero-pill { font-size: var(--fs-lg); } .info-card { font-size: var(--fs-xl); } .login-logo { max-width: 130px; } } @media (max-width: 1700px) { .login-logo { max-width: 130px; } .hero-pill { font-size: var(--fs-2xs); } .info-card { font-size: var(--fs-lg); } .page-pill { font-size: var(--fs-lg); } } @media (min-width: 1920px) { .login-wrapper { width: min(1500px, 90vw); } } @media (min-width: 1025px) and (max-width: 1400px) { .login-wrapper { width: min(1320px, 96vw); } .login-left { flex: 1 1 40%; } .login-right { flex: 1 1 60%; } } /* Widescreen/aspect-ratio safeguard: scale down type instead of stretching at wide zooms */ @media (min-aspect-ratio: 16/9) { .login-wrapper { font-size: var(--fs-lg); max-height: 94vh; } .info-card { font-size: var(--fs-lg); } .hero-pill { font-size: var(--fs-sm); } .page-pill { font-size: var(--fs-md); } .login-logo { max-width: 120px; } } /* Compact layout for lower viewport heights (e.g., zoomed-in 150% around 1360x813) */ @media (max-height: 900px) { .login-wrapper { font-size: var(--fs-md); padding: clamp(12px, 2vw, 20px); max-height: none; } .login-left { padding: clamp(16px, 3vw, 26px); } .login-right { padding: clamp(14px, 2vw, 24px); } .info-card { font-size: var(--fs-lg); padding: clamp(16px, 2vw, 22px); } .hero-pill { font-size: var(--fs-2xs); } .info-card .page-pill { font-size: var(--fs-md) !important; } .login-logo { max-width: 110px; } .login-form { max-width: 380px; padding: 1.6rem; } .hero-note h2 { font-size: var(--fs-md); } .hero-note p { font-size: var(--fs-sm); } } @media (min-width: 1025px) and (max-width: 1400px) and (max-height: 1100px) and (orientation: landscape) { .login-wrapper { height: 100dvh; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; width: min(1320px, 96vw); gap: clamp(10px, 1.6vw, 22px); } .login-left, .login-right { min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .login-left { flex: 1 1 42%; padding: clamp(18px, 2.4vw, 32px); overflow-y: auto; } .login-right { flex: 1 1 58%; } .branding { flex-direction: column; gap: clamp(0.35rem, 1vw, 0.75rem); } .login-title { font-size: var(--fs-2xl); } .login-wrapper .login-logo { max-width: clamp(90px, 12vw, 140px); } } @media (max-height: 860px) and (orientation: landscape) { .login-center { margin: clamp(8px, 3vh, 18px) 0 clamp(24px, 6vh, 56px); justify-content: flex-start; } .login-wrapper .login-logo { max-width: clamp(90px, 12vw, 130px); } .login-title { font-size: var(--fs-2xl); } } @media (max-height: 820px) { .login-left { --login-center-top: clamp(8px, 2.5vh, 24px); --login-center-bottom: clamp(32px, 6vh, 80px); overflow-y: auto; overflow-x: hidden; } .login-center { justify-content: flex-start; } .form-panel { align-items: flex-start; justify-content: flex-start; overflow-y: auto; } } @media (max-width: 768px) { .login-wrapper { position: relative; } .login-left { z-index: 2; } .login-right { z-index: 1; } .login-left-card { width: min(520px, 100%); } .form-panel { position: fixed; inset: 0; height: 100dvh; max-height: 100dvh; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); align-items: flex-start; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 3000; } .form-panel .login-form { width: min(520px, 100%); margin: 0 auto; } #welcomePanel #welcomeFields { grid-template-columns: 1fr; } #welcomePanel .login-actions { gap: 0.75rem !important; flex-wrap: wrap; justify-content: center !important; width: 100%; } #welcomePanel .login-actions .login-btn { flex: 1 1 140px; max-width: 220px; } } @media (max-width: 640px) { .login-wrapper { width: 100%; border-radius: 0; padding: 12px 14px; box-shadow: none; } .login-left, .login-right { flex: 0 0 auto; } .login-wrapper .login-center { position: static; transform: none; margin-bottom: 1rem; } .login-wrapper .login-actions { flex-wrap: wrap; justify-content: center; } .login-wrapper .login-actions .login-btn { flex: 1 1 140px; max-width: 220px; } .login-left, .login-right, .info-card { border-radius: 16px; } .login-right { padding: 16px; } .login-form { padding: 1.4rem; } .hero-note { padding: 12px; } } @media (max-width: 420px) { .login-wrapper .login-actions .login-btn { flex: 1 1 100%; max-width: none; } } /* ========================================================================== K) HEADER ACTIONS (TOP/BOTTOM CONTROLS) - Settings, profile, data, logout ========================================================================== */ /* Base icon-only buttons */ button.icon-btn, .icon-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--card); /* same token as .theme-toggle-pill */ border: 1px solid var(--border); box-shadow: 0 6px 20px var(--shadow); cursor: pointer; z-index: 2001; transition: transform .12s, box-shadow .12s, background .12s; } button.icon-btn:hover, .icon-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--shadow); } button.icon-btn .icon, .icon-btn .icon { width: 60%; height: 60%; object-fit: contain; pointer-events: none; } /* positions (keep as-is) */ #logoutBtn.icon-btn { top: 1vh; left: 1vw; } #dataBtn.icon-btn { bottom: 1vh; left: 1vw; } #openProfilePanel.icon-btn { bottom: 1vh; right: 1vw; } #settingsBtn.icon-btn { top: 1vh; right: 1vw; } .logout-btn { position: absolute; top: 1vh; left: 1vw; z-index: 2001; color: #D01C1F; } .data-btn { position: absolute; bottom: 1vh; left: 1vw; z-index: 2001; color: #D01C1F; } /* Optional clusters (when grouping multiple buttons in corners) */ .controls-top-left, .controls-top-right, .controls-bottom-left, .controls-bottom-right { position: absolute; display: flex; gap: .5rem; } .controls-top-left { top: 1rem; left: 1rem; } .controls-top-right { top: 1rem; right: 1rem; } .controls-bottom-left { bottom: 1rem; left: 1rem; } .controls-bottom-right { bottom: 1rem; right: 1rem; } /* ====================================================================== K1) THEME TOGGLE (dark mode slider) + Hilfe on same pill ====================================================================== */ .theme-toggle-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); right: auto; width: auto; display: flex; justify-content: center; pointer-events: none; /* container stays click-through */ z-index: 9999; } .theme-toggle { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px; /* more padding inside pill */ background: var(--card); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s; } .theme-toggle-pill { pointer-events: auto; /* children are clickable */ display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px; min-width: 0; /* ensure enough width */ background: var(--card); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 6px 20px var(--shadow); } body.ui-overlay-open .theme-toggle-bar { z-index: 900; } body.ui-overlay-open .theme-toggle-pill { opacity: 0.35; filter: grayscale(1); pointer-events: none; } body.program-overlay-open .theme-toggle-pill { filter: grayscale(1) blur(2px); } body.ui-overlay-open .mode-button-bar { z-index: 900; } /* tiny divider between the slider and Hilfe */ .theme-toggle-divider { width: 1px; height: 20px; background: var(--border); opacity: .7; } .theme-toggle__input { position: absolute; opacity: 0; pointer-events: none; display: none; } .theme-toggle__icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; opacity: .6; transition: opacity .2s; } .theme-toggle__icon svg { width: 18px; height: 18px; fill: var(--text); } .theme-toggle__track { position: relative; width: 48px; height: 26px; background: var(--muted); border-radius: 999px; transition: background .2s; } .theme-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .22s, background .2s; } .theme-toggle__input:checked+.theme-toggle[role="switch"] .theme-toggle__thumb { transform: translateX(22px); } .theme-toggle__input:not(:checked)+.theme-toggle .theme-toggle__icon--sun { opacity: 1; } .theme-toggle__input:checked+.theme-toggle .theme-toggle__icon--moon { opacity: 1; } /* Style the Hilfe button as a pill and ensure it participates in layout */ .help-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; /* room for the text */ height: 32px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; /* prevent wrap */ cursor: pointer; transition: transform .1s, background .2s, color .2s, border-color .2s; } .help-btn:hover { background: var(--accent); color: var(--accent-contrast, #fff); border-color: var(--accent); } .pill-icon-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-height: 32px; padding: 0 0.65rem; gap: 0.45rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; cursor: pointer; transition: transform .1s, background .2s, border-color .2s; } .pill-icon-btn:hover { background: color-mix(in oklab, var(--accent) 12%, var(--card)); border-color: var(--accent); } /* Prevent hover lift on main screen controls so they don't jump after game end */ .theme-toggle-pill .pill-icon-btn:hover, .theme-toggle-pill .help-btn:hover, .main-actions .btn:hover, .profile-status-btn:hover { transform: none; } .pill-icon { width: 18px; height: 18px; object-fit: contain; pointer-events: none; } .pill-label { pointer-events: none; } /* compact tweak on very small screens */ @media (max-width: 480px) { .theme-toggle { gap: 8px; padding: 6px 8px; } .theme-toggle #hilfeBtn { width: 30px; height: 30px; } } /* ========================================================================== L) HELP OVERLAY - Onboarding arrows and labels ========================================================================== */ /* Fullscreen overlay behind help hints */ .hilfe-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); /* semi-transparent scrim */ z-index: 3000; display: none; /* toggled on when active */ } .hilfe-overlay.active { display: block; } /* Bubble labels */ .help-text { position: absolute; padding: 0.5rem 1rem; background: var(--panel); color: var(--text); border-radius: var(--radius, 8px); font-size: var(--fs-md); font-family: 'Montserrat', Arial, sans-serif; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 3100; } /* Arrows (base) */ .arrow { width: 0; height: 0; position: absolute; border-style: solid; z-index: 3101; } /* Arrow direction variants */ .arrow-up { border-width: 0 10px 10px 10px; border-color: transparent transparent white transparent; } .arrow-down { border-width: 10px 10px 0 10px; border-color: white transparent transparent transparent; } .arrow-left { border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } .arrow-right { border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white; } /* Target-specific placements (examples) */ .help-logout { bottom: 5.5rem; left: calc(50% - 170px); } .help-profile { top: 7.5rem; left: 50%; transform: translateX(-50%); } .help-data { bottom: 5.5rem; left: calc(50% + 130px); transform: translateX(-50%); } .help-settings { top: 12.5rem; left: 50%; transform: translateX(-50%); } .help-mode { position: absolute; /* or fixed, depending on use */ top: 5rem; /* keep vertical offset */ left: 50%; /* start at horizontal center */ transform: translateX(-50%); /* pull it back by half its own width */ } .help-toggle { position: absolute; /* or fixed, depending on use */ bottom: 5rem; /* keep vertical offset */ left: 50%; /* start at horizontal center */ transform: translateX(-50%); /* pull it back by half its own width */ } .help-instruction { position: absolute; /* or fixed, depending on use */ bottom: 25%; /* keep vertical offset */ left: 50%; /* start at horizontal center */ transform: translateX(-50%); /* pull it back by half its own width */ } /* ========================================================================== M) END-OF-GAME FEEDBACK - Compact summary card shown after max. Durchgänge ========================================================================== */ .end-feedback-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); z-index: 3200; padding: 1rem; } .end-feedback-overlay.program { background: rgba(0, 0, 0, 0.55); } .end-feedback-overlay.active { display: flex; } .end-feedback-overlay.prep { display: flex; } .end-feedback-overlay.prep .end-feedback-card { opacity: 0; visibility: hidden; } .end-feedback-card { width: min(560px, 96vw); background: var(--card); color: var(--text); border-radius: 14px; padding: 1.5rem; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 1rem; } .end-feedback-header { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; } .end-feedback-kicker { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; } .end-feedback-card h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--text); } .end-feedback-card .muted { color: var(--muted); font-size: var(--fs-sm); } .end-feedback-next { color: var(--text); font-size: var(--fs-sm); font-weight: 600; } .end-feedback-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; } .end-feedback-item { padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in oklab, var(--card) 90%, transparent); display: flex; flex-direction: column; gap: 0.2rem; } .end-feedback-item .label { font-size: var(--fs-sm); color: var(--muted); } .end-feedback-item .value { font-size: var(--fs-lg); font-weight: 700; color: var(--text); } .end-feedback-card .btn { align-self: center; min-width: 120px; } /* Program start panel (before each program step) */ .program-start-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); z-index: 2001; padding: 1rem; } body.theme-dark .program-start-overlay { background: rgba(17, 24, 39, 0.92); } .program-start-overlay.active { display: flex; } .program-start-card { width: min(560px, 96vw); background: var(--card); color: var(--text); border-radius: 14px; padding: 1.5rem; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; transform: translateY(clamp(-18px, -2vh, -10px)); } .program-start-card .btn { min-width: 140px; } .program-start-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .program-start-body { display: grid; gap: 0.85rem; justify-items: center; text-align: center; } .program-start-summary { margin: 0; color: var(--text); font-size: var(--fs-md); line-height: 1.45; text-align: left; align-self: stretch; } .program-start-details { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.45; max-width: 55ch; align-self: stretch; } .program-start-visual.mockup-screen { position: relative; width: min(840px, 100%); aspect-ratio: 16 / 9; min-height: 200px; max-height: 40vh; border: 5px solid var(--border); border-radius: 12px; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cognitive-start-overlay { z-index: 1300; align-items: center; padding-block: clamp(0.6rem, 1.5vh, 1rem); } .cognitive-start-overlay .program-start-card { width: min(1080px, 96vw); max-height: calc(100dvh - clamp(1.2rem, 3vh, 2rem)); padding: clamp(1rem, 1.8vh, 1.5rem); overflow-y: auto; align-items: stretch; text-align: left; gap: clamp(0.6rem, 1.2vh, 1rem); transform: translateY(clamp(-14px, -1.5vh, -8px)); } .cognitive-start-overlay .program-start-body { gap: clamp(0.55rem, 1.1vh, 0.85rem); justify-items: stretch; text-align: left; } .cognitive-start-overlay .program-start-card .btn { align-self: center; } .cognitive-start-overlay .program-start-actions { align-self: center; } .cognitive-start-overlay .program-start-visual.mockup-screen { width: min(1000px, 100%); min-height: clamp(300px, 46vh, 520px); max-height: min(58vh, 560px); } .program-start-visual.mockup-screen .cognitive-demo-progress { display: none; } .cognitive-start-visual { display: grid; place-items: center; } .cognitive-start-badge { width: clamp(74px, 9vw, 112px); height: clamp(74px, 9vw, 112px); display: grid; place-items: center; border-radius: 12px; background: var(--accent); color: var(--text-on-dark); font-weight: 900; font-size: clamp(1.2rem, 2.3vw, 2rem); letter-spacing: 0; } .cognitive-start-badge.red { background: #D01C1F; } .cognitive-start-badge.blue { background: #2563EB; } .cognitive-start-badge.yellow { background: #FBBF24; color: #2F2A25; } .cognitive-start-badge.green { background: #16A34A; } .cognitive-start-text { margin: 0; max-width: 48rem; color: var(--text); font-weight: 600; line-height: 1.45; } .cognitive-start-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(0.9rem, 2vw, 1.25rem); align-items: center; } .cognitive-start-copy { display: grid; gap: 0.45rem; min-width: 0; } .cognitive-start-kicker { color: var(--muted); font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; } .cognitive-start-goal { margin: 0; color: var(--accent); font-weight: 800; line-height: 1.35; } .cognitive-start-controls { justify-content: center; margin: clamp(0.25rem, 0.6vw, 0.6rem) 0 0.8rem; gap: 0.55rem; } .cognitive-start-control { width: clamp(40px, 4.4vw, 54px); height: clamp(40px, 4.4vw, 54px); border-radius: 10px; } .cognitive-start-steps { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: clamp(0.8rem, 1.5vw, 1rem); } .cognitive-start-notes { display: grid; gap: 0.45rem; background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 12px; padding: clamp(0.8rem, 1.4vw, 1rem); } .cognitive-start-notes p { margin: 0; line-height: 1.45; color: var(--text); } .cognitive-start-notes strong { color: var(--accent); } @media (max-width: 620px) { .cognitive-start-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; } } /* Screening instruction overlay */ .screening-instruction-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); z-index: 3200; padding: 1rem; } .screening-instruction-overlay.active { display: flex; } .screening-instruction-card { width: min(960px, 92vw); max-height: 90vh; background: var(--card); color: var(--text); border-radius: 20px; padding: clamp(1.2rem, 2.4vw, 1.8rem); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 1rem; text-align: left; overflow-y: auto; } .screening-instruction-header { display: flex; flex-direction: column; gap: 0.2rem; } .screening-instruction-title { font-size: var(--fs-xl); font-weight: 800; } .screening-instruction-meta { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; } .screening-instruction-visual { position: relative; width: min(760px, 100%); aspect-ratio: 16 / 9; min-height: 220px; max-height: 40vh; border: 5px solid var(--border); border-radius: 12px; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; margin: 0 auto; } .screening-instruction-card .btn { align-self: center; min-width: 160px; } @media (max-width: 520px) { .end-feedback-card { padding: 1.1rem; } .end-feedback-content { grid-template-columns: 1fr; } .end-feedback-card .btn { width: 100%; } } /* Medal celebration overlay */ .medal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); z-index: 3300; } .medal-overlay.active { display: flex; } .medal-card { background: var(--card); color: var(--text); border-radius: 14px; padding: 1.4rem 1.6rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); width: min(560px, 94vw); text-align: center; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; } .medal-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-sm); color: var(--text); margin: 0; } .medal-stage { position: relative; width: 220px; height: 220px; margin: 0 auto; } .medal-img { position: absolute; inset: 0; margin: auto; width: 150px; height: auto; opacity: 0; transform: scale(0.9); transition: opacity 0.5s ease, transform 0.5s ease; } .medal-img--old { transition: opacity 0.9s ease, transform 0.9s ease; } .medal-img--old.show { opacity: 0.9; transform: scale(1); } .medal-img--old.fade-out { opacity: 0; transform: scale(0.9) translateY(-10px); } .medal-img--new.show { opacity: 1; transform: scale(1.05); } .medal-img--new.pulse { animation: medal-pop 1s ease; } @keyframes medal-pop { 0% { transform: scale(0.4); opacity: 0; } 50% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* ========================================================================== UTILITIES (OPTIONAL) - Small one-line helpers: spacing, visibility, layout ========================================================================== */ .u-hidden { display: none !important; } .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .u-flex { display: flex !important; } .u-grid { display: grid !important; } .u-center { display: grid; place-items: center; } .u-gap { gap: var(--gap); } .u-gap-sm { gap: var(--gap-sm); } /* Compat: keep game area hidden until activated by JS */ #gameArea { display: none; background: transparent; } #gameArea.active { display: block; } /* === Settings overlay input styling (scoped) === */ #settingsOverlay .input-item input, #settingsOverlay .input-item select { width: min(240px, 100%); height: 38px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: 600 14px/1 'Montserrat', Arial, sans-serif; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } #settingsOverlay .input-item input.adaptive-highlight, #settingsOverlay .input-item select.adaptive-highlight { background: color-mix(in oklab, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent); } /* Focus ring */ #settingsOverlay .input-item input:focus, #settingsOverlay .input-item select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); } /* Disabled state */ #settingsOverlay .input-item input:disabled, #settingsOverlay .input-item select:disabled { opacity: .65; cursor: not-allowed; } /* Invalid state (when you validate) */ #settingsOverlay .input-item input:invalid { border-color: #e5484d; box-shadow: 0 0 0 3px color-mix(in oklab, #e5484d 20%, transparent); } #settingsOverlay .input-item input[type="number"]::-webkit-outer-spin-button, #settingsOverlay .input-item input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #settingsOverlay .input-item input[type="number"] { -moz-appearance: textfield; } #settingsOverlay .input-item select.input-select, #settingsOverlay .input-item select { appearance: auto; background-image: none; padding-right: 1rem; } /* Label row tidy-up (label + (?) stays tight; input below) */ #settingsOverlay .input-item > .bold { display: inline-flex; align-items: center; gap: .4em; margin-bottom: .35em; } #settingsOverlay .cognitive-settings-fields { display: grid; gap: 0.65rem; } #settingsOverlay .cognitive-settings-fields .setting-group { padding-left: 0; } #settingsOverlay .setting-hint { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.78rem; line-height: 1.35; } /* Make checkbox rows breathe a bit */ #settingsOverlay .checkbox-item.with-spacing { gap: .5rem; } /* Optional: unify very narrow numeric fields */ #settingsOverlay input[type="number"][step="0.1"], #settingsOverlay input[type="number"][min][max] { width: 100px; } /* ========================== Radio Overlay ========================== */ .radio-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 3200; backdrop-filter: blur(2px); } .radio-overlay.active { display: flex; } .radio-panel { width: min(560px, 96vw); max-height: calc(100vh - 3rem); background: var(--panel); color: var(--text); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 1.35rem 1.6rem; display: flex; flex-direction: column; gap: 1.25rem; overflow: hidden; --radio-chip-bg: color-mix(in oklab, var(--panel) 90%, transparent); --radio-chip-bg-hover: color-mix(in oklab, var(--panel) 82%, var(--accent) 12%); --radio-chip-border: var(--border); --radio-chip-highlight: var(--accent); --radio-chip-text: var(--text); --radio-slider-track: color-mix(in oklab, var(--panel) 65%, transparent); --radio-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,0.15)); } body.theme-dark .radio-panel { --radio-chip-bg: color-mix(in oklab, var(--panel) 88%, #000 12%); --radio-chip-bg-hover: color-mix(in oklab, var(--panel) 78%, var(--accent) 18%); --radio-chip-border: var(--border); --radio-chip-text: var(--text); --radio-slider-track: color-mix(in oklab, var(--panel) 60%, transparent); --radio-shadow: 0 2px 10px rgba(0,0,0,0.45); } .radio-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .radio-panel-body { display: flex; flex-direction: column; gap: 0.75rem; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .radio-station-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; } .radio-station-btn { border: 1px solid var(--radio-chip-border); background: var(--radio-chip-bg); border-radius: 12px; padding: 14px 16px; min-height: 54px; text-align: left; cursor: pointer; font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-md); color: var(--radio-chip-text); box-shadow: var(--radio-shadow); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .radio-station-btn:hover { background: var(--radio-chip-bg-hover); border-color: var(--radio-chip-highlight); box-shadow: 0 4px 12px var(--shadow, rgba(0,0,0,0.2)); } .radio-station-btn.active { background: var(--radio-chip-highlight); color: var(--text-on-dark); border-color: var(--radio-chip-highlight); box-shadow: 0 0 0 2px color-mix(in oklab, var(--radio-chip-highlight) 45%, transparent), 0 8px 18px var(--shadow, rgba(0,0,0,0.22)); } .radio-volume { display: flex; align-items: center; gap: 0.75rem; } .radio-volume input[type="range"] { --radio-slider-fill: 50%; flex: 1; height: 10px; border-radius: 999px; background: var(--radio-slider-track, rgba(15, 23, 42, 0.2)); outline: none; accent-color: var(--radio-chip-highlight, var(--accent)); -webkit-appearance: none; appearance: none; } .radio-volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 2px solid var(--radio-chip-highlight, var(--accent)); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .radio-volume input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 2px solid var(--radio-chip-highlight, var(--accent)); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .radio-volume input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: transparent; } .radio-volume input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: var(--radio-slider-track, rgba(15, 23, 42, 0.2)); } .radio-volume input[type="range"]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--radio-chip-highlight, var(--accent)); } .radio-switch { display: flex; align-items: center; } .switch-toggle__input { position: absolute; opacity: 0; pointer-events: none; } .switch-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .switch-toggle__track { position: relative; width: 48px; height: 26px; background: var(--muted); border-radius: 999px; transition: background .2s; } .switch-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .22s, background .2s; } .switch-toggle__input:checked + .switch-toggle .switch-toggle__track { background: var(--text); } #radioMasterToggle:checked + .switch-toggle .switch-toggle__track { background: #3DDA77; } .switch-toggle__input:checked + .switch-toggle .switch-toggle__thumb { transform: translateX(22px); } .switch-toggle__label { font-family: 'Montserrat', Arial, sans-serif; color: var(--text); } /* ====================================================================== L2) ONBOARDING MODAL + TOUR ====================================================================== */ .onboarding-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); z-index: 3300; padding: 1rem; } .onboarding-overlay.active { display: flex; } .onboarding-card { width: min(720px, 94vw); background: var(--card); color: var(--text); border-radius: 16px; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 0.75rem; position: relative; } .onboarding-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: var(--fs-xl); line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .onboarding-kicker { margin: 0; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .onboarding-lead, .onboarding-note { margin: 0; color: var(--muted); } .onboarding-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; } .onboarding-list strong { color: var(--text); } .onboarding-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; } .onboarding-tour { position: fixed; inset: 0; display: none; z-index: 3350; } .onboarding-tour.active { display: block; } .tour-spotlight { position: absolute; border-radius: 18px; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); transition: all 0.2s ease; pointer-events: none; } .tour-tooltip { position: absolute; width: min(360px, 92vw); background: var(--card); color: var(--text); border-radius: 14px; padding: 1rem; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 0.5rem; } .tour-kicker { font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .tour-title { margin: 0; font-size: var(--fs-lg); } .tour-body { margin: 0; color: var(--text); } .tour-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; } .tour-actions .tour-exit { margin-right: auto; } @media (max-width: 640px) { .onboarding-card { padding: 1.2rem; } .onboarding-actions { justify-content: center; } .onboarding-actions .btn { flex: 1 1 100%; } .tour-tooltip { width: min(360px, 94vw); } .tour-actions { justify-content: space-between; } } .settings-overlay.is-quick #settingsModeTabs, .settings-overlay.is-quick .settings-mode-tabs { display: none; } .settings-overlay.is-quick .settings-layout { grid-template-columns: 1fr; } .settings-overlay.is-quick .settings-page-header, .settings-overlay.is-quick #closeSettingsPanel { display: none; } .settings-overlay.is-quick .settings-panel-centered { width: min(860px, 92vw); height: min(72vh, 640px); max-height: min(72vh, 640px); } .settings-overlay.is-quick #saveSettingsAndBack { order: 1; } .settings-overlay.is-quick #saveSettings { order: 2; } /* ====================================================================== Login Menu Panel (2026 refresh) ====================================================================== */ .login-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 32px); background: var(--bg); } .login-panel { width: min(1400px, 96vw); height: min(92vh, 980px); background: var(--card); border-radius: 26px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15); display: flex; flex-direction: column; overflow: hidden; } .login-menu { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(14px, 2.4vw, 22px) clamp(12px, 2vw, 20px); min-height: clamp(56px, 7vh, 72px); background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .login-brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text); } .menu-logo { width: 60px; height: 42px; object-fit: contain; } .menu-title { font-size: var(--fs-lg); letter-spacing: 0.02em; } .menu-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; align-items: center; margin-left: auto; } .menu-btn { appearance: none; border: none; background: var(--panel); color: var(--text); border-radius: 999px; padding: 0.5rem 0.9rem; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .menu-btn:hover { transform: translateY(-1px); border-color: transparent; } .menu-btn.is-active { background: var(--accent); color: var(--text-on-dark); border-color: transparent; } .menu-btn:focus-visible { outline: none; } .menu-content { flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background: var(--card); } .menu-section { display: none; height: 100%; min-height: 100%; margin: 0; } .menu-section.is-active { display: flex; flex-direction: column; flex: 1; overflow-y: auto; } #section-login.is-active { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: clamp(16px, 2.6vw, 28px); } #section-info, #section-aboutme, #section-privacy { background: var(--card); padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 36px) clamp(32px, 4vw, 56px); } #section-account { background: var(--card); padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 36px) clamp(32px, 4vw, 56px); align-items: center; justify-content: flex-start; } #section-info .info-panel, #section-aboutme .info-panel, #section-privacy .info-panel { width: 100%; margin: 0; } #section-info .info-card, #section-aboutme .info-card, #section-privacy .info-card { flex: 0 0 auto !important; height: auto !important; max-height: none !important; overflow: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; backdrop-filter: none !important; } #section-login .login-area { width: 100%; max-width: 560px; margin: 0 auto; justify-content: center; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; padding-block: clamp(12px, 2vw, 20px); } .login-area { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.2rem); } .login-area .login-form { margin-left: auto; margin-right: auto; width: min(100%, 520px); } .login-area .login-divider { width: min(520px, 100%); } .login-area .login-actions--oauth { justify-content: center; } .login-area .login-links { width: min(520px, 100%); } .login-area.panel-open #loginForm, .login-area.panel-open .login-test-notice, .login-area.panel-open .login-links, .login-area.panel-open .login-divider, .login-area.panel-open .login-actions--oauth { display: none; } .menu-content .info-panel { width: 100%; margin: 0; } .menu-content .info-card { height: auto; max-height: none; background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; } .menu-content .page-container { height: auto; max-height: none; overflow: visible; padding: 0; } #section-account .form-panel { position: static; display: block; width: 100%; background: transparent; border-radius: 0; border: none; box-shadow: none; backdrop-filter: none; padding: 0; } #section-account .form-panel.active { display: block; } #section-account #welcomePanel { align-items: stretch; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; width: 100%; max-width: 980px; margin: 0 auto; gap: clamp(0.9rem, 2vw, 1.5rem); } #section-account #welcomePanel[aria-hidden="true"] { display: flex; } #section-account .account-area { display: flex; flex-direction: column; justify-content: center; min-height: 100%; width: 100%; flex: 1; } @media (max-width: 900px) { .login-panel { height: auto; max-height: none; } .menu-buttons { width: 100%; justify-content: flex-start; } } /* ========================================================================== END ========================================================================== */ /* === Training program button layout (stacked rows) === */ .training-programs .program-btn { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; } .training-programs .program-btn-lines { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: center; text-align: center; width: 100%; font-size: var(--fs-xs); } .training-programs .program-btn-line { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; } .training-programs .program-btn-line-separator { opacity: 0.7; } .training-programs .program-btn-line-title { font-weight: 700; } .training-programs .program-btn-line-meta { opacity: 0.7; } .training-programs .program-btn-line--empty { opacity: 0.7; font-weight: 600; } /* === Training section titles === */ .training-section-title, .training-programs-title { font-size: var(--fs-md); font-weight: 800; margin-bottom: 0.6rem; text-align: center; } .training-programs-title { margin-top: 0.1rem; } /* === Training inner white panels === */ .training-panel-surface { background: #ffffff; border: 1px solid color-mix(in oklab, var(--border) 80%, transparent); border-radius: 18px; padding: clamp(0.9rem, 1.8vw, 1.4rem); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; min-height: 0; width: 100%; overflow-y: auto; } .training-panel-surface .training-programs { flex: 1; min-height: 0; } /* === Screening summary spacing === */ .screening-summary-actions .screening-details-btn { margin-right: 1.4rem; } .screening-summary-pill { display: inline-block; max-width: 100%; min-width: 0; text-align: center; white-space: normal; line-height: 1.25; } /* === Dark mode panel surfaces (settings + training) === */ body.theme-dark .training-panel-surface, body.theme-dark .settings-column-left, body.theme-dark .settings-column-right { background: var(--card); } /* === Trainings page: flat grid (no columns), allow vertical overflow === */ #trainingModes { display: grid; --training-column-width: clamp(170px, 16vw, 270px); grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); align-items: start; justify-content: center; overflow-x: hidden; overflow-y: auto; } #trainingModes .training-column { display: contents; } #modeButtonBar { overflow-y: auto; } .training-layout { grid-template-columns: minmax(0, 1.15fr) minmax(240px, 320px); } .training-page .training-mode-btn { min-height: clamp(132px, 15vw, 176px); padding: clamp(1.1rem, 2.2vw, 1.7rem); } /* === Fixation dot: hidden by default (shown by JS when needed) === */ #fixationDot { display: none; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* === Settings overlay feedback layout: keep buttons below feedback === */ .save-settings-wrapper { flex-direction: column; flex-wrap: nowrap; align-items: center; } .save-settings-wrapper .program-footer-actions { width: 100%; justify-content: center; } /* === Welcome panel low-height containment === */ #section-account .account-area { position: relative; } @media (max-height: 1024px) { #section-account .account-area { justify-content: flex-start; } #section-account #welcomePanel { overflow-y: auto; max-height: 100%; } } /* === Delete account confirmation text readability === */ #deletePanel .delete-confirm-text { font-size: clamp(0.85rem, 2.4vw, 1rem); line-height: 1.4; text-align: center; font-style: italic; margin-top: 0.8rem; } /* === Training page: stack programs panel under deck on phones === */ @media (max-width: 700px) { .training-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; } .training-deck { order: 1; } .training-programs-panel { order: 2; } } /* === Welcome panel: loader while fields populate === */ #welcomeFields.is-loading { display: none; } .welcome-loader { --loader-track: color-mix(in oklab, var(--text) 25%, #ffffff 75%); --loader-accent: var(--accent); --loader-size: 64px; --loader-border: 6px; display: none; align-items: center; justify-content: center; padding: 0.75rem 0 1rem; } .welcome-loader.is-visible { display: flex; } .welcome-loader .loader { width: var(--loader-size); height: var(--loader-size); border-radius: 50%; position: relative; animation: pageLoaderRotate 1s linear infinite; } .welcome-loader .loader::before, .welcome-loader .loader::after { content: ""; box-sizing: border-box; position: absolute; inset: 0; border-radius: 50%; border: var(--loader-border) solid var(--loader-track); animation: pageLoaderClip 2s linear infinite; } .welcome-loader .loader::after { border-color: var(--loader-accent); border-top-color: transparent; } /* === Home grid: enforce 2 cols below 570px, 1 col below 380px === */ @media (max-width: 570px) { .home-grid, .home-grid.home-grid--has-profile, .home-grid.home-grid--no-profile { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } @media (max-width: 380px) { .home-grid, .home-grid.home-grid--has-profile, .home-grid.home-grid--no-profile { grid-template-columns: 1fr; } } /* === Welcome panel: avoid tall empty space on tablets === */ @media (max-width: 1024px) { #section-account .account-area { justify-content: flex-start; } } /* === Login/welcome scroll safety on short screens === */ @media (max-height: 820px) { .login-shell { align-items: flex-start; } .login-panel { height: min(92svh, 980px); } .menu-section.is-active { -webkit-overflow-scrolling: touch; } #section-login.is-active { align-items: flex-start; overflow-y: auto; } #section-login .login-area { padding-bottom: 24px; } #section-account { overflow-y: auto; } #section-account #welcomePanel { padding-bottom: 24px; } } /* === Settings content: remove padding === */ .settings-content, body.settings-page .settings-content, body.settings-page #settingsOverlay.help-open .settings-content { padding: 0; } /* === Profile: remove padding/margins for left + drawer === */ .profile-left, .profile-drawer, body.profile-page .profile-left, body.profile-page .profile-drawer, body.profile-page.profile-drawer-open .profile-left, body.profile-page.profile-drawer-open .profile-drawer { padding: 0; margin: 0; } /* === Profile list padding === */ .profile-list { padding: 12px; box-sizing: border-box; } /* === Profile header + drawer padding === */ .profile-header, .profile-drawer { padding: 12px; box-sizing: border-box; } /* === Programs actions bar: remove padding === */ body.programs-page .program-actions-bar { padding: 0; } /* === Profile drawer padding (override earlier resets) === */ .profile-drawer, body.profile-page .profile-drawer, body.profile-page.profile-drawer-open .profile-drawer { padding: 12px; box-sizing: border-box; } /* === Save settings wrapper: remove padding === */ .save-settings-wrapper, body.settings-page .save-settings-wrapper { padding: 0; } /* === Screening actions: remove padding === */ .screening-actions { padding: 0; } /* === Screening setup: allow grid to fill available height === */ #screeningSetup { flex: 1 1 auto; grid-template-rows: minmax(0, 1fr) auto; } /* === Training deck: normalize inner padding to 14px === */ .training-deck { padding: 14px; } /* === Training programs panel: normalize inner padding to 14px === */ .training-programs-panel { padding: 14px; } /* === Action buttons: force 60px height for screening + settings saves === */ #screeningStartBtn, body.screening-page #screeningStartBtn, #saveSettings, #saveSettingsAndBack, body.settings-page #saveSettings, body.settings-page #saveSettingsAndBack { --btn-h: 60px; } /* === Normalize page header gaps === */ .training-page, .screening-page { row-gap: var(--page-header-content-gap); } body.programs-page .program-overlay { row-gap: var(--page-header-content-gap); } body.instructions-page #instructionsPage { row-gap: var(--page-header-content-gap); } body.settings-page .settings-overlay { gap: var(--page-header-content-gap); } body.profile-page .profile-overlay { row-gap: var(--page-header-content-gap); } /* === Cookie banner (subtle corner) ==================================== */ .cookie-banner-overlay { position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 10050; opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .cookie-banner-overlay.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; } .cookie-banner-card { pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: min(520px, 92vw); background: color-mix(in oklab, var(--card) 94%, transparent); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); animation: cookieBannerIn 0.25s ease both; } .cookie-banner-toggle { border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; } .cookie-banner-toggle:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, #ffffff 40%); outline-offset: 3px; border-radius: 999px; } .cookie-banner-image { width: 56px; height: auto; opacity: 0.9; } .cookie-banner-content h2 { font-size: 1rem; margin-bottom: 0.2rem; } .cookie-banner-content { display: flex; flex-direction: column; } .cookie-banner-content p { color: var(--muted); font-size: var(--fs-xs); margin-bottom: 0.6rem; } .cookie-banner-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner-content a:hover { color: color-mix(in oklab, var(--accent) 80%, #ffffff 20%); } .cookie-banner-btn { align-self: center; border: none; border-radius: 999px; padding: 0.4rem 1rem; font-weight: 700; font-size: var(--fs-xs); background: var(--accent); color: var(--accent-contrast); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2); } .cookie-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.24); } .cookie-banner-btn:active { transform: translateY(0); } .cookie-banner-btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, #ffffff 40%); outline-offset: 2px; } @keyframes cookieBannerIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .cookie-banner-overlay.is-collapsed .cookie-banner-card { max-width: none; padding: 10px; gap: 0; border-radius: 999px; } .cookie-banner-overlay.is-collapsed .cookie-banner-content { display: none; } @media (max-width: 640px) { .cookie-banner-overlay { left: 12px; right: 12px; } .cookie-banner-card { max-width: 100%; } } /* Lock login menu height so content never overlaps it */ .login-menu { flex: 0 0 auto; } /* === Login menu collapse on narrow screens === */ .menu-toggle { display: none; appearance: none; border: 1px solid color-mix(in oklab, var(--accent, #D01C1F) 78%, #ffffff 22%); background: var(--accent, #D01C1F); color: var(--accent-contrast); width: 42px; height: 42px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; padding: 0; } .menu-toggle:hover { background: color-mix(in oklab, var(--accent, #D01C1F) 88%, #000000 12%); } .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .menu-toggle__bars { display: inline-flex; flex-direction: column; gap: 5px; } .menu-toggle__bar { width: 20px; height: 2px; background: currentColor; border-radius: 999px; } @media (max-width: 720px) { .login-menu { align-items: center; } .menu-buttons.is-collapsible { width: auto; margin-left: auto; justify-content: flex-end; align-items: center; gap: 0; } .menu-buttons.is-collapsible .menu-toggle { display: inline-flex; margin-left: 0; align-self: center; } .menu-buttons.is-collapsible .menu-btn { display: none; flex: 1 1 100%; width: 100%; border-radius: 12px; margin-top: 0.45rem; text-align: left; } .menu-buttons.is-collapsible.is-menu-open { width: 100%; margin-left: 0; justify-content: flex-start; align-items: stretch; } .menu-buttons.is-collapsible.is-menu-open .menu-toggle { margin-left: auto; } .menu-buttons.is-collapsible.is-menu-open .menu-btn { display: block; } } /* === Very short phone screens: keep login header + form reachable === */ @media (max-height: 760px) and (max-width: 900px) { .login-shell { align-items: flex-start; justify-content: flex-start; overflow-y: auto; padding: calc(8px + env(safe-area-inset-top)) 8px calc(10px + env(safe-area-inset-bottom)); } .login-panel { width: min(1400px, 100%); height: auto; max-height: none; min-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 14px; } .login-menu { padding: 10px 12px; min-height: 52px; } .menu-content { overflow-y: auto; } .menu-section.is-active { overflow-y: auto; -webkit-overflow-scrolling: touch; } #section-login.is-active { align-items: flex-start; justify-content: flex-start; overflow-y: auto; padding: 10px 12px 14px; } #section-login .login-area { padding-block: 6px 14px; gap: 0.6rem; } .login-page-title { margin: 0 0 0.35rem; line-height: 1.15; font-size: clamp(1.05rem, 4.2vw, 1.35rem); } } /* ========================================================================== Account Dashboard (post-login account area) ========================================================================== */ #section-account { box-sizing: border-box; min-height: 0; overflow: hidden; padding-bottom: clamp(14px, 2.2vw, 22px); } #section-account .account-area { min-height: 0; height: 100%; } #section-account .account-dashboard { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); width: 100%; min-height: 0; height: 100%; align-items: stretch; } #section-account .account-sidebar { background: color-mix(in oklab, var(--card, #ffffff) 88%, #dbe5f0 12%); border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); border-radius: 18px; padding: 0.8rem; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; height: 100%; max-height: 100%; overflow: hidden; } #section-account .account-sidebar-nav { display: flex; flex-direction: column; gap: 0.38rem; min-height: 0; overflow-y: auto; } #section-account .account-nav-item { width: 100%; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text, #1f2e3b); display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.62rem 0.7rem; font-size: clamp(0.9rem, 1vw, 0.97rem); font-weight: 600; text-align: left; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } #section-account .account-nav-item svg { flex: 0 0 auto; } #section-account .account-nav-item .account-nav-label { min-width: 0; } #section-account .account-nav-item .account-nav-badge { margin-left: auto; min-width: 1.2rem; height: 1.2rem; padding: 0 0.28rem; border-radius: 999px; background: #d43b31; color: #ffffff; font-size: 0.72rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 5px 12px rgba(212, 59, 49, 0.34); } #section-account .account-nav-item .account-nav-badge[hidden] { display: none; } #section-account .account-nav-item.has-notification { border-color: color-mix(in oklab, #d43b31 35%, #ffffff 65%); } #section-account .account-nav-item:hover { background: color-mix(in oklab, var(--accent, #D01C1F) 10%, #ffffff 90%); border-color: color-mix(in oklab, var(--accent, #D01C1F) 35%, #ffffff 65%); } #section-account .account-nav-item.is-active { background: color-mix(in oklab, var(--accent, #D01C1F) 18%, #ffffff 82%); border-color: color-mix(in oklab, var(--accent, #D01C1F) 56%, #ffffff 44%); color: var(--accent-readable); } #section-account .account-nav-item:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent, #D01C1F) 65%, #ffffff 35%); outline-offset: 2px; } #section-account .account-sidebar-footer { margin-top: 0; padding-top: 0.85rem; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 72%, #ffffff 28%); } #section-account .account-logout-btn { width: 100%; justify-content: center; } #section-account .account-main { background: transparent; border: 0; box-shadow: none; padding: clamp(0.45rem, 1.1vw, 0.85rem) 0 0; width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: clamp(0.8rem, 1.7vw, 1.2rem); min-height: 0; height: 100%; overflow: hidden; } #section-account .account-main:focus, #section-account .account-main:focus-visible { outline: none; } #section-account .account-header h2 { margin: 0; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.2; color: #102d45; } #section-account .account-header { display: flex; flex-direction: column; text-align: center; align-items: center; } #section-account .account-header[hidden] { display: none !important; } #section-account .account-header strong { font-weight: 800; } #section-account .account-header #welcomeUsernameHighlight { margin-left: 0.28em; } #section-account .account-subtitle { margin: 0.3rem 0 0; color: color-mix(in oklab, var(--text, #1f2e3b) 68%, #ffffff 32%); } #section-account #welcomePanel #welcomeFields { display: flex; flex-direction: column; gap: 0.95rem; width: 100%; max-width: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; background: transparent; border: 0; border-radius: 0; } #section-account #welcomePanel #welcomeFields.is-loading { display: none; } #section-account .account-fields { width: 100%; display: flex; flex-direction: column; gap: 0.95rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; } #section-account .account-bottom-actions { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 72%, #ffffff 28%); display: flex; justify-content: center; align-items: center; gap: 0.6rem; flex-wrap: wrap; flex: 0 0 auto; } #section-account .account-bottom-actions .login-btn { margin: 0; } #section-account .account-main.is-expired .account-bottom-actions { justify-content: center; flex-wrap: nowrap; } #section-account .account-main.is-expired .account-bottom-actions .login-btn { width: auto; flex: 0 0 auto; } #section-account .account-page { display: none; width: 100%; gap: 0.9rem; } #section-account .account-page.is-active { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); align-content: start; } #section-account .account-page[data-account-page-panel="kontakt"].is-active { display: block; min-height: 0; height: 100%; flex: 1 1 auto; } #section-account .account-card { width: 100%; max-width: 100%; box-sizing: border-box; background: #ffffff; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); border-radius: 16px; box-shadow: 0 10px 24px rgba(15, 33, 54, 0.08); padding: clamp(0.9rem, 1.8vw, 1.25rem); } #section-account .account-card-title { margin: 0 0 0.7rem; font-size: clamp(1rem, 1.4vw, 1.2rem); color: #D01C1F; } #section-account .account-subheading, #section-account .account-user-type-label { display: block; margin: 0 0 0.5rem; font-size: var(--fs-md); font-weight: 700; line-height: 1.3; color: var(--text, #1f2e3b); } #section-account #welcomeSecurityBlock { margin-top: 15px; } #section-account #welcomeSecurityBlock .welcome-security-actions { margin-top: 0; margin-bottom: 0; gap: 0.75rem; } #section-account .account-card--hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } #section-account .account-card-main { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } #section-account .account-status-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: #17643b; } #section-account .account-status-badge.is-inactive { color: #b42318; } #section-account .account-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #26b164; box-shadow: 0 0 0 5px rgba(38, 177, 100, 0.15); } #section-account .account-status-badge.is-inactive .account-status-dot { background: #d92d20; box-shadow: 0 0 0 5px rgba(217, 45, 32, 0.16); } #section-account .account-card-action { display: flex; align-items: center; } #section-account .account-primary-btn { background: #D01C1F; color: var(--accent-contrast); border: 1px solid transparent; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.22); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } #section-account .account-main .account-primary-btn:disabled, #section-account .account-main .account-primary-btn.is-disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); box-shadow: none; transform: none; cursor: not-allowed; pointer-events: none; } #section-account .account-primary-btn:hover { background: #0f2a3d; transform: translateY(-1px); box-shadow: 0 13px 24px rgba(15, 42, 61, 0.25); } #section-account .account-main .account-primary-btn:disabled:hover, #section-account .account-main .account-primary-btn.is-disabled:hover { background: var(--disabled-bg); box-shadow: none; transform: none; } #section-account .account-primary-btn:active { transform: translateY(0); } #section-account .account-card--support .help { margin: 0; line-height: 1.5; } #section-account .account-card--activity { display: flex; flex-direction: column; gap: 0.85rem; } #section-account .account-activity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; } #section-account .account-activity-head .account-card-title { margin: 0; } #section-account .account-activity-month { color: #476178; font-weight: 600; font-size: 0.9rem; } #section-account .account-activity-label { color: #476178; font-size: 0.79rem; font-weight: 600; } #section-account .account-activity-calendar-block { display: flex; flex-direction: column; gap: 0.5rem; } #section-account .account-activity-calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; font-size: 0.72rem; font-weight: 700; color: #5b6f82; text-align: center; } #section-account .account-activity-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; } #section-account .account-calendar-day { position: relative; min-height: 56px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 82%, #ffffff 18%); background: #f7fbff; color: #163a56; display: flex; align-items: flex-start; justify-content: flex-start; padding: 0.34rem 0.4rem; box-sizing: border-box; } #section-account .account-calendar-day.account-calendar-day--empty { border-style: dashed; border-color: color-mix(in oklab, var(--border, #d9e3ea) 65%, #ffffff 35%); background: #fbfdff; opacity: 0.55; } #section-account .account-calendar-day.is-login { background: color-mix(in oklab, var(--accent, #D01C1F) 22%, #ffffff 78%); border-color: color-mix(in oklab, var(--accent, #D01C1F) 52%, #ffffff 48%); } #section-account .account-calendar-day.is-today { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent, #D01C1F) 45%, #ffffff 55%) inset; } #section-account .account-calendar-day-number { font-size: 0.78rem; font-weight: 700; line-height: 1; } #section-account .account-calendar-day-check { position: absolute; right: 0.35rem; bottom: 0.3rem; display: inline-flex; align-items: center; justify-content: center; width: 1.22rem; height: 1.22rem; border-radius: 999px; background: #D01C1F; color: var(--accent-contrast); font-size: 0.84rem; font-weight: 700; } #section-account .account-activity-calendar-help { margin: 0; } #section-account .account-user-type-row { display: flex; flex-direction: column; gap: 0.75rem; } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row + .account-user-type-row { margin-top: 15px; padding-top: 0; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 76%, #ffffff 24%); } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--username, #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--security, #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--account-type { padding: 0; } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--security > .account-user-type-label, #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--account-type > .account-user-type-label { padding-top: 15px; } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row .field, #section-account .account-page[data-account-page-panel="einstellungen"] .welcome-security-actions { width: 100%; } #section-account .account-user-type-toggle { display: inline-flex; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); border-radius: 999px; padding: 0.2rem; background: #f4f7fb; width: fit-content; } #section-account .account-type-pill { border: 0; border-radius: 999px; background: transparent; color: #476178; font-weight: 700; padding: 0.35rem 0.75rem; cursor: default; } #section-account .account-type-pill.is-active { background: #D01C1F; color: var(--accent-contrast); } #section-account .account-contact-form textarea { min-height: 122px; resize: vertical; } #section-account .account-contact-layout { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 0.95rem; align-items: stretch; min-height: 0; height: 100%; overflow: hidden; } #section-account .account-contact-left { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.95rem; overflow: hidden; } #section-account .account-card--ticket-compose-trigger .login-actions { margin-top: 0.25rem; } #section-account .account-card--ticket-preview { min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; } #section-account .account-card--ticket-thread { min-height: 0; height: 100%; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; } #section-account .account-ticket-preview-list { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 3px; padding-bottom: 3px; } #section-account .account-ticket-preview-item { width: 100%; display: flex; align-items: center; gap: 0.55rem; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 78%, #ffffff 22%); background: #f8fbff; border-radius: 11px; padding: 0.55rem 0.65rem; text-align: left; color: #1f2e3b; font-weight: 600; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; } #section-account .account-ticket-preview-item:hover { border-color: color-mix(in oklab, var(--accent, #D01C1F) 45%, #ffffff 55%); background: var(--accent-soft); transform: translateY(-1px); } #section-account .account-ticket-preview-item.is-active { border-color: color-mix(in oklab, var(--accent, #D01C1F) 56%, #ffffff 44%); background: color-mix(in oklab, var(--accent, #D01C1F) 24%, #ffffff 76%); color: var(--accent-readable); } #section-account .account-ticket-preview-item.is-open { background: #ecfdf3; border-color: color-mix(in oklab, #16a34a 35%, #ffffff 65%); color: #166534; } #section-account .account-ticket-preview-item.is-open:hover { background: #dcfce7; border-color: #22c55e; } #section-account .account-ticket-preview-item.is-open.is-active { border-color: #16a34a; background: #bbf7d0; color: #14532d; } #section-account .account-ticket-preview-item.is-closed { background: #fef9c3; border-color: color-mix(in oklab, #d4a72c 45%, #ffffff 55%); color: #854d0e; } #section-account .account-ticket-preview-item.is-closed:hover { background: #fef08a; border-color: #ca8a04; } #section-account .account-ticket-preview-item.is-closed.is-active { border-color: #a16207; background: #fde047; color: #713f12; } #section-account .account-ticket-preview-title { display: block; flex: 1 1 auto; min-width: 0; line-height: 1.35; } #section-account .account-ticket-preview-lock { flex: 0 0 auto; margin-left: auto; font-size: 0.9rem; line-height: 1; color: currentColor; opacity: 0.95; } #section-account .account-ticket-thread-header { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; } #section-account .account-ticket-thread-headline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; } #section-account .account-ticket-thread-header .account-card-title { margin: 0; } #section-account .account-ticket-thread--detail { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); border-radius: 12px; background: #f8fafd; padding: 0.7rem; } #section-account .account-contact-form--ticket-compose { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; } #section-account #accountContactSubject { margin-bottom: 15px; } #section-account .account-contact-form--ticket-compose .field { display: flex; flex-direction: column; } #section-account .account-contact-form--ticket-compose .field:last-of-type { flex: 1 1 auto; min-height: 0; } #section-account #accountContactMessage { flex: 1 1 auto; min-height: clamp(140px, 28vh, 420px); } #section-account .account-contact-form--ticket-compose .login-actions { margin-top: auto; padding-top: 0.75rem; } #section-account .account-contact-form--ticket-compose[aria-hidden="true"] { display: none; } #section-account .account-ticket-reply-form { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); } #section-account .account-ticket-reply-form[aria-hidden="true"] { display: none; } #section-account .account-ticket-reply-form textarea { min-height: 110px; resize: vertical; } #section-account .account-ticket-list { display: flex; flex-direction: column; gap: 0.7rem; } #section-account .account-ticket-item { border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); background: #f8fafd; border-radius: 12px; padding: 0.7rem; } #section-account .account-ticket-header { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.55rem; } #section-account .account-ticket-title-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; } #section-account .account-ticket-status { font-size: 0.78rem; font-weight: 700; padding: 0.08rem 0.5rem; border-radius: 999px; } #section-account .account-ticket-status.is-open { background: #d8f6e4; color: #166534; } #section-account .account-ticket-status.is-closed { background: #e5e7eb; color: #374151; } #section-account .account-ticket-meta { color: #6b7280; font-size: 0.78rem; } #section-account .account-ticket-thread { display: flex; flex-direction: column; gap: 0.42rem; } #section-account .account-ticket-message { border-radius: 10px; padding: 0.5rem 0.6rem; } #section-account .account-ticket-message.is-user { background: #eaf3ff; } #section-account .account-ticket-message.is-admin { background: #ecfdf3; } #section-account .account-ticket-message-meta { font-size: 0.75rem; color: #64748b; margin-bottom: 0.2rem; } #section-account .account-ticket-message-body { color: #1e293b; line-height: 1.42; } #section-account .account-progress-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (max-width: 960px) { #section-account { overflow-y: auto; } #section-account .account-area, #section-account .account-dashboard, #section-account .account-main { height: auto; } #section-account .account-fields { overflow: visible; padding-right: 0; } #section-account .account-dashboard { grid-template-columns: 1fr; } #section-account .account-contact-layout { grid-template-columns: 1fr; height: auto; overflow: visible; } #section-account .account-page[data-account-page-panel="kontakt"].is-active { height: auto; flex: 0 0 auto; } #section-account .account-contact-left { grid-template-rows: auto auto; overflow: visible; } #section-account .account-card--ticket-preview { height: auto; } #section-account .account-ticket-preview-list { max-height: 220px; min-height: 0; flex: 0 0 auto; } #section-account .account-card--ticket-thread { min-height: 0; height: auto; } #section-account .account-ticket-thread--detail { max-height: 320px; min-height: 160px; } #section-account .account-sidebar { min-height: 0; } #section-account .account-sidebar-nav { width: 100%; } #section-account .account-nav-item { justify-content: flex-start; } } @media (max-width: 700px) { #section-account .account-sidebar { padding: 0.7rem; border-radius: 14px; } #section-account .account-sidebar-nav { gap: 0.5rem; } #section-account .account-nav-item { width: 100%; } #section-account .account-card--hero { flex-direction: column; align-items: flex-start; } #section-account .account-card-action { width: 100%; } #section-account .account-primary-btn { width: 100%; } #section-account .account-calendar-day { min-height: 48px; padding: 0.26rem 0.32rem; } #section-account .account-calendar-day-check { width: 1.05rem; height: 1.05rem; font-size: 0.74rem; } #section-account .account-bottom-actions { justify-content: center; } #section-account .account-bottom-actions .login-btn { width: auto; flex: 0 0 auto; } #section-account .account-main.is-expired .account-bottom-actions { justify-content: center; } #section-account .account-main.is-expired .account-bottom-actions .login-btn, #section-account .account-main.is-expired .account-primary-btn { width: auto; } } /* ========================================================================== N) DESIGN-SYSTEM KONSOLIDIERUNG - Ruhige, grosse App-Bedienung auf Basis der Login-/Index-Sprache ========================================================================== */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); } :where(button, input, select, textarea) { font-family: 'Montserrat', Arial, sans-serif; } .btn, .login-btn, button.btn, button.login-btn { min-height: var(--target-size); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; } .btn--primary, .login-btn--primary, #loginBtn { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; } .btn--ghost, .login-btn--ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); } .btn--ghost:hover, .login-btn--ghost:hover { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); color: var(--accent-soft-contrast); } /* Login page colour trial: PANTONE 18-1664 TCX Fiery Red web approximation */ body.login-public { --accent: #D01C1F; --accent-secondary: #FFB56B; --accent-secondary-soft: #FFF3E8; --accent-contrast: #FFFFFF; --accent-readable: #A91518; --accent-soft-contrast: #A91518; --accent-soft: #FCEDED; --focus-ring: 0 0 0 4px rgba(15, 23, 42, 0.32); } body.login-public .login-panel { box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 12px 32px rgba(15, 23, 42, 0.18); } body.login-public .login-form input, body.login-public .login-form select, body.login-public .login-form textarea { border-color: rgba(15, 23, 42, 0.22); } body.login-public .login-form input:focus, body.login-public .login-form select:focus, body.login-public .login-form textarea:focus { box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.2); } body.login-public .login-form:focus-within { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18); } body.login-public .login-btn--primary, body.login-public #loginBtn, body.login-public .menu-btn.is-active, body.login-public .menu-toggle, body.login-public .cookie-banner-btn { background: var(--accent); color: var(--accent-contrast); } body.login-public .login-btn--primary, body.login-public #loginBtn { box-shadow: 0 12px 24px rgba(15, 23, 42, 0.26); } body.login-public .login-btn--lightblue, body.login-public .login-link-text, body.login-public .cookie-banner-content a { color: #A91518; } body.login-public .login-btn--lightblue { background: var(--accent-secondary-soft); border-color: var(--accent-secondary); color: #A91518; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18); } body.login-public .login-btn--ghost { border-color: rgba(15, 23, 42, 0.5); } body.login-public .cookie-banner-btn { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22); } body.login-public .cookie-banner-btn:hover { box-shadow: 0 10px 20px rgba(15, 23, 42, 0.28); } input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea { min-height: var(--target-size); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: var(--fs-sm); } .page-header { width: 100%; border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent); } .page-header .page-title { letter-spacing: 0; color: var(--text); } .page-back { min-width: var(--target-size); } .top-level-close { display: none !important; } .settings-panel-centered, .profile-overlay, .program-overlay, .instructions-page, .training-panel-surface, .screening-panel { border-radius: var(--radius-lg); } .settings-panel-centered, .training-panel-surface, .screening-panel, .program-panel, .profile-main { box-shadow: var(--shadow-subtle); } .feedback-msg, .settings-save-feedback, .program-warning, .home-status-note { border-radius: var(--radius-sm); } .home-page { justify-content: flex-start; align-items: stretch; gap: var(--space-6); padding: max(20px, env(safe-area-inset-top)) min(4vw, 42px) max(20px, env(safe-area-inset-bottom)); background: var(--bg); } .home-hero, .home-grid.home-actions, .home-footer { width: min(1120px, 100%); margin-inline: auto; } .home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: var(--space-6); align-items: center; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-soft); } .home-brand { display: flex; align-items: center; gap: var(--space-4); min-width: 0; text-align: left; } .home-brand .logo { flex: 0 0 auto; width: 76px; height: 76px; margin: 0; } .home-title { margin: 0; font-size: var(--fs-2xl); line-height: 1.08; letter-spacing: 0; } .home-subtitle { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-md); line-height: 1.45; } .home-primary-action { min-height: 168px; width: 100%; align-items: flex-start; text-align: left; padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24); } .home-primary-action .home-icon { width: 54px; height: 54px; } .home-primary-action .home-label { font-size: var(--fs-xl); line-height: 1.15; } .home-primary-action .home-sub { font-size: var(--fs-sm); line-height: 1.35; } .home-status-note { grid-column: 1 / -1; display: inline-flex; align-items: center; min-height: var(--target-size); margin: 0; padding: 0.65rem 0.85rem; border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border)); border-style: dashed; background: color-mix(in oklab, var(--accent) 8%, var(--card)); color: var(--text); font-size: var(--fs-sm); font-weight: 700; text-align: left; } .home-status-note.is-warning { border-color: color-mix(in oklab, var(--accent) 22%, var(--border)); background: color-mix(in oklab, var(--accent) 8%, var(--card)); color: var(--text); } .home-grid.home-actions, .home-grid.home-actions.home-grid--has-profile, .home-grid.home-actions.home-grid--no-profile { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.75fr) minmax(0, 1fr); align-items: stretch; gap: var(--space-5); } .home-action-group { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); } .home-action-group__title { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0; text-align: left; } .home-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .home-action-group:nth-of-type(2) .home-action-grid { grid-template-columns: 1fr; } .home-tile, .home-page .profile-status-btn { min-height: 128px; border-radius: var(--radius-md); border-color: var(--border); box-shadow: var(--shadow-subtle); transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .home-tile:hover, .home-page .profile-status-btn:hover { transform: none; border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-soft); } .home-tile:focus-visible, .home-page .profile-status-btn:focus-visible { box-shadow: var(--focus-ring); } .home-tile--compact { min-height: 88px; width: 100%; border-radius: var(--radius-md); justify-content: center; } .home-icon { width: 42px; height: 42px; } .home-label { font-size: var(--fs-sm); line-height: 1.2; overflow-wrap: anywhere; } .home-sub { line-height: 1.35; } .profile-status-btn.has-profile { border-color: color-mix(in oklab, var(--profile-color, var(--accent)) 55%, var(--border)); } .home-footer { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); text-align: left; } .home-footer-copy { display: flex; flex-direction: column; gap: 0.15rem; } .home-account-action { min-height: var(--target-size); width: auto; flex-direction: row; padding: 0.65rem 0.9rem; border-radius: var(--radius-md); gap: var(--space-2); box-shadow: none; background: transparent; } .home-account-action .home-icon { width: 22px; height: 22px; } .program-step-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); width: 100%; margin-top: var(--space-2); } .program-step-title-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; } .program-step-card .drag-handle { flex: 0 0 var(--target-size); width: var(--target-size); height: var(--target-size); min-height: var(--target-size); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: grab; font-size: var(--fs-md); font-weight: 800; line-height: 1; } .program-step-card .drag-handle:active { cursor: grabbing; } .program-step-card.is-dragging { opacity: 0.62; } .program-step-card.is-drop-target { outline: 3px dashed color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 2px; } .program-step-controls .program-step-action-btn { position: static; min-height: var(--target-size); width: 100%; height: auto; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 800; } .program-step-controls .program-step-action-btn:disabled { opacity: 0.45; cursor: not-allowed; } .program-step-remove { min-width: var(--target-size); min-height: var(--target-size); } .program-connector-btn--insert, .program-add-slot { min-height: var(--target-size); } body.theme-dark .home-hero, body.theme-dark .home-action-group { background: var(--card); border-color: var(--border); } body.theme-dark .home-status-note.is-warning { background: color-mix(in oklab, var(--accent) 14%, var(--card)); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); color: var(--text); } @media (max-width: 980px) { .home-hero, .home-grid.home-actions, .home-grid.home-actions.home-grid--has-profile, .home-grid.home-actions.home-grid--no-profile { grid-template-columns: 1fr; } .home-primary-action { min-height: 140px; } } @media (max-width: 640px) { .home-page { padding-inline: var(--space-4); } .home-hero { padding: var(--space-4); } .home-brand { align-items: flex-start; } .home-brand .logo { width: 58px; height: 58px; } .home-title { font-size: var(--fs-xl); } .home-action-grid { grid-template-columns: 1fr; } .home-footer { flex-direction: column; align-items: stretch; } .home-account-action { justify-content: center; width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } } /* Classic home layout: keeps the earlier main-page look with the newer system rules. */ .home-page { justify-content: center; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); padding: var(--page-top-padding) var(--page-header-padding); } .home-page > .home-grid, .home-toggle-row { width: min(1100px, 100%); } .home-page > .home-grid { display: grid; gap: clamp(0.8rem, 1.6vw, 1.3rem); grid-template-columns: repeat(3, minmax(180px, 1fr)); } .home-page > .home-grid.home-grid--has-profile { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .home-page > .home-grid.home-grid--no-profile { grid-template-columns: repeat(4, minmax(180px, 1fr)); } .home-page .home-tile { min-height: 150px; width: auto; flex-direction: column; padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: 20px; text-align: center; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); } .home-page .home-tile--compact { min-height: auto; width: auto; flex-direction: row; padding: 0.6rem 1.4rem; border-radius: 999px; } .home-page .home-tile--compact .home-icon { width: 22px; height: 22px; } .home-page .home-icon { width: clamp(36px, 4vw, 46px); height: clamp(36px, 4vw, 46px); } .home-page #homeTrainBtn { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .home-page #homeTrainBtn .home-label, .home-page #homeTrainBtn .home-sub { color: var(--accent-contrast); } .home-page #homeTrainBtn .home-icon { width: clamp(48px, 5vw, 58px); height: clamp(48px, 5vw, 58px); } .home-page .home-label { font-size: var(--fs-md); } .home-page .profile-status-btn { min-height: 150px; border-radius: 20px; } .home-toggle-row .profile-status-btn, .home-toggle-row #logoutBtn { min-height: auto; width: auto; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.4rem; border-radius: 999px; } .home-toggle-row .profile-status-btn .profile-status-text { display: none; } .home-toggle-row .profile-status-btn .profile-status-color { position: static; width: 12px; height: 12px; border-width: 1px; } .home-toggle-row .profile-status-btn.has-profile { outline: none; } .home-status-note--classic { width: min(1100px, 100%); justify-content: center; min-height: 44px; padding: 0.5rem 0.75rem; font-size: var(--fs-xs); text-align: center; } .home-footer { width: auto; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; text-align: center; } @media (max-width: 1100px) { .home-page > .home-grid, .home-page > .home-grid.home-grid--has-profile { grid-template-columns: repeat(3, minmax(170px, 1fr)); } .home-page > .home-grid.home-grid--no-profile { grid-template-columns: repeat(4, minmax(170px, 1fr)); } } @media (max-width: 860px) { .home-page { justify-content: flex-start; padding-top: calc(var(--page-header-padding) + env(safe-area-inset-top)); } .home-page > .home-grid, .home-page > .home-grid.home-grid--has-profile, .home-page > .home-grid.home-grid--no-profile { grid-template-columns: repeat(2, minmax(160px, 1fr)); } } @media (max-width: 540px) { .home-page > .home-grid, .home-page > .home-grid.home-grid--has-profile, .home-page > .home-grid.home-grid--no-profile { grid-template-columns: 1fr; } } .training-page .mode-group-panel { border-radius: 14px; padding: clamp(0.7rem, 1vw, 1rem); width: 100%; display: none; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: color-mix(in oklab, var(--card) 88%, transparent); } .training-page .mode-group-panel.is-open { display: grid; } .training-page .training-mode-btn .mode-description { display: block; max-width: 100%; color: var(--muted); font-size: clamp(0.72rem, 0.76vw, 0.85rem); font-weight: 500; line-height: 1.25; } .training-page .training-mode-btn .mode-icon--registry { width: clamp(42px, 4vw, 56px); height: clamp(42px, 4vw, 56px); border-radius: 12px; background: color-mix(in oklab, var(--accent) 15%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); color: var(--accent); font-size: clamp(0.85rem, 1vw, 1rem); font-weight: 800; letter-spacing: 0; } .cognitive-stage { --cognitive-fixation-align-offset: clamp(-2.5rem, -4vh, -1.4rem); position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 2.2vw, 2rem); padding: clamp(5.8rem, 12vh, 8rem) clamp(1rem, 3vw, 3rem) clamp(1rem, 3vw, 3rem); color: var(--text); text-align: center; background: color-mix(in oklab, var(--bg) 86%, transparent); } .cognitive-persistent-header { position: absolute; top: clamp(1rem, 3vh, 2rem); left: 50%; transform: translateX(-50%); z-index: 34; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: min(780px, 92vw); padding: 0; color: var(--text); text-align: center; pointer-events: none; background: transparent; border: 0; box-shadow: none; } .cognitive-persistent-title { font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 800; line-height: 1.12; } .cognitive-persistent-hint { max-width: min(780px, 92vw); color: var(--muted); font-size: clamp(0.9rem, 1.05vw, 1.1rem); font-weight: 500; line-height: 1.35; } .cognitive-persistent-hint--vigil, .cognitive-persistent-hint--speed { color: var(--text); font-size: clamp(1.1rem, 1.7vw, 1.65rem); font-weight: 800; line-height: 1.1; } .cognitive-header { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; max-width: min(780px, 92vw); } .cognitive-title { font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 800; } .cognitive-hint { color: var(--muted); font-size: clamp(0.9rem, 1.05vw, 1.1rem); line-height: 1.35; } @media (max-width: 720px) { .cognitive-stage { padding-top: clamp(6.2rem, 15vh, 8.5rem); } .cognitive-persistent-header { top: clamp(0.9rem, 2.4vh, 1.4rem); width: min(92vw, 640px); } } .cognitive-input-state { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--muted); font-size: clamp(0.82rem, 0.92vw, 0.98rem); font-weight: 800; } .cognitive-stage.is-input-ready .cognitive-input-state { border-color: color-mix(in oklab, #16a34a 58%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); color: var(--text); } .cognitive-stage.is-trial-correct .cognitive-input-state { border-color: color-mix(in oklab, #16a34a 72%, var(--border)); background: color-mix(in oklab, #16a34a 18%, var(--card)); } .cognitive-stage.is-trial-error .cognitive-input-state { border-color: color-mix(in oklab, #dc2626 66%, var(--border)); background: color-mix(in oklab, #dc2626 14%, var(--card)); } .cognitive-trial-feedback { position: absolute; left: 50%; top: calc(50% + clamp(76px, 13vw, 150px)); z-index: 24; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0.32rem 0.72rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--text); font-size: clamp(0.86rem, 0.95vw, 1rem); font-weight: 800; line-height: 1.15; pointer-events: none; white-space: nowrap; } .cognitive-stage--simple .cognitive-trial-feedback, .cognitive-stage--gonogo .cognitive-trial-feedback { top: calc(50% + clamp(82px, 14vw, 165px)); } .cognitive-stage--rotation .cognitive-trial-feedback { top: calc(50% + clamp(150px, 21vw, 260px)); } .cognitive-stage--grid .cognitive-trial-feedback, .cognitive-stage--corsi .cognitive-trial-feedback, .cognitive-stage--construct .cognitive-trial-feedback, .cognitive-stage--space3 .cognitive-trial-feedback { top: calc(50% + clamp(150px, 24vw, 250px)); } .cognitive-trial-feedback.is-positive { border-color: color-mix(in oklab, #16a34a 62%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); } .cognitive-trial-feedback.is-negative { border-color: color-mix(in oklab, #dc2626 62%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); } .cognitive-stage.is-input-locked .cognitive-response-btn, .cognitive-stage.is-input-locked .cognitive-grid-cell:not(.is-highlighted):not(.is-selected):not(.is-entered) { opacity: 0.58; } .cognitive-stage.is-input-ready .cognitive-response-btn, .cognitive-stage.is-input-ready .cognitive-grid-cell:not(.is-empty) { opacity: 1; } .cognitive-stage.is-input-ready .cognitive-grid-cell:not(.is-empty), .cognitive-stage.is-input-ready .cognitive-response-btn { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 22%, transparent), 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-rule-guide { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; width: min(780px, 94vw); } .cognitive-rule-guide--stacked { flex-direction: column; align-items: stretch; flex-wrap: nowrap; width: min(520px, 94vw); } .cognitive-rule-guide-item { display: flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--muted); font-size: clamp(0.78rem, 0.9vw, 0.95rem); line-height: 1.2; } .cognitive-rule-guide-symbol { width: 1.85rem; height: 1.85rem; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text); font-weight: 900; } .cognitive-rule-guide-item strong { color: var(--text); } .cognitive-rule-guide-img { width: 2rem; height: 2rem; object-fit: contain; } .cognitive-rule-guide-content { display: inline-flex; align-items: center; gap: 0.28rem; flex-wrap: wrap; } .cognitive-rule-guide-inline-img { width: 1.75rem; height: 1.75rem; object-fit: contain; vertical-align: middle; } .cognitive-rule-guide-inline-img.is-arrow { width: 2.25rem; height: 2.25rem; } .cognitive-inline-token { --inline-token-color: #2563eb; width: 1.85rem; height: 1.35rem; display: inline-block; flex: 0 0 auto; vertical-align: middle; background: var(--inline-token-color); border: 1px solid rgba(15, 23, 42, 0.22); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26); } .cognitive-inline-token.is-blue { --inline-token-color: #2563eb; } .cognitive-inline-token.is-orange { --inline-token-color: #f97316; } .cognitive-inline-token--shape { width: 1.55rem; height: 1.55rem; border-color: rgba(15, 23, 42, 0.28); background: #111827; } .cognitive-inline-token--shape.is-circle { border-radius: 50%; } .cognitive-inline-token--shape.is-triangle { clip-path: polygon(50% 5%, 95% 92%, 5% 92%); border-radius: 0; } .cognitive-rule-guide-item.is-active { border-color: color-mix(in oklab, var(--primary) 58%, var(--border)); background: color-mix(in oklab, var(--primary) 12%, var(--card)); color: var(--text); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } .cognitive-stage--flex-animal { --flex-rule-active: #dc2626; gap: clamp(1.6rem, 4vh, 3rem); } .cognitive-stage--flex-animal .cognitive-rule-sequence { margin-bottom: clamp(0.45rem, 1.4vh, 1rem); } .cognitive-stage--flex-animal .cognitive-rule-guide { margin-bottom: clamp(0.85rem, 2.4vh, 1.8rem); } .cognitive-stage--flex-animal .cognitive-response-row { margin-top: clamp(0.8rem, 2.2vh, 1.6rem); } .cognitive-stage--flex-animal .cognitive-rule-guide-item { justify-content: flex-start; min-height: 48px; } .cognitive-stage--flex-animal .cognitive-rule-guide-item.is-active { border-color: var(--flex-rule-active); background: var(--flex-rule-active); color: #fff; box-shadow: 0 12px 24px rgba(220, 38, 38, 0.2); } .cognitive-stage--flex-animal .cognitive-rule-guide-item.is-active strong, .cognitive-stage--flex-animal .cognitive-rule-guide-item.is-active .cognitive-rule-guide-symbol { color: #fff; } .cognitive-stage--flex-animal .cognitive-rule-guide-item.is-active .cognitive-rule-guide-symbol { background: rgba(255, 255, 255, 0.18); } .cognitive-stage--flex { --flex-rule-active: #dc2626; gap: clamp(1rem, 2.8vh, 2rem); } .cognitive-stage--flex .cognitive-rule-guide { width: min(760px, 94vw); } .cognitive-stage--flex .cognitive-rule-guide--stacked { width: min(520px, 94vw); } .cognitive-stage--flex .cognitive-rule-guide-item { min-width: min(300px, 92vw); justify-content: flex-start; } .cognitive-stage--flex .cognitive-rule-guide-item.is-active { border-color: var(--flex-rule-active); background: var(--flex-rule-active); color: #fff; box-shadow: 0 12px 24px rgba(220, 38, 38, 0.2); } .cognitive-stage--flex .cognitive-rule-guide-item.is-active strong, .cognitive-stage--flex .cognitive-rule-guide-item.is-active .cognitive-rule-guide-symbol { color: #fff; } .cognitive-stage--flex .cognitive-rule-guide-item.is-active .cognitive-rule-guide-symbol { background: rgba(255, 255, 255, 0.18); } .cognitive-stage--flex .cognitive-rule-guide-item.is-switch-blink { animation: cognitiveFlexRuleSwitchBlink 460ms ease-out 1; } @keyframes cognitiveFlexRuleSwitchBlink { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.58), 0 12px 24px rgba(220, 38, 38, 0.18); } 38% { transform: scale(1.025); box-shadow: 0 0 0 7px rgba(220, 38, 38, 0.24), 0 16px 30px rgba(220, 38, 38, 0.3); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0), 0 12px 24px rgba(220, 38, 38, 0.2); } } .cognitive-stage--flex .cognitive-target { width: min(760px, 94vw); min-height: clamp(190px, 28vw, 330px); justify-items: center; } .cognitive-flex-window-board { width: min(720px, 94vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 2vw, 1.2rem); } .cognitive-flex-window { min-height: clamp(170px, 24vw, 280px); display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; gap: clamp(0.55rem, 1.2vw, 0.85rem); padding: clamp(0.65rem, 1.6vw, 1rem); border: 2px solid color-mix(in oklab, var(--border) 82%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--card) 86%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 14px 30px rgba(15, 23, 42, 0.1); } .cognitive-flex-window.is-active { border-color: color-mix(in oklab, var(--primary) 70%, var(--border)); background: color-mix(in oklab, var(--primary) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 22%, transparent), 0 18px 34px rgba(15, 23, 42, 0.14); } .cognitive-flex-window-rule { color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 900; line-height: 1.15; text-align: center; } .cognitive-flex-window-rule { color: var(--text); } .cognitive-flex-window-slot { min-height: clamp(118px, 17vw, 204px); display: grid; place-items: center; gap: 0.45rem; } .cognitive-flex-object { --flex-object-color: #2563eb; width: clamp(70px, 11vw, 132px); height: clamp(70px, 11vw, 132px); background: var(--flex-object-color); box-shadow: 0 14px 24px rgba(15, 23, 42, 0.18); } .cognitive-flex-object.is-blue { --flex-object-color: #2563eb; } .cognitive-flex-object.is-orange { --flex-object-color: #f97316; } .cognitive-flex-object--circle { border-radius: 50%; } .cognitive-flex-object--triangle { clip-path: polygon(50% 6%, 94% 92%, 6% 92%); } .cognitive-stage--flex .cognitive-response-btn { min-width: clamp(170px, 20vw, 240px); } .cognitive-stage--flex .cognitive-response-btn.has-content-rows { display: inline-flex; flex-direction: column; gap: 0.38rem; min-height: 96px; padding-block: 0.75rem; } @media (max-width: 640px) { .cognitive-flex-window-board { grid-template-columns: 1fr; } .cognitive-flex-window { min-height: 145px; } } .cognitive-rule-sequence { width: min(620px, 94vw); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); } .cognitive-rule-sequence-track { display: grid; grid-template-columns: repeat(15, clamp(26px, 4vw, 42px)); justify-content: center; align-items: center; gap: clamp(0.18rem, 0.6vw, 0.4rem); } .cognitive-rule-sequence-item { height: clamp(26px, 4vw, 42px); display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in oklab, var(--card) 90%, transparent); color: var(--muted); font-weight: 900; font-size: clamp(0.8rem, 1.2vw, 1rem); line-height: 1; transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease; } .cognitive-rule-sequence-item.is-current { border-color: var(--flex-rule-active, #dc2626); background: var(--flex-rule-active, #dc2626); color: #fff; transform: scale(1.14); box-shadow: 0 10px 22px rgba(220, 38, 38, 0.2); } .cognitive-rule-sequence-item.is-past:not(.is-current) { opacity: 0.55; } .cognitive-rule-sequence-item.is-empty { opacity: 0; } .cognitive-target { min-height: clamp(110px, 18vw, 220px); display: grid; place-items: center; font-weight: 800; transform: translateY(var(--cognitive-fixation-align-offset)); } .cognitive-stage--vigilance { --cognitive-vigil-symbol-size: clamp(165px, 24vmin, 300px); justify-content: center; padding: 0 clamp(1rem, 3vw, 3rem); } .cognitive-stage--vigilance .cognitive-target { min-height: var(--cognitive-vigil-symbol-size); transform: none; } .cognitive-stage--vigilance .cognitive-asset-shell--plain { width: var(--cognitive-vigil-symbol-size); height: var(--cognitive-vigil-symbol-size); } .cognitive-stage--vigilance .cognitive-asset-img { filter: drop-shadow(0 16px 26px rgba(15, 23, 42, 0.16)); } .cognitive-vigil-target-guide, .cognitive-speed-target-guide { display: inline-flex; align-items: center; justify-content: center; gap: clamp(0.45rem, 1vw, 0.8rem); max-width: min(92vw, 560px); color: var(--text); font-size: inherit; font-weight: inherit; line-height: 1.2; text-align: center; pointer-events: none; } .cognitive-vigil-target-label, .cognitive-speed-target-label { font-weight: 900; } .cognitive-vigil-target-image-slot, .cognitive-speed-target-image-slot { width: clamp(56px, 8vmin, 92px); height: clamp(56px, 8vmin, 92px); display: inline-grid; place-items: center; flex: 0 0 auto; } .cognitive-speed-target-image-slot { width: clamp(48px, 7vmin, 78px); height: clamp(48px, 7vmin, 78px); } .cognitive-vigil-target-img, .cognitive-speed-target-img { width: 100%; height: 100%; object-fit: contain; display: block; } .cognitive-target--auditory-only { visibility: hidden; } .cognitive-stage--grid > .cognitive-grid, .cognitive-stage--sequence > .cognitive-sequence-display, .cognitive-stage--departure-board > .departure-board, .cognitive-stage--corsi > .cognitive-grid { transform: translateY(var(--cognitive-fixation-align-offset)); } .cognitive-asset-shell { position: relative; width: var(--cognitive-stimulus-size, clamp(76px, 10vw, 150px)); height: var(--cognitive-stimulus-size, clamp(76px, 10vw, 150px)); display: grid; place-items: center; border-radius: 12px; padding: 10%; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14); } .cognitive-asset-shell--plain { padding: 0; background: transparent; box-shadow: none; } .cognitive-asset-img, .cognitive-arrow-img, .cognitive-animal-img, .cognitive-go-stop-img, .cognitive-grid-asset, .cognitive-card-img, .cognitive-rotation-img, .cognitive-flanker-img, .cognitive-stop-signal-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } .cognitive-asset-label { position: absolute; inset: auto 8% 8%; display: grid; place-items: center; min-height: 28%; border-radius: 8px; background: rgba(17, 24, 39, 0.82); color: #ffffff; font-size: clamp(0.78rem, 1vw, 1.05rem); font-weight: 900; } .cognitive-arrow-img { width: var(--cognitive-stimulus-size, clamp(90px, 12vw, 180px)); height: var(--cognitive-stimulus-size, clamp(90px, 12vw, 180px)); } .cognitive-stage--leftright .cognitive-arrow-img { width: clamp(140px, calc(var(--cognitive-stimulus-size, 100px) * 2.2), 280px); height: clamp(140px, calc(var(--cognitive-stimulus-size, 100px) * 2.2), 280px); } .cognitive-animal-img { width: clamp(120px, 18vw, 260px); height: clamp(120px, 18vw, 260px); filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.16)); } .cognitive-go-stop-img { width: clamp(112px, calc(var(--cognitive-stimulus-size, 100px) * 1.7), 240px); height: clamp(112px, calc(var(--cognitive-stimulus-size, 100px) * 1.7), 240px); filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.18)); } .cognitive-animal-target { min-height: clamp(150px, 22vw, 280px); } .cognitive-go-stop-target { min-height: clamp(145px, 22vw, 280px); } .cognitive-prospect-target { min-height: clamp(180px, 25vw, 310px); } .cognitive-prospect-display { display: grid; justify-items: center; align-items: center; gap: clamp(0.55rem, 1.4vw, 0.9rem); } .cognitive-prospect-main { display: grid; justify-items: center; gap: 0.35rem; } .cognitive-prospect-arrow { object-fit: contain; display: block; filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.16)); } .cognitive-prospect-arrow.is-prospect-standard { width: clamp(84px, 13vw, 170px); height: clamp(84px, 13vw, 170px); } .cognitive-prospect-arrow.is-prospect-special-cue { width: clamp(100px, 15vw, 196px); height: clamp(100px, 15vw, 196px); } .cognitive-prospect-main-label { color: var(--muted); font-size: clamp(0.82rem, 1vw, 1rem); font-weight: 900; } .cognitive-prospect-display.has-special-cue .cognitive-prospect-main-label { color: #dc2626; } .cognitive-prospect-special { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 62px; padding: 0.45rem 0.75rem; border: 2px solid #dc2626; border-radius: 8px; background: color-mix(in oklab, #dc2626 12%, var(--card)); color: var(--text); font-size: clamp(0.9rem, 1.1vw, 1.08rem); font-weight: 900; box-shadow: 0 12px 24px rgba(220, 38, 38, 0.14); } .cognitive-prospect-special-img { width: clamp(48px, 7vw, 76px); height: clamp(48px, 7vw, 76px); object-fit: contain; display: block; } .cognitive-stage--prospective .cognitive-rule-guide { width: min(720px, 94vw); } .cognitive-stage--prospective .cognitive-rule-guide-item { min-width: min(260px, 92vw); justify-content: flex-start; } .cognitive-stage--prospective .cognitive-rule-guide-item.is-active { border-color: color-mix(in oklab, #dc2626 56%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); } .cognitive-stage--prospective .cognitive-response-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(32rem, 92vw); gap: 0.7rem; } .cognitive-stage--prospective .cognitive-response-btn { min-width: 0; } .cognitive-response-btn.is-prospect-special { grid-column: 1 / -1; justify-self: center; min-width: min(17rem, 100%); border-color: color-mix(in oklab, #dc2626 52%, var(--border)); background: color-mix(in oklab, #dc2626 10%, var(--card)); } .cognitive-flanker-assets { display: flex; align-items: center; justify-content: center; gap: clamp(0.25rem, 0.75vw, 0.7rem); } .cognitive-flanker-img { width: clamp(44px, 6vw, 86px); height: clamp(44px, 6vw, 86px); opacity: 0.72; } .cognitive-flanker-img.is-center { opacity: 1; transform-origin: center; scale: 1.16; } .cognitive-shape { width: var(--cognitive-stimulus-size, clamp(76px, 10vw, 150px)); height: var(--cognitive-stimulus-size, clamp(76px, 10vw, 150px)); display: grid; place-items: center; color: white; font-size: calc(var(--cognitive-stimulus-size, 100px) * 0.24); } .cognitive-shape--circle { border-radius: 50%; } .cognitive-shape--square { border-radius: 8px; } .cognitive-shape--triangle { width: 0; height: 0; border-left: calc(var(--cognitive-stimulus-size, 100px) * 0.52) solid transparent; border-right: calc(var(--cognitive-stimulus-size, 100px) * 0.52) solid transparent; border-bottom: calc(var(--cognitive-stimulus-size, 100px) * 0.9) solid #2563eb; background: transparent !important; } .cognitive-shape--diamond { transform: rotate(45deg); border-radius: 8px; } .cognitive-color--blue { background: #2563eb; } .cognitive-color--orange { background: #f97316; } .cognitive-color--green { background: #16a34a; } .cognitive-color--purple { background: #7c3aed; } .cognitive-color--gray { background: #64748b; } .cognitive-arrow, .cognitive-flanker, .cognitive-letter, .cognitive-word, .cognitive-sound { font-size: calc(var(--cognitive-stimulus-size, 100px) * 1.15); line-height: 1; } .cognitive-stroop-comparison { align-content: center; gap: clamp(0.85rem, 2.4vw, 1.25rem); text-align: center; } .cognitive-stroop-word { letter-spacing: 0; } .cognitive-stroop-target { min-width: clamp(140px, 24vw, 230px); padding: 0.45rem 0.9rem; border: 1px solid rgba(17, 24, 39, 0.22); border-radius: 8px; background: rgba(255, 255, 255, 0.94); color: #111827; font-size: clamp(1.25rem, 3.2vw, 2rem); font-weight: 900; line-height: 1.1; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); } .cognitive-response-btn.is-stroop-correct { border-color: color-mix(in oklab, #16a34a 48%, var(--border)); background: color-mix(in oklab, #16a34a 10%, var(--card)); } .cognitive-response-btn.is-stroop-incorrect { border-color: color-mix(in oklab, #dc2626 46%, var(--border)); background: color-mix(in oklab, #dc2626 9%, var(--card)); } .cognitive-rule-cue, .cognitive-correction, .cognitive-stop-label { padding: 0.4rem 0.8rem; border-radius: 8px; background: #111827; color: #ffffff; font-weight: 800; } .cognitive-stop-label { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); background: #dc2626; z-index: 15; } .cognitive-stop-asset { padding: 0; border-radius: 16px; background: transparent; box-shadow: none; } .cognitive-stop-signal-img { width: clamp(86px, calc(var(--cognitive-stimulus-size, 100px) * 1.25), 170px); height: clamp(86px, calc(var(--cognitive-stimulus-size, 100px) * 1.25), 170px); filter: drop-shadow(0 12px 20px rgba(220, 38, 38, 0.32)); } .cognitive-response-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; } .cognitive-response-btn, .cognitive-grid-cell { display: inline-flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-response-btn { min-width: 120px; min-height: 48px; padding: 0.7rem 1rem; } .cognitive-stage--calculation .cognitive-response-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; width: min(34rem, 92vw); } .cognitive-stage--calculation .cognitive-response-btn { min-width: 0; min-height: 5.5rem; padding: 0.9rem 1rem; font-size: 2.4rem; line-height: 1; } .cognitive-response-label { line-height: 1.1; } .cognitive-response-icon { width: 1.8rem; height: 1.8rem; object-fit: contain; flex: 0 0 auto; } .cognitive-response-icon.is-arrow { width: 2.65rem; height: 2.65rem; } .cognitive-stage--flex-animal .cognitive-response-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; min-width: clamp(150px, 16vw, 210px); min-height: 58px; } .cognitive-stage--flex-animal .cognitive-response-btn.has-stacked-icon { flex-direction: column; gap: 0.35rem; min-height: 92px; padding-block: 0.7rem; } .cognitive-stage--flex-animal .cognitive-response-btn.has-content-rows { flex-direction: column; gap: 0.45rem; min-height: 116px; padding-block: 0.75rem; } .cognitive-stage--flex-animal .cognitive-response-btn .cognitive-response-icon.is-arrow { width: 2.15rem; height: 2.15rem; } .cognitive-response-rowline { display: inline-flex; align-items: center; justify-content: center; gap: 0.48rem; min-height: 2.2rem; } .cognitive-response-rowline .cognitive-response-icon.is-arrow { width: 2.15rem; height: 2.15rem; } .cognitive-response-btn.is-registered, .cognitive-grid-cell.is-registered { transform: scale(0.97); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 58%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-response-btn.is-response-correct { border-color: color-mix(in oklab, #16a34a 64%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 42%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-response-btn.is-response-wrong { border-color: color-mix(in oklab, #dc2626 64%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 42%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-response-btn.is-ignored, .cognitive-grid-cell.is-ignored { animation: cognitiveIgnoredInput 180ms ease; box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 58%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-choice-prompt, .cognitive-sequence-display { font-size: clamp(1.8rem, 4vw, 4rem); font-weight: 800; max-width: min(900px, 94vw); overflow-wrap: anywhere; } .cognitive-stage--logic-sequence, .cognitive-stage--logic-matrix { gap: clamp(0.9rem, 2.3vh, 1.7rem); } .cognitive-logic-sequence { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(0.28rem, 0.8vw, 0.55rem); max-width: min(880px, 94vw); } .cognitive-logic-sequence-item { min-width: clamp(54px, 8vw, 92px); min-height: clamp(54px, 8vw, 92px); display: grid; place-items: center; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); color: var(--text); font-size: clamp(1.5rem, 4vw, 3.2rem); font-weight: 900; line-height: 1; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); } .cognitive-logic-sequence-item.has-symbol { width: clamp(62px, 8.8vw, 104px); height: clamp(62px, 8.8vw, 104px); padding: clamp(0.38rem, 0.8vw, 0.62rem); } .cognitive-logic-sequence-item.is-missing { border-color: color-mix(in oklab, var(--primary) 56%, var(--border)); background: color-mix(in oklab, var(--primary) 12%, var(--card)); } .cognitive-logic-symbol { --logic-symbol-mask: none; --logic-symbol-color: #2563eb; --logic-symbol-scale: 1; --logic-symbol-rotation: 0deg; width: 100%; height: 100%; display: grid; place-items: center; color: var(--text); font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 900; line-height: 1; } .cognitive-logic-symbol::before { content: ""; width: 100%; height: 100%; display: block; background: var(--logic-symbol-color); transform: rotate(var(--logic-symbol-rotation)) scale(var(--logic-symbol-scale)); transform-origin: center; -webkit-mask: var(--logic-symbol-mask) center / contain no-repeat; mask: var(--logic-symbol-mask) center / contain no-repeat; } .cognitive-logic-symbol.is-missing-symbol::before { display: none; } .cognitive-logic-option-symbol { display: inline-flex; align-items: center; justify-content: center; width: clamp(48px, 7vw, 76px); height: clamp(48px, 7vw, 76px); margin-inline: auto; } .cognitive-logic-sequence-separator { color: var(--muted); font-size: clamp(1.2rem, 3vw, 2.4rem); font-weight: 900; } .cognitive-logic-matrix { width: min(780px, 94vw); display: grid; gap: clamp(0.45rem, 1.1vw, 0.72rem); } .cognitive-logic-matrix-row { display: grid; grid-template-columns: minmax(78px, 0.7fr) repeat(2, minmax(64px, 0.7fr)) 34px minmax(70px, 0.7fr); align-items: center; gap: clamp(0.28rem, 0.8vw, 0.55rem); } .cognitive-logic-matrix-label { color: var(--muted); font-size: clamp(0.72rem, 0.95vw, 0.9rem); font-weight: 900; line-height: 1.15; text-align: right; } .cognitive-logic-matrix-cell { min-height: clamp(64px, 9vw, 104px); display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); color: var(--text); font-size: clamp(1.45rem, 3.4vw, 2.7rem); font-weight: 900; line-height: 1; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); } .cognitive-logic-matrix-cell.is-card { position: relative; padding: 0.28rem; } .cognitive-logic-card-img { width: clamp(44px, 7vw, 82px); height: clamp(58px, 9vw, 108px); object-fit: contain; display: block; } .cognitive-logic-card-value { position: absolute; right: 0.28rem; bottom: 0.28rem; min-width: 1.65rem; min-height: 1.65rem; display: grid; place-items: center; border-radius: 7px; background: rgba(17, 24, 39, 0.86); color: #fff; font-size: clamp(0.78rem, 1.1vw, 1rem); font-weight: 900; } .cognitive-logic-matrix-cell.is-missing { border-color: color-mix(in oklab, var(--primary) 56%, var(--border)); background: color-mix(in oklab, var(--primary) 12%, var(--card)); } .cognitive-logic-matrix-row.is-challenge .cognitive-logic-matrix-label { color: var(--text); } .cognitive-logic-matrix-arrow { color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.8rem); font-weight: 900; } .cognitive-logic-pattern-board { --logic-matrix-size: 3; width: min(62vh, 560px, 94vw); display: grid; grid-template-columns: repeat(var(--logic-matrix-size), minmax(0, 1fr)); gap: clamp(0.38rem, 0.9vw, 0.65rem); } .cognitive-logic-pattern-cell { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 93%, transparent); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); } .cognitive-logic-pattern-cell.is-missing { border-color: color-mix(in oklab, var(--primary) 62%, var(--border)); background: color-mix(in oklab, var(--primary) 13%, var(--card)); } .cognitive-logic-pattern-symbol-card { width: 100%; height: 100%; display: grid; place-items: center; position: relative; padding: clamp(0.34rem, 0.8vw, 0.58rem); color: var(--text); font-weight: 900; } .cognitive-logic-pattern-symbol-card.is-missing { font-size: clamp(1.9rem, 5vw, 3.6rem); } .cognitive-logic-pattern-symbol { width: clamp(30px, 45%, 58px); height: clamp(30px, 45%, 58px); } .cognitive-logic-pattern-symbol-card[data-count="1"] .cognitive-logic-pattern-symbol { width: clamp(42px, 58%, 76px); height: clamp(42px, 58%, 76px); } .cognitive-logic-pattern-symbol-card[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cognitive-logic-pattern-symbol-card[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .cognitive-logic-pattern-symbol-card[data-count="3"] .cognitive-logic-pattern-symbol:first-child { grid-column: 1 / -1; justify-self: center; } .cognitive-logic-matrix-rule { max-width: min(620px, 94vw); color: var(--muted); font-size: clamp(0.78rem, 1vw, 0.94rem); font-weight: 800; text-align: center; } .cognitive-stage--logic-sequence .cognitive-response-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(74px, 12vw, 112px), 1fr)); width: min(780px, 94vw); justify-items: center; gap: clamp(0.65rem, 1.2vw, 0.95rem); margin-top: clamp(1.4rem, 6vh, 4.8rem); } .cognitive-stage--logic-matrix .cognitive-response-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(640px, 94vw); gap: 0.65rem; } .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(auto-fit, minmax(clamp(72px, 12vw, 104px), 1fr)); width: min(720px, 94vw); justify-items: stretch; } .cognitive-stage--logic-sequence .cognitive-response-btn { min-width: 0; min-height: clamp(78px, 10vw, 116px); padding: clamp(0.55rem, 1vw, 0.85rem); font-size: clamp(1rem, 2vw, 1.4rem); } .cognitive-stage--logic-sequence .cognitive-response-btn.is-logic-symbol-option { aspect-ratio: 1.1; display: inline-flex; align-items: center; justify-content: center; } .cognitive-stage--logic-matrix .cognitive-response-btn { min-width: 0; min-height: clamp(52px, 7vw, 72px); padding: 0.7rem 0.8rem; font-size: clamp(1rem, 2vw, 1.4rem); } .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { aspect-ratio: 1.08; min-height: clamp(74px, 11vw, 108px); padding: 0.25rem; } .cognitive-response-btn.is-logic-matrix-option.is-wrong-option { opacity: 0.45; cursor: not-allowed; border-color: color-mix(in oklab, #dc2626 64%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 48%, transparent); } .cognitive-response-btn.is-logic-matrix-option.is-correct-option { border-color: color-mix(in oklab, #16a34a 64%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 58%, transparent), 0 10px 24px rgba(15, 23, 42, 0.12); } .cognitive-logic-feedback { max-width: min(760px, 92vw); padding: 0.42rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); color: var(--text); font-size: clamp(0.82rem, 1vw, 0.98rem); font-weight: 800; line-height: 1.25; } .cognitive-logic-feedback.is-correct { border-color: color-mix(in oklab, #16a34a 56%, var(--border)); background: color-mix(in oklab, #16a34a 11%, var(--card)); } .cognitive-logic-feedback.is-error { border-color: color-mix(in oklab, #dc2626 56%, var(--border)); background: color-mix(in oklab, #dc2626 10%, var(--card)); } @media (max-width: 640px) { .cognitive-logic-pattern-board { width: min(86vw, 420px); } .cognitive-logic-matrix-row { grid-template-columns: 1fr 1fr 28px 1fr; } .cognitive-logic-matrix-label { grid-column: 1 / -1; text-align: center; } .cognitive-stage--logic-sequence .cognitive-response-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(420px, 94vw); } .cognitive-stage--logic-matrix .cognitive-response-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 420px) { .cognitive-stage--logic-sequence .cognitive-response-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .departure-board { width: min(880px, 94vw); display: grid; gap: clamp(0.35rem, 0.8vw, 0.55rem); padding: clamp(0.7rem, 1.4vw, 1rem); border: 1px solid rgba(148, 163, 184, 0.72); border-radius: 8px; background: #e5e7eb; color: #111827; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12); transition: opacity 220ms ease, transform 220ms ease; } .departure-board.is-cleared { opacity: 0; transform: translateY(calc(var(--cognitive-fixation-align-offset) - 0.8rem)) scale(0.98); pointer-events: none; } .departure-board-header, .departure-board-row { display: grid; grid-template-columns: minmax(132px, 0.75fr) minmax(64px, 0.35fr) minmax(180px, 1fr); align-items: center; gap: clamp(0.45rem, 1vw, 0.8rem); } .departure-board-header { padding: 0.2rem clamp(0.55rem, 1.1vw, 0.85rem); color: #475569; font-size: clamp(0.72rem, 1vw, 0.86rem); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .departure-board-row { min-height: clamp(54px, 7vw, 72px); padding: clamp(0.45rem, 1vw, 0.7rem) clamp(0.55rem, 1.1vw, 0.85rem); border: 1px solid rgba(148, 163, 184, 0.72); border-radius: 8px; background: #f8fafc; opacity: 0; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; } .departure-board-row.is-visible { opacity: 1; transform: translateY(0); } .departure-board-flight { display: inline-flex; align-items: center; gap: clamp(0.4rem, 0.8vw, 0.65rem); min-width: 0; } .departure-board-flight strong, .departure-board-time, .departure-board-destination { overflow-wrap: anywhere; } .departure-board-plane { width: clamp(34px, 5vw, 52px); height: clamp(34px, 5vw, 52px); object-fit: contain; flex: 0 0 auto; } .departure-board-time { color: #1d4ed8; font-weight: 900; font-variant-numeric: tabular-nums; } .departure-board-destination { font-size: clamp(1.05rem, 2vw, 1.45rem); font-weight: 900; } .departure-countdown { position: absolute; left: 50%; top: 50%; z-index: 8; transform: translate(-50%, -50%); min-width: clamp(110px, 20vw, 180px); min-height: clamp(110px, 20vw, 180px); display: grid; place-items: center; border: 1px solid color-mix(in oklab, #2563eb 42%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--card) 90%, #dbeafe); color: var(--text); font-size: clamp(3.8rem, 12vw, 7rem); font-weight: 900; line-height: 1; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.14); } .departure-countdown[hidden] { display: none; } .cognitive-airport-response-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(980px, 94vw); gap: clamp(0.75rem, 1.2vw, 1rem); } .cognitive-airport-option-btn { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.65rem; min-width: 0; min-height: clamp(78px, 9vw, 98px); padding: 0.9rem 1rem; text-align: left; } .cognitive-airport-option-btn .cognitive-response-label { font-size: clamp(1.08rem, 1.45vw, 1.28rem); font-weight: 900; } .cognitive-airport-option-plane { width: 3rem; height: 3rem; } .cognitive-airport-option-btn.is-selected { border-color: color-mix(in oklab, #16a34a 54%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); color: var(--text); opacity: 0.82; } .cognitive-airport-option-btn.is-selected::after { content: attr(data-selected-order); position: absolute; top: 0.35rem; right: 0.45rem; min-width: 1.35rem; min-height: 1.35rem; display: grid; place-items: center; border-radius: 999px; background: #16a34a; color: #ffffff; font-size: 0.78rem; font-weight: 900; } @media (max-width: 560px) { .departure-board-header { display: none; } .departure-board-row { grid-template-columns: 1fr; gap: 0.18rem; } .departure-board-time { font-size: 0.9rem; } .cognitive-airport-response-row { grid-template-columns: 1fr; } } .cognitive-grid { --cognitive-grid-size: 3; display: grid; grid-template-columns: repeat(var(--cognitive-grid-size), minmax(0, 1fr)); gap: clamp(0.35rem, 0.8vw, 0.7rem); } .cognitive-grid--six { width: min(76vw, 560px); } .cognitive-grid--small { width: min(48vw, 320px); } .cognitive-construct-grids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-content: center; gap: clamp(0.8rem, 2.8vw, 2.4rem); width: min(94vw, 720px); transform: translateY(var(--cognitive-fixation-align-offset)); } .cognitive-construct-grids .cognitive-grid--small { width: 100%; } .cognitive-stage--construct .cognitive-grid { gap: clamp(0.18rem, 0.55vw, 0.55rem); } .cognitive-construct-picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.35rem, 0.9vw, 0.7rem); width: min(94vw, 720px); } .cognitive-construct-picker-btn { width: clamp(46px, 7vmin, 66px); height: clamp(46px, 7vmin, 66px); display: grid; place-items: center; padding: clamp(0.28rem, 0.75vmin, 0.48rem); border: 2px solid var(--border); border-radius: 8px; background: var(--card); cursor: pointer; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-construct-picker-btn:hover, .cognitive-construct-picker-btn:focus-visible { border-color: color-mix(in oklab, #2563eb 62%, var(--border)); outline: none; } .cognitive-construct-picker-btn.is-selected { border-color: #2563eb; background: color-mix(in oklab, #2563eb 12%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #2563eb 28%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-construct-picker-img, .cognitive-construct-shape-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } .cognitive-grid--target .cognitive-grid-cell { cursor: default; pointer-events: none; } .cognitive-grid--target .cognitive-grid-cell:disabled { opacity: 1; } .cognitive-grid-cell { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; font-size: clamp(1rem, 2vw, 1.8rem); } .cognitive-grid-cell.is-target, .cognitive-grid-cell.is-highlighted, .cognitive-grid-cell.is-selected { background: #2563eb; color: #ffffff; border-color: #2563eb; } .cognitive-stage--construct .cognitive-grid-cell.is-target, .cognitive-stage--construct .cognitive-grid-cell.has-construct-shape { background: color-mix(in oklab, #2563eb 8%, var(--card)); color: var(--text); border-color: color-mix(in oklab, #2563eb 42%, var(--border)); } .cognitive-stage--construct .cognitive-grid-cell.has-construct-shape { box-shadow: inset 0 0 0 2px color-mix(in oklab, #2563eb 22%, transparent), 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-stage--construct .cognitive-grid--build .cognitive-grid-cell:hover, .cognitive-stage--construct .cognitive-grid--build .cognitive-grid-cell:focus-visible { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, #2563eb 22%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-grid-cell.is-entered { position: relative; background: #16a34a; color: #ffffff; border-color: #16a34a; } .cognitive-grid-cell.is-entered::after { content: attr(data-response-order); position: absolute; right: 6px; bottom: 5px; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #166534; font-size: 0.76rem; font-weight: 900; } .cognitive-grid-cell.is-distractor { color: #94a3b8; } .cognitive-dual-dot { width: var(--cognitive-stimulus-size, clamp(80px, 10vw, 140px)); height: var(--cognitive-stimulus-size, clamp(80px, 10vw, 140px)); border-radius: 50%; background: #64748b; } .cognitive-dual-dot.is-target { background: #2563eb; } .cognitive-tracking .cognitive-dual-dot { animation: cognitiveTrack 2.1s ease-in-out infinite alternate; } @keyframes cognitiveTrack { from { transform: translateX(-120px); } to { transform: translateX(120px); } } .cognitive-stage--divide-driving, .cognitive-stage--divide-tower { justify-content: center; gap: clamp(0.8rem, 1.5vw, 1.2rem); padding: clamp(5.4rem, 10vh, 7rem) clamp(0.8rem, 2vw, 1.8rem) clamp(0.8rem, 2vw, 1.4rem); background: color-mix(in oklab, var(--bg) 82%, #dbeafe); } .cognitive-stage--divide-driving { background: #fff; } .cognitive-stage--divide-airport { justify-content: stretch; align-items: stretch; gap: 0; padding: clamp(5.2rem, 10vh, 6.8rem) 0 0; overflow: hidden; background: #fff; } .divide-drive-scene, .divide-tower-cockpit { width: min(1120px, 96vw); border: 1px solid color-mix(in oklab, var(--border) 74%, transparent); border-radius: 8px; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14); } .divide-drive-scene { --divide-road-offset: 0px; --divide-tree-offset: 0px; --divide-road-top: 56%; --divide-speed-value: 0%; --divide-speed-target-left: 45%; --divide-speed-target-width: 20%; position: relative; height: min(62vh, 560px); min-height: 390px; overflow: hidden; border: 0; box-shadow: none; background: transparent; } .divide-drive-sky { display: none; } .divide-drive-road { position: absolute; left: -8%; right: -8%; top: var(--divide-road-top); height: 30%; transform: translateY(-50%); overflow: hidden; background: linear-gradient(180deg, #475569, #334155 52%, #1f2937); border-block: 5px solid #e5e7eb; } .divide-drive-road-markings { position: absolute; inset: 47% 0 auto; height: 8px; background: repeating-linear-gradient(90deg, #f8fafc 0 54px, transparent 54px 110px); background-position-x: var(--divide-road-offset); opacity: 0.95; } .divide-drive-car-wrap { position: absolute; top: calc(var(--divide-road-top) - clamp(42px, 6vw, 72px)); z-index: 8; width: clamp(112px, 14vw, 190px); aspect-ratio: 2.1 / 1; display: grid; place-items: center; filter: drop-shadow(0 16px 18px rgba(15, 23, 42, 0.22)); } .cognitive-stage--divide-driving[data-drive-direction="leftToRight"] .divide-drive-car-wrap { left: clamp(6%, 14vw, 22%); } .cognitive-stage--divide-driving[data-drive-direction="rightToLeft"] .divide-drive-car-wrap { right: clamp(6%, 14vw, 22%); } .cognitive-stage--divide-driving[data-drive-direction="leftToRight"] .divide-drive-car { transform: scaleX(-1); } .divide-drive-car { width: 100%; height: 100%; object-fit: contain; } .divide-drive-event-layer { position: absolute; inset: 0; z-index: 16; pointer-events: none; } .divide-drive-tree-layer { position: absolute; left: 0; right: 0; bottom: calc(100% - var(--divide-road-top) + 84px); z-index: 5; opacity: 0.88; pointer-events: none; height: 0; } .divide-drive-tree { position: absolute; left: 0; bottom: 0; width: clamp(76px, 8.4vw, 132px); height: auto; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(15, 23, 42, 0.16)); transform: translateX(var(--divide-tree-x, -220px)) translateY(var(--divide-tree-y, 0px)); will-change: transform; } .divide-drive-tree--2, .divide-drive-tree--5 { width: clamp(64px, 7.2vw, 116px); --divide-tree-y: -0.15rem; } .divide-drive-tree--3 { width: clamp(88px, 9.2vw, 148px); --divide-tree-y: -0.25rem; } .divide-drive-traffic { position: absolute; top: calc(var(--divide-road-top) - clamp(160px, 20vw, 230px)); z-index: 1; display: grid; place-items: center; gap: 0.2rem; pointer-events: auto; cursor: pointer; min-width: clamp(76px, 9vw, 112px); padding: 0.4rem 0.5rem; border-radius: 8px; background: color-mix(in oklab, #0f172a 78%, transparent); color: #fff; font-weight: 900; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.2); } .cognitive-stage--divide-driving[data-drive-direction="leftToRight"] .divide-drive-traffic { right: clamp(12%, 18vw, 26%); } .cognitive-stage--divide-driving[data-drive-direction="rightToLeft"] .divide-drive-traffic { left: clamp(12%, 18vw, 26%); } .divide-drive-traffic img { width: clamp(52px, 6vw, 84px); height: clamp(52px, 6vw, 84px); object-fit: contain; } .divide-drive-traffic.is-red { outline: 3px solid color-mix(in oklab, #dc2626 62%, transparent); } .divide-drive-traffic.is-green { outline: 3px solid color-mix(in oklab, #16a34a 62%, transparent); } .divide-drive-traffic.is-missed { outline: 3px solid color-mix(in oklab, #f97316 70%, transparent); } .divide-speed-panel { position: absolute; left: 50%; bottom: clamp(0.85rem, 2vw, 1.25rem); z-index: 13; transform: translateX(-50%); width: min(760px, 88%); padding: clamp(0.58rem, 1.5vw, 0.85rem); border: 1px solid color-mix(in oklab, var(--border) 78%, transparent); border-radius: 8px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1); } .divide-speed-header, .divide-speed-scale { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .divide-speed-header { margin-bottom: 0.45rem; color: var(--text); font-weight: 900; } .divide-speed-readout { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; } .divide-speed-meter { position: relative; height: clamp(22px, 3.4vw, 34px); overflow: hidden; border-radius: 8px; background: linear-gradient(90deg, rgba(220, 38, 38, 0.2), rgba(249, 115, 22, 0.16) 32%, rgba(22, 163, 74, 0.16) 50%, rgba(249, 115, 22, 0.16) 68%, rgba(220, 38, 38, 0.2)); border: 1px solid color-mix(in oklab, var(--border) 72%, transparent); } .divide-speed-target { position: absolute; top: 0; bottom: 0; left: var(--divide-speed-target-left); width: var(--divide-speed-target-width); background: color-mix(in oklab, #16a34a 58%, transparent); box-shadow: inset 0 0 0 2px color-mix(in oklab, #15803d 78%, transparent); } .divide-speed-fill { position: absolute; inset: 0 auto 0 0; width: var(--divide-speed-value); background: linear-gradient(90deg, #2563eb, #0ea5e9); opacity: 0.55; } .divide-speed-needle { position: absolute; top: -5px; bottom: -5px; left: var(--divide-speed-value); width: 4px; transform: translateX(-50%); border-radius: 999px; background: #0f172a; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.78); } .divide-speed-panel[data-speed-state="target"] .divide-speed-needle { background: #15803d; } .divide-speed-panel[data-speed-state="near"] .divide-speed-needle { background: #f97316; } .divide-speed-panel[data-speed-state="out"] .divide-speed-needle { background: #dc2626; } .divide-speed-scale { margin-top: 0.35rem; color: var(--muted); font-size: 0.78rem; font-weight: 800; } .divide-speed-deviation { margin-top: 0.25rem; color: var(--text); font-size: 0.86rem; font-weight: 900; text-align: center; } .divide-speed-touch-zones { position: absolute; left: 0; right: 0; bottom: 0; z-index: 14; display: grid; grid-template-columns: 1fr 1fr; min-height: 32%; pointer-events: none; } .divide-speed-touch-zone { display: grid; place-items: center; align-content: center; gap: 0.2rem; border: 0; background: transparent; color: color-mix(in oklab, var(--text) 68%, transparent); cursor: pointer; touch-action: none; pointer-events: auto; opacity: 0.18; transition: opacity 140ms ease, background-color 140ms ease; } .divide-speed-touch-zone span { font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1; } .divide-speed-touch-zone strong { font-size: clamp(0.7rem, 1.5vw, 0.88rem); text-transform: uppercase; } .divide-speed-touch-zone.is-active, .divide-speed-touch-zone:active { opacity: 0.48; background: color-mix(in oklab, #2563eb 12%, transparent); } .divide-status-strip, .divide-tower-log { border-radius: 8px; border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--text); font-weight: 800; } .divide-status-strip { position: absolute; left: 50%; top: clamp(0.65rem, 1.6vw, 1rem); z-index: 12; transform: translateX(-50%); width: min(620px, 88%); min-height: 42px; display: grid; place-items: center; padding: 0.45rem 0.8rem; } .divide-status-strip[data-tone="alert"], .divide-tower-log[data-tone="notice"] { border-color: color-mix(in oklab, #f97316 62%, var(--border)); background: color-mix(in oklab, #f97316 12%, var(--card)); } .divide-status-strip[data-tone="success"], .divide-tower-log[data-tone="success"] { border-color: color-mix(in oklab, #16a34a 62%, var(--border)); background: color-mix(in oklab, #16a34a 12%, var(--card)); } .divide-status-strip[data-tone="error"], .divide-tower-log[data-tone="error"] { border-color: color-mix(in oklab, #dc2626 62%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); } .cognitive-stage--divide-driving.is-driving-paused .divide-drive-road, .cognitive-stage--divide-driving.is-driving-paused .divide-drive-sky { filter: saturate(0.82); } .divide-action-row { width: min(1120px, 96vw); align-items: stretch; } .divide-action-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; min-width: clamp(132px, 16vw, 210px); } .divide-action-label { font-size: clamp(0.92rem, 1vw, 1.05rem); } .divide-action-key { color: var(--muted); font-size: 0.75rem; font-weight: 800; } .divide-action-btn--brake { border-color: color-mix(in oklab, #dc2626 48%, var(--border)); } .divide-action-btn--approve { border-color: color-mix(in oklab, #2563eb 48%, var(--border)); } .divide-action-btn--wait { border-color: color-mix(in oklab, #f97316 48%, var(--border)); } .divide-action-btn--check { border-color: color-mix(in oklab, #16a34a 42%, var(--border)); } .divide-tower-cockpit { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(220px, 0.75fr); gap: clamp(0.7rem, 1.2vw, 1rem); min-height: min(58vh, 520px); padding: clamp(0.7rem, 1.3vw, 1rem); background: color-mix(in oklab, var(--card) 88%, #e0f2fe); } .divide-tower-radar { position: relative; min-height: 340px; overflow: hidden; border: 1px solid color-mix(in oklab, #0f766e 42%, var(--border)); border-radius: 8px; background: radial-gradient(circle at center, rgba(20, 184, 166, 0.16) 0 2px, transparent 3px 100%), repeating-radial-gradient(circle at center, rgba(20, 184, 166, 0.22) 0 2px, transparent 2px 74px), linear-gradient(135deg, #0f172a, #134e4a); color: #d1fae5; } .divide-tower-radar-grid { position: absolute; inset: 0; background: linear-gradient(rgba(209,250,229,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(209,250,229,0.12) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.55; } .divide-tower-radar-sweep { position: absolute; left: 50%; top: 50%; width: 52%; height: 2px; transform-origin: left center; background: linear-gradient(90deg, rgba(134,239,172,0.9), rgba(134,239,172,0)); animation: divideRadarSweep 4.4s linear infinite; } .divide-tower-plane-layer { position: absolute; inset: 0; } .divide-tower-plane { position: absolute; z-index: 4; display: grid; gap: 0.1rem; min-width: 82px; padding: 0.45rem 0.55rem; border: 1px solid rgba(255,255,255,0.36); border-radius: 8px; background: rgba(15, 23, 42, 0.84); color: #f8fafc; text-align: center; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22); } .divide-tower-plane::before { content: ""; width: 36px; height: 18px; margin: 0 auto 0.1rem; clip-path: polygon(0 42%, 43% 42%, 50% 0, 57% 42%, 100% 42%, 100% 58%, 57% 58%, 50% 100%, 43% 58%, 0 58%); background: currentColor; } .divide-tower-plane.is-request { color: #bfdbfe; border-color: rgba(147, 197, 253, 0.5); } .divide-tower-plane.is-clear { color: #bbf7d0; border-color: rgba(34, 197, 94, 0.52); } .divide-tower-plane.is-hold { color: #fed7aa; border-color: rgba(249, 115, 22, 0.55); } .divide-tower-plane.is-complete { outline: 3px solid rgba(34, 197, 94, 0.55); } .divide-tower-plane.is-error { outline: 3px solid rgba(239, 68, 68, 0.62); } .divide-tower-radar-label { position: absolute; left: 0.8rem; bottom: 0.75rem; z-index: 5; color: rgba(209,250,229,0.82); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .divide-tower-panel-stack { display: grid; grid-template-rows: auto auto 1fr; gap: clamp(0.55rem, 1vw, 0.8rem); } .divide-tower-panel { display: grid; gap: 0.35rem; align-content: center; min-height: 104px; padding: clamp(0.75rem, 1.3vw, 1rem); border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); text-align: left; } .divide-panel-kicker { color: var(--muted); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .divide-tower-panel strong { font-size: clamp(1.25rem, 2vw, 1.9rem); line-height: 1; } .divide-tower-runway-panel:not(.is-closed), .divide-tower-weather-panel:not(.is-blocking) { border-color: color-mix(in oklab, #16a34a 44%, var(--border)); } .divide-tower-runway-panel.is-closed, .divide-tower-weather-panel.is-blocking { border-color: color-mix(in oklab, #dc2626 50%, var(--border)); background: color-mix(in oklab, #dc2626 10%, var(--card)); } .divide-tower-panel.needs-check { animation: dividePanelNeedsCheck 780ms ease-in-out infinite; } .divide-tower-log { min-height: 76px; padding: 0.75rem; text-align: left; } .divide-airport-scene { position: relative; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; background: #fff; } .divide-airport-route-map, .divide-airport-node-layer, .divide-airport-plane-layer { position: absolute; inset: 0; } .divide-airport-route-map { z-index: 1; display: block; width: 100%; height: 100%; } .divide-airport-route { fill: none; stroke: rgba(37, 99, 235, 0.34); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 30 22; } .divide-airport-route.is-active { stroke: rgba(37, 99, 235, 0.34); stroke-width: 6; stroke-dasharray: 30 22; } .divide-airport-node-layer { z-index: 3; pointer-events: none; } .divide-airport-node { --cooldown-progress: 0deg; position: absolute; width: clamp(76px, 9vw, 116px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); display: grid; place-items: center; color: #0f172a; } .divide-airport-donut { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#f97316 var(--cooldown-progress), rgba(15, 23, 42, 0.16) 0deg 360deg); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); } .divide-airport-donut::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: rgba(248, 250, 252, 0.92); } .divide-airport-cooldown { position: relative; z-index: 2; transform: translateY(-2.1rem); min-width: 4ch; padding: 0.18rem 0.48rem; border-radius: 999px; background: rgba(15, 23, 42, 0.78); color: #fff; font-size: clamp(0.86rem, 1.35vw, 1.08rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; text-align: center; } .divide-airport-icon { position: relative; z-index: 1; width: 54%; height: 54%; object-fit: contain; filter: drop-shadow(0 6px 9px rgba(15, 23, 42, 0.18)); } .divide-airport-code { position: absolute; z-index: 2; left: 50%; bottom: -0.35rem; transform: translateX(-50%); min-width: 4ch; padding: 0.18rem 0.38rem; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: #0f172a; font-size: clamp(0.72rem, 1.2vw, 0.9rem); font-weight: 950; letter-spacing: 0.04em; text-align: center; } .divide-airport-plane-layer { z-index: 6; pointer-events: none; } .divide-airport-plane { --plane-rotation: 0deg; position: absolute; z-index: 7; width: clamp(62px, 7vw, 98px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.22)); } .divide-airport-plane img { width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--plane-rotation)); transform-origin: center; } .divide-airport-plane-countdown { position: absolute; left: 50%; top: -0.42rem; transform: translateX(-50%); min-width: 4ch; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(15, 23, 42, 0.82); color: #fff; font-size: clamp(0.86rem, 1.3vw, 1.05rem); font-weight: 950; font-variant-numeric: tabular-nums; line-height: 1.1; } .divide-airport-plane.is-aborting img { filter: saturate(1.12); } .divide-airport-plane.is-false-abort img, .divide-airport-plane.is-missed-abort img { filter: drop-shadow(0 0 0 #dc2626) saturate(0.78); } .divide-airport-plane.is-landed { opacity: 0.72; transform: translate(-50%, -50%) scale(0.82); transition: opacity 220ms ease, transform 220ms ease; } .divide-airport-plane.is-missed-abort { animation: divideAirportErrorPulse 360ms ease-in-out 2; } .divide-airport-status { pointer-events: none; } @keyframes divideAirportErrorPulse { 0%, 100% { filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.22)); } 50% { filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.75)); } } @keyframes divideRadarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes dividePanelNeedsCheck { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, #f97316 34%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in oklab, #f97316 16%, transparent); } } @media (max-width: 860px) { .divide-drive-scene { min-height: 380px; height: 60vh; } .cognitive-stage--divide-airport { padding-top: clamp(4.8rem, 10vh, 6rem); } .divide-tower-cockpit { grid-template-columns: 1fr; min-height: 0; } .divide-tower-radar { min-height: 300px; } .divide-tower-panel-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .divide-tower-log { grid-column: 1 / -1; } } @media (max-width: 560px) { .cognitive-stage--divide-driving, .cognitive-stage--divide-tower { padding-inline: 0.55rem; } .cognitive-stage--divide-airport { padding: clamp(4.6rem, 12vh, 5.6rem) 0 0; } .divide-drive-scene { width: 96vw; min-height: 360px; } .divide-airport-node { width: clamp(66px, 18vw, 84px); } .divide-airport-plane { width: clamp(56px, 15vw, 78px); } .divide-speed-panel { width: 92%; padding: 0.55rem; } .divide-speed-scale { font-size: 0.68rem; } .divide-status-strip { width: 92%; font-size: 0.82rem; } .divide-tower-panel-stack { grid-template-columns: 1fr; } } .cognitive-rotation-pair { position: relative; display: flex; gap: clamp(2rem, 5vw, 5rem); align-items: center; justify-content: center; } .cognitive-stage--rotation .cognitive-target { min-height: clamp(260px, 32vw, 430px); } .cognitive-stage--rotation .cognitive-rotation-pair { gap: clamp(1.4rem, 4vw, 4rem); } .cognitive-rotation-figure { width: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); height: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); display: grid; place-items: center; border: 4px solid #2563eb; border-radius: 12px; background: var(--card); padding: 8%; color: #2563eb; font-size: calc(var(--cognitive-stimulus-size, 100px) * 0.72); font-weight: 900; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease, box-shadow 180ms ease; } .cognitive-stage--rotation .cognitive-rotation-figure { border-width: 3px; padding: 5%; } .cognitive-rotation-pair.is-revealing-answer .cognitive-rotation-figure.is-answer-reveal { border-color: color-mix(in oklab, var(--primary) 72%, var(--border)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 16%, transparent), 0 18px 32px rgba(15, 23, 42, 0.14); } .cognitive-rotation-pair.is-revealing-answer.is-correct-response .cognitive-rotation-figure.is-answer-reveal { border-color: #16a34a; box-shadow: 0 0 0 4px color-mix(in oklab, #16a34a 18%, transparent), 0 18px 32px rgba(15, 23, 42, 0.14); } .cognitive-rotation-pair.is-revealing-answer.is-error-response .cognitive-rotation-figure.is-answer-reveal { border-color: color-mix(in oklab, #dc2626 70%, var(--border)); box-shadow: 0 0 0 4px color-mix(in oklab, #dc2626 16%, transparent), 0 18px 32px rgba(15, 23, 42, 0.14); } .cognitive-rotation-pair.is-revealing-answer::after { content: attr(data-answer); position: absolute; top: calc(100% + 0.65rem); left: 50%; transform: translateX(-50%); padding: 0.28rem 0.62rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: var(--fs-sm); font-weight: 800; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .cognitive-stage--space3 { gap: clamp(0.65rem, 1.7vh, 1.35rem); } .space3-workspace { width: min(96vw, 1120px); display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr); align-items: center; justify-items: center; gap: clamp(1rem, 3vw, 2.4rem); transform: translateY(var(--cognitive-fixation-align-offset)); } .space3-panel { display: grid; justify-items: center; gap: clamp(0.35rem, 0.9vh, 0.65rem); width: 100%; } .space3-panel--photo { align-self: center; transform: none; } .space3-panel-label { color: var(--muted); font-size: clamp(0.78rem, 0.9vw, 0.95rem); font-weight: 800; line-height: 1; text-transform: uppercase; } .space3-side-grid { --space3-cols: 3; --space3-rows: 3; display: grid; grid-template-columns: repeat(var(--space3-cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--space3-rows), minmax(0, 1fr)); gap: clamp(0.16rem, 0.45vw, 0.32rem); width: min(28vw, 340px); min-width: 180px; padding: clamp(0.32rem, 0.75vw, 0.55rem); border: 1px solid color-mix(in oklab, var(--primary) 34%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--card) 82%, transparent); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } .space3-side-cell { aspect-ratio: 1; min-width: 0; border-radius: 5px; background: var(--space3-cube-color); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 3px 8px rgba(15, 23, 42, 0.12); } .space3-side-cell.is-empty { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 62%, transparent); } .space3-iso-svg { width: min(78vw, 640px); max-height: min(34vh, 360px); display: block; overflow: visible; filter: drop-shadow(0 18px 22px rgba(15, 23, 42, 0.16)); } .space3-camera-map { position: relative; width: min(58vw, 720px); min-height: clamp(300px, 44vh, 470px); display: grid; place-items: center; padding: clamp(2.2rem, 4.2vw, 3.4rem); } .space3-camera-cones { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .space3-camera-cone { opacity: 0; fill: color-mix(in oklab, #facc15 24%, transparent); stroke: color-mix(in oklab, #f59e0b 42%, transparent); stroke-width: 0.55; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 7px color-mix(in oklab, #facc15 24%, transparent)); transition: opacity 140ms ease; } .space3-camera-map:has(.space3-camera-marker--front:hover) .space3-camera-cone--front, .space3-camera-map:has(.space3-camera-marker--front:focus-visible) .space3-camera-cone--front, .space3-camera-map:has(.space3-camera-marker--right:hover) .space3-camera-cone--right, .space3-camera-map:has(.space3-camera-marker--right:focus-visible) .space3-camera-cone--right, .space3-camera-map:has(.space3-camera-marker--back:hover) .space3-camera-cone--back, .space3-camera-map:has(.space3-camera-marker--back:focus-visible) .space3-camera-cone--back, .space3-camera-map:has(.space3-camera-marker--left:hover) .space3-camera-cone--left, .space3-camera-map:has(.space3-camera-marker--left:focus-visible) .space3-camera-cone--left { opacity: 1; } .space3-camera-map .space3-iso-svg { position: relative; z-index: 1; width: min(46vw, 560px); max-height: min(36vh, 360px); } .space3-camera-marker { position: absolute; z-index: 3; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: center; justify-content: center; justify-items: center; gap: 0.12rem; min-width: clamp(4.4rem, 7vw, 5.9rem); min-height: clamp(4.4rem, 7vw, 5.9rem); padding: 0.2rem 0.32rem; border: 1px solid color-mix(in oklab, var(--primary) 34%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--card) 78%, transparent); color: var(--text); font-weight: 850; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); cursor: pointer; touch-action: manipulation; } .space3-camera-marker:hover, .space3-camera-marker:focus-visible { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .space3-camera-img { grid-column: 1 / -1; justify-self: center; width: clamp(2.2rem, 4.4vw, 3.2rem); height: clamp(2.2rem, 4.4vw, 3.2rem); object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 7px rgba(15, 23, 42, 0.2)); } .space3-camera-marker-number { grid-column: 1 / -1; justify-self: center; width: 1.35rem; height: 1.35rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.78rem; line-height: 1; } .space3-camera-marker--front { right: 12%; top: 2%; } .space3-camera-marker--right { right: 12%; bottom: 0; } .space3-camera-marker--back { left: 12%; bottom: 0; } .space3-camera-marker--left { left: 12%; top: 2%; } .space3-camera-marker--left .space3-camera-img { transform: none; } .space3-camera-marker--front .space3-camera-img { transform: scaleX(-1); } .space3-camera-marker--back .space3-camera-img { transform: scaleY(-1); } .space3-camera-marker--right .space3-camera-img { transform: scaleX(-1) scaleY(-1); } .space3-cube-face { stroke: rgba(15, 23, 42, 0.24); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .space3-camera-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.45rem, 1vw, 0.75rem); width: min(760px, 94vw); } .space3-camera-row .space3-camera-btn { min-width: 0; min-height: 52px; padding-inline: clamp(0.55rem, 1vw, 0.9rem); } .space3-camera-btn.is-correct-camera { border-color: #16a34a; background: color-mix(in oklab, #16a34a 18%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 24%, transparent), 0 10px 24px rgba(15, 23, 42, 0.1); } .space3-camera-marker.is-correct-camera { border-color: #16a34a; background: color-mix(in oklab, #16a34a 18%, var(--card)); } .space3-camera-marker.is-correct-camera .space3-camera-marker-number { background: #16a34a; } .space3-camera-btn.is-wrong-camera { border-color: #dc2626; background: color-mix(in oklab, #dc2626 14%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 20%, transparent), 0 10px 24px rgba(15, 23, 42, 0.1); } .space3-camera-marker.is-wrong-camera { border-color: #dc2626; background: color-mix(in oklab, #dc2626 14%, var(--card)); } .space3-camera-marker.is-wrong-camera .space3-camera-marker-number { background: #dc2626; } .cognitive-stage.is-input-locked .space3-camera-marker { opacity: 0.58; } .cognitive-stage.is-input-ready .space3-camera-marker { opacity: 1; } .space3-workspace.is-correct-response .space3-panel--photo .space3-side-grid { border-color: #16a34a; } .space3-workspace.is-error-response .space3-panel--photo .space3-side-grid { border-color: color-mix(in oklab, #dc2626 64%, var(--border)); } @media (max-width: 760px) { .cognitive-stage--space3 { padding-inline: 0.65rem; padding-bottom: 0.75rem; } .space3-workspace { width: min(96vw, 520px); grid-template-columns: 1fr; gap: 0.7rem; } .space3-panel--photo { transform: none; } .space3-side-grid { width: min(70vw, 285px); min-width: 0; } .space3-camera-map { width: min(96vw, 500px); min-height: 282px; padding: 2.15rem 1rem; } .space3-iso-svg { width: min(94vw, 460px); max-height: 30vh; } .space3-camera-map .space3-iso-svg { width: min(78vw, 360px); } .space3-camera-marker { min-width: 4.35rem; min-height: 3.85rem; padding: 0.16rem 0.26rem; gap: 0.04rem 0.2rem; } .space3-camera-img { width: 2rem; height: 2rem; } .space3-camera-marker-number { width: 1.15rem; height: 1.15rem; font-size: 0.68rem; } .space3-camera-marker--front { right: 7%; top: 4%; } .space3-camera-marker--right { right: 7%; bottom: 0; } .space3-camera-marker--back { left: 7%; bottom: 0; } .space3-camera-marker--left { left: 7%; top: 4%; } .space3-camera-row { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(94vw, 420px); } } @media (max-height: 700px) { .cognitive-stage--space3 { gap: 0.55rem; } .space3-workspace { gap: 0.45rem; } .space3-camera-map { min-height: 215px; padding-top: 1.85rem; padding-bottom: 1.85rem; } .space3-camera-img { width: clamp(1.85rem, 3.6vw, 2.55rem); height: clamp(1.85rem, 3.6vw, 2.55rem); } .space3-iso-svg { max-height: 28vh; } .space3-camera-row .space3-camera-btn { min-height: 44px; padding-block: 0.5rem; } } .cognitive-card-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.45rem, 1vw, 0.9rem); max-width: min(900px, 94vw); } .cognitive-card-item { display: grid; gap: 0.28rem; justify-items: center; color: var(--muted); font-size: clamp(0.72rem, 0.9vw, 0.9rem); font-weight: 800; } .cognitive-card-img { width: clamp(54px, 6vw, 92px); height: clamp(54px, 6vw, 92px); } .cognitive-stage--wm2 { gap: clamp(0.75rem, 1.6vw, 1.35rem); } .cognitive-wm2-rule { width: min(760px, 92vw); padding: 0.55rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); color: var(--text); font-size: clamp(0.95rem, 1.1vw, 1.15rem); font-weight: 800; line-height: 1.35; } .cognitive-wm2-presenter { display: grid; justify-items: center; gap: 0.75rem; min-height: clamp(230px, 34vh, 360px); } .cognitive-wm2-presenter[hidden], .cognitive-wm2-response[hidden] { display: none !important; } .cognitive-wm2-phase { color: var(--muted); font-size: clamp(0.9rem, 1vw, 1rem); font-weight: 800; } .cognitive-wm2-presenter-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(0.45rem, 1vw, 0.85rem); width: min(900px, 94vw); } .cognitive-wm2-presenter-card { width: clamp(78px, 10vw, 132px); aspect-ratio: 5 / 7; display: grid; place-items: center; border-radius: 10px; } .cognitive-wm2-presenter-card.is-empty { border: 2px dashed color-mix(in oklab, var(--border) 82%, transparent); } .cognitive-wm2-memory-img, .cognitive-wm2-card-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } .cognitive-wm2-response { display: grid; justify-items: center; gap: clamp(0.75rem, 1.3vw, 1.2rem); width: min(980px, 96vw); } .cognitive-wm2-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.45rem, 0.9vw, 0.8rem); width: min(760px, 94vw); min-height: clamp(110px, 16vh, 160px); padding: clamp(0.65rem, 1.2vw, 1rem); border: 2px dashed color-mix(in oklab, var(--border) 85%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--card) 72%, transparent); } .cognitive-wm2-slots.is-drop-target, .cognitive-wm2-slot.is-drop-target { border-color: color-mix(in oklab, var(--primary) 70%, var(--border)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 14%, transparent); } .cognitive-wm2-slot, .cognitive-wm2-pool-card { aspect-ratio: 5 / 7; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--card); padding: 0.22rem; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-wm2-slot { width: clamp(62px, 7.5vw, 98px); } .cognitive-wm2-slot.is-filled { border-color: color-mix(in oklab, #16a34a 68%, var(--border)); } .cognitive-wm2-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.42rem, 0.8vw, 0.72rem); max-width: min(900px, 96vw); } .cognitive-wm2-pool-card { width: clamp(54px, 6.5vw, 82px); cursor: grab; } .cognitive-wm2-pool-card:active { cursor: grabbing; } .cognitive-wm2-pool-card.is-used { opacity: 0.34; cursor: not-allowed; } .cognitive-wm2-check { min-width: 130px; } @media (max-width: 720px) { .cognitive-wm2-presenter { min-height: clamp(190px, 30vh, 280px); } .cognitive-wm2-slots { min-height: 96px; } } .cognitive-grid-cell .cognitive-grid-asset { width: 78%; height: 78%; } .cognitive-grid-cell.is-empty { visibility: hidden; pointer-events: none; } .cognitive-block-overlay, .cognitive-complete-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.5rem); background: color-mix(in oklab, var(--bg) 76%, transparent); } .cognitive-feedback-card { width: min(620px, 94vw); display: grid; gap: 1rem; justify-items: center; text-align: center; padding: clamp(1.1rem, 2.4vw, 2rem); border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); box-shadow: 0 20px 55px rgba(15, 23, 42, 0.18); } .cognitive-feedback-card h3, .cognitive-feedback-card p { margin: 0; } .cognitive-feedback-kicker { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0; } .cognitive-feedback-metrics { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .cognitive-feedback-metrics span { display: grid; gap: 0.15rem; padding: 0.75rem; border-radius: 8px; background: color-mix(in oklab, var(--accent) 9%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); } @media (max-width: 620px) { .cognitive-feedback-metrics { grid-template-columns: 1fr; } } @keyframes cognitiveIgnoredInput { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-3px); } 70% { transform: translateX(3px); } } .cognitive-stones-frame { width: min(100%, 1100px); height: min(68vh, 760px); border: 1px solid var(--border); border-radius: 8px; background: #ffffff; } .instruction-generic-demo { display: grid; place-items: center; width: min(300px, 70vw); aspect-ratio: 1.8; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--accent); font-weight: 900; font-size: clamp(1.3rem, 4vw, 2.4rem); } /* Compact registry layout for the expanded training catalogue */ .training-page .training-modes, .training-deck .training-modes { display: flex; flex-direction: column; grid-template-columns: none; gap: clamp(0.8rem, 1.2vw, 1.1rem); overflow-x: visible; } .training-page .mode-group-row { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.45rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .training-page .mode-group-toggle { min-height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); padding: 0.45rem 0.7rem; font-size: clamp(0.82rem, 0.9vw, 0.95rem); font-weight: 750; letter-spacing: 0; } .training-page .mode-group-toggle.is-open, .training-page .mode-group-toggle.active { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); background: var(--accent-soft); color: var(--accent-soft-contrast); } .training-page .mode-group-panels { width: 100%; align-items: stretch; gap: 0; } .training-page .mode-group-panel { width: 100%; display: none; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(0.55rem, 0.9vw, 0.85rem); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .training-page .mode-group-panel.is-open { display: grid; } .training-page .training-mode-btn { min-height: clamp(150px, 14vw, 172px); height: 100%; padding: 1.15rem 2.8rem 1.15rem 0.95rem; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.7rem; row-gap: 0.32rem; align-content: center; align-items: center; justify-items: start; text-align: left; border-radius: 8px; border-color: color-mix(in oklab, var(--border) 88%, var(--text) 12%); background: color-mix(in oklab, var(--card) 94%, var(--accent-secondary-soft) 6%); box-shadow: var(--shadow-subtle); transform: none; } .training-page .training-mode-btn.active { border-color: color-mix(in oklab, var(--accent) 52%, var(--border)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent); } .training-page .training-mode-btn .mode-icon { grid-column: 1; grid-row: 1 / span 2; } .training-page .training-mode-btn .mode-icon--registry { width: 42px; height: 42px; border-radius: 8px; background: color-mix(in oklab, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); color: var(--accent-readable); font-size: 0.82rem; font-weight: 850; } .training-page .training-mode-btn .mode-icon-img { max-width: 42px; max-height: 42px; } .training-page .training-mode-btn .home-label { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; width: 100%; font-size: clamp(0.92rem, 0.98vw, 1.02rem); line-height: 1.15; color: var(--text); overflow-wrap: anywhere; } .training-page .training-mode-btn .mode-description { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; width: 100%; color: var(--muted); font-size: clamp(0.74rem, 0.78vw, 0.84rem); line-height: 1.24; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .training-page .training-mode-btn .mode-gear-btn { top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px; font-size: 1rem; box-shadow: none; } @media (hover: hover) and (pointer: fine) { .training-page .training-mode-btn:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--accent) 32%, var(--border)); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); } } @media (max-width: 620px) { .training-page .mode-group-panel { grid-template-columns: 1fr; } .training-page .training-mode-btn { min-height: 120px; } } /* Flat training catalogue and cognitive domain colours */ .training-page .training-modes, .training-deck .training-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(0.55rem, 0.9vw, 0.85rem); align-items: stretch; } .training-page .mode-group-row, .training-page .mode-group-panels { display: none; } .mode-btn.red { background: #D01C1F; color: var(--text-on-dark); border-color: transparent; } .mode-btn.blue { background: #2563EB; color: var(--text-on-dark); border-color: transparent; } .mode-btn.yellow { background: #FBBF24; color: #2F2A25; border-color: transparent; } .mode-btn.green { background: #16A34A; color: var(--text-on-dark); border-color: transparent; } .training-page .training-mode-btn.red, .training-page .training-mode-btn.blue, .training-page .training-mode-btn.yellow, .training-page .training-mode-btn.green, .program-mode-overlay .training-mode-btn.red, .program-mode-overlay .training-mode-btn.blue, .program-mode-overlay .training-mode-btn.yellow, .program-mode-overlay .training-mode-btn.green { --mode-accent: var(--accent); --mode-soft: color-mix(in oklab, var(--mode-accent) 10%, var(--card)); --mode-border: color-mix(in oklab, var(--mode-accent) 38%, var(--border)); background: var(--mode-soft); border-color: var(--mode-border); color: var(--text); } .training-page .training-mode-btn.red, .program-mode-overlay .training-mode-btn.red { --mode-accent: #D01C1F; } .training-page .training-mode-btn.blue, .program-mode-overlay .training-mode-btn.blue { --mode-accent: #2563EB; } .training-page .training-mode-btn.yellow, .program-mode-overlay .training-mode-btn.yellow { --mode-accent: #FBBF24; } .training-page .training-mode-btn.green, .program-mode-overlay .training-mode-btn.green { --mode-accent: #16A34A; } .training-page .training-mode-btn.red .mode-icon--registry, .training-page .training-mode-btn.blue .mode-icon--registry, .training-page .training-mode-btn.yellow .mode-icon--registry, .training-page .training-mode-btn.green .mode-icon--registry, .program-mode-overlay .training-mode-btn.red .mode-icon--registry, .program-mode-overlay .training-mode-btn.blue .mode-icon--registry, .program-mode-overlay .training-mode-btn.yellow .mode-icon--registry, .program-mode-overlay .training-mode-btn.green .mode-icon--registry { background: var(--mode-accent); border-color: transparent; color: var(--text-on-dark); } .training-page .training-mode-btn.yellow .mode-icon--registry, .program-mode-overlay .training-mode-btn.yellow .mode-icon--registry { color: #2F2A25; } .training-page .training-mode-btn.active { border-color: color-mix(in oklab, var(--mode-accent, var(--accent)) 62%, var(--border)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--mode-accent, var(--accent)) 18%, transparent); } @media (hover: hover) and (pointer: fine) { .training-page .training-mode-btn:hover { transform: none; border-color: color-mix(in oklab, var(--mode-accent, var(--accent)) 50%, var(--border)); box-shadow: 0 8px 18px color-mix(in oklab, var(--mode-accent, var(--accent)) 18%, transparent); } .program-mode-overlay .training-mode-btn:hover { transform: none; border-color: color-mix(in oklab, var(--mode-accent, var(--accent)) 50%, var(--border)); box-shadow: 0 8px 18px color-mix(in oklab, var(--mode-accent, var(--accent)) 18%, transparent); } .training-programs .program-btn:hover { transform: none; } } /* Settings: editable fields and difficulty progression */ .settings-columns { grid-template-columns: minmax(300px, 0.95fr) minmax(340px, 1.05fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; align-items: stretch; } .settings-column-left, .settings-column-right { display: block; height: 100%; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: clamp(12px, 1.4vw, 18px); } #soundToggleGroup { margin-top: clamp(1.1rem, 2vw, 1.6rem); } .settings-column-left > h3, .settings-column-right > h3 { margin: 0.25rem 0 0.35rem; padding-left: 0; } .settings-adaptive-status { display: grid; gap: 0.3rem; margin: 0.75rem 0 1rem; padding: 0.8rem 0.9rem; border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--accent) 8%, var(--card)); color: var(--text); } .settings-adaptive-status strong { color: var(--accent); font-size: var(--fs-sm); } .settings-adaptive-status span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; } .settings-difficulty-group { padding-left: 0 !important; } .settings-difficulty-list { display: grid; gap: 0.55rem; } .settings-difficulty-note { margin: 0 0 0.2rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; } .settings-difficulty-item { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.65rem 0.75rem; border: 1px solid color-mix(in oklab, var(--border) 74%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--panel) 62%, transparent); } .settings-difficulty-level { display: inline-flex; align-items: center; justify-content: center; min-height: 1.7rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); font-size: var(--fs-xs); font-weight: 900; white-space: nowrap; } .settings-difficulty-text { color: var(--text); font-size: var(--fs-sm); line-height: 1.45; } .program-color-red { background: #D01C1F; color: var(--text-on-dark); border-color: transparent; } .program-color-blue { background: #2563EB; color: var(--text-on-dark); border-color: transparent; } .program-color-yellow { background: #FBBF24; color: #2F2A25; border-color: transparent; } .program-color-green { background: #16A34A; color: var(--text-on-dark); border-color: transparent; } .program-color-red .program-step-meta, .program-color-red .program-step-summary, .program-color-blue .program-step-meta, .program-color-blue .program-step-summary, .program-color-green .program-step-meta, .program-color-green .program-step-summary { color: color-mix(in oklab, var(--text-on-dark) 86%, transparent); } .program-color-yellow .program-step-meta, .program-color-yellow .program-step-summary { color: #5F4310; } @media (max-width: 620px) { .training-page .training-modes, .training-deck .training-modes { grid-template-columns: 1fr; } } /* Quick-Einstellungen aus Training/Programmen: kein Panel im Panel. */ .settings-overlay.is-quick .settings-layout { margin-top: 0; height: 100%; min-height: 0; } .settings-overlay.is-quick .settings-columns { grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } .settings-overlay.is-quick .settings-difficulty-column { display: none; } /* Scaled cognitive instruction viewport: uses the real game DOM inside mockup screens. */ .cognitive-instruction-demo-container { width: 100%; height: 100%; min-height: 0; } .cognitive-demo-screen { position: relative; width: 100%; height: 100%; container-type: size; overflow: hidden; background: var(--bg); color: var(--text); border-radius: 8px; font-family: 'Montserrat', Arial, sans-serif; } .cognitive-demo-gamearea { position: absolute; inset: 0; overflow: hidden; background: var(--bg); } .cognitive-demo-progress { display: none; position: absolute; left: 0; width: 100%; height: 6px; z-index: 70; overflow: hidden; background: var(--disabled-bg); } .cognitive-demo-progress--top { top: 0; } .cognitive-demo-progress--bottom { bottom: 0; } .cognitive-demo-progress-fill { width: 0; height: 100%; background: var(--accent); transition: width 260ms ease; } .cognitive-demo-progress-fill--duration { background: color-mix(in oklab, var(--accent) 68%, #16a34a 32%); } .cognitive-demo-actions { position: absolute; top: 12px; right: 12px; z-index: 74; display: flex; } .cognitive-demo-actions button { min-height: 28px; padding: 0.34rem 0.62rem; border: 0; border-radius: 8px; background: #D01C1F; color: #fff; font: 800 0.72rem/1 'Montserrat', Arial, sans-serif; } .cognitive-demo-screen .cognitive-stage { --cognitive-fixation-align-offset: -10px; --cognitive-stimulus-size: clamp(54px, 10cqw, 96px); padding: 54px 22px 22px; gap: clamp(0.4rem, 1.45cqw, 0.78rem); background: color-mix(in oklab, var(--bg) 90%, transparent); } .cognitive-demo-screen .cognitive-persistent-header { top: 20px; width: min(78%, 640px); gap: 0.18rem; } .cognitive-demo-screen .cognitive-persistent-title { font-size: clamp(0.78rem, 1.55cqw, 1.02rem); line-height: 1.05; } .cognitive-demo-screen .cognitive-persistent-hint { max-width: min(520px, 86%); font-size: clamp(0.58rem, 1.15cqw, 0.78rem); line-height: 1.18; } .cognitive-demo-screen .cognitive-target { min-height: clamp(64px, 22cqh, 116px); } .cognitive-demo-screen .cognitive-asset-shell { border-radius: 10px; } .cognitive-demo-screen .cognitive-go-stop-img, .cognitive-demo-screen .cognitive-arrow-img { width: clamp(54px, 10cqw, 96px); height: clamp(54px, 10cqw, 96px); } .cognitive-demo-screen .cognitive-stage--leftright .cognitive-arrow-img { width: clamp(76px, 15cqw, 132px); height: clamp(76px, 15cqw, 132px); } .cognitive-demo-screen .cognitive-animal-img { width: clamp(68px, 13cqw, 116px); height: clamp(68px, 13cqw, 116px); } .cognitive-demo-screen .cognitive-flanker-assets { gap: clamp(0.16rem, 0.72cqw, 0.38rem); } .cognitive-demo-screen .cognitive-flanker-img { width: clamp(28px, 5cqw, 52px); height: clamp(28px, 5cqw, 52px); } .cognitive-demo-screen .cognitive-choice-prompt, .cognitive-demo-screen .cognitive-sequence-display { max-width: min(86%, 640px); font-size: clamp(0.95rem, 3.8cqw, 1.65rem); line-height: 1.05; } .cognitive-demo-screen .cognitive-response-row { max-width: 92%; gap: 0.42rem; } .cognitive-demo-screen .cognitive-response-btn { min-width: 84px; min-height: 36px; padding: 0.44rem 0.58rem; border-radius: 7px; font-size: clamp(0.6rem, 1.1cqw, 0.76rem); line-height: 1.1; } .cognitive-demo-screen .cognitive-stage--vigilance { --cognitive-vigil-symbol-size: clamp(62px, 14cqw, 108px); } .cognitive-demo-screen .cognitive-stage--vigilance .cognitive-target { min-height: clamp(72px, 22cqh, 116px); } .cognitive-demo-screen .cognitive-vigil-target-guide, .cognitive-demo-screen .cognitive-speed-target-guide { gap: 0.32rem; font-size: clamp(0.58rem, 1.05cqw, 0.74rem); } .cognitive-demo-screen .cognitive-vigil-target-image-slot { width: clamp(26px, 4.6cqw, 42px); height: clamp(26px, 4.6cqw, 42px); } .cognitive-demo-screen .cognitive-speed-target-image-slot { width: clamp(22px, 4cqw, 34px); height: clamp(22px, 4cqw, 34px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide { width: min(62cqw, 390px); max-width: 72%; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide--stacked, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide--stacked { width: min(56cqw, 340px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide-item, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide-item { min-width: 0; width: 100%; gap: 0.28rem; padding: 0.28rem 0.38rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide-content, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide-content { gap: 0.16rem; flex-wrap: wrap; } .cognitive-demo-screen .cognitive-rule-guide-symbol { width: 1.35rem; height: 1.35rem; font-size: 0.72rem; } .cognitive-demo-screen .cognitive-rule-guide-inline-img { width: 1.15rem; height: 1.15rem; } .cognitive-demo-screen .cognitive-rule-guide-inline-img.is-arrow { width: 1.35rem; } .cognitive-demo-screen .cognitive-stage--flex .cognitive-target { width: min(60cqw, 380px); min-height: clamp(112px, 30cqh, 165px); } .cognitive-demo-screen .cognitive-stage--flex-animal, .cognitive-demo-screen .cognitive-stage--flex { gap: clamp(0.34rem, 1.25cqh, 0.68rem); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-sequence, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-sequence { margin-bottom: 0; width: min(82%, 500px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide { margin-bottom: 0; width: min(70%, 440px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-target { min-height: clamp(82px, 24cqh, 144px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-row { margin-top: 0; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn { min-width: min(128px, 26cqw); min-height: 34px; padding: 0.36rem 0.48rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn.has-stacked-icon, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn.has-stacked-icon { min-height: 58px; padding-block: 0.38rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn.has-content-rows, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn.has-content-rows { gap: 0.22rem; min-height: 64px; padding-block: 0.38rem; } .cognitive-demo-screen .cognitive-flex-window-board { width: min(58cqw, 360px); gap: 0.42rem; } .cognitive-demo-screen .cognitive-flex-window { min-height: clamp(86px, 21cqh, 128px); gap: 0.28rem; padding: 0.38rem; } .cognitive-demo-screen .cognitive-flex-window-slot { min-height: clamp(44px, 11cqh, 68px); } .cognitive-demo-screen .cognitive-flex-object { width: clamp(36px, 7cqw, 62px); height: clamp(36px, 7cqw, 62px); } .cognitive-demo-screen .cognitive-prospect-target { min-height: clamp(88px, 24cqh, 148px); } .cognitive-demo-screen .cognitive-prospect-arrow.is-prospect-standard { width: clamp(48px, 9cqw, 82px); height: clamp(48px, 9cqw, 82px); } .cognitive-demo-screen .cognitive-prospect-arrow.is-prospect-special-cue { width: clamp(56px, 10cqw, 94px); height: clamp(56px, 10cqw, 94px); } .cognitive-demo-screen .cognitive-stage--prospective .cognitive-response-row { width: min(58cqw, 300px); gap: 0.36rem; } .cognitive-demo-screen .cognitive-stage--prospective .cognitive-response-btn { min-height: 34px; padding: 0.36rem 0.46rem; } .cognitive-demo-screen .cognitive-response-btn.is-prospect-special { min-width: min(9.5rem, 100%); } .cognitive-demo-screen .cognitive-stage--calculation .cognitive-response-row { width: min(82%, 360px); gap: 0.45rem; } .cognitive-demo-screen .cognitive-stage--calculation .cognitive-response-btn { min-height: 42px; padding: 0.48rem 0.6rem; font-size: clamp(0.9rem, 3.1cqw, 1.32rem); } .cognitive-demo-screen .cognitive-rule-guide { width: min(86%, 560px); gap: 0.32rem; } .cognitive-demo-screen .cognitive-rule-guide-item { min-height: 34px; padding: 0.34rem 0.48rem; border-radius: 7px; font-size: clamp(0.58rem, 1cqw, 0.72rem); } .cognitive-demo-screen .cognitive-rule-sequence { width: min(86%, 520px); } .cognitive-demo-screen .cognitive-rule-sequence-track { gap: 0.18rem; } .cognitive-demo-screen .cognitive-rule-sequence-item { width: 22px; height: 22px; font-size: 0.66rem; } .cognitive-demo-screen .cognitive-grid { gap: clamp(0.16rem, 0.52cqw, 0.34rem); } .cognitive-demo-screen .cognitive-grid--six { width: min(54cqw, 270px); } .cognitive-demo-screen .cognitive-grid--small { width: min(34cqw, 185px); } .cognitive-demo-screen .cognitive-grid-cell { font-size: clamp(0.68rem, 1.35cqw, 0.94rem); border-radius: 7px; } .cognitive-demo-screen .cognitive-grid-cell .cognitive-grid-asset { width: 74%; height: 74%; } .cognitive-demo-screen .cognitive-construct-grids { width: min(76cqw, 430px); gap: 0.58rem; } .cognitive-demo-screen .cognitive-construct-picker { width: min(76cqw, 430px); gap: 0.28rem; } .cognitive-demo-screen .cognitive-construct-picker-btn { width: 32px; height: 32px; } .cognitive-demo-screen .cognitive-stage--logic-sequence, .cognitive-demo-screen .cognitive-stage--logic-matrix, .cognitive-demo-screen .cognitive-stage--construct { gap: clamp(0.38rem, 1.25cqh, 0.72rem); } .cognitive-demo-screen .cognitive-stage--logic-sequence .cognitive-response-row, .cognitive-demo-screen .cognitive-stage--logic-matrix .cognitive-response-row { width: min(82%, 560px); gap: 0.42rem; } .cognitive-demo-screen .cognitive-stage--logic-sequence .cognitive-response-btn, .cognitive-demo-screen .cognitive-stage--logic-matrix .cognitive-response-btn { min-height: 36px; padding: 0.42rem 0.5rem; font-size: clamp(0.68rem, 1.35cqw, 0.92rem); } .cognitive-demo-screen .cognitive-logic-matrix { width: min(78cqw, 600px); gap: clamp(0.28rem, 0.9cqh, 0.44rem); } .cognitive-demo-screen .cognitive-logic-matrix-row { grid-template-columns: minmax(60px, 0.62fr) repeat(2, minmax(50px, 0.72fr)) 26px minmax(58px, 0.72fr); gap: 0.32rem; } .cognitive-demo-screen .cognitive-logic-matrix-label { font-size: clamp(0.58rem, 0.92cqw, 0.74rem); } .cognitive-demo-screen .cognitive-logic-matrix-cell { min-height: clamp(50px, 16cqh, 82px); font-size: clamp(1.1rem, 3cqw, 2rem); } .cognitive-demo-screen .cognitive-logic-card-img { width: clamp(34px, 6cqw, 58px); height: clamp(44px, 9cqh, 76px); } .cognitive-demo-screen .cognitive-logic-card-value { min-width: 1.3rem; min-height: 1.3rem; font-size: 0.72rem; } .cognitive-demo-screen .cognitive-logic-matrix-arrow { font-size: clamp(0.9rem, 2cqw, 1.3rem); } .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix { gap: clamp(0.24rem, 0.9cqh, 0.48rem); } .cognitive-demo-screen .cognitive-logic-pattern-board { width: min(46cqh, 46cqw, 230px); gap: clamp(0.14rem, 0.45cqw, 0.26rem); } .cognitive-demo-screen .cognitive-logic-pattern-cell { border-radius: 7px; box-shadow: 0 5px 12px rgba(15, 23, 42, 0.09); } .cognitive-demo-screen .cognitive-logic-pattern-symbol-card { padding: clamp(0.16rem, 0.48cqw, 0.28rem); } .cognitive-demo-screen .cognitive-logic-pattern-symbol-card.is-missing { font-size: clamp(1rem, 4cqw, 1.7rem); } .cognitive-demo-screen .cognitive-logic-pattern-symbol { width: clamp(13px, 38%, 26px); height: clamp(13px, 38%, 26px); } .cognitive-demo-screen .cognitive-logic-pattern-symbol-card[data-count="1"] .cognitive-logic-pattern-symbol { width: clamp(20px, 52%, 34px); height: clamp(20px, 52%, 34px); } .cognitive-demo-screen .cognitive-logic-matrix-rule { max-width: min(72cqw, 360px); font-size: clamp(0.5rem, 1.05cqw, 0.66rem); } .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix .cognitive-response-row { width: min(72cqw, 360px); gap: clamp(0.22rem, 0.62cqw, 0.34rem); } .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { min-height: clamp(42px, 10cqh, 58px); padding: 0.14rem; } .cognitive-demo-screen .cognitive-stage--divide-driving, .cognitive-demo-screen .cognitive-stage--divide-tower, .cognitive-demo-screen .cognitive-stage--divide-airport { padding: clamp(42px, 12cqh, 56px) clamp(10px, 2.3cqw, 18px) clamp(12px, 2.8cqh, 18px); gap: clamp(0.32rem, 1.25cqh, 0.55rem); } .cognitive-demo-screen .cognitive-stage--divide-airport { justify-content: center; align-items: center; } .cognitive-demo-screen .divide-drive-scene, .cognitive-demo-screen .divide-tower-cockpit, .cognitive-demo-screen .divide-airport-scene { width: min(92%, 720px); border-radius: 8px; } .cognitive-demo-screen .divide-drive-scene, .cognitive-demo-screen .divide-airport-scene { flex: 0 0 auto; height: clamp(220px, 52cqh, 280px); min-height: 220px; } .cognitive-demo-screen .divide-airport-node { width: clamp(48px, 10cqw, 74px); } .cognitive-demo-screen .divide-airport-plane { width: clamp(44px, 9cqw, 68px); } .cognitive-demo-screen .divide-airport-status--demo-bottom { top: auto; bottom: clamp(0.5rem, 1.9cqh, 0.9rem); width: min(560px, calc(100% - 1.4rem)); min-height: 34px; padding: 0.32rem 0.58rem; font-size: clamp(0.58rem, 1.05cqw, 0.76rem); line-height: 1.12; } .cognitive-demo-screen .divide-airport-cooldown, .cognitive-demo-screen .divide-airport-plane-countdown, .cognitive-demo-screen .divide-airport-code { font-size: clamp(0.58rem, 1.05cqw, 0.76rem); } .cognitive-demo-screen .divide-drive-car { width: clamp(68px, 13cqw, 118px); } .cognitive-demo-screen .divide-speed-panel { width: 86%; bottom: 0.52rem; padding: 0.34rem 0.42rem; } .cognitive-demo-screen .divide-speed-header, .cognitive-demo-screen .divide-speed-scale, .cognitive-demo-screen .divide-speed-deviation { font-size: clamp(0.52rem, 0.95cqw, 0.7rem); } .cognitive-demo-screen .divide-speed-meter { height: clamp(14px, 3cqh, 20px); } .cognitive-demo-screen .divide-speed-touch-zones { display: none; } .cognitive-demo-screen .divide-drive-traffic img { width: clamp(34px, 6.4cqw, 58px); height: clamp(34px, 6.4cqw, 58px); } .cognitive-demo-screen .divide-drive-tree-layer { bottom: calc(100% - var(--divide-road-top) + 60px); } .cognitive-demo-screen .divide-drive-tree { width: clamp(66px, 7.4vw, 116px); } .cognitive-demo-screen .divide-drive-tree--2, .cognitive-demo-screen .divide-drive-tree--5 { width: clamp(56px, 6.4vw, 102px); } .cognitive-demo-screen .divide-drive-tree--3 { width: clamp(76px, 8.2vw, 130px); } .cognitive-demo-screen .divide-status-strip, .cognitive-demo-screen .divide-tower-log { font-size: clamp(0.56rem, 1cqw, 0.72rem); } .cognitive-demo-screen .divide-action-row { max-width: 94%; gap: 0.38rem; } .cognitive-demo-screen .divide-action-btn { min-width: 82px; min-height: 34px; padding: 0.36rem 0.46rem; } .cognitive-demo-screen .divide-action-key { font-size: 0.58rem; } .cognitive-demo-screen .divide-tower-cockpit { grid-template-columns: minmax(0, 1.72fr) minmax(150px, 0.74fr); gap: 0.38rem; min-height: 0; height: clamp(205px, 54cqh, 238px); padding: 0.46rem; } .cognitive-demo-screen .divide-tower-radar { min-height: 0; height: 100%; } .cognitive-demo-screen .divide-tower-panel-stack { grid-template-rows: minmax(46px, auto) minmax(46px, auto) minmax(42px, 1fr); gap: 0.32rem; min-height: 0; } .cognitive-demo-screen .divide-tower-panel { gap: 0.18rem; min-height: 46px; padding: 0.36rem 0.42rem; border-radius: 7px; } .cognitive-demo-screen .divide-tower-panel strong { font-size: clamp(0.78rem, 1.45cqw, 0.96rem); } .cognitive-demo-screen .divide-tower-log { min-height: 42px; padding: 0.42rem; } .cognitive-demo-screen .divide-tower-plane { min-width: 66px; padding: 0.24rem 0.32rem; font-size: clamp(0.56rem, 1cqw, 0.68rem); } .cognitive-demo-screen .divide-tower-plane::before { width: 28px; height: 14px; } .cognitive-demo-screen .departure-board { width: min(84%, 620px); gap: 0.28rem; padding: 0.48rem; } .cognitive-demo-screen .departure-board-header, .cognitive-demo-screen .departure-board-row { grid-template-columns: minmax(86px, 0.7fr) minmax(46px, 0.35fr) minmax(100px, 1fr); gap: 0.36rem; } .cognitive-demo-screen .departure-board-row { min-height: 40px; padding: 0.32rem 0.42rem; border-radius: 7px; } .cognitive-demo-screen .departure-board-plane { width: 28px; height: 28px; } .cognitive-demo-screen .departure-board-destination { font-size: clamp(0.78rem, 1.35cqw, 0.96rem); } .cognitive-demo-screen .cognitive-airport-response-row { width: min(84%, 620px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; } .cognitive-demo-screen .cognitive-airport-option-btn { min-height: 42px; padding-inline: 0.5rem; } .cognitive-demo-screen .cognitive-airport-option-plane { width: 1.55rem; height: 1.55rem; } .cognitive-demo-screen .cognitive-wm2-rule { width: min(86%, 620px); padding: 0.42rem 0.62rem; font-size: clamp(0.58rem, 1.05cqw, 0.76rem); } .cognitive-demo-screen .cognitive-stage--wm2 { gap: clamp(0.42rem, 1.25cqh, 0.72rem); } .cognitive-demo-screen .cognitive-wm2-presenter { width: min(90%, 620px); min-height: clamp(100px, 28cqh, 160px); gap: 0.45rem; } .cognitive-demo-screen .cognitive-wm2-presenter-cards { width: min(86%, 520px); gap: 0.32rem; } .cognitive-demo-screen .cognitive-wm2-presenter-card { width: clamp(44px, 8cqw, 72px); } .cognitive-demo-screen .cognitive-wm2-response { width: min(86%, 600px); gap: 0.36rem; } .cognitive-demo-screen .cognitive-wm2-slots { width: min(86%, 520px); min-height: clamp(72px, 18cqh, 112px); padding: 0.42rem; } .cognitive-demo-screen .cognitive-wm2-slot { width: clamp(38px, 6.4cqw, 60px); } .cognitive-demo-screen .cognitive-wm2-pool { max-width: min(86%, 520px); gap: 0.28rem; } .cognitive-demo-screen .cognitive-wm2-pool-card { width: clamp(34px, 5.6cqw, 54px); } .cognitive-demo-screen .cognitive-wm2-check { min-width: 96px; min-height: 34px; padding: 0.42rem 0.7rem; font-size: 0.72rem; } .cognitive-demo-screen .cognitive-stage--rotation .cognitive-target { min-height: clamp(116px, 32cqh, 190px); } .cognitive-demo-screen .cognitive-rotation-pair { gap: clamp(0.6rem, 2.3cqw, 1.35rem); } .cognitive-demo-screen .cognitive-rotation-figure { width: clamp(64px, 12cqw, 106px); height: clamp(64px, 12cqw, 106px); border-width: 2px; } .cognitive-demo-screen .space3-workspace { width: min(94%, 720px); grid-template-columns: minmax(120px, 0.78fr) minmax(0, 1.22fr); gap: 0.45rem; } .cognitive-demo-screen .space3-panel { gap: 0.28rem; } .cognitive-demo-screen .space3-side-grid { width: min(30cqw, 175px); min-width: 110px; gap: 0.14rem; padding: 0.3rem; } .cognitive-demo-screen .space3-camera-map { width: min(54cqw, 350px); min-height: 180px; padding: 1.55rem; } .cognitive-demo-screen .space3-iso-svg { width: min(50cqw, 300px); max-height: 150px; } .cognitive-demo-screen .space3-camera-map .space3-iso-svg { width: min(44cqw, 245px); } .cognitive-demo-screen .space3-camera-marker { min-width: 3.35rem; min-height: 3.05rem; padding: 0.12rem 0.22rem; gap: 0.03rem 0.16rem; } .cognitive-demo-screen .space3-camera-img { width: 1.55rem; height: 1.55rem; } .cognitive-demo-screen .space3-camera-marker-number { width: 1.02rem; height: 1.02rem; font-size: 0.66rem; } .cognitive-demo-screen .space3-camera-marker--front { right: 7%; top: 5%; } .cognitive-demo-screen .space3-camera-marker--right { right: 7%; bottom: 0; } .cognitive-demo-screen .space3-camera-marker--back { left: 7%; bottom: 0; } .cognitive-demo-screen .space3-camera-marker--left { left: 7%; top: 5%; } .cognitive-demo-screen .space3-camera-row { width: min(86%, 520px); gap: 0.36rem; } .cognitive-demo-screen .space3-camera-row .space3-camera-btn { min-height: 34px; padding: 0.36rem 0.48rem; } .cognitive-demo-screen .cognitive-demo-fixation-dot { position: relative; width: clamp(26px, 5.2cqw, 38px); height: clamp(26px, 5.2cqw, 38px); border: 2px solid #fff; border-radius: 999px; background: #D01C1F; box-shadow: 0 0 0 9px rgba(208, 28, 31, 0.14), 0 10px 20px rgba(15, 23, 42, 0.18); animation: cognitiveDemoFixationBlink 900ms steps(1, end) 3; } @keyframes cognitiveDemoFixationBlink { 0%, 48% { opacity: 1; transform: scale(1); } 49%, 100% { opacity: 0.22; transform: scale(0.9); } } .cognitive-demo-tone-pulse { position: absolute; width: 110px; height: 110px; border: 3px solid color-mix(in oklab, var(--accent) 70%, transparent); border-radius: 999px; pointer-events: none; animation: cognitiveDemoTonePulse 3.1s ease-in-out infinite; } .cognitive-demo-reaction-pulse { position: absolute; left: 50%; bottom: clamp(16px, 4cqh, 30px); z-index: 64; transform: translate(-50%, 10px) scale(0.96); padding: 0.34rem 0.68rem; border: 1px solid color-mix(in oklab, #16a34a 54%, var(--border)); border-radius: 999px; background: color-mix(in oklab, #16a34a 14%, var(--card)); color: var(--text); font-size: clamp(0.6rem, 1.1cqw, 0.76rem); font-weight: 900; opacity: 0; transition: opacity 220ms ease, transform 220ms ease; } .cognitive-demo-reaction-pulse.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; } .cognitive-demo-press-indicator { position: absolute; z-index: 78; width: clamp(38px, 7cqw, 68px); height: auto; pointer-events: none; transform: translate(-50%, -50%) scale(0.76); opacity: 0; filter: none; transition: opacity 360ms ease, transform 360ms ease; } .cognitive-demo-press-indicator.is-visible { opacity: 0.96; transform: translate(-50%, -50%) scale(1); } .cognitive-demo-press-indicator.is-fading { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } .cognitive-demo-screen .is-demo-selected { border-color: #16a34a; box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 28%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-demo-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 900; } @keyframes cognitiveDemoTonePulse { 0% { transform: scale(0.62); opacity: 0.12; } 45% { opacity: 0.75; } 100% { transform: scale(1.15); opacity: 0; } } @media (max-width: 620px) { .cognitive-demo-screen .cognitive-stage { padding: 48px 12px 16px; } .cognitive-demo-screen .cognitive-persistent-header { top: 18px; width: min(76%, 420px); } .cognitive-demo-actions { top: 10px; right: 10px; } .cognitive-demo-actions button { min-height: 26px; padding-inline: 0.5rem; font-size: 0.64rem; } .cognitive-demo-screen .cognitive-grid--six { width: min(72%, 285px); } .cognitive-demo-screen .cognitive-grid--small { width: min(58%, 220px); } .cognitive-demo-screen .divide-tower-cockpit { grid-template-columns: 1fr; } .cognitive-demo-screen .divide-tower-radar { min-height: 128px; } .cognitive-demo-screen .space3-workspace { width: min(92%, 390px); grid-template-columns: 1fr; } .cognitive-demo-screen .space3-panel--photo { transform: none; } .cognitive-demo-screen .space3-side-grid { width: min(54cqw, 200px); } .cognitive-demo-screen .space3-camera-map { width: min(88cqw, 340px); min-height: 188px; padding-inline: 1rem; } .cognitive-demo-screen .departure-board-header { display: none; } .cognitive-demo-screen .departure-board-row { grid-template-columns: 1fr; } .cognitive-demo-screen .space3-camera-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-height: 320px) { .cognitive-demo-screen .cognitive-stage { --cognitive-fixation-align-offset: 0; padding: 30px 10px 10px; gap: 0.25rem; } .cognitive-demo-screen .cognitive-persistent-header { top: 10px; width: min(88%, 400px); gap: 0.08rem; } .cognitive-demo-screen .cognitive-persistent-title { font-size: 0.72rem; } .cognitive-demo-screen .cognitive-persistent-hint { max-width: min(360px, 90%); font-size: 0.5rem; line-height: 1.08; } .cognitive-demo-screen .cognitive-target { min-height: clamp(48px, 18cqh, 82px); } .cognitive-demo-screen .cognitive-grid--six { width: min(38cqw, 140px); } .cognitive-demo-screen .cognitive-grid--small { width: min(30cqw, 120px); } .cognitive-demo-screen .cognitive-stage--grid > .cognitive-grid { transform: none; } .cognitive-demo-screen .cognitive-stage--grid { transform: scale(0.9); transform-origin: center; } .cognitive-demo-screen .cognitive-word, .cognitive-demo-screen .cognitive-letter, .cognitive-demo-screen .cognitive-flanker { font-size: 2.35rem; } .cognitive-demo-screen .cognitive-speed-target-guide { gap: 0.18rem; font-size: 0.5rem; } .cognitive-demo-screen .cognitive-speed-target-image-slot { width: 20px; height: 20px; } .cognitive-demo-screen .cognitive-stage--flex-animal, .cognitive-demo-screen .cognitive-stage--flex { gap: 0.24rem; } .cognitive-demo-screen .cognitive-stage--flex-animal { transform: scale(0.84); transform-origin: center; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide { width: min(78%, 360px); max-width: 78%; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide--stacked, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide--stacked { width: min(70%, 320px); } .cognitive-demo-screen .cognitive-rule-guide-item { min-height: 26px; padding: 0.18rem 0.28rem; font-size: 0.52rem; } .cognitive-demo-screen .cognitive-rule-guide-symbol { width: 1rem; height: 1rem; font-size: 0.55rem; } .cognitive-demo-screen .cognitive-rule-guide-inline-img { width: 0.9rem; height: 0.9rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-target { min-height: clamp(40px, 15cqh, 58px); } .cognitive-demo-screen .cognitive-animal-img { width: clamp(34px, 10cqw, 48px); height: clamp(34px, 10cqw, 48px); } .cognitive-demo-screen .cognitive-stage--flex .cognitive-target { min-height: clamp(58px, 20cqh, 80px); } .cognitive-demo-screen .cognitive-flex-window-board { width: min(52cqw, 250px); gap: 0.24rem; } .cognitive-demo-screen .cognitive-flex-window { min-height: clamp(44px, 16cqh, 64px); padding: 0.24rem; } .cognitive-demo-screen .cognitive-flex-window-slot { min-height: clamp(28px, 9cqh, 42px); } .cognitive-demo-screen .cognitive-flex-object { width: clamp(24px, 6cqw, 38px); height: clamp(24px, 6cqw, 38px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn { min-width: min(96px, 24cqw); min-height: 28px; padding: 0.24rem 0.32rem; font-size: 0.52rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn.has-content-rows, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn.has-content-rows, .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn.has-stacked-icon, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn.has-stacked-icon { gap: 0.12rem; min-height: 36px; padding-block: 0.18rem; } .cognitive-demo-screen .cognitive-response-icon { width: 1rem; height: 1rem; } .cognitive-demo-screen .cognitive-response-rowline { gap: 0.12rem; font-size: 0.5rem; } .cognitive-demo-screen .cognitive-logic-matrix { width: min(66cqw, 300px); gap: 0.14rem; } .cognitive-demo-screen .cognitive-logic-matrix-row { grid-template-columns: minmax(42px, 0.58fr) repeat(2, minmax(32px, 0.7fr)) 16px minmax(36px, 0.7fr); gap: 0.14rem; } .cognitive-demo-screen .cognitive-logic-matrix-label { font-size: 0.52rem; } .cognitive-demo-screen .cognitive-logic-matrix-cell { min-height: clamp(28px, 11cqh, 34px); padding: 0.12rem; font-size: 0.94rem; } .cognitive-demo-screen .cognitive-logic-card-img { width: clamp(20px, 4.4cqw, 28px); height: clamp(26px, 6.8cqh, 34px); } .cognitive-demo-screen .cognitive-logic-card-value { right: 0.12rem; bottom: 0.12rem; min-width: 0.86rem; min-height: 0.86rem; font-size: 0.48rem; } .cognitive-demo-screen .cognitive-logic-matrix-arrow { font-size: 0.9rem; } .cognitive-demo-screen .cognitive-stage--logic-matrix { transform: scale(0.86); transform-origin: center; } .cognitive-demo-screen .cognitive-stage--logic-sequence { transform: scale(0.88); transform-origin: center; } .cognitive-demo-screen .cognitive-stage--logic-sequence .cognitive-response-row, .cognitive-demo-screen .cognitive-stage--logic-matrix .cognitive-response-row { width: min(78%, 430px); gap: 0.24rem; } .cognitive-demo-screen .cognitive-stage--logic-sequence .cognitive-response-btn, .cognitive-demo-screen .cognitive-stage--logic-matrix .cognitive-response-btn { min-height: 24px; padding: 0.2rem 0.26rem; font-size: 0.5rem; } .cognitive-demo-screen .departure-board { width: min(76cqw, 360px); gap: 0.16rem; padding: 0.28rem; } .cognitive-demo-screen .departure-board-header, .cognitive-demo-screen .departure-board-row { grid-template-columns: minmax(62px, 0.7fr) minmax(36px, 0.35fr) minmax(76px, 1fr); gap: 0.22rem; } .cognitive-demo-screen .departure-board-row { min-height: 28px; padding: 0.2rem 0.28rem; font-size: 0.56rem; } .cognitive-demo-screen .departure-board-plane { width: 20px; height: 20px; } .cognitive-demo-screen .departure-board-destination { font-size: 0.62rem; } .cognitive-demo-screen .space3-workspace { width: min(90%, 380px); grid-template-columns: minmax(82px, 0.72fr) minmax(0, 1.28fr); gap: 0.25rem; } .cognitive-demo-screen .space3-side-grid { width: min(28cqw, 115px); min-width: 72px; gap: 0.08rem; padding: 0.18rem; } .cognitive-demo-screen .space3-camera-map { width: min(46cqw, 210px); min-height: 112px; padding: 0.8rem; } .cognitive-demo-screen .space3-iso-svg { width: min(42cqw, 170px); max-height: 88px; } .cognitive-demo-screen .space3-camera-marker { min-width: 2.55rem; min-height: 2.25rem; padding: 0.1rem 0.16rem; } .cognitive-demo-screen .space3-camera-img { width: 1.15rem; height: 1.15rem; } .cognitive-demo-screen .space3-camera-marker-number { width: 0.82rem; height: 0.82rem; font-size: 0.52rem; } .cognitive-demo-screen .space3-camera-row { width: min(84%, 380px); gap: 0.24rem; } .cognitive-demo-screen .space3-camera-row .space3-camera-btn { min-height: 28px; padding: 0.24rem 0.32rem; font-size: 0.56rem; } } .info-exercise-demo .cognitive-demo-screen img { margin: 0; border-radius: 0; box-shadow: none; } .info-exercise-demo .cognitive-demo-screen .cognitive-asset-shell--plain, .info-exercise-demo .cognitive-demo-screen .cognitive-stop-asset, .info-exercise-demo .cognitive-demo-screen .cognitive-rotation-figure { background: transparent; border-color: transparent; border-radius: 0; box-shadow: none; } .info-exercise-demo .cognitive-demo-screen .cognitive-response-btn, .info-exercise-demo .cognitive-demo-screen .cognitive-construct-picker-btn, .info-exercise-demo .cognitive-demo-screen .cognitive-grid-cell { align-items: center; justify-content: center; }