/* ============================================================
   Izipass — brand mapping + application-specific selectors (.izipass-*)

   Design system: Standalone/Codli.Design (codli-design.css, loaded first).
   Never define or override .r-* components here. Hex values live only in the token blocks
   (:root, [data-theme="dark"]); everything below uses var().
   One accent for the whole app: .NET purple, --brand-700 = #512BD4 (white text 7.94:1).
   The admin panel no longer has its own red palette (owner's decision, 2026-10-29: red next to the
   purple of modals and toasts looked bad), so [data-area="admin"] only marks the area.
   Every class and token is documented in Wiki/Izipass/Design-System.md (Izipass 01).
   Contrast pairs are checked by Tests/BrandContrastTests.cs.
   ============================================================ */

:root {
    --brand-50:  #f3effd;
    --brand-100: #e6defb;
    --brand-200: #cdbcf7;
    --brand-300: #a98ff0;
    --brand-400: #8462e6;
    --brand-500: #6a41dd;
    --brand-600: #5a32d8;
    --brand-700: #512bd4;
    --brand-800: #4122ab;
    --brand-900: #311a82;
    --brand-950: #1f1052;

    --izipass-on-brand: #ffffff;

    /* Answer states: colour + icon + label, never colour alone. Text on each fill >= 4.5:1. */
    --izipass-answer-fg: #ffffff;
    --izipass-answer-selected-bg: var(--brand-700);
    --izipass-answer-correct-bg: #2e7d32;
    --izipass-answer-wrong-bg: #b71c1c;
    --izipass-answer-missed-bg: #a84300;

    /* Category palette (Category.ColorToken = cat-1…cat-8). Used as pill fill with white text. */
    --izipass-cat-fg: #ffffff;
    --izipass-cat-1: #1565c0;
    --izipass-cat-2: #00737d;
    --izipass-cat-3: #2e7d32;
    --izipass-cat-4: #8d6200;
    --izipass-cat-5: #bf360c;
    --izipass-cat-6: #ad1457;
    --izipass-cat-7: #6a1b9a;
    --izipass-cat-8: #455a64;

    /* Warnings in the learning area (last 5 minutes of an exam, deadlines). */
    --izipass-warn-bg: #fff4e5;
    --izipass-warn-fg: #8a3a00;

    /* Learning-area surfaces (light). */
    --izipass-ground: #f7f6fb;
    --izipass-card: #ffffff;
    --izipass-card-muted: #f3f1f9;
    --izipass-shadow: 0 2px 14px rgba(31, 16, 82, 0.16);
    --izipass-auth-ground: var(--brand-950);
}

/* Dark theme of the learning area: pure black (OLED), owner's decision. */
[data-theme="dark"] {
    --izipass-answer-wrong-bg: #c62828;
    --izipass-cat-fg: #000000;
    --izipass-cat-1: #90caf9;
    --izipass-cat-2: #80deea;
    --izipass-cat-3: #a5d6a7;
    --izipass-cat-4: #ffd54f;
    --izipass-cat-5: #ffab91;
    --izipass-cat-6: #f48fb1;
    --izipass-cat-7: #ce93d8;
    --izipass-cat-8: #b0bec5;
    --izipass-warn-bg: #3a2410;
    --izipass-warn-fg: #ffc58a;
    --izipass-ground: #000000;
    --izipass-card: #0c0b10;
    --izipass-card-muted: #17151f;
    --izipass-shadow: 0 0 0 1px #24212f;
    --izipass-auth-ground: #000000;
}

body { margin: 0; }
a { color: var(--brand-700); }
:where([data-theme="dark"]) a { color: var(--brand-300); }

/* Wordmark — admin sidebar, splash and error screens. */
.izipass-wordmark {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
}
.r-brand .izipass-wordmark { font-size: var(--t-h3); }
.r-brand-mark img { width: 32px; height: 32px; }
.izipass-brand-link { color: inherit; text-decoration: none; }
.izipass-brand-link:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

.izipass-topbar-title {
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--text-primary);
}
.izipass-user { margin-left: auto; }
.izipass-user--fragnal { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
@media (max-width: 640px) {
    .izipass-user .r-user-pill-name,
    .izipass-user .blazing-fragnal-badge__name { display: none; }
    .izipass-user .blazing-fragnal-badge__user { padding-right: 0; }
}

.izipass-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}
.izipass-update-banner .r-btn { min-height: 44px; flex-shrink: 0; }

/* Blazor's unhandled-error strip: hidden until the framework shows it, then a bottom bar. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) max(var(--s-4), env(safe-area-inset-right)) max(var(--s-3), env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left));
    background: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
    border-top: 1px solid var(--status-rejected-solid);
    font-size: var(--t-body);
}
#blazor-error-ui[style*="block"] { display: flex !important; }
#blazor-error-ui .reload { font-weight: 600; color: inherit; min-height: 44px; display: inline-flex; align-items: center; }
#blazor-error-ui .dismiss { margin-left: auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Small layout helpers inside cards (instead of inline flex styles). */
.izipass-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.izipass-fieldset { margin: 0; padding: var(--s-4); border: 1px solid var(--border-default); border-radius: 10px; }
.izipass-xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
.izipass-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.izipass-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.izipass-flush { margin: 0; }
.izipass-section-gap { margin-top: var(--s-6); }
.izipass-panel-head { margin-bottom: var(--s-4); }
.izipass-panel-head > p { margin: 0; }
/* Two fields side by side (assignment window), stacked on a phone. */
.izipass-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 720px) { .izipass-form-pair { grid-template-columns: 1fr; } }
/* Key facts of a record (assignment page). */
.izipass-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3) var(--s-5); margin: 0; }
.izipass-facts dt { font-size: var(--t-small); color: var(--text-secondary); }
.izipass-facts dd { margin: 0; font-weight: 600; }
.izipass-instructions { border-top: 1px solid var(--border-subtle); padding-top: var(--s-3); }
.izipass-touch { min-height: 44px; min-width: 44px; touch-action: manipulation; }

/* Installed PWA: keep content clear of the home indicator. */
.r-main { padding-bottom: max(var(--s-6), env(safe-area-inset-bottom)); }

/* Admin panel: small "admin" tag next to the wordmark. */
.izipass-admin-tag {
    margin-left: var(--s-2);
    padding: 2px var(--s-2);
    border-radius: var(--r-pill, 999px);
    background: var(--brand-700);
    color: var(--izipass-on-brand);
    font-size: var(--t-micro, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* A CodliToggle with its label (filters, form switches, picking items from a list). */
.izipass-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 44px;
}

/* Settings: one-time invitation link shown when SMTP is not configured. */
.izipass-link-box {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    word-break: break-all;
}
.izipass-inline-select { min-width: 150px; }

/* Bulk invitations: pasted list, monospace so columns line up. */
.izipass-csv-input {
    min-height: 10rem;
    font-family: var(--font-mono);
    font-size: var(--t-small);
    resize: vertical;
}

/* Hidden helper element for the clipboard fallback (izipass-clipboard.js). */
.izipass-offscreen {
    position: fixed;
    top: 0;
    left: -9999px;
    opacity: 0;
}

/* Visually hidden, still read by screen readers (labels of icon-only content). */
.izipass-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   MEDIA (Izipass 03) — library grid, upload progress, CMarkdown content.
   ============================================================ */
.izipass-media-search { flex: 1 1 220px; max-width: 360px; min-height: 44px; }
.izipass-media-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-4);
}
.izipass-media-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); min-width: 0; }
.izipass-media-thumb {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--bg-muted);
}
.izipass-media-thumb img { width: 100%; height: 100%; object-fit: contain; }
.izipass-media-thumb-label { font-size: var(--t-h2); color: var(--text-secondary); }
.izipass-media-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }

.izipass-upload-progress { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); color: var(--text-secondary); }
.izipass-progress {
    flex: 1;
    height: 8px;
    border: 0;
    border-radius: var(--r-pill, 999px);
    background: var(--bg-muted);
    accent-color: var(--brand-700);
    overflow: hidden;
}
.izipass-progress::-webkit-progress-bar { background: var(--bg-muted); border-radius: var(--r-pill, 999px); }
.izipass-progress::-webkit-progress-value { background: var(--brand-700); border-radius: var(--r-pill, 999px); }
.izipass-progress::-moz-progress-bar { background: var(--brand-700); border-radius: var(--r-pill, 999px); }

.izipass-markdown-editor { display: flex; flex-direction: column; gap: var(--s-2); }

/* CMarkdown videos (span.md-video from the library) take the design system's radius and muted text. */
.izipass-markdown,
.izipass-markdown-editor {
    --md-video-radius: var(--r-md);
    --md-video-caption-fg: var(--text-secondary);
}

/* ============================================================
   BANK IMPORT (Izipass 05): summary tiles of the preview report.
   ============================================================ */
.izipass-import-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s-3);
}
.izipass-import-tile {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    font-size: var(--t-small);
    color: var(--text-secondary);
}
.izipass-import-tile.is-warning { border-color: var(--status-pending-solid); }
.izipass-import-number { font-size: var(--t-h2); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.izipass-hint { font-size: var(--t-small); color: var(--text-secondary); }

/* ============================================================
   QUESTION BANK (Izipass 04): filters, question editor, category colours, student preview.
   ============================================================ */
.izipass-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s-3);
    align-items: end;
}
.izipass-filters-actions { align-self: end; }
.r-table .izipass-pill { white-space: nowrap; }
.izipass-question-cell { min-width: 260px; }
.izipass-question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-top: var(--s-1); }

.izipass-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.izipass-color-picker { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.izipass-color-swatch {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    background: var(--izipass-cat-1);
}
.izipass-color-swatch.is-selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-surface); }
.izipass-color-swatch:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

.izipass-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--s-5);
    align-items: start;
}
.izipass-editor-side { position: sticky; top: var(--s-4); }
.izipass-option-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.izipass-option {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
}
.izipass-option.is-correct { border-color: var(--brand-600); }
.izipass-option-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.izipass-option-actions { margin-left: auto; }
.izipass-issues { margin: 0; padding-left: var(--s-5); color: var(--text-secondary); font-size: var(--t-small); display: flex; flex-direction: column; gap: var(--s-1); }

/* Blueprint editor (Izipass 06): numbers in one row, share table with live warnings from BlueprintAllocator. */
.izipass-blueprint-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); align-items: start; }
.izipass-percent-input { width: 7rem; }
.izipass-minutes-input { width: 6rem; }
.izipass-pill-list { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.r-table tr.izipass-row-warning > td { background: var(--status-pending-bg); }
.izipass-warning-text { color: var(--status-pending-fg); font-weight: 600; }
.r-alert-warning .izipass-issues { color: inherit; }

/* The preview sits on the learning-area ground so the card looks exactly as students see it. */
.izipass-preview-ground { padding: var(--s-6) var(--s-4); border-radius: var(--r-md); background: var(--izipass-ground); }
.izipass-question-body .md-root > :first-child,
.izipass-answer-text .md-root > :first-child { margin-top: 0; }
.izipass-question-body .md-root > :last-child,
.izipass-answer-text .md-root > :last-child { margin-bottom: 0; }
/* CMarkdown sets its own text colour; inside an answer the text follows the answer state (white when selected). */
.izipass-answer .izipass-answer-text .md-root,
.izipass-answer .izipass-answer-text .md-p { color: inherit; }
/* Code inside an answer follows the answer state too: the theme's light code chip under white text (selected,
   correct, wrong, missed) was unreadable. The chip is tinted from the current text colour instead. */
.izipass-answer .izipass-answer-text :is(.md-code, .md-pre, .md-codeblock) { color: inherit; }
.izipass-answer .izipass-answer-text :is(.md-code, .md-pre) {
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-color: color-mix(in srgb, currentColor 28%, transparent);
}
.izipass-answer .izipass-answer-text .md-codeblock { background: transparent; }
.izipass-answer .izipass-answer-text .md-pre { max-width: 100%; margin: 0; text-align: left; }
.izipass-subtitle-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.izipass-question-hint { margin: 0 0 var(--s-3); }

@media (max-width: 960px) {
    .izipass-editor { grid-template-columns: minmax(0, 1fr); }
    .izipass-editor-side { position: static; }
}

/* ============================================================
   LEARNING AREA — approved Izipass 01 mockup, modelled on the first Izipass:
   a solid purple top bar, centred content, white cards with a soft shadow.
   ============================================================ */
.izipass-learn {
    min-height: 100dvh;
    background: var(--izipass-ground);
    color: var(--text-primary);
}
.izipass-learn-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--s-6) var(--s-6) max(var(--s-12), env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

/* Top bar */
.izipass-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: 56px;
    padding: env(safe-area-inset-top) max(var(--s-5), env(safe-area-inset-right)) 0 max(var(--s-5), env(safe-area-inset-left));
    background: var(--brand-700);
    color: var(--izipass-on-brand);
}
.izipass-bar-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    font-size: var(--t-h3);
    font-weight: 500;
}
.izipass-bar-logo img { width: 38px; height: 38px; }
.izipass-bar-nav { display: flex; align-items: stretch; gap: var(--s-1); margin-left: var(--s-3); flex: 1; min-width: 0; }
.izipass-bar-link {
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    padding: 0 var(--s-4);
    border-bottom: 3px solid transparent;
    color: inherit;
    text-decoration: none;
    font-size: var(--t-body);
    white-space: nowrap;
}
.izipass-learn .izipass-bar-link { color: var(--izipass-on-brand); }
.izipass-bar-link.active { font-weight: 700; border-bottom-color: currentColor; }
.izipass-bar-link:focus-visible,
.izipass-bar-logo:focus-visible,
.izipass-bar-user:focus-visible,
.izipass-bar-logout:focus-visible { outline: 2px solid var(--izipass-on-brand); outline-offset: -4px; }
/* Staff-only shortcut: an outlined pill on the purple bar, so it reads as a different place. */
.izipass-bar-link--admin {
    align-self: center;
    min-height: 36px;
    margin-left: auto;
    border: 1px solid currentColor;
    border-radius: var(--r-pill, 999px);
    font-size: var(--t-small);
    font-weight: 600;
}
.izipass-bar-user {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}
.izipass-learn .izipass-bar-user { color: var(--izipass-on-brand); }
/* The Fragnal badge keeps its own brand colours on the purple bar. */
.izipass-bar-user--fragnal { min-width: 0; }
.izipass-bar-user--fragnal .blazing-fragnal-badge { color: var(--fragnal-brand-foreground); }
.izipass-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-100);
    color: var(--brand-900);
    font-size: var(--t-small);
    font-weight: 700;
}
.izipass-bar-logout {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.izipass-bar-logout svg { width: 22px; height: 22px; }
.izipass-bar-logout:hover { background: var(--brand-800); }

@media (max-width: 720px) {
    .izipass-bar { flex-wrap: wrap; gap: var(--s-2); padding-left: max(var(--s-3), env(safe-area-inset-left)); padding-right: max(var(--s-3), env(safe-area-inset-right)); }
    .izipass-bar-logo { flex: 1; }
    .izipass-bar-user-name,
    .izipass-bar-user--fragnal .blazing-fragnal-badge__name { display: none; }
    .izipass-bar-user--fragnal .blazing-fragnal-badge__user { padding-right: 0; }
    /* Second row on phones: the same nav, scrollable. */
    .izipass-bar-nav { order: 3; flex-basis: 100%; margin: 0; overflow-x: auto; }
    .izipass-bar-link { min-height: 44px; }
    .izipass-learn-main { padding: var(--s-4) var(--s-3) max(var(--s-10), env(safe-area-inset-bottom)); }
}

/* Page text */
.izipass-h1 { margin: 0; font-size: clamp(26px, 4vw, 32px); font-weight: 400; color: var(--text-accent); letter-spacing: var(--tracking-tight); }
.izipass-section-title {
    margin: var(--s-3) 0 0;
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--border-default);
    font-size: var(--t-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}
.izipass-empty { margin: 0; color: var(--text-secondary); }
.izipass-hello { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }

/* Daily goal ring */
.izipass-goal { display: inline-flex; align-items: center; gap: var(--s-3); }
.izipass-goal svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.izipass-goal circle { fill: none; stroke-width: 7; }
.izipass-goal-track { stroke: var(--brand-100); }
.izipass-goal-fill { stroke: var(--brand-700); stroke-linecap: round; }
:where([data-theme="dark"]) .izipass-goal-track { stroke: var(--brand-950); }
:where([data-theme="dark"]) .izipass-goal-fill { stroke: var(--brand-400); }
.izipass-goal-text { display: flex; flex-direction: column; }
.izipass-goal-text strong { color: var(--text-accent); }
.izipass-goal-text span { font-size: var(--t-small); color: var(--text-secondary); }

/* Cards: tiles, mode cards, test cards */
.izipass-card,
.izipass-tile,
.izipass-mode,
.izipass-test {
    background: var(--izipass-card);
    border-radius: 10px;
    box-shadow: var(--izipass-shadow);
}
.izipass-card { padding: var(--s-5); }
.izipass-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.izipass-tile { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.izipass-tile-label { font-size: var(--t-small); color: var(--text-secondary); }
.izipass-tile-value { font-size: clamp(22px, 3vw, 30px); font-weight: 300; color: var(--text-accent); line-height: 1.15; }
.izipass-progress { height: 10px; border-radius: 10px; background: var(--brand-100); overflow: hidden; margin-top: var(--s-1); }
.izipass-progress-fill { display: block; height: 100%; border-radius: 10px; background: var(--brand-700); }
.izipass-progress-fill--0 { width: 0; }
:where([data-theme="dark"]) .izipass-progress { background: var(--brand-950); }
:where([data-theme="dark"]) .izipass-progress-fill { background: var(--brand-400); }

.izipass-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.izipass-mode { padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); }
.izipass-mode > svg { width: 44px; height: 44px; fill: none; stroke: var(--text-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.izipass-mode-body { display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.izipass-mode-title { margin: 0; font-size: var(--t-h3); font-weight: 500; color: var(--text-accent); }
.izipass-mode-text { margin: 0; color: var(--text-secondary); }
@media (max-width: 720px) {
    .izipass-tiles { gap: var(--s-2); }
    .izipass-tile { padding: var(--s-3); }
    .izipass-modes { grid-template-columns: 1fr; gap: var(--s-3); }
    .izipass-mode { flex-direction: row; text-align: left; padding: var(--s-4); }
    .izipass-mode > svg { width: 34px; height: 34px; flex: none; }
}

.izipass-tests { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.izipass-test { width: 280px; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); text-align: center; }
.izipass-test-title { margin: 0; font-size: var(--t-h4, 18px); font-weight: 700; color: var(--text-accent); }
.izipass-test-row { font-size: var(--t-small); text-align: left; }
.izipass-due {
    align-self: center;
    padding: 3px var(--s-3);
    border-radius: var(--r-pill, 999px);
    background: var(--izipass-card-muted);
    color: var(--text-accent);
    font-size: var(--t-small);
    font-weight: 700;
}
/* Less than two local days left: warning colours. */
.izipass-due.is-soon { background: var(--izipass-warn-bg); color: var(--izipass-warn-fg); }

/* Assignments on the dashboard (Izipass 08): required tests first, with a brand stripe and an "Obowiązkowy" pill. */
.izipass-test.is-required { box-shadow: inset 0 4px 0 var(--brand-600), var(--izipass-shadow); }
.izipass-test-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.izipass-required {
    padding: 3px var(--s-3);
    border-radius: var(--r-pill, 999px);
    background: var(--brand-600);
    color: var(--text-on-brand);
    font-size: var(--t-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.izipass-test-progress { color: var(--text-secondary); }
.izipass-test-progress.is-done { color: var(--izipass-answer-correct-bg); }
.izipass-test-instructions { text-align: left; font-size: var(--t-small); }
.izipass-test-instructions > summary { cursor: pointer; color: var(--text-accent); font-weight: 700; }
.izipass-late {
    margin-left: var(--s-1);
    padding: 1px var(--s-2);
    border-radius: var(--r-pill, 999px);
    background: var(--izipass-warn-bg);
    color: var(--izipass-warn-fg);
    font-weight: 700;
}
.izipass-assignment-state { font-weight: 700; }
.izipass-assignment-state.is-done { color: var(--izipass-answer-correct-bg); }
.izipass-assignment-state.is-missed { color: var(--izipass-answer-wrong-bg); }

/* Pill buttons (first Izipass style) */
.izipass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 var(--s-6);
    border: 1px solid var(--brand-700);
    border-radius: 30px;
    background: var(--brand-700);
    color: var(--izipass-on-brand);
    font: inherit;
    font-size: var(--t-body);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}
.izipass-btn:hover:not(:disabled) { background: var(--brand-800); border-color: var(--brand-800); }
.izipass-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.izipass-btn:disabled { opacity: 0.5; cursor: default; }
.izipass-btn--ghost { background: transparent; color: var(--text-accent); border-color: currentColor; }
.izipass-btn--ghost:hover:not(:disabled) { background: var(--brand-50); color: var(--brand-800); }
:where([data-theme="dark"]) .izipass-btn--ghost:hover:not(:disabled) { background: var(--brand-950); color: var(--brand-200); }

/* ---------- Question screen components (used from Izipass 07; see Design-System.md) ----------
   Rules: @key on the question and on every option; checked states have NO transition (the first
   Izipass animated the previous question's colours onto the next one); targets >= 44 px. */
.izipass-strip {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-6);
    padding: var(--s-3) var(--s-2);
    color: var(--text-accent);
}
.izipass-strip strong { font-weight: 700; }
.izipass-strip-warn { padding: 2px var(--s-3); border-radius: var(--r-pill, 999px); background: var(--izipass-warn-bg); color: var(--izipass-warn-fg); }
.izipass-question {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: var(--s-6);
    background: var(--izipass-card);
    border-radius: 10px;
    box-shadow: var(--izipass-shadow);
}
.izipass-question-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); font-size: var(--t-small); color: var(--text-secondary); }
.izipass-question-title { margin: 0 0 var(--s-4); font-size: 21px; font-weight: 400; line-height: 1.35; color: var(--text-accent); }
.izipass-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--s-3);
    border-radius: var(--r-pill, 999px);
    background: var(--izipass-cat-1);
    color: var(--izipass-cat-fg);
    font-size: var(--t-small);
    font-weight: 700;
    line-height: 1.3;
}
.izipass-pill--cat-1 { background: var(--izipass-cat-1); }
.izipass-pill--cat-2 { background: var(--izipass-cat-2); }
.izipass-pill--cat-3 { background: var(--izipass-cat-3); }
.izipass-pill--cat-4 { background: var(--izipass-cat-4); }
.izipass-pill--cat-5 { background: var(--izipass-cat-5); }
.izipass-pill--cat-6 { background: var(--izipass-cat-6); }
.izipass-pill--cat-7 { background: var(--izipass-cat-7); }
.izipass-pill--cat-8 { background: var(--izipass-cat-8); }
.izipass-answers { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.izipass-answer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 50px;
    padding: var(--s-2) var(--s-5);
    border: 1px solid var(--text-accent);
    border-radius: 30px;
    background: var(--izipass-card);
    color: var(--text-accent);
    font: inherit;
    font-size: 19px;
    font-weight: 300;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}
/* Hover only on neutral answers: a selected or graded answer keeps its state colour under the pointer. */
.izipass-answer:not(.is-selected, .is-correct, .is-wrong, .is-missed):hover:not(:disabled) { background: var(--brand-50); }
:where([data-theme="dark"]) .izipass-answer:not(.is-selected, .is-correct, .is-wrong, .is-missed):hover:not(:disabled) { background: var(--brand-950); }
.izipass-answer:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.izipass-answer-text { flex: 1; min-width: 0; }
/* The letter is a plain label (owner's decision 2026-10-30: no circle around it); it also hints the shortcut key. */
.izipass-answer-key { flex: none; min-width: 1.2em; font-size: var(--t-small); font-weight: 700; }
.izipass-answer-state { flex: none; display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-small); font-weight: 700; }
.izipass-answer-state svg { width: 18px; height: 18px; }
.izipass-answer.is-selected { background: var(--izipass-answer-selected-bg); border-color: var(--izipass-answer-selected-bg); color: var(--izipass-answer-fg); }
.izipass-answer.is-correct { background: var(--izipass-answer-correct-bg); border-color: var(--izipass-answer-correct-bg); color: var(--izipass-answer-fg); font-weight: 400; }
.izipass-answer.is-wrong { background: var(--izipass-answer-wrong-bg); border-color: var(--izipass-answer-wrong-bg); color: var(--izipass-answer-fg); font-weight: 400; }
.izipass-answer.is-missed { background: var(--izipass-answer-missed-bg); border-color: var(--izipass-answer-missed-bg); color: var(--izipass-answer-fg); font-weight: 400; }
.izipass-answer.is-dimmed { opacity: 0.6; }
.izipass-answer:disabled { cursor: default; }
.izipass-explain { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: 10px; background: var(--izipass-card-muted); line-height: 1.5; }
.izipass-explain-label { margin: var(--s-4) 0 calc(-1 * var(--s-2)); font-size: var(--t-micro, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.izipass-community {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 4px var(--s-3);
    border-radius: var(--r-pill, 999px);
    background: var(--brand-100);
    color: var(--brand-800);
    font-size: var(--t-small);
    font-weight: 700;
}
:where([data-theme="dark"]) .izipass-community { background: var(--brand-900); color: var(--brand-100); }
.izipass-question-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }
.izipass-question-below { max-width: 860px; margin: 0 auto; display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }
.izipass-report {
    min-height: 44px;
    padding: 0 var(--s-4);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--t-small);
    cursor: pointer;
}
.izipass-shortcuts {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    cursor: help;
}
.izipass-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); max-width: 860px; margin: 0 auto; }
.izipass-number {
    width: 44px;
    height: 44px;
    border: 1px solid var(--text-accent);
    border-radius: 50%;
    background: var(--izipass-card);
    color: var(--text-accent);
    font: inherit;
    font-size: var(--t-small);
    cursor: pointer;
}
.izipass-number.is-answered { background: var(--brand-100); border-color: var(--brand-100); color: var(--brand-900); }
:where([data-theme="dark"]) .izipass-number.is-answered { background: var(--brand-900); border-color: var(--brand-900); color: var(--brand-100); }
.izipass-number.is-current { background: var(--brand-700); border-color: var(--brand-700); color: var(--izipass-on-brand); box-shadow: 0 0 0 3px var(--brand-200); }
@media (max-width: 720px) {
    .izipass-question { padding: var(--s-4); }
    .izipass-question-title { font-size: 18px; }
    .izipass-answer { font-size: 16px; padding: var(--s-2) var(--s-4); }
    .izipass-question-foot .izipass-btn { flex: 1; }
    .izipass-numbers { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
    .izipass-number { flex: none; }
}

/* Summary result ring: text in the ring's colour (owner's note). */
.izipass-result { width: 150px; height: 150px; border-radius: 50%; border: 10px solid var(--izipass-answer-correct-bg); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: var(--izipass-card); color: var(--izipass-answer-correct-bg); }
.izipass-result.is-failed { border-color: var(--izipass-answer-wrong-bg); color: var(--izipass-answer-wrong-bg); }
.izipass-result-value { font-size: 34px; }
.izipass-result-label { font-size: var(--t-small); font-weight: 700; }

/* Badges, leaderboard, activity heatmap (Izipass 09/10) */
.izipass-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); }
.izipass-badge { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-4) var(--s-3); text-align: center; background: var(--izipass-card); border-radius: 10px; box-shadow: var(--izipass-shadow); }
.izipass-badge img { width: 64px; height: 64px; }
.izipass-badge-name { font-weight: 700; color: var(--text-accent); }
.izipass-badge-desc { font-size: var(--t-small); color: var(--text-secondary); }
.izipass-badge-date { margin-top: auto; padding-top: var(--s-2); font-size: var(--t-micro, 11px); color: var(--text-tertiary); }
.izipass-rank { width: 100%; border-collapse: collapse; }
.izipass-rank th { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border-default); text-align: left; font-size: var(--t-small); color: var(--text-secondary); }
.izipass-rank td { padding: var(--s-3); border-bottom: 1px solid var(--border-default); }
.izipass-rank tr.is-me td { background: var(--brand-50); color: var(--brand-900); font-weight: 700; }
:where([data-theme="dark"]) .izipass-rank tr.is-me td { background: var(--brand-950); color: var(--brand-100); }
.izipass-xpbar { max-width: 220px; height: 6px; margin-top: var(--s-1); border-radius: 6px; background: var(--brand-100); overflow: hidden; }
.izipass-xpbar > span { display: block; height: 100%; background: var(--brand-500); }
:where([data-theme="dark"]) .izipass-xpbar { background: var(--brand-950); }
.izipass-badge-stack { display: inline-flex; align-items: center; }
.izipass-badge-stack > * { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--izipass-card); }
.izipass-badge-stack > :first-child { margin-left: 0; }
.izipass-badge-count { display: inline-flex; align-items: center; justify-content: center; background: var(--izipass-card-muted); color: var(--text-secondary); font-size: var(--t-micro, 11px); font-weight: 700; }
.izipass-badge-stack > img { background: var(--izipass-card); }
.izipass-rank-wrap { overflow-x: auto; }
.izipass-rank th.is-num,
.izipass-rank td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.izipass-rank-pos { width: 3ch; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.izipass-rank-name { font-weight: 500; }
.izipass-rank-none { color: var(--text-tertiary); }

/* Streak week calendar on the dashboard tile (Izipass 09): one dot per day, Monday first. */
.izipass-week { display: flex; gap: var(--s-1); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.izipass-week-day { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.izipass-week-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand-200); background: transparent; }
.izipass-week-name { font-size: var(--t-micro, 11px); color: var(--text-secondary); }
.izipass-week-day--active .izipass-week-dot { border-color: var(--brand-700); background: var(--brand-700); }
.izipass-week-day--frozen .izipass-week-dot { border-color: var(--brand-400); border-style: dashed; }
.izipass-week-day--missed .izipass-week-dot { border-color: var(--border-default); }
.izipass-week-day--future .izipass-week-dot { border-color: var(--border-default); opacity: 0.5; }
.izipass-week-day.is-today .izipass-week-name { color: var(--text-accent); font-weight: 700; }
:where([data-theme="dark"]) .izipass-week-dot { border-color: var(--brand-800); }
:where([data-theme="dark"]) .izipass-week-day--active .izipass-week-dot { border-color: var(--brand-400); background: var(--brand-400); }
.izipass-tile-note { font-size: var(--t-small); color: var(--text-secondary); }

/* XP gained after an answer and on the result. Motion only for people who did not ask to reduce it. */
.izipass-xp-chip { display: inline-block; margin-left: var(--s-2); padding: 0 var(--s-2); border-radius: var(--r-pill, 999px); background: var(--brand-100); color: var(--brand-900); font-weight: 700; font-variant-numeric: tabular-nums; }
:where([data-theme="dark"]) .izipass-xp-chip { background: var(--brand-950); color: var(--brand-100); }
.izipass-summary-text .izipass-xp-chip { margin-left: 0; }
@media (prefers-reduced-motion: no-preference) {
    .izipass-xp-chip { animation: izipass-xp-pop 600ms ease-out both; }
    .izipass-badges--new .izipass-badge { animation: izipass-xp-pop 700ms ease-out both; }
}
@keyframes izipass-xp-pop {
    0% { opacity: 0; transform: translateY(4px) scale(0.9); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.05); }
    100% { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
    .izipass-rank th, .izipass-rank td { padding: var(--s-2); }
    .izipass-week-dot { width: 12px; height: 12px; }
}
.izipass-heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--izipass-card-muted); }
.izipass-heat-cell--1 { background: var(--brand-100); }
.izipass-heat-cell--2 { background: var(--brand-300); }
.izipass-heat-cell--3 { background: var(--brand-500); }
.izipass-heat-cell--4 { background: var(--brand-800); }

/* ============================================================
   ACCOUNT SCREENS (AuthShell) — ink background with the logo's bars, one centred card.
   ============================================================ */
.izipass-auth {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(var(--s-8), env(safe-area-inset-top)) var(--s-4) max(var(--s-8), env(safe-area-inset-bottom));
    overflow: hidden;
    background: var(--izipass-auth-ground);
    box-sizing: border-box;
}
.izipass-auth-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 5%; opacity: 0.07; pointer-events: none; }
.izipass-auth-bars i { width: 7%; border-radius: 24px; background: var(--izipass-on-brand); }
.izipass-auth-bars i:nth-child(1) { height: 40%; }
.izipass-auth-bars i:nth-child(2) { height: 25%; }
.izipass-auth-bars i:nth-child(3) { height: 40%; }
.izipass-auth-bars i:nth-child(4) { height: 27%; }
.izipass-auth-bars i:nth-child(5) { height: 46%; }
.izipass-auth-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--s-8) var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    background: var(--izipass-card);
    color: var(--text-primary);
    border-radius: 14px;
    box-shadow: var(--shadow-xl);
}
.izipass-auth-logo { width: 72px; height: 72px; align-self: center; }
.izipass-auth-title { text-align: center; font-size: var(--t-h2); font-weight: 400; }
/* "Sesja wygasła" on /login?reason=expired (Izipass 13). */
.izipass-auth-notice { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.izipass-auth-submit { width: 100%; min-height: 48px; }
.izipass-auth-or { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); color: var(--text-secondary); }
.izipass-auth-or::before,
.izipass-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }

/* ============================================================
   SOLVING TESTS (Izipass 07): setup, attempt screen, summary, history. Tokens only; checked states have no
   transition (see the question screen block above).
   ============================================================ */
.izipass-setup { display: flex; flex-direction: column; gap: var(--s-4); max-width: 720px; }
.izipass-setup-bank { margin: 0; font-size: var(--t-h3); color: var(--text-accent); }
.izipass-setup-group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.izipass-setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.izipass-choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.izipass-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-4);
    border: 1px solid var(--text-accent);
    border-radius: 30px;
    background: var(--izipass-card);
    color: var(--text-accent);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}
.izipass-choice:hover:not(.is-selected) { background: var(--brand-50); }
:where([data-theme="dark"]) .izipass-choice:hover:not(.is-selected) { background: var(--brand-950); }
.izipass-choice:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.izipass-choice.is-selected { background: var(--izipass-answer-selected-bg); border-color: var(--izipass-answer-selected-bg); color: var(--izipass-answer-fg); }
.izipass-choice-dot { width: 12px; height: 12px; padding: 0; }
.izipass-btn--small { min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-small); }

/* Attempt screen */
.izipass-attempt-screen { display: flex; flex-direction: column; gap: var(--s-4); outline: none; }
.izipass-timer { display: inline-flex; align-items: center; gap: var(--s-1); font-variant-numeric: tabular-nums; }
.izipass-number.is-flagged { box-shadow: inset 0 0 0 3px var(--izipass-answer-missed-bg); }
.izipass-feedback { margin: var(--s-4) 0 0; font-weight: 700; }
.izipass-feedback.is-correct { color: var(--izipass-answer-correct-bg); }
.izipass-feedback.is-wrong { color: var(--izipass-answer-wrong-bg); }
.izipass-feedback span { font-weight: 400; color: var(--text-secondary); }

/* Summary */
.izipass-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); }
.izipass-summary-text { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-width: 240px; }
.izipass-summary-text p { margin: 0; }
.izipass-cat-results { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); max-width: 720px; }
.izipass-cat-result { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; align-items: center; gap: var(--s-3); }
.izipass-cat-result .izipass-progress { margin-top: 0; }
.izipass-cat-result-value { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.izipass-legend { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.izipass-legend-item { padding: 2px var(--s-3); border-radius: var(--r-pill, 999px); color: var(--izipass-answer-fg); font-size: var(--t-small); font-weight: 700; }
.izipass-legend-item.is-correct { background: var(--izipass-answer-correct-bg); }
.izipass-legend-item.is-wrong { background: var(--izipass-answer-wrong-bg); }
.izipass-legend-item.is-missed { background: var(--izipass-answer-missed-bg); }
.izipass-review { display: flex; flex-direction: column; gap: var(--s-4); }

/* Attempt list (dashboard, history) */
.izipass-attempts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.izipass-attempt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--izipass-card); border-radius: 10px; box-shadow: var(--izipass-shadow); }
.izipass-attempt-main { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.izipass-attempt-title { color: var(--text-accent); font-weight: 700; }
.izipass-attempt-meta { font-size: var(--t-small); color: var(--text-secondary); }
.izipass-attempt-score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--izipass-answer-correct-bg); }
.izipass-attempt-score.is-failed { color: var(--izipass-answer-wrong-bg); }
@media (max-width: 720px) {
    .izipass-cat-result { grid-template-columns: 1fr auto; }
    .izipass-cat-result .izipass-progress { grid-column: 1 / -1; grid-row: 2; }
    .izipass-summary { justify-content: center; text-align: center; }
}

/* Izipass 11: reports and explanations */
.izipass-explain-community { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); }
.izipass-review-item .izipass-question-below { margin-top: var(--s-3); }
.izipass-textarea { min-height: 140px; resize: vertical; font: inherit; line-height: 1.5; }
.izipass-counter { align-self: flex-end; font-size: var(--t-small); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.izipass-counter.is-invalid { color: var(--status-rejected-fg); }
/* User text (report messages, staff answers): kept exactly as typed, never markup. */
.izipass-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.izipass-message-box { padding: var(--s-3) var(--s-4); border-radius: 10px; background: var(--izipass-card-muted); }
.izipass-feedback-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.izipass-feedback-item { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); background: var(--izipass-card); border-radius: 10px; box-shadow: var(--izipass-shadow); }
.izipass-feedback-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.izipass-feedback-title { color: var(--text-accent); font-weight: 700; }
.izipass-feedback-meta { margin: 0; font-size: var(--t-small); color: var(--text-secondary); }
.izipass-feedback-question { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.izipass-feedback-response { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--brand-600); border-radius: 10px; background: var(--izipass-card-muted); }
.izipass-feedback-response-label { font-size: var(--t-micro, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.izipass-feedback-item .izipass-explain { margin-top: 0; }
/* Admin navigation: open reports and proposals. */
.izipass-nav-count { margin-left: auto; min-width: 22px; padding: 1px var(--s-2); border-radius: var(--r-pill, 999px); background: var(--brand-600); color: var(--text-on-brand); font-size: var(--t-micro, 12px); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
/* Staff queue and review screens. */
.izipass-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; max-width: 360px; }
.izipass-cell-sub { display: block; font-size: var(--t-small); color: var(--text-secondary); }
.izipass-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.izipass-compare.is-single { grid-template-columns: minmax(0, 1fr); }
.izipass-proposed { box-shadow: inset 3px 0 0 var(--brand-600); }
.izipass-snapshot { display: flex; flex-direction: column; gap: var(--s-4); }
.izipass-snapshot-part { padding: var(--s-2) var(--s-3); border-radius: 10px; }
.izipass-snapshot-part.is-changed { background: var(--status-pending-bg); box-shadow: inset 3px 0 0 var(--status-pending-solid); }
.izipass-snapshot-label { margin: 0 0 var(--s-2); font-size: var(--t-micro, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.izipass-snapshot-options { margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.izipass-snapshot-option.is-correct { font-weight: 600; }
.izipass-snapshot-mark { display: block; font-size: var(--t-small); color: var(--status-done-fg); }
.izipass-snapshot-details summary { cursor: pointer; color: var(--text-accent); }
.izipass-snapshot-details[open] summary { margin-bottom: var(--s-3); }
@media (max-width: 960px) {
    .izipass-compare { grid-template-columns: minmax(0, 1fr); }
}

/* Izipass 10: monitoring */
.r-table th.is-num,
.r-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.izipass-mon-toolbar { align-items: flex-end; margin-bottom: var(--s-4); }
.izipass-mon-bank,
.izipass-mon-min { min-width: 200px; margin: 0; }
.izipass-mon-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
.izipass-mon-tile { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); }
.izipass-mon-tile--wide { grid-column: span 2; }
.izipass-mon-tile-label { font-size: var(--t-small); color: var(--text-secondary); }
.izipass-mon-tile-value { font-size: clamp(20px, 2.6vw, 28px); font-weight: 300; color: var(--text-accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
.izipass-mon-tile-note { font-size: var(--t-small); color: var(--text-secondary); }
.izipass-mon-inactive { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.izipass-mon-table-wrap { overflow-x: auto; }
.izipass-mon-table th[scope="row"] { font-weight: 500; min-width: 160px; }
.izipass-sort { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-align: inherit; cursor: pointer; }
.izipass-sort:hover { color: var(--text-accent); }
.izipass-sort:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: 4px; }
th[aria-sort="ascending"] .izipass-sort::after { content: " ▲"; font-size: 0.75em; }
th[aria-sort="descending"] .izipass-sort::after { content: " ▼"; font-size: 0.75em; }

/* Percentage bars (only the width is computed inline) */
.izipass-mbar { display: block; min-width: 80px; height: 8px; margin-top: 2px; border-radius: 8px; background: var(--brand-100); overflow: hidden; }
.izipass-mbar-fill { display: block; height: 100%; border-radius: 8px; background: var(--brand-600); }
.izipass-mbar--correct .izipass-mbar-fill { background: var(--izipass-answer-correct-bg); }
.izipass-mbar--wrong .izipass-mbar-fill { background: var(--izipass-answer-missed-bg); }
.izipass-mbar--muted .izipass-mbar-fill { background: var(--brand-300); }
:where([data-theme="dark"]) .izipass-mbar { background: var(--brand-950); }
:where([data-theme="dark"]) .izipass-mbar-fill { background: var(--brand-400); }

/* Activity heatmap: a table of small cells, levels from --brand-* */
.izipass-heat-cell--0 { background: var(--izipass-card-muted); }
.izipass-heat-legend { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-small); }
.izipass-heat-swatch { display: inline-block; width: 14px; height: 14px; }
.izipass-heat-wrap { overflow-x: auto; }
.izipass-heat { border-collapse: separate; border-spacing: 3px; }
.izipass-heat td { padding: 0; }
.izipass-heat td .izipass-heat-cell { display: block; width: 14px; height: 14px; }
.izipass-heat-name { padding-right: var(--s-2); text-align: left; font-weight: 500; white-space: nowrap; }
.izipass-heat-day { min-width: 14px; font-size: var(--t-micro, 11px); font-weight: 400; color: var(--text-tertiary); text-align: center; }
.izipass-heat-day.is-monday { color: var(--text-secondary); font-weight: 700; }
:where([data-theme="dark"]) .izipass-heat-cell--0 { background: var(--izipass-card-muted); }

/* Category matrix */
.izipass-matrix th,
.izipass-matrix td { vertical-align: top; }
.izipass-matrix th:first-child,
.izipass-matrix td:first-child { white-space: nowrap; }
.izipass-matrix .is-weak { background: var(--izipass-warn-bg); }
.izipass-matrix tfoot th,
.izipass-matrix tfoot td { font-weight: 700; border-top: 2px solid var(--border-default); }
.izipass-matrix-cell { display: flex; flex-direction: column; gap: 2px; min-width: 90px; font-variant-numeric: tabular-nums; }
.izipass-matrix-cell .r-muted { font-size: var(--t-small); }

/* Exam trend (SVG) */
.izipass-trend { display: block; width: 100%; height: 200px; }
.izipass-trend-grid { stroke: var(--border-default); stroke-width: 1; stroke-dasharray: 4 4; }
.izipass-trend-line { fill: none; stroke: var(--brand-600); stroke-width: 2; vector-effect: non-scaling-stroke; }
.izipass-trend-dot { fill: var(--izipass-answer-correct-bg); stroke: var(--izipass-card); stroke-width: 1; }
.izipass-trend-dot.is-failed { fill: var(--izipass-answer-wrong-bg); }
:where([data-theme="dark"]) .izipass-trend-line { stroke: var(--brand-400); }

/* Student profile, attempt details, question statistics */
.izipass-mon-badges { flex-wrap: wrap; }
.izipass-mon-timeline { margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.izipass-mon-options summary { cursor: pointer; color: var(--text-accent); font-size: var(--t-small); }
.izipass-mon-options ul { margin: var(--s-1) 0 0; padding-left: var(--s-4); }
.izipass-mon-options li.is-correct { font-weight: 600; }
.izipass-mon-options-chart { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); max-width: 860px; }
.izipass-mon-options-chart li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 9rem; align-items: center; gap: var(--s-3); }
.izipass-mon-options-chart .izipass-mbar { height: 14px; margin: 0; }
.izipass-mon-option-value { font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 720px) {
    .izipass-mon-tile--wide { grid-column: auto; }
    .izipass-mon-options-chart li { grid-template-columns: 1fr auto; }
    .izipass-mon-options-chart .izipass-mbar { grid-column: 1 / -1; grid-row: 2; }
}

/* Izipass 12: AI agents (/admin/agents) and agent reviews. MCP config blocks copied from Regime's .r-mcp-*. */
.izipass-mcp { display: flex; flex-direction: column; gap: var(--s-4); }
.izipass-mcp-path { margin-top: 2px; font-family: var(--font-mono); font-size: var(--t-micro, 12px); color: var(--text-tertiary); }
.izipass-mcp-code { margin: 0; padding: var(--s-3) var(--s-4); overflow-x: auto; white-space: pre; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-muted); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--t-micro, 12px); line-height: 1.55; }
.izipass-mcp-hint { margin: 0; font-size: var(--t-micro, 12px); color: var(--text-tertiary); }
/* The one-time token wraps instead of scrolling: it is long and has to be selectable on a tablet. */
.izipass-token-value { white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
/* Skills: list beside the editor, stacked on narrow screens. */
.izipass-skills { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.izipass-skills-item { width: 100%; justify-content: flex-start; gap: var(--s-2); text-align: left; }
.izipass-skills-item.is-active { border-color: var(--brand-600); }
.izipass-skills-body { max-height: 60vh; overflow: auto; }
.izipass-agent-review { box-shadow: inset 3px 0 0 var(--status-progress-solid); }
.izipass-agent-review .r-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.izipass-status-pills { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
@media (max-width: 1023px) {
    .izipass-skills { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   HELP (Izipass 13) — both manuals (/help, /admin/help), copy of the Regime manual styles.
   ============================================================ */
.izipass-help__page-header { margin-bottom: var(--s-4); }
.izipass-help__subtitle { margin: var(--s-1) 0 0; color: var(--text-secondary); }
.izipass-bar-help svg { width: 22px; height: 22px; }
.izipass-help {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
}
@media (min-width: 1100px) {
    .izipass-help { grid-template-columns: 260px minmax(0, 1fr); }
    .izipass-help__index { position: sticky; top: var(--s-4); }
}
.izipass-help__index .r-card-body {
    display: grid;
    gap: 2px;
    padding: var(--s-2);
}
@media (min-width: 600px) and (max-width: 1099.98px) {
    .izipass-help__index .r-card-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.izipass-help__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    color: var(--text-secondary);
    text-decoration: none;
}
.izipass-help__item:hover { background: var(--bg-muted); color: var(--text-primary); }
.izipass-help__item.is-active { background: var(--brand-50); color: var(--brand-800); font-weight: 600; }
[data-theme="dark"] .izipass-help__item.is-active { background: var(--bg-muted); color: var(--brand-300); }
.izipass-help__num {
    flex: none;
    width: 1.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
}
.izipass-help__label { flex: 1; min-width: 0; }
.izipass-help__main { display: grid; gap: var(--s-4); min-width: 0; }
.izipass-help__article:focus { outline: none; }
/* Anchored headings land below the sticky top bar. */
.izipass-help__article [id] { scroll-margin-top: calc(var(--topbar-h) + var(--safe-top) + var(--s-4)); }
.izipass-help__article .r-card-body { max-width: 860px; }
.izipass-help__header { display: grid; gap: var(--s-1); }
.izipass-help__meta {
    font-size: var(--t-caption);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}
.izipass-help__lead { margin: 0; color: var(--text-secondary); }
.izipass-help__fallback { white-space: pre-wrap; font-size: var(--t-small); }
/* Screenshot caption: an *italic* line written directly under the image, in the same paragraph. */
.izipass-help__article .md-img + em {
    display: block;
    font-size: var(--t-small);
    color: var(--text-secondary);
}
.izipass-help__pager { display: flex; gap: var(--s-3); justify-content: space-between; flex-wrap: wrap; }
.izipass-help__pager-btn {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: var(--s-2) var(--s-4);
    gap: 2px;
}
.izipass-help__pager-btn.is-next { margin-left: auto; align-items: flex-end; }
.izipass-help__pager-dir { font-size: var(--t-caption); color: var(--text-tertiary); }
.izipass-help-link { color: var(--text-secondary); }
/* In the learning area the sticky bar is the purple .izipass-bar, not the Codli topbar. */
.izipass-learn .izipass-help__article [id] { scroll-margin-top: calc(56px + env(safe-area-inset-top) + var(--s-4)); }
.izipass-learn .izipass-help__index { top: calc(56px + var(--s-4)); }