/* ============================================================================
   MAIN AREA - calendar (left) + task panel (right)
   ============================================================================ */
.main-area {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    align-items: start;
}

/* v0.4.11: responsive collapse for narrow viewports so the Figma desktop
   layout doesn't overflow on a phone-width browser or a narrow preview pane.
   Calendar stacks above the tasks panel; topbar wraps onto two rows; task
   columns collapse to one. */
@media (max-width: 980px) {
    .main-area { grid-template-columns: 1fr; }
    .calendar-wrap { max-width: 100%; }
    .calendar-wrap .calendar { width: 100%; }
    /* Ribbon-filter sticks out from the calendar; on stacked layout move it
       to the top-right of the calendar instead of overlapping tasks. */
    .ribbon-filter { z-index: 1; }
}
@media (max-width: 720px) {
    /* v0.5.1.1: ONE row - [clock][pet]......[right icons]. Flex instead of the old
       two-row grid rejig; when the right cluster genuinely cannot fit (narrow
       screen + the wide Free-tier Upgrade CTA) it wraps UNDER, right-aligned -
       graceful degradation, never horizontal overflow. */
    .topbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        row-gap: 6px;
    }
    .topbar-right { margin-left: auto; }
    /* v0.8.3.0: on a phone the bar is a flex row with nothing to spare, so the middle
       column stops being a centring track and just flows - a 90px CTA nailed to the
       middle of 375px would push the icon cluster onto a second row. */
    .topbar-center {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }
    .task-cols { grid-template-columns: 1fr !important; }
    .bottombar { flex-direction: column; align-items: stretch; }

    /* v0.8.3.0: clear the calendar's top-right corner so the filter bookmark can hang
       there. The month switcher is centred on desktop by two auto margins; on a phone
       both are dropped so [Сегодня][‹][Jul][2026][›] left-pack into one tight run and
       the corner is free. The bookmark itself is positioned in 03-filter-ribbon.css.
       Same specificity note as the rest of this block: the base .cal-head rules live
       LATER in this file, so these overrides are deliberately more specific. */
    .card.calendar .cal-head > :nth-child(2) { margin-left: 0; }
    .card.calendar .cal-head > :nth-child(4) { margin-right: 0; }
    .card.calendar .cal-head { gap: 3px; padding-right: 52px; }
    .card.calendar .cal-head .chip { padding: 0 7px; }
    .card.calendar .cal-head .year {
        min-width: 52px;
        padding: 0 17px 0 6px;
        background-position: right 4px center;
    }
    /* v0.5.1.1: the horizon tabs must NEVER show a horizontal scrollbar on phones
       (founder complaint - the gray strip under the tabs). Three-layer fix: tighter
       type + gaps so all five tabs actually fit 360px, distribute them across the
       full width, and hide the scrollbar entirely on the overflow-x fallback.
       NB: selectors are deliberately MORE specific (nav./.horizon-tabs prefix) -
       the base rules live in 06-planning-tasks.css, which loads AFTER this file,
       so equal-specificity overrides here would lose (the old 14px-gap rule did
       exactly that, silently, which is why phones scrolled). */
    nav.horizon-tabs {
        gap: 6px;
        padding: 4px 2px 8px;
        justify-content: space-between;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    nav.horizon-tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .horizon-tabs .horizon-tab { font-size: 13px; white-space: nowrap; padding: 6px 2px; }

    /* v0.4.67.19: Google-Calendar-style dense grid on phones (80% of users are on
       mobile). The desktop calendar keeps its small centred day-circles; on phones
       the day cells fill their column as rounded squares with tight, even gaps, so
       the month reads as one solid grid instead of tiny floating dots with dead
       space. Tighter calendar padding reclaims width.
       NB: these selectors are deliberately more specific (.card.calendar / .cal-grid
       .calday) than the base rules further down this file - the base declarations come
       LATER in source order, so an equal-specificity override here would lose. */
    .card.calendar { padding: 12px 10px; }
    .calendar .cal-grid { gap: 5px; }
    .calendar .cal-dow { margin-bottom: 4px; }
    .cal-grid .calday {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
    }
}

@media (max-width: 380px) {
    /* Cells stay fluid (see the 720px rule); just soften padding + type on the
       narrowest phones. Same specificity note as above. */
    .card.calendar { padding: 10px 8px; }
    .cal-grid .calday { font-size: 14px; border-radius: 10px; }
}

/* ---- Calendar card ---- */
.calendar { padding: 18px 16px; }

/* Compact 5-item flex row: [Today] [‹] [Month] [Year] [›]. Flex auto-distributes
   the items; the inner selects shrink to their content width. ≈30% tighter than
   v0.4.2.0 - smaller paddings + 12 px font + narrower selects. */
.cal-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

/* Explicit fixed heights on each control so the row shrinks vertically.
   Padding is 0 vertical (height takes over), line-height matches the height. */
.cal-head .chip {
    height: 24px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 11px;
    line-height: 24px;
}

/* Compact size overrides on top of the shared .chronos-select look (border,
   caret and appearance:none come from there). Only the dimensions and the
   tighter caret inset are respecified here. */
.cal-head .year {
    height: 24px;
    min-height: 24px;
    border-radius: 6px;
    padding: 0 20px 0 8px;
    font-size: 11px;
    line-height: 1;
    min-width: 60px;
    box-sizing: border-box;
    background-position: right 6px center;
}

/* Push the central month/year pair to the center; arrows hug the edges. */
.cal-head > :nth-child(2) { margin-left: auto; }
.cal-head > :nth-child(4) { margin-right: auto; }

.cal-month {
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

.chip {
    background: var(--chronos-chip-bg);
    color: var(--chronos-fg-primary);
    border: none;
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    font-size: 14px;
}

.chip:hover { background: var(--chronos-hover-bg); }

.cal-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 6px;
}

.cal-dow .muted { padding: 4px 0; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.calday {
    background: transparent;
    color: var(--chronos-fg-primary);
    border: none;
    border-radius: var(--radius-pill);
    width: 38px;
    height: 38px;
    margin: 0 auto;
    font-size: 14px;
    font-family: inherit;
}

.calday:hover { background: var(--chronos-hover-bg); }

.calday.endpoint {
    background: var(--chronos-day-selected);
    color: white;
    font-weight: 600;
}

.calday.in-range {
    background: var(--chronos-violet-light);
    color: var(--chronos-fg-primary);
}

.calday.muted-day {
    color: var(--chronos-day-muted);
}