/* 298 exec: the only stylesheet the executive app adds to the WC console's library (exec/DESIGN.md v2 section 6). It lays out the
   charts and their cards and nothing else; every value is a library token (exec/test/ui.test.mjs refuses a hex, rgb or px value
   other than a 1px hairline, as the console's own test does for console.css). */

.ex-top {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--len-12);
    margin-top: var(--len-32);
}

.ex-filters { margin-top: var(--len-16); }
.ex-filters .filters { margin-bottom: 0; }
.ex-scope { margin-top: var(--len-12); display: flex; flex-wrap: wrap; align-items: center; gap: var(--len-8); }
.ex-scope .foot-state { flex: 0 1 auto; }
.ex-banner { margin-top: var(--len-16); }

.ex-card-head { display: flex; align-items: flex-start; gap: var(--len-8); }
.ex-card-head .lesson-head { margin-bottom: 0; }
.ex-card-main { min-width: 0; flex: 1; }
.ex-card-head + .ex-body { margin-top: var(--len-16); }
.ex-tools { display: flex; flex-shrink: 0; align-items: center; gap: var(--len-4); }

.ex-facts { display: grid; gap: var(--len-12); }
.ex-fact .summary-time { display: block; }
.ex-fact .summary-code { display: block; margin-top: var(--len-2); }

.ex-chart { width: var(--fill); height: var(--len-480); }
.ex-chart-tall { height: var(--len-672); }
.ex-chart-short { height: var(--len-360); }
.ex-chart + .ex-rows, .ex-rows + .ex-chart { margin-top: var(--len-16); }
.ex-body > * + * { margin-top: var(--len-16); }

.ex-def { max-width: var(--len-340); padding: var(--len-6) var(--len-8); }
.ex-def .callout-desc + .callout-desc { margin-top: var(--len-6); }

.ex-tt { font-family: var(--font-body); font-size: var(--fs-12); line-height: var(--lh-14); color: var(--charcoal); }
.ex-tt-head { font-family: var(--font-display); font-size: var(--fs-13); font-weight: var(--weight-semibold); margin-bottom: var(--len-4); }
.ex-tt-row { display: flex; justify-content: space-between; gap: var(--len-16); }
.ex-tt-row b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.ex-tt-foot { margin-top: var(--len-4); color: var(--ds-tertiary); }

.ex-rows { display: grid; gap: var(--len-8); }
.ex-line { display: flex; align-items: center; gap: var(--len-12); width: var(--fill); }
.ex-line-name {
    min-width: 0; flex: 1; font-family: var(--font-display); font-size: var(--fs-13); font-weight: var(--weight-semibold);
    line-height: var(--lh-125); color: var(--charcoal);
}
.ex-line-value { flex-shrink: 0; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: var(--fs-13); font-weight: var(--weight-semibold); }
.ex-line-sub { display: block; font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--weight-regular); color: var(--charcoal-m); }

.ex-student { align-items: flex-start; }
.ex-student .row-where { flex: 1; min-width: 0; }
.ex-student-name { width: var(--len-220); flex-shrink: 0; }
.ex-student-name > span { display: block; }
.ex-links a { text-decoration: none; }
.ex-pills { display: flex; flex-wrap: wrap; gap: var(--len-4); }
.ex-links { display: flex; flex-shrink: 0; align-items: center; gap: var(--len-4); }

.ex-split { display: grid; gap: var(--len-12); }

.ex-closed { margin-top: var(--len-32); }

.ex-embed .mark, .ex-embed .wordmark, .ex-embed .intro, .ex-embed .ex-filters, .ex-embed .notice { display: none; }
/* on the dashboard card (21 Oct 2026): the four views and the full app button stay on one slim row, and the chart takes the rest of
   the card: its height is the frame's, less that row and the card's own head */
.ex-embed .ex-top { margin-top: 0; padding: var(--len-8) var(--len-8) 0; }
/* the dashboard card (21 Oct 2026, compact): HubSpot's card carries the title and its i holds how to read it, so the card's own head is
   only its tools (Rows, i), set on the tabs row's right; the chart takes everything under that one row */
.ex-embed .flow { position: relative; }
.ex-embed .ex-card-main { display: none; }
.ex-embed .ex-card-head { position: absolute; top: var(--len-8); right: var(--len-8); }
.ex-embed .ex-card-head + .ex-body { margin-top: 0; }
.ex-embed .panels { margin-top: var(--len-8); }
.ex-embed.page { padding: 0; min-height: 0; }
.ex-embed .shell-wide { max-width: var(--fill); }
.ex-embed .card { border: 0; padding: var(--len-8) var(--len-4); }
.ex-embed .ex-chart { height: calc(var(--view-h) - var(--len-160)); }
.ex-signin { display: grid; gap: var(--len-16); justify-items: start; max-width: var(--len-760); margin: var(--len-48) auto 0; padding: 0 var(--len-16); }
.ex-embed .flow { margin-top: 0; }

.is-meeting .ex-filters, .is-meeting .notice, .is-meeting .mark { display: none; }
.is-meeting .ex-chart { height: var(--len-672); }

@media (min-width: 40rem) {
    .ex-facts { grid-template-columns: repeat(var(--cols-3), minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .ex-split { grid-template-columns: repeat(var(--cols-2), minmax(0, 1fr)); }
}