/* ============================================================
   Окупаем — финансовые карточки для статей (.finchart-*, .fin-*).
   Разметку фаундер вставляет в редактор HTML-карточкой:
   пример — ghost/fin-chart.html рядом с темой.
   Тёмная тема приходит сама через --okp-* из tokens.css.
   ============================================================ */

  .finchart{
    --fc-bg: var(--okp-surface, #FFFFFF);
    --fc-fg: var(--okp-fg, #151515);
    --fc-muted: var(--okp-muted, #6F6A60);
    --fc-line: var(--okp-line, #E7E1D7);
    --fc-rev: var(--okp-chart-green, #17694A);
    --fc-profit: var(--okp-fg, #151515);
    /* Тёмная тема: html[data-theme="dark"]{ --okp-surface:#222019;
       --okp-fg:#EFEBE3; --okp-muted:#A29C90; --okp-line:#33302A;
       --okp-chart-green:#4FBE8E; } */
    background: var(--fc-bg);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 18px 18px 16px;
    margin: 16px 0 24px;
    font-family: Onest, sans-serif;
  }
  .finchart-head{
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  .finchart-title{
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fc-fg);
    margin: 0;
  }
  .finchart-unit{
    font-weight: 500;
    font-size: 12px;
    color: var(--fc-muted);
    margin-left: auto;
  }
  .finchart-scroll{ overflow-x: auto; scrollbar-width: none; }
  .finchart-scroll::-webkit-scrollbar{ display: none; }

  .finchart-plot{
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 170px;
    margin-top: 14px;
    padding-top: 18px; /* место под цифру самого высокого столбика */
    border-bottom: 1px solid var(--fc-fg);
    background: linear-gradient(to top, transparent 0, transparent calc(33% - 1px), var(--fc-line) 33%, transparent calc(33% + 1px)),
                linear-gradient(to top, transparent 0, transparent calc(66% - 1px), var(--fc-line) 66%, transparent calc(66% + 1px));
  }
  .finchart-col{
    flex: 1 1 0;
    min-width: 48px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
  }
  .finchart-val{
    font-family: Oswald, sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1;
    color: var(--fc-fg);
    font-variant-numeric: tabular-nums;
    margin-bottom: 5px;
    white-space: nowrap;
  }
  .finchart-bar{
    flex-shrink: 0;
    width: 62%;
    max-width: 44px;
    background: var(--fc-rev);
    border-radius: 3px 3px 0 0;
  }
  .finchart-years{
    display: flex;
    gap: 8px;
    margin-top: 7px;
  }
  .finchart-year{
    flex: 1 1 0;
    min-width: 48px;
    text-align: center;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--fc-muted);
  }

  /* мини-график прибыли: своя шкала, графит */
  .finchart-profit .finchart-plot{ height: 84px; padding-top: 16px; background: none; }
  .finchart-profit .finchart-bar{ background: var(--fc-profit); }
  .finchart-profit .finchart-val{ font-size: 12.5px; }
  .finchart-profit{ margin-top: 18px; }
  .finchart-sub{
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fc-muted);
    margin: 0;
  }
  .finchart-sub b{ color: var(--fc-fg); font-weight: 600; }

  .finchart-note{
    margin-top: 12px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.45;
    color: var(--fc-muted);
  }
  .finchart-note a{ color: var(--okp-green, #17694A); text-decoration: none; }
  .finchart-note a:hover{ text-decoration: underline; }


  .fin-block{
    --fin-bg: var(--okp-surface, #FFFFFF);
    --fin-fg: var(--okp-fg, #151515);
    --fin-muted: var(--okp-muted, #6F6A60);
    --fin-line: var(--okp-line, #E7E1D7);
    --fin-accent: var(--okp-green, #17694A);
    /* Тёмная тема: html[data-theme="dark"]{ --okp-surface:#222019;
       --okp-fg:#EFEBE3; --okp-muted:#A29C90; --okp-line:#33302A;
       --okp-green:#3FA079; } */
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 24px;
    font-family: Onest, sans-serif;
  }
  .fin-row{
    background: var(--fin-bg);
    border: 1px solid var(--fin-line);
    border-radius: 10px;
    padding: 14px 16px 15px;
  }
  .fin-row-head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--fin-line);
    padding-bottom: 9px;
  }
  .fin-year{
    font-family: Oswald, sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
    color: var(--fin-fg);
  }
  .fin-delta{
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fin-muted);
    text-align: right;
  }
  .fin-delta.is-up{ color: var(--fin-accent); }
  .fin-cells{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 8px 12px;
    margin-top: 11px;
  }
  .fin-label{
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fin-muted);
  }
  .fin-value{
    font-family: Oswald, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    color: var(--fin-fg);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
  }
  .fin-value.fin-na{ color: var(--fin-muted); font-weight: 400; }
  .fin-source{
    font-weight: 500;
    font-size: 12px;
    line-height: 1.45;
    color: var(--fin-muted);
    padding: 2px 2px 0;
  }
  .fin-source a{ color: var(--fin-accent); text-decoration: none; }
  .fin-source a:hover{ text-decoration: underline; }

  /* Десктоп ≥720px: карточки складываются в обычную таблицу-сетку */
  @media (min-width: 720px){
    .fin-block{ gap: 0; border: 1px solid var(--fin-line); border-radius: 10px; overflow: hidden; background: var(--fin-bg); }
    .fin-row{ border: none; border-radius: 0; display: grid; grid-template-columns: 92px 1fr; align-items: center; padding: 12px 18px; }
    .fin-row + .fin-row{ border-top: 1px solid var(--fin-line); }
    .fin-row-head{ border: none; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
    .fin-cells{ margin-top: 0; }
    .fin-source{ padding: 10px 18px 12px; border-top: 1px solid var(--fin-line); }
  }