/* МОСТИК - единственный css платформы. Перенос из mockup/index.html 1:1 + login + .soon.
   Строгая редакционная вёрстка: без теней, без градиентов.
   --yellow только заливка, НИКОГДА цвет текста на светлом. */

:root{
  --ink:#0a0908; --yellow:#f2dc41; --hair:#e5e5e1; --warm:#f7f6f3;
  --gray:#6b6b6b; --sage:#7a9b80; --terra:#c4956a; --danger:#b5564a; --white:#fffefb;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--warm);color:var(--ink);font-size:14px}
a{color:inherit;text-decoration:none}

/* ── каркас ── */
.shell{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.rail{background:var(--ink);color:var(--warm);padding:20px 0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.rail .logo{padding:0 20px 18px;border-bottom:1px solid #2a2825}
.rail .logo b{font-weight:800;letter-spacing:.14em;font-size:15px}
.rail .logo span{display:block;font-size:10px;color:#8a877f;letter-spacing:.08em;margin-top:3px}
.nav{margin-top:14px;flex:1}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 20px;font-size:13px;color:#b5b2aa;border-left:3px solid transparent}
.nav a.on{color:var(--warm);border-left-color:var(--yellow);background:#141311;font-weight:600}
.nav a:hover{color:var(--warm)}
.nav .grp{padding:16px 20px 6px;font-size:9px;letter-spacing:.18em;color:#67645d;font-weight:700}
.nav .dot{width:6px;height:6px;border-radius:50%;background:#4a4741;flex-shrink:0}
.nav a.on .dot{background:var(--yellow)}
.who{padding:14px 20px;border-top:1px solid #2a2825;font-size:11px;color:#8a877f}
.who b{color:var(--warm);display:block;font-size:12px}
.who .out{display:block;margin-top:8px;font-size:10px;color:#67645d;letter-spacing:.08em}
.who .out:hover{color:var(--warm)}
.role{display:inline-block;background:var(--yellow);color:var(--ink);font-size:9px;font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:2px;margin-top:5px}

/* min-width:0 - КОРЕНЬ давней обрезки таблиц (найден 17.07). У ячейки грида по умолчанию
   min-width:auto: она не может стать уже содержимого, поэтому широкая таблица распирала
   .main, горизонтально ехала ВСЯ страница, а overflow-x на .tbl-wrap не включался никогда
   - правый край таблицы («Действия»: правка цены, ручной статус) был недостижим. */
.main{padding:0 0 60px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:baseline;padding:22px 32px 18px;border-bottom:1px solid var(--hair);background:var(--white)}
.top h1{font-size:19px;font-weight:800;letter-spacing:-.01em}
.top .date{font-size:12px;color:var(--gray)}
.wrap{padding:26px 32px;max-width:1120px}

/* ── пункт меню без готовой страницы ── */
.nav a.soon{opacity:.38;pointer-events:none;cursor:default}
.nav a.soon:hover{color:#b5b2aa}

/* ── общие блоки ── */
.kicker{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--gray);margin-bottom:10px}
.card{background:var(--white);border:1px solid var(--hair);border-radius:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.btn{display:inline-block;background:var(--ink);color:var(--warm);font-size:11px;font-weight:700;padding:6px 12px;border-radius:2px;cursor:pointer;border:none;font-family:inherit}
.btn.y{background:var(--yellow);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.tag{font-size:9px;font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:2px;background:var(--warm);border:1px solid var(--hair);color:var(--gray)}
.tag.sage{background:#eef3ef;color:var(--sage);border-color:#d3e0d5}
.tag.terra{background:#f7efe6;color:var(--terra);border-color:#ecdcc8}
.tag.dang{background:#f6e9e7;color:var(--danger);border-color:#ead2ce}

/* ── метрика ── */
.hero{display:grid;grid-template-columns:300px 1fr;gap:18px;margin-bottom:26px}
.metric{background:var(--ink);color:var(--warm);border-radius:4px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.metric .lbl{font-size:10px;letter-spacing:.16em;font-weight:800;color:#8a877f}
.metric .num{font-size:54px;font-weight:800;line-height:1;margin:14px 0 6px}
.metric .num small{font-size:22px;color:#8a877f;font-weight:600}
.metric .sub{font-size:11px;color:#b5b2aa}
.metric .bar{height:5px;background:#2a2825;border-radius:3px;margin-top:14px;overflow:hidden}
.metric .bar i{display:block;height:100%;width:33%;background:var(--yellow)}
.focus{padding:20px 22px}
.focus .row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13px}
.focus .row:last-child{border-bottom:none}
.chk{width:16px;height:16px;border:2px solid var(--ink);border-radius:2px;flex-shrink:0}
.chk.done{background:var(--yellow);border-color:var(--yellow);position:relative}
.chk.done::after{content:"✓";position:absolute;top:-3px;left:2px;font-size:12px;font-weight:800}
.done-t{color:var(--gray);text-decoration:line-through}

/* ── очередь ── */
.q{margin-bottom:26px}
.qitem{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--hair)}
.qitem:last-child{border-bottom:none}
.qitem .t b{display:block;font-size:13px;font-weight:700}
.qitem .t span{font-size:11px;color:var(--gray)}
.qitem .act{display:flex;gap:8px;flex-shrink:0}

/* ── лента ── */
.feed .f{display:grid;grid-template-columns:52px 1fr auto;gap:12px;padding:10px 18px;border-bottom:1px solid var(--hair);font-size:12px;align-items:baseline}
.feed .f:last-child{border-bottom:none}
.feed time{color:var(--gray);font-size:11px}
.feed .src{color:var(--gray);font-size:10px;letter-spacing:.08em;font-weight:700}

/* ── экраны ── */
.screen{margin-top:44px;border-top:2px solid var(--ink);padding-top:14px}
.screen>.shead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.screen>.shead h2{font-size:16px;font-weight:800}
.screen>.shead span{font-size:11px;color:var(--gray)}

/* контент: колонки */
.col{padding:0}
.col .chead{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:2px solid var(--ink);font-size:11px;font-weight:800;letter-spacing:.08em}
.col .n{color:var(--gray);font-weight:600}
.pc{padding:11px 14px;border-bottom:1px solid var(--hair);font-size:12px}
.pc b{display:block;font-weight:700;margin-bottom:2px}
.pc span{font-size:10px;color:var(--gray)}
.spark{margin-top:6px;height:22px}

/* горящая премия (Ф4): жёлтая заливка-акцент слева, не цвет текста */
.card.tool.hot{border-left:3px solid var(--yellow)}

/* Ф5 «Приёмка»: чекбокс-кнопка (htmx) и тег статуса в карточке проекта */
button.chk{padding:0;background:transparent;cursor:pointer;font:inherit}
.prside .proj .tag{display:inline-block;margin-top:5px}

/* кнопка-крестик «убрать» (фокус, позиции чек-листов) */
.xbtn{background:transparent;border:none;color:var(--gray);cursor:pointer;font-size:16px;
  line-height:1;padding:2px 4px;border-radius:2px;flex-shrink:0}
.xbtn:hover{color:var(--danger);background:var(--warm)}
/* строка правки позиции (inline-форма) */
.editrow{display:flex;gap:6px;align-items:center;padding:6px 0;flex-wrap:wrap}
.editrow input{border:1px solid var(--hair);border-radius:2px;padding:5px 7px;
  font-family:inherit;font-size:12px;background:var(--warm);color:var(--ink)}
.editrow input.t{flex:1;min-width:180px}

/* поля форм: единый вид для input/select/textarea в карточках */
.sel,.gridform input,.gridform select,.gridform textarea{border:1px solid var(--hair);
  border-radius:2px;padding:6px 8px;font-family:inherit;font-size:12px;
  background:var(--white);color:var(--ink)}
.gridform{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.gridform label{display:flex;flex-direction:column;gap:4px;font-size:10px;
  letter-spacing:.08em;font-weight:700;color:var(--gray)}
.gridform textarea{resize:vertical}
@media (max-width:760px){.gridform{grid-template-columns:1fr}}

/* таблицы (PR: премии, медиа, конкурсы) - плотная сетка вместо простыни карточек */
/* border-collapse: SEPARATE (не collapse) - обязательное условие: при collapse браузер
   игнорирует position:sticky на ячейках, и липкая колонка «Действия» молча не работает
   (проверено глазами 17.07 - тесты такое не ловят). border-spacing:0 сохраняет прежний
   вид: рамки рисуются на самих ячейках, двойных линий не будет. */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;background:var(--white)}
.tbl th{text-align:left;font-size:9px;letter-spacing:.12em;font-weight:800;color:var(--gray);
  padding:9px 10px;border-bottom:2px solid var(--ink);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.hot td{background:#fefcea}
.tbl tr.dim td{opacity:.55}
/* «Снято» (skip) = зачёркнуто: одной бледности мало - владелец читает её как «просто
   серое», а смысл статуса именно «вычеркнул, в этом году не идём». */
.tbl tr.dim td:first-child{text-decoration:line-through}
/* Откат статуса: тише глагола движения - это отмена промаха, а не следующий шаг. */
.tbl .st .undo{font-size:9px;padding:2px 5px;color:var(--gray);line-height:1}
.tbl .st .undo:hover{color:var(--ink)}
/* имя цели -> поиск по названию (своих URL у премий/медиа нет, см. pr_bridge._search_url).
   Глобально a{text-decoration:none}, поэтому аффорданс задаём здесь: волосяная линия
   темнеет на наведении. Жёлтый не трогаем - он только заливка. */
.tbl a.ext{border-bottom:1px solid var(--hair)}
.tbl a.ext:hover{border-bottom-color:var(--ink)}
/* статус + глагол перехода в одну строку: иначе кнопка «Подать →» наезжает на тег */
.tbl .st{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tbl .st .tag{flex-shrink:0}
.tbl .st form{display:inline-flex;margin:0}
.tbl .hotcell{white-space:nowrap}
.tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 18.07: таблица премий не помещалась - липкие «Действия» накрывали правый край, и
   «Регион» с «Дней» уезжали под них. Освободили место под фит/сложность/престиж, убрав
   три колонки: «Горит» дублировал подсветку строки tr.hot, «Дней» - дедлайн, «Регион»
   ушёл второй строкой под название. Единственный сигнал «горит» - фон строки, поэтому
   у горящих дополнительно красим счётчик дней. */
/* Стоимость раздувала таблицу: у .num стоит nowrap, а строки бывают под 40 знаков
   («взнос €400 + €300 jury + €2900 winner»). Переносим по словам в узкой колонке,
   полный текст остаётся в подсказке. Обрезать многоточием нельзя - именно в хвосте
   сидит winner fee, то есть настоящая цена победы. */
.tbl .money{max-width:128px;white-space:normal;word-break:break-word;line-height:1.35}
.tbl .sub{display:inline-block;font-size:9px;color:var(--gray);font-weight:400;letter-spacing:0}
.tbl .dl{white-space:nowrap}
.tbl .dl .sub{margin-left:4px}
.tbl tr.hot .dl .sub{color:var(--danger);font-weight:800}
/* Оценка, поставленная владельцем вручную: подчёркиванием отличаем от расчётной, иначе
   не видно, где мнение человека, а где эвристика. Особенно важно для престижа - его
   расчёт почти всегда «сверить», и ручные значения там единственно осмысленные. */
.tbl .tag.man{border-bottom:2px solid var(--ink)}
.grades{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.grades form{display:flex;align-items:center;gap:4px;margin:0}
.grades .gl{font-size:10px;color:var(--gray);white-space:nowrap}
.grades .gl b{color:var(--ink)}
/* «Действия» приколоты к правому краю: таблица шире экрана (8 колонок), и при смене
   статуса строка росла - колонка с «✎ подробнее» уезжала за край. А там живут ПРАВКА
   (цена/дедлайн/регион) и ручной статус - владелец их просто не находил и считал, что
   их нет. Липкая колонка = доступны всегда, сколько бы таблицу ни распирало.
   Фон обязателен и должен совпадать с фоном строки, иначе под ней просвечивает текст. */
.tbl .act{text-align:right;white-space:nowrap;position:sticky;right:0;background:var(--white);
  border-left:1px solid var(--hair)}
.tbl tr.hot .act{background:#fefcea}
/* Статус-ячейка резервирует ширину под САМЫЙ широкий набор (премия «подано»: тег +
   «Победа» + «Не прошло» + откат) - иначе смена статуса дёргает всю раскладку. */
.tbl .st{min-width:248px}
/* «Показать все» - была текстовая ссылка в сноске, владелец её не находил (17.07):
   реестр на 250 строк выглядел как список из 40. Теперь кнопка-заливка с числом. */
.more-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:10px 14px;font-size:11px;color:var(--gray);
  border-top:1px solid var(--hair);background:var(--warm)}
.more-bar .btn{text-decoration:none;white-space:nowrap}
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:4px;margin-bottom:26px}

/* воронка-ядро (Ф1) */
.funnel{display:flex;align-items:stretch;gap:2px;padding:14px 16px;margin-bottom:26px;position:relative;text-decoration:none;color:inherit}
.fstage{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;padding:8px 4px 10px;border-right:1px solid var(--hair);position:relative;min-height:76px}
.fstage:last-of-type{border-right:none}
.fstage b{font-size:22px;font-weight:800;line-height:1}
.fstage span{font-size:10px;color:var(--gray);text-align:center}
.fstage i{position:absolute;left:0;right:0;bottom:0;background:var(--warm);z-index:0}
.fstage.on i{background:var(--yellow)}
.fstage b,.fstage span{position:relative;z-index:1}
.fcap{position:absolute;top:-9px;right:16px;font-size:10px;color:var(--gray);background:var(--white);padding:0 6px}
/* пульс отделов (Ф1) */
.pulse{margin-bottom:26px}
.pcard{padding:14px 16px}
.ptop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.pname{font-size:11px;font-weight:700;letter-spacing:.04em}
.pdelta{font-size:11px;font-weight:800}
.pdelta.up{color:var(--sage)}.pdelta.down{color:var(--danger)}.pdelta.flat{color:var(--gray)}
.pval{font-size:24px;font-weight:800;line-height:1}
.pval small{font-size:11px;color:var(--gray);font-weight:600}

/* PR чек-лист */
.pr{display:grid;grid-template-columns:280px 1fr;gap:18px}
.prside{padding:16px}
.prside .proj{padding:10px 12px;border:1px solid var(--hair);border-radius:3px;margin-bottom:8px;font-size:12px;cursor:pointer}
.prside .proj.on{border-color:var(--ink);background:var(--warm);font-weight:700}
.prside .proj span{display:block;font-size:10px;color:var(--gray);font-weight:400;margin-top:2px}
.prmain{padding:18px 20px}
.prmain .ph{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.prmain .ph b{font-size:15px;font-weight:800}
.prog{height:5px;background:var(--warm);border:1px solid var(--hair);border-radius:3px;margin:10px 0 16px;overflow:hidden}
.prog i{display:block;height:100%;width:40%;background:var(--sage)}
.ci{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13px}
.ci:last-child{border-bottom:none}
.ci .by{margin-left:auto;font-size:10px;color:var(--gray)}

/* инструменты */
.tool{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.tool b{font-size:14px;font-weight:800}
.tool p{font-size:12px;color:var(--gray);line-height:1.5;flex:1}
.tool .foot{display:flex;justify-content:space-between;align-items:center}

.note{margin-top:40px;padding:14px 18px;background:#fdf8e2;border:1px solid #ede1a4;border-radius:4px;font-size:12px;color:#6b6234}

/* ── вход ── */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.login-card{width:340px;background:var(--white);border:1px solid var(--hair);border-radius:4px;padding:30px 28px}
.login-card .logo{margin-bottom:22px}
.login-card .logo b{font-weight:800;letter-spacing:.14em;font-size:16px;display:block}
.login-card .logo span{display:block;font-size:10px;color:var(--gray);letter-spacing:.08em;margin-top:3px}
.login-card label{display:block;font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--gray);margin-bottom:6px}
.login-card input{width:100%;padding:9px 11px;border:1px solid var(--hair);border-radius:2px;background:var(--warm);font-family:inherit;font-size:13px;color:var(--ink);margin-bottom:16px}
.login-card input:focus{outline:none;border-color:var(--ink)}
.login-card .btn{width:100%;padding:10px;text-align:center;font-size:12px}
.login-err{background:#f6e9e7;border:1px solid #ead2ce;color:var(--danger);font-size:12px;padding:8px 11px;border-radius:2px;margin-bottom:16px}

@media(max-width:900px){.shell{grid-template-columns:1fr}.rail{position:static;height:auto}.grid2,.grid3,.grid4,.hero,.pr{grid-template-columns:1fr}}

/* ── ЛЮДИ: карточки команды (20.07) ─────────────────────────────────────────
   «Баскетбольная карточка» исполнителя: кто, что умеет, насколько надёжен, сколько
   стоит. Четыре шкалы вместо одной звезды - чтобы было видно ПОЧЕМУ человек хорош:
   дешёвый и медленный против дорогого и безупречного это разные решения.
   Неоценённые не прячем и не рисуем нулём (ноль читался бы как «плохой») - честная
   плашка «не оценён» и место в конце списка. */
.h1{font-family:var(--serif,Georgia,serif);font-size:30px;line-height:1.15;margin:2px 0 8px}
.lede{font-size:13px;color:var(--gray);margin-bottom:20px;max-width:62ch}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
/* Класс .card уже занят каркасом (строка 48) - наши правила ОБЯЗАНЫ быть под .cards,
   иначе padding уедет на карточки дашборда, инструментов и проектов. */
.cards .card{border:1px solid var(--hair);border-radius:5px;background:var(--white);padding:14px}
.cards .card.off{opacity:.5}
.card-top{display:flex;align-items:center;gap:10px}
.ava{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--ink);
     color:var(--warm);display:flex;align-items:center;justify-content:center;
     font-size:12px;font-weight:800;letter-spacing:.04em}
.cards .card .who{flex:1;min-width:0;padding:0;border:none;color:inherit}
.cards .card .who b{display:block;font-size:14px;line-height:1.2;color:var(--ink)}
.cards .card .who .sub{display:block;font-size:10px;color:var(--gray);margin-top:2px}
.scales{margin:12px 0 10px;display:flex;flex-direction:column;gap:5px}
.scale{display:flex;align-items:center;gap:8px}
.scale .sl{font-size:10px;color:var(--gray);width:74px;flex-shrink:0}
.scale .bars{display:flex;gap:3px}
.scale .bars i{width:16px;height:5px;border-radius:2px;background:var(--warm);
               border:1px solid var(--hair)}
.scale .bars i.on{background:var(--ink);border-color:var(--ink)}
.gage{font-size:9px;color:var(--gray);margin-top:5px}
.gage.old{color:var(--danger)}
.ungraded{margin:12px 0 10px;font-size:10px;color:var(--gray);border:1px dashed var(--hair);
          border-radius:3px;padding:7px 9px}
.card-bot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:20px}
.card-bot .rate{font-size:11px;color:var(--ink);font-variant-numeric:tabular-nums}
.skills{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.skills .sk{font-size:9px;padding:2px 6px;border:1px solid var(--hair);border-radius:2px;
            color:var(--gray)}
.card-edit{margin-top:11px;border-top:1px solid var(--hair);padding-top:9px}
.card-edit summary{cursor:pointer;font-size:11px;color:var(--gray)}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.cform label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--gray)}
.cform label.wide{grid-column:1/-1}
.cform input,.cform select,.cform textarea{border:1px solid var(--hair);border-radius:3px;
   padding:5px 7px;font:inherit;font-size:11px;background:var(--white);color:var(--ink)}
.cform .grid4{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.cform button{grid-column:1/-1;justify-self:start;margin-top:3px}
.card-edit .del{margin-top:9px}
.card-edit .upd{margin-top:8px;font-size:9px;color:var(--gray)}
.addrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.addrow input{border:1px solid var(--hair);border-radius:3px;padding:6px 9px;font:inherit;
              font-size:12px;min-width:190px}
.empty{grid-column:1/-1;color:var(--gray);font-size:12px;padding:18px;border:1px dashed
       var(--hair);border-radius:4px}

/* ── различение карточек: роль -> цвет, статус -> стиль полосы (23.07) ──────────
   Один признак кодируем цветом (роль), другой стилем (пунктир = кандидат) - так
   карточки читаются сканированием, но глаз не тонет в радуге. Тона приглушённые,
   натуральные - та же семья, что цвета бригад в гантте Build Tracker. */
.cards .card{border-left:4px solid var(--rc,var(--hair))}   /* цвет полосы = роль */
.cards .card .ava{background:var(--rc,var(--ink))}          /* аватар в цвет роли */
/* --rc на голом классе (не .card.rt-*): цвет нужен и карточке, и свотчу в легенде. */
.rt-draft    {--rc:#8fa3b8}   /* чертёжник - техничный сине-серый */
.rt-design   {--rc:#c4956a}   /* дизайнер - терракота */
.rt-design-sr{--rc:#a9784f}   /* старший дизайнер - глубже терракота */
.rt-viz      {--rc:#9bb5a0}   /* визуализатор - шалфей */
.rt-graph    {--rc:#c4a5a5}   /* граф-дизайнер - пыльная роза */
.rt-decor    {--rc:#b8a56a}   /* декоратор - олива */
/* кандидат: та же роль-цветом, но полоса пунктиром + тёплый фон = «на рассмотрении,
   ещё не в команде». Стиль полосы несёт статус, не отнимая цвет у роли. */
.cards .card.cand{border-left-style:dashed;background:var(--warm)}
/* легенда-ключ: без неё цветовой код - загадка. Свотчи берут --rc из тех же .rt-*. */
.rolekey{display:flex;flex-wrap:wrap;gap:12px;margin:-8px 0 18px;font-size:10px;color:var(--gray)}
.rolekey .rk{display:inline-flex;align-items:center;gap:5px}
.rolekey .rk .sw{width:11px;height:11px;border-radius:2px;background:var(--rc,var(--hair));
                 flex-shrink:0}
.rolekey .rk.dash .sw{background:transparent;border:1px dashed var(--gray)}