.tc-root,
.tc-root *,
.tc-root *::before,
.tc-root *::after,
.qc-root,
.qc-root *,
.qc-root *::before,
.qc-root *::after,
.ts-root,
.ts-root *,
.ts-root *::before,
.ts-root *::after,
.mt-root,
.mt-root *,
.mt-root *::before,
.mt-root *::after,
.ctm-backdrop,
.ctm-backdrop *,
.ctm-backdrop *::before,
.ctm-backdrop *::after {
    box-sizing: border-box;
}

/* ===== Create-test FAB on /my-tests (phones) ============= */


.mt-create-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background-color: var(--blue-color);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -6px rgba(31, 46, 70, 0.3);
    z-index: var(--z-overlay);
    transition: filter .15s ease, transform .1s ease;
}

    .mt-create-fab:hover { filter: brightness(1.05); }
    .mt-create-fab:active { transform: scale(.95); }

@media (min-width: 768px) {
    /* Tablet+ uses the inline button only; hide the FAB. */
    .mt-create-fab { display: none; }
}

/* ===== Create-test modal (CreateTestModal.razor) ================ */

.ctm-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(22, 30, 39, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 0;
}

.ctm-dialog {
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    box-shadow: 0 -10px 30px -8px rgba(0,0,0,.2);
    animation: ctm-slide-up .3s ease-out;
}

@keyframes ctm-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.ctm-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
}

.ctm-dialog__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-dark-color);
}

.ctm-dialog__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--gray-200);
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The top padding belongs to the sticky header inside the body, so nothing scrolls through the gap
   above it. */
.ctm-dialog__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ctm-dialog__footer {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200);
    background: #fff;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.ctm-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Step titles read as headings of the current decision, left-aligned like the MAUI creation flow. */
.ctm-step__label {
    margin: 0;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    text-align: left;
}

.ctm-step__label--sub {
    font-size: 16px;
    margin-top: 4px;
}

.ctm-step__hint {
    margin: 0;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 13px;
}

.ctm-input {
    width: 100%;
    border: 1px solid var(--gray-300);
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-size: 15px;
    color: var(--text-dark-color);
    box-sizing: border-box;
}

    .ctm-input:focus {
        outline: none;
        border-color: var(--blue-color);
    }

.ctm-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.ctm-themes--loading .ctm-theme-skeleton {
    display: inline-block;
    background: var(--gray-200);
    border-radius: 8px;
    height: 32px;
    width: 90px;
    animation: ctm-skeleton 1.4s ease-in-out infinite;
}

.ctm-theme {
    border: 1px solid transparent;
    background-color: var(--gray-200);
    color: var(--text-dark-color);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 13px;
}

    .ctm-theme--active {
        background-color: var(--blue-color);
        color: #fff;
    }

/* Four swatches per row, both rows equal — the palette is read as a block, the way the MAUI
   ColorPalettePicker lays it out, rather than as a wrapping track that leaves a ragged second row. */
.ctm-colors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ctm-color {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease;
}

    .ctm-color--active {
        transform: scale(1);
    }

    .ctm-color:not(.ctm-color--active) {
        transform: scale(.95);
    }

.ctm-color__check {
    color: #fff;
    pointer-events: none;
}

/* Background patterns: each tile is the test card colour with the
   matching SVG icon (the same set used in the MAUI bottom sheet)
   centered inside. The track wraps so that on a narrow settings
   container the tiles stay at a fixed compact size instead of
   stretching to take all available width. */
.ctm-bg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ctm-bg {
    width: 78px;
    height: 78px;
    flex: 0 0 auto;
    border-radius: 14px;
    border: 3px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}

.ctm-bg__icon {
    width: 75%;
    height: 75%;
    object-fit: contain;
    pointer-events: none;
}

.ctm-bg--active {
    border-color: var(--text-dark-color);
}

/* Live preview of the test card — uses the real `/images/cards/{name}.png`
   asset already shipped for the `.test-card-mini` component, so what the
   user sees here matches the card they'll see on the My-tests page. */
.ctm-preview {
    position: relative;
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    max-height: 132px;
    overflow: hidden;
}

.ctm-preview__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.ctm-preview__chip,
.ctm-preview__title,
.ctm-preview__count { position: relative; z-index: 1; }

.ctm-preview__chip {
    align-self: flex-start;
    background: rgba(255,255,255,.92);
    color: var(--text-dark-color);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

/* The chip sits at the top of the card and the text block at its foot, the way the MAUI cover lays
   them out; the auto margin holds the text down even before a theme chip exists. */
.ctm-preview__title {
    margin: auto 0 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
}

.ctm-preview__count {
    margin: 0;
    font-family: var(--font-family);
    font-size: 12px;
    opacity: .9;
}

.ctm-error {
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 105, 81, .08);
    color: var(--red-color);
    font-family: var(--font-family);
    font-size: 13px;
}

.ctm-btn {
    flex: 1 1 auto;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
    min-height: 48px;
}

    .ctm-btn:hover:not(:disabled) { filter: brightness(1.05); }
    .ctm-btn:active:not(:disabled) { transform: scale(.98); }
    .ctm-btn:disabled { opacity: .55; cursor: not-allowed; }

.ctm-btn--primary { background: var(--accent-action); color: #fff; }
.ctm-btn--ghost { background: var(--gray-200); color: var(--text-dark-color); }
.ctm-btn--danger { background: var(--red-color); color: #fff; }

@keyframes ctm-skeleton {
    0%, 100% { opacity: .65; }
    50% { opacity: 1; }
}

@media (min-width: 768px) {
    .ctm-backdrop { align-items: center; padding: 24px; }
    .ctm-dialog {
        max-width: 520px;
        max-height: 88vh;
        border-radius: 24px;
        animation: ctm-fade-in .25s ease-out;
    }
}

@keyframes ctm-fade-in {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ===== Test constructor page (TestConstructorPage.razor) ======== */

.tc-root {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
}

.tc-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Toolbar stays full body width; only the test preview, questions
   list and action footer below it use the centered narrow column.
   This keeps the back button + title row anchored to the page
   edges while the editable content stays focused on desktop. */
.tc-preview,
.tc-body > .tc-section {
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* On the plate the buttons are the icons themselves. */
.tc-preview .tc-icon-button,
.tc-preview .tc-icon-button--dark {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border: 0;
}

.tc-icon-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease;
}

    .tc-icon-button:hover { background: var(--gray-200); color: var(--text-dark-color); }

.tc-icon-button--dark { color: var(--text-dark-color); }
    .tc-icon-button--dark:hover { background: var(--gray-200); }

/* Card preview — same pattern asset and colours as `.test-card-mini`,
   but read-only inside the constructor to act as a contextual badge.
   Sits inside the white plate with the same 12px inset as the test-info hero. */
/* The cover is the page bar of the constructor: the way back, the path and the icon actions
   ride on it, as on the test info page. */
.tc-preview > .ti-hero__bar {
    position: relative;
    z-index: 1;
}

.tc-preview {
    position: relative;
    border-radius: 20px;
    margin: 0;
    padding: 16px 16px 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    overflow: hidden;
}

.tc-preview--loading {
    background: var(--gray-300);
}

/* Tools ride on the plate: no plate of their own, no title beside them — the title is below,
   the size the app gives it. */
.tc-preview__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}

.tc-preview__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.tc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 12px;
}

.tc-chip--solid { background: #fff; color: var(--text-dark-color); }
.tc-chip--outline { border: 1px solid #fff; color: #fff; }

/* Cover artwork on the constructor header, same geometry as the card and the creation preview. */
.tc-preview__glyph {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.tc-preview__glyph--corner {
    right: -18px;
    bottom: -22px;
    width: 96px;
    height: 96px;
    opacity: .24;
}

.tc-preview__glyph--feature {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    opacity: .9;
}

.tc-preview__tiles {
    position: absolute;
    inset: 0;
    background-size: 30px 30px;
    background-repeat: repeat;
    background-position: 8px 8px;
    opacity: .24;
    pointer-events: none;
    z-index: 0;
}

.tc-preview__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.tc-skeleton {
    background: var(--gray-200);
    border-radius: 8px;
    min-height: 22px;
    animation: ctm-skeleton 1.4s ease-in-out infinite;
}

.tc-skeleton--title { background: rgba(255,255,255,.25); }

.tc-section {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
}

.tc-section__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tc-section__heading {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark-color);
}

.tc-section__add {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--blue-color);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 4px 12px -4px rgba(75, 159, 255, 0.5);
}

    .tc-section__add:hover { filter: brightness(1.05); }

.tc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Question card — alternating accent colour cycles through
   blue / green / yellow / red, matching `.tp-answer--*` on the
   passing page so the visual language is consistent. */

.tc-question-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--tc-accent, var(--blue-color));
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
}

.tc-question-card--blue { --tc-accent: var(--blue-500); }
.tc-question-card--green { --tc-accent: var(--green-500); }
.tc-question-card--yellow { --tc-accent: var(--amber-500); }
.tc-question-card--red { --tc-accent: var(--red-500); }

.tc-question-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--tc-accent) 8%, transparent);
}

.tc-q-icon {
    display: inline-flex;
    color: var(--tc-accent);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tc-accent) 15%, transparent);
    align-items: center;
    justify-content: center;
}

.tc-q-order { flex: 1 1 auto; font-size: 12px; color: var(--text-dark-color); font-family: var(--font-family); font-weight: 600; }
.tc-q-time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-gray-color); }

.tc-q-action {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    border: none;
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .tc-q-action:hover { color: var(--tc-accent); }

.tc-question-card__body {
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
}

.tc-question-card__title { flex: 1 1 auto; }

.tc-question-card__chevron {
    flex: 0 0 auto;
    color: var(--tc-accent);
    transition: transform .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tc-accent) 12%, transparent);
}

.tc-question-card__chevron--open { transform: rotate(90deg); }

/* The answers unfold instead of appearing: the row grows from 0fr to 1fr. The inner
   wrapper is what clips — the padded body inside it must not hold the row open. */
.tc-question-card__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s var(--ease-out, ease);
}

.tc-question-card__reveal--open {
    grid-template-rows: 1fr;
}

.tc-question-card__reveal-inner {
    overflow: hidden;
    min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tc-question-card__reveal {
        transition: none;
    }
}

.tc-question-card__details {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tc-question-card__image {
    max-width: 100%;
    max-height: 160px;
    border-radius: 10px;
    object-fit: cover;
    align-self: flex-start;
}

.tc-answer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tc-answer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-dark-color);
}

.tc-answer-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tc-answer-marker--ok { background: var(--green-color); }
.tc-answer-marker--wrong { background: var(--red-color); }

.tc-answer-order {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 auto;
}

.tc-answer-text { flex: 1 1 auto; word-break: break-word; }

.tc-match-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-dark-color);
}

.tc-match-arrow { color: var(--gray-500); }

.tc-answer-text-block {
    margin: 0;
    padding: 8px 12px;
    background: var(--gray-200);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-dark-color);
    word-break: break-word;
}

.tc-answer-section-label {
    margin: 0;
    color: var(--gray-700);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
}

/* Sequence preview — flex-wrap row of chips, the same way MAUI shows
   them. Chips inherit the cycling colour palette via `--ans-bg`. */
.tc-seq-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tc-seq-block {
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--ans-bg, var(--blue-color));
    color: #fff;
    font-family: var(--font-family);
    font-size: 13px;
    line-height: 1.4;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tc-seq-block--blue   { --ans-bg: var(--blue-500); }
.tc-seq-block--green  { --ans-bg: var(--green-500); }
.tc-seq-block--yellow { --ans-bg: var(--amber-500); }
.tc-seq-block--red    { --ans-bg: var(--red-500); }

.tc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 16px;
    border: 1px dashed var(--gray-500);
    border-radius: 16px;
}

.tc-empty__title {
    margin: 0;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 14px;
    text-align: center;
}

.tc-empty__add {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--blue-color);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -6px rgba(31, 46, 70, 0.25);
}

.tc-footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--gray-200) 30%);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0));
    z-index: 5;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 750px;
    box-sizing: border-box;
}

.tc-footer__warning {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(252, 175, 42, .12);
    color: #8a5a00;
    font-family: var(--font-family);
    font-size: 13px;
    text-align: center;
}

.tc-footer__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 600px) {
    .tc-footer__row { flex-direction: row; }
    .tc-footer__row .tc-button { flex: 1 1 0; }
}

.tc-button {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    min-height: 48px;
    transition: filter .15s ease, transform .1s ease;
    box-sizing: border-box;
}

    .tc-button:hover:not(:disabled) { filter: brightness(1.05); }
    .tc-button:active:not(:disabled) { transform: scale(.99); }
    .tc-button:disabled { opacity: .55; cursor: not-allowed; }

.tc-button--save { color: #fff; }
.tc-button--primary { background: var(--accent-action); color: #fff; }
.tc-button--ghost { background: var(--gray-200); color: var(--text-dark-color); }
.tc-button--danger { background: var(--red-color); color: #fff; }

.tc-panel {
    margin: 24px 0;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
}

.tc-panel--error { border: 1px solid var(--red-color); color: var(--red-color); }

.tc-panel__title {
    margin: 0 0 12px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
}

.tc-type-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tc-type-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background: #fff;
    cursor: pointer;
    font-family: var(--font-family);
    color: var(--text-dark-color);
    text-align: left;
}

    .tc-type-row:hover { background: var(--gray-200); }

.tc-type-row--active {
    border-color: var(--blue-color);
    background: rgba(75, 159, 255, .08);
}

.tc-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--gray-200);
    color: var(--blue-color);
}

.tc-type-label { flex: 1 1 auto; font-size: 15px; font-weight: 500; }

.tc-type-badge {
    background: var(--yellow-color);
    color: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.tc-type-chevron { color: var(--gray-500); }

@media (min-width: 768px) {
    .tc-section { padding: 20px; }

    /* Promote the page to a 3-row grid so the publish CTAs stay
       pinned to the bottom of the .body container even when the
       questions list is shorter than the viewport. */
    .tc-root {
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
        height: 100%;
        min-height: 0;
        gap: 16px;
    }

    .tc-body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tc-footer {
        position: static;
        background: transparent;
        margin-top: 0;
    }
}

/* ===== Question constructor page (QuestionConstructorPage.razor) === */

.qc-root {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
}

.qc-type-trigger {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
    min-height: 44px;
}

.qc-type-trigger__icon {
    color: var(--blue-color);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--gray-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.qc-type-trigger__label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qc-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--gray-200);
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.qc-icon-button--dark { color: var(--text-dark-color); }
    .qc-icon-button--dark:hover { background: var(--gray-300); }

    .qc-icon-button:hover { color: var(--text-dark-color); }

.qc-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
    flex: 1 1 auto;
    min-height: 0;

    width: 100%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.qc-title {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-size: 15px;
    color: var(--text-dark-color);

    resize: none;
    min-height: 70px;
    box-sizing: border-box;
}

    .qc-title:focus { outline: none; border-color: var(--blue-color); }

.qc-photo-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--gray-200);
    cursor: pointer;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
    align-self: flex-start;
    border: none;
}

.qc-photo-row__icon {
    color: var(--blue-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.qc-photo-row__label { flex: 1 1 auto; }

.qc-media {
    position: relative;
    align-self: flex-start;
    border-radius: 12px;
    overflow: hidden;
    max-width: 220px;
}

.qc-media__image { display: block; max-width: 100%; max-height: 200px; }

.qc-media__remove {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(22, 30, 39, .55);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qc-answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qc-answers__label {
    margin: 0;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
}

.qc-answers__hint { color: var(--text-gray-color); font-weight: 400; font-size: 12px; }

.qc-answer {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ans-bg, var(--gray-200));
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
}

.qc-answer--blue   { --ans-bg: var(--blue-500); }
.qc-answer--green  { --ans-bg: var(--green-500); }
.qc-answer--yellow { --ans-bg: var(--amber-500); }
.qc-answer--red    { --ans-bg: var(--red-500); }

.qc-answer--neutral {
    background: var(--gray-200);
    color: var(--text-dark-color);
}

.qc-list-sortable {
    display: flex;
    flex-direction: column;
    gap: 10px;
    touch-action: none;
}

    .qc-list-sortable > *:not(.tp-sortable-dragging) {
        transition: transform .18s ease;
    }

.qc-list-sortable .qc-answer,
.qc-list-sortable .qc-match-pair {
    will-change: transform;
}

.qc-answer__handle,
.qc-match-pair__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 24px;
    color: rgba(255,255,255,.7);
    cursor: grab;
    flex: 0 0 auto;
    user-select: none;
}

    .qc-answer__handle:active,
    .qc-match-pair__handle:active { cursor: grabbing; }

.sortable-chosen {
    cursor: grabbing;
}

.sortable-ghost {
    opacity: .35;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, .25) 0,
        rgba(255, 255, 255, .25) 8px,
        transparent 8px,
        transparent 16px
    );
    outline: 2px dashed rgba(22, 30, 57, .3);
    outline-offset: -2px;
    border-radius: inherit;
}

    .sortable-ghost > * { visibility: hidden; }

.sortable-drag {
    box-shadow: 0 18px 36px -8px rgba(22, 30, 57, .35) !important;
    cursor: grabbing !important;
    opacity: 1 !important;
    filter: brightness(1.04);
    transition: none !important;
    pointer-events: none !important;
}

.qc-seq-ghost {
    visibility: hidden;
}

.qc-answer__check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
    background: rgba(255,255,255,.18);
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.qc-answer__check--ok {
    background: #fff;
    border-color: #fff;
    color: var(--ans-bg, var(--green-color));
}

.qc-answer__order {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}

.qc-answer__order-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}

    .qc-answer__order-btn:hover:not(:disabled) { background: rgba(255,255,255,.32); }
    .qc-answer__order-btn:disabled { opacity: .35; cursor: not-allowed; }

.qc-answer__remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

    .qc-answer--neutral .qc-answer__remove { color: var(--gray-600); }
    .qc-answer__remove:hover { color: #fff; background: rgba(255,255,255,.18); border-radius: 50%; }

.qc-answer__input {
    flex: 1 1 auto;
    border: none;
    background: rgba(255,255,255,.2);
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: 14px;
    outline: none;
    min-width: 0;
}

    .qc-answer__input::placeholder { color: rgba(255,255,255,.7); }
    .qc-answer__input:focus { background: rgba(255,255,255,.32); }

.qc-answer--neutral .qc-answer__input {
    background: #fff;
    color: var(--text-dark-color);
    border: 1px solid var(--gray-300);
}

.qc-answer__input--ta {
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    min-height: 28px;
    field-sizing: content;
}

.qc-answer--neutral .qc-answer__input::placeholder { color: var(--text-gray-color); }

.qc-answer__input--full {
    flex: 1 1 auto;
    padding: 12px 14px;
    background: var(--gray-200);
    color: var(--text-dark-color);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
}

.qc-answer__input--full::placeholder {
    color: var(--text-gray-color);
}

.qc-match-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qc-match-grid__head,
.qc-match-pair {
    display: grid;
    grid-template-columns: 22px 1fr 1fr 28px;
    align-items: center;
    gap: 10px;
}

.qc-match-grid__head {
    padding: 0 12px;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qc-match-grid__head-cell:first-of-type { grid-column: 2; }
.qc-match-grid__head-cell:last-of-type { grid-column: 3; }

.qc-match-pair {
    background: var(--ans-bg, var(--gray-200));
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
}

.qc-match-pair--blue   { --ans-bg: var(--blue-500); }
.qc-match-pair--green  { --ans-bg: var(--green-500); }
.qc-match-pair--yellow { --ans-bg: var(--amber-500); }
.qc-match-pair--red    { --ans-bg: var(--red-500); }

.qc-match-pair__input {
    border: none;
    background: rgba(255,255,255,.2);
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: 14px;
    outline: none;
    width: 100%;
    min-width: 0;
    line-height: 1.4;
    min-height: 28px;
    resize: none;
    overflow: hidden;
    field-sizing: content;
}

    .qc-match-pair__input::placeholder { color: rgba(255,255,255,.7); }
    .qc-match-pair__input:focus { background: rgba(255,255,255,.32); }

.qc-match-pair__remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
    padding: 0;
}

    .qc-match-pair__remove:hover { color: #fff; background: rgba(255,255,255,.18); }

@media (max-width: 599px) {
    .qc-match-grid__head { display: none; }

    .qc-match-pair {
        grid-template-columns: 22px 1fr 28px;
        grid-template-areas:
            "handle left   remove"
            "handle right  remove";
        row-gap: 6px;
    }

    .qc-match-pair__handle { grid-area: handle; }
    .qc-match-pair__remove { grid-area: remove; align-self: start; }
    .qc-match-pair__input:nth-of-type(1) { grid-area: left; }
    .qc-match-pair__input:nth-of-type(2) { grid-area: right; }
}

.qc-seq-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    background: var(--gray-200);
    align-items: center;
}

.qc-seq-zone--empty { color: var(--text-gray-color); font-size: 13px; }

.qc-seq-block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--ans-bg, var(--blue-color));
    color: #fff;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(22, 30, 57, .12);

    max-width: 100%;
    cursor: grab;
    user-select: none;
}

    .qc-seq-block:active { cursor: grabbing; }

.qc-seq-block--blue   { --ans-bg: var(--blue-500); }
.qc-seq-block--green  { --ans-bg: var(--green-500); }
.qc-seq-block--yellow { --ans-bg: var(--amber-500); }
.qc-seq-block--red    { --ans-bg: var(--red-500); }

.qc-seq-block__order {
    min-width: 16px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,.25);
    font-size: 11px;
    font-weight: 700;
}

.qc-seq-block__input {
    border: none;
    background: rgba(255,255,255,.22);
    color: #fff;
    border-radius: 6px;
    padding: 2px 6px;
    font-family: var(--font-family);
    font-size: 13px;
    outline: none;
    min-width: 90px;

    width: auto;
    max-width: min(420px, 80vw);
    field-sizing: content;
}

    .qc-seq-block__input::placeholder { color: rgba(255,255,255,.75); }
    .qc-seq-block__input:focus { background: rgba(255,255,255,.36); }

.qc-seq-block__remove {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.22);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}

    .qc-seq-block__remove:hover { background: rgba(255,255,255,.4); }

.qc-add-row {
    align-self: flex-start;
    background: transparent;
    border: 1px dashed var(--gray-500);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--blue-color);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
}

    .qc-add-row:disabled {
        opacity: .45;
        cursor: not-allowed;
        color: var(--gray-600);
        border-color: var(--gray-300);
    }

.qc-add-row--ghost { color: var(--gray-700); }

.qc-add-row__hint {
    margin: 4px 0 0;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 1.35;
}

.qc-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
    cursor: pointer;
}

.qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input),
.qc-setting-row > input[type="checkbox"]:not(.qc-switch__input) {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    margin: 0;
    background: var(--gray-300);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background-color .2s ease;
}

    .qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input)::before,
    .qc-setting-row > input[type="checkbox"]:not(.qc-switch__input)::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 6px rgba(22, 30, 57, .2);
        transition: transform .2s ease;
    }

    .qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input):checked,
    .qc-setting-row > input[type="checkbox"]:not(.qc-switch__input):checked {
        background: var(--blue-color);
    }

    .qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input):checked::before,
    .qc-setting-row > input[type="checkbox"]:not(.qc-switch__input):checked::before {
        transform: translateX(20px);
    }

    .qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input):focus-visible,
    .qc-setting-row > input[type="checkbox"]:not(.qc-switch__input):focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(75, 159, 255, .25);
    }

.qc-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
}

    .qc-setting-row:last-child { border-bottom: none; }

.qc-setting-row__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.qc-setting-row__title {
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.qc-setting-row__hint {
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 1.35;
}

.qc-setting-row__select,
.qc-setting-row__number {
    flex: 0 0 auto;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark-color);
    background: #fff;
    min-width: 140px;
    cursor: pointer;
}

.qc-setting-row__number {
    min-width: 96px;
    width: 96px;
    text-align: center;
}

    .qc-setting-row__select:focus,
    .qc-setting-row__number:focus {
        outline: none;
        border-color: var(--blue-color);
    }

.qc-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    cursor: pointer;
}

.qc-switch__input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.qc-switch__track {
    position: absolute;
    inset: 0;
    background: var(--gray-300);
    border-radius: 999px;
    transition: background-color .2s ease;
    pointer-events: none;
}

.qc-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(22, 30, 57, .2);
    transition: transform .2s ease;
}

.qc-switch__input:checked + .qc-switch__track {
    background: var(--blue-color);
}

.qc-switch__input:checked + .qc-switch__track .qc-switch__thumb {
    transform: translateX(20px);
}

.qc-switch__input:focus-visible + .qc-switch__track {
    box-shadow: 0 0 0 3px rgba(75, 159, 255, .25);
}

.qc-switch__input:disabled + .qc-switch__track {
    opacity: .55;
    cursor: not-allowed;
}

.qc-toggle-row__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.qc-toggle-row__title {
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.qc-toggle-row__hint {
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 1.35;
}

.qc-input-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
}

    .qc-input-row input {
        border: 1px solid var(--gray-300);
        border-radius: 10px;
        padding: 10px 12px;
        font-family: var(--font-family);
        font-size: 14px;
    }


.qc-footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(246,246,247,0) 0%, var(--gray-200) 30%);
    display: flex;
    gap: 12px;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0));
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
    width: 100%;
    max-width: 750px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .qc-root {
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
        height: 100%;
        min-height: 0;
        gap: 12px;
    }

    .qc-card {
        padding: 24px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .qc-footer {
        position: static;
        background: transparent;
        margin-top: 0;
    }
}

/* ===== Test settings & privacy pages =========================== */

.ts-root {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
}

.ts-root--narrow { max-width: none; margin: 0; }

.ts-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Wide screens lay the settings sections out in two balanced columns across the content width. */
@media (min-width: 1100px) {
    .ts-form--split {
        display: block;
        max-width: none;
        column-count: 2;
        column-gap: 16px;
    }

        .ts-form--split > .ts-section {
            break-inside: avoid;
            margin-bottom: 16px;
        }

        .ts-form--split > .ts-save,
        .ts-form--split > .ctm-error {
            break-inside: avoid;
        }
}

/* The save action follows the last section instead of being pushed to the page bottom,
   so it is in sight right after the danger zone. */
.ts-root {
    min-height: 0;
}

.ts-root .qc-footer {
    position: static;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 0 24px;
    background: transparent;
    justify-content: flex-end;
}

    .ts-root .qc-footer .tc-button {
        flex: 0 0 auto;
        min-width: 240px;
    }

/* In the settings form the save button closes the section column and spans its width. */
.ts-form .ts-save {
    max-width: none;
    padding: 0;
}

    .ts-form .ts-save .tc-button {
        flex: 1 1 auto;
    }

@media (max-width: 767.98px) {
    .ts-root .qc-footer .tc-button {
        flex: 1 1 auto;
    }
}

.ts-section {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
}

.ts-section--danger {
    background: rgba(255, 105, 81, .04);
    border: 1px solid rgba(255, 105, 81, .25);
}

.ts-section__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark-color);
}

.ts-section__sub {
    margin: 0;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.4;
}

.ts-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-field__label {
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 13px;
}

.ts-input,
.ts-textarea {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark-color);
    box-sizing: border-box;
}

.ts-textarea { min-height: 100px; resize: vertical; }

.ts-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #fff;
    text-align: left;
}

    .ts-picker__chevron {
        color: var(--ink-400);
        font-size: 20px;
        line-height: 1;
    }

    .ts-input:focus, .ts-textarea:focus {
        outline: none;
        border-color: var(--blue-color);
    }

.ts-plus-hint {
    background: var(--yellow-color);
    color: #fff;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
}

.ts-cover {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.ts-cover__preview {
    position: relative;
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    overflow: hidden;
    max-width: 312px;
}

.ts-cover__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    pointer-events: none;
    z-index: 0;
}

.ts-cover__chip,
.ts-cover__title,
.ts-cover__count { position: relative; z-index: 1; }

.ts-cover__chip {
    align-self: flex-start;
    background: rgba(255,255,255,.92);
    color: var(--text-dark-color);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.ts-cover__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
}

.ts-cover__count {
    margin: 12px 0 0;
    font-family: var(--font-family);
    font-size: 12px;
    opacity: .9;
}

.tp-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark-color);
}

    .tp-radio input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

.tp-radio__indicator {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--gray-500);
    flex: 0 0 auto;
    position: relative;
}

.tp-radio input:checked + .tp-radio__indicator { border-color: var(--blue-color); }

.tp-radio input:checked + .tp-radio__indicator::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--blue-color);
}

.tp-code {
    margin-top: 8px;
    padding: 16px;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    background: var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.tp-code__value {
    margin: 0;
    font-family: var(--third-family);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 0.2em;
    color: var(--text-dark-color);
}

.tp-code__copy,
.tp-code__regen {
    background: transparent;
    border: none;
    color: var(--blue-color);
    font-family: var(--font-family);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}

    .tp-code__regen:disabled { opacity: .55; cursor: not-allowed; }

/* ===== Specific-people access (ViaLinkSome) ====== */

.tp-access {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tp-access__add {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.tc-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    background: var(--gray-200);
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark-color);
}

    .tc-input:disabled { opacity: .55; }

.tp-access__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-access__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    background: var(--gray-200);
}

.tp-access__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-access__name {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-access__email {
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--text-gray-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Question type icon (matches MAUI QuestionTypeIcon) ====== */

.qti {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 6px;
    flex: 0 0 auto;
}

.qti--sm { width: 22px; height: 22px; padding: 4px; border-radius: 6px; }
.qti--md { width: 28px; height: 28px; padding: 5px; }
.qti--lg { width: 40px; height: 40px; border-radius: 10px; padding: 7px; }

.qti__img { width: 100%; height: 100%; display: block; pointer-events: none; }

.qti--choice    { background: var(--blue-500); }
.qti--reorder   { background: var(--green-500); }
.qti--match     { background: var(--amber-500); }
.qti--text      { background: #8B5CF6; }
.qti--sequence  { background: var(--red-500); }
.qti--fill-gap  { background: #6C7589; }

/* ===== Language picker ========================================= */

.lp-root {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lp-header__label {
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
}

.lp-header__arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--gray-200);
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background-color .15s ease, color .15s ease;
}

    .lp-header__arrow:hover {
        background: var(--blue-color);
        color: #fff;
    }

.mt-tag--with-flag { padding: 6px 14px 6px 8px; }

.lp-flag {
    flex: 0 0 auto;
    width: 24px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    background: var(--gray-200);
    box-shadow: 0 0 0 1px rgba(22, 30, 57, .08);
}

.lp-row .lp-flag {
    width: 28px;
    height: 20px;
    border-radius: 4px;
}


.lp-panel {
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    box-shadow: 0 -10px 30px -8px rgba(0, 0, 0, .2);
    animation: ctm-slide-up .25s ease-out;
    box-sizing: border-box;
}

.lp-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-family: var(--font-family);
    color: var(--text-dark-color);
    font-size: 15px;
    text-align: left;
    transition: background-color .15s ease;
}

    .lp-row:hover { background: var(--gray-200); }

.lp-row--selected { background: rgba(75, 159, 255, .08); }

.lp-row__label { flex: 1 1 auto; }

.lp-row__check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #fff;
}

.lp-row__check--on {
    background: var(--blue-color);
    border-color: var(--blue-color);
}

@media (min-width: 768px) {
    .lp-panel {
        max-width: 460px;
        max-height: 70vh;
        border-radius: 24px;
        animation: ctm-fade-in .25s ease-out;
    }
}

/* ===== AI CTA on the home page ================================ */

.home-ai-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: linear-gradient(135deg, rgba(252, 175, 42, .14) 0%, rgba(252, 175, 42, .04) 100%);
    border: 1px solid rgba(252, 175, 42, .35);
    border-radius: 18px;
    padding: 16px 18px;
    cursor: pointer;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    text-align: left;
    transition: filter .15s ease, transform .1s ease;
    box-sizing: border-box;
}

    .home-ai-cta:hover { filter: brightness(1.03); border-color: rgba(252, 175, 42, .6); }
    .home-ai-cta:active { transform: scale(.99); }

.home-ai-cta__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(252, 175, 42, .2);
    color: var(--yellow-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-ai-cta__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.home-ai-cta__title {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.home-ai-cta__sub {
    font-size: 13px;
    color: var(--text-gray-color);
    line-height: 1.35;
}

.home-ai-cta__chevron {
    flex: 0 0 auto;
    color: var(--text-gray-color);
    display: inline-flex;
    align-items: center;
}

/* ===== AI generation row in CreateTestModal ===================== */

.ctm-ai-row {
    background: rgba(252, 175, 42, .08);
    border: 1px solid rgba(252, 175, 42, .35);
    border-radius: 14px;
    padding: 12px 14px;
}

.ctm-ai-row__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(252, 175, 42, .15);
    color: var(--yellow-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ctm-ai-row--locked {
    background: rgba(252, 175, 42, .1);
    border-style: dashed;
}

    .ctm-ai-row--locked .qc-setting-row__title { color: var(--text-dark-color); }
    .ctm-ai-row--locked .qc-setting-row__hint { color: var(--text-gray-dark); }

/* AI questions-count input — minus / number / plus stepper. */
.ctm-ai-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    background: #fff;
    width: max-content;
}

.ctm-ai-count__step {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--gray-200);
    color: var(--text-dark-color);
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ctm-ai-count__step:hover:not(:disabled) {
        background: var(--blue-color);
        color: #fff;
    }

    .ctm-ai-count__step:disabled { opacity: .4; cursor: not-allowed; }

.ctm-ai-count__input {
    width: 56px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark-color);
    outline: none;
    -moz-appearance: textfield;
}

    .ctm-ai-count__input::-webkit-outer-spin-button,
    .ctm-ai-count__input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* AI prompt textarea — same look as ctm-input but with vertical
   resize disabled and a tall default height. */
.ctm-input--ta {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-family);
    line-height: 1.45;
}

/* ===== Plus-required modal ===================================== */

.plus-required__panel {
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    box-shadow: 0 -10px 30px -8px rgba(0,0,0,.2);
    margin: 0 16px;
}

.plus-required__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(75, 159, 255, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.plus-required__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-dark-color);
}

.plus-required__sub {
    margin: 0;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-gray-color);
    line-height: 1.4;
}

.plus-required__actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

@media (min-width: 768px) {
    .plus-required__panel { max-width: 420px; }
    .plus-required__actions { flex-direction: row; }
}

/* Create-test modal: artwork tabs, glyph grid, layout segments and cover preview glyphs. */
.ctm-artwork-tabs,
.ctm-layout-segments {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ctm-layout-segments {
    margin-bottom: 0;
}

.ctm-artwork-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border-radius: 12px;
    border: none;
    background: var(--background-color, #F2F4F7);
    color: var(--text-gray-dark-color, #5B6470);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ctm-artwork-tab--active {
    background: #4B9FFF;
    color: #fff;
}

.ctm-lock {
    flex: 0 0 auto;
}

.ctm-color {
    position: relative;
}

.ctm-color__lock {
    position: absolute;
    top: 5px;
    right: 5px;
    color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.ctm-glyph-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ctm-glyph__icon {
    width: 28px;
    height: 28px;
    pointer-events: none;
}

.ctm-mt-10 {
    margin-top: 10px;
}

.ctm-tonal-row {
    margin: 12px 0;
}

.ctm-preview__glyph {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.ctm-preview__glyph--corner {
    right: -18px;
    bottom: -22px;
    width: 96px;
    height: 96px;
    opacity: .24;
}

.ctm-preview__glyph--feature {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    opacity: .9;
}

.ctm-preview__tiles {
    position: absolute;
    inset: 0;
    background-size: 30px 30px;
    background-repeat: repeat;
    background-position: 8px 8px;
    opacity: .24;
    pointer-events: none;
    z-index: 0;
}

/* Creation flow chrome: the progress row and the cover preview stay pinned above the current step,
   matching the MAUI page where the preview is never rebuilt and only grows as choices land. */
.ctm-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    padding: 20px 0 12px;
}

.ctm-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ctm-progress__track {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--gray-200);
    overflow: hidden;
}

.ctm-progress__fill {
    height: 100%;
    border-radius: 2px;
    background: var(--blue-color);
    transition: width .26s ease-out;
}

.ctm-progress__label {
    flex: 0 0 auto;
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--text-gray-color);
}

/* Scoring type: one card per option, the shape the MAUI step uses. */
.ctm-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: var(--background-color, #F2F4F7);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ctm-type__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-dark-color);
}

.ctm-type__hint {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-gray-color);
}

.ctm-type__badge {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 20px;
    background: #CFDBED;
    color: #185FA5;
}

.ctm-type--active {
    background: var(--blue-color);
}

    .ctm-type--active .ctm-type__title,
    .ctm-type--active .ctm-type__hint {
        color: #fff;
    }

    .ctm-type--active .ctm-type__badge {
        background: rgba(255, 255, 255, .25);
        color: #fff;
    }

/* Artwork grid: four tiles per row for both patterns and glyphs, so the rows stay even. A pattern
   fills its tile the way it fills a cover — the assets carry a low fill-opacity and a small centred
   thumbnail of one is all but invisible — while a glyph is opaque line art and reads better centred. */
.ctm-artwork-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ctm-artwork-cell {
    position: relative;
    aspect-ratio: 16 / 11;
    width: 100%;
    border-radius: 10px;
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 0 #fff;
    transition: transform .12s ease, box-shadow .12s ease;
    transform: scale(.95);
}

.ctm-artwork-cell--active {
    transform: scale(1);
    /* Selection is a ring rather than a dimming of the others: the pattern assets are already faint by
       design, and fading them further left the row looking empty. */
    box-shadow: inset 0 0 0 2.5px #fff;
}

.ctm-artwork-cell__pattern {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.ctm-artwork-cell__glyph {
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
}

/* On the settings page the container is far wider than a phone, so the pickers are capped: without
   this the swatches stretch to the full column and stop matching the modal and the MAUI editor. */
.ts-section .ctm-colors,
.ts-section .ctm-artwork-grid,
.ts-section .ctm-artwork-tabs,
.ts-section .ctm-layout-segments,
.ts-section .ctm-tonal-row {
    max-width: 420px;
}

/* Generation state of the creation flow: it replaces the current step inside the dialog, so the cover
   stays on screen. Everything that moves is CSS — a Blazor Server circuit should not be pushing a render
   per frame for the whole minute the generator can take. */
.aig-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 8px 4px 4px;
}

.aig-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.aig-sparkle {
    position: absolute;
    width: var(--aig-size);
    height: var(--aig-size);
    color: var(--yellow-color, #FCAF2A);
    opacity: 0;
    animation: aig-drift var(--aig-duration) ease-in-out var(--aig-delay) infinite;
}

    .aig-sparkle svg {
        width: 100%;
        height: 100%;
        display: block;
    }

@keyframes aig-drift {
    0% { opacity: 0; transform: translateY(10px) scale(.6) rotate(0deg); }
    35% { opacity: .95; transform: translateY(-4px) scale(1) rotate(25deg); }
    70% { opacity: .5; transform: translateY(-14px) scale(.85) rotate(-15deg); }
    100% { opacity: 0; transform: translateY(-26px) scale(.6) rotate(10deg); }
}

.aig-core {
    position: relative;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.aig-core__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(75, 159, 255, .35);
    border-top-color: #4B9FFF;
    animation: aig-spin 2.4s linear infinite;
}

.aig-core__ring--slow {
    inset: 15px;
    border-color: rgba(252, 175, 42, .3);
    border-bottom-color: #FCAF2A;
    animation: aig-spin 3.6s linear reverse infinite;
}

@keyframes aig-spin {
    to { transform: rotate(360deg); }
}

.aig-core__star {
    width: 46px;
    height: 46px;
    color: #4B9FFF;
    animation: aig-pulse 2.2s ease-in-out infinite;
}

@keyframes aig-pulse {
    0%, 100% { transform: scale(.92); opacity: .85; }
    50% { transform: scale(1.06); opacity: 1; }
}

.aig-title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-dark-color);
}

/* The caption is keyed on its text, so each new phrase mounts fresh and replays the fade. */
.aig-caption {
    margin: 0;
    min-height: 44px;
    max-width: 320px;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-gray-color);
    animation: aig-caption-in .5s ease-out;
}

@keyframes aig-caption-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .aig-sparkle,
    .aig-core__ring,
    .aig-core__star,
    .aig-caption {
        animation: none;
    }

    .aig-sparkle {
        opacity: .7;
    }
}


/* ============================================================================
   CONSTRUCTOR ON A WIDE SCREEN
   The phone keeps the app's screen — one column under the coloured plate, the
   action bar at the foot. From 900px the page splits: questions on the left,
   the facts publication depends on and the action itself on the right.
   ========================================================================= */

/* The add button follows the app: a round button over the list rather than a
   row in the heading. */
@media (max-width: 899px) {
    .tc-section__add {
        position: fixed;
        right: var(--gutter);
        bottom: calc(var(--tabbar-h) + 84px);
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--accent-action);
        color: #fff;
        box-shadow: var(--elev-2);
        z-index: var(--z-sticky);
    }

    .tc-facts {
        display: none;
    }
}

.tc-facts {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 4px 14px;
    margin-bottom: 12px;
}

.tc-facts__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: var(--t-cap);
}

.tc-facts__row + .tc-facts__row {
    border-top: 1px solid var(--border);
}

.tc-facts__row span:first-child {
    color: var(--text-secondary);
}

@media (min-width: 900px) {
    .tc-root {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas:
            "hero hero"
            "body side";
        /* One rhythm for the whole page: 20px between the plates and 20px inside them. */
        column-gap: 20px;
        row-gap: 20px;
        align-items: start;
    }

    .tc-root > .tc-preview {
        grid-area: hero;
    }

    .tc-body > .tc-section,
    .tc-footer .tc-facts {
        padding: 20px;
    }

    /* Same left and right edge for the cover, the list and the section header —
       the narrow 750px column inside a column of its own only made them drift. */
    .tc-preview,
    .tc-body > .tc-section {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .tc-preview {
        margin: 0;
        border-radius: var(--r-lg);
        padding: 20px;
    }

    .tc-body {
        grid-area: body;
    }

    /* The right column spans the whole body: the summary sticks under the header at its
       top, the publish action sticks to the bottom edge of the screen at its foot. */
    .tc-footer {
        grid-area: side;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        max-width: none;
        margin: 0;
        padding: 0;
        background: none;
    }

    .tc-footer .tc-facts {
        position: sticky;
        top: var(--sticky-top);
    }

    .tc-footer__warning {
        margin-top: 12px;
    }

    .tc-footer__row {
        position: sticky;
        bottom: var(--s-5);
        margin-top: auto;
        padding-top: 16px;
    }

    .tc-footer__row {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    .tc-footer .tc-button {
        width: 100%;
    }
}


/* ============================================================================
   QUESTION EDITOR: THE SHEET AND THE PANEL
   The phone keeps the app's screen — type header, white sheet with rounded top,
   coloured answers, action bar at the foot, and the rules behind the gear.
   From 900px the rules move out of the sheet and stand beside the answers.
   ========================================================================= */

/* The card is the sheet the app slides under the type header. */
.qc-card {
    border-radius: 18px 18px 0 0;
}

.qc-side {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    max-height: 82vh;
    overflow-y: auto;
    background: var(--surface-raised);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 4px 16px calc(16px + env(safe-area-inset-bottom, 0));
    box-shadow: var(--elev-3);
    transform: translateY(101%);
    transition: transform var(--d-slow) var(--ease-out);
}

.qc-side--open {
    transform: none;
}

.qc-side-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--surface-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--d-base) var(--ease-out);
}

.qc-side-scrim--open {
    opacity: 1;
    pointer-events: auto;
}

.qc-side__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 12px 0 4px;
}

.qc-side__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--w-semi);
    font-size: var(--t-ui);
    color: var(--text-primary);
}

.qc-side__close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-xs);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .qc-side { transition: none; }
}

@media (min-width: 900px) {
    .qc-root {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        grid-template-areas:
            "head head"
            "card side"
            "foot side";
        column-gap: 24px;
        align-items: start;
    }

    .qc-root > .pbar { grid-area: head; }
    .qc-card { grid-area: card; border-radius: 18px; max-width: none; }
    .qc-footer { grid-area: foot; max-width: none; margin: 0; }

    /* The rules are simply there — no sheet, no scrim, no gear to find them behind. */
    .qc-side {
        grid-area: side;
        position: sticky;
        top: var(--sticky-top);
        transform: none;
        align-self: start;
        max-height: calc(100dvh - var(--sticky-top) - var(--s-5));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        border-radius: var(--r-md);
        border: 1px solid var(--border);
        box-shadow: none;
        padding: 4px 16px 12px;
    }

    .qc-side__close,
    .qc-side-scrim,
    .qc-settings-toggle {
        display: none;
    }
}