.calendar-avail-rule-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--calendar-avail-bg);
    border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.calendar-avail-disabled-banner {
    padding: var(--spacing-smd) var(--spacing-md);
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.calendar-account {
    background: transparent;
}

.calendar-account + .calendar-account {
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px solid #f1f5f9;
}

.calendar-account__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-account__toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xsm) var(--spacing-xs);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    flex: 1;
    min-width: 0;
    transition: background-color 140ms ease;
}

/* The row is a button that opens the account's sub-calendars (the tour asks
   for exactly that click), so it lights under the pointer like every other
   row-shaped control: the action tint, and the house ring on keyboard focus. */
.calendar-account__toggle:hover {
    background-color: var(--color-action-tint);
}

.calendar-account__toggle:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.calendar-account__icon {
    color: var(--color-brand-google);
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

/* The address takes whatever the row is not using, so the state badge after it
   lands on the far right instead of against the last letter (Nick 2026-08-19:
   "the synced label should be on the far right, with ..... if the email is too
   long"). `min-width: 0` is the half that makes the ellipsis reachable at all:
   a nowrap span refuses to shrink below its own text without it, so the three
   truncation rules below never fired — AND the card's min-content width became
   the longest address on the account. That second effect is why the Working
   Hours grid beside it in the settings trio was down to 90px of column at
   992px: three `1fr` tracks cannot shrink past their content, so an
   unshrinkable calendars card took its width out of its neighbours.
   `text-align: left` is not a default here: the row is a <button>, whose UA
   stylesheet centres text, and that inherits into this stretched span — so
   without the override every account name floats mid-row between the icon
   and the badge (Nick 2026-08-31: "the calendar names" still not left
   justified) while the calendar rows below sit flush. */
.calendar-account__email {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Synced / Reconnect needed keeps its full width at the right end of the row.
   It is the one word in the header that must never be what truncates — an
   account whose state reads "Reconnect nee…" has lost the only thing the
   collapsed row was there to say. */
.calendar-account__toggle > .global-badge {
    flex-shrink: 0;
}

.calendar-account__chevron {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.calendar-account__chevron.is-open {
    transform: rotate(180deg);
}

/* Expanded panel.
   Flush with the card's content edge, not indented under the account address.
   Nick, twice: "the calendar names ... should be left" (2026-08-20), then
   "the sycne calendar list still ahs the calendar names not left justified".
   Round 16 read the first of those as a wrap defect and fixed only that, which
   is why nothing he was pointing at moved. The names WERE flush inside their
   own row — the 1.25rem here pushed the whole row in, so every name, and every
   hairline between them, started 20px right of the section title, the hint and
   the divider above them. Against status pills pinned to the right edge, a
   column that starts inboard of everything else in the card reads as floating
   rather than left-aligned. Nesting is still legible without the indent: these
   rows only exist inside their account's open panel, and accounts are already
   separated by a rule. */
.calendar-account__panel {
    padding: var(--spacing-2xs) 0 var(--spacing-xs);
}

.calendar-account__calendar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xsm) 0;
}

.calendar-account__calendar + .calendar-account__calendar {
    border-top: 1px solid #f3f4f6;
}

.calendar-account__cal-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* One calendar, one line. The account address above these has ellipsized since
   round 14; the names under it never did, so a calendar named longer than the
   card wrapped onto a second line and the row grew to 42px with its status pill
   floating against the wrap (Nick 2026-08-20: "the calendar names ... should be
   left, and the status should be right"). `min-width: 0` is the half that makes
   the ellipsis reachable — a nowrap span refuses to shrink below its own text
   without it — and it is also what keeps a long name out of the card's
   min-content width, the trap .calendar-account__email documents above. */
.calendar-account__cal-name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--font-size-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-account__error {
    padding: var(--spacing-2xs) 0;
    font-size: var(--font-size-sm);
}

/* The whole card, not only the sentence inside it: read down a list of
   accounts, the broken one has to be the one that looks different before any
   of it is read. Tinted ground and an amber edge rather than a border, so the
   card keeps its box and the accounts below it do not shift when one breaks. */
.calendar-account--needs-reconnect {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-left: 2px solid var(--status-warning-fg);
    border-radius: var(--radius-sm);
    background: var(--status-warning-bg);
}

/* What a broken account says and the one thing it offers, stacked. Flush with
   the card edge for the same reason the panel below it is: it sits between a
   flush header and a flush calendar list, and the 1.25rem it used to carry
   would now be the only indent left in the card. Left-aligned in a column:
   this card sits in a ~330px rail, and any arrangement that puts the button on
   the header row takes the width out of the account address. */
.calendar-account__repair {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xsm);
    margin: var(--spacing-xs) 0;
}

/* The one plain-English line a broken account gets, in place of the stored
   Google error. Not --color-warning: amber measures 2.15:1 on white, and
   --status-warning-fg is the same hue darkened for exactly this. */
.calendar-account__notice {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--status-warning-fg);
}

/* Calendars an account can no longer sync. Dimmed rather than hidden — which
   calendars have stopped being covered is the reason the warning matters — and
   the pills inside carry their own `disabled`, so this is appearance only and
   never the thing standing between a click and a write. */
.calendar-account__panel.is-dimmed {
    opacity: 0.55;
}

/* Compact "Connect" button with the official Google G mark.
   Outline neutral so the colored logo carries the brand cue, not the chrome. */
.calendar-google-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
}

.calendar-google-btn__logo {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Empty state of the Synced Calendars card: the line that says there is
   nothing here, then the button that fixes that. The pair stacks and hugs the
   left edge so the CTA lines up with the sentence above it rather than
   floating in the middle of an otherwise empty card. */
.calendar-connect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

/* --- Calendar-name row: spacing for warning icon when sync errors persist. --- */
.calendar-account__cal-warn {
    margin-right: var(--spacing-xsm);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

/* --- Tri-state "what does this calendar block?" pill ---
   Replaces the prior dual switches (is_active + busy_only). Clicking the pill
   opens a menu (.calendar-block-menu, below) that names the three states and
   what each does. Three independent signals carry the state — color hue, dot
   fill, and label text — so a colorblind or low-contrast user still gets two
   redundant cues. */
.calendar-block-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.calendar-block-pill:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.calendar-block-pill__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.calendar-block-pill--off {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}
.calendar-block-pill--off:hover {
    background: #e5e7eb;
}
.calendar-block-pill__dot--off {
    border: 1.5px solid var(--color-text-muted);
    background: transparent;
}

.calendar-block-pill--busy {
    background: #fef3c7;
    border-color: var(--color-warning-border);
    color: #92400e;
}
.calendar-block-pill--busy:hover {
    background: var(--color-warning-border);
}
.calendar-block-pill__dot--busy {
    background: linear-gradient(90deg, #d97706 50%, transparent 50%);
    border: 1.5px solid #d97706;
}

.calendar-block-pill--all {
    background: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;
}
.calendar-block-pill--all:hover {
    background: #a7f3d0;
}
.calendar-block-pill__dot--all {
    background: #059669;
    border: 1.5px solid #059669;
}

/* Dead "+" at the account cap: dimmed like .global-icon-btn's aria-disabled
   state, but it keeps the pointer — its tooltip is the only place that says
   why (Nick, 2026-09-05: on hover, not a line under the hint), and the tooltip
   rides on mouseover. The click is refused in the Alpine binding instead, and
   the hover wash (page.html) skips aria-disabled so a dead control doesn't
   light up. */
.calendar-bucket-panel__settings-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Status menu ---
   The pill's menu wears the shared custom-select menu skin (.global-cs-menu)
   and only changes what that skin assumes: it is teleported to <body> and
   placed with fixed coordinates by calendarBlockMenu, so the anchored
   positioning and the 50-rung z-index give way to the dropdown rung; and its
   items wrap, because each carries a one-line meaning under the label. This
   sheet loads before main.css, so the compound selector is what wins. */
.calendar-block-menu-host {
    display: inline-flex;
}

.global-cs-menu.calendar-block-menu {
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
    width: max-content;
    max-width: min(20rem, calc(100vw - 2rem));
    z-index: var(--z-dropdown);
}

.calendar-block-menu .global-cs-item,
.calendar-block-menu .global-cs-item__label,
.calendar-block-menu .global-cs-item__sub {
    white-space: normal;
}

.calendar-block-menu .global-cs-item {
    width: 100%;
    text-align: left;
}

.calendar-block-menu__dot {
    margin-top: var(--spacing-xsm);
    align-self: flex-start;
}

/* Kept in the layout (not display:none) so the three rows stay the same
   width whichever one is checked. */
.calendar-block-menu__check--hidden {
    visibility: hidden;
}

/* --- Remove account ---
   The one destructive control, at the bottom of an opened account: a quiet
   text link, not a trash can beside the address. */
.calendar-account__remove {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) 0;
}

.calendar-account__remove-link {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.calendar-account__remove-link:hover,
.calendar-account__remove-link:focus-visible {
    color: var(--color-error);
}

.calendar-account__remove-link:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* --- Connect explainer (ADR-131 modal body, header="none") ---
   Its own heading, two matched boxes (what gets shared: a tiny day with only
   Busy blocks; what stays private: a crossed-out list), the four Google
   permissions numbered in the order Google asks, the policy line, and one
   full-width I Understand. Tokens only. */
.calendar-explainer {
    padding-top: var(--spacing-lg);
}

.calendar-explainer__title {
    margin: 0 0 var(--spacing-mdlg);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-align: center;
    text-wrap: balance;
}

.calendar-explainer__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-smd);
    margin-bottom: var(--spacing-mdlg);
}

@media (max-width: 575.98px) {
    .calendar-explainer__split {
        grid-template-columns: 1fr;
    }
}

.calendar-explainer__box {
    padding: var(--spacing-smd) var(--spacing-md) var(--spacing-smd);
    border-radius: var(--radius-lg);
}

.calendar-explainer__box--shared {
    background: var(--color-availability-bg);
    color: var(--color-availability);
}

.calendar-explainer__box--private {
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

.calendar-explainer__box-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: inherit;
}

/* The tiny day: four rows, two of them Busy. Nothing on it reads as an event. */
.calendar-explainer__day {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

.calendar-explainer__time {
    text-align: right;
    padding-top: var(--spacing-2xs);
    opacity: 0.75;
}

.calendar-explainer__slot {
    min-height: 1.5rem;
    border: 1px dashed currentColor;
    border-radius: var(--radius-sm);
    opacity: 0.45;
}

.calendar-explainer__slot--busy {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    border: none;
    background: var(--color-text-secondary);
    color: var(--color-neutral-ink-fg);
    font-weight: var(--font-weight-medium);
    opacity: 1;
}

.calendar-explainer__caption {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.calendar-explainer__private {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.calendar-explainer__private li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.calendar-explainer__no {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-text-secondary);
    color: var(--color-neutral-ink-fg);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.calendar-explainer__lead {
    margin: 0 0 var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.calendar-explainer__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calendar-explainer__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.calendar-explainer__row:first-child {
    border-top: none;
}

.calendar-explainer__num {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.calendar-explainer__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.calendar-explainer__body,
.calendar-explainer__policy {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.calendar-explainer__policy {
    margin: var(--spacing-md) 0 0;
}

.calendar-explainer__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* The one way forward: full width, big enough to be the obvious click. */
.calendar-explainer__footer {
    padding: var(--spacing-smd) var(--spacing-md) var(--spacing-mdlg);
}

.calendar-explainer__cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-smd) var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
}

.calendar-explainer__logo {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}