/* ============================================================
   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;
    /* Selected date (click in the „Najlepsze terminy" box) — deliberately CONTRASTING with the lime palette
       (violet), so the selection doesn't blend with the green outlines of the „najlepszych" days. */
    --term-select: #7c3aed;
    --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;

    /* Scale of "my vote" — separate from the lime group scale (heat-*). Pure green, the same
       identity as the „Ty" avatar (#16a34a) and as the vote-type colors in the slot editor. The same values
       apply in both themes, so the bar color on the calendar always matches the chosen type:
       Najlepiej (strong) = #15803d, Pasuje (mid) = #22c55e, Może być (soft) = #86efac. */
    --mine-strong: #15803d;
    --mine-mid: #22c55e;
    --mine-soft: #86efac;

    /* Vote weight: amber = best, blue = works, gray = maybe. These three colors are
       shared by avatar outlines, vote-split bars, day-view pills, the legend, and
       the response-type buttons in the slot editor — one code = one weight across the whole interface. */
    --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;
    /* Lighter violet — clearly visible on a dark background and around the light-lime „najlepszych" days. */
    --term-select: #b794ff;
    --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-* are deliberately NOT overridden here: the "my vote" color must be identical to the
       color of the type selected in the slot editor (Najlepiej/Pasuje/Może być) in BOTH themes — otherwise the bar on
       the calendar wouldn't match what the user clicked. We inherit the fixed palette from :root. */

    /* Vote weight — lighter shades and darker backgrounds, so outlines and pills are legible on dark. */
    --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:disabled,
.text-button:disabled:hover {
    color: var(--ink-faint);
    cursor: not-allowed;
    text-decoration: none;
}

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

/* On touch devices Radzen's default time spinner up/down buttons are too small to tap reliably.
   Each time field is a .rz-numeric spinner: the input fills the field while the up/down buttons sit
   absolutely in the top-right / bottom-right corners (~14px by default). Widen and heighten those
   buttons and enlarge the value text; desktop (pointer: fine) keeps Radzen's compact defaults. The
   picker popup is rendered to the body (outside any component scope), so these overrides are global. */
@media (pointer: coarse) {
    .rz-timepicker .rz-hour-picker,
    .rz-timepicker .rz-minute-picker,
    .rz-timepicker .rz-second-picker {
        width: 92px;
        height: 52px;
    }

    .rz-timepicker .rz-numeric-button {
        width: 34px;
        height: calc(50% - 3px);
    }

    .rz-timepicker .rz-numeric-button-icon {
        font-size: 20px;
    }

    .rz-timepicker .rz-hour-picker .rz-numeric-input,
    .rz-timepicker .rz-minute-picker .rz-numeric-input,
    .rz-timepicker .rz-second-picker .rz-numeric-input {
        font-size: 18px;
        padding-right: 42px;
    }
}

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

/* Dismissible onboarding callout (CoachHint). Reuses the surface-card/success-panel look: a subtle
   primary-tinted background, existing radius/shadow tokens, no new fonts or animations. */
.coach-hint {
    position: relative;
    padding: 14px 40px 14px 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
}

.coach-hint__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.coach-hint__close:hover {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink);
}

.coach-hint__body {
    font-size: 14px;
    color: var(--ink);
}

.coach-hint__body ol {
    margin: 8px 0 0;
    padding-left: 20px;
}

.coach-hint__link {
    display: inline-block;
    margin-top: 6px;
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
}

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

.intro__lead {
    margin-top: 18px;
    font-size: 1.05rem;
}

.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 {
    /* Collapse to a single column whenever the two columns can't both fit — this keeps the deadline
       (its own date + time inputs) on its own row on tablets instead of overflowing the card,
       regardless of how the surrounding page splits the form column. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 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;
}

/* Mobile drum picker (TimeWheel) sits in a .fod-mobile-only wrapper — stretch it the same way as the
   desktop picker so the two time chips fill the row instead of hugging their content. */
.time-range-control .fod-mobile-only {
    flex: 1 1 0;
    min-width: 0;
}

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

.deadline-control {
    /* If the cell is still too narrow for date + time side by side, let them wrap onto separate
       rows (each grows to fill its row) rather than spill past the card edge. */
    flex-wrap: wrap;
}

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

.deadline-time-field {
    flex: 1 1 140px;
    min-width: 120px;
}

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

.choice-card:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.choice-card:disabled:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--line) 82%, transparent);
}

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

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

.invited-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}

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

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

/* label.inline-check (specificity 0,1,1) so it overrides `.event-form label { display: grid }`,
   which otherwise stacks the checkbox above its text. */
label.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" (Manage) is rarely-used actions (edit, cancel). Instead of a full-width pill
       on its own line, we collapse it to a small button with a "kebab" icon and keep it on the same row
       as the title, pushed to the right (the title block takes the rest of the width and wraps). */
    .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;
    }

    /* Higher specificity (0,2,0) than the default .menu__btn-dots{display:none} defined later in the file
       — otherwise the later rule would override it and the icon wouldn't show on 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;
    cursor: help;
}

.rank__partials-label {
    font-weight: 700;
    color: var(--ink-soft);
}

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

/* The "kebab" icon (three dots) is a fallback for mobile — on desktop the button shows the full text. */
.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;
}

/* Vote-weight legend — explains the avatar outlines and the icons next to names: ★ best / ✓ works / ~ maybe. */
.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);
    max-height: 190px;
    overflow-y: auto;
}

/* "Which calendars to check" list inside the calendar card. Capped height with its own scroll so a
   long list (many subscribed/shared calendars) doesn't push the rest of the card off-screen. */
.cal-picker {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 190px;
    overflow-y: auto;
    padding-right: 4px;
}

.cal-picker__title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.cal-picker__account {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Two-class selector so it beats `.sp2-card label { display: grid; font-weight: 700 }` (app.css:1041),
   which would otherwise stack the checkbox above the name and bold it. */
.cal-picker .cal-picker__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
}

/* Colour swatch matching the calendar's colour in Google, shown before its name. */
.cal-picker__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}

.cal-picker__badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
}

.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: 128px;
    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;
    /* Fixed three-row grid so each piece of info keeps the same slot regardless of which others are
       present: header (number/star/total) → vote rows → the viewer's own-vote pill. Without this the
       middle votes were vertically centred and shifted whenever the own-vote pill appeared/disappeared. */
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 5px;
}

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

/* On hover the cell reveals overflow and comes to the front,
   so the popover with the user list isn't clipped by overflow:hidden. */
.cal-day:hover,
.fod-cal-day:hover {
    overflow: visible;
    z-index: 20;
}

/* The calendar card has overflow:hidden (rounded corners) — on hovering a
   day we let the avatar popover extend past the card edge. */
.fod-cal:has(.fod-cal-day:hover) {
    overflow: visible;
}

/* For days in the right-hand columns of the month the popover opens to the left (right:0),
   so it isn't clipped by the right edge of the screen/card. */
.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;
}

/* Unavailable days/slots (out of range or blocked by the organizer) must clearly differ
   from available days. We push them „inward" (page background color, not the card surface) and apply
   a distinct diagonal stripe — legible in both light and dark mode. Higher specificity than the
   [data-heat] rules, so it overrides the heatmap background. */
.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);
}

/* ── My vote ──────────────────────────────────────────────────────────────────────────────────
   The cell background always shows the group consensus (heat-* scale). We draw my own vote as a distinct
   bar at the BOTTOM edge in the green --mine-* scale (separate from the lime group scale), with thickness/
   intensity depending on my preference. Deliberately NOT a left vertical bar — that's where the
   event's time-window marker (--evt) lives and the two blended together. The bottom edge unambiguously
   distinguishes "how I voted" from the event hours, while the background still shows "how the group votes". */
/* Vote-weight outline on the avatar: amber = best, blue = works, gray = maybe.
   Replaces the former horizontal "my vote" line in the cell — now every avatar (including mine) carries
   information about how that person voted, and avatars are sorted from the best vote. The ring is
   a second box-shadow (the first is the white halo separating overlapping avatars). */
.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);
}

/* Vote-split bar above the avatar row in a day cell (e.g. „★1 ✓2") — immediately shows
   the weight proportions for that day. */
.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 with a popover: on hover it shows the list of people who cast a given vote type (the same popover
   as in the avatar stack). We position the popover relative to the chip. */
.fod-vchip--pop {
    position: relative;
    cursor: default;
}

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

.fod-vchip--pop .ava-popover {
    /* the chip text is colored (weight); in the popover we return to the normal text color */
    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;
}

/* ── Month cell layout (matches the new mockup) ──────────────────────────────────────────────────
   Each day is a flex column: a top row (number + winner star + vote total), the per-weight vote rows
   in the middle, then the viewer's own-vote pill at the bottom. */

/* Top row (grid row 1): day number, winner star, vote total. */
.cal-day__top,
.fod-cal-day__top {
    grid-row: 1;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Winner star — a dark round badge with a bright lime star, so it stays legible on a hot lime cell
   (a plain lime star vanished into the "best" day's background). */
.cal-day__star,
.fod-cal-day__star {
    z-index: 2;
    width: 21px;
    height: 21px;
    padding: 3px;
    flex: 0 0 auto;
    line-height: 0;
    border-radius: 50%;
    background: var(--heat-ink-hi);
    color: #c6f24e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.cal-day__star svg,
.fod-cal-day__star svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Vote total pill (e.g. 7/8) — pushed to the right edge of the top row. Own dark-ish surface so the
   text stays legible over a hot lime cell. */
.cal-day__total,
.fod-cal-day__total {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 800;
    backdrop-filter: blur(2px);
}

.cal-day__total small,
.fod-cal-day__total small {
    font-weight: 700;
    opacity: 0.55;
}

/* Per-weight vote rows (grid row 2): chip (icon + count) on the left, those voters' avatars on the
   right. Top-aligned within the row so they always sit just under the header — never re-centred by the
   presence/absence of the own-vote pill below. */
.fod-cal-day__votes {
    grid-row: 2;
    align-self: start;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 4px;
    min-width: 0;
}

/* While an avatar popover is open, lift the votes row above the own-vote pill (both sit at z-index 2,
   but the pill comes later in the DOM and would otherwise paint over the popover). */
.fod-cal-day__votes:hover,
.fod-cal-day__votes:focus-within {
    z-index: 5;
}

.fod-cal-day__vrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
}

/* The row's chip + avatar rings inherit the weight colour. */
.fod-cal-day__vrow.fod-vt--best { color: var(--vt-best); }
.fod-cal-day__vrow.fod-vt--good { color: var(--vt-good); }
.fod-cal-day__vrow.fod-vt--maybe { color: var(--vt-maybe); }

/* The vote-count chip must always stay visible: never let it shrink to reserve avatar space, and paint
   it above the avatars so that even before the auto-fit script runs (statically-rendered pages) — or if
   it can't run at all — overflowing avatars can't cover the count. */
.fod-cal-day__vrow > .fod-vchip {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

/* Take the space left by the chip and right-align the faces in it; AvatarStack.razor.js measures this
   width to decide how many avatars fit (the rest collapse into "+N"). No overflow:hidden here — that
   would clip the hover popover anchored to this row. */
.fod-cal-day__vrow-avas {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

/* The day the viewer voted on gets a left accent bar. */
.cal-day--mine,
.fod-cal-day--mine {
    box-shadow: inset 3px 0 0 0 var(--primary);
}

/* The viewer's own vote (grid row 3): a small pill pinned to the bottom-left, coloured by its weight. */
.fod-cal-day__you {
    grid-row: 3;
    align-self: end;
    justify-self: start;
    position: relative;
    z-index: 2;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--ink-faint);
    background: color-mix(in srgb, var(--ink-faint) 13%, transparent);
}

.fod-cal-day__you svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

.fod-cal-day__you.fod-vt--best { color: var(--vt-best); background: var(--vt-best-bg); }
.fod-cal-day__you.fod-vt--good { color: var(--vt-good); background: var(--vt-good-bg); }
.fod-cal-day__you.fod-vt--maybe { color: var(--vt-maybe); background: var(--vt-maybe-bg); }

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

/* Selected term — the date+time the viewer picked in the "best days" box. Mirrors the month view's
   continuous selected-term outline (see .fod-cal-day--selected below): a 50% translucent wash plus a
   flush 2px per-edge border. In the time grid the selection is always a single-column vertical strip
   (one date x contiguous hour rows), so left/right always draw (the neighbors are other, unselected
   date columns) while top/bottom mark only the window's start/end rows (see
   CalendarSelectionOutline.EdgesFor and the fod-tg-slot--sel-* classes emitted by CalendarTimeGridView).
   Top/left border widths are zeroed here (box-sizing: border-box keeps the outer cell rect the same
   size) so the ::after outline below sits flush against the slot's own 1px grid-line borders. */
.fod-tg-slot--selected {
    box-shadow: inset 0 0 0 200px color-mix(in srgb, var(--term-select) 50%, transparent);
}

/* Double-class selector so this beats the base .fod-tg-slot border rule regardless of source
   order (equal single-class specificity would otherwise let the later base rule win). */
.fod-tg-slot.fod-tg-slot--selected {
    border-top-width: 0;
    border-left-width: 0;
}

.fod-tg-slot--selected::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border: 0;
    border-radius: 0;
}

.fod-tg-slot--sel-top::after { border-top: 2px solid var(--term-select); }
.fod-tg-slot--sel-bottom::after { border-bottom: 2px solid var(--term-select); }
.fod-tg-slot--sel-left::after { border-left: 2px solid var(--term-select); }
.fod-tg-slot--sel-right::after { border-right: 2px solid var(--term-select); }

/* Selection wash across the whole cell so a multi-day range reads as one selected block. The inset
   box-shadow paints over the heatmap background but under the content (day number, avatars) — nothing
   is obscured. The color-mix percentage is the single knob for selection-fill intensity: 50% keeps the
   selection clearly visible even over bright lime heat cells, where a lighter wash washes out toward
   grey. Top/left border widths are zeroed here (box-sizing: border-box keeps the outer cell rect the
   same size) so the ::after outline below sits flush against adjacent selected neighbors, merging the
   range's outline instead of showing a light seam; first-row/first-column cells already zero these via
   the nth-child rules above, so this is a no-op there. */
.fod-cal-day--selected {
    box-shadow: inset 0 0 0 200px color-mix(in srgb, var(--term-select) 50%, transparent);
    border-top-width: 0;
    border-left-width: 0;
}

/* "Mine" + selected day: keep the green vote bar alongside the purple selection wash. */
.fod-cal-day--selected.fod-cal-day--mine {
    box-shadow:
        inset 3px 0 0 0 var(--primary),
        inset 0 0 0 200px color-mix(in srgb, var(--term-select) 50%, transparent);
}

/* Continuous multi-day outline: each selected cell draws a border only on the edges that touch a
   non-selected (or off-grid) neighbor (see CalendarSelectionOutline.EdgesFor / fod-cal-day--sel-*
   classes emitted by CalendarMonthView). Shared internal edges between two selected cells get no
   class, so adjacent cells merge with no double lines or gaps — the whole range reads as ONE thin
   2px ring instead of a box per day. The base rule is flush (inset:0, square corners); no border or
   radius here so non-edge sides stay borderless. */
.fod-cal-day--selected::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border: 0;
    border-radius: 0;
}

.fod-cal-day--sel-top::after { border-top: 2px solid var(--term-select); }
.fod-cal-day--sel-bottom::after { border-bottom: 2px solid var(--term-select); }
.fod-cal-day--sel-left::after { border-left: 2px solid var(--term-select); }
.fod-cal-day--sel-right::after { border-right: 2px solid var(--term-select); }

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

/* Source-calendar colour dots on a busy cell: which Google calendar(s) the clash came from. Pinned to
   a corner, above the hatch (z-index 2), each <i> filled with its calendar's colour via inline style. */
.fod-cal-day__busy-dots,
.fod-tg-slot__busy-dots {
    position: absolute;
    z-index: 2;
    display: flex;
    gap: 2px;
    pointer-events: none;
}

/* Dots that carry a hover popup must catch the pointer (the cell otherwise sets pointer-events:none on
   them). Raise their stacking context on hover so the popup floats above neighbouring cells. */
.fod-cal-day__busy-dots.has-pop,
.fod-tg-slot__busy-dots.has-pop {
    pointer-events: auto;
    cursor: help;
}

.fod-cal-day__busy-dots.has-pop:hover,
.fod-tg-slot__busy-dots.has-pop:hover {
    z-index: 20;
}

.fod-cal-day__busy-dots {
    bottom: 4px;
    right: 4px;
}

.fod-tg-slot__busy-dots {
    top: 3px;
    right: 3px;
}

.fod-cal-day__busy-dots i,
.fod-tg-slot__busy-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--surface);
}

.fod-tg-slot__busy-dots i {
    width: 6px;
    height: 6px;
}

/* Hover popup listing the clashing events behind the dots — same fade/scale behaviour as .ava-popover. */
.fod-busy-pop {
    position: absolute;
    right: 0;
    z-index: 30;
    display: grid;
    gap: 6px;
    min-width: 180px;
    max-width: 260px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) 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;
    cursor: default;
}

/* Month dots sit at the bottom-right → drop the popup above them; time-grid dots sit top-right → below. */
.fod-cal-day__busy-dots .fod-busy-pop {
    bottom: calc(100% + 8px);
    transform-origin: bottom right;
}

.fod-tg-slot__busy-dots .fod-busy-pop {
    top: calc(100% + 8px);
    transform-origin: top right;
}

.fod-cal-day__busy-dots.has-pop:hover .fod-busy-pop,
.fod-cal-day__busy-dots.has-pop:focus-within .fod-busy-pop,
.fod-tg-slot__busy-dots.has-pop:hover .fod-busy-pop,
.fod-tg-slot__busy-dots.has-pop:focus-within .fod-busy-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.fod-busy-pop__head {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

.fod-busy-pop__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink);
}

.fod-busy-pop__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.fod-busy-pop__time {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fod-busy-pop__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink-soft);
}

/* Colour dot before each entry in the textual clash list, matching its source calendar's colour. */
.busy-list__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}

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

/* The cell footer is a row: the vote-split bar on the left, and the „counter + AvatarControl" group pushed
   to the right edge (margin-left:auto). On narrow cells the group wraps onto a separate row,
   still right-aligned. */
.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 {
    flex: 0 0 auto;
    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);
}

/* Avatars in calendar cells: smaller circles, with „+N" the same size.
   After the generic rules, so it wins by order at equal specificity. */
.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;
}

/* Weight outline in the context of an avatar row (month cell / week slot). Higher specificity
   than the white-halo rules above, so the weight ring wins. Smaller avatar overlap (-3px),
   so the colored outlines are visible instead of hiding under a neighbor. */
.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;
}

/* In the meetings list the popover opens ABOVE the avatars, so it doesn't cover
   the next meeting card (the avatars are in the middle of the row). */
.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);
}

/* Popover caret (points at the avatars) */
.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);
}

/* The card is kept above its neighbors while showing the popover */
.evt:hover {
    position: relative;
    z-index: 5;
}

/* In the time grid (week/day) the cell has overflow:hidden,
   which was clipping the avatar popover. On hovering the avatars we let
   the cell overflow and open the popover ABOVE the avatars. */
.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);
}

/* Right-hand columns of the time grid: the popover (≈220px, i.e. several columns) opens to the LEFT, so it doesn't extend
   past the right edge of the card (.fod-cal has overflow:hidden) and isn't clipped. The „last column" is the slot
   just before the hour cell of the next row (or the last slot of the grid); „second-to-last" — two slots
   before the hour. We cover the two outermost columns, because the popover is wider than one. */
.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;
}

/* The popover's caret then follows to the right edge (above the corresponding avatar). */
.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 {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

/* Long names truncate with an ellipsis instead of squashing the round avatar / vote icon beside them. */
.ava-popover__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

/* ── Vote-type badges ──────────────────────────────────────────────────────────────────────────
   One set of colors for all the places showing a vote type (best/works/maybe/nie pasuje):
   calendar, participant list and avatar popover. The colors match the --mine palette (green) and
   the red of „nie pasuje" from the slot editor, so the swatch immediately evokes the same vote type. */
.fod-vote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Vote-weight icon (★ / ✓ / ~) — replaces the former color square; tinted with the given type's color. */
.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); }

/* In the popover the badge lands on the right side of the row (the name takes the rest). */
.ava-popover__vote {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 8px;
}

/* A single vote row in the participants box: color square + label. */
.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 {
    align-items: flex-start;
    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;
}

/* "Ty" marker in a time-grid slot — mirrors the month view's own-vote pill: icon + label, coloured by
   weight. Sits next to the count; on narrow columns the label is hidden (icon only — see calendar.css). */
.fod-tg-you {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 6px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    color: var(--ink-faint);
    background: color-mix(in srgb, var(--ink-faint) 14%, transparent);
}

.fod-tg-you svg {
    width: 11px;
    height: 11px;
}

.fod-tg-you.fod-vt--best { color: var(--vt-best); background: var(--vt-best-bg); }
.fod-tg-you.fod-vt--good { color: var(--vt-good); background: var(--vt-good-bg); }
.fod-tg-you.fod-vt--maybe { color: var(--vt-maybe); background: var(--vt-maybe-bg); }

/* Slot meta line: headcount + own-vote pill kept on one row, wrapping only if the column is too tight. */
.fod-tg-slot__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
    max-width: 100%;
}

/* Week view: stack the slot as a column — meta line on top, the avatar control on its own full-width row
   below. The faces then fit the column (AvatarStack auto-fit) instead of spilling into the next day. */
.fod-cal-timegrid:not(.is-day) .fod-tg-slot {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.fod-cal-timegrid:not(.is-day) .fod-tg-avas {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
}

/* Day view: the avatar control shares the row and takes the space left after the count/chips. */
.fod-cal-timegrid.is-day .fod-tg-avas {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

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

/* Day view: a full label next to each person — avatar (with weight outline) + name + pill with an icon
   and a word describing the vote weight. We wrap across multiple lines, because the day column is wide. */
.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;
}

/* Vote-weight pill (day view): icon + word, tinted with the weight color. */
.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. */

/* The chip popover in the time grid opens UPWARD (like the avatar popover), so it doesn't hide under
   the following rows; the slot reveals overflow on hovering the 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: 5px;
    right: 6px;
    width: 21px;
    height: 21px;
    padding: 3px;
    border-radius: 50%;
    background: var(--heat-ink-hi);
    color: #c6f24e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    z-index: 3;
    line-height: 0;
}

.tg-star svg,
.fod-tg-star svg {
    width: 100%;
    height: 100%;
    display: block;
}

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

/* Owner-only event config badges in the Participants card header (access mode + privacy level).
   Deliberately understated — subtle outline chips with a `title` tooltip (cursor: help) — so they
   inform without competing with the card content. Own namespace (not .event-meta) so the event
   header's `.event-meta span { ...pill... }` rule can't turn the inner label into a second pill. */
.event-cfg {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.event-cfg__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    color: var(--ink-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    cursor: help;
}

.event-cfg__chip svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

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

/* Hint about adding several time ranges within a single day (only in the month view). */
.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-nocoverage {
    margin: 0 0 12px;
    font-size: 0.85rem;
    line-height: 1.4;
}

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

/* Position no. 1 has the same background as the rest by default — only the selected date is highlighted. */
.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;
}

.rank__time {
    color: var(--ink-soft);
    font-weight: 700;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Star next to a date that got a star in the calendar (the best date from the votes). */
.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);
    /* The track is the "ideal" (all participants) the fill is measured against, so it must stay
       visible even when nearly empty — a plain --line-soft track vanished on the dark card. */
    background: var(--line);
    box-shadow: inset 0 0 0 1px var(--line);
}

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

/* Right column of a ranking row: the headcount sits above the avatars (the people it counts), kept
   clearly apart from the bar so "10/10" never reads as the bar's label. */
.rank__right {
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 6px;
}

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

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

/* The „Najlepsze terminy" card has overflow:hidden — on hovering the avatars
   we let the popover extend past its edge. */
.sp2-card:has(.rank__avas.ava-row--expand:hover),
.sp2-card:has(.rank__avas.ava-row--expand:focus-within) {
    overflow: visible;
}

/* The ranking popover opens above the avatars and right-aligned,
   so it doesn't cover the next row or extend past the right edge. */
.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;
}

/* SummaryOnly "your own answer" row has no overlay checkbox, so drop the first grid column. */
.participant-row--summary summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

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

/* The „Powiadomienia" section: more spacing under the heading, to separate it from the toggle row. */
.manage-subhead {
    margin-bottom: 14px;
}

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

/* Card header: title + description (equivalent of the mockup's .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);
}

/* Spacing between form controls in the settings card */
.manage-form {
    display: grid;
    gap: 18px;
}

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

/* Actions next to a .provider row (e.g. rename / remove passkey) */
.provider__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex: 0 0 auto;
}

.premium-feature-note {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.premium-feature-note:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
}

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

.plan-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.plan-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

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

.plan-current__expiry--canceling,
.plan-current__expiry--trial-ending {
    color: color-mix(in srgb, #d9822b 82%, var(--ink));
}

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

/* Icon-only variant (e.g. "Ukryj/Pokaż panel") — a square button without a label. */
.layout-btn--icon {
    gap: 0;
    width: 40px;
    padding: 0;
    justify-content: center;
}

/* Side-panel toggle: green when the panel is shown (is-active), black when closed (is-off).
   The black is fixed in both themes, with a light icon for contrast. */
.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ść" (Full width) stretches the calendar beyond the two-column grid — it only makes sense where a
   side panel stands next to the calendar. Below 1200px the layout is single-column (the panel lands under the calendar),
   so the calendar takes full width anyway — we hide the button, because it does nothing (phone/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"],
.cal-picker__item 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,
.cal-picker__item 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;
}

/* Notifications toggle: Bootstrap switch (.form-switch) re-skinned with the brand accent. Laid out as a
   single centered row so the switch sits on the same line as its description (overrides .manage-card
   label's grid stacking). */
.notif-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding-left: 0;
    margin-bottom: 4px;
}

.notif-switch .form-check-input {
    flex: 0 0 auto;
    width: 2.25em;
    height: 1.25em;
    margin: 0;
    float: none;
    cursor: pointer;
    border-color: var(--line);
}

.notif-switch .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.notif-switch .form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 24%, transparent);
}

.notif-switch .form-check-label {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Controls bar at the top of the „Najlepsze terminy" card: toggle for showing the star on the calendar
   + the ranking criterion. Moved here from the bar above the calendar, because this is its natural place. */
.bestdays-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.85rem;
}

/* Segmented toggle for the best-date criterion (points / number of people). A local view
   preference — a single „pill" with two mutually exclusive buttons. */
.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;
}

/* Autosave indicator — replaces the former „Zapisz dostępność" button. */
.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;
}

/* Highlight for the active light/dark mode button. The only source of truth is the
   data-bs-theme attribute on <html>; the rule is GLOBAL (not scoped), because an ancestor selector on
   <html> doesn't work reliably in the isolated CSS of 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) ───────────────────── */
/* Radzen dialogs default to z-index 1001 (mask 1000), while Bootstrap's sticky navbar sits at 1020,
   so the top menu overlaps the dialog (and the mask doesn't dim it). We raise the dialog and mask above the navbar,
   so the modal — together with the background dimming — is always above the 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;
}

.auth-forgot {
    margin: -4px 0 0;
    text-align: center;
    font-size: 0.9rem;
}

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

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

/* ============================================================
   PLANS / PRICING  (page /pricing — pattern: data-screen="pricing")
   ============================================================ */
.pricing-head { text-align: center; max-width: 780px; margin: 0 auto; }
.pricing-head .eyebrow { display: block; margin-bottom: 16px; }
.pricing-head h1 { font-size: clamp(40px, 6vw, 70px); line-height: .98; margin: 0; }
.pricing-head p { color: var(--ink-soft); font-size: 18px; margin: 20px auto 0; max-width: 54ch; }

/* billing period toggle */
.bill-wrap { display: flex; justify-content: center; margin-top: 30px; }
.bill-toggle { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px; box-shadow: var(--shadow-sm); }
.bill-toggle button { border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 800; font-size: 14px; padding: 9px 18px; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.bill-toggle button:hover { color: var(--ink); }
.bill-toggle button.is-on { background: var(--primary); color: var(--on-primary); }
.bill-save { font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--heat-best); }
.bill-toggle button.is-on .bill-save { background: color-mix(in srgb, var(--on-primary) 16%, transparent); color: var(--on-primary); }

/* plans grid */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 820px; margin: 46px auto 0; align-items: start; }
@media (max-width: 991px){ .plans { grid-template-columns: 1fr; max-width: 460px; } }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%; position: relative; }
.plan--featured { border-color: var(--primary); border-width: 1.5px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); box-shadow: var(--shadow-lg); }
@media (min-width: 992px){ .plan--featured { transform: translateY(-10px); } }
.plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 6px 15px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); white-space: nowrap; }
.plan__name { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -.01em; }
.plan__tag { font-size: 14px; color: var(--ink-soft); margin-top: 7px; min-height: 40px; line-height: 1.4; }
.plan__price { display: flex; align-items: baseline; gap: 5px; margin: 22px 0 3px; flex-wrap: wrap; }
.plan__amt { font-family: var(--font-display); font-weight: 900; font-size: 54px; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.plan__cur { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); }
.plan__per { font-size: 14px; font-weight: 700; color: var(--ink-faint); }
.plan__note { font-size: 12.5px; color: var(--ink-faint); min-height: 18px; margin-top: 2px; }
/* plan selection button — a direct .btn or a button in a POST form (EditForm renders <form>) */
.plan > .btn, .plan > form { width: 100%; margin: 24px 0 2px; }
.plan > form { display: block; }
.plan > form > .btn { width: 100%; justify-content: center; margin: 0; }
/* show only the Subscribe form matching the currently selected billing period (m/y) — analogous to swapping the price/note */
.plan > form[data-bill] { display: none; }
.plan > form[data-bill].is-on { display: block; }
.plan__feats-lead { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 22px 0 0; }
.plan__feats { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.plan__feats li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink); line-height: 1.4; }
.plan__feats svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--heat-best); margin-top: 1px; }
.plan__feats li b { font-weight: 800; }

/* guarantee / small bar under the plans */
.pricing-guarantee { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 30px auto 0; font-size: 14px; color: var(--ink-soft); font-weight: 600; flex-wrap: wrap; text-align: center; }
.pricing-guarantee svg { width: 18px; height: 18px; color: var(--heat-best); }

/* comparison table */
.cmp-head { text-align: center; margin: 0 0 28px; }
.cmp-head h2 { font-size: clamp(28px, 3.6vw, 40px); }
.cmp-wrap { max-width: 1080px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--surface); }
.cmp { width: 100%; border-collapse: collapse; min-width: 620px; }
.cmp th, .cmp td { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; text-align: center; vertical-align: middle; }
.cmp thead th { position: sticky; top: 0; background: var(--surface-2); font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); z-index: 1; border-bottom: 1px solid var(--line); }
.cmp thead th .cmp-sub { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--ink-faint); margin-top: 2px; }
.cmp thead th.cmp-col-feat { text-align: left; }
.cmp thead th.is-featured { color: var(--heat-best); }
.cmp tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
.cmp td.is-featured, .cmp th.is-featured { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.cmp .cmp-yes svg { width: 20px; height: 20px; color: var(--heat-best); }
.cmp .cmp-no { color: var(--ink-faint); font-size: 18px; opacity: .5; }
.cmp .cmp-val { font-weight: 700; color: var(--ink); }
.cmp tbody .cmp-group th { background: var(--surface-2); font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }

/* FAQ (Bootstrap accordion -> brand) */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-head { text-align: center; margin: 0 0 28px; }
.faq-head h2 { font-size: clamp(28px, 3.6vw, 40px); }
.accordion.faq { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: var(--radius); --bs-accordion-inner-border-radius: var(--radius); --bs-accordion-btn-color: var(--ink); --bs-accordion-color: var(--ink); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--ink); --bs-accordion-btn-focus-border-color: var(--heat-best); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--heat-best) 22%, transparent); display: flex; flex-direction: column; gap: 12px; }
.faq .accordion-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius) !important; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq .accordion-button { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; padding: 18px 20px; background: var(--surface); border-radius: var(--radius) !important; }
.faq .accordion-button:not(.collapsed) { box-shadow: none; color: var(--ink); }
.faq .accordion-button::after { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238B9079' stroke-width='3' viewBox='0 0 24 24'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238B9079' stroke-width='3' viewBox='0 0 24 24'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e"); width: 18px; height: 18px; background-size: 18px; }
.faq .accordion-body { padding: 0 20px 20px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }

/* Viewport swap helpers. Used to render the touch-friendly <TimeWheel> drum picker on phones while
   keeping the RadzenDatePicker time fields on larger screens. Breakpoint matches the slot editor's. */
.fod-mobile-only { display: none; }
@media (max-width: 480px) {
    .fod-desktop-only { display: none; }
    .fod-mobile-only { display: block; }
}

/* Google's ToS allow hiding the reCAPTCHA v3 badge only when the required text attribution is
   shown instead (see .recaptcha-branding below). visibility:hidden keeps the badge element in the
   DOM (still occupying no visual space to the user) so findourdate.js fodRecaptcha.healthy() keeps
   finding it via document.querySelector(".grecaptcha-badge") and token minting stays unaffected;
   display:none or removing the element would break that health check and risk the documented
   Blazor zombie-grecaptcha re-bootstrap churn. */
.grecaptcha-badge {
    visibility: hidden;
}

.recaptcha-branding {
    margin-top: 10px;
    color: var(--ink-soft);
    font-size: 0.75rem;
}

.recaptcha-branding a {
    color: inherit;
    text-decoration: underline;
}