/*
 * Hand-written part of the FinCharts theme -- everything that is NOT emitted by the
 * design-token pipeline: the chart font, the font-family token and the one loading state of every
 * chart (not yet built, loading, static image) including the space of a not yet built chart. Kept separate from src/tokens.generated.css so that regenerating the
 * tokens upstream cannot silently drop it.
 *
 * The build (scripts/build.mjs) concatenates tokens.generated.css + chrome.css into the single
 * dist/fincharts-theme.css that consumers load.
 */

/* Chart font "OpenSans" (finanzen.net). Regular + Bold, so that bold labels sit correctly. The URL is
   relative to the shipped CSS (.../fincharts-theme.css => .../fonts/...); the font files are part of this
   package and the single source for the font: the server-side image renderer registers the very same
   files in Skia so that image and browser show the same font (see ADR 0040). WOFF2 = the original TTF
   losslessly compressed (same glyphs and metrics, ~43% of the size). */
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/OpenSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/OpenSans-Bold.woff2") format("woff2");
}

/* Chart font family (not a colour token) -- central for axes, labels, legend and tooltip. The stack names
   concrete families so that BOTH renderers resolve the same font: a browser resolves `system-ui` to the OS
   UI font, while a server-side Skia canvas does not know `system-ui` and would fall back to a different
   default sans. Mirrored into the dark selector as well, so the headless dark render resolves it too. */
:root {
  --finchart-font-family: "OpenSans", Arial, Helvetica, sans-serif;
}

.finchart-root[data-theme="dark"],
:root[data-color-scheme="dark"] {
  --finchart-font-family: "OpenSans", Arial, Helvetica, sans-serif;
}

/*
 * THE loading state of fin-charts – one look everywhere (ADR 0041): a bright band sweeping across a tinted
 * surface. It is always shown by the chart element itself, never by an overlay that replaces it:
 *   – a <finchart-chart> that is not built yet (the engine builds a chart only once it scrolls near the
 *     viewport and then marks it with data-finchart-mounted),
 *   – a chart that is loading ([data-finchart-loading]: first load, a type/timeframe change, showLoading()
 *     of the host) – its content is hidden meanwhile. The engine sets it before the pending state ends, so the
 *     same animation runs on from "not built" until the data is there,
 *   – a static chart image (<img class="finchart-img">) until it has loaded (onload sets data-loaded).
 * There is no type-specific skeleton any more. The colours come from the theme tokens (surface = grid colour
 * over the background, band = almost the bare background): inside a built chart they follow its scheme
 * (.finchart-root[data-theme]), elsewhere the page scheme; the plain colours are the fallback without
 * color-mix.
 */
finchart-chart:not([data-finchart-mounted]),
[data-finchart-loading],
.finchart-img:not([data-loaded]) {
  --fc-loading-base: #e3e6ee;
  --fc-loading-shine: #fbfcfe;
  --fc-loading-base: color-mix(in srgb, var(--finchart-grid, #ced1de) 55%, var(--finchart-bg, #fff));
  --fc-loading-shine: color-mix(in srgb, var(--finchart-grid, #ced1de) 8%, var(--finchart-bg, #fff));
  border-radius: 8px;
  background: linear-gradient(100deg,
      var(--fc-loading-base) 25%, var(--fc-loading-shine) 45%, var(--fc-loading-shine) 55%, var(--fc-loading-base) 75%)
    var(--fc-loading-base);
  background-size: 250% 100%;
  animation: finchart-loading 1.1s linear infinite;
}
/* While loading, the chart's content (plot, legend, zoom bar) is hidden – only the loading state shows. */
[data-finchart-loading] > * { visibility: hidden; }
/* A chart set to the dark scheme in its own options (options.theme, which the engine applies to the chart
   root only once built) – the dark token values, so the not yet built chart does not flash light. */
finchart-chart:not([data-finchart-mounted])[options*='"theme":"dark"'] {
  --fc-loading-base: color-mix(in srgb, #3d4054 40%, #000);
  --fc-loading-shine: color-mix(in srgb, #3d4054 95%, #000);
}
@keyframes finchart-loading {
  0%   { background-position: 125% 0; }
  100% { background-position: -25% 0; }
}
@media (prefers-reduced-motion: reduce) {
  finchart-chart:not([data-finchart-mounted]),
  [data-finchart-loading],
  .finchart-img:not([data-loaded]) { animation: none; }
}
.finchart-img { border-radius: 8px; }

/*
 * Space of a <finchart-chart> that is not built yet: exactly the space the chart will take, so the page does
 * not jump. Pure CSS, so it holds from the first paint on – before the engine script has run (the first
 * paint may come earlier, e.g. a reload scrolled down).
 */
finchart-chart:not([data-finchart-mounted]) {
  display: block;
  /* The sizing of a chart without options.height in its most common place, a flex column (ADR 0024) – size
     containment, the intrinsic height FALLBACK_HEIGHT, growing into the free space. In a block or grid
     parent flex-grow does nothing. The engine then writes the exact sizing inline (options.height, or how
     it fills this very container) and pins flex-grow/min-height where the chart would not grow. */
  contain: size;
  contain-intrinsic-block-size: 420px;
  flex-grow: 1;
  min-height: 0;
}
/* A fixed chart height (options.height) – the SDKs write it into the element's style as --finchart-height,
   because the options JSON is out of reach for CSS. Such a chart does not fill, it has exactly this height. */
finchart-chart:not([data-finchart-mounted])[style*="--finchart-height"] {
  height: var(--finchart-height);
  flex-grow: 0;
  min-height: auto;
}
/* Phones: heights coupled to the device width (responsiveChartHeight in layout.ts: at most 95 % of the
   width, but not below 220px unless the height itself is lower). */
@media (max-width: 640px) {
  finchart-chart:not([data-finchart-mounted]) {
    contain-intrinsic-block-size: max(min(420px, 95vw), 220px);
  }
  finchart-chart:not([data-finchart-mounted])[style*="--finchart-height"] {
    height: max(min(var(--finchart-height), 95vw), min(var(--finchart-height), 220px));
  }
}