/* 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 ─────────────────────────────────────────────────────────────────── 36 px round button, matching .site-search-btn at the other end of the header, so the two read as one family. It carries the pinned subject's hue in --subj-rgb, set on 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; margin-left: clamp(0.25rem, 2.2vw, 2.25rem); margin-right: clamp(0.25rem, 2.2vw, 2.25rem); } .subjpick-trigger { display: inline-flex; align-items: center; gap: 0.375rem; height: 2.25rem; min-width: 2.25rem; padding: 0 0.4rem; flex-shrink: 0; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.06); color: #94a3b8; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; cursor: pointer; } .subjpick-trigger:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .subjpick-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.6); } .subjpick-mark { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } .subjpick-chev { width: 0.8rem; height: 0.8rem; flex-shrink: 0; opacity: 0.7; transition: transform 0.18s ease; } .subjpick-trigger[aria-expanded="true"] .subjpick-chev { transform: rotate(180deg); } /* Pinned: the button takes the subject's hue. It is the only thing in the header that says "the site is scoped to one subject", so it is a filled chip rather than a tint. */ html[data-subject] .subjpick-trigger { border-color: rgb(var(--subj-rgb, 34 211 238) / 0.4); background: rgb(var(--subj-rgb, 34 211 238) / 0.16); color: rgb(var(--subj-rgb, 34 211 238)); box-shadow: 0 0 0 3px rgb(var(--subj-rgb, 34 211 238) / 0.08); } html[data-subject] .subjpick-trigger:hover { background: rgb(var(--subj-rgb, 34 211 238) / 0.26); } /* The label rides along only where the row has real room for it. Measured with a teacher's Lab pill showing — the widest state — the space between the wordmark's gutter and the centred nav is 109 px at 1024, 106 at 1280 and 150 at 1440; an icon-only trigger plus the flag needs 68 of it, a labelled one 143. 1440 would fit it with 7 px to spare, which is what "the picker pushes the flag into the nav bar" looked like, so the label waits for 1600, where the margin is over 60 px. */ .subjpick-label, .subjpick-chev { display: none; } @media (min-width: 1600px) { .subjpick-trigger { padding: 0 0.6rem 0 0.5rem; } .subjpick-label { display: block; max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; } .subjpick-chev { display: block; } } /* Below the desktop breakpoint the row is packed — at 768 px it has 11 px of slack with a guest and 19 with a teacher (the ⭐ block in 07-header-preview-chrome.css measures it) — so the trigger keeps a hairline margin there rather than the airy desktop one. */ @media (max-width: 1023px) { .subjpick { margin-left: 0.5rem; margin-right: 0.5rem; } } /* 768–899 is the tightest band of all — the icon nav is at its widest relative to the row — and a guest still ran 5 px into it at 0.5rem. */ @media (max-width: 899px) { .subjpick { margin-left: 0.2rem; margin-right: 0.2rem; } } /* Small phones: the header row holds the picker, the flag and search between the wordmark and the account corner, and at 320 px that is 8 px of slack. The trigger gives it back — 32 px is still a comfortable target and the flag beside it stays 40. */ @media (max-width: 359px) { .subjpick { margin-left: 0.25rem; margin-right: 0.25rem; } .subjpick-trigger { height: 2rem; min-width: 2rem; padding: 0 0.25rem; } .subjpick-mark { width: 1.05rem; height: 1.05rem; } } /* ── 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; } /* ── 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; } /* ▼▼ 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{border-color:rgb(15 23 42/0.126);background-color:rgb(15 23 42/0.06);color:rgb(61 75 94)} html[data-theme="light"] .subjpick-trigger:hover{background-color:rgb(15 23 42/0.12);color:rgb(51 63 82)} html[data-theme="light"] .subjpick-trigger:focus-visible{box-shadow:0px 0px 0px 2px rgb(14 158 180/0.55)} html[data-theme="light"][data-subject] .subjpick-trigger{color:color-mix(in srgb,rgb(var(--subj-rgb, 34 211 238)) 44%,#0f172a);box-shadow:0px 0px 0px 3px color-mix(in srgb,rgb(var(--subj-rgb, 34 211 238) / 0.08) 62%,#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 ▲▲ */