/* ============================================================
   Q Calendar — the calendar page only.

   Loaded by calendar.html AFTER css/style.css, and deliberately
   kept out of it: the home page is the site's front door and has
   no reason to carry this. Everything here is built on the
   variables style.css defines, so the palette and the type stay
   in one place.
   ============================================================ */

/* ============================================================
   Page header
   ============================================================ */

.cal-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-700) 60%, var(--navy-600) 100%);
    color: var(--on-dark);
    padding-block: clamp(3rem, 7vw, 5rem);
    isolation: isolate;
}

.cal-header-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* The calendar follows the header immediately, so it does not want the full
   inter-section rhythm above it — the toolbar would float in dead space. */
#calendar { padding-block-start: clamp(2.25rem, 4vw, 3.25rem); }

/* The one warm note on an otherwise navy-and-blue site, reserved for the
   Master Summits so the three kinds of marked day stay tellable apart at a
   glance: solar is blue, civic navy, summit brass. Scoped here rather than
   added to the site tokens in style.css — the home page has no use for it.
   `--summit` is for edges and dots only; text uses the darker `--summit-ink`,
   which clears 4.5:1 on white. */
:root {
    --summit: #a8823c;
    --summit-ink: #7a5d28;
}

.cal-title {
    font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
    line-height: 1.05;
    margin-bottom: 0.4rem;
}

.cal-subtitle {
    font-style: italic;
    color: var(--blue-200);
    font-size: clamp(1.1rem, 0.98rem + 0.55vw, 1.4rem);
    margin-bottom: 1.5rem;
}

.cal-header-note {
    color: var(--on-dark-muted);
    max-width: 52ch;
    margin: 0;
}

.cal-header-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.85rem;
    margin-block: 1.5rem 0;
    font-size: 0.9rem;
}

.cal-header-link a {
    color: var(--blue-200);
    text-decoration: none;
    border-bottom: 1px solid rgba(168, 208, 238, 0.4);
    padding-bottom: 0.1rem;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cal-header-link a:hover {
    color: var(--white);
    border-bottom-color: var(--white);
}

.cal-header-link span { color: var(--on-dark-faint); font-size: 0.82rem; }

/* The "today" panel: the one thing a visitor most likely came for. */
.cal-today {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.65rem;
    text-align: center;
}

.cal-today-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue-400);
    margin: 0 0 0.6rem;
}

.cal-today-date {
    font-size: clamp(1.3rem, 1.08rem + 0.95vw, 1.7rem);
    line-height: 1.25;
    color: var(--on-dark);
    margin-block: 0 0.55rem;
    /* The long form ("Sunday, December 15, 12026") wraps in this column at
       most widths; balance it rather than leaving one orphaned year. */
    text-wrap: balance;
}

.cal-today-greg {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--on-dark-faint);
    margin: 0;
}

/* ============================================================
   Toolbar — year stepper, today, Gregorian lookup
   ============================================================ */

.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.25rem);
    padding-block: 1.1rem;
    margin-bottom: 2.5rem;
    border-block: 1px solid rgba(28, 38, 53, 0.12);
}

.cal-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cal-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-faint);
    background: none;
    border: 1px solid rgba(28, 38, 53, 0.16);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cal-step:hover:not(:disabled) {
    color: var(--navy-700);
    border-color: var(--blue-400);
}

.cal-step:disabled { opacity: 0.3; cursor: default; }

.cal-year {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
    line-height: 1;
    min-width: 5.5ch;
    text-align: center;
    color: var(--navy-700);
}

.cal-year-meta {
    font-size: 0.82rem;
    color: var(--ink-muted);
    text-align: center;
    min-width: 12ch;
}

.cal-leap {
    display: inline-block;
    margin-left: 0.45rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-400);
    border: 1px solid currentColor;
    border-radius: 99px;
    padding: 0.05rem 0.5rem;
    vertical-align: 0.1em;
}

.cal-lookup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.cal-lookup label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.cal-lookup input {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    padding: 0.45rem 0.8rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid rgba(28, 38, 53, 0.18);
    border-radius: var(--radius);
}

/* Deliberately not the site's .btn: that goes full-width below 720px, which
   is right for a call to action and wrong for a toolbar control. */
.cal-btn {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    color: var(--navy-700);
    background: var(--white);
    border: 1px solid var(--navy-600);
    border-radius: var(--radius);
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.cal-btn:hover {
    background: var(--navy-700);
    color: var(--white);
}

.cal-notice {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.88rem;
    font-style: italic;
    color: #9a3b3b;
    margin: 0;
}

/* ============================================================
   Year view — thirteen identical months at once, which is the
   shape of the calendar a Gregorian year can never show
   ============================================================ */

.cal-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
    gap: 1.1rem;
}

.cal-month-card {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--white);
    border: 1px solid rgba(28, 38, 53, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1rem 1rem 1.1rem;
    cursor: pointer;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
                box-shadow 0.25s var(--ease);
}

.cal-month-card:hover {
    border-color: var(--blue-400);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(16, 32, 58, 0.06),
                0 16px 32px -16px rgba(16, 32, 58, 0.3);
}

.cal-month-card.is-current { border-color: var(--blue-400); }

.cal-month-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.cal-month-ord {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    border: 1px solid rgba(28, 38, 53, 0.14);
    border-radius: 3px;
    padding: 0 0.35rem;
}

.cal-month-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--navy-700);
}

/* A span, not a <p>: it lives inside the card's <button>, which only
   accepts phrasing content. */
.cal-month-span {
    display: block;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--ink-faint);
    margin-block: 0.15rem 0.7rem;
}

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

.cal-week-head span {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    padding-bottom: 0.3rem;
}

.cal-days b {
    position: relative;
    text-align: center;
    font-weight: 400;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    /* Extra room at the foot for the holiday dot. Applied to every cell, not
       just marked ones, so the rows stay on a common baseline. */
    padding: 0.28rem 0 0.45rem;
    border-radius: 3px;
}

/* A marked day is an extra mark on a day, not a state of it — so it is a dot
   rather than a fill, and it coexists with today and with a looked-up date.
   The year view's cells are far too small to name anything; the dot carries a
   title for hover, and the list below the grid is the accessible version.

   Two dots, because a day can carry both kinds at once — the equinox and its
   Master Summit genuinely fall on the same day now and then (20 March 2019,
   for one). `::after` is the observance, `::before` the summit. */
.cal-days b.is-observance::after,
.cal-days b.is-summit::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.16rem;
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
    border-radius: 50%;
}

.cal-days b.is-observance::after { background: var(--blue-400); }
.cal-days b.is-summit::before    { background: var(--summit); }

/* Both on one day: shoulder them apart rather than stacking one on the other. */
.cal-days b.is-observance.is-summit::after  { margin-left: -4.5px; }
.cal-days b.is-observance.is-summit::before { margin-left: 1.5px; }

/* On the filled "today" cell the dots have to invert to stay visible. */
.cal-days b.is-today.is-observance::after,
.cal-days b.is-today.is-summit::before { background: var(--white); }

.cal-days b.is-today {
    background: var(--blue-400);
    color: var(--white);
    font-weight: 700;
}

.cal-days b.is-marked {
    background: var(--paper-2);
    color: var(--navy-700);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--blue-400);
}

/* ------------------------------------------------------------
   Intermission — the days left over once the thirteen months
   are spent. Outside every month and outside the week, so they
   are drawn as something other than a month.
   ------------------------------------------------------------ */

.cal-intermission {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    background: var(--paper-2);
    border: 1px dashed var(--navy-600);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.4rem;
}

.cal-intermission h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--navy-700);
    margin: 0 0 0.25rem;
}

.cal-intermission p {
    font-size: 0.9rem;
    color: var(--ink-muted);
    max-width: 54ch;
    margin: 0;
}

.cal-intermission-days {
    display: flex;
    gap: 0.7rem;
    margin-left: auto;
}

.cal-intermission-days div {
    background: var(--white);
    border: 1px solid var(--navy-600);
    border-radius: var(--radius);
    padding: 0.55rem 1rem;
    text-align: center;
    min-width: 6rem;
}

.cal-intermission-days .ord {
    display: block;
    font-size: 1.35rem;
    color: var(--navy-700);
    font-variant-numeric: tabular-nums;
}

.cal-intermission-days .greg {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--ink-faint);
}

.cal-intermission-days .mark {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--blue-400);
    margin-top: 0.2rem;
}

.cal-intermission-days .is-today {
    background: var(--blue-400);
    border-color: var(--blue-400);
}
.cal-intermission-days .is-today .ord,
.cal-intermission-days .is-today .greg,
.cal-intermission-days .is-today .mark { color: var(--white); }

/* ============================================================
   Month view — one month in detail, each day carrying its
   Gregorian equivalent as a quiet note
   ============================================================ */

.cal-detail-head { text-align: center; margin-bottom: 2rem; }

.cal-detail-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 0.9rem;
}

.cal-detail-nav button {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--ink-muted);
    background: none;
    border: none;
    padding: 0.35rem 0.2rem;
    cursor: pointer;
    transition: color 0.25s var(--ease);
}

.cal-detail-nav button:hover { color: var(--blue-400); }

.cal-detail-title {
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
    color: var(--navy-700);
    margin-bottom: 0.3rem;
}

.cal-detail-sub {
    font-size: 0.9rem;
    color: var(--ink-muted);
    margin: 0;
}

.cal-detail-sub .greg { font-style: italic; color: var(--ink-faint); }

.cal-detail-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.45rem;
}

.cal-detail-grid .head {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-bottom: 0.4rem;
}

.cal-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 5.25rem;
    padding: 0.5rem 0.6rem;
    background: var(--white);
    border: 1px solid rgba(28, 38, 53, 0.1);
    border-radius: var(--radius);
}

.cal-cell .q {
    font-size: 1.35rem;
    color: var(--navy-700);
    font-variant-numeric: tabular-nums;
}

.cal-cell .greg {
    font-size: 0.68rem;
    font-style: italic;
    color: var(--ink-faint);
}

.cal-cell.is-today {
    background: var(--paper-2);
    border-color: var(--blue-400);
}
.cal-cell.is-today .q { font-weight: 700; }

.cal-cell.is-marked { border-color: var(--blue-400); border-style: dashed; }

/* The month view has room for the name itself. */
.cal-cell .mark {
    font-size: 0.66rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--blue-400);
    margin-block: 0.15rem;
}

.cal-cell.is-holiday { box-shadow: inset 2px 0 0 var(--blue-400); }
.cal-cell.is-summit { box-shadow: inset 2px 0 0 var(--summit); }
.cal-cell.is-summit .mark { color: var(--summit-ink); }

/* Both kinds on one day: split the edge between them. */
.cal-cell.is-observance.is-summit {
    box-shadow: inset 2px 0 0 var(--blue-400), inset 0 -2px 0 var(--summit);
}
.cal-cell.is-observance.is-summit .mark { color: var(--blue-400); }

.cal-cell.is-today.is-holiday .mark { color: var(--navy-700); }

/* ============================================================
   Holidays and turning points — the list under the year grid
   ============================================================ */

.cal-holidays { margin-top: clamp(2rem, 4vw, 3rem); }

.cal-holidays h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
    color: var(--navy-700);
    margin-bottom: 0.5rem;
}

.cal-holidays-note {
    font-size: 0.88rem;
    color: var(--ink-muted);
    max-width: 68ch;
    margin-block: 0 1.5rem;
}

.cal-holiday-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cal-holiday-list button {
    display: grid;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    gap: 0.1rem;
    padding: 0.8rem 0.95rem;
    cursor: pointer;
    background: var(--white);
    border: 1px solid rgba(28, 38, 53, 0.1);
    border-left: 3px solid var(--blue-400);
    border-radius: var(--radius);
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.cal-holiday-list button:hover {
    border-color: var(--blue-400);
    transform: translateY(-2px);
}

/* Four kinds, four different sorts of thing: an astronomical instant, a
   calendar rule, a moon reckoned from an instant, and a day belonging to the
   Q year's own structure. The edge says which. */
.cal-holiday-list .is-civic button  { border-left-color: var(--navy-600); }
.cal-holiday-list .is-summit button { border-left-color: var(--summit); }
.cal-holiday-list .is-summit .name  { color: var(--summit-ink); }
.cal-holiday-list .is-summit button:hover { border-color: var(--summit); }

/* The Intermission days borrow the dashed edge and tinted ground of the
   Intermission card above, rather than taking a fifth colour — they are the
   same thing named twice, and the page should show that. */
.cal-holiday-list .is-intermission button {
    background: var(--paper-2);
    border-left-color: var(--navy-600);
    border-left-style: dashed;
}

.cal-holiday-list .name {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--navy-700);
}

.cal-holiday-list .q {
    font-size: 0.9rem;
    color: var(--ink);
}

.cal-holiday-list .greg {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--ink-faint);
}

.cal-holiday-list .note {
    font-size: 0.75rem;
    color: var(--ink-muted);
    margin-top: 0.3rem;
}

.cal-holiday-list .is-today button {
    background: var(--paper-2);
    border-color: var(--blue-400);
}

/* The Intermission has no week to lay out against, so its detail view is a
   short row rather than a seven-column grid. */
.cal-detail-grid.is-intermission {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 12rem));
    justify-content: center;
}

/* ============================================================
   Explainer
   ============================================================ */

.cal-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 1rem;
}

.cal-rule h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--blue-200);
    margin-bottom: 0.5rem;
}

.cal-rule p {
    font-size: 0.97rem;
    color: var(--on-dark-muted);
    margin: 0;
}

.cal-rule p + p { margin-top: 0.7rem; }

.cal-months-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.75rem;
    font-size: 0.9rem;
}

.cal-months-table caption {
    text-align: left;
    font-style: italic;
    color: var(--on-dark-faint);
    font-size: 0.85rem;
    padding-bottom: 0.75rem;
}

.cal-months-table th,
.cal-months-table td {
    text-align: left;
    padding: 0.45rem 0.75rem 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cal-months-table th {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-400);
}

.cal-months-table td { color: var(--on-dark-muted); }
.cal-months-table td:first-child { color: var(--on-dark); }
.cal-months-table .ord { font-variant-numeric: tabular-nums; color: var(--on-dark-faint); }

/* The table is the one thing here that cannot reflow below ~30rem. */
.cal-table-scroll { overflow-x: auto; }

/* ============================================================
   Downloads
   ============================================================ */

/* Explicitly two columns rather than auto-fit: there are exactly four of these
   and auto-fit lands on three, leaving the fourth stranded on its own row. */
.dl-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 48rem) {
    .dl-list { grid-template-columns: repeat(2, 1fr); }
}

.dl {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid rgba(28, 38, 53, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.35rem 1.5rem 1.5rem;
}

/* The whole heading block is the download link, so the target is large and
   obvious rather than a word buried in the prose. */
.dl-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.7rem;
}

.dl-name {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--navy-700);
    transition: color 0.25s var(--ease);
}

.dl-link:hover .dl-name { color: var(--blue-400); }

.dl-meta {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin-top: 0.15rem;
}

/* The downward arrow marks these as downloads without needing an icon file. */
.dl-name::after {
    content: ' ↓';
    color: var(--blue-400);
    font-size: 0.9em;
}

.dl-note {
    font-size: 0.92rem;
    color: var(--ink-muted);
    margin: 0;
}

.dl-note code,
.dl-code code {
    font-family: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
    font-size: 0.86em;
}

.dl-note code {
    background: var(--paper-2);
    border-radius: 3px;
    padding: 0.05em 0.35em;
}

.dl-code {
    background: var(--navy-900);
    color: var(--on-dark);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    margin-block: 0.8rem 0;
}

/* Wraps rather than scrolls. A command whose tail is hidden off the right edge
   is a command people will copy incompletely — and the flags are the whole
   point of this one. */
.dl-code code {
    display: block;
    color: var(--blue-200);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    line-height: 1.5;
}

.dl-footnote {
    font-size: 0.88rem;
    color: var(--ink-muted);
    max-width: 68ch;
    margin-block: clamp(1.75rem, 3vw, 2.5rem) 0;
}

.dl-footnote a { color: var(--navy-700); }

/* ============================================================
   Without JavaScript the grid cannot be computed at all, so say
   so plainly rather than leaving an empty panel. The prose
   sections above and below are static and still read fine.
   ============================================================ */

.cal-noscript {
    text-align: center;
    color: var(--ink-muted);
    font-style: italic;
    padding-block: 2rem;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
    .cal-header-inner { grid-template-columns: 1fr; text-align: center; }
    .cal-header-note { margin-inline: auto; }
    .cal-today { max-width: 24rem; margin-inline: auto; }
    .cal-intermission { justify-content: center; text-align: center; }
    .cal-intermission-days { margin-inline: auto; }
}

@media (max-width: 560px) {
    .cal-toolbar { gap: 1rem; }
    .cal-lookup { justify-content: center; }
    .cal-year-grid { grid-template-columns: 1fr; }
    .cal-detail-grid { gap: 0.3rem; }
    .cal-cell { min-height: 4rem; padding: 0.35rem 0.4rem; }
    .cal-cell .q { font-size: 1rem; }
    .cal-cell .greg { font-size: 0.6rem; }
    .cal-detail-grid .head { font-size: 0.6rem; }
}