/* FeelFree UX-слой кабинета: шапки страниц, подсказки, шаги, сводные плитки.
   Подключается из fragments/layout :: head поверх app.css. */

/* ---------- Навигация ---------- */
.navbar-ff .nav-link i{margin-right:4px;opacity:.75}
.navbar-ff .nav-link.active i,.navbar-ff .nav-link[aria-current=page] i{opacity:1}
.navbar-ff .navbar-nav{gap:2px}
@media(min-width:992px){.navbar-ff .navbar-collapse{gap:12px}}

/* ---------- Шапка страницы ---------- */
.ff-head{margin:4px 0 26px}
.ff-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;padding:0;list-style:none;font-size:13px;color:var(--ff-muted)}
.ff-crumbs a{color:#4a5e36;text-decoration:none;font-weight:600}
.ff-crumbs a:hover{text-decoration:underline}
.ff-crumbs li+li::before{content:"›";margin-right:6px;color:#9aa58d}
.ff-head h1{margin:0 0 8px!important}
.ff-lead{margin:0;max-width:720px;color:var(--ff-muted);font-size:15px;line-height:1.7}
.ff-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--ff-line);border-radius:100px;background:#fff;font-size:13px;font-weight:650;color:#35452a;vertical-align:middle}
.ff-chip i{color:#638932}

/* ---------- Подсказки ---------- */
.ff-help{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:6px;padding:0;border:1px solid #b9c5a8;border-radius:50%;background:#f4f8ec;color:#4a5e36;font-size:12px;font-weight:800;line-height:1;cursor:help;vertical-align:middle}
.ff-help:hover,.ff-help:focus-visible{background:var(--ff-brand);border-color:#94c538;color:#171919}
.popover{--bs-popover-max-width:300px;--bs-popover-border-color:#dfe3d8;--bs-popover-border-radius:14px;font-size:14px;box-shadow:0 12px 36px #1719191f}
.popover-body{color:#2b3425;line-height:1.6}
.ff-hint{display:flex;gap:8px;align-items:flex-start;margin-top:8px;color:#5b674f;font-size:13px;line-height:1.55}
.ff-hint i{color:#7c945d;margin-top:2px;flex:none}
.ff-counter{margin-top:6px;text-align:right;font-size:12px;color:#7a846f}
.ff-counter.is-near{color:#a2641a;font-weight:700}

/* ---------- Врезки ---------- */
.ff-callout{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border:1px solid #d6e1c9;border-radius:16px;background:#f3f8ea;color:#2f4423;line-height:1.65;font-size:15px}
.ff-callout>i{font-size:20px;color:#587d29;margin-top:1px;flex:none}
.ff-callout strong{display:block;margin-bottom:2px;color:#1f2d16}
.ff-callout--warn{background:#fff8e8;border-color:#ecd9a8;color:#6f5217}
.ff-callout--warn>i{color:#b07a16}
.ff-callout--danger{background:#fdf0f1;border-color:#e7bcc3;color:#8b2d38}
.ff-callout--danger>i{color:#b23a47}
.ff-callout--ok{background:#eef8e6;border-color:#c9e2b0}
.ff-callout .btn{margin-top:10px}

/* ---------- Сводные плитки ---------- */
.ff-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.ff-stat{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid var(--ff-line);border-radius:16px;background:#fbfcf8;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,background .15s}
a.ff-stat:hover{border-color:#9cb978;background:#f0f7e4;transform:translateY(-1px);color:inherit}
.ff-stat__value{font-size:28px;font-weight:800;letter-spacing:-.8px;line-height:1.15;color:#1f2d16}
.ff-stat__label{font-size:13px;color:var(--ff-muted);line-height:1.4}
.ff-stat--attn{background:#fff8e8;border-color:#ecd9a8}
.ff-stat--attn .ff-stat__value{color:#8a5d0a}
.ff-stat--bad{background:#fdf0f1;border-color:#e7bcc3}
.ff-stat--bad .ff-stat__value{color:#a22c38}
@media(max-width:767px){.ff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Шаги ---------- */
.ff-stepper{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:ffstep}
.ff-stepper>li{position:relative;display:flex;gap:14px;align-items:flex-start;padding:14px 16px 14px 14px;border:1px solid var(--ff-line);border-radius:16px;background:#fbfcf8}
.ff-stepper>li::before{counter-increment:ffstep;content:counter(ffstep);flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:var(--ff-brand);color:#26321f;font-weight:800;font-size:14px}
.ff-stepper>li.is-done{background:#f1f7ea;border-color:#cfe3b0}
.ff-stepper>li.is-done::before{content:"✓";background:#587d29;color:#fff}
.ff-stepper>li.is-current{border-color:#7da24a;box-shadow:0 0 0 3px #bce96845;background:#fff}
.ff-stepper__body{flex:1;min-width:0}
.ff-stepper__title{font-weight:700;font-size:15px;margin:0 0 2px;color:#1f2d16}
.ff-stepper__text{margin:0;font-size:14px;color:var(--ff-muted);line-height:1.6}
.ff-stepper .btn{margin-top:8px}

/* ---------- Инструкции (раскрывающиеся) ---------- */
.ff-guide{border:1px solid var(--ff-line);border-radius:14px;background:#fbfcf8;margin-top:14px}
.ff-guide>summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:650;font-size:14px;color:#35452a;display:flex;align-items:center;gap:8px}
.ff-guide>summary::-webkit-details-marker{display:none}
.ff-guide>summary::before{content:"▸";transition:transform .15s;color:#7c945d}
.ff-guide[open]>summary::before{transform:rotate(90deg)}
.ff-guide__body{padding:0 18px 14px 34px;font-size:14px;line-height:1.7;color:#3d4a33}
.ff-guide__body ol{padding-left:18px;margin:0}
.ff-guide__body li{margin-bottom:4px}
.ff-guide__body code{background:#eef3e4;padding:1px 6px;border-radius:6px;font-size:13px}

/* ---------- Ключ-значение (подписка, профиль) ---------- */
.ff-kv{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:10px 16px;margin:0;font-size:15px}
.ff-kv dt{font-weight:600;color:var(--ff-muted);display:flex;align-items:center}
.ff-kv dd{margin:0;overflow-wrap:anywhere}

/* ---------- Прогресс подписки ---------- */
.ff-meter{height:10px;border-radius:100px;background:#e8ecdf;overflow:hidden;margin:10px 0 6px}
.ff-meter>span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#8fcc3a,#c3f85c)}
.ff-meter--low>span{background:linear-gradient(90deg,#e0a02e,#f3cb6a)}
.ff-meter--out>span{background:#d96a76}

/* ---------- Карточки-режимы (radio) ---------- */
.ff-choice{display:grid;gap:10px}
.ff-choice label{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--ff-line);border-radius:14px;cursor:pointer;background:#fff;line-height:1.5}
.ff-choice label:hover{border-color:#9cb978}
.ff-choice input{margin-top:4px;accent-color:#567b2b}
.ff-choice label:has(input:checked){border-color:#7da24a;background:#f3f8ea;box-shadow:0 0 0 3px #bce96830}
.ff-choice small{display:block;color:var(--ff-muted);font-size:13px!important}

/* ---------- Пустые состояния и таблицы ---------- */
.empty-state strong{display:block;font-size:17px;color:#26321f;margin-bottom:4px}
.ff-legend{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;color:var(--ff-muted);margin:0 0 18px}

/* ---------- Мелочи ---------- */
.card-ff .card-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.ff-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ff-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- Список постов: ближайший пост, фильтры, строки по состояниям ---------- */
.ff-next{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;padding:22px 26px;border:1px solid var(--ff-line);border-left-width:6px;border-radius:20px;background:#fff;margin-bottom:22px;box-shadow:0 5px 18px #25341604}
.ff-next--ready{border-left-color:#5d9a2a;background:#f6fbef}
.ff-next--approval{border-left-color:#e0a02e;background:#fffaf0}
.ff-next--problem{border-left-color:#d96a76;background:#fff5f6}
.ff-next--preparing,.ff-next--publishing{border-left-color:#4a90b8;background:#f3f8fb}
.ff-next--todo{border-left-color:#e0a02e}
.ff-next__eyebrow{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ff-muted);margin-bottom:2px}
.ff-next__when{font-size:26px;font-weight:800;letter-spacing:-.6px;line-height:1.2;color:#1f2d16}
.ff-next__when small{display:block;font-size:15px;font-weight:650;letter-spacing:0;color:#4a5e36}
.ff-next__main{flex:1;min-width:260px}
.ff-next__theme{font-weight:700;font-size:16px;margin:6px 0 0}
.ff-status{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:100px;font-weight:750;font-size:14px;line-height:1.3;background:#eceee7;color:#4e5944}
.ff-status--ready{background:#5d9a2a;color:#fff}
.ff-status--approval{background:#fde9b8;color:#6b4a06}
.ff-status--problem{background:#f8d7db;color:#8b2d38}
.ff-status--preparing,.ff-status--publishing{background:#d9ebf5;color:#1f5b7a}
.ff-status--todo{background:#fff0cb;color:#715114}
.ff-status--published,.ff-status--cancelled{background:#e6e8e1;color:#6f7766}
.ff-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:6px;border-radius:16px;background:#f2f5ec}
.ff-filters a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;color:#4a5e36;font-weight:650;font-size:14px;text-decoration:none}
.ff-filters a:hover{background:#e9efde}
.ff-filters a.is-active{background:#fff;color:#171919;box-shadow:0 2px 7px #1c30100b}
.ff-filters .count{min-width:22px;padding:1px 7px;border-radius:100px;background:#e0e6d3;font-size:12px;font-weight:800;text-align:center}
.ff-filters a.is-active .count{background:var(--ff-brand)}
.ff-filters .count--attn{background:#f3cb6a;color:#4d3606}
.ff-post{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-start;padding:18px 22px;margin-bottom:12px;border:1px solid var(--ff-line);border-left-width:5px;border-radius:18px;background:#fff}
.ff-post--ready{border-left-color:#5d9a2a}
.ff-post--approval{border-left-color:#e0a02e;background:#fffdf6}
.ff-post--problem{border-left-color:#d96a76;background:#fffafa}
.ff-post--preparing,.ff-post--publishing{border-left-color:#4a90b8}
.ff-post--todo{border-left-color:#e0a02e}
.ff-post--published,.ff-post--cancelled{border-left-color:#c8cdc0;background:#f4f5f1;border-color:#e3e6dd}
.ff-post--published .ff-post__theme,.ff-post--cancelled .ff-post__theme,.ff-post--published .ff-post__when,.ff-post--cancelled .ff-post__when{color:#808878}
.ff-post--cancelled .ff-post__theme{text-decoration:line-through}
.ff-post--published .btn,.ff-post--cancelled .btn{opacity:.8}
.ff-post__when{min-width:150px;font-weight:750;line-height:1.35;color:#1f2d16}
.ff-post__when small{display:block;font-weight:600;color:var(--ff-muted);font-size:13px!important}
.ff-post__when .overdue{color:#a22c38}
.ff-post__body{flex:1;min-width:240px}
.ff-post__theme{display:block;margin:8px 0 2px;font-weight:700;font-size:16px;color:#1f2d16;text-decoration:none}
.ff-post__meta{font-size:13px;color:var(--ff-muted);line-height:1.55}
.ff-post__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media(max-width:767px){.ff-next__when{font-size:22px}.ff-post{padding:16px}.ff-post__when{min-width:100%}}