/* График цены мировой акции. Тон линии кодирует направление за период;
   других цветов на графике нет - сетка и подписи нейтральные. */
.gchart{margin-top:14px}
.gchart-ranges{display:flex;gap:6px;margin-bottom:8px;align-items:center;flex-wrap:wrap}
.gchart-range{min-height:28px;padding:0 11px;border:1px solid var(--g300);border-radius:999px;
  background:var(--white);color:var(--g700);font-family:'Manrope',sans-serif;font-size:12px;
  font-weight:700;cursor:pointer;transition:border-color .12s ease,background-color .12s ease,color .12s ease}
.gchart-range:hover{border-color:var(--lime600);color:var(--ink)}
.gchart-range[aria-pressed="true"]{border-color:var(--lime600);background:var(--lime-soft);color:var(--ink)}
.gchart-range:focus-visible{outline:2px solid var(--lime600);outline-offset:2px}

.gchart-figure{position:relative;width:100%;height:240px}
.gchart-svg{display:block;width:100%;height:100%;overflow:visible}
.gchart-grid{stroke:var(--g200);stroke-width:1;shape-rendering:crispEdges}
.gchart-axis{fill:var(--g500);font-family:'JetBrains Mono',monospace;font-size:9.5px;font-variant-numeric:tabular-nums}
.gchart-line{fill:none;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.gchart-area{opacity:.12}
.gchart-svg.up .gchart-line{stroke:var(--up)}
.gchart-svg.up .gchart-area{fill:var(--up)}
.gchart-svg.down .gchart-line{stroke:var(--down)}
.gchart-svg.down .gchart-area{fill:var(--down)}
.gchart-hit{fill:transparent}

/* События на оси: кружок с буквой - Д дивиденд, О отчётность. Безымянные
   серые точки у нижней кромки читались как артефакт: понять, что это такое и
   к какой дате относится, было нельзя. Буква - тот же язык, что на карточках
   российских бумаг. */
.gchart-event line{stroke:var(--g300);stroke-width:1;stroke-dasharray:2 3}
.gchart-event circle{fill:var(--g100);stroke:var(--g300);stroke-width:1}
.gchart-event text{fill:var(--g700);font-family:'Manrope',sans-serif;font-size:8.5px;font-weight:800}
.gchart-event-dividend circle{fill:var(--lime-soft);stroke:var(--lime600)}
.gchart-event-dividend text{fill:var(--ink)}
.gchart-event:hover circle{fill:var(--ink);stroke:var(--ink)}
.gchart-event:hover text{fill:var(--white)}
.gchart-event:hover line{stroke:var(--g500)}

/* Фильтры событий - те же кнопки, что под графиком российской бумаги.
   На длинной истории отчётности и выплаты вместе превращают ось в
   частокол, и лишний тип нужно уметь погасить. */
.gchart-chips{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.gchart-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;
  border:1px solid var(--g200);border-radius:999px;background:transparent;color:var(--g500);
  font-family:'Manrope',sans-serif;font-size:11.5px;font-weight:600;cursor:pointer;
  transition:border-color .14s ease,color .14s ease}
.gchart-chip i{display:grid;width:15px;height:15px;place-items:center;border-radius:50%;
  background:var(--g100);color:var(--g700);font-size:8.5px;font-style:normal;font-weight:800}
.gchart-chip:hover{border-color:var(--g300);color:var(--ink)}
.gchart-chip[aria-pressed="true"]{border-color:var(--g400);color:var(--ink)}
.gchart-chip[aria-pressed="true"] i{background:var(--lime-soft);color:var(--ink)}
.gchart-chip:focus-visible{outline:2px solid var(--lime600);outline-offset:2px}

/* Курсор: вертикаль и точка на линии цены ровно под мышкой. */
.gchart-cursor-line{stroke:var(--g400);stroke-width:1;stroke-dasharray:3 3}
.gchart-cursor-dot{fill:var(--white);stroke-width:2}
.gchart-svg.up .gchart-cursor-dot{stroke:var(--up)}
.gchart-svg.down .gchart-cursor-dot{stroke:var(--down)}

/* Подсказка идёт за курсором. Раньше значение печаталось строкой под
   графиком, и взгляд приходилось переносить через весь блок. */
.gchart-tip{position:absolute;z-index:3;display:flex;flex-direction:column;gap:2px;
  padding:7px 10px;border:1px solid var(--g200);border-radius:9px;background:var(--white);
  box-shadow:0 6px 18px rgba(12,12,14,.18);pointer-events:none;white-space:nowrap}
.gchart-tip b{color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:13px;
  font-weight:700;font-variant-numeric:tabular-nums}
.gchart-tip span{color:var(--g500);font-family:'Manrope',sans-serif;font-size:11px;font-weight:600}
.gchart-tip .gchart-tip-event{color:var(--lime600)}

/* Итог за период стоит в одной строке с кнопками периодов. Отдельной строкой
   под графиком он держал пустую полосу, а крупная цена дублировала число из
   шапки карточки. */
.gchart-readout{display:flex;gap:8px;align-items:baseline;margin:0 0 0 auto;flex-wrap:wrap}
.gchart-price{color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.gchart-change{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700}
.gchart-change.up{color:var(--up)}
.gchart-change.down{color:var(--down)}
.gchart-period{color:var(--g500);font-family:'Manrope',sans-serif;font-size:11px;font-weight:600}

@media (max-width:640px){
  .gchart-figure{height:190px}
  .gchart-tip{display:none}
}