/* ============================================================
   FindOurDate - Bootstrap-first theme
   Keeps the existing Razor structure, but restyles it using the
   new bootstrap-based visual language from the mockup.
   ============================================================ */

:root,
[data-bs-theme="light"] {
    --font-display: "Archivo", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --display-weight: 800;
    --display-tracking: -0.035em;

    --bg: #f3f4ec;
    --bg-2: #e7e9da;
    --surface: #ffffff;
    --surface-2: #f7f8f0;
    --ink: #16170f;
    --ink-soft: #54584a;
    --ink-faint: #898d7b;
    --line: #e2e4d4;
    --line-soft: #eceee0;

    --primary: #bee63b;
    --primary-press: #aed42e;
    --on-primary: #1a1d10;
    --accent: #bee63b;
    --accent-soft: #edf6cf;
    --link: #3d6310;
    --eyebrow: #3d6310;
    --danger: #c5402f;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(30, 35, 10, 0.06);
    --shadow: 0 10px 30px -16px rgba(30, 40, 10, 0.28), 0 2px 6px -3px rgba(30, 40, 10, 0.10);
    --shadow-lg: 0 28px 60px -28px rgba(30, 40, 10, 0.40);

    --heat-0: var(--surface-2);
    --heat-1: #eef6d6;
    --heat-2: #e0f0ac;
    --heat-3: #cfea7e;
    --heat-4: #c2e455;
    --heat-5: #aeda32;
    --heat-ink-hi: #1a1d10;
    --heat-best: #4e7a12;

    /* Skala „mojego głosu" — odrębna od limonkowej skali grupowej (heat-*). Czysta zieleń, ta sama
       tożsamość co awatar „Ty" (#16a34a) i co kolory typów głosu w edytorze slotu. Te same wartości
       obowiązują w obu motywach, żeby kolor paska na kalendarzu zawsze odpowiadał wybranemu typowi:
       Najlepiej (strong) = #15803d, Pasuje (mid) = #22c55e, Może być (soft) = #86efac. */
    --mine-strong: #15803d;
    --mine-mid: #22c55e;
    --mine-soft: #86efac;

    /* Waga głosu: bursztyn = najlepszy, niebieski = pasuje, szary = może być. Te trzy kolory są
       wspólne dla obwódek awatarów, pasków podziału głosów, pigułek w widoku dnia, legendy oraz
       przycisków typu odpowiedzi w edytorze slotu — jeden kod = jedna waga w całym interfejsie. */
    --vt-best: #b26a00;
    --vt-best-bg: #fbefd2;
    --vt-good: #2563c9;
    --vt-good-bg: #dce8fb;
    --vt-maybe: #41464c;
    --vt-maybe-bg: #e2e4e7;

    --maxw: 1480px;
}

[data-bs-theme="dark"] {
    --bg: #14160f;
    --bg-2: #1c1f15;
    --surface: #1e2118;
    --surface-2: #23271b;
    --ink: #f2f3ea;
    --ink-soft: #bdc2ae;
    --ink-faint: #8b9079;
    --line: #343a29;
    --line-soft: #2b3022;

    --primary: #c6f24e;
    --primary-press: #b2de3c;
    --on-primary: #181b10;
    --accent: #c6f24e;
    --accent-soft: #2d3a16;
    --link: #c6f24e;
    --eyebrow: #c6f24e;
    --danger: #ff8771;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.60);
    --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.80);

    --heat-1: #2b3a1c;
    --heat-2: #3f561f;
    --heat-3: #5e7d23;
    --heat-4: #8fb52f;
    --heat-5: #c6f24e;
    --heat-ink-hi: #181b10;
    --heat-best: #c6f24e;

    /* --mine-* celowo NIE są tu nadpisywane: kolor „mojego głosu" musi być identyczny jak kolor
       wybranego typu w edytorze slotu (Najlepiej/Pasuje/Może być) w OBU motywach — inaczej pasek na
       kalendarzu nie zgadza się z tym, co kliknął użytkownik. Dziedziczymy stałą paletę z :root. */

    /* Waga głosu — jaśniejsze odcienie i ciemniejsze tła, by obwódki i pigułki były czytelne na ciemnym. */
    --vt-best: #f0b53c;
    --vt-best-bg: #3a3015;
    --vt-good: #7fb0ff;
    --vt-good-bg: #1b2a45;
    --vt-maybe: #c2c6cd;
    --vt-maybe-bg: #2d3036;
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font-body);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-soft);
    --bs-tertiary-color: var(--ink-faint);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--bg-2);
    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-pill: var(--radius-pill);
    --bs-primary: var(--primary);
    --bs-primary-rgb: 190, 230, 59;
    --bs-link-color: var(--link);
    --bs-link-color-rgb: 61, 99, 16;
    --bs-link-hover-color: var(--link);
    --bs-heading-color: var(--ink);
    --bs-emphasis-color-rgb: 22, 23, 15;
}

[data-bs-theme="dark"] {
    --bs-primary-rgb: 198, 242, 78;
    --bs-link-color-rgb: 198, 242, 78;
}

/* ── Radzen theme bridge ─────────────────────────────────────────────
   We load Radzen's variable-driven "standard-base.css", which otherwise
   falls back to its built-in light palette with a blue primary (#1151f3).
   Mapping the --rz-* variables onto our own design tokens makes every
   Radzen control (date/time pickers, popups, select bars, buttons, focus
   rings) match the app in BOTH light and dark mode. The base ramp is
   expressed as color-mix between --surface and --ink, so it inverts
   automatically when those tokens flip per theme. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    /* Neutral ramp (50 = surface … 900 = ink), adapts per theme */
    --rz-base-50: var(--surface);
    --rz-base-100: var(--surface-2);
    --rz-base-200: color-mix(in srgb, var(--ink) 8%, var(--surface));
    --rz-base-300: var(--line);
    --rz-base-400: color-mix(in srgb, var(--ink) 25%, var(--surface));
    --rz-base-500: color-mix(in srgb, var(--ink) 42%, var(--surface));
    --rz-base-600: var(--ink-faint);
    --rz-base-700: color-mix(in srgb, var(--ink) 65%, var(--surface));
    --rz-base-800: var(--ink-soft);
    --rz-base-900: var(--ink);

    /* Surfaces & text */
    --rz-body-background-color: var(--bg);
    --rz-base-background-color: var(--surface);
    --rz-content-background-color: var(--surface);
    --rz-panel-background-color: var(--surface);
    --rz-text-color: var(--ink);
    --rz-text-secondary-color: var(--ink-soft);
    --rz-text-tertiary-color: var(--ink-faint);
    --rz-text-disabled-color: var(--ink-faint);
    --rz-text-contrast-color: var(--on-primary);
    --rz-border-color: var(--line);

    /* Inputs */
    --rz-input-background-color: var(--surface-2);
    --rz-input-value-color: var(--ink);
    --rz-input-placeholder-color: var(--ink-faint);
    --rz-input-disabled-background-color: var(--surface-2);
    --rz-input-disabled-color: var(--ink-faint);

    /* Primary → lime accent */
    --rz-primary: var(--primary);
    --rz-primary-light: var(--primary);
    --rz-primary-lighter: var(--accent-soft);
    --rz-primary-dark: var(--primary-press);
    --rz-primary-darker: var(--primary-press);
    --rz-on-primary: var(--on-primary);
    --rz-on-primary-light: var(--on-primary);
    --rz-on-primary-lighter: var(--primary);
    --rz-on-primary-dark: var(--on-primary);
    --rz-on-primary-darker: var(--on-primary);

    /* Secondary → neutral (avoids the default blue leaking in) */
    --rz-secondary: var(--ink-soft);
    --rz-secondary-light: var(--ink-faint);
    --rz-secondary-lighter: var(--surface-2);
    --rz-secondary-dark: var(--ink);
    --rz-secondary-darker: var(--ink);
    --rz-on-secondary: var(--surface);

    /* Danger */
    --rz-danger: var(--danger);
    --rz-danger-light: var(--danger);
    --rz-danger-dark: var(--danger);
    --rz-on-danger: #ffffff;

    /* Selection / scheme */
    --rz-selection-color: var(--primary);
    --rz-color-scheme: light dark;

    /* DatePicker */
    --rz-datepicker-trigger-icon-color: var(--primary);
    --rz-datepicker-trigger-icon-hover-color: var(--primary-press);
    --rz-datepicker-panel-background-color: var(--surface);
    --rz-datepicker-panel-border: 1px solid var(--line);
    --rz-datepicker-panel-shadow: var(--shadow-lg);
    --rz-datepicker-header-background-color: var(--surface-2);
    --rz-datepicker-header-border: 1px solid var(--line);
    --rz-datepicker-header-color: var(--ink);
    --rz-datepicker-calendar-border: 1px solid var(--line);
    --rz-datepicker-calendar-color: var(--ink);
    --rz-datepicker-calendar-header-color: var(--ink-soft);
    --rz-datepicker-calendar-hover-background-color: var(--accent-soft);
    --rz-datepicker-calendar-hover-color: var(--ink);
    --rz-datepicker-calendar-selected-background-color: var(--primary);
    --rz-datepicker-calendar-selected-color: var(--on-primary);
    --rz-datepicker-calendar-selected-hover-background-color: var(--primary-press);
    --rz-datepicker-calendar-selected-hover-color: var(--on-primary);
    --rz-datepicker-calendar-today-background-color: var(--accent-soft);
    --rz-datepicker-calendar-today-color: var(--link);
    --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 2px var(--primary);
}

[data-bs-theme="light"] {
    --date-picker-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233d6310' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3.5 9.5h17M5.5 4.5h13a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-12a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    --time-picker-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233d6310' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E");
    --native-picker-color-scheme: light;
}

[data-bs-theme="dark"] {
    --date-picker-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23c6f24e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3.5 9.5h17M5.5 4.5h13a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-12a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    --time-picker-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23c6f24e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E");
    --native-picker-color-scheme: dark;
}

* {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

html {
    background: var(--bg);
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 14%, transparent), transparent 28vw),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--primary) 7%, transparent), transparent 32vw),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 34%, var(--bg)) 0%, var(--bg) 32%, var(--bg) 100%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: var(--link);
}

a:hover {
    color: var(--link);
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    margin-top: 0;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    line-height: 1.03;
}

p {
    margin-top: 0;
}

.eyebrow {
    color: var(--eyebrow);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.muted {
    color: var(--ink-soft);
}

.faint {
    color: var(--ink-faint);
}

.page,
.create-page,
.event-page,
.empty-state,
.loading-state {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 34px 28px 80px;
}

.screen {
    display: none;
}

.screen.is-active {
    display: block;
}

@media (max-width: 720px) {
    .page,
    .create-page,
    .event-page,
    .empty-state,
    .loading-state {
        padding: 22px 16px 60px;
    }
}

.surface-card,
.event-form,
.share-panel,
.sp2-card,
.cal,
.cancelled-banner,
.final-banner,
.success-panel,
.alert-message {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    font-weight: 700;
}

.pill svg,
.event-meta span svg {
    width: 15px;
    height: 15px;
    opacity: 0.62;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--radius-pill);
    font-weight: 800;
}

.btn-brand,
.primary-action,
.copy-button,
.cookie-accept {
    --bs-btn-color: var(--on-primary);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-press);
    --bs-btn-hover-border-color: var(--primary-press);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-press);
    --bs-btn-active-border-color: var(--primary-press);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    box-shadow: var(--shadow-sm);
}

.btn-ghost,
.text-button,
.link-act,
.link-danger,
.primary-link {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--ink-faint);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--surface-2);
    --bs-btn-active-border-color: var(--ink-faint);
}

.btn-brand-danger,
.text-button.danger,
.link-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--danger);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
}

.text-button,
.link-act,
.link-danger,
.primary-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--link);
    font-weight: 800;
    text-decoration: none;
    padding: 0;
}

.text-button:hover,
.link-act:hover,
.link-danger:hover,
.primary-link:hover {
    color: var(--link);
    text-decoration: underline;
}

.text-button.danger,
.link-danger {
    color: var(--danger);
}

.text-button.danger:hover,
.link-danger:hover {
    color: var(--danger);
}

.btn-ghost,
.btn-brand,
.btn-brand-danger {
    border-radius: var(--radius-pill);
}

.form-control,
.form-select,
input.form-control,
textarea.form-control {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder,
textarea.form-control::placeholder,
input.form-control::placeholder {
    color: var(--ink-faint);
}

.form-control:focus,
.form-select:focus,
input.form-control:focus,
textarea.form-control:focus {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 24%, transparent);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled):not([readonly]),
input.form-control:hover:not(:disabled):not([readonly]),
textarea.form-control:hover:not(:disabled):not([readonly]) {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--line)) !important;
}

input[type="date"].form-control,
input[type="time"].form-control {
    padding-inline-end: 42px;
    background-color: var(--surface-2);
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    color-scheme: var(--native-picker-color-scheme);
    accent-color: var(--primary);
}

input[type="date"].form-control {
    background-image: var(--date-picker-icon);
}

input[type="time"].form-control {
    background-image: var(--time-picker-icon);
}

input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 2px;
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}

.fod-date-picker.rz-datepicker,
.fod-date-picker .rz-datepicker,
.fod-date-picker .rz-state-default {
    width: 100%;
}

.fod-date-picker .rz-inputtext,
.fod-date-picker.rz-datepicker .rz-inputtext {
    min-height: 44px;
    width: 100%;
    padding: 9px 42px 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fod-date-picker .rz-inputtext:focus,
.fod-date-picker.rz-datepicker .rz-inputtext:focus {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 24%, transparent);
}

.fod-date-picker:hover .rz-inputtext,
.fod-date-picker.rz-datepicker:hover .rz-inputtext {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--line)) !important;
}

.fod-date-picker:focus-within .rz-inputtext,
.fod-date-picker.rz-datepicker:focus-within .rz-inputtext {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--line)) !important;
}

.fod-date-picker .rz-datepicker-trigger,
.fod-date-picker.rz-datepicker .rz-datepicker-trigger {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    box-shadow: none;
}

.fod-date-picker .rz-datepicker-trigger:hover,
.fod-date-picker .rz-datepicker-trigger:focus,
.fod-date-picker .rz-datepicker-trigger:focus-visible,
.fod-date-picker.rz-datepicker .rz-datepicker-trigger:hover,
.fod-date-picker.rz-datepicker .rz-datepicker-trigger:focus,
.fod-date-picker.rz-datepicker .rz-datepicker-trigger:focus-visible {
    background: transparent !important;
    background-image: none !important;
    color: var(--primary);
    box-shadow: none !important;
    outline: none;
}

.fod-date-picker .rz-datepicker-trigger .rzi,
.fod-date-picker .rz-datepicker-trigger .rz-button-icon,
.fod-date-picker.rz-datepicker .rz-datepicker-trigger .rzi,
.fod-date-picker.rz-datepicker .rz-datepicker-trigger .rz-button-icon {
    width: 18px;
    height: 18px;
    font-size: 0;
    color: transparent;
    background-image: var(--date-picker-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

.fod-time-picker .rz-datepicker-trigger .rzi,
.fod-time-picker .rz-datepicker-trigger .rz-button-icon,
.fod-time-picker.rz-datepicker .rz-datepicker-trigger .rzi,
.fod-time-picker.rz-datepicker .rz-datepicker-trigger .rz-button-icon {
    background-image: var(--time-picker-icon);
}

.input-group .form-control {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-group .btn {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.alert-message {
    padding: 12px 14px;
    color: var(--danger);
    font-weight: 700;
}

.success-message,
.success-panel {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.empty-state,
.loading-state {
    display: grid;
    place-items: center;
    gap: 14px;
    text-align: center;
    min-height: 55vh;
}

.page-hero {
    padding-top: 10px;
}

.page-hero__copy {
    max-width: 760px;
}

.page-hero h1 {
    font-size: clamp(2.15rem, 5vw, 4.2rem);
    line-height: 1;
}

.page-hero p.text-secondary {
    color: var(--ink-soft) !important;
}

.empty-card {
    border-style: dashed;
}

.empty-state h1 {
    font-size: clamp(34px, 5vw, 56px);
}

.create-page {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(260px, 0.82fr) minmax(320px, 1fr);
    align-items: start;
}

.intro {
    position: sticky;
    top: 96px;
    padding-top: 34px;
}

.intro h1 {
    font-size: clamp(2.15rem, 5vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: 0;
    max-width: 780px;
}

.intro h1:focus,
.intro h1:focus-visible {
    outline: none;
}

/* Blazor <FocusOnNavigate Selector="h1"> sets tabindex="-1" on the page heading and focuses it
   after every navigation (for screen readers). On a non-interactive heading the browser's default
   focus ring just looks like a stray box, so suppress the visual ring — focus is still moved. */
h1[tabindex]:focus,
h1[tabindex]:focus-visible {
    outline: none;
}

.intro p:not(.eyebrow),
.event-header p:not(.eyebrow),
.section-title-row p:not(.eyebrow) {
    max-width: 660px;
    color: var(--ink-soft);
    line-height: 1.6;
}

.create-hero__steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 34ch;
    margin-top: 28px;
}

.create-hero__step {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.create-hero__step b {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
}

.create-hero__step span {
    padding-top: 2px;
    color: var(--ink-soft);
    font-size: 14.5px;
}

@media (max-width: 860px) {
    .create-page {
        grid-template-columns: 1fr;
    }

    .intro {
        position: static;
        padding-top: 0;
    }

    .create-hero__steps {
        display: none;
    }
}

.event-form {
    display: grid;
    gap: 20px;
    padding: 24px;
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 0.25rem;
}

/* ----- Moje wydarzenia / spotkania — lista (wariant z mockupu) ----- */
.list-head h1 {
    margin: 8px 0 8px;
    font-size: clamp(36px, 5vw, 56px);
}

.list-head p:not(.eyebrow) {
    margin: 0;
    color: var(--ink-soft);
    font-size: 15px;
}

.evt {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, transform 0.12s ease;
}

.evt:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.evt__date {
    flex: 0 0 auto;
    width: 60px;
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.evt__date .m {
    padding: 3px 0;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.evt__date .d {
    padding: 6px 0 7px;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: 24px;
    line-height: 1;
}

.evt__body {
    flex: 1;
    min-width: 0;
}

.evt__title {
    display: inline-block;
    margin: 0 0 5px;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: 19px;
    line-height: 1.1;
    text-decoration: none;
}

.evt__title:hover {
    color: var(--ink);
    text-decoration: none;
}

.evt__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--ink-soft);
    font-size: 13px;
}

.evt__sub .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-faint);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
}

.status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status--open {
    background: color-mix(in srgb, var(--heat-5) 16%, var(--surface));
    color: var(--heat-best);
}

.status--open::before {
    background: var(--heat-5);
}

.status--set {
    background: var(--accent-soft);
    color: var(--accent);
}

.status--set::before {
    background: var(--accent);
}

.status--draft {
    background: var(--bg-2);
    color: var(--ink-soft);
}

.status--draft::before {
    background: var(--ink-faint);
}

.status--closed,
.status--cancelled {
    background: color-mix(in srgb, var(--danger) 16%, var(--surface));
    color: var(--danger);
}

.status--closed::before,
.status--cancelled::before {
    background: var(--danger);
}

.evt__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.confirm-delete {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--ink-soft);
    font-size: 13px;
}

@media (max-width: 620px) {
    .evt {
        flex-wrap: wrap;
        gap: 14px;
    }

    .evt__actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 12px;
        border-top: 1px solid var(--line-soft);
    }
}

.field-grid,
.duration-timezone-grid,
.choice-row {
    display: grid;
    gap: 16px;
}

.field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.duration-timezone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 920px) {
    .field-grid,
    .duration-timezone-grid {
        grid-template-columns: 1fr;
    }
}

.event-form label,
.sp2-card label,
.sp2-foot--form label {
    display: grid;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.field-block {
    display: grid;
    gap: 12px;
    padding-top: 18px;
}

.event-form > .field-block + .field-block {
    border-top: 1px solid var(--line-soft);
}

.field-block > span,
.field-header > span {
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

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

.period-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* "Advanced options" disclosure on the create form: keeps the essentials front and centre while the
   rarely-touched configuration (time zone, deadline, weekdays, flexibility, list, visibility) folds away. */
.advanced-section {
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}

.advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.advanced-toggle:hover {
    border-color: var(--ink-faint);
}

.advanced-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform .18s ease;
}

.advanced-toggle.is-open svg {
    transform: rotate(180deg);
}

.advanced-options {
    display: grid;
    gap: 0;
    margin-top: 4px;
}

.advanced-options__hint {
    padding-top: 18px;
}

/* The folded blocks aren't direct children of .event-form anymore, so re-create the row separators
   and top spacing the grid/field-blocks would otherwise inherit there. */
.advanced-options > .duration-timezone-grid {
    padding-top: 18px;
}

.advanced-options > .field-block {
    border-top: 1px solid var(--line-soft);
}

.range-hint,
.mode-note,
.invite-link-item .range-hint,
.you-hint,
.calendar-tz-note {
    color: var(--ink-soft);
    font-size: 14.5px;
}

.period-row,
.invited-row {
    display: grid;
    gap: 12px;
    align-items: start;
}

.period-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.period-row--blocked {
    opacity: 0.92;
    background: color-mix(in srgb, var(--surface-2) 78%, var(--danger));
}

.period-fields {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 920px) {
    .period-fields {
        grid-template-columns: 1fr;
    }

    .period-row {
        grid-template-columns: 1fr;
    }
}

.period-time-field {
    grid-column: 1 / -1;
}

.time-range-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-range-control .fod-time-picker {
    flex: 1 1 0;
    min-width: 0;
}

.deadline-date-field,
.deadline-time-field {
    display: grid;
    gap: 5px;
}

.deadline-date-field {
    flex: 1 1 220px;
    min-width: 180px;
}

.deadline-time-field {
    flex: 0 0 150px;
}

.deadline-control .form-control {
    min-height: 44px;
}

.deadline-control .fod-time-picker {
    width: 100%;
}

.deadline-field-label {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.time-range-control input[type="time"].time-control {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding-inline-start: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.time-range-control input[type="time"].time-control:focus {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 18%, transparent);
    outline: none;
}

.time-range-control input[type="time"].time-control::-webkit-inner-spin-button,
.time-range-control input[type="time"].time-control::-webkit-clear-button {
    display: none;
}

.time-range-control input[type="time"].time-control::-webkit-datetime-edit {
    padding: 0;
}

.time-range-control input[type="time"].time-control::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.time-range-control input[type="time"].time-control::-webkit-datetime-edit-hour-field,
.time-range-control input[type="time"].time-control::-webkit-datetime-edit-minute-field,
.time-range-control input[type="time"].time-control::-webkit-datetime-edit-ampm-field {
    padding: 0 1px;
}

.time-range-control input[type="time"].time-control::-moz-focus-inner {
    border: 0;
    padding: 0;
}

@media (max-width: 520px) {
    .deadline-control {
        align-items: stretch;
        flex-direction: column;
    }

    .deadline-date-field,
    .deadline-time-field {
        flex-basis: auto;
        min-width: 0;
        width: 100%;
    }
}

.time-range-separator {
    color: var(--ink-faint);
    font-weight: 700;
}

.period-remove,
.chip-remove {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--danger);
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
}

.duration-field {
    min-width: 0;
}

.duration-input {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
}

.day-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.day-toggle {
    min-width: 44px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-weight: 700;
}

.day-toggle.active,
.day-toggle.is-on {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

.choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-row.choice-row--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 860px) {
    .choice-row,
    .choice-row.choice-row--three {
        grid-template-columns: 1fr;
    }
}

.choice-card {
    position: relative;
    display: grid;
    gap: 10px;
    min-height: 128px;
    padding: 18px 48px 18px 18px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 94%, var(--surface-2));
    color: var(--ink);
    text-align: left;
    box-shadow: none;
    transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.choice-card::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: transparent;
}

.choice-card.active::before {
    border-color: var(--primary);
}

.choice-card.active::after {
    content: "";
    position: absolute;
    top: 21px;
    right: 21px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.choice-card strong {
    font-size: 16px;
}

.choice-card span {
    color: var(--ink-soft);
    font-size: 13.8px;
    line-height: 1.5;
}

.choice-card:hover,
.choice-card.active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 54%, var(--line));
}

.choice-card.active {
    background: color-mix(in srgb, var(--primary) 17%, var(--surface));
}

.invited-editor {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}

.invited-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

@media (max-width: 860px) {
    .invited-row {
        grid-template-columns: 1fr;
    }
}

.inline-check {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.event-page {
    display: grid;
    gap: 28px;
}

.event-title {
    margin: 6px 0 16px;
    font-size: clamp(34px, 5vw, 60px);
}

.event-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.event-header__aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    min-width: min(100%, 320px);
}

.event-header__aside .share-panel {
    align-self: stretch;
}

@media (max-width: 1024px) {
    /* "Zarządzaj" to rzadko używane akcje (edycja, anulowanie). Zamiast pełnoszerokościowej pigułki
       w osobnej linii, zwijamy go do małego przycisku z ikoną "kebab" i trzymamy w tym samym wierszu
       co tytuł, dosuniętego do prawej (blok z tytułem zajmuje resztę szerokości i się zawija). */
    .event-header {
        align-items: flex-start;
    }

    .event-header > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .event-header__aside {
        min-width: 0;
        width: auto;
        flex: 0 0 auto;
        align-items: flex-end;
    }

    .event-header__aside .menu__btn {
        width: auto;
        padding: 9px 11px;
    }

    .menu__btn-label,
    .menu__btn .caret {
        display: none;
    }

    /* Wyższa specyficzność (0,2,0) niż domyślne .menu__btn-dots{display:none} zdefiniowane niżej w pliku
       — inaczej późniejsza reguła by je nadpisała i ikona nie pokazałaby się na mobile. */
    .event-header__aside .menu__btn-dots {
        display: inline-block;
    }
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    font-weight: 700;
}

.event-meta span svg {
    width: 15px;
    height: 15px;
    opacity: 0.62;
}

/* Voting-deadline badge: highlighted while open, red once the deadline passed. */
.event-meta span.event-deadline {
    border-color: var(--brand, #84cc16);
}

.event-meta span.event-deadline--passed {
    border-color: #dc2626;
    color: #dc2626;
}

/* Partial-coverage line under a multi-day window's ranking row ("Anna: 12/14 dni"). */
.rank__partials {
    margin-top: 3px;
    font-size: 12px;
}

.share-panel {
    padding: 14px 16px;
}

.share-panel span {
    display: block;
    margin-bottom: 9px;
    color: var(--ink-faint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.share-link-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.share-link-row code,
.share-link-row .share-link-input {
    flex: 1 1 220px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
}

.share-link-row .share-link-input {
    font: inherit;
    width: 100%;
}

.share-link-row .share-link-input:focus {
    outline: none;
    border-color: var(--accent);
}

.share-link-row .copy-button {
    flex: 0 0 auto;
}

.event-actions {
    position: relative;
}

.menu {
    position: relative;
}

.menu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    padding: 11px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
}

.menu__btn .caret {
    width: 16px;
    height: 16px;
}

/* Ikona "kebab" (trzy kropki) jest zapasem na mobile — na desktopie przycisk pokazuje pełny tekst. */
.menu__btn-dots {
    display: none;
    width: 18px;
    height: 18px;
}

.menu__pop {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    min-width: 280px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.menu.is-open .menu__pop {
    display: grid;
    gap: 4px;
}

.menu__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    text-align: left;
}

.menu__item:hover {
    background: var(--surface-2);
}

.menu__item svg {
    width: 16px;
    height: 16px;
}

.menu__item--danger {
    color: var(--danger);
}

.menu__sep {
    height: 1px;
    margin: 4px 0;
    background: var(--line);
}

.cancelled-banner,
.final-banner {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
}

.cancelled-banner strong,
.final-banner strong {
    font-weight: 800;
}

.final-date {
    font-weight: 800;
}

.final-local {
    color: var(--ink-soft);
    font-size: 14px;
}

/* Final-date banner header: the "Termin ustalony:" label on the left, the small calendar-export
   dropdown trigger pinned to the right. */
.final-banner__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Calendar-export dropdown: a single small icon button (no text) that reuses the .menu / .menu__pop
   open mechanics. Opens leftwards (right:0) so it stays on screen when pinned to the banner's right. */
.cal-menu {
    position: relative;
    flex: 0 0 auto;
}

.cal-menu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--primary);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--link);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.cal-menu__btn:hover {
    background: var(--surface-2);
}

.cal-menu__btn svg {
    width: 20px;
    height: 20px;
}

/* Rich menu items: bold action name with a subtle one-line description underneath (the explanations
   that used to live in the removed Help popover are now folded into each option). */
.menu__pop--rich {
    min-width: 300px;
    max-width: 340px;
}

.menu__item--rich {
    align-items: flex-start;
    padding: 11px 12px;
    text-decoration: none;
}

.menu__item-text {
    display: grid;
    gap: 2px;
}

.menu__item-text strong {
    font-weight: 800;
}

.menu__item-text small {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
}

.menu__item--rich:disabled {
    cursor: default;
    opacity: 0.6;
}

/* The "Added to your calendar" confirmation isn't actionable — grey it out (muted text, no hover
   affordance) so it reads as a disabled state, not a clickable option. */
.menu__item--static,
.menu__item--static:hover {
    background: transparent;
    cursor: default;
    opacity: 0.55;
}

.menu__item--static .menu__item-text strong {
    font-weight: 700;
    color: var(--ink-soft);
}

.event-layout {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
    align-items: start;
}

.event-layout.panel-collapsed {
    grid-template-columns: minmax(0, 1fr);
}

.side-panel {
    display: grid;
    gap: 16px;
    align-content: start;
}

.event-layout.panel-collapsed .side-panel {
    display: none;
}

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

.calendar-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
}

.section-title-row,
.calendar-head-actions,
.calendar-check-row,
.sp2-card__head,
.rank__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title-row,
.sp2-card__head {
    justify-content: space-between;
}

.calendar-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.heat-legend,
.legend {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.heat-legend__label,
.legend__scale,
.legend__best {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 600;
}

.heat-legend__ramp,
.legend__ramp {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 5px;
}

.heat-legend__ramp i,
.legend__ramp i {
    display: block;
    width: 22px;
    height: 13px;
}

/* Legenda wag głosu — objaśnia obwódki awatarów i ikony przy nazwiskach: ★ najlepszy / ✓ pasuje / ~ może być. */
.vote-legend {
    gap: 12px;
}

.vote-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-soft);
    white-space: nowrap;
}

.vote-legend__item svg {
    width: 14px;
    height: 14px;
}

.vote-legend__item--best svg {
    color: var(--vt-best);
}

.vote-legend__item--good svg {
    color: var(--vt-good);
}

.vote-legend__item--maybe svg {
    color: var(--vt-maybe);
}

.overlay-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.overlay-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
}

.overlay-chip i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.calendar-check-row {
    flex-wrap: wrap;
}

.busy-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
    font-size: 13px;
}

.legend-box {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--primary);
}

.busy-box {
    background: var(--danger);
}

.calendar-msg {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ink-soft);
}

.busy-details {
    font-size: 13px;
    color: var(--ink-soft);
}

.busy-details > summary {
    cursor: pointer;
    width: fit-content;
    color: var(--ink-soft);
    user-select: none;
}

.busy-details[open] > summary {
    margin-bottom: 6px;
}

.busy-list {
    margin: 0;
    padding-left: 20px;
    color: var(--ink-soft);
}

.cal,
.cal__shell {
    overflow: hidden;
}

.cal__toolbar,
.cal,
.fod-cal {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.fod-cal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.cal__navbtns,
.fod-cal-navbtns {
    display: inline-flex;
    gap: 6px;
}

.cal__iconbtn,
.fod-cal-iconbtn,
.cal__today,
.fod-cal-today {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
}

.cal__iconbtn:hover,
.fod-cal-iconbtn:hover,
.cal__today:hover,
.fod-cal-today:hover {
    background: var(--surface-2);
    border-color: var(--ink-faint);
}

.cal__iconbtn svg,
.fod-cal-iconbtn svg {
    width: 17px;
    height: 17px;
}

.cal__today,
.fod-cal-today {
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    width: auto;
}

.cal__month,
.fod-cal-month-label {
    margin: 0 auto 0 8px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: var(--display-weight);
    text-transform: capitalize;
}

.cal__views,
.fod-cal-views {
    display: inline-flex;
    margin-left: auto;
    padding: 4px;
    gap: 2px;
    border-radius: var(--radius-pill);
    background: var(--bg-2);
}

.cal__views button,
.fod-cal-views button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
}

.cal__views button svg,
.fod-cal-views button svg {
    width: 15px;
    height: 15px;
}

.cal__views button.is-active,
.fod-cal-views button.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.fod-cal-month {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.fod-cal-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.cal__weekdays,
.fod-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
}

.cal__weekdays > div,
.fod-cal-weekdays > div {
    padding: 11px 12px;
    color: var(--ink-faint);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cal__weekdays > div:not(:first-child),
.fod-cal-weekdays > div:not(:first-child) {
    border-left: 1px solid var(--line-soft);
}

.cal__grid,
.fod-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 1fr;
}

.cal-day,
.fod-cal-day {
    position: relative;
    min-height: 116px;
    padding: 9px 10px;
    border-left: 1px solid var(--line-soft);
    border-top: 1px solid var(--line-soft);
    color: var(--ink);
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.12s;
}

.cal-day:nth-child(7n+1),
.fod-cal-day:nth-child(7n+1) {
    border-left: 0;
}

.cal__grid > .cal-day:nth-child(-n+7),
.fod-cal-grid > .fod-cal-day:nth-child(-n+7) {
    border-top: 0;
}

.cal-day[data-heat="0"],
.fod-cal-day[data-heat="0"],
.tg-slot[data-heat="0"],
.fod-tg-slot[data-heat="0"] {
    background-color: var(--heat-0);
}

.cal-day[data-heat="1"],
.fod-cal-day[data-heat="1"],
.tg-slot[data-heat="1"],
.fod-tg-slot[data-heat="1"] {
    background-color: var(--heat-1);
}

.cal-day[data-heat="2"],
.fod-cal-day[data-heat="2"],
.tg-slot[data-heat="2"],
.fod-tg-slot[data-heat="2"] {
    background-color: var(--heat-2);
}

.cal-day[data-heat="3"],
.fod-cal-day[data-heat="3"],
.tg-slot[data-heat="3"],
.fod-tg-slot[data-heat="3"] {
    background-color: var(--heat-3);
}

.cal-day[data-heat="4"],
.fod-cal-day[data-heat="4"],
.tg-slot[data-heat="4"],
.fod-tg-slot[data-heat="4"] {
    background-color: var(--heat-4);
}

.cal-day[data-heat="5"],
.fod-cal-day[data-heat="5"],
.tg-slot[data-heat="5"],
.fod-tg-slot[data-heat="5"] {
    background-color: var(--heat-5);
}

.cal-day:hover:not(.cal-day--disabled):not(.cal-day--out),
.fod-cal-day:hover:not(.fod-cal-day--disabled):not(.fod-cal-day--out) {
    box-shadow: inset 0 0 0 2px var(--primary);
}

/* Po najechaniu komórka odsłania overflow i wychodzi na wierzch,
   żeby popover z listą użytkowników nie był przycięty przez overflow:hidden. */
.cal-day:hover,
.fod-cal-day:hover {
    overflow: visible;
    z-index: 20;
}

/* Karta kalendarza ma overflow:hidden (zaokrąglone rogi) — przy najechaniu na
   dzień pozwalamy popoverowi awatarów wyjść poza krawędź karty. */
.fod-cal:has(.fod-cal-day:hover) {
    overflow: visible;
}

/* Dla dni w prawych kolumnach miesiąca popover otwiera się w lewo (right:0),
   żeby nie był ucinany przez prawą krawędź ekranu/karty. */
.fod-cal-grid > .fod-cal-day:nth-child(7n) .ava-popover,
.fod-cal-grid > .fod-cal-day:nth-child(7n-1) .ava-popover,
.fod-cal-grid > .fod-cal-day:nth-child(7n-2) .ava-popover {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.cal-day--out,
.fod-cal-day--out {
    background-color: var(--surface);
    color: var(--ink-faint);
}

.cal-day--out .cal-day__num,
.fod-cal-day--out .fod-cal-day__num {
    color: var(--ink-faint);
    opacity: 0.5;
}

.tg-slot--out,
.fod-tg-slot--out {
    opacity: 0.42;
}

/* Dni/sloty niedostępne (poza zakresem lub zablokowane przez organizatora) muszą wyraźnie różnić się
   od dni dostępnych. Wpuszczamy je „w głąb" (kolor tła strony, nie powierzchni karty) i nakładamy
   wyraźną kreskę ukośną — czytelne i w trybie jasnym, i ciemnym. Wyższa specyficzność niż reguły
   [data-heat], żeby nadpisać tło heatmapy. */
.cal-day--disabled[data-heat="0"],
.fod-cal-day--disabled[data-heat="0"],
.cal-day--disabled,
.fod-cal-day--disabled {
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--bg);
    background-image: repeating-linear-gradient(45deg,
        transparent 0,
        transparent 6px,
        color-mix(in srgb, var(--ink) 14%, transparent) 6px,
        color-mix(in srgb, var(--ink) 14%, transparent) 7px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}

.cal-day--disabled .cal-day__num,
.fod-cal-day--disabled .fod-cal-day__num {
    opacity: 0.4;
}

.tg-slot.tg-slot--disabled,
.fod-tg-slot.fod-tg-slot--disabled {
    opacity: 1;
    pointer-events: none;
    background-color: var(--bg);
    background-image: repeating-linear-gradient(45deg,
        transparent 0,
        transparent 5px,
        color-mix(in srgb, var(--ink) 11%, transparent) 5px,
        color-mix(in srgb, var(--ink) 11%, transparent) 6px);
}

/* ── Mój głos ──────────────────────────────────────────────────────────────────────────────────
   Tło komórki zawsze pokazuje konsensus grupy (skala heat-*). Mój własny głos rysujemy jako wyraźny
   pasek przy DOLNEJ krawędzi w zielonej skali --mine-* (osobnej od limonkowej grupowej), z grubością/
   intensywnością zależną od mojej preferencji. Świadomie NIE jest to lewy pionowy pasek — tam mieszka
   znacznik okna godzinowego wydarzenia (--evt) i oba zlewały się ze sobą. Dolna krawędź jednoznacznie
   odróżnia „jak ja zagłosowałem" od godzin wydarzenia, a tło dalej pokazuje „jak głosuje grupa". */
/* Obwódka wagi głosu na awatarze: bursztyn = najlepszy, niebieski = pasuje, szary = może być.
   Zastępuje dawną poziomą linię „mojego głosu" w komórce — teraz każdy awatar (także mój) niesie
   informację, jak dana osoba zagłosowała, a awatary są posortowane od najlepszego głosu. Pierścień to
   drugi box-shadow (pierwszy to biała otoczka oddzielająca nakładające się awatary). */
.ava[data-vote="preferred"] {
    box-shadow: 0 0 0 1.6px var(--surface), 0 0 0 3.2px var(--vt-best);
}

.ava[data-vote="available"] {
    box-shadow: 0 0 0 1.6px var(--surface), 0 0 0 3.2px var(--vt-good);
}

.ava[data-vote="maybe"] {
    box-shadow: 0 0 0 1.6px var(--surface), 0 0 0 3.2px var(--vt-maybe);
}

/* Pasek podziału głosów nad rzędem awatarów w komórce dnia (np. „★1 ✓2") — od razu pokazuje
   proporcje wag w danym dniu. */
.fod-vbreak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.fod-vchip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px 3px 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    backdrop-filter: blur(2px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
}

.fod-vchip > svg {
    width: 12px;
    height: 12px;
}

.fod-vchip--best {
    color: var(--vt-best);
}

.fod-vchip--good {
    color: var(--vt-good);
}

.fod-vchip--maybe {
    color: var(--vt-maybe);
}

/* Chip z popoverem: po najechaniu pokazuje listę osób, które oddały dany typ głosu (ten sam popover
   co w stosie awatarów). Pozycjonujemy popover względem chipa. */
.fod-vchip--pop {
    position: relative;
    cursor: default;
}

.fod-vchip--pop:hover,
.fod-vchip--pop:focus-within {
    z-index: 30;
}

.fod-vchip--pop .ava-popover {
    /* tekst chipa jest kolorowy (waga); w popoverze wracamy do zwykłego koloru tekstu */
    color: var(--ink);
    font-weight: 600;
}

.fod-vchip--pop:hover .ava-popover,
.fod-vchip--pop:focus-within .ava-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* dzień, w którym Ty jesteś dostępny: plakietka „Ty" (jak w mockupie) */
.cal-day__star,
.fod-cal-day__star {
    position: absolute;
    top: 6px;
    right: 7px;
    z-index: 3;
    width: 21px;
    height: 21px;
    padding: 3px;
    /* Ciemna „odznaka" + biała gwiazdka — czytelna na limonkowym tle dnia w trybie jasnym i ciemnym
       (sam kolor --heat-best zlewał się z tłem najlepszego dnia w trybie ciemnym). */
    border-radius: 50%;
    background: var(--heat-ink-hi);
    /* Limonkowa gwiazdka (jak w pozostałych miejscach) na ciemnej odznace — czytelna i spójna
       wizualnie. Stała jasna limonka, bo --heat-best w trybie jasnym jest zbyt ciemny na tej odznace. */
    color: #c6f24e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.cal-day--mine .cal-day__foot::before,
.fod-cal-day--mine .fod-cal-day__foot::before {
    content: "Ty";
    position: absolute;
    top: -22px;
    left: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
}

/* Plakietka „Ty" przyjmuje kolor wagi, jaką oddał użytkownik tego dnia (bursztyn/niebieski/szary) —
   nie zawsze limonkowy. Tint tła + nasycony tekst, czytelne w obu motywach (jak pigułki wag). */
.fod-cal-day[data-mine-vote="preferred"] .fod-cal-day__foot::before {
    background: var(--vt-best-bg);
    color: var(--vt-best);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vt-best) 45%, transparent);
}

.fod-cal-day[data-mine-vote="available"] .fod-cal-day__foot::before {
    background: var(--vt-good-bg);
    color: var(--vt-good);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vt-good) 45%, transparent);
}

.fod-cal-day[data-mine-vote="maybe"] .fod-cal-day__foot::before {
    background: var(--vt-maybe-bg);
    color: var(--vt-maybe);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vt-maybe) 45%, transparent);
}

.cal-day--best::after,
.fod-cal-day--best::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 1;
    border: 2px solid var(--heat-best);
    border-radius: 9px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--heat-best) 18%, transparent);
    pointer-events: none;
}

.tg-slot--best,
.fod-tg-slot--best {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--heat-best) 84%, transparent),
        0 0 0 1px color-mix(in srgb, var(--heat-best) 26%, transparent);
}

.tg-head--best .tg-dow,
.tg-head--best .tg-dnum,
.fod-tg-head--best .fod-tg-dow,
.fod-tg-head--best .fod-tg-dnum {
    color: var(--heat-best);
}

/* Busy overlay — a day/slot that clashes with the viewer's own connected calendar within the votable
   hours. A red ring plus a faint red hatch, drawn over the heat colour so a conflict reads at a glance.
   Placed after --best so a clash wins the ring even on an otherwise "best" cell (the warning matters
   more). Busy cells are always inside the votable window, so they never collide with --disabled. */
.fod-tg-slot--busy,
.fod-cal-day--busy {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 82%, transparent);
}

.fod-tg-slot--busy {
    background-image: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--danger) 24%, transparent) 0,
        color-mix(in srgb, var(--danger) 24%, transparent) 6px,
        transparent 6px,
        transparent 12px);
}

.fod-cal-day--busy::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--danger) 20%, transparent) 0,
        color-mix(in srgb, var(--danger) 20%, transparent) 6px,
        transparent 6px,
        transparent 12px);
}

.cal-day__num,
.fod-cal-day__num {
    position: relative;
    z-index: 2;
    font-size: 14px;
    font-weight: 700;
}

.cal-day__foot,
.fod-cal-day__foot {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 9px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px 8px;
}

/* Stopka komórki to wiersz: pasek podziału głosów po lewej, a grupa „licznik + AvatarControl" dosunięta
   do prawej krawędzi (margin-left:auto). Na wąskich komórkach grupa zawija się do osobnego wiersza,
   wciąż wyrównana do prawej. */
.fod-cal-day__avline {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

/* The month proportional vote-weight bar and the slim mobile cell now live in calendar.css. */

.cal-day__count,
.fod-cal-day__count,
.tg-count,
.fod-tg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(2px);
}

.cal-day[data-heat="4"] .cal-day__count,
.cal-day[data-heat="5"] .cal-day__count,
.fod-cal-day[data-heat="4"] .fod-cal-day__count,
.fod-cal-day[data-heat="5"] .fod-cal-day__count,
.fod-tg-slot[data-heat="4"] .fod-tg-count,
.fod-tg-slot[data-heat="5"] .fod-tg-count,
.fod-tg-slot[data-heat="4"],
.fod-tg-slot[data-heat="5"] {
    color: var(--heat-ink-hi);
}

.cal-day__avas,
.fod-cal-day__avas,
.tg-slot__avas,
.fod-tg-avas {
    display: inline-flex;
    align-items: center;
}

.ava {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    flex: 0 0 auto;
}

.ava-row {
    display: flex;
    align-items: center;
    position: relative;
}

.ava-row .ava,
.ava-row .ava-more,
.tg-slot__avas .ava,
.fod-tg-avas .ava {
    margin-left: -7px;
    box-shadow: 0 0 0 2px var(--surface);
}

.ava-row .ava:first-child,
.cal-day__avas .ava:first-child,
.fod-cal-day__avas .ava:first-child,
.tg-slot__avas .ava:first-child,
.fod-tg-avas .ava:first-child {
    margin-left: 0;
}

.ava-more {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--line);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--surface);
}

/* Awatary w komórkach kalendarza: mniejsze kółka, a „+N" tej samej wielkości.
   Po regułach generycznych, by wygrać kolejnością przy równej specyficzności. */
.cal-day__avas .ava,
.fod-cal-day__avas .ava,
.cal-day__avas .ava-more,
.fod-cal-day__avas .ava-more {
    width: 21px;
    height: 21px;
    font-size: 9px;
    margin-left: -6px;
    box-shadow: 0 0 0 1.5px var(--surface);
}

.cal-day__avas .ava:first-child,
.fod-cal-day__avas .ava:first-child {
    margin-left: 0;
}

/* Obwódka wagi w kontekście rzędu awatarów (komórka miesiąca / slot tygodnia). Wyższa specyficzność
   niż reguły białej otoczki powyżej, więc pierścień wagi wygrywa. Mniejsza zakładka awatarów (-3px),
   by kolorowe obwódki były widoczne, a nie chowały się pod sąsiadem. */
.fod-cal-day__avas .ava[data-vote],
.fod-tg-avas .ava[data-vote],
.ava-row .ava[data-vote] {
    margin-left: -3px;
}

.fod-cal-day__avas .ava[data-vote]:first-child,
.fod-tg-avas .ava[data-vote]:first-child,
.ava-row .ava[data-vote]:first-child {
    margin-left: 0;
}

.fod-cal-day__avas .ava[data-vote="preferred"],
.fod-tg-avas .ava[data-vote="preferred"],
.ava-row .ava[data-vote="preferred"] {
    box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--vt-best);
}

.fod-cal-day__avas .ava[data-vote="available"],
.fod-tg-avas .ava[data-vote="available"],
.ava-row .ava[data-vote="available"] {
    box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--vt-good);
}

.fod-cal-day__avas .ava[data-vote="maybe"],
.fod-tg-avas .ava[data-vote="maybe"],
.ava-row .ava[data-vote="maybe"] {
    box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--vt-maybe);
}

.ava-row--expand {
    cursor: default;
}

.ava-popover {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    z-index: 10;
    display: grid;
    gap: 8px;
    min-width: 220px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform-origin: top left;
    transform: translateY(-8px) scale(0.94);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3), visibility 0.22s ease;
    pointer-events: none;
}

.ava-row--expand:hover .ava-popover,
.ava-row--expand:focus-within .ava-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* W liście spotkań popover otwiera się NAD awatarami, aby nie zasłaniać
   kolejnej karty spotkania (awatary są w środku wiersza). */
.evt__sub .ava-row--expand {
    z-index: 30;
}

.evt__sub .ava-popover {
    top: auto;
    bottom: calc(100% + 10px);
    transform-origin: bottom left;
    transform: translateY(8px) scale(0.94);
    z-index: 40;
}

.evt__sub .ava-row--expand:hover .ava-popover,
.evt__sub .ava-row--expand:focus-within .ava-popover {
    transform: translateY(0) scale(1);
}

/* Karetka popovera (wskazuje na awatary) */
.evt__sub .ava-popover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    width: 12px;
    height: 12px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transform: translateY(-50%) rotate(45deg);
}

/* Wierzch karty trzymany nad sąsiednimi podczas pokazywania popovera */
.evt:hover {
    position: relative;
    z-index: 5;
}

/* W siatce godzinowej (tydzień/dzień) komórka ma overflow:hidden,
   co ucinało popover awatarów. Po najechaniu na awatary pozwalamy
   komórce na overflow i otwieramy popover NAD awatarami. */
.fod-tg-slot:has(.ava-row--expand:hover),
.fod-tg-slot:has(.ava-row--expand:focus-within) {
    overflow: visible;
    z-index: 20;
}

.fod-tg-avas .ava-popover {
    top: auto;
    bottom: calc(100% + 10px);
    transform-origin: bottom left;
    transform: translateY(8px) scale(0.94);
    z-index: 40;
}

.fod-tg-avas.ava-row--expand:hover .ava-popover,
.fod-tg-avas.ava-row--expand:focus-within .ava-popover {
    transform: translateY(0) scale(1);
}

/* Prawe kolumny time-gridu: popover (≈220px, czyli kilka kolumn) otwiera się w LEWO, by nie wychodził
   poza prawą krawędź karty (.fod-cal ma overflow:hidden) i nie był ucinany. „Ostatnia kolumna" to slot
   tuż przed komórką godziny następnego wiersza (lub ostatni slot siatki); „przedostatnia" — dwa sloty
   przed godziną. Obejmujemy dwie skrajne kolumny, bo popover jest szerszy niż jedna. */
.fod-cal-timegrid .fod-tg-slot:has(+ .fod-tg-time) .ava-popover,
.fod-cal-timegrid .fod-tg-slot:has(+ .fod-tg-slot + .fod-tg-time) .ava-popover,
.fod-cal-timegrid .fod-tg-slot:last-child .ava-popover,
.fod-cal-timegrid .fod-tg-slot:nth-last-child(2) .ava-popover {
    left: auto;
    right: 0;
    transform-origin: bottom right;
}

/* Karetka popovera podąża wtedy do prawej krawędzi (nad odpowiednim awatarem). */
.fod-cal-timegrid .fod-tg-slot:has(+ .fod-tg-time) .ava-popover::after,
.fod-cal-timegrid .fod-tg-slot:has(+ .fod-tg-slot + .fod-tg-time) .ava-popover::after,
.fod-cal-timegrid .fod-tg-slot:last-child .ava-popover::after,
.fod-cal-timegrid .fod-tg-slot:nth-last-child(2) .ava-popover::after {
    left: auto;
    right: 14px;
}

.fod-tg-avas .ava-popover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    width: 12px;
    height: 12px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transform: translateY(-50%) rotate(45deg);
}

.ava-popover__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ava-popover__avatar {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.ava-popover__name {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

/* ── Odznaki typu głosu ──────────────────────────────────────────────────────────────────────────
   Jeden zestaw kolorów dla wszystkich miejsc pokazujących typ głosu (best/works/maybe/nie pasuje):
   kalendarz, lista uczestników i popover awatarów. Kolory pokrywają się z paletą --mine (zieleń) oraz
   czerwienią „nie pasuje" z edytora slotu, więc swatch od razu kojarzy się z tym samym typem głosu. */
.fod-vote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Ikona wagi głosu (★ / ✓ / ~) — zastępuje dawny kwadracik koloru; tonowana kolorem danego typu. */
.fod-vote__ico {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--vote-color, var(--mine-mid));
}

.fod-vote__ico svg {
    width: 14px;
    height: 14px;
}

.fod-vote--preferred { --vote-color: var(--vt-best); }
.fod-vote--available { --vote-color: var(--vt-good); }
.fod-vote--maybe { --vote-color: var(--vt-maybe); }
.fod-vote--unavailable { --vote-color: var(--danger); }

/* W popoverze odznaka ląduje po prawej stronie wiersza (imię zajmuje resztę). */
.ava-popover__vote {
    margin-left: auto;
    padding-left: 8px;
}

/* Wiersz pojedynczego głosu w boxie uczestników: kwadracik koloru + etykieta. */
.participant-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft);
}

.fod-cal-timegrid-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-height: clamp(680px, 72vh, 860px);
}

.cal-timegrid,
.fod-cal-timegrid {
    --tg-gutter: 56px;
    display: grid;
    grid-template-columns: var(--tg-gutter) repeat(var(--cols), minmax(0, 1fr));
    grid-auto-rows: minmax(60px, 1fr);
    min-height: 100%;
}

.cal-timegrid.is-day,
.fod-cal-timegrid.is-day {
    --tg-gutter: 88px;
}

.tg-corner,
.fod-tg-corner {
    position: sticky;
    top: 0;
    z-index: 6;
    min-height: 52px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.tg-head,
.fod-tg-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    gap: 2px;
    align-content: center;
    justify-items: center;
    min-height: 52px;
    padding: 9px 10px 8px;
    text-align: center;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line-soft);
    color: var(--ink);
}

.tg-head--out,
.fod-tg-head--out {
    opacity: 0.42;
}

.tg-dow,
.fod-tg-dow {
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tg-dnum,
.fod-tg-dnum {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: 18px;
    line-height: 1;
}

.tg-head__pin,
.fod-tg-head__pin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--heat-best);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tg-head__pin svg,
.fod-tg-head__pin svg {
    width: 12px;
    height: 12px;
}

.tg-time,
.fod-tg-time {
    grid-column: 1;
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 10px;
    background: var(--surface);
    border-top: 1px solid var(--line-soft);
    color: var(--ink-faint);
    font-size: 11.5px;
    font-weight: 700;
}

.tg-time span,
.fod-tg-time span {
    transform: translateY(-7px);
    background: var(--surface);
    padding-left: 4px;
}

.tg-time--evt,
.fod-tg-time--evt {
    color: var(--heat-best);
    border-left: 3px solid var(--heat-best);
}

.tg-slot,
.fod-tg-slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    padding: 4px 6px;
    border-top: 1px solid var(--line-soft);
    border-left: 1px solid var(--line-soft);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.fod-cal-timegrid.is-day .fod-tg-slot {
    padding: 6px 12px;
    gap: 10px;
}

.tg-slot--evt::before,
.fod-tg-slot--evt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: color-mix(in srgb, var(--heat-best) 55%, transparent);
}

.fod-tg-slot:hover {
    box-shadow: inset 0 0 0 2px var(--primary);
    z-index: 2;
}

/* Read-only calendar (e.g. a finalized/closed event): cells aren't clickable, so don't pretend they
   are — keep the default cursor and drop the interactive hover ring. */
.fod-cal--readonly .fod-cal-day,
.fod-cal--readonly .fod-tg-slot {
    cursor: default;
}

.fod-cal--readonly .fod-cal-day:hover,
.fod-cal--readonly .fod-tg-slot:hover {
    box-shadow: none;
}

.fod-tg-count {
    flex: 0 0 auto;
}

.tg-slot__names,
.fod-tg-names {
    color: var(--heat-ink-hi);
    font-size: 12px;
    line-height: 1.35;
}

/* Widok dnia: pełna etykieta przy każdej osobie — awatar (z obwódką wagi) + nazwa + pigułka z ikoną
   i słowem opisującym wagę głosu. Owijamy na wiele wierszy, bo kolumna dnia jest szeroka. */
.fod-tg-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-width: 0;
}

.fod-tg-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}

.fod-tg-person .ava {
    width: 22px;
    height: 22px;
    font-size: 9px;
}

.fod-tg-person__name {
    white-space: nowrap;
}

/* Pigułka wagi głosu (widok dnia): ikona + słowo, tonowana kolorem wagi. */
.fod-vpill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.fod-vpill svg {
    width: 12px;
    height: 12px;
}

.fod-vpill--best {
    color: var(--vt-best);
    background: var(--vt-best-bg);
}

.fod-vpill--good {
    color: var(--vt-good);
    background: var(--vt-good-bg);
}

.fod-vpill--maybe {
    color: var(--vt-maybe);
    background: var(--vt-maybe-bg);
}

/* The time-grid slot layout (vbreak, "mine" edge marker, proportional bar, day avatar sizing and the
   responsive collapse/scroll media queries) now lives in calendar.css. */

/* Popover chipa w siatce godzinowej otwiera się W GÓRĘ (jak popover awatarów), by nie chować się pod
   kolejnymi wierszami; slot odsłania overflow po najechaniu na chip. */
.fod-tg-slot:has(.fod-vchip--pop:hover),
.fod-tg-slot:has(.fod-vchip--pop:focus-within) {
    overflow: visible;
    z-index: 20;
}

.fod-cal-timegrid .fod-tg-slot .fod-vchip--pop .ava-popover {
    top: auto;
    bottom: calc(100% + 10px);
    transform-origin: bottom left;
    transform: translateY(8px) scale(0.94);
}

.fod-cal-timegrid .fod-tg-slot .fod-vchip--pop:hover .ava-popover,
.fod-cal-timegrid .fod-tg-slot .fod-vchip--pop:focus-within .ava-popover {
    transform: translateY(0) scale(1);
}

.tg-slot__avas,
.fod-tg-avas {
    display: inline-flex;
    align-items: center;
}

.tg-star,
.fod-tg-star,
.cal-day__star {
    width: 16px;
    height: 16px;
    color: var(--heat-best);
}

.tg-star,
.fod-tg-star {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 13px;
    height: 13px;
    z-index: 3;
}

.sp2-card {
    overflow: hidden;
}

.sp2-card__head {
    padding: 16px 18px 0;
}

.sp2-card__head h2,
.sp2-card__head h3 {
    margin: 0;
    font-size: 17px;
}

.sp2-card__body {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
}

.sp2-card__body > :last-child {
    margin-bottom: 0;
}

.sp2-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--eyebrow);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sp2-toggle {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-soft);
}

.sp2-toggle svg {
    width: 16px;
    height: 16px;
}

.you-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.you-row__name,
.name {
    font-weight: 800;
}

.you-row__mail,
.mail {
    color: var(--ink-soft);
    font-size: 13px;
}

.you-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 6px;
}

.you-stat b {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: 30px;
    line-height: 1;
    color: var(--heat-best);
}

.you-stat span {
    color: var(--ink-soft);
    font-size: 13px;
}

.you-hint {
    margin-bottom: 0;
}

/* Podpowiedź o dodawaniu kilku zakresów godzinowych w jednym dniu (tylko w widoku miesiąca). */
.you-hint--tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.4;
}

.you-hint--tip svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: var(--primary);
}

.you-actions,
.selection-summary,
.sp2-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sp2-foot {
    flex-direction: column;
}

.sp2-foot__manual {
    text-align: center;
    font-size: 13px;
}

.sp2-foot--form {
    display: grid;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.invite-links-panel .sp2-card__body,
.participants-panel .sp2-card__body {
    gap: 12px;
}

/* Keep the participant list bounded: with many responders (e.g. 100+) the box would otherwise
   grow without limit. Cap it to roughly a dozen rows and let the rest scroll inside the card. */
.participants-scroll {
    display: grid;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    /* Room for the scrollbar so rows don't sit flush against it. */
    margin-right: -6px;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-faint) transparent;
}

.participants-scroll::-webkit-scrollbar {
    width: 8px;
}

.participants-scroll::-webkit-scrollbar-thumb {
    background: var(--ink-faint);
    border-radius: 999px;
}

.invite-link-item {
    display: grid;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.invite-link-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.invite-link-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.badge-ok,
.badge-pending {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge-ok {
    background: color-mix(in srgb, var(--primary) 22%, var(--surface));
    color: var(--eyebrow);
}

.badge-pending {
    background: color-mix(in srgb, var(--ink-soft) 18%, var(--surface));
    color: var(--ink-soft);
}

.rank-list {
    display: grid;
    gap: 10px;
}

.rank {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

/* Pozycja nr 1 ma domyślnie takie samo tło jak pozostałe — wyróżniany jest tylko zaznaczony termin. */
.rank--selected {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 50%, transparent);
}

.rank__no {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 800;
}

.rank__date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
}

/* Gwiazdka przy terminie, który w kalendarzu dostał gwiazdkę (najlepszy termin z głosów). */
.rank__star {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--heat-best);
}

.rank--best .rank__no {
    background: color-mix(in srgb, var(--heat-best) 18%, var(--surface));
    color: var(--heat-best);
}

.rank__meta {
    gap: 8px;
}

.rank__bar {
    display: inline-flex;
    overflow: hidden;
    width: 140px;
    max-width: 40vw;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--line-soft);
}

.rank__bar i {
    display: block;
    border-radius: inherit;
    background: var(--primary);
}

.rank__cnt {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
}

.rank__avas {
    display: inline-flex;
}

.rank__avas .ava {
    margin-left: -7px;
    box-shadow: 0 0 0 2px var(--surface-2);
}

.rank__avas .ava:first-child {
    margin-left: 0;
}

/* Karta „Najlepsze terminy" ma overflow:hidden — przy najechaniu na awatary
   pozwalamy popoverowi wyjść poza jej krawędź. */
.sp2-card:has(.rank__avas.ava-row--expand:hover),
.sp2-card:has(.rank__avas.ava-row--expand:focus-within) {
    overflow: visible;
}

/* Popover w rankingu otwiera się nad awatarami i wyrównany do prawej,
   żeby nie zasłaniał kolejnego wiersza ani nie wychodził poza prawą krawędź. */
.rank__avas .ava-popover {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 10px);
    transform-origin: bottom right;
    transform: translateY(8px) scale(0.94);
}

.rank__avas.ava-row--expand:hover .ava-popover,
.rank__avas.ava-row--expand:focus-within .ava-popover {
    transform: translateY(0) scale(1);
}

.participant-counts {
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 700;
}

.participant-row,
.participant-details {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.participant-row summary {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.participant-row summary::-webkit-details-marker {
    display: none;
}

.participant-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.participant-row-name {
    font-weight: 800;
}

.participant-row-count {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
}

.edit-link-panel {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.mode-note {
    margin-bottom: 0;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: #fff2b8;
    box-shadow: 0 -1px 12px rgba(33, 38, 45, 0.18);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    cursor: pointer;
}

/* -----------------------------------------------------------------
   Account settings and calendar connections
   ----------------------------------------------------------------- */
.manage-page,
.cals-grid {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 34px 28px 80px;
}

.manage-page {
    display: grid;
    gap: 22px;
}

.manage-header,
.settings-head,
.cals-hero {
    max-width: 760px;
}

.manage-header h1,
.settings-head h1,
.cals-hero h1 {
    font-size: clamp(2.1rem, 4.8vw, 4rem);
    line-height: 1;
    margin: 8px 0 12px;
}

.manage-header p:not(.eyebrow),
.settings-head p:not(.eyebrow),
.cals-hero p:not(.eyebrow) {
    margin: 0;
    max-width: 68ch;
    color: var(--ink-soft);
}

.manage-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: var(--shadow-sm);
}

.manage-nav .tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.manage-nav .tab:hover {
    color: var(--ink);
    background: var(--surface-2);
}

.manage-nav .tab.active {
    border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
    background: var(--primary);
    color: var(--on-primary);
}

.manage-nav .tab--spacer {
    flex: 1 1 auto;
}

.manage-nav .tab--danger,
.manage-nav-danger {
    color: var(--danger);
}

.manage-nav .tab--danger.active {
    background: color-mix(in srgb, var(--danger) 18%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
    color: var(--danger);
}

.manage-card,
.cals-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.manage-card h2,
.cals-card h2 {
    margin: 0;
    font-size: 1.5rem;
}

.cals-card__label {
    margin: 0 0 13px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.manage-card h3 {
    margin: 0;
    font-size: 1.1rem;
}

.manage-card label {
    display: grid;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
}

/* Nagłówek karty: tytuł + opis (odpowiednik mockupowego .scard__head) */
.manage-card .scard__head,
.cals-card .scard__head {
    display: grid;
    gap: 6px;
}

.manage-card .scard__head h2,
.cals-card .scard__head h2 {
    margin: 0;
}

.manage-card .scard__head p,
.cals-card .scard__head p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
}

/* Odstępy między kontrolkami formularza w karcie ustawień */
.manage-form {
    display: grid;
    gap: 18px;
}

.manage-form .form-actions {
    margin-top: 6px;
}

/* Akcje przy wierszu .provider (np. zmień nazwę / usuń klucz dostępu) */
.provider__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex: 0 0 auto;
}

.manage-hint,
.manage-warn,
.cals-note {
    color: var(--ink-soft);
    font-size: 14px;
}

.manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.secondary-action:hover {
    border-color: var(--ink-faint);
    background: var(--surface-2);
    color: var(--ink);
}

.secondary-action.manage-nav-danger {
    color: var(--danger);
}

.secondary-action.manage-nav-danger:hover {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

.manage-card-danger {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
}

.manage-card-danger .manage-warn {
    color: color-mix(in srgb, var(--danger) 82%, var(--ink));
    font-weight: 700;
}

.cals-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: start;
}

.cals-stack {
    display: grid;
    gap: 16px;
}

.cals-hero {
    position: sticky;
    top: 96px;
}

.cals-hero__list {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
    max-width: 38ch;
}

.cals-hero__list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--ink-soft);
    font-size: 14.5px;
}

.cals-hero__list svg {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex: 0 0 auto;
    color: var(--heat-best);
}

@media (max-width: 980px) {
    .cals-hero {
        position: static;
    }
}

p.cals-note {
    display: flex;
    gap: 9px;
    margin: 4px 2px 0;
    color: var(--ink-faint);
    font-size: 13px;
    line-height: 1.55;
}

p.cals-note svg {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    flex: 0 0 auto;
    opacity: 0.7;
}


.provider {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--ink);
}

.provider + .provider {
    margin-top: 11px;
}

.provider__logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink);
}

.provider__logo svg {
    width: 24px;
    height: 24px;
}

.provider__body {
    flex: 1;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.provider__body strong {
    font-size: 15px;
}

.provider__body span {
    color: var(--ink-soft);
    font-size: 13px;
}

.provider__connected {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--heat-best);
    font-size: 12.5px;
    font-weight: 800;
}

.provider__connected::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--heat-5);
}

.provider .btn,
.provider .link-danger {
    flex: 0 0 auto;
    margin-left: auto;
}

.broken-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--danger) 15%, var(--surface));
    color: var(--danger);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (max-width: 980px) {
    .cals-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .manage-page,
    .cals-grid {
        padding: 22px 16px 60px;
    }

    .provider {
        align-items: flex-start;
    }
}

/* -----------------------------------------------------------------
   Event view layout controls and expandable cards
   ----------------------------------------------------------------- */
.event-page--wide {
    max-width: none;
    width: 100%;
}

.cal-intro {
    padding-top: 10px;
    margin-bottom: 4px;
}

.cal-intro h2 {
    margin-bottom: 5px;
    font-size: 23px;
}

.cal-intro p {
    margin: 0;
    max-width: 52ch;
    font-size: 14.5px;
}

.layout-tools {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.layout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.layout-btn:hover {
    color: var(--ink);
    border-color: var(--ink-faint);
}

.layout-btn svg {
    width: 16px;
    height: 16px;
}

.layout-btn.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

/* Wariant tylko-ikona (np. "Ukryj/Pokaż panel") — kwadratowy przycisk bez etykiety. */
.layout-btn--icon {
    gap: 0;
    width: 40px;
    padding: 0;
    justify-content: center;
}

/* Toggle panelu bocznego: zielony, gdy panel jest pokazany (is-active), czarny, gdy zamknięty (is-off).
   Czerń jest stała w obu motywach, z jasną ikoną dla kontrastu. */
.layout-btn--icon.is-off {
    background: #16170f;
    border-color: #16170f;
    color: #f4f5ee;
}

.layout-btn--icon.is-off:hover {
    border-color: #16170f;
    color: #ffffff;
}

/* "Pełna szerokość" rozpina kalendarz poza siatkę dwukolumnową — ma sens wyłącznie tam, gdzie obok
   kalendarza stoi panel boczny. Poniżej 1200px układ jest jednokolumnowy (panel ląduje pod kalendarzem),
   więc kalendarz i tak zajmuje pełną szerokość — chowamy przycisk, bo nic nie robi (telefon/tablet). */
@media (max-width: 1200px) {
    .layout-btn--fullwidth {
        display: none;
    }
}

.layout-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* Custom checkbox look shared across the app: a rounded box with the brand outline that fills green
   when checked. Applied to every plain checkbox (calendar controls, login/2FA, account settings,
   contact saving) so they all match the calendar's styled toggle. */
.layout-check input,
.checkbox-row input[type="checkbox"],
.inline-check input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid var(--primary);
    border-radius: 5px;
    background: transparent;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    cursor: pointer;
}

.layout-check input:checked,
.checkbox-row input[type="checkbox"]:checked,
.inline-check input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: inset 0 0 0 2px var(--surface);
}

.layout-check span {
    white-space: nowrap;
}

/* Pasek kontrolek na górze karty „Najlepsze terminy": przełącznik pokazania gwiazdki na kalendarzu
   + kryterium rankingu. Przeniesiony tu z paska nad kalendarzem, bo to jego naturalne miejsce. */
.bestdays-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.85rem;
}

/* Segmentowany przełącznik kryterium najlepszego terminu (punkty / liczba osób). Lokalna preferencja
   widoku — jedna „pigułka" z dwoma wzajemnie wykluczającymi się przyciskami. */
.rankmode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.rankmode__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    white-space: nowrap;
}

.rankmode__btn {
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 0.32rem 0.7rem;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.rankmode__btn:hover {
    color: var(--ink);
}

.rankmode__btn.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

.sp2-card__head {
    padding: 16px 18px;
}

.sp2-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp2-card__body {
    padding: 0 18px 18px;
}

.sp2-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    cursor: pointer;
}

.sp2-toggle:hover {
    color: var(--ink);
    border-color: var(--ink-faint);
}

.sp2-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.16s ease;
}

.sp2-toggle[aria-expanded="false"] svg {
    transform: rotate(-90deg);
}

.you-actions {
    align-items: center;
    justify-content: space-between;
}

.you-actions .btn {
    min-width: 0;
}

/* Wskaźnik autozapisu — zastępuje dawny przycisk „Zapisz dostępność". */
.you-autosave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--eyebrow);
    font-size: 13px;
    font-weight: 700;
}

.you-autosave svg {
    width: 15px;
    height: 15px;
}

.you-autosave.is-saving {
    color: var(--ink-soft);
}

.autosave-hint {
    margin: 4px 0 0;
    color: var(--danger);
}

.you-actions .btn,
.sp2-foot .btn {
    justify-content: center;
}

button.primary-action,
a.primary-action,
.copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

button.primary-action:hover,
a.primary-action:hover,
.copy-button:hover {
    background: var(--primary-press);
    border-color: var(--primary-press);
    color: var(--on-primary);
}

button.primary-action:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.copy-button {
    min-height: 40px;
    padding: 0.55rem 0.9rem;
    white-space: nowrap;
}

.event-page--wide .event-layout {
    max-width: none;
}

/* Wyróżnienie aktywnego przycisku trybu jasny/ciemny. Jedyne źródło prawdy to atrybut
   data-bs-theme na <html>; reguła jest GLOBALNA (nie scoped), bo selektor ancestora na
   <html> nie działa pewnie w izolowanym CSS NavMenu. */
html[data-bs-theme="light"] .mode-toggle button[data-set-mode="light"],
html[data-bs-theme="dark"] .mode-toggle button[data-set-mode="dark"] {
    background: var(--primary, #c6f24e);
    color: var(--on-primary, #181b10);
}

/* ── Dialog "Twoja dostępność" (SlotEditorDialog) ───────────────────── */
/* Dialogi Radzen domyślnie mają z-index 1001 (maska 1000), a sticky navbar Bootstrapa siedzi na 1020,
   więc górne menu nachodzi na dialog (a maska go nie przyciemnia). Podnosimy dialog i maskę ponad navbar,
   żeby okno modalne — wraz z przyciemnieniem tła — było zawsze nad menu. */
:root,
[data-bs-theme="light"] {
    --rz-dialog-zindex: 1080;
    --rz-dialog-mask-zindex: 1079;
}

.slot-editor-dialog.rz-dialog,
.slot-editor-dialog .rz-dialog {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
}

.slot-editor-dialog .rz-dialog-titlebar {
    padding: 20px 24px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
}

.slot-editor-dialog .rz-dialog-title {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    font-size: 22px;
    color: var(--ink);
}

.slot-editor-dialog .rz-dialog-content {
    padding: 22px 24px 24px;
}


/* The day/slot detail popup (DayDetailDialog) styling now lives in calendar.css. */


/* ============================================================
   Auth pages (Login / Register and other Identity pages)
   ============================================================ */
.auth-page {
    display: flex;
    justify-content: center;
    padding: 48px 20px 80px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 32px;
}

.auth-card h1 {
    margin: 6px 0 8px;
    font-size: clamp(1.9rem, 4vw, 2.4rem);
}

.auth-card .auth-sub {
    margin: 0 0 22px;
    color: var(--ink-soft);
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-card form > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: 0.92rem;
}

.auth-card form > label > span {
    font-weight: 700;
    color: var(--ink-soft);
}

.auth-card .field-error {
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 600;
}

.auth-card .checkbox-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.auth-card .checkbox-row span {
    font-weight: 600;
    color: var(--ink);
}

.auth-card .primary-action {
    width: 100%;
    margin-top: 4px;
}

/* "albo" divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0;
    color: var(--ink-faint);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Social / passkey buttons */
.external-login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.social-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 700;
    font-family: inherit;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.social-button:hover {
    background: var(--bg-2);
    border-color: var(--ink-faint);
}

.social-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Switch link at the bottom (Masz już konto? / Nie masz konta?) */
.auth-switch {
    margin: 22px 0 0;
    text-align: center;
    color: var(--ink-soft);
}

.auth-switch a {
    color: var(--link);
    font-weight: 700;
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}