/* TibbEDU application styles.
   Palette from the plan: light gray surfaces, dark gray active state, cyan accent. */

.tibb-qbank-root {
	--tq-bg: #f6f7f9;
	--tq-surface: #ffffff;
	--tq-border: #e3e7ec;
	--tq-text: #23282d;
	--tq-muted: #6b7683;
	--tq-accent: #0e9bb0;
	--tq-active: #414952;
	--tq-good: #22b07d;
	--tq-bad: #e35d5b;
	--tq-mark: #f6d365;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--tq-text);
	line-height: 1.5;
}

.tibb-qbank-root *, .tibb-qbank-root *::before, .tibb-qbank-root *::after { box-sizing: border-box; }

/* Full width. The exact offsets are measured at runtime, because a vw based
   breakout cannot know about a parent's padding or centring and overflows the
   right edge whenever it guesses wrong. This rule is only the starting state. */
.tibb-qbank-root {
	width: 100%;
	max-width: 100%;
	padding: 0 16px;
	overflow-x: hidden;
}
.tq-app { overflow-x: hidden; max-width: 100%; }
.tq-main { overflow-x: auto; min-width: 0; max-width: 100%; }
.tq-player { max-width: 100%; }
.tq-player__body { min-width: 0; max-width: 100%; }
.tq-player__main { min-width: 0; max-width: 100%; }
.tq-screen { min-width: 0; max-width: 100%; }
.tq-card { max-width: 100%; }

/* Layout */
.tq-app { display: flex; gap: 0; min-height: 60vh; background: var(--tq-bg); border: 1px solid var(--tq-border); border-radius: 12px; overflow: hidden; }
.tq-sidebar { width: 216px; flex: 0 0 216px; background: #eef1f4; border-right: 1px solid var(--tq-border); padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.tq-main { flex: 1 1 auto; padding: 22px; min-width: 0; }
.tq-burger { display: none; }

.tq-brand { display: flex; align-items: center; padding: 2px 4px 6px; }
.tq-brand__logo { width: 100%; max-width: 168px; height: auto; display: block; }
.tq-brand__text { font-size: 22px; font-weight: 700; color: var(--tq-active); letter-spacing: -0.02em; }
.tq-brand__text em { font-style: normal; color: var(--tq-accent); }
.tq-sidebar__foot { display: block; width: 100%; margin: auto 0 0; padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; font-size: 13px; color: var(--tq-muted); text-align: left; cursor: pointer; font-family: inherit; }
.tq-sidebar__foot:hover { background: #e2e7ec; color: var(--tq-text); }
.tq-sidebar__foot.is-active { background: var(--tq-active); color: var(--tq-accent); font-weight: 600; }

.tq-nav { display: flex; flex-direction: column; gap: 2px; }
.tq-nav__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--tq-muted); font-size: 14px; text-align: left; cursor: pointer; }
.tq-nav__item em { font-style: normal; width: 16px; text-align: center; }
.tq-nav__item:hover { background: #e2e7ec; color: var(--tq-text); }
.tq-nav__item.is-active { background: var(--tq-active); color: var(--tq-accent); font-weight: 600; }

.tq-select, .tq-input { width: 100%; padding: 8px 10px; border: 1px solid var(--tq-border); border-radius: 7px; background: var(--tq-surface); font-size: 14px; color: var(--tq-text); }
.tq-input--sm { width: 120px; }

/* Cards and typography */
.tq-screen { display: flex; flex-direction: column; gap: 16px; }
.tq-screen__title { margin: 0; font-size: 22px; font-weight: 700;
	/* Declared, never inherited. A theme that styles h1 directly supplies
	   its own line-height, letter-spacing, and transform, and a tight pair
	   of those is what makes a heading overlap itself. Same failure as the
	   lab panel inheriting theme colours. */
	line-height: 1.3; letter-spacing: normal; word-spacing: normal;
	text-transform: none; font-variant: normal; font-stretch: normal;
	white-space: normal; overflow-wrap: break-word; }
.tq-card { background: var(--tq-surface); border: 1px solid var(--tq-border); border-radius: 10px; padding: 18px; }
.tq-card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--tq-active);
	line-height: 1.35; letter-spacing: normal; word-spacing: normal;
	text-transform: none; font-variant: normal; font-stretch: normal; }
.tq-mt { margin-top: 18px !important; }
.tq-muted { color: var(--tq-muted); font-size: 13px; }
.tq-muted.is-warn { color: var(--tq-bad); font-weight: 600; }
.tq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tq-spacer { flex: 1 1 auto; }
.tq-bigscore { font-size: 44px; font-weight: 700; margin: 0; color: var(--tq-accent); }

/* Buttons */
.tq-btn { padding: 8px 15px; border: 1px solid var(--tq-border); border-radius: 7px; background: var(--tq-surface); color: var(--tq-text); font-size: 14px; cursor: pointer; }
.tq-btn:hover { background: #f0f3f6; }
.tq-btn--primary { background: var(--tq-accent); border-color: var(--tq-accent); color: #fff; font-weight: 600; }
.tq-btn--primary:hover { background: #0b8497; }
.tq-btn--danger { background: var(--tq-bad); border-color: var(--tq-bad); color: #fff; }
.tq-btn--lg { padding: 11px 26px; font-size: 15px; }
.tq-btn--sm { padding: 5px 11px; font-size: 13px; }
.tq-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tq-actions { display: flex; gap: 8px; align-items: center; }
.tq-actions--stack { margin-bottom: 18px; flex-wrap: wrap; }

/* Tabs */
.tq-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--tq-border); }
.tq-tabs__tab { padding: 10px 16px; border: 0; background: transparent; color: var(--tq-muted); font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.tq-tabs__tab.is-active { color: var(--tq-accent); border-bottom-color: var(--tq-accent); font-weight: 600; }

/* Charts */
.tq-summary { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.tq-donut__value { font-size: 22px; font-weight: 700; fill: var(--tq-text); }
.tq-donut__label { font-size: 11px; fill: var(--tq-muted); }
.tq-line { width: 100%; height: 180px; }
.tq-stats { margin: 0; display: flex; flex-direction: column; gap: 7px; min-width: 190px; }
.tq-stats > div { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; }
.tq-stats dt { color: var(--tq-muted); margin: 0; }
.tq-stats dd { margin: 0; font-weight: 700; }
.tq-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: #eceff3; margin-top: 5px; max-width: 220px; }
.tq-bar span { display: block; }

/* Tables */
.tq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tq-table th { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--tq-border); color: var(--tq-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; }
.tq-table td { padding: 10px 8px; border-bottom: 1px solid #f1f3f6; vertical-align: middle; }
.tq-table tr.is-child td:first-child { padding-left: 30px; color: var(--tq-muted); }
.tq-score { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 30px; border-radius: 15px; background: #eef1f4; font-weight: 700; }
.tq-score.is-good { background: #e4f6ee; color: #16875f; }
.tq-score.is-poor { background: #fdecec; color: #b93b39; }

/* Trees and chips */
.tq-tree { list-style: none; margin: 0; padding: 0; }
.tq-tree--child { padding-left: 22px; }
.tq-tree__row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.tq-tree__row label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; flex: 1; }
.tq-tree__toggle { width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid var(--tq-border); border-radius: 4px; background: var(--tq-surface); color: var(--tq-muted); cursor: pointer; line-height: 1; padding: 0; }
.tq-tree__count { font-style: normal; margin-left: auto; font-size: 11px; color: var(--tq-muted); background: #f0f3f6; border-radius: 9px; padding: 1px 7px; }
.tq-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.tq-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--tq-border); border-radius: 18px; font-size: 13px; cursor: pointer; background: var(--tq-surface); }
.tq-chip.is-on { border-color: var(--tq-accent); background: #e6f6f8; color: #0b7183; font-weight: 600; }
.tq-chip em { font-style: normal; color: var(--tq-muted); font-size: 11px; }
.tq-card--footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tq-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.tq-toggles { display: flex; flex-direction: column; gap: 8px; }
.tq-switch { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; }

/* Test player */
.tq-player { display: flex; flex-direction: column; min-height: 78vh; background: var(--tq-surface); border: 1px solid var(--tq-border); border-radius: 10px; overflow: hidden; }
.tq-player.is-dark { --tq-surface: #1f2429; --tq-bg: #171b1f; --tq-text: #e6eaee; --tq-border: #333c44; --tq-muted: #9aa7b3; background: #1f2429; color: #e6eaee; }
.tq-player__top, .tq-player__bottom, .tq-navigator, .tq-float { font-size: 13px; }
.tq-player__top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #33538c; color: #fff; flex-wrap: wrap; max-width: 100%; min-width: 0; }
.tq-player__meta { display: flex; flex-direction: column; line-height: 1.25; font-size: 12px; }
.tq-player__nav, .tq-player__tools { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; min-width: 0; }
.tq-player__tools { margin-left: 0; }
.tq-icon { background: transparent; border: 1px solid rgba(255,255,255,0.28); color: #fff; border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.tq-icon:hover:not(:disabled) { background: rgba(255,255,255,0.14); }
.tq-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.tq-icon.is-marked { color: var(--tq-mark); border-color: var(--tq-mark); }

.tq-player__body { display: flex; flex: 1 1 auto; min-height: 0; }
.tq-navigator { list-style: none; margin: 0; padding: 6px; width: 58px; flex: 0 0 58px; border-right: 1px solid var(--tq-border); background: var(--tq-bg); overflow-y: auto; max-height: 66vh; }
.tq-navigator__item { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 5px 7px; margin-bottom: 2px; border: 0; border-radius: 5px; background: transparent; font-size: 12px; cursor: pointer; color: var(--tq-text); }
.tq-navigator__item em { font-style: normal; color: var(--tq-mark); }
.tq-navigator__item.is-answered { background: #dfe6ee; }
.tq-navigator__item.is-correct { background: #d8f2e6; color: #146c4d; }
.tq-navigator__item.is-incorrect { background: #fbdedd; color: #a83432; }
.tq-navigator__item.is-omitted { background: #e6e9ed; color: #5b6672; }
.tq-navigator__item.is-current { outline: 2px solid var(--tq-accent); outline-offset: -2px; font-weight: 700; }

.tq-player__main { flex: 1 1 auto; padding: 20px 24px; overflow-y: auto; max-height: 66vh; }
.tq-stem { font-size: 1em; margin-bottom: 18px; max-width: 62em; }
.tq-stem img { max-width: 100%; height: auto; }
.tq-stem table, .tq-explain__body table { border-collapse: collapse; margin: 12px 0; }
.tq-stem td, .tq-stem th, .tq-explain__body td, .tq-explain__body th { border: 1px solid var(--tq-border); padding: 6px 10px; font-size: 0.9em; }
.tq-hl { background: var(--tq-mark); cursor: pointer; }

.tq-choices {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border: 1px solid var(--tq-border);
	border-radius: 8px;
	overflow: hidden;
	/* Sized to the choices rather than the page, so the cross out control sits
	   next to the text instead of far off at the right margin. */
	width: fit-content;
	min-width: min(100%, 26em);
	max-width: 100%;
}
.tq-choices li + li { border-top: 1px solid var(--tq-border); }
.tq-choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; cursor: pointer; }
.tq-choice:hover { background: var(--tq-bg); }
.tq-choice.is-selected { background: #e9eff8; }
.tq-choice.is-correct { background: #e2f6ec; }
.tq-choice.is-wrong { background: #fceceb; }
.tq-choice__key { font-weight: 700; flex: 0 0 auto; }
.tq-choice__text { flex: 1 1 auto; }
.tq-choice__text.is-struck { text-decoration: line-through; color: var(--tq-muted); }
.tq-choice__pct { font-size: 12px; color: var(--tq-muted); flex: 0 0 auto; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.tq-choice.is-correct .tq-choice__pct { color: #16875f; font-weight: 700; }

.tq-explain { max-width: 72em; border: 1px solid var(--tq-border); border-left-width: 4px; border-radius: 8px; padding: 14px 16px; }
.tq-explain.is-correct { border-left-color: var(--tq-good); }
.tq-explain.is-incorrect { border-left-color: var(--tq-bad); }
.tq-explain__head { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--tq-muted); margin-bottom: 10px; }
.tq-explain__head strong { color: var(--tq-text); }
.tq-explain__body img { max-width: 100%; height: auto; }

.tq-player__bottom { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: #33538c; color: #fff; font-size: 13px; flex-wrap: wrap; max-width: 100%; min-width: 0; }
.tq-player__bottom .tq-btn { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.tq-player__bottom .tq-btn--danger { background: var(--tq-bad); border-color: var(--tq-bad); }
.tq-player__bottom .tq-muted { color: rgba(255,255,255,0.7); }

/* Floating tools.
   These panels declare every colour explicitly rather than inheriting. They
   are position: fixed inside the player, so they were picking up the dark mode
   variables and the host theme's colours, which left calculator keys and lab
   value tabs unreadable. */
.tq-float {
	position: fixed; z-index: 99999;
	--tqf-bg: #ffffff;
	--tqf-text: #1c2126;
	--tqf-muted: #5c6873;
	--tqf-line: #ccd4dc;
	--tqf-key: #eef1f5;
	--tqf-key-hover: #dde4ec;
	background: var(--tqf-bg); color: var(--tqf-text);
	border: 1px solid #9aa8b5; border-radius: 8px;
	box-shadow: 0 14px 38px rgba(16, 24, 32, 0.3);
}
.tq-player.is-dark .tq-float {
	--tqf-bg: #232a31;
	--tqf-text: #eef2f6;
	--tqf-muted: #a9b6c2;
	--tqf-line: #3c4753;
	--tqf-key: #333d47;
	--tqf-key-hover: #414d59;
	border-color: #46525f;
}
.tq-float__bar { display: flex; justify-content: space-between; align-items: center; padding: 7px 11px; background: #2f4d84; color: #ffffff; border-radius: 7px 7px 0 0; cursor: move; font-size: 13px; font-weight: 600; user-select: none; }
.tq-float__bar button { background: transparent; border: 0; color: #ffffff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.tq-float__bar button:hover { color: #ffd9d8; }
.tq-float--calc { width: 244px; }
.tq-float--labs { width: 720px; max-width: 96vw; }

.tq-calc__screen { padding: 11px 13px; text-align: right; font-size: 21px; font-family: ui-monospace, Menlo, monospace; color: var(--tqf-text); background: var(--tqf-bg); border-bottom: 1px solid var(--tqf-line); overflow-x: auto; }
.tq-calc__pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 7px; background: var(--tqf-bg); border-radius: 0 0 7px 7px; }
.tq-calc__key { padding: 10px 0; border: 1px solid var(--tqf-line); border-radius: 5px; background: var(--tqf-key); color: var(--tqf-text); font-size: 15px; font-weight: 600; cursor: pointer; }
.tq-calc__key.is-num { background: var(--tqf-bg); font-weight: 500; }
.tq-calc__key:hover { background: var(--tqf-key-hover); }

.tq-labs__body { padding: 11px; max-height: 62vh; overflow-y: auto; background: var(--tqf-bg); border-radius: 0 0 7px 7px; }
.tq-labs__body .tq-input { background: var(--tqf-bg); color: var(--tqf-text); border-color: var(--tqf-line); }
.tq-labs__body .tq-input::placeholder { color: var(--tqf-muted); }
.tq-labs__tabs { display: flex; gap: 5px; margin: 10px 0; flex-wrap: wrap; }
.tq-labs__tab { padding: 5px 12px; border: 1px solid var(--tqf-line); border-radius: 14px; background: var(--tqf-bg); color: var(--tqf-text); font-size: 12px; font-weight: 600; cursor: pointer; }
.tq-labs__tab:hover { background: var(--tqf-key); }
.tq-labs__tab.is-active { background: #0b7a8c; border-color: #0b7a8c; color: #ffffff; }
.tq-labs__table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--tqf-text); }
.tq-labs__table th { text-align: left; padding: 7px 8px; border-bottom: 2px solid var(--tqf-line); font-weight: 700; color: var(--tqf-text); }
.tq-labs__table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--tqf-line); }
/* The host theme sets a light text colour on table row hover, which made rows
   vanish against the light panel. Colour is restated on every cell so no theme
   rule can win on specificity. */
.tq-labs__table tbody tr:hover,
.tq-labs__table tbody tr:hover td,
.tq-labs__table tbody tr:focus-within td { background: var(--tqf-key); color: var(--tqf-text); }
.tq-labs__table tbody td, .tq-labs__table thead th { color: var(--tqf-text); background: transparent; }
.tq-labs__table tbody tr:hover td a { color: var(--tqf-text); }

/* States */
.tq-spinner { display: flex; align-items: center; gap: 9px; padding: 26px; color: var(--tq-muted); font-size: 14px; }
.tq-spinner__dot { width: 13px; height: 13px; border: 2px solid var(--tq-border); border-top-color: var(--tq-accent); border-radius: 50%; animation: tq-spin 0.8s linear infinite; }
@keyframes tq-spin { to { transform: rotate(360deg); } }
.tq-error { border: 1px solid #f0c2c1; background: #fdf2f2; border-radius: 8px; padding: 14px 16px; color: #8f2f2d; font-size: 14px; }
.tq-error p { margin: 6px 0 10px; }

/* Login gate */
.tibb-qbank-gate { background: #f6f7f9; border: 1px solid #e3e7ec; border-radius: 10px; padding: 24px; max-width: 520px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.tibb-qbank-button { display: inline-block; padding: 10px 18px; border-radius: 7px; background: #0e9bb0; color: #fff; text-decoration: none; font-weight: 600; }
.tibb-qbank-button:hover, .tibb-qbank-button:focus { background: #0b8497; color: #fff; }

/* Mobile */
@media (max-width: 782px) {
	.tq-app { flex-direction: column; }
	.tq-burger { display: block; width: 100%; padding: 11px; border: 0; border-bottom: 1px solid var(--tq-border); background: #eef1f4; text-align: left; font-size: 14px; cursor: pointer; }
	.tq-brand__logo { max-width: 132px; }
	.tq-sidebar { width: 100%; flex: none; display: none; border-right: 0; border-bottom: 1px solid var(--tq-border); }
	.tq-sidebar.is-open { display: flex; }
	.tq-main { padding: 14px; }
	.tq-grid2 { grid-template-columns: 1fr; }
	.tq-player__main { padding: 14px; }
	.tq-navigator { width: 44px; flex-basis: 44px; }
	.tq-float--labs { width: 96vw; left: 2vw !important; }
	.tq-table { font-size: 12px; }
	.tq-card--footer { flex-direction: column; align-items: stretch; }
}

/* Labels */
.tq-labels { display: flex; align-items: center; gap: 6px; }
.tq-labels__caption { font-size: 12px; color: var(--tq-muted); }
.tq-swatch { width: 24px; height: 24px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tq-swatch span { display: block; width: 14px; height: 14px; border-radius: 4px; background: var(--tq-swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.tq-swatch:hover { border-color: rgba(255, 255, 255, 0.45); }
.tq-swatch.is-on { border-color: #fff; background: rgba(255, 255, 255, 0.18); }
.tq-swatch.is-on span { width: 17px; height: 17px; }
.tq-labels__clear { background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
.tq-labels.is-compact { padding: 0 4px; }

/* Label chips inside the builder use dark text on the light card */
.tq-chip--label { gap: 8px; }
.tq-swatch__dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.tq-input--inline { width: 110px; padding: 2px 6px; font-size: 13px; }

/* Player label swatches sit on the dark top bar */
.tq-player__top .tq-labels__caption { color: rgba(255, 255, 255, 0.75); }

/* Bar buttons: icon above a caption, used in both exam bars */
.tq-bar-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 54px; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #ffffff; font-size: 10px; line-height: 1.2; letter-spacing: 0.01em; cursor: pointer; }
.tq-bar-btn span { white-space: nowrap; }
.tq-bar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.tq-bar-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.tq-bar-btn.is-active { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.4); }
.tq-bar-btn.is-danger { color: #ffd7d6; }
.tq-bar-btn.is-danger:hover:not(:disabled) { background: #c9403e; color: #ffffff; }
.tq-ico { display: block; }
.tq-clock { font-variant-numeric: tabular-nums; }
.tq-player__error { padding: 10px 14px; background: #fbdedd; color: #8f2f2d; font-size: 13px; }

/* Modal */
.tq-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tq-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 22, 28, 0.55); }
.tq-modal__panel { position: relative; width: 100%; max-width: 520px; background: #ffffff; color: #1c2126; border-radius: 10px; box-shadow: 0 18px 48px rgba(12, 18, 24, 0.35); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Bounded to the viewport with the body as the only scrolling part, so a
	   tall form keeps its title and its buttons on screen. Without the
	   min-height a flex child refuses to shrink and the scrollbar never
	   appears. */
	max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.tq-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid #e3e7ec; font-size: 15px; flex: 0 0 auto; }
.tq-modal__head button { border: 0; background: transparent; font-size: 21px; line-height: 1; cursor: pointer; color: #6b7683; }
.tq-modal__body { padding: 16px; font-size: 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tq-modal__body p { margin: 0 0 8px; }
.tq-modal__body .tq-input, .tq-modal__body .tq-select { width: 100%; }
.tq-modal__body textarea.tq-input { font-family: inherit; resize: vertical; }
.tq-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #e3e7ec; flex: 0 0 auto; }
/* A full screen component rendered inside a modal should not add its own
   page padding or page title spacing on top of the modal's own. */
.tq-modal__body > .tq-screen { padding: 0; }
.tq-modal__body > .tq-screen > .tq-screen__title { margin-top: 0; font-size: 17px; }
.tq-sent { display: flex; align-items: center; gap: 8px; color: #16875f; font-weight: 600; }

@media (max-width: 782px) {
	.tq-bar-btn { min-width: 44px; font-size: 9px; padding: 3px 5px; }
	.tq-player__top, .tq-player__bottom { gap: 4px; }
}


/* Lab values table */
.tq-labs__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tq-labs__top .tq-input { flex: 1 1 200px; }
.tq-labs__si { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tqf-text); white-space: nowrap; }
.tq-labs__table th, .tq-labs__table td { vertical-align: top; }
.tq-labs__table thead th { position: sticky; top: -11px; background: var(--tqf-bg); z-index: 1; }
.tq-labs__group th { background: var(--tqf-key); font-weight: 700; padding: 6px 8px; text-align: left; }
.tq-labs__table td.is-indented { padding-left: 18px; }
.tq-labs__val { white-space: pre-line; font-variant-numeric: tabular-nums; }
.tq-labs__table td:first-child { width: 38%; }

@media (max-width: 782px) {
	.tibb-qbank-root { padding: 0 8px; }
	.tq-float--labs { width: 96vw; left: 2vw !important; }
	.tq-labs__table { font-size: 11.5px; }
	.tq-labs__table td:first-child { width: 34%; }
}

/* Question text scales with Text Zoom; chrome above stays fixed */
.tq-stem, .tq-choices, .tq-explain__body { font-size: 1em; }
.tq-choice__key, .tq-choice__text { font-size: 1em; }
.tq-explain__head { font-size: 0.62em; }
.tq-explain__head strong { font-size: 1em; }
.tq-choice__pct { font-size: 0.62em; }
.tq-actions--stack .tq-btn { font-size: 0.5em; }

/* Process of elimination: a dedicated control so crossing out a choice never
   competes with selecting it. State persists with the annotations. */
.tq-choices li { display: flex; align-items: stretch; }
.tq-choices li .tq-choice { flex: 1 1 auto; }
.tq-choice__strike { flex: 0 0 2.6em; border: 0; border-left: 1px solid var(--tq-border); background: transparent; color: var(--tq-muted); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: line-through; opacity: 0.45; }
.tq-choice__strike { font-size: 0.72em; }
.tq-choice__strike:hover:not(:disabled) { opacity: 1; background: var(--tq-bg); }
.tq-choice__strike.is-on { opacity: 1; color: var(--tq-text); }
.tq-choice__strike:disabled { opacity: 0.2; cursor: not-allowed; }
.tq-choices li.is-struck-row { background: rgba(138, 160, 181, 0.12); }

/* Copy the question ID */
.tq-qid { display: inline-flex; align-items: center; gap: 6px; }
.tq-qid code { background: rgba(255, 255, 255, 0.16); padding: 1px 6px; border-radius: 4px; }
.tq-qid__copy { border: 1px solid rgba(255, 255, 255, 0.32); background: transparent; color: #fff; border-radius: 4px; font-size: 10px; padding: 2px 7px; cursor: pointer; }
.tq-qid__copy:hover { background: rgba(255, 255, 255, 0.18); }

/* Question mode switch and custom panel */
.tq-modehead { display: flex; align-items: baseline; gap: 14px; }
.tq-modehead h2 { margin: 0; }
.tq-modehead em { font-style: normal; font-weight: 700; color: var(--tq-accent); }
.tq-segment { display: inline-flex; margin-top: 12px; background: #eef1f4; border-radius: 20px; padding: 3px; }
.tq-segment button { border: 0; background: transparent; padding: 7px 24px; border-radius: 17px; font-size: 14px; color: var(--tq-muted); cursor: pointer; }
.tq-segment button.is-on { background: #fff; color: var(--tq-text); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 32, 0.14); }
.tq-qidcheck { margin-top: 14px; border: 1px solid var(--tq-border); border-radius: 8px; padding: 12px 14px; font-size: 13px; }
.tq-qidcheck p { margin: 0 0 6px; }
.tq-qidcheck .is-ok { color: #16875f; font-weight: 600; }
.tq-qidcheck .is-bad { color: #b93b39; }
.tq-card textarea.tq-input { font-family: ui-monospace, Menlo, monospace; resize: vertical; }

/* Test results screen */
.tq-resultsbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tq-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--tq-accent); font-size: 14px; cursor: pointer; padding: 4px 0; }
.tq-link:hover { text-decoration: underline; }
.tq-testid { margin: 0; font-size: 14px; font-weight: 600; }
.tq-testid .tq-muted { font-weight: 400; margin-left: 10px; }
.tq-scoreblock h2 { margin: 0 0 10px; font-size: 15px; }
.tq-tablehead { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.tq-field--inline { flex-direction: row; align-items: center; gap: 8px; }
.tq-select--sm { width: auto; min-width: 130px; }
.tq-table--results td { font-size: 12.5px; }
.tq-table--results td:nth-child(3), .tq-table--results td:nth-child(4),
.tq-table--results td:nth-child(5), .tq-table--results td:nth-child(6) {
	max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tq-nowrap { white-space: nowrap; }
.tq-row--click { cursor: pointer; }
.tq-row--click:hover td { background: var(--tq-bg); }
.tq-chev { color: var(--tq-muted); font-size: 18px; text-align: right; }
.tq-mark { display: inline-block; width: 18px; text-align: center; font-weight: 700; }
.tq-mark.is-correct { color: var(--tq-good); }
.tq-mark.is-incorrect { color: var(--tq-bad); }
.tq-mark.is-omitted { color: var(--tq-muted); }
.tq-qidlist { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

@media (max-width: 782px) {
	.tq-table--results { display: block; overflow-x: auto; }
}

/* Review: verdict banner on top, explanation as its own section */
.tq-result { border: 1px solid var(--tq-border); border-left-width: 5px; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; max-width: 72em; }
.tq-result.is-correct { border-left-color: var(--tq-good); background: rgba(34, 176, 125, 0.06); }
.tq-result.is-incorrect { border-left-color: var(--tq-bad); background: rgba(227, 93, 91, 0.06); }
.tq-result.is-omitted { border-left-color: var(--tq-muted); background: rgba(138, 160, 181, 0.08); }
.tq-result__verdict { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-size: 0.68em; }
.tq-result__verdict strong { font-size: 1.35em; }
.tq-result.is-correct .tq-result__verdict strong { color: #16875f; }
.tq-result.is-incorrect .tq-result__verdict strong { color: #b93b39; }
.tq-result__facts, .tq-result__tags { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; font-size: 0.62em; }
.tq-result__facts > div, .tq-result__tags > div { display: flex; gap: 6px; align-items: baseline; }
.tq-result__facts dt, .tq-result__tags dt { margin: 0; color: var(--tq-muted); }
.tq-result__facts dd, .tq-result__tags dd { margin: 0; font-weight: 600; }
.tq-result__tags { padding-top: 8px; border-top: 1px solid var(--tq-border); }
.tq-cap { text-transform: capitalize; }
.tq-explanation { border: 1px solid var(--tq-border); border-radius: 8px; padding: 14px 18px; max-width: 72em; }
.tq-explanation h3 { margin: 0 0 10px; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tq-muted); }

/* A taller working area, sized to the window rather than a fixed guess, so a
   laptop screen is filled without a large empty strip underneath. */
.tq-player { min-height: calc(100vh - 190px); }
.tq-player__main { max-height: calc(100vh - 260px); min-height: 420px; }
.tq-navigator { max-height: calc(100vh - 260px); }
.tq-labs__body { max-height: calc(100vh - 300px); }

/* Wide checkbox trees flow into columns */
.tq-tree--cols { column-width: 260px; column-gap: 28px; }
.tq-tree--cols > li { break-inside: avoid; }

/* The tiny dots were list markers on the tree and choice lists, and they sat
   over the checkbox hit area. */
.tq-tree, .tq-tree li, .tq-choices, .tq-choices li, .tq-navigator, .tq-navigator li {
	list-style: none !important;
	list-style-type: none !important;
}
.tq-tree li::marker, .tq-choices li::marker, .tq-navigator li::marker { content: none; }
.tq-tree li::before, .tq-choices li::before, .tq-navigator li::before { content: none !important; display: none !important; }
.tq-tree__row label input[type="checkbox"] { flex: 0 0 auto; margin: 0; width: 15px; height: 15px; cursor: pointer; }
.tq-chip input[type="checkbox"] { margin: 0; cursor: pointer; }

@media (max-width: 782px) {
	.tq-player { min-height: 0; }
	.tq-player__main { max-height: none; min-height: 0; }
	.tq-navigator { max-height: 60vh; }
}

/* Theme list markers were rendering as small dots that sat over the checkbox
   and intercepted the click. Cleared on every list the app renders. */
.tibb-qbank-root ul, .tibb-qbank-root ol, .tibb-qbank-root li { list-style: none !important; }
.tibb-qbank-root li::marker { content: none; }
.tibb-qbank-root li::before { content: none !important; }
.tq-tree, .tq-tree ul { margin: 0; padding-left: 0; }
.tq-tree__row label input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; cursor: pointer; position: relative; z-index: 1; }
.tq-chip input[type="checkbox"] { margin: 0; }

/* Verdict block, kept above the explanation */
.tq-verdict { border: 1px solid var(--tq-border); border-left-width: 4px; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; max-width: 72em; }
.tq-verdict.is-correct { border-left-color: var(--tq-good); background: rgba(34, 176, 125, 0.06); }
.tq-verdict.is-incorrect { border-left-color: var(--tq-bad); background: rgba(227, 93, 91, 0.06); }
.tq-verdict.is-omitted { border-left-color: var(--tq-muted); background: rgba(138, 160, 181, 0.08); }
.tq-verdict__row { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; font-size: 0.62em; color: var(--tq-muted); }
.tq-verdict__row b { color: var(--tq-text); font-weight: 600; margin-right: 4px; }
.tq-verdict__label { font-size: 1.5em; margin-right: 6px; }
.tq-verdict.is-correct .tq-verdict__label { color: #16875f; }
.tq-verdict.is-incorrect .tq-verdict__label { color: #b93b39; }
.tq-verdict__meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--tq-border); font-size: 0.6em; }
.tq-verdict__meta > div { display: flex; gap: 6px; }
.tq-verdict__meta dt { color: var(--tq-muted); margin: 0; }
.tq-verdict__meta dd { margin: 0; font-weight: 600; }
.tq-cap { text-transform: capitalize; }

.tq-explanation { border: 1px solid var(--tq-border); border-radius: 8px; padding: 14px 16px; max-width: 72em; }
.tq-explanation h3 { margin: 0 0 10px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tq-muted); }

/* Taller player, so a laptop screen is used rather than wasted */
.tq-player { min-height: calc(100vh - 150px); display: flex; flex-direction: column; }
.tq-player__body { flex: 1 1 auto; min-height: 0; }
.tq-navigator { max-height: none; }
.tq-player__main { max-height: none; flex: 1 1 auto; overflow-y: auto; }

@media (max-width: 782px) {
	.tq-player { min-height: calc(100vh - 110px); }
}

.tq-nodata { color: var(--tq-muted); font-weight: 400; }

/* Profile */
/* Top bar. The user chip is the entry point to the profile. */
.tq-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--tq-border); }
.tq-topbar__home { font-size: 14px; color: var(--tq-accent); text-decoration: none; padding: 6px 8px; border-radius: 7px; }
.tq-topbar__home:hover { background: var(--tq-active); }
.tq-topbar__points { border: 0; background: var(--tq-accent); color: #fff; font-size: 13px; font-weight: 600; font-family: inherit; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.tq-topbar__points:hover { filter: brightness(1.08); }
.tq-topbar__user { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 14px; color: var(--tq-text); padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer; }
.tq-topbar__user:hover { background: #e2e7ec; }
.tq-topbar__user.is-active { background: var(--tq-active); border-color: var(--tq-accent); color: var(--tq-accent); font-weight: 600; }
.tq-topbar__avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; object-fit: cover; background: var(--tq-active); color: var(--tq-accent); font-weight: 700; font-size: 13px; }
.tq-topbar__name { white-space: nowrap; }
.tq-topbar__out { font-size: 18px; line-height: 1; color: var(--tq-muted); text-decoration: none; padding: 6px 9px; border-radius: 7px; }
.tq-topbar__out:hover { background: #e2e7ec; color: var(--tq-text); }
@media (max-width: 640px) { .tq-topbar__name { display: none; } }

.tq-history { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tq-history li { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid #f1f3f6; }
.tq-history li strong { text-transform: capitalize; }
.tq-history li em { font-style: normal; color: var(--tq-muted); }

.tq-pill { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 11px; text-transform: capitalize; background: #eef1f4; }
.tq-pill.is-approved { background: #e0f5ec; color: #16875f; }
.tq-pill.is-declined { background: #fbe6e5; color: #b93b39; }
.tq-pill.is-pending { background: #fdf3dd; color: #8a6d1f; }

/* Rich text editor */
.tq-rt { border: 1px solid var(--tq-border); border-radius: 8px; overflow: hidden; background: #fff; }
.tq-rt__bar { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; background: #f2f5f8; border-bottom: 1px solid var(--tq-border); }
.tq-rt__bar button, .tq-rt__upload { border: 1px solid var(--tq-border); background: #fff; border-radius: 5px; padding: 4px 10px; font-size: 13px; cursor: pointer; color: var(--tq-text); line-height: 1.4; }
.tq-rt__bar button:hover, .tq-rt__upload:hover { background: #e6ecf1; }
.tq-rt__upload input { display: none; }
.tq-rt__area { padding: 12px 14px; font-size: 15px; line-height: 1.55; outline: none; }
.tq-rt__area:empty::before { content: attr(data-placeholder); color: var(--tq-muted); }
.tq-rt__area img { max-width: 100%; height: auto; }
.tq-rt__area table { border-collapse: collapse; }
.tq-rt__area td, .tq-rt__area th { border: 1px solid #c9d2da; padding: 5px 9px; }

/* Contribution declaration */
.tq-attest { border-left: 4px solid var(--tq-mark); }
.tq-attest__row { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; cursor: pointer; }
.tq-attest__row input { margin-top: 3px; flex: 0 0 16px; width: 16px; height: 16px; }

/* ---------------------------------------------------------------------------
   Profile, 5.3.0.
   The screen carries the only playful surface in the product, so it gets a
   warmer palette than the exam interface, which stays deliberately flat.
   --------------------------------------------------------------------------- */

.tq-profile { --tq-warm: #f6a23a; --tq-warm-soft: #fde3c0; --tq-ice: #63c2e0; }
.tq-profile .tq-card { border-radius: 16px; }
.tq-art { display: block; }

/* Hero */
.tq-hero { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
	background: linear-gradient(135deg, #ffffff 0%, #f4fbfd 55%, #eef7fb 100%); }
.tq-hero__identity { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.tq-hero__avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center;
	background: var(--tq-active); color: var(--tq-accent); font-size: 32px; font-weight: 700; flex: none; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--tq-accent); }
.tq-hero__who { min-width: 0; }
.tq-hero .tq-screen__title { margin: 0 0 2px; font-size: 26px; letter-spacing: -0.02em; }
.tq-hero__handle { margin: 0 0 6px; font-size: 13px; color: var(--tq-muted); }
.tq-hero__handle span { opacity: 0.5; }
.tq-hero__bio { margin: 0 0 6px; font-size: 14px; max-width: 46ch; }
.tq-hero__meters { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.tq-hero__edit { border-radius: 999px; font-weight: 600; color: var(--tq-accent); border-color: #bfe3ea; }

.tq-meters { display: flex; gap: 18px; align-items: flex-end; }
.tq-meter { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tq-meter__art { position: relative; display: block; }
.tq-meter__art b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 20px; font-weight: 800; color: #12414f; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.tq-meter__art b.is-flame { color: #fff; text-shadow: 0 1px 2px rgba(120, 50, 0, 0.5); font-size: 17px; padding-top: 8px; }
.tq-meter em { font-style: normal; font-size: 11px; color: var(--tq-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tq-meter.is-points { justify-content: flex-end; }
.tq-meter.is-points strong { font-size: 34px; font-weight: 800; line-height: 1; color: var(--tq-accent); }

/* Notice card, used for the submitted confirmation on Contribute */
.tq-unlock { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	border-left: 4px solid var(--tq-good); background: rgba(34, 176, 125, 0.08); }
.tq-unlock strong { display: block; font-size: 16px; margin-bottom: 4px; color: #16875f; }
.tq-unlock p { margin: 0 0 4px; font-size: 14px; }

/* Access banner. The ice sits behind the wordmark rather than beside it, so
   the label reads as encased when frozen and simply disappears when it is not. */
.tq-freeze { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) auto;
	gap: 24px; align-items: center; }
.tq-freeze__mark { position: relative; display: flex; align-items: center; min-height: 62px; }
.tq-freeze__ice { position: absolute; top: -34px; left: -10px; width: 260px; max-width: none;
	pointer-events: none; user-select: none; }
.tq-freeze__label { position: relative; z-index: 1; display: block; }
.tq-freeze__label strong { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
	color: #7a3fd4; line-height: 1.05; }
.tq-freeze__label em { display: block; font-style: normal; font-size: 20px; color: var(--tq-text); margin-top: 2px; }
.tq-freeze.is-frozen { padding-top: 40px; padding-bottom: 26px; }
.tq-freeze.is-frozen .tq-freeze__label strong { color: #7a3fd4; }
.tq-freeze__copy { margin: 0; font-size: 14px; line-height: 1.55; }
.tq-freeze .tq-btn { white-space: nowrap; }

/* Layout */
.tq-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.tq-split.is-wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* Activity calendars */
.tq-activity__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tq-activity__bar h2 { margin: 0; }
.tq-step { width: 28px; height: 28px; border: 1px solid var(--tq-border); border-radius: 8px; background: var(--tq-surface);
	color: var(--tq-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.tq-step:hover:not(:disabled) { background: #f0f3f6; color: var(--tq-text); }
.tq-step:disabled { opacity: 0.35; cursor: default; }
.tq-activity__months { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.tq-month__head { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 8px; }
.tq-month__head strong { font-size: 15px; }
.tq-month__head span { color: var(--tq-muted); }
.tq-month__tag { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	padding: 2px 7px; border-radius: 999px; background: #eceff3; color: var(--tq-muted); }
.tq-month__tag.is-good { background: var(--tq-warm-soft); color: #a45c0c; }
.tq-month__tag.is-great { background: var(--tq-warm); color: #fff; }

.tq-month__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tq-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--tq-border);
	border-radius: 9px; font-size: 11px; color: var(--tq-muted); background: #fbfcfd; }
.tq-chip b { color: var(--tq-text); font-size: 13px; }
.tq-chip.is-ice { border-color: #cfeaf4; background: #f4fbfe; }

.tq-month__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.tq-month__dow span { text-align: center; font-size: 10px; font-weight: 600; color: var(--tq-muted); }
.tq-month__body { display: flex; flex-direction: column; gap: 3px; }
.tq-month__week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tq-month__runs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); pointer-events: none; }
.tq-month__runs span { grid-row: 1; border-radius: 999px; background: linear-gradient(90deg, #f79b2e 0%, #fbc55f 55%, #fdd888 100%); }
.tq-month__day { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
	height: 26px; font-size: 11px; font-weight: 600; color: var(--tq-muted); }
.tq-month__day.is-on { color: #6b3200; }
.tq-month__day.is-frozen { color: transparent; }

/* Overall performance */
.tq-performance__body { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.tq-performance__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; flex: 1 1 260px; min-width: 0; }
.tq-stats { margin: 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tq-stats > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.tq-stats dt { color: var(--tq-muted); margin: 0; }
.tq-stats dd { margin: 0; font-weight: 700; }
.tq-stats__head { border-bottom: 1px solid var(--tq-border); padding-bottom: 6px; margin-bottom: 2px; }
.tq-stats__head dt { color: var(--tq-text); font-weight: 700; }
.tq-stats.is-large > div { font-size: 14px; padding: 9px 0; border-bottom: 1px solid #f1f3f6; align-items: flex-start; }
.tq-stats.is-large dt { color: var(--tq-text); font-weight: 600; }
.tq-stats.is-large dt em { display: block; font-style: normal; font-size: 11px; color: var(--tq-muted); font-weight: 400; margin-top: 2px; }
.tq-stats.is-large dd { font-size: 20px; line-height: 1; }

/* Badge tiles. Artwork is uploaded, so a tile has to look deliberate both with
   a picture and with the plain frame that stands in until one is added. */
.tq-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
.tq-tile { position: relative; text-align: center; padding: 16px 10px 12px; border: 1px solid var(--tq-border);
	border-radius: 14px; background: #fff; }
.tq-tile.is-earned { border-color: #d8e0e7; box-shadow: 0 2px 8px rgba(16, 24, 32, 0.07); }
.tq-tile.is-upcoming { background: #f7f9fb; border-color: #e7ecf1; }
.tq-tile__art { display: flex; justify-content: center; min-height: 62px; align-items: center; }
.tq-art__img { border-radius: 12px; object-fit: contain; }
.tq-art__img.is-dim { filter: grayscale(1); opacity: 0.45; }
.tq-art__frame { display: inline-flex; align-items: center; justify-content: center; border-radius: 14px;
	background: #eef1f4; border: 2px dashed #d2dae1; color: #93a0ad; font-size: 17px; font-weight: 800; }
.tq-art__frame.is-dim { background: #f1f4f7; color: #a9b4bf; }
.tq-tile strong { display: block; font-size: 13px; margin-top: 8px; }
.tq-tile.is-upcoming strong { color: #6b7683; }
.tq-tile em { display: block; font-style: normal; font-size: 11px; color: var(--tq-muted); margin-top: 3px; }
.tq-tile__progress { margin-top: 9px; }
.tq-tile__count { display: block; font-size: 10px; color: var(--tq-muted); margin-top: 4px; font-weight: 600; }
.tq-progress { height: 6px; border-radius: 999px; background: #e4e9ee; overflow: hidden; }
.tq-progress span { display: block; height: 100%; border-radius: 999px; background: #b6c1cc; }

/* Edit dialog fields */
.tq-field { display: block; margin-bottom: 14px; }
.tq-field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.tq-field em { display: block; font-style: normal; margin-top: 4px; }
.tq-field textarea.tq-input { resize: vertical; font-family: inherit; }

@media (max-width: 900px) {
	.tq-split, .tq-split.is-wide { grid-template-columns: 1fr; }
	.tq-activity__months { grid-template-columns: 1fr; }
	.tq-performance__cols { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 560px) {
	.tq-freeze { grid-template-columns: 1fr; gap: 14px; }
	.tq-freeze.is-frozen { padding-top: 34px; }
	.tq-freeze__ice { width: 200px; top: -28px; }
	.tq-freeze__label strong { font-size: 24px; }
	.tq-hero { flex-direction: column; }
	.tq-hero__meters { align-items: flex-start; width: 100%; }
	.tq-meters { width: 100%; justify-content: space-between; }
	.tq-hero__avatar { width: 64px; height: 64px; font-size: 24px; }
	.tq-hero .tq-screen__title { font-size: 22px; }
}

/* Authoring standard, shown above the contribution form */
.tq-standard { border-left: 4px solid var(--tq-mark); background: rgba(246, 211, 101, 0.12); }
.tq-standard h2 { margin-top: 0; }
.tq-standard p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.tq-standard p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Peer review and editorial review, 5.5.0.
   The review screens borrow the exam interface deliberately. A reviewer should
   see the question the way a student will see it, not in a form.
   --------------------------------------------------------------------------- */

.tq-pr .tq-screen__title { margin-bottom: 6px; }
.tq-section { font-size: 17px; margin: 22px 0 10px; }
.tq-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tq-mt { margin-top: 14px; }
.is-warn { color: #b3261e; }

.tq-pr__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.tq-pr__stat { background: #fff; border: 1px solid var(--tq-border); border-radius: 14px; padding: 14px 16px; }
.tq-pr__stat strong { display: block; font-size: 26px; font-weight: 800; line-height: 1; color: var(--tq-accent); }
.tq-pr__stat em { display: block; font-style: normal; font-size: 12px; color: var(--tq-muted); margin-top: 5px; }

.tq-pr__list { display: flex; flex-direction: column; gap: 10px; }
.tq-pr__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tq-pr__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tq-pr__meta strong { font-size: 15px; }

.tq-pr__progress { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.tq-pr__progress span { width: 26px; height: 7px; border-radius: 999px; background: #e0e6ec; }
.tq-pr__progress span.is-done { background: var(--tq-good); }
.tq-pr__progress em { font-style: normal; font-size: 11px; color: var(--tq-muted); margin-left: 6px; }

.tq-pr__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.tq-steps { display: flex; gap: 8px; flex-wrap: wrap; }
.tq-steps__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tq-muted); }
.tq-steps__item b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
	border-radius: 50%; background: #e4e9ee; color: #77828d; font-size: 11px; }
.tq-steps__item.is-on { color: var(--tq-text); }
.tq-steps__item.is-on b { background: var(--tq-accent); color: #fff; }

.tq-choice.is-chosen { background: #e9eff8; }
.tq-choice__mark { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--tq-muted); white-space: nowrap; }
.tq-verdict.is-right { border-left: 4px solid var(--tq-good); background: rgba(34, 176, 125, 0.08); }
.tq-verdict.is-wrong { border-left: 4px solid #d9534f; background: rgba(217, 83, 79, 0.08); }
.tq-verdict strong { display: block; font-size: 16px; margin-bottom: 3px; }
.tq-verdict p { margin: 0; font-size: 14px; }

.tq-scale { padding: 12px 0; border-bottom: 1px solid #f1f3f6; }
.tq-scale:last-of-type { border-bottom: 0; }
.tq-scale__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.tq-scale__options { display: flex; gap: 8px; flex-wrap: wrap; }
.tq-chip2 { padding: 7px 13px; border: 1px solid var(--tq-border); border-radius: 999px; background: #fff;
	font-size: 13px; cursor: pointer; color: var(--tq-text); }
.tq-chip2:hover { border-color: var(--tq-accent); }
.tq-chip2.is-on { background: var(--tq-accent); border-color: var(--tq-accent); color: #fff; font-weight: 600; }

.tq-stars { display: flex; align-items: center; gap: 4px; }
.tq-star { border: 0; background: none; font-size: 26px; line-height: 1; color: #dde3e9; cursor: pointer; padding: 0 2px; }
.tq-star.is-on { color: #f6b93b; }
.tq-stars em { margin-left: 8px; font-style: normal; font-size: 12px; }

/* Revision comparison */
.tq-diff__row { padding: 12px 0; border-top: 1px solid #f1f3f6; }
.tq-diff__field { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.05em; color: var(--tq-muted); margin-bottom: 8px; }
.tq-diff__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tq-diff__side { border: 1px solid var(--tq-border); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.55; }
.tq-diff__side em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--tq-muted); margin-bottom: 5px; }
.tq-diff__side p { margin: 0 0 6px; }
.tq-diff__side.is-before { background: #fdf5f5; border-color: #f0d9d8; }
.tq-diff__side.is-after { background: #f4fbf7; border-color: #d3e9dd; }
.tq-diff__tokens { font-size: 12px; margin: 0; }
.tq-diff__tokens.is-removed { color: #a3403c; text-decoration: line-through; }
.tq-diff__tokens.is-added { color: #16875f; }

.tq-sugg.is-settled { opacity: 0.7; }
.tq-sugg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tq-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	padding: 3px 9px; border-radius: 999px; background: #eceff3; color: var(--tq-muted); }
.tq-pill.is-merged { background: rgba(34, 176, 125, 0.16); color: #16875f; }
.tq-pill.is-rejected { background: rgba(217, 83, 79, 0.14); color: #a3403c; }

/* Editorial summary */
.tq-summary { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 20px; }
.tq-summary__score strong { display: block; font-size: 44px; font-weight: 800; line-height: 1; color: var(--tq-accent); }
.tq-summary__score em { display: block; font-style: normal; font-size: 12px; color: var(--tq-muted); margin-top: 4px; }
.tq-summary__tallies { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tq-tally__label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.tq-tally__row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0; }
.tq-tally__row em { font-style: normal; color: var(--tq-muted); }
.tq-tally__row b { font-weight: 700; }

.tq-review { padding: 11px 0; border-top: 1px solid #f1f3f6; }
.tq-review:first-of-type { border-top: 0; }
.tq-review__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.tq-review p { margin: 0; font-size: 13.5px; line-height: 1.55; }

.tq-decide { border-left: 4px solid var(--tq-accent); }

.tq-graduated { text-align: center; padding: 34px 24px; background: linear-gradient(160deg, #ffffff, #f2fbf7); }
.tq-graduated__cap { font-size: 54px; line-height: 1; display: block; margin-bottom: 8px; }
.tq-graduated__list { list-style: none; padding: 0; margin: 14px auto 18px; max-width: 420px; text-align: left; }
.tq-graduated__list li { padding: 6px 0 6px 26px; position: relative; font-size: 14px; }
.tq-graduated__list li::before { content: '✓'; position: absolute; left: 0; color: var(--tq-good); font-weight: 700; }
.tq-graduated .tq-row { justify-content: center; }

@media (max-width: 780px) {
	.tq-diff__pair { grid-template-columns: 1fr; }
	.tq-summary { grid-template-columns: 1fr; }
	.tq-pr__item { flex-direction: column; align-items: stretch; }
}

/* Login gate. Rendered by the shortcode for a logged out visitor, so it must
   stand on its own without the application bundle. */
.tibb-gate { display: flex; justify-content: center; padding: 40px 16px; }
.tibb-gate__card { width: 100%; max-width: 420px; background: #fff; border: 1px solid #dfe4e9;
	border-radius: 16px; padding: 30px 28px; box-shadow: 0 4px 18px rgba(16, 24, 32, 0.06); }
.tibb-gate__title { margin: 0 0 6px; font-size: 22px; }
.tibb-gate__lead { margin: 0 0 18px; font-size: 14px; color: #6b7683; line-height: 1.5; }
.tibb-gate__error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px;
	background: rgba(217, 83, 79, 0.1); color: #a3403c; border-left: 3px solid #d9534f; }
.tibb-gate__field { display: block; margin-bottom: 14px; }
.tibb-gate__field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.tibb-gate__field input { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px;
	border: 1px solid #cfd6dd; border-radius: 10px; background: #fff; color: #22303c; }
.tibb-gate__field input:focus { outline: 2px solid #0e9bb0; outline-offset: 1px; border-color: #0e9bb0; }
.tibb-gate__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7683; margin-bottom: 16px; }
.tibb-gate__submit { width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 700; color: #fff;
	background: #0e9bb0; border: 0; border-radius: 10px; cursor: pointer; }
.tibb-gate__submit:hover { background: #0b8194; }
.tibb-gate__links { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 16px;
	border-top: 1px solid #eef1f4; font-size: 13.5px; color: #6b7683; text-align: center; }
.tibb-gate__links a { color: #0e9bb0; text-decoration: none; font-weight: 600; }
.tibb-gate__links a:hover { text-decoration: underline; }

/* Login gate additions: the reset panel and the no access variant */
.tibb-gate__submit--link { display: inline-block; text-align: center; text-decoration: none; }
.tibb-gate__submit--quiet { background: #42505d; margin-top: 4px; }
.tibb-gate__submit--quiet:hover { background: #2f3a44; }
.tibb-gate__reset { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef1f4; }
.tibb-gate__reset summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: #0e9bb0; list-style: none; }
.tibb-gate__reset summary::-webkit-details-marker { display: none; }
.tibb-gate__reset summary:hover { text-decoration: underline; }
.tibb-gate__reset form { margin-top: 12px; }
.tibb-gate__notice { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px;
	background: rgba(34, 176, 125, 0.1); color: #16875f; border-left: 3px solid #22b07d; }

.tq-tabs--major { margin-bottom: 14px; }
.tq-tabs--major .tq-tabs__tab { font-size: 15px; }

/* ---------------------------------------------------------------------------
   Dark mode inside the player.
   The answer states were written as pale tints for a white card. On the dark
   surface they stayed pale, so selected, correct, and incorrect text all sat
   near black on near white and became unreadable. Each state now sets its own
   text colour as well as its background, rather than inheriting one.
   --------------------------------------------------------------------------- */

.tq-player.is-dark .tq-choice.is-selected { background: #24395f; color: #e8eefb; }
.tq-player.is-dark .tq-choice.is-correct { background: #14402f; color: #d6f5e6; }
.tq-player.is-dark .tq-choice.is-wrong { background: #4a1f1e; color: #fadbd9; }
.tq-player.is-dark .tq-choice.is-selected .tq-choice__key,
.tq-player.is-dark .tq-choice.is-correct .tq-choice__key,
.tq-player.is-dark .tq-choice.is-wrong .tq-choice__key { color: inherit; }
.tq-player.is-dark .tq-choice.is-correct .tq-choice__pct { color: #6ee7b7; }
.tq-player.is-dark .tq-choice.is-wrong .tq-choice__pct { color: #fca5a5; }
.tq-player.is-dark .tq-choice__text.is-struck { color: #8fa0b0; }
.tq-player.is-dark .tq-choice:hover { background: #262d34; }
.tq-player.is-dark .tq-choice.is-selected:hover { background: #2a4269; }
.tq-player.is-dark .tq-choice.is-correct:hover { background: #17492f; }
.tq-player.is-dark .tq-choice.is-wrong:hover { background: #552322; }

/* The light theme keeps its tints but states its text colour too, so the two
   themes fail the same way or not at all. */
.tq-choice.is-selected { color: #1a2f52; }
.tq-choice.is-correct { color: #10402c; }
.tq-choice.is-wrong { color: #5a1f1c; }

/* Proceed to Next Item. It matches the top and bottom bars, and carries its
   own colours in both themes rather than inheriting a surface it does not sit
   on. */
.tq-btn--proceed,
.tq-player.is-dark .tq-btn--proceed {
	background: #33538c;
	border-color: #33538c;
	color: #ffffff;
	font-weight: 700;
}
.tq-btn--proceed:hover:not(:disabled),
.tq-player.is-dark .tq-btn--proceed:hover:not(:disabled) { background: #2a4576; border-color: #2a4576; }
.tq-btn--proceed:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Term description notes in the builder */
.tq-note { position: relative; display: inline-flex; margin-left: 6px; }
.tq-note__mark { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--tq-border);
	background: var(--tq-bg); color: var(--tq-muted); font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; }
.tq-note__mark:hover { border-color: var(--tq-accent); color: var(--tq-accent); }
.tq-note__body { position: absolute; z-index: 40; top: 22px; left: -8px; width: 260px; padding: 10px 12px;
	background: #22303c; color: #f2f5f8; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
	box-shadow: 0 6px 20px rgba(16, 24, 32, 0.28); font-weight: 400; }

/* The rule note above the builder sections */
.tq-hint { border-left: 4px solid var(--tq-accent); background: rgba(14, 155, 176, 0.06); }
.tq-hint p { margin: 0; font-size: 13.5px; line-height: 1.55; }

.tq-field.is-locked span { color: var(--tq-muted); }
.tq-field.is-locked .tq-input { background: #eef1f4; color: var(--tq-muted); cursor: not-allowed; }

.tq-balance { margin: 0 0 6px; font-size: 14px; }
.tq-balance strong { color: var(--tq-accent); }
.tq-classify { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tq-border); }
.tq-classify h3 { margin: 0 0 4px; }
.tq-classify__group { margin-top: 12px; }
.tq-classify__label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.05em; color: var(--tq-muted); margin-bottom: 6px; }

/* ---------------------------------------------------------------------------
   Builder taxonomy laid out as flowing chips.
   A single column ran to several screens once a taxonomy passed a hundred
   terms. Rows of chips read the same way the status filter does, and a term
   with children still opens a full width row beneath it so the hierarchy is
   not lost to the wrapping.
   --------------------------------------------------------------------------- */

.tq-tree--flow { display: flex; flex-wrap: wrap; gap: 7px; }
.tq-tree--flow > li { display: block; }
.tq-tree--flow > li.has-kids { width: 100%; }
.tq-tree--flow .tq-tree__row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid var(--tq-border);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	line-height: 1.2;
	/* A term name stays on one line. Wrapping inside a pill turned a long
	   name into a two line lump and broke the row rhythm; a long name is
	   better read straight, even if the row wraps around it. */
	white-space: nowrap;
}
.tq-tree--flow .tq-tree__row:hover { border-color: var(--tq-accent); }
.tq-tree--flow .tq-tree__row.is-on { border-color: var(--tq-accent); background: var(--tq-active); font-weight: 600; }
.tq-tree--flow > li.has-kids > .tq-tree__row { background: #f4f7fa; }
.tq-tree--flow > li.has-kids > .tq-tree__row.is-on { background: var(--tq-active); }
.tq-tree--flow .tq-tree__row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; white-space: nowrap; }
.tq-tree--flow .tq-tree__row label span { white-space: nowrap; }
.tq-tree--flow .tq-tree__toggle { width: 16px; height: 16px; min-width: 16px; padding: 0; border: 0;
	background: transparent; color: var(--tq-muted); font-size: 13px; line-height: 1; cursor: pointer; }
.tq-tree--flow .tq-tree__count { font-size: 11px; color: var(--tq-muted); font-style: normal; }
.tq-tree--flow .tq-tree--child { display: flex; flex-wrap: wrap; gap: 7px; width: 100%;
	margin: 7px 0 4px 18px; padding-left: 12px; border-left: 2px solid var(--tq-border); }
.tq-tree--flow .tq-tree--child > li { display: block; }

/* Groups and classrooms. Added in 5.10.0. Only classes with no existing
   equivalent are defined here; tabs, cards, tables, fields, buttons, and
   pills all reuse the rules above. */
.tq-screen__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tq-screen__head .tq-screen__title { margin: 8px 0 4px; }
.tq-groupgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tq-groupcard { display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
	padding: 14px; border: 1px solid var(--tq-border); border-radius: 10px; background: var(--tq-surface);
	text-align: left; cursor: pointer; font: inherit; color: var(--tq-text); }
.tq-groupcard:hover { border-color: var(--tq-accent); }
.tq-groupcard__body { display: flex; flex-direction: column; gap: 6px; }
.tq-groupcard__body strong { font-size: 15px; }
.tq-groupcard__body p { margin: 0; }
.tq-groupcard__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--tq-muted); }
.tq-code { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #eef1f4;
	font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.5px; color: var(--tq-text); }
.tq-pin { margin: 12px 0 0; font-family: ui-monospace, Menlo, monospace; font-size: 30px;
	letter-spacing: 8px; text-align: center; font-weight: 700; color: var(--tq-active); }
.tq-fieldrow { display: flex; flex-wrap: wrap; gap: 12px; }
.tq-fieldrow .tq-field { flex: 1 1 140px; }
.tq-statrow { display: flex; flex-wrap: wrap; gap: 22px; margin: 14px 0; }
.tq-stat { display: flex; flex-direction: column; gap: 2px; }
.tq-stat strong { font-size: 20px; font-weight: 700; color: var(--tq-active); }
.tq-stat span { font-size: 12px; color: var(--tq-muted); }
.tq-pill.is-draft { background: #eef1f4; color: #55636f; }
.tq-pill.is-published { background: #e0f5ec; color: #16875f; }
.tq-pill.is-closed { background: #fdf3dd; color: #8a6d1f; }
.tq-pill.is-archived { background: #f2eef7; color: #6a4f8a; }
.tq-pill.is-peer_review { background: #e4eefb; color: #2b5f9e; }
.tq-pill.is-ready_final { background: #e8e4fb; color: #5240a3; }
.tq-pill.is-revision_required { background: #fdeadf; color: #9c5322; }

/* Headings inside the app never take their metrics from the site theme.
   Added in 5.16.0 after headings rendered on top of themselves. */
.tq-app h1, .tq-app h2, .tq-app h3, .tq-app h4 {
	line-height: 1.3; letter-spacing: normal; word-spacing: normal;
	text-transform: none; font-variant: normal; font-stretch: normal;
	overflow-wrap: break-word; }

/* Player and review layout, 5.16.0.
   The bars are flex items at the ends of a column of definite height, so they
   hold their place without needing sticky, which would not work anyway
   against the rounded overflow: hidden on the player. Only the question
   itself scrolls. The earlier rules used min-height, which let the player
   grow with a long stem until the whole page scrolled and the bottom bar
   dropped below the fold. */
.tq-player { height: calc(100vh - 150px); min-height: 360px; }
.tq-player__top,
.tq-player__bottom { flex: 0 0 auto; }
.tq-player__body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tq-player__main { flex: 1 1 auto; min-height: 0; max-height: none;
	overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tq-navigator { min-height: 0; max-height: none; overflow-y: auto; }

@media (max-width: 782px) {
	.tq-player { height: calc(100vh - 96px); min-height: 320px; }
}

/* Short windows: never let the working area collapse to nothing. A laptop in
   a split screen still needs a readable question. */
@media (max-height: 620px) {
	.tq-player { height: auto; min-height: 0; }
	.tq-player__main { max-height: 60vh; }
	.tq-navigator { max-height: 60vh; }
}

/* ==========================================================================
   Full viewport exam shell
   ==========================================================================

   The exam interface is an application surface, not a document. Three rules
   produce that, and the order they are written in matters.

   1. The player is taken out of the document flow entirely. A theme's
      container, a Divi row's padding, and the page's own scrollbar cannot
      move something that is positioned against the viewport, which is what
      made the bottom bar drift down the page as a question got longer.

   2. Height is declared four times, smallest support first. A browser applies
      the last declaration it understands, so an old iOS Safari gets 100vh, a
      newer one gets 100svh and then 100dvh, and any browser running the
      script gets an exact pixel height from the visual viewport. That last
      one is what keeps the bars correct when the on screen keyboard opens,
      because a keyboard changes the visual viewport and changes no CSS unit
      at all.

   3. The scroll lives in exactly one element, the content area, and that
      element is a flex child with min-height 0. Without min-height 0 a flex
      child refuses to shrink below its content, the body grows, and the
      bottom bar is pushed off screen: the precise failure this replaces.

   The consequence of doing it this way is that a two line question and a two
   thousand word question produce identical chrome. The bars are positioned
   against the viewport, so there is no content length that can move them.
   ========================================================================== */

.tq-player {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;

	height: 100vh;
	height: 100svh;
	height: 100dvh;
	height: var(--tq-app-height, 100dvh);

	/* These four undo the earlier document-flow rules for the same element. */
	min-height: 0;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;

	display: flex;
	flex-direction: column;
	width: 100%;
	z-index: 2147480000;
	overflow: hidden;
	overscroll-behavior: contain;
	background: var(--tq-surface);
}

/* The bars. Flex items that never grow and never shrink, which is what keeps
   them in place without position: sticky and without a magic pixel height
   that a longer label would break. */
.tq-player__top,
.tq-player__bottom {
	flex: 0 0 auto;
	min-height: 0;
	z-index: 2;
}

.tq-player__top {
	padding-top: calc(6px + env(safe-area-inset-top, 0px));
	padding-left: calc(8px + env(safe-area-inset-left, 0px));
	padding-right: calc(8px + env(safe-area-inset-right, 0px));
}

.tq-player__bottom {
	padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
	padding-left: calc(8px + env(safe-area-inset-left, 0px));
	padding-right: calc(8px + env(safe-area-inset-right, 0px));
}

/* The middle. min-height: 0 is load bearing; without it this grows to fit its
   content and pushes the bottom bar out of the viewport. */
.tq-player__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	overflow: hidden;
}

.tq-player__main {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;

	/* Room at the end so the last line of an explanation can be scrolled clear
	   of the bottom bar rather than sitting permanently behind it. */
	padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}

.tq-navigator {
	flex: 0 0 auto;
	max-height: none;
	height: auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The floating tools are children of the player, which is now itself fixed, so
   they are positioned against the player rather than the document. */
.tq-player .tq-calc,
.tq-player .tq-labs {
	position: absolute;
}

.tq-player .tq-labs__body {
	max-height: 50vh;
	max-height: 50dvh;
}

/* While a block is open the page behind it does not scroll. Two tabs of the
   same application, a host theme with its own scroll handling, and an iOS
   rubber band all stop mattering. */
html.tq-locked,
html.tq-locked body {
	overflow: hidden;
	height: 100%;
	position: relative;
	overscroll-behavior: none;
}

.tq-player__notice {
	flex: 0 0 auto;
	padding: 8px 14px;
	font-size: 13px;
	background: #fff7ed;
	color: #9a3412;
	border-bottom: 1px solid #fed7aa;
}

.tq-player__notice--warn {
	background: #fef2f2;
	color: #991b1b;
	border-bottom-color: #fecaca;
}

.tq-player.is-dark .tq-player__notice {
	background: #422006;
	color: #fed7aa;
	border-bottom-color: #7c2d12;
}

/* Landscape on a phone leaves very little height, so the chrome gets out of
   the way rather than squeezing the question into a sliver. */
@media (max-height: 460px) and (orientation: landscape) {
	.tq-player__top,
	.tq-player__bottom {
		padding-top: calc(2px + env(safe-area-inset-top, 0px));
		padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
		font-size: 12px;
	}

	.tq-player__main {
		padding-top: 8px;
		padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
	}
}

/* ==========================================================================
   Connection and synchronisation status
   ========================================================================== */

.tq-netbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	font-size: 13px;
	line-height: 1.4;
	border-bottom: 1px solid transparent;
	flex: 0 0 auto;
}

.tq-netbar--info { background: #eff6ff; color: #1e40af; border-bottom-color: #bfdbfe; }
.tq-netbar--warn { background: #fff7ed; color: #9a3412; border-bottom-color: #fed7aa; }
.tq-netbar--busy { background: #f1f5f9; color: #334155; border-bottom-color: #e2e8f0; }

.tq-netbar__icon { font-size: 14px; }
.tq-netbar__text { flex: 1 1 auto; }
.tq-netbar__detail { opacity: 0.85; }

.tq-netbar__action {
	flex: 0 0 auto;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
}

.tq-netbar__action[disabled] { opacity: 0.6; cursor: default; }
.tq-netbar.is-compact { padding: 5px 12px; font-size: 12px; }

.tq-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.tq-badge--ok { background: #dcfce7; color: #166534; }
.tq-badge--info { background: #dbeafe; color: #1e40af; }
.tq-badge--warn { background: #fee2e2; color: #991b1b; }

.tq-notice {
	padding: 10px 14px;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
}

/* ==========================================================================
   Standalone application
   ========================================================================== */

.tibb-qbank-root--standalone {
	min-height: 100vh;
	min-height: 100dvh;
}

.tibb-standalone body,
body.tibb-standalone {
	margin: 0;
	padding: 0;
}

/* Without a theme wrapper the application supplies its own viewport sizing,
   and the same dynamic units are used here as in the player so an installed
   window has no gap at the bottom. */
.tibb-standalone .tq-app {
	min-height: 100vh;
	min-height: 100dvh;
	border: 0;
	border-radius: 0;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tq-btn--sm { padding: 4px 10px; font-size: 12px; }
.tq-right { text-align: right; white-space: nowrap; }
.tq-right .tq-btn + .tq-btn { margin-left: 6px; }

/* ==========================================================================
   Question navigator contrast
   ==========================================================================

   The navigator's status chips set a pale background and left the text at the
   theme's own text colour. In reverse colour that text colour is near white,
   so an answered question became white on pale grey and its number vanished
   the moment it was answered. Every state now declares both halves of the
   pair, in both schemes, rather than inheriting one of them.

   Contrast ratios below are measured against the stated background. The
   state this replaces measured 1.04:1, which is why the number disappeared.
   ========================================================================== */

/* Light scheme. Text colours are stated explicitly so that no theme variable
   can come between the number and its background. */
.tq-navigator__item.is-answered { background: #dfe6ee; color: #1f2937; }   /* 11.7:1 */
.tq-navigator__item.is-correct  { background: #d8f2e6; color: #10543b; }   /*  7.6:1 */
.tq-navigator__item.is-incorrect { background: #fbdedd; color: #8f2b29; }  /*  6.5:1 */
.tq-navigator__item.is-omitted  { background: #e6e9ed; color: #414b57; }   /*  7.3:1 */

/* Reverse colour. Dark chips with light text, matching the answer choices,
   which already had proper dark variants. */
.tq-player.is-dark .tq-navigator__item { color: var(--tq-text); }
.tq-player.is-dark .tq-navigator__item.is-answered  { background: #2b3c57; color: #dbe6f7; }  /*  8.8:1 */
.tq-player.is-dark .tq-navigator__item.is-correct   { background: #14402f; color: #b7f0d4; }  /*  9.1:1 */
.tq-player.is-dark .tq-navigator__item.is-incorrect { background: #4a1f1e; color: #fbc9c6; }  /*  9.5:1 */
.tq-player.is-dark .tq-navigator__item.is-omitted   { background: #2a3138; color: #c3ccd6; }  /*  8.1:1 */
.tq-player.is-dark .tq-navigator__item em { color: #fbbf24; }

/* The current item is marked by an outline, so it must stay legible on top of
   any of the states above rather than replacing their colours. */
.tq-player.is-dark .tq-navigator__item.is-current { outline-color: #7dd3fc; }

/* ==========================================================================
   Profile, refreshed
   ==========================================================================

   A presentation only pass. No markup and no class names change, so every
   behaviour on the screen is exactly what it was and this whole block can be
   deleted to return to the previous look.

   What changed and why:

   - Elevation instead of outlines. Hairline borders on every card read as a
     form; soft shadows on a tinted page read as an application.
   - One type scale rather than a dozen sizes. Numbers are the loudest thing
     on the screen because a progress page is read by glancing at numbers.
   - Accent text is #0b7d8e rather than the brand cyan. The brand cyan on
     white measures 3.3:1, which fails the accessible floor for body text. The
     darker tone measures 4.8:1 and is close enough that the two read as the
     same colour. Chrome and artwork keep the original cyan.
   - Every text colour here was measured against the background it actually
     sits on, not chosen by eye.
   ========================================================================== */

.tq-profile {
	--tqp-surface: #ffffff;
	--tqp-tint: #f8fafc;
	--tqp-line: rgba(15, 23, 42, 0.08);
	--tqp-text: #0f172a;
	--tqp-muted: #64748b;
	--tqp-accent: #0b7d8e;          /* 4.8:1 on white */
	--tqp-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -14px rgba(15, 23, 42, 0.18);
	--tqp-shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 40px -18px rgba(15, 23, 42, 0.24);
	color: var(--tqp-text);
}

.tq-profile .tq-card {
	border-radius: 18px;
	border: 1px solid var(--tqp-line);
	box-shadow: var(--tqp-shadow);
	padding: 22px 24px;
}

.tq-profile .tq-card h2 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tqp-muted);
	margin: 0 0 16px;
}

/* Numbers line up column to column when they are tabular, which matters on a
   screen whose whole job is comparing figures. */
.tq-profile .tq-stats dd,
.tq-profile .tq-meter strong,
.tq-profile .tq-chip b,
.tq-profile .tq-tile__count {
	font-variant-numeric: tabular-nums;
}

/* Hero */
.tq-profile .tq-hero {
	padding: 28px;
	gap: 28px;
	background:
		radial-gradient(120% 140% at 0% 0%, #f0fbfd 0%, rgba(240, 251, 253, 0) 58%),
		linear-gradient(135deg, #ffffff 0%, #fbfdfe 100%);
}

.tq-profile .tq-hero__avatar {
	width: 92px;
	height: 92px;
	font-size: 34px;
	box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--tqp-line), 0 10px 24px -12px rgba(15, 23, 42, 0.45);
}

.tq-profile .tq-hero .tq-screen__title {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin-bottom: 4px;
}

.tq-profile .tq-hero__handle { font-size: 13px; color: #5b6675; margin-bottom: 10px; }
.tq-profile .tq-hero__bio { font-size: 15px; line-height: 1.6; color: #334155; }

.tq-profile .tq-hero__edit {
	border-radius: 999px;
	padding: 8px 18px;
	font-weight: 600;
	color: var(--tqp-accent);
	border-color: var(--tqp-line);
	background: #fff;
	box-shadow: var(--tqp-shadow);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.tq-profile .tq-hero__edit:hover { box-shadow: var(--tqp-shadow-lift); transform: translateY(-1px); }

/* Meters become cards rather than free floating artwork, so the three of them
   read as one row of statistics. */
.tq-profile .tq-meters { gap: 12px; align-items: stretch; }

.tq-profile .tq-meter {
	justify-content: center;
	gap: 6px;
	padding: 14px 18px;
	min-width: 96px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--tqp-line);
	backdrop-filter: blur(6px);
}

.tq-profile .tq-meter em {
	font-size: 10px;
	letter-spacing: 0.08em;
	color: #5b6675;
}

.tq-profile .tq-meter.is-points strong {
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--tqp-accent);
}

/* Access banner */
.tq-profile .tq-freeze { gap: 28px; padding: 24px 26px; }
.tq-profile .tq-freeze__label strong { font-size: 30px; letter-spacing: -0.03em; color: #6d2fc7; }
.tq-profile .tq-freeze__label em { font-size: 17px; color: #475569; margin-top: 4px; }
.tq-profile .tq-freeze__copy { font-size: 14px; line-height: 1.65; color: #475569; max-width: 62ch; }

.tq-profile .tq-freeze .tq-btn {
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 600;
}

/* Statistics */
.tq-profile .tq-stats > div { font-size: 14px; }
.tq-profile .tq-stats dt { color: var(--tqp-muted); }
.tq-profile .tq-stats dd { font-weight: 700; color: var(--tqp-text); }
.tq-profile .tq-stats__head { border-bottom-color: var(--tqp-line); padding-bottom: 10px; }
.tq-profile .tq-stats.is-large > div { border-bottom-color: var(--tqp-line); padding: 12px 0; }
.tq-profile .tq-stats.is-large dd { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.tq-profile .tq-stats.is-large > div:last-child { border-bottom: 0; }

/* Calendar */
.tq-profile .tq-chip { border-radius: 10px; border-color: var(--tqp-line); background: var(--tqp-tint); color: #475569; }
.tq-profile .tq-month__day { height: 28px; border-radius: 8px; }
.tq-profile .tq-month__tag { letter-spacing: 0.08em; }

.tq-profile .tq-step {
	border-radius: 10px;
	border-color: var(--tqp-line);
	transition: background 0.15s ease;
}

/* Badges. The earned ones lift on hover; the locked ones deliberately do not,
   so the difference is felt rather than only read. */
.tq-profile .tq-tiles { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }

.tq-profile .tq-tile {
	border-radius: 16px;
	border-color: var(--tqp-line);
	padding: 18px 12px 14px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tq-profile .tq-tile.is-earned { box-shadow: var(--tqp-shadow); }
.tq-profile .tq-tile.is-earned:hover { transform: translateY(-3px); box-shadow: var(--tqp-shadow-lift); }
.tq-profile .tq-tile.is-upcoming { background: var(--tqp-tint); box-shadow: none; }
.tq-profile .tq-tile strong { font-size: 13px; font-weight: 650; margin-top: 10px; }
.tq-profile .tq-tile.is-upcoming strong { color: var(--tqp-muted); }

.tq-profile .tq-progress { height: 7px; background: #e8edf2; }
.tq-profile .tq-progress span { background: linear-gradient(90deg, #0e9bb0 0%, #4cc6d6 100%); }

/* Dialog fields */
.tq-profile .tq-field > span { font-size: 12px; letter-spacing: 0.02em; color: #475569; }

@media (prefers-reduced-motion: reduce) {
	.tq-profile .tq-tile,
	.tq-profile .tq-hero__edit { transition: none; }
	.tq-profile .tq-tile.is-earned:hover,
	.tq-profile .tq-hero__edit:hover { transform: none; }
}

/* Phones. The hero stacks and the meters become a row that can wrap, rather
   than three items pinned to the right of a column that is no longer there. */
@media (max-width: 720px) {
	.tq-profile .tq-card { padding: 18px 16px; border-radius: 16px; }
	.tq-profile .tq-hero { padding: 22px 18px; }
	.tq-profile .tq-hero__meters { align-items: stretch; width: 100%; }
	.tq-profile .tq-meters { width: 100%; justify-content: space-between; }
	.tq-profile .tq-meter { flex: 1 1 0; min-width: 0; padding: 12px 10px; }
	.tq-profile .tq-hero .tq-screen__title { font-size: 25px; }
	.tq-profile .tq-hero__avatar { width: 72px; height: 72px; font-size: 28px; }
	.tq-profile .tq-freeze__label strong { font-size: 25px; }
	.tq-profile .tq-meter.is-points strong { font-size: 30px; }
}

/* Contrast corrections found by auditing the rendered page rather than by
   reading the stylesheet. Each ratio below is measured against the background
   the text actually sits on. */

/* The initial in the avatar circle sat at 2.75:1, which fails even the more
   generous floor large text is allowed. The circle is dark, so the letter has
   to be a light tint of the accent rather than the accent itself. */
.tq-profile .tq-hero__avatar--initial { color: #5fd0e0; }   /* 5.0:1 on #414952 */

/* Secondary text was inheriting a grey that measured 4.31:1 on white and
   4.42:1 inside a tile. Both are below the floor for text this size. */
.tq-profile .tq-muted,
.tq-profile .tq-meter em,
.tq-profile .tq-tile em,
.tq-profile .tq-tile__count,
.tq-profile .tq-hero__handle,
.tq-profile .tq-chip { color: #5b6675; }                    /* 5.8:1 on white, 5.6:1 on the tile tint */

/* Ten pixel type is below what most people can read comfortably on a phone,
   and it was the size carrying the badge progress count. */
.tq-profile .tq-tile__count { font-size: 11px; }

/* ==========================================================================
   Sign in
   ==========================================================================

   These styles did not previously exist. The shortcode's login form inherited
   whatever the WordPress theme provided for headings, inputs and buttons, so
   it looked passable on the website and completely unstyled in the standalone
   application, which has no theme behind it. The form is now styled by the
   application itself and looks the same in both places.

   Used by the sign in form, the no access notice, and the offline lock
   screen, all of which share this markup.
   ========================================================================== */

.tq-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 40px 16px;
	box-sizing: border-box;
}

/* In the standalone application the card is centred in the window rather than
   in whatever container a page put around it. */
.tq-gate--standalone {
	min-height: 100vh;
	min-height: 100dvh;
	padding:
		calc(32px + env(safe-area-inset-top, 0px))
		calc(16px + env(safe-area-inset-right, 0px))
		calc(32px + env(safe-area-inset-bottom, 0px))
		calc(16px + env(safe-area-inset-left, 0px));
	background:
		radial-gradient(90% 70% at 50% 0%, #f2fbfd 0%, rgba(242, 251, 253, 0) 70%),
		#f6f7f9;
}

.tq-gate__card {
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 18px;
	padding: 32px 30px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px -20px rgba(15, 23, 42, 0.28);
	text-align: left;
	box-sizing: border-box;
}

.tq-gate__logo {
	display: block;
	max-width: 150px;
	height: auto;
	margin: 0 auto 22px;
}

.tq-gate__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #0f172a;
	text-align: center;
}

.tq-gate__lead {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.55;
	color: #5b6675;               /* 5.8:1 on white */
	text-align: center;
}

/* Fields stack. They were sitting inline because nothing told them not to,
   which is what made the form read as one run-on line. */
.tq-gate__form { display: block; }

.tq-gate__field {
	display: block;
	margin-bottom: 16px;
}

.tq-gate__field > span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 6px;
}

.tq-gate__field input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	font-size: 16px;            /* 16px stops iOS zooming the page on focus */
	font-family: inherit;
	color: #0f172a;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tq-gate__field input:focus {
	outline: none;
	border-color: #0e9bb0;
	box-shadow: 0 0 0 3px rgba(14, 155, 176, 0.18);
}

.tq-gate__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #475569;
	margin-bottom: 20px;
	cursor: pointer;
}

.tq-gate__remember input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #0e9bb0;
	flex: none;
}

.tq-gate__submit {
	display: block;
	width: 100%;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	color: #ffffff;
	background: #0b7d8e;         /* 4.8:1 for white text */
	border: 1px solid #0b7d8e;
	border-radius: 10px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.tq-gate__submit:hover:not(:disabled) { background: #0a6c7b; border-color: #0a6c7b; }
.tq-gate__submit:disabled { opacity: 0.6; cursor: default; }

.tq-gate__submit--link { display: inline-block; width: auto; }

.tq-gate__submit--quiet {
	color: #0b7d8e;
	background: #fff;
	border-color: #cbd5e1;
}

.tq-gate__submit--quiet:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; }

/* The links were running into each other because they were inline with no
   separation of any kind. */
.tq-gate__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	font-size: 13px;
	color: #5b6675;
	text-align: center;
}

.tq-gate__links a { color: #0b7d8e; font-weight: 600; text-decoration: none; }
.tq-gate__links a:hover { text-decoration: underline; }

.tq-gate__error {
	margin: 0 0 18px;
	padding: 11px 13px;
	font-size: 13px;
	line-height: 1.5;
	color: #8f2b29;              /* 6.5:1 on the tint below */
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
}

.tq-gate__notice {
	margin: 0 0 18px;
	padding: 11px 13px;
	font-size: 13px;
	line-height: 1.5;
	color: #0f5132;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 10px;
}

.tq-gate__reset {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	font-size: 13px;
}

.tq-gate__reset summary {
	cursor: pointer;
	color: #0b7d8e;
	font-weight: 600;
	list-style: none;
}

.tq-gate__reset summary::-webkit-details-marker { display: none; }
.tq-gate__reset summary::before { content: '\203A'; margin-right: 6px; }
.tq-gate__reset[open] summary::before { content: '\2039'; }
.tq-gate__reset .tq-gate__field { margin-top: 14px; }

@media (max-width: 480px) {
	.tq-gate__card { padding: 26px 20px; border-radius: 16px; }
	.tq-gate__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.tq-gate__field input,
	.tq-gate__submit { transition: none; }
}

/* Block clock. The countdown is the one number a student in a timed block
   looks at, so it is heavier than the rest of the bar, and the last minute
   states plainly that it is the last minute. */
.tq-clock.is-countdown { font-weight: 700; font-variant-numeric: tabular-nums; }
.tq-clock.is-countdown.is-urgent { color: #b42318; }
.tq-player.is-dark .tq-clock.is-countdown.is-urgent { color: #fca5a5; }

/* Audio and video inside question content.
   An author who inserts a recording gets a player rather than a bare link, so
   the element needs to behave like part of the question. */
.tq-media { display: block; width: 100%; margin: 14px 0; }
.tq-media--audio { height: 44px; }
.tq-media--video { max-height: 60vh; background: #000; border-radius: 10px; }
.tq-player__main .tq-media { max-width: 720px; }