/* Theme variables -- dark is the default/original palette (unchanged values from before this variable pass), overridden by [data-theme="light"] set on via the toggle in the tools nav / chrome header (SITE_JS toggleTheme()). Semantic accent colors (success/error/warning) are kept close to their dark-mode hues in light mode too, just darkened slightly for contrast on a white background -- that's how most real light/dark course-platform themes handle it, not a full hue change per mode. */ :root { --bg: #1a1a2e; --bg-alt: #16162a; --bg-panel: #22223a; --bg-deep: #0f0f1e; --surface-sunken: #0f0f1e; --input-bg: #12121f; --text: #eee; --text-secondary: #ccc; --text-muted: #999; --text-faint: #8b8ba3; --text-disabled: #5a5a70; --border: #444; --border-alt: #333; --border-strong: #555; --divider: #262638; --accent: #7ec8e3; --accent-strong: #a8d8ea; --accent-hover: #a8d8ea; --on-accent: #12121f; --success: #6fcf97; --success-bg: #1e3a2c; --success-hover: #85dba9; --on-success: #12121f; --on-success-bg: #fff; --error: #eb5757; --error-bg: #3a1e1e; --on-error-bg: #fff; --warning: #f2c94c; --hover-bg: #1e1e38; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --shadow-sm: 0 1px 2px rgba(0,0,0,.24); --shadow-md: 0 2px 8px rgba(0,0,0,.28); --shadow-lg: 0 8px 24px rgba(0,0,0,.34); --focus-ring: 0 0 0 3px rgba(126,200,227,.45); } :root[data-theme="light"] { --bg: #f4f5f9; --bg-alt: #ffffff; --bg-panel: #ffffff; --bg-deep: #e9eaf0; --surface-sunken: #f1f2f7; --input-bg: #f7f8fb; --text: #1a1a2e; --text-secondary: #333; --text-muted: #666; --text-faint: #667085; --text-disabled: #98a2b3; --border: #ccc; --border-alt: #e4e7ec; --border-strong: #bbb; --divider: #e2e2ea; --accent: #1d6fa5; --accent-strong: #14507a; --accent-hover: #155a87; --on-accent: #fff; --success: #1e7a4c; --success-bg: #e3f5ea; --success-hover: #166139; --on-success: #fff; --on-success-bg: #14532d; --error: #b83232; --error-bg: #fbe6e6; --on-error-bg: #7f1d1d; --warning: #b54708; --hover-bg: #e8e9f2; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow-md: 0 1px 3px rgba(16,24,40,.10), 0 4px 12px rgba(16,24,40,.06); --shadow-lg: 0 12px 32px rgba(16,24,40,.12); --focus-ring: 0 0 0 3px rgba(29,111,165,.30); } .theme-toggle-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--r-sm); padding: .3em .7em; cursor: pointer; font-size: 13px; } .theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle-btn:disabled { cursor: default; opacity: .6; } /* Theme-toggle-spam toast -- see wireThemeToggles()'s rapid-toggle tracking in SITE_JS. Fixed/centered so it reads the same regardless of which theme-toggle button (chrome nav vs. the static lesson-page one) triggered it. */ .theme-spam-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(0); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .6em 1.1em; font-size: 13px; color: var(--text-secondary); box-shadow: var(--shadow-lg); z-index: 9999; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; } .theme-spam-toast--shown { opacity: 1; transform: translateX(-50%) translateY(-6px); } /* Final-answer toast (all 3 jokes seen) -- offers an actual Light/Dark choice instead of just text, so it needs real pointer events and room for two buttons, unlike the plain auto-hiding message toasts above. */ .theme-spam-toast--choice { pointer-events: auto; display: flex; flex-direction: column; gap: .5em; align-items: center; text-align: center; } .theme-spam-toast__choices { display: flex; gap: .6em; } /* Global focus ring + transitions -- was entirely absent (design review finding) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } button, .flashcard__btn, .mark-complete, .theme-toggle-btn, a { transition: background .15s, border-color .15s, box-shadow .15s, color .15s; } @media print { *, *::before, *::after { box-shadow: none !important; } } .local-nav { position: sticky; top: 0; z-index: 99999; display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .6em 1em; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: 14px; border-bottom: 1px solid var(--border-alt); box-shadow: var(--shadow-sm); } .local-nav__link { color: var(--accent); text-decoration: none; } .local-nav__link:hover { text-decoration: underline; } .local-nav__dead { color: var(--text-disabled); } #site-chrome { font-family: system-ui, sans-serif; font-size: 14px; background: var(--bg-alt); color: var(--text); border-right: 1px solid var(--border-alt); max-width: 320px; /* Parent (.course-player__content on captured pages, .lesson-page__layout on generated quiz pages) is a flex row with a real height constraint (fixed to the viewport) -- without height:100%/min-height:0 here, this flex item just grows past that height with its own content (all chapters' full lesson lists) instead of stretching to match and scrolling internally, and a flex item's default min-height:auto defeats align-items:stretch the moment content is taller than the container. */ height: 100%; min-height: 0; overflow-y: auto; } /* Layout for generated (non-captured) quiz pages -- these have no Thinkific-captured flex/fixed scaffolding of their own (unlike real lesson pages, which bring .course-player__content/.course-player with them from the capture), so they need their own minimal equivalent: a fixed, full-viewport two-column row housing #site-chrome + scrollable quiz content, with the nav bar/notes-panel/scripts as plain body-level siblings after it (so they overlay on top via .local-nav's position:sticky, same as on real lesson pages, instead of being pushed below the two-column block in normal flow). */ body.lesson-page { margin: 0; } .lesson-page__layout { position: fixed; inset: 0; display: flex; } .lesson-page__main { /* padding-top needs to clear .local-nav, a body-level sibling (not a child of this fixed layout) that overlays the top of the viewport via position:sticky with no real scrolling ancestor -- see .local-nav's own comment. On a real captured lesson page the video/title above the fold happens to be taller than the nav bar already, so the overlay never visibly clips anything there; this synthetic page has no such buffer, so its own content (the

right at the top) gets its top cut off by the nav bar without this. --nav-h is set in JS from the nav's actual rendered height (which varies: it wraps to 2 lines on a narrow/zoomed viewport), falling back to a generous static estimate for the brief window before that JS runs. */ flex: 1; overflow-y: auto; box-sizing: border-box; padding: 2em; padding-top: calc(2em + var(--nav-h, 60px)); background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; } .lesson-page__main h1 { margin-top: 0; } #site-chrome .chrome-error { padding: 1em; color: var(--text-faint); font-size: 13px; line-height: 1.5; } .chrome-header { padding: 1em; border-bottom: 1px solid var(--border-alt); } .chrome-header__title { color: var(--accent); text-decoration: none; font-weight: 600; } .chrome-header__title:hover { text-decoration: underline; } .chapter__header { padding: .7em 1em; cursor: pointer; font-weight: 600; color: var(--accent-strong); border-bottom: 1px solid var(--divider); display: flex; justify-content: space-between; align-items: center; gap: .5em; } .chapter__header:hover { background: var(--hover-bg); } .chapter__count { font-size: 11px; font-weight: 400; color: var(--text-faint); white-space: nowrap; } .chapter__count--complete { color: var(--success); } .chapter__panel { padding: .3em 0; } .chapter__lessons { list-style: none; margin: 0; padding: 0; } .chapter__lessons li { margin: 0; } .chapter__empty { padding: .5em 1em; color: var(--text-faint); font-style: italic; font-size: 13px; } .lesson-link { display: flex; align-items: center; gap: .4em; padding: .4em 1em .4em 1.2em; color: var(--text-secondary); text-decoration: none; font-size: 13px; } .lesson-link:hover { background: var(--hover-bg); color: var(--accent); } .lesson-link--active { background: var(--hover-bg); color: var(--accent); font-weight: 600; } .lesson-link__check { display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 50%; box-sizing: border-box; } .lesson-link__check--complete { border-color: var(--success); background: var(--success); position: relative; } .lesson-link__check--complete::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--bg-alt); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Warned completion: a yellow triangle instead of the green check -- still completed, just flagged as having gone unusually fast. Built as a CSS triangle (border trick) rather than an image/icon font so it needs no extra asset and recolors for free with the theme variable. */ .lesson-link__check--warned { border-color: transparent; background: transparent; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--warning); border-radius: 0; } .chapter__count--warned { color: var(--warning); } .chapter__warning-flag { color: var(--warning); font-size: 11px; white-space: nowrap; } /* Only the profile-hub (full-sentence) version wraps to its own line -- the sidebar's icon-only version stays inline next to the count, same row, since there's no room to spare there. */ .chapter__warning-flag--full { display: block; white-space: normal; margin-top: .2em; font-size: 12px; } /* Profile picker + course progress meter, in the chrome header */ .profile-picker { margin-top: .6em; font-size: 13px; } .ph-recurrent { margin-top: 1.5em; padding-top: 1.2em; border-top: 1px solid var(--border-alt); } .recurrent-track-row { margin: .8em 0; } .recurrent-track-row select { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); padding: .4em .6em; border-radius: var(--r-sm); font-size: 14px; } #recurrent-complete-date { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); padding: .4em .6em; border-radius: var(--r-sm); margin-right: .6em; } .profile-picker__current { color: var(--accent-strong); display: flex; align-items: center; gap: .5em; } .profile-picker__switch { color: var(--accent); text-decoration: underline; cursor: pointer; font-size: 12px; background: none; border: none; padding: 0; } .profile-picker__form { display: flex; gap: .4em; } .profile-picker__input { flex: 1; background: var(--bg-deep); border: 1px solid var(--border); color: var(--text); padding: .35em .5em; border-radius: 3px; font-size: 13px; } .profile-picker__submit { background: var(--accent); color: var(--bg-alt); border: none; border-radius: 3px; padding: .35em .8em; font-size: 13px; cursor: pointer; font-weight: 600; } .profile-picker__hint { color: var(--text-faint); font-size: 11px; margin: .3em 0 0; } .course-progress { margin-top: .8em; } .course-progress__bar { height: 8px; background: var(--bg-deep); border-radius: 4px; overflow: hidden; } .course-progress__fill { height: 100%; background: var(--success); width: 0%; transition: width .3s; } .course-progress__pct { margin: .3em 0 0; font-size: 12px; color: var(--text-muted); } .lesson-search { display: block; width: 100%; box-sizing: border-box; margin-top: .8em; background: var(--bg-deep); border: 1px solid var(--border); color: var(--text); padding: .4em .6em; border-radius: 3px; font-size: 13px; } .chapter--search-match { display: block !important; } .lesson-link--search-hidden { display: none !important; } /* Mark-complete toggle -- rendered in .mark-complete-bottom, a sticky BOTTOM bar, instead of the sticky top nav. See that rule below for why "bottom of each lesson" means a sticky bar here rather than a button appended after the reading content in the DOM. */ .mark-complete { background: none; border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: 3px; padding: .3em .8em; font-size: 13px; cursor: pointer; } .mark-complete:hover { border-color: var(--accent); color: var(--accent); } .mark-complete--done { background: var(--success); border-color: var(--success); color: var(--bg-alt); font-weight: 600; } /* Bare running clock next to Mark Complete/Notes -- deliberately no label or goal, see the JS comment on why. Muted so it reads as ambient chrome, not an alert. */ .lesson-timer { font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 13px; padding: .3em .4em; white-space: nowrap; } .mark-complete-banner { background: var(--bg-alt); border-left: 3px solid var(--warning); border-radius: var(--r-sm); padding: .7em 1em; margin: .5em 1em; font-size: 13px; color: var(--text-secondary); box-shadow: var(--shadow-sm); /* Same fix .notes-panel needed and for the same reason -- a plain static body-level sibling of the fixed-position course-player/ lesson-page layer paints BEHIND it regardless of DOM order; without this the banner is invisible, covered by the video/lesson content. */ position: relative; z-index: 1; } .mark-complete-banner--blocked { border-left-color: var(--danger, var(--warning)); } /* Mark Complete + its gating banner, placed inside the actual lesson content (.fr-view's own reading text on a captured page, the quiz result/notice area when that's what's on the page, or .lesson-page__main on a generated quiz/test page) so it sits in the same white content pane as the lesson, right after it -- not as a separate bar in its own band of color. See the JS comment at markBottomAnchor for how that target is picked, and why a few naive-looking approaches (appending into .course-player__content, a flex ROW across video+sidebar; appending as a flex SIBLING of the video within .course-player__content-inner, which ignores that sibling's own visually-overflowing content when positioning the next flex item) land the button somewhere else entirely -- both confirmed live before landing on .fr-view itself. --mark-complete-bottom--floating is the fallback for the rare page with none of those anchors, so the button still renders somewhere rather than silently vanishing. */ .mark-complete-bottom { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; } .mark-complete-bottom .mark-complete { font-size: 15px; padding: .5em 1.2em; } .mark-complete-bottom--inline { margin: 2em 0 1em; padding-top: 1.2em; border-top: 1px solid var(--border-alt); } .mark-complete-bottom--inline .mark-complete-banner { margin: .6em 0 0; flex-basis: 100%; } /* Thinkific's own leftover lesson-nav footer -- confirmed empty (no text, no children) on every captured page checked (17/17 in two chapters). It used to hold Thinkific's own Mark-as-Complete/prev/next controls; the capture process stripped those out but left the now-blank footer shell behind, a plain ~64px white bar sitting right below the lesson content. Harmless on its own, but once our own Mark Complete button is mounted right above it (inside .fr-view, same as this rule's sibling above), the two visually read as one confusing double-decker white strip -- hide the dead one. */ #course-player-footer { display: none; } /* A second, bigger piece of reserved-but-now-dead space: the captured reading pane's content wrapper (hashed class, confirmed the same "_content_1yintd" across every captured lesson page checked in two chapters -- same Thinkific/Ember build) carries an 80px block ::after spacer, presumably originally sized to leave room for Thinkific's own in-pane complete/next controls. Nothing fills it now -- same dead-space problem as #course-player-footer above, just from a generated pseudo-element instead of a real one, so !important to beat it regardless of the original rule's specificity/order. If a future capture comes from a different Thinkific build with a different hash, this selector simply stops matching -- harmless, not a breakage, just the old dead space would reappear on pages from that build. */ ._content_1yintd::after { content: none !important; } /* The real root of the dead space below text/images/video on a captured lesson page: the wrapper around BOTH the video player AND the article text (hashed class, stable substring "_videoproxy__wrapper" across every captured page checked) has its own box height pinned to whatever the content pane's viewport-visible height happens to be (confirmed live: exactly matched .course-player__content-inner's clientHeight, which itself varies with the browser window), NOT to the height its actual content (video + full article text, or video + images) needs. Its real content spills out past that pinned box via overflow:visible, and since flex/flow siblings are positioned from each other's BOX size, not visual overflow, the pane's scrollable area ends up with that fixed box height reserved regardless of how long or short the real content is -- too little box height shows the button/content clipped mid-page; too much (a tall window, short lesson) leaves blank reserved space below everything, independent of whether the lesson has text, images, or a video. Freeing it to size to its actual content fixes both directions at once. */ [class*="_videoproxy__wrapper"] { height: auto !important; } /* The actual root cause of the dead space below the lesson pane (not just the ::after spacer and footer row fixed above): the whole chain of wrapper layers between the page's one genuinely responsive container (.course-player__lesson, a flex child that DOES already fill the real viewport height, confirmed live) and the reading pane itself is frozen at the EXACT pixel dimensions the page happened to be at when it was captured -- .content-modal's own `grid-template-rows: 446px 64px` is the clearest example (the 64px row is the #course-player-footer's reserved track -- hiding that element above didn't free its grid row). None of this comes from an inline style (checked live, all empty) and none of it was findable by walking document.styleSheets either (every lookup by selector or property came back empty despite the rules visibly applying) -- captured/frozen some other way this couldn't pin down, so these are blind overrides verified by their rendered effect rather than by finding and replacing the original rule. Each layer gets whatever sizing keeps it filling its own parent's real (now-responsive) box instead of its frozen capture-time size: flex:1 for a flex child, height:100% for a block/grid child, and grid-template-rows: ...1fr for a grid container's flexible row (keeping any fixed-size header row before it, e.g. .content-surface's 42px title bar, untouched). !important throughout since the original rules' specificity/order can't be inspected to safely rely on beating them otherwise. */ .surface__container { flex: 1 1 auto !important; min-height: 0 !important; } .content-surface { height: 100% !important; grid-template-rows: 42px 1fr !important; } .content-modal-wrapper { height: 100% !important; } .content-modal { height: 100% !important; grid-template-rows: 1fr !important; } .course-player__content-inner { height: 100% !important; } .mark-complete-bottom--floating { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999; padding: .6em 1em; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: 14px; border-top: 1px solid var(--border-alt); box-shadow: var(--shadow-sm); } .mark-complete-bottom--floating .mark-complete-banner { margin: 0; flex-basis: 100%; order: -1; } .notes-panel { background: var(--bg-alt); border: 1px solid var(--border-alt); border-radius: var(--r-md); padding: .8em; margin: .5em 1em; box-shadow: var(--shadow-sm); /* Needs to be a positioned element (any value, doesn't need to move) -- it's a body-level sibling of the captured page's fixed-position .course-player content layer, same as .local-nav. A plain static div there always paints BEHIND a positioned sibling regardless of DOM order, so without this the whole panel renders invisible, covered by the video/lesson content -- confirmed via elementFromPoint landing on the VIDEO element instead of the notes textarea underneath it. */ position: relative; z-index: 1; } .notes-textarea { width: 100%; min-height: 90px; background: var(--bg-deep); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: .5em; font-family: inherit; font-size: 14px; box-sizing: border-box; resize: vertical; } .notes-status { font-size: 12px; color: var(--text-faint); margin-top: .3em; min-height: 1.2em; } .ph-notes__item { border-bottom: 1px solid var(--divider); padding: .6em 0; } .ph-notes__lesson { color: var(--accent); font-size: 14px; text-decoration: none; } .ph-notes__lesson:hover { text-decoration: underline; } .ph-notes__text { color: var(--text-secondary); font-size: 13px; margin: .3em 0 0; white-space: pre-wrap; } .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1em; } .badge-card { background: var(--bg-panel); border: 1px solid var(--border-alt); border-radius: var(--r-lg); padding: 1em; text-align: center; box-shadow: var(--shadow-md); } .badge-card__icon { display: block; font-size: 2em; margin-bottom: .3em; } .badge-card__title { display: block; color: var(--text); font-weight: 600; font-size: 14px; } .badge-card__desc { display: block; color: var(--text-muted); font-size: 12px; margin-top: .3em; } .dashboard-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1em; margin: 1.5em 0; } .dashboard-tile { display: block; text-decoration: none; color: var(--text); transition: border-color .15s; } .dashboard-tile[hidden] { display: none; } /* an author-stylesheet display:block above otherwise beats the UA [hidden] rule -- same fix as .tools-nav span[data-nav-role][hidden] */ .dashboard-tile:hover { border-color: var(--accent); } .dashboard-tile .badge-card__title { color: var(--accent); } .weak-bars { display: flex; flex-direction: column; gap: .5em; margin: .8em 0 1.5em; } .weak-bar { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; align-items: center; gap: .8em; font-size: 13px; } .weak-bar__label { color: var(--text-secondary); overflow-wrap: anywhere; } .weak-bar__label a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-alt); } .weak-bar__label a:hover { color: var(--accent); } .weak-bar__track { background: var(--bg-alt); border-radius: 999px; height: 10px; overflow: hidden; } .weak-bar__fill { display: block; height: 100%; border-radius: 999px; } .weak-bar--bad .weak-bar__fill { background: var(--error); } .weak-bar--mid .weak-bar__fill { background: #d9a441; } .weak-bar--good .weak-bar__fill { background: var(--success); } .weak-bar__pct { color: var(--text-muted); white-space: nowrap; } .weak-bar--unauthored { opacity: .55; } .weak-bar--unauthored .weak-bar__fill { background: repeating-linear-gradient(45deg, var(--text-faint), var(--text-faint) 4px, transparent 4px, transparent 8px); } .weak-bar--unanswered .weak-bar__fill { background: var(--border-alt); } .weak-bar--lowsample .weak-bar__pct { font-style: italic; } .continue-box { background: var(--bg-panel); border: 1px solid var(--border-alt); border-radius: var(--r-lg); padding: 1em 1.2em; margin: 1em 0; box-shadow: var(--shadow-md); } .continue-box__cta { display: inline-block; color: var(--accent); font-size: 1.1em; font-weight: 600; text-decoration: none; } .continue-box__cta:hover { text-decoration: underline; } .continue-box__cta::before { content: "▶ "; } .continue-box__done { color: var(--success); font-weight: 600; margin: 0; } .continue-box__meta { color: var(--text-muted); font-size: 13px; margin: .5em 0 0; } .continue-box__stale { color: var(--accent-strong); font-size: 13px; margin: 0 0 .6em; } .continue-box__reviewlinks { display: flex; flex-wrap: wrap; gap: .6em; margin-top: .6em; } .continue-box__reviewlink { color: var(--accent); border: 1px solid var(--border-alt); border-radius: var(--r-md); padding: .4em .8em; font-size: 13px; text-decoration: none; } .continue-box__reviewlink:hover { background: var(--hover-bg); } .testday-section { margin: 1.5em 0; } .testday-section > h2 { border-bottom: 1px solid var(--border-alt); padding-bottom: .3em; } .testday-item { margin: .8em 0; } .testday-item h3 { color: var(--accent); font-size: 15px; margin: 0 0 .2em; } .testday-item p { margin: 0; color: var(--text-secondary); } .testday-verified { color: var(--text-faint); font-size: 12px; border-left: 3px solid var(--border-alt); padding-left: .8em; } .cheatsheet-section { margin: 1.2em 0; break-inside: avoid; } .cheatsheet-section > h2 { border-bottom: 1px solid var(--border-alt); padding-bottom: .2em; font-size: 16px; } .cheatsheet-section li { color: var(--text-secondary); margin: .3em 0; line-height: 1.4; } .cheatsheet-disclaimer { color: var(--text-faint); font-size: 11px; margin-top: 2em; } .airspace-tabs { display: flex; gap: .5em; flex-wrap: wrap; margin: 1em 0; border-bottom: 1px solid var(--border-alt); } .airspace-tabs__btn { background: none; border: none; color: var(--text-muted); padding: .6em 1em; cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent; } .airspace-tabs__btn--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .airspace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2em; } .airspace-card { background: var(--bg-panel); border: 1px solid var(--border-alt); border-radius: var(--r-lg); padding: 1em; box-shadow: var(--shadow-md); } .airspace-card__svg { display: flex; align-items: center; justify-content: center; min-height: 140px; } .airspace-card h3 { margin: .5em 0 .2em; font-size: 15px; } .airspace-card__meaning { color: var(--text-secondary); font-size: 13px; margin: .3em 0; } .airspace-card__op { color: var(--text-muted); font-size: 12px; } .airspace-compare__pickers { display: flex; gap: 1em; margin-bottom: 1em; flex-wrap: wrap; } .airspace-compare__view { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2em; } .airspace-drill__prompt { min-height: 160px; } .airspace-tile__wrap { overflow-x: auto; margin: 1em 0; } .airspace-tile__wrap svg { display: block; max-width: 100%; height: auto; } .wx-row { display: grid; grid-template-columns: 140px 140px 1fr; gap: .8em; padding: .4em 0; border-bottom: 1px solid var(--border-alt); font-size: 13px; align-items: baseline; } .wx-row__label { color: var(--text-muted); } .wx-row__raw { color: var(--accent); } .wx-row__meaning { color: var(--text-secondary); } .wx-warning { color: var(--error); font-size: 13px; margin-top: .6em; } .wx-legality { margin-top: 1.2em; padding: 1em; border: 1px solid var(--border-alt); border-radius: var(--r-md); background: var(--bg-panel); } .wx-legality h3 { margin: 0 0 .5em; font-size: 15px; } .wx-legality__good { color: var(--success); font-size: 13px; margin: .3em 0; } .wx-legality__bad { color: var(--error); font-size: 13px; margin: .3em 0; font-weight: 600; } /* Discussion module -- built, not yet activated on any page (see SITE_JS renderDiscussionThread) */ .discussion-item { border-bottom: 1px solid var(--divider); padding: .6em 0; } .discussion-item__author { color: var(--accent); font-size: 12px; font-weight: 600; } .discussion-item__text { color: var(--text-secondary); font-size: 14px; margin: .3em 0 0; white-space: pre-wrap; } .discussion-form { margin-top: 1em; } .quiz-notice { padding: 1em; background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-secondary); font-family: system-ui, sans-serif; } .quiz-notice strong { display: block; margin-bottom: .3em; } .quiz-practice-launch { display: block; margin: 0 0 1em; background: var(--accent); color: var(--bg-alt); border: none; border-radius: 4px; padding: .6em 1.2em; font-size: 14px; font-weight: 600; cursor: pointer; font-family: system-ui, sans-serif; } .quiz-practice-launch:hover { background: var(--accent-hover); } .quiz-practice-launch:disabled { background: var(--border); color: var(--text-muted); cursor: default; } .quiz-practice-launch:disabled:hover { background: var(--border); } .quiz-practice { font-family: system-ui, sans-serif; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5em; max-width: 700px; box-shadow: var(--shadow-md); } .quiz-practice__progress { color: var(--text-faint); font-size: 13px; margin: 0 0 .5em; } .quiz-practice__question { color: var(--text); font-size: 17px; line-height: 1.5; margin: 0 0 1.2em; } .quiz-scenario { background: var(--bg-panel); border: 1px solid var(--border-alt); border-left: 4px solid var(--accent); border-radius: var(--r-sm); padding: .8em 1em; margin-bottom: .8em; font-size: 15px; font-family: ui-monospace, "SF Mono", Consolas, monospace; white-space: pre-wrap; } .quiz-scenario__ask { font-weight: 600; } .quiz-practice__explanation { color: var(--text-secondary); background: var(--bg); border-left: 3px solid var(--accent); padding: .8em 1em; margin: 0 0 1.2em; line-height: 1.5; } .quiz-practice__show, .quiz-practice__grade { border: 1px solid var(--border-strong); background: none; color: var(--text-secondary); border-radius: 4px; padding: .5em 1.1em; font-size: 14px; cursor: pointer; margin-right: .6em; } .quiz-practice__show:hover { border-color: var(--accent); color: var(--accent); } .quiz-practice__grade-wrap { display: flex; gap: .6em; flex-wrap: wrap; } .quiz-practice__grade--right { border-color: var(--success); } .quiz-practice__grade--right:hover { background: var(--success); color: var(--bg-alt); } .quiz-practice__grade--wrong { border-color: var(--error); } .quiz-practice__grade--wrong:hover { background: var(--error); color: var(--bg-alt); } .quiz-practice__summary { color: var(--text); font-size: 18px; font-weight: 600; margin: 0 0 1em; } .quiz-practice__saved { color: var(--text-faint); font-size: 12px; margin: 1em 0 0; } .quiz-mc-launch { background: var(--success); } .quiz-mc-launch:hover { background: var(--success-hover); } .quiz-cooldown-note { color: var(--text-muted); font-size: 13px; margin: .4em 0 1em; } .quiz-onetime-note { color: var(--text-secondary); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .5em .8em; font-weight: 600; } .ph-history__reset { margin-left: .6em; font-size: 12px; padding: .2em .6em; border-radius: var(--r-sm); border: 1px solid var(--border); background: none; color: var(--text-secondary); cursor: pointer; } .ph-history__reset:hover { border-color: var(--accent); color: var(--accent); } .quiz-mc__choices { display: flex; flex-direction: column; gap: .5em; margin-bottom: 1.2em; counter-reset: choice-num; } .quiz-mc__choice { display: block; text-align: left; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-sm); padding: .7em 1em; font-size: 14px; cursor: pointer; font-family: system-ui, sans-serif; } .quiz-mc__choice:hover:not(:disabled) { border-color: var(--accent); background: var(--hover-bg); } .quiz-mc__choice:disabled { cursor: default; opacity: .75; } .quiz-mc__choice { position: relative; padding-left: 2.2em; min-height: 44px; } .quiz-mc__choice::before { counter-increment: choice-num; content: counter(choice-num); position: absolute; left: .7em; top: 50%; transform: translateY(-50%); opacity: .45; font-size: 11px; border: 1px solid currentColor; border-radius: 3px; width: 1.3em; height: 1.3em; display: flex; align-items: center; justify-content: center; } .quiz-mc__choice--correct { border-color: var(--success) !important; background: var(--success-bg) !important; opacity: 1 !important; color: var(--on-success-bg); } .quiz-mc__choice--wrong { border-color: var(--error) !important; background: var(--error-bg) !important; opacity: 1 !important; color: var(--on-error-bg); } /* Select-all ("choose ALL answers that apply") questions -- a