/* Faculty desk (Alpha). Builds on the site tokens in /assets/styles.css. */

.fx [hidden] { display: none !important; }
[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Account chip in the nav */
.fx-account { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.fx-account__email { color: rgb(var(--c-ink-2)); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sign-in card */
.fx-auth { max-width: 460px; margin: 24px auto; }
.fx-auth h1 { font-size: 1.9rem; margin-bottom: .3em; }
.fx-auth .btn-block { margin: 8px 0 4px; }
.fx-auth .btn svg { flex: none; background: #fff; border-radius: 999px; padding: 1px; }
.fx-auth__form { display: flex; flex-direction: column; gap: 12px; }
.fx-auth__form input { width: 100%; }
.fx-auth__row { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.fx-auth__privacy { margin: 18px 0 0; font-size: .8rem; }
.fx-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: rgb(var(--c-ink-3)); font-size: .82rem; }
.fx-or::before, .fx-or::after { content: ""; flex: 1; height: 1px; background: rgb(var(--c-line)); }
.fx-refresh { display: flex; align-items: center; gap: 10px; }
.fx-email-opts { display: flex; flex-direction: column; gap: 10px; }
.fx-email-opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 10px 12px; border: 1px solid rgb(var(--c-line)); border-radius: 6px; }
.fx-email-opt:has(input:checked) { border-color: rgb(var(--c-amber)); background: rgb(var(--c-amber-soft)); }
.fx-email-opt input { margin-top: 4px; accent-color: rgb(var(--c-amber)); }
.fx-email-opt span { display: flex; flex-direction: column; gap: 2px; color: rgb(var(--c-ink)); }
.fx-email-opt small { color: rgb(var(--c-ink-2)); font-size: .85rem; }
.fx-email-opt select { padding: 3px 6px; font-size: .85rem; }

.fx-brand { display: flex; align-items: center; gap: 10px; }
.fx-alpha {
  font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgb(var(--c-red-soft)); color: rgb(var(--c-red-ink)); border: 1px solid rgb(var(--c-red-line));
}
.fx-viewas { margin-left: auto; margin-right: 14px; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgb(var(--c-ink-2)); }
.fx-viewas select { max-width: 210px; }

/* Form controls */
.fx select, .fx input[type="text"], .fx input[type="date"], .fx input[type="email"], .fx input[type="password"], .fx input[type="search"], .fx textarea {
  font: inherit; font-size: .95rem; color: rgb(var(--c-ink));
  background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 4px;
  padding: 9px 11px; min-width: 0; max-width: 100%;
}
.fx textarea { width: 100%; min-height: 76px; resize: vertical; }
.fx select:focus, .fx input:focus, .fx textarea:focus { outline: 2px solid rgb(var(--c-amber)); outline-offset: 1px; border-color: rgb(var(--c-amber-line)); }
:root[data-theme="dark"] .fx input[type="date"] { color-scheme: dark; }

.fx-banner { background: rgb(var(--c-amber-soft)); border-bottom: 1px solid rgb(var(--c-amber-line)); }
.fx-banner__inner { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; }
.fx-banner p { margin: 0; font-size: .88rem; color: rgb(var(--c-ink)); max-width: none; }
.fx-link-btn {
  font: inherit; font-size: .85rem; font-weight: 600; color: rgb(var(--c-accent)); background: none; border: 0; padding: 4px 0;
  cursor: pointer; text-decoration: underline; text-decoration-color: rgb(var(--c-amber) / .55); text-decoration-thickness: 2px; text-underline-offset: 3px;
  white-space: nowrap;
}
.fx-link-btn:hover { text-decoration-color: rgb(var(--c-amber)); }
.fx-link-btn--danger { color: rgb(var(--c-red-ink)); text-decoration-color: rgb(var(--c-red-line)); }

.fx-main { padding-top: 28px; padding-bottom: 80px; }
.fx-loading { color: rgb(var(--c-ink-3)); }
.fx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fx-head h1 { font-size: clamp(1.7rem, 2.2vw + 1rem, 2.4rem); margin: 0; }
.fx-head p { margin: 4px 0 0; }
.fx h2 { font-size: 1.35rem; margin-bottom: .6em; }
.fx h3 { font-size: 1.1rem; }

/* Tabs */
.fx-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid rgb(var(--c-line)); margin-bottom: 24px;
  overflow-x: auto; scrollbar-width: none;
}
.fx-tabs::-webkit-scrollbar { display: none; }
.fx-tab {
  font: inherit; font-size: .95rem; font-weight: 600; color: rgb(var(--c-ink-2));
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.fx-tab[aria-selected="true"] { color: rgb(var(--c-ink)); border-bottom-color: rgb(var(--c-amber)); }
.fx-tab:hover { color: rgb(var(--c-ink)); }
.fx-tab .fx-count { margin-left: 6px; }

/* Cards and panels */
.fx-panel { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.fx-panel > h2:first-child, .fx-panel > h3:first-child { margin-top: 0; }
.fx-muted { color: rgb(var(--c-ink-3)); font-size: .88rem; }
.fx-empty { color: rgb(var(--c-ink-3)); font-size: .92rem; padding: 14px 0; margin: 0; }

.fx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.fx-kpi { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 8px; padding: 14px 16px; }
.fx-kpi__n { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: rgb(var(--c-ink)); }
.fx-kpi__l { font-size: .82rem; color: rgb(var(--c-ink-2)); }
.fx-kpi--warn .fx-kpi__n { color: rgb(var(--c-red-ink)); }

.fx-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.fx-filters label { font-size: .82rem; color: rgb(var(--c-ink-2)); display: flex; gap: 6px; align-items: center; }

/* Pills and tags */
.fx-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.fx-pill--subj { background: rgb(var(--c-accent-soft)); color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / .2); }
.fx-pill--done { background: rgb(var(--c-green-soft)); color: rgb(var(--c-green-ink)); border-color: rgb(var(--c-green-line)); }
.fx-pill--pending { background: rgb(var(--c-line-2)); color: rgb(var(--c-ink-2)); border-color: rgb(var(--c-line)); }
.fx-pill--overdue { background: rgb(var(--c-red-soft)); color: rgb(var(--c-red-ink)); border-color: rgb(var(--c-red-line)); }
.fx-pill--easy { background: rgb(var(--c-green-soft)); color: rgb(var(--c-green-ink)); border-color: rgb(var(--c-green-line)); text-transform: none; }
.fx-pill--okay { background: rgb(var(--c-amber-soft)); color: rgb(var(--c-amber)); border-color: rgb(var(--c-amber-line)); text-transform: none; }
.fx-pill--shaky { background: rgb(var(--c-red-soft)); color: rgb(var(--c-red-ink)); border-color: rgb(var(--c-red-line)); text-transform: none; }
.fx-count {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; text-align: center;
  font-size: .75rem; font-weight: 700; background: rgb(var(--c-line-2)); color: rgb(var(--c-ink-2));
}
.fx-count--warn { background: rgb(var(--c-red-soft)); color: rgb(var(--c-red-ink)); }

/* Progress bars: green = completed, amber = assigned but not yet done */
.fx-bar { position: relative; height: 8px; border-radius: 999px; background: rgb(var(--c-line-2)); border: 1px solid rgb(var(--c-line)); overflow: hidden; }
.fx-bar__assigned { position: absolute; left: 0; top: 0; bottom: 0; background: rgb(var(--c-amber) / .28); }
.fx-bar__done { position: absolute; left: 0; top: 0; bottom: 0; background: rgb(var(--c-green-ink)); }
.fx-barrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fx-barrow__top { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; }
.fx-barrow__name { font-weight: 600; color: rgb(var(--c-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-barrow__pct { color: rgb(var(--c-ink-2)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: rgb(var(--c-ink-2)); margin: 0 0 14px; }
.fx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.fx-legend .k-done { background: rgb(var(--c-green-ink)); }
.fx-legend .k-asg { background: rgb(var(--c-amber) / .28); border: 1px solid rgb(var(--c-amber-line)); }

/* Student x subject grid */
.fx-grid { display: flex; flex-direction: column; }
.fx-grid__row { display: grid; grid-template-columns: 200px repeat(5, minmax(0, 1fr)); gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid rgb(var(--c-line-2)); }
.fx-grid__row--head { border-top: 0; padding-top: 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--c-ink-3)); }
.fx-grid__who { min-width: 0; }
.fx-grid__who b { display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-grid__who span { font-size: .78rem; color: rgb(var(--c-ink-3)); }
.fx-grid__cell .fx-barrow__top { font-size: .78rem; }
.fx-grid__cell .fx-cell-label { display: none; }

/* Lists */
.fx-list { list-style: none; margin: 0; padding: 0; }
.fx-list > li { padding: 12px 0; border-top: 1px solid rgb(var(--c-line-2)); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.fx-list > li:first-child { border-top: 0; }
.fx-list__main { min-width: 0; flex: 1; }
.fx-list__title { font-weight: 600; color: rgb(var(--c-ink)); }
.fx-list__meta { font-size: .82rem; color: rgb(var(--c-ink-2)); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fx-list__actions { display: flex; gap: 10px; align-items: center; flex: none; }

.fx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

/* Task table (faculty) */
.fx-table-wrap { overflow-x: auto; }
.fx-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fx-table th { text-align: left; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--c-ink-3)); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid rgb(var(--c-line)); white-space: nowrap; }
.fx-table td { padding: 10px; border-bottom: 1px solid rgb(var(--c-line-2)); vertical-align: top; color: rgb(var(--c-ink)); }
.fx-table td small { display: block; color: rgb(var(--c-ink-3)); font-size: .78rem; }

/* Assign form */
.fx-steps { counter-reset: step; }
.fx-step { border-top: 1px solid rgb(var(--c-line-2)); padding: 18px 0; }
.fx-step:first-child { border-top: 0; padding-top: 0; }
.fx-step__label { display: flex; gap: 10px; align-items: baseline; font-weight: 700; margin-bottom: 10px; color: rgb(var(--c-ink)); }
.fx-step__label::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none;
  border-radius: 999px; font-size: .78rem; background: rgb(var(--c-ink)); color: rgb(var(--c-bg));
}
.fx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-chip {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgb(var(--c-line)); background: rgb(var(--c-surface)); color: rgb(var(--c-ink-2));
}
.fx-chip:hover { border-color: rgb(var(--c-amber-line)); color: rgb(var(--c-ink)); }
.fx-chip[aria-pressed="true"] { background: rgb(var(--c-amber-soft)); border-color: rgb(var(--c-amber)); color: rgb(var(--c-ink)); }
.fx-field { display: flex; flex-direction: column; gap: 6px; }
.fx-field > span { font-size: .82rem; color: rgb(var(--c-ink-2)); }
.fx-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.fx-row > .fx-field { flex: 1 1 220px; }
.fx-select-wide { width: 100%; }

.fx-topics { border: 1px solid rgb(var(--c-line)); border-radius: 6px; max-height: 320px; overflow-y: auto; margin-top: 10px; }
.fx-topic { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-top: 1px solid rgb(var(--c-line-2)); cursor: pointer; font-size: .92rem; }
.fx-topic:first-child { border-top: 0; }
.fx-topic:hover { background: rgb(var(--c-amber-soft) / .6); }
.fx-topic input { margin-top: 3px; accent-color: rgb(var(--c-amber)); }
.fx-topic span { flex: 1; color: rgb(var(--c-ink)); }
.fx-topic em { font-style: normal; font-size: .75rem; color: rgb(var(--c-ink-3)); white-space: nowrap; }
.fx-topic-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.fx-topic-tools input[type="search"] { flex: 1 1 200px; }
.fx-radio { display: flex; gap: 16px; flex-wrap: wrap; }
.fx-radio label { display: flex; gap: 6px; align-items: center; cursor: pointer; font-size: .95rem; }
.fx-radio input { accent-color: rgb(var(--c-amber)); }

.fx-summary {
  margin: 4px 0 14px; padding: 12px 14px; border-left: 3px solid rgb(var(--c-amber));
  background: rgb(var(--c-amber-soft)); border-radius: 0 6px 6px 0; font-size: .92rem; color: rgb(var(--c-ink));
}
.fx-summary--warn { border-left-color: rgb(var(--c-red-ink)); background: rgb(var(--c-red-soft)); }

/* Student task cards */
.fx-task {
  background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 8px;
  padding: 16px 18px; margin-bottom: 12px;
}
.fx-task--overdue { border-left: 3px solid rgb(var(--c-red-ink)); }
.fx-task--done { background: rgb(var(--c-bg)); }
.fx-task__top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.fx-task__title { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: rgb(var(--c-ink)); margin: 0 0 4px; line-height: 1.35; }
.fx-task__scope { font-size: .88rem; color: rgb(var(--c-ink-2)); margin: 0 0 8px; }
.fx-task__topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.fx-task__topics li { font-size: .8rem; padding: 2px 8px; border-radius: 4px; background: rgb(var(--c-line-2)); color: rgb(var(--c-ink-2)); }
.fx-note {
  font-size: .9rem; color: rgb(var(--c-ink)); margin: 0 0 12px; padding: 8px 12px;
  background: rgb(var(--c-amber-soft)); border-left: 3px solid rgb(var(--c-amber)); border-radius: 0 4px 4px 0; max-width: none;
}
.fx-note b { color: rgb(var(--c-amber)); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; margin-right: 6px; }
.fx-task__foot { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.fx-task__links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.fx-task__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-conf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fx-conf__q { font-size: .85rem; color: rgb(var(--c-ink-2)); margin-right: 2px; }
.fx-btn-sm { padding: 8px 14px; font-size: .88rem; }
.fx-conf-btn {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; padding: 7px 12px; border-radius: 999px;
  border: 1.5px solid rgb(var(--c-line)); background: rgb(var(--c-surface)); color: rgb(var(--c-ink));
}
.fx-conf-btn[data-conf="easy"]:hover { border-color: rgb(var(--c-green-ink)); background: rgb(var(--c-green-soft)); }
.fx-conf-btn[data-conf="okay"]:hover { border-color: rgb(var(--c-amber)); background: rgb(var(--c-amber-soft)); }
.fx-conf-btn[data-conf="shaky"]:hover { border-color: rgb(var(--c-red-ink)); background: rgb(var(--c-red-soft)); }
.fx-due { font-size: .85rem; color: rgb(var(--c-ink-2)); }
.fx-due--overdue { color: rgb(var(--c-red-ink)); font-weight: 600; }
.fx .fx-section-h { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-ink-3)); margin: 26px 0 10px; }

.fx-subjbars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

/* Toast */
.fx-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 90;
  background: rgb(var(--c-ink)); color: rgb(var(--c-bg)); padding: 10px 16px; border-radius: 6px; font-size: .9rem;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px);
}
.fx-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fx-toast button { font: inherit; font-weight: 700; color: rgb(var(--c-amber)); background: none; border: 0; cursor: pointer; padding: 0; }

/* Roster */
.fx-inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.fx-inline-form input[type="text"] { flex: 1 1 180px; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 960px) {
  .fx-grid__row--head { display: none; }
  .fx-grid__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 16px 0; }
  .fx-grid__who { grid-column: 1 / -1; }
  .fx-grid__cell .fx-cell-label { display: inline; }
  .fx-subjbars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .site-nav__inner { padding: 12px 16px; gap: 10px; }
  .site-nav__inner { flex-wrap: wrap; row-gap: 8px; }
  .fx-viewas { order: 3; flex: 1 1 100%; margin: 0; }
  .fx-viewas select { flex: 1; max-width: none; padding: 7px 8px; font-size: .88rem; }
  .fx-account__email { display: none; }
  .fx-banner__inner { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-panel { padding: 16px; }
  .fx-grid__row { grid-template-columns: minmax(0, 1fr); }
  .fx-subjbars { grid-template-columns: minmax(0, 1fr); }
  .fx-list > li { flex-direction: column; }
  .fx-task__foot { flex-direction: column; align-items: flex-start; }
  .fx-table thead { display: none; }
  .fx-table, .fx-table tbody, .fx-table tr, .fx-table td { display: block; width: 100%; }
  .fx-table tr { border-bottom: 1px solid rgb(var(--c-line)); padding: 8px 0; }
  .fx-table td { border: 0; padding: 4px 0; }
  .fx-table td[data-label]::before { content: attr(data-label) ": "; font-size: .75rem; color: rgb(var(--c-ink-3)); text-transform: uppercase; letter-spacing: .04em; }
}
@media (max-width: 380px) {
  .wordmark { font-size: 1.05rem; }
}

/* Reports */
.fx-conf-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgb(var(--c-line-2)); border: 1px solid rgb(var(--c-line)); margin: 6px 0 2px; }
.fx-conf-bar span { display: block; height: 100%; }
.fx-conf-bar .k-easy, .fx-legend .k-easy { background: rgb(var(--c-green-ink)); }
.fx-conf-bar .k-okay, .fx-legend .k-okay { background: rgb(var(--c-amber)); }
.fx-conf-bar .k-shaky, .fx-legend .k-shaky { background: rgb(var(--c-red-ink)); }
.fx-drill__subj { margin-top: 18px; }
.fx-drill__subj h3 { font-size: 1.05rem; margin-bottom: 8px; }
.fx-drill__subj h3 .fx-muted { font-family: var(--sans); font-weight: 400; font-size: .82rem; margin-left: 6px; }
.fx-drill__row { padding: 8px 0; border-top: 1px solid rgb(var(--c-line-2)); }
.fx-drill__conf { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

/* Bulk roster import */
.fx-bulk { margin-top: 16px; border: 1px solid rgb(var(--c-line)); border-radius: 6px; padding: 10px 14px; }
.fx-bulk summary { cursor: pointer; font-weight: 600; color: rgb(var(--c-ink)); }
.fx-bulk__form { margin-top: 10px; }
.fx-bulk__form textarea { font-family: var(--sans); }

/* Task states: Not started -> Ongoing -> Completed */
.fx-pill--ongoing { background: rgb(var(--c-accent-soft)); color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / .3); }
.fx-task--ongoing { border-left: 3px solid rgb(var(--c-accent)); }

/* Completion step: preparation level is compulsory */
.fx-confirm { margin-top: 14px; padding: 14px 16px; border: 1.5px solid rgb(var(--c-amber)); border-radius: 8px; background: rgb(var(--c-amber-soft)); }
.fx-confirm__q { margin: 0 0 4px; color: rgb(var(--c-ink)); font-size: .98rem; max-width: none; }
.fx-confirm__sub { margin: 0 0 12px; font-size: .85rem; max-width: none; }
.fx-confirm__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.fx-confirm__opt { font: inherit; text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 8px; border: 1.5px solid rgb(var(--c-line)); background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); display: flex; flex-direction: column; gap: 4px; }
.fx-confirm__opt b { font-size: 1.05rem; }
.fx-confirm__opt span { font-size: .82rem; color: rgb(var(--c-ink-2)); line-height: 1.4; }
.fx-confirm__opt--easy b { color: rgb(var(--c-green-ink)); }
.fx-confirm__opt--okay b { color: rgb(var(--c-amber)); }
.fx-confirm__opt--shaky b { color: rgb(var(--c-red-ink)); }
.fx-confirm__opt--easy:hover { border-color: rgb(var(--c-green-ink)); background: rgb(var(--c-green-soft)); }
.fx-confirm__opt--okay:hover { border-color: rgb(var(--c-amber)); background: rgb(var(--c-amber-soft)); }
.fx-confirm__opt--shaky:hover { border-color: rgb(var(--c-red-ink)); background: rgb(var(--c-red-soft)); }
@media (max-width: 640px) { .fx-confirm__opts { grid-template-columns: minmax(0, 1fr); } }

/* Form controls styled to match the site (no browser-default look) */
.fx select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 34px; border-radius: 6px; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:root[data-theme="dark"] .fx select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9a441' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.fx select:hover, .fx input[type="text"]:hover, .fx input[type="email"]:hover, .fx input[type="search"]:hover, .fx input[type="date"]:hover, .fx textarea:hover { border-color: rgb(var(--c-amber-line)); }
.fx select option, .fx select optgroup { background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); }
.fx input[type="text"], .fx input[type="email"], .fx input[type="search"], .fx input[type="date"], .fx input[type="password"], .fx textarea { border-radius: 6px; }

/* Checkboxes and radio buttons */
.fx input[type="checkbox"], .fx input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 2px 0 0; cursor: pointer;
  width: 18px; height: 18px; border: 1.5px solid rgb(var(--c-ink-3) / .7); background: rgb(var(--c-surface));
  display: inline-grid; place-content: center; transition: background-color .12s ease, border-color .12s ease;
}
.fx input[type="checkbox"] { border-radius: 4px; }
.fx input[type="radio"] { border-radius: 999px; }
.fx input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .12s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: rgb(var(--c-bg));
}
.fx input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 999px; transform: scale(0); transition: transform .12s ease; background: rgb(var(--c-amber)); }
.fx input[type="checkbox"]:checked { background: rgb(var(--c-amber)); border-color: rgb(var(--c-amber)); }
.fx input[type="checkbox"]:checked::before, .fx input[type="radio"]:checked::before { transform: scale(1); }
.fx input[type="radio"]:checked { border-color: rgb(var(--c-amber)); }
.fx input[type="checkbox"]:hover, .fx input[type="radio"]:hover { border-color: rgb(var(--c-amber)); }
.fx input[type="checkbox"]:focus-visible, .fx input[type="radio"]:focus-visible { outline: 2px solid rgb(var(--c-amber)); outline-offset: 2px; }
.fx-topic:has(input:checked) { background: rgb(var(--c-amber-soft)); }
.fx-topic:has(input:checked) span { font-weight: 600; }
.fx-radio label { padding: 8px 12px; border: 1px solid rgb(var(--c-line)); border-radius: 999px; background: rgb(var(--c-surface)); }
.fx-radio label:has(input:checked) { border-color: rgb(var(--c-amber)); background: rgb(var(--c-amber-soft)); font-weight: 600; }
.fx-topics { border-radius: 8px; }

/* ---------- Dashboard layout and charts ---------- */
.fx { 
  --ch-done: #1f8a3b; --ch-ongoing: #2a78d6; --ch-pending: #c9c6bd; --ch-overdue: #d03b3b;
  --ch-great: #1f8a3b; --ch-average: #e0a020; --ch-weak: #d03b3b;
  --ch-col: #2a78d6; --ch-track: rgb(var(--c-line-2));
}
:root[data-theme="dark"] .fx {
  --ch-done: #199e70; --ch-ongoing: #3987e5; --ch-pending: #4f4e4a; --ch-overdue: #d94848;
  --ch-great: #199e70; --ch-average: #c98500; --ch-weak: #d94848;
  --ch-col: #3987e5;
}
.fx-dash { display: grid; gap: 16px; margin-bottom: 16px; }
.fx-dash--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
.fx-dash--student { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.fx-dash > .fx-panel { margin-bottom: 0; }
.fx-card { padding: 16px 18px; display: flex; flex-direction: column; }
.fx-card h2 { font-size: 1.1rem; margin-bottom: 12px; }
.fx-h-note { font-family: var(--sans); font-weight: 400; font-size: .8rem; margin-left: 4px; }
.fx-stack-gap { display: flex; flex-direction: column; gap: 10px; }
.fx-card .fx-list > li { padding: 8px 0; }
.fx-kpis { margin-bottom: 16px; }

.ch-donut { display: flex; align-items: center; gap: 16px; flex: 1; }
.ch-donut svg { width: 116px; height: 116px; flex: none; overflow: visible; }
.ch-track { stroke: var(--ch-track); }
.ch-arc { cursor: pointer; transition: stroke-width .15s ease; }
.ch-arc:hover { stroke-width: 19; }
.ch-arc.ch-done { stroke: var(--ch-done); } .ch-arc.ch-ongoing { stroke: var(--ch-ongoing); }
.ch-arc.ch-pending { stroke: var(--ch-pending); } .ch-arc.ch-overdue { stroke: var(--ch-overdue); }
.ch-arc.ch-great { stroke: var(--ch-great); } .ch-arc.ch-average { stroke: var(--ch-average); } .ch-arc.ch-weak { stroke: var(--ch-weak); }
.ch-centre { font-family: var(--serif); font-size: 26px; font-weight: 700; fill: rgb(var(--c-ink)); }
.ch-centre-l { font-family: var(--sans); font-size: 10px; fill: rgb(var(--c-ink-2)); }
.ch-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ch-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 36px; gap: 8px; align-items: center; font-size: .85rem; color: rgb(var(--c-ink-2)); }
.ch-legend b { color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; text-align: right; }
.ch-legend em { font-style: normal; font-size: .78rem; color: rgb(var(--c-ink-3)); text-align: right; font-variant-numeric: tabular-nums; }
.ch-sw { width: 10px; height: 10px; border-radius: 3px; display: block; }
.ch-sw.ch-done { background: var(--ch-done); } .ch-sw.ch-ongoing { background: var(--ch-ongoing); }
.ch-sw.ch-pending { background: var(--ch-pending); } .ch-sw.ch-overdue { background: var(--ch-overdue); }
.ch-sw.ch-great { background: var(--ch-great); } .ch-sw.ch-average { background: var(--ch-average); } .ch-sw.ch-weak { background: var(--ch-weak); }

.ch-cols { width: 100%; height: 160px; display: block; flex: 1; }
.ch-col { fill: var(--ch-col); }
.ch-hit { fill: transparent; cursor: pointer; }
.ch-hit:hover { fill: rgb(var(--c-ink) / .05); }
.ch-grid { stroke: rgb(var(--c-line)); stroke-dasharray: 3 3; }
.ch-base { stroke: rgb(var(--c-ink-3) / .6); }
.ch-axis { font-family: var(--sans); font-size: 10px; fill: rgb(var(--c-ink-3)); }

.ch-stack { display: flex; gap: 2px; height: 10px; margin: 6px 0 2px; border-radius: 999px; overflow: hidden; }
.ch-stack span { display: block; height: 100%; cursor: pointer; }
.ch-stack .ch-great { background: var(--ch-great); } .ch-stack .ch-average { background: var(--ch-average); } .ch-stack .ch-weak { background: var(--ch-weak); }
.fx-legend .k-easy { background: var(--ch-great); } .fx-legend .k-okay { background: var(--ch-average); } .fx-legend .k-shaky { background: var(--ch-weak); }

.ch-tip {
  position: fixed; z-index: 95; pointer-events: none; opacity: 0; transition: opacity .1s ease;
  background: rgb(var(--c-ink)); color: rgb(var(--c-bg)); font-family: var(--sans); font-size: .8rem; font-weight: 600;
  padding: 6px 10px; border-radius: 6px; box-shadow: var(--shadow); max-width: 260px;
}
.ch-tip.is-on { opacity: 1; }

/* Student: next task card and two-column task cards */
.fx-next { border-color: rgb(var(--c-amber-line)); background: rgb(var(--c-amber-soft)); }
.fx-next__k { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-amber)); }
.fx-next .fx-task__actions { margin-top: auto; padding-top: 6px; }
.fx-next__link { font-size: .9rem; }
.fx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.fx-cards .fx-task { margin-bottom: 0; }

/* Chapter picker */
.fx-chpick input[type="search"] { width: 100%; }
.fx-chpick__list { margin-top: 8px; max-height: 300px; overflow-y: auto; border: 1px solid rgb(var(--c-line)); border-radius: 8px; }
.fx-chpick__item {
  font: inherit; width: 100%; text-align: left; cursor: pointer; background: rgb(var(--c-surface)); color: rgb(var(--c-ink));
  border: 0; border-top: 1px solid rgb(var(--c-line-2)); padding: 9px 12px;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center;
}
.fx-chpick__item:first-child { border-top: 0; }
.fx-chpick__item:hover { background: rgb(var(--c-amber-soft) / .7); }
.fx-chpick__item.is-on { background: rgb(var(--c-amber-soft)); font-weight: 600; }
.fx-chpick__no { font-family: var(--serif); font-weight: 700; color: rgb(var(--c-amber)); text-align: right; }
.fx-chpick__t { font-size: .92rem; }
.fx-chpick__item em { font-style: normal; font-size: .75rem; color: rgb(var(--c-ink-3)); white-space: nowrap; }
.fx-chpick__chosen { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border: 1.5px solid rgb(var(--c-amber)); background: rgb(var(--c-amber-soft)); border-radius: 8px; }
.fx-chpick__chosen b { display: block; color: rgb(var(--c-ink)); }
.fx-chpick__chosen span { font-size: .8rem; color: rgb(var(--c-ink-2)); }

@media (max-width: 1100px) {
  .fx-dash--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fx-dash--3 > .fx-card--wide, .fx-dash--3 > :nth-child(3):last-child { grid-column: 1 / -1; }
  .fx-dash--student { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fx-dash--student > .fx-next { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .fx-dash--3, .fx-dash--student { grid-template-columns: minmax(0, 1fr); }
  .fx-cards { grid-template-columns: minmax(0, 1fr); }
  .fx-chpick__item em { display: none; }
}
@media (max-width: 380px) { .ch-donut { flex-direction: column; align-items: stretch; } .ch-donut svg { align-self: center; } }

.fx-dash--3.fx-dash--eq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .fx-dash--3.fx-dash--eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .fx-dash--3.fx-dash--eq { grid-template-columns: minmax(0, 1fr); } }
/* legend fit: keep labels on one line; wrap legend under the ring when a card is narrow */
.ch-donut { flex-wrap: wrap; gap: 14px; }
.ch-donut svg { width: 104px; height: 104px; }
.ch-legend { min-width: 160px; }
.ch-legend li { grid-template-columns: 10px minmax(0, 1fr) auto 32px; gap: 6px; }
.ch-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-cards > .fx-task:only-child { grid-column: 1 / -1; }
.ch-donut { gap: 12px; justify-content: center; }
.ch-legend { min-width: 140px; }
.fx-dash--3:not(.fx-dash--eq) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 1100px) { .fx-dash--3:not(.fx-dash--eq) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .fx-dash--3:not(.fx-dash--eq) { grid-template-columns: minmax(0, 1fr); } }
.fx-stack-gap { flex: 1; justify-content: space-evenly; }

/* Join codes */
.fx-code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-weight: 700; letter-spacing: .06em; font-size: .92rem; color: rgb(var(--c-ink)); white-space: nowrap; }
.fx-code-input { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 1.15rem !important; letter-spacing: .12em; text-transform: uppercase; }
.fx-codes { max-height: 420px; overflow-y: auto; }
.fx-codes tr.is-new td { background: rgb(var(--c-amber-soft)); }
.fx-codes-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fx-codes-form .fx-field { width: 100%; }
.fx-codes-form textarea { font-family: var(--sans); }
.fx-field--inline { flex-direction: row !important; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-field--inline input { width: 80px; }
.fx input[type="number"] { font: inherit; font-size: .95rem; color: rgb(var(--c-ink)); background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; padding: 8px 10px; }

/* ---------- Page top: title on the left, exam countdown on the right ---------- */
.fx-main { padding-top: 20px; }
.fx-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 24px; align-items: stretch; margin-bottom: 16px; }
.fx-top__intro { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding-bottom: 2px; }
.fx-top__intro h1 { font-size: clamp(1.6rem, 1.8vw + 1rem, 2.2rem); margin: 0; }
.fx-top__intro p { margin: 0; }
.fx-top__intro .fx-refresh { margin-top: 8px; }
.fx-top .fx-cd { margin-bottom: 0; }
@media (max-width: 960px) { .fx-top { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* Exam countdown */
.fx-cd { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.fx-cd--near { border-color: rgb(var(--c-amber-line)); }
.fx-cd__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.fx-cd__k { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-ink-3)); margin: 0 0 3px; }
.fx-cd__clock { display: flex; flex-direction: column; flex: none; white-space: nowrap; }
.fx-cd__date { font-size: .95rem; color: rgb(var(--c-ink)); line-height: 1.35; }
.fx-cd__time { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 1.25rem; white-space: nowrap; font-weight: 600; color: rgb(var(--c-ink)); letter-spacing: .01em; }
.fx-cd__main { text-align: right; min-width: 0; flex: 1; }
.fx-cd__big { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; line-height: 1.05; margin-top: 2px; }
.fx-cd__days { font-family: var(--serif); font-size: 2.1rem; color: rgb(var(--c-amber)); font-variant-numeric: tabular-nums; }
.fx-cd__unit { font-size: .9rem; font-weight: 600; color: rgb(var(--c-ink-2)); }
.fx-cd__sub { margin: 4px 0 0; font-size: .82rem; color: rgb(var(--c-ink-3)); max-width: none; }
.fx-cd__khead { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; }
.fx-cd__change { font-size: .75rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.fx-cd__short { display: none; }
@media (max-width: 640px) { .fx-cd__long { display: none; } .fx-cd__short { display: inline; } }
.fx-cd__picks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fx-cd__bar { position: relative; height: 10px; border-radius: 999px; background: rgb(var(--c-line-2)); border: 1px solid rgb(var(--c-line)); overflow: hidden; }
.fx-cd__fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgb(var(--c-amber)); border-radius: 999px; transition: width .9s linear; }
.fx-cd__legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: .78rem; color: rgb(var(--c-ink-3)); font-variant-numeric: tabular-nums; }
.fx-cd__legend b { color: rgb(var(--c-ink)); }
.fx-cd__split { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.fx-top__intro .fx-cd__split .fx-cd__k { margin: 0 4px 0 0; }
.fx-cd__split .fx-cd__k { margin: 0 4px 0 0; }
.fx-pill--muted { color: rgb(var(--c-ink-3)); }
@media (max-width: 340px) {
  .fx-cd__row { flex-direction: column; gap: 8px; }
  .fx-cd__main { text-align: left; }
  .fx-cd__big, .fx-cd__picks, .fx-cd__khead { justify-content: flex-start; }
}

/* First sign-in: choose an attempt */
.fx-pickatt { max-width: 720px; margin: 24px auto; padding: 28px; }
.fx-pickatt h1 { font-size: clamp(1.4rem, 1.5vw + 1rem, 1.9rem); margin: 0 0 6px; }
.fx-pickatt__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 12px; }
.fx-pickatt__opt { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px; border-radius: 8px; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-bg)); color: rgb(var(--c-ink)); font: inherit; cursor: pointer; }
.fx-pickatt__opt b { font-family: var(--serif); font-size: 1.15rem; }
.fx-pickatt__opt span { font-size: .82rem; color: rgb(var(--c-ink-3)); }
.fx-pickatt__opt:hover, .fx-pickatt__opt:focus-visible { border-color: rgb(var(--c-amber)); background: rgb(var(--c-amber-soft)); }
@media (max-width: 640px) { .fx-pickatt__opts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .fx-cd { padding: 12px 14px; }
  .fx-cd__date { font-size: .85rem; }
  .fx-cd__time { font-size: 1.1rem; }
  .fx-cd__days { font-size: 1.8rem; }
  .fx-top__intro h1 { font-size: 1.6rem; }
}

/* ---------- Revisions, PYQs and the preparation trail ---------- */
.fx-pill--rev { background: rgb(var(--c-amber-soft)); color: rgb(var(--c-amber)); border-color: rgb(var(--c-amber-line)); }
.fx-pyqs { margin: 10px 0 0; padding: 10px 12px; border: 1px solid rgb(var(--c-line)); border-radius: 6px; background: rgb(var(--c-bg)); }
.fx-pyqs__h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--c-ink-3)); }
.fx-pyqs ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: .9rem; }

.fx-pyq-actions { margin-top: 10px; }
.fx-pyqsel { list-style: none; margin: 0 0 6px; padding: 0; border: 1px solid rgb(var(--c-line)); border-radius: 8px; }
.fx-pyqsel li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid rgb(var(--c-line-2)); font-size: .9rem; }
.fx-pyqsel li:first-child { border-top: 0; }
.fx-pyqlist { border: 1px solid rgb(var(--c-line)); border-radius: 8px; max-height: 360px; overflow-y: auto; margin-top: 10px; }
.fx-pyqopt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-top: 1px solid rgb(var(--c-line-2)); cursor: pointer; }
.fx-pyqopt:first-child { border-top: 0; }
.fx-pyqopt:hover { background: rgb(var(--c-line-2) / .6); }
.fx-pyqopt input { margin-top: 3px; flex: none; }
.fx-pyqopt > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .9rem; color: rgb(var(--c-ink)); }
.fx-pyqopt__t { color: rgb(var(--c-ink-2)); font-size: .85rem; }
.fx-pyqopt em { font-style: normal; font-size: .75rem; color: rgb(var(--c-ink-3)); }
.fx-pyq-paste { display: flex; gap: 8px; margin-top: 12px; }
.fx-pyq-paste input { flex: 1 1 auto; min-width: 0; }
.fx-inline-check { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: rgb(var(--c-ink-2)); cursor: pointer; }
@media (max-width: 520px) { .fx-pyq-paste { flex-direction: column; } }

.fx-trail { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.fx-trail__dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: .72rem; font-weight: 700; color: #fff; flex: none; }
.fx-trail__dot--easy { background: var(--ch-great); }
.fx-trail__dot--okay { background: var(--ch-average); color: #1d1a12; }
.fx-trail__dot--shaky { background: var(--ch-weak); }
.fx-trail__sep { display: inline-block; width: 10px; height: 2px; background: rgb(var(--c-line)); border-radius: 2px; }
.fx-trail__key { align-items: center; }
.fx-trail__key .fx-trail__dot { width: 18px; height: 18px; font-size: .62rem; margin-right: 5px; vertical-align: 0; }
.fx-trend { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-ink-2)); background: rgb(var(--c-line-2)); white-space: nowrap; }
.fx-trend--improving { background: rgb(var(--c-green-soft)); color: rgb(var(--c-green-ink)); border-color: rgb(var(--c-green-line)); }
.fx-trend--stuck, .fx-trend--slipping { background: rgb(var(--c-red-soft)); color: rgb(var(--c-red-ink)); border-color: rgb(var(--c-red-line)); }
.fx-trend--first { background: transparent; color: rgb(var(--c-ink-3)); }
.fx-trails { list-style: none; margin: 0; padding: 0; }
.fx-trails li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid rgb(var(--c-line-2)); }
.fx-trails li:first-child { border-top: 0; }
.fx-trails--fac li { grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) auto; }
.fx-trails__who { display: flex; flex-direction: column; }
.fx-trails__who small { color: rgb(var(--c-ink-3)); font-size: .78rem; }
.fx-trails__ch { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .92rem; color: rgb(var(--c-ink)); }
.fx-trails__ch > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.fx-trails__r { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.fx-trendchips { margin: 4px 0 12px; }
.fx-drill__conf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .fx-trails li, .fx-trails--fac li { grid-template-columns: minmax(0, 1fr); }
  .fx-trails__r { justify-content: flex-start; }
}
.fx-legend.fx-trail__key i.fx-trail__dot { width: 18px; height: 18px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* ---------- Countdown: a little colour ----------
   Warm tint on the card, the time in the site's ink blue, a progress bar that
   warms from amber to red as the exam nears, and one colour per season
   (December blue, June green) wherever an attempt is named. */
.fx-cd { background: linear-gradient(135deg, rgb(var(--c-amber-soft)) 0%, rgb(var(--c-surface)) 62%); border-color: rgb(var(--c-amber-line)); }
.fx-cd__time { color: rgb(var(--c-accent)); }
.fx-cd__k { color: rgb(var(--c-amber)); }
.fx-cd__bar { background: rgb(var(--c-surface)); border-color: rgb(var(--c-amber-line)); }
.fx-cd__fill { background: linear-gradient(90deg, rgb(var(--c-amber) / .75), rgb(var(--c-amber)) 55%, rgb(var(--c-red-ink))); }
.fx-cd__legend b[data-cd-left] { color: rgb(var(--c-amber)); }
.fx-cd__picks { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; justify-content: end; }
.fx-cd__pick { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 12px; border-radius: 8px; border: 1px solid; font: inherit; cursor: pointer; text-align: left; transition: transform .12s ease, box-shadow .12s ease; }
.fx-cd__pick b { font-size: .9rem; white-space: nowrap; }
.fx-cd__pick span { font-size: .74rem; opacity: .8; white-space: nowrap; }
.fx-cd__pick:hover, .fx-cd__pick:focus-visible { transform: translateY(-1px); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.fx-cd__pick--12, .fx-pill--att12 { background: rgb(var(--c-accent-soft)); color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / .3); }
.fx-cd__pick--06, .fx-pill--att06 { background: rgb(var(--c-green-soft)); color: rgb(var(--c-green-ink)); border-color: rgb(var(--c-green-line)); }
.fx-pill--muted { background: transparent; }
@media (max-width: 640px) { .fx-cd__picks { grid-template-columns: minmax(0, 1fr); justify-content: stretch; } }
.fx-cd__pickrow { padding-top: 10px; border-top: 1px solid rgb(var(--c-amber-line) / .7); }
.fx-cd__pickrow .fx-cd__picks { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
.fx-cd__pickrow .fx-link-btn { margin-top: 8px; }
@media (max-width: 640px) { .fx-cd__pickrow .fx-cd__picks { grid-template-columns: minmax(0, 1fr); } }
.fx-account__email { color: rgb(var(--c-ink)); font-weight: 600; cursor: default; }
.fx-legend.fx-trail__key > span { display: inline-flex; align-items: center; }
.fx-legend.fx-trail__key i.fx-trail__dot { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; font-size: .62rem; font-style: normal; }
.fx-trail__dot { line-height: 1; padding: 0; }
.fx-trails__r .fx-trend { min-width: 132px; text-align: center; }

/* ---------- Notifications bell (top left, next to the brand) ---------- */
.fx-bellwrap { position: relative; }
.fx-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface)); color: rgb(var(--c-ink-2)); cursor: pointer; }
.fx-bell[hidden] { display: none; }
.fx-bell svg { width: 18px; height: 18px; }
.fx-bell:hover, .fx-bell[aria-expanded="true"] { color: rgb(var(--c-ink)); border-color: rgb(var(--c-amber-line)); background: rgb(var(--c-amber-soft)); }
.fx-bell:focus-visible { outline: 2px solid rgb(var(--c-amber)); outline-offset: 2px; }
.fx-bell__n { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ch-weak); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid rgb(var(--c-bg)); box-sizing: content-box; }
.fx-bell__n[hidden] { display: none; }
.fx-bellpanel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; width: 380px; max-height: min(70vh, 560px); overflow-y: auto; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / .14); }
.fx-bellpanel[hidden] { display: none; }
.fx-bellpanel__head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 16px; background: rgb(var(--c-surface)); border-bottom: 1px solid rgb(var(--c-line)); font-size: .9rem; }
.fx-bellpanel__head .fx-muted { font-size: .78rem; }
.fx-notes { list-style: none; margin: 0; padding: 0; }
.fx-notes li { display: flex; gap: 10px; padding: 11px 16px; border-top: 1px solid rgb(var(--c-line-2)); }
.fx-notes li:first-child { border-top: 0; }
.fx-notes li.is-new { background: rgb(var(--c-amber-soft) / .7); }
.fx-notes li > i { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--ch-ongoing); }
.fx-note--good > i { background: var(--ch-great) !important; }
.fx-note--warn > i { background: var(--ch-average) !important; }
.fx-note--bad > i { background: var(--ch-weak) !important; }
.fx-notes p { margin: 0; max-width: none; }
.fx-notes__t { font-size: .88rem; color: rgb(var(--c-ink)); font-weight: 600; line-height: 1.35; }
.fx-notes__s { font-size: .8rem; color: rgb(var(--c-ink-2)); margin-top: 2px !important; }
.fx-notes__at { font-size: .72rem; color: rgb(var(--c-ink-3)); margin-top: 3px !important; }
.fx-notes__at b { color: rgb(var(--c-amber)); font-weight: 700; margin-left: 4px; }
@media (max-width: 640px) {
  .fx-bellwrap { position: static; }
  .fx-bellpanel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
}