/* The header's subject picker — trigger, the panel that unfolds under it, and (on phones)
   the bottom sheet it becomes.
   Markup: web/templates/_subject_picker.html. Behaviour: web/static/js/subject-picker.js.
   Plain CSS, no Tailwind rebuild — the same arrangement 29-search.css uses.

   ⭐ The panel is WIDE and it does not scroll. 60 subjects in a 34 rem dropdown meant a
   scroll bar inside a menu, which is the one thing a menu must not have: you cannot see
   what you are choosing between. It is a band under the header instead, its subjects laid
   out in up to four columns, and its longest level (AP, 25 subjects) split into five
   labelled sections — measured at ~330 px tall, so every level fits on screen at once.

   ⚠️ Every `display` declared here beats the UA's `[hidden] { display: none }` (the trap
   written up at 13-account.css:117 and again at 38-abroad.css:141) — the explicit [hidden]
   block at the end of this file is what keeps the panel closed. Keep new classes in it. */

/* ── Trigger ───────────────────────────────────────────────────────────────────
   A compact, readable pill beside the wordmark. Its colour follows --subj-rgb, set on
   <html> by the pre-paint bootstrap in base.html.

   The margins are the point of the placement: the button sits in the open space BETWEEN
   the wordmark and the language flag rather than jammed against one of them. They scale
   with the viewport because the room does — measured, the space between the flag and the
   centred nav pills is 40 px at 1024 and 129 px at 1440, so a fixed margin either crowds
   the small end or looks lost at the large one. */
.subjpick {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  /* Narrower than they were (2.2vw, up to 2.25rem): the button is a labelled pill now, not
     a 36 px glyph, so it reads as separate from the wordmark without the airy gap — and
     that gap is exactly what the label needs. Measured at 1280: the label costs 49 px and
     this gives back 30. */
  margin-left: clamp(0.3rem, 0.95vw, 1rem);
  margin-right: clamp(0.3rem, 0.95vw, 1rem);
}

.subjpick-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 2.5rem;
  min-width: 2.5rem;
  padding: 0 0.5rem 0 0.7rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid rgba(125, 211, 252, 0.52);
  background: linear-gradient(135deg, #193447, #101d31 70%);
  color: #f1f9ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
              0 7px 18px -10px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  cursor: pointer;
}
.subjpick-trigger:hover {
  border-color: #7dd3fc;
  background: linear-gradient(135deg, #23516a, #132a40 70%);
  color: #fff;
  transform: translateY(-1px);
}
.subjpick-trigger:active { transform: translateY(0); }
.subjpick-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.7);
}
.subjpick-mark { width: 1rem; height: 1rem; flex-shrink: 0; color: #7dd3fc; }
.subjpick-current-icon { display: none; width: 1.05rem; height: 1.05rem; flex: none; }
html[data-subject] .subjpick-current-icon:not(:empty) {
  display: block;
  color: rgb(var(--subj-rgb, 34 211 238));
}
.subjpick-chev {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  padding: .22rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: #7dd3fc;
  transition: transform 0.18s ease;
}
.subjpick-trigger[aria-expanded="true"] .subjpick-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .subjpick-trigger, .subjpick-chev { transition: none; }
  .subjpick-trigger:hover { transform: none; }
}

/* Carry the subject colour through the border and a soft tint, without a solid stripe
   at the pill's rounded left edge. */
html[data-subject] .subjpick-trigger {
  border-color: rgb(var(--subj-rgb, 34 211 238) / 0.8);
  background: linear-gradient(135deg,
              rgb(var(--subj-rgb, 34 211 238) / 0.2),
              #101b2d 78%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 7px 18px -10px rgb(var(--subj-rgb, 34 211 238) / 0.5);
}
html[data-subject] .subjpick-trigger:hover {
  border-color: rgb(var(--subj-rgb, 34 211 238));
  background: linear-gradient(135deg,
              rgb(var(--subj-rgb, 34 211 238) / 0.3),
              #16283b 78%);
}
html[data-subject] .subjpick-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--subj-rgb, 34 211 238) / 0.55);
}
html[data-subject] .subjpick-label { font-weight: 700; }
html[data-subject] .subjpick-chev { color: rgb(var(--subj-rgb, 34 211 238)); }

/* Keep the name on one legible line. Long names truncate; aria-label and title retain
   the full qualification and subject. */
.subjpick-label {
  display: block;
  max-width: 3.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
html[data-subject] .subjpick-mark { display: none; }

@media (min-width: 1600px) {
  .subjpick-label { max-width: 8rem; font-size: 0.8125rem; }
  .subjpick-trigger { padding-inline: 0.75rem; }
}

/* Below the desktop breakpoint the row is packed. Keep the name legible by removing
   the large icon and taking a few pixels from the pill's margins. */
@media (max-width: 1023px) {
  .subjpick { margin-left: 0.2rem; margin-right: 0.2rem; }
  .subjpick-trigger { padding: 0 0.35rem; }
  .subjpick-mark { display: none; }
  .subjpick-label { max-width: 3.75rem; }
}
/* 768–899 is the tightest tablet band; cap long names rather than overlapping the flag. */
@media (max-width: 899px) {
  .subjpick { margin-left: 0.1rem; margin-right: 0.1rem; }
  .subjpick-trigger { padding: 0 0.3rem; }
  .subjpick-label { max-width: 3rem; }
}

/* Small phones have very little room between the wordmark, flag and account controls.
   Keep the pill's touch height while shortening only long visible names. */
@media (max-width: 359px) {
  .subjpick { margin-left: 0.1rem; margin-right: 0.1rem; }
  .subjpick-trigger { height: 2.25rem; min-width: 2.25rem; padding: 0 0.25rem; }
  .subjpick-chev { display: none; }
  .subjpick-label { max-width: 2.6rem; font-size: 0.6875rem; }
}
@media (max-width: 639px) {
  /* The mobile header has room for a real label once the decorative chevron goes.
     Long subjects use two short lines inside the existing touch-height pill. */
  .subjpick-trigger { min-height: 2.5rem; height: auto; padding: 0.2rem 0.4rem; }
  .subjpick-chev { display: none; }
  .subjpick-label {
    display: -webkit-box;
    max-width: clamp(3.3rem, 17vw, 4.75rem);
    max-height: 2.3em;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.12;
    font-size: 0.75rem;
  }
}
@media (max-width: 359px) {
  /* The 320 px header has no spare row width after the search and account targets. */
  .subjpick-trigger { height: 2.25rem; min-height: 2.25rem; padding: 0 0.25rem; }
  .subjpick-label { display: block; max-width: 2.4rem; white-space: nowrap; font-size: 0.6875rem; line-height: normal; }
  .subjpick-current-icon { width: .85rem; height: .85rem; }
}

/* ── Panel ─────────────────────────────────────────────────────────────────────
   Fixed and centred on the viewport rather than anchored to the 36 px button: at 56 rem it
   would hang off the right edge of a 1024 px window, and a menu that wide reads as a band
   under the header rather than as a dropdown off a button. subject-picker.js sets
   --subjpick-top from the header's own measured height on open, so it follows the header's
   reflow instead of guessing at it.

   z-index 70: above the sticky header (20), below the search palette (80), which Ctrl+K can
   open from anywhere and must win. */
.subjpick-panel {
  position: fixed;
  z-index: 70;
  top: var(--subjpick-top, 4.25rem);
  left: 50%;
  transform: translateX(-50%);
}
.subjpick-backdrop { display: none; }

.subjpick-card {
  display: flex;
  flex-direction: column;
  width: min(56rem, calc(100vw - 2rem));
  padding: 1rem 1.15rem 0.9rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* Two layers: a soft accent glow where the eye lands first, over the panel colour the
     search palette and the sim overlay already use. */
  background:
    radial-gradient(120% 140% at 12% -20%, rgb(var(--subj-rgb, 34 211 238) / 0.16), transparent 62%),
    #0b1120;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  animation: subjpick-unfold 0.18s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  /* A safety net, not the design: the panel is sized so the tallest level (AP, 645 px
     measured) fits without it. On a genuinely short window a menu that scrolls is still
     better than one whose last row is off the screen. */
  max-height: calc(100vh - var(--subjpick-top, 4.25rem) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes subjpick-unfold {
  from { transform: translateY(-8px) scale(0.985); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .subjpick-card { animation: none; }
  .subjpick-chev { transition: none; }
}

.subjpick-grab { display: none; }

.subjpick-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.subjpick-title {
  font-family: Sora, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}
.subjpick-close { display: none; }

/* ── Filter ───────────────────────────────────────────────────────────────────
   In the head row on desktop, so the level strip can start at the card's left edge. */
.subjpick-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 13rem;
  flex-shrink: 0;
}
.subjpick-search-icon {
  position: absolute;
  left: 0.6rem;
  width: 0.9rem;
  height: 0.9rem;
  color: #64748b;
  pointer-events: none;
}
.subjpick-filter {
  width: 100%;
  padding: 0.4rem 0.6rem 0.4rem 1.95rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.8125rem;
}
.subjpick-filter::placeholder { color: #64748b; }
.subjpick-filter:focus { outline: none; border-color: rgba(34, 211, 238, 0.55); background: rgba(255, 255, 255, 0.07); }
.subjpick-filter::-webkit-search-cancel-button { filter: invert(0.6); }

/* ── Level strip ───────────────────────────────────────────────────────────────
   A wrapping row of segments rather than the home page's sliding thumb: six levels against
   four there, and a thumb that has to travel across two rows is a different mechanism, not
   a wider one. Each segment carries its own --accent-rgb. */
.subjpick-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.subjpick-level {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.subjpick-level svg { width: 0.95rem; height: 0.95rem; opacity: 0.85; }
.subjpick-level:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.subjpick-level[aria-selected="true"] {
  color: #fff;
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: rgb(var(--accent-rgb) / 0.18);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.10);
}
.subjpick-level[aria-selected="true"] svg { color: rgb(var(--accent-rgb)); opacity: 1; }
.subjpick-level:focus-visible { outline: 2px solid rgba(34, 211, 238, 0.8); outline-offset: 1px; }

/* Keep all six tracks recognizable before one is selected, including in dark mode. */
html:not([data-theme="light"]) .subjpick-level[data-level="igcse"] { --level-dark-rgb: 78 170 244; }
html:not([data-theme="light"]) .subjpick-level[data-level="a_level"] { --level-dark-rgb: 129 140 248; }
html:not([data-theme="light"]) .subjpick-level[data-level="ap"] { --level-dark-rgb: 178 148 255; }
html:not([data-theme="light"]) .subjpick-level[data-level="gac"] { --level-dark-rgb: 225 184 96; }
html:not([data-theme="light"]) .subjpick-level[data-level="english"] { --level-dark-rgb: 241 135 220; }
html:not([data-theme="light"]) .subjpick-level[data-level="chinese"] { --level-dark-rgb: 250 130 162; }
html:not([data-theme="light"]) .subjpick-level[data-level] {
  color: rgb(var(--level-dark-rgb));
  border-color: rgb(var(--level-dark-rgb) / 0.32);
  background: rgb(var(--level-dark-rgb) / 0.11);
}
html:not([data-theme="light"]) .subjpick-level[data-level] svg { color: rgb(var(--level-dark-rgb)); opacity: 1; }
html:not([data-theme="light"]) .subjpick-level[data-level]:hover {
  color: #fff;
  border-color: rgb(var(--level-dark-rgb) / 0.58);
  background: rgb(var(--level-dark-rgb) / 0.2);
}
html:not([data-theme="light"]) .subjpick-level[data-level][aria-selected="true"] {
  transform: translateY(-1px);
  color: #fff;
  font-weight: 800;
  border-color: rgb(var(--level-dark-rgb) / 0.98);
  background: linear-gradient(145deg,
    rgb(var(--level-dark-rgb) / 0.58), rgb(var(--level-dark-rgb) / 0.3));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3),
              0 0 0 2px rgb(var(--level-dark-rgb) / 0.52),
              0 0 0 5px rgb(var(--level-dark-rgb) / 0.14),
              0 0 22px rgb(var(--level-dark-rgb) / 0.46),
              0 6px 17px rgb(var(--level-dark-rgb) / 0.24);
}
html:not([data-theme="light"]) .subjpick-level[data-level][aria-selected="true"] svg {
  color: #fff;
}
html:not([data-theme="light"]) .subjpick-level[data-level]:focus-visible {
  outline-color: rgb(var(--level-dark-rgb));
}

/* ── Subjects ─────────────────────────────────────────────────────────────────
   Groups stack; each group's subjects flow across the full width. That is what keeps the
   tallest level on one screen: AP is five headings and seven rows of four ≈ 330 px. */
.subjpick-body { margin-top: 0.85rem; }
.subjpick-group + .subjpick-group { margin-top: 0.85rem; }
.subjpick-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.subjpick-group-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}
.subjpick-group-rule { height: 1px; flex: 1; background: linear-gradient(to right, rgba(255,255,255,0.14), transparent); }

.subjpick-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem 0.4rem;
}
@media (min-width: 640px) { .subjpick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .subjpick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.subjpick-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.34rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  background: none;
  color: #cbd5e1;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.subjpick-row:hover {
  color: #fff;
  background: rgb(var(--accent-rgb) / 0.10);
  border-color: rgb(var(--accent-rgb) / 0.28);
}
.subjpick-row:focus-visible { outline: 2px solid rgba(34, 211, 238, 0.8); outline-offset: -2px; }
.subjpick-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: rgb(var(--accent-rgb) / 0.14);
  color: rgb(var(--accent-rgb));
}
.subjpick-row-icon svg { width: 0.95rem; height: 0.95rem; }
/* Two lines rather than an ellipsis. Measured at 1280 px the four columns leave ~130 px
   for a name, and AP's are long — "Physics C: Electricity and …", "English Language and
   Co…" — so truncation hid exactly the words that tell two of them apart. The grid stretches
   every row in a line to the tallest, so a wrapped name makes its row taller, not ragged. */
.subjpick-row-name {
  min-width: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.2;
}
.subjpick-row-tick { width: 0.9rem; height: 0.9rem; flex-shrink: 0; color: rgb(var(--accent-rgb)); }
.subjpick-row.is-pinned {
  border-color: rgb(var(--accent-rgb) / 0.5);
  background: rgb(var(--accent-rgb) / 0.13);
  color: #fff;
}

.subjpick-note {
  padding: 1.5rem 0.25rem;
  color: #64748b;
  font-size: 0.8125rem;
  text-align: center;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.subjpick-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.subjpick-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.subjpick-all svg { width: 0.85rem; height: 0.85rem; }
.subjpick-all:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.subjpick-all:focus-visible { outline: 2px solid rgba(34, 211, 238, 0.8); outline-offset: 1px; }
.subjpick-hint {
  min-width: 0;
  color: #64748b;
  font-size: 0.6875rem;
  line-height: 1.35;
}

/* ── Phones: the panel is a bottom sheet ──────────────────────────────────────
   A wide band under a 32 px button on a 375 px screen is worse than a sheet, and the sheet
   is a shape this site already teaches (12-mobile.css's "More" sheet). The chrome, the
   animation and the scroll lock are deliberately the same. This is the ONE place the list
   may scroll: 25 AP subjects cannot fit a phone at a legible size, and a sheet that scrolls
   is what a phone reader expects. */
@media (max-width: 767px) {
  .subjpick-panel { position: fixed; inset: 0; top: 0; left: 0; transform: none; }
  .subjpick-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(1, 4, 14, 0.62);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
  .subjpick-card {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    width: auto;
    max-height: min(84dvh, 40rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1.25rem 1.25rem 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45);
    animation: subjpick-rise 0.18s ease-out both;
  }
  @keyframes subjpick-rise {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  .subjpick-grab {
    display: block;
    width: 2.25rem;
    height: 0.25rem;
    margin: 0.15rem auto 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
  }
  .subjpick-head { flex-wrap: wrap; }
  .subjpick-title { font-size: 0.95rem; letter-spacing: 0.02em; text-transform: none; color: #fff; }
  .subjpick-search { order: 3; width: 100%; margin-top: 0.5rem; }
  .subjpick-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    cursor: pointer;
  }
  .subjpick-close svg { width: 1.1rem; height: 1.1rem; }
  .subjpick-levels { margin-top: 0.6rem; padding-bottom: 0.6rem; }
  .subjpick-level { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
  .subjpick-row { padding: 0.5rem; }
  .subjpick-hint { display: none; }
}

/* The sheet is modal on phones: lock the page behind it and step the two fixed corner
   launchers aside, exactly as 12-mobile.css does for html.site-more-open (measured there:
   the feedback bubble covered the sheet's bottom-right corner). */
html.subjpick-open, html.subjpick-open body { overflow: hidden; }
html.subjpick-open .feedback-launcher,
html.subjpick-open .chat-fab,
html.subjpick-open .ai-fab { display: none; }

/* Short windows — a 1280×800 laptop leaves ~700 px of content, which AP's 645 px plus the
   header would just miss. The rows lose their padding and their names go back to one line
   before anything is allowed to scroll. */
@media (max-height: 780px) {
  .subjpick-card { padding: 0.75rem 1rem 0.7rem; }
  .subjpick-row { padding: 0.22rem 0.45rem; }
  .subjpick-row-icon { width: 1.45rem; height: 1.45rem; border-radius: 0.45rem; }
  .subjpick-row-name { -webkit-line-clamp: 1; }
  .subjpick-group + .subjpick-group { margin-top: 0.6rem; }
  .subjpick-body { margin-top: 0.6rem; }
  .subjpick-levels { margin-top: 0.6rem; padding-bottom: 0.6rem; }
  .subjpick-foot { margin-top: 0.65rem; padding-top: 0.55rem; }
  .subjpick-group-head { margin-bottom: 0.25rem; }
  .subjpick-grid { gap: 0.15rem 0.4rem; }
  .subjpick-title { font-size: 0.75rem; }
}

/* ⛔ Last, and load-bearing: every rule above sets `display` on a class, which outranks the
   user-agent's `[hidden] { display: none }` — without this the panel renders open on every
   page. Same trap as .plan-step (38-abroad.css:141) and .site-more-grid > [hidden]. */
.subjpick-panel[hidden],
.subjpick-level[hidden],
.subjpick-row[hidden],
.subjpick-group[hidden],
.subjpick-note[hidden] { display: none !important; }
/* ── The scope: what a pinned subject does to a page ──────────────────────────
   Written by web/static/js/subject-scope.js. The cards themselves are hidden by a single
   rule the pre-paint bootstrap in base.html injects, so a pinned reader never sees the full
   grid flash before it narrows; these are the two things that rule cannot express. */

/* A level heading, or the grid under it, with nothing left in it. A class and not [hidden]
   because a grid sets `display: grid`, which outranks the UA's [hidden] rule — the trap
   written up at 13-account.css:117 and paid for again at 38-abroad.css:141. */
.subj-hidden { display: none !important; }

/* One line above the first grid: whose subject this is, and the way back to everything. */
.subj-scopebar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--accent-rgb, 34 211 238) / 0.28);
  background: rgb(var(--accent-rgb, 34 211 238) / 0.10);
  font-size: 0.8125rem;
  color: #cbd5e1;
}
.subj-scopebar-dot {
  width: 0.55rem;
  height: 0.55rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgb(var(--accent-rgb, 34 211 238));
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb, 34 211 238) / 0.18);
}
.subj-scopebar-text { min-width: 0; flex: 1; }
.subj-scopebar-all {
  flex-shrink: 0;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.subj-scopebar-all:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.subj-scopebar-all:focus-visible { outline: 2px solid rgba(34, 211, 238, 0.8); outline-offset: 1px; }
/* Nothing of this subject here: the page is showing everything, so the line is a note
   rather than a control and drops the accent. */
.subj-scopebar.is-empty {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
}

/* Keep both light-theme states crisp against the pale header. These selectors are more
   specific than the generated neutral light rules below, so the subject tint survives. */
html[data-theme="light"]:not([data-subject]) .subjpick-trigger {
  border-color: #4a9dce;
  background: linear-gradient(135deg, #fff 5%, #dceeff 100%);
  color: #103c62;
  box-shadow: inset 0 1px 0 #fff,
              0 0 0 2px rgba(56, 154, 218, 0.16),
              0 0 20px rgba(54, 143, 213, 0.26),
              0 7px 17px rgba(38, 82, 137, 0.17);
}
html[data-theme="light"]:not([data-subject]) .subjpick-trigger:hover {
  border-color: #247bb9;
  background: linear-gradient(135deg, #fff, #cfe8ff);
  color: #0f172a;
  box-shadow: inset 0 1px 0 #fff,
              0 0 0 3px rgba(56, 154, 218, 0.2),
              0 0 26px rgba(54, 143, 213, 0.34),
              0 9px 20px rgba(38, 82, 137, 0.2);
}
html[data-theme="light"][data-subject] .subjpick-trigger {
  border-color: rgb(var(--subj-rgb, 34 211 238) / 0.8);
  background: linear-gradient(135deg,
              rgb(var(--subj-rgb, 34 211 238) / 0.24),
              #f7fbff 82%);
  color: #17354a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 0 0 2px rgb(var(--subj-rgb, 34 211 238) / 0.16),
              0 0 20px rgb(var(--subj-rgb, 34 211 238) / 0.28),
              0 7px 18px rgb(var(--subj-rgb, 34 211 238) / 0.2);
}
html[data-theme="light"][data-subject] .subjpick-current-icon:not(:empty) {
  color: color-mix(in srgb, rgb(var(--subj-rgb, 34 211 238)) 68%, #164e63);
}
html[data-theme="light"] .subjpick-chev { background: rgba(15, 23, 42, .07); }
html[data-theme="light"][data-subject] .subjpick-trigger:hover {
  border-color: rgb(var(--subj-rgb, 34 211 238));
  background: linear-gradient(135deg,
              rgb(var(--subj-rgb, 34 211 238) / 0.32),
              #eef7fc 82%);
  color: #102b40;
  box-shadow: inset 0 1px 0 #fff,
              0 0 0 3px rgb(var(--subj-rgb, 34 211 238) / 0.2),
              0 0 28px rgb(var(--subj-rgb, 34 211 238) / 0.34),
              0 9px 21px rgb(var(--subj-rgb, 34 211 238) / 0.24);
}
html[data-theme="light"] .subjpick-label { font-weight: 700; }
/* Each qualification keeps a distinct, readable tint in the bright picker. */
html[data-theme="light"] .subjpick-level[data-level="igcse"] { --level-ink: #176aa6; }
html[data-theme="light"] .subjpick-level[data-level="a_level"] { --level-ink: #4743a6; }
html[data-theme="light"] .subjpick-level[data-level="ap"] { --level-ink: #7049ae; }
html[data-theme="light"] .subjpick-level[data-level="gac"] {
  --level-ink: #956b1d;
}
html[data-theme="light"] .subjpick-level[data-level="english"] { --level-ink: #a43d89; }
html[data-theme="light"] .subjpick-level[data-level="chinese"] { --level-ink: #b33f65; }
html[data-theme="light"] .subjpick-level[data-level] {
  --level-ring: var(--level-ink);
  color: var(--level-ink);
  border-color: color-mix(in srgb, var(--level-ring) 28%, white);
  background: color-mix(in srgb, var(--level-ring) 12%, white);
}
/* Bright selection rings are separate from the darker text ink. The resting chip
   stays pale; selecting it lights only its edge and halo. */
html[data-theme="light"] .subjpick-level[data-level="igcse"] { --level-ring: #42b6ff; }
html[data-theme="light"] .subjpick-level[data-level="a_level"] { --level-ring: #8d91ff; }
html[data-theme="light"] .subjpick-level[data-level="ap"] { --level-ring: #c18cff; }
html[data-theme="light"] .subjpick-level[data-level="gac"] { --level-ring: #f5c84b; }
html[data-theme="light"] .subjpick-level[data-level="english"] { --level-ring: #f786db; }
html[data-theme="light"] .subjpick-level[data-level="chinese"] { --level-ring: #ff8ba8; }
html[data-theme="light"] .subjpick-level[data-level] svg { color: var(--level-ink); opacity: 1; }
html[data-theme="light"] .subjpick-level[data-level]:hover {
  color: var(--level-ink);
  background: color-mix(in srgb, var(--level-ring) 12%, white);
}
html[data-theme="light"] .subjpick-level[data-level][aria-selected="true"] {
  position: relative;
  transform: translateY(-1px);
  color: var(--level-ink);
  border-color: var(--level-ring);
  background: color-mix(in srgb, var(--level-ring) 12%, white);
  font-weight: 800;
  box-shadow: inset 0 1px 0 #fff,
              0 0 0 2px var(--level-ring),
              0 0 0 5px color-mix(in srgb, var(--level-ring) 23%, transparent),
              0 0 22px color-mix(in srgb, var(--level-ring) 62%, transparent),
              0 8px 18px color-mix(in srgb, var(--level-ring) 28%, transparent);
}
html[data-theme="light"] .subjpick-level[data-level][aria-selected="true"] svg { color: var(--level-ink); }
html[data-theme="light"] .subjpick-row {
  --picker-rgb: var(--accent-rgb);
  border-color: rgb(var(--picker-rgb) / 0.36);
  background: linear-gradient(115deg, rgb(var(--picker-rgb) / 0.16),
                                      rgba(255, 255, 255, 0.91) 72%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgb(var(--picker-rgb) / 0.07);
}
/* The language ladder and a few adjacent AP/GAC rows otherwise repeat nearly the
   same hue. These accents belong to the bright picker only; subject colors elsewhere
   keep their established meaning. */
html[data-theme="light"] .subjpick-row[data-slug="en_a1"] { --picker-rgb: 75 142 223; }
html[data-theme="light"] .subjpick-row[data-slug="en_a2"] { --picker-rgb: 239 148 95; }
html[data-theme="light"] .subjpick-row[data-slug="en_b1"] { --picker-rgb: 150 119 220; }
html[data-theme="light"] .subjpick-row[data-slug="en_b2"] { --picker-rgb: 233 108 147; }
html[data-theme="light"] .subjpick-row[data-slug="ap_physics_c_em"] { --picker-rgb: 232 104 128; }
html[data-theme="light"] .subjpick-row[data-slug="ap_statistics"] { --picker-rgb: 235 125 110; }
html[data-theme="light"] .subjpick-row[data-slug="ap_computer_science_principles"] { --picker-rgb: 161 120 218; }
html[data-theme="light"] .subjpick-row[data-slug="ap_art_2d"] { --picker-rgb: 99 153 229; }
html[data-theme="light"] .subjpick-row[data-slug="gac_social_science"] { --picker-rgb: 232 108 147; }
html[data-theme="light"] .subjpick-row:hover {
  border-color: rgb(var(--picker-rgb) / 0.65);
  background: linear-gradient(115deg, rgb(var(--picker-rgb) / 0.24),
                                      rgba(255, 255, 255, 0.94) 72%);
}
html[data-theme="light"] .subjpick-row .subjpick-row-icon {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgb(var(--picker-rgb) / 0.56);
  background: linear-gradient(150deg, rgb(var(--picker-rgb) / 0.41),
                                      rgb(var(--picker-rgb) / 0.19));
  color: color-mix(in srgb, rgb(var(--picker-rgb)) 72%, #172442);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84),
              0 2px 6px rgb(var(--picker-rgb) / 0.2);
}
html[data-theme="light"] .subjpick-row .subjpick-row-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}
html[data-theme="light"] .subjpick-level[data-level]:focus-visible { outline-color: var(--level-ink); }
html[data-theme="light"] .subjpick-row.is-pinned {
  transform: translateY(-1px);
  border-color: rgb(var(--picker-rgb) / 0.9);
  background: linear-gradient(115deg, rgb(var(--picker-rgb) / 0.34),
                                      rgb(var(--picker-rgb) / 0.16) 60%, rgba(255, 255, 255, 0.98));
  color: #1e293b;
  font-weight: 750;
  box-shadow: inset 0 1px 0 #fff,
              inset 0 -2px 0 rgb(var(--picker-rgb) / 0.22),
              0 0 0 2px rgb(var(--picker-rgb) / 0.24),
              0 0 18px rgb(var(--picker-rgb) / 0.33),
              0 8px 17px rgb(var(--picker-rgb) / 0.22);
}
html[data-theme="light"] .subjpick-row.is-pinned .subjpick-row-icon {
  background: linear-gradient(150deg, rgb(var(--picker-rgb) / 0.54),
                                      rgb(var(--picker-rgb) / 0.28));
}
html[data-theme="light"] .subjpick-row.is-pinned .subjpick-row-tick {
  width: 1.18rem;
  height: 1.18rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--picker-rgb));
  stroke-width: 3.2;
  filter: drop-shadow(0 0 1px #fff)
          drop-shadow(0 0 3px rgb(var(--picker-rgb) / 0.5));
  box-shadow: none;
}
@media (min-width: 1200px) and (max-width: 1599px) {
  html[data-theme="light"][data-subject] .subjpick-label { max-width: 5rem; }
}

/* ▼▼ LIGHT THEME — GENERATED by scripts/build_light_theme.py from the rules above. Do not edit by hand: run the builder. Hand tuning goes in 36-theme-light.css. ▼▼ */
html[data-theme="light"] .subjpick-trigger{background-image:linear-gradient(135deg, rgb(236 241 245), rgb(242 245 248) 70%);color:rgb(0 76 133);box-shadow:0px 7px 18px -10px rgb(15 23 42/0.192)}
html[data-theme="light"] .subjpick-trigger:hover{background-image:linear-gradient(135deg, rgb(227 236 241), rgb(239 243 246) 70%);color:rgb(51 63 82)}
html[data-theme="light"] .subjpick-trigger:focus-visible{box-shadow:0px 0px 0px 3px rgb(14 158 180/0.55)}
html[data-theme="light"] .subjpick-mark{color:rgb(0 90 133)}
html[data-theme="light"][data-subject] .subjpick-current-icon:not(:empty){color:color-mix(in srgb,rgb(var(--subj-rgb, 34 211 238)) 44%,#0f172a)}
html[data-theme="light"] .subjpick-chev{background-color:rgb(15 23 42/0.09);color:rgb(0 90 133)}
html[data-theme="light"][data-subject] .subjpick-chev{color:color-mix(in srgb,rgb(var(--subj-rgb, 34 211 238)) 44%,#0f172a)}
html[data-theme="light"] .subjpick-card{border-color:rgb(15 23 42/0.168);background:radial-gradient(120% 140% at 12% -20%, rgb(var(--subj-rgb, 34 211 238) / 0.16), transparent 62%),
    rgb(247 248 251);box-shadow:0px 28px 70px rgb(15 23 42/0.176),inset 0px 0px 0px 1px rgb(15 23 42/0.09)}
html[data-theme="light"] .subjpick-title{color:rgb(61 75 94)}
html[data-theme="light"] .subjpick-search-icon{color:rgb(87 101 122)}
html[data-theme="light"] .subjpick-filter{border-color:rgb(15 23 42/0.112);background-color:rgb(15 23 42/0.04);color:rgb(44 63 88)}
html[data-theme="light"] .subjpick-filter::placeholder{color:rgb(87 101 122)}
html[data-theme="light"] .subjpick-filter:focus{background-color:rgb(15 23 42/0.07)}
html[data-theme="light"] .subjpick-levels{border-bottom-color:rgb(15 23 42/0.098)}
html[data-theme="light"] .subjpick-level{border-color:rgb(15 23 42/0.098);background-color:rgb(15 23 42/0.03);color:rgb(61 75 94)}
html[data-theme="light"] .subjpick-level:hover{color:rgb(51 63 82);background-color:rgb(15 23 42/0.08)}
html[data-theme="light"] .subjpick-level[aria-selected="true"]{color:rgb(51 63 82);box-shadow:0px 0px 0px 3px color-mix(in srgb,rgb(var(--accent-rgb) / 0.10) 62%,#0f172a)}
html[data-theme="light"] .subjpick-level[aria-selected="true"] svg{color:color-mix(in srgb,rgb(var(--accent-rgb)) 44%,#0f172a)}
html[data-theme="light"] .subjpick-group-label{color:rgb(87 101 122)}
html[data-theme="light"] .subjpick-group-rule{background-image:linear-gradient(to right, rgb(15 23 42/0.14), transparent)}
html[data-theme="light"] .subjpick-row{color:rgb(48 65 85)}
html[data-theme="light"] .subjpick-row:hover{color:rgb(51 63 82)}
html[data-theme="light"] .subjpick-row-icon{color:color-mix(in srgb,rgb(var(--accent-rgb)) 44%,#0f172a)}
html[data-theme="light"] .subjpick-row-tick{color:color-mix(in srgb,rgb(var(--accent-rgb)) 44%,#0f172a)}
html[data-theme="light"] .subjpick-row.is-pinned{color:rgb(51 63 82)}
html[data-theme="light"] .subjpick-note{color:rgb(87 101 122)}
html[data-theme="light"] .subjpick-foot{border-top-color:rgb(15 23 42/0.098)}
html[data-theme="light"] .subjpick-all{border-color:rgb(15 23 42/0.126);background-color:rgb(15 23 42/0.04);color:rgb(48 65 85)}
html[data-theme="light"] .subjpick-all:hover{background-color:rgb(15 23 42/0.09);color:rgb(51 63 82)}
html[data-theme="light"] .subjpick-hint{color:rgb(87 101 122)}
@media (max-width: 767px){html[data-theme="light"] .subjpick-backdrop{background-color:rgb(252 252 253/0.62)}html[data-theme="light"] .subjpick-card{border-top-color:rgb(15 23 42/0.14);box-shadow:0px -18px 40px rgb(15 23 42/0.144)}html[data-theme="light"] .subjpick-grab{background-color:rgb(15 23 42/0.16)}html[data-theme="light"] .subjpick-title{color:rgb(51 63 82)}html[data-theme="light"] .subjpick-close{border-color:rgb(15 23 42/0.112);background-color:rgb(15 23 42/0.05);color:rgb(61 75 94)}}
html[data-theme="light"] .subj-scopebar{color:rgb(48 65 85)}
html[data-theme="light"] .subj-scopebar-dot{box-shadow:0px 0px 0px 3px color-mix(in srgb,rgb(var(--accent-rgb, 34 211 238) / 0.18) 62%,#0f172a)}
html[data-theme="light"] .subj-scopebar-all{border-color:rgb(15 23 42/0.18);background-color:rgb(15 23 42/0.06);color:rgb(44 63 88)}
html[data-theme="light"] .subj-scopebar-all:hover{background-color:rgb(15 23 42/0.12);color:rgb(51 63 82)}
html[data-theme="light"] .subj-scopebar.is-empty{border-color:rgb(15 23 42/0.14);background-color:rgb(15 23 42/0.03);color:rgb(61 75 94)}
/* ▲▲ LIGHT THEME END ▲▲ */