/* "Try it here": the panels, built from the application's components, working the
   way the real screens do. */

.try__tabs { margin-bottom: 0.75rem; }
.try__layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 1.25rem 2rem; align-items: start; }
.try__note { color: var(--brand-muted); font-size: 0.875rem; }
.try__note p + p { margin-top: 0.625rem; }
.try__note strong { color: var(--brand-ink); font-weight: 600; }
@media (max-width: 900px) { .try__layout { grid-template-columns: 1fr; } }

/* The test ------------------------------------------------------------------- */

.quiz { min-width: 0; }
.quiz__head { padding-bottom: 0.875rem; border-bottom: 1px solid var(--brand-border); }
.quiz__course { color: var(--brand-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.quiz__head h3 { margin-top: 0.125rem; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; }
.quiz__head p { color: var(--brand-muted); font-size: 0.875rem; }
.quiz__steps { display: flex; gap: 0.25rem; margin-top: 0.75rem; }
.quiz__steps li { flex: 1; height: 0.375rem; border-radius: 999px; background: var(--brand-shell); }
.quiz__steps li.is-current { background: rgb(var(--color-primary-base)); }
.quiz__steps li.is-done { background: rgb(var(--color-success-base)); }
.quiz__body { padding-top: 1rem; }
.quiz__q { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz__q.is-current { display: block; }
html:not(.js) .quiz__q { display: block; margin-bottom: 1.5rem; }
.quiz__prompt { padding: 0; margin-bottom: 0.75rem; color: var(--brand-ink); font-weight: 600; line-height: 1.35; }
.quiz__n { display: block; margin-bottom: 0.125rem; color: var(--brand-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.quiz__options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.quiz__option { position: relative; display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.quiz__option:hover { border-color: rgb(var(--color-primary-base) / 0.35); }
.quiz__option input { position: absolute; opacity: 0; }
.quiz__option code { color: var(--brand-ink); font-size: 0.9375rem; }
.quiz__mark { flex: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 1px solid var(--brand-border-strong); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.quiz__option input[type="checkbox"] + .quiz__mark { border-radius: 5px; }
.quiz__option:has(input:checked) { border-color: rgb(var(--color-primary-base)); background: var(--brand-subtle); }
.quiz__option:has(input:checked) .quiz__mark { border-color: rgb(var(--color-primary-base)); background: rgb(var(--color-primary-base)); box-shadow: inset 0 0 0 3px #fff; }
.quiz__option:has(input:focus-visible) { box-shadow: var(--brand-ring); }
.quiz__blank { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.quiz__blank code { color: var(--brand-ink); font-size: 1rem; }
.quiz__input { width: 5rem; text-align: center; font-family: var(--brand-mono); }
.quiz__nav { display: flex; align-items: center; gap: 0.625rem; margin-top: 1rem; }
.quiz__hint { flex: 1; color: var(--brand-muted); font-size: 0.8125rem; text-align: right; }
.quiz__result { padding-top: 1rem; outline: none; }
.quiz__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.quiz__number { color: var(--brand-ink); font: 800 2.25rem/1 var(--brand-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.quiz__number small { color: var(--brand-muted); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.quiz__headline { color: var(--brand-ink); font-weight: 600; font-size: 0.9375rem; }
.quiz__progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.625rem; margin-top: 0.75rem; color: var(--brand-muted); font-size: 0.8125rem; }
.quiz__progress b { color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.quiz__feedback { margin-top: 0.875rem; }
.quiz__feedback li { display: grid; gap: 0.0625rem; padding: 0.5625rem 0.75rem; margin-bottom: 0.375rem; border: 1px solid; border-radius: 12px; font-size: 0.875rem; }
.quiz__feedback li.is-right { border-color: rgb(var(--color-success-base) / 0.28); background: rgb(var(--color-success-base) / 0.07); }
.quiz__feedback li.is-wrong { border-color: rgb(var(--color-danger-base) / 0.28); background: rgb(var(--color-danger-base) / 0.07); }
.quiz__feedback strong { font-weight: 600; }
.quiz__feedback .is-right strong { color: rgb(var(--color-success-base)); }
.quiz__feedback .is-wrong strong { color: rgb(var(--color-danger-base)); }
.quiz__again { margin-top: 0.5rem; }
@media (max-width: 560px) { .quiz__options { grid-template-columns: 1fr; } .quiz__hint { display: none; } .quiz__nav { justify-content: space-between; } }

/* Grading: the "To grade" page and its dialog ------------------------------------- */

.grader { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.25rem 1.75rem; align-items: start; }
.grader__main { min-width: 0; display: grid; gap: 0.75rem; }
.grader__filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.grader__table strong { display: block; color: var(--brand-ink); font-weight: 600; }
.grader__table small { display: block; color: var(--brand-muted); font-size: 0.8125rem; }
.grader__table td { vertical-align: middle; }
.grader__work { display: grid; gap: 0.75rem; }
.grader__head strong { display: block; color: var(--brand-ink); font-family: var(--brand-display); font-weight: 700; letter-spacing: -0.02em; }
.grader__head small { display: block; color: var(--brand-muted); font-size: 0.8125rem; }
.grader__code { margin: 0; padding: 0.75rem 0.875rem; border-radius: 12px; background: #14161c; color: #e7e8ec; font-size: 0.8125rem; line-height: 1.5; overflow-x: auto; }
.grader__form { display: grid; gap: 0.5rem; }
.grader__score { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; }
.grader__score label, .grader__label { color: var(--brand-ink); font-size: 0.875rem; font-weight: 600; }
.grader__score output { min-width: 3.25rem; text-align: right; color: var(--brand-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.grader__score output b { color: var(--brand-ink); font: 800 1.25rem/1 var(--brand-display); }
.grader__comment { min-height: 3.75rem; resize: vertical; font-size: 0.9375rem; line-height: 1.45; }
.grader__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.grader__actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.grader__phone { display: grid; justify-items: center; gap: 0.625rem; }
.grader__caption { color: var(--brand-muted); font-size: 0.875rem; text-align: center; }
@media (max-width: 960px) { .grader { grid-template-columns: 1fr; } }

.phone-mock { width: min(15rem, 72vw); overflow: hidden; border: 6px solid #111; border-radius: 30px; background: var(--brand-shell); box-shadow: var(--brand-shadow-md); font-size: 0.75rem; line-height: 1.35; }
.phone-mock__screen { display: grid; align-content: start; gap: 0.5rem; aspect-ratio: 390 / 740; padding: 0.75rem 0.6875rem 0.875rem; }
.phone-mock__bar { display: flex; justify-content: space-between; align-items: center; }
.phone-mock__logo .brand__logo { height: 22px; width: auto; }
.phone-mock__bell { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: var(--brand-ink); }
.phone-mock__bell svg { width: 1.125rem; height: 1.125rem; }
.phone-mock__bell i { position: absolute; top: -0.125rem; right: -0.125rem; display: grid; place-items: center; min-width: 1rem; height: 1rem; border-radius: 999px; background: rgb(var(--color-danger-base)); color: #fff; font: 700 0.625rem/1 var(--brand-font); font-style: normal; }
.phone-mock__hello { padding: 0.75rem; border-radius: 14px; background: var(--brand-banner); color: #fff; font: 800 0.875rem/1.2 var(--brand-display); letter-spacing: -0.03em; }
.phone-mock__card { display: grid; gap: 0.3125rem; padding: 0.625rem; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); }
.phone-mock__card small { color: var(--brand-muted); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.phone-mock__card strong { color: var(--brand-ink); font-weight: 600; }
.phone-mock__note { display: flex; gap: 0.5rem; padding: 0.625rem; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); box-shadow: var(--brand-shadow-md); }
.phone-mock__note svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.0625rem; color: rgb(var(--color-success-base)); }
.phone-mock__note strong { display: block; color: var(--brand-ink); font-weight: 600; }
.phone-mock__note small { display: -webkit-box; color: var(--brand-muted); font-size: 0.6875rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.phone-mock__note em { display: block; margin-top: 0.125rem; color: var(--brand-muted); font-size: 0.625rem; font-style: normal; }

/* The quick search: the top bar's search dropdown ---------------------------------- */

.palette { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 1.25rem 2rem; align-items: start; }
.palette__box { overflow: hidden; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); box-shadow: var(--brand-shadow-md); min-width: 0; }
.palette__field { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border-bottom: 1px solid var(--brand-border); }
.palette__field > svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--brand-muted); }
.palette__input { flex: 1; min-width: 0; height: 2.75rem; border: 0; background: none; color: var(--brand-ink); outline: none; }
.palette__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.palette__list { max-height: 19rem; overflow-y: auto; padding: 0.25rem; scrollbar-width: thin; }
.palette__item { display: grid; grid-template-columns: 1.375rem 1fr auto; align-items: center; gap: 0.125rem 0.5rem; padding: 0.4375rem 0.5rem; border-radius: var(--brand-radius-sm); cursor: pointer; }
.palette__item[hidden] { display: none; }
.palette__item.is-first::before { content: attr(data-group); grid-column: 1 / -1; padding: 0.5rem 0 0.1875rem; color: var(--brand-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.palette__icon svg { width: 1.125rem; height: 1.125rem; color: var(--brand-muted); }
.palette__title { min-width: 0; overflow: hidden; color: var(--brand-ink); font-size: 0.875rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.palette__meta { max-width: 15rem; overflow: hidden; color: var(--brand-muted); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.palette__item[aria-selected="true"] { background: var(--brand-hover); }
.palette__empty { padding: 1.25rem 0.875rem; color: var(--brand-muted); text-align: center; font-size: 0.875rem; }
.palette__foot { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; padding: 0.4375rem 0.75rem; border-top: 1px solid var(--brand-border); background: var(--brand-subtle); color: var(--brand-muted); font-size: 0.75rem; }
.palette__foot span { display: inline-flex; align-items: center; gap: 0.25rem; }
.palette__try { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-bottom: 0.75rem; }
.palette__opened { padding-top: 0.75rem; border-top: 1px solid var(--brand-border); }
@media (max-width: 860px) { .palette { grid-template-columns: 1fr; } .palette__meta { display: none; } }

/* Branding: as the sidebar and banners do in the product, the dark surfaces are
   graphite with the primary colour mixed in, so a colour change carries through. */

.customizer__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.25rem 2rem; align-items: start; }
.control { display: grid; gap: 0.3125rem; margin-bottom: 1rem; border: 0; padding: 0; min-width: 0; }
.control__label { display: flex; justify-content: space-between; padding: 0; color: var(--brand-ink); font-size: 0.875rem; font-weight: 600; }
.control__label output { color: var(--brand-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch { position: relative; display: grid; justify-items: center; gap: 0.1875rem; cursor: pointer; }
.swatch input[type="radio"] { position: absolute; opacity: 0; }
.swatch__chip { display: block; width: 2.75rem; height: 2rem; border-radius: 8px; background: linear-gradient(90deg, var(--sw-p) 60%, var(--sw-s) 60%); box-shadow: 0 0 0 1px var(--brand-border-strong); transition: box-shadow 0.15s; }
.swatch input:checked + .swatch__chip { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--color-primary-base)); }
.swatch input:focus-visible + .swatch__chip { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--color-primary-base)), 0 0 0 7px rgb(var(--color-primary-base) / 0.2); }
.swatch__label { color: var(--brand-muted); font-size: 0.75rem; font-weight: 500; }
.swatch--custom input[type="color"] { width: 2.75rem; height: 2rem; padding: 0; border: 0; border-radius: 8px; cursor: pointer; background: none; box-shadow: 0 0 0 1px var(--brand-border-strong); }
.swatch--custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch--custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.swatch--custom input[type="color"]::-moz-color-swatch { border: 0; border-radius: 8px; }
.swatch--custom.is-active input[type="color"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--color-primary-base)); }
.customizer__note { margin-top: 0.625rem; color: var(--brand-muted); font-size: 0.875rem; }
@media (max-width: 900px) { .customizer__inner { grid-template-columns: 1fr; } }

.mock {
    --p: #111111; --s: #a2249f; --r: 16px;
    --nav: color-mix(in oklab, var(--p) 18%, #141416);
    --nav-deep: color-mix(in oklab, var(--p) 8%, #09090b);
    --side-bg: linear-gradient(180deg, var(--nav), var(--nav-deep));
    --side-text: rgb(244 244 245 / 0.8); --side-active-bg: #fff; --side-active: #09090b;
    overflow: hidden; border: 1px solid var(--brand-border); border-radius: 16px; background: var(--brand-shell); color: var(--brand-text); font-size: 0.8125rem; line-height: 1.4;
}
.mock[data-sidebar="light"] { --side-bg: #fff; --side-text: var(--brand-text); --side-active-bg: color-mix(in oklab, var(--p) 12%, white); --side-active: var(--p); }
.mock__top { display: flex; align-items: center; justify-content: space-between; height: 2.875rem; padding: 0 0.875rem; background: rgb(243 244 247 / 0.82); }
.mock__logo { display: flex; align-items: center; gap: 0.5rem; color: var(--brand-ink); font: 700 0.875rem/1 var(--brand-display); letter-spacing: -0.02em; }
.mock__logo b { font-weight: 700; }
.mock__logo i { display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: calc(var(--r) * 0.42); background: var(--p); color: #fff; font-style: normal; font-size: 0.875rem; }
.mock__user { color: var(--brand-text); font-size: 0.75rem; font-weight: 500; }
.mock__body { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.5rem; padding: 0 0.5rem 0.5rem; }
.mock__side { display: grid; align-content: start; gap: 2px; padding: 0.5rem; min-height: 17rem; border-radius: var(--r); background: var(--side-bg); color: var(--side-text); }
.mock[data-sidebar="light"] .mock__side { box-shadow: inset 0 0 0 1px var(--brand-border); }
.mock__nav { display: flex; align-items: center; gap: 0.4375rem; padding: 0.375rem 0.5rem; border-radius: calc(var(--r) * 0.6); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.mock__nav svg { width: 0.875rem; height: 0.875rem; flex: none; }
.mock__nav.is-active { background: var(--side-active-bg); color: var(--side-active); }
.mock__main { display: grid; align-content: start; gap: 0.625rem; padding: 0.75rem; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--brand-border); min-width: 0; }
.mock__banner { display: grid; gap: 0.1875rem; padding: 0.875rem 1rem; border-radius: var(--r); background: linear-gradient(120deg, var(--nav-deep) 0%, var(--nav) 55%, #2a2a2e 130%); color: #fff; }
.mock__banner small { color: rgb(255 255 255 / 0.7); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mock__banner strong { font: 800 1.0625rem/1.15 var(--brand-display); letter-spacing: -0.04em; }
.mock__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.mock__card { display: grid; align-content: start; gap: 0.3125rem; overflow: hidden; padding-bottom: 0.5rem; border: 1px solid var(--brand-border); border-radius: var(--r); min-width: 0; }
.mock__cover { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--p); color: #fff; font-weight: 700; font-size: clamp(0.8125rem, 1.5vw, 1.125rem); }
.mock__card:nth-child(2) .mock__cover { background: var(--s); }
.mock__card:nth-child(3) .mock__cover { background: color-mix(in oklab, var(--p) 55%, var(--s)); }
.mock__title { padding-inline: 0.5rem; color: var(--brand-ink); font: 700 0.6875rem/1.25 var(--brand-display); }
.mock__progress { height: 0.25rem; margin-inline: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--brand-shell); }
.mock__progress span { display: block; width: var(--value); height: 100%; background: var(--p); }
@media (max-width: 560px) {
    .mock__body { grid-template-columns: 1fr; }
    .mock__side { display: flex; overflow-x: auto; min-height: 0; padding: 0.3125rem; }
    .mock__cards { grid-template-columns: 1fr 1fr; }
    .mock__card:nth-child(3) { display: none; }
}