/* ===== Reset i typografia ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Paleta: most na tokeny design systemu "Feedback"
   --------------------------------------------------------------------------
   Tokeny ładuje base.html z static/css/feedback-ds/tokens/*.css (kopia 1:1 z
   projektu Design — patrz README.md tam). Historyczne zmienne --color-* nie
   trzymają już własnych wartości, tylko wskazują na tokeny DS, więc cały
   arkusz przemalowuje się razem z systemem i nie ma dwóch źródeł prawdy.
   ========================================================================== */
:root {
    /* Dawny granat nagłówków. DS nie ma granatu — rolę "mocnego" koloru
       pełni --black (#16151A), którym obrysowane są też karty i przyciski.

       UWAGA (Issue #100): granat wrócił jako --text-primary (#202A44), ale
       tylko dla typografii. Ta zmienna została przy --black, bo poza tekstem
       trzyma też tła i ramki (skip-link, stopka, obrysy pól). Nagłówki i
       tytuły NIE korzystają już z niej — wskazują wprost na --text-primary,
       żeby granat nie rozlał się na elementy nietypograficzne. */
    --color-primary: var(--black);
    --color-primary-hover: var(--grey-900);

    /* Dawny koral CTA -> róż marki. Świadomie --brand-primary-hover
       (rose-600 #C22C4E), a nie --brand-primary (rose-500 #E23A5F): biały
       tekst na rose-500 daje 4,20:1, poniżej progu WCAG AA 4,5:1 dla tekstu
       o normalnej wielkości. rose-600 daje 5,60:1 przy tej samej roli. */
    --color-accent: var(--brand-primary-hover);
    --color-accent-hover: var(--brand-primary-active);

    /* Dawny fiolet przycisków drugorzędnych. DS nie ma fioletu — drugorzędny
       wariant Buttona to białe tło z czarną ramką, stąd czerń. */
    --color-secondary: var(--black);
    --color-secondary-hover: var(--grey-900);

    --color-bg: var(--bg-page);
    --color-text: var(--text-primary);
    --color-text-light: var(--text-secondary);
    --color-tile-bg: var(--surface-card);
    --color-tile-shadow: rgba(22, 21, 26, 0.06);
    --color-footer-bg: var(--bg-alt);

    --border-radius: var(--radius-l);
    --font-size-base: 1rem;
    --transition-speed: var(--duration-base);

    /* --- Rozszerzenia lokalne ---------------------------------------------
       Statusy (sukces / błąd / w toku / neutralny). DS ma tylko --success-*,
       a --success-500 na --success-100 to 2,68:1 — za mało na etykietę
       statusu, więc tekst zostaje na ciemnej zieleni (5,67:1). Reszta jest
       zbudowana z tokenów DS. Trzymamy to tutaj, a nie w tokens/, żeby
       kopia DS pozostała kopią 1:1. */
    --status-success-bg: var(--success-100);
    --status-success-fg: #1D6B38;
    --status-danger-bg: var(--danger-100);
    --status-danger-fg: var(--rose-700);
    --status-danger-border: var(--rose-200);
    --status-info-bg: var(--yellow-200);
    --status-info-fg: var(--grey-900);
    --status-neutral-bg: var(--surface-card-alt);
    --status-neutral-fg: var(--text-secondary);
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--lh-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--yellow-400);
    color: var(--black);
}

/* Nagłówki: krój wyświetleniowy (DM Serif Display, prosty — Issue #100)
   — tak jak <h1> na stronie głównej. Bez kursywy, wersalików i rozstrzelenia,
   których DS nie używa. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-heading);
    color: var(--text-primary);
}

h1 {
    line-height: var(--lh-tight);
}

/* ===== Focus widoczny (WCAG) ===== */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ===== Skip-link (opcjonalnie ukryty) ===== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--color-primary);
    color: var(--white);
    padding: 0.5rem 1rem;
}
.skip-link:focus {
    left: 0;
}

/* Cel skip-linku (programowo fokusowalny) nie powinien rysować obwódki
   wokół całej treści – elementy interaktywne zachowują własny fokus. */
#main-content:focus {
    outline: none;
}

/* ===== Nawigacja =====
   Menu górne jest wspólne z landingiem: znaczniki w templates/_topnav.html,
   style w static/css/topnav.css (linkowany po tym arkuszu). Stare reguły
   .nav-container/.nav-links/.nav-logo zostały usunięte razem ze starym menu. */

/* ===== Hero ===== */
.hero {
    text-align: center;
    padding: 4rem 1.5rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.hero h1 {
    font-size: 3rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.hero p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Kafelki – strona główna (2x2) ===== */
.tiles-section {
    padding: 1.5rem 1.5rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.tiles-heading {
    text-align: center;
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
}

.tiles-subheading {
    text-align: center;
    margin: 0 auto 1.75rem;
    max-width: 48rem;
    font-size: 1rem;
    line-height: 1.5;
}

.tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

.tile {
    background: var(--color-tile-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px var(--color-tile-shadow);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow var(--transition-speed), transform var(--transition-speed);
}

.tile:hover {
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.12);
    transform: translateY(-2px);
}

/* h3 – kafelki na podstronie /funkcje, gdzie nagłówek sekcji zajmuje już h2,
   a kafelek jest o poziom niżej w hierarchii. Wygląd bez zmian. */
.tile-content h2,
.tile-content h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.tile-content p {
    color: var(--color-text-light);
    margin-bottom: 1rem;
    line-height: 1.65;
}

/* Cena planu na /cennik (Issue #146) - wyeksponowana: duża liczba, mniejsza
   waluta obok na tej samej linii bazowej (wzorem brand24.pl/cennik). */
.plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.25rem 0 1.25rem;
}

.plan-price-amount {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text-primary);
}

.plan-price-currency {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-light);
}

/* Lista cech planu pod ceną (Issue #146) - liczba minut, długość ważności
   i orientacyjna liczba rozmów, każda pozycja z odhaczeniem zamiast
   gołego akapitu. */
.plan-features {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.plan-features li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

.plan-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
    font-weight: 700;
}

.tile-link {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    padding: 0.7rem 1.6rem;
    color: var(--color-primary);
    background-color: var(--color-tile-bg);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-tile-shadow);
    box-shadow: 0 4px 16px var(--color-tile-shadow);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed);
}

.tile-link:hover,
.tile-link:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.12);
    text-decoration: none;
    transform: translateY(-2px);
}

/* CTA w kafelku podstrony */
.tile-cta {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.75rem 1.8rem;
    background-color: var(--color-secondary);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.tile-cta:hover,
.tile-cta:focus-visible {
    background-color: var(--color-secondary-hover);
    transform: translateY(-1px);
}

/* ===== Kafelki – podstrona (2 obok siebie) ===== */
.subpage-tiles {
    padding: 1.5rem 1.5rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.subpage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

/* /cennik (Issue #146): 3 plany w jednym rzędzie zamiast domyślnych 2 kolumn
   .subpage-grid (co dawałoby układ 2+1). Poniżej progu 768px wraca do 1
   kolumny razem z resztą .subpage-grid w media query niżej. */
.cennik-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ===== Footer ===== */
footer {
    background-color: var(--color-primary);
    margin-top: auto;
    padding: 3rem 1.5rem 1.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

.footer-logo {
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
}

.footer-tagline {
    margin: 0.75rem 0 0;
    max-width: 22rem;
    line-height: 1.6;
}

.footer-nav-title {
    margin: 0 0 1rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--transition-speed);
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--white);
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.5rem;
    font-size: 0.85rem;
}

.footer-bottom p {
    margin: 0;
}

@media (max-width: 600px) {
    footer {
        padding-top: 2.5rem;
    }

    .footer-top {
        flex-direction: column;
        gap: 2rem;
        padding-bottom: 2rem;
    }
}

/* ===== Panel dostępności ===== */
.a11y-toggle-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    width: 48px;
    height: 48px;
    background-color: var(--color-primary);
    color: var(--white);
    border: none;
    border-radius: 0.5rem 0 0 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed);
}

.a11y-toggle-btn:hover,
.a11y-toggle-btn:focus-visible {
    background-color: var(--color-accent);
}

.a11y-panel {
    position: fixed;
    right: -320px;
    top: 0;
    width: 300px;
    height: 100%;
    background: var(--white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: right var(--transition-speed) ease;
    padding: 1.5rem;
    overflow-y: auto;
}

.a11y-panel.open {
    right: 0;
}

.a11y-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.a11y-panel-header h2 {
    font-size: 1.2rem;
    color: var(--text-primary);
}

.a11y-close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--color-text);
    line-height: 1;
}

.a11y-options {
    list-style: none;
}

.a11y-options li {
    margin-bottom: 0.5rem;
}

.a11y-options button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-footer-bg);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
    transition: border-color var(--transition-speed), background-color var(--transition-speed);
}

.a11y-options button:hover,
.a11y-options button:focus-visible {
    border-color: var(--color-primary);
    background-color: var(--grey-200);
}

.a11y-options button.active {
    border-color: var(--color-primary);
    background-color: var(--surface-rose);
    font-weight: 600;
}

/* ===== Klasy dostępności (dodawane przez JS) =====
   Cały arkusz stoi teraz na tokenach DS, więc wysoki kontrast to po prostu
   przemapowanie tokenów, a nie lista wyjątków per komponent. Zysk uboczny:
   działa też na stronach agenta (agent.css), które wcześniej miały kolory
   zaszyte na sztywno i tryb wysokiego kontrastu ich nie dotykał.
   Zestaw identyczny jak w landing.css — obie warstwy mają wyglądać tak samo. */
body.high-contrast {
    --black: #FFFFFF;
    --bg-page: #000000;
    --bg-alt: #000000;
    --surface-card: #1A1A1A;
    --surface-card-alt: #1A1A1A;
    --surface-rose: #1A1A1A;
    --text-primary: #FFFFFF;
    --text-secondary: #E0E0E0;
    --text-muted: #E0E0E0;
    --border-subtle: #FFFFFF;
    --border-default: #FFFFFF;
    --border-strong: #FFFFFF;
    --grey-100: #1A1A1A;
    --grey-200: #2A2A2A;
    --grey-900: #FFFFFF;
    --rose-100: #1A1A1A;
    --rose-200: #2A2A2A;
    --rose-600: #FF9DB2;
    --rose-700: #FF9DB2;
    --brand-primary: #FFFFFF;
    --brand-primary-hover: #FFFFFF;
    --brand-primary-active: #E0E0E0;
    --focus-ring: #F2D93B;
    --color-tile-shadow: rgba(255, 255, 255, 0.05);

    --status-success-bg: #0F2A19;
    --status-success-fg: #7FE0A6;
    --status-danger-bg: #2A0F16;
    --status-danger-fg: #FF9DB2;
    --status-danger-border: #FF9DB2;
    --status-info-bg: #2A2610;
    --status-info-fg: #F4E9B8;
    --status-neutral-bg: #1A1A1A;
    --status-neutral-fg: #E0E0E0;
}

body.high-contrast footer {
    background-color: #000000;
}

/* Przyciski marki: na czerni biały tekst na różu ma za mały kontrast,
   więc odwracamy je na biel/czerń. */
body.high-contrast .tile-link,
body.high-contrast .tile-cta,
body.high-contrast .signup-submit,
body.high-contrast .profile-form-submit,
body.high-contrast .partner-cta,
body.high-contrast .auth-magic-link-btn,
body.high-contrast .recruitment-new-link,
body.high-contrast .recruitment-list-item-simulation,
body.high-contrast .recruitment-detail-simulation {
    background-color: #FFFFFF;
    color: #000000;
    border-color: #FFFFFF;
}

/* Karta logowania i przyciski dostawców mają normalnie białe tło - bez
   odwrócenia etykiety byłyby białym tekstem na białym tle. Ramkę ma już
   tylko przycisk dostawcy (karta jest płaska, Issue #80). */
body.high-contrast .auth-login-card,
body.high-contrast .auth-microsoft-btn,
body.high-contrast .auth-google-btn {
    background: var(--surface-card);
    border-color: #FFFFFF;
    color: var(--text-primary);
}

body.high-contrast .auth-microsoft-btn:hover,
body.high-contrast .auth-microsoft-btn:focus-visible,
body.high-contrast .auth-google-btn:hover,
body.high-contrast .auth-google-btn:focus-visible {
    background: #2A2A2A;
}

body.high-contrast .auth-login-title {
    color: var(--text-primary);
}

body.underline-links a {
    text-decoration: underline !important;
}

body.reduced-motion,
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    animation: none !important;
    transition: none !important;
}

body.reduced-motion .tile:hover {
    transform: none;
}

/* ===== Sekcja Pomysł ===== */
.idea-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    width: 100%;
}

.idea-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.idea-line {
    flex: 1;
    border: none;
    border-top: 3px solid var(--color-secondary);
}

.idea-icon {
    font-size: 2rem;
    line-height: 1;
}

.idea-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.idea-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

.idea-card {
    background: var(--color-tile-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px var(--color-tile-shadow);
    padding: 2rem 1.5rem;
    border-left: 4px solid var(--color-secondary);
    transition: box-shadow var(--transition-speed), transform var(--transition-speed);
}

.idea-card:hover {
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.12);
    transform: translateY(-2px);
}

.idea-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.idea-card p {
    color: var(--color-text-light);
    line-height: 1.65;
}

/* ===== Sekcja Newsy / rynek pracy ===== */
.news-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    width: 100%;
}

.news-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.news-line {
    flex: 1;
    border: none;
    border-top: 3px solid var(--color-accent);
}

.news-icon {
    font-size: 2rem;
    line-height: 1;
}

.news-heading {
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.news-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.news-subtitle-secondary {
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.news-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.news-feed {
    display: flex;
    gap: 1.75rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.news-feed.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.news-feed::-webkit-scrollbar {
    height: 8px;
}

.news-feed::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 4px;
}

.news-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: var(--color-tile-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px var(--color-tile-shadow);
    padding: 1.75rem 1.5rem;
    border-left: 4px solid var(--color-accent);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-speed), transform var(--transition-speed);
}

.news-card:hover {
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.12);
    transform: translateY(-2px);
}

.news-date {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.news-card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.news-card-text {
    color: var(--color-text-light);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.news-card-link {
    margin-top: auto;
    align-self: flex-start;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--transition-speed);
}

.news-card-link:hover,
.news-card-link:focus-visible {
    color: var(--color-secondary-hover);
    text-decoration: underline;
}

.news-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-light);
    font-style: italic;
    padding: 1.5rem 0;
}

/* ===== Zapis na powiadomienie o starcie ===== */
.signup-section {
    padding: 2rem 1.5rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.signup-card {
    background: var(--color-footer-bg);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: 0 4px 20px var(--color-tile-shadow);
}

.signup-title {
    color: var(--color-primary);
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.signup-intro {
    color: var(--color-text-light);
    margin-bottom: 1.75rem;
    text-align: center;
}

.signup-messages {
    margin-bottom: 1.5rem;
}

.signup-message {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.signup-message--success {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.signup-message--error {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.signup-form .form-field {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
}

.signup-form label {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
}

.signup-form input[type="email"],
.signup-form input[type="text"],
.signup-form textarea {
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text);
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    background: var(--color-bg);
    width: 100%;
}

.signup-form input:focus-visible,
.signup-form textarea:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
    border-color: var(--color-secondary);
}

.signup-form textarea {
    resize: vertical;
}

.required-mark {
    color: var(--color-accent);
}

/* Issue #158: słowo/fraza wyróżnione kolorem marki wewnątrz zwykłego akapitu -
   ten sam kolor akcentu co reszta serwisu (np. .required-mark powyżej),
   dodatkowo pogrubiony. Odpowiednik .section-heading__accent z landing.css,
   tylko dostępny globalnie (landing.css ładuje się tylko na stronie głównej). */
.text-accent {
    color: var(--color-accent);
    font-weight: 700;
}

.form-consent {
    margin-bottom: 1.25rem;
}

.consent-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    font-weight: 400;
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.5;
}

.consent-item input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
}

.signup-note {
    font-size: 0.88rem;
    color: var(--color-text-light);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.signup-submit {
    display: inline-block;
    background: var(--color-tile-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-tile-shadow);
    box-shadow: 0 4px 16px var(--color-tile-shadow);
    border-radius: var(--border-radius);
    padding: 0.85rem 2.2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed);
}

.signup-submit:hover,
.signup-submit:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.12);
    transform: translateY(-2px);
}

/* ===== Logowanie ===== */
.auth-login-section {
    padding: 3rem 1.5rem 4rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.auth-login-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 4px 20px var(--color-tile-shadow);
    text-align: center;
}

.auth-login-title {
    color: var(--text-primary);
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.auth-login-intro {
    color: var(--color-text-light);
    margin-bottom: 1.75rem;
}

.auth-login-messages {
    margin-bottom: 1.5rem;
}

.auth-login-message {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.auth-login-message--success {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.auth-login-message--error {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.auth-provider-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Logotypy dostawców (static/microsoft_logo.png, static/google_logo.png) mają
   nieprzezroczyste, białe tło, które zlewa się z białym przyciskiem - stąd brak
   dodatkowej "plakietki" pod obrazkiem. */
.auth-provider-logo {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    object-fit: contain;
}

/* Oba przyciski logowania: białe tło i czarna ramka, zgodnie z wytycznymi
   Microsoftu i Google dla przycisków "Sign in with" (kolorowy logotyp na
   neutralnym tle). Rozróżnia je logotyp i etykieta, nie kolor wypełnienia,
   więc oba dzielą te same reguły. */
.auth-microsoft-btn,
.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    background: var(--white);
    border: 1px solid #000000;
    color: var(--color-text);
    border-radius: var(--border-radius);
    padding: 0.85rem 1.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background var(--transition-speed);
}

.auth-microsoft-btn:hover,
.auth-microsoft-btn:focus-visible,
.auth-google-btn:hover,
.auth-google-btn:focus-visible {
    background: var(--color-footer-bg);
}

.auth-login-divider {
    color: var(--color-text-light);
    margin: 1.75rem 0;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: var(--tracking-wide);
}

.auth-magic-link-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}

.auth-magic-link-label {
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.auth-magic-link-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-tile-shadow);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 1rem;
    box-sizing: border-box;
}

/* Kod logowania (Issue #151) ma "rzucać się w oczy" na stronie tak samo, jak
   w treści e-maila (patrz email_client.py::send_login_code_email) - większa
   czcionka o stałej szerokości i odstępy między cyframi ułatwiają przepisanie
   go bez pomyłki. */
.auth-magic-link-code-input {
    font-family: var(--font-mono, monospace);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-align: center;
}

.auth-magic-link-btn {
    display: inline-block;
    background: var(--color-primary);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    padding: 0.85rem 2.2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.auth-magic-link-btn:hover,
.auth-magic-link-btn:focus-visible {
    background: var(--color-primary-hover);
}

/* ===== Strona „Dla Partnerów" ===== */
.partner-hero {
    text-align: center;
    padding: 4rem 1.5rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.partner-hero h1 {
    font-size: 2.75rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

.partner-hero-sub {
    font-size: 1.15rem;
    color: var(--color-text-light);
    max-width: 680px;
    margin: 0 auto 2rem;
}

/* CTA Partnera – fioletowy przycisk */
.partner-cta {
    display: inline-block;
    padding: 0.9rem 2.4rem;
    background-color: var(--color-secondary);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.partner-cta:hover,
.partner-cta:focus-visible {
    background-color: var(--color-secondary-hover);
    transform: translateY(-1px);
}

.partner-intro {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
    width: 100%;
}

.partner-intro-card {
    background: var(--color-footer-bg);
    border-radius: var(--border-radius);
    border-top: 4px solid var(--color-secondary);
    padding: 2.5rem;
    max-width: 760px;
    margin: 0 auto;
    box-shadow: 0 4px 20px var(--color-tile-shadow);
    text-align: center;
}

.partner-intro-card p {
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: 1.7;
}

.partner-intro-card p:last-child {
    margin-bottom: 0;
}

.partner-benefits-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    width: 100%;
}

/* Fioletowy separator dla sekcji Partnerów */
.partner-line {
    flex: 1;
    border: none;
    border-top: 3px solid var(--color-secondary);
}

.partner-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.partner-benefit {
    background: var(--color-tile-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px var(--color-tile-shadow);
    border-top: 4px solid var(--color-secondary);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: box-shadow var(--transition-speed), transform var(--transition-speed);
}

.partner-benefit:hover {
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.12);
    transform: translateY(-2px);
}

.partner-benefit h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.partner-benefit p {
    color: var(--color-text-light);
    line-height: 1.65;
}

.partner-disclaimer {
    margin-top: 1.5rem;
    font-style: italic;
}

.partner-contact-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem 4rem;
    width: 100%;
}

.partner-contact-card {
    background: var(--color-secondary);
    border-radius: var(--border-radius);
    padding: 3rem 2rem;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.18);
}

.partner-contact-card h2 {
    color: var(--white);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.partner-contact-card p {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.75rem;
    line-height: 1.7;
}

.partner-contact-card .partner-cta {
    background-color: var(--white);
    color: var(--color-secondary);
}

.partner-contact-card .partner-cta:hover,
.partner-contact-card .partner-cta:focus-visible {
    background-color: var(--color-footer-bg);
    color: var(--color-secondary-hover);
}

/* Karta oferty przykładowej – etykieta zamiast aktywnego linku */
.news-card .news-card-link[aria-hidden="true"] {
    color: var(--color-text-light);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    cursor: default;
}

/* High-contrast: utrzymanie czytelnego kontrastu na karcie kontaktu */
body.high-contrast .partner-contact-card {
    border: 2px solid var(--white);
}

/* ===== Responsywność ===== */
@media (max-width: 768px) {
    .tiles-grid,
    .subpage-grid,
    .idea-grid,
    .partner-benefits-grid {
        grid-template-columns: 1fr;
    }

    .partner-hero h1 {
        font-size: 1.9rem;
    }

    .partner-hero-sub {
        font-size: 1rem;
    }

    .partner-intro-card,
    .partner-contact-card {
        padding: 1.75rem 1.25rem;
    }

    .signup-card {
        padding: 1.75rem 1.25rem;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .a11y-panel {
        width: 260px;
        right: -280px;
    }
}

/* ===== Formularz uzupełnienia profilu (Issue #32) ===== */
.profile-form-section {
    padding: 3rem 1.5rem 4rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.profile-form-card {
    background: var(--color-footer-bg);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    max-width: 640px;
    margin: 0 auto;
    box-shadow: 0 4px 20px var(--color-tile-shadow);
}

/* Szerszy wariant karty formularza - mieści obok siebie pola "Link do
   ogłoszenia" i "Opis stanowiska" (rekrutacja). Nie dotyczy formularza
   profilu, który korzysta z domyślnej, węższej karty. */
.profile-form-card--wide {
    max-width: 900px;
}

.recruitment-source-row {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
}

.recruitment-source-field {
    flex: 1 1 0;
    min-width: 0;
}

.recruitment-source-or {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: stretch;
    padding-bottom: 1.25rem;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-primary);
}

@media (max-width: 720px) {
    .recruitment-source-row {
        flex-direction: column;
        gap: 0;
    }

    .recruitment-source-or {
        align-self: center;
        padding: 0 0 1.25rem;
    }
}

.profile-form-title {
    color: var(--text-primary);
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.profile-form-intro {
    color: var(--color-text-light);
    margin-bottom: 1.75rem;
}

.profile-form-messages {
    margin-bottom: 1.5rem;
}

.profile-form-message {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.profile-form-message--success {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.profile-form-message--error {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.profile-form .form-field {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
}

.profile-form label,
.profile-form legend {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
    padding: 0;
}

.profile-form input[type="text"],
.profile-form input[type="url"],
.profile-form input[type="email"],
.profile-form input[type="date"],
.profile-form input[type="datetime-local"],
.profile-form select,
.profile-form textarea {
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text);
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    background: var(--color-bg);
    width: 100%;
}

.profile-form .form-field-hint {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-light);
}

.profile-form input:focus-visible,
.profile-form select:focus-visible,
.profile-form textarea:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
    border-color: var(--color-secondary);
}

.profile-form textarea {
    resize: vertical;
}

.profile-form-submit {
    display: inline-block;
    background: var(--color-tile-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-tile-shadow);
    box-shadow: 0 4px 16px var(--color-tile-shadow);
    border-radius: var(--border-radius);
    padding: 0.85rem 2.2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed);
}

.profile-form-submit:hover,
.profile-form-submit:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.12);
    transform: translateY(-2px);
}

.profile-form-back-link {
    margin-bottom: 1.25rem;
}

.profile-form-back-link a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ===== Profil – podgląd (Issue #33) ===== */
.profile-view-section {
    padding: 3rem 1.5rem 4rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.profile-view-card {
    background: var(--surface-card);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    max-width: 640px;
    margin: 0 auto;
}

.profile-account-panel {
    background: var(--surface-card);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.profile-account-panel-title {
    color: var(--text-primary);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.profile-account-panel-text {
    color: var(--color-text-light);
    margin-bottom: 0.6rem;
}

/* Wyliczenie kasowanych kategorii danych (Issue #113) - w panelu
   ostrzegawczym "To jest nieodwracalne". */
.profile-account-panel-list {
    color: var(--color-text-light);
    margin: 0 0 0.6rem 1.25rem;
    padding-left: 0;
    list-style: disc;
}

.profile-account-panel-list li {
    margin-bottom: 0.3rem;
}

.profile-account-id-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-account-id {
    background: var(--color-footer-bg);
    border-radius: 0.5rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.95rem;
    word-break: break-all;
}

.profile-copy-btn {
    background: var(--color-secondary);
    color: var(--white);
    border: none;
    border-radius: 0.5rem;
    padding: 0.4rem 0.9rem;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.profile-copy-btn:hover,
.profile-copy-btn:focus-visible {
    background: var(--color-secondary-hover);
}

.profile-copy-status {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-light);
    min-height: 1.1em;
}

.profile-view-fields {
    margin-bottom: 1.5rem;
}

.profile-view-field {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.profile-view-field dt {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
}

.profile-view-field dd {
    color: var(--color-text);
    margin: 0;
}

.profile-view-updated {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.profile-view-edit-link {
    text-decoration: none;
    display: inline-block;
}

.profile-view-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.profile-view-payments-link {
    color: var(--color-accent);
    text-decoration: underline;
}

.profile-view-payments-link:hover,
.profile-view-payments-link:focus-visible {
    color: var(--color-accent-hover);
}

/* ===== Subskrypcja - podgląd profilu (Issue #36) ===== */
.profile-subscription-panel {
    background: var(--color-bg);
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.subscription-cancel-confirm {
    background: var(--color-footer-bg);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
}

.subscription-cancel-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.subscription-cancel-confirm-btn {
    background: var(--status-danger-fg);
    color: var(--white);
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.subscription-cancel-confirm-btn:hover,
.subscription-cancel-confirm-btn:focus-visible {
    background: var(--rose-700);
}

.subscription-cancel-dismiss-btn {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.subscription-cancel-dismiss-btn:hover,
.subscription-cancel-dismiss-btn:focus-visible {
    background: var(--color-footer-bg);
}

/* ===== Doładowanie minut - formularz (Issue #137) =====
   Zastępuje goły <input type="number"> steperem +/-, presetami najczęstszych
   ilości i podglądem ceny na bieżąco (static/js/billing.js). */
.topup-form-field {
    margin-bottom: 1.5rem;
}

.topup-form-field > label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.topup-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--surface-card);
}

.topup-stepper-btn {
    width: 2.75rem;
    border: none;
    background: var(--surface-card-alt);
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.topup-stepper-btn:hover,
.topup-stepper-btn:focus-visible {
    background: var(--surface-rose);
}

.topup-stepper-btn:active {
    transform: scale(0.96);
}

.topup-input {
    width: 6rem;
    border: none;
    border-left: 1px solid var(--border-default);
    border-right: 1px solid var(--border-default);
    text-align: center;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    padding: 0.6rem 0.5rem;
    -moz-appearance: textfield;
    appearance: textfield;
}

.topup-input::-webkit-outer-spin-button,
.topup-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.topup-input:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: -2px;
}

.topup-hint {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.topup-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.topup-preset-btn {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-speed), border-color var(--transition-speed);
}

.topup-preset-btn:hover,
.topup-preset-btn:focus-visible {
    background: var(--surface-rose);
    border-color: var(--color-accent);
}

.topup-total {
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

/* ===== Historia płatności (Issue #35) ===== */
.payment-history-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

.payment-history-table {
    width: 100%;
    border-collapse: collapse;
}

.payment-history-table th,
.payment-history-table td {
    text-align: left;
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.payment-history-table th {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.payment-history-table td {
    color: var(--color-text);
}

.payment-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.payment-status--succeeded,
.payment-status--free_grant {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.payment-status--failed {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.payment-status--refunded {
    background: var(--surface-card-alt);
    color: var(--color-text-light);
}

/* ---------- Strona klauzuli RODO / strony prawne ---------- */
.consent-item a {
    color: var(--color-accent);
    text-decoration: underline;
}

.consent-item a:hover {
    color: var(--color-accent-hover);
}

.legal-page {
    padding: 3rem 1.5rem 4rem;
}

.legal-container {
    max-width: 760px;
    margin: 0 auto;
    color: var(--color-text);
    line-height: 1.65;
}

.legal-container h1 {
    color: var(--text-primary);
    font-size: 1.9rem;
    margin-bottom: 1.5rem;
}

.legal-container h2 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-container .legal-meta {
    font-weight: 600;
    margin-bottom: 2rem;
}

.legal-container h3 {
    color: var(--text-primary);
    font-size: 1.05rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-container p {
    margin-bottom: 1rem;
}

.legal-container ul,
.legal-container ol {
    margin: 0 0 1rem 1.5rem;
    padding-left: 0.5rem;
}

.legal-container li {
    margin-bottom: 0.4rem;
}

/* Zagnieżdżone wyliczenia w regulaminie (Issue #51): punkty wewnątrz
   numerowanego ustępu nie potrzebują dodatkowego odstępu na dole ustępu. */
.legal-container li > ul,
.legal-container li > ol {
    margin-top: 0.4rem;
    margin-bottom: 0;
}

.legal-container li > p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.legal-container a {
    color: var(--color-accent);
    text-decoration: underline;
}

.legal-container a:hover {
    color: var(--color-accent-hover);
}

/* Tabela kategorii cookies (Issue #67). Opakowanie przewija się poziomo, żeby
   trzy kolumny nie rozpychały strony na wąskich ekranach. */
.legal-table-wrap {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--border-subtle);
}

.legal-table thead th {
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

.legal-table tbody th {
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Blog - lista wpisów i pojedynczy wpis (Issue #84) ===== */
/* Typografia korpusu wpisu celowo dziedziczy proporcje ze stron prawnych
   (.legal-container): ta sama szerokość kolumny i interlinia, sprawdzone już
   na długim tekście czytanym od góry do dołu. */
.blog-page {
    padding: 3rem 1.5rem 4rem;
}

.blog-container {
    max-width: 760px;
    margin: 0 auto;
    color: var(--color-text);
    line-height: 1.65;
}

.blog-header {
    margin-bottom: 2.5rem;
}

.blog-container h1 {
    color: var(--text-primary);
    font-size: 1.9rem;
    margin-bottom: 1rem;
}

/* H1 listy wpisów to całe zdanie (Issue #106), a nie jedno słowo, więc jest
   mniejszy i ciaśniej złożony niż tytuł pojedynczego wpisu - inaczej cztery
   wiersze kroju szeryfowego w 1.9rem przytłaczają pierwszy ekran listy. */
.blog-container .blog-list-h1 {
    font-size: 1.5rem;
    line-height: 1.35;
    text-wrap: balance;
    /* Odstęp do listy wpisów niesie w całości .blog-header. */
    margin-bottom: 0;
}

/* Wyróżnienie nagłówka bloga i tytułów wpisów samą grubością kroju - bez
   linii i ramek, które rozbijały kolumnę tekstu. Reguła nadpisuje wagę 400
   ustawioną globalnie dla h1-h6. Uwaga: DM Serif Display ma tylko jedną wagę
   (400), więc przeglądarka pogrubia go syntetycznie; dla samych tytułów jest
   to akceptowalne, ale gdyby efekt był za miękki, alternatywą jest przejście
   tych nagłówków na Manrope (--font-body), który ma prawdziwe 700/800. */
.blog-header h1,
.blog-card-title,
.blog-article-header h1 {
    font-weight: 700;
}

/* --- Lista wpisów --- */
/* <ol> niesie kolejność chronologiczną, ale wizualnie to karty jedna pod
   drugą, więc bez numeracji i wcięcia listy. */
.blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-list-item + .blog-list-item {
    border-top: 1px solid var(--border-subtle);
    margin-top: 2rem;
    padding-top: 2rem;
}

.blog-card-date {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.blog-card-title {
    color: var(--text-primary);
    font-size: 1.35rem;
    margin: 0 0 0.75rem;
}

.blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card-title a:hover,
.blog-card-title a:focus-visible {
    text-decoration: underline;
}

.blog-card-lead {
    margin-bottom: 0.9rem;
}

.blog-card-more {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.blog-card-more:hover,
.blog-card-more:focus-visible {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.blog-empty {
    color: var(--color-text-light);
}

/* --- Pojedynczy wpis --- */
.blog-breadcrumb {
    margin-bottom: 1.5rem;
}

.blog-breadcrumb a {
    color: var(--color-accent);
    font-size: 0.9rem;
    text-decoration: none;
}

.blog-breadcrumb a:hover,
.blog-breadcrumb a:focus-visible {
    text-decoration: underline;
}

.blog-article-header {
    margin-bottom: 2rem;
}

.blog-article-lead {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1rem;
}

.blog-toc {
    background: var(--surface-card-alt);
    border-radius: var(--radius-m);
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.5rem;
}

.blog-toc-title {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

.blog-toc ol {
    margin: 0 0 0 1.25rem;
    padding-left: 0.25rem;
}

.blog-toc li {
    margin-bottom: 0.35rem;
}

.blog-toc a {
    color: var(--color-accent);
    text-decoration: none;
}

.blog-toc a:hover,
.blog-toc a:focus-visible {
    text-decoration: underline;
}

.blog-body h2 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.blog-body h3 {
    color: var(--text-primary);
    font-size: 1.05rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.blog-body p {
    margin-bottom: 1rem;
}

.blog-body ul,
.blog-body ol {
    margin: 0 0 1rem 1.5rem;
    padding-left: 0.5rem;
}

.blog-body li {
    margin-bottom: 0.5rem;
}

.blog-body li > p {
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}

.blog-body a {
    color: var(--color-accent);
    text-decoration: underline;
}

.blog-body a:hover {
    color: var(--color-accent-hover);
}

/* Przykładowe wypowiedzi kandydata i rekrutera (Issue #107). Wpisy cytują
   całe zdania do powiedzenia na rozmowie, więc muszą odcinać się od komentarza
   redakcji - stąd belka z lewej i wcięcie zamiast domyślnego marginesu
   przeglądarki, który wyglądałby jak przypadkowe przesunięcie akapitu. */
.blog-body blockquote {
    margin: 0 0 1rem;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--border-subtle);
    color: var(--color-text-light);
}

.blog-body blockquote p:last-child {
    margin-bottom: 0;
}

/* Tabele porównawcze we wpisie (Issue #85). Opakowanie przewija się poziomo,
   żeby szeroka tabela nie rozpychała kolumny tekstu na wąskim ekranie. */
.blog-table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.blog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.blog-table caption {
    text-align: left;
    font-size: 0.85rem;
    color: var(--color-text-light);
    padding-bottom: 0.5rem;
}

.blog-table th,
.blog-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--border-subtle);
}

.blog-table thead th {
    color: var(--color-primary);
    font-weight: 600;
}

.blog-table tbody th {
    font-weight: 600;
}

/* Kotwice ze spisu treści: nagłówek nie może wylądować pod przyklejonym
   menu górnym po skoku z linku. */
.blog-body h2[id],
.blog-body h3[id] {
    scroll-margin-top: 5rem;
}

/* Przypis ze źródłem danych przywołanych we wpisie (Issue #104). Stoi na
   końcu korpusu, więc odróżniamy go od artykułu mniejszym stopniem pisma
   i szarym kolorem - tak jak stopkę redakcyjną poniżej, ale bez linii, bo
   ta rysuje się już nad notą redakcyjną i dwie z rzędu ciążą układowi. */
.blog-body .blog-source {
    margin-top: 2rem;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

/* Stopka redakcyjna wpisu (Issue #105). Wyraźnie oddzielona od korpusu
   linią i mniejszym stopniem pisma - to nota o autorstwie i podstawie tekstu,
   a nie dalszy ciąg artykułu.

   Uwaga: to <footer> wewnątrz <article>, więc łapie globalną regułę
   "footer { background-color: var(--color-primary) }" pisaną dla stopki
   całej strony. Dlatego jawnie przywracamy tu tło i marginesy strony -
   inaczej nota siedzi na ciemnym prostokącie, na którym ciemny tekst
   praktycznie znika. */
.blog-editorial-note {
    background-color: var(--color-bg);
    margin: 2.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: var(--border-w) solid var(--border-subtle);
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.blog-editorial-note p {
    margin-bottom: 0.5rem;
}

.blog-editorial-note p:last-child {
    margin-bottom: 0;
}

.blog-editorial-note-title {
    color: var(--text-primary);
}

/* Nawigacja do sąsiednich wpisów na dole strony (Issue #89). Dwie kolumny
   niezależne od tego, ilu sąsiadów wpis ma: "następny" zawsze siedzi w
   prawej kolumnie, więc przy brakującym "poprzednim" nie przeskakuje na
   lewą stronę i układ obu skrajnych wpisów zostaje ten sam. */
.blog-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: var(--border-w-thick) solid var(--border-strong);
}

.blog-pager-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border: var(--border-w) solid var(--border-default);
    border-radius: var(--radius-m);
    color: var(--color-text);
    text-decoration: none;
}

.blog-pager-link:hover,
.blog-pager-link:focus-visible {
    border-color: var(--border-strong);
}

.blog-pager-next {
    grid-column: 2;
    text-align: right;
}

.blog-pager-label {
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 600;
}

.blog-pager-title {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
}

.blog-pager-link:hover .blog-pager-title,
.blog-pager-link:focus-visible .blog-pager-title {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .blog-pager {
        grid-template-columns: 1fr;
    }

    .blog-pager-next {
        grid-column: 1;
        text-align: left;
    }
}

/* ===== Rekrutacje - lista, szczegóły, oś czasu (Issue #37) ===== */
/* Lista rekrutacji: otwarty układ na tle strony (domyślna strona po zalogowaniu) */
.recruitment-list-section {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding: 3.5rem 1.5rem 4.5rem;
}

.recruitment-list-kicker {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 0.75rem;
}

.recruitment-list-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}

/* Trzy kroki procesu pod nagłówkiem listy (Issue #78). Kroki są objaśnieniem,
   a nie zawartością, więc siedzą wprost na tle strony - bez własnej
   powierzchni i obrysu; grupują je numery i strzałki między nimi.
   Poniżej 720 px kroki układają się jeden pod drugim.
   Odstęp w `gap` jest miejscem na strzałki między kaflami, stąd 2.5rem. */
.recruitment-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    margin: 0 0 2.5rem;
    padding: 0;
}

.recruitment-step {
    position: relative;
    padding: 0;
    border: none;
    background: transparent;
}

/* Strzałka w odstępie po prawej stronie kafla wiąże kroki w jeden proces.
   Siedzi w znaczniku (a nie w ::after), bo jako czysta dekoracja potrzebuje
   aria-hidden - kolejność kroków niesie już <ol>. */
.recruitment-step-arrow {
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translate(50%, -50%);
    color: var(--color-accent);
    font-size: 1.35rem;
    line-height: 1;
    pointer-events: none;
}

.recruitment-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-bottom: 0.6rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--text-inverse);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

.recruitment-step-title {
    color: var(--text-primary);
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.recruitment-step-text {
    color: var(--color-text-light);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Kroki, które prowadzą od razu do odpowiedniej strony (2 i 4), dostają
   całą kartę jako link - łatwiej trafić niż w sam tytuł. */
.recruitment-step-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 0.75rem;
    margin: -0.5rem;
    padding: 0.5rem;
    transition: background-color var(--transition-speed);
}

.recruitment-step-link:hover,
.recruitment-step-link:focus-visible {
    background-color: var(--color-tile-bg);
}

@media (max-width: 720px) {
    .recruitment-steps {
        grid-template-columns: 1fr;
    }

    /* Kroki stoją jeden pod drugim, więc strzałka schodzi pod kafel
       i obraca się w dół. */
    .recruitment-step-arrow {
        top: auto;
        right: auto;
        bottom: -1.25rem;
        left: 50%;
        transform: translate(-50%, 50%) rotate(90deg);
    }
}

/* Łączny czas pracy z asystentem AI na liście rekrutacji (Issue #53, #91) */
.recruitment-list-usage {
    display: inline-block;
    min-width: 14rem;
    padding: 0.85rem 1.1rem;
    margin: 0 0 2rem;
    border: 1px solid var(--color-tile-shadow);
    border-radius: 0.75rem;
    background: var(--color-tile-bg);
}

/* Issue #66: licznik czasu i licznik odbytych rozmów stoją obok siebie.
   Na wąskim ekranie kafelki zawijają się jeden pod drugi, a odstęp między
   nimi przejmuje `gap` - stąd wyzerowany margines kafelka w tym kontenerze. */
.recruitment-list-usage-tiles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0 0 2rem;
}

.recruitment-list-usage-tiles .recruitment-list-usage {
    margin: 0;
}

/* Issue #147 follow-up: "Dodaj minuty" zajęło miejsce kafelka z liczbą
   odbytych rozmów - stoi obok licznika czasu, nie jako osobny kafelek. */
.recruitment-list-usage-addminutes {
    margin: 0;
}

.recruitment-list-usage-label {
    color: var(--color-text-light);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin: 0 0 0.15rem;
}

.recruitment-list-usage-value {
    font-family: var(--font-body);
    /* var(--color-primary) to teraz kolor przycisków (patrz brand.css) -
       ta wartość liczbowa korzysta z koloru tekstu, nie przycisków. */
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

/* Issue #101: "bez limitu" zamiast liczby limitu w planie, który go nie ma -
   dopisek przy wartości, więc mniejszy i w kolorze tekstu pomocniczego. */
.recruitment-list-usage-unlimited {
    color: var(--color-text-light);
    font-size: 0.9rem;
    font-weight: 400;
    white-space: nowrap;
}

.recruitment-list-usage-hint {
    color: var(--color-text-light);
    font-size: 0.8rem;
    margin: 0.25rem 0 0;
}

.recruitment-list-actions {
    margin: 0 0 2rem;
}

.recruitment-new-link {
    text-decoration: none;
}

/* Issue #158 (follow-up): plan próbny pozwala na jedną rekrutację - przycisk
   wygląda na wyłączony (bez kursora/cienia/uniesienia przy najechaniu -
   patrz .profile-form-submit powyżej), a wyjaśnienie stoi obok, z linkiem do
   cennika. To <span>, nie <a> - nie ma dokąd prowadzić. */
.recruitment-new-link--disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.recruitment-new-link--disabled:hover,
.recruitment-new-link--disabled:focus-visible {
    border-color: var(--color-tile-shadow);
    box-shadow: none;
    transform: none;
}

.recruitment-list-actions-hint {
    display: block;
    margin: 0.6rem 0 0;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.recruitment-list-actions-hint a {
    color: var(--color-accent);
    text-decoration: underline;
}

.recruitment-list-rule {
    height: 2px;
    border: 0;
    margin: 0 0 2rem;
    background: var(--color-tile-shadow);
}

/* Issue #83: sekcja "Historia" pod kreską - liczniki zużycia i lista dotychczasowych
   rekrutacji jako jedna całość. Nagłówek jest mniejszy od H1 strony, żeby czytelnie
   podpiąć się pod niego w hierarchii, a nie konkurować z nim. */
.recruitment-history-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}

.recruitment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.recruitment-list-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding: 1.1rem 1.4rem;
    background: var(--color-tile-bg);
    border: 1px solid var(--color-tile-shadow);
    border-radius: 1rem;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed);
}

.recruitment-list-item:hover,
.recruitment-list-item:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.10);
    transform: translateY(-2px);
}

.recruitment-list-item-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 12rem;
}

.recruitment-list-item-title {
    color: var(--text-primary);
    font-weight: 600;
}

.recruitment-list-item-firma {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.recruitment-list-item-updated {
    color: var(--color-text-light);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Issue #83: czerwony skrót do symulacji przy każdej rekrutacji. Kolor i kształt
   dziedziczy po wariancie primary przycisków (patrz "Przyciski: wspólny kształt"),
   tu tylko zmniejszamy go do gabarytu wiersza listy. */
.recruitment-list-item-simulation {
    flex: none;
    padding: 8px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Issue #124: symulacja rozmowy jako szeroki przycisk pod nagłówkiem rekrutacji.
   Kolor i kształt dziedziczy po wariancie primary przycisków (patrz „Przyciski:
   wspólny kształt”), tu tylko rozciągamy go na całą szerokość kolumny. */
.recruitment-detail-simulation {
    display: flex;
    width: 100%;
    padding: 16px 22px;
    font-size: var(--text-body-l);
    margin: 0 0 1.5rem;
}

.recruitment-list-empty {
    color: var(--color-text-light);
}

.recruitment-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.recruitment-status--w_trakcie {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.recruitment-status--zakonczona_sukcesem {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.recruitment-status--zakonczona_odmowa {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.recruitment-status--wycofana {
    background: var(--surface-card-alt);
    color: var(--color-text-light);
}

/* Ogłoszenie i opis stanowiska w kafelku - ten sam kształt i tło co panel
   „CV kandydata” (.recruitment-cv-panel) i „Dodaj zdarzenie”. */
.recruitment-job-panel {
    background: var(--color-tile-bg);
    border: 1px solid var(--color-tile-shadow);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.75rem;
}

.recruitment-job-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-primary);
}

.recruitment-job-head svg {
    flex: none;
    color: var(--color-text-light);
}

.recruitment-job-title {
    margin: 0;
}

.recruitment-job-link {
    margin: 0.9rem 0 0;
    word-break: break-word;
}

.recruitment-job-empty {
    margin: 0.9rem 0 0;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.recruitment-job-description {
    margin-top: 1rem;
}

.recruitment-job-description-label {
    display: block;
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

/* Pole tylko do odczytu: stała wysokość z własnym suwakiem zamiast długiego
   akapitu rozpychającego stronę; treść da się zaznaczyć i skopiować. */
.recruitment-job-description-text {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.55;
    resize: vertical;
}

.recruitment-job-description-text:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
    border-color: var(--color-secondary);
}

.recruitment-job-description-submit {
    margin-top: 0.75rem;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 0.75rem;
    background: var(--color-secondary);
    color: var(--white);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.recruitment-job-description-submit:hover,
.recruitment-job-description-submit:focus-visible {
    background: var(--color-secondary-hover);
}

/* --- Szczegóły rekrutacji: układ dwukolumnowy (redesign wg Claude Design) --- */
.recruitment-detail-section {
    padding: 3rem 1.5rem 4rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.recruitment-detail-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.recruitment-detail-sidebar {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--color-tile-bg);
    border: 1px solid var(--color-tile-shadow);
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 4px 16px var(--color-tile-shadow);
}

.recruitment-detail-kicker {
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin: 0 0 0.15rem;
}

.recruitment-detail-sidebar-company {
    font-family: var(--font-display);
    color: var(--color-primary);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    word-break: break-word;
}

.recruitment-detail-actions-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.recruitment-detail-actions-group--danger {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.recruitment-detail-action {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-speed), border-color var(--transition-speed);
}

.recruitment-detail-action svg {
    flex: none;
    color: var(--color-text-light);
}

.recruitment-detail-action:hover,
.recruitment-detail-action:focus-visible {
    background: var(--surface-card-alt);
    border-color: var(--color-primary);
}

.recruitment-detail-action--danger {
    color: var(--status-danger-fg);
}

.recruitment-detail-action--danger svg {
    color: var(--status-danger-fg);
}

.recruitment-detail-action--danger:hover,
.recruitment-detail-action--danger:focus-visible {
    background: var(--status-danger-bg);
    border-color: var(--status-danger-fg);
}

/* Issue #128: grupa nawigacyjna pod akcja usuwania - zwykly kolor tekstu. */
.recruitment-detail-actions-group--nav {
    margin-top: 0.75rem;
}

.recruitment-delete-confirm {
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--status-danger-border);
    border-radius: 0.75rem;
}

.recruitment-delete-confirm-text {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

.recruitment-delete-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recruitment-delete-confirm-btn {
    background: var(--status-danger-fg);
    color: var(--white);
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.recruitment-delete-confirm-btn:hover,
.recruitment-delete-confirm-btn:focus-visible {
    background: var(--rose-700);
}

.recruitment-delete-dismiss-btn {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-speed);
}

.recruitment-delete-dismiss-btn:hover,
.recruitment-delete-dismiss-btn:focus-visible {
    background: var(--surface-card-alt);
}

.recruitment-detail-main {
    min-width: 0;
    padding-top: 0.25rem;
}

.recruitment-detail-back {
    margin-bottom: 1.25rem;
}

.recruitment-detail-back a {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 0.9rem;
}

.recruitment-detail-back a:hover,
.recruitment-detail-back a:focus-visible {
    color: var(--color-primary);
}

.recruitment-detail-header {
    margin-bottom: 1.25rem;
}

.recruitment-detail-title {
    color: var(--text-primary);
    font-size: 1.9rem;
    margin-bottom: 0.6rem;
}

.recruitment-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.recruitment-detail-company {
    color: var(--color-text-light);
    font-size: 1.05rem;
}

.recruitment-detail-rule {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: 1.75rem 0;
}

.recruitment-detail-section-title {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.recruitment-detail-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0;
}

.recruitment-timeline {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0 0 0 1.5rem;
    position: relative;
}

.recruitment-timeline::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 5px;
    width: 2px;
    background: var(--border-subtle);
}

.recruitment-timeline-item {
    position: relative;
    padding: 0 0 1.25rem;
}

.recruitment-timeline-item:last-child {
    padding-bottom: 0;
}

.recruitment-timeline-marker {
    position: absolute;
    left: -1.5rem;
    top: 0.35rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-bg);
}

.recruitment-timeline-content {
    background: var(--color-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    padding: 0.85rem 1.1rem;
}

.recruitment-timeline-date {
    display: block;
    color: var(--color-text-light);
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.recruitment-timeline-type {
    color: var(--color-primary);
    font-weight: 600;
}

.recruitment-timeline-note {
    color: var(--color-text);
    margin: 0.4rem 0 0;
    white-space: pre-wrap;
}

.recruitment-timeline-empty {
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

/* Postęp względem poprzednich symulacji (issue #64) - na osi czasu widoczny
   od razu, w odróżnieniu od zwijanego pełnego raportu poniżej. */
.recruitment-timeline-progress {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    border-radius: 0.5rem;
}

.recruitment-timeline-progress :first-child {
    margin-top: 0;
}

.recruitment-timeline-progress :last-child {
    margin-bottom: 0;
}

/* Karta symulacji na osi czasu. Streszcza wynik i prowadzi na stronę
   informacji zwrotnej - pełny raport nie mieszka już w rozwijanym akapicie. */
.recruitment-timeline-simulation-label {
    margin: 0.35rem 0 0;
    font-weight: 600;
    color: var(--color-text);
}

.recruitment-timeline-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.recruitment-timeline-chip {
    padding: 0.1rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-default);
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.8rem;
    font-weight: 600;
}

.recruitment-timeline-chip--good {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border-color: var(--success-500);
}

.recruitment-timeline-chip--work {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    border-color: var(--warning-500);
}

.recruitment-timeline-feedback-link {
    margin: 0.7rem 0 0;
}

.recruitment-timeline-feedback-link a {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Strona informacji zwrotnej z symulacji (templates/recruitment/feedback.html).
   Style stoją tutaj, a nie w agent.css - ten arkusz nie jest ładowany na
   stronach rekrutacji (patrz komentarz przy .ai-notice na dole pliku).
   --------------------------------------------------------------------------- */
.feedback-section {
    padding: 3rem 1.5rem 4rem;
    max-width: 780px;
    margin: 0 auto;
    width: 100%;
}

.feedback-back {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
}

.feedback-header {
    margin-bottom: 1.5rem;
}

.feedback-title {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.feedback-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.feedback-badge {
    padding: 0.15rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    border: 1px solid var(--status-danger-border);
    font-weight: 700;
    font-size: 0.8rem;
}

.feedback-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-m);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.feedback-card-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.feedback-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.feedback-columns .feedback-card {
    margin-bottom: 0;
}

.feedback-card--strengths {
    border-left: 4px solid var(--success-500);
}

.feedback-card--improvements {
    border-left: 4px solid var(--warning-500);
}

.feedback-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.feedback-points li {
    position: relative;
    padding-left: 1.2rem;
    line-height: 1.5;
}

.feedback-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.feedback-card--strengths .feedback-points li::before {
    background: var(--success-500);
}

.feedback-card--improvements .feedback-points li::before {
    background: var(--warning-500);
}

/* Obszary rozmowy. Liczba stoi zawsze obok paska, więc znaczenie nie zależy
   wyłącznie od koloru (WCAG 1.4.1). */
.feedback-areas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.feedback-area {
    display: grid;
    grid-template-columns: minmax(8rem, 1.4fr) minmax(0, 2fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.9rem;
}

.feedback-area-label {
    min-width: 0;
}

.feedback-area-empty {
    grid-column: 2 / -1;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.feedback-area-track {
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--border-subtle);
    overflow: hidden;
}

.feedback-area-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
}

.feedback-area-fill--high {
    background: var(--success-500);
}

.feedback-area-fill--mid {
    background: var(--warning-500);
}

.feedback-area-fill--low {
    background: var(--brand-primary);
}

.feedback-area-score {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 3rem;
    text-align: right;
}

.feedback-area-delta {
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    color: var(--color-text-light);
    min-width: 4.5rem;
    text-align: right;
}

.feedback-area-delta--up {
    color: var(--status-success-fg);
    font-weight: 600;
}

.feedback-area-delta--down {
    color: var(--status-danger-fg);
    font-weight: 600;
}

/* Wyjaśnienie odjętych punktów pod paskiem obszaru (Issue #133). Lista
   zajmuje cały wiersz siatki ``.feedback-area``, tak jak ``.feedback-area-empty``. */
.feedback-area-deductions {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.feedback-area-deduction {
    color: var(--color-text-light);
    font-size: 0.82rem;
}

.feedback-area-deduction-points {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--status-danger-fg);
    margin-right: 0.3rem;
}

.feedback-areas-hint {
    margin: 1rem 0 0;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.feedback-card--progress {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    border-color: var(--warning-500);
}

.feedback-card--progress :first-child {
    margin-top: 0;
}

.feedback-card--progress :last-child {
    margin-bottom: 0;
}

.feedback-report {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-m);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.feedback-report > summary {
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 600;
}

.feedback-report-body {
    margin-top: 0.75rem;
}

/* Rytm pełnego raportu (Issue #116). Globalny reset zeruje marginesy, więc
   Markdown z feedbacku sklejał się w jedną ścianę tekstu - kolejne sekcje
   (1. GŁOS, DYKCJA I DŹWIĘK, 2. AUTOPREZENTACJA, ...) niczym się od siebie nie oddzielały.
   Nagłówek sekcji dostaje wyraźny odstęp od poprzedniej sekcji, mniejszy od
   własnej treści, żeby tytuł wizualnie należał do tego, co pod nim. Selektory
   są przed regułami :first-child / :last-child niżej, żeby te dalej zdejmowały
   margines z pierwszego i ostatniego elementu raportu. */
.feedback-report-body > h3,
.feedback-report-body > h4 {
    margin: 2.5rem 0 0.6rem;
}

.feedback-report-body > h5,
.feedback-report-body > h6 {
    margin: 1.5rem 0 0.4rem;
}

.feedback-report-body > p {
    margin: 0 0 0.85rem;
}

.feedback-report-body > ul,
.feedback-report-body > ol {
    margin: 0 0 0.85rem 1.25rem;
}

.feedback-report-body li {
    margin-bottom: 0.3rem;
}

.feedback-report-body :first-child {
    margin-top: 0;
}

.feedback-report-body :last-child {
    margin-bottom: 0;
}

/* Przykłady lepszych sformułowań (Issue #131). To jedyny fragment raportu,
   który kandydat może powtórzyć na głos niemal dosłownie, więc nie powinien
   ginąć między akapitami analizy - renderery Markdown
   (``recruitment.routes.render_feedback_markdown`` i ``renderMarkdown``
   z ``static/js/agent/interview.js``) owijają nagłówek podsekcji razem
   z przykładami w ten blok. Selektory celowo nie są zawężone do
   ``.feedback-report-body``: ten sam blok pojawia się też w widoku rozmowy
   (``.agent-feedback``), gdy karty renderuje JavaScript. */
.feedback-examples {
    margin: 1rem 0 1.25rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-alt);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-s);
}

.feedback-examples h3,
.feedback-examples h4,
.feedback-examples h5,
.feedback-examples h6 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.feedback-examples p {
    margin: 0 0 0.5rem;
}

.feedback-examples ul,
.feedback-examples ol {
    margin: 0 0 0 1.1rem;
}

.feedback-examples li {
    margin-bottom: 0.6rem;
}

.feedback-examples :last-child {
    margin-bottom: 0;
}

.feedback-empty {
    color: var(--color-text-light);
}

.feedback-actions {
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.feedback-cta {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--text-inverse);
    font-weight: 700;
    text-decoration: none;
}

.feedback-cta:hover,
.feedback-cta:focus-visible {
    background: var(--brand-primary-active);
    color: var(--text-inverse);
}

/* Pobranie PDF (Issue #154) jest drugorzędne wobec kolejnej symulacji -
   ta sama forma (pigułka), ale bez wypełnienia, żeby wzrok szedł najpierw
   na główne CTA. */
.feedback-cta--secondary {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    padding: calc(0.7rem - 2px) calc(1.5rem - 2px);
}

.feedback-cta--secondary:hover,
.feedback-cta--secondary:focus-visible {
    background: var(--color-accent);
    color: var(--text-inverse);
    border-color: var(--color-accent);
}

body.high-contrast .feedback-cta--secondary {
    background-color: #FFFFFF;
    color: #000000;
    border-color: #000000;
}

/* W wysokim kontraście kolor przestaje nieść znaczenie - paski i plakietki
   dostają czerń/biel, a rozróżnia je sąsiadująca liczba i etykieta. */
body.high-contrast .feedback-area-fill,
body.high-contrast .recruitment-timeline-chip {
    background-color: #000000;
    color: #FFFFFF;
}

body.high-contrast .feedback-area-track {
    border: 1px solid #000000;
    background-color: #FFFFFF;
}

body.high-contrast .feedback-cta {
    background-color: #000000;
    color: #FFFFFF;
}

/* Propozycja zamknięcia rekrutacji po decyzji rekrutacyjnej (issue #73) */
.recruitment-close-prompt {
    background: var(--color-tile-bg);
    border: 1px solid var(--color-primary);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.recruitment-close-prompt-text {
    margin: 0 0 0.75rem;
    color: var(--color-text);
    font-weight: 600;
}

.recruitment-close-prompt-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.recruitment-close-prompt-btn {
    background: var(--color-bg);
    color: var(--color-primary);
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-speed), border-color var(--transition-speed);
}

.recruitment-close-prompt-btn:hover,
.recruitment-close-prompt-btn:focus-visible {
    background: var(--surface-card-alt);
    border-color: var(--color-primary);
}

.recruitment-close-prompt-dismiss {
    color: var(--color-text-light);
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.5rem 0.4rem;
}

.recruitment-close-prompt-dismiss:hover,
.recruitment-close-prompt-dismiss:focus-visible {
    text-decoration: underline;
}

.recruitment-add-event-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-tile-shadow);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    /* Panel stoi teraz pod kalendarzem rekrutacji (issue #109) - odstęp
       oddziela go od ostatniego zdarzenia, na dole kolumny nic już nie stoi. */
    margin-top: 2rem;
    margin-bottom: 0;
    scroll-margin-top: 1.5rem;
}

/* Panel CV kandydata (biały kafelek, jak reszta redesignu) */
.recruitment-cv-panel {
    background: var(--color-tile-bg);
    border: 1px solid var(--color-tile-shadow);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.75rem;
    scroll-margin-top: 1.5rem;
}

.recruitment-cv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    color: var(--color-primary);
}

.recruitment-cv-head svg {
    flex: none;
    color: var(--color-text-light);
}

.recruitment-cv-title {
    margin: 0;
}

/* Nazwa bieżącego CV stoi w nagłówku panelu - to jedyne, co widać przed
   rozwinięciem „Zarządzaj CV”. Na wąskim ekranie schodzi do nowego wiersza. */
.recruitment-cv-current {
    margin: 0;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.5rem;
    min-width: 0;
}

.recruitment-cv-current--empty {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.recruitment-cv-tag {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-card-alt);
    color: var(--color-text-light);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Rozwijana obsługa CV. Rozwija ją też „Zmień CV” z panelu bocznego
   (recruitment.js), dlatego element ma własny margines na skok do kotwicy. */
.recruitment-cv-manage {
    margin-top: 0.9rem;
    scroll-margin-top: 1.5rem;
}

.recruitment-cv-manage-summary {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
}

.recruitment-cv-manage-summary:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.recruitment-cv-manage-body {
    padding-top: 0.5rem;
}

.recruitment-cv-privacy {
    margin-bottom: 0;
}

.recruitment-cv-status {
    margin: 0.9rem 0 0.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.recruitment-cv-download {
    color: var(--color-accent);
    text-decoration: underline;
    font-weight: 600;
    word-break: break-word;
}

.recruitment-cv-download:hover,
.recruitment-cv-download:focus-visible {
    color: var(--color-accent-hover);
}

.recruitment-cv-meta {
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.recruitment-cv-hint {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin: 0.5rem 0 1rem;
}

/* Podpowiedź zamyka panel CV, więc nie zostawia pod sobą pustego marginesu. */
.recruitment-cv-hint--last {
    margin-bottom: 0;
}

.recruitment-cv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.recruitment-cv-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
}

/* Etykieta pełni rolę przycisku wyboru pliku; sam <input type=file> jest ukryty. */
.recruitment-cv-filebtn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-speed), border-color var(--transition-speed);
}

.recruitment-cv-filebtn:hover,
.recruitment-cv-filebtn:focus-within {
    background: var(--surface-card-alt);
    border-color: var(--color-primary);
}

.recruitment-cv-filebtn input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.recruitment-cv-submit-fallback {
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 0.75rem;
    background: var(--color-secondary);
    color: var(--white);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.recruitment-cv-submit-fallback:hover,
.recruitment-cv-submit-fallback:focus-visible {
    background: var(--color-secondary-hover);
}

.recruitment-cv-formats {
    color: var(--color-text-light);
    font-size: 0.8rem;
}

.recruitment-cv-remove-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--status-danger-fg);
    font-family: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.recruitment-cv-remove-btn:hover,
.recruitment-cv-remove-btn:focus-visible {
    color: var(--rose-700);
}

/* Wybór CV wgranego wcześniej przy innej rekrutacji (Issue #68). */
.recruitment-cv-reuse-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin-top: 1rem;
}

.recruitment-cv-reuse-label {
    color: var(--color-text-light);
    font-size: 0.9rem;
    flex-basis: 100%;
}

.recruitment-cv-reuse-select {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
}

/* Podmiana CV przez wklejenie jego treści (Issue #118). */
.recruitment-cv-text-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 1rem;
}

.recruitment-cv-text {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.recruitment-cv-text:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
    border-color: var(--color-secondary);
}

@media (max-width: 860px) {
    .recruitment-detail-layout {
        grid-template-columns: 1fr;
    }

    .recruitment-detail-sidebar {
        position: static;
    }

    .recruitment-detail-actions-group--danger {
        margin-top: 0;
    }
}

/* ===== Ustawienia konta - pasek boczny + panel treści (Issue #45) ===== */
.settings-section {
    padding: 3rem 1.5rem 4rem;
    max-width: 1100px;
    margin: 0 auto 3rem;
    width: 100%;
}

.settings-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    background: var(--color-footer-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px var(--color-tile-shadow);
    overflow: hidden;
}

.settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.25rem;
    border-right: 1px solid var(--border-subtle);
}

.settings-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.settings-heading {
    color: var(--text-primary);
    font-size: 1.25rem;
}

.settings-close {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    transition: background var(--transition-speed);
}

.settings-close:hover,
.settings-close:focus-visible {
    background: var(--surface-card-alt);
    color: var(--color-primary);
}

.settings-user-id-label {
    color: var(--color-text-light);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

/* Kod identyfikatora dziedziczy tło karty ustawień - w pasku bocznym
   potrzebuje jaśniejszego tła, żeby był czytelny. */
.settings-user-id .profile-account-id {
    background: var(--color-bg);
    border: 1px solid var(--border-subtle);
}

.settings-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.settings-nav-link {
    display: block;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.25rem;
    border-radius: 0.75rem;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    transition: background var(--transition-speed);
}

.settings-nav-link:hover,
.settings-nav-link:focus-visible {
    background: var(--surface-card-alt);
}

.settings-nav-link--active {
    background: var(--color-bg);
    color: var(--color-primary);
    box-shadow: 0 1px 4px var(--color-tile-shadow);
}

.settings-sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.settings-delete-link {
    color: var(--status-danger-fg);
    font-size: 0.9rem;
    text-decoration: underline;
}

.settings-delete-data-link {
    color: var(--status-danger-fg);
    font-size: 0.9rem;
    text-decoration: underline;
}

.settings-content {
    padding: 2.5rem;
    min-width: 0;
}

.settings-title {
    color: var(--text-primary);
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-content .profile-form {
    max-width: 560px;
}

@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .settings-content {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   Warstwa kształtów design systemu "Feedback"
   --------------------------------------------------------------------------
   Kolory i kroje są już podmienione u źródła (paleta na górze pliku mapuje
   --color-* na tokeny DS). Tutaj zostaje sam "kształt": pigułkowe przyciski,
   karty na białym tle z czarną ramką 1,5px i offsetowym cieniem
   --shadow-card, oraz pola formularzy wg komponentu forms/Input.jsx.

   Jeden zblokowany override zamiast ~60 rozproszonych poprawek w 2,7 tys.
   linii — język kształtów jest zapisany raz i łatwo go zmienić w jednym
   miejscu. Selektory celują w istniejące klasy, szablonów nie ruszamy.
   ========================================================================== */

/* --- Karty ---------------------------------------------------------------- */
.tile,
.news-card,
.idea-card,
.signup-card,
.partner-intro-card,
.profile-form-card,
.profile-subscription-panel,
.quota-card,
.cvr-card {
    background: var(--surface-card);
    border: var(--border-w) solid var(--border-strong);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
}

/* .settings-section to zewnętrzna oprawa panelu ustawień - obrys DS dawał
   pudełko w pudełku wokół .settings-layout, które ma już własną ramkę.
   Ta sama, delikatna ramka co kafelki na /cennik (.cennik-grid .tile) -
   jasny obrys 1px zamiast twardego cienia DS, bez box-shadow. */
.settings-section {
    background: var(--surface-card);
    border: 1px solid var(--color-tile-shadow);
    border-radius: 1rem;
    box-shadow: none;
}

/* Ekrany wejścia do konta (/auth/login, /auth/zgody, /moje-konto/usun,
   Issue #80) mają być "płaskie": biała powierzchnia bez obrysu i cienia.
   To pojedyncze, skupione formularze - ramka DS robiła z nich pudełko
   w pudełku (na /moje-konto/usun panel ostrzeżenia siedzi wewnątrz karty). */
.auth-login-card,
.profile-form-card--flat,
.profile-view-card,
.profile-account-panel {
    background: var(--surface-card);
    border: none;
    border-radius: var(--radius-l);
    box-shadow: none;
}

/* Panele treściowe (CV kandydata, "Dodaj zdarzenie", sekcje agenta) celowo
   NIE dostają ramki DS ani offsetowego cienia — mają wyglądać jak
   .recruitment-list-usage: sama powierzchnia, bez obrysu. */
.recruitment-add-event-panel,
.recruitment-cv-panel,
.recruitment-job-panel,
.agent-panel {
    background: var(--surface-card);
    border: 1px solid var(--color-tile-shadow);
    border-radius: var(--radius-l);
    box-shadow: none;
}

/* Kafelki podnosiły się na hover miękkim cieniem; przy offsetowym cieniu DS
   ten sam gest to pogłębienie odsunięcia. */
.tile:hover,
.tile:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--border-strong);
}

/* Podstrona /funkcje: kafelki bez obrysu i cienia — strona jest opisowa,
   ma ich kilkanaście i ramki dzieliły ją na zbyt wiele pudełek. Zostaje
   sama powierzchnia karty, tak jak w .recruitment-list-usage. */
.funkcje-tiles .tile,
.funkcje-tiles .tile:hover,
.funkcje-tiles .tile:focus-within {
    border: none;
    box-shadow: none;
}

/* Podstrona /agent: kafelki trybów treningu mają wyglądać dokładnie tak jak
   pozycje listy na /rekrutacje (.recruitment-list-item) — jasny obrys 1 px
   zamiast czarnej ramki DS, bez offsetowego cienia. Obie strony są punktem
   wejścia do tego samego procesu, więc nie powinny różnić się kształtem kart. */
.agent-grid .tile {
    border: 1px solid var(--color-tile-shadow);
    border-radius: 1rem;
    box-shadow: none;
}

.agent-grid .tile:hover,
.agent-grid .tile:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.10);
    transform: translateY(-2px);
}

/* Podstrona /cennik (Issue #146): te same, delikatniejsze kafelki co na
   /agent (.agent-grid .tile) - jasny obrys 1px zamiast grubej ramki DS,
   bez offsetowego cienia. Dodatkowy padding pionowy robi kafelki odrobinę
   wyższe, bo w jednym rzędzie obok siebie wygląda to smuklej. */
.cennik-grid .tile {
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-tile-shadow);
    border-radius: 1rem;
    box-shadow: none;
}

.cennik-grid .tile:hover,
.cennik-grid .tile:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 8px 28px rgba(26, 35, 65, 0.10);
    transform: translateY(-2px);
}

/* Karta kontaktu dla partnerów jest odwrócona (ciemne tło, jasny tekst) —
   celowo NIE trafia do grupy wyżej, bo białe tło zjadłoby jej biały nagłówek.
   Odpowiednik powierzchni --bg-inverse z DS. */
.partner-contact-card {
    background: var(--bg-inverse);
    border: var(--border-w) solid var(--bg-inverse);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-m);
}

.partner-contact-card h2,
.partner-contact-card p {
    color: var(--text-inverse);
}

/* Przycisk na ciemnej karcie = wariant inverse: biel na czerni. */
.partner-contact-card .partner-cta {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
}

.partner-contact-card .partner-cta:hover,
.partner-contact-card .partner-cta:focus-visible {
    background-color: var(--grey-100);
    border-color: var(--grey-100);
    color: var(--black);
}

/* --- Przyciski: wspólny kształt (core/Button.jsx) -------------------------- */
.tile-link,
.tile-cta,
.news-card-link,
.signup-submit,
.profile-form-submit,
.profile-form-back-link,
.profile-view-edit-link,
.profile-view-payments-link,
.profile-copy-btn,
.partner-cta,
.auth-magic-link-btn,
.recruitment-new-link,
.recruitment-list-item-simulation,
.recruitment-detail-simulation,
.recruitment-cv-filebtn,
.recruitment-cv-reuse-btn,
.recruitment-cv-submit-fallback,
.recruitment-delete-confirm-btn,
.recruitment-delete-dismiss-btn,
.subscription-cancel-confirm-btn,
.subscription-cancel-dismiss-btn,
.settings-delete-link,
.settings-delete-data-link,
.cvr-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-body-m);
    line-height: 1;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    border: var(--border-w) solid transparent;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard),
                background var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard);
}

/* Wariant primary. Kolor z --color-accent, czyli rose-600 — patrz komentarz
   przy palecie: rose-500 nie przechodzi WCAG AA z białym tekstem. */
.tile-cta,
.signup-submit,
.profile-form-submit,
.partner-cta,
.auth-magic-link-btn,
.recruitment-new-link,
.recruitment-list-item-simulation,
.recruitment-detail-simulation,
.recruitment-cv-submit-fallback {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--white);
    box-shadow: none;
}

.tile-cta:hover,
.signup-submit:hover,
.profile-form-submit:hover,
.partner-cta:hover,
.auth-magic-link-btn:hover,
.recruitment-new-link:hover,
.recruitment-list-item-simulation:hover,
.recruitment-detail-simulation:hover,
.recruitment-cv-submit-fallback:hover,
.tile-cta:focus-visible,
.signup-submit:focus-visible,
.profile-form-submit:focus-visible,
.partner-cta:focus-visible,
.auth-magic-link-btn:focus-visible,
.recruitment-new-link:focus-visible,
.recruitment-list-item-simulation:focus-visible,
.recruitment-detail-simulation:focus-visible,
.recruitment-cv-submit-fallback:focus-visible {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--white);
    transform: none;
}

/* Wariant secondary: białe tło, czarna ramka. */
.tile-link,
.news-card-link,
.profile-form-back-link,
.profile-view-edit-link,
.profile-view-payments-link,
.profile-copy-btn,
.recruitment-cv-filebtn,
.recruitment-cv-reuse-btn,
.recruitment-delete-dismiss-btn,
.subscription-cancel-dismiss-btn,
.settings-delete-data-link,
.cvr-back {
    background-color: var(--white);
    border-color: var(--border-strong);
    color: var(--text-primary);
    box-shadow: var(--shadow-card);
}

.tile-link:hover,
.news-card-link:hover,
.profile-form-back-link:hover,
.profile-view-edit-link:hover,
.profile-view-payments-link:hover,
.profile-copy-btn:hover,
.recruitment-cv-filebtn:hover,
.recruitment-cv-reuse-btn:hover,
.recruitment-delete-dismiss-btn:hover,
.subscription-cancel-dismiss-btn:hover,
.settings-delete-data-link:hover,
.cvr-back:hover,
.tile-link:focus-visible,
.news-card-link:focus-visible,
.profile-form-back-link:focus-visible,
.profile-view-edit-link:focus-visible,
.profile-view-payments-link:focus-visible,
.profile-copy-btn:focus-visible,
.recruitment-cv-filebtn:focus-visible,
.recruitment-cv-reuse-btn:focus-visible,
.recruitment-delete-dismiss-btn:focus-visible,
.subscription-cancel-dismiss-btn:focus-visible,
.settings-delete-data-link:focus-visible,
.cvr-back:focus-visible {
    background-color: var(--surface-rose);
    border-color: var(--border-strong);
    color: var(--text-primary);
    transform: none;
}

/* Wariant destrukcyjny. */
.recruitment-delete-confirm-btn,
.subscription-cancel-confirm-btn,
.settings-delete-link {
    background-color: var(--danger-500);
    border-color: var(--danger-500);
    color: var(--white);
}

.recruitment-delete-confirm-btn:hover,
.subscription-cancel-confirm-btn:hover,
.settings-delete-link:hover,
.recruitment-delete-confirm-btn:focus-visible,
.subscription-cancel-confirm-btn:focus-visible,
.settings-delete-link:focus-visible {
    background-color: var(--rose-700);
    border-color: var(--rose-700);
    color: var(--white);
}

/* Odpowiednik onMouseDown -> scale(0.97) z komponentu Button. */
.tile-link:active,
.tile-cta:active,
.news-card-link:active,
.signup-submit:active,
.profile-form-submit:active,
.partner-cta:active,
.auth-magic-link-btn:active,
.recruitment-new-link:active,
.recruitment-list-item-simulation:active,
.recruitment-detail-simulation:active,
.recruitment-delete-confirm-btn:active,
.recruitment-delete-dismiss-btn:active,
.subscription-cancel-confirm-btn:active,
.subscription-cancel-dismiss-btn:active,
.cvr-back:active {
    transform: scale(0.97);
}

/* "Anuluj" (doładowanie minut), "Wróć do cennika" (potwierdzenie zakupu),
   "Kopiuj" i "Anuluj subskrypcję" (ustawienia konta, .profile-copy-btn) oraz
   "Usuń moje dane" - ten sam wariant secondary co wyżej, ale z cieńszą ramką
   i miękkim, rozmytym cieniem zamiast twardego --shadow-card (komiksowe
   0 2px 0 czarny), który na tych przyciskach wyglądał zbyt ciężko. */
.subscription-cancel-dismiss-btn,
.profile-copy-btn,
.settings-delete-data-link {
    border-width: 1px;
    border-color: var(--border-default);
    box-shadow: 0 1px 4px rgba(26, 35, 65, 0.1);
}

.subscription-cancel-dismiss-btn:hover,
.subscription-cancel-dismiss-btn:focus-visible,
.profile-copy-btn:hover,
.profile-copy-btn:focus-visible,
.settings-delete-data-link:hover,
.settings-delete-data-link:focus-visible {
    border-color: var(--border-default);
    box-shadow: 0 2px 8px rgba(26, 35, 65, 0.14);
}

/* Karta oferty przykładowej ma "link", który jest tylko etykietą (aria-hidden),
   a nie akcją — nie może wyglądać jak przycisk. */
.news-card .news-card-link[aria-hidden="true"] {
    display: inline-block;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    font-weight: 600;
    font-style: italic;
    color: var(--text-secondary);
    cursor: default;
}

/* --- Pola formularzy (forms/Input.jsx) ------------------------------------ */
.signup-form input[type="email"],
.signup-form input[type="text"],
.signup-form textarea,
.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="tel"],
.profile-form input[type="url"],
.profile-form input[type="date"],
.profile-form select,
.profile-form textarea,
.auth-magic-link-input,
.recruitment-form input[type="text"],
.recruitment-form input[type="date"],
.recruitment-form input[type="url"],
.recruitment-form select,
.recruitment-form textarea,
.cvr-field input[type="text"],
.cvr-field textarea,
.agent-field input[type="text"],
.agent-field textarea {
    padding: 12px 16px;
    border-radius: var(--radius-m);
    border: var(--border-w) solid var(--border-default);
    background: var(--white);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-body-m);
    outline: none;
    transition: border-color var(--duration-base) var(--ease-standard);
}

.signup-form input:focus,
.signup-form textarea:focus,
.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus,
.auth-magic-link-input:focus,
.recruitment-form input:focus,
.recruitment-form select:focus,
.recruitment-form textarea:focus,
.cvr-field input:focus,
.cvr-field textarea:focus,
.agent-field input:focus,
.agent-field textarea:focus {
    border-color: var(--border-strong);
}

/* --- Plakietki (core/Badge.jsx) ------------------------------------------- */
.recruitment-status,
.payment-status,
.agent-badge,
.cvr-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* --- Stopka --------------------------------------------------------------- */
.footer-logo {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: normal;
}

footer {
    border-top: var(--border-w) solid var(--border-strong);
}

/* ===== Ujawnienie treści generowanych przez AI (Issue #22) =====
   Wspólny styl dla partiala templates/_ai_notice.html. Trzymany w style.css
   (a nie w agent.css), bo notka pojawia się także na osi czasu rekrutacji,
   gdzie agent.css nie jest linkowany. Kolory oparte o tokeny, więc tryb
   wysokiego kontrastu przejmuje je automatycznie. */
.ai-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border: var(--border-w) solid var(--border-default);
    border-left: var(--border-w-thick) solid var(--brand-primary);
    border-radius: var(--radius-m);
    background: var(--bg-alt);
    font-family: var(--font-body);
    font-size: var(--text-body-s);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.ai-notice strong {
    color: var(--text-primary);
}

.ai-notice-badge {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--text-inverse);
    font-weight: 700;
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-wide);
}

/* W wysokim kontraście plakietka marki jest biała na czerni – tak samo jak
   pozostałe elementy brandowe (patrz sekcja „Klasy dostępności"). */
body.high-contrast .ai-notice-badge {
    background-color: #FFFFFF;
    color: #000000;
}

/* ===== FAQ (Issue #152) =====
   Akordeon oparty na natywnych <details>/<summary> - działa bez JS, jest
   klawiaturowo dostępny (Tab + Enter/Space) i sam ogłasza stan rozwinięcia
   czytnikom ekranu. Karty i kolory pochodzą z tych samych tokenów co kafelki
   (.tile) i strona regulaminu (.legal-container), więc wysoki kontrast działa
   automatycznie - patrz zmienne nadpisywane w body.high-contrast wyżej. */
.faq-page {
    padding: 1rem 1.5rem 4rem;
}

.faq-container {
    max-width: 760px;
    margin: 0 auto;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: var(--color-tile-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    padding: 0.25rem 1.25rem;
}

.faq-question {
    cursor: pointer;
    list-style: none;
    padding: 0.9rem 1.75rem 0.9rem 0;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
}

/* Chevron rysowany jako pseudo-element, żeby nie zależeć od domyślnego
   trójkąta <summary> (niekonsekwentny między przeglądarkami) - obraca się
   180° po otwarciu <details>. */
.faq-question::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.25rem;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid var(--color-text-light);
    border-bottom: 2px solid var(--color-text-light);
    transform: translateY(-65%) rotate(45deg);
    transition: transform var(--transition-speed);
}

.faq-item[open] .faq-question::after {
    transform: translateY(-35%) rotate(-135deg);
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.faq-answer {
    margin: 0 0 1rem;
    color: var(--color-text);
    line-height: 1.6;
}

body.reduced-motion .faq-question::after {
    transition: none;
}