/* ChemQ – layout and components modelled on ExamQ (Bootstrap 5 + custom rules). */
:root {
  --c: #33312e;            /* theme colour, set from the colour picker */
  --c-03: rgba(51, 49, 46, .03);
  --c-08: rgba(51, 49, 46, .08);
  --c-10: rgba(51, 49, 46, .1);
  --c-15: rgba(51, 49, 46, .15);
  --c-20: rgba(51, 49, 46, .2);
  --c-30: rgba(51, 49, 46, .3);
  --c-40: rgba(51, 49, 46, .4);
  --c-50: rgba(51, 49, 46, .5);
  --c-80: rgba(51, 49, 46, .8);
  --c-90: rgba(51, 49, 46, .9);
  --on-c-80: #fff;
  --on-c-90: #fff;
  --bg: #ffffff; --bg-soft: #fcfcfc; --surface: #ffffff; --surface-2: #f8f9fa; --surface-hover: #eef0f2;
  --tile-hover: #e9e9e9; --text: #1d1d1f; --text-2: #333333; --muted: #5f5f5f; --faint: #8a8a8a;
  --line: #dddddd; --line-strong: #b3b3b3; --shimmer-a: #f6f6f6; --shimmer-b: #fdfdfd; --pdf-bg: #e9e9e9;
  --paper-filter: none;
  color-scheme: light;
}
/* dark: chosen with the toggle, or the device setting when nothing has been chosen */
:root[data-theme="dark"] {
  --bg: #17171a; --bg-soft: #1d1d21; --surface: #222226; --surface-2: #2a2a2f; --surface-hover: #34343a;
  --tile-hover: #2e2e34; --text: #ecebe8; --text-2: #dddcd8; --muted: #a8a59f; --faint: #8a877f;
  --line: #3a3a40; --line-strong: #5a5a62; --shimmer-a: #26262b; --shimmer-b: #2e2e34; --pdf-bg: #111114;
  --paper-filter: brightness(.9) contrast(1.05);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #17171a; --bg-soft: #1d1d21; --surface: #222226; --surface-2: #2a2a2f; --surface-hover: #34343a;
  --tile-hover: #2e2e34; --text: #ecebe8; --text-2: #dddcd8; --muted: #a8a59f; --faint: #8a877f;
  --line: #3a3a40; --line-strong: #5a5a62; --shimmer-a: #26262b; --shimmer-b: #2e2e34; --pdf-bg: #111114;
  --paper-filter: brightness(.9) contrast(1.05);
  color-scheme: dark;
  }
}

body {
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--text);
}
p { margin: 0; }

/* ------------------------------------------------------------ page shell */
.page-container { display: flex; flex-direction: column; min-height: 100vh !important; }
footer { margin-top: auto; width: 100%; font-size: 14px; background-color: var(--bg-soft); }
footer a { color: var(--muted); text-decoration: none; transition: .4s; }
footer a:hover { color: var(--text); }
.info-page p { padding-bottom: 12px; }
@media (max-width: 767px) { .hide-on-small-screen { display: none; } }
@media (min-width: 768px) { .show-filters-button { display: none; } }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

#nprogress-bar {
  position: fixed; top: 0; left: 0; height: 6px; width: 0; z-index: 9999;
  background: var(--c); transition: width .3s ease, opacity .4s ease; opacity: 0;
}

.t-light14 { font-weight: 300; font-size: 14px; }
.t-14 { font-size: 14px; }
.t-semi14 { font-weight: 600; font-size: 14px; }
.t-light { font-weight: 300; }
.t-light12 { font-weight: 300; font-size: 12px; }
.t-12 { font-size: 12px; }
.t-semi12 { font-weight: 600; font-size: 12px; }

/* ------------------------------------------------------------- header */
.logo { display: inline-block; height: 40px; color: var(--c); text-decoration: none; }
.logo svg { height: 40px; width: auto; display: block; fill: currentColor; }
.logo-word { display: block; font-weight: 700; font-size: 38px; line-height: 40px; letter-spacing: -1.5px; white-space: nowrap; }
.logo:hover { color: var(--c); }

.circle-picker { display: flex; flex-wrap: nowrap; margin-right: -14px; margin-bottom: -14px; width: 252px; }
.circle-picker .swatch-wrap { width: 28px; height: 28px; margin-right: 14px; margin-bottom: 14px; transition: transform 100ms ease; flex: none; }
.circle-picker .swatch-wrap:hover { transform: scale(1.2); }
.circle-picker .swatch {
  background: transparent; height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;
  border-radius: 50%; border: 0; padding: 0; transition: box-shadow 100ms ease;
}

/* ------------------------------------------------------- select boxes */
.rs { position: relative; font-size: 16px; }
.rs-control {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  min-height: 38px; background: var(--surface); border: 1px solid var(--c-20); border-radius: 4px;
  cursor: default; transition: all 100ms; outline: 0 !important; position: relative;
}
.rs-control:hover { border-color: var(--line-strong); }
.rs.focused .rs-control { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.rs-value { display: flex; flex: 1; flex-wrap: wrap; align-items: center; padding: 2px 8px; overflow: hidden; position: relative; min-width: 0; }
.rs-placeholder { color: var(--muted); margin: 0 2px; grid-area: 1/1/2/3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-single { color: var(--text); margin: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rs-input { border: 0; outline: 0; padding: 2px 0; margin: 2px; min-width: 2px; width: 2px; flex: 1 1 auto; font: inherit; color: var(--text); background: transparent; }
.rs-chip { display: flex; background: var(--c-90); border-radius: 2px; margin: 2px; min-width: 0; }
.rs-chip-label { color: var(--on-c-90); font-size: 85%; padding: 3px 3px 3px 6px; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-chip-remove { display: flex; align-items: center; padding: 0 4px; border-radius: 2px; color: var(--on-c-90); cursor: pointer; }
.rs-chip-remove:hover { background: rgba(0, 0, 0, .12); }
.rs-indicators { display: flex; align-items: center; align-self: stretch; flex-shrink: 0; }
.rs-ind { color: var(--line-strong); display: flex; padding: 8px; transition: color 150ms; cursor: pointer; }
.rs-ind:hover { color: var(--muted); }
.rs.focused .rs-ind { color: var(--text-2); }
.rs-sep { align-self: stretch; background: var(--line); margin: 8px 0; width: 1px; }
.rs-ind svg { display: inline-block; fill: currentColor; line-height: 1; stroke: currentColor; stroke-width: 0; }
.rs-menu {
  position: absolute; top: 100%; left: 0; width: 100%; z-index: 1050; margin: 8px 0; background: var(--surface);
  border-radius: 4px; box-shadow: 0 0 0 1px var(--line), 0 4px 11px rgba(0, 0, 0, .15);
}
.rs-menu-list { max-height: 300px; overflow-y: auto; padding: 4px 0; position: relative; }
.rs-option { padding: 8px 12px; cursor: default; user-select: none; font-size: inherit; width: 100%; }
.rs-option.focused { background: var(--c-20); }
.rs-option.selected { background: var(--c-80); color: var(--on-c-80); }
.rs-option:active { background: var(--c-20); }
.rs-empty { color: var(--muted); padding: 8px 12px; text-align: center; }

/* ------------------------------------------------------- question grid */
.question-tile__text-container { border-radius: .25rem .25rem 0 0; transition: .4s; }
.question-tile__area-container { border-radius: 0 0 .25rem .25rem; transition: .4s; }
.question-tile__container { border-radius: .25rem; color: var(--text); cursor: pointer; transition: .4s; background: var(--surface); }
.question-tile__container:hover .question-tile__text-container { background-color: var(--tile-hover); }
.question-tile__container img { width: 100%; display: block; }
.home__difficulty-button { border-radius: .25rem; cursor: pointer; transition: .2s; user-select: none; }
.question-tile__board { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }

/* ------------------------------------------------------- question page */
.question-page__tag {
  border-radius: 2px; color: var(--text); cursor: pointer; font-size: 12px; padding: 3px 5px;
  transition: .3s; white-space: nowrap;
}
.question-page__download-link {
  color: var(--muted); font-size: 12px; text-decoration: none; transition: .4s; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.question-page__download-link:hover { text-decoration: underline; color: var(--text); }
.nav-link { color: var(--faint); }
.nav-link:hover { color: var(--muted); }
.qimg { width: 100%; height: auto; display: block; background: #fff; }
.qimg-wrap { position: relative; }
.qimg-wrap.loading::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--shimmer-a), var(--shimmer-b), var(--shimmer-a));
  background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 4px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.qmeta-side { font-size: 13px; color: var(--muted); }
.qmeta-side .row-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--c-10); }

/* ------------------------------------------------------- offcanvas */
.offcanvas-backdrop { transition: opacity .3s; }
.offcanvas { transition: transform .3s ease-in-out; }

/* ------------------------------------------------------- pdf viewer */
.pdfv {
  position: fixed; inset: 0; z-index: 2000; background: rgba(20, 20, 20, .55); display: flex;
  align-items: stretch; justify-content: center; padding: 12px;
}
.pdfv-panel {
  background: var(--surface); color: var(--text); border-radius: 6px; width: 100%; max-width: 1100px; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.pdfv-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--c-20);
  flex-wrap: wrap; font-size: 14px;
}
.pdfv-title { font-weight: 600; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 200px; }
.pdfv-bar .btn { border: 1px solid var(--c-20); font-size: 13px; padding: 3px 10px; }
.pdfv-pages { flex: 1; overflow: auto; background: var(--pdf-bg); padding: 14px 0; }
.pdfv-page { margin: 0 auto 14px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); position: relative; }
.pdfv-page canvas { display: block; width: 100%; height: 100%; }
.pdfv-page .pno { position: absolute; top: 6px; left: -38px; font-size: 11px; color: var(--faint); }
.pdfv-msg { padding: 40px 20px; text-align: center; color: var(--muted); }
.pdfv-frame { flex: 1; border: 0; width: 100%; }
@media (max-width: 767px) {
  .pdfv { padding: 0; }
  .pdfv-panel { border-radius: 0; }
  .pdfv-page .pno { display: none; }
}

/* ---------------------------------------------------------- about page */
.about-list li { padding: 4px 0; }
.about-stat { font-size: 28px; font-weight: 600; color: var(--c); line-height: 1.1; }

/* --------------------------------------------------------- image slices */
.qslice { position: relative; overflow: hidden; height: 0; background: #fff; }
.qslice.loading { background: linear-gradient(90deg, var(--shimmer-a), var(--shimmer-b), var(--shimmer-a)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.qslice-img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.q-intro { margin-bottom: 14px; border-left: 3px solid var(--c-20); padding-left: 8px; }
.q-intro > summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 2px 0 6px; user-select: none; }
.q-intro:not([open]) { margin-bottom: 8px; }

/* ------------------------------------------------------------ parts */
.part-row { align-items: flex-start; }
.part-pills { gap: 4px; padding: 4px 0; }
.part-pill {
  font-size: 12px; padding: 3px 8px; border: 1px solid var(--c-20); border-radius: 2px; color: var(--text);
  text-decoration: none; white-space: nowrap; transition: .2s;
}
.part-pill:hover { border-color: var(--c-40); color: var(--text); }
.part-pill.on { background: var(--c); border-color: var(--c); color: var(--on-c-90); }
.part-mk { font-size: 10px; opacity: .65; }


.tile-slice img { width: 100%; display: block; }

/* ------------------------------------------- thumbnails + MC answers */
.tile-thumb { position: relative; height: 0; overflow: hidden; }
.tile-thumb img { position: absolute; left: 0; top: 0; width: 100%; display: block; }
.mc-answer { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 28px; border: 1px solid var(--c-20); border-radius: 8px; background: var(--bg-soft); }
.mc-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.mc-letter { font-size: 44px; font-weight: 700; line-height: 1.1; color: var(--c); }

/* link back to the revision hub when a site is served from a sub-folder */
.hub-link { font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.hub-link:hover { color: var(--c, #33312e); text-decoration: underline; }
.spec-btn { font-size: 13px; padding: 5px 11px; border: 1px solid var(--c-30); border-radius: 999px; background: var(--c-08);
  color: var(--text); white-space: nowrap; transition: background-color .2s ease, border-color .2s ease; }
.spec-btn:hover { background: var(--c-15); border-color: var(--c); }
@media (max-width: 575px) { .spec-btn { font-size: 12px; padding: 4px 9px; } }

/* ------------------------------------------------------- dark mode */
/* Bootstrap 5.1 has no dark theme: restyle the parts the site uses */
body { --bs-body-color: var(--text); --bs-body-bg: var(--bg); }
.btn-light { background-color: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-light:hover, .btn-light:focus { background-color: var(--surface-hover); color: var(--text); border-color: var(--line-strong); }
.btn-light:disabled, .btn-light.disabled { background-color: var(--surface-2); color: var(--faint); border-color: var(--line); opacity: .6; }
.form-control, .form-select { background-color: var(--surface); color: var(--text); border-color: var(--line); }
.form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--text); }
.form-control::placeholder { color: var(--faint); }
.nav-tabs { border-bottom-color: var(--line); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: var(--bg); color: var(--text); border-color: var(--line) var(--line) var(--bg); }
.nav-tabs .nav-link:hover { border-color: var(--line) var(--line) var(--line); }
.offcanvas { background-color: var(--bg); color: var(--text); }
.btn-close { filter: var(--close-filter, none); }
:root[data-theme="dark"] { --close-filter: invert(1) grayscale(1) brightness(2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --close-filter: invert(1) grayscale(1) brightness(2); } }
.text-muted { color: var(--muted) !important; }
hr { color: var(--line); opacity: 1; }
a { color: inherit; }
.info-page a { text-decoration: underline; }
/* the question and mark-scheme images stay as white "paper", softened in the dark */
.qslice-img, .qimg, .tile-thumb img, .tile-slice img, .pdfv-page canvas { filter: var(--paper-filter); }
body, .question-tile__container, .rs-control, footer {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ---- light / dark toggle: a sun that folds into a moon ---- */
.theme-toggle { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: transform .25s ease, border-color .25s ease, background-color .3s ease; -webkit-tap-highlight-color: transparent; }
.theme-toggle:hover { transform: rotate(-12deg) scale(1.08); border-color: var(--line-strong); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.theme-toggle svg { width: 19px; height: 19px; overflow: visible; }
.sun-core { transition: r .5s cubic-bezier(.34, 1.56, .64, 1); }
.moon-cut { transition: cx .5s cubic-bezier(.34, 1.56, .64, 1), cy .5s cubic-bezier(.34, 1.56, .64, 1); }
.sun-rays { transform-origin: 12px 12px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
.sun-moon { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
[data-mode="dark"] .sun-core { r: 9; }
[data-mode="dark"] .moon-cut { cx: 17; cy: 7; }
[data-mode="dark"] .sun-rays { transform: rotate(-90deg) scale(0); opacity: 0; }
[data-mode="dark"] .sun-moon { transform: rotate(40deg); }
.stars circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
[data-mode="dark"] .stars circle { opacity: 1; transform: scale(1); }
[data-mode="dark"] .stars circle:nth-child(2) { transition-delay: .12s; }
[data-mode="dark"] .stars circle:nth-child(3) { transition-delay: .22s; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .sun-core, .moon-cut, .sun-rays, .sun-moon, .stars circle { transition: none !important; }
}