/* ═══════════════════════════════════════════════════════════════════
   ПРОГНОЗ ОБЪЁМА РЫНКА
   Файл: assets/css/market-forecast.css

   Токены те же, что в market-indicators-v2.css: #151D3F, #8A8E9F,
   #EEF1F6, #5586E7, радиус 16. Новый только зелёный прогноза.
   Всё скоупано под .fc — на остальную страницу не влияет.
   ═══════════════════════════════════════════════════════════════════ */

.fc{
  --fc-text:#151D3F;   --fc-muted:#8A8E9F;  --fc-faint:#B5B9C7;
  --fc-body:#4B5163;   --fc-line:#EEF1F6;   --fc-line-2:#E1E5EE;
  --fc-blue:#5586E7;
  --fc-green:#1F7A4A;  --fc-green-mid:#4FBF87;  --fc-green-soft:#EEF9F2;
  --fc-red:#C2523A;
  --fc-purple:#7C3AED;
  color:var(--fc-text);
  margin:0 0 40px;
  scroll-margin-top:90px;
}
.fc *,.fc *::before,.fc *::after{box-sizing:border-box}
.fc[hidden]{display:none !important}

.fc__card{
  border:1px solid var(--fc-line);
  border-radius:16px;
  background:#fff;
  padding:26px 30px 22px;
  box-shadow:0 1px 2px rgba(21,29,63,.04);
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ── Шапка ───────────────────────────────────────────────────── */
.fc__head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 0 16px;border-bottom:1px solid var(--fc-line);
}
.fc__title{margin:0;font-size:21px;font-weight:500;letter-spacing:-.01em}
.fc__total{
  display:flex;align-items:baseline;gap:8px;flex:none;
  padding:10px 18px;border-radius:12px;background:var(--fc-green-soft);
}
.fc__total-cap,.fc__total-unit{font-size:12px;color:#2C7A55}
.fc__total-val{font-size:26px;font-weight:500;color:var(--fc-green)}

/* ── Факторы ─────────────────────────────────────────────────── */
.fc__factors{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.fc__col-head{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.fc__col-title{font-size:13.5px;font-weight:500}
.fc__col-title--up{color:var(--fc-green)}
.fc__col-title--down{color:var(--fc-red)}
.fc__rule{flex:1 1 auto;height:1px}
.fc__rule--up{background:#DDF0E5}
.fc__rule--down{background:#F6DED6}
.fc__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.fc__item{font-size:12.5px;line-height:1.5;color:var(--fc-body)}

/* ── График ──────────────────────────────────────────────────── */
.fc__legend{display:flex;align-items:center;gap:18px;margin:0 0 4px}
.fc__key{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--fc-muted)}
.fc__sw{width:11px;height:11px;border-radius:3px;flex:none}
.fc__sw--fact{background:var(--fc-blue)}
.fc__sw--fcst{background:var(--fc-green-mid)}
.fc__unit{margin-left:auto;font-size:12px;color:var(--fc-muted)}
.fc__unit b{font-weight:500;color:var(--fc-text)}

.fc__plot{position:relative}
.fc__svg{display:block;max-width:100%}
.fc__svg--m{display:none}
.fc__svg rect[rx]{transition:opacity .15s ease-out}
.fc__svg rect[rx]:hover{opacity:.82}

/* Замок поверх закрытой зоны */
.fc__lock{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.fc__lock-chip{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:8px 14px;border-radius:999px;background:#fff;
  border:1px solid #E9E6F7;box-shadow:0 6px 18px rgba(124,58,237,.14);
  font-size:12.5px;color:var(--fc-body);
}
.fc__lock-btn{
  padding:11px 22px;border:0;border-radius:12px;
  background:var(--fc-purple);color:#fff;
  font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;
  box-shadow:0 8px 22px rgba(124,58,237,.30);
  transition:background .15s ease-out,transform .12s ease-out;
}
.fc__lock-btn:hover{background:#6D28D9}
.fc__lock-btn:active{transform:translateY(1px)}

/* ── Подвал с коэффициентами ─────────────────────────────────── */
.fc__foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;
  padding:12px 16px;border-radius:12px;background:#FAFBFC;
  font-size:12.5px;color:var(--fc-body);
}
.fc__foot b{font-weight:500;color:var(--fc-text)}
.fc__sep{width:1px;height:14px;background:var(--fc-line-2)}
.fc__summary{margin:0;font-size:13px;line-height:1.6;color:var(--fc-body)}

/* ── Закрытые значения: та же плашка, что у gate.css ─────────── */
.fc-lk{
  position:relative;display:inline-block;cursor:pointer;user-select:none;
  border-radius:6px;padding:1px 6px;letter-spacing:0;line-height:1.25;
  color:transparent !important;-webkit-text-fill-color:transparent !important;
  text-shadow:none !important;
  background:linear-gradient(110deg,
    rgba(124,58,237,.18) 0%,rgba(124,58,237,.30) 40%,rgba(124,58,237,.18) 80%);
  background-size:200% 100%;
  transition:background-position .35s ease,transform .2s ease-out;
}
.fc-lk::before{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(135deg,
    rgba(124,58,237,.28) 0 6px,rgba(124,58,237,.08) 6px 12px);
}
.fc-lk:hover{background-position:100% 0;transform:translateY(-1px)}
.fc-lk--blk{display:block;width:100%}

/* ── Планшет ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .fc__card{padding:22px 20px 18px}
  .fc__factors{grid-template-columns:1fr;gap:16px}
  .fc__head{gap:14px}
  .fc__title{font-size:19px}
}

/* ── Телефон ─────────────────────────────────────────────────── */
@media (max-width:720px){
  .fc{margin:0 0 28px}
  .fc__card{padding:18px 16px 16px;border-radius:16px;gap:14px}
  .fc__head{flex-wrap:wrap;gap:12px;padding:0 0 12px}
  .fc__title{font-size:16px;margin:0}
  .fc__total{padding:7px 11px}
  .fc__total-val{font-size:18px}
  .fc__total-cap,.fc__total-unit{font-size:10.5px}
  .fc__col-title{font-size:12.5px}
  .fc__item{font-size:12px}
  .fc__legend{gap:14px}
  .fc__key,.fc__unit{font-size:10.5px}
  .fc__sw{width:10px;height:10px}

  /* Мобильная геометрия графика вместо десктопной */
  .fc__svg--d{display:none}
  .fc__svg--m{display:block}

  /* Кнопку уводим из-под замка вниз: так до неё дотягивается палец
     и она не перекрывает столбцы */
  .fc__lock{position:static;transform:none;align-items:stretch;margin:10px 0 0}
  .fc__lock-chip{
    position:absolute;left:50%;top:40%;transform:translateX(-50%);
    padding:7px 12px;font-size:11.5px;
  }
  .fc__lock-btn{width:100%;padding:14px 18px;border-radius:13px;font-size:14px}

  .fc__foot{gap:6px 14px;padding:11px 13px;font-size:11.5px}
  .fc__sep{display:none}
  .fc__summary{font-size:12px}
}