/* ============================================================
   global-date-cal — the platform's month calendar (ADR-125/131)

   A whole month at a time, with the month and the year each a control of its
   own, so a date years out is two moves away instead of one arrow press per
   month. The state and the date maths live in shared/js/date-calendar.js.

   This sheet paints the inside of the calendar only. It carries no surface,
   border or shadow: it mounts inside whatever panel opened it (the grid's
   editor, a popover) and takes that panel's material, so a calendar never
   arrives as a second card floating inside the first.

   Partial: shared/components/_date_calendar.html
   ============================================================ */

.global-date-cal {
    width: 17rem;
    max-width: 100%;
}

/* ── The month and year line ─────────────────────────────────────────────── */
.global-date-cal__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.global-date-cal__arrow {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
}

.global-date-cal__arrow:hover {
    background: var(--color-action-tint);
}

.global-date-cal__month,
.global-date-cal__year {
    padding: var(--spacing-2xs) var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.global-date-cal__month {
    flex: 1 1 auto;
    min-width: 0;
}

/* Wide enough for four digits and the stepper the browser draws beside them. */
.global-date-cal__year {
    flex: 0 0 4.5rem;
    width: 4.5rem;
}

/* ── The month itself ────────────────────────────────────────────────────── */
.global-date-cal__dow,
.global-date-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-2xs);
}

.global-date-cal__dow {
    margin-bottom: var(--spacing-2xs);
}

.global-date-cal__dow span {
    padding: var(--spacing-2xs) 0;
    text-align: center;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.global-date-cal__cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transparent until today claims it, so no day shifts when the ring lands. */
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.global-date-cal__cell:hover:not(:disabled) {
    background: var(--color-action-tint);
}

/* The days either side of this month are shown so the weeks stay whole, but they
   are not what the reader came to pick. */
.global-date-cal__cell--muted {
    color: var(--color-text-muted);
}

/* Today wears a ring so a reader who jumped to a far month keeps a bearing. A
   picked day is filled instead — it no longer needs one. */
.global-date-cal__cell--today {
    border-color: var(--color-action);
}

.global-date-cal__cell--selected {
    background: var(--color-action);
    color: var(--color-neutral-ink-fg);
    font-weight: var(--font-weight-medium);
}

/* The tight ring, not the 3px halo: a day sits against six neighbours that would
   clip a wider one. */
.global-date-cal__arrow:focus-visible,
.global-date-cal__month:focus-visible,
.global-date-cal__year:focus-visible,
.global-date-cal__cell:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring-tight);
}

.global-date-cal__cell:disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
}