/* =========================================================
   Quizoma — /templates/ section: the hub, every quiz page and the player preview.
   Published as /assets/templates.css; pages are generated by tools/templates/build.mjs.
   Loaded after brand.css + styles.css (site header/footer). Category colours come in as
   --c / --soft / --ink custom properties set inline from tools/templates/hub.json.
   ========================================================= */

/* The preview page does not load styles.css, so it needs the font face too (same file, cached). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-var.woff2') format('woff2');
}

.tc, .tp {
  --t-bg: #F6F4EF;
  --t-surface: #FFFFFF;
  --t-border: #E4E0D6;
  --t-border-input: #D9D4C8;
  --t-line: #EFEBE2;
  --t-text: #17262A;
  --t-muted: #55656A;
  --t-long: #45565B;
  --t-meta: #3F4F53;
  --t-primary: #0F766E;
  --t-primary-dark: #0B5C55;
  --t-link-hover: #073F3A;
  --t-primary-soft: #E3F1EF;
  --t-selected: #F4FAF9;
  --t-track: #F1EEE6;
  --t-faded: #7A878B;
  --t-easy: #0F766E; --t-easy-soft: #E3F1EF; --t-easy-ink: #0B5C55;
  --t-medium: #B7791F; --t-medium-soft: #FDF0CF; --t-medium-ink: #6B4A00;
  --t-hard: #9F1239; --t-hard-soft: #F8E3E8; --t-hard-ink: #7D0E2C;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--t-text);
}
.tc { background: var(--t-bg); }
.tc a:not([class]), .tc .tc-link-plain { color: var(--t-primary-dark); text-decoration: underline; }
.tc a:not([class]):hover { color: var(--t-link-hover); }
.tc :focus-visible, .tp :focus-visible { outline: 2px solid var(--t-primary); outline-offset: 2px; }
.tc h1, .tc h2, .tc h3, .tp h1 { margin: 0; font-family: inherit; }
:where(.tc, .tp) button { font: inherit; }
.tc [hidden], .tp [hidden] { display: none !important; }

.tc-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tq .tc-wrap { max-width: 1200px; padding-top: 28px; gap: 28px; }

.tc-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; flex: none; }

/* ── Quiz card (hub grid and "More …" row) ─────────────────────────── */
.tc-card {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 14px;
  color: var(--t-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.tc-card:hover { border-color: var(--t-primary); box-shadow: 0 6px 18px rgba(23, 38, 42, .08); }
.tc-strip { display: block; height: 5px; background: var(--c); }
.tc-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-level, .tc-new { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--ink); }
.tc-new { font-weight: 800; background: var(--t-medium-soft); color: var(--t-medium-ink); }
.tc-card-title { font-size: 15px; font-weight: 800; line-height: 1.3; }
.tc-card-desc { font-size: 13px; line-height: 1.5; color: var(--t-muted); flex: 1; }
.tc-card-meta { font-size: 13px; font-weight: 600; color: var(--t-meta); border-top: 1px solid var(--t-line); padding-top: 10px; }

/* =========================================================
   Hub
   ========================================================= */
.th-hero { display: flex; flex-direction: column; gap: 12px; }
.th-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--t-primary); }
.th h1 { font-size: 32px; line-height: 1.1; font-weight: 800; }
.th-intro { font-size: 16px; line-height: 1.55; color: var(--t-long); }

/* Slider: every slide stays in the flow, so the track is as tall as the tallest slide before
   any script runs (no layout shift). */
.th-slider {
  border-radius: 20px;
  overflow: hidden;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  box-shadow: 0 8px 24px rgba(23, 38, 42, .06);
}
.th-viewport { overflow: hidden; }
.th-track { display: flex; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.th-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--t-surface);
}
.th-slide-text { display: flex; flex-direction: column; justify-content: center; gap: 10px; flex: 1 1 420px; min-width: 0; }
.th-kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink); }
.th-slide-title { font-size: 22px; line-height: 1.2; font-weight: 800; }
.th-slide-desc { font-size: 14px; line-height: 1.55; color: var(--t-long); max-width: 560px; }
.th-topics { display: flex; gap: 8px; flex-wrap: wrap; }
.th-topic-chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--ink); }
.th-panel {
  flex: 1 1 320px;
  max-width: 420px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--soft);
  border-radius: 16px;
  padding: 14px;
}
.th-panel-count { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--t-muted); }
.th-panel-count span { font-size: 24px; font-weight: 800; line-height: 1; color: var(--t-text); }
.th-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.th-examples li { display: flex; align-items: center; gap: 10px; background: var(--t-surface); border: 1px solid #ECE8DE; border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 700; }
.th-panel-cta {
  display: flex;
  justify-content: center;
  background: var(--t-primary);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
}
.th-panel-cta:hover { background: var(--t-primary-dark); }
.th-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #ECE8DE;
  padding: 2px 20px 4px;
  background: #FAF8F3;
}
.th-dots { display: flex; align-items: center; gap: 2px; }
.th-dot { background: transparent; border: 0; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.th-dot span { display: block; height: 10px; width: 10px; border-radius: 999px; background: #CFC9BC; transition: width .2s, background .2s; }
.th-dot[aria-current="true"] span { width: 28px; background: var(--t-primary); }
.th-arrows { display: flex; align-items: center; gap: 10px; }
.th-counter { font-size: 14px; font-weight: 700; color: var(--t-muted); }
.th-arrow {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--t-border-input); background: var(--t-surface); color: var(--t-text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.th-arrow:hover { background: var(--t-track); }

/* Sidebar + results */
.th-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.th-side { flex: 1 1 250px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }
.th-label { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--t-muted); text-transform: uppercase; }
.th-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--t-surface); border: 1px solid var(--t-border-input); border-radius: 12px;
  padding: 0 12px; height: 48px; color: var(--t-muted);
}
.th-search:focus-within { outline: 2px solid var(--t-primary); outline-offset: 2px; }
.th-search input { flex: 1; border: 0; outline: none; font: inherit; font-size: 15px; background: transparent; color: var(--t-text); min-width: 0; height: 100%; }
.th-search input::placeholder { color: #6B7A7E; }
.th-tree { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.th-branch { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--t-line); padding-top: 4px; margin-top: 4px; }
.th-node {
  width: 100%; min-height: 44px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  padding: 10px 12px; font-size: 15px; font-weight: 800;
  background: transparent; color: var(--t-text);
}
.th-node--sub { padding: 8px 12px 8px 34px; font-size: 14px; font-weight: 600; }
.th-node:hover { background: #EFEBE2; }
.th-node[aria-current="true"] { background: var(--t-primary-soft); color: #0B3F3A; }
.th-node-name { display: flex; align-items: center; gap: 10px; }
.th-node-name .tc-dot { width: 12px; height: 12px; border-radius: 4px; }
.th-node-count { font-weight: 700; color: var(--t-muted); }
.th-node--sub .th-node-count { font-weight: 600; color: #6B7A7E; }
.th-request {
  background: var(--t-surface); border: 1px dashed var(--t-border-input); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.th-request strong { font-size: 15px; }
.th-request span { font-size: 14px; line-height: 1.5; color: var(--t-muted); }
.th-request a { font-size: 14px; font-weight: 700; }

.th-results { scroll-margin-top: 80px; flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.th-view { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--t-border); padding-bottom: 14px; }
.th-view-title { font-size: 22px; font-weight: 800; }
.th-view-count { font-size: 15px; color: var(--t-muted); font-weight: 600; }
.th-group { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.th-group-head, .th-topic-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-group-head h2, .th-topic-name { font-size: 16px; font-weight: 800; }
.th-group-count { font-size: 14px; color: var(--t-muted); font-weight: 600; }
/* "All" and search views: one grid per category, the topic wrappers dissolve into it. */
.th-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.th-topic, .th-topic-grid { display: contents; }
/* Category view: one group per topic, each with its own label and grid. */
.th-results.is-category .th-group-head { display: none; }
.th-results.is-category .th-cards { display: flex; flex-direction: column; gap: 32px; }
.th-results.is-category .th-topic { display: flex; flex-direction: column; gap: 14px; }
.th-results.is-category .th-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.th-empty { background: var(--t-surface); border: 1px dashed var(--t-border-input); border-radius: 16px; padding: 32px; text-align: center; color: var(--t-long); font-size: 16px; }

.th-how {
  border-top: 1px solid var(--t-border); padding-top: 28px;
  display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-start; justify-content: space-between;
}
.th-how h2 { font-size: 18px; font-weight: 800; flex: 0 0 auto; }
.th-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 32px; flex: 1 1 640px; }
.th-steps li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.th-steps span {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--t-primary-soft); color: var(--t-primary-dark);
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.th-guide-link { font-size: 14px; font-weight: 700; color: var(--t-primary-dark); text-decoration: underline; flex: 0 0 auto; }
.th-guide-link:hover { color: var(--t-link-hover); }
.th-guide { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 14px; padding: 16px 18px; font-size: 15px; line-height: 1.55; color: var(--t-long); scroll-margin-top: 80px; }
.th-guide summary { cursor: pointer; font-weight: 700; color: var(--t-text); min-height: 28px; }
.th-guide p, .th-guide ul, .th-guide pre { margin: 12px 0 0; }
.th-guide ul { list-style: disc; padding-left: 20px; }
.th-guide pre { background: var(--t-track); border-radius: 10px; padding: 12px; overflow-x: auto; font-size: 13px; }

/* =========================================================
   Quiz page
   ========================================================= */
.tq-crumbs { font-size: 14px; color: var(--t-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.tc .tq-crumbs a { color: var(--t-primary-dark); text-decoration: none; }
.tq-crumbs a:hover { color: var(--t-link-hover); text-decoration: underline; }
.tq-crumbs [aria-current] { color: var(--t-text); font-weight: 600; }
.tq-head { display: flex; flex-direction: column; gap: 14px; }
.tq-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tq-chip { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--t-surface); border: 1px solid var(--t-border); color: var(--t-meta); }
.tq-chip--cat { background: var(--soft); border-color: var(--soft); color: var(--ink); }
.tq-chip--ok { background: var(--t-primary-soft); border-color: var(--t-primary-soft); color: var(--t-primary-dark); }
.tq h1 { font-size: 32px; line-height: 1.15; font-weight: 800; max-width: 820px; }
.tq-intro { font-size: 16px; line-height: 1.55; color: var(--t-long); max-width: 760px; }

/* Selection bar: sticks under the site header (60px once the page has scrolled). Fixed height
   on wide screens so updating its text never shifts the page. */
.tq-bar {
  position: sticky;
  top: 68px;
  z-index: 20;
  box-sizing: border-box;
  min-height: 66px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(23, 38, 42, .06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.tq-bar-text { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tq-badge {
  flex: none; min-width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
  background: var(--t-track); color: var(--t-muted);
}
.tq-bar.has-sel .tq-badge { background: var(--t-primary); color: #FFFFFF; }
.tq-bar-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tq-bar-copy strong { font-size: 15px; }
.tq-bar-copy span { font-size: 13px; color: var(--t-muted); }
.tq-bar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tq-ghost { background: transparent; border: 0; color: var(--t-meta); padding: 0 12px; height: 44px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
.tq-ghost:hover { background: var(--t-track); }
.tq-soft, .tq-primary {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; box-sizing: border-box;
  padding: 0 16px; border-radius: 11px; font-size: 15px;
}
.tq-soft { background: var(--t-primary-soft); color: var(--t-primary-dark); font-weight: 700; }
.tq-soft:hover { background: #D3E9E5; }
.tq-primary { padding: 0 18px; border: 0; font-weight: 800; background: var(--t-primary); color: #FFFFFF; cursor: pointer; }
.tq-primary:hover { background: var(--t-primary-dark); }
.tq-primary:disabled { background: var(--t-border); color: #6B7A7E; cursor: not-allowed; }
.tq-toast { background: var(--t-hard-soft); color: var(--t-hard-ink); border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 700; }

.tq-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.tq-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* The controls card: tabs + difficulty on top, then the active round's title row (its <h2>)
   continues the same white card. */
.tq-panel {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: -16px;
}
.tq-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--t-track); border-radius: 12px; padding: 4px; }
.tq-tab {
  flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 8px;
  font-size: 14px; padding: 6px 12px; min-height: 44px; border-radius: 9px; border: 0; cursor: pointer;
  background: transparent; color: var(--t-muted); font-weight: 600;
}
.tq-tab:hover { color: var(--t-text); }
.tq-tab[aria-selected="true"] { background: var(--t-surface); color: var(--t-text); font-weight: 800; box-shadow: 0 1px 4px rgba(23, 38, 42, .12); }
.tq-tab-num {
  flex: none; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--t-border); color: var(--t-meta);
}
.tq-tab[aria-selected="true"] .tq-tab-num { background: var(--t-primary); color: #FFFFFF; }
.tq-tab-name { line-height: 1.25; overflow-wrap: anywhere; flex: 1; text-align: left; }
.tq-tab-sel { flex: none; font-size: 12px; font-weight: 800; background: var(--t-primary); color: #FFFFFF; border-radius: 999px; padding: 2px 8px; }
.tq-levels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 4px; }
.tq-levels-label { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--t-muted); margin-right: 4px; text-transform: uppercase; }
.tq-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 0 12px; height: 40px;
  border-radius: 999px; cursor: pointer; background: var(--t-surface); color: var(--t-text);
  border: 1px solid var(--t-border-input); font-weight: 700;
}
.tq-pill [data-count] { opacity: .7; font-weight: 600; }
.tq-pill[aria-pressed="true"] { background: var(--t-text); color: #FFFFFF; border-color: var(--t-text); font-weight: 800; }
.tq-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tq-dot--easy { background: var(--t-easy); }
.tq-dot--medium { background: var(--t-medium); }
.tq-dot--hard { background: var(--t-hard); }

.tq-round { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 150px; }
.tq-round-head {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.has-panel .tq-round-head { position: relative; border-top: 0; border-radius: 0 0 16px 16px; padding-top: 24px; }
.has-panel .tq-round-head::before { content: ""; position: absolute; left: 18px; right: 18px; top: 14px; border-top: 1px solid var(--t-line); }
.tq-round-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tq-round-title { font-size: 15px; font-weight: 800; }
.tq-round-title span { color: var(--t-muted); font-weight: 600; }
.tq-select-all {
  font-size: 14px; font-weight: 700; color: var(--t-primary-dark); background: var(--t-surface);
  border: 1px solid #CFE3E0; border-radius: 10px; padding: 0 12px; height: 40px; cursor: pointer;
}
.tq-select-all:hover { background: var(--t-primary-soft); }
.tq-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--t-meta); cursor: pointer; min-height: 44px; }
.tq-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tq-track { width: 40px; height: 24px; border-radius: 999px; background: #CFC9BC; display: inline-flex; align-items: center; padding: 3px; box-sizing: border-box; transition: background .2s; }
.tq-knob { width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.tq-switch input:checked + .tq-track { background: var(--t-primary); }
.tq-switch input:checked + .tq-track .tq-knob { transform: translateX(16px); }
.tq-switch input:focus-visible + .tq-track { outline: 2px solid var(--t-primary); outline-offset: 2px; }

.tq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tq-q {
  border-radius: 16px; padding: 20px; display: flex; gap: 16px;
  background: var(--t-surface); border: 1px solid var(--t-border);
  transition: border-color .15s, background .15s;
}
.tq-q.is-picked { background: var(--t-selected); border: 1.5px solid var(--t-primary); padding: 19.5px; }
.tq-pick { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; padding-top: 2px; }
.tq-pick input { width: 22px; height: 22px; margin: 0; accent-color: var(--t-primary); cursor: pointer; }
.tq-num { font-size: 13px; font-weight: 800; color: var(--t-muted); }
.tq-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tq-text { font-size: 17px; font-weight: 700; line-height: 1.45; }
.opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opts li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  font-size: 15px; line-height: 1.4; min-height: 52px; box-sizing: border-box;
  background: var(--t-surface); border: 1px solid var(--t-border); color: var(--t-text); font-weight: 600;
  transition: background .2s, border-color .2s;
}
.tq-letter {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; background: var(--t-track); color: var(--t-meta);
}
.tq-opt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tq-tick {
  display: none; flex: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 800;
  color: var(--t-primary-dark); background: #FFFFFF; border-radius: 999px; padding: 3px 9px 3px 6px;
}
.tq-q.is-shown .opts li { background: var(--t-surface); border: 1px solid var(--t-line); color: var(--t-faded); font-weight: 400; }
.tq-q.is-shown .opts li[data-correct] { background: var(--t-primary-soft); border: 1.5px solid var(--t-primary); padding: 11.5px 13.5px; font-weight: 700; color: #0B3F3A; }
.tq-q.is-shown .opts li[data-correct] .tq-letter { background: var(--t-primary); color: #FFFFFF; }
.tq-q.is-shown .tq-tick { display: inline-flex; }
/* The answer as text: read by screen readers when revealed, printed on the host sheet. */
.answer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.tq-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #F0ECE3; }
.tq-lv { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
.tq-lv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tq-lv--easy { background: var(--t-easy-soft); color: var(--t-easy-ink); }
.tq-lv--easy::before { background: var(--t-easy); }
.tq-lv--medium { background: var(--t-medium-soft); color: var(--t-medium-ink); }
.tq-lv--medium::before { background: var(--t-medium); }
.tq-lv--hard { background: var(--t-hard-soft); color: var(--t-hard-ink); }
.tq-lv--hard::before { background: var(--t-hard); }
.tq-reveal {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  border-radius: 999px; padding: 0 16px; height: 44px; cursor: pointer;
  background: var(--t-primary); color: #FFFFFF; border: 1px solid var(--t-primary);
}
.tq-reveal:hover { filter: brightness(.94); }
.tq-reveal .ic-eye-off { display: none; }
.tq-q.is-shown .tq-reveal { background: #FFFFFF; color: var(--t-muted); border-color: #E0DBD0; }
.tq-q.is-shown .tq-reveal .ic-eye { display: none; }
.tq-q.is-shown .tq-reveal .ic-eye-off { display: inline; }

.tq-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 14px; padding: 8px 10px 8px 16px;
}
.tq-pager-info { font-size: 14px; font-weight: 600; color: var(--t-muted); }
.tq-pager-buttons, .tq-page-nums { display: flex; align-items: center; gap: 4px; }
.tq-page-btn, .tq-page-num {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 700;
  height: 44px; border-radius: 10px; border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-text); cursor: pointer;
}
.tq-page-btn { padding: 0 12px; }
.tq-page-btn:disabled { background: #FAF8F3; color: #A3ADB0; cursor: not-allowed; }
.tq-page-num { width: 44px; font-weight: 800; }
.tq-page-num[aria-current="page"] { background: var(--t-text); color: #FFFFFF; border-color: var(--t-text); }
.tq-next-round {
  align-self: flex-start; font-size: 16px; font-weight: 800; color: #FFFFFF; background: var(--t-primary);
  border-radius: 12px; padding: 14px 22px; min-height: 48px; box-sizing: border-box;
}
.tq-next-round:hover { background: var(--t-primary-dark); }

/* Aside */
.tq-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tq-build { background: #0F3D3A; color: #FFFFFF; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.tq-build > * { flex-shrink: 0; }
.tq-build h2 { font-size: 20px; font-weight: 800; }
.tq-build ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: #D5E6E3; list-style: decimal; }
.tq-build-note { font-size: 13px; color: #B8D2CE; }
.tq-box { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tq-box h2 { font-size: 17px; font-weight: 800; }
.tq-link { font-size: 15px; font-weight: 700; color: var(--t-primary-dark); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; min-height: 32px; }
.tq-link:hover { color: var(--t-link-hover); text-decoration: underline; }
.tq-mistake { font-size: 14px; line-height: 1.5; color: var(--t-muted); }
.tq-mistake strong { display: block; font-size: 17px; font-weight: 800; color: var(--t-text); margin-bottom: 8px; }

.tq-faq, .tq-more { display: flex; flex-direction: column; gap: 14px; }
.tq-faq > h2, .tq-more h2 { font-size: 24px; font-weight: 800; }
.tq-faq details { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 14px; padding: 16px 18px; }
.tq-faq summary { cursor: pointer; display: list-item; }
.tq-faq summary h3 { display: inline; font-size: 16px; font-weight: 700; }
.tq-faq details p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--t-long); }
.tq-more-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tc .tq-more-head a { font-size: 15px; font-weight: 700; color: var(--t-primary-dark); text-decoration: none; }
.tq-more-head a:hover { color: var(--t-link-hover); text-decoration: underline; }
.tq-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

@media (max-width: 768px) {
  .tq-bar { top: 72px; }
  .th h1 { font-size: 28px; }
  .tq h1 { font-size: 28px; }
  .th-slide { padding: 16px; gap: 14px; }
  .th-slide-title { font-size: 20px; }
  .th-panel { max-width: none; }
}
@media (max-width: 640px) {
  .opts { grid-template-columns: minmax(0, 1fr); }
  .tc-wrap { padding: 28px 16px 56px; }
  .tq-q, .tq-q.is-picked { padding: 16px; gap: 12px; }
  .tq-tab { flex-basis: 130px; }
}

/* =========================================================
   Player preview — the real take page (/take/?preview=1) in a frame
   ========================================================= */
.tp-body { margin: 0; background: #0F3D3A; }
.tp { height: 100vh; height: 100dvh; box-sizing: border-box; padding: 12px 16px 16px; background: #0F3D3A; display: flex; flex-direction: column; gap: 10px; }
.tp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex: none; }
.tp-back { color: #D5E6E3; text-decoration: none; font-size: 15px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.tp-back:hover { color: #FFFFFF; }
.tp-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: #D5E6E3; }
.tp-badge { font-size: 12px; font-weight: 800; letter-spacing: .06em; background: #F2C14E; color: #3A2A00; padding: 4px 10px; border-radius: 999px; }
.tp-frame { flex: 1; min-height: 0; width: 100%; max-width: 980px; margin: 0 auto; border: 0; border-radius: 16px; background: #FFFFFF; }
.tp-use {
  font-size: 15px; font-weight: 800; color: #FFFFFF; background: var(--t-primary); border: 0;
  border-radius: 12px; padding: 10px 18px; cursor: pointer; min-height: 44px;
}
.tp-use:hover { background: var(--t-primary-dark); }
.tp-end { width: 100%; max-width: 560px; margin: auto; box-sizing: border-box; background: #FFFFFF; border-radius: 20px; padding: 36px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.tp-end[hidden] { display: none; }
.tp-end-kicker { font-size: 14px; font-weight: 800; letter-spacing: .06em; color: var(--t-primary); }
.tp-end-line { font-size: 17px; color: var(--t-long); max-width: 480px; line-height: 1.5; }
.tp-end-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.tp-back-btn {
  background: #FFFFFF; color: var(--t-text); text-decoration: none; padding: 13px 22px; border-radius: 12px;
  font-weight: 700; font-size: 16px; border: 1px solid var(--t-border-input); min-height: 48px; box-sizing: border-box; display: inline-flex; align-items: center;
}
.tp-restart { background: transparent; color: var(--t-primary-dark); border: 0; padding: 13px 16px; font-weight: 700; font-size: 16px; cursor: pointer; min-height: 48px; }
.tp-toast { background: var(--t-hard-soft); color: var(--t-hard-ink); border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 700; }
.tp-end-note { margin-top: 6px; font-size: 14px; color: var(--t-muted); }

/* =========================================================
   Print (quiz page): "Question sheet" and "Host answer sheet". Every round and question
   prints, whatever tab, filter or page is on screen.
   ========================================================= */
@media print {
  @page { size: A4; margin: 14mm; }
  .tc { background: #FFFFFF; }
  .site-header, .site-footer, .skip-to-content, .tq-crumbs, .tq-chips, .tq-bar, .tq-toast, .tq-panel,
  .tq-select-all, .tq-switch, .tq-pick input, .tq-foot, .tq-pager, .tq-next-round, .tq-aside, .tq-faq, .tq-more,
  #quizoma-cookie-banner { display: none !important; }
  .tc-wrap { padding: 0; gap: 12px; max-width: none; }
  .tq h1 { font-size: 22px; }
  .tq-intro { font-size: 12px; }
  .tq-layout, .tq-main { display: block; }
  .tq-round, .tq-round[hidden], .tq-q, .tq-q[hidden] { display: flex !important; }
  .tq-round { display: block !important; margin-top: 12px; break-before: auto; }
  .tq-round-head, .has-panel .tq-round-head { border: 0; padding: 0 0 6px; border-radius: 0; }
  .has-panel .tq-round-head::before { display: none; }
  .tq-round-title { font-size: 16px; }
  .tq-list { gap: 6px; }
  .tq-q, .tq-q.is-picked { padding: 6px 0; border: 0; border-bottom: 1px solid #DDD; border-radius: 0; background: none; gap: 10px; break-inside: avoid; }
  .tq-body { gap: 6px; }
  .tq-text { font-size: 13px; }
  .opts { gap: 2px 16px; }
  .opts li, .tq-q.is-shown .opts li, .tq-q.is-shown .opts li[data-correct] {
    min-height: 0; padding: 0; border: 0; background: none; font-size: 12px; color: #000; font-weight: 400;
  }
  .tq-letter, .tq-q.is-shown .opts li[data-correct] .tq-letter { width: 18px; height: 18px; font-size: 10px; background: none; border: 1px solid #999; color: #000; }
  .tq-tick, .tq-q.is-shown .tq-tick { display: none; }
  body.print-answers .opts li[data-correct] { font-weight: 800; }
  body.print-answers .opts li[data-correct] .tq-letter { background: #000; color: #FFF; border-color: #000; }
  body.print-answers .answer { position: static; width: auto; height: auto; clip: auto; white-space: normal; display: block !important; font-size: 12px; font-weight: 700; }
  body.print-questions .answer { display: none !important; }
}