/* ============================================================
   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; }

.regime-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.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);
}
.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);
}

/* ============================================================
   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;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100dvh;
    background: var(--bg-app);
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
}
.regime-grade-topbar {
    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;
    min-width: 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 {
    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 {
    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 — Android-style notice at the bottom centre, e.g. "Analiza zakończona".
   One at a time, auto-hides after 6 s, optional text actions (≥ 44 px). Rendered by a
   host in MainLayout and GradingLayout so it reaches the teacher on any screen.
   Inverse surface: dark on the light theme, light on the dark theme.
   ============================================================ */
.regime-snackbar-host {
    position: fixed;
    left: 0;
    right: 0;
    bottom: max(var(--s-4), env(safe-area-inset-bottom));
    z-index: 1100; /* above modals (.r-modal-backdrop = 1000) */
    display: flex;
    justify-content: center;
    padding: 0 var(--s-4);
    pointer-events: none;
}
/* On the grading screens stay above the 64 px bottom bar. */
.regime-grade .regime-snackbar-host {
    bottom: calc(64px + var(--s-3) + env(safe-area-inset-bottom));
}
.regime-snackbar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 48px;
    max-width: 640px;
    padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-sidebar);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-lg);
    font-size: var(--t-body);
    line-height: var(--lh-snug);
    animation: regime-snackbar-in var(--d-base) var(--ease-out);
}
[data-theme="dark"] .regime-snackbar {
    background: var(--ink-100);
    color: var(--ink-900);
}
.regime-snackbar__text { flex: 1; min-width: 0; padding: var(--s-2) 0; }
.regime-snackbar__action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-3);
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--brand-300);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}
[data-theme="dark"] .regime-snackbar__action { color: var(--brand-800); }
.regime-snackbar__action:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
@keyframes regime-snackbar-in {
    from { transform: translateY(16px); opacity: 0; }
}

/* 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-snackbar { animation: none; }
    .regime-spinner { animation-duration: 2.4s; }
}

/* ============================================================
   CRITERIA EDITOR — one editable row in the task wizard / task "Kryteria" tab.
   Columns: drag handle · code · text · points · actions.
   ============================================================ */
.regime-criterion-edit {
    display: grid;
    grid-template-columns: 32px 96px minmax(0, 1fr) 72px auto;
    gap: var(--s-2);
    align-items: center;
    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: 40px;
    color: var(--text-tertiary);
    cursor: grab;
    touch-action: none;
}
.regime-criterion-edit__code { font-family: var(--font-mono); }

/* 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;
}