/* ============================================================
   MTB · Панель действий для статьи/текста — Поделиться · Скопировать · Печать
   Самодостаточные стили. Классы с префиксом .mta- (не конфликтуют с проектом).
   Цвета берутся из токенов дизайн-системы, если они есть; иначе — фолбэки.
   ============================================================ */
.mta-actions{
  --mta-accent:        var(--accent, #C8792A);
  --mta-accent-dark:   var(--accent-dark, #A66220);
  --mta-accent-cta:    #A8651F;            /* охра под WCAG AA на белом */
  --mta-accent-cta-h:  #874E14;
  --mta-accent-soft:   var(--accent-soft, rgba(200,121,42,.08));
  --mta-surface:       var(--surface, #FFFFFF);
  --mta-cream:         var(--bg-cream, #FAF6F0);
  --mta-text:          var(--text-dark, #2C2C2A);
  --mta-muted:         var(--text-muted, #8A8880);
  --mta-border:        var(--border, #E8E4DF);
  --mta-border-acc:    var(--border-accent, rgba(200,121,42,.20));
  --mta-green:         var(--do-green, #5A9A6E);
  --mta-radius:        var(--radius-sm, 4px);
  --mta-radius-lg:     var(--radius-lg, 8px);
  --mta-font:          var(--font-body, 'Fira Sans Compressed','Fira Sans Condensed',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  --mta-serif:         var(--font-serif, 'Cormorant', Georgia, serif);

  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-family: var(--mta-font);
}

/* базовая кнопка */
.mta-btn{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mta-font); font-weight: 500; font-size: 13px; letter-spacing: .3px;
  padding: 7px 14px; border-radius: var(--mta-radius); border: 1px solid transparent;
  cursor: pointer; transition: all .2s ease; text-decoration: none; white-space: nowrap;
}
.mta-btn svg{ flex: none; }
/* первичная — охра */
.mta-btn--primary{ background: var(--mta-accent-cta); color: #fff; border-color: var(--mta-accent-cta);
  padding: 8px 15px; box-shadow: 0 3px 14px rgba(168,101,31,.30); }
.mta-btn--primary:hover{ background: var(--mta-accent-cta-h); border-color: var(--mta-accent-cta-h); color: #fff; }
.mta-btn--primary.is-open{ background: var(--mta-accent-cta-h); border-color: var(--mta-accent-cta-h); }
/* вторичная — контур */
.mta-btn--secondary{ background: transparent; color: var(--mta-text); border-color: var(--mta-border); }
.mta-btn--secondary:hover{ border-color: var(--mta-accent); color: var(--mta-accent); }
.mta-btn--secondary.is-copied{ color: var(--mta-green); border-color: var(--mta-green); background: rgba(90,154,110,.08); }

/* обёртка «Поделиться» + выпадающая панель */
.mta-share{ position: relative; display: inline-flex; }
.mta-share__panel{
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50;
  width: 300px; max-width: calc(100vw - 40px);
  background: var(--mta-surface); border: 1px solid var(--mta-border);
  border-radius: var(--mta-radius-lg); box-shadow: 0 20px 56px rgba(42,37,32,.18);
  padding: 18px 18px 16px; opacity: 1;
}
@media (prefers-reduced-motion: no-preference){
  .mta-share__panel{ animation: mta-share-in .16s cubic-bezier(.22,1,.36,1); }
}
@keyframes mta-share-in{ from{ transform: translateY(-6px); } to{ transform: none; } }
.mta-share__head{ display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.mta-share__eyebrow{ font: 600 11px/1 var(--mta-font); letter-spacing: 1.4px; text-transform: uppercase; color: var(--mta-accent-dark); }
.mta-share__title{ font-family: var(--mta-serif); font-style: italic; font-size: 19px; line-height: 1.2; color: var(--mta-text); }
.mta-share__note{ font: 400 13px/1.5 var(--mta-font); color: var(--mta-muted); margin: 0 0 14px; }
.mta-share__channels{ display: flex; flex-direction: column; gap: 7px; }
.mta-share__ch{
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 13px; border: 1px solid var(--mta-border); border-radius: var(--mta-radius);
  background: var(--mta-surface); cursor: pointer; color: var(--mta-text);
  font: 500 14.5px/1 var(--mta-font);
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.mta-share__ch svg{ width: 19px; height: 19px; flex: none; color: var(--mta-accent); }
.mta-share__ch:hover{ border-color: var(--mta-accent); background: var(--mta-accent-soft); transform: translateY(-1px); }
.mta-share__ch-arr{ margin-left: auto; color: var(--mta-muted); transition: transform .15s, color .15s; }
.mta-share__ch:hover .mta-share__ch-arr{ color: var(--mta-accent); transform: translateX(3px); }
.mta-share__copy{
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-top: 13px; padding-top: 13px; border: 0; border-top: 1px solid var(--mta-border);
  background: none; cursor: pointer; font: 500 13.5px/1 var(--mta-font); color: var(--mta-accent-dark);
  transition: color .15s;
}
.mta-share__copy svg{ width: 16px; height: 16px; flex: none; }
.mta-share__copy:hover{ color: var(--mta-accent); }
.mta-share__copy.is-copied{ color: var(--mta-green); }
@media (max-width: 700px){
  .mta-share__panel{ right: auto; left: 0; }
}