/* The Lab Games — shared shell (header, footer) and catalog pages. Every value comes from tokens.css.
 * Everything is .tlg-* so it never collides with a simulation's own CSS. */

.tlg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.tlg-header, .tlg-footer { box-sizing: border-box; font-family: var(--tlg-font); font-size: var(--tlg-text-md); line-height: var(--tlg-leading-body); letter-spacing: normal; text-align: left; text-transform: none; }
.tlg-header *, .tlg-footer * { box-sizing: border-box; }
.tlg-header { position: sticky; top: 0; z-index: 1000; width: 100%; color: var(--tlg-header-text); background: var(--tlg-header-bg); box-shadow: inset 0 -3px 0 var(--tlg-header-rule); /* the teal rule is a shadow, not a border: full-height games size themselves to --tlg-header-h */ --tlg-focus: var(--tlg-home-focus); }
.tlg-header-inner { display: flex; align-items: center; gap: var(--tlg-space-4); width: min(100%, 1440px); min-height: var(--tlg-header-h); margin: 0 auto; padding: var(--tlg-space-2) var(--tlg-space-8); }
.tlg-header a, .tlg-header button, .tlg-footer a { font-family: inherit; }
.tlg-logo { display: inline-flex; align-items: center; gap: var(--tlg-space-2); flex-shrink: 0; min-height: var(--tlg-tap); color: var(--tlg-header-text); font-weight: var(--tlg-weight-regular); text-decoration: none; }
/* The orbit badge: drawn inline (partials/header.html) so it shows on every stamped page, not only ones whose icon sprite is current. */
.tlg-logo-mark { display: inline-flex; flex: none; width: 40px; height: 40px; }
.tlg-logo-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tlg-logo-text { font-family: var(--tlg-font-display); font-size: 22px; letter-spacing: .5px; line-height: 1; white-space: nowrap; }
.tlg-logo-a { color: var(--tlg-logo-a); }
.tlg-logo-b { color: var(--tlg-logo-b); }
.tlg-header-menu { display: flex; align-items: center; gap: var(--tlg-space-4); margin-left: auto; min-width: 0; }
.tlg-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--tlg-space-1); }
.tlg-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tlg-tap); padding: 0 var(--tlg-space-3); border-radius: var(--tlg-radius-full); color: var(--tlg-text-muted); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); text-decoration: none; white-space: nowrap; }
.tlg-nav a:hover { color: var(--tlg-text); background: var(--tlg-surface-2); }
.tlg-nav a[aria-current="page"], .tlg-nav a.is-current { color: var(--tlg-on-solid); background: var(--tlg-subject-solid); }
/* On the navy header: light links; the current course gets a teal underline instead of a filled pill. */
.tlg-header .tlg-nav a { border-radius: var(--tlg-radius-sm); color: var(--tlg-header-muted); }
.tlg-header .tlg-nav a:hover { color: var(--tlg-header-text); background: rgb(255 255 255 / .1); }
.tlg-header .tlg-nav a[aria-current="page"], .tlg-header .tlg-nav a.is-current { color: var(--tlg-header-text); background: transparent; box-shadow: inset 0 -3px 0 var(--tlg-header-rule); }
.tlg-header-tools { display: flex; align-items: center; gap: var(--tlg-space-2); }
.tlg-auth { display: flex; align-items: center; gap: var(--tlg-space-2); min-width: 0; }
.tlg-auth:empty { display: none; }

/* Auth area (rendered by student.js): signed out → Sign in + a two-choice panel; student → avatar menu;
   teacher → Dashboard button + avatar menu. */
.tlg-header .tlg-auth-wrap { position: relative; display: flex; align-items: center; gap: var(--tlg-space-2); font-family: var(--tlg-font); font-size: var(--tlg-text-md); line-height: var(--tlg-leading-heading); }
.tlg-header .tlg-auth-btn { display: inline-flex; align-items: center; gap: var(--tlg-space-2); min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-primary); border-radius: var(--tlg-radius-full); color: var(--tlg-on-solid); background: var(--tlg-primary); font: inherit; font-weight: var(--tlg-weight-bold); text-decoration: none; white-space: nowrap; cursor: pointer; }
.tlg-header .tlg-auth-btn:hover { border-color: var(--tlg-primary-hover); background: var(--tlg-primary-hover); }
.tlg-header .tlg-auth-btn { border-color: var(--tlg-header-rule); }
.tlg-header .tlg-auth-btn:hover { border-color: var(--tlg-header-text); }
.tlg-header .tlg-avatar-btn { display: inline-flex; align-items: center; gap: var(--tlg-space-2); min-height: var(--tlg-tap); padding: 0 var(--tlg-space-2) 0 var(--tlg-space-1); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-weight: var(--tlg-weight-bold); cursor: pointer; }
.tlg-header .tlg-avatar-btn:hover { background: var(--tlg-surface-2); }
.tlg-header .tlg-avatar-btn[data-state="pending"] { border-color: var(--tlg-status-progress-solid); }
.tlg-header .tlg-avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; overflow: hidden; border-radius: var(--tlg-radius-full); color: var(--tlg-on-solid); background: var(--tlg-biology-solid-strong); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); }
.tlg-header .tlg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tlg-header .tlg-avatar[data-role="teacher"] { background: var(--tlg-primary); }
.tlg-header .tlg-avatar-name { display: none; }   /* avatar only; the name heads the account menu (.tlg-menu-who) */
.tlg-header--signed-in .tlg-theme-btn { display: none; }   /* signed in, Dark/Light mode is in the account menu */
.tlg-header .tlg-avatar-mark { color: var(--tlg-status-done-fg); font-weight: var(--tlg-weight-bold); }
.tlg-header .tlg-avatar-btn[data-state="pending"] .tlg-avatar-mark, .tlg-header .tlg-avatar-wait { color: var(--tlg-status-progress-fg); }
.tlg-header .tlg-avatar-wait { font-size: var(--tlg-text-sm); }
.tlg-header .tlg-avatar[data-state="pending"] { background: var(--tlg-earth-solid-strong); }
.tlg-header .tlg-avatar-btn[data-state="in"] { border-color: var(--tlg-status-done-solid); }
.tlg-header .tlg-caret { width: 16px; height: 16px; transform: rotate(90deg); color: var(--tlg-text-subtle); }
/* Locker chip (student.js lockerChip): head icon + Lab Tokens, links to /account/#locker. A dot marks a new shop week. */
.tlg-header .tlg-locker-chip { position: relative; display: inline-flex; align-items: center; gap: var(--tlg-space-1); min-height: var(--tlg-tap); padding: 0 var(--tlg-space-3) 0 var(--tlg-space-2); border: var(--tlg-border-width-strong) solid var(--tlg-header-rule); border-radius: var(--tlg-radius-full); color: var(--tlg-header-text); font-weight: var(--tlg-weight-bold); text-decoration: none; white-space: nowrap; }
.tlg-header .tlg-locker-chip:hover { border-color: var(--tlg-header-text); }
.tlg-header .tlg-locker-head { display: none; }
.tlg-header .tlg-locker-chip.has-head .tlg-locker-head { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.tlg-header .tlg-locker-head :is(img, canvas) { width: 24px; height: 24px; image-rendering: pixelated; }
.tlg-header .tlg-locker-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border: 2px solid var(--tlg-header-bg); border-radius: var(--tlg-radius-full); background: var(--tlg-earth-solid); }
/* 641-1365px: the header row is full (search keeps 220px), so the chip is just the coin (+ dot); the count is in its label and tooltip. */
@media (min-width: 641px) and (max-width: 1365px) {
  .tlg-header .tlg-locker-chip { padding: 0 var(--tlg-space-2); }
  .tlg-header .tlg-locker-chip .tlg-locker-count, .tlg-header .tlg-locker-chip.has-head .tlg-locker-head { display: none; }
}
@media (max-width: 640px) { .tlg-header .tlg-locker-chip { padding: 0 var(--tlg-space-2); } }
.tlg-header .tlg-pop { position: absolute; top: calc(100% + var(--tlg-space-2)); right: 0; z-index: 1100; width: min(340px, calc(100vw - 2 * var(--tlg-space-3))); padding: var(--tlg-space-2); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); color: var(--tlg-text); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-2); }
.tlg-header .tlg-pop[hidden] { display: none; }
/* Popovers and the search list are light panels inside the navy header: back to the page's focus color. */
.tlg-header :is(.tlg-pop, .tlg-hsearch-list) { --tlg-focus: var(--tlg-link); }
.tlg-header .tlg-pop-title { margin: var(--tlg-space-1) var(--tlg-space-2) var(--tlg-space-2); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); }
.tlg-header .tlg-choice { display: flex; align-items: center; gap: var(--tlg-space-3); min-height: 64px; padding: var(--tlg-space-3); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); text-decoration: none; }
.tlg-header .tlg-choice + .tlg-choice { margin-top: var(--tlg-space-1); }
.tlg-header .tlg-choice:hover, .tlg-header .tlg-choice:focus-visible { background: var(--tlg-subject-tint); }
.tlg-header .tlg-choice-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--tlg-radius-sm); color: var(--tlg-subject-fg); background: var(--tlg-subject-tint); }
.tlg-header .tlg-choice-icon svg { width: 24px; height: 24px; }
.tlg-header .tlg-choice-text { display: flex; flex-direction: column; gap: var(--tlg-space-1); }
.tlg-header .tlg-choice-name { font-weight: var(--tlg-weight-bold); }
.tlg-header .tlg-choice-hint { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); line-height: var(--tlg-leading-heading); }
.tlg-header .tlg-menu-who { display: flex; flex-direction: column; gap: var(--tlg-space-1); margin-bottom: var(--tlg-space-1); padding: var(--tlg-space-2) var(--tlg-space-3) var(--tlg-space-3); border-bottom: var(--tlg-border-width) solid var(--tlg-border); }
.tlg-header .tlg-menu-who strong { overflow-wrap: anywhere; }
.tlg-header .tlg-menu-who span { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); overflow-wrap: anywhere; }
.tlg-header .tlg-menu-item { display: flex; align-items: center; width: 100%; min-height: var(--tlg-tap); padding: 0 var(--tlg-space-3); border: 0; border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: none; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.tlg-header .tlg-menu-item:hover, .tlg-header .tlg-menu-item:focus-visible { background: var(--tlg-surface-2); }
.tlg-header .tlg-menu-item--danger { color: var(--tlg-danger-fg); }
/* Student view (Teacher/Admin/Owner accounts looking at the site as a student): drawn by student.js. */
.tlg-viewbar { position: sticky; top: var(--tlg-header-h); z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--tlg-space-1) var(--tlg-space-2); padding: var(--tlg-space-2) var(--tlg-space-4); color: var(--tlg-on-solid); background: var(--tlg-earth-solid-strong); font-weight: var(--tlg-weight-bold); text-align: center; }
.tlg-viewbar-btn { min-height: 36px; padding: 0 var(--tlg-space-3); border: var(--tlg-border-width-strong) solid currentColor; border-radius: var(--tlg-radius-full); color: inherit; background: transparent; font: inherit; cursor: pointer; }
.tlg-viewbar-btn:hover { background: rgba(255, 255, 255, .16); }
.tlg-viewbar-btn:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-on-solid); outline-offset: var(--tlg-focus-offset); }
@media print { .tlg-viewbar { display: none; } }
@media (max-width: 640px) {
  .tlg-header .tlg-avatar-btn .tlg-caret, .tlg-header .tlg-avatar-wait { display: none; }
  .tlg-header .tlg-avatar-btn { padding-right: var(--tlg-space-1); }
  .tlg-header .tlg-pop { position: fixed; top: calc(var(--tlg-header-h) - var(--tlg-space-1)); right: var(--tlg-space-3); left: var(--tlg-space-3); width: auto; }
}

/* Skeleton loaders: shown while a page waits for the server, instead of "Loading…" text. */
.tlg-skeleton { display: grid; gap: var(--tlg-space-3); }
.tlg-skel { display: block; height: var(--tlg-space-4); border-radius: var(--tlg-radius-sm); background: linear-gradient(90deg, var(--tlg-surface-2) 25%, var(--tlg-surface-3) 50%, var(--tlg-surface-2) 75%); background-size: 200% 100%; animation: tlg-shimmer 1.4s ease-in-out infinite; }
.tlg-skel--title { width: 45%; height: var(--tlg-space-8); }
.tlg-skel--short { width: 60%; }
.tlg-skel--block { height: 88px; border-radius: var(--tlg-radius-lg); }
.tlg-skel--cell { height: 56px; }
.tlg-skel-row--5 { --tlg-skel-cols: 5; }
.tlg-skel-row { display: grid; grid-template-columns: repeat(var(--tlg-skel-cols, 3), minmax(0, 1fr)); gap: var(--tlg-space-3); }
@keyframes tlg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .tlg-skel { animation: none; } }

/* Header search: a combobox over the activity registry; submitting goes to the home page's search. */
.tlg-hsearch { position: relative; width: 220px; }
.tlg-hsearch-toggle { display: none; }
.tlg-hsearch-icon { position: absolute; top: calc(var(--tlg-tap) / 2); left: var(--tlg-space-3); width: 18px; height: 18px; color: var(--tlg-text-subtle); transform: translateY(-50%); pointer-events: none; }
.tlg-hsearch-input { width: 100%; min-height: var(--tlg-tap); padding: 0 var(--tlg-space-3) 0 var(--tlg-space-10); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-size: var(--tlg-text-md); }
.tlg-hsearch-input::placeholder { color: var(--tlg-text-subtle); opacity: 1; }
.tlg-hsearch-input:focus { border-color: var(--tlg-focus); }
.tlg-hsearch-list { position: absolute; top: calc(100% + var(--tlg-space-2)); right: 0; z-index: 1100; width: min(380px, calc(100vw - 2 * var(--tlg-space-4))); max-height: min(420px, calc(100vh - var(--tlg-header-h) - var(--tlg-space-8))); margin: 0; padding: var(--tlg-space-2); overflow-y: auto; list-style: none; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-2); }
.tlg-hsearch-list[hidden] { display: none; }
.tlg-hsearch-list li { margin: 0; }
.tlg-header .tlg-hsearch-opt { display: flex; flex-direction: column; min-height: var(--tlg-tap); padding: var(--tlg-space-2) var(--tlg-space-3); border-left: 4px solid var(--tlg-subject-solid); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); line-height: var(--tlg-leading-heading); text-decoration: none; }
.tlg-hsearch-opt[aria-selected="true"], .tlg-hsearch-opt:hover { background: var(--tlg-subject-tint); }
.tlg-hsearch-name { font-weight: var(--tlg-weight-bold); }
.tlg-hsearch-meta { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.tlg-hsearch-empty, .tlg-hsearch-all { padding: var(--tlg-space-2) var(--tlg-space-3); color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.tlg-hsearch-all a { color: var(--tlg-link); font-weight: var(--tlg-weight-bold); }
.tlg-theme-btn, .tlg-overlay .tlg-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tlg-tap); height: var(--tlg-tap); padding: 0; border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: transparent; cursor: pointer; }
.tlg-theme-btn:hover { background: var(--tlg-surface-2); }
.tlg-header :is(.tlg-theme-btn, .tlg-menu-btn) { border-color: var(--tlg-header-control); color: var(--tlg-header-text); }
.tlg-header :is(.tlg-theme-btn, .tlg-menu-btn):hover { background: rgb(255 255 255 / .1); }
.tlg-header .tlg-hsearch-input { border-color: var(--tlg-header-control); }
.tlg-theme-icon { width: 20px; height: 20px; }
.tlg-theme-icon--sun { display: none; }
html[data-theme="dark"] .tlg-theme-icon--moon { display: none; }
html[data-theme="dark"] .tlg-theme-icon--sun { display: block; }
.tlg-menu-btn { display: none; min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: transparent; font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); cursor: pointer; }

/* ── Overlay shell: games locked to the screen height get one floating Menu button ── */
.tlg-overlay { position: fixed; top: var(--tlg-space-2); left: var(--tlg-space-2); z-index: 2147482000; font-family: var(--tlg-font); font-size: var(--tlg-text-md); line-height: var(--tlg-leading-body); }
.tlg-overlay *, .tlg-overlay *::before, .tlg-overlay *::after { box-sizing: border-box; }
.tlg-overlay-btn { display: inline-flex; align-items: center; gap: var(--tlg-space-2); min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4) 0 var(--tlg-space-1); border: var(--tlg-border-width-strong) solid var(--tlg-header-rule); border-radius: var(--tlg-radius-full); color: var(--tlg-header-text); background: var(--tlg-header-bg); font: inherit; font-weight: var(--tlg-weight-bold); box-shadow: var(--tlg-shadow-2); cursor: pointer; }
.tlg-overlay-panel { position: fixed; top: calc(var(--tlg-tap) + var(--tlg-space-4)); left: var(--tlg-space-2); width: min(360px, calc(100vw - 2 * var(--tlg-space-2))); max-height: calc(100vh - var(--tlg-tap) - var(--tlg-space-6)); overflow-y: auto; padding: var(--tlg-space-4); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); color: var(--tlg-text); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-2); }
.tlg-overlay-panel[hidden] { display: none; }
.tlg-overlay-panel .tlg-nav { flex-direction: column; align-items: stretch; margin: 0 0 var(--tlg-space-3); }
.tlg-overlay-panel .tlg-nav a { justify-content: flex-start; }
.tlg-overlay-panel .tlg-footer { margin: var(--tlg-space-4) calc(-1 * var(--tlg-space-4)) calc(-1 * var(--tlg-space-4)); border-radius: 0 0 var(--tlg-radius-lg) var(--tlg-radius-lg); }
.tlg-overlay-panel .tlg-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--tlg-space-5); padding: var(--tlg-space-6) var(--tlg-space-4); }
.tlg-overlay-panel .tlg-footer-brand { grid-column: 1 / -1; }
.tlg-overlay-panel .tlg-footer-bottom { margin-inline: var(--tlg-space-4); }

.tlg-overlay-btn .tlg-logo-mark { width: 32px; height: 32px; }
.tlg-overlay .tlg-overlay-btn:focus-visible { outline-color: var(--tlg-home-focus); }

/* ── Footer (dark in both themes) ───────────────────────────────────────── */
.tlg-footer { margin-top: auto; color: var(--tlg-footer-text); background: var(--tlg-footer-bg); }
.tlg-footer-inner { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--tlg-space-10); max-width: var(--tlg-page-w); margin: 0 auto; padding: var(--tlg-space-12) var(--tlg-space-8) var(--tlg-space-10); }
.tlg-footer-brand p { max-width: 280px; margin: var(--tlg-space-4) 0 0; color: var(--tlg-footer-muted); font-size: var(--tlg-text-md); }
.tlg-footer-logo { display: inline-flex; align-items: center; gap: var(--tlg-space-2); font-family: var(--tlg-font-display); font-size: 20px; letter-spacing: .5px; line-height: 1; text-decoration: none; }
.tlg-footer-logo .tlg-logo-mark { width: 36px; height: 36px; }
.tlg-footer-logo .tlg-logo-a { color: var(--tlg-footer-logo-a); }
.tlg-footer-logo .tlg-logo-b { color: var(--tlg-footer-logo-b); }
.tlg-footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tlg-space-2); }
.tlg-footer-column h2 { margin: 0 0 var(--tlg-space-1); color: var(--tlg-footer-text); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); letter-spacing: var(--tlg-tracking-caps); text-transform: uppercase; }
.tlg-footer-column:nth-of-type(1) h2 { color: var(--tlg-footer-h1); }
.tlg-footer-column:nth-of-type(2) h2 { color: var(--tlg-footer-h2); }
.tlg-footer-column:nth-of-type(3) h2 { color: var(--tlg-footer-h3); }
.tlg-footer-column:nth-of-type(4) h2 { color: var(--tlg-footer-h4); }
.tlg-footer-column a { display: inline-flex; align-items: center; min-height: 32px; color: var(--tlg-footer-muted); font-size: var(--tlg-text-md); text-decoration: none; }
.tlg-footer-column a:hover { color: var(--tlg-footer-text); text-decoration: underline; text-underline-offset: 3px; }
.tlg-footer-bottom { max-width: calc(var(--tlg-page-w) - 2 * var(--tlg-space-8)); margin: 0 auto; padding: var(--tlg-space-4) 0 var(--tlg-space-6); border-top: var(--tlg-border-width) solid var(--tlg-footer-rule); color: var(--tlg-footer-muted); font-size: var(--tlg-text-sm); }

/* ── Focus + skip link (all pages) ──────────────────────────────────────── */
.tlg-skip { position: absolute; left: var(--tlg-space-4); top: -100px; z-index: 2000; padding: var(--tlg-space-2) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font-weight: var(--tlg-weight-bold); box-shadow: var(--tlg-shadow-2); }
.tlg-skip:focus { top: var(--tlg-space-3); }
.tlg-header :focus-visible, .tlg-footer :focus-visible, .tlg-body :focus-visible, .tlg-overlay :focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: var(--tlg-focus-offset); }
.tlg-footer :focus-visible { outline-color: var(--tlg-home-focus); }

/* ── Page base (catalog pages, support) ──────────────────────────────────── */
.tlg-body {
  min-height: 100vh; margin: 0; color: var(--tlg-text); font-family: var(--tlg-font); font-size: var(--tlg-text-md); line-height: var(--tlg-leading-body); -webkit-text-size-adjust: 100%;
  background-color: var(--tlg-bg);
  background-image:
    radial-gradient(60rem 40rem at 0% 0%, color-mix(in srgb, var(--tlg-biology-solid) 10%, transparent), transparent 60%),
    radial-gradient(50rem 35rem at 100% 5%, color-mix(in srgb, var(--tlg-chemistry-solid) 9%, transparent), transparent 60%),
    radial-gradient(45rem 35rem at 85% 90%, color-mix(in srgb, var(--tlg-physics-solid) 9%, transparent), transparent 60%),
    radial-gradient(40rem 30rem at 10% 95%, color-mix(in srgb, var(--tlg-earth-solid) 8%, transparent), transparent 60%),
    linear-gradient(var(--tlg-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tlg-grid-line) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 32px 32px, 32px 32px;
}
.tlg-body *, .tlg-body *::before, .tlg-body *::after { box-sizing: border-box; }
:where(.tlg-body) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; }
:where(.tlg-body) :where(ul, ol) { list-style: none; }
:where(.tlg-body) :where(h1, h2, h3, h4) { font-family: var(--tlg-font); font-weight: var(--tlg-weight-bold); line-height: var(--tlg-leading-heading); }
:where(.tlg-body) :where(p) { max-width: var(--tlg-prose); }
:where(.tlg-body) :where(a) { color: var(--tlg-link); }
.tlg-main { width: min(100%, var(--tlg-page-w)); margin: 0 auto; padding: 0 var(--tlg-space-8) var(--tlg-space-20); }
.tlg-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tlg-body [hidden] { display: none !important; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.tlg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tlg-space-2); min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-subject-solid); border-radius: var(--tlg-radius-full); color: var(--tlg-on-solid); background: var(--tlg-subject-solid); font: inherit; font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); text-decoration: none; cursor: pointer; transition: filter var(--tlg-ease); }
.tlg-btn:hover { filter: brightness(1.1); }
.tlg-btn svg { width: 16px; height: 16px; }
.tlg-btn--ghost { color: var(--tlg-subject-fg); background: transparent; }

/* ── Home: hero on the navy starfield (copy left, sim collage right) ───── */
/* The starfield is CSS only: three offset grids of dots at different sizes and brightness. */
.tlg-hero { margin: 0 calc(50% - 50vw); padding: var(--tlg-space-10) var(--tlg-space-8) var(--tlg-space-12); color: var(--tlg-home-text); --tlg-focus: var(--tlg-home-focus);
  background-color: var(--tlg-space-navy);
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, var(--tlg-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 70px, var(--tlg-star-dim) 50%, transparent 51%),
    radial-gradient(2px 2px at 150px 20px, var(--tlg-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 110px, var(--tlg-star-dim) 50%, transparent 51%);
  background-size: 180px 130px, 120px 90px, 230px 160px, 70px 60px; }
.tlg-hero-inner { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: center; gap: var(--tlg-space-10); width: min(100%, var(--tlg-page-w)); margin: 0 auto; }
.tlg-hero h1 { color: var(--tlg-home-text); font-family: var(--tlg-font-display); font-size: 56px; font-weight: 400; letter-spacing: 1px; line-height: 1.05; scroll-margin-top: calc(var(--tlg-header-h) + var(--tlg-space-4)); }
.tlg-hero-lead { max-width: 44ch; margin-top: var(--tlg-space-4) !important; color: var(--tlg-home-text-muted); font-size: var(--tlg-text-lg); }
.tlg-hero-actions { display: flex; flex-wrap: wrap; gap: var(--tlg-space-3); margin-top: var(--tlg-space-6); }
.tlg-hero .tlg-hero-btn { min-height: 48px; padding-inline: var(--tlg-space-5); border-color: var(--tlg-primary); background: var(--tlg-primary); font-size: var(--tlg-text-md); }
.tlg-hero .tlg-hero-btn--alt { border-color: var(--tlg-home-text-muted); color: var(--tlg-home-text); background: transparent; }
.tlg-hero .tlg-hero-btn--alt:hover { border-color: var(--tlg-home-text); background: rgb(255 255 255 / .08); }
/* The collage: one column per course, two shots stacked; columns 2 and 4 sit a little lower. */
.tlg-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: var(--tlg-space-2); }
.tlg-collage-item:nth-child(4n + 3), .tlg-collage-item:nth-child(4n + 4) { transform: translateY(var(--tlg-space-5)); }
.tlg-collage-item a { position: relative; display: block; overflow: hidden; border-radius: var(--tlg-radius-sm); box-shadow: 0 10px 24px -10px rgb(0 0 0 / .7); outline-offset: 3px; }
.tlg-collage-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #05101f; transition: transform var(--tlg-ease); }
.tlg-collage-item a:hover img { transform: scale(1.03); }
/* The activity's name: shown on hover/focus only (it stays the link's text for screen readers). */
.tlg-collage-name { position: absolute; inset: auto 0 0; padding: var(--tlg-space-5) var(--tlg-space-2) var(--tlg-space-2); color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .78)); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); line-height: 1.25; opacity: 0; transition: opacity var(--tlg-ease); }
.tlg-collage-item a:is(:hover, :focus-visible) .tlg-collage-name { opacity: 1; }
@media (hover: none) { .tlg-collage-name { opacity: 1; } }

/* ── Home: proof strip ─────────────────────────────────────────────────── */
.tlg-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tlg-space-2) var(--tlg-space-8); margin: var(--tlg-space-6) auto 0 !important; padding: var(--tlg-space-3) 0 !important; border-bottom: var(--tlg-border-width) solid var(--tlg-border); }
.tlg-proof li { display: inline-flex; align-items: center; gap: var(--tlg-space-2); color: var(--tlg-text); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); }
.tlg-proof svg { flex: none; width: 22px; height: 22px; color: var(--tlg-link); }

/* ── Home: the course stack (one band per row; each band links to its course page) ── */
.tlg-stack { display: grid; gap: var(--tlg-space-4); margin: var(--tlg-space-8) auto 0; }
.tlg-stack-item { display: grid; gap: var(--tlg-space-4); scroll-margin-top: calc(var(--tlg-header-h) + var(--tlg-space-4)); }
/* Split tile: title + tagline on the left, a strip of screenshots on the right. Plain text, no outline. */
.tlg-stack-tile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--tlg-space-6); width: 100%; padding: var(--tlg-space-5) var(--tlg-space-5) var(--tlg-space-5) var(--tlg-space-8); border: 3px solid #000; border-radius: 14px; color: var(--tlg-subject-tile-text); background: var(--tlg-subject-tile-bg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform var(--tlg-ease), box-shadow var(--tlg-ease); }
.tlg-stack-tile:hover, .tlg-stack-tile:focus-visible { transform: translateY(-2px); box-shadow: var(--tlg-shadow-2); }
.tlg-body .tlg-stack-tile:focus-visible { outline: 3px solid var(--tlg-focus); outline-offset: 3px; }
.tlg-stack-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tlg-space-2); }
.tlg-stack-title { font-family: var(--tlg-font-display); font-size: 32px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.15; }
.tlg-stack-tagline { font-size: var(--tlg-text-lg); font-weight: var(--tlg-weight-bold); line-height: 1.35; }
.tlg-stack-more { display: inline-flex; align-items: center; gap: var(--tlg-space-2); margin-top: var(--tlg-space-1); padding: 2px var(--tlg-space-3); border: 2px solid currentColor; border-radius: var(--tlg-radius-full); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.tlg-stack-thumbs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, calc((100% - 3 * var(--tlg-space-2)) / 4))); gap: var(--tlg-space-2); }
.tlg-stack-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid rgb(0 0 0 / .55); border-radius: var(--tlg-radius-sm); background: rgb(0 0 0 / .2); transition: transform var(--tlg-ease); }
.tlg-stack-tile:hover .tlg-stack-thumbs img, .tlg-stack-tile:focus-visible .tlg-stack-thumbs img { transform: scale(1.03); }
/* ?q= results (the header search's "See all results"), above the bands */
.tlg-results { scroll-margin-top: calc(var(--tlg-header-h) + var(--tlg-space-4)); margin: var(--tlg-space-8) auto 0; padding: 20px 24px; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: 14px; background: var(--tlg-surface); }
.tlg-results-head { margin-bottom: var(--tlg-space-3) !important; font-size: var(--tlg-text-xl); }
.tlg-results ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--tlg-space-2); margin: 0; padding: 0; list-style: none; }
.tlg-results a { display: flex; flex-direction: column; min-height: var(--tlg-tap); padding: var(--tlg-space-2) var(--tlg-space-3); border-left: 4px solid var(--tlg-subject-solid); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); line-height: var(--tlg-leading-heading); text-decoration: none; }
.tlg-results a:hover { background: var(--tlg-subject-tint); }
.tlg-results-name { font-weight: var(--tlg-weight-bold); }
.tlg-results-meta { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }

/* ── Home: review games row (scroll-snap when the eight don't fit) ─────── */
.tlg-games { margin-top: var(--tlg-space-16); }
/* Homepage "Build your scientist" panel: its height is reserved here so nothing shifts; the panel loads its own
   styles (shared/home/scientist-panel.css) when it nears the viewport. */
.tlg-scientist { box-sizing: border-box; min-height: 300px; margin: var(--tlg-space-8) auto 0; border: 1px solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); }
@media (max-width: 760px) { .tlg-scientist { min-height: 600px; } }
.tlg-games-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tlg-space-4); margin-bottom: var(--tlg-space-4); }
.tlg-games h2, .tlg-teach h2 { font-family: var(--tlg-font-display); font-size: var(--tlg-text-2xl); font-weight: 400; letter-spacing: .5px; }
.tlg-games-all { margin-right: auto; color: var(--tlg-link); font-weight: var(--tlg-weight-bold); text-underline-offset: 3px; white-space: nowrap; }
.tlg-games-nav { display: flex; gap: var(--tlg-space-2); }
.tlg-games-arrow { display: grid; place-items: center; width: var(--tlg-tap); height: var(--tlg-tap); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-surface); cursor: pointer; }
.tlg-games-arrow:hover:not(:disabled) { border-color: var(--tlg-subject-solid); background: var(--tlg-subject-tint); }
.tlg-games-arrow:disabled { opacity: .4; cursor: default; }
.tlg-games-arrow[data-dir="-1"] svg { transform: scaleX(-1); }
.tlg-games-arrow svg { width: 20px; height: 20px; }
.tlg-games-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--tlg-space-4)) / 4.3); gap: var(--tlg-space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px var(--tlg-space-3); scrollbar-width: thin; }
.tlg-game { position: relative; display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-1); transition: transform var(--tlg-ease), box-shadow var(--tlg-ease); }
.tlg-game:hover, .tlg-game:focus-within { transform: translateY(-2px); box-shadow: var(--tlg-shadow-2); }
.tlg-game-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 4px solid var(--tlg-subject-tile-bg); background: #05101f; }
.tlg-game-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--tlg-space-2); padding: var(--tlg-space-4); }
.tlg-game-name { font-size: var(--tlg-text-lg); }
.tlg-game-hook { flex: 1; color: var(--tlg-text-muted); font-size: var(--tlg-text-md); line-height: 1.4; }
.tlg-game-play { margin-top: var(--tlg-space-1); }
.tlg-game-play::after { content: ""; position: absolute; inset: 0; }   /* the whole card plays the game */

/* ── Home: teacher section ─────────────────────────────────────────────── */
.tlg-teach { margin-top: var(--tlg-space-16); padding: var(--tlg-space-8); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-1); }
.tlg-teach-steps { display: grid; gap: var(--tlg-space-3); margin: var(--tlg-space-5) 0 var(--tlg-space-6) !important; }
.tlg-teach-steps li { display: flex; align-items: center; gap: var(--tlg-space-3); font-size: var(--tlg-text-lg); line-height: 1.35; }
.tlg-teach-num { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--tlg-radius-full); color: var(--tlg-on-solid); background: var(--tlg-primary); font-weight: var(--tlg-weight-bold); }
.tlg-teach-btn { border-color: var(--tlg-primary); background: var(--tlg-primary); min-height: 48px; padding-inline: var(--tlg-space-5); }

@media (max-width: 1100px) { .tlg-hero h1 { font-size: 46px; } }
@media (max-width: 900px) {
  .tlg-hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--tlg-space-8); }
  .tlg-stack-tile { grid-template-columns: minmax(0, 1fr); gap: var(--tlg-space-4); padding: var(--tlg-space-5); }
  .tlg-games-row { grid-auto-columns: calc((100% - 2 * var(--tlg-space-4)) / 2.6); }
}
@media (max-width: 640px) {
  .tlg-hero { padding: var(--tlg-space-8) var(--tlg-space-4) var(--tlg-space-10); }
  .tlg-hero h1 { font-size: 40px; }
  .tlg-hero-lead { font-size: var(--tlg-text-md); }
  .tlg-hero-actions .tlg-hero-btn { flex: 1 1 100%; }
  .tlg-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; }
  .tlg-collage-item:nth-child(4n + 3), .tlg-collage-item:nth-child(4n + 4) { transform: none; }
  .tlg-proof { justify-content: flex-start; gap: var(--tlg-space-2) var(--tlg-space-5); }
  .tlg-proof li { font-size: var(--tlg-text-sm); }
  .tlg-stack-title { font-size: 26px; }
  .tlg-stack-tagline { font-size: var(--tlg-text-md); }
  .tlg-stack-thumbs { gap: var(--tlg-space-1); }
  .tlg-stack-thumbs img { border-width: 1px; border-radius: 4px; }
  .tlg-games-head .tlg-games-nav { display: none; }
  .tlg-games-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; gap: var(--tlg-space-3); }
  .tlg-game-body { padding: var(--tlg-space-3); }
  .tlg-game-name { font-size: var(--tlg-text-md); }
  .tlg-game-hook { font-size: var(--tlg-text-sm); }
  .tlg-teach { padding: var(--tlg-space-5); }
  .tlg-teach-steps li { font-size: var(--tlg-text-md); }
}

/* ── Home: simulation showcase (kept for when the showcase returns; showcaseHTML() is not called now) ── */
.tlg-showcase { position: relative; flex: 1 1 auto; min-height: 340px; overflow: hidden; isolation: isolate; border-radius: var(--tlg-radius-lg); background: #05101f; box-shadow: var(--tlg-shadow-2); }
.tlg-showcase-slides { position: absolute; inset: 0; }
.tlg-slide { position: absolute; inset: 0; display: block; opacity: 0; color: #fff; text-decoration: none; transition: opacity .9s ease; }
.tlg-slide.is-active { z-index: 1; opacity: 1; }
.tlg-slide-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: #05101f; }
.tlg-slide-caption { position: absolute; inset: auto 0 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--tlg-space-2); padding: var(--tlg-space-20) var(--tlg-space-6) calc(var(--tlg-space-16) + var(--tlg-space-2)); background: linear-gradient(to top, rgb(3 10 22 / .88) 0%, rgb(3 10 22 / .7) 45%, rgb(3 10 22 / 0) 100%); text-shadow: 0 1px 3px rgb(0 0 0 / .6); line-height: var(--tlg-leading-heading); }
.tlg-slide-name { font-size: var(--tlg-text-xl); font-weight: var(--tlg-weight-bold); }
.tlg-slide-sep, .tlg-slide-subject { color: #e3ecf8; font-size: var(--tlg-text-lg); }
.tlg-slide-go { width: 22px; height: 22px; align-self: center; transition: transform var(--tlg-ease); }
.tlg-slide:hover .tlg-slide-name { text-decoration: underline; text-underline-offset: 4px; }
.tlg-slide:hover .tlg-slide-go { transform: translateX(4px); }
.tlg-body .tlg-slide:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--tlg-focus-width) #fff, inset 0 0 0 calc(2 * var(--tlg-focus-width)) #1d4ed8; }
.tlg-showcase-controls { position: absolute; inset: auto var(--tlg-space-4) var(--tlg-space-4); z-index: 2; display: flex; align-items: center; gap: var(--tlg-space-3); pointer-events: none; }
.tlg-showcase-controls > * { pointer-events: auto; }
.tlg-showcase-pause { display: inline-grid; place-items: center; flex: none; width: var(--tlg-tap); height: var(--tlg-tap); padding: 0; border: var(--tlg-border-width-strong) solid rgb(255 255 255 / .75); border-radius: var(--tlg-radius-full); color: #fff; background: rgb(3 10 22 / .6); cursor: pointer; }
.tlg-showcase-pause:hover { background: rgb(3 10 22 / .85); }
/* pause glyph (two bars) / play glyph (triangle) */
.tlg-showcase-pause-icon { display: block; width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.tlg-showcase-pause[aria-pressed="true"] .tlg-showcase-pause-icon { width: 0; height: 0; margin-left: 4px; border-block: 8px solid transparent; border-inline: 13px solid currentColor; border-right: 0; }
.tlg-showcase-dots { display: flex; flex-wrap: wrap; gap: var(--tlg-space-1); }
.tlg-showcase-dot { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--tlg-radius-full); background: none; cursor: pointer; }
.tlg-showcase-dot::before { content: ""; width: 12px; height: 12px; border: var(--tlg-border-width-strong) solid #fff; border-radius: var(--tlg-radius-full); background: rgb(3 10 22 / .5); box-shadow: 0 0 0 1px rgb(0 0 0 / .35); transition: background var(--tlg-ease), width var(--tlg-ease); }
.tlg-showcase-dot:hover::before { background: rgb(255 255 255 / .6); }
.tlg-showcase-dot[aria-current="true"]::before { width: 28px; background: #fff; }
.tlg-body .tlg-showcase-controls :focus-visible { outline-color: #fff; box-shadow: 0 0 0 calc(var(--tlg-focus-offset) + var(--tlg-focus-width)) #1d4ed8; }

.tlg-search-label { display: block; margin-bottom: var(--tlg-space-2); color: var(--tlg-text); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.tlg-search-field { position: relative; }
.tlg-search-field svg { position: absolute; top: 50%; left: var(--tlg-space-4); width: 18px; height: 18px; color: var(--tlg-text-subtle); transform: translateY(-50%); pointer-events: none; }
.tlg-input { width: 100%; min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4) 0 var(--tlg-space-10); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-size: var(--tlg-text-md); }
.tlg-input::placeholder { color: var(--tlg-text-subtle); opacity: 1; }
.tlg-input:focus { border-color: var(--tlg-focus); }
.tlg-status { min-height: 1.5em; margin: var(--tlg-space-2) 0 0; color: var(--tlg-text-subtle); font-size: var(--tlg-text-sm); }



/* ── Status pills: color + icon + label, everywhere (home roster, gradebook) ── */
.tlg-status-pill { display: inline-flex; align-items: center; gap: var(--tlg-space-1); padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-full); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); white-space: nowrap; }
.tlg-status-pill::before { font-weight: var(--tlg-weight-bold); }
.tlg-status--done { color: var(--tlg-status-done-fg); background: var(--tlg-status-done-bg); }
.tlg-status--done::before { content: "✓"; }
.tlg-status--progress { color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); }
.tlg-status--progress::before { content: "◐"; }
.tlg-status--none { color: var(--tlg-status-none-fg); background: var(--tlg-status-none-bg); }
.tlg-status--none::before { content: "–"; }
.tlg-status--missing { color: var(--tlg-status-missing-fg); background: var(--tlg-status-missing-bg); }
.tlg-status--missing::before { content: "⚠"; }

/* ── Simulation cards ───────────────────────────────────────────────────── */
.tlg-card { min-width: 0; }
.tlg-sim-card { position: relative; display: flex; min-width: 0; height: 100%; flex-direction: column; overflow: hidden; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-1); }
.tlg-sim-thumb { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9; color: var(--tlg-subject-fg); background: var(--tlg-subject-tint); border-bottom: 4px solid var(--tlg-subject-solid); }
.tlg-sim-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tlg-thumb-pattern { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: var(--tlg-subject-solid); opacity: .16; mask-image: radial-gradient(circle at center, #000 15%, transparent 84%); }
.tlg-thumb-icon { width: 56px; height: 56px; color: var(--tlg-subject-fg); }
.tlg-sim-badge { position: absolute; top: var(--tlg-space-3); left: var(--tlg-space-3); display: inline-flex; align-items: center; gap: var(--tlg-space-1); padding: 0 var(--tlg-space-2); border: var(--tlg-border-width) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-surface); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); box-shadow: var(--tlg-shadow-1); }
.tlg-sim-badge svg { width: 16px; height: 16px; color: var(--tlg-subject-fg); }
.tlg-sim-badge--game svg { color: var(--tlg-games-fg); }
.tlg-sim-body { display: flex; flex: 1; flex-direction: column; gap: var(--tlg-space-2); padding: var(--tlg-space-4) var(--tlg-space-5) var(--tlg-space-5); }
.tlg-sim-unit { color: var(--tlg-subject-fg); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.tlg-sim-title { font-size: var(--tlg-text-xl); }
.tlg-sim-desc { color: var(--tlg-text-muted); }
.tlg-sim-meta { display: flex; flex-wrap: wrap; gap: var(--tlg-space-2); }
.tlg-sim-meta:empty { display: none; }
.tlg-meta-chip { display: inline-flex; align-items: center; gap: var(--tlg-space-1); padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-full); color: var(--tlg-text-muted); background: var(--tlg-surface-2); font-size: var(--tlg-text-sm); }
.tlg-meta-chip svg { width: 16px; height: 16px; }
.tlg-sim-action { align-self: flex-start; margin-top: auto; }
.tlg-sim-action::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--tlg-radius-lg); }   /* the whole card opens the activity */
/* No filter on this button: a filter makes the button the containing block of its ::after, which shrinks the
   whole-card link to the button the moment it is hovered, so the screenshot and the rest of the card stop being
   clickable. A white wash over the background gives the same brighten-on-hover look without that side effect. */
.tlg-sim-action:hover { filter: none; }
.tlg-sim-card:hover .tlg-sim-action { background-image: linear-gradient(rgb(255 255 255 / .12), rgb(255 255 255 / .12)); }
.tlg-sim-card:hover { box-shadow: var(--tlg-shadow-2); }
.tlg-sim-card:has(.tlg-sim-action:focus-visible) { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: var(--tlg-focus-offset); }
.tlg-sim-action[data-kind="game"] { border-color: var(--tlg-games-solid-strong); background: var(--tlg-games-solid-strong); }

/* ── Course pages ───────────────────────────────────────────────────────── */
.tlg-breadcrumbs { display: flex; align-items: center; gap: var(--tlg-space-2); margin: var(--tlg-space-6) 0 var(--tlg-space-3); color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.tlg-breadcrumbs a { color: var(--tlg-text-muted); font-weight: var(--tlg-weight-bold); text-underline-offset: 3px; }
.tlg-course-hero { position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--tlg-space-6); overflow: hidden; padding: var(--tlg-space-6) var(--tlg-space-8); border: 3px solid #000; border-radius: 14px; color: var(--tlg-subject-tile-text); background: var(--tlg-subject-tile-bg); box-shadow: var(--tlg-shadow-1); }
.tlg-course-hero-icon { display: grid; place-items: center; width: 88px; height: 88px; flex: 0 0 auto; border: 3px solid #000; border-radius: 14px; color: var(--tlg-space-navy); background: #fff; }
.tlg-course-hero-icon svg { width: 48px; height: 48px; }
.tlg-course-hero-copy { position: relative; z-index: 1; }
.tlg-course-hero h1 { color: inherit; font-family: var(--tlg-font-display); font-size: var(--tlg-text-3xl); font-weight: 400; letter-spacing: 1.5px; }
.tlg-course-hero p { margin-top: var(--tlg-space-2) !important; color: inherit; font-size: var(--tlg-text-lg); font-weight: var(--tlg-weight-bold); letter-spacing: .5px; }
.tlg-course-hero strong { display: block; margin-top: var(--tlg-space-2); color: inherit; font-size: var(--tlg-text-md); letter-spacing: 1px; }
.tlg-course-hero-pattern { position: absolute; top: -25%; right: -3%; z-index: -1; width: 55%; height: 150%; color: #000; opacity: .12; mask-image: linear-gradient(90deg, transparent, #000 55%); }
html:not(.tlg-js) .tlg-filter { display: none; }
.tlg-filter { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: var(--tlg-space-4); margin: var(--tlg-space-8) 0 var(--tlg-space-6); }
.tlg-filter-search { max-width: 460px; }
.tlg-type-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--tlg-space-2); }
.tlg-type-filters button { min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4); border: var(--tlg-border-width) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); cursor: pointer; }
.tlg-type-filters button[aria-pressed="true"] { border-color: var(--tlg-subject-solid); color: var(--tlg-on-solid); background: var(--tlg-subject-solid); }
.tlg-filter > .tlg-status { grid-column: 1 / -1; margin: 0; }
.tlg-unit-jump { display: flex; flex-wrap: wrap; gap: var(--tlg-space-2); margin: var(--tlg-space-1) 0 var(--tlg-space-10); padding: var(--tlg-space-3) 0; border-block: var(--tlg-border-width) solid var(--tlg-border); }
.tlg-unit-jump a { display: inline-flex; align-items: center; gap: var(--tlg-space-2); min-height: 36px; padding: 0 var(--tlg-space-3); border: var(--tlg-border-width) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-surface); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); text-decoration: none; }
.tlg-unit-jump a:hover { border-color: var(--tlg-subject-solid); background: var(--tlg-subject-tint); }
.tlg-unit-jump a span { display: inline-grid; place-items: center; min-width: 24px; padding: 0 var(--tlg-space-1); border-radius: var(--tlg-radius-full); color: var(--tlg-on-solid); background: var(--tlg-subject-solid); font-size: var(--tlg-text-sm); }
.tlg-unit { margin-top: var(--tlg-space-10); scroll-margin-top: calc(var(--tlg-header-h) + var(--tlg-space-4)); }
.tlg-unit-title { display: flex; align-items: center; gap: var(--tlg-space-3); margin-bottom: var(--tlg-space-4) !important; font-size: var(--tlg-text-2xl); scroll-margin-top: calc(var(--tlg-header-h) + var(--tlg-space-4)); }
.tlg-unit-rule { height: 0; flex: 1; border-top: var(--tlg-border-width-strong) dashed var(--tlg-border-strong); }
.tlg-unit-count { display: none; }
.tlg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tlg-space-4); }
.tlg-empty { padding: var(--tlg-space-10); margin-top: var(--tlg-space-8); border: var(--tlg-border-width-strong) dashed var(--tlg-border-strong); border-radius: var(--tlg-radius-lg); color: var(--tlg-text-muted); background: var(--tlg-surface); text-align: center; }
.tlg-empty p { margin-inline: auto; }
.tlg-empty a { color: var(--tlg-link); font-weight: var(--tlg-weight-bold); }
.tlg-empty-course { display: grid; justify-items: center; margin: var(--tlg-space-12) 0; padding: var(--tlg-space-16) var(--tlg-space-8); border: var(--tlg-border-width-strong) dashed var(--tlg-subject-solid); border-radius: var(--tlg-radius-lg); color: var(--tlg-text-muted); background: var(--tlg-surface); text-align: center; }
.tlg-empty-course-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--tlg-space-4); border-radius: var(--tlg-radius-lg); color: var(--tlg-subject-fg); background: var(--tlg-subject-tint); }
.tlg-empty-course-icon svg { width: 32px; height: 32px; }
.tlg-empty-course h2 { max-width: 540px; color: var(--tlg-subject-fg); font-size: var(--tlg-text-2xl); }
.tlg-empty-course p { max-width: 560px; margin-top: var(--tlg-space-3) !important; }
.tlg-soon-sub { margin-top: var(--tlg-space-8) !important; color: var(--tlg-text); font-size: var(--tlg-text-lg); }
.tlg-soon-units { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tlg-space-2); margin-top: var(--tlg-space-3) !important; }
.tlg-soon-units li { padding: var(--tlg-space-1) var(--tlg-space-3); border: var(--tlg-border-width) solid var(--tlg-subject-solid); border-radius: var(--tlg-radius-full); color: var(--tlg-subject-fg); background: var(--tlg-subject-tint); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.tlg-coming-actions .tlg-btn svg { width: 20px; height: 20px; }
.tlg-coming-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tlg-space-3); margin-top: var(--tlg-space-6); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .tlg-header-inner { gap: var(--tlg-space-3); padding-inline: var(--tlg-space-5); }
  .tlg-header-menu { gap: var(--tlg-space-3); }
  .tlg-nav a { padding-inline: var(--tlg-space-2); font-size: var(--tlg-text-sm); }
}
/* 1101–1279px: search is a 44px button that opens the input over the nav links (the input is never narrower than 220px). */
@media (min-width: 1101px) and (max-width: 1279px) {
  .tlg-js .tlg-header:not(.tlg-header--compact) .tlg-header-menu { position: relative; }
  .tlg-js .tlg-header:not(.tlg-header--compact) .tlg-hsearch { width: var(--tlg-tap); }
  .tlg-js .tlg-header:not(.tlg-header--compact) .tlg-hsearch-toggle { display: inline-grid; place-items: center; width: var(--tlg-tap); height: var(--tlg-tap); padding: 0; border: var(--tlg-border-width-strong) solid var(--tlg-header-control); border-radius: var(--tlg-radius-full); color: var(--tlg-header-text); background: transparent; cursor: pointer; }
  .tlg-js .tlg-header:not(.tlg-header--compact) .tlg-hsearch-toggle:hover { background: rgb(255 255 255 / .1); }
  .tlg-js .tlg-header:not(.tlg-header--compact) .tlg-hsearch-toggle svg { width: 20px; height: 20px; }
  .tlg-js .tlg-header:not(.tlg-header--compact) .tlg-hsearch:not(.is-expanded) :is(.tlg-hsearch-input, .tlg-hsearch-icon) { display: none; }
  .tlg-js .tlg-header:not(.tlg-header--compact) .tlg-hsearch.is-expanded { position: absolute; top: 50%; right: 0; z-index: 2; width: 300px; transform: translateY(-50%); }
  .tlg-js .tlg-header:not(.tlg-header--compact) .tlg-hsearch.is-expanded .tlg-hsearch-toggle { display: none; }
}
/* Compact header on activity pages: logo mark, "← <course>", the account area and Menu at every width. The course links
   and search live in the Menu panel, which drops down over the sim instead of pushing it down. */
:root:has(.tlg-header--compact) { --tlg-header-h: 56px; }
.tlg-header--compact .tlg-header-inner { flex-wrap: nowrap; padding-block: 6px; }
.tlg-header--compact .tlg-logo { margin-right: 0; }
.tlg-back { display: inline-flex; align-items: center; gap: var(--tlg-space-1); min-height: var(--tlg-tap); margin-right: auto; padding: 0 var(--tlg-space-3); border-radius: var(--tlg-radius-sm); color: var(--tlg-header-muted); font-weight: var(--tlg-weight-bold); text-decoration: none; white-space: nowrap; }
.tlg-back:hover { color: var(--tlg-header-text); background: rgb(255 255 255 / .1); }
.tlg-js .tlg-header--compact .tlg-menu-btn { display: inline-flex; align-items: center; }
.tlg-js .tlg-header--compact .tlg-header-menu { display: none; position: absolute; top: 100%; right: var(--tlg-space-4); z-index: 1100; width: min(360px, calc(100vw - 2 * var(--tlg-space-3))); flex-direction: column; align-items: stretch; gap: var(--tlg-space-2); margin: 0; padding: var(--tlg-space-3); border-radius: 0 0 var(--tlg-radius-lg) var(--tlg-radius-lg); background: var(--tlg-header-bg); box-shadow: var(--tlg-shadow-2); }
.tlg-js .tlg-header--compact .tlg-header-menu.is-open { display: flex; }
.tlg-js .tlg-header--compact .tlg-nav { flex-direction: column; align-items: stretch; }
.tlg-js .tlg-header--compact .tlg-nav a { justify-content: flex-start; padding-inline: var(--tlg-space-4); font-size: var(--tlg-text-md); }
.tlg-js .tlg-header--compact .tlg-hsearch { order: -1; width: 100%; }
.tlg-js .tlg-header--compact .tlg-hsearch-list { position: static; width: 100%; margin-top: var(--tlg-space-2); box-shadow: none; }
@media (max-width: 1279px) { .tlg-header--compact .tlg-logo-text { display: none; } }
@media (max-width: 640px) { .tlg-js .tlg-header--compact .tlg-header-menu { right: var(--tlg-space-3); } }
@media (max-width: 1100px) {
  .tlg-header-inner { flex-wrap: wrap; }
  .tlg-logo { margin-right: auto; }
  .tlg-menu-btn { display: inline-flex; align-items: center; }
  .tlg-js .tlg-header-menu { display: none; order: 3; flex: 1 0 100%; flex-direction: column; align-items: stretch; margin: 0; padding-bottom: var(--tlg-space-3); }
  .tlg-js .tlg-header-menu.is-open { display: flex; }
  .tlg-js .tlg-nav { flex-direction: column; align-items: stretch; }
  .tlg-js .tlg-nav a { justify-content: flex-start; padding-inline: var(--tlg-space-4); font-size: var(--tlg-text-md); }
  .tlg-js .tlg-hsearch { order: -1; width: 100%; }
  .tlg-js .tlg-hsearch-list { position: static; width: 100%; margin-top: var(--tlg-space-2); box-shadow: none; }
}
@media (max-width: 900px) {
  .tlg-footer-inner { grid-template-columns: repeat(4, 1fr); gap: var(--tlg-space-6); }
  .tlg-footer-brand { grid-column: 1 / -1; }
  .tlg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tlg-main { padding-inline: var(--tlg-space-4); }
  .tlg-showcase { aspect-ratio: 4 / 3.4; }
  .tlg-slide-caption { padding: var(--tlg-space-16) var(--tlg-space-4) calc(var(--tlg-space-16) + var(--tlg-space-1)); }
  .tlg-slide-name { font-size: var(--tlg-text-lg); }
  .tlg-slide-sep, .tlg-slide-subject { font-size: var(--tlg-text-md); }
  .tlg-showcase-controls { inset-inline: var(--tlg-space-3); bottom: var(--tlg-space-3); }
  .tlg-footer-inner { grid-template-columns: 1fr 1fr; padding-inline: var(--tlg-space-5); }
  .tlg-footer-brand { grid-column: 1 / -1; }
  .tlg-footer-bottom { margin-inline: var(--tlg-space-5); }
  .tlg-breadcrumbs { margin-top: var(--tlg-space-5); }
  .tlg-course-hero { align-items: flex-start; flex-direction: column; gap: var(--tlg-space-4); padding: var(--tlg-space-6); }
  .tlg-course-hero-icon { width: 64px; height: 64px; }
  .tlg-course-hero h1 { font-size: var(--tlg-text-2xl); }
  .tlg-course-hero-icon svg { width: 36px; height: 36px; }
  .tlg-course-hero-pattern { right: -20%; width: 100%; }
  .tlg-filter { grid-template-columns: 1fr; align-items: stretch; }
  .tlg-filter-search { max-width: none; }
  .tlg-type-filters { justify-content: flex-start; }
  .tlg-filter > .tlg-status { grid-column: auto; }
  .tlg-grid { grid-template-columns: 1fr; }
  .tlg-unit-rule { display: none; }
}
@media (max-width: 420px) {
  .tlg-header-inner { padding-inline: var(--tlg-space-3); gap: var(--tlg-space-2); }
  .tlg-logo-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tlg-btn, .tlg-stack-tile, .tlg-stack-thumbs img, .tlg-collage-item img, .tlg-game, .tlg-slide, .tlg-slide-go, .tlg-showcase-dot::before { transition: none; }
  .tlg-slide:hover .tlg-slide-go { transform: none; }
  .tlg-stack-tile:hover, .tlg-stack-tile:focus-visible, .tlg-game:hover, .tlg-game:focus-within, .tlg-stack-tile:hover .tlg-stack-thumbs img, .tlg-stack-tile:focus-visible .tlg-stack-thumbs img, .tlg-collage-item a:hover img { transform: none; }
}
@media print { .tlg-header, .tlg-footer, .tlg-filter { display: none !important; } }