/**
 * cctp — кастомные стили.
 *
 * Что писать сюда:
 *  - Кастомные CSS-правила, которые не удобно/невозможно сделать через Webflow Designer
 *  - Custom properties (CSS variables) которые не из дизайн-системы
 *  - Анимационные классы для GSAP target'ов
 *  - Override Webflow стилей (с учётом специфичности)
 *
 * В dev mode (npm run dev) — стили инжектятся через JS, hot reload работает мгновенно.
 * В production — extract'ится в dist/style.css, грузится отдельным <link> в Webflow head.
 */

/* placeholder — удалить когда добавишь первый реальный стиль */
:root {
  --cctp-loaded: 1;
}

/* 
  :root {
  --button-color: #131313;
  --button-color-background: #fff;
  --button-hover-color: #fff;
  --button-hover-color-background: #ff5100;
  --button-color-focus: #000;
  --button-border-radius: 2.5em;
  --button-padding: 0.75em 1em;
  --button-focus-inset: -0.125em;
  --button-click-scale: 0.955 0.925;
  --button-default-text-scale: 1.2;
  --button-hover-text-scale: 0.85;
  --button-ease-hover: cubic-bezier(0.675, 0.15, 0.1, 1);
  --button-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
  --button-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button {
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.15s var(--button-ease-click);
}

.button:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--button-color-focus);
}

.button:active {
  scale: var(--button-click-scale);
}

.button::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--button-focus-inset);
  border-radius: var(--button-border-radius);
  transition: box-shadow 0.3s var(--button-ease-focus);
  pointer-events: none;
  z-index: 1;
}

.button__hover {
  clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);
  transition: clip-path 0.375s var(--button-ease-hover);
}

.button__hover .button__text {
  scale: var(--button-hover-text-scale);
  opacity: 0;
  transition: scale 0.35s var(--button-ease-hover), opacity 0.15s 0.05s ease-out;
}

.button__default .button__text {
  scale: 1;
  transition: scale 0.35s var(--button-ease-hover);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:is(:hover, :focus-visible) .button__default .button__text,
  [data-hover]:is(:hover, :focus-visible) .button .button__default .button__text {
    scale: var(--button-default-text-scale);
    transition: scale 0.35s 0.05s var(--button-ease-hover);
  }

  .button:is(:hover, :focus-visible) .button__hover,
  [data-hover]:is(:hover, :focus-visible) .button .button__hover {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 0.425s 0.05s var(--button-ease-hover);
  }

  .button:is(:hover, :focus-visible) .button__hover .button__text,
  [data-hover]:is(:hover, :focus-visible) .button .button__hover .button__text {
    scale: 1;
    opacity: 1;
    transition: scale 0.35s 0.1s var(--button-ease-hover), opacity 0.15s 0.15s ease-out;
  }
} */
.button__text {
  display: inline-flex;          /* чтобы было куда воткнуть icon */
  align-items: center;
  gap: var(--button-icon-gap);
  justify-content: center;
} 

.button__text::before {
  content: '';
  display: inline-block;
  height: var(--button-icon-size);
  aspect-ratio: var(--button-icon-aspect);
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10' fill='none' stroke='black' stroke-width='1.2' stroke-miterlimit='10'><path d='M7 3.88574L9.5 6.38574L7 8.88574'/><path d='M1.5 0.885742V4.88574L3 6.38574H9.5'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10' fill='none' stroke='black' stroke-width='1.2' stroke-miterlimit='10'><path d='M7 3.88574L9.5 6.38574L7 8.88574'/><path d='M1.5 0.885742V4.88574L3 6.38574H9.5'/></svg>") center / contain no-repeat;
}

/* ──────────────────────────────────────────────────────────────────────
   button default-text blink fix — OSMO-parity
   Embed CSS внутри Custom Embed Block ошибочно фейдит default-text
   opacity 1→0 на hover'е. В оригинале OSMO default-text меняет ТОЛЬКО
   scale, opacity остаётся 1 — hover-слой физически перекрывает его
   sweep'ом. Локим opacity:1 через !important, побеждаем декларацию
   в embed без модификации самого embed-блока.
   ────────────────────────────────────────────────────────────────────── */
.button__default .button__text {
  opacity: 1 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Nav hover sweep — button parity (без click scale)
   Применяется на .nav_item и .nav_contact. JS-функция
   initNavHoverTextMirror() в main.js дублирует innerText в data-text,
   откуда ::after через content: attr(data-text) рендерит «hover-текст».
   ────────────────────────────────────────────────────────────────────── */
:root {
  --nav-sweep-ease: cubic-bezier(0.675, 0.15, 0.1, 1);
  --nav-sweep-duration-in: 0.425s;
  --nav-sweep-duration-out: 0.375s;
  --nav-text-scale-default-hovered: 1.2;
  --nav-text-scale-hover-resting: 0.85;
}

/* NB: все nav-селекторы префиксованы `.nav ` (specificity 0,2,1+) — в Site
   Head Code остался STALE nav-sweep блок итерации-1 с `.nav_item::before
   { content:'' }` (0,1,1). В PROD body-`\3c style>` перекрывал head-`<link>`
   по source-order. Префикс `.nav ` даёт нам победу независимо от порядка.
   TODO: удалить мёртвый nav-sweep блок из Site Head Code (он дублирует
   этот, итерация-1, ломал hover-текст). */
.nav .nav_item,
.nav .nav_contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Гасим существующий Designer hover-bg — заменяем анимированным sweep'ом.
   `.is-active` исключаем — активный пункт держит постоянный bg и не должен реагировать на hover. */
.nav .nav_item:hover:not(.is-active),
.nav .nav_contact:hover {
  background-color: transparent !important;
}

/* ::after — bg-слой (clip-path sweep, БЕЗ scale — иначе bg отступает от краёв). */
.nav .nav_item::after,
.nav .nav_contact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--nav-sweep-fill);
  clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);
  transition: clip-path var(--nav-sweep-duration-out) var(--nav-sweep-ease);
}

/* ::before — hover-text-слой (clip-path sync с ::after + scale 0.85→1 для OSMO-dance). */
.nav .nav_item::before,
.nav .nav_contact::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);
  scale: var(--nav-text-scale-hover-resting);
  transition:
    clip-path var(--nav-sweep-duration-out) var(--nav-sweep-ease),
    scale 0.35s var(--nav-sweep-ease);
}

/* Default text — scale, БЕЗ opacity. Перекрывается ::after sweep'ом. */
.nav .nav_item-text {
  display: inline-block;
  transition: scale 0.35s var(--nav-sweep-ease);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nav .nav_item:hover:not(.is-active)::after,
  .nav .nav_contact:hover::after,
  .nav .nav_item:hover:not(.is-active)::before,
  .nav .nav_contact:hover::before {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path var(--nav-sweep-duration-in) 0.05s var(--nav-sweep-ease);
  }

  .nav .nav_item:hover:not(.is-active)::before,
  .nav .nav_contact:hover::before {
    scale: 1;
    transition:
      clip-path var(--nav-sweep-duration-in) 0.05s var(--nav-sweep-ease),
      scale 0.35s 0.1s var(--nav-sweep-ease);
  }

  .nav .nav_item:hover:not(.is-active) .nav_item-text,
  .nav .nav_contact:hover .nav_item-text {
    scale: var(--nav-text-scale-default-hovered);
    transition: scale 0.35s 0.05s var(--nav-sweep-ease);
  }
}

/* Per-theme fill — крепится в существующий nav-theme cascade */
.nav[data-theme-nav="hero"]  { --nav-sweep-fill: rgba(255, 255, 255, 0.1); }
.nav[data-theme-nav="light"] { --nav-sweep-fill: var(--alias-grey-150); }
.nav[data-theme-nav="dark"]  { --nav-sweep-fill: var(--alias-grey-700); }

/* .nav_contact — primary action — заливка surface-action (brand orange) во всех темах */
.nav .nav_contact::after { background-color: var(--mapped-surface-action); }

/* Hero theme — bg translucent (10% white), физически не перекрывает default text.
   Фейдим default-text на opacity, чтобы избежать оверлея текстов.
   В light/dark темах bg opaque → перекрытие работает само, fade не нужен. */
.nav[data-theme-nav="hero"] .nav_item .nav_item-text {
  transition:
    scale 0.35s var(--nav-sweep-ease),
    opacity 0.15s 0.05s ease-out;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nav[data-theme-nav="hero"] .nav_item:hover .nav_item-text {
    opacity: 0;
    transition:
      scale 0.35s 0.05s var(--nav-sweep-ease),
      opacity 0.15s ease-out;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Case card hover animations
   - .case-card_img → mask (overflow:hidden), img translates in from top
   - .case-card_description .text_size-small → SplitText per-line mask reveal
   - .case-card_date → mask (overflow:hidden), .text-block translates in from bottom
   - [data-pattern="plus"] crosses fade-in on hover (grey/150 на case-cards)
   - .case-card_link (OSMO button link variant) — bottom-right link, faint
     по умолчанию, full reveal on card hover via [data-hover] cascade
   - JS init in main.js (initCaseCardHover) injects .case-card_link,
     sets data-hover/data-pattern, eager-loads imgs, builds timeline
   ══════════════════════════════════════════════════════════════════════ */

/* Plus-pattern faint variant — data-pattern-strength="faint" recolors the
   crosses to a less-visible grey. Pairs with the base [data-pattern="plus"]
   mechanism (Webflow Site Head). Theme-aware; (0,3,1) specificity beats the
   base [data-theme-section] [data-pattern="plus"] rule regardless of source order.
   Normal = grey/200 light · grey/700 dark; faint = grey/150 · grey/750
   (both one step toward the background). */
[data-theme-section="light"] [data-pattern="plus"][data-pattern-strength="faint"]::before {
  --pattern-plus-color: var(--alias-grey-150);
}
[data-theme-section="dark"] [data-pattern="plus"][data-pattern-strength="faint"]::before {
  --pattern-plus-color: var(--alias-grey-750);
}

/* Pattern fade-in on hover, grey/150 specific to case-cards */
.case-card_item[data-pattern="plus"]::before {
  opacity: 0;
  transition: opacity 0.3s ease;
  --pattern-plus-color: var(--alias-grey-150);
}
.case-card_item[data-pattern="plus"]:hover::before {
  opacity: 1;
}

/* Restore absolute positioning — existing [data-pattern='plus'] > * rule
   force'ит position:relative on children, ломая existing absolute case-card_* */
.case-card_item[data-pattern="plus"] > .case-card_description,
.case-card_item[data-pattern="plus"] > .case-card_date,
.case-card_item[data-pattern="plus"] > .case-card_img {
  position: absolute;
}

/* Image mask: img inside translates from above. visibility:hidden до GSAP
   set чтоб избежать CSS-transform vs GSAP-transform chain bug. */
.case-card_img {
  overflow: hidden;
}
.case-card_img img {
  display: block;
  visibility: hidden;
  will-change: transform;
}

/* Date mask: inner .text-block translates from below */
.case-card_date {
  overflow: hidden;
}
.case-card_date .text-block {
  display: inline-block;
  visibility: hidden;
  will-change: transform;
}

/* Description text mask: SplitText wraps each line via mask:'lines'.
   Hide parent до GSAP set чтоб не было FOUC. */
.case-card_description .text_size-small {
  visibility: hidden;
}

.case-card_item {
  cursor: pointer;
}

/* Whole-card click → button scales. CSS :active activates on parent при
   mousedown anywhere on card, child gets the scale. */
.case-card_item:active .case-card_link.button {
  scale: var(--button-click-scale);
}

/* ──────────── Case card link button (OSMO link variant of button) ───
   Reuses existing .button markup + Site Head Code embed. Overrides
   CSS-vars for link-variant look (transparent default, orange hover,
   small chamfer, no border-radius). Match em-context to .case-card_date
   so `bottom: 2em` resolves identically для центральной оси alignment. */
.case-card_link.button {
  --button-color: var(--mapped-text-body-inverse);
  --button-color-background: transparent;
  --button-hover-color: var(--mapped-text-on-action, #FFEFEA);
  --button-hover-color-background: var(--mapped-surface-action);
  --button-corner: 0.35em;
  --button-padding: 0.5em 1.5em;
  --button-click-scale: 0.96;

  font-size: 0.75em;            /* match .case-card_date em-context */

  position: absolute;
  bottom: var(--mapped-padding-sm);
  right: var(--mapped-padding-sm);
  z-index: 3;
}

.case-card_link.button .button__text {
  font-family: 'Abc Monument Grotesk', 'ABC Monument Grotesk', sans-serif;
  font-size: 1em;               /* 1em × 0.75em-card-context = 0.75em-card */
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Disable main button's ::before icon (inherited from Site Head Code embed) */
.case-card_link.button .button__text::before {
  content: none;
  display: none;
}

/* Override bg widths from calc(100% - 1/2px) → full 100% */
.case-card_link.button .button__bg,
.case-card_link.button .button__bg.is--default {
  width: 100%;
  height: 100%;
}

/* Faint at rest, readable on card hover */
.case-card_link.button .button__default .button__text {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .case-card_item:hover .case-card_link.button .button__default .button__text,
  [data-hover]:hover .case-card_link.button .button__default .button__text {
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Logo grid hover — parent-hover-child rule
   Все остальное (initial transform, transition, overflow:hidden mask,
   bg color crossfade) живёт в Designer Style Manager:
     .logo-grid_item (transition) → :hover (bg → brand-grey-700)
     .logo-item_partner-name (overflow: hidden — mask)
     .logo-item_text-anim (transform translateY(100%), transition)
   Сюда только deep parent-hover-child rule, которую MCP Style Manager
   не умеет выразить (только embed/code).
   ══════════════════════════════════════════════════════════════════════ */
.logo-grid_item:hover .logo-item_text-anim {
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════
   Footer link hover sweep — точная реплика nav_item (bg plaque clip-path
   sweep + dual-text scale dance), НЕ translateY-roll.
   .footer-link (Designer Style Manager): display:inline-block, position:
   relative, overflow:hidden — mask container.
   Layers:
     ::after          — bg плашка, clip-path sweep stripe → full
     .text_size-small — default text (original), scale 1 → 1.2
     .footer-link_dup — hover text (JS-клон .text_size-small в main.js,
                        initFooterLinkHover), clip-path sweep + scale 0.85→1
   Клонирование вместо ::before{content:attr} — клон carries .text_size-
   small class → пиксель-в-пиксель тот же шрифт/размер/цвет (em-context
   у <a>.footer-link отличается, поэтому attr-pseudo мисматчил размер).
   ══════════════════════════════════════════════════════════════════════ */
.footer-link {
  --footer-sweep-ease: cubic-bezier(0.675, 0.15, 0.1, 1);
  --footer-sweep-duration-out: 0.375s;
  --footer-sweep-duration-in: 0.425s;
  --footer-sweep-fill: var(--mapped-surface-light-150);
  --footer-link-pad-x: 0.4em;       /* breathing room для плашки слева/справа */
  isolation: isolate;
  /* padding расширяет плашку (::after inset:0), negative margin тянет layout
     обратно — текст остаётся на месте, плашка получает воздух по краям */
  padding-left: var(--footer-link-pad-x);
  padding-right: var(--footer-link-pad-x);
  margin-left: calc(-1 * var(--footer-link-pad-x));
  margin-right: calc(-1 * var(--footer-link-pad-x));
}

/* bg плашка — clip-path sweep вертикально из центра */
.footer-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--footer-sweep-fill);
  clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);
  transition: clip-path var(--footer-sweep-duration-out) var(--footer-sweep-ease);
}

/* default text — scale up, перекрывается плашкой */
.footer-link .text_size-small:not(.footer-link_dup) {
  transition: scale 0.35s var(--footer-sweep-ease);
}

/* hover text (JS clone) — clip-path sweep + scale 0.85→1, поверх плашки.
   Цвет overridden на on-action для читаемости поверх orange плашки. */
.footer-link .footer-link_dup {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* match .footer-link horizontal padding so clone text aligns with original */
  padding-left: var(--footer-link-pad-x);
  padding-right: var(--footer-link-pad-x);
  color: var(--mapped-text-on-action);
  clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);
  scale: 0.85;
  transition:
    clip-path var(--footer-sweep-duration-out) var(--footer-sweep-ease),
    scale 0.35s var(--footer-sweep-ease);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .footer-link:hover::after,
  .footer-link:hover .footer-link_dup {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path var(--footer-sweep-duration-in) 0.05s var(--footer-sweep-ease);
  }
  .footer-link:hover .footer-link_dup {
    scale: 1;
    transition:
      clip-path var(--footer-sweep-duration-in) 0.05s var(--footer-sweep-ease),
      scale 0.35s 0.1s var(--footer-sweep-ease);
  }
  .footer-link:hover .text_size-small:not(.footer-link_dup) {
    scale: 1.2;
    transition: scale 0.35s 0.05s var(--footer-sweep-ease);
  }
}/* ══════════════════════════════════════════════════════════════════════
   CCTP torque-depth chart styles
   Bundled with charts/torque-depth.js → loaded as part of the lazy chunk.
   All sizing in em — scales with CCTP's fluid em-viewport system.
   ══════════════════════════════════════════════════════════════════════ */

/* Center .chart-host inside its parent (e.g. .card_content-big in Webflow).
   :has() targets ONLY the specific parent containing chart-host — other
   .card_content-big cards on the same page are unaffected. When chart-host
   has a max-height smaller than parent, this prevents top-anchoring. */
:has(> .chart-host) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chart-host {
  /* Local tokens (mirrors CCTP design-system) */
  --series-orange:  #fe5b2a;
  --series-data:    #ffffff;
  --series-swatch:  #2f3032;
  --text-title:     #747576;
  --text-axis:      #4D4D4D;   /* axis labels + axis titles */
  --font-mono: 'ABC Monument Grotesk Cyrillic Mono Variable',
               'Iosevka', 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  display: flex;
  /* letter-spacing: -0.01em; */
  text-transform: uppercase;
  font-size: 0.9em;
  flex-direction: column;
  width: 100%;
  max-height: 32em;
  /* min-height: 20em; */
  /* ≈60px breathing room from card edges at 16px base; scales with em system */
  padding: 0 var(--mapped-padding-sm);
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
}

/* ─── Title row ─── */
.chart-host__header {
  display: flex;
  gap: 0.5em;
  margin-bottom: 1.5em;
}
.chart-host__marker {
  margin-top: 0.1em;
  width: 0.5em;
  height: 0.5em;
  background: var(--series-orange);
  flex-shrink: 0;
}
.chart-host__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-title);
}

/* ─── Chart canvas (ApexCharts mounts here) ─── */
/* Canvas absorbs the remaining vertical space inside .chart-host (after
   padding + header + legend). ApexCharts reads canvas height via
   chart.height:'100%' and renders SVG to fit exactly. When .chart-host has
   a max-height constraint, the canvas SHRINKS PROPORTIONALLY rather than
   getting clipped. Aspect adapts to available space — close to Figma
   526:329 when card is wider than tall, more square if card is tight. */
.chart-host__canvas {
  flex: 1;
  width: 100%;
  min-height: 0; /* required so flex item can shrink in column layout */
}

/* ─── Legend (custom HTML) ─── */
.chart-host__legend {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 1.5em;
}
.chart-host__legend-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.chart-host__legend-marker {
  width: 1.5em;
  height: 0.5em;
  flex-shrink: 0;
}
.chart-host__legend-marker--frs    { background: var(--series-orange); }
.chart-host__legend-marker--no-frs { background: var(--series-swatch); }
.chart-host__legend-label {
  font-family: var(--font-mono);
  font-size: 0.75em;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-title);
  white-space: nowrap;
}

/* ─── Custom tooltip (ApexCharts custom render) ─── */
.cctp-chart-tooltip {
  background: #141414;
  border: 1px solid #2a2a2a;
  padding: 0.75em 0.9em;
  border-radius: 2px;
  font-size: 0.8em;
  line-height: 1.4;
  font-family: var(--font-mono);
}
.cctp-chart-tooltip__depth {
  color: #fff;
  margin: 0 0 0.5em;
  font-weight: 500;
}
.cctp-chart-tooltip__row {
  margin: 0.25em 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.cctp-chart-tooltip__row::before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 0.5em;
  flex-shrink: 0;
}
.cctp-chart-tooltip__row--frs::before    { background: #fe5b2a; }
.cctp-chart-tooltip__row--no-frs::before { background: #2f3032; }
.cctp-chart-tooltip__row--frs    { color: #fe5b2a; }
.cctp-chart-tooltip__row--no-frs { color: #ffffff; }

/* ─── ApexCharts SVG overrides scoped to .chart-host ─── */
.chart-host .apexcharts-tooltip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Axis titles ("Момент, кН*м²" / "Вес, т" / "Глубина, м") */
.chart-host .apexcharts-xaxis-title-text,
.chart-host .apexcharts-yaxis-title-text {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  fill: var(--text-axis) !important;
}
/* Y axis numeric labels (0 / 900 / 1800 / 2700 / 3600 on the left column) */
.chart-host .apexcharts-yaxis-texts-g text {
  font-family: var(--font-mono) !important;
  fill: var(--text-axis) !important;
}
/* X axis annotation labels (0 / 10 / 20 / 30 / 40 on the bottom row) */
.chart-host .apexcharts-xaxis-annotation-label,
.chart-host .apexcharts-yaxis-annotation-label {
  font-family: var(--font-mono) !important;
  fill: var(--text-axis) !important;
}

/* Force annotations BEHIND data markers (CSS reinforces ApexCharts position:'back') */
.chart-host .apexcharts-yaxis-annotations,
.chart-host .apexcharts-xaxis-annotations {
  z-index: 1;
}
.chart-host .apexcharts-series {
  z-index: 10;
  position: relative;
}
.chart-host .apexcharts-xaxis-annotation-label,
.chart-host .apexcharts-yaxis-annotation-label {
  transform: none !important;
}