/* ============================================================
   ФСР · Дизайн-система
   Один источник правды для портала, отчётов и презентаций.
   Меняешь токен здесь — меняется везде, где подключён этот файл.

   Подключение:
     <link rel="stylesheet" href="assets/fsr.css">
     <script src="assets/fsr.js"></script>   (до </head>, без defer)
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ----------------------------------------
   Имена семантические (--bg, --fg, --accent), а не «цветные»:
   в светлой теме --bg становится бумажным, и название не врёт.
   Старые имена (--void, --ink, --red) оставлены псевдонимами,
   чтобы существующие страницы не переписывать разом.
   ------------------------------------------------------------ */
:root{
  /* поверхности */
  --bg:#0B0B0C;              /* грунт страницы */
  --bg-2:#141314;            /* карточка, панель */
  --bg-3:#1B1A1D;            /* приподнятое, hover */

  /* текст */
  --fg:#EDEAE2;              /* основной */
  --fg-dim:#A5A093;          /* вторичный, описания */
  --fg-mute:#8A8577;         /* мета, подписи, моно-лейблы */

  /* линии */
  --line:rgba(237,234,226,.14);
  --line-2:rgba(237,234,226,.26);

  /* акцент — родной красный логотипа ФСР */
  --accent:#D34B50;
  --accent-deep:#B23B40;     /* hover, глубина */
  --accent-text:#D34B50;     /* красный для мелкого текста (в светлой теме темнее) */
  --accent-ink:#FFFFFF;      /* текст на красной плашке */
  --accent-soft:rgba(211,75,80,.12);

  /* статусы (отделены от акцента: красный бренда ≠ красный ошибки) */
  --ok:#5FA97C;
  --warn:#D0A24A;
  --err:#D9534F;
  --info:#6E9BD1;

  /* фиксированные поверхности — когда блок должен остаться тёмным
     (или бумажным) в любой теме: обложки, превью, «сигнатурные» экраны */
  --fixed-dark:#0B0B0C;
  --fixed-dark-2:#141314;
  --fixed-paper:#EFECE6;
  --fixed-ink:#161512;

  /* типографика */
  --font-display:'Oswald','IBM Plex Sans',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* шкала кегля */
  --t-hero:clamp(38px,7vw,84px);
  --t-h1:clamp(32px,5.4vw,60px);
  --t-h2:clamp(22px,3vw,34px);
  --t-h3:18px;
  --t-body:16px;
  --t-small:13.5px;
  --t-meta:11px;

  /* ритм и форма */
  --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:52px; --sp-6:84px;
  --radius:10px; --radius-lg:16px; --radius-pill:100px;
  --maxw:1180px;
  --exp:cubic-bezier(.16,1,.3,1);
  --shadow:0 18px 50px -20px rgba(0,0,0,.65);

  /* ---- псевдонимы для старой разметки ---- */
  --void:var(--bg); --void-2:var(--bg-2); --void-3:var(--bg-3);
  --ink:var(--fg); --ink-dim:var(--fg-dim); --concrete:var(--fg-mute);
  --red:var(--accent); --red-deep:var(--accent-deep);
  --muted:var(--fg-dim); --dim:var(--fg-dim); --card:var(--bg-2);
}

/* ---------- светлая тема ----------
   Тёплая бумага, а не белый: холодный #fff спорит с красным логотипа. */
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --bg:#EFECE6; --bg-2:#FFFFFF; --bg-3:#E6E2DA;
    --fg:#161512; --fg-dim:#55504A; --fg-mute:#6E6959;
    --line:rgba(22,21,18,.14); --line-2:rgba(22,21,18,.26);
    --accent-text:#B23B40;          /* AA для мелкого текста на бумаге */
    --accent-soft:rgba(211,75,80,.10);
    --ok:#2C784B; --warn:#8D6212; --err:#B4322E; --info:#2C5F9E;   /* затемнены до AA на бумаге */
    --shadow:0 18px 50px -22px rgba(22,21,18,.22);
  }
}
:root[data-theme="light"]{
  --bg:#EFECE6; --bg-2:#FFFFFF; --bg-3:#E6E2DA;
  --fg:#161512; --fg-dim:#55504A; --fg-mute:#6E6959;
  --line:rgba(22,21,18,.14); --line-2:rgba(22,21,18,.26);
  --accent-text:#B23B40;
  --accent-soft:rgba(211,75,80,.10);
  --ok:#2C784B; --warn:#8D6212; --err:#B4322E; --info:#2C5F9E;   /* затемнены до AA на бумаге */
  --shadow:0 18px 50px -22px rgba(22,21,18,.22);
}
/* явный выбор тёмной всегда перебивает системную настройку */
:root[data-theme="dark"]{
  --bg:#0B0B0C; --bg-2:#141314; --bg-3:#1B1A1D;
  --fg:#EDEAE2; --fg-dim:#A5A093; --fg-mute:#8A8577;
  --line:rgba(237,234,226,.14); --line-2:rgba(237,234,226,.26);
  --accent-text:#D34B50;
  --accent-soft:rgba(211,75,80,.12);
  --ok:#5FA97C; --warn:#D0A24A; --err:#D9534F; --info:#6E9BD1;
  --shadow:0 18px 50px -20px rgba(0,0,0,.65);
}

/* ---------- 2. БАЗА ----------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s var(--exp), color .25s var(--exp);
}
img,svg,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1.05; text-wrap:balance}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)}
p{margin:0 0 1em; max-width:68ch}
::selection{background:var(--accent); color:var(--accent-ink)}

/* фокус с клавиатуры — виден всегда и везде */
:where(a,button,[tabindex],input,select,textarea):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

.fsr-wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,40px)}
.fsr-narrow{max-width:780px}
.mono{font-family:var(--font-mono)}
.fsr-muted{color:var(--fg-dim)}
.fsr-meta{font-family:var(--font-mono); font-size:var(--t-meta);
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute)}
.fsr-num{font-variant-numeric:tabular-nums}

/* ---------- 3. СЕКЦИИ И ГРУНТЫ ------------------------------ */
.fsr-section{padding:var(--sp-6) 0 var(--sp-2)}
/* смена грунта = смена главы; band работает и в светлой теме */
.fsr-band{padding:var(--sp-6) 0}
.fsr-band--alt{background:var(--bg-2)}
/* всегда тёмный блок, независимо от темы (обложки, сигнатурные экраны) */
.fsr-band--dark{background:var(--fixed-dark); color:#EDEAE2; --fg:#EDEAE2;
  --fg-dim:#A5A093; --fg-mute:#8A8577; --line:rgba(237,234,226,.14); --bg-2:#141314}

.fsr-shead{display:flex; align-items:baseline; gap:16px; margin-bottom:var(--sp-3); flex-wrap:wrap}
.fsr-shead .n{font-family:var(--font-mono); font-size:12px; color:var(--accent-text); font-weight:700}
.fsr-shead .note{margin-left:auto; font-size:var(--t-small); color:var(--fg-mute); max-width:44ch}

/* ---------- 4. НАДЗАГОЛОВОК --------------------------------- */
.fsr-eyebrow{display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:var(--t-meta); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-text); margin-bottom:14px}
.fsr-eyebrow::before{content:""; width:30px; height:1px; background:currentColor; flex:none}
.fsr-eyebrow--bare::before{display:none}

/* ---------- 5. ЧИПЫ И СТАТУСЫ ------------------------------- */
.fsr-chip{display:inline-block; padding:3px 9px; border:1px solid var(--line-2);
  border-radius:3px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); white-space:nowrap}
/* фон чипа — --accent-deep: белый по 10px капсу на --accent даёт лишь 4.29:1,
   на --accent-deep — 5.85:1 и проходит AA */
.fsr-chip--accent{background:var(--accent-deep); border-color:var(--accent-deep); color:var(--accent-ink)}
.fsr-chip--ok{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 50%, transparent)}
.fsr-chip--warn{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 50%, transparent)}
.fsr-chip--err{color:var(--err); border-color:color-mix(in srgb, var(--err) 50%, transparent)}
/* статус дублируем точкой, а не только цветом — для тех, кто не различает красный */
.fsr-chip[data-dot]::before{content:"●"; margin-right:6px; font-size:8px; vertical-align:1px}

/* ---------- 6. КНОПКИ --------------------------------------- */
.fsr-btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 24px; border-radius:var(--radius-pill); border:1px solid transparent;
  background:none; color:var(--fg); transition:.2s var(--exp)}
.fsr-btn--accent{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.fsr-btn--accent:hover{background:var(--accent-deep); border-color:var(--accent-deep);
  transform:translateY(-2px); box-shadow:0 16px 36px -14px var(--accent)}
.fsr-btn--ghost{border-color:var(--line-2)}
.fsr-btn--ghost:hover{border-color:var(--fg); transform:translateY(-2px)}
.fsr-btn--sm{padding:9px 16px; font-size:11px}

/* ---------- 7. КАРТОЧКА И ПЛИТКА ---------------------------- */
.fsr-card{background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:22px}

.fsr-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.fsr-grid--wide{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

/* Компоненты самодостаточны: не наследуют цвет и отступы от стилей страницы.
   Плитка — это <a>, а на страницах ссылки бывают красными; заголовки внутри
   тоже могут получить чужой margin. Поэтому задаём явно. */
.fsr-tile{position:relative; display:flex; flex-direction:column; gap:10px;
  padding:22px 22px 18px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); color:var(--fg); text-decoration:none;
  transition:border-color .2s var(--exp), transform .2s var(--exp), background .2s var(--exp)}
.fsr-tile:hover{border-color:var(--accent); transform:translateY(-3px); background:var(--bg-3)}
.fsr-tile__head{display:flex; align-items:flex-start; gap:12px}
.fsr-tile h3{font-size:17.5px; line-height:1.15; flex:1; margin:0; color:inherit;
  text-transform:uppercase; letter-spacing:-.01em}
.fsr-tile__arrow{font-family:var(--font-mono); color:var(--fg-mute); transition:.2s var(--exp)}
.fsr-tile:hover .fsr-tile__arrow{color:var(--accent); transform:translate(2px,-2px)}
.fsr-tile p{margin:0; font-size:var(--t-small); line-height:1.5; color:var(--fg-dim)}
.fsr-tile__meta{margin-top:auto; padding-top:12px; display:flex; align-items:center;
  gap:8px; flex-wrap:wrap; border-top:1px solid var(--line)}
.fsr-tile__meta .sz{margin-left:auto}
.fsr-tile--lead{background:linear-gradient(150deg,var(--accent-soft),var(--bg-2) 62%);
  border-color:color-mix(in srgb, var(--accent) 42%, transparent)}

/* ---------- 8. СПИСОК-СТРОКИ (editorial-индекс) ------------- */
.fsr-rows{border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--bg-2)}
.fsr-rows > *{display:flex; align-items:center; gap:14px; padding:13px 18px;
  color:var(--fg); text-decoration:none;
  border-top:1px solid var(--line); transition:background .16s, padding-left .16s var(--exp)}
.fsr-rows > *:first-child{border-top:0}
.fsr-rows > a:hover{background:var(--bg-3); padding-left:24px}
.fsr-rows .rn{font-family:var(--font-mono); font-size:11px; color:var(--accent-text);
  width:26px; flex:none}
.fsr-rows .rt{font-size:14.5px; font-weight:500}
.fsr-rows .rd{color:var(--fg-dim); font-size:13px; margin-left:auto; text-align:right}
@media(max-width:620px){ .fsr-rows .rd{display:none} }

/* ---------- 9. ЦИФРЫ ---------------------------------------- */
.fsr-stats{display:flex; gap:34px; flex-wrap:wrap}
.fsr-stat{font-family:var(--font-mono)}
.fsr-stat b{display:block; font-size:30px; font-weight:700; letter-spacing:-.02em;
  color:var(--fg); font-variant-numeric:tabular-nums; line-height:1.1}
.fsr-stat span{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute)}

/* ---------- 10. ТАБЛИЦА ------------------------------------- */
/* обёртка обязательна: широкая таблица скроллится внутри себя,
   а не ломает страницу горизонтально */
.fsr-tablewrap{overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--radius); margin:var(--sp-3) 0}
.fsr-table{border-collapse:collapse; width:100%; min-width:620px; font-size:13.5px}
.fsr-table th,.fsr-table td{text-align:left; padding:13px 15px;
  border-bottom:1px solid var(--line); vertical-align:top}
.fsr-table th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-mute); font-weight:700}
.fsr-table tr:last-child td{border-bottom:0}
.fsr-table td.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* ---------- 11. ВЫНОСКИ ------------------------------------- */
.fsr-callout{border:1px solid var(--line-2); border-left:3px solid var(--accent);
  background:var(--bg-2); border-radius:var(--radius); padding:18px 22px; margin:var(--sp-3) 0}
.fsr-callout__t{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-text); margin-bottom:8px}
.fsr-callout--ok{border-left-color:var(--ok)} .fsr-callout--ok .fsr-callout__t{color:var(--ok)}
.fsr-callout--warn{border-left-color:var(--warn)} .fsr-callout--warn .fsr-callout__t{color:var(--warn)}

.fsr-quote{font-family:var(--font-display); font-size:clamp(20px,3vw,30px);
  text-transform:uppercase; letter-spacing:-.02em; line-height:1.06; max-width:22ch; margin:0}
.fsr-quote em{color:var(--accent); font-style:normal}

/* ---------- 12. ТАЙМЛАЙН ------------------------------------ */
.fsr-phase{border-left:2px solid var(--line); padding-left:24px; margin-left:8px}
.fsr-phase__item{position:relative; padding-bottom:30px}
.fsr-phase__item::before{content:""; position:absolute; left:-31px; top:4px;
  width:12px; height:12px; border-radius:50%; background:var(--accent);
  border:3px solid var(--bg)}
.fsr-phase__k{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-text)}
.fsr-phase h4{font-size:18px; margin:4px 0 8px}
.fsr-phase p{font-size:14px; color:var(--fg-dim); margin:0 0 8px}

/* ---------- 13. ОБРАЗЦЫ ЦВЕТА (бренд-бук) ------------------- */
.fsr-swatches{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fsr-swatch{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--bg-2)}
.fsr-swatch__chip{height:88px}
.fsr-swatch__meta{padding:12px 13px}
.fsr-swatch__name{font-size:13.5px; font-weight:700}
.fsr-swatch__hex{font-family:var(--font-mono); font-size:12px; color:var(--fg-dim); margin-top:2px}
.fsr-swatch__role{font-size:11.5px; color:var(--fg-mute); margin-top:6px; line-height:1.35}

/* ---------- 14. ФОТО: ленивая загрузка + шиммер ------------- */
@keyframes fsr-shimmer{to{background-position:-200% 0}}
.fsr-img{background:var(--bg-3);
  background-image:linear-gradient(100deg,
    transparent 20%, color-mix(in srgb, var(--fg) 7%, transparent) 42%, transparent 64%);
  background-size:200% 100%; background-repeat:no-repeat;
  animation:fsr-shimmer 1.5s linear infinite}
.fsr-img.is-loaded{animation:none; background-image:none}
.js .fsr-img{opacity:0; transition:opacity .45s var(--exp)}
.js .fsr-img.is-loaded{opacity:1}

/* ---------- 15. ШАПКА С ПЕРЕКЛЮЧАТЕЛЕМ ТЕМЫ ---------------- */
.fsr-topbar{position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.fsr-topbar__row{display:flex; align-items:center; gap:14px; height:60px}
.fsr-topbar__brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.fsr-topbar__brand svg{width:30px; height:30px; color:var(--fg); flex:none}
.fsr-topbar__brand b{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-dim); font-weight:600; line-height:1.5}
.fsr-back{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-dim); transition:color .18s}
.fsr-back:hover{color:var(--accent)}

/* кнопка темы */
.fsr-theme{display:inline-grid; place-items:center; width:36px; height:36px; flex:none;
  border:1px solid var(--line-2); border-radius:50%; background:none; cursor:pointer;
  color:var(--fg-dim); transition:.18s var(--exp)}
.fsr-theme:hover{color:var(--accent); border-color:var(--accent)}
.fsr-theme svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
/* плавающий вариант — для отчётов и презентаций без собственной шапки */
.fsr-theme--float{position:fixed; top:16px; right:16px; z-index:999;
  background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(10px)}
@media print{ .fsr-theme--float{display:none} }
.fsr-theme .i-sun{display:none}
.fsr-theme .i-moon{display:block}
:root[data-theme="light"] .fsr-theme .i-sun{display:block}
:root[data-theme="light"] .fsr-theme .i-moon{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme]) .fsr-theme .i-sun{display:block}
  :root:not([data-theme]) .fsr-theme .i-moon{display:none}
}

/* ---------- 16. ПЕЧАТЬ -------------------------------------- */
@media print{
  :root{--bg:#fff; --bg-2:#fff; --fg:#000; --fg-dim:#333; --fg-mute:#555;
        --line:#ccc; --line-2:#999}
  .fsr-topbar,.fsr-theme,.fsr-back{display:none !important}
  .fsr-tile,.fsr-card,.fsr-rows{break-inside:avoid; box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:10px; color:#666}
}

/* ---------- 17. ДОСТУПНОСТЬ --------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .fsr-tile:hover{transform:none}
}
.fsr-visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}