/* ===========================================================================
   Calendar — the economic release table, the country filters and the company
   earnings pages.

   Loaded from the `styles` block of templates/events/events.html and
   templates/corporate/corporate.html, so it reaches those pages and stops
   there. It builds on the tokens and components S02 put in app_shell.css
   (`--eg-*`, `.table-wrap`, `.eg-table`, `.chip`, `.tag`, `.panel`,
   `.data-note`, `.impact-mark`) and adds only what a calendar needs that a
   generic table does not: a day heading inside the table body, a time column
   that can say it has no time, and the three-mark impact level.

   Nothing here is smaller than 12px — PLAN.md section 3, and the rule S02's
   browser check enforces on every page.
   =========================================================================== */

/* --- the filter bar ------------------------------------------------------- */
.cal-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eg-3);
    flex-wrap: wrap;
    margin-bottom: var(--eg-3);
}
.cal-filters-right {
    display: flex;
    align-items: center;
    gap: var(--eg-3);
    flex-wrap: wrap;
}
.cal-download {
    font-size: 12px;
    color: var(--eg-muted);
    text-decoration: none;
}
.cal-download:hover { color: var(--eg-accent); text-decoration: underline; }
.cal-subscribe { white-space: nowrap; }

/* The country row sits under the state filters, quieter, because it is a
   second axis rather than a second set of the same thing. */
.cal-countries {
    padding-bottom: var(--eg-3);
    margin-bottom: var(--eg-4);
    border-bottom: 1px solid var(--eg-line);
}
.cal-countries .flag-icon { width: 14px; margin-right: var(--eg-1); }

.cal-count {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eg-3);
    font-size: 12px;
    color: var(--eg-muted);
    margin-bottom: var(--eg-2);
}
.cal-count span:first-child { color: var(--eg-ink); font-weight: 600; }
.cal-tz { display: block; font-size: 12px; color: var(--eg-muted); }

/* --- the table ------------------------------------------------------------ */
.cal-table { table-layout: auto; }

/* A date heading inside tbody rather than a table per day: one table means one
   set of column widths, so the values line up down the whole four weeks
   instead of re-aligning at every date. */
.cal-table tr.cal-day th {
    background: var(--eg-page);
    border-top: 1px solid var(--eg-line);
    border-bottom: 1px solid var(--eg-line);
    padding: var(--eg-3) var(--eg-4);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    color: var(--eg-ink);
}
.cal-table tr.cal-day:first-child th { border-top: 0; }
.cal-day-name { font-weight: 700; }
.cal-day-date { color: var(--eg-muted); margin-left: var(--eg-2); font-weight: 400; }
.cal-day-count {
    float: right;
    color: var(--eg-muted);
    font-family: var(--eg-mono);
    font-weight: 400;
}

.cal-time { white-space: nowrap; width: 1%; }
.cal-time time {
    font-family: var(--eg-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}
/* The mark beside a time that came out of a clock change. Amber, like every
   other "read this before you trust the number" on the site. */
.cal-time-flag {
    color: var(--eg-wait);
    font-weight: 700;
    margin-left: var(--eg-1);
    cursor: help;
    text-decoration: none;
    border: 0;
}
.cal-time-none {
    font-size: 12px;
    color: var(--eg-muted);
    display: block;
}
.cal-time-src {
    display: block;
    font-size: 12px;
    color: var(--eg-muted);
    font-family: var(--eg-mono);
}

.cal-region { white-space: nowrap; width: 1%; }
.cal-region .flag-icon { width: 14px; margin-right: var(--eg-1); }
.cal-region .tag-none { color: var(--eg-muted); }

.cal-event a { color: var(--eg-ink); font-weight: 600; text-decoration: none; }
.cal-event a:hover { color: var(--eg-accent); text-decoration: underline; }
.cal-event > span { font-weight: 600; }
.cal-period {
    display: inline-block;
    font-size: 12px;
    color: var(--eg-muted);
    margin-left: var(--eg-2);
    font-family: var(--eg-mono);
}
.cal-status { display: block; font-size: 12px; color: var(--eg-muted); }
/* Released is the one state that has numbers behind it, so it is the one that
   is not grey. Never green: a release having happened is not a rise. */
.cal-status-released { color: var(--eg-accent); font-weight: 600; }
.cal-status-awaiting { color: var(--eg-wait); font-weight: 600; }

.cal-actual b { font-weight: 700; }

/* --- impact --------------------------------------------------------------- */
.impact { display: inline-flex; align-items: center; gap: var(--eg-1); white-space: nowrap; }
.impact small { font-size: 12px; color: var(--eg-muted); }
.impact-level { display: inline-flex; align-items: flex-end; gap: 1px; height: 12px; }
.impact-level i {
    display: block;
    width: 3px;
    background: var(--eg-line-2);
    border-radius: 1px;
}
.impact-level i:nth-child(1) { height: 5px; }
.impact-level i:nth-child(2) { height: 8px; }
.impact-level i:nth-child(3) { height: 11px; }
/* `.impact-mark` is S02's token class: amber, and never red or green. */
.impact-level i.on { background: currentColor; }
.impact-high small, .impact-medium small { color: var(--eg-wait); font-weight: 600; }
.impact-unrated small { font-style: italic; }

/* --- the two panels under the table --------------------------------------- */
.cal-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--eg-4);
    margin-top: var(--eg-6);
}
.cal-panels .eyebrow {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eg-accent);
    font-weight: 600;
}
.cal-panels h2 {
    font-family: var(--eg-serif);
    font-size: 25px;
    font-weight: 400;
    letter-spacing: -.01em;
    margin: var(--eg-3) 0;
}
.cal-panels .text-link { font-size: 13px; font-weight: 600; color: var(--eg-accent); text-decoration: none; }
.cal-panels .text-link:hover { text-decoration: underline; }

/* --- company earnings ------------------------------------------------------ */
.co-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--eg-4);
    flex-wrap: wrap;
    margin-bottom: var(--eg-4);
}
.co-quote { display: flex; align-items: baseline; gap: var(--eg-3); flex-wrap: wrap; }
.co-quote .num { font-size: 28px; font-weight: 600; }
.co-quote .chg { font-size: 16px; font-weight: 600; }
.co-facts {
    display: flex;
    gap: var(--eg-5);
    flex-wrap: wrap;
    font-size: 13px;
}
.co-fact label {
    display: block;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--eg-muted);
    margin: 0;
}
.co-fact strong { font-weight: 600; }

/* --- narrow --------------------------------------------------------------- */
@media (max-width: 860px) {
    .cal-panels { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .cal-filters { align-items: flex-start; flex-direction: column; }
    /* The three value columns go, not the event: on a phone the question is
       what is coming and when, and the reported figures are what the row's own
       page is for. The table still scrolls sideways inside .table-wrap for
       anyone who wants them, and the page never does. */
    .cal-table th:nth-child(4), .cal-table td:nth-child(4),
    .cal-table th:nth-child(6), .cal-table td:nth-child(6),
    .cal-table th:nth-child(7), .cal-table td:nth-child(7) { display: none; }
    .cal-day-count { display: none; }
}