/* Layout and component styles of the prototypes. The values come from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: 400 var(--text-body)/1.5 var(--font-text);
  font-feature-settings: "lnum", "tnum";
}

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }

.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Shell. A wide screen has a top navbar (the logo, the sections, the search, the language, log in and sign up). A tablet or a phone has a top bar and a drawer (.sidebar). */

.shell { min-height: calc(100vh / var(--page-zoom)); }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  width: var(--sidebar-width);
  display: flex; flex-direction: column;
  background: var(--surface-sidebar); color: var(--sidebar-text);
  border-right: var(--divider);
  overflow-x: hidden; overflow-y: auto;
}

.sidebar-logo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 20px 16px; border-bottom: 1px solid var(--border);
}


.sidebar .nav-main { padding: var(--space-3) var(--space-3) var(--space-4); }

.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.nav-link {
  display: block; padding: 8px var(--space-3); border-radius: 6px;
  font-size: var(--text-small); line-height: 1.4; color: var(--sidebar-text); text-decoration: none;
}
.nav-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-active-text); }
/* The current item has a black line, like the slash of the logo and the divider. */
.nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ink); border-radius: 0 6px 6px 0; color: var(--sidebar-active-text); font-weight: 600; }

.nav-footer { margin-top: auto; padding: var(--space-3) var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.nav-footer .nav-link { padding: 6px var(--space-3); font-size: max(13px, var(--text-min)); }
/* A short divider with the weight of the slash separates the links from the settings. */
.sidebar-tools { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-3) 0; }
.sidebar-tools::before { content: ""; width: 28px; height: 2px; background: var(--ink); }
.sidebar .lang-switch { align-self: flex-start; border-color: var(--border); }
.sidebar .lang-switch button { min-width: 32px; min-height: 26px; font-size: var(--text-caption); color: var(--sidebar-text); }
.sidebar .lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.font-switch, .theme-switch { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-caption); color: var(--sidebar-text); }
.font-switch select { min-height: 32px; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raised); color: var(--text-primary); font-size: var(--text-small); }
/* Each swatch reads the tokens of its own theme (tokens.css): the card color and the accent. */
.theme-swatches { flex-wrap: wrap; display: flex; gap: var(--space-2); padding: 3px; }
.theme-swatch { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: linear-gradient(135deg, var(--surface-card) 50%, var(--accent) 50%); cursor: pointer; }
.theme-swatch[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
@media (pointer: coarse) { .sidebar .lang-switch button { min-height: 36px; } .theme-swatch { width: 28px; height: 28px; } }

/* Tab bar: the tabs of the sidebar item. It scrolls inside its own container on a phone. */
.section-tabs { background: var(--surface-page); padding: var(--space-2) var(--space-6); overflow-x: auto; }
.section-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); min-width: max-content; }
.section-tabs a { display: block; padding: 18px 0 14px; font-size: var(--text-small); color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.section-tabs a:hover { color: var(--text-primary); }
.section-tabs a[aria-current="page"] { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--accent); }

.main-column { min-height: calc(100vh / var(--page-zoom)); display: flex; flex-direction: column; }

.header-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 64px; padding: var(--space-3) var(--space-5);
  background: color-mix(in srgb, var(--surface-page) 94%, transparent); backdrop-filter: blur(6px);
}
/* The back button is on the left of the bar, the tabs are in the center and the search is on the right. */
.header-left { display: flex; align-items: center; gap: var(--space-2); }
.header-bar.has-tabs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.header-bar.has-tabs .global-search { justify-self: end; }
.header-bar .section-tabs { flex: none; min-width: 0; padding: 0; overflow: visible; }
.header-bar.has-tabs.many-tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); row-gap: var(--space-2); }
@media (min-width: 1024px) {
  .header-bar.many-tabs .section-tabs { grid-column: 1 / -1; grid-row: 2; }
  .header-bar.many-tabs .section-tabs ul { flex-wrap: wrap; justify-content: center; min-width: 0; }
}
/* All tabs are pills. The current tab has a black border and a light elevation. */
.section-tabs { border-bottom: 0; }
.section-tabs ul { gap: var(--space-1); }
.section-tabs a { padding: 7px 14px; margin-bottom: 0; border: 1px solid transparent; border-radius: var(--pill); color: var(--text-secondary); }
.section-tabs a:hover { border-color: var(--border); color: var(--ink); }
.section-tabs a[aria-current="page"], .section-tabs a[aria-current="true"] { border-color: var(--ink); background: transparent; color: var(--ink); font-weight: 600; box-shadow: 0 1px 0 color-mix(in srgb, var(--shade) 3%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--shade) 35%, transparent); }

/* Sub-tabs: the pages of a tab with sub-tabs (Αναλύσεις › Παλαιστίνη–Ισραήλ). A second row of underlined tabs under the pills. */
.sub-tabs { padding: 0 var(--space-5) var(--space-3); overflow-x: auto; }
.sub-tabs ul { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; gap: var(--space-5); width: max-content; min-width: 100%; border-bottom: 1px solid var(--border); }
.sub-tabs a { display: block; padding: 8px 0 9px; font-size: var(--text-small); color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sub-tabs a:hover { color: var(--ink); }
.sub-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
@media (max-width: 1023px) {
  .sub-tabs { padding: var(--space-2) var(--space-4) 0; }
  .sub-tabs ul { justify-content: flex-start; }
}

/* The back button is a round icon button. */
.back-button {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface-raised); color: var(--ink); cursor: pointer;
}
.back-button:hover { border-color: var(--ink); }
.back-button:disabled { color: var(--text-secondary); border-color: var(--border); cursor: default; }
.global-search { display: flex; justify-content: flex-end; flex: none; min-width: 0; margin: 0 0 0 auto; }

/* The global search (#61). Closed, it is a quiet button: the icon, the word on a wide screen and the "/" key.
   Open, the button grows into a panel over the page, with a light scrim behind it. shell.js moves it with transform and opacity only. */
.search-button {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; height: 36px; padding: 0 6px 0 12px;
  border: 1px solid transparent; border-radius: 10px; background: color-mix(in srgb, var(--shade) 5%, transparent); color: var(--text-secondary);
  font: max(13px, var(--text-min)) var(--font-text); cursor: pointer;
}
.search-button:hover { background: color-mix(in srgb, var(--shade) 8%, transparent); color: var(--ink); }
.search-button-icon { width: 18px; height: 18px; flex: none; }
.search-button-label { padding-right: var(--space-5); white-space: nowrap; color: var(--text-primary); }
.global-search-key { min-width: 20px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-page); font: 600 max(12px, var(--text-min))/18px var(--font-text); color: var(--text-secondary); text-align: center; }
.global-search.is-open .search-button { opacity: 0; }

.search-scrim { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--shade) 16%, transparent); }
.search-panel {
  position: fixed; z-index: 61; top: 12px; left: calc(50% - 320px); width: 640px; max-height: calc(100vh / var(--page-zoom) - 24px); display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface-raised); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--shade) 45%, transparent);
  transform-origin: 0 0; overflow: hidden;
}
.search-scrim[hidden], .search-panel[hidden] { display: none; }
.search-field { display: flex; align-items: center; gap: var(--space-2); flex: none; padding: 4px 6px 4px 14px; border-bottom: 1px solid var(--border); }
.global-search-icon { flex: none; color: var(--text-secondary); }
.global-search-input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; font: var(--text-body) var(--font-text); color: var(--ink); }
.global-search-input::placeholder { color: var(--text-secondary); }
.global-search-input:focus { outline: 0; }
.global-search-input::-webkit-search-cancel-button { display: none; }
.search-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.search-close:hover { background: var(--surface-page); color: var(--ink); }
.search-close .icon { width: 20px; height: 20px; }
.global-search-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2); }
.global-search-group + .global-search-group { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--border); }
.global-search-kind { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.global-search-kind > span:first-child::before { content: "/ "; color: var(--ink); }
.global-search-count { padding: 0 6px; border-radius: var(--pill, 999px); background: var(--surface-page); font-weight: 600; letter-spacing: 0; }
.global-search-option { display: flex; flex-direction: column; gap: 1px; padding: 6px var(--space-2); border-radius: 10px; color: var(--text-primary); text-decoration: none; font-size: var(--text-small); cursor: pointer; }
.global-search-option[aria-selected="true"], .global-search-option:hover { background: var(--surface-page); color: var(--ink); }
.global-search-name { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.global-search-label { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.global-search-sub { flex: none; max-width: 45%; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); color: var(--text-secondary); }
.global-search-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); color: var(--text-secondary); }
.global-search-option.is-query { flex-direction: row; align-items: center; gap: var(--space-2); }
.global-search-option.is-query .icon { flex: none; color: var(--text-secondary); }
.global-search-more { flex-direction: row; font-weight: 600; color: var(--ink); }
.global-search-note { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-small); color: var(--text-secondary); }
.global-search-loading { display: grid; gap: var(--space-2); padding: var(--space-2); }
.global-search-loading .skeleton { height: 14px; }
.global-search-loading .skeleton:nth-child(2) { width: 70%; }
.global-search-loading .global-search-note { padding: 0; }
.search-keys { flex: none; margin: 0; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-caption); color: var(--text-secondary); }
@media (max-width: 1023px) {
  .search-button { width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; }
  .search-button-icon { width: 22px; height: 22px; }
  .search-button-label, .search-button .global-search-key, .search-keys { display: none; }
  /* Phone: the panel is the full width of the screen. */
  .search-panel { top: var(--space-2); left: var(--space-2); right: var(--space-2); width: auto; max-height: calc(100dvh - 16px); }
}

.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 var(--space-2);
  background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.icon-button:hover { border-color: var(--border); }
.icon-button.menu-button, .icon-button.sidebar-close { display: none; }

.logo-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.logo-img { filter: var(--logo-filter); display: block; width: 152px; max-width: 100%; height: auto; }
.breadcrumbs { width: 100%; max-width: 1240px; padding: var(--space-5) var(--space-6) 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; font-size: var(--text-small); }
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-1); }
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs [aria-current="page"] { color: var(--text-primary); font-weight: 600; }


.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.lang-switch button { min-width: 40px; min-height: 36px; border: 0; background: transparent; font-size: var(--text-small); cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

.content { flex: 1; width: 100%; max-width: 1240px; padding: var(--space-6); }

.page-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); font-size: var(--text-small); color: var(--text-secondary); }

.drawer-scrim { display: none; }

/* Page header */

.page-header { margin-bottom: var(--space-5); }
.page-kicker { margin: 0 0 var(--space-1); font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.page-title { margin: 0; font: 600 30px/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--strong); }
.page-hint { max-width: 72ch; margin: var(--space-2) 0 0; color: var(--text-secondary); }
.page-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
.updated-at { font-size: var(--text-small); color: var(--text-secondary); }
.page-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-small); color: var(--text-secondary); }
.page-meta .sep { color: var(--text-secondary); }

/* Controls */

.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); }
.segmented button { min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: 6px; background: transparent; font-size: var(--text-small); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

.range-control { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.range-fields { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.field { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-caption); color: var(--text-secondary); }
.field select, .field input[type="search"] {
  min-height: 40px; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-raised); font-size: var(--text-small); color: var(--text-primary);
}
.range-error { flex-basis: 100%; margin: 0; font-size: var(--text-small); color: var(--error-text); }

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; font-size: var(--text-small); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

.tabs { margin-bottom: var(--space-4); }

/* Cards and KPI tiles */


.kpi-tile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px solid transparent; border-radius: var(--radius); transition: border-color var(--motion-base) var(--ease-out); }
.kpi-label { margin: 0; font-size: var(--text-small); font-weight: 500; color: var(--text-secondary); }
.kpi-value { margin: 0; font-size: var(--text-figure); font-weight: 600; line-height: 1.1; color: var(--strong); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

/* A card has the page background. Its edge shows only under the mouse or with the keyboard focus inside. A card that holds cards leaves the edge to them. */
:is(.kpi-tile, .dcard):is(:hover, :focus-within):not(:has(.kpi-tile, .dcard)) { border-color: var(--card-edge); }

/* Charts */

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--font-text); font-size: max(12px, var(--text-min)); fill: var(--text-secondary); }
.chart .grid-line { stroke: var(--rule); stroke-width: 1; }

.tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  max-width: 260px; padding: var(--space-2) var(--space-3); border-radius: 6px;
  background: var(--strong); color: var(--on-ink); font-size: var(--text-caption); line-height: 1.4;
}

/* Bars (#54): the one style of every bar. The spec is in components.js, above HBar. */
.hbar { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.hbar-track { position: relative; flex: 1; min-width: 48px; height: 8px; border-radius: 4px; background: var(--bar-track); }
.hbar-fill { height: 100%; border-radius: 4px; background: var(--bar-fill); }
.hbar .bar-value { flex: none; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.bar-marker { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--strong); }
.stacked { position: relative; display: flex; gap: 2px; min-width: 96px; height: 8px; }
.stacked span:not(.bar-marker) { height: 100%; }
.stacked span:first-child { border-radius: 4px 0 0 4px; }
.stacked span:nth-last-child(1 of :not(.bar-marker)) { border-radius: 0 4px 4px 0; }
.stacked span:only-child { border-radius: 4px; }
.stacked.is-empty { border-radius: 4px; background: var(--bar-track); }
.stacked-wrap { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.bar-empty { font-size: var(--text-caption); color: var(--text-secondary); white-space: nowrap; }
.dbar { position: relative; min-width: 96px; height: 8px; border-radius: 4px; background: var(--bar-track); }
.dbar-seg { position: absolute; top: 0; height: 100%; }
.dbar-seg.is-left { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.dbar-seg.is-right { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.dbar-mid { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--strong); }
.dbar.is-faint .dbar-seg { opacity: 0.4; }
.bar-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bar-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 3px; align-items: center; font-size: var(--text-small); }
.bar-list .row-name { min-width: 0; overflow-wrap: anywhere; }
.bar-list .row-name > .dot { display: inline-block; margin-right: 6px; vertical-align: -1px; }
.bar-list .row-sub { display: block; font-size: var(--text-caption); color: var(--text-secondary); }
.bar-list .row-value { font-size: var(--text-caption); color: var(--text-secondary); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-list li > :nth-child(3) { grid-column: 1 / -1; }
/* A list of 440 px or more, with no second line under the labels: label, bar and value on one line. The label column is as wide as the longest label, 40% at most,
   so the bars of all rows have one start and one end (a subgrid). A narrower list keeps the bar under the label. */
.bar-box { min-width: 0; container-type: inline-size; }
@container (min-width: 440px) {
  .bar-list:not(:has(.row-sub)) { grid-template-columns: fit-content(40%) minmax(96px, 1fr) auto; column-gap: var(--space-3); row-gap: 6px; }
  .bar-list:not(:has(.row-sub)) > li { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .bar-list:not(:has(.row-sub)) > li > .row-value { grid-column: 3; grid-row: 1; }
  .bar-list:not(:has(.row-sub)) > li > :nth-child(3) { grid-column: 2; grid-row: 1; }
}
/* A long list in columns, and the key of its reference value above it. */
.bar-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 6px var(--space-5); align-items: start; }
.bar-list-wrap { display: grid; gap: var(--space-2); min-width: 0; }
/* A short list (10 rows or fewer) has bars of 16 px. A long list keeps 8 px. */
.bars-thick .hbar-track, .bars-thick .dbar { height: 16px; border-radius: 3px; }
.bars-thick .hbar-fill { border-radius: 3px; }
.bars-thick .dbar-seg.is-left { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.bars-thick .dbar-seg.is-right { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.bars-thick .bar-marker { height: 22px; }
/* A row of a ranking that is the baseline (Όλα τα μέσα). */
.bar-list .is-ref .row-name { color: var(--emph-more); font-weight: 600; }
/* In a list that scrolls, the baseline stays in view at the top or bottom edge. */
.bar-list .is-ref { position: sticky; top: 0; bottom: 0; z-index: 1; background: var(--surface-page); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .bar-list .is-ref { background: var(--surface-raised); }
/* A tick on a light bar keeps an edge, so it shows on the bar and on the track. */
.bars-thick .bar-marker { box-shadow: 0 0 0 1px var(--surface-page); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .bars-thick .bar-marker { box-shadow: 0 0 0 1px var(--surface-raised); }
.bar-group { display: grid; gap: 3px; }
/* A phone shows the value of a bar with a value text, not the bar. */
@media (max-width: 639px) { .hbar:has(.bar-value) .hbar-track { display: none; } }
.bar-list li.is-pick { cursor: pointer; margin: 0 -4px; padding: 2px 4px; border-radius: 6px; }
.bar-list li.is-pick:hover, .bar-list li.is-picked { background: var(--card-tint); }
.bar-list li.is-picked .row-name { font-weight: 600; }
.bar-list li.is-faint { opacity: 0.6; }
.chart-holder { width: 100%; }
.chart-scroll { overflow-x: auto; }
@media (max-width: 719px) { .chart-scroll > .chart-holder { min-width: var(--chart-min); } }
.bar-chart .bar-col { transition: opacity var(--motion-base) var(--ease-out); }
.bar-chart .bar-col.is-muted { opacity: 0.3; }
.bar-chart .bar-hover { fill: color-mix(in srgb, var(--bar-fill) 8%, transparent); }
.bar-chart .bar-band { fill: var(--accent); opacity: 0.12; }
.bar-chart .bar-flag { fill: var(--card-tint); stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.bar-chart .bar-hit { fill: transparent; }
.bar-chart .bar-hit.is-select { cursor: crosshair; touch-action: pan-y; }
.bar-chart .bar-hit[role="button"] { cursor: pointer; }
.bar-chart .bar-hit:focus-visible { outline: 2px solid var(--strong); }
.bar-chart .bar-mark { fill: var(--surface-page); stroke: var(--strong); stroke-width: 1.5; }
.bar-chart .bar-mark-text { fill: var(--strong); font-weight: 600; pointer-events: none; }
.bar-chart .bar-top { fill: var(--text-primary); }
.bar-chart .bar-ref { stroke: var(--strong); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.bar-chart .bar-ref-text { fill: var(--text-primary); paint-order: stroke; stroke: var(--surface-page); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.bar-chart text.is-picked { fill: var(--text-primary); font-weight: 700; }
.bar-chart .axis-title { fill: var(--text-secondary); }
.bar-below { display: grid; gap: 4px; margin-top: 2px; font-size: var(--text-caption); line-height: 1.25; color: var(--text-secondary); text-align: center; }
.bar-below span { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; hyphens: auto; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--text-caption); color: var(--text-secondary); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-1); }
.swatch { width: 10px; height: 10px; border-radius: 2px; }
.swatch-tick { width: 2px; height: 14px; border-radius: 1px; background: var(--strong); }

/* Tables */

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.data-table caption { text-align: left; padding-bottom: var(--space-2); font-size: var(--text-caption); color: var(--text-secondary); }
.data-table th { padding: var(--space-2); border-bottom: 1px solid var(--border); text-align: left; font-size: var(--text-caption); font-weight: 600; color: var(--text-secondary); }
.data-table td { padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table .sort-button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.data-table .sort-button:hover, .data-table th[aria-sort] .sort-button { color: var(--ink); }
.data-table .sort-arrow { display: inline-block; min-width: 1ch; }
.data-table .rank { width: 40px; color: var(--text-secondary); }
.data-table tr:target td, .data-table tr.is-target td { background: var(--target-bg); }
.table-more { margin-top: var(--space-3); }

.button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-raised); font-size: var(--text-small); cursor: pointer; text-decoration: none; color: var(--text-primary);
}

/* Matrix */

.matrix-wrap { overflow-x: auto; }
.matrix { border-collapse: separate; border-spacing: 2px; font-size: var(--text-caption); }
.matrix th { padding: var(--space-1) var(--space-2); font-weight: 600; color: var(--text-primary); }
.matrix thead th { vertical-align: bottom; text-align: center; min-width: 64px; max-width: 80px; line-height: 1.25; }
.matrix tbody th { text-align: left; white-space: nowrap; position: sticky; left: 0; background: var(--surface-page); }
.matrix td { min-width: 64px; height: 36px; text-align: center; border-radius: 4px; font-variant-numeric: tabular-nums; }
.scale-legend { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-caption); color: var(--text-secondary); }
.scale-legend { flex-wrap: wrap; }
.scale-steps { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.scale-steps li { min-width: 40px; padding: 2px 4px; border-radius: 4px; text-align: center; font-size: var(--text-caption); }

/* Facts, lists and text */

.fact-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--text-small); }
.fact-list dt { color: var(--text-secondary); }
.fact-list dd { margin: 0; font-weight: 600; }

.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--text-small); }
.plain-list .meta { display: block; font-size: var(--text-caption); color: var(--text-secondary); }

.text-column { max-width: 72ch; }
.text-column h2 { margin: var(--space-6) 0 var(--space-2); font: 600 var(--text-title)/1.3 var(--font-heading); color: var(--strong); }
.text-column p { margin: 0 0 var(--space-3); }
.toc { margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); }
.toc ol { margin: 0; padding-left: var(--space-5); font-size: var(--text-small); columns: 2; }

/* Feedback */

.empty-state, .error-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius); font-size: var(--text-small); }
.error-state { border-style: solid; border-color: var(--error-edge); background: var(--error-bg); color: var(--error-ink); }
.data-notice { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--notice-edge); border-radius: 4px; background: var(--notice-bg); font-size: var(--text-small); color: var(--notice-text); }
.error-page { max-width: 560px; padding: var(--space-6) 0; }
.error-code { margin: 0; font-size: var(--text-figure); font-weight: 600; color: var(--text-secondary); }

.proto-note { margin-top: var(--space-5); font-size: var(--text-caption); color: var(--text-secondary); }

/* Tablet and phone: the sidebar becomes a drawer. */

@media (max-width: 1023px) {
  .page-footer-links, .page-footer-tools { display: none; }
  .sidebar { transform: translateX(-100%); transition: transform var(--motion-base) var(--ease-out); width: min(300px, 85vw); }
  .shell.drawer-open .sidebar { transform: none; }
  .shell.drawer-open .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: color-mix(in srgb, var(--shade-black) 40%, transparent); animation: m-fade var(--motion-base) var(--ease-out); }
  .icon-button.sidebar-close { display: inline-flex; color: var(--ink); }
  .icon-button.menu-button { display: inline-flex; }
  .header-bar, .header-bar.has-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2); }
  .header-bar .section-tabs { order: 3; flex-basis: 100%; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: -10px; }
  .breadcrumbs { padding: var(--space-4) var(--space-4) 0; }
  .content { padding: var(--space-5) var(--space-4); }
  .section-tabs { padding: 0 var(--space-4); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .page-footer { padding: var(--space-4); }
}

@media (max-width: 639px) {
  /* On a phone the breadcrumbs show only the parent page. The page title is the heading. */
  .breadcrumbs li { display: none; }
  .breadcrumbs li:nth-last-child(2), .breadcrumbs li:only-child { display: flex; }
  .breadcrumbs li:nth-last-child(2) .icon { display: none; }
  .kpi-value { font-size: 32px; }
  .toc ol { columns: 1; }
  .hide-phone { display: none; }
}

/* Table of pages: the details of a route open on demand. */
.row-details { margin-top: var(--space-1); font-size: var(--text-caption); color: var(--text-secondary); }
.row-details summary { cursor: pointer; width: max-content; }
.row-details dl { margin: var(--space-2) 0 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); }
.row-details dt { font-weight: 600; }
.row-details dd { margin: 0; }

/* APO-161: the ownership map. */
.mini-empty { font-size: var(--text-caption); color: var(--text-secondary); }
.owner-map { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.owner-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; }
.owner-node { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); position: relative; }
.owner-node::after { content: ''; position: absolute; top: 24px; right: calc(-1 * var(--space-5)); width: var(--space-5); border-top: 2px solid var(--border-strong, var(--border)); }
.owner-row.is-none .owner-node { background: transparent; border-style: dashed; }
.owner-name { margin: 0; font-weight: 600; font-size: var(--text-small); }
.owner-sub, .owner-share { margin: var(--space-1) 0 0; font-size: var(--text-caption); color: var(--text-secondary); }
.owner-outlets { margin: 0; padding: 0 0 0 var(--space-3); list-style: none; border-left: 2px solid var(--border-strong, var(--border)); display: grid; gap: var(--space-2); }
.owner-outlets li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 2px; font-size: var(--text-small); align-items: baseline; }
.owner-outlets .hbar { grid-column: 1 / -1; min-width: 0; }
.outlet-value { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: var(--text-caption); }
.view-line { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-small); color: var(--text-secondary); }
.view-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-2); }
.record-note { margin: var(--space-4) 0 0; font-size: var(--text-caption); color: var(--text-secondary); }
.matrix td.cell-empty { background: transparent; color: var(--text-secondary); }
.matrix td.cell-own { outline: 2px solid var(--text-primary); outline-offset: -2px; }
.matrix tbody th a { color: inherit; }
@media (max-width: 639px) {
  .owner-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .owner-node::after { display: none; }
}
.view-wrap[data-view="list"] .view-map { display: none; }
.view-wrap[data-view="map"] .view-list { display: none; }
@media (max-width: 639px) {
  .view-controls.hide-phone { display: none; }
  .view-wrap .view-list { display: block !important; }
  .view-wrap .view-map { display: none !important; }
}
.row-sub { display: block; font-size: var(--text-caption); font-weight: 400; color: var(--text-secondary); }
.matrix { width: 100%; }
.matrix thead th { min-width: 100px; overflow-wrap: anywhere; }
.stance-key { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.key-item { display: inline-flex; align-items: center; gap: var(--space-1); }

/* EntityLink. A link to a page that is not built has a dashed underline. The link is 24 px high or more. */
.entity-link { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.entity-link.is-missing { text-decoration-style: dashed; }
.entity-count { color: var(--text-secondary); font-size: var(--text-caption); }

/* Unified header (prototype, ?header=v2). Three layers, the same on every page:
   1. The top bar: the back button (detail pages), the trail of a detail page and the search. It stays on screen.
   2. The page head: the title and the page actions on one row, the tabs under them, then the sub-tabs. It scrolls with the page.
   3. The filters of the tab: on the body, above the cards. No divider line between the layers: only space. */
/* The top bar is three columns: the back button and the trail on the left, the search button in the center, an empty right column of the same width. */
:root[data-header="v2"] .header-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-6); }
:root[data-header="v2"] .header-left { min-width: 0; flex: 1; gap: var(--space-3); }
:root[data-header="v2"] .appbar-title { display: none; }
:root[data-header="v2"] .appbar-trail ol { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-small); }
:root[data-header="v2"] .appbar-trail li { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
:root[data-header="v2"] .appbar-trail a { color: var(--text-secondary); text-decoration: none; }
:root[data-header="v2"] .appbar-trail a:hover { color: var(--ink); text-decoration: underline; }
:root[data-header="v2"] .appbar-trail [aria-current] { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
:root[data-header="v2"] .global-search { justify-content: center; margin: 0; }

:root[data-header="v2"] .content.dash { padding-top: 0; }
:root[data-header="v2"] .page-head { display: flex; flex-direction: column; margin: var(--space-2) 0 var(--space-5); }
:root[data-header="v2"] .page-head-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-5); min-height: 40px; }
:root[data-header="v2"] .page-head-titles { min-width: 0; }
:root[data-header="v2"] .page-head-title { margin: 0; font: 600 26px/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--ink); }
:root[data-header="v2"] .page-head-meta { margin: var(--space-1) 0 0; font-size: var(--text-small); color: var(--text-secondary); }
:root[data-header="v2"] .page-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
:root[data-header="v2"] .page-head-actions .segmented button { min-height: 30px; }
:root[data-header="v2"] .page-head-actions select { min-height: 36px; }
/* Tabs: pills, left-aligned under the title. */
:root[data-header="v2"] .page-tabs { margin-top: var(--space-4); }
:root[data-header="v2"] .page-tabs .section-tabs { padding: 2px 0 6px; background: none; overflow-x: auto; scrollbar-width: none; }
:root[data-header="v2"] .page-tabs .section-tabs ul { justify-content: flex-start; flex-wrap: nowrap; }
/* Sub-tabs: a quieter second level. Text tabs, the current one on a soft fill. No line under them, space before the body. */
:root[data-header="v2"] .page-tabs .sub-tabs { margin-top: var(--space-3); padding: 0; overflow-x: auto; scrollbar-width: none; }
:root[data-header="v2"] .page-tabs .sub-tabs ul { justify-content: flex-start; gap: var(--space-1); width: max-content; min-width: 0; margin: 0; border-bottom: 0; }
:root[data-header="v2"] .page-tabs .sub-tabs a { padding: 5px 12px; margin: 0; border: 0; border-radius: var(--pill, 999px); font-size: max(13px, var(--text-min)); }
:root[data-header="v2"] .page-tabs .sub-tabs a:hover { background: var(--surface-card); }
:root[data-header="v2"] .page-tabs .sub-tabs a[aria-current="page"] { background: var(--surface-card); color: var(--ink); font-weight: 600; }
/* Filters of the tab: one left-aligned row, on the body. */
:root[data-header="v2"] .page-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); }
:root[data-header="v2"] .page-filters .region-pills { justify-content: flex-start; }
:root[data-header="v2"] .page-filters .field-inline { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); color: var(--text-secondary); }
:root[data-header="v2"] .page-filters select, :root[data-header="v2"] .page-filters .search-input { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--pill, 999px); background: var(--surface-raised); font-size: var(--text-small); }
:root[data-header="v2"] .page-filters .case-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

@media (max-width: 1023px) {
  /* Phone: the top bar has the menu, the name of the section and the search button on the right. The search opens over the page. */
  :root[data-header="v2"] .header-bar { position: sticky; grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2); }
  :root[data-header="v2"] .header-left { gap: var(--space-1); }
  :root[data-header="v2"] .appbar-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 17px/1.2 var(--font-heading); color: var(--ink); }
  :root[data-header="v2"] .appbar-trail { display: none; }
  /* The name of the section is in the top bar, so the page head starts with the tabs. The page actions come after the tabs. */
  :root[data-header="v2"] .page-head { margin-top: 0; }
  :root[data-header="v2"] .page-head-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :root[data-header="v2"] .page-head-row { order: 2; min-height: 0; margin-top: var(--space-3); justify-content: flex-start; }
  :root[data-header="v2"] .page-head-row:not(:has(.page-head-actions, .page-head-meta)) { display: none; }
  :root[data-header="v2"] .page-head-titles:not(:has(.page-head-meta)) { display: none; }
  :root[data-header="v2"] .page-head-actions { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  :root[data-header="v2"] .page-head-actions > * { flex: none; }
  :root[data-header="v2"] .page-head-actions .dr-days { display: none; }
  :root[data-header="v2"] .page-tabs { order: 1; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
  :root[data-header="v2"] .page-tabs .section-tabs, :root[data-header="v2"] .page-tabs .sub-tabs { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); padding-left: var(--space-4); padding-right: var(--space-4); }
  :root[data-header="v2"] .page-filters { order: 3; margin-top: var(--space-4); }
  :root[data-header="v2"] .page-filters .region-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
  :root[data-header="v2"] .page-filters .region-pills button { flex: none; }
}

/* Style: editorial, from the slash of the logo. The tabs are in the small capitals of the card titles, the current one starts with "/".
   No visible title: the tabs and the page actions share the first row, the sub-tabs and the filters follow. The h1 stays for screen readers. */
@media (min-width: 1024px) {
  :root[data-header="v2"] .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-5); }
  :root[data-header="v2"] .page-head-row, :root[data-header="v2"] .page-tabs { display: contents; }
  :root[data-header="v2"] .page-head-titles { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :root[data-header="v2"] .page-head-actions { grid-column: 2; grid-row: 1; }
  :root[data-header="v2"] .page-tabs .section-tabs { grid-column: 1; grid-row: 1; }
  :root[data-header="v2"] .page-tabs .sub-tabs { grid-column: 1 / -1; grid-row: 2; }
  :root[data-header="v2"] .page-head .page-filters { grid-column: 1 / -1; grid-row: 3; }
  :root[data-header="v2"] .page-head .dash-error { grid-column: 1 / -1; }
  :root[data-header="v2"] .page-head:not(:has(.page-tabs)) .page-head-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
:root[data-header="v2"] .header-bar { background: var(--surface-page); backdrop-filter: none; }
:root[data-header="v2"] .page-head { margin-top: var(--space-3); }
:root[data-header="v2"] .page-tabs .section-tabs { padding: 0; }
:root[data-header="v2"] .page-tabs .section-tabs ul { gap: var(--space-5); }
:root[data-header="v2"] .page-tabs .section-tabs a,
:root[data-header="v2"] .page-tabs .section-tabs a:hover { padding: 6px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
:root[data-header="v2"] .page-tabs .section-tabs a:hover { color: var(--ink); }
:root[data-header="v2"] .page-tabs .section-tabs a[aria-current] { color: var(--ink); box-shadow: none; }
:root[data-header="v2"] .page-tabs .section-tabs a[aria-current]::before { content: "/ "; }
:root[data-header="v2"] .page-tabs .sub-tabs { margin-top: var(--space-3); }
:root[data-header="v2"] .page-tabs .sub-tabs ul { gap: var(--space-4); }
:root[data-header="v2"] .page-tabs .sub-tabs a, :root[data-header="v2"] .page-tabs .sub-tabs a:hover { padding: 4px 0; border-radius: 0; background: none; font-size: var(--text-small); }
:root[data-header="v2"] .page-tabs .sub-tabs a[aria-current="page"] { background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* v2: smaller controls in the head. 32 px buttons and fields, 36 px search, 18 px icons. */
:root[data-header="v2"] .back-button { width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm, 8px); background: transparent; }
:root[data-header="v2"] .back-button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* The trail of a detail page: the parent, a slash, the page. The slash is the one of the active tab. */
/* The trail has the type of the tabs, and starts where the tabs start: the arrow is flush with the left edge of the page content. */
:root[data-header="v2"] .appbar-trail ol { font-size: max(12px, var(--text-min)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
:root[data-header="v2"] .appbar-trail [aria-current] { font-weight: 700; }
@media (min-width: 1024px) {
  :root[data-header="v2"] .header-bar { padding-left: var(--space-5, 24px); padding-right: var(--space-5, 24px); }
  :root[data-header="v2"] .header-left .back-button { margin-left: -10px; }
}
:root[data-header="v2"] .appbar-trail .icon { display: none; }
:root[data-header="v2"] .appbar-trail li + li::before { content: "/"; color: var(--text-secondary); margin-right: 2px; }

/* The primary button is the ink fill. The log in and sign up buttons are small pills, like the filters and tabs of the page head. */
.button-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 600; }
.button-primary:hover { background: color-mix(in srgb, var(--ink) 85%, var(--accent)); border-color: transparent; }
.auth-login, .auth-register { min-height: 32px; padding: 0 var(--space-4); border-radius: var(--pill, 999px); font-size: max(13px, var(--text-min)); font-weight: 600; justify-content: center; white-space: nowrap; }
.auth-login { background: transparent; color: var(--ink); }

/* The drawer of log in and sign up: from the right, over a scrim. The type and the controls use the sizes and the styles of the rest of the app:
   caption (12 px) uppercase labels like the old login form, 40 px fields with the 8 px radius, text-small (14 px) for text and buttons. */
.auth-overlay { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; background: var(--scrim); opacity: 0; transition: opacity var(--motion-base) var(--ease-out); }
.auth-overlay.is-open { opacity: 1; }
.auth-drawer {
  position: relative; display: flex; flex-direction: column; width: min(420px, 100%); height: 100%; overflow: hidden; background: var(--surface-raised); border-left: 1px solid var(--border);
  box-shadow: -24px 0 48px -28px var(--scrim); transform: translateX(100%); transition: transform var(--motion-base) var(--ease-out);
}
.auth-overlay.is-open .auth-drawer { transform: none; }
.auth-head { display: flex; flex: none; justify-content: flex-end; padding: var(--space-3) var(--space-3) 0; }
.auth-close { color: var(--ink); }
.auth-main { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-5); overflow-y: auto; overscroll-behavior: contain; }
.auth-title { margin: 0; font: 600 var(--text-title)/1.3 var(--font-heading); color: var(--ink); }
.auth-text { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--text-secondary); }
.auth-form { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); width: 100%; margin: 0; text-align: left; }
.auth-form[hidden], .auth-drawer [hidden] { display: none; }
.auth-progress { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.auth-progress-label { margin: 0; font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.auth-progress-bar { display: flex; gap: var(--space-1); }
.auth-progress-bar span { flex: 1; height: 3px; border-radius: 2px; background: var(--border); transition: background var(--motion-base) var(--ease-out); }
.auth-progress-bar span.is-done { background: var(--ink); }
.auth-step { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; animation: auth-step-in var(--motion-base) var(--ease-out); }
.auth-step[hidden] { display: none; }
@keyframes auth-step-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.auth-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.auth-field label, .field-label { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.field-optional { font-weight: 400; letter-spacing: 0; text-transform: none; }
.input { width: 100%; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: 8px; background: var(--surface-page); color: var(--ink); font: var(--text-small) var(--font-text); letter-spacing: 0; text-transform: none; }
.input:focus-visible { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--error-text); }
.field-control { position: relative; }
.field-control .input { padding-right: 44px; }
.field-eye { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); color: var(--text-secondary); }
.select-control .input { appearance: none; cursor: pointer; }
.select-control > .icon { position: absolute; top: 50%; right: var(--space-3); width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
.field-hint, .field-error { margin: 0; font-size: var(--text-caption); line-height: 1.4; }
.field-hint { color: var(--text-secondary); }
.field-error { color: var(--error-text); }
.reason-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reason-chip { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--pill, 999px); background: var(--surface-page); color: var(--ink); font: var(--text-small) var(--font-text); cursor: pointer; }
.reason-chip:hover { border-color: var(--ink); }
.reason-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.reason-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised)); }
.auth-checks { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-field label.auth-check { display: flex; align-items: flex-start; gap: var(--space-2); font: var(--text-small)/1.45 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.auth-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.terms-text { text-decoration: underline; }
.login-error { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--error-edge); border-radius: 8px; background: var(--error-bg); color: var(--error-text); font-size: var(--text-small); }
.auth-actions { position: sticky; bottom: 0; display: flex; gap: var(--space-2); margin-top: auto; padding: var(--space-3) 0 0; background: var(--surface-raised); }
.auth-back { justify-content: center; min-height: 40px; padding: 0 var(--space-5); border-radius: var(--pill, 999px); }
.auth-back[hidden] { display: none; }
.auth-submit { justify-content: center; flex: 1; min-height: 40px; border-radius: var(--pill, 999px); }
.auth-foot { margin: 0; padding: var(--space-4) 0 var(--space-5); text-align: center; font-size: var(--text-small); color: var(--text-secondary); }
.auth-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-3); padding-bottom: var(--space-5); }
.auth-done .auth-submit { flex: none; width: 100%; }
.auth-confirm { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); text-align: center; background: var(--surface-raised); }
.auth-confirm[hidden] { display: none; }
.auth-confirm-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.auth-confirm-actions .button { min-height: 40px; padding: 0 var(--space-5); border-radius: var(--pill, 999px); justify-content: center; }
.auth-user { font-size: max(13px, var(--text-min)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.link-button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .auth-drawer { transform: none; transition: none; } .auth-step { animation: none; } }

/* The menu of the user: the icon on a wide screen, with the profile and "Αποσύνδεση". */
.user-menu { position: relative; }
.user-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-page); color: var(--ink); cursor: pointer; }
.user-button:hover, .user-button[aria-expanded="true"] { border-color: var(--ink); }
.user-button .icon { width: 22px; height: 22px; }
.user-menu-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; display: flex; flex-direction: column; min-width: 200px; padding: var(--space-2); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--shade) 40%, transparent); }
.user-menu-list[hidden] { display: none; }
.user-menu-name { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.user-menu-item { display: block; width: 100%; padding: 8px var(--space-3); border: 0; border-radius: 6px; background: none; font: var(--text-small) var(--font-text); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.user-menu-item:hover, .user-menu-item:focus-visible { background: var(--sidebar-hover-bg); }

/* The lock of Αναλύσεις: the page head stays, and one wide panel takes the place of the page, with the card in the middle (like fundamenta.gr). */
.content.is-gated { max-width: none; }
.gate {
  display: flex; align-items: center; justify-content: center; min-height: clamp(420px, 62vh, 620px); padding: var(--space-6) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised);
}
.gate-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; max-width: 440px; padding: var(--space-6) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--shade) 40%, transparent); text-align: center; }
.gate-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised)); color: var(--accent); }
.gate-icon .icon { width: 28px; height: 28px; }
.gate-title { margin: var(--space-2) 0 0; font: 600 var(--text-title)/1.3 var(--font-heading); color: var(--ink); }
.gate-text { margin: 0; max-width: 34ch; font-size: var(--text-small); line-height: 1.5; color: var(--text-secondary); }
.gate-login { min-height: 40px; margin-top: var(--space-2); padding: 0 var(--space-5); border-radius: var(--pill, 999px); }
.gate-register { margin: 0; font-size: var(--text-small); color: var(--text-secondary); }
.gate-register a { color: var(--ink); font-weight: 600; }

/* Top navbar (wide screens). Sticky, on the sidebar surface, with one line under it. The current section has the ink line of the old sidebar, under its label. */
:root { --navbar-height: 64px; }
.header-logo, .header-nav, .header-actions, .trail-bar { display: none; }
.sidebar .auth-links { display: flex; gap: var(--space-2); padding: 0 var(--space-3) var(--space-4); }
.sidebar .auth-links a { flex: 1; }
.sidebar .auth-links a, .sidebar .auth-links button { min-height: 40px; font-size: var(--text-small); }
.sidebar .auth-user { align-self: center; flex: none; }
.page-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.page-footer-text { margin-right: auto; }
.page-footer-links { display: flex; gap: var(--space-4); }
.page-footer-links .nav-link { padding: 4px 0; font-size: var(--text-small); color: var(--text-secondary); }
.page-footer-links .nav-link:hover { background: none; color: var(--ink); text-decoration: underline; }
.page-footer-links .nav-link[aria-current="page"] { box-shadow: none; border-radius: 0; color: var(--ink); }
.page-footer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); width: 100%; padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.page-footer-tools .font-switch, .page-footer-tools .theme-switch { flex-direction: row; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
@media (min-width: 1024px) {
  :root { --navbar-height: 56px; }
  .sidebar { display: none; }
  :root[data-header="v2"] .header-bar {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-4);
    height: var(--navbar-height); min-height: var(--navbar-height); padding: 0 var(--space-5);
    background: var(--surface-sidebar); border-bottom: 1px solid var(--border);
  }
  :root[data-header="v2"] .header-left { display: none; }
  .header-logo { display: inline-flex; flex: none; }
  .header-logo .logo-img { width: 96px; }
  .header-nav { display: block; align-self: stretch; flex: 1; min-width: 0; margin-left: var(--space-3); }
  .header-nav .nav-list { display: flex; gap: var(--space-1); height: 100%; }
  .header-nav li { display: flex; }
  .header-nav .nav-link {
    position: relative; display: flex; align-items: center; padding: 0 var(--space-3); border-radius: 0;
    font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap;
  }
  .header-nav .nav-link:hover { background: none; color: var(--ink); }
  /* The current section starts with "/", like the current tab of a page. */
  .header-nav .nav-link[aria-current="page"] { box-shadow: none; border-radius: 0; color: var(--ink); font-weight: 700; }
  .header-nav .nav-link[aria-current="page"]::before { content: "/ "; white-space: pre; }
  :root[data-header="v2"] .global-search { flex: none; margin: 0; }
  .search-button { height: 32px; min-width: 232px; padding: 0 6px 0 12px; border-color: var(--border); border-radius: 8px; background: var(--surface-page); }
  .search-button:hover, .search-button:focus-visible { border-color: var(--ink); color: var(--ink); background: var(--surface-page); }
  .search-button-label { flex: 1; padding-right: 0; text-align: left; color: var(--text-secondary); }
  .global-search-key { line-height: 16px; }
  .header-actions { display: flex; flex: none; align-items: center; gap: var(--space-3); }
  .header-actions .lang-switch { border-radius: var(--pill, 999px); }
  .header-actions .lang-switch button { min-width: 30px; min-height: 26px; font-size: var(--text-caption); color: var(--text-secondary); }
  .header-actions .lang-switch button[aria-pressed="true"] { color: var(--on-ink); }
  .header-actions .auth-links { display: flex; align-items: center; gap: var(--space-2); }
  /* A detail page: the back button and the trail, in a row under the navbar. */
  .trail-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5) 0; }
  .trail-bar .back-button { margin-left: -10px; }
  .page-footer-tools { width: auto; padding: 0; border: 0; }
  .page-footer { padding: var(--space-4) var(--space-5); }
  .content { padding-left: var(--space-5); padding-right: var(--space-5); }
  .dash-bar { top: var(--navbar-height); }
}
/* The pages of a section: a sidebar under the navbar (like fundamenta.gr). The label is the section, then its tabs. The sub-tabs of a tab are tabs in the page body. */
.page-body { display: flex; flex: 1; min-width: 0; }
.page-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.section-nav { display: none; }
.section-nav-icon, .page-head-question { display: none; }
@media (min-width: 1024px) {
  .section-nav { display: block; flex: none; width: 232px; background: var(--surface-page); }
  .section-nav-inner { position: sticky; top: var(--navbar-height); max-height: calc(100vh / var(--page-zoom) - var(--navbar-height)); overflow-y: auto; padding: var(--space-5) var(--space-3) var(--space-5) calc(var(--space-6) + var(--space-4)); }
  .section-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .section-nav-link { display: block; padding: 9px var(--space-3); border-radius: 6px; font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; color: var(--text-secondary); text-decoration: none; }
  .section-nav-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-active-text); }
  /* The current tab starts with "/", like the tabs of the page head. */
  .section-nav .section-nav-link[aria-current] { color: var(--ink); }
  .section-nav .section-nav-link[aria-current]::before { content: "/ "; white-space: pre; }
  /* The sub-tabs of the current tab: under it, indented. The tab keeps its dark color, and the "/" marks the sub-tab. */
  .section-nav-sub { list-style: none; margin: 2px 0 4px; padding: 0 0 0 var(--space-4); display: grid; gap: 2px; }
  .section-nav .section-nav-link.is-parent::before { content: none; }
  :root[data-header="v2"] .page-tabs .sub-tabs { display: none; }
  /* The tabs and the sub-tabs are in the sidebar, so the page head keeps the actions and the filters. */
  :root[data-header="v2"] .page-tabs .section-tabs { display: none; }
  :root[data-header="v2"] .page-head:not(:has(.page-head-actions, .page-filters, .dash-error)) { display: block; margin: 0; }
}
/* A narrower desktop: the search is a button with the icon and the key. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .search-button { min-width: 0; }
  .search-button-label { display: none; }
  .header-nav .nav-link { padding: 0 10px; }
  .header-actions { gap: var(--space-2); }
}
@media (max-width: 1023px) {
  :root { --navbar-height: 56px; }
}
:root[data-header="v2"] .page-head .dr-trigger { min-height: 32px; padding: 0 10px 0 8px; gap: 6px; font-size: max(13px, var(--text-min)); }
:root[data-header="v2"] .page-head .dr-trigger .dr-icon { width: 16px; height: 16px; }
:root[data-header="v2"] .page-head .set-select select, :root[data-header="v2"] .page-head-actions select { min-height: 32px; font-size: max(13px, var(--text-min)); }
:root[data-header="v2"] .page-head-actions .segmented button { min-height: 26px; padding: 0 12px; font-size: max(13px, var(--text-min)); }
:root[data-header="v2"] .page-filters select, :root[data-header="v2"] .page-filters .search-input { min-height: 32px; font-size: max(13px, var(--text-min)); }
:root[data-header="v2"] .page-filters .button { min-height: 32px; font-size: max(13px, var(--text-min)); }
:root[data-header="v2"] .page-head.is-empty { margin: 0 0 var(--space-4); }

/* Motion (#56). The tokens are in tokens.css and assets/motion.js plays the rest: the page entrance, the fade of the cards
   that a period or a filter changes, the thumb of a segmented control, the "/" of the current tab, the first view of the charts.
   Only transform and opacity move. Reduced motion keeps the fades and drops the movement. */

@keyframes m-fade { from { opacity: 0; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(var(--motion-distance)); } }
@keyframes m-drop { from { opacity: 0; transform: translateY(calc(-0.5 * var(--motion-distance))); } }
@keyframes m-grow-x { from { transform: scaleX(0); } }
@keyframes m-grow-y { from { transform: scaleY(0); } }
@keyframes m-pop { from { opacity: 0; transform: scale(0); } }
@keyframes m-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Loading. The page is empty until its scripts run: a skeleton of the shell, a row of tiles, a chart card and a table shows in its place.
   It appears after a short delay, so a fast load never flashes it. */
.skeleton { position: relative; overflow: hidden; height: 1em; border-radius: 4px; background: var(--skeleton); }
.skeleton::after, #app:empty::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-raised) 60%, transparent), transparent);
  animation: m-shimmer 1.4s var(--ease-in-out) infinite;
}
#app:empty {
  position: relative; min-height: calc(100vh / var(--page-zoom)); overflow: hidden;
  background:
    linear-gradient(var(--border), var(--border)) 0 55px / 100% 1px no-repeat,
    linear-gradient(var(--skeleton), var(--skeleton)) 24px 16px / 96px 24px no-repeat,
    repeating-linear-gradient(90deg, var(--skeleton-2) 0 64px, transparent 0 84px) 180px 20px / 460px 16px no-repeat,
    linear-gradient(var(--surface-sidebar), var(--surface-sidebar)) 0 0 / 100% 55px no-repeat;
  animation: m-fade var(--motion-slow) 150ms both;
}
#app:empty::before {
  content: ""; position: absolute; top: 96px; left: var(--space-6); right: var(--space-6); max-width: 1176px; height: 860px;
  background:
    linear-gradient(var(--skeleton), var(--skeleton)) 0 0 / min(380px, 60%) 28px no-repeat,
    linear-gradient(var(--skeleton-2), var(--skeleton-2)) 0 44px / min(260px, 40%) 14px no-repeat,
    repeating-linear-gradient(90deg, var(--surface-raised) 0 calc(25% - 16px), transparent 0 25%) 0 96px / calc(100% + 16px) 112px no-repeat,
    linear-gradient(var(--skeleton), var(--skeleton)) 24px 256px / min(300px, 50%) 18px no-repeat,
    repeating-linear-gradient(90deg, var(--skeleton) 0 12px, transparent 0 20px) 24px 312px / calc(100% - 48px) 200px no-repeat,
    linear-gradient(var(--surface-raised), var(--surface-raised)) 0 232px / 100% 312px no-repeat,
    repeating-linear-gradient(180deg, var(--skeleton-2) 0 14px, transparent 0 40px) 24px 592px / calc(100% - 48px) 228px no-repeat,
    linear-gradient(var(--surface-raised), var(--surface-raised)) 0 568px / 100% 280px no-repeat;
}
@media (max-width: 1023px) {
  #app:empty { background: none; }
  #app:empty::before { left: var(--space-4); right: var(--space-4); top: 72px; }
}
@media (max-width: 639px) {
  #app:empty::before { background-size: min(380px, 60%) 28px, min(260px, 40%) 14px, calc(200% + 32px) 112px, min(300px, 50%) 18px, calc(100% - 48px) 200px, 100% 312px, calc(100% - 48px) 228px, 100% 280px; }
}
/* A chart draws in the next frame. Its place keeps the height of the chart until then. */
.chart-holder:empty { height: 220px; border-radius: var(--radius); background: var(--skeleton-3); }

/* Press feedback on every button. A row of a table shows the hover. */
.button, .segmented button, .icon-button, .back-button, .search-button, .info-btn, .lang-switch button, .mme-chip, .dr-trigger, .dr-preset, .report-tabs button {
  transition: transform var(--motion-fast) var(--ease-out);
}
:is(.button, .segmented button, .icon-button, .back-button, .search-button, .info-btn, .lang-switch button, .mme-chip, .dr-trigger, .dr-preset, .report-tabs button):active:not(:disabled) { transform: scale(0.96); }
.data-table tbody tr:not(:target, .is-target):hover td { background: color-mix(in srgb, var(--shade) 3.5%, transparent); }

/* Pop-ups fade in: the chart tooltip, an open accordion. The search panel grows from its button (shell.js). */
.tooltip:not([hidden]) { animation: m-fade var(--motion-fast) var(--ease-out); }
details[open] > :not(summary) { animation: m-rise var(--motion-base) var(--ease-out); }

/* The thumb of a segmented control slides from the old choice to the new one (motion.js). The new choice shows its pill when the thumb lands. */
.segmented { position: relative; isolation: isolate; }
.seg-thumb { position: absolute; z-index: -1; pointer-events: none; transform-origin: 0 0; }
.segmented button.is-landing { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: var(--text-primary); }
/* The "/" of the current tab glides from the tab of the last page (motion.js). */
.section-tabs, .section-nav { position: relative; }
.tab-glide { position: absolute; pointer-events: none; white-space: pre; }
.section-tabs a.is-landing::before, .section-nav a.is-landing::before { opacity: 0; }

/* A move to another page (shell.js sets data-vt): the rail and the top bar stay still, and the new page fades in over the old one.
   The old page stays opaque under it, so the dark page never shows through between the two (a flash). A browser without these transitions changes the page at once. */
@view-transition { navigation: auto; }
.header-bar { view-transition-name: navbar; }
.rail { view-transition-name: rail; }
.page-main { view-transition-name: page; background: var(--surface-page); }
::view-transition-group(navbar), ::view-transition-group(rail) { z-index: 1; animation: none; }
::view-transition-old(navbar), ::view-transition-old(rail) { display: none; }
::view-transition-new(navbar), ::view-transition-new(rail) { animation: none; opacity: 1; }
::view-transition-group(page) { animation: none; }
::view-transition-old(page), ::view-transition-new(page) { inline-size: auto; block-size: auto; }
::view-transition-old(page) { animation: none; opacity: 1; translate: 0 var(--vt-old-y, 0px); }
::view-transition-new(page) { animation: vt-enter var(--motion-fast) var(--ease-out) both; mix-blend-mode: normal; }
@keyframes vt-enter { from { opacity: 0; } }

/* The first view of a chart (motion.js): bars and lines grow, points pop, numbers count up.
   Before its view, a chart below the fold waits with its marks hidden. .m-intro covers the first frame, before motion.js sorts the cards. */
:is(.dcard, .kpi-tile) :is(svg.chart .bar-col, svg.chart .line-series, svg.spark path) { transform-box: fill-box; }
svg.chart .bar-col { transform-origin: 50% 100%; }
:is(svg.chart .line-series, svg.spark path) { transform-origin: 0 50%; }
:is(svg.chart .pt, svg.chart .line-dot) { transform-box: fill-box; transform-origin: 50% 50%; }
:is(svg.chart .slice, svg.chart .ring-arc) { transform-box: view-box; transform-origin: 50% 50%; }
:is(.hbar-fill, .stacked) { transform-origin: 0 50%; }
.dbar-seg { transform-origin: 50% 50%; }
.dbar-seg.is-left { transform-origin: 100% 50%; }
.dbar-seg.is-right { transform-origin: 0 50%; }

.m-intro :is(.dcard, .kpi-tile):not(.m-play, .m-done) :is(svg.chart, svg.spark),
.m-wait :is(svg.chart, svg.spark) { opacity: 0; }
.m-intro :is(.dcard, .kpi-tile):not(.m-play, .m-done) :is(.hbar-fill, .stacked, .dbar-seg),
.m-wait :is(.hbar-fill, .stacked, .dbar-seg) { transform: scaleX(0); }
.m-intro :is(.dcard, .kpi-tile):not(.m-play, .m-done) :is(.kpi-value, .dstat-value),
.m-wait :is(.kpi-value, .dstat-value), .is-counting { -webkit-text-fill-color: transparent; }
.m-intro .mme-rank:not(.m-play, .m-done) tbody tr, .m-wait.mme-rank tbody tr { opacity: 0; }

.m-play :is(svg.chart, svg.spark) { animation: m-fade var(--motion-base) var(--ease-out) var(--m-delay, 0ms) both; }
.m-play svg.chart .bar-col { animation: m-grow-y var(--motion-chart) var(--ease-out) calc(var(--m-delay, 0ms) + var(--m-i, 0) * 8ms) both; }
.m-play :is(svg.chart .line-series, svg.spark path) { animation: m-grow-x var(--motion-chart) var(--ease-in-out) var(--m-delay, 0ms) both; }
.m-play :is(svg.chart .pt, svg.chart .line-dot) { animation: m-pop var(--motion-slow) var(--ease-spring) calc(var(--m-delay, 0ms) + 200ms + var(--m-i, 0) * 6ms) both; }
.m-play :is(svg.chart .slice, svg.chart .ring-arc) { animation: m-pop var(--motion-chart) var(--ease-out) calc(var(--m-delay, 0ms) + var(--m-i, 0) * 30ms) both; }
.m-play :is(.hbar-fill, .stacked, .dbar-seg) { animation: m-grow-x var(--motion-chart) var(--ease-out) var(--m-delay, 0ms) both; }
.m-play.mme-rank tbody tr { animation: m-rise var(--motion-slow) var(--ease-out) calc(var(--m-delay, 0ms) + var(--m-i, 0) * 35ms) both; }
.count-ghost { position: absolute; z-index: 1; margin: 0; pointer-events: none; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .skeleton::after, #app:empty::after { animation: none; }
  :is(.button, .segmented button, .icon-button, .back-button, .search-button, .info-btn, .lang-switch button, .mme-chip, .dr-trigger, .dr-preset, .report-tabs button):active:not(:disabled) { transform: none; }
}

/* The color tokens on pages.html (#2): one row of swatches for each layer. */
.page-tokens h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-small); }
.token-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.token-item { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-caption); }
.token-item code { overflow-wrap: anywhere; color: var(--text-secondary); }
.token-chip { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--text-caption); font-weight: 600; }

/* The carbon theme: a console look. Sentence case, no slashes, rounded rectangles instead of pills, an edge on every card, a sidebar with one filled item. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) { --pill: 6px; --radius-roomy: 10px; --radius: 10px; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) body { font-weight: 400; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) :is(.kpi-tile, .dcard):not(:has(.kpi-tile, .dcard)) { background: var(--surface-raised); border-color: var(--card-edge); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) :is(.kpi-tile, .dcard):is(:hover, :focus-within):not(:has(.kpi-tile, .dcard)) { border-color: var(--rule); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dcard { --card-pad: var(--space-5); --card-gap: var(--space-4); }
/* A card inside a card is smaller and has the color of the page. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dcard .dcard { --card-pad: var(--space-4); --card-radius: 8px; background: var(--surface-page); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dash-grid, :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .card-col { gap: var(--space-4); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dcard-title { font-size: var(--text-title); line-height: 28px; font-weight: 500; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dcard-title::before { content: none; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-tabs a[aria-current], :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .sub-tabs a[aria-current] { border-color: transparent; border-bottom-color: var(--accent); border-radius: 0; box-shadow: none; color: var(--accent); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .home-hero .home-hero-stats { background: none; border-color: transparent; box-shadow: none; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"])[data-header="v2"] .page-tabs .section-tabs a { padding: 8px 2px; margin-right: var(--space-3); border-width: 0 0 2px; border-radius: 0; font-size: var(--text-small); font-weight: 500; letter-spacing: 0; text-transform: none; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"])[data-header="v2"] .page-tabs .section-tabs a[aria-current]::before { content: none; }
@media (min-width: 1024px) {
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) { --navbar-height: 52px; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-logo { margin-right: auto; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .global-search { order: 1; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-nav { order: 2; flex: none; margin-left: 0; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-actions { order: 3; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-nav .nav-link { padding: 0 10px; font-size: var(--text-small); font-weight: 500; letter-spacing: 0; text-transform: none; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-nav .nav-link { color: var(--text-primary); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-nav .nav-link:hover { color: var(--ink); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-nav .nav-link[aria-current="page"] { font-weight: 500; color: var(--ink); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-nav .nav-link[aria-current="page"]::before { content: none; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .search-button { background: var(--surface-card); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav { width: 216px; border-right: 1px solid var(--border); background: var(--surface-sidebar); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-inner { padding: var(--space-4) var(--space-2); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-inner::before { content: attr(data-label); display: block; padding: 0 var(--space-3) var(--space-3); font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-list { gap: 4px; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-link { padding: 8px var(--space-3); border-radius: 6px; font-size: var(--text-small); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav .section-nav-link[aria-current]::before { content: none; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav .section-nav-link[aria-current]:not(.is-parent) { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-sub { padding-left: var(--space-3); }
}

/* The carbon theme, the default: the parts that make it a console and not only a dark page. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .content.dash:not(.is-home) { width: 100%; max-width: 1400px; margin-inline: auto; }
/* A stat card: the label, a large number with its small picture on the right, and the short line with the change under them. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat, :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat.dstat-compact { display: flex; flex-direction: column; gap: var(--space-2); padding: 20px; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat-label { font-family: var(--font-mono); font-size: var(--text-caption); line-height: 18px; font-weight: 400; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-secondary); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat .dstat-row, :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat-compact .dstat-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat .dstat-value, :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat-compact .dstat-value { font-size: var(--text-heading); font-weight: 500; line-height: 32px; letter-spacing: -0.7px; }
/* The picture sits on the right of the number, or under it in a narrow card. The short line is last. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat .dstat-row > :nth-child(3), :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat-compact .dstat-row > :nth-child(3) { order: 1; margin-left: auto; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat .dstat-sub, :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat-compact .dstat-sub { order: 2; flex-basis: 100%; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .delta.is-up { color: var(--emph-more); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .delta.is-down { color: var(--emph-less); }
/* The accent is for the interface, so the data of a small picture and of the wave of the home page has the color of the series. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .spark .spark-range { stroke: var(--series-1); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .home-hero-wave-fill { fill: color-mix(in srgb, var(--series-1) 7%, transparent); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .home-hero-wave-line { stroke: color-mix(in srgb, var(--series-1) 40%, transparent); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .home-hero { background: var(--surface-page); }
/* Links in tables are quiet: no line until the mouse is on them. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .minimal :is(.data-table a, .rows a, .entity-link) { text-decoration: none; color: var(--ink); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .minimal :is(.data-table a, .rows a, .entity-link):hover { color: var(--accent); }
/* The title card of a detail page has the same edge as any card, and its label has no slash. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .entity-grid .hero, :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .entity-grid .hero:is(:hover, :focus-within) { border-top: 1px solid var(--card-edge); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .hero-kicker::before { content: none; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dcard a:not(.button, .chip, .dcard-link) { color: var(--ink); text-decoration-color: var(--rule); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dcard a:not(.button, .chip, .dcard-link):hover { color: var(--accent); text-decoration-color: currentColor; }
/* Manrope is wider than the other fonts, so the numbers of a dense matrix are a little tighter. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dash .matrix-turned td { font-size: var(--text-caption); letter-spacing: -0.03em; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .global-search-kind > span:first-child::before { content: none; }
@media (min-width: 1024px) {
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-link { display: flex; align-items: center; gap: 10px; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-icon { display: block; color: var(--text-secondary); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav .section-nav-link[aria-current]:not(.is-parent) .section-nav-icon { color: var(--accent); }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-sub { padding-left: 26px; }
  /* The title and the question of the page on the left, the page actions on the right. */
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"])[data-header="v2"] .page-head.has-page-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-5); margin: var(--space-5) 0; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"])[data-header="v2"] .page-head.has-page-title .page-head-titles { position: static; width: auto; height: auto; overflow: visible; clip: auto; grid-column: 1; grid-row: 1; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"])[data-header="v2"] .page-head.has-page-title .page-head-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: var(--text-heading); line-height: 32px; font-weight: 500; letter-spacing: -0.7px; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"])[data-header="v2"] .page-head.has-page-title .page-head-actions { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"])[data-header="v2"] .page-head.has-page-title:not(:has(.page-head-actions)) .page-filters { grid-column: 2; grid-row: 1; margin-top: 0; justify-content: flex-end; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .page-head-question { display: block; margin: var(--space-1) 0 0; font-size: var(--text-body); line-height: 24px; color: var(--text-primary); }
}

/* The type of carbon, measured on the Apotypos app: small and dense, Inter for text, monospace for the numbers of a table.
   Its sizes under 12 px are 12 px here (C13). The card boxes above do not change. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) { --text-small: max(13px, var(--text-min)); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dcard-title { font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: -0.28px; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) :is(.dcard-sub, .dstat-sub) { font-size: var(--text-caption); line-height: 18px; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat-label { font-family: var(--font-text); font-size: var(--text-caption); line-height: 18px; font-weight: 400; letter-spacing: 0.42px; text-transform: uppercase; color: var(--text-secondary); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat .dstat-value, :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dstat-compact .dstat-value { font-size: 30px; line-height: 30px; font-weight: 600; letter-spacing: -0.75px; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .kpi-value { font-weight: 600; letter-spacing: -0.75px; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .data-table { font-size: var(--text-caption); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .data-table th { font-weight: 500; }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .data-table td.num, :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .agenda-num { font-family: var(--font-mono); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) :is(.segmented button, .chip, .search-button) { font-size: var(--text-caption); }
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .agenda-legend { font-size: max(12.5px, var(--text-min)); line-height: 18.75px; }
@media (min-width: 1024px) {
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-nav .nav-link { font-size: var(--text-small); line-height: 19.5px; font-weight: 400; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .header-nav .nav-link[aria-current="page"] { font-weight: 600; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-link { font-size: var(--text-small); line-height: 19.5px; font-weight: 400; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav .section-nav-link[aria-current]:not(.is-parent) { font-weight: 500; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .section-nav-inner::before { font-family: var(--font-text); font-size: var(--text-caption); font-weight: 600; letter-spacing: 1.33px; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"])[data-header="v2"] .page-head.has-page-title .page-head-title { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.6px; }
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .page-head-question { font-size: var(--text-small); line-height: 19.5px; }
}
@media (max-width: 719px) {
  :root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) .dcard { --card-pad: var(--space-4); }
}

/* The default carbon: the white content area has a light card shadow, and the current page of the sidebar is a white pill. */
:root:is([data-theme="carbon"], [data-theme="moss"]) :is(.kpi-tile, .dcard):not(:has(.kpi-tile, .dcard)):not(.home-hero-stats) { box-shadow: 0 1px 2px color-mix(in srgb, var(--shade-black) 3%, transparent); }
/* The menu button of a phone is on the dark bar. */
:root:is([data-theme="carbon"], [data-theme="moss"]) .header-bar .menu-button { color: var(--ink); }
@media (min-width: 1024px) {
  :root:is([data-theme="carbon"], [data-theme="moss"]) .section-nav .section-nav-link[aria-current]:not(.is-parent) { background: var(--nav-pill); color: var(--nav-pill-text); }
  :root:is([data-theme="carbon"], [data-theme="moss"]) .section-nav .section-nav-link[aria-current]:not(.is-parent) .section-nav-icon { color: var(--nav-pill-text); }
}

/* The dashboard look: a rail with the logo and all the sections on the full height of the window, a slim top bar with the search on its left, and a row of figures over the charts. Colors stay those of the theme. */
.rail { display: none; }
@media (min-width: 1024px) {
  :root { --rail-width: 260px; }
  .rail { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--rail-width); display: flex; flex-direction: column; height: calc(100vh / var(--page-zoom)); background: var(--surface-sidebar); border-right: 1px solid var(--border); }
  .rail-logo { flex: none; display: flex; align-items: center; height: var(--navbar-height); padding: 0 var(--space-5); border-bottom: 1px solid var(--border); }
  .rail-logo .logo-img { display: block; width: auto; height: 34px; filter: var(--logo-filter); }
  .rail-groups { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3) var(--space-3) var(--space-5); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .rail-group + .rail-group { margin-top: var(--space-4); }
  .rail-label { margin: 0 0 var(--space-1); padding: 0 var(--space-3); font-size: var(--text-caption); line-height: 18px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
  .rail-list, .rail-sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .rail-sub { margin: 2px 0 var(--space-1); padding-left: 38px; }
  .rail-link { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: var(--space-2) var(--space-3); border-radius: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-primary); text-decoration: none; transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
  .rail-link:hover { background: var(--sidebar-hover-bg); color: var(--ink); }
  .rail-link .icon { flex: none; width: 18px; height: 18px; }
  .rail-link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
  .rail-link.is-parent { color: var(--ink); }
  .rail-sub .rail-link { min-height: 32px; padding: 6px var(--space-3); }

  :root:is([data-theme]) .main-column { margin-left: var(--rail-width); }
  :root:is([data-theme]) .section-nav, :root:is([data-theme]) .header-bar .header-logo, :root:is([data-theme]) .header-nav { display: none; }
  :root:is([data-theme]) .header-bar { position: sticky; top: 0; height: var(--navbar-height); min-height: var(--navbar-height); padding: 0 var(--space-5); background: color-mix(in srgb, var(--surface-page) 80%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
  :root:is([data-theme]) .global-search { order: 0; flex: 0 1 360px; margin-right: auto; }
  :root:is([data-theme]) .global-search .search-button { width: 100%; }
  :root:is([data-theme]) .header-actions { order: 1; margin-left: auto; }
  :root:is([data-theme]) .content.dash:not(.is-home) { max-width: none; }
  :root:is([data-theme]) .content.dash { padding: var(--space-5); }
}
:root { --navbar-height: 64px; }
/* The cards. */
:root:is([data-theme]) .dash-grid { gap: var(--space-5) var(--space-4); }
:root:is([data-theme]) .dcard { --card-pad: 20px; --card-radius: 10px; }
:root:is([data-theme]) .act-card { padding: 20px; }
:root:is([data-theme]) .act-grid-4 { gap: var(--space-4); margin-bottom: var(--space-5); }
:root:is([data-theme]) :is(.dcard-title, .act-card-head h2) { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.4px; }
:root:is([data-theme]) .data-table th { background: none; font-size: var(--text-caption); font-weight: 500; color: var(--text-secondary); }
:root:is([data-theme]) .data-table td { font-size: var(--text-small); }
/* A figure: the label, the number and the change on the left, the icon on the right. */
.stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.stat-icon .icon { width: 20px; height: 20px; }
.dstat:has(> .stat-icon) { position: relative; padding-right: 72px; }
.dstat > .stat-icon { position: absolute; top: 20px; right: 20px; }
:root:is([data-theme]) .dstat:has(> .stat-icon) .dstat-label { font-size: var(--text-caption); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
:root:is([data-theme]) .dstat:has(> .stat-icon) .dstat-row { display: block; margin-top: var(--space-1); }
:root:is([data-theme]) .dstat:has(> .stat-icon) .dstat-value { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.6px; }
:root:is([data-theme]) .dstat:has(> .stat-icon) .dstat-sub { margin-top: var(--space-1); }
.act-kpi > .stat-icon { grid-column: 2; grid-row: 1; }
:root:is([data-theme]) .act-kpi-label { font-size: var(--text-caption); font-weight: 500; color: var(--text-secondary); }
:root:is([data-theme]) .act-kpi-value { font-weight: 700; }
/* The subjects beside the lead chart: a large donut with its list. On a narrower card the donut stands over the list. */
.dcard.agenda-narrow .agenda-wrap { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-5); }
.dcard.agenda-narrow .agenda-donut { width: 260px; height: 260px; }
.dcard.agenda-narrow .agenda-legend { width: 100%; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
@media (max-width: 1279px) {
  .dcard.agenda-narrow .agenda-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}
.mme-side.c-6 { align-self: stretch; }

/* A moving average over the columns. It takes no clicks, so the columns under it can be picked. */
.bar-chart .bar-trend { fill: none; stroke: var(--side-b); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }