/* ---------------------------------------------------------------------------
   Scheduling poll — the option picker, the edit dialog and the settings drawer.

   Global rather than scoped: the overlay chrome (backdrop, dialog, rows, chips)
   is shared by four components, and one source of truth beats four copies plus
   ::deep. Every value comes from the Density UI reference.
--------------------------------------------------------------------------- */

/* --- page ---------------------------------------------------------------- */

.sp-page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.sp-page__head h1 {
    margin: 6px 0 0;
}

.sp-page__head .app-lead {
    max-width: 400px;
    margin: 0;
}

.sp-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
}

.sp-card__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.sp-card__title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sp-card__baractions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.sp-dot {
    color: var(--border-strong);
}

.sp-metabtn {
    border: 0;
    padding: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sp-metabtn:hover {
    color: var(--text-primary);
}

/* --- empty state --------------------------------------------------------- */

.sp-emptystate {
    display: grid;
    gap: 10px;
    justify-items: start;
    padding: 20px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-xl);
    background: var(--bg-surface-2);
}

.sp-emptystate__title {
    font-size: 14px;
    font-weight: 600;
}

.sp-steps {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--text-secondary);
}

.sp-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-link);
    font-family: var(--font-family-mono);
    font-size: 10px;
}

/* --- option list --------------------------------------------------------- */

.sp-listhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.sp-list {
    display: grid;
    gap: 8px;
}

.sp-list__group {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.sp-list__day {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 26px;
    padding: 5px 12px 4px;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
}

.sp-list__daylabel {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.sp-list__meta {
    margin-left: auto;
    font-family: var(--font-family-mono);
    font-size: 10px;
    color: var(--text-muted);
}

.sp-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
    transition: background-color var(--duration-fast) var(--easing-standard);
}

.sp-list__row:last-child {
    border-bottom: 0;
}

.sp-list__row:hover {
    background: var(--bg-surface-hover);
}

.sp-list__time {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sp-list__range {
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.sp-list__dur {
    flex: none;
    padding: 1px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-surface-2);
    font-family: var(--font-family-mono);
    font-size: 10px;
    color: var(--text-secondary);
}

.sp-list__dur--allday {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent-link);
}

/* Always visible. Behind hover they were permanently at 35% on every touch
   device, where there is no hover to reveal them with. */
.sp-list__actions {
    display: flex;
    gap: 2px;
}

/* --- commit bar ---------------------------------------------------------- */

.sp-commit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
}

.sp-commit__status {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.sp-commit__status--bad {
    color: var(--warn-fg);
}

/* --- shared controls ----------------------------------------------------- */

.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                transform var(--duration-fast) var(--easing-standard);
}

.sp-btn:hover {
    background: var(--bg-surface-hover);
}

.sp-btn:active {
    transform: scale(0.98);
}

.sp-btn--primary {
    border-color: transparent;
    background: var(--accent-primary);
    color: var(--accent-fg);
}

.sp-btn--primary:hover {
    background: var(--accent-hover);
}

.sp-btn--danger {
    border-color: var(--danger-border);
    background: transparent;
    color: var(--danger-fg);
}

.sp-btn--danger:hover {
    background: var(--danger-soft);
}

.sp-btn--lg {
    height: 36px;
    padding: 0 16px;
}

.sp-btn:disabled {
    background: var(--bg-surface-2);
    border-color: var(--border-subtle);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
}

.sp-smallbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.sp-smallbtn:hover {
    background: var(--bg-surface-hover);
}

.sp-smallbtn:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.sp-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 24px is the bare WCAG 2.5.8 minimum and only with clear space around it;
       these sit adjacent in the option list and as the dialog close. */
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

.sp-iconbtn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.sp-linkbtn {
    border: 0;
    padding: 0;
    background: none;
    color: var(--accent-link);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sp-chip {
    display: inline-flex;
    align-items: center;
    /* Was 24px tall in a tight row of presets, so a mis-tap set the wrong
       duration. Height rather than min-height would defeat the padding. */
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard),
                transform var(--duration-fast) var(--easing-standard);
}

.sp-chip:active {
    transform: scale(0.97);
}

.sp-chip:hover {
    color: var(--text-primary);
}

.sp-chip:focus-visible,
.sp-iconbtn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* The chosen preset is filled, not tinted. A soft accent wash reads as one more
   available chip; the fill is what says "this is the duration you are on". */
.sp-chip--on {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--accent-fg);
}

.sp-input {
    width: 100%;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    transition: border-color var(--duration-fast) var(--easing-standard),
                box-shadow var(--duration-fast) var(--easing-standard);
}

.sp-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
}

.sp-input--time {
    width: 104px;
    font-family: var(--font-family-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.sp-input--num {
    width: 88px;
}

.sp-input--dur {
    width: auto;
    border-color: var(--border-subtle);
    font-family: var(--font-family-mono);
    font-size: 11px;
}

.sp-input--area {
    min-height: 64px;
    line-height: 1.5;
    resize: vertical;
}

.sp-input--summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    text-align: left;
}

.sp-caret {
    font-size: 9px;
    color: var(--text-muted);
}

.sp-field {
    display: grid;
    gap: 5px;
}

.sp-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sp-field-row > .sp-field {
    flex: 1;
    min-width: 120px;
}

.sp-field__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.sp-field-label {
    font-family: var(--font-family-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sp-note {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.sp-note--dim {
    color: var(--text-muted);
}

.sp-note--warn {
    color: var(--warn-fg);
}

.sp-saved {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--ok-soft);
    color: var(--ok-fg);
    font-size: 10px;
    animation: sp-fade-in 180ms var(--easing-standard) both;
}

.sp-tag {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    color: var(--warn-fg);
    font-size: 10px;
}

.sp-tag--bad {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger-fg);
}

/* Density's switch, from the form-controls section of the reference: a settings
   row with its label on the left and a 34x20 track on the right. The visible
   track is 20px tall, under the 24px WCAG 2.5.8 minimum, so the button carries a
   32px hit area around it rather than the pill being grown to meet the rule. */
.sp-switchrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.sp-switchrow__text {
    min-width: 0;
}

.sp-switchrow__end {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

.sp-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.sp-switch__track {
    position: relative;
    display: block;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-strong);
    transition: background-color var(--duration-normal) var(--easing-standard),
                border-color var(--duration-normal) var(--easing-standard);
}

.sp-switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--duration-normal) var(--easing-standard),
                background-color var(--duration-normal) var(--easing-standard);
}

.sp-switch[aria-checked="true"] .sp-switch__track {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.sp-switch[aria-checked="true"] .sp-switch__knob {
    background: var(--accent-fg);
    transform: translateX(14px);
}

.sp-switch:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.sp-segment {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    background: var(--bg-surface-2);
}

.sp-segment__btn {
    height: 24px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 200ms var(--easing-standard), color 200ms;
}

.sp-segment__btn--on {
    background: var(--accent-primary);
    color: var(--accent-fg);
}

.sp-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.sp-legend__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-primary);
}

/* --- banners ------------------------------------------------------------- */

.sp-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-2);
    font-size: 12px;
    animation: sp-fade-in 180ms var(--easing-standard) both;
}

.sp-banner__text {
    flex: 1;
    min-width: 0;
}

.sp-banner__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    font-size: 10px;
}

.sp-banner--ok {
    border-color: var(--ok-border);
    background: var(--ok-soft);
    color: var(--ok-fg);
}

.sp-banner--danger {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger-fg);
}

.sp-banner--info {
    border-color: var(--info-border);
    background: var(--info-soft);
    color: var(--info-fg);
}

/* --- overlays ------------------------------------------------------------ */

/* The chrome itself - .sp-overlay, its backdrop, .sp-dialog, .sp-drawer and the
   bottom-sheet geometry they collapse into - now lives in overlay.css, under
   .app-* names with these .sp-* spellings kept as aliases. It moved because a
   notifications drawer is not a scheduling poll. What is left here is what the
   poll's own overlays put inside that chrome. */

.sp-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.sp-dialog__eyebrow {
    font-family: var(--font-family-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sp-dialog__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sp-dialog__hint {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}

/* One scroller for the whole body, not one per pane: two independent scrollbars
   inside a 760px dialog is not what the reference does and reads as two panels
   rather than one. */
.sp-dialog__body {
    display: grid;
    grid-template-columns: 278px minmax(0, 1fr);
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sp-dialog__body--single {
    grid-template-columns: minmax(0, 1fr);
}

.sp-pane {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 14px;
    overflow: visible;
}

.sp-pane--left {
    border-right: 1px solid var(--border-subtle);
}

.sp-pane__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.sp-dialog__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 11px 14px;
    background: var(--bg-surface-2);
    border-top: 1px solid var(--border-subtle);
}

.sp-foot__status {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.sp-foot__status--bad {
    color: var(--danger-fg);
}

.sp-confirm {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.sp-confirm--inline {
    margin-top: 6px;
}

.sp-confirm .sp-row__msg {
    flex: 1;
    min-width: 0;
}

/* --- picker internals ---------------------------------------------------- */

.sp-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sp-custom,
.sp-allday {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A summary of what is pending, for the width where the options list is not on
   screen. Above the single-column break it would only repeat the right pane,
   which is why the reference gates it on `mobile` too. */
.sp-pending {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

@media (min-width: 45rem) {
    .sp-pending {
        display: none;
    }
}

.sp-pending__head {
    font-family: var(--font-family-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sp-pending__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.sp-empty {
    display: grid;
    gap: 4px;
    padding: 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}

.sp-empty__title {
    font-size: 13px;
    font-weight: 600;
}

/* A date is a card, not a run of loose rows: the header strip names the day and
   the rows live inside it. `overflow: hidden` is load-bearing - without it the
   strip's tint paints over the card's own rounded top corners. */
.sp-group {
    display: grid;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-app);
    overflow: hidden;
}

.sp-group__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 9px;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
}

.sp-group__label {
    font-size: 12px;
    font-weight: 500;
}

.sp-group__meta {
    font-family: var(--font-family-mono);
    font-size: 10px;
    color: var(--text-muted);
}

.sp-group__empty {
    padding: 12px 9px;
    font-size: 11px;
    color: var(--text-muted);
}

.sp-group__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.sp-existing {
    display: grid;
    gap: 4px;
    padding: 7px 9px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.sp-existing__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.sp-existing__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}

.sp-row {
    display: grid;
    gap: 4px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--border-subtle);
}

/* The reference rules every row, which doubles up against the card's own border
   on the last one. One hairline between siblings, none at the edge. */
.sp-row:last-child {
    border-bottom: 0;
}

/* An invalid row is marked on the control that is wrong, not on the container -
   the row has no border of its own to colour any more. `:not(:focus)` is
   load-bearing: `.sp-input:focus` below has the same specificity, so without it
   source order decides and a conflicting row cannot show its focus ring. */
.sp-row--bad .sp-input--time:not(:focus),
.sp-row--bad .sp-row__allday {
    border-color: var(--danger-fg);
}

.sp-row--warn .sp-input--time:not(:focus) {
    border-color: var(--warn-border);
}

.sp-row__main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-row__arrow {
    color: var(--text-muted);
    font-size: 11px;
}

.sp-row__end {
    font-family: var(--font-family-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.sp-row__allday {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-link);
}

.sp-row__main .sp-iconbtn {
    margin-left: auto;
}

.sp-row__msg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    /* A flex row will not break a long unbroken value, and these messages quote
       what was typed: one pasted run-together address produced a 998px error
       line inside a 419px drawer - unreadable, and the drawer grew a horizontal
       scrollbar. */
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sp-row__msg--bad {
    color: var(--danger-fg);
}

.sp-row__msg--warn {
    color: var(--warn-fg);
}

/* --- drawer -------------------------------------------------------------- */

/* .sp-overlay--drawer, .sp-drawer, its grip and its body are in overlay.css. */

.sp-drawer__section {
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-family-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sp-closepicker {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-2);
}

.sp-emailrow {
    display: flex;
    gap: 8px;
}

.sp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sp-emailchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 6px 0 9px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-surface-2);
    font-size: 11.5px;
}

.sp-emailchip button {
    border: 0;
    padding: 0;
    background: none;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
}

.sp-emailchip button:hover {
    color: var(--danger-fg);
}

.sp-info {
    display: grid;
    gap: 6px;
}

.sp-info__row {
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface-2);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* --- calendar ------------------------------------------------------------ */

.cal {
    display: grid;
    gap: 8px;
}

.cal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cal__label {
    font-family: var(--font-family-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cal__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cal__month {
    min-width: 92px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

/* A ghost, not a boxed button: the month arrows sit beside a label, and a
   border around each one competes with the grid below. */
.cal__step {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}

.cal__step:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.cal__step:disabled {
    opacity: 0.45;
    cursor: default;
}

.cal__weekdays,
.cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.cal__weekdays span {
    height: 18px;
    font-family: var(--font-family-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-muted);
}

/* Saturday and Sunday, in a grid that is always Monday-first and always seven
   wide - so the weekend needs no class from the component. */
.cal__weekdays span:nth-child(n + 6) {
    color: var(--text-secondary);
}

.cal__grid:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-md);
}

.cal__day {
    position: relative;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard);
}

.cal__day:nth-child(7n + 6):not(.cal__day--on):not(.cal__day--blank),
.cal__day:nth-child(7n + 7):not(.cal__day--on):not(.cal__day--blank) {
    background: var(--weekend-bg);
    color: var(--text-secondary);
}

/* A span, so :disabled never excludes it - name the spacer explicitly. */
.cal__day:hover:not(:disabled):not(.cal__day--blank) {
    background: var(--bg-surface-hover);
}

/* A spacer, not a date. The weekend and hover rules exclude it by name rather
   than by specificity, which it would lose. */
.cal__day--blank {
    cursor: default;
}

.cal__day:disabled {
    color: var(--text-muted);
    opacity: 0.35;
    cursor: default;
}

.cal__day--on {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--accent-fg);
}

.cal__day--on:hover:not(:disabled) {
    background: var(--accent-hover);
}

.cal__day--active {
    border-color: var(--accent-border);
}

/* A date that already carries options gets a dot, so re-opening the picker
   shows at a glance where work has been done. */
.cal__day--marked::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent-primary);
}

.cal__day--on.cal__day--marked::before {
    background: var(--accent-fg);
}

.cal__day--today {
    font-weight: 600;
}

.cal__day--today::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 2px;
    border-radius: 999px;
    background: var(--text-primary);
}

.cal__day--on.cal__day--today::after {
    background: var(--accent-fg);
}

/* --- motion -------------------------------------------------------------- */

/* The overlay keyframes are in overlay.css. This one is not an overlay: it is
   the "Saved" flag and the group tag appearing in place, and it stays here with
   the two rules that use it. */
@keyframes sp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- narrow viewports ---------------------------------------------------- */

/* Density collapses the two panes at its own 720px break, not at 1024px. A
   278px pane inside a 760px dialog still fits two columns at 900px; the old
   1024px break only made sense for the 320px-in-980px geometry it replaced. */
@media (max-width: 44.99rem) {
    .sp-dialog__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-pane--left {
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle);
    }
}

@media (max-width: 44.99rem) {
    /* The overlay-to-bottom-sheet swap at this same break is in overlay.css. */

    .sp-btn,
    .sp-smallbtn {
        min-height: 44px;
    }

    .sp-iconbtn {
        width: 40px;
        height: 40px;
    }

    .cal__day {
        height: 44px;
    }

    .sp-row__main {
        flex-wrap: wrap;
    }
}

/* Holds the height of one banner whether or not a message is showing, so a
   message appearing or dismissing itself never moves the buttons underneath it.
   The toast used to collapse on its own timer and take "Create poll" with it. */
.sp-bannerslot {
    min-height: 34px;
}