/*
 * SyncMyDay – application after login and the sign-in pages.
 * Loaded after site.css, which provides the tokens, self-hosted fonts, .btn, .field, .callout and .alert.
 * Plain CSS, no build step and no CDN. Calendar colours come in as inline custom properties
 * (--cal, --cal-ink, --cal-tint, --cal-tint2, --cal-line) from App\Enums\CalendarColor::cssVars().
 */

:root {
    --line-soft: #EDEDF3;
    --track: #C9C9D6;
    --chip-bg: #F1F1F6;
    --surface-2: #FAFAFC;
    --event-bg: #E4E4EC;
    --event-edge: #A9A9BC;
    --danger: #B91C1C;
    --danger-hover: #991B1B;
    --app-gutter: 24px;
}
@media (max-width: 400px) { :root { --app-gutter: 16px; } }

[x-cloak] { display: none !important; }

body.app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* ---------- Buttons: application sizes (≥ 44 px, 14 px / 600, radius 10) ---------- */
.app .btn {
    min-height: 44px; padding: 10px 14px; gap: 8px; border-radius: 10px; border-width: 1px;
    font-size: 14px; line-height: 1.3; white-space: nowrap;
}
.app .btn--quiet { background: #FFFFFF; border-color: var(--line); color: var(--ink); }
.app .btn--quiet:hover { background: #FFFFFF; border-color: var(--line-strong); color: var(--ink); }
.app .btn--lg { min-height: 52px; padding: 13px 20px; font-size: 16px; }
.app .btn--sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.app .btn--wrap { white-space: normal; }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.btn--danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #FFFFFF; }
.btn--danger-quiet { background: #FFFFFF; border-color: var(--line); color: var(--danger); }
.btn--danger-quiet:hover { background: var(--err-bg); border-color: var(--err-line); color: var(--danger); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
a.btn[aria-disabled="true"] { pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.link-btn {
    background: none; border: 0; padding: 0; font: inherit; color: var(--accent-ink); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }
.text-link { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Header ---------- */
.app-header { position: sticky; top: 0; z-index: 40; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.app-header__inner {
    max-width: 1200px; margin: 0 auto; padding: 0 var(--app-gutter); height: 64px;
    display: flex; align-items: center; gap: 24px;
}
.app-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.app-brand:hover { color: var(--ink); }
.app-brand__mark {
    width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
}
.app-brand__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.app-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tabs a {
    text-decoration: none; font-size: 15px; font-weight: 500; color: var(--body);
    padding: 10px 14px; border-radius: 10px; white-space: nowrap;
}
.app-tabs a:hover { color: var(--ink); background: var(--bg); }
.app-tabs a[aria-current="page"] { background: var(--line-soft); color: var(--ink); font-weight: 600; }
.app-header__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.app-header__link { font-size: 14px; font-weight: 500; color: var(--body); text-decoration: none; padding: 10px 12px; border-radius: 10px; }
.app-header__link:hover { color: var(--ink); background: var(--bg); }
.only-sm { display: none !important; }
@media (max-width: 760px) {
    .app-header__inner { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 8px; row-gap: 10px; }
    .app-tabs { order: 3; width: 100%; }
    .hide-sm { display: none !important; }
    .only-sm { display: flex !important; }
}

/* Account menu */
.menu { position: relative; }
.menu__button {
    display: flex; align-items: center; gap: 6px; background: #FFFFFF; border: 1px solid var(--line);
    border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; color: var(--muted);
}
.menu__button:hover { border-color: var(--line-strong); }
.menu__initials {
    width: 32px; height: 32px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-deep);
    font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.menu__panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 248px; max-width: calc(100vw - 32px);
    background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 6px;
    box-shadow: 0 16px 40px -16px rgba(21, 21, 42, .28);
}
.menu__who { padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--subtle); }
.menu__who strong { display: block; margin-top: 2px; color: var(--ink); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__item {
    display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; background: none; border: 0;
    cursor: pointer; text-align: left;
}
.menu__item svg { color: var(--muted); }
.menu__item:hover, .menu__item:focus-visible { background: var(--bg); color: var(--ink); }
.menu__sep { height: 1px; background: var(--line-soft); margin: 6px 0; }

/* ---------- Trial / subscription bar ---------- */
.plan-bar { border-bottom: 1px solid; font-size: 14px; line-height: 1.5; }
.plan-bar__inner {
    max-width: 1200px; margin: 0 auto; padding: 10px var(--app-gutter);
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
}
.plan-bar__link { font-weight: 600; color: inherit; text-underline-offset: 3px; }
.plan-bar__link:hover { color: inherit; }
.plan-bar--info { background: var(--accent-soft); border-color: #DCD9FA; color: var(--accent-deep); }
.plan-bar--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.plan-bar--danger { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }
.plan-bar--danger .plan-bar__inner { justify-content: space-between; gap: 10px 16px; }

/* ---------- Page ---------- */
.app-main {
    flex: 1 0 auto; width: 100%; max-width: calc(var(--w, 1200px) + 2 * var(--app-gutter)); margin: 0 auto;
    padding: 40px var(--app-gutter) 56px; display: flex; flex-direction: column; gap: 24px;
}
.stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.stack--sm { gap: 12px; }
.stack--md { gap: 16px; }
.app-head { display: flex; flex-direction: column; gap: 10px; }
.app-head__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.page-title-app { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -.025em; }
.page-lead { font-size: 16px; color: var(--body); margin-top: 6px; }
.back-link {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 4px 0;
}
.back-link:hover { color: var(--ink); }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }

/* ---------- Footer ---------- */
.app-footer { border-top: 0; }
.app-footer__inner {
    max-width: 1200px; margin: 0 auto; padding: 8px var(--app-gutter) 40px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 13px; color: var(--muted);
}
.app-footer__inner a, .app-footer__inner button {
    color: var(--muted); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0;
    padding: 0; font: inherit; cursor: pointer;
}
.app-footer__inner a:hover, .app-footer__inner button:hover { color: var(--ink); }

/* ---------- Card ---------- */
.card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 24px; min-width: 0; }
.card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.card__head--flush { margin-bottom: 0; }
.card__title { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.card__title--sm { font-size: 17px; }
.card__desc { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.card__eyebrow { font-size: 13px; font-weight: 600; color: var(--subtle); }
.card--split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.card--split > div { min-width: 0; flex: 1 1 320px; }
.card-list { list-style: none; margin: 0; padding: 0; }
.card-list > li { padding: 16px 0; border-top: 1px solid var(--line); }
.card-list > li:last-child { padding-bottom: 0; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Status badge (shape + dot + text, so colour is never the only signal) ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.4;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--b-bg); color: var(--b-ink);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--b-dot); flex-shrink: 0; }
.badge--active { --b-bg: #EDF8F0; --b-dot: #15803D; --b-ink: #14532D; }
.badge--error, .badge--pending, .badge--warn { --b-bg: #FFF7E6; --b-dot: #B45309; --b-ink: #7A3E00; }
.badge--reauth, .badge--blocked, .badge--danger { --b-bg: #FEF2F2; --b-dot: #DC2626; --b-ink: #7F1D1D; }
.badge--paused { --b-bg: #EDEDF3; --b-dot: #6B6C82; --b-ink: #3F4057; }
.badge--accent { --b-bg: var(--accent); --b-dot: transparent; --b-ink: #FFFFFF; }
.badge--accent::before { display: none; }

/* Setting chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center; font-size: 13px; line-height: 1.45; color: #3F4057;
    background: var(--chip-bg); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px;
}

/* ---------- Calendar colour elements ---------- */
.avatar { position: relative; display: inline-flex; flex-shrink: 0; --s: 32px; }
.avatar__face {
    width: var(--s); height: var(--s); border-radius: calc(var(--s) * .3); background: var(--cal); color: #FFFFFF;
    font-family: var(--font-display); font-weight: 700; font-size: calc(var(--s) * .45); line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.avatar__badge {
    position: absolute; right: -5px; bottom: -5px; width: max(14px, calc(var(--s) * .4)); height: max(14px, calc(var(--s) * .4));
    border-radius: 50%; background: #FFFFFF; color: var(--ink);
    box-shadow: 0 0 0 2px #FFFFFF, 0 1px 3px rgba(21, 21, 42, .25);
    display: flex; align-items: center; justify-content: center;
}
.avatar__badge svg { width: 62%; height: 62%; }

.cal-pill {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    background: var(--cal-tint); color: var(--cal-ink); font-size: 14px; font-weight: 600; line-height: 1.4;
    padding: 5px 11px 5px 9px; border-radius: 999px;
}
.cal-pill::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--cal); flex-shrink: 0; }
.cal-pill__service { font-weight: 400; opacity: .8; }

.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--cal); flex-shrink: 0; }
.cal-dot--12 { width: 12px; height: 12px; border-radius: 3px; }
.cal-name { display: inline-flex; align-items: center; gap: 6px; }
.cal-ink { color: var(--cal-ink); font-weight: 700; }

.blocker {
    background: repeating-linear-gradient(135deg, var(--cal-tint) 0, var(--cal-tint) 6px, var(--cal-tint2) 6px, var(--cal-tint2) 12px);
    border: 1px dashed var(--cal); color: var(--cal-ink); border-radius: 6px; padding: 5px 8px; font-weight: 600;
}
.source-event { border-left: 3px solid var(--cal); background: var(--cal-tint); color: var(--cal-ink); border-radius: 6px; padding: 5px 8px; font-weight: 600; }

.rule-mark { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.rule-mark span { position: absolute; width: 34px; height: 34px; border-radius: 8px; }
.rule-mark span:first-child { left: 0; top: 0; background: var(--a); }
.rule-mark span:last-child { right: 0; bottom: 0; background: var(--b); box-shadow: 0 0 0 2px #FFFFFF; }
.rule-mark--sm { width: 30px; height: 30px; }
.rule-mark--sm span { width: 22px; height: 22px; border-radius: 6px; }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.flow__arrow { display: flex; color: #8A8BA0; }
.flow-preview {
    display: flex; flex-direction: column; gap: 12px; background: var(--surface-2);
    border-radius: 12px; padding: 12px 14px; font-size: 12px;
}
.flow-preview__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.flow-preview__line { flex-grow: 1; min-width: 24px; height: 2px; background: var(--a); }
.flow-preview .source-event, .flow-preview .blocker { white-space: nowrap; }

/* ---------- Switch ---------- */
.switch {
    position: relative; width: 44px; height: 26px; border-radius: 13px; border: 0; padding: 0;
    background: var(--track); cursor: pointer; flex-shrink: 0; transition: background-color .15s;
}
.switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px;
    background: #FFFFFF; box-shadow: 0 1px 2px rgba(21, 21, 42, .25); transition: transform .15s;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Checkbox that looks like a switch: <span class="switch-box"><input type="checkbox" role="switch"><span></span></span> */
.switch-box { position: relative; display: inline-flex; width: 44px; height: 26px; flex-shrink: 0; }
.switch-box input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch-box input + span { position: absolute; inset: 0; border-radius: 13px; background: var(--track); transition: background-color .15s; }
.switch-box input + span::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px;
    background: #FFFFFF; box-shadow: 0 1px 2px rgba(21, 21, 42, .25); transition: transform .15s;
}
.switch-box input:checked + span { background: var(--accent); }
.switch-box input:checked + span::after { transform: translateX(18px); }
.switch-box input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after, .switch-box span, .switch-box span::after { transition: none; } }

/* ---------- Notices (inline alert with actions) ---------- */
.notice {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    border: 1px solid; border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.5;
}
.notice__text { display: flex; gap: 10px; align-items: flex-start; min-width: 0; flex: 1 1 280px; }
.notice__text > svg { margin-top: 2px; }
.notice__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice strong { font-weight: 700; }
.notice--danger { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }
.notice--danger .notice__text > svg { color: var(--danger); }
.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.notice--warn .notice__text > svg { color: var(--warn-icon); }
.notice--info { background: var(--accent-tint); border-color: var(--accent-border); color: var(--accent-deep); }
.notice--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.notice--stack { flex-direction: column; align-items: stretch; }
.notice--stack .notice__text { flex: none; }
.app .callout { margin: 0; }
.app .alert { font-size: 14px; }

/* ---------- Empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px 0; }
.empty__icon {
    width: 56px; height: 56px; border-radius: 28px; background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.empty__title { font-size: 20px; }
.empty__text { font-size: 15px; color: var(--body); max-width: 440px; }

/* ---------- Status card (Overview) ---------- */
.status-card { border: 1px solid; border-radius: 16px; padding: 24px; }
.status-card--ok { background: #F2FAF4; border-color: #CFEBD7; --sc-ink: #14532D; --sc-muted: #3D5C46; --sc-icon: #15803D; }
.status-card--warn { background: #FFFAF0; border-color: var(--warn-line); --sc-ink: var(--warn-ink); --sc-muted: #7A5626; --sc-icon: var(--warn-icon); }
.status-card--danger { background: #FFF6F6; border-color: var(--err-line); --sc-ink: var(--err-ink); --sc-muted: #8A3A3A; --sc-icon: #DC2626; }
.status-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.status-card__lead { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 340px; }
.status-card__icon {
    width: 48px; height: 48px; border-radius: 24px; background: #FFFFFF; color: var(--sc-icon);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.status-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--sc-ink); }
.status-card__sub { font-size: 14px; color: var(--sc-muted); margin-top: 2px; }
.status-card__sub a { color: var(--sc-ink); font-weight: 600; }
.status-card__action { margin-top: 10px; }
.stats { margin: 0; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.stats dt { font-size: 13px; color: var(--sc-muted, var(--muted)); white-space: nowrap; }
.stats dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--sc-ink, var(--ink)); }
@media (max-width: 560px) { .stats { display: grid; grid-template-columns: 1fr 1fr; } }

/* First-run steps */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.steps__item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px;
    border: 1px solid var(--line); border-radius: 14px; color: var(--subtle);
}
.steps__item--current { border: 2px solid var(--accent); background: #FAFAFF; padding: 15px; color: var(--ink); }
.steps__item--done { color: var(--ink); }
.steps__num {
    width: 28px; height: 28px; border-radius: 14px; background: var(--line-soft); color: var(--muted);
    font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.steps__item--current .steps__num { background: var(--ink); color: #FFFFFF; }
.steps__item--done .steps__num { background: var(--ok-bg); color: var(--ok-icon); }
.steps__text { flex: 1 1 200px; min-width: 0; }
.steps__title { display: block; font-weight: 600; color: #3F4057; }
.steps__item--current .steps__title, .steps__item--done .steps__title { color: var(--ink); }
.steps__desc { font-size: 14px; color: var(--muted); }

/* ---------- Today timeline ---------- */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend__event { width: 22px; height: 12px; border-radius: 3px; background: var(--event-bg); border-left: 3px solid var(--event-edge); }
.legend__blocker { width: 22px; height: 12px; border-radius: 3px; padding: 0; }
.legend__now { width: 2px; height: 14px; background: #DC2626; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tl { min-width: 480px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.tl__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center; }
.tl__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tl__name { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl__service { display: block; font-size: 12px; color: var(--subtle); }
.tl__hours { position: relative; height: 16px; }
.tl__hours span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--faint); }
.tl__track { position: relative; height: 48px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.tl__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.tl__block {
    position: absolute; top: 8px; bottom: 8px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1;
    display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; min-width: 6px;
}
.tl__block--event { background: var(--event-bg); border-left: 3px solid var(--event-edge); color: #3F4057; }
.tl__block.blocker { padding: 0 6px; }
.tl__allday { position: absolute; left: 4px; right: 4px; top: 2px; height: 4px; border-radius: 2px; }
.tl__allday--event { background: var(--event-edge); }
.tl__allday.blocker { padding: 0; border-width: 1px; }
.tl__paused {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(135deg, #FEF2F2 0, #FEF2F2 6px, #FBE3E3 6px, #FBE3E3 12px);
    color: var(--err-ink); font-size: 12px; font-weight: 600;
}
.tl__now { position: absolute; top: 0; bottom: 0; width: 2px; background: #DC2626; z-index: 2; pointer-events: none; }
@media (max-width: 760px) { .tl__now, .legend__now-item { display: none !important; } }
@media (max-width: 640px) {
    .tl__row { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
    .tl__label { display: none; }
}

/* ---------- Rule rows (Overview) ---------- */
.rule-row {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
    padding: 20px 0; border-top: 1px solid var(--line);
}
.rule-row:last-child { padding-bottom: 0; }
.rule-row__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 320px; }
.rule-title {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; align-self: flex-start;
    font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none;
}
.rule-title:hover { color: var(--accent-ink); }
.rule-title .cal-name { gap: 8px; }
.rule-row__services { font-size: 13px; color: var(--subtle); }
.rule-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 13px; color: var(--muted); margin-left: auto; text-align: right; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.table--wide { min-width: 640px; }
.table th {
    text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 12px;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tbody tr:last-child td { border-bottom: 0; }
.table__what { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.table__what svg { color: var(--muted); }
.table__what--error, .table__what--error svg { color: var(--danger); }
.table__error { margin-top: 4px; font-size: 13px; color: var(--danger); font-weight: 400; }
.table .cal-name { font-size: 14px; }
.table__right { text-align: right; }

/* ---------- Description lists ---------- */
.dl-grid { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.dl-grid dt { font-size: 13px; color: var(--muted); }
.dl-grid dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 900px) { .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Calendars ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.cal-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.cal-card__top {
    background: var(--cal-tint); padding: 20px; display: flex; align-items: center; gap: 14px;
    border-bottom: 1px solid var(--cal-line);
}
.cal-card__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--cal-ink); text-decoration: none; overflow-wrap: anywhere; }
.cal-card__name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cal-card__line { display: block; font-size: 13px; color: var(--cal-ink); opacity: .85; overflow-wrap: anywhere; }
.cal-card__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; font-size: 13px; color: var(--muted); }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

.service-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.service-tile {
    display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 16px;
    color: var(--ink); background: #FFFFFF; text-decoration: none; transition: border-color .15s;
}
.service-tile:hover { border-color: var(--line-strong); color: var(--ink); }
.service-tile__top { display: flex; justify-content: space-between; align-items: flex-start; }
.service-tile__mark {
    width: 56px; height: 56px; border-radius: 16px; background: var(--ink); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.service-tile__mark--email { background: var(--accent); }
.service-tile__plus {
    width: 32px; height: 32px; border-radius: 16px; background: var(--chip-bg);
    display: flex; align-items: center; justify-content: center;
}
.service-tile__name { display: block; font-weight: 700; font-size: 17px; }
.service-tile__desc { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }

/* Other providers: a quieter list below the main service tiles */
.service-more { margin-top: 24px; }
.service-more__title { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
/* Same columns as .service-tiles, so the small tiles line up under the large ones */
.service-more__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.service-more__item {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 12px;
    color: var(--ink); background: #FFFFFF; text-decoration: none; transition: border-color .15s;
}
.service-more__item:hover { border-color: var(--line-strong); color: var(--ink); }
.service-more__mark {
    width: 32px; height: 32px; border-radius: 9px; background: var(--chip-bg); color: var(--ink);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.service-more__text { min-width: 0; }
.service-more__name { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.service-more__desc { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Detail */
.cal-band {
    background: var(--cal-tint); border: 1px solid var(--cal-line); border-radius: 20px; padding: 28px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.cal-band__who { display: flex; align-items: center; gap: 18px; min-width: 0; }
.cal-band__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cal-band__name { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -.025em; color: var(--cal-ink); overflow-wrap: anywhere; }
.cal-band__line { font-size: 15px; color: var(--cal-ink); opacity: .9; margin-top: 6px; overflow-wrap: anywhere; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; margin: 0; }
.swatch { position: relative; display: inline-flex; }
.swatch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.swatch span {
    width: 40px; height: 40px; border-radius: 10px; background: var(--cal); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.swatch input:not(:checked) + span svg { display: none; }
.swatch input:checked + span { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--cal); }
.swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 5px; }
/* Phones: two even rows of six (12 colours), swatches shrink on the narrowest screens */
@media (max-width: 480px) {
    .swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 40px)); gap: 10px; }
    .swatch span { width: 100%; height: auto; aspect-ratio: 1; }
}
.rule-link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.rule-link-row__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rule-link-row__role { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.rule-link-row a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.stat-tile { background: var(--cal-tint, var(--bg)); border-radius: 12px; padding: 16px; color: var(--cal-ink, var(--ink)); }
.stat-tile__label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.stat-tile__value { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-top: 6px; }
.stat-tile__note { font-size: 13px; margin-top: 4px; }

/* ---------- Rules page ---------- */
.rule-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.rule-card__name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rule-card__name h2 { font-size: 19px; overflow-wrap: anywhere; }
.rule-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rule-card__body { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.rule-card__foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted);
}
.inline-form { display: inline; margin: 0; }

/* ---------- Editor ---------- */
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.editor-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.editor-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1000px) {
    .editor-grid { grid-template-columns: minmax(0, 1fr); }
    .editor-side { position: static; }
}
.step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.step-head__num {
    width: 28px; height: 28px; border-radius: 14px; background: var(--ink); color: #FFFFFF; font-weight: 700;
    font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.step-head h2 { font-size: 20px; }
.step-head p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.field__hint { font-size: 13px; line-height: 1.45; color: var(--muted); }
.field--with-avatar { position: relative; }
.field--with-avatar .field__input { padding-left: 40px; }
.field__avatar { position: absolute; left: 14px; bottom: 16px; pointer-events: none; display: flex; }
.target-list { display: flex; flex-direction: column; gap: 10px; }
.target-row {
    display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px;
}
.target-row__text { flex: 1; min-width: 0; }
.target-row__name { display: block; font-weight: 600; }
.target-row__line { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.target-row select.field__input { flex: 1; min-width: 0; height: 44px; }
.icon-btn {
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #FFFFFF; color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.add-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--accent-ink); align-self: flex-start; background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0; }
@media (max-width: 560px) { .radio-cards { grid-template-columns: 1fr; } }
.radio-card {
    display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px;
    cursor: pointer; background: #FFFFFF;
}
.radio-card input { margin: 3px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.radio-card:has(input:checked) { border: 2px solid var(--accent); padding: 15px; background: #FAFAFF; }
.radio-card:has(input:disabled) { cursor: default; }
.radio-card:has(input:checked:disabled) { border: 1px solid var(--line); padding: 16px; background: #F6F6FA; }
.radio-card__title .cal-dot { margin-right: 4px; vertical-align: 1px; }
.radio-card__title { display: block; font-weight: 600; }
.radio-card__desc { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.filter-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.filter-row__title { display: block; font-weight: 600; }
.filter-row__desc { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.subpanel { background: var(--bg); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.day-toggles { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.day-toggle { position: relative; display: inline-flex; }
.day-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.day-toggle span {
    min-width: 64px; height: 42px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: #FFFFFF;
    display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--ink); pointer-events: none;
}
.day-toggle input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.day-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) { .day-toggle span { min-width: 42px; } }
.time-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.time-row .field { width: 150px; }
.time-row__quick { font-size: 13px; color: var(--muted); padding-bottom: 12px; }
.summary-card { display: flex; flex-direction: column; gap: 16px; }
.summary-card__label { font-size: 13px; font-weight: 600; color: var(--subtle); }
.summary-card__text { font-size: 16px; line-height: 1.6; color: var(--ink); }
.summary-card__text strong { font-weight: 700; }
/* Column-wise 3×4 grid: the columns are display: contents, so each row (and its arrow) lines up across them */
.illus {
    display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); grid-template-rows: repeat(4, auto);
    grid-auto-flow: column; gap: 8px 6px; align-items: center; font-size: 11px;
}
.illus__col, .illus__mid { display: contents; }
.illus__head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--cal-ink); padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.illus__head::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cal); flex-shrink: 0; }
.illus__slot { min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.illus__free { border-left: 3px solid var(--event-edge); background: var(--event-bg); color: var(--muted); border-radius: 6px; padding: 4px 8px; }
.illus__arrow {
    width: 24px; height: 24px; border-radius: 12px; background: var(--cal); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
}
.illus .source-event, .illus .blocker { line-height: 1.35; overflow: hidden; }
.error-summary { border-radius: 12px; }

/* ---------- Dialog ---------- */
dialog.dialog {
    width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 0; border-radius: 20px; padding: 28px;
    background: #FFFFFF; color: var(--ink); box-shadow: 0 24px 64px -16px rgba(21, 21, 42, .35); overflow: auto;
}
dialog.dialog--wide { width: min(520px, calc(100vw - 32px)); }
dialog.dialog::backdrop { background: rgba(21, 21, 42, .66); }
.dialog__close {
    position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 10px; border: 0;
    background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dialog__close:hover { background: var(--bg); color: var(--ink); }
.dialog__icon {
    width: 48px; height: 48px; border-radius: 24px; background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.dialog__icon--danger { background: var(--err-bg); color: var(--danger); }
.dialog__icon--ok { background: var(--ok-bg); color: var(--ok-icon); }
.dialog__title { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; padding-right: 36px; overflow-wrap: anywhere; }
.dialog__body { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--body); display: flex; flex-direction: column; gap: 14px; }
.dialog__body strong { color: var(--ink); }
.dialog__actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dialog__box { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.dialog__box-title { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.dialog__box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dialog__pair { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.dialog__pair .flow__arrow { color: var(--faint); }

/* Progress steps (first sync) */
.progress-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.progress-steps li { display: flex; gap: 14px; align-items: flex-start; }
.progress-steps__icon { width: 28px; height: 28px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.progress-steps__icon--done { background: var(--ok-bg); color: var(--ok-icon); }
.progress-steps__icon--wait { border: 2px dashed var(--track); }
.progress-steps__icon--error { background: var(--err-bg); color: var(--danger); }
.progress-steps__icon--run { border: 3px solid var(--line); border-top-color: var(--accent); animation: smd-spin .9s linear infinite; }
@keyframes smd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .progress-steps__icon--run { animation-duration: 3s; } }
.progress-steps__title { font-weight: 600; color: var(--ink); font-size: 15px; }
.progress-steps__item--wait .progress-steps__title { color: var(--subtle); font-weight: 500; }
.progress-steps__note { font-size: 13px; color: var(--muted); margin-top: 2px; }
.progress-steps__body { flex: 1; min-width: 0; padding-top: 3px; }
.bar { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; margin-top: 8px; }
.bar__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cal, var(--accent)), var(--cal-line, var(--accent-border))); transition: width .4s; }
.bar--indeterminate .bar__fill { width: 35%; animation: smd-slide 1.3s ease-in-out infinite; }
@keyframes smd-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.bar--accent .bar__fill { background: var(--accent); }

/* ---------- Toasts ---------- */
.toasts {
    position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; gap: 10px;
    width: min(440px, calc(100vw - 32px));
}
@media (max-width: 480px) { .toasts { right: 16px; bottom: 16px; } }
.toast {
    display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; padding: 12px 8px 12px 16px;
    font-size: 14px; line-height: 1.45; box-shadow: 0 12px 24px -12px rgba(21, 21, 42, .4);
}
.toast > svg { margin-top: 1px; }
.toast__text { flex: 1; min-width: 0; padding-top: 0; overflow-wrap: anywhere; }
.toast--success { background: var(--ink); color: #FFFFFF; }
.toast--success > svg { color: #86EFAC; }
.toast--error { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-ink); }
.toast--error > svg { color: var(--danger); }
.toast--warning { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.toast--warning > svg { color: var(--warn-icon); }
.toast__close {
    width: 28px; height: 28px; margin: -4px 0 -4px 4px; border-radius: 8px; border: 0; background: transparent;
    color: inherit; opacity: .75; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.toast__close:hover { opacity: 1; background: rgba(127, 127, 140, .15); }

/* ---------- Billing ---------- */
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.price-card { border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.price-card--featured { border: 2px solid var(--accent); padding: 23px; background: #FAFAFF; }
.price-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.price-card__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-card__amount { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.price-card__per { font-size: 16px; color: var(--muted); }
.price-card__note { font-size: 14px; color: var(--body); }
.price-card form { margin-top: auto; }
.features { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--ink); }
.features li { display: inline-flex; align-items: center; gap: 8px; }
.features svg { color: var(--ok-icon); }
.app-faq { list-style: none; margin: 0; padding: 0; }
.app-faq li { padding: 16px 0; border-top: 1px solid var(--line); }
.app-faq li:last-child { padding-bottom: 0; }
.app-faq h3 { font-family: var(--font-sans); font-size: 16px; font-weight: 600; }
.app-faq p { font-size: 14px; color: var(--body); margin-top: 4px; }
.plan-progress { width: 240px; max-width: 100%; }
.plan-progress .bar { margin-top: 0; }
.plan-progress__label { font-size: 12px; color: var(--muted); margin-top: 6px; }
.method-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.method-row__who { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 220px; }
.method-row__icon {
    width: 40px; height: 40px; border-radius: 10px; background: var(--chip-bg); color: var(--muted);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.method-row__name { display: block; font-weight: 600; }
.method-row__line { display: block; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.method-row__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; font-size: 13px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 20px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.form-actions--start { justify-content: flex-start; }

/* Timezone combobox */
.combo { position: relative; }
.combo__list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 280px; overflow: auto;
    background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 6px; margin: 0; list-style: none;
    box-shadow: 0 16px 40px -16px rgba(21, 21, 42, .28);
}
.combo__option { padding: 9px 10px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.combo__option[aria-selected="true"] { font-weight: 600; }
.combo__option--active { background: var(--bg); }
.combo__group { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--subtle); }

/* ---------- Onboarding ---------- */
.ob-steps { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--muted); }
.ob-steps li { display: flex; align-items: center; gap: 8px; }
.ob-steps__dot { width: 10px; height: 10px; border-radius: 5px; background: var(--track); }
.ob-steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.ob-steps li[aria-current="step"] .ob-steps__dot { background: var(--accent); }
.ob-steps__done .ob-steps__dot { background: var(--ok-icon); }
.ob-steps__line { width: 24px; height: 1px; background: var(--line-strong); }
@media (max-width: 560px) { .ob-steps__label { display: none; } .ob-steps li[aria-current="step"] .ob-steps__label { display: inline; } }

.onboarding-bar { background: var(--accent-soft); border-bottom: 1px solid #DCD9FA; color: var(--accent-deep); font-size: 14px; }
.onboarding-bar__inner {
    max-width: 1200px; margin: 0 auto; padding: 10px var(--app-gutter);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
}
.onboarding-bar ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.onboarding-bar li { display: inline-flex; align-items: center; gap: 6px; }
.onboarding-bar a { color: inherit; font-weight: 600; }
.onboarding-bar__num {
    width: 20px; height: 20px; border-radius: 10px; background: #FFFFFF; color: var(--accent-deep); font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.onboarding-bar li.is-done .onboarding-bar__num { background: var(--ok-icon); color: #FFFFFF; }
.onboarding-bar__dismiss { margin-left: auto; }

/* ---------- Timeline (how-to steps on form pages) ---------- */
.howto { list-style: none; margin: 0; padding: 0; counter-reset: howto; display: flex; flex-direction: column; gap: 18px; }
.howto > li { position: relative; padding-left: 44px; counter-increment: howto; font-size: 15px; line-height: 1.6; color: var(--body); }
.howto > li::before {
    content: counter(howto); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 14px;
    background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.howto > li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 34px; bottom: -14px; width: 1px; background: var(--line); }
.howto strong { color: var(--ink); }
.code-box {
    display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
    padding: 6px 6px 6px 14px; font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere;
}
.code-box code { flex: 1; min-width: 0; }
.choice-list { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; }

/* ---------- Invite a colleague (referrals/index, dashboard card) ---------- */
.invite-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px 40px; align-items: center;
    background: var(--accent-tint); border: 1px solid var(--accent-border); border-radius: 20px; padding: 36px;
}
.invite-hero__body { min-width: 0; }
.invite-hero__title { font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); margin-top: 8px; }
.invite-hero__title span { display: block; color: var(--accent); }
.invite-hero__lead { font-size: 16px; line-height: 1.55; color: var(--body); margin-top: 12px; max-width: 520px; }
.invite-hero__note { font-size: 13px; color: var(--muted); margin-top: 12px; }
.invite-link {
    display: flex; align-items: center; gap: 8px; margin-top: 24px; background: #FFFFFF;
    border: 1px solid var(--accent-border); border-radius: 12px; padding: 6px 6px 6px 16px;
}
.invite-link:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79, 70, 229, .18); }
.invite-link__url { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; font-family: var(--font-mono); font-size: 15px; color: var(--ink); text-overflow: ellipsis; }
.invite-link__url:focus { outline: none; }
.invite-link .btn { flex-shrink: 0; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Two vouchers with a perforated stub: the colleague's months (accent) and yours (green) */
.invite-coupons { display: flex; flex-direction: column; gap: 16px; padding: 4px 8px; }
.coupon {
    --coupon: var(--accent);
    position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); min-height: 98px;
    background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px;
}
.coupon--referee { transform: rotate(-2deg); }
.coupon--referrer { --coupon: var(--ok-icon); transform: rotate(1.5deg); margin-left: 18px; }
.coupon__value {
    display: flex; align-items: center; justify-content: center; margin: -1px 0 -1px -1px; border-radius: 14px 0 0 14px;
    background: var(--coupon); border-right: 2px dashed rgba(255, 255, 255, .55);
    font-family: var(--font-display); font-size: 46px; font-weight: 700; line-height: 1; color: #FFFFFF;
}
/* Perforation notches, cut out of the coupon in the hero's colour */
.coupon::before, .coupon::after {
    content: ""; position: absolute; left: 69px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent-tint); border: 1px solid var(--line);
}
.coupon::before { top: -9px; clip-path: inset(50% 0 0 0); }
.coupon::after { bottom: -9px; clip-path: inset(0 0 50% 0); }
.coupon__body { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 18px; min-width: 0; }
.coupon__who { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--coupon); }
.coupon__amount { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.coupon__when { font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
    .coupon { animation: coupon-in .45s ease-out both; }
    .coupon--referrer { animation-delay: .12s; }
}
@keyframes coupon-in { from { opacity: 0; translate: 0 10px; } }

/* The message and how it arrives in a chat (text + link preview from og:title / og:description) */
.invite-message { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; }
.invite-message__text { min-height: 196px; }
.invite-chat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.invite-chat__bubble {
    background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 12px; max-width: 420px;
}
.invite-chat__text { font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.invite-chat__link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.invite-chat__card { display: flex; flex-direction: column; gap: 3px; border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; }
.invite-chat__domain { font-size: 12px; color: var(--muted); }
.invite-chat__title { font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.invite-chat__desc { font-size: 13px; line-height: 1.45; color: var(--body); }

/* Rewards within the cap */
.rewards { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.reward-slots { display: flex; gap: 10px; }
.reward-slot {
    width: 64px; height: 64px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 2px dashed var(--track); color: var(--subtle); font-family: var(--font-display); font-size: 13px; font-weight: 700;
}
.reward-slot--earned { border: 2px solid var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.rewards__caption { flex: 1 1 260px; font-size: 15px; line-height: 1.5; color: var(--body); }

.invite-steps { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; }

/* "How it works" on dark, like the homepage */
.invite-how { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.invite-how .card__title, .invite-how .start-steps__title { color: #FFFFFF; }
.invite-how .start-steps li { border-top-color: rgba(255, 255, 255, .15); }
.invite-how .start-steps__num { color: #B4AFFF; }
.invite-how .start-steps__text, .invite-how__fine { color: var(--on-dark-body); }
.invite-how__fine { font-size: 14px; line-height: 1.55; }
.invite-how a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.invite-how a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.invite-redeem { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.invite-redeem > div { flex: 1 1 280px; min-width: 0; }
.invite-redeem__form { display: flex; align-items: flex-end; gap: 8px; flex: 0 1 360px; }
.invite-redeem__form .field { flex: 1; }

@media (max-width: 820px) {
    .invite-hero { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    .invite-coupons { flex-direction: row; flex-wrap: wrap; padding: 0; }
    .invite-coupons .coupon { flex: 1 1 220px; margin-left: 0; }
    .invite-message { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .invite-link { flex-direction: column; align-items: stretch; padding: 8px; }
    .invite-link__url { padding: 6px 8px; }
    .reward-slot { width: 54px; height: 54px; }
    .invite-redeem__form { flex-basis: 100%; }
}
.invite-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--accent-tint); border: 1px solid var(--accent-border); border-radius: 16px; padding: 14px 16px 14px 20px; }
.invite-card__icon { color: var(--accent); flex-shrink: 0; display: flex; }
.invite-card__text { flex: 1 1 260px; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--accent-deep); }
.invite-card__text strong { font-weight: 700; }
.invite-card__actions { display: flex; align-items: center; gap: 4px; }
.invite-card__close { background: none; border: 0; padding: 8px; border-radius: 8px; color: var(--accent-deep); cursor: pointer; display: flex; }
.invite-card__close:hover { background: var(--accent-soft); }

/* ---------- Error pages ---------- */
.error-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px var(--app-gutter); text-align: center; }
.error-page__inner { max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.error-page__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(88px, 14vw, 140px); line-height: 1; color: var(--track); letter-spacing: -.04em; }
.error-page__title { font-size: clamp(24px, 3vw, 32px); }
.error-page__text { font-size: 16px; color: var(--body); }

/* ---------- Auth (sign-in, sign-up, password) ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__main { display: flex; flex-direction: column; padding: 32px 24px 24px; min-width: 0; }
.auth__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.auth__back { font-size: 14px; font-weight: 500; color: var(--body); text-decoration: none; padding: 10px 0; }
.auth__back:hover { color: var(--ink); }
.auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.auth__form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.auth__title { font-size: clamp(28px, 3vw, 34px); line-height: 1.1; letter-spacing: -.025em; }
.auth__lead { font-size: 16px; color: var(--body); margin-top: 8px; }
.auth__divider { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__alt { text-align: center; font-size: 15px; color: var(--body); }
.auth__alt a { font-weight: 600; }
.auth__foot { text-align: center; font-size: 13px; color: var(--subtle); }
.auth__foot a { color: var(--subtle); }
.auth .btn--provider { background: #FFFFFF; border: 1px solid var(--line-strong); color: var(--ink); min-height: 52px; font-size: 16px; }
.auth .btn--provider:hover { background: #FFFFFF; border-color: #BFC0CF; color: var(--ink); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-row a { font-size: 14px; font-weight: 500; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.auth__aside {
    background: var(--ink); color: #FFFFFF; padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; gap: 40px;
    --cal: #E8590C; --cal-ink: #8A3204; --cal-tint: #FDEEE7; --cal-tint2: #FADECE;
}
.auth__claim { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; letter-spacing: -.02em; color: #FFFFFF; max-width: 520px; }
.auth-illus { background: #22223A; border: 1px solid #34344F; border-radius: 24px; padding: 28px 20px; max-width: 520px; display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.auth-illus__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.auth-illus__head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #FFFFFF; padding-bottom: 12px; border-bottom: 1px solid #34344F; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-illus__head i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.auth-illus__slot { min-height: 46px; display: flex; flex-direction: column; justify-content: center; }
.auth-illus .source-event, .auth-illus .blocker { padding: 6px 10px; line-height: 1.35; font-weight: 400; }
.auth-illus b { font-weight: 700; display: block; }
.auth-illus__std { border-left: 3px solid #3B5BDB; background: #EBEFFB; color: #1E3A8A; border-radius: 6px; padding: 6px 10px; font-weight: 700; }
.auth-illus__arrow { display: flex; flex-direction: column; justify-content: flex-start; gap: 56px; padding-top: 92px; align-items: center; }
.auth-illus__arrow span { width: 28px; height: 28px; border-radius: 14px; background: #E8590C; display: flex; align-items: center; justify-content: center; }
.auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16px; color: #E4E4EE; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; }
.auth-points svg { color: #A5B4FC; margin-top: 2px; }
/* Optional field behind a quiet link-like toggle (sign-up: "I have a code from a colleague") */
.field-toggle > summary { display: inline-flex; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.field-toggle > summary::-webkit-details-marker { display: none; }
.field-toggle > summary:hover { color: var(--ink); }
.field-toggle[open] > summary { margin-bottom: 14px; }
.auth-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.auth-sent__icon { width: 56px; height: 56px; border-radius: 28px; background: var(--ok-bg); color: var(--ok-icon); display: flex; align-items: center; justify-content: center; }
@media (max-width: 960px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth__aside { display: none; }
}