/* ============================================================
   Regime — brand mapping + application-specific selectors (.regime-*)

   Design system: Standalone/Codli.Design (codli-design.css, loaded first).
   Never define new .r-* components here and never use hex outside the :root block.
   Rules, states and dimensions of every .regime-* class: Wiki/Regime/Design-System.md.
   Brand mapping and contrast table: Standalone/Codli.Design/docs/branding/Regime.md.

   Brand: Material Green. 50–600 map 1:1 (600 = #43A047, the lead colour: logo,
   theme_color, topbar accent, "met" state, charts). 700–950 are shifted one step
   darker (decision of 2026-10-01, Regime 01): Codli.Design paints CTA, active nav and
   --brand-fg with --brand-700, and white text needs AA 4.5:1 — #388E3C gives 4.12:1,
   #2E7D32 gives 5.13:1. Material 700 (#388E3C) is therefore not used.
   ============================================================ */
:root {
    --brand-50: #E8F5E9;
    --brand-100: #C8E6C9;
    --brand-200: #A5D6A7;
    --brand-300: #81C784;
    --brand-400: #66BB6A;
    --brand-500: #4CAF50;
    --brand-600: #43A047;
    --brand-700: #2E7D32;
    --brand-800: #1B5E20;
    --brand-900: #0F3D14;
    --brand-950: #0A2A0E;
}

body { margin: 0; }
a { color: var(--brand-700); }
/* --brand-700 on the dark surface is 3.60:1; --brand-300 is 9.17:1. :where() keeps the
   specificity of a bare `a`, so library links styled by class (.r-nav-item, .r-btn) still win. */
:where([data-theme="dark"]) a { color: var(--brand-300); }

/* Wordmark — Geist semibold, the same in sidebar, splash, auth and error screens. */
.regime-wordmark {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
}
.r-brand .regime-wordmark { font-size: var(--t-h3); }

.r-brand-mark img { width: 32px; height: 32px; }

/* Topbar: 3 px lead-colour accent (spec: #43A047 in topbar accents). */
.r-topbar { box-shadow: inset 0 3px 0 var(--brand-600); }
.regime-topbar-title {
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--text-primary);
}
.regime-user { margin-left: auto; }

/* Topbar GitHub sync indicator (Regime 05): dot + last sync, spinner while a run is queued or running.
   Takes the free space itself, so the user pill follows right after it. */
.regime-sync {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-2);
    border-radius: var(--r-md);
    font-size: var(--t-small);
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.regime-sync:hover { color: var(--text-primary); background: var(--bg-muted); }
.regime-sync + .regime-user { margin-left: 0; }
.regime-sync__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-600);
}
.regime-sync__dot--error { background: var(--status-rejected-solid); }
@media (max-width: 640px) {
    .regime-sync__label { display: none; }
}

.regime-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}
.regime-update-banner .r-btn { min-height: 44px; flex-shrink: 0; }
/* Grading screens: a full-width strip in its own grid row under the topbar. */
.regime-grade > .regime-update-banner {
    grid-area: banner;
    margin: 0;
    border-radius: 0;
    border-width: 0 0 1px;
    padding-left: max(var(--s-4), env(safe-area-inset-left));
    padding-right: max(var(--s-4), env(safe-area-inset-right));
}

/* Blazor's unhandled-error strip (#blazor-error-ui in index.html): hidden until the framework
   shows it, then a bottom bar above the home indicator. */
#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; }

.regime-section-gap { margin-top: var(--s-6); }

/* Small layout helpers inside cards (instead of inline flex styles). */
.regime-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.regime-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

/* Legacy tab (Regime 13): explanation and the „Wykryj zadania legacy” action above the table. */
.regime-legacy-bar {
    flex-wrap: wrap;
    margin-bottom: var(--s-3);
}

.regime-legacy-bar .r-help {
    margin: 0;
}
.regime-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.regime-flush { margin: 0; }
.regime-inline-select { min-width: 150px; }

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

/* ============================================================
   TOUCH — 44 px minimum for any control on grading screens.
   Added next to .r-btn (36 px): min-height wins over height without overriding .r-btn.
   ============================================================ */
.regime-touch {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   TRISTATE — three result states on two 56×48 px buttons: ✕ NotMet, ✓ Met.
   Neither pressed = NotAssessed; tapping the pressed button again clears it.
   Markup: div.regime-tristate[role=group] > button.regime-tristate__btn--notmet|--met
   with aria-pressed. Styling follows aria-pressed only.
   ============================================================ */
.regime-tristate {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    overflow: hidden;
}
.regime-tristate__btn {
    display: grid;
    place-items: center;
    width: 56px;
    height: 48px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--border-subtle);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--d-fast), color var(--d-fast);
}
.regime-tristate__btn:first-child { border-left: none; }
.regime-tristate__btn svg { width: 22px; height: 22px; }
.regime-tristate__btn:focus-visible {
    outline: none;
    position: relative;
    box-shadow: var(--shadow-focus-ring);
}
.regime-tristate__btn--notmet { color: var(--status-rejected-solid); }
.regime-tristate__btn--met { color: var(--brand-600); }
.regime-tristate__btn--notmet[aria-pressed="true"] {
    background: var(--status-rejected-solid);
    color: var(--text-on-brand);
}
.regime-tristate__btn--met[aria-pressed="true"] {
    background: var(--brand-600);
    color: var(--text-on-brand);
}
.regime-tristate[aria-disabled="true"] { opacity: 0.6; }
.regime-tristate[aria-disabled="true"] .regime-tristate__btn { cursor: not-allowed; }

/* ============================================================
   CRITERION — one criterion row on the grading screen (min. 56 px).
   State modifiers paint the 3 px left rail: .is-met / .is-notmet (default = not assessed).
   __source marks a result pre-filled by an analyzer (Source = AutoCheck).
   ============================================================ */
.regime-criterion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2) var(--s-4);
    align-items: center;
    min-height: 56px;
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--border-subtle);
    box-shadow: inset 3px 0 0 var(--border-default);
}
.regime-criterion:first-child { border-top: none; }
.regime-criterion.is-met { box-shadow: inset 3px 0 0 var(--brand-600); }
.regime-criterion.is-notmet { box-shadow: inset 3px 0 0 var(--status-rejected-solid); }
.regime-criterion.is-focused { background: var(--bg-muted); }
.regime-criterion__main {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
}
.regime-criterion__head {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
}
.regime-criterion__code {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    font-weight: 600;
    color: var(--text-secondary);
}
.regime-criterion__text {
    font-size: var(--t-body);
    line-height: var(--lh-snug);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.regime-criterion.is-expanded .regime-criterion__text {
    display: block;
    -webkit-line-clamp: unset;
}
.regime-criterion__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-caption);
    color: var(--text-tertiary);
}
.regime-criterion__source {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 1px var(--s-2);
    border-radius: var(--r-pill);
    background: var(--status-progress-bg);
    color: var(--status-progress-fg);
    font-size: var(--t-micro);
    font-weight: 600;
}
.regime-criterion__source svg { width: 12px; height: 12px; }
/* The teacher changed an analyzer result: keep the analyzer verdict visible, quietly. */
.regime-criterion__source--overridden {
    background: transparent;
    color: var(--text-tertiary);
    font-weight: 500;
    padding-left: 0;
}
.regime-criterion__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.regime-criterion__note-btn.has-note { color: var(--brand-700); }
[data-theme="dark"] .regime-criterion__note-btn.has-note { color: var(--brand-300); }
.regime-criterion__extra {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.regime-criterion__note {
    font-size: var(--t-small);
    color: var(--text-secondary);
    padding-left: var(--s-3);
    border-left: 2px solid var(--border-default);
}

/* Criteria group header (inside .r-card): title + "5/7" counter + collapsible "Uwaga" note. */
.regime-group-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.regime-group-head__title {
    flex: 1;
    min-width: 0;
    font-size: var(--t-h4);
    font-weight: 600;
}
.regime-group-head__count {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    color: var(--text-secondary);
    font-feature-settings: 'tnum';
}
.regime-group-note {
    margin: 0;
    padding: var(--s-3) var(--s-4);
    background: var(--bg-muted);
    font-size: var(--t-small);
    color: var(--text-secondary);
    line-height: var(--lh-normal);
}

/* ============================================================
   HINT — an agent proposal (AgentProposalItem) on the "Szczegóły pracy" screen, accepted or
   rejected by the teacher. Never shown on the grading screen itself.
   ============================================================ */
.regime-hint {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    font-size: var(--t-small);
    line-height: var(--lh-snug);
}
.regime-hint--agent {
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
}
.regime-hint__icon { flex-shrink: 0; width: 18px; height: 18px; }
.regime-hint__body { flex: 1; min-width: 0; }
.regime-hint__source { font-weight: 600; }
.regime-hint__path {
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    opacity: 0.85;
}
.regime-hint__actions {
    display: flex;
    gap: var(--s-2);
    flex-shrink: 0;
}
.regime-hint.is-resolved { opacity: 0.6; }

/* Analyzer check on "Szczegóły pracy": bound criterion code + verdict, then findings (file:line). */
.regime-check {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    font-size: var(--t-small);
}
.regime-findings {
    margin: 0;
    padding-left: calc(var(--s-3) + 40px);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    color: var(--text-secondary);
}
.regime-check__codes { flex: 0 0 64px; color: var(--text-secondary); }
.regime-check__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.regime-check__title { font-weight: 600; }
.regime-check__evidence { color: var(--text-secondary); overflow-wrap: anywhere; }
.regime-findings li { font-size: var(--t-small); overflow-wrap: anywhere; }
.regime-findings__path { margin-right: var(--s-2); }
/* Intro of the task tab „Analizatory”: help text next to „Uruchom dla wszystkich uczniów”, wrapping on narrow screens. */
.regime-analyzers-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s-3);
}
.regime-analyzers-intro > p { flex: 1 1 320px; min-width: 0; }
.regime-analyzers-intro > .r-btn { flex: none; }

/* One analyzer on "Szczegóły pracy" and in the task tab „Analizatory” (Regime 09). */
.regime-analyzer {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--border-subtle);
}
.regime-analyzer:first-of-type { border-top: 0; }
.regime-analyzer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}
.regime-analyzer__name { font-weight: 600; }
.regime-analyzer__checks summary { cursor: pointer; font-size: var(--t-small); color: var(--text-secondary); padding: var(--s-3) 0; }
.regime-analyzer__checks ul { margin: 0; padding-left: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-small); }
.regime-analyzer__params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-3);
    align-items: start;
}
.regime-analyzer__params .regime-actions { grid-column: 1 / -1; }


/* ============================================================
   PROGRESS — "12/20" counter + thin bar: met (lead colour), not met (red), rest = track.
   Widths come from data through custom properties on the element:
   style="--met: 45%; --notmet: 15%" (the only allowed style attribute, see Design-System.md).
   ============================================================ */
.regime-progress {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 96px;
}
.regime-progress__bar {
    flex: 1;
    display: flex;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--bg-muted);
    overflow: hidden;
}
.regime-progress__met { width: var(--met, 0%); background: var(--brand-600); }
.regime-progress__notmet { width: var(--notmet, 0%); background: var(--status-rejected-solid); }
.regime-progress__label {
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    color: var(--text-secondary);
    font-feature-settings: 'tnum';
    white-space: nowrap;
}

/* ============================================================
   SCORE — "78 % → 4+"; --override strikes the computed grade; --lg in the grading topbar.
   ============================================================ */
.regime-score {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-1);
    font-feature-settings: 'tnum';
    white-space: nowrap;
}
.regime-score__percent { font-size: var(--t-small); color: var(--text-secondary); }
.regime-score__arrow { font-size: var(--t-small); color: var(--text-tertiary); }
.regime-score__grade { font-size: var(--t-body); font-weight: 700; color: var(--text-primary); }
.regime-score__computed {
    font-size: var(--t-small);
    color: var(--text-tertiary);
    text-decoration: line-through;
}
.regime-score--lg .regime-score__percent { font-size: var(--t-h4); }
.regime-score--lg .regime-score__grade { font-size: var(--t-h3); }
.regime-score.is-empty .regime-score__grade { color: var(--text-tertiary); font-weight: 500; }

/* ============================================================
   REPO STATUS — dot + label: --none (no repository), --empty (no code), --code (has code).
   ============================================================ */
.regime-repo-status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-small);
    color: var(--text-secondary);
    white-space: nowrap;
}
.regime-repo-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
}
.regime-repo-status--none::before { background: var(--status-rejected-solid); }
.regime-repo-status--empty::before { background: var(--status-pending-solid); }
.regime-repo-status--code::before { background: var(--brand-600); }

/* ============================================================
   GRADING SCREEN — GradingLayout without the sidebar, built for iPad Pro 11
   (landscape 1194×834, portrait 834×1194). Only the criteria: repository, analyzers,
   agent proposals and history live on the separate "Szczegóły pracy" screen, which
   uses the same .regime-grade frame without the bottom bar.
   ============================================================ */
.regime-grade {
    display: grid;
    /* minmax(0, …): a long topbar must not widen the column past the viewport (portrait). */
    grid-template-columns: minmax(0, 1fr);
    /* Named areas: the update banner (rendered by the layout before the page) sits under the
       topbar and above the scrolling column, never over the bottom bar (Regime 12). */
    grid-template-areas: "top" "banner" "main" "bottom";
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-app);
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
}
.regime-grade-topbar {
    grid-area: top;
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 56px;
    padding: var(--s-1) max(var(--s-4), env(safe-area-inset-right)) var(--s-1) max(var(--s-4), env(safe-area-inset-left));
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: inset 0 3px 0 var(--brand-600);
}
.regime-grade-topbar__student {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-width: 0;
}
.regime-grade-topbar > :not(.regime-grade-topbar__student) { flex-shrink: 0; }
.regime-grade-topbar__name {
    font-size: var(--t-h4);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.regime-grade-topbar__group {
    font-size: var(--t-caption);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.regime-grade-topbar__spacer { flex: 1; }
.regime-grade-topbar .regime-progress { width: 150px; }
.regime-grade-topbar__unsaved {
    font-size: var(--t-caption);
    color: var(--status-pending-fg);
    white-space: nowrap;
}
/* One scrolling column; content capped at 960 px so rows stay readable in landscape. */
.regime-grade-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) max(var(--s-5), env(safe-area-inset-right)) var(--s-8) max(var(--s-5), env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.regime-grade-main > * { width: 100%; max-width: 960px; }
.regime-grade-bottombar {
    grid-area: bottom;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 64px;
    padding: var(--s-2) max(var(--s-4), env(safe-area-inset-right)) max(var(--s-2), env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left));
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}
.regime-grade-bottombar__spacer { flex: 1; }
@media (max-width: 1023px) {
    /* Portrait: the group/task line and the progress bar give way to the score. */
    .regime-grade-topbar .regime-progress__bar { display: none; }
    .regime-grade-topbar .regime-progress { width: auto; min-width: 0; }
}

/* Label / value rows ("Szczegóły pracy": repository statistics, history). */
.regime-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-2) var(--s-4);
    margin: 0;
    font-size: var(--t-small);
}
.regime-stats dt { color: var(--text-tertiary); }
.regime-stats dd { margin: 0; text-align: right; font-feature-settings: 'tnum'; }

/* Snackbar comes from Codli.Design (.r-snackbar, ≥ 0.9.0). On the grading screens its host
   sits above the 64 px bottom bar. */
.regime-grade .r-snackbar-host {
    bottom: calc(64px + var(--s-3) + env(safe-area-inset-bottom));
}

/* Inline spinner for buttons with a running job ("Analiza…"). */
.regime-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-default);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: regime-spin 0.8s linear infinite;
}
@keyframes regime-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .regime-spinner { animation-duration: 2.4s; }
}

/* ============================================================
   CRITERIA EDITOR — one editable row in the task wizard / task "Kryteria" tab / templates.
   Columns: drag handle · code · body (text + competency chips) · points · actions (▲ ▼ ✕, 44 px).
   ============================================================ */
.regime-criterion-edit {
    display: grid;
    grid-template-columns: 32px 96px minmax(0, 1fr) 80px auto;
    gap: var(--s-2);
    align-items: start;
    padding: var(--s-2) var(--s-3);
    border-top: 1px solid var(--border-subtle);
}
.regime-criterion-edit:first-child { border-top: none; }
.regime-criterion-edit__handle {
    display: grid;
    place-items: center;
    height: 44px;
    color: var(--text-tertiary);
    cursor: grab;
    touch-action: none;
}
.regime-criterion-edit__code { font-family: var(--font-mono); }

.regime-criterion-edit__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-width: 0;
}
textarea.r-input.regime-criterion-edit__text {
    min-height: 44px;
    resize: vertical;
    line-height: var(--lh-snug);
}
.regime-criterion-edit__points { text-align: right; font-feature-settings: 'tnum'; }
.regime-criterion-edit__actions { display: flex; gap: var(--s-1); }
.regime-criterion-edit__actions .r-btn-icon,
.regime-group-head--edit .r-btn-icon { color: var(--text-secondary); }
/* Drag & drop states (regime-reorder.js). */
.regime-criterion-edit.is-dragging { opacity: 0.45; background: var(--bg-muted); }
.regime-criterion-edit.is-drop-before { box-shadow: inset 0 3px 0 var(--brand-600); }
.regime-criterion-edit.is-drop-after { box-shadow: inset 0 -3px 0 var(--brand-600); }
.regime-criteria-group.is-drop-into { box-shadow: 0 0 0 2px var(--brand-600); }
.regime-criteria-editor.is-reordering { user-select: none; -webkit-user-select: none; }
/* Narrow editor (next to the README, iPad portrait, phone): the body moves to a second, full-width
   row — a container query, because the editor width depends on the split, not on the viewport. */
@container criteria-editor (max-width: 720px) {
    .regime-criterion-edit { grid-template-columns: 32px 112px 80px minmax(0, 1fr); }
    .regime-criterion-edit__points { grid-column: 3; grid-row: 1; }
    .regime-criterion-edit__actions { grid-column: 4; grid-row: 1; justify-self: end; }
    .regime-criterion-edit__body { grid-column: 2 / -1; grid-row: 2; }
}

.regime-criteria-editor {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    container: criteria-editor / inline-size;
}
.regime-criteria-group { overflow: hidden; }
.regime-group-head--edit {
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border-subtle);
}
.regime-group-head__input { flex: 1; min-width: 0; font-weight: 600; }
.regime-group-head--edit .r-btn-icon.is-active { color: var(--brand-700); }
[data-theme="dark"] .regime-group-head--edit .r-btn-icon.is-active { color: var(--brand-300); }
textarea.r-input.regime-group-note__input {
    display: block;
    width: calc(100% - 2 * var(--s-4));
    margin: var(--s-3) var(--s-4) 0;
    font-size: var(--t-small);
}
.regime-criteria-list { padding: var(--s-1) 0; }
.regime-criteria-list__empty { margin: 0; padding: var(--s-4); }
.regime-criteria-group__footer {
    padding: var(--s-2) var(--s-3);
    border-top: 1px solid var(--border-subtle);
}

/* Competency tags on a criterion: .r-chip (Codli.Design) + a × button and a compact "+ kompetencja" select. */
.regime-criterion-edit__tags { align-items: center; }
.regime-chip-remove {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    padding: 0;
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: inherit;
    font-size: var(--t-small);
    line-height: 1;
    cursor: pointer;
}
.regime-chip-remove:hover { background: var(--bg-muted); }
.regime-chip-remove:focus-visible { box-shadow: var(--shadow-focus-ring); outline: none; }
.regime-chip-select {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    height: 28px;
    padding: 0 var(--s-2);
    border: 1px dashed var(--border-default);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--t-caption);
}
/* „Sprawdzenie automatyczne” picker next to the competency chips (Regime 09); bound = analyzer pill colours. */
.regime-check-select.is-bound {
    border-style: solid;
    background: var(--status-progress-bg);
    color: var(--status-progress-fg);
}

/* Archived criteria (read-only, below the editor). */
.regime-archived { padding: var(--s-3) var(--s-4); }
.regime-archived__summary { cursor: pointer; font-size: var(--t-small); color: var(--text-secondary); }
.regime-archived__list {
    margin: var(--s-3) 0 0;
    padding-left: var(--s-5);
    font-size: var(--t-small);
    color: var(--text-secondary);
}

.regime-criteria-preview__head { padding: var(--s-3) var(--s-4); }
textarea.r-input.regime-paste-input { font-size: var(--t-small); }
/* Touch screens (iPad): the compact editor fields above would drop under 16 px, which makes Safari
   zoom on focus (Codli.Design ≥ 0.11.0 sets the 16 px floor for .r-input; these selectors are more
   specific, so they repeat it). The chip selects also grow to the 44 px touch target. */
@media (pointer: coarse) {
    textarea.r-input.regime-group-note__input,
    textarea.r-input.regime-paste-input,
    .regime-chip-select { font-size: max(16px, var(--t-body)); }
    .regime-chip-select { height: 44px; }
    /* Status link on the class board and links in report tables: 44 px tall rows of touch. */
    a.regime-repo-status,
    .regime-matrix a,
    .regime-report-table a,
    .regime-touch-link { display: inline-flex; align-items: center; min-height: 44px; }
    .regime-archived__summary { display: flex; align-items: center; min-height: 44px; }
    /* The 16 px "×" stays small inside the chip; the hit area grows to 44 px around it. */
    .regime-chip-remove { position: relative; }
    .regime-chip-remove::after { content: ""; position: absolute; inset: -14px; }
}
.regime-criteria-toolbar { flex-wrap: wrap; }
.regime-lock-alert { display: flex; gap: var(--s-2); align-items: flex-start; }
.regime-lock-alert svg { flex-shrink: 0; }

/* Template README next to the editor (scrolls on its own, sticky on wide screens). */
.regime-readme .r-section-header { flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.regime-readme .r-section-meta { overflow-wrap: anywhere; }
.regime-readme__body { max-height: 70dvh; overflow: auto; overscroll-behavior: contain; }
@media (min-width: 1024px) {
    .regime-readme { position: sticky; top: var(--s-4); }
}

/* Template repository search (wizard „Podstawy”). */
.regime-repo-search { flex: 1; min-width: 200px; }
.regime-repo-results {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
}
.regime-repo-result {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: 44px;
    padding: var(--s-2) var(--s-3);
    border: none;
    border-top: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.regime-repo-result:first-child { border-top: none; }
.regime-repo-result:hover { background: var(--bg-muted); }
.regime-repo-result.is-selected { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-600); }
[data-theme="dark"] .regime-repo-result.is-selected { background: var(--bg-muted); }
.regime-repo-result:focus-visible { box-shadow: var(--shadow-focus-ring); outline: none; }

/* Group assignment picker: checkbox + optional per-group due date. */
.regime-assign-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    min-height: 44px;
}
.regime-assign-row__due { width: auto; min-width: 210px; }

/* Wizard stepper: .r-tabs with numbered steps. */
.regime-stepper .r-tab { gap: var(--s-2); }
.regime-stepper__no {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--bg-muted);
    font-size: var(--t-caption);
    font-weight: 600;
}
.regime-stepper .r-tab.is-active .regime-stepper__no { background: var(--brand-700); color: var(--text-on-brand); }
.regime-stepper .r-tab.is-done .regime-stepper__no { background: var(--brand-100); color: var(--brand-800); }
.regime-wizard-form { max-width: 880px; }
.regime-wizard-nav { margin-top: var(--s-5); }

/* Key–value summary (wizard „Podsumowanie”, task „Przegląd”). */
.regime-summary {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--s-2) var(--s-5);
    margin: 0;
}
.regime-summary dt { color: var(--text-secondary); font-size: var(--t-small); }
.regime-summary dd { margin: 0; }

.regime-filters { margin-bottom: var(--s-4); }
.regime-dashboard-alerts { margin-bottom: var(--s-4); }

/* ============================================================
   GRADING BOARD, DASHBOARD TILES, DETAILS HISTORY (Regime 06)
   ============================================================ */
/* Board: avatar + name/username cell; counters above the table. */
.regime-board-student { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.regime-board-student strong { white-space: nowrap; }
.regime-board-summary { margin-bottom: var(--s-4); }
/* Dashboard tile: title column takes the space next to the due-date badge. */
.regime-tile__title { min-width: 0; flex: 1; }
/* History is text, not numbers: left-aligned entries under their timestamp. */
.regime-history { grid-template-columns: 1fr; gap: 0 var(--s-4); }
.regime-history dt { margin-top: var(--s-2); font-size: var(--t-caption); }
.regime-history dd { text-align: left; }
.regime-shortcuts dd { text-align: left; }
.regime-shortcuts .r-kbd + .r-kbd { margin-left: var(--s-1); }
.regime-clickable { cursor: pointer; }

/* Wizard "Kryteria" step: editor + template README side by side (spec: README next to the
   editor to copy requirements). The only two-column page area; collapses below 1024 px. */
.regime-split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--s-5);
    align-items: start;
}
@media (max-width: 1023px) {
    .regime-split { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   PUBLIC CRITERIA PAGE — /p/{token}, server-rendered (Razor Pages), no app shell.
   ============================================================ */
.regime-public-page {
    min-height: 100dvh;
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-sans);
}
.regime-public {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--s-10) var(--s-5) var(--s-16);
}
.regime-public__brand {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-8);
    font-size: var(--t-small);
    color: var(--text-tertiary);
}
.regime-public__brand img { width: 24px; height: 24px; }
.regime-public__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.regime-public__item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--t-body);
    line-height: var(--lh-normal);
}
.regime-public__item:first-child { border-top: none; }
.regime-public__points {
    font-size: var(--t-small);
    color: var(--text-tertiary);
    white-space: nowrap;
}
.regime-public__item--no-points { grid-template-columns: 64px minmax(0, 1fr); }
.regime-public__item-code {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
.regime-public__header { margin-bottom: var(--s-6); }
.regime-public__header h1 {
    margin: 0;
    font-size: var(--t-h1);
    line-height: var(--lh-tight);
}
.regime-public__code {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    color: var(--text-tertiary);
    margin-bottom: var(--s-1);
}
.regime-public__summary {
    margin: var(--s-2) 0 0;
    font-size: var(--t-small);
    color: var(--text-secondary);
}
.regime-public__description {
    margin-bottom: var(--s-6);
    line-height: var(--lh-relaxed);
}
.regime-public__description h2 { font-size: var(--t-h4); margin: var(--s-5) 0 var(--s-2); }
.regime-public__description p,
.regime-public__description ul { margin: 0 0 var(--s-3); }
.regime-public__group { margin-bottom: var(--s-5); }
.regime-public__group-title {
    margin: 0;
    font-size: var(--t-h4);
    line-height: var(--lh-snug);
}
.regime-public__note {
    margin: var(--s-2) 0 0;
    font-size: var(--t-small);
    color: var(--text-secondary);
}
.regime-public__empty,
.regime-public__footer {
    font-size: var(--t-small);
    color: var(--text-tertiary);
}
.regime-public__footer { margin-top: var(--s-8); }
@media (max-width: 480px) {
    .regime-public { padding: var(--s-6) var(--s-4) var(--s-12); }
    .regime-public__item { grid-template-columns: minmax(0, 1fr) auto; }
    .regime-public__item--no-points { grid-template-columns: minmax(0, 1fr); }
    .regime-public__item-code { grid-column: 1 / -1; }
}

/* Tab „Strona publiczna” of /tasks/{id} (Regime 07). */
.regime-public-url { overflow-wrap: anywhere; }
.regime-public-preview {
    display: block;
    max-width: 100%;
    height: auto;
}
/* Off-screen textarea of the clipboard fallback (js/regime-clipboard.js). */
.regime-offscreen {
    position: fixed;
    top: -9999px;
    left: -9999px;
}

/* ============================================================
   SCHOOL — sub-navigation of /school/* (Regime 02).
   .r-tab rendered as NavLink anchors.
   ============================================================ */
.regime-subnav { margin-bottom: var(--s-5); }
.regime-subnav .r-tab { text-decoration: none; }

/* ============================================================
   AGENTS — Settings → Agenci AI and agent proposals (Regime 08).
   .r-mcp-* copied from Rise (Client/wwwroot/css/app.css).
   ============================================================ */
.r-mcp-switcher {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.r-mcp-switcher-header h4 { margin: 0 0 var(--s-1) 0; }
.r-mcp-switcher-header p {
    margin: 0;
    font-size: var(--t-small);
    color: var(--text-secondary);
}
.r-mcp-config-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.r-mcp-config-path {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.r-mcp-config-code {
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-primary);
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}
.r-mcp-config-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
}
/* The one-time token wraps instead of scrolling: it is long and has to be selectable on an iPad. */
.regime-token-value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: all;
}
.regime-agent-badge { vertical-align: middle; }

/* Skills manager: list beside the editor, stacked on narrow screens. */
.regime-skills {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
}
.regime-skills__item {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    gap: var(--s-2);
}
.regime-skills__item.is-active { border-color: var(--brand-600); }
.regime-skills__body {
    max-height: 60vh;
    overflow: auto;
}
@media (max-width: 1023px) {
    .regime-skills { grid-template-columns: minmax(0, 1fr); }
}

/* Tab „Propozycje” of /tasks/{id}. */
.regime-proposal-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.regime-proposal-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: var(--s-2);
    align-items: baseline;
}
.regime-proposal-item__text { overflow-wrap: anywhere; }

/* ============================================================
   PROPOSAL REVIEW — "Szczegóły pracy" card „Propozycje agenta” (Regime 10).
   ============================================================ */
.regime-proposal {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border-subtle);
}
.regime-proposal .r-section-title { display: flex; align-items: center; gap: var(--s-2); }
.regime-proposal__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.regime-hint__text { color: var(--text-secondary); }
.regime-hint__agreement { font-size: var(--t-caption); opacity: 0.85; }
/* „Przejrzyj po kolei”: the item in focus. */
.regime-hint.is-current { box-shadow: 0 0 0 2px var(--status-pending-solid); }
@media (max-width: 640px) {
    .regime-hint { flex-wrap: wrap; }
    .regime-hint__actions { width: 100%; justify-content: flex-end; }
}
.regime-proposal-history summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

/* A file path that opens the code preview: looks like a link, is a 44 px button. */
.regime-link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    text-decoration: underline;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.regime-link-button:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--r-sm); }

/* Code preview modal (CodePreviewModal): numbered lines, evidence lines highlighted. */
.regime-code-preview__path { overflow-wrap: anywhere; }
.regime-code-preview {
    list-style: none;
    margin: 0;
    padding: var(--s-2) 0;
    max-height: 60vh;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-muted);
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    line-height: 1.6;
}
.regime-code-preview__line {
    display: grid;
    grid-template-columns: 4ch minmax(0, 1fr);
    gap: var(--s-3);
    padding: 0 var(--s-3);
}
.regime-code-preview__line code { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.regime-code-preview__no { text-align: right; color: var(--text-tertiary); user-select: none; }
.regime-code-preview__line.is-highlighted {
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
}

/* History card (Regime 10): criterion filter + CSV export above the timeline. */
.regime-history-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
}
.regime-history-tools .r-input { width: auto; min-width: 12rem; min-height: 44px; }
.regime-history__change { color: var(--text-secondary); }
/* Pending proposal badge on „Szczegóły” of the grading screen and the dashboard tiles (Regime 10). */
.r-badge svg { width: 12px; height: 12px; }
.r-btn .r-badge { margin-left: var(--s-1); }
.regime-proposal .r-section-title svg { width: 18px; height: 18px; color: var(--status-pending-fg); }

/* ============================================================
   REPORTS (Regime 11) — KPI tiles, percent meters, histogram and trend (inline SVG),
   the group matrix. Data widths come through custom properties (--value: 42%) or SVG
   attributes; colours only from tokens: met/charts --brand-600, not met --status-rejected-solid.
   ============================================================ */
.regime-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s-3);
}
.regime-kpi {
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-surface);
}
.regime-kpi__value {
    display: block;
    font-size: var(--t-h3);
    font-weight: 600;
    color: var(--text-primary);
    font-feature-settings: 'tnum';
}
.regime-kpi__label { display: block; font-size: var(--t-caption); color: var(--text-tertiary); }

/* One horizontal share bar with its value: criterion % not met, competency %. */
.regime-meter {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 140px;
}
.regime-meter__bar {
    flex: 1;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--bg-muted);
    overflow: hidden;
}
.regime-meter__fill {
    display: block;
    height: 100%;
    width: var(--value, 0%);
    background: var(--brand-600);
}
.regime-meter--notmet .regime-meter__fill { background: var(--status-rejected-solid); }
.regime-meter__label {
    min-width: 5ch;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    color: var(--text-secondary);
    font-feature-settings: 'tnum';
}

/* Charts: SVG scales to the card width; text uses the UI font and secondary text colour. */
.regime-chart { width: 100%; height: auto; display: block; overflow: visible; }
.regime-chart text {
    font-family: var(--font-sans);
    font-size: 12px;
    fill: var(--text-secondary);
    font-feature-settings: 'tnum';
}
.regime-chart .regime-chart__value { fill: var(--text-primary); font-weight: 600; }
.regime-chart__axis { stroke: var(--border-default); stroke-width: 1; }
.regime-chart__grid { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 2 4; }
.regime-chart__bar { fill: var(--brand-600); }
.regime-chart__bar--extra { fill: var(--text-tertiary); }
.regime-chart__line { fill: none; stroke: var(--brand-600); stroke-width: 2; stroke-linejoin: round; }
.regime-chart__dot { fill: var(--bg-surface); stroke: var(--brand-600); stroke-width: 2; }
.regime-chart__dot--open { stroke: var(--text-tertiary); stroke-dasharray: 2 2; }

/* Report tables: the criterion text may wrap, numbers do not. */
.regime-report-table td.regime-num,
.regime-report-table th.regime-num { text-align: right; white-space: nowrap; font-feature-settings: 'tnum'; }
.regime-report-table .regime-report-text { min-width: 16rem; }

/* Group matrix: students × tasks, first column sticky while scrolling sideways on an iPad. */
.regime-matrix th,
.regime-matrix td { text-align: center; white-space: nowrap; }
.regime-matrix th:first-child,
.regime-matrix td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    background: var(--bg-surface);
}
.regime-matrix thead th:first-child { background: var(--bg-muted); }
.regime-matrix tbody td a:has(.regime-matrix__grade) { display: block; text-decoration: none; }
.regime-matrix__grade { display: block; font-weight: 600; color: var(--text-primary); }
.regime-matrix__percent { display: block; font-size: var(--t-caption); color: var(--text-tertiary); }
.regime-matrix__cell--open .regime-matrix__grade { font-weight: 400; color: var(--text-tertiary); }
.regime-matrix tfoot td { font-weight: 600; border-top: 1px solid var(--border-default); }

/* Gradebook (Regime 14): the matrix above plus column headers with weight, draft grades and the
   averages column. The student column stays sticky; the table scrolls sideways inside .r-table-wrap. */
.regime-gradebook__filters { flex-wrap: wrap; align-items: center; }
.regime-gradebook__filters .r-input { width: auto; min-height: 44px; }
.regime-gradebook__toggle { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-secondary); cursor: pointer; }
.regime-gradebook thead th { vertical-align: bottom; }
.regime-gradebook__task { display: block; font-weight: 600; text-transform: none; letter-spacing: normal; }
.regime-gradebook__meta,
.regime-gradebook__weight { display: block; font-size: var(--t-caption); font-weight: 400; color: var(--text-tertiary); }
.regime-gradebook__weight--zero { text-decoration: line-through; }
.regime-gradebook__cell--draft .regime-matrix__grade { font-style: italic; color: var(--text-secondary); }
.regime-gradebook__marks { color: var(--text-secondary); }
.regime-gradebook__avg { font-weight: 700; font-feature-settings: 'tnum'; }
/* The average is what the teacher looks for: it stays pinned on the right like the student column on the left. */
.regime-gradebook th:last-child,
.regime-gradebook td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--bg-surface);
    box-shadow: inset 1px 0 0 var(--border-subtle);
}
.regime-gradebook thead th:last-child { background: var(--bg-muted); }
.regime-gradebook tbody tr:hover td { background: var(--bg-muted); }

.regime-report-pickers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-4);
}
.regime-link-list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.regime-plain-list { margin: 0; padding: 0; list-style: none; }
.regime-missing-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--s-2) var(--s-6);
}
/* A chart never grows past its natural size — labels stay readable on wide screens. */
.regime-chart-frame { max-width: 720px; }