/* ═══════════════════════════════════════
   /calendar — the earnings calendar (#1503 M3a, Canvas-20 #2a/#2b/#1a/#1c).
   Full-gutter workspace like /connect and /news: no max-width, no centring, starts
   at the left gutter. Month grid + sticky day-detail rail on desktop (grid 1.7fr /
   rail 1fr, one column below 900px where the grid collapses to state dots and the
   detail flows beneath). Tokens only: --ij-event is the Scheduled
   indigo, --mud-palette-success the Reported green, --mud-palette-warning the one
   amber clause (overdue / refresh pending).
═══════════════════════════════════════ */

/* No cap and no centring: /calendar is the full-gutter workspace shape (#794), the
   same one /connect, /news and the desk use — .ij-page-content's 32px gutters and
   nothing else, content starting at the left. This rule used to read
   `max-width: 1180px; margin: 0 auto`, which is Canvas-20's ARTBOARD width: the
   frame the design was drawn in, not a constraint on the real page. The desk made
   the identical mistake and fixed it in #1488 M2b (see morning-desk.css's own note
   on .ij-desk) — the calendar inherited the misreading, not the rule.
   The element still exists as the page's own scope for .ij-cal-* selectors and as
   the fragment the design catalog captures. */
.ij-cal {
    min-width: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ij-cal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    /* #1822 — the two segmented controls and the title cannot share one line at 320px:
       the page scrolled sideways by 38px (WCAG 1.4.10). Wrapping costs nothing on a
       wide viewport, where they still sit beside the title. */
    flex-wrap: wrap;
}

.ij-cal-title {
    margin: 0;
    font-size: var(--ij-ts-title1, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ij-text-primary);
}

.ij-cal-subtitle {
    margin: 4px 0 0;
    font-size: var(--ij-ts-subhead, 13.5px);
    color: var(--ij-text-secondary);
}

.ij-cal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    /* #1822 — the two segmented controls together are 3px wider than a 320px viewport,
       so the page still scrolled sideways after the header itself learned to wrap.
       They stack instead; above 320px they still share the line. */
    flex-wrap: wrap;
}

/* ── Two columns (the /connect 13B recipe, widened so seven cells clear 100px) ── */
.ij-cal-grid-shell {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.ij-cal-grid-shell--list {
    grid-template-columns: 1fr;
}

.ij-cal-main {
    min-width: 0;
}

.ij-cal-rail {
    position: sticky;
    /* #1822 — pinned at 20px this parked UNDER the 64px app bar (the #1818 defect,
       missed there because its guard only scanned app-layout.css). */
    top: var(--ij-sticky-top);
    min-width: 0;
}

/* ── Month bar ─────────────────────────────────────────────────────────── */
.ij-cal-monthbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ij-cal-month {
    margin: 0;
    font-size: var(--ij-ts-title3, 18px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ij-text-primary);
}

.ij-cal-month-year {
    font-weight: 400;
    color: var(--ij-text-secondary);
    margin-left: 6px;
}

.ij-cal-monthnav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ij-cal-nav-btn.mud-icon-button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--ij-divider);
    color: var(--ij-text-primary);
}

.ij-cal-today-btn {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--ij-divider);
    border-radius: 999px;
    background: transparent;
    color: var(--ij-text-primary);
    font: inherit;
    font-size: var(--ij-ts-subhead, 13px);
    font-weight: 600;
    cursor: pointer;
}

.ij-cal-today-btn:hover,
.ij-cal-nav-btn.mud-icon-button:hover {
    background: rgba(120, 120, 128, 0.08);
}

/* Used by the day-detail card's "your numbers predate this report" line. */
.ij-cal-amber {
    color: var(--ij-warning-text);
}

/* ── Grid ──────────────────────────────────────────────────────────────── */
.ij-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 6px;
}

.ij-cal-weekday {
    text-align: right;
    padding-right: 8px;
    font-size: var(--ij-ts-caption1, 10.5px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ij-text-tertiary);
}

.ij-cal-grid {
    border: 1px solid var(--ij-divider);
    border-radius: 10px;
    overflow: hidden;
}

.ij-cal-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ij-cal-week + .ij-cal-week {
    border-top: 1px solid var(--ij-divider);
}

.ij-cal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100px;
    padding: 6px 6px 8px;
    border: 0;
    border-left: 1px solid var(--ij-divider);
    background: transparent;
    color: var(--ij-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ij-cal-cell:first-child {
    border-left: 0;
}

.ij-cal-cell:hover {
    background: rgba(120, 120, 128, 0.08);
}

.ij-cal-cell--out {
    background: rgba(120, 120, 128, 0.05);
}

.ij-cal-cell--out .ij-cal-daynum {
    color: var(--ij-text-tertiary);
}

.ij-cal-cell--selected,
.ij-cal-cell--selected:hover {
    background: var(--ij-primary-tint);
    box-shadow: inset 0 0 0 1.5px rgba(41, 151, 255, 0.6);
}

.ij-cal-daynum {
    align-self: flex-end;
    font-size: var(--ij-ts-subhead, 12.5px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 22px;
    min-width: 22px;
    text-align: center;
    color: var(--ij-text-primary);
}

.ij-cal-cell--today .ij-cal-daynum {
    /* #1817 — white on --ij-primary is 3.02:1 in dark; the FILL token clears AA. */
    background: var(--ij-primary-fill);
    color: #fff;
    border-radius: 999px;
}

.ij-cal-pills {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}

.ij-cal-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: var(--ij-ts-footnote, 11.5px);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ij-cal-pill--scheduled {
    color: var(--ij-event-text); /* #1817 — 4.09:1 on --ij-event-tint */
    background: var(--ij-event-tint);
}

.ij-cal-pill--reported {
    color: var(--mud-palette-success);
    background: rgba(61, 203, 108, 0.12);
}

.ij-cal-pill--more {
    color: var(--ij-text-tertiary);
    background: rgba(120, 120, 128, 0.12);
}

.ij-cal-pill-icon.mud-icon-root {
    width: 12px;
    height: 12px;
}

.ij-cal-dots {
    display: none;
}

/* ── Legend + footnote ─────────────────────────────────────────────────── */
.ij-cal-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    font-size: var(--ij-ts-footnote, 12px);
    color: var(--ij-text-tertiary);
}

.ij-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ij-cal-legend-next {
    margin-left: auto;
}

.ij-cal-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.ij-cal-swatch--scheduled {
    background: var(--ij-event);
}

.ij-cal-swatch--reported {
    background: var(--mud-palette-success);
}

.ij-cal-footnote {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--ij-divider);
    font-size: var(--ij-ts-footnote, 12px);
    color: var(--ij-text-tertiary);
}

/* ── Day detail (rail on desktop, below the grid on phone) ────────────── */
.ij-cal-detail-day {
    margin: 0;
    font-size: var(--ij-ts-body, 16px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ij-text-primary);
}

.ij-cal-detail-week {
    margin: 2px 0 12px;
    font-size: var(--ij-ts-subhead, 12.5px);
    color: var(--ij-text-tertiary);
}

.ij-cal-detail-empty {
    font-size: var(--ij-ts-subhead, 13.5px);
    color: var(--ij-text-secondary);
}

.ij-cal-detail-next {
    font-size: var(--ij-ts-subhead, 12.5px);
    color: var(--ij-text-tertiary);
}

.ij-cal-card {
    padding: 18px 20px;
    border: 1px solid var(--ij-divider);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

.ij-cal-card + .ij-cal-card {
    margin-top: 10px;
}

.ij-cal-card-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ij-ts-caption1, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ij-cal-card--scheduled .ij-cal-card-eyebrow {
    color: var(--ij-event);
}

.ij-cal-card--reported .ij-cal-card-eyebrow {
    color: var(--mud-palette-success);
}

.ij-cal-card-glyph.mud-icon-root {
    width: 14px;
    height: 14px;
}

.ij-cal-card-company {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ij-cal-card-name {
    font-size: var(--ij-ts-title3, 17px);
    font-weight: 700;
    color: var(--ij-text-primary);
}

.ij-cal-card-ticker {
    font-size: var(--ij-ts-footnote, 12px);
    color: var(--ij-text-secondary);
}

.ij-cal-held {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(120, 120, 128, 0.22);
    font-size: var(--ij-ts-caption2, 10px);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ij-text-secondary);
}

.ij-cal-card-fact {
    margin: 6px 0 0;
    font-size: var(--ij-ts-subhead, 13px);
    color: var(--ij-text-secondary);
}

.ij-cal-card-quote {
    margin: 12px 0 0;
    padding-left: 12px;
    border-left: 2px solid currentColor;
    font-size: var(--ij-ts-subhead, 13px);
    font-style: italic;
    color: var(--ij-text-secondary);
}

.ij-cal-card--scheduled .ij-cal-card-quote {
    border-color: color-mix(in srgb, var(--ij-event) 50%, transparent);
}

.ij-cal-card--reported .ij-cal-card-quote {
    border-color: color-mix(in srgb, var(--mud-palette-success) 50%, transparent);
}

.ij-cal-card-quote-by {
    font-style: normal;
    color: var(--ij-text-tertiary);
}

.ij-cal-card-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.ij-cal-open-btn {
    padding: 7px 14px;
    border: 1px solid var(--ij-primary);
    border-radius: 999px;
    font-size: var(--ij-ts-subhead, 13px);
    font-weight: 600;
    color: var(--ij-primary);
    text-decoration: none;
}

.ij-cal-open-btn:hover {
    background: var(--ij-primary-tint);
}

.ij-cal-source-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--ij-ts-subhead, 13px);
    font-weight: 600;
    color: var(--ij-text-primary);
    text-decoration: none;
}

.ij-cal-source-link:hover {
    text-decoration: underline;
}

/* #1503 M4: "Add to calendar" — a one-event .ics download. Sits beside the release link
   and matches its weight so the actions row reads as one group, but keeps its own name:
   .ij-cal-source-link means "the release that announced this", and conflating the two
   made a DOM query return whichever came first. */
.ij-cal-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--ij-ts-subhead, 13px);
    font-weight: 600;
    color: var(--ij-text-primary);
    text-decoration: none;
}

.ij-cal-add-btn:hover {
    text-decoration: underline;
}

.ij-cal-source-icon.mud-icon-root {
    width: 13px;
    height: 13px;
}

.ij-cal-also-label {
    margin: 18px 0 6px;
    font-size: var(--ij-ts-caption1, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ij-text-tertiary);
}

.ij-cal-also {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ij-cal-also-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--ij-divider);
    font-size: var(--ij-ts-subhead, 13px);
}

.ij-cal-also-date {
    color: var(--ij-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.ij-cal-also-name {
    color: var(--ij-text-primary);
    font-weight: 600;
    text-decoration: none;
}

.ij-cal-also-meta {
    grid-column: 2;
    color: var(--ij-text-secondary);
    font-size: var(--ij-ts-footnote, 12px);
}

/* ── List segment ──────────────────────────────────────────────────────── */
.ij-cal-list-head,
.ij-cal-list-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 2fr) 110px minmax(0, 1.8fr) 140px;
    gap: 16px;
    align-items: center;
}

.ij-cal-list-head {
    padding: 0 14px 8px;
    font-size: var(--ij-ts-caption2, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ij-text-tertiary);
}

.ij-cal-list-week + .ij-cal-list-week {
    margin-top: 14px;
}

.ij-cal-list-weeklabel {
    padding: 0 14px 6px;
    border-bottom: 1px solid var(--ij-divider);
    margin-bottom: 4px;
    font-size: var(--ij-ts-footnote, 12px);
    font-weight: 600;
    color: var(--ij-text-secondary);
}

.ij-cal-list-week--current .ij-cal-list-weeklabel {
    color: var(--ij-primary);
}

.ij-cal-list-week--current .ij-cal-list-row {
    background: var(--ij-event-tint);
}

.ij-cal-list-row {
    position: relative;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: var(--ij-ts-subhead, 13px);
}

.ij-cal-list-row:hover {
    background: rgba(120, 120, 128, 0.08);
}

/* The stretched anchor makes the whole row the stock link; the release link is the
   only nested link and sits above it. */
.ij-cal-list-anchor {
    position: absolute;
    inset: 0;
    border-radius: 12px;
}

.ij-cal-list-link {
    position: relative;
    z-index: 1;
    text-align: right;
}

.ij-cal-list-date b {
    font-size: var(--ij-ts-body, 15px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ij-text-primary);
}

.ij-cal-list-name {
    display: block;
    font-weight: 600;
    color: var(--ij-text-primary);
}

.ij-cal-list-ticker,
.ij-cal-list-period,
.ij-cal-list-status {
    color: var(--ij-text-secondary);
}

.ij-cal-list-ticker {
    font-size: var(--ij-ts-footnote, 12px);
}

/* ── Empty + skeleton ──────────────────────────────────────────────────── */
.ij-cal-empty {
    max-width: 520px;
    margin: 48px auto;
    text-align: center;
}

.ij-cal-empty-icon.mud-icon-root {
    width: 36px;
    height: 36px;
    color: var(--ij-text-tertiary);
}

.ij-cal-empty-title {
    margin: 12px 0 4px;
    font-size: var(--ij-ts-title3, 17px);
    font-weight: 700;
    color: var(--ij-text-primary);
}

.ij-cal-empty-body {
    margin: 0;
    font-size: var(--ij-ts-callout, 14px);
    color: var(--ij-text-secondary);
}

.ij-cal-skeleton {
    height: 520px;
    border-radius: 10px;
    background: rgba(120, 120, 128, 0.08);
}

/* ── Phone (< 900px): one column, dots under day numbers, detail below ─── */
@media (max-width: 900px) {
    .ij-cal-grid-shell {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .ij-cal-rail {
        position: static;
        padding-top: 14px;
        border-top: 1px solid var(--ij-divider);
    }

    .ij-cal-header {
        flex-wrap: wrap;
    }

    .ij-cal-grid {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .ij-cal-week + .ij-cal-week {
        border-top: 0;
    }

    .ij-cal-weekday {
        text-align: center;
        padding-right: 0;
    }

    .ij-cal-cell {
        min-height: 44px;
        align-items: center;
        padding: 4px 0;
        border-left: 0;
    }

    .ij-cal-cell--out {
        background: transparent;
    }

    .ij-cal-cell--selected,
    .ij-cal-cell--selected:hover {
        background: transparent;
        box-shadow: none;
    }

    .ij-cal-daynum {
        align-self: center;
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: var(--ij-ts-callout, 14px);
        border-radius: 999px;
    }

    .ij-cal-cell--today .ij-cal-daynum {
        background: transparent;
        color: var(--ij-primary);
    }

    .ij-cal-cell--selected .ij-cal-daynum {
        /* #1817 — white on --ij-primary is 3.02:1 in dark; the FILL token clears AA. */
        background: var(--ij-primary-fill);
        color: #fff;
    }

    .ij-cal-pills {
        display: none;
    }

    .ij-cal-dots {
        display: flex;
        gap: 3px;
        height: 5px;
        margin-top: 2px;
    }

    .ij-cal-dot {
        width: 5px;
        height: 5px;
        border-radius: 999px;
    }

    .ij-cal-dot--scheduled {
        background: var(--ij-event);
    }

    .ij-cal-dot--reported {
        background: var(--mud-palette-success);
    }

    .ij-cal-dot--estimated {
        border: 1px dashed var(--ij-text-tertiary);
    }

    .ij-cal-legend {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ij-cal-legend-next {
        margin-left: 0;
        flex-basis: 100%;
    }

    .ij-cal-card {
        padding: 12px 14px;
        border-radius: 12px;
    }

    .ij-cal-list-head {
        display: none;
    }

    .ij-cal-list-row {
        grid-template-columns: 52px minmax(0, 1fr);
        row-gap: 2px;
    }

    .ij-cal-list-period,
    .ij-cal-list-link {
        display: none;
    }

    .ij-cal-list-status {
        grid-column: 2;
        font-size: var(--ij-ts-footnote, 12px);
    }
}

/* #1822 — at 320px the two segmented controls (291px together) still ran 3px past the
   right edge, because they sit beside the page's left gutter rather than starting at it.
   Below the phone breakpoint they take the full content width and share it. */
@media (max-width: 600px) {
    .ij-cal-header-actions {
        width: 100%;
    }

    .ij-cal-header-actions > * {
        flex: 1 1 auto;
        min-width: 0;
    }
}